/* =============================================
   P1 Admin + Client Portal — shared dashboard shell.
   Design language: glassmorphism, animated gradient
   borders, monospaced numerics, cyan-on-ink. Keeps
   all existing class names so admin.js / portal.js
   don't need changes.
   ============================================= */

@property --p1-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ── Login Screen ──────────────────────────────────────────── */
.login-screen {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background:
    radial-gradient(ellipse 900px 600px at 20% 25%, rgba(0, 212, 255, 0.09), transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 80%, rgba(168, 85, 247, 0.06), transparent 60%),
    var(--dark-1);
  overflow: hidden;
}
.login-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 20%, transparent 70%);
  pointer-events: none;
}
.login-screen::after {
  content: '';
  position: absolute; top: -120px; left: -120px; right: -120px; bottom: -120px;
  background:
    radial-gradient(circle 320px at 30% 40%, rgba(0, 212, 255, 0.07), transparent 70%),
    radial-gradient(circle 280px at 70% 65%, rgba(168, 85, 247, 0.05), transparent 70%);
  filter: blur(30px);
  animation: orbDrift 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(40px, -30px); }
  66% { transform: translate(-30px, 40px); }
}

.login-card {
  position: relative;
  width: 100%; max-width: 440px;
  padding: var(--sp-7) var(--sp-6);
  background: rgba(10, 15, 30, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 212, 255, 0.06);
  text-align: center;
  animation: loginIn 0.6s var(--ease);
  z-index: 1;
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.login-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 21px;
  background: conic-gradient(from var(--p1-angle), rgba(0, 212, 255, 0.35), rgba(168, 85, 247, 0.2) 40%, transparent 55%, rgba(0, 212, 255, 0.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: p1Spin 10s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes p1Spin { to { --p1-angle: 360deg; } }

.login-logo {
  margin-bottom: var(--sp-5);
  display: flex; justify-content: center; align-items: baseline; gap: 4px;
}
.login-card h2 {
  font-size: 1.5rem; color: var(--white);
  margin-bottom: var(--sp-2); font-weight: 700; letter-spacing: -0.3px;
}
.login-card > p {
  color: var(--text-dim); font-size: 0.92rem;
  margin-bottom: var(--sp-5); line-height: 1.6;
}
.login-card form { display: flex; flex-direction: column; gap: var(--sp-4); text-align: left; }
.login-card input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.login-card input:focus {
  background: rgba(0, 0, 0, 0.4);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}
.login-card .btn-primary {
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
  font-size: 0.95rem; padding: 14px;
}
.login-error {
  color: var(--red); font-size: 0.85rem;
  min-height: 18px; text-align: center;
  font-weight: 500;
}

/* ── Dashboard Layout ──────────────────────────────────────── */
.admin-dashboard {
  display: flex; min-height: 100vh;
  padding-top: var(--nav-height);
  background:
    radial-gradient(ellipse 800px 500px at 0% 0%, rgba(0, 212, 255, 0.04), transparent 60%),
    radial-gradient(ellipse 600px 400px at 100% 100%, rgba(168, 85, 247, 0.03), transparent 60%),
    var(--dark-1);
}

.admin-sidebar {
  position: fixed; top: var(--nav-height); left: 0; bottom: 0;
  width: 248px; flex-shrink: 0;
  padding: var(--sp-5) 0;
  background: rgba(10, 15, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 255, 0.15) transparent;
  z-index: 100;
}
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.15); border-radius: 3px; }

.sidebar-section { padding: 0 var(--sp-3); margin-bottom: var(--sp-5); }
.sidebar-section h4 {
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--sp-3);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 8px;
}
.sidebar-section h4::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
}

.sidebar-btn {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 14px;
  margin: 2px 0;
  background: none; border: none;
  color: var(--text-dim); font-size: 0.88rem; font-weight: 500;
  text-align: left; cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
  transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.sidebar-btn::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: 0.75;
  transition: opacity var(--dur-fast);
}
.sidebar-btn::after {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
  opacity: 0; transform: scaleY(0.3);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.sidebar-btn:hover {
  background: rgba(0, 212, 255, 0.05);
  color: var(--white);
  transform: translateX(2px);
}
.sidebar-btn:hover::before { opacity: 1; }
.sidebar-btn.active {
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.12), rgba(0, 212, 255, 0.02));
  color: var(--cyan);
}
.sidebar-btn.active::before { opacity: 1; }
.sidebar-btn.active::after { opacity: 1; transform: scaleY(1); }

/* Sidebar icons — keyed to data-panel so HTML/JS don't change */
.sidebar-btn[data-panel="overview"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="services"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='6' rx='2'/%3E%3Crect x='2' y='14' width='20' height='6' rx='2'/%3E%3Cline x1='6' y1='7' x2='6.01' y2='7'/%3E%3Cline x1='6' y1='17' x2='6.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='6' rx='2'/%3E%3Crect x='2' y='14' width='20' height='6' rx='2'/%3E%3Cline x1='6' y1='7' x2='6.01' y2='7'/%3E%3Cline x1='6' y1='17' x2='6.01' y2='17'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="incidents"]::before    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="tickets"]::before,
.sidebar-btn[data-panel="new-ticket"]::before   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="submissions"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="kb-articles"]::before,
.sidebar-btn[data-panel="kb"]::before           { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="kb-categories"]::before{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="announcements"]::before{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="licenses"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3Ccircle cx='17' cy='14' r='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3Ccircle cx='17' cy='14' r='1'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="products"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="releases"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="agencies"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l8-4v18M19 21V11l-6-4'/%3E%3Cline x1='9' y1='9' x2='9' y2='9'/%3E%3Cline x1='9' y1='13' x2='9' y2='13'/%3E%3Cline x1='9' y1='17' x2='9' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l8-4v18M19 21V11l-6-4'/%3E%3Cline x1='9' y1='9' x2='9' y2='9'/%3E%3Cline x1='9' y1='13' x2='9' y2='13'/%3E%3Cline x1='9' y1='17' x2='9' y2='17'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="clients"]::before      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="employees"]::before    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="audit"]::before        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); }
.sidebar-btn[data-panel="password"]::before     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }

.admin-main {
  flex: 1; margin-left: 248px;
  padding: var(--sp-6) var(--sp-7);
  min-height: calc(100vh - var(--nav-height));
  position: relative;
}

/* ── Panels ─────────────────────────────────────────────────── */
.admin-panel { display: none; }
.admin-panel.active {
  display: block;
  animation: panelIn 0.4s var(--ease);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin-panel h2 {
  font-size: 1.75rem; color: var(--white);
  margin-bottom: 6px; font-weight: 700; letter-spacing: -0.4px;
}
.panel-sub {
  color: var(--text-dim); font-size: 0.95rem;
  margin-bottom: var(--sp-5);
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5); gap: var(--sp-4);
}
.panel-header h2 { margin-bottom: 0; }

/* ── Overview Cards ─────────────────────────────────────────── */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.overview-card {
  position: relative;
  padding: var(--sp-5) var(--sp-5);
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  transition: border-color var(--dur-normal), transform var(--dur-normal), box-shadow var(--dur-normal);
}
.overview-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0; transition: opacity var(--dur-normal);
}
.overview-card::after {
  content: '';
  position: absolute; bottom: -40%; right: -30%;
  width: 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.06), transparent 65%);
  pointer-events: none;
}
.overview-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), var(--shadow-glow);
}
.overview-card:hover::before { opacity: 1; }

.overview-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 2.6rem; font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--white) 20%, var(--cyan) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.overview-label {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Admin Tables ───────────────────────────────────────────── */
.admin-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table th {
  text-align: left; padding: 13px 20px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dimmer);
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}
.admin-table td {
  padding: 14px 20px;
  font-size: 0.9rem; color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  vertical-align: middle;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.admin-table tbody tr { position: relative; transition: background var(--dur-fast); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.05), rgba(0, 212, 255, 0.01));
  color: var(--text);
}
.admin-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--cyan);
}
.admin-table td strong { color: var(--white); font-weight: 600; }

/* ── Status Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  transition: all var(--dur-fast);
}
.badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.badge-operational    { background: rgba(16, 185, 129, 0.1);  color: var(--green);  border-color: rgba(16, 185, 129, 0.2); }
.badge-degraded       { background: rgba(245, 158, 11, 0.1);  color: var(--amber);  border-color: rgba(245, 158, 11, 0.2); }
.badge-outage         { background: rgba(239, 68, 68, 0.1);   color: var(--red);    border-color: rgba(239, 68, 68, 0.2); }
.badge-maintenance    { background: rgba(59, 130, 246, 0.1);  color: var(--blue);   border-color: rgba(59, 130, 246, 0.2); }
.badge-investigating  { background: rgba(245, 158, 11, 0.1);  color: var(--amber);  border-color: rgba(245, 158, 11, 0.2); }
.badge-identified     { background: rgba(59, 130, 246, 0.1);  color: var(--blue);   border-color: rgba(59, 130, 246, 0.2); }
.badge-monitoring     { background: rgba(0, 212, 255, 0.1);   color: var(--cyan);   border-color: rgba(0, 212, 255, 0.2); }
.badge-resolved       { background: rgba(16, 185, 129, 0.1);  color: var(--green);  border-color: rgba(16, 185, 129, 0.2); }
.badge-admin          { background: rgba(239, 68, 68, 0.1);   color: var(--red);    border-color: rgba(239, 68, 68, 0.2); }
.badge-staff          { background: rgba(59, 130, 246, 0.1);  color: var(--blue);   border-color: rgba(59, 130, 246, 0.2); }
.badge-unread         { background: rgba(0, 212, 255, 0.15);  color: var(--cyan);   border-color: rgba(0, 212, 255, 0.3); }
.badge-read           { background: rgba(100, 116, 139, 0.1); color: var(--text-dimmer); border-color: rgba(100, 116, 139, 0.2); }

/* Ticket priority/status (portal + admin) */
.badge-low            { background: rgba(100, 116, 139, 0.1); color: var(--text-dim); border-color: rgba(100, 116, 139, 0.2); }
.badge-normal         { background: rgba(59, 130, 246, 0.1);  color: var(--blue);   border-color: rgba(59, 130, 246, 0.2); }
.badge-high           { background: rgba(245, 158, 11, 0.1);  color: var(--amber);  border-color: rgba(245, 158, 11, 0.2); }
.badge-urgent         { background: rgba(239, 68, 68, 0.15);  color: var(--red);    border-color: rgba(239, 68, 68, 0.3); }
.badge-open           { background: rgba(0, 212, 255, 0.1);   color: var(--cyan);   border-color: rgba(0, 212, 255, 0.2); }
.badge-in-progress    { background: rgba(59, 130, 246, 0.1);  color: var(--blue);   border-color: rgba(59, 130, 246, 0.2); }
.badge-waiting        { background: rgba(245, 158, 11, 0.1);  color: var(--amber);  border-color: rgba(245, 158, 11, 0.2); }
.badge-closed         { background: rgba(100, 116, 139, 0.1); color: var(--text-dimmer); border-color: rgba(100, 116, 139, 0.2); }

/* ── Status Select ─────────────────────────────────────────── */
.status-select {
  padding: 7px 30px 7px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  color: var(--text); font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.status-select:hover { border-color: rgba(0, 212, 255, 0.3); }
.status-select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1); }

/* ── Create Forms ───────────────────────────────────────────── */
.create-form {
  position: relative;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.create-form::before {
  content: '';
  position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.3;
}
.create-form h3 {
  font-size: 1.05rem; color: var(--white);
  margin-bottom: var(--sp-4); font-weight: 600; letter-spacing: -0.2px;
}
.create-form .form-group { margin-bottom: var(--sp-3); }
.create-form .form-row  { margin-bottom: var(--sp-3); }
.form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }

.checkbox-group {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.checkbox-group label {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xs);
  font-size: 0.85rem; color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.checkbox-group label:hover { border-color: rgba(0, 212, 255, 0.25); color: var(--text); }
.checkbox-group input { accent-color: var(--cyan); }

/* ── Submission / incident cards ───────────────────────────── */
.submission-card {
  position: relative;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  transition: border-color var(--dur-normal), transform var(--dur-normal), box-shadow var(--dur-normal);
}
.submission-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.submission-card.unread {
  border-left: 3px solid var(--cyan);
  box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.04);
}
.submission-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: 10px; flex-wrap: wrap;
}
.submission-header h3 {
  font-size: 1.02rem; color: var(--white); font-weight: 600; letter-spacing: -0.2px;
}
.submission-meta {
  font-size: 0.82rem; color: var(--text-dimmer);
  margin-bottom: 10px; line-height: 1.6;
}
.submission-msg {
  font-size: 0.92rem; color: var(--text-dim);
  line-height: 1.7; white-space: pre-wrap;
}

/* ── Password Form ─────────────────────────────────────────── */
.password-form { max-width: 440px; }
.password-form .form-group { margin-bottom: var(--sp-4); }
.password-msg { margin-top: var(--sp-3); font-size: 0.88rem; font-weight: 500; }

/* ── Audit Log ─────────────────────────────────────────────── */
.audit-row {
  display: grid; grid-template-columns: 160px 140px 1fr;
  align-items: center; gap: var(--sp-4);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  transition: background var(--dur-fast);
}
.audit-row:hover { background: rgba(0, 212, 255, 0.02); }
.audit-time { color: var(--text-dimmer); font-size: 0.8rem; font-family: var(--font-mono); }
.audit-user { color: var(--cyan); font-weight: 500; }
.audit-action { color: var(--text-dim); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px); opacity: 0;
  transition: all var(--dur-normal) var(--ease);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.toast-success { border-left: 3px solid var(--green); }
.toast-success::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.toast-error   { border-left: 3px solid var(--red); }
.toast-error::before   { background: var(--red);   box-shadow: 0 0 10px var(--red); }

/* ── Filter buttons ────────────────────────────────────────── */
.filter-active {
  background: rgba(0, 212, 255, 0.12) !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.06);
}

/* ── Light theme ────────────────────────────────────────────── */
[data-theme="light"] .login-screen {
  background:
    radial-gradient(ellipse 900px 600px at 20% 25%, rgba(8, 145, 178, 0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 80%, rgba(168, 85, 247, 0.04), transparent 60%),
    var(--dark-1);
}
[data-theme="light"] .login-screen::before {
  background-image:
    linear-gradient(rgba(8, 145, 178, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 145, 178, 0.05) 1px, transparent 1px);
}
[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 40px rgba(8, 145, 178, 0.04);
}
[data-theme="light"] .login-card input { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .admin-dashboard {
  background:
    radial-gradient(ellipse 800px 500px at 0% 0%, rgba(8, 145, 178, 0.06), transparent 60%),
    var(--dark-1);
}
[data-theme="light"] .admin-sidebar { background: rgba(255, 255, 255, 0.85); border-right-color: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .overview-card,
[data-theme="light"] .admin-table,
[data-theme="light"] .create-form,
[data-theme="light"] .submission-card { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .admin-table th { background: rgba(0, 0, 0, 0.02); border-bottom-color: rgba(8, 145, 178, 0.15); }
[data-theme="light"] .admin-table tbody tr:hover td { background: linear-gradient(90deg, rgba(8, 145, 178, 0.04), rgba(8, 145, 178, 0.01)); }
[data-theme="light"] .overview-num { background: linear-gradient(135deg, #0f172a 20%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .status-select { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); color: #334155; }
[data-theme="light"] .checkbox-group label { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .toast { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); color: #0f172a; }

/* ── Quill WYSIWYG (dark theme override) ───────────────────── */
.p1-quill {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--text);
  min-height: 260px;
}
.ql-toolbar.ql-snow {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 10px 12px;
}
.ql-container.ql-snow {
  border: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.ql-editor {
  min-height: 260px;
  color: var(--text);
  line-height: 1.75;
  padding: 16px 18px;
}
.ql-editor.ql-blank::before {
  color: var(--text-dimmer);
  font-style: normal;
  left: 18px; right: 18px;
}
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--white); font-weight: 700; letter-spacing: -0.3px; }
.ql-editor strong { color: var(--white); }
.ql-editor a { color: var(--cyan); }
.ql-editor blockquote {
  border-left: 3px solid var(--cyan);
  padding: 4px 14px;
  color: var(--text-dim);
  background: rgba(0, 212, 255, 0.04);
}
.ql-editor pre.ql-syntax,
.ql-editor code {
  background: rgba(0, 212, 255, 0.06);
  color: var(--cyan);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 4px;
  font-family: var(--font-mono);
}
.ql-editor img { max-width: 100%; height: auto; border-radius: 6px; }

/* Toolbar icons + pickers */
.ql-toolbar.ql-snow .ql-stroke,
.ql-toolbar.ql-snow .ql-stroke-miter { stroke: var(--text-dim); }
.ql-toolbar.ql-snow .ql-fill { fill: var(--text-dim); }
.ql-toolbar.ql-snow .ql-picker { color: var(--text-dim); }
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--cyan); }
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--cyan); }
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label.ql-active,
.ql-toolbar.ql-snow .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-item.ql-selected { color: var(--cyan); }

/* Dropdown menus (size/header/color/align) */
.ql-snow .ql-picker-options {
  background: rgba(10, 15, 30, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.ql-snow .ql-picker-options .ql-picker-item { color: var(--text-dim); }

/* Link & video tooltips */
.ql-snow .ql-tooltip {
  background: rgba(10, 15, 30, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.ql-snow .ql-tooltip input[type=text] {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 8px;
}
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove { color: var(--cyan); }

[data-theme="light"] .p1-quill,
[data-theme="light"] .ql-toolbar.ql-snow { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .ql-editor { color: #1e293b; }
[data-theme="light"] .ql-editor h1,
[data-theme="light"] .ql-editor h2,
[data-theme="light"] .ql-editor h3,
[data-theme="light"] .ql-editor strong { color: #0f172a; }
[data-theme="light"] .ql-toolbar.ql-snow .ql-stroke { stroke: #475569; }
[data-theme="light"] .ql-toolbar.ql-snow .ql-fill { fill: #475569; }
[data-theme="light"] .ql-toolbar.ql-snow .ql-picker { color: #475569; }
[data-theme="light"] .ql-snow .ql-picker-options,
[data-theme="light"] .ql-snow .ql-tooltip { background: #ffffff; color: #1e293b; border-color: rgba(0, 0, 0, 0.1); }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-sidebar {
    left: -260px; width: 260px; transition: left var(--dur-normal);
  }
  .admin-sidebar.open { left: 0; }
  .admin-main { margin-left: 0; padding: var(--sp-5) var(--sp-4); }
  .overview-cards { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .overview-num { font-size: 2rem; }
  .admin-panel h2 { font-size: 1.4rem; }
  .audit-row { grid-template-columns: 1fr; gap: 4px; }
}