/* ════════════════════════════════════════════════════════════════
   app_styles.css  —  Shared stylesheet for CKS Intranet
   Covers: hr_callendar, hr_announcement_main, rpt_userlog,
           ue_dashboard, ue_upload, main / main_outlet
   Replace every per-page <style> block with:
       <link rel="stylesheet" href="app_styles.css">
   (keep page-specific overrides in a small inline <style> if needed)
════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
════════════════════════════════════════════════════════════════ */
:root {
    /* Slate scale */
    --slate-900: #1e293b;
    --slate-700: #475569;
    --slate-600: #475569;
    --slate-500: #94a3b8;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50:  #f8fafc;
    --white:     #ffffff;

    /* Brand */
    --blue:      #3b82f6;
    --blue-lt:   #eff6ff;
    --green:     #16a34a;
    --green-lt:  #f0fdf4;
    --amber:     #d97706;
    --amber-lt:  #fffbeb;
    --red:       #dc2626;
    --red-lt:    #fef2f2;
    --yellow:    #d97706;
    --yellow-lt: #fffbeb;
    --orange:    #ea580c;
    --orange-lt: #fff7ed;
    --purple:    #7c3aed;
    --purple-lt: #f5f3ff;

    /* Radii */
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 7px;

    /* Shadows */
    --shadow:    0 1px 6px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 16px rgba(15,23,42,.10);

    /* Misc */
    --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════════
   2. RESET & BASE
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'DM Sans', sans-serif;
    background: #f0f4f8;
    color: var(--slate-900);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════════
   3. PAGE WRAPPER
════════════════════════════════════════════════════════════════ */
.page-wrapper {
    max-width: 94%;
    margin: 0 auto;
    padding: 20px 16px 40px;
}
/* Wider variants used by specific pages */
.page-wrapper--wide  { max-width: 98%; }
.page-wrapper--full  { max-width: 92%; }

/* Entry animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.page-wrapper > * { animation: fadeUp .35s ease both; }
.page-wrapper > *:nth-child(2) { animation-delay: .04s; }
.page-wrapper > *:nth-child(3) { animation-delay: .08s; }
.page-wrapper > *:nth-child(4) { animation-delay: .12s; }
.page-wrapper > *:nth-child(5) { animation-delay: .16s; }
.page-wrapper > *:nth-child(6) { animation-delay: .20s; }

/* ════════════════════════════════════════════════════════════════
   4. PAGE HEADER  (.appt-header)
════════════════════════════════════════════════════════════════ */
.appt-header {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 14px 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow);
    border: 1px solid rgba(203,213,225,.6);
}
.appt-header-left  { display: flex; align-items: center; gap: 12px; }
.appt-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.appt-header-icon {
    width: 38px; height: 38px;
    background: var(--blue-lt);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.appt-header-icon svg { width: 19px; height: 19px; color: var(--blue); }

.appt-header h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem; font-weight: 700;
    color: var(--slate-900);
    margin: 0; letter-spacing: -.01em;
}
.appt-header p { font-size: .78rem; color: var(--slate-500); margin: 2px 0 0; }

/* ════════════════════════════════════════════════════════════════
   5. BUTTONS
════════════════════════════════════════════════════════════════ */
/* Base shared structure */
.btn-new-task,
.btn-primary-custom,
.btn-danger-custom,
.btn-cancel-custom,
.btn-success-custom,
.btn-outline-custom,
.btn-amber-custom,
.btn-apply,
.btn-ghost,
.btn-run {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: 'Syne', sans-serif;
    font-size: .81rem; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition), transform var(--transition),
                box-shadow var(--transition), border-color var(--transition);
    border: none;
}
.btn-new-task svg,
.btn-primary-custom svg,
.btn-danger-custom svg,
.btn-cancel-custom svg,
.btn-success-custom svg,
.btn-outline-custom svg,
.btn-amber-custom svg,
.btn-apply svg,
.btn-ghost svg,
.btn-run svg { width: 14px; height: 14px; }

/* Variants */
.btn-new-task,
.btn-primary-custom {
    background: var(--blue);
    color: var(--white);
}
.btn-new-task:hover,
.btn-primary-custom:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,.35); }
.btn-primary-custom:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-danger-custom {
    background: #fee2e2; color: #dc2626;
    border: 1px solid #fecaca;
}
.btn-danger-custom:hover { background: #fecaca; }

.btn-cancel-custom,
.btn-outline-custom {
    background: var(--white); color: var(--slate-700);
    border: 1.5px solid var(--slate-300);
}
.btn-cancel-custom:hover  { background: var(--slate-50); border-color: #94a3b8; }
.btn-outline-custom:hover { background: var(--slate-50); border-color: var(--slate-500); }

.btn-success-custom { background: var(--green); color: var(--white); }
.btn-success-custom:hover { background: #15803d; }
.btn-success-custom:disabled { opacity: .5; cursor: not-allowed; }

.btn-amber-custom {
    background: var(--amber-lt); color: var(--amber);
    border: 1.5px solid #fde68a;
}
.btn-amber-custom:hover { background: #fde68a; }

.btn-apply {
    background: var(--blue); color: var(--white);
    padding: 7px 14px; font-size: .8rem;
    align-self: flex-end;
}
.btn-apply:hover { background: #2563eb; transform: translateY(-1px); }

.btn-ghost {
    background: var(--slate-100); color: var(--slate-700);
    padding: 7px 14px; font-size: .8rem;
}
.btn-ghost:hover { background: var(--slate-200); }

.btn-run {
    width: 100%; background: var(--blue); color: var(--white);
    justify-content: center; padding: 9px 14px; font-size: .82rem;
    margin-top: 4px;
}
.btn-run:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,.35); }

/* Icon-only button */
.btn-icon {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--slate-300);
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-icon svg { width: 13px; height: 13px; }
.btn-icon.edit { color: var(--blue); }
.btn-icon.edit:hover { background: var(--blue-lt); border-color: var(--blue); }
.btn-icon.del  { color: #dc2626; }
.btn-icon.del:hover  { background: #fef2f2; border-color: #fecaca; }

/* ════════════════════════════════════════════════════════════════
   6. FORM CONTROLS
════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 14px; }

.form-label-custom {
    display: block;
    font-size: .74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--slate-500);
    margin-bottom: 5px;
}

.form-control-custom {
    width: 100%;
    padding: 8px 11px;
    border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: .86rem;
    color: var(--slate-900);
    background: var(--white);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}
.form-control-custom:focus   { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.form-control-custom:read-only { background: var(--slate-50); color: var(--slate-500); cursor: default; }

/* Grid rows */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
    .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}

/* RM prefix input */
.input-prefix-wrap { position: relative; }
.input-prefix-wrap .prefix {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: .84rem; font-weight: 600; color: var(--slate-500); pointer-events: none;
}
.input-prefix-wrap .form-control-custom { padding-left: 30px; }

/* Total summary row */
.total-row {
    background: var(--slate-50);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
    border: 1.5px solid var(--slate-200);
    margin-top: 4px;
}
.total-row-label { font-size: .78rem; font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: .05em; }
.total-row-value { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--slate-900); }

/* ════════════════════════════════════════════════════════════════
   7. CARDS
════════════════════════════════════════════════════════════════ */
.card-main,
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid rgba(203,213,225,.6);
    overflow: hidden;
    margin-bottom: 14px;
}

/* Generic header inside a card */
.card-header,
.card-header-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 11px 18px;
    border-bottom: 1.5px solid var(--slate-100);
    background: var(--slate-50);
}
.card-header-title,
.card-panel-title {
    font-family: 'Syne', sans-serif;
    font-size: .85rem; font-weight: 700;
    color: var(--slate-900);
    display: flex; align-items: center; gap: 8px;
    margin: 0;
}
.card-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.card-body-custom { padding: 20px; }

/* Coloured dots used in card titles */
.dot, .title-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-blue,  .dot-blue  { background: var(--blue);  }
.dot-green, .dot-green { background: var(--green); }
.dot-amber, .dot-amber { background: var(--amber); }

/* ════════════════════════════════════════════════════════════════
   8. MODAL
════════════════════════════════════════════════════════════════ */
.modal-content {
    border: 1px solid rgba(203,213,225,.7);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(15,23,42,.12);
    overflow: hidden;
}
.modal-header {
    background: var(--slate-50);
    border-bottom: 1.5px solid var(--slate-100);
    padding: 14px 20px;
}
.modal-title {
    font-family: 'Syne', sans-serif;
    font-size: .92rem; font-weight: 700;
    color: var(--slate-900); margin: 0;
}
.modal-body { padding: 20px; background: var(--white); }
.modal-footer-custom {
    padding: 12px 20px;
    background: var(--slate-50);
    border-top: 1.5px solid var(--slate-100);
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}

/* Detail rows inside view modals */
.detail-row {
    display: flex; align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--slate-100);
    gap: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    font-size: .71rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--slate-500); min-width: 55px;
    padding-top: 1px; flex-shrink: 0;
}
.detail-value { font-size: .87rem; color: var(--slate-900); font-weight: 500; word-break: break-word; }
.detail-value.mono { font-family: monospace; font-size: .8rem; color: var(--slate-500); }

/* ════════════════════════════════════════════════════════════════
   9. TABLES
════════════════════════════════════════════════════════════════ */
.tbl-wrap, .tbl-scroll { overflow-x: auto; }
.tbl-scroll-y { overflow-y: auto; max-height: 32vh; }

/* Standard table */
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--slate-50); border-bottom: 1.5px solid var(--slate-100); }
th {
    font-family: 'Syne', sans-serif;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--slate-500);
    padding: 11px 14px;
    white-space: nowrap;
    text-align: left;
}
td {
    font-size: .83rem; color: var(--slate-700);
    padding: 11px 14px;
    border-bottom: 1px solid var(--slate-100);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--slate-50); }

/* Dark-header table variant (used in rpt_userlog, ue_upload) */
.data-table thead tr,
table.data-tbl thead tr { background: var(--slate-900); border-bottom: none; }
.data-table thead th,
table.data-tbl thead th {
    font-family: 'Syne', sans-serif;
    font-size: .67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.85);
    padding: 9px 11px;
    white-space: nowrap; text-align: left; border: none;
}
.data-table tbody td,
table.data-tbl tbody td { padding: 8px 11px; color: var(--slate-700); border-bottom: 1px solid var(--slate-100); font-size: .78rem; }
.data-table tbody tr:hover td,
table.data-tbl tbody tr:hover td { background: var(--blue-lt); }

/* Alignment helpers */
th.r, td.r { text-align: right; }

/* Table footer */
.tbl-footer,
.tbl-footer-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--slate-100);
    font-size: .76rem; color: var(--slate-500);
    flex-wrap: wrap; gap: 8px;
}

/* Empty state */
.tbl-empty,
.empty-state {
    padding: 40px 20px; text-align: center;
    color: var(--slate-400); font-size: .84rem;
}
.tbl-empty svg,
.empty-state svg { width: 36px; height: 36px; margin: 0 auto 10px; display: block; color: var(--slate-300); }
.tbl-empty p,
.empty-state p { font-size: .84rem; margin: 0; }

/* ════════════════════════════════════════════════════════════════
   10. PAGINATION
════════════════════════════════════════════════════════════════ */
.pager { display: flex; gap: 4px; }
.pager-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1.5px solid var(--slate-300);
    background: var(--white);
    font-size: .74rem; font-weight: 600; color: var(--slate-700);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.pager-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.pager-btn.active  { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   11. BADGES & TAGS
════════════════════════════════════════════════════════════════ */
/* Event type badges (hr_callendar) */
.badge-event-type  { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.badge-event       { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }
.badge-holiday     { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Announcement type badges */
.type-badge        { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.type-badge .dot   { width: 6px; height: 6px; border-radius: 50%; }
.badge-info        { background: var(--blue-lt);  color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-info .dot   { background: var(--blue); }
.badge-warning     { background: var(--amber-lt); color: #92400e; border: 1px solid #fde68a; }
.badge-warning .dot{ background: var(--amber); }
.badge-alert       { background: var(--red-lt);   color: #991b1b; border: 1px solid #fecaca; }
.badge-alert .dot  { background: var(--red); }

/* Status (upload history) */
.badge-s         { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .7rem; font-weight: 700; }
.badge-success   { background: var(--green-lt); color: var(--green); border: 1px solid #bbf7d0; }
.badge-partial   { background: var(--amber-lt); color: var(--amber); border: 1px solid #fde68a; }
.badge-failed    { background: var(--red-lt);   color: var(--red);   border: 1px solid #fecaca; }
.badge-expense   { background: var(--blue-lt);  color: var(--blue);  border: 1px solid #bfdbfe; }
.badge-sales     { background: var(--green-lt); color: var(--green); border: 1px solid #bbf7d0; }

/* No-log badge */
.no-log-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .68rem; font-weight: 700; background: var(--red-lt); color: var(--red); border: 1px solid #fecaca; }

/* Mono helper */
.mono { font-family: 'DM Mono', monospace; font-size: .78rem; }

/* ═══ Dashboard-specific badges (ue_dashboard) ═══ */
.flag { font-family: 'DM Mono', monospace; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.flag-critical  { background: var(--red-lt);    color: var(--red);    }
.flag-high      { background: var(--yellow-lt); color: var(--yellow); }
.flag-ok        { background: var(--green-lt);  color: var(--green);  }
.flag-underutil { background: var(--purple-lt); color: var(--purple); }

.concept-tag    { font-size: .7rem;  padding: 2px 8px;  border-radius: 4px; font-weight: 600; white-space: nowrap; }
.concept-fh     { background: var(--green-lt);  color: var(--green);  }
.concept-sup    { background: var(--blue-lt);   color: var(--blue);   }
.concept-gro    { background: var(--orange-lt); color: var(--orange); }

.region-tag     { font-size: .68rem; padding: 1px 7px;  border-radius: 4px; font-weight: 600; }
.region-sabah   { background: var(--blue-lt);   color: var(--blue);   }
.region-johor   { background: var(--purple-lt); color: var(--purple); }

.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-family: 'DM Mono', monospace; font-size: .7rem; font-weight: 700; }
.rank-1 { background: #fef9c3; color: #854d0e; }
.rank-2 { background: #f1f5f9; color: #475569; }
.rank-3 { background: #fef3c7; color: #92400e; }
.rank-n { background: var(--slate-100); color: var(--slate-500); }

.updated-badge { font-family: 'DM Mono', monospace; font-size: .69rem; color: var(--slate-400); background: var(--slate-100); padding: 3px 10px; border-radius: 20px; }

/* ════════════════════════════════════════════════════════════════
   12. TOOLBAR / FILTER BAR (hr_announcement_main)
════════════════════════════════════════════════════════════════ */
.toolbar {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 10px 16px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    box-shadow: var(--shadow); border: 1px solid rgba(203,213,225,.6);
}
.toolbar-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); white-space: nowrap; }

.filter-pill {
    border: 1.5px solid var(--slate-300);
    background: var(--white); color: var(--slate-700);
    border-radius: 20px; padding: 4px 13px;
    font-size: .75rem; font-weight: 600;
    cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.filter-pill:hover               { border-color: var(--blue); color: var(--blue); }
.filter-pill.active              { background: var(--blue);  border-color: var(--blue);  color: var(--white); }
.filter-pill.pill-info           { border-color: #3b82f6; color: #1d4ed8; }
.filter-pill.pill-info.active    { background: #3b82f6;  color: #fff; }
.filter-pill.pill-warning        { border-color: var(--amber); color: #92400e; }
.filter-pill.pill-warning.active { background: var(--amber);   color: #fff; }
.filter-pill.pill-alert          { border-color: var(--red);   color: #991b1b; }
.filter-pill.pill-alert.active   { background: var(--red);     color: #fff; }

.toolbar-search { margin-left: auto; position: relative; }
.toolbar-search input {
    border: 1.5px solid var(--slate-300); border-radius: var(--radius-sm);
    padding: 6px 11px 6px 32px;
    font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--slate-900);
    outline: none; width: 200px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.toolbar-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.toolbar-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--slate-500); pointer-events: none; }

/* ════════════════════════════════════════════════════════════════
   13. TABS
════════════════════════════════════════════════════════════════ */
/* Pill style (ue_upload) */
.tab-bar {
    display: flex; gap: 4px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 6px; margin-bottom: 14px;
    box-shadow: var(--shadow); border: 1px solid rgba(203,213,225,.6);
}
.tab-btn {
    flex: 1; padding: 9px 14px;
    border: none; border-radius: var(--radius-md);
    font-family: 'Syne', sans-serif; font-size: .8rem; font-weight: 700;
    color: var(--slate-500); background: transparent;
    cursor: pointer; transition: all var(--transition);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap;
}
.tab-btn:hover          { background: var(--slate-100); color: var(--slate-700); }
.tab-btn.active         { background: var(--blue); color: var(--white); box-shadow: 0 2px 8px rgba(59,130,246,.3); }
.tab-pane               { display: none; }
.tab-pane.active        { display: block; }

/* Underline style (ue_dashboard, hr_announcement_main) */
.tab-bar--underline {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--slate-200);
    padding: 0 18px; background: var(--slate-50);
}
.tab-bar--underline .tab-btn {
    flex: none; background: none; border-radius: 0;
    padding: 10px 16px 11px;
    color: var(--slate-500); border-bottom: 2px solid transparent; margin-bottom: -1px;
    letter-spacing: .02em; box-shadow: none;
}
.tab-bar--underline .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); background: none; }
.tab-bar--underline .tab-btn:hover:not(.active) { color: var(--slate-700); background: none; }

/* ════════════════════════════════════════════════════════════════
   14. FILTER PANEL  (rpt_userlog sidebar)
════════════════════════════════════════════════════════════════ */
.filter-panel {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow); border: 1px solid rgba(203,213,225,.6);
    overflow: hidden; position: sticky; top: 14px;
}
.filter-panel-header {
    background: var(--slate-900);
    padding: 12px 16px; display: flex; align-items: center; gap: 8px;
}
.filter-panel-header svg   { width: 15px; height: 15px; color: rgba(255,255,255,.7); flex-shrink: 0; }
.filter-panel-header span  { font-family: 'Syne', sans-serif; font-size: .8rem; font-weight: 700; color: var(--white); letter-spacing: .04em; text-transform: uppercase; }
.filter-panel-body         { padding: 14px; }
.section-label-fs          { font-family: 'Syne', sans-serif; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--slate-500); margin-bottom: 7px; display: block; }
.filter-divider            { border: none; border-top: 1.5px solid var(--slate-100); margin: 12px 0; }

/* Radio toggle group */
.radio-group { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--slate-300); margin-bottom: 12px; }
.radio-group input[type="radio"] { display: none; }
.radio-group label {
    flex: 1; text-align: center; padding: 6px 4px;
    font-family: 'Syne', sans-serif; font-size: .74rem; font-weight: 600;
    color: var(--slate-500); background: var(--white);
    cursor: pointer; transition: all var(--transition);
    border-right: 1px solid var(--slate-300); user-select: none;
}
.radio-group label:last-child { border-right: none; }
.radio-group input[type="radio"]:checked + label { background: var(--slate-900); color: var(--white); }

/* Month grid */
.month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 12px; }
.month-grid input[type="radio"] { display: none; }
.month-grid label {
    text-align: center; padding: 5px 2px;
    font-family: 'Syne', sans-serif; font-size: .71rem; font-weight: 600;
    color: var(--slate-700); background: var(--slate-100);
    border-radius: 6px; cursor: pointer;
    transition: all var(--transition); border: 1.5px solid transparent;
}
.month-grid label:hover { background: var(--blue-lt); color: var(--blue); }
.month-grid input[type="radio"]:checked + label { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* Select within filter panel */
.filter-label  { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); margin-bottom: 4px; }
.filter-select { width: 100%; padding: 7px 10px; border: 1.5px solid var(--slate-300); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--slate-900); background: var(--white); outline: none; margin-bottom: 10px; transition: border-color var(--transition), box-shadow var(--transition); }
.filter-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

/* ════════════════════════════════════════════════════════════════
   15. DASHBOARD KPI CARDS  (ue_dashboard)
════════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
    background: var(--white); border-radius: var(--radius-lg);
    padding: 14px 16px 12px;
    box-shadow: var(--shadow); border: 1px solid rgba(203,213,225,.6);
    position: relative; overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.kpi-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.1); transform: translateY(-1px); }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, var(--blue)); }
.kpi-label { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); margin-bottom: 6px; }
.kpi-value { font-family: 'DM Mono', monospace; font-size: 1.55rem; font-weight: 500; color: var(--slate-900); line-height: 1.1; margin-bottom: 4px; }
.kpi-sub   { font-size: .7rem; color: var(--slate-500); margin-top: 3px; }

/* Section label (ue_dashboard numbered headings) */
.section-label      { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 4px; }
.section-label-num  { font-family: 'DM Mono', monospace; font-size: .68rem; font-weight: 500; background: var(--blue-lt); color: var(--blue); border-radius: var(--radius-sm); padding: 1px 7px; }
.section-label-title{ font-family: 'Syne', sans-serif; font-size: .82rem; font-weight: 700; color: var(--slate-700); text-transform: uppercase; letter-spacing: .04em; }
.section-label-line { flex: 1; height: 1px; background: var(--slate-200); }
.section-label-sub  { font-family: 'DM Mono', monospace; font-size: .68rem; color: var(--slate-400); }

/* Variance bar */
.var-bar-wrap  { display: flex; align-items: center; gap: 6px; }
.var-bar-bg    { flex: 1; height: 5px; background: var(--slate-100); border-radius: 2px; overflow: hidden; min-width: 40px; }
.var-bar-fill  { height: 100%; border-radius: 2px; }
.var-label     { font-family: 'DM Mono', monospace; font-size: .7rem; width: 48px; text-align: right; flex-shrink: 0; }

/* Alert row tints */
.row-critical td { background: #fff5f5 !important; }
.row-high     td { background: #fffdf0 !important; }

/* Filter controls (dashboard top bar) */
.filter-card {
    background: var(--white); border-radius: var(--radius-lg);
    padding: 12px 18px; margin-bottom: 14px;
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    box-shadow: var(--shadow); border: 1px solid rgba(203,213,225,.6);
}
.filter-group   { display: flex; flex-direction: column; gap: 4px; }
.filter-label-d { font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.filter-control {
    background: var(--white); border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm); padding: 6px 10px;
    font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--slate-900);
    transition: border-color var(--transition); outline: none; min-width: 130px; appearance: none;
}
.filter-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

/* Drill-down select */
.drill-select {
    background: var(--white); border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm); padding: 5px 10px;
    font-family: 'DM Sans', sans-serif; font-size: .82rem; color: var(--slate-900);
    outline: none; min-width: 180px; appearance: none;
}
.drill-select:focus { border-color: var(--blue); }

/* ════════════════════════════════════════════════════════════════
   16. UPLOAD PAGE  (ue_upload)
════════════════════════════════════════════════════════════════ */
/* Upload type selector cards */
.type-selector { display: flex; gap: 10px; margin-bottom: 18px; }
.type-card {
    flex: 1; border: 2px solid var(--slate-300); border-radius: var(--radius-md);
    padding: 14px 16px; cursor: pointer; transition: all var(--transition);
    display: flex; align-items: center; gap: 12px;
}
.type-card:hover,
.type-card.selected { border-color: var(--blue); background: var(--blue-lt); }
.type-card input[type="radio"] { display: none; }
.type-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.type-card-icon.blue  { background: var(--blue-lt); }
.type-card-icon.blue svg { color: var(--blue); }
.type-card-icon.green { background: var(--green-lt); }
.type-card-icon.green svg { color: var(--green); }
.type-card-icon svg   { width: 18px; height: 18px; }
.type-card-label { font-family: 'Syne', sans-serif; font-size: .83rem; font-weight: 700; color: var(--slate-900); margin: 0; }
.type-card-desc  { font-size: .72rem; color: var(--slate-500); margin: 2px 0 0; }

/* Drop zone */
.drop-zone {
    border: 2px dashed var(--slate-300); border-radius: var(--radius-md);
    background: var(--slate-50); padding: 36px 20px;
    text-align: center; cursor: pointer;
    transition: all var(--transition); position: relative;
}
.drop-zone:hover,
.drop-zone.drag-over { border-color: var(--blue); background: var(--blue-lt); }
.drop-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-zone-icon  { width: 40px; height: 40px; color: var(--slate-400); margin: 0 auto 10px; }
.drop-zone-title { font-family: 'Syne', sans-serif; font-size: .88rem; font-weight: 700; color: var(--slate-700); margin: 0 0 4px; }
.drop-zone-sub   { font-size: .75rem; color: var(--slate-500); margin: 0; }
.drop-zone-file  { margin-top: 10px; font-size: .78rem; color: var(--blue); font-weight: 600; }

/* Progress bar */
.progress-wrap      { margin-top: 14px; display: none; }
.progress-bar-track { width: 100%; height: 6px; border-radius: 3px; background: var(--slate-100); overflow: hidden; }
.progress-bar-fill  { height: 100%; border-radius: 3px; background: var(--blue); width: 0; transition: width .4s ease; }
.progress-label     { font-size: .73rem; color: var(--slate-500); margin-top: 5px; }

/* Result cards */
.result-card        { border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.result-card.success{ background: var(--green-lt); border: 1.5px solid #bbf7d0; }
.result-card.partial{ background: var(--amber-lt); border: 1.5px solid #fde68a; }
.result-card.error  { background: var(--red-lt);   border: 1.5px solid #fecaca; }
.result-card-icon   { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.result-card.success .result-card-icon { background: #bbf7d0; }
.result-card.partial .result-card-icon { background: #fde68a; }
.result-card.error   .result-card-icon { background: #fecaca; }
.result-card-icon svg { width: 16px; height: 16px; }
.result-card.success .result-card-icon svg { color: var(--green); }
.result-card.partial .result-card-icon svg { color: var(--amber); }
.result-card.error   .result-card-icon svg { color: var(--red);   }
.result-card-text p  { margin: 0; font-size: .84rem; font-weight: 600; color: var(--slate-900); }
.result-card-text small { font-size: .73rem; color: var(--slate-500); }

/* Error table */
.error-table-wrap  { margin-top: 12px; border-radius: var(--radius-md); border: 1.5px solid #fecaca; overflow: hidden; display: none; }
.error-table-head  { background: #fef2f2; padding: 8px 14px; font-family: 'Syne', sans-serif; font-size: .74rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 7px; }
.error-table-head svg { width: 13px; height: 13px; }
.err-tbl           { width: 100%; border-collapse: collapse; font-size: .77rem; }
.err-tbl th        { background: #fff1f2; padding: 7px 10px; color: var(--red); font-weight: 700; text-align: left; border-bottom: 1px solid #fecaca; }
.err-tbl td        { padding: 6px 10px; border-bottom: 1px solid #fff1f2; color: var(--slate-700); }
.err-tbl tbody tr:last-child td { border-bottom: none; }

/* Info banner */
.info-banner { background: linear-gradient(135deg,#eff6ff 0%,#e0f2fe 100%); border: 1.5px solid #bfdbfe; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.info-banner svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.info-banner p   { margin: 0; font-size: .82rem; font-weight: 600; color: var(--slate-800); }
.info-banner small { font-size: .71rem; color: var(--slate-500); display: block; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   17. ANNOUNCEMENT CARDS  (main_outlet / hr_announcement_main)
════════════════════════════════════════════════════════════════ */
.ann-card {
    border-radius: 10px; border-left: 4px solid;
    padding: 14px 16px; margin-bottom: 12px;
    cursor: pointer; transition: box-shadow .18s, transform .18s;
}
.ann-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); transform: translateY(-1px); }
.ann-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ann-badge  { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; }
.ann-title  { font-size: .92rem; font-weight: 700; color: #1e293b; line-height: 1.35; flex: 1; }
.ann-content{ font-size: .83rem; color: #475569; line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ann-date   { font-size: .7rem; color: #94a3b8; margin-top: 8px; }
.ann-read-more { font-size: .75rem; font-weight: 600; opacity: .7; margin-top: 5px; display: inline-block; }

/* Skeleton loader */
.ann-skeleton-item { border-radius: 10px; height: 80px; background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size: 400% 100%; animation: shimmer 1.4s infinite; margin-bottom: 12px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.ann-empty     { text-align: center; padding: 48px 20px; color: #94a3b8; }
.ann-empty svg { width: 40px; height: 40px; margin-bottom: 10px; opacity: .4; }
.ann-empty p   { font-size: .85rem; margin: 0; }

/* Announcement filter pills (inside blue header) */
.ann-filter-btn {
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15); color: #fff;
    border-radius: 20px; padding: 2px 10px; font-size: .7rem; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
}
.ann-filter-btn:hover       { background: rgba(255,255,255,.3); }
.ann-filter-btn.active-pill { background: #fff; color: #1d4ed8; border-color: #fff; }

/* ════════════════════════════════════════════════════════════════
   18. MINI CALENDAR EVENT LIST  (main_outlet)
════════════════════════════════════════════════════════════════ */
.evt-item       { display: flex; align-items: flex-start; gap: 7px; padding: 6px 10px; border-bottom: 1px solid #f1f5f9; cursor: default; transition: background .15s; }
.evt-item:last-child { border-bottom: none; }
.evt-item:hover { background: #f8fafc; }
.evt-dot        { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.evt-body       { line-height: 1.3; }
.evt-title      { font-weight: 600; color: #1e293b; font-size: 11px; }
.evt-date       { color: #94a3b8; font-size: 10px; margin-top: 1px; }

/* Event filter buttons (main page) */
.event-filter-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid; transition: all .15s;
}

/* ════════════════════════════════════════════════════════════════
   19. FULLCALENDAR OVERRIDES  (hr_callendar)
════════════════════════════════════════════════════════════════ */
.fc .fc-toolbar-title      { font-family: 'Syne', sans-serif; font-size: 1rem !important; color: var(--slate-900); }
.fc .fc-button-primary     { background: var(--blue) !important; border-color: var(--blue) !important; font-size: .76rem !important; border-radius: var(--radius-sm) !important; padding: 5px 11px !important; }
.fc .fc-button-primary:hover { background: #2563eb !important; border-color: #2563eb !important; }
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion { font-size: .79rem; color: var(--slate-700); }
.fc .fc-daygrid-day.fc-day-today { background: var(--blue-lt) !important; }
.fc-event { border-radius: 5px !important; border: none !important; font-size: .73rem !important; padding: 2px 6px !important; cursor: pointer !important; }

/* Calendar legend */
.cal-legend       { display: flex; align-items: center; gap: 18px; padding: 10px 18px 14px; border-top: 1px solid var(--slate-100); flex-wrap: wrap; }
.cal-legend-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin-right: 4px; }
.cal-legend-items { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-legend-item  { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--slate-700); }
.cal-legend-dot   { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cal-legend-dot.dot-event   { background: #7c3aed; }
.cal-legend-dot.dot-holiday { background: #dc2626; }

/* Colored event-type selects */
select.event-purple { color: #6d28d9; font-weight: 700; border-color: #c4b5fd; background-color: #ede9fe; }
select.event-red    { color: #b91c1c; font-weight: 700; border-color: #fca5a5; background-color: #fee2e2; }

/* Mini calendar (main page) */
#mini-calendar .fc-toolbar         { padding: 6px 8px 2px; }
#mini-calendar .fc-toolbar-title   { font-size: .78rem !important; font-weight: 700; }
#mini-calendar .fc-button          { padding: 2px 7px !important; font-size: .7rem !important; }
#mini-calendar .fc-list-day-cushion{ font-size: .72rem; padding: 4px 8px; background: #f1f5f9; }
#mini-calendar .fc-list-event-title{ font-size: .72rem; }
#mini-calendar .fc-list-event-time { font-size: .68rem; color: #94a3b8; }
#mini-calendar .fc-list-empty-cushion { font-size: .75rem; color: #94a3b8; }

/* ════════════════════════════════════════════════════════════════
   20. STATUS TOGGLE  (hr_announcement_main)
════════════════════════════════════════════════════════════════ */
.status-toggle  { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 0; font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 600; }
.toggle-track   { width: 36px; height: 20px; border-radius: 10px; background: var(--slate-300); position: relative; transition: background var(--transition); }
.toggle-track.on{ background: #22c55e; }
.toggle-thumb   { width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle-track.on .toggle-thumb { left: 19px; }
.status-label.active   { color: #16a34a; }
.status-label.inactive { color: var(--slate-500); }

/* Priority pill */
.priority-pill    { display: inline-block; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-size: .72rem; font-weight: 700; background: var(--slate-100); color: var(--slate-700); }
.priority-pill.p1 { background: #fef2f2; color: #dc2626; }
.priority-pill.p2 { background: #fffbeb; color: #d97706; }
.priority-pill.p3 { background: #f0fdf4; color: #16a34a; }

/* ════════════════════════════════════════════════════════════════
   21. LOADING OVERLAY
════════════════════════════════════════════════════════════════ */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.loading-overlay.show { opacity: 1; pointer-events: all; }
.loading-card  { background: var(--white); border-radius: var(--radius-lg); padding: 28px 36px; text-align: center; box-shadow: var(--shadow-md); }
.loading-card p{ font-family: 'Syne', sans-serif; font-size: .82rem; font-weight: 600; color: var(--slate-700); margin: 0; }
.spinner       { width: 36px; height: 36px; border: 3px solid var(--slate-200); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   22. DATATABLES OVERRIDES
════════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--slate-300) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 9px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: .78rem !important; outline: none !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}
.dt-buttons { margin-bottom: 8px; }
.dt-buttons .btn {
    border-radius: var(--radius-sm) !important;
    font-family: 'Syne', sans-serif !important;
    font-size: .72rem !important; font-weight: 700 !important;
    padding: 5px 12px !important;
    background: var(--green) !important; color: #fff !important; border: none !important;
}
.dt-buttons .btn:hover { background: #15803d !important; }

/* ════════════════════════════════════════════════════════════════
   23. CHART WRAPPER
════════════════════════════════════════════════════════════════ */
.chart-wrap-sm { position: relative; height: 160px; }

/* ════════════════════════════════════════════════════════════════
   24. LAYOUT GRIDS  (rpt_userlog, ue_dashboard)
════════════════════════════════════════════════════════════════ */
.main-layout { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } }

.top-tables-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 700px) { .top-tables-row { grid-template-columns: 1fr; } }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* Card panel (rpt_userlog) */
.card-panel { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid rgba(203,213,225,.6); overflow: hidden; }
.card-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1.5px solid var(--slate-100); background: var(--slate-50); }

/* ════════════════════════════════════════════════════════════════
   25. AGENT_IT — Chat / AI Agent page
   Covers: agent_it.php
════════════════════════════════════════════════════════════════ */

/* ── Additional tokens used only by this page ─────────────────
   Note: --amber here is #f59e0b (vs shared #d97706).
   Override locally so shared pages are unaffected.           */
.agent-page {
    --amber:    #f59e0b;
    --amber-lt: #fef3c7;
    --shadow-card:  0 4px 24px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.05);
    --shadow-hover: 0 8px 32px rgba(15,23,42,.14);
}

/* ── Page wrapper override (flex column, gap) ─────────────── */
.agent-page .page-wrapper {
    max-width: 95%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Header overrides (dark/amber theme) ──────────────────── */
.agent-page .appt-header {
    padding: 20px 28px;
    box-shadow: var(--shadow-card);
}
.agent-page .appt-header-left  { gap: 16px; }
.agent-page .appt-header-icon  {
    width: 44px; height: 44px;
    background: var(--amber);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.agent-page .appt-header-icon i { font-size: 1.2rem; color: #0f172a; }
.agent-page .appt-header h4  { font-size: 1.35rem; color: var(--white); }
.agent-page .appt-header p   { font-size: .82rem; color: var(--slate-500); margin: 2px 0 0; }

/* ── Model dropdown ────────────────────────────────────────── */
.model-select-wrap { position: relative; flex-shrink: 0; }
.model-select-wrap select {
    appearance: none;
    background: rgba(255,255,255,.07);
    color: var(--slate-300);
    border: 1.5px solid var(--slate-700);
    border-radius: var(--radius-sm);
    padding: 8px 34px 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition);
    min-width: 210px;
}
.model-select-wrap select option { background: #1e293b; color: var(--slate-300); }
.model-select-wrap select:hover,
.model-select-wrap select:focus  { border-color: var(--amber); }
.model-select-wrap::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--slate-500);
    pointer-events: none; font-size: .75rem;
}

/* ── Main chat card ────────────────────────────────────────── */
.agent-page .card-main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 175px);
    min-height: 400px;
}

.card-inner-header {
    padding: 14px 22px;
    border-bottom: 2px solid var(--slate-100);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--white);
    flex-shrink: 0;
}
.card-inner-title {
    font-family: 'Syne', sans-serif;
    font-size: .9rem; font-weight: 700;
    color: var(--slate-900);
    display: flex; align-items: center; gap: 8px;
}
.agent-page .card-inner-title i { color: var(--amber); font-size: 1rem; }

.clear-btn {
    background: var(--slate-100);
    color: var(--slate-500);
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-family: 'Syne', sans-serif;
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    display: inline-flex; align-items: center; gap: 5px;
}
.clear-btn:hover { background: var(--slate-900); color: var(--white); }

/* ── Chat area ─────────────────────────────────────────────── */
.chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    background: var(--slate-50);
}
.chat-area::-webkit-scrollbar       { width: 4px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }

/* ── Message rows & bubbles ────────────────────────────────── */
.msg-row {
    display: flex;
    margin-bottom: 16px;
    animation: fadeSlideUp .25s ease both;
}
.msg-row.user      { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }

.bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: .88rem;
    line-height: 1.65;
}
.bubble.user {
    background: #0f172a;
    color: var(--white);
    border-bottom-right-radius: 4px;
}
.bubble.assistant {
    background: var(--white);
    color: var(--slate-900);
    border-bottom-left-radius: 4px;
    border: 1.5px solid var(--slate-100);
    box-shadow: var(--shadow-card, var(--shadow));
}

.bubble-meta {
    font-family: 'Syne', sans-serif;
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 5px;
}
.bubble.user      .bubble-meta { color: rgba(255,255,255,.45); }
.bubble.assistant .bubble-meta { color: #f59e0b; }

/* Markdown content inside bubbles */
.bubble p { margin-bottom: .5em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble code {
    font-size: .82em;
    background: #fef3c7;
    color: #1e293b;
    padding: 2px 5px;
    border-radius: 4px;
}
.bubble pre {
    background: #0f172a;
    border-radius: var(--radius-sm);
    padding: 12px;
    overflow-x: auto;
    margin: 8px 0;
}
.bubble pre code { background: transparent; color: inherit; padding: 0; }
.bubble ul, .bubble ol { padding-left: 1.3em; margin-bottom: .5em; }
.bubble h1, .bubble h2, .bubble h3 {
    font-family: 'Syne', sans-serif;
    font-size: .95rem; font-weight: 700;
    color: var(--slate-900); margin: 10px 0 4px;
}
.bubble a         { color: #f59e0b; }
.bubble strong    { color: var(--slate-900); font-weight: 600; }
.bubble blockquote {
    border-left: 3px solid #f59e0b;
    padding-left: 12px; color: var(--slate-500); margin: 6px 0;
}
.bubble table     { width: 100%; border-collapse: collapse; font-size: .83em; }
.bubble th, .bubble td { border: 1px solid var(--slate-100); padding: 6px 10px; }
.bubble th {
    background: #0f172a; color: var(--white);
    font-family: 'Syne', sans-serif; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.bubble tbody tr:hover { background: #fef3c7; }

/* ── Thinking dots ─────────────────────────────────────────── */
.thinking span {
    display: inline-block;
    width: 7px; height: 7px;
    background: #f59e0b;
    border-radius: 50%;
    margin: 0 2px;
    animation: bounce 1.2s infinite;
}
.thinking span:nth-child(2) { animation-delay: .2s; }
.thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce {
    0%,80%,100% { transform: translateY(0); opacity: .4; }
    40%         { transform: translateY(-6px); opacity: 1; }
}

/* ── Input area ────────────────────────────────────────────── */
.input-area {
    flex-shrink: 0;
    padding: 16px 22px;
    border-top: 2px solid var(--slate-100);
    background: var(--white);
}
.input-row { display: flex; gap: 10px; align-items: center; }
.input-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    color: var(--slate-900);
    background: var(--white);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input-row input::placeholder { color: var(--slate-500); }
.input-row input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

.send-btn {
    background: #0f172a;
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-family: 'Syne', sans-serif;
    font-size: .84rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background var(--transition), transform var(--transition);
    white-space: nowrap;
}
.send-btn:hover    { background: var(--slate-700); transform: translateY(-1px); }
.send-btn:active   { transform: translateY(0); }
.send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.footer-note {
    font-size: .72rem; color: var(--slate-500);
    text-align: center; margin-top: 10px;
}

/* ── Page entry animation ──────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.agent-page .page-wrapper > *                  { animation: fadeSlideUp .4s ease both; }
.agent-page .page-wrapper > *:nth-child(2)     { animation-delay: .07s; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 576px) {
    .agent-page .appt-header { flex-direction: column; align-items: flex-start; }
    .model-select-wrap select { min-width: 100%; }
    .bubble { max-width: 92%; }
    .send-btn span { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   26. AR_WEEKLYREPORT — Weekly AR Exception Report page
   Covers: ar_weeklyreport.php
════════════════════════════════════════════════════════════════ */

/* ── Page wrapper (97% width variant) ────────────────────────── */
.page-wrapper--ar { max-width: 97%; }

/* ── KPI chips (header summary row) ──────────────────────────── */
.kpi-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kpi-chip {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 6px 12px; border-radius: var(--radius-sm);
    font-size: .76rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid transparent;
    transition: all var(--transition); user-select: none; white-space: nowrap;
    min-width: 110px;
}
.kpi-chip-top { display: flex; align-items: center; gap: 6px; }
.kpi-chip .num  { font-family: 'DM Mono', monospace; font-weight: 700; font-size: .9rem; }
.kpi-chip .desc { font-size: .65rem; font-weight: 500; opacity: .75; margin-top: 2px; white-space: normal; line-height: 1.3; }
.kpi-chip.total  { background: var(--slate-100); border-color: var(--slate-300); color: var(--slate-700); }
.kpi-chip.flag-a { background: var(--red-lt);    border-color: #fca5a5; color: var(--red); }
.kpi-chip.flag-b { background: var(--yellow-lt); border-color: #fcd34d; color: var(--yellow); }
.kpi-chip.flag-c { background: var(--green-lt);  border-color: #86efac; color: var(--green); }
.kpi-chip.flag-d { background: var(--orange-lt); border-color: #fdba74; color: var(--orange); }
.kpi-chip.flag-e { background: var(--purple-lt); border-color: #c4b5fd; color: var(--purple); }
.kpi-chip.active { transform: scale(1.04); box-shadow: 0 0 0 2px currentColor; }
.kpi-chip:hover  { transform: translateY(-1px); }

/* ── Filter bar (inside card, above table) ────────────────────── */
.filter-bar {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--slate-100);
    background: var(--slate-50);
}

/* ── Table wrap ───────────────────────────────────────────────── */
.table-wrap { padding: 14px 18px; }

/* ── DataTables extra overrides (paginate, length, info) ─────── */
.dataTables_filter input, .dataTables_length select {
    background: var(--white) !important; border: 1.5px solid var(--slate-300) !important;
    color: var(--slate-900) !important; border-radius: var(--radius-sm) !important;
    padding: 4px 9px !important; font-size: .8rem !important;
    font-family: 'DM Sans', sans-serif !important;
}
.dataTables_filter input:focus, .dataTables_length select:focus {
    border-color: var(--blue) !important; outline: none !important;
}
.dataTables_info, .dataTables_paginate { font-size: .76rem; color: var(--slate-500) !important; }
.paginate_button { color: var(--slate-500) !important; border-radius: var(--radius-sm) !important; }
.paginate_button.current,
.paginate_button.current:hover {
    background: var(--blue) !important; border-color: var(--blue) !important;
    color: var(--white) !important;
}
.paginate_button:hover { background: var(--slate-100) !important; color: var(--slate-900) !important; }

table.dataTable thead th {
    background: var(--slate-50); color: var(--slate-500);
    font-size: .69rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border-bottom: 1.5px solid var(--slate-100) !important;
    white-space: nowrap; padding: 9px 10px;
}
table.dataTable tbody td {
    background: var(--white) !important;
    border-bottom: 1px solid var(--slate-100) !important;
    padding: 8px 10px; font-size: .82rem; vertical-align: middle;
}
table.dataTable tbody tr:hover td {
    background: var(--blue-lt) !important; cursor: pointer;
}

/* ── Flag badges (A/B/C/D/E inline squares) ──────────────────── */
.flag-badge {
    display: inline-block; width: 20px; height: 20px;
    border-radius: 5px; text-align: center; line-height: 20px;
    font-size: .68rem; font-weight: 800; font-family: 'DM Mono', monospace;
    margin-right: 2px;
}
.flag-badge.A { background: var(--red-lt);    color: var(--red); }
.flag-badge.B { background: var(--yellow-lt); color: var(--yellow); }
.flag-badge.C { background: var(--green-lt);  color: var(--green); }
.flag-badge.D { background: var(--orange-lt); color: var(--orange); }
.flag-badge.E { background: var(--purple-lt); color: var(--purple); }

/* ── Severity dots ────────────────────────────────────────────── */
.sev { display: inline-flex; gap: 2px; }
.sev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); opacity: .18; }
.sev-dot.on { opacity: 1; }

/* ── Owner badge ──────────────────────────────────────────────── */
.owner-badge {
    font-size: .68rem; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; letter-spacing: .03em; white-space: nowrap;
}
.owner-badge.Inventory { background: #dbeafe; color: #1d4ed8; }
.owner-badge.Ops       { background: var(--orange-lt); color: var(--orange); }
.owner-badge.Buyer     { background: var(--green-lt);  color: var(--green); }

/* ── Flag legend (bottom of card) ────────────────────────────── */
.flag-legend {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--slate-100);
}
.flag-legend-label {
    font-size: .69rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--slate-500); margin-right: 2px; white-space: nowrap;
}
.flag-legend-items { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flag-legend-item  {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .76rem; font-weight: 500; color: var(--slate-700);
}
.flag-legend-item .leg-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 5px;
    font-size: .68rem; font-weight: 800; font-family: 'DM Mono', monospace; flex-shrink: 0;
}
.flag-legend-item .leg-badge.A { background: var(--red-lt);    color: var(--red); }
.flag-legend-item .leg-badge.B { background: var(--yellow-lt); color: var(--yellow); }
.flag-legend-item .leg-badge.C { background: var(--green-lt);  color: var(--green); }
.flag-legend-item .leg-badge.D { background: var(--orange-lt); color: var(--orange); }
.flag-legend-item .leg-badge.E { background: var(--purple-lt); color: var(--purple); }

/* ── Loading block ────────────────────────────────────────────── */
.loading-block {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--slate-500); padding: 40px; font-size: .82rem;
}

/* ── Drill-down modal ─────────────────────────────────────────── */
.drill-section { margin-bottom: 18px; }
.drill-section-title {
    font-size: .69rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--slate-500); margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.drill-section-title::after { content: ''; flex: 1; height: 1px; background: var(--slate-100); }

/* Summary cards inside drill-down */
.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
@media(max-width:600px) { .summary-grid { grid-template-columns: repeat(2,1fr); } }
.summary-card {
    background: var(--slate-50); border: 1px solid var(--slate-100);
    border-radius: var(--radius-md); padding: 10px 12px;
}
.summary-card .s-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); margin-bottom: 3px; }
.summary-card .s-value { font-family: 'DM Mono', monospace; font-size: 1.15rem; font-weight: 600; color: var(--slate-900); }
.summary-card .s-value.warn   { color: var(--yellow); }
.summary-card .s-value.danger { color: var(--red); }
.summary-card .s-value.good   { color: var(--green); }
.summary-card .s-sub { font-size: .68rem; color: var(--slate-500); margin-top: 2px; }

/* Action box */
.action-box {
    background: var(--green-lt); border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm); padding: 10px 14px;
    font-size: .82rem; color: var(--green); line-height: 1.8;
}

/* Timeline table */
.timeline-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
.timeline-tbl th { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); padding: 5px 8px; border-bottom: 1.5px solid var(--slate-100); text-align: right; }
.timeline-tbl th:first-child { text-align: left; }
.timeline-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--slate-100); text-align: right; font-family: 'DM Mono', monospace; }
.timeline-tbl td:first-child { text-align: left; font-family: 'DM Sans', sans-serif; color: var(--slate-500); }
.timeline-tbl tr.has-alert td { background: var(--yellow-lt); }
.timeline-tbl .grn-qty { color: var(--blue); font-weight: 600; }
.timeline-tbl .zero    { color: var(--slate-300); }

/* Outlet compare bars */
.outlet-compare { display: flex; flex-direction: column; gap: 4px; }
.outlet-row-cmp {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    background: var(--slate-50); border-radius: var(--radius-sm);
    border: 1px solid var(--slate-100);
}
.outlet-row-cmp .out-name { font-family: 'DM Mono', monospace; font-size: .76rem; width: 60px; flex-shrink: 0; color: var(--slate-700); }
.outlet-row-cmp .bar-wrap { flex: 1; height: 4px; background: var(--slate-200); border-radius: 2px; overflow: hidden; }
.outlet-row-cmp .bar      { height: 100%; background: var(--blue); border-radius: 2px; transition: width .4s; }
.outlet-row-cmp .out-val  { font-family: 'DM Mono', monospace; font-size: .76rem; color: var(--slate-500); width: 40px; text-align: right; }

/* Owner row & tags (inside guide legend) */
.owner-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.owner-tag { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.owner-tag.inv { background: #dbeafe; color: #1d4ed8; }
.owner-tag.ops { background: var(--orange-lt); color: var(--orange); }
.owner-tag.buy { background: var(--green-lt);  color: var(--green); }

/* ── Floating Guide button (FAB) ─────────────────────────────── */
.fab-guide {
    position: fixed; bottom: 28px; right: 28px; z-index: 1050;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(59,130,246,.45), 0 1px 4px rgba(15,23,42,.12);
    transition: all var(--transition);
    animation: fabPop .5s cubic-bezier(.34,1.56,.64,1) .4s both;
}
.fab-guide:hover { transform: scale(1.1) translateY(-2px); background: #2563eb; box-shadow: 0 8px 24px rgba(59,130,246,.5); }
.fab-guide svg   { width: 22px; height: 22px; }
.fab-guide .fab-tooltip {
    position: absolute; right: 62px; top: 50%; transform: translateY(-50%);
    background: var(--slate-900); color: var(--white);
    font-family: 'DM Sans', sans-serif; font-size: .74rem; font-weight: 600;
    padding: 5px 10px; border-radius: var(--radius-sm);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity var(--transition);
}
.fab-guide .fab-tooltip::after {
    content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-left-color: var(--slate-900);
}
.fab-guide:hover .fab-tooltip { opacity: 1; }
@keyframes fabPop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }

/* ── Guide modal (tabs + panes) ──────────────────────────────── */
#guideModal .modal-dialog { max-width: 720px; }
#guideModal .modal-body   { padding: 0; }

.guide-tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--slate-100);
    padding: 0 20px; background: var(--slate-50); overflow-x: auto;
}
.guide-tab {
    padding: 11px 16px;
    font-family: 'Syne', sans-serif; font-size: .78rem; font-weight: 700;
    color: var(--slate-500); cursor: pointer; border: none; background: none;
    border-bottom: 2.5px solid transparent; margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.guide-tab.active          { color: var(--blue); border-bottom-color: var(--blue); }
.guide-tab:hover:not(.active) { color: var(--slate-700); }
.guide-tab svg { width: 13px; height: 13px; flex-shrink: 0; }

.guide-pane        { display: none; padding: 20px; }
.guide-pane.active { display: block; }

/* Legend cards (flag A–E cards inside guide) */
.legend-grid { display: flex; flex-direction: column; gap: 10px; }
.legend-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px; border-radius: var(--radius-md);
    border: 1.5px solid; transition: transform var(--transition);
}
.legend-card:hover     { transform: translateX(3px); }
.legend-card.lc-a { background: var(--red-lt);    border-color: #fca5a5; }
.legend-card.lc-b { background: var(--yellow-lt); border-color: #fcd34d; }
.legend-card.lc-c { background: var(--green-lt);  border-color: #86efac; }
.legend-card.lc-d { background: var(--orange-lt); border-color: #fdba74; }
.legend-card.lc-e { background: var(--purple-lt); border-color: #c4b5fd; }
.legend-card .lc-badge {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', monospace; font-size: .92rem; font-weight: 800;
}
.legend-card.lc-a .lc-badge { background: var(--red);    color: var(--white); }
.legend-card.lc-b .lc-badge { background: var(--yellow);  color: var(--white); }
.legend-card.lc-c .lc-badge { background: var(--green);   color: var(--white); }
.legend-card.lc-d .lc-badge { background: var(--orange);  color: var(--white); }
.legend-card.lc-e .lc-badge { background: var(--purple);  color: var(--white); }
.legend-card .lc-body  { flex: 1; }
.legend-card .lc-title { font-family: 'Syne', sans-serif; font-size: .85rem; font-weight: 700; margin-bottom: 3px; }
.legend-card.lc-a .lc-title { color: var(--red); }
.legend-card.lc-b .lc-title { color: var(--yellow); }
.legend-card.lc-c .lc-title { color: var(--green); }
.legend-card.lc-d .lc-title { color: var(--orange); }
.legend-card.lc-e .lc-title { color: var(--purple); }
.legend-card .lc-desc   { font-size: .81rem; color: var(--slate-700); line-height: 1.5; margin-bottom: 6px; }
.legend-card .lc-cond   { font-size: .74rem; color: var(--slate-500); font-family: 'DM Mono', monospace; background: rgba(255,255,255,.6); padding: 5px 9px; border-radius: var(--radius-sm); line-height: 1.6; }
.legend-card .lc-action { font-size: .75rem; color: var(--slate-600); margin-top: 6px; display: flex; align-items: flex-start; gap: 5px; }
.legend-card .lc-action::before { content: '→'; font-weight: 700; flex-shrink: 0; }

/* Formula cards */
.formula-list { display: flex; flex-direction: column; gap: 10px; }
.formula-card {
    background: var(--slate-50); border: 1.5px solid var(--slate-100);
    border-radius: var(--radius-md); padding: 13px 16px;
}
.formula-card .f-name { font-family: 'Syne', sans-serif; font-size: .8rem; font-weight: 700; color: var(--slate-900); margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.formula-card .f-name span { font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 500; background: var(--blue-lt); color: var(--blue); padding: 2px 7px; border-radius: 4px; }
.formula-card .f-expr { font-family: 'DM Mono', monospace; font-size: .82rem; color: var(--blue); background: var(--blue-lt); padding: 7px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--blue); margin-bottom: 5px; line-height: 1.7; }
.formula-card .f-note { font-size: .76rem; color: var(--slate-500); line-height: 1.5; }

/* Column reference table */
.col-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.col-table thead th { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); padding: 7px 10px; border-bottom: 1.5px solid var(--slate-100); text-align: left; background: var(--slate-50); }
.col-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--slate-100); vertical-align: top; color: var(--slate-700); }
.col-table tbody tr:last-child td { border-bottom: none; }
.col-table .col-name { font-family: 'DM Mono', monospace; font-size: .76rem; color: var(--slate-900); font-weight: 600; }
.col-table .col-type { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--blue); background: var(--blue-lt); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.col-table tbody tr:hover td { background: var(--slate-50); }

/* Guide steps (how-to tab) */
.guide-steps { display: flex; flex-direction: column; gap: 14px; }
.guide-step  { display: flex; gap: 14px; align-items: flex-start; }
.step-num    { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--white); font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.step-body   { flex: 1; }
.step-title  { font-family: 'Syne', sans-serif; font-size: .84rem; font-weight: 700; color: var(--slate-900); margin-bottom: 3px; }
.step-desc   { font-size: .79rem; color: var(--slate-600); line-height: 1.55; }
.step-tip    { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: .73rem; color: var(--blue); background: var(--blue-lt); padding: 3px 9px; border-radius: var(--radius-sm); }

.guide-callout { background: var(--yellow-lt); border: 1.5px solid #fcd34d; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: .8rem; color: var(--yellow); display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
.guide-callout svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }


/* ════════════════════════════════════════════════════════════════
   27. AR_MANAGEMENT_DASHBOARD — AR Control Management View
   Covers: ar_management_dashboard.php
════════════════════════════════════════════════════════════════ */

/* ── Card body ────────────────────────────────────────────────── */
.card-body { padding: 16px 18px; }

/* ── KPI cards — health score variant ────────────────────────── */
.kpi-card .kpi-delta          { font-size: .76rem; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kpi-card .kpi-delta.up       { color: var(--red); }
.kpi-card .kpi-delta.down     { color: var(--green); }
.kpi-card .kpi-delta.neutral  { color: var(--slate-500); }
.kpi-card.health .kpi-value   { font-size: 2.4rem; }
.health-bar-wrap { height: 6px; background: var(--slate-100); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.health-bar      { height: 100%; border-radius: 3px; transition: width .6s ease; }

/* ── grid-3 (2fr 1fr) ─────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
@media(max-width:900px) { .grid-3 { grid-template-columns: 1fr; } }

/* ── Chart wrapper ────────────────────────────────────────────── */
.chart-wrap { position: relative; height: 220px; }

/* ── Score badge ──────────────────────────────────────────────── */
.score-badge      { display: inline-block; font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); }
.score-badge.high { background: var(--green-lt); color: var(--green); }
.score-badge.mid  { background: var(--yellow-lt); color: var(--yellow); }
.score-badge.low  { background: var(--red-lt);   color: var(--red); }

/* Score guide pills */
.score-guide { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.score-pill       { padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 700; font-family: 'DM Mono', monospace; }
.score-pill.high  { background: var(--green-lt); color: var(--green); }
.score-pill.mid   { background: var(--yellow-lt); color: var(--yellow); }
.score-pill.low   { background: var(--red-lt);   color: var(--red); }

/* ── Rate bar ─────────────────────────────────────────────────── */
.rate-bar-wrap { display: flex; align-items: center; gap: 6px; }
.rate-bar-bg   { flex: 1; height: 5px; background: var(--slate-100); border-radius: 2px; overflow: hidden; }
.rate-bar-fill { height: 100%; border-radius: 2px; background: var(--blue); }
.rate-label    { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--slate-500); width: 36px; text-align: right; flex-shrink: 0; }

/* ── Issue bucket panel ───────────────────────────────────────── */
.bucket-list     { display: flex; flex-direction: column; gap: 10px; }
.bucket-item     { display: flex; flex-direction: column; gap: 4px; }
.bucket-item-top { display: flex; align-items: center; justify-content: space-between; }
.bucket-name     { font-size: .82rem; font-weight: 600; color: var(--slate-700); }
.bucket-count    { font-family: 'DM Mono', monospace; font-size: .82rem; color: var(--slate-500); }
.bucket-bar-bg   { height: 8px; background: var(--slate-100); border-radius: 4px; overflow: hidden; }
.bucket-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
.bucket-bar-fill.phantom  { background: var(--yellow); }
.bucket-bar-fill.arconfig { background: var(--purple); }
.bucket-bar-fill.dcfail   { background: var(--orange); }
.bucket-bar-fill.shelf    { background: var(--red); }

/* ── Flag mini badges (SKU table) ─────────────────────────────── */
.flag-mini   { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 3px; font-size: .62rem; font-weight: 800; font-family: 'DM Mono', monospace; margin-right: 1px; }
.flag-mini.A { background: var(--red-lt);    color: var(--red); }
.flag-mini.B { background: var(--yellow-lt); color: var(--yellow); }
.flag-mini.C { background: var(--green-lt);  color: var(--green); }
.flag-mini.D { background: var(--orange-lt); color: var(--orange); }
.flag-mini.E { background: var(--purple-lt); color: var(--purple); }

/* ── DC stock pill ────────────────────────────────────────────── */
.dc-pill     { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.dc-pill.yes { background: var(--green-lt); color: var(--green); }
.dc-pill.no  { background: var(--red-lt);   color: var(--red); }

/* ── KPI explain cards (guide modal) ─────────────────────────── */
.kpi-explain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media(max-width:600px) { .kpi-explain-grid { grid-template-columns: 1fr; } }
.kpi-explain-card {
    border-radius: var(--radius-md); padding: 13px 15px;
    border: 1.5px solid; position: relative; overflow: hidden;
}
.kpi-explain-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kc-color); }
.kpi-explain-card.kc-red    { background: var(--red-lt);    border-color: #fca5a5; --kc-color: var(--red); }
.kpi-explain-card.kc-yellow { background: var(--yellow-lt); border-color: #fcd34d; --kc-color: var(--yellow); }
.kpi-explain-card.kc-orange { background: var(--orange-lt); border-color: #fdba74; --kc-color: var(--orange); }
.kpi-explain-card.kc-green  { background: var(--green-lt);  border-color: #86efac; --kc-color: var(--green); }
.kpi-explain-card .kc-label { font-family: 'Syne', sans-serif; font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.kpi-explain-card.kc-red    .kc-label { color: var(--red); }
.kpi-explain-card.kc-yellow .kc-label { color: var(--yellow); }
.kpi-explain-card.kc-orange .kc-label { color: var(--orange); }
.kpi-explain-card.kc-green  .kc-label { color: var(--green); }
.kpi-explain-card .kc-desc  { font-size: .79rem; color: var(--slate-700); line-height: 1.5; }
.kpi-explain-card .kc-calc  { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--slate-500); background: rgba(255,255,255,.65); padding: 4px 8px; border-radius: 5px; margin-top: 6px; line-height: 1.6; }
.kpi-explain-card .kc-delta-note { font-size: .72rem; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.kpi-explain-card .kc-delta-note span { font-size: .68rem; padding: 1px 6px; border-radius: 3px; font-weight: 700; background: rgba(255,255,255,.7); }

/* ── Bucket explain cards (guide modal) ──────────────────────── */
.bucket-explain-list { display: flex; flex-direction: column; gap: 10px; }
.bucket-explain-card { display: flex; gap: 13px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-md); border: 1.5px solid; }
.bucket-explain-card.bc-phantom  { background: var(--yellow-lt); border-color: #fcd34d; }
.bucket-explain-card.bc-arconfig { background: var(--purple-lt); border-color: #c4b5fd; }
.bucket-explain-card.bc-dcfail   { background: var(--orange-lt); border-color: #fdba74; }
.bucket-explain-card.bc-shelf    { background: var(--red-lt);    border-color: #fca5a5; }
.bucket-explain-card .bc-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.bc-phantom .bc-dot  { background: var(--yellow); }
.bc-arconfig .bc-dot { background: var(--purple); }
.bc-dcfail .bc-dot   { background: var(--orange); }
.bc-shelf .bc-dot    { background: var(--red); }
.bucket-explain-card .bc-body  { flex: 1; }
.bucket-explain-card .bc-title { font-family: 'Syne', sans-serif; font-size: .84rem; font-weight: 700; margin-bottom: 3px; }
.bc-phantom .bc-title  { color: var(--yellow); }
.bc-arconfig .bc-title { color: var(--purple); }
.bc-dcfail .bc-title   { color: var(--orange); }
.bc-shelf .bc-title    { color: var(--red); }
.bucket-explain-card .bc-flags { display: flex; gap: 4px; margin: 5px 0; flex-wrap: wrap; }
.bucket-explain-card .bc-flag  { font-family: 'DM Mono', monospace; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 4px; }
.bc-phantom .bc-flag   { background: var(--yellow-lt); color: var(--yellow); border: 1px solid #fcd34d; }
.bc-arconfig .bc-flag  { background: var(--purple-lt); color: var(--purple); border: 1px solid #c4b5fd; }
.bc-dcfail .bc-flag    { background: var(--orange-lt); color: var(--orange); border: 1px solid #fdba74; }
.bc-shelf .bc-flag     { background: var(--red-lt);    color: var(--red);    border: 1px solid #fca5a5; }
.bucket-explain-card .bc-desc   { font-size: .79rem; color: var(--slate-700); line-height: 1.5; }
.bucket-explain-card .bc-action { font-size: .74rem; color: var(--slate-600); margin-top: 5px; display: flex; align-items: flex-start; gap: 5px; }
.bucket-explain-card .bc-action::before { content: '→'; font-weight: 700; flex-shrink: 0; }

.col-table .col-section td{background:var(--slate-100)!important;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);padding:5px 10px}#tableLabel{font-size:12px;font-weight:600;color:#495057;padding:5px 10px;margin-bottom:8px;background:#e9ecef;border-radius:6px;display:none;align-items:center;gap:6px}#tableLabel.visible{display:flex}#tableLabel .loc-badge{background:#0d6efd;color:#fff;border-radius:4px;padding:2px 10px;font-size:11px;letter-spacing:.03em}#tableLabel .loc-spinner{display:none}#tableLabel .loc-done{display:inline-flex;align-items:center;gap:3px}#tableLabel.loading .loc-spinner{display:inline-block}#tableLabel.loading .loc-done{display:none!important}.skel{background:linear-gradient(90deg,#e9ecef 25%,#dee2e6 50%,#e9ecef 75%);background-size:200% 100%;animation:skel-pulse 1.2s infinite;border-radius:4px;display:inline-block}@keyframes skel-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}tr.skel-row td{padding:6px 8px;vertical-align:middle;border-color:#f1f3f5}.btn-view{font-size:11px;padding:2px 12px;border-radius:20px}.btn-view:hover{transform:scale(1.05)}.section-card{border:1px solid #e3e6ea;border-radius:8px;background:#fff;padding:10px 14px;margin-bottom:14px}.section-title{font-size:11px;font-weight:700;color:#495057;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;align-items:center;gap:6px}.section-title .ms-auto{margin-left:auto!important}.filter-panel-balzero{border:1px solid rgba(13,110,253,.25);border-radius:8px;background:#f8f9ff;padding:10px 14px;margin-bottom:14px}.filter-panel-balzero .filter-label{font-size:11px;font-weight:700;color:#0d6efd;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}

.dropdown-scroll {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.dropdown-scroll::-webkit-scrollbar        { width: 4px; }
.dropdown-scroll::-webkit-scrollbar-track  { background: transparent; }
.dropdown-scroll::-webkit-scrollbar-thumb  { background: #a80808; border-radius: 4px; }
.dropdown-scroll::-webkit-scrollbar-thumb:hover { background: #6c757d; }