/* =========================================================================
   9AM · Daylight theme overlay
   ------------------------------------------------------------------------
   Loaded AFTER styles.css + mobile.css. Reskins the whole app to the
   "Daylight" style guide (see style-guide-v2.html) by:
     1. Remapping the existing design tokens to Daylight values, and
     2. Overriding a small set of components that changed structurally
        (borderless buttons, gradient status pills, circular checkboxes,
         filled fields, rounded-square avatars, bigger group headers).
   Fully reversible: remove the <link> to fall back to the Mint system.

   Brand:  PRIMARY #FFD32C (yellow, primary action)  ·  SECONDARY/ACCENT
           #6666FF (indigo, accents + selection)
   Neutrals: white · soft grey · charcoal (text/lines = charcoal @ opacity)
   ========================================================================= */

/* ---------------------------- TOKENS · light ---------------------------- */
:root {
  /* Brand */
  --primary: #ffd32c;
  --primary-hover: #f7c61c;
  --primary-press: #ecb800;
  --on-primary: #2c2a1c;            /* dark text on yellow */

  --accent: #6666ff;                /* indigo: selection, links, checked, focus */
  --accent-hover: #5a5af2;
  --accent-press: #4e4ee6;
  --accent-soft: #ececfe;
  --accent-soft-hover: #dadafb;
  --accent-ink: #4b46d6;
  --accent-ring: rgba(102, 102, 255, 0.40);
  --on-accent: #ffffff;

  /* Neutrals — three only; secondary inks/lines are charcoal @ opacity */
  --bg: #f3f3f5;
  --surface: #ffffff;
  --surface-2: #f3f3f5;
  --surface-hover: rgba(29, 30, 34, 0.05);
  --field-bg: #ebedf2;
  --ink: #1d1e22;
  --ink-2: rgba(29, 30, 34, 0.66);
  --muted: rgba(29, 30, 34, 0.58);   /* lifted for readable secondary/label text */
  --faint: rgba(29, 30, 34, 0.36);
  --line: rgba(29, 30, 34, 0.10);
  --line-strong: rgba(29, 30, 34, 0.16);
  --line-subtle: rgba(29, 30, 34, 0.06);
  --scrim: rgba(28, 30, 52, 0.34);

  /* Semantic */
  --success: #12b76a;  --success-soft: #daf6e6;  --success-ink: #0c9b57;
  --warning: #ffd32c;  --warning-soft: #fff0c0;  --warning-ink: #9a6a00;
  --danger:  #ef4452;  --danger-soft:  #fde4e7;  --danger-ink:  #d92d43;
  --info:    #6666ff;  --info-soft:    #e7e7ff;  --info-ink:    #4f46e5;

  /* Status — vivid, brand-anchored. bd = bg so the pill border disappears. */
  --st-complete-bg:#daf6e6;  --st-complete-bd:#daf6e6;  --st-complete-ink:#0c9b57;   /* emerald */
  --st-inprogress-bg:#ffd32c;--st-inprogress-bd:#ffd32c;--st-inprogress-ink:#6b4e00; /* PRIMARY yellow */
  --st-notstarted-bg:#ebecf2;--st-notstarted-bd:#ebecf2;--st-notstarted-ink:#5d6478; /* slate */
  --st-paused-bg:#fde4e7;    --st-paused-bd:#fde4e7;    --st-paused-ink:#d92d43;     /* RED = danger */
  --st-billable-bg:#efe6fe;  --st-billable-bd:#efe6fe;  --st-billable-ink:#7c3aed;   /* violet */
  --st-billed-bg:#e7e7ff;    --st-billed-bd:#e7e7ff;    --st-billed-ink:#4f46e5;     /* SECONDARY blue */
  --st-proposed-bg:#d7f5f0;  --st-proposed-bd:#d7f5f0;  --st-proposed-ink:#0e9e8e;   /* teal */

  /* Type — system font (Daylight); scale already matches */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "system-ui",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Calmer brand shadows */
  --shadow-xs: 0 1px 2px rgba(22, 28, 50, 0.05);
  --shadow-sm: 0 1px 2px rgba(22, 28, 50, 0.05), 0 1px 1px rgba(22, 28, 50, 0.04);
  --shadow-md: 0 6px 22px rgba(22, 28, 50, 0.09);
  --shadow-lg: 0 14px 44px rgba(22, 28, 50, 0.16);
  --shadow-overlay: 0 18px 48px rgba(22, 28, 50, 0.18);
}

/* ---------------------------- TOKENS · dark ----------------------------- */
[data-theme="dark"] {
  --bg: #151517;
  --surface: #202023;
  --surface-2: #2a2a2e;
  --surface-hover: rgba(255, 255, 255, 0.06);
  --field-bg: #2a2a2e;
  --ink: #f4f4f5;
  --ink-2: rgba(244, 244, 245, 0.70);
  --muted: rgba(244, 244, 245, 0.62);   /* lifted for readable secondary/label text */
  --faint: rgba(244, 244, 245, 0.38);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-subtle: rgba(255, 255, 255, 0.07);

  --accent-soft: #262652;
  --accent-soft-hover: #34347a;
  --accent-ink: #a6a6ff;
  --accent-ring: rgba(122, 122, 255, 0.50);

  --success: #2bd48a;  --success-soft:#10301f;  --success-ink:#4fd394;
  --warning: #ffd32c;  --warning-soft:#3a2f0e;  --warning-ink:#f5c84b;
  --danger:  #ff5d6a;  --danger-soft: #3a1f22;  --danger-ink: #ff7884;
  --info:    #6666ff;  --info-soft:   #23234d;  --info-ink:   #a6a6ff;

  --st-complete-bg:#10301f;  --st-complete-bd:#10301f;  --st-complete-ink:#4fd394;
  --st-inprogress-bg:#ffd32c;--st-inprogress-bd:#ffd32c;--st-inprogress-ink:#6b4e00;
  --st-notstarted-bg:#2b2e38;--st-notstarted-bd:#2b2e38;--st-notstarted-ink:#a7adbe;
  --st-paused-bg:#3a1f22;    --st-paused-bd:#3a1f22;    --st-paused-ink:#ff7884;
  --st-billable-bg:#2a1d4d;  --st-billable-bd:#2a1d4d;  --st-billable-ink:#b89cf8;
  --st-billed-bg:#23234d;    --st-billed-bd:#23234d;    --st-billed-ink:#a6a6ff;
  --st-proposed-bg:#0f3631;  --st-proposed-bd:#0f3631;  --st-proposed-ink:#4fd0bd;
}

/* =========================================================================
   COMPONENT OVERRIDES
   ========================================================================= */

/* ---- Buttons: borderless, lighten-on-hover (fluid) ---- */
.btn { border: 0; transition: background 200ms var(--ease), filter 200ms var(--ease), color 160ms var(--ease), box-shadow 200ms var(--ease), transform 160ms var(--ease); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(236, 184, 0, 0.30); }
.btn-primary:hover { background: var(--primary); filter: brightness(1.07); }
.btn-primary:active { background: var(--primary); filter: brightness(0.99); transform: scale(0.98); }
.btn-secondary { background: var(--surface-2); border: 0; color: var(--ink); }
.btn-secondary:hover { background: var(--surface-hover); border: 0; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn-icon, .btn-trash, .col-reset, .addcol-btn { border: 0; }

/* one-off button-likes → calm borderless fills */
.group-toggle-btn, .add-row-inline, .cycle-add {
  border: 0; background: var(--surface-2); color: var(--ink);
}
.group-toggle-btn:hover, .add-row-inline:hover, .cycle-add:hover { background: var(--surface-hover); border: 0; }
.group-toggle-btn.active { background: var(--accent-soft); color: var(--accent-ink); border: 0; }
.view-tab.active, .customize-tab.active { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- Status pills: flat, borderless (tones come from --st-* tokens) ---- */
.pill { border-color: transparent; }

/* ---- Checkbox: clean rounded square, indigo when checked ---- */
input[type="checkbox"] { border-radius: 6px; }

/* ---- Fields: filled, borderless; indigo focus ring ---- */
.input, .field input, .field select, .field textarea {
  border: 0; background: var(--field-bg);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: transparent; background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring);
}
.topbar-search { border: 0; background: var(--field-bg); }
.topbar-search:focus-within { background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---- Avatars / profile photos: rounded squares ---- */
.avatar { border-radius: 8px; }
.avatar.sm { border-radius: 6px; }
.avatar.lg { border-radius: 14px; }
.avatar img { border-radius: inherit; }
.avatar-empty { border-radius: 7px; }

/* ---- Group headers: read as a header, bolder/bigger than their rows ---- */
.group-header-inner { font-size: var(--text-h3); font-weight: 700; }

/* ---- Sidebar: WHITE (content area keeps the grey canvas) ---- */
.sidebar { background: var(--surface); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.nav-item.active .nav-icon { color: var(--accent-ink); }

/* =========================================================================
   FEEDBACK ROUND — item color, overdue, badges, avatars, type chips
   ========================================================================= */

/* Item / project-code name: plain charcoal, not a blue link */
.item-open { color: var(--ink); }

/* Overdue: ONLY the due date is red — not the code, client, or amount */
.sheet-row.is-overdue td:not(.status-cell):not(.timeline-cell),
.sheet-row.is-overdue .item-open,
.sheet-row.is-overdue .cell-clip,
.sheet-row.is-overdue .mw-board { color: var(--ink); }
/* (the date keeps its red via .due-wrap.is-overdue, which is more specific) */

/* Number badges → circles */
.task-count { border-radius: var(--radius-pill); min-width: 18px; height: 18px; padding: 0 5px; }
.board-count, .nav-board-count { border-radius: var(--radius-pill); }

/* Avatars / profile photos: rounded-square initials, no border, no owner ring */
.avatar-empty { border: 0; border-radius: 7px; background: var(--surface-2); }
.person-rollup .is-owner { box-shadow: none; }

/* ---- Filter dropdown: full-width, Daylight-styled fields ---- */
.filter-panel { border: 0; box-shadow: var(--shadow-pop); width: 288px; }
.filter-panel .fp-row { width: 100%; }
.filter-panel .fp-row .dd { width: 100%; display: block; }
.filter-panel .fp-row .dd .dd-toggle,
.filter-panel .fp-row .input,
.filter-panel .fp-row select {
  width: 100% !important; box-sizing: border-box;
  min-height: var(--control-h); padding: 0 12px;
  background: var(--field-bg) !important; border: 0 !important;
  border-radius: var(--radius-sm); color: var(--ink);
}
.filter-panel .fp-row .dd .dd-toggle:hover { background: var(--surface-hover) !important; }
.fp-clear { color: var(--accent-ink); }

/* ---- Subitems: clearly subordinate to parent items (lighter + shorter) ---- */
.subitem-table td { height: 38px; }
.sub-name-input { font-size: 13px; font-weight: 400; color: var(--ink-2); }

/* ---- My Work items rendered EXACTLY like workspace subitems ---- */
.mw-table td { height: 38px; }
.mw-open { font-size: 13px; font-weight: 400; color: var(--ink-2); }

/* ---- Settings: present actions as full-width rows with breathing room ---- */
.settings-section { gap: 8px; }
.settings-account-row { margin-bottom: 12px; }
.settings-row, .settings-action {
  width: 100%; min-height: 46px; padding: 0 14px;
  border: 0; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink);
  font-size: var(--text-body); font-weight: 540;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
}
.settings-action:hover { background: var(--surface-hover); }
.settings-action.danger { color: var(--danger-ink); }
.settings-action.danger:hover { background: var(--danger-soft); }
.config-group { padding: 8px 0 14px; }
.config-list { margin-bottom: 8px; }
#addStatusBtn, #addTypeLibBtn { margin-top: 6px; }

/* =========================================================================
   FULL-COVERAGE PASS — invoice document + weight harmonization
   ========================================================================= */

/* Document accent = secondary indigo (per-workspace --doc-accent still wins) */
:root { --royal: #6666ff; }

/* ---- Invoice / proposal document: Daylight neutrals, but ALWAYS light
        (it is a printable page — must not flip in dark mode) ---- */
.invoice-page { color: #2c2d31; }
.invoice-print-area .invoice-label, .invoice-live-preview .invoice-label,
.invoice-print-area .invoice-label-secondary, .invoice-live-preview .invoice-label-secondary,
.invoice-print-area .invoice-value, .invoice-live-preview .invoice-value,
.invoice-print-area .invoice-subvalue, .invoice-live-preview .invoice-subvalue,
.invoice-print-area .invoice-inline-label, .invoice-live-preview .invoice-inline-label,
.invoice-message { color: #2c2d31; }
.invoice-hero, .invoice-message, .print-row-head { background: #f3f3f5; }
.print-row { border-bottom-color: #e6e6ea; }
.print-row .cell { border-right-color: #eeeeef; }
.print-row-head .cell { color: #76777e; }

/* ---- Weight harmonization: calm Mint-era 800/900 to the Daylight ladder ---- */
.brand-logo { font-weight: 700; }
.group-header .group-title { font-weight: 700; }
.ic-title-btn, .ic-title-input { font-weight: 650; }
.nav-badge, .icon-btn.has-unread::after, .cycle-count, .bulk-count,
.group-total, .collector-total, .discussion-head { font-weight: 600; }
.invoice-brand,
.invoice-print-area .invoice-label, .invoice-live-preview .invoice-label,
.invoice-print-area .invoice-inline-label, .invoice-live-preview .invoice-inline-label,
.invoice-print-area .invoice-value, .invoice-live-preview .invoice-value,
.print-row-head .cell, .invoiced-by,
.total-row strong, .balance-due, .balance-due strong { font-weight: 700; }