/* ============================================================================
   Webyne Portal — Premium theme layer  ·  "Dashora" design system
   Re-skins the whole CRM shell (sidebar, topbar, KPI tiles, cards, buttons,
   badges, forms, tables, page header, login) for every portal — Customer,
   Engineer, Sales, Admin — from ONE override file. Loaded after zentic.css.
   Design language adapted from the Dashora admin template:
   indigo #5278ff primary, Inter, 8px radius, icon-chip nav, compact type.
   ============================================================================ */

:root {
  --wy-brand:   #5278ff;   /* Dashora primary */
  --wy-brand-2: #2fb6d0;   /* accent (teal) */
  --wy-brand-soft: rgba(82,120,255,.10);
  --wy-brand-softer: #eef3ff;
  --wy-bg:      #f5f6fa;
  --wy-bg-2:    #f3f5f9;
  --wy-surface: #ffffff;
  --wy-sidebar: #ffffff;
  --wy-border:  #dfe5ef;
  --wy-line-2:  #e4e9f1;
  --wy-text:    #15171c;
  --wy-muted:   #707783;
  --wy-shadow:  0 5px 18px rgba(32,44,80,.05);
  --wy-shadow-md: 0 10px 28px rgba(21,23,28,.08);
  --wy-shadow-lg: 0 18px 44px rgba(21,23,28,.12);
  --wy-radius:  8px;
  --wy-grad:    linear-gradient(135deg, #5278ff, #2fb6d0);
}
:root[data-theme="dark"] {
  --wy-bg:      #0b1020;
  --wy-bg-2:    #101627;
  --wy-surface: #141a2d;
  --wy-sidebar: #080d19;
  --wy-border:  #25314a;
  --wy-line-2:  #25314a;
  --wy-text:    #eef2ff;
  --wy-muted:   #94a3b8;
  --wy-brand-softer: rgba(82,120,255,.22);
  --wy-shadow:  0 20px 50px rgba(0,0,0,.24);
  --wy-shadow-md: 0 20px 50px rgba(0,0,0,.28);
  --wy-shadow-lg: 0 26px 60px rgba(0,0,0,.5);
}

/* ---- Base type: Inter + smaller, tighter (Dashora) ---------------------- */
body {
  background: var(--wy-bg); color: var(--wy-text);
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px; line-height: 1.6; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.zentic-content { background: transparent; font-size: 13px; }
.zentic-main {
  background:
    radial-gradient(900px 380px at 100% -6%, rgba(82,120,255,.08), transparent 55%),
    var(--wy-bg);
}
:root[data-theme="dark"] .zentic-main {
  background: radial-gradient(900px 400px at 100% -6%, rgba(82,120,255,.16), transparent 40%), var(--wy-bg);
}

/* ---- Sidebar (icon-chip nav) -------------------------------------------- */
.zentic-sidebar {
  background: var(--wy-sidebar);
  border-right: 1px solid var(--wy-border);
  box-shadow: 8px 0 26px rgba(21,23,28,.04);
}
.sidebar-brand { padding: 16px 18px 12px; border-bottom: 1px solid var(--wy-border); }
.sidebar-nav { padding: 14px 12px; }
.nav-section { margin-bottom: 4px; }
.nav-section-label {
  font-size: 10px !important; font-weight: 900 !important; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wy-muted) !important; opacity: .85;
  padding: 10px 12px 6px !important;
}
.nav-list { display: flex; flex-direction: column; gap: 3px; }
.nav-link {
  display: flex; align-items: center; gap: 11px; min-height: 42px;
  padding: 9px 12px !important; border-radius: var(--wy-radius) !important;
  color: #556070 !important; font-weight: 700; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
:root[data-theme="dark"] .nav-link { color: var(--wy-muted) !important; }
.nav-link .nav-icon {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; color: var(--wy-brand) !important; background: var(--wy-brand-soft);
  transition: background .15s, color .15s;
}
.nav-link:hover, .nav-link.active { background: var(--wy-brand-softer) !important; color: #303846 !important; }
:root[data-theme="dark"] .nav-link:hover, :root[data-theme="dark"] .nav-link.active { color: #fff !important; }
.nav-link.active { font-weight: 800; box-shadow: inset 3px 0 0 var(--wy-brand); }
.nav-link.active .nav-icon { background: var(--wy-brand); color: #fff !important; }
:root[data-theme="dark"] .nav-link.active .nav-icon { background: rgba(255,255,255,.14); }

/* ---- Topbar ------------------------------------------------------------- */
.zentic-topbar {
  background: color-mix(in srgb, var(--wy-surface) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--wy-border); box-shadow: 0 2px 10px rgba(21,23,28,.04);
}
.topbar-btn, .header-icon {
  border: 1px solid var(--wy-border) !important; background: var(--wy-surface) !important;
  border-radius: var(--wy-radius) !important; color: var(--wy-text) !important;
  transition: background .15s, color .15s, border-color .15s;
}
.topbar-btn:hover, .header-icon:hover { background: var(--wy-brand-soft) !important; color: var(--wy-brand) !important; border-color: var(--wy-brand) !important; }
.topbar-user-avatar, .udm-avatar { background: var(--wy-grad) !important; box-shadow: 0 8px 18px rgba(82,120,255,.28); }
.topbar-divider { background: var(--wy-border); }

/* ---- Page header -------------------------------------------------------- */
.page-title { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--wy-text); }
.page-subtitle { color: var(--wy-muted); font-size: 13px; }

/* ---- Cards -------------------------------------------------------------- */
.zentic-card {
  background: var(--wy-surface); border: 1px solid var(--wy-line-2);
  border-radius: var(--wy-radius); box-shadow: var(--wy-shadow);
  transition: box-shadow .18s ease, transform .18s ease;
}
.zentic-card-header { border-bottom: 1px solid var(--wy-border); }
.card-title { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 700; font-size: 15px; color: var(--wy-text); }

/* ---- KPI / stat tiles (Dashora circular icons) -------------------------- */
.stat-card {
  position: relative; overflow: hidden;
  background: var(--wy-surface); border: 1px solid var(--wy-line-2);
  border-radius: var(--wy-radius); padding: 18px; box-shadow: var(--wy-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--wy-shadow-md); }
.stat-icon {
  width: 48px !important; height: 48px !important; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  color: #fff !important; box-shadow: 0 10px 20px rgba(21,23,28,.14);
}
.stat-icon i { color: #fff !important; font-size: 20px; }
.stat-icon.zentic-bg-blue   { background: linear-gradient(135deg,#5278ff,#2fb6d0) !important; }
.stat-icon.zentic-bg-green  { background: linear-gradient(135deg,#22c55e,#16a34a) !important; }
.stat-icon.zentic-bg-red    { background: linear-gradient(135deg,#fb7185,#dc2626) !important; }
.stat-icon.zentic-bg-orange { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; }
.stat-icon.zentic-bg-purple { background: linear-gradient(135deg,#8b5cf6,#6c63ee) !important; }
.stat-icon.zentic-bg-cyan   { background: linear-gradient(135deg,#22d3ee,#2fb6d0) !important; }
.stat-value { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--wy-text); line-height: 1.1; margin-top: 12px; }
.stat-label { color: var(--wy-muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }

/* ---- Buttons (solid indigo, 8px) ---------------------------------------- */
.btn-zentic { border-radius: var(--wy-radius) !important; font-weight: 700; font-size: 13px; transition: transform .1s, box-shadow .16s, background .16s, filter .16s; }
.btn-zentic:active { transform: translateY(1px); }
.btn-ai, .btn-primary {
  background: var(--wy-brand) !important; border: 1px solid var(--wy-brand) !important; color: #fff !important;
  box-shadow: 0 8px 18px rgba(82,120,255,.26);
}
.btn-ai:hover, .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(82,120,255,.4) !important; color:#fff !important; }
.btn-outline { background: var(--wy-surface) !important; border: 1px solid var(--wy-border) !important; color: var(--wy-text) !important; }
.btn-outline:hover { background: var(--wy-brand-soft) !important; border-color: var(--wy-brand) !important; color: var(--wy-brand) !important; }

/* ---- Badges ------------------------------------------------------------- */
.badge-zentic { border-radius: 999px !important; font-weight: 800; font-size: 11px; letter-spacing: .01em; }

/* ---- Forms -------------------------------------------------------------- */
.form-control-zentic, .form-select-zentic {
  border-radius: var(--wy-radius) !important; border: 1px solid var(--wy-border) !important;
  background: var(--wy-surface) !important; color: var(--wy-text) !important; font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.form-control-zentic:focus, .form-select-zentic:focus {
  border-color: var(--wy-brand) !important; box-shadow: 0 0 0 3px rgba(82,120,255,.15) !important; outline: none !important;
}
.form-label { font-weight: 700; color: var(--wy-text); font-size: 12.5px; }

/* ---- Footer ------------------------------------------------------------- */
.zentic-footer { color: var(--wy-muted); border-top: 1px solid var(--wy-border); background: transparent; font-size: 12.5px; }

/* ---- Notification dropdown --------------------------------------------- */
.wsn-panel { border-radius: var(--wy-radius) !important; box-shadow: var(--wy-shadow-lg) !important; }

/* ---- Auth / login ------------------------------------------------------- */
.auth-left { background: var(--wy-grad); }
.auth-right { background: var(--wy-surface); }
.auth-tagline { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.btn-ai.w-100 { border-radius: var(--wy-radius) !important; }

/* ---- Scrollbars --------------------------------------------------------- */
.sidebar-nav::-webkit-scrollbar, .zentic-content::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb, .zentic-content::-webkit-scrollbar-thumb { background: rgba(120,140,170,.28); border-radius: 20px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover, .zentic-content::-webkit-scrollbar-thumb:hover { background: rgba(120,140,170,.45); }

/* ---- Staff passwords: "Forgot password?" on sign-in, Change password on Security --------- */
.auth-forgot-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--zc-primary); text-decoration: none; cursor: pointer; }
.auth-forgot-link:hover { text-decoration: underline; color: var(--zc-primary-dark); }
.auth-forgot-link.disabled { pointer-events: none; opacity: .45; }
.auth-hint { margin-top: 6px; font-size: 12.5px; color: var(--zc-text-muted); }
.pw-card { max-width: 560px; }
.pw-strength { display: flex; gap: 4px; margin-top: 8px; }
.pw-strength i { flex: 1; height: 4px; border-radius: 4px; background: var(--zc-border, #e5e7eb); }
.pw-strength[data-level="1"] i:nth-child(-n+1) { background: #e5484d; }
.pw-strength[data-level="2"] i:nth-child(-n+2) { background: #f5a623; }
.pw-strength[data-level="3"] i:nth-child(-n+3) { background: #3e7bfa; }
.pw-strength[data-level="4"] i:nth-child(-n+4) { background: #12aa67; }
.pw-gen { display: flex; gap: 8px; }
.pw-gen .input-group-zentic { flex: 1; }

/* ---- Admin: "Accept chat" bar on a chat that is waiting for an agent ---- */
.chat-accept-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 14px; padding: 10px 14px; border-radius: 10px; background: #fff7e6; border: 1px solid #f5d38a; color: #7a4f01; font-size: 13.5px; }
.chat-accept-bar .btn-zentic { flex-shrink: 0; }