/* ==========================================================================
   ASSANJ — Premium Business Operating System
   Design language: architectural, high-contrast, editorial warm-paper minimalism.
   Palette: beige/cream/stone with warm-brown & gold accents.
   Type: Fraunces (display serif) + Inter (UI) + IBM Plex Mono (figures).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- strict 3-tone visual design system ---- */
  --bg:            #FFFFFF;   /* primary background: pure white */
  --bg-soft:       #FAF8F5;   /* secondary background: soft off-white cream */
  --sidebar-bg:    #FAF8F5;   /* secondary background: soft cream */
  --card:          #FAF8F5;   /* secondary background: soft cream */
  --card-raised:   #FFFFFF;   /* raised: white */
  --border:        #E8E2D5;   /* secondary divider/border: beige/cream */
  --border-strong: #1A1A1A;   /* key accents, borders: black */
  
  --accent:        #1A1A1A;   /* primary text, key accents: black */
  --accent-dark:   #1A1A1A;
  --accent-soft:   #E8E2D5;   /* secondary accents: beige */
  
  --warning:       #1A1A1A;   /* semantic colors mapped to 3-tone system */
  --warning-soft:  #E8E2D5;
  
  --error:         #1A1A1A;
  --error-soft:    #E8E2D5;
  
  --success:       #1A1A1A;
  --success-soft:  #E8E2D5;
  
  --text:          #1A1A1A;   /* primary text: black */
  --text-soft:     #575757;   /* readable dark gray */
  --text-faint:    #8E8E8E;   /* clear metadata gray */
  
  /* ---- shadows (prononced elevation flattened for architectural feel) ---- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  
  /* ---- layout / spacing ---- */
  --sidebar-w: 248px;
  --topbar-h: 68px;
  
  /* ---- typography ---- */
  --font-display: 'Fraunces', serif;
  --font-ui: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-ui);
  background-color: var(--bg);
  /* Faint diagonal paper texture pattern in strict neutral tone */
  background-image: repeating-linear-gradient(45deg, rgba(26, 26, 26, 0.006) 0px, rgba(26, 26, 26, 0.006) 1px, transparent 1px, transparent 8px);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); font-weight: 500; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
p{ margin:0; }
button{ font-family: inherit; }
a{ color: inherit; text-decoration: none; }
svg{ width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
::selection{ background: var(--border); }

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }

:focus-visible{ outline: 2px solid var(--warning); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   APP SHELL & SIDEBAR (Change 2)
   ========================================================================== */

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

.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 24px 14px;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 40;
  transition: transform .3s ease;
}

.brand{
  display:flex; align-items:center; gap:10px;
  padding: 6px 10px 24px 10px;
}
/* Sharp rectangular brand mark with gold-to-brown gradient */
.brand-mark{
  width:52px; height:52px;
  background: transparent;
  display:flex; align-items:center; justify-content:center;
}
.brand-name{ font-family: var(--font-display); font-size:17px; font-weight:700; line-height:1.1; }
.brand-sub{ font-size:10px; color: var(--text-soft); letter-spacing:0.1em; text-transform:uppercase; font-weight:600; }

.nav-group{ margin-bottom: 8px; }
.nav-label{
  font-size:10px; text-transform:uppercase; letter-spacing:0.1em;
  color: var(--text-soft); padding: 14px 12px 6px; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius: 8px;
  color: var(--text-soft); font-size: 12px;
  font-weight:600; text-transform: uppercase; letter-spacing: 0.08em;
  cursor:pointer; position:relative; margin-bottom:3px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.8; color: var(--text); }
.nav-item:hover{
  background: var(--border);
  color: var(--text);
  transform: translateX(1px);
}
/* Active items: solid cream/beige background block and black text */
.nav-item.active{
  background: var(--accent-soft);
  color: var(--text);
  font-weight:700;
}
.nav-item.active svg{ opacity:1; color: var(--text); }
.nav-item .nav-badge{
  margin-left:auto; font-size:10.5px; font-family: var(--font-mono);
  background: var(--border-strong); color: #FFFFFF;
  padding:1px 6px; border-radius:3px; font-weight:600;
}
.nav-item.active .nav-badge{ background: var(--border-strong); color: #FFFFFF; }

.sidebar-footer{
  margin-top:auto; padding: 16px 10px 4px; 
  border-top:1.5px solid var(--border-strong); /* Stronger border */
  font-size:11px; color: var(--text-soft); line-height:1.5; font-weight:500;
}

/* ---- main column ---- */
.main-col{ margin-left: var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---- topbar (Change 3) ---- */
.topbar{
  height: var(--topbar-h); flex-shrink:0;
  display:flex; align-items:center; gap:16px;
  padding: 0 26px;
  background: rgba(241, 233, 218, 0.88); /* Matches background */
  backdrop-filter: blur(14px); /* Increased blur */
  border-bottom: 1.5px solid var(--border-strong); /* Darker and thicker border */
  position: sticky; top:0; z-index:30;
}
.menu-toggle{ display:none; }
.breadcrumb{
  display:flex; align-items:center; gap:7px; font-size:11.5px; color: var(--text-soft); white-space:nowrap;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.breadcrumb b{ color: var(--text); font-weight:700; }
.breadcrumb .sep{ color: var(--text-faint); }

.global-search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:9px;
  background: var(--card); border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; color: var(--text-soft); font-size:13.5px; cursor:pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.global-search:hover{ border-color: var(--border-strong); }
.global-search kbd{
  margin-left:auto; font-family: var(--font-mono); font-size:10.5px;
  background: var(--bg-soft); border:1px solid var(--border-strong); border-radius:3px; padding:1px 6px;
}

.topbar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }

.icon-btn{
  width:38px; height:38px; border-radius:5px; border:1px solid transparent;
  background:transparent; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--text-soft); position:relative; transition: all .15s ease;
}
.icon-btn:hover{ background: var(--card); border-color: var(--border-strong); color: var(--text); }
.icon-btn svg{ width:19px; height:19px; }
.dot-badge{
  position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; /* Circle exception */
  background: var(--error); border:2px solid var(--bg-soft);
}

/* ---- buttons (Change 6) ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; transition: all .15s ease; white-space:nowrap;
  font-family: var(--font-ui);
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ 
  background: var(--border-strong); color:#FFFFFF; 
  box-shadow: none;
}
.btn-primary:hover{ 
  background: #000000; 
  transform: translateY(-1px); 
  box-shadow: none;
}
.btn-ghost{ 
  background: #FFFFFF; color: var(--text); 
  border: 1px solid var(--border);
}
.btn-ghost:hover{ border-color: var(--border-strong); background: var(--bg-soft); }
.btn-soft{ background: var(--accent-soft); color: var(--text); border: 1px solid var(--border); }
.btn-soft:hover{ background: #D9D2C4; border-color: var(--border-strong); }
.btn-danger{ background: var(--bg-soft); color: var(--text); border: 1px dashed var(--border-strong); }
.btn-danger:hover{ background: #D9D2C4; }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:8px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

.profile-chip{
  display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:5px;
  cursor:pointer; border:1.5px solid transparent; transition: all .15s ease;
}
.profile-chip:hover{ border-color: var(--border-strong); background: var(--card); }
.avatar{
  width:32px; height:32px; border-radius:5px; background: var(--accent-dark); /* Reduced to 5px */
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:13px; flex-shrink:0;
}
.avatar.sm{ width:26px; height:26px; font-size:11px; border-radius:4px; }
.avatar.lg{ width:58px; height:58px; font-size:20px; border-radius:6px; }
.profile-chip .who{ line-height:1.2; }
.profile-chip .who b{ display:block; font-size:13px; font-weight:700; }
.profile-chip .who span{ font-size:11px; color: var(--text-soft); }

/* ---- content ---- */
.content{ padding: 26px 30px 60px; flex:1; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-size:28px; letter-spacing: -0.02em; font-weight:700; } /* Change 14 */
.page-head .page-sub{ color: var(--text-soft); font-size:13.5px; margin-top:4px; }
.page-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.view{ animation: fadeUp .28s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ==========================================================================
   GRID & CARDS (Change 1 & 5)
   ========================================================================== */

.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width:1200px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .grid-4,.grid-3,.grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border:1px solid var(--border); border-radius: 8px;
  box-shadow: none;
  transition: border-color .2s ease, transform .2s ease;
  position: relative;
}
/* Hover effect: thin black border highlights for premium feel */
.card.hoverable:hover{ border-color: var(--border-strong); transform: translateY(-1px); }
.card-pad{ padding:16px 18px; } /* Slightly reduced padding */

/* KPI Cards (Change 4) */
.kpi{
  padding:16px 18px; position:relative; overflow:hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .2s ease, transform .2s ease;
}
.kpi:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color: var(--text-soft); font-weight:600; }
.kpi-icon{ 
  width:30px; height:30px; border-radius:5px; 
  background: var(--bg-soft); 
  display:flex; align-items:center; justify-content:center; color: var(--text); 
  border: 1px solid var(--border);
}
.kpi-icon svg{ width:16px; height:16px; }
/* Value numbers: elegant display serif matching KRRESVA portal */
.kpi-value{ font-family: var(--font-display); font-size:28px; font-weight:500; letter-spacing:-0.01em; }
.kpi-value sup{ font-size:13px; color: var(--text-soft); font-weight:400; margin-left:2px;}
.kpi-delta{ display:flex; align-items:center; gap:5px; font-size:12px; margin-top:8px; font-weight:600; }
.kpi-delta.up{ color: var(--success); }
.kpi-delta.down{ color: var(--error); }
.kpi-delta span{ color: var(--text-soft); font-weight:500; }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin: 30px 0 14px; }
.section-title h3{ font-size:16.5px; font-weight: 700; }
.section-title .link{ font-size:12.5px; color: var(--accent); font-weight:700; cursor:pointer; }
.section-title .link:hover{ text-decoration:underline; }

/* ==========================================================================
   BADGES & TAGS (Change 12)
   ========================================================================== */

.badge{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:600;
  padding:3px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border);
  position:relative;
}
.badge-success, .badge-warning, .badge-error, .badge-neutral {
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--border);
}
.badge-accent {
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--border-strong);
  font-weight: 700;
}

.tag{
  font-size:11px; padding:3px 9px; border-radius:3px; background: var(--bg-soft);
  border:1px solid var(--border-strong); color: var(--text); font-weight:600; /* More contrast */
}

/* ==========================================================================
   PROGRESS BARS (Change 13)
   ========================================================================== */

.progress{ height:6px; border-radius:3px; background: var(--border); overflow:hidden; }
.progress > div{ 
  height:100%; 
  background: var(--border-strong);
  border-radius:3px; 
  transition: width .4s ease; 
}
.progress.thin{ height:6px; }

/* priority dots conforming to strict 3-tone system */
.priority-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align: middle; }
.priority-high{ background: var(--border-strong); }
.priority-medium{ background: transparent; border: 1.5px solid var(--border-strong); }
.priority-low{ background: var(--border); }
.priority-urgent{ background: var(--border-strong); box-shadow: 0 0 0 1.5px var(--border-strong); }

/* ==========================================================================
   TABLES (Change 8)
   ========================================================================== */

.table-wrap{ overflow-x:auto; border:1.5px solid var(--border-strong); border-radius: 6px; background: var(--card); }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px; }
.data-table thead th{
  text-align:left; padding:12px 16px; font-size:11px; text-transform:uppercase; 
  letter-spacing:0.08em; /* Editorial spacing */
  color: var(--text); 
  background: var(--bg-soft); /* Darker warm background header */
  border-bottom:1.5px solid var(--border-strong); 
  font-weight:700; cursor:pointer; user-select:none;
  white-space:nowrap; opacity: 0.85; /* Reduced opacity header text */
}
.data-table thead th:hover{ color: var(--text); opacity: 1; }
.data-table thead th .sort-arrow{ margin-left:4px; opacity:.5; font-size:10px; }
.data-table tbody tr{ border-bottom:1px solid var(--border); transition: background .15s ease; cursor:pointer; }
.data-table tbody tr:last-child{ border-bottom:none; }
/* Row hover: gold-tinted warm background & left border indicator */
.data-table tbody tr:hover{ background: rgba(185, 137, 62, 0.06); }
.data-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.data-table td{ padding:13px 16px; vertical-align:middle; }
.cell-primary{ font-weight:700; }
.cell-sub{ color: var(--text-soft); font-size:12px; }
.cell-mono{ font-family: var(--font-mono); }

/* toolbar for list views */
.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.search-input{
  display:flex; align-items:center; gap:8px; background: var(--card); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; font-size:13px; min-width:220px; flex:1; max-width:320px;
}
.search-input input{ border:none; outline:none; background:transparent; font-size:13px; width:100%; font-family: var(--font-ui); color: var(--text); }
.search-input svg{ width:15px; height:15px; color: var(--text-soft); }
.toolbar select{
  padding:8px 12px; border-radius:5px; border:1.5px solid var(--border-strong); background: var(--card);
  font-size:13px; color: var(--text-soft); cursor:pointer; font-family: var(--font-ui); font-weight: 600;
}
.view-toggle{ display:flex; border:1px solid var(--border-strong); border-radius:5px; overflow:hidden; }
.view-toggle button{ padding:8px 12px; background: var(--card); border:none; cursor:pointer; color: var(--text-faint); display:flex; }
.view-toggle button.active{ background: var(--accent); color:#fff; }
.view-toggle svg{ width:16px; height:16px; }

/* ==========================================================================
   PROJECT / CLIENT / LEAD CARDS
   ========================================================================== */

.proj-card{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; cursor:pointer; }
.proj-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.proj-card-title{ font-family: var(--font-display); font-size:16.5px; font-weight:700; } /* Increased to 700 */
.proj-card-client{ font-size:12.5px; color: var(--text-soft); margin-top:2px; }
.proj-card-meta{ display:flex; justify-content:space-between; font-size:12px; color: var(--text-soft); }
.proj-card-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.proj-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(228, 218, 196, 0.4); } /* Solid low opacity */

.client-card{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; cursor:pointer; }
.client-card-top{ display:flex; align-items:center; gap:12px; }
.client-card-name{ font-family: var(--font-display); font-size:15.5px; font-weight:700; }
.client-card-industry{ font-size:12px; color: var(--text-soft); }

/* ==========================================================================
   KANBAN BOARD (Change 7)
   ========================================================================== */

.kanban{ display:flex; gap:16px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.kanban-col{
  min-width:270px; max-width:270px; 
  background: #E8DEC8; /* Darker than page background for separation */
  border:1.5px solid var(--border-strong);
  border-radius: 6px; /* Reduced to 6px */
  display:flex; flex-direction:column; max-height: calc(100vh - 260px);
}
.kanban-col.drag-over{ 
  border-left: 3px solid var(--warning) !important; 
  background: var(--accent-soft); 
}
.kanban-col-head{ padding:14px; border-bottom:1.5px solid var(--border-strong); flex-shrink:0; }
.kanban-col-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.kanban-col-title .dot{ width:10px; height:10px; border-radius:50%; } /* Color dot size 10px */
/* Column count badge: sharp rectangular pill */
.kanban-col-count{ 
  font-family: var(--font-mono); font-size:11px; color: var(--text); 
  background: var(--card); border-radius:3px; border: 1px solid var(--border-strong);
  padding:1px 6px; margin-left:auto; font-weight:600;
}
.kanban-col-value{ font-family: var(--font-mono); font-size:12px; color: var(--accent-dark); margin-top:4px; font-weight:700; }
.kanban-col-body{ padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:10px; min-height:60px; }

.lead-card, .content-card{
  background: var(--card); border:1px solid var(--border-strong); border-radius:5px; padding:12px; /* Reduced radii to 5px */
  cursor:grab; box-shadow: var(--shadow-md); transition: box-shadow .2s ease, transform .2s ease, opacity .15s ease;
  position: relative;
}
.lead-card::after, .content-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--warning);
  opacity: 0;
  transition: opacity .2s ease;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.lead-card:hover::after, .content-card:hover::after {
  opacity: 1;
}
.lead-card:hover, .content-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* More dramatic hover shadow */
.lead-card.dragging, .content-card.dragging{ opacity:.4; }
.lead-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:6px; margin-bottom:8px; }
.lead-card-name{ font-weight:700; font-size:13.5px; }
.lead-card-owner{ font-size:11.5px; color: var(--text-soft); margin-top:1px; }
.lead-card-row{ display:flex; justify-content:space-between; font-size:11.5px; color: var(--text-soft); margin-top:6px; }
.lead-card-value{ font-family: var(--font-mono); font-weight:600; color: var(--accent-dark); }
.lead-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:9px; padding-top:9px; border-top:1px solid rgba(228, 218, 196, 0.4); font-size:11px; color: var(--text-soft); }

.content-card-thumb{ height:70px; border-radius:4px; background: linear-gradient(135deg,var(--accent-soft),var(--bg-soft)); display:flex; align-items:center; justify-content:center; color: var(--accent-dark); margin-bottom:9px; font-size:11px; font-weight:700; }
.content-card-title{ font-weight:700; font-size:13px; margin-bottom:5px; }
.content-card-hook{ font-size:11.5px; color: var(--text-soft); margin-bottom:8px; line-height:1.4; }

/* ==========================================================================
   TASKS
   ========================================================================== */

.task-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.task-row:last-child{ border-bottom:none; }
.task-check{
  width:19px; height:19px; border-radius:3px; border:1.5px solid var(--border-strong); flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: all .15s ease; background: var(--card);
}
.task-check.checked{ background: var(--success); border-color: var(--success); color:#fff; }
.task-check svg{ width:12px; height:12px; opacity:0; transition: opacity .1s ease; }
.task-check.checked svg{ opacity:1; }
.task-title{ font-size:13.5px; font-weight:600; flex:1; }
.task-title.done{ text-decoration:line-through; color: var(--text-soft); opacity: 0.7; }
.task-meta{ display:flex; align-items:center; gap:10px; font-size:11.5px; color: var(--text-soft); }

/* ==========================================================================
   CALENDAR
   ========================================================================== */

.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav{ display:flex; align-items:center; gap:8px; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap:8px; }
.cal-dow{ font-size:11px; text-transform:uppercase; color: var(--text-soft); font-weight:700; text-align:center; padding-bottom:4px; letter-spacing:0.1em;}
.cal-cell{
  background: var(--card); border:1px solid var(--border); border-radius:6px; min-height:96px; /* Reduced to 6px */
  padding:8px; display:flex; flex-direction:column; gap:4px; cursor:pointer; transition: box-shadow .15s ease;
}
.cal-cell:hover{ box-shadow: var(--shadow-md); }
.cal-cell.muted{ opacity:.4; }
.cal-cell.today{ border-color: var(--warning); box-shadow: 0 0 0 1.5px var(--warning) inset; }
.cal-daynum{ font-family: var(--font-mono); font-size:12px; font-weight:600; color: var(--text); }
.cal-event{ font-size:10px; padding:2px 6px; border-radius:3px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:900px){ .cal-cell{ min-height:64px; } .cal-event{ display:none; } .cal-cell .cal-dot-row{ display:flex; gap:3px; } }

/* ==========================================================================
   TABS (Change 9)
   ========================================================================== */

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab{ 
  padding:11px 16px; font-size:13.5px; font-weight:600; color: var(--text-soft); 
  cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; 
  transition: all .15s ease; 
}
.tab:hover{ color: var(--text); background: var(--bg-soft); }
.tab.active{ 
  color: var(--text); 
  border-bottom-color: var(--border-strong);
  font-weight: 700;
}

.detail-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.back-link{ display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-soft); cursor:pointer; margin-bottom:14px; font-weight:700; }
.back-link:hover{ color: var(--accent); }
.back-link svg{ width:15px; height:15px; }

.info-list{ display:flex; flex-direction:column; }
.info-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color: var(--text-soft); }
.info-row .v{ font-weight:700; text-align:right; }

.timeline{ display:flex; flex-direction:column; }
.timeline-item{ display:flex; gap:12px; padding-bottom:18px; position:relative; }
.timeline-item::before{ content:''; position:absolute; left:5px; top:16px; bottom:0; width:1.5px; background: var(--border-strong); }
.timeline-item:last-child::before{ display:none; }
.timeline-dot{ width:11px; height:11px; border-radius:50%; background: var(--accent); margin-top:3px; flex-shrink:0; box-shadow:0 0 0 3px var(--accent-soft); }
.timeline-content b{ font-size:13px; font-weight:700; }
.timeline-content p{ font-size:12px; color: var(--text-soft); margin-top:2px; }
.timeline-content span{ font-size:11px; color: var(--text-soft); }

/* ==========================================================================
   MODALS (Change 11)
   ========================================================================== */

.overlay{
  position:fixed; inset:0; background: rgba(31, 25, 18, 0.45); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
  animation: overlayIn .18s ease both;
}
@keyframes overlayIn{ from{opacity:0;} to{opacity:1;} }
.modal{
  background: var(--card-raised); border-radius: 8px;
  border-top: 1px solid var(--border-strong);
  width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto; 
  box-shadow: var(--shadow-lg); /* Stronger shadow */
  animation: modalIn .22s cubic-bezier(.2,.9,.3,1) both;
  border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.modal.modal-lg{ max-width:760px; }
@keyframes modalIn{ from{opacity:0; transform: translateY(10px) scale(.98);} to{opacity:1; transform:none;} }
/* Header has a slightly different background to body */
.modal-head{ 
  display:flex; align-items:center; justify-content:space-between; 
  padding:18px 24px; border-bottom:1px solid var(--border-strong); 
  position:sticky; top:0; background: var(--bg-soft); z-index:2; 
}
.modal-head h3{ font-size:19px; font-weight: 700; } /* Increased title size by 1px */
/* Sharper close button with visible border on hover */
.modal-close{ 
  width:30px; height:30px; border-radius:4px; border:1px solid transparent; 
  background: transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color: var(--text-soft); 
  transition: all 0.15s ease;
}
.modal-close:hover{ background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }
.modal-body{ padding:22px 24px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--border-strong); background: var(--card-raised); }

/* ==========================================================================
   FORMS & INPUTS (Change 10)
   ========================================================================== */

.form-group{ margin-bottom:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group label{ display:block; font-size:12.5px; font-weight:700; color: var(--text); margin-bottom:6px; } /* Weight 700, more contrast */
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:10px 12px; 
  border:1.5px solid var(--border-strong); /* Stronger border at rest */
  border-radius: 5px; /* Reduced to 5px */
  font-size:13.5px;
  background: var(--bg-soft); font-family: var(--font-ui); color: var(--text); 
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color: var(--warning); 
  box-shadow: 0 0 0 3px rgba(185, 137, 62, 0.25); /* Prominent gold ring with offset shadow */
  background: var(--card-raised);
}
.form-group textarea{ resize:vertical; min-height:80px; }
.form-hint{ font-size:11px; color: var(--text-soft); margin-top:5px; }

.toast-wrap{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:10px; background: var(--card-raised); border:1.5px solid var(--border-strong);
  border-radius:5px; padding:12px 16px; box-shadow: var(--shadow-lg); font-size:13.5px; font-weight:600;
  animation: toastIn .25s cubic-bezier(.2,.9,.3,1) both; max-width:340px;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(20px);} to{opacity:1; transform:none;} }
.toast.out{ animation: toastOut .2s ease both; }
@keyframes toastOut{ to{ opacity:0; transform: translateX(20px);} }
.toast-icon{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.toast-icon svg{ width:13px; height:13px; }
.toast.success .toast-icon{ background: var(--success); }
.toast.error .toast-icon{ background: var(--error); }
.toast.info .toast-icon{ background: var(--accent); }

/* ==========================================================================
   EMPTY STATES & LOADING (Change 15)
   ========================================================================== */

.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; color: var(--text-soft); }
.empty-state .empty-icon{ width:52px; height:52px; border-radius:5px; background: var(--bg); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color: var(--text-soft); border: 1px solid var(--border-strong); }
.empty-state .empty-icon svg{ width:24px; height:24px; }
.empty-state h4{ color: var(--text); font-size:15px; margin-bottom:6px; font-weight:700; }
.empty-state p{ font-size:13px; max-width:280px; }

.skeleton{ background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 37%, var(--bg-soft) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; border-radius:5px; }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.skeleton-card{ height:110px; border-radius: 6px; }

.loading-screen{
  position:fixed; inset:0; background: var(--bg); z-index:999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; transition: opacity .4s ease, visibility .4s ease;
}
.loading-screen.hide{ opacity:0; visibility:hidden; }
.loading-mark{
  width:110px; height:110px; background: transparent;
  display:flex; align-items:center; justify-content:center;
  animation: pulseMark 1.6s ease-in-out infinite;
}
@keyframes pulseMark{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
.loading-text{ font-size:12.5px; color: var(--text-soft); letter-spacing:0.1em; text-transform:uppercase; font-weight:700; }
.loading-bar{ width:180px; height:3px; background: var(--border-strong); border-radius:3px; overflow:hidden; }
.loading-bar > div{ height:100%; width:40%; background: var(--accent); border-radius:3px; animation: loadBar 1.1s ease-in-out infinite; }
@keyframes loadBar{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(340%);} }

/* ==========================================================================
   DROPDOWNS & OVERLAYS
   ========================================================================== */

.dropdown{
  position:absolute; top:calc(100% + 8px); right:0; background: var(--card-raised); border:1.5px solid var(--border-strong);
  border-radius:6px; box-shadow: var(--shadow-lg); min-width:260px; z-index:60; overflow:hidden;
  animation: dropIn .16s ease both;
}
@keyframes dropIn{ from{opacity:0; transform: translateY(-4px);} to{opacity:1; transform:none;} }
.dropdown-head{ padding:13px 16px; border-bottom:1.5px solid var(--border-strong); font-size:12.5px; font-weight:700; color: var(--text); }
.dropdown-item{ display:flex; gap:10px; align-items:flex-start; padding:12px 16px; cursor:pointer; transition: background .12s ease; }
.dropdown-item:hover{ background: var(--bg-soft); }
.dropdown-item .n-icon{ width:30px; height:30px; border-radius:5px; background: var(--accent-soft); color: var(--accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dropdown-item .n-icon svg{ width:15px; height:15px; }
.dropdown-item p{ font-size:12.5px; line-height:1.4; }
.dropdown-item span{ font-size:11px; color: var(--text-soft); }
.dropdown-menu-item{ display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.dropdown-menu-item:hover{ background: var(--bg-soft); }
.dropdown-menu-item svg{ width:16px; height:16px; color: var(--text-soft); }
.dropdown-divider{ height:1px; background: var(--border-strong); margin:4px 0; }

.quick-add-menu{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:8px; }
.quick-add-menu .qa-item{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:5px; cursor:pointer; text-align:center; }
.quick-add-menu .qa-item:hover{ background: var(--bg-soft); }
.quick-add-menu .qa-item .n-icon{ width:36px; height:36px; }
.quick-add-menu .qa-item span{ font-size:11.5px; font-weight:700; color: var(--text); }

.chart-card{ padding:16px 18px; }
.chart-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.chart-legend{ display:flex; gap:14px; font-size:11.5px; color: var(--text-soft); }
.chart-legend span{ display:flex; align-items:center; gap:5px; }
.chart-legend i{ width:8px; height:8px; border-radius:2px; display:inline-block; }
.chart-wrap{ position:relative; height:230px; }
.chart-wrap.short{ height:170px; }

.switch{ position:relative; width:40px; height:23px; }
.switch input{ display:none; }
.switch .track{ position:absolute; inset:0; background: var(--border-strong); border-radius:20px; cursor:pointer; transition: background .2s ease; }
.switch .track::before{ content:''; position:absolute; width:17px; height:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform .2s ease; box-shadow: var(--shadow-sm); }
.switch input:checked + .track{ background: var(--accent); }
.switch input:checked + .track::before{ transform: translateX(17px); }

.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--border); gap:16px; }
.settings-row:last-child{ border-bottom:none; }
.settings-row .lab b{ display:block; font-size:13.5px; font-weight:700; }
.settings-row .lab span{ font-size:12px; color: var(--text-soft); }

.search-modal{ max-width:560px; padding:0; }
.search-modal input{ width:100%; border:none; padding:20px 24px; font-size:16px; outline:none; background:transparent; font-family: var(--font-ui); color: var(--text); }
.search-results{ border-top:1px solid var(--border-strong); max-height:360px; overflow-y:auto; }
.search-result{ display:flex; align-items:center; gap:12px; padding:12px 24px; cursor:pointer; }
.search-result:hover{ background: var(--bg-soft); }
.search-result .r-icon{ width:32px; height:32px; border-radius:5px; background: var(--bg-soft); display:flex; align-items:center; justify-content:center; color: var(--accent-dark); flex-shrink:0; }
.search-result .r-icon svg{ width:15px; height:15px; }
.search-result b{ font-size:13.5px; display:block; font-weight:700; }
.search-result span{ font-size:11.5px; color: var(--text-soft); }

/* ==========================================================================
   DAILY CHECKLIST CUSTOM STYLING
   ========================================================================== */

.daily-task-row .edit-daily-btn {
  opacity: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-soft);
}
.daily-task-row:hover .edit-daily-btn {
  opacity: 0.5;
}
.daily-task-row .edit-daily-btn:hover {
  opacity: 1;
  color: var(--accent);
}
.daily-task-edit-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--accent);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 0;
  margin: 0;
  outline: none;
}

/* ==========================================================================
   DELIVERY MODULE — AUTH SCREEN, CHECKLIST, TASKS, CHAT
   ========================================================================== */

.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--bg); padding:20px;
}
.auth-card{
  width:100%; max-width:380px; background: var(--card); border:1.5px solid var(--border-strong);
  border-radius: 8px; padding:36px 32px; box-shadow: var(--shadow-lg); text-align:center;
}
.auth-mark{
  width:90px; height:90px; background: transparent;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.auth-card h2{ font-size:20px; margin-bottom:4px; font-weight:700; }
.auth-sub{ font-size:13px; color:var(--text-soft); margin-bottom:22px; }
.auth-card .form-group{ text-align:left; }
.auth-btn{ width:100%; justify-content:center; margin-top:6px; }
.auth-error{
  background: var(--error-soft); color: var(--error); font-size:12.5px; padding:10px 12px;
  border-radius:5px; margin-bottom:16px; text-align:left;
}
.auth-hint{ font-size:11.5px; color: var(--text-soft); margin-top:18px; line-height:1.6; }

.checklist-row{
  display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13.5px; cursor:pointer;
}
.checklist-row input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--accent); flex:none; }
.checklist-row span.done{ text-decoration: line-through; color: var(--text-soft); opacity: 0.7; }
.checklist-row .icon-btn.sm{ margin-left:auto; opacity:0; width:26px; height:26px; }
.checklist-row:hover .icon-btn.sm{ opacity:1; }
.icon-btn.sm{ width:26px; height:26px; padding:0; border-radius: 4px; }
.icon-btn.sm svg{ width:14px; height:14px; }

.chat-bubble{
  max-width:78%; background: var(--bg-soft); border:1px solid var(--border-strong); border-radius:5px;
  padding:9px 12px; align-self:flex-start;
}
.chat-bubble.mine{
  align-self:flex-end; background: var(--accent-soft); border-color: var(--border);
}

/* ==========================================================================
   PORTAL UPGRADES — TIME WIDGET, BUGS, DECISONS, DROPZONES
   ========================================================================== */

/* Time Tracking & Timers */
.timer-widget {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--bg-soft); border: 1.5px solid var(--border-strong);
  border-radius: 6px; font-family: var(--font-ui); margin-bottom: 14px;
}
.timer-display {
  font-family: var(--font-mono); font-size: 18px; font-weight: 600;
  color: var(--text); background: var(--card); padding: 4px 10px;
  border-radius: 4px; border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; gap: 6px;
}
.timer-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--error);
  animation: pulse-glow 1.4s infinite;
}
.btn-timer-start { background: var(--success); color: #fff; }
.btn-timer-start:hover { background: #45573f; }
.btn-timer-stop { background: var(--error); color: #fff; }
.btn-timer-stop:hover { background: #7c3127; }

/* Bug Tracker Kanban and Cards */
.severity-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 0.08em;
}
.severity-Critical { background: var(--error-soft); color: var(--error); border: 1px solid var(--error); }
.severity-High { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.severity-Medium { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); }
.severity-Low { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); }

.bug-card {
  padding: 12px; margin-bottom: 10px; border-left: 4px solid var(--border-strong);
  background: var(--card); border-radius: 4px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.bug-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bug-card.Critical { border-left-color: var(--error); }
.bug-card.High { border-left-color: var(--warning); }
.bug-card.Medium { border-left-color: var(--accent); }
.bug-card.Low { border-left-color: var(--success); }

.bug-card-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--text); }
.bug-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-soft); }

/* Decision Log */
.decision-card {
  border-left: 4px solid var(--accent); padding: 16px; margin-bottom: 12px;
  background: var(--card); border-radius: 4px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.decision-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.decision-impact {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-dark);
}

/* File Drag & Drop */
.file-drop-zone {
  border: 2px dashed var(--border-strong); border-radius: 6px;
  padding: 26px; text-align: center; background: var(--bg-soft);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
  color: var(--text-soft); margin-bottom: 16px;
}
.file-drop-zone.dragover {
  border-color: var(--accent); background: var(--accent-soft);
}
.file-drop-zone svg { width: 36px; height: 36px; margin-bottom: 10px; opacity: 0.8; color: var(--accent); }
.file-category-badge {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--text-soft);
}

/* Lead Scoring Indicators */
.lead-score-wrap {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.lead-score-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-soft); }
.lead-score-bar {
  flex: 1; height: 5px; background: var(--border-strong); border-radius: 3px; overflow: hidden;
}
.lead-score-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }

/* Sub-settings Tabs UI */
.sub-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto;
}
.sub-tab {
  padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: all .15s ease;
}
.sub-tab:hover { color: var(--text); background: var(--bg-soft); }
.sub-tab.active { color: var(--text); border-bottom-color: var(--border-strong); font-weight: 700; }

/* Client Portal step bar (Change 1) */
.timeline-step-bar {
  display: flex; justify-content: space-between; align-items: center; position: relative; margin: 26px 0;
}
.timeline-step-bar::before {
  content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 3px; background: var(--border); z-index: 1;
}
.timeline-step {
  display: flex; flex-direction: column; align-items: center; z-index: 2; cursor: default;
}
.timeline-step-dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
  color: var(--text-soft); transition: all 0.25s ease;
}
.timeline-step.active .timeline-step-dot {
  border-color: var(--border-strong); background: var(--border-strong); color: #FFFFFF;
}
.timeline-step.completed .timeline-step-dot {
  border-color: var(--border-strong); background: var(--bg-soft); color: var(--text);
}
.timeline-step-label {
  font-size: 11px; font-weight: 600; color: var(--text-soft); margin-top: 8px; text-align: center; letter-spacing: 0.1em;
}

/* Bulk CRM Action bar */
.crm-bulk-select {
  width: 16px; height: 16px; margin-right: 8px; accent-color: var(--accent);
}
.crm-bulk-action-bar {
  display: flex; align-items: center; gap: 10px; background: var(--accent-soft);
  border: 1.5px solid var(--border-strong); border-radius: 6px; padding: 12px 18px;
  margin-bottom: 14px; animation: slideDown 0.22s ease both;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px){
  .sidebar{ transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open{ transform: translateX(0); }
  .main-col{ margin-left:0; }
  .menu-toggle{ display:flex; }
  .breadcrumb{ display:none; }
}
@media (max-width: 640px){
  .content{ padding:18px 14px 50px; }
  .topbar{ padding:0 14px; gap:10px; }
  .global-search span.gs-label{ display:none; }
  .page-head{ flex-direction:column; align-items:flex-start; }
  .form-row{ grid-template-columns:1fr; }
  .kanban-col{ min-width:82vw; max-width:82vw; }
}
.sidebar-scrim{ display:none; }
@media (max-width:1024px){
  .sidebar-scrim.show{ display:block; position:fixed; inset:0; background: rgba(0,0,0,.25); z-index:39; }
}

.brand-mark img, .loading-mark img, .auth-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Floating Call to Action Bar */
.floating-cta-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 10px 14px 10px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: none;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-cta-bar:hover {
  transform: translateX(-50%) translateY(-2px);
}
.cta-text {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: -0.1px;
}
.cta-text em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: #FFFFFF;
  margin-right: 2px;
}
.cta-btn {
  background: var(--bg-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 24px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-block;
  border: 1px solid var(--border);
}
.cta-btn:hover {
  background: #FFFFFF;
  transform: scale(1.02);
}
@media (max-width: 640px) {
  .floating-cta-bar {
    bottom: 16px;
    padding: 8px 10px 8px 20px;
    gap: 16px;
  }
  .cta-text {
    font-size: 13px;
  }
  .cta-text em {
    font-size: 14px;
  }
  .cta-btn {
    padding: 8px 16px;
    font-size: 11px;
  }
}

/* CRM Pipeline Mobile Responsiveness */
@media (max-width: 768px) {
  .page-head-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .page-head-actions .btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    font-size: 11px;
    padding: 8px 12px;
  }
  .toolbar {
    margin-bottom: 12px;
  }
  .search-input {
    width: 100%;
  }
  .kanban {
    gap: 12px;
    padding-bottom: 80px; /* Leave space for floating CTA */
  }
  .kanban-col {
    min-width: 85vw;
    max-width: 85vw;
    max-height: calc(100vh - 280px);
  }
}

/* Premium Empty States styling overrides */
.empty-state {
  padding: 80px 24px !important;
  background: var(--bg-soft) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.empty-state .empty-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px !important;
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}
.empty-state h4 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}
.empty-state p {
  font-size: 13.5px !important;
  color: var(--text-soft) !important;
  max-width: 340px !important;
  line-height: 1.5 !important;
}

/* Navigation Fade-In Transitions */
#view-root {
  animation: viewFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#delivery-tab-body, #client-project-body {
  animation: tabFadeIn 0.3s ease-out forwards;
}

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

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

/* Premium Chat Enhancements */
.chat-react-btn {
  transition: all 0.15s ease;
}
.chat-react-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.chat-react-btn.active {
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
.chat-pin-btn {
  transition: all 0.15s ease;
}
.chat-pin-btn:hover {
  transform: scale(1.1);
}
.chat-pin-btn.active svg {
  fill: var(--warning) !important;
}
.chat-image-card {
  transition: all 0.2s ease;
}
.chat-image-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}