/* ============================================================
   WILDWOOD HQ — Global Styles
   styles.css is the single source of truth for all design
   tokens, layout, and shared components. Page-specific CSS
   files only contain overrides unique to that page.
   ============================================================ */

/* ── CSS VARIABLES ───────────────────────────────────────────
   All colours, spacing and shadow values live here.
   Never hardcode a hex value in a page CSS file —
   always reference a variable from this list.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --primary:        #f57418;
  --primary-dark:   #d4610f;
  --primary-light:  #fff3eb;

  /* UI Backgrounds */
  --bg:             #f1f5f9;
  --surface:        #ffffff;
  --surface-raised: #ffffff;

  /* Sidebar */
  --sidebar-bg:     #12181f;
  --sidebar-width:  240px;

  /* Borders */
  --border:         #e2e8f0;
  --border-strong:  #cbd5e1;

  /* Text */
  --text:           #0f172a;
  --text-muted:     #64748b;
  --text-light:     #94a3b8;

  /* Status colours */
  --success:        #16a34a;
  --success-bg:     #dcfce7;
  --warning:        #d97706;
  --warning-bg:     #fef9c3;
  --danger:         #dc2626;
  --danger-bg:      #fee2e2;
  --info:           #0284c7;
  --info-bg:        #e0f2fe;

  /* Misc */
  --radius:         8px;
  --radius-lg:      12px;
  --shadow:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.12);

  /* Mobile top bar height — used to offset page content below it */
  --topbar-height: 56px;
}

/* ── RESET ───────────────────────────────────────────────────
   Minimal reset — removes default browser margin/padding
   and ensures consistent box-sizing across all elements.
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  /* Prevents layout shift when a scrollbar appears/disappears */
  scrollbar-gutter: stable;
}

body {
  font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:       var(--bg);
  color:            var(--text);
  font-size:        15px;
  line-height:      1.5;
  min-height:       100vh;
  /* On mobile, add bottom padding so content isn't hidden behind the tab bar */
  padding-bottom:   0;
}

img {
  display:   block;
  max-width: 100%;
}

a {
  color:           var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor:      pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size:   inherit;
}

/* ── APP LAYOUT ──────────────────────────────────────────────
   The app uses a two-column layout:
   - Left: fixed sidebar (desktop only)
   - Right: scrollable main content area
   On mobile the sidebar is hidden and replaced by a bottom
   tab bar. The main content fills the full screen width.
   ─────────────────────────────────────────────────────────── */
.app-layout {
  display:    flex;
  min-height: 100vh;
}

/* ── SIDEBAR ─────────────────────────────────────────────────
   Fixed left sidebar. Hidden on mobile.
   ─────────────────────────────────────────────────────────── */
#sidebar {
  width:       var(--sidebar-width);
  flex-shrink: 0;
  position:    fixed;
  top:         0;
  left:        0;
  height:      100vh;
  z-index:     100;
  display:     none;
}

@media (max-width: 768px) {
  #sidebar {
    display:  block;
    width:    0;
    height:   0;
    position: static;
    overflow: visible;
  }
}

.sidebar-inner {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--sidebar-bg);
  overflow-y:     auto;
}

.sidebar-top {
  flex:    1;
  padding: 0 0 1rem;
}

/* Logo area */
.sidebar-logo {
  padding:       1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.5rem;
}

.sidebar-logo img {
  height:    40px;
  width:     auto;
}

/* Nav section labels */
.nav-section-label {
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          rgba(255,255,255,0.25);
  padding:        1rem 1.25rem 0.35rem;
  margin-top:     0.25rem;
}

/* Nav links */
.nav-link {
  display:         flex;
  align-items:     center;
  gap:             0.65rem;
  padding:         0.55rem 1rem 0.55rem 1.25rem;
  color:           rgba(255,255,255,0.55);
  text-decoration: none;
  font-size:       0.9rem;
  font-weight:     500;
  border-radius:   var(--radius);
  margin:          0.1rem 0.5rem;
  transition:      all 0.15s ease;
  border-left:     2px solid transparent;
}

.nav-link:hover {
  background: rgba(255,255,255,0.06);
  color:      rgba(255,255,255,0.85);
  text-decoration: none;
}

.nav-link.active {
  background:  rgba(245, 116, 24, 0.15);
  color:       var(--primary);
  border-left: 2px solid var(--primary);
}

.nav-link-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  opacity:     0.8;
}

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

/* Sidebar footer — user info + sign out */
.sidebar-footer {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        1rem 1rem 1rem 1.25rem;
  border-top:     1px solid rgba(255,255,255,0.06);
  margin-top:     auto;
}

.sidebar-user {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  min-width:   0;
}

.sidebar-user-avatar {
  width:            32px;
  height:           32px;
  border-radius:    50%;
  background:       var(--primary);
  color:            white;
  font-size:        0.8rem;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
}

.sidebar-user-info {
  min-width: 0;
}

.sidebar-user-name {
  font-size:     0.8rem;
  font-weight:   600;
  color:         rgba(255,255,255,0.85);
  text-transform: capitalize;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size:     0.7rem;
  color:         rgba(255,255,255,0.35);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.sidebar-signout {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.3);
  padding:     0.4rem;
  border-radius: var(--radius);
  display:     flex;
  align-items: center;
  transition:  all 0.15s ease;
  flex-shrink: 0;
}

.sidebar-signout:hover {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.7);
}

/* ── MOBILE TOP BAR ──────────────────────────────────────────────────────────
Fixed top bar shown on mobile only. Contains logo + hamburger button.
─────────────────────────────────────────────────────────────────────────── */
.mobile-topbar {
display:         none;
position:        fixed;
top:             0;
left:            0;
right:           0;
height:          var(--topbar-height);
background:      var(--sidebar-bg);
border-bottom:   1px solid rgba(255,255,255,0.08);
z-index:         100;
align-items:     center;
justify-content: space-between;
padding:         0 1rem;
padding-top:     env(safe-area-inset-top);
}
.mobile-topbar-logo img {
height: 32px;
width:  auto;
}
.mobile-hamburger {
background:    none;
border:        none;
color:         rgba(255,255,255,0.7);
cursor:        pointer;
padding:       0.4rem;
border-radius: var(--radius);
display:       flex;
align-items:   center;
justify-content: center;
transition:    all 0.15s ease;
/* Large touch target */
min-width:     40px;
min-height:    40px;
}
.mobile-hamburger:hover {
background: rgba(255,255,255,0.08);
color:      white;
}
/* ── MOBILE DRAWER ───────────────────────────────────────────────────────────
Full-height nav drawer, slides in from the left on mobile.
─────────────────────────────────────────────────────────────────────────── */
.mobile-drawer {
display:        none;
position:       fixed;
top:            0;
left:           0;
height:         100vh;
width:          280px;
max-width:      85vw;
background:     var(--sidebar-bg);
z-index:        300;
flex-direction: column;
transform:      translateX(-100%);
transition:     transform 0.25s ease;
overflow-y:     auto;
}
.mobile-drawer.open {
transform: translateX(0);
}
/* ── DRAWER OVERLAY ──────────────────────────────────────────────────────────
Dimmed backdrop shown behind the open drawer.
─────────────────────────────────────────────────────────────────────────── */
.drawer-overlay {
display:    none;
position:   fixed;
inset:      0;
background: rgba(0,0,0,0.5);
z-index:    299;
backdrop-filter: blur(2px);
}
.drawer-overlay.open {
display: block;
}

/* ── MAIN CONTENT AREA ───────────────────────────────────────
   Takes up the remaining width after the sidebar.
   On mobile it fills the full width.
   ─────────────────────────────────────────────────────────── */
.main-content {
  flex:       1;
  min-width:  0;
  /* On mobile: no left offset */
  margin-left: 0;
  padding: 1.5rem;
}

.container {
  max-width: 1280px;
  margin:    0 auto;
}

/* ── PAGE HEADER ─────────────────────────────────────────────
   Consistent top section for every page with a title,
   optional subtitle, and an action button on the right.
   ─────────────────────────────────────────────────────────── */
.page-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1rem;
  margin-bottom:   1.5rem;
  flex-wrap:       wrap;
}

.page-header-left h1 {
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--text);
  line-height: 1.2;
}

.page-subtitle {
  font-size:  0.85rem;
  color:      var(--text-muted);
  margin-top: 0.2rem;
}

/* ── CARDS ───────────────────────────────────────────────────
   The standard content container used throughout the app.
   ─────────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow);
  overflow:      hidden;
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.25rem;
  border-bottom:   1px solid var(--border);
  gap:             0.75rem;
}

.card-header h2 {
  font-size:   0.95rem;
  font-weight: 600;
  color:       var(--text);
}

.card-body {
  padding: 1.25rem;
}

/* ── STATS ROW ───────────────────────────────────────────────
   Row of metric cards on the dashboard.
   ─────────────────────────────────────────────────────────── */
.stats-row {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.stat-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem;
  box-shadow:    var(--shadow);
  display:       flex;
  flex-direction: column;
  gap:           0.3rem;
}

.stat-number {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--primary);
  line-height: 1;
}

.stat-label {
  font-size:      0.75rem;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight:    500;
}

/* ── BUTTONS ─────────────────────────────────────────────────
   Button variants used throughout the app.
   ─────────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  padding:         0.5rem 1rem;
  border-radius:   var(--radius);
  font-size:       0.875rem;
  font-weight:     500;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  transition:      all 0.15s ease;
  white-space:     nowrap;
  line-height:     1.4;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color:      white;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-secondary {
  background: var(--bg);
  color:      var(--text);
  border:     1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
}

/* Danger button variant */
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover { opacity: 0.9; }

.btn-ghost {
  background: transparent;
  color:      var(--text-muted);
  border:     1px solid transparent;
}

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

.btn-small {
  padding:   0.3rem 0.75rem;
  font-size: 0.8rem;
}

/* Icon-only action buttons in table rows */
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  font-size: 14px;
}
.btn-icon:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.btn-icon-danger:hover { color: var(--color-danger); }

/* ── BADGES ──────────────────────────────────────────────────
   Coloured status indicators.
   ─────────────────────────────────────────────────────────── */
.badge {
  display:        inline-block;
  padding:        0.2rem 0.65rem;
  border-radius:  20px;
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: capitalize;
  white-space:    nowrap;
}

/* Client statuses */
.badge-lead       { background: var(--warning-bg);  color: #92400e; }
.badge-active     { background: var(--success-bg);  color: #14532d; }
.badge-inactive   { background: var(--bg);          color: var(--text-muted); }

/* Job statuses */
.badge-proposal   { background: var(--warning-bg);  color: #92400e; }
.badge-on_hold    { background: var(--danger-bg);   color: #991b1b; }
.badge-complete   { background: var(--bg);          color: var(--text-muted); }

/* Pipeline stages */
.badge-lead           { background: var(--warning-bg);  color: #92400e; }
.badge-proposal_sent  { background: var(--info-bg);     color: #075985; }
.badge-negotiating    { background: #f3e8ff;            color: #6b21a8; }
.badge-won            { background: var(--success-bg);  color: #14532d; }
.badge-lost           { background: var(--danger-bg);   color: #991b1b; }

/* Priority */
.badge-high   { background: var(--danger-bg);   color: #991b1b; }
.badge-medium { background: var(--warning-bg);  color: #92400e; }
.badge-low    { background: var(--success-bg);  color: #14532d; }

/* Categories */
.badge-personal  { background: var(--info-bg);   color: #075985; }
.badge-business  { background: #f3e8ff;          color: #6b21a8; }
.badge-home      { background: var(--success-bg); color: #14532d; }
.badge-family    { background: #fce7f3;          color: #9d174d; }
.badge-health    { background: var(--danger-bg);  color: #991b1b; }
.badge-other     { background: var(--bg);        color: var(--text-muted); }

/* ── LIST ITEMS ──────────────────────────────────────────────
   Used in dashboard recent lists and anywhere items
   are displayed in a card as a vertical list.
   ─────────────────────────────────────────────────────────── */
.list-container {
  padding: 0.25rem 0;
}

.list-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.75rem 1.25rem;
  border-bottom:   1px solid var(--border);
  transition:      background 0.1s ease;
  cursor:          pointer;
  gap:             0.75rem;
}

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

.list-item:hover {
  background: #f8fafc;
}

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

.list-item-name {
  font-weight:   500;
  font-size:     0.9rem;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.list-item-sub {
  font-size:  0.8rem;
  color:      var(--text-muted);
  margin-top: 0.1rem;
}

/* ── DATA TABLE ──────────────────────────────────────────────
   Used on the Clients page and anywhere tabular data
   is displayed.
   ─────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  /* Ensures table scrolls horizontally on mobile
     rather than breaking the page layout */
  -webkit-overflow-scrolling: touch;
}

.table-toolbar {
  display:         flex;
  gap:             12px;
  align-items:     center;
  flex-wrap:       wrap;
  margin-bottom:   1rem;
}

.table-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.table-link:hover { text-decoration: underline; }

.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.875rem;
  min-width:       600px;
}

.data-table thead tr {
  background:    #f8fafc;
  border-bottom: 2px solid var(--border);
}

.data-table th {
  padding:        0.7rem 1rem;
  text-align:     left;
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:          var(--text-muted);
  white-space:    nowrap;
}

.data-table td {
  padding:        0.85rem 1rem;
  border-bottom:  1px solid var(--border);
  color:          var(--text);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  transition: background 0.1s ease;
  cursor:     pointer;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

.td-muted {
  color: var(--text-muted);
}

.td-action {
  text-align: right;
  width:      80px;
  white-space: nowrap;
}

.td-action-btn {
  background:    none;
  border:        none;
  color:         var(--text-muted);
  cursor:        pointer;
  padding:       0.3rem 0.5rem;
  border-radius: var(--radius);
  font-size:     1rem;
  transition:    all 0.15s ease;
  /* Large touch target for mobile */
  min-width:     36px;
  min-height:    36px;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
}

.td-action-btn:hover {
  background: var(--bg);
  color:      var(--primary);
}

/* ── FILTERS ROW ─────────────────────────────────────────────
   Search input + filter dropdowns above tables/boards.
   ─────────────────────────────────────────────────────────── */
.filters-row {
  display:   flex;
  gap:       0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.search-input {
  flex:          1;
  min-width:     0;
  padding:       0.55rem 0.875rem;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.875rem;
  background:    var(--surface);
  color:         var(--text);
  outline:       none;
  transition:    border-color 0.15s ease;
}

.search-input:focus {
  border-color: var(--primary);
}

.filter-select {
  padding:       0.55rem 0.875rem;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.875rem;
  background:    var(--surface);
  color:         var(--text);
  outline:       none;
  cursor:        pointer;
  transition:    border-color 0.15s ease;
}

.filter-select:focus {
  border-color: var(--primary);
}

/* ── SLIDE-OUT PANEL ─────────────────────────────────────────
   Used for all create/edit forms across the app.
   A semi-transparent overlay covers the page behind it.
   ─────────────────────────────────────────────────────────── */
.panel-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.35);
  z-index:    200;
  backdrop-filter: blur(2px);
}

.panel-overlay.open {
  display: block;
}

.side-panel {
  position:   fixed;
  top:        0;
  right:      0;
  height:     100vh;
  width:      480px;
  max-width:  100vw;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index:    201;
  display:    flex;
  flex-direction: column;
  transform:  translateX(100%);
  transition: transform 0.25s ease;
}

.side-panel.open {
  transform: translateX(0);
}

.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 1.5rem;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

.panel-header h2 {
  font-size:   1rem;
  font-weight: 600;
}

.panel-close {
  background:    none;
  border:        none;
  font-size:     1.1rem;
  cursor:        pointer;
  color:         var(--text-muted);
  padding:       0.3rem 0.5rem;
  border-radius: var(--radius);
  transition:    all 0.15s ease;
  /* Large touch target */
  min-width:     36px;
  min-height:    36px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

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

.panel-body {
  flex:       1;
  overflow-y: auto;
  padding:    1.5rem;
  /* Extra bottom padding on mobile so content
     isn't hidden behind the tab bar */
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* ── FORMS ───────────────────────────────────────────────────
   Shared form styles used inside slide-out panels.
   ─────────────────────────────────────────────────────────── */
.form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding:       0.55rem 0.75rem;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.875rem;
  color:         var(--text);
  background:    var(--surface);
  outline:       none;
  transition:    border-color 0.15s ease;
  /* Prevent zoom on input focus on iOS */
  font-size:     16px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}

.form-group textarea {
  resize:     vertical;
  min-height: 80px;
  font-size:  0.875rem;
}

.required {
  color: var(--danger);
}

.form-actions {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     1rem;
  border-top:      1px solid var(--border);
  gap:             0.5rem;
  flex-wrap:       wrap;
}

.form-actions-right {
  display: flex;
  gap:     0.5rem;
}

/* ── KANBAN BOARD ────────────────────────────────────────────
   Used on the Pipeline page.
   ─────────────────────────────────────────────────────────── */
.kanban-board {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
  align-items:           start;
}

.kanban-column {
  background:    #f8fafc;
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       0.75rem;
  min-height:    200px;
}

.kanban-column-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.75rem;
  padding:         0 0.25rem;
}

.kanban-column-title {
  font-size:      0.75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color:          var(--text-muted);
}

.kanban-column-count {
  background:  var(--border);
  color:       var(--text-muted);
  font-size:   0.72rem;
  font-weight: 600;
  padding:     0.1rem 0.5rem;
  border-radius: 20px;
  min-width:   22px;
  text-align:  center;
}

.kanban-cards {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  min-height:     60px;
}

.kanban-cards.drag-over {
  background:     rgba(245, 116, 24, 0.05);
  border-radius:  var(--radius);
  outline:        2px dashed var(--primary);
  outline-offset: -2px;
}

.kanban-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       0.875rem 1rem;
  cursor:        pointer;
  transition:    all 0.15s ease;
  box-shadow:    var(--shadow);
  position:      relative;
}

.kanban-card:hover {
  box-shadow:  var(--shadow-md);
  transform:   translateY(-1px);
  border-color: var(--border-strong);
}

.kanban-card.dragging {
  opacity: 0.4;
  cursor:  grabbing;
}

.kanban-card-title {
  font-size:    0.9rem;
  font-weight:  600;
  color:        var(--text);
  margin-bottom: 0.25rem;
  line-height:  1.3;
  padding-right: 1.5rem;
}

.kanban-card-client {
  font-size: 0.78rem;
  color:     var(--text-muted);
  margin-bottom: 0.5rem;
}

.kanban-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      0.5rem;
  padding-top:     0.5rem;
  border-top:      1px solid var(--border);
}

.kanban-card-value {
  font-size:   0.8rem;
  font-weight: 700;
  color:       var(--primary);
}

.kanban-card-date {
  font-size: 0.72rem;
  color:     var(--text-muted);
}

.kanban-card-edit {
  position:      absolute;
  top:           0.5rem;
  right:         0.5rem;
  background:    none;
  border:        none;
  color:         var(--text-muted);
  cursor:        pointer;
  padding:       0.2rem 0.35rem;
  border-radius: 4px;
  font-size:     0.85rem;
  opacity:       0;
  transition:    all 0.15s ease;
}

.kanban-card:hover .kanban-card-edit {
  opacity: 1;
}

.kanban-card-edit:hover {
  background: var(--bg);
  color:      var(--primary);
}

.kanban-empty {
  text-align:    center;
  padding:       1.5rem 0.5rem;
  color:         var(--text-muted);
  font-size:     0.8rem;
  border:        2px dashed var(--border);
  border-radius: var(--radius);
}

/* ── EMPTY & LOADING STATES ──────────────────────────────────
   Consistent placeholder states used across all pages.
   ─────────────────────────────────────────────────────────── */
.empty-state {
  padding:    2rem 1.25rem;
  text-align: center;
  color:      var(--text-muted);
  font-size:  0.875rem;
}

.empty-state a {
  color: var(--primary);
}

.loading {
  padding:   1.5rem 1.25rem;
  color:     var(--text-muted);
  font-size: 0.875rem;
}

/* ── BACK LINK ────────────────────────────────────────────────
   Used on detail pages to navigate back to the list.
   ─────────────────────────────────────────────────────────── */
.back-link {
  display:    inline-flex;
  align-items: center;
  gap:        0.35rem;
  color:      var(--text-muted);
  font-size:  0.875rem;
  margin-bottom: 1.25rem;
  transition: color 0.15s ease;
  text-decoration: none;
}

.back-link:hover {
  color:           var(--primary);
  text-decoration: none;
}

/* ── DETAIL PAGE LAYOUT ──────────────────────────────────────
   Two column layout used on client-detail and job-detail.
   ─────────────────────────────────────────────────────────── */
.detail-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   1rem;
  gap:             1rem;
  flex-wrap:       wrap;
}

.detail-header-left {
  flex: 1;
}

.detail-title-row {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin-bottom: 0.35rem;
  flex-wrap:   wrap;
}

.detail-title-row h1 {
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--text);
  line-height: 1.2;
}

.detail-meta {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.875rem;
  color:       var(--text-muted);
  flex-wrap:   wrap;
}

.meta-divider {
  color: var(--border-strong);
}

.detail-description-box {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow:    var(--shadow);
}

.detail-description-box p {
  font-size:   0.9rem;
  color:       var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-grid {
  display:               grid;
  grid-template-columns: 1fr 300px;
  gap:                   1rem;
  align-items:           start;
}

/* ── UPDATES / ACTIVITY LOG ──────────────────────────────────
   Used on job detail pages.
   ─────────────────────────────────────────────────────────── */
.update-form-box {
  padding:       1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.update-input {
  width:         100%;
  padding:       0.6rem 0.75rem;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-size:     0.875rem;
  color:         var(--text);
  font-family:   inherit;
  resize:        vertical;
  outline:       none;
  transition:    border-color 0.15s ease;
  min-height:    70px;
  /* Prevent iOS zoom */
  font-size:     16px;
}

.update-input:focus {
  border-color: var(--primary);
}

.update-form-footer {
  display:         flex;
  justify-content: flex-end;
  margin-top:      0.6rem;
}

.updates-list {
  padding: 0.25rem 0;
}

.update-item {
  padding:       1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

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

.update-item-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.35rem;
}

.update-item-date {
  font-size:   0.72rem;
  color:       var(--text-muted);
  font-weight: 500;
}

.update-item-delete {
  background:    none;
  border:        none;
  color:         var(--text-muted);
  cursor:        pointer;
  font-size:     0.8rem;
  padding:       0.15rem 0.4rem;
  border-radius: 4px;
  opacity:       0;
  transition:    all 0.15s ease;
}

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

.update-item-delete:hover {
  background: var(--danger-bg);
  color:      var(--danger);
}

.update-item-content {
  font-size:   0.875rem;
  color:       var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.updates-empty {
  padding:    2rem 1.25rem;
  text-align: center;
  color:      var(--text-muted);
  font-size:  0.875rem;
}

/* ── INFO BOX ────────────────────────────────────────────────
   Contact info / metadata displayed in a sidebar card
   on detail pages.
   ─────────────────────────────────────────────────────────── */
.info-box {
  padding: 1.25rem;
}

.info-row {
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
  padding:        0.6rem 0;
  border-bottom:  1px solid var(--border);
}

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

.info-label {
  font-size:      0.7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:          var(--text-muted);
}

.info-value {
  font-size: 0.875rem;
  color:     var(--text);
}

.info-link {
  color:           var(--primary);
  text-decoration: none;
  font-size:       0.875rem;
}

.info-link:hover {
  text-decoration: underline;
}

/* ── PAGE LOADING STATE ───────────────────────────────────────
   Shown while detail pages fetch their data.
   ─────────────────────────────────────────────────────────── */
.page-loading {
  color:     var(--text-muted);
  font-size: 0.875rem;
  padding:   2rem 0;
}

/* ── TABS ────────────────────────────────────────────────────
   Horizontal tab switcher used on Notes & Lists page.
   ─────────────────────────────────────────────────────────── */
.tabs {
  display:       flex;
  gap:           0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
}

.tab-btn {
  background:    none;
  border:        none;
  padding:       0.6rem 1rem;
  font-size:     0.9rem;
  font-weight:   500;
  color:         var(--text-muted);
  cursor:        pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:    all 0.15s ease;
}

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

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

/* ── RESPONSIVE — TABLET (≤ 1024px) ─────────────────────────
   Adjust layout for smaller desktop / large tablet screens.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .kanban-board {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── RESPONSIVE — MOBILE (≤ 768px) ──────────────────────────
   Switch to mobile layout: sidebar hides, bottom tab
   bar appears, single column layouts.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Show the sidebar div but hide the sidebar-inner,
     show the mobile tab bar instead */
  #sidebar .sidebar-inner {
  display: none;
  }

  .mobile-topbar {
  display: flex;
  }

  .mobile-drawer {
  display: flex;
  }

/* Offset content below the fixed top bar */

  .main-content {
  margin-left: 0;
  padding: 1.5rem;
  padding-top: calc(var(--topbar-height) + 1.5rem);
  }

  body {
  padding-bottom: 0;
  }

  .container {
    padding: 1rem 0.875rem;
  }

  /* Single column stats */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  /* Stack page header vertically on small screens */
  .page-header {
    flex-direction: column;
    align-items:    stretch;
    margin-bottom: 1.5rem;
  }

  .page-header .btn {
    width:      100%;
    justify-content: center;
  }

  /* Full width side panel on mobile */
  .side-panel {
    width: 100vw;
  }

  /* Single column kanban on mobile — horizontal scroll */
  .kanban-board {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

  /* Single column form grid */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Detail pages stack to single column */
  .detail-grid {
    grid-template-columns: 1fr;
  }

  /* Hide less important table columns on mobile
     (pages can override which columns to hide) */
  .hide-mobile {
    display: none;
  }
}

/* ── RESPONSIVE — DESKTOP (≥ 769px) ─────────────────────────
   Show the sidebar and offset main content.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  #sidebar {
    display: block;
  }

  .main-content {
    margin-left: var(--sidebar-width);
  }
}

/* Delete confirmation modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 90%;
}
.modal h3 { margin: 0 0 8px; }
.modal p  { color: var(--color-text-secondary); margin: 0 0 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }