/* Light is the default palette. Dark is applied two ways, and both are
       needed: the media query covers "no explicit choice yet, follow the
       OS", and the [data-theme="dark"] rule covers an explicit pick from
       the account menu's toggle. The media query is guarded against
       data-theme="light" so an explicit *light* pick still wins on a
       machine set to dark. See _theme_head.php for how the attribute is
       set before first paint. */
    :root {
      color-scheme: light;
      --bg: #f5f6f8;
      --panel: #ffffff;
      --border: #dde1e8;
      --text: #1a1d24;
      --muted: #5a6172;
      --accent: #2f6fed;
      --accent-hover: #2557c4;
      --on-accent: #ffffff;
      --error-bg: #fdeceb;
      --error-border: #f3b9b6;
      --error-text: #a3231a;
      --success-bg: #e6f4ea;
      --success-border: #a8d5b5;
      --success-text: #1e6b34;
      --tooltip-bg: #1a1d24;
      --tooltip-text: #ffffff;
      --dropdown-shadow: rgba(20, 24, 34, .14);
      /* Black-artwork assets (the Dkoda wordmark, Simple Icons DSP marks)
         are invisible on a dark background — flipped to white in dark mode. */
      --mono-asset-filter: none;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #14171d;
        --panel: #1c2029;
        --border: #2c323e;
        --text: #e8eaf0;
        --muted: #9aa3b5;
        --accent: #5b8cff;
        --accent-hover: #86aaff;
        --on-accent: #0e1116;
        --error-bg: #3a1f1e;
        --error-border: #6b332f;
        --error-text: #ff9d94;
        --success-bg: #16301f;
        --success-border: #2f5c3d;
        --success-text: #7fd39b;
        --tooltip-bg: #363d4c;
        --tooltip-text: #f2f4f8;
        --dropdown-shadow: rgba(0, 0, 0, .5);
        --mono-asset-filter: invert(1);
      }
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #14171d;
      --panel: #1c2029;
      --border: #2c323e;
      --text: #e8eaf0;
      --muted: #9aa3b5;
      --accent: #5b8cff;
      --accent-hover: #86aaff;
      --on-accent: #0e1116;
      --error-bg: #3a1f1e;
      --error-border: #6b332f;
      --error-text: #ff9d94;
      --success-bg: #16301f;
      --success-border: #2f5c3d;
      --success-text: #7fd39b;
      --tooltip-bg: #363d4c;
      --tooltip-text: #f2f4f8;
      --dropdown-shadow: rgba(0, 0, 0, .5);
      --mono-asset-filter: invert(1);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding: 2rem;
    }
    .logo { display: block; height: 40px; width: auto; margin-bottom: 1rem; filter: var(--mono-asset-filter); }
    h1 { font-size: 1.1rem; font-weight: 600; color: var(--muted); margin: 0 0 .25rem; text-transform: uppercase; letter-spacing: .04em; }
    .subtitle { color: var(--muted); margin: 0 0 1.5rem; font-size: .9rem; }
    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
    }
    input[type="file"] { color: var(--text); }
    #status { color: var(--muted); font-size: .85rem; margin-top: .5rem; }
    .summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .stat {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .9rem 1rem;
    }
    .stat-label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
    .stat-value { font-size: 1.15rem; font-weight: 600; margin-top: .25rem; }
    .stat-title-row { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; }
    .stat-substat { color: var(--muted); font-size: .72rem; margin-top: .3rem; line-height: 1.35; }
    .stat-mode-toggle { display: flex; margin-top: .6rem; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
    .stat-mode-btn {
      flex: 1; padding: .25rem .3rem;
      background: none; border: none; cursor: pointer;
      color: var(--muted); font: inherit; font-size: .7rem; font-weight: 600;
    }
    .stat-mode-btn + .stat-mode-btn { border-left: 1px solid var(--border); }
    .stat-mode-btn:hover { color: var(--text); }
    .stat-mode-btn.active { background: var(--accent); color: var(--on-accent); }
    .stat-period-select {
      font-size: .72rem;
      padding: .15rem .35rem;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--muted);
    }
    h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
    th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
    .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
    .sortable-th:hover { color: var(--accent); }
    th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
    tr.row-error td { color: var(--error-text); }
    .art-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; display: block; }
    #songTableContainer th:first-child, #songTableContainer td:first-child,
    #analyticsTableContainer th:first-child, #analyticsTableContainer td:first-child { padding-right: 0; width: 36px; }
    /* These tables are built in JS, so they have no server-rendered
       overflow wrapper like the admin Songs table does — without this a
       wide table (or a narrow window) scrolls the whole page sideways. */
    #songTableContainer, #analyticsTableContainer, #payeeTableContainer { overflow-x: auto; }
    .dsp-icon { width: 22px; height: 22px; display: block; filter: var(--mono-asset-filter); }
    .dsp-icon-fallback {
      width: 22px; height: 22px; border-radius: 5px;
      background: var(--border); color: var(--muted);
      font-size: .7rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .flag-emoji { font-size: 1.3rem; line-height: 1; }
    .banner {
      border-radius: 8px;
      padding: .75rem 1rem;
      margin-bottom: 1rem;
      font-size: .9rem;
    }
    .banner-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); }
    .banner-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
    .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: .75rem; }
    .filter-row label { color: var(--muted); font-size: .85rem; }
    .filter-row select {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .35rem .5rem;
      font-size: .9rem;
    }
    .btn {
      background: var(--accent);
      color: var(--on-accent);
      border: none;
      border-radius: 6px;
      padding: .5rem .9rem;
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
    }
    .btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
    .btn:not(:disabled):hover { opacity: .9; }
    .btn-secondary {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--border);
    }
    /* The analytics tab strip (Assets / DSPs / Territories, plus Artists
       and Labels for admin) is sized 30% up from the old .85rem — it's the
       primary control for that whole section, so it reads as a heading
       rather than fine print. Gap and padding scale with it. */
    .tab-row { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
    .tab-btn {
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      font-size: 1.105rem;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
      padding: .13rem .13rem .78rem;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .admin-nav { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
    .admin-nav a {
      color: var(--muted);
      text-decoration: none;
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: .02em;
      border-bottom: 2px solid transparent;
      padding: .1rem .1rem .6rem;
    }
    .admin-nav a:hover { color: var(--text); }
    .admin-nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
    .account-menu { position: relative; }
    .account-avatar {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent); color: var(--on-accent); border: none;
      font-size: .95rem; font-weight: 700; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0;
    }
    button.account-avatar:hover { opacity: .88; }
    .account-dropdown {
      position: absolute; top: calc(100% + .6rem); right: 0;
      background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 10px 28px var(--dropdown-shadow);
      min-width: 220px; z-index: 20; overflow: hidden;
    }
    .account-dropdown-header { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border); }
    .account-name { font-weight: 600; font-size: .92rem; }
    .account-role { color: var(--muted); font-size: .78rem; margin-top: .1rem; }
    .account-dropdown-item { display: block; padding: .75rem 1rem; color: var(--text); text-decoration: none; font-size: .88rem; }
    .account-dropdown-item:hover { background: var(--bg); }
    .account-theme-toggle {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between; gap: .75rem;
      background: none; border: none; border-bottom: 1px solid var(--border);
      font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
    }
    .theme-switch {
      width: 34px; height: 20px; flex-shrink: 0;
      border-radius: 999px; background: var(--border);
      position: relative; transition: background .15s ease;
    }
    .theme-switch::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
      transition: transform .15s ease;
    }
    /* .on is set in JS from the *effective* theme — it can't be a CSS
       selector on [data-theme] alone, since "no attribute + OS is dark"
       is also a dark state. */
    .theme-switch.on { background: var(--accent); }
    .theme-switch.on::after { transform: translateX(14px); }
    .chart-bars-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
    .chart-bars { display: flex; align-items: flex-end; gap: .35rem; height: 140px; width: max-content; }
    .chart-bar { flex: 0 0 42px; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; justify-content: flex-end; }
    .chart-bar-fill { width: 100%; max-width: 32px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; cursor: default; }
    .chart-bar-fill:hover { background: var(--accent-hover); }
    .chart-bar-label { font-size: .66rem; color: var(--muted); text-align: center; white-space: nowrap; }
    .chart-tooltip {
      display: none;
      position: fixed;
      transform: translate(-50%, calc(-100% - 10px));
      background: var(--tooltip-bg);
      color: var(--tooltip-text);
      font-size: .8rem;
      font-weight: 600;
      padding: .4rem .65rem;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 1000;
    }
    .chart-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--tooltip-bg);
    }
    #analyticsOutput { zoom: 1.3; }