/* =====================================================================
   "Paper cutout" style — the look of ContractorDashboard / CourierDashboard
   (CourierDashboardSolution/src/html/css/theme-papercut.css): construction paper
   cut out and laid on a sunburst. Off-white paper, navy ink, a coral dot,
   mustard for whatever is selected, Luckiest Guy for titles, Nunito for the rest.

   Active while <html data-theme="papercut"> (js/theme.js); app.css alone is the
   "Original" style. Every rule sits inside @scope, whose root adds no specificity,
   so each replaces exactly the app.css rule with the same selector.

   This app is a dense desktop-style tool, so the paper treatment stops at the
   chrome: menu bar, header panels, tab strips, buttons, dialogs, menus. Grid rows
   are never tilted and keep their state colours (approval, in-group, drafts) —
   those colours carry meaning. Tilts use `rotate`, which composes with transforms.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Nunito:wght@400..900&display=swap');

html[data-theme="papercut"] {
  --ink: #1b2a41;
  --paper: #fbf7ee;
  --paper-2: #f4ecdb;
  --paper-3: #ebdfc6;
  --field: #fffdf8;
  --pc-blue: #2f74d0;
  --pc-blue-ink: #1f56a8;
  --pc-coral: #e8535d;
  --pc-mustard: #f6c343;
  --pc-mustard-pale: #fbe8a6;
  --pc-green: #2e8b57;
  --tape: rgba(255, 246, 214, 0.62);

  /* app.css tokens, re-pointed at paper and ink. Light only: paper has no dark mode. */
  --bg: var(--paper-2);
  --panel: var(--paper);
  --text: var(--ink);
  --muted: #5d6577;
  --border: #d9ccb0;
  --border-strong: #b9a983;
  --head: var(--paper-2);
  --alt: #f8f2e4;
  --sel: var(--pc-mustard-pale);
  --sel-strong: var(--ink);
  --sel-text: var(--ink);
  --hover: var(--pc-mustard-pale);
  --accent: var(--pc-blue-ink);
  --danger: #c23a44;
  --menu: var(--paper);
  --input: var(--field);
  --shadow: 3px 4px 0 rgba(27, 42, 65, 0.3), 0 10px 24px rgba(15, 30, 70, 0.3);
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color-scheme: light;
}

@scope (html[data-theme="papercut"]) {

  /* -----------------------------------------------------------------
     Base: the sunburst every title card in the videos sits on
     ----------------------------------------------------------------- */

  body {
    font-family: var(--font);
    font-weight: 600;
    background-color: var(--pc-blue);
    background-image:
      radial-gradient(ellipse at 50% 35%, transparent 35%, rgba(12, 30, 75, 0.35)),
      repeating-conic-gradient(from -4deg at 50% 38%, #3479d6 0deg 9deg, #2c6bcb 9deg 18deg);
    background-attachment: fixed;
  }

  ::selection { background: var(--pc-mustard); color: var(--ink); }
  a { color: var(--pc-blue-ink); }

  /* The app floats on the sunburst with a margin of blue around it */
  #app { padding: 6px 8px 8px; gap: 6px; }

  /* -----------------------------------------------------------------
     Menu bar: a strip of navy card
     ----------------------------------------------------------------- */

  .menubar {
    background: var(--ink);
    color: var(--paper);
    border: 0;
    border-radius: 4px;
    min-height: 28px;
    padding: 0 6px;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25);
  }
  .menubar .mb-item { font-weight: 800; color: var(--paper); padding: 4px 10px; border-radius: 3px; }
  .menubar .mb-item:hover { background: rgba(255, 255, 255, 0.12); rotate: -1deg; }
  .menubar .mb-item.open { background: var(--pc-mustard); color: var(--ink); rotate: -1.5deg; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); }
  .menubar .user { color: rgba(251, 247, 238, 0.8); font-weight: 700; }
  .menubar .dbbadge { background: var(--pc-coral); color: #fff; font-weight: 800; rotate: -3deg; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3); }
  .menubar button { background: var(--paper); color: var(--ink); border: 2px solid var(--paper); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }

  /* -----------------------------------------------------------------
     Header: the filter panels are cards laid on the sunburst
     ----------------------------------------------------------------- */

  .header { background: transparent; border: 0; padding: 2px 0 4px; gap: 10px; overflow: visible; }
  .hpanel {
    background: var(--paper);
    border: 0;
    border-radius: 4px;
    padding: 5px 9px 7px;
    box-shadow: var(--shadow-card, 1px 2px 0 rgba(27, 42, 65, 0.08), 3px 6px 14px rgba(15, 30, 70, 0.28));
  }
  .hpanel:nth-child(odd) { rotate: -0.4deg; }
  .hpanel:nth-child(even) { rotate: 0.3deg; }
  .hpanel-title {
    font-family: "Luckiest Guy", "Nunito", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.05em;
    font-size: 14px;
    color: var(--ink);
  }
  .hgrid > label, .hrow.period-types label, label.small { color: var(--ink); font-weight: 800; }
  .hpanel .hint { color: var(--muted); font-weight: 700; }
  /* Text that sits in the header's button column would land on the sunburst: give it a paper chip */
  .header .grp-profit {
    background: var(--paper);
    color: var(--ink);
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 3px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    rotate: 0.6deg;
  }

  /* -----------------------------------------------------------------
     Forms
     ----------------------------------------------------------------- */

  input, select, textarea {
    font-weight: 600;
    background: var(--field);
    border: 2px solid var(--border);
    border-radius: 4px;
    accent-color: var(--pc-coral);
  }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(246, 195, 67, 0.6);
  }
  .form-row > label { color: var(--ink); font-weight: 800; }
  .form-section {
    font-family: "Luckiest Guy", "Nunito", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    border-bottom: 2px dashed var(--border);
  }

  /* -----------------------------------------------------------------
     Buttons: navy card stock, tipping over a little when pointed at
     ----------------------------------------------------------------- */

  button {
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    transition: rotate 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  }
  button:hover:not(:disabled) {
    background: var(--ink);
    border-color: var(--ink);
    rotate: -1.5deg;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px rgba(0, 0, 0, 0.15);
  }
  button:disabled { opacity: 0.45; rotate: none; box-shadow: none; }
  button.primary { background: var(--pc-coral); border-color: var(--pc-coral); color: #fff; }
  button.primary:hover:not(:disabled) { background: var(--pc-coral); filter: none; }
  button.danger { background: var(--paper); color: var(--danger); border-color: var(--danger); }

  /* Small chrome buttons stay flat */
  .dlg-x, .dlg-x:hover:not(:disabled) { background: transparent; color: var(--paper); border: 0; box-shadow: none; rotate: none; }

  /* -----------------------------------------------------------------
     Tab strips: paper tabs; the open one a mustard tile, cut by hand
     ----------------------------------------------------------------- */

  .tabs { background: transparent; }
  .tabstrip { background: transparent; border-bottom: 0; padding: 4px 4px 0; gap: 4px; overflow: visible; }
  .tabstrip .tab {
    background: var(--paper-3);
    color: var(--ink);
    border: 0;
    border-radius: 4px 4px 0 0;
    font-weight: 800;
    padding: 4px 14px;
    box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08);
  }
  .tabstrip .tab:hover { background: var(--pc-mustard-pale); rotate: -1deg; }
  .tabstrip .tab.active {
    background: var(--pc-mustard);
    color: var(--ink);
    top: 0;
    font-weight: 900;
    rotate: var(--tile-tilt, -1.5deg);
    box-shadow: 2px -2px 0 rgba(0, 0, 0, 0.18);
    animation: pc-tile-slap 0.18s ease-out;
  }
  .tabstrip .tab:nth-child(4n+2) { --tile-tilt: 1.2deg; }
  .tabstrip .tab:nth-child(4n+3) { --tile-tilt: -0.8deg; }
  .tabstrip .tab:nth-child(4n+4) { --tile-tilt: 1.6deg; }

  /* The main tabs are titles: lettered in Luckiest Guy on the sunburst */
  #app > div > .tabs > .tabstrip .tab {
    font-family: "Luckiest Guy", "Nunito", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.05em;
    font-size: 14px;
    padding: 6px 18px 3px;
    background: var(--paper);
  }
  #app > div > .tabs > .tabstrip .tab.active { background: var(--pc-mustard); }

  .tabpanels {
    background: var(--paper);
    border-radius: 4px;
    box-shadow: 1px 2px 0 rgba(27, 42, 65, 0.08), 3px 6px 14px rgba(15, 30, 70, 0.28);
  }
  .tabpanel .tabstrip { background: var(--paper-2); padding-top: 5px; border-bottom: 2px dashed var(--border); }

  .pane-title, .toolbar { background: var(--paper-2); }
  .toolbar { border-bottom: 2px dashed var(--border); }
  .splitter-v, .splitter-h { background: var(--paper-3); border-color: var(--border); }

  /* -----------------------------------------------------------------
     Grids: navy heading strip, dashed cut line, mustard selection.
     Rows never tilt; state colours (row-ok/warn/bad, in-group) are kept.
     ----------------------------------------------------------------- */

  .dg-root { border: 2px solid var(--border); border-radius: 3px; background: var(--field); }
  .dg-root:focus-within { border-color: var(--ink); }
  .dg-head { background: var(--ink); border-bottom: 0; }
  .dg-hcell { color: var(--paper); font-weight: 900; letter-spacing: 0.03em; border-right-color: rgba(251, 247, 238, 0.18); }
  .dg-hcell.asc::after, .dg-hcell.desc::after { color: var(--pc-mustard); }
  .dg-filters { background: var(--paper-2); border-bottom: 2px dashed var(--border); }
  .dg-row { background: var(--field); border-bottom-color: #efe6d2; }
  .dg-row.alt { background: #f9f4e8; }
  .dg-cell { border-right-color: #efe6d2; }
  .dg-row.sel, .dg-row.sel.alt { background: var(--pc-mustard-pale) !important; box-shadow: inset 4px 0 0 var(--ink); }
  .dg-row.focus { outline: 2px dashed var(--ink); outline-offset: -2px; }
  .dg-footer { background: var(--paper-2); border-top: 2px dashed var(--border); color: var(--ink); font-weight: 700; }
  .chk { border: 2px solid var(--border-strong); border-radius: 3px; }
  .chk.on { color: var(--pc-green); border-color: var(--pc-green); }

  /* -----------------------------------------------------------------
     Context menus: a slip of paper with an ink edge and a hard shadow
     ----------------------------------------------------------------- */

  .cm {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: 4px 5px 0 rgba(27, 42, 65, 0.3);
    padding: 4px 0;
    rotate: -0.4deg;
  }
  .cm-item { font-weight: 700; color: var(--ink); }
  .cm-item.hover:not(.disabled) { background: var(--pc-mustard); color: var(--ink); }
  .cm-sep { height: 0; background: none; border-top: 2px dashed var(--border); }

  /* -----------------------------------------------------------------
     Dialogs: a paper card, the title a tilted navy banner, tape on top
     ----------------------------------------------------------------- */

  .dlg-overlay { background: rgba(15, 25, 50, 0.5); }
  .dlg {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.25), 0 14px 30px rgba(0, 0, 0, 0.3);
    overflow: visible;
  }
  .dlg.resizable { overflow: hidden; }
  .dlg-title {
    background: var(--ink);
    color: var(--paper);
    border-bottom: 0;
    margin: 6px 8px 2px;
    border-radius: 3px;
    rotate: -0.6deg;
    font-family: "Luckiest Guy", "Nunito", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.05em;
    font-size: 15px;
    padding: 6px 6px 3px 12px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .dlg.danger .dlg-title { background: var(--pc-coral); color: #fff; }
  .dlg-buttons { background: var(--paper-2); border-top: 2px dashed var(--border); }
  .dlg-error { background: #fbe4e2; color: #8e2430; border: 2px solid #f1b9b9; border-radius: 3px; font-weight: 700; }

  /* -----------------------------------------------------------------
     Status bar, busy box, toast
     ----------------------------------------------------------------- */

  .statusbar {
    background: var(--paper);
    color: var(--ink);
    border: 0;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2);
  }
  .busy-box { background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3); font-weight: 800; rotate: -1deg; }
  .spinner { border-color: var(--paper-3); border-top-color: var(--pc-coral); }
  .toast { background: var(--ink); color: var(--paper); font-weight: 800; border-radius: 4px; box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3); }
  .badge { border: 2px solid var(--border); font-weight: 800; }

  /* -----------------------------------------------------------------
     Login: a paper card taped to the sunburst
     ----------------------------------------------------------------- */

  .login-box {
    position: relative;
    background: var(--paper);
    border: 0;
    border-radius: 3px;
    box-shadow: 1px 2px 0 rgba(27, 42, 65, 0.08), 6px 10px 22px rgba(15, 30, 70, 0.35);
    rotate: -0.8deg;
    padding: 26px 24px 22px;
  }
  .login-box::before {
    content: "";
    position: absolute;
    top: -0.9rem;
    left: 50%;
    width: 7rem;
    height: 1.7rem;
    margin-left: -3.5rem;
    background: var(--tape);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    rotate: -4deg;
  }
  .login-box h1 {
    display: inline-block;
    font-family: "Luckiest Guy", "Nunito", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.05em;
    font-size: 26px;
    background: var(--ink);
    color: var(--paper);
    padding: 6px 14px 2px;
    border-radius: 3px;
    rotate: -2deg;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25);
  }
  .login-box p { color: var(--muted); font-weight: 700; margin-top: 10px; }
  .login-box label { color: var(--ink); font-weight: 800; }
  .login-box .err { color: var(--danger); font-weight: 800; }
}

/* The active tab lands with a little slap, like paper put down on the table */
@keyframes pc-tile-slap {
  from { transform: scale(1.12) rotate(-3deg); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[data-theme="papercut"]) .tabstrip .tab.active { animation: none; }
  :where(html[data-theme="papercut"]) * { transition: none !important; }
}

/* WinForms layout engine: controls keep their designer size, so buttons stay compact
   (thin border, no letter-spacing) and wrap like WinForms when the caption is long. */
:where(html[data-theme="papercut"]) .wf-form button.wf {
  border-width: 1px; font-weight: 700; letter-spacing: 0; padding: 0 3px;
  white-space: normal; line-height: 1.1; text-align: center;
}
:where(html[data-theme="papercut"]) .wf-form .wf-tbutton,
:where(html[data-theme="papercut"]) .wf-form .wf-tbutton:hover:not(:disabled) {
  background: transparent; color: inherit; border: 1px solid transparent; box-shadow: none; rotate: none; font-weight: normal;
}
:where(html[data-theme="papercut"]) .wf-form .wf-tbutton:hover:not(:disabled) { border-color: var(--ink); }

/* =====================================================================
   The WinForms windows (js/bis/ui/winforms.js) in paper: the main window
   floats on the sunburst, its tab pages are paper cards, the open tab a
   mustard tile, tool strips paper slips with a dashed cut, the status
   strip a navy band. The grids' row colours are the app's own and carry
   meaning, so they stay; only the selection turns mustard.
   ===================================================================== */
@scope (html[data-theme="papercut"]) {
  #app { inset: 6px 8px 8px; }
  #app > .wf-form { background: transparent; font-family: var(--font); font-weight: 600; }
  .wf-form button, .wf-form input, .wf-form select, .wf-form textarea { font-family: var(--font); }

  /* Split container: two cards with a coral seam between them */
  .wf-SplitContainer, .wf-splitpanel { background: transparent; }
  .wf-splitbar-v, .wf-splitbar-h { background: transparent; }
  .wf-splitbar-v::after { content: ''; position: absolute; left: 50%; top: 30%; bottom: 30%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--pc-coral); opacity: 0.8; }
  .wf-splitbar-h::after { content: ''; position: absolute; top: 50%; left: 30%; right: 30%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--pc-coral); opacity: 0.8; }

  /* Tab controls: paper tabs, the open one a hand-cut mustard tile */
  .wf-TabControl { background: transparent; }
  .wf-tabheader { border-bottom: 0; gap: 3px; padding-left: 3px; overflow: visible; }
  .wf-tab {
    background: var(--paper-3); color: var(--ink); border: 0; border-radius: 4px 4px 0 0;
    font-weight: 800; padding: 2px 10px 3px; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08);
  }
  .wf-tab:hover { background: var(--pc-mustard-pale); rotate: -1deg; }
  .wf-tab.active {
    background: var(--pc-mustard); font-weight: 900; top: 0; padding-bottom: 3px;
    rotate: var(--tile-tilt, -1.5deg); box-shadow: 2px -2px 0 rgba(0, 0, 0, 0.18);
    animation: pc-tile-slap 0.18s ease-out;
  }
  .wf-tab:nth-child(4n+2) { --tile-tilt: 1.2deg; }
  .wf-tab:nth-child(4n+3) { --tile-tilt: -0.8deg; }
  .wf-tab:nth-child(4n+4) { --tile-tilt: 1.6deg; }
  /* The window's two big tab controls are titles, lettered on the sunburst */
  [data-name=leftTabControl] > .wf-tabheader > .wf-tab,
  [data-name=rightTabControl] > .wf-tabheader > .wf-tab {
    font-family: "Luckiest Guy", "Nunito", sans-serif; font-weight: 400; font-synthesis: none;
    letter-spacing: 0; font-size: 12px; padding: 4px 6px 1px; background: var(--paper);
  }
  [data-name=leftTabControl] > .wf-tabheader > .wf-tab.active,
  [data-name=rightTabControl] > .wf-tabheader > .wf-tab.active { background: var(--pc-mustard); }
  .wf-tabpage {
    background: var(--paper); border: 0; border-radius: 0 4px 4px 4px;
    box-shadow: 1px 2px 0 rgba(27, 42, 65, 0.08), 3px 6px 14px rgba(15, 30, 70, 0.28);
  }
  /* Tab pages inside a page are flatter: paper on paper */
  .wf-tabpage .wf-tabpage { background: var(--paper-2); box-shadow: none; border-bottom: 2px dashed var(--border); }

  /* Tool strips: a paper slip with a dashed cut below; the main window's own strip a card */
  .wf-toolstrip { background: var(--paper-2); border-bottom: 2px dashed var(--border); font-weight: 800; }
  #app > .wf-form > .wf-toolstrip { background: var(--paper); border: 0; border-radius: 4px; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2); }
  .wf-tlabel { color: var(--ink); font-weight: 800; }
  .wf-tsep { background: none; border-left: 2px dashed var(--border); width: 0; }
  .wf-tbutton img { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.15)); }

  /* Status strip: a navy band, the captions in mustard */
  .wf-statusstrip { background: var(--ink); color: var(--paper); border: 0; border-radius: 4px; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25); }
  .wf-statusstrip .wf-tlabel { color: var(--paper); font-weight: 700; }
  .wf-statusstrip .wf-tlabel[style*="bold"] { color: var(--pc-mustard); }
  .wf-statusstrip .wf-tbutton { color: var(--paper); }

  /* Group boxes: a dashed cut-out with a lettered label */
  .wf-group { border: 2px dashed var(--border); border-radius: 4px; }
  .wf-group > legend { font-family: "Luckiest Guy", "Nunito", sans-serif; font-weight: 400; letter-spacing: 0.05em; color: var(--ink); font-size: 12px; }
  .wf-label { color: var(--ink); font-weight: 700; }
  .wf-check input { accent-color: var(--pc-coral); }

  /* The main grids: navy heading strip; selection mustard, the app's row colours otherwise */
  .wg-main .dg-root { border: 2px solid var(--border); border-radius: 3px; }
  .wg-main .dg-cell.wg-rowheader { background: var(--paper-2); color: var(--ink); font-weight: 800; }
  .wg-main .dg-hcell.wg-hfiltered { background: var(--pc-mustard); color: var(--ink); }

  /* Forms in dialogs sit on the paper card */
  .wf-dialog .wf-host > .wf-form { background: var(--paper); }

  /* The style picker on the menu bar */
  .menubar .mb-style { font-family: "Luckiest Guy", "Nunito", sans-serif; font-weight: 400; letter-spacing: 0.05em; }
}

/* The main grids' selection in paper: mustard with ink (outside @scope, to outrank the
   system-highlight rule in bis.css). */
html[data-theme="papercut"] body .wf-form .wg-main .dg-row.sel,
html[data-theme="papercut"] body .wf-form .wg-main .dg-row.sel.alt {
  background: var(--pc-mustard) !important; color: var(--ink); box-shadow: inset 4px 0 0 var(--ink);
}
html[data-theme="papercut"] body .wf-form .wg-main .dg-row.focus { outline: 2px dashed var(--ink); outline-offset: -2px; }