/* ════════════════════════════════════════════════════════════════════
   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)

   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');


/* ████████████████████████████████████████████████████████████████████
   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
   ════════════════════════════════════════════════════════════════════ */
:root {
    --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  */
:root,
.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);
}

/* ════════════════════════════════════════════════════════════════════
   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   : 1.0.0
   Updated   : 2026-06-09
   Theme base: inherits --hrc-* design tokens from PARTITION 1
   Usage     : MCampusUI/Areas/HRManagement/Views/EmployeeDetail/
   ──────────────────────────────────────────────────────────────────────
   emp-*  Employee card header (gradient), avatar column, identity
          items, status badges, footer buttons, responsive layout.
          Builds on top of the shared hrc-candidate-card structure.
   ████████████████████████████████████████████████████████████████████ */

/* ── 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 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 ─────────────────────────────────────────────── */
:root,
.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: 32px;
    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;
}
.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: 8px !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;
}

/* 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: 8px;
    /* 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: 12px 0 0 12px !important;
    padding: 16px 9px 16px 12px;
    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: 15px;
    padding-right: 11px;
    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: 30px;
    height: 30px;
    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: 15px; 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: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    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: 20px;
    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: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .8px;
    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;
}
.enq-nav-heading i.fa { font-family: FontAwesome !important; font-size: 10px; color: var(--mc-primary); }

/* 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-border);
    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; }
}

/* ═══════════════════════════════════════════════════════════════
   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; }
}