/*
 * الوضع الليلي للوحة التحكم
 * بيشتغل لما الصفحة يكون عليها class="dark" (بيتحط من includes/theme_head).
 * بيتحمّل بعد adminlte.css و main.css فبيغلب عليهم. !important بس في الأماكن اللي main.css نفسه حاطط فيها !important.
 */

html.dark {
	--a-bg: #14121c;
	--a-surface: #1d1a28;
	--a-surface-2: #262236;
	--a-surface-3: #302b44;
	--a-border: #36304d;
	--a-text: #ece9f5;
	--a-text-2: #bdb8cf;
	--a-text-3: #8d88a3;
	--a-brand: #4f1f8a;
	--a-brand-text: #c4a6f2;

	color-scheme: dark;
}

/* ---------- layout ---------- */
html.dark body,
html.dark .wrapper,
html.dark .content-wrapper {
	background-color: var(--a-bg);
	color: var(--a-text);
}
html.dark .main-footer {
	background-color: var(--a-bg);
	border-top-color: var(--a-border);
	color: var(--a-text-3);
}
html.dark aside,
html.dark .main-sidebar {
	background-color: #2b1650;
}
html.dark .nav-treeview a.nav-link.active { color: #fff; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .card-title,
html.dark .text-dark {
	color: var(--a-text) !important;
}
html.dark .text-muted,
html.dark .text-gray { color: var(--a-text-3) !important; }
html.dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: var(--a-brand-text); }
html.dark hr { border-top-color: var(--a-border); }

/* ---------- surfaces ---------- */
html.dark .card,
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .login,
html.dark .bg-white,
html.dark .bg-light,
html.dark .logo-box,
html.dark .btn-selectLight,
html.dark .textbox-n,
html.dark .pac-card,
html.dark #pac-input,
html.dark #pac-input2 {
	background-color: var(--a-surface) !important;
	color: var(--a-text);
	box-shadow: none;
}
html.dark .modal-header,
html.dark .modal-footer,
html.dark .card-header,
html.dark .card-footer {
	border-color: var(--a-border);
	background-color: transparent;
}
html.dark .modal .close {
	background-color: var(--a-surface);
	color: var(--a-text);
}
html.dark .dropdown-item,
html.dark .selectMenu .dropdown-item { color: var(--a-text-2) !important; }
html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus,
html.dark .selectMenu .dropdown-item:active {
	background-color: var(--a-surface-3);
	color: var(--a-text) !important;
}
html.dark .btn-selectLight + .dropdown-menu.show .dropdown-item.active,
html.dark .btn-select + .dropdown-menu.show .dropdown-item.active {
	background-color: var(--a-surface-2);
}

/* small grey pills / boxes */
html.dark .btn-gray,
html.dark .user,
html.dark .notifications,
html.dark .searchIcon,
html.dark .main-slider,
html.dark .title-box,
html.dark .service-provider,
html.dark .badge-dark,
html.dark .checkmark,
html.dark .tabs .nav-pills .nav-link {
	background-color: var(--a-surface-2);
	color: var(--a-text-2);
}

/* light tinted buttons and badges */
html.dark .btn-lightBlue,
html.dark .btn-lightBlue2 { background-color: rgba(51, 147, 205, 0.18); color: #7cc4ef; }
html.dark .btn-lightOrange { background-color: rgba(243, 146, 4, 0.18); color: #f5b452; }
html.dark .btn-lightRed { background-color: rgba(248, 4, 79, 0.18); color: #ff6b98; }
html.dark .badge-lightGreen { background-color: rgba(0, 189, 149, 0.18); color: #4fe0bf; }
html.dark .badge-lightOrange { background-color: rgba(243, 146, 4, 0.18); color: #f5b452; }
html.dark .dTitles { background-color: rgba(51, 147, 205, 0.16); color: #7cc4ef; }
html.dark .btn-dark { background-color: var(--a-surface-3); }

/* ---------- tables ---------- */
html.dark table {
	background-color: var(--a-surface) !important;
	color: var(--a-text);
}
html.dark thead { background-color: var(--a-brand); }
html.dark .table td,
html.dark .table th,
html.dark .table thead th,
html.dark .table-bordered,
html.dark .table-bordered td,
html.dark .table-bordered th {
	border-color: var(--a-border);
	color: inherit;
}
html.dark thead th { color: #fff; }
html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.025); }
html.dark .table-hover tbody tr:hover { background-color: var(--a-surface-2); color: var(--a-text); }
html.dark .dataTables_wrapper,
html.dark .dataTables_info,
html.dark .dataTables_length,
html.dark .dataTables_filter { color: var(--a-text-2); }
html.dark .page-link,
html.dark .page-item.disabled .page-link {
	background-color: var(--a-surface-2);
	color: var(--a-text-2);
}

/* ---------- forms ---------- */
html.dark .form-control,
html.dark input.form-control,
html.dark textarea.form-control,
html.dark select.form-control,
html.dark .form-control:focus,
html.dark input.form-control::placeholder,
html.dark .input-group,
html.dark .input-group input.form-control,
html.dark .content-wrapper .input-group,
html.dark .content-wrapper .input-group input.form-control,
html.dark .modal .form-group input,
html.dark .modal .form-group textarea,
html.dark .modal select.form-control,
html.dark .tableSearch,
html.dark .tableSearch2,
html.dark .custom-select {
	background-color: var(--a-surface-2);
	color: var(--a-text);
	border-color: var(--a-border);
}
html.dark #searchForm input,
html.dark .comment input.form-control {
	background-color: var(--a-surface-2) !important;
	color: var(--a-text) !important;
}
html.dark .form-control::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--a-text-3); background-color: transparent; }
html.dark .input-group-text { color: var(--a-text-2); }
html.dark label { color: var(--a-text-2); }
html.dark .custom-control-label::before {
	background-color: var(--a-surface-3);
	border-color: var(--a-border);
	box-shadow: none !important;
}

/* select2 (supervisors roles) */
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-search.select2-search--inline textarea.form-control {
	background-color: var(--a-surface-2) !important;
	color: var(--a-text) !important;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: rgba(243, 146, 4, 0.18) !important;
	color: #f5b452 !important;
}
html.dark .select2-dropdown,
html.dark .select2-container--default .select2-results__option {
	background-color: var(--a-surface);
	color: var(--a-text);
	border-color: var(--a-border);
}
html.dark .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--a-surface-3); }

/* date range picker / summernote */
html.dark .daterangepicker,
html.dark .daterangepicker .calendar-table,
html.dark .note-editor .note-toolbar,
html.dark .note-editor .note-editing-area .note-editable {
	background-color: var(--a-surface);
	color: var(--a-text);
	border-color: var(--a-border);
}

/* alerts */
html.dark .alert-success { background-color: rgba(30, 142, 62, 0.18); color: #7fe0a0; border-color: rgba(30, 142, 62, 0.35); }
html.dark .alert-danger { background-color: rgba(217, 48, 37, 0.18); color: #ff9a92; border-color: rgba(217, 48, 37, 0.35); }
html.dark .alert-light { background-color: var(--a-surface-2); color: var(--a-text-2); border-color: var(--a-border); }

/* ---------- dashboard (index) cards: they read these variables ---------- */
html.dark .dash {
	--ink-1: #ece9f5;
	--ink-2: #bdb8cf;
	--ink-3: #8d88a3;
	--line: #36304d;
	--brand: #a77fe0;
	--brand-soft: #2e2347;
}
html.dark .dash .dash-card { background: var(--a-surface); }
html.dark .dash .state-closed { background: rgba(30, 142, 62, 0.18); color: #7fe0a0; }
html.dark .dash .state-open { background: rgba(176, 96, 0, 0.2); color: #f5b452; }
html.dark .dash .range-switch .btn:not(.active) { color: var(--a-text-2); border-color: var(--a-border); }

/* ---------- login / forgot / reset pages ---------- */
/* keep the illustration but dim it so the page is dark */
html.dark .container-fluid[style*="bg3.png"] {
	box-shadow: inset 0 0 0 100vmax rgba(20, 18, 28, 0.94);
}

/* browser autofill paints its own light/blue background on inputs */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 100px var(--a-surface-2) inset;
	-webkit-text-fill-color: var(--a-text);
	caret-color: var(--a-text);
}
/* logo on a rounded white plate, same as the website */
html.dark img[src*="logo.webp"] {
	background-color: #fff;
	border-radius: 14px;
	padding: 8px 14px;
}
html.dark .login .remember-me { color: var(--a-text-2); }
html.dark .login .remember-box { background: var(--a-surface-2); border-color: var(--a-border); }

/* ---------- theme toggle button ---------- */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: #f3f3f3;
	color: #60269e;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.theme-toggle:hover { background: #ebe3f6; }
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(96, 38, 158, 0.3); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle { background: var(--a-surface-2); color: #fbbf24; }
html.dark .theme-toggle:hover { background: var(--a-surface-3); }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }