/* CrewStation Base Components (v0.1)
   Uses CSS variables defined in globals.css
   Keep styles minimal; Tailwind can layer on top when needed. */

:root {
  /* Design Direction palette (fallbacks if theme file isn't loaded) */
  --cs-forest: #2E8B7B; /* Teal Green (Design Direction) */
  --cs-brown:  #5B4636;
  --cs-orange: #E4572E; /* Burnt Orange (Design Direction) */
  --cs-yellow: #FFD447; /* Highlight Yellow (optional accent) */
  --cs-cloud:  #F3E9DC; /* Cream / Off-White (Design Direction) */
  --cs-stone:  #6E6E6E;
  --cs-coal:   #333333; /* Charcoal Gray (Design Direction) */
  --radius-xl: 16px;
  --shadow-card: 0 2px 6px rgba(0,0,0,0.10);
  --shadow-card-strong: 0 6px 18px rgba(0,0,0,0.08);
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --grunge-tile-size: 600px;     /* base tile size for grain texture */
  --grunge-opacity: .12;         /* default grain overlay opacity */
  --grunge-opacity-strong: .22;  /* stronger grain for hero/CTA */
}

/* Buttons */
.btn {
  --btn-bg: var(--cs-orange);
  --btn-fg: #fff;
  --btn-bd: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-xl);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 0.95rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms ease, background-color 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.btn:hover { filter: brightness(0.98); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .6; cursor: not-allowed; pointer-events: none;
}

.btn-primary { --btn-bg: var(--cs-orange); --btn-fg: #fff; --btn-bd: transparent; }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--cs-forest); --btn-bd: var(--cs-forest); }
.btn-warning { --btn-bg: var(--cs-yellow); --btn-fg: var(--cs-brown); --btn-bd: transparent; }

/* Cards */
.card {
  background: var(--cs-cloud);
  color: var(--cs-coal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-strong);
}
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
.card-title { margin: 0; font: 600 1.1rem/1.3 var(--font-heading); color: var(--cs-forest); }
.card-body { padding: 1.25rem; }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  padding: .55rem .75rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: var(--cs-coal);
  font: 400 1rem/1.4 var(--font-body);
  outline: none;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: color-mix(in srgb, var(--cs-forest) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-forest) 20%, transparent);
}
.textarea { min-height: 120px; resize: vertical; }
.label { display: block; font: 500 .85rem/1.2 var(--font-body); color: var(--cs-stone); margin-bottom: .35rem; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .5rem; border-radius: 999px; font: 600 .75rem/1 var(--font-body);
  background: color-mix(in srgb, var(--cs-forest) 10%, transparent);
  color: var(--cs-forest);
}
.badge.warn { background: color-mix(in srgb, var(--cs-yellow) 20%, transparent); color: var(--cs-brown); }
.badge.alert { background: color-mix(in srgb, var(--cs-orange) 20%, transparent); color: var(--cs-orange); }

/* Alerts */
.alert { border-radius: var(--radius-xl); padding: .9rem 1rem; box-shadow: var(--shadow-card); }
.alert.info { background: color-mix(in srgb, var(--cs-forest) 12%, white); color: var(--cs-forest); }
.alert.warn { background: color-mix(in srgb, var(--cs-yellow) 20%, white); color: var(--cs-brown); }
.alert.danger { background: color-mix(in srgb, var(--cs-orange) 18%, white); color: var(--cs-orange); }

/* Nav (lightweight) */
.nav { display:flex; gap:.5rem; }
.nav a, .nav button { padding: .5rem .75rem; border-radius: .5rem; color: var(--cs-coal); text-decoration: none; }
.nav a:hover, .nav button:hover { background: rgba(0,0,0,.05); }

/* Utility spacing (small set) */
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.p-3{padding: .75rem}.p-4{padding: 1rem}.p-6{padding: 1.25rem}
.rounded-xl{border-radius: var(--radius-xl)}

/* Dark theme adjustments */
[data-theme="dark"] .card { background: #1c1c1c; color: var(--cs-coal); box-shadow: none; border: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
  background: #151515; border-color: rgba(255,255,255,0.12); color: var(--cs-coal);
}

/* =====================================
   Color Helper Utilities
   (lean set for quick prototyping)
   ===================================== */
.bg-charcoal { background: var(--cs-coal); color: var(--cs-cloud); }
.bg-cream    { background: var(--cs-cloud); color: var(--cs-coal); }
.bg-burnt    { background: var(--cs-orange); color: #fff; }
.bg-teal     { background: var(--cs-forest); color: #fff; }

.text-charcoal { color: var(--cs-coal); }
.text-cream    { color: var(--cs-cloud); }
.text-burnt    { color: var(--cs-orange); }
.text-teal     { color: var(--cs-forest); }

.border-charcoal { border-color: var(--cs-coal) !important; }
.border-cream    { border-color: var(--cs-cloud) !important; }
.border-burnt    { border-color: var(--cs-orange) !important; }
.border-teal     { border-color: var(--cs-forest) !important; }

/* =====================================
   Subtle Grunge Utilities
   - Uses a tiled grain texture overlay via ::after
   - Keeps your element's own background intact
   - Place grain assets under /textures/
   ===================================== */
.grunge { position: relative; }
.grunge::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('/textures/grain-01.webp');
  background-repeat: repeat;
  background-size: var(--grunge-tile-size) var(--grunge-tile-size);
  opacity: var(--grunge-opacity);
  mix-blend-mode: multiply;
}
/* Stronger grain variant for hero sections or banners */
.grunge-strong { position: relative; }
.grunge-strong::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('/textures/grain-01.webp');
  background-repeat: repeat;
  background-size: var(--grunge-tile-size) var(--grunge-tile-size);
  opacity: var(--grunge-opacity-strong);
  mix-blend-mode: multiply;
}
/* Disable grain on a subtree if needed */
.grunge-none, .grunge-none *::after { opacity: 0 !important; }

/* =====================================
   Distressed Edges (mask-based rips)
   - Apply on section wrappers with colored backgrounds
   - Provide assets: /textures/rip-top.svg and /textures/rip-bottom.svg
   ===================================== */
.section-rip-top {
  -webkit-mask: url('/textures/rip-top.svg') top center / 100% 60px no-repeat, linear-gradient(#000,#000);
          mask: url('/textures/rip-top.svg') top center / 100% 60px no-repeat, linear-gradient(#000,#000);
  padding-top: 4rem; /* space to reveal the rip */
}
.section-rip-bottom {
  -webkit-mask: url('/textures/rip-bottom.svg') bottom center / 100% 60px no-repeat, linear-gradient(#000,#000);
          mask: url('/textures/rip-bottom.svg') bottom center / 100% 60px no-repeat, linear-gradient(#000,#000);
  padding-bottom: 4rem; /* space to reveal the rip */
}

/* =====================================
   Brush Divider
   - Use on an empty <div class="hr-brush"/> between sections
   - Provide asset: /textures/brush-hr.svg
   ===================================== */
.hr-brush { display:block; height:24px; background: url('/textures/brush-hr.svg') center/100% 100% no-repeat; opacity:.65; }

/* =====================================
   Button Micro-texture (opt-in)
   - Add class "grunge" to any .btn to inherit the overlay
   ===================================== */
.btn.grunge::after { border-radius: inherit; }

/* =====================================
   Accessibility & Motion
   ===================================== */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* =====================================
   CrewStation POC-1 Shared Styles
   (moved from poc1.html inline <style>)
   These are safe, reusable primitives for route/map screens
   ===================================== */

/* App shell + header */
.app { display:grid; grid-template-rows:auto auto 1fr; gap:10px; max-width:1200px; margin:0 auto; padding:16px; }
header.app-header { display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; gap:12px; align-items:baseline; }
.brand h1 { font: 700 22px/1 var(--font-heading); margin:0; color: var(--cs-forest); }
.tag { font: 500 12px/1 var(--font-body); color: var(--cs-stone); }
.bar { display:flex; gap:12px; align-items:center; }

/* Toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 14px; }
.file { display:inline-block; padding:8px 10px; border:1px dashed rgba(0,0,0,.2); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--cs-cloud) 75%, white); }

/* Layout (map + right panel) */
.layout { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; height:60vh; min-height:420px; }
#map { height:100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.panel { display:flex; flex-direction:column; gap:12px; }
.panel .section { padding:12px; }
.section h3 { margin:0 0 8px 0; font: 600 14px/1.3 var(--font-heading); color: var(--cs-forest); letter-spacing:.3px; text-transform:uppercase; }

/* Waypoint preview table */
.waypoint-list { max-height:160px; overflow:auto; border:1px solid rgba(0,0,0,.08); border-radius: var(--radius-xl); }
.waypoint-list table { width:100%; border-collapse:collapse; }
.waypoint-list th, .waypoint-list td { padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.06); font: 400 13px/1.3 var(--font-body); text-align:left; }
.waypoint-list th:last-child, .waypoint-list td:last-child { text-align:right; }

/* Chips & notices */
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background: color-mix(in srgb, var(--cs-forest) 8%, white); font: 600 12px/1 var(--font-body); color: var(--cs-forest); }
.chip .dot { width:8px; height:8px; border-radius:999px; background: var(--cs-orange); display:inline-block; }
.notice { padding:10px 14px; border-top:1px solid rgba(0,0,0,.08); color: var(--cs-brown); background: color-mix(in srgb, var(--cs-yellow) 10%, white); border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }

/* Buttons: ghost variant to complement existing .btn, .btn-primary */
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--cs-forest); --btn-bd: color-mix(in srgb, var(--cs-forest) 60%, transparent); }

/* Helpers */
.hidden { display:none !important; }

/* Dark theme adjustments for map stack */
[data-theme="dark"] .file { border-color: rgba(255,255,255,.18); background: #151515; }
[data-theme="dark"] .waypoint-list { border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .waypoint-list th, [data-theme="dark"] .waypoint-list td { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .chip { border-color: rgba(255,255,255,.12); background: color-mix(in srgb, var(--cs-forest) 12%, #111); color: var(--cs-cloud); }
[data-theme="dark"] .chip .dot { background: var(--cs-orange); }
[data-theme="dark"] .notice { background: color-mix(in srgb, var(--cs-yellow) 10%, #111); color: var(--cs-cloud); border-top-color: rgba(255,255,255,.12); }
/* CrewStation tooltip style for cursor marker (matches mile tip) */
.leaflet-tooltip.cs-cursor-tip{
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  font: 600 12px/1.2 var(--font-body, system-ui);
  letter-spacing: .2px;
}
.leaflet-tooltip-top.cs-cursor-tip::before{ border-top-color: #111; }
/* Draggable station rows */
.cs-dr-row { cursor: grab; }
.cs-dr-row.dragging { opacity: .6; }
.cs-dr-row.drag-over { outline: 2px dashed rgba(209,98,31,.7); outline-offset: -2px; }

/* Focus ring for editable cell */
td.station-name:focus { outline: 2px solid rgba(209,98,31,.6); border-radius: 4px; }
/* Tint the drag handle on hover/focus for better affordance */
.drag-handle{
  transition: background-color .15s ease, color .15s ease;
}
.drag-handle:hover,
.drag-handle:focus-visible{
  color: #d1621f; /* CrewStation burnt orange */
  background: rgba(209,98,31,.12);
}
.drag-handle:active{
  background: rgba(209,98,31,.18);
}
.drag-cell { width: 28px; }

/* Ensure the hover cursor marker never blocks interactions with mile markers */
.leaflet-overlay-pane .cs-cursor { pointer-events: none; }

/* CrewStation tooltip style for mile markers (match cursor tip) */
.leaflet-tooltip.cs-mile-tip{
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  font: 600 12px/1.2 var(--font-body, system-ui);
  letter-spacing: .2px;
}
.leaflet-tooltip-top.cs-mile-tip::before{ border-top-color: #111; }
/* Improve drag handle affordance and hit area */
.drag-handle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  cursor: grab !important; /* override any table defaults */
  user-select: none;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.drag-handle:hover,
.drag-handle:focus-visible{
  color: #d1621f;
  background: rgba(209,98,31,.12);
}
.drag-handle:active{
  cursor: grabbing !important;
  background: rgba(209,98,31,.18);
}
/* Ensure table cells default to arrow cursor; the handle overrides to grab */
.waypoint-list th,
.waypoint-list td { cursor: default; }

/* Stronger specificity to guarantee hover/focus styles apply inside the table */
.waypoint-list .drag-handle{
  cursor: grab !important;
}
.waypoint-list .drag-handle:hover,
.waypoint-list .drag-handle:focus-visible{
  color: #d1621f;
  background: rgba(209,98,31,.12);
}
.waypoint-list .drag-handle:active{
  cursor: grabbing !important;
  background: rgba(209,98,31,.18);
}
/* Station Manager row highlight states */
tr.cs-dr-row.is-hovered { background: rgba(209,98,31,.06); }
tr.cs-dr-row.is-focused { background: rgba(209,98,31,.12); border-left: 3px solid #d1621f; }