/* ── App-specific overrides & module styles ──────────────── */

/* ── Calendar mini ───────────────────────────────────────── */
.mini-cal { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1rem; }
.mini-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.mini-cal-title  { font-size: var(--t-sm); font-weight: 700; }
.mini-cal-grid   { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.mini-cal-day-label { text-align: center; font-size: 0.5625rem; font-weight: 700; color: var(--c-muted); text-transform: uppercase; padding-bottom: .375rem; }
.mini-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); border-radius: 50%;
  cursor: pointer; transition: all var(--tr);
}
.mini-cal-day:hover { background: var(--c-p50); color: var(--c-p700); }
.mini-cal-day.today { background: var(--c-p600); color: #fff; font-weight: 700; }
.mini-cal-day.has-events { position: relative; }
.mini-cal-day.has-events::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--c-a500); border-radius: 50%; }
.mini-cal-day.other-month { color: var(--c-faint); }

/* ── Schedule view ───────────────────────────────────────── */
.schedule-day-col { flex: 1; min-width: 140px; }
.schedule-day-header { text-align: center; padding: .625rem; border-bottom: 1px solid var(--c-border); font-size: var(--t-sm); font-weight: 700; }
.schedule-day-header.today { color: var(--c-p700); background: var(--c-p50); }
.schedule-event {
  margin: .375rem .5rem;
  padding: .5rem .75rem;
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-p600);
  background: var(--c-p50);
  cursor: pointer;
  transition: all var(--tr);
  font-size: var(--t-xs);
}
.schedule-event:hover { box-shadow: var(--sh); transform: translateX(2px); }
.schedule-event.amber { border-color: var(--c-a500); background: var(--c-a50); }
.schedule-event.blue  { border-color: var(--c-b500); background: var(--c-b50); }
.schedule-event.red   { border-color: var(--c-danger); background: var(--c-danger-bg); }
.schedule-event-title { font-weight: 700; color: var(--c-text); }
.schedule-event-meta  { color: var(--c-muted); margin-top: 2px; }

/* ── Staff card ──────────────────────────────────────────── */
.staff-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  transition: all var(--tr-md);
  text-align: center;
}
.staff-card:hover { box-shadow: var(--sh-md); border-color: var(--c-p500); }
.staff-avatar { width: 64px; height: 64px; margin: 0 auto .875rem; background: linear-gradient(135deg, var(--c-p600), var(--c-p400)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--t-xl); font-weight: 800; }
.staff-name   { font-weight: 700; font-size: var(--t-base); }
.staff-role   { font-size: var(--t-xs); color: var(--c-muted); margin-bottom: .625rem; }
.staff-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin-bottom: .75rem; }
.skill-chip   { font-size: .5625rem; font-weight: 700; padding: .15rem .5rem; background: var(--c-p50); color: var(--c-p700); border: 1px solid var(--c-p200); border-radius: var(--r-full); }
.staff-meta   { display: flex; justify-content: space-around; font-size: var(--t-xs); color: var(--c-muted); padding-top: .75rem; border-top: 1px solid var(--c-border); }
.staff-meta-val { font-weight: 700; color: var(--c-text); font-size: var(--t-sm); }

/* ── Quote detail ────────────────────────────────────────── */
.quote-header-band {
  background: linear-gradient(135deg, #0d3320, #14532d);
  color: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 1.75rem 2rem;
}
.quote-body { background: var(--c-surface); border-radius: 0 0 var(--r-xl) var(--r-xl); border: 1px solid var(--c-border); border-top: none; padding: 1.5rem 2rem; }

/* ── Field view ──────────────────────────────────────────── */
.field-service-header {
  background: linear-gradient(135deg, #0d3320, #15803d);
  color: #fff;
  padding: 1.5rem;
  border-radius: var(--r-xl);
  margin-bottom: 1rem;
}
.field-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.25rem 1rem;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  font-family: var(--font);
  font-size: var(--t-sm); font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  transition: all var(--tr-md);
}
.field-action-btn:hover { border-color: var(--c-p500); background: var(--c-p50); color: var(--c-p700); }
.field-action-btn.active { background: var(--c-p600); border-color: var(--c-p600); color: #fff; }
.field-action-btn svg { width: 28px; height: 28px; }

/* ── Operations center ───────────────────────────────────── */
.ops-alert-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .875rem 1rem;
  border-left: 3px solid var(--c-danger);
  background: var(--c-danger-bg);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  margin-bottom: .5rem;
}
.ops-alert-item.warning { border-color: var(--c-a500); background: var(--c-a50); }
.ops-alert-item.info    { border-color: var(--c-b500); background: var(--c-b50); }
.ops-alert-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--c-danger); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.ops-alert-item.warning .ops-alert-icon { background: var(--c-a500); }
.ops-alert-item.info    .ops-alert-icon { background: var(--c-b500); }
.ops-alert-icon svg { width: 14px; height: 14px; }

/* ── Presentation mode ───────────────────────────────────── */
.presentation-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.presentation-card {
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: 2.5rem;
  max-width: 500px; width: 100%;
  text-align: center;
  box-shadow: var(--sh-lg);
}
.presentation-step { font-size: var(--t-xs); font-weight: 700; color: var(--c-p600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.presentation-title { font-size: var(--t-2xl); font-weight: 800; margin-bottom: 1rem; }
.presentation-desc  { font-size: var(--t-base); color: var(--c-muted); line-height: 1.7; margin-bottom: 1.5rem; }
.presentation-actions { display: flex; justify-content: center; gap: .75rem; }

/* ── Payroll detail ──────────────────────────────────────── */
.payroll-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; }
.payroll-card-header { background: var(--c-raised); padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--c-border); }
.payroll-card-body   { padding: 1.25rem; }
.payroll-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: var(--t-sm); border-bottom: 1px solid #f9fafb; }
.payroll-row:last-child { border-bottom: none; }
.payroll-row.total { font-weight: 800; font-size: var(--t-base); padding-top: .75rem; border-top: 2px solid var(--c-border); border-bottom: none; }

/* ── Chart containers ────────────────────────────────────── */
.chart-wrap { position: relative; height: 200px; }
.chart-wrap-lg { position: relative; height: 280px; }
.chart-wrap-sm { position: relative; height: 140px; }

/* ── Notification item ───────────────────────────────────── */
.notif-item {
  display: flex; gap: .875rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background var(--tr);
  cursor: pointer;
}
.notif-item:hover { background: var(--c-raised); }
.notif-item:last-child { border-bottom: none; }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-icon.green  { background: var(--c-p50); color: var(--c-p700); }
.notif-icon.amber  { background: var(--c-a50); color: var(--c-a600); }
.notif-icon.red    { background: var(--c-danger-bg); color: var(--c-danger); }
.notif-icon.blue   { background: var(--c-b50); color: var(--c-b600); }
.notif-icon svg { width: 16px; height: 16px; }
.notif-body  { flex: 1; min-width: 0; }
.notif-title { font-size: var(--t-sm); font-weight: 700; color: var(--c-text); }
.notif-meta  { font-size: var(--t-xs); color: var(--c-muted); margin-top: 2px; }
.notif-status { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }

/* ── Settings ────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
.settings-menu { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: .75rem; height: fit-content; }
.settings-menu-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem;
  border-radius: var(--r-lg);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--c-text2);
  cursor: pointer; transition: all var(--tr);
  border: none; background: none; width: 100%; text-align: left; font-family: var(--font);
}
.settings-menu-item:hover { background: var(--c-raised); }
.settings-menu-item.active { background: var(--c-p50); color: var(--c-p700); }
.settings-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.5rem; }

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

/* ── CRM segments ────────────────────────────────────────── */
.segment-card { padding: 1rem; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); cursor: pointer; transition: all var(--tr); }
.segment-card:hover { border-color: var(--c-p500); background: var(--c-p50); }
.segment-card.selected { border-color: var(--c-p600); background: var(--c-p50); }
.segment-count { font-size: var(--t-2xl); font-weight: 900; color: var(--c-p700); }
.segment-label { font-size: var(--t-xs); color: var(--c-muted); font-weight: 600; }

/* ── Impact indicator ────────────────────────────────────── */
.eco-indicator { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; border-radius: var(--r-xl); padding: 1.25rem; }
.eco-title { font-size: var(--t-sm); font-weight: 700; color: var(--c-p700); margin-bottom: .75rem; }
.eco-row   { display: flex; justify-content: space-between; padding: .375rem 0; font-size: var(--t-sm); }
.eco-label { color: var(--c-p700); }
.eco-value { font-weight: 700; }