/* Page colours and layout in the style of Lano: navy sidebar, white top bar, one blue accent (#2445E8).
   Light touch only; loaded last. Remove the <link> in index.html to go back. */
:root {
	--app-brand: #2445E8;        /* accent, as in Lano */
	--app-navy: #13103F;         /* sidebar */
	--app-navy-hover: rgba(255, 255, 255, .07);
	--app-navy-active: rgba(255, 255, 255, .12);
	--app-brand-hover: #1D36C4;
	--app-brand-light: #2445E8;
	--app-brand-light-hover: #1D36C4;
	--app-tint: #F5F7FB;
	--app-tint-strong: #EEF2FF;
	--app-border: #E2E8F0;
	--app-heading: #0F172A;
	--app-text: #475569;
	--app-focus: rgba(36, 69, 232, .15);
}

/* Page */
body { background-color: #F1F4F9; }
.page-title-box .page-title { color: var(--app-heading); font-weight: 600; }

/* Cards */
.card {
	border: 1px solid var(--app-border);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.card-header {
	background-color: var(--app-tint);
	border-bottom: 1px solid var(--app-border);
	color: var(--app-heading);
	font-weight: 600;
}
.card-header:first-child { border-radius: 8px 8px 0 0; }

/* Modals */
.modal-content { border: 0; border-radius: 8px; }
.modal-header {
	background-color: var(--app-tint);
	border-bottom: 1px solid var(--app-border);
}
.modal-header .modal-title { color: var(--app-heading); font-weight: 600; }

/* Primary colour: blue instead of purple */
.text-primary { color: var(--app-brand) !important; }
.bg-primary, .badge.bg-primary { background-color: var(--app-brand) !important; }
.border-primary { border-color: var(--app-brand) !important; }
.btn-primary {
	background-color: var(--app-brand);
	border-color: var(--app-brand);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
	background-color: var(--app-brand-hover) !important;
	border-color: var(--app-brand-hover) !important;
	color: #fff;
}
.btn-outline-primary { color: var(--app-brand); border-color: var(--app-brand); }
.btn-outline-primary:hover, .btn-outline-primary.active {
	background-color: var(--app-brand);
	border-color: var(--app-brand);
	color: #fff;
}

/* Success buttons (main save/submit actions): lighter blue; success badges and text stay green for status */
.text-success { color: #2E9D5B !important; }
.bg-success, .badge.bg-success { background-color: #2E9D5B !important; }
.btn-success {
	background-color: var(--app-brand-light);
	border-color: var(--app-brand-light);
	color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
	background-color: var(--app-brand-light-hover) !important;
	border-color: var(--app-brand-light-hover) !important;
	color: #fff;
}
.btn-outline-success { color: var(--app-brand-light); border-color: var(--app-brand-light); }
.btn-outline-success:hover { background-color: var(--app-brand-light); color: #fff; }
.btn:focus, .btn:active:focus { box-shadow: 0 0 0 .2rem var(--app-focus); }

/* Tables */
/* default header; no !important on the background, so pages that style their own header keep it */
.table thead th { background-color: var(--app-tint); }
.table thead th, .table-light, .table-light > th, .table-light > td,
.table > thead.table-light > tr > th {
	color: var(--app-heading);
	font-weight: 600;
	border-color: var(--app-border);
}
.table-bordered > :not(caption) > * > * { border-color: var(--app-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #FAFBFD; }
.table-hover > tbody > tr:hover > *, table.dataTable tbody tr:hover > * { --bs-table-accent-bg: var(--app-tint); }

/* Forms */
.form-control, .form-select { color: var(--app-text); }
.form-control:focus, .form-select:focus {
	border-color: #8EA2FA;
	box-shadow: 0 0 0 .2rem var(--app-focus);
}
.form-check-input:checked {
	background-color: var(--app-brand);
	border-color: var(--app-brand);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--app-focus); border-color: #8EA2FA; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--app-brand) !important;
	color: #fff !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: #8EA2FA !important;
}

/* Tabs and pills */
.nav-tabs .nav-link { color: var(--app-text); }
.nav-tabs .nav-link:hover { color: var(--app-brand); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	color: var(--app-brand);
	font-weight: 600;
	border-bottom: 2px solid var(--app-brand);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	background-color: var(--app-brand);
	color: #fff;
}

/* Pagination (pages and data tables) */
.page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
	background-color: var(--app-brand);
	border-color: var(--app-brand);
	color: #fff;
}
.page-link { color: var(--app-brand); }
.page-link:focus { box-shadow: 0 0 0 .2rem var(--app-focus); }

/* Plain links in pages */
.content-page a:not([class]) { color: var(--app-brand); }
.content-page a:not([class]):hover { color: var(--app-brand-hover); }

/* =====================================================================
   Polish: typography, sidebar, tables, badges, buttons, forms
   ===================================================================== */

/* Typography: Inter (falls back to Roboto) */
body, .btn, .form-control, .form-select, .table, .modal, .dropdown-menu,
#sidebar-menu > ul > li > a, .nav-second-level li a {
	font-family: 'Inter', Roboto, -apple-system, 'Segoe UI', sans-serif;
}
body { color: #334155; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h4, .h5 { color: var(--app-heading); font-weight: 600; letter-spacing: -.01em; }
.page-title-box .page-title { font-size: 1.15rem; letter-spacing: -.01em; }
.text-muted { color: #64748B !important; }

/* Sidebar: soft blue pill for the current item */
.left-side-menu { box-shadow: 1px 0 0 var(--app-border); }
#sidebar-menu .menu-title {
	font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8;
}
#sidebar-menu > ul > li > a {
	color: #475569; font-size: .9rem; font-weight: 500;
	margin: 2px 10px; padding: 10px 12px !important; border-radius: 6px;
}
#sidebar-menu > ul > li > a i { color: #64748B; }
#sidebar-menu > ul > li > a:hover { background-color: #F1F5F9; }
#sidebar-menu > ul > li.menuitem-active > a {
	background-color: var(--app-tint-strong); color: var(--app-brand) !important;
}
#sidebar-menu > ul > li.menuitem-active > a i { color: var(--app-brand); }
#sidebar-menu .nav-second-level li a { color: #64748B; font-size: .85rem; padding: 7px 20px 7px 46px; }
#sidebar-menu .nav-second-level .nav-second-level li a { padding-left: 58px; }
#sidebar-menu .nav-second-level li.menuitem-active > a,
#sidebar-menu .nav-second-level li a.active { color: var(--app-brand) !important; font-weight: 600; }

/* Top bar */
.navbar-custom { box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }

/* Cards */
.card { margin-bottom: 20px; }
.card-header { padding: .85rem 1.25rem; font-size: .95rem; }
.card-title, .header-title { color: var(--app-heading); font-weight: 600; }

/* Buttons */
.btn { border-radius: 6px; font-weight: 500; letter-spacing: .01em; }
.btn-sm { border-radius: 5px; }
.btn-light, .btn-secondary {
	background-color: #fff; border-color: #CBD5E1; color: #334155;
}
.btn-light:hover, .btn-secondary:hover {
	background-color: #F1F5F9 !important; border-color: #94A3B8 !important; color: #1E293B !important;
}
.btn-info { background-color: #0EA5E9; border-color: #0EA5E9; color: #fff; }
.btn-info:hover { background-color: #0284C7 !important; border-color: #0284C7 !important; color: #fff; }
.btn-danger { background-color: #DC2626; border-color: #DC2626; }
.btn-danger:hover { background-color: #B91C1C !important; border-color: #B91C1C !important; }
.btn-warning { background-color: #F59E0B; border-color: #F59E0B; color: #fff; }
.btn-warning:hover { background-color: #D97706 !important; border-color: #D97706 !important; color: #fff; }

/* Tables: compact rows, small caps-style header */
.table > :not(caption) > * > * { padding: .6rem .75rem; vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: .4rem .6rem; }
.table thead th, .table > thead.table-light > tr > th {
	font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #475569;
	border-bottom: 1px solid #CBD5E1 !important; white-space: nowrap;
}
.table td { color: #334155; border-color: var(--app-border); }

/* Badges: soft tinted style */
.badge { font-weight: 600; letter-spacing: .02em; padding: .35em .6em; border-radius: 4px; }
.badge.bg-success { background-color: #DCFCE7 !important; color: #166534 !important; }
.badge.bg-danger  { background-color: #FEE2E2 !important; color: #991B1B !important; }
.badge.bg-warning { background-color: #FEF3C7 !important; color: #92400E !important; }
.badge.bg-info    { background-color: #E0F2FE !important; color: #075985 !important; }
.badge.bg-primary { background-color: var(--app-tint-strong) !important; color: var(--app-brand) !important; }
.badge.bg-secondary { background-color: #F1F5F9 !important; color: #475569 !important; }

/* Forms */
.form-label, .col-form-label, label { color: #334155; font-weight: 500; }
.form-control, .form-select { border-color: #CBD5E1; border-radius: 6px; }
.form-control::placeholder { color: #94A3B8; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #F8FAFC; color: #64748B; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-color: #CBD5E1 !important; border-radius: 6px !important; }
.input-group-text { background-color: #F8FAFC; border-color: #CBD5E1; color: #475569; }

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--app-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; font-weight: 500; padding: .6rem 1rem; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: transparent; }

/* Modals and dropdowns */
.modal-content { box-shadow: 0 20px 40px rgba(15, 23, 42, .18); }
.modal-footer { border-top: 1px solid var(--app-border); background-color: #FAFBFD; }
.dropdown-menu { border: 1px solid var(--app-border); border-radius: 8px; box-shadow: 0 10px 25px rgba(15, 23, 42, .1); }
.dropdown-item:active, .dropdown-item.active { background-color: var(--app-brand); }

/* Alerts */
.alert { border-radius: 8px; border-width: 0 0 0 4px; }
.alert-info    { background-color: #EFF6FF; border-color: #3B82F6; color: #1E3A8A; }
.alert-warning { background-color: #FFFBEB; border-color: #F59E0B; color: #78350F; }
.alert-danger  { background-color: #FEF2F2; border-color: #EF4444; color: #7F1D1D; }
.alert-success { background-color: #F0FDF4; border-color: #22C55E; color: #14532D; }

/* Collapsed (icon-only) sidebar: no pill spacing */
body[data-sidebar-size=condensed] #sidebar-menu > ul > li > a {
	margin: 0; border-radius: 0; padding: 15px 20px !important;
}
body[data-sidebar-size=condensed] #sidebar-menu .nav-second-level li a { padding: 8px 20px; }

/* =====================================================================
   Lano-style layout: navy sidebar, white top bar, white rounded cards
   ===================================================================== */

/* Top bar: same navy as the sidebar, white icons */
.navbar-custom, body .navbar-custom {
	background-color: var(--app-navy) !important;
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* the logo image is dark text: show it white on navy */
.navbar-custom .logo-box .logo-dark img { filter: brightness(0) invert(1); }
/* drop-downs opened from the top bar stay white with dark text */
.navbar-custom .dropdown-menu i, .navbar-custom .dropdown-menu .nav-link, .navbar-custom .dropdown-menu span:not(.badge) { color: #334155 !important; }
.navbar-custom .app-search .form-control { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #fff; }
.navbar-custom .topnav-menu .nav-link,
.navbar-custom .button-menu-mobile,
.navbar-custom .nav-user, .navbar-custom .nav-user span,
.navbar-custom .noti-icon, .navbar-custom i {
	color: #E6E7F2 !important;
}

/* Sidebar: deep navy, white text */
.left-side-menu { background-color: var(--app-navy) !important; box-shadow: none; }
.left-side-menu .user-box, .left-side-menu .user-box a, .left-side-menu .user-box p { color: #fff !important; }
#sidebar-menu .menu-title { color: #8C8FB8 !important; }
#sidebar-menu > ul > li > a,
#sidebar-menu > ul > li > a i,
#sidebar-menu > ul > li > a .menu-arrow {
	color: #E6E7F2 !important;
}
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus {
	background-color: var(--app-navy-hover) !important; color: #fff !important;
}
#sidebar-menu > ul > li.menuitem-active > a,
#sidebar-menu > ul > li.menuitem-active > a i {
	background-color: var(--app-navy-active) !important; color: #fff !important;
}
#sidebar-menu .nav-second-level li a,
#sidebar-menu .nav-second-level li a .menu-arrow { color: #B4B7D4 !important; }
#sidebar-menu .nav-second-level li a:hover,
#sidebar-menu li > a:hover { color: #fff !important; background-color: transparent; }
#sidebar-menu .nav-second-level li.menuitem-active > a,
#sidebar-menu .nav-second-level li a.active { color: #fff !important; font-weight: 600; }
body[data-sidebar-size=condensed] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-size=condensed] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > .collapse,
body[data-sidebar-size=condensed] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > ul {
	background-color: var(--app-navy) !important;
}

/* Sidebar search box */
.left-side-menu #menu-search {
	background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #fff;
}
.left-side-menu #menu-search::placeholder { color: #8C8FB8; }
.left-side-menu #menu-search:focus { border-color: #8EA2FA; box-shadow: 0 0 0 .2rem rgba(142, 162, 250, .25); }
.left-side-menu #reset-menu-search { background: transparent; border-color: rgba(255, 255, 255, .2) !important; color: #fff; }

/* Cards: white, large radius, no heavy header bar */
.card {
	border: 1px solid #E8ECF3; border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-header {
	background-color: #fff; border-bottom: 1px solid #EEF1F6;
	border-radius: 14px 14px 0 0 !important; padding: 1rem 1.25rem; font-size: 1rem;
}
.card-body { padding: 1.25rem; }

/* Tabs: blue underline, as in Lano */
.nav-tabs .nav-link { color: #64748B; font-size: .95rem; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	color: var(--app-brand); border-bottom: 3px solid var(--app-brand); font-weight: 500;
}

/* Modals follow the cards */
.modal-content { border-radius: 14px; }
.modal-header { background-color: #fff; border-radius: 14px 14px 0 0; }

/* Table headers: dark navy with white text on every table (same navy as the sidebar family),
   including the old bg-table-darkgreen and table-light headers and pages with their own header colours */
.table thead th, .table > thead > tr > th,
.table thead.table-light th, .table > thead.table-light > tr > th, .table-light > th,
thead.bg-table-darkgreen th, tr.bg-table-darkgreen th, .table tr.bg-table-darkgreen th,
table.dataTable thead th, .dataTables_scrollHead thead th, .dtfc-fixed-start thead th, .dtfc-fixed-left thead th {
	background-color: #1E1B4B !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, .12) !important;
}
thead.bg-table-darkgreen, tr.bg-table-darkgreen, .table thead.table-light { background-color: #1E1B4B !important; color: #fff !important; }
.table thead th a, .table thead th i, .table thead th .mdi, .table thead th label { color: #fff !important; }
.table thead th .form-check-input { border-color: rgba(255, 255, 255, .6); }
/* anything else using the class (not a table header) keeps the dark navy */
.bg-table-darkgreen:not(thead):not(tr) { background-color: #1E1B4B !important; color: #fff !important; }

/* Buttons: the base theme adds a coloured glow under every button in its old colours (teal under success,
   purple under primary ...). Replace it with one neutral shadow, and a blue focus ring. */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger,
.btn-light, .btn-dark, .btn-pink, .btn-blue, .btn-purple {
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}
.btn-link, .btn-close, [class*="btn-outline-"], [class*="btn-soft-"] { box-shadow: none !important; }
.btn:focus, .btn:focus-visible, .btn:active:focus, .btn-check:focus + .btn {
	box-shadow: 0 0 0 .2rem rgba(36, 69, 232, .2) !important;
}

/* Buttons that also carry .form-control keep their white text and icon */
.btn.form-control.btn-primary, .btn.form-control.btn-success, .btn.form-control.btn-info,
.btn.form-control.btn-danger, .btn.form-control.btn-warning, .btn.form-control.btn-dark {
	color: #fff;
}

/* Space between a button icon and its label */
.btn > i:first-child:not(:only-child), .btn > .mdi:first-child:not(:only-child) { margin-right: 6px; }

/* =====================================================================
   Square corners everywhere (cards, buttons, inputs, modals, badges, tabs, menus, dashboard tiles)
   Kept round on purpose: profile pictures and initials, radio buttons, toggle switches, spinners.
   ===================================================================== */
*, *::before, *::after { border-radius: 0 !important; }
.rounded-circle, .avatar-initials, .wd-avatar, img.rounded-circle,
.form-check-input[type=radio], .spinner-border, .spinner-grow,
.noti-icon-badge, .user-box img, .nav-user img { border-radius: 50% !important; }
.switchery, .form-switch .form-check-input { border-radius: 2em !important; }
.switchery > small { border-radius: 50% !important; }

/* =====================================================================
   Soft colours inside pages: one solid accent for the main action (primary / success buttons);
   info, warning, danger, secondary and dark buttons are tinted with coloured text, solid on hover.
   ===================================================================== */
.content-page .btn-info, .modal .btn-info {
	background-color: #E0F2FE !important; border-color: #BAE6FD !important; color: #0369A1 !important;
}
.content-page .btn-info:hover, .modal .btn-info:hover { background-color: #0284C7 !important; border-color: #0284C7 !important; color: #fff !important; }

.content-page .btn-warning, .modal .btn-warning {
	background-color: #FEF3C7 !important; border-color: #FDE68A !important; color: #92400E !important;
}
.content-page .btn-warning:hover, .modal .btn-warning:hover { background-color: #D97706 !important; border-color: #D97706 !important; color: #fff !important; }

.content-page .btn-danger, .modal .btn-danger {
	background-color: #FEE2E2 !important; border-color: #FECACA !important; color: #B91C1C !important;
}
.content-page .btn-danger:hover, .modal .btn-danger:hover { background-color: #DC2626 !important; border-color: #DC2626 !important; color: #fff !important; }

.content-page .btn-dark, .modal .btn-dark {
	background-color: #E2E8F0 !important; border-color: #CBD5E1 !important; color: #1E293B !important;
}
.content-page .btn-dark:hover, .modal .btn-dark:hover { background-color: #334155 !important; border-color: #334155 !important; color: #fff !important; }

.content-page .btn-pink, .content-page .btn-purple, .modal .btn-pink, .modal .btn-purple {
	background-color: #EDE9FE !important; border-color: #DDD6FE !important; color: #5B21B6 !important;
}

/* Main action: a slightly softer blue */
.content-page .btn-primary, .content-page .btn-success, .modal .btn-primary, .modal .btn-success {
	background-color: #3352E8 !important; border-color: #3352E8 !important; color: #fff !important;
}
.content-page .btn-primary:hover, .content-page .btn-success:hover, .modal .btn-primary:hover, .modal .btn-success:hover {
	background-color: #2440C9 !important; border-color: #2440C9 !important;
}

/* Icons inside tinted buttons follow the text colour */
.content-page .btn-info i, .content-page .btn-warning i, .content-page .btn-danger i, .content-page .btn-dark i,
.modal .btn-info i, .modal .btn-warning i, .modal .btn-danger i, .modal .btn-dark i { color: inherit !important; }

/* Solid colour utilities used on page tiles and boxes: softer shades */
.content-page .bg-info:not(.badge)    { background-color: #E0F2FE !important; color: #0C4A6E !important; }
.content-page .bg-warning:not(.badge) { background-color: #FEF3C7 !important; color: #78350F !important; }
.content-page .bg-danger:not(.badge)  { background-color: #FEE2E2 !important; color: #7F1D1D !important; }
.content-page .text-danger  { color: #DC2626 !important; }
.content-page .text-warning { color: #D97706 !important; }
.content-page .text-info    { color: #0284C7 !important; }

/* Softer table header navy and gentler row lines */
.table thead th, .table > thead > tr > th,
.table thead.table-light th, .table > thead.table-light > tr > th, .table-light > th,
thead.bg-table-darkgreen th, tr.bg-table-darkgreen th, .table tr.bg-table-darkgreen th,
table.dataTable thead th, .dataTables_scrollHead thead th, .dtfc-fixed-start thead th, .dtfc-fixed-left thead th,
thead.bg-table-darkgreen, tr.bg-table-darkgreen, .table thead.table-light {
	background-color: #2A3350 !important;
}
.table-hover > tbody > tr:hover > *, table.dataTable tbody tr:hover > * { --bs-table-accent-bg: #F5F7FF; }