/* juribooks-appearance2-v2.css — the unified Appearance & formatting dialog,
   plus defensive formatting guards. Presentation only. Loaded last so it wins.
   Brand palette matches the app: navy #233F6B, orange #F47B2A, green #16815B. */

/* ---- defensive guard (audit "monetary columns may lose tabular alignment"):
   money cells keep lining, tabular figures under ANY chosen typeface. ---- */
.tb-tbl td.r, .tb-tbl .num, .stmt td.r, .stmt .num, .recent-tbl td.r,
.coa-tbl td.r, td.num, .num, .money, .mono, .r.num{
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* ================= dialog ================= */
.a2-root{ position:fixed; inset:0; z-index:10050; display:none; }
.a2-root.show{ display:block; }
.a2-scrim{ position:fixed; inset:0; background:rgba(15,26,43,.48); backdrop-filter:blur(2px); }
.a2-panel{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(760px, calc(100vw - 32px));
  max-height:min(88vh, 900px); display:flex; flex-direction:column;
  background:var(--surface,#fff); color:var(--ink,#173255);
  border:1px solid var(--line,#d8e0ec); border-radius:16px;
  box-shadow:0 30px 80px rgba(15,26,43,.4); overflow:hidden;
  font-family:var(--fsans,'IBM Plex Sans',system-ui,sans-serif);
}
.a2-head{ position:relative; padding:18px 22px 12px; border-bottom:1px solid var(--line,#e2e8f2); }
.a2-h{ font-size:var(--text-xl); font-weight:700; color:var(--ink); font-family:var(--fserif,Georgia,serif); }
.a2-sub{ font-size:var(--text-sm); color:var(--mute,#5b6b82); margin-top:2px; }
.a2-x{ position:absolute; top:14px; right:16px; width:30px; height:30px; border:0; border-radius:8px; background:transparent; font-size:var(--text-2xl); line-height:1; color:var(--mute); cursor:pointer; }
.a2-x:hover{ background:var(--surface-2,#eef2f8); color:var(--ink); }

.a2-tabs{ display:flex; gap:2px; padding:8px 16px 0; border-bottom:1px solid var(--line,#e2e8f2); flex-wrap:wrap; }
.a2-tab{ appearance:none; border:0; background:transparent; padding:9px 14px; font-size:var(--text-md); font-weight:600; color:var(--mute,#5b6b82); cursor:pointer; border-bottom:2.5px solid transparent; border-radius:8px 8px 0 0; }
.a2-tab:hover{ color:var(--ink); background:var(--surface-2,#f2f5fa); }
.a2-tab.on{ color:var(--jb-navy,#233F6B); border-bottom-color:#F47B2A; }

.a2-body{ padding:16px 22px; overflow-y:auto; flex:1; }

.a2-grp{ font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute,#5b6b82); margin:16px 0 7px; }
.a2-grp:first-child{ margin-top:2px; }
.a2-hint{ font-size:var(--text-sm); color:var(--mute,#5b6b82); line-height:1.5; margin:-3px 0 7px; }

.a2-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.a2-pill{ flex:1 1 auto; min-width:72px; padding:8px 10px; border:1px solid var(--line-2,#c8d3e2); border-radius:9px; background:var(--surface,#fff); color:var(--ink); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .12s, background .12s; }
.a2-pill:hover{ border-color:var(--jb-navy,#233F6B); }
.a2-pill.on{ border-color:var(--jb-navy,#233F6B); background:var(--jb-navy,#233F6B); color:#fff; }
.a2-pl{ display:block; font-size:var(--text-md); font-weight:600; }
.a2-ps{ display:block; font-size:var(--text-xs); opacity:.72; margin-top:1px; }
.a2-pill:focus-visible, .a2-tab:focus-visible, .a2-sbtn:focus-visible, .a2-sw:focus-visible, .a2-theme:focus-visible, .a2-apply:focus-visible, .a2-cancel:focus-visible, .a2-reset:focus-visible, .a2-x:focus-visible{ outline:2px solid #F47B2A; outline-offset:2px; }

.a2-step{ display:flex; align-items:center; gap:8px; }
.a2-sbtn{ flex:0 0 40px; height:34px; border:1px solid var(--line-2,#c8d3e2); border-radius:8px; background:var(--surface,#fff); color:var(--ink); font-weight:700; cursor:pointer; }
.a2-sbtn:hover{ border-color:var(--jb-navy,#233F6B); }
.a2-sbig{ font-size:var(--text-xl); }
.a2-sval{ flex:1; text-align:center; font-size:var(--text-lg); font-weight:700; color:var(--jb-navy,#233F6B); font-variant-numeric:tabular-nums; }

.a2-role{ padding:10px 0; border-top:1px solid var(--line,#e2e8f2); }
.a2-role-h{ font-size:var(--text-md); font-weight:700; color:var(--ink); margin-bottom:6px; }
.a2-role .a2-pills{ margin-bottom:6px; }
.a2-colors{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.a2-cw{ width:24px; height:24px; border-radius:6px; border:2px solid var(--line-2,#c8d3e2); cursor:pointer; padding:0; }
.a2-cw.on{ border-color:var(--jb-navy,#233F6B); box-shadow:0 0 0 2px var(--surface,#fff), 0 0 0 4px #F47B2A; }
[data-theme="dark"] .a2-role{ border-color:#33455f; }
[data-theme="dark"] .a2-role-h{ color:#e8eef7; }
.a2-swatches{ display:flex; gap:8px; }
.a2-sw{ flex:1; height:32px; border-radius:8px; border:2px solid transparent; cursor:pointer; }
.a2-sw.on{ border-color:var(--ink,#173255); box-shadow:0 0 0 2px var(--surface,#fff), 0 0 0 4px #F47B2A; }

.a2-themes{ display:grid; gap:6px; }
.a2-theme{ display:flex; align-items:flex-start; gap:9px; text-align:left; padding:9px 11px; border:1px solid var(--line-2,#c8d3e2); border-radius:10px; background:var(--surface,#fff); color:var(--ink); cursor:pointer; }
.a2-theme:hover{ border-color:var(--jb-navy,#233F6B); }
.a2-theme.on{ border-color:var(--jb-navy,#233F6B); box-shadow:0 0 0 2px color-mix(in oklch, var(--jb-navy,#233F6B) 18%, transparent); }
.a2-theme i{ width:20px; height:20px; border-radius:5px; flex:0 0 auto; margin-top:1px; border:1px solid rgba(0,0,0,.15); }
.a2-theme b{ font-size:var(--text-md); }
.a2-theme small{ display:block; font-size:var(--text-xs); font-weight:400; opacity:.72; margin-top:1px; line-height:1.4; }

/* reports tab: controls + live preview side by side, stacks on narrow screens */
.a2-cols{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.a2-preview{ position:sticky; top:0; }
.a2-plabel{ font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute,#5b6b82); margin-bottom:7px; }
.a2-pbox{ border:1px solid var(--line,#e2e8f2); border-radius:12px; padding:16px; background:var(--paper,#fbfcfe); max-height:52vh; overflow:auto; }
.a2-stmt{ transform-origin:top left; }
.a2-pbox .stmt-title{ font-size:var(--text-xl); }
.a2-pbox .tb-tbl{ width:100%; margin-top:8px; }
.a2-pbox .tb-tbl td, .a2-pbox .tb-tbl th{ padding:4px 6px; font-size:var(--text-md); }

.a2-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 22px; border-top:1px solid var(--line,#e2e8f2); background:var(--surface-2,#f6f9fc); }
.a2-fr{ display:flex; gap:8px; }
.a2-fl{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.a2-reset{ border:0; background:transparent; color:var(--mute,#5b6b82); font-size:var(--text-md); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.a2-reset:hover{ color:#E86A15; }
.a2-cancel{ padding:9px 16px; border:1px solid var(--line-2,#c8d3e2); border-radius:9px; background:var(--surface,#fff); color:var(--ink); font-weight:600; cursor:pointer; }
.a2-cancel:hover{ border-color:var(--line-strong,#9fb0c9); }
.a2-apply{ padding:9px 20px; border:1px solid var(--jb-navy,#233F6B); border-radius:9px; background:var(--jb-navy,#233F6B); color:#fff; font-weight:600; cursor:pointer; }
.a2-apply:hover{ background:#173255; }

/* mobile-safe: full-height sheet, single column, no viewport overflow */
@media (max-width:640px){
  .a2-panel{ width:100vw; max-height:100vh; height:100vh; top:0; left:0; transform:none; border-radius:0; }
  .a2-cols{ grid-template-columns:1fr; }
  .a2-preview{ position:static; }
  .a2-pbox{ max-height:none; }
}

/* dark theme.
   The app's default data-ui="clean" layer pins --surface/--paper to white even
   under dark mode, which would leave the dialog's child surfaces (pills, theme
   cards, preview) white. Rather than patch each element, redefine the dialog's
   design tokens locally in dark mode so every child that reads var(--surface)/
   var(--line)/var(--ink) resolves to a dark value automatically. */
:root[data-theme="dark"] #appr2,
[data-theme="dark"] #appr2{
  --surface:#1b2740; --surface-2:#16223a; --surface-3:#22304d; --paper:#111c30;
  --line:#33455f; --line-2:#3b4d68; --line-strong:#4a5f80;
  --ink:#e8eef7; --ink-soft:#c3d0e4; --mute:#9fb0c9; --mute-2:#8ba0bd; --navy:#7aa0d8;
}
:root[data-theme="dark"] .a2-panel,
[data-theme="dark"] .a2-panel{ background:#1b2740; color:#e8eef7; border-color:#33455f; }
[data-theme="dark"] .a2-head, [data-theme="dark"] .a2-tabs, [data-theme="dark"] .a2-foot{ border-color:#33455f; }
[data-theme="dark"] .a2-foot{ background:#16223a; }
[data-theme="dark"] .a2-h{ color:#fff; }
[data-theme="dark"] .a2-pill, [data-theme="dark"] .a2-sbtn, [data-theme="dark"] .a2-cancel, [data-theme="dark"] .a2-theme{ background:#111c30; border-color:#33455f; color:#e8eef7; }
[data-theme="dark"] .a2-pbox{ background:#111c30; border-color:#33455f; }
[data-theme="dark"] .a2-tab.on{ color:#7aa0d8; }

@media (prefers-reduced-motion:reduce){ .a2-scrim{ backdrop-filter:none; } }