/* ============================================================
   ORA IRAQ — NEOMORPHISM (SOFT UI) THEME
   High-end soft-UI layer. Loaded AFTER styles.css + brand.css,
   so it overrides the glass-morphism chrome only.
   Everything shares one flat surface and is sculpted with a
   paired light/dark shadow. Light + dark (html.dark) supported.
   ============================================================ */

:root {
  /* --- Neomorphic surface (clean white) ---
     Base is a near-white neutral so BOTH the white highlight and the soft
     grey shadow can show — true #fff can't cast the top-left highlight. */
  --neo-bg:        #ECEFF3;
  --neo-bg-2:      #E5E9EF;   /* very slightly deeper wells sit on this */
  --neo-light:     #FFFFFF;   /* top-left highlight (pure white) */
  --neo-dark:      #CBD2DC;   /* bottom-right shadow (soft grey) */

  --neo-text:      #222A2E;
  --neo-text-soft: #56616A;
  --neo-text-mute: #8A949D;

  --neo-green:     #1F4F3A;
  --neo-green-2:   #2A6349;
  --neo-gold:      #B9924A;
  --neo-on-accent: #F4F8FB;

  /* Distance / blur scale */
  --neo-raised:    6px 6px 14px var(--neo-dark), -6px -6px 14px var(--neo-light);
  --neo-raised-sm: 3px 3px 7px var(--neo-dark),  -3px -3px 7px var(--neo-light);
  --neo-raised-lg: 11px 11px 26px var(--neo-dark), -11px -11px 26px var(--neo-light);
  --neo-inset:     inset 5px 5px 11px var(--neo-dark), inset -5px -5px 11px var(--neo-light);
  --neo-inset-sm:  inset 3px 3px 6px var(--neo-dark),  inset -3px -3px 6px var(--neo-light);
  --neo-hover:     9px 9px 20px var(--neo-dark), -9px -9px 20px var(--neo-light);

  --neo-radius:    20px;
  --neo-radius-sm: 14px;
  --neo-radius-pill: 999px;
  --neo-ease:      0.28s cubic-bezier(.4, 0, .2, 1);
}

html.dark {
  --neo-bg:        #2A2E33;
  --neo-bg-2:      #262A2F;
  --neo-light:     #343A40;
  --neo-dark:      #1D2125;

  --neo-text:      #E8EBEF;
  --neo-text-soft: #B2BAC2;
  --neo-text-mute: #868E97;

  --neo-green:     #5FBF93;
  --neo-green-2:   #6FCF9F;
  --neo-gold:      #D8BC78;
  --neo-on-accent: #10231A;
}

/* ---------- Page / shell ---------- */
html, body,
body.preload,
.app,
.bg-layer {
  background: var(--neo-bg) !important;
}
body::before, body::after,
.bg-orb, .bg-layer .bg-orb { display: none !important; }

body { color: var(--neo-text) !important; }

/* Kill glass everywhere: no blur, no glass borders */
.card, .metric-card, .stat-card, .perf-metric, .cx-panel, .chart-container,
.table-container, .notification-modal, .notification-card, .settings-group,
.nav, .sidebar, .modal, .heatmap-container, .nps-main-score-card,
.client-selector-header, .wa-header, .search-results-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--neo-bg) !important;
  border: none !important;
  box-shadow: var(--neo-raised-lg) !important;
  border-radius: 0 var(--neo-radius) var(--neo-radius) 0 !important;
}
.sidebar-scroll { background: transparent !important; }
.sidebar-group { background: transparent !important; border: none !important; }
.sidebar-group-label {
  color: var(--neo-text-mute) !important;
  letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
}

/* Sidebar nav items (buttons/links inside groups) */
.sidebar-group .tab-btn,
.sidebar a, .sidebar button.nav-item, .sidebar .nav-item {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm) !important;
  color: var(--neo-text-soft) !important;
  box-shadow: none !important;
  transition: box-shadow var(--neo-ease), color var(--neo-ease), transform var(--neo-ease);
}
.sidebar-group .tab-btn:hover,
.sidebar .nav-item:hover {
  color: var(--neo-text) !important;
  box-shadow: var(--neo-raised-sm) !important;
}
.sidebar-group .tab-btn.active,
.sidebar .nav-item.active {
  color: var(--neo-green) !important;
  font-weight: 600;
  box-shadow: var(--neo-inset) !important;
}

/* ---------- Top nav bar ---------- */
.nav {
  background: var(--neo-bg) !important;
  border: none !important;
  box-shadow: var(--neo-raised) !important;
  border-radius: var(--neo-radius) !important;
  margin: 14px 16px 0 !important;
}
.nav-dot { box-shadow: var(--neo-inset-sm) !important; }

/* Round icon buttons in the bar */
.nav-icon-btn, .notification-btn, .sidebar-toggle,
.modal-close-btn, .notification-close, .theme-toggle,
.toggle-password {
  background: var(--neo-bg) !important;
  border: none !important;
  color: var(--neo-text-soft) !important;
  border-radius: var(--neo-radius-pill) !important;
  box-shadow: var(--neo-raised-sm) !important;
  transition: box-shadow var(--neo-ease), color var(--neo-ease);
}
.nav-icon-btn:hover, .notification-btn:hover, .sidebar-toggle:hover,
.modal-close-btn:hover, .notification-close:hover, .theme-toggle:hover,
.toggle-password:hover { color: var(--neo-text) !important; box-shadow: var(--neo-hover) !important; }
.nav-icon-btn:active, .notification-btn:active, .sidebar-toggle:active,
.modal-close-btn:active, .theme-toggle:active { box-shadow: var(--neo-inset-sm) !important; }

/* ---------- Cards & panels (all raised surfaces) ---------- */
.card, .metric-card, .stat-card, .perf-metric, .cx-panel, .chart-container,
.table-container, .settings-group, .heatmap-container, .nps-main-score-card,
.notification-summary-item, .status-content, .search-filter-item {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-raised) !important;
  background-image: none !important;
}
.card { transition: box-shadow var(--neo-ease), transform var(--neo-ease); }
.card:hover { box-shadow: var(--neo-hover) !important; }

.card-header, .cx-panel__head { background: transparent !important; border: none !important; }
.cx-panel__body { background: transparent !important; }
.card-header { border-bottom: none !important; }

/* Nested wells inside cards read as pressed-in */
.cx-empty, .settings-help {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-inset-sm) !important;
}

/* ---------- Metric / stat icon wells ---------- */
.metric-icon, .stat-icon, .perf-metric-icon, .notification-icon, .icon-circle,
.wa-avatar {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius-pill) !important;
  box-shadow: var(--neo-raised-sm) !important;
  color: var(--neo-green) !important;
}
.metric-value, .stat-value, .perf-metric-value,
.notification-summary-value { color: var(--neo-text) !important; }
.metric-label, .stat-label, .perf-metric-label, .settings-label,
.notification-summary-label, .stat-info { color: var(--neo-text-mute) !important; }

/* ---------- Buttons ---------- */
.btn, button.btn {
  background: var(--neo-bg) !important;
  border: none !important;
  color: var(--neo-text) !important;
  border-radius: var(--neo-radius-pill) !important;
  box-shadow: var(--neo-raised-sm) !important;
  transition: box-shadow var(--neo-ease), transform var(--neo-ease), color var(--neo-ease);
}
.btn:hover { box-shadow: var(--neo-hover) !important; transform: translateY(-1px); }
.btn:active { box-shadow: var(--neo-inset) !important; transform: translateY(0); }

.btn.subtle, .btn.secondary { color: var(--neo-text-soft) !important; }

/* Primary = coloured (green) soft extrusion */
.btn.primary, button.primary, .primary-btn {
  background: linear-gradient(145deg, var(--neo-green-2), var(--neo-green)) !important;
  color: var(--neo-on-accent) !important;
  border: none !important;
  border-radius: var(--neo-radius-pill) !important;
  box-shadow: 6px 6px 14px var(--neo-dark), -6px -6px 14px var(--neo-light) !important;
}
.btn.primary:hover, .primary-btn:hover {
  box-shadow: 9px 9px 20px var(--neo-dark), -9px -9px 20px var(--neo-light) !important;
  transform: translateY(-1px);
}
.btn.primary:active, .primary-btn:active {
  box-shadow: inset 4px 4px 9px rgba(0,0,0,.28), inset -3px -3px 8px rgba(255,255,255,.12) !important;
  transform: translateY(0);
}

/* ---------- Inputs / selects / textareas (pressed wells) ---------- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], input[type="tel"],
select, textarea, .settings-input, .input-shell {
  background: var(--neo-bg) !important;
  border: none !important;
  color: var(--neo-text) !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-inset) !important;
  transition: box-shadow var(--neo-ease);
}
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--neo-text-mute) !important; }
.input:focus, input:focus, select:focus, textarea:focus, .input-shell:focus-within {
  outline: none !important;
  box-shadow: var(--neo-inset), 0 0 0 2px rgba(31,79,58,.18) !important;
}
.input-icon { color: var(--neo-text-mute) !important; }

/* ---------- Tabs ---------- */
.tab-btn {
  background: var(--neo-bg) !important;
  border: none !important;
  color: var(--neo-text-soft) !important;
  border-radius: var(--neo-radius-pill) !important;
  box-shadow: var(--neo-raised-sm) !important;
  transition: box-shadow var(--neo-ease), color var(--neo-ease);
}
.tab-btn:hover { color: var(--neo-text) !important; box-shadow: var(--neo-hover) !important; }
.tab-btn.active {
  color: var(--neo-green) !important; font-weight: 600;
  box-shadow: var(--neo-inset) !important;
}
.tab-badge, .tab-badge--new {
  background: linear-gradient(145deg, var(--neo-gold), #a37f3d) !important;
  color: var(--neo-on-accent) !important;
  border: none !important; border-radius: var(--neo-radius-pill) !important;
  box-shadow: var(--neo-raised-sm) !important;
}

/* ---------- Tables ---------- */
.data-table { background: transparent !important; border-collapse: separate !important; }
.data-table thead th {
  background: transparent !important;
  color: var(--neo-text-mute) !important;
  border: none !important; border-bottom: none !important;
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
}
.data-table tbody td { border: none !important; color: var(--neo-text) !important; }
.data-table tbody tr {
  background: var(--neo-bg) !important;
  transition: box-shadow var(--neo-ease);
}
.data-table tbody tr:hover td { background: var(--neo-bg-2) !important; }

/* ---------- Modals / notifications ---------- */
.modal-overlay, .sidebar-overlay {
  background: rgba(20, 30, 24, .38) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal, .notification-modal, .modal-phone-mockup {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-raised-lg) !important;
}
.notification-header, .notification-footer, .notification-body,
.notification-content { background: transparent !important; border-color: transparent !important; }

/* ---------- Chips / pills / checkboxes ---------- */
.tags-dropdown-item, .tag-checkbox, .check-box {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-inset-sm) !important;
}
.badge, .pill, .status-content {
  border: none !important;
  border-radius: var(--neo-radius-pill) !important;
}

/* Scrollbars in soft tone */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--neo-bg); }
::-webkit-scrollbar-thumb {
  background: var(--neo-bg);
  border-radius: 999px;
  box-shadow: var(--neo-inset-sm);
  border: 3px solid var(--neo-bg);
}

/* ============================================================
   LOGIN PAGE (login.html)
   ============================================================ */
.page { background: var(--neo-bg) !important; }
.login-card {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: 28px !important;
  box-shadow: var(--neo-raised-lg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.login-card .title, .page-tagline .tagline-mark { color: var(--neo-text) !important; }
.login-card .subtitle, .label { color: var(--neo-text-mute) !important; }
.login-card .input-shell {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--neo-inset) !important;
}
.login-card .input-shell input { background: transparent !important; box-shadow: none !important; }
.login-card .icon-circle, .logo-wrap {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-raised) !important;
  border-radius: var(--neo-radius-pill) !important;
  border: none !important;
}
.check-box { border-radius: 8px !important; }

/* ============================================================
   FULL-COVERAGE POLISH — consistent, organized across every view
   ============================================================ */

/* Headings + display type on the new ground */
h1, h2, h3, h4, .card-title, .section-title,
.cx-panel__head, .card-header { color: var(--neo-text) !important; }
.card-subtitle, .muted, .hint, .help, small.muted { color: var(--neo-text-mute) !important; }

/* Links use the accent, not raw blue */
a, .link { color: var(--neo-green) !important; }
a:hover, .link:hover { color: var(--neo-green-2) !important; }

/* Dropdown / popover menus float as a raised panel */
.dropdown-menu, .menu, .account-menu, #accountMenu, .tags-dropdown,
.context-menu, .popover, .select-menu {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-raised-lg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.dropdown-item:hover, .menu-item:hover,
.tags-dropdown-item:hover { background: var(--neo-bg-2) !important; }

/* Native select: recolour the caret + options */
select {
  -webkit-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--neo-text-soft) 50%),
    linear-gradient(135deg, var(--neo-text-soft) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 40px !important;
}
select option { background: var(--neo-bg) !important; color: var(--neo-text) !important; }

/* Toggle switches → neomorphic track + knob */
.switch, .toggle, .switch-track {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-inset-sm) !important;
  border: none !important; border-radius: var(--neo-radius-pill) !important;
}
.switch .knob, .toggle .knob, .switch-thumb, .toggle-thumb {
  background: var(--neo-bg) !important; box-shadow: var(--neo-raised-sm) !important;
}
.switch.on, .toggle.on, input:checked + .switch-track {
  background: linear-gradient(145deg, var(--neo-green-2), var(--neo-green)) !important;
  box-shadow: var(--neo-inset-sm) !important;
}

/* Code / preformatted → inset well */
code, pre, kbd, .mono, .code {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: var(--neo-inset-sm) !important;
  color: var(--neo-text) !important;
}

/* Dividers become soft grooves, not hard lines */
hr, .divider, .card-divider {
  border: none !important; height: 2px !important;
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-inset-sm) !important;
  border-radius: 999px !important; opacity: 1 !important;
}

/* Media manager + chat-preview panels stay on-system */
.media-layout, .media-albums-sidebar, .media-main-content,
.wa-header, .modal-phone-mockup, .nps-section-header, .client-selector-header {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius) !important;
}
.media-albums-sidebar, .modal-phone-mockup { box-shadow: var(--neo-raised) !important; }
.wa-header { box-shadow: var(--neo-raised-sm) !important; }

/* Progress / meters */
.progress, .meter, .bar-track {
  background: var(--neo-bg) !important; box-shadow: var(--neo-inset-sm) !important;
  border: none !important; border-radius: 999px !important;
}
.progress > *, .meter > *, .bar-fill {
  background: linear-gradient(90deg, var(--neo-green), var(--neo-gold)) !important;
  border-radius: 999px !important;
}

/* Empty states read as a gentle sunken well */
.empty-state, .no-data, .cx-empty, .placeholder-card {
  background: var(--neo-bg) !important; border: none !important;
  border-radius: var(--neo-radius) !important; box-shadow: var(--neo-inset-sm) !important;
  color: var(--neo-text-mute) !important;
}

/* Tooltips */
.tooltip, [role="tooltip"] {
  background: var(--neo-bg) !important; color: var(--neo-text) !important;
  border: none !important; border-radius: 10px !important; box-shadow: var(--neo-raised) !important;
}

/* Consistent breathing room so dense views stay organized */
.card, .cx-panel, .settings-group, .table-container, .chart-container { padding: 22px !important; }
.card-header, .cx-panel__head { margin-bottom: 4px !important; }
.metric-card, .stat-card, .perf-metric { padding: 20px !important; }