/* ══════════════════════════════════════════════════════════════
   dashboard.css — post-login "control room" home (#dashboard-root)
   Dark, on-brand (ثمانية green) landing view. Scoped under
   #dashboard-root so it never leaks into the editor or print doc.
   ══════════════════════════════════════════════════════════════ */

/* ── view switching (shell owns #ro-editor-root + #dashboard-root) ── */
#app-shell[data-view="dashboard"] #ro-editor-root { display: none !important; }
#app-shell[data-view="editor"]    #dashboard-root { display: none !important; }
/* editor-only toolbar controls are irrelevant on the dashboard */
#app-shell[data-view="dashboard"] #ro-select,
#app-shell[data-view="dashboard"] #btn-ro-save,
#app-shell[data-view="dashboard"] #btn-ro-saveas,
#app-shell[data-view="dashboard"] #btn-ro-delete,
#app-shell[data-view="dashboard"] #btn-ro-print,
#app-shell[data-view="dashboard"] #autosave-status,
#app-shell[data-view="dashboard"] #btn-home { display: none !important; }
/* «home» only makes sense once you've left home */
#btn-home { display: none; }
#app-shell[data-view="editor"] #btn-home { display: inline-flex; }

/* ── palette (scoped) ── */
#dashboard-root.dash-root {
  --d-bg:        #0E1012;
  --d-card:      #15181C;
  --d-card2:     #1B1F24;
  --d-raise:     #22272D;
  --d-line:      rgba(255,255,255,0.08);
  --d-line2:     rgba(255,255,255,0.14);
  --d-ink:       #ECEEF0;
  --d-ink2:      #AEB4BB;
  --d-ink3:      #767D85;
  --d-green:     #2BD46A;
  --d-green-d:   #1FB257;
  --d-green-ink: #05140B;
  --d-green-soft:rgba(43,212,106,0.12);
  --d-amber:     #F0B23B;
  --d-amber-soft:rgba(240,178,59,0.13);
  --d-orange:    #F2944D;
  --d-orange-soft:rgba(242,148,77,0.13);
  --d-red:       #F2685B;
  --d-red-soft:  rgba(242,104,91,0.13);
  --d-r:         13px;
  --d-r-sm:      9px;
  --d-pill:      999px;

  color: var(--d-ink);
  font-family: var(--font-sans);
  display: block;
  min-height: calc(100vh - 60px);
  padding: 22px clamp(14px, 3vw, 40px) 60px;
  -webkit-font-smoothing: antialiased;
}

.dash-wrap { max-width: 1180px; margin: 0 auto; }

/* ── hero ── */
.dash-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.dash-greet { font-size: 27px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.dash-greet b { color: var(--d-green); font-weight: 800; }
.dash-date { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--d-ink3); }
.dash-clock { color: var(--d-ink2); font-variant-numeric: tabular-nums; }
.dash-tz {
  margin-inline-start: 5px; color: var(--d-ink3); font-size: 10px; font-weight: 600;
  opacity: .75; vertical-align: middle;
}

.dash-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border: 0; cursor: pointer;
  border-radius: var(--d-pill);
  background: linear-gradient(180deg, var(--d-green), var(--d-green-d));
  color: var(--d-green-ink); font-family: var(--font-sans);
  font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 20px rgba(43,212,106,0.30); transition: transform .12s, box-shadow .12s, filter .12s;
}
.dash-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(43,212,106,0.40); filter: brightness(1.04); }
.dash-cta:active { transform: translateY(0); }
.dash-cta-plus { font-size: 19px; font-weight: 700; line-height: 0; margin-bottom: 2px; }

/* ── priority strip (awaiting MY approval) ── */
.dash-priority {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 18px; margin-bottom: 16px; cursor: pointer;
  border: 1px solid var(--d-amber); border-radius: var(--d-r);
  background: linear-gradient(90deg, var(--d-amber-soft), rgba(240,178,59,0.04));
  color: var(--d-ink); font-family: var(--font-sans); text-align: start;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.dash-priority:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.dash-priority.is-active { box-shadow: 0 0 0 2px var(--d-amber) inset; }
.dpr-ic {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--d-pill); background: var(--d-amber); color: #2a1c00; font-size: 15px;
}
.dpr-text { font-size: 14px; font-weight: 700; }
.dpr-text b { color: var(--d-amber); font-size: 15px; }
.dpr-go { margin-inline-start: auto; font-size: 13px; font-weight: 800; color: var(--d-amber); white-space: nowrap; }

/* ── stat filter chips ── */
.dash-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dstat {
  flex: 1 1 120px; min-width: 110px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 12px 15px; cursor: pointer; text-align: start;
  border: 1px solid var(--d-line); border-radius: var(--d-r);
  background: var(--d-card); color: var(--d-ink); font-family: var(--font-sans);
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
}
.dstat:hover { transform: translateY(-2px); border-color: var(--d-line2); box-shadow: 0 8px 20px rgba(0,0,0,0.32); }
.dstat-n { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dstat-l { font-size: 12px; font-weight: 700; color: var(--d-ink3); }
.dstat.is-active { border-color: var(--d-green); background: var(--d-green-soft); }
.dstat.is-active .dstat-n { color: var(--d-green); }
.dstat.is-active .dstat-l { color: var(--d-ink2); }
/* per-chip accent on the number */
.dstat.f-upcoming .dstat-n { color: #6FD0F2; }
.dstat.f-review .dstat-n   { color: var(--d-amber); }
.dstat.f-approved .dstat-n { color: var(--d-green); }
.dstat.f-rejected .dstat-n { color: var(--d-red); }
.dstat.f-all.is-active .dstat-n,
.dstat.f-upcoming.is-active .dstat-n,
.dstat.f-review.is-active .dstat-n,
.dstat.f-approved.is-active .dstat-n,
.dstat.f-rejected.is-active .dstat-n { filter: brightness(1.06); }

/* ── main grid ── */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-panel {
  position: relative; background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--d-r); overflow: hidden;
}
.dash-panel::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--d-green) 18%, var(--d-green) 82%, transparent);
  opacity: .5;
}
.dash-phead {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--d-line);
}
.dash-ptitle { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.dash-unread {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--d-pill); background: var(--d-red); color: #fff; font-size: 11px; font-weight: 800;
}
.dash-morelink {
  margin-inline-start: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--d-green); font-family: var(--font-sans); font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.dash-morelink:hover { text-decoration: underline; }

.dash-search-box {
  display: flex; align-items: center; gap: 7px; flex: 1 1 auto; max-width: 320px;
  padding: 7px 11px; border: 1px solid var(--d-line2); border-radius: var(--d-pill); background: var(--d-bg);
}
.dsb-ic { font-size: 12px; opacity: .7; }
.dash-search-inp {
  flex: 1 1 auto; min-width: 60px; border: 0; outline: 0; background: transparent;
  color: var(--d-ink); font-family: var(--font-sans); font-size: 13px; font-weight: 600;
}
.dash-search-inp::placeholder { color: var(--d-ink3); }

/* ── records list ── */
.dash-reclist { max-height: 60vh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.drec {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px 11px 11px; cursor: pointer; text-align: start;
  border: 1px solid var(--d-line); border-radius: var(--d-r-sm);
  background: var(--d-card2); color: var(--d-ink); font-family: var(--font-sans);
  transition: transform .1s, border-color .12s, background .12s;
  overflow: hidden;
}
.drec:hover { transform: translateX(-3px); border-color: var(--d-line2); background: var(--d-raise); }
.drec-rail { flex: none; width: 4px; align-self: stretch; border-radius: 3px; background: var(--d-ink3); }
.drec-rail.st-ok { background: var(--d-green); }
.drec-rail.st-rev { background: var(--d-amber); }
.drec-rail.st-rev2 { background: var(--d-orange); }
.drec-rail.st-rej { background: var(--d-red); }
.drec-rail.st-draft { background: var(--d-ink3); }
.drec-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drec-title { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drec-sub { font-size: 11.5px; font-weight: 600; color: var(--d-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drec-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.drec-when {
  font-size: 11.5px; font-weight: 800; color: var(--d-ink2); white-space: nowrap;
  padding: 2px 8px; border-radius: var(--d-pill); background: rgba(255,255,255,0.05);
}
.drec-when.is-soon { color: var(--d-green); background: var(--d-green-soft); }
.drec-status {
  font-size: 10.5px; font-weight: 800; white-space: nowrap; padding: 2px 9px; border-radius: var(--d-pill);
  border: 1px solid transparent;
}
.drec-status.st-ok   { color: var(--d-green); border-color: rgba(43,212,106,0.45); background: var(--d-green-soft); }
.drec-status.st-rev  { color: var(--d-amber); border-color: rgba(240,178,59,0.45); background: var(--d-amber-soft); }
.drec-status.st-rev2 { color: var(--d-orange); border-color: rgba(242,148,77,0.45); background: var(--d-orange-soft); }
.drec-status.st-rej  { color: var(--d-red); border-color: rgba(242,104,91,0.45); background: var(--d-red-soft); }
.drec-status.st-draft{ color: var(--d-ink2); border-color: var(--d-line2); background: rgba(255,255,255,0.05); }
.drec-go { flex: none; font-size: 17px; font-weight: 700; color: var(--d-ink3); opacity: 0; transition: opacity .12s, transform .12s; }
.drec:hover .drec-go { opacity: 1; transform: translateX(-2px); }

/* new-record dashed card */
.drec-new {
  justify-content: center; gap: 8px; border-style: dashed; border-color: var(--d-line2);
  background: transparent; color: var(--d-green); font-weight: 800; font-size: 13.5px; padding: 13px;
}
.drec-new:hover { background: var(--d-green-soft); border-color: var(--d-green); transform: none; }
.drn-plus { font-size: 17px; line-height: 0; }
.drn-t { flex: 0 0 auto; }
.drn-go { margin-inline-start: 4px; opacity: .6; }

/* ── notifications feed ── */
.dash-notiflist { max-height: 60vh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.dnotif {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 11px 11px 12px; border: 1px solid var(--d-line); border-radius: var(--d-r-sm);
  background: var(--d-card2); transition: border-color .12s, background .12s;
}
.dnotif.is-unread { border-color: rgba(43,212,106,0.30); background: linear-gradient(90deg, var(--d-green-soft), transparent 70%); }
.dnotif.is-unread::before {
  content: ""; position: absolute; inset-inline-start: -1px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: var(--d-green);
}
.dnotif-ic {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; margin-top: 1px;
  border-radius: var(--d-pill); font-size: 13px; font-weight: 800;
  background: rgba(255,255,255,0.06); color: var(--d-ink2);
}
.dnotif-ic.nt-ok { background: var(--d-green-soft); color: var(--d-green); }
.dnotif-ic.nt-rej { background: var(--d-red-soft); color: var(--d-red); }
.dnotif-ic.nt-await { background: var(--d-amber-soft); color: var(--d-amber); }
.dnotif-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  border: 0; background: transparent; cursor: pointer; text-align: start; color: var(--d-ink); font-family: var(--font-sans); padding: 0;
}
.dnotif-title { font-size: 13px; font-weight: 700; line-height: 1.4; }
.dnotif-main:hover .dnotif-title { color: var(--d-green); }
.dnotif-sub { font-size: 11px; font-weight: 600; color: var(--d-ink3); }
.dnotif-note { font-size: 11.5px; font-weight: 600; color: var(--d-ink2); margin-top: 2px; }
.dnotif-x {
  flex: none; width: 22px; height: 22px; border: 0; cursor: pointer; border-radius: var(--d-pill);
  background: transparent; color: var(--d-ink3); font-size: 16px; line-height: 1; transition: background .12s, color .12s;
}
.dnotif-x:hover { background: var(--d-red-soft); color: var(--d-red); }

/* ── empty states ── */
.dash-empty { padding: 30px 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--d-ink3); }
.dash-empty-quiet { color: var(--d-ink3); opacity: .8; }

/* scrollbars (webkit) */
.dash-reclist::-webkit-scrollbar, .dash-notiflist::-webkit-scrollbar { width: 8px; }
.dash-reclist::-webkit-scrollbar-thumb, .dash-notiflist::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 8px; }

/* ── responsive ── */
@media (max-width: 880px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-greet { font-size: 22px; }
  .dash-cta { width: 100%; justify-content: center; }
  .dash-hero { gap: 12px; }
  .dash-reclist, .dash-notiflist { max-height: none; }
  .dash-phead { flex-wrap: wrap; }
  .dash-search-box { max-width: none; order: 3; flex-basis: 100%; }
}