/* =========================================================
   Office soft shell — visual pass only
   Brings the rest of the BTL office (dashboard, clients,
   committees, letters, …) closer to ניהול משרד’s gentle
   blue / gray / white language.

   RULES:
   - CSS-only. No columns removed. No table data changed.
   - Does not touch .cu-office / office desk internals.
   - Loaded last so it can override hard-blue chrome.
   ========================================================= */

body.btl-shell {
  --soft-bg: #f4f7f9;
  --soft-panel: #ffffff;
  --soft-line: #e0e7ec;
  --soft-text: #1d1f23;
  --soft-muted: #6b7280;
  --soft-accent: #2a86ad;
  --soft-accent-soft: #e7f3f8;
  --soft-accent-text: #0f5575;
  --soft-green: #1e9470;
  --soft-green-bg: #e8f7ef;
  --soft-amber: #b8860b;
  --soft-amber-bg: #fff6e0;
  --soft-rose: #c45b63;
  --soft-rose-bg: #fceeee;
  --soft-radius: 10px;
  --soft-radius-sm: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(42, 134, 173, 0.07), transparent 42%),
    var(--soft-bg) !important;
  color: var(--soft-text) !important;
}

/* ---------- Top nav: neutral Fluent 2 chrome (Windows 11 style) ---------- */
body.btl-shell .primary-tabs,
body.btl-shell > .primary-tabs {
  background: var(--colorNeutralBackground2, #fafafa) !important;
  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0) !important;
  box-shadow: var(--shadow2, 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14)) !important;
  min-height: 52px !important;
  padding: 6px 12px !important;
}

body.btl-shell .primary-tabs::after {
  opacity: 0 !important;
}

body.btl-shell .primary-tabs .hamburger {
  background: transparent !important;
  border: 1px solid var(--colorNeutralStroke2, #e0e0e0) !important;
  border-radius: 8px !important;
  color: var(--colorNeutralForeground2, #424242) !important;
  width: 36px !important;
  height: 36px !important;
}

body.btl-shell .primary-tabs .hamburger:hover {
  background: var(--colorNeutralBackground1Hover, #f5f5f5) !important;
  color: var(--colorNeutralForeground1, #242424) !important;
}

body.btl-shell .primary-tab {
  color: var(--colorNeutralForeground2, #424242) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-inline-start: 0 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-weight: 500 !important;
  gap: 7px !important;
}

body.btl-shell .primary-tab i,
body.btl-shell .primary-tab svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--colorNeutralForeground2, #424242) !important;
  stroke-width: 1.75 !important;
}

body.btl-shell .primary-tab:hover {
  color: var(--colorNeutralForeground1, #242424) !important;
  background: var(--colorNeutralBackground1Hover, #f5f5f5) !important;
}

body.btl-shell .primary-tab:hover i,
body.btl-shell .primary-tab:hover svg {
  color: var(--colorNeutralForeground1, #242424) !important;
}

body.btl-shell .primary-tab.active {
  background: var(--colorNeutralBackground1Selected, #e8e8e8) !important;
  color: var(--soft-accent-text) !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.btl-shell .primary-tab.active i,
body.btl-shell .primary-tab.active svg {
  color: var(--soft-accent) !important;
}

body.btl-shell .primary-tab-sep {
  background: var(--colorNeutralStroke2, #e0e0e0) !important;
  height: 16px !important;
  opacity: 1 !important;
}

body.btl-shell .primary-tabs-scroll .pin-mode-btn,
body.btl-shell .primary-tab.pin-mode-btn,
body.btl-shell #global-pin-mode-btn {
  color: var(--soft-accent-text) !important;
  border: 1px solid var(--soft-accent) !important;
  background: var(--soft-accent-soft) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

body.btl-shell .primary-tab.pin-mode-btn:hover,
body.btl-shell #global-pin-mode-btn:hover {
  background: var(--colorNeutralBackground1Hover, #f5f5f5) !important;
  color: var(--soft-accent-text) !important;
}

body.btl-shell .primary-tab.pin-mode-btn.active,
body.btl-shell #global-pin-mode-btn.active {
  background: var(--soft-amber-bg) !important;
  color: #7a5b00 !important;
  border-color: #e2c96a !important;
}

/* ---------- Footer: neutral chrome to match the top bar ---------- */
body.btl-shell .app-footer {
  background: var(--colorNeutralBackground2, #fafafa) !important;
  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0) !important;
  color: var(--colorNeutralForeground1, #242424) !important;
  box-shadow: none !important;
}

body.btl-shell .app-footer::after {
  opacity: 0 !important;
}

body.btl-shell .app-footer a,
body.btl-shell .app-footer button,
body.btl-shell .app-footer .footer-pulse,
body.btl-shell .app-footer span {
  color: var(--colorNeutralForeground1, #242424) !important;
}

body.btl-shell .footer-display-size.is-auto .footer-display-value {
  color: var(--btl-blue, #15658a) !important;
}

/* ---------- Page chrome ---------- */
body.btl-shell .page-content,
body.btl-shell main.page-content {
  background: var(--soft-bg) !important;
}

body.btl-shell .workbar,
body.btl-shell .top-header,
body.btl-shell .top-header.btl-workbar {
  background: var(--soft-panel) !important;
  border-bottom: 1px solid var(--soft-line) !important;
  box-shadow: none !important;
}

body.btl-shell .page-title h1 {
  color: var(--soft-text) !important;
  font-weight: 650 !important;
}

body.btl-shell .page-title h1 svg,
body.btl-shell .page-title h1 i {
  color: var(--soft-accent) !important;
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.75 !important;
}

body.btl-shell .breadcrumb {
  color: var(--soft-text) !important;
  font-weight: 650 !important;
}

/* ---------- Cards / panels (list field cards) ---------- */
body.btl-shell .panel,
body.btl-shell .card,
body.btl-shell .panel-card,
body.btl-shell .data-card {
  background: var(--soft-panel) !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: var(--soft-radius) !important;
  box-shadow: var(--shadow4, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14)) !important;
  overflow: hidden;
}

body.btl-shell .panel-title,
body.btl-shell .panel-header {
  min-height: 44px !important;
  padding: 8px 14px !important;
  background: #fafbfc !important;
  border-bottom: 1px solid var(--soft-line) !important;
  box-shadow: none !important;
  color: var(--soft-text) !important;
}

body.btl-shell .panel-header .panel-title,
body.btl-shell .panel-title {
  color: var(--soft-text) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.btl-shell .panel-title > span > svg,
body.btl-shell .panel-title > span > i,
body.btl-shell .panel-title > svg,
body.btl-shell .panel-title > i,
body.btl-shell .panel-header .panel-title > svg,
body.btl-shell .panel-header .panel-title > i {
  width: 16px !important;
  height: 16px !important;
  color: var(--soft-accent) !important;
  stroke-width: 1.75 !important;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 8px;
  background: var(--soft-accent-soft);
}

/* ---------- KPI small text cards ---------- */
body.btl-shell .kpi,
body.btl-shell .kpi-card {
  background: var(--soft-panel) !important;
  border: 1px solid var(--soft-line) !important;
  border-top: 2px solid rgba(42, 134, 173, 0.45) !important;
  border-radius: var(--soft-radius) !important;
  box-shadow: var(--shadow4, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14)) !important;
}

body.btl-shell .kpi:hover,
body.btl-shell .kpi-card:hover {
  border-color: rgba(42, 134, 173, 0.35) !important;
  border-top-color: var(--soft-accent) !important;
  box-shadow: var(--shadow8, 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14)) !important;
  transform: translateY(-1px) !important;
}

body.btl-shell .kpi-card.kpi-card-urgent {
  border-top-color: #e0b44a !important;
}

body.btl-shell .kpi-card.kpi-card-danger,
body.btl-shell #kpi-sync-errors {
  border-top-color: #d88a90 !important;
}

body.btl-shell .kpi .icon,
body.btl-shell .kpi-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent) !important;
}

body.btl-shell .kpi .icon svg,
body.btl-shell .kpi .icon i,
body.btl-shell .kpi-icon svg,
body.btl-shell .kpi-icon i {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75 !important;
  color: inherit !important;
}

body.btl-shell #kpi-urgent-cases .kpi-icon {
  background: var(--soft-amber-bg) !important;
  color: var(--soft-amber) !important;
}

body.btl-shell #kpi-sync-errors .kpi-icon {
  background: var(--soft-rose-bg) !important;
  color: var(--soft-rose) !important;
}

body.btl-shell .kpi .label,
body.btl-shell .kpi-title,
body.btl-shell .kpi-trend {
  color: var(--soft-muted) !important;
}

body.btl-shell .kpi strong,
body.btl-shell .kpi-value {
  color: var(--soft-text) !important;
}

body.btl-shell .kpi-action-label {
  color: var(--soft-accent) !important;
}

/* ---------- Tables → Fluent-aligned density (KEEP ALL COLUMNS) ---------- */
body.btl-shell .custom-table,
body.btl-shell .data-table {
  font-size: 13px !important;
  color: var(--colorNeutralForeground1, var(--soft-text)) !important;
  background: var(--colorNeutralBackground1, #fff) !important;
}

body.btl-shell .custom-table th,
body.btl-shell .data-table th {
  height: 44px !important;
  padding: 10px 12px !important;
  color: var(--colorNeutralForeground1, var(--soft-text)) !important;
  font-weight: var(--fontWeightSemibold, 600) !important;
  font-size: 12px !important;
  background: var(--colorNeutralBackground3, #f5f5f5) !important;
  border-bottom: 1px solid var(--colorNeutralStroke1, var(--soft-line)) !important;
  box-shadow: none !important;
}

body.btl-shell .custom-table td,
body.btl-shell .data-table td {
  height: 44px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--colorNeutralStroke2, #f0f1f3) !important;
  color: var(--colorNeutralForeground1, var(--soft-text)) !important;
  background: var(--colorNeutralBackground1, #fff) !important;
}

body.btl-shell .custom-table tbody tr:hover td,
body.btl-shell .data-table tbody tr:hover td {
  background: var(--colorNeutralBackground1Hover, #f5f5f5) !important;
}

body.btl-shell .custom-table tbody tr.is-selected td,
body.btl-shell .custom-table tbody tr.selected td,
body.btl-shell .data-table tr.selected td {
  background: var(--colorNeutralBackground1Selected, var(--soft-accent-soft)) !important;
  box-shadow: inset 3px 0 0 var(--soft-accent);
}

body.btl-shell .custom-table .table-section-row td {
  background: var(--colorNeutralBackground3, #fafbfc) !important;
  color: var(--colorNeutralForeground2, var(--soft-muted)) !important;
  font-weight: 650 !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--colorNeutralStroke1, var(--soft-line)) !important;
}

body.btl-shell .custom-table th.sticky-identity,
body.btl-shell .custom-table td.sticky-identity,
body.btl-shell .data-table th.sticky-identity,
body.btl-shell .data-table td.sticky-identity {
  background: var(--colorNeutralBackground1, #fff) !important;
  box-shadow: -1px 0 0 var(--colorNeutralStroke2, var(--soft-line)) !important;
  color: var(--colorNeutralForeground1, var(--soft-text)) !important;
  font-weight: 650 !important;
}

body.btl-shell .custom-table th.sticky-identity,
body.btl-shell .data-table th.sticky-identity {
  background: var(--colorNeutralBackground3, #f5f5f5) !important;
}

body.btl-shell .custom-table tbody tr:hover td.sticky-identity,
body.btl-shell .data-table tbody tr:hover td.sticky-identity {
  background: var(--colorNeutralBackground1Hover, #f5f5f5) !important;
}

body.btl-shell .custom-table tbody tr.is-selected td.sticky-identity,
body.btl-shell .custom-table tbody tr.selected td.sticky-identity,
body.btl-shell .data-table tr.selected td.sticky-identity {
  background: var(--colorNeutralBackground1Selected, var(--soft-accent-soft)) !important;
}

body.btl-shell .client-link {
  color: var(--soft-accent-text) !important;
  text-decoration: none !important;
  font-weight: 650 !important;
}

body.btl-shell .client-link:hover {
  color: var(--soft-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ---------- Icons: square quiet buttons like cu-icon-btn ---------- */
body.btl-shell .icon-action,
body.btl-shell .icon-btn,
body.btl-shell button.btn-icon-only {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--soft-muted) !important;
  border: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
}

body.btl-shell .icon-action:hover,
body.btl-shell .icon-btn:hover,
body.btl-shell button.btn-icon-only:hover {
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent) !important;
}

body.btl-shell .icon-action svg,
body.btl-shell .icon-action i,
body.btl-shell .icon-btn svg,
body.btl-shell .icon-btn i,
body.btl-shell button.btn-icon-only svg,
body.btl-shell button.btn-icon-only i {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.75 !important;
}

body.btl-shell svg.lucide {
  stroke-width: 1.75;
}

/* ---------- Chips / status — gentle pastel pills (like the reference) ---------- */
body.btl-shell .chip,
body.btl-shell .soft-chip,
body.btl-shell .status {
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
}

body.btl-shell .chip-success {
  background: var(--soft-green-bg) !important;
  color: var(--soft-green) !important;
}

body.btl-shell .chip-warning {
  background: var(--soft-amber-bg) !important;
  color: var(--soft-amber) !important;
}

body.btl-shell .chip-danger {
  background: var(--soft-rose-bg) !important;
  color: var(--soft-rose) !important;
}

body.btl-shell .chip-info {
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent-text) !important;
}

body.btl-shell .chip-gray {
  background: #eef1f3 !important;
  color: #65757d !important;
}

body.btl-shell .active-filters-chip {
  border: 1px solid rgba(42, 134, 173, 0.22) !important;
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent-text) !important;
  border-radius: 999px !important;
}

body.btl-shell .date-relative.is-today { color: var(--soft-accent) !important; }
body.btl-shell .date-relative.is-soon { color: var(--soft-amber) !important; }
body.btl-shell .date-relative.is-overdue { color: var(--soft-rose) !important; }

body.btl-shell .star,
body.btl-shell .star.is-on,
body.btl-shell button.star {
  color: #d4a03a !important;
}

/* ---------- Buttons / filters (native <button> only — don't paint over fluent-button) ---------- */
body.btl-shell button.btn,
body.btl-shell button.search-btn,
body.btl-shell button.sync-button,
body.btl-shell button.action-button,
body.btl-shell button#excel-import-btn,
body.btl-shell button#favorite-sync,
body.btl-shell button#global-sync-btn {
  border-radius: var(--soft-radius-sm) !important;
}

body.btl-shell button.btn-primary,
body.btl-shell button.search-btn {
  background: var(--soft-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.btl-shell button.btn-primary:hover,
body.btl-shell button.search-btn:hover {
  background: var(--soft-accent-text) !important;
}

body.btl-shell button.btn-secondary {
  background: #fff !important;
  color: var(--soft-accent-text) !important;
  border: 1px solid rgba(26, 115, 156, 0.28) !important;
  box-shadow: none !important;
}

body.btl-shell button.btn-secondary:hover {
  background: var(--soft-accent-soft) !important;
}

body.btl-shell .filter-bar.filter-panel-look,
body.btl-shell .filter-panel {
  background: #fafbfc !important;
  border-bottom: 1px solid var(--soft-line) !important;
}

body.btl-shell .field input,
body.btl-shell .field select,
body.btl-shell .btl-global-search input,
body.btl-shell #btl-global-search {
  border: 1px solid var(--soft-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  border-bottom-width: 1px !important;
  height: 34px !important;
  padding: 0 10px !important;
}

body.btl-shell .field input:focus,
body.btl-shell .field select:focus,
body.btl-shell .btl-global-search input:focus {
  border-color: rgba(26, 115, 156, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 156, 0.12) !important;
  outline: none !important;
}

body.btl-shell .btl-global-search svg,
body.btl-shell .btl-global-search i {
  color: var(--soft-muted) !important;
}

body.btl-shell .theme-toggle {
  border-radius: 8px !important;
  border: 1px solid var(--soft-line) !important;
  background: #fff !important;
  color: var(--soft-muted) !important;
  box-shadow: none !important;
}

/* ---------- Mini calendar + banners ---------- */
body.btl-shell .mini-cal-week span {
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent-text) !important;
  border-radius: 6px;
}

body.btl-shell .mini-day {
  border-radius: 6px !important;
  background: #f3f7f9 !important;
}

body.btl-shell .mini-day:not(.empty):hover {
  background: var(--soft-accent-soft) !important;
  border-color: rgba(42, 134, 173, 0.25) !important;
}

body.btl-shell .mini-day.today {
  background: var(--soft-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.btl-shell .mini-day.has-event {
  background: #fff !important;
  box-shadow: inset 0 -2px 0 var(--soft-accent) !important;
  color: var(--soft-accent-text) !important;
}

body.btl-shell .mini-day.has-event.warning {
  box-shadow: inset 0 -2px 0 var(--soft-amber) !important;
  color: var(--soft-amber) !important;
}

body.btl-shell .mini-day.has-event.danger {
  box-shadow: inset 0 -2px 0 var(--soft-rose) !important;
  color: var(--soft-rose) !important;
}

body.btl-shell .info-banner {
  border-radius: var(--soft-radius) !important;
  border: 1px solid rgba(42, 134, 173, 0.18) !important;
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent-text) !important;
  box-shadow: none !important;
}

/* ---------- Urgent tasks list: soft tinted cards ---------- */
body.btl-shell .task-item-simple {
  background: #f7fafc !important;
  border-radius: 8px !important;
  border: 1px solid var(--soft-line) !important;
  border-inline-start: 3px solid rgba(42, 134, 173, 0.45) !important;
}

body.btl-shell .task-item-simple:hover {
  background: var(--soft-accent-soft) !important;
  transform: none !important;
}

body.btl-shell .task-item-simple.priority-high {
  border-inline-start-color: #d88a90 !important;
  background: #fff8f8 !important;
}

body.btl-shell .task-item-simple.priority-medium {
  border-inline-start-color: #e0b44a !important;
  background: #fffbf2 !important;
}

body.btl-shell .benefit-dot {
  background: var(--soft-accent-soft) !important;
  color: var(--soft-accent-text) !important;
  border-radius: 6px !important;
}

/* Keep office desk / AI workspace self-contained */
body.office-cu-mode .cu-office,
body.btl-shell #view-ai .ai-workspace {
  /* no overrides — leave those modules’ own design */
}