:root { --ink:#162338; --muted:#65738a; --navy:#0d1d33; --navy-2:#132a48; --teal:#18a999; --brand-cyan:#10d9eb; --brand-magenta:#e915a2; --brand-violet:#5a2fc2; --canvas:#f3f6fa; --line:#dce4ee; }
html { font-size:16px; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Segoe UI",Tahoma,Arial,sans-serif; }
.app-sidebar { position:fixed; inset-block:0; inset-inline-start:0; width:270px!important; background:linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff; padding:1.1rem; z-index:1045; display:flex; flex-direction:column; overflow:visible; transition:width .22s ease,padding .22s ease; }
.app-sidebar::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:linear-gradient(90deg,var(--brand-cyan),var(--brand-violet),var(--brand-magenta)); }
.brand { display:flex; gap:.75rem; align-items:center; min-height:60px; padding:.25rem .2rem 1rem; border-bottom:1px solid #ffffff1c; }
.brand-mark { position:relative; flex:0 0 42px; display:block; width:42px; height:42px; overflow:hidden; border:1px solid #ffffff45; border-radius:13px; background:#eef3f5; box-shadow:0 0 18px #10d9eb38; }
.brand-mark img { position:absolute; width:76px; max-width:none; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); }
.brand-copy { min-width:0; line-height:1.2; white-space:nowrap; overflow:hidden; }
.brand-name { display:grid; gap:.05rem; font-size:.91rem; line-height:1.12; letter-spacing:.01em; }
.brand-name span { display:block; }
.brand small { display:block; color:#aebed1; font-size:.78rem; margin-top:.2rem; }
.sidebar-collapse-toggle { display:flex; margin-inline-start:auto; flex:0 0 34px; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid #ffffff28; border-radius:.6rem; color:#d9e4ef; background:#ffffff0b; }
.sidebar-collapse-toggle:hover { color:#fff; background:#ffffff18; }
.sidebar-nav { flex:1; min-height:0; margin-top:1rem; gap:.3rem; }
.sidebar-link,.sidebar-group-toggle { display:flex; align-items:center; gap:.75rem; width:100%; min-height:44px; color:#d9e4ef; text-decoration:none; padding:.62rem .75rem; border:0; border-radius:.62rem; background:transparent; font-size:.94rem; text-align:start; cursor:pointer; white-space:nowrap; }
.sidebar-link:hover,.sidebar-group-toggle:hover { color:#fff; background:#ffffff12; }
.sidebar-link.active { color:#fff; background:#18a9992e; box-shadow:inset 3px 0 0 var(--teal); }
.nav-icon { flex:0 0 1.4rem; width:1.4rem; font-size:1.15rem; line-height:1; text-align:center; }
.nav-label { overflow:hidden; text-overflow:ellipsis; }
.sidebar-group { position:relative; }
.sidebar-group > summary { list-style:none; }
.sidebar-group > summary::-webkit-details-marker { display:none; }
.group-chevron { margin-inline-start:auto; font-size:.75rem; transition:transform .18s ease; }
.sidebar-group[open] > .sidebar-group-toggle .group-chevron { transform:rotate(180deg); }
.sidebar-submenu { display:grid; gap:.2rem; padding:.25rem 0 .35rem; }
.sidebar-submenu .sidebar-link { min-height:39px; padding-block:.5rem; padding-inline-start:2.85rem; font-size:.88rem; }
.sidebar-submenu .nav-icon { font-size:1rem; }
.sidebar-logout { font-family:inherit; }
.sidebar-submenu form { margin:0; }
.sidebar-admin-group { margin-top:auto; padding-top:.55rem; border-top:1px solid #ffffff1c; }
.app-main { margin-inline-start:270px; min-height:100vh; transition:margin-inline-start .22s ease; }
.page-shell { max-width:1500px; margin:auto; padding:2rem; }
.page-head { position:relative; display:flex; justify-content:space-between; gap:1.25rem; align-items:center; margin-bottom:1.5rem; padding:1.35rem 1.5rem; overflow:hidden; border:1px solid #dce6f1; border-radius:1.2rem; background:linear-gradient(120deg,#ffffff 0%,#f8fbff 72%,#eef8f7 100%); box-shadow:0 12px 30px #17345c10; }
.page-head::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:5px; background:linear-gradient(180deg,var(--brand-cyan),var(--brand-violet),var(--brand-magenta)); }
.page-head::after { content:""; position:absolute; inset-block-start:-55px; inset-inline-end:8%; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,#18a9991b 0%,transparent 70%); pointer-events:none; }
.page-head > div:first-child { position:relative; z-index:1; min-width:0; }
.page-head h1 { display:flex; align-items:center; gap:.65rem; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin:0; }
.page-head h1::before { content:""; flex:0 0 .62rem; width:.62rem; height:1.65rem; border-radius:999px; background:linear-gradient(180deg,var(--teal),var(--brand-cyan)); box-shadow:0 4px 12px #18a99955; }
.page-head p { color:var(--muted); margin:.45rem 0 0; font-size:.9rem; line-height:1.55; }
.page-head > a,.page-head > .btn { position:relative; z-index:1; flex:0 0 auto; border-radius:.75rem; font-weight:700; box-shadow:0 5px 14px #17345c12; }
.btn .btn-action-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-inline-end:.45rem; font-size:1.05em; line-height:1; vertical-align:-.08em; opacity:.92; }
.btn:disabled .btn-action-icon,.btn.disabled .btn-action-icon { opacity:.55; }
.page-head .badge { position:relative; z-index:1; }
.tenant-tab-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin:0 0 1.4rem; padding:.8rem; border:1px solid #d8e3ef; border-radius:1.25rem; background:linear-gradient(135deg,#ffffffee,#f7faff); box-shadow:0 12px 30px #17345c0d; }
.tenant-tab { position:relative; display:flex; align-items:center; gap:.7rem; min-width:0; min-height:68px; padding:.72rem .8rem; border:1px solid #e1e9f2; border-radius:.95rem; color:var(--ink); background:#fff; text-align:start; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease; }
.tenant-tab:hover { transform:translateY(-2px); border-color:#a9c5e3; box-shadow:0 8px 18px #17345c14; }
.tenant-tab.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,#0d2a49,#176d76); box-shadow:0 10px 22px #0d2a4938; }
.tenant-tab.active::after { content:""; position:absolute; inset-inline-start:1rem; inset-inline-end:1rem; inset-block-end:-.35rem; height:3px; border-radius:9px; background:var(--brand-cyan); }
.tenant-tab-icon { flex:0 0 2.1rem; width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:.7rem; color:#0b7f82; background:#e7f7f6; font-size:1.15rem; font-weight:800; }
.tenant-tab.active .tenant-tab-icon { color:#fff; background:#ffffff26; }
.tenant-tab b,.tenant-tab small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-tab b { font-size:.9rem; line-height:1.25; }
.tenant-tab small { margin-top:.22rem; color:var(--muted); font-size:.72rem; }
.tenant-tab.active small { color:#d8f4f3; }
.page-eyebrow { width:max-content; margin-bottom:.3rem; color:var(--brand-violet); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.panel,.metric-card { background:#fff; border:1px solid var(--line); border-radius:1rem; box-shadow:0 8px 24px #17345c0a; }
.panel { padding:1.25rem; margin-bottom:1.25rem; }
.metric-card { padding:1rem 1.1rem; height:100%; border-top:3px solid var(--teal); }
.metric-label { font-size:.82rem; color:var(--muted); }
.metric-value { font-size:1.4rem; font-weight:750; margin-top:.35rem; overflow-wrap:anywhere; }
.status-dot { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; margin-inline-end:.4rem; }
.status-online { background:#1ca66f; } .status-warning { background:#e99719; } .status-error { background:#dc4c57; }
.form-label { font-weight:650; font-size:.88rem; }
.form-control,.form-select { min-height:44px; border-color:#cfd9e5; }
.secret-state { font-size:.8rem; color:#16856f; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:.8rem; }
.table { margin:0; min-width:850px; }
.table th { white-space:nowrap; background:#f8fafc; color:#59677c; font-size:.8rem; }
.table td { vertical-align:middle; font-size:.88rem; }
.id-cell { font-family:Consolas,monospace; direction:ltr; text-align:left; max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.json-block { direction:ltr; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; background:#101a29; color:#dce8f6; padding:1rem; border-radius:.8rem; max-height:520px; overflow:auto; }
.command-result { direction:ltr; text-align:left; white-space:pre-wrap; background:#eef3f8; border-radius:.7rem; padding:1rem; min-height:54px; overflow-wrap:anywhere; }
.validation-toast-source,.field-validation-error { display:none!important; }
.app-toast-container { position:fixed; inset-block-end:1rem; inset-inline-end:1rem; z-index:1100; width:min(390px,calc(100vw - 2rem)); display:grid; gap:.65rem; pointer-events:none; }
.app-toast { --toast-accent:#3b82f6; display:grid; grid-template-columns:5px 1fr auto; align-items:stretch; min-height:72px; overflow:hidden; border:1px solid #dce4ee; border-radius:.9rem; background:#fff; color:var(--ink); box-shadow:0 16px 45px #0b1c3340; opacity:0; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease; pointer-events:auto; }
.app-toast.show { opacity:1; transform:translateY(0); }
.app-toast.hiding { opacity:0; transform:translateY(8px); }
.app-toast-success { --toast-accent:#179c68; }
.app-toast-error { --toast-accent:#dc4c57; }
.app-toast-warning { --toast-accent:#e99719; }
.app-toast-accent { background:var(--toast-accent); }
.app-toast-content { padding:.8rem .9rem; }
.app-toast-title { display:block; margin-bottom:.15rem; font-size:.86rem; color:var(--toast-accent); }
.app-toast-message { font-size:.9rem; line-height:1.55; overflow-wrap:anywhere; }
.app-toast-close { align-self:start; margin:.65rem .25rem; border:0; background:transparent; color:#7c899a; font-size:1.25rem; line-height:1; cursor:pointer; }
.app-toast-close:hover { color:var(--ink); }
.approval-confirm-modal { border:0; border-radius:1.15rem; box-shadow:0 25px 70px #07111f55; }
.approval-warning-icon { width:68px; height:68px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%; color:#c97900; background:#fff3d7; font-size:1.9rem; }
.mobile-header { height:58px; padding:.7rem 1rem; color:#fff; background:var(--navy); display:flex; align-items:center; gap:1rem; }
.auth-body { min-height:100vh; display:grid; place-items:center; padding:1.25rem; background:radial-gradient(circle at 12% 18%,#0fbfd833 0,transparent 31%),radial-gradient(circle at 88% 82%,#e915a229 0,transparent 28%),linear-gradient(135deg,#0b192b,#132f50); }
.auth-card { position:relative; overflow:hidden; width:min(440px,100%); background:#fff; border-radius:1.25rem; padding:2rem; box-shadow:0 28px 80px #0005; }
.auth-card::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:5px; background:linear-gradient(90deg,var(--brand-cyan),var(--brand-violet),var(--brand-magenta)); }
.auth-logo { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--teal); color:#fff; font-size:1.6rem; font-weight:800; margin-bottom:1rem; }
.auth-brand-logo { display:block; width:150px; height:150px; object-fit:cover; margin:-.5rem auto .35rem; border-radius:1rem; }
.auth-brand { color:var(--navy-2); font-size:1rem; font-weight:800; letter-spacing:.02em; margin-bottom:.4rem; text-align:center; }
.mobile-brand-mark { flex-basis:34px; width:34px; height:34px; border-radius:10px; }
.mobile-brand-mark img { width:62px; top:50%; }
.mobile-brand-name { display:grid; font-size:.82rem; line-height:1.05; }
@media (min-width:992px) {
  body.sidebar-collapsed .app-sidebar { width:78px!important; padding-inline:.65rem; }
  body.sidebar-collapsed .app-main { margin-inline-start:78px; }
  body.sidebar-collapsed .brand { flex-direction:column; justify-content:center; gap:.6rem; padding-inline:0; padding-bottom:.85rem; }
  body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .group-chevron { display:none; }
  body.sidebar-collapsed .sidebar-collapse-toggle { margin:0 auto; width:38px; height:32px; border-color:#ffffff38; background:#ffffff14; box-shadow:0 5px 14px #06142635; }
  body.sidebar-collapsed .sidebar-link,body.sidebar-collapsed .sidebar-group-toggle { justify-content:center; padding-inline:.55rem; }
  body.sidebar-collapsed .sidebar-link.active { box-shadow:inset 0 -3px 0 var(--teal); }
  body.sidebar-collapsed .sidebar-group[open] > .sidebar-submenu { position:absolute; inset-block-start:0; inset-inline-start:calc(100% + .65rem); width:225px; display:grid; padding:.5rem; border:1px solid #ffffff1f; border-radius:.8rem; background:var(--navy-2); box-shadow:0 18px 45px #07111f66; }
  body.sidebar-collapsed .sidebar-submenu .sidebar-link { justify-content:flex-start; padding-inline:.7rem; }
  body.sidebar-collapsed .sidebar-submenu .nav-label { display:inline; }
}
@media (max-width:991.98px) { .app-sidebar { position:fixed; inset-inline-start:0; inset-inline-end:auto; width:270px!important; overflow-y:auto; } .sidebar-collapse-toggle { display:none; } .app-main { margin-inline-start:0; } .page-shell { padding:1rem; } .page-head { align-items:flex-start; flex-direction:column; padding:1.15rem 1.25rem; } .page-head > a,.page-head > .btn { align-self:stretch; text-align:center; } }
@media (max-width:767.98px) { .tenant-tab-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; padding:.6rem; } .tenant-tab { min-height:60px; padding:.6rem; } .tenant-tab-icon { flex-basis:1.85rem; width:1.85rem; height:1.85rem; font-size:1rem; } }
@media (max-width:575.98px) { html { font-size:15px; } .panel { padding:1rem; } .auth-card { padding:1.4rem; } }