/*
 * File:     kikoworks/08_case_studies/case_i_selyo_laundry/shop.css
 * Project:  KikoWorks (Case I, practice project)
 * Purpose:  Styles for the Selyo Laundry desk and status demo pages.
 * Author:   John Francis Sagadraca
 * Created:  2026-10-03 (first commit)
 * Notes:    Uses the client's own brand, not KikoWorks'.
 */
/* Selyo Laundry — order-ticket tracker. This is the CLIENT's brand, not
   KikoWorks' — clean laundromat blue/white, its own type pairing.
   Shared by desk.html (staff) and status.html (customer). */
:root{
  --paper:#F4F9FB; --ink:#17293A; --muted:#54697C; --line:#D6E4EC;
  --suds:#2E6B8F; --suds-dk:#1E4F63; --card:#FFFFFF;
  --ready:#21633d; --notready:#805211; --done:#4c5563;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;}
.wrap{max-width:720px;margin:0 auto;padding:0 20px;}
a{color:var(--suds);}
:focus-visible{outline:2px solid var(--suds);outline-offset:2px;}

header.top{background:var(--suds-dk);color:#fff;padding:22px 0;}
header.top .wrap{display:flex;align-items:center;gap:12px;}
.seal{width:34px;height:34px;border-radius:50%;background:var(--suds);display:grid;place-items:center;font-weight:700;font-size:.8rem;letter-spacing:.02em;flex:0 0 auto;border:2px solid rgba(255,255,255,.55);}
.wordmark{font-weight:600;font-size:1.15rem;}
.wordmark small{display:block;font-weight:400;font-size:.72rem;color:rgba(255,255,255,.75);letter-spacing:.06em;text-transform:uppercase;margin-top:1px;}

main{padding:28px 0 40px;}
h1{font-size:1.4rem;font-weight:600;margin-bottom:6px;}
.sub{color:var(--muted);font-size:.95rem;margin-bottom:22px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:18px;}
.card h2{font-size:1rem;font-weight:600;margin-bottom:14px;}

.field{display:block;margin-bottom:12px;}
.field span{display:block;font-size:.78rem;font-weight:600;color:var(--suds-dk);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.row{display:flex;gap:12px;}
.row .field{flex:1;}
@media (max-width:480px){.row{flex-direction:column;gap:0;}}
input,textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:9px 11px;}
input:focus,textarea:focus{border-color:var(--suds);outline:none;}
textarea{resize:vertical;min-height:60px;}

button{font:inherit;font-weight:600;font-size:.92rem;border:none;border-radius:6px;padding:10px 20px;cursor:pointer;}
.btn-primary{background:var(--suds);color:#fff;}
.btn-primary:hover{background:var(--suds-dk);}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 13px;font-size:.82rem;}
.btn-ghost:hover{border-color:var(--suds);color:var(--suds);}
.err{color:#B3452D;font-size:.85rem;margin-top:6px;}

.confirm{background:#EAF5EE;border:1px solid #BFE0CB;border-radius:8px;padding:14px 16px;margin-bottom:18px;font-size:.92rem;}
.confirm b{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;color:var(--suds-dk);}

/* Grid, not flex: fixed id/status columns keep every row's status pill
   aligned to the same x position regardless of label length ("not ready"
   vs "ready for pickup") or item-text length — flex let both drift per row. */
.ticket-row{display:grid;grid-template-columns:72px 1fr 132px auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.ticket-row:last-child{border-bottom:none;}
.ticket-row .id{font-family:ui-monospace,Menlo,monospace;font-weight:600;font-size:.9rem;color:var(--suds-dk);}
.ticket-row .meta{min-width:0;}
.ticket-row .meta .nm{font-weight:600;font-size:.92rem;}
.ticket-row .meta .ln{color:var(--muted);font-size:.82rem;text-wrap:pretty;}
.pill{display:inline-block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.pill.not_ready{background:#FBEFDD;color:var(--notready);}
.pill.ready{background:#E1F2E7;color:var(--ready);}
.pill.picked_up{background:#ECEEF1;color:var(--done);}
.ticket-row .pill{width:100%;text-align:center;box-sizing:border-box;}
.ticket-row .actions{justify-self:end;}

/* Below ~640px (which is what the case-study page's embedded iframe
   actually renders at, even on a desktop-width browser window — a 4-column
   grid has no room there and text collides). Stack instead of cramming. */
@media (max-width:640px){
  .ticket-row{grid-template-columns:1fr auto;grid-template-areas:"id pill" "meta meta" "actions actions";row-gap:6px;column-gap:10px;}
  .ticket-row .id{grid-area:id;}
  .ticket-row .pill{grid-area:pill;width:auto;justify-self:end;}
  .ticket-row .meta{grid-area:meta;}
  .ticket-row .actions{grid-area:actions;justify-self:start;}
}

.empty{color:var(--muted);font-size:.9rem;padding:8px 0;}
.foot-note-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.foot-note-row span{color:var(--muted);font-size:.82rem;}

/* status.html lookup result */
.lookup{display:flex;gap:10px;}
.lookup input{flex:1;}
.result{margin-top:18px;}
.result .id-big{font-family:ui-monospace,Menlo,monospace;font-size:1.3rem;font-weight:700;color:var(--suds-dk);}
.result .pill{font-size:.85rem;padding:5px 14px;margin-top:8px;}
.result .lines{margin-top:12px;font-size:.92rem;color:var(--muted);}
.result .lines div{margin-bottom:3px;}
.storage-note{background:#FDF3E3;border:1px solid var(--notready);border-radius:8px;color:var(--ink);font-size:.9rem;padding:10px 14px;margin:18px 0 0;}