/* ── billing/css/styles.css ────────────────────────────────────────────────
   Firm-wide billing dashboard. Builds on shared tokens (../shared/cc-shared.css)
   and follows the dataset_family / dashboard header + card conventions so it
   feels native to the rest of AIro.
─────────────────────────────────────────────────────────────────────────── */

:root{
  --navy:#1A2744;--navy-mid:#243358;--navy-light:#EEF1F8;--green-bright:#22C55E;
  --gold:#C9A84C;--gold-dark:#8B6914;--gold-light:#FDF6E3;
  --slate:#5A6A8A;--slate-light:#F4F6FB;--border:#DDE3EE;
  --white:#FFFFFF;--red:#C0392B;--red-light:#FDECEA;
  --green:#1E7C45;--green-light:#E8F5ED;--green-dark:#155C33;
  --amber:#B7700A;--amber-light:#FEF3E2;
  --blue:#2563EB;--blue-light:#EFF6FF;
  --purple:#5B21B6;--purple-light:#EDE9FE;
  --font-heading:'DM Serif Display',serif;--font-body:'DM Sans',sans-serif;
  --radius:10px;--shadow:0 2px 12px rgba(26,39,68,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--white);color:var(--navy);min-height:100vh;display:flex;flex-direction:column}

/* HEADER (matches editors) */
.app-header{background:var(--navy);position:sticky;top:0;z-index:100;flex-shrink:0}
.hdr-top{padding:0 1.5rem;height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-heading);font-size:1.1rem}
.anchor-badge{font-size:1.2rem}
.logo-badge{background:var(--gold);color:var(--navy);font-family:var(--font-body);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;padding:5px 12px;border-radius:6px;font-family:var(--font-body);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}
.hdr-btn:hover{background:rgba(255,255,255,.15)}
.hdr-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

/* TABS (matches editors) */
.tabs{display:flex;border-bottom:1px solid var(--border);background:lightgoldenrodyellow;flex-shrink:0;overflow-x:auto}
.tab-btn{padding:0 1.2rem;height:50px;font-family:var(--font-body);font-size:.75rem;font-weight:600;color:var(--navy);background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:all .2s;white-space:nowrap}
.tab-btn:hover{opacity:.7}.tab-btn.active{border-bottom-color:var(--gold)}

/* MODE TOGGLE (Unbilled / Billed) */
#billModeTabs{background:var(--navy)}
.mode-btn{padding:0 1.4rem;height:46px;font-family:var(--font-body);font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;letter-spacing:.04em;transition:all .2s;white-space:nowrap}
.mode-btn:hover{color:#fff}
.mode-btn.active{color:#fff;border-bottom-color:var(--gold)}

/* BILLED — period cards */
.bill-billed-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.85rem;margin-bottom:1.25rem}
.bill-billed-card{display:flex;flex-direction:column;gap:5px;padding:1rem;border:1.5px solid var(--border);border-left-width:4px;border-left-color:var(--green-bright,#22C55E);border-radius:10px;background:var(--white)}
.bill-billed-period{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
.bill-billed-amt{font-size:1.4rem;font-weight:700;line-height:1;color:var(--navy)}
.bill-billed-sub{font-size:.74rem;color:var(--slate)}
.bill-billed-hrs{font-size:.68rem;color:var(--slate);font-weight:400}
.bill-billed-card.total{border-left-color:var(--navy);background:var(--navy-light,#EEF1F8)}
.bill-billed-card.total .bill-billed-amt{color:var(--navy)}
.bill-table tbody td.bill-amt.total,.bill-table thead th.num:last-child{font-weight:700}
.bill-table tbody td.bill-amt.total{background:var(--navy-light,#EEF1F8)}

/* BODY */
.app-main{flex:1;overflow-y:auto;background:var(--slate-light)}
.bill-area{padding:1.25rem 1.75rem;max-width:1400px;margin:0 auto}
.tab-content{display:none}
.tab-content.active{display:block}

/* CONNECTION STATUS BANNER */
.bill-conn{display:flex;align-items:center;gap:12px;padding:.8rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--white);margin-bottom:1.25rem}
.bill-conn-dot{width:11px;height:11px;border-radius:50%;background:var(--slate);flex-shrink:0}
.bill-conn-dot.on{background:var(--green)}
.bill-conn-dot.warn{background:var(--amber)}
.bill-conn-text{font-size:.85rem;color:var(--navy);flex:1}
.bill-conn-text b{font-weight:700}
.bill-conn-env{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--gold-light);color:var(--gold-dark);padding:3px 8px;border-radius:5px}

/* SECTION HEADERS (match family .sec-hdr) */
.sec-hdr{display:flex;align-items:center;gap:9px;margin:1.5rem 0 .7rem;padding-bottom:7px;border-bottom:2px solid var(--gold-light)}
.sec-icon{font-size:1.05rem}
.sec-title{font-family:var(--font-heading);font-size:1.02rem;color:var(--navy)}
.sec-meta{margin-left:auto;font-size:.72rem;color:var(--slate);font-weight:600}

/* MATTERS TABLE */
.bill-table{width:100%;border-collapse:collapse;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.bill-table thead th{background:var(--navy);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:.6rem .85rem}
.bill-table thead th.num{text-align:right}
.bill-table tbody td{padding:.6rem .85rem;font-size:.82rem;border-top:1px solid var(--border);color:var(--navy)}
.bill-table tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.bill-table tbody tr{cursor:pointer;transition:background .12s}
.bill-table tbody tr:hover{background:var(--slate-light)}
.bill-matter{font-weight:600}
.bill-client{color:var(--slate);font-size:.75rem}
.bill-pill{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:10px}
.bill-pill.linked{background:var(--green-light);color:var(--green)}
.bill-pill.unlinked{background:var(--amber-light);color:var(--amber)}
.bill-amt{font-weight:700;color:var(--navy)}

/* EMPTY / LOADING */
.bill-empty{padding:2.5rem;text-align:center;color:var(--slate);font-size:.85rem;border:1.5px dashed var(--border);border-radius:var(--radius);background:var(--white)}

/* ── DASHBOARD-STYLE OVERVIEW (mirrors ui/dashboard) ──────────────────────
   The Overview tab reuses the dashboard's card + row idiom so it reads as the
   same family of screen. These class names/rules match ui/dashboard/css. */
.dash-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:1.25rem}
.dash-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:.85rem 1rem;border:1.5px solid var(--border);border-left-width:4px;border-radius:10px;background:var(--white);font-family:var(--font-body);text-align:left}
.dash-card-count{font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.dash-card-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.dash-card.st-all{border-left-color:var(--navy-mid)}
.dash-card.st-gold{border-left-color:var(--gold)}
.dash-card.st-green{border-left-color:var(--green)}
.dash-card.st-amber{border-left-color:var(--amber)}
.dash-list{display:flex;flex-direction:column;gap:8px}
.dash-empty{padding:2rem;text-align:center;color:var(--slate);font-size:.85rem}
.dash-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:.8rem 1rem;background:var(--white);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dash-row:hover{border-color:var(--gold);box-shadow:0 3px 12px rgba(0,0,0,.07)}
.dash-row-main{min-width:0;flex:1}
.dash-row-title{font-size:.9rem;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-row-sub{font-size:.72rem;color:var(--slate);margin-top:2px}
.dash-row-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dash-amount{font-size:.9rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-hours{font-size:.72rem;color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums}
.dash-status{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:6px;white-space:nowrap}
.st-done{background:var(--green-light);color:var(--green)}
.st-blocked{background:var(--amber-light);color:var(--amber)}

/* TIMEKEEPER LIST (reuses card grid) */
.bill-tk-list{display:flex;flex-direction:column;gap:8px}
.bill-tk{display:flex;align-items:center;gap:12px;padding:.65rem .95rem;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--white)}
.bill-tk-name{font-weight:600;font-size:.84rem;flex:1}
.bill-tk-meta{font-size:.74rem;color:var(--slate);font-variant-numeric:tabular-nums}
.bill-tk-amt{font-weight:700;font-size:.9rem;color:var(--navy);font-variant-numeric:tabular-nums;min-width:90px;text-align:right}