/*
 * GTS Dashboard — gts-dashboard.css
 * Version : v0.1.1
 * Company : R1
 * Clean rewrite — no legacy code
 */

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  --sb-w:      262px;
  --sb-w-col:  56px;
  --tb-h:      64px;
  --r:         10px;
  --rs:        6px;
  --t:         .2s ease;

  /* Brand */
  --accent:    #0284c7;
  --accent2:   #4f46e5;
  --green:     #059669;
  --amber:     #d97706;
  --red:       #dc2626;
}

/* ══ LIGHT (default) ══ */
:root, [data-theme="light"] {
  --bg:        #eff2fa;
  --surf:      #ffffff;
  --surf2:     #f7f9fe;
  --surf3:     #edf0f8;
  --bdr:       rgba(0,0,0,.08);
  --bdr2:      rgba(0,0,0,.14);
  --txt:       #0f172a;
  --txt2:      #475569;
  --txt3:      #94a3b8;
  --inp:       #eff2fa;
  --sh:        0 1px 3px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.04);
  --sh2:       0 4px 20px rgba(0,0,0,.1);
}

/* ══ DARK ══ */
[data-theme="dark"] {
  --bg:        #080b12;
  --surf:      #0e1220;
  --surf2:     #141928;
  --surf3:     #1b2236;
  --bdr:       rgba(255,255,255,.07);
  --bdr2:      rgba(255,255,255,.13);
  --txt:       #dde6f8;
  --txt2:      #7b8fb0;
  --txt3:      #3d4c6a;
  --inp:       #1b2236;
  --sh:        0 2px 8px rgba(0,0,0,.4);
  --sh2:       0 8px 40px rgba(0,0,0,.5);
  --accent:    #0ea5e9;
  --accent2:   #6366f1;
  --green:     #10b981;
  --amber:     #f59e0b;
  --red:       #ef4444;
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--txt);
  height: 100%;
  transition: background .3s, color .3s;
}
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { outline: none; }

/* ══════════════════════════════════════
   OUTER WRAPPER
══════════════════════════════════════ */
.gts-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ══════════════════════════════════════
   TOPBAR
══════════════════════════════════════ */
.gts-topbar {
  height: var(--tb-h);
  flex-shrink: 0;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  box-shadow: var(--sh);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 100;
  transition: background .3s, border-color .3s;
}
[data-theme="dark"] .gts-topbar {
  background: rgba(8,11,18,.92);
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.tb-left  { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Toggle button */
.tb-toggle {
  width: 32px; height: 32px;
  border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt2); flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.tb-toggle:hover { background: var(--surf3); color: var(--txt); }
.tb-toggle svg { width: 18px; height: 18px; }

/* Brand */
.tb-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.tb-logo {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.tb-logo svg { width: 20px; height: 20px; }
.tb-brand-text strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--txt); white-space: nowrap;
}
.tb-brand-text span {
  font-size: 10.5px; color: var(--txt3);
  font-family: 'DM Mono', monospace;
}

/* Breadcrumb */
.tb-crumb { font-size: 12.5px; color: var(--txt2); min-width: 0; }

/* Search */
.tb-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--inp);
  border: 1px solid var(--bdr2);
  border-radius: var(--rs);
  padding: 0 12px;
  height: 34px;
  width: 200px;
  flex-shrink: 0;
  transition: border-color var(--t), width var(--t);
}
.tb-search:focus-within {
  border-color: var(--accent);
  width: 240px;
  box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}
[data-theme="dark"] .tb-search:focus-within { box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.tb-search svg { flex-shrink: 0; color: var(--txt3); }
.tb-search input {
  background: none; border: none;
  color: var(--txt); font-size: 12.5px; width: 100%;
}
.tb-search input::placeholder { color: var(--txt3); }

/* Theme toggle */
.theme-toggle {
  display: flex; gap: 2px;
  background: var(--surf3);
  border: 1px solid var(--bdr2);
  border-radius: var(--rs);
  padding: 3px;
}
.tt {
  padding: 4px 12px; border-radius: 4px;
  font-size: 11px; font-weight: 500; color: var(--txt2);
  transition: all var(--t); cursor: pointer;
}
.tt.active { background: var(--accent); color: #fff; }
[data-theme="light"] .tt.active { box-shadow: 0 1px 4px rgba(2,132,199,.25); }

/* Topbar icon buttons */
.tb-icon {
  width: 32px; height: 32px; border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt2); transition: all var(--t);
}
.tb-icon:hover { background: var(--surf3); color: var(--txt); }

/* ══════════════════════════════════════
   MESSAGES
══════════════════════════════════════ */
.gts-messages { flex-shrink: 0; }
.gts-messages .alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 20px; font-size: 13px; border: none;
  border-bottom: 1px solid rgba(0,0,0,.05);
  border-left: 3px solid;
}
.gts-messages .alert-success { background: rgba(5,150,105,.06); border-color: var(--green); }
.gts-messages .alert-warning,
.gts-messages .alert-notice  { background: rgba(217,119,6,.06);  border-color: var(--amber); }
.gts-messages .alert-danger,
.gts-messages .alert-error   { background: rgba(220,38,38,.06);  border-color: var(--red); }
.gts-messages .alert-info    { background: rgba(2,132,199,.06);  border-color: var(--accent); }
.gts-messages .alert p { color: var(--txt); margin: 0; font-size: 13px; }
.gts-messages .btn-close { margin-left: auto; background: none; border: none; color: var(--txt3); cursor: pointer; }

/* ══════════════════════════════════════
   APP BODY ROW  (sidebar + main)
══════════════════════════════════════ */
.gts-body-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.gts-sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  background: var(--surf);
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--t), background .3s, border-color .3s;
  box-shadow: var(--sh);
}
.gts-sidebar::-webkit-scrollbar { width: 3px; }
.gts-sidebar::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 3px; }

/* Collapsed */
.gts-body-row.collapsed .gts-sidebar { width: var(--sb-w-col); }
.gts-body-row.collapsed .uc-info,
.gts-body-row.collapsed .uc-badge,
.gts-body-row.collapsed .sb-nav-label,
.gts-body-row.collapsed .nav-badge,
.gts-body-row.collapsed .sb-build,
.gts-body-row.collapsed .sb-foot-item span,
.gts-body-row.collapsed .nav-lbl { display: none !important; }
.gts-body-row.collapsed .uc-top    { padding: 8px; justify-content: center; }
.gts-body-row.collapsed .uc-expand { display: none; }
.gts-body-row.collapsed .sb-nav-item { justify-content: center; padding: 10px; }
.gts-body-row.collapsed .sb-nav-item::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--surf3); color: var(--txt);
  border: 1px solid var(--bdr2);
  padding: 4px 10px; border-radius: var(--rs);
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s; z-index: 400;
  box-shadow: var(--sh);
}
.gts-body-row.collapsed .sb-nav-item:hover::after { opacity: 1; }
.gts-body-row.collapsed .sb-foot { padding: 8px 5px; }
.gts-body-row.collapsed .sb-foot-item { justify-content: center; padding: 8px; }

/* ══ USER CARD ══ */
.uc {
  margin: 12px 10px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--rs);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--t);
}
.uc:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2,132,199,.08); }
[data-theme="dark"] .uc:hover { box-shadow: 0 0 0 3px rgba(14,165,233,.08); }

.uc-top {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
}
.uc-av-wrap { position: relative; flex-shrink: 0; }
.uc-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #fff;
  border: 2.5px solid var(--surf); transition: border-color var(--t);
}
.uc:hover .uc-av { border-color: var(--accent); }
.uc-pip {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); border: 2.5px solid var(--surf2);
  animation: pip 2.5s infinite;
}
@keyframes pip { 0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.4)} 70%{box-shadow:0 0 0 5px transparent} }
[data-theme="dark"] .uc-pip { animation: pip-d 2.5s infinite; }
@keyframes pip-d { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)} 70%{box-shadow:0 0 0 5px transparent} }

.uc-info { flex: 1; min-width: 0; }
.uc-name { font-size: 13px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-role { font-size: 11px; color: var(--txt2); margin-top: 2px; }
.uc-badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px;
  background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Expand */
.uc-expand {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
  border-top: 0px solid var(--bdr);
}
.uc:hover .uc-expand { grid-template-rows: 1fr; border-top-width: 1px; }
.uc-expand-inner { overflow: hidden; }
.uc-rows { padding: 10px 13px 2px; }
.uc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--bdr); font-size: 11.5px;
}
.uc-row:last-child { border-bottom: none; }
.uc-k { color: var(--txt3); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.uc-v { color: var(--txt2); font-family: 'DM Mono', monospace; font-size: 11px; }
.uc-perm {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600;
  background: rgba(79,70,229,.08); color: var(--accent2); border: 1px solid rgba(79,70,229,.18);
}
[data-theme="dark"] .uc-perm { background: rgba(99,102,241,.12); color: #818cf8; border-color: rgba(99,102,241,.25); }
.uc-online { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 11.5px; }
.uc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pip 2.5s infinite; }
.uc-actions { display: flex; gap: 6px; padding: 9px 13px 11px; }
.uc-btn {
  flex: 1; padding: 6px 0; border-radius: var(--rs);
  font-size: 11.5px; font-weight: 500; border: 1px solid var(--bdr2);
  background: var(--surf); color: var(--txt2);
  transition: all var(--t); text-align: center;
}
.uc-btn:hover { background: var(--surf3); color: var(--txt); border-color: var(--accent); }
.uc-btn-out:hover { background: rgba(220,38,38,.06); color: var(--red); border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .uc-btn-out:hover { background: rgba(239,68,68,.1); }

/* ══ NAV ══ */
.sb-nav { flex: 1; padding: 4px 8px 8px; overflow: hidden; min-width: 0; }
.sb-nav-section { margin-bottom: 12px; }
.sb-nav-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--txt3); padding: 0 10px; margin-bottom: 2px;
}
.sb-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--rs);
  font-size: 13px; color: var(--txt2);
  cursor: pointer; transition: background var(--t), color var(--t);
  position: relative; user-select: none;
  min-width: 0; overflow: hidden;
}
.sb-nav-item:hover  { background: var(--surf3); color: var(--txt); }
.sb-nav-item.active { background: rgba(2,132,199,.07); color: var(--accent); font-weight: 500; }
[data-theme="dark"] .sb-nav-item.active { background: rgba(14,165,233,.1); }
.sb-nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav-icon { width: 18px; text-align: center; flex-shrink: 0; opacity: .6; transition: opacity var(--t); font-size: 14px; line-height: 1; }
.sb-nav-item.active .nav-icon,
.sb-nav-item:hover .nav-icon { opacity: 1; }
.nav-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-badge {
  margin-left: auto; padding: 1px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 600;
}
.nav-badge.red  { background: rgba(220,38,38,.08); color: var(--red); border: 1px solid rgba(220,38,38,.15); }
.nav-badge.sky  { background: rgba(2,132,199,.08); color: var(--accent); border: 1px solid rgba(2,132,199,.18); }
[data-theme="dark"] .nav-badge.red { background: rgba(239,68,68,.12); }
[data-theme="dark"] .nav-badge.sky { background: rgba(14,165,233,.12); }

/* Raw Joomla menu links */
.sb-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--rs);
  font-size: 13px; color: var(--txt2);
  text-decoration: none; width: 100%;
  transition: background var(--t), color var(--t); position: relative;
  min-width: 0; overflow: hidden;
}
.sb-nav a:hover { background: var(--surf3); color: var(--txt); }
.sb-nav li.active > a,
.sb-nav a.active {
  background: rgba(2,132,199,.07); color: var(--accent); font-weight: 500;
}
[data-theme="dark"] .sb-nav li.active > a,
[data-theme="dark"] .sb-nav a.active { background: rgba(14,165,233,.1); }
.sb-nav ul { list-style: none; padding: 0; margin: 0; }
.sb-nav ul li { margin: 1px 0; }

/* Sidebar footer */
.sb-foot {
  padding: 10px 10px 12px;
  border-top: 1px solid var(--bdr); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sb-foot-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--rs);
  font-size: 12.5px; color: var(--txt2);
  cursor: pointer; transition: all var(--t);
}
.sb-foot-item:hover { background: var(--surf3); color: var(--txt); }
.sb-build {
  display: flex; justify-content: space-between;
  padding: 4px 10px;
  font-size: 10.5px; color: var(--txt3);
  font-family: 'DM Mono', monospace;
}
.sb-ver { color: var(--accent); }

/* ══════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════ */
.gts-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.gts-main::-webkit-scrollbar { width: 4px; }
.gts-main::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 4px; }

.pos-content-top    { border-bottom: 1px solid var(--bdr); padding: 10px 20px; background: var(--surf); }
.pos-content-header { padding: 16px 20px 0; }
.pos-toolbar        { margin-bottom: 4px; }
.pos-pre-content    { margin-bottom: 8px; }
.pos-pre-debug      { margin-top: 8px; }
.pos-pre-bottom     { border-top: 1px solid var(--bdr); padding: 16px 20px; }

.main-row {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 20px;
  gap: 20px;
}
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.main-component { min-width: 0; }
.main-right {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 14px;
}
/* main-chat removed — chat is now the sliding panel */

.bottom-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; padding: 0 20px 16px;
  border-top: 1px solid var(--bdr);
}

/* Footer */
.gts-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--bdr);
  font-size: 11.5px; color: var(--txt3);
  font-family: 'DM Mono', monospace;
  background: var(--surf); flex-shrink: 0;
}
.fs  { color: var(--bdr2); }
.fv  { color: var(--accent); }
.fr  { margin-left: auto; }

/* ══════════════════════════════════════
   COMPONENTS — Joomla output styling
══════════════════════════════════════ */

/* Headings */
.main-component h1 { font-family:'DM Sans',sans-serif; font-size:20px; font-weight:700; color:var(--txt); margin-bottom:12px; }
.main-component h2 { font-family:'DM Sans',sans-serif; font-size:16px; font-weight:700; color:var(--txt); margin-bottom:10px; }
.main-component h3 { font-size:14px; font-weight:600; color:var(--txt); margin-bottom:8px; }
.main-component p  { font-size:13px; color:var(--txt2); line-height:1.65; margin-bottom:10px; }

/* Page header */
.main-component .page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--bdr); margin-bottom: 18px;
}
.main-component .page-header h1,
.main-component .page-header h2 { margin: 0; border: none; padding: 0; }

/* Buttons */
.main-component .btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: var(--rs);
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: all var(--t); border: none;
}
.main-component .btn-primary {
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; box-shadow: 0 1px 4px rgba(2,132,199,.25);
}
.main-component .btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.main-component .btn-secondary,
.main-component .btn-default {
  background: var(--surf2); border: 1px solid var(--bdr2); color: var(--txt2);
}
.main-component .btn-secondary:hover,
.main-component .btn-default:hover { color:var(--txt); border-color:var(--accent); }

/* Fieldsets → cards */
.main-component fieldset {
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r); background: var(--surf);
  box-shadow: var(--sh); padding: 0 !important;
  margin: 0 0 16px; overflow: hidden;
}
.main-component legend {
  display: block; float: none; width: 100%;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--txt); background: var(--surf2);
  border-bottom: 1px solid var(--bdr);
  padding: 11px 18px; margin: 0; border-radius: 0;
}

/* dl/dt/dd */
.main-component dl {
  display: grid; grid-template-columns: 180px 1fr;
  margin: 0; padding: 0 18px;
}
.main-component dt {
  font-size: 12px; font-weight: 600; color: var(--txt2);
  padding: 11px 16px 11px 0; border-bottom: 1px solid var(--bdr); margin: 0;
  display: flex; align-items: center;
  overflow-wrap: anywhere; word-break: normal;
}
.main-component dd {
  font-size: 13px; color: var(--txt);
  padding: 11px 0; border-bottom: 1px solid var(--bdr);
  margin: 0; display: flex; align-items: center;
  min-width: 0; overflow-wrap: anywhere; word-break: normal;
}
.main-component dt:last-of-type,
.main-component dd:last-of-type { border-bottom: none; }

/* Form rows */
.main-component .control-group,
.main-component .mb-3 {
  padding: 12px 18px; border-bottom: 1px solid var(--bdr); margin: 0;
}
.main-component .control-group:last-child,
.main-component .mb-3:last-child { border-bottom: none; }
.main-component label,
.main-component .control-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--txt2); margin-bottom: 5px;
}
.main-component input[type="text"],
.main-component input[type="email"],
.main-component input[type="password"],
.main-component input[type="url"],
.main-component input[type="number"],
.main-component select,
.main-component textarea {
  width: 100%; background: var(--inp); border: 1px solid var(--bdr2);
  border-radius: var(--rs); padding: 9px 12px; font-size: 13px;
  color: var(--txt); transition: border-color var(--t), box-shadow var(--t);
}
.main-component input:focus,
.main-component select:focus,
.main-component textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}
[data-theme="dark"] .main-component input:focus,
[data-theme="dark"] .main-component select:focus { box-shadow: 0 0 0 3px rgba(14,165,233,.1); }

/* Submit buttons */
.main-component button[type="submit"],
.main-component input[type="submit"] {
  padding: 9px 20px; border-radius: var(--rs);
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; border: none; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: opacity var(--t), transform var(--t);
}
.main-component button[type="submit"]:hover,
.main-component input[type="submit"]:hover { opacity:.9; transform:translateY(-1px); }

/* Input groups */
.main-component .input-group { display: flex; }
.main-component .input-group input {
  border-radius: var(--rs) 0 0 var(--rs); flex: 1; border-right: none;
}
.main-component .input-group .btn,
.main-component .input-group button:not([type="submit"]) {
  border-radius: 0 var(--rs) var(--rs) 0;
  border: 1px solid var(--bdr2); border-left: none;
  background: var(--surf3); color: var(--txt2);
  padding: 0 14px; font-size: 12px; cursor: pointer;
  display: flex; align-items: center;
}
.main-component .input-group .btn:hover { background: var(--surf2); color: var(--txt); }

/* Tables */
.main-component table { width: 100%; border-collapse: collapse; font-size: 13px; }
.main-component th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--txt3); padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--bdr); background: var(--surf2);
}
.main-component td { padding: 11px 14px; border-bottom: 1px solid var(--bdr); color: var(--txt); }
.main-component tr:last-child td { border-bottom: none; }
.main-component tr:hover td { background: var(--surf2); }

/* Alerts */
.main-component .alert {
  padding: 12px 16px; border-radius: var(--r); font-size: 13px;
  margin-bottom: 14px; border: 1px solid;
}
.main-component .alert-success { background:rgba(5,150,105,.06); border-color:rgba(5,150,105,.18); color:var(--green); }
.main-component .alert-warning { background:rgba(217,119,6,.06);  border-color:rgba(217,119,6,.18);  color:var(--amber); }
.main-component .alert-danger  { background:rgba(220,38,38,.06);  border-color:rgba(220,38,38,.18);  color:var(--red); }
.main-component .alert-info    { background:rgba(2,132,199,.06);  border-color:rgba(2,132,199,.18);  color:var(--accent); }
.main-component .alert p { color:var(--txt); margin:0; }

/* Checkboxes */
.main-component input[type="checkbox"],
.main-component input[type="radio"] { width:auto; accent-color:var(--accent); }

/* Toggle switches */
.main-component .toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.main-component .toggle input { opacity:0; width:0; height:0; position:absolute; }
.main-component .toggle-track { position:absolute; inset:0; background:var(--surf3); border:1px solid var(--bdr2); border-radius:22px; cursor:pointer; transition:all .2s; }
.main-component .toggle input:checked ~ .toggle-track { background:var(--accent); border-color:var(--accent); }
.main-component .toggle-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.main-component .toggle input:checked ~ .toggle-track ~ .toggle-thumb { transform:translateX(18px); }

/* Badges/pills */
.pill { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px; font-size:10.5px; font-weight:500; }
.pill.green  { background:rgba(5,150,105,.08);  color:var(--green);  border:1px solid rgba(5,150,105,.18); }
.pill.blue   { background:rgba(2,132,199,.08);  color:var(--accent); border:1px solid rgba(2,132,199,.18); }
.pill.yellow { background:rgba(217,119,6,.08);  color:var(--amber);  border:1px solid rgba(217,119,6,.18); }
.pill.red    { background:rgba(220,38,38,.08);  color:var(--red);    border:1px solid rgba(220,38,38,.18); }
.pill.gray   { background:var(--surf3); color:var(--txt2); border:1px solid var(--bdr2); }
[data-theme="dark"] .pill.green  { background:rgba(16,185,129,.1); }
[data-theme="dark"] .pill.blue   { background:rgba(14,165,233,.1); }
[data-theme="dark"] .pill.yellow { background:rgba(245,158,11,.1); }
[data-theme="dark"] .pill.red    { background:rgba(239,68,68,.1);  }

/* ══════════════════════════════════════
   GUEST MODE
══════════════════════════════════════ */
.guest-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 56px;
  transition: background .3s;
}

/* Auth card */
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  box-shadow: var(--sh2);
  overflow: hidden;
}

.auth-logo {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 26px 32px 0;
}
.auth-logo-mark {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.auth-logo-mark svg { width: 24px; height: 24px; }
.auth-logo strong {
  display: block; font-family:'DM Sans',sans-serif;
  font-size:16px; font-weight:700; color:var(--txt);
}
.auth-logo span { font-size:11px; color:var(--txt3); font-family:'DM Mono',monospace; }

/* Login card brand modes */
.auth-logo-wide {
  max-width: 70%;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.auth-logo-mode-wide { padding: 20px 32px 4px; }
.auth-logo-mode-text { padding: 22px 32px 6px; gap: 0; }
.auth-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-logo-mark:has(.auth-logo-img) {
  background: none;
  border-radius: 0;
  width: auto; height: auto;
  max-height: 48px;
}
.auth-logo-text { text-align: center; }
.auth-logo-text strong {
  display: block; font-family:'DM Sans',sans-serif;
  font-size:18px; font-weight:700; color:var(--txt);
}
.auth-logo-text span { font-size:11.5px; color:var(--txt3); font-family:'DM Mono',monospace; }

/* Tabs */
.auth-tabs {
  display: flex; padding: 18px 32px 0;
  border-bottom: 1px solid rgba(2,132,199,.12);
  margin-top: 18px;
}
[data-theme="dark"] .auth-tabs { border-bottom-color: rgba(14,165,233,.15); }
.auth-tab {
  flex: 1; padding: 10px 0;
  font-size: 13.5px; font-weight: 600;
  color: var(--txt2); text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t), border-color var(--t);
  text-decoration: none; display: block;
}
.auth-tab:hover { color: var(--txt); }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Form area */
.auth-form { padding: 22px 32px 28px; }

/* Hide Joomla page title inside auth card */
.auth-form .page-header,
.auth-form h1.page-title,
.auth-form .com-users-login .page-header,
.auth-form .com-users-registration h1,
.auth-form .com-users-registration h2:first-child { display: none !important; }

/* Form rows */
.auth-form .control-group,
.auth-form .mb-3,
.auth-form .form-group {
  padding: 0; border: none; margin-bottom: 14px;
}
.auth-form label,
.auth-form .control-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--txt2); margin-bottom: 5px;
}

/* Inputs */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="url"] {
  width: 100% !important; height: 42px !important;
  padding: 0 14px !important; font-size: 14px !important;
  background: var(--inp) !important; border: 1px solid var(--bdr2) !important;
  border-radius: var(--rs) !important; color: var(--txt) !important;
  outline: none !important; -webkit-appearance: none !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
  box-sizing: border-box !important;
}
.auth-form input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,.1) !important;
}
[data-theme="dark"] .auth-form input:focus { box-shadow: 0 0 0 3px rgba(14,165,233,.1) !important; }

/* Input group (show password) */
.auth-form .input-group { display: flex !important; width: 100% !important; }
.auth-form .input-group input {
  border-radius: var(--rs) 0 0 var(--rs) !important;
  border-right: none !important; flex: 1 !important;
}
.auth-form .input-group .btn,
.auth-form .input-group button:not([type="submit"]) {
  height: 42px !important; padding: 0 14px !important;
  border-radius: 0 var(--rs) var(--rs) 0 !important;
  border: 1px solid var(--bdr2) !important; border-left: none !important;
  background: var(--surf3) !important; color: var(--txt2) !important;
  font-size: 12px !important; white-space: nowrap !important;
  cursor: pointer !important; display: flex !important; align-items: center !important;
  flex-shrink: 0 !important;
}
.auth-form .input-group .btn:hover,
.auth-form .input-group button:not([type="submit"]):hover {
  background: var(--surf2) !important; color: var(--txt) !important;
}

/* Fieldset in auth */
.auth-form fieldset { border: none !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.auth-form legend {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  color: var(--txt3) !important; background: none !important;
  border: none !important; border-bottom: 1px solid rgba(2,132,199,.1) !important;
  padding: 0 0 6px !important; margin-bottom: 12px !important;
  width: 100% !important; float: none !important; border-radius: 0 !important;
}

/* Remember me */
.auth-form .form-check,
.auth-form .checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.auth-form .form-check input,
.auth-form .checkbox input { width: auto; accent-color: var(--accent); }
.auth-form .form-check-label,
.auth-form .checkbox label { font-size: 13px; color: var(--txt2); font-weight: 400; display: inline; margin: 0; }

/* Submit button */
.auth-form button[type="submit"],
.auth-form input[type="submit"],
.auth-form .btn-primary {
  width: 100% !important; height: 44px !important; padding: 0 !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: var(--rs) !important;
  background: linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  color: #fff !important; border: none !important; cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(2,132,199,.25) !important;
  display: block !important; margin-top: 8px !important;
  transition: opacity var(--t), transform var(--t) !important;
  -webkit-appearance: none !important; font-family: 'DM Sans', sans-serif !important;
}
.auth-form button[type="submit"]:hover,
.auth-form input[type="submit"]:hover,
.auth-form .btn-primary:hover { opacity:.9 !important; transform:translateY(-1px) !important; }

/* Passkey button */
.auth-form [id*="passkey"] button,
.auth-form .com-users-login__passkey button {
  width: 100%; height: 40px; padding: 0;
  font-size: 13px; background: var(--surf2);
  border: 1px solid var(--bdr2); border-radius: var(--rs);
  color: var(--txt2); cursor: pointer; margin-top: 8px; margin-bottom: 4px;
  transition: all var(--t);
}
.auth-form [id*="passkey"] button:hover { border-color: var(--accent); color: var(--txt); }

/* Links below form */
.auth-form .com-users-login__options,
.auth-form p { font-size: 12.5px; color: var(--txt2); text-align: center; margin-top: 10px; }
.auth-form a { color: var(--accent); }
.auth-form a:hover { text-decoration: underline; }

/* Password meter */
.auth-form [class*="password-strength"],
.auth-form .password-meter { height: 4px; border-radius: 4px; background: var(--surf3); margin-top: 8px; overflow: hidden; }
.auth-form h2, .auth-form h3 {
  font-size: 11px !important; font-weight: 500 !important; color: var(--txt3) !important;
  margin: 4px 0 !important; font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}
.auth-form .form-text,
.auth-form small { font-size: 11.5px; color: var(--green); margin-top: 4px; display: block; }
.auth-form .required, .auth-form .star { color: var(--red); }

/* Guest footer */
.guest-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 24px;
  font-size: 11.5px; color: var(--txt3);
  font-family: 'DM Mono', monospace;
  background: var(--surf); border-top: 1px solid var(--bdr);
  z-index: 200;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  .main-right { width: 240px; }
  .main-chat  { width: 260px; }
}
@media (max-width: 900px) {
  .main-row { flex-direction: column; }
  .main-right, .main-chat { width: 100%; }
  .bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gts-sidebar {
    position: fixed !important;
    top: var(--tb-h); left: 0; bottom: 0;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: var(--sb-w) !important;
  }
  .gts-body-row.mob-open .gts-sidebar { transform: translateX(0); }
  .gts-body-row.collapsed .gts-sidebar { transform: translateX(-100%); }
  .tb-search { display: none; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 4px; }

/* Chat panel styles moved to mod_gts_chat module */

/* ════════════════════════════════════════
   v0.2.6 STYLE FIXES
════════════════════════════════════════ */

/* ── 1. Topbar logout button ── */
.tb-logout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 600;
  color: var(--txt2);
  border: 1px solid var(--bdr2);
  border-radius: var(--rs);
  text-decoration: none;
  transition: all var(--t);
  white-space: nowrap;
  margin-left: 4px;
}
.tb-logout:hover {
  color: var(--red);
  border-color: rgba(220,38,38,.3);
  background: rgba(220,38,38,.05);
}
[data-theme="dark"] .tb-logout:hover {
  background: rgba(239,68,68,.08);
}

/* ── 2. Login page — smaller logo mark ── */
.auth-logo-mark {
  width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
}
.auth-logo-mark svg { width: 20px !important; height: 20px !important; }
.auth-logo strong { font-size: 15px !important; }
.auth-logo span { font-size: 10.5px !important; }

/* ── 3. Overall site — bump base sizes ── */
body { font-size: 14px; }
.main-component { font-size: 14px; }
.main-component p { font-size: 14px; }
.main-component td, .main-component dd { font-size: 14px; }

/* ── 4. Collapsed sidebar — wider + bigger icons ── */
:root { --sb-w-col: 72px; }
.gts-body-row.collapsed .gts-sidebar { width: 72px !important; }
.gts-body-row.collapsed .sb-nav-item {
  justify-content: center;
  padding: 12px 0 !important;
}
.gts-body-row.collapsed .nav-icon {
  font-size: 20px !important;
  width: 24px !important;
}
.gts-body-row.collapsed .uc-top {
  padding: 12px !important;
  justify-content: center;
}
.gts-body-row.collapsed .uc-av {
  width: 38px !important; height: 38px !important;
  font-size: 14px !important;
}

/* ── 5. Expanded sidebar nav rows — taller ── */
.sb-nav-item {
  padding: 12px 10px !important;
  font-size: 14px !important;
}
.sb-nav a {
  padding: 12px 10px !important;
  font-size: 14px !important;
}
.nav-icon { font-size: 20px !important; width: 22px !important; }

/* ── 6. Home always active — fix ── */
/* Remove active from items that are just the root/home
   when a deeper page is active */
.sb-nav-item.active:not(:only-child) {
  /* handled by JS — see gts-dashboard.js */
}

/* ── 7. Footer always at bottom ── */
.gts-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 150 !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}
/* Add padding to main so content doesn't hide behind fixed footer */
.gts-main { padding-bottom: 44px !important; }

/* ── 8. Subnav — match reference style ── */
/* Clean, bold text tabs, no section label clutter */
.gts-subnav {
  min-height: 50px !important;
  border-bottom: 1px solid var(--bdr) !important;
  background: var(--surf) !important;
}
.subnav-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--txt3) !important;
  text-transform: uppercase !important;
  padding: 0 16px 0 4px !important;
  border-right: 1px solid var(--bdr) !important;
  margin-right: 8px !important;
  font-family: 'DM Mono', monospace !important;
}
.subnav-links a,
.subnav-item {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--txt) !important;
  padding: 0 20px !important;
  letter-spacing: -.2px !important;
}
.subnav-links a:hover,
.subnav-item:hover { color: var(--accent) !important; background: none !important; }
.subnav-links a.active,
.subnav-item.active {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  background: none !important;
}

/* ── 8b. Full subnav base + Sign Out ──
   Relocated from gts-chat.css. The ENTIRE subnav bar styling (layout, link
   tabs, divider, scroll, and the Sign Out button) was left in the chat
   module's CSS when the chat panel was extracted (commit 927e8da), so any
   site without the chat module rendered the subnav/Sign Out unstyled. The
   template now owns the full base here; the tuned overrides above (font
   sizes, active underline, section label) still win on top via !important. */
.gts-subnav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--surf);
  padding: 0 20px;
  flex-shrink: 0;
  gap: 0;
  transition: background .3s, border-color .3s;
}
.subnav-links {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-links::-webkit-scrollbar { display: none; }
.gts-subnav-module {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.subnav-links a,
.subnav-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t), border-color var(--t);
}
.subnav-divider {
  width: 1px;
  background: var(--bdr2);
  flex-shrink: 0;
  margin: 10px 4px;
}
.subnav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 16px;
}
.subnav-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt2);
  border: 1px solid var(--bdr2);
  border-radius: var(--rs);
  text-decoration: none;
  transition: all var(--t);
  white-space: nowrap;
}
.subnav-logout:hover {
  color: var(--red);
  border-color: rgba(220,38,38,.3);
  background: rgba(220,38,38,.05);
}
[data-theme="dark"] .subnav-logout:hover {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.3);
}
@media (max-width: 768px) {
  .gts-subnav {
    flex-wrap: wrap;
    padding: 0 12px;
    min-height: auto;
  }
  .subnav-links { flex-wrap: wrap; }
  .subnav-right {
    width: 100%;
    justify-content: flex-end;
    padding: 8px 0;
    border-top: 1px solid var(--bdr);
  }
}

/* ── 9. Topbar — logo mark smaller ── */
.tb-logo {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important;
}
.tb-logo svg { width: 17px !important; height: 17px !important; }
.tb-brand-text strong { font-size: 13px !important; }
.tb-brand-text span { font-size: 10px !important; }


/* ── Custom logo image in topbar ── */
.tb-logo-img {
  max-height: calc(var(--tb-h) - 20px);
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* When using image, remove the fixed size box */
.tb-logo:has(.tb-logo-img) {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  padding: 0;
}

/* ── Brand modes: wide logo / text-only ── */
.tb-logo-wide {
  height: calc(var(--tb-h) - 26px);
  max-height: 30px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.tb-brand-mode-wide { gap: 0; }
.tb-brand-text-only {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.tb-brand-text-only strong { font-size: 14px !important; }
.tb-brand-text-only span { font-size: 10.5px !important; }
@media (max-width: 768px) {
  .tb-logo-wide { max-width: 170px; }
}

/* ── Passkey icon size fix ── */
.auth-form [id*="passkey"] svg,
.auth-form .com-users-login__passkey svg,
.auth-form [id*="passkey"] img,
.auth-form .com-users-login__passkey img {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Constrain the whole passkey section */
.auth-form [id*="passkey"],
.auth-form .com-users-login__passkey {
  display: block;
  width: 100%;
}

.auth-form [id*="passkey"] button,
.auth-form .com-users-login__passkey button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--surf2) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--rs) !important;
  color: var(--txt2) !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  transition: all var(--t) !important;
  overflow: hidden !important;
}
.auth-form [id*="passkey"] button:hover,
.auth-form .com-users-login__passkey button:hover {
  border-color: var(--accent) !important;
  color: var(--txt) !important;
  background: var(--surf3) !important;
}

/* Hide the raw text/label Joomla renders outside the button */
.auth-form [id*="passkey"] > *:not(button),
.auth-form .com-users-login__passkey > *:not(button) {
  display: none !important;
}

/* Guest page scroll fix — gts-wrap overflow:hidden clips long forms */
.gts-body.gts-guest-mode .gts-wrap {
  overflow-y: auto !important;
}
.guest-body {
  align-items: flex-start !important;
  min-height: calc(100vh - 44px) !important;
  padding: 32px 20px 80px !important;
}

/* Password match indicator */
.gts-pw-match {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  display: none !important;
}
.gts-pw-match.show { display: block !important; }
.gts-pw-match.match { color: var(--green, #16a34a) !important; }
.gts-pw-match.no-match { color: var(--red, #dc2626) !important; }

/* Fix 1: Passkey button — constrain oversized SVG icon */
.auth-form .controls button.btn-secondary,
.auth-form .controls [class*="plg_system_webauthn"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--surf2) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--rs) !important;
  color: var(--txt2) !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  transition: all var(--t) !important;
  box-sizing: border-box !important;
}
.auth-form .controls button.btn-secondary svg,
.auth-form .controls [class*="plg_system_webauthn"] svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  max-width: 18px !important;
  max-height: 18px !important;
}
.auth-form .controls button.btn-secondary:hover,
.auth-form .controls [class*="plg_system_webauthn"]:hover {
  border-color: var(--accent) !important;
  color: var(--txt) !important;
  background: var(--surf3) !important;
}

/* Fix 2: Password strength bar — full width */
.auth-form [class*="password-strength"],
.auth-form .password-meter,
.auth-form [id*="password-strength"],
.auth-form [id*="passwordStrength"] {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Fix 3: Auth inputs — remove rogue margin-top (email field 8px gap) */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="url"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Fix 4: Password input-group — input crushed to 29px by size attr + width:100% conflict */
body .auth-form .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
}
body .auth-form .input-group input[type="password"],
body .auth-form .input-group input[type="text"] {
  width: 1% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
body .auth-form .input-group button.btn.input-password-toggle {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 14px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-radius: 0 6px 6px 0 !important;
  border: 1px solid var(--bdr2) !important;
  border-left: none !important;
  font-size: 13px !important;
  background: var(--surf2) !important;
  color: var(--txt2) !important;
}
body .auth-form .input-group button.btn.input-password-toggle:hover {
  background: var(--surf) !important;
  color: var(--txt) !important;
}

/* Fix 5: Password strength meter — native <meter> element styled */
.auth-form meter {
  display: block !important;
  width: 100% !important;
  height: 6px !important;
  margin-top: 6px !important;
  border: none !important;
  border-radius: 6px !important;
  background: var(--surf3) !important;
  overflow: hidden !important;
}
.auth-form meter::-webkit-meter-bar {
  background: var(--surf3) !important;
  border: none !important;
  border-radius: 6px !important;
}
.auth-form meter::-webkit-meter-optimum-value {
  background: #16a34a !important;
  border-radius: 6px !important;
}
.auth-form meter::-webkit-meter-suboptimum-value {
  background: #f59e0b !important;
  border-radius: 6px !important;
}
.auth-form meter::-webkit-meter-even-less-good-value {
  background: #dc2626 !important;
  border-radius: 6px !important;
}
.auth-form [id^="password-"] {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}