/* ============================================================
   ClearBay v4.0 — Global Design System
   Dark maritime aesthetic: void black, gold, electric teal
   ALL rules scoped to .clearbay-app — NEVER bleeds into WP theme
   ============================================================ */

/* ── v4 Design Tokens ───────────────────────────────────────── */
.clearbay-app {
  --void:   #040608;
  --bg:     #080B10;
  --bg-1:   #0C1018;
  --bg-2:   #101621;
  --bg-3:   #151E2E;
  --bg-4:   #1A2438;
  --l0: rgba(255,255,255,.04);
  --l1: rgba(255,255,255,.08);
  --l2: rgba(255,255,255,.13);
  --l3: rgba(255,255,255,.22);
  --gold:    #E9AC1E;
  --gold-lt: #F6CB50;
  --gold-dk: #BC8A0E;
  --ga10: rgba(233,172,30,.10);
  --ga20: rgba(233,172,30,.20);
  --ga35: rgba(233,172,30,.35);
  --teal:    #00CDB8;
  --teal-lt: #30E8D4;
  --ta10: rgba(0,205,184,.10);
  --ta20: rgba(0,205,184,.20);
  --em:  #0FE389; --em12: rgba(15,227,137,.12);
  --rb:  #EF3E3E; --rb12: rgba(239,62,62,.12);
  --am:  #F5A620; --am12: rgba(245,166,32,.12);
  --vi:  #A48CFF; --vi12: rgba(164,140,255,.12);
  --bl:  #5BA4FF; --bl12: rgba(91,164,255,.12);
  --t0: #EEF2FD; --t1: #C4D0E8; --t2: #738098;
  --t3: #3A4F6A; --t4: #1B2C42;
  --display: 'Playfair Display', serif;
  --body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'DM Mono', 'JetBrains Mono', monospace;
  --r1:5px; --r2:8px; --r3:12px; --r4:16px; --r5:20px; --r6:26px;
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.3,.64,1);
  --ts:110ms; --tm:180ms; --tl:300ms;
}

/* ── Scoped Reset ───────────────────────────────────────────── */
.clearbay-app *, .clearbay-app *::before, .clearbay-app *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.clearbay-app {
  font-family: var(--body);
  color: var(--t0);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
.clearbay-app a { color: var(--teal); text-decoration: none; }
.clearbay-app ::-webkit-scrollbar { width: 3px; height: 3px; }
.clearbay-app ::-webkit-scrollbar-track { background: transparent; }
.clearbay-app ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }

/* Typography helpers — use .cb-display instead of h1 to avoid WP theme conflict */
.clearbay-app .cb-display { font-family: var(--display); font-weight: 700; line-height: 1.2; color: var(--t0); letter-spacing: -.015em; }
.clearbay-app .cb-mono    { font-family: var(--mono); }

/* ── Badges ─────────────────────────────────────────────────── */
.clearbay-app .badge {
  display: inline-flex; align-items: center;
  padding: .14rem .55rem; border-radius: 100px;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.clearbay-app .badge-draft         { background:var(--l0);    color:var(--t2);   border:1px solid var(--l1); }
.clearbay-app .badge-pending       { background:var(--am12);  color:var(--am);   border:1px solid rgba(245,166,32,.2); }
.clearbay-app .badge-approved      { background:var(--bl12);  color:var(--bl);   border:1px solid rgba(91,164,255,.2); }
.clearbay-app .badge-in_progress   { background:var(--ta10);  color:var(--teal); border:1px solid rgba(0,205,184,.2); }
.clearbay-app .badge-awaiting_parts{ background:var(--vi12);  color:var(--vi);   border:1px solid rgba(164,140,255,.2); }
.clearbay-app .badge-completed     { background:var(--em12);  color:var(--em);   border:1px solid rgba(15,227,137,.2); }
.clearbay-app .badge-invoiced      { background:var(--am12);  color:var(--am);   border:1px solid rgba(245,166,32,.2); }
.clearbay-app .badge-paid          { background:var(--em12);  color:var(--em);   border:1px solid rgba(15,227,137,.2); }
.clearbay-app .badge-cancelled     { background:var(--rb12);  color:var(--rb);   border:1px solid rgba(239,62,62,.2); }
.clearbay-app .badge-on_hold       { background:var(--am12);  color:var(--am);   border:1px solid rgba(245,166,32,.2); }
.clearbay-app .badge-suspended     { background:var(--rb12);  color:var(--rb);   border:1px solid rgba(239,62,62,.2); }
.clearbay-app .badge-trial         { background:var(--bl12);  color:var(--bl);   border:1px solid rgba(91,164,255,.2); }
.clearbay-app .badge-active        { background:var(--em12);  color:var(--em);   border:1px solid rgba(15,227,137,.2); }
.clearbay-app .badge-enterprise    { background:var(--ga10);  color:var(--gold); border:1px solid var(--ga20); }
.clearbay-app .badge-starter       { background:var(--l0);    color:var(--t1);   border:1px solid var(--l1); }
.clearbay-app .badge-pro           { background:var(--bl12);  color:var(--bl);   border:1px solid rgba(91,164,255,.2); }
.clearbay-app .badge-priority-low       { background:var(--l0);   color:var(--t2);   border:1px solid var(--l1); }
.clearbay-app .badge-priority-normal    { background:var(--ta10); color:var(--teal); border:1px solid rgba(0,205,184,.2); }
.clearbay-app .badge-priority-high      { background:var(--am12); color:var(--am);   border:1px solid rgba(245,166,32,.2); }
.clearbay-app .badge-priority-emergency { background:var(--rb12); color:var(--rb);   border:1px solid rgba(239,62,62,.2); }

/* ── Buttons ─────────────────────────────────────────────────── */
.clearbay-app .btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.44rem 1rem; border:1px solid transparent;
  border-radius:var(--r2); font-family:var(--body);
  font-size:.84rem; font-weight:600; cursor:pointer;
  transition:all var(--ts) var(--ease);
  white-space:nowrap; text-decoration:none; line-height:1;
}
.clearbay-app .btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.clearbay-app .btn:disabled      { opacity:.45; cursor:not-allowed; pointer-events:none; }
.clearbay-app .btn-primary  { background:var(--teal); color:#040608; }
.clearbay-app .btn-primary:hover { opacity:.85; }
.clearbay-app .btn-gold     { background:linear-gradient(135deg,var(--gold-dk),var(--gold)); color:#060A0C; font-weight:700; }
.clearbay-app .btn-gold:hover { opacity:.9; }
.clearbay-app .btn-danger   { background:var(--rb12); color:var(--rb); border-color:rgba(239,62,62,.25); }
.clearbay-app .btn-danger:hover { background:var(--rb); color:#fff; }
.clearbay-app .btn-outline  { background:transparent; color:var(--t1); border-color:var(--l2); }
.clearbay-app .btn-outline:hover { border-color:var(--l3); color:var(--t0); }
.clearbay-app .btn-ghost    { background:transparent; color:var(--t2); }
.clearbay-app .btn-ghost:hover { background:var(--l0); color:var(--t1); }
.clearbay-app .btn-sm   { padding:.3rem .7rem;    font-size:.76rem; }
.clearbay-app .btn-lg   { padding:.65rem 1.5rem;  font-size:.95rem; }
.clearbay-app .btn-icon { padding:.5rem; aspect-ratio:1; }
.clearbay-app .btn-full { width:100%; justify-content:center; }

/* ── Cards ───────────────────────────────────────────────────── */
.clearbay-app .card { background:var(--bg-2); border:1px solid var(--l1); border-radius:var(--r4); overflow:hidden; }
.clearbay-app .card-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--l0); background:rgba(21,30,46,.4); }
.clearbay-app .card-title { font-size:.88rem; font-weight:700; color:var(--t0); }
.clearbay-app .card-body  { padding:16px; }

/* ── Forms ───────────────────────────────────────────────────── */
.clearbay-app .form-group { margin-bottom:1rem; }
.clearbay-app label { display:block; font-size:.8rem; font-weight:600; color:var(--t1); margin-bottom:.4rem; }
.clearbay-app input[type="text"],
.clearbay-app input[type="email"],
.clearbay-app input[type="password"],
.clearbay-app input[type="number"],
.clearbay-app input[type="tel"],
.clearbay-app input[type="date"],
.clearbay-app input[type="time"],
.clearbay-app input[type="search"],
.clearbay-app input[type="url"],
.clearbay-app textarea,
.clearbay-app select {
  width:100%; padding:.48rem .78rem; border:1px solid var(--l2);
  border-radius:var(--r2); font-family:var(--body); font-size:.88rem;
  color:var(--t0); background:var(--bg-3);
  transition:border-color var(--ts) var(--ease),box-shadow var(--ts) var(--ease);
  appearance:none; outline:none;
}
.clearbay-app input:focus, .clearbay-app textarea:focus, .clearbay-app select:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px var(--ga10);
}
.clearbay-app input::placeholder, .clearbay-app textarea::placeholder { color:var(--t3); }
.clearbay-app textarea { min-height:100px; resize:vertical; }
.clearbay-app .input-error { border-color:var(--rb) !important; }
.clearbay-app .field-error { color:var(--rb); font-size:.78rem; margin-top:.3rem; display:block; }

/* ── Tables ──────────────────────────────────────────────────── */
.clearbay-app .tbl { width:100%; border-collapse:collapse; font-size:.84rem; }
.clearbay-app .tbl th {
  text-align:left; font-size:.64rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--t3);
  padding:8px 16px; border-bottom:1px solid var(--l1);
  background:rgba(21,30,46,.3); white-space:nowrap;
}
.clearbay-app .tbl td { padding:10px 16px; border-bottom:1px solid var(--l0); vertical-align:middle; color:var(--t1); }
.clearbay-app .tbl tr:last-child td { border-bottom:none; }
.clearbay-app .tbl tr:hover td      { background:var(--l0); }

/* ── Stats ───────────────────────────────────────────────────── */
.clearbay-app .stat { background:var(--bg-2); border:1px solid var(--l1); border-radius:var(--r4); padding:14px 16px; position:relative; overflow:hidden; transition:border-color var(--tm) var(--ease); }
.clearbay-app .stat:hover { border-color:var(--l2); }
.clearbay-app .stat-label { font-size:.66rem; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.06em; }
.clearbay-app .stat-val   { font-family:var(--display); font-size:1.55rem; font-weight:700; color:var(--t0); line-height:1.1; margin-top:6px; }
.clearbay-app .stat-sub   { font-size:.72rem; color:var(--t3); margin-top:4px; }
.clearbay-app .stat-up    { color:var(--em); }
.clearbay-app .stat-dn    { color:var(--rb); }

/* ── Alerts ──────────────────────────────────────────────────── */
.clearbay-app .alert { padding:.85rem 1rem; border-radius:var(--r3); font-size:.875rem; display:flex; align-items:flex-start; gap:.65rem; margin-bottom:.85rem; }
.clearbay-app .alert-icon    { font-size:1rem; flex-shrink:0; }
.clearbay-app .alert-info    { background:var(--bl12); border-left:3px solid var(--bl); }
.clearbay-app .alert-success { background:var(--em12); border-left:3px solid var(--em); }
.clearbay-app .alert-warning { background:var(--am12); border-left:3px solid var(--am); }
.clearbay-app .alert-danger  { background:var(--rb12); border-left:3px solid var(--rb); }

/* ── Modal ───────────────────────────────────────────────────── */
.clearbay-app .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:8000; padding:1rem; backdrop-filter:blur(4px); }
.clearbay-app .modal { background:var(--bg-2); border:1px solid var(--l2); border-radius:var(--r5); box-shadow:0 24px 60px rgba(0,0,0,.6); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; animation:cbFadeIn .2s var(--ease); }
.clearbay-app .modal-header { padding:1.25rem 1.5rem 1rem; border-bottom:1px solid var(--l1); display:flex; align-items:center; justify-content:space-between; }
.clearbay-app .modal-title  { font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--t0); }
.clearbay-app .modal-body   { padding:1.25rem 1.5rem; }
.clearbay-app .modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--l1); display:flex; justify-content:flex-end; gap:.6rem; background:rgba(21,30,46,.4); }

/* ── Empty State ─────────────────────────────────────────────── */
.clearbay-app .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3.5rem 2rem; text-align:center; color:var(--t2); }
.clearbay-app .empty-state-icon { font-size:2.5rem; margin-bottom:.85rem; opacity:.4; }

/* ── Spinner ─────────────────────────────────────────────────── */
.clearbay-app .spinner { width:32px; height:32px; border:2px solid var(--l2); border-top-color:var(--teal); border-radius:50%; animation:cbSpin .8s linear infinite; }
.clearbay-app .loading-overlay { position:fixed; inset:0; background:rgba(8,11,16,.8); display:flex; align-items:center; justify-content:center; z-index:9000; backdrop-filter:blur(6px); }

/* ── Grid & Utilities ─────────────────────────────────────────── */
.clearbay-app .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.clearbay-app .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.clearbay-app .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:1024px) { .clearbay-app .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px)  { .clearbay-app .grid-3, .clearbay-app .grid-4 { grid-template-columns:1fr; } }
@media(max-width:600px)  { .clearbay-app .grid-2 { grid-template-columns:1fr; } }
.clearbay-app .flex    { display:flex; }
.clearbay-app .flex-col{ flex-direction:column; }
.clearbay-app .items-center    { align-items:center; }
.clearbay-app .justify-between { justify-content:space-between; }
.clearbay-app .justify-center  { justify-content:center; }
.clearbay-app .gap-2 { gap:.5rem; } .clearbay-app .gap-3 { gap:.75rem; }
.clearbay-app .gap-4 { gap:1rem; }  .clearbay-app .gap-6 { gap:1.5rem; }
.clearbay-app .ml-auto { margin-left:auto; }
.clearbay-app .mt-2 { margin-top:.5rem; } .clearbay-app .mt-4 { margin-top:1rem; }
.clearbay-app .mb-4 { margin-bottom:1rem; }
.clearbay-app .w-full   { width:100%; }
.clearbay-app .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clearbay-app .hidden   { display:none !important; }
.clearbay-app .fade-in  { animation:cbFadeIn .25s var(--ease) forwards; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .clearbay-app .cb-sidebar, .clearbay-app .cb-topbar { display:none !important; }
  .clearbay-app .cb-main { margin-left:0 !important; }
}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes cbSpin    { to { transform:rotate(360deg); } }
@keyframes cbFadeIn  { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes cbSlideIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }