Light Mode Component - Copy this Angular, Css Component to your project

/*-Reset-Styles-*/-*-{-margin:-0;-padding:-0;-box-sizing:-border-box;-}-body-{-body-{-font-family:-'IBM-Plex-Sans-Arabic',-sans-serif;-}-.popup-content,-.sidebar,-.main-content-{-font-family:-'IBM-Plex-Sans-Arabic',-sans-serif;-font-weight:-600;-/*-الوزن-المتوسط-للخط-*/-}-background-color:-#121212;-/*-خلفية-داكنة-*/-color:-#e0e0e0;-/*-لون-النص-*/-}-/*-Sidebar-Styles-*/-.sidebar-{-width:-250px;-height:-100vh;-background-color:-#1f1f1f;-color:-#e0e0e0;-padding:-20px;-position:-fixed;-top:-0;-left:-0;-display:-flex;-flex-direction:-column;-}-.sidebar-title-{-font-size:-24px;-color:-#ff9800;-/*-لون-مميز-*/-text-align:-center;-margin-bottom:-20px;-}-.sidebar-menu-{-list-style:-none;-padding:-0;-}-.sidebar-menu-li-{-margin-bottom:-15px;-}-.sidebar-menu-a-{-text-decoration:-none;-color:-#e0e0e0;-padding:-10px;-border-radius:-5px;-display:-block;-transition:-all-0.3s-ease;-}-.sidebar-menu-a.active,-.sidebar-menu-a:hover-{-background-color:-#ff9800;-color:-#1f1f1f;-}-.logout-button-{-margin-top:-auto;-text-decoration:-none;-color:-#fff;-padding:-10px;-text-align:-center;-background-color:-#d32f2f;-border-radius:-5px;-transition:-background-color-0.3s-ease;-}-.logout-button:hover-{-background-color:-#b71c1c;-}-/*-Main-Content-Styles-*/-.dashboard-container-{-display:-flex;-}-.main-content-{-margin-left:-250px;-padding:-20px;-flex:-1;-background-color:-#181818;-/*-لون-أغمق-للخلفية-*/-min-height:-100vh;-overflow-y:-auto;-}-.main-content-h1-{-font-size:-28px;-margin-bottom:-20px;-color:-#ff9800;-}-/*-Search-Container-Styles-*/-.search-container-{-display:-flex;-gap:-10px;-padding:-15px;-background-color:-#1e1e1e;-border-radius:-8px;-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.7);-margin-bottom:-20px;-}-.search-container-input-{-flex:-1;-padding:-10px;-border:-1px-solid-#444;-border-radius:-5px;-background-color:-#2c2c2c;-color:-#e0e0e0;-font-size:-14px;-transition:-border-color-0.3s-ease,-box-shadow-0.3s-ease;-}-.search-container-input:focus-{-border-color:-#ff9800;-outline:-none;-box-shadow:-0-0-5px-rgba(255,-152,-0,-0.5);-}-.search-container-button-{-padding:-10px-20px;-background-color:-#ff9800;-color:-#1f1f1f;-font-size:-14px;-border:-none;-border-radius:-5px;-cursor:-pointer;-transition:-background-color-0.3s-ease,-transform-0.2s-ease;-}-.search-container-button:hover-{-background-color:-#e09100;-transform:-translateY(-2px);-}-/*-Table-Styles-*/-.modern-table-{-width:-100%;-border-collapse:-collapse;-margin-top:-20px;-background-color:-#1e1e1e;-border-radius:-8px;-overflow:-hidden;-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.7);-}-.modern-table-th,-.modern-table-td-{-text-align:-left;-padding:-12px-15px;-border-bottom:-1px-solid-#444;-white-space:-nowrap;-text-overflow:-ellipsis;-overflow:-hidden;-}-.modern-table-th-{-background-color:-#2c2c2c;-color:-#ff9800;-}-.modern-table-tr:hover-{-background-color:-#333;-}-.modern-table-tbody-tr:last-child-td-{-border-bottom:-none;-}-/*-Button-Styles-*/-button-{-padding:-10px-20px;-font-size:-14px;-border:-none;-border-radius:-5px;-cursor:-pointer;-transition:-background-color-0.3s-ease,-transform-0.2s-ease;-}-button:hover-{-transform:-translateY(-2px);-}-.edit-button-{-background-color:-#4caf50;-color:-white;-}-.edit-button:hover-{-background-color:-#388e3c;-}-.delete-button-{-background-color:-#f44336;-color:-white;-}-.delete-button:hover-{-background-color:-#d32f2f;-}-.add-service-button-{-background-color:-#ff9800;-/*-Orange-color-*/-color:-#1e1e1e;-/*-White-text-*/-border:-none;-padding:-10px-20px;-border-radius:-5px;-font-size:-14px;-cursor:-pointer;-transition:-background-color-0.3s-ease,-transform-0.2s-ease;-}-.add-service-button:hover-{-background-color:-#e68900;-/*-Slightly-darker-orange-on-hover-*/-transform:-translateY(-2px);-/*-Small-lift-effect-*/-}-.add-service-button:active-{-background-color:-#cc7a00;-/*-Even-darker-orange-on-click-*/-transform:-translateY(0);-/*-Reset-lift-effect-*/-}-.service-id-{-color:-white;-/*-White-text-color-*/-text-decoration:-none;-/*-Remove-underline-*/-font-weight:-bold;-/*-Make-it-bold-(optional)-*/-cursor:-pointer;-transition:-color-0.3s-ease;-}-.service-id:hover-{-color:-#ff9800;-/*-Orange-color-on-hover-for-better-visibility-*/-text-decoration:-underline;-/*-Optional-underline-effect-on-hover-*/-}-/*-Service-Details-Modal-Styles-*/-#serviceDetailsModal-{-display:-none;-/*-Hidden-by-default-*/-position:-fixed;-top:-0;-left:-0;-width:-100%;-height:-100%;-background-color:-rgba(0,-0,-0,-0.7);-/*-Dim-background-*/-justify-content:-center;-align-items:-center;-z-index:-1000;-}-#serviceDetailsModal-.popup-content-{-background:-#1e1e1e;-/*-Dark-background-*/-padding:-20px;-border-radius:-10px;-width:-400px;-max-width:-90%;-box-shadow:-0-4px-20px-rgba(0,-0,-0,-0.7);-position:-relative;-animation:-fadeIn-0.3s-ease-in-out;-color:-#e0e0e0;-}-#serviceDetailsModal-h2-{-font-size:-22px;-margin-bottom:-15px;-text-align:-center;-color:-#ff9800;-/*-Orange-title-*/-border-bottom:-1px-solid-#444;-padding-bottom:-10px;-}-#serviceDetails-{-line-height:-1.6;-/*-Spacing-between-lines-*/-}-#serviceDetails-p-{-margin:-10px-0;-font-size:-14px;-color:-#e0e0e0;-}-#serviceDetails-p-strong-{-color:-#ff9800;-/*-Highlighted-key-labels-*/-}-#serviceDetailsModal-a-{-color:-#4caf50;-/*-Green-links-*/-text-decoration:-none;-font-weight:-bold;-transition:-color-0.3s-ease;-}-#serviceDetailsModal-a:hover-{-color:-#81c784;-/*-Light-green-on-hover-*/-text-decoration:-underline;-}-/*-Close-Button-*/-#closeDetailsModal-{-position:-absolute;-top:-10px;-right:-15px;-font-size:-20px;-color:-#aaa;-cursor:-pointer;-transition:-color-0.3s-ease;-}-#closeDetailsModal:hover-{-color:-#fff;-}-/*-Popup-Container-*/-.popup-container-{-display:-none;-position:-fixed;-top:-0;-left:-0;-width:-100%;-height:-100%;-background-color:-rgba(0,-0,-0,-0.7);-justify-content:-center;-align-items:-center;-z-index:-1000;-}-.popup-content-{-background:-#1e1e1e;-padding:-20px;-/*-Keeps-padding-dynamic-for-flexibility-*/-border-radius:-10px;-width:-auto;-/*-Adapts-to-content-width-*/-max-width:-90%;-/*-Limits-maximum-width-for-responsiveness-*/-box-shadow:-0-4px-20px-rgba(0,-0,-0,-0.7);-position:-relative;-animation:-fadeIn-0.3s-ease-in-out;-display:-inline-block;-/*-Ensures-the-content-determines-the-size-*/-}-@keyframes-fadeIn-{-0%-{-opacity:-0;-transform:-scale(0.85)-translateY(-50px)-rotateX(-10deg);-}-40%-{-opacity:-0.6;-transform:-scale(1.1)-translateY(20px)-rotateX(5deg);-}-70%-{-opacity:-0.85;-transform:-scale(0.95)-translateY(-10px)-rotateX(0deg);-}-100%-{-opacity:-1;-transform:-scale(1)-translateY(0)-rotateX(0deg);-}-}-.popup-content-h2-{-margin-bottom:-20px;-font-size:-22px;-color:-#ff9800;-text-align:-center;-border-bottom:-1px-solid-#444;-padding-bottom:-10px;-}-.popup-content-label-{-display:-grid;-grid-template-columns:-150px-1fr;-/*-Label-width-and-input-field-width-*/-align-items:-center;-margin-bottom:-15px;-font-size:-14px;-color:-#e0e0e0;-}-.popup-content-input,-.popup-content-select-{-padding:-10px;-border:-1px-solid-#444;-border-radius:-5px;-font-size:-14px;-background-color:-#2c2c2c;-color:-#e0e0e0;-transition:-border-color-0.3s-ease,-box-shadow-0.3s-ease;-}-.popup-content-input:focus,-.popup-content-select:focus-{-border-color:-#ff9800;-outline:-none;-box-shadow:-0-0-5px-rgba(255,-152,-0,-0.5);-}-.popup-actions-{-display:-flex;-justify-content:-space-between;-margin-top:-20px;-}-#saveChanges-{-background-color:-#4caf50;-color:-white;-}-#saveChanges:hover-{-background-color:-#388e3c;-}-#cancelButton-{-background-color:-#f44336;-color:-white;-}-#cancelButton:hover-{-background-color:-#d32f2f;-}-/*-Stats-Container-*/-.stats-container-{-display:-flex;-gap:-20px;-flex-wrap:-wrap;-margin-top:-20px;-}-/*-Stat-Box-*/-.stat-box-{-background-color:-#1e1e1e;-/*-لون-خلفية-داكن-*/-color:-#e0e0e0;-/*-لون-النص-*/-padding:-20px;-border-radius:-12px;-/*-حواف-أكثر-نعومة-*/-flex:-1-1-calc(50%---20px);-text-align:-center;-box-shadow:-0-4px-15px-rgba(0,-0,-0,-0.6);-/*-ظل-أكثر-عمقًا-*/-transition:-all-0.3s-ease-in-out;-}-.stat-box-h3-{-font-size:-20px;-margin-bottom:-10px;-color:-#ff9800;-/*-لون-مميز-*/-}-.stat-box-p-{-font-size:-28px;-/*-حجم-النص-أكبر-قليلاً-*/-font-weight:-bold;-margin:-0;-color:-#fff;-/*-نص-واضح-*/-}-.stat-box:hover-{-background-color:-#2c2c2c;-/*-لون-مختلف-عند-التحويم-*/-transform:-translateY(-5px);-box-shadow:-0-6px-20px-rgba(0,-0,-0,-0.9);-/*-ظل-أكثر-عمقًا-عند-التحويم-*/-}-/*-Form-Group-*/-.form-group-{-display:-flex;-gap:-15px;-/*-مسافة-بين-العناصر-*/-margin-top:-15px;-/*-مسافة-من-الأعلى-*/-padding:-15px;-background-color:-#1e1e1e;-/*-خلفية-داكنة-*/-border-radius:-8px;-/*-حواف-مستديرة-*/-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.7);-/*-ظل-للصندوق-*/-}-/*-Form-Group-Input-*/-.form-group-input-{-flex:-1;-padding:-12px;-border:-1px-solid-#444;-/*-لون-الحواف-*/-border-radius:-5px;-background-color:-#2c2c2c;-/*-لون-خلفية-الحقول-*/-color:-#e0e0e0;-/*-لون-النص-*/-font-size:-14px;-transition:-border-color-0.3s-ease,-box-shadow-0.3s-ease;-}-.form-group-input:focus-{-border-color:-#ff9800;-/*-لون-الحواف-عند-التركيز-*/-outline:-none;-box-shadow:-0-0-5px-rgba(255,-152,-0,-0.5);-/*-تأثير-التركيز-*/-}-/*-Form-Group-Button-*/-.form-group-button-{-padding:-12px-20px;-background-color:-#ff9800;-/*-لون-الأزرار-*/-color:-#1f1f1f;-/*-لون-النص-داخل-الأزرار-*/-border:-none;-border-radius:-5px;-font-size:-14px;-cursor:-pointer;-transition:-background-color-0.3s-ease,-transform-0.2s-ease;-}-.form-group-button:hover-{-background-color:-#e09100;-/*-لون-عند-التحويم-*/-transform:-translateY(-2px);-/*-رفع-بسيط-عند-التحويم-*/-}-.form-group-button:active-{-background-color:-#b36800;-/*-لون-عند-النقر-*/-transform:-translateY(0);-}-.results-container-{-margin-top:-20px;-background-color:-#1e1e2f;-padding:-20px;-border-radius:-8px;-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.3);-}-.modern-table-{-width:-100%;-border-collapse:-collapse;-background-color:-#2c2c2c;-color:-#e0e0e0;-border-radius:-8px;-overflow:-hidden;-}-.modern-table-th,-.modern-table-td-{-text-align:-left;-padding:-12px-15px;-border-bottom:-1px-solid-#444;-font-size:-14px;-}-.modern-table-th-{-background-color:-#444;-color:-#ff9800;-}-.modern-table-tr:hover-{-background-color:-#333;-}-.modern-table-tbody-tr:last-child-td-{-border-bottom:-none;-}-.actions-button-{-padding:-5px-10px;-background-color:-#007bff;-color:-white;-border:-none;-border-radius:-5px;-cursor:-pointer;-transition:-background-color-0.3s-ease;-}-.actions-button:hover-{-background-color:-#0056b3;-}-#order-details-container-{-display:-none;-/*-Hide-by-default-*/-}-.service-buttons-{-display:-flex;-gap:-10px;-margin-bottom:-20px;-}-/*-Delete-Service-Button-*/-.delete-service-button-{-background-color:-#f44336;-/*-Red-for-delete-*/-color:-white;-padding:-10px-20px;-border:-none;-border-radius:-5px;-cursor:-pointer;-transition:-background-color-0.3s-ease,-transform-0.2s-ease;-}-.delete-service-button:hover-{-background-color:-#d32f2f;-transform:-translateY(-2px);-}-.delete-service-button:active-{-background-color:-#b71c1c;-transform:-translateY(0);-}-/*-Delete-Service-Modal-*/-#deleteServiceModal-.popup-content-{-background:-#1e1e1e;-color:-#e0e0e0;-padding:-20px;-border-radius:-10px;-width:-400px;-max-width:-90%;-box-shadow:-0-4px-15px-rgba(0,-0,-0,-0.7);-animation:-fadeIn-0.3s-ease-in-out;-}-.iptv-add-form-{-display:-flex;-flex-direction:-column;-gap:-15px;-margin-bottom:-20px;-padding:-20px;-background-color:-#1e1e1e;-border-radius:-8px;-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.7);-}-.iptv-add-form-label-{-display:-flex;-flex-direction:-column;-font-size:-14px;-color:-#e0e0e0;-}-.iptv-add-form-input,-.iptv-add-form-select-{-padding:-10px;-border:-1px-solid-#444;-border-radius:-5px;-background-color:-#2c2c2c;-color:-#e0e0e0;-font-size:-14px;-}-.iptv-add-form-button-{-padding:-10px-20px;-background-color:-#28a745;-color:-white;-border:-none;-border-radius:-5px;-cursor:-pointer;-font-size:-14px;-}-.iptv-add-form-button:hover-{-background-color:-#218838;-}-.history-table-table-{-width:-100%;-border-collapse:-collapse;-margin-top:-20px;-}-.history-table-th,-.history-table-td-{-text-align:-left;-padding:-10px;-border:-1px-solid-#444;-}-.history-table-th-{-background-color:-#ff9800;-color:-white;-}-.history-table-tr:nth-child(even)-{-background-color:-#2c2c2c;-}-.history-table-tr:hover-{-background-color:-#3a3a3a;-}-.delete-button-{-background-color:-#f44336;-color:-white;-border:-none;-padding:-5px-10px;-border-radius:-5px;-cursor:-pointer;-}-.delete-button:hover-{-background-color:-#d32f2f;-}-.edit-webhook-container-{-background:-linear-gradient(135deg,-#2c2c2c,-#1e1e1e);-padding:-50px;-border-radius:-12px;-margin-top:-30px;-box-shadow:-0-6px-15px-rgba(0,-0,-0,-0.8);-max-width:-650px;-margin:-30px-auto;-border:-1px-solid-#444;-}-.edit-webhook-container-h2-{-font-size:-24px;-color:-#ffa726;-margin-bottom:-25px;-text-align:-center;-border-bottom:-2px-solid-#555;-padding-bottom:-15px;-font-weight:-bold;-text-transform:-uppercase;-}-.edit-webhook-container-.form-group-{-display:-flex;-flex-wrap:-wrap;-gap:-20px;-justify-content:-space-between;-align-items:-center;-}-.edit-webhook-container-.form-group-input-{-flex:-1-1-48%;-/*-التحكم-بحجم-الحقول-*/-padding:-12px;-font-size:-16px;-color:-#fff;-background-color:-#333;-border:-1px-solid-#555;-border-radius:-8px;-transition:-border-color-0.3s-ease,-box-shadow-0.3s-ease,-background-color-0.3s-ease;-}-.edit-webhook-container-.form-group-input:focus-{-border-color:-#ffa726;-outline:-none;-background-color:-#444;-box-shadow:-0-0-8px-rgba(255,-167,-38,-0.6);-}-.edit-webhook-container-.form-group-button-{-flex:-1-1-100%;-background:-linear-gradient(135deg,-#ffa726,-#ff9800);-color:-#fff;-border:-none;-padding:-12px;-font-size:-16px;-font-weight:-bold;-border-radius:-8px;-cursor:-pointer;-transition:-background-0.3s-ease,-transform-0.2s-ease;-text-transform:-uppercase;-box-shadow:-0-3px-10px-rgba(255,-152,-0,-0.5);-}-.edit-webhook-container-.form-group-button:hover-{-background:-linear-gradient(135deg,-#ff9800,-#e68a00);-transform:-scale(1.02);-box-shadow:-0-5px-15px-rgba(255,-152,-0,-0.7);-}-.edit-webhook-container-.form-group-button:active-{-transform:-scale(0.98);-box-shadow:-0-2px-8px-rgba(255,-152,-0,-0.5);-}-#updateResult-{-margin-top:-15px;-font-size:-14px;-text-align:-center;-color:-#e0e0e0;-}-#addBalanceButton-{-background-color:-#4caf50;-color:-white;-border:-none;-padding:-5px-15px;-font-size:-14px;-border-radius:-5px;-cursor:-pointer;-transition:-background-color-0.3s-ease;-}-#addBalanceButton:hover-{-background-color:-#388e3c;-}-.order-link-{-color:-orange;-/*-Set-the-text-color-to-orange-*/-text-decoration:-none;-/*-Remove-underline-*/-font-weight:-bold;-/*-Optional:-Make-it-bold-*/-}-.order-link:hover-{-text-decoration:-underline;-/*-Add-underline-on-hover-*/-}-optimze-this-code-and-switch-it-from-dark-mode-to-light-mode