/* ============================================================
   SaaS Modern Design System — TR-069 ACS Server
   Phase 1: Typography · Colors · Glass · Shadows · Animations
   ============================================================ */

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

:root {
  /* ── Primary palette — rich indigo ── */
  --sm-primary:        #6366f1;
  --sm-primary-dark:   #4f46e5;
  --sm-primary-light:  #818cf8;
  --sm-primary-ultra:  #e0e7ff;
  --sm-gradient:       linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --sm-gradient-btn:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  /* ── Neutral surfaces ── */
  --sm-bg:             #f1f5f9;
  --sm-surface:        #ffffff;
  --sm-border:         #e2e8f0;
  --sm-text:           #1e293b;
  --sm-muted:          #64748b;

  /* ── Shadows ── */
  --sm-shadow-xs:  0 1px 3px rgba(99,102,241,.06), 0 1px 2px rgba(0,0,0,.04);
  --sm-shadow-sm:  0 4px 12px rgba(99,102,241,.10), 0 1px 3px rgba(0,0,0,.06);
  --sm-shadow-md:  0 8px 24px rgba(99,102,241,.13), 0 2px 6px rgba(0,0,0,.06);
  --sm-shadow-lg:  0 16px 40px rgba(99,102,241,.16), 0 4px 12px rgba(0,0,0,.08);

  /* ── Transitions ── */
  --sm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --sm-bounce:     all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 2. Global Font ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body,
.navbar,
.main-menu,
.card,
.form-control,
button,
input,
select,
textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.content-header-title {
  font-weight: 700 !important;
  letter-spacing: -0.3px;
  color: var(--sm-text);
}

/* ── 3. Body Background ─────────────────────────────────────── */
body { background-color: var(--sm-bg) !important; }

/* ── 4. Card — Float & Hover ────────────────────────────────── */
.card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: var(--sm-shadow-sm) !important;
  transition: var(--sm-transition) !important;
  background: var(--sm-surface) !important;
}
.card:hover {
  box-shadow: var(--sm-shadow-md) !important;
  transform: translateY(-2px);
}
.card .card-header {
  border-bottom: 1px solid var(--sm-border) !important;
  background: transparent !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 14px 14px 0 0 !important;
}
.card .card-body { padding: 1.5rem !important; }

/* ── 5. Buttons — Gradient + Lift ───────────────────────────── */
.btn {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  border-radius: 8px !important;
  transition: var(--sm-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem;
}
.btn:hover   { transform: translateY(-2px); box-shadow: var(--sm-shadow-sm); }
.btn:active  { transform: translateY(0); }

.btn-primary {
  background: var(--sm-gradient-btn) !important;
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,.4) !important;
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #fff !important;
}
.btn-success:hover { box-shadow: 0 6px 20px rgba(16,185,129,.35) !important; }

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #fff !important;
}
.btn-danger:hover { box-shadow: 0 6px 20px rgba(239,68,68,.35) !important; }

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #fff !important;
}

.btn-outline-primary {
  border: 2px solid var(--sm-primary) !important;
  color: var(--sm-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--sm-gradient-btn) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  border: 2px solid var(--sm-border) !important;
  color: var(--sm-muted) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--sm-border) !important;
  color: var(--sm-text) !important;
}

.btn-outline-danger {
  border: 2px solid #ef4444 !important;
  color: #ef4444 !important;
  background: transparent !important;
}
.btn-outline-danger:hover {
  background: linear-gradient(135deg,#ef4444,#dc2626) !important;
  color: #fff !important;
}

.btn-outline-warning {
  border: 2px solid #f59e0b !important;
  color: #d97706 !important;
  background: transparent !important;
}
.btn-outline-warning:hover {
  background: linear-gradient(135deg,#f59e0b,#d97706) !important;
  color: #fff !important;
}

.btn-outline-success {
  border: 2px solid #10b981 !important;
  color: #059669 !important;
  background: transparent !important;
}
.btn-outline-success:hover {
  background: linear-gradient(135deg,#10b981,#059669) !important;
  color: #fff !important;
}

/* ── 6. Inputs — Soft, Rounded, Focus Glow ──────────────────── */
.form-control {
  border-radius: 8px !important;
  border: 1.5px solid var(--sm-border) !important;
  background: #f8fafc !important;
  color: var(--sm-text) !important;
  font-size: .875rem !important;
  padding: .6rem .875rem !important;
  transition: var(--sm-transition) !important;
}
.form-control:focus {
  border-color: var(--sm-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  outline: none !important;
}
.form-control::placeholder { color: #94a3b8 !important; }
.form-control:disabled,
.form-control[readonly] {
  background: #f1f5f9 !important;
  color: var(--sm-muted) !important;
  border-style: dashed !important;
}

.input-group-text {
  background: #f1f5f9 !important;
  border: 1.5px solid var(--sm-border) !important;
  border-radius: 8px 0 0 8px !important;
  color: var(--sm-muted) !important;
}
.input-group .form-control:not(:first-child) { border-left: none !important; }
.input-group .form-control:not(:last-child)  { border-right: none !important; border-radius: 0 8px 8px 0 !important; }

select.form-control { appearance: auto; }

/* ── 7. Floating Labels ─────────────────────────────────────── */
.sm-float-group {
  position: relative;
  margin-bottom: 1.25rem;
}
.sm-float-group .form-control {
  padding: 1.4rem .875rem .5rem !important;
  height: auto !important;
}
.sm-float-group select.form-control {
  padding: 1.2rem .875rem .4rem !important;
}
.sm-float-group label {
  position: absolute;
  top: 50%;
  left: .875rem;
  transform: translateY(-50%);
  font-size: .875rem;
  color: #94a3b8;
  pointer-events: none;
  transition: var(--sm-transition);
  background: transparent;
  padding: 0 .15rem;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.sm-float-group .form-control:focus ~ label,
.sm-float-group .form-control:not(:placeholder-shown) ~ label,
.sm-float-group.has-value label,
.sm-float-group select.form-control ~ label {
  top: .6rem;
  transform: translateY(0);
  font-size: .7rem;
  color: var(--sm-primary);
  font-weight: 600;
  letter-spacing: .04em;
}
.sm-float-group .sm-required {
  color: #ef4444;
  margin-left: 2px;
}
.sm-float-group .invalid-feedback { margin-top: .25rem; }

/* ── 8. Form Section Cards ──────────────────────────────────── */
.form-section {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--sm-border);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sm-shadow-xs);
}
.form-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sm-primary);
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--sm-primary-ultra);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.form-section-title i,
.form-section-title svg { width: 14px; height: 14px; }

/* ── 9. Glassmorphism ───────────────────────────────────────── */
.bg-glass {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.4);
}
.dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--sm-shadow-lg) !important;
  padding: .5rem !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px);
  animation: dropIn .18s cubic-bezier(0.4,0,0.2,1);
}
.dropdown-item {
  border-radius: 8px !important;
  transition: var(--sm-transition) !important;
  font-size: .85rem;
  padding: .5rem .75rem !important;
}
.dropdown-item:hover {
  background: var(--sm-primary-ultra) !important;
  color: var(--sm-primary) !important;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 10. Navbar ─────────────────────────────────────────────── */
.header-navbar {
  box-shadow: 0 2px 20px rgba(99,102,241,.1) !important;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.95) !important;
}
.header-navbar .nav-link {
  transition: var(--sm-transition) !important;
  border-radius: 8px;
  padding: .4rem .6rem !important;
}
.header-navbar .nav-link:hover { background: var(--sm-primary-ultra); }

/* ── 11. Sidebar ────────────────────────────────────────────── */
.main-menu .navigation > li > a {
  border-radius: 10px !important;
  margin: 2px 10px !important;
  transition: var(--sm-transition) !important;
}
.main-menu .navigation > li > a:hover {
  background: var(--sm-primary-ultra) !important;
  color: var(--sm-primary) !important;
  transform: translateX(4px);
}
.main-menu .navigation > li.active > a {
  background: var(--sm-gradient) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.4) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
.main-menu .navigation > li.active > a i,
.main-menu .navigation > li.active > a svg { color: #fff !important; stroke: #fff !important; }

.main-menu .navigation > li > a .menu-title { font-weight: 500; font-size: .875rem; }
.main-menu .navigation > li.active > a .menu-title { font-weight: 600; }

/* ── 12. Badges & Chips ─────────────────────────────────────── */
.badge {
  border-radius: 20px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  font-size: .72rem !important;
  padding: .3em .65em !important;
}
.badge-light-primary {
  background: var(--sm-primary-ultra) !important;
  color: var(--sm-primary) !important;
}

/* ── 13. Tables ─────────────────────────────────────────────── */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table thead th {
  background: #f8fafc !important;
  border: none !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--sm-muted) !important;
  padding: .85rem 1rem !important;
}
.table thead th:first-child { border-radius: 10px 0 0 10px; }
.table thead th:last-child  { border-radius: 0 10px 10px 0; }
.table tbody tr {
  transition: var(--sm-transition) !important;
  border-bottom: 1px solid var(--sm-border) !important;
}
.table tbody tr:hover {
  background: var(--sm-primary-ultra) !important;
  transform: scale(1.003);
  box-shadow: var(--sm-shadow-xs);
}
.table tbody td {
  border: none !important;
  padding: .85rem 1rem !important;
  vertical-align: middle !important;
  font-size: .875rem !important;
}
.table-hover tbody tr:hover { background: var(--sm-primary-ultra) !important; }

/* ── 14. Page Load Fade + Slide ─────────────────────────────── */
.content-wrapper,
.app-content {
  animation: pageFadeIn .35s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 15. Zone Switcher — Pulse when Impersonating ───────────── */
.zone-switcher-active #zone-switcher-toggle {
  background: rgba(99,102,241,.1);
  border-radius: 8px;
}
.zone-switcher-active .zone-pulse-dot {
  display: inline-block !important;
  width: 8px;
  height: 8px;
  background: var(--sm-primary);
  border-radius: 50%;
  margin-left: 4px;
  animation: zonePulse 1.6s ease-in-out infinite;
}
@keyframes zonePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  50%       { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
.zone-pulse-dot { display: none; }

/* ── 16. Skeleton Loading ────────────────────────────────────── */
.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-text  { height: .875rem; margin-bottom: .5rem; }
.skeleton-title { height: 1.25rem; width: 60%; margin-bottom: 1rem; }
.skeleton-box   { height: 80px; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── 17. Empty States ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}
.empty-state-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--sm-primary-ultra);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.empty-state-icon svg,
.empty-state-icon i { width: 32px; height: 32px; color: var(--sm-primary); }
.empty-state h4 { font-weight: 700; color: var(--sm-text); margin-bottom: .4rem; }
.empty-state p  { color: var(--sm-muted); font-size: .9rem; max-width: 320px; margin: 0 auto 1.5rem; }

/* ── 18. Progress Bars ──────────────────────────────────────── */
.progress {
  border-radius: 20px !important;
  background: var(--sm-primary-ultra) !important;
  height: 6px !important;
}
.progress-bar {
  border-radius: 20px !important;
  background: var(--sm-gradient) !important;
}
.progress-bar.bg-danger { background: linear-gradient(90deg,#ef4444,#dc2626) !important; }

/* ── 19. Alerts ─────────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: 10px !important;
  border-left: 4px solid transparent !important;
  font-size: .875rem !important;
}
.alert-success { border-left-color: #10b981 !important; background: #ecfdf5 !important; color: #065f46 !important; }
.alert-danger  { border-left-color: #ef4444 !important; background: #fef2f2 !important; color: #991b1b !important; }
.alert-warning { border-left-color: #f59e0b !important; background: #fffbeb !important; color: #92400e !important; }
.alert-info    { border-left-color: var(--sm-primary) !important; background: var(--sm-primary-ultra) !important; color: #3730a3 !important; }

/* ── 20. Code & Monospace ───────────────────────────────────── */
code {
  background: var(--sm-primary-ultra) !important;
  color: var(--sm-primary) !important;
  border-radius: 5px !important;
  padding: .15em .4em !important;
  font-size: .82em !important;
  font-weight: 600;
}

/* ── 21. Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  font-size: .8rem !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--sm-muted) !important; }
.breadcrumb-item a { color: var(--sm-primary) !important; text-decoration: none; }
.breadcrumb-item.active { color: var(--sm-muted) !important; }

/* ── 22. Custom Switch ──────────────────────────────────────── */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--sm-gradient) !important;
  border-color: var(--sm-primary) !important;
}

/* ── 23. Soft Shadow Utility ────────────────────────────────── */
.shadow-soft { box-shadow: var(--sm-shadow-sm) !important; }
.shadow-lift { box-shadow: var(--sm-shadow-md) !important; }
.shadow-none { box-shadow: none !important; }

/* ── 24. Dark Mode Overrides ────────────────────────────────── */
.dark-layout {
  --sm-bg:      #0f172a !important;
  --sm-surface: #1e293b !important;
  --sm-border:  #334155 !important;
  --sm-text:    #f1f5f9 !important;
  --sm-muted:   #94a3b8 !important;
}
.dark-layout body    { background-color: #0f172a !important; }
.dark-layout .card   { background: #1e293b !important; }
.dark-layout .form-control { background: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
.dark-layout .form-control:focus { background: #1e293b !important; }
.dark-layout .table thead th { background: #0f172a !important; }
.dark-layout .dropdown-menu  { background: rgba(30,41,59,.97) !important; }
.dark-layout .sm-float-group label { color: #64748b; }
.dark-layout .form-section { background: #1e293b !important; border-color: #334155 !important; }
.dark-layout .header-navbar { background: rgba(15,23,42,.95) !important; }

/* ── 25. Utility ────────────────────────────────────────────── */
.rounded-pill-btn { border-radius: 50px !important; }
.text-gradient {
  background: var(--sm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.border-gradient {
  border: 2px solid transparent !important;
  background: linear-gradient(#fff,#fff) padding-box, var(--sm-gradient) border-box !important;
}