/* ==========================================================
   Mobility Nest Theme V1
   Green + Orange + Yellow + Red + White
   Presentation only — no functional application changes
   ========================================================== */

:root {
  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-2: #f8faf8;

  --line: #dde4df;

  --text: #243029;
  --muted: #66736b;

  --brand: #237a45;
  --brand-strong: #1e683c;

  --orange: #c96a19;
  --orange-soft: #fff3e8;

  --yellow: #d6a900;
  --yellow-soft: #fffbea;

  --danger: #c43b3b;
  --danger-soft: #fdecec;

  --success: #2f8a50;
  --success-soft: #ecfdf3;

  --shadow: 0 12px 32px rgba(31, 41, 55, 0.08);
}


/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */

html,
body {
  background: #f4f6f3;
  color: var(--text);
}

body {
  background:
    radial-gradient(
      circle at 92% 2%,
      rgba(250, 204, 21, 0.10),
      transparent 25rem
    ),
    radial-gradient(
      circle at 4% 96%,
      rgba(21, 128, 61, 0.08),
      transparent 30rem
    ),
    #f4f6f3;
}

.dashboard-page {
  background: #f4f6f3;
  color: var(--text);
}


/* ----------------------------------------------------------
   SIDEBAR / NAVIGATION
   ---------------------------------------------------------- */

.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
  box-shadow: 6px 0 22px rgba(31, 41, 55, 0.025);
}

.nav-label {
  color: #89928c;
}

.nav-item {
  color: #4b5563;
}

.nav-item:hover {
  color: #1e683c;
  background: #eaf4ed;
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(135deg, #237a45, #2f8a50);
  box-shadow: 0 7px 18px rgba(21, 128, 61, 0.18);
}

.mobile-nav {
  background: #ffffff;
  border-top-color: var(--line);
}

.mobile-nav a {
  color: #4b5563;
}

.mobile-nav a.active {
  color: #1e683c;
  background: #e6f2e9;
}


/* ----------------------------------------------------------
   CARDS / PANELS / MODULES
   ---------------------------------------------------------- */

.stat,
.panel,
.module,
.mobile-record,
.route-card,
.fallback-box {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}

.stat,
.panel {
  box-shadow: 0 7px 24px rgba(31, 41, 55, 0.045);
}

.module:hover {
  border-color: rgba(21, 128, 61, 0.30);
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
strong {
  color: #243029;
}

p,
.mobile-record span,
.route-card span,
.detail-line {
  color: #59635d;
}

.eyebrow {
  color: #237a45;
}

.password-rules,
.foundation-note,
.share-note {
  color: #707a74;
}


/* ----------------------------------------------------------
   PRIMARY BUTTONS
   ---------------------------------------------------------- */

.button {
  color: #ffffff;
  background: linear-gradient(135deg, #237a45, #2f8a50);
  box-shadow: 0 7px 18px rgba(21, 128, 61, 0.18);
}

.button:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #1e683c, #237a45);
}


/* ----------------------------------------------------------
   SECONDARY / OPERATIONAL BUTTONS
   ---------------------------------------------------------- */

.button-secondary {
  color: #a95313;
  border-color: #efcfaf;
  background: #fff4e8;
}

.button-secondary:hover {
  color: #8a4a13;
  border-color: #e8b77c;
  background: #fce8d5;
}


/* ----------------------------------------------------------
   DANGER / CRITICAL
   ---------------------------------------------------------- */

.button-danger {
  color: #ffffff;
  background: #c43b3b;
}

.button-danger:hover {
  background: #a83030;
}


/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

.field > span,
.field label {
  color: #374151;
}

.field input,
.field select,
.field textarea,
select,
input,
textarea {
  color: #243029;
  border-color: #d7ded9;
  background: #ffffff;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #2f8a50;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}


/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

th {
  color: #647067;
}

td {
  color: #374151;
}

tbody tr:hover,
.selected-row {
  background: #eaf4ed;
}


/* ----------------------------------------------------------
   TABLE ACTIONS
   ---------------------------------------------------------- */

.table-action {
  color: #237a45;
  border-color: rgba(21, 128, 61, 0.28);
  background: #eaf4ed;
}

.table-action:hover {
  background: #e6f2e9;
}

.table-action.secondary {
  color: #a95313;
  border-color: #efcfaf;
  background: #fff4e8;
}

.table-action.danger {
  color: #c43b3b;
  border-color: #efc6c6;
  background: #fdecec;
}


/* ----------------------------------------------------------
   STATUS COLORS
   ---------------------------------------------------------- */

.status-active,
.status-completed,
.duty-on {
  color: #1e683c;
  background: #e6f2e9;
}

.status-inactive,
.duty-off {
  color: #66736b;
  background: #f3f4f6;
}

.status-suspended {
  color: #854d0e;
  background: #fff8d6;
}

.status-in-progress {
  color: #8a4a13;
  background: #fce8d5;
}

.status-assigned {
  color: #8a4a13;
  background: #fff4e8;
}

.status-cancelled,
.status-no-show {
  color: #a83030;
  background: #fdecec;
}


/* ----------------------------------------------------------
   INCIDENTS
   ---------------------------------------------------------- */

.incident-critical {
  border-color: rgba(220, 38, 38, 0.45);
  box-shadow: inset 4px 0 #c43b3b;
}

.incident-high {
  border-color: rgba(234, 88, 12, 0.42);
  box-shadow: inset 4px 0 #c96a19;
}


/* ----------------------------------------------------------
   DIALOGS
   ---------------------------------------------------------- */

.form-dialog {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 28px 70px rgba(31, 41, 55, 0.18);
}

.form-dialog::backdrop {
  background: rgba(17, 24, 39, 0.48);
  backdrop-filter: blur(4px);
}

.icon-button {
  color: #374151;
  border-color: #e5e7eb;
  background: #f9fafb;
}


/* ----------------------------------------------------------
   TRIP 360
   ---------------------------------------------------------- */

.trip360-card,
.trip-fact,
.sheet-section-option {
  background: #ffffff;
  border-color: #e5e7eb;
}

.trip360-card h3,
.trip-fact strong,
.sheet-section-option strong {
  color: #243029;
}

.trip-fact span,
.evidence-row small,
.passenger-row small,
.completion-row small,
.sheet-section-option small {
  color: #66736b;
}

.trip-type-pill {
  color: #1e683c;
  border-color: rgba(22, 163, 74, 0.28);
  background: #eaf4ed;
}

.completion-pill.verified {
  color: #1e683c;
  border-color: #cfe6d5;
  background: #e6f2e9;
}

.completion-pill.pending {
  color: #854d0e;
  border-color: #ead685;
  background: #fff8d6;
}

.completion-pill.exception {
  color: #a83030;
  border-color: #efc6c6;
  background: #fdecec;
}

.progress-track {
  background: #e5e7eb;
}

.progress-bar {
  background: linear-gradient(90deg, #237a45, #22c55e);
}

.completion-summary strong {
  color: #237a45;
}

.trip-watermark,
.watermark-large {
  color: #8a4a13;
  border-color: #e8b77c;
  background: #fff4e8;
}


/* ----------------------------------------------------------
   DASHBOARD
   ---------------------------------------------------------- */

.home-dashboard,
.dashboard-home {
  background:
    radial-gradient(
      circle at 80% -10%,
      rgba(250, 204, 21, 0.10),
      transparent 28rem
    ),
    #f4f6f3;
}

.workspace-chip,
.home-user-chip,
.context-strip,
.metric-card,
.home-panel,
.module-search-dialog {
  background: #ffffff;
  border-color: #dde4df;
}

.workspace-chip strong,
.home-user-chip strong,
.context-item > strong,
.metric-card strong,
.panel-heading-row h2 {
  color: #243029;
}

.workspace-chip small,
.home-user-chip span,
.context-item > span,
.metric-card span,
.metric-card small {
  color: #66736b;
}

.live-dot,
.health-indicator.ok {
  background: #2f8a50;
}

.health-indicator.bad {
  background: #c43b3b;
}

.quick-action:hover,
.search-result:hover,
.module-link-list a:hover {
  background: #eaf4ed;
}

.quick-action-icon,
.search-result-icon {
  color: #1e683c;
  background: #e6f2e9;
}

.quick-arrow,
.tool-icon,
.assistant-spark {
  color: #c96a19;
}

.assistant-tool {
  color: #1e683c;
  border-color: #cfe6d5;
  background: linear-gradient(135deg, #eaf4ed, #ffffff);
}

.profile-avatar {
  color: #ffffff;
  background: linear-gradient(145deg, #237a45, #22c55e);
}


/* ----------------------------------------------------------
   TRAVEL ASSISTANT
   ---------------------------------------------------------- */

.assistant-toggle,
.assistant-location,
.assistant-form button {
  color: #ffffff;
  background: linear-gradient(135deg, #237a45, #2f8a50);
}

.assistant-panel {
  color: #243029;
  border-color: #e5e7eb;
  background: #ffffff;
}

.assistant-header {
  background: #eaf4ed;
  border-bottom-color: #e6f2e9;
}

.assistant-message {
  color: #374151;
  background: #f3f4f6;
}

.assistant-message.user {
  color: #ffffff;
  background: #237a45;
}

.assistant-message.system {
  color: #66736b;
  background: #f9fafb;
}

.assistant-destination select,
.assistant-form input {
  color: #243029;
  background: #ffffff;
}


/* ----------------------------------------------------------
   ROUTE / DETAIL ACCENTS
   ---------------------------------------------------------- */

.route-line {
  background: linear-gradient(#237a45, #f97316);
}

.detail-line {
  border-left-color: #237a45;
  background: #eaf4ed;
}


/* ----------------------------------------------------------
   SECURITY / MFA
   ---------------------------------------------------------- */

.secret-code {
  color: #1e683c;
  border-color: #2f8a50;
  background: #eaf4ed;
}


/* ----------------------------------------------------------
   NOTICES / WARNINGS
   ---------------------------------------------------------- */

.message.error,
.dashboard-message {
  color: #a83030;
}

.message.success {
  color: #1e683c;
}

.warning,
.warning-box {
  color: #713f12;
  border-color: #fde047;
  background: #fefce8;
}


/* ----------------------------------------------------------
   DASHBOARD TOAST
   ---------------------------------------------------------- */

.dashboard-toast {
  color: #1e683c;
  border-color: #cfe6d5;
  background: #eaf4ed;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 800px) {
  .sidebar {
    background: #ffffff;
  }

  .panel,
  .stat,
  .module,
  .mobile-record {
    box-shadow: none;
  }
}


/* ==========================================================
   Mobility Nest Production Typography V1
   Long-use readability standard
   ========================================================== */

html {
  font-size: 16px;
}

body {
  font-family:
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


/* Controls inherit one consistent production font */

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 15px;
}


/* Navigation */

.nav-item {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.nav-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}


/* Main headings */

.topbar h1,
.home-heading h1 {
  font-weight: 700;
  letter-spacing: -.025em;
}

.panel h2,
.panel-heading-row h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}


/* Forms */

.field label,
.field > span {
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea,
.toolbar input,
.toolbar select {
  font-size: 15px;
}


/* Tables */

th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

td {
  font-size: 14px;
  line-height: 1.45;
}

td small {
  font-size: 12px;
  line-height: 1.4;
}


/* Status */

.status-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}


/* Dashboard */

.workspace-chip small,
.context-item > span,
.metric-card small,
.panel-note,
.quick-copy small,
.health-row small,
.session-policy-card span,
.session-policy-card small,
.module-link-list small,
.profile-copy small,
.profile-menu-head span,
.profile-menu-head small,
.profile-menu-meta small,
.search-scope-note,
.search-result small,
.search-result em {
  font-size: 12px;
  line-height: 1.35;
}

.workspace-chip strong,
.context-item > strong,
.quick-copy strong,
.health-row strong,
.session-policy-card strong,
.profile-copy strong,
.profile-menu-head strong,
.profile-menu-meta strong,
.search-result strong {
  font-size: 13px;
  line-height: 1.4;
}

.header-tool,
.compact-button,
.profile-signout {
  font-size: 13px !important;
}

.dashboard-message,
.dashboard-toast,
.home-empty {
  font-size: 12px;
}


/* Trip 360 */

.trip-fact span,
.trip-foundation-dialog .field span,
.sheet-section-option label,
.audit-row small {
  font-size: 12px;
}

.trip-fact strong,
.sheet-section-option strong,
.audit-row strong {
  font-size: 13px;
}

.foundation-note {
  font-size: 13px;
  line-height: 1.5;
}

.trip-type-pill,
.completion-pill,
.type-settings {
  font-size: 12px;
}


/* Assistant */

.assistant-message {
  font-size: 14px;
  line-height: 1.45;
}

.assistant-message.system,
.assistant-destination,
.assistant-privacy {
  font-size: 12px;
}


/* Mobile */

.mobile-record span {
  font-size: 14px;
}

.mobile-record small {
  font-size: 12px;
  line-height: 1.4;
}

/* Mobility Nest sidebar readability refinement */

.nav-item {
  color: #3f4d45;
  font-weight: 500;
}

.nav-item:hover {
  color: #1e683c;
}

/* Nested fleet/operator navigation */
.sidebar .nav-item + .nav-item,
.sidebar a {
  text-rendering: optimizeLegibility;
}

/* Pale submenu links */
.sidebar .nav-subitem,
.sidebar .subnav a,
.sidebar .submenu a {
  color: #55645b;
  font-size: 14px;
  font-weight: 500;
}

/* Selected submenu */
.sidebar .nav-subitem.active,
.sidebar .subnav a.active,
.sidebar .submenu a.active {
  color: #1e683c;
  background: #eaf4ed;
  font-weight: 600;
}

/* Section labels */
.nav-label,
.eyebrow {
  letter-spacing: .055em;
}

/* Mobility Nest sidebar refinement completion */

.sidebar .nav-subitem.active,
.sidebar .subnav a.active,
.sidebar .submenu a.active {
  color: #1e683c;
  background: #eaf4ed;
  font-weight: 600;
}

.nav-label,
.eyebrow {
  letter-spacing: .055em;
}