/* Coreunda Portal — shared chrome. Tokens match coreunda.com exactly
   (website/index.html :root) so the portal reads as the same product,
   not a separate skin. */
:root{
  --bg:#F5F7F6;
  --surface:#FFFFFF;
  --surface-2:#EAF0EE;
  --ink:#101917;
  --ink-muted:#5B655F;
  --line:#D7E0DC;
  --accent:#1B6E6A;
  --accent-ink:#FFFFFF;
  --accent-2:#B8792F;
  --accent-soft:rgba(27,110,106,0.10);
  --danger:#B23A2E;
  --danger-soft:rgba(178,58,46,0.10);
  --ok:#1B6E6A;
  --demo-bg:#FCEFDD;
  --demo-border:#D9A257;
  --demo-ink:#6B4A1E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1412; --surface:#152420; --surface-2:#1B2A26;
    --ink:#E9EDEC; --ink-muted:#93A19C; --line:#2C3D38;
    --accent:#57C4B9; --accent-ink:#06201D; --accent-2:#D9A257;
    --accent-soft:rgba(87,196,185,0.14);
    --danger:#E08575; --danger-soft:rgba(224,133,117,0.14);
    --demo-bg:#2B2011; --demo-border:#8C6423; --demo-ink:#E7C48C;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1412; --surface:#152420; --surface-2:#1B2A26;
  --ink:#E9EDEC; --ink-muted:#93A19C; --line:#2C3D38;
  --accent:#57C4B9; --accent-ink:#06201D; --accent-2:#D9A257;
  --accent-soft:rgba(87,196,185,0.14);
  --danger:#E08575; --danger-soft:rgba(224,133,117,0.14);
  --demo-bg:#2B2011; --demo-border:#8C6423; --demo-ink:#E7C48C;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;}
a{color:inherit;}

.demo-strip{
  background:var(--demo-bg);color:var(--demo-ink);border-bottom:1px solid var(--demo-border);
  font-size:0.78rem;text-align:center;padding:0.4rem 1rem;letter-spacing:0.02em;
}
.demo-strip b{font-weight:700;}

.shell{display:flex;min-height:calc(100vh - 2rem);}

.sidebar{
  width:220px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:1.1rem 0.9rem;
}
.sidebar .brand{display:flex;align-items:center;gap:0.55rem;padding:0.3rem 0.4rem 1.4rem;}
.sidebar .brand img{height:22px;width:auto;}
.sidebar .brand span{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:1.05rem;}
.nav{display:flex;flex-direction:column;gap:0.2rem;flex:1;}
.nav a{
  display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.7rem;border-radius:8px;
  font-size:0.9rem;text-decoration:none;color:var(--ink-muted);
}
.nav a .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;flex:none;}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.nav a.active .dot{opacity:1;}
.nav a.disabled{opacity:0.45;cursor:default;}
.nav a:not(.disabled):not(.active):hover{background:var(--surface-2);color:var(--ink);}
.nav-tag{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.05em;background:var(--surface-2);color:var(--ink-muted);padding:0.1rem 0.4rem;border-radius:4px;margin-left:auto;}

/* Mobile sidebar toggle: hidden entirely on desktop, where the sidebar
   has room to show the nav and tenant box inline (see the mobile media
   query at the bottom of this file for the collapsed layout). */
.sidebar-toggle-checkbox{ position:absolute; opacity:0; pointer-events:none; }
.sidebar-toggle-label{ display:none; }

.tenant-box{border-top:1px solid var(--line);padding-top:0.9rem;margin-top:0.6rem;}
.tenant-box .name{font-size:0.85rem;font-weight:600;}
.tenant-box .role{font-size:0.75rem;color:var(--ink-muted);}
.tenant-box .logout{display:block;margin-top:0.6rem;font-size:0.8rem;color:var(--accent);text-decoration:none;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem 1.5rem;border-bottom:1px solid var(--line);background:var(--surface);
}
.topbar h1{font-family:'IBM Plex Serif',Georgia,serif;font-size:1.15rem;margin:0;font-weight:600;}
.topbar .crumb{font-size:0.78rem;color:var(--ink-muted);margin-bottom:0.15rem;}
.topbar .right{display:flex;align-items:center;gap:0.9rem;font-size:0.82rem;color:var(--ink-muted);}
.pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0.25rem 0.7rem;font-size:0.78rem;}

.content{flex:1;padding:1.5rem;overflow:auto;}
.content-flush{flex:1;overflow:hidden;display:flex;}
.content-flush iframe{border:0;width:100%;height:100%;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.4rem;}
.card + .card{margin-top:1.1rem;}
.card h2{font-size:1rem;margin:0 0 0.9rem;font-family:'IBM Plex Sans',sans-serif;font-weight:600;}
.card p.hint{color:var(--ink-muted);font-size:0.85rem;margin:0 0 1rem;}

.btn{
  display:inline-flex;align-items:center;gap:0.4rem;background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:8px;padding:0.6rem 1.1rem;font-size:0.88rem;font-weight:600;cursor:pointer;
  font-family:inherit;
}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

.dropzone{
  border:1.5px dashed var(--line);border-radius:10px;padding:2rem 1rem;text-align:center;color:var(--ink-muted);
  font-size:0.88rem;background:var(--surface-2);
}
.dropzone strong{color:var(--ink);}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem;margin:1rem 0;}
.field label{display:block;font-size:0.78rem;color:var(--ink-muted);margin-bottom:0.3rem;}
.field input,.field select{
  width:100%;padding:0.5rem 0.65rem;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:0.85rem;
}

table{width:100%;border-collapse:collapse;font-size:0.85rem;}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;}
th,td{text-align:left;padding:0.65rem 0.9rem;border-bottom:1px solid var(--line);white-space:nowrap;}
th{background:var(--surface-2);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-muted);font-weight:600;}
tr:last-child td{border-bottom:none;}

.badge{font-size:0.7rem;font-weight:600;padding:0.15em 0.55em;border-radius:4px;text-transform:uppercase;letter-spacing:0.03em;}
.badge-ok{background:var(--accent-soft);color:var(--accent);}
.badge-err{background:var(--danger-soft);color:var(--danger);}
.badge-warn{background:rgba(184,121,47,0.12);color:var(--accent-2);}

.err-list{margin:0;padding-left:1.1rem;font-size:0.82rem;color:var(--danger);}
.err-list li{margin-bottom:0.2rem;}

[hidden]{display:none!important;}

/* Mobile layout: the sidebar was a fixed 220px column regardless of
   viewport width, which left almost no room for .main's content on a
   phone. Below 760px the sidebar becomes a slim horizontal top bar
   (brand + hamburger), and .main takes the full width beneath it. */
@media (max-width:760px){
  /* Height, not min-height: on mobile Safari/Chrome a min-height-only
     chain (.shell -> .main -> .content-flush -> iframe[height:100%]) is
     unreliable — flex items keep a default min-height:auto based on their
     own content's intrinsic size (an iframe's replaced-element default is
     ~150px), which can win out over flex-grow and leave the iframe sized
     to that small intrinsic height instead of the space we want it to
     fill. Setting an explicit height at every link in the chain, plus
     min-height:0 on the intermediate flex items, removes that ambiguity.
     100dvh (falling back to 100vh) also avoids mobile browsers' address
     bar inflating the viewport height beyond what's actually visible. */
  html,body{height:100%;}
  .shell{
    flex-direction:column;
    height:100vh; height:100dvh;
    min-height:0;
  }
  .sidebar{
    width:100%; flex:none; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;
    border-right:none; border-bottom:1px solid var(--line); padding:0.7rem 0.9rem;
  }
  .sidebar .brand{padding:0;}
  .sidebar-toggle-label{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:30px; cursor:pointer;
  }
  .sidebar-toggle-label span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:1px; }
  .nav{ display:none; flex:0 0 100%; padding-top:0.8rem; }
  .tenant-box{ display:none; flex:0 0 100%; }
  .sidebar-toggle-checkbox:checked ~ .nav{ display:flex; }
  .sidebar-toggle-checkbox:checked ~ .tenant-box{ display:block; }

  .main{ flex:1 1 auto; min-height:0; }
  .content-flush{ flex:1 1 auto; min-height:0; }
  .content-flush iframe{ display:block; height:100%; min-height:0; }

  .topbar{padding:0.8rem 1rem;}
  .content{padding:1rem;}
  .field-row{grid-template-columns:1fr;}
}