/* ════════════════════════════════════════════════════════════════════
   MCampusCardLayout.css  —  Unified Card Layout Stylesheet
   ════════════════════════════════════════════════════════════════════
   Merged from:
     • HRRecruitmentDashboard.css   (Partition 1 — HR)
     • StudentEnquiryCardLayout.css (Partition 2 — SE)

   Partitions
   ──────────
   PARTITION 1 · HR   Classes: rd-*  (dashboard)  ·  hrc-*  (candidate cards)
   PARTITION 2 · SE   Classes: mc-*  (enquiry cards, modals, drawers, calendar)
   PARTITION 3 · PAC  Classes: pac-* (post admission process cards)
   PARTITION 4 · EQAD Classes: enqad-* (enquiry analytics dashboard — New tab, beta)

   Font
   ────
   Manrope (Google Fonts, wght 300–800)

   Usage
   ─────
   Loaded globally via  Views/Shared/_AllCSSFilesAdminLTE.cshtml
   No page-level <link> needed — classes are always available.
   ════════════════════════════════════════════════════════════════════ */

/* ── Manrope — single shared font import ────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ████████████████████████████████████████████████████████████████████
   PARTITION 1 — HR RECRUITMENT DASHBOARD
   ████████████████████████████████████████████████████████████████████
   Classes   : rd-*  ·  hrc-*
   Version   : 1.0.0
   Updated   : 2026-06-08
   Font      : Manrope
   Source    : HRRecruitmentDashboard.css
   ──────────────────────────────────────────────────────────────────────
   rd-*   Dashboard shell — tab header, KPI cards, chart panels,
          openings grid, candidate table, pipeline funnel, filters
   hrc-*  HR candidate cards — card layout, avatar, info grid,
          days-pill, drawers, modals, status pills, toolbar
   ████████████████████████████████████████████████████████████████████ */
/* ════════════════════════════════════════════════════════════════════
   HRRecruitmentDashboard.css
   HR Recruitment & Hiring Pipeline Dashboard  —  Component Stylesheet
   ─────────────────────────────────────────────────────────────────
   Design tokens · sticky flat-pill tab header · global filter bar
   KPI cards · chart panels · openings grid · candidate table
   Pipeline funnel · gender analytics · skin-aware AdminLTE overrides
   ─────────────────────────────────────────────────────────────────
   Tab Style  : Flat Pill  (v3 — glassmorphism removed)
   Themes     : skin-blue · skin-purple · skin-green
                skin-red  · skin-yellow · skin-black
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Design Tokens
   ════════════════════════════════════════════════════════════════════ */
.rd-wrapper {
    --rd-ink:          #0f172a;
    --rd-sky:          #2563eb;     /* semantic blue — KPI cards, funnel .c-sky, etc. */
    --rd-sky-lt:       #dbeafe;
    --rd-teal:         #0d9488;
    --rd-amber:        #d97706;
    --rd-rose:         #e11d48;
    --rd-jade:         #16a34a;
    --rd-violet:       #7c3aed;
    --rd-pink:         #db2777;
    --rd-bg:           #f0f4ff;
    --rd-surface:      #ffffff;
    --rd-border:       #e2e8f0;
    --rd-muted:        #94a3b8;
    --rd-text-primary: #1e293b;
    --rd-text-sec:     #64748b;
    --rd-shadow-sm:    0 1px 3px rgba(0,0,0,.08);
    --rd-shadow-md:    0 4px 16px rgba(0,0,0,.10);
    --rd-shadow-lg:    0 8px 32px rgba(0,0,0,.14);
    --rd-radius:       12px;
    --rd-radius-sm:    8px;
    --rd-transition:   0.2s ease;

    /* ── Skin-aware interactive tokens (overridden per body.skin-*) ── */
    --rd-primary:          #2563eb;   /* maps to --rd-sky by default */
    --rd-primary-lt:       #dbeafe;   /* light tint of --rd-primary  */
    --rd-header-bg:        linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #1d4ed8 100%);
    --rd-header-shadow:    0 6px 24px rgba(30,58,138,.45), 0 1px 0 rgba(255,255,255,.08);
    --rd-tab-hover-shad:   rgba(30,58,138,.40);
}

/* ── Font import hook (applied to wrapper so it doesn't bleed) ─────── */
.rd-wrapper,
.rd-wrapper * {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
    box-sizing: border-box;
}
/* ── Font Awesome icon restore ──── */
/* Without this the * !important would kill FA glyph rendering   */
.rd-wrapper i.fa,
.rd-wrapper i[class^="fa-"],
.rd-wrapper i[class*=" fa-"],
.rd-wrapper .fa:before,
.rd-wrapper [class^="fa-"]:before,
.rd-wrapper [class*=" fa-"]:before {
    font-family: FontAwesome !important;
}
.rd-wrapper h1,
.rd-wrapper h2,
.rd-wrapper h3,
.rd-wrapper h4,
.rd-wrapper h5 {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}

/* ── Root Wrapper ────────────────────────────────────────────────────── */
.rd-wrapper {
    background: linear-gradient(135deg, var(--rd-primary-lt) 0%, #f8faff 50%, var(--rd-primary-lt) 100%);
    min-height: 60vh;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Tab Header — Flat Pill Design  v3
   ════════════════════════════════════════════════════════════════════ */

/* ── Sticky Tab Header ───────────────────────────────────────────────── */
.rd-header {
    background: var(--rd-header-bg);
    position: sticky;
    top: 0;
    z-index: 99;
    overflow: hidden;
    box-shadow: var(--rd-header-shadow);
}
/* Accent stripe */
.rd-header-accent {
    height: 3px;
    background: linear-gradient(90deg,
        #60a5fa 0%, #a78bfa 28%, #f472b6 52%,
        #fbbf24 74%, #34d399 100%);
}

/* Tab Bar wrapper */
.rd-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 20px;
}

/* Right section (AY pill) */
.rd-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* AY info pill */
.rd-ay-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(217,119,6,.12) 100%);
    border: 1px solid rgba(245,158,11,.35);
    color: rgba(255,255,255,.88);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px !important;
    white-space: nowrap;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(245,158,11,.20);
}
.rd-ay-dot {
    width: 7px;
    height: 7px;
    background: #f59e0b;
    border-radius: 50% !important;
    flex-shrink: 0;
    box-shadow: 0 0 6px #f59e0b;
    animation: rd-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes rd-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1);   }
    50%       { opacity: .7; transform: scale(1.4); }
}
.rd-ay-count { font-size: 13px; font-weight: 800; color: #fbbf24; }
.rd-ay-text  { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.65); letter-spacing: .04em; }

/* Tab Navigation scroll strip */
.rd-tab-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
    padding: 2px 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.rd-tab-nav::-webkit-scrollbar { display: none; }

/* Tab Buttons */
.rd-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.15);
    border: 1px solid rgba(255,255,255,.30) !important;
    color: rgba(255,255,255,.85);          /* brighter idle text */
    font-size: 12px;
    font-weight: 600;
    padding: 7px 15px;
    cursor: pointer;
    border-radius: 9px !important;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
    letter-spacing: .01em;
    scroll-snap-align: start;
    position: relative;
    flex-shrink: 0;
}
.rd-tb-icon  { font-size: 14px; line-height: 1; flex-shrink: 0; }
.rd-tb-label { line-height: 1; }

.rd-tab-btn:hover {
    color: #fff;
    background: rgba(0,0,0,.25) !important;
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: 0 4px 16px var(--rd-tab-hover-shad);
}

/* Active tab  white pill with skin-primary text/border */
.rd-tab-btn.is-active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--rd-primary) !important;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.rd-tab-btn.is-active .rd-tb-icon { filter: none; }

/* 
   Global Filter Bar
    */
.rd-fbar {
    background: var(--rd-surface);
    border-bottom: 2px solid var(--rd-border);
    padding: 9px 20px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 7px;
    position: sticky;
    top: 60px;        /* fallback  JS sets exact px from header height */
    z-index: 97;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

/* Filter group (label + select) */
.rd-fg {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    padding: 0 14px 0 0;
    flex-shrink: 0;
}
.rd-fg--right {
    margin-left: auto;
    gap: 8px;
    padding-right: 0;
}

/* Group label */
.rd-fl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--rd-text-sec);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .01em;
}

/* Divider between groups */
.rd-fdiv {
    width: 1px;
    height: 24px;
    background: var(--rd-border);
    flex-shrink: 0;
    margin-right: 14px;
}

/* Dropdown selects */
.rd-fsel {
    padding: 5px 28px 5px 10px;
    border-radius: 8px !important;
    border: 1.5px solid var(--rd-border) !important;
    background: var(--rd-surface);
    color: var(--rd-text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    max-width: 150px;
    min-width: 110px;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.rd-fsel:focus  { border-color: var(--rd-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-primary) 12%, transparent); }
.rd-fsel:hover  { border-color: #94a3b8 !important; }
.rd-fsel--wide  { max-width: 210px; min-width: 160px; }

/* Search */
.rd-fsearch-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.rd-fsearch-icon {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: var(--rd-muted);
    pointer-events: none;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
}
.rd-fsearch {
    padding: 5px 13px 5px 30px;
    border-radius: 999px !important;
    border: 1.5px solid var(--rd-border) !important;
    font-size: 12px;
    background: var(--rd-bg);
    color: var(--rd-text-primary);
    width: 200px;
    outline: none;
    transition: border-color .14s, width .2s;
}
.rd-fsearch:focus {
    border-color: var(--rd-primary) !important;
    width: 240px;
}

/* Clear button */
.rd-fbar-clear {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px !important;
    border: 1.5px solid var(--rd-rose) !important;
    background: transparent;
    color: var(--rd-rose);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, color .14s;
}
.rd-fbar-clear:hover { background: #ffe4e6; }

/* Count badge */
.rd-fbar-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--rd-primary);
    background: var(--rd-primary-lt);
    padding: 4px 13px;
    border-radius: 999px !important;
    white-space: nowrap;
    border: 1px solid var(--rd-primary-lt);
}

/* Tab Panels */
.rd-body { padding: 22px 24px 60px; }
.rd-tab-content { display: none; }
.rd-tab-content.is-active { display: block; }

/* KPI Grid */
.rd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.rd-kpi-card {
    background: var(--rd-surface);
    border-radius: var(--rd-radius) !important;
    padding: 12px 14px;
    box-shadow: var(--rd-shadow-sm);
    border-left: 4px solid var(--rd-primary);
    cursor: pointer;
    transition: transform var(--rd-transition), box-shadow var(--rd-transition);
    position: relative;
    overflow: hidden;
}
.rd-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rd-shadow-md);
}
.rd-kpi-card--amber  { border-left-color: var(--rd-amber); }
.rd-kpi-card--jade   { border-left-color: var(--rd-jade); }
.rd-kpi-card--rose   { border-left-color: var(--rd-rose); }
.rd-kpi-card--violet { border-left-color: var(--rd-violet); }
.rd-kpi-card--pink   { border-left-color: var(--rd-pink); }
.rd-kpi-card--teal   { border-left-color: var(--rd-teal); }
.rd-kpi-card--sky    { border-left-color: var(--rd-sky); }

.rd-kpi-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rd-text-sec);
}
.rd-kpi-value {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
    font-size: 22px;
    color: var(--rd-text-primary);
    line-height: 1;
    margin: 4px 0 3px;
}
.rd-kpi-sub {
    font-size: 10px;
    color: var(--rd-muted);
}
.rd-kpi-hint {
    font-size: 9.5px;
    color: var(--rd-primary);
    font-weight: 600;
    margin-top: 4px;
}
.rd-kpi-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 22px;
    opacity: .10;
}

/* Chart Panels */
.rd-chart-panel {
    background: var(--rd-surface);
    border-radius: var(--rd-radius) !important;
    padding: 20px;
    box-shadow: var(--rd-shadow-sm);
    margin-bottom: 20px;
}
.rd-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-text-primary);
    margin-bottom: 4px;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}
.rd-chart-subtitle {
    font-size: 11.5px;
    color: var(--rd-muted);
    margin-bottom: 14px;
}
.rd-chart-canvas-wrap {
    position: relative;
    height: 270px;
}
.rd-chart-canvas-wrap.h-220 { height: 220px; }
.rd-chart-canvas-wrap.h-250 { height: 250px; }
.rd-chart-canvas-wrap.h-300 { height: 300px; }
.rd-chart-canvas-wrap.h-240 { height: 240px; }
.rd-chart-canvas-wrap.h-180 { height: 180px; }

/* Hint badge (top-right of panel) */
.rd-chart-hint {
    float: right;
    background: var(--rd-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px !important;
    opacity: .8;
    margin-top: 2px;
}

/* Two / Three column chart rows */
.rd-row {
    display: flex;
    gap: 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.rd-col-half    { flex: 1 1 calc(50% - 9px);     min-width: 280px; }
.rd-col-third   { flex: 1 1 calc(33.333% - 12px); min-width: 220px; }
.rd-col-quarter { flex: 1 1 0; min-width: 0; width: 25%; }
.rd-row--tight  { gap: 10px; }

/* Hiring Funnel */
.rd-funnel { padding: 8px 0; }
.rd-funnel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.rd-funnel-label {
    flex: 0 0 130px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rd-text-sec);
    text-align: right;
}
.rd-funnel-bar-wrap {
    flex: 1;
    background: var(--rd-border);
    border-radius: 6px !important;
    height: 26px;
    overflow: hidden;
}
.rd-funnel-bar {
    height: 100%;
    border-radius: 6px !important;
    background: var(--rd-primary);
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    transition: width .7s ease;
    white-space: nowrap;
    min-width: 36px;
}
.rd-funnel-count {
    flex: 0 0 48px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rd-text-primary);
    text-align: right;
}
.rd-funnel-pct {
    flex: 0 0 44px;
    font-size: 11px;
    color: var(--rd-muted);
    text-align: right;
}

/* Funnel colour variants */
.rd-funnel-bar.c-sky     { background: var(--rd-sky); }
.rd-funnel-bar.c-violet  { background: var(--rd-violet); }
.rd-funnel-bar.c-amber   { background: var(--rd-amber); }
.rd-funnel-bar.c-rose    { background: var(--rd-rose); }
.rd-funnel-bar.c-jade    { background: var(--rd-jade); }

/* Tables */
.rd-table-wrap {
    border-radius: var(--rd-radius-sm) !important;
    overflow-x: auto;
    border: 1px solid var(--rd-border);
    -webkit-overflow-scrolling: touch;
}
.rd-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 12.5px;
}
.rd-table thead th {
    background: var(--rd-primary);
    color: #fff;
    padding: 9px 13px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: .03em;
}
.rd-table tbody tr:nth-child(even) { background: #f8fafc; }
.rd-table tbody tr:hover { background: #eef4ff; cursor: default; }
.rd-table tbody td {
    padding: 8px 13px;
    border-bottom: 1px solid var(--rd-border);
    color: var(--rd-text-primary);
    vertical-align: middle;
}

/* Status Badges */
.rd-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 700;
    text-align:center;
}
/* Status badges  one per HRApplicationShortListingStatus value */
.rd-badge--hired      { background: #d1fae5; color: #065f46; }   /* ShortListed → Hired  */
.rd-badge--inprocess  { background: #dbeafe; color: #1e40af; }   /* InProcess            */
.rd-badge--rejected   { background: #ffe4e6; color: #9f1239; }   /* Rejected             */
.rd-badge--selected   { background: #ccfbf1; color: #0f766e; }   /* Selected             */
.rd-badge--warmreject { background: #ffedd5; color: #9a3412; }   /* WarmReject / On Hold */
.rd-badge--pending    { background: #fef9c3; color: #713f12; }   /* Pending (default)    */

/* ── Equal-height chart row pairs ───────────────────────────────── */
.rd-row                             { align-items: stretch !important; }
.rd-col-half,
.rd-col-third                       { display: flex !important; flex-direction: column !important; }
.rd-col-half  > .rd-chart-panel,
.rd-col-third > .rd-chart-panel     { flex: 1 !important; margin-bottom: 0 !important; }

/* ── Drill-down drawer content  (rd-dd-*) ───────────────────────── */

/* KPI stat grid — matches main dashboard card language */
.rd-dd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.rd-dd-stat {
    background: var(--rd-surface);
    border-radius: 10px !important;
    padding: 13px 10px 11px;
    text-align: center;
    cursor: default;
    border: 1px solid var(--rd-border);
    border-left: 4px solid var(--rd-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
}

.rd-dd-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Decorative circle watermark top-right */
.rd-dd-stat::after {
    content: '';
    position: absolute;
    top: -16px;
    right: -16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: currentColor;
    opacity: .06;
    pointer-events: none;
}

.rd-dd-stat span {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--rd-text-primary);
    line-height: 1.1;
    margin-bottom: 5px;
    letter-spacing: -.02em;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}

.rd-dd-stat label {
    font-size: 9px;
    color: var(--rd-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .06em;
    display: block;
    cursor: default;
    line-height: 1.3;
}

/* Colour variants — left border + number colour */
.rd-dd-stat--jade      { border-left-color: var(--rd-jade);   }
.rd-dd-stat--jade      span { color: var(--rd-jade)   !important; }
.rd-dd-stat--rose      { border-left-color: var(--rd-rose);   }
.rd-dd-stat--rose      span { color: var(--rd-rose)   !important; }
.rd-dd-stat--amber     { border-left-color: var(--rd-amber);  }
.rd-dd-stat--amber     span { color: var(--rd-amber)  !important; }
.rd-dd-stat--sky       { border-left-color: var(--rd-sky);    }
.rd-dd-stat--sky       span { color: var(--rd-sky)    !important; }
.rd-dd-stat--violet    { border-left-color: var(--rd-violet); }
.rd-dd-stat--violet    span { color: var(--rd-violet) !important; }
.rd-dd-stat--teal      { border-left-color: var(--rd-teal);   }
.rd-dd-stat--teal      span { color: var(--rd-teal)   !important; }
.rd-dd-stat--warmamber { border-left-color: #c2410c; }
.rd-dd-stat--warmamber span { color: #c2410c          !important; } /* WarmReject — burnt orange */

/* In-drawer search */
.rd-dd-search-wrap {
    position: relative;
    margin-bottom: 14px;
}
.rd-dd-search-wrap .fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rd-muted);
    font-size: 13px;
}
.rd-dd-search {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--rd-border);
    border-radius: 8px !important;
    font-size: 13px;
    outline: none;
    color: var(--rd-text-primary);
    background: #fff;
}
.rd-dd-search:focus {
    border-color: var(--rd-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Scrollable table wrapper inside drawer */
.rd-dd-table-wrap {
    max-height: calc(100vh - 290px);
    overflow-y: auto;
}

/* Opening Cards */
.rd-opening-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.rd-opening-card {
    border-radius: 12px !important;
    padding: 20px;
    color: #fff;
    cursor: pointer;
    transition: transform var(--rd-transition), box-shadow var(--rd-transition);
    position: relative;
    overflow: hidden;
}
.rd-opening-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rd-shadow-lg);
}
.rd-opening-card h4 {
    font-size: 12.5px;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600;
    opacity: .8;
    margin: 0;
}
.rd-opening-card .rd-oc-count {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
    font-size: 34px;
    margin: 6px 0 2px;
    line-height: 1;
}
.rd-opening-card .rd-oc-sub { font-size: 11px; opacity: .7; }
.rd-opening-card::after {
    content: attr(data-icon);
    position: absolute;
    bottom: -12px;
    right: -4px;
    font-size: 80px;
    opacity: .08;
    pointer-events: none;
}

/* Empty State */
.rd-empty-state {
    display: none;
    text-align: center;
    padding: 36px 20px;
    color: var(--rd-muted);
}
.rd-empty-state.is-visible { display: block; }
.rd-empty-state i { font-size: 38px; opacity: .35; display: block; margin-bottom: 10px; }
.rd-empty-state p { font-size: 13px; }

/* Loading spinner */
.rd-loading {
    text-align: center;
    padding: 30px;
    color: var(--rd-muted);
    font-size: 13px;
}

/* Section separator inside drill-down body */
.rd-section { margin-bottom: 24px; }
.rd-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-text-primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--rd-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rd-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--rd-primary);
    border-radius: 2px !important;
    display: block;
}

/* Scrollbar polish */
.rd-wrapper ::-webkit-scrollbar { width: 5px; height: 5px; }
.rd-wrapper ::-webkit-scrollbar-track { background: transparent; }
.rd-wrapper ::-webkit-scrollbar-thumb { background: #c7d0df; border-radius: 3px !important; }

/* rd-badge--selected and rd-badge--warmreject defined above with other badge variants */

/* Candidate Profile Drilldown */
.rd-cand-profile-card {
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    overflow: hidden;
    margin-bottom: 20px;
}
.rd-cpp-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--rd-border);
}
.rd-cpp-row:last-child { border-bottom: none; }
.rd-cpp-lbl {
    width: 110px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--rd-muted);
    padding-top: 2px;
}
.rd-cpp-val {
    flex: 1;
    font-size: 13px;
    color: var(--rd-text-primary);
    font-weight: 500;
    word-break: break-word;
}
.rd-cand-peers { margin-top: 4px; }
.rd-cand-peers-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rd-border);
}

/* Timeline: Back button + Journey trigger */
.rd-tl-back {
    background: none;
    border: 1px solid var(--rd-border);
    color: var(--rd-text-sec);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: var(--rd-radius-sm) !important;
    cursor: pointer;
    margin-bottom: 14px;
    transition: background var(--rd-transition);
    font-family: 'Manrope', sans-serif !important;
}
.rd-tl-back:hover { background: var(--rd-bg); }

.rd-tl-btn {
    background: none;
    border: 1px solid var(--rd-border);
    color: var(--rd-primary);
    font-size: 14px;
    padding: 2px 8px;
    border-radius: var(--rd-radius-sm) !important;
    cursor: pointer;
    line-height: 1.4;
    transition: background var(--rd-transition), border-color var(--rd-transition);
}
.rd-tl-btn:hover { background: var(--rd-primary-lt); border-color: var(--rd-primary); }

/* Timeline view toggle */
.rd-tl-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.rd-tl-toggle-btn {
    background: var(--rd-surface);
    border: 1px solid var(--rd-primary);
    color: var(--rd-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: var(--rd-radius-sm) !important;
   
    border-color: var(--rd-primary);
    font-family: 'Manrope', sans-serif !important;
}
.rd-tl-toggle-btn.is-active {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #fff;
}
.rd-tl-toggle-btn:not(.is-active):hover { background: var(--rd-bg); }

/* Rich journey timeline (rd-tlj) */
.rd-tlj { padding: 4px 0; }

.rd-tlj-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px !important;
    color: #fff;
    margin: 10px 0 8px;
}

.rd-tlj-item {
    display: flex;
    gap: 12px;
    position: relative;
}
.rd-tlj-item--iv {
    margin-left: 26px;
}

.rd-tlj-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}
.rd-tlj-dot {
    width: 14px;
    height: 14px;
    border-radius: 50% !important;
    flex-shrink: 0;
    margin-top: 5px;
    transition: box-shadow var(--rd-transition);
}
.rd-tlj-dot--sm {
    width: 10px;
    height: 10px;
    margin-top: 7px;
}
.rd-tlj-line {
    flex: 1;
    width: 2px;
    background: var(--rd-border);
    margin-top: 5px;
    min-height: 20px;
}

.rd-tlj-body {
    flex: 1;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm) !important;
    padding: 10px 14px;
    margin-bottom: 10px;
    min-width: 0;
}
.rd-tlj-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}
.rd-tlj-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-text-primary);
    line-height: 1.3;
}
.rd-tlj-time {
    font-size: 11px;
    color: var(--rd-muted);
    white-space: nowrap;
}
.rd-tlj-detail {
    font-size: 12px;
    color: var(--rd-text-sec);
    margin-top: 6px;
    line-height: 1.5;
    word-break: break-word;
}
.rd-tlj-detail b {
    color: var(--rd-text-primary);
    font-weight: 600;
}
.rd-tlj-score {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    padding: 1px 10px;
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* Section breakdown  clickable count cells */
.rd-sec-count {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 6px !important;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--rd-transition), opacity var(--rd-transition);
}
.rd-sec-count:hover         { background: #e2e8f0; opacity: .85; }
.rd-sec-count--jade         { color: var(--rd-jade);   }
.rd-sec-count--jade:hover   { background: #dcfce7; }
.rd-sec-count--teal         { color: var(--rd-teal);   }
.rd-sec-count--teal:hover   { background: #ccfbf1; }
.rd-sec-count--rose         { color: var(--rd-rose);   }
.rd-sec-count--rose:hover   { background: #fee2e2; }
.rd-sec-count--amber        { color: var(--rd-amber);  }
.rd-sec-count--amber:hover  { background: #fef3c7; }
.rd-sec-count--muted        { color: var(--rd-muted);  }
.rd-sec-count--muted:hover  { background: #f1f5f9; }
.rd-sec-count--sky          { color: var(--rd-sky);    }
.rd-sec-count--sky:hover    { background: var(--rd-sky-lt); }

/* Multi / Single application badges */
.rd-multi-btn {
    background: none;
    border: 1px solid var(--rd-primary);
    color: var(--rd-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--rd-transition), color var(--rd-transition);
}
.rd-multi-btn:hover {
    background: var(--rd-primary-lt);
    color: var(--rd-primary);
    border-color: var(--rd-primary);
}
.rd-single-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px !important;
    background: #f1f5f9;
    color: var(--rd-text-sec);
    white-space: nowrap;
}

/* Experience Detail button (per-candidate service record viewer) */
.rd-exp-dtl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--rd-primary);
    color: var(--rd-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--rd-transition), color var(--rd-transition);
}
.rd-exp-dtl-btn:hover {
    background: var(--rd-primary-lt);
    color: var(--rd-primary);
    border-color: var(--rd-primary);
}

/* Education Detail button (per-candidate education record viewer) */
.rd-edu-dtl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--rd-primary);
    color: var(--rd-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--rd-transition), color var(--rd-transition);
}
.rd-edu-dtl-btn:hover {
    background: var(--rd-primary-lt);
    color: var(--rd-primary);
    border-color: var(--rd-primary);
}

/* Drillable rows (education/experience band rows in Profile tab) */
.rd-drillable-row:hover {
    background: var(--rd-bg) !important;
    box-shadow: inset 0 0 0 1px var(--rd-border);
}
.rd-drillable-row { transition: background var(--rd-transition), box-shadow var(--rd-transition); }

/* sec-count used as violet variant (education level column)  */
.rd-sec-count--violet        { color: var(--rd-violet); }
.rd-sec-count--violet:hover  { background: #f5f3ff; }

/* School filter dropdown */
.rd-school-filter {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    color: var(--rd-text-sec);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px !important;
    cursor: pointer;
    outline: none;
    transition: border-color var(--rd-transition);
    max-width: 180px;
}
.rd-school-filter:focus { border-color: var(--rd-primary); }

/* Overview school strip cards */
.rd-ov-school-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 10px !important;
    padding: 10px 14px;
    min-width: 130px;
    cursor: pointer;
    transition: box-shadow var(--rd-transition), transform var(--rd-transition);
    flex: 1 1 130px;
}
.rd-ov-school-card:hover {
    box-shadow: var(--rd-shadow-md);
    transform: translateY(-2px);
    border-color: var(--rd-primary);
}
.rd-ov-school-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--rd-text-sec);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ov-school-total {
    font-size: 26px;
    font-weight: 800;
    color: var(--rd-text-primary);
    line-height: 1;
    margin-bottom: 6px;
}
.rd-ov-school-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rd-ov-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px !important;
    cursor: pointer;
    transition: opacity var(--rd-transition);
}
.rd-ov-chip:hover { opacity: .8; }
.rd-ov-chip--jade  { background: #dcfce7; color: #15803d; }
.rd-ov-chip--teal  { background: #ccfbf1; color: #0f766e; }
.rd-ov-chip--rose  { background: #ffe4e6; color: #9f1239; }
.rd-ov-chip--muted { background: #f1f5f9; color: #64748b; }
.rd-ov-chip--sky   { background: #dbeafe; color: #1d4ed8; }

/* Legacy timeline classes kept for compatibility */
.rd-timeline { padding: 4px 0; }
.rd-timeline-step { display: flex; gap: 14px; padding-bottom: 22px; }
.rd-timeline-step:last-child { padding-bottom: 0; }
.rd-timeline-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 22px; }
.rd-timeline-dot { width: 14px; height: 14px; border-radius: 50% !important; flex-shrink: 0; margin-top: 3px; }
.rd-timeline-line { flex: 1; width: 2px; background: var(--rd-border); margin-top: 5px; min-height: 16px; }
.rd-timeline-content { flex: 1; padding-bottom: 2px; }
.rd-timeline-stage { font-size: 13px; font-weight: 700; color: var(--rd-text-primary); }
.rd-timeline-date { font-size: 11px; color: var(--rd-muted); margin-top: 2px; }
.rd-timeline-score { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px !important; margin-top: 5px; }

/* Responsive Breakpoints */
@media (max-width: 1199px) {
    .rd-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
    .rd-kpi-grid { grid-template-columns: repeat(4, 1fr); }
    .rd-col-half,
    .rd-col-third { flex: 1 1 100%; }
    /* Tabs: slightly tighter on tablet */
    .rd-tab-btn  { padding: 6px 12px; font-size: 11.5px; gap: 5px; }
    .rd-tab-bar  { padding: 8px 16px; }
    /* Filter bar: tighter */
    .rd-fbar     { padding: 8px 14px; gap: 0; row-gap: 6px; }
    .rd-fg       { padding-right: 10px; }
    .rd-fb       { font-size: 11px; padding: 3px 10px; }
    .rd-fsel     { font-size: 11px; padding: 4px 8px; }
    .rd-fsearch  { width: 160px; }
}
@media (max-width: 767px) {
    .rd-body    { padding: 14px 12px 40px; }
    /* Filter bar: scroll horizontally on mobile */
    .rd-fbar    { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; row-gap: 0; gap: 0; }
    .rd-fbar::-webkit-scrollbar { display: none; }
    .rd-fg      { flex-shrink: 0; }
    .rd-fg--right { flex-shrink: 0; margin-left: 12px; }
    .rd-fbar-count { display: none; }
    .rd-fsearch { width: 140px; }
    .rd-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .rd-funnel-label { flex: 0 0 90px; font-size: 11px; }
    /* Tab bar: stack nav on top, AY pill below */
    .rd-tab-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        padding: 8px 12px 10px;
    }
    .rd-tab-nav {
        flex-wrap: wrap;          /* allow 2-row layout */
        overflow-x: visible;
        gap: 5px;
        justify-content: flex-start;
    }
    .rd-header-right {
        display: flex;
        justify-content: flex-end;
    }
    .rd-tab-btn {
        font-size: 11px;
        padding: 6px 11px;
        gap: 5px;
        flex: 0 0 auto;
    }
}
@media (max-width: 540px) {
    /* Tabs: exactly 4 per row (calc-based width) */
    .rd-tab-nav { justify-content: space-between; gap: 4px; }
    .rd-tab-btn {
        flex: 1 1 calc(25% - 4px);
        justify-content: center;
        font-size: 10.5px;
        padding: 6px 6px;
        gap: 4px;
    }
    .rd-tb-icon { font-size: 13px; }
}
@media (max-width: 400px) {
    /* Very small: icon + label stacked, 4-per-row */
    .rd-tab-btn {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        font-size: 9.5px;
        flex: 1 1 calc(25% - 3px);
    }
    .rd-tb-icon  { font-size: 16px; }
    .rd-tb-label { font-size: 9px; letter-spacing: 0; }
    .rd-ay-count { font-size: 12px; }
    .rd-ay-text  { font-size: 9px; }
}
@media (max-width: 480px) {
    .rd-kpi-grid { grid-template-columns: 1fr 1fr; }
    .rd-kpi-value { font-size: 18px; }
}

/* ════
   OPENINGS TAB v3  Enterprise Scalable Design  (AdminLTE-safe)
   Every layout-critical property uses !important to override resets.
   ════ */

/* KPI Strip  */
.rd-op-kpi-strip {
    display: -ms-grid         !important;
    display: grid             !important;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px                 !important;
    margin-bottom: 18px       !important;
}
.rd-op-kpi {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    gap: 0                !important;
    background: #ffffff   !important;
    border-radius: 12px   !important;
    padding: 0            !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04) !important;
    overflow: hidden       !important;
    cursor: default        !important;
    transition: box-shadow .18s ease, transform .18s ease !important;
    min-height: 80px       !important;
}
.rd-op-kpi:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
    transform: translateY(-2px) !important;
}
/* Coloured left accent stripe */
.rd-op-kpi-accent {
    width: 6px             !important;
    min-width: 6px         !important;
    align-self: stretch    !important;
    border-radius: 12px 0 0 12px !important;
    flex-shrink: 0         !important;
    display: block         !important;
}
.rd-op-kpi:nth-child(1) .rd-op-kpi-accent { background: var(--rd-primary) !important; }
.rd-op-kpi:nth-child(2) .rd-op-kpi-accent { background: var(--rd-jade)   !important; }
.rd-op-kpi:nth-child(3) .rd-op-kpi-accent { background: #94a3b8          !important; }
.rd-op-kpi:nth-child(4) .rd-op-kpi-accent { background: var(--rd-violet) !important; }
.rd-op-kpi:nth-child(5) .rd-op-kpi-accent { background: var(--rd-teal)   !important; }
.rd-op-kpi:nth-child(6) .rd-op-kpi-accent { background: var(--rd-amber)  !important; }

.rd-op-kpi-icon-wrap {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    width: 42px            !important;
    min-width: 42px        !important;
    padding: 0 4px         !important;
}
.rd-op-kpi-icon-wrap i.fa {
    font-size: 18px        !important;
    opacity: .45           !important;
}
.rd-op-kpi:nth-child(1) .rd-op-kpi-icon-wrap i.fa { color: var(--rd-primary) !important; }
.rd-op-kpi:nth-child(2) .rd-op-kpi-icon-wrap i.fa { color: var(--rd-jade)   !important; }
.rd-op-kpi:nth-child(3) .rd-op-kpi-icon-wrap i.fa { color: #94a3b8          !important; }
.rd-op-kpi:nth-child(4) .rd-op-kpi-icon-wrap i.fa { color: var(--rd-violet) !important; }
.rd-op-kpi:nth-child(5) .rd-op-kpi-icon-wrap i.fa { color: var(--rd-teal)   !important; }
.rd-op-kpi:nth-child(6) .rd-op-kpi-icon-wrap i.fa { color: var(--rd-amber)  !important; }

.rd-op-kpi-body {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    padding: 12px 14px 12px 0 !important;
    flex: 1               !important;
    min-width: 0          !important;
}
.rd-op-kpi-num {
    display: block         !important;
    font-size: 26px        !important;
    font-weight: 800       !important;
    line-height: 1         !important;
    color: #0f172a         !important;
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: -.5px !important;
    margin-bottom: 3px     !important;
}
.rd-op-kpi-lbl {
    display: block         !important;
    font-size: 10px        !important;
    font-weight: 700       !important;
    text-transform: uppercase !important;
    letter-spacing: .05em  !important;
    color: #94a3b8         !important;
    font-family: 'Manrope', sans-serif !important;
    white-space: nowrap    !important;
    overflow: hidden       !important;
    text-overflow: ellipsis !important;
}

/* Filter Bar */
.rd-op-filter-bar {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap       !important;
    gap: 10px             !important;
    background: #ffffff   !important;
    border-radius: 12px   !important;
    padding: 12px 18px    !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04) !important;
    margin-bottom: 16px   !important;
    position: sticky       !important;
    top: 50px              !important;
    z-index: 20            !important;
}
.rd-op-filter-left {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap       !important;
    gap: 8px              !important;
    flex: 1               !important;
    min-width: 0          !important;
}
.rd-op-filter-right {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    gap: 6px              !important;
    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0        !important;
}

/* Search input wrapper */
.rd-op-search-wrap {
    position: relative !important;
    flex: 1            !important;
    min-width: 180px   !important;
    max-width: 300px   !important;
}
.rd-op-search-wrap > i.fa {
    position: absolute !important;
    left: 11px         !important;
    top: 50%           !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    color: #94a3b8     !important;
    font-size: 12px    !important;
    pointer-events: none !important;
    z-index: 2         !important;
}
.rd-op-search {
    display: block     !important;
    width: 100%        !important;
    padding: 9px 12px 9px 33px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 12.5px  !important;
    color: #1e293b     !important;
    background: #f8fafc !important;
    transition: border-color .18s, box-shadow .18s !important;
    font-family: 'Manrope', sans-serif !important;
    line-height: 1.4   !important;
    box-shadow: none   !important;
}
.rd-op-search:focus {
    outline: none            !important;
    border-color: var(--rd-primary) !important;
    background: #fff         !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-primary) 14%, transparent) !important;
}
.rd-op-select {
    display: inline-block !important;
    padding: 8px 10px     !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px    !important;
    font-size: 12px       !important;
    color: #475569        !important;
    background: #f8fafc   !important;
    cursor: pointer       !important;
    font-family: 'Manrope', sans-serif !important;
    transition: border-color .18s !important;
    line-height: 1.4      !important;
    height: auto          !important;
}
.rd-op-select:focus { outline: none !important; border-color: var(--rd-primary) !important; }

.rd-op-clear-btn {
    display: inline-block  !important;
    padding: 8px 13px      !important;
    border: 1.5px solid #e11d48 !important;
    border-radius: 8px     !important;
    background: transparent !important;
    color: #e11d48         !important;
    font-size: 11.5px      !important;
    font-weight: 700       !important;
    cursor: pointer        !important;
    transition: background .16s !important;
    font-family: 'Manrope', sans-serif !important;
    white-space: nowrap    !important;
    line-height: 1.4       !important;
}
.rd-op-clear-btn:hover { background: #fff1f2 !important; }

.rd-op-result-count {
    display: inline-block !important;
    font-size: 11px       !important;
    color: var(--rd-primary)      !important;
    font-weight: 600      !important;
    white-space: nowrap   !important;
    background: var(--rd-primary-lt) !important;
    padding: 5px 12px     !important;
    border-radius: 999px  !important;
    font-family: 'Manrope', sans-serif !important;
}
.rd-op-view-btn {
    display: inline-block !important;
    width: 34px           !important;
    height: 34px          !important;
    line-height: 32px     !important;
    text-align: center    !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc   !important;
    border-radius: 8px    !important;
    font-size: 15px       !important;
    cursor: pointer       !important;
    color: #64748b        !important;
    transition: background .16s, border-color .16s, color .16s !important;
    font-family: 'Manrope', sans-serif !important;
    padding: 0            !important;
}
.rd-op-view-btn.is-active,
.rd-op-view-btn:hover {
    background: var(--rd-primary)   !important;
    border-color: var(--rd-primary) !important;
    color: #fff                     !important;
}

/* Analytics section */
.rd-op-analytics {
    display: -ms-grid     !important;
    display: grid         !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px             !important;
    margin-bottom: 18px   !important;
    -webkit-align-items: stretch !important;
    align-items: stretch  !important;
}
/* Top 10 row  spans full width */
.rd-op-analytics-full {
    grid-column: 1 / -1   !important;
}
/* Status + Outcome  each 50% */
.rd-op-analytics-half {
    min-width: 0          !important;
}
.rd-op-analytics .rd-chart-panel {
    margin-bottom: 0      !important;
    height: 100%          !important;
    box-sizing: border-box !important;
}
.rd-op-analytics-right {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    gap: 16px             !important;
    -webkit-flex: 1 1 calc(50% - 9px) !important;
    flex: 1 1 calc(50% - 9px) !important;
    min-width: 280px      !important;
}

/* Enterprise table */
.rd-op-table-panel {
    overflow: hidden !important;
    border-radius: 12px !important;
}
.rd-op-table-header {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
    padding: 15px 20px    !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #fff      !important;
}
.rd-op-page-info {
    font-size: 11px !important;
    color: #94a3b8  !important;
    font-family: 'Manrope', sans-serif !important;
}

.rd-ent-table { min-width: 700px !important; }
.rd-ent-table thead th {
    font-size: 11px       !important;
    letter-spacing: .04em !important;
    padding: 12px 14px    !important;
    white-space: nowrap   !important;
    font-weight: 700      !important;
}
.rd-ent-table tbody tr  { cursor: pointer !important; }
.rd-ent-table tbody tr:hover { background: #eef4ff !important; }
.rd-ent-table tbody td  { padding: 12px 14px !important; vertical-align: middle !important; }
.rd-ent-table tbody tr:nth-child(even) td { background: #fafbfd !important; }
.rd-ent-table tbody tr:hover td { background: #eef4ff !important; }

/* Row action button (appears on hover) */
.rd-row-action {
    opacity: 0            !important;
    transition: opacity .15s !important;
    background: var(--rd-primary) !important;
    border: none          !important;
    color: #fff           !important;
    padding: 5px 14px     !important;
    border-radius: 7px    !important;
    font-size: 12px       !important;
    font-weight: 700      !important;
    cursor: pointer       !important;
    font-family: 'Manrope', sans-serif !important;
    white-space: nowrap   !important;
}
.rd-ent-table tbody tr:hover .rd-row-action { opacity: 1 !important; }

/* Sort header button */
.rd-sort-hdr {
    background: none          !important;
    border: none              !important;
    color: rgba(255,255,255,.45) !important;
    font-size: 11px           !important;
    cursor: pointer           !important;
    padding: 0 3px            !important;
    font-family: 'Manrope', sans-serif !important;
    transition: color .15s    !important;
    vertical-align: middle    !important;
    line-height: 1            !important;
}
.rd-sort-hdr:hover         { color: #fff !important; }
.rd-sort-hdr.rd-sort-active { color: #fbbf24 !important; }

/* Status chips */
.rd-op-chip {
    display: -webkit-inline-flex !important;
    display: inline-flex   !important;
    -webkit-align-items: center !important;
    align-items: center    !important;
    gap: 4px               !important;
    padding: 4px 11px      !important;
    border-radius: 999px   !important;
    font-size: 11px        !important;
    font-weight: 700       !important;
    white-space: nowrap    !important;
    letter-spacing: .02em  !important;
    font-family: 'Manrope', sans-serif !important;
}
.rd-op-chip--open   { background: #f0fdf4 !important; color: #16a34a !important; }
.rd-op-chip--closed { background: #f3f4f6 !important; color: #6b7280 !important; }

/* Progress bar */
.rd-op-prog-wrap {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    gap: 8px              !important;
}
.rd-op-prog-bar {
    height: 6px           !important;
    background: #e2e8f0   !important;
    border-radius: 3px    !important;
    width: 80px           !important;
    overflow: hidden      !important;
    flex-shrink: 0        !important;
    display: block        !important;
}
.rd-op-prog-fill {
    height: 100%          !important;
    background: linear-gradient(90deg, var(--rd-primary), #0d9488) !important;
    border-radius: 3px    !important;
    transition: width .5s ease !important;
    display: block        !important;
}
.rd-op-prog-lbl {
    font-size: 11px       !important;
    color: #94a3b8        !important;
    font-weight: 600      !important;
    white-space: nowrap   !important;
    font-family: 'Manrope', sans-serif !important;
}

/* Pagination */
.rd-op-pagination {
    display: -webkit-flex !important;
    display: flex         !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
    padding: 13px 20px    !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px   !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap       !important;
    gap: 10px             !important;
    background: #ffffff   !important;
    margin-top: 6px       !important;
}
.rd-op-pag-info {
    font-size: 12px       !important;
    color: #64748b        !important;
    font-family: 'Manrope', sans-serif !important;
}
.rd-op-pag-btns {
    display: -webkit-flex !important;
    display: flex         !important;
    gap: 4px              !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap       !important;
    -webkit-align-items: center !important;
    align-items: center   !important;
}
.rd-op-pag-btn {
    display: inline-block !important;
    min-width: 34px       !important;
    height: 34px          !important;
    line-height: 32px     !important;
    text-align: center    !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff      !important;
    border-radius: 8px    !important;
    font-size: 12px       !important;
    color: #475569        !important;
    cursor: pointer       !important;
    transition: background .15s, border-color .15s, color .15s !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600      !important;
    padding: 0 10px       !important;
    white-space: nowrap   !important;
}
.rd-op-pag-btn:hover:not([disabled]) {
    background: var(--rd-primary-lt)  !important;
    border-color: var(--rd-primary)   !important;
    color: var(--rd-primary)          !important;
}
.rd-op-pag-btn.is-active {
    background: var(--rd-primary)     !important;
    border-color: var(--rd-primary)   !important;
    color: #fff                       !important;
}
.rd-op-pag-btn[disabled] { opacity: .35 !important; cursor: not-allowed !important; }
.rd-op-pag-sep {
    font-size: 13px       !important;
    color: #94a3b8        !important;
    line-height: 34px     !important;
    padding: 0 3px        !important;
    display: inline-block !important;
}

/* Skeleton shimmer */
.rd-skel {
    display: inline-block !important;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
    background-size: 400% 100% !important;
    -webkit-animation: rd-shimmer 1.5s ease infinite !important;
    animation: rd-shimmer 1.5s ease infinite !important;
    border-radius: 4px    !important;
}
@-webkit-keyframes rd-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
@keyframes rd-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
.rd-skel-row td { background: transparent !important; cursor: default !important; }

/* Grid card view (⊞ toggle) */
.rd-op-grid-view {
    display: -ms-grid     !important;
    display: grid         !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 14px             !important;
    margin-bottom: 16px   !important;
}
/* Hidden state  must override display:grid !important above */
.rd-op-grid-hidden {
    display: none         !important;
}
.rd-op-grid-card {
    display: block         !important;
    background: #fff       !important;
    border-radius: 12px    !important;
    padding: 18px          !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04) !important;
    border-left: 4px solid var(--rd-primary) !important;
    cursor: pointer        !important;
    transition: box-shadow .18s, transform .18s !important;
}
.rd-op-grid-card:hover     { box-shadow: 0 6px 20px rgba(0,0,0,.13), 0 0 0 1.5px var(--rd-primary) !important; transform: translateY(-2px) !important; }
.rd-op-grid-closed         { border-left-color: #94a3b8 !important; opacity: .8 !important; }
.rd-op-grid-title {
    font-size: 13px        !important;
    font-weight: 700       !important;
    color: #1e293b         !important;
    margin: 0 0 5px        !important;
    line-height: 1.4       !important;
    display: -webkit-box   !important;
    -webkit-line-clamp: 2  !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden       !important;
}
.rd-op-grid-meta  { font-size: 11px !important; color: #94a3b8 !important; margin-bottom: 12px !important; }
.rd-op-grid-stats {
    display: -webkit-flex !important;
    display: flex         !important;
    gap: 16px             !important;
    margin-bottom: 12px   !important;
}
.rd-op-grid-stat span  { display: block !important; font-size: 20px !important; font-weight: 800 !important; color: #1e293b !important; line-height: 1 !important; }
.rd-op-grid-stat label { display: block !important; font-size: 9.5px !important; text-transform: uppercase !important; font-weight: 700 !important; color: #94a3b8 !important; letter-spacing: .04em !important; margin-top: 2px !important; }

/* Responsive column hiding */
@media (max-width: 1100px) { .rd-ent-th-progress, .rd-ent-td-progress { display: none !important; } }
@media (max-width:  900px) { .rd-ent-th-pending,  .rd-ent-td-pending,
                              .rd-ent-th-date,     .rd-ent-td-date    { display: none !important; } }
@media (max-width:  680px) { .rd-ent-th-hired,    .rd-ent-td-hired   { display: none !important; } }

/* Responsive KPI strip */
@media (max-width: 1199px) {
    .rd-op-kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Tablet: stack bottom two charts to single column */
@media (max-width: 900px) {
    .rd-op-analytics { grid-template-columns: 1fr !important; }
    .rd-op-analytics-full,
    .rd-op-analytics-half { grid-column: 1 / -1 !important; }
}
@media (max-width: 767px) {
    .rd-op-kpi-strip    { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .rd-op-filter-bar   { position: static !important; padding: 10px 12px !important; }
    .rd-op-analytics    { display: none !important; }
    .rd-op-search-wrap  { max-width: 100% !important; min-width: 0 !important; }
    .rd-op-kpi-num      { font-size: 22px !important; }
    .rd-op-kpi          { min-height: 68px !important; }
}
@media (max-width: 480px) {
    .rd-op-kpi-strip    { grid-template-columns: 1fr 1fr !important; }
    .rd-op-pagination   { -webkit-flex-direction: column !important; flex-direction: column !important; -webkit-align-items: flex-start !important; align-items: flex-start !important; }
    .rd-op-filter-left  { gap: 6px !important; }
}

/* ══════
   STATUS PIPELINE  (.rd-spl)
   ══════ */

/* Summary strip  total + 6 mini chips */
.rd-spl-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rd-border);
}
.rd-spl-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--rd-primary);
    color: #fff;
    border-radius: var(--rd-radius-sm) !important;
    padding: 10px 18px;
    min-width: 90px;
}
.rd-spl-total-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}
.rd-spl-total-lbl {
    font-size: 10px;
    opacity: .7;
    margin-top: 3px;
    letter-spacing: .4px;
}
.rd-spl-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1.5px solid;
    border-radius: var(--rd-radius-sm) !important;
    padding: 8px 14px;
    min-width: 90px;
    flex: 1;
}
.rd-spl-chip-num {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.rd-spl-chip-lbl {
    font-size: 10px;
    color: var(--rd-text-sec);
    margin-top: 2px;
    text-align: center;
}
.rd-spl-chip-pct {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* Pipeline rows */
.rd-spl-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rd-spl-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: var(--rd-radius-sm) !important;
    border: 1px solid var(--rd-border);
    background: var(--rd-surface);
    cursor: pointer;
    transition: box-shadow var(--rd-transition), transform var(--rd-transition);
}
.rd-spl-row:hover {
    box-shadow: var(--rd-shadow-md);
    transform: translateX(3px);
}
.rd-spl-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 220px;
    flex-shrink: 0;
}
.rd-spl-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--rd-radius-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.rd-spl-row-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-text-primary);
}
.rd-spl-row-sub {
    font-size: 11px;
    color: var(--rd-muted);
    margin-top: 1px;
}
.rd-spl-row-bar-wrap {
    flex: 1;
    min-width: 0;
}
.rd-spl-row-bar-track {
    height: 10px;
    background: var(--rd-bg);
    border-radius: 999px !important;
    overflow: hidden;
}
.rd-spl-row-bar-fill {
    height: 100%;
    border-radius: 999px !important;
    transition: width .6s ease;
}
.rd-spl-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 70px;
    flex-shrink: 0;
}
.rd-spl-row-count {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}
.rd-spl-row-pct {
    font-size: 11px;
    color: var(--rd-muted);
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 640px) {
    .rd-spl-row { flex-wrap: wrap; gap: 10px; }
    .rd-spl-row-left { width: 100%; }
    .rd-spl-row-bar-wrap { width: 100%; order: 3; }
    .rd-spl-row-right { flex-direction: row; gap: 8px; align-items: center; width: auto; }
    .rd-spl-chip { min-width: 70px; }
}

/* ══════
   DONUT WIDGET  (.rd-dw)
   Layout: topbar chip / left-donut + right-bars / bottom-cards
   ══════ */
.rd-dw {
    display: flex;
    flex-direction: column;
    gap: 0;
    /*height: 100%;*/
}

/* Topbar  chip label */
.rd-dw-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 8px 0;
}
.rd-dw-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-text-sec);
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: 999px !important;
    padding: 2px 10px;
}

/* Body row: donut (left 50%) + bars (right 50%) */
.rd-dw-body {
    display: flex;
    align-items: center;
    /*gap: 16px;*/
    flex: 1;
}
.rd-dw-left {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
}

/* Canvas wrap  relative so center overlay positions correctly */
.rd-dw-canvas-wrap {
    position: relative;
    width: 220px;
    height: 220px;
}
.rd-dw-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Center overlay (number + sub-label) */
.rd-dw-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.rd-dw-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--rd-text-primary);
    line-height: 1;
}
.rd-dw-sub {
    font-size: 10px;
    color: var(--rd-muted);
    margin-top: 2px;
    letter-spacing: .3px;
}

/* Progress bars column  right 50% */
.rd-dw-bars {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
    max-width: 50%;
}
.rd-dw-bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rd-dw-bar-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-dw-bar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.rd-dw-bar-name {
    flex: 1;
    font-size: 12px;
    color: var(--rd-text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-dw-bar-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--rd-text-primary);
    min-width: 24px;
    flex-shrink: 0;
    text-align: right;
}
.rd-dw-bar-track {
    height: 6px;
    background: var(--rd-border);
    border-radius: 999px !important;
    overflow: hidden;
}
.rd-dw-bar-fill {
    height: 100%;
    border-radius: 999px !important;
    transition: width .5s ease;
}
.rd-dw-bar-pct {
    font-size: 11px;
    color: var(--rd-muted);
    text-align: right;
    line-height: 1;
}

/* Stat cards row at bottom */
.rd-dw-cards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rd-border);
}
.rd-dw-card {
    flex: 1;
    min-width: 80px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm) !important;
    padding: 7px 10px;
    text-align: center;
}
.rd-dw-card-lbl {
    font-size: 10px;
    color: var(--rd-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}
.rd-dw-card-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--rd-text-primary);
    line-height: 1.1;
}
.rd-dw-card-sub {
    font-size: 10px;
    color: var(--rd-muted);
    margin-top: 2px;
}

/* Compact modifier  used in gender chart columns */
.rd-col-quarter .rd-chart-panel { padding: 16px 14px; }
.rd-col-third   .rd-chart-panel { padding: 18px 16px; }
.rd-dw--compact .rd-dw-body     { /*gap: 14px;*/ }
.rd-dw-canvas-wrap--sm          { width: 140px !important; height: 140px !important; }
.rd-dw-num--sm                  { font-size: 22px !important; }

/* Responsive: stack body vertically on mobile */
@media (max-width: 540px) {
    .rd-dw-body {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .rd-dw-left {
        flex: 0 0 auto;
        width: auto;
    }
    .rd-dw-bars {
        flex: 0 0 auto;
        width: 100%;
    }
    .rd-dw-canvas-wrap {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto;
    }
    .rd-dw-bar-name {
        white-space: normal;
        word-break: break-word;
    }
}

/* Quarter-col responsive: stack to half at ≤ 900px, full at ≤ 600px */
@media (max-width: 900px) {
    .rd-col-quarter { flex: 1 1 calc(50% - 10px); width: 50%; }
}
@media (max-width: 600px) {
    .rd-col-quarter { flex: 1 1 100%; width: 100%; }
}

/* ═══
   MANAGE CANDIDATES CARD LAYOUT  (.hrc-)
   Exact design replica of manage-candidates reference UI
   All border-radius values use !important as required
   ═══ */

/* Design Tokens */
/* :root so fixed-position elements (drawer) inherit the same vars  */
.hrc-wrapper {
    --hrc-primary:       #1e6ff5;
    --hrc-primary-dk:    #1458c8;
    --hrc-primary-lt:    #e8f1ff;
    --hrc-primary-mid:   #c2d9ff;
    --hrc-primary-hl:    #3b8bff;   /* lighter gradient end-stop  overridden per skin */
    --hrc-teal:          #00b894;
    --hrc-teal-lt:       #d6f5ef;
    --hrc-teal-dk:       #007d66;
    --hrc-bg:            #f0f4fb;
    --hrc-surface:       #ffffff;
    --hrc-border:        #dbe4f0;
    --hrc-border-md:     #c4d2e8;
    --hrc-txt:           #0f1c2e;
    --hrc-txt-sec:       #4a5e78;
    --hrc-txt-hint:      #8da0b8;
    --hrc-hired-bg:      #d4f4e8; --hrc-hired-fg: #006845; --hrc-hired-bd: #7fdcc0;
    --hrc-pend-bg:       #fff4d6; --hrc-pend-fg:  #7a4800; --hrc-pend-bd: #ffd27a;
    --hrc-rev-bg:        #deeeff; --hrc-rev-fg:   #104d9e; --hrc-rev-bd:  #90beff;
    --hrc-rej-bg:        #ffe0e0; --hrc-rej-fg:   #8b1f1f; --hrc-rej-bd:  #ffaaaa;
    --hrc-shadow:        0 1px 4px rgba(15,28,46,.06), 0 4px 20px rgba(15,28,46,.07);
    --hrc-shadow-h:      0 4px 12px rgba(30,111,245,.12), 0 8px 32px rgba(30,111,245,.10);

    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    background: var(--hrc-bg);
    color: var(--hrc-txt);
    font-size: 14px;
    line-height: 1.55;
    /*padding: 20px 20px 48px;*/
    /*max-width: 1300px;*/
    width:100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.hrc-wrapper *, .hrc-wrapper *::before, .hrc-wrapper *::after {
    box-sizing: border-box;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
/* Restore Font Awesome glyphs inside hrc-wrapper */
.hrc-wrapper i.fa,
.hrc-wrapper i[class^="fa-"],
.hrc-wrapper i[class*=" fa-"],
.hrc-wrapper .fa:before,
.hrc-wrapper [class^="fa-"]:before,
.hrc-wrapper [class*=" fa-"]:before {
    font-family: FontAwesome !important;
}

/* Toolbar */
/* 3-row toolbar stack */
.hrc-toolbar-stack {
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: 16px !important;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    box-shadow: var(--hrc-shadow);
}
/* Each row */
.hrc-trow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
/* Row 1  badges only */
.hrc-trow-badges { gap: 8px; }
/* Row 2  action buttons, fills available width */
.hrc-trow-actions { gap: 6px; }
/* Row 3  search + pills */
.hrc-trow-search {
    gap: 10px;
    border-top: 1px solid var(--hrc-border);
    padding-top: 8px;
}

/* Quick-search wrapper (row 3 left) */
.hrc-qs-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.hrc-qs-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hrc-txt-hint);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.hrc-qs-wrap input[type="text"],
.hrc-qs-wrap input[type="search"] {
    width: 100% !important;
    padding-left: 32px !important;
    height: 34px !important;
    border: 1px solid var(--hrc-primary) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: var(--hrc-surface) !important;
    color: var(--hrc-txt) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s !important;
}
.hrc-qs-wrap input:focus {
    border-color: var(--hrc-primary-mid) !important;
    background: #fff !important;
}

/* ── Search-scope note (mirrors .mc-qs-note design) ────────────── */
.hrc-search-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--hrc-txt-hint);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--hrc-primary-lt);
    border: 1px solid var(--hrc-primary-mid);
    border-radius: 8px !important;
    cursor: default;
    height: 30px;
}
.hrc-search-note i.fa {
    font-family: FontAwesome !important;
    color: var(--hrc-primary);
    font-size: 12px;
    flex-shrink: 0;
}
.hrc-search-note strong { color: var(--hrc-txt-sec); font-weight: 600; }

/* On small screens collapse the note text — keep only the icon */
@media (max-width: 768px) {
    .hrc-search-note-text { display: none; }
    .hrc-search-note { padding: 4px 8px; border-radius: 50% !important; width: 28px; height: 28px; justify-content: center; }
}

/* Status filter pills (row 3 right) */
.hrc-status-pills {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.hrc-spill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 13px;
    border: 1.5px solid var(--hrc-primary) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--hrc-primary) !important;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit !important;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.5;
}
.hrc-spill i.fa { font-family: FontAwesome !important; font-size: 7px; }
.hrc-spill:hover {
    background: var(--hrc-primary-lt) !important;
    border-color: var(--hrc-primary) !important;
    color: var(--hrc-primary) !important;
}
/* Active state  solid blue */
.hrc-spill.active {
    background: var(--hrc-primary) !important;
    border-color: var(--hrc-primary) !important;
    color: #fff !important;
}
/* Per-status: colored border + dot in default state; solid fill when active */
.hrc-spill[data-filter="hired"]:not(.active)    { border-color: #16a34a !important; color: #16a34a !important; }
.hrc-spill[data-filter="hired"].active           { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }

.hrc-spill[data-filter="inprocess"]:not(.active) { border-color: #2563eb !important; color: #2563eb !important; }
.hrc-spill[data-filter="inprocess"].active        { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }

.hrc-spill[data-filter="pending"]:not(.active)   { border-color: #d97706 !important; color: #d97706 !important; }
.hrc-spill[data-filter="pending"].active          { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }

.hrc-spill[data-filter="rejected"]:not(.active)  { border-color: #dc2626 !important; color: #dc2626 !important; }
.hrc-spill[data-filter="rejected"].active         { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }

.hrc-spill[data-filter="noapp"]:not(.active)     { border-color: #64748b !important; color: #64748b !important; }
.hrc-spill[data-filter="noapp"].active            { background: #64748b !important; border-color: #64748b !important; color: #fff !important; }

.hrc-spill[data-filter="selected"]:not(.active)  { border-color: #065f46 !important; color: #065f46 !important; }
.hrc-spill[data-filter="selected"].active         { background: #065f46 !important; border-color: #065f46 !important; color: #fff !important; }

.hrc-spill[data-filter="warmreject"]:not(.active) { border-color: #ea580c !important; color: #ea580c !important; }
.hrc-spill[data-filter="warmreject"].active        { background: #ea580c !important; border-color: #ea580c !important; color: #fff !important; }

.hrc-spill[data-filter="waitlisted"]:not(.active) { border-color: #e11d48 !important; color: #e11d48 !important; }
.hrc-spill[data-filter="waitlisted"].active        { background: #1e6ff5 !important; border-color: #1e6ff5 !important; color: #fff !important; }

/* Ensure dot icon inherits pill text color */
.hrc-spill i.fa { color: inherit !important; }

/* legacy single-row toolbar (keep for empty-state block) */
.hrc-toolbar {
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: 16px !important;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    box-shadow: var(--hrc-shadow);
}

/* Toolbar badges */
.hrc-badge-primary {
    background: var(--hrc-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hrc-badge-count {
    background: var(--hrc-primary-lt);
    color: var(--hrc-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--hrc-primary-mid);
}

/* Toolbar buttons — colored outline (primary border + icon, transparent bg) */
.hrc-tbtn {
    border: 1.5px solid var(--hrc-primary) !important;
    border-radius: 8px !important;
    padding: 5px 11px;
    min-height: 30px;
    background: transparent !important;
    color: var(--hrc-primary) !important;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.4;
}
.hrc-tbtn:hover,
.hrc-tbtn:focus {
    background: var(--hrc-primary-lt) !important;
    border-color: var(--hrc-primary) !important;
    color: var(--hrc-primary) !important;
    box-shadow: 0 2px 8px rgba(30,111,245,.15);
    text-decoration: none !important;
}
.hrc-tbtn:active {
    background: var(--hrc-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.hrc-tbtn i.fa { font-size: 13px; font-family: FontAwesome !important; }

/* dropdown inside toolbar  keep existing AdminLTE dropdown behaviour */
.hrc-toolbar .dropdown-menu,
.hrc-toolbar-dropdown {
    border: 1px solid var(--hrc-border-md) !important;
    border-radius: 8px !important;
    z-index: 9999;
    min-width: 160px;
    box-shadow: 0 6px 20px rgba(15,28,46,.10) !important;
    padding: 4px !important;
    background: var(--hrc-surface) !important;
    font-family: inherit !important;
}
.hrc-toolbar .dropdown-menu li a,
.hrc-toolbar-dropdown li a {
    font-size: 13px;
    font-family: inherit !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    color: var(--hrc-txt) !important;
    padding: 6px 10px !important;
    display: block;
    transition: background .13s, color .13s;
}
.hrc-toolbar .dropdown-menu li a:hover,
.hrc-toolbar-dropdown li a:hover {
    background: var(--hrc-primary-lt) !important;
    color: var(--hrc-primary) !important;
    text-decoration: none !important;
}
.hrc-toolbar-dropdown li a.ActiveSorting {
    background: var(--hrc-primary-lt) !important;
    color: var(--hrc-primary) !important;
    font-weight: 600 !important;
}

/* Toolbar spacer */
.hrc-sep { flex: 1; min-width: 4px; }

/* Quick search wrapper */
.hrc-search-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
}
.hrc-search-lbl {
    font-size: 12px;
    color: var(--hrc-txt-hint);
    white-space: nowrap;
    font-weight: 500;
}
/* Style the inner input that DataFilterTextbox renders */
.hrc-search-wrap input[type="text"],
.hrc-search-wrap input[type="search"] {
    border: 1.5px solid var(--hrc-border) !important;
    border-radius: 8px !important;
    padding: 6px 12px 6px 30px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    width: 210px !important;
    background: var(--hrc-bg) !important;
    color: var(--hrc-txt) !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-shadow: none !important;
}
.hrc-search-wrap input[type="text"]:focus,
.hrc-search-wrap input[type="search"]:focus {
    border-color: var(--hrc-primary) !important;
    box-shadow: 0 0 0 3px rgba(30,111,245,.12) !important;
}
.hrc-search-wrap .input-group,
.hrc-search-wrap .input-group-addon { border: none !important; background: none !important; }

/* Cards 2-column grid */
.jsCandidateListContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* Candidate Card */
.hrc-candidate-card {
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: 16px !important;
    margin-bottom: 0;
    box-shadow: var(--hrc-shadow);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    animation: hrc-fadeUp .3s ease both;
    display: flex;
    flex-direction: column;
}
.hrc-candidate-card:hover {
    box-shadow: var(--hrc-shadow-h);
    transform: translateY(-1px);
}
/* Top accent gradient stripe */
.hrc-candidate-card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--hrc-primary), var(--hrc-teal));
}

/* Card Header */
.hrc-card-header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--hrc-border);
    background: #fafcff;
}
.hrc-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Number circle */
.hrc-num-circle {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    background: var(--hrc-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(30,111,245,.3);
}

/* Candidate name / gender */
.hrc-cname {
    font-size: 14px;
    font-weight: 700;
    color: var(--hrc-txt);
    display: flex;
    align-items: center;
    gap: 5px;
}
.hrc-cgender {
    font-size: 12px;
    color: var(--hrc-txt-sec);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Card actions row (right side of header) */
.hrc-card-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* Icon buttons */
.hrc-icon-btn {
    width: 30px;
    height: 28px;
    border: 1.5px solid var(--hrc-primary) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--hrc-primary) !important;
    font-family: inherit !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, box-shadow .15s;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
.hrc-icon-btn:hover,
.hrc-icon-btn:focus {
    background: var(--hrc-primary-lt) !important;
    border-color: var(--hrc-primary) !important;
    color: var(--hrc-primary) !important;
    box-shadow: 0 2px 8px rgba(30,111,245,.15);
    text-decoration: none !important;
}
.hrc-icon-btn:active {
    background: var(--hrc-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.hrc-icon-btn i.fa { font-family: FontAwesome !important; }

/* Days pill */
.hrc-days-pill {
   display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0px 8px;
    border-radius: 8px !important;
    background: #fff8e1;
    color: #7c5700;
    border: 1px solid #ffe082 !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    height:30px;
}

/* Card Body */
.hrc-card-body { padding: 14px 16px; flex: 1; }

/* Card Footer */
.hrc-card-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--hrc-border);
    background: #fafcff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* View Applications button */
.hrc-view-apps-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    justify-content: center;
    padding: 8px 18px;
    background: transparent !important;
    color: var(--hrc-primary) !important;
    border: 1.5px solid var(--hrc-primary) !important;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit !important;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
    box-shadow: none;
    text-decoration: none !important;
    line-height: 1.4;
}
.hrc-view-apps-btn:hover,
.hrc-view-apps-btn:focus {
    background: var(--hrc-primary-lt) !important;
    color: var(--hrc-primary) !important;
    border-color: var(--hrc-primary-mid) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}
.hrc-view-apps-btn i.fa { font-family: FontAwesome !important; }
.hrc-view-apps-count {
    background: var(--hrc-primary-lt);
    color: var(--hrc-primary);
    border-radius: 12px !important;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
}

/* No-applications footer label */
.hrc-view-apps-none {
    color: var(--hrc-txt-hint);
    font-size: 12.5px;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hrc-view-apps-none i.fa { font-family: FontAwesome !important; }

/* Waitlist tag */
.hrc-waitlist-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hrc-teal-lt);
    color: var(--hrc-teal-dk);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px !important;
    margin-bottom: 12px;
    border: 1px solid #a0e8d8;
}

/* Profile row (avatar + details) */
.hrc-profile-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Avatar — themed circle with initials fallback */
.hrc-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50% !important;
    background: var(--hrc-primary-lt);
    border: 2.5px solid var(--hrc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 0 0 4px var(--hrc-primary-mid);
}
.hrc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hrc-avatar-txt {
    font-size: 22px;
    font-weight: 700;
    color: var(--hrc-primary);
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Profile details */
.hrc-profile-details { flex: 1; min-width: 0; }

/* Info grid */
.hrc-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px 18px;
    margin-bottom: 12px;
    width: 100%;
    min-width: 0;
}
.hrc-info-grid > div { min-width: 0; overflow: hidden; }
.hrc-info-label {
    font-size: 10.5px;
    color: var(--hrc-txt-hint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1px;
}
.hrc-info-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--hrc-txt);
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Divider */
.hrc-divider {
    border: none !important;
    border-top: 1px solid var(--hrc-border) !important;
    margin: 2px 0 12px !important;
}

/* Table wrap */
.hrc-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px !important;
    border: 1px solid var(--hrc-border);
    box-sizing: border-box;
}
.hrc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px;
    font-size: 13px;
}
.hrc-table thead tr {
    background: var(--hrc-primary);
}
.hrc-table thead th {
    padding: 8px 11px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: none;
    white-space: nowrap;
    background: transparent !important;
    color: #fff !important;
}
.hrc-table tbody td {
    padding: 8px 11px;
    border-bottom: 1px solid var(--hrc-border);
    color: var(--hrc-txt);
    vertical-align: middle;
}
.hrc-table tbody tr:last-child td { border-bottom: none; }
.hrc-table tbody tr:hover { background: #f5f9ff; }

/* Mono font for app numbers */
.hrc-mono {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 12px;
    color: var(--hrc-primary);
    font-weight: 600;
}

/* Status pills */
.hrc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px !important;
    white-space: nowrap;
    border: 1px solid transparent;
}
.hrc-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50% !important;
    background: currentColor;
    opacity: .7;
    flex-shrink: 0;
}
.hrc-pill-hired      { background: var(--hrc-hired-bg); color: var(--hrc-hired-fg); border-color: var(--hrc-hired-bd); }
.hrc-pill-pending    { background: var(--hrc-pend-bg);  color: var(--hrc-pend-fg);  border-color: var(--hrc-pend-bd); }
.hrc-pill-review     { background: var(--hrc-rev-bg);   color: var(--hrc-rev-fg);   border-color: var(--hrc-rev-bd); }
.hrc-pill-rejected   { background: var(--hrc-rej-bg);   color: var(--hrc-rej-fg);   border-color: var(--hrc-rej-bd); }
/* Selected  teal/cyan */
.hrc-pill-selected   { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
/* Warm Reject  orange */
.hrc-pill-warmreject { background: #fff7ed; color: #9a3412; border-color: #fdba74; }

/* No application alert */
.hrc-no-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 10px !important;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    margin: 4px 0;
}
.hrc-no-app-icon {
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    background: #fee2e2;
    border: 1.5px solid #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
}
.hrc-no-app-icon i.fa { font-family: FontAwesome !important; color: #ef4444; font-size: 12px; }

/* Staggered card animation */
@keyframes hrc-fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hrc-candidate-card:nth-child(1) { animation-delay: .04s; }
.hrc-candidate-card:nth-child(2) { animation-delay: .09s; }
.hrc-candidate-card:nth-child(3) { animation-delay: .14s; }
.hrc-candidate-card:nth-child(4) { animation-delay: .19s; }
.hrc-candidate-card:nth-child(5) { animation-delay: .24s; }
.hrc-candidate-card:nth-child(6) { animation-delay: .29s; }

/* Action dropdown button */
.hrc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    background: transparent !important;
    color: var(--hrc-primary) !important;
    border: 1px solid var(--hrc-primary) !important;
    border-radius: 6px !important;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit !important;
    cursor: pointer;
    transition: background .18s, color .18s;
    white-space: nowrap;
    line-height: 1.5;
    vertical-align: middle;
}
.hrc-action-btn:hover,
.hrc-action-btn:focus { background: var(--hrc-primary-lt) !important; color: var(--hrc-primary) !important; outline: none; border-color: var(--hrc-primary-mid) !important; }
.hrc-action-btn i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* Action dropdown menu */
.hrc-action-dropdown {
    padding: 5px !important;
    margin: 0 !important;
    border: 1px solid var(--hrc-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15,28,46,.13), 0 2px 6px rgba(15,28,46,.07) !important;
    background: #fff !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: 240px !important;
    float: none !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    overflow: hidden !important;
}
/* Section divider li */
.hrc-action-dropdown li.divider {
    margin: 4px 0 !important;
    background: var(--hrc-border) !important;
    height: 1px !important;
}
/* Every action item */
.hrc-action-dropdown li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--hrc-txt) !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .14s, color .14s !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
.hrc-action-dropdown li > a:hover {
    background: var(--hrc-primary-lt, #eef3fe) !important;
    color: var(--hrc-primary, #1e6ff5) !important;
}
/* Icon inside each item */
.hrc-action-dropdown li > a i.fa {
    font-family: FontAwesome !important;
    font-size: 12px !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    opacity: .75;
}
.hrc-action-dropdown li > a:hover i.fa { opacity: 1; }

/* Danger-tinted items (Reject) */
.hrc-action-dropdown li.hrc-item-danger > a { color: #dc2626 !important; }
.hrc-action-dropdown li.hrc-item-danger > a:hover { background: #fff1f1 !important; color: #b91c1c !important; }
.hrc-action-dropdown li.hrc-item-danger > a i.fa { color: #dc2626 !important; }

/* ═══
   MC MODALS
   ═══ */

/* Override Bootstrap modal backdrop */
.hrc-modal.modal { font-family: 'Manrope', system-ui, sans-serif !important; }

/* Modal dialog sizing */
.hrc-modal .modal-dialog,
.hrc-modal-dialog {
    margin: 40px auto;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15,28,46,.22), 0 4px 16px rgba(15,28,46,.10) !important;
}
.hrc-modal .modal-content {
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* Modal header base */
.hrc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--hrc-primary-dk) 0%, var(--hrc-primary) 55%, var(--hrc-primary-hl) 100%);
    color: #fff;
    border-bottom: none !important;
    min-height: 58px;
}
/* Danger header  red gradient */
.hrc-modal-header-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%);
}
/* Warning header  amber gradient */
.hrc-modal-header-warning {
    background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
}

.hrc-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
    line-height: 1.3;
}
.hrc-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px !important;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.hrc-modal-header-actions { display: flex; align-items: center; gap: 6px; }
.hrc-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0 !important;
    line-height: 1;
    flex-shrink: 0;
}
.hrc-modal-close:hover { background: rgba(255,255,255,.34) !important; }
.hrc-modal-close i.fa { font-family: FontAwesome !important; }
.hrc-modal-close-refresh { background: rgba(255,255,255,.28) !important; }

/* Modal body */
.hrc-modal-body {
    padding: 20px 22px;
    background: #fff;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}
/* Large report modal: taller body */
#Report_Modal .hrc-modal-body {
    min-height: 200px;
    max-height: calc(100vh - 160px);
}

/* Info card (Candidate Name + App Number summary) */
.hrc-modal-info-card {
    background: var(--hrc-bg, #f0f4ff);
    border: 1px solid var(--hrc-border, #e2e8f0);
    border-radius: 10px !important;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hrc-modal-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.hrc-modal-info-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hrc-txt-sec, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.hrc-modal-info-label i.fa { font-family: FontAwesome !important; opacity: .7; }
.hrc-modal-info-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hrc-txt, #1e293b);
    text-align: right;
}

/* Form fields */
.hrc-modal-field {
    margin-bottom: 16px;
}
.hrc-modal-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrc-txt-sec, #475569);
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.hrc-required { color: #dc2626; margin-left: 2px; }
.hrc-modal-select,
.hrc-modal-textarea {
    width: 100% !important;
    border: 1px solid var(--hrc-border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    color: var(--hrc-txt, #1e293b) !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-shadow: none !important;
    resize: vertical;
}
.hrc-modal-select:focus,
.hrc-modal-textarea:focus {
    border-color: var(--hrc-primary, #1e6ff5) !important;
    box-shadow: 0 0 0 3px rgba(30,111,245,.10) !important;
}
.hrc-field-error {
    font-size: 11.5px;
    color: #dc2626;
    margin-top: 4px;
    display: none;
}
.hrc-field-error:not(:empty) { display: block; }

/* Modal footer */
.hrc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: var(--hrc-bg, #f8fafc);
    border-top: 1px solid var(--hrc-border, #e2e8f0) !important;
}

/* Modal action buttons */
.hrc-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px !important;
    border: none !important;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', system-ui, sans-serif !important;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    line-height: 1.4;
}
.hrc-modal-btn i.fa { font-family: FontAwesome !important; font-size: 12px; }

/* Primary  blue */
.hrc-modal-btn-primary {
    background: var(--hrc-primary, #1e6ff5) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(30,111,245,.30);
}
.hrc-modal-btn-primary:hover { background: var(--hrc-primary-dk, #1458c8) !important; box-shadow: 0 4px 12px rgba(30,111,245,.40); }

/* Danger  red */
.hrc-modal-btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(220,38,38,.28);
}
.hrc-modal-btn-danger:hover { background: #b91c1c !important; box-shadow: 0 4px 12px rgba(220,38,38,.38); }

/* Cancel  neutral */
.hrc-modal-btn-cancel {
    background: var(--hrc-surface, #fff) !important;
    color: var(--hrc-txt-sec, #64748b) !important;
    border: 1px solid var(--hrc-border, #e2e8f0) !important;
    box-shadow: none;
}
.hrc-modal-btn-cancel:hover {
    background: var(--hrc-bg, #f0f4ff) !important;
    color: var(--hrc-txt, #1e293b) !important;
    border-color: var(--hrc-border-md, #cbd5e1) !important;
}

/* Font Awesome icon restore inside modals */
.hrc-modal i.fa,
.hrc-modal i[class^="fa-"],
.hrc-modal i[class*=" fa-"] { font-family: FontAwesome !important; }

/* Mobile responsive */
@media (max-width: 576px) {
    .hrc-modal .modal-dialog,
    .hrc-modal-dialog  { margin: 10px; width: auto; }
    .hrc-modal-footer  { flex-direction: column-reverse; align-items: stretch; }
    .hrc-modal-btn     { justify-content: center; width: 100%; }
    .hrc-modal-info-row { flex-direction: column; align-items: flex-start; }
    .hrc-modal-info-value { text-align: left; }
}

/* Per-table pagination */
.hrc-tbl-pg {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 2px 2px;
}
.hrc-tbl-pg-info {
    font-size: 11.5px;
    color: var(--hrc-txt-hint);
    margin-right: auto;
    white-space: nowrap;
}
.hrc-tbl-pg-btn {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid var(--hrc-border-md);
    border-radius: 6px !important;
    background: transparent;
    color: var(--hrc-txt-sec);
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit !important;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hrc-tbl-pg-btn:hover { background: var(--hrc-primary-lt); color: var(--hrc-primary); border-color: var(--hrc-primary); }
.hrc-tbl-pg-btn.active { background: var(--hrc-primary); color: #fff !important; border-color: var(--hrc-primary); }
.hrc-tbl-pg-btn:disabled { opacity: .38; cursor: default; pointer-events: none; }
.hrc-tbl-pg-btn i.fa { font-family: FontAwesome !important; font-size: 10px; }

/* Page header */
.hrc-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--hrc-primary) 0%, var(--hrc-primary-hl) 100%);
    border-radius: 16px !important;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 4px 18px rgba(30,111,245,.22);
}
.hrc-page-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px !important;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.hrc-page-header-icon i.fa { font-family: FontAwesome !important; color: #fff; }
.hrc-page-header-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.hrc-page-header-sub { font-size: 11.5px; opacity: .78; margin-top: 2px; }

/* Empty-state banner */
.hrc-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--hrc-txt-hint);
    font-size: 14px;
}
.hrc-empty-state i.fa { font-size: 48px; display: block; margin-bottom: 12px; opacity: .4; }

/* ═══
   LAYOUT SWITCHER  (A · B · C)
   ═══ */

/* Profile column wrapper (transparent in C, column in B) */
.hrc-card-profile-col { min-width: 0; }

/* Inline table section  hidden by default (Layout C)  */
.hrc-card-table-section { display: none; }

/*
   LAYOUT A  single-column list, table stacked below profile
   */
.jsCandidateListContainer.layout-a {
    grid-template-columns: 1fr !important;
    gap: 14px;
}
.jsCandidateListContainer.layout-a .hrc-card-table-section {
    display: block;
    padding: 0 16px 14px;
}
.jsCandidateListContainer.layout-a .hrc-card-table-section::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--hrc-border);
    margin: 0 0 12px;
}
.jsCandidateListContainer.layout-a .hrc-card-footer { display: none !important; }

/*
   LAYOUT C  2-col grid, drawer on click (default, minimal overrides)
   */
.jsCandidateListContainer.layout-c {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Layout toggle buttons */
.hrc-layout-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--hrc-bg);
    border: 1px solid var(--hrc-border);
    border-radius: 8px !important;
    padding: 2px;
    flex-shrink: 0;
}
.hrc-layout-btn {
    width: 30px;
    height: 26px;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--hrc-txt-hint) !important;
    font-size: 13px;
    font-family: inherit !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, color .14s;
    padding: 0 !important;
    line-height: 1;
    position: relative;
}
.hrc-layout-btn:hover {
    background: var(--hrc-primary-lt) !important;
    color: var(--hrc-primary) !important;
}
.hrc-layout-btn.active {
    background: var(--hrc-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(30,111,245,.30);
}
.hrc-layout-btn i.fa { font-family: FontAwesome !important; }

/* Bootstrap modal must always sit above the drawer (z 9991) */
/* Without this, modals opened from inside the drawer render behind it */
.modal            { z-index: 99995 !important; }
.modal-backdrop   { z-index: 99994 !important; }

/* ── FIX: jQuery UI Datepicker + Select2 must render ABOVE the modal   ──
   Raising modal z-index to 99995 pushed these plugin popups behind the
   backdrop (default z: ~1000–1051).  Force them above 99995.
   Both plugins append their popup to <body> so overflow:hidden on the
   modal body does NOT clip them — only the z-index matters here.       */

/* jQuery UI Datepicker calendar */
#ui-datepicker-div,
.ui-datepicker { z-index: 999999 !important; }

/* Select2 v4 */
.select2-container--open { z-index: 999999 !important; }
.select2-dropdown         { z-index: 999999 !important; }

/* Select2 v3 */
.select2-drop,
.select2-drop-active,
.select2-drop-mask        { z-index: 999999 !important; }

/* Application Drawer (right slide-in panel) */
.hrc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,28,46,.42);
    z-index: 9990;
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.hrc-drawer-backdrop.is-open {
    display: block;
    opacity: 1;
}

.hrc-drawer {
    position: fixed;
    top: 0;
    right: -50vw;
    width: 50vw;
    max-width: 100vw;
    height: 100vh;
    background: var(--hrc-surface);
    box-shadow: -6px 0 48px rgba(15,28,46,.20);
    z-index: 9991;
    display: flex;
    flex-direction: column;
    transition: right .32s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.hrc-drawer.is-open { right: 0; }

/* Restore FA inside drawer */
.hrc-drawer i.fa,
.hrc-drawer i[class^="fa-"],
.hrc-drawer i[class*=" fa-"],
.hrc-drawer .fa:before,
.hrc-drawer [class^="fa-"]:before,
.hrc-drawer [class*=" fa-"]:before {
    font-family: FontAwesome !important;
}

/* Top accent stripe */
.hrc-drawer::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--hrc-primary), var(--hrc-teal));
    flex-shrink: 0;
}

/* Header */
.hrc-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--hrc-primary-dk) 0%, var(--hrc-primary) 55%, var(--hrc-primary-hl) 100%);
    color: #fff;
    flex-shrink: 0;
}
.hrc-drawer-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hrc-drawer-count-badge {
    background: rgba(255,255,255,.22);
    border-radius: 12px !important;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.hrc-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
    line-height: 1;
    padding: 0 !important;
}
.hrc-drawer-close:hover { background: rgba(255,255,255,.30) !important; }

/* Candidate name sub-line below title */
.hrc-drawer-cname {
    width: 100%;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .80;
    margin-top: -4px;
    letter-spacing: .01em;
}

/* Body */
.hrc-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px 28px;
    background: var(--hrc-bg);
}
.hrc-drawer-body::-webkit-scrollbar { width: 5px; }
.hrc-drawer-body::-webkit-scrollbar-track { background: transparent; }
.hrc-drawer-body::-webkit-scrollbar-thumb { background: #c7d0df; border-radius: 3px !important; }

/* Table wrapper inside drawer gets a white card lift */
.hrc-drawer-body .hrc-table-wrap {
    background: var(--hrc-surface);
    border-radius: 10px !important;
    box-shadow: var(--hrc-shadow);
    border: 1px solid var(--hrc-border);
}
.hrc-drawer-body .hrc-tbl-pg { padding: 10px 4px 2px; }

/*
   RESPONSIVE BREAKPOINTS
   */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    /*.hrc-wrapper      { padding: 16px 14px 36px; }*/
    .hrc-info-grid    { grid-template-columns: repeat(2, 1fr); gap: 7px 14px; }
    .hrc-search-wrap input[type="text"],
    .hrc-search-wrap input[type="search"] { width: 180px !important; }
}

/* Drawer — tablet & mobile (≤ 992px) → full width */
@media (max-width: 992px) {
    .hrc-drawer { width: 100vw; right: -100vw; }
    .hrc-drawer.is-open { right: 0; }
    .hrc-drawer-body { padding: 14px 14px 24px; }
}

/* Mobile (≤ 768px)  every layout becomes single-column */
@media (max-width: 768px) {
    /*.hrc-wrapper      { padding: 12px 10px 28px; }*/
    .hrc-toolbar, .hrc-toolbar-stack { padding: 9px 10px; gap: 6px; }
    .hrc-trow-search  { flex-direction: column; align-items: stretch; }
    .hrc-status-pills { justify-content: flex-start; }
    .hrc-sep          { display: none; }
    .hrc-search-wrap  { width: 100%; order: 99; }
    .hrc-search-lbl   { display: none; }
    .hrc-search-wrap input[type="text"],
    .hrc-search-wrap input[type="search"] { width: 100% !important; flex: 1 !important; }

    /* Force 1-column for ALL layout variants  needs !important to beat the
       higher-specificity layout-a / layout-c class selectors */
    .jsCandidateListContainer,
    .jsCandidateListContainer.layout-a,
    .jsCandidateListContainer.layout-c { grid-template-columns: 1fr !important; gap: 12px !important; }

    .hrc-card-header  { padding: 9px 12px; }
    .hrc-card-body    { padding: 11px 12px; flex: 1; }
    .hrc-card-footer  { padding: 8px 12px; }
    .hrc-info-grid    { grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
    .hrc-avatar       { width: 54px; height: 54px; font-size: 15px; }
    .hrc-days-pill    { font-size: 11px; padding: 3px 8px; }
    .hrc-num-circle   { width: 26px; height: 26px; font-size: 11px; }
    .hrc-table thead th, .hrc-table tbody td { padding: 7px 8px; font-size: 12px; }

}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
    .hrc-card-header  { flex-direction: column; align-items: flex-start; gap: 7px; }
    .hrc-card-actions { width: 100%; justify-content: flex-start; gap: 4px; }
    .hrc-profile-row  { flex-direction: column; gap: 10px; }
    .hrc-profile-details { width: 100%; min-width: 0; overflow: hidden; }
    .hrc-avatar       { width: 52px; height: 52px; font-size: 14px; }
    .hrc-info-grid    { grid-template-columns: 1fr 1fr; gap: 5px 8px; }
    .hrc-card-body    { padding: 10px 10px; }
    .hrc-card-header  { padding: 9px 10px; }
    .hrc-table-wrap   { margin-left: -10px; margin-right: -10px; border-radius: 0 !important; border-left: none; border-right: none; }
    .hrc-table        { min-width: 480px; }
    .hrc-table thead th, .hrc-table tbody td { padding: 6px 7px; font-size: 11px; }
    .hrc-mono         { font-size: 10.5px; }
    .hrc-badge-primary, .hrc-badge-count { font-size: 11px; padding: 4px 10px; }
    .hrc-tbtn         { font-size: 11px; padding: 4px 7px; }
}

/* Very Small (≤ 360px) */
@media (max-width: 360px) {
    .hrc-info-grid    { grid-template-columns: 1fr; }
    .hrc-icon-btn     { width: 26px; height: 25px; }
    .hrc-days-pill    { font-size: 10px; padding: 3px 7px; }
    .hrc-table-wrap   { margin-left: -10px; margin-right: -10px; border-radius: 0 !important; border-left: none; border-right: none; }
    .hrc-table        { min-width: 380px; }
    .hrc-table thead th, .hrc-table tbody td { padding: 5px 5px; font-size: 10.5px; }
}

/* ═══
   SKIN-AWARE OVERRIDES  (v3.0)
   Override --hrc-primary family variables to match the active
   AdminLTE skin class on <body>.  Everything downstream that uses
   var(--hrc-primary*) or var(--hrc-primary-hl) will automatically
   adopt the skin colour  toolbar, cards, badges, pills, drawer
   header, modal headers, pagination buttons, etc.

   Colour reference:
     skin-blue   #3c8dbc / #367fa9        (AdminLTE default)
     skin-purple #605ca8 / #555299
     skin-green  #00a65a / #008d4c
     skin-red    #dd4b39 / #c23321
     skin-yellow #f39c12 / #e08e0b
     skin-black  #444444 / #222222
   ═══ */

/* skin-blue (AdminLTE default) */
/* Variables are set on body (cascades to all children) and also
   explicitly on .hrc-wrapper to beat any :root specificity.
   NOTE: body.skin-* :root is invalid (root is body's ancestor),
   so we target body itself + the wrapper.                         */
body.skin-blue,
body.skin-blue .hrc-wrapper,
body.skin-blue-light,
body.skin-blue-light .hrc-wrapper {
    --hrc-primary:     #3c8dbc;
    --hrc-primary-dk:  #367fa9;
    --hrc-primary-hl:  #6db3d9;
    --hrc-primary-lt:  #e0f2fb;
    --hrc-primary-mid: #a8d8ef;
    --hrc-shadow-h:    0 4px 12px rgba(60,141,188,.14), 0 8px 32px rgba(60,141,188,.10);
}

/* skin-purple */
body.skin-purple,
body.skin-purple .hrc-wrapper,
body.skin-purple-light,
body.skin-purple-light .hrc-wrapper {
    --hrc-primary:     #605ca8;
    --hrc-primary-dk:  #555299;
    --hrc-primary-hl:  #9b98d6;
    --hrc-primary-lt:  #ede9fe;
    --hrc-primary-mid: #c4b5fd;
    --hrc-shadow-h:    0 4px 12px rgba(96,92,168,.14), 0 8px 32px rgba(96,92,168,.10);
}

/* skin-green */
body.skin-green,
body.skin-green .hrc-wrapper,
body.skin-green-light,
body.skin-green-light .hrc-wrapper {
    --hrc-primary:     #00a65a;
    --hrc-primary-dk:  #008d4c;
    --hrc-primary-hl:  #26cc7a;
    --hrc-primary-lt:  #d1fae5;
    --hrc-primary-mid: #6ee7b7;
    --hrc-shadow-h:    0 4px 12px rgba(0,166,90,.14), 0 8px 32px rgba(0,166,90,.10);
}

/* skin-red */
body.skin-red,
body.skin-red .hrc-wrapper,
body.skin-red-light,
body.skin-red-light .hrc-wrapper {
    --hrc-primary:     #dd4b39;
    --hrc-primary-dk:  #c23321;
    --hrc-primary-hl:  #f07868;
    --hrc-primary-lt:  #fee2e2;
    --hrc-primary-mid: #fca5a5;
    --hrc-shadow-h:    0 4px 12px rgba(221,75,57,.14), 0 8px 32px rgba(221,75,57,.10);
}

/* skin-yellow */
body.skin-yellow,
body.skin-yellow .hrc-wrapper,
body.skin-yellow-light,
body.skin-yellow-light .hrc-wrapper {
    --hrc-primary:     #f39c12;
    --hrc-primary-dk:  #e08e0b;
    --hrc-primary-hl:  #f8bc56;
    --hrc-primary-lt:  #fef3c7;
    --hrc-primary-mid: #fcd34d;
    --hrc-shadow-h:    0 4px 12px rgba(243,156,18,.14), 0 8px 32px rgba(243,156,18,.10);
}

/* skin-black */
body.skin-black,
body.skin-black .hrc-wrapper,
body.skin-black-light,
body.skin-black-light .hrc-wrapper {
    --hrc-primary:     #444444;
    --hrc-primary-dk:  #222222;
    --hrc-primary-hl:  #888888;
    --hrc-primary-lt:  #f1f5f9;
    --hrc-primary-mid: #94a3b8;
    --hrc-shadow-h:    0 4px 12px rgba(68,68,68,.14), 0 8px 32px rgba(68,68,68,.10);
}

/* Per-skin: spill active dot colour follows the primary */
/* These target the status-filter pills active background.          */
/* The data-filter specific active colours stay as-is (semantic);   */
/* only the generic "all" pill adapts to the skin.                  */
body.skin-blue   .hrc-spill[data-filter="all"].active,
body.skin-blue-light .hrc-spill[data-filter="all"].active  { background: #3c8dbc !important; }
body.skin-purple .hrc-spill[data-filter="all"].active,
body.skin-purple-light .hrc-spill[data-filter="all"].active { background: #605ca8 !important; }
body.skin-green  .hrc-spill[data-filter="all"].active,
body.skin-green-light .hrc-spill[data-filter="all"].active  { background: #00a65a !important; }
body.skin-red    .hrc-spill[data-filter="all"].active,
body.skin-red-light .hrc-spill[data-filter="all"].active    { background: #dd4b39 !important; }
body.skin-yellow .hrc-spill[data-filter="all"].active,
body.skin-yellow-light .hrc-spill[data-filter="all"].active { background: #f39c12 !important; }
body.skin-black  .hrc-spill[data-filter="all"].active,
body.skin-black-light .hrc-spill[data-filter="all"].active  { background: #444444 !important; }

/* Per-skin: hrc-badge-primary adapts */
body.skin-blue   .hrc-badge-primary,
body.skin-blue-light .hrc-badge-primary   { background: linear-gradient(135deg, #367fa9, #3c8dbc) !important; }
body.skin-purple .hrc-badge-primary,
body.skin-purple-light .hrc-badge-primary { background: linear-gradient(135deg, #555299, #605ca8) !important; }
body.skin-green  .hrc-badge-primary,
body.skin-green-light .hrc-badge-primary  { background: linear-gradient(135deg, #008d4c, #00a65a) !important; }
body.skin-red    .hrc-badge-primary,
body.skin-red-light .hrc-badge-primary    { background: linear-gradient(135deg, #c23321, #dd4b39) !important; }
body.skin-yellow .hrc-badge-primary,
body.skin-yellow-light .hrc-badge-primary { background: linear-gradient(135deg, #e08e0b, #f39c12) !important; }
body.skin-black  .hrc-badge-primary,
body.skin-black-light .hrc-badge-primary  { background: linear-gradient(135deg, #222222, #444444) !important; }

/* ═══
   DASHBOARD SKIN OVERRIDES  (rd- variables)
   Override the skin-aware interactive tokens introduced in v3.0:
     --rd-primary        → interactive/theme colour
     --rd-primary-lt     → light tint of primary
     --rd-header-bg      → dashboard sticky-header gradient
     --rd-header-shadow  → header drop-shadow
     --rd-tab-active-bg  → active tab button gradient
     --rd-tab-active-shad→ active tab glow shadow colour
     --rd-tab-hover-shad → tab hover glow shadow colour
   NOTE: body.skin-* targets body (cascades to all descendants).
   ═══ */

/* skin-blue (AdminLTE steel-blue) */
body.skin-blue,
body.skin-blue .rd-wrapper,
body.skin-blue-light,
body.skin-blue-light .rd-wrapper {
    --rd-primary:          #3c8dbc;
    --rd-primary-lt:       #d6eaf8;
    --rd-header-bg:        linear-gradient(135deg, #1a5276 0%, #2e86c1 50%, #1a6ea8 100%);
    --rd-header-shadow:    0 6px 24px rgba(26,82,118,.50), 0 1px 0 rgba(255,255,255,.10);
    --rd-tab-hover-shad:   rgba(46,134,193,.45);
}

/* skin-purple */
body.skin-purple,
body.skin-purple .rd-wrapper,
body.skin-purple-light,
body.skin-purple-light .rd-wrapper {
    --rd-primary:          #605ca8;
    --rd-primary-lt:       #ede9fe;
    --rd-header-bg:        linear-gradient(135deg, #3d2885 0%, #5a48c0 50%, #4935a8 100%);
    --rd-header-shadow:    0 6px 24px rgba(61,40,133,.50), 0 1px 0 rgba(255,255,255,.10);
    --rd-tab-hover-shad:   rgba(90,72,192,.45);
}

/* skin-green */
body.skin-green,
body.skin-green .rd-wrapper,
body.skin-green-light,
body.skin-green-light .rd-wrapper {
    --rd-primary:          #00a65a;
    --rd-primary-lt:       #d1fae5;
    --rd-header-bg:        linear-gradient(135deg, #0a6e3c 0%, #0d9455 50%, #0a7a46 100%);
    --rd-header-shadow:    0 6px 24px rgba(10,110,60,.50), 0 1px 0 rgba(255,255,255,.10);
    --rd-tab-hover-shad:   rgba(13,148,85,.45);
}

/* skin-red */
body.skin-red,
body.skin-red .rd-wrapper,
body.skin-red-light,
body.skin-red-light .rd-wrapper {
    --rd-primary:          #dd4b39;
    --rd-primary-lt:       #fee2e2;
    --rd-header-bg:        linear-gradient(135deg, #922b21 0%, #c0392b 50%, #a93226 100%);
    --rd-header-shadow:    0 6px 24px rgba(146,43,33,.55), 0 1px 0 rgba(255,255,255,.10);
    --rd-tab-hover-shad:   rgba(192,57,43,.45);
}

/* skin-yellow */
/* Header uses deep amber; active tab text will be the amber primary */
body.skin-yellow,
body.skin-yellow .rd-wrapper,
body.skin-yellow-light,
body.skin-yellow-light .rd-wrapper {
    --rd-primary:          #d68910;   /* slightly darker amber for contrast on white bg */
    --rd-primary-lt:       #fef3c7;
    --rd-header-bg:        linear-gradient(135deg, #7e5009 0%, #b7770d 50%, #9a6a0a 100%);
    --rd-header-shadow:    0 6px 24px rgba(126,80,9,.55), 0 1px 0 rgba(255,255,255,.10);
    --rd-tab-hover-shad:   rgba(183,119,13,.45);
}

/* skin-black */
body.skin-black,
body.skin-black .rd-wrapper,
body.skin-black-light,
body.skin-black-light .rd-wrapper {
    --rd-primary:          #555555;
    --rd-primary-lt:       #f1f5f9;
    --rd-header-bg:        linear-gradient(135deg, #2c2c2c 0%, #444444 50%, #383838 100%);
    --rd-header-shadow:    0 6px 24px rgba(0,0,0,.60), 0 1px 0 rgba(255,255,255,.08);
    --rd-tab-hover-shad:   rgba(68,68,68,.50);
}

/* ════════════════════════════════════════════════════════════════════
   CANDIDATE SHORTLISTING TIMELINE — TIME JOURNEY  (hrc-tl-*)
   Mirrors the Sales Funnel Details Report design (sfd-* / sft-*)
   Used by: ShortlistingTimelineCandidateWise.cshtml
   All border-radius values use !important as required
   ════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper — self-contained tokens (popup renders outside
      .hrc-wrapper, so the needed --hrc-* vars are re-declared here) ── */
.hrc-tl-wrapper {
    --hrc-primary:     #1e6ff5;
    --hrc-primary-dk:  #1458c8;
    --hrc-primary-lt:  #e8f1ff;
    --hrc-bg:          #f0f4fb;
    --hrc-surface:     #ffffff;
    --hrc-border:      #dbe4f0;
    --hrc-txt:         #0f1c2e;
    --hrc-txt-sec:     #4a5e78;

    font-family:   'Manrope', system-ui, -apple-system, sans-serif;
    background:    var(--hrc-bg);
    border-radius: 10px !important;
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,.08);
    font-size:     13px;
    color:         var(--hrc-txt);
}
.hrc-tl-wrapper *, .hrc-tl-wrapper *::before, .hrc-tl-wrapper *::after {
    box-sizing:  border-box;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
/* Restore Font Awesome glyphs inside the wrapper */
.hrc-tl-wrapper i.fa,
.hrc-tl-wrapper i[class^="fa-"],
.hrc-tl-wrapper i[class*=" fa-"],
.hrc-tl-wrapper .fa:before,
.hrc-tl-wrapper [class^="fa-"]:before,
.hrc-tl-wrapper [class*=" fa-"]:before {
    font-family: FontAwesome !important;
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.hrc-tl-tab-bar {
    display:       flex;
    align-items:   stretch;
    list-style:    none;
    margin:        0;
    padding:       0 16px;
    background:    var(--hrc-surface);
    border-bottom: 2px solid rgba(0,0,0,.08);
    gap:           0;
    flex-wrap:     wrap;
}
.hrc-tl-tab-item { display: flex; align-items: stretch; }
.hrc-tl-tab {
    display:         flex;
    align-items:     center;
    gap:             5px;
    padding:         11px 18px;
    font-size:       13px;
    font-weight:     600;
    color:           #666;
    text-decoration: none !important;
    border-bottom:   3px solid transparent;
    margin-bottom:   -2px;
    transition:      color .18s, border-color .18s;
    white-space:     nowrap;
    cursor:          pointer;
    background:      none;
    border-top:      none;
    border-left:     none;
    border-right:    none;
}
.hrc-tl-tab:hover                      { color: var(--hrc-primary); }
.hrc-tl-tab-item.active .hrc-tl-tab    { color: var(--hrc-primary); border-bottom-color: var(--hrc-primary); }
.hrc-tl-tab-tools {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-left: auto;
    padding:     6px 0;
    flex-wrap:   wrap;
}

/* Search input used inside the tab tools (DataFilterTextbox) */
.hrc-tl-search {
    height:        28px;
    width:         180px;
    padding:       3px 10px;
    font-size:     12px;
    border:        1px solid var(--hrc-border);
    border-radius: 14px !important;
    background:    var(--hrc-surface);
    color:         var(--hrc-txt);
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
}
.hrc-tl-search:focus {
    border-color: var(--hrc-primary);
    box-shadow:   0 0 0 3px var(--hrc-primary-lt);
}

/* ── Tab content scroll ──────────────────────────────────────── */
.hrc-tl-tab-content {
    height:     120mm;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Candidate profile card ──────────────────────────────────── */
.hrc-tl-profile {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       12px 16px;
    background:    var(--hrc-surface);
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.hrc-tl-avatar {
    width:         48px;
    height:        48px;
    border-radius: 50% !important;
    border:        2px solid #d2d6de;
    object-fit:    cover;
    flex-shrink:   0;
}
.hrc-tl-profile-info { display: flex; flex-direction: column; gap: 3px; }
.hrc-tl-profile-name { font-size: 14px; font-weight: 700; color: #1a3c5e; }
.hrc-tl-profile-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hrc-tl-meta-item    { font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; }

/* ── Feed container — left gutter houses the line + nodes ────── */
.hrc-tl-feed {
    position:   relative;
    padding:    6px 12px 24px 56px;
    background: var(--hrc-bg);
}
.hrc-tl-feed::before {
    content:    '';
    position:   absolute;
    left:       35px;
    top:        0;
    bottom:     0;
    width:      2px;
    background: #dde3ec;
    z-index:    0;
}

/* ── Stage / section label pill (floats on the line) ─────────── */
.hrc-tl-stage {
    position:    relative;
    display:     flex;
    align-items: center;
    margin:      16px 0 8px -38px;
    z-index:     2;
}
.hrc-tl-stage-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        5px 16px 5px 10px;
    border-radius:  50px !important;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color:          #fff;
    white-space:    nowrap;
    box-shadow:     0 2px 10px rgba(0,0,0,.20);
}
.hrc-tl-stage-pill i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* Stage pill colour variants */
.hrc-tl-stage-alert   { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); }
.hrc-tl-stage-new     { background: linear-gradient(135deg, #047857 0%, #059669 100%); }
.hrc-tl-stage-warm    { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.hrc-tl-stage-hot     { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
.hrc-tl-stage-cold    { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }
.hrc-tl-stage-admit   { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.hrc-tl-stage-default { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }

/* ── Timeline entry: circle node + card ──────────────────────── */
.hrc-tl-entry {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    position:    relative;
    margin:      0 0 8px -38px;
    z-index:     1;
}
.hrc-tl-node {
    width:           36px;
    height:          36px;
    border-radius:   50% !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    color:           #fff;
    flex-shrink:     0;
    background:      #0e7490;
    border:          2.5px solid #fff;
    box-shadow:      0 2px 8px rgba(0,0,0,.20);
    position:        relative;
    z-index:         2;
}
.hrc-tl-node i.fa { font-family: FontAwesome !important; }

/* Node colour variants */
.hrc-tl-node-app       { background: #0369a1; }
.hrc-tl-node-stage     { background: #d97706; }
.hrc-tl-node-interview { background: #1d4ed8; }
.hrc-tl-node-key       { background: #be123c; }
.hrc-tl-node-points    { background: #6d28d9; }
.hrc-tl-node-remark    { background: #b45309; }
.hrc-tl-node-status    { background: #0e7490; }

/* ── Card ────────────────────────────────────────────────────── */
.hrc-tl-card {
    flex:          1;
    background:    var(--hrc-surface);
    border-radius: 10px !important;
    box-shadow:    0 1px 3px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.05);
    overflow:      hidden;
    min-width:     0;
    transition:    box-shadow .15s;
}
.hrc-tl-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.12); }

/* Card header row */
.hrc-tl-card-hdr {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     9px 14px;
    flex-wrap:   wrap;
}
.hrc-tl-card-title {
    font-size:   13px;
    font-weight: 600;
    color:       #1e293b;
    min-width:   0;
    flex-shrink: 1;
}

/* Type / status badge chips */
.hrc-tl-type-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       2px 10px;
    border-radius: 50px !important;
    font-size:     11px;
    font-weight:   600;
    white-space:   nowrap;
    flex-shrink:   0;
}
.hrc-tl-type-badge i.fa { font-family: FontAwesome !important; }

.hrc-tl-badge-info    { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.hrc-tl-badge-success { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.hrc-tl-badge-warn    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.hrc-tl-badge-danger  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Right-side meta: date · time · days pill */
.hrc-tl-card-meta {
    display:         flex;
    align-items:     center;
    gap:             6px;
    margin-left:     auto;
    font-size:       11.5px;
    color:           #64748b;
    white-space:     nowrap;
    flex-shrink:     0;
    flex-wrap:       wrap;
    justify-content: flex-end;
}
.hrc-tl-days-pill {
    background:    #f1f5f9;
    color:         #475569;
    padding:       2px 8px;
    border-radius: 8px !important;
    font-size:     11px;
    font-weight:   700;
}
.hrc-tl-date-chip { font-size: 11px; color: #888; white-space: nowrap; }

/* ── Card body (content shown below header) ──────────────────── */
.hrc-tl-card-body {
    padding:     7px 14px 10px;
    font-size:   12.5px;
    color:       #374151;
    border-top:  1px solid #f1f5f9;
    background:  #fafbfd;
    line-height: 1.5;
}
.hrc-tl-card-body:empty { display: none; }

/* Placeholder / empty text */
.hrc-tl-empty-text {
    color:      #94a3b8;
    font-style: italic;
    font-size:  12px;
}

/* Final points chip — amber outline pill */
.hrc-tl-points-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 12px;
    border-radius: 50px !important;
    font-size:     12px;
    font-weight:   700;
    background:    #fffbeb;
    color:         #b45309;
    border:        1px solid #f0ad4e;
    white-space:   nowrap;
}

/* ── "End of timeline" footer ────────────────────────────────── */
.hrc-tl-end {
    display:         flex;
    align-items:     center;
    gap:             8px;
    justify-content: center;
    padding:         10px 0 4px;
    font-size:       11px;
    color:           #94a3b8;
    margin-left:     -38px;
}
.hrc-tl-end::before,
.hrc-tl-end::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: #dde3ec;
}
.hrc-tl-end i.fa { font-family: FontAwesome !important; }

/* ── Details tab header ──────────────────────────────────────── */
.hrc-tl-detail-hdr {
    background: linear-gradient(135deg, var(--hrc-primary-dk, #1458c8) 0%, var(--hrc-primary, #1e6ff5) 100%);
    color:      #fff;
    padding:    10px 14px;
}
.hrc-tl-detail-hdr-row {
    font-size:     12px;
    margin-bottom: 3px;
    display:       flex;
    align-items:   center;
    gap:           5px;
}
.hrc-tl-detail-hdr-row:last-child { margin-bottom: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hrc-tl-tab-bar        { padding: 0 8px; }
    .hrc-tl-tab            { padding: 9px 12px; font-size: 12px; }
    .hrc-tl-tab-tools      { margin-left: 0; width: 100%; padding: 4px 0; }
    .hrc-tl-profile        { flex-wrap: wrap; }
    .hrc-tl-feed           { padding-left: 46px; }
    .hrc-tl-feed::before   { left: 26px; }
    .hrc-tl-stage,
    .hrc-tl-entry          { margin-left: -28px; }
    .hrc-tl-node           { width: 30px; height: 30px; font-size: 12px; }
    .hrc-tl-card-hdr       { padding: 8px 10px; gap: 6px; }
    .hrc-tl-card-meta      { font-size: 10.5px; }
    .hrc-tl-days-pill      { font-size: 10px; padding: 1px 6px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
    .hrc-tl-tab-content    { height: auto !important; overflow: visible !important; }
    .hrc-tl-tab-bar        { display: none !important; }
    .hrc-tl-wrapper        { box-shadow: none !important; }
    .hrc-tl-stage-pill,
    .hrc-tl-node,
    .hrc-tl-type-badge,
    .hrc-tl-days-pill,
    .hrc-tl-points-chip,
    .hrc-tl-detail-hdr {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust:         exact !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   JOB APPLICANT EDIT PAGE   (.hrc-edit-)
   Used by: JobApplicantBasicEdit.cshtml
   Prefix: hrc-edit-   All border-radius values carry !important
   ════════════════════════════════════════════════════════════════════ */

/* ── Outer card wrapper ── */
.hrc-edit-wrap {
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: 16px !important;
    box-shadow: var(--hrc-shadow);
    overflow: hidden;
    font-family: 'Manrope', system-ui, sans-serif;
}

/* ── Gradient page header ── */
.hrc-edit-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--hrc-primary) 0%, var(--hrc-primary-hl) 100%);
    color: #fff;
}
.hrc-edit-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px !important;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.hrc-edit-header-icon i.fa { font-family: FontAwesome !important; }
.hrc-edit-header-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}
.hrc-edit-header-sub {
    font-size: 12px;
    opacity: .80;
    margin-top: 2px;
    color: #fff;
}

/* ── Tab nav strip ── */
.hrc-edit-tabs-wrap {
    background: var(--hrc-bg);
    border-bottom: 2px solid var(--hrc-border);
    padding: 10px 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hrc-edit-tabs-wrap::-webkit-scrollbar { display: none; }

/* Reset Bootstrap nav-tabs on the list */
.hrc-edit-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Each tab <li> */
.hrc-edit-tab {
    flex-shrink: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    float: none !important;
}

/* Tab <a> — outline style matching hrc-tbtn */
.hrc-edit-tab > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px 9px !important;
    border: 1.5px solid var(--hrc-primary) !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    background: transparent !important;
    color: var(--hrc-primary) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    outline: none !important;
}
.hrc-edit-tab > a:hover,
.hrc-edit-tab > a:focus {
    background: var(--hrc-primary-lt) !important;
    color: var(--hrc-primary) !important;
    text-decoration: none !important;
    outline: none !important;
}
.hrc-edit-tab > a i.fa {
    font-family: FontAwesome !important;
    font-size: 12px !important;
}

/* Active tab — filled primary */
.hrc-edit-tab.active > a,
.hrc-edit-tab.active > a:hover,
.hrc-edit-tab.active > a:focus {
    background: var(--hrc-primary) !important;
    color: #fff !important;
    border-color: var(--hrc-primary) !important;
    border-bottom-color: var(--hrc-primary) !important;
    text-decoration: none !important;
}

/* ── Tab content area ── */
.hrc-edit-content {
    background: var(--hrc-surface);
    padding: 20px 22px;
}
.hrc-edit-content > .tab-content {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.hrc-edit-pane {
    padding: 4px 0;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .hrc-edit-header           { padding: 12px 14px; gap: 10px; }
    .hrc-edit-header-icon      { width: 38px; height: 38px; font-size: 17px; }
    .hrc-edit-header-title     { font-size: 13.5px; }
    .hrc-edit-header-sub       { display: none; }
    .hrc-edit-tabs-wrap        { padding: 8px 10px 0; }
    .hrc-edit-tab > a          { padding: 6px 10px 8px !important; font-size: 12px !important; gap: 4px !important; }
    .hrc-edit-tab > a span     { display: none; }   /* icon-only on mobile */
    .hrc-edit-tab > a i.fa     { font-size: 13px !important; }
    .hrc-edit-content          { padding: 12px 14px; }
}
@media (max-width: 480px) {
    .hrc-edit-header           { padding: 10px 12px; }
    .hrc-edit-content          { padding: 10px 10px; }
}

/* ████████████████████████████████████████████████████████████████████
   PARTITION 1A — EMPLOYEE CARD LAYOUT
   ████████████████████████████████████████████████████████████████████
   Classes   : emp-*
   Version   : 2.0.0
   Updated   : 2026-06-11
   Theme     : standalone blue/teal tokens — no hrc-* or mc-* dependency
   Usage     : MCampusUI/Areas/HRManagement/Views/EmployeeDetail/
   ────────────────────────────────────────────────────────────────────
   Full structural system mirroring mc-* layout with HR-blue design.
   ████████████████████████████████████████████████████████████████████ */

/* ── Design tokens ────────────────────────────────────────────────── */
.emp-wrapper {
    --emp-primary:     #2563eb;
    --emp-primary-dk:  #1d4ed8;
    --emp-primary-lt:  #eff6ff;
    --emp-primary-mid: rgba(37,99,235,.12);
    --emp-accent:      #0d9488;
    --emp-surface:     #ffffff;
    --emp-bg:          #f1f5f9;
    --emp-border:      #e2e8f0;
    --emp-border-md:   #cbd5e1;
    --emp-txt:         #0f172a;
    --emp-txt-sec:     #475569;
    --emp-txt-hint:    #94a3b8;
    --emp-font:        'Manrope', 'Plus Jakarta Sans', sans-serif;
    font-family: var(--emp-font);
    font-size: 13px;
    line-height: 1.5;
}

/* ── Toolbar ──────────────────────────────────────────────────────── */
.emp-toolbar-stack {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 0 10px;
    border-bottom: 1.5px solid var(--emp-border);
    margin-bottom: 14px;
}
.emp-trow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.emp-badge-primary {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
    background: var(--emp-primary); color: #fff; border-radius: 20px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.emp-badge-count {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
    background: var(--emp-primary-lt); color: var(--emp-primary);
    border: 1px solid rgba(37,99,235,.25); border-radius: 20px;
    font-size: 11.5px; font-weight: 600;
}
.emp-tbtn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
    border: 1.5px solid var(--emp-border-md); border-radius: 8px;
    background: var(--emp-surface); color: var(--emp-txt-sec);
    font-size: 12px; font-weight: 500; cursor: pointer;
    text-decoration: none !important; transition: border-color .15s, color .15s;
}
.emp-tbtn:hover, .emp-tbtn:focus {
    border-color: var(--emp-primary); color: var(--emp-primary) !important;
    text-decoration: none !important;
}

/* ── Quick search ─────────────────────────────────────────────────── */
.emp-qs-wrap { position: relative; flex: 1; min-width: 180px; max-width: 360px; }
.emp-qs-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--emp-txt-hint); font-size: 13px; pointer-events: none; }
.emp-qs-wrap input { width: 100%; padding: 6px 10px 6px 30px; border: 1.5px solid var(--emp-border); border-radius: 8px; font-size: 12.5px; color: var(--emp-txt); background: var(--emp-surface); outline: none; transition: border-color .15s; }
.emp-qs-wrap input:focus { border-color: var(--emp-primary); }
.emp-qs-note { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--emp-txt-hint); }
.emp-qs-note-text strong { color: var(--emp-txt-sec); }

/* ── Candidate card ───────────────────────────────────────────────── */
.emp-candidate-card {
    background: var(--emp-surface);
    border: 1.5px solid var(--emp-border); border-radius: 14px;
    margin-bottom: 14px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.emp-candidate-card:hover { box-shadow: 0 4px 14px rgba(37,99,235,.1); }

/* ── Card header ──────────────────────────────────────────────────── */
.emp-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; background: #f8faff;
    border-bottom: 1.5px solid var(--emp-border); flex-wrap: wrap;
}
.emp-card-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.emp-num-circle {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--emp-primary); color: #fff;
    border-radius: 50%; font-size: 11.5px; font-weight: 700;
}
.emp-cname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--emp-txt); }
.emp-phone { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--emp-txt-sec); margin-top: 2px; }
.emp-phone-sep { color: var(--emp-txt-hint); }

/* Designation chip */
.emp-spill {
    display: inline-flex; align-items: center; padding: 2px 9px;
    border: 1.5px solid rgba(37,99,235,.3); border-radius: 6px;
    background: var(--emp-primary-lt); color: var(--emp-primary);
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; cursor: default;
}

/* Status badge (ACTIVE / TERMINATED) */
.emp-stage-badge {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 5px 14px; border-radius: 8px; color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; line-height: 1.25; min-width: 92px;
    text-align: center; cursor: default; flex-shrink: 0;
}
.emp-stage-sub { font-size: 9.5px; font-weight: 500; opacity: .88; letter-spacing: .02em; text-transform: none; }

/* ── Card actions ─────────────────────────────────────────────────── */
.emp-card-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto; }

.emp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; min-width: 28px; height: 28px; padding: 0 8px;
    border: 1.5px solid var(--emp-border-md); border-radius: 7px;
    background: transparent !important; color: var(--emp-txt-sec) !important;
    font-size: 12px; font-weight: 500; cursor: pointer;
    text-decoration: none !important;
    transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.emp-icon-btn:hover, .emp-icon-btn:focus {
    border-color: var(--emp-primary); color: var(--emp-primary) !important;
    background: var(--emp-primary-lt) !important; text-decoration: none !important;
}
.emp-action-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border: 1.5px solid var(--emp-primary); border-radius: 7px;
    background: transparent; color: var(--emp-primary);
    font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.emp-action-btn:hover { background: var(--emp-primary-lt); }
.emp-action-dropdown {
    border: 1.5px solid var(--emp-border) !important;
    border-radius: 10px !important; padding: 5px; min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.emp-action-dropdown > li > a {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px; border-radius: 6px;
    color: var(--emp-txt); font-size: 12.5px; font-weight: 500;
    cursor: pointer; transition: background .12s; white-space: nowrap;
    text-decoration: none !important;
}
.emp-action-dropdown > li > a:hover { background: var(--emp-bg); color: var(--emp-primary); }
.emp-action-dropdown .divider { margin: 4px 0; border-top: 1px solid var(--emp-border); }
.emp-item-danger > a { color: #dc2626 !important; }
.emp-item-danger > a:hover { background: #fef2f2 !important; color: #dc2626 !important; }

/* Service duration pill */
.emp-days-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
    background: linear-gradient(135deg, var(--emp-primary) 0%, var(--emp-accent) 100%);
    color: #fff; border-radius: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

/* ── Card body ────────────────────────────────────────────────────── */
.emp-card-body { display: flex; }

/* Profile column (left) */
.emp-card-profile-col {
    width: 180px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 14px; border-right: 1.5px solid var(--emp-border);
    background: var(--emp-bg); gap: 10px;
}
.emp-avatar {
    width: 72px; height: 72px; border-radius: 50% !important;
    background: linear-gradient(135deg, var(--emp-primary) 0%, var(--emp-accent) 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 3px solid rgba(37,99,235,.2); flex-shrink: 0;
}
.emp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; }
.emp-avatar-txt { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.emp-profile-info { width: 100%; text-align: center; }
.emp-profile-sub { font-size: 11.5px; color: var(--emp-txt-sec); margin-bottom: 4px; line-height: 1.35; }
.emp-profile-sub b { color: var(--emp-txt); font-weight: 600; }

/* Info section (right) */
.emp-card-info-section { flex: 1; min-width: 0; padding: 14px 16px; }
.emp-info-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-left: 1.5px solid var(--emp-border);
    border-top: 1.5px solid var(--emp-border);
}
.emp-info-item { padding: 9px 12px; border-right: 1.5px solid var(--emp-border); border-bottom: 1.5px solid var(--emp-border); }
.emp-info-item-wide { grid-column: span 2; }
.emp-info-item-full { grid-column: 1 / -1; }
.emp-info-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--emp-txt-hint); margin-bottom: 3px; }
.emp-info-value { display: block; font-size: 12.5px; font-weight: 500; color: var(--emp-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11.5px; letter-spacing: .02em; }

/* ── Empty state ──────────────────────────────────────────────────── */
.emp-empty-state { text-align: center; padding: 48px 24px; color: var(--emp-txt-hint); }
.emp-empty-state-icon { font-size: 40px; margin-bottom: 12px; }
.emp-empty-state-title { font-size: 15px; font-weight: 700; color: var(--emp-txt-sec); margin-bottom: 6px; }
.emp-empty-state-sub { font-size: 12.5px; color: var(--emp-txt-hint); max-width: 400px; margin: 0 auto; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .emp-info-grid { grid-template-columns: repeat(3, 1fr); }
    .emp-card-profile-col { width: 155px; }
}
@media (max-width: 767px) {
    .emp-card-body { flex-direction: column; }
    .emp-card-profile-col { width: 100%; flex-direction: row; border-right: none; border-bottom: 1.5px solid var(--emp-border); align-items: flex-start; padding: 12px 14px; }
    .emp-profile-info { text-align: left; }
    .emp-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .emp-info-grid { grid-template-columns: 1fr 1fr; }
    .emp-card-header { flex-wrap: wrap; }
}

/* ── Card header — teal → primary gradient; all children forced white ── */
.emp-card-header {
    background: linear-gradient(135deg, var(--rd-teal) 0%, var(--hrc-primary) 100%);
    border-bottom: none;
    padding: 14px 16px;
}
.emp-card-header .hrc-card-header-left { align-items: flex-start; }
.emp-card-header .hrc-cname            { color: #fff; font-size: 16px; }
.emp-card-header .hrc-cgender          { color: rgba(255,255,255,.85); gap: 8px; }
.emp-card-header .hrc-num-circle {
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.42);
    box-shadow: none;
}
.emp-card-header .hrc-icon-btn {
    border-color: rgba(255,255,255,.55);
    color: #fff;
    background: rgba(255,255,255,.08);
}
.emp-card-header .hrc-icon-btn:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.8);
}

/* ── Designation badge — frosted white pill on gradient header ── */
.emp-designation {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.45);
    border-radius: 6px !important;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ── Gender pill — frosted white outline on gradient header ── */
.emp-gender-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px !important;
    color: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 500;
}

/* ── Left identity column ── */
.emp-avatar-col {
    width: 132px;
    flex-shrink: 0;
    text-align: center;
    padding-right: 20px;
    border-right: 1.5px solid var(--hrc-border);
}

/* Avatar wrapper — 96×96 relative container for the status dot */
.emp-avatar-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
}
.emp-avatar-wrap .hrc-avatar {
    width: 96px;
    height: 96px;
    margin: 0;
    box-shadow: 0 0 0 5px var(--hrc-primary-mid);
}
.emp-avatar-wrap .hrc-avatar-txt { font-size: 34px; }

/* Online / active indicator dot; .is-terminated flips to red */
.emp-status-dot {
    position: absolute;
    bottom: 4px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #22c55e;
    border: 2.5px solid #fff;
    border-radius: 50% !important;
    z-index: 1;
}
.emp-status-dot.is-terminated { background: #ef4444; }

/* Stacked label → value items in the left identity column */
.emp-id-item { margin-bottom: 8px; text-align: left; }
.emp-id-item .emp-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hrc-txt-hint);
    display: block;
    margin-bottom: 2px;
}
.emp-id-item .emp-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--hrc-txt);
    display: block;
    word-break: break-word;
}
.emp-id-item .emp-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11.5px;
    letter-spacing: .02em;
}

/* Employment status badges */
.emp-status-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 20px !important;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
}
.emp-status-terminated {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 20px !important;
    color: #991b1b;
    font-size: 11px;
    font-weight: 600;
}

/* ── Right content column ── */
.emp-content-col { flex: 1; min-width: 0; }

/* Employment sub-section header row (badge + add icon button) */
.emp-section-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

/* 4-column info grid modifier (extends hrc-info-grid base) */
.emp-grid-4col { grid-template-columns: repeat(4, 1fr); }

/* DOJ date values — coloured in primary across grid + table */
.emp-doj-val { color: var(--hrc-primary); font-weight: 500; }

/* ── Card footer ── */
.emp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--hrc-border);
    background: #fafcff;
    flex-wrap: wrap;
    gap: 8px;
}
.emp-footer-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--hrc-txt-hint);
}
.emp-footer-btns { display: flex; align-items: center; gap: 6px; }

/* Ghost / outline footer button */
.emp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid var(--hrc-border-md);
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--hrc-txt-sec) !important;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Manrope', inherit;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color .15s, color .15s;
}
.emp-btn-outline:hover,
.emp-btn-outline:focus {
    border-color: var(--hrc-primary);
    color: var(--hrc-primary) !important;
    text-decoration: none !important;
}

/* Filled primary footer button */
.emp-btn-filled {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1.5px solid var(--hrc-primary);
    border-radius: 7px !important;
    background: var(--hrc-primary) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', inherit;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
}
.emp-btn-filled:hover,
.emp-btn-filled:focus {
    background: var(--hrc-primary-dk) !important;
    border-color: var(--hrc-primary-dk);
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .emp-avatar-col { width: 110px; padding-right: 14px; }
    .emp-avatar-wrap,
    .emp-avatar-wrap .hrc-avatar   { width: 84px; height: 84px; }
    .emp-avatar-wrap .hrc-avatar-txt { font-size: 28px; }
    .emp-grid-4col                 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .emp-avatar-col {
        width: 100%;
        border-right: none;
        border-bottom: 1.5px solid var(--hrc-border);
        padding-right: 0;
        padding-bottom: 14px;
        margin-bottom: 4px;
        display: flex;
        align-items: flex-start;
        gap: 20px;
        text-align: left;
    }
    .emp-avatar-wrap               { margin: 0; }
    .emp-avatar-wrap .hrc-avatar   { width: 80px; height: 80px; }
    .emp-avatar-wrap .hrc-avatar-txt { font-size: 26px; }
    .emp-grid-4col                 { grid-template-columns: repeat(2, 1fr); }
    .emp-card-footer               { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .emp-grid-4col                 { grid-template-columns: 1fr 1fr; }
    .emp-footer-btns               { flex-wrap: wrap; }
}

/* ████████████████████████████████████████████████████████████████████
   PARTITION 1B — EMPLOYEE PROFILE CARD
   ████████████████████████████████████████████████████████████████████
   Classes   : .profile-card  ·  .ph-*  ·  .wab  ·  .sidebar  ·  .avatar
               .info-grid  ·  .ig-*  ·  .emp-section  ·  .emp-tab-btn
               .emp-table-wrap  ·  .row-actions  ·  .ra  ·  .ft-btn
   Scope     : .emp-profile-list  (all vars isolated here)
   Theme     : inherits AdminLTE body.skin-* via hrc skin tokens
   Version   : 1.1.0
   Updated   : 2026-06-11
   Font      : Sora + JetBrains Mono (Google Fonts, imported above) */

/* ── Scoped base tokens ── */
.emp-profile-list {
    --font:    'Sora', sans-serif;
    --mono:    'JetBrains Mono', monospace;
    --ink:     #0D0F14;
    --ink-2:   #3A3F4E;
    --ink-3:   #7C8294;
    --ink-4:   #B4B9C8;
    --page:    #F0F2F7;
    --surface: #FFFFFF;
    --lift:    #F8F9FC;
    --border:  #E3E6EF;
    /* semantic status colours — never change with skin */
    --ep-emerald: #0B7B57; --ep-emerald-l: #E3F5EE; --ep-emerald-b: #B4E3D1;
    --ep-gold:    #946400; --ep-gold-l:    #FFF7E6; --ep-gold-b:    #FFE0A3;
    --ep-rose:    #C0392B; --ep-rose-l:    #FDECEA; --ep-rose-b:    #F5B7B1;
    --ep-purple:  #534AB7; --ep-purple-l:  #EEEDFE; --ep-purple-b:  #CECBF6;
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
    --sh:   0 1px 3px rgba(13,15,20,.06), 0 4px 16px rgba(13,15,20,.05);
    --t:    all .18s cubic-bezier(.4,0,.2,1);
    /* ── Primary colour bridges to hrc skin tokens (auto-switch with body.skin-*) ──
       --ep-rgb must stay in sync with --hrc-primary per skin block below.           */
    --th:     var(--hrc-primary);
    --th-d:   var(--hrc-primary-dk);
    --th-l:   var(--hrc-primary-lt);
    --th-b:   var(--hrc-primary-mid);
    --th-mid: var(--hrc-primary-hl);
    --ep-rgb: 30,111,245;   /* default: matches --hrc-primary #1e6ff5 */
    font-family: var(--font);
    font-size: 13px;
}

/* ── Skin-aware rgb triplet (kept in sync with body.skin-* --hrc-primary) ── */
body.skin-blue .emp-profile-list,
body.skin-blue-light .emp-profile-list          { --ep-rgb: 60,141,188;  }
body.skin-purple .emp-profile-list,
body.skin-purple-light .emp-profile-list        { --ep-rgb: 96,92,168;   }
body.skin-green .emp-profile-list,
body.skin-green-light .emp-profile-list         { --ep-rgb: 0,166,90;    }
body.skin-red .emp-profile-list,
body.skin-red-light .emp-profile-list           { --ep-rgb: 221,75,57;   }
body.skin-yellow .emp-profile-list,
body.skin-yellow-light .emp-profile-list        { --ep-rgb: 243,156,18;  }
body.skin-black .emp-profile-list,
body.skin-black-light .emp-profile-list         { --ep-rgb: 68,68,68;    }

/* ── Card ── */
.emp-profile-list .profile-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl) !important;
    overflow: hidden;
    box-shadow: var(--sh);
    font-family: var(--font);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.emp-profile-list .profile-card:hover { border-color: var(--th) !important; box-shadow: 0 4px 18px rgba(var(--ep-rgb), .15); }
.emp-profile-list .profile-card + .profile-card { margin-top: 14px; }

/* ── Header strip ── */
.emp-profile-list .profile-header {
    background: var(--surface);
    border-bottom: 1.5px solid var(--border);
    padding: 14px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.emp-profile-list .ph-left  { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.emp-profile-list .ph-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* Days-pill is now a direct child of profile-header — reduce gap so it sits flush after ph-right */
.emp-profile-list .profile-header > .hrc-days-pill { margin-left: -4px; }
.emp-profile-list .ph-seq {
    width: 28px; height: 28px; border-radius: 50% !important;
    background: var(--th);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; font-family: var(--mono);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--ep-rgb), .30);
}
.emp-profile-list .ph-name-block { min-width: 0; }
.emp-profile-list .ph-name       { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.emp-profile-list .ph-role-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: var(--r-pill) !important;
    background: var(--th-l); border: 1.5px solid var(--th-b);
    font-size: 10px; font-weight: 700; color: var(--th);
    letter-spacing: .05em; text-transform: uppercase;
    margin-left: 8px; vertical-align: middle; white-space: nowrap;
}
.emp-profile-list .ph-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.emp-profile-list .ph-meta span { font-size: 11.5px;  display: flex; align-items: center; gap: 4px; }
.emp-profile-list .ph-meta i    { font-size: 10px;  }
.emp-profile-list .ph-right .hrc-icon-btn.dropdown-toggle::after { display: none; }

/* Widget action buttons */
.emp-profile-list .wab {
    width: 30px; height: 30px; border-radius: var(--r-md) !important;
    border: 1.5px solid var(--border); background: var(--lift);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-3); font-size: 11px;
    transition: var(--t); padding: 0; text-decoration: none !important;
}
.emp-profile-list .wab:hover        { background: var(--th-l);      color: var(--th);      border-color: var(--th-b); }
.emp-profile-list .wab.danger:hover { background: var(--ep-rose-l); color: var(--ep-rose); border-color: var(--ep-rose-b); }
.emp-profile-list .wab.dropdown-toggle::after,
.emp-profile-list .ra.dropdown-toggle::after { display: none; }

/* Gender chip */
.emp-profile-list .gender-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--r-pill) !important;
    font-size: 10px; font-weight: 600;
    background: var(--th-l); color: var(--th); border: 1.5px solid var(--th-b);
}

/* ── Profile body (grid) ── */
.emp-profile-list .profile-body { display: grid; grid-template-columns: 180px 1fr; }

/* ── Sidebar — centred column (mirrors mc-card-profile-col) ── */
.emp-profile-list .sidebar {
    padding: 18px 12px;
    background: var(--surface);
    border-right: 1.5px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
}
.emp-profile-list .avatar-wrap { position: relative; margin-bottom: 4px; }
.emp-profile-list .avatar {
    width: 68px; height: 68px; border-radius: 50% !important;
    background: var(--th-l);
    border: 2.5px solid var(--th);
    box-shadow: 0 0 0 4px var(--th-b);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--th); font-family: var(--mono);
    overflow: hidden;
}
.emp-profile-list .avatar img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; }
.emp-profile-list .avatar-online {
    position: absolute; bottom: 3px; right: 3px;
    width: 11px; height: 11px; border-radius: 50% !important;
    background: #22C55E; border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px #16A34A;
}
.emp-profile-list .sidebar-fields { display: flex; flex-direction: column; gap: 0; width: 100%; align-items: center; }
/* Inline label: value row — matches mc-profile-sub from StudentEnquiryCardLayout */
.emp-profile-list .sf {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: 0 4px; justify-content: center; align-items: baseline;
    width: 100%; line-height: 1.9;
}
.emp-profile-list .sf-lbl {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink);
    display: inline; white-space: nowrap;
}
.emp-profile-list .sf-lbl::after { content: ':'; }
.emp-profile-list .sf-val {
    font-size: 11px; font-weight: 400; color: var(--ink-2);
    font-family: var(--font);
    display: inline; word-break: break-word;
}
.emp-profile-list .sf-val.link       { color: var(--th); cursor: pointer; }
.emp-profile-list .sf-val.link:hover { text-decoration: underline; }
.emp-profile-list .sidebar-divider   { display: none; }

/* Semantic status pills — standalone badge (no label, mirrors "Reg. Fees Paid" style) */
.emp-profile-list .status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; padding: 4px 14px; border-radius: var(--r-pill) !important;
    font-size: 11px; font-weight: 600; margin-top: 4px;
    width: auto; max-width: 100%;
}
.emp-profile-list .sp-active      { background: var(--ep-emerald-l); color: var(--ep-emerald); border: 1.5px solid var(--ep-emerald-b); }
.emp-profile-list .sp-leave       { background: var(--ep-gold-l);    color: var(--ep-gold);    border: 1.5px solid var(--ep-gold-b); }
.emp-profile-list .sp-terminated  { background: var(--ep-rose-l);    color: var(--ep-rose);    border: 1.5px solid var(--ep-rose-b); }

/* ── Details panel ── */
/* min-width:0 makes the 1fr grid cell honour overflow-x:auto on hrc-table-wrap inside */
.emp-profile-list .details-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Info grid — 4 cols × 2 rows */
.emp-profile-list .info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1.5px solid var(--border);
}
.emp-profile-list .ig-cell              { padding: 12px 16px; border-right: 1px solid var(--border); }
.emp-profile-list .ig-cell:nth-child(4n){ border-right: none; }
.emp-profile-list .ig-cell:nth-child(n+5){ border-top: 1px solid var(--border); }
.emp-profile-list .ig-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); margin-bottom: 3px; }
.emp-profile-list .ig-value { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.emp-profile-list .ig-value.masked { font-family: var(--mono); color: var(--th); }
.emp-profile-list .ig-value.em     { color: var(--ink-3); font-weight: 400; }

/* ── Employment section ── */
.emp-profile-list .emp-section { padding: 14px 16px; }
.emp-profile-list .emp-header  { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.emp-profile-list .emp-tab-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--r-md) !important;
    font-size: 11.5px; font-weight: 600;
    background: var(--th); color: #fff; border: none; cursor: pointer;
    font-family: var(--font);
    box-shadow: 0 2px 8px rgba(var(--ep-rgb), .28);
    transition: var(--t);
}
.emp-profile-list .emp-tab-btn:hover { background: var(--th-d); }
.emp-profile-list .add-btn {
    width: 28px; height: 28px; border-radius: var(--r-md) !important;
    border: 1.5px solid var(--border); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-3); font-size: 13px;
    transition: var(--t); padding: 0; text-decoration: none !important;
}
.emp-profile-list .add-btn:hover { background: var(--th-l); color: var(--th); border-color: var(--th-b); }

/* Employment table */
.emp-profile-list .emp-table-wrap                 { border: 1.5px solid var(--border); border-radius: var(--r-lg) !important; overflow: hidden; }
.emp-profile-list .emp-table-wrap table           { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font); }
.emp-profile-list .emp-table-wrap thead tr        { background: linear-gradient(90deg, var(--th), var(--th-mid)); }
.emp-profile-list .emp-table-wrap th              { padding: 9px 14px; text-align: left; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.9); border: none; background: transparent; }
.emp-profile-list .emp-table-wrap tbody tr        { border-bottom: 1px solid var(--border); transition: background .12s; }
.emp-profile-list .emp-table-wrap tbody tr:last-child { border-bottom: none; }
.emp-profile-list .emp-table-wrap tbody tr:hover  { background: var(--th-l); }
.emp-profile-list .emp-table-wrap td              { padding: 9px 14px; color: var(--ink); vertical-align: middle; border: none; }
.emp-profile-list .emp-table-wrap td.td-org       { font-weight: 600; }
.emp-profile-list .emp-table-wrap td.td-date      { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.emp-profile-list .emp-table-wrap td.td-school    { color: var(--ink-2); }
.emp-profile-list .row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.emp-profile-list .ra {
    width: 27px; height: 27px; border-radius: var(--r-sm) !important;
    border: 1.5px solid var(--border); background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-4); font-size: 11px;
    transition: var(--t); padding: 0; text-decoration: none !important;
}
.emp-profile-list .ra:hover              { background: var(--th-l);        color: var(--th);        border-color: var(--th-b); }
.emp-profile-list .ra.gold:hover         { background: var(--ep-gold-l);   color: var(--ep-gold);   border-color: var(--ep-gold-b); }
.emp-profile-list .ra.purple:hover       { background: var(--ep-purple-l); color: var(--ep-purple); border-color: var(--ep-purple-b); }

/* hrc-table inside emp-profile-list — ensure scroll container works inside constrained grid cell */
.emp-profile-list .hrc-table-wrap { margin-top: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.emp-profile-list .hrc-table tbody tr:hover { background: var(--th-l) !important; }
.emp-profile-list .hrc-action-btn.dropdown-toggle::after { display: none; }

/* ── Profile footer ── */
.emp-profile-list .profile-footer {
    padding: 9px 16px; background: var(--lift);
    border-top: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.emp-profile-list .footer-meta   { font-size: 11px; color: var(--ink-4); display: flex; align-items: center; gap: 5px; }
.emp-profile-list .footer-meta i { font-size: 10px; }
.emp-profile-list .footer-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.emp-profile-list .ft-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: var(--r-sm) !important;
    font-size: 11.5px; font-weight: 500;
    border: 1.5px solid var(--border); background: transparent;
    color: var(--ink-2); cursor: pointer; transition: var(--t);
    font-family: var(--font); text-decoration: none !important;
}
.emp-profile-list .ft-btn:hover          { background: var(--page); color: var(--ink); }
.emp-profile-list .ft-btn.primary        { background: var(--th); border-color: var(--th); color: #fff; box-shadow: 0 2px 8px rgba(var(--ep-rgb), .22); }
.emp-profile-list .ft-btn.primary:hover  { background: var(--th-d); }

/* ── Responsive ── */
@media (max-width: 720px) {
    /* Stack sidebar above details panel */
    .emp-profile-list .profile-body                     { grid-template-columns: 1fr; }

    /* Sidebar: avatar LEFT + fields RIGHT (matches StudentEnquiry mobile) */
    .emp-profile-list .sidebar {
        flex-direction: row; flex-wrap: nowrap;
        align-items: flex-start; gap: 14px;
        border-right: none; border-bottom: 1.5px solid var(--border);
        padding: 12px 14px; text-align: left;
    }
    .emp-profile-list .avatar-wrap                      { flex-shrink: 0; margin-bottom: 0; }
    .emp-profile-list .sidebar-fields                   { flex: 1; min-width: 0; width: auto; align-items: flex-start; }
    .emp-profile-list .sf                               { justify-content: flex-start; }
    .emp-profile-list .status-pill                      { margin-top: 6px; }

    /* Info grid — keep 4 columns on tablet (only mobile drops to 2-col) */
    .emp-profile-list .ig-cell                          { border-bottom: 1px solid var(--border); }
    .emp-profile-list .ig-cell:nth-last-child(-n+4)     { border-bottom: none; }

    /* Table font + narrower min-width so Action column needs less scrolling */
    .emp-profile-list .emp-table-wrap table,
    .emp-profile-list .hrc-table                        { font-size: 11px; min-width: 480px; }
    .emp-profile-list .emp-table-wrap th,
    .emp-profile-list .emp-table-wrap td,
    .emp-profile-list .hrc-table thead th,
    .emp-profile-list .hrc-table tbody td               { padding: 7px 10px; }
}
@media (max-width: 480px) {
    /* Avatar slightly smaller on very narrow screens */
    .emp-profile-list .avatar                           { width: 56px; height: 56px; font-size: 18px; }

    /* Keep 2-column info grid on narrow phones */
    .emp-profile-list .info-grid                        { grid-template-columns: 1fr 1fr; }
    .emp-profile-list .ig-cell                          { border-bottom: 1px solid var(--border); }
    .emp-profile-list .ig-cell:nth-child(even)          { border-right: none; }
    .emp-profile-list .ig-cell:nth-last-child(-n+2)     { border-bottom: none; }

    /* ── Profile header 2-row mobile layout ──────────────────────────
       Row 1 (full width): [seq] [name / phone  email]
       Row 2 (full width): [✏][🗑][⋮][∨]  [📅 2mo ────────────────]
    ────────────────────────────────────────────────────────────────── */
    .emp-profile-list .profile-header                   { row-gap: 8px; column-gap: 6px; padding: 10px 14px; }

    /* Row 1 — ph-left spans full width */
    .emp-profile-list .ph-left                          { flex-basis: 100%; order: 1; align-items: flex-start; gap: 8px; }
    .emp-profile-list .ph-name                          { font-size: 13px; white-space: normal; max-width: none; }
    .emp-profile-list .ph-role-badge                    { font-size: 9px; padding: 1px 6px; }
    .emp-profile-list .ph-meta                          { gap: 4px 10px; flex-wrap: wrap; }
    .emp-profile-list .ph-meta span                     { font-size: 10.5px; }

    /* Row 2 — buttons left, pill stretches right */
    .emp-profile-list .ph-right                         { order: 2; flex-shrink: 0; gap: 3px; }
    .emp-profile-list .profile-header > .hrc-days-pill  { order: 2; flex: 1; min-width: 0; margin-left: 0; justify-content: center; border-radius: var(--r-sm) !important; }

    .emp-profile-list .emp-section                      { padding: 10px 12px; }

    /* Tighter table on narrow phones — min-width 440px reduces scroll distance to ~90px on a 375px device */
    .emp-profile-list .hrc-table                        { min-width: 440px; font-size: 10.5px; }
    .emp-profile-list .hrc-table thead th,
    .emp-profile-list .hrc-table tbody td               { padding: 6px 8px; }
    .emp-profile-list .hrc-action-btn                   { font-size: 11px; padding: 4px 8px; }
}

/* ████████████████████████████████████████████████████████████████████
   PARTITION 2 — STUDENT ENQUIRY CARD LAYOUT
   ████████████████████████████████████████████████████████████████████
   Classes   : mc-*
   Version   : 2.0.0
   Updated   : 2026-06-08
   Font      : Manrope
   Source    : StudentEnquiryCardLayout.css
   ──────────────────────────────────────────────────────────────────────
   mc-*   Enquiry candidate cards, page-header, toolbar, avatar,
          info grid, days-pill, stage tabs, modal system, drawer
          system, follow-up calendar (fc-cal-*), skin overrides
   ████████████████████████████████████████████████████████████████████ */
/* ================================================================
   StudentEnquiryCardLayout.css  — VERSION HISTORY
   ----------------------------------------------------------------
   v1.0   Initial design matching JobApplicantProfile card language
           Skin-aware design tokens for all AdminLTE skins
   v2.0   Page header, follow-up stage tabs, mc-modal-* system,
           mc-drawer-* system, ModalWidth utility, z-index fix
   ----------------------------------------------------------------
   CURRENT: v2.0
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────────── */
.mc-wrapper {
    --mc-primary:       #1e6ff5;
    --mc-primary-dk:    #1458c8;
    --mc-primary-lt:    #e8f1ff;
    --mc-primary-mid:   #c2d9ff;
    --mc-primary-hl:    #3b8bff;
    --mc-teal:          #00b894;
    --mc-teal-lt:       #d6f5ef;
    --mc-teal-dk:       #007d66;
    --mc-bg:            #f0f4fb;
    --mc-surface:       #ffffff;
    --mc-border:        #dbe4f0;
    --mc-border-md:     #c4d2e8;
    --mc-txt:           #0f1c2e;
    --mc-txt-sec:       #4a5e78;
    --mc-txt-hint:      #8da0b8;
    --mc-shadow:        0 1px 4px rgba(15,28,46,.06), 0 4px 20px rgba(15,28,46,.07);
    --mc-shadow-h:      0 4px 12px rgba(30,111,245,.12), 0 8px 32px rgba(30,111,245,.10);

    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    
    color: var(--mc-txt);
    font-size: 13px !important;
   line-height: 1.5;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.mc-wrapper *, .mc-wrapper *::before, .mc-wrapper *::after {
    box-sizing: border-box;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Restore Font Awesome glyphs inside mc-wrapper */
.mc-wrapper i.fa,
.mc-wrapper i[class^="fa-"],
.mc-wrapper i[class*=" fa-"],
.mc-wrapper .fa:before,
.mc-wrapper [class^="fa-"]:before,
.mc-wrapper [class*=" fa-"]:before {
    font-family: FontAwesome !important;
}

/* ── Duplicate mode palette: see body .mc-wrapper.mc-duplicate-mode below ──
   Variable re-declarations must sit AFTER the skin-override section to beat
   body.skin-xxx .mc-wrapper [0,2,1] by source order at equal specificity.
   ─────────────────────────────────────────────────────────────────────── */

/* ── 3-row toolbar stack ───────────────────────────────────────── */
.mc-toolbar-stack {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 16px !important;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    box-shadow: var(--mc-shadow);
}

.mc-trow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.mc-trow-badges { gap: 8px; }
.mc-trow-actions { gap: 6px; }
.mc-trow-search {
    gap: 10px;
    border-top: 1px solid var(--mc-border);
    padding-top: 8px;
}

/* ── Quick-search wrapper ──────────────────────────────────────── */
.mc-qs-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.mc-qs-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mc-txt-hint);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.mc-qs-wrap input[type="text"],
.mc-qs-wrap input[type="search"] {
    width: 100% !important;
    padding-left: 32px !important;
    height: 34px !important;
    border: 1px solid var(--mc-primary) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-txt) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s !important;
}
.mc-qs-wrap input:focus {
    border-color: var(--mc-primary-mid) !important;
    background: #fff !important;
}

/* ── Quick-search scope note ──────────────────────────────────── */
.mc-qs-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--mc-txt-hint);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--mc-primary-lt);
    border: 1px solid var(--mc-primary-mid);
    border-radius: 8px !important;
    cursor: default;
    height:30px;
}
.mc-qs-note i.fa {
    font-family: FontAwesome !important;
    color: var(--mc-primary);
    font-size: 12px;
    flex-shrink: 0;
}
.mc-qs-note strong { color: var(--mc-txt-sec); font-weight: 600; }

/* On small screens collapse the note text — keep only the ℹ icon */
@media (max-width: 768px) {
    .mc-qs-note-text { display: none; }
    .mc-qs-note { padding: 4px 8px; border-radius: 50% !important; width: 28px; height: 28px; justify-content: center; }
}

/* ── Status filter pills ───────────────────────────────────────── */
.mc-status-pills {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.mc-spill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 13px;
    border: 1px solid var(--mc-border) !important;
    border-radius: 20px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-txt-sec) !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.5;
}
.mc-spill i.fa { font-family: FontAwesome !important; font-size: 7px; }
.mc-spill:hover {
    background: var(--mc-primary-lt) !important;
    border-color: var(--mc-primary-mid) !important;
    color: var(--mc-primary) !important;
}
.mc-spill.active {
    background: var(--mc-primary) !important;
    border-color: var(--mc-primary) !important;
    color: #fff !important;
}

/* Enquiry-specific pill colours */
.mc-spill[data-filter="submitted"].active   { background: #2563eb !important; border-color: #2563eb !important; }
.mc-spill[data-filter="submitted"]:not(.active) i.fa { color: #2563eb; }
.mc-spill[data-filter="admitted"].active    { background: #16a34a !important; border-color: #16a34a !important; }
.mc-spill[data-filter="admitted"]:not(.active) i.fa  { color: #16a34a; }
.mc-spill[data-filter="notsubmitted"].active { background: #d97706 !important; border-color: #d97706 !important; }
.mc-spill[data-filter="notsubmitted"]:not(.active) i.fa { color: #d97706; }
.mc-spill[data-filter="duplicate"].active   { background: #dc2626 !important; border-color: #dc2626 !important; }
.mc-spill[data-filter="duplicate"]:not(.active) i.fa  { color: #dc2626; }
.mc-spill[data-filter="archived"].active    { background: #64748b !important; border-color: #64748b !important; }
.mc-spill[data-filter="archived"]:not(.active) i.fa   { color: #64748b; }

/* ── Legacy single-row toolbar (empty-state) ───────────────────── */
.mc-toolbar {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 16px !important;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    box-shadow: var(--mc-shadow);
}

/* ── Toolbar badges ────────────────────────────────────────────── */
.mc-badge-primary {
    background: var(--mc-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mc-badge-count {
    background: var(--mc-primary-lt);
    color: var(--mc-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px !important;
    border: 1px solid var(--mc-primary-mid);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Toolbar buttons (shared by .mc-tbtn and .mc-action-btn) ──── */
.mc-tbtn,
.mc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    height: 30px;
    border: 1px solid var(--mc-primary) !important;
    border-radius: 8px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-primary) !important;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all .14s;
    vertical-align: middle;
}
.mc-tbtn:hover,
.mc-tbtn:focus,
.mc-action-btn:hover,
.mc-action-btn:focus,
.open > .mc-action-btn {
    background: var(--mc-primary-lt) !important;
    border-color: var(--mc-primary-mid) !important;
    color: var(--mc-primary) !important;
    text-decoration: none !important;
    outline: none !important;
}
.mc-tbtn span { font-size: 12.5px; }
.mc-tbtn .dropdown-menu { min-width: 180px; }

/* ActiveSorting inside mc-wrapper dropdowns */
.mc-wrapper .ActiveSorting {
    background-color: var(--mc-primary) !important;
    color: white !important;
    border-radius: 4px !important;
}

/* ── Card list container ───────────────────────────────────────── */
.jsEnquiryListContainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Individual enquiry card ───────────────────────────────────── */
.mc-candidate-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 12px !important;
    box-shadow: var(--mc-shadow);
    overflow: hidden;
    position: relative;
    transition: box-shadow .18s, border-color .18s;
}
.mc-candidate-card::before {
    display: none; /* no left accent stripe — clean all-around border */
}
.mc-candidate-card:hover {
    box-shadow: var(--mc-shadow-h);
    border-color: var(--mc-primary-mid);
}

/* ── Card header ───────────────────────────────────────────────── */
.mc-card-header {
    display: flex;          /* mobile default — overridden to grid at ≥769px */
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid var(--mc-border);
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}
.mc-card-header-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.mc-num-circle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: var(--mc-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.mc-cname {
    font-size: 13px;
    font-weight: 700;
    color: var(--mc-txt);
    text-transform: uppercase;
    line-height: 1.3;
    word-break: break-word;
}
.mc-cgender {
    font-size: 13px;
    color: var(--mc-txt-sec);
    margin-top: 2px;
}
.mc-phone {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--mc-txt-sec);
    margin-top: 3px;
}
.mc-phone-sep { color: var(--mc-border-md); font-size: 12px; }
.mc-history-link {
    color: var(--mc-txt-hint);
    font-size: 12px;
    text-decoration: none !important;
    transition: color .12s;
}
.mc-history-link:hover { color: var(--mc-primary); }
.mc-submitted-on {
    font-size: 11px;
    color: var(--mc-teal-dk);
    font-weight: 500;
    margin-top: 2px;
}

/* ── Follow-up stage badge ─────────────────────────────────────── */
.mc-stage-badge {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 12px;
    border-radius: 6px !important;
    font-size: 12px;
    font-weight: 600;
    color: #000000 !important;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    transition: opacity .15s;
}
.mc-stage-badge:hover { opacity: .88; }
.mc-stage-sub {
    display: block;
    background: rgba(255,255,255,.92);
    color: #222 !important;
    border-radius: 4px !important;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
}

/* Stage badge — always in normal document flow; never overlaps other content.
   ─────────────────────────────────────────────────────────────────────────
   Desktop (≥769 px): card header becomes a 3-column grid
     [1fr  name+phone]  [auto  badge]  [1fr  actions]
   Grid columns never cross, so overlap is structurally impossible at any width.
   Mobile (≤768 px): flex-wrap layout; badge drops to its own row via order:3.
   ──────────────────────────────────────────────────────────────────────── */
.mc-card-header > .mc-stage-badge {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0;
}

/* ── Desktop: 3-column grid for card header ─────────────────────── */
@media (min-width: 769px) {
    .mc-card-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
    }
    .mc-card-header > .mc-stage-badge {
        justify-self: center;
        align-self: center;
    }
    .mc-card-actions {
        justify-self: end;
        justify-content: flex-end;
    }
}

/* ── Mobile: badge wraps to its own row below header-left ───────── */
@media (max-width: 768px) {
    .mc-card-header > .mc-stage-badge {
        order: 3;
        align-self: flex-start;
        margin-top: 4px;
    }
}

/* ── Card action bar (right side of mc-card-header) ───────────── */
.mc-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-self: flex-start;
}
.mc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px !important;
    border: 1px solid var(--mc-primary) !important;
    background: var(--mc-surface) !important;
    color: var(--mc-primary) !important;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all .14s;
}
.mc-icon-btn:hover,
.mc-icon-btn:focus {
    background: var(--mc-primary) !important;
    border-color: var(--mc-primary-dk) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Accent variant (e.g. Counsellor) — filled primary */
.mc-icon-btn-accent {
    background: var(--mc-primary) !important;
    border-color: var(--mc-primary-dk) !important;
    color: #fff !important;
}
.mc-icon-btn-accent:hover,
.mc-icon-btn-accent:focus {
    background: var(--mc-primary-dk) !important;
    border-color: var(--mc-primary-dk) !important;
    color: #fff !important;
}

/* Age pill — amber to match "X days" indicator in screenshot */
.mc-days-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0px 8px;
    border-radius: 5px !important;
    background: #fff8e1;
    color: #7c5700;
    border: 1px solid #ffe082 !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    height:30px;
}

/* Sibling pill */
.mc-sibling-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px; /* tight right — badge sits flush at the edge */
    border-radius: 20px !important;
    background: #f37020;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .14s;
}
.mc-sibling-pill:hover { opacity: .88; }
/* White count badge on right — matches screenshot style */
.mc-sibling-pill .mc-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    color: #c85000 !important;
    border-radius: 20px !important;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    line-height: 1.3;
    margin-left: 0;
}

/* Qualified pill */
.mc-qualified-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px; /* tight right — badge sits flush at the edge */
    border-radius: 20px !important;
    background: #15ad0d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .14s;
}
.mc-qualified-pill:hover { opacity: .88; }

/* Percentage score pills (compatible with MCampus card layout) */
.mc-pct-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px !important; /* Symmetrical padding for percentage text */
    border-radius: 20px !important;
    background: #15ad0d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease-in-out;
    border: 1px solid transparent !important;
}
.mc-pct-pill:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Percentage-based color scale for qualification scores */
.mc-pct-pill.mc-pct-80 {
    background: #00a65a !important;
    color: #ffffff !important;
    border: none !important;
}

.mc-pct-pill.mc-pct-70 {
    background: #0073b7 !important;
    color: #ffffff !important;
    border: none !important;
}

.mc-pct-pill.mc-pct-60 {
    background: #00c0ef !important;
    color: #ffffff !important;
    border: none !important;
}

.mc-pct-pill.mc-pct-50 {
    background: #d81b60 !important;
    color: #ffffff !important;
    border: none !important;
}

.mc-pct-pill.mc-pct-30 {
    background: #ff851b !important;
    color: #ffffff !important;
    border: none !important;
}

.mc-pct-pill.mc-pct-20 {
    background: #f39c12 !important;
    color: #ffffff !important;
    border: none !important;
}

.mc-pct-pill.mc-pct-10 {
    background: #dd4b39 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Card header pills row */
.mc-header-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}

/* Sleek thin progress bar for qualification percentage */
.mc-pct-progress-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 0 !important;
    overflow: hidden;
}

.mc-pct-progress-bar {
    height: 100%;
    border-radius: 0 !important;
    transition: width 0.4s ease-in-out;
}

/* Matching progress bar colors to dashboard theme */
.mc-pct-progress-bar.mc-pct-80 { background: #00a65a !important; }
.mc-pct-progress-bar.mc-pct-70 { background: #0073b7 !important; }
.mc-pct-progress-bar.mc-pct-60 { background: #00c0ef !important; }
.mc-pct-progress-bar.mc-pct-50 { background: #d81b60 !important; }
.mc-pct-progress-bar.mc-pct-30 { background: #ff851b !important; }
.mc-pct-progress-bar.mc-pct-20 { background: #f39c12 !important; }
.mc-pct-progress-bar.mc-pct-10 { background: #dd4b39 !important; }
/* White count badge on right — matches screenshot style */

/* Duplicate pill */
.mc-duplicate-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px !important;
    background: #fff;
    color: #f75d59;
    border: 1px solid #f75d59 !important;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .14s;
}
.mc-duplicate-pill:hover {
    background: #fff0f0 !important;
}

/* ── Call-info floating badge (follow-up calendar view) ────────
   Replaces the old flat mc-call-pill-success / mc-call-pill-danger pills.
   Two side-by-side segments ("Visited" + "Calls") fused into one elevated
   badge. Each segment is independently coloured green/red by status.      */

.mc-call-float {
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10);
    flex-shrink: 0;
    font-family: inherit;
    vertical-align: middle;
}

/* One segment = label row + value row */
.mc-call-float-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    gap: 1px;
    min-width: 46px;
    position: relative;
}

/* Hairline divider between the two segments */
.mc-call-float-seg + .mc-call-float-seg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255,255,255,.35);
}

/* Micro uppercase label */
.mc-call-float-lbl {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .82;
    white-space: nowrap;
    line-height: 1.2;
}

/* Large bold value */
.mc-call-float-val {
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1.3;
}
.mc-call-float-val i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* Green gradient — visited / calls > 0 */
.mc-call-float-seg.mc-cf-success {
    background: linear-gradient(145deg, #1e8449 0%, #27ae60 55%, #2ecc71 100%);
    color: #fff;
}

/* Red gradient — not visited / 0 calls */
.mc-call-float-seg.mc-cf-danger {
    background: linear-gradient(145deg, #922b21 0%, #c0392b 55%, #e74c3c 100%);
    color: #fff;
}

/* Keep legacy flat pills working if referenced elsewhere */
.mc-call-pill-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb !important;
    display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
    border-radius:20px !important; font-size:11px; font-weight:600; white-space:nowrap; }
.mc-call-pill-danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb !important;
    display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
    border-radius:20px !important; font-size:11px; font-weight:600; white-space:nowrap; }

/* ── Card header right (pills + collapse) ──────────────────────── */
.mc-card-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ── Actions dropdown menu ─────────────────────────────────────
   display / position managed by Bootstrap events + fixed-pos JS  */
.mc-action-dropdown {
    list-style: none !important;
    padding: 4px !important;
    margin: 0 !important;
    border: 1px solid var(--mc-primary-mid) !important;
    border-radius: 8px !important;
    box-shadow: var(--mc-shadow-h);
    width: max-content;
    min-width: 0;
    background: var(--mc-surface) !important;
}
.mc-action-dropdown li {
    list-style: none !important;
}
.mc-action-dropdown li a {
    border-radius: 5px !important;
    cursor: pointer !important;
    padding: 6px 10px;
    display: block;
    font-size: 12px;
    color: var(--mc-txt);
    text-decoration: none !important;
    transition: background .12s;
}
.mc-action-dropdown li a:hover {
    background: var(--mc-primary-lt);
    color: var(--mc-primary);
    text-decoration: none;
}
.mc-action-dropdown .divider {
    margin: 4px 0;
    background: var(--mc-border);
}
.mc-item-danger a,
.mc-action-dropdown li.mc-item-danger a {
    color: #c0392b !important;
}
.mc-action-dropdown li.mc-item-danger a:hover {
    background: #fff0f0 !important;
    color: #c0392b !important;
}

/* Collapse button */
.mc-collapse-btn { cursor: pointer; }

/* ── Card body — CSS grid so banners span full width ───────────── */
.mc-card-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    grid-auto-rows: auto;
}

/* Left — profile sidebar */
.mc-card-profile-col {
    grid-column: 1;
    grid-row: 1;
    width: 210px;
    min-width: 0;
    padding: 16px 14px;
    border-right: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: var(--mc-surface);
}

/* "At least once visited" — thin theme-coloured strip at very top of card */
.mc-visit-banner {
    background: linear-gradient(90deg, var(--mc-primary-lt), var(--mc-primary-mid));
    color: var(--mc-primary-dk);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    border-bottom: 1px solid var(--mc-primary-mid);
}
.mc-visit-banner i.fa { color: var(--mc-primary); font-family: FontAwesome !important; }
.mc-visit-banner b { font-weight: 700; color: var(--mc-primary-dk); }

.mc-profile-row { display: contents; } /* dissolved — profile-col is now the container */

/* Text block that groups rating/apt/sub items — sits between avatar and fees badge */
.mc-profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centred on desktop (inside 210px col) */
    gap: 2px;
    width: 100%;
    min-width: 0;
}

/* Avatar — themed circle with initials fallback */
.mc-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50% !important;
    background: var(--mc-primary-lt);
    border: 2.5px solid var(--mc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 0 0 4px var(--mc-primary-mid);
}
.mc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mc-avatar-txt {
    font-size: 22px;
    font-weight: 700;
    color: var(--mc-primary);
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Appointment badge */
.mc-apt-badge {
    display: block;
    text-align: center;
    padding: 3px 6px;
    border-radius: 6px !important;
    background: var(--mc-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    cursor: help;
    width: 100%;
}
.mc-apt-badge.mc-apt-api {
    background: #b9294a;
}

/* Profile sub-text lines (Section, Class, DOB, Ref) */
.mc-profile-sub {
    font-size: 11px;
    color: var(--mc-txt-sec);
    text-align: center;
    width: 100%;
    word-break: break-word;
    line-height: 1.7;
}
/* Bold label part — uses theme primary for emphasis */
.mc-profile-sub b,
.mc-profile-sub strong {
    color: var(--mc-txt);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mc-profile-name { display: none; } /* suppressed — name already in card header */

/* Reg fees status — full-width theme-coloured outlined pill */
.mc-fees-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px 10px;
    border-radius: 20px !important;
    border: 1.5px solid var(--mc-primary) !important;
    background: var(--mc-primary-lt) !important;
    color: var(--mc-primary-dk);
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 8px;
    white-space: nowrap;
    text-align: center;
}
.mc-fees-badge i.fa { font-family: FontAwesome !important; font-size: 12px; }

/* ── Card info section (right column) ─────────────────────────── */
.mc-card-info-section {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.mc-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.mc-info-item {
    padding: 11px 14px;
    /* Row separator: top-border model so the last row never leaves a dangling line */
    border-top: 1px solid var(--mc-border);
    /* Column separator: inset box-shadow fills the FULL stretched cell height
       (border-right would stop at the cell's intrinsic height, not the row height) */
    box-shadow: inset -1px 0 0 var(--mc-border);
    min-width: 0;
    overflow: hidden;
}
/* ── First row: no top border — prevents double-line with card header border-bottom ── */
.mc-info-grid > .mc-info-item:nth-child(-n+4) { border-top: none; }
/* ── Last column of 4-col grid: remove right separator ── */
.mc-info-item:nth-child(4n)  { box-shadow: none; }
/* Wide / full items */
.mc-info-item-wide { grid-column: span 2; }
.mc-info-item-full { grid-column: span 4; box-shadow: none; }
/* Wide items must always show their right separator, regardless of nth-child position.
   Specificity [0,3,0] intentionally beats .mc-info-item:nth-child(4n) [0,2,0]
   so a wide item landing on a 4n position still renders the col separator. */
.mc-info-grid > .mc-info-item.mc-info-item-wide {
    box-shadow: inset -1px 0 0 var(--mc-border);
}

.mc-info-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--mc-txt-hint);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-info-value {
    display: block;
    font-size: 12px;
    color: var(--mc-txt);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-info-value[title] { cursor: help; }

/* ── Enquiry-specific banners — full-width (span both grid columns) */
.mc-admitted-banner {
    grid-column: 1 / -1;
    background: linear-gradient(90deg, #e8f9ee, #d4edda);
    border-top: 1px solid #b8dfc5;
    color: #155724;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 0 0 12px 12px !important;
}
.mc-admitted-banner i.fa { color: #28a745; font-size: 12px; font-family: FontAwesome !important; }
.mc-duplicate-banner {
    grid-column: 1 / -1;
    background: #fbeae8;
    border-top: 1px solid #dba9a3;
    color: #5c241b;
    padding: 6px 12px;
    font-size: 11px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}
.mc-duplicate-banner a { font-weight: 600; color:#367fa9; cursor:pointer; }
.mc-duplicate-banner a:hover { text-decoration:underline; font-weight: 600; }
.mc-assign-row {
    grid-column:  1 / -1;
    border-top:   1px solid var(--mc-border);
    padding:      6px 12px;
    background:   var(--mc-bg);
}
.mc-smart-sort-banner {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    border-radius: 5px !important;
    padding: 5px 10px;
    font-size: 12px;
    margin-bottom: 10px;
}
.mc-calendar-warn {
    background: #f5c6cb;
    border: 1px solid red;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 5px !important;
    margin-bottom: 10px;
    text-align: left;
}

/* ── Duplicate mode toggle pills ───────────────────────────────── */
.mc-dup-filter-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.mc-dup-filter-btn {
    padding: 4px 14px;
    border: 1px solid var(--mc-primary) !important;
    border-radius: 6px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-primary-dk) !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .14s, border-color .14s;
}
.mc-dup-filter-btn.active,
.mc-dup-filter-btn:hover {
    background: var(--mc-primary-lt) !important;
    border-color: var(--mc-primary) !important;
}
.mc-dup-filter-btn .badge {
    background: var(--mc-primary);
    color: #fff;
    border-radius: 5px !important;
    padding: 1px 6px;
    font-size: 11px;
}

/* ── Color-code filter tabs row (Lead calendar) ────────────────── */
.mc-trow-color-tabs {
    gap: 10px;
    border-top: 1px solid var(--mc-border);
    padding-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.mc-color-filter-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px 7px 18px;
    border-radius: 50px !important;
    border: 1.5px solid var(--mc-border) !important;
    background: var(--mc-surface) !important;
    color: var(--mc-txt) !important;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, background .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
/* Left accent bar */
.mc-color-filter-tab::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    border-radius: 50px 0 0 50px !important;
}
.mc-color-filter-tab .mc-cft-label {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
}
.mc-color-filter-tab .mc-cft-count {
    border-radius: 20px !important;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    min-width: 26px;
    text-align: center;
    flex-shrink: 0;
}
.mc-color-filter-tab.active {
    font-weight: 600 !important;
}
/* White Color Code tab */
.mc-color-filter-tab.mc-cft-white::before    { background: #78909c; }
.mc-color-filter-tab.mc-cft-white .mc-cft-count { background: #546e7a; }
.mc-color-filter-tab.mc-cft-white:hover,
.mc-color-filter-tab.mc-cft-white.active {
    border-color: #78909c !important;
    background: #f0f4f5 !important;
    box-shadow: 0 2px 8px rgba(84,110,122,.2) !important;
}
/* Orange Color Code tab */
.mc-color-filter-tab.mc-cft-orange::before    { background: #f57c00; }
.mc-color-filter-tab.mc-cft-orange .mc-cft-count { background: #e65100; }
.mc-color-filter-tab.mc-cft-orange:hover,
.mc-color-filter-tab.mc-cft-orange.active {
    border-color: #f57c00 !important;
    background: #fff8f0 !important;
    box-shadow: 0 2px 8px rgba(230,81,0,.18) !important;
}
@media (max-width: 480px) {
    .mc-trow-color-tabs { flex-direction: column; align-items: center; }
    .mc-color-filter-tab { min-width: 220px; justify-content: center; }
}

/* ── Empty state card ──────────────────────────────────────────── */
.mc-empty-state {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 16px !important;
    box-shadow: var(--mc-shadow);
    text-align: center;
    padding: 52px 32px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
/* Top accent stripe */
.mc-empty-state::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mc-primary-dk), var(--mc-primary), var(--mc-primary-hl));
    border-radius: 16px 16px 0 0 !important;
}
.mc-empty-state-icon {
    width: 76px;
    height: 76px;
    border-radius: 50% !important;
    background: var(--mc-primary-lt);
    border: 2px solid var(--mc-primary-mid) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.mc-empty-state-icon i.fa {
    font-size: 30px;
    color: var(--mc-primary);
    font-family: FontAwesome !important;
}
.mc-empty-state-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mc-txt);
    line-height: 1.3;
}
.mc-empty-state-sub {
    font-size: 12.5px;
    color: var(--mc-txt-hint);
    max-width: 340px;
    line-height: 1.6;
    margin: 0 auto;
}
.mc-empty-state-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}
/* Legacy single-icon fallback */
.mc-empty-state > i.fa {
    font-size: 40px;
    color: var(--mc-txt-hint);
    font-family: FontAwesome !important;
}

/* ── Elp rating stars ───────────────────────────────────────────── */
.mc-rating { display: flex; align-items: center; gap: 2px; justify-content: center; }
.mc-rating i.fa { font-size: 13px !important; color: orange; font-family: FontAwesome !important; }

/* ── Lead view list-group replacement ─────────────────────────── */
.mc-lead-info-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.mc-lead-item {
    padding: 11px 14px;
    border-bottom: 1px solid var(--mc-border);
    border-right: 1px solid var(--mc-border);
    font-size: 13px;
    color: var(--mc-txt);
    min-width: 0;
    overflow: hidden;
}
.mc-lead-item:nth-child(4n) { border-right: none; }
.mc-lead-item:last-child { border-bottom: none; }

/* ── Follow-up history container ───────────────────────────────── */
.mc-followup-history { padding: 0 14px 10px; }

/* ── Scroll-to-top button ───────────────────────────────────────── */
.mc-scroll-top {
    color: white;
    border-radius: 50% !important;
    position: fixed;
    bottom: 53px;
    right: -1px;
    z-index: 99999;
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* 3-column grid — first 3 items have no top border */
@media (max-width: 1200px) {
    .mc-info-grid,
    .mc-lead-info-grid { grid-template-columns: repeat(3, 1fr); }
    /* restore separator for 4-col's last col, then remove for 3-col's last col */
    .mc-info-item:nth-child(4n) { box-shadow: inset -1px 0 0 var(--mc-border); }
    .mc-info-item:nth-child(3n) { box-shadow: none; }
    .mc-lead-item:nth-child(4n) { border-right: 1px solid var(--mc-border); }
    .mc-lead-item:nth-child(3n) { border-right: none; }
    /* first-row reset: items 4+ get top border back, items 1-3 lose it
       Use .mc-info-grid > selector [0,3,0] to beat the base -n+4 suppressor [0,3,0] by source order */
    .mc-info-grid > .mc-info-item:nth-child(n+4)  { border-top: 1px solid var(--mc-border); }
    .mc-info-grid > .mc-info-item:nth-child(-n+3) { border-top: none; }
}

@media (max-width: 1024px) {
    .mc-card-body { grid-template-columns: 180px 1fr; }
    .mc-card-profile-col { width: 180px; }
}

/* 2-column grid — first 2 items have no top border */
@media (max-width: 768px) {
    /* Stack profile col above info grid */
    .mc-card-body { grid-template-columns: 1fr; }

    /* ── Mobile profile row: [avatar] [text-block] [fees-badge] ── */
    .mc-card-profile-col {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--mc-border);
        flex-direction: row;    /* horizontal: avatar | info | fees */
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
    }
    .mc-avatar {
        margin-bottom: 0;
        flex-shrink: 0;         /* never compress the avatar */
    }
    /* Text block fills remaining space, left-aligned */
    .mc-profile-info {
        flex: 1;
        min-width: 0;
        align-items: flex-start;
        gap: 1px;
    }
    .mc-profile-info .mc-profile-sub {
        text-align: left;
        font-size: 11.5px;
    }
    /* Fees badge: compact pill on the right, not full-width */
    .mc-card-profile-col > .mc-fees-badge {
        width: auto;
        flex-shrink: 0;
        align-self: center;
        margin-top: 0;
        white-space: nowrap;
        padding: 5px 12px;
    }
    .mc-card-info-section {
        grid-column: 1;
        grid-row: auto;
    }
    .mc-info-grid,
    .mc-lead-info-grid { grid-template-columns: repeat(2, 1fr); }
    /* restore separator for 3-col's last col, then remove for 2-col's last col */
    .mc-info-item:nth-child(4n),
    .mc-info-item:nth-child(3n) { box-shadow: inset -1px 0 0 var(--mc-border); }
    .mc-info-item:nth-child(2n) { box-shadow: none; }
    .mc-lead-item:nth-child(4n),
    .mc-lead-item:nth-child(3n) { border-right: 1px solid var(--mc-border); }
    .mc-lead-item:nth-child(2n) { border-right: none; }
    /* first-row reset: items 3+ get top border back, items 1-2 lose it
       Use .mc-info-grid > selector [0,3,0] to beat the base -n+4 suppressor [0,3,0] by source order */
    .mc-info-grid > .mc-info-item:nth-child(n+3)  { border-top: 1px solid var(--mc-border); }
    .mc-info-grid > .mc-info-item:nth-child(-n+2) { border-top: none; }
    .mc-card-header { flex-wrap: wrap; }
    /* Prevent action buttons from overflowing the card width on mobile */
    .mc-card-actions {
        flex-shrink: 1;
        max-width: 100%;
        flex-wrap: wrap;
    }
    .mc-toolbar-stack { border-radius: 8px !important; }
    .mc-admitted-banner {font-size: 8px;}
    .mc-visit-banner {font-size: 8px;}
    .mc-duplicate-banner {font-size: 8px;}
}

/* 1-column grid — only below 360px (keep 2-col for all typical mobile sizes) */
@media (max-width: 360px) {
    .mc-info-grid,
    .mc-lead-info-grid { grid-template-columns: 1fr; }
    .mc-info-item { box-shadow: none; }
    .mc-lead-item { border-right: none !important; }
    /* first-row reset: item 2+ get top border back, only item 1 loses it
       Use .mc-info-grid > selector [0,3,0] to beat the base -n+4 suppressor [0,3,0] by source order */
    .mc-info-grid > .mc-info-item:nth-child(n+2) { border-top: 1px solid var(--mc-border); }
    .mc-info-grid > .mc-info-item:first-child { border-top: none; }
    .mc-avatar { width: 52px; height: 52px; }
    .mc-avatar-txt { font-size: 18px; }
    .mc-days-pill,
    .mc-duplicate-pill { font-size: 10px; padding: 2px 7px; }
    .mc-sibling-pill   { font-size: 10px; padding: 3px 3px 3px 8px; }
    .mc-card-actions { gap: 3px; }
}

/* ═══════════════════════════════════════════════════════════════
   SKIN-AWARE OVERRIDES
   All skins override --mc-primary family; everything else
   cascades automatically through the CSS custom properties.
   ═══════════════════════════════════════════════════════════════ */

/* ── skin-blue ──
   Selectors target both body.skin-xxx (for modals / elements outside
   .mc-wrapper) AND body.skin-xxx .mc-wrapper (for in-wrapper content).
   This ensures CSS custom properties cascade to Bootstrap modals that
   render at body level and never enter .mc-wrapper. */
body.skin-blue,
body.skin-blue .mc-wrapper,
body.skin-blue-light,
body.skin-blue-light .mc-wrapper {
    --mc-primary:     #3c8dbc;
    --mc-primary-dk:  #367fa9;
    --mc-primary-lt:  #dff0ff;
    --mc-primary-mid: #a8d4ef;
    --mc-primary-hl:  #5ba4d0;
}

/* ── skin-green ── */
body.skin-green,
body.skin-green .mc-wrapper,
body.skin-green-light,
body.skin-green-light .mc-wrapper {
    --mc-primary:     #00a65a;
    --mc-primary-dk:  #008d4c;
    --mc-primary-lt:  #d5f5e5;
    --mc-primary-mid: #7ed9a8;
    --mc-primary-hl:  #28c07a;
}

/* ── skin-red ── */
body.skin-red,
body.skin-red .mc-wrapper,
body.skin-red-light,
body.skin-red-light .mc-wrapper {
    --mc-primary:     #dd4b39;
    --mc-primary-dk:  #d73925;
    --mc-primary-lt:  #fde8e5;
    --mc-primary-mid: #f3a89f;
    --mc-primary-hl:  #e86454;
}

/* ── skin-yellow ── */
body.skin-yellow,
body.skin-yellow .mc-wrapper,
body.skin-yellow-light,
body.skin-yellow-light .mc-wrapper {
    --mc-primary:     #f39c12;
    --mc-primary-dk:  #e08e0b;
    --mc-primary-lt:  #fef6e0;
    --mc-primary-mid: #f9cf80;
    --mc-primary-hl:  #f5b03a;
}

/* ── skin-purple ── */
body.skin-purple,
body.skin-purple .mc-wrapper,
body.skin-purple-light,
body.skin-purple-light .mc-wrapper {
    --mc-primary:     #605ca8;
    --mc-primary-dk:  #555299;
    --mc-primary-lt:  #eeecff;
    --mc-primary-mid: #b5b2e0;
    --mc-primary-hl:  #7a76c0;
}

/* ── skin-black ── */
body.skin-black,
body.skin-black .mc-wrapper,
body.skin-black-light,
body.skin-black-light .mc-wrapper {
    --mc-primary:     #444444;
    --mc-primary-dk:  #222d32;
    --mc-primary-lt:  #eeeeee;
    --mc-primary-mid: #aaaaaa;
    --mc-primary-hl:  #666666;
}

/* ── skin-blue-yellow ── */
body.skin-blue-yellow,
body.skin-blue-yellow .mc-wrapper,
body.skin-blue-yellow-light,
body.skin-blue-yellow-light .mc-wrapper {
    --mc-primary:     #3c8dbc;
    --mc-primary-dk:  #367fa9;
    --mc-primary-lt:  #dff0ff;
    --mc-primary-mid: #a8d4ef;
    --mc-primary-hl:  #5ba4d0;
}

/* ── Duplicate mode: palette override — AFTER all skin rules ──────────────
   Selector specificity [0,2,1] = same as body.skin-xxx .mc-wrapper.
   Being placed LAST in the cascade means it WINS over every skin, so the
   duplicate-rose palette takes effect regardless of the active AdminLTE skin.
   All mc-* elements that reference var(--mc-primary*) switch automatically:
   num-circle, avatar ring, icon-btn borders, counsellor btn, visit banner,
   fees badge, toolbar badges, card hover border, shadow — everything.
   Primary: #9e4638  (brick red / terracotta)
   ─────────────────────────────────────────────────────────────────────── */
body .mc-wrapper.mc-duplicate-mode {
    --mc-primary:     #9e4638;
    --mc-primary-dk:  #7a3229;
    --mc-primary-lt:  #fbeae8;
    --mc-primary-mid: #dba9a3;
    --mc-primary-hl:  #b85549;
    --mc-shadow-h:    0 4px 12px rgba(158,70,56,.14), 0 8px 32px rgba(158,70,56,.10);
}

/* ═══════════════════════════════════════════════════════════════
   MAIN MODULE SWITCHER  (toggle-switch style)
   ═══════════════════════════════════════════════════════════════ */

.mc-switcher-wrap {
    display: flex;
    justify-content: center;
    padding: 14px 0 10px;
}

/* Single pill container — border tracks the active tab colour */
.mc-switcher {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--mc-primary);
    border-radius: 50px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15,28,46,.10);
    transition: border-color .22s;
}
/* When duplicate tab is active, the border turns rose */
.mc-switcher.mc-switcher-dup-active {
    border-color: var(--mc-primary);
}

/* Each half of the toggle */
.mc-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 24px;
    font-size: 13.5px;
    font-weight: 600;
    background: #fff !important;
    color: var(--mc-txt-sec) !important;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background .22s, color .22s;
    border: none !important;
    line-height: 1.4;
}

/* Divider between the two halves */
.mc-switcher-btn + .mc-switcher-btn {
    border-left: 0px solid var(--mc-primary) !important;
    transition: border-color .22s;
}
.mc-switcher.mc-switcher-dup-active .mc-switcher-btn + .mc-switcher-btn {
    border-left-color: var(--mc-primary) !important;
}

/* Hover on inactive half */
.mc-switcher-btn:hover {
    background: var(--mc-primary-lt) !important;
    color: var(--mc-primary) !important;
    text-decoration: none !important;
}
.mc-switcher-btn.mc-switcher-dup:hover {
    background: var(--mc-primary-lt) !important;
    color: var(--mc-primary) !important;
}

/* ── Active — Manage (primary) ─────────────────────────────────── */
.mc-switcher-btn.active {
    background: var(--mc-primary) !important;
    color: #fff !important;
    border-radius:0px !important;
}
.mc-switcher-btn.active:hover { background: var(--mc-primary) !important; }

/* ── Active — Duplicate (rose) ──────────────────────────────────── */
.mc-switcher-btn.mc-switcher-dup.active {
    background: var(--mc-primary) !important;
    color: #fff !important;
}
.mc-switcher-btn.mc-switcher-dup.active:hover { background: var(--mc-primary-lt) !important; color:var(--mc-primary) !important; }

/* Inactive duplicate text colour */
.mc-switcher-btn.mc-switcher-dup:not(.active) {
    color: var(--mc-primary) !important;
}

/* Icon — small circle beside label */
.mc-switcher-icon {
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    background: var(--mc-primary-lt);
    color: var(--mc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: background .22s, color .22s;
}
.mc-switcher-btn.active .mc-switcher-icon {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.mc-switcher-btn.mc-switcher-dup:not(.active) .mc-switcher-icon {
    background: var(--mc-primary-lt) !important;
    color: var(--mc-primary) !important;
}
.mc-switcher-btn.mc-switcher-dup.active .mc-switcher-icon {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.mc-switcher-icon i.fa { font-family: FontAwesome !important; }

/* Check tick */
.mc-switcher-check {
    font-size: 11px;
    font-family: FontAwesome !important;
    opacity: .9;
}

/* Restore FA */
.mc-switcher i.fa,
.mc-switcher i[class^="fa-"],
.mc-switcher i[class*=" fa-"] { font-family: FontAwesome !important; }

/* Mobile — stack vertically */
@media (max-width: 600px) {
    .mc-switcher { flex-direction: column; border-radius: 16px !important; }
    .mc-switcher-btn + .mc-switcher-btn { border-left: none !important; border-top: 2px solid var(--mc-primary) !important; }
    .mc-switcher.mc-switcher-dup-active .mc-switcher-btn + .mc-switcher-btn { border-top-color: #db2777 !important; }
    .mc-switcher-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.mc-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--mc-primary) 0%, var(--mc-primary-hl) 100%);
    border-radius: 16px !important;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 4px 18px rgba(30,111,245,.22);
}
.mc-page-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px !important;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.mc-page-header-icon i.fa { font-family: FontAwesome !important; color: #fff; }
.mc-page-header-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.mc-page-header-sub   { font-size: 11.5px; opacity: .78; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   FOLLOW-UP STAGE TAB BAR
   ═══════════════════════════════════════════════════════════════ */

/* Outer container — anchors the left/right fade overlays */
.mc-followup-tabs-outer {
    position: relative;
}
/* Fade overlays — sit above the scrolling content, never scroll */
.mc-followup-tabs-outer::before,
.mc-followup-tabs-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .2s ease;
}
.mc-followup-tabs-outer::before {
    left: 0;
    background: linear-gradient(to right, var(--mc-surface) 15%, transparent);
    border-radius: 12px 0 0 12px !important;
}
.mc-followup-tabs-outer::after {
    right: 0;
    background: linear-gradient(to left, var(--mc-surface) 15%, transparent);
    border-radius: 0 12px 12px 0 !important;
}
/* Show overlays when JavaScript toggles these classes */
.mc-followup-tabs-outer.mc-tabs-has-left::before  { opacity: 1; }
.mc-followup-tabs-outer.mc-tabs-has-right::after  { opacity: 1; }

.mc-followup-tabs-wrap {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 12px !important;
    padding: 8px 12px 10px;
    margin-bottom: 6px;
    box-shadow: var(--mc-shadow);
    overflow-x: auto;
    /* Always show a visible scrollbar whenever content overflows */
    scrollbar-width: thin;
    scrollbar-color: var(--mc-primary) var(--mc-primary-lt);
}
.mc-followup-tabs-wrap::-webkit-scrollbar {
    height: 5px;
}
/* Visible track (not transparent) so the user can always see the rail */
.mc-followup-tabs-wrap::-webkit-scrollbar-track {
    background: var(--mc-primary-lt);
    border-radius: 4px !important;
}
.mc-followup-tabs-wrap::-webkit-scrollbar-thumb {
    background: var(--mc-primary);
    border-radius: 4px !important;
}
.mc-followup-tabs-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--mc-primary-dk);
}

/* ── Horizontal scroll hint ────────────────────────────────── */
/* Hidden by default; shown whenever there are more tabs to the right.
   Stays visible while scrolling — disappears only when user reaches the end. */
.mc-tabs-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 0 4px;
    font-size: 10.5px;
    color: var(--mc-txt-hint);
    letter-spacing: .03em;
    user-select: none;
}
/* Show whenever there is more content to the right */
.mc-followup-tabs-outer.mc-tabs-has-right .mc-tabs-scroll-hint {
    display: flex;
    animation: mc-hint-appear .35s ease both;
}
/* Fade in from slightly above */
@keyframes mc-hint-appear {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0);    }
}
/* Continuously bounce the arrows while hint is visible */
.mc-followup-tabs-outer.mc-tabs-has-right .mc-tabs-scroll-hint .fa-long-arrow-right {
    animation: mc-arrow-r 1.4s ease-in-out infinite;
}
.mc-followup-tabs-outer.mc-tabs-has-right .mc-tabs-scroll-hint .fa-long-arrow-left {
    animation: mc-arrow-l 1.4s ease-in-out infinite;
}
@keyframes mc-arrow-r {
    0%, 100% { transform: translateX(0);   opacity: .5; }
    50%       { transform: translateX(4px); opacity: 1;  }
}
@keyframes mc-arrow-l {
    0%, 100% { transform: translateX(0);    opacity: .5; }
    50%       { transform: translateX(-4px); opacity: 1;  }
}

.mc-followup-tabs {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    min-width: max-content;
}

.mc-followup-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--mc-border) !important;
    border-radius: 20px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-txt-sec) !important;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .16s;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.mc-followup-tab:hover {
    background: var(--mc-primary-lt) !important;
    border-color: var(--mc-primary-mid) !important;
    color: var(--mc-primary) !important;
    text-decoration: none !important;
}
.mc-followup-tab.active {
    background: var(--mc-primary) !important;
    border-color: var(--mc-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.mc-followup-tab .mc-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px !important;
    background: rgba(255,255,255,.28);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.mc-followup-tab:not(.active) .mc-tab-count {
    background: var(--mc-primary-lt);
    color: var(--mc-primary);
}

/* ═══════════════════════════════════════════════════════════════
   MC MODALS
   ═══════════════════════════════════════════════════════════════ */

/* Bootstrap modal z-index
   ─────────────────────────────────────────────────────────────
   Full stacking order:
      1040  .modal-backdrop   — dims the page; stays BELOW the
                                entire pfu overlay stack (9990+)
                                so it is invisible when pfu modal
                                is open (pfu-modal-backdrop at 9992
                                already covers the background)
      9990  .mc-drawer-backdrop
      9991  .mc-drawer
      9992  .pfu-modal-backdrop
      9993  .pfu-detail-modal   ← ABOVE .modal-backdrop → stays
                                  fully visible when Bootstrap modal
                                  opens from within it
     10000  .modal              ← Bootstrap modal above pfu modal
     99999  .EdusprintPageLoader

   KEY INSIGHT: .modal-backdrop must stay at ~1040 (its default).
   Setting it higher (e.g. 9992 or 9994) causes it to paint on
   top of pfu-detail-modal and grey it out.  The pfu-modal-backdrop
   (9992) already handles background dimming — the Bootstrap
   backdrop just hides invisibly beneath it.

   JS nested-modal handler (see calendar page) increments these
   for each additional open modal so stacking is always correct. */
.modal          { z-index: 10000 !important; }
.modal-backdrop { z-index:  1040 !important; }

/* Page loader — must remain above everything including Bootstrap
   modals (10000) so loading feedback is always visible.
   Overrides _AllCSSFilesAdminLTE.cshtml which sets z-index:5000. */
.EdusprintPageLoader { z-index: 99999 !important; }

/* ── UI overlay z-index — always above .modal (10000) ────────────
   jQuery UI datepicker, autocomplete, and Select2 default to
   z-index ~100-1051, placing them BEHIND open Bootstrap modals.
   10050 sits: above modal (10000), below page-loader (99999).
   ─────────────────────────────────────────────────────────────── */

/* jQuery UI — datepicker calendar */
.ui-datepicker                                { z-index: 10050 !important; }

/* jQuery UI — autocomplete suggestion list (ET_Autocomplete) */
.ui-autocomplete                              { z-index: 10050 !important; }
.ui-autocomplete-loading                      { z-index: 10050 !important; }

/* jQuery UI — dialog / tooltip */
.ui-dialog                                    { z-index: 10050 !important; }
.ui-tooltip                                   { z-index: 10050 !important; }

/* Select2 v4 — search dropdown */
.select2-container--open                      { z-index: 10050 !important; }
.select2-dropdown                             { z-index: 10050 !important; }
.select2-container--open .select2-dropdown    { z-index: 10050 !important; }

/* Bootstrap datepicker plugin (if used alongside jQuery UI) */
.datepicker.datepicker-dropdown               { z-index: 10050 !important; }
.datepicker-dropdown                          { z-index: 10050 !important; }

/* Bootstrap select / dropdown inside a modal */
.modal .dropdown-menu                         { z-index: 10050 !important; }
.bootstrap-select.open .dropdown-menu         { z-index: 10050 !important; }

/* jQuery multiselect / chosen */
.chosen-drop                                  { z-index: 10050 !important; }
.ms-drop                                      { z-index: 10050 !important; }

/* ── Slot_Modal: stacks above an already-open Report_Modal ─────────
   Both modals share .modal { z-index: 10000 }.  When Report_Modal is
   already visible and the user clicks "Book Slot", Bootstrap shows
   #Slot_Modal at the same z-index — DOM paint order puts Report_Modal
   on top.  10200 sits above modal (10000) and UI overlays (10050).
   UI overlays inside Slot_Modal are bumped to 10250 for the same
   reason (they would otherwise hide behind the modal at 10200).    */
#Slot_Modal {
    z-index: 10200 !important;
}
#Slot_Modal .ui-datepicker,
#Slot_Modal ~ .ui-datepicker,
#Slot_Modal ~ .ui-autocomplete,
#Slot_Modal ~ .select2-dropdown {
    z-index: 10250 !important;
}

/* Modal width utility — 80% on desktop/laptop, 100% on mobile
   NOTE: only .ModalWidth — do NOT add .modal-dialog here, that would
   apply 80% width to every Bootstrap modal dialog on the page
   (including SameContactNoHistoryModal cards etc.) */
.ModalWidth {
    width:     80% !important;
    max-width: 80% !important;
}

@media (max-width: 768px) {
    .ModalWidth {
        width:         100% !important;
        max-width:     100% !important;
        margin-left:   0    !important;
        margin-right:  0    !important;
        border-radius: 0    !important;
    }
}

/* Override Bootstrap modal font */
.mc-modal.modal { font-family: 'Manrope', system-ui, sans-serif !important; }

/* Modal dialog sizing */
.mc-modal .modal-dialog,
.mc-modal-dialog {
    margin: 40px auto;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15,28,46,.22), 0 4px 16px rgba(15,28,46,.10) !important;
}
.mc-modal .modal-content {
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* ── Modal header base ─────────────────────────────────────────── */
.mc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--mc-primary-dk) 0%, var(--mc-primary) 55%, var(--mc-primary-hl) 100%);
    color: #fff;
    border-bottom: none !important;
    min-height: 58px;
}
/* Danger header — red gradient */
.mc-modal-header-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%);
}
/* Warning header — amber gradient */
.mc-modal-header-warning {
    background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
}

.mc-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
    line-height: 1.3;
}
.mc-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px !important;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.mc-modal-header-actions { display: flex; align-items: center; gap: 6px; }
.mc-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0 !important;
    line-height: 1;
    flex-shrink: 0;
}
.mc-modal-close:hover { background: rgba(255,255,255,.34) !important; }
.mc-modal-close i.fa { font-family: FontAwesome !important; }
.mc-modal-close-refresh { background: rgba(255,255,255,.28) !important; }

/* ── Modal body ───────────────────────────────────────────────── */
.mc-modal-body {
    padding: 20px 22px;
    background: var(--mc-surface);
    color: var(--mc-txt);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}
/* Large report modal: taller body */
#Report_Modal .mc-modal-body {
    min-height: 200px;
    max-height: calc(100vh - 160px);
}

/* ── Info card (Student Name + Ref No summary) ─────────────────── */
.mc-modal-info-card {
    background: var(--mc-bg);
    border: 1px solid var(--mc-border);
    border-radius: 10px !important;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mc-modal-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mc-modal-info-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mc-txt-sec);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.mc-modal-info-label i.fa { font-family: FontAwesome !important; opacity: .7; }
.mc-modal-info-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mc-txt);
    text-align: right;
}
.mc-mono { font-family: 'Courier New', Courier, monospace !important; }

/* ── Form fields ─────────────────────────────────────────────── */
.mc-modal-field { margin-bottom: 16px; }
.mc-modal-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mc-txt-sec);
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.mc-required { color: #dc2626; margin-left: 2px; }
.mc-modal-select,
.mc-modal-textarea {
    width: 100% !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    color: var(--mc-txt) !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-shadow: none !important;
    resize: vertical;
}
.mc-modal-select:focus,
.mc-modal-textarea:focus {
    border-color: var(--mc-primary) !important;
    box-shadow: 0 0 0 3px rgba(30,111,245,.10) !important;
}
.mc-field-error {
    font-size: 11.5px;
    color: #dc2626;
    margin-top: 4px;
    display: none;
}
.mc-field-error:not(:empty) { display: block; }

/* ── Modal footer ────────────────────────────────────────────── */
.mc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: var(--mc-bg);
    border-top: 1px solid var(--mc-border) !important;
}

/* ── Modal action buttons ────────────────────────────────────── */
.mc-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px !important;
    border: none !important;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', system-ui, sans-serif !important;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    line-height: 1.4;
}
.mc-modal-btn i.fa { font-family: FontAwesome !important; font-size: 12px; }

/* Primary — theme colour */
.mc-modal-btn-primary {
    background: var(--mc-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px var(--mc-primary-shadow, rgba(30,111,245,.30));
}
.mc-modal-btn-primary:hover {
    background: var(--mc-primary-dk) !important;
    box-shadow: 0 4px 12px var(--mc-primary-shadow, rgba(30,111,245,.40));
}

/* Danger — red */
.mc-modal-btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(220,38,38,.28);
}
.mc-modal-btn-danger:hover { background: #b91c1c !important; box-shadow: 0 4px 12px rgba(220,38,38,.38); }

/* Cancel — neutral */
.mc-modal-btn-cancel {
    background: var(--mc-surface) !important;
    color: var(--mc-txt-sec) !important;
    border: 1px solid var(--mc-border) !important;
    box-shadow: none;
}
.mc-modal-btn-cancel:hover {
    background: var(--mc-bg) !important;
    color: var(--mc-txt) !important;
    border-color: var(--mc-border-md) !important;
}

/* Font Awesome icon restore inside modals */
.mc-modal i.fa,
.mc-modal i[class^="fa-"],
.mc-modal i[class*=" fa-"] { font-family: FontAwesome !important; }

/* Mobile responsive */
@media (max-width: 576px) {
    .mc-modal .modal-dialog,
    .mc-modal-dialog  { margin: 10px; width: auto; }
    .mc-modal-footer  { flex-direction: column-reverse; align-items: stretch; }
    .mc-modal-btn     { justify-content: center; width: 100%; }
    .mc-modal-info-row { flex-direction: column; align-items: flex-start; }
    .mc-modal-info-value { text-align: left; }

    /* ── Modal header: title row → date-filter row ─────────────── */
    .mc-modal-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
        min-height: unset;
    }
    .mc-modal-title {
        font-size: 13px;
        gap: 8px;
    }
    .mc-modal-icon {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    /* Actions row: date-filter pill (grows) + close ✕ (fixed) */
    .mc-modal-header-actions {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }
    /* Pill expands between its left edge and the close button */
    .fc-cal-date-filter {
        flex: 1 1 0;
        min-width: 0;
        padding: 3px 4px 3px 8px;
    }
    /* Each date input shares pill width equally */
    .fc-cal-date-input {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        font-size: 11px;
    }
    .fc-cal-date-sep,
    .fc-cal-search-btn { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MC DRAWER  (right slide-in panel — reserved for future use)
   ═══════════════════════════════════════════════════════════════ */
.mc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,28,46,.42);
    z-index: 9990;
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.mc-drawer-backdrop.is-open { display: block; opacity: 1; }

.mc-drawer {
    position: fixed;
    top: 0;
    right: -640px;
    max-width: 100vw;
    height: 100vh;
    background: var(--mc-surface);
    box-shadow: -6px 0 48px rgba(15,28,46,.20);
    z-index: 9991;
    display: flex;
    flex-direction: column;
    transition: right .32s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.mc-drawer.is-open { right: 0; }

/* Restore FA inside drawer */
.mc-drawer i.fa,
.mc-drawer i[class^="fa-"],
.mc-drawer i[class*=" fa-"],
.mc-drawer .fa:before,
.mc-drawer [class^="fa-"]:before,
.mc-drawer [class*=" fa-"]:before { font-family: FontAwesome !important; }

/* Top accent stripe */
.mc-drawer::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-teal));
    flex-shrink: 0;
}

.mc-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--mc-primary-dk) 0%, var(--mc-primary) 55%, var(--mc-primary-hl) 100%);
    color: #fff;
    flex-shrink: 0;
}
.mc-drawer-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mc-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
    line-height: 1;
    padding: 0 !important;
}
.mc-drawer-close:hover { background: rgba(255,255,255,.30) !important; }

.mc-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px 28px;
    background: var(--mc-bg);
}
.mc-drawer-body::-webkit-scrollbar { width: 5px; }
.mc-drawer-body::-webkit-scrollbar-track { background: transparent; }
.mc-drawer-body::-webkit-scrollbar-thumb { background: #c7d0df; border-radius: 3px !important; }

@media (max-width: 860px) {
    .mc-drawer { width: 100vw; right: -100vw; }
    .mc-drawer.is-open { right: 0; }
    .mc-drawer-body { padding: 14px 14px 24px; }
}


/* ── Additions for v2.1 redesign ───────────────────────────────── */

/* Info-grid item wrappers (grid children with label + value) */
.mc-info-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mc-info-item-wide {
    grid-column: span 2;
}
.mc-info-item-full {
    grid-column: 1 / -1;
}

/* Pill count badge — base (used by duplicate pill) */
.mc-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    color: #c0392b;
    border-radius: 20px !important;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    line-height: 1.3;
    margin-left: 0;
}
/* Sibling pill count is styled directly on .mc-sibling-pill .mc-pill-count above */

/* Stage badge disabled state */
.mc-stage-disabled {
    pointer-events: none !important;
    opacity: .82;
    cursor: default !important;
}

/* Accent icon button (e.g. Counsellor) — theme-based */
.mc-icon-btn.mc-icon-btn-accent {
    background: var(--mc-primary) !important;
    border-color: var(--mc-primary) !important;
    color: #fff !important;
    width: auto;
    padding: 0 8px;
    font-size: 12px;
}
.mc-icon-btn.mc-icon-btn-accent:hover {
    background: var(--mc-primary-dk) !important;
    border-color: var(--mc-primary-dk) !important;
    color: #fff !important;
}

/* Contact-history link inside phone line */
.mc-history-link {
    margin-left: 5px;
    color: var(--mc-txt-hint);
    font-size: 12px;
    cursor: pointer;
}
.mc-history-link:hover { color: var(--mc-primary); }

/* ═══════════════════════════════════════════════════════════════
   FOLLOW-UP CALENDAR PAGE  (.fc-cal-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────── */
.fc-cal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.fc-cal-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fc-cal-page-icon {
    width: 38px;
    height: 38px;
    background: #d4f5ed;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #007d66;
    font-size: 17px;
    flex-shrink: 0;
}
.fc-cal-page-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--mc-txt);
}
.fc-cal-page-badge {
    font-size: 11px;
    color: var(--mc-txt-hint);
    font-weight: 500;
    padding: 2px 10px;
    background: var(--mc-bg);
    border: 1px solid var(--mc-border);
    border-radius: 20px !important;
}
.fc-cal-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #c0392b;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s;
    line-height: 1.4;
}
/* When report button sits inside mc-page-header use a glass style */
.mc-page-header .fc-cal-report-btn {
    background: rgba(255,255,255,.18) !important;
    border: 1.5px solid rgba(255,255,255,.45) !important;
    border-radius: 8px !important;
    font-size: 12.5px;
    flex-shrink: 0;
}
.mc-page-header .fc-cal-report-btn:hover,
.mc-page-header .fc-cal-report-btn:focus {
    background: rgba(255,255,255,.30) !important;
    border-color: rgba(255,255,255,.65) !important;
}
.fc-cal-report-btn:hover,
.fc-cal-report-btn:focus {
    background: #a93226 !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: none !important;
}

/* ── Outer layout: [nav] [card] [nav] ─────────────────────────── */
.fc-cal-outer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-cal-nav-area {
    flex: 0 0 42px;
    display: flex;
    justify-content: center;
    align-self: center;
}
.fc-cal-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 1px solid var(--mc-primary) !important;
    background: var(--mc-primary) !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .15s;
    flex-shrink: 0;
}
.fc-cal-nav-btn:hover {
    background: var(--mc-primary-dk) !important;
    border-color: var(--mc-primary-dk) !important;
    color: #fff !important;
}

/* ── Calendar card ────────────────────────────────────────────── */
.fc-cal-card {
    width: 100%;
    background: var(--mc-surface);
    border-radius: 16px !important;
    box-shadow: var(--mc-shadow);
    overflow: hidden;
    padding: 20px 16px 0;
    margin-top: 14px;
}

/* ── Month title row (contains nav buttons) ───────────────────── */
.fc-cal-month-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.fc-cal-month-center {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.fc-cal-month-title {
    font-size: 30px;
    font-weight: 300;
    color: var(--mc-txt);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 8px;
    font-family: 'Manrope', sans-serif;
}
.fc-cal-month-title em {
    font-style: italic;
    color: var(--mc-txt-hint);
    font-family: 'Manrope', Georgia, serif;
    font-weight: 300;
}
.fc-cal-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: 12px;
    color: var(--mc-txt-sec);
    margin-bottom: 4px;
}
.fc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.fc-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.fc-legend-dot.fc-completed { background: #27ae60; }
.fc-legend-dot.fc-pending   { background: #e74c3c; }

/* ── Calendar grid ────────────────────────────────────────────── */
.fc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.fc-cal-day-header {
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--mc-txt-hint);
    border-top: 1px solid var(--mc-border);
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-bg);
}
.fc-cal-day-header.fc-weekend { color: #e74c3c; }

/* ── Day cells ────────────────────────────────────────────────── */
.fc-cal-cell {
    border-right: 1px solid var(--mc-border);
    border-bottom: 1px solid var(--mc-border);
    min-height: 90px;
    padding: 5px 6px 6px;
    background: var(--mc-surface);
    transition: background .12s;
    vertical-align: top;
}
.fc-cal-cell:nth-child(7n+1) { border-left: 1px solid var(--mc-border); }
.fc-cal-cell.fc-today        { background: #fffde7; }
.fc-cal-cell.fc-empty        { min-height: 90px; background: var(--mc-surface); }
.fc-cal-cell:not(.fc-empty):hover { background: #f5f8ff; cursor: pointer; }

.fc-cal-date {
    text-align: right;
    font-size: 12px;
    color: var(--mc-txt-hint);
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1;
}
.fc-cal-date.fc-weekend-num  { color: #e74c3c; }
.fc-cal-date.fc-today-num    { color: #d4a017; font-weight: 700; }

/* ── Event pills ──────────────────────────────────────────────── */
.fc-cal-event {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 5px !important;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    transition: opacity .12s;
}
.fc-cal-event:hover       { opacity: .85; }
.fc-ev-dot {
    width: 7px;
    height: 7px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.75);
    flex-shrink: 0;
}
.fc-cal-event.fc-ev-completed { background: #27ae60; color: #fff; }
.fc-cal-event.fc-ev-pending   { background: #e74c3c; color: #fff; }
.fc-ev-label  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fc-ev-count  { font-weight: 700; flex-shrink: 0; }

/* Loading state */
.fc-cal-grid-loading .fc-cal-cell { opacity: .45; pointer-events: none; }

/* Drop targets */
.fc-drop-active  { outline: 2px dashed var(--mc-primary-mid); }
.fc-drop-hover   { background: var(--mc-primary-lt) !important; }

/* ── Summary stats ────────────────────────────────────────────── */
.fc-cal-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 20px;
}
.fc-stat-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 12px !important;
    padding: 18px 22px;
    box-shadow: var(--mc-shadow);
}
/* Today cards get a subtle left accent border */
.fc-stat-card-today {
    border-left: 3px solid var(--mc-primary-mid) !important;
}
.fc-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    color: var(--mc-txt-hint);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.fc-stat-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--mc-primary);
    line-height: 1;
    margin-bottom: 4px;
}
/* Today completed = green accent; Today pending = red accent; Upcoming = blue */
.fc-stat-value-today-comp { color: #27ae60; }
.fc-stat-value-today-pend { color: #e74c3c; }
.fc-stat-value-upcoming   { color: #2980b9; }
/* Clickable today KPI cards */
.fc-stat-card.fc-stat-clickable {
    cursor: pointer;
    transition: transform .13s, box-shadow .13s, border-color .13s;
}
.fc-stat-card.fc-stat-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.13) !important;
    border-color: var(--mc-primary-mid) !important;
}
.fc-stat-card.fc-stat-clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
}
.fc-stat-card.fc-stat-clickable::after {
    content: '\f08e';                      /* fa-external-link  (FA4) */
    font-family: FontAwesome !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 11px;
    line-height: 1;
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--mc-primary);
    opacity: .55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
}
.fc-stat-card { position: relative; }
.fc-stat-sub {
    font-size: 11px;
    color: var(--mc-txt-hint);
}
.fc-stat-note {
    font-size: 10px;
    color: #27ae60;
    font-style: italic;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: .85;
}

/* ── No-follow-up enquiry sidebar ─────────────────────────────── */
.fc-cal-sidebar {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 12px !important;
    box-shadow: var(--mc-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}
.fc-cal-sidebar-header {
    padding: 10px 14px;
    background: var(--mc-bg);
    border-bottom: 1px solid var(--mc-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--mc-txt);
}
.fc-cal-sidebar-body {
    height: 142mm;
    overflow-y: auto;
    padding: 8px;
}
.fc-cal-sidebar-body::-webkit-scrollbar { width: 4px; }
.fc-cal-sidebar-body::-webkit-scrollbar-thumb { background: var(--mc-border-md); border-radius: 4px !important; }
.fc-cal-qs-wrap { padding: 8px; border-bottom: 1px solid var(--mc-border); }

/* ── CalendarModal date-filter strip ──────────────────────────── */
/* Outer pill — wraps both date inputs + search button */
.fc-cal-date-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 30px !important;
    padding: 3px 4px 3px 12px;
    flex-shrink: 0;
}
/* Inputs sit inline inside the pill — no own border/bg */
.fc-cal-date-input {
    height: 26px;
    width: 96px;
    padding: 0 4px;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 500;
    outline: none !important;
    box-shadow: none !important;
}
.fc-cal-date-input::placeholder { color: rgba(255,255,255,.55); }
/* Arrow separator */
.fc-cal-date-sep {
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0;
}
/* Search button — circular glass button inside the pill */
.fc-cal-search-btn {
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.25) !important;
    color: #fff !important;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
    padding: 0 !important;
}
.fc-cal-search-btn:hover {
    background: rgba(255,255,255,.42) !important;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .fc-cal-stats        { grid-template-columns: repeat(3, 1fr); }
    .fc-cal-month-title  { font-size: 22px; }
    .fc-cal-event        { font-size: 10px; padding: 2px 5px; }
    .fc-cal-nav-btn      { width: 30px; height: 30px; font-size: 12px; }
    .fc-cal-nav-area     { flex: 0 0 34px; }
    .fc-cal-date-input   { width: 90px; }
    .fc-cal-month-center { min-width: 0; }
}
@media (max-width: 576px) {
    .fc-cal-stats              { grid-template-columns: repeat(2, 1fr); }
    .fc-stat-value             { font-size: 28px; }
    .fc-cal-day-header         { font-size: 9px; letter-spacing: 0; padding: 6px 2px; }
    .fc-cal-date               { font-size: 10px; }
    /* keep pills visible but ultra-compact: hide the "Completed"/"Pending" text,
       show only  ● (5)  so it fits in a narrow 7-column cell */
    .fc-cal-event              { padding: 2px 4px; gap: 3px; font-size: 9px; }
    .fc-cal-event .fc-ev-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FULLCALENDAR v2 SKIN — scoped to .fc-cal-fc-wrapper
   All rules use !important to beat FullCalendar's own specificity.
   ═══════════════════════════════════════════════════════════════ */

/* Card padding reset — FullCalendar owns its own inner spacing */
.fc-cal-card.fc-cal-fc-wrapper { padding: 0 !important; }

/* ── Toolbar container ────────────────────────────────────────── */
.fc-cal-fc-wrapper .fc-toolbar {
    padding: 18px 20px 12px !important;
    margin: 0 !important;
    background: transparent;
    border-bottom: 1px solid var(--mc-border);
    flex-wrap: wrap;
    gap: 8px;
}
/* Stack month title above legend */
.fc-cal-fc-wrapper .fc-toolbar .fc-center {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ── Prev / Next buttons ──────────────────────────────────────── */
.fc-cal-fc-wrapper .fc-button,
.fc-cal-fc-wrapper .fc-button.fc-state-default,
.fc-cal-fc-wrapper .fc-button.fc-corner-left,
.fc-cal-fc-wrapper .fc-button.fc-corner-right {
    background: var(--mc-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--mc-primary) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.fc-cal-fc-wrapper .fc-button:hover,
.fc-cal-fc-wrapper .fc-button.fc-state-hover {
    background: var(--mc-primary-dk) !important;
    border-color: var(--mc-primary-dk) !important;
}
.fc-cal-fc-wrapper .fc-button:focus,
.fc-cal-fc-wrapper .fc-button:active,
.fc-cal-fc-wrapper .fc-button.fc-state-active,
.fc-cal-fc-wrapper .fc-button.fc-state-down {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--mc-primary-lt) !important;
}

/* ── Month title + legend (injected via viewRender) ──────────── */
.fc-cal-fc-wrapper .fc-center .fc-cal-month-title {
    font-size: 26px;
    font-weight: 300;
    color: var(--mc-txt);
    letter-spacing: -0.3px;
    line-height: 1.1;
    margin-bottom: 8px;
    font-family: 'Manrope', sans-serif;
}
.fc-cal-fc-wrapper .fc-center .fc-cal-month-title em {
    font-style: italic;
    color: var(--mc-txt-hint);
    font-family: 'Manrope', Georgia, serif;
    font-weight: 300;
}
.fc-cal-fc-wrapper .fc-center .fc-cal-legend { justify-content: center; }

/* ── Day-of-week headers ──────────────────────────────────────── */
.fc-cal-fc-wrapper .fc-day-header {
    padding: 8px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mc-txt-hint);
    background: var(--mc-bg) !important;
    border-color: var(--mc-border) !important;
}
.fc-cal-fc-wrapper .fc-day-header.fc-sat,
.fc-cal-fc-wrapper .fc-day-header.fc-sun { color: #e74c3c !important; }

/* ── Grid cell borders ────────────────────────────────────────── */
.fc-cal-fc-wrapper td,
.fc-cal-fc-wrapper .fc-day,
.fc-cal-fc-wrapper .fc-week { border-color: var(--mc-border) !important; }

/* ── Day number ───────────────────────────────────────────────── */
.fc-cal-fc-wrapper .fc-day-number {
    font-size: 12px;
    color: var(--mc-txt-hint);
    font-weight: 500;
    padding: 4px 6px !important;
}
.fc-cal-fc-wrapper .fc-sat .fc-day-number,
.fc-cal-fc-wrapper .fc-sun .fc-day-number { color: #e74c3c; }
.fc-cal-fc-wrapper .fc-today .fc-day-number { color: #c89b00; font-weight: 700; }
.fc-cal-fc-wrapper .fc-other-month .fc-day-number { visibility: hidden; }

/* ── Today highlight — uses theme primary light token ─────────── */
.fc-cal-fc-wrapper .fc-today { background: var(--mc-primary-lt) !important; }

/* ── Day cells are not clickable — remove pointer cursor ─────── */
.fc-cal-fc-wrapper .fc-day { cursor: default !important; }

/* ── Event pills ──────────────────────────────────────────────── */
.fc-cal-fc-wrapper .fc-day-grid-event {
    border: none !important;
    border-radius: 5px !important;
    margin: 1px 3px 2px !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: opacity .12s;
}
/* Default = completed (green) */
.fc-cal-fc-wrapper .fc-day-grid-event,
.fc-cal-fc-wrapper .fc-day-grid-event.fc-ev-completed {
    background: #27ae60 !important;
    color: #fff !important;
}
.fc-cal-fc-wrapper .fc-day-grid-event.fc-ev-pending {
    background: #e74c3c !important;
    color: #fff !important;
}
.fc-cal-fc-wrapper .fc-day-grid-event:hover { opacity: .82; }

/* Inner flex layout */
.fc-cal-fc-wrapper .fc-day-grid-event .fc-content {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    overflow: hidden;
    white-space: nowrap;
}
.fc-cal-fc-wrapper .fc-day-grid-event .fc-ev-dot {
    width: 7px;
    height: 7px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.75);
    flex-shrink: 0;
}
.fc-cal-fc-wrapper .fc-day-grid-event .fc-ev-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.fc-cal-fc-wrapper .fc-day-grid-event .fc-ev-count {
    font-weight: 700;
    flex-shrink: 0;
}

/* ── FullCalendar responsive overrides ────────────────────────── */
@media (max-width: 860px) {
    .fc-cal-fc-wrapper .fc-center .fc-cal-month-title { font-size: 20px; }
    .fc-cal-fc-wrapper .fc-day-grid-event             { font-size: 10px !important; }
    .fc-cal-fc-wrapper .fc-button                     { width: 30px !important; height: 30px !important; font-size: 12px !important; }
    .fc-cal-fc-wrapper .fc-toolbar                    { padding: 14px 14px 10px !important; }
}
@media (max-width: 576px) {
    .fc-cal-fc-wrapper .fc-day-header                           { font-size: 9px !important; letter-spacing: 0; padding: 6px 2px !important; }
    .fc-cal-fc-wrapper .fc-day-grid-event                       { font-size: 9px !important; }
    .fc-cal-fc-wrapper .fc-day-grid-event .fc-content           { padding: 2px 4px; gap: 3px; }
    .fc-cal-fc-wrapper .fc-day-grid-event .fc-ev-label          { display: none; }
    .fc-cal-fc-wrapper .fc-button                               { width: 26px !important; height: 26px !important; font-size: 11px !important; }
    .fc-cal-fc-wrapper .fc-center .fc-cal-month-title           { font-size: 16px; }
    .fc-cal-fc-wrapper .fc-toolbar                              { padding: 12px !important; }
}

/* "Submitted on" text below name in card header */
.mc-submitted-on {
    font-size: 11px;
    color: var(--mc-txt-hint);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ASSIGNMENT ROW  — compact single-row design
   ═══════════════════════════════════════════════════════════════ */

/* Round bottom corners when last child in card body */
.mc-assign-row:last-child {
    border-radius: 0 0 12px 12px !important;
}

/* ── "Assigned to X" read-only label ─────────────────────────── */
.mc-assign-label {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   12.5px;
    color:       var(--mc-txt);
    padding:     2px 0;
}
.mc-assign-label .fa {
    color:      var(--mc-primary);
    font-size:  14px;
    flex-shrink: 0;
}

/* ── Pencil edit button ──────────────────────────────────────── */
.mc-assign-edit-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    border:          1px solid var(--mc-border);
    border-radius:   6px !important;
    background:      var(--mc-surface);
    color:           var(--mc-primary);
    cursor:          pointer;
    flex-shrink:     0;
    padding:         0;
    font-size:       11px;
    transition:      background .15s, border-color .15s;
}
.mc-assign-edit-btn:hover {
    background:   var(--mc-primary-lt);
    border-color: var(--mc-primary-mid);
}
.mc-assign-edit-btn i.fa { font-family: FontAwesome !important; }

/* Show/hide wrapper — controlled by inline style via jQuery */
.mc-assign-form { display: block; }

/* ── Compact form — CSS GRID so inner content cannot break layout ─
   Grid columns: [title-chip] [input — grows] [Save+Cancel]
   Even if ET_Autocomplete renders width:100% internally,
   the grid column constrains it to its cell.                  */
.mc-assign-form-inner {
    width:       100%   !important;
    display:     grid   !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows:    auto auto     !important;
    grid-template-areas:
        "title  input  actions"
        "error  error  error"  !important;
    align-items: center         !important;
    gap:         0 10px         !important;
    row-gap:     4px            !important;
    /* reset old box-model */
    background:  transparent    !important;
    border:      none           !important;
    border-radius: 0            !important;
    padding:     4px 0          !important;
    margin-top:  0              !important;
    text-align:  left           !important;
}

/* ── Title chip ── grid-area: title ──────────────────────────── */
.mc-assign-form-header {
    grid-area:     title       !important;
    padding:       0           !important;
    border:        none        !important;
    white-space:   nowrap;
    align-self:    center;
}
.mc-assign-form-title {
    display:       inline-flex !important;
    align-items:   center;
    gap:           5px;
    font-size:     11.5px;
    font-weight:   700;
    color:         var(--mc-primary);
    white-space:   nowrap;
    padding:       4px 10px 4px 8px;
    background:    var(--mc-primary-lt);
    border:        1px solid var(--mc-primary-mid) !important;
    border-radius: 20px !important;
    line-height:   1.2;
    user-select:   none;
}
.mc-assign-form-title i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* ── Autocomplete ── grid-area: input ────────────────────────── */
.mc-assign-autocomplete-wrap {
    grid-area:  input !important;
    min-width:  0;          /* prevent grid blowout */
    width:      100%;
    align-self: center;
}
/* Constrain the ET_Autocomplete wrapper and its input */
.mc-assign-autocomplete-wrap .et-ac-wrap {
    display:   block   !important;
    width:     100%    !important;
    max-width: 100%    !important;
}
.mc-assign-autocomplete-wrap input[type="text"] {
    display:       block         !important;
    width:         100%          !important;
    max-width:     100%          !important;
    height:        33px          !important;
    padding:       0 10px        !important;
    font-size:     12.5px        !important;
    border-radius: 8px           !important;
    border:        1.5px solid var(--mc-border) !important;
    background:    #fff          !important;
    color:         var(--mc-txt) !important;
    outline:       none;
    box-sizing:    border-box    !important;
    transition:    border-color .15s, box-shadow .15s;
    line-height:   33px;
}
.mc-assign-autocomplete-wrap input[type="text"]:focus {
    border-color: var(--mc-primary)              !important;
    box-shadow:   0 0 0 3px rgba(30,111,245,.10) !important;
}
.mc-assign-autocomplete-wrap input[type="text"]::placeholder { color: var(--mc-txt-hint); }

/* ── Buttons ── grid-area: actions ───────────────────────────── */
.mc-assign-form-actions {
    grid-area:   actions !important;
    display:     flex;
    gap:         6px;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    align-self:  center;
}

/* Save */
.mc-assign-save-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    height:        33px;
    padding:       0 14px;
    background:    var(--mc-primary);
    color:         #fff !important;
    border:        none !important;
    border-radius: 8px  !important;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background .15s, box-shadow .15s;
    line-height:   1;
}
.mc-assign-save-btn:hover {
    background: var(--mc-primary-dk);
    box-shadow: 0 3px 10px rgba(30,111,245,.30);
}
.mc-assign-save-btn i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* Cancel */
.mc-assign-cancel-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    height:        33px;
    padding:       0 12px;
    background:    var(--mc-surface);
    color:         var(--mc-txt-sec) !important;
    border:        1px solid var(--mc-border-md) !important;
    border-radius: 8px !important;
    font-size:     12px;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background .15s, color .15s;
    line-height:   1;
}
.mc-assign-cancel-btn:hover {
    background: var(--mc-bg);
    color:      var(--mc-txt) !important;
}
.mc-assign-cancel-btn i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* ── Validation error ── grid-area: error ────────────────────── */
.mc-assign-form-inner > .mc-field-error {
    grid-area:   error !important;
    margin-top:  0;
    padding-top: 1px;
    font-size:   11px;
}

/* ── Mobile ≤ 600px — stack vertically ──────────────────────── */
@media (max-width: 600px) {
    .mc-assign-form-inner {
        grid-template-columns: 1fr          !important;
        grid-template-areas:
            "title"
            "input"
            "actions"
            "error"              !important;
        gap: 6px 0               !important;
    }
    .mc-assign-form-actions { justify-content: flex-start; }
}

/* Phone line inside card header */
.mc-phone {
    font-size: 10.5px;
    color: var(--mc-txt-sec);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* ── Responsive tweaks for info-grid ───────────────────────────── */
@media (max-width: 992px) {
    .mc-info-grid { grid-template-columns: repeat(2, 1fr); }
    /* PURPOSE / REMARK / MESSAGE must stay full-width on 2-col grid */
    .mc-info-item-wide { grid-column: 1 / -1; }
    .mc-info-item-full { grid-column: 1 / -1; }
    /* restore separator for 3-col last col, remove for 2-col last col */
    .mc-info-item:nth-child(3n) { box-shadow: inset -1px 0 0 var(--mc-border); }
    .mc-info-item:nth-child(2n) { box-shadow: none; }
    /* full-span items: no right separator */
    .mc-info-item-wide,
    .mc-info-item-full { box-shadow: none; }
    /* first-row reset for 2-col
       Use .mc-info-grid > selector [0,3,0] to beat the base -n+4 suppressor [0,3,0] by source order */
    .mc-info-grid > .mc-info-item:nth-child(n+3)  { border-top: 1px solid var(--mc-border); }
    .mc-info-grid > .mc-info-item:nth-child(-n+2) { border-top: none; }
}
/* 600px breakpoint removed — 2-col is maintained down to 360px
   (the 360px rule in the main responsive section handles the 1-col fallback) */

/* ═══════════════════════════════════════════════════════════════
   PENDING FOLLOW-UP LIST  (pfu-*)
   Used by PendingFollowUpInfoPopUpList.cshtml
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ───────────────────────────────────────────── */
.pfu-wrapper {
    background: var(--mc-surface);
    border-radius: 12px !important;
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.pfu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface);
}
.pfu-total-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mc-txt);
}
.pfu-total-badge i.fa { font-family: FontAwesome !important; color: var(--mc-primary); }
.pfu-badge-num {
    background: var(--mc-primary);
    color: #fff;
    border-radius: 20px !important;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    display: inline-block;
}

/* ── View toggle ─────────────────────────────────────────────── */
.pfu-view-toggle {
    display: inline-flex;
    border: 1.5px solid var(--mc-border);
    border-radius: 8px !important;
    overflow: hidden;
}
.pfu-view-btn {
    background: var(--mc-surface) !important;
    border: none !important;
    color: var(--mc-txt-hint) !important;
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, color .15s;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.pfu-view-btn:not(:last-child) { border-right: 1.5px solid var(--mc-border) !important; }
.pfu-view-btn.active,
.pfu-view-btn:hover  { background: var(--mc-primary-lt) !important; color: var(--mc-primary) !important; }
.pfu-view-btn.active { font-weight: 600 !important; }
.pfu-view-btn i.fa   { font-family: FontAwesome !important; font-size: 12px; }

/* ── Table view ─────────────────────────────────────────────── */
.pfu-table-wrap {
    max-height: 60vh;
    overflow-y: auto;
}
.pfu-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
.pfu-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(135deg, var(--mc-primary-dk), var(--mc-primary));
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    padding: 12px 16px;
    border: none !important;
    white-space: nowrap;
}
.pfu-table thead th:last-child { text-align: center; }
.pfu-table thead th i.fa { font-family: FontAwesome !important; opacity: .8; }
.pfu-table tbody td {
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--mc-txt);
    border-bottom: 1px solid var(--mc-border);
    border-top: none !important;
    vertical-align: middle;
}
.pfu-table tbody tr:last-child td { border-bottom: none; }
.pfu-table tbody tr  { transition: background .12s; }
.pfu-table tbody tr:hover td { background: var(--mc-primary-lt); }
/* Row type overrides */
.pfu-row-today   td { background: #fff8e1 !important; font-weight: 600; }
.pfu-row-today:hover   td { background: #fff3cd !important; }
.pfu-row-overdue td { background: #fef2f2 !important; }
.pfu-row-overdue:hover td { background: #fee2e2 !important; }

/* ── Date cell ───────────────────────────────────────────────── */
.pfu-date-cell  { display: flex; flex-direction: column; gap: 2px; }
.pfu-date-main  { font-size: 13.5px; font-weight: 600; color: var(--mc-txt); }
.pfu-date-day   { font-size: 11px; color: var(--mc-txt-hint); }

/* ── Tag badges ─────────────────────────────────────────────── */
.pfu-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px !important;
    line-height: 1.4;
    margin-top: 3px;
    width: fit-content;
}
.pfu-tag i.fa        { font-family: FontAwesome !important; font-size: 9px; }
.pfu-tag-today       { background: #fff3cd; color: #92400e; }
.pfu-tag-overdue     { background: #fee2e2; color: #991b1b; }
.pfu-tag-upcoming    { background: #dcfce7; color: #166534; }

/* ── Count button ────────────────────────────────────────────── */
.pfu-count-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 30px;
    padding: 0 12px;
    background: var(--mc-primary) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 13px;
    font-weight: 700;
    border: none !important;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    user-select: none;
}
.pfu-count-btn:hover  { background: var(--mc-primary-dk) !important; box-shadow: 0 4px 12px rgba(0,0,0,.20); transform: translateY(-1px); }
.pfu-count-btn:active { transform: translateY(0); }
.pfu-count-cell       { text-align: center; }

/* ── Card view grid ─────────────────────────────────────────── */
.pfu-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 14px;
    padding: 16px;
}
.pfu-date-card {
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-border);
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform .14s, box-shadow .14s, border-color .14s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px 16px;
    gap: 4px;
    user-select: none;
}
.pfu-date-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-mid));
    border-radius: 0 !important;
}
.pfu-date-card:hover  { transform: translateY(-3px); box-shadow: var(--mc-shadow); border-color: var(--mc-primary-mid); }
.pfu-date-card:active { transform: translateY(0); }
/* Today card */
.pfu-card-today                { border-color: #f59e0b !important; }
.pfu-card-today::before        { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
/* Overdue card */
.pfu-card-overdue              { border-color: #ef4444 !important; }
.pfu-card-overdue::before      { background: linear-gradient(90deg, #ef4444, #f87171) !important; }
.pfu-card-day {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--mc-txt-hint);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 6px;
}
.pfu-card-date  { font-size: 14px; font-weight: 700; color: var(--mc-txt); line-height: 1.2; }
.pfu-card-count { font-size: 34px; font-weight: 800; color: var(--mc-primary); line-height: 1; margin: 6px 0 2px; }
.pfu-card-today   .pfu-card-count { color: #d97706; }
.pfu-card-overdue .pfu-card-count { color: #dc2626; }
.pfu-card-label { font-size: 10px; color: var(--mc-txt-hint); font-weight: 500; }

/* ── Empty state override ────────────────────────────────────── */
.pfu-wrapper .mc-empty-state { margin: 20px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pfu-toolbar      { gap: 8px; }
    .pfu-card-grid    { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pfu-table thead th,
    .pfu-table tbody td { padding: 9px 10px; }
}

/* ── Pending Follow-Up FAB (right-edge tab) ─────────────────── */

/* Slide-in entrance from right */
@keyframes pfuFabEntrance {
    from { transform: translateY(-50%) translateX(105%); opacity: 0; }
    to   { transform: translateY(-50%) translateX(0);    opacity: 1; }
}

.pfu-fab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9985;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Theme-aware gradient — follows AdminLTE skin */
    background: linear-gradient(135deg,
        var(--mc-primary-dk) 0%,
        var(--mc-primary)    55%,
        var(--mc-primary-hl) 100%);
    color: #fff !important;
    border: none !important;
    border-radius: 9px 0 0 9px !important;
    padding: 10px 6px 10px 8px;
    cursor: pointer;
    box-shadow:
        -4px 0 18px rgba(0,0,0,.28),
        0 2px 10px rgba(0,0,0,.14),
        inset 0  1px 0 rgba(255,255,255,.22),
        inset 1px 0  0 rgba(255,255,255,.10);
    transition: box-shadow .28s cubic-bezier(.4,0,.2,1),
                transform  .28s cubic-bezier(.4,0,.2,1),
                padding    .28s cubic-bezier(.4,0,.2,1);
    user-select: none;
    outline: none !important;
    font-family: 'Manrope','Manrope', system-ui, sans-serif;
    animation: pfuFabEntrance .50s .20s cubic-bezier(.34,1.56,.64,1) both;
}
.pfu-fab:hover {
    box-shadow:
        -8px 0 28px rgba(0,0,0,.38),
        0 4px 16px rgba(0,0,0,.20),
        inset 0  1px 0 rgba(255,255,255,.28),
        inset 1px 0  0 rgba(255,255,255,.18);
    padding-left: 10px;
    padding-right: 7px;
    transform: translateY(-50%) translateX(-4px);
}

/* Top shine hairline */
.pfu-fab::after {
    content: '';
    position: absolute;
    top: 0; left: 10px; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255,255,255,.50) 0%,
        rgba(255,255,255,.05) 100%);
    pointer-events: none;
}

/* Glowing left-edge accent revealed on hover */
.pfu-fab::before {
    content: '';
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 3px;
    border-radius: 0 4px 4px 0 !important;
    background: linear-gradient(180deg,
        rgba(255,255,255,.80) 0%,
        rgba(255,255,255,.28) 50%,
        rgba(255,255,255,.80) 100%);
    opacity: 0;
    transition: opacity .22s;
}
.pfu-fab:hover::before { opacity: 1; }

/* Icon wrapper — frosted glass circle */
.pfu-fab-icon-wrap {
    position: relative;
    width: 23px;
    height: 23px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.16);
    border: 1.5px solid rgba(255,255,255,.30);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 8px rgba(0,0,0,.14),
                inset 0 1px 0 rgba(255,255,255,.22);
    transition: background .22s, transform .22s, box-shadow .22s;
}
.pfu-fab:hover .pfu-fab-icon-wrap {
    background: rgba(255,255,255,.24);
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(0,0,0,.18),
                inset 0 1px 0 rgba(255,255,255,.30);
}

.pfu-fab-icon { font-size: 12px; line-height: 1; display: flex; color: #fff; }
.pfu-fab-icon i.fa { font-family: FontAwesome !important; }

/* Bell-ring animation */
@keyframes pfuBellRing {
    0%,  55%, 100% { transform: rotate(0deg);   }
    60%            { transform: rotate(-18deg);  }
    67%            { transform: rotate(18deg);   }
    74%            { transform: rotate(-11deg);  }
    81%            { transform: rotate(11deg);   }
    88%            { transform: rotate(-5deg);   }
    95%            { transform: rotate(0deg);    }
}
.pfu-fab-icon i.fa { animation: pfuBellRing 4s ease-in-out infinite; }

/* ── Red notification dot ────────────────────────────────────── */
.pfu-fab-notif-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 6px;
    height: 6px;
    background: #ff4757;
    border-radius: 50% !important;
    border: 1.5px solid var(--mc-primary);
    animation: pfuDotPulse 2.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes pfuDotPulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.32); opacity: .82; }
}

/* Count badge — circle below icon */
.pfu-fab-badge {
    background: rgba(255,255,255,.95);
    color: var(--mc-primary);
    border-radius: 50% !important;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.20),
                0 0 0 1.5px rgba(255,255,255,.22);
    transition: transform .22s;
}
.pfu-fab:hover .pfu-fab-badge:not(.pfu-fab-loading) { transform: scale(1.10); }
.pfu-fab-badge.pfu-fab-loading {
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.70);
    font-size: 8px;
    box-shadow: none;
}
/* Pulse ring when loaded */
@keyframes pfuPulse {
    0%   { box-shadow: 0 1px 6px rgba(0,0,0,.16), 0 0 0 0   rgba(255,255,255,.65); }
    70%  { box-shadow: 0 1px 6px rgba(0,0,0,.16), 0 0 0 7px rgba(255,255,255,0);   }
    100% { box-shadow: 0 1px 6px rgba(0,0,0,.16), 0 0 0 0   rgba(255,255,255,0);   }
}
.pfu-fab-badge:not(.pfu-fab-loading) { animation: pfuPulse 2.6s ease-in-out infinite; }

/* Thin separator between icon and label */
.pfu-fab-sep {
    width: 14px;
    height: 1px;
    background: rgba(255,255,255,.30);
    border-radius: 1px !important;
    flex-shrink: 0;
}

/* Vertical text label — rotated upward */
.pfu-fab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ── pfu-drawer: width + scroll behaviour ───────────────────── */
/* Desktop: 40% viewport width.
   Override the base right:-640px so the drawer is always fully
   off-screen when closed (40vw can exceed 640px on wide screens). */
.pfu-drawer {
    width: 40vw;
    min-width: 360px;
    right: -50vw;          /* closed: fully hidden (50 > 40) */
}
.pfu-drawer.is-open { right: 0; }   /* open: flush to viewport edge */

/* Inside the drawer the body handles vertical scroll —
   remove the table-wrap's own max-height cap */
.pfu-drawer .pfu-table-wrap { max-height: none !important; }

/* Tablet & mobile → full width */
@media (max-width: 1024px) {
    .pfu-drawer          { width: 100vw; min-width: 0; right: -100vw; }
    .pfu-drawer.is-open  { right: 0; }
}

/* Count chip shown in drawer header */
.pfu-drawer-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.22);
    border-radius: 20px !important;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    min-width: 26px;
    margin-left: 2px;
}

/* ── PFU drawer — premium header gradient (theme-aware) ─────── */
.pfu-drawer .mc-drawer-header {
    background: linear-gradient(135deg,
        var(--mc-primary-dk) 0%,
        var(--mc-primary)    55%,
        var(--mc-primary-hl) 100%);
    box-shadow: 0 3px 16px rgba(0,0,0,.22);
}
.pfu-drawer::before {
    background: linear-gradient(90deg,
        rgba(255,255,255,.30) 0%,
        rgba(255,255,255,.70) 50%,
        rgba(255,255,255,.30) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   PFU DETAIL MODAL
   z-index 9992 / 9993 — sits ABOVE the drawer (9991)
   Theme-aware: uses --mc-primary-* variables
   ═══════════════════════════════════════════════════════════════ */

/* Backdrop */
.pfu-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,28,46,.58);
    z-index: 9992;
    display: none;
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.pfu-modal-backdrop.is-open { display: block; opacity: 1; }

/* Modal panel */
.pfu-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(.95);
    z-index: 9993;
    /* ── Sizing: fills most of the desktop viewport ── */
    width: 92vw;
    max-width: 1600px;
    min-width: 320px;
    max-height: 90vh;
    background: var(--mc-surface);
    border-radius: 16px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(15,28,46,.38),
        0 6px 20px rgba(15,28,46,.18);
    opacity: 0;
    pointer-events: none;
    transition: transform .30s cubic-bezier(.34,1.56,.64,1),
                opacity    .22s ease;
    font-family: 'Manrope','Manrope', system-ui, sans-serif;
}
.pfu-detail-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Top accent stripe */
.pfu-detail-modal::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--mc-primary-dk) 0%,
        var(--mc-primary-hl) 50%,
        var(--mc-primary-dk) 100%);
    flex-shrink: 0;
}

/* Restore FA inside modal */
.pfu-detail-modal i.fa,
.pfu-detail-modal i[class^="fa-"],
.pfu-detail-modal i[class*=" fa-"],
.pfu-detail-modal .fa:before,
.pfu-detail-modal [class^="fa-"]:before,
.pfu-detail-modal [class*=" fa-"]:before { font-family: FontAwesome !important; }

/* Header */
.pfu-detail-modal-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: linear-gradient(135deg,
        var(--mc-primary-dk) 0%,
        var(--mc-primary)    55%,
        var(--mc-primary-hl) 100%);
    color: #fff;
    flex-shrink: 0;
}
.pfu-detail-modal-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pfu-detail-modal-title i.fa { opacity: .85; }

/* Close button */
.pfu-detail-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.15) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    outline: none !important;
    padding: 0 !important;
    line-height: 1;
    transition: background .15s !important;
}
.pfu-detail-modal-close:hover { background: rgba(255,255,255,.30) !important; }

/* Body — scrollable */
.pfu-detail-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--mc-bg);
    padding: 0;
}
.pfu-detail-modal-body::-webkit-scrollbar       { width: 5px; }
.pfu-detail-modal-body::-webkit-scrollbar-track  { background: transparent; }
.pfu-detail-modal-body::-webkit-scrollbar-thumb  { background: var(--mc-border-md); border-radius: 3px !important; }

/* Loading spinner state */
.pfu-detail-modal-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 48px 24px;
    color: var(--mc-txt-hint);
    font-size: 13px;
}
.pfu-detail-modal-loader i.fa {
    color: var(--mc-primary);
    font-size: 18px;
}

/* ── Responsive widths ───────────────────────────────────────── */
/* Large desktop  ≥ 1400px  → 92 vw (already default, no cap below 1600px) */

/* Laptop / small desktop  1025 – 1399px */
@media (max-width: 1399px) {
    .pfu-detail-modal { width: 94vw; max-width: none; }
}

/* Tablet  641 – 1024px */
@media (max-width: 1024px) {
    .pfu-detail-modal { width: 96vw; max-height: 88vh; }
}

/* Mobile  ≤ 640px */
@media (max-width: 640px) {
    .pfu-detail-modal {
        width: 98vw;
        max-height: 93vh;
        top: 50%;
        left: 50%;
    }
    .pfu-detail-modal-hdr    { padding: 11px 14px; }
    .pfu-detail-modal-title  { font-size: 13px; }
}

/* ── Pagination bar ──────────────────────────────────────────── */
.pfu-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 16px;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface);
    /* Stick to bottom of the scrollable drawer body */
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.pfu-pag-info { font-size: 11.5px; color: var(--mc-txt-hint); font-weight: 500; }
.pfu-pag-info strong { color: var(--mc-txt); }
.pfu-pag-controls { display: inline-flex; align-items: center; gap: 4px; }
.pfu-pag-btn {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--mc-border) !important;
    border-radius: 7px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-txt) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.pfu-pag-btn:hover:not([disabled]) { background: var(--mc-primary-lt) !important; border-color: var(--mc-primary-mid) !important; color: var(--mc-primary) !important; }
.pfu-pag-btn[disabled] { opacity: .32; cursor: not-allowed; }
.pfu-pag-btn i.fa { font-family: FontAwesome !important; }
.pfu-pag-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px !important;
    background: var(--mc-primary) !important;
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    border: none !important;
    cursor: default;
    min-width: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   ENQUIRY DASHBOARD — QUICK-ACCESS NAV CARDS  (enq-nav-*)
   Used by IndexNew.cshtml
   ═══════════════════════════════════════════════════════════════ */

.enq-nav-wrapper {
    background: linear-gradient(135deg, #f4f7ff 0%, #eef2ff 100%);
    border: 1px solid var(--mc-border);
    border-radius: 16px !important;
    padding: 20px 20px 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(15,28,46,.05);
    font-family: 'Manrope', system-ui, sans-serif;
}

/* Section sub-label */
.enq-nav-heading {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--mc-txt-hint);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.enq-nav-heading i.fa { font-family: FontAwesome !important; font-size: 10px; color: var(--mc-primary); }
/* expand/collapse toggle — sits at the end of the heading row; the whole heading is clickable too */
.enq-nav-toggle-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: var(--mc-txt-hint);
    cursor: pointer;
}
.enq-nav-toggle-btn i { font-family: FontAwesome !important; font-size: 11px; transition: transform .2s ease; }
.enq-nav-wrapper.is-collapsed .enq-nav-heading { margin-bottom: 0; }
.enq-nav-wrapper.is-collapsed .enq-nav-grid { display: none; }
.enq-nav-wrapper.is-collapsed .enq-nav-toggle-btn i { transform: rotate(180deg); }

/* Flex row of cards */
.enq-nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Individual card */
.enq-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 18px 14px;
    background: #fff;
    border: 1.5px solid var(--mc-primary-mid);
    border-radius: 14px !important;
    text-decoration: none !important;
    color: var(--mc-txt) !important;
    cursor: pointer;
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(15,28,46,.06);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.enq-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(15,28,46,.11);
    border-color: var(--mc-primary-mid);
    text-decoration: none !important;
    color: var(--mc-txt) !important;
}
/* Bottom accent bar slides in on hover */
.enq-nav-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-mid));
    border-radius: 0 0 14px 14px !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s ease;
}
.enq-nav-card:hover::after { transform: scaleX(1); }

/* Icon box */
.enq-nav-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--mc-primary-lt) 0%, #dde8ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .16s;
}
.enq-nav-card:hover .enq-nav-icon {
    background: linear-gradient(135deg, #dde8ff 0%, #c7d9ff 100%);
}
.enq-nav-icon svg { width: 30px; height: 30px; }
/* Theme the icon fill paths */
.enq-nav-icon .iconfill { fill: var(--mc-primary) !important; }

/* Card label */
.enq-nav-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mc-txt);
    line-height: 1.3;
}
.enq-nav-card:hover .enq-nav-label { color: var(--mc-primary); }

/* "NEW" ribbon badge */
.enq-nav-badge-new {
    position: absolute;
    top: 9px;
    right: 9px;
    background: linear-gradient(90deg, #e53935, #ff7043);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(229,57,53,.35);
}

/* Responsive */
@media (max-width: 768px) {
    .enq-nav-grid    { gap: 8px; }
    .enq-nav-card    { min-width: 110px; max-width: none; padding: 14px 12px 12px; flex: 1 1 calc(50% - 8px); }
    .enq-nav-icon    { width: 46px; height: 46px; border-radius: 12px !important; }
    .enq-nav-label   { font-size: 11.5px; }
}
@media (max-width: 400px) {
    .enq-nav-card    { flex: 1 1 100%; max-width: none; flex-direction: row; text-align: left; padding: 12px 14px; gap: 12px; }
    .enq-nav-icon    { width: 40px; height: 40px; border-radius: 10px !important; flex-shrink: 0; }
    .enq-nav-card::after { display: none; }
}

/* Compact variant — used by IndexNew.cshtml (Old dashboard) and EnquiryAnalyticsDashboard_New.cshtml
   (New dashboard) so the quick-access strip takes minimal vertical space above the KPI row */
.enqad-quicknav-compact.enq-nav-wrapper {
    padding: 10px 14px 8px;
    margin-bottom: 12px;
    border-radius: 12px !important;
}
/* Same plain white card look on BOTH dashboards, matching the New dashboard's filter bar
   (.enqad-topbar) — replaces the old lavender-gradient background. --enqad-* vars are only actually
   declared inside .enqad-root (New dashboard), so a literal fallback is given for every var() here —
   it resolves to the identical value either way, since --enqad-card/-line/-shadow ARE exactly these
   values inside .enqad-root too; this just means the same rule works unscoped on the Old dashboard. */
.enqad-quicknav-compact.enq-nav-wrapper {
    background: var(--enqad-card, #ffffff);
    border: 1px solid var(--enqad-line, #e2e8f0);
    box-shadow: var(--enqad-shadow, 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08));
}
.enqad-quicknav-compact .enq-nav-heading {
    margin-bottom: 8px;
}
/* collapsed state must win over the compact variant's own margin-bottom above — same specificity
   (two classes each) so source order alone would let compact's 8px leak through when collapsed */
.enq-nav-wrapper.is-collapsed.enqad-quicknav-compact .enq-nav-heading { margin-bottom: 0; }
.enqad-quicknav-compact .enq-nav-grid {
    gap: 8px;
}
.enqad-quicknav-compact .enq-nav-card {
    flex-direction: row;
    text-align: left;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    min-width: 0;
    max-width: none;
    flex: 0 1 auto;
    border-radius: 10px !important;
}
.enqad-quicknav-compact .enq-nav-card:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(15,28,46,.09);
}
.enqad-quicknav-compact .enq-nav-card::after { display: none; }
.enqad-quicknav-compact .enq-nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px !important;
    flex-shrink: 0;
}
.enqad-quicknav-compact .enq-nav-icon svg { width: 17px; height: 17px; }
.enqad-quicknav-compact .enq-nav-label {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.enqad-quicknav-compact .enq-nav-badge-new {
    top: 2px;
    right: 2px;
    font-size: 7px;
    padding: 1px 5px;
}
@media (max-width: 480px) {
    .enqad-quicknav-compact .enq-nav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .enqad-quicknav-compact .enq-nav-card {
        width: auto;
        min-width: 0;
        padding: 7px 8px;
        gap: 6px;
    }
    .enqad-quicknav-compact .enq-nav-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px !important;
    }
    .enqad-quicknav-compact .enq-nav-icon svg { width: 14px; height: 14px; }
    .enqad-quicknav-compact .enq-nav-label {
        font-size: 10.5px;
    }
    .enqad-quicknav-compact .enq-nav-badge-new {
        top: 1px;
        right: 1px;
        font-size: 6px;
        padding: 1px 3px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SARV CALL INITIATE MODAL  (SARVCallInitiate_Enquiry.cshtml)
   ═══════════════════════════════════════════════════════════════ */

/* ── mc-modal-header-success — green gradient (phone / call) ─── */
.mc-modal-header-success {
    background: linear-gradient(135deg,
        #15692a 0%,
        #28a745 55%,
        #48c76a 100%);
}

/* Ringing phone icon in the header */
.sarv-hdr-icon i.fa {
    animation: sarvRing 2.6s ease-in-out infinite;
    display: inline-block;
}
@keyframes sarvRing {
    0%,  55%, 100% { transform: rotate(0deg);   }
    60%            { transform: rotate(-20deg);  }
    67%            { transform: rotate( 20deg);  }
    74%            { transform: rotate(-12deg);  }
    81%            { transform: rotate( 12deg);  }
    88%            { transform: rotate( -6deg);  }
    95%            { transform: rotate(  0deg);  }
}

/* ── Dialog width ────────────────────────────────────────────── */
.sarv-modal-dialog { max-width: 720px; width: 90vw; }

/* ── Tab bar ─────────────────────────────────────────────────── */
.sarv-tab-bar {
    display:        flex;
    gap:            0;
    background:     var(--mc-bg, #f4f6fb);
    border-bottom:  2px solid rgba(0,0,0,.08);
    padding:        0 16px;
    flex-shrink:    0;
}
.sarv-tab {
    padding:        11px 20px;
    font-size:      13px;
    font-weight:    600;
    color:          #666;
    background:     transparent;
    border:         none;
    border-bottom:  3px solid transparent;
    margin-bottom:  -2px;
    cursor:         pointer;
    transition:     color .2s, border-color .2s;
    outline:        none !important;
    font-family:    inherit;
    white-space:    nowrap;
}
.sarv-tab:hover            { color: var(--mc-primary); }
.sarv-tab.active {
    color:          var(--mc-primary);
    border-bottom-color: var(--mc-primary);
}

/* ── Modal body ──────────────────────────────────────────────── */
/* max-height + overflow-y here so the MODAL BODY is the one scroll
   container — avoids nested-scroll issues caused by .modal-content
   having overflow:hidden which kills any inner chd-scroll */
.sarv-modal-body {
    padding:    20px 18px 18px;
    background: var(--mc-bg, #f4f6fb);
    max-height: calc(100vh - 175px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width:  thin;
    scrollbar-color:  var(--mc-primary, #2980b9) var(--mc-bg, #f4f6fb);
}
.sarv-modal-body::-webkit-scrollbar        { width: 6px; }
.sarv-modal-body::-webkit-scrollbar-track  { background: var(--mc-bg, #f4f6fb); }
.sarv-modal-body::-webkit-scrollbar-thumb  { background: var(--mc-primary-mid, #a8c7e8); border-radius: 6px !important; }
.sarv-modal-body::-webkit-scrollbar-thumb:hover { background: var(--mc-primary, #2980b9); }

/* ── 3-column call grid  [ FROM | ACTION | TO ] ─────────────── */
.sarv-call-grid {
    display:               grid;
    grid-template-columns: 1fr 110px 1fr;
    gap:                   16px;
    align-items:           stretch;
}

/* ── Contact cards (shared) ──────────────────────────────────── */
.sarv-contact-card {
    background:      #fff;
    border-radius:   12px !important;
    border:          1.5px solid rgba(0,0,0,.08);
    padding:         18px 16px 16px;
    box-shadow:      0 2px 10px rgba(0,0,0,.06);
    display:         flex;
    flex-direction:  column;
    gap:             14px;
    transition:      box-shadow .22s;
}
.sarv-contact-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.10); }

/* Accent top border — green = caller, red = receiver */
.sarv-from-card { border-top: 3px solid #28a745 !important; }
.sarv-to-card   { border-top: 3px solid #e74c3c !important; }

/* ── Card top (icon + label + sub) ──────────────────────────── */
.sarv-card-top {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    text-align:     center;
}
.sarv-card-icon {
    width:           50px;
    height:          50px;
    border-radius:   50% !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    flex-shrink:     0;
}
.sarv-icon-caller   { background: #e8f8ee; color: #28a745; }
.sarv-icon-receiver { background: #fdecea; color: #e74c3c; }

.sarv-card-label {
    font-size:   13px;
    font-weight: 700;
    color:       #333;
    letter-spacing: .2px;
    line-height: 1.3;
}
.sarv-card-sub {
    font-size:   11px;
    color:       #999;
    font-weight: 500;
    line-height: 1.2;
}

/* ── Field area ──────────────────────────────────────────────── */
.sarv-field-wrap {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.sarv-field-label {
    font-size:   12px;
    font-weight: 600;
    color:       #555;
    margin:      0;
}
.sarv-input {
    width:         100%  !important;
    padding:       9px 12px !important;
    border:        1.5px solid #dde3ec !important;
    border-radius: 8px !important;
    font-size:     14px !important;
    font-weight:   600;
    color:         #333 !important;
    background:    #f8f9fb !important;
    transition:    border-color .2s, box-shadow .2s;
    outline:       none !important;
    box-shadow:    none !important;
    display:       block;
}
.sarv-input:focus {
    border-color: var(--mc-primary) !important;
    background:   #fff !important;
    box-shadow:   0 0 0 3px rgba(41,128,185,.12) !important;
}
.sarv-select {
    width:         100% !important;
    padding:       9px 12px !important;
    border:        1.5px solid #dde3ec !important;
    border-radius: 8px !important;
    font-size:     14px !important;
    font-weight:   600;
    color:         #333 !important;
    background:    #f8f9fb !important;
    outline:       none !important;
    cursor:        pointer;
    transition:    border-color .2s;
    display:       block;
}
.sarv-select:focus { border-color: var(--mc-primary) !important; }

/* ── Centre action column ────────────────────────────────────── */
.sarv-action-col {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    padding:         8px 0;
}

/* Animated pulsing phone circle */
.sarv-phone-pulse {
    width:           50px;
    height:          50px;
    border-radius:   50% !important;
    background:      linear-gradient(135deg,
                         var(--mc-primary-dk, #1a5e8a) 0%,
                         var(--mc-primary,    #2980b9) 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-size:       20px;
    box-shadow:      0 4px 16px rgba(41,128,185,.38);
    animation:       sarvPulsing 2.4s ease-in-out infinite;
    flex-shrink:     0;
}
.sarv-phone-pulse i.fa { animation: sarvRing 2.6s ease-in-out infinite; }

@keyframes sarvPulsing {
    0%,100% { box-shadow: 0 4px 16px rgba(41,128,185,.38), 0 0 0  0   rgba(41,128,185,.38); }
    50%     { box-shadow: 0 4px 16px rgba(41,128,185,.38), 0 0 0 10px rgba(41,128,185, 0 ); }
}

/* Start Call button */
.sarv-start-btn {
    background:    linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color:         #fff !important;
    border:        none !important;
    border-radius: 24px !important;
    padding:       9px 16px !important;
    font-size:     12px !important;
    font-weight:   700 !important;
    cursor:        pointer;
    white-space:   nowrap;
    box-shadow:    0 3px 12px rgba(39,174,96,.35);
    transition:    transform .18s, box-shadow .18s;
    outline:       none !important;
    line-height:   1.4;
}
.sarv-start-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 18px rgba(39,174,96,.48) !important;
}
.sarv-start-btn:active { transform: translateY(0); }

/* ── Same-contact history section ────────────────────────────── */
.sarv-modal-body .pfu-wrapper,
.sarv-modal-body [id*="SARVContactNumberHistorydiv"] { margin-top: 16px; }

/* ── History pane body ───────────────────────────────────────── */
.sarv-history-body { min-height: 60px; padding: 6px 0; }

/* When chd-scroll is inside the SARV / Exotel / TATASmart modal,
   disable its own scroll — sarv-modal-body is the scroll container.
   This avoids the double-scroll / clipping problem caused by
   .mc-modal .modal-content { overflow:hidden } */
.sarv-history-body .chd-scroll {
    max-height:  none  !important;
    overflow-y:  visible !important;
    overflow-x:  visible !important;
    border-radius: 0 !important;
}
/* Also let chd-wrapper be transparent to overflow */
.sarv-history-body .chd-wrapper {
    overflow: visible !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sarv-modal-dialog { width: 97vw; }
    .sarv-call-grid {
        grid-template-columns: 1fr;
        grid-template-rows:    auto auto auto;
    }
    .sarv-action-col     { flex-direction: row; justify-content: center; padding: 4px 0; }
    .sarv-phone-pulse    { width: 38px; height: 38px; font-size: 16px; }
    .sarv-tab            { padding: 10px 14px; font-size: 12px; }
    .sarv-modal-body     { padding: 14px 10px 12px; max-height: calc(100vh - 140px); }
}

/* ═══════════════════════════════════════════════════════════════
   CALL HISTORY DETAILS  (chd-*)
   Shared by: SARVCallingHistoryDetails, ExotelCallingHistoryDetails,
              TATASmartCallingHistoryDetails
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ───────────────────────────────────────────── */
.chd-wrapper {
    border-radius:  10px !important;
    /* NOTE: do NOT add overflow:hidden here — it clips .chd-scroll's
       scrollbar and prevents the card list from scrolling.
       Corner-clipping is handled by .chd-hdr border-radius instead. */
    overflow:       visible;
    box-shadow:     0 2px 12px rgba(0,0,0,.08);
    background:     var(--mc-surface, #fff);
    font-family:    'Manrope','Manrope', system-ui, sans-serif;
}

/* ── Header bar ──────────────────────────────────────────────── */
.chd-hdr {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        12px 16px;
    /* Rounded top corners on the header itself — replaces the old
       overflow:hidden trick on .chd-wrapper */
    border-radius:  10px 10px 0 0 !important;
    overflow:       hidden;
    background:  linear-gradient(135deg,
                     var(--mc-primary-dk, #1a5e8a) 0%,
                     var(--mc-primary,    #2980b9) 55%,
                     var(--mc-primary-hl, #5dade2) 100%);
    color: #fff;
}
.chd-hdr-icon {
    width:            32px;
    height:           32px;
    border-radius:    50% !important;
    background:       rgba(255,255,255,.18);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        14px;
    flex-shrink:      0;
}
.chd-hdr-title {
    flex:           1;
    font-size:      14px;
    font-weight:    700;
    letter-spacing: .2px;
}
.chd-hdr-count {
    background:    rgba(255,255,255,.22);
    border-radius: 20px !important;
    padding:       3px 10px;
    font-size:     12px;
    font-weight:   700;
    min-width:     28px;
    text-align:    center;
}

/* ── View-toggle bar (TATASmart timeline / table) ────────────── */
.chd-view-toggle {
    display:       flex;
    gap:           8px;
    padding:       10px 14px;
    background:    var(--mc-bg, #f4f6fb);
    border-bottom: 1px solid rgba(0,0,0,.07);
    flex-wrap:     wrap;
}
.chd-vtbtn {
    padding:       6px 16px;
    font-size:     12px;
    font-weight:   600;
    border-radius: 20px !important;
    border:        1.5px solid rgba(0,0,0,.14);
    background:    #fff;
    color:         #555;
    cursor:        pointer;
    outline:       none !important;
    transition:    all .18s;
    font-family:   inherit;
}
.chd-vtbtn:hover  { border-color: var(--mc-primary); color: var(--mc-primary); }
.chd-vtbtn.active {
    background:   var(--mc-primary) !important;
    color:        #fff !important;
    border-color: var(--mc-primary) !important;
}

/* ── Scrollable body ─────────────────────────────────────────── */
.chd-scroll {
    max-height:      460px;
    overflow-y:      auto;   /* shows scrollbar only when needed  */
    overflow-x:      hidden;
    background:      var(--mc-bg, #f4f6fb);
    padding:         12px;
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    /* Firefox scrollbar styling */
    scrollbar-width:  thin;
    scrollbar-color:  var(--mc-primary, #2980b9) var(--mc-bg, #f4f6fb);
    border-radius:    0 0 10px 10px !important;
}
/* WebKit scrollbar — wider and more visible so users notice it */
.chd-scroll::-webkit-scrollbar        { width: 6px; }
.chd-scroll::-webkit-scrollbar-track  { background: var(--mc-bg, #f4f6fb); border-radius: 0 0 10px 10px !important; }
.chd-scroll::-webkit-scrollbar-thumb  { background: var(--mc-primary-mid, #a8c7e8); border-radius: 6px !important; }
.chd-scroll::-webkit-scrollbar-thumb:hover { background: var(--mc-primary, #2980b9); }

/* ── Individual call card ────────────────────────────────────── */
.chd-call-card {
    background:    #fff;
    border-radius: 10px !important;
    box-shadow:    0 1px 6px rgba(0,0,0,.07);
    /*overflow:      hidden;*/
    transition:    box-shadow .2s;
}
.chd-call-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.11); }

/* Card top bar — call number + direction badge + date */
.chd-card-top {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     9px 14px;
    background:  var(--mc-bg, #f4f6fb);
    border-bottom: 1.5px solid rgba(0,0,0,.06);
    flex-wrap:   wrap;
}
.chd-call-num {
    font-size:   13px;
    font-weight: 700;
    color:       #333;
    min-width:   50px;
}
.chd-dir-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 9px;
    border-radius:  20px !important;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .2px;
}
.chd-dir-out { background: #e8f8ee; color: #1a7f3c; }
.chd-dir-in  { background: #fdecea; color: #c0392b; }
.chd-date-chip {
    margin-left:   auto;
    font-size:     11px;
    color:         #888;
    background:    #eef0f4;
    padding:       3px 9px;
    border-radius: 20px !important;
    font-weight:   500;
}

/* ── Info grid ───────────────────────────────────────────────── */
.chd-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
}
.chd-cell {
    padding:       10px 14px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-right:  1px solid rgba(0,0,0,.05);
    display:       flex;
    flex-direction: column;
    gap:           4px;
    min-width:     0;
}
.chd-cell:nth-child(even) { border-right: none; }
.chd-cell-full {
    grid-column:  1 / -1;
    border-right: none;
}
.chd-cell:last-child,
.chd-cell-full:last-child { border-bottom: none; }

.chd-cell-label {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          #aaa;
}
.chd-cell-value {
    font-size:   13px;
    font-weight: 600;
    color:       #333;
    word-break:  break-all;
}
.chd-cell-mono { font-family: 'Courier New', Courier, monospace; }

/* ── Status pills ────────────────────────────────────────────── */
.chd-status-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        4px 10px;
    border-radius:  20px !important;
    font-size:      12px;
    font-weight:    600;
}
.chd-status-success { background: #e8f8ee; color: #1a7f3c; }
.chd-status-warning { background: #fff8e1; color: #d68910; }
.chd-status-danger  { background: #fdecea; color: #c0392b; }
.chd-status-muted   { background: #f0f2f5; color: #666;    }

/* ── Recording area ──────────────────────────────────────────── */
.chd-recording-area {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    padding-top: 4px;
}
.chd-audio {
    height:    32px;
    max-width: 240px;
    min-width: 120px;
    flex-shrink: 1;
}
.chd-dl-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         5px 11px;
    background:      #fff8e1;
    color:           #d68910;
    border:          1.5px solid #f0d060;
    border-radius:   6px !important;
    font-size:       11px;
    font-weight:     700;
    text-decoration: none !important;
    transition:      background .18s;
    flex-shrink:     0;
    cursor:          pointer;
}
.chd-dl-btn:hover { background: #fef3c7; color: #b7770d; text-decoration: none !important; }
.chd-no-rec {
    font-size:   12px;
    color:       #bbb;
    font-style:  italic;
}

/* ── Table view (TATASmart) ──────────────────────────────────── */
.chd-tbl-wrap {
    overflow-x: auto;
    background: var(--mc-bg, #f4f6fb);
    padding:    12px;
}
.chd-table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        12px;
    background:       #fff;
    /*border-radius:    8px !important;*/
    overflow:         hidden;
    box-shadow:       0 1px 6px rgba(0,0,0,.06);
}
.chd-table thead tr {
    background: linear-gradient(135deg,
        var(--mc-primary-dk, #1a5e8a) 0%,
        var(--mc-primary,    #2980b9) 100%);
}
.chd-table th {
    color:          #fff;
    padding:        10px 12px;
    font-weight:    700;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space:    nowrap;
    border:         none;
    text-align:     left;
}
.chd-table td {
    padding:       9px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    color:         #333;
    font-size:     12px;
    vertical-align: middle;
}
.chd-table tbody tr:last-child td { border-bottom: none; }
.chd-table tbody tr:hover         { background: #f8f9fb; }

/* ── Empty state ─────────────────────────────────────────────── */
.chd-empty {
    padding:        32px 20px;
    text-align:     center;
    background:     var(--mc-bg, #f4f6fb);
    border-radius:  10px !important;
    border:         1.5px dashed rgba(0,0,0,.10);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .chd-grid        { grid-template-columns: 1fr; }
    .chd-cell        { border-right: none; }
    .chd-cell-full   { grid-column: 1; }
    .chd-audio       { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   ENQUIRY HISTORY — SAME CONTACT NUMBER
   ════════════════════════════════════════════════════════════════ */
.ehs-tbl-scroll {
    max-height: 250px;
    overflow-y: auto;
}
.ehs-name   { font-weight: 600; color: #1a3c5e; }
.ehs-ref    { font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; color: #555; }
.ehs-school { font-size: 11px; color: #555; max-width: 140px; white-space: normal; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════
   SALES FUNNEL DASHBOARD — DETAILS REPORT  (sfd-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ───────────────────────────────────────────── */
.sfd-wrapper {
    background:    var(--mc-bg, #f4f6fb);
    border-radius: 10px !important;
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,.08);
    font-size:     13px;
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.sfd-tab-bar {
    display:         flex;
    align-items:     stretch;
    list-style:      none;
    margin:          0;
    padding:         0 16px;
    background:      #fff;
    border-bottom:   2px solid rgba(0,0,0,.08);
    gap:             0;
    flex-wrap:       wrap;
}
.sfd-tab-item        { display: flex; align-items: stretch; }
.sfd-tab {
    display:        flex;
    align-items:    center;
    gap:            5px;
    padding:        11px 18px;
    font-size:      13px;
    font-weight:    600;
    color:          #666;
    text-decoration: none !important;
    border-bottom:  3px solid transparent;
    margin-bottom:  -2px;
    transition:     color .18s, border-color .18s;
    white-space:    nowrap;
    cursor:         pointer;
    background:     none;
    border-top:     none;
    border-left:    none;
    border-right:   none;
}
.sfd-tab:hover                 { color: var(--mc-primary, #2980b9); }
.sfd-tab-item.active .sfd-tab  { color: var(--mc-primary, #2980b9); border-bottom-color: var(--mc-primary, #2980b9); }
.sfd-tab-tools {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-left: auto;
    padding:     6px 0;
    flex-wrap:   wrap;
}

/* ── Tab content scroll ──────────────────────────────────────── */
.sfd-tab-content {
    height:     120mm;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Student profile card ────────────────────────────────────── */
.sfd-profile {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       12px 16px;
    background:    #fff;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.sfd-avatar {
    width:        48px;
    height:       48px;
    border-radius: 50% !important;
    border:       2px solid #d2d6de;
    object-fit:   cover;
    flex-shrink:  0;
}
.sfd-profile-info  { display: flex; flex-direction: column; gap: 3px; }
.sfd-profile-name  { font-size: 14px; font-weight: 700; color: #1a3c5e; }
.sfd-profile-meta  { display: flex; flex-wrap: wrap; gap: 10px; }
.sfd-meta-item     { font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; }
.sfd-fees-paid     { color: #28a745; }
.sfd-fees-unpaid   { color: #e74c3c; }

/* ── Timeline list ───────────────────────────────────────────── */
.sfd-timeline {
    list-style: none;
    margin:     0;
    padding:    14px 14px 14px 54px;
    position:   relative;
    background: var(--mc-bg, #f4f6fb);
}
.sfd-timeline::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       33px;
    width:      2px;
    background: linear-gradient(to bottom,
        var(--mc-primary, #2980b9) 0%,
        rgba(41,128,185,.12) 100%);
}

/* Group label */
.sfd-tl-label { position: relative; margin: 10px 0 6px -38px; display: flex; }
.sfd-tl-label-text {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    background:     linear-gradient(135deg,
                        var(--mc-primary-dk, #1a5e8a) 0%,
                        var(--mc-primary,    #2980b9) 100%);
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding:        4px 12px;
    border-radius:  20px !important;
}

/* Timeline entry */
.sfd-tl-entry {
    position:   relative;
    margin-bottom: 8px;
    display:    flex;
    gap:        10px;
    align-items: flex-start;
}
.sfd-tl-icon {
    width:        30px;
    height:       30px;
    border-radius: 50% !important;
    background:   var(--mc-primary, #2980b9);
    color:        #fff;
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-size:    13px;
    flex-shrink:  0;
    margin-left:  -46px;
    z-index:      1;
    box-shadow:   0 2px 6px rgba(0,0,0,.18);
}
.sfd-icon-email   { background: #0073b7; }
.sfd-icon-sms     { background: #0073b7; }
.sfd-icon-wa      { background: #25d366; }
.sfd-icon-mic     { background: #e67e22; }
.sfd-icon-appt    { background: #27ae60; }
.sfd-icon-appt-no { background: #e74c3c; }
.sfd-icon-stage   { background: #0073b7; }
.sfd-icon-remark  { background: #0073b7; }
.sfd-icon-cal     { background: #0073b7; }
.sfd-icon-end     { background: #95a5a6; }

/* Card */
.sfd-tl-card {
    flex:          1;
    background:    #fff;
    border-radius: 8px !important;
    box-shadow:    0 1px 5px rgba(0,0,0,.07);
    overflow:      hidden;
    min-width:     0;
}
.sfd-tl-card-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    border-bottom:   1px solid rgba(0,0,0,.06);
    gap:             8px;
    flex-wrap:       wrap;
}
.sfd-tl-title  { font-size: 12px; font-weight: 700; color: #1a3c5e; }
.sfd-tl-meta   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sfd-days-pill {
    background:    var(--mc-primary-lt, #eaf3fb);
    color:         var(--mc-primary, #2980b9);
    font-size:     10px;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 10px !important;
    white-space:   nowrap;
}
.sfd-date-chip    { font-size: 11px; color: #888; white-space: nowrap; }
.sfd-log-type     { font-size: 11px; color: #888; }
.sfd-tl-body {
    padding:     10px 12px;
    font-size:   12px;
    color:       #444;
    line-height: 1.6;
}

/* Visited badge */
.sfd-visited-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    font-weight:   700;
    font-size:     11px;
    padding:       2px 8px;
    border-radius: 10px !important;
    margin-left:   6px;
}
.sfd-visited-yes { background: #e8f8ee; color: #27ae60; }
.sfd-visited-no  { background: #fdecea; color: #e74c3c; }

/* Send status pills */
.sfd-send-status          { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px !important; }
.sfd-status-sent          { background: #e8f8ee; color: #27ae60; }
.sfd-status-failed        { background: #fdecea; color: #e74c3c; }
.sfd-status-pending       { background: #fff8e1; color: #d68910; }

/* Eye / action buttons */
.sfd-eye-btn {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--mc-primary, #2980b9);
    padding:    2px 4px;
    font-size:  14px;
    line-height: 1;
}
.sfd-eye-btn:hover { color: var(--mc-primary-dk, #1a5e8a); }

/* No recording */
.sfd-no-rec { font-size: 12px; color: #e74c3c; display: flex; align-items: center; gap: 5px; }

/* ── Details table header ────────────────────────────────────── */
.sfd-detail-hdr {
    background:    linear-gradient(135deg,
                       var(--mc-primary-dk, #1a5e8a) 0%,
                       var(--mc-primary,    #2980b9) 100%);
    color:         #fff;
    padding:       10px 14px;
    margin:        -10px -12px 8px;
    border-radius: 0 !important;
}
.sfd-detail-hdr-row {
    font-size:     12px;
    margin-bottom: 3px;
    display:       flex;
    align-items:   center;
    gap:           5px;
}
.sfd-detail-hdr-row:last-child { margin-bottom: 0; }

/* ── Empty state ─────────────────────────────────────────────── */
.sfd-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        40px 20px;
    gap:            10px;
    text-align:     center;
    background:     var(--mc-bg, #f4f6fb);
    border-radius:  10px !important;
    border:         1.5px dashed rgba(0,0,0,.10);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sfd-tab-bar   { padding: 0 8px; }
    .sfd-tab       { padding: 9px 12px; font-size: 12px; }
    .sfd-tab-tools { margin-left: 0; width: 100%; padding: 4px 0; }
    .sfd-profile   { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════
   TIMELINE v2 — ACTIVITY FEED  (sfd2-*)
   Replaces the old sfd-timeline / sfd-tl-* classes
   ════════════════════════════════════════════════════════════════ */

/* ── Feed wrapper ────────────────────────────────────────────── */
.sfd2-feed {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        12px;
    background:     var(--mc-bg, #f4f6fb);
}

/* ── Stage section card ──────────────────────────────────────── */
.sfd2-section {
    border-radius: 10px !important;
    overflow:      hidden;
    box-shadow:    0 2px 10px rgba(0,0,0,.09);
}

/* ── Stage banner ────────────────────────────────────────────── */
.sfd2-banner {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 14px;
    background:  linear-gradient(135deg,
                     var(--mc-primary-dk, #1a5e8a) 0%,
                     var(--mc-primary,    #2980b9) 100%);
    color:       #fff;
}
.sfd2-banner-icon {
    width:            28px;
    height:           28px;
    border-radius:    50% !important;
    background:       rgba(255,255,255,.18);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        12px;
    flex-shrink:      0;
}
.sfd2-banner-title {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .5px;
    text-transform: uppercase;
    flex:           1;
}
.sfd2-banner-meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.sfd2-banner-days {
    background:    rgba(255,255,255,.20);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 10px !important;
    white-space:   nowrap;
}
.sfd2-banner-date {
    color:      rgba(255,255,255,.75);
    font-size:  11px;
    white-space: nowrap;
}

/* ── Event row ───────────────────────────────────────────────── */
.sfd2-ev {
    display:    flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.05);
    transition: background .15s;
}
.sfd2-ev:hover   { background: #f8fbff; }
.sfd2-ev:last-child { }

/* Left accent colour bar */
.sfd2-accent            { width: 4px; flex-shrink: 0; background: #bdc3c7; }
.sfd2-accent.acc-follow { background: #2980b9; }
.sfd2-accent.acc-appt-y { background: #27ae60; }
.sfd2-accent.acc-appt-n { background: #e74c3c; }
.sfd2-accent.acc-status { background: #8e44ad; }
.sfd2-accent.acc-remark { background: #f39c12; }
.sfd2-accent.acc-comm   { background: #16a085; }
.sfd2-accent.acc-email  { background: #2c3e50; }
.sfd2-accent.acc-sms    { background: #e67e22; }
.sfd2-accent.acc-wa     { background: #25d366; }
.sfd2-accent.acc-rec    { background: #c0392b; }
.sfd2-accent.acc-cal    { background: #7f8c8d; }

/* Icon column */
.sfd2-ev-ic {
    width:           36px;
    flex-shrink:     0;
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    padding-top:     11px;
    font-size:       13px;
    color:           #aaa;
}

/* Content area */
.sfd2-ev-body  { flex: 1; padding: 9px 12px 9px 2px; min-width: 0; }
.sfd2-ev-row1  {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    flex-wrap:       wrap;
    margin-bottom:   3px;
}
.sfd2-ev-label {
    font-size:      10px;
    font-weight:    700;
    color:          #888;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.sfd2-ev-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sfd2-ev-text  { font-size: 12px; color: #333; line-height: 1.5; }
.sfd2-ev-text:empty { display: none; }

/* ── End-of-feed marker ──────────────────────────────────────── */
.sfd2-end {
    text-align:  center;
    padding:     10px 0 4px;
    font-size:   11px;
    color:       #bbb;
    display:     flex;
    align-items: center;
    gap:         8px;
    justify-content: center;
}
.sfd2-end::before,
.sfd2-end::after {
    content: '';
    flex:    1;
    height:  1px;
    background: rgba(0,0,0,.10);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sfd2-feed    { padding: 8px; gap: 8px; }
    .sfd2-ev-ic   { width: 28px; }
    .sfd2-banner  { flex-wrap: wrap; }
    .sfd2-banner-meta { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   SALES FUNNEL — STAGE-WISE VERTICAL TIMELINE  (sft-*)
   Matches the "FollowUp Stage Wise History" screenshot design:
   vertical line · circle nodes · stage pills · clean white cards
   ═══════════════════════════════════════════════════════════════ */

/* Feed container — left gutter houses the line + nodes */
.sft-feed {
    position:    relative;
    padding:     6px 12px 24px 56px;
    background:  var(--mc-bg, #f4f6fb);
}

/* Continuous vertical line at center of node column */
.sft-feed::before {
    content:    '';
    position:   absolute;
    left:       35px;   /* center of 36px node: node starts at 18px, center=36px, line center=35-37px */
    top:        0;
    bottom:     0;
    width:      2px;
    background: #dde3ec;
    z-index:    0;
}

/* ── Stage / section label pill (floats on the line) ──────────── */
.sft-stage {
    position:   relative;
    display:    flex;
    align-items: center;
    margin:     16px 0 8px -38px;
    z-index:    2;
}

.sft-stage-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       5px 16px 5px 10px;
    border-radius: 50px !important;
    font-size:     11px;
    font-weight:   700;
    letter-spacing:.5px;
    text-transform: uppercase;
    color:         #fff;
    white-space:   nowrap;
    box-shadow:    0 2px 10px rgba(0,0,0,.20);
}
.sft-stage-pill i.fa { font-family: FontAwesome !important; font-size: 11px; }

/* Stage pill colour variants */
.sft-stage-alert   { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); }
.sft-stage-new     { background: linear-gradient(135deg, #047857 0%, #059669 100%); }
.sft-stage-warm    { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.sft-stage-hot     { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
.sft-stage-cold    { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }
.sft-stage-admit   { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.sft-stage-default { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }

/* ── Timeline entry: circle node + card ──────────────────────── */
.sft-entry {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    position:    relative;
    margin:      0 0 8px -38px;
    z-index:     1;
}

/* Circle node — centered on the vertical line */
.sft-node {
    width:         36px;
    height:        36px;
    border-radius: 50% !important;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     14px;
    color:         #fff;
    flex-shrink:   0;
    background:    #0e7490;
    border:        2.5px solid #fff;
    box-shadow:    0 2px 8px rgba(0,0,0,.20);
    position:      relative;
    z-index:       2;
}
.sft-node i.fa { font-family: FontAwesome !important; }

/* Node colour variants */
.sft-node-email  { background: #0369a1; }
.sft-node-sms    { background: #0891b2; }
.sft-node-wa     { background: #16a34a; }
.sft-node-call   { background: #374151; }
.sft-node-attend { background: #1d4ed8; }
.sft-node-status { background: #6d28d9; }
.sft-node-loc    { background: #0e7490; }
.sft-node-remark { background: #b45309; }
.sft-node-cal    { background: #475569; }
.sft-node-rec    { background: #be123c; }
.sft-node-alert  { background: #0e7490; }
.sft-node-form   { background: #64748b; }

/* ── Card ─────────────────────────────────────────────────────── */
.sft-card {
    flex:          1;
    background:    #fff;
    border-radius: 10px !important;
    box-shadow:    0 1px 3px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.05);
    overflow:      hidden;
    min-width:     0;
    transition:    box-shadow .15s;
}
.sft-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.12); }

/* Card header row */
.sft-card-hdr {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     9px 14px;
    flex-wrap:   wrap;
}

/* Card title */
.sft-card-title {
    font-size:   13px;
    font-weight: 600;
    color:       #1e293b;
    min-width:   0;
    flex-shrink: 1;
}

/* Type / channel badge chips */
.sft-type-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       2px 10px;
    border-radius: 50px !important;
    font-size:     11px;
    font-weight:   600;
    white-space:   nowrap;
    flex-shrink:   0;
}
.sft-type-badge i.fa { font-family: FontAwesome !important; }

.sft-badge-email  { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.sft-badge-sms    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.sft-badge-wa     { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.sft-badge-call   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.sft-badge-attend { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* Eye / view toggle button */
.sft-eye-btn {
    background:    none !important;
    border:        none !important;
    cursor:        pointer;
    color:         #94a3b8;
    font-size:     14px;
    padding:       2px 6px;
    border-radius: 6px !important;
    transition:    color .15s, background .15s;
    line-height:   1;
    flex-shrink:   0;
}
.sft-eye-btn:hover            { color: #0e7490; background: #f0f9ff !important; }
.sft-eye-btn i.fa             { font-family: FontAwesome !important; }

/* Right-side meta: date · time · days pill */
.sft-card-meta {
    display:         flex;
    align-items:     center;
    gap:             6px;
    margin-left:     auto;
    font-size:       11.5px;
    color:           #64748b;
    white-space:     nowrap;
    flex-shrink:     0;
    flex-wrap:       wrap;
    justify-content: flex-end;
}

.sft-days-pill {
    background:    #f1f5f9;
    color:         #475569;
    padding:       2px 8px;
    border-radius: 8px !important;
    font-size:     11px;
    font-weight:   700;
}

/* ── Card body (content shown below header) ───────────────────── */
.sft-card-body {
    padding:     7px 14px 10px;
    font-size:   12.5px;
    color:       #374151;
    border-top:  1px solid #f1f5f9;
    background:  #fafbfd;
    line-height: 1.5;
}
.sft-card-body:empty { display: none; }

/* Placeholder / empty text */
.sft-empty-text {
    color:       #94a3b8;
    font-style:  italic;
    font-size:   12px;
}

/* Recording row inside card body */
.sft-recording {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    padding-top: 4px;
}

/* No recording notice */
.sft-no-rec {
    font-size:   12px;
    color:       #e74c3c;
    display:     inline-flex;
    align-items: center;
    gap:         5px;
}
.sft-no-rec i.fa { font-family: FontAwesome !important; }

/* Sent-status chips on linked alerts */
.sft-sent-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           3px;
    padding:       1px 8px;
    border-radius: 10px !important;
    font-size:     10px;
    font-weight:   700;
}
.sft-sent-ok   { background: #dcfce7; color: #15803d; }
.sft-sent-fail { background: #fee2e2; color: #b91c1c; }
.sft-sent-pend { background: #fef9c3; color: #a16207; }

/* ── "End of timeline" footer ─────────────────────────────────── */
.sft-end {
    display:         flex;
    align-items:     center;
    gap:             8px;
    justify-content: center;
    padding:         10px 0 4px;
    font-size:       11px;
    color:           #94a3b8;
    margin-left:     -38px;
}
.sft-end::before,
.sft-end::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: #dde3ec;
}
.sft-end i.fa { font-family: FontAwesome !important; }

/* ── Date-label stage pill variant ────────────────────────────── */
.sft-stage-pill.sft-stage-date { background: linear-gradient(135deg, #334155 0%, #475569 100%); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 576px) {
    .sft-feed          { padding-left: 46px; }
    .sft-feed::before  { left: 26px; }
    .sft-stage,
    .sft-entry         { margin-left: -28px; }
    .sft-node          { width: 30px; height: 30px; font-size: 12px; }
    .sft-card-hdr      { padding: 8px 10px; gap: 6px; }
    .sft-card-meta     { font-size: 10.5px; }
    .sft-days-pill     { font-size: 10px; padding: 1px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   EMAIL / SMS HISTORY LOG  (ehl-*)
   Used in EmailSMSHistoryLog_Report and EmailSMSHistoryLog_Details
   ═══════════════════════════════════════════════════════════════ */

/* Legend row (Sent / Failed / Pending colour key in profile header) */
.ehl-legend {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-left: auto;
    flex-wrap:   wrap;
    padding:     4px 0;
    flex-shrink: 0;
}
.ehl-legend-label {
    font-size: 11px;
    color:     #64748b;
    font-weight: 600;
    white-space: nowrap;
}

/* Resend action button — same shape as sft-eye-btn but accented */
.ehl-resend-btn {
    background:    none !important;
    border:        none !important;
    cursor:        pointer;
    color:         #0369a1;
    font-size:     14px;
    padding:       2px 6px;
    border-radius: 6px !important;
    transition:    color .15s, background .15s;
    line-height:   1;
    flex-shrink:   0;
}
.ehl-resend-btn:hover            { color: #fff; background: #0369a1 !important; }
.ehl-resend-btn i.fa             { font-family: FontAwesome !important; }

/* ── Detail reveal panel (AJAX-loaded below a card row) ────────── */
.ehl-detail-panel {
    margin:        -4px 0 10px 10px;
    background:    #fff;
    border-radius: 0 10px 10px 10px !important;
    border-left:   4px solid #0369a1;
    box-shadow:    0 4px 16px rgba(3,105,161,.12);
    overflow:      hidden;
    animation:     ehlSlideIn .2s ease-out;
}

/* Panel header: subject + close button */
.ehl-detail-hdr {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    background:    #f0f9ff;
    border-bottom: 1px solid #e0f2fe;
}
.ehl-detail-subject {
    font-size:     13px;
    font-weight:   600;
    color:         #0c4a6e;
    flex:          1;
    min-width:     0;
}
.ehl-detail-subject i.fa { font-family: FontAwesome !important; color: #0369a1; }

/* Panel body: rendered email / SMS HTML */
.ehl-detail-body {
    padding:    14px 16px;
    font-size:  13px;
    line-height: 1.7;
    color:      #374151;
    max-height: 380px;
    overflow-y: auto;
}

/* Close button */
.ehl-close-btn {
    background:    none !important;
    border:        none !important;
    cursor:        pointer;
    color:         #94a3b8;
    font-size:     15px;
    padding:       3px 8px;
    border-radius: 6px !important;
    transition:    color .15s, background .15s;
    flex-shrink:   0;
    line-height:   1;
}
.ehl-close-btn:hover            { color: #dc2626; background: #fee2e2 !important; }
.ehl-close-btn i.fa             { font-family: FontAwesome !important; }

@keyframes ehlSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ═══════════════════════════════════════════════════════════════
   DUPLICATE SCANNER  (.dup-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer container when DuplicateScanFollowUpRequest ──────── */
.dup-scan-outer {
    border:        1px solid #f75d59;
    border-radius: 10px !important;
    padding:       10px;
    overflow:      hidden;
}

/* ── Alert / notice banner ───────────────────────────────────── */
.dup-notice {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       11px 14px;
    background:    #fff5f5;
    border:        1px solid #fecaca;
    border-left:   4px solid #dc2626;
    border-radius: 8px !important;
    font-size:     13px;
    color:         #7f1d1d;
    line-height:   1.6;
    margin-bottom: 12px;
}
.dup-notice-icon {
    width:           28px;
    height:          28px;
    background:      #fee2e2;
    border-radius:   50% !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #dc2626;
    font-size:       12px;
    flex-shrink:     0;
    margin-top:      2px;
}
.dup-notice-icon i.fa { font-family: FontAwesome !important; }
.dup-notice-body      { flex: 1; min-width: 0; }
.dup-notice strong    { color: #991b1b; }
.dup-notice-accent {
    color:       #dc2626;
    font-weight: 700;
}
.dup-notice-yellow {
    background:    #fff8b3;
    padding:       1px 5px;
    border-radius: 3px !important;
    font-weight:   600;
    color:         #78350f;
}

/* ── Match section header row ────────────────────────────────── */
.dup-match-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    margin:          16px 0 8px;
    flex-wrap:       wrap;
}
.dup-match-label {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       5px 14px;
    background:    #ecfdf5;
    border:        1px solid #a7f3d0;
    border-radius: 20px !important;
    font-size:     12.5px;
    font-weight:   600;
    color:         #065f46;
}
.dup-match-label i.fa { font-family: FontAwesome !important; }

.dup-total-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       5px 14px;
    background:    #fff1f2;
    border:        1px solid #fecdd3;
    border-radius: 20px !important;
    font-size:     12.5px;
    font-weight:   700;
    color:         #be123c;
}
.dup-total-badge i.fa { font-family: FontAwesome !important; }

/* ── Table wrapper (horizontal scroll) ──────────────────────── */
.dup-table-wrap {
    width:         100%;
    overflow-x:    auto;
    border-radius: 10px !important;
    border:        1px solid var(--mc-border);
    margin-bottom: 14px;
}

/* ── Current-enquiry row highlight (yellow) ──────────────────── */
.dup-current-row                    { background: #fffde7 !important; }
.dup-current-row > td               { background: #fffde7 !important; }

/* ── Duplicate-marked cell (pink — DuplicateRequest column) ──── */
.dup-marked-cell { background: #fce4ec !important; font-size: 12px; }

/* ── Lock warning text (fees paid / admission confirmed) ─────── */
.dup-lock-warn {
    font-size:   11px;
    font-weight: 600;
    color:       #dc2626;
    margin-top:  3px;
}
.dup-lock-warn i.fa { font-family: FontAwesome !important; }

/* ── Fees / status inline chip ───────────────────────────────── */
.dup-fees-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           3px;
    padding:       1px 7px;
    border-radius: 10px !important;
    font-size:     10.5px;
    font-weight:   600;
    vertical-align: middle;
    margin-left:   4px;
}
.dup-fees-chip.dup-paid   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.dup-fees-chip.dup-unpaid { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.dup-fees-chip i.fa       { font-family: FontAwesome !important; }

/* ── Copy button ─────────────────────────────────────────────── */
.dup-copy-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    border-radius:   5px !important;
    border:          1px solid var(--mc-border) !important;
    background:      var(--mc-surface) !important;
    color:           var(--mc-txt-sec) !important;
    cursor:          pointer;
    font-size:       11px;
    transition:      all .15s;
    padding:         0 !important;
    vertical-align:  middle;
    line-height:     1;
}
.dup-copy-btn:hover {
    background:   var(--mc-primary-lt) !important;
    border-color: var(--mc-primary-mid) !important;
    color:        var(--mc-primary) !important;
}
.dup-copy-btn i.fa { font-family: FontAwesome !important; }

/* ── Autocomplete box (hidden; shown by JS when checkbox ticked) */
.dup-autocomplete-box {
    display:       none;
    border:        1px solid var(--mc-primary-mid) !important;
    border-radius: 8px !important;
    padding:       8px;
    background:    var(--mc-bg);
    margin-top:    8px;
}

/* ── Save action bar ─────────────────────────────────────────── */
.dup-save-bar {
    padding:       14px 0 4px;
    border-top:    1px solid var(--mc-border);
    text-align:    center;
    margin-top:    14px;
}

/* ── Table link (child name → Sales Funnel) ──────────────────── */
.chd-link {
    text-decoration: underline !important;
    cursor:          pointer !important;
    color:           var(--mc-primary) !important;
    font-weight:     500;
}
.chd-link:hover { color: var(--mc-primary-dk) !important; }

/* ── Empty cell in table ─────────────────────────────────────── */
.chd-empty-cell {
    text-align:  center;
    padding:     20px !important;
    color:       #dc2626;
    font-weight: 600;
    font-size:   13px;
}

/* Responsive */
@media (max-width: 600px) {
    .dup-match-hdr { flex-direction: column; align-items: flex-start; }
    .dup-scan-outer { padding: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   SIBLING DETAILS  (.sib-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────── */
.sib-page            { display: flex; flex-direction: column; gap: 14px; }
.sib-hidden-trigger  { display: none !important; }

/* ── Generic panel card ──────────────────────────────────────── */
.sib-panel {
    background:    var(--mc-surface, #fff);
    border:        1px solid var(--mc-border, #e2e8f0);
    border-radius: 10px !important;
    overflow:      hidden;
    box-shadow:    0 2px 10px rgba(0,0,0,.06);
}

/* ── Search form body ────────────────────────────────────────── */
.sib-search-body { padding: 16px 18px 14px; }

.sib-search-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px 16px;
    margin-bottom:         12px;
}

.sib-field-label {
    display:        block;
    font-size:      11.5px;
    font-weight:    600;
    color:          var(--mc-txt-sec, #64748b);
    margin-bottom:  5px;
    letter-spacing: .01em;
}
.sib-required { color: #dc2626; margin-left: 2px; }

/* Override Bootstrap form-control inside search form */
.sib-search-body .form-control,
.sib-search-body input.jsUseVKEffect {
    height:        36px   !important;
    padding:       0 10px !important;
    font-size:     13px   !important;
    border:        1px solid var(--mc-border, #e2e8f0) !important;
    border-radius: 8px    !important;
    box-shadow:    none   !important;
    background:    #fff   !important;
    color:         var(--mc-txt, #1e293b) !important;
    transition:    border-color .15s !important;
    line-height:   36px   !important;
}
.sib-search-body .form-control:focus,
.sib-search-body input.jsUseVKEffect:focus {
    border-color: var(--mc-primary, #2980b9)           !important;
    box-shadow:   0 0 0 3px rgba(30,111,245,.10)       !important;
    outline:      none                                  !important;
}

.sib-search-footer {
    padding:     0 18px 14px;
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* ── Results / existing-data toolbar ─────────────────────────── */
.sib-toolbar {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       9px 14px;
    background:    var(--mc-bg, #f4f6fb);
    border-bottom: 1px solid var(--mc-border, #e2e8f0);
    flex-wrap:     wrap;
}
.sib-count-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 12px;
    background:    var(--mc-primary-lt, #ebf4ff);
    border:        1px solid var(--mc-primary-mid, #93c5fd);
    border-radius: 20px !important;
    font-size:     12px;
    font-weight:   600;
    color:         var(--mc-primary, #2980b9);
    white-space:   nowrap;
    flex-shrink:   0;
}
.sib-count-badge i.fa   { font-family: FontAwesome !important; }
.sib-selected-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 12px;
    background:    #f0fdf4;
    border:        1px solid #86efac;
    border-radius: 20px !important;
    font-size:     12px;
    font-weight:   600;
    color:         #166534;
    white-space:   nowrap;
    flex-shrink:   0;
    margin-left:   auto;
}
.sib-selected-badge i.fa { font-family: FontAwesome !important; }
.sib-filter-wrap { flex: 1; min-width: 160px; }
.sib-filter-wrap input[type="text"],
.sib-filter-wrap input[type="search"] {
    width:         100%   !important;
    height:        32px   !important;
    padding:       0 10px !important;
    font-size:     12.5px !important;
    border:        1px solid var(--mc-border) !important;
    border-radius: 7px    !important;
    box-shadow:    none   !important;
    background:    #fff   !important;
    color:         var(--mc-txt) !important;
    transition:    border-color .15s !important;
}
.sib-filter-wrap input:focus {
    border-color: var(--mc-primary) !important;
    outline:      none              !important;
    box-shadow:   0 0 0 3px rgba(30,111,245,.10) !important;
}

/* ── Table scroll wrapper ────────────────────────────────────── */
.sib-table-wrap {
    overflow-x:     auto;
    overflow-y:     auto;
    max-height:     420px;
    scrollbar-width:  thin;
    scrollbar-color:  var(--mc-primary, #2980b9) var(--mc-bg, #f4f6fb);
}
.sib-table-wrap::-webkit-scrollbar        { width: 5px; height: 5px; }
.sib-table-wrap::-webkit-scrollbar-track  { background: var(--mc-bg, #f4f6fb); }
.sib-table-wrap::-webkit-scrollbar-thumb  { background: var(--mc-primary-mid, #93c5fd); border-radius: 4px !important; }
.sib-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--mc-primary, #2980b9); }

/* Checkbox cell */
.sib-chk-cell                       { width: 44px; text-align: center !important; }
.sib-chk-cell input[type="checkbox"],
.sib-chk-cell input[type="text"]    { cursor: pointer; width: 15px; height: 15px; vertical-align: middle; }

/* Delete icon button */
.sib-del-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   7px !important;
    border:          1px solid #fecaca !important;
    background:      #fff5f5 !important;
    color:           #dc2626 !important;
    cursor:          pointer;
    font-size:       13px;
    transition:      background .15s, border-color .15s;
    padding:         0 !important;
}
.sib-del-btn:hover  { background: #fee2e2 !important; border-color: #f87171 !important; }
.sib-del-btn i.fa   { font-family: FontAwesome !important; }

/* ── Save / action bar ───────────────────────────────────────── */
.sib-save-bar {
    padding:     12px 16px;
    border-top:  1px solid var(--mc-border, #e2e8f0);
    background:  var(--mc-bg, #f4f6fb);
    display:     flex;
    align-items: center;
    gap:         10px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
    .sib-search-grid    { grid-template-columns: 1fr; }
    .sib-toolbar        { flex-direction: column; align-items: stretch; }
    .sib-selected-badge { margin-left: 0; }
}


/* ████████████████████████████████████████████████████████████████████
   PARTITION 3 — POST ADMISSION PROCESS CARDS
   ████████████████████████████████████████████████████████████████████
   Classes   : pac-*
   Version   : 2.0.0
   Updated   : 2026-06-19
   Reference : student-status-cards.html
   Skin vars : --mc-primary / --mc-primary-lt / --mc-primary-mid
               set per body.skin-* in PARTITION 2 above
   ████████████████████████████████████████████████████████████████████ */

/* ── Design tokens (scoped; cascade to all pac-* children) ──────── */
.pac-card {
    --pac-ink:       #0D0F14;
    --pac-ink-2:     #3A3F4E;
    --pac-ink-3:     #7C8294;
    --pac-ink-4:     #B4B9C8;
    --pac-surface:   #FFFFFF;
    --pac-lift:      #FAFBFD;
    --pac-border:    #E3E6EF;
    --pac-border-2:  #CDD1DF;

    /* Semantic status colors — fixed, not skin-dependent */
    --pac-emerald:   #0B7B57;  --pac-emerald-l: #E3F5EE;  --pac-emerald-b: #B4E3D1;
    --pac-gold:      #946400;  --pac-gold-l:    #FFF7E6;  --pac-gold-b:    #FFE0A3;
    --pac-rose:      #C0392B;  --pac-rose-l:    #FDECEA;  --pac-rose-b:    #F5B7B1;

    --pac-r-md:  10px;
    --pac-r-lg:  14px;
    --pac-r-xl:  18px;
    --pac-sh:    0 1px 3px rgba(13,15,20,.06), 0 4px 16px rgba(13,15,20,.05);
    --pac-sh-h:  0 8px 28px rgba(13,15,20,.10), 0 2px 8px rgba(13,15,20,.06);
    --pac-t:     all .18s cubic-bezier(.4,0,.2,1);
}

/* ── Card container ─────────────────────────────────────────────── */
.pac-card {
    background:    var(--pac-surface);
    border:        1.5px solid var(--pac-border);
    border-radius: var(--pac-r-xl) !important;
    overflow:      hidden;
    box-shadow:    var(--pac-sh);
    transition:    var(--pac-t);
    font-family:   'Sora', 'Manrope', system-ui, sans-serif !important;
    font-size:     13px;
    color:         var(--pac-ink);
    -webkit-font-smoothing: antialiased;
    animation:     pac-fadeUp .35s cubic-bezier(.4,0,.2,1) both;
}
.pac-card:hover { box-shadow: var(--pac-sh-h); }

.pac-card * { font-family: 'Sora', 'Manrope', system-ui, sans-serif !important; }

@keyframes pac-fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Header ─────────────────────────────────────────────────────── */
.pac-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         11px 16px;
    border-bottom:   1.5px solid var(--pac-border);
    background:      var(--pac-lift);
    gap:             10px;
}
.pac-head-left {
    display:     flex;
    align-items: center;
    gap:         10px;
    min-width:   0;
    flex:        1;
}

/* Sequence number badge — color set inline per-card by status */
.pac-seq {
    width:           26px;
    height:          26px;
    border-radius:   50% !important;
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       11px;
    font-weight:     700;
    flex-shrink:     0;
    box-shadow:      0 2px 6px rgba(13,15,20,.20);
    font-family:     'JetBrains Mono', 'Courier New', monospace !important;
}

.pac-name {
    font-size:      13.5px;
    font-weight:    700;
    color:          var(--pac-ink);
    letter-spacing: -.2px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.pac-name i {
    font-size:    11px;
    color:        var(--pac-ink-4);
    margin-right: 5px;
}
.pac-uid {
    color:       var(--pac-ink-3);
    font-weight: 500;
    font-size:   13px;
}

/* Collapse/toggle button */
.pac-toggle-btn {
    width:           30px;
    height:          30px;
    border-radius:   var(--pac-r-md) !important;
    border:          1.5px solid var(--pac-border);
    background:      var(--pac-surface);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           var(--pac-ink-3);
    font-size:       11px;
    transition:      var(--pac-t);
    flex-shrink:     0;
    text-decoration: none;
}
.pac-toggle-btn:hover {
    background:   var(--mc-primary-lt,  #dff0ff);
    color:        var(--mc-primary,     #3c8dbc);
    border-color: var(--mc-primary-mid, #a8d4ef);
}

/* ── Body ───────────────────────────────────────────────────────── */
.pac-body {
    padding: 18px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pac-body-inner {
    display: flex;
    gap:     18px;
    align-items: flex-start;
}

/* Photo */
.pac-photo-wrap { flex-shrink: 0; }
.pac-photo {
    width:         96px;
    height:        108px;
    border-radius: var(--pac-r-md) !important;
    border:        2.5px solid var(--pac-border-2);
    object-fit:    cover;
    display:       block;
    box-shadow:    0 2px 8px rgba(13,15,20,.10);
    background:    var(--pac-lift);
}

/* Fields grid — 4 columns */
.pac-fields {
    flex:    1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:     14px 20px;
    min-width: 0;
}
.pac-f {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;
}
.pac-f-lbl {
    font-size:      9.5px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--pac-ink-4);
}
.pac-f-val {
    font-size:     12.5px;
    font-weight:   600;
    color:         var(--pac-ink);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.pac-f-val.pac-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-weight: 500;
    color:       var(--pac-ink-2);
    font-size:   12px;
}
.pac-f-val.pac-val-yes { color: var(--pac-emerald); }
.pac-f-val.pac-val-no  { color: var(--pac-rose);    }

/* ── Status banner (below fields, above footer) ─────────────────── */
.pac-status-banner {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       9px 16px;
    border-radius: var(--pac-r-md) !important;
    font-size:     12px;
    font-weight:   600;
    border:        1.5px solid transparent;
    margin-bottom: 16px;
}
.pac-status-banner i { font-size: 11px; }
.pac-sb-label   { font-weight: 700; }
.pac-sb-divider { opacity: .45; margin: 0 2px; }
.pac-sb-detail  { font-weight: 500; opacity: .85; }

/* Semantic variants — never change with skin */
.pac-sb-approved {
    background:   var(--pac-emerald-l);
    color:        var(--pac-emerald);
    border-color: var(--pac-emerald-b);
}
.pac-sb-sendforapproval {
    background:   var(--pac-rose-l);
    color:        var(--pac-rose);
    border-color: var(--pac-rose-b);
}
.pac-sb-default {
    background:   var(--mc-primary-lt,  #dff0ff);
    color:        var(--mc-primary-dk,  #367fa9);
    border-color: var(--mc-primary-mid, #a8d4ef);
}

/* ── Footer action bar ───────────────────────────────────────────── */
.pac-foot {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         12px 18px;
    border-top:      1.5px solid var(--pac-border);
    background:      var(--pac-lift);
    flex-wrap:       wrap;
}
.pac-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        6px 16px;
    border-radius:  var(--pac-r-md) !important;
    font-size:      12px;
    font-weight:    600;
    cursor:         pointer;
    transition:     var(--pac-t);
    border:         1.5px solid;
    white-space:    nowrap;
    text-decoration: none;
}
.pac-btn i { font-size: 11px; }

/* View Details — skin-aware primary */
.pac-btn-view {
    background:   var(--pac-surface);
    color:        var(--mc-primary,     #3c8dbc);
    border-color: var(--mc-primary-mid, #a8d4ef);
}
.pac-btn-view:hover { background: var(--mc-primary-lt, #dff0ff); color: var(--mc-primary, #3c8dbc); }

/* Upload Application Form — gold */
.pac-btn-upload {
    background:   var(--pac-surface);
    color:        var(--pac-gold);
    border-color: var(--pac-gold-b);
}
.pac-btn-upload:hover { background: var(--pac-gold-l); color: var(--pac-gold); }

/* Edit User Policy — emerald */
.pac-btn-edit {
    background:   var(--pac-surface);
    color:        var(--pac-emerald);
    border-color: var(--pac-emerald-b);
}
.pac-btn-edit:hover { background: var(--pac-emerald-l); color: var(--pac-emerald); }

/* ── Empty state ─────────────────────────────────────────────────── */
.pac-empty {
    margin:        20px auto;
    text-align:    center;
    padding:       32px 24px;
    border:        2px dashed #E3E6EF;
    border-radius: var(--pac-r-lg, 14px) !important;
    background:    #FAFBFD;
    color:         #B4B9C8;
    font-size:     14px;
    font-weight:   500;
    max-width:     480px;
    font-family:   'Sora', 'Manrope', system-ui, sans-serif !important;
}
.pac-empty i {
    display:       block;
    font-size:     40px;
    margin-bottom: 10px;
    color:         var(--mc-primary-mid, #a8d4ef);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .pac-fields { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pac-body-inner      { flex-direction: column; align-items: center; text-align: center; }
    .pac-photo           { width: 84px; height: 96px; }
    .pac-fields          { grid-template-columns: 1fr 1fr; width: 100%; text-align: left; }
    .pac-status-banner   { flex-wrap: wrap; }
    .pac-foot            { gap: 6px; }
    .pac-btn             { flex: 1; justify-content: center; padding: 7px 10px; font-size: 11.5px; }
}
@media (max-width: 420px) {
    .pac-fields { gap: 10px 14px; }
}


/* ████████████████████████████████████████████████████████████████████
   PARTITION 4 — ENQUIRY ANALYTICS DASHBOARD (New tab, beta)
   ████████████████████████████████████████████████████████████████████
   Classes   : enqad-*
   Version   : 1.1.0
   Updated   : 2026-07-07
   Font      : Sora · JetBrains Mono (imported at top of file)
   Reference : enquiry-admission-dashboard-v2.html
   Skin vars : ONLY the sub-tab active state, table headers, drill-down
               drawer chrome and BETA badge follow --mc-primary / -dk / -lt
               (set per body.skin-* in PARTITION 2 above; teal fallback).
               Charts, KPI accents and all other colors are fixed by design.
   ──────────────────────────────────────────────────────────────────────
   All rules are scoped under .enqad-root (the outermost div of
   EnquiryAnalyticsDashboard_New.cshtml) except .enqad-beta-badge,
   which is used on the IndexNew.cshtml tab strip.
   ████████████████████████████████████████████████████████████████████ */

/* ── Beta badge (used on the parent tab strip) ──────────────────── */
.enqad-beta-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--mc-primary, #4f46e5), var(--mc-primary-dk, #7c3aed));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
}

/* ── Root / design tokens ───────────────────────────────────────── */
.enqad-root {
    --enqad-teal: #0d9488;
    --enqad-teal-dark: #0f766e;
    --enqad-teal-light: #ccfbf1;
    --enqad-teal-50: #f0fdfa;
    --enqad-emerald: #10b981;
    --enqad-emerald-light: #d1fae5;
    --enqad-indigo: #4f46e5;
    --enqad-indigo-light: #e0e7ff;
    --enqad-indigo-dark: #4338ca;
    --enqad-gold: #d4a017;
    --enqad-gold-light: #fef3c7;
    --enqad-rose: #e11d48;
    --enqad-rose-light: #ffe4e6;
    --enqad-rose-dark: #be123c;
    --enqad-ink: #0f172a;
    --enqad-ink-2: #334155;
    --enqad-muted: #64748b;
    --enqad-faint: #94a3b8;
    --enqad-line: #e2e8f0;
    --enqad-line-2: #eef2f6;
    --enqad-bg: #f8fafc;
    --enqad-card: #ffffff;
    --enqad-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08);
    --enqad-radius: 14px;
    font-family: 'Sora', sans-serif;
    color: var(--enqad-ink);
    background: var(--enqad-bg);
    padding: 12px;
    border-radius: 10px !important;
    -webkit-font-smoothing: antialiased;
}
.enqad-root .enqad-mono { font-family: 'JetBrains Mono', monospace; }
.enqad-root .enqad-txt-r { text-align: right; }
.enqad-root .enqad-empty {
    font-size: 12px;
    color: var(--enqad-faint);
    font-style: italic;
    padding: 20px;
    text-align: center;
}
.enqad-empty {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ── Filter bar ─────────────────────────────────────────────────── */
.enqad-root .enqad-topbar {
    background: var(--enqad-card);
    border: 1px solid var(--enqad-line);
    border-radius: var(--enqad-radius) !important;
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    box-shadow: var(--enqad-shadow);
}
.enqad-root .enqad-filter { flex: none; }
.enqad-root .enqad-select {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--enqad-ink-2);
    background: var(--enqad-bg);
    border: 1px solid var(--enqad-line);
    padding: 5px 8px;
    line-height: 1.2;
    border-radius: 8px !important;
    cursor: pointer;
    min-width: 110px;
    max-width: 180px;
}
.enqad-root .enqad-select:focus { outline: none; border-color: var(--enqad-teal); }
/* School / Year selects reload the dashboard — skin-tinted so they read as scope, not filter */
.enqad-root .enqad-select--srv {
    background: var(--mc-primary-lt, var(--enqad-teal-50));
    border-color: var(--mc-primary-mid, var(--enqad-teal-light));
    color: var(--mc-primary-dk, var(--enqad-teal-dark));
    font-weight: 700;
    max-width: 220px;
}
/* School selector wider — school names are long */
.enqad-root #enqadFltSchool {
    min-width: 240px;
    max-width: 340px;
}
.enqad-root .enqad-clear-btn {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--enqad-rose-dark);
    background: var(--enqad-rose-light);
    border: 1px solid #fecdd3;
    padding: 7px 12px;
    border-radius: 9px !important;
    cursor: pointer;
}
.enqad-root .enqad-clear-btn.is-show { display: inline-flex; }
/* "Filters" toggle — at EVERY screen size (not just mobile), the secondary filter dropdowns
   (Section, Class, Gender, Source, Channel, Category, Medium, Campaign, Followup Stage, Counsellor,
   date range) stay hidden until this button is clicked, toggling .is-filters-open on .enqad-topbar
   (see enqadFilterToggleBtn in the script block). Search and Clear filters stay visible always. */
.enqad-root .enqad-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-primary, var(--enqad-teal));
    background: #fff;
    border: 1.5px solid var(--mc-primary, var(--enqad-teal));
    padding: 5.5px 11px;
    border-radius: 8px !important;
    cursor: pointer;
}
.enqad-root .enqad-filter-toggle-btn.is-active { color: #fff; background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-filter--collapsible { display: none; }
.enqad-root .enqad-topbar.is-filters-open .enqad-filter--collapsible { display: block; }
.enqad-root .enqad-topbar.is-filters-open .enqad-filter--daterange { display: flex; }
/* standalone Refresh button beside Apply — re-fetches the dashboard with the current School/Year
   scope, no picker changes involved. Same theme-outline treatment as the Filters toggle. */
.enqad-root .enqad-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 12.5px;
    color: var(--mc-primary, var(--enqad-teal));
    background: #fff;
    border: 1.5px solid var(--mc-primary, var(--enqad-teal));
    border-radius: 8px !important;
    cursor: pointer;
}
.enqad-root .enqad-refresh-btn:hover { color: #fff; background: var(--mc-primary, var(--enqad-teal)); }
/* standalone explanatory banner at the top of a view (e.g. School Comparison's common-year note,
   or the dashboard's own "click to drill down" hint above the KPI row) */
.enqad-root .enqad-note {
    font-size: 12.5px;
    color: var(--enqad-indigo-dark);
    background: var(--enqad-indigo-light);
    padding: 10px 14px;
    border-radius: 10px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* ── Enquiry From/To date filter (matches r.dt, i.e. EnquiryDate) ── */
.enqad-root .enqad-filter--daterange {
    display: flex;
    align-items: center;
    gap: 6px;
}
.enqad-root .enqad-date-input {
    min-width: 128px;
    max-width: 150px;
}
.enqad-root .enqad-daterange-sep { color: var(--enqad-faint); font-weight: 700; }
/* ── Global quick search (filters the whole dashboard — every tab, chart, KPI) ── */
.enqad-root .enqad-filter--search {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--enqad-bg);
    border: 1px solid var(--enqad-line);
    padding: 5px 10px;
    border-radius: 8px !important;
}
.enqad-root .enqad-filter--search:focus-within { border-color: var(--enqad-teal); }
.enqad-root .enqad-search-icon { color: var(--enqad-faint); font-size: 12px; }
.enqad-root .enqad-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--enqad-ink-2);
}
.enqad-root .enqad-search-input::placeholder { color: var(--enqad-faint); font-weight: 500; }

/* ── KPI cards (compact: icon left, number + label stacked right) ── */
.enqad-root .enqad-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.enqad-root .enqad-kpi-card {
    background: var(--enqad-card);
    border: 1px solid var(--enqad-line);
    border-left: 4px solid transparent;
    border-radius: 10px !important;
    padding: 8px 10px;
    box-shadow: var(--enqad-shadow);
    cursor: pointer;
    transition: .15s;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 10px;
    align-items: center;
}
.enqad-root .enqad-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 16px 32px -14px rgba(15,23,42,.16);
}
.enqad-root .enqad-kpi-icon {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.enqad-root .enqad-kpi-num {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enqad-root .enqad-kpi-label {
    font-size: 10.5px;
    color: var(--enqad-muted);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enqad-root .enqad-kpi--total    { border-left-color: var(--enqad-teal); }
.enqad-root .enqad-kpi--total    .enqad-kpi-icon { background: var(--enqad-teal-light); color: var(--enqad-teal-dark); }
.enqad-root .enqad-kpi--admitted { border-left-color: var(--enqad-emerald); }
.enqad-root .enqad-kpi--admitted .enqad-kpi-icon { background: var(--enqad-emerald-light); color: var(--enqad-teal-dark); }
.enqad-root .enqad-kpi--progress { border-left-color: var(--enqad-indigo); }
.enqad-root .enqad-kpi--progress .enqad-kpi-icon { background: var(--enqad-indigo-light); color: var(--enqad-indigo-dark); }
.enqad-root .enqad-kpi--rejected { border-left-color: var(--enqad-rose); }
.enqad-root .enqad-kpi--rejected .enqad-kpi-icon { background: var(--enqad-rose-light); color: var(--enqad-rose-dark); }
.enqad-root .enqad-kpi--fees     { border-left-color: var(--enqad-gold); }
.enqad-root .enqad-kpi--fees     .enqad-kpi-icon { background: var(--enqad-gold-light); color: #92620a; }
.enqad-root .enqad-kpi--overdue  { border-left-color: var(--enqad-rose); }
.enqad-root .enqad-kpi--overdue  .enqad-kpi-icon { background: var(--enqad-rose-light); color: var(--enqad-rose-dark); }

/* ── Sub-tab strip — pill tabs, Google-style overflow. Whatever doesn't fit the
   available width collapses into the "More" pill's dropdown (enqadUpdateTabOverflow
   in the script block) instead of scrolling. ─────────────────────────────────────── */
.enqad-root .enqad-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--enqad-bg);
    border: 1px solid var(--enqad-line);
    border-radius: 999px !important;
    padding: 5px;
}
.enqad-root .enqad-tabs {
    display: flex;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    /* no overflow:hidden here — hidden tabs are already invisible via visibility (not clipping),
       and clipping would also cut off the "More" dropdown menu nested inside this container */
}
/* visibility (not display:none) so a hidden tab's offsetWidth stays live-accurate for re-measurement */
.enqad-root .enqad-tab.is-hidden { visibility: hidden; position: absolute; pointer-events: none; }
/* user turned this tab off via Manage Tab Sequence — distinct from .is-hidden above (that's the
   overflow-into-"More" state); TAB_ORDER excludes .enqad-tab-off tabs entirely so they never factor
   into the width/overflow calculation at all */
.enqad-root .enqad-tab.enqad-tab-off { display: none !important; }
/* the actual "switching" animation — a filled pill that glides from the old active
   tab's position/width to the new one's (enqadMoveTabIndicator in the script block) */
.enqad-root .enqad-tab-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: 999px !important;
    background: var(--mc-primary, var(--enqad-teal));
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
    z-index: 0;
    pointer-events: none;
}
.enqad-root .enqad-tab {
    position: relative;
    z-index: 1;
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--enqad-muted);
    padding: 9px 16px;
    border-radius: 999px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: color .2s ease;
}
.enqad-root .enqad-tab i { font-size: 12px; }
.enqad-root .enqad-tab:hover { color: var(--enqad-ink); background: var(--enqad-card); }
.enqad-root .enqad-tab.is-active {
    /* fill comes from the sliding .enqad-tab-indicator behind it, not this pill itself */
    color: #fff;
    background: transparent;
}
.enqad-root .enqad-tab.is-active:hover { color: #fff; background: transparent; }
/* "More" pill — holds whichever tabs didn't fit; fills solid when the active tab is one of them */
.enqad-root .enqad-tabs-more { position: relative; flex: none; }
/* collapsed state uses visibility (not display:none) + position:absolute so the button stays
   truly measurable — offsetWidth must be accurate on the very first overflow calculation too,
   otherwise the fit math shifts once it becomes "really" visible and evicts one more tab */
.enqad-root .enqad-tabs-more.is-hidden-more { visibility: hidden; position: absolute; pointer-events: none; }
.enqad-root .enqad-tabs-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--enqad-muted);
    padding: 9px 14px;
    border-radius: 999px !important;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.enqad-root .enqad-tabs-more-btn i { font-size: 11px; }
.enqad-root .enqad-tabs-more-btn:hover { color: var(--enqad-ink); background: var(--enqad-card); }
.enqad-root .enqad-tabs-more-btn.is-active {
    color: #fff;
    background: var(--mc-primary, var(--enqad-teal));
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.enqad-root .enqad-tabs-more-btn.is-active:hover { color: #fff; background: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-tabs-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--enqad-card);
    border: 1px solid var(--enqad-line);
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 6px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.enqad-root .enqad-tabs-more-menu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.enqad-root .enqad-tabs-more-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--enqad-ink-2);
    padding: 9px 12px;
    border-radius: 8px !important;
    cursor: pointer;
    transition: .15s;
}
.enqad-root .enqad-tabs-more-item i { font-size: 12px; width: 14px; text-align: center; color: var(--enqad-muted); }
.enqad-root .enqad-tabs-more-item:hover { background: var(--enqad-bg); color: var(--enqad-ink); }
.enqad-root .enqad-tabs-more-item.is-active { background: var(--mc-primary-lt, rgba(13,148,136,.12)); color: var(--mc-primary-dk, var(--enqad-teal-dark)); }
.enqad-root .enqad-tabs-more-item.is-active i { color: var(--mc-primary-dk, var(--enqad-teal-dark)); }
/* gear button that opens the "Manage Tab Sequence" modal — sits outside the scrolling tab
   track (a sibling of .enqad-tabs, not a child) so it's always visible regardless of overflow */
.enqad-root .enqad-tabs-config-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    border: 1px solid var(--enqad-line);
    background: var(--enqad-card);
    color: var(--enqad-ink-2);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    transition: .15s;
}
.enqad-root .enqad-tabs-config-btn:hover { background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); color: #fff; transform: rotate(45deg); }
/* Manage Tab Sequence modal — jQuery UI .sortable() list (see enqadInitTabConfig in the script block) */
.enqad-root .enqad-tabcfg-hint { font-size: 12px; color: var(--enqad-muted); margin-bottom: 12px; }
.enqad-root .enqad-tabcfg-list { list-style: none; margin: 0 0 4px; padding: 0; }
.enqad-root .enqad-tabcfg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--enqad-ink, #1f2937);
    background: var(--enqad-card, #fff);
    border: 1px solid var(--enqad-line, #e5e7eb);
    border-radius: 9px !important;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: grab;
}
.enqad-root .enqad-tabcfg-item.is-fixed { cursor: default; background: var(--enqad-bg, #f8fafc); color: var(--enqad-muted, #64748b); }
.enqad-root .enqad-tabcfg-item.is-fixed .fa-lock { color: var(--enqad-muted, #64748b); }
.enqad-root .enqad-tabcfg-item .fa-arrows { color: var(--enqad-faint, #9ca3af); }
.enqad-root .enqad-tabcfg-item.ui-sortable-helper { box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.enqad-root .enqad-tabcfg-item.ui-sortable-placeholder { visibility: visible !important; background: var(--enqad-bg, #f1f5f9); border: 1px dashed var(--enqad-line, #cbd5e1); }
/* Manage Box Sequence modal — same .enqad-tabcfg-item row, plus a label that takes the remaining
   space and a pair of up/down arrow buttons (the mobile-friendly reorder path) pinned to the end */
.enqad-root .enqad-tabcfg-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enqad-root .enqad-tabcfg-arrows { display: flex; gap: 4px; margin-left: auto; flex: none; }
.enqad-root .enqad-tabcfg-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--enqad-line, #e5e7eb);
    background: var(--enqad-card, #fff);
    color: var(--enqad-ink-2, #475569);
    border-radius: 6px !important;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: .15s;
}
.enqad-root .enqad-tabcfg-arrow-btn:hover { background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); color: #fff; }
.enqad-root .enqad-tabcfg-arrow-btn:disabled { opacity: .35; cursor: default; }
.enqad-root .enqad-tabcfg-arrow-btn:disabled:hover { background: var(--enqad-card, #fff); border-color: var(--enqad-line, #e5e7eb); color: var(--enqad-ink-2, #475569); }
/* Manage Tab Sequence — rename input replaces the plain label span, plus a small reset-to-default icon */
.enqad-root .enqad-tabcfg-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--enqad-line, #e5e7eb);
    border-radius: 6px !important;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--enqad-ink, #1f2937);
    background: var(--enqad-bg, #f8fafc);
}
.enqad-root .enqad-tabcfg-rename-input:focus { outline: none; border-color: var(--mc-primary, var(--enqad-teal)); background: var(--enqad-card, #fff); }
.enqad-root .enqad-tabcfg-rename-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border: 1px solid var(--enqad-line, #e5e7eb);
    background: var(--enqad-card, #fff);
    color: var(--enqad-ink-2, #475569);
    border-radius: 6px !important;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: .15s;
}
.enqad-root .enqad-tabcfg-rename-reset:hover { background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); color: #fff; }
/* Manage Box Sequence — width preset pill (click cycles 25% -> 33% -> 50% -> 66% -> 100%), same
   control as the box's own inline resize toolbar button, just click-based here instead of a toolbar icon */
.enqad-root .enqad-boxcfg-width-btn {
    flex: none;
    min-width: 40px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--enqad-line, #e5e7eb);
    background: var(--enqad-card, #fff);
    color: var(--enqad-ink-2, #475569);
    border-radius: 6px !important;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    transition: .15s;
}
.enqad-root .enqad-boxcfg-width-btn:hover { background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); color: #fff; }
/* a box turned off in the Manage Box Sequence modal — removed from the grid's flow entirely, so
   the remaining visible boxes in its row auto-reflow to fill the gap (see enqadApplyBoxOrder) */
.enqad-root .enqad-box-hidden { display: none !important; }
.enqad-root .enqad-tabcfg-item.is-off { opacity: .5; }
/* on/off toggle switch — a plain checkbox re-skinned as a pill switch */
.enqad-root .enqad-boxcfg-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; cursor: pointer; }
.enqad-root .enqad-boxcfg-toggle-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.enqad-root .enqad-boxcfg-toggle-slider { position: absolute; inset: 0; background: var(--enqad-line, #cbd5e1); border-radius: 20px !important; transition: .15s; pointer-events: none; }
.enqad-root .enqad-boxcfg-toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50% !important; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.enqad-root .enqad-boxcfg-toggle-input:checked + .enqad-boxcfg-toggle-slider { background: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-boxcfg-toggle-input:checked + .enqad-boxcfg-toggle-slider::before { transform: translateX(16px); }
.enqad-root .enqad-view { display: none; }
.enqad-root .enqad-view.is-active { display: block; animation: enqadFadeIn .3s cubic-bezier(.4,0,.2,1); }
@keyframes enqadFadeIn {
    from { opacity: 0; transform: translateY(6px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* ── Panels / grids ─────────────────────────────────────────────── */
.enqad-root .enqad-grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.enqad-root .enqad-grid-2--even { grid-template-columns: 1fr 1fr; }
.enqad-root .enqad-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.enqad-root .enqad-panel {
    background: var(--enqad-card);
    border: 1px solid var(--enqad-line);
    border-radius: var(--enqad-radius) !important;
    box-shadow: var(--enqad-shadow);
    padding: 16px;
    margin-bottom: 14px;
    position: relative;
}
.enqad-root .enqad-grid-2 > .enqad-panel,
.enqad-root .enqad-grid-3 > .enqad-panel { margin-bottom: 0; }
/* Panel header: light divider + breathing room between header and content.
   Two header shapes exist — a bare .enqad-panel-title (optionally followed by
   .enqad-panel-sub) or an .enqad-panel-head wrapper (title + sub + tools). */
.enqad-root .enqad-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--enqad-line-2);
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.enqad-root .enqad-panel-head .enqad-panel-sub { margin-bottom: 0; }
.enqad-root .enqad-panel-title {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.enqad-root .enqad-panel > .enqad-panel-title {
    border-bottom: 1px solid var(--enqad-line-2);
    padding-bottom: 10px;
    margin-bottom: 14px;
}
/* when a subtitle follows, the divider moves below it so the whole header sits above the line */
.enqad-root .enqad-panel > .enqad-panel-title:has(+ .enqad-panel-sub) {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2px;
}
.enqad-root .enqad-panel > .enqad-panel-title + .enqad-panel-sub {
    border-bottom: 1px solid var(--enqad-line-2);
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.enqad-root .enqad-panel-head .enqad-panel-title { border-bottom: none; padding-bottom: 0; }
.enqad-root .enqad-panel-title i { color: var(--enqad-teal); font-size: 13px; }
.enqad-root .enqad-panel-sub {
    font-size: 11.5px;
    color: var(--enqad-muted);
    margin-bottom: 10px;
    font-weight: 500;
}
.enqad-root .enqad-count-tag {
    font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--enqad-indigo-dark);
    background: var(--enqad-indigo-light);
    padding: 3px 8px;
    border-radius: 20px !important;
    white-space: nowrap;
}
.enqad-root .enqad-chart-wrap { position: relative; height: 250px; }
.enqad-root .enqad-chart-wrap.enqad-chart-sm { height: 200px; }
.enqad-root .enqad-chart-wrap.enqad-chart-lg { height: 310px; }
.enqad-root .enqad-chart-wrap.enqad-chart-xl { height: 460px; }

/* ── Donut + progress-bar legend (classic dashboard style) ──────── */
.enqad-root .enqad-donut-flex {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.enqad-root .enqad-donut-flex .enqad-chart-wrap {
    flex: 1 1 190px;
    min-width: 170px;
    max-width: 300px;
}
.enqad-root .enqad-donut-flex .enqad-legend {
    flex: 1 1 220px;
    min-width: 200px;
    margin-top: 0;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}
.enqad-root .enqad-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.enqad-root .enqad-legend-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border-radius: 8px !important;
    cursor: pointer;
    transition: .12s;
}
.enqad-root .enqad-legend-row:hover { background: var(--enqad-teal-50); }
.enqad-root .enqad-legend-dot { width: 10px; height: 10px; border-radius: 50% !important; flex: none; }
.enqad-root .enqad-legend-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--enqad-ink-2);
    flex: 0 1 34%;
    min-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enqad-root .enqad-legend-track {
    flex: 1 1 auto;
    height: 8px;
    background: var(--enqad-line-2);
    border-radius: 20px !important;
    overflow: hidden;
    min-width: 50px;
}
.enqad-root .enqad-legend-fill {
    display: block;
    height: 100%;
    border-radius: 20px !important;
    transition: width .5s ease;
}
.enqad-root .enqad-legend-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; flex: none; min-width: 34px; text-align: right; }

/* ── Horizontal bars ────────────────────────────────────────────── */
.enqad-root .enqad-hbar-list { display: flex; flex-direction: column; gap: 11px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.enqad-root .enqad-hbar-row { cursor: pointer; }
.enqad-root .enqad-hbar-top {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 5px;
}
.enqad-root .enqad-hbar-num { font-family: 'JetBrains Mono', monospace; color: var(--enqad-muted); }
.enqad-root .enqad-hbar-track { height: 9px; background: var(--enqad-line-2); border-radius: 20px !important; overflow: hidden; }
.enqad-root .enqad-hbar-fill { height: 100%; border-radius: 20px !important; transition: width .5s ease; }

/* ── Table ──────────────────────────────────────────────────────── */
.enqad-root .enqad-table-wrap { overflow-x: auto; max-height: 420px; overflow-y: auto; }
.enqad-root .enqad-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.enqad-root .enqad-table thead th {
    /* table header follows the AdminLTE skin */
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 1px solid var(--enqad-line);
    white-space: nowrap;
    background: var(--mc-primary, var(--enqad-teal));
    position: sticky;
    top: 0;
    z-index: 1;
}
.enqad-root .enqad-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--enqad-line-2);
    white-space: nowrap;
    color: var(--enqad-ink-2);
    font-weight: 500;
}
.enqad-root .enqad-table tbody tr { cursor: pointer; }
.enqad-root .enqad-table tbody tr:hover { background: var(--enqad-teal-50); }
/* every record-list table's action button (Timeline / Take Action) is always the FIRST column
   (see rowTr/sisHead/promoHead/ppHead/slotHead/dupHead/enqadFuOpenDetailDrawer in the script block)
   — pin it via position:sticky so it stays reachable without horizontal scrolling even on the
   widest tables. Needs its own opaque background per row-state since sticky content still sits
   OVER whatever scrolls beneath it; the header's sticky background was already set above. */
.enqad-root .enqad-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.enqad-root .enqad-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--enqad-card);
    box-shadow: 1px 0 0 var(--enqad-line-2);
}
.enqad-root .enqad-table tbody tr:hover td:first-child { background: var(--enqad-teal-50); }

/* ── Table / Card view toggle ───────────────────────────────────── */
.enqad-root .enqad-panel-hd-right { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
/* ── Per-table quick search (inside each record-list panel header) ──────── */
.enqad-root .enqad-list-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--enqad-bg);
    border: 1px solid var(--enqad-line);
    border-radius: 8px !important;
    padding: 5px 10px;
}
.enqad-root .enqad-list-search i { color: var(--enqad-faint); font-size: 11px; }
.enqad-root .enqad-list-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    color: var(--enqad-ink-2);
    width: 130px;
}
.enqad-root .enqad-list-search-input::placeholder { color: var(--enqad-faint); }
.enqad-root .enqad-viewtoggle,
.enqad-root .enqad-sankey-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--enqad-line);
    border-radius: 8px !important;
    overflow: hidden;
    background: var(--enqad-bg);
}
.enqad-root .enqad-vt-btn,
.enqad-root .enqad-sankey-vt-btn {
    border: none;
    background: transparent;
    color: var(--enqad-muted);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: .15s;
}
.enqad-root .enqad-vt-btn + .enqad-vt-btn,
.enqad-root .enqad-sankey-vt-btn + .enqad-sankey-vt-btn { border-left: 1px solid var(--enqad-line); }
.enqad-root .enqad-vt-btn:hover,
.enqad-root .enqad-sankey-vt-btn:hover { color: var(--mc-primary-dk, var(--enqad-teal-dark)); }
.enqad-root .enqad-vt-btn.is-active,
.enqad-root .enqad-sankey-vt-btn.is-active { background: var(--mc-primary, var(--enqad-teal)); color: #fff; }

/* ── Record cards (card view) ───────────────────────────────────── */
.enqad-root .enqad-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.enqad-root .enqad-card {
    border: 1px solid var(--enqad-line);
    border-left: 3px solid var(--mc-primary, var(--enqad-teal));
    border-radius: 12px !important;
    padding: 12px 14px;
    background: var(--enqad-card);
    box-shadow: var(--enqad-shadow);
    cursor: pointer;
    transition: .15s;
}
.enqad-root .enqad-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 16px 32px -14px rgba(15,23,42,.16); }
.enqad-root .enqad-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.enqad-root .enqad-card-name { font-size: 13px; font-weight: 700; color: var(--enqad-ink); }
.enqad-root .enqad-card-ref { font-size: 11px; color: var(--enqad-muted); margin-top: 1px; }
.enqad-root .enqad-card-tl { flex: none; }
.enqad-root .enqad-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.enqad-root .enqad-card-meta { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--enqad-line-2); padding-top: 9px; }
.enqad-root .enqad-cardm { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.enqad-root .enqad-cardm-k { color: var(--enqad-muted); font-weight: 600; flex: none; }
.enqad-root .enqad-cardm-v { color: var(--enqad-ink-2); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pagination ─────────────────────────────────────────────────── */
.enqad-root .enqad-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--enqad-line-2);
    font-size: 12px;
    color: var(--enqad-muted);
    font-weight: 600;
}
.enqad-root .enqad-pager:empty { display: none; }
/* "Show", the <select>, and "per page" are separate inline nodes inside this flex item — without
   nowrap, a narrow container can word-wrap "per page" onto its own line mid-phrase (the item itself
   can still move to its own row via the pager's own flex-wrap; this only stops it breaking internally) */
.enqad-root .enqad-pager-left { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.enqad-root .enqad-pager-size { padding: 4px 6px; min-width: 64px; }
.enqad-root .enqad-pager-info { font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.enqad-root .enqad-pager-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.enqad-root .enqad-pager-page { font-family: 'JetBrains Mono', monospace; padding: 0 8px; color: var(--enqad-ink-2); }
.enqad-root .enqad-pager-btn {
    border: 1px solid var(--enqad-line);
    background: var(--enqad-bg);
    color: var(--enqad-ink-2);
    width: 28px;
    height: 28px;
    border-radius: 8px !important;
    cursor: pointer;
    font-size: 12px;
    transition: .15s;
    padding: 0;
}
.enqad-root .enqad-pager-btn:hover:not(:disabled) { background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); color: #fff; }
.enqad-root .enqad-pager-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
    /* stack into 3 centered rows: Show/per-page, then the nav arrows, then the count — each row
       is its own full-width flex line so it can center its own content instead of the default
       left-aligned wrap */
    .enqad-root .enqad-pager { flex-direction: column; align-items: center; }
    .enqad-root .enqad-pager-left { order: 1; width: 100%; justify-content: center; }
    .enqad-root .enqad-pager-nav { order: 2; width: 100%; justify-content: center; }
    .enqad-root .enqad-pager-info { order: 3; width: 100%; text-align: center; }
}

/* ── Followup calendar ──────────────────────────────────────────── */
.enqad-root .enqad-fucal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.enqad-root .enqad-fucal-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--enqad-ink);
    min-width: 130px;
    text-align: center;
}
.enqad-root .enqad-fucal-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--enqad-line);
    background: var(--enqad-bg);
    color: var(--enqad-ink-2);
    border-radius: 8px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: .15s;
    padding: 0;
}
.enqad-root .enqad-fucal-btn:hover { background: var(--enqad-teal-50); border-color: var(--enqad-teal); color: var(--enqad-teal-dark); }
.enqad-root .enqad-fucal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
}
.enqad-root .enqad-fucal-dow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--enqad-muted);
    text-align: center;
    padding: 4px 0;
}
.enqad-root .enqad-fucal-cell {
    min-height: 54px;
    border: 1px solid var(--enqad-line-2);
    border-radius: 8px !important;
    padding: 4px 6px;
    position: relative;
    background: var(--enqad-card);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.enqad-root .enqad-fucal-cell.is-blank { border-color: transparent; background: transparent; }
.enqad-root .enqad-fucal-cell.is-today { border-color: var(--enqad-teal); box-shadow: inset 0 0 0 1px var(--enqad-teal); }
.enqad-root .enqad-fucal-cell.has-fu { cursor: pointer; transition: .12s; }
.enqad-root .enqad-fucal-cell.has-fu:hover { background: var(--enqad-teal-50); transform: translateY(-1px); }
.enqad-root .enqad-fucal-day { font-size: 11px; font-weight: 700; color: var(--enqad-ink-2); }
.enqad-root .enqad-fucal-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 1px 7px;
    border-radius: 12px !important;
    line-height: 1.5;
}
.enqad-root .enqad-fucal-badge.is-done     { background: #0d9488; }
.enqad-root .enqad-fucal-badge.is-due      { background: #d4a017; }
.enqad-root .enqad-fucal-badge.is-upcoming { background: #4f46e5; }
.enqad-root .enqad-fucal-badge.is-late     { background: #e11d48; }
.enqad-root .enqad-fucal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--enqad-ink-2);
    margin-top: 10px;
}
.enqad-root .enqad-fucal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.enqad-root .enqad-fucal-legend i { width: 9px; height: 9px; border-radius: 3px !important; display: inline-block; }
@media (max-width: 640px) {
    .enqad-root .enqad-fucal-cell { min-height: 44px; padding: 3px 4px; }
    .enqad-root .enqad-fucal-badge { padding: 1px 5px; font-size: 9px; }
}

/* ── Timeline modal must stack above the drill-down drawer (z 2000) ── */
#EnquiryReport_Modal { z-index: 2100 !important; }

/* ── Timeline / Details button ──────────────────────────────────── */
.enqad-tl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 26px;
    height: 26px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 7px !important;
    cursor: pointer;
    font-size: 12px;
    transition: .15s;
    padding: 0;
}
.enqad-tl-btn:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.enqad-tl-btn:disabled { opacity: .6; cursor: wait; }
.enqad-tl-btn--lg {
    width: auto;
    height: auto;
    padding: 8px 14px;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 9px !important;
}

/* ── Per-box Export / Print tools — injected into every .enqad-panel's header ──
   Default: sits inline inside .enqad-panel-hd-right alongside the other header controls.
   .enqad-panel--boxtools-abs modifier: panel had no .enqad-panel-hd-right, so the tools
   are pinned as an absolute overlay in the panel's own top-right corner instead. */
.enqad-root .enqad-box-tools { display: flex; align-items: center; gap: 6px; flex: none; }
/* title spans the panel's full width already, so the tools simply overlay its empty
   right side in the same row — no extra top padding, just enough right padding on the
   title so longer titles wrap before running under the icons. The toolbar is 4 buttons
   (drag/resize/export/print) at 24px + 6px gaps = 114px, plus the 16px right offset the
   toolbar itself sits at — 130px minimum, rounded up for breathing room. (Below 980px the
   resize button is hidden — see the matching override in that media query — so 3 buttons
   there need less clearance.) */
.enqad-root .enqad-panel--boxtools-abs > .enqad-panel-title,
.enqad-root .enqad-panel--boxtools-abs > .enqad-panel-head > div > .enqad-panel-title { padding-right: 140px; }
.enqad-root .enqad-panel--boxtools-abs > .enqad-box-tools { position: absolute; top: 16px; right: 16px; z-index: 2; }
.enqad-root .enqad-box-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--enqad-line);
    background: var(--enqad-card);
    color: var(--enqad-ink-2);
    border-radius: 7px !important;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: .15s;
}
.enqad-root .enqad-box-btn:hover { background: var(--mc-primary, var(--enqad-teal)); border-color: var(--mc-primary, var(--enqad-teal)); color: #fff; }
/* drag-to-reorder handle — same pill as the export/print icons (added by enqadInitBoxTools), just
   with a grab cursor; the box itself isn't draggable, only this handle (see enqadInitBoxDragDrop) */
.enqad-root .enqad-box-drag { cursor: grab; }
.enqad-root .enqad-box-drag:active { cursor: grabbing; }
/* ── Per-section drag-and-drop box reordering + resize (enqadInitBoxDragDrop in the script block) ──
   Every .enqad-grid-2/-2--even/-3 row (as authored below) is unwrapped at runtime into ONE flat
   .enqad-boxwrap CSS Grid container per section (12 columns) — each panel gets a grid-column span
   equal to its width preset (col-md-4/5/6/7/8/12 only, see ENQAD_BOX_WIDTH_ORDER), and the grid's own
   auto-placement wraps rows for free as boxes are reordered, resized, or hidden. */
.enqad-root .enqad-boxwrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.enqad-root .enqad-boxwrap > .enqad-panel { margin-bottom: 0; min-width: 0; }
.enqad-root .enqad-panel.ui-sortable-helper { box-shadow: 0 10px 26px rgba(0,0,0,.2); opacity: .96; }
.enqad-root .enqad-boxwrap .enqad-panel.ui-sortable-placeholder {
    visibility: visible !important;
    background: var(--enqad-bg);
    border: 2px dashed var(--enqad-line);
    border-radius: var(--enqad-radius) !important;
}

/* ── Status chips ───────────────────────────────────────────────── */
.enqad-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.enqad-chip--admitted { background: #ccfbf1; color: #0f766e; }
.enqad-chip--progress { background: #fef3c7; color: #92620a; }
.enqad-chip--rejected { background: #ffe4e6; color: #be123c; }
.enqad-chip--pending  { background: #f1f5f9; color: #334155; }

/* ── Funnel ─────────────────────────────────────────────────────── */
.enqad-root .enqad-funnel { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.enqad-root .enqad-funnel-stage {
    display: grid;
    /* fixed count/drop columns so every row's bar track starts and ends at the same x */
    grid-template-columns: minmax(64px, 130px) minmax(0, 1fr) 56px 64px;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-radius: 8px !important;
    cursor: pointer;
    transition: .15s;
}
.enqad-root .enqad-funnel-stage:hover { background: var(--enqad-teal-50); }
.enqad-root .enqad-funnel-name { font-size: 12.5px; font-weight: 700; color: var(--enqad-ink); }
.enqad-root .enqad-funnel-track {
    height: 30px;
    background: #f1f5f9;
    border-radius: 8px !important;
    position: relative;
    overflow: hidden;
}
.enqad-root .enqad-funnel-bar {
    height: 100%;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    transition: width .6s ease;
    white-space: nowrap;
}
.enqad-root .enqad-funnel-count { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 14px; text-align: right; }
.enqad-root .enqad-funnel-drop { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-align: right; color: var(--enqad-rose-dark); cursor: help; }
.enqad-root .enqad-funnel-drop.is-first { color: var(--enqad-faint); cursor: default; }
.enqad-root .enqad-funnel-drop.is-up { color: var(--enqad-teal-dark); }
.enqad-root .enqad-funnel-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11px;
    color: var(--enqad-muted);
    background: var(--enqad-bg);
    border: 1px dashed var(--enqad-line);
    border-radius: 8px !important;
    padding: 8px 10px;
    margin-top: 8px;
    line-height: 1.5;
}
.enqad-root .enqad-funnel-note i { color: var(--enqad-indigo); margin-top: 2px; flex: none; }

/* ── Counsellor leaderboard ─────────────────────────────────────── */
.enqad-root .enqad-lb-header {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 62px 62px 52px minmax(48px, 100px);
    gap: 10px;
    padding: 0 6px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--enqad-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--enqad-line);
}
.enqad-root .enqad-lb-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 62px 62px 52px minmax(48px, 100px);
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--enqad-line-2);
    cursor: pointer;
}
.enqad-root .enqad-lb-row:hover { background: var(--enqad-teal-50); }
.enqad-root .enqad-lb-rank { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--enqad-faint); font-size: 13px; }
.enqad-root .enqad-lb-rank.is-top { color: var(--enqad-gold); }
.enqad-root .enqad-lb-name {
    font-weight: 700;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enqad-root .enqad-lb-avatar {
    width: 22px;
    height: 22px;
    border-radius: 6px !important;
    background: var(--enqad-indigo-light);
    color: var(--enqad-indigo-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    flex: none;
}
.enqad-root .enqad-lb-metric { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; text-align: right; }
.enqad-root .enqad-lb-bar { height: 6px; background: var(--enqad-line-2); border-radius: 20px !important; overflow: hidden; }
.enqad-root .enqad-lb-bar-fill { height: 100%; border-radius: 20px !important; background: linear-gradient(90deg, var(--enqad-teal), var(--enqad-emerald)); }

/* ── Fee strip ──────────────────────────────────────────────────── */
.enqad-root .enqad-fee-strip {
    display: flex;
    align-items: center;
    border-radius: 10px !important;
    overflow: hidden;
    height: 14px;
    margin: 14px 0 10px;
}
.enqad-root .enqad-fee-seg { height: 100%; }
.enqad-root .enqad-fee-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--enqad-ink-2);
}
.enqad-root .enqad-fee-legend span { display: inline-flex; align-items: center; gap: 6px; }
.enqad-root .enqad-fee-legend i { width: 9px; height: 9px; border-radius: 3px !important; display: inline-block; }

/* ── Drill-down drawer ──────────────────────────────────────────── */
.enqad-dd-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(15,23,42,.55);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.enqad-dd-overlay.is-open { opacity: 1; pointer-events: all; }
.enqad-dd-panel {
    width: 70%;
    max-width: 96vw;
    height: 100vh;
    overflow-y: auto;
    background: #f8fafc;
    box-shadow: -10px 0 60px rgba(15,23,42,.25);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    display: flex;
    flex-direction: column;
    font-family: 'Sora', sans-serif;
}
.enqad-dd-overlay.is-open .enqad-dd-panel { transform: translateX(0); }
.enqad-dd-top {
    background: var(--mc-primary-dk, #0b2e2b);
    padding: 14px 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.enqad-dd-back {
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex: none;
}
.enqad-dd-back:hover { background: rgba(255,255,255,.2); }
.enqad-dd-crumb { display: flex; align-items: center; gap: 6px; flex: 1; overflow: hidden; }
.enqad-dd-crumb-root { font-size: 11.5px; color: rgba(255,255,255,.55); white-space: nowrap; cursor: pointer; font-weight: 600; }
.enqad-dd-crumb-root:hover { color: rgba(255,255,255,.9); }
.enqad-dd-crumb-cur { font-size: 11.5px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enqad-dd-sep { color: rgba(255,255,255,.25); }
.enqad-dd-x {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    margin-left: auto;
    flex: none;
}
.enqad-dd-x:hover { color: #fff; }
/* Export to Excel — same round pill as the Back button, sits just before Close */
.enqad-dd-export {
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex: none;
}
.enqad-dd-export:hover { background: rgba(255,255,255,.2); }
.enqad-dd-hero { padding: 22px 20px; background: linear-gradient(135deg, var(--mc-primary-dk, #0b2e2b), var(--mc-primary, #0f3d38)); flex-shrink: 0; }
.enqad-dd-hl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    margin-bottom: 6px;
}
.enqad-dd-ht { font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -.01em; }
.enqad-dd-hs { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 4px; font-weight: 500; }
.enqad-dd-hk { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.enqad-dd-kpi { background: rgba(255,255,255,.08); border-radius: 10px !important; padding: 11px 15px; min-width: 84px; }
.enqad-dd-kv { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 17px; color: #fff; }
.enqad-dd-kl {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
}
.enqad-dd-body { padding: 20px; flex: 1; }
.enqad-dd-sec { margin-bottom: 24px; overflow-x: auto; }
.enqad-dd-sec h4 {
    font-size: 13.5px;
    color: #0f172a;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 700;
}
.enqad-dd-sec h4::before {
    content: '';
    width: 4px;
    height: 15px;
    background: var(--mc-primary, #0d9488);
    border-radius: 2px !important;
    display: block;
}
/* the quick-search + table/card toggle + count-tag row above every paginated drawer section
   (ddSampleSec/ddBreakdownSec) — same controls as the main tabs' record-list panels, just laid out
   inline under the section's own <h4> instead of sharing a header row with it */
.enqad-dd-sec-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 10px; }
.enqad-dd-sec .enqad-card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.enqad-agg-card {
    background: #fff;
    border: 1px solid var(--enqad-line);
    border-radius: 10px !important;
    padding: 12px 14px;
    cursor: pointer;
    transition: .15s;
}
.enqad-agg-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 16px 32px -14px rgba(15,23,42,.16); border-color: var(--mc-primary-mid, var(--enqad-teal)); }
.enqad-agg-card-label { font-size: 13px; font-weight: 700; color: var(--enqad-ink); margin-bottom: 8px; }
.enqad-agg-card-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--enqad-muted); }
.enqad-agg-card-stats b { color: var(--enqad-ink-2); font-family: 'JetBrains Mono', monospace; }
.enqad-dd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #fff;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08);
}
.enqad-dd-table thead th {
    /* drawer table header follows the AdminLTE skin */
    background: var(--mc-primary-dk, #0f172a);
    color: #fff;
    padding: 9px 12px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.enqad-dd-table tbody tr { cursor: pointer; transition: .1s; }
.enqad-dd-table tbody tr:nth-child(even) { background: #f8fafc; }
.enqad-dd-table tbody tr:hover { background: var(--mc-primary-lt, #f0fdfa); }
.enqad-dd-table tbody td { padding: 9px 12px; border-bottom: 1px solid #eef2f6; white-space: nowrap; }
.enqad-dd-profile { background: #fff; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 6px 16px; }
.enqad-dd-prow {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding: 9px 0;
    border-bottom: 1px solid #eef2f6;
    font-size: 12.5px;
}
.enqad-dd-prow:last-child { border-bottom: none; }
.enqad-dd-pk { color: #64748b; font-weight: 700; }
.enqad-dd-pv { font-weight: 600; color: #0f172a; }

/* ── Thin, theme-based scrollbars for all dashboard scroll areas ── */
.enqad-root *,
.enqad-dd-panel {
    scrollbar-width: thin;                                          /* Firefox */
    scrollbar-color: var(--mc-primary-mid, #cbd5e1) transparent;    /* Firefox */
}
.enqad-root *::-webkit-scrollbar,
.enqad-dd-panel::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
.enqad-root *::-webkit-scrollbar-track,
.enqad-dd-panel::-webkit-scrollbar-track {
    background: transparent;
}
.enqad-root *::-webkit-scrollbar-thumb,
.enqad-dd-panel::-webkit-scrollbar-thumb {
    background: var(--mc-primary-mid, #cbd5e1);
    border-radius: 10px !important;
}
.enqad-root *::-webkit-scrollbar-thumb:hover,
.enqad-dd-panel::-webkit-scrollbar-thumb:hover {
    background: var(--mc-primary, #94a3b8);
}

/* ── Responsive hardening (container-safe, any width) ───────────── */
.enqad-root { overflow-x: hidden; }
.enqad-root .enqad-panel { min-width: 0; }
.enqad-root .enqad-grid-2 > *,
.enqad-root .enqad-grid-3 > * { min-width: 0; }
.enqad-root .enqad-chart-wrap { overflow: hidden; }
.enqad-root .enqad-chart-wrap canvas { max-width: 100% !important; }
.enqad-root .enqad-funnel-name { overflow-wrap: break-word; min-width: 0; }
.enqad-root .enqad-kpi-row { min-width: 0; }

/* ── Responsive (viewport breakpoints) ──────────────────────────── */
@media (max-width: 980px) {
    /* every box stacks full-width below this breakpoint, regardless of its saved/resized width —
       resize is a desktop power feature (see .enqad-box-btn[data-act="resize"] below); on tablet/
       mobile a box always gets the whole row so nothing renders too cramped to use */
    .enqad-root .enqad-boxwrap > .enqad-panel { grid-column: 1 / -1 !important; }
    /* no-JS fallback: if enqadInitBoxDragDrop never ran, the original server-rendered rows are
       still in the DOM as authored (.enqad-grid-2/-3) — collapse those to one column too */
    .enqad-root .enqad-grid-2,
    .enqad-root .enqad-grid-3 { grid-template-columns: 1fr; }
    .enqad-root .enqad-chart-wrap.enqad-chart-lg { height: 260px; }
    .enqad-root .enqad-chart-wrap.enqad-chart-xl { height: 320px; }
    /* cycling a box's width has no visible effect once every box is forced full-width above, so
       hide the control entirely rather than leave a button that looks like it does nothing */
    .enqad-root .enqad-box-btn[data-act="resize"] { display: none; }
    /* one fewer button (no resize) once the rule above hides it — 3 buttons at 24px + 6px gaps
       = 84px, plus the 16px right offset = 100px minimum */
    .enqad-root .enqad-panel--boxtools-abs > .enqad-panel-title,
    .enqad-root .enqad-panel--boxtools-abs > .enqad-panel-head > div > .enqad-panel-title { padding-right: 110px; }
}
@media (max-width: 900px) {
    .enqad-dd-panel { width: 100vw; }
    .enqad-dd-hero, .enqad-dd-body { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 640px) {
    .enqad-root { padding: 8px; }
    .enqad-root .enqad-topbar { padding: 8px; gap: 6px; }
    .enqad-root .enqad-filter { flex: 1 1 46%; }
    /* School is the primary scope control (and has the longest option text) — give it its own
       full-width row within row1; Year + the shared Apply button share the row below it, and the
       multi-select warning (when shown) takes its own full-width line under those */
    .enqad-root .enqad-filter--school { flex: 1 1 100%; }
    .enqad-root .enqad-fltmsel-apply-btn--standalone { flex: 1 1 46%; justify-content: center; }
    .enqad-root .enqad-select { width: 100%; min-width: 0; max-width: none !important; }
    .enqad-root .enqad-fltmsel { width: 100%; min-width: 0; max-width: none !important; }
    .enqad-root .enqad-clear-btn { flex: 1 1 100%; justify-content: center; }
    /* Filters toggle — Search stays visible by default; every other dropdown (School/Year excluded,
       they're the always-visible school/year scope selectors) is hidden until the icon is tapped.
       Left in its natural DOM position (right after Year) so it pairs with Year in the same
       2-per-row slot instead of jumping ahead of it. */
    .enqad-root .enqad-filter-toggle-btn { display: inline-flex; flex: 1 1 46%; justify-content: center; }
    .enqad-root .enqad-filter--collapsible { display: none; }
    .enqad-root .enqad-topbar.is-filters-open .enqad-filter--collapsible { display: block; }
    /* the date-range filter's own flex row (icon-less, just two inputs + a separator) still needs to
       stay flex even though the generic rule above switches every OTHER collapsible filter to block —
       higher specificity here (3 classes vs the generic rule's 3) wins via source order since this
       comes later in the stylesheet */
    .enqad-root .enqad-topbar.is-filters-open .enqad-filter--daterange { display: flex; flex: 1 1 100%; }
    .enqad-root .enqad-filter--daterange .enqad-date-input { width: auto; flex: 1 1 0; min-width: 0; }
    .enqad-root .enqad-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .enqad-root .enqad-chart-wrap { height: 220px; }
    .enqad-root .enqad-chart-wrap.enqad-chart-sm { height: 190px; }
    .enqad-root .enqad-chart-wrap.enqad-chart-lg { height: 230px; }
    .enqad-root .enqad-chart-wrap.enqad-chart-xl { height: 280px; }
    .enqad-root .enqad-panel { padding: 12px; }
    .enqad-root .enqad-funnel-stage { grid-template-columns: minmax(56px, 84px) minmax(0, 1fr) 40px 48px; gap: 7px; }
    .enqad-root .enqad-funnel-name { font-size: 11px; }
    .enqad-root .enqad-funnel-track { height: 24px; }
    .enqad-root .enqad-funnel-count { font-size: 12px; }
    .enqad-root .enqad-funnel-drop { font-size: 10px; }
    .enqad-root .enqad-lb-header,
    .enqad-root .enqad-lb-row { grid-template-columns: 22px minmax(0, 1fr) 52px 52px; gap: 7px; }
    .enqad-root .enqad-lb-row .enqad-lb-metric:nth-child(5),
    .enqad-root .enqad-lb-row .enqad-lb-bar,
    .enqad-root .enqad-lb-header span:nth-child(5),
    .enqad-root .enqad-lb-header span:nth-child(6) { display: none; }
    .enqad-root .enqad-tab { padding: 8px 12px; font-size: 12px; }
    .enqad-root .enqad-tabs-wrap { padding: 4px; }
    .enqad-root .enqad-tabs-more-btn { padding: 8px 10px; font-size: 12px; }
    .enqad-root .enqad-tabs-more-menu { min-width: 200px; }
    .enqad-root .enqad-funnel-note { font-size: 10px; }
    /* stays in its natural DOM position — after every dropdown, right before the Clear button —
       just made full-width like School instead of sharing the 2-per-row layout */
    .enqad-root .enqad-filter--search { flex: 1 1 100%; max-width: none; }
    .enqad-root .enqad-list-search-input { width: 90px; }
    .enqad-root .enqad-panel-hd-right { width: 100%; justify-content: space-between; }
}
@media (max-width: 420px) {
    /* deliberately NOT forcing .enqad-filter back to 100% here — the 2-per-row layout from the
       640px breakpoint above should keep applying down to the smallest phones too; only School
       (and the search box) stay full-width, via their own dedicated modifier classes */
    .enqad-root .enqad-funnel-stage { grid-template-columns: minmax(48px, 70px) minmax(0, 1fr) 40px; }
    .enqad-root .enqad-funnel-drop { display: none; }
    .enqad-root .enqad-kpi-num { font-size: 15px; }
}

/* ── Print (Print button on each box's own header) ───────────────────────
   body.enqad-printing + .enqad-print-target are toggled by JS right before
   window.print() — isolates exactly the one box that was printed, regardless
   of the surrounding AdminLTE chrome (sidebar, header, other tabs, drawer). */
@media print {
    body.enqad-printing * { visibility: hidden !important; }
    body.enqad-printing .enqad-print-target,
    body.enqad-printing .enqad-print-target * { visibility: visible !important; }
    body.enqad-printing .enqad-print-target {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        display: block !important;
    }
    body.enqad-printing .enqad-dd-overlay,
    body.enqad-printing .enqad-pager,
    body.enqad-printing .enqad-viewtoggle,
    body.enqad-printing .enqad-sankey-viewtoggle,
    body.enqad-printing .enqad-list-search,
    body.enqad-printing .enqad-card-tl,
    body.enqad-printing .enqad-tl-btn,
    body.enqad-printing .enqad-box-tools,
    body.enqad-printing .enqad-hint { display: none !important; }
    body.enqad-printing .enqad-panel { box-shadow: none !important; break-inside: avoid; }
}
/* Print-only Detail table (record-level rows), injected by enqadPrintBox() just for boxes that only
   show an aggregate summary/chart on screen — stays hidden outside of print, and outside enqad-printing */
.enqad-root .enqad-print-detail { display: none; }
@media print {
    body.enqad-printing .enqad-print-target .enqad-print-detail { display: block !important; margin-top: 14px; }
    body.enqad-printing .enqad-print-detail-title { font-weight: 700; font-size: 13px; margin: 0 0 6px; }
    body.enqad-printing .enqad-print-detail table { width: 100%; border-collapse: collapse; font-size: 11px; }
    body.enqad-printing .enqad-print-detail th,
    body.enqad-printing .enqad-print-detail td { border: 1px solid #ccc; padding: 3px 6px; text-align: left; }
}
/* "Reset to Default" — Tab Sequence + Manage Box Sequence modal footers */
.enqad-cfg-reset-btn { color: #b91c1c; }

/* ── Full School & Year Comparison (School Comparison tab) ───────── */
.enqad-root .enqad-schoolcmp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.enqad-root .enqad-schoolcmp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--mc-primary, var(--enqad-teal));
    border: 1px solid var(--mc-primary, var(--enqad-teal));
    padding: 8px 14px;
    border-radius: 9px !important;
    cursor: pointer;
    transition: .15s;
}
.enqad-root .enqad-schoolcmp-btn:hover { opacity: .9; }
.enqad-root .enqad-schoolcmp-btn--back { background: var(--enqad-card, #fff); color: var(--enqad-ink, #1f2937); border-color: var(--enqad-line, #e5e7eb); }
.enqad-root .enqad-schoolcmp-btn--back:hover { background: var(--enqad-bg, #f8fafc); opacity: 1; }
/* modal: school list + year list side by side as two cards (stacks on mobile) — modal-lg gives
   plenty of room, so each column reads as its own panel with a sticky head (title + count + select
   all) and a scrollable checklist below it */
.enqad-root .enqad-schoolcmp-modal-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.enqad-root .enqad-schoolcmp-modal-col {
    flex: 1 1 260px;
    min-width: 220px;
    background: var(--enqad-bg, #f8fafc);
    border: 1px solid var(--enqad-line, #e5e7eb);
    border-radius: 12px !important;
    padding: 14px;
}
.enqad-root .enqad-schoolcmp-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.enqad-root .enqad-schoolcmp-modal-col h5 { font-size: 12px; font-weight: 700; color: var(--enqad-ink, #1f2937); text-transform: uppercase; letter-spacing: .04em; margin: 0; display: flex; align-items: center; gap: 6px; }
.enqad-root .enqad-schoolcmp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px !important;
    background: var(--mc-primary, var(--enqad-teal));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.enqad-root .enqad-schoolcmp-selectall {
    background: none;
    border: none;
    color: var(--mc-primary, var(--enqad-teal));
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.enqad-root .enqad-schoolcmp-selectall:hover { text-decoration: underline; }
.enqad-root .enqad-schoolcmp-search { position: relative; margin-bottom: 10px; }
.enqad-root .enqad-schoolcmp-search .fa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--enqad-muted, #94a3b8); font-size: 12px; }
.enqad-root .enqad-schoolcmp-search input {
    width: 100%;
    border: 1px solid var(--enqad-line, #e5e7eb);
    border-radius: 8px !important;
    padding: 7px 10px 7px 30px;
    font-size: 12.5px;
    background: var(--enqad-card, #fff);
}
.enqad-root .enqad-schoolcmp-search input:focus { outline: none; border-color: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-cmp-check-list { max-height: 280px; overflow-y: auto; margin: 0; padding-right: 2px; }
.enqad-root .enqad-cmp-check-item {
    cursor: pointer;
    background: var(--enqad-card, #fff);
    border: 1px solid transparent;
    border-radius: 8px !important;
    padding: 8px 10px;
    margin-bottom: 4px;
    transition: .12s;
}
.enqad-root .enqad-cmp-check-item:hover { border-color: var(--enqad-line, #e5e7eb); }
.enqad-root .enqad-cmp-check-item.is-checked { background: var(--mc-primary-lt, rgba(13,148,136,.08)); border-color: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-cmp-check-item.is-filtered-out { display: none; }
.enqad-root .enqad-cmp-check-item label { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; width: 100%; font-size: 12.5px; font-weight: 600; color: var(--enqad-ink, #1f2937); }
.enqad-root .enqad-cmp-check-item input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--mc-primary, var(--enqad-teal)); }
/* per-value conversion rate shown alongside its count in the breakdown pivot tables */
.enqad-root .enqad-cmp-rate { color: var(--enqad-muted, #64748b); font-size: 11px; font-weight: 600; }
@media (max-width: 640px) {
    .enqad-root .enqad-schoolcmp-modal-cols { flex-direction: column; }
}
.enqad-cfg-reset-btn:hover, .enqad-cfg-reset-btn:focus { color: #7f1d1d; text-decoration: none; }

/* ── Universal table sorting — click any <th> to sort by that column (see the delegated
   click handler in the script block) ───────────────────────────────────────────────── */
/* NOTE: table.enqad-table's header is ALSO sticky (.enqad-table thead th, above) — this selector is
   MORE specific (adds the "table" type selector) and comes later in the cascade, so it must repeat
   position:sticky + top:0 rather than "relative", or it silently un-sticks every sortable header
   (position is a single property — the last/most-specific declaration wins outright, it doesn't
   merge with the earlier rule's sticky positioning). .enqad-dd-table headers aren't sticky, so
   "relative" (just enough to anchor the ::after sort-arrow below) is correct for that half only. */
.enqad-root table.enqad-table thead th {
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    padding-right: 16px !important;
}
.enqad-root table.enqad-dd-table thead th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 16px !important;
}
/* both .enqad-table and .enqad-dd-table headers are dark-background/white-text (AdminLTE skin) —
   a flat light hover background would leave white text unreadable on it, so lighten the EXISTING
   background in place instead of replacing its color */
.enqad-root table.enqad-table thead th:hover,
.enqad-root table.enqad-dd-table thead th:hover { filter: brightness(1.18); }
.enqad-root table.enqad-table thead th::after,
.enqad-root table.enqad-dd-table thead th::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    opacity: .25;
    border-top-color: currentColor;
    border-bottom-width: 0;
}
.enqad-root table.enqad-table thead th.enqad-sort-asc::after,
.enqad-root table.enqad-dd-table thead th.enqad-sort-asc::after {
    opacity: 1;
    border-top-width: 0;
    border-bottom-color: currentColor;
    border-bottom-width: 4px;
}
.enqad-root table.enqad-table thead th.enqad-sort-desc::after,
.enqad-root table.enqad-dd-table thead th.enqad-sort-desc::after { opacity: 1; }

/* ── Sankey Flow Analysis — field palette + path chips (enqad-sankey-*) ──────────────────── */
.enqad-root .enqad-sankey-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.enqad-root .enqad-sankey-field-btn {
    border: 1.5px solid var(--enqad-line);
    background: var(--enqad-bg);
    color: var(--enqad-ink-2);
    border-radius: 20px !important;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}
.enqad-root .enqad-sankey-field-btn:hover { border-color: var(--mc-primary-mid, var(--enqad-teal)); }
.enqad-root .enqad-sankey-field-btn.is-active {
    background: var(--mc-primary, var(--enqad-teal));
    border-color: var(--mc-primary, var(--enqad-teal));
    color: #fff;
}
.enqad-root .enqad-sankey-chips {
    min-height: 40px;
    padding: 10px 12px;
    border: 1px dashed var(--enqad-line);
    border-radius: 10px !important;
    background: var(--enqad-bg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.enqad-root .enqad-sankey-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid var(--mc-primary-mid, var(--enqad-teal));
    border-radius: 20px !important;
    padding: 4px 6px 4px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--enqad-ink-2);
    cursor: grab;
}
.enqad-root .enqad-sankey-chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50% !important;
    background: var(--mc-primary, var(--enqad-teal));
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.enqad-root .enqad-sankey-chip-x {
    color: var(--enqad-muted) !important;
    text-decoration: none !important;
    font-weight: 800;
    padding: 0 3px;
}
.enqad-root .enqad-sankey-chip-x:hover { color: #e11d48 !important; }
.enqad-root .enqad-sankey-chip-arrow { color: var(--enqad-faint); font-size: 11px; }
.enqad-root .enqad-sankey-toolbar { display: flex; gap: 8px; }
.enqad-root .enqad-sankey-chip.is-grouping { box-shadow: 0 0 0 2px var(--mc-primary-lt, #dde8ff); }
.enqad-root .enqad-sankey-chip-grp-ico { color: var(--mc-primary, var(--enqad-teal)); font-size: 11px; }

/* ── Sankey Flow Analysis — per-field value grouping editor (enqad-sankey-group-*) ──────────── */
.enqad-root .enqad-sankey-group-panel {
    border: 1px solid var(--mc-primary-mid, var(--enqad-teal));
    border-radius: 10px !important;
    background: #fbfdff;
    padding: 12px;
    margin-bottom: 12px;
}
.enqad-root .enqad-sankey-group-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    color: var(--enqad-ink-2);
    margin-bottom: 8px;
}
.enqad-root .enqad-sankey-group-hd .enqad-sankey-group-close {
    margin-left: auto;
    color: var(--enqad-muted) !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}
.enqad-root .enqad-sankey-group-hd .enqad-sankey-group-close:hover { color: #e11d48 !important; }
.enqad-root .enqad-sankey-group-select {
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--enqad-line);
    border-radius: 8px !important;
    font-size: 12px;
    padding: 4px;
    margin-bottom: 8px;
}
.enqad-root .enqad-sankey-group-add { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.enqad-root .enqad-sankey-group-add input {
    border: 1px solid var(--enqad-line);
    border-radius: 8px !important;
    padding: 5px 10px;
    font-size: 12px;
    min-width: 220px;
}
.enqad-root .enqad-sankey-group-list { display: flex; flex-direction: column; gap: 6px; }
.enqad-root .enqad-sankey-group-item {
    background: #fff;
    border: 1px solid var(--enqad-line);
    border-radius: 8px !important;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--enqad-ink-2);
}
.enqad-root .enqad-sankey-group-remove {
    float: right;
    color: var(--enqad-muted) !important;
    text-decoration: none !important;
    font-weight: 800;
}
.enqad-root .enqad-sankey-group-remove:hover { color: #e11d48 !important; }

/* ── Narrow-box layout (col-md-4/5/6…) — a resized box can be narrow on an otherwise-wide desktop
   screen, so the header/footer squeeze this fixes is keyed off the PANEL's own rendered width via
   a CSS container query, not the viewport (a @media query can't see it — the browser window itself
   may be plenty wide). `:has()` is already relied on elsewhere in this partition (see enqad-panel-title
   above), so this project's supported-browser baseline already covers container queries too. ── */
.enqad-root .enqad-boxwrap > .enqad-panel,
.enqad-root .enqad-grid-2 > .enqad-panel,
.enqad-root .enqad-grid-3 > .enqad-panel { container-type: inline-size; }
@container (max-width: 460px) {
    .enqad-root .enqad-panel-head {
        flex-direction: column;
        align-items: stretch;
    }
    .enqad-root .enqad-panel-head .enqad-panel-sub {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .enqad-root .enqad-panel-hd-right {
        width: 100%;
        justify-content: space-between;
    }
    .enqad-root .enqad-list-search { flex: 1 1 auto; min-width: 0; }
    .enqad-root .enqad-list-search-input { width: 100%; min-width: 0; }
    .enqad-root .enqad-pager { flex-direction: column; align-items: center; }
    .enqad-root .enqad-pager-left { order: 1; width: 100%; justify-content: center; }
    .enqad-root .enqad-pager-nav { order: 2; width: 100%; justify-content: center; }
    .enqad-root .enqad-pager-info { order: 3; width: 100%; text-align: center; }
    .enqad-root .enqad-pager-size { min-width: 56px; padding: 3px 4px; font-size: 11px; }
}
@container (max-width: 320px) {
    .enqad-root .enqad-panel-head .enqad-panel-sub { display: none; }
    .enqad-root .enqad-list-search { display: none; }
}

/* drill-down drawer's aggregate breakdown chart (ddBreakdownSec) — a fixed-height vertical stacked
   bar (set inline to 280px); this just adds breathing room below it before the table/pager. */
.enqad-dd-chart-wrap { margin-bottom: 14px; }

/* ── Universal chart/table toggle (enqadInitChartViewToggle) — small outline button pair, skin-based
   (uses the active skin's --mc-primary, same variable every other accent in this dashboard follows)
   sitting right-aligned just above a chart-only panel's visual content. Outline/transparent at rest,
   filled solid only when active — deliberately distinct from the solid .enqad-vt-btn used by the
   record-list panels' table/card toggle, so a chart-only panel reads as "this one also has a table"
   rather than looking like a full record browser. ── */
.enqad-root .enqad-chart-vt { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.enqad-root .enqad-chart-vt-btn {
    width: 26px;
    height: 26px;
    border-radius: 7px !important;
    border: 1.5px solid var(--mc-primary, var(--enqad-teal));
    background: transparent;
    color: var(--mc-primary, var(--enqad-teal));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: .15s;
}
.enqad-root .enqad-chart-vt-btn:hover { background: var(--mc-primary-lt, #f0fdfa); }
.enqad-root .enqad-chart-vt-btn.is-active {
    background: var(--mc-primary, var(--enqad-teal));
    border-color: var(--mc-primary, var(--enqad-teal));
    color: #fff;
}
.enqad-root .enqad-chart-table-wrap { margin-bottom: 0; }
body.enqad-printing .enqad-chart-vt { display: none; }

/* ── Custom Report Builder (Flow Analysis tab) — Chart Type select + Rows/Columns/Measures chip pickers ── */
.enqad-root .enqad-report-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 16px;
}
.enqad-root .enqad-report-field { display: flex; flex-direction: column; gap: 4px; }
.enqad-root .enqad-report-field label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--enqad-muted);
    margin: 0;
}
.enqad-root .enqad-report-field .enqad-select { min-width: 160px; }
.enqad-root .enqad-report-field--chips { min-width: 220px; flex: 1 1 220px; }
.enqad-root .enqad-report-req {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px !important;
    background: var(--enqad-bg-soft, #f1f5f9);
    color: var(--enqad-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.enqad-root .enqad-report-req--required { background: #fee2e2; color: #dc2626; }
.enqad-root .enqad-report-req--optional { background: #fef3c7; color: #b45309; }
/* dropdown-with-checkboxes multiselect — a button that shows the current picks as inline chips,
   opening a searchable checklist panel below it on click */
.enqad-root .enqad-report-msel { position: relative; }
.enqad-root .enqad-report-msel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 5px 8px;
    border: 1.5px solid var(--enqad-border, #e2e8f0);
    border-radius: 9px !important;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s;
}
.enqad-root .enqad-report-msel-btn:hover { border-color: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-report-msel.is-open .enqad-report-msel-btn { border-color: var(--mc-primary, var(--enqad-teal)); box-shadow: 0 0 0 3px var(--mc-primary-lt, #f0fdfa); }
.enqad-root .enqad-report-msel.is-open .enqad-report-msel-caret { transform: rotate(180deg); }
.enqad-root .enqad-report-msel-caret { margin-left: auto; color: var(--enqad-muted); font-size: 11px; flex-shrink: 0; transition: transform .15s; }
.enqad-root .enqad-report-msel-placeholder { color: var(--enqad-muted); font-size: 12.5px; }
.enqad-root .enqad-report-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.enqad-root .enqad-report-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px !important;
    background: var(--mc-primary-lt, #f0fdfa);
    color: var(--mc-primary, var(--enqad-teal));
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.enqad-root .enqad-report-chip-x {
    color: inherit;
    opacity: .65;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
}
.enqad-root .enqad-report-chip-x:hover { opacity: 1; color: #dc2626; text-decoration: none; }
.enqad-root .enqad-report-msel-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--enqad-border, #e2e8f0);
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
    padding: 8px;
}
.enqad-root .enqad-report-msel-panel.is-open { display: block; }
.enqad-root .enqad-report-msel-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    padding: 6px 9px;
    border: 1px solid var(--enqad-border, #e2e8f0);
    border-radius: 7px !important;
    font-size: 12.5px;
    outline: none;
}
.enqad-root .enqad-report-msel-search:focus { border-color: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-report-msel-list { max-height: 220px; overflow-y: auto; }
.enqad-root .enqad-report-msel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 6px !important;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
    transition: background .1s;
}
.enqad-root .enqad-report-msel-item:hover { background: var(--enqad-bg-soft, #f1f5f9); }
.enqad-root .enqad-report-msel-item.is-checked { background: var(--mc-primary-lt, #f0fdfa); font-weight: 600; color: var(--mc-primary, var(--enqad-teal)); }
.enqad-root .enqad-report-msel-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.enqad-root .enqad-report-msel-empty { padding: 10px 6px; text-align: center; color: var(--enqad-muted); font-size: 12px; }
.enqad-root .enqad-report-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 14px;
    border-radius: 9px !important;
    background: var(--mc-primary-lt, #f0fdfa);
    color: var(--enqad-ink, #334155);
    font-size: 12.5px;
    line-height: 1.5;
}
.enqad-root .enqad-report-hint i { color: var(--mc-primary, var(--enqad-teal)); margin-top: 1px; flex-shrink: 0; }
.enqad-root .enqad-report-actions { display: flex; gap: 8px; align-self: flex-end; margin-bottom: 0; padding-bottom:10px; }
.enqad-root .enqad-report-actions .btn { margin: 0; }
.enqad-root .enqad-report-cell { cursor: pointer; transition: background .12s; }
.enqad-root .enqad-report-cell:hover { background: var(--enqad-teal-50); }
.enqad-root .enqad-report-subhead { font-size: 11px; font-weight: 600; color: var(--enqad-muted); }
.enqad-root .enqad-report-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 3px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    vertical-align: middle;
}
#enqadReportTable thead th { text-align: center; vertical-align: middle; }
#enqadReportTable tbody tr:last-child { background: var(--enqad-teal-50); }
/* ── Top-bar School/Year multi-select — IDENTICAL look to the Custom Report Builder's (Flow
   Analysis tab) Rows/Columns/Measures picker: same .enqad-report-msel-btn/.enqad-report-chip base
   styling (plain white box, grey border, grey placeholder, unmodified rounded-rectangle + chevron).
   Only width is overridden here, to fit the compact top bar. ── */
.enqad-root .enqad-fltmsel { min-width: 170px; }
.enqad-root .enqad-filter--school .enqad-fltmsel { min-width: 230px; max-width: 420px; }
.enqad-root .enqad-filter:not(.enqad-filter--school) .enqad-fltmsel { max-width: 210px; }
.enqad-root .enqad-fltmsel .enqad-report-chip { font-size: 11.5px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Apply footer inside the School/Year dropdown panel — checking boxes only updates chips, the
   dashboard reloads only once Apply is clicked, so picking several schools/years doesn't fire a
   reload per click */
.enqad-root .enqad-fltmsel-apply-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--enqad-border, #e2e8f0);
    display: flex;
    justify-content: flex-end;
}
.enqad-root .enqad-fltmsel-apply-btn { display: inline-flex; align-items: center; gap: 5px; }
/* "School · Year" subtitle under a row/card's name — only rendered in multi-school/year mode */
.enqad-root .enqad-sy-sub { font-size: 10.5px; font-weight: 600; color: var(--mc-primary, var(--enqad-teal)); margin-top: 1px; }
/* persistent "N Schools · N Years" scope badge above the KPI row — same shape language as
   .enqad-hint, indigo-toned so it reads as informational context rather than a warning */
.enqad-root .enqad-scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--enqad-indigo-dark);
    background: var(--enqad-indigo-light);
    padding: 6px 14px;
    border-radius: 20px !important;
    margin-bottom: 10px;
}
.enqad-root .enqad-scope-badge.is-hidden { display: none; }
/* "Split by School" checkbox on the Overview trend chart — only shown in multi-school/year mode */
.enqad-root .enqad-trend-split-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--enqad-ink-2);
    cursor: pointer;
    margin: 6px 0 0;
}
.enqad-root .enqad-trend-split-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.enqad-root .enqad-trend-split-toggle.is-hidden { display: none; }
/* ── Top bar restructured into two rows: School/Year scope + one shared Apply on row 1, every
   other filter on row 2 — replaces the old single flex-wrap row + per-dropdown Apply footers ── */
.enqad-root .enqad-topbar { flex-direction: column; align-items: stretch; }
.enqad-root .enqad-topbar-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.enqad-root .enqad-topbar-row1 { padding-bottom: 6px; border-bottom: 1px dashed var(--enqad-line); }
.enqad-root .enqad-fltmsel-apply-btn--standalone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--mc-primary, var(--enqad-teal));
    border: 1px solid var(--mc-primary, var(--enqad-teal));
    padding: 6px 14px;
    border-radius: 8px !important;
    cursor: pointer;
}
.enqad-root .enqad-fltmsel-apply-btn--standalone:hover { filter: brightness(0.94); }
/* "Select All" row pinned atop a msel checklist — visually separated from the real options below it */
.enqad-root .enqad-report-msel-selectall { border-bottom: 1px solid var(--enqad-border, #e2e8f0); margin-bottom: 4px; padding-bottom: 8px; }
/* ── School/Year reload loader — replaces the old edusprint_loader_new.gif full-content swap.
   The dashboard markup stays put (just blurred + non-interactive) while a centred, fixed-position
   card sits above it, so a multi-school/year reload doesn't flash to a blank page. ── */
.enqad-reload-blur { filter: blur(3px); pointer-events: none; user-select: none; transition: filter .15s ease; }
.enqad-reload-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, .32);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: enqadReloadFadeIn .2s ease;
}
@keyframes enqadReloadFadeIn { from { opacity: 0; } to { opacity: 1; } }
.enqad-reload-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--enqad-card, #fff);
    padding: 30px 40px 26px;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, .4), 0 0 0 1px rgba(255, 255, 255, .06);
    animation: enqadReloadPop .25s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes enqadReloadPop { from { opacity: 0; transform: scale(.88) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* a clean, fully-round loader — a light full-circle track underneath a solid-colour arc that
   spins around it (the classic circular spinner shape), with a pulsing bar-chart icon sitting
   dead-centre so it still reads as "analyzing data" rather than a generic spinner */
.enqad-reload-orbit { position: relative; width: 76px; height: 76px; margin-bottom: 16px; }
.enqad-reload-orbit-track {
    position: absolute;
    inset: 0;
    border-radius: 50% !important;
    border: 5px solid var(--mc-primary-lt, rgba(13, 148, 136, .14));
}
.enqad-reload-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50% !important;
    border: 5px solid transparent;
    border-top-color: var(--mc-primary, var(--enqad-teal));
    border-right-color: var(--mc-primary, var(--enqad-teal));
    animation: enqadReloadSpin .9s linear infinite;
}
@keyframes enqadReloadSpin { to { transform: rotate(360deg); } }
.enqad-reload-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: var(--mc-primary, var(--enqad-teal));
    animation: enqadReloadPulse 1.4s ease-in-out infinite;
}
@keyframes enqadReloadPulse { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.enqad-reload-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--enqad-ink, #1e293b);
}
.enqad-reload-sub {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--enqad-muted, #64748b);
    text-align: center;
    max-width: 220px;
}
/* ── Follow-Up Journey Builder ── */
.enqad-root .enqad-journey-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.enqad-root .enqad-journey-stage-btn {
    padding: 6px 14px;
    border-radius: 999px !important;
    border: 1.5px solid var(--mc-primary, var(--enqad-teal));
    background: #fff;
    color: var(--mc-primary, var(--enqad-teal));
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: .12s;
}
.enqad-root .enqad-journey-stage-btn:hover { background: var(--mc-primary-lt, #f0fdfa); }
.enqad-root .enqad-journey-stage-btn--any {
    border-style: dashed;
    color: var(--enqad-muted);
    border-color: var(--enqad-border, #e2e8f0);
}
.enqad-root .enqad-journey-stage-btn--any:hover { background: var(--enqad-bg-soft, #f1f5f9); }
.enqad-root .enqad-journey-path-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.enqad-root .enqad-journey-path-row label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--enqad-muted);
    margin: 0;
}
.enqad-root .enqad-journey-chipbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1.5px dashed var(--enqad-border, #e2e8f0);
    border-radius: 9px !important;
    background: #fff;
}
.enqad-root .enqad-journey-chain { white-space: normal; min-width: 220px; font-size: 12px; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════
   HRC REUSE — Appraisal Configuration (JobApplicantProfileCardLayout)
   New additive classes only. No existing .hrc-* rule above is modified.
   ══════════════════════════════════════════════════════════════════ */

/* Card footer with several action buttons instead of the single
   full-width .hrc-view-apps-btn — pairs with the existing .hrc-card-footer */
.hrc-card-footer-wrap {
    flex-wrap: wrap;
}

/* Small outlined action button for a card footer — same visual language
   as .hrc-tbtn but auto-width instead of toolbar min-height. Kept as a
   single-class selector so the color-variant classes below (same
   specificity, declared later) can override border/color as intended. */
.hrc-mini-btn {
    box-sizing: border-box !important;
    border: 1.5px solid var(--hrc-primary) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    background-color: transparent !important;
    color: var(--hrc-primary) !important;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.4;
    transition: background .15s, box-shadow .15s;
}
.hrc-mini-btn:hover,
.hrc-mini-btn:focus {
    background-color: var(--hrc-primary-lt) !important;
    color: var(--hrc-primary) !important;
    text-decoration: none !important;
}
.hrc-mini-btn i.fa { font-family: FontAwesome !important; }

/* Danger variant — reuses the existing .hrc-rej-* status tokens */
.hrc-mini-btn.hrc-mini-btn-danger {
    border-color: var(--hrc-rej-fg) !important;
    color: var(--hrc-rej-fg) !important;
}
.hrc-mini-btn.hrc-mini-btn-danger:hover,
.hrc-mini-btn.hrc-mini-btn-danger:focus {
    background-color: var(--hrc-rej-bg) !important;
    color: var(--hrc-rej-fg) !important;
}

/* Warning variant — reuses the existing .hrc-pend-* status tokens */
.hrc-mini-btn.hrc-mini-btn-warning {
    border-color: var(--hrc-pend-fg) !important;
    color: var(--hrc-pend-fg) !important;
}
.hrc-mini-btn.hrc-mini-btn-warning:hover,
.hrc-mini-btn.hrc-mini-btn-warning:focus {
    background-color: var(--hrc-pend-bg) !important;
    color: var(--hrc-pend-fg) !important;
}

/* Success variant — reuses the existing .hrc-hired-* status tokens */
.hrc-mini-btn.hrc-mini-btn-success {
    border-color: var(--hrc-hired-fg) !important;
    color: var(--hrc-hired-fg) !important;
}
.hrc-mini-btn.hrc-mini-btn-success:hover,
.hrc-mini-btn.hrc-mini-btn-success:focus {
    background-color: var(--hrc-hired-bg) !important;
    color: var(--hrc-hired-fg) !important;
}

/* Solid primary variant — the main CTA (e.g. Lock & Publish) */
.hrc-mini-btn.hrc-mini-btn-solid {
    background-color: var(--hrc-primary) !important;
    color: #fff !important;
}
.hrc-mini-btn.hrc-mini-btn-solid:hover,
.hrc-mini-btn.hrc-mini-btn-solid:focus {
    background-color: var(--hrc-primary-dk) !important;
    color: #fff !important;
}

/* Inline (non-modal) filter fieldset — the candidate layout only ships a
   modal filter; Appraisal Configuration keeps its existing inline toggle
   panel, so this small wrapper reuses the same --hrc-* tokens for it. */
.hrc-filter-panel {
    background: var(--hrc-bg);
    border: 1px solid var(--hrc-border);
    border-radius: 12px !important;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.hrc-filter-panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hrc-txt-sec);
    margin-bottom: 12px;
}
.hrc-filter-panel-title i.fa { color: var(--hrc-primary); font-family: FontAwesome !important; }
.hrc-filter-panel label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hrc-txt-hint);
    margin-bottom: 6px;
    display: block;
}
.hrc-filter-panel .form-control {
    border: 1.5px solid var(--hrc-border) !important;
    border-radius: 8px !important;
    min-height: 38px;
    background: var(--hrc-surface) !important;
    color: var(--hrc-txt);
    box-shadow: none !important;
}
.hrc-filter-panel .form-control:focus {
    border-color: var(--hrc-primary) !important;
    box-shadow: 0 0 0 3px var(--hrc-primary-lt) !important;
}

/* Flex layout so the action buttons truly bottom-align with the fields,
   regardless of whether a field has a label above it */
.hrc-filter-grid {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.hrc-filter-field {
    flex: 1 1 220px;
    min-width: 180px;
}
.hrc-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.hrc-filter-actions .hrc-tbtn,
.hrc-filter-actions .hrc-mini-btn {
    min-height: 38px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .hrc-filter-grid { align-items: stretch; }
    .hrc-filter-actions { width: 100%; }
    .hrc-filter-actions .hrc-tbtn,
    .hrc-filter-actions .hrc-mini-btn { flex: 1 1 0; justify-content: center; }
}

/* Roomier card modifier — extra breathing room for the Appraisal
   Configuration cards without changing the shared .hrc-candidate-card
   defaults used elsewhere (e.g. JobApplicantProfileCardLayout). */
.hrc-candidate-card-roomy .hrc-card-header {
    padding: 18px 20px;
    gap: 12px;
}
.hrc-candidate-card-roomy .hrc-card-footer {
    padding: 18px 20px;
    gap: 12px;
}
.hrc-candidate-card-roomy .hrc-num-circle {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.hrc-candidate-card-roomy .hrc-cname {
    font-size: 15px;
}
.hrc-candidate-card-roomy .hrc-pill {
    padding: 5px 12px;
    font-size: 12.5px;
}
.hrc-candidate-card-roomy .hrc-mini-btn {
    padding: 5px 10px !important;
    font-size: 11px;
    gap: 5px;
}
.hrc-candidate-card-roomy .hrc-mini-btn i.fa {
    font-size: 10px;
}

/* Collapsible section header for legacy AdminLTE .box-header markup
   (Data/Global/User/Employee Tokens on the Insert/Edit forms). AdminLTE's
   own .box-header rules force block/centered text with !important, so
   this needs !important too to actually left-align and tint the header. */
.hrc-token-header {
    display: flex !important;
    align-items: center !important;
    /*justify-content: space-between !important;*/
    text-align: left !important;
    background: var(--hrc-primary-lt) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--hrc-border) !important;
}
.hrc-token-header .hrc-cname {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    color: var(--hrc-txt) !important;
}

/* Colored-accent section card — used for the toggleable sub-forms on the
   Edit page (Appraisal Form / Attendance / Leave / etc.). Each instance
   sets its own --hrc-accent via inline style; falls back to --hrc-primary. */
.hrc-accent-card {
    border: 1px solid var(--hrc-border);
    border-left: 4px solid var(--hrc-accent, var(--hrc-primary));
    border-radius: 10px !important;
    background: var(--hrc-surface);
    overflow: hidden;
    margin-bottom: 16px;
}
.hrc-accent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--hrc-bg);
    border-bottom: 1px solid var(--hrc-border);
}
.hrc-accent-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--hrc-txt);
    margin: 0;
}
.hrc-accent-card-title i { color: var(--hrc-accent, var(--hrc-primary)); }
.hrc-accent-card-body { padding: 14px 16px; }

/* Small avatar modifier — 40px instead of .hrc-avatar's default 68px hero
   size, for use inside a compact list row (e.g. assigned-users list). */
.hrc-avatar-sm {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Simple list row (avatar/name + right-aligned action) — the assigned
   candidate-card design is card-based, not row-based, so this fills the
   gap for a plain list-style layout reusing the same --hrc-* tokens. */
.hrc-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hrc-border);
}
.hrc-list-row:last-child { border-bottom: none; }
.hrc-list-row:hover { background: var(--hrc-primary-lt); }
.hrc-list-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hrc-list-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--hrc-txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hrc-list-empty {
    padding: 16px;
    text-align: center;
    color: var(--hrc-rej-fg, #dc2626);
    font-weight: 600;
    font-size: 13px;
}

.enqad-root .enqad-journey-chain-arrow { margin: 0 3px; opacity: .5; font-size: 10px; }