/*
 * "Fresh green" admin theme: white sidebar with a green active pill, a soft green-cream page background and a light
 * header, to match the dashboard design. Loaded LAST in admin_layouts/app.blade.php and scoped to body.theme-fresh;
 * selectors start with "html body.theme-fresh .wrapper" so they outrank the per-school colour rules in
 * common/color.blade.php (html.color-sidebar.sidebarcolorN ..., which also use !important).
 */
body.theme-fresh {
    --tf-ink: #1f2d27;
    --tf-muted: #6b7a73;
    --tf-line: #e3ece7;
    --tf-green: #2f9e6e;
    --tf-green-dark: #23845a;
    --tf-green-soft: #e8f6ef;
    --tf-bg: #f3f7f2;
    background: var(--tf-bg) !important;
    color: var(--tf-ink);
}

/* page background: soft cream-green wash like the mockup */
html body.theme-fresh .wrapper,
html body.theme-fresh .page-wrapper {
    background: linear-gradient(180deg, #f6f9f3 0%, #eef5ef 100%) !important;
}
html body.theme-fresh .page-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--tf-line) !important;
    color: var(--tf-muted) !important;
}

/* ---------- sidebar ---------- */
html body.theme-fresh .wrapper .sidebar-wrapper {
    background: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid var(--tf-line) !important;
    box-shadow: 2px 0 14px rgba(31, 45, 39, .04) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .sidebar-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--tf-line) !important;
    border-right: 0 !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .sidebar-header .logo-text {
    color: var(--tf-ink) !important;
    font-weight: 700 !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .sidebar-header .toggle-icon {
    color: var(--tf-green) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .menu-label {
    color: var(--tf-muted) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu a {
    color: #3c4a44 !important;
    border-radius: 10px !important;
    font-weight: 500;
}
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu a .parent-icon {
    color: var(--tf-green) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu a:hover,
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu a:focus {
    color: var(--tf-green-dark) !important;
    background: var(--tf-green-soft) !important;
}
/* the open / active top-level item: solid green pill with white text */
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu > li.mm-active > a {
    color: #ffffff !important;
    background: var(--tf-green) !important;
    box-shadow: 0 4px 12px rgba(47, 158, 110, .28) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu > li.mm-active > a .parent-icon {
    color: #ffffff !important;
}
/* nested levels: light green, active page in bold green */
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu ul {
    background: #f7fbf8 !important;
    border: 0 !important;
    border-radius: 10px !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu ul li.mm-active > a {
    color: var(--tf-green-dark) !important;
    background: var(--tf-green-soft) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu ul a .parent-icon,
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu ul li.mm-active > a .parent-icon {
    color: var(--tf-green) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper .sidebar--search-form,
html body.theme-fresh .wrapper .sidebar-wrapper #search-sidebar-menu {
    background: #f4f8f6 !important;
    border-color: var(--tf-line) !important;
    color: var(--tf-ink) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper #search-sidebar-menu::placeholder {
    color: var(--tf-muted) !important;
}
html body.theme-fresh .wrapper .sidebar-wrapper #search-sidebar-menu:focus {
    background: #fff !important; border-color: var(--tf-green) !important; box-shadow: 0 0 0 3px rgba(47, 158, 110, .15) !important;
}

/* menu search results (public/js/sidebar-search.js): shown in place of the menu while typing */
html body.theme-fresh .wrapper .sidebar-wrapper .metismenu.is-searching > li { display: none !important; }
#sidebar-search-results { margin: 6px 4px 10px; }
#sidebar-search-results .ss-head {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-muted, #6b7a73); padding: 6px 10px 4px;
}
#sidebar-search-results .ss-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--tf-ink, #1f2d27) !important;
    text-decoration: none; line-height: 1.25;
}
#sidebar-search-results .ss-item > i {
    flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 16px;
    background: #eaf6f0; color: var(--tf-green, #2f9e6e);
}
#sidebar-search-results .ss-text { display: flex; flex-direction: column; min-width: 0; }
#sidebar-search-results .ss-title { font-size: 13.5px; font-weight: 600; white-space: normal; }
#sidebar-search-results .ss-path { font-size: 11px; color: var(--tf-muted, #6b7a73); margin-top: 2px; white-space: normal; }
#sidebar-search-results mark { background: #fdf0c4; color: inherit; padding: 0 1px; border-radius: 3px; }
#sidebar-search-results .ss-item:hover { background: #f1f8f4; }
#sidebar-search-results .ss-item.is-active { background: var(--tf-green, #2f9e6e); color: #fff !important; }
#sidebar-search-results .ss-item.is-active > i { background: rgba(255, 255, 255, .2); color: #fff; }
#sidebar-search-results .ss-item.is-active .ss-path { color: rgba(255, 255, 255, .8); }
#sidebar-search-results .ss-item.is-active mark { background: rgba(255, 255, 255, .28); }
#sidebar-search-results .ss-empty { padding: 14px 10px; font-size: 13px; color: var(--tf-muted, #6b7a73); text-align: center; }
#sidebar-search-results .ss-foot { padding: 8px 10px 0; font-size: 11px; color: var(--tf-muted, #6b7a73); }
#sidebar-search-results kbd {
    background: #f1f4f2; color: #445; border: 1px solid #dde5e1; border-radius: 4px; padding: 0 4px; font-size: 10px; margin-right: 2px; box-shadow: none;
}
/* collapsed (icon-only) sidebar on desktop only -- on phones/tablets .toggled means the sidebar is OPEN */
@media (min-width: 1025px) {
    html body.theme-fresh .wrapper.toggled:not(.sidebar-hovered) #sidebar-search-results { display: none; }
}
html body.theme-fresh .wrapper .sidebar-wrapper .simplebar-scrollbar:before {
    background: rgba(47, 158, 110, .35) !important;
}

/* ---------- header ---------- */
html body.theme-fresh .wrapper .topbar {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--tf-line) !important;
    box-shadow: 0 2px 10px rgba(31, 45, 39, .04) !important;
    backdrop-filter: blur(6px);
}
html body.theme-fresh .wrapper .topbar .nav-link,
html body.theme-fresh .wrapper .topbar .top-menu-left .nav-item .nav-link,
html body.theme-fresh .wrapper .topbar .navbar-nav .nav-link,
html body.theme-fresh .wrapper .topbar .mobile-toggle-menu {
    color: #3c4a44 !important;
}
html body.theme-fresh .wrapper .topbar .top-menu-left .nav-item .nav-link:hover {
    color: var(--tf-green-dark) !important;
}
html body.theme-fresh .wrapper .topbar .user-box {
    border-left-color: var(--tf-line) !important;
}
html body.theme-fresh .wrapper .topbar .user-info .user-name {
    color: var(--tf-ink) !important;
    font-weight: 700 !important;
}
html body.theme-fresh .wrapper .topbar .user-info .designattion {
    color: var(--tf-muted) !important;
}

/* ---------- shared bits used on every page ---------- */
html body.theme-fresh .wrapper .card {
    border-radius: 16px;
    border: 1px solid var(--tf-line);
    box-shadow: 0 2px 10px rgba(31, 45, 39, .04);
}
html body.theme-fresh .wrapper .btn-primary {
    background: var(--tf-green) !important;
    border-color: var(--tf-green) !important;
}
html body.theme-fresh .wrapper .btn-primary:hover,
html body.theme-fresh .wrapper .btn-primary:focus {
    background: var(--tf-green-dark) !important;
    border-color: var(--tf-green-dark) !important;
}
html body.theme-fresh .wrapper .text-primary {
    color: var(--tf-green-dark) !important;
}
/* "primary" backgrounds, outline buttons and modal buttons follow the green theme too, instead of the per-school
   colour from common/color (e.g. red modal headers). Modals can sit outside .wrapper, so they're listed separately. */
html body.theme-fresh .bg-primary {
    background-color: var(--tf-green) !important;
}
html body.theme-fresh .modal .btn-primary {
    background: var(--tf-green) !important;
    border-color: var(--tf-green) !important;
}
html body.theme-fresh .modal .btn-primary:hover,
html body.theme-fresh .modal .btn-primary:focus {
    background: var(--tf-green-dark) !important;
    border-color: var(--tf-green-dark) !important;
}
html body.theme-fresh .btn-outline-primary {
    color: var(--tf-green-dark) !important;
    border-color: var(--tf-green) !important;
    background: transparent !important;
}
html body.theme-fresh .btn-outline-primary:hover,
html body.theme-fresh .btn-outline-primary:focus {
    color: #fff !important;
    background: var(--tf-green) !important;
}
html body.theme-fresh .wrapper .breadcrumb-title {
    color: var(--tf-ink) !important;
}
html body.theme-fresh .wrapper .back-to-top {
    background: var(--tf-green) !important;
}

/* ---------- compact "dashboard skin" for the older dashboards (Finance / Attendance / Behavior Overview) ----------
 * Their markup is the standard card > card-body > label + number + .widgets-icons pattern and their charts use
 * Highcharts styled mode, so everything is restyled here by class; their scripts and data hooks are untouched.
 * Pages opt in with <div class="page-content dash-skin">. */
.dash-skin { --sk-ink: #1f2d27; --sk-muted: #6b7a73; --sk-line: #e3ece7; }
.dash-skin > br { display: none; }
.dash-skin h3 { font-size: 15px; font-weight: 700; color: var(--sk-ink); margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.dash-skin h3::before { content: ''; width: 6px; height: 16px; border-radius: 3px; background: #2f9e6e; }
.dash-skin .row { --bs-gutter-y: 10px; --bs-gutter-x: 10px; }
.dash-skin .row > * { margin-bottom: 0; }
.dash-skin .mb-3 { margin-bottom: 10px !important; }

.dash-skin .card { border-radius: 12px !important; border: 1px solid var(--sk-line) !important; box-shadow: none !important; margin-bottom: 10px; }
.dash-skin .card-body { padding: 10px 12px !important; }
.dash-skin .card-title { font-size: 13.5px !important; font-weight: 700; margin-bottom: 8px; }
.dash-skin .card-body p.mb-0.text-secondary { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.dash-skin .card-body h4, .dash-skin .card-body h3.font-weight-bold { font-size: 18px !important; margin: 0 !important; font-variant-numeric: tabular-nums; }
.dash-skin .card-body h1 { font-size: 26px !important; font-variant-numeric: tabular-nums; }
.dash-skin .card-body h5 { font-size: 14px; }
.dash-skin .card-body small { font-size: 11px; }

/* icons: small round, solid colour with white glyph */
.dash-skin .widgets-icons { width: 34px !important; height: 34px !important; font-size: 16px !important; border-radius: 50% !important;
    display: grid !important; place-items: center; color: #fff !important; flex: none; }
.dash-skin .widgets-icons.bg-light-success { background: #2f9e6e !important; }
.dash-skin .widgets-icons.bg-light-danger { background: #d9534f !important; }
.dash-skin .widgets-icons.bg-light-warning { background: #e58a2b !important; }
.dash-skin .widgets-icons.bg-light-info { background: #1f9fa8 !important; }
.dash-skin .widgets-icons.bg-light-primary { background: #3b82c4 !important; }

/* pastel card tint follows the icon colour (like the home dashboard) */
.dash-skin .card:has(.widgets-icons.bg-light-success) { background: #e8f6ef; border-color: #cfe9dc !important; }
.dash-skin .card:has(.widgets-icons.bg-light-danger) { background: #fcecec; border-color: #f5d3d2 !important; }
.dash-skin .card:has(.widgets-icons.bg-light-warning) { background: #fdf1e3; border-color: #f7dfc2 !important; }
.dash-skin .card:has(.widgets-icons.bg-light-info) { background: #e5f6f7; border-color: #cdebed !important; }
.dash-skin .card:has(.widgets-icons.bg-light-primary) { background: #e9f2fb; border-color: #d5e6f6 !important; }
.dash-skin .card.bg-light-primary { background: linear-gradient(135deg, #e8f6ef, #e5f6f7) !important; }

/* quick-action buttons: compact pills */
.dash-skin .btn[class*="btn-outline-"] { border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 600; background: #fff; }

/* tables */
.dash-skin .table { font-size: 12.5px; margin-bottom: 0; }
.dash-skin .table > :not(caption) > * > * { padding: 5px 8px; border-color: var(--sk-line); }
.dash-skin .table thead th { background: #f4f8f6; color: var(--sk-muted); font-size: 11.5px; font-weight: 700; }

/* charts: shorter, and the green palette for Highcharts styled mode */
.dash-skin #finance_trend_chart, .dash-skin #attendance_trend_chart { height: 250px; }
.dash-skin #finance_composition_chart, .dash-skin #attendance_type_chart { height: 250px; }
.dash-skin .highcharts-background { fill: transparent; }
.dash-skin .highcharts-title { font-size: 13px !important; font-weight: 700; fill: var(--sk-ink) !important; }
.dash-skin .highcharts-axis-labels text, .dash-skin .highcharts-legend-item text { fill: var(--sk-muted) !important; font-size: 11px !important; }
.dash-skin .highcharts-grid-line { stroke: #eef3f0; }
.dash-skin .highcharts-color-0 { fill: #1f9fa8; stroke: #1f9fa8; }
.dash-skin .highcharts-color-1 { fill: #2f9e6e; stroke: #2f9e6e; }
.dash-skin .highcharts-color-2 { fill: #f2b53a; stroke: #f2b53a; }
.dash-skin .highcharts-color-3 { fill: #d9534f; stroke: #d9534f; }
.dash-skin .highcharts-color-4 { fill: #3b82c4; stroke: #3b82c4; }
.dash-skin .highcharts-color-5 { fill: #8a63c9; stroke: #8a63c9; }
.dash-skin .highcharts-area { fill-opacity: .18; }
.dash-skin .highcharts-graph { stroke-width: 2.5px; }
/* a chart card nested inside a card: one frame only */
.dash-skin .card .card { border: 0 !important; margin-bottom: 0; background: transparent; }
.dash-skin .card .card > .card-body { padding: 0 !important; }
/* Behavior Overview's centered stat cards (icon on top, number, label) */
.dash-skin .card-body.text-center > i.f-24 { font-size: 22px; width: 38px; height: 38px; border-radius: 50%; display: inline-grid;
    place-items: center; color: #fff !important; }
.dash-skin .card-body.text-center > i.text-success { background: #2f9e6e; }
.dash-skin .card-body.text-center > i.text-danger { background: #d9534f; }
.dash-skin .card-body.text-center > i.text-warning { background: #e58a2b; }
.dash-skin .card-body.text-center > i.text-info { background: #1f9fa8; }
.dash-skin .card-body.text-center > h3 { margin: 4px 0 0 !important; }
.dash-skin .card-body.text-center > p.text-uppercase { font-size: 11px; letter-spacing: .04em; }
.dash-skin .card:has(> .card-body.text-center > i.text-success) { background: #e8f6ef; border-color: #cfe9dc !important; }
.dash-skin .card:has(> .card-body.text-center > i.text-danger) { background: #fcecec; border-color: #f5d3d2 !important; }
.dash-skin .card:has(> .card-body.text-center > i.text-warning) { background: #fdf1e3; border-color: #f7dfc2 !important; }
.dash-skin .card:has(> .card-body.text-center > i.text-info) { background: #e5f6f7; border-color: #cdebed !important; }
.dash-skin .page-breadcrumb { margin-bottom: 10px !important; }

/* ---------- login / password pages ---------- */
body.theme-fresh .authentication-header {
    background: linear-gradient(135deg, #2f9e6e 0%, #1f9fa8 100%) !important;
}
body.theme-fresh .section-authentication-signin .card {
    border-radius: 18px;
    border: 1px solid var(--tf-line);
    box-shadow: 0 16px 40px rgba(31, 45, 39, .10);
}
body.theme-fresh .section-authentication-signin .btn-primary {
    background: var(--tf-green) !important;
    border-color: var(--tf-green) !important;
    border-radius: 10px;
}
body.theme-fresh .section-authentication-signin .btn-primary:hover {
    background: var(--tf-green-dark) !important;
    border-color: var(--tf-green-dark) !important;
}
body.theme-fresh .section-authentication-signin a:not(.btn):not(.input-group-text) {
    color: var(--tf-green-dark) !important;
}
body.theme-fresh .section-authentication-signin .form-control:focus {
    border-color: var(--tf-green);
    box-shadow: 0 0 0 .2rem rgba(47, 158, 110, .18);
}
body.theme-fresh .section-authentication-signin .form-check-input:checked {
    background-color: var(--tf-green);
    border-color: var(--tf-green);
}

/* ---------- no top bar: only a small floating cluster (apps grid + user menu) at the top right ----------
 * The Mapping / Print Admission Form links now live in the sidebar, so the bar's left side is hidden and the bar
 * itself has no background, border or shadow. It scrolls away with the page instead of staying pinned. */
html body.theme-fresh .wrapper .topbar {
    position: absolute !important;
    top: 6px !important;
    left: auto !important;
    right: 16px !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: 11 !important;
}
html body.theme-fresh .wrapper .topbar .navbar {
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
}
html body.theme-fresh .wrapper .topbar .top-menu-left { display: none !important; }
html body.theme-fresh .wrapper .topbar .top-menu,
html body.theme-fresh .wrapper .topbar .user-box {
    background: #ffffff;
    border: 1px solid var(--tf-line) !important;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(31, 45, 39, .06);
}
html body.theme-fresh .wrapper .topbar .top-menu { margin-right: 8px; padding: 0 4px; }
html body.theme-fresh .wrapper .topbar .user-box { padding: 4px 12px 4px 6px; margin-left: 0 !important; }
html body.theme-fresh .wrapper .topbar .user-box .user-img { width: 32px; height: 32px; }
html body.theme-fresh .wrapper .topbar .mobile-toggle-menu {
    background: #ffffff; border: 1px solid var(--tf-line); border-radius: 12px; padding: 4px 10px; margin-right: 8px;
}
/* the page starts right under that cluster instead of under a 60px bar */
html body.theme-fresh .wrapper .page-wrapper { margin-top: 52px !important; }

/* ---------- dashboard pages (.dv-head): title moves up into the top strip ----------
 * The page title sits at the top-left of the strip and the header controls line up under the user cluster on the right. */
@media (min-width: 1400px) {
    html body.theme-fresh:has(.dash-v2 .dv-head) .wrapper .page-wrapper { margin-top: 0 !important; }
    html body.theme-fresh:has(.dash-v2 .dv-head) .wrapper .page-wrapper .page-content { padding-top: 10px; }
    html body.theme-fresh .dash-v2 .dv-head { align-items: flex-end; }
    html body.theme-fresh .dash-v2 .dv-head .dv-tools { margin-top: 46px; }
}

/* dashboard pages carry the user photo/menu and quick links in their own header -> hide the floating copies
   (the mobile menu button stays so the sidebar can still be opened on phones) */
html body.theme-fresh:has(.dash-v2 .dv-head) .wrapper .topbar .top-menu,
html body.theme-fresh:has(.dash-v2 .dv-head) .wrapper .topbar .user-box { display: none !important; }

html body.theme-fresh .wrapper .page-wrapper .page-content { padding-top: 8px; }

@media (max-width: 1199.98px) {
    html body.theme-fresh:has(.dash-v2 .dv-head) .wrapper .page-wrapper { margin-top: 0 !important; }
}
@media (max-width: 1024px) {
    html body.theme-fresh:has(.dash-v2 .dv-head) .wrapper .page-wrapper { margin-top: 44px !important; }
}

/* The header is out of normal flow now, so .page-wrapper's top margin would "collapse" through .wrapper
   and push the whole wrapper -- and the floating cluster positioned inside it -- down over the first card.
   flow-root makes .wrapper contain that margin. */
html body.theme-fresh .wrapper { display: flow-root; }

/* Printing: every report is rendered into #receipt_section (outside .wrapper) and printed with window.print(); app.css
   hides the app shell with a plain ".wrapper { display: none }" in @media print, which the rule above outranks. */
@media print {
    html body.theme-fresh .wrapper { display: none !important; }
}