:root {
  /* Warm mood board palette */
  --color-bg-primary: #f9f8f6;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f3f1ee;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #efede9;
  --color-bg-active: #e8e5e0;

  --color-border: #e5e2dc;
  --color-border-light: #d8d4cd;
  --color-border-focus: #D4654A;

  --color-text-primary: #1a1d2b;
  --color-text-secondary: #5c5a56;
  --color-text-tertiary: #8c8980;
  --color-text-inverse: #ffffff;

  --color-accent: #D4654A;
  --color-accent-hover: #c15a42;
  --color-accent-muted: rgba(212, 101, 74, 0.10);
  --color-accent-subtle: rgba(212, 101, 74, 0.06);

  --color-success: #1a9a5a;
  --color-success-muted: rgba(26, 154, 90, 0.10);
  --color-warning: #c48a09;
  --color-warning-muted: rgba(196, 138, 9, 0.10);
  --color-error: #dc3545;
  --color-error-muted: rgba(220, 53, 69, 0.10);
  --color-info: #2b7ab8;
  --color-info-muted: rgba(43, 122, 184, 0.10);

  /* Status aliases (used by finance module) */
  --color-status-info: var(--color-info);
  --color-status-success: var(--color-success);
  --color-status-warning: var(--color-warning);
  --color-status-error: var(--color-error);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
  --sidebar-width: 260px;

  /* Shadows — soft, mood board style */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(212, 101, 74, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ── Reset ── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ── */

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-light);
}

/* ── Accessibility ── */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

/* ── Layout ── */

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

/* ═══════════════════════════════════════════ */
/*  Sidebar                                    */
/* ═══════════════════════════════════════════ */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  min-height: 60px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #D4654A, #e8845c);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.sidebar-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* ── Nav container ── */

.nav-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm) 0;
}

/* ── Collapsible sidebar sections ── */

.nav-section {
  margin-bottom: 2px;
}

.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color var(--transition-fast);
}

.nav-section-header:hover {
  color: var(--color-text-secondary);
}

.nav-section-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  opacity: 0.5;
}

.nav-section.collapsed .nav-section-chevron {
  transform: rotate(-90deg);
}

.nav-section-items {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.2s ease;
}

.nav-section.collapsed .nav-section-items {
  max-height: 0;
}

/* ── Child nav links ── */

.nav-child-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px var(--spacing-lg);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: 38px;
  border-radius: 0;
  position: relative;
}

.nav-child-link:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.nav-child-link.active {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.nav-child-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 0 2px 2px 0;
}

.nav-link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

.nav-child-link.active .nav-link-icon {
  opacity: 1;
}

.nav-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--color-warning-muted);
  color: var(--color-warning);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Sidebar user area ── */

.sidebar-user {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-user-info {
  overflow: hidden;
}

.sidebar-user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════ */
/*  Menu toggle (mobile)                       */
/* ═══════════════════════════════════════════ */

.menu-toggle {
  position: fixed;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.menu-toggle:hover {
  background: var(--color-bg-hover);
}

/* ═══════════════════════════════════════════ */
/*  Main content                               */
/* ═══════════════════════════════════════════ */

#app {
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-md);
  padding-top: calc(var(--spacing-xl) + 44px);
  min-width: 0;
}

/* ── Desktop ── */

@media (min-width: 768px) {
  .sidebar {
    transform: translateX(0);
  }

  .sidebar-close {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  #app {
    margin-left: var(--sidebar-width);
    padding: var(--spacing-xl) var(--spacing-lg);
  }
}

@media (min-width: 1200px) {
  #app {
    padding: var(--spacing-xl) var(--spacing-2xl);
  }
}

/* ═══════════════════════════════════════════ */
/*  Page header                                */
/* ═══════════════════════════════════════════ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════ */
/*  Breadcrumbs                                */
/* ═══════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-tertiary);
  user-select: none;
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ═══════════════════════════════════════════ */
/*  Buttons                                    */
/* ═══════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  min-height: 36px;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.btn-primary:hover:not(:disabled) {
  background: #333;
  border-color: #333;
}

.btn-accent {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-accent:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-border-light);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.btn-danger {
  background: var(--color-error-muted);
  color: var(--color-error);
  border-color: transparent;
}

.btn-danger:hover:not(:disabled) {
  background: rgba(220, 53, 69, 0.15);
}

.btn-sm {
  padding: 5px 12px;
  font-size: var(--font-size-xs);
  min-height: 30px;
  border-radius: var(--radius-sm);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

/* ═══════════════════════════════════════════ */
/*  Search                                     */
/* ═══════════════════════════════════════════ */

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
  display: flex;
}

.search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.search-input::placeholder {
  color: var(--color-text-tertiary);
}

.search-input:focus {
  border-color: var(--color-border-focus);
  background: var(--color-bg-elevated);
  outline: none;
}

/* ═══════════════════════════════════════════ */
/*  Cards                                      */
/* ═══════════════════════════════════════════ */

.card {
  background: var(--color-bg-secondary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.card-body {
  padding: var(--spacing-lg);
}

.card-footer {
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
}

/* ═══════════════════════════════════════════ */
/*  Tables                                     */
/* ═══════════════════════════════════════════ */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.data-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table td {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-primary);
}

.data-table tbody tr {
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--color-bg-hover);
}

.data-table .actions {
  display: flex;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

.data-table .col-id {
  width: 60px;
}

.data-table .clickable-row {
  cursor: pointer;
}

/* ═══════════════════════════════════════════ */
/*  Forms                                      */
/* ═══════════════════════════════════════════ */

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--color-border-focus);
  outline: none;
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
}

.form-error {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════ */
/*  Modal                                      */
/* ═══════════════════════════════════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: none;
}

.modal-backdrop.visible {
  display: block;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 201;
  width: calc(100% - var(--spacing-lg) * 2);
  max-width: 480px;
  max-height: calc(100vh - var(--spacing-xl) * 2);
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
}

.modal.visible {
  display: block;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.modal-close:hover {
  background: var(--color-bg-hover);
}

.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════ */
/*  Toast                                      */
/* ═══════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 300;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-error);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  max-width: 400px;
  word-break: break-word;
  box-shadow: var(--shadow-lg);
}

.toast-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

/* ═══════════════════════════════════════════ */
/*  Empty state                                */
/* ═══════════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-md);
  color: var(--color-text-secondary);
}

.empty-state-text {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.empty-state-sub {
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════ */
/*  Status badges                              */
/* ═══════════════════════════════════════════ */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.status-badge-coming-soon {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.status-badge-planned {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════ */
/*  Placeholder page                           */
/* ═══════════════════════════════════════════ */

.placeholder-page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--spacing-xl) 0;
}

.placeholder-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.placeholder-description {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-xl);
}

.placeholder-area {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.placeholder-message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

/* ═══════════════════════════════════════════ */
/*  Info header                                */
/* ═══════════════════════════════════════════ */

.info-header {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.info-header dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.info-header dd {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.info-header dd:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════ */
/*  Docs page                                  */
/* ═══════════════════════════════════════════ */

.docs-layout {
  display: flex;
  gap: var(--spacing-lg);
  max-width: 1100px;
}

.docs-nav {
  position: sticky;
  top: var(--spacing-lg);
  align-self: flex-start;
  width: 200px;
  min-width: 200px;
  max-height: calc(100vh - var(--spacing-xl) * 2);
  overflow-y: auto;
  padding-right: var(--spacing-md);
  border-right: 1px solid var(--color-border);
}

.docs-nav-group {
  margin-top: var(--spacing-md);
}

.docs-nav-group-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.docs-nav-link {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: var(--line-height-normal);
}

.docs-nav-link:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.docs-nav-link.active {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 767px) {
  .docs-layout {
    flex-direction: column;
    gap: 0;
  }

  .docs-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    min-width: 0;
    max-height: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-sm) 0;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-xs);
  }

  .docs-nav-group {
    display: contents;
    margin-top: 0;
  }

  .docs-nav-group-label {
    display: none;
  }

  .docs-nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.docs-content {
  max-width: 800px;
  min-width: 0;
  flex: 1;
}

.docs-content h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.docs-content h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.docs-content h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.docs-content p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.docs-content ul {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
  line-height: var(--line-height-relaxed);
}

.docs-content li {
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-secondary);
}

.docs-content code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

.docs-content pre {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  border: 1px solid var(--color-border);
}

.docs-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.docs-content table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
}

.docs-content table td {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.docs-method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.docs-method-get {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.docs-method-post {
  background: var(--color-info-muted);
  color: var(--color-info);
}

.docs-method-put {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.docs-method-delete {
  background: var(--color-error-muted);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════ */
/*  Sheet (grid)                               */
/* ═══════════════════════════════════════════ */

.sheet-wrapper {
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
}

@media (min-width: 768px) {
  .sheet-wrapper {
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
  }
}

@media (min-width: 1200px) {
  .sheet-wrapper {
    margin-left: calc(-1 * var(--spacing-2xl));
    margin-right: calc(-1 * var(--spacing-2xl));
  }
}

.sheet-wrapper .search-wrapper {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
  .sheet-wrapper .search-wrapper {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

@media (min-width: 1200px) {
  .sheet-wrapper .search-wrapper {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
  }
}

.sheet {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-table {
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  table-layout: fixed;
}

.sheet-col-header {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  background: var(--color-bg-secondary);
}

.sheet-col-header:hover .col-menu-btn {
  opacity: 1;
}

.sheet-col-open {
  width: 100px;
  min-width: 100px;
  padding: 0;
}

.sheet-col-add {
  width: 60px;
  min-width: 60px;
  padding: var(--spacing-xs);
  text-align: center;
}

/* Column resize */
.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 2;
}

.col-resize-handle:hover,
.col-resize-handle:active {
  background: var(--color-accent);
  opacity: 0.4;
}

/* Column drag */
.col-dragging {
  opacity: 0.4;
}

.col-drag-over {
  border-left: 2px solid var(--color-accent);
}

/* Cells */
.sheet-cell {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  min-height: 36px;
  vertical-align: middle;
  white-space: normal;
  word-wrap: break-word;
}

.cell-display {
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: 36px;
  display: flex;
  align-items: center;
}

.cell-input {
  width: 100%;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font: inherit;
  outline: none;
  box-sizing: border-box;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.cell-editing {
  background: var(--color-bg-elevated);
}

/* Select tags */
.cell-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.cell-tag-0 {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.cell-tag-1 {
  background: var(--color-info-muted);
  color: var(--color-info);
}

.cell-tag-2 {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.cell-tag-3 {
  background: var(--color-error-muted);
  color: var(--color-error);
}

.cell-tag-4 {
  background: rgba(139, 92, 246, 0.10);
  color: #7c3aed;
}

/* Checkbox */
.cell-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cell-checkbox-icon {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.cell-checkbox-icon.checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* Select dropdown */
.cell-dropdown {
  position: fixed;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  min-width: 150px;
  max-height: 200px;
  overflow-y: auto;
}

.cell-dropdown-item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  color: var(--color-text-primary);
}

.cell-dropdown-item:hover {
  background: var(--color-bg-hover);
}

/* Column header menu */
.col-menu-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
}

.col-menu-btn:hover {
  background: var(--color-bg-hover);
}

.col-context-menu {
  position: absolute;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 120px;
}

.col-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
}

.col-context-menu button:hover {
  background: var(--color-bg-hover);
}

.col-context-menu button.danger {
  color: var(--color-error);
}

/* Tab context menu */
.tab-context-menu {
  position: fixed;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  min-width: 120px;
}

.tab-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-text-primary);
}

.tab-context-menu button:hover {
  background: var(--color-bg-hover);
}

.tab-context-menu button.danger {
  color: var(--color-error);
}

/* Add buttons */
.btn-add-col {
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn-add-col:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-add-row {
  display: block;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  border-top: 1px dashed var(--color-border);
  cursor: pointer;
  color: var(--color-text-tertiary);
  font: inherit;
  transition: var(--transition-fast);
}

.btn-add-row:hover {
  color: var(--color-accent);
  background: var(--color-bg-hover);
}

/* Tab bar */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-lg);
  padding: 0;
  overflow-x: auto;
}

.tab-item {
  padding: 10px var(--spacing-md);
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.tab-item:hover {
  color: var(--color-text-primary);
}

.tab-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.tab-add {
  padding: var(--spacing-sm);
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
  margin-bottom: -1px;
  transition: var(--transition-fast);
}

.tab-add:hover {
  color: var(--color-accent);
}

/* Clickable row */
.sheet-row-clickable {
  cursor: pointer;
}

.sheet-row-clickable:hover {
  background: var(--color-bg-hover);
}

.sheet-cell-action {
  width: 1%;
  white-space: nowrap;
  overflow: visible;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.sheet-row-clickable:hover .row-actions {
  opacity: 1;
}

.btn-view-row {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.btn-view-row:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-delete-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-delete-row:hover {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-muted);
}

/* Multi-select */
.multi-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cell-dropdown-multi .cell-dropdown-item-multi {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-select-cb {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.multi-select-done {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-align: center;
}

.multi-select-done:hover {
  background: var(--color-bg-hover);
}

/* URL / Email / Phone links */
.cell-link {
  color: var(--color-accent);
  text-decoration: none;
  word-break: break-all;
}

.cell-link:hover {
  text-decoration: underline;
  color: var(--color-accent-hover);
}

/* Date range */
.cell-date-range {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.date-range-editor {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-range-input {
  flex: 1;
  min-width: 0;
}

.date-range-sep {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

/* Sub-tabs */
.sub-tab-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-md);
  padding: 0;
  overflow-x: auto;
}

.sub-tab-item {
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.sub-tab-item:hover {
  color: var(--color-text-primary);
}

.sub-tab-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 768px) {
  .sheet-table {
    min-width: 600px;
  }
}

/* ═══════════════════════════════════════════ */
/*  Admin Dashboard                            */
/* ═══════════════════════════════════════════ */

.admin-dashboard {
  max-width: 1400px;
}

/* Stats grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: border-color var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--color-border-light);
}

.stat-card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.stat-card-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-xs);
}

.stat-card-icon-blue {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.stat-card-icon-green {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.stat-card-icon-yellow {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.stat-card-icon-red {
  background: var(--color-error-muted);
  color: var(--color-error);
}

.stat-card-icon-purple {
  background: rgba(139, 92, 246, 0.10);
  color: #7c3aed;
}

/* Quick links */
.admin-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

/* Tabs */
.admin-tab-content {
  min-height: 200px;
}

/* Pipeline status badges */
.pipeline-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.pipeline-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.pipeline-status-0 {
  background: var(--color-success-muted);
  color: var(--color-success);
}
.pipeline-status-0 .pipeline-status-dot { background: var(--color-success); }

.pipeline-status-1 {
  background: var(--color-info-muted);
  color: var(--color-info);
}
.pipeline-status-1 .pipeline-status-dot { background: var(--color-info); }

.pipeline-status-2 {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}
.pipeline-status-2 .pipeline-status-dot { background: var(--color-warning); }

.pipeline-status-3 {
  background: var(--color-error-muted);
  color: var(--color-error);
}
.pipeline-status-3 .pipeline-status-dot { background: var(--color-error); }

.pipeline-status-4 {
  background: rgba(139, 92, 246, 0.10);
  color: #7c3aed;
}
.pipeline-status-4 .pipeline-status-dot { background: #7c3aed; }

/* Teal status (scheduling) */
.pipeline-status-5 {
  background: rgba(13, 148, 136, 0.10);
  color: #0d7377;
}
.pipeline-status-5 .pipeline-status-dot { background: #0d7377; }

/* Pipeline progress bar */
.pipeline-progress {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pipeline-step {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-hover);
  position: relative;
}

.pipeline-step-active {
  background: var(--color-accent);
}

.pipeline-step-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* File cells */
.file-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.file-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition-fast);
}

.file-cell-link:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}

/* File manager modal */
.file-manager {
  min-width: 300px;
}

.file-manager-list {
  margin-bottom: var(--spacing-md);
}

.file-manager-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.file-manager-link {
  flex: 1;
  color: var(--color-accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-manager-link:hover {
  text-decoration: underline;
}

.file-manager-size {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.file-manager-add {
  margin-top: var(--spacing-sm);
}

/* Onboarding cards */
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.onboarding-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.onboarding-card:hover {
  border-color: var(--color-border-light);
}

.onboarding-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.onboarding-card-header h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-text-primary);
}

.onboarding-card-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

.onboarding-card-body p {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.onboarding-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
}

.create-deliverables-btn {
  flex-shrink: 0;
}

/* Overview matrix */
.overview-matrix td {
  text-align: center;
  min-width: 70px;
  font-size: var(--font-size-sm);
}

.overview-matrix td:first-child {
  text-align: left;
  min-width: 150px;
}

.overview-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.overview-status-done {
  background: #dcfce7;
  color: #15803d;
}

.overview-status-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.overview-status-not-started {
  background: var(--color-bg-tertiary, #f3f4f6);
  color: var(--color-text-tertiary);
}

.overview-cell {
  text-align: center;
}

/* Admin status dropdown */
.admin-status-dropdown {
  max-height: 300px;
}

/* ═══════════════════════════════════════════ */
/*  Department Dashboard                       */
/* ═══════════════════════════════════════════ */

.dept-dashboard {
  max-width: 1400px;
}

.dept-tab-content {
  min-height: 200px;
}

.dept-status-dropdown {
  max-height: 300px;
}

/* ── Activity list (dashboard) ── */

.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ── Dashboard 2-column layout ── */

.admin-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 900px) {
  .admin-grid-2col {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-section {
  margin-top: var(--spacing-2xl);
}

.admin-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════ */
/*  Coming Soon page                           */
/* ═══════════════════════════════════════════ */

.coming-soon-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-md);
  max-width: 500px;
  margin: 0 auto;
}

.coming-soon-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  font-size: 36px;
}

.coming-soon-icon-blue {
  background: var(--color-accent-muted);
}

.coming-soon-icon-green {
  background: var(--color-success-muted);
}

.coming-soon-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.coming-soon-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.coming-soon-pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════ */
/*  Utility                                    */
/* ═══════════════════════════════════════════ */

.text-secondary {
  color: var(--color-text-secondary);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* File upload area */
.file-upload-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.file-upload-area:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* ═══════════════════════════════════════════ */
/*  Avatars                                    */
/* ═══════════════════════════════════════════ */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-accent-muted);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-xs);
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: var(--font-size-lg);
}

.avatar-xl {
  width: 64px;
  height: 64px;
  font-size: var(--font-size-xl);
}

/* ═══════════════════════════════════════════ */
/*  Stat cards row                             */
/* ═══════════════════════════════════════════ */

.stat-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* ═══════════════════════════════════════════ */
/*  Card accent borders                        */
/* ═══════════════════════════════════════════ */

.card-accent-green {
  border-left: 4px solid var(--color-success);
}

.card-accent-yellow {
  border-left: 4px solid var(--color-warning);
}

.card-accent-red {
  border-left: 4px solid var(--color-error);
}

.card-accent-blue {
  border-left: 4px solid var(--color-info);
}

.card-accent-coral {
  border-left: 4px solid var(--color-accent);
}

/* ═══════════════════════════════════════════ */
/*  Online status dot                          */
/* ═══════════════════════════════════════════ */

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
}

.status-dot-online {
  background: var(--color-success);
  box-shadow: 0 0 0 2px rgba(26, 154, 90, 0.20);
}

.status-dot-offline {
  background: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════ */
/*  Login page                                 */
/* ═══════════════════════════════════════════ */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--spacing-lg);
  background: var(--color-bg-primary);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-2xl) var(--spacing-xl);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.login-logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #D4654A, #e8845c);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.login-logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.login-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.login-form .form-group {
  margin-bottom: var(--spacing-md);
}

.login-form .btn-primary {
  width: 100%;
  margin-top: var(--spacing-sm);
}

.login-switch {
  text-align: center;
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.login-switch a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.login-switch a:hover {
  text-decoration: underline;
}

.login-error {
  background: var(--color-error-muted);
  color: var(--color-error);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

/* ═══════════════════════════════════════════ */
/*  Two-column layout                          */
/* ═══════════════════════════════════════════ */

.two-col-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 900px) {
  .two-col-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════ */
/*  My View — Inbox & Assignments              */
/* ═══════════════════════════════════════════ */

.assignment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.assignment-item:hover {
  background: var(--color-bg-tertiary);
}

.assignment-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.assignment-item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.assignment-item-client {
  font-size: var(--font-size-xs);
}

.inbox-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.inbox-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.inbox-tab:hover {
  color: var(--color-text-primary);
}

.inbox-tab-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.inbox-list {
  display: flex;
  flex-direction: column;
}

.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.inbox-item:hover {
  background: var(--color-bg-tertiary);
}

.inbox-item-unread {
  background: var(--color-bg-active);
}

.inbox-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inbox-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.inbox-item-subject {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-item-time {
  font-size: var(--font-size-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

.inbox-item-sender {
  font-size: var(--font-size-xs);
}

.inbox-item-preview {
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════ */
/*  Timeline                                   */
/* ═══════════════════════════════════════════ */

.timeline {
  position: relative;
  padding-left: var(--spacing-xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -25px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border-light);
  border: 2px solid var(--color-bg-secondary);
}

.timeline-dot-status { background: var(--color-info); }
.timeline-dot-comm { background: var(--color-accent); }
.timeline-dot-note { background: var(--color-text-tertiary); }
.timeline-dot-audit { background: var(--color-warning); }

.timeline-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.timeline-user {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.timeline-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.timeline-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.timeline-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--color-border);
}

.timeline-card-status { border-left-color: var(--color-info); }
.timeline-card-comm { border-left-color: var(--color-accent); }
.timeline-card-note { border-left-color: var(--color-text-tertiary); }

/* ═══════════════════════════════════════════ */
/*  Communications                             */
/* ═══════════════════════════════════════════ */

.comms-page { max-width: 1200px; margin: 0 auto; }
.comms-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}
.comms-compose-btn { display: flex; align-items: center; gap: 6px; }
.comms-compose-btn svg { flex-shrink: 0; }

.comms-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-secondary);
  min-height: calc(100vh - 200px);
}
@media (max-width: 900px) { .comms-layout { grid-template-columns: 1fr; } }

/* Tabs */
.comms-tabs {
  display: flex; gap: 2px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.comms-tab {
  padding: var(--spacing-xs) var(--spacing-md);
  border: none; background: none; font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  position: relative;
  display: flex; align-items: center; gap: 6px;
}
.comms-tab:hover { background: var(--color-bg-hover); }
.comms-tab-active {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}
.comms-unread-badge {
  background: var(--color-error, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
}

/* Search */
.comms-search-wrap {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.comms-search-input {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  font: inherit; font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}
.comms-search-input:focus { border-color: var(--color-accent); }
.comms-search-input::placeholder { color: var(--color-text-tertiary); }

/* List panel */
.comms-list-panel {
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.comms-list {
  flex: 1; overflow-y: auto;
}
.comms-loading {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* List items */
.comms-item {
  display: flex; align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 12px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.comms-item:hover { background: var(--color-bg-hover); }
.comms-item-active { background: var(--color-accent-subtle); }
.comms-item-unread { background: rgba(59, 130, 246, 0.04); }
.comms-item-content { flex: 1; min-width: 0; }
.comms-item-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.comms-item-sender {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.comms-item-unread .comms-item-sender { font-weight: var(--font-weight-semibold); }
.comms-item-time {
  font-size: 11px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-left: 8px;
}
.comms-item-subject {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comms-item-unread .comms-item-subject { font-weight: var(--font-weight-semibold); }
.comms-item-preview {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.comms-item-tags {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}

/* Avatars */
.comms-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--color-accent);
  flex-shrink: 0; overflow: hidden;
}
.comms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comms-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.comms-avatar-xs { width: 20px; height: 20px; font-size: 9px; }

/* Priority badges */
.comms-priority {
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.comms-priority-muted { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); }
.comms-priority-warning { background: #fef3c7; color: #92400e; }
.comms-priority-error { background: #fee2e2; color: #991b1b; }

/* Color dots */
.comms-color-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0;
}
.comms-color-red { background: #ef4444; }
.comms-color-yellow { background: #eab308; }
.comms-color-green { background: #22c55e; }
.comms-color-blue { background: #3b82f6; }
.comms-unread-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* Detail panel */
.comms-detail {
  padding: var(--spacing-lg);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.comms-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}
.comms-detail-subject {
  font-size: 18px; font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
.comms-detail-actions { display: flex; gap: 4px; flex-shrink: 0; }
.comms-action-btn {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px; cursor: pointer;
  color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.comms-action-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.comms-action-danger:hover { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.comms-detail-meta {
  display: flex; align-items: center; gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.comms-detail-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Thread bubbles */
.comms-thread { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-md); }
.comms-bubble {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}
.comms-bubble-header {
  display: flex; align-items: center; gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.comms-bubble-info { display: flex; flex-direction: column; }
.comms-bubble-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.comms-bubble-time {
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.comms-bubble-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Quick reply */
.comms-reply-area {
  margin-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}
.comms-reply-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  font: inherit; font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
}
.comms-reply-input:focus { border-color: var(--color-accent); }
.comms-reply-input::placeholder { color: var(--color-text-tertiary); }
.comms-reply-actions {
  display: flex; justify-content: flex-end;
  margin-top: var(--spacing-sm);
}

/* Empty states */
.comms-empty-detail, .comms-empty-list {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 1; padding: var(--spacing-xl);
  text-align: center;
}
.comms-empty-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: var(--spacing-sm) 0 4px;
}
.comms-empty-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Compose modal */
.comms-compose-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.comms-compose-modal {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  width: 560px; max-width: 95vw;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0,0,0,.25));
}
.comms-compose-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.comms-compose-header h3 { margin: 0; font-size: 16px; }
.comms-compose-close {
  background: none; border: none;
  font-size: 24px; cursor: pointer;
  color: var(--color-text-tertiary);
  line-height: 1; padding: 0;
}
.comms-compose-close:hover { color: var(--color-text-primary); }
.comms-compose-form {
  padding: var(--spacing-md) var(--spacing-lg);
  overflow-y: auto; flex: 1;
}
.comms-compose-footer {
  display: flex; justify-content: flex-end; gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}
.comms-compose-options { display: flex; gap: var(--spacing-md); }

/* Form fields */
.comms-field { margin-bottom: var(--spacing-md); }
.comms-field-sm { flex: 1; }
.comms-field-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.comms-field-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  font: inherit; font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}
.comms-field-input:focus { border-color: var(--color-accent); }
.comms-body-textarea { resize: vertical; min-height: 120px; }

/* Recipient picker */
.comms-recipient-wrap {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  padding: 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: 36px;
  transition: border-color var(--transition-fast);
}
.comms-recipient-wrap:focus-within { border-color: var(--color-accent); }
.comms-recipient-tags { display: contents; }
.comms-recipient-tag {
  display: flex; align-items: center; gap: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px 6px 2px 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}
.comms-tag-remove {
  background: none; border: none;
  font-size: 14px; cursor: pointer;
  color: var(--color-text-tertiary);
  padding: 0; line-height: 1;
}
.comms-tag-remove:hover { color: var(--color-error, #ef4444); }
.comms-recipient-input {
  flex: 1; min-width: 100px;
  border: none; background: none;
  font: inherit; font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  outline: none; padding: 4px;
}
.comms-recipient-input::placeholder { color: var(--color-text-tertiary); }
.comms-recipient-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 10; max-height: 240px; overflow-y: auto;
  margin-top: 4px;
}
.comms-dropdown-item {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.comms-dropdown-item:hover { background: var(--color-bg-hover); }
.comms-dropdown-info { display: flex; flex-direction: column; }
.comms-dropdown-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.comms-dropdown-email {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════ */
/*  Employee cards                             */
/* ═══════════════════════════════════════════ */

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.employee-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow var(--transition-fast);
  cursor: pointer;
}

.employee-card:hover {
  box-shadow: var(--shadow-md);
}

.employee-card-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--spacing-sm);
}

.employee-card-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.employee-card-dept {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--color-accent-muted);
  color: var(--color-accent);
  margin-top: var(--spacing-sm);
}

/* ═══════════════════════════════════════════ */
/*  Schedule calendar grid                     */
/* ═══════════════════════════════════════════ */

.schedule-grid {
  display: grid;
  grid-template-columns: 180px repeat(5, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.schedule-header-cell {
  background: var(--color-bg-tertiary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  text-align: center;
}

.schedule-header-cell:first-child {
  text-align: left;
}

.schedule-name-cell {
  background: var(--color-bg-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.schedule-cell {
  background: var(--color-bg-secondary);
  padding: var(--spacing-sm);
  text-align: center;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.schedule-cell:hover {
  background: var(--color-bg-hover);
}

.shift-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.shift-full {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.shift-morning {
  background: var(--color-info-muted);
  color: var(--color-info);
}

.shift-afternoon {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.shift-off {
  background: var(--color-error-muted);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════ */
/*  Week navigation                            */
/* ═══════════════════════════════════════════ */

.week-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.week-nav-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════ */
/*  Time cards                                 */
/* ═══════════════════════════════════════════ */

.time-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.time-card-item {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.time-card-info {
  flex: 1;
  min-width: 0;
}

.time-card-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.time-card-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.time-card-hours {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

/* ═══════════════════════════════════════════ */
/*  Compose modal (wider)                      */
/* ═══════════════════════════════════════════ */

.modal-wide {
  max-width: 640px;
}

/* ═══════════════════════════════════════════ */
/*  Deliverable detail                         */
/* ═══════════════════════════════════════════ */

.deliverable-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.deliverable-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.deliverable-status-badge {
  cursor: pointer;
}

.detail-panel {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
}

.detail-field {
  margin-bottom: var(--spacing-md);
}

.detail-field-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-xs);
}

.detail-field-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════ */
/*  Note form                                  */
/* ═══════════════════════════════════════════ */

.deliv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.deliv-grid-cell {
  min-width: 0;
}

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

.note-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.note-form-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.note-form-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.note-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.note-file-remove {
  background: none;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 0 2px;
  line-height: 1;
}

.note-form textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.note-form textarea:focus {
  border-color: var(--color-border-focus);
  outline: none;
}

.note-item {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.note-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.note-item-user {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.note-item-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.note-item-content {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

/* ═══════════════════════════════════════════ */
/*  Unread count badge                         */
/* ═══════════════════════════════════════════ */

.nav-unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  margin-left: auto;
}

/* ═══════════════════════════════════════════ */
/*  Access control checkboxes                  */
/* ═══════════════════════════════════════════ */

.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-sm);
}

.access-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.access-item input[type="checkbox"] {
  accent-color: var(--color-accent);
}

/* ═══════════════════════════════════════════ */
/*  Sidebar user profile (bottom)              */
/* ═══════════════════════════════════════════ */

.sidebar-user-logout {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.sidebar-user-logout:hover {
  color: var(--color-error);
}
.sidebar-user-settings {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-left: auto;
}
.sidebar-user-settings:hover {
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════ */
/*  Admin Proposals Layout (3-section)         */
/* ═══════════════════════════════════════════ */

.proposals-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--spacing-lg);
  align-items: start;
}

.proposals-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.proposals-right-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.proposals-right-card h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-sm);
}

.proposals-right-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.proposals-right-item:last-child {
  border-bottom: none;
}

.proposals-right-item .company-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposals-right-item .icon-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════ */
/*  Design Proposals Layout                    */
/* ═══════════════════════════════════════════ */

.design-proposals-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--spacing-lg);
  align-items: start;
}

.design-review-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.design-review-card h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-sm);
}

.design-review-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.design-review-item:last-child {
  border-bottom: none;
}

/* ═══════════════════════════════════════════ */
/*  Design Card Grid (Agri4All tab)            */
/* ═══════════════════════════════════════════ */

.design-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.design-item-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: border-color 0.15s ease;
}

.design-item-card:hover {
  border-color: var(--color-border-active);
}

.design-item-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.design-item-card-client {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-item-card-client:hover {
  color: var(--color-primary);
}

.design-item-card-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-active);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  align-self: flex-start;
}

.design-item-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.design-item-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

/* ═══════════════════════════════════════════ */
/*  Design Kanban Board (Print tab)            */
/* ═══════════════════════════════════════════ */

.design-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  align-items: start;
}

.design-kanban-column {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.design-kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.design-kanban-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--color-bg-active);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.design-kanban-body {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-height: 100px;
}

.design-kanban-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease;
}

.design-kanban-card:hover {
  border-color: var(--color-border-active);
}

.design-kanban-card-client {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
}

.design-kanban-card-client:hover {
  color: var(--color-primary);
}

.design-kanban-card-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.design-kanban-card-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.design-kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════ */
/*  Client Detail Page (cd- prefix)            */
/* ═══════════════════════════════════════════ */

.cd-page {
  padding: var(--spacing-lg) 0;
  max-width: 1400px;
}

.cd-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--spacing-md);
  transition: color var(--transition-fast);
}
.cd-back:hover { color: var(--color-accent); }

.cd-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.cd-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.cd-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.cd-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.cd-client-id {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-xs);
  letter-spacing: 0.5px;
  font-family: var(--font-mono, monospace);
}

.cd-company-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
}

.cd-section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.cd-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.cd-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-field-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cd-field-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Contact cards */
.cd-contact-card {
  padding: var(--spacing-md);
}

.cd-contact-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.cd-contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

/* ═══════════════════════════════════════════ */
/*  Status Timeline                            */
/* ═══════════════════════════════════════════ */

.cd-timeline {
  max-height: 600px;
  overflow-y: auto;
}

.cd-timeline-list {
  position: relative;
  padding-left: 20px;
}
.cd-timeline-list::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--color-border);
}

.cd-timeline-item {
  position: relative;
  display: flex;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
}
.cd-timeline-item:last-child { padding-bottom: 0; }

.cd-timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg-secondary);
  flex-shrink: 0;
  z-index: 1;
}

.cd-timeline-content {
  flex: 1;
  min-width: 0;
}

.cd-timeline-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.cd-timeline-page {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  background: rgba(79, 70, 229, 0.1);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.cd-timeline-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cd-timeline-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.cd-timeline-arrow {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.cd-status-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.cd-status-old {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.cd-status-new {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.cd-timeline-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.cd-timeline-user {
  font-weight: var(--font-weight-medium);
}

.cd-timeline-time {
  white-space: nowrap;
}

/* ═══════════════════════════════════════════ */
/*  Communications by Deliverable              */
/* ═══════════════════════════════════════════ */

.cd-comms {
  max-height: 600px;
  overflow-y: auto;
}

.cd-comms-group {
  margin-bottom: var(--spacing-md);
}
.cd-comms-group:last-child { margin-bottom: 0; }

.cd-comms-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  margin-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

.cd-comms-group-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.cd-comms-group-count {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  background: var(--color-bg-active);
  padding: 1px 8px;
  border-radius: 999px;
}

.cd-comms-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cd-comms-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.cd-comms-item:hover {
  background: var(--color-bg-active);
}

.cd-comms-priority {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}
.cd-comms-priority-high { background: #f59e0b; }
.cd-comms-priority-urgent { background: #ef4444; }

.cd-comms-content {
  flex: 1;
  min-width: 0;
}

.cd-comms-subject-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
}
.cd-comms-subject-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.cd-comms-body {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-comms-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.cd-comms-sender {
  font-weight: var(--font-weight-medium);
}

.cd-empty {
  text-align: center;
  padding: var(--spacing-lg);
}

/* People Responsible (kept for other pages) */
.people-responsible-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.people-responsible-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.people-responsible-row .client-detail-label {
  min-width: 90px;
  flex-shrink: 0;
}

.people-responsible-value {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  flex: 1;
}

.people-responsible-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.people-responsible-edit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}

.people-responsible-row:hover .people-responsible-edit {
  opacity: 1;
}

.people-responsible-edit:hover {
  background: var(--color-bg-active);
  color: var(--color-text-primary);
}

/* Assignment cell (pipeline tables) */
.assignment-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.assignment-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  background: var(--color-bg-active);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.assignment-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.assignment-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}
.assignment-add-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
}
.assignment-add-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-active);
}

/* ═══════════════════════════════════════════ */
/*  Document Version Accordions                */
/* ═══════════════════════════════════════════ */

.accordion-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  user-select: none;
  transition: background var(--transition-fast);
}

.accordion-header:hover {
  background: var(--color-bg-hover);
}

.accordion-header .chevron,
.accordion-chevron {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  transition: transform var(--transition-fast);
}

.accordion-header.open .chevron {
  transform: rotate(90deg);
}

.accordion-count {
  margin-left: auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  background: var(--color-bg-active);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

.accordion-content {
  display: none;
  padding: var(--spacing-md);
}

.accordion-content.open {
  display: block;
}

.version-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.version-item:last-of-type {
  border-bottom: none;
  margin-bottom: var(--spacing-sm);
}

.version-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: 28px;
}

.version-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.version-date {
  margin-left: auto;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.version-final {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-success-muted);
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.version-superseded {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* ═══════════════════════════════════════════ */
/*  Inline Editable Fields                     */
/* ═══════════════════════════════════════════ */

.inline-editable {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.inline-editable:hover {
  background: var(--color-bg-hover);
}

.inline-edit-input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  outline: none;
  width: 100%;
}

/* ═══════════════════════════════════════════ */
/*  Change Request Items                       */
/* ═══════════════════════════════════════════ */

.change-request-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.change-request-item {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.change-request-item .cr-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.change-request-item .cr-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  display: flex;
  gap: var(--spacing-md);
}

.change-request-item .cr-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.cr-status-pending { background: var(--color-warning-muted); color: var(--color-warning); }
.cr-status-in_progress { background: var(--color-info-muted); color: var(--color-info); }
.cr-status-resolved { background: var(--color-success-muted); color: var(--color-success); }

/* ═══════════════════════════════════════════ */
/*  Assets Grid                                */
/* ═══════════════════════════════════════════ */

.assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.asset-item {
  position: relative;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  transition: border-color var(--transition-fast);
}

.asset-item:hover {
  border-color: var(--color-accent);
}

.asset-item .asset-thumbnail {
  width: 100%;
  height: 80px;
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.asset-item .asset-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.asset-item .asset-thumbnail img:hover {
  transform: scale(1.05);
}

.asset-item .asset-icon {
  font-size: 32px;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-tertiary);
}

.asset-item .asset-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-item .asset-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-error-muted);
  border: none;
  color: var(--color-error);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.asset-item:hover .asset-delete {
  opacity: 1;
}

/* ═══════════════════════════════════════════ */
/*  Icon Button                                */
/* ═══════════════════════════════════════════ */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}

.icon-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.icon-btn-success:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.icon-btn-danger:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════ */
/*  Design Proposal Detail Page                */
/* ═══════════════════════════════════════════ */

.design-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.design-detail-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.design-detail-section h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
}

/* ═══════════════════════════════════════════ */
/*  Responsive: Dashboard Layouts              */
/* ═══════════════════════════════════════════ */

@media (max-width: 900px) {
  .proposals-layout,
  .design-proposals-layout,
  .design-detail-layout {
    grid-template-columns: 1fr;
  }

  .design-kanban {
    grid-template-columns: 1fr;
  }

  .cd-layout {
    grid-template-columns: 1fr;
  }

  .cd-contact-fields {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════ */
/*  Month Calendar (Rotational Schedule)       */
/* ═══════════════════════════════════════════ */

.month-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.month-nav-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: 180px;
  text-align: center;
}

.month-calendar {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.month-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}

.month-calendar-header-cell {
  padding: var(--spacing-sm) var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  text-align: center;
}

.month-calendar-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.month-calendar-row:last-child {
  border-bottom: none;
}

.month-day-cell {
  min-height: 100px;
  padding: var(--spacing-xs);
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.month-day-cell:last-child {
  border-right: none;
}

.month-day-cell:hover {
  background: var(--color-bg-hover);
}

.month-day-cell:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.month-day-cell.today {
  background: var(--color-accent-subtle);
}

.month-day-cell.today:hover {
  background: var(--color-accent-muted);
}

.month-day-cell.weekend {
  background: var(--color-bg-tertiary);
}

.month-day-cell.weekend:hover {
  background: var(--color-bg-hover);
}

.month-day-cell.today.weekend {
  background: var(--color-accent-subtle);
}

.month-day-cell.other-month {
  opacity: 0.35;
}

.month-day-number {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1;
  padding: 2px 4px;
}

.month-day-cell.today .month-day-number {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.month-leave-tag {
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
  background: var(--color-warning-muted);
  padding: 1px 5px;
  border-radius: var(--radius-full);
  align-self: flex-start;
  line-height: 1.4;
}

.month-day-shifts {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.month-shift-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.month-shift-pill.shift-full {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.month-shift-pill.shift-morning {
  background: var(--color-info-muted);
  color: var(--color-info);
}

.month-shift-pill.shift-afternoon {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.month-shift-pill.shift-off {
  background: var(--color-error-muted);
  color: var(--color-error);
}

/* Day detail modal */

.day-detail-body {
  max-height: 60vh;
  overflow-y: auto;
}

.day-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.day-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.day-detail-row:last-child {
  border-bottom: none;
}

.day-detail-employee {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.day-detail-select {
  width: 150px;
  flex-shrink: 0;
}

.month-leave-badge {
  font-size: var(--font-size-xs);
  color: var(--color-warning);
  background: var(--color-warning-muted);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-xs);
  white-space: nowrap;
}

/* Rules modal grid */

.rules-modal-body {
  max-height: 65vh;
  overflow-y: auto;
}

.rules-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 600px;
}

.rules-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

.rules-row:last-child {
  border-bottom: none;
}

.rules-header-row {
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.rules-row-deleted {
  opacity: 0.5;
}

.rules-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.rules-cell-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-cell-days {
  width: 65px;
  flex-shrink: 0;
}

.rules-days-input {
  width: 55px;
  text-align: center;
  padding: 5px 4px;
}

.rules-cell-required {
  width: 175px;
  flex-shrink: 0;
  gap: 2px;
}

.rules-day-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  cursor: pointer;
  position: relative;
  user-select: none;
}

.rules-day-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rules-day-checkbox:has(input:checked) {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
}

.rules-cell-shift {
  width: 120px;
  flex-shrink: 0;
}

.rules-shift-select {
  width: 110px;
  padding: 5px 4px;
  font-size: var(--font-size-xs);
}

.rules-cell-actions {
  width: 130px;
  flex-shrink: 0;
  gap: var(--spacing-xs);
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════ */
/*  Leave Applications                         */
/* ═══════════════════════════════════════════ */

.leave-filters {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.leave-filters .btn {
  font-size: var(--font-size-sm);
}

.leave-filters .btn.active {
  background: var(--color-primary);
  color: #fff;
}

.leave-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.leave-status-pending {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.leave-status-approved {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.leave-status-rejected {
  background: var(--color-error-muted);
  color: var(--color-error);
}

.leave-status-cancelled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

.leave-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.leave-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.leave-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.leave-table tbody tr:hover {
  background: var(--color-bg-hover);
}

/* ═══════════════════════════════════════════ */
/*  Profile Settings                           */
/* ═══════════════════════════════════════════ */

.profile-settings-card {
  max-width: 480px;
  margin: 0 auto;
}

.profile-avatar-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: var(--font-weight-bold);
  margin: 0 auto var(--spacing-lg);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: opacity var(--transition-fast);
}

.profile-avatar-large:hover {
  opacity: 0.8;
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-large::after {
  content: 'Change';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: var(--font-size-xs);
  text-align: center;
  padding: 2px 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.profile-avatar-large:hover::after {
  opacity: 1;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.profile-form label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.profile-form .form-control {
  width: 100%;
}

/* ═══════════════════════════════════════════ */
/*  Responsive: Month Calendar                 */
/* ═══════════════════════════════════════════ */

@media (max-width: 900px) {
  .rules-grid {
    min-width: unset;
  }

  .rules-cell-required {
    width: auto;
    flex-wrap: wrap;
  }

  .rules-cell-actions {
    width: auto;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .month-day-cell {
    min-height: 60px;
    padding: 2px;
  }

  .month-day-number {
    font-size: var(--font-size-xs);
  }

  .month-shift-pill {
    width: 18px;
    height: 18px;
    font-size: 7px;
  }

  .month-leave-tag {
    font-size: 7px;
    padding: 0 3px;
  }

  .month-calendar-header-cell {
    font-size: 9px;
    padding: var(--spacing-xs) 0;
  }

  .day-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .day-detail-select {
    width: 100%;
  }

  .rules-row {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════ */
/*  Pipeline Status 6–11                       */
/* ═══════════════════════════════════════════ */

.pipeline-status-6 {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}
.pipeline-status-6 .pipeline-status-dot { background: #15803d; }

.pipeline-status-7 {
  background: rgba(234, 88, 12, 0.10);
  color: #c2410c;
}
.pipeline-status-7 .pipeline-status-dot { background: #c2410c; }

.pipeline-status-8 {
  background: rgba(59, 130, 246, 0.10);
  color: #2563eb;
}
.pipeline-status-8 .pipeline-status-dot { background: #2563eb; }

.pipeline-status-9 {
  background: rgba(168, 85, 247, 0.10);
  color: #7e22ce;
}
.pipeline-status-9 .pipeline-status-dot { background: #7e22ce; }

.pipeline-status-10 {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}
.pipeline-status-10 .pipeline-status-dot { background: #b45309; }

.pipeline-status-11 {
  background: rgba(5, 150, 105, 0.10);
  color: #047857;
}
.pipeline-status-11 .pipeline-status-dot { background: #047857; }

/* ═══════════════════════════════════════════ */
/*  Client List (Card View)                    */
/* ═══════════════════════════════════════════ */

.client-search-bar {
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
}

.client-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.client-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.client-card:hover {
  border-color: var(--color-border-light);
  box-shadow: var(--shadow-md);
}

.client-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.client-card-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.client-card-trading {
  font-size: var(--font-size-sm);
  margin-top: calc(-1 * var(--spacing-xs));
}

.client-card-contact {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-card-email {
  color: var(--color-text-tertiary);
}

.client-card-status {
  align-self: flex-start;
}

.client-card-rep {
  font-size: var(--font-size-xs);
  margin-top: auto;
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--color-border);
}

.client-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-2xl) 0;
  font-size: var(--font-size-md);
}

@media (max-width: 767px) {
  .client-card-grid {
    grid-template-columns: 1fr;
  }

  .client-search-bar {
    max-width: none;
  }
}

/* ═══════════════════════════════════════════ */
/*  Settings Popup                            */
/* ═══════════════════════════════════════════ */

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.settings-popup {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  width: 680px;
  max-width: 95vw;
  max-height: 85vh;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.2));
  overflow: hidden;
}

.settings-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 22px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}
.settings-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.settings-nav {
  background: var(--color-bg-tertiary);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-lg) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-md) 0;
  padding: 0 var(--spacing-lg);
}

.settings-nav-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 8px var(--spacing-lg);
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.settings-nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.settings-nav-active {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.settings-content {
  padding: var(--spacing-xl);
  overflow-y: auto;
}

.settings-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.settings-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-accent-muted);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  transition: opacity var(--transition-fast);
}
.settings-avatar:hover { opacity: 0.85; }
.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-avatar-initials {
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.settings-form .btn-primary {
  align-self: flex-start;
  margin-top: var(--spacing-sm);
}

@media (max-width: 600px) {
  .settings-popup {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: 90vh;
  }
  .settings-nav {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-x: auto;
    gap: var(--spacing-xs);
  }
  .settings-nav-title { display: none; }
  .settings-nav-item {
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
  }
}

/* ═══════════════════════════════════════════ */
/*  Communications — Attachments              */
/* ═══════════════════════════════════════════ */

.comms-attachment-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  min-height: 0;
}
.comms-attachment-bar:empty { display: none; }

.comms-attachment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comms-attachment-remove {
  border: none;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.comms-attachment-remove:hover { color: var(--color-error); }

/* Inline images in thread */
.comms-inline-image {
  margin-top: var(--spacing-sm);
}
.comms-inline-image img {
  max-width: 320px;
  max-height: 240px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: block;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.comms-inline-image img:hover { opacity: 0.9; }

/* File download links in thread */
.comms-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-top: var(--spacing-xs);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-info);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.comms-file-link:hover {
  background: var(--color-bg-hover);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════ */
/*  Communications — Entity Badge & Link      */
/* ═══════════════════════════════════════════ */

.comms-entity-link-wrap {
  padding: var(--spacing-xs) 0;
  margin-bottom: var(--spacing-sm);
}

.comms-entity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full, 99px);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.comms-entity-badge:hover { opacity: 0.85; }

.comms-entity-client {
  background: rgba(59, 130, 246, 0.10);
  color: #2563eb;
}
.comms-entity-deliverable {
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
}
.comms-entity-booking_form {
  background: rgba(234, 179, 8, 0.10);
  color: #a16207;
}
.comms-entity-default {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════ */
/*  Communications — Grouped Inbox            */
/* ═══════════════════════════════════════════ */

.comms-group {
  border-bottom: 1px solid var(--color-border);
}
.comms-group:last-child { border-bottom: none; }

.comms-group-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}
.comms-group-header:hover { background: var(--color-bg-hover); }

.comms-group-badge {
  background: var(--color-error, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
}

.comms-group-messages {
  /* Messages inside a group */
}

/* ═══════════════════════════════════════════ */
/*  Communications — Archive Button           */
/* ═══════════════════════════════════════════ */

.comms-archive-btn {
  color: var(--color-text-tertiary);
}
.comms-archive-btn:hover {
  background: var(--color-warning-muted);
  color: var(--color-warning);
  border-color: transparent;
}

/* ═══════════════════════════════════════════ */
/*  Time Tracking                             */
/* ═══════════════════════════════════════════ */

.time-tracking-page {
  max-width: 1200px;
  margin: 0 auto;
}

.time-tracking-content {
  margin-top: var(--spacing-lg);
}

.time-tracking-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.time-tracking-controls .form-label {
  margin-bottom: 0;
}
.time-tracking-controls .form-input {
  width: auto;
  min-width: 120px;
}

.time-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.time-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-fast);
}
.time-card:hover {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.time-card-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.time-card-avatar-wrap .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
}

.time-card-info {
  min-width: 0;
}

.time-card-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-card-since {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .time-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Time Tracking Analytics ═══ */

.tt-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .tt-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .tt-stats-row { grid-template-columns: 1fr; }
}

.tt-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .tt-charts-row { grid-template-columns: 1fr; }
}

.tt-chart-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-height: 300px;
  position: relative;
}
.tt-chart-card h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
}
.tt-chart-card canvas {
  width: 100% !important;
  max-height: 280px;
}

.tt-chart-full {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  min-height: 250px;
}
.tt-chart-full h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
}
.tt-chart-full canvas {
  width: 100% !important;
  max-height: 220px;
}

.tt-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tt-controls select,
.tt-controls input {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.tt-controls label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.tt-period-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.tt-period-btn {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.tt-period-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tt-period-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Activity Heatmap */
.activity-heatmap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  margin-bottom: 24px;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  cursor: default;
  min-height: 32px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.heatmap-cell:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;
}

/* Weekly Heatmap (7x24) */
.weekly-heatmap {
  margin-bottom: 12px;
}
.heatmap-cell-sm {
  aspect-ratio: 1;
  border-radius: 3px;
  min-height: 18px;
  min-width: 18px;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
}
.heatmap-cell-sm:hover {
  transform: scale(1.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;
}

/* Activity Timeline */
.activity-timeline {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
}
.timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
.timeline-item:last-child {
  border-bottom: none;
}
.timeline-item:hover {
  background: var(--color-bg-secondary);
}
.timeline-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  min-width: 70px;
}
.timeline-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.timeline-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Event type badge colors */
.event-badge-page_view { background: #3b82f6; }
.event-badge-cell_edit { background: #10b981; }
.event-badge-status_change { background: #f59e0b; color: #000; }
.event-badge-message_sent { background: #8b5cf6; }
.event-badge-note_created { background: #14b8a6; }
.event-badge-file_uploaded { background: #ec4899; }
.event-badge-assignment_change { background: #f97316; }
.event-badge-heartbeat { background: #6b7280; }
.event-badge-tab_focus { background: #a3e635; color: #000; }
.event-badge-tab_blur { background: #94a3b8; }
.event-badge-login { background: #4f46e5; }
.event-badge-logout { background: #ef4444; }

/* Focus Gauge */
.focus-gauge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.focus-gauge-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.focus-gauge.good { border-color: #10b981; }
.focus-gauge.medium { border-color: #f59e0b; }
.focus-gauge.low { border-color: #ef4444; }

/* Active/Idle Progress Bar */
.active-idle-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.active-idle-bar-fill {
  height: 100%;
  background: #10b981;
  border-radius: 4px;
  transition: width 0.3s;
}

/* Stat cards for time tracking */
.tt-stat-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}
.tt-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.tt-stat-value.green { color: #10b981; }
.tt-stat-value.blue { color: #3b82f6; }
.tt-stat-value.purple { color: #8b5cf6; }
.tt-stat-value.orange { color: #f97316; }
.tt-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Two-column layout for insights */
.tt-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .tt-two-col { grid-template-columns: 1fr; }
}

.tt-list-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.tt-list-card h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--color-text-primary);
}
.tt-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.tt-list-item:last-child {
  border-bottom: none;
}

.tt-load-more {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  border: none;
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.tt-load-more:hover {
  background: var(--color-bg-tertiary);
}

/* Canvas wrapper for chart cards */
.tt-canvas-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}
.tt-chart-card-full {
  grid-column: 1 / -1;
  margin-bottom: 24px;
}
.tt-chart-card-full .tt-canvas-wrap {
  height: 220px;
}
.tt-chart-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

/* Section titles inside tabs */
.tt-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 24px 0 12px 0;
}

/* Period selector bar */
.tt-period-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

/* Controls row for filters */
.tt-controls-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tt-controls-row .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.tt-controls-row .form-input {
  width: auto;
  min-width: 140px;
}

/* Activity heatmap (24-hour single row) */
.tt-heatmap-container {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.tt-heatmap-labels {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.tt-heatmap-hour-label {
  text-align: center;
  font-size: 10px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.tt-heatmap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.heatmap-cell-count {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: transparent;
  line-height: 1;
}

/* GitHub-style level colors */
.heatmap-level-0 {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
}
.heatmap-level-1 { background: rgba(34, 197, 94, 0.25); }
.heatmap-level-2 { background: rgba(34, 197, 94, 0.50); }
.heatmap-level-3 { background: rgba(34, 197, 94, 0.75); }
.heatmap-level-4 { background: #22c55e; }

/* Show count on hover */
.heatmap-cell:hover .heatmap-cell-count,
.heatmap-level-3 .heatmap-cell-count,
.heatmap-level-4 .heatmap-cell-count {
  color: #fff;
}
.heatmap-level-1:hover .heatmap-cell-count,
.heatmap-level-2:hover .heatmap-cell-count {
  color: var(--color-text-primary);
}

/* Heatmap legend */
.tt-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.tt-heatmap-legend-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin: 0 4px;
}
.tt-heatmap-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* Timeline items (tt- prefixed for time tracking) */
.tt-timeline {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  margin-bottom: 12px;
}
.tt-timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
.tt-timeline-item:last-child {
  border-bottom: none;
}
.tt-timeline-item:hover {
  background: var(--color-bg-hover);
}
.tt-timeline-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  min-width: 80px;
}
.tt-timeline-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tt-timeline-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Weekly heatmap container */
.tt-weekly-heatmap-container {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  overflow-x: auto;
  margin-bottom: 24px;
}
.heatmap-row {
  display: grid;
  grid-template-columns: 40px repeat(24, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.heatmap-header-row {
  margin-bottom: 8px;
}
.heatmap-day-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.heatmap-hour-label {
  text-align: center;
  font-size: 9px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Patterns cards */
.tt-patterns-card {
  padding: 20px;
}
.tt-card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
}
.tt-card-subtitle {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px 0;
}
.tt-card-subtitle:first-of-type {
  margin-top: 0;
}
.tt-pattern-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tt-numbered-list {
  list-style: decimal;
  padding-left: 20px;
}
.tt-pattern-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.tt-pattern-item:last-child {
  border-bottom: none;
}
.tt-pattern-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}
.tt-pattern-pct {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.tt-pattern-empty {
  padding: 8px 0;
  font-size: var(--font-size-xs);
}

/* Score badge (inline pill) */
.tt-score-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
}

/* ═══ Social Media Scheduler ═══ */

/* SM Top Navigation Bar */
.sm-top-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sm-top-nav::-webkit-scrollbar {
  display: none;
}
.sm-top-nav-tab {
  display: inline-flex;
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.sm-top-nav-tab:hover {
  color: var(--color-text-primary);
}
.sm-top-nav-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Stats */
.sm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.sm-stat-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.sm-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.sm-stat-label {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sm-stat-card.scheduled .sm-stat-value { color: #3b82f6; }
.sm-stat-card.drafts .sm-stat-value { color: #8b5cf6; }
.sm-stat-card.failed .sm-stat-value { color: #ef4444; }
.sm-stat-card.published .sm-stat-value { color: #10b981; }

/* Page header */
.sm-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.sm-page-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

/* Calendar */
.sm-calendar {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.sm-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.sm-calendar-nav h3 {
  margin: 0;
  font-size: 1.1rem;
}
.sm-calendar-nav button {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}
.sm-calendar-nav button:hover {
  background: var(--color-bg-tertiary);
}
.sm-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border);
}
.sm-calendar-weekday {
  padding: 8px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
}
.sm-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.sm-calendar-day {
  min-height: 100px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.sm-calendar-day:nth-child(7n) {
  border-right: none;
}
.sm-calendar-day:hover {
  background: var(--color-bg-secondary);
}
.sm-calendar-day.other-month {
  opacity: 0.4;
}
.sm-calendar-day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.sm-calendar-day.today .sm-calendar-day-num {
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-post-chip {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
  color: #fff;
}
.sm-post-chip:hover {
  opacity: 0.85;
}

/* Composer */
.sm-composer-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sm-composer-modal {
  background: var(--color-bg-primary);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.sm-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.sm-composer-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.sm-composer-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: 4px;
  line-height: 1;
}
.sm-composer-form {
  padding: 20px;
}
.sm-composer-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.sm-composer-form select,
.sm-composer-form textarea,
.sm-composer-form input[type="datetime-local"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  margin-bottom: 16px;
  font-family: inherit;
  box-sizing: border-box;
}
.sm-composer-form textarea {
  min-height: 120px;
  resize: vertical;
}
.sm-char-counter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -12px;
  margin-bottom: 16px;
}
.sm-char-counter span {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-bg-secondary);
}
.sm-char-counter span.over-limit {
  color: #ef4444;
  background: #fef2f2;
}
.sm-platform-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sm-platform-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
}
.sm-platform-check:hover {
  background: var(--color-bg-secondary);
}
.sm-platform-check.selected {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.08);
}
.sm-platform-check input { display: none; }
.sm-media-upload {
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sm-media-upload:hover, .sm-media-upload.dragover {
  border-color: var(--color-primary);
}
.sm-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.sm-media-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.sm-media-thumb img, .sm-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sm-media-thumb .sm-media-remove {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-composer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

/* Queue */
.sm-queue-day {
  margin-bottom: 24px;
}
.sm-queue-day-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.sm-queue-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: box-shadow 0.15s;
}
.sm-queue-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sm-queue-time {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  min-width: 50px;
}
.sm-queue-content {
  flex: 1;
  min-width: 0;
}
.sm-queue-content p {
  margin: 0 0 4px 0;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-queue-meta {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.sm-queue-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.sm-queue-actions button {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--color-text-secondary);
}
.sm-queue-actions button:hover {
  background: var(--color-bg-tertiary);
}

/* Status badges */
.sm-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}
.sm-status-draft { background: #f3f4f6; color: #6b7280; }
.sm-status-scheduled { background: #dbeafe; color: #2563eb; }
.sm-status-publishing { background: #fef3c7; color: #d97706; }
.sm-status-published { background: #d1fae5; color: #059669; }
.sm-status-failed { background: #fee2e2; color: #dc2626; }
.sm-status-cancelled { background: #f3f4f6; color: #9ca3af; }
.sm-status-pending { background: #f3f4f6; color: #6b7280; }

/* Platform badges */
.sm-platform-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  margin-right: 4px;
}
.sm-platform-facebook { background: #1877f2; }
.sm-platform-instagram { background: #e4405f; }
.sm-platform-twitter { background: #1da1f2; }
.sm-platform-linkedin { background: #0a66c2; }
.sm-platform-youtube { background: #ff0000; }

/* Post table */
.sm-table-wrap {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.sm-table {
  width: 100%;
  border-collapse: collapse;
}
.sm-table th, .sm-table td {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.sm-table th {
  background: var(--color-bg-secondary);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sm-table tr:last-child td {
  border-bottom: none;
}
.sm-table tr:hover td {
  background: var(--color-bg-secondary);
}
.sm-table-content {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filters bar */
.sm-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.sm-filters select, .sm-filters input {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Pagination */
.sm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}
.sm-pagination button {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-primary);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}
.sm-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.sm-pagination span {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* Accounts */
.sm-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.sm-account-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sm-account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
  overflow: hidden;
}
.sm-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sm-account-info {
  flex: 1;
  min-width: 0;
}
.sm-account-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.sm-account-meta {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.sm-account-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Settings */
.sm-settings-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.sm-settings-section h4 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-credential-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.sm-credential-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.sm-credential-form input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.sm-credential-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Activity feed */
.sm-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sm-activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.sm-activity-item:last-child {
  border-bottom: none;
}
.sm-activity-time {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  min-width: 100px;
  flex-shrink: 0;
}

/* Post detail */
.sm-post-detail {
  max-width: 800px;
}
.sm-post-detail-content {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  white-space: pre-wrap;
  line-height: 1.6;
}
.sm-post-detail-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.sm-post-detail-section h4 {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.sm-target-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.sm-target-row:last-child { border-bottom: none; }

/* Media library grid */
.sm-media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.sm-media-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.sm-media-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.sm-media-card img, .sm-media-card video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.sm-media-card-info {
  padding: 8px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lightbox */
.sm-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sm-lightbox img, .sm-lightbox video {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

/* Link clients modal */
.sm-link-modal {
  background: var(--color-bg-primary);
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
}
.sm-link-modal h4 {
  margin: 0 0 12px;
}
.sm-link-modal select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 12px;
}

/* General button styles used in scheduler */
.sm-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: all 0.15s;
}
.sm-btn:hover {
  background: var(--color-bg-secondary);
}
.sm-btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.sm-btn-primary:hover {
  opacity: 0.9;
  background: var(--color-primary);
}
.sm-btn-danger {
  color: #dc2626;
  border-color: #fecaca;
}
.sm-btn-danger:hover {
  background: #fef2f2;
}
.sm-btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* Section panel used across scheduler pages */
.sm-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.sm-section h3, .sm-section h4 {
  margin: 0 0 12px 0;
}

/* Chip colors for calendar */
.sm-chip-1 { background: #3b82f6; }
.sm-chip-2 { background: #8b5cf6; }
.sm-chip-3 { background: #ec4899; }
.sm-chip-4 { background: #f97316; }
.sm-chip-5 { background: #10b981; }
.sm-chip-6 { background: #06b6d4; }
.sm-chip-7 { background: #eab308; }

/* Empty state */
.sm-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-text-tertiary);
}
.sm-empty p {
  margin: 8px 0;
}

@media (max-width: 768px) {
  .sm-calendar-day { min-height: 60px; }
  .sm-credential-form { grid-template-columns: 1fr; }
  .sm-account-grid { grid-template-columns: 1fr; }
  .sm-filters { flex-direction: column; }
  .sm-queue-item { flex-direction: column; }
}

/* ═══════════════════════════════════════════ */
/*  Production Dashboard                      */
/* ═══════════════════════════════════════════ */

.production-page {
  max-width: 1400px;
  margin: 0 auto;
}

.prod-month-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.prod-month-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  min-width: 160px;
  text-align: center;
  cursor: default;
}

/* Month selector */
.month-selector {
  display: flex;
  align-items: center;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.month-selector-arrow {
  background: none;
  border: none;
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s;
}

.month-selector-arrow:hover {
  background: rgba(255,255,255,0.12);
}

.month-selector-label {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 4px;
  min-width: 120px;
  text-align: center;
  user-select: none;
}

/* Production overview — grouped by client */
.prod-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--spacing-md);
}

.prod-client-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.prod-client-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

.prod-client-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.prod-service-list {
  padding: 0;
}

.prod-service-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.prod-service-row:last-child {
  border-bottom: none;
}

.prod-service-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.prod-service-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Action Board — split layout */
.prod-board-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.prod-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

/* Waiting cards */
.prod-waiting-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border-left: 4px solid var(--color-border);
  transition: box-shadow var(--transition-fast);
}

.prod-waiting-card:hover {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.prod-wait-blue {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}

.prod-wait-yellow {
  border-left-color: #eab308;
  background: rgba(234, 179, 8, 0.06);
}

.prod-wait-orange {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, 0.06);
}

.prod-wait-red {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.prod-waiting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.prod-waiting-header .cell-link {
  font-weight: var(--font-weight-semibold);
}

.prod-waiting-days {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-active);
  white-space: nowrap;
}

.prod-waiting-days-warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
}

.prod-waiting-days-danger {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

.prod-waiting-deliv {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-xs) 0;
}

.prod-waiting-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0 0 var(--spacing-xs) 0;
}

.prod-waiting-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  display: block;
  margin-bottom: var(--spacing-sm);
}

.prod-waiting-actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* Production client view */
.prod-client-page {
  max-width: 1200px;
  margin: 0 auto;
}

.prod-client-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.prod-upload-area {
  min-height: 100px;
}

.prod-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

.prod-asset-item {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs);
}

.prod-notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.prod-note-item {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 900px) {
  .prod-client-grid {
    grid-template-columns: 1fr;
  }

  .prod-board-layout {
    grid-template-columns: 1fr;
  }

  .prod-client-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════ */
/*  Editorial Content Calendar                 */
/* ═══════════════════════════════════════════ */

/* Layout */
.ecc-container {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  min-height: calc(100vh - 80px);
}

.ecc-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.ecc-main {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.ecc-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.ecc-month-label {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Client Info Panel */
.ecc-client-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);
  position: sticky;
  top: var(--spacing-lg);
}

.ecc-client-name {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.ecc-website-link {
  color: var(--color-accent);
  text-decoration: none;
  word-break: break-all;
  font-size: var(--font-size-sm);
}

.ecc-website-link:hover {
  text-decoration: underline;
}

.ecc-platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.ecc-platform-badge {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  line-height: 1;
}

.ecc-badge-fb { background: #1877F2; }
.ecc-badge-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ecc-badge-li { background: #0A66C2; }
.ecc-badge-yt { background: #FF0000; }
.ecc-badge-tt { background: #000000; }
.ecc-badge-x { background: #536471; }

.ecc-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-md) 0;
}

.ecc-info-field {
  margin-bottom: var(--spacing-sm);
}

.ecc-info-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.ecc-info-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.ecc-focus-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
}

/* Posts Table */
.ecc-table-wrap {
  margin-bottom: var(--spacing-md);
}

.ecc-posts-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.ecc-posts-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: var(--font-weight-semibold);
  background: var(--color-bg-tertiary);
  border-bottom: 2px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ecc-posts-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: var(--font-size-sm);
}

.ecc-posts-table td:nth-child(1) {
  width: 40px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}

.ecc-posts-table td:nth-child(2) {
  width: 120px;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.ecc-posts-table td:nth-child(3) {
  min-width: 300px;
}

.ecc-posts-table td:nth-child(4) {
  width: 250px;
}

.ecc-posts-table tbody tr:last-child td {
  border-bottom: none;
}

/* Date Input */
.ecc-date-input {
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  outline: none;
}

/* Caption Editor */
.ecc-caption-editor {
  min-height: 80px;
}

.ecc-caption-editor .ql-toolbar {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-color: var(--color-border);
  padding: 4px;
}

.ecc-caption-editor .ql-container {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-color: var(--color-border);
  min-height: 60px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.ecc-caption-editor .ql-editor {
  min-height: 60px;
  padding: 8px 12px;
}

.ecc-caption-editor .ql-editor.ql-blank::before {
  font-style: normal;
  color: var(--color-text-tertiary);
}

/* Content Files Area */
.ecc-content-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--spacing-sm);
}

.ecc-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  max-width: 200px;
}

.ecc-file-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.ecc-file-remove {
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: 1rem;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.ecc-file-remove:hover {
  color: var(--color-error);
}

.ecc-add-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: flex-start;
}

.ecc-add-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border-light);
  background: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ecc-add-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ecc-add-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ecc-video-input-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}

/* Editorial Dashboard Cards */
.ecc-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.ecc-deliverable-card {
  display: block;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.ecc-deliverable-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.ecc-card-client {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.ecc-card-month {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.ecc-card-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.ecc-card-posts {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.ecc-card-arrow {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  font-size: var(--font-size-lg);
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.ecc-deliverable-card:hover .ecc-card-arrow {
  color: var(--color-accent);
  transform: translateX(2px);
}

/* Action Bar */
.ecc-action-bar {
  padding: var(--spacing-md) 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-md);
}

.ecc-submit-btn {
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  transition: opacity var(--transition-fast);
}

.ecc-submit-btn:hover {
  background: var(--color-accent-hover);
}

.ecc-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Responsive: Editorial Content Calendar */
@media (max-width: 900px) {
  .ecc-container {
    flex-direction: column;
    padding: var(--spacing-md);
  }

  .ecc-sidebar {
    width: 100%;
  }

  .ecc-client-card {
    position: static;
  }

  .ecc-posts-table td:nth-child(3) {
    min-width: 220px;
  }

  .ecc-posts-table td:nth-child(4) {
    width: 180px;
  }

  .ecc-card-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .ecc-action-bar {
    flex-direction: column;
  }

  .ecc-action-bar .btn,
  .ecc-submit-btn {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════ */
/*  Design Content Calendar (DCC)             */
/* ═══════════════════════════════════════════ */

.dcc-container {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  min-height: calc(100vh - 80px);
}

.dcc-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.dcc-top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.dcc-top-bar-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.dcc-top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.dcc-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-lg);
  flex: 1;
  min-height: 0;
}

.dcc-left-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.dcc-right-panel {
  min-width: 0;
  overflow-x: auto;
}

.dcc-collapsible-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dcc-collapsible-card.dcc-card-disabled {
  opacity: 0.6;
}

.dcc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: left;
  transition: background-color var(--transition-fast);
}

.dcc-card-header:hover {
  background: var(--color-bg-hover);
}

.dcc-card-header-disabled {
  cursor: default;
  pointer-events: none;
}

.dcc-card-chevron {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}

.dcc-card-body {
  padding: 0 16px 16px;
}

.dcc-card-body[hidden] {
  display: none;
}

.dcc-loading-text,
.dcc-empty-text {
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) 0;
}

.dcc-scraped-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}

.dcc-scraped-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--color-border-light);
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.dcc-scraped-thumb:hover {
  opacity: 0.85;
  border-color: var(--color-accent);
}

.dcc-rescrape-wrap {
  margin-top: var(--spacing-sm);
  display: flex;
  justify-content: flex-end;
}

.dcc-month-group-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--spacing-sm) 0 4px;
}

.dcc-coming-soon-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}

.dcc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s;
}

.dcc-back-btn:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.dcc-change-request {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.dcc-change-request:last-child {
  border-bottom: none;
}

.dcc-cr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.dcc-cr-by {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.dcc-cr-date {
  font-size: var(--font-size-xs);
}

.dcc-cr-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 4px 0;
  line-height: 1.5;
}

.dcc-cr-status {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 900px) {
  .dcc-body {
    grid-template-columns: 1fr;
  }

  .dcc-left-panel {
    flex-direction: row;
    overflow-x: auto;
  }

  .dcc-collapsible-card {
    min-width: 260px;
    flex-shrink: 0;
  }

  .dcc-top-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .dcc-container {
    padding: var(--spacing-md);
  }

  .dcc-left-panel {
    flex-direction: column;
  }

  .dcc-collapsible-card {
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════ */
/*  Social Media Content Calendar (SMCC)      */
/* ═══════════════════════════════════════════ */

/* ── Layout ── */

.smcc-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 180px);
}

.smcc-clients {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.smcc-clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.smcc-clients-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.smcc-clients-count {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.smcc-client-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.smcc-calendar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Client Cards ── */

.smcc-client-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.smcc-client-card:hover {
  box-shadow: var(--shadow-md);
}

.smcc-client-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.smcc-client-card.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.smcc-client-name {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.smcc-client-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: 8px;
}

.smcc-meta-sep {
  color: var(--color-text-tertiary);
}

.smcc-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.smcc-platform-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  letter-spacing: 0.02em;
}

.smcc-schedule-btn {
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-success);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.smcc-schedule-btn:hover {
  background: #15803d;
}

.smcc-schedule-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.smcc-scheduled-badge {
  text-align: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--color-success-muted);
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

/* ── Empty & Loading States ── */

.smcc-empty {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--color-text-secondary);
}

.smcc-empty-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-xs);
}

.smcc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ── Calendar Header ── */

.smcc-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  flex-shrink: 0;
}

.smcc-cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smcc-cal-nav button {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
}

.smcc-cal-nav button:hover {
  background: var(--color-bg-hover);
}

.smcc-cal-title {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.smcc-view-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.smcc-view-btn {
  padding: 6px 16px;
  border: none;
  background: var(--color-bg-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.smcc-view-btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.smcc-view-btn:hover {
  background: var(--color-bg-hover);
}

.smcc-view-btn.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* ── Month Grid ── */

.smcc-month-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
}

.smcc-day-header {
  padding: 8px;
  text-align: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}

.smcc-day-cell {
  min-height: 80px;
  padding: 4px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.smcc-day-cell:nth-child(7n + 7) {
  border-right: none;
}

.smcc-day-cell.outside {
  background: var(--color-bg-tertiary);
  opacity: 0.5;
}

.smcc-day-cell.today {
  background: rgba(212, 101, 74, 0.04);
}

.smcc-day-cell.today .smcc-day-num {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.smcc-day-num {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
  padding: 2px 4px;
}

.smcc-post-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  margin-bottom: 2px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.smcc-post-chip:hover {
  background: var(--color-bg-active);
}

.smcc-post-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.smcc-post-more {
  font-size: 0.65rem;
  color: var(--color-text-tertiary);
  padding: 2px 6px;
}

/* ── Week Grid ── */

.smcc-week-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
}

.smcc-week-col {
  background: var(--color-bg-secondary);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.smcc-week-col-header {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.smcc-week-col-header.smcc-week-today {
  color: var(--color-accent);
}

.smcc-week-post {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
}

.smcc-week-post-time {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}

.smcc-week-post-client {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.smcc-week-post-caption {
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}

.smcc-week-post-thumb {
  width: 100%;
  max-height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 4px;
}

.smcc-week-empty {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--spacing-md) 0;
}

/* ── Day View ── */

.smcc-day-view {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}

.smcc-day-post-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.smcc-day-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.smcc-day-post-header .smcc-day-post-client {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.smcc-day-post-num {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.smcc-day-post-header .smcc-day-post-time {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-left: auto;
}

.smcc-day-post-caption {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.smcc-day-post-caption.smcc-day-post-no-caption {
  color: var(--color-text-tertiary);
  font-style: italic;
}

.smcc-day-post-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.smcc-day-post-file {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.smcc-day-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--spacing-2xl);
}

.smcc-day-empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.smcc-day-empty-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-xs);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .smcc-container {
    flex-direction: column;
    height: auto;
  }

  .smcc-clients {
    width: 100%;
    max-height: 300px;
  }

  .smcc-client-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding-bottom: 8px;
  }

  .smcc-client-card {
    min-width: 260px;
    flex-shrink: 0;
  }

  .smcc-calendar {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .smcc-cal-header {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .smcc-cal-nav {
    justify-content: space-between;
  }

  .smcc-view-toggle {
    align-self: flex-end;
  }

  .smcc-week-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .smcc-day-post-file {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .smcc-client-card {
    min-width: 220px;
  }

  .smcc-week-grid {
    grid-template-columns: 1fr;
  }

  .smcc-view-toggle {
    align-self: stretch;
  }

  .smcc-view-btn {
    flex: 1;
    text-align: center;
  }
}

/* ── DB View ────────────────────────────────────────────────────────── */

.db-view-page {
  max-width: 1100px;
}

/* ═══════════════════════════════════════════════════════════════════════
   FINANCE MODULE
   ═══════════════════════════════════════════════════════════════════════ */

.finance-page {
  max-width: 1400px;
  padding: 0 8px;
}

.finance-page-header {
  margin-bottom: 24px;
}

.finance-page-header h1 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.finance-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

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

.finance-back-link {
  display: inline-block;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 8px;
}
.finance-back-link:hover { color: var(--color-text-primary); }

.finance-loading, .finance-empty, .finance-error {
  color: var(--color-text-tertiary);
  padding: 24px 0;
  text-align: center;
}
.finance-error { color: var(--color-status-error); }
.finance-empty-sm { font-size: 0.8rem; color: var(--color-text-tertiary); }

/* ── Stat Cards ──────────────────────────────────────────────────── */

.finance-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.finance-stat-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid var(--color-border);
}
.finance-stat-card-blue { border-left-color: var(--color-status-info); }
.finance-stat-card-green { border-left-color: var(--color-status-success); }
.finance-stat-card-yellow { border-left-color: var(--color-status-warning); }
.finance-stat-card-red { border-left-color: var(--color-status-error); }
.finance-stat-card-purple { border-left-color: #9333ea; }

.finance-stat-card-value {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.finance-stat-card-label {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Tables ──────────────────────────────────────────────────────── */

.finance-table-wrap {
  overflow-x: auto;
}

.finance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.finance-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.finance-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.finance-table-compact th,
.finance-table-compact td {
  padding: 6px 8px;
}

.finance-table-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.finance-table-row-clickable:hover {
  background: var(--color-bg-tertiary);
}

.finance-amount { text-align: right; font-variant-numeric: tabular-nums; }
.finance-amount-green { color: var(--color-status-success); }
.finance-amount-yellow { color: var(--color-status-warning); }
.finance-amount-red { color: var(--color-status-error); }

/* ── Badges ──────────────────────────────────────────────────────── */

.finance-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
}
.finance-badge-lg { font-size: 0.85rem; padding: 4px 14px; }

.finance-badge-green { background: rgba(34,197,94,0.12); color: #16a34a; }
.finance-badge-blue { background: rgba(59,130,246,0.12); color: #2563eb; }
.finance-badge-yellow { background: rgba(234,179,8,0.12); color: #b45309; }
.finance-badge-red { background: rgba(239,68,68,0.12); color: #dc2626; }
.finance-badge-purple { background: rgba(168,85,247,0.12); color: #9333ea; }

.finance-client-id-badge {
  display: inline-block;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  font-family: monospace;
  white-space: nowrap;
}
.finance-client-id-badge-lg { font-size: 1rem; padding: 4px 12px; }

/* ── Buttons ─────────────────────────────────────────────────────── */

.finance-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.finance-btn:hover { background: var(--color-bg-tertiary); }
.finance-btn:disabled { opacity: 0.5; cursor: default; }

.finance-btn-primary {
  background: var(--color-status-info);
  color: #fff;
  border-color: var(--color-status-info);
}
.finance-btn-primary:hover { opacity: 0.9; background: var(--color-status-info); }

.finance-btn-secondary { background: var(--color-bg-secondary); }

.finance-btn-danger {
  color: var(--color-status-error);
  border-color: var(--color-status-error);
}
.finance-btn-danger:hover { background: rgba(239,68,68,0.08); }

.finance-btn-sm { padding: 4px 10px; font-size: 0.8rem; }

.finance-btn-icon {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border);
  cursor: pointer;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  margin-right: 4px;
}
.finance-btn-icon:hover { background: var(--color-bg-tertiary); }
.finance-btn-icon-danger { color: var(--color-status-error); }

/* ── Filter Pills ────────────────────────────────────────────────── */

.finance-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.finance-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.finance-pill:hover { background: var(--color-bg-tertiary); }
.finance-pill.active {
  background: var(--color-status-info);
  color: #fff;
  border-color: var(--color-status-info);
}

/* ── Tabs ────────────────────────────────────────────────────────── */

.finance-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 16px;
}

.finance-tab {
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.15s;
}
.finance-tab:hover { color: var(--color-text-primary); }
.finance-tab.active {
  color: var(--color-status-info);
  border-bottom-color: var(--color-status-info);
}

.finance-tab-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* ── Forms ────────────────────────────────────────────────────────── */

.finance-form-group {
  margin-bottom: 12px;
}

.finance-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.finance-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.finance-input:focus { outline: none; border-color: var(--color-status-info); }
.finance-input:disabled { opacity: 0.5; cursor: default; }
.finance-input-sm { width: auto; max-width: 120px; }

.finance-input-inline {
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.8rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  width: 100%;
  box-sizing: border-box;
}
.finance-input-inline:focus { outline: none; border-color: var(--color-status-info); }

.finance-checkbox { width: auto; }

.finance-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}

.finance-modal-content {
  max-width: 500px;
}
.finance-modal-lg { max-width: 680px; }

.finance-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ── Client Header ───────────────────────────────────────────────── */

.finance-client-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-client-meta {
  display: flex;
  gap: 16px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* ── Deliverable Cards ───────────────────────────────────────────── */

.finance-deliverable-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--color-bg-secondary);
}

.finance-deliverable-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.finance-deliverable-months {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finance-month-tag {
  font-size: 0.75rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ── Booking Form Pricing ────────────────────────────────────────── */

.finance-bf-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.finance-bf-card-outdated {
  opacity: 0.6;
}

.finance-bf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
  flex-wrap: wrap;
}

.finance-bf-card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-bf-card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.finance-bf-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
}

.finance-bf-range {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: 2px 10px;
  border-radius: 6px;
}

.finance-bf-date {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.finance-bf-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.finance-bf-mini-stat {
  background: var(--color-bg-secondary);
  padding: 14px 20px;
  text-align: center;
}

.finance-bf-mini-stat-value {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.finance-bf-mini-stat-label {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.finance-bf-table-wrap {
  padding: 0;
}

.finance-bf-table-wrap .finance-table {
  margin: 0;
}

.finance-bf-totals-row {
  background: var(--color-bg-tertiary);
  font-weight: var(--font-weight-bold);
}

.finance-bf-totals-row td {
  border-bottom: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ── Invoice Builder Two-Panel Layout ────────────────────────────── */

.finance-builder-panels {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

.finance-builder-left {
  min-width: 0;
}

.finance-builder-right {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  background: var(--color-bg-secondary);
  max-height: 80vh;
  overflow-y: auto;
}
.finance-builder-right h3 { margin: 0 0 12px 0; font-size: 0.95rem; }

.finance-builder-client {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.finance-builder-client-id {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.finance-builder-client-name {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
}
.finance-builder-client-meta {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.finance-builder-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.finance-builder-lines {
  margin-bottom: 16px;
}
.finance-builder-lines h3 { margin: 0 0 12px 0; font-size: 0.95rem; }

.finance-line-table-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
}

/* ── Invoice Totals Block ────────────────────────────────────────── */

.finance-builder-totals, .finance-invoice-doc-totals {
  margin-left: auto;
  max-width: 320px;
}

.finance-totals-block {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  background: var(--color-bg-secondary);
}

.finance-total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.875rem;
}
.finance-total-row-bold {
  font-weight: var(--font-weight-bold);
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 8px;
}

/* ── Deliverable Picker ──────────────────────────────────────────── */

.finance-deliverable-picker-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.finance-deliverable-picker-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.finance-deliverable-month-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-primary);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-primary);
  transition: background 0.15s;
}
.finance-deliverable-month-btn:hover { background: var(--color-bg-tertiary); }
.finance-deliverable-month-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Invoice Document View ───────────────────────────────────────── */

.finance-view-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.finance-invoice-doc {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 40px;
  max-width: 900px;
}

.finance-invoice-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.finance-invoice-doc-company h2 {
  margin: 0;
  font-size: 1.4rem;
}

.finance-invoice-doc-info {
  text-align: right;
}

.finance-invoice-doc-title {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: #2563eb;
  margin: 0 0 4px 0;
}

.finance-invoice-doc-info > div {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 2px;
}

.finance-invoice-doc-client {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}
.finance-invoice-doc-client h3 {
  margin: 0 0 8px 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #64748b;
}
.finance-invoice-doc-client-id {
  font-family: monospace;
  font-size: 0.85rem;
  color: #64748b;
}
.finance-invoice-doc-client-name {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 4px;
}

.finance-invoice-doc-table {
  margin-bottom: 24px;
}
.finance-invoice-doc-table th {
  background: #f1f5f9;
}

.finance-invoice-doc-payments {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
.finance-invoice-doc-payments h3 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

.finance-invoice-doc-notes {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
.finance-invoice-doc-notes h3 { margin: 0 0 8px 0; }

/* ── Revenue Charts (CSS only) ───────────────────────────────────── */

.finance-chart-section {
  margin-bottom: 24px;
}
.finance-chart-section h3 { margin: 0 0 16px 0; }

.finance-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-secondary);
  overflow-x: auto;
  min-height: 160px;
}

.finance-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 40px;
}

.finance-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}

.finance-bar {
  width: 18px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
}
.finance-bar-blue { background: #3b82f6; }
.finance-bar-green { background: #22c55e; }

.finance-bar-label {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  text-align: center;
}

.finance-chart-legend {
  display: flex;
  gap: 16px;
  padding-left: 16px;
  align-self: center;
}

.finance-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.finance-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.finance-legend-dot-blue { background: #3b82f6; }
.finance-legend-dot-green { background: #22c55e; }

.finance-revenue-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.finance-revenue-col h3 { margin: 0 0 12px 0; }

.finance-revenue-content {}

/* ── Aging Colors ────────────────────────────────────────────────── */

.finance-aging-30 { background: rgba(234,179,8,0.05); }
.finance-aging-60 { background: rgba(234,179,8,0.1); }
.finance-aging-90 { background: rgba(239,68,68,0.08); }

/* ── Billing Profiles Grid ───────────────────────────────────────── */

.finance-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.finance-profile-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
}
.finance-profile-default { border-color: var(--color-status-success); }

.finance-profile-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.finance-profile-card-header h3 { margin: 0; font-size: 1rem; }

.finance-profile-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.finance-profile-legal {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.finance-profile-details {
  margin-bottom: 12px;
}

.finance-profile-detail-row {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
  padding: 2px 0;
}
.finance-profile-detail-label {
  color: var(--color-text-tertiary);
  min-width: 100px;
}

.finance-profile-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .finance-builder-panels {
    grid-template-columns: 1fr;
  }
  .finance-builder-right {
    max-height: none;
  }
  .finance-revenue-tables {
    grid-template-columns: 1fr;
  }
  .finance-form-grid {
    grid-template-columns: 1fr;
  }
  .finance-builder-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .finance-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .finance-profiles-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Print Styles ────────────────────────────────────────────────── */

@media print {
  .no-print,
  #sidebar,
  #menu-toggle,
  .finance-view-actions .finance-header-actions,
  .finance-back-link {
    display: none !important;
  }

  .finance-page {
    max-width: none;
    padding: 0;
  }

  .finance-invoice-doc {
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  #app {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  body {
    background: #fff;
  }
}

/* ── Bazil Chat Bubble ────────────────────────────────────────────────── */

.bazil-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #D4654A;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(212, 101, 74, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  font-family: var(--font-family);
}
.bazil-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(212, 101, 74, 0.45);
}

.bazil-chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  height: 520px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-family);
}

.bazil-hidden {
  display: none !important;
}

/* Header */
.bazil-chat-header {
  background: #1a1a1a;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.bazil-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bazil-header-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.bazil-context-badge {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}
.bazil-header-actions {
  display: flex;
  gap: 4px;
}
.bazil-header-actions button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.bazil-header-actions button:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Messages area */
.bazil-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f9f8f6;
}

.bazil-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
}
.bazil-msg-user {
  align-self: flex-end;
  background: #D4654A;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bazil-msg-bot {
  align-self: flex-start;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #e8e5e0;
  border-bottom-left-radius: 4px;
}

/* Markdown content inside bot messages */
.bazil-msg-content p {
  margin: 0 0 6px 0;
}
.bazil-msg-content p:last-child {
  margin-bottom: 0;
}
.bazil-msg-content ul {
  margin: 4px 0;
  padding-left: 18px;
}
.bazil-msg-content li {
  margin: 2px 0;
}
.bazil-msg-content strong {
  font-weight: 600;
}
.bazil-link {
  color: #D4654A;
  text-decoration: none;
  font-weight: 500;
}
.bazil-link:hover {
  text-decoration: underline;
}

/* Typing indicator */
.bazil-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e8e5e0;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.bazil-dot {
  width: 7px;
  height: 7px;
  background: #999;
  border-radius: 50%;
  animation: bazilBounce 1.4s infinite ease-in-out;
}
.bazil-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.bazil-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bazilBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Input bar */
.bazil-chat-input-bar {
  padding: 12px;
  border-top: 1px solid #e8e5e0;
  display: flex;
  gap: 8px;
  background: #fff;
  flex-shrink: 0;
}
.bazil-chat-input {
  flex: 1;
  border: 1px solid #e8e5e0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-family);
  outline: none;
  transition: border-color 0.15s;
}
.bazil-chat-input:focus {
  border-color: #D4654A;
}
.bazil-send-btn {
  background: #D4654A;
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.bazil-send-btn:hover {
  background: #c05540;
}

/* Confirmation card */
.bazil-confirm-card {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e8e5e0;
  border-radius: 12px;
  padding: 14px;
  max-width: 92%;
  font-size: 13px;
}
.bazil-confirm-card.bazil-confirmed {
  opacity: 0.6;
  pointer-events: none;
}
.bazil-confirm-msg {
  margin: 0 0 12px 0;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.4;
}
.bazil-field-group {
  margin-bottom: 10px;
}
.bazil-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.bazil-field-select,
.bazil-field-text,
.bazil-field-date {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #e8e5e0;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-family);
  background: #f9f8f6;
  outline: none;
  box-sizing: border-box;
}
.bazil-field-select:focus,
.bazil-field-text:focus,
.bazil-field-date:focus {
  border-color: #D4654A;
}
.bazil-field-multiselect {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bazil-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.bazil-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.bazil-cancel-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid #e8e5e0;
  border-radius: 8px;
  background: #fff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s;
}
.bazil-cancel-btn:hover {
  background: #f5f3f0;
}
.bazil-confirm-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: #D4654A;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s;
}
.bazil-confirm-btn:hover {
  background: #c05540;
}

/* Responsive */
@media (max-width: 480px) {
  .bazil-chat-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 80px);
    bottom: 8px;
    right: 8px;
    border-radius: 12px;
  }
  .bazil-bubble {
    bottom: 16px;
    right: 16px;
  }
}

/* ── Change Requests ── */
.cr-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 24px;
}
.cr-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.15s;
}
.cr-tab:hover { color: #111; }
.cr-tab-active {
  color: #111;
  border-bottom-color: #111;
}
.cr-content { min-height: 200px; }
.cr-empty {
  text-align: center;
  padding: 48px 16px;
  color: #9ca3af;
  font-size: 14px;
}
.cr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.cr-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cr-card-title {
  font-weight: 600;
  font-size: 15px;
  color: #111;
  line-height: 1.3;
}
.cr-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cr-card-time {
  font-size: 12px;
  color: #9ca3af;
}
.cr-card-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
}
.cr-card-info {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #9ca3af;
}
.cr-card-review-note,
.cr-card-work-note {
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid #e5e7eb;
}
.cr-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #f3f4f6;
}

/* Priority badges */
.cr-priority {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.cr-priority-low { background: #f3f4f6; color: #6b7280; }
.cr-priority-medium { background: #fef3c7; color: #92400e; }
.cr-priority-high { background: #fed7aa; color: #c2410c; }
.cr-priority-urgent { background: #fecaca; color: #991b1b; }

/* Status badges */
.cr-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.cr-status-submitted { background: #e0e7ff; color: #3730a3; }
.cr-status-in_progress { background: #dbeafe; color: #1e40af; }
.cr-status-completed { background: #d1fae5; color: #065f46; }
.cr-status-approved { background: #d1fae5; color: #065f46; }
.cr-status-rejected { background: #fecaca; color: #991b1b; }
.cr-status-cancelled { background: #f3f4f6; color: #6b7280; }

/* Category badges */
.cr-category {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.cr-category-feature { background: #ede9fe; color: #5b21b6; }
.cr-category-bug { background: #fce7f3; color: #9d174d; }
.cr-category-improvement { background: #cffafe; color: #155e75; }
.cr-category-other { background: #f3f4f6; color: #6b7280; }

/* Dashboard board layout */
.cr-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-height: 300px;
}
.cr-board-col {
  background: #f9fafb;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cr-board-col-header {
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  padding: 4px 0 8px;
  border-bottom: 2px solid #e5e7eb;
}
.cr-board-col .cr-card {
  border: 1px solid #e5e7eb;
}

/* Approval sections */
.cr-approval-section {
  margin-bottom: 32px;
}
.cr-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .cr-board {
    grid-template-columns: 1fr;
  }
  .cr-grid {
    grid-template-columns: 1fr;
  }
}