:root{--graphite:#2B2F36;--carib:#0A66C2;--tech:#4DA3FF;--orange:#FF8A00;--light:#E6E8EC;--white:#FFFFFF;--muted:#667085;--good:#0a7a45;--danger:#b42318}
*{box-sizing:border-box}body{margin:0;background:#f7f9fc;color:var(--graphite);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
a{color:var(--carib)}.demo-banner{background:var(--graphite);color:#fff;padding:8px 18px;text-align:center;font-size:13px}.demo-banner strong{color:#ffb35b}
.topbar{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-bottom:1px solid var(--light);position:sticky;top:0;z-index:5}.brand img{height:72px;max-width:580px;object-fit:contain}.session-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}.session-meta span{background:#edf5ff;padding:6px 10px;border-radius:999px}
.nav{display:flex;flex-wrap:wrap;gap:4px;overflow-x:visible;background:var(--carib);padding:0 24px}.nav a{color:#fff;text-decoration:none;padding:11px 10px;white-space:nowrap;font-size:14px}.nav a:hover{background:rgba(255,255,255,.12)}
.container{max-width:1280px;margin:0 auto;padding:28px}.page-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}.page-head h1,.auth-card h1{font-size:34px;line-height:1.1;margin:.25rem 0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--carib)}
.card,.auth-card{background:#fff;border:1px solid var(--light);border-radius:14px;padding:20px;box-shadow:0 8px 28px rgba(43,47,54,.05)}.auth-card{max-width:760px;margin:25px auto}.cards .card h2{margin:.55rem 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-bottom:20px}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}.metric{background:#fff;border:1px solid var(--light);border-left:4px solid var(--carib);border-radius:12px;padding:18px}.metric strong{display:block;font-size:28px;color:var(--carib)}.metric span{color:var(--muted);font-size:13px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--light);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#475467}.table-wrap{overflow-x:auto}
form p{display:grid;gap:6px}label{font-weight:650}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #cfd5df;border-radius:8px;background:#fff;color:var(--graphite)}input[type=checkbox]{width:auto;margin-right:8px}button,.button{display:inline-block;background:var(--carib);color:#fff;border:0;border-radius:8px;padding:10px 15px;font-weight:750;text-decoration:none;cursor:pointer}button:hover,.button:hover{filter:brightness(.94)}summary{font-weight:800;cursor:pointer}
.pill{display:inline-block;border-radius:999px;padding:4px 8px;background:#eef4fb;color:var(--carib);font-size:11px;font-weight:800}.pill.good{background:#e9f8f0;color:var(--good)}.notice{border-left:4px solid var(--orange);background:#fff8ef;padding:12px 14px;margin:14px 0}.message{padding:12px 14px;border-radius:8px;margin-bottom:14px;background:#edf5ff}.message.error{background:#fff0ee;color:var(--danger)}.message.success{background:#ecfdf3;color:var(--good)}
.muted{color:var(--muted);font-size:13px}.terms{white-space:pre-wrap;font:inherit;background:#fbfcfe;border:1px solid var(--light);padding:16px;border-radius:8px}.big-number{font-size:42px;color:var(--carib);font-weight:850}
footer{max-width:1280px;margin:10px auto 40px;padding:20px 28px;color:var(--muted);border-top:1px solid var(--light)}
@media(max-width:760px){.topbar{padding:10px 14px;align-items:flex-start;gap:10px}.brand img{height:54px;max-width:55vw}.container{padding:18px 14px}.nav{padding:0 8px;flex-wrap:nowrap;overflow-x:auto}.page-head h1,.auth-card h1{font-size:28px}}

.inline-form{display:inline}.link-button{background:none!important;color:var(--carib)!important;padding:0!important;font-weight:650!important;text-decoration:underline;border:0}

.participant-number{font-size:2rem;font-weight:900;letter-spacing:.08em;color:var(--carib);background:#eef5ff;border:1px solid #cfe2fa;padding:16px;border-radius:10px;text-align:center;margin:16px 0}
.compact-form{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,1fr) auto;gap:6px;margin:0 0 8px}.compact-form input,.compact-form select,.compact-form button{min-width:0}
@media(max-width:900px){.compact-form{grid-template-columns:1fr}}

/* CaribFix 0.3.0 R13 — Customer / Device Intake responsive UX.
   Kept in the self-hosted stylesheet so the layout works with strict CSP. */
.customer-intake-card,.device-intake-card{padding:18px 20px}
.customer-intake-heading{margin:0 0 4px;font-size:1.05rem}
.customer-intake-subtext{margin:0 0 14px;color:var(--muted)}
.customer-intake-grid{
  display:grid;
  grid-template-columns:minmax(240px,1.2fr) minmax(170px,.72fr) minmax(280px,1.35fr);
  grid-template-areas:
    "name phone email"
    "company address address";
  gap:12px 16px;
  align-items:start
}
.customer-field,.device-field{display:grid;gap:5px;min-width:0}
.customer-field-name{grid-area:name}
.customer-field-phone{grid-area:phone}
.customer-field-email{grid-area:email}
.customer-field-company{grid-area:company}
.customer-field-address{grid-area:address}
.customer-intake-grid input,.customer-intake-grid textarea,.customer-intake-grid select,
.device-intake-grid input,.device-intake-grid textarea,.device-intake-grid select{
  width:100%;box-sizing:border-box;margin:0
}
.customer-intake-grid textarea{min-height:72px;resize:vertical}
.intake-help{color:var(--muted);font-size:12px;line-height:1.35}
.intake-errors{color:var(--danger);font-size:13px;margin:2px 0 0}
.intake-errors ul{margin:0;padding-left:18px}
.intake-actions,.device-actions{
  display:flex;justify-content:flex-end;margin-top:14px
}
.intake-actions button{min-width:300px}
.device-actions button{min-width:330px}

.device-intake-grid{
  display:grid;
  grid-template-columns:minmax(180px,.75fr) minmax(220px,1fr) minmax(260px,1.15fr);
  grid-template-areas:
    "customer customer customer"
    "category brand model"
    "serial serial imei"
    "condition accessories accessories"
    "notes notes notes";
  gap:12px 16px;
  align-items:start
}
.device-customer{grid-area:customer}
.device-category{grid-area:category}
.device-brand{grid-area:brand}
.device-model{grid-area:model}
.device-serial{grid-area:serial}
.device-imei{grid-area:imei}
.device-condition{grid-area:condition}
.device-accessories{grid-area:accessories}
.device-notes{grid-area:notes}
.device-intake-grid textarea{min-height:72px;resize:vertical}
.device-condition textarea,.device-accessories textarea{min-height:94px}
.device-notes textarea{min-height:80px}

@media(max-width:1050px){
  .customer-intake-grid{
    grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);
    grid-template-areas:
      "name phone"
      "email email"
      "company address"
  }
  .device-intake-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "customer customer"
      "category brand"
      "model serial"
      "imei imei"
      "condition accessories"
      "notes notes"
  }
}
@media(max-width:700px){
  .customer-intake-grid{
    grid-template-columns:1fr;
    grid-template-areas:"name" "phone" "email" "company" "address"
  }
  .device-intake-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "customer" "category" "brand" "model" "serial" "imei"
      "condition" "accessories" "notes"
  }
  .intake-actions,.device-actions{justify-content:stretch}
  .intake-actions button,.device-actions button{width:100%;min-width:0}
}

/* CaribFix 0.3.0 R14 — Repair Ticket Intake responsive UX.
   Uses the same self-hosted CSP-safe presentation model as R13 intake. */
.ticket-intake-card{padding:18px 20px;border-top:4px solid var(--carib)}
details.ticket-intake-card>summary{font-size:1.05rem}
.ticket-intake-direct-help{margin:10px 0 14px}
.ticket-intake-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.35fr) minmax(190px,.8fr) minmax(220px,1fr);
  grid-template-areas:
    "item item item"
    "location assigned priority"
    "quote issue issue";
  gap:12px 16px;
  align-items:start
}
.ticket-field{display:grid;gap:5px;min-width:0}
.ticket-item{grid-area:item}
.ticket-location{grid-area:location}
.ticket-assigned{grid-area:assigned}
.ticket-priority{grid-area:priority}
.ticket-quote{grid-area:quote}
.ticket-issue{grid-area:issue}
.ticket-intake-grid input,.ticket-intake-grid textarea,.ticket-intake-grid select{
  width:100%;box-sizing:border-box;margin:0
}
.ticket-intake-grid textarea{min-height:94px;resize:vertical}
.ticket-actions{display:flex;justify-content:flex-end;margin-top:14px}
.ticket-actions button{min-width:220px}
.existing-ticket-heading{margin:6px 0 12px}

@media(max-width:1050px){
  .ticket-intake-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "item item"
      "location assigned"
      "priority quote"
      "issue issue"
  }
}
@media(max-width:700px){
  .ticket-intake-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "item" "location" "assigned" "priority" "quote" "issue"
  }
  .ticket-actions{justify-content:stretch}
  .ticket-actions button{width:100%;min-width:0}
}

/* CaribFix 0.3.0 R15 — consistent monetary display. */
.money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* CaribFix 0.3.0 R16 — Owner navigation / Dashboard terminology.
   Desktop navigation wraps so broad legitimate role access remains discoverable.
   Narrow/mobile navigation intentionally keeps horizontal scrolling. */
@media(min-width:761px){
  .nav{align-content:flex-start}
}