/* =====================================================================
   YardHarvest Marketing CRM — Modern design system
   Sidebar-app shell inspired by current-gen CRM tools (Attio / HubSpot):
   white surfaces, hairline borders, soft radii, one confident green accent.
   Legacy --brand-* variable names are kept (templates reference them inline)
   but remapped to the new palette.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Accent (YardHarvest green, modernized) */
  --brand-primary:    #166f4c;
  --brand-secondary:  #1d8a5f;
  --brand-accent:     #2aa873;
  --brand-light:      #7fd4ab;
  --brand-pale:       #ecf7f1;
  --brand-gold:       #d99a2b;
  --brand-cream:      #f7f8f9;
  --brand-white:      #ffffff;
  --brand-border:     #e6e8eb;
  --brand-gradient:   linear-gradient(135deg, #166f4c 0%, #1d8a5f 60%, #2aa873 100%);

  --text-dark:  #16181d;
  --text-body:  #45494f;
  --text-muted: #80868e;

  --surface:      #ffffff;
  --surface-hover:#f4f6f5;
  --app-bg:       #f7f8f9;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm:    0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md:    0 4px 12px rgba(16, 24, 40, .08);
  --shadow-hover: 0 6px 20px rgba(16, 24, 40, .10);

  --sidebar-w: 248px;

  --bs-success:     #166f4c;
  --bs-success-rgb: 22, 111, 76;
}

/* ============================== Base ============================== */
* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .9rem;
  color: var(--text-body);
  background-color: var(--app-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  font-weight: 650;
  letter-spacing: -0.015em;
}

h1 { font-size: 1.45rem; }
h2 { font-size: 1.2rem; }

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

/* ============================ App shell =========================== */
.app-shell { display: flex; min-height: 100vh; }

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.6rem 2rem 3rem;
}

/* ============================= Sidebar ============================ */
.app-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--brand-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: .9rem .75rem;
}

/* Bootstrap responsive offcanvas keeps it usable on mobile */
@media (max-width: 991.98px) {
  .app-sidebar { height: 100%; }
}

.side-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .6rem 1rem;
  font-weight: 750;
  font-size: 1rem;
  color: var(--text-dark);
  letter-spacing: -.02em;
}

.side-brand .brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--brand-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
}

.side-section {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: .9rem .6rem .35rem;
}

.side-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .42rem .6rem;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: .855rem;
  font-weight: 500;
  transition: background .12s, color .12s;
}

.side-link i { font-size: .95rem; color: var(--text-muted); width: 18px; text-align: center; }

.side-link:hover { background: var(--surface-hover); color: var(--text-dark); }

.side-link.active {
  background: var(--brand-pale);
  color: var(--brand-primary);
  font-weight: 600;
}
.side-link.active i { color: var(--brand-primary); }

.side-footer {
  margin-top: auto;
  border-top: 1px solid var(--brand-border);
  padding-top: .7rem;
}

.side-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
}

.side-user .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--brand-primary);
  font-weight: 700;
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.side-user .name { font-size: .82rem; font-weight: 600; color: var(--text-dark); line-height: 1.1; }
.side-user .role { font-size: .68rem; color: var(--text-muted); }

/* Mobile topbar */
.app-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--brand-border);
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* ========================== Page header ========================== */
.yh-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.yh-page-header h1 { margin-bottom: 0; }
.yh-page-header h1 i { color: var(--brand-primary); font-size: 1.15rem; }

/* ============================= Cards ============================= */
.yh-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
  overflow: hidden;
}

.yh-card-header {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--brand-border);
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-dark);
  background: var(--surface);
}
.yh-card-header i { color: var(--brand-primary); }

.yh-card-body { padding: 1rem; }

.yh-form-card {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}

/* =========================== Stat cards ========================== */
.yh-stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  height: 100%;
  transition: box-shadow .15s, transform .15s;
}
.yh-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.yh-stat-card .stat-icon {
  position: absolute;
  top: .85rem; right: .9rem;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--brand-pale);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

.yh-stat-card .stat-number {
  font-size: 1.55rem;
  font-weight: 750;
  color: var(--text-dark);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-top: .15rem;
}

.yh-stat-card .stat-number.stat-money { font-size: 1.25rem; }

.yh-stat-card .stat-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  order: -1;
}

/* ========================= Pipeline strip ======================== */
.pipeline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
}

.pipeline-stage {
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  padding: .7rem .5rem .6rem;
  text-align: center;
  border-top: 3px solid var(--text-muted);
  transition: box-shadow .15s, transform .15s;
}
.pipeline-stage:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.pipeline-stage .stage-count {
  font-size: 1.3rem;
  font-weight: 750;
  color: var(--text-dark);
}
.pipeline-stage .stage-name {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.stage-lead          { border-top-color: #98a2b3; }
.stage-qualification { border-top-color: #3f7ddb; }
.stage-proposal      { border-top-color: var(--brand-gold); }
.stage-won           { border-top-color: var(--brand-accent); }
.stage-lost          { border-top-color: #e0564f; }

/* Stage badge (lists) */
.stage-badge {
  font-size: .7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .25em .7em;
}

/* ============================= Tables ============================= */
.yh-table { font-size: .865rem; }

.yh-table thead th {
  font-size: .69rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  background: #fafbfb;
  border-bottom: 1px solid var(--brand-border);
  padding: .55rem 1rem;
  white-space: nowrap;
}

.yh-table tbody td {
  padding: .65rem 1rem;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: middle;
  color: var(--text-body);
}

.yh-table tbody tr:last-child td { border-bottom: 0; }
.yh-table tbody tr { transition: background .1s; }
.yh-table tbody tr:hover { background: var(--surface-hover); }

/* =========================== Empty state ========================== */
.yh-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.yh-empty i { font-size: 2.2rem; opacity: .45; display: block; margin-bottom: .6rem; }

/* ============================= Avatar ============================ */
.contact-avatar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--brand-primary);
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .6rem;
}

/* ============================= Buttons ============================ */
.btn {
  font-size: .84rem;
  font-weight: 550;
  border-radius: var(--radius-sm);
  padding: .42rem .85rem;
}
.btn-sm { font-size: .76rem; padding: .26rem .6rem; border-radius: 7px; }

.btn-success {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}
.btn-success:hover, .btn-success:focus {
  background: #115a3d;
  border-color: #115a3d;
}

.btn-outline-success {
  color: var(--brand-primary);
  border-color: #cfe5da;
}
.btn-outline-success:hover {
  background: var(--brand-pale);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-outline-secondary { border-color: var(--brand-border); color: var(--text-body); }
.btn-outline-secondary:hover { background: var(--surface-hover); border-color: #d3d6da; color: var(--text-dark); }

.btn-outline-danger { border-color: #f1d2d0; }

/* ============================== Forms ============================= */
.form-label { font-size: .78rem; font-weight: 600; color: var(--text-dark); margin-bottom: .3rem; }

.form-control, .form-select {
  font-size: .87rem;
  border-color: var(--brand-border);
  border-radius: var(--radius-sm);
  padding: .45rem .7rem;
  color: var(--text-dark);
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(42, 168, 115, .15);
}

.yh-search-group .form-control { border-right: 0; }
.yh-search-group .btn { border-color: var(--brand-border); }

/* ============================== Badges ============================ */
.badge { font-weight: 600; border-radius: 999px; padding: .3em .65em; }

/* ============================== Alerts ============================ */
.alert { border-radius: var(--radius-md); font-size: .85rem; border-width: 1px; }
.alert-success { background: var(--brand-pale); border-color: #cfe9dc; color: var(--brand-primary); }

/* Flash toasts */
.yh-toasts {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 360px;
}
.yh-toasts .alert { box-shadow: var(--shadow-md); margin: 0; }

/* ============================ Pagination ========================== */
.pagination { --bs-pagination-font-size: .82rem; }
.page-link {
  color: var(--text-body);
  border-color: var(--brand-border);
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
}
.page-item.active .page-link {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ============================== Kanban ============================ */
/* (kanban.html carries layout inline; these refine the look) */
.kanban-col { box-shadow: var(--shadow-sm); }
.kanban-col-head { background: #fafbfb; }
.kanban-card { transition: box-shadow .12s, transform .12s; }
.kanban-card:hover { transform: translateY(-1px); }

/* ======================= Marketing components ===================== */
/* Funnel */
.funnel-row { display: flex; flex-direction: column; gap: .45rem; }
.funnel-bar {
  position: relative;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--brand-pale);
  overflow: hidden;
}
.funnel-bar .fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--brand-gradient);
  border-radius: var(--radius-sm);
  opacity: .92;
}
.funnel-bar .meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 .8rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-dark);
}
.funnel-bar.lit .meta { color: #fff; }

/* Lead score pill */
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 650;
  border-radius: 999px;
  padding: .2em .7em;
}
.score-hot  { background: #fdecec; color: #c2362f; }
.score-warm { background: #fdf3e0; color: #a96b10; }
.score-cold { background: #eef1f4; color: #5c6670; }

/* Channel chips (content calendar) */
.chip {
  display: inline-block;
  font-size: .68rem;
  font-weight: 650;
  border-radius: 6px;
  padding: .15em .5em;
  line-height: 1.4;
}
.chip-email  { background: #e8f0fd; color: #2c5fb8; }
.chip-social { background: #f3e9fd; color: #7a3bbd; }
.chip-blog   { background: #e6f6ee; color: #166f4c; }
.chip-event  { background: #fdf3e0; color: #a96b10; }
.chip-ad     { background: #fdecec; color: #c2362f; }

.chip-idea      { background: #eef1f4; color: #5c6670; }
.chip-draft     { background: #fdf3e0; color: #a96b10; }
.chip-scheduled { background: #e8f0fd; color: #2c5fb8; }
.chip-published { background: #e6f6ee; color: #166f4c; }

/* Calendar grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--brand-border);
  border-top: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cal-head {
  background: #fafbfb;
  font-size: .68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: .45rem .5rem;
  border-right: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}
.cal-day {
  min-height: 96px;
  background: var(--surface);
  border-right: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
  padding: .35rem .4rem;
  font-size: .72rem;
}
.cal-day.dim { background: #fafbfb; color: var(--text-muted); }
.cal-day.today { background: var(--brand-pale); }
.cal-day .daynum { font-weight: 650; color: var(--text-muted); font-size: .7rem; }
.cal-day.today .daynum { color: var(--brand-primary); }
.cal-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: .2rem .35rem;
  margin-top: .25rem;
  color: var(--text-dark);
  font-weight: 550;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-item:hover { box-shadow: var(--shadow-md); color: var(--brand-primary); }
.cal-add { opacity: 0; font-size: .7rem; }
.cal-day:hover .cal-add { opacity: .8; }

/* ============================== Footer ============================ */
.yh-footer {
  padding: 1rem 0 1.4rem;
  font-size: .74rem;
  color: var(--text-muted);
}

/* Legacy navbar class (login page fallback) */
.yh-navbar { background: var(--brand-primary) !important; }

@media (max-width: 767.98px) {
  .app-content { padding: 1rem 1rem 2.5rem; }
}