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

/* The role home pages (admin / teacher / parent) follow the Microsoft account "home" pattern:
   greeting on the canvas, a row of quick links on the canvas, KPI tiles, then white panels with
   a header row (icon + title + count + "see all" link) and list rows divided by hairlines.
   Only one card level: tiles and panels are cards, everything inside them is rows and spacing.
   The `dash-` classes are only rendered by the dashboard functions in app.js. */

/* ---------- Greeting (title row) ---------- */
#dashboard .dash-hero{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--spacingVerticalM) var(--spacingHorizontalXXL);margin-bottom:var(--spacingVerticalXL)}
#dashboard .dash-hero-text{min-width:0}
#dashboard .dash-hero-aside{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalXS)}

/* ---------- Quick links (on the canvas, like the links next to a Microsoft account page title) ---------- */
#dashboard .dash-quick{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalXS);margin:0 0 var(--spacingVerticalL);margin-inline-start:calc(-1 * var(--spacingHorizontalS))}
.dash-qlink{display:inline-flex;align-items:center;gap:var(--spacingHorizontalMNudge);min-height:48px;padding-block:var(--spacingVerticalS);padding-inline:var(--spacingHorizontalS) var(--spacingHorizontalL);background:transparent;border:var(--strokeWidthThin) solid transparent;border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground1);font-size:var(--fontSizeBase300);line-height:1.4;font-weight:var(--fontWeightSemibold);text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase),box-shadow var(--durationFaster) var(--curveEasyEase)}
.dash-qlink:hover{background:var(--colorNeutralBackground1);box-shadow:var(--shadow2);color:var(--colorNeutralForeground1)}
.dash-qlink:active{background:var(--colorNeutralBackground1Pressed);box-shadow:none}
.dash-qlink-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground2Hover);color:var(--tint-brand-fg);font-size:var(--fontSizeBase300)}
/* WhatsApp keeps its own green glyph on a white disc. */
.dash-qlink-icon--wa{background:var(--colorNeutralBackground1);box-shadow:var(--shadow2)}
.dash-qlink-icon--wa .wa-icon{font-size:var(--fontSizeBase400)}
.dash-qlink-text{display:flex;flex-direction:column;min-width:0}
.dash-qlink-sub{font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground3);font-variant-numeric:tabular-nums}
.dash-qlink-sub[dir="ltr"]{text-align:end}

/* ---------- KPI tiles ---------- */
/* Columns follow the groups of 4 (admin, teacher): 4-up on desktop, 2-up below, so a row never
   ends with a lone tile. The parent's 6 tiles (counts only) sit 3-up. */
#dashboard .dash-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacingHorizontalM);margin-bottom:var(--spacingVerticalM)}
@media (min-width:1024px){#dashboard .dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
#dashboard .dash-kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 2-up: an odd last tile takes the whole row instead of leaving a hole. */
@media (max-width:1023px){#dashboard .dash-kpis:not(.dash-kpis--3) > .dash-kpi:last-child:nth-child(odd){grid-column:1 / -1}}
.dash-kpi{display:flex;align-items:center;gap:var(--spacingHorizontalM);min-width:0;padding:var(--spacingVerticalL) var(--spacingHorizontalL);background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4)}
.dash-kpi-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300)}
.dash-kpi-text{min-width:0}
.dash-kpi-label{font-size:var(--fontSizeBase200);line-height:1.4;color:var(--colorNeutralForeground3)}
.dash-kpi-value{font-size:var(--fontSizeBase600);line-height:1.3;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Small laptops / tablets in landscape: 4-up tiles are narrow, so tighten them. */
@media (min-width:1024px) and (max-width:1199px){
    #dashboard .dash-kpis:not(.dash-kpis--3) .dash-kpi{gap:var(--spacingHorizontalS);padding-inline:var(--spacingHorizontalM)}
    #dashboard .dash-kpis:not(.dash-kpis--3) .dash-kpi-value{font-size:var(--fontSizeBase500)}
}

/* ---------- Panels (one white card each; header row + list rows) ---------- */
#dashboard .dash-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--spacingVerticalM);margin-bottom:var(--spacingVerticalM)}
@media (min-width:1024px){#dashboard .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-panel{--surface-2:var(--colorSubtleBackgroundHover);display:flex;flex-direction:column;min-width:0;margin-bottom:var(--spacingVerticalM);background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4);overflow:hidden}
#dashboard .dash-grid > .dash-panel{margin-bottom:0}
.dash-panel-head{display:flex;align-items:center;gap:var(--spacingHorizontalS);min-height:52px;padding:var(--spacingVerticalS) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.dash-panel-icon{flex-shrink:0;width:20px;text-align:center;font-size:var(--fontSizeBase400);color:var(--colorBrandForeground1)}
.dash-panel-title{margin:0;min-width:0;font-size:var(--fontSizeBase400);line-height:1.4;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.dash-count{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:20px;height:20px;padding:0 var(--spacingHorizontalSNudge);border-radius:var(--borderRadiusCircular);background:var(--tint-brand-bg);color:var(--tint-brand-fg);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);font-variant-numeric:tabular-nums}
.dash-panel-action{margin-inline-start:auto;flex-shrink:0}
.dash-panel-body{flex:1;padding:var(--spacingVerticalXS) 0}

/* "See all" link at the inline end of a panel header (Fluent Link). */
.dash-link{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);min-height:var(--controlHeightSmall);padding:0 var(--spacingHorizontalXS);background:transparent;border:0;border-radius:var(--borderRadiusMedium);color:var(--colorBrandForegroundLink);font-size:var(--fontSizeBase300);white-space:nowrap;cursor:pointer}
.dash-link:hover{color:var(--colorBrandForegroundLinkHover);text-decoration:underline}
.dash-link i{font-size:var(--fontSizeBase100)}

/* List rows: a lead (time / avatar / icon), title + description, value or actions at the end. */
.dash-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingVerticalXS) var(--spacingHorizontalM);min-height:52px;padding:var(--spacingVerticalS) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.dash-row:last-child{border-bottom:0}
.dash-row--link{cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase)}
.dash-row--link:hover{background:var(--colorSubtleBackgroundHover)}
.dash-row--link:active{background:var(--colorSubtleBackgroundPressed)}
.dash-row-main{flex:1 1 180px;min-width:0}
.dash-row-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase300);line-height:1.45;font-weight:var(--fontWeightMedium);color:var(--colorNeutralForeground1)}
.dash-row-sub{font-size:var(--fontSizeBase200);line-height:1.45;color:var(--colorNeutralForeground3)}
.dash-row-sub.is-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-row-meta{font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground3)}
.dash-sep{color:var(--colorNeutralForeground4);margin:0 var(--spacingHorizontalXXS)}
.dash-row-end{display:flex;align-items:center;gap:var(--spacingHorizontalXS);flex-shrink:0;margin-inline-start:auto}
.dash-row-time{flex-shrink:0;min-width:44px;font-weight:var(--fontWeightSemibold);color:var(--colorBrandForeground1);font-variant-numeric:tabular-nums}
.dash-row-icon{flex-shrink:0;width:20px;text-align:center;font-size:var(--fontSizeBase400);color:var(--colorNeutralForeground2)}
.dash-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--borderRadiusCircular);background:var(--tint-brand-bg);color:var(--tint-brand-fg);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold)}
.dash-avatar--danger{background:var(--tint-danger-bg);color:var(--tint-danger-fg)}
.dash-amount{font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-amount--success{color:var(--tint-success-fg)}
.dash-amount--warning{color:var(--tint-warning-fg)}
.dash-amount--danger{color:var(--tint-danger-fg)}
.dash-time{font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-unread{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--spacingHorizontalSNudge);border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground);color:var(--colorNeutralForegroundOnBrand);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);font-variant-numeric:tabular-nums}
.dash-warn{color:var(--tint-danger-fg);white-space:nowrap}

/* Empty state: centred icon + one line. */
.dash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);height:100%;min-height:140px;padding:var(--spacingVerticalXXL) var(--spacingHorizontalL);text-align:center;font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground3)}
.dash-empty i{font-size:var(--fontSizeHero800);line-height:1;color:var(--colorNeutralForeground4)}

/* ---------- Progress (Fluent ProgressBar, large) ---------- */
.dash-meter{padding:var(--spacingVerticalM) var(--spacingHorizontalL) var(--spacingVerticalL)}
.dash-meter-head{display:flex;justify-content:space-between;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalS);font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3);font-variant-numeric:tabular-nums}
.dash-meter-head strong{font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.dash-progress{width:100%;height:6px;border-radius:var(--borderRadiusCircular);background:var(--colorNeutralBackground6);overflow:hidden}
.dash-progress > span{display:block;height:100%;border-radius:inherit;transition:width var(--durationSlow) var(--curveDecelerateMid)}

/* ---------- 7-day trend (column chart: brand bars with rounded tops, axis labels in Foreground3) ---------- */
.dash-trend{padding:var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalM)}
.dash-trend-plot,.dash-trend-axis{display:flex;gap:var(--spacingHorizontalS)}
.dash-trend-plot{min-height:144px;align-items:flex-end;border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke1)}
.dash-trend-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.dash-trend-val{margin-bottom:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground2);font-variant-numeric:tabular-nums}
.dash-trend-col.is-zero .dash-trend-val{font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground4)}
.dash-trend-bar{display:block;width:min(100%,40px);border-radius:var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;background:var(--colorBrandBackground);transition:background-color var(--durationFaster) var(--curveEasyEase)}
.dash-trend-col:hover .dash-trend-bar{background:var(--colorBrandBackgroundHover)}
.dash-trend-axis{margin-top:var(--spacingVerticalS)}
.dash-trend-axis span{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}
.dash-trend-axis span.is-today{font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}

/* ---------- Parent balance (featured KPI card, parentBalanceCard()) ---------- */
.dash-balance{display:flex;align-items:center;gap:var(--spacingHorizontalL);padding:var(--spacingVerticalL) var(--spacingHorizontalL);margin-bottom:var(--spacingVerticalM);background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4)}
.dash-balance-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:var(--borderRadiusLarge);background:var(--tint-brand-bg);color:var(--tint-brand-fg);font-size:var(--fontSizeBase500)}
.dash-balance.is-debt .dash-balance-icon{background:var(--tint-danger-bg);color:var(--tint-danger-fg)}
.dash-balance-text{min-width:0}
.dash-balance-label{font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground3)}
.dash-balance-amount{font-size:var(--fontSizeHero800);line-height:1.25;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums}
.dash-balance.is-debt .dash-balance-amount{color:var(--tint-danger-fg)}
.dash-balance-hint{margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}
.dash-balance-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingHorizontalS);margin-inline-start:auto}

/* ---------- Phones ---------- */
@media (max-width:640px){
    #dashboard .dash-hero{margin-bottom:var(--spacingVerticalL)}
    /* Quick links become a 3-up launcher grid: icon above the label. */
    #dashboard .dash-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacingHorizontalXS);margin-inline:0}
    #dashboard .dash-quick--4{grid-template-columns:repeat(4,minmax(0,1fr))}
    #dashboard .dash-quick .dash-qlink{flex-direction:column;justify-content:flex-start;gap:var(--spacingVerticalXS);min-height:76px;padding:var(--spacingVerticalS) var(--spacingHorizontalXS);text-align:center;font-size:var(--fontSizeBase200)}
    #dashboard .dash-quick .dash-qlink-icon{width:40px;height:40px;font-size:var(--fontSizeBase400)}
    #dashboard .dash-hero-aside{width:100%}
    #dashboard .dash-kpis,#dashboard .dash-kpis--3{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* Tiles: icon + label on one line, the number under them. An odd last tile spans the row. */
    .dash-kpi{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--spacingVerticalS) var(--spacingHorizontalS);padding:var(--spacingVerticalM) var(--spacingHorizontalM)}
    .dash-kpi-text{display:contents}
    .dash-kpi-value{grid-column:1 / -1;font-size:var(--fontSizeBase500)}
    .dash-balance{flex-wrap:wrap}
    .dash-balance-actions{margin-inline-start:0;width:100%}
    .dash-panel-head{padding-inline:var(--spacingHorizontalM)}
    .dash-row{padding-inline:var(--spacingHorizontalM)}
    .dash-meter,.dash-trend{padding-inline:var(--spacingHorizontalM)}
    .dash-trend-plot,.dash-trend-axis{gap:var(--spacingHorizontalXS)}
    .dash-balance{padding:var(--spacingVerticalL) var(--spacingHorizontalL)}
    .dash-balance-amount{font-size:var(--fontSizeHero700)}
}

/* ---------- Money self-check warning (selfCheckBannerHtml) ---------- */
#dashboard .dash-selfcheck{margin-bottom:var(--spacingVerticalL)}
#dashboard .dash-selfcheck details{margin-top:var(--spacingVerticalXS)}
#dashboard .dash-selfcheck summary{cursor:pointer;font-weight:var(--fontWeightSemibold)}
#dashboard .dash-selfcheck ul{margin:var(--spacingVerticalXS) 0 0;padding-inline-start:var(--spacingHorizontalL);overflow-wrap:anywhere}

/* Touch screens: «التفاصيل» / «كل الحصص» links get a full tap area (UX_PLAN 5). */
@media (pointer:coarse){.dash-link{min-height:var(--touchTarget);display:inline-flex;align-items:center;padding-inline:var(--spacingHorizontalS)}}

/* UX pass: conversation rows are buttons ending in «فتح المحادثة» (UX_PLAN 2.4). */
button.dash-row{width:100%;border-width:0 0 var(--strokeWidthThin);border-style:solid;border-color:var(--colorNeutralStroke2);background:transparent;color:inherit;font:inherit;text-align:start}
button.dash-row .dash-row-main{display:block}
button.dash-row .dash-row-title,button.dash-row .dash-row-sub{display:block}
button.dash-row .dash-row-end{flex-direction:column;align-items:flex-end;gap:var(--spacingVerticalXXS)}
.dash-open{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);font-size:var(--fontSizeBase200);color:var(--colorBrandForegroundLink);white-space:nowrap}
.dash-open i{font-size:var(--fontSizeBase100)}

/* UX pass: the three main actions of a parent or teacher, as big labelled buttons (app.js#dashBigActions). */
.dash-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacingHorizontalM);margin-bottom:var(--spacingVerticalL)}
.dash-big-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS);min-height:104px;padding:var(--spacingVerticalM) var(--spacingHorizontalS);border:0;border-radius:var(--borderRadiusLarge);background:var(--colorNeutralBackground1);box-shadow:var(--shadow4);color:var(--colorNeutralForeground1);font:inherit;text-align:center;cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase),box-shadow var(--durationFaster) var(--curveEasyEase)}
.dash-big-btn:hover{background:var(--colorNeutralBackground1Hover);box-shadow:var(--shadow8)}
.dash-big-btn:active{background:var(--colorNeutralBackground1Pressed)}
.dash-big-btn > i{font-size:var(--fontSizeBase600);color:var(--colorBrandForeground1)}
.dash-big-label{font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);font-weight:var(--fontWeightSemibold)}
.dash-big-sub{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2)}
.dash-big-btn--warn > i,.dash-big-btn--warn .dash-big-sub{color:var(--tint-warning-fg)}
@media(max-width:640px){.dash-big{gap:var(--spacingHorizontalS)} .dash-big-btn{min-height:96px;padding-inline:var(--spacingHorizontalXS)} .dash-big-label{font-size:var(--fontSizeBase300)}}

/* UX pass: the admin's day-one checklist «ابدأ من هنا» (app.js#adminSetupChecklistHtml). */
.dash-setup{margin-bottom:var(--spacingVerticalL);padding:var(--spacingVerticalL) var(--spacingHorizontalL);border-radius:var(--borderRadiusLarge);background:var(--colorNeutralBackground1);box-shadow:var(--shadow4)}
.dash-setup-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin:0 0 var(--spacingVerticalM);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);font-weight:var(--fontWeightSemibold)}
.dash-setup-title > i{color:var(--colorBrandForeground1)}
.dash-setup-count{margin-inline-start:auto;font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2)}
.dash-setup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dash-setup-step{display:flex;align-items:center;gap:var(--spacingHorizontalM);padding:var(--spacingVerticalS) 0;border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.dash-setup-step:first-child{border-top:0}
.dash-setup-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground2);color:var(--colorBrandForeground2);font-weight:var(--fontWeightSemibold)}
.dash-setup-step.is-done .dash-setup-mark{background:var(--tint-success-bg);color:var(--tint-success-fg)}
.dash-setup-text{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-setup-label{font-weight:var(--fontWeightSemibold)}
.dash-setup-step.is-done .dash-setup-label{color:var(--colorNeutralForeground2)}
.dash-setup-hint{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.dash-setup-foot{margin:var(--spacingVerticalS) 0 0;font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}


/* The family's options with their helper lines (PM 8): a grid of tiles, each name over its line; on phones one per
   row, icon at the start, so the line has room. */
#dashboard .dash-quick:has(.dash-qlink--help){display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-inline:0}
.dash-qlink--help{align-items:flex-start;text-align:start}
.dash-qlink--help .dash-qlink-sub{white-space:normal;line-height:var(--lineHeightBase200);overflow-wrap:anywhere}
@media (max-width:640px){
    #dashboard .dash-quick:has(.dash-qlink--help){grid-template-columns:1fr}
    #dashboard .dash-quick .dash-qlink--help{flex-direction:row;align-items:center;justify-content:flex-start;text-align:start;min-height:var(--touchTarget);padding:var(--spacingVerticalS) var(--spacingHorizontalS);font-size:var(--fontSizeBase300)}
    #dashboard .dash-quick .dash-qlink--help .dash-qlink-icon{width:36px;height:36px;font-size:var(--fontSizeBase300)}
}