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

:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --border:#e6edf5;
  --text:#0b1220;
  --muted:#5b667a;
  --primary:#00a3e0;
  --primary-2:#007bb0;
  --accent:#ff7a00;
  --shadow: 0 10px 30px rgba(14, 30, 67, 0.08);
  --shadow-2: 0 2px 10px rgba(14, 30, 67, 0.06);
  --ring: 0 0 0 3px rgba(0, 163, 224, 0.18);
  --radius: 16px;
}

html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

a{ color: var(--primary-2); }
a:hover{ color: var(--primary); }

/* Common app shell components used across dashboard/admin pages */
.app-sidebar{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-right: 1px solid var(--border) !important;
}
.app-sidebar-brand{
  border-bottom: 1px solid var(--border) !important;
}
.ws-brand-logo{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.ws-brand-text .name{ color: var(--text) !important; font-weight: 800 !important; }
.app-nav .nav-item,
.app-nav a.nav-item,
.app-nav button{
  border-radius: 12px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}
.app-nav .nav-item:hover,
.app-nav a.nav-item:hover,
.app-nav button:hover{
  background: rgba(0,163,224,0.08) !important;
  color: var(--text) !important;
}
.app-nav .nav-item.active,
.app-nav a.nav-item.active,
.app-nav button.active{
  background: rgba(0,163,224,0.12) !important;
  color: var(--primary-2) !important;
  box-shadow: inset 0 0 0 1px rgba(0,163,224,0.22) !important;
}
.app-sidebar-foot{
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.app-topbar{
  background: rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}

.card{
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-2) !important;
}

input, select, textarea{
  border-radius: 12px !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  outline: none !important;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(0, 163, 224, 0.55) !important;
  box-shadow: var(--ring) !important;
}

.btn{
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%) !important;
  box-shadow: var(--shadow-2) !important;
  font-weight: 800 !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: var(--shadow);
}
.btn:active{
  transform: translateY(0px);
  box-shadow: var(--shadow-2);
}
.btn.secondary{
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.btn.secondary:hover{
  box-shadow: var(--shadow-2) !important;
  filter: none !important;
}

.edit-pill{
  border-color: var(--border) !important;
  border-radius: 999px !important;
}

/* Some pages use alternative vars */
:root{
  --text-muted: var(--muted);
  --primary-hover: var(--primary-2);
  --shadow-1: var(--shadow-2);
  --shadow-2: var(--shadow);
}