/* ERP design system — one stylesheet, reused across all back-ends. See DESIGN.md. */
/* Right-aligned tabular numbers (accounting reports). */
.table .num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Reporting — dependency-free bar charts. */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.chart-hd { font-weight: 700; margin-bottom: 10px; }
.barrow { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; }
.barrow .lbl { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #444; }
.barrow .bar { flex: 1; background: #f0f0f3; border-radius: 5px; height: 16px; overflow: hidden; }
.barrow .fill { display: block; height: 100%; background: var(--brand); border-radius: 5px; min-width: 2px; }
.barrow .val { width: 84px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
:root {
  /* Values copied from real Odoo 18 source (addons/web/static/src/scss) */
  --brand: #71639e;        /* $o-community-color — Odoo Community primary */
  --brand-ink: #5b4f86;    /* darker shade for links/hover */
  --ink: #343a40;          /* $o-gray-800 — main text */
  --muted: #6c757d;        /* $o-gray-600 */
  --line: #dee2e6;         /* $o-gray-300 — borders */
  --bg: #f8f9fa;           /* $o-gray-100 — webclient background */
  --surface: #ffffff;
  --success: #28a745; --success-bg: #d4edda;
  --warning: #b45309; --warning-bg: #fff3cd;
  --danger: #dc3545;  --danger-bg: #f8d7da;
  --r-ctl: 6px; --r-card: 8px;
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  /* Odoo's system font stack */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 13px; line-height: 1.5;   /* Odoo root font-size = 13px */
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 18px; margin: var(--sp-6) 0 var(--sp-3); }

/* ---- app shell: sidebar + topbar ---- */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: #111827; color: #cbd5e1; padding: var(--sp-4) var(--sp-3); }
.sidebar .logo { color: #fff; font-weight: 700; font-size: 16px; padding: var(--sp-2); }
.sidebar nav { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { color: #cbd5e1; padding: 9px var(--sp-3); border-radius: var(--r-ctl); display: block; }
.sidebar nav a:hover, .sidebar nav a.active { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { background: var(--brand); color: #fff; padding: var(--sp-4) var(--sp-6); display: flex; justify-content: space-between; align-items: center; }
.topbar .who { font-size: 13px; opacity: .9; }
.topbar a { color: #fff; text-decoration: underline; }
.content { padding: var(--sp-6); max-width: 1040px; width: 100%; }

/* ---- cards / stats ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.card, .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); }
.stat .n { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ---- table (Odoo list view: dense, gray-100 header, row hover) ---- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.table th { text-align: left; background: var(--bg); color: #4b4f58; padding: 6px 12px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 6px 12px; border-bottom: 1px solid #f1f1f3; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: #f5f5f7; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---- Odoo form "sheet" ---- */
.o_sheet { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); max-width: 980px; margin: 0 auto; padding: 24px; }
.o_sheet h2:first-child { margin-top: 0; }
.o_group { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 36px; }
@media (max-width: 760px) { .o_group { grid-template-columns: 1fr; } }
.o_field { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f4f4f6; }
.o_field > label { color: #4b4f58; font-weight: 500; font-size: 13px; }
.o_field .v { min-width: 0; }
.o_field input, .o_field select, .o_field textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 13px; }
.o_field input:focus, .o_field select:focus, .o_field textarea:focus { border-color: var(--brand); outline: none; }
.o_field input[type=checkbox] { width: auto; }
.o_sheet .actions { margin-top: 22px; }

/* ---- chatter ---- */
.chatter h2 { font-size: 14px; margin: 0 0 10px; }
.chatter .act { padding: 8px 0; border-bottom: 1px solid #f4f4f6; font-size: 13px; }
.chatter .badge { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-size: 11px; color: var(--muted); }
.chatter .link-btn { background: none; border: 0; color: var(--brand-ink); cursor: pointer; font-size: 12px; }
.chatter-act-form, .chatter-msg-form { display: flex; gap: 8px; margin: 10px 0 18px; flex-wrap: wrap; }
.chatter-act-form input[type=text], .chatter-act-form input:not([type]), .chatter-act-form input[name=summary] { flex: 1; min-width: 160px; }
.chatter input, .chatter select, .chatter textarea { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 13px; }
.chatter-msg-form textarea { flex: 1; min-width: 220px; resize: vertical; }
.chatter .msg { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #f4f4f6; }
.chatter .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: 0 0 auto; }
.chatter .mh { font-size: 13px; } .chatter .mt { color: var(--muted); font-size: 12px; }
.chatter .mb { font-size: 13px; margin-top: 2px; }

/* ---- pills (status) ---- */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pill.active, .pill.posted, .pill.confirmed, .pill.invoiced { background: var(--success-bg); color: var(--success); }
.pill.provisioning, .pill.draft, .pill.to_invoice { background: var(--warning-bg); color: var(--warning); }
.pill.suspended, .pill.cancel { background: var(--danger-bg); color: var(--danger); }
.pill.deleted, .pill.no, .pill.sent { background: #e5e7eb; color: #374151; }

/* ---- buttons ---- */
.btn { background: var(--brand); color: #fff; border: 0; padding: 9px 16px; border-radius: var(--r-ctl); cursor: pointer; font-size: 14px; font-family: inherit; }
.btn:hover { filter: brightness(.95); }
.btn.ghost { background: transparent; color: var(--brand-ink); border: 1px solid var(--line); }

/* ---- forms ---- */
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); margin-top: var(--sp-6); }
.field { display: block; margin-bottom: var(--sp-3); }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.input, .form input { width: 100%; max-width: 320px; padding: 9px; border: 1px solid #cbd2da; border-radius: var(--r-ctl); font-family: inherit; font-size: 14px; }
.err { color: var(--danger); font-size: 13px; margin: var(--sp-2) 0; }

/* ---- empty state ---- */
.empty { color: var(--muted); padding: var(--sp-4); }

/* ---- flash messages ---- */
.flash { background: var(--success-bg); color: var(--success); border-radius: var(--r-ctl); padding: 10px var(--sp-4); margin-bottom: var(--sp-4); }

/* ================= Odoo-like tenant shell ================= */
.otop { background: var(--brand); color: #fff; height: 46px; display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.otop .apps { color: #fff; font-size: 20px; line-height: 1; text-decoration: none; opacity: .95; }
.otop .apps:hover { opacity: 1; text-decoration: none; }
.otop .brand { font-weight: 600; }
.otop .sect { opacity: .9; font-size: 14px; }
.otop .spacer { flex: 1; }
.otop .osearch { margin: 0; }
.otop .osearch input { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 16px; padding: 5px 12px; font-size: 13px; width: 180px; font-family: inherit; }
.otop .osearch input::placeholder { color: rgba(255,255,255,.8); }
.otop .osearch input:focus { background: rgba(255,255,255,.25); outline: none; width: 220px; }
.otop .user { font-size: 13px; opacity: .95; }
.otop .user a { color: #fff; text-decoration: underline; }

.ocp { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.ocp .crumb { font-size: 14px; color: var(--muted); }
.ocp .crumb b { color: var(--ink); }
.ocontent { padding: 20px; max-width: 1100px; }

/* apps grid (the Odoo "home menu") */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; max-width: 720px; margin: 48px auto; }
.app-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 16px; text-align: center; text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .15s; }
.app-tile:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-2px); text-decoration: none; }
.app-tile .ic { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 26px; background: var(--brand); color: #fff; }
.app-tile .nm { font-weight: 600; font-size: 15px; }
.app-tile .ct { color: var(--muted); font-size: 12px; margin-top: 3px; }
@media (max-width: 600px) { .ocontent { padding: 12px; } }

/* ---- auth centered ---- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth .box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-6); width: 320px; }
.auth .box input { width: 100%; padding: 9px; border: 1px solid #cbd2da; border-radius: var(--r-ctl); font-family: inherit; font-size: 14px; }

/* ---- focus + motion (quality floor) ---- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- responsive: collapse sidebar ---- */
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: flex; gap: var(--sp-2); overflow-x: auto; }
  .sidebar nav { flex-direction: row; margin-top: 0; }
}