/* Aeroitalia brand font. Colors live in settings.UNFOLD["COLORS"]. */
@font-face {
  font-family: "Anek Latin";
  src: url("AnekLatin.8380af61890a.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
}
/* Unlayered, so it beats Unfold's --font-sans in @layer theme. */
:root { --font-sans: "Anek Latin", system-ui, sans-serif; }

/* Dashboard (templates/admin/index.html) and email editor. Unfold's Tailwind is precompiled, so classes it
   doesn't already use don't exist: these styles use its color variables, and its .dark class for dark mode. */
.dash {
  --ink: var(--color-base-900); --muted: var(--color-base-500); --rule: var(--color-base-200);
  --ok: var(--color-primary-600); --warn: var(--color-orange-600); --bad: var(--color-red-600); --off: var(--color-base-400);
  max-width: 64rem; color: var(--color-base-700);
}
.dark .dash {
  --ink: var(--color-base-100); --muted: var(--color-base-400); --rule: var(--color-base-800);
  --ok: var(--color-primary-400); --warn: var(--color-orange-400); --bad: var(--color-red-400); --off: var(--color-base-500);
  color: var(--color-base-300);
}
.dash a { color: inherit; text-decoration: none; }
.dash a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash :focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; border-radius: 4px; }

.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 8px 0 20px; }
/* The one loud element: the state of the pipeline, in the brand face, condensed like a departure-board line. */
.dash-status {
  margin: 0; max-width: 22ch; color: var(--ink); font-size: clamp(28px, 4.5vw, 42px); line-height: 1.08;
  font-weight: 600; font-stretch: 87.5%; letter-spacing: -.01em; text-wrap: balance;
}
.dash-status.dash-bad { color: var(--bad); }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-button {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  background: var(--color-primary-600); color: #fff !important; font-weight: 500; font-size: 15px; white-space: nowrap;
}
.dash-button:hover { background: var(--color-primary-700); text-decoration: none !important; }
.dash-button-quiet { background: transparent; border-color: var(--color-base-300); color: var(--ink) !important; }
.dash-button-quiet:hover { background: var(--color-base-100); }
.dark .dash-button-quiet { border-color: var(--color-base-700); }
.dark .dash-button-quiet:hover { background: var(--color-base-800); }

.dash-checks { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.dash-checks li { display: flex; gap: 10px; align-items: flex-start; }
.dash-checks .material-symbols-outlined { font-size: 20px; line-height: 1.2; }
.dash-ok .material-symbols-outlined { color: var(--ok); }
.dash-warn .material-symbols-outlined { color: var(--warn); }
.dash-bad .material-symbols-outlined { color: var(--bad); }
.dash-off .material-symbols-outlined { color: var(--off); }
.dash-checks .dash-bad { color: var(--bad); }

.dash-title { margin: 0 0 12px; color: var(--ink); font-size: 18px; font-weight: 600; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.dash-tile { padding: 16px; border: 1px solid var(--rule); border-radius: 8px; }
.dash-big { display: block; margin: 4px 0; color: var(--ink); font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Unfold's charts don't keep an aspect ratio: the wrapper sets the height. */
.dash-chart { position: relative; height: 220px; margin: 8px 0 40px; }
.dash-scroll { overflow-x: auto; }
.dash-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.dash-table th, .dash-table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.dash-table thead th { padding-top: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.dash-table tbody th { font-weight: 600; color: var(--ink); }
.dash-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 400; }
.dash-tag { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--color-base-100); color: var(--color-base-600); }
.dark .dash-tag { background: var(--color-base-800); color: var(--color-base-300); }
.dash-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.dash-rate { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dash-bar { width: 72px; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.dash-bar span { display: block; height: 100%; background: var(--ok); }
.dash-none { color: var(--muted); }
.dash-note { margin: 12px 0 40px; max-width: 70ch; color: var(--muted); font-size: 13px; }
.dash-empty { padding: 24px 0; max-width: 60ch; }
.dash-empty p { margin: 0 0 16px; font-size: 16px; }

.dash-tag-ok { background: var(--color-primary-100); color: var(--color-primary-800); }
.dark .dash-tag-ok { background: var(--color-primary-950); color: var(--color-primary-300); }
.dash-tag-warn { background: var(--color-orange-100); color: var(--color-orange-800); }
.dark .dash-tag-warn { background: var(--color-orange-950); color: var(--color-orange-300); }
.dash-link-bold { font-weight: 600; color: var(--color-primary-700) !important; }
.dark .dash-link-bold { color: var(--color-primary-400) !important; }

/* Help page (templates/admin/help.html): the dashboard's look, for reading. Tailwind's reset removes list markers.
   One panel per tab, without JS: the one the URL's #… points at or holds, else the first. admin.js marks its tab. */
.help { max-width: 60rem; }
.help #tabs-wrapper { margin-top: 24px; }
/* Scrolled to below the title and tabs, so a tab's click keeps them in view. */
.help-panels > .help-panel { display: none; scroll-margin-top: 160px; }
.help-panel:target, .help-panel:has(:target), .help-panels:not(:has(:target)) > .help-panel:first-child { display: block; }
.help-steps { counter-reset: step; }
.help-steps section { counter-increment: step; }
.help-chapters code { font-size: 14px; }
.help-part { margin: 0 0 24px; padding-top: 8px; color: var(--ink); font-size: 26px; font-weight: 600; font-stretch: 87.5%; }
.help-chapters section { margin-bottom: 56px; scroll-margin-top: 24px; }
.help-chapters .help-lead { margin-bottom: 40px; font-size: 17px; }
/* The steps as a timeline: a numbered dot per step, joined by a line down to the next one. */
.help-steps section { position: relative; padding-left: 48px; }
.help-steps section:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 36px; bottom: -48px; border-left: 2px solid var(--rule); }
.help-steps .dash-title::before {
  content: counter(step); position: absolute; left: 0; top: -3px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-600); color: #fff; font-size: 15px;
}
.help-chapters p, .help-chapters li { max-width: 70ch; font-size: 16px; line-height: 1.55; }
.help-chapters p { margin: 0 0 12px; }
.help-chapters ol, .help-chapters ul { margin: 0 0 16px; padding-left: 22px; }
.help-chapters ol { list-style: decimal; }
.help-chapters ul { list-style: disc; }
.help-chapters li { margin: 6px 0; }
/* Troubleshooting: each problem, then what to do. */
.help-chapters dt { margin-top: 20px; color: var(--ink); font-size: 16px; font-weight: 600; }
.help-chapters dd { margin: 4px 0 0; max-width: 70ch; font-size: 16px; line-height: 1.55; }
.help-chapters strong { color: var(--ink); font-weight: 600; }
/* Links in the text look like links; .dash drops their underline. */
.help-chapters :is(p, li, dd) a { text-decoration: underline; text-underline-offset: 3px; }
.help-chapters img { display: block; width: 100%; height: auto; margin: 16px 0 24px; border: 1px solid var(--rule); border-radius: 8px; }

/* Guided tours (driver.js, started by admin.js): popovers in the admin's palette. */
.driver-popover.radar-tour {
  --driver-popover-font-family: var(--font-sans);
  max-width: 340px; padding: 16px; border-radius: 8px; background: #fff; color: var(--color-base-700);
}
.radar-tour .driver-popover-title { color: var(--color-base-900); font-size: 18px; font-weight: 600; }
.radar-tour .driver-popover-description { font-size: 15px; }
.radar-tour .driver-popover-footer-btn {
  padding: 5px 12px; border-radius: 6px; border-color: var(--color-base-300); font-size: 14px; text-shadow: none;
}
.radar-tour .driver-popover-next-btn { background: var(--color-primary-600); border-color: transparent; color: #fff; }
.radar-tour .driver-popover-next-btn:hover, .radar-tour .driver-popover-next-btn:focus { background: var(--color-primary-700); }
.dark .driver-popover.radar-tour { background: var(--color-base-800); color: var(--color-base-300); }
.dark .radar-tour .driver-popover-title { color: var(--color-base-100); }
.dark .radar-tour .driver-popover-prev-btn { background: transparent; border-color: var(--color-base-600); color: var(--color-base-200); }
.dark .radar-tour .driver-popover-arrow-side-left { border-left-color: var(--color-base-800); }
.dark .radar-tour .driver-popover-arrow-side-right { border-right-color: var(--color-base-800); }
.dark .radar-tour .driver-popover-arrow-side-top { border-top-color: var(--color-base-800); }
.dark .radar-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--color-base-800); }

/* Email editor (radar/templates/radar/email_editor.html) */
/* The "Email" fieldset already names this field: drop Unfold's 14rem label column so the editor gets the full width. */
.field-mjml > div:first-child { display: none; }
/* GrapesJS gives its side panel 15% of the width, too narrow for the style and settings fields: use a fixed 320px. */
#email-editor .gjs-cv-canvas { width: calc(100% - 320px); }
#email-editor .gjs-pn-views, #email-editor .gjs-pn-views-container { width: 320px; }
#email-editor .gjs-pn-options { right: 320px; }
#email-editor { border: 1px solid var(--color-base-300); border-radius: 6px; overflow: hidden; }
/* GrapesJS's four theme classes, in the admin's palette instead of its default dark grey and pink. */
#email-editor .gjs-one-bg { background-color: var(--color-base-50); }
#email-editor .gjs-two-color { color: var(--color-base-700); }
#email-editor .gjs-three-bg { background-color: var(--color-primary-600); color: #fff; }
#email-editor .gjs-four-color, #email-editor .gjs-four-color-h:hover { color: var(--color-primary-600); }
.dark #email-editor { border-color: var(--color-base-700); }
.dark #email-editor .gjs-one-bg { background-color: var(--color-base-900); }
.dark #email-editor .gjs-two-color { color: var(--color-base-200); }
.dark #email-editor .gjs-four-color, .dark #email-editor .gjs-four-color-h:hover { color: var(--color-primary-400); }

/* Toolbar above the editor */
.email-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.email-editor-start {
  padding: 6px 12px; border: 1px solid var(--color-base-300); border-radius: 6px; font-size: 14px;
  color: var(--color-base-700); background: transparent; cursor: pointer;
}
.email-editor-start:hover { background: var(--color-base-100); }
.email-editor-hint { margin: 0; color: var(--color-base-500); font-size: 13px; }
.dark .email-editor-start { border-color: var(--color-base-700); color: var(--color-base-200); }
.dark .email-editor-start:hover { background: var(--color-base-800); }

/* Booking page, "Campaigns right now" (BookingAdmin.campaigns): a verdict tag per campaign, the rules it fails below. */
.booking-campaigns { display: grid; gap: 12px; }
.booking-campaigns a { font-weight: 600; }
.booking-campaigns ul { margin: 4px 0 0; padding-left: 20px; list-style: disc; color: var(--color-base-500); }
.dark .booking-campaigns ul { color: var(--color-base-400); }

/* Services: no Save button (Viewers) means a drag couldn't be saved, so no drag handle either */
body:not(:has(button[name=_save])) #result_list[data-ordering-field] [x-sort\:handle] { visibility: hidden; pointer-events: none; }