/* =====================================================================
   RANGE INTEL — 2026 UI REDESIGN LAYER
   ---------------------------------------------------------------------
   Loaded LAST so it modernizes the existing markup without touching the
   ~8,300 lines of JS that are wired to the current DOM ids / classes.
   Inline styles in index.html are overridden with !important where needed.
   Design language: precision / tactical dashboard — deep charcoal
   surfaces, soft elevation, a signal-red brand accent, cyan + green for
   data, crisp Inter typography, rounded cards, subtle micro-interactions.
   ===================================================================== */

:root {
  --ri-bg:            #0c0c0f;
  --ri-bg-grad:       radial-gradient(1100px 560px at 50% -240px, #1b1b24 0%, #0c0c0f 62%);
  --ri-surface:       #161619;
  --ri-surface-2:     #1d1d23;
  --ri-elev:          #24242c;
  --ri-border:        rgba(255, 255, 255, 0.08);
  --ri-border-strong: rgba(255, 255, 255, 0.16);
  --ri-text:          #f2f3f5;
  --ri-muted:         #9aa1ab;
  --ri-red:           #ff3b3b;
  --ri-red-2:         #c1121f;
  --ri-cyan:          #00d1ff;
  --ri-green:         #00ff99;
  --ri-amber:         #ffb52e;
  --ri-radius:        16px;
  --ri-radius-sm:     10px;
  --ri-shadow:        0 14px 38px rgba(0, 0, 0, 0.50);
  --ri-shadow-sm:     0 4px 16px rgba(0, 0, 0, 0.42);
  --ri-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ri-display:       'Bebas Neue', 'Oswald', 'Inter', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────── */
/* `clip` prevents sideways scroll WITHOUT creating a scroll container,
   so the sticky navbar keeps working (overflow-x:hidden would break it). */
html, body { overflow-x: clip; max-width: 100%; }

body#page-top {
  background: var(--ri-bg) !important;
  color: var(--ri-text);
  font-family: var(--ri-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#content { background: var(--ri-bg-grad) !important; }

img { max-width: 100%; height: auto; }

p, label, span, td, th, li { font-family: var(--ri-font); }

/* Generic light text inside the dark app shell */
.modal-body p, .accordion-body > p, .accordion-body label.form-label {
  color: var(--ri-text);
}
.accordion-body > p { color: var(--ri-muted) !important; line-height: 1.55; }

/* ── Top accent bar ────────────────────────────────────────────────── */
body#page-top > div:first-of-type {
  background: linear-gradient(90deg, var(--ri-red-2), var(--ri-red), var(--ri-red-2)) !important;
  height: 4px !important;
  box-shadow: 0 0 18px rgba(255, 59, 59, 0.5);
}

/* ── Navbar ────────────────────────────────────────────────────────── */
#main-navbar {
  background: rgba(11, 11, 14, 0.88) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ri-border);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.6) !important;
  position: sticky;
  top: 0;
  z-index: 1040;
}
#nav-bar-mobile-nav-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--ri-text);
  background: var(--ri-surface-2);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-sm);
  padding: 8px 14px;
}
#nav-bar-mobile-nav-item span { font-weight: 600; }

/* ── Buttons (keep semantic colors, unify the shape) ───────────────── */
.btn { font-family: var(--ri-font); }
.ui-buttons-custom, .btn-primary, .btn-light, .download-pdf-buttons, .calculator-buttons {
  border-radius: var(--ri-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.ui-buttons-custom { padding: 9px 18px; }
.ui-buttons-custom:hover, .btn-primary:hover, .btn-light:hover { transform: translateY(-1px); }
.ui-buttons-custom:active, .btn-primary:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--ri-cyan); outline-offset: 2px; }

/* ── Tool cards (Basic / Standard / Advanced / Printable) ──────────── */
.calculator-buttons {
  border: 1px solid var(--ri-border-strong) !important;
  border-radius: var(--ri-radius) !important;
  overflow: hidden;
  position: relative;
  box-shadow: var(--ri-shadow-sm);
  /* Inline markup sets margin:10px + width:100%, which overflows the
     column (especially in the 2-up mobile grid). Drop the side margins
     and let the Bootstrap column padding form the gutters. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.calculator-buttons::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--ri-radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.calculator-buttons:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}
.calc-icon {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  transition: transform 0.25s ease;
}
.calculator-buttons:hover .calc-icon { transform: scale(1.08) translateY(-2px); }
.calc-text {
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 14px !important;
  letter-spacing: 1.5px;
  font-family: 'Aldrich', var(--ri-font) !important;
  font-size: 13px !important;
  /* The card is a centered flex column, so the pill sizes to its text on
     one line and gets clipped by overflow:hidden. Let it wrap instead. */
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

/* ── Accordion sections ────────────────────────────────────────────── */
.accordian-sections { border-radius: var(--ri-radius); overflow: hidden; box-shadow: var(--ri-shadow); }
.accordion-item {
  background: transparent !important;
  border: 1px solid var(--ri-border) !important;
  border-radius: var(--ri-radius) !important;
  overflow: hidden;
}
.accordion-button {
  background: linear-gradient(100deg, #0f0f14, #17171d) !important;
  color: var(--ri-text) !important;
  letter-spacing: 1px;
  padding: 20px 22px 20px 26px !important;
  border-bottom: 1px solid var(--ri-border);
  position: relative;
}
.accordion-button::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--ri-red), var(--ri-red-2));
}
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--ri-border); }
/* Force a crisp white chevron (Bootstrap's default SVG icon is dark and
   was nearly invisible on the black headers). */
.accordion-button {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
}
.accordion-button::after { filter: none; }

/* Replace the busy photo backgrounds with clean dark surfaces */
.accordian-sections .accordion-collapse,
#add-firearm-item-content {
  background: linear-gradient(180deg, #141419 0%, #0f0f13 100%) !important;
}
.accordion-body { padding: 22px !important; }

/* ── Form: Add Intel Entry ─────────────────────────────────────────── */
.form-label { font-weight: 600; letter-spacing: 0.2px; }
#add-firearm-section .text-uppercase.text-primary { color: var(--ri-text) !important; }
#add-firearm-section hr, .modal-body hr { border-color: var(--ri-border) !important; opacity: 1; }

/* "Example:" helper hints — soften the harsh red */
#add-firearm-section .text-capitalize[style*="color: red"],
#add-firearm-section span[style*="color: red"] {
  color: #ff7676 !important;
  font-size: 12px;
  font-weight: 500;
}

/* ── Inputs (refine the existing .data-input-fields) ───────────────── */
.data-input-fields {
  border-width: 1px !important;
  border-color: #34343c !important;
  background: #121216 !important;
  border-radius: var(--ri-radius-sm) !important;
}
.data-input-fields:focus {
  border-color: var(--ri-green) !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 153, 0.18) !important;
}
select.data-input-fields,
select.data-input-fields:focus { background: #121216 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239aa1ab' d='M6 8L0 0h12z'/></svg>") no-repeat right 12px center !important; padding-right: 34px !important; }

/* ── Stats sections: chart cards ───────────────────────────────────── */
.intel-chart {
  background: var(--ri-surface) !important;
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius);
  padding: 14px 12px;
  box-shadow: var(--ri-shadow-sm);
  overflow: hidden;
}
/* These three have a forced fixed height in firearm-chart.css; let them
   size to their canvas so the new card padding doesn't clip them. */
#chart, #pie-chart, #horizontal-bar-chart { height: auto !important; overflow: visible !important; }
.intel-chart-column { margin-bottom: 22px; }
.intel-chart-column > p, #firearm-stats-section p.mb-0, #optic-stats-section p.mb-0,
#ammo-stats-section p.mb-0, #muzzle-stats-section p.mb-0, #muzzle-stats-section-1 p.mb-0 {
  color: var(--ri-muted) !important;
  font-size: 13.5px;
  line-height: 1.5;
}
.apexcharts-canvas { max-width: 100% !important; }
.apexcharts-tooltip {
  background: #14141a !important;
  border: 1px solid var(--ri-border-strong) !important;
  box-shadow: var(--ri-shadow) !important;
  color: var(--ri-text) !important;
}
.apexcharts-tooltip-title { background: #1d1d24 !important; border-bottom: 1px solid var(--ri-border) !important; }

/* Download-PDF section buttons */
.download-pdf-buttons { letter-spacing: 1px; }

/* ── Intel List: filter bar, summary card, table ───────────────────── */
#session-filter-bar {
  background: var(--ri-surface-2);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-sm);
  padding: 12px 16px !important;
}
#session-summary-card {
  background: linear-gradient(135deg, #15151c, #11161f) !important;
  border: 1px solid rgba(0, 209, 255, 0.28) !important;
  border-radius: var(--ri-radius) !important;
  box-shadow: var(--ri-shadow-sm);
}
#firearm-grid {
  background: var(--ri-surface);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius);
  padding: 6px;
}
table#firearmTable { background: transparent !important; }
#firearmTable thead th {
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.6px;
  font-weight: 700;
  border-bottom: 1px solid var(--ri-border-strong) !important;
  padding-top: 12px; padding-bottom: 12px;
}
#firearmTable tbody td { border-color: var(--ri-border) !important; vertical-align: middle; }
#firearmTable tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }

/* ── Modals (calculators, reports, view/edit, dialogs) ─────────────── */
.modal-content {
  background: var(--ri-surface) !important;
  border: 1px solid var(--ri-border-strong) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.72) !important;
}
.modal-header {
  background: linear-gradient(100deg, #141419, #1c1c23) !important;
  border-bottom: 1px solid var(--ri-border) !important;
  align-items: center;
}
.modal-body { background: var(--ri-surface) !important; }
.modal-footer { background: #121216 !important; border-top: 1px solid var(--ri-border) !important; }
.modal-title { letter-spacing: 0.5px; }

/* Light (info/warning) dialogs — keep readable on white */
#warning-message .modal-content, #general-message .modal-content,
#delete-message .modal-content, #upload-csv-file-message-modal .modal-content,
#clear-all-data .modal-content { background: #f6f7f9 !important; }
/* Body must be light too — the global dark .modal-body rule above would
   otherwise leave dark text on a dark body in these utility dialogs. */
#warning-message .modal-body, #general-message .modal-body,
#delete-message .modal-body, #upload-csv-file-message-modal .modal-body,
#clear-all-data .modal-body { background: #f6f7f9 !important; color: #1a1a1a; }
#warning-message .modal-body p, #general-message .modal-body p,
#delete-message .modal-body p, #upload-csv-file-message-modal .modal-body p,
#clear-all-data .modal-body p { color: #1a1a1a !important; }
#warning-message .modal-header, #general-message .modal-header,
#delete-message .modal-header, #upload-csv-file-message-modal .modal-header,
#clear-all-data .modal-header { background: #fff !important; }
#warning-message .modal-footer, #general-message .modal-footer,
#delete-message .modal-footer, #upload-csv-file-message-modal .modal-footer,
#clear-all-data .modal-footer { background: #f0f1f3 !important; }

/* ── Calculators: prominent result fields ──────────────────────────── */
#basic-hit-factor-display, #standard-hit-factor-display, #advanced-hit-factor-display {
  font-size: 28px !important;
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  color: var(--ri-green) !important;
  background: #0d1310 !important;
  border-color: rgba(0, 255, 153, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 153, 0.08), inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Power-factor toggle */
#standard-hit-factor-calc .btn-group .btn-outline-primary {
  border-radius: var(--ri-radius-sm) !important;
}

/* Advanced calculator: each scoring zone becomes a tidy row-card */
.advanced-calc-rows {
  background: #121217 !important;
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-sm);
  padding: 10px !important;
  margin-bottom: 10px;
  align-items: center !important;
}
#advanced-calc-time-and-penalties .advanced-calc-time-and-penalties-rows:not(#advanced-calc-penalties-titles) {
  background: #121217;
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
}
#advanced-calc-penalties-titles .advanced-calc-labels,
#advanced-calc-penalties-titles ~ * .advanced-calc-labels { letter-spacing: 0.4px; }

/* ── DataTables controls ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: #121216 !important;
  color: var(--ri-text) !important;
  border: 1px solid #34343c !important;
  border-radius: var(--ri-radius-sm) !important;
  padding: 6px 10px !important;
}

/* ── Loading / PDF overlay ─────────────────────────────────────────── */
#pdf-loading-overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* =====================================================================
   RESPONSIVE — tablet & mobile refinements
   ===================================================================== */
@media (max-width: 991px) {
  .accordion-button { font-size: 24px !important; }
}

@media (max-width: 767px) {
  /* Tool cards: 2-up grid instead of full-width stack */
  .tool-columns { flex: 0 0 50% !important; max-width: 50% !important; }
  .calc-text { font-size: 11px !important; letter-spacing: 1px; padding: 5px 10px !important; }
  .calc-icon { width: 46px !important; }

  .accordion-button { font-size: 20px !important; padding: 16px 16px 16px 20px !important; }
  .accordion-body { padding: 14px !important; }
  .modal-title { font-size: 16px !important; }
  .modal-header { padding: 12px 16px !important; }
  .modal-body { padding: 16px !important; }

  .intel-chart { padding: 10px 6px; }
  .intel-chart-column > p { font-size: 12.5px; }

  /* Calculator action buttons: full-width, comfortable tap targets */
  #basic-calculate-button, #basic-reset-button,
  #standard-calculate-button, #standard-reset-button,
  #advanced-calculate-button, #advanced-reset-button {
    flex: 1 1 0; min-width: 120px; margin-bottom: 8px;
  }

  #session-filter-bar { flex-direction: column; align-items: stretch !important; }
  #session-filter-bar select { width: 100% !important; }
}

@media (max-width: 480px) {
  .tool-columns { flex: 0 0 50% !important; max-width: 50% !important; }
  .ui-buttons-custom { padding: 9px 14px; }
  .accordion-button { font-size: 18px !important; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}