/* =============================================================================
   Fee & Collection Dashboard — visual language
   -----------------------------------------------------------------------------
   Restyles the fee/collection widget cards (Students Status, Expected Fee
   Status, Fee Paid Status, Tuition Fee Status + graph, Tuition Vouchers Status,
   Fee Received by Type, Fee Un-Paid by Type, Month-wise Tuition Fee, Advance Fee
   Balance) to the approved Fee Dashboard design.

   Applied as a SCOPED STYLESHEET over the existing Bootstrap card markup rather
   than by rewriting the views: those files carry the reconciled figures and
   their drill-down links, and re-authoring them to hit a visual target would put
   all of that at risk for no functional gain. Everything below hangs off
   .ems-feedash, so nothing outside the pane is touched.

   Tokens (from the design):
     page            #eef1f5      card            #ffffff
     border          #e3e8ef      card shadow     0 1px 2px rgba(15,23,42,.04)
     ink             #0f172a      muted ink       #94a3b8
     inset surface   #f8fafc      inset border    #eef2f6
     positive        #0d9f6e on #e7f7f1
     negative        #e5484d on #fdeceb
     accent          #4f46e5 on #eef0ff
     secondary       #22b8cf      soft bar        #c7d2fe
   ============================================================================ */

.ems-feedash {
    --fd-page: #eef1f5;
    --fd-card: #ffffff;
    --fd-border: #e3e8ef;
    --fd-ink: #0f172a;
    --fd-muted: #94a3b8;
    --fd-inset: #f8fafc;
    --fd-inset-2: #f6f8fb;
    --fd-inset-border: #eef2f6;
    --fd-pos: #0d9f6e;
    --fd-pos-bg: #e7f7f1;
    --fd-neg: #e5484d;
    --fd-neg-bg: #fdeceb;
    --fd-accent: #4f46e5;
    --fd-accent-bg: #eef0ff;

    background: var(--fd-page);
    color: var(--fd-ink);
    padding: 14px 14px 24px;
    border-radius: 12px;
    font-family: 'IBM Plex Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Card shell ---------------------------------------------------------- */
/* The widgets use .card.border-top-primary, whose 2px coloured top rule belongs
   to the old theme; the design carries weight with a hairline border + a very
   low shadow instead.
   -----------------------------------------------------------------------------
   SPECIFICITY: these panes sit inside ems-modern.css's .ems-ui wrapper, which
   styles the same elements through :not() guards — e.g.
   `.ems-ui .card:not([class*="bg-"])` at 0-3-0. A plain `.ems-feedash .card`
   (0-2-0) loses to it no matter the load order, so the rules below MIRROR those
   selector shapes to match or exceed them; fee-dashboard.css is loaded after
   ems-modern.css, so an equal-specificity rule wins. */
.ems-feedash .card {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    margin-bottom: 14px;
}

/* 0-3-0 — matches .ems-ui .card:not([class*="bg-"]) */
.ems-feedash .card:not([class*="bg-"]) {
    background: var(--fd-card);
    border: 1px solid var(--fd-border);
}

.ems-feedash .card.border-top-primary,
.ems-feedash .card[class*="border-top-"] {
    border-top: 1px solid var(--fd-border);
}

.ems-feedash .card-header { padding: 11px 13px 9px; }

/* 0-3-0 — matches .ems-ui .card-header:not([class*="bg-"]) */
.ems-feedash .card-header:not([class*="bg-"]) {
    background: transparent;
    border-bottom: 1px solid var(--fd-inset-border);
}

/* Card titles: small, tight, dark — not the old primary-blue h5. */
.ems-feedash .card-header .card-title,
.ems-feedash .card-header h5 {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--fd-ink) !important;
    margin: 0;
}

.ems-feedash .card-body {
    padding: 11px 13px 13px;
}

/* ---- Tables inside cards ------------------------------------------------- */
.ems-feedash .table {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--fd-ink);
}

/* 0-5-0 — beats .ems-ui .table:not(.table-dark):not([class*="bg-"]) thead th (0-4-0),
   which otherwise repaints the header strip #f8fafc with its own type. */
.ems-feedash .table:not(.table-dark):not([class*="bg-"]) thead th {
    border-top: 0;
    border-bottom: 1px solid var(--fd-inset-border);
    padding: 6px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fd-muted);
    background: transparent;
}

/* 0-4-0 — beats .ems-ui .table:not(.table-dark) td (0-3-0), which sets 11px padding
   and a top rule; the design uses tighter cells and a bottom hairline instead. */
.ems-feedash .table:not(.table-dark) td,
.ems-feedash .table:not(.table-dark) th {
    border-top: 0;
    border-bottom: 1px solid #f2f5f9;
    padding: 6px 8px;
    vertical-align: middle;
}

/* 0-6-0 — beats .ems-ui .table:not(.table-dark) tbody td:not([class*="bg-"]):not([class*="text-"]),
   which forces #334155 on every uncoloured cell. */
.ems-feedash .table:not(.table-dark) tbody td:not([class*="bg-"]):not([class*="text-"]) {
    color: var(--fd-ink);
}

.ems-feedash .table tbody tr:last-child td { border-bottom: 0; }

/* 0-6-0 — matches .ems-ui .table.table-hover:not(.table-dark) tbody tr:hover td:not([class*="bg-"]) */
.ems-feedash .table.table-hover:not(.table-dark) tbody tr:hover td:not([class*="bg-"]) {
    background: var(--fd-inset);
}

/* Money reads down the column. */
.ems-feedash .table td.text-right,
.ems-feedash .table th.text-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* The totals line at the foot of each card. */
.ems-feedash .table tr.font-weight-bold td,
.ems-feedash .table tfoot td,
.ems-feedash .table tfoot th {
    border-top: 1px solid var(--fd-inset-border);
    border-bottom: 0;
    font-weight: 700;
    color: var(--fd-ink);
}

/* ---- Semantic colour ----------------------------------------------------- */
/* The views already mark figures with Bootstrap's text-success / text-danger /
   text-primary; remap those three to the design's palette so the meaning stays
   and only the hue changes. */
.ems-feedash .text-success { color: var(--fd-pos) !important; }
.ems-feedash .text-danger  { color: var(--fd-neg) !important; }
.ems-feedash .text-primary { color: var(--fd-accent) !important; }
.ems-feedash .text-muted   { color: var(--fd-muted) !important; }

/* ---- Badges / pills ------------------------------------------------------ */
/* Design pill: 10.5px, 600, radius 5, tinted background — used for the "975
   active", "60.83% due", "607 unpaid" chips beside a card title. */
.ems-feedash .badge,
.ems-feedash .fd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 5px;
    padding: 2px 7px;
    background: var(--fd-inset);
    color: var(--fd-ink);
}

.ems-feedash .badge-success, .ems-feedash .fd-pill--pos { background: var(--fd-pos-bg); color: var(--fd-pos); }
.ems-feedash .badge-danger,  .ems-feedash .fd-pill--neg { background: var(--fd-neg-bg); color: var(--fd-neg); }
.ems-feedash .badge-primary, .ems-feedash .fd-pill--acc { background: var(--fd-accent-bg); color: var(--fd-accent); }

/* ---- KPI tiles ----------------------------------------------------------- */
/* The tile strip the student sheet and several widgets render inline. */
.ems-feedash .ems-sbk-summary > div > div {
    border-radius: 10px !important;
    border-color: var(--fd-border) !important;
}

/* ---- Inset panels -------------------------------------------------------- */
/* Sub-panels inside a card (the design's #f6f8fb strip). */
.ems-feedash .well,
.ems-feedash .fd-inset {
    background: var(--fd-inset-2);
    border: 1px solid #eaeff5;
    border-radius: 7px;
    padding: 7px 10px;
}

/* ---- Progress bars ------------------------------------------------------- */
.ems-feedash .progress {
    height: 8px;
    border-radius: 4px;
    background: #f1f4f8;
    box-shadow: none;
}

.ems-feedash .progress-bar { border-radius: 4px; background: var(--fd-pos); }

/* ---- Links --------------------------------------------------------------- */
/* Figures are drill-downs; they should read as data first and reveal the link
   on hover, rather than sitting underlined in link-blue. */
.ems-feedash a.table_link,
.ems-feedash td a,
.ems-feedash th a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}

.ems-feedash td a:hover,
.ems-feedash th a:hover {
    color: var(--fd-accent);
    border-bottom-color: currentColor;
}

/* ---- Print --------------------------------------------------------------- */
@media print {
    .ems-feedash { background: #fff; padding: 0; }
    .ems-feedash .card { box-shadow: none; border-color: #d8dee7; }
}