/* FRT branding: white, orange and black. Orange #E8611E is the Filenote iPad app's accent. Orange TEXT uses the darker #B8470F
   because the bright orange is too faint for small text on white (contrast 3.4:1; the darker one is 5.4:1). */
:root { --bg:#ffffff; --panel:#f7f5f2; --ink:#1c1815; --muted:#6b645c; --line:#e4dfd9; --orange:#E8611E; --orange-text:#B8470F; --err:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 -apple-system, system-ui, "Segoe UI", sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .error { color:var(--err); } .pad { padding:16px; }
.topbar { background:#fff; border-bottom:3px solid var(--orange); position:sticky; top:0; z-index:5; }
.topbar-inner { max-width:1200px; margin:0 auto; padding:8px 16px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { height:44px; width:auto; display:block; }
.brand-name { font-weight:800; font-size:22px; letter-spacing:.2px; color:var(--ink); }
.brand-tagline { margin-left:10px; color:var(--muted); font-size:14px; }
.env { margin-left:12px; background:var(--ink); color:#fff; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; }
main { max-width:1200px; margin:0 auto; padding:16px; }
.signin-wrap { display:flex; justify-content:center; padding-top:6vh; }
.signin-card { background:#fff; border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:14px; padding:32px; max-width:460px; text-align:center; box-shadow:0 2px 14px rgba(28,24,21,.08); }
.signin-logo { width:112px; height:auto; }
.signin-card h1 { margin:8px 0 0; font-size:30px; } .subtitle { margin:4px 0 16px; color:var(--muted); }
.signin-button-wrap { margin:20px 0 8px; display:flex; justify-content:center; min-height:44px; }
.status-message { color:var(--err); min-height:1.4em; }
.bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.bar h2 { margin:0; font-size:20px; } .grow { flex:1; min-width:180px; }
input[type=text], input[type=search], input[type=number], select, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
.bar select { width:auto; } .bar input[type=search] { width:auto; }
input[readonly], textarea[readonly], input:disabled { background:transparent; border-color:transparent; padding-left:0; }
button { font:inherit; padding:8px 14px; border:1px solid var(--ink); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; }
button.primary { background:var(--orange); border-color:var(--orange); color:var(--ink); font-weight:700; }   /* dark text on orange, as in the iPad app */
button.primary:hover:not(:disabled) { background:#f2762e; border-color:#f2762e; }
button:disabled { opacity:.45; cursor:default; }
button.link { border:0; background:none; color:var(--orange-text); padding:4px 0; font-weight:600; }
.cases { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.card { text-align:left; padding:14px; border-radius:12px; border:1px solid var(--line); background:#fff; } .card:hover { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.card-title { font-weight:700; } .card-sub { color:var(--muted); font-size:14px; margin-top:2px; }
.chips { margin-top:8px; display:flex; gap:6px; } .chip { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:1px 9px; font-size:12px; }
.chip.warn { color:var(--orange-text); border-color:var(--orange); background:#fff4ee; font-weight:600; }
.notice { background:#fff4ee; border-left:4px solid var(--orange); padding:10px 14px; border-radius:8px; }
.split { display:grid; grid-template-columns:240px 1fr; gap:16px; align-items:start; }
.sections { display:flex; flex-direction:column; gap:2px; position:sticky; top:76px; max-height:calc(100vh - 92px); overflow:auto; }
.sections button { text-align:left; border-color:transparent; background:transparent; border-radius:6px; } .sections button:hover { background:var(--panel); }
.sections button.on { background:var(--ink); color:#fff; font-weight:600; border-color:var(--ink); }
.form { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.form h3 { margin-top:0; padding-bottom:8px; border-bottom:2px solid var(--orange); display:inline-block; }
.row { display:grid; grid-template-columns:minmax(160px,34%) 1fr; gap:12px; align-items:start; padding:7px 0; border-top:1px solid var(--line); }
.row.check { align-items:center; } .row.check input { justify-self:start; width:20px; height:20px; accent-color:var(--orange); }
.lbl { color:var(--muted); font-size:14px; padding-top:8px; } .row.check .lbl { padding-top:0; }
.toast { position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:20; padding:10px 18px; border-radius:10px; max-width:90vw; color:#fff; background:var(--ink); border-left:5px solid var(--orange); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.toast.error { background:var(--err); border-left-color:#fff; }
@media (max-width:760px) { .split { grid-template-columns:1fr; } .sections { position:static; flex-direction:row; flex-wrap:wrap; max-height:none; } .row { grid-template-columns:1fr; } .brand-tagline { display:none; } }