/* ══════════════════════════════════════════════════════════════════
   admax-v7.css  –  Admax v7 Design System
   Extracted from mockup-v7.html
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   TEMA-VARIABLER
══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-base:           #f3f4f8;
  --bg-surface:        #f7f8fb;
  --bg-surface2:       #f2f3f7;
  --bg-sidebar:        #f7f8fb;
  --bg-topbar:         rgba(247,248,251,0.97);
  --border:            rgba(0,0,0,0.08);
  --border-soft:       rgba(0,0,0,0.05);
  --text-primary:      #111827;
  --text-secondary:    #4b5563;  /* höjt från #6b7280 → 7:1 på ljus bg */
  --text-muted:        #626977;  /* höjt från #9ca3af → 4.8:1 på ljus bg */
  --text-nav:          #4b5563;
  --text-nav-active:   #111827;
  --nav-active-bg:     rgba(230,48,48,0.08);
  --nav-hover-bg:      rgba(0,0,0,0.04);
  --nav-section:       #6b7280;  /* höjt från #b0b8c8 */
  --search-bg:         #f3f4f8;
  --search-border:     rgba(0,0,0,0.09);
  --tb-icon-bg:        #f3f4f8;
  --tb-icon-border:    rgba(0,0,0,0.08);
  --tb-icon-color:     #4b5563;  /* höjt från #6b7280 */
  --kpi-bg:            #f7f8fb;
  --kpi-border:        rgba(0,0,0,0.07);
  --kpi-val:           #111827;
  --kpi-bar-track:     rgba(0,0,0,0.06);
  --panel-bg:          #f7f8fb;
  --panel-border:      rgba(0,0,0,0.07);
  --panel-head-border: rgba(0,0,0,0.06);
  --svc-hover:         rgba(0,0,0,0.02);
  --svc-border:        rgba(0,0,0,0.05);
  --svc-name:          #111827;
  --svc-type:          #6b7280;  /* höjt från #9ca3af */
  --svc-date:          #4b5563;  /* höjt från #6b7280 */
  --svc-price:         #6b7280;  /* höjt från #9ca3af */
  --svc-action-bg:     #f3f4f8;
  --svc-action-color:  #6b7280;  /* höjt från #9ca3af */
  --quick-btn-bg:      #f8f9fc;
  --quick-btn-border:  rgba(0,0,0,0.07);
  --act-border:        rgba(0,0,0,0.05);
  --act-text:          #374151;  /* höjt från #4b5563 */
  --act-time:          #6b7280;  /* höjt från #9ca3af */
  --user-name:         #111827;
  --user-role:         #6b7280;  /* höjt från #9ca3af */
  --user-hover:        rgba(0,0,0,0.04);
  --toggle-track:      #d1d5db;
  --logo-text:         #111827;
  --group-label:       #6b7280;  /* höjt från #9ca3af */
  --group-label-border:#d8dae2;
  --group-head-bg:     #e0e3ec;
  --expand-bg:         #e8ebf2;
}

[data-theme="dark"] {
  --bg-base:           #191c1f;
  --bg-surface:        #21262b;
  --bg-surface2:       #1d2125;
  --bg-sidebar:        #1e2226;
  --bg-topbar:         rgba(27,31,35,0.97);
  --border:            rgba(255,255,255,0.08);
  --border-soft:       rgba(255,255,255,0.05);
  --text-primary:      #f1f3f5;
  --text-secondary:    rgba(255,255,255,0.72);
  --text-muted:        rgba(255,255,255,0.58);
  --text-nav:          rgba(255,255,255,0.65);
  --text-nav-active:   #fff;
  --nav-active-bg:     rgba(230,48,48,0.14);
  --nav-hover-bg:      rgba(255,255,255,0.06);
  --nav-section:       rgba(255,255,255,0.50);
  --search-bg:         rgba(255,255,255,0.05);
  --search-border:     rgba(255,255,255,0.09);
  --tb-icon-bg:        rgba(255,255,255,0.06);
  --tb-icon-border:    rgba(255,255,255,0.08);
  --tb-icon-color:     rgba(255,255,255,0.65);
  --kpi-bg:            #21262b;
  --kpi-border:        rgba(255,255,255,0.09);
  --kpi-val:           #fff;
  --kpi-bar-track:     rgba(255,255,255,0.09);
  --panel-bg:          #21262b;
  --panel-border:      rgba(255,255,255,0.09);
  --panel-head-border: rgba(255,255,255,0.07);
  --svc-hover:         rgba(255,255,255,0.04);
  --svc-border:        rgba(255,255,255,0.07);
  --svc-name:          #f1f3f5;
  --svc-type:          rgba(255,255,255,0.65);
  --svc-date:          rgba(255,255,255,0.72);
  --svc-price:         rgba(255,255,255,0.60);
  --svc-action-bg:     rgba(255,255,255,0.07);
  --svc-action-color:  rgba(255,255,255,0.62);
  --quick-btn-bg:      rgba(255,255,255,0.05);
  --quick-btn-border:  rgba(255,255,255,0.09);
  --act-border:        rgba(255,255,255,0.07);
  --act-text:          rgba(255,255,255,0.85);
  --act-time:          rgba(255,255,255,0.58);
  --user-name:         #f1f3f5;
  --user-role:         rgba(255,255,255,0.65);
  --user-hover:        rgba(255,255,255,0.07);
  --toggle-track:      rgba(255,255,255,0.25);
  --logo-text:         #fff;
  --group-label:       rgba(255,255,255,0.55);
  --group-label-border:rgba(255,255,255,0.09);
  --group-head-bg:     #1a1e22;
  --expand-bg:         #171b1e;
}

/* ══ DARK MODE — color overrides for badges, icons, status ══ */
[data-theme="dark"] .db-badge.ok   { background: rgba(74,222,128,0.12);  color: #4ade80; }
[data-theme="dark"] .db-badge.warn { background: rgba(253,186,116,0.12); color: #fdba74; }

[data-theme="dark"] .status-dot.green            { background: rgba(74,222,128,0.12); color: #4ade80; }
[data-theme="dark"] .status-dot.green .dot       { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.5); }
[data-theme="dark"] .status-dot.red              { background: rgba(252,165,165,0.12); color: #fca5a5; }
[data-theme="dark"] .status-dot.red .dot         { background: #fca5a5; }

[data-theme="dark"] .chat-panel-head .material-icons-round { color: #93c5fd; }

[data-theme="dark"] .status-all-ok               { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.25); color: #4ade80; }
[data-theme="dark"] .status-all-ok .pulse-dot    { background: #4ade80; }

[data-theme="dark"] .status-row-badge.ok         { background: rgba(74,222,128,0.12); color: #4ade80; }
[data-theme="dark"] .status-row-badge.warn       { background: rgba(253,186,116,0.12); color: #fdba74; }

[data-theme="dark"] .chat-online-badge           { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.25); color: #4ade80; }
[data-theme="dark"] .chat-online-badge .dot      { background: #4ade80; }

[data-theme="dark"] .db-icon.red    { background: rgba(252,165,165,0.12); color: #fca5a5; }
[data-theme="dark"] .db-icon.green  { background: rgba(74,222,128,0.12);  color: #4ade80; }
[data-theme="dark"] .db-icon.blue   { background: rgba(147,197,253,0.12); color: #93c5fd; }
[data-theme="dark"] .db-icon.orange { background: rgba(253,186,116,0.12); color: #fdba74; }
[data-theme="dark"] .db-icon.purple { background: rgba(196,181,253,0.12); color: #c4b5fd; }

[data-theme="dark"] .svc-icon.dom  { background: rgba(252,165,165,0.12); color: #fca5a5; }
[data-theme="dark"] .svc-icon.host { background: rgba(147,197,253,0.12); color: #93c5fd; }
[data-theme="dark"] .svc-icon.dns  { background: rgba(253,186,116,0.12); color: #fdba74; }

[data-theme="dark"] .status-row-icon.g { background: rgba(74,222,128,0.12);  color: #4ade80; }
[data-theme="dark"] .status-row-icon.b { background: rgba(147,197,253,0.12); color: #93c5fd; }
[data-theme="dark"] .status-row-icon.o { background: rgba(253,186,116,0.12); color: #fdba74; }

[data-theme="dark"] .status-panel-head .material-icons-round { color: #4ade80; }

[data-theme="dark"] .db-btn.blue { background: rgba(147,197,253,0.12); color: #93c5fd; border-color: rgba(147,197,253,0.25); }
[data-theme="dark"] .db-btn.blue .material-icons-round { color: #93c5fd; }

[data-theme="dark"] .svc-link-btn { background: rgba(147,197,253,0.12); color: #93c5fd; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  transition: background 0.25s, color 0.25s;
}

.app { display: flex !important; min-height: 100vh !important; }

/* ════════════════════════════════
   SIDEBAR
════════════════════════════════ */
.sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  transition: background 0.25s, border-color 0.25s;
}

.sidebar-logo {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sidebar-logo .logo-img {
  height: 28px; width: auto;
  filter: brightness(0) opacity(0.85);
  transition: filter 0.25s;
}
[data-theme="dark"] .sidebar-logo .logo-img {
  filter: brightness(1) opacity(0.95);
}

.nav-section-label {
  padding: 10px 20px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--nav-section);
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 16px;
  margin: 1px 8px;
  border-radius: 8px;
  color: var(--text-nav);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
}
.nav-item .material-icons-round {
  font-size: 19px; flex-shrink: 0; width: 22px;
}
.nav-item .nav-text { flex: 1; }
.nav-item .nav-badge {
  background: #e63030; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; line-height: 1.4;
}
.nav-item:hover {
  background: var(--nav-hover-bg); color: var(--text-nav-active);
}
.nav-item.active {
  background: var(--nav-active-bg); color: var(--text-nav-active); font-weight: 500;
}
.nav-item.active .material-icons-round { color: #e63030; }

.nav-divider { height: 1px; background: var(--border); margin: 4px 16px; }

/* ── Dark sidebar overrides (always applied) ── */
.sidebar {
  background: #1e2226;
  border-right: 1px solid rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.88);
}
.sidebar .sidebar-logo {
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
}
.sidebar .sidebar-logo .logo-img {
  filter: brightness(1) opacity(1) !important;
}
.sidebar .nav-section-label {
  color: rgba(255,255,255,0.60);
}
.sidebar .nav-item {
  color: rgba(255,255,255,0.72);
}
.sidebar .nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.sidebar .nav-item.active {
  background: rgba(200,40,40,0.18);
  color: #fff;
  border-left: 2px solid #c82828;
  padding-left: 14px;
}
.sidebar .nav-item.active .material-icons-round {
  color: #fca5a5;
}
.sidebar .nav-divider {
  background: rgba(255,255,255,0.08);
}
.sidebar .nav-item .nav-badge {
  background: #c82828;
  color: #fff;
}
/* ── Menyitem utan aktiv tjänst (upsell) ── */
.sidebar .nav-item.nav-upsell {
  color: rgba(255,255,255,0.38);
}
.sidebar .nav-item.nav-upsell .material-icons-round {
  color: rgba(255,255,255,0.28);
}
.sidebar .nav-item.nav-upsell:hover {
  color: #93c5fd;
  background: rgba(147,197,253,0.08);
}
.sidebar .nav-item.nav-upsell:hover .material-icons-round {
  color: #93c5fd;
}
.nav-upsell-plus {
  font-size: 11px; font-weight: 800; color: #3b82f6;
  background: rgba(59,130,246,0.15); border-radius: 5px;
  padding: 1px 5px; margin-left: auto; letter-spacing: 0;
}
.sidebar .nav-item.nav-upsell:hover .nav-upsell-plus {
  background: rgba(147,197,253,0.2); color: #93c5fd;
}

.sidebar .nav-item .material-icons-round {
  color: rgba(255,255,255,0.70);
}
.sidebar .nav-item:hover .material-icons-round {
  color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .sidebar {
  background: #181c1f;
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 8px;
  flex-shrink: 0;
}
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 8px;
}
.user-row:hover { background: var(--user-hover); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: #991b1b;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-info .user-name { font-size: 13px; font-weight: 500; color: var(--user-name); }
.user-info .user-role { font-size: 11px; color: var(--user-role); }
.user-row .material-icons-round { font-size: 16px; color: var(--text-muted); margin-left: auto; }
.sidebar .user-info .user-name { color: rgba(255,255,255,0.88); }
.sidebar .user-info .user-role { color: rgba(255,255,255,0.65); }
.sidebar .user-row .material-icons-round { color: rgba(255,255,255,0.65); }
.sidebar .user-row:hover { background: rgba(255,255,255,0.07); }

/* ── Theme Toggle ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  transition: background 0.15s;
}
.theme-toggle:hover { background: var(--nav-hover-bg); }
.theme-toggle-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.theme-toggle-label .material-icons-round { font-size: 17px; }
.sidebar .theme-toggle-label { color: rgba(255,255,255,0.6); }
.sidebar .theme-toggle-label .material-icons-round { color: rgba(255,255,255,0.5); }
.sidebar .theme-toggle:hover { background: rgba(255,255,255,0.07); }
.toggle-track {
  width: 36px; height: 20px; background: var(--toggle-track);
  border-radius: 10px; position: relative; transition: background 0.25s; flex-shrink: 0;
}
[data-theme="dark"] .toggle-track { background: #e63030; }
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .toggle-thumb { transform: translateX(16px); }

/* ════════════════════════════════
   MAIN
════════════════════════════════ */
.main {
  flex: 1 !important; margin-left: 230px !important;
  display: flex !important; flex-direction: column !important; min-height: 100vh !important;
}

.topbar {
  height: 58px;
  background: var(--bg-topbar);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 28px; gap: 16px;
  position: sticky; top: 0; z-index: 40;
  transition: background 0.25s, border-color 0.25s;
}
.page-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.search-bar {
  margin-left: 20px;
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; width: 260px; transition: background 0.25s;
}
.search-bar .material-icons-round { font-size: 16px; color: var(--text-muted); }
.search-bar span.placeholder { font-size: 13px; color: var(--text-muted); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.tb-right > * { pointer-events: auto; }
.tb-right > .dropdown { pointer-events: none; }
.tb-right > .dropdown > * { pointer-events: auto; }
.tb-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tb-icon-bg); border: 1px solid var(--tb-icon-border);
  color: var(--tb-icon-color); cursor: pointer; transition: all 0.15s;
  position: relative;
}
.tb-icon:hover { color: var(--text-primary); background: var(--nav-hover-bg); }
.tb-icon .material-icons-round { font-size: 18px; }
.btn-order {
  background: #1d4ed8; color: #fff; border: none;
  padding: 8px 18px; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(29,78,216,0.3); transition: all 0.15s;
}
.btn-order:hover { background: #1e40af; box-shadow: 0 6px 20px rgba(29,78,216,0.45); transform: translateY(-1px); }
.btn-order .material-icons-round { font-size: 16px; }

/* ── Topbar User ── */
.tb-user {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border);
  background: var(--tb-icon-bg);
  transition: all 0.15s; margin-left: 4px;
}
.tb-user:hover { background: var(--nav-hover-bg); }
.tb-user-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: #991b1b;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.tb-user-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.tb-user-role { font-size: 10.5px; color: var(--text-secondary); }

/* ── Language Selector ── */
.lang-selector { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: var(--tb-icon-bg); border: 1px solid var(--tb-icon-border);
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-primary); transition: all 0.15s; height: 34px;
}
.lang-btn:hover { background: var(--nav-hover-bg); }
.lang-btn .material-icons-round { font-size: 15px; color: var(--tb-icon-color); }
.lang-chevron { font-size: 14px !important; transition: transform 0.2s; color: var(--text-muted) !important; }
.lang-selector.open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 148px; z-index: 200; overflow: hidden;
}
.lang-selector.open .lang-dropdown { display: block; }
.lang-option {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 14px; border: none;
  background: transparent; font-family: inherit; font-size: 13px;
  color: var(--text-primary); cursor: pointer; transition: background 0.1s; text-align: left;
  text-decoration: none;
}
.lang-option:hover { background: var(--nav-hover-bg); }
.lang-option.active { font-weight: 600; color: #e63030; }
.lang-flag { font-size: 16px; line-height: 1; }

.content { padding: 24px 28px !important; flex: 1 !important; }

/* ══ FOOTER ══ */
.footer {
  background: #1e2226 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding: 18px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-logo { height: 20px; width: auto; opacity: 0.75; filter: brightness(1); }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.62) !important; }
.footer-links { display: flex; align-items: center; gap: 16px; }
.footer-link {
  font-size: 12px; color: rgba(255,255,255,0.62);
  text-decoration: none; cursor: pointer; transition: color 0.15s;
}
.footer-link:hover { color: rgba(255,255,255,0.90); }
.footer-right { font-size: 11.5px; color: rgba(255,255,255,0.62) !important; }

/* ── Kombinerade KPI+Action-block ── */
.dash-blocks {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-bottom: 20px;
  position: relative; z-index: 2;
}
.dash-block {
  background: var(--kpi-bg); border: 1px solid var(--kpi-border);
  border-radius: 13px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.2s;
  position: relative;
}
.dash-block:hover { border-color: var(--border2,rgba(0,0,0,0.14)); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.db-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
}
.db-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.db-icon .material-icons-round { font-size: 19px; }
.db-icon.red    { background: rgba(185,28,28,0.10);  color: #b91c1c; }
.db-icon.green  { background: rgba(5,150,105,0.10);    color: #059669; }
.db-icon.blue   { background: rgba(29,78,216,0.10);  color: #1d4ed8; }
.db-icon.orange { background: rgba(146,64,14,0.10);  color: #92400e; }
.db-icon.purple { background: rgba(109,40,217,0.10); color: #6d28d9; }
.db-body { flex: 1; min-width: 0; }
.db-top { display: flex; justify-content: space-between; align-items: center; }
.db-val { font-size: 21px; font-weight: 800; color: var(--kpi-val); letter-spacing: -0.6px; line-height: 1.1; }
.db-badge { font-size: 10px; padding: 2px 7px; border-radius: 5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.db-badge.ok   { background: rgba(5,150,105,0.1);    color: #059669; }
.db-badge.warn { background: rgba(146,64,14,0.1);  color: #92400e; }
.db-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.db-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--panel-head-border);
  background: var(--bg-surface2);
}
.db-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  color: var(--text-primary);
}
.db-btn:hover { border-color: rgba(230,48,48,0.25); background: var(--nav-hover-bg); }
.db-btn .material-icons-round { font-size: 14px; color: var(--text-muted); }
.db-btn.primary {
  background: #1d4ed8; color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(29,78,216,0.25);
}
.db-btn.primary:hover { box-shadow: 0 4px 12px rgba(29,78,216,0.4); }
.db-btn.primary .material-icons-round { color: rgba(255,255,255,0.8); }
.db-btn.order-web {
  background: #1d4ed8; color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(29,78,216,0.25);
}
.db-btn.order-web:hover { box-shadow: 0 4px 12px rgba(29,78,216,0.4); transform: translateY(-1px); }
.db-btn.order-web .material-icons-round { color: rgba(255,255,255,0.85); }
.db-btn.order-dom {
  background: #1d4ed8; color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(29,78,216,0.25);
}
.db-btn.order-dom:hover { box-shadow: 0 4px 12px rgba(29,78,216,0.4); transform: translateY(-1px); }
.db-btn.order-dom .material-icons-round { color: rgba(255,255,255,0.85); }
.db-btn.blue {
  background: rgba(29,78,216,0.1); color: #1d4ed8;
  border-color: rgba(29,78,216,0.25);
}
.db-btn.blue:hover { background: rgba(29,78,216,0.18); border-color: rgba(29,78,216,0.4); }
.db-btn.blue .material-icons-round { color: #1d4ed8; }
.db-btn.green {
  background: #059669; color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(5,150,105,0.25);
}
.db-btn.green:hover { box-shadow: 0 4px 12px rgba(5,150,105,0.4); transform: translateY(-1px); }
.db-btn.green .material-icons-round { color: rgba(255,255,255,0.85); }

/* ── Main Grid ── */
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }

/* ── Panel ── */
.panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: background 0.25s, border-color 0.25s;
}
.panel-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--panel-head-border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-head-left { display: flex; align-items: center; gap: 10px; }
.panel-head h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.panel-count {
  background: var(--kpi-bar-track); color: var(--text-secondary);
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
}
.see-all-btn { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.see-all-btn:hover { color: var(--text-secondary); }

/* ── Service Group Header ── */
.svc-group-head {
  padding: 10px 20px 8px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--group-label-border);
  border-bottom: 1px solid var(--group-label-border);
  background: var(--group-head-bg);
}
.svc-group-head .material-icons-round { font-size: 16px; color: var(--text-secondary); }
.svc-group-head .group-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-secondary);
}
.svc-group-empty {
  padding: 14px 20px;
  font-size: 13px; color: var(--text-muted);
  font-style: italic;
  border-bottom: 1px solid var(--svc-border);
}

/* ── Service Rows ── */
.svc-row {
  padding: 13px 20px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--svc-border);
  cursor: pointer; transition: background 0.15s;
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: var(--svc-hover); }
.svc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.svc-icon .material-icons-round { font-size: 19px; }
.svc-icon.dom  { background: rgba(185,28,28,0.08);   color: #b91c1c; }
.svc-icon.host { background: rgba(29,78,216,0.08);  color: #1d4ed8; }
.svc-icon.dns  { background: rgba(146,64,14,0.08);  color: #92400e; }
.svc-info { flex: 1; min-width: 0; }
.svc-name  { font-size: 14px; font-weight: 600; color: var(--svc-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-type  { font-size: 11px; color: var(--svc-type); margin-top: 2px; }
.status-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 7px; flex-shrink: 0;
}
.status-dot .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-dot.green { background: rgba(5,150,105,0.1);   color: #059669; }
.status-dot.green .dot { background: #059669; box-shadow: 0 0 5px rgba(5,150,105,0.5); }
.status-dot.red   { background: rgba(185,28,28,0.10); color: #b91c1c; }
.status-dot.red .dot { background: #b91c1c; }
.svc-date-col { text-align: right; flex-shrink: 0; min-width: 100px; }
.svc-date  { font-size: 13px; color: var(--svc-date); }
.svc-price { font-size: 11px; color: var(--svc-price); margin-top: 2px; }
.svc-action {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--svc-action-bg); color: var(--svc-action-color); transition: all 0.15s;
}
.svc-row:hover .svc-action { background: var(--nav-hover-bg); color: var(--text-secondary); }
.svc-action .material-icons-round { font-size: 16px; }

/* ── Right Column ── */
.right-col { display: flex; flex-direction: column; gap: 18px; }

/* ── Chat Panel ── */
.chat-panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: background 0.25s, border-color 0.25s;
}
.chat-panel-head {
  padding: 14px 18px; border-bottom: 1px solid var(--panel-head-border);
  display: flex; align-items: center; gap: 10px;
}
.chat-panel-head .material-icons-round { font-size: 18px; color: #1d4ed8; }
.chat-panel-head h3 { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.chat-panel-head .online-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #18a75a;
  box-shadow: 0 0 5px rgba(24,167,90,0.6); margin-left: auto;
}
.chat-body {
  padding: 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.chat-avatar-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  background: #1d4ed8;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(29,78,216,0.3);
}
.chat-avatar-wrap .material-icons-round { font-size: 32px; color: #fff; }
.chat-online-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2);
  color: #059669; font-size: 10.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.chat-online-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #059669; }
.chat-desc { font-size: 13px; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.chat-btn {
  width: 100%; background: #1d4ed8; color: #fff; border: none;
  padding: 11px 18px; border-radius: 9px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(29,78,216,0.3); transition: all 0.15s;
}
.chat-btn:hover { background: #1e40af; box-shadow: 0 6px 18px rgba(29,78,216,0.45); transform: translateY(-1px); }
.chat-btn .material-icons-round { font-size: 17px; }
.chat-meta { font-size: 11px; color: var(--text-muted); text-align: center; }
.chat-divider {
  width: 100%; height: 1px; background: var(--panel-head-border); margin: 2px 0;
}
.pin-btn {
  width: 100%; background: var(--quick-btn-bg);
  border: 1.5px dashed rgba(59,114,242,0.3);
  border-radius: 10px; padding: 10px 12px;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: all 0.15s; text-align: left;
}
.pin-btn:hover { background: rgba(59,114,242,0.05); border-color: rgba(59,114,242,0.5); }
.pin-btn-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: rgba(29,78,216,0.10);
  display: flex; align-items: center; justify-content: center;
}
.pin-btn-icon .material-icons-round { font-size: 22px; color: #1d4ed8; }
.pin-btn-text { flex: 1; }
.pin-btn-label { font-size: 12px; font-weight: 600; color: var(--text-primary); display: block; }
.pin-btn-sub   { font-size: 10.5px; color: var(--text-muted); }
.pin-display {
  display: none; width: 100%;
  background: var(--quick-btn-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 14px;
  text-align: center;
}
.pin-display.show { display: block; }
.pin-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 8px; }
.pin-code {
  font-size: 28px; font-weight: 800; letter-spacing: 6px;
  color: #3b72f2; font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.pin-timer { font-size: 11px; color: var(--text-muted); }
.pin-timer span { font-weight: 700; color: #f0900a; }
.pin-copy {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: #3b72f2;
  cursor: pointer; margin-top: 6px; background: none; border: none;
  font-family: inherit;
}
.pin-copy .material-icons-round { font-size: 13px; }

/* ── Topbar Theme Toggle ── */
.tb-theme-toggle {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  background: var(--tb-icon-bg); border: 1px solid var(--tb-icon-border);
  transition: all 0.15s;
}
.tb-theme-toggle:hover { background: var(--nav-hover-bg); }
.tb-theme-toggle .material-icons-round { font-size: 15px; color: var(--tb-icon-color); }

/* ── Driftstatus Panel ── */
.status-panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: background 0.25s, border-color 0.25s;
}
.status-panel-head {
  padding: 13px 18px; border-bottom: 1px solid var(--panel-head-border);
  display: flex; align-items: center; gap: 10px;
}
.status-panel-head .material-icons-round { font-size: 17px; color: #059669; }
.status-panel-head h3 { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.status-all-ok {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2);
  color: #059669; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
}
.status-all-ok .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #059669;
  animation: pulse-anim 2s infinite;
}
@keyframes pulse-anim {
  0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(5,150,105,0); }
}
.status-row {
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--svc-border);
}
.status-row:last-child { border-bottom: none; }
.status-row-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.status-row-icon .material-icons-round { font-size: 15px; }
.status-row-icon.g { background: rgba(5,150,105,0.1);   color: #059669; }
.status-row-icon.b { background: rgba(29,78,216,0.1);  color: #1d4ed8; }
.status-row-icon.o { background: rgba(146,64,14,0.1);  color: #92400e; }
.status-row-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.status-row-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; flex-shrink: 0; white-space: nowrap;
}
.status-row-badge.ok   { background: rgba(5,150,105,0.1);   color: #059669; }
.status-row-badge.warn { background: rgba(146,64,14,0.1);  color: #92400e; }
.status-row-uptime { font-size: 10.5px; color: var(--text-muted); width: 46px; text-align: right; flex-shrink: 0; }

/* ── Service Expand Actions ── */
.svc-expand-panel {
  display: none;
  background: var(--expand-bg);
  border-top: 2px solid var(--group-label-border);
  border-bottom: 1px solid var(--svc-border);
  padding: 10px 16px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.svc-expand-panel.open { display: flex; }
.svc-controls {
  margin-left: auto; display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.svc-link-btn {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29,78,216,0.10); border: 1px solid rgba(29,78,216,0.25);
  color: #1d4ed8; cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.svc-link-btn:hover { background: rgba(29,78,216,0.18); border-color: rgba(29,78,216,0.45); transform: translateX(1px); }
.svc-link-btn .material-icons-round { font-size: 14px; }
.svc-expand-toggle {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--svc-action-bg); border: 1px solid var(--panel-border);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.svc-expand-toggle:hover { background: var(--nav-hover-bg); color: var(--text-primary); }
.svc-expand-toggle .material-icons-round { font-size: 14px; transition: transform 0.2s; }
.svc-expand-toggle.collapsed .material-icons-round { transform: rotate(180deg); }
.svc-expand-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; border: 1px solid var(--panel-border);
  background: var(--bg-surface); color: var(--text-primary);
}
.svc-expand-btn:hover { border-color: rgba(200,40,40,0.3); background: rgba(200,40,40,0.05); }
.svc-expand-btn .material-icons-round { font-size: 16px; color: rgba(200,40,40,0.65); }
.svc-expand-btn.upgrade {
  background: #e63030; color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(230,48,48,0.25);
}
.svc-expand-btn.upgrade:hover { box-shadow: 0 5px 16px rgba(230,48,48,0.4); transform: translateY(-1px); }
.svc-expand-btn.upgrade .material-icons-round { color: rgba(255,255,255,0.8); }
.svc-expand-btn.renew {
  background: rgba(234,120,0,0.09); color: #d97706;
  border-color: rgba(234,120,0,0.28);
}
.svc-expand-btn.renew:hover { background: rgba(234,120,0,0.16); border-color: rgba(234,120,0,0.45); }
.svc-expand-btn.renew .material-icons-round { color: #d97706; }
.svc-expand-btn.blue {
  background: rgba(59,114,242,0.09); color: #3b72f2;
  border-color: rgba(59,114,242,0.25);
}
.svc-expand-btn.blue:hover { background: rgba(59,114,242,0.16); border-color: rgba(59,114,242,0.45); }
.svc-expand-btn.blue .material-icons-round { color: #3b72f2; }

/* ── Domain search ── */
.dom-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 16px 4px;
  background: var(--bg-base); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 6px 12px;
}
.dom-search-wrap .material-icons-round { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.dom-search {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--text-primary);
  width: 100%;
}
.dom-search::placeholder { color: var(--text-muted); }

/* ── Managed WordPress CTA group ── */
.svc-group-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 16px; gap: 14px;
}
.svc-group-cta-info { display: flex; align-items: center; gap: 10px; }
.svc-group-cta-info .material-icons-round { font-size: 22px; color: #3b72f2; }
.svc-group-cta-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.svc-group-cta-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* ── Activity Panel ── */
.activity-panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; overflow: hidden; flex: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: background 0.25s, border-color 0.25s;
}
.activity-panel .panel-head { padding: 14px 18px; border-bottom: 1px solid var(--panel-head-border); }
.activity-panel .panel-head h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.act-item {
  padding: 12px 18px; display: flex; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid var(--act-border);
}
.act-item:last-child { border-bottom: none; }
.act-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.act-icon .material-icons-round { font-size: 15px; }
.act-icon.g { background: rgba(5,150,105,0.1);   color: #059669; }
.act-icon.b { background: rgba(59,114,242,0.1);  color: #3b72f2; }
.act-icon.r { background: rgba(230,48,48,0.1);   color: #e63030; }
.act-text { font-size: 12.5px; color: var(--act-text); line-height: 1.4; }
.act-time { font-size: 11px; color: var(--act-time); margin-top: 3px; }

/* ════════════════════════════════
   Sidebar collapse nav items
════════════════════════════════ */
.sidebar-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 16px;
}

.nav-item-collapse .nav-collapse-arrow {
  margin-left: auto;
  font-size: 16px !important;
  transition: transform 0.2s;
  color: rgba(255,255,255,0.65);
}
.nav-item-collapse:not(.collapsed) .nav-collapse-arrow {
  transform: rotate(180deg);
}
.nav-item-text {
  cursor: default;
  opacity: 0.6;
}

/* Sub-nav (services dropdown) inside sidebar */
.sidebar-subnav { padding: 2px 0 4px; }
.sidebar-subnav .nav-subnav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-subnav li { list-style: none; }
.sidebar-subnav .nav-link,
.sidebar-subnav .nav-link:link,
.sidebar-subnav .nav-link:visited {
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px 6px 48px !important;
  font-size: 12.5px !important;
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  margin: 1px 8px !important;
  transition: all 0.15s !important;
  background: transparent !important;
}
.sidebar-subnav .nav-link:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.07) !important;
}
.sidebar-subnav .nav-link.active {
  color: #fff !important;
  background: rgba(200,40,40,0.18) !important;
  border-left: 2px solid #c82828 !important;
}
.sidebar-subnav .badge {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 10px !important;
  margin-left: auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   HostBill integration fixes
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Body override */
body,
body.template_2019,
body.hb-loaded {
  font-family: 'Inter', sans-serif !important;
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Layout — force override any HostBill defaults */
/* (defined with !important in the rules above; kept here for specificity safety) */

/* Hide old HostBill elements */
.navbar.fixed-top           { display: none !important; }
.navbar:not(.admax-navbar)  { display: none !important; }
.sidebar-overlay            { display: none !important; }
.main-overlay               { display: none !important; }
.sub-bar                    { display: none !important; }
.body-content               { padding: 0 !important; margin: 0 !important; }
.body-content .section-main { margin-top: 0 !important; }
/* Sidebar must not be overridden by HostBill */
.sidebar                    { width: 230px !important; min-width: 230px !important; position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 50 !important; }

/* Override Bootstrap anchor defaults inside sidebar */
.sidebar a {
  text-decoration: none !important;
}
.sidebar a:hover {
  text-decoration: none !important;
}

/* Override Bootstrap active states on nav-link (set by HostBill/JS) */
.sidebar .nav-link.active,
.sidebar .nav-pills .nav-link.active,
.sidebar .show > .nav-link {
  background-color: transparent !important;
  color: inherit !important;
}

/* Dropdowns och modaler (Bootstrap) — behåll funktion */
.dropdown-menu {
  font-family: 'Inter', sans-serif !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  background: var(--bg-surface) !important;
  padding: 6px !important;
  min-width: 180px !important;
}
.dropdown-item {
  font-size: 13px !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.12s !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--nav-hover-bg) !important;
  color: var(--text-primary) !important;
}
.dropdown-item.disabled { opacity: 0.6 !important; pointer-events: none !important; }
.dropdown-divider {
  border-color: var(--border) !important;
  margin: 4px 8px !important;
}

/* Notifications dropdown */
.notifications-drop {
  min-width: 320px !important;
  padding: 0 !important;
}
.notifications-drop-items { max-height: 320px; overflow-y: auto; }
/* Override opacity:0.4 on empty-state notification icon — use direct color instead */
.notifications-drop-items .dropdown-item.disabled .material-icons-round {
  opacity: 1 !important;
  color: var(--text-muted) !important;
  font-size: 32px !important;
}

/* ── Topbar theme toggle ── */
.tb-theme-toggle {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  background: var(--tb-icon-bg); border: 1px solid var(--tb-icon-border);
  transition: all 0.15s; flex-shrink: 0;
}
.tb-theme-toggle:hover { background: var(--nav-hover-bg); }
.tb-theme-toggle .material-icons-round { font-size: 15px; color: var(--tb-icon-color); }
.tb-theme-toggle .toggle-track {
  width: 30px; height: 16px; background: var(--toggle-track);
  border-radius: 8px; position: relative; transition: background 0.25s; flex-shrink: 0;
}
[data-theme="dark"] .tb-theme-toggle .toggle-track { background: #e63030; }
.tb-theme-toggle .toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; background: #fff; border-radius: 50%;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .tb-theme-toggle .toggle-thumb { transform: translateX(14px); }

/* ════════════════════════════════════════════
   HostBill content area — panel-style styling
════════════════════════════════════════════ */

/* Wrap HostBill sections in panel-like cards */
.section-dashboard,
.section-clientarea,
.section-support,
.section-domains,
.section-billing,
.section-main {
  max-width: 100%;
}

/* HostBill section headings */
.section-dashboard h1,
.section-clientarea h1,
.section-main h1,
.content > h1,
.content section > h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.3px !important;
}

/* ── Nav tabs (dashboard service tabs) → panel header style ── */
.nav-tabs-wrapper {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 14px 14px 0 0 !important;
  border-bottom: none !important;
  padding: 0 4px !important;
  overflow: hidden !important;
}
.nav-tabs {
  border-bottom: 1px solid var(--panel-head-border) !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 2px !important;
}
.nav-tabs .nav-item { margin: 0 !important; }
.nav-tabs .nav-link {
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
  border: none !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.nav-tabs .nav-link:hover { color: var(--text-primary) !important; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link {
  color: var(--text-primary) !important; font-weight: 600 !important;
  border-bottom-color: #e63030 !important;
  background: transparent !important;
}

/* ── Service table → panel body ── */
.table-responsive {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 0 0 14px 14px !important;
  border-top: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
/* When there's no nav-tabs-wrapper above the table */
.content .table-responsive:first-child,
section > .table-responsive:first-child {
  border-radius: 14px !important;
}
.table-responsive + .table-responsive { border-top: 1px solid var(--panel-border) !important; }

.table {
  margin-bottom: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}
.table thead th {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.7px !important;
  color: var(--text-muted) !important;
  background: var(--panel-bg) !important;
  border-bottom: 1px solid var(--panel-head-border) !important;
  border-top: none !important;
  padding: 12px 20px !important;
}
.table tbody tr {
  border-bottom: 1px solid var(--svc-border) !important;
  transition: background 0.12s !important;
}
.table tbody tr:last-child { border-bottom: none !important; }
.table tbody tr:hover { background: var(--svc-hover) !important; }
.table tbody td {
  padding: 13px 20px !important;
  vertical-align: middle !important;
  border-top: none !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}
.table tbody td a {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.table tbody td a:hover { color: #3b72f2 !important; }

/* Status badges */
.badge { font-family: 'Inter', sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 7px !important; }
.badge-active, .badge-Active { background: rgba(24,167,90,0.1) !important; color: #16a34a !important; }
.badge-inactive, .badge-Inactive, .badge-terminated, .badge-Terminated { background: rgba(230,48,48,0.08) !important; color: #dc2626 !important; }
.badge-pending, .badge-Pending { background: rgba(240,144,10,0.1) !important; color: #d97706 !important; }
.badge-secondary { background: var(--kpi-bar-track) !important; color: var(--text-secondary) !important; }

/* "→" arrow button in table rows */
.table tbody td:last-child a,
.table tbody td .btn-sm {
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

/* ── Generic panels / cards ── */
.card, .panel-default, .well {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  margin-bottom: 18px !important;
}
.card-header, .panel-heading {
  background: var(--panel-bg) !important;
  border-bottom: 1px solid var(--panel-head-border) !important;
  padding: 14px 20px !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: 14px 14px 0 0 !important;
}
.card-body, .panel-body {
  padding: 16px 20px !important;
  background: var(--panel-bg) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: #3b72f2 !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 8px rgba(59,114,242,0.25) !important;
  transition: all 0.15s !important;
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(59,114,242,0.4) !important; transform: translateY(-1px) !important; }
.btn-default, .btn-secondary {
  background: var(--panel-bg) !important; color: var(--text-primary) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 8px !important; font-family: 'Inter', sans-serif !important;
  font-size: 13px !important; font-weight: 500 !important;
  padding: 8px 18px !important; transition: all 0.15s !important;
}
.btn-default:hover, .btn-secondary:hover { background: var(--nav-hover-bg) !important; }
.btn-danger { background: #e63030 !important; border-color: transparent !important; border-radius: 8px !important; }
.btn-success { background: #16a34a !important; border-color: transparent !important; border-radius: 8px !important; }

/* ── Forms ── */
.form-control {
  background: var(--search-bg) !important;
  border: 1px solid var(--search-border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  transition: border-color 0.15s !important;
}
.form-control:focus {
  border-color: rgba(59,114,242,0.5) !important;
  box-shadow: 0 0 0 3px rgba(59,114,242,0.1) !important;
  background: var(--bg-surface) !important;
}
label {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important; letter-spacing: 0.5px !important;
}

/* ── Alert boxes ── */
.alert {
  border-radius: 10px !important; border: none !important;
  font-size: 13px !important; padding: 12px 16px !important;
}
.alert-success { background: rgba(24,167,90,0.1) !important; color: #16a34a !important; }
.alert-danger, .alert-error { background: rgba(230,48,48,0.08) !important; color: #dc2626 !important; }
.alert-warning { background: rgba(240,144,10,0.1) !important; color: #d97706 !important; }
.alert-info { background: rgba(59,114,242,0.1) !important; color: #3b72f2 !important; }

/* ── Section signin (not-logged-in login box) ── */
.section-signin {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 58px - 60px);
}
.login-wrapper, .form-login, #loginModal .modal-dialog {
  max-width: 600px !important; width: 100% !important;
}

/* ════════════════════════════════════════════════════════
   LOGIN PAGE — Redesign (Centrerad panel, design #1)
════════════════════════════════════════════════════════ */

.login-page-wrap {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100vh - 58px - 60px);
  padding: 40px 20px;
}
.login-logo-wrap { margin-bottom: 24px; text-align: center; }
.login-logo-img { height: 36px; width: auto; opacity: 0.9; }

/* Card */
.login-panel {
  width: 100%; max-width: 600px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s;
}
.login-panel .panel-head {
  padding: 24px 40px; border-bottom: 1px solid var(--panel-head-border);
  display: flex; align-items: center; gap: 14px;
}
.login-panel .panel-head .material-icons-round { font-size: 24px; color: #b91c1c; flex-shrink: 0; }
.login-panel .panel-head .admax-modal-close .material-icons-round { font-size: 22px; color: var(--text-muted); }
.login-panel .panel-head h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.login-panel-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.login-panel .panel-body { padding: 36px 40px; }

/* Form fields */
.lf-group { margin-bottom: 24px; }
/* Password strength bar — targets both Bootstrap .progress div and native <progress> element */
.login-panel .progress,
.lf-group .progress,
.login-panel .panel-body .progress {
  height: 5px !important;
  border-radius: 3px !important;
  margin: 6px auto 4px !important;
  overflow: hidden !important;
  background: #e2e8f0 !important;
  width: 100% !important;
  display: flex !important;
}
.login-panel .progress .progress-bar,
.lf-group .progress .progress-bar,
.login-panel .progress > *,
.lf-group .progress > * {
  width: 100% !important;
  flex: 1 1 100% !important;
  background-color: #166534 !important;
  transition: none !important;
}
/* Native <progress> element */
.login-panel progress,
.lf-group progress,
.login-panel .panel-body progress {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  border: none !important;
  border-radius: 3px !important;
  margin: 6px auto 4px !important;
  background: #166534 !important;
  overflow: hidden !important;
}
.login-panel progress::-webkit-progress-bar,
.lf-group progress::-webkit-progress-bar {
  background: #166534 !important;
  border-radius: 3px !important;
}
.login-panel progress::-webkit-progress-value,
.lf-group progress::-webkit-progress-value {
  background: #166534 !important;
  border-radius: 3px !important;
}
.login-panel progress::-moz-progress-bar,
.lf-group progress::-moz-progress-bar {
  background: #166534 !important;
}
[data-theme="dark"] .login-panel .progress,
[data-theme="dark"] .lf-group .progress {
  background: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .login-panel .progress .progress-bar,
[data-theme="dark"] .lf-group .progress .progress-bar,
[data-theme="dark"] .login-panel .progress > *,
[data-theme="dark"] .lf-group .progress > * {
  background-color: #4ade80 !important;
}
[data-theme="dark"] .login-panel progress,
[data-theme="dark"] .lf-group progress {
  background: #4ade80 !important;
}
[data-theme="dark"] .login-panel progress::-webkit-progress-bar,
[data-theme="dark"] .lf-group progress::-webkit-progress-bar {
  background: #4ade80 !important;
}
[data-theme="dark"] .login-panel progress::-webkit-progress-value,
[data-theme="dark"] .lf-group progress::-webkit-progress-value {
  background: #4ade80 !important;
}
[data-theme="dark"] .login-panel progress::-moz-progress-bar,
[data-theme="dark"] .lf-group progress::-moz-progress-bar {
  background: #4ade80 !important;
}
.lf-label {
  display: block;
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--text-secondary) !important; margin-bottom: 7px !important;
  letter-spacing: 0.3px; text-transform: uppercase !important;
}
.lf-wrap { position: relative; }
.lf-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 19px; color: var(--text-muted); pointer-events: none;
}
.lf-input {
  width: 100% !important; padding: 14px 14px 14px 44px !important;
  background: var(--search-bg) !important; border: 1px solid var(--search-border) !important;
  border-radius: 9px !important; font-family: 'Inter', sans-serif !important;
  font-size: 15px !important; color: var(--text-primary) !important;
  outline: none !important; transition: border 0.15s, background 0.15s !important;
  box-sizing: border-box !important;
}
.lf-input:focus {
  border-color: #c82828 !important; background: var(--panel-bg) !important;
  box-shadow: 0 0 0 3px rgba(200,40,40,0.1) !important;
}
.lf-input::placeholder { color: var(--text-muted) !important; }
.lf-input.lf-input-plain { padding-left: 12px !important; }

/* Links (glömt lösenord, skapa konto) */
.lf-links-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.lf-link { font-size: 13.5px; color: #1d4ed8; text-decoration: none; font-weight: 600; }
.lf-link:hover { text-decoration: underline; }
.lf-footer-links { margin-top: 14px; text-align: center; }

/* Submit button */
.lf-submit {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  width: 100% !important; padding: 15px 16px !important;
  border-radius: 12px !important; background: #1d4ed8 !important;
  color: #fff !important; border: none !important;
  font-family: 'Inter', sans-serif !important; font-size: 16px !important;
  font-weight: 700 !important; cursor: pointer !important;
  transition: all 0.15s !important;
  box-shadow: 0 2px 8px rgba(29,78,216,0.3) !important;
}
.lf-submit:hover { background: #1e40af !important; box-shadow: 0 4px 14px rgba(29,78,216,0.45) !important; }
.lf-submit .material-icons-round { font-size: 20px !important; }

/* Captcha */
.lf-captcha { display: flex; align-items: center; gap: 12px; }
.lf-captcha .capcha { width: 110px; height: 52px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.lf-captcha .lf-input-plain { flex: 1; min-width: 0; }

/* Social login section (clientwidget Google-knapp etc) */
.lf-social-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.lf-social-section:empty { display: none; }
/* Social section at top — ta bort border */
.lf-social-top { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }

/* "eller"-avdelare */
.lf-eller-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0; color: #111827; font-size: 14px; font-weight: 600;
}
.lf-eller-divider::before, .lf-eller-divider::after {
  content: ''; flex: 1; height: 1.5px; background: #111827;
}

/* Kom ihåg mig + glömt lösenord */
.lf-remember-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.lf-remember-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.lf-remember-label input[type="checkbox"],
.lf-remember-label input[type="checkbox"].styled {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  position: static !important; clip: auto !important; pointer-events: auto !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  margin: 0 !important; padding: 0 !important;
  border: 2px solid #d1d5db !important; border-radius: 4px !important;
  background: #fff !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 10px !important;
  cursor: pointer !important; flex-shrink: 0 !important;
  display: inline-block !important; vertical-align: middle !important;
  transition: background 0.15s, border-color 0.15s !important;
  outline: none !important;
}
.lf-remember-label input[type="checkbox"]:checked,
.lf-remember-label input[type="checkbox"].styled:checked {
  background-color: #1d4ed8 !important; border-color: #1d4ed8 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3e%3c/svg%3e") !important;
}
.lf-remember-label input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(29,78,216,0.15) !important;
}
.lf-remember-label input[type="checkbox"]::before,
.lf-remember-label input[type="checkbox"]::after,
.lf-remember-label input[type="checkbox"].styled::before,
.lf-remember-label input[type="checkbox"].styled::after {
  display: none !important; content: none !important;
  width: 0 !important; height: 0 !important;
}

/* Registreringsrad längst ner */
.lf-register-row {
  text-align: center; margin-top: 22px;
  font-size: 14.5px; color: var(--text-muted);
}

/* Gemensam layout för alla social-knappar */
.lf-social-section a,
.lf-social-section button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important; width: 100% !important; padding: 14px 16px !important;
  border-radius: 9px !important; font-family: 'Inter', sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important;
  text-decoration: none !important; cursor: pointer !important;
  transition: all 0.15s !important; box-sizing: border-box !important;
  margin-bottom: 12px !important;
}

/* BankID-knapp — mörk blå, Bankens officiella färg */
.lf-bankid-btn {
  background: #182d4f !important;
  border: 1px solid #182d4f !important;
  color: #fff !important;
}
.lf-bankid-btn:hover {
  background: #1e3a63 !important; border-color: #1e3a63 !important;
  box-shadow: 0 3px 10px rgba(24,45,79,0.35) !important;
}
.lf-bankid-logo { height: 22px; width: auto; flex-shrink: 0; }

/* Google-knapp — modern vit stil med färgglad G */
.lf-social-section .btn-google,
.lf-social-section .btn-social.btn-google {
  background: #fff !important;
  border: 1px solid #dadce0 !important;
  color: #3c4043 !important;
}
.lf-social-section .btn-google:hover,
.lf-social-section .btn-social.btn-google:hover {
  background: #f8f9fa !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}
/* Nollställ absolute-positionering från socialbuttons.css, gör ikonen inline i flex */
.lf-social-section .btn-social.btn-google {
  padding-left: 14px !important;
}
.lf-social-section .btn-social.btn-google > .social-logo {
  position: relative !important;
  left: auto !important; top: auto !important; bottom: auto !important;
  border-right: none !important;
  flex-shrink: 0 !important;
}
/* Ersätt google.png med färgglad SVG G, rätt storlek och centrerad */
.lf-social-section .social-logo.social-google {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 13 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.7-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4c-7.7 0-14.4 4.3-17.7 10.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.7-.4-3.9z'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 20px !important; height: 20px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ── Bootstrap modal → Admax panel override ── */
#loginModal .modal-dialog,
.admax-login-dialog {
  max-width: 600px !important;
  margin: auto !important;
}
#loginModal .modal-content,
.admax-login-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.admax-login-logo-wrap {
  text-align: center;
  margin-bottom: 20px;
}
.admax-login-card {
  max-width: 600px !important;
  width: 100% !important;
}
/* Stäng-knapp i panel-head */
.admax-modal-close {
  margin-left: auto;
  background: none !important;
  border: none !important;
  padding: 2px !important;
  cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.admax-modal-close:hover {
  background: var(--nav-hover-bg) !important;
  color: var(--text-primary);
}
.admax-modal-close .material-icons-round { font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════
   SIGNUP PAGE — Mockup 4 Split Layout
══════════════════════════════════════════════════════════════════ */

.section-signup { padding: 0 !important; }

/* Outer split card */
.signup-outer {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  display: flex;
}

/* ── Left accent column ── */
.signup-accent-col {
  width: 280px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #b91c1c 0%, #7f1d1d 100%);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.signup-accent-col::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.signup-accent-col::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -50px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}
.signup-accent-logo {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -0.5px; margin-bottom: 6px;
  position: relative; z-index: 1;
}
.signup-accent-tagline {
  font-size: 12.5px; color: rgba(255,255,255,0.75);
  margin-bottom: 32px; position: relative; z-index: 1;
}
.signup-accent-title {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 6px; position: relative; z-index: 1;
}
.signup-accent-sub {
  font-size: 12.5px; color: rgba(255,255,255,0.75);
  margin-bottom: 28px; line-height: 1.6; position: relative; z-index: 1;
}
.signup-feat-list {
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1; flex: 1;
}
.signup-feat-item { display: flex; align-items: center; gap: 10px; }
.signup-feat-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.signup-feat-dot .material-icons-round { font-size: 15px; color: rgba(255,255,255,0.9); }
.signup-feat-text { font-size: 12.5px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.signup-accent-footer {
  position: relative; z-index: 1;
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.signup-accent-footer-text { font-size: 12px; color: rgba(255,255,255,0.6); }
.signup-accent-footer-text a { color: rgba(255,255,255,0.9); font-weight: 600; text-decoration: none; }

/* ── Right form column ── */
.signup-form-col {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.signup-form-title {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 4px;
}
.signup-form-sub {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 20px;
}

/* ── Social buttons ── */
.signup-bankid-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: #182d4f; border: 1px solid #182d4f;
  border-radius: 9px; color: #fff !important;
  font-size: 13.5px; font-weight: 600; font-family: 'Inter', sans-serif;
  text-decoration: none !important; cursor: pointer;
  margin-bottom: 8px; transition: background 0.15s, box-shadow 0.15s;
}
.signup-bankid-btn:hover {
  background: #1e3a63 !important; border-color: #1e3a63 !important;
  box-shadow: 0 3px 10px rgba(24,45,79,0.35);
  color: #fff !important;
}
.signup-bankid-logo { height: 18px; width: auto; flex-shrink: 0; }

/* Social widget wrapper — reuse lf-social-section rules */
.signup-social-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
.signup-social-wrap:empty { display: none; }

/* Divider */
.signup-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 18px;
}
.signup-divider-line { flex: 1; height: 1px; background: var(--border); }
.signup-divider-text { font-size: 11.5px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }

/* ── Form field overrides — static labels matching mockup ── */

/* Convert floating label groups to flex-column; label always above input */
.signup-form-col .form-label-group {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;   /* keep relative so vtip absolute-pos works */
  margin-bottom: 14px !important;
}
/* Label: move above input via order:-1, make it static uppercase small label */
.signup-form-col .form-label-group label.form-label-placeholder {
  order: -1 !important;
  position: static !important;
  display: block !important;
  padding: 0 0 4px 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  transition: none !important;
  width: auto !important;
  border: none !important;
  margin-bottom: 0 !important;
  cursor: default !important;
  pointer-events: none;
}
/* Neutralise floating-label system's dynamic overrides (font-size:70%, padding shifts) */
.signup-form-col .form-label-group.freeze label.form-label-placeholder,
.signup-form-col .form-label-group input.form-control:focus ~ label.form-label-placeholder,
.signup-form-col .form-label-group select.form-control ~ label.form-label-placeholder {
  font-size: 11px !important;
  padding: 0 0 4px 0 !important;
  pointer-events: none !important;
}

/* All inputs and selects */
.signup-form-col .form-control {
  background: var(--bg-surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  height: auto !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
}
/* Uniform padding for direct inputs/selects (not wrapped in .iti) */
.signup-form-col .form-label-group > input.form-control,
.signup-form-col .form-label-group > select.form-control {
  padding: 9px 12px !important;
}
/* Neutralise floating-label focus padding changes */
.signup-form-col .form-label-group.freeze input.form-control,
.signup-form-col .form-label-group input.form-control:focus,
.signup-form-col .form-label-group select.form-control {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.signup-form-col .form-control:focus {
  border-color: #c82828 !important;
  background: var(--panel-bg) !important;
  box-shadow: 0 0 0 3px rgba(200,40,40,0.08) !important;
  outline: none !important;
}
/* Re-enable placeholder text (form-label-group normally hides it) */
.signup-form-col .form-label-group input.form-control::-webkit-input-placeholder { opacity: 0.5 !important; color: var(--text-muted) !important; }
.signup-form-col .form-label-group input.form-control::-moz-placeholder           { opacity: 0.5 !important; color: var(--text-muted) !important; }
.signup-form-col .form-label-group input.form-control::placeholder                { opacity: 0.5 !important; color: var(--text-muted) !important; }

/* Phone number — .iti wrapper: keep position:relative & display:block, only tint bg */
/* Do NOT add display:flex or overflow:hidden — those break intl-tel-input internals */
.signup-form-col .iti { width: 100%; }
.signup-form-col .iti input.form-control {
  background: var(--bg-surface2) !important;
}
.signup-form-col .iti input.form-control:focus {
  background: var(--panel-bg) !important;
}

/* Tooltip icon (.vtip_description) — reposition for static-label layout */
/* The original bottom calc assumed floating labels; now input is at the bottom of the group */
.signup-form-col .vtip_description_signup_form_label {
  bottom: 8px !important;
  transform: none !important;
}

/* Labels for non-floating fields (File, Textarea) */
.signup-form-col .form-group > label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 5px !important;
}

/* ── Section header dividers ── */
.signup-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 10px;
}
.signup-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.signup-section-head .material-icons-round { font-size: 14px; }

/* ── Kontotyp visual toggle ── */
.signup-type-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.signup-type-toggle {
  display: flex;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 14px;
}
.signup-type-btn {
  flex: 1;
  padding: 8px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.signup-type-btn.active {
  background: var(--panel-bg);
  color: #b91c1c;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.signup-type-btn .material-icons-round { font-size: 17px; }

/* ── Terms row (Check field) ── */
.signup-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0;
}
.signup-terms-row input[type=checkbox] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: #b91c1c;
  flex-shrink: 0;
  cursor: pointer;
}
.signup-terms-row label {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
}
.signup-terms-row a { color: #b91c1c; text-decoration: none; font-weight: 500; }
.signup-terms-row a:hover { text-decoration: underline; }

/* Hide intl-tel-input example placeholder inside signup form */
.signup-form-col .iti input.form-control::placeholder { color: transparent; }

/* Hide the <hr> that precedes the captcha field */
.signup-form-col .form-group_captcha hr { display: none; }

/* ── Submit button ── */
.signup-submit-btn {
  width: 100%;
  padding: 13px;
  background: #b91c1c;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.2px;
  margin-top: 16px;
}
.signup-submit-btn:hover { background: #991b1b; }
.signup-submit-btn .material-icons-round { font-size: 18px; }

/* ── Security badges ── */
.signup-security-row {
  display: flex; gap: 12px; margin-top: 16px;
  justify-content: center; flex-wrap: wrap;
}
.signup-security-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-muted);
}
.signup-security-badge .material-icons-round { font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 750px) {
  .signup-outer { flex-direction: column; border-radius: 14px; }
  .signup-accent-col { width: 100%; padding: 28px 24px; }
  .signup-feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .signup-form-col { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .signup-feat-list { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   ALP — Full-page guest login layout
   ════════════════════════════════════════════════ */

/* Guest mode: hide sidebar/topbar chrome, expand content */
.admax-guest .sidebar,
.admax-guest .sidebar-overlay { display: none !important; }
.admax-guest .topbar { display: none !important; }
.admax-guest .main {
  margin-left: 0 !important;
  width: 100% !important;
}
.admax-guest .content {
  min-height: 100vh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--alp-bg, #1e2226) !important;
  transition: background 0.25s;
  position: relative;
  overflow-x: hidden;
}

/* ALP theme variables — dark (default) */
:root,
[data-theme="dark"] {
  --alp-bg:              #1e2226;
  --alp-card:            #ffffff;
  --alp-card-head:       #f9fafb;
  --alp-input-bg:        #f9fafb;
  --alp-border:          rgba(0,0,0,0.07);
  --alp-input-border:    #e5e7eb;
  --alp-input-focus:     #b91c1c;
  --alp-text:            #111827;
  --alp-text-sec:        #4b5563;
  --alp-text-muted:      #9ca3af;
  --alp-card-shadow:     0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  --alp-topbar-bg:       #1e2226;
  --alp-topbar-border:   rgba(255,255,255,0.08);
  --alp-chip-bg:         rgba(255,255,255,0.04);
  --alp-chip-border:     rgba(255,255,255,0.08);
  --alp-trust-color:     rgba(255,255,255,0.28);
  --alp-trust-icon:      rgba(255,255,255,0.35);
  --alp-footer-border:   rgba(255,255,255,0.06);
  --alp-footer-copy:     rgba(255,255,255,0.22);
  --alp-footer-link:     rgba(255,255,255,0.28);
  --alp-placeholder:     #9ca3af;
  --alp-lang-bg:         rgba(255,255,255,0.07);
  --alp-lang-border:     rgba(255,255,255,0.12);
  --alp-lang-color:      rgba(255,255,255,0.7);
  --alp-lang-hover-bg:   rgba(255,255,255,0.12);
  --alp-lang-hover-color:#ffffff;
  --alp-eyebrow-bg:      rgba(29,78,216,0.18);
  --alp-eyebrow-border:  rgba(29,78,216,0.35);
  --alp-eyebrow-color:   #93c5fd;
  --alp-heading:         #ffffff;
  --alp-sub:             rgba(255,255,255,0.42);
  --alp-divider:         rgba(255,255,255,0.2);
  --alp-divider-line:    rgba(255,255,255,0.08);
  --alp-chip-icon-bg:    rgba(29,78,216,0.2);
  --alp-chip-icon:       #93c5fd;
  --alp-chip-strong:     rgba(255,255,255,0.78);
  --alp-chip-span:       rgba(255,255,255,0.32);
  --alp-glow-1:          rgba(29,78,216,0.08);
  --alp-glow-2:          rgba(185,28,28,0.07);
}

/* ALP theme variables — light (light bg, dark topbar) */
[data-theme="light"] {
  --alp-bg:              #eef0f5;
  --alp-card:            #ffffff;
  --alp-card-head:       #f9fafb;
  --alp-input-bg:        #f9fafb;
  --alp-border:          rgba(0,0,0,0.07);
  --alp-input-border:    #d1d5db;
  --alp-input-focus:     #b91c1c;
  --alp-text:            #111827;
  --alp-text-sec:        #4b5563;
  --alp-text-muted:      #6b7280;
  --alp-card-shadow:     0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --alp-topbar-bg:       #1e2226;
  --alp-topbar-border:   rgba(255,255,255,0.08);
  --alp-chip-bg:         #ffffff;
  --alp-chip-border:     rgba(0,0,0,0.08);
  --alp-trust-color:     rgba(255,255,255,0.55);
  --alp-trust-icon:      rgba(255,255,255,0.6);
  --alp-footer-border:   rgba(255,255,255,0.07);
  --alp-footer-copy:     rgba(255,255,255,0.35);
  --alp-footer-link:     rgba(255,255,255,0.5);
  --alp-placeholder:     #9ca3af;
  --alp-lang-bg:         rgba(255,255,255,0.09);
  --alp-lang-border:     rgba(255,255,255,0.15);
  --alp-lang-color:      rgba(255,255,255,0.85);
  --alp-lang-hover-bg:   rgba(255,255,255,0.18);
  --alp-lang-hover-color:#ffffff;
  --alp-eyebrow-bg:      rgba(29,78,216,0.08);
  --alp-eyebrow-border:  rgba(29,78,216,0.2);
  --alp-eyebrow-color:   #1d4ed8;
  --alp-heading:         #111827;
  --alp-sub:             #4b5563;
  --alp-divider:         rgba(0,0,0,0.12);
  --alp-divider-line:    rgba(0,0,0,0.07);
  --alp-chip-icon-bg:    rgba(29,78,216,0.1);
  --alp-chip-icon:       #1d4ed8;
  --alp-chip-strong:     #111827;
  --alp-chip-span:       #6b7280;
  --alp-glow-1:          rgba(29,78,216,0.05);
  --alp-glow-2:          rgba(185,28,28,0.04);
}

/* Background glows */
.alp-glow-1 {
  position: fixed; top: -200px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, var(--alp-glow-1) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  transition: background 0.3s;
}
.alp-glow-2 {
  position: fixed; bottom: -150px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, var(--alp-glow-2) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  transition: background 0.3s;
}

/* Topbar */
.alp-topbar {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: var(--alp-topbar-bg);
  border-bottom: 1px solid var(--alp-topbar-border);
  transition: background 0.25s, border-color 0.25s;
}
.alp-brand {
  display: flex; align-items: center; text-decoration: none;
}
.alp-logo-img {
  height: 36px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.2s;
}
.alp-brand:hover .alp-logo-img { opacity: 1; }
.alp-topbar-right { display: flex; align-items: center; gap: 10px; }
.alp-topbar-link {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px;
  background: rgba(99,179,237,0.12);
  border: 1px solid rgba(99,179,237,0.25);
  color: #90cdf4;
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: all 0.15s; white-space: nowrap;
}
.alp-topbar-link:hover { background: rgba(99,179,237,0.22); border-color: rgba(99,179,237,0.4); color: #bee3f8; text-decoration: none; }
.alp-topbar-link .material-icons-round { font-size: 20px; }

.alp-theme-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(251,191,36,0.13);
  border: 1px solid rgba(251,191,36,0.32);
  color: #fbbf24;
  cursor: pointer; transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.alp-theme-btn:hover { background: rgba(251,191,36,0.24); border-color: rgba(251,191,36,0.5); color: #fde68a; }
.alp-theme-btn .material-icons-round { font-size: 22px; }
[data-theme="light"] .alp-theme-btn {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.3);
  color: #6366f1;
}
[data-theme="light"] .alp-theme-btn:hover {
  background: rgba(99,102,241,0.22);
  border-color: rgba(99,102,241,0.5);
  color: #4338ca;
}

.alp-lang-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  background: var(--alp-lang-bg);
  border: 1px solid var(--alp-lang-border);
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--alp-lang-color);
  cursor: pointer; transition: all 0.15s;
}
.alp-lang-btn:hover { background: var(--alp-lang-hover-bg); color: var(--alp-lang-hover-color); }
.alp-lang-btn .material-icons-round { font-size: 15px; }
.alp-flag-img { width: 20px; height: 13px; border-radius: 2px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Page main (centered flex col) */
.alp-main {
  position: relative; z-index: 10;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px 40px;
}

/* Intro eyebrow + heading */
.alp-intro { text-align: center; margin-bottom: 24px; }
.alp-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--alp-eyebrow-bg);
  border: 1px solid var(--alp-eyebrow-border);
  border-radius: 20px; padding: 4px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--alp-eyebrow-color);
  margin-bottom: 12px; transition: all 0.25s;
}
.alp-eyebrow .material-icons-round { font-size: 12px; }
.alp-intro h1 {
  font-size: 26px; font-weight: 800; color: var(--alp-heading);
  letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 6px;
  transition: color 0.25s;
}
.alp-intro p { font-size: 14px; color: var(--alp-sub); transition: color 0.25s; }

/* Login card */
.alp-card {
  width: 100%; max-width: 500px;
  background: var(--alp-card);
  border-radius: 16px;
  border: 1px solid var(--alp-border);
  box-shadow: var(--alp-card-shadow);
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.alp-card-head {
  padding: 32px 40px 28px;
  border-bottom: 1px solid var(--alp-border);
  background: var(--alp-card-head);
  display: flex; align-items: flex-start; gap: 16px;
  transition: background 0.25s, border-color 0.25s;
}
.alp-card-head-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(185,28,28,0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.alp-card-head-icon .material-icons-round { font-size: 28px; color: #b91c1c; }
.alp-card-head-text h2 {
  font-size: 24px; font-weight: 700; color: var(--alp-text);
  letter-spacing: -0.3px; margin-bottom: 4px; transition: color 0.25s;
}
.alp-card-head-text p { font-size: 15px; color: var(--alp-text-muted); transition: color 0.25s; }

.alp-card-body { padding: 32px 40px 40px; }

/* Override lf-* inside alp card so they always use light-card colors */
.alp-card-body .lf-input {
  background: var(--alp-input-bg) !important;
  border-color: var(--alp-input-border) !important;
  color: var(--alp-text) !important;
  font-size: 16px !important;
  padding: 15px 18px 15px 50px !important;
  border-radius: 11px !important;
}
.alp-card-body .lf-input:focus {
  border-color: var(--alp-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(185,28,28,0.1) !important;
}
.alp-card-body .lf-input::placeholder { color: var(--alp-placeholder) !important; }
.alp-card-body .lf-label {
  color: var(--alp-text-sec) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
.alp-card-body .lf-icon { color: var(--alp-text-muted) !important; font-size: 22px !important; }

/* BankID button in alp card */
.alp-card-body .lf-bankid-btn {
  padding: 16px 20px !important;
  font-size: 17px !important;
  border-radius: 12px !important;
  margin-bottom: 12px;
  gap: 12px !important;
}
.alp-card-body .lf-bankid-logo { height: 28px !important; }

/* Submit button */
.alp-card-body .lf-submit {
  padding: 17px 20px !important;
  font-size: 17px !important;
  border-radius: 12px !important;
  gap: 10px !important;
}
.alp-card-body .lf-submit .material-icons-round { font-size: 22px !important; }

/* Divider in alp card */
.alp-card-body .lf-eller-divider {
  margin: 22px 0 !important;
  font-size: 14px !important;
  color: #111827 !important;
  font-weight: 600 !important;
}
.alp-card-body .lf-eller-divider::before,
.alp-card-body .lf-eller-divider::after {
  background: #111827 !important;
  height: 1.5px !important;
}

/* Remember + forgot row */
.alp-card-body .lf-remember-label {
  font-size: 15px !important;
  color: var(--alp-text-sec) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  position: relative !important;
}
.alp-card-body .lf-remember-label input[type="checkbox"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 17px !important; height: 17px !important;
  margin: 0 !important; padding: 0 !important;
  border: 2px solid #c8ccd4 !important;
  border-radius: 4px !important;
  background: #f9fafb !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: border-color 0.15s, background 0.15s !important;
  box-sizing: border-box !important;
}
.alp-card-body .lf-remember-label input[type="checkbox"]:checked {
  background: #4b7cf3 !important;
  border-color: #4b7cf3 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px !important;
}
.alp-card-body .lf-link { font-size: 14.5px !important; }
.alp-card-body .lf-register-row {
  font-size: 15px !important;
  color: var(--alp-text-muted) !important;
}

/* Trust row */
.alp-trust-row {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin-top: 20px; flex-wrap: wrap;
}
.alp-trust-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--alp-trust-color); transition: color 0.25s;
}
.alp-trust-item .material-icons-round { font-size: 14px; color: var(--alp-trust-icon); }

/* Feature chips */
.alp-chip-strip {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px; margin-top: 28px; max-width: 680px; width: 100%; flex-wrap: wrap;
}
.alp-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--alp-chip-bg);
  border: 1px solid var(--alp-chip-border);
  border-radius: 12px; padding: 12px 16px;
  flex: 1; min-width: 140px; max-width: 185px;
  transition: background 0.25s, border-color 0.25s;
}
.alp-chip-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--alp-chip-icon-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.alp-chip-icon .material-icons-round { font-size: 16px; color: var(--alp-chip-icon); }
.alp-chip-text strong {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--alp-chip-strong); margin-bottom: 1px;
}
.alp-chip-text span { font-size: 11px; color: var(--alp-chip-span); }

/* ALP footer */
.alp-footer {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  border-top: 1px solid var(--alp-footer-border);
  transition: border-color 0.25s;
}
.alp-footer-copy { font-size: 12px; color: var(--alp-footer-copy); }
.alp-footer-links { display: flex; gap: 18px; }
.alp-footer-links a {
  font-size: 12px; color: var(--alp-footer-link); text-decoration: none;
  transition: color 0.15s;
}
.alp-footer-links a:hover { color: var(--alp-text); }

/* Language dropdown */
.alp-lang-wrap { position: relative; }
.alp-lang-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--alp-card); border: 1px solid var(--alp-border);
  border-radius: 10px; overflow: hidden; min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 100;
}
.alp-lang-dropdown.open { display: block; }
.alp-lang-option {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--alp-text); text-decoration: none;
  transition: background 0.12s;
}
.alp-lang-option:hover { background: var(--alp-card-head); }
.alp-lang-option.active { font-weight: 700; color: #b91c1c; }

/* Responsive */
@media (max-width: 960px) {
  .alp-card-head, .alp-card-body { padding-left: 32px; padding-right: 32px; }
  .alp-topbar { padding: 16px 24px; }
  .alp-footer { padding: 14px 24px; }
}
@media (max-width: 640px) {
  .alp-card-head { padding: 24px 20px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .alp-card-body { padding: 24px 20px 32px; }
  .alp-card-body .lf-input { font-size: 15px !important; }
  .alp-card-body .lf-bankid-btn, .alp-card-body .lf-submit { font-size: 15px !important; }
  .alp-chip-strip { max-width: 100%; }
  .alp-chip { max-width: 100%; }
  .alp-topbar { padding: 12px 16px; }
  .alp-footer { flex-direction: column; gap: 8px; text-align: center; padding: 12px 16px; }
  .alp-main { padding: 20px 12px 28px; }
  .alp-topbar-link span:not(.material-icons-round) { display: none; }
  .alp-topbar-link { padding: 7px 9px; }
}