/* =========================================================================
   Harrington Quotation Portal — Premium Theme
   Shared design system loaded on every page. Keeps the existing brand green
   (#1c3d2f) but gives it a full tonal palette, refined type scale, softer
   colour-tinted shadows, consistent radii, and polished component states so
   the whole app reads as one coherent, premium product instead of a stack
   of separately-styled screens.
   ========================================================================= */

:root {
  /* Brand — tonal scale built around the existing #1c3d2f identity */
  --brand-950: #0f2018;
  --brand-900: #14291f;
  --brand-800: #1c3d2f;   /* primary brand colour, unchanged */
  --brand-700: #234a39;
  --brand-600: #2d5e4a;   /* existing gradient stop, unchanged */
  --brand-500: #3d7a5f;
  --brand-400: #5a9a7c;
  --brand-200: #b9dcc9;
  --brand-100: #dcefe4;
  --brand-50:  #f0f8f4;

  --brand-gradient: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);

  /* Neutrals */
  --ink-900: #16211c;
  --ink-700: #3c4a44;
  --ink-500: #6b7874;
  --ink-300: #9facA7;
  --ink-100: #e8ece9;

  --surface: #ffffff;
  --bg-app: #f4f7f5;
  --border: #e6eae7;
  --border-strong: #d3dad6;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Colour-tinted shadows — softer and warmer than flat grey */
  --shadow-xs: 0 1px 2px rgba(20, 41, 31, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 41, 31, 0.07);
  --shadow-md: 0 6px 20px rgba(20, 41, 31, 0.09);
  --shadow-lg: 0 16px 40px rgba(20, 41, 31, 0.14);
  --shadow-brand: 0 8px 24px rgba(28, 61, 47, 0.22);

  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------------------------------------------------- */

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

a { text-decoration: none; }

/* Slim, brand-tinted scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--brand-400) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brand-200); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-400); }

/* ---------- Cards ----------------------------------------------------- */

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card.shadow, .card.shadow-sm, .card.shadow-lg {
  box-shadow: var(--shadow-md) !important;
}

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

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(0.97); }

.btn.shadow-sm:hover { box-shadow: var(--shadow-md) !important; }

.btn-outline-brand {
  border: 1.5px solid var(--brand-800);
  color: var(--brand-800);
  background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand.active {
  background: var(--brand-gradient);
  border-color: var(--brand-800);
  color: #fff;
}

/* ---------- Forms ----------------------------------------------------- */

.form-control, .form-select {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(28, 61, 47, 0.10);
}
.form-check-input:checked {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
}
.form-check-input:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(28, 61, 47, 0.15);
}

/* ---------- Badges ----------------------------------------------------- */

.badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.42em 0.85em;
}

/* ---------- Tables ----------------------------------------------------- */

.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom-width: 1px;
}
.table tbody tr { transition: background-color 0.15s ease; }
.table-hover tbody tr:hover { background-color: var(--brand-50); }

/* ---------- Modals ----------------------------------------------------- */

.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

/* ---------- Dropdowns ----------------------------------------------------- */

.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  transition: background-color 0.15s ease;
}

/* ---------- Toasts ----------------------------------------------------- */

.toast {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ---------- DataTables polish ----------------------------------------------------- */

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--brand-gradient) !important;
  border-color: var(--brand-800) !important;
  color: #fff !important;
}

/* ---------- KPI / stat card component (dashboard, follow-up, etc.) ------ */

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  height: 100%;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kpi-card-alert { border-color: rgba(220, 53, 69, 0.35); }
.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.kpi-label { font-size: 0.8rem; color: var(--ink-500); margin-top: 0.15rem; }
.kpi-sub { font-size: 0.75rem; color: var(--ink-300); margin-top: 0.35rem; }

.stat-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow 0.2s ease;
}
.stat-pill:hover { box-shadow: var(--shadow-sm); }

/* ---------- Utility: subtle fade-in for AJAX-loaded module content ------ */

#content > *:not(script) {
  animation: harrington-fade-in 0.25s ease both;
}
@keyframes harrington-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}