/*
 * accounting.css — Hypatia Accounting Command Center Design System
 * Extends tax.css tokens for all accounting-* dashboard pages.
 * Import: <link rel="stylesheet" href="/css/accounting.css">
 *
 * Inherits all --tax-* tokens from tax.css. Also works standalone
 * with tokens.css if tax.css is not loaded.
 */

/* ── Accounting Color Tokens ─────────────────────────────────────────── */
:root {
  --acc-accent:      #00ffa3;
  --acc-gold:        #fad015;
  --acc-red:         #ff4d6d;
  --acc-blue:        #3ac9ff;
  --acc-purple:      #b47aff;
  --acc-green:       #00e676;
  --acc-orange:      #f97316;
  --acc-teal:        #14b8a6;
  --acc-mute:        rgba(200,255,240,.55);
  --acc-card:        rgba(0,12,8,.96);
  --acc-card-hover:  rgba(0,20,12,.98);
  --acc-border:      rgba(0,255,163,.12);
  --acc-border-focus:rgba(0,255,163,.35);
  --acc-shadow:      0 2px 18px rgba(0,0,0,.6);

  /* Invoice status colors */
  --inv-draft:       rgba(58,201,255,.15);
  --inv-draft-text:  #3ac9ff;
  --inv-sent:        rgba(250,208,21,.12);
  --inv-sent-text:   #fad015;
  --inv-paid:        rgba(0,255,163,.12);
  --inv-paid-text:   #00ffa3;
  --inv-overdue:     rgba(255,77,109,.15);
  --inv-overdue-text:#ff4d6d;
  --inv-voided:      rgba(120,120,120,.12);
  --inv-voided-text: #888;

  /* Amount cell colors */
  --amt-pos:  #00ffa3;
  --amt-neg:  #ff4d6d;
  --amt-neut: #c8e6d8;
}

/* ── Sub-Navigation (chip bar) ────────────────────────────────────────── */
.acc-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--acc-border);
}
.acc-chip {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid var(--acc-border);
  color: var(--acc-mute);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Roboto Mono', monospace;
  transition: .15s;
  white-space: nowrap;
}
.acc-chip:hover {
  border-color: var(--acc-border-focus);
  color: var(--acc-accent);
}
.acc-chip.active {
  background: rgba(0,255,163,.08);
  border-color: var(--acc-border-focus);
  color: var(--acc-accent);
}

/* ── Page Layout ──────────────────────────────────────────────────────── */
.acc-app {
  padding: 60px 20px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.acc-page-title {
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  font-weight: 900;
  color: var(--acc-accent);
  letter-spacing: .1em;
}
.acc-page-sub {
  font-size: 9px;
  color: var(--acc-mute);
  margin-top: 2px;
}

/* ── Company Selector ─────────────────────────────────────────────────── */
.acc-company-select {
  background: rgba(0,255,163,.05);
  border: 1px solid var(--acc-border-focus);
  color: var(--acc-accent);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Roboto Mono', monospace;
  outline: none;
  cursor: pointer;
  min-width: 160px;
}
.acc-company-select:focus {
  box-shadow: 0 0 0 2px rgba(0,255,163,.2);
}

/* ── Connect Button ───────────────────────────────────────────────────── */
.acc-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 7px;
  border: 1px solid var(--acc-border-focus);
  background: transparent;
  color: var(--acc-accent);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Roboto Mono', monospace;
  cursor: pointer;
  transition: .15s;
  text-decoration: none;
}
.acc-connect-btn:hover {
  background: rgba(0,255,163,.08);
  box-shadow: 0 0 8px rgba(0,255,163,.15);
}
.acc-connect-btn.connected {
  border-color: var(--acc-green);
  color: var(--acc-green);
}
.acc-connect-btn.connected:hover {
  background: rgba(0,230,118,.06);
}

/* ── Hero Banner ──────────────────────────────────────────────────────── */
.acc-hero {
  background: linear-gradient(135deg, rgba(0,255,163,.04), rgba(58,201,255,.04));
  border: 1px solid var(--acc-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.acc-hero-icon {
  font-size: 36px;
  flex-shrink: 0;
}
.acc-hero h1 {
  font-family: 'Orbitron', monospace;
  font-size: 17px;
  font-weight: 900;
  color: var(--acc-accent);
  letter-spacing: .08em;
  margin: 0 0 4px;
}
.acc-hero p {
  font-size: 11px;
  color: var(--acc-mute);
  margin: 0;
  max-width: 540px;
  line-height: 1.5;
}

/* ── Stat Cards ───────────────────────────────────────────────────────── */
.acc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.acc-stat {
  background: var(--acc-card);
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: .15s;
  cursor: default;
}
.acc-stat:hover {
  border-color: var(--acc-border-focus);
  box-shadow: 0 0 16px rgba(0,255,163,.06);
}
.acc-stat-val {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 900;
  color: var(--acc-accent);
}
.acc-stat-val.gold   { color: var(--acc-gold); }
.acc-stat-val.red    { color: var(--acc-red); }
.acc-stat-val.blue   { color: var(--acc-blue); }
.acc-stat-val.green  { color: var(--acc-green); }
.acc-stat-val.purple { color: var(--acc-purple); }
.acc-stat-lbl {
  font-size: 8px;
  color: var(--acc-mute);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px;
}
.acc-stat-sub {
  font-size: 9px;
  color: var(--acc-mute);
  margin-top: 2px;
}
.acc-stat-trend {
  font-size: 9px;
  margin-top: 3px;
}
.acc-stat-trend.up   { color: var(--acc-green); }
.acc-stat-trend.down { color: var(--acc-red); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.acc-card {
  background: var(--acc-card);
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  transition: .15s;
}
.acc-card:hover {
  box-shadow: 0 0 16px rgba(0,255,163,.05);
}
.acc-card-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--acc-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.acc-card-link {
  font-size: 10px;
  color: var(--acc-blue);
  text-decoration: none;
  font-weight: 500;
}
.acc-card-link:hover { color: var(--acc-accent); }

/* ── Grid Layouts ─────────────────────────────────────────────────────── */
.acc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.acc-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .acc-grid-2, .acc-grid-3 { grid-template-columns: 1fr; }
}

/* ── Workflow Grid ─────────────────────────────────────────────────────── */
.acc-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.acc-workflow-card {
  background: var(--acc-card);
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: .2s;
  display: block;
  position: relative;
  overflow: hidden;
}
.acc-workflow-card:hover {
  border-color: var(--acc-border-focus);
  box-shadow: 0 0 20px rgba(0,255,163,.08);
  transform: translateY(-2px);
}
.acc-wf-emoji {
  font-size: 26px;
  margin-bottom: 8px;
}
.acc-wf-title {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--acc-accent);
  margin-bottom: 6px;
}
.acc-wf-desc {
  font-size: 10px;
  color: var(--acc-mute);
  line-height: 1.5;
  margin-bottom: 10px;
}
.acc-wf-cta {
  font-size: 10px;
  color: var(--acc-blue);
  font-weight: 600;
}

/* ── Integration Status ───────────────────────────────────────────────── */
.acc-integration-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.acc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(0,255,163,.04);
  border: 1px solid var(--acc-border);
  font-size: 11px;
  color: var(--acc-mute);
  font-family: 'Roboto Mono', monospace;
}
.acc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.acc-dot.green  { background: var(--acc-green);  box-shadow: 0 0 4px var(--acc-green); }
.acc-dot.yellow { background: var(--acc-gold);   box-shadow: 0 0 4px var(--acc-gold); }
.acc-dot.red    { background: var(--acc-red);    box-shadow: 0 0 4px var(--acc-red); }

/* ── Invoice Status Badges ────────────────────────────────────────────── */
.inv-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: 'Roboto Mono', monospace;
}
.inv-badge.draft   { background: var(--inv-draft);   color: var(--inv-draft-text); }
.inv-badge.sent    { background: var(--inv-sent);    color: var(--inv-sent-text); }
.inv-badge.paid    { background: var(--inv-paid);    color: var(--inv-paid-text); }
.inv-badge.overdue { background: var(--inv-overdue); color: var(--inv-overdue-text); }
.inv-badge.voided  { background: var(--inv-voided);  color: var(--inv-voided-text); }
.inv-badge.partial { background: rgba(249,115,22,.12); color: #f97316; }

/* ── Amount Cells ─────────────────────────────────────────────────────── */
.amt-pos  { color: var(--amt-pos);  font-weight: 700; }
.amt-neg  { color: var(--amt-neg);  font-weight: 700; }
.amt-neut { color: var(--amt-neut); }

/* ── Data Tables ──────────────────────────────────────────────────────── */
.acc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
}
.acc-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--acc-border);
  color: var(--acc-mute);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.acc-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(0,255,163,.06);
  color: #c8e6d8;
  vertical-align: middle;
}
.acc-table tr:hover td {
  background: rgba(0,255,163,.02);
}
.acc-table tr:last-child td { border-bottom: none; }

/* ── Reconciliation Bars ──────────────────────────────────────────────── */
.recon-bar-wrap {
  margin-bottom: 12px;
}
.recon-bar-hdr {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
  font-family: 'Roboto Mono', monospace;
}
.recon-bar-hdr .name  { color: #c8e6d8; }
.recon-bar-hdr .pct   { color: var(--acc-accent); font-weight: 700; }
.recon-bar-track {
  height: 6px;
  background: rgba(0,255,163,.08);
  border-radius: 4px;
  overflow: hidden;
}
.recon-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.recon-bar-sub {
  font-size: 9px;
  color: var(--acc-mute);
  margin-top: 3px;
}

/* ── Alert Bands ──────────────────────────────────────────────────────── */
.acc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid transparent;
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
  color: inherit;
  transition: .12s;
}
.acc-alert:hover { filter: brightness(1.1); }
.acc-alert.high   { background: rgba(255,77,109,.08);  border-left-color: var(--acc-red); }
.acc-alert.medium { background: rgba(250,208,21,.06);  border-left-color: var(--acc-gold); }
.acc-alert.low    { background: rgba(0,255,163,.04);   border-left-color: var(--acc-accent); }
.acc-alert-icon { font-size: 16px; flex-shrink: 0; }
.acc-alert-body { flex: 1; min-width: 0; }
.acc-alert-title {
  font-weight: 700;
  color: #c8e6d8;
  margin-bottom: 2px;
  font-size: 11px;
}
.acc-alert.high  .acc-alert-title { color: var(--acc-red); }
.acc-alert.medium .acc-alert-title { color: var(--acc-gold); }
.acc-alert-msg { color: var(--acc-mute); font-size: 10px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.acc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--acc-border);
  background: transparent;
  color: var(--acc-mute);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Roboto Mono', monospace;
  cursor: pointer;
  transition: .12s;
  text-decoration: none;
}
.acc-btn:hover {
  border-color: var(--acc-accent);
  color: var(--acc-accent);
  background: rgba(0,255,163,.04);
}
.acc-btn.primary {
  background: rgba(0,255,163,.1);
  border-color: var(--acc-accent);
  color: var(--acc-accent);
}
.acc-btn.primary:hover {
  background: rgba(0,255,163,.18);
  box-shadow: 0 0 10px rgba(0,255,163,.2);
}
.acc-btn.danger {
  border-color: var(--acc-red);
  color: var(--acc-red);
}
.acc-btn.sm { padding: 3px 8px; font-size: 10px; }

/* ── Date Range Buttons ───────────────────────────────────────────────── */
.acc-range-btns {
  display: flex;
  gap: 4px;
}
.acc-rbtn {
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--acc-border);
  background: transparent;
  color: var(--acc-mute);
  font-size: 10px;
  font-weight: 600;
  font-family: 'Roboto Mono', monospace;
  cursor: pointer;
  transition: .12s;
}
.acc-rbtn:hover, .acc-rbtn.active {
  border-color: var(--acc-accent);
  color: var(--acc-accent);
  background: rgba(0,255,163,.06);
}

/* ── Toast ────────────────────────────────────────────────────────────── */
#acc-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: rgba(0,20,12,.95);
  border: 1px solid var(--acc-border-focus);
  color: var(--acc-accent);
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
#acc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#acc-toast.err {
  border-color: var(--acc-red);
  color: var(--acc-red);
}

/* ── Mock Data Banner ─────────────────────────────────────────────────── */
.acc-mock-banner {
  background: rgba(250,208,21,.06);
  border: 1px solid rgba(250,208,21,.25);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 10px;
  color: var(--acc-gold);
  font-family: 'Roboto Mono', monospace;
  margin-bottom: 14px;
  display: none;
}
.acc-mock-banner.visible { display: block; }

/* ── Section Headers ──────────────────────────────────────────────────── */
.acc-sh {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--acc-accent);
  letter-spacing: .06em;
  margin: 18px 0 10px;
  text-transform: uppercase;
}

/* ── Disclaimer ───────────────────────────────────────────────────────── */
.acc-disclaimer {
  font-size: 9px;
  color: var(--acc-mute);
  border-top: 1px solid var(--acc-border);
  padding-top: 14px;
  margin-top: 24px;
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .acc-app { padding: 54px 12px 32px; }
  .acc-stats { grid-template-columns: repeat(2, 1fr); }
  .acc-workflow-grid { grid-template-columns: 1fr; }
  .acc-stat-val { font-size: 16px; }
  .acc-hero h1 { font-size: 14px; }
}