/* ============================================================
   RFID Access Cloud — Design System
   Palette: graphite/navy base, signal-teal accent (radio/RFID theme),
   rose for denied/danger, amber for warnings.
   Type: Manrope (display), Inter (body/UI), JetBrains Mono (data/UIDs)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0A0E17;
  --bg-elev-1: #0F1420;
  --bg-elev-2: #141B2B;
  --glass: rgba(255,255,255,0.045);
  --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.09);
  --text-1: #EDEFF5;
  --text-2: #A6ADBB;
  --text-3: #6B7383;

  --accent: #00D9C0;
  --accent-soft: rgba(0,217,192,0.14);
  --accent-2: #4C8DFF;

  --danger: #FF4D6D;
  --danger-soft: rgba(255,77,109,0.14);
  --success: #22C55E;
  --success-soft: rgba(34,197,94,0.14);
  --warning: #F5A623;
  --warning-soft: rgba(245,166,35,0.14);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-soft: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 0 1px rgba(0,217,192,0.25), 0 0 24px rgba(0,217,192,0.18);

  --sidebar-w: 264px;
  --topbar-h: 72px;

  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="light"]{
  --bg: #F3F5F9;
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #FFFFFF;
  --glass: rgba(255,255,255,0.75);
  --glass-strong: rgba(255,255,255,0.95);
  --glass-border: rgba(15,23,42,0.08);
  --text-1: #161B26;
  --text-2: #545D6E;
  --text-3: #8993A4;
  --shadow-soft: 0 8px 30px rgba(15,23,42,0.08);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
  overflow-x: hidden;
}

/* subtle ambient radial glow behind everything, signature touch */
body::before{
  content:'';
  position: fixed; inset: 0;
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(0,217,192,0.10), transparent 60%),
    radial-gradient(500px 350px at -10% 20%, rgba(76,141,255,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

h1,h2,h3,h4,h5,.font-display{ font-family: var(--font-display); letter-spacing: -0.01em; }
.mono{ font-family: var(--font-mono); }
a{ text-decoration: none; }

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--glass-border); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ---------------- Glass surfaces ---------------- */
.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.glass-strong{
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ---------------- Layout shell ---------------- */
.app-shell{ display:flex; min-height:100vh; position:relative; z-index:1; }

.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--bg-elev-1);
  border-right: 1px solid var(--glass-border);
  height: 100vh;
  position: fixed; top:0; left:0;
  display:flex; flex-direction:column;
  z-index: 1000;
  transition: transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding: 22px 22px 18px;
}
.sidebar-brand .logo-mark{
  width:38px; height:38px; border-radius:11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:#04231F; font-weight:800; font-family: var(--font-display);
  box-shadow: 0 4px 16px rgba(0,217,192,0.35);
  flex-shrink:0;
}
.sidebar-brand .brand-text{ line-height:1.15; }
.sidebar-brand .brand-text b{ font-family: var(--font-display); font-size:16px; }
.sidebar-brand .brand-text span{ font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; }

.nav-scroll{ overflow-y:auto; flex:1; padding: 6px 14px 14px; }
.nav-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3); padding: 16px 12px 8px; }
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px; margin-bottom:2px;
  border-radius: var(--radius-sm);
  color: var(--text-2); font-weight:600; font-size:13.5px;
  cursor:pointer; position:relative;
  transition: all .15s ease;
}
.nav-link i{ font-size:17px; width:20px; text-align:center; }
.nav-link:hover{ background: var(--glass); color: var(--text-1); }
.nav-link.active{
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-link.active::before{
  content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:3px; background: var(--accent);
}
.nav-link .badge-count{
  margin-left:auto; background: var(--danger); color:#fff; font-size:10.5px;
  padding: 1px 7px; border-radius: 20px; font-family: var(--font-body);
}

.sidebar-foot{ padding:14px; border-top:1px solid var(--glass-border); }
.role-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding: 3px 10px; border-radius:20px;
}
.role-admin{ background: var(--accent-soft); color: var(--accent); }
.role-security{ background: var(--warning-soft); color: var(--warning); }
.role-staff{ background: var(--glass-strong); color: var(--text-2); }

/* ---------------- Main / topbar ---------------- */
.main-area{ margin-left: var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height: var(--topbar-h);
  display:flex; align-items:center; gap:16px;
  padding: 0 28px;
  position: sticky; top:0; z-index:900;
  background: var(--bg);
  border-bottom: 1px solid var(--glass-border);
}
.topbar .search-box{
  flex:1; max-width:420px; position:relative;
}
.topbar .search-box input{
  width:100%; background: var(--glass); border:1px solid var(--glass-border);
  border-radius: 12px; padding: 10px 14px 10px 40px; color:var(--text-1); font-size:13.5px;
}
.topbar .search-box input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar .search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-3); }

.icon-btn{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass); border:1px solid var(--glass-border);
  color: var(--text-2); cursor:pointer; position:relative;
  transition: all .15s ease;
}
.icon-btn:hover{ color: var(--accent); border-color: var(--accent); }
.icon-btn .dot{
  position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%;
  background: var(--danger); border: 2px solid var(--bg);
}

.content-area{ padding: 26px 28px 60px; flex:1; }

/* ---------------- Page header ---------------- */
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.page-header h2{ font-size:22px; font-weight:800; margin:0; }
.page-header p{ color:var(--text-3); margin:4px 0 0; font-size:13px; }

/* ---------------- Buttons ---------------- */
.btn{ font-family: var(--font-body); font-weight:600; font-size:13.5px; border-radius:11px; padding:9px 16px; border:1px solid transparent; transition: all .15s ease; }
.btn-accent{ background: var(--accent); color:#04231F; }
.btn-accent:hover{ filter:brightness(1.08); color:#04231F; box-shadow: var(--shadow-glow); }
.btn-glass{ background: var(--glass); border-color: var(--glass-border); color: var(--text-1); }
.btn-glass:hover{ background: var(--glass-strong); color: var(--text-1); }
.btn-outline-danger-glass{ background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-outline-danger-glass:hover{ background: var(--danger); color:#fff; }
.btn-sm-icon{ width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; }

/* ---------------- Cards ---------------- */
.stat-card{ padding:20px; position:relative; overflow:hidden; }
.stat-card .stat-icon{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px;
}
.stat-card .stat-value{ font-family: var(--font-display); font-size:26px; font-weight:800; line-height:1; }
.stat-card .stat-label{ color:var(--text-3); font-size:12.5px; margin-top:6px; font-weight:600; }
.stat-card .stat-trend{ font-size:12px; font-weight:700; margin-top:10px; display:inline-flex; align-items:center; gap:4px; }
.trend-up{ color: var(--success); }
.trend-down{ color: var(--danger); }

.section-card{ padding:22px; margin-bottom:22px; }
.section-card .section-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.section-card .section-card-head h5{ font-size:15px; font-weight:800; margin:0; }

/* ---------------- Signature: Signal ring status indicator ---------------- */
.signal-ring{ position:relative; width:14px; height:14px; flex-shrink:0; }
.signal-ring .core{ position:absolute; inset:3px; border-radius:50%; background: var(--success); }
.signal-ring.offline .core{ background: var(--text-3); }
.signal-ring .pulse{
  position:absolute; inset:0; border-radius:50%; background: var(--success);
  animation: ring-pulse 2s ease-out infinite;
}
.signal-ring.offline .pulse{ display:none; }
@keyframes ring-pulse{
  0%{ transform: scale(1); opacity:.55; }
  100%{ transform: scale(2.6); opacity:0; }
}

/* wifi bars */
.wifi-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.wifi-bars i{ width:3px; background: var(--glass-border); border-radius:2px; }
.wifi-bars i:nth-child(1){ height:4px; } .wifi-bars i:nth-child(2){ height:7px; }
.wifi-bars i:nth-child(3){ height:10px; } .wifi-bars i:nth-child(4){ height:14px; }
.wifi-bars.lvl-1 i:nth-child(1){ background: var(--warning); }
.wifi-bars.lvl-2 i:nth-child(-n+2){ background: var(--warning); }
.wifi-bars.lvl-3 i:nth-child(-n+3){ background: var(--accent); }
.wifi-bars.lvl-4 i{ background: var(--accent); }

/* ---------------- Device tile / door control ---------------- */
.device-tile{ padding:20px; display:flex; flex-direction:column; gap:14px; }
.device-tile-top{ display:flex; align-items:center; justify-content:space-between; }
.device-tile-name{ font-weight:800; font-size:14.5px; }
.device-tile-sub{ color:var(--text-3); font-size:11.5px; }
.door-visual{
  height:88px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:34px;
  background: var(--glass-strong); border:1px solid var(--glass-border);
  transition: all .2s ease;
}
.door-visual.locked{ color: var(--success); }
.door-visual.unlocked{ color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-soft); }
.device-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.device-actions .btn{ flex:1; min-width:0; white-space:nowrap; }

/* ---------------- Badges ---------------- */
.badge-status{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:capitalize; }
.badge-online{ background: var(--success-soft); color: var(--success); }
.badge-offline{ background: var(--glass-strong); color: var(--text-3); }
.badge-locked{ background: var(--success-soft); color: var(--success); }
.badge-unlocked{ background: var(--warning-soft); color: var(--warning); }
.badge-enabled{ background: var(--success-soft); color: var(--success); }
.badge-disabled{ background: var(--glass-strong); color: var(--text-3); }
.badge-granted{ background: var(--success-soft); color: var(--success); }
.badge-denied{ background: var(--danger-soft); color: var(--danger); }
.badge-expired{ background: var(--danger-soft); color: var(--danger); }
.badge-admin{ background: var(--accent-soft); color: var(--accent); }
.badge-security{ background: var(--warning-soft); color: var(--warning); }
.badge-staff{ background: var(--glass-strong); color: var(--text-2); }

/* ---------------- Tables ---------------- */
.table-glass{ width:100%; border-collapse: separate; border-spacing:0; }
.table-glass thead th{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3);
  padding:12px 14px; border-bottom:1px solid var(--glass-border); font-weight:700; text-align:left; white-space:nowrap;
}
.table-glass tbody td{ padding:13px 14px; border-bottom:1px solid var(--glass-border); font-size:13.3px; vertical-align:middle; }
.table-glass tbody tr:hover{ background: var(--glass); }
.table-glass tbody tr:last-child td{ border-bottom:none; }
.table-responsive-wrap{ overflow-x:auto; }
.avatar-chip{ width:30px; height:30px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }

/* ---------------- Forms ---------------- */
.form-label{ font-size:12.5px; font-weight:700; color: var(--text-2); margin-bottom:6px; }
.form-control, .form-select{
  background: var(--glass); border:1px solid var(--glass-border); color: var(--text-1);
  border-radius: 11px; padding:9px 13px; font-size:13.5px;
}
.form-control:focus, .form-select:focus{ background: var(--glass); color:var(--text-1); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control::placeholder{ color: var(--text-3); }
.form-switch .form-check-input{ width:38px; height:20px; background-color: var(--glass-strong); border-color: var(--glass-border); }
.form-switch .form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }

/* ---------------- Modals / offcanvas (Bootstrap overrides) ---------------- */
.modal-content{ background: var(--bg-elev-2); border:1px solid var(--glass-border); border-radius: var(--radius-lg); color: var(--text-1); }
.modal-header, .modal-footer{ border-color: var(--glass-border); }
.btn-close{ filter: var(--btn-close-filter, none); }
[data-theme="dark"] .btn-close, :root .btn-close{ filter: invert(1) grayscale(1) brightness(1.6); }
[data-theme="light"] .btn-close{ filter:none; }

/* ---------------- Toasts ---------------- */
.toast-container{ z-index: 2000; }
.toast{ background: var(--bg-elev-2); border:1px solid var(--glass-border); color:var(--text-1); border-radius: var(--radius); overflow:hidden; }
.toast.text-bg-success{ border-left:3px solid var(--success); }
.toast.text-bg-danger{ border-left:3px solid var(--danger); }
.toast.text-bg-warning{ border-left:3px solid var(--warning); }

/* ---------------- Pagination ---------------- */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; flex-wrap:wrap; }
.pager-info{ color:var(--text-3); font-size:12.5px; }
.pager-btns{ display:flex; gap:6px; }
.pager-btns button{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--glass-border); background: var(--glass); color:var(--text-2); font-size:12.5px;
}
.pager-btns button.active{ background: var(--accent); color:#04231F; border-color:var(--accent); font-weight:700; }
.pager-btns button:disabled{ opacity:.4; }

/* ---------------- Loading ---------------- */
.skeleton{ background: linear-gradient(90deg, var(--glass) 25%, var(--glass-strong) 37%, var(--glass) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius:8px; }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.spinner-ring{ width:18px; height:18px; border-radius:50%; border:2.5px solid var(--glass-border); border-top-color: var(--accent); animation: spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.page-loader{ position:fixed; inset:0; background:var(--bg); z-index:3000; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; transition: opacity .3s ease; }

/* ---------------- Chart card ---------------- */
.chart-wrap{ position:relative; height:280px; }
.chart-wrap.sm{ height:210px; }

/* ---------------- Tabs (module sub-nav) ---------------- */
.pill-tabs{ display:flex; gap:6px; background: var(--glass); border:1px solid var(--glass-border); padding:4px; border-radius:12px; width:fit-content; }
.pill-tabs button{ border:none; background:transparent; color:var(--text-2); font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:9px; }
.pill-tabs button.active{ background: var(--accent); color:#04231F; }

/* ---------------- Progress ---------------- */
.progress-glass{ height:8px; border-radius:20px; background: var(--glass-strong); overflow:hidden; }
.progress-glass .bar{ height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:20px; transition: width .3s ease; }

/* ---------------- Empty state ---------------- */
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-3); }
.empty-state i{ font-size:38px; margin-bottom:12px; opacity:.6; display:block; }

/* ---------------- Section visibility ---------------- */
.app-section{ display:none; animation: fadeIn .25s ease; }
.app-section.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

/* ---------------- Responsive ---------------- */
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; }
.sidebar-toggle-btn{ display:none; }

@media (max-width: 991px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.open{ transform: translateX(0); }
  .main-area{ margin-left:0; }
  .sidebar-toggle-btn{ display:flex; }
  .sidebar-backdrop.show{ display:block; }
  .topbar{ padding: 0 16px; }
  .content-area{ padding: 18px 16px 50px; }
}
@media (max-width: 576px){
  .topbar .search-box{ display:none; }
}

/* ---------------- Confirmation dialog icon ---------------- */
.confirm-icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 14px; }