/* My Maktab livelier dashboards (Spec E, U6). Loaded with modern.css. Six accent colours
   (text-safe on their soft backgrounds, WCAG AA), light and dark; status chip colours;
   KPI tiles, charts, feed and motion (reduce-motion aware). Our own design. */
:root, [data-theme="light"] {
  --mm-c1: #0f7a52; --mm-c1-soft: #e3f4ec; --mm-c2: #1d5fd1; --mm-c2-soft: #e6eefc; --mm-c3: #7a3fc4; --mm-c3-soft: #f1e9fb;
  --mm-c4: #a35a00; --mm-c4-soft: #fdf0dc; --mm-c5: #b42318; --mm-c5-soft: #fdeceb; --mm-c6: #4b5563; --mm-c6-soft: #eef0f3;
  --mm-s-active: #0b6b45; --mm-s-active-bg: #dff5ea; --mm-s-paused: #8a5a00; --mm-s-paused-bg: #fff2d6; --mm-s-suspended: #a8460b; --mm-s-suspended-bg: #ffe8d9;
  --mm-s-cancelled: #a1271b; --mm-s-cancelled-bg: #fde7e5; --mm-s-archived: #4b5563; --mm-s-archived-bg: #eceff2; --mm-trial: #5b34a8; --mm-trial-bg: #efe8fb;
  --mm-hero: linear-gradient(120deg, #dff3ea 0%, #e3ecfb 50%, #f1e7fa 100%); --mm-hero-cut: #e6ecf9;
}
[data-theme="dark"] {
  --mm-c1: #4fd69c; --mm-c1-soft: #12352a; --mm-c2: #7fa8ff; --mm-c2-soft: #17264a; --mm-c3: #c39bff; --mm-c3-soft: #2c1d47;
  --mm-c4: #f2b552; --mm-c4-soft: #3a2a10; --mm-c5: #ff8f85; --mm-c5-soft: #401b18; --mm-c6: #b4bdc9; --mm-c6-soft: #252b33;
  --mm-s-active: #7ce3b4; --mm-s-active-bg: #12352a; --mm-s-paused: #ffd27a; --mm-s-paused-bg: #3a2e10; --mm-s-suspended: #ffb07a; --mm-s-suspended-bg: #3d2312;
  --mm-s-cancelled: #ff9a91; --mm-s-cancelled-bg: #401b18; --mm-s-archived: #c2c9d3; --mm-s-archived-bg: #262c33; --mm-trial: #cdb2ff; --mm-trial-bg: #2c1d47;
  --mm-hero: linear-gradient(120deg, #12291f 0%, #152238 50%, #251a33 100%); --mm-hero-cut: #16233a;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --mm-c1: #4fd69c; --mm-c1-soft: #12352a; --mm-c2: #7fa8ff; --mm-c2-soft: #17264a; --mm-c3: #c39bff; --mm-c3-soft: #2c1d47;
    --mm-c4: #f2b552; --mm-c4-soft: #3a2a10; --mm-c5: #ff8f85; --mm-c5-soft: #401b18; --mm-c6: #b4bdc9; --mm-c6-soft: #252b33;
    --mm-s-active: #7ce3b4; --mm-s-active-bg: #12352a; --mm-s-paused: #ffd27a; --mm-s-paused-bg: #3a2e10; --mm-s-suspended: #ffb07a; --mm-s-suspended-bg: #3d2312;
    --mm-s-cancelled: #ff9a91; --mm-s-cancelled-bg: #401b18; --mm-s-archived: #c2c9d3; --mm-s-archived-bg: #262c33; --mm-trial: #cdb2ff; --mm-trial-bg: #2c1d47;
    --mm-hero: linear-gradient(120deg, #12291f 0%, #152238 50%, #251a33 100%); --mm-hero-cut: #16233a;
  }
}
.c1, .mm-c1 { --tone: var(--mm-c1); --tone-soft: var(--mm-c1-soft); } .c2, .mm-c2 { --tone: var(--mm-c2); --tone-soft: var(--mm-c2-soft); }
.c3, .mm-c3 { --tone: var(--mm-c3); --tone-soft: var(--mm-c3-soft); } .c4, .mm-c4 { --tone: var(--mm-c4); --tone-soft: var(--mm-c4-soft); }
.c5, .mm-c5 { --tone: var(--mm-c5); --tone-soft: var(--mm-c5-soft); } .c6, .mm-c6 { --tone: var(--mm-c6); --tone-soft: var(--mm-c6-soft); }
.mm-s-active { --tone: var(--mm-s-active); } .mm-s-paused { --tone: var(--mm-s-paused); } .mm-s-suspended { --tone: var(--mm-s-suspended); }
.mm-s-cancelled { --tone: var(--mm-s-cancelled); } .mm-s-archived { --tone: var(--mm-s-archived); }

/* Greeting banner */
.mm-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden;
  padding: 1.6rem 1.8rem; margin-bottom: 1.1rem; border-radius: calc(var(--mm-radius) + 4px); background: var(--mm-hero); border: 1px solid var(--mm-line); }
.mm-hero h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 780; margin: .15rem 0 .25rem; letter-spacing: -.015em; }
.mm-hero p { margin: 0 0 .2rem; color: var(--mm-ink-muted); }
.mm-hero .mm-hero-date { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--mm-ink); }
.mm-hero-hint a { color: var(--mm-accent-strong); font-weight: 650; }
.mm-hero-art { width: min(240px, 34vw); height: auto; flex-shrink: 0; }
.mm-art-sun { fill: var(--mm-c4); opacity: .9; } .mm-art-sun-cut { fill: var(--mm-hero-cut); }
.mm-art-star { fill: var(--mm-c3); opacity: .8; }
.mm-art-hill2 { fill: var(--mm-c2); opacity: .18; } .mm-art-hill { fill: var(--mm-c1); opacity: .28; }
.mm-art-book path { fill: var(--mm-surface); stroke: var(--mm-c1); stroke-width: 2.5; stroke-linejoin: round; }
.mm-art-book .mm-art-line { fill: none; stroke: var(--mm-c1); stroke-width: 2; stroke-linecap: round; opacity: .55; }
@media (max-width: 640px) { .mm-hero-art { display: none; } }

/* Per-device preview switch */
.mm-dash-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 1rem; padding: .5rem .9rem; border-radius: var(--mm-radius-sm);
  background: var(--mm-accent-soft); color: var(--mm-accent-strong); font-weight: 600; font-size: .92rem; }
body.mm-modern main form.mm-dash-switch { border: 0; box-shadow: none; background: var(--mm-accent-soft); padding: .5rem .9rem; }
body.mm-modern main .mm-dash-switch button { margin: 0; padding: .2rem .8rem; font-size: .88rem; }

/* Quick actions as coloured tiles */
.mm-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .75rem; margin: 0 0 1.4rem; }
.mm-quick-tile { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--mm-radius); text-decoration: none; font-weight: 700;
  color: var(--mm-ink); background: var(--mm-surface); border: 1px solid var(--mm-line); border-left: 4px solid var(--tone); box-shadow: var(--mm-shadow);
  transition: transform .15s ease, box-shadow .15s ease; }
.mm-quick-tile:hover { color: var(--mm-ink); transform: translateY(-2px); box-shadow: var(--mm-shadow-lift); }

/* KPI tiles */
.mm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.mm-kpi { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem 1rem; overflow: hidden;
  background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow);
  transition: transform .15s ease, box-shadow .15s ease; }
.mm-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.mm-kpi:hover { transform: translateY(-2px); box-shadow: var(--mm-shadow-lift); }
.mm-kpi-top { display: flex; align-items: center; gap: .6rem; }
.mm-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--tone-soft); color: var(--tone); }
.mm-kpi-label { color: var(--mm-ink-muted); font-weight: 680; font-size: .88rem; }
.mm-kpi-value { font-size: 2.2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mm-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 28px; }
.mm-kpi small { color: var(--mm-ink-muted); }
.mm-kpi a { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-weight: 680; font-size: .88rem; text-decoration: none; color: var(--tone); }
.mm-kpi a:hover { text-decoration: underline; }
.mm-trend { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 700; padding: .1rem .5rem; border-radius: var(--mm-radius-pill); }
.mm-up { background: var(--mm-s-active-bg); color: var(--mm-s-active); } .mm-down { background: var(--mm-s-suspended-bg); color: var(--mm-s-suspended); }
.mm-flat { background: var(--mm-s-archived-bg); color: var(--mm-s-archived); }
.mm-spark { flex-shrink: 0; } .mm-spark polyline { fill: none; stroke: var(--tone, var(--mm-accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Charts */
.mm-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.mm-chart-grid > .content-card { margin-bottom: 0; }
@media (min-width: 1100px) { .mm-span-2 { grid-column: span 2; } }
.mm-chart { margin: 0; }
.mm-chart-donut, .mm-chart-ring { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.mm-chart-donut svg, .mm-chart-ring svg { width: 150px; height: 150px; flex-shrink: 0; }
.mm-chart-donut .mm-chart-table, .mm-chart-ring .mm-chart-table { flex-basis: 100%; }
.mm-track { fill: none; stroke: var(--mm-surface-2); stroke-width: 14; }
.mm-chart .mm-seg { fill: none; stroke: var(--tone); stroke-width: 14; }
.mm-chart-ring .mm-track, .mm-chart-ring .mm-seg { stroke-width: 12; }
.mm-chart-ring .mm-ring-value { stroke: var(--mm-c2); stroke-linecap: round; }
.mm-chart-ring.mm-good .mm-ring-value { stroke: var(--mm-c1); } .mm-chart-ring.mm-low .mm-ring-value { stroke: var(--mm-c4); }
.mm-chart-ring figcaption { color: var(--mm-ink-muted); max-width: 26ch; }
.mm-centre { fill: var(--mm-ink); font-size: 1.5rem; font-weight: 800; text-anchor: middle; }
.mm-centre-sub { fill: var(--mm-ink-muted); font-size: .875rem; font-weight: 600; text-anchor: middle; }
.mm-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; }
.mm-legend li { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-legend li:last-child { border-bottom: 0; }
.mm-legend strong { margin-left: auto; }
.mm-legend a { color: var(--mm-ink); font-weight: 600; text-decoration: none; } .mm-legend a:hover { color: var(--mm-accent-strong); text-decoration: underline; }
.mm-legend-row { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; } .mm-legend-row li { border: 0; padding: 0; }
.mm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }
.mm-chart-bars ul { list-style: none; margin: 0; padding: 0; }
.mm-chart-bars li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 2.5rem; align-items: center; gap: .6rem; padding: .32rem 0; }
.mm-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mm-bar-track { height: 12px; border-radius: var(--mm-radius-pill); background: var(--mm-surface-2); overflow: hidden; }
.mm-bar { display: block; height: 100%; width: var(--w); border-radius: var(--mm-radius-pill); background: var(--tone); transform-origin: left; animation: mm-grow .7s ease both; }
.mm-chart-bars strong { text-align: right; font-variant-numeric: tabular-nums; }
.mm-chart-line svg { width: 100%; height: 200px; display: block; }
.mm-grid { stroke: var(--mm-line); stroke-width: 1; }
.mm-axis { fill: var(--mm-ink-muted); font-size: .875rem; }
.mm-chart .mm-line { fill: none; stroke: var(--tone); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mm-chart .mm-area { fill: var(--tone); opacity: .1; stroke: none; }
.mm-chart .mm-point { fill: var(--mm-surface); stroke: var(--tone); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
body.mm-modern main details.mm-chart-table { margin-top: .6rem; padding: .3rem .7rem; font-size: .88rem; }
.mm-chart-table summary { color: var(--mm-ink-muted); }

/* Activity feed */
.mm-feed { list-style: none; margin: 0; padding: 0; }
.mm-feed li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-feed li:last-child { border-bottom: 0; }
.mm-feed-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tone-soft); color: var(--tone); flex-shrink: 0; }
.mm-feed a { color: var(--mm-ink); font-weight: 600; text-decoration: none; } .mm-feed a:hover { color: var(--mm-accent-strong); text-decoration: underline; }

/* Status chips, trial badge, pills and avatars */
body.mm-modern .mm-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .7rem; border-radius: var(--mm-radius-pill); font-size: .875rem; font-weight: 750; }
body.mm-modern .mm-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.mm-modern .mm-chip.mm-s-active { background: var(--mm-s-active-bg); color: var(--mm-s-active); }
body.mm-modern .mm-chip.mm-s-paused { background: var(--mm-s-paused-bg); color: var(--mm-s-paused); }
body.mm-modern .mm-chip.mm-s-suspended { background: var(--mm-s-suspended-bg); color: var(--mm-s-suspended); }
body.mm-modern .mm-chip.mm-s-cancelled { background: var(--mm-s-cancelled-bg); color: var(--mm-s-cancelled); }
body.mm-modern .mm-chip.mm-s-archived { background: var(--mm-s-archived-bg); color: var(--mm-s-archived); }
body.mm-modern .mm-chip.mm-trial { background: var(--mm-trial-bg); color: var(--mm-trial); }
.mm-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mm-pill { display: inline-block; padding: .08rem .55rem; margin: .1rem .15rem .1rem 0; border-radius: var(--mm-radius-pill); font-size: .875rem; font-weight: 700;
  background: var(--mm-accent-soft); color: var(--mm-accent-strong); }
.mm-pill-soft { background: var(--mm-surface-2); color: var(--mm-ink-muted); border: 1px solid var(--mm-line); }
.mm-initial { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: .6rem; border-radius: 12px; flex-shrink: 0;
  font-weight: 800; font-size: .9rem; vertical-align: middle; float: left; }
.mm-a1 { background: var(--mm-c1-soft); color: var(--mm-c1); } .mm-a2 { background: var(--mm-c2-soft); color: var(--mm-c2); } .mm-a3 { background: var(--mm-c3-soft); color: var(--mm-c3); }
.mm-a4 { background: var(--mm-c4-soft); color: var(--mm-c4); } .mm-a5 { background: var(--mm-c5-soft); color: var(--mm-c5); } .mm-a6 { background: var(--mm-c6-soft); color: var(--mm-c6); }
.mm-customer-list { display: flex; flex-direction: column; }
.mm-customer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-customer:last-child { border-bottom: 0; }
.mm-customer .mm-initial { float: none; margin: 0; }
.mm-customer-main small { display: block; color: var(--mm-ink-muted); }
.mm-customer-meta { display: flex; flex-direction: column; color: var(--mm-ink-muted); font-size: .875rem; text-align: right; }
.mm-customer-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; }
@media (max-width: 760px) { .mm-customer { grid-template-columns: auto minmax(0, 1fr); } .mm-customer-meta, .mm-customer-actions { grid-column: 2; text-align: left; justify-content: flex-start; } }

/* Open school (Business side) */
.mm-open-school { display: inline-flex; align-items: center; gap: .35rem; }
.mm-open-none { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: var(--mm-radius-pill, 999px); border: 0; background: var(--mm-surface-2, #eef2f0); color: var(--ink-muted); font-size: .875rem; font-weight: 650; cursor: help; white-space: nowrap; }
.mm-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mm-module-open { margin-top: .4rem; }
.mm-places a[aria-current="true"] { background: var(--mm-accent-soft); color: var(--mm-accent-strong); font-weight: 700; }
.mm-places .mm-icon { color: var(--mm-accent); }

/* Motion: tiles fade up; bars grow. Off with "reduce motion". */
.mm-rise { animation: mm-rise .45s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes mm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mm-rise, .mm-bar { animation: none !important; } .mm-kpi:hover, .mm-quick-tile:hover { transform: none; } }