/* =====================================================================
   WORK ORDERS — the stylesheet for index.html (the folder app at /).

   TO CHANGE THE LOOK, START IN SECTION 1. Every color, the font, the text
   sizes, the corner rounding and the spacing are named there once and used
   everywhere below — change a value there and every screen follows.
   Section 2 is the same colors for phones set to dark mode.

   The look is Adam's Fillout form (form.fillout.com/t/2haX62Jpvgus): white,
   thin gray lines, one accent (Jack Powell's red, from the logo), one text size for what you read and tap.
   (/screens and /legacy have their own styles; nothing here touches them.)

   THE RULE: one component per job. Anything listed is a row (section 7);
   anything you add a file with is the drop box (section 6); every screen and
   pop-up ends in the same footer (section 5). A new screen uses these — it
   does not get its own sizes.

     1. Settings — colors, font, sizes, rounding, spacing
     2. Dark mode
     3. Page basics and headings
     4. Fields and buttons
     5. The footer: Save & Close 2/4, Close 1/4, Delete 1/4
     6. The drop box
     7. Rows: files, complaints, assignments, the packet, work orders
     8. Home: the role buttons and the work order list
     9. A work order (the folder)
    10. Pop-up cards
    11. While a file uploads, and the message at the bottom
   ===================================================================== */


/* 1. SETTINGS ---------------------------------------------------------- */
:root{
  /* Colors */
  --page:#FFFFFF;          /* page background */
  --field:#FFFFFF;         /* boxes, rows, inputs */
  --ink:#374151;           /* normal text, labels */
  --strong:#111827;        /* what you typed, row titles, headings */
  --muted:#6B7280;         /* the second line of a row, hints */
  --line:#E5E7EB;          /* dividers, the edge of a list */
  --line-2:#D1D5DB;        /* the edge of a field, a button, a drop box */
  --accent:#F91713;        /* the one accent — Jack Powell's red, from the logo: the main button, "New" */
  --accent-ink:#FFFFFF;    /* text on the accent */
  --accent-soft:#FEF2F2;   /* a file dragged over a drop box, the spinner track */
  --accent-line:#FECACA;
  --green:#15803D;         /* done: "Completed", "Packet ready" */
  --green-soft:#F0FDF4;
  --green-line:#BBF7D0;
  --amber:#B45309;         /* something still owed: "2 missing", "Assigned" */
  --amber-soft:#FFFBEB;
  --amber-line:#FDE68A;
  --red:#B91C1C;           /* Delete, a held photo, a refused build */
  --red-soft:#FEF2F2;
  --gray-soft:#F3F4F6;     /* photo placeholders, file badges, "Waiting" */
  --scrim:rgba(17,24,39,.45);  /* the shade behind a pop-up */

  /* Font */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Text sizes — three, and only three */
  --text:16px;             /* everything you read or tap: labels, fields, buttons, row titles
                              (16px also stops an iPhone zooming into a field) */
  --text-sm:14px;          /* the second line of a row, dates, pills, hints, messages */
  --h1:20px;               /* the title of a pop-up */

  /* Corner rounding — two */
  --round:8px;             /* lists, drop boxes, pop-ups */
  --round-sm:6px;          /* fields, buttons, thumbnails */

  /* Spacing and sizes */
  --gutter:16px;           /* the screen's left and right margin */
  --width:560px;           /* widest the content gets on a big screen */
  --control:44px;          /* every field and button is this tall */
  --thumb:44px;            /* a row's picture */
  --gap:18px;              /* between one field or section and the next */
  --gap-sm:8px;            /* between a label and its field; between buttons */
  --pad:12px;              /* inside a row, a field, a box */
}

/* 2. DARK MODE ---------------------------------------------------------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --page:#111318; --field:#1A1D24; --ink:#D1D5DB; --strong:#F3F4F6; --muted:#9CA3AF;
  --line:#2A2E37; --line-2:#3A3F4A; --accent:#F87171; --accent-ink:#1A0B0B; --accent-soft:#2A1616;
  --accent-line:#7F1D1D; --amber:#FBBF24; --amber-soft:#261D0B; --amber-line:#78350F;
  --green:#4ADE80; --green-soft:#12241A; --green-line:#14532D;
  --red:#F87171; --red-soft:#2A1616; --gray-soft:#20242C;
}}

/* 3. PAGE BASICS AND HEADINGS ------------------------------------------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--ink);font:var(--text)/1.5 var(--font);
  padding-inline:var(--gutter);padding-block:0 110px}
.wrap{max-width:var(--width);margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:var(--h1);font-weight:600;color:var(--strong);margin:0;line-height:1.3;overflow-wrap:anywhere}
ul{list-style:none;margin:0;padding:0}
.meta{font-size:var(--text-sm);color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:48px 0}

/* 4. FIELDS AND BUTTONS ------------------------------------------------- */
.label{display:block;font-size:var(--text);font-weight:500;color:var(--ink);margin-bottom:var(--gap-sm)}
.form{display:grid;gap:var(--gap)}
.sec{display:grid;gap:var(--gap-sm);grid-template-columns:minmax(0,1fr)}   /* a label and what is under it */
.sec .label{margin-bottom:0}
/* every field the same: full width, never wider, text on the left, one height */
.input{display:block;width:100%;max-width:100%;min-width:0;min-height:var(--control);
  font:var(--text) var(--font);line-height:1.4;color:var(--strong);background:var(--field);
  border:1px solid var(--line-2);border-radius:var(--round-sm);padding:10px var(--pad);text-align:left}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.input:disabled{color:var(--ink);background:var(--gray-soft)}
input.input.date{max-width:200px}   /* a date is short */
/* an iPhone draws a date field centered and wider than its box unless told not to */
input.input[type=date]{-webkit-appearance:none;appearance:none}
input.input::-webkit-date-and-time-value{text-align:left;margin:0}
/* …and a dropdown at half height with its own arrows; this one matches the rest */
select.input{-webkit-appearance:none;appearance:none;padding-right:40px;
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center}
textarea.input{min-height:88px;resize:vertical}
textarea.input.short{min-height:var(--control)}   /* grows with what is typed */

/* buttons: the accent for the one thing to do, white for the rest */
.primary,.secondary{display:grid;place-items:center;width:100%;min-height:var(--control);
  border-radius:var(--round-sm);padding:0 var(--pad);font-size:var(--text);font-weight:500;
  text-align:center;white-space:nowrap}
.primary{border:0;color:var(--accent-ink);background:var(--accent)}
.secondary{border:1px solid var(--line-2);background:var(--field);color:var(--strong)}
.secondary.del{color:var(--red)}
.primary:disabled,.secondary:disabled{opacity:.45;cursor:default}
.secondary.create{width:auto;justify-self:start}   /* "+ Create Complaint" */
.link{background:none;border:0;padding:4px 0;font-size:var(--text);font-weight:500;color:var(--accent)}

/* 5. THE FOOTER --------------------------------------------------------- */
/* Pinned to the bottom of a screen (.dock) and of every pop-up (.cfoot):
   the action 2/4, Close 1/4, Delete 1/4. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--page);
  border-top:1px solid var(--line);padding:var(--pad) var(--gutter) calc(var(--pad) + env(safe-area-inset-bottom,0px))}
.dock > .primary{max-width:calc(var(--width) - 2 * var(--gutter));margin:0 auto}   /* New work order */
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-sm);width:100%;
  max-width:calc(var(--width) - 2 * var(--gutter));margin:0 auto}
.foot .primary{grid-column:span 2}
.foot.nodel .primary{grid-column:span 3}   /* nothing here to delete */
.foot.nomain [data-x]{grid-column:span 3}  /* nothing to save, something to delete */
.foot.only [data-x]{grid-column:span 4}    /* nothing to do but close */

/* 6. THE DROP BOX ------------------------------------------------------- */
/* The one way a file comes in: a folder, "Drag & drop a file or browse". */
.drop{position:relative;display:grid;place-items:center;gap:6px;border:2px dashed var(--line-2);
  border-radius:var(--round);padding:20px var(--pad);background:var(--field);color:var(--muted);
  font-size:var(--text);text-align:center;cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}   /* a file is being dragged over it */
.drop u{color:var(--ink)}
.drop .fold{width:24px;height:24px;fill:var(--muted)}
.drop.still{cursor:default}   /* a placeholder, not a box to tap: the packet before it is built */
/* the file input: the box opens it; it never takes a tap itself */
.drop input{position:absolute;width:1px;height:1px;opacity:0;left:0;top:0;pointer-events:none;clip-path:inset(50%)}

/* 7. ROWS --------------------------------------------------------------- */
/* A list is a box of rows. A row: a picture (optional), a title and its
   pill, a second line, a date, and ›. Files, complaints, assignments, the
   packet and the work order list are all this. */
.files{display:grid;border:1px solid var(--line);border-radius:var(--round);overflow:hidden;background:var(--field)}
.files:empty{display:none}
.tile{display:flex;align-items:center;gap:var(--pad);width:100%;min-width:0;background:none;border:0;
  border-top:1px solid var(--line);padding:10px var(--pad);text-align:left;text-decoration:none;color:inherit}
.tile:first-child{border-top:0}
.tile .pic{width:var(--thumb);height:var(--thumb);flex:none;border-radius:var(--round-sm);overflow:hidden;
  background:var(--gray-soft);display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;color:var(--muted)}
.tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.tile .t{flex:1;min-width:0;display:grid;gap:2px;min-height:var(--thumb);align-content:center}   /* a row is never shorter than a picture's row */
.tile .n{font-size:var(--text);font-weight:500;color:var(--strong);line-height:1.35;overflow-wrap:anywhere}
.tile .c,.tile .d{font-size:var(--text-sm);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.tile .c.flag{color:var(--red)}
.chev{flex:none;color:var(--muted);font-size:22px;line-height:1}
/* the pill after a row's title: New, 2 missing, Completed, Assigned… */
.pill{display:inline-block;margin-left:8px;padding:0 8px;border-radius:999px;border:1px solid transparent;
  font-size:var(--text-sm);font-weight:500;line-height:1.5;vertical-align:1px;white-space:nowrap}
.pill.new{background:var(--accent);color:var(--accent-ink)}                                          /* just came in; your move */
.pill.miss{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}       /* something still owed */
.pill.ok{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}            /* done */
.pill.wait{background:var(--gray-soft);color:var(--muted)}                                       /* someone else's move */

/* 8. HOME --------------------------------------------------------------- */
.gate{min-height:80vh;display:grid;place-items:center}
/* the dealership's logo over the role buttons, as wide as they are; on a
   white plate so its black lettering shows in dark mode too */
.logo{display:block;width:100%;height:auto;background:#FFFFFF;border-radius:var(--round);padding:var(--pad);margin-bottom:var(--gap)}
.roles{width:100%;max-width:320px;display:grid;gap:var(--gap-sm)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--page);
  padding-block:20px var(--pad);display:grid;gap:var(--pad)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--pad)}
.who{font-size:var(--text);font-weight:500;color:var(--strong)}
/* Needs me / All */
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--gray-soft);border-radius:var(--round-sm);padding:3px}
.seg button{border:0;background:none;border-radius:var(--round-sm);min-height:calc(var(--control) - 6px);
  font-size:var(--text);font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--field);color:var(--strong);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* 9. A WORK ORDER (THE FOLDER) ------------------------------------------ */
.page{position:fixed;inset:0;z-index:10;background:var(--page);overflow:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gutter) calc(150px + env(safe-area-inset-bottom,0px))}
.folder{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
/* why a packet was not built */
.stopped{background:var(--red-soft);color:var(--red);border-radius:var(--round);padding:var(--pad);display:grid;gap:6px}
.stopped ul{padding-left:18px;list-style:disc;font-size:var(--text-sm)}

/* 10. POP-UP CARDS ------------------------------------------------------ */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20}
.card{position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));
  bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:540px;margin:0 auto;z-index:21;
  background:var(--page);border-radius:var(--round);overflow:hidden;display:flex;flex-direction:column}
.cbody{flex:1;overflow:auto;padding:20px;display:grid;gap:var(--gap);align-content:start;grid-template-columns:minmax(0,1fr)}
.cfoot{padding:var(--pad) 20px calc(var(--pad) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.edit{display:grid;gap:var(--gap)}   /* a file's description, what it is, its complaint */
/* the photo's space is held before it arrives, so nothing under it moves as it loads */
.card img.big{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--gray-soft);
  border-radius:var(--round-sm);display:block}
.docbig{aspect-ratio:4/3;border-radius:var(--round-sm);background:var(--gray-soft);display:grid;
  place-items:center;font-weight:600;color:var(--muted);text-align:center;padding:var(--pad)}
/* why a file is held: blurry, or a VIN that disagrees */
.flag{color:var(--red);font-weight:500}
/* "Check what AI read" before a build */
.check{display:grid;gap:10px;margin:0}
.check div{display:grid;gap:2px;border-bottom:1px solid var(--line);padding-bottom:8px}
.check dt{font-size:var(--text-sm);color:var(--muted)}
.check dd{margin:0;color:var(--strong);white-space:pre-wrap;overflow-wrap:anywhere}

/* 11. WHILE A FILE UPLOADS, AND THE MESSAGE AT THE BOTTOM --------------- */
.working{position:fixed;inset:0;z-index:30;background:var(--scrim);display:grid;place-items:center;padding:var(--gutter)}
.working .box{background:var(--page);border-radius:var(--round);padding:24px;display:grid;justify-items:center;
  gap:8px;text-align:center;max-width:320px;width:100%}
.working b{font-weight:600;color:var(--strong)}
.working span:not(.spin){font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);
  animation:spin .9s linear infinite;margin-bottom:6px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
.toast{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(84px + env(safe-area-inset-bottom,0px));
  max-width:calc(var(--width) - 2 * var(--gutter));margin:0 auto;background:var(--strong);color:var(--page);
  border-radius:var(--round-sm);padding:var(--pad);font-size:var(--text-sm);z-index:40}