/* ============================================================
   Design System – Modern, Vibrant, Professional
   ============================================================ */
:root{
    /* Inter first => Latin digits stay Latin; Cairo will render Arabic letters */
    --font: 'Inter', 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --bg: #f0f5fa;
    --bg-2: #ffffff;
    --text: #0b1a2e;
    --muted: #4b5e71;

    --primary: #10b981;          /* emerald 500 */
    --primary-2: #34d399;         /* emerald 400 */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    --border: rgba(11, 26, 46, 0.12);
    --shadow: 0 20px 45px -12px rgba(11, 26, 46, 0.25);

    --radius: 20px;
    --radius-sm: 14px;
    --blur: blur(16px);

    /* Chart colors (canvas reads these) */
    --chart-text: rgba(11, 26, 46, 0.86);
    --chart-muted: rgba(11, 26, 46, 0.62);
    --chart-grid: rgba(11, 26, 46, 0.10);
    --chart-axis: rgba(11, 26, 46, 0.18);
    --chart-bar-top: rgba(16, 185, 129, 0.92);
    --chart-bar-bottom: rgba(5, 150, 105, 0.55);
    --chart-avg: rgba(16, 185, 129, 0.34);
    --chart-target: rgba(245, 158, 11, 0.38);
}

body.dark{
    --bg: #0b1422;
    --bg-2: rgba(255,255,255,0.06);
    --text: #f0f4fa;
    --muted: #a0b3c9;
    --border: rgba(160,179,201,0.22);
    --shadow: 0 20px 45px -12px rgba(0,0,0,0.5);

    --chart-text: rgba(255,255,255,0.86);
    --chart-muted: rgba(255,255,255,0.62);
    --chart-grid: rgba(255,255,255,0.10);
    --chart-axis: rgba(255,255,255,0.18);
    --chart-bar-top: rgba(16, 185, 129, 0.92);
    --chart-bar-bottom: rgba(6, 95, 70, 0.55);
    --chart-avg: rgba(16, 185, 129, 0.35);
    --chart-target: rgba(245, 158, 11, 0.42);
}

/* ============================================================
   Native form controls (select dropdown options)
   ------------------------------------------------------------
   In dark mode, browsers sometimes render the <select> dropdown
   menu with a light background while inheriting a light text
   color from the page, making options unreadable.
   ============================================================ */
:root{ color-scheme: light; }
body.dark{ color-scheme: dark; }

select{ color-scheme: light; }
body.dark select{ color-scheme: dark; }

select option,
select optgroup{
    background-color: var(--bg);
    color: var(--text);
}

/* ============================================================
   Base
   ============================================================ */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
    margin: 0;
    font-family: var(--font);
    background: 
        radial-gradient(1100px 600px at 10% -20%, rgba(16,185,129,0.28), transparent 60%),
        radial-gradient(900px 520px at 110% 5%, rgba(59,130,246,0.20), transparent 60%),
        radial-gradient(900px 520px at 35% 120%, rgba(16,185,129,0.16), transparent 60%),
        var(--bg);
    color: var(--text);
    font-size: 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 1800px){
    body{ font-size: 18px; }
}

@media (max-width: 420px){
    body{ font-size: 15px; }
}

/* Scrollbar */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: rgba(75,94,113,0.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(75,94,113,0.55); }
::-webkit-scrollbar-track{ background: transparent; }

a{ color: inherit; text-decoration: none; }

.muted{ color: var(--muted); }
.hint{ margin-top: 10px; color: var(--muted); font-size: .92rem; }
.chart-note{ margin: 10px 2px 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }

/* ============================================================
   Layout
   ============================================================ */
.dashboard-container{
    display: flex;
    min-height: 100vh;
}

.sidebar{
    width: 280px;
    z-index: 20;
    background: linear-gradient(155deg, #0b2e1a, #03100a);
    backdrop-filter: var(--blur);
    border-left: 1px solid rgba(255,255,255,0.12);
    padding: 20px;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    overflow-y: auto;
    color: #fff;
    box-shadow: 4px 0 25px rgba(0,0,0,0.3);
}

/* Mobile sidebar overlay */
.sidebar-overlay{
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(2px);
    z-index: 19;
    display: none;
}
body.sidebar-open .sidebar-overlay{ display: block; }


.sidebar > *{ position: relative; z-index: 1; }

.sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(600px 300px at 20% 10%, rgba(16,185,129,0.22), transparent 60%),
        radial-gradient(520px 260px at 80% 30%, rgba(59,130,246,0.18), transparent 60%);
    opacity:.9;
}

.sidebar-header{
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 16px;
}

.sidebar-header h2{
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
}

.sidebar-header i{ margin-left: 10px; color: #10b981; }

.sidebar-menu{ list-style: none; padding: 0; margin: 0; }

.menu-item{
    margin: 8px 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.menu-item a{
    display: flex;
    align-items: center;
    padding: 12px 14px;
    color: rgba(255,255,255,0.74);
    transition: .2s ease;
    gap: 10px;
    font-weight: 600;
}
.menu-item a i{ width: 22px; text-align: center; }
.menu-item:hover a{
    background: rgba(16,185,129,0.16);
    color: #fff;
}
.menu-item.active a{
    background: rgba(16,185,129,0.24);
    color: #fff;
    border: 1px solid rgba(16,185,129,0.32);
}

.sidebar-footer{
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.main-content{
    flex: 1 1 auto;
    margin-right: 280px;
    padding: 26px;
    width: calc(100% - 280px);
    max-width: calc(100vw - 280px);
    min-width: 0;
    overflow-x: hidden;
}

/* Header */
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.6);
    backdrop-filter: var(--blur);
    padding: 16px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    transition: background 0.2s ease;
}
body.dark .header{
    background: rgba(255,255,255,0.06);
}

.header-left{
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-left h1{ margin: 0; font-size: 1.5rem; }
.header-actions{ display: flex; gap: 10px; }

/* Show menu button only on small screens (drawer) */
#sidebar-toggle{ display: none; }

.icon-btn{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.65);
    backdrop-filter: var(--blur);
    cursor: pointer;
    transition: .2s ease;
}
body.dark .icon-btn{ background: rgba(255,255,255,.06); }
.icon-btn:hover{ transform: translateY(-1px); border-color: rgba(16,185,129,.5); }

.user-info{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}
.user-info i{ font-size: 1.5rem; color: var(--primary); }

/* Pages */
.page{ display: none; animation: fadeIn .25s ease; }
.page.active{ display: block; }
@keyframes fadeIn{
    from{ opacity: 0; transform: translateY(4px); }
    to{ opacity: 1; transform: translateY(0); }
}

.page-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ============================================================
   Cards / Stats
   ============================================================ */
.stats-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card{
    background: rgba(255,255,255,0.6);
    backdrop-filter: var(--blur);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .2s ease;
}
body.dark .stat-card{ background: rgba(255,255,255,0.06); }
.stat-card:hover{ transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(0,0,0,0.3); }

.stat-card.dashboard-link-card{
    cursor: pointer;
    position: relative;
    user-select: none;
}
.stat-card.dashboard-link-card:hover{
    border-color: rgba(16,185,129,.34);
}
.stat-card.dashboard-link-card:focus-visible{
    outline: none;
    border-color: rgba(16,185,129,.55);
    box-shadow: 0 0 0 4px rgba(16,185,129,.14), var(--shadow);
}
.stat-card.dashboard-link-card:active{
    transform: translateY(0) scale(.99);
}
.stat-card.dashboard-link-card::after{
    content: "\f060";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-inline-start: auto;
    color: var(--primary);
    opacity: 0;
    transform: translateX(6px);
    transition: .2s ease;
}
.stat-card.dashboard-link-card:hover::after,
.stat-card.dashboard-link-card:focus-visible::after{
    opacity: .75;
    transform: translateX(0);
}

.stat-icon{
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,185,129,0.16);
    color: var(--primary);
    font-size: 1.45rem;
}

.stat-icon.danger{
    background: rgba(239,68,68,0.14);
    color: var(--danger);
}
.stat-icon.warning{
    background: rgba(245,158,11,0.14);
    color: var(--warning);
}
.stat-icon.info{
    background: rgba(59,130,246,0.14);
    color: #3b82f6;
}

.stat-content h3{ margin: 0; font-size: 2rem; }
.stat-content p{ margin: 2px 0 0; color: var(--muted); }

.dashboard-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 1100px){
    .dashboard-grid{ grid-template-columns: 1fr; }
}

.dashboard-card{
    background: rgba(255,255,255,0.6);
    backdrop-filter: var(--blur);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
body.dark .dashboard-card{ background: rgba(255,255,255,0.06); }
.dashboard-card:hover{ transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(0,0,0,0.3); }

.card-header{
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.35);
}
body.dark .card-header{ background: rgba(255,255,255,0.03); }
.card-header h3{ margin: 0; font-size: 1.12rem; }

.card-content{ padding: 16px 18px; }

/* Recent */
.recent-request{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: .2s ease;
}
.recent-request:hover{
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.22);
}
.request-info h4{ margin: 0 0 4px 0; font-size: 1rem; }
.request-info p{ margin: 0; color: var(--muted); font-size: .92rem; }
.request-time{ text-align: left; color: var(--muted); font-size: .9rem; }

.recent-requests-footer{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

/* Agent chart */
.agent-stat{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}
.agent-stat:last-child{ border-bottom: none; }
.agent-stat-sub{ color: var(--muted); font-size: .9rem; }
.agent-stat-rate{ font-weight: 700; margin-bottom: 6px; }

.progress{
    width: 160px;
    height: 10px;
    border-radius: 999px;
    background: rgba(75,94,113,0.18);
    overflow: hidden;
}
.progress-bar{
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 999px;
}

/* ============================================================
   Tables
   ============================================================ */
.table-container{
    background: rgba(255,255,255,0.6);
    backdrop-filter: var(--blur);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
body.dark .table-container{ background: rgba(255,255,255,0.06); }

.data-table{
    width: 100%;
    border-collapse: collapse;
    font-size: .96rem;
}

.data-table thead{
    background: rgba(255,255,255,0.3);
}
body.dark .data-table thead{ background: rgba(255,255,255,0.03); }

.data-table th,
.data-table td{
    padding: 14px 14px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    vertical-align: middle;
}

.data-table th[data-sort]{
    cursor: pointer;
    user-select: none;
    position: relative;
}
.data-table th[data-sort] .sort-indicator{
    font-size: .82em;
    opacity: .55;
    margin-right: 6px;
}
.data-table th.sorted-asc .sort-indicator,
.data-table th.sorted-desc .sort-indicator{
    opacity: 1;
}

.data-table tbody tr:hover{
    background: rgba(16,185,129,0.06);
}

.data-table small{ color: var(--muted); }

/* ------------------------------------------------------------
   Table readability: keep columns visible, scroll horizontally
   ------------------------------------------------------------ */
.table-container .data-table{
    /* Let table expand to fit content so columns don't collapse */
    width: max-content;
    min-width: 100%;
}
.table-container .data-table th,
.table-container .data-table td{
    white-space: nowrap;
}
.table-container .data-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    /* Ensure sticky header stays readable over rows */
    background: inherit;
}

/* Agents page: fit every column inside the visible dashboard area on desktop. */
#agents-page .table-container{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
#agents-page .table-container .data-table{
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
#agents-page .data-table{
    font-size: .84rem;
    max-width: 100%;
    box-sizing: border-box;
}
#agents-page .data-table th,
#agents-page .data-table td{
    padding: 8px 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
#agents-page .data-table th:nth-child(1),
#agents-page .data-table td:nth-child(1){ width: 3.5%; }
#agents-page .data-table th:nth-child(2),
#agents-page .data-table td:nth-child(2){ width: 15%; }
#agents-page .data-table th:nth-child(3),
#agents-page .data-table td:nth-child(3){ width: 13.5%; }
#agents-page .data-table th:nth-child(4),
#agents-page .data-table td:nth-child(4){ width: 14.5%; }
#agents-page .data-table th:nth-child(5),
#agents-page .data-table td:nth-child(5){ width: 9%; }
#agents-page .data-table th:nth-child(6),
#agents-page .data-table td:nth-child(6){ width: 7%; }
#agents-page .data-table th:nth-child(7),
#agents-page .data-table td:nth-child(7){ width: 8%; }
#agents-page .data-table th:nth-child(8),
#agents-page .data-table td:nth-child(8){ width: 11.5%; }
#agents-page .data-table th:nth-child(9),
#agents-page .data-table td:nth-child(9){ width: 8%; }
#agents-page .data-table th:nth-child(10),
#agents-page .data-table td:nth-child(10){ width: 10%; }
#agents-page .action-buttons{
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}
#agents-page .action-buttons .btn-sm{
    width: 30px;
    height: 30px;
    padding: 0;
}
@media (max-width: 1000px){
    #agents-page .table-container{
        overflow-x: auto;
    }
    #agents-page .table-container .data-table{
        min-width: 1050px;
        table-layout: auto;
    }
    #agents-page .data-table th,
    #agents-page .data-table td{
        white-space: nowrap;
    }
}

/* Requests page: fit every column inside the visible dashboard area on desktop. */
#requests-page .table-container{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
#requests-page .table-container .data-table{
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
#requests-page .data-table th,
#requests-page .data-table td{
    padding: 10px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
#requests-page .data-table th:nth-child(1),
#requests-page .data-table td:nth-child(1){ width: 8%; }
#requests-page .data-table th:nth-child(2),
#requests-page .data-table td:nth-child(2){ width: 16%; }
#requests-page .data-table th:nth-child(3),
#requests-page .data-table td:nth-child(3){ width: 19%; }
#requests-page .data-table th:nth-child(4),
#requests-page .data-table td:nth-child(4){ width: 10%; }
#requests-page .data-table th:nth-child(5),
#requests-page .data-table td:nth-child(5){ width: 13%; }
#requests-page .data-table th:nth-child(6),
#requests-page .data-table td:nth-child(6){ width: 15%; }
#requests-page .data-table th:nth-child(7),
#requests-page .data-table td:nth-child(7){ width: 10%; }
#requests-page .data-table th:nth-child(8),
#requests-page .data-table td:nth-child(8){ width: 9%; }
#requests-page .action-buttons{
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}
#requests-page .action-buttons .btn-sm{
    width: 34px;
    height: 34px;
    padding: 0;
}
#requests-page .duration-cell{
    min-width: 0;
}
@media (max-width: 900px){
    #requests-page .table-container .data-table{
        min-width: 980px;
        table-layout: auto;
    }
    #requests-page .data-table th,
    #requests-page .data-table td{
        white-space: nowrap;
    }
}


/* ============================================================
   Buttons
   ============================================================ */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.95rem;
    transition: .2s ease;
    user-select: none;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.2); }
.btn:active{ transform: translateY(0); }

.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; box-shadow: 0 10px 26px rgba(16,185,129,0.3); }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-primary:active{ filter: brightness(.98); }

.btn-secondary{
    background: rgba(75,94,113,0.14);
    color: var(--text);
    border-color: rgba(75,94,113,0.18);
}
.btn-secondary:hover{ background: rgba(75,94,113,0.22); }

.btn-success{ background: var(--success); color: #fff; }
.btn-warning{ background: var(--warning); color: #111827; }
.btn-danger{ background: var(--danger); color: #fff; }

.btn-block{ width: 100%; }

.btn-sm{
    padding: 8px 10px;
    border-radius: 12px;
    font-size: .9rem;
}

.btn:disabled{
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Action buttons in table */
.action-buttons{
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

/* ============================================================
   Filters
   ============================================================ */
.filters{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.filters select{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.65);
    color: var(--text);
    outline: none;
    width: auto;
}
body.dark .filters select{ background: rgba(255,255,255,.06); }

.filters input{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.65);
    color: var(--text);
    outline: none;
    min-width: 220px;
    width: auto;
}
body.dark .filters input{ background: rgba(255,255,255,.06); }

/* Table toolbar + pagination */
.table-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px 14px;
    flex-wrap: wrap;
}
.table-toolbar.compact{ padding-top: 0; }

.table-meta{
    font-size: .92rem;
}

.table-footer{
    margin-top: 10px;
}

.pagination{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.page-btn{
    height: 38px;
    min-width: 38px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.65);
    backdrop-filter: var(--blur);
    cursor: pointer;
    transition: .15s ease;
    font-weight: 800;
    color: var(--text);
}
body.dark .page-btn{ background: rgba(255,255,255,.06); }
.page-btn:hover{ transform: translateY(-1px); border-color: rgba(16,185,129,.35); }
.page-btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; }
.page-btn.active{
    border-color: rgba(16,185,129,.45);
    background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(16,185,129,.12));
}

.pagination-sep{ color: var(--muted); padding: 0 6px; }

/* Copy row (settings) */
.copy-row{
    display: flex;
    gap: 10px;
    align-items: center;
}
.copy-row input{
    flex: 1;
}

/* Toggle switch */
.setting-item.inline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}
.switch{
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
}
.switch input{ display:none; }
.switch .slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background: rgba(75,94,113,0.35);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: .18s ease;
}
.switch .slider:before{
    content:"";
    position:absolute;
    height: 24px;
    width: 24px;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(11,26,46,.18);
    transition: .18s ease;
}
.switch input:checked + .slider{
    background: rgba(16,185,129,.45);
    border-color: rgba(16,185,129,.55);
}
.switch input:checked + .slider:before{
    transform: translateY(-50%) translateX(-24px);
}

/* ============================================================
   Badges / Status
   ============================================================ */
.status-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
    border: 1px solid transparent;
}
.status-pending{ background: rgba(245,158,11,.16); color: #b45309; border-color: rgba(245,158,11,.22); }
.status-incomplete{ background: rgba(75,94,113,.16); color: var(--muted); border-color: rgba(75,94,113,.22); }
.status-processing{ background: rgba(59,130,246,.16); color: #1d4ed8; border-color: rgba(59,130,246,.22); }
.status-completed{ background: rgba(16,185,129,.16); color: #0b5e42; border-color: rgba(16,185,129,.22); }
.status-cancelled{ background: rgba(239,68,68,.16); color: #b91c1c; border-color: rgba(239,68,68,.22); }
.status-busy{ background: rgba(245,158,11,.16); color: #b45309; border-color: rgba(245,158,11,.22); }
.status-available{ background: rgba(16,185,129,.16); color: #0b5e42; border-color: rgba(16,185,129,.22); }
.status-offline{ background: rgba(75,94,113,.16); color: var(--muted); border-color: rgba(75,94,113,.22); }
.status-unavailable{ background: rgba(75,94,113,.16); color: var(--muted); border-color: rgba(75,94,113,.22); }

body.dark .status-pending{ color: #fbbf24; }
body.dark .status-processing{ color: #93c5fd; }
body.dark .status-completed{ color: #86efac; }
body.dark .status-cancelled{ color: #fca5a5; }

/* ============================================================
   Forms / Settings
   ============================================================ */
.form-group{ margin-bottom: 14px; }
.form-group label{
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .92rem;
}
input, textarea, select{
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.70);
    color: var(--text);
    outline: none;
    font-family: var(--font);
    transition: .2s ease;
}
body.dark input, body.dark textarea, body.dark select{
    background: rgba(255,255,255,.06);
}

input:focus, textarea:focus, select:focus{
    border-color: rgba(16,185,129,.45);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

input[readonly], textarea[readonly]{
    opacity: .85;
    cursor: default;
}

.settings-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 1000px){
    .settings-grid{ grid-template-columns: 1fr; }
}

/* Settings navigation (no long scrolling): tabbed sections */
.settings-shell{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.60);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
}
body.dark .settings-nav{ background: rgba(255,255,255,.06); }

.settings-tab{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(16,185,129,.08);
    color: var(--text);
    cursor: pointer;
    transition: .18s ease;
    font-weight: 800;
}
body.dark .settings-tab{ background: rgba(16,185,129,.16); }
.settings-tab i{ color: var(--primary); }
.settings-tab:hover{
    transform: translateY(-1px);
    border-color: rgba(16,185,129,.30);
    background: rgba(16,185,129,.12);
}
.settings-tab.active{
    background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(16,185,129,.18));
    border-color: rgba(16,185,129,.35);
    box-shadow: 0 0 0 4px rgba(16,185,129,.10);
}
body.dark .settings-tab.active{
    background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(16,185,129,.20));
}

.settings-panel{ display: none; animation: fadeIn .22s ease; }
.settings-panel.active{ display: block; }

.settings-grid-single{ grid-template-columns: 1fr !important; }

@media (max-width: 520px){
    .settings-tab{ flex: 1; justify-content: center; }
}

.settings-card{
    background: rgba(255,255,255,.60);
    backdrop-filter: var(--blur);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 18px;
}
body.dark .settings-card{ background: rgba(255,255,255,.06); }

.setting-item{ margin-bottom: 14px; }

/* Settings editors (routing rules / deposit details) */
.settings-table-wrap{
    overflow: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.45);
}
body.dark .settings-table-wrap{ background: rgba(255,255,255,.03); }

.settings-config-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.settings-config-table th,
.settings-config-table td{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.settings-config-table th{
    text-align: right;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 800;
    background: rgba(255,255,255,.35);
    position: sticky;
    top: 0;
    z-index: 1;
}
body.dark .settings-config-table th{ background: rgba(255,255,255,.04); }

.settings-config-table textarea{ min-height: 120px; resize: vertical; }
.settings-config-table .method-name{ font-weight: 800; }

/* Deposit details: better layout + barcode upload UI (per method) */
#deposit-details-editor .settings-config-table{ table-layout: fixed; }
#deposit-details-editor .settings-config-table th:nth-child(1),
#deposit-details-editor .settings-config-table td:nth-child(1){ width: 14%; min-width: 140px; }
#deposit-details-editor .settings-config-table th:nth-child(2),
#deposit-details-editor .settings-config-table td:nth-child(2){ width: 46%; min-width: 360px; }
#deposit-details-editor .settings-config-table th:nth-child(3),
#deposit-details-editor .settings-config-table td:nth-child(3){ width: 40%; min-width: 360px; }

#deposit-details-editor textarea.dep-text{ width: 100%; box-sizing: border-box; }

/* Deposit details: barcode upload UI */
.dep-barcode-wrap{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    flex-wrap: wrap;
}
.dep-barcode-thumb-wrap{
    width: 84px;
    height: 84px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.35);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
}
body.dark .dep-barcode-thumb-wrap{ background: rgba(255,255,255,.04); }
.dep-barcode-thumb{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:none;
}
.dep-barcode-thumb.is-visible{ display:block; }
.dep-barcode-placeholder{
    color: var(--muted);
    font-size: 1.2rem;
}
.dep-barcode-side{ flex: 1; min-width: 240px; }
.dep-barcode-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.dep-barcode-file{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .82rem;
    color: var(--muted);
    word-break: break-all;
}
.dep-badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.dep-badge.on{ background: rgba(16,185,129,.18); color: #0b5e42; border-color: rgba(16,185,129,.28); }
.dep-badge.off{ background: rgba(239,68,68,.14); color: #b91c1c; border-color: rgba(239,68,68,.22); }
body.dark .dep-badge.on{ color: #34d399; }
body.dark .dep-badge.off{ color: #fca5a5; }

.dep-barcode-actions{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items:center;
}
.dep-barcode-actions .btn{ gap: 6px; }
.dep-barcode-toggle{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-right: 6px;
}
.switch.switch-sm{
    width: 44px;
    height: 24px;
}
.switch.switch-sm .slider:before{
    width: 18px;
    height: 18px;
    right: 3px;
}
.switch.switch-sm input:checked + .slider:before{
    transform: translateY(-50%) translateX(-20px);
}
.dep-barcode-actions .btn-danger,
.dep-barcode-actions .btn-secondary{
    box-shadow: none;
}
.dep-barcode-note{
    margin-top: 6px;
    font-size: .82rem;
    color: var(--muted);
}

.settings-hint{ color: var(--muted); font-size: .85rem; margin: 6px 0 14px; }

/* ============================================================
   Modals
   ============================================================ */
.modal-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100% - 24px);
    background: rgba(255,255,255,.75);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 1000;
    overflow: hidden;
}
body.dark .modal{ background: rgba(255,255,255,.07); }

.modal.large{ width: 820px; }


/* modal-lg (used by Customer Requests modal) */
.modal.modal-lg{
    width: min(1100px, calc(100vw - 24px));
}

/* On small screens: make big modals behave like a sheet (fullscreen-ish) */
@media (max-width: 720px){
    .modal.modal-lg,
    .modal.large{
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-width: none;
        top: 8px;
        left: 8px;
        right: auto;
        transform: none;
        border-radius: 18px;
    }
    .modal.modal-lg .modal-body,
    .modal.large .modal-body{
        max-height: calc(100vh - 170px);
        overflow: auto;
    }
}


.modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.35);
}
body.dark .modal-header{ background: rgba(255,255,255,.03); }
.modal-header h3{ margin: 0; font-size: 1.1rem; }

.close-btn{
    background: transparent;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--muted);
    padding: 0 6px;
}
.close-btn:hover{ color: var(--text); }

.modal-body{ padding: 16px; max-height: 72vh; overflow: auto; }
.modal-footer{
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    background: rgba(255,255,255,.35);
}
body.dark .modal-footer{ background: rgba(255,255,255,.03); }

.divider{
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}
.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 800px){
    .grid-2{ grid-template-columns: 1fr; }
}

.sub-title{
    margin: 0 0 10px 0;
    font-size: 1rem;
}

.attachment a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.55);
}
body.dark .attachment a{ background: rgba(255,255,255,.06); }

/* History */
.history-list{ display: flex; flex-direction: column; gap: 10px; }
.history-item{
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.40);
}
body.dark .history-item{ background: rgba(255,255,255,.04); }
.history-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.badge{
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .82rem;
}
.history-action{ font-weight: 700; margin-bottom: 4px; }
.history-details{ color: var(--muted); font-size: .92rem; }

/* Empty state */
.empty-state{
    text-align: center;
    padding: 34px 10px;
    color: var(--muted);
}
.empty-state i{
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: rgba(16,185,129,.6);
}
.empty-state h3{ margin: 0; font-size: 1rem; font-weight: 600; }

/* ============================================================
   Notification
   ============================================================ */
.notification{
    position: fixed;
    top: 24px;
    left: 24px;
    padding: 12px 16px;
    border-radius: 16px;
    color: #fff;
    z-index: 2000;
    display: none;
    box-shadow: var(--shadow);
}
.notification.success{ background: var(--success); }
.notification.error{ background: var(--danger); }
.notification.info{ background: var(--primary); }

/* ============================================================
   Auth overlay
   ============================================================ */
.auth-overlay{
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .66);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 18px;
}

.auth-card{
    width: 420px;
    max-width: 100%;
    background: rgba(255,255,255,.80);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
body.dark .auth-card{ background: rgba(255,255,255,.08); }

.auth-header{
    padding: 18px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.35);
}
body.dark .auth-header{ background: rgba(255,255,255,.03); }
.auth-header i{
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 10px;
}
.auth-header h2{ margin: 0 0 6px 0; }
.auth-header p{ margin: 0; color: var(--muted); }

.auth-body{ padding: 18px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
    .sidebar{ width: 92px; }
    .main-content{
        margin-right: 92px;
        width: calc(100% - 92px);
        max-width: calc(100vw - 92px);
    }
    .sidebar-header h2 span{ display: none; }
    .sidebar-menu .menu-item a span{ display: none; }
    .sidebar-header h2{ font-size: 1.1rem; }
}

@media (max-width: 640px){
    /* Turn the sidebar into a drawer */
    .sidebar{
        width: min(320px, 84vw);
        transform: translateX(110%);
        transition: transform .22s ease;
        right: 0;
        left: auto;
    }
    body.sidebar-open .sidebar{ transform: translateX(0); }

    /* Restore sidebar labels on mobile drawer */
    .sidebar-menu .menu-item a span{ display: inline; }

    .main-content{
        margin-right: 0;
        width: 100%;
        max-width: 100vw;
        padding: 16px;
    }
    .header{ padding: 14px 14px; }
    #sidebar-toggle{ display: inline-flex; }
}


/* ============================================================
   Feature Flags UI
   ============================================================ */
.feature-flags{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.feature-group{
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,.03));
    border-radius: var(--radius);
    padding: 14px;
}
body.dark .feature-group{
    background: linear-gradient(180deg, rgba(16,185,129,.12), rgba(255,255,255,.02));
}
.feature-group-title{
    font-weight: 800;
    margin-bottom: 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.feature-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(16,185,129,.22);
    background: rgba(16,185,129,.08);
    transition: transform .15s ease, box-shadow .15s ease;
    margin-bottom: 10px;
}
.feature-item:last-child{ margin-bottom: 0; }
.feature-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(16,185,129,.12);
}
.feature-text{ display:flex; flex-direction:column; gap:2px; }
.feature-label{ font-weight: 800; }
.feature-key{ font-size: 12px; direction:ltr; text-align:left; }

/* Compact tables inside settings */
.table-container.compact{
    margin-top: 12px;
}
.table-container.compact .data-table th,
.table-container.compact .data-table td{
    padding: 10px 10px;
    font-size: 13px;
}

/* Modal width upgrade for modern look */
#channel-modal.modal{
    width: min(560px, calc(100vw - 40px));
}

#routing-group-modal.modal{
    width: min(560px, calc(100vw - 40px));
}


/* ============================================================
   Pro KPI / Chart UI
   ============================================================ */
.mono{
    font-variant-numeric: lining-nums tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    direction: ltr;
    unicode-bidi: bidi-override;
}
.duration-cell{
    display:flex;
    flex-direction:column;
    gap:2px;
    align-items:flex-start;
}
.duration-hms{
    font-weight:800;
    letter-spacing:.3px;
}
.duration-short{
    font-size:12px;
    color: var(--muted);
}
.grid-3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}

.agent-chart-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:10px;
    flex-wrap: wrap;
}
.chip{
    padding:6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.7);
    backdrop-filter: var(--blur);
    font-weight:700;
}
body.dark .chip{
    background: rgba(255,255,255,.06);
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(16,185,129,.18));
    border: 1px solid rgba(16,185,129,.35);
    font-weight:800;
    color: var(--text);
}
.agent-name-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
#agents-performance-canvas{
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(16,185,129,.10));
    margin-bottom: 12px;
}

/* Make overall look more lively */
.app-header{
    background: linear-gradient(135deg, rgba(16,185,129,.20), rgba(16,185,129,.10));
}
.sidebar{
    background: linear-gradient(180deg, #0f5f34 0%, #0b3d23 55%, #071f13 100%);
}
.sidebar{
    /* Improve contrast/readability inside the sidebar (especially in light mode)
       without affecting the rest of the dashboard.
    */
    --text: rgba(255,255,255,.96);
    --muted: rgba(255,255,255,.74);
    --border: rgba(255,255,255,.14);
    color: var(--text);
}

.sidebar-header h2{
    color: var(--text);
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.sidebar-header i{
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.menu-item a{
    color: var(--muted);
    font-weight: 650;
}

.menu-item a i,
.menu-item a span{
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.menu-item:hover a{
    background: rgba(16,185,129,.16);
    color: var(--text);
}

.menu-item.active a{
    background: rgba(16,185,129,.22);
    color: var(--text);
    border: 1px solid rgba(16,185,129,.28);
}

.sidebar .btn-secondary{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    color: var(--text);
}
.sidebar .btn-secondary:hover{
    background: rgba(255,255,255,.14);
}
.sidebar .nav-item.active{
    background: linear-gradient(135deg, rgba(46,229,157,.25), rgba(15,169,88,.18));
    border: 1px solid rgba(46,229,157,.28);
}
.dashboard-card{
    transition: transform .22s ease, box-shadow .22s ease;
}
.dashboard-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 55px rgba(11, 26, 46, .16);
}
.btn{
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 16px 38px rgba(11,26,46,.16);
}


/* Chart tooltip */
.chart-tooltip{
    position:fixed;
    z-index:9999;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(10, 16, 12, 0.92);
    border: 1px solid rgba(16,185,129,0.25);
    box-shadow: 0 18px 55px rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.92);
    pointer-events:none;
    opacity:0;
    transition: opacity .12s ease, transform .12s ease;
    transform: translateY(0);
    backdrop-filter: blur(10px);
}

/* Make canvas behave well in responsive cards */
canvas#agents-performance-canvas{
    display:block;
    width:100%;
    max-width:100%;
}

.chart-scroller{
    max-height: 340px;
    overflow: auto;
    padding: 6px 6px 10px;
    border-radius: 14px;
    border: 1px solid rgba(16,185,129,0.18);
    background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(16,185,129,.04));
}
body.dark .chart-scroller{
    border-color: rgba(16,185,129,0.22);
    background: linear-gradient(180deg, rgba(16,185,129,.07), rgba(0,0,0,0));
}
.chart-tooltip .tt-title{
    font-weight: 800;
    margin-bottom:6px;
    letter-spacing:.2px;
}
.chart-tooltip .tt-row{
    display:flex;
    gap:8px;
    align-items:baseline;
    font-size: 13px;
}

/* Segmented controls (chart metric toggle) */
.agent-chart-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin: 10px 0 12px;
}
.segmented{
    display:inline-flex;
    gap:0;
    border-radius: 999px;
    border: 1px solid var(--border);
    overflow:hidden;
    background: rgba(255,255,255,.72);
    backdrop-filter: var(--blur);
}
body.dark .segmented{ background: rgba(255,255,255,.06); }
.segmented .seg{
    border:0;
    background: transparent;
    padding: 8px 12px;
    cursor:pointer;
    font-weight:800;
    color: var(--muted);
    transition: .15s ease;
    white-space:nowrap;
}
.segmented .seg:hover{ filter: brightness(1.03); }
.segmented .seg.active{
    color: var(--text);
    background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(16,185,129,.14));
}

/* Request details (Arabic key/value block) */
.request-data{
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.70);
    backdrop-filter: var(--blur);
}
body.dark .request-data{ background: rgba(255,255,255,.06); }
.kv-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
@media (max-width: 900px){
    .kv-grid{ grid-template-columns: 1fr; }
}
.kv-item{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed var(--border);
    background: rgba(11, 26, 46, .02);
}
body.dark .kv-item{ background: rgba(255,255,255,.03); }
.kv-key{
    font-size: .86rem;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 800;
}
.kv-value{
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    word-break: break-word;
}
.kv-link{
    color: var(--primary);
    font-weight: 900;
    text-decoration: none;
}
.kv-link:hover{ text-decoration: underline; }


/* ============================================================
   Chips (small badges)
   ============================================================ */
.chip{
    display:inline-flex;
    align-items:center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid rgba(16,185,129,.28);
    background: rgba(16,185,129,.10);
    color: var(--primary);
    margin-inline-start: 8px;
    white-space: nowrap;
}
body.dark .chip{
    border-color: rgba(16,185,129,.42);
    background: rgba(16,185,129,.16);
}

/* ============================================================
   Auth overlay (enhanced)
   ============================================================ */
.auth-overlay{
    background:
        radial-gradient(1200px 600px at 15% 20%, rgba(16,185,129,.22), transparent 60%),
        radial-gradient(1000px 520px at 85% 75%, rgba(16,185,129,.16), transparent 60%),
        rgba(2, 6, 23, .66);
}
.auth-overlay.auth-focus{
    background:
        radial-gradient(1200px 600px at 15% 20%, rgba(16,185,129,.28), transparent 60%),
        radial-gradient(1000px 520px at 85% 75%, rgba(16,185,129,.20), transparent 60%),
        rgba(2, 6, 23, .70);
}

.auth-bg{
    position:absolute;
    z-index:0;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.auth-blob{
    position:absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .22;
    transform: translate3d(0,0,0);
    animation: authFloat 10s ease-in-out infinite;
}
.auth-blob.b1{
    top: -220px;
    right: -140px;
    background: radial-gradient(circle at 30% 30%, rgba(16,185,129,.85), rgba(16,185,129,0));
}
.auth-blob.b2{
    bottom: -240px;
    left: -140px;
    background: radial-gradient(circle at 30% 30%, rgba(16,185,129,.75), rgba(16,185,129,0));
    animation-duration: 12s;
}
.auth-blob.b3{
    top: 40%;
    left: 60%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.55), rgba(59,130,246,0));
    animation-duration: 14s;
}

@keyframes authFloat{
    0%,100%{ transform: translateY(0) translateX(0) scale(1); }
    50%{ transform: translateY(26px) translateX(-18px) scale(1.03); }
}

.auth-card--enhanced{
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 90px rgba(0,0,0,.36);
    transform: translateY(0);
    animation: authPop .28s ease both;
}
@keyframes authPop{
    from{ opacity: 0; transform: translateY(10px) scale(.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
.auth-header{
    position: relative;
}
.auth-header::after{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.08));
    pointer-events:none;
}
body.dark .auth-header::after{
    background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
}

.input-wrap{
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrap input{
    padding-inline-start: 14px;
    padding-inline-end: 44px;
}
.input-icon-btn{
    position:absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.55);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease;
}
body.dark .input-icon-btn{ background: rgba(255,255,255,.08); }
.input-icon-btn:hover{ transform: translateY(-50%) scale(1.03); }
.input-icon-btn:active{ transform: translateY(-50%) scale(.98); }

.caps-hint{
    margin-top: 8px;
    font-size: .85rem;
    color: rgba(245, 158, 11, .95);
    display:flex;
    gap:8px;
    align-items:center;
}
.caps-hint::before{
    content: '⚠️';
}

.btn.is-loading{
    opacity: .92;
}
.btn-spinner{
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: rgba(255,255,255,1);
    display:inline-block;
    animation: btnSpin .9s linear infinite;
    margin-inline-end: 10px;
}
@keyframes btnSpin{ to{ transform: rotate(360deg); } }

.auth-shake{
    animation: authShake .4s ease;
}
@keyframes authShake{
    0%,100%{ transform: translateX(0); }
    20%{ transform: translateX(10px); }
    40%{ transform: translateX(-10px); }
    60%{ transform: translateX(6px); }
    80%{ transform: translateX(-6px); }
}
/* Customer protection settings */
.settings-subtitle{
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}
.settings-subtitle i{ color: var(--primary); }
.settings-numeric-grid .setting-item{ margin-bottom: 0; }
@media (max-width: 900px){
    .settings-numeric-grid .setting-item{ margin-bottom: 14px; }
}

/* Agent active/inactive status aliases */
.status-active{ background: rgba(16,185,129,.16); color: #0b5e42; border-color: rgba(16,185,129,.22); }
.status-inactive{ background: rgba(239,68,68,.16); color: #b91c1c; border-color: rgba(239,68,68,.22); }


/* Agent availability controls */
.availability-toggle-row{
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(16,185,129,.06);
}
.agent-time-range.is-disabled{
    opacity: .55;
}
.agent-time-range.is-disabled input{
    cursor: not-allowed;
}

/* Manager detailed permission cards */
.permissions-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.permission-group{
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.42);
    padding: 14px;
    box-shadow: 0 12px 28px -18px rgba(11,26,46,.35);
}
body.dark .permission-group{ background: rgba(255,255,255,.05); }
.permission-group h4{
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}
.permission-group h4 i{ color: var(--primary); }
.permission-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px dashed var(--border);
}
.permission-row:first-of-type{ border-top: 0; padding-top: 0; }
.permission-row label{ font-weight: 800; }
.permission-row .hint{ margin-top: 4px; font-size: .84rem; line-height: 1.45; }
.permission-row .switch{ flex: 0 0 auto; }

/* Cleaner action buttons: visible but polished when disabled */
.action-buttons{
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.action-buttons .btn-sm,
.dep-barcode-actions .btn-sm{
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1;
}
.action-buttons .btn-sm i,
.dep-barcode-actions .btn-sm i{
    margin: 0;
}
.btn.permission-disabled,
.btn:disabled{
    opacity: .46;
    filter: grayscale(.25);
    box-shadow: none !important;
}
.btn.permission-disabled:hover,
.btn:disabled:hover{
    transform: none;
}
.btn.permission-disabled{
    border-style: dashed;
}

@media (max-width: 640px){
    .permissions-grid{ grid-template-columns: 1fr; }
    .permission-row{ align-items: flex-start; }
}


/* Refined compact dashboard buttons */
.btn{
    min-height: 42px;
    font-weight: 800;
    letter-spacing: .01em;
}
.btn-sm{
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 11px;
    font-size: .86rem;
}
.action-buttons{
    gap: 7px;
    justify-content: center;
}
.action-buttons .btn-sm,
.dep-barcode-actions .btn-sm{
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 12px;
}
.setting-actions .btn,
.header-actions .btn{
    min-height: 40px;
    padding-inline: 14px;
}
.btn.permission-disabled,
.btn:disabled{
    opacity: .52;
    filter: grayscale(.18);
    cursor: not-allowed;
}
.btn.permission-disabled{
    background-image: none !important;
}

.routing-rules-actions{
    margin: 12px 0 12px;
    justify-content: flex-start;
}
.routing-rules-actions .btn{
    min-width: 230px;
}
@media (max-width: 520px){
    .routing-rules-actions .btn{ width: 100%; min-width: 0; }
}

/* Manager permissions: prevent unchecked flicker while settings are loading */
.manager-permissions-loading-note{
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid rgba(16,185,129,.22);
    border-radius: 999px;
    background: rgba(16,185,129,.08);
    color: var(--text);
    font-weight: 800;
}
.manager-permissions-loading-note i{
    color: var(--primary);
}
#settings-panel-manager-permissions.is-loading-permissions #manager-permissions-editor{
    opacity: .62;
    pointer-events: none;
    filter: saturate(.85);
}
#settings-panel-manager-permissions.is-loading-permissions .permission-group{
    position: relative;
}
#settings-panel-manager-permissions.is-loading-permissions .permission-group::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation: permissions-loading-shimmer 1.25s linear infinite;
    pointer-events: none;
}
@keyframes permissions-loading-shimmer{
    from{ transform: translateX(80%); opacity: .35; }
    to{ transform: translateX(-80%); opacity: .05; }
}
body.dark #settings-panel-manager-permissions.is-loading-permissions .permission-group::after{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}