@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--nav:#172033;--nav2:#202b42;--ink:#172033;--muted:#758198;--line:#e5eaf2;--blue:#3478f6;--bg:#f4f7fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,system-ui,sans-serif}.sidebar{width:220px;position:fixed;inset:0 auto 0 0;background:var(--nav);color:#d8e1f2;padding:20px 12px;display:flex;flex-direction:column;gap:8px;overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;border-bottom:1px solid #344056}.brand b{display:block;font-size:18px;color:#fff}.brand small{display:block;font-size:9px;letter-spacing:1.5px;color:#8fa0bc;margin-top:3px}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,#4a8cff,#164cc6);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 5px 16px #0d142c}.tenant{display:flex;align-items:center;gap:10px;padding:12px 8px;background:#222e45;border-radius:12px;margin:6px 0 14px}.avatar{width:34px;height:34px;border-radius:10px;background:#3478f6;display:grid;place-items:center;color:#fff;font-weight:800}.tenant b{display:block;color:#fff;font-size:12px}.tenant small{display:block;color:#91a0b8;font-size:10px;margin-top:4px}.nav-label{font-size:9px;letter-spacing:1.6px;color:#8290a8;font-weight:700;margin:14px 8px 4px}.nav{display:block;text-decoration:none;color:#b8c4d8;padding:11px 12px;border-radius:9px;font-weight:600;font-size:12px}.nav:hover,.nav.active{background:#2c3a55;color:#fff}.nav.active{box-shadow:inset 3px 0 #4b8cff}.sidebar-bottom{margin-top:auto;padding:18px 8px 4px;color:#75849e;display:grid;gap:5px;font-size:10px}.main{margin-left:220px;padding:0 22px 28px;min-width:0}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:800;color:#6d7d96}.topbar h1{margin:5px 0 0;font-size:23px;letter-spacing:-.7px}.top-actions{display:flex;align-items:center;gap:14px}.secure{color:#15965c;font-size:11px;font-weight:700}.user-pill{background:#fff;border:1px solid var(--line);border-radius:22px;padding:9px 14px;font-size:12px}.logout{font-size:12px;color:#64748b;text-decoration:none;font-weight:700}.welcome{background:linear-gradient(110deg,#1b4bb1,#367df3);border-radius:15px;padding:23px 25px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;box-shadow:0 8px 22px #2b66c41a}.eyebrow.light{color:#d5e4ff}.welcome h2{font-size:22px;margin:8px 0}.welcome p{margin:0;color:#e0eaff;font-size:12px}.date-pill{background:#ffffff20;border:1px solid #ffffff35;padding:9px 13px;border-radius:9px;font-size:11px;white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.stat{padding:17px;border-radius:13px;color:#fff;min-width:0;box-shadow:0 7px 16px #1c315010}.stat.blue{background:linear-gradient(135deg,#2155c7,#3c8ef8)}.stat.green{background:linear-gradient(135deg,#15965d,#26bf78)}.stat.purple{background:linear-gradient(135deg,#6553d9,#8978f4)}.stat.orange{background:linear-gradient(135deg,#df7c15,#f8b547)}.stat-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;gap:5px}.stat-icon{font-size:21px;opacity:.85}.stat strong{display:block;font-size:31px;letter-spacing:-1px;margin:13px 0 5px}.stat small{font-size:10px;opacity:.83}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:16px;box-shadow:0 3px 12px #1e293b05}.panel-head{padding:18px 18px 13px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #eef1f6}.panel h3,.panel-head h3{margin:0;font-size:14px}.panel-head p,.secret-panel p{margin:6px 0 0;color:var(--muted);font-size:11px}.text-link{font-size:11px;color:#2868d8;text-decoration:none;font-weight:700;white-space:nowrap}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}th{text-align:left;color:#77849a;background:#f9fafc;font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:12px 15px;border-bottom:1px solid var(--line)}td{padding:12px 15px;border-bottom:1px solid #eef1f6;color:#445168}td b{color:#202b3e}td small{display:block;margin-top:4px;color:#8793a6;font-size:10px}.empty{text-align:center;color:#7b879b;padding:28px}.badge{border-radius:20px;padding:5px 8px;font-size:9px;font-weight:800}.badge.good{color:#12814d;background:#e4f8ed}.badge.bad{color:#b83232;background:#fee9e9}.notice{border:1px solid #cfe6d9;background:#effaf3;color:#286345;padding:14px 16px;border-radius:10px;font-size:11px;line-height:1.6;margin:0 0 16px}.notice.warn{border-color:#f2dfb1;background:#fff9e8;color:#8c6214}.secret-panel{padding:20px}.secret-panel h3{margin:0}.secret-line{display:flex;gap:8px;margin:15px 0 8px}.secret-line input{flex:1;min-width:0}.button,button{border:0;background:#2868dc;color:#fff;padding:11px 15px;border-radius:8px;font:600 11px Inter,system-ui;cursor:pointer;text-decoration:none;white-space:nowrap}.button:hover,button:hover{background:#1b52b8}input{width:100%;border:1px solid #dce3ee;background:#fff;border-radius:8px;padding:12px;font:12px Inter,system-ui;color:#243148}footer{display:flex;justify-content:space-between;color:#8a96a8;font-size:10px;padding:10px 2px}.muted{color:#78869a;font-size:10px}.login-body{min-height:100vh;background:radial-gradient(circle at 20% 15%,#e5efff,transparent 35%),#f4f7fb;display:grid;place-items:center;padding:24px}.login-shell{width:min(100%,420px)}.login-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:25px}.login-brand b{display:block;font-size:22px}.login-brand small{display:block;color:#74829a;font-size:9px;letter-spacing:1.6px;margin-top:3px}.login-card{background:#fff;border:1px solid #e4eaf3;border-radius:18px;padding:32px;box-shadow:0 20px 60px #20385c12}.login-symbol{width:48px;height:48px;background:#e8f0ff;color:#2563d8;border-radius:14px;display:grid;place-items:center;font-size:27px;margin-bottom:20px}.login-card h1{margin:8px 0;font-size:26px}.login-card p{color:#758198;font-size:12px;margin:0 0 24px}.login-card label{display:block;font-size:11px;font-weight:700;margin:15px 0 7px}.login-card button{width:100%;padding:13px;margin-top:20px}.login-foot{display:block;text-align:center;color:#8a96a8;font-size:10px;margin-top:20px}.login-copy{text-align:center;color:#8a96a8;font-size:10px;margin-top:18px}.error{background:#fff0f0;color:#b72e2e;border-radius:8px;padding:10px;font-size:11px}@media(max-width:1050px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{width:64px;padding:14px 7px}.brand{padding:4px 5px 18px}.brand>span:last-child,.tenant>span:last-child,.nav-label,.sidebar .nav{font-size:0}.brand-mark{width:38px;min-width:38px}.tenant{padding:8px 5px;justify-content:center}.avatar{min-width:34px}.nav{height:40px;padding:11px 0;text-align:center}.sidebar-bottom{display:none}.main{margin-left:64px;padding:0 12px 22px}.topbar{height:auto;min-height:76px;align-items:flex-start;padding:18px 0}.topbar h1{font-size:18px}.top-actions{gap:7px;flex-wrap:wrap;justify-content:flex-end}.secure{display:none}.welcome{padding:18px;align-items:flex-start}.welcome h2{font-size:19px}.date-pill{display:none}.stats{gap:8px}.stat{padding:13px}.stat strong{font-size:25px}.stat-top{font-size:10px}.stat small{font-size:9px}.login-card{padding:24px}}

/* PingX mobile responsive improvements */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}
.main,
.panel,
.table-wrap {
  min-width: 0;
}
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  min-width: 520px;
}
input, button, select, textarea {
  max-width: 100%;
}
@media (max-width: 700px) {
  .sidebar {
    width: 58px;
    padding: 12px 6px;
  }
  .main {
    margin-left: 58px;
    width: calc(100% - 58px);
    padding: 0 10px 20px;
  }
  .topbar {
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar h1 {
    overflow-wrap: anywhere;
  }
  .welcome {
    min-width: 0;
    flex-wrap: wrap;
  }
  .welcome p {
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .grid2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel-head {
    flex-wrap: wrap;
  }
  footer {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* PingX mobile slide-out navigation drawer */
.mobile-menu-toggle,
.mobile-drawer-overlay {
  display: none;
}

@media (max-width: 700px) {
  .mobile-menu-toggle {
    display: grid;
    place-items: center;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dce5f3;
    border-radius: 12px;
    background: #ffffff;
    color: #172033;
    box-shadow: 0 4px 16px #17203320;
    font-size: 21px;
    z-index: 1201;
  }

  .sidebar {
    width: min(280px, 84vw);
    max-width: 280px;
    padding: 20px 12px;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
    z-index: 1202;
    box-shadow: none;
  }

  .sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 12px 0 35px #10182740;
  }

  .sidebar .brand {
    gap: 10px;
    padding: 4px 8px 22px;
  }

  .sidebar .brand > span:last-child,
  .sidebar .tenant > span:last-child {
    display: block;
    font-size: inherit;
  }

  .sidebar .brand b {
    font-size: 18px;
  }

  .sidebar .brand small {
    font-size: 9px;
  }

  .sidebar .tenant {
    justify-content: flex-start;
    padding: 12px 8px;
  }

  .sidebar .tenant b {
    font-size: 12px;
  }

  .sidebar .tenant small {
    font-size: 10px;
  }

  .sidebar .nav-label {
    display: block;
    font-size: 9px;
  }

  .sidebar .nav {
    display: block;
    height: auto;
    padding: 11px 12px;
    text-align: left;
    font-size: 12px;
    white-space: normal;
  }

  .sidebar .sidebar-bottom {
    display: grid;
  }

  .mobile-drawer-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: #10182780;
    z-index: 1200;
  }

  body.drawer-open {
    overflow: hidden;
  }

  .main {
    margin-left: 0;
    width: 100%;
    padding: 0 12px 22px;
  }

  .topbar {
    padding-top: 64px;
  }
}

/* Ensure mobile drawer controls remain visible above page content */
@media screen and (max-width: 700px) {
  body > .mobile-menu-toggle {
    display: grid !important;
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    z-index: 99999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body > .mobile-drawer-overlay:not([hidden]) {
    z-index: 99997 !important;
  }

  body > .sidebar {
    z-index: 99998 !important;
  }
}

/* FINAL PingX mobile layout override */
@media screen and (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body > .mobile-menu-toggle {
    display: grid !important;
    place-items: center;
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    width: 44px;
    height: 44px;
    z-index: 99999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff;
    color: #172033;
    border: 1px solid #dce5f3;
    border-radius: 12px;
    font-size: 22px;
  }

  body > .sidebar {
    width: min(280px, 84vw) !important;
    max-width: 280px;
    height: 100dvh;
    padding: 20px 12px !important;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
    z-index: 99998 !important;
    overflow-y: auto;
    box-shadow: none;
  }

  body > .sidebar.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    box-shadow: 12px 0 35px #10182740;
  }

  body > .sidebar .brand > span:last-child,
  body > .sidebar .tenant > span:last-child {
    display: block !important;
    font-size: inherit;
  }

  body > .sidebar .nav-label {
    display: block !important;
    font-size: 9px !important;
  }

  body > .sidebar .nav {
    display: block !important;
    height: auto;
    padding: 11px 12px !important;
    font-size: 12px !important;
    text-align: left;
    white-space: normal;
  }

  body > .sidebar .sidebar-bottom {
    display: grid;
  }

  body > .mobile-drawer-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: #10182780;
    z-index: 99997 !important;
  }

  body.drawer-open {
    overflow: hidden;
  }

  body > .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    padding: 64px 12px 22px !important;
  }

  body > .main .topbar {
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px;
  }

  body > .main .topbar > div:first-child {
    padding-left: 46px;
  }

  body > .main .topbar h1 {
    font-size: 18px;
  }

  body > .main .top-actions {
    max-width: 100%;
  }

  body > .main .welcome {
    min-width: 0;
  }

  body > .main .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body > .main .grid2 {
    grid-template-columns: minmax(0, 1fr);
  }

  body > .main .panel {
    min-width: 0;
  }

  body > .main .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}