/* ============================================================
   Marwat Tech - Lagom 2 client area custom theme (DEEP MATCH)
   Day + Night mode. Loaded after theme.css (see includes/head.tpl)
   Night mode: html[data-lagom-theme="dark"] toggled by
   assets/js/marwat-theme.js (button in includes/menu/top-nav.tpl)
   ============================================================ */

/* ---------- DAY MODE - Marwat Tech design tokens (macOS style) ---------- */
:root {
  --font-family-base: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --brand-primary: #584ab0;
  --brand-primary-lighter: #7464c6;
  --brand-primary-lighter-2: #b8a8ff;
  --brand-primary-lighter-3: #d9d2ff;
  --brand-primary-lighter-4: #f0edff;
  --brand-primary-darker: #453a95;
  --brand-primary-gradient-start: #6d5ed4;
  --brand-primary-gradient-end: #4b3ea1;

  /* macOS-style light grays (webapp) */
  --gray-base: #1d1d1f;
  --gray-lighter: #86868b;
  --gray-lighter-2: #a1a1a6;
  --gray-lighter-3: #d2d2d7;
  --gray-lighter-4: #d2d2d7;
  --gray-faded: #f5f5f7;
  --gray-darker: #000000;
  --gray-gradient-start: #ffffff;
  --gray-gradient-end: #f5f5f7;
  --body-bg: #f5f5f7;

  --border-radius-base: 6px;
  --border-radius-lg: 12px;
  --border-radius-xlg: 24px;
  --ui-block-border-radius: 16px;
  --ui-block-border-radius-lg: 24px;
  --ui-block-shadow: 0 16px 38px rgba(72, 54, 148, 0.10);
}

/* Primary / colored buttons — text ALWAYS white (incl. hover/focus/active) */
.btn-primary, .btn-success, .btn-info,
.btn-danger, .btn-dark {
  background: linear-gradient(to bottom, #6d5ed4 0%, #4b3ea1 100%) !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(88,74,176,.32), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  background: linear-gradient(to bottom, #6d5ed4 0%, #4b3ea1 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;   /* text stays WHITE on hover */
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(88,74,176,.40), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
html[data-lagom-theme="dark"] .btn-primary,
html[data-lagom-theme="dark"] .btn-success,
html[data-lagom-theme="dark"] .btn-info,
html[data-lagom-theme="dark"] .btn-danger,
html[data-lagom-theme="dark"] .btn-dark {
  background: linear-gradient(to bottom, #7b6de0 0%, #584ab0 100%) !important;
  color: #ffffff !important;
}
html[data-lagom-theme="dark"] .btn-primary:hover,
html[data-lagom-theme="dark"] .btn-primary:focus, html[data-lagom-theme="dark"] .btn-primary:active,
html[data-lagom-theme="dark"] .btn-success:hover,
html[data-lagom-theme="dark"] .btn-success:focus, html[data-lagom-theme="dark"] .btn-success:active,
html[data-lagom-theme="dark"] .btn-info:hover,
html[data-lagom-theme="dark"] .btn-info:focus, html[data-lagom-theme="dark"] .btn-info:active,
html[data-lagom-theme="dark"] .btn-danger:hover, html[data-lagom-theme="dark"] .btn-danger:active,
html[data-lagom-theme="dark"] .btn-dark:hover, html[data-lagom-theme="dark"] .btn-dark:active {
  background: linear-gradient(to bottom, #7b6de0 0%, #584ab0 100%) !important;
  color: #ffffff !important;
}

/* Secondary / outline buttons — webapp style (white → purple on hover) */
.btn-default, .btn-secondary, .btn-outline {
  background: #ffffff !important;
  border: 1px solid #d2d2d7 !important;
  border-radius: 6px !important;
  color: #1d1d1f !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline:hover {
  background: #f0edff !important;
  border-color: #b9afff !important;
  color: #584ab0 !important;
}

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

/* ---------- NIGHT MODE (fully supported via theme variables) ---------- */
html[data-lagom-theme="dark"] {
  /* iOS 27 dark (webapp): true black + neutral layers */
  --gray-base: #f5f5f7;
  --gray-lighter: #98989d;
  --gray-lighter-2: #6e6e73;
  --gray-lighter-3: #48484a;
  --gray-lighter-4: #38383a;
  --gray-faded: #2c2c2e;
  --gray-darker: #ffffff;
  --gray-gradient-start: #1c1c1e;
  --gray-gradient-end: #2c2c2e;
  --body-bg: #000000;

  --ui-block-bg: #1c1c1e;
  --ui-block-overlay-bg: rgba(28,28,30,.86);
  --ui-block-overlay-bg-2: #1c1c1e;
  --ui-block-bg-form: #2c2c2e;
  --ui-block-border: 1px solid #38383a;
  --ui-block-header-bg: #2c2c2e;
  --ui-block-divider-color: #38383a;

  --brand-primary: #b8a8ff;
  --brand-primary-lighter: #c8bdff;
  --brand-primary-lighter-2: #b8a8ff;
  --brand-primary-lighter-3: #3a3356;
  --brand-primary-lighter-4: #1f1740;
  --brand-primary-darker: #9f8fff;
  --brand-primary-gradient-start: #7b6de0;
  --brand-primary-gradient-end: #584ab0;

  --ui-nav-link-color: #f5f5f7;
  --ui-nav-secondary-link-color: #98989d;
  --ui-nav-link-hover-bg: rgba(184,168,255,.12);
  --ui-nav-link-active-bg: rgba(184,168,255,.16);
  --ui-block-link-hover-bg: rgba(184,168,255,.12);
  --ui-block-link-active-bg: rgba(184,168,255,.16);
}
html[data-lagom-theme="dark"] body,
html[data-lagom-theme="dark"] .app-main { background-color: #000000 !important; }
html[data-lagom-theme="dark"] .app-nav-header,
html[data-lagom-theme="dark"] .app-nav-menu { background-color: #1c1c1e !important; border-color: #38383a !important; }
/* logo: use the main site's dark logo in night mode
   (!important beats theme.css .main-footer-extended .footer-company-logo img) */
.logo .logo-dark { display: none !important; }
html[data-lagom-theme="dark"] .logo .logo-light { display: none !important; }
html[data-lagom-theme="dark"] .logo .logo-dark { display: inline !important; }
.footer-company-logo.logo .logo-light { display: block !important; }
html[data-lagom-theme="dark"] .footer-company-logo.logo .logo-light { display: none !important; }
html[data-lagom-theme="dark"] .footer-company-logo.logo .logo-dark { display: block !important; }
/* Day body background = macOS #f5f5f7 (webapp) */
body { background-color: #f5f5f7 !important; }

/* ---------- Day / Night toggle button ---------- */
.lagom-theme-toggle .theme-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0 !important; border-radius:50% !important;
  background:#f0edff !important; color:#584ab0 !important;
  border:1px solid #d9d2ff !important; transition:all .2s ease;
}
.lagom-theme-toggle .theme-btn:hover { background:#e6e1ff !important; transform:scale(1.05); }
.lagom-theme-toggle svg { width:18px; height:18px; }
.lagom-theme-toggle .lagom-icon-night { display:none; }
html[data-lagom-theme="dark"] .lagom-theme-toggle .lagom-icon-day { display:none; }
html[data-lagom-theme="dark"] .lagom-theme-toggle .lagom-icon-night { display:inline; }
html[data-lagom-theme="dark"] .lagom-theme-toggle .theme-btn {
  background:#2c2c2e !important; color:#f5f5f7 !important; border-color:#48484a !important;
}

/* ============================================================
   NAVBAR — simple, huge icons (webapp feel)
   ============================================================ */
.app-nav-menu .menu-primary > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  padding: 12px 10px !important;
  border-radius: 8px !important;
  transition: all .2s ease !important;
}
.app-nav-menu .menu-primary > li > a i,
.app-nav-menu .menu-primary > li > a .fas {
  font-size: 26px !important;
  color: #584ab0 !important;
  line-height: 1 !important;
  width: 30px !important;
  text-align: center !important;
}
.app-nav-menu .menu-primary > li > a:hover {
  background: #f0edff !important;
  color: #584ab0 !important;
}
html[data-lagom-theme="dark"] .app-nav-menu .menu-primary > li > a {
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] .app-nav-menu .menu-primary > li > a i,
html[data-lagom-theme="dark"] .app-nav-menu .menu-primary > li > a .fas {
  color: #b8a8ff !important;
}
html[data-lagom-theme="dark"] .app-nav-menu .menu-primary > li > a:hover {
  background: rgba(184,168,255,.12) !important;
  color: #b8a8ff !important;
}

/* ---------- Secondary (top-right) nav — Contact / Support / Open Ticket ---------- */
.top-nav > li.marwat-secondary-item > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
.top-nav > li.marwat-secondary-item > a i,
.top-nav > li.marwat-secondary-item > a .fas {
  font-size: 20px !important;
  color: #584ab0 !important;
  line-height: 1 !important;
  width: 24px !important;
  text-align: center !important;
}
.top-nav > li.marwat-secondary-item > a:hover {
  background: #f0edff !important;
  color: #584ab0 !important;
}
html[data-lagom-theme="dark"] .top-nav > li.marwat-secondary-item > a {
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] .top-nav > li.marwat-secondary-item > a i,
html[data-lagom-theme="dark"] .top-nav > li.marwat-secondary-item > a .fas {
  color: #b8a8ff !important;
}
html[data-lagom-theme="dark"] .top-nav > li.marwat-secondary-item > a:hover {
  background: rgba(184,168,255,.12) !important;
  color: #b8a8ff !important;
}

/* ---------- Dropdown submenu icons ---------- */
.dropdown-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 13px !important;
  color: #1d1d1f !important;
}
.dropdown-menu > li > a i,
.dropdown-menu > li > a .fas {
  font-size: 16px !important;
  color: #584ab0 !important;
  width: 20px !important;
  text-align: center !important;
}
html[data-lagom-theme="dark"] .dropdown-menu > li > a {
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] .dropdown-menu > li > a i,
html[data-lagom-theme="dark"] .dropdown-menu > li > a .fas {
  color: #b8a8ff !important;
}
html[data-lagom-theme="dark"] .dropdown-menu {
  background-color: #1c1c1e !important;
  border-color: #38383a !important;
}
html[data-lagom-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: rgba(184,168,255,.12) !important;
  color: #ffffff !important;
}

/* ---------- DAY MODE - soft card shadow (webapp feel) ---------- */
.panel, .card, .bg-white {
  box-shadow: 0 6px 24px rgba(88, 74, 176, 0.06) !important;
}

/* DAY: fix invisible titles — Lagom's default "domain register" panel uses
   a white title (--panel-home-domain-title-color:#fff) meant for a purple
   gradient bg, but on the light panel it's white-on-white. Force dark text. */
html[data-lagom-theme="light"] .panel-domain-register .panel-title,
html[data-lagom-theme="light"] .panel-domain-register .panel-heading,
html[data-lagom-theme="light"] .panel-domain-register .panel-heading .panel-title,
html[data-lagom-theme="light"] .client-home-panels .panel .panel-title {
  color: #1d1d1f !important;
}
html[data-lagom-theme="light"] .panel-domain-register .panel-title a,
html[data-lagom-theme="light"] .panel-domain-register .panel-heading .panel-title a {
  color: #584ab0 !important;
}
html[data-lagom-theme="light"] .panel-domain-register .panel-heading {
  background-color: #f0edff !important;
  border-bottom: 1px solid #d9d2ff !important;
}

/* ============================================================
   NIGHT MODE TEXT SAFETY NET
   Guarantees NO black text is left invisible on dark surfaces,
   and forms/tables/headings stay readable.
   ============================================================ */
html[data-lagom-theme="dark"] body,
html[data-lagom-theme="dark"] .main-content,
html[data-lagom-theme="dark"] .main-body,
html[data-lagom-theme="dark"] .sidebar,
html[data-lagom-theme="dark"] .panel-body,
html[data-lagom-theme="dark"] .card-body {
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] h1,
html[data-lagom-theme="dark"] h2,
html[data-lagom-theme="dark"] h3,
html[data-lagom-theme="dark"] h4,
html[data-lagom-theme="dark"] h5,
html[data-lagom-theme="dark"] h6,
html[data-lagom-theme="dark"] .panel-title {
  color: #ffffff !important;
}
html[data-lagom-theme="dark"] .table,
html[data-lagom-theme="dark"] .table td,
html[data-lagom-theme="dark"] .table th {
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] input,
html[data-lagom-theme="dark"] textarea,
html[data-lagom-theme="dark"] select,
html[data-lagom-theme="dark"] .form-control {
  color: #ffffff !important;
}
html[data-lagom-theme="dark"] ::placeholder {
  color: #98989d !important;
  opacity: 1;
}
html[data-lagom-theme="dark"] .list-group-item,
html[data-lagom-theme="dark"] .list-group-item a,
html[data-lagom-theme="dark"] .sidebar .nav > li > a,
html[data-lagom-theme="dark"] .breadcrumb,
html[data-lagom-theme="dark"] .breadcrumb a {
  color: #f5f5f7 !important;
}
/* Sidebar "What's new" announcements — keep white in night mode */
html[data-lagom-theme="dark"] .sidebar-title,
html[data-lagom-theme="dark"] .sidebar-news-title,
html[data-lagom-theme="dark"] .sidebar-news-date,
html[data-lagom-theme="dark"] .sidebar-news-desc,
html[data-lagom-theme="dark"] .sidebar-news-desc p,
html[data-lagom-theme="dark"] .sidebar-news a {
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] .sidebar-news-title:hover,
html[data-lagom-theme="dark"] .sidebar-news a:hover {
  color: #b8a8ff !important;
}
html[data-lagom-theme="dark"] .panel-heading {
  color: #ffffff !important;
}
/* NIGHT: give cards/panels a dark surface (webapp #1c1c1e) so text stays readable */
html[data-lagom-theme="dark"] .panel,
html[data-lagom-theme="dark"] .panel-default,
html[data-lagom-theme="dark"] .card,
html[data-lagom-theme="dark"] .widget,
html[data-lagom-theme="dark"] .panel-body,
html[data-lagom-theme="dark"] .card-body,
html[data-lagom-theme="dark"] .well,
html[data-lagom-theme="dark"] .list-group,
html[data-lagom-theme="dark"] .list-group-item {
  background-color: #1c1c1e !important;
  border-color: #38383a !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}
html[data-lagom-theme="dark"] .panel-heading,
html[data-lagom-theme="dark"] .card-header,
html[data-lagom-theme="dark"] .panel-footer,
html[data-lagom-theme="dark"] .card-footer {
  background-color: #2c2c2e !important;
  border-color: #38383a !important;
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] .panel-title,
html[data-lagom-theme="dark"] .card-title {
  color: #ffffff !important;
}
html[data-lagom-theme="dark"] .panel .list-group-item,
html[data-lagom-theme="dark"] .card .list-group-item {
  background-color: #1c1c1e !important;
  border-color: #38383a !important;
  color: #f5f5f7 !important;
}
/* keep status colors readable on dark */
html[data-lagom-theme="dark"] .text-success { color: #70d786 !important; }
html[data-lagom-theme="dark"] .text-warning { color: #ffc552 !important; }
html[data-lagom-theme="dark"] .text-danger  { color: #ff8fa0 !important; }

/* ============================================================
   FOOTER — match the Marwat Tech webapp footer
   (light #f5f5f7, purple headings, muted links, arrow-in-circle
    icons; dark = purple-black gradient)
   ============================================================ */
.main-footer {
  background-color: #f5f5f7 !important;
  border-top: 1px solid #d2d2d7 !important;
  color: #1d1d1f !important;
}
.main-footer .footer-title,
.main-footer h3 {
  color: #1d1d1f !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.main-footer .footer-nav a,
.main-footer .footer-nav .nav-link {
  color: #86868b !important;
  font-size: 14px !important;
}
.main-footer .footer-nav a:hover,
.main-footer .footer-nav .nav-link:hover {
  color: #584ab0 !important;
}
.main-footer .footer-bottom {
  color: #86868b !important;
  border-top: 1px solid #d2d2d7 !important;
}
/* arrow-in-circle icons (webapp style) — only sitemap links, not social */
.main-footer .footer-nav:not(.footer-nav-h) li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.main-footer .footer-nav:not(.footer-nav-h) li a::before {
  content: "\2197" !important; /* north-east arrow */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #e8e8ed !important;
  color: #584ab0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  flex-shrink: 0;
}
.main-footer .footer-nav:not(.footer-nav-h) li a:hover::before {
  background: #f0edff !important;
}

/* ---- Webapp-style social icons (round white circles) ---- */
.main-footer .footer-company-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.main-footer .footer-company-socials li {
  margin: 0 !important;
}
.main-footer .footer-company-socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #584ab0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #d2d2d7 !important;
  transition: all 0.2s ease !important;
}
.main-footer .footer-company-socials a:hover {
  background: #584ab0 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(88, 74, 176, 0.28) !important;
}
.main-footer .footer-company-socials a i {
  font-size: 16px !important;
}
html[data-lagom-theme="dark"] .main-footer .footer-company-socials a {
  background: #1c1c1e !important;
  color: #b8a8ff !important;
  border-color: #38383a !important;
}
html[data-lagom-theme="dark"] .main-footer .footer-company-socials a:hover {
  background: #b8a8ff !important;
  color: #1c1c1e !important;
}

/* webapp description text */
.main-footer .footer-company-desc {
  color: #86868b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  max-width: 420px !important;
}
html[data-lagom-theme="dark"] .main-footer .footer-company-desc {
  color: #98989d !important;
}

/* Injected webapp-style site-map (from marwat-theme.js) — ensure it displays */
.main-footer .footer-site-map {
  display: block !important;
}
.main-footer .footer-site-map .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -15px !important;
}
.main-footer .footer-site-map .footer-col {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
  padding: 0 15px !important;
  margin-bottom: 24px !important;
}
.main-footer .footer-site-map .footer-nav {
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}
.main-footer .footer-site-map .footer-nav li {
  margin: 0 0 12px !important;
}
@media (max-width: 767px) {
  .main-footer .footer-site-map .footer-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- Footer: night mode ---------- */
html[data-lagom-theme="dark"] .main-footer {
  background: linear-gradient(180deg, #0e0a24 0%, #0a0a14 50%, #0d0818 100%) !important;
  border-top-color: #38383a !important;
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] .main-footer .footer-title,
html[data-lagom-theme="dark"] .main-footer h3 { color: #b8a8ff !important; }
html[data-lagom-theme="dark"] .main-footer .footer-nav a { color: #98989d !important; }
html[data-lagom-theme="dark"] .main-footer .footer-nav a:hover { color: #b8a8ff !important; }
html[data-lagom-theme="dark"] .main-footer .footer-bottom {
  color: #98989d !important;
  border-top-color: #38383a !important;
}
html[data-lagom-theme="dark"] .main-footer .footer-nav:not(.footer-nav-h) li a::before {
  background: #2a2350 !important;
  color: #b8a8ff !important;
}

/* ============================================================
   NIGHT MODE — deep polish (scrollbars, dropdowns, modals,
   inputs, alerts, selection, focus, tables)
   ============================================================ */

/* selection */
::selection { background: rgba(88, 74, 176, 0.25); }
html[data-lagom-theme="dark"] ::selection { background: rgba(184, 168, 255, 0.30); }

/* scrollbars (webapp style) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c7c7cc; border-radius: 999px; border: 2px solid #f5f5f7;
}
::-webkit-scrollbar-thumb:hover { background: #a8a8ad; }
html[data-lagom-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #48484a; border-color: #000000;
}
html[data-lagom-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5a5a5e; }

/* dropdown menus */
html[data-lagom-theme="dark"] .dropdown-menu {
  background: #1c1c1e !important;
  border: 1px solid #38383a !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65) !important;
}
html[data-lagom-theme="dark"] .dropdown-menu > li > a,
html[data-lagom-theme="dark"] .dropdown-menu .dropdown-item { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .dropdown-menu > li > a:hover,
html[data-lagom-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-lagom-theme="dark"] .dropdown-menu > li > a:focus {
  background: rgba(184, 168, 255, 0.12) !important;
  color: #b8a8ff !important;
}

/* modal */
html[data-lagom-theme="dark"] .modal-content {
  background: #1c1c1e !important;
  border-color: #38383a !important;
}
html[data-lagom-theme="dark"] .modal-header,
html[data-lagom-theme="dark"] .modal-footer { border-color: #38383a !important; }

/* inputs: borders + focus in dark */
html[data-lagom-theme="dark"] input,
html[data-lagom-theme="dark"] select,
html[data-lagom-theme="dark"] textarea,
html[data-lagom-theme="dark"] .form-control {
  background: #2c2c2e !important;
  border-color: #48484a !important;
  color: #f5f5f7 !important;
}
html[data-lagom-theme="dark"] input:focus,
html[data-lagom-theme="dark"] select:focus,
html[data-lagom-theme="dark"] textarea:focus,
html[data-lagom-theme="dark"] .form-control:focus {
  border-color: #b8a8ff !important;
  box-shadow: 0 0 0 3px rgba(184, 168, 255, 0.18) !important;
}

/* alerts */
html[data-lagom-theme="dark"] .alert { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .alert-success {
  background: rgba(45, 159, 70, 0.18) !important;
  border-color: rgba(45, 159, 70, 0.5) !important; color: #70d786 !important;
}
html[data-lagom-theme="dark"] .alert-info {
  background: rgba(88, 74, 176, 0.20) !important;
  border-color: rgba(88, 74, 176, 0.55) !important; color: #b8a8ff !important;
}
html[data-lagom-theme="dark"] .alert-warning {
  background: rgba(255, 170, 0, 0.16) !important;
  border-color: rgba(255, 170, 0, 0.5) !important; color: #ffc552 !important;
}
html[data-lagom-theme="dark"] .alert-danger {
  background: rgba(217, 45, 53, 0.16) !important;
  border-color: rgba(217, 45, 53, 0.5) !important; color: #ff8fa0 !important;
}

/* table hover in dark */
html[data-lagom-theme="dark"] .table-hover > tbody > tr:hover,
html[data-lagom-theme="dark"] .table tbody tr:hover {
  background: rgba(184, 168, 255, 0.06) !important;
}

/* secondary / outline buttons in dark */
html[data-lagom-theme="dark"] .btn-default,
html[data-lagom-theme="dark"] .btn-secondary,
html[data-lagom-theme="dark"] .btn-outline {
  background: #2c2c2e !important;
  border-color: #48484a !important;
  color: #f5f5f7 !important;
}

/* focus ring */
html[data-lagom-theme="dark"] a:focus-visible,
html[data-lagom-theme="dark"] button:focus-visible {
  outline-color: rgba(184, 168, 255, 0.6) !important;
}

/* pagination active = gradient button */
.pagination > .active > a,
.pagination > .active > span {
  background: linear-gradient(to bottom, #6d5ed4, #4b3ea1) !important;
  border-color: transparent !important;
}
html[data-lagom-theme="dark"] .pagination > .active > a,
html[data-lagom-theme="dark"] .pagination > .active > span {
  background: linear-gradient(to bottom, #7b6de0, #584ab0) !important;
}

/* page header (banner) in dark keeps readable title */
html[data-lagom-theme="dark"] .main-header .main-header-label {
  color: #ffffff !important;
}

/* ============================================================
   LOGIN / REGISTER — match the webapp login card
   ============================================================ */
.login-wrapper {
  max-width: 440px;
  margin: 0 auto;
}
.login-body {
  background: #ffffff !important;
  border: 1px solid #d2d2d7 !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 38px rgba(72, 54, 148, 0.12) !important;
  padding: 32px !important;
}
.login-title {
  color: #1d1d1f !important;
  font-weight: 700 !important;
}
.login .form-control {
  border-radius: 12px !important;
}
html[data-lagom-theme="dark"] .login-body {
  background: #1c1c1e !important;
  border-color: #38383a !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65) !important;
}
html[data-lagom-theme="dark"] .login-title { color: #f5f5f7 !important; }

/* ============================================================
   ON-SCREEN INVOICE (viewinvoice) — match webapp invoice
   ============================================================ */
.invoice {
  max-width: 920px;
  margin: 0 auto;
}
.invoice .section {
  border-radius: 20px !important;
  box-shadow: 0 16px 38px rgba(72, 54, 148, 0.10) !important;
}
.invoice-title {
  color: #1d1d1f !important;
  font-size: 26px !important;
  font-weight: 800 !important;
}
.invoice-status.label {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
}
.invoice h3 {
  color: #584ab0 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.invoice address {
  color: #1d1d1f !important;
  font-style: normal !important;
  line-height: 1.7 !important;
}
.invoice .list-info-title {
  color: #1d1d1f !important;
  font-weight: 700 !important;
}
.invoice .table thead th {
  background: #8e83d8 !important;
  color: #ffffff !important;
  border: 0 !important;
}
.invoice .table tbody td {
  border-bottom: 1px solid #d9d2ff !important;
}
.invoice .sub-total-row td {
  font-weight: 700 !important;
}
html[data-lagom-theme="dark"] .invoice-title { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .invoice h3 { color: #b8a8ff !important; }
html[data-lagom-theme="dark"] .invoice address,
html[data-lagom-theme="dark"] .invoice .list-info-title { color: #f5f5f7 !important; }

/* ---------- Invoice: Marwat payment channels ---------- */
.marwat-payments h3 { color: #584ab0 !important; font-weight: 700 !important; }
.marwat-pay-card {
  background: #ffffff !important;
  border: 1px solid #d9d2ff !important;
  border-radius: 16px !important;
  padding: 16px !important;
  height: 100%;
}
.marwat-pay-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: #584ab0 !important;
}
.marwat-pay-qr {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #e8e5f7;
  border-radius: 12px;
  margin: 8px 0;
  background: #ffffff;
}
.marwat-pay-card p { font-size: 13px !important; color: #1d1d1f !important; }
.marwat-pay-email { font-weight: 700 !important; font-size: 14px !important; color: #584ab0 !important; }
html[data-lagom-theme="dark"] .marwat-pay-card { background: #1c1c1e !important; border-color: #38383a !important; }
html[data-lagom-theme="dark"] .marwat-pay-card p { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .marwat-payments h3,
html[data-lagom-theme="dark"] .marwat-pay-title,
html[data-lagom-theme="dark"] .marwat-pay-email { color: #b8a8ff !important; }

/* ============================================================
   PAGE HEADER / BREADCRUMB — compact (text fits, no wasted space)
   ============================================================ */
.main-header {
  padding-top: 18px !important;
  padding-bottom: 14px !important;
  min-height: 0 !important;
}
.main-header .main-header-title {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
}
.main-header .breadcrumb {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 20px !important;
  background: transparent !important;
}
.main-header .breadcrumb > li + li::before {
  padding: 0 4px !important;
  color: #a1a1a6 !important;
}
html[data-lagom-theme="dark"] .main-header .breadcrumb,
html[data-lagom-theme="dark"] .main-header .breadcrumb a { color: #f5f5f7 !important; }

/* ============================================================
   HUGE ICONS — local SVG assets (www.marwat-tech.com/assets/hugeicons)
   The SVGs use stroke #141B34 (dark navy). In day mode they are
   visible on light surfaces; in night mode we invert them to white.
   ============================================================ */
img.marwat-hugeicon {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
/* NIGHT MODE: dark-navy SVG strokes -> white glyphs */
html[data-lagom-theme="dark"] img.marwat-hugeicon {
  filter: brightness(0) invert(1) !important;
}
/* keep colored/social/brand icons natural even at night (no inversion) */
html[data-lagom-theme="dark"] .marwat-socials img.marwat-hugeicon,
html[data-lagom-theme="dark"] img.marwat-brand-icon {
  filter: none !important;
}
/* size-up panel / widget icons */
.panel .panel-title img.marwat-hugeicon,
.widget img.marwat-hugeicon {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}
/* sidebar + dashboard shortcut icons bigger, spaced off borders */
.sidebar .list-group-item img.marwat-hugeicon,
.client-home-panels img.marwat-hugeicon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
/* primary nav + secondary nav icons huge */
.app-nav-menu .menu-primary > li > a img.marwat-hugeicon,
.top-nav > li > a img.marwat-hugeicon {
  width: 26px;
  height: 26px;
  margin-right: 2px;
}
/* dropdown submenu hugeicons */
.dropdown-menu > li > a img.marwat-hugeicon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* ============================================================
   SIDEBAR — tidy spacing (icons not touching borders)
   ============================================================ */
.sidebar .list-group-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
}
.sidebar .panel {
  border-radius: 16px !important;
  padding: 6px !important;
}
.sidebar .panel-heading {
  padding: 12px 14px 8px !important;
}
.sidebar .panel-body {
  padding: 10px 14px !important;
}
.sidebar .panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.sidebar .panel-footer .btn {
  margin-top: 4px !important;
}
/* client profile card tidy */
.panel-client-details .panel-body {
  line-height: 1.6 !important;
}
.panel-client-details .client-avatar {
  margin-bottom: 8px !important;
}
.panel-client-details .client-avatar img {
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
}

/* ============================================================
   CHECKOUT — Order Summary readable in DAY mode
   (Lagom .panel-summary-primary forces white text; override so
    day mode uses dark text, night mode keeps white)
   ============================================================ */
html[data-lagom-theme="light"] .order-summary.panel-summary-primary,
html[data-lagom-theme="light"] .order-summary.panel-summary-primary .panel-heading,
html[data-lagom-theme="light"] .order-summary .panel-title,
html[data-lagom-theme="light"] .order-summary .summary-list .list-item,
html[data-lagom-theme="light"] .order-summary .summary-list .item-name,
html[data-lagom-theme="light"] .order-summary .summary-list .item-value,
html[data-lagom-theme="light"] .order-summary .summary-list .price-total,
html[data-lagom-theme="light"] .order-summary .summary-list .faded {
  color: #1d1d1f !important;
}
html[data-lagom-theme="light"] .order-summary.panel-summary-primary {
  background-color: #ffffff !important;
  border-color: #e8e5f7 !important;
  box-shadow: 0 6px 24px rgba(88, 74, 176, 0.06) !important;
}
html[data-lagom-theme="light"] .order-summary .price-total {
  color: #584ab0 !important;
  font-weight: 800 !important;
}
html[data-lagom-theme="light"] .order-summary .panel-heading {
  background-color: #f0edff !important;
  border-bottom: 1px solid #d9d2ff !important;
}
html[data-lagom-theme="light"] .order-summary .summary-list .item-value {
  color: #1d1d1f !important;
  font-weight: 600 !important;
}
/* Total Due Today big amount (#totalDueToday / .price-amount.amt) */
html[data-lagom-theme="light"] .order-summary .price-amount,
html[data-lagom-theme="light"] .order-summary .price-amount.amt,
html[data-lagom-theme="light"] .order-summary #totalDueToday,
html[data-lagom-theme="light"] .order-summary .amount {
  color: #584ab0 !important;
  font-weight: 800 !important;
}
/* night mode: keep white-ish (Lagom default), brand accent for amount */
html[data-lagom-theme="dark"] .order-summary .price-amount,
html[data-lagom-theme="dark"] .order-summary .price-amount.amt,
html[data-lagom-theme="dark"] .order-summary #totalDueToday,
html[data-lagom-theme="dark"] .order-summary .amount {
  color: #b8a8ff !important;
}

/* ============================================================
   PAGE HEADER TITLE / BREADCRUMB — WHITE on gradient banner
   (cart/checkout pages have a purple gradient banner; the title
    and breadcrumb text must be white in BOTH day & night)
   ============================================================ */
/* All pages have a purple gradient banner -> title + breadcrumb always white */
.main-header .main-header-title,
.main-header .main-header-label,
.main-header .breadcrumb,
.main-header .breadcrumb a,
.main-header .breadcrumb > li + li::before {
  color: #ffffff !important;
}
html[data-lagom-theme="dark"] .main-header .main-header-title,
html[data-lagom-theme="dark"] .main-header .main-header-label,
html[data-lagom-theme="dark"] .main-header .breadcrumb,
html[data-lagom-theme="dark"] .main-header .breadcrumb a,
html[data-lagom-theme="dark"] .main-header .breadcrumb > li + li::before {
  color: #ffffff !important;
}
/* breadcrumb active = slightly muted but still light */
.main-header .breadcrumb > .active {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ============================================================
   BANK TRANSFER DETAILS — webapp payment cards in checkout
   ============================================================ */
.marwat-bank-details {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d9d2ff !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}
.marwat-bank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.marwat-bank-head strong {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  color: #584ab0;
}
.marwat-bank-head span {
  font-size: 13px;
  font-weight: 800;
  color: #1d1d1f;
}
.marwat-bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .marwat-bank-grid { grid-template-columns: 1fr; }
}
.marwat-pay-card {
  background: #ffffff !important;
  border: 1px solid #d9d2ff !important;
  border-radius: 14px !important;
  padding: 14px !important;
}
.marwat-pay-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: #584ab0 !important;
}
.marwat-pay-logo {
  height: 26px;
  width: auto;
  margin: 6px 0 8px;
}
.marwat-pay-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.marwat-pay-qr {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #e8e5f7;
  border-radius: 10px;
  background: #ffffff;
}
.marwat-pay-info { flex: 1; font-size: 12.5px !important; color: #1d1d1f !important; line-height: 1.7 !important; }
.marwat-pay-info p { margin: 0 !important; }
.marwat-pay-email { font-weight: 700 !important; color: #584ab0 !important; word-break: break-all; }
.marwat-bank-note { margin-top: 12px !important; font-size: 13px !important; color: #86868b !important; }
html[data-lagom-theme="dark"] .marwat-bank-details {
  background: #1c1c1e !important;
  border-color: #38383a !important;
}
html[data-lagom-theme="dark"] .marwat-bank-head strong,
html[data-lagom-theme="dark"] .marwat-pay-title,
html[data-lagom-theme="dark"] .marwat-pay-email { color: #b8a8ff !important; }
html[data-lagom-theme="dark"] .marwat-bank-head span,
html[data-lagom-theme="dark"] .marwat-pay-info { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .marwat-bank-note { color: #98989d !important; }
html[data-lagom-theme="dark"] .marwat-pay-card { background: #1c1c1e !important; border-color: #38383a !important; }

/* ============================================================
   ACCOUNT DROPDOWN (avatar + profile links) in secondary nav
   ============================================================ */
.top-nav > li.marwat-account > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #1d1d1f !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.top-nav > li.marwat-account > a:hover {
  background: #f0edff !important;
  color: #584ab0 !important;
}
.marwat-account-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #d9d2ff !important;
}
.marwat-account-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marwat-account-menu { min-width: 230px !important; padding: 8px !important; border-radius: 14px !important; }
.marwat-account-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #1d1d1f !important;
}
.marwat-account-menu > li > a:hover { background: #f0edff !important; color: #584ab0 !important; }
.marwat-account-menu > li.marwat-account-logout > a,
.marwat-account-menu > li > a.marwat-account-logout { color: #e5484d !important; font-weight: 700 !important; }
html[data-lagom-theme="dark"] .top-nav > li.marwat-account > a { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .top-nav > li.marwat-account > a:hover { background: rgba(184,168,255,.12) !important; color: #b8a8ff !important; }
html[data-lagom-theme="dark"] .marwat-account-avatar { border-color: #4a3d91 !important; }
html[data-lagom-theme="dark"] .marwat-account-menu { background-color: #1c1c1e !important; border-color: #38383a !important; }
html[data-lagom-theme="dark"] .marwat-account-menu > li > a { color: #f5f5f7 !important; }
html[data-lagom-theme="dark"] .marwat-account-menu > li > a:hover { background: rgba(184,168,255,.12) !important; color: #b8a8ff !important; }

/* ---------- Logout icon BEFORE Billing (primary nav) ---------- */
.menu-primary > li.marwat-primary-logout > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.menu-primary > li.marwat-primary-logout > a img.marwat-hugeicon { width: 24px; height: 24px; }
html[data-lagom-theme="dark"] .menu-primary > li.marwat-primary-logout > a img.marwat-hugeicon {
  filter: brightness(0) invert(1) !important;
}

/* ============================================================
   TOOLTIP — night mode readable (dark bg + light text)
   ============================================================ */
.tooltip .tooltip-inner {
  background-color: #2c2c2e !important;
  color: #f5f5f7 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  padding: 6px 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
  border-top-color: #2c2c2e !important;
  border-bottom-color: #2c2c2e !important;
  border-left-color: #2c2c2e !important;
  border-right-color: #2c2c2e !important;
}

/* ============================================================
   BUTTONS — icon + text ALWAYS WHITE on dark/colored buttons
   (never purple-on-purple; permanent white glyphs)
   ============================================================ */
.btn-primary, .btn-success, .btn-info, .btn-danger, .btn-dark,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  color: #ffffff !important;
}
.btn-primary i, .btn-primary .fas, .btn-primary .far, .btn-primary img.marwat-hugeicon,
.btn-success i, .btn-success .fas, .btn-success .far, .btn-success img.marwat-hugeicon,
.btn-info i, .btn-info .fas, .btn-info .far, .btn-info img.marwat-hugeicon,
.btn-danger i, .btn-danger .fas, .btn-danger .far, .btn-danger img.marwat-hugeicon,
.btn-dark i, .btn-dark .fas, .btn-dark .far, .btn-dark img.marwat-hugeicon,
.btn-primary:hover i, .btn-success:hover i, .btn-info:hover i,
.btn-danger:hover i, .btn-dark:hover i {
  color: #ffffff !important;
  filter: brightness(0) invert(1) !important;
}
/* success buttons: deep green bg -> white icon/text always */
.btn-success {
  background: linear-gradient(to bottom, #2fa45c 0%, #1e7a40 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: linear-gradient(to bottom, #34b768 0%, #228a48 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* danger / close / destructive: red -> white glyphs */
.btn-danger {
  background: linear-gradient(to bottom, #e5484d 0%, #b33136 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: linear-gradient(to bottom, #f05a5f 0%, #c0393e 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* ============================================================
   NAV / MENU — fixed (sticky) in all conditions
   ============================================================ */
.app-nav, .app-nav-menu, .app-nav-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
body.lagom-layout-top .app-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* keep primary nav on its own sticky row too */
.app-nav-menu {
  position: sticky;
  top: 0;
  z-index: 999;
}
@media (max-width: 991px) {
  .app-nav-menu {
    position: relative !important;
  }
}