/* ── ATP Portal — Quota tab styles ──────────────────────────── */

    .quota-var {
      margin-bottom: 20px
    }

    .quota-var-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text1);
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border)
    }

    /* ── Crosstab quota tables (mockup) ─────────────────────────── */
    .crosstab-wrap { overflow-x: auto }

    .xtab { border-collapse: separate; border-spacing: 0; font-size: 12px }
    .xtab th {
      padding: 8px 12px;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--text2);
      background: var(--bg2);
      border-bottom: 2px solid var(--border);
      text-align: center;
      white-space: nowrap
    }
    .xtab th.rh { text-align: left; border-right: 1px solid var(--border) }
    .xtab th.ch { border-left: 1px solid var(--border) }
    .xtab td.rl {
      padding: 0 14px;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      font-weight: 500;
      color: var(--text1);
      white-space: nowrap;
      vertical-align: middle
    }
    .xtab td.dc {
      padding: 10px 12px;
      border-left: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      vertical-align: top;
      min-width: 140px
    }
    .xtab td.tc {
      padding: 10px 12px;
      border-left: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg2);
      min-width: 120px;
      vertical-align: top
    }
    .xtab tr:last-child td { border-bottom: none }
    .xtab tr.trow td,
    .xtab tr.trow th { background: var(--bg3); font-weight: 700; border-top: 2px solid var(--border) }

    .cn       { display: flex; align-items: baseline; gap: 5px; margin-bottom: 5px; flex-wrap: wrap }
    .ca       { font-size: 20px; font-weight: 700; color: var(--text1); line-height: 1 }
    .ctxt     { font-size: 11px; color: var(--text3) }
    .cp       { font-size: 11px; font-weight: 600 }
    .cbtrack  { height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-top: 4px }
    .cbfill   { height: 100%; border-radius: 3px }
    .cs       { font-size: 10px; margin-top: 4px }

    .badge-closed {
      display: inline-block;
      font-size: 9px;
      padding: 1px 5px;
      border-radius: 999px;
      background: rgba(29,158,117,.15);
      color: #1D9E75;
      font-weight: 600;
      margin-left: 3px
    }

    /* ── Flat tables (crosstab table view) ──────────────────────── */
    .ftab { width: 100%; border-collapse: collapse; font-size: 12px }
    .ftab th {
      text-align: left;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text3);
      border-bottom: 1px solid var(--border);
      white-space: nowrap
    }
    .ftab th.r { text-align: right }
    .ftab td   { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text1) }
    .ftab td.r { text-align: right }
    .ftab tr:last-child td { border-bottom: none }
    .ftab tr.strow td { background: var(--bg2); font-style: italic; color: var(--text2) }
    .ftab tr.gtrow td { background: var(--bg3); font-weight: 700; border-top: 2px solid var(--border) }
    .ftab tr:nth-child(even) td { background: rgba(128,128,128,.04) }

    .mbt { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; min-width: 80px }
    .mbf { height: 100%; border-radius: 3px }

    .c-green { color: #1D9E75 } .c-blue  { color: #378ADD }
    .c-amber { color: #EF9F27 } .c-red   { color: #E24B4A }
    .bg-green{ background: #1D9E75 } .bg-blue { background: #378ADD }
    .bg-amber{ background: #EF9F27 } .bg-red  { background: #E24B4A }

    .xt-legend {
      display: flex; gap: 16px; margin-top: 14px;
      flex-wrap: wrap; font-size: 10px; color: var(--text3)
    }
    .xt-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle }