/* ============================================================
   NAVITA ONBOARD MANAGER — v1 Design System
   Last updated: 2026-03
   ============================================================ */

/* ── 0. UTILITY ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Sidebar */
  --sidebar-w: 420px;
  --sidebar-collapsed-w: 100px;
  --topbar-h: 52px;

  /* Brand palette */
  --clr-sidebar:        #0b1f3c;
  --clr-sidebar-hover:  rgba(255,255,255,.08);
  --clr-sidebar-active: #2563eb;
  --clr-accent:         #2563eb;
  --clr-accent-h:       #1d4ed8;
  --clr-accent-light:   #eff6ff;

  /* Surfaces */
  --clr-surface: #f1f5f9;
  --clr-card:    #ffffff;
  --clr-topbar:  #ffffff;
  --clr-border:  #e2e8f0;

  /* Typography */
  --clr-text:   #0f172a;
  --clr-text-2: #475569;
  --clr-text-3: #94a3b8;

  /* Status colours */
  --clr-success:    #16a34a;
  --clr-success-bg: #dcfce7;
  --clr-success-br: #bbf7d0;
  --clr-warning:    #d97706;
  --clr-warning-bg: #fef3c7;
  --clr-warning-br: #fde68a;
  --clr-danger:     #dc2626;
  --clr-danger-bg:  #fee2e2;
  --clr-danger-br:  #fecaca;
  --clr-info:       #0284c7;
  --clr-info-bg:    #e0f2fe;
  --clr-info-br:    #bae6fd;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.12);

  /* Transition */
  --t: 160ms ease;
}

/* ── 2. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--clr-surface);
  color: var(--clr-text);
  height: 100%;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* ── Cursor control: default arrow everywhere ── */
  cursor: default;
}

/* ── 2a. CURSOR & SELECTION CONTROL ─────────────────────────── */
/*
 * ROOT CAUSE: browsers show a blinking I-beam whenever text is
 * selectable, regardless of the CSS cursor property.
 * Fix: block text-selection globally, restore only on real inputs.
 */

/* 1. Block ALL text selection sitewide — eliminates the blinking caret */
html, body, * {
  -webkit-user-select: none !important;
  -moz-user-select:    none !important;
  -ms-user-select:     none !important;
  user-select:         none !important;
}

/* 2. Restore text selection & I-beam cursor on real typing fields only */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input:not([type]),
textarea,
[contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select:    text !important;
  -ms-user-select:     text !important;
  user-select:         text !important;
  cursor:              text !important;
}

/* 3. Arrow cursor on all non-interactive elements */
* { cursor: default; }

/* 4. Pointer on all clickable elements */
button,
a,
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="checkbox"],
[role="switch"],
select,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="range"],
label[for],
summary,
[onclick],
[data-nav],
[tabindex]:not([tabindex="-1"]),
.clickable {
  cursor: pointer !important;
}

/* 5. Disabled state */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[disabled],
[aria-disabled="true"] {
  cursor: not-allowed !important;
}

/* 6. Drag handles */
[draggable="true"]        { cursor: grab !important; }
[draggable="true"]:active { cursor: grabbing !important; }

a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 3. LAYOUT SHELL ───────────────────────────────────────── */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── 4. SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--clr-sidebar);
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--t), min-width var(--t);
  flex-shrink: 0;
  z-index: 100;
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.10);
  padding: 4px;
  flex-shrink: 0;
}
.brand-text { overflow: hidden; }
.brand-name {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-sub {
  font-size: 1.0rem;
  opacity: .75;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 1px;
}

/* Nav */
.nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.nav-title {
  font-size: 1.36rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .45;
  padding: 8px 6px 4px;
  white-space: nowrap;
}

.nav ul { list-style: none; }
#navList {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Top-level nav item */
#navList > li {
  font-size: 1.36rem;
  padding: 12px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background var(--t);
  white-space: normal;
}
#navList > li:hover  { background: var(--clr-sidebar-hover); }
#navList > li.active { background: var(--clr-sidebar-active); }

/* Icons */
.nav-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255,255,255,.85);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#navList > li.active .nav-icon svg { stroke: #fff; }

.nav-label {
  font-size: 1.34rem;
  line-height: 1.25;
  overflow: hidden;
  white-space: normal;
}

/* ── Expandable parent items ── */
li.nav-parent {
  display: block !important;
  padding: 0 !important;
  margin-bottom: 1px;
}

.nav-parent-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-sm);
  font-size: 1.34rem;
  transition: background var(--t);
}
.nav-parent-btn:hover { background: var(--clr-sidebar-hover); }

.nav-caret {
  margin-left: auto;
  opacity: .55;
  font-size: 1.4rem;
  transition: transform var(--t);
  flex-shrink: 0;
}
.nav-parent.open > .nav-parent-btn .nav-caret { transform: rotate(90deg); }

.nav-parent > .nav-children {
  display: none;
  list-style: none;
  padding: 2px 0 6px 0;
}
.nav-parent.open > .nav-children { display: block; }

/* Child module rows */
.nav-children > li[data-module] {
  display: block !important;
  width: 100%;
  cursor: pointer;
  padding: 7px 8px 7px 36px;
  border-radius: var(--r-sm);
  font-size: 1.64rem;
  white-space: normal;
  line-height: 1.3;
  transition: background var(--t);
}
.nav-children > li[data-module]:hover  { background: rgba(255,255,255,.07); }
.nav-children > li[data-module].active { background: rgba(255,255,255,.14); }

/* Nested parent inside children */
.nav-children > li.nav-parent { display: block !important; padding: 0 !important; }
.nav-children > li.nav-parent > .nav-parent-btn { padding: 7px 8px 7px 28px; font-size: 1.64rem; }

/* Divider */
.nav-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 5px 6px;
  pointer-events: none;
}

/* Logout */
#logoutBtn {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 6px;
  margin-bottom: 6px;
  font-size: .84rem;
  padding: 8px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background var(--t);
  flex-shrink: 0;
}
#logoutBtn:hover { background: rgba(220,38,38,.2); color: #fca5a5; }
#logoutBtn .nav-icon svg { stroke: rgba(255,255,255,.7); }
#logoutBtn:hover .nav-icon svg { stroke: #fca5a5; }

/* Sidebar collapsed */
.sidebar.collapsed { width: var(--sidebar-collapsed-w); min-width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-caret,
.sidebar.collapsed .nav-title,
.sidebar.collapsed .nav-children { display: none !important; }
.sidebar.collapsed .nav-icon { margin: 0 auto; }
.sidebar.collapsed .nav-parent-btn,
.sidebar.collapsed #navList > li { justify-content: center; padding: 8px; }
.sidebar.collapsed #logoutBtn { justify-content: center; padding: 8px; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 12px 8px; }

/* Sidebar — suppress caret on nav items */
.sidebar, .sidebar * { caret-color: transparent; }
.sidebar *:focus { outline: none; }
/* Note: user-select: none is handled globally in section 2a */

/* ── 5. TOPBAR ─────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--clr-topbar);
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 14px;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sidebar-toggle-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--clr-text-2);
  flex-shrink: 0;
  transition: background var(--t);
}
.sidebar-toggle-btn:hover { background: var(--clr-surface); color: var(--clr-text); }
.sidebar-toggle-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.topbar-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--r-lg);
  border: 1px solid var(--clr-border);
  cursor: default;
  background: var(--clr-surface);
}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--clr-accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.user-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.2;
  white-space: nowrap;
}
.user-role-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--clr-accent-light);
  color: var(--clr-accent);
}

/* ── 6. MAIN CONTENT AREA ──────────────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 32px;
  background: linear-gradient(170deg, #1e4976 0%, #0a1e3d 100%);
}

/* ── Elements that sit DIRECTLY on the dark background ── */
.module-subtitle,
.main > div > p,
.main > div > span:not(.badge):not(.chip),
.main > div > h1,
.main > div > h2,
.main > div > h3,
.main > div > h4,
.main > div > label {
  color: rgba(255,255,255,0.90);
}

.module-subtitle {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 16px;
  min-height: 0;
}
.module-subtitle:empty { margin-bottom: 0; }

/* Main content card */
.module-content {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
  font-size: .875rem;
}

/* ── 7. MODULE CARDS (placeholder grid) ────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.module-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--clr-surface);
}
.module-card h3 { font-size: .9rem; margin-bottom: 6px; }
.module-card p  { font-size: .8rem; color: var(--clr-text-2); }

/* ── 8. BUTTON SYSTEM ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), opacity var(--t), transform var(--t);
  font-family: inherit;
}
.btn:hover   { opacity: .92; transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary   { background: var(--clr-accent);  color: #fff;  border-color: var(--clr-accent); }
.btn-primary:hover { background: var(--clr-accent-h); border-color: var(--clr-accent-h); opacity:1; }

.btn-secondary { background: var(--clr-card); color: var(--clr-text); border-color: var(--clr-border); }
.btn-secondary:hover { background: var(--clr-surface); opacity:1; }

.btn-success { background: var(--clr-success); color: #fff; border-color: var(--clr-success); }
.btn-danger  { background: var(--clr-danger);  color: #fff; border-color: var(--clr-danger);  }
.btn-warning { background: var(--clr-warning); color: #fff; border-color: var(--clr-warning); }

.btn-sm { height: 30px; padding: 0 12px; font-size: .78rem; }
.btn-lg { height: 42px; padding: 0 22px; font-size: .9rem; }

/* Keep legacy classes working */
.fleet-add-btn   { @apply .btn; background: #1e3a8a; color:#fff; border:none; padding:8px 16px; border-radius:var(--r-sm); font-weight:600; cursor:pointer; }
.fleet-saveall-btn { background: var(--clr-success) !important; color:#fff !important; }
.btn-primary, .fleet-add-btn { background: var(--clr-accent); color:#fff; border:none; padding:7px 29px; border-radius:var(--r-sm); font-weight:600; cursor:pointer; font-size:.84rem; }
.btn-primary:hover, .fleet-add-btn:hover { background: var(--clr-accent-h); transform:translateY(-1px); }

/* ── 9. TABLE SYSTEM ───────────────────────────────────────── */
.table-wrap, .fleet-table-wrap, .cert-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--clr-border); }

table { width: 100%; border-collapse: collapse; font-size: .82rem; }

.data-table, .fleet-table, .cert-table, .settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.data-table th, .fleet-table th, .cert-table th, .settings-table th {
  background: #f8fafc;
  padding: 9px 12px;
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clr-text-2);
  border-bottom: 1px solid var(--clr-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table td, .fleet-table td, .cert-table td, .settings-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: var(--clr-text);
}
.data-table tr:last-child td, .fleet-table tr:last-child td,
.cert-table tr:last-child td, .settings-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover, .fleet-table tbody tr:hover,
.cert-table tbody tr:hover, .settings-table tbody tr:hover { background: #f8fafc; }

.fleet-table { width: max-content; min-width: 100%; table-layout: auto; }
.fleet-table td, .fleet-table th { white-space: nowrap; }
.fleet-empty, .cert-empty { text-align: center; color: var(--clr-text-3); padding: 32px; font-size: .85rem; }

/* ── 10. FORMS & INPUTS ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select, textarea {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-card);
  color: var(--clr-text);
  font-family: inherit;
  font-size: .84rem;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  caret-color: var(--clr-text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }

label { font-size: .8rem; font-weight: 500; color: var(--clr-text-2); }

.form-row { display: flex; flex-direction: column; gap: 4px; }

/* Inline cell inputs (fleet table) */
.fleet-cell-input {
  width: auto;
  min-width: 150px;
  border: 1px solid transparent;
  background: transparent;
  font-size: .81rem;
  border-radius: 4px;
  padding: 3px 6px;
  caret-color: var(--clr-text);
}
.fleet-cell-input:focus {
  border-color: var(--clr-accent);
  background: var(--clr-accent-light);
  box-shadow: none;
  outline: none;
}

/* ── 11. STATUS BADGES ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .02em;
}
.badge-success  { background: var(--clr-success-bg); color: var(--clr-success); border: 1px solid var(--clr-success-br); }
.badge-warning  { background: var(--clr-warning-bg); color: var(--clr-warning); border: 1px solid var(--clr-warning-br); }
.badge-danger   { background: var(--clr-danger-bg);  color: var(--clr-danger);  border: 1px solid var(--clr-danger-br);  }
.badge-info     { background: var(--clr-info-bg);    color: var(--clr-info);    border: 1px solid var(--clr-info-br);    }
.badge-neutral  { background: #f1f5f9; color: var(--clr-text-2); border: 1px solid var(--clr-border); }

/* Legacy cert status cells */
.cert-status-cell { font-weight: 600; text-align: center; border-radius: 4px; }
.cert-status-cell.status-30, .cert-status-cell.due     { background: var(--clr-warning-bg); color: var(--clr-warning); }
.cert-status-cell.status-15                             { background: #fef3c7; color: #b45309; }
.cert-status-cell.status-7                              { background: var(--clr-danger-bg);  color: #9f1239; }
.cert-status-cell.status-today                          { background: #fde8ec; color: #be123c; }
.cert-status-cell.status-expired, .cert-status-cell.expired { background: var(--clr-danger-bg); color: var(--clr-danger); }
.cert-status-cell.valid                                 { background: var(--clr-success-bg); color: var(--clr-success); }

/* ── 12. CARDS ─────────────────────────────────────────────── */
.card {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
.card-header { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--clr-border); }
.card-header h3 { font-size: .95rem; font-weight: 600; }
.card-header p  { font-size: .8rem; color: var(--clr-text-2); margin-top: 3px; }

/* ── 13. TOAST NOTIFICATIONS ───────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: toastIn .25s ease forwards;
  font-size: .84rem;
  line-height: 1.4;
}
.toast.hiding { animation: toastOut .2s ease forwards; }

.toast-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; }
.toast-title { font-weight: 600; font-size: .82rem; margin-bottom: 2px; }
.toast-msg   { color: var(--clr-text-2); font-size: .81rem; }
.toast-close {
  background: none; border: none; cursor: pointer; color: var(--clr-text-3);
  font-size: 1rem; line-height: 1; padding: 0; flex-shrink: 0;
  transition: color var(--t);
}
.toast-close:hover { color: var(--clr-text); }

.toast-success { border-left: 4px solid var(--clr-success); }
.toast-error   { border-left: 4px solid var(--clr-danger);  }
.toast-warning { border-left: 4px solid var(--clr-warning); }
.toast-info    { border-left: 4px solid var(--clr-info);    }

@keyframes toastIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0); }    to { opacity:0; transform:translateY(8px); } }

/* ── 14. LOADING SPINNER ───────────────────────────────────── */
.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--clr-text-3);
  font-size: .84rem;
  gap: 10px;
}
.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--clr-border);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 15. LOGIN PAGE ────────────────────────────────────────── */
body.login { background: #040c1a; }

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(
    to bottom,
    #1e4976 0%,
    #0e2647 46%,
    #071428 54%,
    #040c1a 100%
  );
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 630px;
  background: linear-gradient(
    to bottom,
    rgba(82,172,220,.92)  0%,
    rgba(38,100,165,.95) 50%,
    rgba(7, 18, 40,.98) 100%
  );
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 48px 42px 36px;
  box-shadow: 0 24px 56px rgba(0,0,0,.55);
  color: #f3f4f6;
  text-align: center;
  backdrop-filter: blur(8px);
}
.login-logo {
  width: 120px; height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 20px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.07);
  padding: 12px;
}
.login-title    { font-size: 2rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.login-subtitle { font-size: 1.3rem; opacity: .65; margin-bottom: 33px; }
.login-form     { display: grid; gap: 21px; text-align: left; }
.login-label    { font-size: 1.25rem; font-weight: 600; color: #ffffff; display: grid; gap: 8px; }

/* Password wrapper with eye toggle */
.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input-wrap input {
  padding-right: 54px !important;
}
.login-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  transition: color var(--t), background var(--t);
  line-height: 1;
}
.login-eye-btn:hover {
  color: #000;
  background: rgba(255,255,255,.18);
}
.login-eye-btn svg   { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.login-form input {
  width: 100%;
  height: 68px;
  padding: 0 21px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: #f9fafb;
  font-size: 1.35rem;
  outline: none;
  caret-color: #f9fafb;
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
  border-color: rgba(37,99,235,.8);
  box-shadow: 0 0 0 3px rgba(37,99,235,.22);
}
.login-btn {
  height: 70px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--clr-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background var(--t);
  letter-spacing: .02em;
}
.login-btn:hover { background: var(--clr-accent-h); }
.login-msg  { min-height: 20px; font-size: 1.15rem; margin-top: -4px; }
.login-note { margin: 21px 0 0; font-size: 1.15rem; opacity: .5; }

/* ── 16. FLEET MODULE ──────────────────────────────────────── */
#fleetModule {
  padding: 4px;
}

.fleet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.fleet-header p { font-size: .84rem; color: var(--clr-text-2); margin: 0; }

.fleet-form {
  background: var(--clr-accent-light);
  border: 1px solid #bfdbfe;
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 14px;
  font-size: .84rem;
}
.fleet-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.fleet-form label { display: flex; flex-direction: column; font-size: .78rem; }
.fleet-form input { margin-top: 3px; }

.fleet-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.fleet-btn {
  min-width: 130px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: none;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}
.fleet-btn:hover { transform: translateY(-1px); }
.fleet-btn.primary   { background: var(--clr-accent); color: #fff; }
.fleet-btn.primary:hover { background: var(--clr-accent-h); }
.fleet-btn.secondary { background: #e2e8f0; color: var(--clr-text); }
.fleet-btn.secondary:hover { background: #cbd5e1; }
.fleet-btn.danger    { background: var(--clr-danger); color: #fff; }
.fleet-btn.danger:hover  { background: #b91c1c; }
.fleet-btn:disabled  { opacity: .5; cursor: not-allowed; transform: none; }
.fleet-saveall-btn   { background: var(--clr-success); color: #fff; }

.fleet-top-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

.fleet-upload-btn {
  font-size: .75rem; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--clr-border); background: var(--clr-card); cursor: pointer;
}
.fleet-remove-file-btn {
  font-size: .75rem; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--clr-danger-br); background: var(--clr-danger-bg); cursor: pointer; margin-left: 4px;
}
.fleet-file-name { font-size: .72rem; color: var(--clr-text-2); }
.fleet-actions { white-space: nowrap; }
.fleet-actions button {
  font-size: .78rem; margin-right: 3px; padding: 4px 8px;
  border-radius: var(--r-sm); border: 1px solid var(--clr-border); background: var(--clr-card); cursor: pointer;
  transition: background var(--t);
}
.fleet-actions button:hover { background: var(--clr-surface); }

/* ── 17. CERTIFICATE MODULE ────────────────────────────────── */
.cert-tabs {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
.cert-header { margin-bottom: 14px; }
.cert-subtext { font-size: .82rem; color: var(--clr-text-2); }
.cert-tab-buttons { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.cert-tab-btn {
  padding: 6px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--clr-border); background: var(--clr-surface);
  cursor: pointer; font-size: .84rem; transition: all var(--t); font-family: inherit;
}
.cert-tab-btn.active { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); }
.cert-tab-panel { display: none; }
.cert-tab-panel.active { display: block; }

.cert-form { margin-bottom: 18px; }
.cert-form-row, .cert-row-inputs {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px;
}
.cert-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .78rem; font-weight: 500; color: var(--clr-text);
}
.cert-form input, .cert-form select { min-width: 150px; }
.cert-row-inputs input[name="certificate"] { min-width: 260px; }
.cert-row-button { margin-bottom: 16px; }
.cert-list-actions { margin-bottom: 16px; }
.cert-import-form { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.cert-open-btn {
  font-size: .75rem; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--clr-border); background: var(--clr-card); cursor: pointer;
}

.vcert-page-container {
  background: var(--clr-card);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--clr-border);
}
.vcert-form-card {
  background: var(--clr-surface);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--clr-border);
}

/* ── Certificate action buttons ────────────────────────────── */
.cert-attach-cell { display: flex; gap: 4px; align-items: center; }
.cert-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s, box-shadow .15s;
  background: transparent;
}
.cert-btn:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.cert-btn svg { width: 14px; height: 14px; pointer-events: none; }

.cert-pdf-btn, .attach-pdf-btn { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
.cert-pdf-btn:hover, .attach-pdf-btn:hover { background: #dbeafe; border-color: #93c5fd; }

.cert-open-pdf-btn { color: #059669; border-color: #a7f3d0; background: #ecfdf5; }
.cert-open-pdf-btn:hover { background: #d1fae5; border-color: #6ee7b7; }

.cert-remove-pdf-btn { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.cert-remove-pdf-btn:hover { background: #fef3c7; border-color: #fcd34d; }

.cert-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid #fecaca; background: #fef2f2; color: #dc2626;
  cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.cert-delete-btn:hover { background: #fee2e2; border-color: #fca5a5; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.cert-delete-btn svg { width: 14px; height: 14px; pointer-events: none; }

/* Office cert / certMgmt */
#cert-shore, #certMgmtModule {
  background: var(--clr-card);
  padding: 4px;
  border-radius: var(--r-md);
}

/* ── 18. COMPANY FORMS MODULE ──────────────────────────────── */
#companyFormsModule input[type="text"],
#companyFormsModule input[type="file"] {
  font-size: .82rem;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-card);
  min-width: 120px;
}
#companyFormsModule input[type="text"]:focus {
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* ── 19. SETTINGS MODULE ───────────────────────────────────── */
.settings-wrapper   { max-width: 1100px; margin: 0 auto; }
.settings-header    { margin-bottom: 18px; }
.settings-header h2 { font-size: 1.2rem; margin-bottom: 4px; }
.settings-header p  { font-size: .84rem; color: var(--clr-text-2); }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width:900px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-card {
  background: var(--clr-card);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
}
.settings-card h3 { margin-bottom: 12px; font-size: 1rem; font-weight: 600; }

.settings-form { display: grid; gap: 12px; }
.settings-form input, .settings-form select { height: 36px; }

.password-row { display: flex; align-items: center; gap: 8px; }
.show-pass { font-size: .75rem; white-space: nowrap; color: var(--clr-text-2); cursor: pointer; }
.form-msg { font-size: .78rem; margin-top: 4px; }

/* ── 20. HSQE MODULE ───────────────────────────────────────── */
/* Incident form */
.incident-form-wrap { max-width: 760px; }
.incident-section { margin-bottom: 20px; }
.incident-section h4 { font-size: .85rem; font-weight: 600; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; border-bottom: 1px solid var(--clr-border); padding-bottom: 6px; }

/* ── HSQE DASHBOARD ─────────────────────────────────────────── */
.hsqe-dashboard {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-bottom: 10px;
}

.kpi-card {
  padding: 15px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 70px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.kpi-card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.kpi-card span { font-size: 24px; font-weight: 700; margin-top: 5px; }

.kpi-nearmiss      { background: #1976d2; }
.kpi-incidents     { background: #5e35b1; }
.kpi-ltif          { background: #d32f2f; }
.kpi-trcf          { background: #f57c00; }
.kpi-fatality      { background: #212121; }
.kpi-marinecasualty{ background: #7b1fa2; }
.kpi-pollution     { background: #2e7d32; }
.kpi-offhire       { background: #6d4c41; }
.kpi-cargodamage   { background: #f9a825; }

.hsqe-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 35px;
}
.hsqe-chart-box {
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.hsqe-chart-box h4 { margin-bottom: 15px; color: #1f4e79; font-weight: 600; }
.hsqe-chart-box canvas { height: 280px !important; }

/* ── AUDIT TABS ─────────────────────────────────────────────── */
.audit-tab-header { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }

.audit-tab-btn {
  background: #2f4f8f;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  opacity: .6;
  transition: .2s;
}
.audit-tab-btn.active { opacity: 1; background: #1f3a75; }
.audit-tab-btn:hover  { opacity: .85; }

.audit-page         { display: none; }
.audit-page.active  { display: block; }

/* ── AUDIT SUB-TABS ─────────────────────────────────────────── */
.audit-subtab-header {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  flex-wrap: wrap;
}
.audit-subtab-btn {
  padding: 8px 16px;
  border: none;
  background: #f4f6f8;
  cursor: pointer;
  font-weight: 600;
  border-radius: 4px 4px 0 0;
}
.audit-subtab-btn.active {
  background: #ffffff;
  border-bottom: 3px solid #0b4c8c;
  color: #0b4c8c;
}
.audit-subtab-content        { display: none; padding: 10px; background: #fff; border-radius: 4px; }
.audit-subtab-content.active { display: block; }

/* ── AUDIT PLANNER ──────────────────────────────────────────── */
.planner-wrap { overflow-x: auto; }
.planner-header { display: flex; gap: 15px; align-items: flex-end; margin-bottom: 15px; }
.planner-header label { font-size: 12px; color: #555; }
.planner-header input { padding: 6px; width: 100px; }

.planner-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.planner-table th,
.planner-table td { border: 1px solid #ddd; padding: 6px; text-align: center; user-select: none; -webkit-user-select: none; }
.planner-table th { background: #0b4c8c; color: #fff; }
.planner-table td { cursor: pointer; background: #f9fbfd; }
.planner-table td:hover { background: #dbe8ff; }
.planner-selected { outline: 2px solid #1f3a75; background: #cfe2ff !important; }
#plannerContainer { min-height: 300px; }

.planner-cell-planned   { background: #bbdefb !important; }
.planner-cell-completed { background: #c8e6c9 !important; }

/* ── 21. MODULE SHARED COMPONENTS ──────────────────────────── */
.module-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.module-toolbar .spacer { flex: 1; }

/* Slide-panel (inline form) */
.slide-panel {
  background: #f8fafc;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 0;
  margin-top: 14px;
  overflow: hidden;
}
.slide-panel.hidden { display: none; }
.slide-panel > h4 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-text);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}
.slide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #1e3a5f;
  border-bottom: 1px solid #15304f;
}
.slide-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .02em;
}
.slide-panel-body {
  padding: 20px 24px;
}
.btn-icon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.btn-icon-close:hover { background: rgba(255,255,255,0.25); }
/* Legacy .btn-icon fallback */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; border: none;
  background: rgba(255,255,255,0.12); color: #ffffff;
  font-size: 18px; cursor: pointer; transition: background .15s;
}
.btn-icon:hover { background: rgba(255,255,255,0.25); }

/* Form grid inside slide-panel */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 16px;
}
.form-grid .span2 { grid-column: span 2; }
.form-grid .span3 { grid-column: 1 / -1; }
.form-grid .form-row { display: flex; flex-direction: column; gap: 3px; }
.form-grid label { font-size: .77rem; font-weight: 600; color: var(--clr-text-2); }
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  font-size: .83rem;
  font-family: inherit;
  background: var(--clr-card);
  color: var(--clr-text);
  box-sizing: border-box;
}
.form-grid textarea { min-height: 68px; resize: vertical; }
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
}

/* Risk level badges */
.risk-critical { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; padding:2px 8px; border-radius:4px; font-size:.74rem; font-weight:700; white-space:nowrap; display:inline-block; }
.risk-high      { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; padding:2px 8px; border-radius:4px; font-size:.74rem; font-weight:700; white-space:nowrap; display:inline-block; }
.risk-medium    { background:#fffbeb; color:#b45309; border:1px solid #fde68a; padding:2px 8px; border-radius:4px; font-size:.74rem; font-weight:700; white-space:nowrap; display:inline-block; }
.risk-low       { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; padding:2px 8px; border-radius:4px; font-size:.74rem; font-weight:700; white-space:nowrap; display:inline-block; }

/* Inline status chips */
.chip             { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.74rem; font-weight:600; white-space:nowrap; }
.chip-open        { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.chip-closed      { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.chip-pending     { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }
.chip-approved    { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.chip-rejected    { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.chip-implemented { background:#f5f3ff; color:#6d28d9; border:1px solid #ddd6fe; }
.chip-active      { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.chip-review      { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }
.chip-archived    { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
.chip-draft       { background:#f8fafc; color:#475569; border:1px solid #cbd5e1; }
.chip-verified    { background:#f0f9ff; color:#0369a1; border:1px solid #bae6fd; }
.chip-submitted   { background:#faf5ff; color:#7c3aed; border:1px solid #ddd6fe; }
.chip-returned    { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }

/* ── RA Module tabs ─────────────────────────────────────────── */
.ra-wrap { }
.ra-tab-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.ra-tab-btn {
  padding:7px 16px; border-radius:var(--r-sm); border:1px solid var(--clr-border);
  background:var(--clr-surface); cursor:pointer; font-size:.84rem;
  font-family:inherit; font-weight:500; transition:all .15s;
}
.ra-tab-btn:hover  { background:var(--clr-card); border-color:var(--clr-accent); }
.ra-tab-btn.active { background:var(--clr-accent); color:#fff; border-color:var(--clr-accent); }
.ra-tab-page       { display:none; }
.ra-tab-page.active{ display:block; }

/* RA Guidelines content */
.ra-guide-wrap { max-width:900px; }
.ra-guide-section { margin-bottom:22px; }
.ra-guide-section h3 { font-size:.95rem; font-weight:700; color:var(--clr-accent); margin-bottom:8px; padding-bottom:5px; border-bottom:2px solid var(--clr-border); }
.ra-guide-section p, .ra-guide-section li { font-size:.84rem; color:var(--clr-text); line-height:1.7; }
.ra-guide-section ul { padding-left:20px; margin:6px 0; }
.ra-risk-matrix { border-collapse:collapse; font-size:.78rem; margin:10px 0; }
.ra-risk-matrix th, .ra-risk-matrix td { border:1px solid #cbd5e1; padding:5px 10px; text-align:center; }
.ra-risk-matrix th { background:#1e3a5f; color:#fff; }
.ra-workflow-steps { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; align-items:center; }
.ra-workflow-step  { background:var(--clr-card); border:1px solid var(--clr-border); border-radius:var(--r-sm); padding:6px 14px; font-size:.8rem; font-weight:600; }

/* RA template card grid */
.ra-tmpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:12px; }
.ra-tmpl-card {
  background:var(--clr-card); border:1px solid var(--clr-border); border-radius:var(--r-md);
  padding:14px 16px; cursor:pointer; transition:box-shadow .15s, border-color .15s;
}
.ra-tmpl-card:hover { box-shadow:var(--shadow-md); border-color:var(--clr-accent); }
.ra-tmpl-card .cat  { font-size:.72rem; font-weight:700; color:var(--clr-accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.ra-tmpl-card .ttl  { font-size:.88rem; font-weight:600; color:var(--clr-text); margin-bottom:6px; }
.ra-tmpl-card .desc { font-size:.78rem; color:var(--clr-text-2); margin-bottom:8px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ra-tmpl-card .meta { font-size:.74rem; color:var(--clr-text-3); display:flex; gap:10px; }

/* RA item rows inside detail/edit panel */
.ra-item-row {
  border:1px solid var(--clr-border); border-radius:var(--r-sm);
  padding:12px 14px; margin-bottom:10px; background:var(--clr-card);
  position:relative;
}
.ra-item-row .ra-item-hdr { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ra-item-row .step-badge { background:var(--clr-accent); color:#fff; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; flex-shrink:0; }
.ra-item-row .del-item-btn { margin-left:auto; }
.ra-score-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:4px; padding:2px 8px; font-size:.74rem; font-weight:700; white-space:nowrap; }

/* RA detail view (read-only) */
.ra-detail-wrap { border:1px solid var(--clr-border); border-radius:var(--r-md); overflow:hidden; margin-top:14px; }
.ra-detail-wrap.hidden { display:none; }
.ra-detail-header { background:var(--clr-accent); color:#fff; padding:11px 18px; display:flex; align-items:center; gap:12px; }
.ra-detail-body { padding:18px; }
.ra-meta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px 20px; margin-bottom:14px; }
.ra-meta-grid dt { font-size:.72rem; font-weight:700; color:var(--clr-text-2); text-transform:uppercase; letter-spacing:.04em; }
.ra-meta-grid dd { font-size:.84rem; color:var(--clr-text); margin:2px 0 0; }

/* RA hazard table inside detail */
.ra-hazard-table { width:100%; border-collapse:collapse; font-size:.8rem; margin-top:10px; }
.ra-hazard-table th { background:#1e3a5f; color:#fff; padding:6px 8px; text-align:left; font-size:.75rem; white-space:nowrap; }
.ra-hazard-table td { border:1px solid #e2e8f0; padding:6px 8px; vertical-align:top; }
.ra-hazard-table tr:nth-child(even) td { background:#f8fafc; }

/* Export toolbar */
.ra-export-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ra-export-bar span { font-size:.78rem; color:var(--clr-text-2); font-weight:500; }

/* Workflow info bar inside RA detail */
.ra-workflow-bar { background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:12px; display:flex; flex-wrap:wrap; gap:12px 24px; font-size:.8rem; }
.ra-workflow-bar dt { font-weight:700; color:var(--clr-text-2); }
.ra-workflow-bar dd { color:var(--clr-text); }

/* Detail panel (vessel audit findings) */
.detail-panel { margin-top:20px; border:1px solid var(--clr-border); border-radius:var(--r-md); overflow:hidden; }
.detail-panel.hidden { display:none; }
.detail-header {
  background: var(--clr-accent);
  color: #fff;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.detail-header h4 { margin:0; font-size:.9rem; font-weight:600; flex:1; }
.detail-body { padding:16px 18px; }
.detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 20px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--clr-border);
}
.detail-meta > div { display:flex; flex-direction:column; gap:2px; }
.detail-meta dt { font-size:.72rem; font-weight:600; color:var(--clr-text-2); text-transform:uppercase; letter-spacing:.04em; }
.detail-meta dd { font-size:.83rem; color:var(--clr-text); margin:0; }

/* ── 22. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: -100%; top: 0; bottom: 0; z-index: 200; transition: left var(--t); }
  .sidebar.mobile-open { left: 0; }
  .main-wrapper { width: 100%; }
  .main { padding: 14px 16px 24px; }
  .topbar { padding: 0 14px; }
  .settings-grid { grid-template-columns: 1fr; }
  .fleet-btn-group { gap: 6px; }
  .fleet-btn { min-width: 0; }
}