@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{
/* Neumorphic warm-stone palette (soft extrusion, single top-left light) */
--canvas:#E6E4DE;
--bg:#E6E4DE; /* app background = canvas */
--surface:#E9E7E1; /* recessed tray / inset bg */
--inset-bg:#E9E7E1;
--card:#F3F2EE; /* raised card / key face */
--surface-sub:#EFEDE8; /* secondary raised (icon buttons) */
/* Borders are now barely-there hairlines — elevation comes from shadows. */
--border:rgba(27,25,22,0.06);
--border2:rgba(27,25,22,0.10);
--sp:rgba(27,25,22,0.06);
--l:#1B1916;
--l2:#6E6A62;
--l3:#8A857C;
--l4:#A8A296;
--mnk:#33302A; /* menu / button-label ink (prototype --ink-2) */
--dng-ink:#C0492A; /* destructive menu item ink */
--f3:#EFEDE8;
--accent:#1B1916; /* dark CTA (e.g. Done / sign-in) */
--accent-h:#33302A;
--accent-text:#F1EDE6;
/* Sidebar active / nav accents now ride the amber accent. */
--highlight:#6E6A62;
--highlight-soft:rgba(226,105,58,0.12);
--highlight-softer:rgba(226,105,58,0.06);
--highlight-text:#fff;
--hover-bg:rgba(27,25,22,0.05);
--focus-ring:rgba(226,105,58,0.30);
--yellow:#F4F465;
--yellow-h:#eaea4a;
--g:#3CC274;--o:#E2693A;--r:#d94e3f;--b:#34505E;
/* Amber accent — status, progress, primary CTA, totals, active nav icon */
--amber-grad:linear-gradient(135deg,#FFA45C,#E85D26);
--amber-ink:#A85A1E;
--amber-soft:rgba(226,105,58,0.12);
/* Elevation recipes */
--neo-raised:-6px -6px 16px rgba(255,255,255,0.5), 6px 6px 16px rgba(191,187,179,0.42);
--neo-inset:inset 2px 2px 5px rgba(191,187,179,0.42), inset -2px -2px 5px rgba(255,255,255,0.5);
--neo-key:inset 0 2px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(166,163,156,0.3), 0 4px 8px rgba(166,163,156,0.42), 0 1px 2px rgba(166,163,156,0.3);
--neo-key-sm:inset 0 1.5px 1px rgba(255,255,255,0.88), inset 0 -1.5px 2px rgba(166,163,156,0.25), 0 2px 5px rgba(166,163,156,0.32);
--neo-icon:-4px -4px 9px rgba(255,255,255,0.5), 4px 4px 9px rgba(191,187,179,0.42);
/* radius scale — softer/rounder per spec (ctrl 12, field 10, card 16) */
--r1:4px;--r2:10px;--r3:10px;--r4:12px;--r5:16px;--r6:999px;
/* motion */
--ease:cubic-bezier(0.16,1,0.3,1);
--dur:160ms;
--fn:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
--fdisplay:'Bricolage Grotesque','Inter',sans-serif;
}
/* ── Dark mode ── activated by adding data-theme="dark" on ──
Keeps the olive/khaki accents (they read well on dark) but flips the
neutral surfaces from warm bone tones to charcoal. */
html[data-theme="dark"]{
--canvas:#27261F;
--bg:#27261F;
--surface:#201F19;
--inset-bg:#201F19;
--card:#34332E;
--surface-sub:#34332E;
--border:rgba(241,237,230,0.06);
--border2:rgba(241,237,230,0.12);
--sp:rgba(241,237,230,0.06);
--l:#F1EDE6;
--l2:#A39E93;
--l3:#9A958B;
--l4:#89847A;
--mnk:#F1EDE6; /* menu ink — light in dark theme */
--dng-ink:#FF7A52; /* destructive ink — dark theme */
--f3:#34332E;
--f4:#34332E;
--accent:#403E38;
--accent-h:#4A4842;
--accent-text:#F1EDE6;
--highlight:#A39E93;
--highlight-soft:rgba(255,154,90,0.16);
--highlight-softer:rgba(255,154,90,0.10);
--highlight-text:#212121;
--hover-bg:rgba(255,255,255,0.06);
--focus-ring:rgba(255,154,90,0.30);
--amber-ink:#FF9A5A;
--neo-raised:-6px -6px 16px rgba(255,255,255,0.05), 6px 6px 16px rgba(0,0,0,0.55);
--neo-inset:inset 2px 2px 5px rgba(0,0,0,0.6), inset -2px -2px 5px rgba(255,255,255,0.045);
--neo-key:0 4px 10px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
--neo-key-sm:0 3px 8px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05);
--neo-icon:-4px -4px 9px rgba(255,255,255,0.05), 4px 4px 9px rgba(0,0,0,0.55);
}
/* Login page always uses the dark palette regardless of the global theme.
Scoped variable overrides on #pg-login cascade to every descendant so the
form, inputs and gradient backdrop all stay dark. */
#pg-login{
--bg:#1B1A17;
--surface:#22211D;
--card:#1B1A17;
--border:rgba(245,243,238,0.10);
--border2:rgba(245,243,238,0.16);
--sp:rgba(245,243,238,0.08);
--l:#F1EDE9;
--l2:#A6A29A;
--l3:#9A958B;
--l4:#89847A;
--accent:#F1EDE9;
--accent-h:#FFFFFF;
--accent-text:#212121;
--highlight:#D4C68E;
--highlight-soft:rgba(212,198,142,0.16);
--highlight-softer:rgba(212,198,142,0.10);
--highlight-text:#212121;
--hover-bg:rgba(255,255,255,0.10);
--focus-ring:rgba(245,243,238,0.20);
background:#1B1A17;
color:var(--l);
}
/* Smooth color transition when toggling between themes */
html, body, .mn, .sb, .tb, .tbar, .btn, .inp, .pc, .lc, .cc, .ic, .wc, .sp2 {
transition: background-color var(--dur) var(--ease),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
html,body{height:100%;overflow:hidden;font-family:var(--fn);color:var(--l);-webkit-font-smoothing:antialiased;background:var(--bg);font-size:14px;line-height:1.5;}
/* ── SCREENS ── */
.screen{position:fixed;inset:0;}
/* ── AUTH ── */
.aw{display:flex;height:100%;width:100%;}
.al{width:34%;flex-shrink:0;position:relative;overflow:hidden;background:#0a0a0b;}
.ar{flex:1;display:flex;align-items:center;justify-content:center;background:var(--card);padding:40px 32px;overflow-y:auto;position:relative;}
/* Login page gradient blobs — three centered blobs in different sizes that
drift outward, mirroring the in-app welcome view. */
.ar .grad-blob {
position: absolute;
border-radius: 50%;
filter: blur(140px);
pointer-events: none;
z-index: 0;
top: 50%;
will-change: transform;
opacity: 0.7;
backface-visibility: hidden;
}
.ar .grad-blob.b1 {
width: 480px; height: 480px;
left: 28%;
background: radial-gradient(circle at center,
#524C1D 0%,
rgba(82,76,29,0.6) 30%,
rgba(82,76,29,0.2) 60%,
rgba(82,76,29,0) 100%);
animation: gradDrift1 13s ease-in-out infinite alternate;
}
.ar .grad-blob.b2 {
width: 420px; height: 420px;
left: 50%;
background: radial-gradient(circle at center,
#A29466 0%,
rgba(162,148,102,0.6) 30%,
rgba(162,148,102,0.2) 60%,
rgba(162,148,102,0) 100%);
animation: gradDrift2 11s ease-in-out infinite alternate;
}
.ar .grad-blob.b3 {
width: 340px; height: 340px;
left: 72%;
background: radial-gradient(circle at center,
#F4C430 0%,
rgba(244,196,48,0.6) 30%,
rgba(244,196,48,0.2) 60%,
rgba(244,196,48,0) 100%);
animation: gradDrift3 15s ease-in-out infinite alternate;
}
/* Keep the form above the gradient layer */
.ar > .af { position: relative; z-index: 1; }
.af{width:100%;max-width:360px;}
.af h1{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px;color:var(--l);}
.af p{font-size:14px;color:var(--l2);margin-bottom:24px;line-height:1.5;}
.lbl{font-size:12px;font-weight:510;color:var(--l2);letter-spacing:-.01em;margin-bottom:4px;display:block;}
.ai{width:100%;height:34px;padding:0 10px;font-size:14px;font-family:var(--fn);border:1px solid var(--border);border-radius:var(--r3);background:var(--card);color:var(--l);outline:none;transition:border-color var(--dur),box-shadow var(--dur);margin-bottom:10px;letter-spacing:-.01em;}
.ai:focus{border-color:var(--border2);box-shadow:none;}
.ab{width:100%;height:34px;border-radius:var(--r3);border:none;background:var(--accent);color:var(--accent-text);font-size:14px;font-weight:510;cursor:pointer;font-family:var(--fn);letter-spacing:-.01em;transition:background var(--dur) var(--ease);}
.ab:hover{background:var(--accent-h);}
.asoc{width:100%;height:34px;border-radius:var(--r3);border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--fn);margin-bottom:8px;transition:background var(--dur);color:var(--l);}
.asoc:hover{background:var(--surface);}
.alink{color:var(--accent);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
/* ── APP LAYOUT ── */
.app{display:flex;height:100%;width:100%;overflow:hidden;position:relative;}
/* Sidebar — E1E1E1 background; all text + borders inside use the olive 524C1D for contrast */
.sb{width:264px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--highlight-soft);position:relative;z-index:50;color:var(--highlight);}
.sb-hd{height:44px;padding:0 16px;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;border-bottom:1px solid var(--highlight-soft);color:var(--highlight);}
.sb-ic{width:22px;height:22px;border-radius:var(--r2);background:var(--l);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sb-nav{flex:1;overflow-y:auto;padding:8px 6px;}
.ni{display:flex;align-items:center;gap:7px;min-height:36px;padding:0 10px;border-radius:var(--r2);cursor:pointer;font-size:13px;font-weight:500;color:var(--highlight);transition:background var(--dur),color var(--dur);margin-bottom:2px;letter-spacing:-.01em;}
.ni:hover{background:var(--highlight-soft);color:var(--highlight);}
.ni.on{background:var(--highlight);color:var(--highlight-text);font-weight:510;}
.ni.on svg{color:var(--highlight-text);}
.nsub{min-height:30px;padding:0 10px 0 32px;font-size:12.5px;color:var(--highlight);opacity:0.85;border-radius:var(--r2);letter-spacing:-.01em;}
.nsub:hover{opacity:1;background:var(--highlight-soft);color:var(--highlight);}
.nsub.on{opacity:1;background:var(--highlight);color:var(--highlight-text);font-weight:510;}
.sb-ft{padding:0;display:flex;flex-direction:column;flex-shrink:0;color:var(--highlight);}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;}
/* ── MAIN ── */
.mn{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative;background:var(--bg);}
/* Three horizontally-aligned blobs in different sizes that drift and morph
around their starting positions. Vertical center, horizontal spread keeps
the corners clear. */
.mn .grad-blob {
position: absolute;
border-radius: 50%;
filter: blur(160px);
pointer-events: none;
z-index: 0;
top: 50%;
will-change: transform;
opacity: 0.55;
/* Force its own compositor layer + smoother sampling so the blur doesn't
produce a visible banded edge on the falloff. */
transform: translate3d(0,0,0);
backface-visibility: hidden;
}
.mn .grad-blob.b1 {
width: 600px; height: 600px;
left: 28%;
background: radial-gradient(circle at center,
#E2693A 0%,
rgba(226,105,58,0.6) 30%,
rgba(226,105,58,0.2) 60%,
rgba(226,105,58,0) 100%);
animation: gradDrift1 13s ease-in-out infinite alternate;
}
.mn .grad-blob.b2 {
width: 520px; height: 520px;
left: 50%;
background: radial-gradient(circle at center,
#FFA45C 0%,
rgba(255,164,92,0.6) 30%,
rgba(255,164,92,0.2) 60%,
rgba(255,164,92,0) 100%);
animation: gradDrift2 11s ease-in-out infinite alternate;
}
.mn .grad-blob.b3 {
width: 440px; height: 440px;
left: 72%;
background: radial-gradient(circle at center,
#E8C4A0 0%,
rgba(232,196,160,0.6) 30%,
rgba(232,196,160,0.2) 60%,
rgba(232,196,160,0) 100%);
animation: gradDrift3 15s ease-in-out infinite alternate;
}
.mn.welcome-mode .grad-blob { opacity: 0.7; }
/* Each blob starts at translate(-50%, -50%) so `left/top` defines its
center. Both position AND scale animate, so the blobs grow/shrink while
drifting — that gives the "breathing mesh" look. */
@keyframes gradDrift1 {
0% { transform: translate(-50%, -50%) scale(0.85); }
50% { transform: translate(-62%, -65%) scale(1.18); }
100% { transform: translate(-40%, -38%) scale(1.05); }
}
@keyframes gradDrift2 {
0% { transform: translate(-50%, -50%) scale(1.1); }
50% { transform: translate(-52%, -36%) scale(0.85); }
100% { transform: translate(-48%, -64%) scale(1.25); }
}
@keyframes gradDrift3 {
0% { transform: translate(-50%, -50%) scale(0.95); }
50% { transform: translate(-38%, -42%) scale(1.3); }
100% { transform: translate(-62%, -60%) scale(0.9); }
}
/* Make sure the actual app chrome sits above the gradient layer */
.mn > * { position: relative; z-index: 1; }
.tb{padding:0 14px;display:flex;align-items:center;gap:6px;height:44px;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--border);}
/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 14px;border-radius:999px;font-family:var(--fn);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--l);transition:background var(--dur),border-color var(--dur);white-space:nowrap;letter-spacing:-.005em;}
.btn:hover{background:var(--surface);border-color:var(--border2);}
.btn:active{background:var(--border);}
.bdk{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}
.bdk:hover{background:var(--accent-h);border-color:var(--accent-h);}
.byw{background:var(--yellow);border-color:var(--yellow);color:var(--l);}
.byw:hover{background:var(--yellow-h);border-color:var(--yellow-h);}
.bsm{height:28px;padding:0 12px;font-size:12px;}
.bxs{height:24px;padding:0 10px;font-size:11px;}
.bic{width:30px;height:30px;padding:0;border-radius:999px;}
/* Round icon button used in panel headers, modal headers, etc. */
.hdr-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;flex-shrink:0;border:1px solid var(--border);background:transparent;color:var(--l2);border-radius:999px;cursor:pointer;font-family:var(--fn);transition:background var(--dur),border-color var(--dur);}
.hdr-iconbtn:hover{background:var(--surface);}
/* ── INPUTS ── */
.inp{width:100%;height:32px;padding:0 9px;font-size:13px;font-family:var(--fn);border:1px solid var(--border);border-radius:var(--r3);background:var(--card);color:var(--l);outline:none;transition:border-color var(--dur),box-shadow var(--dur);letter-spacing:-.01em;}
.inp:focus{border-color:var(--border2);box-shadow:none;}
/* Suppress native browser focus rings everywhere — the app uses subtle
border-color shifts instead of the bright default focus halo. */
input:focus, textarea:focus, select:focus, button:focus, [contenteditable]:focus { outline: none !important; }
/* Keyboard focus ring for the custom (div-based) dropdown trigger — the
rule above strips outlines from real form controls, but this div needs a
visible focus indicator for Tab users. :focus-visible shows it only for
keyboard focus, not mouse clicks. */
.custom-select-btn:focus-visible{outline:2px solid var(--l);outline-offset:1px;}
.isml{height:28px;font-size:12px;}
.ita{height:auto;padding:7px 9px;min-height:64px;resize:vertical;line-height:1.5;}
select.inp{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8f98' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;}
.flb{font-size:11px;font-weight:510;color:var(--l3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;display:block;}
.slb{font-size:11px;font-weight:510;color:var(--l3);text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px;margin-bottom:10px;border-bottom:1px solid var(--border);}
/* ── CARDS (Programa: hairline borders, soft radius, no aggressive shadows) ── */
.pc{background:var(--card);border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid var(--border);transition:border-color var(--dur),box-shadow var(--dur);}
.pc:hover{border-color:var(--border2);}
.ic{background:var(--card);border-radius:12px;margin-bottom:4px;cursor:pointer;transition:background var(--dur);border:1px solid var(--border);}
.ic:hover{background:var(--surface);}
.lc{background:var(--card);border-radius:12px;border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur);}
.lc:hover{border-color:var(--border2);}
.cc{background:var(--card);border-radius:12px;border:1px solid var(--border);padding:14px;cursor:pointer;transition:background var(--dur);position:relative;}
.cc:hover{background:var(--card);}
/* Contact-card tag pills — same warm tone as the create-contact selected tags. */
.cc-tag{ background:linear-gradient(180deg,#E2DCD1,#EEE9E0); }
html[data-theme="dark"] .cc-tag{ background:linear-gradient(180deg,#2A2723,#33302A); }
/* Contact-card detail text — exact prototype colours (website slate-blue, rest warm ink). */
/* Toolbar filter/sort icon buttons — force a readable icon colour in both themes
(they were defaulting to black in dark mode). */
#l-flt, #l-srt, #a-flt, #a-srt{ color:var(--l2) !important; }
.cc-web{ color:#34505E !important; }
.cc-detail{ color:var(--l2); }
html[data-theme="dark"] .cc-web{ color:#8FB1C2 !important; }
/* Contact type pills — theme-aware inks (dark variants lift the green/slate off the dark card). */
.cc-type-supplier{ color:var(--amber-ink); background:rgba(226,105,58,0.12); }
.cc-type-trade{ color:#2E7D46; background:rgba(46,160,90,0.13); }
.cc-type-client{ color:#34505E; background:rgba(52,80,94,0.13); }
.cc-type-other{ color:var(--l2); background:var(--surface-sub); }
html[data-theme="dark"] .cc-type-trade{ color:#6FBF88; background:rgba(46,160,90,0.22); }
html[data-theme="dark"] .cc-type-client{ color:#8FB1C2; background:rgba(52,80,94,0.32); }
/* TAGS/NOTES labels — --l4 vanishes on dark; lift to --l3 there. */
.cc-label{ color:var(--l4); }
html[data-theme="dark"] .cc-label{ color:var(--l3); }
.wc{background:var(--card);border-radius:12px;border:1px solid var(--border);padding:16px;margin-bottom:10px;}
/* ── TABS (pill-style like Programa) ── */
.tbar{display:flex;align-items:center;height:44px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;padding:0 14px;gap:4px;}
.tab{display:flex;align-items:center;height:30px;padding:0 14px;margin:0 2px;font-size:13px;font-weight:500;color:var(--l3);cursor:pointer;border-radius:999px;transition:color var(--dur),background var(--dur);white-space:nowrap;letter-spacing:-.005em;}
.tab:hover{color:var(--l);background:var(--surface);}
.tab.on{color:var(--l);background:var(--inset-bg);font-weight:600;}
/* ── OVERLAYS ── */
.ov{position:absolute;inset:0;background:rgba(27,25,22,0.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:20;}
.sp2{position:absolute;top:0;right:0;height:100%;background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:21;box-shadow:-4px 0 16px rgba(0,0,0,0.06);animation:slideIn var(--dur) var(--ease) both;}
@keyframes slideIn{from{transform:translateX(16px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.bsh{position:absolute;bottom:0;left:0;right:0;background:var(--card);border-radius:10px 10px 0 0;border-top:1px solid var(--border);padding:10px 18px 28px;max-height:86%;overflow-y:auto;z-index:22;box-shadow:0 -4px 24px rgba(0,0,0,0.06);animation:slideUp var(--dur) var(--ease) both;}
@keyframes slideUp{from{transform:translateY(12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
/* Bulk-action bar — opacity-only so we don't overwrite the translateX(-50%)
used for horizontal centering. */
@keyframes bbFadeIn{from{opacity:0;}to{opacity:1;}}
/* ── Locked schedule (read-only) ────────────────────────────────────────
Visual + interaction lock on a schedule or its product detail panel.
Inputs/textareas/selects become non-editable; add/delete/drag affordances
disappear. The lock banner explains the state and offers an unlock link.
*/
/* Layout-only affordances (drag handles, row checkboxes, per-row plus add,
row delete, bulk-action bar) — hide entirely since they only make sense
in edit mode. */
.sched-locked .row-gutter,
.sched-locked .row-cbx,
.sched-locked #bulk-bar,
.sched-locked .row-add-btn,
.sched-locked .row-plus,
.sched-locked .sec-add,
.sched-locked .sec-menu-btn,
.sched-locked .row-trash { display: none !important; }
/* Prominent add buttons (toolbar + section-level) stay visible so the
layout looks consistent between locked and unlocked, but they're
disabled-looking and non-clickable. */
.sched-locked #s-add-lib,
.sched-locked #s-new,
.sched-locked .sec-add-buttons,
.sched-locked .sec-add-buttons .btn {
pointer-events: none !important;
opacity: 0.45 !important;
cursor: not-allowed !important;
}
.sched-locked .row-wrap[draggable], .sched-locked .row-wrap { cursor: default !important; }
.sched-locked input:not([type="checkbox"]):not(.sched-search),
.sched-locked textarea,
.sched-locked select,
.sched-locked [contenteditable] {
pointer-events: none !important;
user-select: text !important;
background: transparent !important;
border-color: transparent !important;
}
/* Search input stays fully interactive — filtering is read-only and useful
even when the file is locked. */
.sched-locked .sched-search { pointer-events: auto !important; }
.sched-locked input[type="checkbox"] { pointer-events: none !important; opacity: 0.6; }
/* Labels host the click target for their — kill pointer-events on
the wrapping label too so clicks on the label text can't toggle a
nested checkbox (e.g. Procurement Method OFOI/OFCI/CFCI). */
.sched-locked label,
.sched-locked label * { pointer-events: none !important; cursor: default !important; }
.sched-locked .inp:not(.sched-search) { background: transparent !important; border-color: transparent !important; }
/* Search input keeps its normal field look (bg + border) in both states,
and doesn't show a focus ring when typing — the user is filtering view,
not editing data. */
.sched-locked .sched-search,
.sched-search { background: var(--card) !important; border-color: var(--border) !important; }
.sched-search:focus { border-color: var(--border) !important; box-shadow: none !important; }
.sched-locked .custom-select-btn { pointer-events: none !important; opacity: 0.85; }
/* Disable image upload + attachment drop zones */
.sched-locked #pp-imgs,
.sched-locked #pp-att-drop,
.sched-locked #pp-pr-att-drop,
.sched-locked .att-rm { pointer-events: none !important; }
.sched-locked #pp-att-drop, .sched-locked #pp-pr-att-drop { opacity: 0.6; }
/* Image cells should still show the existing photos but no add/replace/delete */
.sched-locked #pp-imgs .img-add,
.sched-locked #pp-imgs .img-rm,
.sched-locked #pp-imgs button { display: none !important; }
.sched-locked #pp-imgs * { pointer-events: none !important; }
/* Date pickers — block clicks in every variant. `.date-trigger` is the
styled input row in the product detail panel; `.date-cell` is the
schedule row's inline date cell that opens the calendar popup. */
.sched-locked .date-trigger,
.sched-locked .date-cell,
.sched-locked .lead-block { pointer-events: none !important; opacity: 0.85; cursor: default !important; }
/* Status pill, row 3-dot menu, supplier "add new" button, and inline
sup-block (clickable supplier picker) — all read-only in locked mode. */
.sched-locked .stat-btn,
.sched-locked .mre-btn,
.sched-locked .spl,
.sched-locked #pp-stat,
.sched-locked .sup-block,
.sched-locked #pp-sup-new,
.sched-locked .cs-rm,
.sched-locked #pp-addspec,
.sched-locked #pp-dup { pointer-events: none !important; }
.sched-locked #pp-dup { opacity: 0.4 !important; }
.sched-locked .cs-rm,
.sched-locked #pp-addspec { display: none !important; }
.sched-locked .mre-btn { opacity: 0.4 !important; }
/* PDF download button stays usable; everything else inside the panel
footer is interactive. We don't blanket-disable buttons because the
markup toggle and date pickers are allowed (they only display data). */
/* Lock banner above the schedule body — inset by the same 18px padding
used inside .scr so it visually aligns with the product cards below. */
.lock-banner {
display: flex; align-items: center; gap: 10px;
padding: 10px 18px; margin: 14px 18px 4px;
background: var(--highlight-soft);
border: 1px solid var(--highlight-soft);
border-radius: 10px;
color: var(--highlight);
font-size: 13px; font-weight: 500;
letter-spacing: -.005em;
}
.lock-banner .lb-unlock {
margin-left: auto;
background: transparent;
border: 1px solid var(--highlight);
color: var(--highlight);
border-radius: 999px;
padding: 4px 12px;
font-size: 12px; font-weight: 600;
cursor: pointer;
font-family: var(--fn);
}
/* Dark-variant dropdown — used when a popup is triggered from the bulk
action bar so it matches the bar's surface. Note the bar uses var(--l)
for its background, which means in LIGHT mode it's dark (white-on-dark
overlays), but in DARK mode it's light (so overlays need to be dark).
The theme-scoped rules below handle both cases. */
.dd-dark{background:var(--l) !important;color:var(--accent-text) !important;}
.dd-dark *{color:inherit;}
.dd-dark > div > div{color:inherit;}
.dd-dark [style*="color:var(--l2)"],
.dd-dark [style*="color:var(--l3)"]{color:var(--accent-text) !important;opacity:0.7;}
/* Light theme: popup bg is dark → tint overlays light */
.dd-dark .inp{background:rgba(255,255,255,0.08) !important;color:var(--accent-text);border-color:transparent !important;}
.dd-dark .inp::placeholder{color:rgba(255,255,255,0.5);}
.dd-dark [style*="background:var(--border)"]{background:rgba(255,255,255,0.12) !important;}
/* Dark theme: popup bg is light → tint overlays dark */
html[data-theme="dark"] .dd-dark .inp{background:rgba(0,0,0,0.08) !important;}
html[data-theme="dark"] .dd-dark .inp::placeholder{color:rgba(0,0,0,0.45);}
html[data-theme="dark"] .dd-dark [style*="background:var(--border)"]{background:rgba(0,0,0,0.12) !important;}
.hdl{width:24px;height:3px;border-radius:2px;background:var(--border2);margin:0 auto 14px;}
.dd{position:absolute;background:var(--card);border-radius:16px;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,0.10),0 1px 3px rgba(0,0,0,0.06);padding:3px;min-width:160px;z-index:30;animation:popIn 100ms var(--ease) both;}
@keyframes popIn{from{opacity:0;transform:scale(0.98) translateY(-2px);}to{opacity:1;transform:scale(1) translateY(0);}}
.di{display:flex;align-items:center;gap:7px;min-height:28px;padding:0 7px;border-radius:var(--r2);font-size:13px;cursor:pointer;transition:background 80ms;color:var(--mnk);letter-spacing:-.01em;}
.di:hover{background:var(--surface);}
.di.dng{color:var(--dng-ink);}
.dsp{height:1px;background:var(--border);margin:2px 0;}
.dhd{font-size:11px;font-weight:510;color:var(--l3);padding:5px 7px 2px;text-transform:uppercase;letter-spacing:.06em;}
/* ── MISC ── */
.spl{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:510;cursor:pointer;border:1px solid transparent;letter-spacing:-.005em;font-family:var(--fn);transition:background var(--dur),border-color var(--dur);}
.spl:hover{filter:brightness(0.97);}
.chip{padding:1px 6px;border-radius:var(--r2);font-size:11px;font-weight:500;background:var(--surface);color:var(--l2);border:1px solid var(--border);}
.pill{padding:2px 7px;border-radius:var(--r2);font-size:11px;font-weight:510;}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.scr{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 18px;}
.snav{width:180px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:8px 4px;display:flex;flex-direction:column;}
.sni{display:flex;align-items:center;gap:6px;min-height:28px;padding:0 7px;border-radius:var(--r2);cursor:pointer;font-size:13px;color:var(--l2);transition:background var(--dur),color var(--dur);margin-bottom:1px;letter-spacing:-.01em;}
.sni:hover{background:var(--highlight-soft);color:var(--highlight);}
.sni.on{background:var(--highlight-soft);color:var(--highlight);font-weight:510;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--l);color:var(--card);border-radius:var(--r3);padding:7px 14px;font-size:13px;font-weight:500;white-space:nowrap;pointer-events:none;z-index:999;opacity:0;transition:opacity 180ms var(--ease);box-shadow:0 4px 12px rgba(0,0,0,0.25);letter-spacing:-.01em;}
.toggle{width:36px;height:22px;border-radius:999px;border:none;cursor:pointer;position:relative;transition:background var(--dur) var(--ease);flex-shrink:0;}
.tthumb{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,0.18);transition:left var(--dur) var(--ease);}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
/* Inline editable cells in schedule rows — kill all browser default focus,
border and outline styling. Highlight comes from the JS focus handler. */
.cell-inp,
.cell-inp:focus,
.cell-inp:active,
.cell-inp:focus-visible{
outline:none !important;
box-shadow:none !important;
border:none !important;
-webkit-appearance:none;
appearance:none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Responsive — tablet & mobile */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Boot veil (session resume) — pulsing monogram + waving dots */
@keyframes clioPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.72;transform:scale(0.95);}}
@keyframes clioDot{0%,80%,100%{opacity:0.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
/* Breathing amber loading blob — organic morphing outline (not a sphere), airy. */
@keyframes clioBlob{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;}25%{border-radius:35% 65% 55% 45%/40% 55% 45% 60%;}50%{border-radius:55% 45% 65% 35%/50% 60% 40% 50%;}75%{border-radius:45% 55% 38% 62%/58% 42% 60% 40%;}}
@keyframes clioSpin{0%{transform:rotate(0deg) scale(0.9,0.98);}33%{transform:rotate(120deg) scale(1.1,0.88);}66%{transform:rotate(240deg) scale(0.9,1.12);}100%{transform:rotate(360deg) scale(0.9,0.98);}}
@keyframes clioBlob2{0%{border-radius:55% 45% 50% 50%/50% 55% 45% 50%;transform:translate(-4px,3px) rotate(0deg) scale(1);}100%{border-radius:45% 55% 55% 45%/55% 45% 55% 45%;transform:translate(5px,-3px) rotate(-160deg) scale(1.15);}}
/* Tablet — narrower side panel */
@media (max-width: 960px){
.sp2{width:min(420px, 90vw) !important;}
.scr{padding:14px 14px;}
}
/* Phone — keep image at left, fold status under the spec area */
@media (max-width: 720px){
.prod-row{
grid-template-columns: auto minmax(0,1fr) auto !important;
column-gap:12px !important;
row-gap:10px !important;
padding:12px !important;
min-height:0 !important;
}
.prod-row > .row-image{min-width:88px !important;}
.prod-row > .row-main{grid-column:2; grid-row:1; min-width:0;}
.prod-row > .row-rightzone{grid-column:3; grid-row:1;}
}
/* Mobile — full-width panels, wrapping toolbars (drawer retired: the
sidebar is replaced by the icon rail / bottom bar below 1024px) */
@media (max-width: 720px){
/* Side panel becomes full-screen */
.sp2{width:100% !important;border-left:none;}
/* Top toolbar: allow wrapping & shrinking */
.tb{flex-wrap:wrap;height:auto;min-height:44px;padding:6px 10px;gap:6px;}
.tb > .inp, .tb > div > .inp, .tb input.inp{width:100% !important;}
.tbar{flex-wrap:wrap;height:auto;min-height:44px;padding:6px 10px;}
/* Schedule body: allow horizontal scroll for wide tables */
.scr{padding:12px 10px;}
/* Buttons & form fields slightly tighter */
.btn{height:32px;}
.btn.bsm{height:30px;}
/* Bulk-action sheet: stick to bottom comfortably */
.bsh{padding:10px 14px 22px;}
/* Card grids: 1-up minimum */
.pc, .lc, .cc{min-width:0;}
/* Modal boxes: ensure they fit screen */
.ov > div{max-width:94vw !important;}
}
/* Small mobile */
@media (max-width: 420px){
.scr{padding:10px 8px;}
}
/* ── Mobile polish (phones & small tablets) ── */
/* Login: stack the two-panel layout to match the mockup — the photo becomes
a tall inset rounded card at the top, the form sits top-aligned beneath on
the page surface (not the useless 34% sliver + squished form). */
@media (max-width: 700px){
.aw{ flex-direction:column; background:var(--surface); overflow-y:auto; }
.al{ width:calc(100% - 28px) !important; height:230px !important; flex-shrink:0; margin:14px 14px 0; border-radius:26px; }
.ar{ width:100%; flex:1; background:transparent; padding:26px 26px 44px; align-items:flex-start; justify-content:flex-start; }
.af{ max-width:none !important; }
.lg-title{ font-size:26px !important; }
}
/* Schedule rows: on narrow screens, the per-view spec/financial/procurement
columns stop being a ~750px-wide horizontally-scrolled strip and instead
reflow into a compact 2-up grid that wraps. One rule fixes all three
views since they share .row-spec-grid. !important beats the inline
grid-template-columns + min-width set per row. */
@media (max-width: 720px){
.row-main{overflow:visible !important;}
.row-spec-grid{
grid-template-columns:1fr 1fr !important;
min-width:0 !important;
column-gap:16px !important;
}
}
/* Touch devices have no hover, so the hover-revealed row gutter (select +
add) would be invisible/unusable — pin it visible. The drag handle is
hidden because drag-to-reorder is mouse-only (touch reorder not wired). */
@media (hover: none){
.row-gutter{opacity:1 !important;}
.row-gutter .drag-h{display:none !important;}
}
/* ═══ Responsive shell — tablet icon rail + mobile bottom tab bar ═══
Matches the mobile/tablet mockup. Below 1024px the full sidebar is
retired: 641–1024px shows an 82px icon rail; ≤640px shows a bottom
tab bar. Both drive the same goTo() nav as the desktop sidebar. */
.app-rail{ display:none; }
.app-botnav{ display:none; }
/* Sidebar is retired below 1024px (replaced by the rail / bottom bar) */
@media (max-width:1024px){
.sb{ display:none !important; }
}
/* ── Tablet: 82px icon rail ── */
@media (min-width:641px) and (max-width:1024px){
.app-rail{ display:flex; }
}
.app-rail{
width:82px; flex-shrink:0; flex-direction:column; align-items:center;
padding:18px 0; gap:8px; z-index:50;
background:rgba(247,247,244,0.6);
-webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2);
border-right:1px solid rgba(27,25,22,0.07);
}
html[data-theme="dark"] .app-rail{ background:rgba(32,31,25,0.55); border-right-color:rgba(255,255,255,0.06); }
.rail-logo{ width:40px; height:40px; border-radius:11px; background:#1B1916; color:#F3F2EE;
display:flex; align-items:center; justify-content:center; font-family:var(--fdisplay); font-weight:600;
font-size:17px; letter-spacing:-.02em; flex-shrink:0; cursor:pointer;
box-shadow:0 3px 8px -2px rgba(27,25,22,0.4); transition:transform .14s ease; }
.rail-logo:hover{ transform:translateY(-2px); }
.rail-ic{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
color:var(--l2); cursor:pointer; border:none; background:transparent; flex-shrink:0;
transition:transform .14s ease, background .16s, box-shadow .16s, color .16s; }
.rail-ic:hover{ transform:translateY(-2px); }
.rail-ic.on{ color:var(--o); background:var(--card); box-shadow:var(--neo-raised); }
.rail-ic.on:hover{ transform:none; }
.rail-av{ width:42px; height:42px; border-radius:999px; background:linear-gradient(135deg,#5E7C8B,#34505E);
color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center;
flex-shrink:0; cursor:pointer; border:none; transition:transform .14s ease; }
.rail-av:hover{ transform:translateY(-2px); }
/* ── Mobile: floating translucent tab bar (iOS "liquid glass" style) ── */
@media (max-width:640px){
.app-botnav{ display:flex; }
.mn{ padding-bottom:92px; } /* clear the floating pill + its bottom gap */
}
.app-botnav{
position:fixed; left:50%; transform:translateX(-50%);
bottom:calc(env(safe-area-inset-bottom, 8px) + 11px);
width:calc(100% - 28px); max-width:430px; z-index:60;
align-items:stretch; gap:2px; padding:6px;
border-radius:999px;
background:rgba(247,245,241,0.72);
-webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7);
border:1px solid rgba(255,255,255,0.55);
box-shadow:0 14px 34px -10px rgba(27,25,22,0.30), 0 3px 10px rgba(27,25,22,0.10), inset 0 1px 0 rgba(255,255,255,0.55);
}
html[data-theme="dark"] .app-botnav{
background:rgba(40,39,33,0.70);
border:1px solid rgba(255,255,255,0.10);
box-shadow:0 14px 34px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
.botnav-i{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
background:none; border:none; cursor:pointer; font-family:inherit; padding:5px 0; border-radius:999px;
color:var(--l3); transition:color .16s ease, background .2s ease, transform .14s ease; }
.botnav-i:active{ transform:scale(0.92); }
.botnav-i span{ font-size:10px; font-weight:500; color:var(--l3); transition:color .16s ease; }
.botnav-i svg{ display:block; width:21px; height:21px; }
.botnav-i.on{ color:var(--o); background:rgba(226,105,58,0.15); }
.botnav-i.on span{ color:var(--o); font-weight:600; }
html[data-theme="dark"] .botnav-i.on{ background:rgba(255,154,90,0.18); }
/* ── Mobile: the screen toolbar reflows into the mockup header ──
Row 1: display title + count pill (left) · round action icons + avatar
(right). Search collapses to a round icon that expands to a full-width
field on tap; Add collapses to a round "+" icon. Row 2: the filter tabs.
The count pill (.mob-count) and avatar (.mob-av) are injected by the
build fns and hidden on desktop. Covers Projects / Library / Address. */
.mob-count, .mob-av{ display:none; }
@media (max-width:640px){
.tb{ flex-wrap:wrap !important; height:auto !important; min-height:0 !important; padding:16px 16px 12px !important; row-gap:12px !important; column-gap:6px !important; align-items:center !important; }
.tb > span:not(.mob-count){ font-size:26px !important; letter-spacing:-.02em; line-height:1.02; }
/* Shorten long titles to the mockup's mobile names so the icon row fits */
.tb > span[data-short]{ font-size:0 !important; }
.tb > span[data-short]::after{ content:attr(data-short); font-size:26px !important; }
.mob-count{ display:inline-flex !important; align-items:center; font-size:12px; font-weight:600; color:var(--l2); background:rgba(27,25,22,0.05); border-radius:999px; padding:3px 10px; }
html[data-theme="dark"] .mob-count{ background:rgba(255,255,255,0.09); }
.mob-av{ display:flex !important; order:9; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:linear-gradient(135deg,#5E7C8B,#34505E); color:#fff; font-size:12px; font-weight:600; flex-shrink:0; cursor:pointer; border:none; font-family:inherit; transition:transform .14s ease; }
.mob-av:active{ transform:scale(0.94); }
/* Search: round icon, expands to a full-width field (its own row) on tap */
.tb .tbsrch{ width:38px !important; flex:0 0 38px !important; padding:0 !important; justify-content:center; cursor:pointer; overflow:hidden; background:var(--surface-sub) !important; box-shadow:var(--neo-icon) !important; }
.tb .tbsrch input{ display:none; }
.tb .tbsrch.searching{ order:10; flex:1 1 100% !important; width:auto !important; padding:0 14px !important; justify-content:flex-start; background:var(--inset-bg) !important; box-shadow:var(--neo-inset) !important; }
.tb .tbsrch.searching input{ display:block !important; }
/* Add: labelled pill collapses to a round "+" icon */
#new-proj-btn, #l-add, #a-new{ width:38px !important; height:38px !important; padding:0 !important; font-size:0 !important; display:inline-flex !important; align-items:center; justify-content:center; background:var(--surface-sub) !important; color:var(--l2) !important; box-shadow:var(--neo-icon) !important; }
#new-proj-btn::after, #l-add::after, #a-new::after{ content:'+'; font-size:25px; font-weight:400; line-height:1; color:var(--l2); }
/* Clean mockup surface — no decorative warm gradient on phones */
.grad-blob, .home-glow{ display:none !important; }
/* Product Library: 2-up cards like the mockup (auto-fill would give 1) */
#lib-grid{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
/* ── Schedule screen: reflow the two dense control bars ── */
/* Top bar: breadcrumb on row 1, the action buttons wrap beneath it */
.tb .schd-btn{ height:34px; padding:0 14px; font-size:12.5px; }
/* Tabs/search/filter bar: segmented control + pills wrap, search full-width */
.sbar{ flex-wrap:wrap !important; padding:12px 16px !important; gap:10px !important; }
.sbar .ssearch{ order:9; flex:1 1 100%; width:auto !important; }
.sbar-div{ display:none; }
.sitems{ padding:11px 16px !important; gap:18px !important; }
/* ── Schedule rows: the mockup's simplified card ──
image (left) · name + supplier + CODE/QTY (only) · ··· and status pill.
Every view (Summary/Financial/Procurement) has name/code/qty/supplier
cells, so this stays consistent across tabs. Groups flatten via
display:contents; :has() picks the four cells to keep. */
.prod-row{ grid-template-columns:auto 1fr !important; grid-template-rows:auto auto !important; column-gap:14px !important; row-gap:0 !important; align-items:start !important; padding:14px !important; min-height:0 !important; position:relative !important; }
/* Square image; the 4 spec lines are tightened to fit beside it */
.prod-row > .row-image{ grid-column:1 !important; grid-row:1 !important; width:96px !important; min-width:96px !important; height:96px !important; aspect-ratio:1 !important; align-self:start !important; }
.prod-row > .row-main{ grid-column:2 !important; grid-row:1 !important; overflow:visible !important; padding-right:26px !important; align-self:stretch !important; }
/* pull ··· and status pill out of their column: ··· pins top-right, the
status pill drops under the photo (left column, below the image) */
.prod-row > .row-rightzone{ display:contents !important; }
.prod-row .mre-btn{ position:absolute !important; top:10px !important; right:12px !important; }
.prod-row .stat-btn{ grid-column:1 !important; grid-row:2 !important; justify-self:start !important; margin-top:10px !important; font-size:11px !important; padding:5px 10px !important; gap:5px !important; }
.prod-row .row-spec-grid{ display:grid !important; grid-template-columns:1.7fr 1fr !important; column-gap:12px !important; row-gap:3px !important; min-width:0 !important; height:100% !important; align-content:space-between !important; }
/* compress each spec line so all four sit beside the square image
(3-class selector beats the base .prod-row .cell{min-height:33px}) */
.prod-row .row-spec-grid .cell{ min-height:0 !important; gap:1px !important; }
.prod-row .row-spec-grid .cell-inp{ height:auto !important; padding:0 !important; line-height:1.2 !important; }
.prod-row .row-spec-grid .cell > span:first-child{ line-height:1.1 !important; }
.prod-row .cell-group{ display:contents !important; }
.prod-row .cell{ display:none !important; margin-bottom:0 !important; }
.prod-row .cell:has(input[data-field="name"]){ display:flex !important; grid-column:1 / -1 !important; order:1; }
.prod-row .cell.sup-block{ display:flex !important; grid-column:1 / -1 !important; order:2; margin-bottom:3px !important; }
.prod-row .cell:has(input[data-field="code"]){ display:flex !important; order:3; }
.prod-row .cell:has(input[data-field="qty"]){ display:flex !important; order:4; }
/* name: prominent, no field label */
.prod-row .cell:has(input[data-field="name"]) > div:first-child{ display:none !important; }
.prod-row .cell:has(input[data-field="name"]) input{ font-size:15px !important; font-weight:600 !important; height:auto !important; }
/* supplier: value only, no "Supplier" label */
.prod-row .cell.sup-block > span:first-child{ display:none !important; }
/* CODE / QTY labels uppercased like the mockup */
.prod-row .cell:has(input[data-field="code"]) > span:first-child,
.prod-row .cell:has(input[data-field="qty"]) > span:first-child{ text-transform:uppercase; letter-spacing:.05em; }
}
/* ═══════════════ NEUMORPHIC SKIN (foundation pass) ═══════════════
Soft single-top-left-light extrusion. Surfaces share the canvas
material; elevation comes from paired highlight/shadow, not borders. */
html,body{ background:var(--canvas); }
/* Headings + bold/title typography use the display grotesque. Most of Clio's
titles are inline-styled bold divs (weight 600–800), so target those too —
regular/medium body + UI labels (≤510) stay on Inter per the spec. */
h1,h2,h3,h4{ font-family:var(--fdisplay); font-weight:600; letter-spacing:-0.02em; }
[style*="font-weight:600"],[style*="font-weight: 600"],
[style*="font-weight:650"],[style*="font-weight: 650"],
[style*="font-weight:700"],[style*="font-weight: 700"],
[style*="font-weight:800"],[style*="font-weight: 800"]{ font-family:var(--fdisplay); letter-spacing:-0.015em; }
/* Global interaction motion */
.btn,.hdr-iconbtn,.bic{ transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.btn:hover,.hdr-iconbtn:hover,.bic:hover{ transform:translateY(-1px); filter:brightness(1.015); }
.btn:active,.hdr-iconbtn:active,.bic:active{ transform:translateY(0); filter:brightness(0.99); }
/* Buttons → soft KEY (no border) */
.btn{ border:none !important; background:var(--card); color:#33302A; box-shadow:var(--neo-key-sm); }
html[data-theme="dark"] .btn{ color:var(--l); }
.bdk{ background:var(--accent) !important; color:var(--accent-text) !important; box-shadow:0 4px 10px -2px rgba(27,25,22,0.30) !important; }
.bamber{ background:var(--amber-grad) !important; color:#fff !important; box-shadow:0 4px 12px -4px rgba(226,93,38,0.5) !important; }
/* Icon buttons → convex round */
.hdr-iconbtn,.bic{ border:none !important; background:var(--surface-sub); color:var(--l2); box-shadow:var(--neo-icon); }
/* Inputs / selects / textareas → recessed wells */
.inp,.ai,.isml,input.inp,select.inp,textarea.inp{ border:none !important; background:var(--inset-bg) !important; box-shadow:var(--neo-inset); }
/* Native number-input spinners render their own light/white button box that
can't be recoloured to match the themed inset fields — hide them everywhere
(qty, dimensions, rates, markup…). Values are typed; the white box is gone. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
/* Custom stepper (opt-in via class="stepper") — warm up/down chevrons */
.num-wrap{ position:relative; display:block; }
.num-wrap > input.stepper{ padding-right:26px !important; }
/* Match the upgraded dropdown chevron: the .custom-select-btn sits at
padding:0 14px (via .pform .inp !important), so its chevron is 14px from the
field's right edge — align the stepper column to the same offset. */
.num-steps{ position:absolute; top:0; bottom:0; right:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.num-steps > button{ display:flex; align-items:center; justify-content:center; width:10px; height:8px; border:none; background:transparent; color:var(--l3); cursor:pointer; padding:0; transition:color .12s ease; }
.num-steps > button:hover{ color:var(--o); }
.num-steps > button:active{ transform:scale(0.88); }
.num-steps svg{ width:8px; height:5px; display:block; }
/* Upgraded-dropdown chevron: warm amber on hover + press-bounce, like the
stepper arrows. !important beats the .pform .custom-select-btn span colour
rules (incl. the dark-mode one) which otherwise re-tint the chevron. */
.cs-chev{ color:var(--l3) !important; transition:color .14s ease, transform .14s ease; }
.custom-select-btn:hover .cs-chev, .custom-select-btn:focus-visible .cs-chev{ color:var(--o) !important; transform:translateY(-2px); }
.custom-select-btn:active .cs-chev{ transform:translateY(1px); }
/* Undo / Redo toolbar control — sits at the left of the .tb bar (top-of-screen,
the Docs/Figma convention). Hidden on mobile, where Ctrl+Z still works. */
.undo-ctrl{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; flex-shrink:0; }
.undo-b{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--surface-sub); color:var(--l2); cursor:pointer; box-shadow:var(--neo-icon); padding:0; flex-shrink:0; transition:color .12s ease, transform .1s ease, opacity .12s ease; }
.undo-b:hover:not(:disabled){ color:var(--o); }
.undo-b:active:not(:disabled){ transform:translateY(1px); }
.undo-b:disabled{ opacity:0.3; cursor:default; box-shadow:none; }
@media(max-width:640px){ .undo-ctrl{ display:none !important; } }
.inp:focus,.ai:focus,.isml:focus,textarea.inp:focus{ box-shadow:var(--neo-inset), 0 0 0 2px var(--focus-ring) !important; }
/* Toolbar search wells (bare input inside a recessed well) get the same amber focus ring */
.tbsrch{ transition:box-shadow .15s ease; }
.tbsrch:focus-within{ box-shadow:var(--neo-inset), 0 0 0 2px var(--focus-ring) !important; }
/* Prototype confirm / rename / lock modals */
.pmodal{ background:#ECEAE4 !important; border-radius:22px !important; box-shadow:0 40px 80px -24px rgba(27,25,22,0.45),0 12px 28px -16px rgba(27,25,22,0.2) !important; padding:28px !important; }
html[data-theme="dark"] .pmodal{ background:#2B2A24 !important; box-shadow:0 40px 80px -24px rgba(0,0,0,0.7) !important; }
.pm-title{ font-family:var(--fdisplay); font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--l); }
.pm-body{ font-size:13.5px; color:var(--l2); line-height:1.55; margin-top:8px; }
.pm-body b{ font-weight:600; color:var(--l); }
.pm-inp{ width:100%; box-sizing:border-box; background:var(--inset-bg); border:none; border-radius:12px; height:48px; padding:0 16px; font-size:14px; color:var(--l); font-family:inherit; outline:none; box-shadow:var(--neo-inset); margin-top:18px; }
.pm-inp::placeholder{ color:var(--l4); opacity:1; }
.pm-inp:focus{ box-shadow:var(--neo-inset), 0 0 0 2px var(--focus-ring); }
.pm-inp.danger, .pm-inp.danger:focus{ box-shadow:inset 2px 2px 5px rgba(192,73,42,0.18),inset -2px -2px 5px rgba(255,255,255,0.5),0 0 0 1.5px rgba(192,73,42,0.4); }
.pm-actions{ display:flex; gap:12px; margin-top:20px; }
.pm-btn{ flex:1; border:none; font-family:inherit; font-size:14px; font-weight:600; height:46px; border-radius:999px; cursor:pointer; transition:filter .15s ease; }
.pm-btn:hover{ filter:brightness(1.03); }
.pm-cancel{ background:var(--surface-sub); color:var(--l2); box-shadow:var(--neo-icon); }
.pm-primary{ background:var(--accent); color:var(--accent-text); box-shadow:0 6px 16px -6px rgba(27,25,22,0.5); }
.pm-danger{ background:rgba(192,73,42,0.14); color:#C0735E; cursor:not-allowed; }
.pm-danger.ready{ background:#C0492A; color:#fff; cursor:pointer; }
/* ── Schedule page — prototype header (toolbar / tabs / items bars) ── */
.schd-btn{ border:none;background:var(--card);color:var(--mnk);font-family:inherit;font-size:13px;font-weight:600;height:36px;padding:0 18px;border-radius:999px;cursor:pointer;box-shadow:var(--neo-key);flex-shrink:0;transition:transform .1s ease, box-shadow .1s ease; }
.schd-btn.sm{ box-shadow:var(--neo-key-sm); }
/* ═══════════ Universal button tactility — applies to EVERY