:root{
    --dark:#0B2027;
    --dark-card:#123138;
    --dark-card-2:#173a42;
    --primary:#028090;
    --secondary:#00A896;
    --accent:#02C39A;
    --ink:#16302c;
    --muted:#5B7370;
    --muted-2:#8CA3A0;
    --line:#DCE7E5;
    --bg:#F5FAF9;
    --white:#FFFFFF;
    --warn:#E8A33D;
    --crit:#D6584A;
    --offline:#9AA8A6;
    --radius:14px;
    --shadow: 0 1px 2px rgba(11,32,39,0.04), 0 8px 24px -12px rgba(11,32,39,0.12);
    --sidebar-w: 248px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Newsreader', serif; }
  ::selection{ background:var(--accent); color:var(--dark); }
  a{ color:inherit; }
  button{ font-family:inherit; }

  /* ---------------- Layout shell ---------------- */
  .app{ display:flex; min-height:100vh; }

  /* Sidebar */
  .sidebar{
    width:var(--sidebar-w);
    height:100vh;
    flex-shrink:0;
    background:var(--dark);
    color:#fff;
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0;
    overflow-y:auto;
    z-index:40;
    transition: transform .28s ease;
  }
  .sidebar-brand{
    display:flex; align-items:center; gap:.65rem;
    padding:1.4rem 1.4rem 1.1rem;
  }
  .brand-mark{
    width:34px; height:34px; border-radius:9px;
    background:linear-gradient(135deg, var(--accent), var(--secondary));
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-mark svg{ width:18px; height:18px; }
  .sidebar-brand .name{ font-family:'Newsreader', serif; font-size:1.18rem; font-weight:600; letter-spacing:.2px; }
  .sidebar-brand .tag{ font-size:.68rem; color:var(--muted-2); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px; }

  .nav-section-label{
    font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase;
    color:#5f817d; padding:1.1rem 1.4rem .4rem;
  }
  .nav{ list-style:none; margin:0; padding:0 .7rem; display:flex; flex-direction:column; gap:.15rem; }
  .nav-item{
    display:flex; align-items:center; gap:.75rem;
    padding:.62rem .75rem; border-radius:9px;
    color:#c7dad7; cursor:pointer; font-size:.9rem; font-weight:500;
    border:none; background:none; width:100%; text-align:left;
    transition: background .15s ease, color .15s ease;
  }
  .nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
  .nav-item:hover{ background:var(--dark-card); color:#fff; }
  .nav-item.active{ background:var(--primary); color:#fff; }
  .nav-item.active svg{ opacity:1; }

  .sidebar-foot{
    margin-top:auto; padding:1.1rem 1.4rem 1.4rem;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .sidebar-foot .foot-row{ display:flex; align-items:center; gap:.6rem; }
  .avatar{
    width:32px; height:32px; border-radius:50%;
    background:var(--secondary); color:var(--dark);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.8rem; flex-shrink:0;
  }
  .foot-name{ font-size:.82rem; font-weight:600; color:#fff; }
  .foot-role{ font-size:.72rem; color:var(--muted-2); }

  /* Main column */
  .main{
    flex:1;
    margin-left:var(--sidebar-w);
    min-width:0;
    display:flex; flex-direction:column;
  }
  .topbar{
    position:sticky; top:0; z-index:30;
    background:rgba(245,250,249,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.6rem;
    height:66px;
  }
  .topbar-left{ display:flex; align-items:center; gap:.9rem; min-width:0; }
  .hamburger{
    display:none;
    width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
    background:#fff; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .hamburger svg{ width:18px; height:18px; }
  #pageTitle{ font-size:1.28rem; font-weight:600; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #pageSub{ font-size:.78rem; color:var(--muted); margin-top:1px; }

  .topbar-right{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
  .icon-btn{
    position:relative;
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--line); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .icon-btn svg{ width:17px; height:17px; color:var(--ink); }
  .badge-dot{
    position:absolute; top:6px; right:7px; width:8px; height:8px;
    border-radius:50%; background:var(--crit); border:2px solid #fff;
  }

  .content{ padding:1.6rem 1.6rem 6rem; max-width:1440px; width:100%; margin:0 auto; }

  .view{ display:none; animation: fadeUp .35s ease; }
  .view.active{ display:block; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  /* ---------------- Reusable bits ---------------- */
  .eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--primary); margin:0 0 .3rem; }
  .section-title{ font-size:1.5rem; font-weight:600; margin:0 0 1.1rem; }
  .card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .status-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .status-dot.normal{ background:var(--accent); }
  .status-dot.warning{ background:var(--warn); }
  .status-dot.critical{ background:var(--crit); }
  .status-dot.offline{ background:var(--offline); }
  .status-label{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:500; }

  .btn{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.6rem 1.05rem; border-radius:999px; border:none;
    font-size:.86rem; font-weight:600; cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn:active{ transform:scale(.97); }
  .btn-primary{ background:var(--primary); color:#fff; }
  .btn-primary:hover{ background:#026e7c; }
  .btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); }
  .btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ---------------- Dashboard view ---------------- */
  .kpi-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; margin-bottom:1.4rem;
  }
  .kpi-card{ padding:1.15rem 1.2rem 1.25rem; position:relative; transition: box-shadow .18s ease, transform .18s ease; }
  .kpi-card:hover{ transform:translateY(-2px); box-shadow:0 4px 6px rgba(11,32,39,.04), 0 14px 30px -14px rgba(11,32,39,.22); }
  .kpi-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.85rem; }
  .kpi-icon{
    width:42px; height:42px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:var(--primary);
  }
  .kpi-icon svg{ width:21px; height:21px; color:#fff; }
  .kpi-label{ font-size:.8rem; color:var(--muted); margin:0 0 .3rem; }
  .kpi-value{ font-size:1.55rem; font-weight:600; font-family:'Newsreader', serif; margin:0; }
  .kpi-delta{ font-size:.74rem; margin-top:.35rem; color:var(--muted-2); }

  .grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:1.1rem; }
  .panel{ padding:1.3rem 1.4rem 1.5rem; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
  .panel-head h3{ font-size:1.02rem; font-weight:600; margin:0; }
  .chart-wrap{ height:280px; position:relative; }

  .alert-row{ display:flex; align-items:flex-start; gap:.65rem; padding:.62rem 0; border-bottom:1px solid var(--line); }
  .alert-row:last-child{ border-bottom:none; }
  .alert-row .status-dot{ margin-top:5px; }
  .alert-text{ font-size:.86rem; font-weight:500; }
  .alert-time{ font-size:.74rem; color:var(--muted); margin-top:1px; }

  /* ---------------- Filter bar ---------------- */
  .filter-bar{
    display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
    padding:.85rem 1rem; margin-bottom:1.1rem;
  }
  .filter-bar select, .filter-bar input{
    font-family:inherit; font-size:.85rem; color:var(--ink);
    border:1px solid var(--line); border-radius:9px; padding:.5rem .8rem;
    background:#fff;
  }
  .filter-bar .search-wrap{ position:relative; flex:1; min-width:180px; }
  .filter-bar .search-wrap svg{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); }
  .filter-bar .search-wrap input{ width:100%; padding-left:2.1rem; }
  .toolbar{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.1rem; align-items:center; }
  .spacer{ flex:1; }

  /* ---------------- Tables (responsive -> cards) ---------------- */
  .table-wrap{ overflow:hidden; }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    text-align:left; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase;
    color:#fff; background:var(--dark); padding:.85rem 1rem; font-weight:600;
  }
  tbody td{ padding:.85rem 1rem; font-size:.88rem; border-bottom:1px solid var(--line); }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:nth-child(even){ background:#fbfdfc; }
  tbody tr:hover{ background:#eef6f5; }
  .mono{ font-variant-numeric:tabular-nums; }
  .foot-note{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); font-style:italic; margin-top:.9rem; }

  /* ---------------- Roles view ---------------- */
  .role-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
  .role-card{ padding:1.4rem 1.2rem 1.6rem; text-align:center; }
  .role-icon{
    width:56px; height:56px; border-radius:50%; margin:0 auto .9rem;
    display:flex; align-items:center; justify-content:center;
  }
  .role-icon svg{ width:26px; height:26px; color:#fff; }
  .role-card h3{ font-size:1.05rem; margin:0 0 .55rem; }
  .role-card p{ font-size:.85rem; color:var(--muted); line-height:1.5; margin:0; }

  /* ---------------- Bottom nav (mobile) ---------------- */
  .bottom-nav{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:var(--dark); border-top:1px solid rgba(255,255,255,.08);
    padding:.4rem .3rem calc(.5rem + env(safe-area-inset-bottom));
  }
  .bottom-nav ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:space-around; }
  .bottom-nav button{
    background:none; border:none; color:#93aeaa; display:flex; flex-direction:column;
    align-items:center; gap:.2rem; font-size:.64rem; padding:.3rem .4rem; border-radius:8px; cursor:pointer;
  }
  .bottom-nav button svg{ width:19px; height:19px; }
  .bottom-nav button.active{ color:var(--accent); }

  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(11,32,39,.45); z-index:39;
  }
  .sidebar-backdrop.show{ display:block; }

  /* ---------------- Modal ---------------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(11,32,39,.5);
    display:none; align-items:center; justify-content:center; z-index:60; padding:1rem;
  }
  .modal-overlay.show{ display:flex; }
  .modal{
    background:#fff; border-radius:16px; width:100%; max-width:420px;
    padding:1.6rem; box-shadow:0 20px 60px -20px rgba(11,32,39,.4);
  }
  .modal h3{ margin:0 0 .2rem; font-size:1.2rem; }
  .modal .modal-sub{ font-size:.84rem; color:var(--muted); margin:0 0 1.2rem; }
  .field{ margin-bottom:.9rem; }
  .field label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:.35rem; }
  .field input, .field select{
    width:100%; padding:.6rem .75rem; border-radius:9px; border:1px solid var(--line); font-size:.86rem; font-family:inherit;
  }
  .modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.3rem; }

  /* ---------------- Responsive breakpoints ---------------- */
  @media (max-width: 1180px){
    .kpi-grid{ grid-template-columns:repeat(2, 1fr); }
    .grid-2{ grid-template-columns:1fr; }
    .role-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  @media (max-width: 900px){
    .sidebar{ transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.3); }
    .sidebar.open{ transform:translateX(0); }
    .main{ margin-left:0; }
    .hamburger{ display:flex; }
    .content{ padding:1.2rem 1rem 5.6rem; }
    .bottom-nav{ display:none; }
  }

  @media (max-width: 640px){
    .kpi-grid{ grid-template-columns:repeat(2, 1fr); gap:.7rem; }
    .kpi-value{ font-size:1.28rem; }
    .role-grid{ grid-template-columns:1fr; }
    #pageSub{ display:none; }
    .bottom-nav{ display:block; }
    .content{ padding-bottom: 6.4rem; }

    thead{ display:none; }
    table, tbody, tr, td{ display:block; width:100%; }
    tbody tr{ padding:.8rem 1rem; border-bottom:1px solid var(--line); }
    tbody td{ border:none; padding:.22rem 0; display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; }
    tbody td::before{ content: attr(data-label); font-weight:600; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; }
    tbody tr:nth-child(even){ background:transparent; }
  }
  img {
	max-width: 100%;
  }

  @media (max-width: 420px){
    .kpi-grid{ grid-template-columns:1fr; }
  }

  [data-icon]{ display:inline-flex; }