/* Data Hives: white design, dark sidebar only. */
:root { --red:#b30000; --ink:#1f1f1f; --muted:#5f5e5a; --line:#e0ded6; --bg:#ffffff; --card:#ffffff; --soft:#f6f5f1;
        --link:#b30000; --ok:#1b6e3c; --warn:#8a5a00; --bad:#a32d2d;
        --side:#1f2328; --side-hover:#30363d; --side-ink:#e8e8e8; --side-muted:#9aa0a6; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
a { color:var(--link); }
h1 { font-size:1.5rem; margin:.2rem 0 .6rem; } h2 { font-size:1.1rem; margin:1.4rem 0 .5rem; }
.muted { color:var(--muted); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--ink); }
.logo { height:34px; } .wordmark { font-weight:700; letter-spacing:.08em; color:var(--red); font-size:1.3rem; } .wordmark.big { font-size:2.2rem; margin-bottom:.5rem; }
.product { font-weight:600; font-size:1.1rem; border-left:1px solid var(--line); padding-left:.8rem; }
.who { display:flex; gap:1rem; align-items:center; }
.shell { display:flex; min-height:calc(100vh - 56px); }
.rail { width:210px; padding:1rem .8rem; background:var(--side); display:flex; flex-direction:column; gap:.3rem; }
.rail a { text-decoration:none; padding:.4rem .6rem; border-radius:4px; color:var(--side-ink); } .rail a:hover { background:var(--side-hover); }
.rail-title { margin-top:.9rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--side-muted); padding-left:.6rem; }
.content { flex:1; padding:1.2rem 1.6rem; max-width:1100px; margin:0 auto; background:var(--bg); }
.shell > .content:only-child { width:100%; }   /* signed-out pages (no sidebar): content fills the width, centred by .content margins */
.content:has(> .tiles) { max-width:none; margin:0; }   /* dashboard: use the full width so more app tiles fit */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,250px)); gap:1.2rem; margin:1rem 0; }
.tile { display:flex; flex-direction:column; gap:.3rem; padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); min-height:130px; }
.tile:hover { border-color:var(--red); box-shadow:0 1px 6px rgba(0,0,0,.08); } .badge { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; background:var(--red); color:#fff; font-weight:700; }
.tile-name { font-weight:600; } .tile-desc { color:var(--muted); font-size:.9rem; }
.login-card { max-width:420px; margin:12vh auto; padding:2rem; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.login-logo { max-height:70px; max-width:100%; margin-bottom:.5rem; }
.btn { display:inline-block; padding:.5rem 1rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; font:inherit; }
.btn:hover { background:var(--soft); }
.btn.primary { background:var(--red); border-color:var(--red); color:#fff; } .btn.primary:hover { background:#8f0000; } .btn.danger { border-color:var(--bad); color:var(--bad); } .btn[disabled] { opacity:.5; cursor:not-allowed; }
button.link { background:none; border:0; color:var(--link); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }
.form { display:flex; flex-direction:column; gap:.7rem; max-width:520px; } .form label { display:flex; flex-direction:column; gap:.2rem; font-weight:600; }
input, select, textarea { font:inherit; padding:.4rem .5rem; border:1px solid #cfcdc4; border-radius:6px; background:#fff; color:var(--ink); }
/* Dashboard honeycomb: flat-topped hexagons (points left and right) with a red outline. Apps and reports are two
   separate hives; positions are computed on the server (services/portal.py hex_layout). */
.dash-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.dash-admin { margin:0; }
.hive-section { margin:1.2rem 0 2.2rem; }
.hive-title { font-size:1rem; font-weight:600; color:var(--ink); margin:0 0 .6rem; }
.hive-scroll { overflow-x:auto; padding:.4rem 0 .6rem; }
/* Size must match HEX_W / HEX_H in app/services/portal.py (a test checks this). */
.content:has(> .dash-head) { max-width:none; margin:0; }   /* dashboard only: left-aligned, full width */
.hive { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; margin:0; }
.hive.js-ready { display:block; position:relative; }
.hex { position:relative; width:176px; height:152px; background:var(--red); text-decoration:none; color:var(--ink);
       clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.hive.js-ready .hex { position:absolute; }
.center { text-align:center; }
.hex-in { position:absolute; inset:3px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
          gap:.3rem; text-align:center; padding:0 26px;
          clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.hex:hover .hex-in, .hex:focus-visible .hex-in { background:#fdeceb; }
.hex:focus-visible { outline:none; background:#7a0000; }
.hex-name { font-weight:700; line-height:1.15; font-size:.95rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hex-app .badge { width:30px; height:30px; font-size:.78rem; border-radius:6px; }
.hex-report .hex-name { color:var(--ink); font-size:.95rem; }
.hex .badge { width:30px; height:30px; font-size:.78rem; border-radius:6px; }
.hive-edit { font-size:.9rem; font-weight:400; margin-left:.4rem; }
.field-label { display:block; font-weight:600; margin-bottom:.2rem; }
.picker-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.3rem 0; align-items:center; }
.pick-chip { cursor:default; }
.pick-kind { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.picker-search { display:flex; gap:.4rem; margin:.3rem 0; } .picker-search .picker-q { flex:1; }
.picker-results { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.3rem; }
.pick-result { display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline; text-align:left; padding:.35rem .6rem; border:1px solid var(--line);
               border-radius:6px; background:var(--card); cursor:pointer; font:inherit; }
.pick-result:hover, .pick-result:focus-visible { border-color:var(--red); background:#fdeceb; }
.pick-name { font-weight:600; } .pick-detail { font-size:.85rem; }
.tabs { display:flex; gap:.4rem; margin:.4rem 0 .6rem; }
.tab { padding:.4rem .9rem; border:1px solid var(--line); border-radius:8px 8px 0 0; text-decoration:none; color:var(--ink); background:var(--soft); }
.tab.active { background:var(--card); border-color:var(--red); border-bottom-color:var(--card); color:var(--red); font-weight:600; }
.page-title { text-align:center; margin:1rem 0 1.2rem; }
.upload-card { max-width:720px; margin:0 auto 2rem; padding:1.6rem 1.8rem; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.05);
               display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.2rem; align-items:start; }
.upload-card .btn.primary { align-self:end; }
.upload-card .span2 { grid-column:span 2; } .upload-card .span3 { grid-column:1 / -1; }
.upload-card label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; font-weight:600; color:var(--muted); min-width:0; }
.upload-card input, .upload-card select { width:100%; font-size:.95rem; font-weight:400; color:var(--ink); }
.upload-card input:focus, .upload-card select:focus { outline:2px solid var(--red); outline-offset:0; border-color:var(--red); }
.upload-card .btn.primary { padding:.62rem 1rem; font-weight:600; }
@media (max-width:760px) { .shell { flex-direction:column; } .rail { width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:.5rem .8rem; } .rail-title { display:none; } .content { padding:1rem; } }
@media (max-width:640px) { .upload-card { grid-template-columns:1fr; } .upload-card .span2, .upload-card .span3 { grid-column:1; } }
.inline { display:flex; gap:.5rem; margin:.6rem 0; } .inline-form { max-width:none; flex-direction:row; align-items:flex-end; }
.two-col { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; } .instructions { max-width:300px; color:var(--bad); } .instructions h2 { color:var(--bad); }
.grid { width:100%; border-collapse:collapse; background:var(--card); } .grid th, .grid td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); } .grid thead th { background:var(--soft); } .grid.small { width:auto; min-width:320px; }
.status { padding:.1rem .5rem; border-radius:20px; font-size:.8rem; border:1px solid var(--line); }
.status.ok, .status.active { color:var(--ok); } .status.ok_with_issues, .status.hidden { color:var(--warn); }
.status.load_failed, .status.needs_mapping, .status.rejected_file, .status.invalid_profile, .status.no_valid_rows, .status.deleted { color:var(--bad); }
.notice { padding:.6rem .8rem; border-left:4px solid var(--warn); background:var(--soft); } .notice.error { border-color:var(--bad); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.6rem .9rem; margin:.7rem 0; } .panel summary { cursor:pointer; font-weight:600; }
.actions { display:flex; gap:1rem; align-items:center; margin-top:.6rem; } .check { font-weight:400; }
.tray { display:flex; flex-wrap:wrap; gap:.5rem; padding:.7rem; min-height:56px; border:2px dashed #cfcdc4; border-radius:8px; background:var(--soft); }
.boxes { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.8rem; margin-bottom:1rem; }
.box { border:2px solid var(--line); border-radius:8px; padding:.6rem; background:var(--card); } .box.over, .tray.over { border-color:var(--red); background:rgba(179,0,0,.06); }
.box.required { border-color:#e3b3b3; }
.box.disabled { background:var(--soft); border-style:dashed; opacity:.55; cursor:not-allowed; }
.opt, .off { color:var(--muted); font-weight:400; font-size:.8rem; }
.box-title { font-weight:700; margin-bottom:.4rem; } .req { color:var(--bad); font-weight:400; font-size:.8rem; } .box-body { min-height:46px; display:flex; flex-direction:column; gap:.3rem; }
.chip { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.3rem .5rem; border:1px solid #cfcdc4; border-radius:6px; background:#fff; cursor:grab; }
.chip-name { font-weight:600; } .chip-sample { color:var(--muted); font-size:.8rem; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-move { font-size:.8rem; padding:.1rem; } .chip-x { font-size:.75rem; border:0; background:none; color:var(--link); cursor:pointer; text-decoration:underline; }
.add-alias { margin-top:.5rem; width:100%; }

.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal { background:var(--card); border-radius:10px; padding:1.4rem 1.6rem; max-width:440px; width:calc(100% - 2rem); border-top:6px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.modal h2 { margin:0 0 .5rem; } .modal.success { border-color:#2e7d32; } .modal.success h2 { color:#2e7d32; }
.modal.warn { border-color:var(--warn); } .modal.fail { border-color:var(--bad); } .modal.fail h2 { color:var(--bad); }
.field-grid th.grp { text-align:center; border-bottom:1px solid var(--line); } .field-grid th.chk, .field-grid td.chk { text-align:center; width:84px; }
.field-grid input[type=checkbox] { width:18px; height:18px; accent-color:var(--red); } .field-grid tr.custom-row { background:rgba(179,0,0,.04); }