/* Core One — Reporting (public/analysis.js) and Dashboards (public/dashboards.js).
   Chart colours: the validated categorical palette, eight slots in a fixed order, its own
   steps for dark mode. "Previous period" is a neutral ink, never a ninth hue. */

:root {
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #e34948;
  --cprev: #a8a7a1;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
    --cprev: #6f6e69;
  }
}
:root[data-theme="dark"] {
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  --cprev: #6f6e69;
}

.an-wrap { min-height: calc(100vh - 54px); background: var(--canvas); padding-bottom: 60px; }
.an-loading { padding: 50px; text-align: center; color: var(--muted); }
.an-none { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* control panel */
.an-cp { display: block; position: sticky; top: 54px; z-index: 25; padding: 10px 18px 8px; }
.an-cp-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.an-cp-top .crumbs { min-width: 140px; }
.an-search { position: relative; flex: 1 1 360px; max-width: 640px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
             border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 4px 4px 4px 8px; min-height: 38px; }
.an-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.an-facets { display: contents; }
.an-facet { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--canvas); border: 1px solid var(--line);
            border-radius: var(--r-xs); padding: 2px 4px 2px 7px; font-size: 12.5px; }
.an-fi { color: var(--accent); font-weight: 700; }
.an-ft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.an-facet button { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 3px; cursor: pointer; }
.an-facet button:hover { color: var(--ink); }
#an-q { flex: 1 1 120px; border: 0; outline: 0; background: none; min-width: 90px; font: inherit; font-size: 13.5px; color: var(--ink); }
.an-toggle { border: 0; border-inline-start: 1px solid var(--line); background: none; padding: 4px 10px; cursor: pointer; color: var(--muted); }
.an-suggest, .an-panel { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 60; background: var(--paper);
            border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e3); }
.an-suggest { min-width: 300px; padding: 6px; display: grid; }
.an-suggest button { text-align: start; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-xs); font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.an-suggest button:hover, .an-suggest button:first-child { background: var(--canvas); }
.an-panel { width: min(860px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; gap: 4px; max-height: 70vh; overflow: auto; }
.an-panel[hidden], .an-suggest[hidden] { display: none; }
.an-col { padding: 4px 8px; border-inline-start: 1px solid var(--line); min-width: 0; }
.an-col:first-child { border-inline-start: 0; }
.an-h { font-weight: 680; font-size: 13.5px; padding: 4px 4px 8px; }
.an-h span { color: var(--accent); }
.an-item { display: block; width: 100%; text-align: start; border: 0; background: none; padding: 6px 8px 6px 26px; border-radius: var(--r-xs);
           font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; position: relative; }
.an-item:hover { background: var(--canvas); }
.an-item.on::before { content: "✓"; position: absolute; inset-inline-start: 8px; color: var(--accent); font-weight: 700; }
.an-sep { height: 1px; background: var(--line); margin: 6px 0; }
.an-sub { color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px 2px; }
.an-range { display: flex; align-items: center; gap: 4px; padding: 6px 8px; flex-wrap: wrap; }
.an-range input { border: 1px solid var(--line); border-radius: var(--r-xs); padding: 3px 5px; font: inherit; font-size: 12px; background: var(--paper); color: var(--ink); }
.an-date { padding: 4px 8px 6px; }
.an-dl { display: block; font-size: 13px; padding-bottom: 4px; }
.an-grans { display: flex; flex-wrap: wrap; gap: 4px; }
.an-chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.an-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 640; }
.an-fav { display: flex; align-items: center; }
.an-fav .an-item { padding-inline-start: 8px; }
.an-badge { font-size: 10.5px; font-weight: 650; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-inline-start: 4px; }
.an-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 2px 6px; }
.an-save summary { cursor: pointer; font-size: 13px; padding: 6px 8px; color: var(--accent); font-weight: 600; }
.an-save[open] { display: grid; gap: 8px; padding: 0 8px 8px; }
.an-save .set-in { border: 1px solid var(--line); border-radius: var(--r-xs); padding: 6px 8px; font: inherit; background: var(--paper); color: var(--ink); }
.an-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.an-check input { accent-color: var(--accent); }

.an-views { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-inline-start: auto; }
.an-view { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--paper); padding: 6px 11px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-2); }
.an-view + .an-view { border-inline-start: 1px solid var(--line); }
.an-view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.an-view.on { background: var(--accent-soft); color: var(--ink); font-weight: 650; }
.an-cp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.an-cp-bar .btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.an-group { display: inline-flex; gap: 4px; }
.an-note { color: var(--warn); font-size: 12.5px; }
.an-dd { position: relative; }
.an-dd > summary { list-style: none; cursor: pointer; }
.an-dd > summary::-webkit-details-marker { display: none; }
.an-ddm { position: absolute; z-index: 60; top: calc(100% + 4px); inset-inline-start: 0; min-width: 230px; max-height: 60vh; overflow: auto;
          background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e3); padding: 6px; }

.an-body { padding: 16px 18px; }

/* graph */
.an-fig { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 14px 6px; }
.an-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 4px 8px; font-size: 12.5px; color: var(--ink-2); }
.an-lg { display: inline-flex; align-items: center; gap: 6px; }
.an-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cprev); flex: 0 0 auto; }
.an-key.line { width: 14px; height: 2px; border-radius: 1px; }
.an-key.c1 { background: var(--c1); } .an-key.c2 { background: var(--c2); } .an-key.c3 { background: var(--c3); } .an-key.c4 { background: var(--c4); }
.an-key.c5 { background: var(--c5); } .an-key.c6 { background: var(--c6); } .an-key.c7 { background: var(--c7); } .an-key.c8 { background: var(--c8); }
.an-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.an-grid { stroke: var(--line-2); stroke-width: 1; }
.an-base { stroke: var(--faint); stroke-width: 1; }
.an-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.an-pie-v { fill: var(--ink); font-size: 20px; font-weight: 700; }
.an-mark { cursor: pointer; stroke: var(--paper); stroke-width: 2; transition: opacity .12s; }
.an-mark:hover, .an-mark:focus { opacity: .82; outline: none; }
.an-mark.c1 { fill: var(--c1); } .an-mark.c2 { fill: var(--c2); } .an-mark.c3 { fill: var(--c3); } .an-mark.c4 { fill: var(--c4); }
.an-mark.c5 { fill: var(--c5); } .an-mark.c6 { fill: var(--c6); } .an-mark.c7 { fill: var(--c7); } .an-mark.c8 { fill: var(--c8); }
.an-mark.cprev { fill: var(--cprev); }
path.an-mark:not([fill-rule]) { stroke-width: 0; }
.an-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-line.c1 { stroke: var(--c1); } .an-line.c2 { stroke: var(--c2); } .an-line.c3 { stroke: var(--c3); } .an-line.c4 { stroke: var(--c4); }
.an-line.c5 { stroke: var(--c5); } .an-line.c6 { stroke: var(--c6); } .an-line.c7 { stroke: var(--c7); } .an-line.c8 { stroke: var(--c8); }
.an-line.cprev { stroke: var(--cprev); stroke-dasharray: 5 4; }
.an-dot { stroke: var(--paper); stroke-width: 2; }
.an-dot.c1 { fill: var(--c1); } .an-dot.c2 { fill: var(--c2); } .an-dot.c3 { fill: var(--c3); } .an-dot.c4 { fill: var(--c4); }
.an-dot.c5 { fill: var(--c5); } .an-dot.c6 { fill: var(--c6); } .an-dot.c7 { fill: var(--c7); } .an-dot.c8 { fill: var(--c8); } .an-dot.cprev { fill: var(--cprev); }
.an-hair { stroke: var(--faint); stroke-width: 1; }
.an-hit { fill: transparent; cursor: pointer; outline: none; }
.an-tip { position: fixed; z-index: 300; pointer-events: none; background: var(--paper); color: var(--ink); border: 1px solid var(--line);
          border-radius: var(--r-sm); box-shadow: var(--e3); padding: 8px 10px; font-size: 12.5px; max-width: 320px; }
.an-tip[hidden] { display: none; }
.an-th { color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.an-trow { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.an-trow b { font-variant-numeric: tabular-nums; }
.an-trow span { color: var(--muted); }
.an-hero { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 34px; text-align: center; }
.an-hero-l { color: var(--muted); font-size: 14px; }
.an-hero-v { font-size: 48px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.an-hero-c { color: var(--muted); margin-top: 6px; }

/* pivot */
.pv-wrap { overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); max-height: calc(100vh - 220px); }
.pv { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.pv th, .pv td { border-bottom: 1px solid var(--line-2); border-inline-end: 1px solid var(--line-2); padding: 6px 10px; white-space: nowrap; }
.pv thead th { position: sticky; top: 0; background: var(--raised); z-index: 2; font-weight: 600; text-align: center; }
.pv thead tr:nth-child(2) th { top: 31px; } .pv thead tr:nth-child(3) th { top: 62px; } .pv thead tr:nth-child(4) th { top: 93px; } .pv thead tr:nth-child(5) th { top: 124px; }
.pv-corner { background: var(--raised); }
.pv th button { border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; padding: 0; text-align: start; }
.pv th button:hover { color: var(--accent); }
.pv-m button { color: var(--ink-2); }
.pv-sub { font-weight: 500 !important; color: var(--muted); font-size: 11.5px; }
.pv-rh { text-align: start; font-weight: 520; position: sticky; inset-inline-start: 0; background: var(--paper); z-index: 1; }
.pv-total .pv-rh, .pv-total td { font-weight: 700; background: var(--raised); }
.pv-l1 .pv-rh { font-weight: 600; }
.pv-v { text-align: end; font-variant-numeric: tabular-nums; cursor: pointer; }
.pv-v:hover { background: var(--accent-soft); }
.pv-tc { font-weight: 650; background: color-mix(in srgb, var(--raised) 60%, transparent); }
.pv-prev { color: var(--muted); }
.pv-var.up { color: var(--success); } .pv-var.down { color: var(--danger); }
.pv-menu { position: fixed; z-index: 300; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e3);
           padding: 6px; max-height: 60vh; overflow: auto; min-width: 220px; display: grid; }
.pv-menu button, .pv-menu a { text-align: start; border: 0; background: none; padding: 7px 10px; border-radius: var(--r-xs); font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); text-decoration: none; }
.pv-menu button:hover, .pv-menu a:hover { background: var(--canvas); }
.db-menu a { display: flex; justify-content: space-between; gap: 16px; }
.db-menu a span { color: var(--muted); font-size: 12px; }

/* list */
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--paper); }
.an-table th { text-align: start; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.an-table td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); }
.an-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.an-pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 2px; color: var(--muted); font-size: 13px; }

/* dashboards */
.db-wrap { min-height: calc(100vh - 54px); background: var(--canvas); padding-bottom: 60px; }
.db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 18px; }
.db-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; display: flex; flex-direction: column; }
.db-tile.full { grid-column: 1 / -1; }
.db-th { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 4px; }
.db-title { font-weight: 680; color: var(--ink); text-decoration: none; }
.db-title:hover { color: var(--accent); }
.db-sub { color: var(--muted); font-size: 12px; }
.db-acts { margin-inline-start: auto; display: inline-flex; gap: 2px; }
.db-b { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 7px; border-radius: var(--r-xs); font-size: 15px; }
.db-b:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
.db-b:disabled { opacity: .3; cursor: default; }
.db-body { padding: 4px 10px 12px; min-height: 120px; }
.db-body .an-fig { border: 0; padding: 4px; }
.db-body .an-hero { border: 0; padding: 20px; }
.db-body .an-hero-v { font-size: 38px; }
.an-mini-t td, .an-mini-t th { padding: 6px 8px; }
.db-empty { grid-column: 1 / -1; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md); padding: 40px; text-align: center; color: var(--ink-2); }
.db-empty h2 { margin: 0 0 8px; font-size: 18px; }
.db-empty p { max-width: 560px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 760px) {
  .an-cp { position: static; padding: 10px 12px; }
  .an-search { flex-basis: 100%; max-width: none; order: 3; }
  .an-views { margin-inline-start: 0; }
  .an-view span { display: none; }
  .an-panel { grid-template-columns: minmax(0, 1fr); width: calc(100vw - 24px); }
  .an-col { border-inline-start: 0; border-top: 1px solid var(--line); }
  .an-col:first-child { border-top: 0; }
  .an-body { padding: 12px; }
  .db-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .pv-wrap { max-height: none; }
}

/* Under Arabic the page reads right-to-left, but a chart's axes keep their usual direction
   (time runs left to right), as Odoo does; the legend and the pivot follow the page. */
.an-svg { direction: ltr; }