*{box-sizing:border-box}
:root{--bg:#eef3f7;--panel:#fff;--soft:#f7fbfd;--text:#122033;--muted:#5f7185;--line:#d8e4ef;--blue:#2f6df6;--cyan:#16b6e8;--green:#178a55;--red:#b91c1c;--shadow:0 18px 45px rgba(25,48,77,.12)}
body.theme-dark{--bg:#07111f;--panel:#101c2f;--soft:#15233a;--text:#eef6ff;--muted:#a9bad0;--line:#2a3c58;--blue:#4aa3ff;--cyan:#2bd1ff;--green:#43d98a;--red:#fca5a5;--shadow:0 18px 45px rgba(0,0,0,.24)}
body.theme-hybrid{--bg:#eaf4f7;--panel:#fff;--soft:#f4fbff;--text:#082033;--muted:#587086;--line:#cce1ef;--blue:#168fe3;--cyan:#1fb7ec;--green:#16a061;--shadow:0 18px 45px rgba(12,50,80,.12)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:#0b7dad}.cs-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.cs-side{background:var(--panel);border-right:1px solid var(--line);padding:22px;position:sticky;top:0;height:100vh;box-shadow:8px 0 30px rgba(25,48,77,.06)}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#1aa867,#2f6df6);display:grid;place-items:center;font-weight:900;color:#fff;box-shadow:0 0 18px rgba(47,109,246,.22)}.brand strong{display:block;font-size:20px}.brand span{color:var(--muted)}.cs-side nav{display:grid;gap:8px}.cs-side nav a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--text);background:var(--soft);border:1px solid transparent;font-weight:700}.cs-side nav a:hover,.cs-side nav a.active{background:#e9f6ff;border-color:#b8def5;color:#075e8d}.theme-dark .cs-side nav a:hover,.theme-dark .cs-side nav a.active{background:#182943;color:#eaf6ff;border-color:#33506f}.cs-main{padding:26px}.top{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:22px}.top h1{margin:0;font-size:28px}.version{color:var(--muted);font-weight:700}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}.stat{font-size:34px;font-weight:800;margin-top:8px}.muted{color:var(--muted)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:18px;overflow:hidden;border:1px solid var(--line)}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.table th{text-align:left;color:#0a567a;background:#edf7fc}.theme-dark .table th{background:#172944;color:#ccecff}.badge{display:inline-block;border-radius:999px;padding:5px 10px;background:#e9f8f0;color:var(--green);font-size:12px;font-weight:800}.badge.idle{background:#fff4df;color:#9b6500}.badge.success{background:#e9f8f0;color:#178a55}.badge.neutral{background:#e9f0ff;color:#2554b8}.badge.new{background:#edf7fc;color:#0a709b}.badge.danger{background:#fee2e2;color:#b91c1c}.btn,button{display:inline-block;border:0;border-radius:12px;background:#1fb7ec;color:#001724;text-decoration:none;font-weight:800;padding:10px 14px;cursor:pointer}.btn.secondary,button.secondary{background:#edf4fa;color:#14304a;border:1px solid #cce0ef}.danger{background:#fee2e2;color:#b91c1c}.form{max-width:860px}.form label{display:block;margin:12px 0 6px;color:var(--text);font-weight:700}.form input,.form textarea,.form select{width:100%;padding:11px;border-radius:10px;border:1px solid #c7d9e8;background:#fff;color:#122033}.theme-dark .form input,.theme-dark .form textarea,.theme-dark .form select{background:#0b1728;color:#eaf4ff;border-color:#2a3c58}.checkline{display:flex;align-items:center;gap:10px;margin:12px 0}.checkline input{width:auto}.code{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px;overflow:auto;color:var(--text)}.notice{padding:12px 14px;border-radius:14px;background:#fff9ec;border:1px solid #f0d294;margin-bottom:16px;color:#5e4200}.notice.success{background:#e9f8f0;border-color:#99e0b8;color:#116b42}.notice.error{background:#fee2e2;border-color:#fecaca;color:#991b1b}.refresh-note{margin:18px 0 0;padding:10px 12px;border-radius:12px;background:#eef9ff;border:1px solid #cbeafa;color:#24506d}.linkbutton{border:0;background:transparent;color:#0b7dad;font-weight:800;cursor:pointer;text-decoration:underline;padding:0 4px}.timeline{display:grid;gap:10px}.event{border-left:3px solid #1fb7ec;padding:8px 12px;background:var(--soft);border-radius:0 12px 12px 0}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}.login-card{width:min(430px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:24px}.login-card h1{margin-top:8px}.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.chat-log{display:grid;gap:10px;max-height:460px;overflow:auto;padding-right:8px}.chat-msg{padding:10px 12px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}.chat-msg.operator{border-left:4px solid var(--blue)}.chat-msg.visitor{border-left:4px solid var(--green)}.chat-meta{font-size:12px;color:var(--muted);margin-bottom:4px}.sound-panel{display:flex;gap:10px;align-items:center;flex-wrap:wrap}@media(max-width:900px){.cs-shell{display:block}.cs-side{position:static;width:auto;height:auto}.grid{grid-template-columns:1fr 1fr}.cs-main{padding:16px}}@media(max-width:600px){.grid{grid-template-columns:1fr}.table th,.table td{padding:9px}}


/* v0.4 quick sidebar controls */
.quick-menu-card{
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  background:var(--soft);
  border:1px solid var(--line);
}
.quick-title{
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
}
.quick-status{
  font-weight:900;
  margin-bottom:10px;
}
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-right:6px;
}
.dot.online{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.dot.offline{background:#94a3b8}
.quick-buttons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.quick-buttons.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.quick-buttons form{
  flex:1;
  margin:0;
}
.quick-buttons button{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  background:#e9eef7;
  color:#142033;
  border:1px solid rgba(100,116,139,.3);
}
.quick-buttons button.active{
  background:#16a34a;
  color:white;
  border-color:#12813c;
}
.quick-help{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}
body.sidebar-wood .cs-side{
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.10)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, rgba(0,0,0,.05) 3px 6px),
    linear-gradient(135deg, #5a371f, #8a5a2f 45%, #4a2e1e);
  color:#fff4e8;
  border-right-color:rgba(255,255,255,.20);
}
body.sidebar-wood .brand span,
body.sidebar-wood .quick-title,
body.sidebar-wood .quick-help{
  color:#f1d7bd;
}
body.sidebar-wood .cs-side nav a,
body.sidebar-wood .quick-menu-card{
  background:rgba(255,255,255,.10);
  color:#fff7ed;
  border-color:rgba(255,255,255,.16);
}
body.sidebar-wood .cs-side nav a:hover,
body.sidebar-wood .cs-side nav a.active{
  background:rgba(255,255,255,.20);
  color:#ffffff;
}
.preset-color-box{
  margin:12px 0 16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--soft);
}
.preset-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.preset-color{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.preset-color span{
  width:26px;
  height:26px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
}
.preset-color.selected{
  outline:2px solid var(--green);
  background:#e9f8f0;
}
.theme-dark .preset-color.selected{
  background:#113928;
}


/* v0.4.1 sidebar placement and softer wood */
.quick-utility-nav{
  display:grid;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.quick-utility-nav a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background:var(--soft);
  border:1px solid transparent;
  font-weight:700;
}
.quick-utility-nav a:hover,
.quick-utility-nav a.active{
  background:#e9f6ff;
  border-color:#b8def5;
  color:#075e8d;
}
.theme-dark .quick-utility-nav a:hover,
.theme-dark .quick-utility-nav a.active{
  background:#182943;
  color:#eaf6ff;
  border-color:#33506f;
}
body.sidebar-wood .cs-side{
  background:
    linear-gradient(180deg, rgba(13,24,38,.72), rgba(13,24,38,.78)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.028) 2px 5px),
    linear-gradient(135deg, #4a2f20, #6e472a 45%, #352216);
  color:#fff4e8;
  border-right-color:rgba(255,255,255,.18);
}
body.sidebar-wood .mark{
  box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.22);
}
body.sidebar-wood .cs-side nav a,
body.sidebar-wood .quick-utility-nav a,
body.sidebar-wood .quick-menu-card{
  background:rgba(255,255,255,.085);
  color:#fff8ef;
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(1px);
}
body.sidebar-wood .cs-side nav a:hover,
body.sidebar-wood .cs-side nav a.active,
body.sidebar-wood .quick-utility-nav a:hover,
body.sidebar-wood .quick-utility-nav a.active{
  background:rgba(255,255,255,.18);
  color:#ffffff;
  border-color:rgba(255,255,255,.24);
}
body.sidebar-wood .quick-buttons button{
  background:rgba(255,255,255,.14);
  color:#fff8ef;
  border-color:rgba(255,255,255,.18);
}
body.sidebar-wood .quick-buttons button.active{
  background:#16a34a;
  color:#fff;
  border-color:#22c55e;
}
body.sidebar-wood .quick-utility-nav{
  border-top-color:rgba(255,255,255,.20);
}


/* v0.4.2 sidebar fixes */
.side-widget{
  margin-top:18px;
  padding:14px;
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:16px;
}
.side-title{
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
  margin-bottom:10px;
}
.status-line{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:18px;
  margin-bottom:10px;
}
.dot{
  width:13px;
  height:13px;
  border-radius:999px;
  display:inline-block;
  background:#9ca3af;
  box-shadow:0 0 0 4px rgba(156,163,175,.16);
}
.dot.on{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.16);
}
.dot.off{
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.14);
}
.side-buttons,
.theme-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.side-buttons button,
.theme-buttons button,
.side-buttons a,
.theme-buttons a{
  border:1px solid var(--line);
  background:#edf4fa;
  color:#0f2237;
  border-radius:10px;
  padding:9px 10px;
  font-weight:900;
}
.side-buttons button.selected,
.theme-buttons button.selected,
.side-buttons a.selected,
.theme-buttons a.selected{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}
.side-widget p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
}
body.theme-dark .side-buttons button,
body.theme-dark .theme-buttons button,
body.theme-dark .side-buttons a,
body.theme-dark .theme-buttons a{
  background:#273448;
  color:#eef6ff;
  border-color:#42546e;
}
.setup-tools .btn{
  margin:4px 8px 4px 0;
}

/* Wood sidebar option */
body.theme-hybrid.sidebar-wood .cs-side,
body.sidebar-wood .cs-side{
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.04), rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg, #322a24 0, #3b322b 8px, #2a231f 16px);
  color:#fff;
}
body.theme-hybrid.sidebar-wood .cs-side .brand span,
body.sidebar-wood .cs-side .brand span,
body.theme-hybrid.sidebar-wood .side-title,
body.sidebar-wood .side-title,
body.theme-hybrid.sidebar-wood .side-widget p,
body.sidebar-wood .side-widget p{
  color:#f3dfc1;
}
body.theme-hybrid.sidebar-wood .cs-side nav a,
body.sidebar-wood .cs-side nav a,
body.theme-hybrid.sidebar-wood .side-widget,
body.sidebar-wood .side-widget{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
body.theme-hybrid.sidebar-wood .cs-side nav a.active,
body.sidebar-wood .cs-side nav a.active,
body.theme-hybrid.sidebar-wood .cs-side nav a:hover,
body.sidebar-wood .cs-side nav a:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}


/* v0.4.3 final sidebar quick controls */
.cs-side nav{
  display:grid !important;
  gap:8px !important;
  margin-bottom:18px !important;
}
.cs-side nav a{
  display:block !important;
  padding:12px 14px !important;
  border-radius:12px !important;
  text-decoration:none !important;
  font-weight:800 !important;
}
.side-widget{
  margin:18px 0 0 !important;
  padding:14px !important;
  border:1px solid var(--line) !important;
  background:var(--soft) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.side-title{
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  color:var(--muted) !important;
  font-weight:900 !important;
  font-size:13px !important;
  margin-bottom:10px !important;
}
.status-line{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  font-size:18px !important;
  margin:0 0 10px !important;
}
.dot{
  width:13px !important;
  height:13px !important;
  border-radius:999px !important;
  display:inline-block !important;
  background:#9ca3af !important;
  box-shadow:0 0 0 4px rgba(156,163,175,.16) !important;
}
.dot.on{
  background:#22c55e !important;
  box-shadow:0 0 0 4px rgba(34,197,94,.16) !important;
}
.dot.off{
  background:#ef4444 !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.14) !important;
}
.side-buttons,
.theme-buttons{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.side-buttons button,
.theme-buttons button,
.side-buttons a,
.theme-buttons a{
  width:100% !important;
  border:1px solid var(--line) !important;
  background:#edf4fa !important;
  color:#0f2237 !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  font-weight:900 !important;
  box-shadow:none !important;
  text-align:center !important;
}
.side-buttons button.selected,
.theme-buttons button.selected,
.side-buttons a.selected,
.theme-buttons a.selected{
  background:#16a34a !important;
  border-color:#16a34a !important;
  color:#fff !important;
}
.side-widget p{
  margin:8px 0 0 !important;
  color:var(--muted) !important;
  font-size:12px !important;
}
body.theme-dark .side-buttons button,
body.theme-dark .theme-buttons button,
body.theme-dark .side-buttons a,
body.theme-dark .theme-buttons a{
  background:#273448 !important;
  color:#eef6ff !important;
  border-color:#42546e !important;
}
body.theme-dark .side-buttons button.selected,
body.theme-dark .theme-buttons button.selected,
body.theme-dark .side-buttons a.selected,
body.theme-dark .theme-buttons a.selected{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
.setup-tools .btn{margin:4px 8px 4px 0}

/* Wood sidebar option */
body.sidebar-wood .cs-side{
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.04), rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg, #322a24 0, #3b322b 8px, #2a231f 16px) !important;
  color:#fff !important;
}
body.sidebar-wood .cs-side .brand span,
body.sidebar-wood .side-title,
body.sidebar-wood .side-widget p{
  color:#f3dfc1 !important;
}
body.sidebar-wood .cs-side nav a,
body.sidebar-wood .side-widget{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
}
body.sidebar-wood .cs-side nav a.active,
body.sidebar-wood .cs-side nav a:hover{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
body.sidebar-wood .side-buttons button,
body.sidebar-wood .theme-buttons button,
body.sidebar-wood .side-buttons a,
body.sidebar-wood .theme-buttons a{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.24) !important;
}
body.sidebar-wood .side-buttons button.selected,
body.sidebar-wood .theme-buttons button.selected,
body.sidebar-wood .side-buttons a.selected,
body.sidebar-wood .theme-buttons a.selected{
  background:#16a34a !important;
  border-color:#16a34a !important;
  color:#fff !important;
}


/* v0.4.4 action links */
.side-buttons a,
.theme-buttons a{
  display:block !important;
  text-decoration:none !important;
}


/* ============================================================
   MDW WebSuite v0.5.0 branding
   ============================================================ */
:root{
  --mdw-navy:#10243c;
  --mdw-navy2:#183958;
  --mdw-gold:#d4a24a;
  --mdw-gold-light:#f7dda0;
  --mdw-gold-dark:#9b6718;
  --mdw-panel:#ffffff;
}
.brand .mark{
  width:48px;
  height:34px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand .mark img{
  max-width:58px;
  max-height:36px;
  object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22));
}
.cs-side{
  background:linear-gradient(180deg,#10243c,#0b1728) !important;
}
.cs-side nav a.active,
.cs-side nav a:hover{
  background:rgba(212,162,74,.18) !important;
  border-color:rgba(212,162,74,.35) !important;
}
.btn,
button,
input[type="submit"]{
  border-radius:10px;
}
.form button,
.card button:not(.preset-color),
.btn{
  background:linear-gradient(180deg,var(--mdw-gold-light),var(--mdw-gold)) !important;
  color:#1b1407 !important;
  border:1px solid var(--mdw-gold-dark) !important;
  font-weight:900;
  box-shadow:0 6px 14px rgba(48,34,13,.13), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn.secondary,
button.secondary{
  background:#f8fafc !important;
  color:var(--mdw-navy) !important;
  border:1px solid #cbd5e1 !important;
  box-shadow:none !important;
}
.side-buttons a.selected,
.theme-buttons a.selected,
.quick-buttons button.active{
  background:linear-gradient(180deg,var(--mdw-gold-light),var(--mdw-gold)) !important;
  color:#1b1407 !important;
  border-color:var(--mdw-gold-dark) !important;
}
.dot.on{background:#15803d;box-shadow:0 0 0 4px rgba(21,128,61,.16)}
.notice.success{background:#fef7e6;border-color:#ead59c;color:#5f3d00}
.preset-color.selected{outline:2px solid var(--mdw-gold);background:#fff8e8}


/* ============================================================
   MDW WebSuite v0.5.1 logo/name fix
   ============================================================ */
.brand{
  align-items:center !important;
}
.brand .mark{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width:52px !important;
  height:34px !important;
  flex:0 0 52px !important;
  overflow:visible !important;
}
.brand .mark img{
  max-width:64px !important;
  max-height:38px !important;
  object-fit:contain !important;
  filter:none !important;
}
.brand strong{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
  font-weight:900 !important;
}
.brand span{
  color:#d7e4f2 !important;
}
.cs-side nav a{
  color:#f8fafc !important;
}
.cs-side nav a.active{
  color:#10243c !important;
}


/* ============================================================
   MDW WebSuite v0.5.2 automatic logo badge
   Purpose: keep customer-uploaded logos readable on dark sidebars.
   Default name: WebSuite, with MDW supplied by the logo mark.
   ============================================================ */

.brand{
  gap:11px !important;
}

.brand .mark{
  width:62px !important;
  height:42px !important;
  flex:0 0 62px !important;
  border-radius:12px !important;
  padding:5px 7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

/* Auto badge for dark/hybrid/wood sidebars */
.theme-dark .brand .mark,
.theme-hybrid .brand .mark,
.sidebar-wood .brand .mark{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,244,248,.92)) !important;
  border:1px solid rgba(212,162,74,.38) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.18) inset !important;
}

/* Light theme can keep a softer badge so any logo still works. */
.theme-light .brand .mark{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(31,48,68,.12) !important;
  box-shadow:0 4px 12px rgba(24,34,45,.08) !important;
}

.brand .mark img{
  max-width:54px !important;
  max-height:28px !important;
  object-fit:contain !important;
  filter:none !important;
}

.brand strong{
  font-size:18px !important;
  line-height:1.05 !important;
}

.brand span{
  margin-top:2px !important;
  font-size:14px !important;
  line-height:1.1 !important;
}


/* ============================================================
   MDW WebSuite v0.5.3 quick button fix
   Quick availability/theme controls now use POST forms.
   ============================================================ */
.side-buttons,
.theme-buttons{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.theme-buttons{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
}
.side-buttons form,
.theme-buttons form{
  margin:0 !important;
  flex:1 1 0 !important;
}
.side-buttons button,
.theme-buttons button{
  width:100% !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  cursor:pointer !important;
  background:#e9eef7 !important;
  color:#142033 !important;
  border:1px solid rgba(100,116,139,.35) !important;
  font-weight:900 !important;
  box-shadow:none !important;
}
.side-buttons button.selected,
.theme-buttons button.selected{
  background:linear-gradient(180deg,#f7dda0,#d4a24a) !important;
  color:#1b1407 !important;
  border-color:#9b6718 !important;
  box-shadow:0 5px 12px rgba(48,34,13,.15), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.side-buttons button:hover,
.theme-buttons button:hover{
  filter:brightness(1.04);
}


/* ============================================================
   MDW WebSuite v0.5.4 theme behavior fix
   Previous MDW branding rules were too strong and kept the
   sidebar/menu/buttons from visually changing with theme buttons.
   These rules restore visible theme changes while keeping the
   logo badge and MDW gold accent.
   ============================================================ */

/* Shared sidebar brand layout */
.brand{
  gap:11px !important;
  align-items:center !important;
}
.brand .mark{
  width:62px !important;
  height:42px !important;
  flex:0 0 62px !important;
  border-radius:12px !important;
  padding:5px 7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.brand .mark img{
  max-width:54px !important;
  max-height:28px !important;
  object-fit:contain !important;
  filter:none !important;
}
.brand strong{
  font-size:18px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}
.brand span{
  margin-top:2px !important;
  font-size:14px !important;
  line-height:1.1 !important;
}

/* HYBRID: dark professional sidebar, light work area */
body.theme-hybrid:not(.sidebar-wood) .cs-side{
  background:linear-gradient(180deg,#10243c,#0b1728) !important;
  color:#f8fafc !important;
  border-right-color:rgba(255,255,255,.10) !important;
}
body.theme-hybrid:not(.sidebar-wood) .brand .mark{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,244,248,.92)) !important;
  border:1px solid rgba(212,162,74,.38) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.20),0 0 0 1px rgba(255,255,255,.18) inset !important;
}
body.theme-hybrid:not(.sidebar-wood) .brand strong{color:#fff !important;}
body.theme-hybrid:not(.sidebar-wood) .brand span{color:#d7e4f2 !important;}
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a{
  color:#f8fafc !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid transparent !important;
}
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a:hover,
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a.active{
  background:rgba(212,162,74,.20) !important;
  border-color:rgba(212,162,74,.42) !important;
  color:#fff7df !important;
}

/* DARK: fully dark UI */
body.theme-dark .cs-side{
  background:linear-gradient(180deg,#07101f,#020617) !important;
  color:#eaf4ff !important;
  border-right-color:rgba(255,255,255,.12) !important;
}
body.theme-dark .brand .mark{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(231,238,246,.90)) !important;
  border:1px solid rgba(212,162,74,.42) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.14) inset !important;
}
body.theme-dark .brand strong{color:#fff !important;}
body.theme-dark .brand span{color:#cbd5e1 !important;}
body.theme-dark .cs-side nav a{
  color:#eaf4ff !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.035) !important;
}
body.theme-dark .cs-side nav a:hover,
body.theme-dark .cs-side nav a.active{
  background:rgba(212,162,74,.22) !important;
  border-color:rgba(212,162,74,.45) !important;
  color:#fff5d6 !important;
}

/* LIGHT: light sidebar/menu so it visibly changes */
body.theme-light .cs-side{
  background:linear-gradient(180deg,#ffffff,#eef5fb) !important;
  color:#10243c !important;
  border-right-color:#c7d9e8 !important;
}
body.theme-light .brand .mark{
  background:#ffffff !important;
  border:1px solid rgba(31,48,68,.14) !important;
  box-shadow:0 4px 12px rgba(24,34,45,.09) !important;
}
body.theme-light .brand strong{color:#10243c !important;}
body.theme-light .brand span{color:#475569 !important;}
body.theme-light .cs-side nav a{
  color:#10243c !important;
  background:#f3f8fc !important;
  border:1px solid rgba(31,48,68,.08) !important;
}
body.theme-light .cs-side nav a:hover,
body.theme-light .cs-side nav a.active{
  background:#fff8e8 !important;
  border-color:#d4a24a !important;
  color:#5f3d00 !important;
}

/* WOOD: keep the wood menu visibly different */
body.sidebar-wood .cs-side{
  background:
    linear-gradient(180deg,rgba(13,24,38,.70),rgba(13,24,38,.76)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 2px,rgba(0,0,0,.030) 2px 5px),
    linear-gradient(135deg,#4a2f20,#6e472a 45%,#352216) !important;
  color:#fff4e8 !important;
  border-right-color:rgba(255,255,255,.20) !important;
}
body.sidebar-wood .brand .mark{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,238,229,.92)) !important;
  border:1px solid rgba(212,162,74,.48) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.18) inset !important;
}
body.sidebar-wood .brand strong{color:#fff !important;}
body.sidebar-wood .brand span{color:#f1d7bd !important;}
body.sidebar-wood .cs-side nav a{
  background:rgba(255,255,255,.10) !important;
  color:#fff7ed !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
body.sidebar-wood .cs-side nav a:hover,
body.sidebar-wood .cs-side nav a.active{
  background:rgba(212,162,74,.25) !important;
  border-color:rgba(212,162,74,.46) !important;
  color:#fffbe9 !important;
}

/* Sidebar quick cards should follow the sidebar theme */
body.theme-light .side-widget{
  background:#ffffff !important;
  border:1px solid rgba(31,48,68,.12) !important;
  color:#10243c !important;
}
body.theme-light .side-title,
body.theme-light .side-widget p{
  color:#64748b !important;
}
body.theme-hybrid:not(.sidebar-wood) .side-widget,
body.theme-dark .side-widget{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
}
body.theme-hybrid:not(.sidebar-wood) .side-title,
body.theme-dark .side-title,
body.theme-hybrid:not(.sidebar-wood) .side-widget p,
body.theme-dark .side-widget p{
  color:#cbd5e1 !important;
}
body.sidebar-wood .side-widget{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff7ed !important;
}
body.sidebar-wood .side-title,
body.sidebar-wood .side-widget p{
  color:#f1d7bd !important;
}

/* Quick buttons: visible in all themes, selected gold. */
.side-buttons button,
.theme-buttons button{
  width:100% !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  cursor:pointer !important;
  background:#e9eef7 !important;
  color:#142033 !important;
  border:1px solid rgba(100,116,139,.35) !important;
  font-weight:900 !important;
  box-shadow:none !important;
}
body.theme-dark .side-buttons button,
body.theme-dark .theme-buttons button,
body.theme-hybrid:not(.sidebar-wood) .side-buttons button,
body.theme-hybrid:not(.sidebar-wood) .theme-buttons button,
body.sidebar-wood .side-buttons button,
body.sidebar-wood .theme-buttons button{
  background:rgba(255,255,255,.12) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.18) !important;
}
.side-buttons button.selected,
.theme-buttons button.selected,
body.theme-dark .side-buttons button.selected,
body.theme-dark .theme-buttons button.selected,
body.theme-hybrid:not(.sidebar-wood) .side-buttons button.selected,
body.theme-hybrid:not(.sidebar-wood) .theme-buttons button.selected,
body.sidebar-wood .side-buttons button.selected,
body.sidebar-wood .theme-buttons button.selected,
body.theme-light .side-buttons button.selected,
body.theme-light .theme-buttons button.selected{
  background:linear-gradient(180deg,#f7dda0,#d4a24a) !important;
  color:#1b1407 !important;
  border-color:#9b6718 !important;
  box-shadow:0 5px 12px rgba(48,34,13,.15),inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* Main action buttons stay MDW gold, but secondary stays neutral. */
.form button,
.card button:not(.preset-color):not(.secondary),
.btn:not(.secondary){
  background:linear-gradient(180deg,#f7dda0,#d4a24a) !important;
  color:#1b1407 !important;
  border:1px solid #9b6718 !important;
  font-weight:900 !important;
  box-shadow:0 6px 14px rgba(48,34,13,.13),inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.btn.secondary,
button.secondary,
.card button.secondary{
  background:#f8fafc !important;
  color:#10243c !important;
  border:1px solid #cbd5e1 !important;
  box-shadow:none !important;
}


/* ============================================================
   MDW WebSuite v0.5.5 admin button correction
   Public widget may use website gold, but admin/interface buttons
   should not all turn gold. Restore more natural Suite controls.
   ============================================================ */

/* Primary admin action buttons: suite blue/teal instead of gold */
.form button:not(.preset-color):not(.secondary),
.card button:not(.preset-color):not(.secondary),
.btn:not(.secondary){
  background:linear-gradient(180deg,#2ec7f3,#1098d4) !important;
  color:#062033 !important;
  border:1px solid #0879ad !important;
  font-weight:900 !important;
  box-shadow:0 6px 14px rgba(16,152,212,.18), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Secondary buttons remain neutral */
.btn.secondary,
button.secondary,
.card button.secondary,
.form button.secondary{
  background:#f8fafc !important;
  color:#10243c !important;
  border:1px solid #cbd5e1 !important;
  box-shadow:none !important;
}

/* Availability selected button: green for Online, gray for Offline */
.availability-widget .side-buttons button.selected{
  background:linear-gradient(180deg,#34d47b,#16a34a) !important;
  color:#ffffff !important;
  border-color:#12813c !important;
  box-shadow:0 5px 12px rgba(22,163,74,.18), inset 0 1px 0 rgba(255,255,255,.36) !important;
}
.availability-widget .side-buttons form:nth-child(2) button.selected{
  background:linear-gradient(180deg,#cbd5e1,#94a3b8) !important;
  color:#10243c !important;
  border-color:#64748b !important;
  box-shadow:none !important;
}

/* Theme selected button: blue/teal accent, not gold */
.theme-widget .theme-buttons button.selected{
  background:linear-gradient(180deg,#2ec7f3,#1098d4) !important;
  color:#062033 !important;
  border-color:#0879ad !important;
  box-shadow:0 5px 12px rgba(16,152,212,.18), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Normal quick buttons adapt to dark/light sidebars */
body.theme-dark .side-buttons button,
body.theme-dark .theme-buttons button,
body.theme-hybrid:not(.sidebar-wood) .side-buttons button,
body.theme-hybrid:not(.sidebar-wood) .theme-buttons button,
body.sidebar-wood .side-buttons button,
body.sidebar-wood .theme-buttons button{
  background:rgba(255,255,255,.12) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
body.theme-light .side-buttons button,
body.theme-light .theme-buttons button{
  background:#e9eef7 !important;
  color:#142033 !important;
  border-color:rgba(100,116,139,.35) !important;
  box-shadow:none !important;
}

/* Keep color preset selected state visible without making every admin button gold */
.preset-color.selected{
  outline:2px solid #1098d4 !important;
  background:#eef9ff !important;
}

/* The public widget color setting can still default to MDW website gold.
   This only changes admin buttons, not widget.js. */


/* ============================================================
   MDW WebSuite v0.5.6 updater and Charcoal label
   ============================================================ */
.badge.danger{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border:1px solid #fecaca !important;
}
.badge.success{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}
code{
  background:rgba(15,23,42,.07);
  padding:2px 6px;
  border-radius:7px;
}
.theme-dark code{
  background:rgba(255,255,255,.10);
}


/* ============================================================
   MDW WebSuite v0.5.8 remove gold from admin buttons
   Gold is reserved for public website/widget styling, not the
   WebSuite admin interface.
   ============================================================ */

/* Primary admin action buttons */
.form button:not(.preset-color):not(.secondary),
.card button:not(.preset-color):not(.secondary),
.btn:not(.secondary){
  background:linear-gradient(180deg,#2ec7f3,#1098d4) !important;
  color:#062033 !important;
  border:1px solid #0879ad !important;
  font-weight:900 !important;
  box-shadow:0 6px 14px rgba(16,152,212,.18), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Theme selected buttons */
.theme-widget .theme-buttons button.selected,
body.theme-dark .theme-widget .theme-buttons button.selected,
body.theme-hybrid:not(.sidebar-wood) .theme-widget .theme-buttons button.selected,
body.sidebar-wood .theme-widget .theme-buttons button.selected,
body.theme-light .theme-widget .theme-buttons button.selected{
  background:linear-gradient(180deg,#2ec7f3,#1098d4) !important;
  color:#062033 !important;
  border-color:#0879ad !important;
  box-shadow:0 5px 12px rgba(16,152,212,.18), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Availability keeps functional colors */
.availability-widget .side-buttons form:first-child button.selected,
body.theme-dark .availability-widget .side-buttons form:first-child button.selected,
body.theme-hybrid:not(.sidebar-wood) .availability-widget .side-buttons form:first-child button.selected,
body.sidebar-wood .availability-widget .side-buttons form:first-child button.selected,
body.theme-light .availability-widget .side-buttons form:first-child button.selected{
  background:linear-gradient(180deg,#34d47b,#16a34a) !important;
  color:#ffffff !important;
  border-color:#12813c !important;
  box-shadow:0 5px 12px rgba(22,163,74,.18), inset 0 1px 0 rgba(255,255,255,.36) !important;
}
.availability-widget .side-buttons form:nth-child(2) button.selected,
body.theme-dark .availability-widget .side-buttons form:nth-child(2) button.selected,
body.theme-hybrid:not(.sidebar-wood) .availability-widget .side-buttons form:nth-child(2) button.selected,
body.sidebar-wood .availability-widget .side-buttons form:nth-child(2) button.selected,
body.theme-light .availability-widget .side-buttons form:nth-child(2) button.selected{
  background:linear-gradient(180deg,#cbd5e1,#94a3b8) !important;
  color:#10243c !important;
  border-color:#64748b !important;
  box-shadow:none !important;
}

/* Charcoal selected nav/sidebar accent should be blue/teal too, not gold */
body.sidebar-wood .cs-side nav a:hover,
body.sidebar-wood .cs-side nav a.active,
body.theme-dark .cs-side nav a:hover,
body.theme-dark .cs-side nav a.active,
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a:hover,
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a.active{
  background:rgba(46,199,243,.18) !important;
  border-color:rgba(46,199,243,.38) !important;
  color:#e8fbff !important;
}
body.theme-light .cs-side nav a:hover,
body.theme-light .cs-side nav a.active{
  background:#eef9ff !important;
  border-color:#1098d4 !important;
  color:#062033 !important;
}

/* Logo badge border should be neutral/blue, not gold */
body.theme-dark .brand .mark,
body.theme-hybrid:not(.sidebar-wood) .brand .mark,
body.sidebar-wood .brand .mark{
  border-color:rgba(46,199,243,.30) !important;
}

/* Preset selected indicator blue/teal */
.preset-color.selected{
  outline:2px solid #1098d4 !important;
  background:#eef9ff !important;
}


/* ============================================================
   MDW WebSuite v0.5.9 green admin accent
   Admin interface now uses green as the main selected/action color.
   Gold remains only as a public widget color preset option.
   ============================================================ */

:root{
  --suite-green:#16a34a;
  --suite-green-light:#34d47b;
  --suite-green-dark:#12813c;
  --suite-green-soft:#eaf8f0;
}

/* Primary admin action buttons */
.form button:not(.preset-color):not(.secondary),
.card button:not(.preset-color):not(.secondary),
.btn:not(.secondary){
  background:linear-gradient(180deg,var(--suite-green-light),var(--suite-green)) !important;
  color:#ffffff !important;
  border:1px solid var(--suite-green-dark) !important;
  font-weight:900 !important;
  box-shadow:0 6px 14px rgba(22,163,74,.18), inset 0 1px 0 rgba(255,255,255,.36) !important;
}

/* Theme selected buttons use green now */
.theme-widget .theme-buttons button.selected,
body.theme-dark .theme-widget .theme-buttons button.selected,
body.theme-hybrid:not(.sidebar-wood) .theme-widget .theme-buttons button.selected,
body.sidebar-wood .theme-widget .theme-buttons button.selected,
body.theme-light .theme-widget .theme-buttons button.selected{
  background:linear-gradient(180deg,var(--suite-green-light),var(--suite-green)) !important;
  color:#ffffff !important;
  border-color:var(--suite-green-dark) !important;
  box-shadow:0 5px 12px rgba(22,163,74,.18), inset 0 1px 0 rgba(255,255,255,.36) !important;
}

/* Selected/hover sidebar navigation uses green */
body.sidebar-wood .cs-side nav a:hover,
body.sidebar-wood .cs-side nav a.active,
body.theme-dark .cs-side nav a:hover,
body.theme-dark .cs-side nav a.active,
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a:hover,
body.theme-hybrid:not(.sidebar-wood) .cs-side nav a.active{
  background:rgba(22,163,74,.20) !important;
  border-color:rgba(52,212,123,.38) !important;
  color:#edfff4 !important;
}
body.theme-light .cs-side nav a:hover,
body.theme-light .cs-side nav a.active{
  background:var(--suite-green-soft) !important;
  border-color:var(--suite-green) !important;
  color:#0f5130 !important;
}

/* Logo badge border should be neutral/green, not gold/blue */
body.theme-dark .brand .mark,
body.theme-hybrid:not(.sidebar-wood) .brand .mark,
body.sidebar-wood .brand .mark{
  border-color:rgba(52,212,123,.30) !important;
}
body.theme-light .brand .mark{
  border-color:rgba(22,163,74,.18) !important;
}

/* Preset color buttons: remove gold button background.
   The color swatch still shows MDW Gold as an available public widget color. */
.preset-color,
button.preset-color,
.card button.preset-color{
  background:#f8fafc !important;
  color:#10243c !important;
  border:1px solid #cbd5e1 !important;
  box-shadow:none !important;
  font-weight:900 !important;
}
.preset-color:hover,
button.preset-color:hover,
.card button.preset-color:hover{
  background:#eef7f1 !important;
  border-color:#16a34a !important;
}
.preset-color.selected,
button.preset-color.selected,
.card button.preset-color.selected{
  outline:2px solid var(--suite-green) !important;
  background:var(--suite-green-soft) !important;
  border-color:var(--suite-green) !important;
}

/* Preset color swatch stays visible */
.preset-color .swatch,
button.preset-color .swatch{
  box-shadow:0 0 0 1px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Setup tool buttons and other link-style buttons should follow green too */
.setup-tools a,
.card .setup-tools a{
  background:#f8fafc !important;
  color:#10243c !important;
  border:1px solid #cbd5e1 !important;
}
.setup-tools a:hover,
.card .setup-tools a:hover{
  background:var(--suite-green-soft) !important;
  border-color:var(--suite-green) !important;
  color:#0f5130 !important;
}

/* Notice success uses green */
.notice.success{
  background:#dcfce7 !important;
  border-color:#bbf7d0 !important;
  color:#166534 !important;
}


/* ============================================================
   MDW WebSuite v0.6.0 logout/sidebar and widget polish
   ============================================================ */
.cs-side{
  display:flex !important;
  flex-direction:column !important;
}
.side-bottom{
  margin-top:auto !important;
  padding:14px 0 0 !important;
}
.logout-link{
  display:block !important;
  text-align:center !important;
  padding:11px 14px !important;
  border-radius:12px !important;
  text-decoration:none !important;
  font-weight:900 !important;
  background:rgba(255,255,255,.10) !important;
  color:#f8fafc !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.logout-link:hover{
  background:rgba(22,163,74,.20) !important;
  border-color:rgba(52,212,123,.38) !important;
}
body.theme-light .logout-link{
  background:#f3f8fc !important;
  color:#10243c !important;
  border-color:rgba(31,48,68,.10) !important;
}
body.theme-light .logout-link:hover{
  background:#eaf8f0 !important;
  border-color:#16a34a !important;
}


/* ============================================================
   MDW WebSuite v0.6.1 visitor filtering
   ============================================================ */
.visitor-filter-grid{
  display:grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr) auto;
  gap:12px;
  align-items:end;
}
.visitor-filter-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.visitor-id-line{
  font-size:12px;
  word-break:break-all;
}
@media(max-width:900px){
  .visitor-filter-grid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   MDW WebSuite v0.6.5 settings polish
   ============================================================ */
.settings-form{
  position:relative;
}
.floating-save{
  position:sticky;
  top:10px;
  z-index:20;
  display:flex;
  justify-content:flex-end;
  margin:-4px 0 10px;
  pointer-events:none;
}
.floating-save button{
  pointer-events:auto;
  box-shadow:0 10px 24px rgba(15,23,42,.18) !important;
}
.cleanup-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,1fr));
  gap:10px;
  margin:10px 0;
}
@media(max-width:760px){
  .cleanup-options{grid-template-columns:1fr;}
}