.app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; background: #f3f6fb; }

.sidebar {
  position: sticky; top: 0; height: 100vh; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 1rem;
  background: linear-gradient(180deg, #0c1d3d 0%, #102448 60%, #14306a 100%); color: #fff;
  box-shadow: 4px 0 24px rgba(8, 20, 44, .18);
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: .25rem .6rem; color: #fff; text-decoration: none; }
.sidebar-logo {
  width: 78px; height: 78px; flex: 0 0 78px; object-fit: contain; box-sizing: border-box;
  border-radius: 18px; background: #fff; padding: 6px;
  box-shadow: 0 0 0 3px rgba(127, 179, 255, .25), 0 10px 22px rgba(0, 0, 0, .25);
}
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-text strong { font-size: 1.2rem; letter-spacing: .08em; }
.sidebar-brand-text small { color: #8fb4e8; font-size: .78rem; letter-spacing: .04em; }
.sidebar-caption { margin: .5rem .75rem 0; color: #7f97bd; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-nav { display: flex; flex-direction: column; gap: .3rem; }
.sidebar-nav a {
  display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; border-radius: 12px;
  color: #d5e0f2; text-decoration: none; font-size: .98rem; font-weight: 500;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar-nav a i { width: 20px; text-align: center; font-size: 1.02rem; color: #7fb3ff; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(2px); }
.sidebar-nav a.is-active {
  background: linear-gradient(90deg, #1456c0, #0ea5c6); color: #fff; font-weight: 600;
  box-shadow: 0 8px 20px rgba(14, 165, 198, .28);
}
.sidebar-nav a.is-active i { color: #fff; }

.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 72px; box-sizing: border-box;
  padding: .75rem 2rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid #e3e9f3; box-shadow: 0 1px 12px rgba(16, 36, 72, .04);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.topbar-heading { display: flex; flex-direction: column; min-width: 0; }
.topbar-title { font-size: 1.3rem; font-weight: 700; color: #102448; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-subtitle { color: #7a879b; font-size: .82rem; }

.icon-button {
  width: 44px; height: 44px; border: 1px solid #e3e9f3; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #102448; transition: background .15s ease, box-shadow .15s ease;
}
.icon-button:hover { background: #f1f5fb; box-shadow: 0 4px 12px rgba(16, 36, 72, .08); }
.icon-button svg { width: 20px; height: 20px; }
.menu-toggle { display: none; }

.dropdown { position: relative; }
.dropdown-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
  min-width: 240px; padding: .75rem; box-sizing: border-box;
  background: #fff; border: 1px solid #dfe5ef; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16, 36, 72, .18);
}
.dropdown-panel[hidden] { display: none; }
.dropdown-panel h3 { margin: 0 0 .5rem; font-size: 1rem; }
.dropdown-panel p { margin: 0 0 .5rem; color: #5b6880; }
.icon-button { position: relative; }
.bell-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.notif-item { display: flex; gap: .6rem; align-items: center; padding: .55rem .6rem; border-radius: 10px; color: #1f2a3d; text-decoration: none; font-size: .9rem; }
.notif-item:hover { background: #f1f5fb; }
.notif-item i { color: #dc2626; width: 18px; text-align: center; }

.user-chip {
  display: inline-flex; align-items: center; gap: .65rem; padding: .3rem .85rem .3rem .3rem;
  border: 1px solid #e3e9f3; border-radius: 999px; background: #fff; cursor: pointer;
  color: #102448; font-size: .98rem; font-weight: 600; transition: box-shadow .15s ease;
}
.user-chip:hover { box-shadow: 0 4px 12px rgba(16, 36, 72, .08); }
.user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-role-text { font-size: .78rem; font-weight: 500; color: #5a6b8a; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1456c0, #0ea5c6); color: #fff; font-weight: 700; font-size: .92rem;
}

.app-content { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; }
.app-content > .container { width: 100%; max-width: none; margin: 0; padding: 2rem 2.25rem; box-sizing: border-box; }

.loader-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  background: rgba(16, 36, 72, .45); color: #fff;
}
.loader-overlay.is-visible { display: flex; }
.spinner {
  width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box;
  border: 5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: jassnet-spin .8s linear infinite;
}
@keyframes jassnet-spin { to { transform: rotate(360deg); } }

.app-dialog { border: 0; border-radius: 12px; padding: 1.5rem; width: min(92vw, 400px); box-sizing: border-box; box-shadow: 0 20px 50px rgba(16, 36, 72, .3); }
.app-dialog::backdrop { background: rgba(16, 36, 72, .45); }
.app-dialog-title { margin: 0 0 .5rem; color: #102448; }
.app-dialog-message { margin: 0 0 1.25rem; color: #333; }
.app-dialog-actions { display: flex; justify-content: flex-end; }
.app-dialog.is-error .app-dialog-title { color: #a4262c; }
.app-dialog.is-error.is-confirm .app-dialog-actions .button:last-child { background: linear-gradient(135deg, #b42333, #e0474c); box-shadow: 0 6px 16px rgba(180, 35, 51, .22); }
.app-dialog.is-confirm .app-dialog-actions .button { min-width: 90px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0 0 .25rem; }
.button.is-disabled, .button[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.staff-card { background: #fff; border-radius: 14px; padding: 1.25rem; box-shadow: 0 8px 24px rgba(16, 36, 72, .08); border-top: 4px solid #1f5fbf; display: flex; flex-direction: column; gap: .9rem; }
.staff-card.is-inactive { border-top-color: #9aa5b5; opacity: .85; }
.staff-card-head { display: flex; align-items: center; gap: .85rem; }
.staff-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1f5fbf, #3c86e6); color: #fff; font-weight: 700; flex: 0 0 auto; }
.staff-card-title { min-width: 0; }
.staff-card-title h3 { margin: 0; font-size: 1.05rem; color: #102448; overflow-wrap: anywhere; }
.staff-card-title p { margin: 0; }
.staff-card-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.staff-card-details { display: grid; gap: .45rem; border-top: 1px solid #eef1f6; padding-top: .75rem; }
.staff-card-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.staff-card-line span { color: #6b7485; }
.staff-card-line strong { text-align: right; overflow-wrap: anywhere; color: #102448; font-weight: 600; }
.staff-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.staff-card-actions .button-danger { background: #b42333; color: #fff; }

@media (max-width: 800px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 292px;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .menu-toggle { display: inline-flex; }
  .topbar-subtitle { display: none; }
  .app-content > .container { padding: 1.25rem; }
}

@media (max-width: 480px) {
  .user-name-text { display: none; }
  .user-chip { padding: .25rem; }
  .app-topbar { min-height: 64px; padding: .5rem .75rem; }
  .topbar-title { font-size: 1.1rem; }
  .topbar-left, .topbar-right { gap: .5rem; }
  .icon-button { width: 40px; height: 40px; }
  .avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .app-content > .container { padding: 1rem; }
}

/* Hotspot users page */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem 1.25rem; margin: 0 0 1.5rem; }
.summary-grid dt { font-size: .85rem; }
.summary-grid dd { margin: .15rem 0 0; font-weight: 600; word-break: break-all; }
.plain-list { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .6rem; }
.plain-list li { padding: .6rem .8rem; border-left: 3px solid #e0a100; background: #fffaf0; border-radius: 6px; }


/* Phone input with a fixed +255 prefix, matching the public-wifi portal. */
.phone-prefix-field { display: inline-flex; align-items: stretch; min-width: 0; }
.phone-prefix-field .phone-prefix { display: inline-flex; align-items: center; padding: 0 0.6rem; border: 1px solid #c9d3e3; border-right: 0; border-radius: 8px 0 0 8px; background: #eef2f8; color: #1f2a3d; font-weight: 600; }
.phone-prefix-field input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }

/* VPN page */
.vpn-config-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.vpn-qr { max-width: 280px; background: #fff; padding: .5rem; border: 1px solid #d7e0ee; border-radius: 8px; }
.vpn-qr svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .vpn-config-grid { grid-template-columns: 1fr; } }