/* Shared theme: navy navigation, teal actions, and light work surfaces. */
:root { --navy:#142c3c; --navy-deep:#102331; --teal:#087f78; --teal-dark:#05635e; --bg:#f3f6f8; --paper:#fff; --ink:#203544; --muted:#637784; --line:#dce5e9; --radius:12px; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--bg); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.55; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,select,textarea { font:inherit; }
button,.button,input[type=submit] { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--teal); border:1px solid transparent; color:white; padding:10px 18px; border-radius:7px; cursor:pointer; font-weight:600; min-height:42px; text-decoration:none; transition:background .15s; }
button:hover,.button:hover,input[type=submit]:hover { background:var(--teal-dark); text-decoration:none; }
button:disabled { opacity:.5; cursor:not-allowed; }
.secondary,button[id^=close],.cancel { background:white; color:var(--ink); border:1px solid var(--line); }
.secondary:hover,button[id^=close]:hover,.cancel:hover { background:#edf3f5; color:var(--ink); }
:focus-visible { outline:3px solid #21a79b; outline-offset:3px; }
input:not([type=checkbox]):not([type=hidden]):not([type=submit]),select,textarea { width:100%; min-height:43px; border:1px solid #cbd8df; border-radius:6px; background:white; color:var(--ink); padding:10px 12px; }
input::placeholder { color:#788c98; }
input[readonly] { background:#f1f5f7!important; color:var(--muted)!important; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
input[type=checkbox] { accent-color:var(--teal); width:17px; height:17px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:32px; line-height:1.2; letter-spacing:-1px; margin-bottom:10px; }
h2 { font-size:21px; letter-spacing:-.45px; line-height:1.3; }
h3 { font-size:18px; }
h4 { font-size:22px; margin:0 0 22px; }
p { color:var(--muted); }
.hidden { display:none!important; }
.eyebrow { font-size:10px; letter-spacing:1.7px; font-weight:750; color:var(--teal); margin-bottom:12px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:240px; background:var(--navy-deep); color:#fff; padding:32px 20px; display:flex; flex-direction:column; z-index:30; }
.brand { display:flex; gap:12px; align-items:center; color:inherit; font-size:13px; font-weight:750; letter-spacing:1.2px; line-height:1.5; }
.brand:hover { text-decoration:none; }
.brand small { display:block; color:#9bb0be; font-size:10px; letter-spacing:.3px; font-weight:400; }
.brand-mark { display:grid; place-items:center; width:38px; height:42px; background:#ffffff0b; border:1px solid #ffffff25; border-radius:8px; font-size:32px; color:#78d6cb; }
.nav-caption { font-size:10px; color:#88a1b2; letter-spacing:1.5px; margin:42px 12px 12px; }
.sidebar nav a { display:flex; gap:12px; color:#c4d0d9; padding:12px 14px; border-radius:7px; margin:4px 0; font-size:13px; }
.sidebar nav a span { font-size:18px; width:18px; line-height:1; }
.sidebar nav a:hover { background:#ffffff08; text-decoration:none; color:white; }
.sidebar nav a[aria-current=page] { background:#20444d; color:#b5f0e5; border-left:3px solid #53c9b7; padding-left:11px; }
.sidebar-bottom { margin-top:auto; font-size:11px; color:#a8bdca; border-top:1px solid #ffffff16; padding-top:22px; }
.sidebar-bottom small { display:block; margin:8px 0 0 14px; color:#6f8b9f; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#69c9b5; margin-right:8px; }
.workspace-area { margin-left:240px; min-width:0; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid var(--line); padding:0 38px; color:var(--muted); font-size:12px; }
.breadcrumb { margin-left:14px; color:var(--ink); }
.account { display:flex; gap:18px; align-items:center; }
.account form { margin:0; }
.account button { font-size:12px; min-height:34px; padding:6px 12px; }
main { padding:36px 38px; max-width:1800px; min-width:0; margin:auto; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.page-heading p:last-child { margin-bottom:0; }
.page-footer { padding:22px 38px; color:var(--muted); font-size:11px; display:flex; justify-content:space-between; }
.panel,.nav-container { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 5px 22px #142c3c06; }
.welcome-panel { display:flex; justify-content:space-between; overflow:hidden; background:#e6f0ef; border:1px solid #d3e4e1; border-radius:var(--radius); padding:36px 40px; gap:20px; }
.welcome-panel h2 { font-size:34px; font-weight:600; letter-spacing:-1px; }
.welcome-panel p { max-width:380px; }
.text-link { font-weight:600; font-size:13px; }
.welcome-panel .text-link { margin-left:20px; }
.roll-illustration { position:relative; width:280px; min-width:240px; display:grid; place-items:center; }
.roll-illustration>div { width:190px; height:190px; border:28px solid #7d999d; border-radius:50%; box-shadow:inset 0 0 0 5px #b8cfcd,0 0 0 2px #557b80,0 0 0 12px #bed2d0,14px 20px 0 #305c6420; transform:rotateX(25deg) rotateY(-22deg); background:#deebe9; }
.roll-illustration span { position:absolute; bottom:0; font-size:8px; letter-spacing:1.9px; color:#5a7d80; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin:30px 0 16px; gap:12px; }
.section-heading h2 { margin:0; }
.section-heading>span { font-size:12px; color:var(--muted); }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quick-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:24px; color:var(--ink); }
.quick-card:hover { border-color:var(--teal); text-decoration:none; }
.card-number { display:block; font-size:11px; color:var(--teal); margin-bottom:24px; }
.card-number span { float:right; font-size:20px; }
.quick-card p { font-size:13px; margin-bottom:0; }
.instructions { margin-top:28px; }
.instructions .section-heading { margin-top:0; }
.instructions iframe { width:100%; height:380px; border:1px solid var(--line); border-radius:8px; }
.search-container { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px; background:white; border:1px solid var(--line); border-radius:12px 12px 0 0; }
.search-container>input { flex:1; min-width:200px; max-width:620px; }
.filter-label { display:flex; align-items:center; gap:8px; margin:0; }
.advanced-search-div { order:5; display:grid; grid-template-columns:repeat(4,minmax(100px,1fr)); gap:12px; width:100%; padding-top:18px; border-top:1px solid var(--line); }
.result-container { overflow:auto; background:white; border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; max-height:65vh; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:12px; background:white; }
th { background:#eaf0f3; color:#486272; font-size:10px; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; position:sticky; top:0; z-index:1; padding:15px 14px; border-bottom:1px solid var(--line); }
td { padding:13px 14px; border-bottom:1px solid #e9eef1; white-space:nowrap; }
tbody tr:nth-child(even) { background:#f8fafb; }
tbody tr:hover { background:#edf6f4; }
td button { padding:6px 9px; min-height:30px; font-size:11px; }
.edit-btn:has(img) { background:transparent; border:1px solid var(--line); }
.edit-btn img { width:14px; height:14px; object-fit:contain; }
.empty-state { text-align:center; padding:70px 20px!important; white-space:normal; }
.empty-state strong,.empty-state span { display:block; }
.empty-state strong { font-size:16px; margin-bottom:8px; }
.empty-state span { color:var(--muted); font-size:13px; }
mark { background:#bdebdc; padding:1px 2px; border-radius:2px; }
.trace-entry { max-width:900px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trace-entry h2,.trace-entry .form-intro { grid-column:1/-1; margin-bottom:0; }
.trace-entry input[type=submit] { grid-column:1/-1; justify-self:end; min-width:170px; }
.trace-entry .form-intro { margin-bottom:5px; font-size:13px; }
#editModal,#addModal,#traceEditModal,#upload-overlay { position:fixed; inset:0; background:#10233199; backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100; }
#modalDiv,#addModalDiv,#traceModalDiv,.upload-widget { background:white; border-radius:14px; padding:28px; width:min(850px,100%); max-height:88vh; overflow:auto; box-shadow:0 24px 80px #0003; }
#form-wrapper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#form-wrapper input,#form-wrapper select { margin-top:5px; }
#trace-form-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#traceEditForm>div:last-child,#editForm>div:last-child,#addForm>div:last-child { margin-top:22px; }
#count-per-loc { width:100%!important; min-height:340px; background:white; border:1px solid var(--line); border-radius:12px; margin-top:18px; }
.nav-container iframe { width:100%; min-height:500px; }
.nav-container { margin-bottom:24px; }
.upload-drop-area { border:2px dashed #bdd0d5; padding:30px; border-radius:8px; margin:15px 0; cursor:pointer; }
.upload-button { margin:10px 8px 0 0; }
#options { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.import-note { width:100%; font-size:12px; margin:8px 0; color:var(--muted); }
#table-container:not(:empty) { margin-top:20px; }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; max-width:none; padding:0; }
.auth-story { display:flex; flex-direction:column; justify-content:space-between; padding:50px 60px; background:var(--navy-deep); color:white; min-height:100vh; }
.auth-story h1 { font-size:52px; line-height:1.18; letter-spacing:-2px; font-weight:550; }
.auth-story p { color:#aec2cc; max-width:390px; }
.auth-story .eyebrow { color:#80d2c5; }
.auth-story>small { color:#8da7b7; }
.auth-panel { display:grid; place-items:center; padding:40px; }
.auth-card { width:100%; max-width:390px; }
.auth-card h1 { font-size:30px; margin-bottom:24px; }
.auth-card form>div { margin-bottom:18px; }
.auth-card input { margin:4px 0 14px; }
.auth-card button { width:100%; margin-top:8px; }
.auth-card p { font-size:13px; margin-top:20px; }
.auth-card .eyebrow { margin-top:0; font-size:10px; }
.auth-card label { color:var(--ink); }
.skip-link { position:fixed; top:-100px; left:16px; background:white; padding:12px; z-index:200; }
.skip-link:focus { top:8px; }
.team-panel { margin-top:24px; }
.team-panel ul { display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.team-panel li { background:#edf4f2; border-radius:6px; padding:8px 12px; color:#37645c; font-size:12px; }
/* Compatibility utilities for existing account/admin forms. */
.overflow-hidden { overflow:auto; }
.mb-4 { margin-bottom:16px; }
.p-4 { padding:16px; }
.rounded { border-radius:8px; }
.bg-green-100 { background:#e0f2e8; color:#245a40; }
.bg-red-100 { background:#fce5e4; color:#8d302e; }
.text-green-400,.text-green-500 { color:#16715d; }
.text-red-400,.text-red-500 { color:#ad3939; }
.flex { display:flex; }
.space-x-2 { gap:8px; }
.space-y-4>*+* { margin-top:16px; }
.mt-4 { margin-top:16px; }
.text-center { text-align:center; }
.w-full { width:100%; }
.bg-red-600 { background:#a74040; }
.bg-green-600 { background:var(--teal); }
.bg-blue-600 { background:#315e85; }
.fa-spinner:before { content:'\25cc'; display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:1600px) { main { padding:42px 52px; } }
@media(max-width:1100px) {
.sidebar { width:205px; padding:28px 14px; }
.workspace-area { margin-left:205px; }
main { padding:28px 24px; }
.topbar { padding:0 24px; }
.roll-illustration { display:none; }
.welcome-panel { padding:28px; }
.quick-grid { gap:12px; }
.quick-card { padding:20px; }
#form-wrapper { grid-template-columns:1fr 1fr; }
.auth-story { padding:38px; }
.auth-story h1 { font-size:42px; }
}
@media(max-width:760px) {
.sidebar { position:static; width:auto; padding:18px; }
.sidebar nav { display:flex; gap:4px; overflow-x:auto; align-items:center; scrollbar-width:thin; scrollbar-color:#537987 transparent; }
.sidebar nav a { white-space:nowrap; font-size:12px; padding:10px; }
.sidebar nav a span,.sidebar-bottom,.nav-caption { display:none; }
.sidebar .brand { margin-bottom:14px; }
.workspace-area { margin-left:0; }
.topbar { height:62px; padding:0 18px; }
.account>span { display:none; }
main { padding:25px 18px; }
.page-heading { align-items:flex-start; flex-wrap:wrap; }
h1 { font-size:28px; }
.welcome-panel h2 { font-size:29px; }
.welcome-panel .text-link { display:block; margin:16px 0 0; }
.quick-grid { grid-template-columns:1fr; }
.card-number { margin-bottom:10px; }
.section-heading { align-items:flex-start; }
.section-heading>span { display:none; }
.trace-entry { grid-template-columns:1fr; padding:20px; }
.advanced-search-div { grid-template-columns:1fr 1fr; }
.auth-layout { grid-template-columns:1fr; }
.auth-story { min-height:0; padding:24px; }
.auth-story>div,.auth-story>small { display:none; }
.auth-panel { padding:40px 24px; }
.auth-card { max-width:420px; }
#form-wrapper,#trace-form-wrapper { grid-template-columns:1fr; }
#modalDiv,#addModalDiv,#traceModalDiv { padding:20px; }
.page-footer { padding:20px 18px; }
.instructions { padding:18px; }
.nav-container { padding:16px; }
.page-footer span { display:none; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; animation:none!important; } }