/* =====================================================================
   Aadil Group - Light Blue & Black theme
   Layout and spacing follow the Script India AMS look
   (attendanceapp.scriptindia.in); colours are light blue + black on white.

   Loaded after admin-assets/css/style.css. Most views load style.css and
   the Bootstrap bundle a second time inside <body>, so every rule here is
   prefixed with "html body" (and uses !important where the base theme
   does) so it still wins over those later copies.
   Change the variables below to re-colour the whole application.
   ===================================================================== */

:root {
    --ag-brand: #039be5;              /* light blue - filled backgrounds */
    --ag-brand-dark: #0277bd;         /* hover */
    --ag-brand-soft: #4fc3f7;         /* accents, icons, active bars */
    --ag-brand-light: #e1f5fe;        /* tints, focus ring, hover rows */
    --ag-brand-faint: #f5fbff;        /* striped rows */

    --ag-black: #0b0f14;              /* top navbar */
    --ag-sidebar-bg: #1a2234;
    --ag-sidebar-bg-hover: #252f45;
    --ag-sidebar-text: #b3bdcd;
    --ag-sidebar-text-active: #ffffff;
    --ag-sidebar-divider: rgba(255, 255, 255, .08);

    --ag-surface: #ffffff;
    --ag-bg: #ffffff;                 /* page background */
    --ag-text: #101828;
    --ag-text-muted: #667085;
    --ag-border: #e4e7ec;

    --ag-danger: #dc2626;
    --ag-danger-light: #fef2f2;
    --ag-success: #059669;
    --ag-success-light: #ecfdf5;

    --ag-radius-sm: 6px;
    --ag-radius: 10px;
    --ag-radius-lg: 12px;
    --ag-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --ag-shadow: 0 2px 6px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    --ag-shadow-lg: 0 8px 22px rgba(16, 24, 40, .14);
}

/* ---------- Base ---------- */
html body {
    color: var(--ag-text);
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    color: var(--ag-text);
    font-weight: 600;
}

html body ::selection {
    background: var(--ag-brand-light);
    color: var(--ag-text);
}

html body .content-wrapper a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.page-link):not(.dropdown-item):not(.paginate_button) {
    color: var(--ag-brand-dark);
}

/* ---------- Top navbar (white) ---------- */
html body .navbar.default-layout-navbar {
    background: var(--ag-surface) !important;
    border-bottom: 1px solid var(--ag-border);
    box-shadow: var(--ag-shadow-sm) !important;
}

html body .navbar .navbar-brand-wrapper {
    background: var(--ag-surface) !important;
    box-shadow: none !important;
    border-right: 1px solid var(--ag-border);
}

html body .navbar .navbar-menu-wrapper {
    background: transparent !important;
    border-bottom: none;
}

html body .navbar .navbar-menu-wrapper .navbar-toggler .mdi {
    color: var(--ag-text-muted) !important;
}

html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link,
html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i,
html body .navbar .navbar-menu-wrapper .text-dark,
html body .navbar .rsp-nav-info {
    color: var(--ag-text) !important;
}

/* Profile button: round, light blue tint */
html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.count-indicator {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    padding: 0 !important;
    margin: 0 0 0 .5rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    background: var(--ag-brand-light) !important;
    background-image: none !important;
    border: 1px solid var(--ag-border);
}

    html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.count-indicator::after {
        display: none !important;
    }

    html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.count-indicator i {
        color: var(--ag-brand) !important;
    }

    html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.count-indicator:hover {
        background: var(--ag-brand) !important;
    }

        html body .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.count-indicator:hover i {
            color: #ffffff !important;
        }

html body .navbar .navbar-dropdown {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius);
    box-shadow: var(--ag-shadow-lg);
}

    html body .navbar .navbar-dropdown .dropdown-item:hover {
        background: var(--ag-brand-light);
        color: var(--ag-text);
    }

/* ---------- Sidebar (black, compact rows) ---------- */
html body .sidebar {
    background: var(--ag-sidebar-bg) !important;
    border-right: none !important;
    box-shadow: none !important;
}

    html body .sidebar .nav {
        background: transparent !important;
        padding: .75rem .625rem 2.5rem !important;
    }

        html body .sidebar .nav .nav-item {
            border-bottom: none !important;
            border-left: none !important;
            border-top: none !important;
        }

            html body .sidebar .nav .nav-item:hover {
                background: transparent !important;
            }

            html body .sidebar .nav .nav-item .nav-link {
                position: relative;
                padding: .65rem .8rem !important;
                margin: 1px 0;
                border-radius: var(--ag-radius-sm);
                color: var(--ag-sidebar-text) !important;
                height: auto !important;
                transition: background .15s ease, color .15s ease;
            }

                html body .sidebar .nav .nav-item .nav-link:hover {
                    background: var(--ag-sidebar-bg-hover) !important;
                    color: var(--ag-sidebar-text-active) !important;
                }

                html body .sidebar .nav .nav-item .nav-link .menu-title {
                    color: inherit !important;
                    font-weight: 500;
                    font-size: .875rem;
                    line-height: 1.3;
                }

            /* Active item: subtle tint plus a light blue accent bar */
            html body .sidebar .nav .nav-item.active > .nav-link,
            html body .sidebar .nav .nav-item .nav-link[aria-expanded="true"] {
                background: var(--ag-sidebar-bg-hover) !important;
                color: var(--ag-sidebar-text-active) !important;
                box-shadow: none !important;
            }

                html body .sidebar .nav .nav-item.active > .nav-link::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 7px;
                    bottom: 7px;
                    width: 3px;
                    border-radius: 0 3px 3px 0;
                    background: var(--ag-brand-soft);
                }

                html body .sidebar .nav .nav-item.active > .nav-link .menu-title {
                    font-weight: 600;
                }

            html body .sidebar .nav .nav-item .nav-link .menu-arrow {
                color: inherit !important;
                opacity: .6;
            }

/* Menu icons (Font Awesome 6). The base theme pushes i.menu-icon to the
   right with margin-left:auto and fixes its height, so both are reset here. */
html body .sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-left: 0 !important;
    margin-right: .75rem !important;
    width: 20px;
    min-width: 20px;
    height: auto !important;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--ag-brand-soft) !important;
    opacity: .85;
    transition: opacity .15s ease;
}

html body .sidebar .nav .nav-item .nav-link:hover i.menu-icon,
html body .sidebar .nav .nav-item.active > .nav-link i.menu-icon {
    opacity: 1;
}

html body .sidebar .nav.sub-menu .nav-item .nav-link i.menu-icon {
    width: 16px;
    min-width: 16px;
    font-size: .82rem;
    margin-right: .6rem !important;
}

/* Collapsed (icon-only) sidebar: centre the glyph */
html body.sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-right: 0 !important;
    width: auto;
    min-width: 0;
    font-size: 1.1rem;
}

/* Sub-menus with an indent guide line */
html body .sidebar .nav .nav-item .collapse,
html body .sidebar .nav .nav-item .collapsing {
    background: transparent !important;
}

html body .sidebar .nav.sub-menu {
    position: relative;
    padding: .125rem 0 .25rem !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

    html body .sidebar .nav.sub-menu::before {
        content: '';
        position: absolute;
        left: 1.35rem;
        top: .25rem;
        bottom: .35rem;
        width: 1px;
        background: var(--ag-sidebar-divider);
    }

    html body .sidebar .nav.sub-menu .nav-item .nav-link {
        color: var(--ag-sidebar-text) !important;
        font-size: .8125rem;
        padding: .45rem .75rem .45rem 2.05rem !important;
    }

    /* Long sub-menu titles wrap onto a second line instead of being clipped
       (the base theme sets white-space:nowrap on every nav-link). */
    html body:not(.sidebar-icon-only) .sidebar .nav.sub-menu .nav-item .nav-link {
        white-space: normal;
    }

        html body:not(.sidebar-icon-only) .sidebar .nav.sub-menu .nav-item .nav-link .menu-title {
            flex: 1 1 auto;
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        html body .sidebar .nav.sub-menu .nav-item .nav-link:hover,
        html body .sidebar .nav.sub-menu .nav-item.active > .nav-link,
        html body .sidebar .nav.sub-menu .nav-item .nav-link.active {
            background: var(--ag-sidebar-bg-hover) !important;
            color: var(--ag-sidebar-text-active) !important;
        }

    html body .sidebar .nav.sub-menu .nav-item.active > .nav-link::before {
        display: none;
    }

html body.sidebar-icon-only .sidebar .nav .nav-item .nav-link {
    padding: .7rem .5rem !important;
}

/* ---------- Page shell (white) ---------- */
html body .content-wrapper {
    background: var(--ag-bg) !important;
    padding: 1.75rem 1.75rem 2.5rem !important;
}

html body .page-body-wrapper {
    background: var(--ag-bg);
}

html body .footer {
    background: var(--ag-surface) !important;
    color: var(--ag-text-muted) !important;
    font-size: .8rem;
    border-top: 1px solid var(--ag-border);
    padding: .9rem 1.75rem !important;
    text-align: center;
}

    html body .footer a {
        color: var(--ag-text-muted) !important;
        text-decoration: none;
    }

        html body .footer a[href] {
            color: var(--ag-text) !important;
            font-weight: 600;
        }

            html body .footer a[href]:hover {
                text-decoration: underline;
            }

/* ---------- Card shell used by every master / details page ---------- */
html body .content-box {
    background: var(--ag-surface) !important;
    border-radius: var(--ag-radius-lg) !important;
    box-shadow: var(--ag-shadow) !important;
    border: 1px solid var(--ag-border);
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

/* Title bar: light blue with white text */
html body .main-title-box {
    background: var(--ag-brand) !important;
    border-bottom: none !important;
    padding: .95rem 1.4rem !important;
    border-radius: 0 !important;
    text-align: left !important;
}

    html body .main-title-box h1,
    html body .main-title-box h2,
    html body .main-title-box h3,
    html body .main-title-box h4,
    html body .main-title-box h5 {
        color: #ffffff !important;
        text-transform: none !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        margin: 0 !important;
    }

html body .content-inner {
    background: var(--ag-surface) !important;
    padding: 1.4rem !important;
}

html body .company-title {
    background: var(--ag-surface) !important;
    border: 1px solid var(--ag-border);
    border-left: 3px solid var(--ag-brand);
    border-radius: var(--ag-radius) !important;
    padding: .9rem 1.15rem !important;
    box-shadow: var(--ag-shadow-sm);
}

    html body .company-title h5 {
        color: var(--ag-text) !important;
        text-align: left !important;
    }

/* Generic cards */
html body .content-wrapper .card {
    border-radius: var(--ag-radius-lg);
    border: 1px solid var(--ag-border);
    box-shadow: var(--ag-shadow-sm);
}

html body .content-wrapper .card-header,
html body .modal-header,
html body .detail-header,
html body .form-header,
html body .filter-header {
    background: var(--ag-brand) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}

    html body .content-wrapper .card-header *,
    html body .modal-header .modal-title,
    html body .detail-header *,
    html body .form-header *,
    html body .filter-header * {
        color: #ffffff !important;
    }

html body .modal-content {
    border: none;
    border-radius: var(--ag-radius-lg);
    overflow: hidden;
    box-shadow: var(--ag-shadow-lg);
}

/* ---------- Forms ---------- */
html body .content-wrapper .form-group label,
html body .content-wrapper label.control-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ag-text-muted);
    margin-bottom: .4rem;
}

html body .form-control,
html body select.form-control {
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-sm) !important;
    font-size: .9rem !important;
    background-color: var(--ag-surface) !important;
    color: var(--ag-text) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    html body .form-control:focus,
    html body select.form-control:focus,
    html body textarea:focus {
        border-color: var(--ag-brand) !important;
        box-shadow: 0 0 0 3px var(--ag-brand-light) !important;
    }

    html body .form-control[readonly],
    html body .form-control:disabled {
        background-color: #f7f8fa !important;
        color: var(--ag-text-muted) !important;
    }

html body .input-group-text,
html body .input-group-addon {
    background: var(--ag-brand-light) !important;
    border-color: var(--ag-border) !important;
    color: var(--ag-text) !important;
}

html body .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ag-brand);
    border-color: var(--ag-brand);
}

/* Select2 */
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-sm) !important;
}

html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ag-brand) !important;
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ag-brand) !important;
    color: #ffffff !important;
}

html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--ag-brand-light) !important;
    border-color: var(--ag-brand-soft) !important;
    color: var(--ag-text) !important;
}

/* ---------- Buttons ---------- */
html body .btn-default,
html body .btn-theme-red,
html body .btn-delete,
html body .btn-update,
html body .btn-save,
html body .btn-back,
html body .btn-view,
html body .btn-export,
html body .btn.theme-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem 1.2rem !important;
    border-radius: var(--ag-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: .875rem !important;
    border: 1px solid transparent !important;
    box-shadow: var(--ag-shadow-sm);
    text-decoration: none !important;
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}

    html body .btn-default:hover,
    html body .btn-theme-red:hover,
    html body .btn-delete:hover,
    html body .btn-update:hover,
    html body .btn-save:hover,
    html body .btn-back:hover,
    html body .btn-view:hover,
    html body .btn-export:hover,
    html body .btn.theme-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--ag-shadow);
    }

/* Main action (Add New, Save, Search, Login): light blue, white text */
html body .btn-default,
html body .btn-save,
html body .btn-view,
html body .btn-export,
html body .btn.theme-btn,
html body .theme-btn,
html body .btn-primary,
html body .btn-gradient-primary {
    background: var(--ag-brand) !important;
    background-image: none !important;
    border-color: var(--ag-brand) !important;
    color: #ffffff !important;
}

    html body .btn-default:hover, html body .btn-default:focus,
    html body .btn-save:hover, html body .btn-save:focus,
    html body .btn-view:hover, html body .btn-view:focus,
    html body .btn-export:hover, html body .btn-export:focus,
    html body .theme-btn:hover, html body .theme-btn:focus,
    html body .btn-primary:hover, html body .btn-primary:focus,
    html body .btn-gradient-primary:hover, html body .btn-gradient-primary:focus {
        background: var(--ag-brand-dark) !important;
        border-color: var(--ag-brand-dark) !important;
        color: #ffffff !important;
    }

/* Secondary (Back to List, Edit, Download): white with a border */
html body .btn-theme-red,
html body .btn-back {
    background: var(--ag-surface) !important;
    color: var(--ag-text) !important;
    border-color: #cfd6de !important;
    box-shadow: none;
}

    html body .btn-theme-red:hover, html body .btn-theme-red:focus,
    html body .btn-back:hover, html body .btn-back:focus {
        background: var(--ag-brand-light) !important;
        border-color: var(--ag-brand-soft) !important;
        color: var(--ag-text) !important;
    }

/* Update: black */
html body .btn-update,
html body .btn-dark {
    background: var(--ag-black) !important;
    border-color: var(--ag-black) !important;
    color: #ffffff !important;
}

    html body .btn-update:hover, html body .btn-update:focus,
    html body .btn-dark:hover, html body .btn-dark:focus {
        background: #2a313a !important;
        border-color: #2a313a !important;
        color: #ffffff !important;
    }

/* Delete stays red so destructive actions are obvious */
html body .btn-delete {
    background: var(--ag-danger) !important;
    border-color: var(--ag-danger) !important;
    color: #ffffff !important;
}

    html body .btn-delete:hover {
        background: #b91c1c !important;
        border-color: #b91c1c !important;
    }

html body .btn-secondary {
    background: var(--ag-surface) !important;
    border-color: #cfd6de !important;
    color: var(--ag-text) !important;
}

html body .btn-info {
    background: var(--ag-brand) !important;
    border-color: var(--ag-brand) !important;
    color: #ffffff !important;
}

/* Buttons inside table cells stay compact */
html body .table td .btn-default,
html body .table td .btn-theme-red,
html body .table td .btn-delete,
html body .table td .btn-update,
html body .table td .btn-view {
    padding: .3rem .7rem !important;
    font-size: .78rem !important;
    box-shadow: none;
}

    html body .table td .btn-default:hover,
    html body .table td .btn-theme-red:hover,
    html body .table td .btn-delete:hover,
    html body .table td .btn-update:hover,
    html body .table td .btn-view:hover {
        transform: none;
    }

/* ---------- Tables / DataTables ---------- */
html body .content-wrapper .table {
    color: var(--ag-text);
}

html body .content-wrapper table thead th,
html body .content-wrapper table > tbody > tr:first-child > th,
html body .content-wrapper .dataTables_scrollHead th,
html body .bg-theme-dark,
html body .bg-theme-dark th,
html body .table-dark,
html body .table-dark th {
    background: var(--ag-brand-light) !important;
    color: var(--ag-text) !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-color: #c7e7f8 !important;
    border-bottom: 2px solid var(--ag-brand-soft) !important;
    white-space: nowrap;
}

html body .content-wrapper .table td {
    vertical-align: middle;
    font-size: .875rem;
    border-color: var(--ag-border);
}

html body .content-wrapper .table-bordered,
html body .content-wrapper .table-bordered td,
html body .content-wrapper .table-bordered th {
    border-color: var(--ag-border);
}

html body .content-wrapper table tbody tr:nth-child(even) {
    background-color: var(--ag-brand-faint) !important;
}

html body .content-wrapper table tbody tr:nth-child(odd) {
    background-color: var(--ag-surface);
}

html body .content-wrapper table tbody tr:hover {
    background-color: var(--ag-brand-light) !important;
}

html body .dataTables_wrapper .dataTables_filter input,
html body .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius-sm) !important;
    padding: .4rem .7rem;
    font-size: .875rem;
    background: var(--ag-surface);
    color: var(--ag-text);
}

    html body .dataTables_wrapper .dataTables_filter input:focus,
    html body .dataTables_wrapper .dataTables_length select:focus {
        outline: none;
        border-color: var(--ag-brand) !important;
        box-shadow: 0 0 0 3px var(--ag-brand-light);
    }

html body .dataTables_wrapper .dataTables_filter,
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_info {
    color: var(--ag-text-muted);
    font-size: .8125rem;
    padding: .75rem 0;
}

html body .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--ag-radius-sm) !important;
    margin-left: 2px;
    border: 1px solid transparent !important;
    color: var(--ag-text) !important;
    background: transparent !important;
}

    html body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    html body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    html body .page-item.active .page-link {
        background: var(--ag-brand) !important;
        border-color: var(--ag-brand) !important;
        color: #ffffff !important;
    }

    html body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
        background: var(--ag-brand-light) !important;
        color: var(--ag-text) !important;
    }

html body .page-link {
    color: var(--ag-text);
}

/* ---------- Badges / alerts / misc ---------- */
html body .badge {
    border-radius: 999px;
    font-weight: 600;
}

html body .bg-primary,
html body .badge-primary,
html body .bg-info,
html body .badge-info {
    background-color: var(--ag-brand) !important;
    color: #ffffff !important;
}

html body .text-primary,
html body .text-info {
    color: var(--ag-brand-dark) !important;
}

html body .alert-danger {
    background: var(--ag-danger-light) !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    border-radius: var(--ag-radius) !important;
}

html body .alert-success {
    background: var(--ag-success-light) !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: var(--ag-radius) !important;
}

html body .progress {
    border-radius: 999px;
    background: var(--ag-brand-light);
}

html body .progress-bar {
    background-color: var(--ag-brand);
}

/* ---------- Dashboard page header ---------- */
html body .ag-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

html body .ag-page-eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ag-brand);
    margin-bottom: .35rem;
}

html body .ag-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ag-text);
    margin: 0;
}

html body .ag-page-date {
    font-size: .95rem;
    color: var(--ag-text-muted);
}

/* ---------- Dashboard stat cards ---------- */
html body .stat-card {
    position: relative;
    display: block;
    height: 100%;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow-sm);
    overflow: hidden;
    color: var(--ag-text);
    text-decoration: none !important;
    transition: box-shadow .15s ease, transform .1s ease;
}

    html body .stat-card:hover {
        box-shadow: var(--ag-shadow);
        transform: translateY(-2px);
        color: var(--ag-text);
    }

    /* Coloured accent along the top edge */
    html body .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--stat-accent);
    }

html body .stat-card .stat-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 1.6rem 1.5rem;
}

html body .stat-card .stat-value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ag-text);
}

html body .stat-card .stat-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ag-text-muted);
    margin-top: .45rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

html body .stat-card .stat-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--ag-radius);
    background: var(--stat-tint);
    color: var(--stat-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

    html body .stat-card .stat-icon i {
        color: var(--stat-accent) !important;
    }

html body .stat-card.stat-blue   { --stat-accent: #039be5; --stat-tint: #e1f5fe; }
html body .stat-card.stat-teal   { --stat-accent: #0891b2; --stat-tint: #ecfeff; }
html body .stat-card.stat-green  { --stat-accent: #059669; --stat-tint: #ecfdf5; }
html body .stat-card.stat-orange { --stat-accent: #d97706; --stat-tint: #fffbeb; }
html body .stat-card.stat-dark   { --stat-accent: #0b0f14; --stat-tint: #eef0f3; }
html body .stat-card.stat-indigo { --stat-accent: #4f46e5; --stat-tint: #eef2ff; }

/* ---------- Login page ---------- */
html body .register-box-body,
html body .login-box-body {
    border-top: 4px solid var(--ag-brand);
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow-lg);
}

@media (max-width: 991px) {
    html body .content-wrapper {
        padding: 1.25rem !important;
    }
}

/* =====================================================================
   Company / branch selection pages (Home/ParentCompany, Home/Index).
   These pages have no layout, so they bring their own slim header.
   ===================================================================== */
html body.ag-select-body {
    background: var(--ag-bg);
    min-height: 100vh;
}

html body .ag-select-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 70px;
    padding: 0 1.75rem;
    background: var(--ag-surface);
    border-bottom: 1px solid var(--ag-border);
    box-shadow: var(--ag-shadow-sm);
}

    html body .ag-select-topbar img {
        height: 46px;
        width: auto;
    }

html body .ag-select-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem 1.75rem 3rem;
}

/* Large monitors: the Bootstrap 4 grid stops at 3 cards (col-xl-4),
   so add a 4-card row and roomier gutters. */
@media (min-width: 1400px) {
    html body .ag-select-page {
        padding: 2.25rem 2.5rem 3rem;
    }

    html body .co-grid > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

html body .ag-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ag-text-muted) !important;
    text-decoration: none !important;
}

    html body .ag-back-link:hover {
        color: var(--ag-text) !important;
    }

/* Company card: same language as the dashboard stat cards */
html body .co-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow-sm);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .1s ease;
}

    html body .co-card:hover {
        box-shadow: var(--ag-shadow);
        transform: translateY(-2px);
    }

    html body .co-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--ag-brand);
    }

/* The whole card is clickable through this link's ::after overlay */
html body .co-card-link {
    color: inherit !important;
    text-decoration: none !important;
}

    html body .co-card-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

html body .co-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.4rem 1.1rem;
}

html body .co-logo {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: var(--ag-radius);
    background: var(--ag-brand-light);
    color: var(--ag-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    overflow: hidden;
}

    html body .co-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
        background: #fff;
    }

html body .co-name {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ag-text);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

html body .co-sub {
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--ag-text-muted);
}

html body .co-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ag-border);
}

html body .co-count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ag-text);
}

html body .co-count-label {
    margin-top: .3rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ag-text-muted);
}

html body .co-actions {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

/* Buttons sit above the card-wide link overlay */
html body .co-actions .btn,
html body .co-actions a {
    position: relative;
    z-index: 2;
}

html body .co-open {
    width: 40px;
    height: 40px;
    border-radius: var(--ag-radius);
    background: var(--ag-brand-light);
    color: var(--ag-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

html body .co-card:hover .co-open {
    background: var(--ag-brand);
    color: #ffffff;
}

html body .co-actions .btn-theme-red {
    padding: .45rem .9rem !important;
    font-size: .8rem !important;
}

html body .ag-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ag-text-muted);
    border: 1px dashed var(--ag-border);
    border-radius: var(--ag-radius-lg);
}

html body .ag-page-eyebrow {
    overflow-wrap: anywhere;
}

/* Touch screens: no sticky hover lift after a tap */
@media (hover: none) {
    html body .co-card:hover {
        transform: none;
        box-shadow: var(--ag-shadow-sm);
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    html body .ag-select-topbar {
        height: 62px;
        padding: 0 1.25rem;
    }

        html body .ag-select-topbar img {
            height: 40px;
        }

    html body .ag-select-page {
        padding: 1.5rem 1.25rem 2.5rem;
    }

    html body .ag-page-head {
        margin-bottom: 1.25rem;
    }
}

/* Phone */
@media (max-width: 575.98px) {
    html body .ag-select-topbar {
        height: 56px;
        padding: 0 1rem;
    }

        html body .ag-select-topbar img {
            height: 34px;
            max-width: 70vw;
            object-fit: contain;
        }

    html body .ag-select-page {
        padding: 1.1rem 1rem 2rem;
    }

    html body .ag-page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        margin-bottom: 1rem;
    }

    html body .ag-page-date {
        font-size: .82rem;
    }

    html body .ag-select-page > .row > [class*="col-"] {
        margin-bottom: 1rem !important;
    }

    html body .co-card-head {
        gap: .8rem;
        padding: 1.25rem 1rem .9rem;
    }

    html body .co-logo {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    html body .co-name {
        font-size: .95rem;
    }

    html body .co-card-foot {
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem;
        padding: .85rem 1rem 1rem;
    }

    html body .co-count {
        font-size: 1.6rem;
    }

    html body .co-actions .btn-theme-red {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }
}

/* Very narrow phones: actions take a full row under the count */
@media (max-width: 359.98px) {
    html body .co-actions {
        flex: 1 1 100%;
    }

        html body .co-actions .btn-theme-red {
            flex: 1 1 auto;
            justify-content: center;
        }
}

/* =====================================================================
   Data table on the layout-less selection pages
   (Home/ParentCompanyWiseEmployee). Mirrors the .content-wrapper table
   look, which these pages can't use because they have no layout.
   ===================================================================== */
@media (min-width: 576px) {
    html body .ag-select-page .ag-page-head {
        align-items: center;
    }
}

html body .ag-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

html body .ag-title-count {
    min-width: 2rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
}

html body .ag-select-page .content-inner {
    padding: 1rem 1.4rem 1.2rem !important;
}

html body .ag-data-table {
    width: 100% !important;
    margin: 0 !important;
    color: var(--ag-text);
    border-collapse: collapse !important;
}

    html body .ag-data-table thead th {
        background: var(--ag-brand-light) !important;
        color: var(--ag-text) !important;
        font-size: .74rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .4px;
        border: none !important;
        border-bottom: 2px solid var(--ag-brand-soft) !important;
        padding: .75rem .85rem !important;
        white-space: nowrap;
    }

    html body .ag-data-table tbody td {
        vertical-align: middle;
        font-size: .875rem;
        padding: .65rem .85rem !important;
        border: none !important;
        border-bottom: 1px solid var(--ag-border) !important;
    }

    html body .ag-data-table tbody tr:nth-child(even) {
        background-color: var(--ag-brand-faint) !important;
    }

    html body .ag-data-table tbody tr:nth-child(odd) {
        background-color: var(--ag-surface) !important;
    }

    html body .ag-data-table tbody tr:hover {
        background-color: var(--ag-brand-light) !important;
    }

    html body .ag-data-table a {
        color: var(--ag-brand-dark);
        font-weight: 600;
    }

    html body .ag-data-table .fw-600 {
        font-weight: 600;
    }

/* DataTables control rows: search + page size above, info + paging below */
html body .ag-dt-top,
html body .ag-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

html body .ag-dt-top {
    margin-bottom: .5rem;
}

html body .ag-dt-bottom {
    margin-top: .5rem;
}

    html body .ag-dt-top .dataTables_filter,
    html body .ag-dt-top .dataTables_length,
    html body .ag-dt-bottom .dataTables_info,
    html body .ag-dt-bottom .dataTables_paginate {
        float: none !important;
        width: auto;
        margin: 0;
        padding: .25rem 0;
        text-align: left !important;
    }

    html body .ag-dt-top .dataTables_filter label {
        margin: 0;
    }

    html body .ag-dt-top .dataTables_filter input {
        margin-left: 0 !important;
        min-width: 260px;
    }

    html body .ag-dt-bottom .pagination {
        margin: 0;
        flex-wrap: wrap;
    }

@media (max-width: 575.98px) {
    html body .ag-select-page .content-inner {
        padding: .75rem !important;
    }

    html body .ag-select-page .ag-page-head .btn-export {
        width: 100%;
    }

    html body .ag-dt-top .dataTables_filter,
    html body .ag-dt-top .dataTables_filter label,
    html body .ag-dt-top .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
    }

    html body .ag-dt-bottom {
        justify-content: center;
    }
}