/* Fluent 2 page styles — finance module. Uses only tokens from fluent-tokens.css (no hex, no raw px for
   spacing/type). Loaded after styles.css. Owned by the finance pages; keep selectors scoped to them. */

/* Pages: #financial-reports, #pricing, #teacher-payments, #reports (admin) · #teacher-earnings (teacher).
   Dialogs: profit shares, expense edit, teacher payment, payment history, opening earnings,
   report period options (all marked with .fin-dialog). Every class here starts with fin-. */

/* ---------- Tones ---------- */
.fin-tone-brand{background:var(--tint-brand-bg);color:var(--tint-brand-fg)}
.fin-tone-success{background:var(--tint-success-bg);color:var(--tint-success-fg)}
.fin-tone-warning{background:var(--tint-warning-bg);color:var(--tint-warning-fg)}
.fin-tone-danger{background:var(--tint-danger-bg);color:var(--tint-danger-fg)}
.fin-tone-purple{background:var(--tint-purple-bg);color:var(--tint-purple-fg)}
.fin-tone-teal{background:var(--tint-teal-bg);color:var(--tint-teal-fg)}
.fin-tone-neutral{background:var(--tint-neutral-bg);color:var(--tint-neutral-fg)}
/* (.fin-pos / .fin-neg / .fin-muted are defined after the components so they win the cascade.) */
.fin-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-strong{font-weight:var(--fontWeightSemibold)}

/* ---------- KPI row: white stat cards on the canvas ---------- */
.fin-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:var(--spacingHorizontalM);margin-bottom:var(--spacingVerticalM)}
.fin-kpis.fin-kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fin-kpis.fin-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fin-kpis.fin-kpis-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.fin-kpis.fin-kpis-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.fin-kpi{display:flex;flex-direction:column;gap:var(--spacingVerticalXS);min-width:0;padding:var(--spacingVerticalL) var(--spacingHorizontalL);background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4)}
.fin-kpi-wide{grid-column:span 2}
.fin-kpi-head{display:flex;align-items:center;gap:var(--spacingHorizontalS);min-width:0;margin-bottom:var(--spacingVerticalXS)}
.fin-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase400);line-height:1}
.fin-kpi-label{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);min-width:0}
.fin-kpi-value{font-size:var(--fontSizeBase600);line-height:var(--lineHeightBase600);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-kpi-wide .fin-kpi-value{font-size:var(--fontSizeHero700);line-height:var(--lineHeightHero700)}
.fin-kpi-sub{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}

/* ---------- Period tiles: one white card split by hairlines ---------- */
.fin-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--strokeWidthThin);margin-bottom:var(--spacingVerticalXXL);background:var(--colorNeutralStroke2);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4);overflow:hidden}
.fin-period{display:flex;flex-direction:column;gap:var(--spacingVerticalXXS);min-width:0;padding:var(--spacingVerticalM) var(--spacingHorizontalL);background:var(--colorNeutralBackground1)}
.fin-period-label{display:flex;align-items:center;gap:var(--spacingHorizontalSNudge);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-period-label i{color:var(--colorNeutralForeground3)}
.fin-period-value{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums}
.fin-period-sub{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}

/* ---------- Card (one level only) with a Fluent card header ---------- */
.fin-card{background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4);margin-bottom:var(--spacingVerticalM);min-width:0}
.fin-card-head{display:flex;align-items:center;gap:var(--spacingHorizontalM);flex-wrap:wrap;padding:var(--spacingVerticalL) var(--spacingHorizontalL)}
.fin-head-ico{flex-shrink:0;width:20px;font-size:var(--fontSizeBase500);line-height:1;text-align:center;color:var(--colorBrandForeground1)}
.fin-head-text{flex:1 1 220px;min-width:0}
.fin-card-title{font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.fin-card-sub{margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-head-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-wrap:wrap;margin-inline-start:auto}
.fin-head-value{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500);font-weight:var(--fontWeightSemibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-card-body{padding:var(--spacingVerticalL) var(--spacingHorizontalL)}
.fin-card-head + .fin-card-body,.fin-card-body + .fin-card-body{border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
/* A body that holds a table or a list: rows run edge to edge. */
.fin-card-body.fin-flush{padding:var(--spacingVerticalXS) var(--spacingHorizontalS)}
.fin-card-body.fin-list{padding:0}
/* Search field in a card header (inline end) */
.fin-card .search-box{margin-bottom:0}
.fin-head-actions .search-box input{flex:0 1 240px;width:240px;min-width:0}

/* ---------- Stat cells inside a card (no fills, grouped by spacing) ---------- */
.fin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacingVerticalL) var(--spacingHorizontalXL)}
.fin-stat{min-width:0}
.fin-stat-label{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-stat-value{margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase600);line-height:var(--lineHeightBase600);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-meter{height:var(--strokeWidthThickest);margin-top:var(--spacingVerticalS);border-radius:var(--borderRadiusCircular);background:var(--colorNeutralBackground6);overflow:hidden}
.fin-meter > span{display:block;height:100%;border-radius:inherit;background:var(--colorCompoundBrandBackground)}
.fin-note{display:flex;gap:var(--spacingHorizontalS);align-items:flex-start;font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-note i{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3)}
.fin-note.fin-warn,.fin-note.fin-warn i{color:var(--tint-warning-fg)}
.fin-card-body > .fin-note + .fin-note{margin-top:var(--spacingVerticalS)}

/* ---------- List rows (Microsoft "settings card" rows) ---------- */
.fin-row{display:flex;align-items:center;gap:var(--spacingHorizontalM);min-height:48px;padding:var(--spacingVerticalS) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.fin-row:last-child{border-bottom:0}
.fin-row-ico{flex-shrink:0;width:20px;font-size:var(--fontSizeBase400);line-height:1;text-align:center;color:var(--colorNeutralForeground2)}
.fin-row-main{flex:1 1 auto;min-width:0}
.fin-row-title{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground1)}
.fin-row-desc{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-row-end{flex-shrink:0;display:flex;align-items:center;gap:var(--spacingHorizontalS);font-size:var(--fontSizeBase300);font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-row-end.fin-strong{font-weight:var(--fontWeightSemibold)}
.fin-row label{display:block;margin:0;font-weight:var(--fontWeightRegular);font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground1);cursor:pointer}
/* Pricing: a small numeric field at the end of each row */
.fin-row .fin-row-ctl{flex-shrink:0;display:flex;align-items:center;gap:var(--spacingHorizontalS)}
.fin-row .fin-row-ctl .form-control{width:120px;max-width:120px}
.fin-unit{font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3);white-space:nowrap}

/* ---------- Badges (fill only) ---------- */
.fin-badge{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);min-height:20px;padding:0 var(--spacingHorizontalS);border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold);white-space:nowrap;vertical-align:middle}

/* ---------- Forms: content-sized fields side by side ---------- */
.fin-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacingVerticalM) var(--spacingHorizontalM)}
.fin-form .form-group{margin-bottom:0;min-width:0}
.fin-form .fg-xs{flex:0 1 var(--field-w-xs)}
.fin-form .fg-s{flex:0 1 var(--field-w-s)}
.fin-form .fg-m{flex:0 1 var(--field-w-m)}
.fin-form .fg-l{flex:0 1 var(--field-w-l)}
.fin-form .form-group .form-control{max-width:none}
.fin-form-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);align-items:center}
.fin-hint{display:block;margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}

/* ---------- Tables inside finance cards ---------- */
.fin-card .table-container{background:transparent;box-shadow:none;border-radius:0;padding:0;margin:0}
.fin-card table td.fin-money,.fin-card table th.fin-money{white-space:nowrap}
.fin-card table tfoot td,.fin-dialog table tfoot td,.fin-card table tr.fin-total td,.fin-dialog table tr.fin-total td{font-weight:var(--fontWeightSemibold);border-bottom:0;border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke1)}
.fin-card table tfoot tr:hover,.fin-dialog table tfoot tr:hover,.fin-card table tr.fin-total:hover,.fin-dialog table tr.fin-total:hover{background:transparent}
.fin-card tbody tr:last-child td,.fin-dialog tbody tr:last-child td{border-bottom:0}
.fin-cell-ico{width:20px;margin-inline-end:var(--spacingHorizontalS);text-align:center;color:var(--colorNeutralForeground3)}
.fin-actions{display:flex;align-items:center;gap:var(--spacingHorizontalXS);flex-wrap:nowrap;white-space:nowrap}
.fin-td-actions{width:1%;white-space:nowrap}
.fin-who{display:flex;flex-direction:column;min-width:0}
.fin-who-sub{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}

/* ---------- Empty state ---------- */
.fin-empty{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalS);padding:var(--spacingVerticalXXL) var(--spacingHorizontalL);text-align:center;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}
.fin-empty i{font-size:var(--fontSizeHero800);line-height:1;color:var(--colorNeutralForeground4)}
table tr:hover > td.fin-empty-cell{background:transparent}
table tr:has(> td.fin-empty-cell):hover{background:transparent}
td.fin-empty-cell{border-bottom:0}

/* ---------- Profit split: one row per admin account ---------- */
.fin-share{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingVerticalM) var(--spacingHorizontalL);padding:var(--spacingVerticalM) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.fin-share:last-child{border-bottom:0}
.fin-share-who{display:flex;align-items:center;gap:var(--spacingHorizontalM);flex:1 1 220px;min-width:0}
.fin-avatar{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeBase300)}
.fin-share-name{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);overflow-wrap:anywhere}
.fin-share-user{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-share-nums{display:grid;grid-template-columns:repeat(3,minmax(110px,auto));gap:var(--spacingHorizontalXL);flex:0 1 auto}
.fin-share-num{min-width:0;text-align:start}
.fin-share-num .fin-stat-value{font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}

/* ---------- Report tabs on the canvas ---------- */
#financial-reports .report-tabs{margin-bottom:var(--spacingVerticalM)}
#financial-reports .report-content > .fin-card{margin-bottom:0}
#financial-reports .report-content{margin-bottom:var(--spacingVerticalXXL)}

/* Pricing: the form only groups the two settings cards; it is not a card itself. */
#pricing > .card > form.fin-plain{background:transparent;box-shadow:none;border-radius:0;padding:0;margin:0}
.fin-form-foot{display:flex;justify-content:flex-start;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalL)}

/* Lead text under a page title */
.fin-lead{margin:calc(-1 * var(--spacingVerticalS)) 0 var(--spacingVerticalL);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}

/* Row delete: neutral outline button with a danger icon; tinted on hover */
.btn.fin-btn-danger i{color:var(--tint-danger-fg)}
.btn.fin-btn-danger:hover{background:var(--tint-danger-bg);border-color:var(--tint-danger-border);color:var(--tint-danger-fg)}

/* ---------- Dialogs ---------- */
.modal-content:has(.fin-dialog){max-width:600px}
.modal-content:has(.fin-dialog-wide){max-width:680px}
.fin-dialog .form-group:last-child{margin-bottom:0}
.fin-dialog-text{margin-bottom:var(--spacingVerticalL);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}
.fin-dialog-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXXL)}
.fin-kv{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM);padding:var(--spacingVerticalM) var(--spacingHorizontalL);margin-bottom:var(--spacingVerticalL);border-radius:var(--borderRadiusLarge);background:var(--surface-2)}
.fin-kv-label{font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground2)}
.fin-kv-value{font-size:var(--fontSizeBase600);line-height:var(--lineHeightBase600);font-weight:var(--fontWeightSemibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-dialog .msgbar{margin-bottom:var(--spacingVerticalL)}
.fin-dialog .fin-row{padding-inline:0}
.fin-dialog .fin-list-box{border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.fin-section-label{margin-bottom:var(--spacingVerticalS);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
/* Period presets: chips the user clicks */
.fin-chips{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalXXL)}
.fin-chips .btn{border-radius:var(--borderRadiusCircular);font-weight:var(--fontWeightRegular)}
.fin-divider{height:var(--strokeWidthThin);margin:0 0 var(--spacingVerticalL);background:var(--colorNeutralStroke2)}
.fin-dialog .table-container{margin:0}

/* ---------- Meaningful colour (profit / loss / debt) — after the components on purpose ---------- */
.fin-pos{color:var(--tint-success-fg)}
.fin-neg{color:var(--tint-danger-fg)}
.fin-muted{color:var(--colorNeutralForeground3)}
/* Visually hidden label (screen readers only) */
.fin-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
    .fin-kpis.fin-kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fin-kpis.fin-kpis-5,.fin-kpis.fin-kpis-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
    .fin-kpis.fin-kpis-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fin-periods{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fin-share-nums{flex:1 1 100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacingHorizontalM)}
}
@media (max-width:768px){
    .fin-kpis,.fin-kpis.fin-kpis-3,.fin-kpis.fin-kpis-4,.fin-kpis.fin-kpis-5,.fin-kpis.fin-kpis-6{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fin-kpis > .fin-kpi:last-child:nth-child(odd){grid-column:1 / -1}
    .fin-kpi{padding:var(--spacingVerticalM) var(--spacingHorizontalM)}
    .fin-kpi-value{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500)}
    .fin-kpi-wide .fin-kpi-value{font-size:var(--fontSizeBase600);line-height:var(--lineHeightBase600)}
    .fin-periods{margin-bottom:var(--spacingVerticalXL)}
    .fin-period{padding:var(--spacingVerticalM)}
    .fin-period-value{font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}
    .fin-card-head{padding:var(--spacingVerticalM) var(--spacingHorizontalL)}
    .fin-card-body{padding:var(--spacingVerticalM) var(--spacingHorizontalL)}
    .fin-card-body.fin-flush{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXS)}
    .fin-card-body.fin-list{padding:0}
    /* a row's actions wrap instead of running off the screen (mobile review: «سجل الدفعات» was cut off) */
    .fin-actions{flex-wrap:wrap;white-space:normal;gap:var(--spacingVerticalS) var(--spacingHorizontalS)}
    .fin-td-actions{width:auto;white-space:normal}
    .fin-head-actions .search-box{width:100%}
    .fin-head-actions .search-box input{flex:1 1 auto;width:100%}
    .fin-row,.fin-share{padding-inline:var(--spacingHorizontalL)}
    .fin-head-actions{margin-inline-start:0;width:100%}
    .fin-head-actions .btn{flex:1 1 auto}
    .fin-stat-value{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500)}
    .fin-form .form-group{flex:1 1 100%}
    /* short fields (amount, date) pair up two per line on phones */
    .fin-form .form-group.fg-s,.fin-form .form-group.fg-xs{flex:1 1 calc(50% - var(--spacingHorizontalM))}
    .fin-form-actions,.fin-form-actions .btn,.fin-form-foot .btn{width:100%}
    .fin-form-foot{flex-direction:column}
    /* The four tabs: equal columns, icon and word, the label wraps (the shared rule in styles.css) */
    #financial-reports .report-tab{font-size:var(--fontSizeBase200)}
    .fin-dialog-actions .btn{flex:1 1 auto}
}
@media (max-width:480px){
    .fin-share-nums{gap:var(--spacingHorizontalS)}
    .fin-share-num .fin-stat-value{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}
    /* Narrow screens: a row's field drops under its label, same for every row */
    .fin-row:has(.fin-row-ctl){flex-wrap:wrap;row-gap:var(--spacingVerticalS)}
    .fin-row .fin-row-ctl{flex:1 0 100%;padding-inline-start:calc(20px + var(--spacingHorizontalM))}
    .fin-avatar + .fin-row-main ~ .fin-row-ctl{padding-inline-start:calc(36px + var(--spacingHorizontalM))}
}

/* Delete-entry dialog: which family/admin, date and description. */
.fin-facts{margin:var(--spacingVerticalS) 0 0;padding-inline-start:var(--spacingHorizontalL);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}

/* A long word (a pasted link) in a description wraps instead of widening the page (#28). */
.fin-wrap{overflow-wrap:anywhere;min-width:8em}

/* The teacher's statement (PM 11): the period's figures above its list, one line each. */
.fin-stmt-summary{display:grid;gap:var(--spacingVerticalXS);margin-bottom:var(--spacingVerticalM)}

/* ---------- The finance page (redesign, 2026-10-28) ---------- */
/* The period choice above the tabs, and the dates it covers. */
.fin-period-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacingVerticalS) var(--spacingHorizontalM);margin-bottom:var(--spacingVerticalL)}
.fin-period-bar .fin-chips{margin-bottom:0;flex:1 1 100%}
.fin-period-select{display:none;margin-bottom:0}
.fin-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacingVerticalS) var(--spacingHorizontalM)}
.fin-custom .form-group{margin-bottom:0;flex:0 1 var(--field-w-s)}
.fin-custom .msgbar{flex:1 1 100%;margin:0}
.fin-range{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingHorizontalS);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}
.fin-range > i{color:var(--colorNeutralForeground3)}
.fin-updating{font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}
/* What a figure covers: the period (brand tint) or «الآن» (neutral). */
.fin-when{align-self:flex-start;display:inline-flex;align-items:center;min-height:20px;padding:0 var(--spacingHorizontalS);border-radius:var(--borderRadiusCircular);background:var(--tint-brand-bg);color:var(--tint-brand-fg);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold);white-space:nowrap}
.fin-when.fin-when-now{background:var(--tint-neutral-bg);color:var(--tint-neutral-fg)}
.fin-group-label{padding:var(--spacingVerticalM) var(--spacingHorizontalL) var(--spacingVerticalXS)}
/* The net profit as a sum, top to bottom. */
.fin-sum{display:flex;flex-direction:column}
.fin-sum .msgbar{margin-bottom:var(--spacingVerticalM)}
.fin-sum-row{display:flex;align-items:baseline;gap:var(--spacingHorizontalM);padding:var(--spacingVerticalS) 0;border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}
.fin-sum-op{flex-shrink:0;width:1.25em;text-align:center;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground3)}
.fin-sum-label{flex:1 1 auto;min-width:0;color:var(--colorNeutralForeground1)}
.fin-sum-val{flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-sum-row.fin-sum-total{border-bottom:0;border-top:var(--strokeWidthThick) solid var(--colorNeutralStroke1);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}
.fin-sum-total .fin-sum-label{color:inherit}
/* On a phone (after the rules above, so it wins): one labelled select instead of the chips; the chosen dates two per line. */
@media (max-width:768px){
    .fin-period-chips{display:none}
    .fin-period-select{display:block;flex:1 1 100%}
    .fin-custom{flex:1 1 100%}
    .fin-custom .form-group{flex:1 1 calc(50% - var(--spacingHorizontalM))}
}
/* «شهراً بشهر»: a month's name opens it as the period. */
.fin-month-btn{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:transparent;color:var(--colorBrandForeground1);font:inherit;font-weight:var(--fontWeightSemibold);text-align:start;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (pointer:coarse){ .fin-month-btn{min-height:44px} }
.fin-months tr.fin-month-on td{background:var(--tint-brand-bg)}
.fin-months-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--spacingHorizontalM);padding:var(--spacingVerticalM) var(--spacingHorizontalL);border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2);font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground2)}
/* «إيداعات وإيرادات»: the two buttons that open the forms. */
.fin-acts-bar{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalM)}
.fin-nowrap{white-space:nowrap}
/* The deposit's family search: its matches are buttons (name, phone, children). */
.fin-matches-box{margin-top:var(--spacingVerticalS)}
.fin-matches-box .fin-hint{margin-top:0}
.fin-matches{display:flex;flex-direction:column;gap:var(--spacingVerticalXS);max-height:280px;overflow-y:auto}
.fin-match{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacingVerticalXXS);width:100%;min-height:44px;padding:var(--spacingVerticalS) var(--spacingHorizontalM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);font:inherit;text-align:start;cursor:pointer}
.fin-match:hover,.fin-match:focus-visible{background:var(--colorSubtleBackgroundHover);border-color:var(--colorBrandStroke1)}
.fin-match-name{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold)}
.fin-match-sub{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);overflow-wrap:anywhere}
.fin-picked{display:flex;align-items:center;gap:var(--spacingHorizontalS);padding:var(--spacingVerticalS) var(--spacingHorizontalM);border-radius:var(--borderRadiusMedium);background:var(--tint-success-bg);color:var(--tint-success-fg);font-size:var(--fontSizeBase300)}
@media (max-width:768px){
    .fin-acts-bar .btn{flex:1 1 auto}
}
/* «شهراً بشهر» on a phone: a short list instead of the table — each month one short card, every figure with its word. */
.fin-mcards{display:none}
.fin-mcard{padding:var(--spacingVerticalS) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.fin-mcard:last-child{border-bottom:0}
.fin-mcard.on{background:var(--tint-brand-bg)}
.fin-mcard-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 var(--spacingHorizontalM)}
.fin-mcard-profit{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-mcard-profit b{font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground1)}
.fin-mcard-profit b.fin-pos{color:var(--tint-success-fg)}
.fin-mcard-profit b.fin-neg{color:var(--tint-danger-fg)}
.fin-mcard-figs{display:flex;flex-wrap:wrap;gap:var(--spacingVerticalXXS) var(--spacingHorizontalL);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.fin-mcard-fig{white-space:nowrap}
.fin-mcard-fig b{font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
@media (max-width:768px){
    .fin-months-wide{display:none}
    .fin-mcards{display:block}
}