/* =========================================================================
   M-Tech Moto OS — Design System
   =========================================================================
   Shared stylesheet for the whole app. This file defines:
     1. CSS custom properties (design tokens)
     2. Bootstrap 5 CSS-variable overrides (theme-level, low risk)
     3. Component rules (navbar, cards, buttons, forms, tables, badges,
        alerts, modals, accordion, utilities)

   Read this file's comments before restyling a page — reuse the tokens
   and utility classes below instead of hardcoding colors/radii/shadows.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --mtech-navy: #101820;
  --mtech-navy-light: #1c2a36;   /* lighter navy, e.g. gradients / hover surfaces on dark bg */
  --mtech-navy-lighter: #263542; /* even lighter, for subtle borders/dividers on dark bg */
  --mtech-navy-dark: #0a0f14;    /* darker navy, e.g. gradient end / active states */
  --mtech-accent: #00D2FF;       /* ice blue accent */
  --mtech-accent-light: #5ce1ff; /* lighter accent, hover highlights on dark surfaces */
  --mtech-accent-dark: #00a5c8;  /* darker accent, hover/active state for accent buttons */
  --mtech-accent-soft: rgba(0, 210, 255, 0.12); /* tinted background using accent */

  /* Radius scale (use everywhere instead of ad-hoc border-radius values) */
  --mtech-radius-sm: 8px;
  --mtech-radius-md: 12px;
  --mtech-radius-lg: 16px;
  --mtech-radius-pill: 50rem;

  /* Shadow scale */
  --mtech-shadow-sm: 0 2px 8px rgba(16, 24, 32, 0.06);
  --mtech-shadow-md: 0 8px 24px rgba(16, 24, 32, 0.10);
  --mtech-shadow-lg: 0 16px 40px rgba(16, 24, 32, 0.16);

  /* Motion */
  --mtech-transition: 180ms ease;

  /* Font */
  --mtech-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   2. BOOTSTRAP 5 VARIABLE OVERRIDES
   Low-risk, high-leverage: these ripple through every Bootstrap component
   (cards, buttons, inputs, modals, alerts, badges, etc.) without touching
   per-page markup.
   ------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--mtech-font-sans);
  --bs-body-bg: #f4f6f7;
  --bs-body-color: #1c2733;

  --bs-primary: var(--mtech-navy);
  --bs-primary-rgb: 16, 24, 32;

  --bs-border-radius-sm: var(--mtech-radius-sm);
  --bs-border-radius: var(--mtech-radius-md);
  --bs-border-radius-lg: var(--mtech-radius-lg);
  --bs-border-radius-xl: var(--mtech-radius-lg);
  --bs-border-radius-pill: var(--mtech-radius-pill);

  --bs-card-border-radius: var(--mtech-radius-lg);
  --bs-card-inner-border-radius: calc(var(--mtech-radius-lg) - 1px);
  --bs-card-border-color: rgba(16, 24, 32, 0.06);
  --bs-card-box-shadow: var(--mtech-shadow-sm);
  --bs-card-cap-bg: #ffffff;

  --bs-btn-border-radius: var(--mtech-radius-sm);
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.35);

  --bs-modal-border-radius: var(--mtech-radius-lg);
  --bs-accordion-border-radius: var(--mtech-radius-md);
  --bs-accordion-inner-border-radius: calc(var(--mtech-radius-md) - 1px);

  --bs-nav-link-transition: color var(--mtech-transition), background-color var(--mtech-transition);

  --bs-link-color: var(--mtech-accent-dark);
  --bs-link-hover-color: var(--mtech-navy);
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
body {
  font-family: var(--mtech-font-sans);
  background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6,
.stat-value {
  font-weight: 800;
}

/* Global subtle transition on common interactive elements */
a, .btn, .card, .nav-link, .form-control, .form-select, .form-check-input,
.badge, .accordion-button, .list-group-item {
  transition: color var(--mtech-transition), background-color var(--mtech-transition),
              border-color var(--mtech-transition), box-shadow var(--mtech-transition),
              transform var(--mtech-transition);
}

/* Visible, consistent focus ring in accent color for accessibility */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.35);
}

/* -------------------------------------------------------------------------
   BRAND HELPERS (kept exactly working as before — used across every page)
   ------------------------------------------------------------------------- */
.text-mtech {
  color: var(--mtech-accent) !important;
}

.btn-mtech {
  background-color: var(--mtech-accent) !important;
  color: var(--mtech-navy) !important;
  border: none;
  font-weight: 800;
  border-radius: var(--mtech-radius-sm);
}
.btn-mtech:hover {
  background-color: var(--mtech-accent-dark) !important;
  color: var(--mtech-navy) !important;
  transform: translateY(-1px);
  box-shadow: var(--mtech-shadow-sm);
}
.btn-mtech:active {
  transform: translateY(0);
}
.btn-mtech:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.5);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--mtech-navy);
}

/* -------------------------------------------------------------------------
   NAVBAR
   ------------------------------------------------------------------------- */
.navbar.bg-dark,
.navbar {
  background: linear-gradient(180deg, var(--mtech-navy-light) 0%, var(--mtech-navy) 55%, var(--mtech-navy-dark) 100%) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  box-shadow: var(--mtech-shadow-md);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--mtech-radius-sm);
  position: relative;
}

.navbar .nav-link i {
  margin-right: 0.4rem;
}

.navbar .nav-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.06);
}

.navbar .nav-link.active {
  color: #fff !important;
}

/* Accent-colored active-item indicator */
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.05rem;
  height: 2px;
  background-color: var(--mtech-accent);
  border-radius: var(--mtech-radius-pill);
  transition: opacity var(--mtech-transition);
}

.navbar .nav-link.logout-link {
  color: rgba(255, 255, 255, 0.6) !important;
}
.navbar .nav-link.logout-link:hover {
  color: var(--mtech-accent-light) !important;
  background-color: rgba(255, 255, 255, 0.06);
}

/* Adds a subtle extra shadow once the page is scrolled (optional JS hook, see app.js) */
.navbar.navbar-scrolled {
  box-shadow: var(--mtech-shadow-lg);
}

/* -------------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--bs-card-border-color, rgba(16, 24, 32, 0.06));
  border-radius: var(--mtech-radius-lg);
  box-shadow: var(--mtech-shadow-sm);
}

.card-header {
  border-top-left-radius: var(--mtech-radius-lg) !important;
  border-top-right-radius: var(--mtech-radius-lg) !important;
}

/* Subtle hover lift for interactive/clickable cards.
   Opt-in via .card-hover to avoid affecting sticky sidebar cards (which must
   not jitter/move while scrolling). */
.card-hover {
  transition: transform var(--mtech-transition), box-shadow var(--mtech-transition);
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--mtech-shadow-md);
}

/* Sticky sidebar cards: keep completely static, no hover motion */
.sticky-top.card,
.sticky-top .card {
  transition: none;
}

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  font-weight: 600;
  border-radius: var(--mtech-radius-sm);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.35);
}

/* -------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: var(--mtech-radius-sm);
  padding: 0.55rem 0.9rem;
  border-color: rgba(16, 24, 32, 0.14);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mtech-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.25);
}

.form-check-input {
  border-radius: 0.3em;
}
.form-check-input:checked {
  background-color: var(--mtech-navy);
  border-color: var(--mtech-navy);
}
.form-check-input:focus {
  border-color: var(--mtech-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.25);
}

/* -------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------- */
.table {
  --bs-table-border-color: rgba(16, 24, 32, 0.08);
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(0, 210, 255, 0.06);
}

.table-responsive {
  border-radius: var(--mtech-radius-md);
}

/* -------------------------------------------------------------------------
   BADGES & ALERTS
   ------------------------------------------------------------------------- */
.badge {
  border-radius: var(--mtech-radius-pill);
  font-weight: 600;
  padding: 0.4em 0.75em;
}

.alert {
  border: none;
  border-radius: var(--mtech-radius-md);
  box-shadow: var(--mtech-shadow-sm);
}

/* -------------------------------------------------------------------------
   MODALS & ACCORDION
   ------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--mtech-radius-lg);
  box-shadow: var(--mtech-shadow-lg);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid rgba(16, 24, 32, 0.08);
}

.modal-footer {
  border-top: 1px solid rgba(16, 24, 32, 0.08);
}

.accordion-item {
  border-color: rgba(16, 24, 32, 0.08);
}

.accordion-button {
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  color: var(--mtech-navy);
  background-color: var(--mtech-accent-soft);
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.25);
}

/* -------------------------------------------------------------------------
   UTILITIES — reusable across page templates
   ------------------------------------------------------------------------- */

/* Page header row: title + optional right-aligned meta/actions.
   Mirrors the pattern already used in index.html
   (d-flex justify-content-between align-items-center mb-4). */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Icon chip used next to stat numbers (e.g. dashboard cards' bg-success
   bg-opacity-10 p-3 rounded icon wrappers) — optional convenience class. */
.stat-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mtech-radius-md);
  font-size: 1.25rem;
}

/* Softer surface using the accent color, e.g. for highlighted panels */
.bg-mtech-soft {
  background-color: var(--mtech-accent-soft) !important;
}