/* =========================
   Three Stars – Dynamic Theme (Website + Desk)
   - Dynamic palettes
   - Bigger palette buttons (picker)
   - High-contrast text everywhere
   - Subtle DESK background shade
   ========================= */

/* ---------- Base tokens (fallbacks) ---------- */
:root{
  --bg:#0b1324; --panel:#111a33;
  --text-dark:#0f172a;       /* for light surfaces */
  --text-light:#eef3ff;      /* for dark surfaces */
  --muted-dark:#334155;      /* muted on light bg */
  --muted-light:#cfd7ff;     /* muted on dark bg */

  --g1:#4f7cff; --g2:#29c4a9;      /* gradients / accents */
  --primary:#4f7cff; --primary2:#29c4a9;
  --ring:rgba(79,124,255,.35); --border:rgba(123,146,255,.22);
}

/* Optional palette classes (works even if you don't add them) */
html.theme-ocean   { --g1:#4f7cff; --g2:#29c4a9; --primary:#4f7cff; --primary2:#29c4a9; }
html.theme-sunset  { --g1:#ff6b6b; --g2:#f7b267; --primary:#ff6b6b; --primary2:#f7b267; }
html.theme-aurora  { --g1:#8a5cf6; --g2:#00d4ff; --primary:#8a5cf6; --primary2:#00d4ff; }
html.theme-forest  { --g1:#16a34a; --g2:#22d3ee; --primary:#16a34a; --primary2:#22d3ee; }
html.theme-berry   { --g1:#ec4899; --g2:#6366f1; --primary:#ec4899; --primary2:#6366f1; }
html.theme-gold    { --g1:#f59e0b; --g2:#22c55e; --primary:#f59e0b; --primary2:#22c55e; }
html.theme-midnight{ --g1:#0ea5e9; --g2:#9333ea; --primary:#0ea5e9; --primary2:#9333ea; }

/* ============================================
   WEBSITE (public)
   - Dark canvas → use light text by default
   ============================================ */
body.web {
  background:
    radial-gradient(1200px 600px at 20% 0%,  color-mix(in srgb, var(--g1) 20%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 80% 10%, color-mix(in srgb, var(--g2) 20%, transparent), transparent 60%),
    var(--bg) !important;
  color: var(--text-light);
}
@media (prefers-reduced-motion: no-preference){
  body.web::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(1000px 460px at 15% 0%,  color-mix(in srgb, var(--g1) 30%, transparent), transparent 60%),
      radial-gradient(1000px 460px at 85% 8%, color-mix(in srgb, var(--g2) 30%, transparent), transparent 60%);
    opacity:.22; animation: ts-pan 18s ease-in-out infinite alternate;
  }
  @keyframes ts-pan{ from{transform:translate3d(-2%,0,0)} to{transform:translate3d(2%,0,0)} }
}

/* Navbar on Website (dark bar → light text) */
body.web .navbar,
body.web .navbar.navbar-light,
body.web .navbar.navbar-default {
  background: linear-gradient(90deg, #0f1730, var(--panel)) !important;
  border-bottom: 1px solid var(--border);
  color: var(--text-light) !important;
}
body.web .navbar .nav-link,
body.web .navbar .navbar-brand { color: var(--text-light) !important; }
body.web .navbar .nav-link:hover { color: var(--primary2) !important; }

/* Website cards and copy (dark panels → light text) */
.card, .web-list-item, .page-card, .blog-card{
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  border-radius:16px;
  color: var(--text-light);
}
a { color: var(--primary); } 
a:hover{ color: var(--primary2); text-decoration: none; }

/* Tables on Website */
.table { color: var(--text-light); }
.table thead th { border-bottom-color: color-mix(in srgb, #fff 15%, transparent); }
.table td, .table th { border-top-color: color-mix(in srgb, #fff 8%, transparent); }

/* Dropdowns (Website) */
body.web .dropdown-menu {
  background: #111a33 !important;
  border: 1px solid rgba(123,146,255,.22) !important;
}
body.web .dropdown-item { color: var(--text-light) !important; }
body.web .dropdown-item:hover,
body.web .dropdown-item:focus {
  background: rgba(79,124,255,.12) !important;
  color: #ffffff !important;
}

/* Buttons */
.btn-primary, .btn.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border:0; box-shadow: 0 6px 18px var(--ring);
  color:#fff;
}
.btn-outline-primary{ color:var(--primary2); border-color:var(--primary2); }
.btn-outline-primary:hover{ background:var(--primary2); color:#fff; }

/* Login card on Website (dark) */
body.web:has(form[action="/login"]) .page-card{
  background: color-mix(in srgb, var(--panel) 70%, black 0%);
  border: 1px solid var(--border);
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  border-radius:20px; color: var(--text-light);
}
body.web:has(form[action="/login"]) .btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border:0; box-shadow: 0 10px 26px var(--ring);
}

/* ===================================================
   DESK (backend)
   - Light canvas with soft shade → use dark text
   =================================================== */
body:not(.web){
  /* subtle colour shade behind white cards */
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--g1) 10%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 80% -5%,  color-mix(in srgb, var(--g2) 10%, transparent), transparent 60%),
    #f5f8ff !important;
  color: var(--text-dark);
}

/* Desk top bar (colourful) */
body:not(.web) .navbar{
  background: linear-gradient(90deg, color-mix(in srgb, var(--g1) 18%, #111a33), color-mix(in srgb, var(--g2) 18%, #0f1730)) !important;
  border-bottom: 1px solid var(--border);
}
body:not(.web) .navbar .nav-link,
body:not(.web) .navbar .navbar-brand { color:#eef3ff !important; }
body:not(.web) .navbar .nav-link:hover{ color:#ffffff !important; }

/* Desk content stays light → dark text for readability */
body:not(.web) .page-title, 
body:not(.web) .title-text, 
body:not(.web) .form-section .section-head, 
body:not(.web) .standard-sidebar, 
body:not(.web) .layout-main, 
body:not(.web) .list-row { color: var(--text-dark); }
.text-muted, .text-extra-muted, .text-secondary, .form-text, .help { color: var(--muted-dark)!important; }

/* Desk buttons */
body:not(.web) .btn-primary, 
body:not(.web) .btn.btn-primary, 
body:not(.web) .filter-button.active {
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  border:0 !important; color:#fff !important;
  box-shadow: 0 6px 16px var(--ring) !important;
}

/* Desk badges & indicators */
body:not(.web) .badge, 
body:not(.web) .indicator, 
body:not(.web) .indicator-pill{
  background: color-mix(in srgb, var(--g1) 20%, #ffffff00) !important;
  color: var(--text-dark) !important; border: 1px solid var(--border);
}

/* Desk lists & active sidebar */
body:not(.web) .sidebar-section .active, 
body:not(.web) .standard-sidebar .active {
  background: color-mix(in srgb, var(--g2) 16%, transparent);
  border-radius: 10px;
}
body:not(.web) .list-row:hover { background: color-mix(in srgb, var(--g1) 10%, transparent); }

/* Desk dropdowns */
body:not(.web) .dropdown-menu {
  background: #111a33 !important;
  border: 1px solid rgba(123,146,255,.22) !important;
}
body:not(.web) .dropdown-item { color: var(--text-light) !important; }
body:not(.web) .dropdown-item:hover, body:not(.web) .dropdown-item:focus {
  background: rgba(79,124,255,.12) !important; color:#ffffff !important;
}

/* Placeholders everywhere */
::placeholder { color: #8894b0 !important; } /* medium contrast */

/* ============================================================
   Dynamic Rounded Buttons (Desk sidebars + Website navbar)
   - Uses --g1 / --g2 so colours follow your current theme
   - DARKER default text inside chips (per request)
   ============================================================ */

/* Chip palette */
:root{
  --ts-chip-g1: var(--g1, #4f7cff);
  --ts-chip-g2: var(--g2, #29c4a9);
  --ts-chip-text: #ffffff;            /* text on hover/active */
  --ts-chip-text-dim: #0f172a;        /* DEFAULT darker text */
  --ts-chip-ring: rgba(79,124,255,.28);
  --ts-chip-bg: color-mix(in srgb, var(--ts-chip-g1) 18%, transparent);
  --ts-chip-bg-hover: linear-gradient(135deg, var(--ts-chip-g1), var(--ts-chip-g2));
  --ts-chip-border: color-mix(in srgb, var(--ts-chip-g1) 32%, transparent);
}

/* ---- DESK: LEFT MENU (v13/v14/v15) ---- */
.standard-sidebar a,
.standard-sidebar .standard-sidebar-item > a,
.standard-sidebar .desk-sidebar-item > a,
.workspace-sidebar .sidebar-item > a,
.workspace-sidebar .sidebar-item .item-anchor,
.desk-sidebar .desk-sidebar-item > a,
[class*="sidebar"] a.nav-link,
[class*="sidebar"] li > a {
  display:flex !important;
  align-items:center !important;
  gap:.55rem !important;
  padding:.50rem .80rem !important;
  margin:.20rem .22rem !important;
  border-radius:999px !important;
  background:var(--ts-chip-bg) !important;
  border:1px solid var(--ts-chip-border) !important;
  color:var(--ts-chip-text-dim) !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px var(--ts-chip-ring) !important;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease !important;

  /* UNIFORM length/height */
  box-sizing:border-box !important;
  width:100% !important;
  min-height:46px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* ensure nested bits inherit darker text */
.standard-sidebar a *, 
.workspace-sidebar .sidebar-item a *,
.desk-sidebar .desk-sidebar-item a *,
[class*="sidebar"] a.nav-link *,
[class*="sidebar"] li > a * { color: inherit !important; fill: currentColor !important; }

/* Hover / active */
.standard-sidebar a:hover,
.standard-sidebar .standard-sidebar-item > a:hover,
.workspace-sidebar .sidebar-item > a:hover,
.workspace-sidebar .sidebar-item .item-anchor:hover,
.desk-sidebar .desk-sidebar-item > a:hover,
[class*="sidebar"] a.nav-link:hover,
[class*="sidebar"] li > a:hover {
  background:var(--ts-chip-bg-hover) !important;
  color:var(--ts-chip-text) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 24px var(--ts-chip-ring) !important;
}
.standard-sidebar .active > a,
.standard-sidebar .standard-sidebar-item.active > a,
.workspace-sidebar .sidebar-item.active > a,
.desk-sidebar .desk-sidebar-item.active > a,
[class*="sidebar"] .active > a {
  background:var(--ts-chip-bg-hover) !important;
  color:var(--ts-chip-text) !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px var(--ts-chip-ring) !important;
}

/* Website navbar chips */
body.web .navbar .navbar-nav .nav-link{
  display:inline-flex !important; align-items:center !important;
  padding:.38rem .72rem !important; margin:.16rem .26rem !important;
  border-radius:999px !important; background:transparent !important;
  border:1px solid transparent !important; color:var(--text-light) !important;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease !important;
}
body.web .navbar .navbar-nav .nav-link:hover{
  background:var(--ts-chip-bg) !important; border-color:var(--ts-chip-border) !important;
  box-shadow:0 8px 18px var(--ts-chip-ring) !important; transform:translateY(-1px) !important;
}
body.web .navbar .navbar-nav .nav-link.active,
body.web .navbar .navbar-nav .show > .nav-link{
  background:var(--ts-chip-bg-hover) !important; border-color:transparent !important; color:#fff !important;
  box-shadow:0 12px 24px var(--ts-chip-ring) !important;
}

/* =================================================
   THEME PICKER (swatches) — bigger & clearer
   ================================================= */
.ts-picker{
  display:flex; gap:10px; align-items:center;
  margin-left:12px; z-index:2147483647;
}
.ts-swatch{
  width:34px; height:34px;            /* bigger buttons */
  border-radius:999px; cursor:pointer;
  border:2px solid #ffffff55; outline:none;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.ts-swatch:hover{ transform: translateY(-1px); }
.ts-swatch[aria-current="true"]{ outline:3px solid #fff; }

/* Keyboard focus ring */
.standard-sidebar a:focus-visible,
.workspace-sidebar .sidebar-item > a:focus-visible,
[class*="sidebar"] a:focus-visible,
body.web .navbar .navbar-nav .nav-link:focus-visible,
.ts-swatch:focus-visible {
  outline:2px solid #fff !important; outline-offset:2px !important;
}

/* =========================================================================
   BODY LISTS AS ROUNDED CHIPS (Desk main content)
   Same settings as left menu; darker default text; uniform length/height
   ========================================================================= */
body:not(.web) :is(
  .workspace .section-body,
  .desk-page .section-body,
  .links-widget,
  .links-section,
  .links-list,
  .module-body,
  .shortcut-list,
  .shortcut-widget-box,
  .widget-shortcut,
  .reports-list,
  .dashboard-list
) :is(a, .module-link) {
  display:flex !important;
  align-items:center !important;
  gap:.55rem !important;
  padding:.50rem .80rem !important;
  margin:.20rem .22rem !important;
  border-radius:999px !important;
  background:var(--ts-chip-bg) !important;
  border:1px solid var(--ts-chip-border) !important;
  color:var(--ts-chip-text-dim) !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px var(--ts-chip-ring) !important;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease !important;

  /* uniform width/height */
  box-sizing:border-box !important;
  width:100% !important;
  min-height:46px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* ensure nested spans/icons inherit darker default text in body chips */
body:not(.web) :is(
  .workspace .section-body,
  .desk-page .section-body,
  .links-widget,
  .links-section,
  .links-list,
  .module-body,
  .shortcut-list,
  .shortcut-widget-box,
  .widget-shortcut,
  .reports-list,
  .dashboard-list
) :is(a, .module-link) * { color: inherit !important; fill: currentColor !important; }

/* Hover/active same as left menu */
body:not(.web) :is(
  .workspace .section-body,
  .desk-page .section-body,
  .links-widget,
  .links-section,
  .links-list,
  .module-body,
  .shortcut-list,
  .shortcut-widget-box,
  .widget-shortcut,
  .reports-list,
  .dashboard-list
) :is(a, .module-link):hover {
  background:var(--ts-chip-bg-hover) !important;
  color:var(--ts-chip-text) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 24px var(--ts-chip-ring) !important;
}
body:not(.web) :is(
  .workspace .section-body,
  .desk-page .section-body,
  .links-widget,
  .links-section,
  .links-list,
  .module-body,
  .shortcut-list,
  .shortcut-widget-box,
  .widget-shortcut,
  .reports-list,
  .dashboard-list
) :is(.active > a, a.active, .module-link.active) {
  background:var(--ts-chip-bg-hover) !important;
  color:var(--ts-chip-text) !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px var(--ts-chip-ring) !important;
}

/* ======= PATCH (requested only) =========================================
   1) Force readable (dark) text in all chip states
   2) Remove all shadows from rounded tiles (normal/hover/active)
   3) Make "rest of desk items" tiles smaller (body chips only)
   ======================================================================= */

/* (1) Readable dark text everywhere in chips (overrides any light/white) */
.standard-sidebar a, 
.standard-sidebar a *, 
.workspace-sidebar .sidebar-item a, 
.workspace-sidebar .sidebar-item a *, 
.desk-sidebar .desk-sidebar-item a, 
.desk-sidebar .desk-sidebar-item a *, 
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(a, .module-link),
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(a, .module-link) * {
  color: #0f172a !important;  /* force darker label */
  fill: currentColor !important;
}

/* Keep hover/active text white only when highlighted */
.standard-sidebar a:hover,
.standard-sidebar .active > a,
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(a, .module-link):hover,
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(.active > a, a.active, .module-link.active){
  color:#ffffff !important;
}

/* (2) Remove all shadows from rounded tiles (even on hover/active) */
.standard-sidebar a,
.standard-sidebar a:hover,
.standard-sidebar .active > a,
.workspace-sidebar .sidebar-item a,
.workspace-sidebar .sidebar-item a:hover,
.workspace-sidebar .sidebar-item.active > a,
.desk-sidebar .desk-sidebar-item a,
.desk-sidebar .desk-sidebar-item a:hover,
.desk-sidebar .desk-sidebar-item.active > a,
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(a, .module-link),
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(a, .module-link):hover,
body:not(.web) :is(.workspace .section-body, .desk-page .section-body, .links-widget, .links-section, .links-list, .module-body, .shortcut-list, .shortcut-widget-box, .widget-shortcut, .reports-list, .dashboard-list) :is(.active > a, a.active, .module-link.active){
  box-shadow: none !important;
}

/* Keep height even when there is a submenu/caret/badge */
.standard-sidebar a,
.workspace-sidebar .sidebar-item a,
.desk-sidebar .desk-sidebar-item a{
  min-height: 46px !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.standard-sidebar a .badge,
.workspace-sidebar .sidebar-item a .badge,
.desk-sidebar .desk-sidebar-item a .badge,
.standard-sidebar a .icon,
.workspace-sidebar .sidebar-item a .icon,
.desk-sidebar .desk-sidebar-item a .icon,
.standard-sidebar a .collapse-indicator,
.workspace-sidebar .sidebar-item a .collapse-indicator,
.desk-sidebar .desk-sidebar-item a .collapse-indicator{
  flex: 0 0 auto !important;
}

/* (3) Smaller tiles ONLY for the body (rest of desk items) */
body:not(.web) :is(
  .workspace .section-body,
  .desk-page .section-body,
  .links-widget,
  .links-section,
  .links-list,
  .module-body,
  .shortcut-list,
  .shortcut-widget-box,
  .widget-shortcut,
  .reports-list,
  .dashboard-list
) :is(a, .module-link){
  min-height: 38px !important;      /* smaller tile height */
  padding: .35rem .70rem !important; /* tighter padding */
  font-size: .95rem !important;      /* slightly smaller label */
  border-radius: 999px !important;   /* keep rounded */
}