:root {
  --bg: #f2f4f9;
  --sidebar-bg: #0e1531;
  --sidebar-bg-2: #141d40;
  --sidebar-text: #9aa4c4;
  --sidebar-accent: #4f6df7;
  --card-shadow: 0 2px 10px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --radius: 14px;
  --sidebar-w: 264px;
}

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

body { background: var(--bg); color:#1c2333; }

.view { display:none; }
.view.active { display:block; }

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

#sidebar {
  width: var(--sidebar-w); flex-shrink:0; position:fixed; top:0; left:0; bottom:0;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  overflow-y:auto; z-index:1040; transition: width .2s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-content {
  margin-left: var(--sidebar-w); flex:1; min-width:0;
  transition: margin-left .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
  display:flex; align-items:center; gap:10px; padding:22px 20px 16px; color:#fff;
  font-weight:800; font-size:1.05rem; letter-spacing:.01em;
}
.sidebar-brand .brand-icon {
  width:34px; height:34px; border-radius:10px; background:var(--sidebar-accent);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.sidebar-brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sidebar-user {
  margin:4px 16px 18px; padding:12px; border-radius:12px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px;
}
.sidebar-user .avatar {
  width:38px; height:38px; border-radius:50%; background:var(--sidebar-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0;
}
.sidebar-user .name { color:#fff; font-weight:600; font-size:.86rem; line-height:1.2; }
.sidebar-user .role-badge {
  font-size:.66rem; background:rgba(79,109,247,.25); color:#a9b8ff; padding:1px 8px;
  border-radius:20px; display:inline-block; margin-top:3px; font-weight:600;
}

.nav-group-label {
  color:#5b6690; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding:16px 20px 6px; font-weight:700;
}
.sidebar-link {
  display:flex; align-items:center; gap:12px; padding:10px 20px; color:var(--sidebar-text);
  text-decoration:none; font-size:.87rem; font-weight:500; border-left:3px solid transparent;
  cursor:pointer; background:none; border-top:none; border-right:none; border-bottom:none; width:100%; text-align:left;
}
.sidebar-link i { font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }
.sidebar-link:hover { background:rgba(255,255,255,.05); color:#fff; }
.sidebar-link.active-view { background:rgba(79,109,247,.16); color:#fff; border-left-color:var(--sidebar-accent); font-weight:600; }

#sidebar-backdrop {
  display:none; position:fixed; inset:0; background:rgba(10,14,30,.5); z-index:1035;
}

#topbar {
  position:sticky; top:0; background:#fff; box-shadow:var(--card-shadow); z-index:1020;
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#topbar h5 { margin:0; font-weight:700; }
#sidebar-toggle-btn { display: inline-flex; }

/* ---------- Collapsible Sidebar (Desktop) ---------- */
.sidebar-collapsed {
  --sidebar-w: 70px;
}
.sidebar-collapsed #brand-name,
.sidebar-collapsed .sidebar-user div,
.sidebar-collapsed .sidebar-link span,
.sidebar-collapsed .nav-group-label {
  display: none !important;
}
.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 12px;
  border-left-width: 3px;
}
.sidebar-collapsed .sidebar-link i {
  margin: 0;
  font-size: 1.25rem;
}
.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding: 22px 10px 16px;
}
.sidebar-collapsed .sidebar-user {
  justify-content: center;
  margin: 4px 8px 18px;
  padding: 8px;
}

.content-area { padding:22px 24px 40px; }

/* ---------- Dashboard ---------- */
.welcome-banner {
  background: linear-gradient(120deg, #131c3f, #24316b);
  color:#fff; border-radius: var(--radius); padding:22px 26px; display:flex;
  align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px;
}
.welcome-banner h4 { margin:0 0 4px; font-weight:700; }
.welcome-banner p { margin:0; opacity:.75; font-size:.88rem; }
.welcome-banner .date-chip {
  background:rgba(255,255,255,.12); padding:8px 16px; border-radius:20px; font-size:.82rem; font-weight:500;
}

.kpi-xl {
  border-radius: var(--radius); padding:20px; color:#fff; box-shadow: var(--card-shadow);
  display:flex; flex-direction:column; gap:10px; min-height:118px; justify-content:space-between;
}
.kpi-xl .kpi-top { display:flex; align-items:flex-start; justify-content:space-between; }
.kpi-xl .kpi-icon {
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.kpi-xl .kpi-value { font-size:1.6rem; font-weight:800; line-height:1; }
.kpi-xl .kpi-label { font-size:.78rem; opacity:.85; font-weight:500; }
.kpi-xl .kpi-sub { font-size:.74rem; opacity:.8; }
.kpi-xl.c-blue { background: linear-gradient(135deg,#3b64f6,#5c82ff); }
.kpi-xl.c-green { background: linear-gradient(135deg,#0fa96b,#1ec98a); }
.kpi-xl.c-navy { background: linear-gradient(135deg,#0f1730,#1d2b57); }
.kpi-xl.c-orange { background: linear-gradient(135deg,#f0930f,#f8b23e); }

.stat-tile {
  border-radius:12px; padding:14px 16px; box-shadow: var(--card-shadow); color:#fff;
  min-height:82px; display:flex; flex-direction:column; justify-content:space-between;
}
.stat-tile .stat-value { font-size:1.25rem; font-weight:800; line-height:1; }
.stat-tile .stat-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; opacity:.85; font-weight:700; }
.stat-tile .stat-sub { font-size:.68rem; opacity:.85; }
.stat-tile .stat-top { display:flex; align-items:center; justify-content:space-between; }
.stat-tile i { font-size:.95rem; opacity:.9; }
.tile-1 { background: linear-gradient(135deg,#2f6fed,#4f8bff); }
.tile-2 { background: linear-gradient(135deg,#0e9a8f,#16bfae); }
.tile-3 { background: linear-gradient(135deg,#12233f,#223769); }
.tile-4 { background: linear-gradient(135deg,#18a565,#2ac37e); }
.tile-5 { background: linear-gradient(135deg,#e8952a,#f7b13f); }
.tile-6 { background: linear-gradient(135deg,#1b2a52,#2c3f7d); }
.tile-7 { background: linear-gradient(135deg,#7a4cf0,#9a72ff); }
.tile-8 { background: linear-gradient(135deg,#d0455a,#ea6478); }
.tile-9 { background: linear-gradient(135deg,#149c8f,#1ec2b3); }
.tile-10 { background: linear-gradient(135deg,#101a33,#1e2c56); }
.tile-11 { background: linear-gradient(135deg,#1c2333,#33405e); }
.tile-12 { background: linear-gradient(135deg,#e0b429,#f0cb52); color:#1c2333; }

.chart-card { background:#fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding:18px 20px; }
.chart-card h6 { font-weight:700; margin-bottom:14px; }

/* ---------- Generic cards / tables ---------- */
.surface-card { background:#fff; border-radius: var(--radius); box-shadow: var(--card-shadow); border:none; }
.table-responsive { background:#fff; border-radius: var(--radius); box-shadow: var(--card-shadow); padding:4px; }
.table > :not(caption) > * > * { padding: .75rem .85rem; }

.status-badge-Pending { background:#f0ad4e; color:#fff; }
.status-badge-Confirmed { background:#5cb85c; color:#fff; }
.status-badge-Cancelled { background:#d9534f; color:#fff; }
.status-badge-Completed { background:#0d6efd; color:#fff; }
.status-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }

#calendar-el { background:#fff; padding:16px; border-radius: var(--radius); box-shadow: var(--card-shadow); }

#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(6, 40, 99, 0.92) 0%, rgba(4, 28, 68, 0.98) 100%), 
              radial-gradient(circle at 10% 20%, rgba(20, 70, 160, 0.35) 0%, transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(0, 220, 160, 0.12) 0%, transparent 50%),
              #041c44;
  padding: 20px;
  box-sizing: border-box;
}
.login-card-container {
  width: 100%;
  max-width: 450px;
}
.login-card {
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.login-logo-wrapper {
  display: inline-block;
  padding: 10px;
  border-radius: 16px;
  background: #f8fafc;
}

@media (max-width: 991px) {
  #sidebar { transform: translateX(-100%); width: 264px !important; transition: transform .25s ease !important; }
  #sidebar.sidebar-open { transform: translateX(0); }
  #main-content { margin-left:0 !important; }
  #sidebar-toggle-btn { display:inline-flex; }
  #sidebar-backdrop.show { display:block; }
  
  .sidebar-collapsed #brand-name,
  .sidebar-collapsed .sidebar-user div,
  .sidebar-collapsed .sidebar-link span,
  .sidebar-collapsed .nav-group-label {
    display: block !important;
  }
  .sidebar-collapsed .sidebar-user div {
    display: flex !important;
    flex-direction: column;
  }
  .sidebar-collapsed .sidebar-link {
    justify-content: flex-start;
    padding: 10px 16px;
  }
  .sidebar-collapsed .sidebar-link i {
    margin-right: 12px;
  }
  .sidebar-collapsed .sidebar-brand {
    justify-content: flex-start;
    padding: 22px 20px 16px;
  }
  .sidebar-collapsed .sidebar-user {
    justify-content: flex-start;
    margin: 4px 16px 18px;
    padding: 12px;
  }
}
@media (max-width: 576px) {
  .kpi-xl .kpi-value { font-size:1.3rem; }
  .content-area { padding:16px; }
}

.border-dashed {
  border: 2px dashed #dee2e6;
  border-radius: var(--radius);
  transition: background-color 0.2s, border-color 0.2s;
}
.border-dashed:hover {
  background-color: #f8f9fa;
  border-color: var(--sidebar-accent);
}