/* ==========================================================================
   Modern theme override layer — loaded AFTER style.css + all-themes.css.
   Overrides colors/spacing/typography only; does not rename any class or
   id that assets/js/admin.js depends on for sidebar/menu/form behavior.
   ========================================================================== */

:root {
	--accent: #4F46E5;
	--accent-dark: #4338CA;
	--accent-tint: #EEF2FF;
	--ink: #1E293B;
	--ink-soft: #64748B;
	--border: #E2E8F0;
	--canvas: #F8FAFC;
	--sidebar-from: #1E1B4B;
	--sidebar-to: #15132B;
}

/* ---- Typography ---------------------------------------------------- */
body,
.navbar,
.sidebar,
.card,
.modal,
table,
.btn,
input,
select,
textarea,
.form-control {
	font-family: 'Inter', 'Roboto', Arial, sans-serif;
}

body {
	background-color: var(--canvas);
	color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', 'Roboto', Arial, sans-serif;
	font-weight: 600;
	color: var(--ink);
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-dark); }

/* ---- Top navbar ------------------------------------------------------ */
.navbar {
	background-color: #fff !important;
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.theme-blue .navbar-brand,
.theme-blue .navbar-brand:hover,
.theme-blue .navbar-brand:active,
.theme-blue .navbar-brand:focus {
	color: var(--ink) !important;
	font-weight: 700;
}

.theme-blue .bars { color: var(--ink) !important; }

.theme-blue .nav > li > a { color: var(--ink) !important; }
.theme-blue .nav > li > a:hover,
.theme-blue .nav > li > a:focus {
	background-color: var(--accent-tint) !important;
	border-radius: 8px;
}

/* ---- Sidebar ----------------------------------------------------------- */
.sidebar {
	background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%) !important;
	box-shadow: 2px 0 10px rgba(0, 0, 0, .12);
}

.sidebar .menu .list .header {
	background: transparent !important;
	color: rgba(203, 213, 225, .55);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 20px 20px 8px;
}

.sidebar .menu .list a {
	color: #CBD5E1 !important;
	margin: 2px 12px;
	border-radius: 10px;
	transition: background-color .15s ease;
}

.sidebar .menu .list a span { color: #F1F5F9 !important; font-weight: 500; }
.sidebar .menu .list a i { color: #93A0C4 !important; }

.sidebar .menu .list a:hover { background-color: rgba(255, 255, 255, .06); }

.sidebar .menu .list li.active {
	background-color: transparent !important;
}
.sidebar .menu .list li.active > a,
.sidebar .menu .list li.active > :first-child {
	background-color: rgba(79, 70, 229, .35) !important;
	border-radius: 10px;
}
.theme-blue .sidebar .menu .list li.active > :first-child i,
.theme-blue .sidebar .menu .list li.active > :first-child span {
	color: #fff !important;
}

.sidebar .menu .list .ml-menu { background-color: rgba(0, 0, 0, .15) !important; }

.sidebar .user-info {
	background: linear-gradient(135deg, rgba(79, 70, 229, .55), rgba(30, 27, 75, .85)), linear-gradient(180deg, var(--sidebar-from), var(--sidebar-to));
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar .user-info .name h3,
.sidebar .user-info .email h4 { color: #fff !important; }
.sidebar .user-info .email h4 { color: rgba(255, 255, 255, .7) !important; font-weight: 400; }

.sidebar .legal {
	background-color: var(--sidebar-to) !important;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.theme-blue .sidebar .legal .copyright,
.sidebar .legal .copyright { color: rgba(203, 213, 225, .6); }
.theme-blue .sidebar .legal .copyright a { color: #A5B4FC !important; }
.sidebar .legal .version { color: rgba(203, 213, 225, .4); }

/* ---- Content canvas ----------------------------------------------------- */
.content { background-color: var(--canvas); }

/* ---- Cards --------------------------------------------------------------- */
.card {
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
	border: 1px solid var(--border);
}

.card .header {
	border-bottom: 1px solid var(--border);
	border-radius: 14px 14px 0 0;
	font-weight: 600;
}
.card .header h2 { color: var(--ink); font-weight: 600; }

.card .body { color: #475569; }

.card .header.bg-blue,
.card .header.bg-indigo,
.card .header.bg-orange,
.card .header.bg-green,
.card .header.bg-red,
.card .header.bg-teal,
.card .header.bg-cyan,
.card .header.bg-black,
.card .header.bg-grey,
.card .header.bg-light-blue {
	border-radius: 14px 14px 0 0;
	border-bottom: none;
}

/* ---- Info boxes (KPI tiles) ---------------------------------------------- */
.info-box {
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
	border: 1px solid var(--border);
	height: auto;
	min-height: 84px;
	padding: 16px;
	align-items: center;
}
.info-box .icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background-color: transparent !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.info-box .icon i { font-size: 26px !important; border-radius: 12px; }
.info-box .content { padding-left: 16px; }
.info-box .content .text { color: var(--ink-soft); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.info-box .content .number { color: var(--ink); font-weight: 700; }

/* ---- Buttons --------------------------------------------------------------- */
.btn:not(.btn-link):not(.btn-circle) {
	border-radius: 8px !important;
	box-shadow: none !important;
	font-weight: 600;
	letter-spacing: .2px;
	transition: transform .1s ease, box-shadow .15s ease;
}
.btn:not(.btn-link):not(.btn-circle):hover {
	box-shadow: 0 4px 10px rgba(15, 23, 42, .12) !important;
	transform: translateY(-1px);
}
.btn-primary, .btn.bg-blue, .btn.bg-indigo {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn.bg-blue:hover, .btn.bg-indigo:hover {
	background-color: var(--accent-dark) !important;
	border-color: var(--accent-dark) !important;
}
.btn-default { border: 1px solid var(--border) !important; color: var(--ink) !important; }

/* ---- Labels / badges --------------------------------------------------------- */
.label {
	border-radius: 999px !important;
	padding: 4px 10px;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .3px;
}

/* ---- Alerts (soft-tint style) ------------------------------------------------- */
.alert {
	border-radius: 10px;
	border-left: 4px solid rgba(0, 0, 0, .15);
	box-shadow: none;
}
.alert.bg-red { background-color: #FEF2F2 !important; color: #B91C1C !important; border-left-color: #EF4444; }
.alert.bg-green { background-color: #F0FDF4 !important; color: #15803D !important; border-left-color: #22C55E; }
.alert.bg-orange { background-color: #FFFBEB !important; color: #B45309 !important; border-left-color: #F59E0B; }
.alert .close { color: inherit; opacity: .6; }

/* ---- Tables / DataTables ------------------------------------------------------ */
.table thead tr th {
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-bottom: 2px solid var(--border) !important;
}
.table tbody tr td { border-top: 1px solid #F1F5F9; color: #334155; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #FAFBFF; }
.table-hover > tbody > tr:hover { background-color: var(--accent-tint); }
.dataTables_wrapper .form-control { border-radius: 8px; }
.dataTables_wrapper .dt-buttons a.dt-button {
	background-color: #fff !important;
	color: var(--ink) !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px;
}

/* ---- Modals ------------------------------------------------------------------- */
.modal-content { border-radius: 14px; box-shadow: 0 10px 40px rgba(15, 23, 42, .2); }
.modal .modal-header { border-bottom: 1px solid var(--border); }
.modal .modal-footer { border-top: 1px solid var(--border); }

/* ---- Tabs ------------------------------------------------------------------- */
.nav-tabs { border-bottom: 2px solid var(--border); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { color: var(--ink) !important; }
.nav-tabs > li > a:before { border-bottom-color: var(--accent) !important; }

/* ---- Progress bar --------------------------------------------------------------- */
.progress { border-radius: 999px; background-color: #F1F5F9; }
.progress-bar { border-radius: 999px; }

/* ---- Floating-label form inputs (mechanism untouched, colors only) -------------- */
.form-group .form-line { border-bottom: 1px solid var(--border); }
.form-group .form-line:after { border-bottom: 2px solid var(--accent); }
.form-line .form-label { color: #94A3B8; }
.form-control { color: var(--ink); }

/* ---- bg-* color utility palette (class names kept, hex modernized) -------------- */
.bg-red { background-color: #EF4444 !important; }
.bg-pink { background-color: #EC4899 !important; }
.bg-purple { background-color: #A855F7 !important; }
.bg-deep-purple { background-color: #7C3AED !important; }
.bg-indigo { background-color: #4F46E5 !important; }
.bg-blue { background-color: #3B82F6 !important; }
.bg-light-blue { background-color: #0EA5E9 !important; }
.bg-cyan { background-color: #06B6D4 !important; }
.bg-teal { background-color: #14B8A6 !important; }
.bg-green { background-color: #22C55E !important; }
.bg-light-green { background-color: #84CC16 !important; }
.bg-lime { background-color: #A3E635 !important; }
.bg-yellow { background-color: #EAB308 !important; }
.bg-amber { background-color: #F59E0B !important; }
.bg-orange { background-color: #F97316 !important; }
.bg-deep-orange { background-color: #EA580C !important; }
.bg-brown { background-color: #78716C !important; }
.bg-grey { background-color: #94A3B8 !important; }
.bg-blue-grey { background-color: #64748B !important; }
.bg-black { background-color: #0F172A !important; }

/* ---- Login page ---------------------------------------------------------------- */
body.login-page {
	max-width: none;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #4F46E5 0%, #1E1B4B 100%);
}
.login-page .login-box { width: 100%; max-width: 380px; padding: 20px; }
.login-page .login-box .card { border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); border: none; }
.login-page .login-box .logo h3,
.login-page .login-box .logo h5 { color: #fff; }
.login-page .login-box .msg { color: var(--ink-soft); }
.login-page .login-box .btn.bg-blue {
	background-color: var(--accent) !important;
	border-radius: 8px !important;
}

/* ---- Quick-action icon tiles (dashboard shortcuts) ------------------------------- */
.quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 16px;
}
a.quick-tile {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 22px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
	transition: transform .15s ease, box-shadow .15s ease;
}
a.quick-tile:hover,
a.quick-tile:focus {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
	text-decoration: none;
}
.quick-tile-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.quick-tile-icon i { color: #fff; font-size: 26px; }
.quick-tile-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	text-align: center;
	line-height: 1.3;
}

/* ---- Feature cards (RT dashboard shortcuts with description) --------------------- */
.dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 20px;
}
.dash-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.dash-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 20px 0;
}
.dash-card-icon i { color: #fff; font-size: 22px; }
.dash-card-title { font-weight: 700; font-size: 15px; color: var(--ink); margin: 14px 20px 0; }
.dash-card-body { padding: 8px 20px 20px; color: var(--ink-soft); font-size: 13px; flex: 1; display: flex; flex-direction: column; }
.dash-card-body p { flex: 1; }
.dash-card-body .btn { align-self: flex-start; }

/* ---- Misc polish ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

.legal .version { display: none; }

/* ---- Mobile-friendly adjustments -------------------------------------------------- */
@media (max-width: 767px) {
	.navbar-brand {
		font-size: 15px !important;
		max-width: calc(100vw - 110px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.container-fluid { padding-left: 12px; padding-right: 12px; }
	.card .header { padding: 14px 16px; font-size: 14px; }
	.card .body { padding: 16px; }
	.info-box { min-height: auto; }
	.info-box .content .number { font-size: 18px !important; }
	.quick-actions { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
	a.quick-tile { padding: 16px 8px; }
	.modal-dialog { margin: 10px; }
	.modal-footer .btn { width: 100%; margin: 4px 0 !important; }
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_length { text-align: left !important; }
	table.dataTable { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
	.quick-actions { grid-template-columns: repeat(2, 1fr); }
	.dash-grid { grid-template-columns: 1fr; }
}