/* ==========================================================
   Expert – main.css (MASTER)
   - Theme + layout
   - Navbar + background (glass)
   - Controls + tables
   - Modals
   - Dashboard (Calendar + Next events + CRM)
   - Calendar (global + dashboard overrides)
   - CRM (Customer modal, Contracts, Tasks)
   - Settings + CRM column DnD
   - Notes Rich Text Editor
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================
   Theme + Reset
   ========================================================== */

:root{
  color-scheme: light;

  /* Light matte-glass palette */
  --bg: #edf2f8;
  --surface: rgba(222, 230, 244, 0.62);
  --surface-2: rgba(212, 222, 239, 0.56);
  --text: #1f2430;
  --muted: rgba(31, 36, 48, 0.64);
  --border: rgba(90, 104, 132, 0.34);
  --border-2: rgba(77, 91, 118, 0.34);
  --shadow: 0 30px 68px rgba(36, 50, 84, 0.24);
  --shadow-soft: 0 16px 34px rgba(36, 50, 84, 0.20);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --focus: 0 0 0 4px rgba(95, 125, 212, 0.22);
  --accent: var(--token-color-primary);
  --accent-2: rgba(77,114,219,0.16);
  --glass-overlay: rgba(11, 16, 28, 0.56);
  --glass-modal: rgba(231, 238, 250, 0.74);
  --glass-modal-strong: rgba(238, 244, 254, 0.82);
  --glass-panel: rgba(238, 244, 254, 0.58);
  --glass-input: rgba(236, 242, 252, 0.86);
  --glass-shadow-lg: 0 34px 86px rgba(25, 36, 64, 0.34);
  --ui-motion-duration: 220ms;
  --ui-motion-ease: ease-in;
  --token-color-primary: #4d72db;
  --token-color-surface: rgba(222, 230, 244, 0.62);
  --token-color-text: #1f2430;
  --token-space-sm: 8px;
  --token-space-md: 12px;
  --token-space-lg: 16px;
  --token-radius-sm: 10px;
  --token-radius-md: 12px;
  --token-radius-lg: 16px;
  --token-shadow-soft: 0 16px 34px rgba(36, 50, 84, 0.20);
  --token-font-size-base: 14px;

  /* Calendar */
  --cal-gridline: rgba(0,0,0,0.10);
  --cal-gridline-soft: rgba(0,0,0,0.08);
  --cal-kw-w: 64px;          /* KW column width (calendar view) */
  --cal-cell-h: 92px;        /* default month cell height */
  --cal-cell-pad-top: 22px;  /* space for date badge */

  /* Dashboard */
  --dash-cal-h: clamp(380px, 42vh, 500px); /* dashboard calendar + next events height */
  --page-pad-inline: clamp(14px, 2.2vw, 40px);
  --app-max-width: 1920px;
  --crm-right-col-w: clamp(290px, 23vw, 390px);
  --ws-sidebar-w: clamp(220px, 15vw, 300px);
  --modal-gap-pad: clamp(12px, 1.1vw, 20px);

  /* Calendar swap animation hook (deadlines.js can toggle classes) */
  --cal-swap-dur: 160ms;
  --cal-swap-ease: ease-in;
  --cal-swap-shift: 10px;
}

*{ box-sizing: border-box; }

html,
body{
  max-width: 100%;
  overflow-x: clip;
}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--token-font-size-base);
  font-weight: 500;
  margin: 0;
  background: var(--bg);
  color: var(--token-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; }
h1,h2,h3{ margin: 0; }
.small{ font-size: 14px; color: var(--muted); }

h1,h2,h3,
.section-title,
.modal-title,
.navbar,
.nav-brand,
.login-brand-title,
.login-head h1{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

[hidden]{ display: none !important; }

:where(
  .btn, .input, .select, textarea,
  .card, .modal-dialog, .ws-columns-modal, .bm-contract-modal,
  .ai-panel, .stylebar-panel, .ai-fab, .stylebar-fab,
  .tbl tbody tr, .crm-cols-item, .ws-th-filter-btn, .ws-table-settings-btn
){
  transition-duration: var(--ui-motion-duration) !important;
  transition-timing-function: var(--ui-motion-ease) !important;
}

/* Remove blue focus rings in Safari for mouse users, keep for keyboard */
:focus{ outline: none; }
:focus-visible{ box-shadow: var(--focus); border-color: rgba(207,214,245,0.70) !important; }

::selection{ background: rgba(207,214,245,0.20); }

/* ==========================================================
   Background + glass UI
   ========================================================== */

body.app{
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(19, 24, 38, 0.26) 0%, rgba(17, 22, 36, 0.3) 100%),
    url('/assets/img/bg/Hintergrund.webp') center / cover no-repeat fixed;
  position: relative;
}

body.app::before{
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 760px at -10% -20%, rgba(106, 132, 196, 0.28), transparent 62%),
    radial-gradient(900px 620px at 110% -10%, rgba(116, 158, 149, 0.22), transparent 64%),
    linear-gradient(180deg, rgba(20, 26, 42, 0.14), rgba(19, 25, 40, 0.18));
  pointer-events: none;
  z-index: 0;
}

/* Keep content above overlay */
#navbar-root,
main.page{
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Base layout + cards
   ========================================================== */

.page{
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: min(var(--app-max-width), 100vw);
  margin: 0 auto;
  padding: 12px var(--page-pad-inline) 16px;
}

#secDashboard,
#secCalendar,
#secWorkspace,
#secProfile{
  width: 100%;
  margin: 0 auto;
}

#secWorkspace{
  width: calc(100% + (var(--page-pad-inline) * 2));
  margin-left: calc(var(--page-pad-inline) * -1);
  margin-right: calc(var(--page-pad-inline) * -1);
  padding-left: 0;
  padding-right: 0;
}

#secWorkspace .ws-shell{
  margin-left: 0;
  padding-left: 0;
}

#secWorkspace .ws-sidebar{
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#content .view{
  min-height: calc(100vh - 126px);
  min-width: 0;
}

#content,
.card,
#secDashboard .dash-grid,
.ws-shell,
.crm-cm-shell{
  min-width: 0;
}

.view.view-enter{
  animation: viewFadeIn .22s ease both;
}

.view.view-leave{
  animation: viewFadeOut .14s ease both;
}

.ui-stagger-in{
  animation: rowFadeIn .28s ease both;
  animation-delay: var(--stagger-delay, 0ms);
}

@keyframes viewFadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes viewFadeOut{
  from{ opacity:1; transform: translateY(0); }
  to{ opacity:0; transform: translateY(-4px); }
}

@keyframes rowFadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.card{
  border: 1px solid var(--border);
  border-radius: var(--token-radius-lg);
  padding: 16px;
  background: var(--surface);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--token-shadow-soft);
}

.card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}

/* Make cards feel less cramped on very small screens */
@media (max-width: 480px){
  .page{ padding: 10px; }
  .card{ padding: 14px; }
}

@media (max-width: 1200px){
  :root{
    --page-pad-inline: clamp(12px, 2.2vw, 24px);
    --dash-cal-h: clamp(360px, 40vh, 430px);
    --crm-right-col-w: clamp(260px, 30vw, 330px);
    --ws-sidebar-w: clamp(200px, 24vw, 260px);
  }
  #secDashboard,
  #secCalendar,
  #secProfile{
    width: 100%;
  }
}

@media (max-width: 720px){
  :root{ --page-pad-inline: 12px; }
}

@media (min-width: 1920px){
  :root{
    --page-pad-inline: clamp(20px, 2.4vw, 56px);
    --dash-cal-h: clamp(440px, 46vh, 560px);
    --crm-right-col-w: clamp(320px, 19vw, 430px);
    --ws-sidebar-w: clamp(240px, 14vw, 330px);
  }
  .page{ max-width: 2280px; }
}

/* ==========================================================
   Navbar (MASTER)
   ========================================================== */

#navbar-root{
  position: sticky;
  top: 0;
  z-index: 1000;
  isolation: isolate;
}

.navbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;

  padding: clamp(11px, 1vw, 15px) clamp(14px, 1.8vw, 24px);
  margin: 0;

  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-top: 0;
  box-shadow: 0 8px 22px rgba(42, 56, 92, 0.14);
}

.nav-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}

.nav-logo{
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

.nav-brand{
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-center{ justify-self: center; min-width: 0; }

.nav-date{
  font-size: clamp(15px, 1.02vw, 18px);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.nav-right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-btn{
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  padding: clamp(8px, 0.72vw, 10px) clamp(12px, 1vw, 15px);
  border-radius: 14px;
  cursor: pointer;
  font-size: clamp(14px, 0.94vw, 16px);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.20);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.nav-btn:hover{
  background: rgba(77,114,219,0.14);
  border-color: rgba(77,114,219,0.42);
  box-shadow: 0 10px 20px rgba(42,56,92,0.16);
  transform: translateY(-1px);
}

.nav-btn.is-active{
  background: rgba(77,114,219,0.22);
  border-color: rgba(77,114,219,0.54);
  box-shadow: 0 10px 24px rgba(42,56,92,0.2);
}

.nav-btn:active{
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.20);
}

.nav-avatar{
  width: 43px;
  height: 43px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(31, 41, 66, 0.28);
}

.nav-avatar.is-active{
  border-color: rgba(77,114,219,0.56);
  box-shadow: 0 10px 26px rgba(36, 62, 128, 0.28);
}

.nav-avatar-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-avatar-initials{
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

@media (max-width: 900px){
  .navbar{ grid-template-columns: 1fr; gap: 10px; }
  .nav-center{ justify-self: start; }
  .nav-right{ justify-self: start; flex-wrap: wrap; }
}

/* ==========================================================
   Controls
   ========================================================== */

select, input, textarea, button{ font: inherit; }

select, input, textarea{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(227, 235, 248, 0.66);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}

select:focus, input:focus, textarea:focus{
  border-color: rgba(207,214,245,0.62);
  box-shadow: var(--focus);
}

button,
.btn{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(222, 231, 245, 0.72);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}

button:hover,
.btn:hover{ background: rgba(77,114,219,0.14); border-color: rgba(77,114,219,0.40); }

button:active,
.btn:active{ transform: translateY(1px); }

button.active,
.btn.active{
  border-color: rgba(207,214,245,0.68);
  background: var(--accent-2);
}

button:disabled,
.btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary{
  border-color: rgba(207,214,245,0.56);
  background: rgba(207,214,245,0.18);
}
.btn-primary:hover{
  background: rgba(207,214,245,0.28);
  border-color: rgba(207,214,245,0.72);
}

.btn-danger{
  border-color: rgba(255, 111, 126, 0.58);
  background: rgba(255, 87, 103, 0.24);
  color: #8f2d3c;
}
.btn-danger:hover{
  background: rgba(255, 87, 103, 0.32);
  border-color: rgba(255, 131, 144, 0.74);
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(227, 235, 248, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pill.warn{
  border-color: rgba(255,149,0,0.40);
  background: rgba(255,149,0,0.14);
}

.wrap{
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.60);
}

/* ==========================================================
   Dashboard CRM – Toolbar (explicit IDs)
   ========================================================== */

#dash-crm-toolbar.crm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}

#dash-crm-toolbar .crm-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
  flex:1;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}

#dash-crm-toolbar .crm-left::-webkit-scrollbar{ height:8px; }
#dash-crm-toolbar .crm-left::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.14);
  border-radius:999px;
}

#dash-crm-toolbar .crm-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.ws-table-settings-btn{
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ws-table-settings-btn img{
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* Search pill */
#dash-crm-search{
  flex: 1 1 360px;
  min-width: 260px;
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(236, 242, 252, 0.86);
}

/* Chip-like dropdowns */
#dash-crm-filter-sales,
#dash-crm-filter-fulfillment{
  flex: 0 0 auto;
  width: auto;
  max-width: 260px;
  border-radius: 12px;
  padding: 9px 34px 9px 12px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(236, 242, 252, 0.86);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 52%,
    calc(100% - 11px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#dash-crm-filter-sales:hover,
#dash-crm-filter-fulfillment:hover{
  background: rgba(242, 246, 253, 0.96);
  border-color: var(--border-2);
}

#dash-crm-filter-sales:focus,
#dash-crm-filter-fulfillment:focus{
  border-color: rgba(207,214,245,0.55);
  box-shadow: var(--focus);
}

.crm-chip-select.is-empty{
  width: 40px !important;
  min-width: 40px;
  max-width: 40px;
  color: transparent !important;
  text-shadow: none;
  padding: 9px 10px !important;
  background-image: url('/assets/img/symbols/Filter.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.crm-chip-select.is-empty option{
  color: var(--text);
}

.crm-chip-select.is-empty:hover{
  filter: brightness(1.03);
}

.crm-chip-select.sales-lead{ background-color: rgba(90, 130, 96, 0.24) !important; color: #24422a; }
.crm-chip-select.sales-terminieren{ background-color: rgba(66, 107, 164, 0.24) !important; color: #1f375b; }
.crm-chip-select.sales-qualifizieren{ background-color: rgba(64, 150, 153, 0.24) !important; color: #1f4b4d; }
.crm-chip-select.sales-kunde{ background-color: rgba(129, 99, 171, 0.24) !important; color: #3b2757; }
.crm-chip-select.sales-follow_up{ background-color: rgba(188, 162, 74, 0.28) !important; color: #4d3b0a; }
.crm-chip-select.sales-unpassend{ background-color: rgba(151, 68, 68, 0.24) !important; color: #4f1919; }
.crm-chip-select.sales-kunde_ehemalig{ background-color: rgba(126, 133, 146, 0.26) !important; color: #323844; }

@media (max-width: 720px){
  #dash-crm-toolbar.crm-head{ flex-wrap:wrap; }
  #dash-crm-toolbar .crm-left{ flex: 1 1 100%; }
  #dash-crm-toolbar .crm-right{ width:100%; justify-content:flex-end; }
  #dash-crm-search{ flex-basis: 100%; min-width: 0; }
}

/* ==========================================================
   Tables
   ========================================================== */

.tbl-loading{ padding: 10px 12px; opacity: 0.8; }
.table-wrap{ width: 100%; overflow: auto; }

.tbl{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  border-radius: 12px;
  overflow: hidden;
}

.tbl th, .tbl td{
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  vertical-align: top;
}

.tbl th{
  position: relative;
  top: auto;
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.92), rgba(236, 242, 252, 0.86));
  z-index: 1;
  text-align: left;
  font-weight: 700;
  color: rgba(42, 52, 74, 0.94);
}

.tbl td{ font-weight: 500; }
.tbl tbody tr{
  transition: background-color .12s ease-in-out;
}
.tbl tbody tr:hover{ background: rgba(207,214,245,0.14); }

.td-num{ text-align: right; white-space: nowrap; }
.tbl a{ font-weight: 650; text-decoration: underline; }

/* Inline editing */
.tbl td.cell-editable{ cursor: pointer; }
.tbl td.cell-editable:hover{ background: rgba(207,214,245,0.10); }
.tbl td.cell-editable.saving{ opacity: 0.7; }

/* Dashboard table polish (CRM + Workspace identical) */
#dash-crm-table,
#dash-workspace-table{
  margin-top: 12px;
  width: 100%;
}

#dash-crm,
#dash-workspace{
  min-height: 320px;
  display:flex;
  flex-direction:column;
}

#vue-dashboard-root{
  min-width: 0;
}

body.vue-dashboard-active #secDashboard [data-legacy-dashboard="1"]{
  display: none !important;
}

body.vue-dashboard-active #secDashboard #vue-dashboard-root{
  display: block !important;
}

#dash-crm-table,
#dash-workspace-table{
  flex:1;
  min-height:0;
  overflow:auto;
}

#dash-crm-table .wrap,
#dash-crm-table .table-wrap,
#dash-workspace-table .wrap,
#dash-workspace-table .table-wrap{
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto;
  width: 100%;
}

#dash-crm-table .tbl th,
#dash-workspace-table .tbl th{
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.96), rgba(236, 242, 252, 0.9));
  border-bottom: 1px solid rgba(207,214,245,0.30);
}

#dash-crm-table .tbl td,
#dash-crm-table .tbl th,
#dash-workspace-table .tbl td,
#dash-workspace-table .tbl th{
  padding: 11px 12px;
}

#dash-crm-table .tbl,
#dash-workspace-table .tbl{
  width: 100%;
  table-layout: auto;
}

#dash-crm-table .tbl tbody tr,
#dash-workspace-table .tbl tbody tr{
  transition: background-color .12s ease-in-out;
}

#dash-crm-table .tbl tbody tr:hover,
#dash-workspace-table .tbl tbody tr:hover{
  background: rgba(207,214,245,0.16);
}

#dash-crm-table .tbl tbody tr:nth-child(even),
#dash-workspace-table .tbl tbody tr:nth-child(even){ background: transparent; }

#dash-crm-table .tbl tbody td,
#dash-workspace-table .tbl tbody td{ border-bottom-color: rgba(215,219,238,0.24); }

/* ==========================================================
   Generic Modal
   ========================================================== */

.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--modal-gap-pad);
  z-index: 9999;
  animation: overlayFadeIn .18s ease both;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

@keyframes overlayFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.modal-dialog{
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100vw - (var(--modal-gap-pad) * 2)));
  max-height: calc(100vh - (var(--modal-gap-pad) * 2));
  overflow: auto;
  background: rgba(255, 255, 255,0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  animation: modalIn .2s ease both;
  color: var(--text);
}
.modal,
.modal-head,
.modal-body,
.modal-title,
.modal .label,
.modal input,
.modal textarea,
.modal select{
  color: var(--text);
}
.modal .small{ color: var(--muted); }

@keyframes modalIn{
  from{ opacity: 0; transform: translateY(10px) scale(.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-title{ font-weight: 700; }

.modal-x{
  border: 1px solid var(--border);
  background: rgba(255, 255, 255,0.85);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.modal-body{ padding: 16px; }

.modal-note{
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.03);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--muted);
}

.modal-foot{
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-btn{
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255,0.92);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

body.modal-open{ overflow: hidden; }
body:not(.modal-open) .modal{ display: none; }

/* Simple form helpers used by CRM */
.form-grid{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 12px;
  align-items: center;
}

.label{ font-size: 14px; opacity: 0.8; }
.form-label{ font-size: 13px; font-weight: 620; color: var(--text); }

.input, .select{
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(224, 232, 246, 0.7);
  color: var(--text);
  outline: none;
}

.notice{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
}

.notice-warn{ background: rgba(255,149,0,0.14); border-color: rgba(255,149,0,0.35); }
.notice-error{ background: rgba(255,59,48,0.12); border-color: rgba(255,59,48,0.30); }

@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================
   Dashboard: Calendar + Next Events layout
   ========================================================== */

#secDashboard .dash-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* ~55% / 45% */
  gap: clamp(10px, 0.9vw, 16px);
  align-items: start;
}

#secDashboard .dash-grid > .dash-cal{ grid-column: 1; }
#secDashboard .dash-grid > .dash-next{ grid-column: 2; }

#secDashboard .dash-cal,
#secDashboard .dash-next{
  height: var(--dash-cal-h);
  min-height: var(--dash-cal-h);
}

#secDashboard .dash-cal{
  padding: 12px;
  --dash-cal-inner-h: calc(var(--dash-cal-h) - 24px);
  display: flex;
  flex-direction: column;
}

#secDashboard #calendar-slot-dashboard{
  flex: 1;
  height: var(--dash-cal-inner-h);
  max-height: var(--dash-cal-inner-h);
  overflow: hidden;
}

#secDashboard #calendarWidget{
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;

  /* allocate space for head + weekday row, then split remaining space into dynamic rows */
  --dash-cal-head-h: 52px;
  --dash-cal-wd-h: 32px;
  --cal-cell-h: calc((var(--dash-cal-inner-h) - var(--dash-cal-head-h) - var(--dash-cal-wd-h) - 6px) / var(--dash-cal-rows, 5));
  --cal-cell-pad-top: 18px;
}

#secDashboard #calendarWidget .cal-head{
  padding: 8px 10px;
  min-height: var(--dash-cal-head-h);
}

#secDashboard #calendarWidget .cal-weekdays,
#secDashboard #calendarWidget .cal-weekdays-kw{
  min-height: var(--dash-cal-wd-h);
}

#secDashboard #calendarWidget .cal-weekdays .cal-wd,
#secDashboard #calendarWidget .cal-weekdays-kw .cal-wd,
#secDashboard #calendarWidget .cal-weekdays-kw .cal-wd-kw{
  padding: 6px 4px;
  min-height: var(--dash-cal-wd-h);
}

#secDashboard #calendarWidget .cal-body{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

#secDashboard #calendarWidget .cal-grid,
#secDashboard #calendarWidget .cal-grid-kw{
  flex: 1;
  min-height: 0;
  align-content: stretch;
}

/* Next events card */
#secDashboard .dash-next{ display:flex; flex-direction:column; }
#secDashboard .dash-next #dash-next-events{ flex: 1; min-height: 0; }

#secDashboard .dash-next #dash-next-events .deadline-head{ display:none; }

#secDashboard .dash-next #dash-next-events .deadline-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#secDashboard .dash-next #dash-next-events .deadline-body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 114, 219, 0.62) rgba(233, 238, 248, 0.5);
  padding: 10px 0 0 0;
  display: grid;
  gap: 10px;
}

#secDashboard .dash-next #dash-next-events .deadline-item{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(224, 232, 246, 0.58);
}

#secDashboard .dash-next #dash-next-events .deadline-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items: flex-start;
}

#secDashboard .dash-next #dash-next-events .deadline-title-wrap{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

#secDashboard .dash-next #dash-next-events .deadline-title{
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#secDashboard .dash-next #dash-next-events .deadline-date{
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
  line-height: 1.2;
  padding-top: 2px;
}

#secDashboard .dash-next #dash-next-events .deadline-badge-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

#secDashboard .dash-next #dash-next-events .deadline-label-row{
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#secDashboard .dash-next #dash-next-events .deadline-label-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid rgba(111, 123, 168, 0.42);
  background: rgba(111, 123, 168, 0.18);
}

.deadline-label-chip.tone-tasks{ background: rgba(95, 121, 216, 0.18); border-color: rgba(95, 121, 216, 0.42); }
.deadline-label-chip.tone-tax{ background: rgba(208, 138, 83, 0.18); border-color: rgba(208, 138, 83, 0.42); }
.deadline-label-chip.tone-birthday{ background: rgba(199, 122, 209, 0.18); border-color: rgba(199, 122, 209, 0.42); }
.deadline-label-chip.tone-holiday{ background: rgba(115, 129, 154, 0.18); border-color: rgba(115, 129, 154, 0.42); }
.deadline-label-chip.tone-custom-1{ background: rgba(90, 130, 96, 0.18); border-color: rgba(90, 130, 96, 0.42); }
.deadline-label-chip.tone-custom-2{ background: rgba(66, 107, 164, 0.18); border-color: rgba(66, 107, 164, 0.42); }
.deadline-label-chip.tone-custom-3{ background: rgba(64, 150, 153, 0.18); border-color: rgba(64, 150, 153, 0.42); }
.deadline-label-chip.tone-custom-4{ background: rgba(129, 99, 171, 0.18); border-color: rgba(129, 99, 171, 0.42); }
.deadline-label-chip.tone-custom-5{ background: rgba(188, 162, 74, 0.20); border-color: rgba(188, 162, 74, 0.44); }
.deadline-label-chip.tone-custom-6{ background: rgba(126, 133, 146, 0.18); border-color: rgba(126, 133, 146, 0.42); }

#secDashboard .dash-next #dash-next-events .deadline-desc{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .8;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* subtle scrollbar (WebKit) */
#secDashboard .dash-next #dash-next-events .deadline-body::-webkit-scrollbar{ width: 10px; }
#secDashboard .dash-next #dash-next-events .deadline-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(95, 121, 216, 0.76), rgba(65, 95, 182, 0.76));
  border-radius: 999px;
  border: 2px solid rgba(233, 238, 248, 0.62);
  background-clip: padding-box;
}
#secDashboard .dash-next #dash-next-events .deadline-body::-webkit-scrollbar-track{
  background: rgba(233, 238, 248, 0.52);
  border-radius: 999px;
}
#secDashboard .dash-next #dash-next-events .deadline-body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(95, 121, 216, 0.9), rgba(65, 95, 182, 0.9));
}

@media (max-width: 980px){
  #secDashboard .dash-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 1380px){
  #secDashboard .dash-grid{ grid-template-columns: 1fr; }
}

#secCalendar #calendarRoot{
  display: grid;
  gap: 12px;
  grid-template-rows: minmax(0, var(--cal-view-h)) auto auto;
  min-height: 0;
}

/* ==========================================================
   Deadlines / Calendar containers (page view)
   ========================================================== */

.deadlines-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "cal cal"
    "tax custom";
  gap: 12px;
}

.deadlines-cal{ grid-area: cal; }
.deadlines-tax{ grid-area: tax; }
.deadlines-custom{ grid-area: custom; }

.deadline-box{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.deadline-head{
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deadline-head-title{ font-weight: 700; }

.deadline-body{
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}

.deadline-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255,0.68);
}

.deadline-top{
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.deadline-title{ font-weight: 600; }
.deadline-date{ font-size: 12px; opacity: 0.75; white-space: nowrap; }
.deadline-desc{ margin-top: 6px; font-size: 12px; opacity: 0.8; font-weight: 500; }

.deadline-label-row{
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.deadline-label-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid rgba(111, 123, 168, 0.42);
  background: rgba(111, 123, 168, 0.18);
}

.pill-next{ border-color: var(--border-2); background: rgba(255, 255, 255,0.92); }

@media (max-width: 900px){
  .deadlines-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "cal"
      "tax"
      "custom";
  }
}

/* ==========================================================
   Calendar (GLOBAL master)
   ========================================================== */

#calendar{ /* legacy wrapper if used */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.calendar{ position: relative; }

/* Header: title left, +Termin center, controls right */
.calendar .cal-head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.calendar .cal-title{
  grid-column: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  font-weight: 900;
}

.calendar .cal-controls{
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendar .cal-add-event{
  grid-column: 2;
  justify-self: center;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(207,214,245,0.56);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(207,214,245,0.18);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
  z-index: 2;
}

.calendar .cal-add-event:hover{
  background: rgba(207,214,245,0.28);
  border-color: rgba(207,214,245,0.72);
}

.calendar .cal-controls .btn{
  border-color: rgba(207,214,245,0.56);
  background: rgba(207,214,245,0.18);
  font-weight: 700;
}

.calendar .cal-controls .btn:hover{
  background: rgba(207,214,245,0.28);
  border-color: rgba(207,214,245,0.72);
}

@media (max-width: 720px){
  .calendar .cal-head{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title controls"
      "add add";
    gap: 8px;
  }
  .calendar .cal-title{ grid-area: title; }
  .calendar .cal-controls{ grid-area: controls; justify-self: end; }
  .calendar .cal-add-event{ grid-area: add; justify-self: center; }
}

.calendar .cal-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: transparent;
}

.calendar .cal-weekdays-kw{
  display: grid;
  grid-template-columns: minmax(56px, var(--cal-kw-w)) repeat(7, minmax(0, 1fr)) !important;
  background: transparent;
}

.calendar .cal-wd,
.calendar .cal-weekdays-kw .cal-wd,
.calendar .cal-weekdays-kw .cal-wd-kw{
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  opacity: .82;
  border-bottom: 1px solid var(--cal-gridline);
  border-top: 1px solid var(--cal-gridline);
  background: transparent;
}

.calendar .cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar .cal-grid-kw{
  display: grid;
  grid-template-columns: minmax(56px, var(--cal-kw-w)) repeat(7, minmax(0, 1fr)) !important;
}

.calendar .cal-grid,
.calendar .cal-grid-kw{
  padding: 0;
  gap: 0;
  background: rgba(255, 255, 255,0.76);
  border: 1px solid var(--cal-gridline);
  border-top: 0;
  border-radius: 14px;
  overflow: hidden;
}

.calendar .cal-cell{
  position: relative;
  appearance: none;
  border: 0;
  border-right: 1px solid var(--cal-gridline);
  border-bottom: 1px solid var(--cal-gridline);
  background: transparent;
  padding: 6px;
  padding-top: var(--cal-cell-pad-top);
  height: var(--cal-cell-h);
  min-height: var(--cal-cell-h);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}

.calendar .cal-kw-cell{
  border-right: 1px solid var(--cal-gridline);
  border-bottom: 1px solid var(--cal-gridline);
  background: rgba(207,214,245,0.28);
  padding: 6px;
  height: var(--cal-cell-h);
  min-height: var(--cal-cell-h);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-weight: 950;
  font-size: 14px;
  color: rgba(38, 48, 66, 0.78);
}

.calendar .cal-grid:not(.cal-grid-kw) .cal-cell:nth-child(7n){ border-right: 0; }
.calendar .cal-grid-kw > :nth-child(8n){ border-right: 0; }

.calendar .cal-cell.is-out{ opacity: .75; }

.calendar .cal-cell.is-today{
  outline: 2px solid rgba(189, 199, 246, 0.908);
  outline-offset: -2px;
  background: rgba(197, 207, 255, 0.697);
}

.calendar .cal-cell.is-weekend{
  background: rgba(116, 133, 169, 0.08);
}

.calendar .cal-cell.is-holiday{
  background: rgba(208, 138, 83, 0.12);
}

.calendar .cal-num{
  position: absolute;
  top: 6px;
  right: 6px;
  font-weight: 700;
  font-size: 12px;
  opacity: .92;
  line-height: 1;
  text-align: right;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.calendar .cal-cell.is-today .cal-num{
  background: transparent;
  color: var(--text);
  opacity: 1;
}

.calendar .cal-holiday-mark{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(208, 138, 83, 0.82);
  box-shadow: 0 0 0 3px rgba(208, 138, 83, 0.24);
}

.calendar .cal-events{
  margin-top: 6px;
  display: grid;
  gap: 2px;
  max-height: calc(var(--cal-cell-h) - var(--cal-cell-pad-top) - 14px);
  overflow: hidden;
}

.calendar .cal-ev{
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(111, 123, 168, 0.22);
  border: 1px solid rgba(111, 123, 168, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar .cal-ev.tone-tasks{ background: rgba(95, 121, 216, 0.22); border-color: rgba(95, 121, 216, 0.42); }
.calendar .cal-ev.tone-tax,
.calendar .cal-ev-tax{ background: rgba(208, 138, 83, 0.22); border-color: rgba(208, 138, 83, 0.42); }
.calendar .cal-ev.tone-birthday{ background: rgba(199, 122, 209, 0.22); border-color: rgba(199, 122, 209, 0.42); }
.calendar .cal-ev.tone-holiday{ background: rgba(115, 129, 154, 0.22); border-color: rgba(115, 129, 154, 0.42); }
.calendar .cal-ev.tone-custom-1{ background: rgba(90, 130, 96, 0.22); border-color: rgba(90, 130, 96, 0.42); }
.calendar .cal-ev.tone-custom-2{ background: rgba(66, 107, 164, 0.22); border-color: rgba(66, 107, 164, 0.42); }
.calendar .cal-ev.tone-custom-3{ background: rgba(64, 150, 153, 0.22); border-color: rgba(64, 150, 153, 0.42); }
.calendar .cal-ev.tone-custom-4{ background: rgba(129, 99, 171, 0.22); border-color: rgba(129, 99, 171, 0.42); }
.calendar .cal-ev.tone-custom-5{ background: rgba(188, 162, 74, 0.24); border-color: rgba(188, 162, 74, 0.46); }
.calendar .cal-ev.tone-custom-6{ background: rgba(126, 133, 146, 0.22); border-color: rgba(126, 133, 146, 0.42); }
.calendar .cal-more{ font-size: 12px; font-weight: 800; opacity: .7; }

/* Calendar view: slightly roomier than dashboard */
#secCalendar{
  --cal-kw-w: clamp(54px, 3.8vw, 70px);
  --cal-view-h: clamp(560px, calc(100vh - 194px), 760px);
  --cal-head-h: 52px;
  --cal-weekday-h: 34px;
  --cal-cell-pad-top: clamp(14px, 1.6vh, 24px);
  --cal-cell-h: clamp(68px, calc((var(--cal-view-h) - var(--cal-head-h) - var(--cal-weekday-h) - 18px) / 6), 108px);
}

#calendar-slot-calendar{
  min-height: var(--cal-view-h);
  height: var(--cal-view-h);
  display: flex;
  min-width: 0;
}

#secCalendar #calendarWidget{
  flex: 1;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(235,236,245,0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 10px;
  color: var(--text);
}

#secCalendar #calendarWidget .cal-head{
  padding: 8px 10px;
  flex: 0 0 auto;
}

#secCalendar #calendarWidget .cal-weekdays .cal-wd,
#secCalendar #calendarWidget .cal-weekdays-kw .cal-wd,
#secCalendar #calendarWidget .cal-weekdays-kw .cal-wd-kw{
  color: rgba(42, 52, 74, .82);
}

#secCalendar #calendarWidget .cal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#secCalendar #calendarWidget .cal-grid,
#secCalendar #calendarWidget .cal-grid-kw{
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 1680px){
  #secCalendar{
    --cal-view-h: clamp(520px, calc(100vh - 188px), 710px);
    --cal-cell-h: clamp(62px, calc((var(--cal-view-h) - var(--cal-head-h) - var(--cal-weekday-h) - 14px) / 6), 96px);
    --cal-cell-pad-top: 14px;
  }
  #secCalendar #calendarWidget .cal-weekdays .cal-wd,
  #secCalendar #calendarWidget .cal-weekdays-kw .cal-wd,
  #secCalendar #calendarWidget .cal-weekdays-kw .cal-wd-kw{
    font-size: 13px;
    padding: 5px 3px;
  }
}

@media (max-height: 940px){
  #secCalendar{
    --cal-view-h: calc(100vh - 172px);
    --cal-cell-h: clamp(58px, calc((var(--cal-view-h) - var(--cal-head-h) - var(--cal-weekday-h) - 12px) / 6), 88px);
    --cal-cell-pad-top: 12px;
  }
  #secCalendar #calendarWidget .cal-title{
    font-size: 17px;
  }
  #secCalendar #calendarWidget .cal-ev{
    font-size: 10px;
    padding: 1px 5px;
  }
}

/* Dashboard-specific month grid “sheet” look */
#secDashboard #calendarWidget .cal-grid,
#secDashboard #calendarWidget .cal-grid-kw{
  background: rgba(255, 255, 255,0.68);
  border: 1px solid rgba(215,219,238,0.24);
  border-radius: 14px;
  overflow: hidden;
}

#secDashboard #calendarWidget .cal-cell,
#secDashboard #calendarWidget .cal-kw-cell{
  border: 0 !important;
  border-right: 1px solid rgba(0,0,0,0.10) !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  height: var(--cal-cell-h);
  min-height: var(--cal-cell-h);
  padding: 6px;
  padding-top: 18px;
  overflow: hidden;
  margin: 0;
}

#secDashboard #calendarWidget .cal-grid:not(.cal-grid-kw) .cal-cell:nth-child(7n){
  border-right: 0 !important;
}
#secDashboard #calendarWidget .cal-grid-kw > :nth-child(8n){
  border-right: 0 !important;
}

#secDashboard #calendarWidget .cal-kw-cell{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-weight: 950;
  font-size: 14px;
  color: rgba(38,48,66,0.74);
  background: rgba(207,214,245,0.28);
}

#secDashboard #calendarWidget .cal-cell.is-out{
  background: rgba(255, 255, 255,0.62);
  opacity: 0.75;
}

#secDashboard #calendarWidget .cal-cell.is-today{
  outline: 2px solid rgba(79, 108, 186, 0.9);
  outline-offset: -2px;
  background: linear-gradient(180deg, rgba(95, 121, 216, 0.28), rgba(95, 121, 216, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

#secDashboard #calendarWidget .cal-num{
  font-size: 12px;
  font-weight: 700;
  top: 6px;
  right: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#secDashboard #calendarWidget .cal-cell.is-today .cal-num{
  background: rgba(255, 255, 255, 0.92);
  color: rgba(29, 43, 78, 0.96);
  opacity: 1;
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 800;
}

#secDashboard #calendarWidget .cal-events{
  margin-top: 2px;
  max-height: 18px;
  gap: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}

#secDashboard #calendarWidget .cal-ev{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  padding: 0;
  line-height: 1;
  font-size: 0;
  color: transparent;
  overflow: hidden;
  border: 0;
  background: rgba(111, 123, 168, 0.85);
}

#secDashboard #calendarWidget .cal-ev.tone-tasks{ background: rgba(95, 121, 216, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-tax{ background: rgba(208, 138, 83, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-birthday{ background: rgba(199, 122, 209, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-holiday{ background: rgba(115, 129, 154, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-custom-1{ background: rgba(90, 130, 96, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-custom-2{ background: rgba(66, 107, 164, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-custom-3{ background: rgba(64, 150, 153, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-custom-4{ background: rgba(129, 99, 171, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-custom-5{ background: rgba(188, 162, 74, 0.95); }
#secDashboard #calendarWidget .cal-ev.tone-custom-6{ background: rgba(126, 133, 146, 0.95); }

#secDashboard #calendarWidget .cal-more{
  display: none;
}

/* Month swap animation hooks */
#calendarWidget .cal-body,
#calendarWidget .cal-grid,
#calendarWidget .cal-grid-kw{
  will-change: opacity, transform;
}

#calendarWidget.cal-swap-out .cal-body,
#calendarWidget.cal-swap-out .cal-grid,
#calendarWidget.cal-swap-out .cal-grid-kw{
  opacity: 0;
  transform: translateY(var(--cal-swap-shift));
  transition: opacity var(--cal-swap-dur) var(--cal-swap-ease),
              transform var(--cal-swap-dur) var(--cal-swap-ease);
}

#calendarWidget[data-swap-dir="prev"].cal-swap-out .cal-body,
#calendarWidget[data-swap-dir="prev"].cal-swap-out .cal-grid,
#calendarWidget[data-swap-dir="prev"].cal-swap-out .cal-grid-kw{
  transform: translateY(var(--cal-swap-shift));
}

#calendarWidget[data-swap-dir="next"].cal-swap-out .cal-body,
#calendarWidget[data-swap-dir="next"].cal-swap-out .cal-grid,
#calendarWidget[data-swap-dir="next"].cal-swap-out .cal-grid-kw{
  transform: translateY(calc(var(--cal-swap-shift) * -1));
}

#calendarWidget.cal-swap-in .cal-body,
#calendarWidget.cal-swap-in .cal-grid,
#calendarWidget.cal-swap-in .cal-grid-kw{
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--cal-swap-dur) var(--cal-swap-ease),
              transform var(--cal-swap-dur) var(--cal-swap-ease);
}

/* ==========================================================
   Calendar Modal (scoped, safe white panel)
   ========================================================== */

#calModal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  padding: 24px;
}

#calModal[aria-hidden="false"]{
  display: flex;
  align-items: center;
  justify-content: center;
}

#calModal .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

#calModal .modal-panel,
#calModal .modal-dialog{
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 24px));
  max-height: calc(100vh - 20px);
  overflow: hidden;
  background: rgba(255, 255, 255,0.92);
  color: var(--text);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#calModal .modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  background: rgba(245,245,247,0.85);
}

#calModal .modal-title{
  font-weight: 950;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#calModal .modal-close,
#calModal .modal-x{
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255,0.80);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

#calModal .modal-close:hover,
#calModal .modal-x:hover{
  background: rgba(255, 255, 255,0.92);
  border-color: var(--border-2);
}

#calModal .modal-body{
  padding: 16px;
  overflow: auto;
  max-height: calc(100vh - 116px);
  display: grid;
  gap: 14px;
}

#calModal .cal-form{
  display: grid;
  gap: 14px;
}

#calModal .cal-form .form-row{
  display: grid;
  gap: 8px;
}

#calModal #calEvtDesc{
  min-height: 140px;
  resize: vertical;
}

.cal-day-item{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255,0.68);
}

.cal-day-item-title{
  font-weight: 650;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================
   CRM – Customer Modal Layout
   ========================================================== */

.crm-customer-modal .modal-dialog{
  width: min(1380px, calc(100vw - (var(--modal-gap-pad) * 2)));
  max-height: calc(100vh - clamp(22px, 4vh, 60px));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(215, 219, 238, 0.30);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.crm-customer-modal .modal-body{
  padding: 12px;
}

.crm-customer-modal h1,
.crm-customer-modal h2,
.crm-customer-modal h3,
.crm-customer-modal h4,
.crm-customer-modal .form-label{
  color: var(--text);
}

.crm-modal-x{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10001;
}

.crm-cm-shell{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--crm-right-col-w);
  min-height: min(800px, calc(100vh - 126px));
}

.crm-cm-left{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.crm-cm-right{
  border-left: 1px solid var(--border);
  background: rgba(255, 255, 255,0.62);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.crm-cm-header{
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255,0.92);
}

.crm-cm-header-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.crm-cm-title{
  display: grid;
  gap: 5px;
  min-width: 0;
}

.crm-cm-title h2{
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin: 0;
}

.crm-cm-company-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.crm-cm-company-wrap{ min-width: 0; flex: 1; }

.crm-cm-company{
  font-size: clamp(24px, 1.9vw, 30px);
  font-weight: 950;
  line-height: 1.08;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-cm-company-input{
  width: 100%;
  font-size: 18px;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
}

.crm-chips{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.crm-chip-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 999px;
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255,0.82);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 52%,
    calc(100% - 9px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.crm-chip-select:focus{
  border-color: rgba(207,214,245,0.55);
  box-shadow: var(--focus);
}

.crm-cm-inline-meta{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 2px;
}

.crm-cm-inline-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255,0.92);
  white-space: nowrap;
}

.crm-cm-inline-pill-label{
  font-size: 14px;
  font-weight: 850;
  color: var(--muted);
}

.crm-cm-inline-pill-value{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.crm-cm-header-actions{
  display: flex;
  gap: 8px;
  align-items: center;
}

.crm-cm-header-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.crm-cm-kpis{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-cm-kpi{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255,0.92);
  display: grid;
  gap: 2px;
}

.crm-kpi-label{
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

.crm-kpi-value{
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}

.crm-cm-box{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.92);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  min-width: 0;
}

.crm-cm-box h3{
  font-size: 14px;
  font-weight: 950;
  color: var(--muted);
  margin: 0 0 10px 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crm-cm-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.crm-cm-field{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.crm-cm-field label{
  font-size: 14px;
  font-weight: 850;
  color: var(--muted);
}

.crm-cm-field input,
.crm-cm-field select{ width: 100%; }

/* Tabs */
.crm-cm-tabs{
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  background: rgba(255, 255, 255,0.92);
}

.crm-cm-tab{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255,0.92);
  font-weight: 950;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

.crm-cm-tab:hover{ background: rgba(255, 255, 255,0.92); border-color: var(--border-2); }
.crm-cm-tab:active{ transform: translateY(1px); }

.crm-cm-tab.active{
  border-color: rgba(207,214,245,0.55);
  background: rgba(207,214,245,0.10);
}

.crm-cm-body{
  flex: 1;
  overflow: auto;
  padding: 16px;
  min-height: 420px;
  background: rgba(255, 255, 255,0.92);
}

.crm-cm-panel{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.80);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

/* Right side (comments) */
.crm-cm-comments{
  padding: 14px 12px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  background: rgba(255, 255, 255,0.92);
}

.crm-cm-comment{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255,0.90);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.crm-cm-comment-meta{
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.crm-cm-comment-text{
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
}

.crm-cm-comment-editor{
  padding: 0;
  border-top: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.crm-comments-list-wrap{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.crm-comments-list{
  display: grid;
  gap: 10px;
}

.crm-cm-comment-editor .ws-rte{
  min-height: 0;
}

@media (max-width: 1100px){
  .crm-cm-shell{ grid-template-columns: 1fr; }
  .crm-cm-right{ border-left: 0; border-top: 1px solid var(--border); }
  .crm-cm-kpis{ grid-template-columns: 1fr; }
  .crm-cm-header-grid{ grid-template-columns: 1fr; }
  .crm-cm-fields{ grid-template-columns: 1fr; }
  .crm-cm-tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .crm-customer-modal .modal-dialog{ width: calc(100vw - 18px); }
  .crm-cm-body{ padding: 12px; }
}

/* ==========================================================
   CRM – Contracts (Modules + Billings)
   ========================================================== */

.crm-modules,
.crm-modules-list,
.crm-modules-grid,
.crm-modules-wrap,
.crm-contract-modules,
.crm-contract-modules-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}

.crm-module,
.crm-module-pill,
.crm-module-chip,
.crm-modules label,
.crm-modules-list label,
.crm-modules-grid label,
.crm-modules-wrap label,
.crm-contract-modules label,
.crm-contract-modules-list label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255, 255, 255,0.86);
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease,border-color .15s ease,transform .06s ease;
}

.crm-modules input[type="checkbox"],
.crm-modules-list input[type="checkbox"],
.crm-modules-grid input[type="checkbox"],
.crm-modules-wrap input[type="checkbox"],
.crm-contract-modules input[type="checkbox"],
.crm-contract-modules-list input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

.crm-modules label:has(input:checked),
.crm-modules-list label:has(input:checked),
.crm-modules-grid label:has(input:checked),
.crm-modules-wrap label:has(input:checked),
.crm-contract-modules label:has(input:checked),
.crm-contract-modules-list label:has(input:checked){
  border-color:rgba(207,214,245,0.55);
  background:rgba(207,214,245,0.10);
}

/* Billings table wrapper */
.crm-billings-wrap,
.crm-billings-table-wrap{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255, 255, 255,0.88);
  overflow:auto;
}

.crm-contracts-panel{
  display:grid;
  gap:12px;
}

.crm-contracts-detail{
  display:grid;
  gap:12px;
}

.crm-subhead{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}

.crm-contracts-top{
  width:100%;
}

.crm-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255, 255, 255,0.88);
  overflow:hidden;
}

.crm-box-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(245,245,247,0.85);
}

.crm-box-title{
  font-size:13px;
  font-weight:950;
}

.crm-billings-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.crm-billings-table th,
.crm-billings-table td{
  border-bottom:1px solid rgba(0,0,0,0.12);
  padding:10px 12px;
  vertical-align:top;
}

.crm-billings-table th{
  text-align:left;
  font-weight:900;
  background: rgba(245,245,247,0.92);
  position: sticky;
  top: 0;
  z-index: 2;
}

.crm-billings-table tbody tr:hover{
  background: rgba(207,214,245,0.08);
}

.badge-paid,
.crm-billing-paid{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(52,199,89,0.35);
  background:rgba(52,199,89,0.12);
  font-weight:950;
  font-size:12px;
}

/* ==========================================================
   Settings
   ========================================================== */

.settings-layout{ display:grid; grid-template-columns: 220px 1fr; gap:12px; }
.settings-menu{ display:flex; flex-direction:column; gap:8px; }
.settings-tab{ text-align:left; }
.settings-tab.active{ border-color:var(--border-2); background:rgba(74,79,111,0.84); }
.settings-content{ display:grid; gap:10px; }

.settings-groups{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 900px){
  .settings-layout{ grid-template-columns: 1fr; }
  .settings-groups{ grid-template-columns: 1fr; }
}

/* ==========================================================
   CRM – Column Settings + Table Header Drag & Drop
   ========================================================== */

/* Two buckets (shown/hidden) */
.crm-cols-dnd{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px){
  .crm-cols-dnd{ grid-template-columns: 1fr; }
}

.crm-cols-bucket{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.72);
  overflow: hidden;
}

.crm-cols-bucket-head{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(245,245,247,0.85);
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.crm-cols-bucket-body{
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  min-height: 120px;
}

.crm-cols-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255,0.86);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  user-select:none;
  will-change: transform;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.crm-cols-grip{ cursor: grab; font-weight: 950; opacity: .65; line-height: 1; }
.crm-cols-label{ flex: 1; min-width: 0; font-weight: 900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-cols-item.dragging{
  opacity: .9;
  background: rgba(229, 235, 248, 0.96);
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}
.crm-cols-bucket.drag-over{ outline: 3px solid rgba(207,214,245,0.18); outline-offset: -3px; }

/* Live table header DnD */
.tbl th.is-draggable{
  cursor: grab;
  user-select: none;
  transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.tbl th.is-draggable:active{ cursor: grabbing; }
.tbl th.dragging{ opacity: .55; }

.tbl th.drop-before{ box-shadow: inset 3px 0 0 rgba(207,214,245,0.85); }
.tbl th.drop-after{ box-shadow: inset -3px 0 0 rgba(207,214,245,0.85); }

.tbl th .th-grip{ margin-left: 8px; opacity: .55; font-weight: 950; }

/* ==========================================================
   CRM – Rich Text Editor (Notes)
   ========================================================== */

.crm-notes-panel{
  display:grid;
  gap:10px;
}

.crm-notes-panel .ws-rte{
  min-height: 220px;
}

.crm-notes-panel .ws-rte-edit{
  max-height: 420px;
}

.crm-notes-actions{
  display:none;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  margin-top:2px;
}

/* ==========================================================
   CRM – Storage (lokal)
   ========================================================== */

.crm-storage-root{
  display:grid;
  gap:12px;
}

.crm-storage-root.is-drag-over .crm-storage-left{
  border-color: rgba(207,214,245,0.86);
  box-shadow: 0 0 0 2px rgba(207,214,245,0.24);
  background: rgba(255,255,255,0.30);
}

.crm-storage-notice{
  margin-bottom: 2px;
}

.crm-storage-topbar{
  padding: 12px;
  border: 1px solid rgba(183, 198, 226, 0.34);
  background: var(--glass-panel);
  display:grid;
  gap:8px;
}

.crm-storage-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  align-items:center;
}

.crm-storage-link-input{
  flex: 1 1 300px;
  min-width: 180px;
}

.crm-storage-drop-hint{
  opacity:.78;
}

.crm-storage-shell{
  display:block;
  min-height: 0;
}

.crm-storage-left{
  display:flex;
  flex-direction:column;
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(183, 198, 226, 0.34);
  background: var(--glass-panel);
}

.crm-storage-tree{
  display:block;
  flex: 1 1 auto;
  min-height: 280px;
  max-height: min(65vh, 700px);
  overflow:auto;
  padding-right: 4px;
}

.crm-storage-tree-empty{
  padding: 10px 8px;
}

.crm-storage-tree-node{
  display:grid;
  gap:2px;
}

.crm-storage-tree-row{
  --tree-depth: 0;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px 6px calc(8px + (var(--tree-depth) * 16px));
  border-radius: 10px;
  border: 1px solid rgba(183, 198, 226, 0.26);
  background: rgba(255,255,255,0.16);
  min-height: 38px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.crm-storage-tree-row.is-active{
  border-color: rgba(207,214,245,0.74);
  background: rgba(255,255,255,0.32);
  box-shadow: 0 0 0 2px rgba(207,214,245,0.16);
}

.crm-storage-tree-row.is-drop-target{
  border-color: rgba(207,214,245,0.90);
  box-shadow: 0 0 0 2px rgba(207,214,245,0.28);
  background: rgba(255,255,255,0.42);
}

.crm-storage-tree-chevron{
  width: 20px;
  min-width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  display:grid;
  place-items:center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--token-color-text);
  font-size: 13px;
  transition: transform .24s ease, color .16s ease, background .16s ease;
}

.crm-storage-tree-chevron.is-open{
  transform: rotate(90deg);
}

.crm-storage-tree-chevron:hover{
  background: rgba(31,36,48,0.08);
  color: #121827;
}

.crm-storage-tree-chevron.is-leaf{
  opacity: .34;
  pointer-events: none;
}

.crm-storage-tree-icon{
  width: 16px;
  min-width: 16px;
  height: 12px;
  border-radius: 3px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 1px 2px rgba(0,0,0,0.14);
}

.crm-storage-tree-icon.is-folder{
  background: linear-gradient(180deg, #63bff4 0%, #3ea4df 100%);
}

.crm-storage-tree-icon.is-folder::before{
  content: '';
  position: absolute;
  left: 1px;
  top: -3px;
  width: 8px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #7fd0f8 0%, #58b7ea 100%);
}

.crm-storage-tree-icon.is-file{
  width: 12px;
  min-width: 12px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8f9fd 0%, #e6e9f1 100%);
  border: 1px solid rgba(180, 188, 208, 0.56);
}

.crm-storage-tree-icon.is-file::before{
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
  border-top: 1px solid rgba(180, 188, 208, 0.56);
  border-right: 1px solid rgba(180, 188, 208, 0.56);
  background: #f1f3fa;
}

.crm-storage-tree-label{
  flex:1;
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--token-color-text);
  font-weight: 600;
  line-height: 1.25;
  text-align:left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.crm-storage-tree-label:hover{
  color: #161d2f;
}

.crm-storage-tree-inline-input{
  flex: 1 1 auto;
  min-width: 120px;
  margin: 0;
  height: 30px;
  padding: 4px 10px;
  font-size: 14px;
}

.crm-storage-tree-file-meta{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.crm-storage-tree-actions{
  display:flex;
  gap:6px;
  margin-left:auto;
}

.crm-storage-tree-actions .btn{
  padding: 6px 9px;
  font-size: 12px;
}

.crm-storage-tree-children{
  display:grid;
  gap:4px;
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-3px);
  transition: max-height .30s ease, opacity .22s ease, transform .22s ease;
}

.crm-storage-tree-children.is-open{
  max-height: 1400px;
  opacity: 1;
  transform: translateY(0);
}

.crm-storage-upload-modal{
  width: min(980px, 96vw);
  max-height: min(88vh, 920px);
  overflow:auto;
  gap: 12px;
}

.crm-storage-upload-table{
  display:grid;
  gap:8px;
}

.crm-storage-upload-head,
.crm-storage-upload-row{
  display:grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(220px, 1.6fr);
  gap:8px;
  align-items:center;
}

.crm-storage-upload-head{
  padding: 0 4px;
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .76;
  text-transform: uppercase;
}

.crm-storage-upload-row{
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(183, 198, 226, 0.30);
  background: rgba(255,255,255,0.20);
}

.crm-storage-preview-modal{
  width: min(1120px, 96vw);
  max-height: min(92vh, 980px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 10px;
}

.crm-storage-preview-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.crm-storage-preview-modal-body{
  display:grid;
  gap:10px;
  align-content:start;
  overflow:auto;
}

.crm-storage-file-meta{
  display:grid;
  gap:4px;
}

.crm-storage-preview-modal-frame{
  width: 100%;
  min-height: min(70vh, 720px);
  border: 1px solid rgba(183, 198, 226, 0.42);
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
}

@media (max-width: 1180px){
  .crm-storage-tree-actions{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 860px){
  .crm-storage-upload-head,
  .crm-storage-upload-row{
    grid-template-columns: 1fr;
  }
  .crm-storage-tree{
    max-height: min(56vh, 600px);
  }
}

/* ==========================================================
   Profile → CRM Column Settings (modern lanes)
   ========================================================== */

.crmcol-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width: 1100px;
  margin: 0 auto;
}

.crmcol-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.78);
  box-shadow: var(--shadow-soft);
}

.crmcol-title{
  font-weight:950;
  font-size:14px;
  letter-spacing:-0.01em;
}

.crmcol-desc{
  margin-top:4px;
  font-size:12px;
  opacity:.75;
}

.crmcol-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex: 0 0 auto;
}

.crmcol-grid{
  display:grid;
  grid-template-columns: minmax(320px,1fr) minmax(320px,1fr);
  gap:12px;
  align-items:start;
}

@media (max-width: 900px){
  .crmcol-head{ flex-wrap: wrap; }
  .crmcol-actions{ width: 100%; justify-content: flex-end; }
  .crmcol-grid{ grid-template-columns:1fr; }
}

.crmcol-lane{
  border:1px solid var(--border);
  background:rgba(255, 255, 255,0.78);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}

.crmcol-lane-head{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:2px;
  background: rgba(245,245,247,0.85);
}

.crmcol-lane-title{
  font-weight:950;
  font-size:12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crmcol-lane-sub{
  font-size:12px;
  opacity:.65;
}

.crmcol-list{
  padding:12px 14px;
  min-height: 260px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.crmcol-list:empty::before{
  content: "Hier Spalten ablegen …";
  font-size: 12px;
  font-weight: 800;
  opacity: .5;
  padding: 8px 2px;
}

.crmcol-list.is-dragover{
  background:rgba(0,0,0,.03);
  outline: 3px solid rgba(207,214,245,0.18);
  outline-offset: -6px;
}

.crmcol-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255, 255, 255,0.92);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  cursor:grab;
  user-select:none;
}

.crmcol-item:hover{
  background:rgba(255, 255, 255,0.92);
  border-color: var(--border-2);
}

.crmcol-item:active{ cursor:grabbing; }

.crmcol-item.is-dragging{
  opacity:.55;
  transform:scale(.99);
}

.crmcol-grip{
  width:18px;
  text-align:center;
  opacity:.55;
  font-weight:950;
  line-height:1;
}

.crmcol-item-label{
  font-weight:900;
  font-size:13px;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.crmcol-item-key{
  font-size:11px;
  opacity:.60;
  border:1px solid rgba(0,0,0,.10);
  padding:4px 8px;
  border-radius:999px;
  white-space:nowrap;
  background: rgba(245,245,247,0.85);
}

.crmcol-status{
  font-size:12px;
  opacity:.75;
}

.crmcol-status.is-ok{ opacity:1; color:#0a7a2f; }
.crmcol-status.is-err{ opacity:1; color:#b00020; }

/* ==========================================================
   CRM Contracts -> Aufgaben (basic)
   ========================================================== */

.crm-tasks-wrap{ display:flex; flex-direction:column; gap:10px; }
.crm-task-group{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  background:rgba(255, 255, 255,.75);
}
.crm-task-group-title{ font-weight:800; margin-bottom:6px; }
.crm-task-list{ display:flex; flex-direction:column; gap:6px; }
.crm-task-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255, 255, 255,.92);
}
.crm-task-row.is-done{ opacity:.75; }
.crm-task-left{ display:flex; align-items:flex-start; gap:10px; }
.crm-task-main{ display:flex; flex-direction:column; gap:2px; }
.crm-task-title{ font-weight:650; }

.crm-fulfillment-panel .section-title{
  margin-bottom:6px;
}
.crm-fulfillment-table th{ font-size:12px; opacity:.7; }
.crm-fulfillment-table td{ font-size:13px; }
.crm-task-spoiler{
  margin-top:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(255, 255, 255,.75);
}
.crm-task-spoiler > summary{
  cursor:pointer;
  font-weight:700;
}

.dash-tasks-root .table{ margin-top:6px; }
.table tr.is-clickable:hover{ background:rgba(0,0,0,.04); }
.table tr.is-clickable.is-done{ opacity:.75; }

/* Tasks Overview (minimal scaffold) */
.tasks-shell{
  display:flex;
  gap:14px;
  align-items:stretch;
}

.tasks-sidebar{
  width:260px;
  flex:0 0 260px;
}

.tasks-sidebar.is-collapsed{
  width:54px;
  flex-basis:54px;
  overflow:hidden;
}

.tasks-side-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.tasks-side-title{
  font-weight:900;
}

.tasks-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tasks-nav-btn{
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255, 255, 255,0.92);
  cursor:pointer;
  font-weight:800;
}

.tasks-nav-btn.is-active{
  background:rgba(74,79,111,0.9);
  color:var(--text);
  border-color:var(--border-2);
}

.tasks-main{
  flex:1;
  min-width:0;
}

.table-wrap{
  overflow:auto;
}

.table tr.is-done td{
  opacity:.65;
}

/* ==========================================================
   Workspace (2026-02)
   ========================================================== */

.dash-workspace-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.dash-workspace-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.dash-workspace-head .section-title{
  font-size: 18px;
  font-weight: 700;
}

.ws-shell{
  display:grid;
  grid-template-columns: var(--ws-sidebar-w) minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-left:0;
  width: 100%;
  transition: grid-template-columns .24s cubic-bezier(.2,.9,.2,1), gap .24s cubic-bezier(.2,.9,.2,1);
}

.ws-shell.is-sidebar-collapsed{
  grid-template-columns: 16px minmax(0,1fr);
  gap: 8px;
}

.ws-sidebar{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255,0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: calc(100vh - 132px);
  max-height: calc(100vh - 132px);
  overflow-y:auto;
  overflow-x:hidden;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: min-width .24s cubic-bezier(.2,.9,.2,1), max-width .24s cubic-bezier(.2,.9,.2,1), padding .24s cubic-bezier(.2,.9,.2,1), transform .24s cubic-bezier(.2,.9,.2,1);
}

.ws-sidebar > *{
  max-width: 100%;
}

.ws-sidebar.is-collapsed{
  align-items:flex-end;
  overflow: visible;
  padding: 2px 0;
  border-radius: 0 14px 14px 0;
  min-width: 12px;
  max-width: 12px;
  transform: translateX(-4px);
}

.ws-sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}

.ws-sidebar-title{
  font-weight:900;
  letter-spacing:.01em;
}

.ws-sidebar.is-collapsed .ws-sidebar-title{
  display:none;
}

.ws-sidebar-toggle{
  position: relative;
  right: 0;
  margin-left: auto;
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
}

.ws-sidebar.is-collapsed .ws-sidebar-toggle{
  right: 0;
  margin-left: 0;
}

.ws-side-sep{
  border:0;
  border-top:1px solid var(--border);
  margin:4px 0;
}

.ws-side-btn{
  text-align:left;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background .14s ease, transform .12s ease, box-shadow .14s ease;
}

.ws-side-btn.is-icon{
  width:42px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:16px;
}

.ws-main{
  display:grid;
  gap:14px;
  min-height: calc(100vh - 130px);
}

.ws-main.ws-prep{
  opacity: 0;
  visibility: hidden;
}

#wsMain .card{
  max-height: calc(100vh - 160px);
  overflow:auto;
}

.ws-main.ws-panel-enter{
  visibility: visible;
  animation: viewFadeIn .2s ease both;
}

.ws-main.ws-panel-leave{
  animation: viewFadeOut .12s ease both;
}

.ws-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.ws-table-wrap{
  overflow:auto;
}

.ws-th-cell{
  position: relative;
  white-space:nowrap;
}

.ws-th-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}

.ws-th-sort{
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  font: inherit;
  font-weight: 700;
  cursor:pointer;
  color: inherit;
  text-align:left;
}

.ws-th-filter{
  position:static;
}

.ws-th-filter-btn{
  list-style:none;
  cursor:pointer;
  border:1px solid rgba(207,214,245,0.56);
  border-radius:999px;
  background: rgba(207,214,245,0.18);
  font-size:11px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:26px;
  min-height:26px;
}

.ws-th-filter-btn:hover{
  background: rgba(207,214,245,0.28);
  border-color: rgba(207,214,245,0.72);
}

.ws-th-filter-icon{
  width:24px;
  height:24px;
  display:block;
  pointer-events:none;
}

.ws-th-filter-count{
  min-width:16px;
  height:16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  font-size:10px;
  line-height:1;
  background:rgba(23,30,56,0.18);
  color: var(--text);
}

.ws-th-filter-btn::-webkit-details-marker{
  display:none;
}

.ws-th-filter.is-active .ws-th-filter-btn{
  border-color: rgba(207,214,245,0.72);
  background: rgba(207,214,245,0.28);
}

.ws-th-filter-menu{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  right:auto;
  z-index:20;
  width: 220px;
  max-height: 260px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  background:rgba(255, 255, 255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  display:grid;
  gap:6px;
}

.ws-th-filter-actions{
  display:flex;
  justify-content:space-between;
  gap:6px;
}

.ws-th-filter-actions .btn{
  padding:5px 8px;
  font-size:13px;
  flex: 1 1 auto;
}

.ws-th-filter-search{
  width:100%;
  min-height:34px;
  padding:6px 9px;
  font-size:13px;
}

.ws-th-filter-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.ws-table-compact td,
.ws-table-compact th{
  padding:8px 10px;
  font-size:13px;
}

.ws-click-row{
  cursor:pointer;
}

#secWorkspace .ws-click-row:hover,
#wsMain .ws-click-row:hover{
  background: rgba(207,214,245,0.08);
}

.ws-split-2{
  display:grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap:14px;
}

.ws-split-3{
  display:grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 280px) minmax(0, 1fr);
  gap:14px;
}

.ws-tpl-layout{
  display:grid;
  gap:14px;
  min-width: 0;
}

.ws-tpl-top{
  display:grid;
  grid-template-columns: minmax(260px, 320px) minmax(260px, 1fr);
  gap:14px;
  align-items:start;
  min-width: 0;
}

.ws-pane{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ws-list-limit-4{
  max-height: 242px;
  overflow:auto;
}

.ws-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ws-list-row{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius: 10px;
  padding:8px;
  background: rgba(255, 255, 255,0.88);
}

.ws-list-row.active{
  border-color: rgba(207,214,245,0.55);
  background: rgba(207,214,245,0.10);
}

.ws-list-row input.input{
  flex:1;
}

.ws-drag-handle{
  cursor:grab;
  user-select:none;
  opacity:0.7;
}

.ws-dragging{
  opacity:0.55;
}

.ws-drag-over{
  outline: 2px dashed rgba(207,214,245,0.40);
}

.ws-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:8px 0;
}

.ws-field > label{
  font-size:14px;
  font-weight:900;
  color: var(--text);
  letter-spacing:.01em;
}

.ws-click-edit-label{
  display:inline-flex;
  align-items:center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(0,0,0,0.14);
  background: rgba(255, 255, 255,0.74);
  cursor: text;
  font-weight: 850;
  line-height: 1.35;
}

.ws-rte{
  border:1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255,0.90);
  overflow: hidden;
}

.ws-rte-toolbar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:7px;
  border-bottom:1px solid var(--border);
  background: rgba(255, 255, 255,0.74);
}

.ws-rte-btn{
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.ws-rte-btn.is-active{
  border-color: rgba(207,214,245,0.55);
  background: rgba(207,214,245,0.14);
}

.ws-rte-edit{
  padding:10px 12px;
  outline: none;
  line-height:1.42;
  overflow:auto;
  color: var(--text);
}

.ws-rte-edit:empty::before{
  content: attr(data-placeholder);
  color: var(--muted);
}

.ws-form-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ws-checklist-toolbar{
  justify-content: space-between;
  align-items: center;
}

.ws-checklist-toolbar .select{
  flex: 1 1 auto;
  min-width: 240px;
}

.ws-checkbox-list{
  display:grid;
  gap:8px;
}

.ws-checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  background: rgba(255, 255, 255,0.90);
}

.ws-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  animation: overlayFadeIn .18s ease both;
}

.ws-overlay.is-linked-customer{
  justify-content: flex-end;
  align-items: flex-start;
  padding: 3vh 5vw;
  background: rgba(8, 12, 22, 0.34);
  pointer-events: auto;
}

.ws-overlay.is-linked-customer .ws-task-modal{
  pointer-events: auto;
}

.ws-columns-modal{
  width:min(680px, 96vw);
  display:grid;
  gap:10px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid rgba(215,219,238,0.34);
  background: rgba(182, 190, 203, 0.56);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 20px 46px rgba(42,56,92,0.22);
  animation: modalIn .2s ease both;
}

.crm-cols-popup{
  width:min(860px, 96vw);
  max-height:min(88vh, 920px);
  overflow:auto;
}

.ws-columns-modal .section-title{
  margin: 0;
}

.ws-columns-modal > .small{
  margin: -2px 0 2px;
  opacity: .8;
}

.ws-columns-modal .crm-cols-head-row{
  margin: 6px 0 6px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.ws-columns-modal .crm-cols-actions{
  align-items: center;
}

.ws-columns-modal .crm-cols-dnd{
  gap: 14px;
}

.ws-columns-modal .crm-cols-buckets{
  gap: 16px;
  margin-top: 4px;
}

.ws-columns-modal .crm-cols-bucket-title{
  margin: 0 2px 10px;
}

.ws-columns-modal .crm-cols-bucket-hint{
  margin: 10px 2px 0;
}

.ws-columns-modal .ws-modal-actions{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.ws-columns-list{
  display:grid;
  gap:8px;
  max-height:48vh;
  overflow:auto;
}

.ws-columns-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  background: rgba(255, 255, 255,0.76);
}

.ws-columns-actions{
  display:flex;
  gap:6px;
}

.ws-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.ws-task-modal{
  width:min(1320px, calc(100vw - (var(--modal-gap-pad) * 2)));
  height:min(92vh, 980px);
  max-height:92vh;
  overflow:hidden;
  display:grid;
  gap:10px;
  background: rgba(255, 255, 255,0.80);
  border-color: rgba(215,219,238,0.30);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  animation: modalIn .2s ease both;
}

.ws-overlay.is-linked-customer .ws-task-modal{
  width: clamp(420px, 40vw, 860px) !important;
  min-width: clamp(420px, 40vw, 860px) !important;
  max-width: clamp(420px, 40vw, 860px) !important;
  height: 94vh;
  max-height: 94vh;
  border-radius: 16px;
  animation: wsDockInRight .72s cubic-bezier(.2,.86,.22,1) .12s both;
}

.ws-task-modal h1,
.ws-task-modal h2,
.ws-task-modal h3,
.ws-task-modal h4,
.ws-task-modal label,
.ws-task-modal .form-label{
  color: var(--text);
}
.ws-task-modal,
.ws-task-main,
.ws-task-side,
.ws-comments-list,
.ws-rte-edit{
  scrollbar-width: thin;
  scrollbar-color: rgba(207,214,245,0.42) rgba(255, 255, 255,0.22);
}
.ws-task-modal::-webkit-scrollbar,
.ws-task-main::-webkit-scrollbar,
.ws-task-side::-webkit-scrollbar,
.ws-comments-list::-webkit-scrollbar,
.ws-rte-edit::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.ws-task-modal::-webkit-scrollbar-track,
.ws-task-main::-webkit-scrollbar-track,
.ws-task-side::-webkit-scrollbar-track,
.ws-comments-list::-webkit-scrollbar-track,
.ws-rte-edit::-webkit-scrollbar-track{
  background: rgba(255, 255, 255,0.24);
  border-radius: 999px;
}
.ws-task-modal::-webkit-scrollbar-thumb,
.ws-task-main::-webkit-scrollbar-thumb,
.ws-task-side::-webkit-scrollbar-thumb,
.ws-comments-list::-webkit-scrollbar-thumb,
.ws-rte-edit::-webkit-scrollbar-thumb{
  background: rgba(207,214,245,0.42);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255,0.24);
}
.ws-task-modal::-webkit-scrollbar-thumb:hover,
.ws-task-main::-webkit-scrollbar-thumb:hover,
.ws-task-side::-webkit-scrollbar-thumb:hover,
.ws-comments-list::-webkit-scrollbar-thumb:hover,
.ws-rte-edit::-webkit-scrollbar-thumb:hover{
  background: rgba(235,236,245,0.58);
}

.ws-task-head{
  display:grid;
  gap:6px;
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 8px 10px 10px;
  margin: -6px -6px 0;
  background: linear-gradient(180deg, rgba(248, 251, 255,0.95), rgba(248, 251, 255,0.74));
  border-bottom: 1px solid rgba(215, 219, 238, 0.24);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.ws-task-head-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.ws-task-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.ws-task-link-customer-btn{
  min-height: 34px;
  white-space: nowrap;
}

.ws-task-title-row{
  margin: 2px 0 6px;
}

.ws-task-title-edit .ws-click-edit-label{
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.ws-task-title-edit .ws-inline-input{
  font-size: 24px;
  font-weight: 900;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.16);
  border-radius: 0;
  background: transparent;
}

.ws-task-meta{
  display:grid;
  gap:4px;
}

.ws-task-grid{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap:12px;
  min-height: 0;
}

.ws-task-main,
.ws-task-side{
  display:grid;
  gap:10px;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding-right: 4px;
}

.ws-task-side{
  display:flex;
  flex-direction:column;
}

.ws-checklists-wrap{
  display:grid;
  gap:10px;
}

.ws-checklist-card{
  border:0;
  border-radius:0;
  padding:2px 0;
  background: transparent;
  display:grid;
  gap:6px;
}

.ws-checklist-head{
  display:flex;
  align-items:center;
  gap:8px;
}

.ws-checklist-head-main{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ws-checklist-title-edit{
  min-width: 180px;
}

.ws-checklist-title-edit .ws-click-edit-label{
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  font-weight: 900;
}

.ws-checklist-progress{
  white-space: nowrap;
}

.ws-checklist-body{
  display:grid;
  gap:6px;
  padding-left: 22px;
}

.ws-check-items{
  display:grid;
  gap:2px;
}

.ws-check-item{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:8px;
  padding:4px 0;
  background:transparent;
}

.ws-check-item.is-done{
  background: rgba(124, 184, 136, 0.16);
  border-color: transparent;
  color: #c9efd3;
}

.ws-check-item.is-done .ws-check-item-col > span:first-child{
  text-decoration: line-through;
}

.ws-check-item-text{
  flex:1;
  min-height:24px;
  display:flex;
  align-items:center;
}

.ws-check-item-col{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.ws-inline-input{
  width:100%;
}

.ws-comments-list{
  display:grid;
  gap:10px;
  flex: 1;
  min-height: 0;
  overflow:auto;
}

.ws-comment{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:10px;
  padding:10px 12px;
  background: rgba(255, 255, 255,0.92);
}

.ws-comments-pane{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  height:100%;
}

.ws-comments-composer{
  flex: 0 0 auto;
  display:grid;
  gap:8px;
  border-top:0;
  padding-top:0;
  background: transparent;
}

.ws-comments-send-row{
  display:flex;
  justify-content:flex-end;
}

.ws-icon-btn{
  border:0;
  background:transparent;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  color: rgba(240,242,248,.72);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  line-height: 1;
}

.ws-icon-btn:hover{
  background: rgba(207,214,245,0.12);
  color: var(--text);
}

.calendar .cal-ev-done{
  opacity: .72;
}

.ws-btn-subtle{
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  background: transparent;
}

.ws-btn-send{
  height: 34px;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 12px;
}

.ws-dropzone{
  border:1px dashed rgba(215,219,238,0.32);
  border-radius: 12px;
  padding: 12px;
  text-align:center;
  color: var(--text);
  background: rgba(255, 255, 255,0.75);
  cursor:pointer;
}

.ws-dropzone.is-dragover{
  border-color: rgba(207,214,245,0.55);
  background: rgba(207,214,245,0.10);
}

.ws-attachments-list{
  display:grid;
  gap:6px;
}

.ws-attachment-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.ws-attachment-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ws-attachment-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  max-width: 100%;
}

.ws-task-modal-x{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 100001;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255,0.55);
  background: rgba(255, 255, 255,0.94);
  font-size: 24px;
  line-height: 1;
  padding: 0;
}

body.ws-modals-linked #crmModal.is-linked-task{
  z-index: 100010;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3vh 5vw;
  pointer-events: none;
  background: transparent;
}

body.ws-modals-linked #crmModal.is-linked-task .modal-backdrop{
  display: none;
}

body.ws-modals-linked #crmModal.is-linked-task .modal-dialog{
  width: clamp(410px, 40vw, 840px) !important;
  min-width: clamp(410px, 40vw, 840px) !important;
  max-width: clamp(410px, 40vw, 840px) !important;
  height: 78vh !important;
  max-height: 78vh !important;
  margin: 0;
  border-radius: 16px;
  pointer-events: auto;
  animation: wsDockInLeft .74s cubic-bezier(.2,.86,.22,1) both;
}

body.ws-modals-unlinking #wsTaskModalOverlay.is-linked-customer .ws-task-modal{
  animation: wsDockOutRight .72s cubic-bezier(.2,.86,.22,1) both;
}

body.ws-modals-unlinking #crmModal.is-linked-task .modal-dialog{
  animation: wsDockOutLeft .74s cubic-bezier(.2,.86,.22,1) .06s both;
}

body.ws-modals-linked #crmModal.is-linked-task .modal-body{
  height: 100%;
  overflow: auto;
}

body.ws-modals-linked #crmModal.is-linked-task .crm-cm-shell{
  min-height: 0;
  height: 100%;
}

@keyframes wsDockInLeft{
  from{ opacity: 0; transform: translateX(30vw) scale(.985); }
  to{ opacity: 1; transform: translateX(0); }
}

@keyframes wsDockInRight{
  from{ opacity: 0; transform: translateX(-24vw) scale(.985); }
  to{ opacity: 1; transform: translateX(0); }
}

@keyframes wsDockOutLeft{
  from{ opacity: 1; transform: translateX(0) scale(1); }
  to{ opacity: 0; transform: translateX(30vw) scale(.985); }
}

@keyframes wsDockOutRight{
  from{ opacity: 1; transform: translateX(0) scale(1); }
  to{ opacity: 1; transform: translateX(-24vw) scale(.992); }
}

@media (max-width: 1180px){
  body.ws-modals-linked #crmModal.is-linked-task{
    justify-content: center;
    padding: 12px;
  }
  body.ws-modals-linked #crmModal.is-linked-task .modal-dialog,
  .ws-overlay.is-linked-customer .ws-task-modal{
    width: min(1040px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }
}

.ws-task-modal-x,
.crm-modal-x{
  display: none !important;
}

@media (max-width: 1200px){
  .ws-split-3{
    grid-template-columns: 1fr;
  }
  .ws-tpl-top{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  .ws-shell{
    grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%;
  }
  .ws-split-2{
    grid-template-columns: 1fr;
  }
  .ws-task-grid{
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .view.view-enter,
  .view.view-leave,
  .ui-stagger-in,
  .modal-dialog,
  .ws-columns-modal,
  .ws-task-modal{
    animation: none !important;
  }
}

/* ==========================================================
   Login
   ========================================================== */

.login-body{
  min-height: 100vh;
}

.login-shell{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.login-card{
  width: min(620px, calc(100vw - 36px));
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-soft);
  padding: 26px 28px;
  display: grid;
  gap: 20px;
}

.login-brand-row{
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-brand-logo{
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.login-brand-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.login-brand-sub{
  font-size: 13px;
  color: var(--muted);
}

.login-head h1{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.login-head p{
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.login-form{
  display: grid;
  gap: 16px;
}

.login-field{
  display: grid;
  gap: 8px;
}

.login-field > span{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.login-field > input{
  min-height: 44px;
}

.login-submit{
  margin-top: 6px;
  min-height: 46px;
  width: 100%;
  border-color: rgba(207,214,245,0.56);
  background: rgba(207,214,245,0.18);
}

.login-submit:hover{
  background: rgba(207,214,245,0.28);
  border-color: rgba(207,214,245,0.72);
}

.login-link{
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.login-link:hover{
  color: #b9ccff;
  background: transparent;
  border: 0;
  text-decoration: underline;
}

.login-msg{
  border: 1px solid rgba(255,59,48,0.30);
  background: rgba(255,59,48,0.10);
  color: #ffd2d2;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.login-msg.is-success{
  border-color: rgba(52,199,89,0.52);
  background: rgba(52,199,89,0.22);
  color: #173322;
}

.login-loading{
  font-size: 13px;
  color: var(--muted);
}

/* ==========================================================
   AI Assistant
   ========================================================== */

.ai-assistant-root{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1400;
  pointer-events: none;
}

.ai-fab{
  pointer-events: auto;
  min-width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(207,214,245,0.56);
  background: rgba(207, 214, 245,0.68);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(42,56,92,0.20);
  cursor: pointer;
}

.ai-fab:hover{
  border-color: rgba(77,114,219,0.45);
  background: rgba(255,255,255,0.98);
}

.ai-fab-icon{
  display: block;
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.ai-panel{
  pointer-events: auto;
  position: fixed;
  top: 74px;
  right: 12px;
  width: min(520px, calc(100vw - 24px));
  height: calc(100vh - 88px);
  border-radius: 18px;
  border: 1px solid rgba(215,219,238,0.34);
  background: rgba(182, 190, 203, 0.56);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 20px 46px rgba(42,56,92,0.22);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  padding: 12px;
  transform: translateX(calc(100% + 26px));
  opacity: 0;
  visibility: hidden;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .2s ease, visibility .2s ease;
}

.ai-panel.is-open{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.ai-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-title{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .005em;
}

.ai-head-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  max-width: 360px;
}

.ai-close{
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.ai-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-thread-row .select{
  flex: 1 1 auto;
  min-width: 0;
}

.ai-thread-new{
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
}

.ai-notices{
  display: grid;
  gap: 6px;
}

.ai-notice{
  border-radius: 10px;
  border: 1px solid rgba(215,219,238,0.26);
  background: rgba(255,255,255,0.82);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.ai-notice.is-warn{
  border-color: rgba(203,162,40,0.48);
  background: rgba(255,214,102,0.22);
  color: #7c5a08;
}

.ai-notice.is-error{
  border-color: rgba(194,77,77,0.48);
  background: rgba(255,120,120,0.20);
  color: #8f2e2e;
}

.ai-messages{
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: auto;
  overflow-x: hidden;
  padding: 4px 2px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.ai-messages::-webkit-scrollbar{ width: 10px; }
.ai-messages::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  background: linear-gradient(180deg, rgba(230,233,247,0.62), rgba(170,179,212,0.44));
}

.ai-empty{
  font-size: 13px;
  color: var(--muted);
  padding: 10px 4px;
}

.ai-msg-row{
  display: flex;
}

.ai-msg-row.is-user{
  justify-content: flex-end;
}

.ai-msg-row.is-assistant{
  justify-content: flex-start;
}

.ai-msg{
  width: min(100%, 88%);
  max-width: 100%;
  border-radius: 14px;
  padding: 10px 11px;
  border: 0;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-msg.is-user{
  background: rgba(248, 189, 72, 0.562);
}

.ai-msg.is-assistant{
  background: rgba(240, 244, 250, 0.62);
}

.ai-msg-body{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-msg-meta{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ai-typing{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
}

.ai-typing-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(77,114,219,0.72);
  display: inline-block;
  animation: aiTypingBounce 1s ease-in-out infinite;
}

.ai-typing-dot:nth-child(2){
  animation-delay: .14s;
}

.ai-typing-dot:nth-child(3){
  animation-delay: .28s;
}

@keyframes aiTypingBounce{
  0%, 80%, 100%{
    transform: translateY(0);
    opacity: .5;
  }
  40%{
    transform: translateY(-3px);
    opacity: 1;
  }
}

.ai-msg-attachments{
  margin-top: 8px;
  display: grid;
  gap: 5px;
}

.ai-msg-attachment-link{
  font-size: 12px;
  text-decoration: none;
  color: var(--accent);
}

.ai-msg-attachment-link:hover{
  text-decoration: underline;
}

.ai-drafts{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.ai-draft-card{
  border: 1px solid rgba(215,219,238,0.25);
  border-radius: 12px;
  padding: 8px;
  background: rgba(242, 247, 255,0.74);
}

.ai-draft-head{
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 6px;
}

.ai-draft-json{
  margin: 0;
  max-height: 140px;
  overflow: auto;
  border-radius: 8px;
  padding: 6px;
  background: rgba(236,242,253,0.82);
  border: 1px solid rgba(215,219,238,0.18);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-draft-rationale{
  margin-top: 7px;
  font-size: 12px;
  color: var(--muted);
}

.ai-draft-actions{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-composer{
  border: 0;
  border-radius: 14px;
  padding: 6px 0 0;
  background: transparent;
  display: grid;
  gap: 8px;
}

.ai-pending-files{
  display: grid;
  gap: 6px;
}

.ai-file-chip{
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  border: 1px solid rgba(215,219,238,0.24);
  background: rgba(244, 248, 255,0.62);
  padding: 5px 8px;
}

.ai-file-chip-remove{
  border: 1px solid rgba(215,219,238,0.4);
  background: rgba(255, 255, 255,0.8);
  color: var(--text);
  border-radius: 8px;
  min-height: 24px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.ai-file-chip-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  max-width: 100%;
}

.ai-upload-input{
  display: none;
}

.ai-upload-btn{
  margin-right: 0;
}

.ai-input{
  min-height: 92px;
  resize: vertical;
  overflow-wrap: anywhere;
  border: 0;
  background: rgba(240, 244, 250, 0.7);
  box-shadow: none;
}

.ai-input:focus{
  border: 0 !important;
  box-shadow: none !important;
}

.ai-tools-row{
  justify-content: flex-start;
}

.ai-tools-spacer{
  flex: 1 1 auto;
}

.ai-tool-btn{
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ai-upload-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ai-tool-icon{
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.ai-tool-btn.is-active{
  border-color: rgba(77,114,219,0.52);
  background: rgba(77,114,219,0.16);
}

@media (max-width: 840px){
  .ai-panel{
    top: 64px;
    right: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - 76px);
  }
}

/* ==========================================================
   In-App Stylebar
   ========================================================== */

.stylebar-root{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147482000;
  pointer-events: none;
}

.stylebar-fab{
  pointer-events: auto;
  min-width: 58px;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(208,216,243,0.54);
  background: rgba(216,223,244,0.74);
  box-shadow: 0 16px 30px rgba(35,49,84,0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stylebar-fab:hover{
  border-color: rgba(95,126,219,0.48);
  background: rgba(235,240,252,0.95);
  transform: translateY(-1px);
}

.stylebar-fab-icon{
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.stylebar-panel{
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: min(1040px, calc(100vw - 8px));
  height: 100vh;
  border-radius: 0 20px 20px 0;
  border: 1px solid rgba(214,220,241,0.34);
  background: linear-gradient(165deg, rgba(189,196,214,0.62), rgba(171,180,198,0.56));
  backdrop-filter: saturate(185%) blur(22px);
  -webkit-backdrop-filter: saturate(185%) blur(22px);
  box-shadow: 0 26px 56px rgba(33,46,77,0.28);
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto auto;
  gap: 12px;
  padding: 14px;
  transform: translateX(calc(-100% - 26px));
  opacity: 0;
  visibility: hidden;
  transition: transform calc(var(--ui-motion-duration) + 120ms) var(--ui-motion-ease), opacity calc(var(--ui-motion-duration) + 120ms) var(--ui-motion-ease), visibility calc(var(--ui-motion-duration) + 120ms) var(--ui-motion-ease);
}

.stylebar-panel.is-size-sm{
  width: min(620px, calc(100vw - 20px));
}

.stylebar-panel.is-size-md{
  width: min(760px, calc(100vw - 20px));
}

.stylebar-panel.is-size-lg{
  width: min(900px, calc(100vw - 20px));
}

.stylebar-panel.is-size-xl{
  width: min(1100px, calc(100vw - 20px));
}

.stylebar-panel.is-open{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.stylebar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.stylebar-head-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stylebar-title{
  font-size: 19px;
  font-weight: 650;
  letter-spacing: .005em;
}

.stylebar-sub{
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}

.stylebar-close{
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
}

.stylebar-size-btn{
  min-width: 46px;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.stylebar-top-actions{
  border: 1px solid rgba(214,220,241,0.24);
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  padding: 8px;
}

.stylebar-layout{
  min-height: 0;
  display: grid;
  grid-template-columns: 186px minmax(0,1fr);
  gap: 12px;
}

.stylebar-side{
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(214,220,241,0.28);
  border-radius: 14px;
  background: rgba(255,255,255,0.42);
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.stylebar-side-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stylebar-side-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}

.stylebar-nav-toggle{
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
}

.stylebar-side::-webkit-scrollbar{ width: 8px; }
.stylebar-side::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(102,120,163,0.42);
}

.stylebar-side-group{
  display: grid;
  gap: 8px;
}

.stylebar-side-label{
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

.stylebar-tab-col{
  display: grid;
  gap: 6px;
}

.stylebar-content-col{
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0,1fr);
  gap: 10px;
}

.stylebar-main-tab{
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
  justify-content: flex-start;
  text-align: left;
}

.stylebar-layout.is-nav-collapsed{
  grid-template-columns: 56px minmax(0,1fr);
}

.stylebar-layout.is-nav-collapsed .stylebar-side-title,
.stylebar-layout.is-nav-collapsed .stylebar-side-label{
  display: none;
}

.stylebar-layout.is-nav-collapsed .stylebar-side{
  padding: 8px 6px;
}

.stylebar-layout.is-nav-collapsed .stylebar-side-group{
  gap: 6px;
}

.stylebar-layout.is-nav-collapsed .stylebar-main-tab{
  min-height: 32px;
  padding: 0;
  justify-content: center;
  text-align: center;
  font-size: 0;
}

.stylebar-layout.is-nav-collapsed .stylebar-main-tab::after{
  content: attr(data-short);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.stylebar-main-tab.active{
  border-color: rgba(77,114,219,0.54);
  background: rgba(77,114,219,0.16);
}

.stylebar-scope-select{
  min-width: 168px;
}

.stylebar-lock-wrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px;
}

.stylebar-pick-btn{
  flex: 0 0 auto;
}

.stylebar-global-btn{
  flex: 0 0 auto;
}

.stylebar-pick-btn.active{
  border-color: rgba(77,114,219,0.52);
  background: rgba(77,114,219,0.16);
}

.stylebar-global-btn.active{
  border-color: rgba(77,114,219,0.52);
  background: rgba(77,114,219,0.16);
}

.stylebar-preset-row{
  border: 1px solid rgba(214,220,241,0.24);
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.stylebar-preset-row .select{
  flex: 1 1 220px;
}

.stylebar-preset-row .input{
  flex: 1 1 220px;
}

.stylebar-preset-row .btn{
  flex: 0 0 auto;
}

.stylebar-target-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stylebar-target-btn{
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.stylebar-selection{
  border: 1px solid rgba(215,219,238,0.24);
  border-radius: 12px;
  background: rgba(255,255,255,0.66);
  padding: 10px 11px;
  min-height: 88px;
}

.stylebar-selected-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 4px 10px;
  align-items: center;
}

.stylebar-selected-title{
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 650;
}

.stylebar-selected-meta{
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.stylebar-selected-key{
  font-weight: 700;
  color: rgba(84,98,133,0.95);
}

.stylebar-selected-selector{
  grid-column: 1 / -1;
  display: block;
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(244,248,255,0.74);
  border: 1px solid rgba(215,219,238,0.20);
  border-radius: 8px;
  padding: 4px 6px;
}

.stylebar-state-preview-wrap{
  margin-top: 8px;
  border-top: 1px dashed rgba(112,129,169,0.32);
  padding-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stylebar-state-preview-label{
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.stylebar-state-tabs{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.stylebar-state-tabs::-webkit-scrollbar{
  height: 7px;
}

.stylebar-state-tabs::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(110,128,170,0.42);
}

.stylebar-state-btn{
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1;
}

.stylebar-state-btn.active{
  border-color: rgba(77,114,219,0.54);
  background: rgba(77,114,219,0.16);
}

.stylebar-controls{
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.stylebar-controls::-webkit-scrollbar{ width: 10px; }
.stylebar-controls::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  background: linear-gradient(180deg, rgba(230,233,247,0.62), rgba(170,179,212,0.44));
}

.stylebar-row{
  border: 1px solid rgba(215,219,238,0.24);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  padding: 11px;
  display: grid;
  gap: 10px;
}

.stylebar-section-anchor{
  border-left: 3px solid rgba(77,114,219,0.38);
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
  scroll-margin-top: 8px;
}

.stylebar-section-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
}

.stylebar-section-sub{
  font-size: 12px;
  color: var(--muted);
}

.stylebar-row-group{
  display: grid;
  gap: 8px;
}

.stylebar-box-editor{
  border: 1px dashed rgba(109, 126, 167, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(66px,1fr) minmax(120px,1.35fr) minmax(66px,1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 8px;
}

.stylebar-box-center{
  grid-column: 2;
  grid-row: 2;
  border: 1px solid rgba(112, 129, 169, 0.32);
  border-radius: 10px;
  min-height: 56px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--muted);
  background: rgba(239, 245, 255, 0.52);
}

.stylebar-side-input{
  text-align: center;
  min-height: 34px;
  padding: 6px 8px;
}

.stylebar-side-top{
  grid-column: 2;
  grid-row: 1;
}

.stylebar-side-right{
  grid-column: 3;
  grid-row: 2;
}

.stylebar-side-bottom{
  grid-column: 2;
  grid-row: 3;
}

.stylebar-side-left{
  grid-column: 1;
  grid-row: 2;
}

.stylebar-row-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stylebar-prop-label{
  font-size: 13px;
  font-weight: 650;
}

.stylebar-mini-btn{
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.stylebar-color-tools{
  display: grid;
  gap: 10px;
}

.stylebar-color-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.stylebar-color-picker{
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

.stylebar-color-swatch{
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(95, 112, 149, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36);
}

.stylebar-hex-input{
  width: 128px;
  min-width: 118px;
  flex: 0 0 auto;
  text-transform: uppercase;
}

.stylebar-alpha{
  flex: 1 1 160px;
  min-width: 130px;
  width: 100%;
}

.stylebar-alpha-number{
  width: 72px;
  min-width: 72px;
  min-height: 32px;
  padding: 6px 8px;
}

.stylebar-color-channel{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 74px;
  gap: 8px;
  align-items: center;
}

.stylebar-color-channel-label{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.stylebar-color-raw{
  width: 100%;
}

.stylebar-shadow-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stylebar-shadow-grid .input{
  min-height: 34px;
  padding: 6px 8px;
}

.stylebar-motion-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 102px;
  gap: 8px;
  align-items: center;
}

.stylebar-corner-editor{
  border: 1px dashed rgba(109, 126, 167, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(70px,1fr) 110px minmax(70px,1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 8px;
}

.stylebar-corner-center{
  grid-column: 2;
  grid-row: 2;
  border: 1px solid rgba(112, 129, 169, 0.32);
  border-radius: 10px;
  min-height: 56px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--muted);
  background: rgba(239, 245, 255, 0.52);
}

.stylebar-corner-input{
  text-align: center;
  min-height: 34px;
  padding: 6px 8px;
}

.stylebar-corner-tl{
  grid-column: 1;
  grid-row: 1;
}

.stylebar-corner-tr{
  grid-column: 3;
  grid-row: 1;
}

.stylebar-corner-br{
  grid-column: 3;
  grid-row: 3;
}

.stylebar-corner-bl{
  grid-column: 1;
  grid-row: 3;
}

.stylebar-actions{
  border-top: 1px solid rgba(214,220,241,0.26);
  padding-top: 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}

.stylebar-actions-left,
.stylebar-actions-right{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.stylebar-actions-right{
  justify-content: flex-end;
}

.stylebar-a11y{
  position: absolute;
  right: 10px;
  bottom: 12px;
  z-index: 7;
  max-width: min(340px, calc(100% - 20px));
  border: 1px solid rgba(215,219,238,0.24);
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(170%) blur(12px);
  -webkit-backdrop-filter: saturate(170%) blur(12px);
  box-shadow: 0 12px 24px rgba(36,50,84,0.22);
  padding: 7px 9px;
  display: none;
  gap: 6px;
  pointer-events: none;
}

.stylebar-a11y.is-visible{
  display: grid;
}

.stylebar-a11y-warn{
  color: #7f3f19;
  border: 1px solid rgba(208,138,83,0.38);
  background: rgba(208,138,83,0.14);
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 11px;
}

.stylebar-hover-badge{
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 2147483000;
  pointer-events: none;
  min-width: 140px;
  max-width: min(320px, calc(100vw - 24px));
  border: 1px solid rgba(215,219,238,0.42);
  background: rgba(235, 241, 252, 0.88);
  backdrop-filter: saturate(175%) blur(10px);
  -webkit-backdrop-filter: saturate(175%) blur(10px);
  box-shadow: 0 10px 24px rgba(36,50,84,0.24);
  border-radius: 10px;
  padding: 7px 9px;
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transition: opacity 110ms ease-in, transform 110ms ease-in;
}

.stylebar-hover-badge.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.stylebar-hover-badge-title{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stylebar-hover-badge-meta{
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stylebar-status{
  min-height: 20px;
  font-size: 13px;
  padding-left: 2px;
}

.stylebar-status.is-ok{
  color: #2b7f55;
}

.stylebar-status.is-error{
  color: #a33b3b;
}

[data-stylebar-picked="1"]{
  outline: 2px solid rgba(77,114,219,0.9);
  outline-offset: 2px;
}

[data-stylebar-hovered="1"]{
  outline: 2px dashed rgba(77,114,219,0.74);
  outline-offset: 2px;
}

.stylebar-force-hover,
.stylebar-force-focus,
.stylebar-force-active{
  box-shadow: inset 0 0 0 1px rgba(77,114,219,0.36);
}

@media (max-width: 1260px){
  .stylebar-layout{
    grid-template-columns: 168px minmax(0,1fr);
  }
}

@media (max-width: 1120px){
  .stylebar-panel{
    top: 0;
    left: 0;
    width: calc(100vw - 16px);
    height: 100vh;
    border-radius: 0 18px 18px 0;
  }
  .stylebar-layout{
    grid-template-columns: 1fr;
  }
  .stylebar-layout.is-nav-collapsed{
    grid-template-columns: 1fr;
  }
  .stylebar-side{
    overflow: visible;
  }
  .stylebar-tab-col{
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  }
}

@media (max-width: 840px){
  .stylebar-panel{
    top: 0;
    left: 0;
    width: calc(100vw - 12px);
    height: 100vh;
    border-radius: 0 14px 14px 0;
  }
  .stylebar-top-actions{
    padding: 7px;
  }
  .stylebar-content-col{
    grid-template-rows: auto auto auto auto minmax(0,1fr);
  }
  .stylebar-preset-row{
    align-items: stretch;
  }
  .stylebar-preset-row .btn,
  .stylebar-preset-row .input,
  .stylebar-preset-row .select{
    flex: 1 1 100%;
  }
  .stylebar-state-tabs{
    gap: 6px;
  }
  .stylebar-shadow-grid{
    grid-template-columns: 1fr;
  }
  .stylebar-actions{
    grid-template-columns: 1fr;
  }
  .stylebar-actions-left,
  .stylebar-actions-right{
    justify-content: flex-start;
  }
}

/* ==========================================================
   Utility Classes
   ========================================================== */

.is-hidden{ display: none !important; }
.is-visible-flex{ display: flex !important; }

.u-flex{ display: flex; }
.u-wrap{ flex-wrap: wrap; }
.u-align-center{ align-items: center; }
.u-justify-between{ justify-content: space-between; }
.u-justify-end{ justify-content: flex-end; }
.u-gap-10{ gap: 10px; }
.u-gap-12{ gap: 12px; }

.u-flex-1{ flex: 1; }
.u-flex-2{ flex: 2; }
.u-w-100{ width: 100%; }
.u-w-160{ width: 160px; }
.u-minw-260{ min-width: 260px; }
.u-minw-280{ min-width: 280px; }
.u-maxw-520{ max-width: 520px; }
.u-nowrap{ white-space: nowrap; }

.u-text-right{ text-align: right; }
.u-text-center{ text-align: center; }

.u-cursor-text{ cursor: text; }
.u-cursor-pointer{ cursor: pointer; }

.u-mt-4{ margin-top: 4px; }
.u-mt-8{ margin-top: 8px; }
.u-mt-10{ margin-top: 10px; }
.u-mt-12{ margin-top: 12px; }
.u-mt-14{ margin-top: 14px; }
.u-mb-6{ margin-bottom: 6px; }
.u-mb-10{ margin-bottom: 10px; }

.u-op-70{ opacity: .70; }
.u-op-75{ opacity: .75; }
.u-op-80{ opacity: .80; }
.u-op-85{ opacity: .85; }

.u-resize-vertical{ resize: vertical; }

.modal.is-hidden{ display: none !important; }

/* ==========================================================
   JS Rendered Helpers
   ========================================================== */

.settings-strong{ font-weight: 900; }

.bm-contract-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bm-contract-modal{
  max-width: 980px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 14px;
}

.bm-contract-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 800px){
  .bm-contract-grid{ grid-template-columns: 1fr; }
}

.bm-contract-notes{ min-height: 180px; }

.bm-contract-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.crm-contracts-top-bar{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.crm-contracts-select{
  min-width: 280px;
  max-width: 520px;
}

.crm-cols-dnd{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1100px;
}

.crm-cols-head-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.crm-cols-actions{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.crm-cols-head-title{ font-weight: 800; font-size: 18px; }
.crm-cols-head-sub{ opacity: .75; font-size: 13px; }
.crm-cols-buckets{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .crm-cols-buckets{ grid-template-columns: 1fr; }
}
.crm-cols-bucket-title{ font-weight: 800; margin-bottom: 8px; }
.crm-cols-bucket-hint{ margin-top: 10px; opacity: .7; font-size: 12px; }
.crm-cols-bucket-list{
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px dashed rgba(0,0,0,.08);
  transition: background .16s ease, border-color .16s ease;
}
.crm-cols-bucket-list.is-dragover{
  border-color: rgba(0,0,0,.18);
  background: rgba(255,255,255,.78);
}
.crm-cols-item-grip{
  font-size: 16px;
  opacity: .45;
  cursor: grab;
  user-select: none;
  line-height: 1;
}
.crm-cols-item-label{ font-weight: 650; }
.crm-cols-item.drop-before{ box-shadow: 0 -3px 0 rgba(0,0,0,.20) inset; }

.crm-th-minw-100{ min-width: 100px; }
.crm-th-minw-110{ min-width: 110px; }
.crm-th-minw-120{ min-width: 120px; }
.crm-th-minw-140{ min-width: 140px; }
.crm-th-minw-160{ min-width: 160px; }
.crm-th-minw-220{ min-width: 220px; }

.ws-rte-edit-min-110{ min-height: 110px; }
.ws-rte-edit-min-120{ min-height: 120px; }
.ws-rte-edit-min-240{ min-height: 240px; }

.profile-msg-inline-error-soft{ color: #ffb8b8; }
.profile-msg-inline-error{ color: #b00020; }

/* Calendar helpers moved from JS */
#calModal .cal-day-item{ width: 100%; text-align: left; }

.cal-pill-done{
  background: rgba(46,204,113,.15);
  border: 1px solid rgba(46,204,113,.35);
  color: #1a7f3a;
}

.cal-toggle-done-btn{
  padding: 8px 10px;
  line-height: 1;
}

.cal-day-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cal-day-item-btn-main{
  flex: 1;
  width: 100%;
  text-align: left;
}
.cal-day-item-main{ font-weight: 600; }

#calModal .cal-inline-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

#calModal .cal-time-row{
  display: flex;
  gap: 12px;
}

#calModal .cal-form-actions{
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

#secDashboard #calendarWidget.dash-cal-rows-1{ --dash-cal-rows: 1; }
#secDashboard #calendarWidget.dash-cal-rows-5{ --dash-cal-rows: 5; }
#secDashboard #calendarWidget.dash-cal-rows-6{ --dash-cal-rows: 6; }

#calModal .cal-day24{
  display: grid;
  gap: 12px;
}

#calModal .cal-day24-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#calModal .cal-day24-head.cal-day24-head-sub{
  justify-content: flex-start;
  padding-top: 4px;
}

#calModal .cal-day24-head-title{
  font-size: 13px;
  font-weight: 900;
}

#calModal .cal-day24-allday-wrap,
#calModal .cal-day24-timed-wrap{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255,0.56);
}

#calModal .cal-day24-allday,
#calModal .cal-day24-timed{
  display: grid;
  gap: 8px;
}

#calModal .cal-day24-allday-item,
#calModal .cal-day24-timed-item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255,0.88);
}

#calModal .cal-day24-item-title{
  font-weight: 600;
  line-height: 1.2;
}

/* ==========================================================
   Profile
   ========================================================== */

.profile-wrap{max-width:1180px;margin:0 auto;padding:14px 14px 22px;}
.profile-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start;}
@media (max-width: 920px){.profile-layout{grid-template-columns:1fr;}}

.profile-side .profile-card{position:sticky;top:14px;}
@media (max-width: 920px){.profile-side .profile-card{position:static;}}

.profile-title{font-weight:950;font-size:16px;letter-spacing:-0.01em;}
.profile-sub{opacity:.7;font-size:12px;margin-top:4px;}

.profile-nav{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.profile-nav-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(215,219,238,.28);background:rgba(255, 255, 255,.72);font-weight:900;cursor:pointer;}
.profile-nav-item.is-active{border-color:rgba(235,236,245,.44);background:rgba(239, 245, 255,.78);}

.profile-auth-box{margin-top:12px;display:grid;gap:8px;}
.profile-auth-line{font-size:12px;opacity:.74;word-break:break-word;}
.profile-auth-2fa{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.profile-auth-2fa-status{font-size:12px;font-weight:800;opacity:.82;}

.profile-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.profile-panel-title{font-weight:950;font-size:15px;}
.profile-panel-desc{opacity:.7;font-size:12px;margin-top:4px;}

.profile-settings-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.profile-tab{padding:8px 12px;border-radius:999px;border:1px solid rgba(215,219,238,.28);background:rgba(255, 255, 255,.72);font-weight:900;cursor:pointer;color:var(--text);}
.profile-tab.is-active{background:rgba(239, 245, 255,.78);border-color:rgba(235,236,245,.44);}

.profile-settings-section{padding:0;}
.profile-settings-h{font-weight:950;margin:2px 0 4px;}
.profile-settings-p{opacity:.7;font-size:12px;margin:0 0 10px;}

.profile-account-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:12px;align-items:start;}
@media (max-width: 920px){.profile-account-grid{grid-template-columns:1fr;}}
.profile-account-stack{display:grid;gap:12px;}
.profile-account-card,.profile-account-form{border:1px solid rgba(215,219,238,.28);border-radius:14px;background:rgba(255, 255, 255,.66);padding:12px;display:grid;gap:10px;}
.profile-account-sub{font-weight:900;font-size:12px;opacity:.9;text-transform:uppercase;letter-spacing:.02em;}
.profile-avatar-preview{width:96px;height:96px;border-radius:999px;border:1px solid rgba(215,219,238,.34);background:rgba(241, 247, 255,.66);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;}
.profile-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-avatar-fallback{font-size:28px;font-weight:900;}
.profile-avatar-drop{display:grid;gap:4px;padding:12px;border-radius:12px;border:1px dashed rgba(215,219,238,.42);background:rgba(246, 250, 255,.58);text-align:center;cursor:pointer;transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;}
.profile-avatar-drop:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(207,214,245,.28);border-color:rgba(235,236,245,.62);}
.profile-avatar-drop.is-dragover{border-color:rgba(235,236,245,.72);background:rgba(207,214,245,.14);}
.profile-avatar-drop-title{font-size:12px;font-weight:900;}
.profile-avatar-drop-sub{font-size:11px;opacity:.76;}
.profile-avatar-input{display:none!important;}
.profile-inline-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.profile-msg{font-size:12px;opacity:.85;}
.profile-msg.is-error{color:#a33b3b;}
.profile-msg.is-success{color:#22744a;}
.profile-passkey-list{display:grid;gap:8px;}
.profile-passkey-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid rgba(215,219,238,.22);background:rgba(241, 247, 255,.48);}
.profile-passkey-main{display:grid;gap:2px;min-width:0;}
.profile-passkey-title{font-weight:850;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-passkey-meta{font-size:11px;opacity:.76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.profile-field{display:grid;gap:6px;}
.profile-field span{font-size:12px;font-weight:850;opacity:.8;}

.profile-import-box{border:1px solid rgba(215,219,238,.28);border-radius:14px;background:rgba(255, 255, 255,.66);padding:12px;display:grid;gap:10px;max-width:620px;}
.profile-calendar-grid{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:12px;align-items:start;max-width:1100px;}
@media (max-width: 940px){.profile-calendar-grid{grid-template-columns:1fr;}}
.profile-calendar-label-box{border:1px solid rgba(215,219,238,.28);border-radius:14px;background:rgba(255, 255, 255,.66);padding:12px;display:grid;gap:10px;}
.profile-calendar-label-form{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px;align-items:end;}
@media (max-width: 560px){.profile-calendar-label-form{grid-template-columns:1fr;}}
.profile-calendar-label-list{display:grid;gap:8px;max-height:320px;overflow:auto;padding-right:2px;}
.profile-calendar-label-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(215,219,238,.24);border-radius:12px;background:rgba(241, 247, 255,.52);}
.profile-calendar-label-main{display:flex;align-items:center;gap:8px;min-width:0;}
.profile-calendar-label-chip{width:14px;height:14px;border-radius:999px;border:1px solid rgba(215,219,238,.38);flex:0 0 auto;background:var(--accent-2);}
.profile-calendar-label-name{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-calendar-label-meta{font-size:11px;opacity:.74;white-space:nowrap;}
.profile-calendar-label-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.profile-calendar-nextlist{display:grid;gap:8px;border:1px solid rgba(215,219,238,.24);border-radius:12px;padding:10px;background:rgba(241,247,255,.42);}
.profile-calendar-nextlist-row{display:flex;align-items:center;gap:8px;min-height:28px;cursor:pointer;}
.profile-calendar-nextlist-row input{margin:0;}
.profile-calendar-nextlist-chip{width:12px;height:12px;border-radius:999px;border:1px solid rgba(215,219,238,.44);flex:0 0 auto;background:rgba(111,123,168,.48);}
.profile-calendar-nextlist-chip.tone-tasks{background:rgba(95,121,216,.70);border-color:rgba(95,121,216,.88);}
.profile-calendar-nextlist-chip.tone-tax{background:rgba(208,138,83,.70);border-color:rgba(208,138,83,.88);}
.profile-calendar-nextlist-chip.tone-birthday{background:rgba(199,122,209,.70);border-color:rgba(199,122,209,.88);}
.profile-calendar-nextlist-chip.tone-holiday{background:rgba(115,129,154,.70);border-color:rgba(115,129,154,.88);}
.profile-calendar-nextlist-chip.tone-custom-1{background:rgba(90,130,96,.70);border-color:rgba(90,130,96,.88);}
.profile-calendar-nextlist-chip.tone-custom-2{background:rgba(66,107,164,.70);border-color:rgba(66,107,164,.88);}
.profile-calendar-nextlist-chip.tone-custom-3{background:rgba(64,150,153,.70);border-color:rgba(64,150,153,.88);}
.profile-calendar-nextlist-chip.tone-custom-4{background:rgba(129,99,171,.70);border-color:rgba(129,99,171,.88);}
.profile-calendar-nextlist-chip.tone-custom-5{background:rgba(188,162,74,.74);border-color:rgba(188,162,74,.90);}
.profile-calendar-nextlist-chip.tone-custom-6{background:rgba(126,133,146,.70);border-color:rgba(126,133,146,.88);}
.profile-calendar-nextlist-name{font-size:13px;font-weight:500;}
.profile-ai-box{border:1px solid rgba(215,219,238,.28);border-radius:14px;background:rgba(255, 255, 255,.66);padding:12px;display:grid;gap:10px;max-width:760px;}
.profile-ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.profile-ai-field{display:grid;gap:6px;}
.profile-ai-field > span{font-size:12px;font-weight:850;opacity:.8;}
.profile-ai-check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;}
.profile-ai-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
@media (max-width: 760px){.profile-ai-grid{grid-template-columns:1fr;}}

/* ==========================================================
   Modal Design Unification (glass + consistent forms/tables)
   ========================================================== */

.modal-backdrop,
.ws-overlay,
.bm-contract-overlay,
#calModal .modal-backdrop{
  background: var(--glass-overlay);
}

.modal-dialog,
.ws-task-modal,
.ws-columns-modal,
.bm-contract-modal,
#calModal .modal-dialog,
#calModal .modal-panel{
  background: var(--glass-modal);
  border: 1px solid rgba(183, 198, 226, 0.44);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: saturate(175%) blur(18px);
  -webkit-backdrop-filter: saturate(175%) blur(18px);
}

.modal-head,
#calModal .modal-head,
.crm-cm-header,
.crm-cm-tabs,
.crm-box-title-row{
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.78), rgba(233, 241, 252, 0.52));
  border-bottom-color: rgba(183, 198, 226, 0.38);
}

.modal-note,
.modal .notice,
.ws-task-modal .notice,
#calModal .notice,
.bm-contract-modal .notice{
  background: var(--glass-panel);
}

.modal-btn,
.modal-x,
#calModal .modal-close,
#calModal .modal-x,
.ws-task-modal-x{
  background: var(--glass-modal-strong);
  border-color: rgba(183, 198, 226, 0.48);
}

.modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal select,
.modal textarea,
.ws-task-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ws-task-modal select,
.ws-task-modal textarea,
#calModal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#calModal select,
#calModal textarea,
.bm-contract-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.bm-contract-modal select,
.bm-contract-modal textarea{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--glass-input);
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(23, 34, 58, 0.07);
}

.modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.modal select:focus,
.modal textarea:focus,
.ws-task-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.ws-task-modal select:focus,
.ws-task-modal textarea:focus,
#calModal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#calModal select:focus,
#calModal textarea:focus,
.bm-contract-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.bm-contract-modal select:focus,
.bm-contract-modal textarea:focus{
  border-color: rgba(207,214,245,0.62);
  box-shadow: var(--focus);
}

/* CRM customer modal tabs + panes */
.crm-customer-modal .modal-dialog{
  background: var(--glass-modal);
  border-color: rgba(183, 198, 226, 0.44);
  box-shadow: var(--glass-shadow-lg);
}

.crm-cm-right,
.crm-cm-body,
.crm-cm-comments,
.crm-cm-panel,
.crm-cm-box,
.crm-cm-comment,
.crm-cm-inline-pill,
.crm-cm-kpi{
  background: var(--glass-panel);
  border-color: rgba(183, 198, 226, 0.38);
}

.crm-cm-tab{
  background: var(--glass-panel);
  border-color: rgba(183, 198, 226, 0.42);
  font-weight: 650;
}

.crm-cm-tab:hover{
  background: var(--glass-modal-strong);
}

.crm-cm-tab.active{
  background: var(--glass-input);
  border-color: rgba(207,214,245,0.64);
}

/* Billings table aligned with CRM/Workspace dashboard table */
.crm-billings-wrap,
.crm-billings-table-wrap{
  background: rgba(241, 247, 255, 0.42);
  border-color: rgba(183, 198, 226, 0.38);
  box-shadow: var(--shadow-soft);
}

.crm-billings-table th,
.crm-billings-table td{
  padding: 11px 12px;
  border-bottom: 1px solid rgba(215,219,238,0.24);
}

.crm-billings-table th{
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.96), rgba(236, 242, 252, 0.9));
  color: rgba(42, 52, 74, 0.94);
  font-weight: 700;
}

.crm-billings-table tbody tr:hover{
  background: rgba(207,214,245,0.16);
}

/* Workspace task modal surface harmonization */
.ws-task-head{
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.78), rgba(233, 241, 252, 0.52));
  border-bottom-color: rgba(183, 198, 226, 0.34);
}

.ws-task-modal .ws-rte,
.ws-task-modal .ws-rte-toolbar,
.ws-task-modal .ws-checkbox-row,
.ws-task-modal .ws-comment,
.ws-task-modal .ws-dropzone{
  background: var(--glass-panel);
  border-color: rgba(183, 198, 226, 0.38);
}

/* Calendar / event / day overview modal cards in same glass family */
#calModal .modal-dialog,
#calModal .modal-panel{
  background: var(--glass-modal);
}

#calModal .modal-body,
#calModal .cal-day24-allday-wrap,
#calModal .cal-day24-timed-wrap,
#calModal .cal-day-item,
#calModal .cal-day24-allday-item,
#calModal .cal-day24-timed-item{
  background: var(--glass-panel);
  border-color: rgba(183, 198, 226, 0.38);
}

/* ==========================================================
   Vue Fallback Layout Guards
   - Keeps critical CRM/table/modal layout stable even if app css cache lags.
   ========================================================== */
#vue-dashboard-root .vue-dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:38px;
  column-gap:0;
}

#dash-crm-vue .crm-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
#dash-crm-vue .crm-left{
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(170px,220px);
  align-items:center;
  gap:10px;
  min-width:0;
}
#dash-crm-vue .crm-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}
#dash-workspace-vue .dash-workspace-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
}
#dash-workspace-vue .dash-workspace-head-actions{
  display:grid;
  grid-template-columns:minmax(320px,1fr) auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
}

.vue-customer-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(12,17,30,.34);
  backdrop-filter:blur(4px);
}
.vue-customer-modal{
  width:min(1520px,95vw);
  height:min(900px,calc(100vh - 56px));
  max-height:calc(100vh - 56px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.vue-customer-content-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 0;
  min-height:0;
  flex:1;
}
.vue-customer-content-shell.is-comments-open{
  grid-template-columns:minmax(0,1fr) minmax(320px,34%);
}
.vue-customer-main{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.vue-customer-body{
  min-height:0;
  overflow:auto;
  flex:1;
}
.vue-customer-comments{
  min-width:0;
  height:100%;
  overflow:hidden;
}
.vue-customer-comments-list{
  min-height:0;
  height:100%;
  overflow:auto;
}

@media (max-width: 1180px){
  #dash-crm-vue .crm-head{
    grid-template-columns:1fr;
    row-gap:10px;
  }
  #dash-crm-vue .crm-left{
    grid-template-columns:1fr;
  }
  #dash-crm-vue .crm-right{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  #dash-workspace-vue .dash-workspace-head{
    grid-template-columns:1fr;
  }
  #dash-workspace-vue .dash-workspace-head-actions{
    grid-template-columns:1fr auto;
  }
}