/* ESC Mobility Manager — brand layer on top of Tabler.
   Every colour comes from a CSS variable so the admin panel can change it. */

:root {
  --brand-primary: #2f7a4d;
  --brand-accent:  #0ca678;
  --role-out:      #4263eb; /* support role — outgoing */
  --role-in:       #0ca678; /* host role — incoming    */
  --role-lead:     #7048e8; /* lead role — coordinated */
}

body { background: #f6f7f9; }

/* --- brand -------------------------------------------------------- */
.brand-dot {
  width: 14px; height: 14px; border-radius: 3px;
  display: inline-block; vertical-align: middle;
  background: var(--brand-primary);
}
.brand-dot-lg { width: 28px; height: 28px; border-radius: 6px; }
.brand-line { line-height: 1.1; }
.brand-sub { font-size: .75rem; }
.brand-avatar { background: var(--brand-primary); color: #fff; }

.btn-brand {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: color-mix(in srgb, var(--brand-primary) 85%, #000);
  border-color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  color: #fff;
}

.navbar-vertical .nav-item.active .nav-link { color: var(--brand-primary); }
.navbar-vertical .nav-item.active .nav-link::before { background: var(--brand-primary); }

/* --- role colours -------------------------------------------------- */
.text-role-out  { color: var(--role-out); }
.text-role-in   { color: var(--role-in); }
.text-role-lead { color: var(--role-lead); }

.role-strip { width: 4px; border-radius: 2px; flex: 0 0 4px; align-self: stretch; }
.role-strip-out  { background: var(--role-out); }
.role-strip-in   { background: var(--role-in); }
.role-strip-lead { background: var(--role-lead); }

/* --- pieces -------------------------------------------------------- */
.stat-num  { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.stat-icon { font-size: 1.5rem; opacity: .35; }
.settings-icon { font-size: 1.5rem; color: var(--brand-primary); }
.empty-big-icon { font-size: 2.5rem; opacity: .4; }
.user-name { font-size: .875rem; }
.user-role { font-size: .75rem; }
.preview-box { background: #f6f7f9; }
.trans-key { font-size: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.group-row td {
  background: #f1f3f5; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: #667382; font-weight: 600;
}

.card-clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.card-clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }

/* --- mobile -------------------------------------------------------- */
.mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: #fff; border-top: 1px solid #e6e7e9; display: none;
}
.mobile-nav a {
  flex: 1; text-align: center; padding: .5rem 0;
  color: #667382; font-size: .7rem; text-decoration: none;
}
.mobile-nav a.active { color: var(--brand-primary); }
.mobile-nav i { display: block; font-size: 1.25rem; margin-bottom: 2px; }

@media (max-width: 991.98px) {
  .mobile-nav { display: flex; }
  .page-body { padding-bottom: 5rem; }
}

.login-page { background: #f6f7f9; }

@media (prefers-reduced-motion: reduce) {
  .card-clickable { transition: none; }
}

/* --- Quality Label badges ------------------------------------------ */
.ql-badge { font-weight: 500; }
.ql-host    { background: color-mix(in srgb, var(--role-in)   14%, #fff); color: var(--role-in); }
.ql-support { background: color-mix(in srgb, var(--role-out)  14%, #fff); color: var(--role-out); }
.ql-lead    { background: color-mix(in srgb, var(--role-lead) 14%, #fff); color: var(--role-lead); }

.ql-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ql-host-dot    { background: var(--role-in); }
.ql-support-dot { background: var(--role-out); }
.ql-lead-dot    { background: var(--role-lead); }

/* --- temporary language marker ------------------------------------- */
.lang-temp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tblr-orange, #f76707);
  display: inline-block; margin-left: 4px; vertical-align: middle;
}

/* --- native dialog -------------------------------------------------- */
.esc-dialog {
  border: 0; border-radius: 8px; padding: 0; width: min(560px, calc(100vw - 2rem));
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.esc-dialog::backdrop { background: rgba(24,36,51,.45); }
.esc-dialog .dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem; border-bottom: 1px solid #e6e7e9;
}
.esc-dialog .dialog-body { padding: 1.25rem; }
.esc-dialog .dialog-foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .875rem 1.25rem; border-top: 1px solid #e6e7e9; background: #f6f7f9;
}

/* --- empty state ---------------------------------------------------- */
.empty-mini { color: #8a94a6; }

/* --- day limit bars ------------------------------------------------- */
.timeline-bar {
  height: 8px; border-radius: 4px; background: #e9ecef; overflow: hidden;
}
.timeline-fill { height: 100%; border-radius: 4px; }
.bar-ok   { background: var(--role-in); }
.bar-warn { background: var(--tblr-orange, #f76707); }
.bar-full { background: var(--tblr-red, #d63939); }

/* --- status badges -------------------------------------------------- */
.badge.status-draft,
.badge.status-closed,
.badge.status-completed   { background:#f1f3f5; color:#667382; }
.badge.status-approved    { background:#e7f0ff; color:#3b5bdb; }
.badge.status-ongoing     { background:#e6f7f1; color:#0ca678; }
.badge.status-reporting   { background:#e7f5ff; color:#1c7ed6; }
.badge.status-preparation { background:#fff9db; color:#a67c00; }
.badge.status-returned    { background:#e7f5ff; color:#1c7ed6; }
.badge.status-cancelled   { background:#ffe8e8; color:#d63939; }
.badge.status-unclear     { background:#f3f0ff; color:#7048e8; }

.badge.visa-not_needed { background:#f1f3f5; color:#667382; }
.badge.visa-to_apply   { background:#fff9db; color:#a67c00; }
.badge.visa-pending    { background:#e7f5ff; color:#1c7ed6; }
.badge.visa-granted    { background:#e6f7f1; color:#0ca678; }
.badge.visa-rejected   { background:#ffe8e8; color:#d63939; }

/* --- dashboard search and shortcuts --------------------------------- */
.dash-search .input-group-text { background:#fff; border-right:0; color:#8a94a6; }
.dash-search .form-control:focus { box-shadow:none; border-color:#dfe3e8; }
.quick-card .quick-icon { font-size:1.25rem; color:var(--brand-primary); }

/* --- notes ----------------------------------------------------------- */
.badge.note-type { background:#eef1f5; color:#5b6675; font-weight:500; }
.note-body { white-space:pre-wrap; }

/* --- colour preview -------------------------------------------------- */
.swatch { width:28px; height:28px; border-radius:6px; display:inline-block; }
.swatch-primary { background:var(--brand-primary); }
.swatch-accent  { background:var(--brand-accent); }

/* ====================================================================
   Themed surfaces — table heads and card heads pick up the brand colour
   so a customer's own palette carries through the whole interface.
   ==================================================================== */
.card-table thead th,
.table thead th {
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 78%, #1a1a1a);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 18%, #fff);
}
.card-table thead th a { color: inherit; }

.card > .card-header {
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 14%, #fff);
}
.card > .card-header .card-title {
  color: color-mix(in srgb, var(--brand-primary) 80%, #1a1a1a);
  font-weight: 600;
}
.group-row td {
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 70%, #1a1a1a);
}

/* a quiet heading between blocks of tiles */
.section-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a94a6;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* ====================================================================
   Dashboard tiles — built to be touched, not just read.
   ==================================================================== */
.dash-search { position: relative; }
.dash-search i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: #8a94a6; font-size: 1.125rem; pointer-events: none;
}
.dash-search .form-control {
  height: 3rem; padding-left: 2.75rem; font-size: 1rem;
  border-radius: 10px; background: #fff;
}
.dash-search .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

.tile {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .125rem; height: 100%;
  padding: 1rem .875rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6e7e9;
  border-left: 4px solid var(--tile-colour, #adb5bd);
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  color: inherit;
}
.tile-out  { --tile-colour: var(--role-out); }
.tile-in   { --tile-colour: var(--role-in); }
.tile-lead { --tile-colour: var(--role-lead); }

.tile-icon  { font-size: 1.25rem; color: var(--tile-colour); opacity: .8; }
.tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--tile-colour); }
.tile-label { font-size: .8125rem; color: #667382; line-height: 1.2; }

.mini-tile {
  display: flex; flex-direction: column; gap: .125rem;
  padding: .75rem .875rem; border-radius: 10px;
  background: #fff; border: 1px solid #e6e7e9;
  text-decoration: none; color: inherit; height: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.mini-tile:hover { border-color: var(--brand-primary); color: inherit; }
.mini-value { font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.mini-label { font-size: .75rem; color: #8a94a6; line-height: 1.2; }
.mini-alert .mini-value { color: var(--tblr-orange, #f76707); }
.mini-alert { border-color: color-mix(in srgb, var(--tblr-orange, #f76707) 40%, #fff); }

.action-tile {
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  text-decoration: none; font-weight: 500; font-size: .875rem;
  min-height: 3rem;
  transition: background .12s;
}
.action-tile:hover {
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 90%, #000);
}
.action-tile i { font-size: 1.125rem; }

@media (max-width: 575.98px) {
  .tile { padding: .75rem .625rem; }
  .tile-value { font-size: 1.375rem; }
  .tile-label { font-size: .6875rem; }
  .tile-icon { font-size: 1rem; }
  .action-tile { font-size: .8125rem; padding: .75rem .625rem; }
  .card-table thead th { font-size: .6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .mini-tile, .action-tile { transition: none; }
  .tile:hover { transform: none; }
}

/* --- sortable headers ------------------------------------------------ */
.sort-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
}
.sort-link:hover { color: var(--brand-primary); text-decoration: none; }
.sort-link i { font-size: .875rem; opacity: .35; }
.sort-link.sort-active i { opacity: 1; color: var(--brand-primary); }

/* --- filter chips ---------------------------------------------------- */
.chip-row { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; }
.chip-row::-webkit-scrollbar { height: 4px; }
.chip-row::-webkit-scrollbar-thumb { background: #dfe3e8; border-radius: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid #e6e7e9; background: #fff;
  font-size: .8125rem; color: #5b6675; text-decoration: none;
  white-space: nowrap; flex: 0 0 auto;
}
.chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }
.chip.chip-active {
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  border-color: var(--brand-primary);
  color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  font-weight: 600;
}
.chip-count {
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  border-radius: 999px; padding: 0 .4rem; font-size: .75rem; font-weight: 600;
}
.chip.chip-active .chip-count { background: color-mix(in srgb, var(--brand-primary) 22%, #fff); }

/* no underline creeping in on tiles */
.tile:hover, .tile:focus, .mini-tile:hover, .mini-tile:focus,
.action-tile:hover, .action-tile:focus,
.card-clickable:hover, .card-clickable:focus { text-decoration: none; }
.tile *, .mini-tile *, .action-tile * { text-decoration: none; }

/* --- panel that echoes the brand ------------------------------------- */
.card-themed {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, #fff);
  border-left: 4px solid var(--brand-primary);
}

.badge.mobility-count {
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  text-decoration: none; font-weight: 600;
}
.badge.mobility-count:hover {
  background: color-mix(in srgb, var(--brand-primary) 20%, #fff);
  text-decoration: none;
}

/* --- checkbox picker -------------------------------------------------- */
.picker-list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid #e6e7e9; border-radius: 8px; padding: .25rem;
}
.picker-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: 6px; cursor: pointer;
  font-size: .875rem;
}
.picker-item:hover { background: color-mix(in srgb, var(--brand-primary) 7%, #fff); }

/* --- live day readout on the mobility form ---------------------------- */
.day-readout {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  padding: .625rem .875rem; border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, #fff);
  font-size: .8125rem; color: #5b6675;
}
.day-readout strong {
  font-size: 1.125rem; color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  margin-right: .25rem;
}

/* --- dashboard breathing room ---------------------------------------- */
.dash-head { margin-bottom: 1rem; }
.action-tile { min-height: 3.25rem; }
.tile { min-height: 6rem; }

@media (min-width: 992px) {
  .tile { padding: 1.25rem 1.125rem; }
  .tile-value { font-size: 2rem; }
}
@media (max-width: 767.98px) {
  .section-label { margin-top: .25rem; }
  .action-tile { min-height: 3rem; }
  .tile { min-height: 5.25rem; }
}

/* --- one filter layout on every list ---------------------------------- */
.filter-search { display: flex; gap: .5rem; margin-bottom: .375rem; }
.filter-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.filter-search-field i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: #8a94a6; pointer-events: none;
}
.filter-search-field .form-control { padding-left: 2.25rem; }
.filter-search-field .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.filter-search .btn { flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .filter-search .btn { padding-left: .75rem; padding-right: .75rem; }
}

.status-picker { width: auto; min-width: 9rem; }

/* --- recycle bin rows -------------------------------------------------- */
.trash-meta { line-height: 1.35; }
.trash-meta div + div { margin-top: .0625rem; }

.esc-dialog-sm { width: min(420px, calc(100vw - 2rem)); }
.purge-icon { font-size: 1.75rem; color: var(--tblr-red, #d63939); flex: 0 0 auto; }

/* --- inline label so a filter row needs no heading of its own --------- */
.chip-label {
  flex: 0 0 auto; align-self: center;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #8a94a6; font-weight: 600; padding-right: .125rem;
}
@media (max-width: 575.98px) {
  .chip-label { display: none; }
  .chip { padding: .375rem .625rem; font-size: .78125rem; }
}

/* --- country flags ---------------------------------------------------- */
.flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.flag-avatar {
  width: 2rem; height: 1.5rem; border-radius: 3px;
  background-size: cover; background-position: center;
}
.flag-inline { width: 1.125rem; height: .84rem; margin-right: .375rem; vertical-align: -1px; }
.flag-lg { width: 1.75rem; height: 1.3rem; }

.flag-portrait { width: 3rem; height: 2.25rem; border-radius: 4px; }

/* --- contact shortcuts ------------------------------------------------ */
.contact-line { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.btn-copy {
  border: 0; background: transparent; padding: .125rem .25rem;
  color: #8a94a6; border-radius: 4px; line-height: 1; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn-copy:hover { background: color-mix(in srgb, var(--brand-primary) 10%, #fff); color: var(--brand-primary); }
.btn-copy i { font-size: .95rem; }
.btn-copy-done { color: var(--role-in); background: color-mix(in srgb, var(--role-in) 12%, #fff); }

.order-input { width: 4.5rem; text-align: center; }

.template-note {
  padding: .875rem 1rem; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, #fff);
  height: 100%;
}

/* --- paging ----------------------------------------------------------- */
.pager {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .75rem .875rem;
  background: #fff; border: 1px solid #e6e7e9; border-radius: 10px;
}
.pager-count { flex: 1 1 auto; }
.pager-size, .pager-pages { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.pager-gap { color: #8a94a6; padding: 0 .125rem; }
.chip-off { opacity: .4; pointer-events: none; }

@media (max-width: 575.98px) {
  .pager { gap: .5rem; }
  .pager-count { flex: 1 1 100%; }
}

/* --- collapsible groups ------------------------------------------------ */
.group { margin-bottom: 1rem; }
.group-head {
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem 1rem; cursor: pointer;
  background: color-mix(in srgb, var(--brand-primary) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 26%, #fff);
  border-left: 5px solid var(--brand-primary);
  border-radius: 10px;
  list-style: none;
}
.group-head::-webkit-details-marker { display: none; }
.group-head:hover { background: color-mix(in srgb, var(--brand-primary) 10%, #fff); }
.group-name {
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--brand-primary) 92%, #000);
}
.group-caret {
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--brand-primary) 75%, #000);
  transition: transform .15s;
}
details[open] > .group-head > .group-caret { transform: rotate(90deg); }
.badge.group-count {
  margin-left: auto;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600; font-size: .8125rem;
  padding: .3rem .6rem; border-radius: 999px;
}
.group-body { padding-top: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .group-caret { transition: none; }
}

/* --- checklist --------------------------------------------------------- */
/* The phase sits under a role heading, so it carries no fill of its own —
   a short rule and quiet type are enough to mark the level. */
.phase-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .875rem .875rem .375rem;
  background: transparent; border: 0;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: #8a94a6;
}
.phase-head::before {
  content: ""; flex: 0 0 auto;
  width: 16px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--brand-primary) 40%, #fff);
}
.phase-head + .list-group .list-group-item:first-child { border-top: 0; }
.btn-tick {
  border: 0; background: transparent; padding: 0; line-height: 1;
  color: #adb5bd; cursor: pointer; font-size: 1.25rem;
}
.btn-tick:hover { color: var(--brand-primary); }
.btn-tick-on { color: var(--role-in); }

.badge.ql-all {
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 85%, #000);
}

/* --- reordering ------------------------------------------------------- */
.move-stack { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.btn-move {
  border: 0; background: transparent; padding: 0 .125rem;
  color: #adb5bd; cursor: pointer; line-height: 1; font-size: .875rem;
}
.btn-move:hover:not(:disabled) { color: var(--brand-primary); }
.btn-move:disabled { opacity: .25; cursor: default; }