/* ==================================================
   DESIGN TOKENS (BASE COLORS)
================================================== */
:root {
    --primary-green: #00883e;
    --primary-green-dark: #00753a;
    --primary-green-tint: rgba(0, 136, 62, 0.1);
    --primary-red: #F8383B;
    --success-green: #48bc59;
    --danger-red: #dc3545;
    --brand-blue: #0d6efd;
    --brand-indigo: #626ed4;
    --text-dark: #111827;
    --text-muted: #6c757d;
    --border-light: #e5e7eb;
    --bg-light: #f6f8fb;

    /* Spacing/radius/shadow scale - new components below should use these
       instead of one-off pixel values, so future additions stay consistent. */
    --space-1: 6px;
    --space-2: 8px;
    --space-3: 10px;
    --space-4: 12px;
    --space-5: 16px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
    --shadow-card: 5px 10px rgba(0, 0, 0, 0.1);

    /* Status palette - one definition reused by every badge/chip across the app */
    --status-pending-bg: rgba(255, 179, 0, 0.15);
    --status-pending-fg: #93610a;
    --status-approved-bg: var(--primary-green-tint);
    --status-approved-fg: var(--primary-green-dark);
    --status-rejected-bg: rgba(220, 53, 69, 0.12);
    --status-rejected-fg: #b3212f;
    --status-completed-bg: rgba(13, 110, 253, 0.12);
    --status-completed-fg: #0a3d8f;
    --status-blocked-bg: rgba(220, 53, 69, 0.12);
    --status-blocked-fg: #b3212f;
    --status-active-bg: var(--primary-green-tint);
    --status-active-fg: var(--primary-green-dark);
    --status-inactive-bg: rgba(108, 117, 125, 0.14);
    --status-inactive-fg: #495057;
    --status-expired-bg: rgba(108, 117, 125, 0.14);
    --status-expired-fg: #495057;
    --status-warning-bg: rgba(255, 179, 0, 0.15);
    --status-warning-fg: #93610a;
}

/* ==================================================
   BUTTON SYSTEM
================================================== */

/* Primary Action Button */
.btn-primary-custom {
    background-color: var(--primary-green);
    border: 1px solid var(--primary-green);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    transition: all 0.2s ease;
}

.btn-primary-custom:hover {
    background-color: #006b30;
    border-color: #006b30;
    color: #fff;
}


/* Sync Button - a normal but clearly-important admin action, not a
   competing call-to-action next to the org identity beside it */
.btn-sync {
    background: #2e9e5b;
    border: 1px solid #2e9e5b;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: var(--space-1) 18px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-sync i {
    font-size: 12px;
}

.btn-sync:hover:not(:disabled) {
    background: #23854a;
    border-color: #23854a;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.btn-sync:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 62, 0.25);
}

.btn-sync:disabled {
    opacity: 0.75;
    cursor: progress;
}

/* ==================================================
   LAYOUT / GENERAL
================================================== */

.login-page {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 10px 0;
}

label {
    font-weight: 600;
    font-family: sans-serif;
}

.datepicker {
    z-index: 1600 !important;
    /* has to be larger than 1050 */
}

/* ==================================================
   TEXT / ERROR HANDLING
================================================== */

/* Only used on the login page currently - see .login-page scope below for the
   fuller styling actually applied there; kept here as the unscoped fallback. */
.alert-danger-custom {
    color: var(--danger-red);
    text-align: center;
}

/* ==================================================
   LOADING OVERLAY
================================================== */


#divLoading {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.3);
    z-index: 30001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-box {
    text-align: center;
    color: #fff;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 15px;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.project-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.loading-text {
    font-size: 14px;
    opacity: 0.9;
}

/* ==================================================
   CARD / FILTER UI
================================================== */

.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.card-body {
    padding: 20px;
}

/*
 * Modifier class for filter section cards.
 * Currently inherits all visual styling from .card.
 * Keep this selector for semantic usage and future filter-specific customization.
 */
.filter-card {
}

.date-btn {
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.date-btn.active,
.date-btn:hover {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

/* ==================================================
   FORM CONTROLS
================================================== */

#org_users_search_form .form-control {
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}

/* ==================================================
   TABLE SYSTEM
================================================== */

#custom_datatable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    background: #fff;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

#custom_datatable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #e9f7ef;
    color: #0a5c32;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
}

#custom_datatable thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-lg);
}

#custom_datatable thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-lg);
}

#custom_datatable tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-light);
    color: #374151;
    vertical-align: middle;
}

#custom_datatable tbody td .badge {
    vertical-align: middle;
}

#custom_datatable tbody tr {
    transition: background-color 0.18s ease;
}

#custom_datatable tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

#custom_datatable tbody tr:hover {
    background: #eaf7ed;
}

#custom_datatable tbody tr:active {
    background: #d6f3dc;
}

/* ==================================================
   PAGINATION (SINGLE SYSTEM ONLY)
================================================== */

.custom-pagination {
    gap: 6px;
}

/* base item */
.custom-pagination .page-item .page-link {
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius);
    background: #fff;
    transition: all 0.2s ease;
}

/* hover */
.custom-pagination .page-item .page-link:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}

/* active page */
.custom-pagination .page-item.active .page-link {
    background: var(--success-green);
    border-color: var(--success-green);
    color: #fff;
    font-weight: 600;
}

/* disabled */
.custom-pagination .page-item.disabled .page-link {
    background: #f9fafb;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* replace bootstrap's default focus glow with one that matches this system */
.custom-pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 62, 0.25);
}

/* ==================================================
   RESPONSIVE TABLE
================================================== */

@media (max-width: 768px) {

    #custom_datatable thead {
        display: none;
    }

    #custom_datatable,
    #custom_datatable tbody,
    #custom_datatable tr,
    #custom_datatable td {
        display: block;
        width: 100%;
    }

    #custom_datatable tr {
        margin-bottom: 12px;
        border: 1px solid #eee;
        border-radius: var(--radius);
        padding: 10px;
    }

    #custom_datatable td {
        text-align: right;
        padding: 8px;
        position: relative;
    }

    #custom_datatable td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        font-weight: 600;
        font-size: 12px;
        color: #6b7280;
    }
}

/* ==================================================
   NAVBAR
================================================== */

.navbar-header .fw-bold {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The vendor theme (app.min.css) gives #page-topbar no separation from the
   page below it, and keeps every icon button (menu toggle, bell, fullscreen,
   avatar) flat with no hover feedback and no spacing between them. This adds
   that polish without touching the theme's own colors/branding. */
#page-topbar {
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-header > .d-flex {
    gap: 6px;
}

#page-topbar .header-item {
    height: 42px;
    width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

/* Sidebar toggle sits outside the fixed-width icon group above - it's the
   same .header-item class, but as a plain menu button it reads better with
   its natural width and a softer corner than a forced circle. Specificity
   note: needs to match "#page-topbar .header-item" (id + class) or the
   width:42px above wins regardless of source order. */
#page-topbar #vertical-menu-btn {
    width: 42px;
    height: 39px;
    padding: 0;
    border-radius: 10px;
}

#page-topbar .header-item:hover,
#page-topbar .header-item:focus-visible {
    background-color: #f1f3f5;
    border-radius: 8px;
}

body[data-topbar="dark"] #page-topbar .header-item:hover,
body[data-topbar="dark"] #page-topbar .header-item:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ==================================================
   SCROLLBAR
================================================== */

.table-responsive,
.modal-dialog-scrollable .modal-body {
    /* Firefox has no ::-webkit-scrollbar support, so without this it falls
       back to the browser's bulky default scrollbar (same issue already
       fixed for .sidebar-scroll below). */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.5) #fff;
}

.table-responsive::-webkit-scrollbar,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.table-responsive::-webkit-scrollbar-thumb,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.5);
    border-radius: 10px;
    border: 2px solid #fff;
}

.table-responsive::-webkit-scrollbar-track,
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
    background: #fff;
}

/* Scroll-shadow affordance: a subtle fade on whichever edge still has more
   table content to scroll to, so a wide table's cut-off last column (e.g.
   Manage Devices' Device Info) doesn't look like it's simply missing.
   CSS-only (no JS) - background-attachment:local vs scroll is what makes
   the shadow layers track scroll position and disappear once there's
   nothing left in that direction. */
.table-responsive {
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
        linear-gradient(to right, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll;
}

/* =========================
   FILTER ROW LAYOUT
========================= */

#lblRecord {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-blue);
}

.app-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.app-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 26px;
    color: var(--text-muted);
    background: #eef1f4;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-sm);
}

.navbar-brand-box {
  background: none !important;
  height: 60px;
  padding: 0 0.5rem 0 1rem;
  transition: all 0.3s ease;
}

/* Status Toggle Switch */
.form-check-input {
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--success-green);
    border-color: var(--success-green);
}

.form-check-input:not(:checked) {
    background-color: var(--danger-red);
    border-color: var(--danger-red);
}

/* Plain radio buttons (e.g. Organization license type) opt out of the toggle-switch look above */
.license-type-radio.form-check-input {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .25);
}

.license-type-radio.form-check-input:checked {
    background-color: var(--brand-indigo);
    border-color: var(--brand-indigo);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.license-type-radio.form-check-input:not(:checked) {
    background-color: #fff;
    border-color: rgba(0, 0, 0, .25);
}

/* Plain checkboxes (e.g. login page "Keep me logged in") opt out of the toggle-switch look above */
.plain-checkbox.form-check-input {
    width: 1em;
    height: 1em;
    border-radius: 0.25em;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .25);
}

.plain-checkbox.form-check-input:checked {
    background-color: var(--brand-indigo);
    border-color: var(--brand-indigo);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3e%3cpath d='M6 10l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.7em;
}

.plain-checkbox.form-check-input:not(:checked) {
    background-color: #fff;
    border-color: rgba(0, 0, 0, .25);
}

.table-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

input[switch] {
    display: none;
}

input[switch] + label {
    position: relative;
    width: 70px;
    height: 26px;
    background: #dee2e6;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    /* this label reuses Bootstrap's .form-label class, which carries its own
       margin-bottom meant for field labels above inputs - that pushes this
       switch handle upward relative to plain-text table cells, so override it */
    margin-bottom: 0;
}


input[switch] + label:after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    top: 2px;
    left: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


input[switch]:checked + label {
    background: #28a745;
}


input[switch]:checked + label:after {
    left: 45px;
}

input[switch] + label:before {
    content: attr(data-off-label);
    position: absolute;
    font-size: 8px;
    top: 40%;
    left: 28px;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: all 0.3s ease;
}


input[switch]:checked + label:before {
    content: attr(data-on-label);
    left: 8px;
    color: #fff;
}

input[switch]:disabled + label {
    opacity: 0.6;
    cursor: not-allowed;
}

.navbar-logo {
    height: 32px;
    transition: all 0.3s ease;
}

/* Colored-initials fallback for the header account avatar - the vendor
   theme's default is a plain gray circle with no image, which reads as an
   unfinished/broken avatar rather than an intentional placeholder. */
.header-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.prj_name {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin-left: 3px;
    line-height: 1.2;
    white-space: normal;
    max-width: 150px;
}

/* Org identity in the topbar - two lines so "testing" reads as the
   organization's name, not just a stray label next to the Sync button */
.org-identity {
    line-height: 1.15;
    max-width: 160px;
}

.org-identity-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-identity-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .org-identity {
        display: none;
    }
}

body.vertical-collpsed .prj_name {
    display: none;
}

body.vertical-collpsed .navbar-logo {
    height: 28px;
    margin: auto;
}

body:not(.vertical-collpsed) .navbar-brand-box {
    justify-content: flex-start;
}

/* When the sidebar is collapsed to icons-only, the theme's own active-item
   style is just a slight icon color shift (#b4c9de) - too subtle to spot at a
   glance among many similar icons. Add a clear background + accent bar so the
   current page's menu item is obvious without needing to hover for the label. */
body.vertical-collpsed #sidebar-menu li.mm-active > a {
    background-color: rgba(0, 136, 62, 0.22);
    border-left: 3px solid #ffffff;
}

body.vertical-collpsed #sidebar-menu li.mm-active > a i {
    color: #ffffff !important;
}

/* Vendor bug: .vertical-collpsed .vertical-menu switches "position" from
   fixed to absolute, so once collapsed, the icon sidebar scrolls away with
   the page content instead of staying pinned on screen. Restore fixed. */
body.vertical-collpsed .vertical-menu {
    position: fixed;
}

.footer {
    /* Static, not fixed: the footer is already the last element in normal
       document flow (right after all page content, see footer.blade.php).
       A fixed position instead made it permanently overlay whatever
       content happened to occupy that same 60px viewport band, on ANY
       page whose content reached the bottom of the initial (unscrolled)
       view - confirmed hiding real table rows on Installed Apps and
       Dashboard. As a normal in-flow element it can never overlap
       anything, and it no longer needs a hardcoded left-offset that used
       to drift out of sync with the sidebar's collapsed/expanded width. */
    height: 60px;

    /* Aesthetics */
    background-color: #ffffff;
    border-top: 1px solid #e9ebec;
    color: #74788d;
    font-size: 12.5px;
    padding: 0 1.5rem;

    /* Alignment */
    display: flex;
    align-items: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer a {
    color: #556ee6;
    text-decoration: none;
    margin-left: 15px;
    transition: color 0.2s;
}

.footer a:hover {
    color: #344db5;
    text-decoration: underline;
}

/* Responsiveness: Remove left margin if sidebar hides on small screens */
@media (max-width: 992px) {
    .footer {
        left: 0;
        text-align: center;
    }
    .footer-content {
        justify-content: center;
    }
}

/* ==================================================
   SHARED UTILITY CLASSES
   (replace one-off inline style="..." attributes across views;
   Bootstrap already covers d-none, float-end, text-end, w-100,
   border-0, w-auto - use those directly instead of duplicating here)
================================================== */

/* Pagination "Total Records" badge text (list/pagination partials) */
.total-records-badge {
    color: var(--brand-indigo);
    font-size: 16px;
}

/* Password-field eye toggle icon (organization/org_users tables) */
.cursor-pointer {
    cursor: pointer;
}

/* Select2/dropdown that needs to sit flush under its label (category schedule, category list, category-wise domain) */
.select-tight {
    width: 100%;
    margin-top: -3px !important;
}

/* Select2 wraps .select-tight in its own sibling container, which doesn't
   inherit this class and otherwise collapses to an auto-computed width. */
.select-tight + .select2-container {
    width: 100% !important;
}

/* Dashboard stat cards */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    margin-right: 15px;
}

.stat-icon-font {
    font-size: 1.5rem;
}

.stat-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.stat-card-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 2px;
}

/* Small uppercase group labels above each dashboard card row/table row so
   the page reads as grouped sections rather than eight unrelated tiles */
.dashboard-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 4px 0 10px;
}

.dashboard-section-label + .dashboard-stat-cards + .dashboard-section-label {
    margin-top: 20px;
}

.w-50px {
    width: 50px;
}

.w-100px {
    width: 100px;
}

/* Login page - Forget Pin modal (distinct from .login-card, the main login card below) */
.login-modal-card {
    border-radius: 1rem;
    border: 1px solid #d1d5db;
    box-shadow: var(--shadow-card);
}

.login-btn {
    width: auto;
    padding: 10px 25px;
}

/* Top-nav notification badge + dropdown */
.notif-badge-corner {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
}

.notif-dropdown-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* Device location map embed */
.device-location-map {
    height: 400px;
}

/* Full-size filter selects (Device Location's User filter, App Block
   Schedule's Category filter, ...): select2's own default height is shorter
   than Bootstrap's default .form-control/.btn height, so it doesn't line up
   with the date inputs/Search/Reset buttons beside it. Scoped to these
   specific selects by id (select2 inserts its container as the next sibling
   of the now-hidden <select>) so other pages' select2 fields - several of
   which use the smaller form-select-sm variant - aren't affected. Add new
   ids to this list rather than duplicating the rule elsewhere. */
#user_name + .select2-container .select2-selection--single,
#filter_category_id + .select2-container .select2-selection--single,
#status + .select2-container .select2-selection--single,
#category_id + .select2-container .select2-selection--single,
#install_status + .select2-container .select2-selection--single,
#effective_status + .select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

#user_name + .select2-container .select2-selection--single .select2-selection__rendered,
#filter_category_id + .select2-container .select2-selection--single .select2-selection__rendered,
#status + .select2-container .select2-selection--single .select2-selection__rendered,
#category_id + .select2-container .select2-selection--single .select2-selection__rendered,
#install_status + .select2-container .select2-selection--single .select2-selection__rendered,
#effective_status + .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
}

#user_name + .select2-container .select2-selection--single .select2-selection__arrow,
#filter_category_id + .select2-container .select2-selection--single .select2-selection__arrow,
#status + .select2-container .select2-selection--single .select2-selection__arrow,
#category_id + .select2-container .select2-selection--single .select2-selection__arrow,
#install_status + .select2-container .select2-selection--single .select2-selection__arrow,
#effective_status + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
}

/* org_users table columns */
.col-min-170 {
    min-width: 170px;
}

.col-w-95 {
    width: 95px;
}

/* Device info compact display - smaller secondary text for density reduction */
.device-info-compact {
    font-size: 13px;
    color: #6c757d;
}

/* Keyword column - handle long search terms with wrapping and readability */
.keyword-cell {
    display: inline-block;
    word-break: break-word;
    word-wrap: break-word;
    max-width: 300px;
    text-align: center;
}

.sidebar-scroll {
    overflow-y: auto;
    /* data-simplebar on this element has no effect (its JS/CSS isn't loaded),
       so it falls back to the browser's bulky default scrollbar. Style a
       slim, theme-matching one instead (Firefox + WebKit/Chromium). */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Dashboard stat-card hover lift (scoped to the dashboard's card row only -
   deliberately NOT a bare .card rule, which would affect every card sitewide) */
.dashboard-stat-cards .card {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border-radius: 0.75rem;
    border: 1px solid var(--border-light);
}

.dashboard-stat-cards .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: #d1d5db;
}

.dashboard-stat-cards .stretched-link::after {
    z-index: 0;
}

/* Small "this card links somewhere" affordance - the hover lift alone doesn't
   tell an admin a number is clickable until they're already hovering it. */
.stat-card-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #c7cdd6;
    font-size: 14px;
    transition: color 0.2s, transform 0.2s;
}

.dashboard-stat-cards .card:hover .stat-card-arrow {
    color: var(--text-muted);
    transform: translateX(3px);
}

.stat-card-scope {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================================================
   LIST-PAGE DATE FILTER ROW
   (shared by my_visit_list, my_block_list, youtube_tracking,
   search_keyword, and any other page with a Yesterday/Today/7-Days
   filter bar + "Total Records" badge - base .filter-card/.date-btn/#lblRecord
   rules already exist above; this only adds what was missing there)
================================================== */
#active_filter {
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .date-btn {
        font-size: 12px;
        padding: 4px 10px;
    }

    .filter-card .d-flex {
        overflow-x: auto;
    }
}

/* ==================================================
   APP CATEGORY SCHEDULE - day-of-week checkboxes
   (.form-check-input is globally restyled into a Block/Allow toggle switch
   above - day-checkbox opts these plain day-of-week checkboxes back out of
   that, styled like Bootstrap's own checkbox instead of a bare browser box)
================================================== */
#add_schedule_form .day-row .form-check.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1rem 0.5rem 0;
    padding-left: 0;
}

#add_schedule_form .day-row .form-check-label {
    margin-bottom: 0;
    cursor: pointer;
}

.day-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.3em;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.day-checkbox:hover {
    border-color: var(--brand-indigo);
}

.day-checkbox:focus {
    outline: none;
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 0.2rem rgba(98, 110, 212, 0.25);
}

.day-checkbox:checked {
    background-color: var(--brand-indigo);
    border-color: var(--brand-indigo);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3e%3cpath d='M6 10l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8em;
}

/* ==================================================
   PAGE HEADER / TYPOGRAPHY
   (one-line purpose statement under every page title, per the
   "what am I looking at / what can I do here" UX pass)
================================================== */

.page-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.page-description {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
    max-width: 720px;
}

.help-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================================================
   SCOPE NOTICES
   Two flavors so an Admin can tell at a glance whether an action
   reaches every device in the organization or just the one they're
   looking at. org_wide uses the existing warning alert (partials/org_wide_notice);
   this adds the device-specific counterpart (partials/device_specific_notice)
   in a calmer, informational style so it never competes visually with the
   org-wide warning.
================================================== */

.device-scope-notice {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    border-radius: var(--radius);
    padding: 10px 14px;
}

.device-scope-notice i {
    color: #4f46e5;
}

/* ==================================================
   EMPTY STATES
   Shown instead of a bare empty table body so the Admin always knows
   what happened and what to do next.
================================================== */

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 30px;
    color: #9ca3af;
    margin-bottom: 10px;
    display: block;
}

/* .empty-state i above targets the one big top icon, but a button placed
   inside an empty state (e.g. "Clear Filters") also contains its own <i> -
   without this, it inherits the same 30px block icon styling and the
   button's icon+label render stacked and oversized instead of inline. */
.empty-state .btn i {
    font-size: inherit;
    color: inherit;
    display: inline;
    margin-bottom: 0;
}

.empty-state .empty-state-title {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 14px;
    margin-bottom: 4px;
}

.empty-state .empty-state-desc {
    font-size: 13px;
    margin-bottom: 12px;
}

/* Dashboard "Top 10" tables - stronger header, muted rank column, and
   right-aligned counts so the numbers are easy to compare at a glance */
.dashboard-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border-bottom-width: 2px;
}

.dashboard-table td.rank-col {
    color: var(--text-muted);
    font-weight: 600;
}

/* This theme's Bootstrap build gives .btn-outline-secondary color/border of
   #e9ecef - nearly invisible on a white input-group until :hover fills it in.
   Fine for some contexts, but unusable for a standalone icon-only button
   (e.g. the PIN show/hide toggle). Give icon-only "neutral" actions real,
   always-visible contrast instead. */
.btn-icon-outline {
    color: var(--text-muted);
    border: 1px solid #ced4da;
    background: #fff;
}

.btn-icon-outline:hover {
    color: #212529;
    background-color: #f1f3f5;
    border-color: #adb5bd;
}

/* ==================================================
   ENTERPRISE SHELL REDESIGN
   Global sidebar / navbar / footer / page-header polish, plus a small
   shared component library (status badges, icon-action buttons, skeleton
   loader). CSS-only against existing markup/IDs - no Blade, JS, route, or
   controller changes required for anything in this section.
================================================== */

/* ---- Sidebar: spacing, active-state, hover, group headers ---- */

#sidebar-menu #side-menu > li > a {
    padding: 11px 20px;
    font-size: 13.5px;
    color: #a6b0cf;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#sidebar-menu #side-menu > li > a i {
    font-size: 17px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Collapsed (icon-only) mode: the icon is the entire visible menu item, so
   it needs to read clearly on its own instead of at the expanded-mode size */
body.vertical-collpsed #sidebar-menu #side-menu > li > a {
    justify-content: center;
    padding: 14px 0;
}

body.vertical-collpsed #sidebar-menu #side-menu > li > a i {
    font-size: 20px;
    width: auto;
}

/* Keep collapsed mode strictly icon-only, even on hover/focus - the vendor
   theme's flyout mechanism (neutralized below) otherwise reveals this label
   text, which then just gets clipped by the sidebar's own fixed 70px width
   instead of properly widening. The existing title="..." attribute on each
   link already gives a native browser tooltip, so nothing is lost. */
body.vertical-collpsed #sidebar-menu #side-menu > li > a span {
    display: none;
}

/* Vendor theme bug: app.min.css has a collapsed-sidebar hover "flyout" rule
   (.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a) meant for
   items with a nested submenu - it widens the row to calc(190px + 70px) and
   swaps in a light background, expecting a flyout panel of submenu links to
   fill that extra space. This sidebar has no submenus, so hovering ANY
   collapsed item left a wide blank/light box with nothing in it. Neutralize
   the flyout geometry (higher specificity here wins on ID count alone) and
   keep hover to a simple background tint instead. */
body.vertical-collpsed #sidebar-menu #side-menu > li:hover > a,
body.vertical-collpsed #sidebar-menu #side-menu > li > a:hover {
    width: auto;
    position: static;
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    transition: background-color 0.18s ease, color 0.18s ease;
}

#sidebar-menu #side-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

#sidebar-menu #side-menu > li > a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -2px;
}

/* Expanded-mode active item - app.js (line ~90) adds .active to the current
   <a> and .mm-active to its parent <li>; the collapsed-mode equivalent
   already exists above (body.vertical-collpsed #sidebar-menu li.mm-active > a) */
body:not(.vertical-collpsed) #sidebar-menu #side-menu > li.mm-active > a,
body:not(.vertical-collpsed) #sidebar-menu #side-menu > li > a.active {
    background-color: rgba(0, 136, 62, 0.22);
    color: #ffffff;
    font-weight: 600;
    border-left-color: #ffffff;
}

body:not(.vertical-collpsed) #sidebar-menu #side-menu > li.mm-active > a i,
body:not(.vertical-collpsed) #sidebar-menu #side-menu > li > a.active i {
    color: #ffffff;
}

#sidebar-menu .menu-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 18px 20px 8px;
}

#sidebar-menu #side-menu > li:first-child > .menu-title {
    padding-top: 10px;
}

/* Collapsed (icon-only) mode has no room for a text section label - hiding
   it entirely avoids leaving a blank padded gap where the invisible text
   used to reserve space. */
body.vertical-collpsed #sidebar-menu .menu-title {
    display: none;
}

/* top:63px keeps the sidebar anchored to the header's actual height - the
   vendor theme hardcodes both to its own 70px header height, so shrinking
   .navbar-header alone would leave a 7px gap below it. */
.vertical-menu {
    transition: width 0.25s ease;
    top: 63px;
}

/* ---- Top navbar: hierarchy, spacing, subtle bottom border ---- */

.navbar-header {
    height: 63px;
    padding: 0 16px;
}

.main-content .content {
    margin-top: 63px;
}

.navbar-header .org-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40px;
    padding-left: 16px;
    margin-left: 10px !important;
    border-left: 1px solid #e9ecef;
}

#page-topbar .btn-sync {
    height: 40px;
    margin-left: 16px !important;
}

#access_request_dropdown .dropdown-item,
#access_request_dropdown a.access_request_notif {
    transition: background-color 0.15s ease;
}

#access_request_dropdown .p-3.border-bottom {
    background: #fafbfc;
}

/* ---- Footer: compact, evenly spaced ---- */

.footer-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-links a {
    margin-left: 0;
    font-weight: 500;
}

/* ---- Page header: title/description/breadcrumb + optional right-aligned actions ---- */

.page-title-box .page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-title-box .page-title-main {
    min-width: 0;
}

.page-title-box .page-title-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-title-box .breadcrumb {
    font-size: 12px;
    margin-top: 6px;
}

.page-title-box .breadcrumb-item + .breadcrumb-item::before {
    color: #c7cdd6;
}

.page-title-box .breadcrumb-item a {
    color: var(--text-muted);
}

.page-title-box .breadcrumb-item.active {
    color: var(--text-muted);
}

/* ==================================================
   COMPONENT LIBRARY - STATUS BADGES
   One reusable pill for every status shown across list pages (requests,
   devices, licenses, schedules, ...). Existing Bootstrap bg-* badges used
   inline elsewhere are untouched - this is additive, opt-in per page.
================================================== */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.badge-status-pending {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}

.badge-status-approved,
.badge-status-active {
    background: var(--status-approved-bg);
    color: var(--status-approved-fg);
}

.badge-status-rejected,
.badge-status-blocked {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
}

.badge-status-completed {
    background: var(--status-completed-bg);
    color: var(--status-completed-fg);
}

.badge-status-inactive,
.badge-status-expired {
    background: var(--status-inactive-bg);
    color: var(--status-inactive-fg);
}

.badge-status-warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

/* ==================================================
   COMPONENT LIBRARY - ICON ACTION BUTTONS
   Compact square icon buttons for table row actions (approve/reject/view/
   edit/delete/...). Opt-in per page via these classes instead of ad hoc
   per-page button styling.
================================================== */

.btn-icon-action {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.btn-icon-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon-action-success {
    background: var(--primary-green-tint);
    color: var(--primary-green-dark);
}

.btn-icon-action-success:hover:not(:disabled) {
    background: var(--primary-green);
    color: #fff;
}

.btn-icon-action-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #b3212f;
}

.btn-icon-action-danger:hover:not(:disabled) {
    background: var(--danger-red);
    color: #fff;
}

.btn-icon-action-info {
    background: rgba(13, 110, 253, 0.1);
    color: #0d55c6;
}

.btn-icon-action-info:hover:not(:disabled) {
    background: var(--brand-blue);
    color: #fff;
}

/* ==================================================
   COMPONENT LIBRARY - SKELETON LOADER
   Shared shimmer loading rows for AJAX-loaded table partials, so a page
   can show this instead of a blank area or "Loading..." text while its
   #table_data (or equivalent) container fetches.
================================================== */

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}

.skeleton-bar {
    height: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #eef0f3 25%, #e3e6ea 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ==================================================
   COMPONENT LIBRARY - SUMMARY CARDS
   Small stat tiles above a list page's toolbar (e.g. Pending/Approved
   Today/Total Requests). Color modifiers are neutral (by hue, not meaning)
   so any page can reuse them for whatever 3-4 numbers it wants to surface.
================================================== */

.summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 10px 16px;
    min-width: 150px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.summary-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.summary-card-clickable {
    cursor: pointer;
}

.summary-card-clickable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 62, 0.25);
}

.summary-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.summary-card-icon-amber {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}

.summary-card-icon-green {
    background: var(--primary-green-tint);
    color: var(--primary-green-dark);
}

.summary-card-icon-blue {
    background: var(--status-completed-bg);
    color: var(--status-completed-fg);
}

.summary-card-icon-red {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
}

.summary-card-count {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
}

.summary-card-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==================================================
   COMPONENT LIBRARY - COMPACT NOTICE
   A condensed alternative to partials/org_wide_notice for pages that want
   a single-line scope reminder instead of the full-size warning box.
================================================== */

.compact-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 55px;
    background: var(--primary-green-tint);
    border: 1px solid rgba(0, 136, 62, 0.25);
    border-radius: var(--radius-lg);
    padding: 8px 16px;
    margin-bottom: 16px;
}

.compact-notice i {
    color: var(--primary-green-dark);
    font-size: 16px;
    flex-shrink: 0;
}

.compact-notice .compact-notice-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
}

.compact-notice .compact-notice-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================================================
   COMPONENT LIBRARY - LIST TOOLBAR
   Polish on top of the existing .filter-card for pages that want uppercase
   micro-labels and consistent input/button heights across the row.
================================================== */

#monitoring_form #search_btn {
    padding-left: 20px;
    padding-right: 20px;
}

.date-input-group .input-group-text {
    background: #fff;
    color: var(--text-muted);
    border-right: none;
}

.date-input-group .form-control {
    border-left: none;
}

.list-toolbar .form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.list-toolbar .form-control,
.list-toolbar .form-select {
    border-radius: var(--radius);
    height: 38px;
}

.list-toolbar .btn {
    height: 38px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

/* ==================================================
   COMPONENT LIBRARY - AVATARS / ENTITY ICONS / DATE CELLS
   Shared building blocks for "who" (avatar initials), "what" (small
   colored icon/initials tile for an app/entity), and "when" (two-line
   date) table cells.
================================================== */

.avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background-color: var(--primary-green);
    flex-shrink: 0;
}

.entity-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

/* Fixed-width variant: keeps the icon/avatar at the same starting position on
   every row (no left/right jump as the name's length varies), while the box
   itself still sits centered within a wider table column via margin:auto. */
.entity-cell-fixed {
    width: 160px;
    margin: 0 auto;
    justify-content: flex-start;
}

/* Pairs with .entity-cell-fixed above - same width/centering math (not a
   guessed offset), so the header text lines up with where that fixed-width
   box's content actually starts, regardless of the column's real width. */
.entity-cell-fixed-header {
    display: block;
    width: 160px;
    margin: 0 auto;
    text-align: left;
}

.entity-cell-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 13px;
}

.entity-icon-tile {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.date-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.date-cell .date-cell-day {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 12.5px;
}

.date-cell .date-cell-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* ==================================================
   COMPONENT LIBRARY - DURATION BADGES / READ STATE DOTS
================================================== */

.badge-duration-short {
    background: rgba(253, 126, 20, 0.14);
    color: #b8520a;
}

.badge-duration-mid {
    background: var(--status-completed-bg);
    color: var(--status-completed-fg);
}

.badge-duration-long {
    background: var(--primary-green-tint);
    color: var(--primary-green-dark);
}

.state-dot-unread {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-blue);
}

.state-dot-unread .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.state-dot-read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #98a2b3;
}

/* ==================================================
   HELP PAGE
   (moved out of resources\views\help\index.blade.php's inline <style> block)
================================================== */

#help-page section,
#help-page .accordion-item {
    /* Set from JS to navbar height + the sticky hero's actual rendered
       height (same value the sidebar's own sticky offset uses) - a fixed
       number here would land the scrolled-to section underneath the sticky
       hero instead of below it. */
    scroll-margin-top: var(--help-sidebar-top, 90px);
}

/* ---- Reading progress bar ---- */
#help-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--primary-green, #00883e);
    z-index: 1080;
    transition: width .1s ease-out;
}

/* The vendor theme sets .main-content { overflow: hidden } - since
   .main-content doesn't scroll independently (the actual page scroll
   happens on body/html), that overflow silently breaks position:sticky for
   everything inside it. Only lift it on pages that contain #help-page, so
   no other page's layout is affected. */
.main-content:has(#help-page) {
    overflow: visible;
}

/* ---- Hero header ---- */
.help-hero {
    text-align: center;
    padding: 28px 16px 20px;
    position: sticky;
    top: 63px;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}

/* Only show the separating border once the hero is actually pinned under
   the fixed top navbar and the page has scrolled past it - JS toggles this. */
.help-hero.is-stuck {
    border-bottom-color: var(--border-light, #eef0f2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.help-hero-icon {
    font-size: 30px;
    color: var(--primary-green, #00883e);
    margin-bottom: 8px;
}

.help-hero p {
    color: var(--text-muted, #74788d);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.help-search-box {
    position: relative;
    max-width: 420px;
}

.help-search-box i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #9ca3af;
}

.help-search-box .form-control {
    padding-left: 38px;
    border-radius: 999px;
}

/* ---- Quick nav cards ---- */
.help-quicklink-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    height: 100%;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: var(--radius, 8px);
    text-decoration: none;
    color: var(--text-dark, #495057);
    font-weight: 600;
    font-size: 13px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.help-quicklink-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    color: var(--primary-green, #00883e);
}

.help-quicklink-card i {
    font-size: 20px;
    color: var(--primary-green, #00883e);
}

/* ---- Sticky sidebar ---- */
.help-sidebar {
    position: sticky;
    /* Set from JS to the sticky hero's actual rendered height, so the
       sidebar sticks directly below it instead of overlapping - a fixed
       value here would drift out of sync whenever the hero's height
       changes (window width, font scaling, etc). */
    top: var(--help-sidebar-top, 90px);
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: var(--radius, 8px);
    padding: 12px 0;
    max-height: calc(100vh - var(--help-sidebar-top, 90px) - 24px);
    overflow-y: auto;
    /* Slim, theme-matching scrollbar (same convention as .table-responsive /
       .modal-dialog-scrollable .modal-body) instead of the browser's bulky
       default when the nav list is taller than the available viewport. */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 136, 62, 0.35) transparent;
}

.help-sidebar::-webkit-scrollbar {
    width: 6px;
}

.help-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.help-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 136, 62, 0.35);
    border-radius: 3px;
}

.help-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 136, 62, 0.55);
}

.help-sidebar-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #74788d);
    padding: 4px 16px 10px;
}

.help-sidebar-nav .nav-link {
    color: var(--text-dark, #495057);
    font-size: 13px;
    padding: 8px 16px;
    border-left: 3px solid transparent;
}

.help-sidebar-nav .nav-link:hover {
    background-color: rgba(0, 0, 0, .03);
}

.help-sidebar-nav .nav-link.active {
    color: var(--primary-green, #00883e);
    font-weight: 600;
    border-left-color: var(--primary-green, #00883e);
    background-color: rgba(0, 136, 62, .06);
}

/* ---- Readability ---- */
.help-content p {
    line-height: 1.65;
    margin-bottom: .85rem;
}

.help-content .accordion-button:not(.collapsed) {
    color: var(--primary-green, #00883e);
    background-color: rgba(0, 136, 62, .06);
}

.help-content mark {
    background-color: #fff3a3;
    padding: 0 .1em;
}

/* ---- Workflow timeline ---- */
.help-timeline {
    position: relative;
    padding-left: 44px;
}

.help-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e9ecef;
}

.help-timeline-step {
    position: relative;
    padding-bottom: 22px;
}

.help-timeline-step:last-child {
    padding-bottom: 0;
}

.help-timeline-num {
    position: absolute;
    left: -44px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-green, #00883e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.help-timeline-text {
    padding-top: 5px;
}

/* ---- Quick Reference cards ---- */
.help-qr-card {
    height: 100%;
    border: 1px solid #eef0f2;
    border-radius: var(--radius, 8px);
    padding: 14px 16px;
}

.help-qr-card-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--text-dark, #495057);
}

.help-qr-item {
    padding: 6px 0;
    border-top: 1px dashed #eef0f2;
}

.help-qr-item:first-of-type {
    border-top: none;
}

.help-qr-item-name {
    font-weight: 600;
    font-size: 13px;
}

.help-qr-item-desc {
    font-size: 12px;
    color: var(--text-muted, #74788d);
}

/* ---- Back to top ---- */
.help-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--primary-green, #00883e);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1070;
}

.help-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.help-back-to-top:hover {
    background: #23854a;
}

@media (max-width: 991.98px) {
    .help-hero {
        padding: 20px 8px 14px;
    }
}

/* ==================================================
   ERROR PAGES (400/403/404/419/500)
   Standalone documents (no auth-dependent layout, since some of these fire
   precisely when auth/session is broken) - self-contained, no external
   Bootstrap CDN dependency, just this local stylesheet + the app's existing
   FontAwesome CDN link already used elsewhere.
================================================== */

body.error-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    font-family: 'Poppins', 'Segoe UI', Roboto, sans-serif;
    padding: 20px;
}

.error-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px 36px;
    max-width: 460px;
    width: 100%;
    text-align: center;
}

.error-logo {
    height: 44px;
    margin-bottom: 20px;
}

.error-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
}

.error-icon-danger {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
}

.error-icon-warning {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}

.error-icon-info {
    background: var(--status-completed-bg);
    color: var(--status-completed-fg);
}

.error-code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-green-dark);
    margin-bottom: 6px;
}

.error-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 8px;
}

.error-message {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 24px;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-green);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.error-btn:hover {
    background: var(--primary-green-dark);
    color: #fff;
}

/* ==================================================
   LOGIN PAGE
   (standalone document, its own <head> - .login-page base rule is above in
   LAYOUT / GENERAL; child selectors here scoped under it so generic names
   like .form-control/.form-label/.login-card don't leak into the rest of
   the app now that this page also loads style.css)
================================================== */

.login-page .login-container {
    width: 100%;
    max-width: 1100px;
}

.login-page .login-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #d1d5db;
    padding: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.login-page .login-image-section {
    height: 100%;
    display: flex;
}

.login-page .login-image-section img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    border-radius: 0.8rem 0 0 0.8rem;
}

.login-page .login-form-section {
    padding: 30px 40px;
}

.login-page .logo-container {
    text-align: center;
    margin-bottom: 20px;
}

.login-page .logo-container img {
    max-width: 65px;
}

.login-page .login-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 25px;
}

.login-page .form-label {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
    margin-bottom: 6px;
}

.login-page .login-subtext {
    color: #4b5563;
}

.login-page .form-control {
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    padding: 12px;
    font-size: 14px;
    transition: all 0.2s;
}

.login-page .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Unified Button Theme */
.login-page .btn-main {
    background-color: #1e3a8a;
    color: white;
    border: none;
    padding: 12px;
    border-radius: var(--radius);
    font-weight: 600;
    width: 100%;
    transition: opacity 0.2s;
}

.login-page .btn-main:hover {
    opacity: 0.9;
    color: white;
}

.login-page .btn-outline-custom {
    border: 1px solid #1e3a8a;
    color: #1e3a8a;
    background: transparent;
    padding: 10px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.login-page .btn-outline-custom:hover {
    background-color: #1e3a8a;
    color: white;
}

.login-page .forgot-link {
    color: #1e3a8a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.login-page .forgot-link:hover {
    text-decoration: underline;
}

.login-page .divider {
    height: 1px;
    background: #e5e7eb;
    margin: 25px 0;
}

.login-page .alert-danger-custom {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    color: #b91c1c;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .login-page .login-image-section {
        display: none;
    }
}

/* ==================================================
   USER PROFILE MODAL
   scoped under .profile-modal so these generic names
   (.profile-card, .profile-field, etc.) don't leak elsewhere
================================================== */

.profile-modal-header {
    padding: 1rem 1.5rem;
}

.profile-modal-header .modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
}

.profile-modal-header .modal-title i {
    color: var(--primary-green);
}

.profile-modal-header .btn-close {
    transition: opacity 0.2s ease;
}

.profile-modal-header .btn-close:hover {
    opacity: 1;
}

.profile-modal-body {
    background: var(--bg-light);
    padding: 1.5rem;
}

.profile-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.profile-org-logo {
    height: 56px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border-radius: var(--radius-md, 6px);
}

.profile-card-header i {
    color: var(--primary-green);
    font-size: 15px;
}

.profile-card-header h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.profile-card-body {
    padding: 18px 20px;
}

.profile-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.profile-field label,
.profile-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.profile-field label i {
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    margin-right: 2px;
}

.profile-readonly,
.profile-readonly:disabled,
.profile-readonly[readonly] {
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    cursor: default;
    font-size: 14px;
}

/* Matches .form-control's rendered height (~38px) so the Remaining Days
   badge lines up with the plain text fields beside it in the same row,
   instead of sitting shorter and top-misaligned. */
.profile-field-value-box {
    display: flex;
    align-items: center;
    min-height: 38px;
}

.profile-pin-group .form-control:focus {
    z-index: 0;
}

.profile-modal .btn {
    border-radius: 8px;
}

/* This theme's .btn-outline-secondary is near-invisible (#e9ecef on white,
   see the .btn-icon-outline comment above) - the Reset and Close buttons in
   this modal use it, so give it real contrast here without touching the
   class globally. */
.profile-modal .btn-outline-secondary {
    color: var(--text-muted);
    border-color: #ced4da;
    background: #fff;
}

.profile-modal .btn-outline-secondary:hover {
    color: #212529;
    background-color: #f1f3f5;
    border-color: #adb5bd;
}

.profile-modal .btn:focus-visible,
.profile-modal .form-control:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 1px;
}

@media (max-width: 767.98px) {
    .profile-modal-body {
        padding: 1rem;
    }

    .profile-card-body {
        padding: 14px;
    }
}