/* ==========================================================================
   AETHON MARINE — Theme layer
   Loaded AFTER adminlte.min.css so it cascades last and wins.
   Presentation only. No markup, logic, or data behavior depends on this file.

   Palette: Abyssal Navy chrome · Verdigris teal accent · signal amber warning
   Register: product (data-dense operational admin) — earned familiarity.
   ========================================================================== */

:root {
  /* --- Brand / chrome (deep sea navy) --- */
  --ae-navy-900: oklch(0.20 0.035 232);   /* deepest sidebar / topbar base */
  --ae-navy-850: oklch(0.24 0.035 232);
  --ae-navy-800: oklch(0.28 0.034 232);   /* hover / elevated chrome */
  --ae-navy-700: oklch(0.34 0.032 232);

  /* --- Accent (verdigris / sea glass) --- */
  --ae-teal-700: oklch(0.48 0.10 190);
  --ae-teal-600: oklch(0.55 0.11 190);    /* primary hover */
  --ae-teal-500: oklch(0.62 0.11 190);    /* primary action / selection */
  --ae-teal-400: oklch(0.72 0.10 190);
  --ae-teal-050: oklch(0.96 0.02 190);    /* teal tint surface */

  /* --- Semantic --- */
  --ae-amber-500: oklch(0.72 0.14 65);    /* warning / signal */
  --ae-amber-050: oklch(0.96 0.03 75);
  --ae-green-500: oklch(0.64 0.13 155);   /* success / active */
  --ae-green-050: oklch(0.96 0.03 155);
  --ae-red-500:   oklch(0.58 0.17 25);    /* danger / error */
  --ae-red-050:   oklch(0.96 0.03 25);
  --ae-blue-500:  oklch(0.60 0.10 240);   /* info */
  --ae-blue-050:  oklch(0.96 0.03 240);

  /* --- Neutrals, tinted cool toward navy (no pure #000/#fff) --- */
  --ae-surface:      oklch(0.975 0.004 232);  /* app content background */
  --ae-card:         oklch(0.995 0.002 232);  /* raised surfaces / cards */
  --ae-card-2:       oklch(0.985 0.003 232);  /* subtle striped / hover */
  --ae-border:       oklch(0.905 0.006 232);
  --ae-border-soft:  oklch(0.935 0.005 232);
  --ae-text:         oklch(0.30 0.02 235);    /* primary text (near-navy) */
  --ae-text-muted:   oklch(0.52 0.015 235);
  --ae-text-faint:   oklch(0.64 0.012 235);
  --ae-on-dark:      oklch(0.93 0.008 232);   /* text on navy chrome */
  --ae-on-dark-mut:  oklch(0.72 0.018 232);

  /* --- Elevation --- */
  --ae-shadow-sm: 0 1px 2px oklch(0.20 0.03 232 / 0.06), 0 1px 3px oklch(0.20 0.03 232 / 0.05);
  --ae-shadow-md: 0 2px 6px oklch(0.20 0.03 232 / 0.07), 0 6px 18px oklch(0.20 0.03 232 / 0.06);
  --ae-shadow-lg: 0 8px 30px oklch(0.20 0.03 232 / 0.12);

  /* --- Radii / motion --- */
  --ae-r-sm: 6px;
  --ae-r-md: 10px;
  --ae-r-lg: 14px;
  --ae-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart */
  --ae-dur: 180ms;

  --ae-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body,
.wrapper,
.content-wrapper,
.login-page,
.register-page {
  font-family: var(--ae-font);
  color: var(--ae-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

body { font-size: 0.9rem; line-height: 1.5; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ae-font);
  font-weight: 650;
  color: var(--ae-text);
  letter-spacing: -0.018em;
}

/* Content header title (was forced white for the old dark bg image) */
.content-header h1 { font-size: 1.45rem; font-weight: 700; }
.content-wrapper .content-header .text-dark { color: var(--ae-text) !important; }

a { color: var(--ae-teal-600); }
a:hover { color: var(--ae-teal-700); }

/* ==========================================================================
   App background — retire the busy photo, use a calm tinted surface
   ========================================================================== */
.content-wrapper {
  background: var(--ae-surface) !important;
}

/* faint depth so the flat surface doesn't read as bare */
.content-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 100% -5%, oklch(0.62 0.11 190 / 0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, oklch(0.30 0.05 232 / 0.05), transparent 55%);
}
.content-wrapper > * { position: relative; z-index: 1; }

/* ==========================================================================
   Sidebar (deep navy chrome)
   ========================================================================== */
.main-sidebar,
.main-sidebar .sidebar,
aside.main-sidebar.sidebar-dark-primary {
  background: linear-gradient(180deg, var(--ae-navy-850), var(--ae-navy-900)) !important;
  box-shadow: inset -1px 0 0 oklch(1 0 0 / 0.04);
}

.brand-link {
  border-bottom: 1px solid oklch(1 0 0 / 0.06) !important;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.brand-link .brand-text,
.brand-text.font-weight-light {
  color: var(--ae-on-dark) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
.brand-image {
  box-shadow: 0 0 0 2px oklch(0.62 0.11 190 / 0.5);
  border: none !important;
}

/* user panel */
.user-panel { border-bottom: 1px solid oklch(1 0 0 / 0.06) !important; }
.user-panel .info a,
.sidebar .d-block { color: var(--ae-on-dark) !important; font-weight: 500; }
.user-panel .image img { box-shadow: 0 0 0 2px oklch(1 0 0 / 0.12); }

/* section headers */
.nav-sidebar .nav-header {
  color: var(--ae-on-dark-mut) !important;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 1rem 1rem 0.35rem;
  opacity: 0.8;
}

/* nav links */
.nav-sidebar .nav-link,
.main-sidebar .nav-link,
.sidebar .nav-link {
  color: var(--ae-on-dark-mut) !important;
  border-radius: var(--ae-r-sm);
  margin: 1px 8px;
  padding: 0.55rem 0.75rem;
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.nav-sidebar .nav-link .nav-icon {
  color: var(--ae-on-dark-mut);
  transition: color var(--ae-dur) var(--ae-ease);
}
.nav-sidebar .nav-link:hover {
  background: oklch(1 0 0 / 0.06) !important;
  color: var(--ae-on-dark) !important;
}
.nav-sidebar .nav-link:hover .nav-icon { color: var(--ae-teal-400); }

/* active */
.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(90deg, var(--ae-teal-600), var(--ae-teal-500)) !important;
  color: oklch(0.99 0.01 190) !important;
  box-shadow: 0 4px 14px oklch(0.55 0.11 190 / 0.35);
}
.nav-sidebar .nav-link.active .nav-icon { color: oklch(0.99 0.01 190) !important; }

/* treeview children */
.nav-treeview .nav-link { font-size: 0.86rem; }
.nav-treeview .nav-link .nav-icon { font-size: 0.6rem; }

/* ==========================================================================
   Top navbar
   ========================================================================== */
.main-header.navbar,
.navbar-white,
.navbar-light {
  background: var(--ae-card) !important;
  border-bottom: 1px solid var(--ae-border) !important;
  box-shadow: var(--ae-shadow-sm);
}
.main-header .nav-link { color: var(--ae-text-muted) !important; font-weight: 500; }
.main-header .nav-link:hover { color: var(--ae-teal-600) !important; }
.main-header h3 { font-size: 1.05rem; margin: 0; }

/* topbar layout */
.ae-topbar { min-height: 58px; padding-left: 0.35rem; padding-right: 1rem; }

.ae-hamburger {
  color: var(--ae-text-muted) !important;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ae-r-sm);
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.ae-hamburger:hover { background: var(--ae-teal-050); color: var(--ae-teal-600) !important; }

/* organization indicator chip */
.ae-org-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.34rem 0.75rem;
  background: var(--ae-teal-050);
  border: 1px solid oklch(0.62 0.11 190 / 0.22);
  border-radius: 999px;
  color: var(--ae-teal-700);
  font-weight: 600;
  font-size: 0.82rem;
  margin-left: 0.35rem;
}
.ae-org-chip i { font-size: 0.8rem; opacity: 0.9; }

/* user identity block */
.ae-user-meta {
  text-align: right;
  line-height: 1.15;
  margin-right: 0.9rem;
  padding-right: 0.9rem;
  border-right: 1px solid var(--ae-border);
}
.ae-user-name { display: block; font-weight: 650; color: var(--ae-text); font-size: 0.85rem; }
.ae-user-role {
  display: block; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ae-teal-600);
}

/* logout button */
.ae-logout {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent;
  border: 1px solid var(--ae-border);
  color: var(--ae-text-muted);
  font-weight: 550;
}
.ae-logout:hover {
  background: var(--ae-red-050);
  border-color: oklch(0.58 0.17 25 / 0.35);
  color: var(--ae-red-500);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--ae-card);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-sm);
  overflow: hidden;
}
.card-header {
  background: var(--ae-card);
  border-bottom: 1px solid var(--ae-border-soft);
  padding: 0.9rem 1.15rem;
}
.card-title {
  font-weight: 650;
  font-size: 1rem;
  color: var(--ae-text);
}
.card-body { padding: 1.15rem; }
.card-footer {
  background: var(--ae-card-2);
  border-top: 1px solid var(--ae-border-soft);
}
/* remove AdminLTE's colored top border cards look dated */
.card.card-primary:not(.card-outline) > .card-header { background: var(--ae-teal-600); }

/* ==========================================================================
   Buttons  (primary = teal)
   ========================================================================== */
.btn {
  border-radius: var(--ae-r-sm);
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: transform var(--ae-dur) var(--ae-ease),
              box-shadow var(--ae-dur) var(--ae-ease),
              background var(--ae-dur) var(--ae-ease),
              border-color var(--ae-dur) var(--ae-ease);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(0.5px); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px oklch(0.62 0.11 190 / 0.30); }

.btn-primary {
  background: var(--ae-teal-500);
  border-color: var(--ae-teal-500);
  color: oklch(0.99 0.01 190);
}
.btn-primary:hover { background: var(--ae-teal-600); border-color: var(--ae-teal-600); box-shadow: var(--ae-shadow-md); }

.btn-info {
  background: var(--ae-teal-500);
  border-color: var(--ae-teal-500);
  color: oklch(0.99 0.01 190);
}
.btn-info:hover { background: var(--ae-teal-600); border-color: var(--ae-teal-600); }

.btn-danger  { background: var(--ae-red-500);  border-color: var(--ae-red-500); }
.btn-danger:hover { filter: brightness(0.95); box-shadow: var(--ae-shadow-md); }
.btn-success { background: var(--ae-green-500); border-color: var(--ae-green-500); }
.btn-success:hover { filter: brightness(0.96); }
.btn-warning { background: var(--ae-amber-500); border-color: var(--ae-amber-500); color: oklch(0.24 0.03 60); }

.btn-secondary, .btn-default {
  background: var(--ae-card);
  border-color: var(--ae-border);
  color: var(--ae-text);
}
.btn-secondary:hover, .btn-default:hover { background: var(--ae-card-2); border-color: var(--ae-text-faint); }

.btn-link { color: var(--ae-teal-600); }

.btn-sm { border-radius: 5px; }

/* ==========================================================================
   Tables — replace the harsh #3f87a6 / #e4f0f5 look from the layout
   ========================================================================== */
.card table,
table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
  letter-spacing: normal !important;
  font-family: var(--ae-font) !important;
  font-size: 0.85rem !important;
  white-space: normal;
  background: transparent !important;
}
table.table thead th,
.table thead, .table th, table thead, table th, table tfoot {
  background: var(--ae-card-2) !important;
  color: var(--ae-text-muted) !important;
  font-weight: 650 !important;
  text-transform: uppercase;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em;
  border: none !important;
  border-bottom: 1px solid var(--ae-border) !important;
  padding: 0.7rem 0.85rem !important;
  vertical-align: middle;
}
table.table tbody { background: transparent !important; }
table.table tbody td,
.table td {
  background: var(--ae-card) !important;
  color: var(--ae-text) !important;
  border: none !important;
  border-bottom: 1px solid var(--ae-border-soft) !important;
  padding: 0.65rem 0.85rem !important;
  vertical-align: middle;
}
table.table.table-striped tbody tr:nth-of-type(odd) td { background: var(--ae-card-2) !important; }
table.table tbody tr { transition: background var(--ae-dur) var(--ae-ease); }
table.table tbody tr:hover td { background: var(--ae-teal-050) !important; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control,
.custom-select {
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-sm);
  color: var(--ae-text);
  background-color: var(--ae-card);
  transition: border-color var(--ae-dur) var(--ae-ease), box-shadow var(--ae-dur) var(--ae-ease);
  font-size: 0.88rem;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--ae-teal-500);
  box-shadow: 0 0 0 3px oklch(0.62 0.11 190 / 0.18);
  background-color: var(--ae-card);
}
.form-control::placeholder { color: var(--ae-text-faint); }
.form-label, label { color: var(--ae-text-muted); font-weight: 550; font-size: 0.8rem; }

.input-group-text {
  background: var(--ae-card-2);
  border: 1px solid var(--ae-border);
  color: var(--ae-text-muted);
  border-radius: var(--ae-r-sm);
}

/* vue-select (v-select) to match native controls */
.v-select .vs__dropdown-toggle {
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-sm);
  background: var(--ae-card);
  padding: 2px 4px;
  min-height: 38px;
}
.v-select.vs--open .vs__dropdown-toggle {
  border-color: var(--ae-teal-500);
  box-shadow: 0 0 0 3px oklch(0.62 0.11 190 / 0.18);
}
.v-select .vs__selected { color: var(--ae-text); }
.v-select .vs__search::placeholder { color: var(--ae-text-faint); }
.v-select .vs__dropdown-menu {
  border: 1px solid var(--ae-border);
  box-shadow: var(--ae-shadow-md);
  border-radius: var(--ae-r-sm);
}
.v-select .vs__dropdown-option--highlight { background: var(--ae-teal-500); }

.help-block { color: var(--ae-red-500) !important; font-size: 0.78rem; }

/* custom teal checkboxes + radios (app-wide). Exclude Bootstrap custom-control
   switches/checks so their own rendering is preserved. */
input[type="checkbox"]:not(.custom-control-input) {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0; flex: none;
  border: 1.5px solid var(--ae-border); border-radius: 5px;
  background: var(--ae-card); cursor: pointer; vertical-align: middle;
  position: relative;
  transition: background 150ms var(--ae-ease), border-color 150ms var(--ae-ease);
}
input[type="checkbox"]:not(.custom-control-input):hover { border-color: var(--ae-teal-500); }
input[type="checkbox"]:not(.custom-control-input):checked { background: var(--ae-teal-500); border-color: var(--ae-teal-500); }
input[type="checkbox"]:not(.custom-control-input):checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not(.custom-control-input):focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(0.62 0.11 190 / 0.25); }
input[type="radio"] { accent-color: var(--ae-teal-500); }

/* Bootstrap custom-switch (toggle) themed teal */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ae-teal-500) !important;
  border-color: var(--ae-teal-500) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px oklch(0.62 0.11 190 / 0.25) !important;
}
.custom-switch .custom-control-label::before { border-radius: 999px; }
.ae-switch { margin-top: 7px; }
.ae-switch .custom-control-label { font-size: 0.76rem; color: var(--ae-text-muted); cursor: pointer; padding-top: 2px; }
.ae-actions .ae-iconbtn { vertical-align: top; }

/* permission matrix grid */
.ae-permgrid thead th:not(:first-child),
.ae-permgrid tbody td:not(:first-child) { text-align: center; }
.ae-permgrid .form-check { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; min-height: unset; }
.ae-permgrid table th:first-child,
.ae-permgrid table td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--ae-card); text-align: left; font-weight: 600;
  box-shadow: 1px 0 0 var(--ae-border-soft);
}
.ae-permgrid table.table-striped tbody tr:nth-of-type(odd) td:first-child { background: var(--ae-card-2); }
.ae-permgrid table tbody tr:hover td:first-child { background: var(--ae-teal-050); }
.ae-permgrid thead th:first-child { z-index: 3; background: var(--ae-card-2); }
.ae-permgrid thead th:not(:first-child) { min-width: 92px; }
.ae-permgrid__hint { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.78rem; color: var(--ae-text-faint); font-weight: 500; }
.ae-permgrid__hint i { color: var(--ae-teal-500); }

/* ==========================================================================
   Badges / status chips
   ========================================================================== */
.badge { font-weight: 600; border-radius: 999px; padding: 0.35em 0.7em; letter-spacing: 0.01em; }
.badge-success, .badge-active { background: var(--ae-green-050); color: var(--ae-green-500); }
.badge-warning { background: var(--ae-amber-050); color: oklch(0.50 0.11 60); }
.badge-danger  { background: var(--ae-red-050);   color: var(--ae-red-500); }
.badge-info    { background: var(--ae-teal-050);  color: var(--ae-teal-700); }
.badge-primary { background: var(--ae-teal-050);  color: var(--ae-teal-700); }
.badge-secondary { background: var(--ae-border-soft); color: var(--ae-text-muted); }

/* ==========================================================================
   Breadcrumb (content header)
   ========================================================================== */
.breadcrumb { background: transparent; padding: 0; margin-bottom: 0; }
.breadcrumb-item,
.breadcrumb-item a,
.content-header .breadcrumb-item.active { color: var(--ae-text-faint) !important; }
.breadcrumb-item a:hover { color: var(--ae-teal-600) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ae-border); }

/* ==========================================================================
   Footer
   ========================================================================== */
.main-footer {
  background: var(--ae-card);
  border-top: 1px solid var(--ae-border);
  color: var(--ae-text-faint);
  font-size: 0.8rem;
}
.main-footer a { color: var(--ae-teal-600); }

/* ==========================================================================
   Small-multiples / info boxes / cards used on dashboard
   ========================================================================== */
.small-box, .info-box {
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-sm);
}

/* ==========================================================================
   Custom scrollbars (thin, tinted)
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--ae-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: oklch(0.80 0.01 232);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ae-teal-400); background-clip: content-box; }
.main-sidebar ::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.14); background-clip: content-box; }

/* ==========================================================================
   List/index page structure polish (applies app-wide)
   ========================================================================== */
.content-header { padding: 1.4rem clamp(1rem, 2.5vw, 1.9rem) 0.4rem; }
.content-header h1 { font-size: 1.5rem; font-weight: 770; letter-spacing: -0.02em; }
.content > .container-fluid { padding-left: clamp(1rem, 2.5vw, 1.9rem); padding-right: clamp(1rem, 2.5vw, 1.9rem); }

/* loose search box + "Refresh" link that float above some list cards */
.content .col-12 > input.form-control[placeholder*="Search"],
.content .col-12 > input.form-control[placeholder*="search"] {
  max-width: 360px; display: inline-block; margin-bottom: 0.35rem;
}
a.refresh {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: 0.6rem; font-weight: 600; font-size: 0.84rem;
  color: var(--ae-teal-600) !important; text-decoration: none;
}
a.refresh:hover { color: var(--ae-teal-700) !important; }

/* card-header becomes a clean toolbar: title left, actions right */
.card > .card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.card > .card-header .card-title { margin-right: auto; }
.card > .card-header .card-tools { margin-left: auto; }

/* refine the teal form header used by create/edit (card-primary) */
.card.card-primary > .card-header {
  background: linear-gradient(90deg, var(--ae-teal-700), var(--ae-teal-600)) !important;
  border: none !important;
}
.card.card-primary > .card-header .card-title,
.card.card-primary > .card-header h3 { color: oklch(0.99 0.01 190) !important; font-weight: 650; }

/* back button used on detail/form pages */
.btn.btn-danger.back-button, .back-button .btn { border-radius: var(--ae-r-sm); }

/* ==========================================================================
   Toast notifications (replace native alert)
   ========================================================================== */
.ae-toast-wrap {
  position: fixed; top: 74px; right: 20px; z-index: 30000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}
.ae-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: var(--ae-card);
  border: 1px solid var(--ae-border);
  border-radius: 12px;
  box-shadow: var(--ae-shadow-lg);
  transform: translateX(120%); opacity: 0;
  transition: transform 0.28s var(--ae-ease), opacity 0.28s var(--ae-ease);
}
.ae-toast.is-in { transform: translateX(0); opacity: 1; }
.ae-toast__icon { font-size: 1.15rem; flex: none; line-height: 1; }
.ae-toast--ok .ae-toast__icon { color: var(--ae-green-500); }
.ae-toast--warn .ae-toast__icon { color: var(--ae-amber-500); }
.ae-toast__msg { flex: 1; font-size: 0.88rem; font-weight: 550; color: var(--ae-text); line-height: 1.35; }
.ae-toast__x { flex: none; border: none; background: none; color: var(--ae-text-faint); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0 0 0.3rem; }
.ae-toast__x:hover { color: var(--ae-text); }

/* ==========================================================================
   Avatars + broken-image fallback
   ========================================================================== */
.ae-avatar {
  position: relative; display: inline-flex; flex: none;
  width: 46px; height: 46px; border-radius: 11px; overflow: hidden;
  align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--ae-teal-400), var(--ae-teal-600));
  color: #fff; box-shadow: 0 0 0 1px var(--ae-border);
}
.ae-avatar--round { border-radius: 50%; }
.ae-avatar__mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; }
.ae-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-img-fallback { object-fit: cover; background: var(--ae-card-2); }

/* ==========================================================================
   Reusable list-page building blocks (page header, toolbar, actions)
   ========================================================================== */
.ae-list__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.ae-list__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em;
  color: var(--ae-teal-600);
}
.ae-list__eyebrow i { font-size: 0.7rem; }

/* toolbar inside a card-header */
.ae-toolbar { gap: 0.6rem; }
.ae-toolbar__search {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--ae-card-2); border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-sm); padding: 0 0.7rem; min-width: 220px;
  transition: border-color var(--ae-dur) var(--ae-ease), box-shadow var(--ae-dur) var(--ae-ease);
}
.ae-toolbar__search:focus-within { border-color: var(--ae-teal-500); box-shadow: 0 0 0 3px oklch(0.62 0.11 190 / 0.16); }
.ae-toolbar__search i { color: var(--ae-text-faint); font-size: 0.8rem; }
.ae-toolbar__search input { border: none; outline: none; background: transparent; padding: 0.45rem 0; font-size: 0.85rem; color: var(--ae-text); width: 100%; font-family: inherit; }

/* row action icon buttons */
.ae-actions { white-space: nowrap; }
.ae-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; margin-right: 4px;
  color: var(--ae-teal-600); background: var(--ae-teal-050);
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.ae-iconbtn:hover { background: var(--ae-teal-500); color: #fff; }
.ae-iconbtn--danger { color: var(--ae-red-500); background: var(--ae-red-050); }
.ae-iconbtn--danger:hover { background: var(--ae-red-500); color: #fff; }

/* compact inline radios (job complete/cancel style) */
.ae-radio { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--ae-text-muted); margin: 0 0 3px; cursor: pointer; }
.ae-radio input { accent-color: var(--ae-teal-500); margin: 0; }

/* crew line with name + status chip */
.ae-crewline { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 4px; }
.ae-crewline__name { font-size: 0.84rem; color: var(--ae-text); }

/* in-table empty state */
.ae-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 3rem 1rem; color: var(--ae-text-faint); text-align: center; }
.ae-empty i { font-size: 1.8rem; opacity: 0.55; }

/* person cell: avatar + name + id */
.ae-usercell { display: flex; align-items: center; gap: 0.7rem; }
.ae-usercell__meta { display: flex; flex-direction: column; min-width: 0; }
.ae-usercell__name { font-weight: 640; font-size: 0.9rem; color: var(--ae-text); line-height: 1.25; }
.ae-usercell__code { font-size: 0.74rem; color: var(--ae-text-faint); letter-spacing: 0.02em; }

/* sortable table header */
.ae-sortable { cursor: pointer; user-select: none; }
.ae-sortable:hover { color: var(--ae-teal-600) !important; }
.ae-sortable i { margin-left: 0.3rem; font-size: 0.65rem; }

/* ==========================================================================
   Document card grid (QHSSE library: policies, manuals, circulars, etc.)
   ========================================================================== */
.ae-docgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem;
}
.ae-doccard {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem;
  background: var(--ae-card);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-lg);
  box-shadow: var(--ae-shadow-sm);
  transition: transform 180ms var(--ae-ease), box-shadow 180ms var(--ae-ease), border-color 180ms var(--ae-ease);
}
.ae-doccard:hover { transform: translateY(-3px); box-shadow: var(--ae-shadow-md); border-color: oklch(0.62 0.11 190 / 0.35); }
.ae-doccard__icon {
  flex: none; width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: linear-gradient(155deg, var(--ae-teal-050), oklch(0.90 0.05 190));
  color: var(--ae-teal-700);
}
.ae-doccard__body { flex: 1; min-width: 0; }
.ae-doccard__title { font-size: 1rem; font-weight: 680; color: var(--ae-text); margin: 0 0 0.4rem; line-height: 1.3; }
.ae-doccard__view { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 550; color: var(--ae-teal-600); text-decoration: none; }
.ae-doccard__view i { font-size: 0.72rem; }
.ae-doccard__view:hover { text-decoration: underline; }
.ae-doccard__actions { display: flex; gap: 0.4rem; align-items: flex-start; flex: none; }

/* ==========================================================================
   Status chips (reusable across list pages)
   ========================================================================== */
.ae-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.01em;
  white-space: nowrap; line-height: 1.5;
}
.ae-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.ae-chip--green { background: var(--ae-green-050); color: var(--ae-green-500); }
.ae-chip--amber { background: var(--ae-amber-050); color: oklch(0.52 0.12 60); }
.ae-chip--red   { background: var(--ae-red-050);   color: var(--ae-red-500); }
.ae-chip--teal  { background: var(--ae-teal-050);  color: var(--ae-teal-700); }
.ae-chip--muted { background: var(--ae-border-soft); color: var(--ae-text-muted); }

/* ==========================================================================
   Reusable loading primitives (used by Phase 2)
   ========================================================================== */
@keyframes ae-shimmer { 100% { transform: translateX(100%); } }
.ae-skel {
  position: relative;
  overflow: hidden;
  background: var(--ae-card-2);
  border-radius: var(--ae-r-sm);
}
.ae-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.55), transparent);
  animation: ae-shimmer 1.3s var(--ae-ease) infinite;
}
@keyframes ae-spin { to { transform: rotate(360deg); } }
.ae-spinner {
  width: 18px; height: 18px;
  border: 2px solid oklch(1 0 0 / 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  animation: ae-spin 0.7s linear infinite;
  vertical-align: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .ae-skel::after, .ae-spinner { animation: none; }
  * { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive hardening (presentation only)
   Keeps fixed-width embeds (Google Charts, maps, media) from forcing a
   horizontal page scroll on phones/tablets. Mirrors the table-scroll pattern.
   ========================================================================== */

/* Google Charts (data-analysis) render an SVG at a hardcoded pixel width.
   Contain it so it scrolls inside its own column instead of the whole page. */
.content-wrapper div[align="center"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dashboard filter row: vuejs-datepicker's input has an implicit size=20
   (~200px intrinsic) that sticks out of its flex column on small screens.
   Force the whole wrapper chain + input to fill the column. */
.ae-filt .vdp-datepicker,
.ae-filt .vdp-datepicker > div { width: 100% !important; }
.ae-filt .vdp-datepicker input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Media never wider than its container (avatars/logos/photos, embeds, canvases) */
.content-wrapper img,
.content-wrapper video,
.content-wrapper canvas,
.content-wrapper embed {
  max-width: 100%;
}

/* Wide data tables stay scrollable inside their card rather than the viewport */
.content-wrapper .table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 575.98px) {
  /* Tighten content gutters so cards use the full narrow width */
  .content-wrapper .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }

  /* AdminLTE info-boxes: let the number/label wrap instead of clipping */
  .content-wrapper .info-box .info-box-number { white-space: normal; }

  /* Bootstrap button groups in card headers wrap instead of overflowing */
  .content-wrapper .card-header .btn-group { flex-wrap: wrap; }
}