/* ==========================================================================
   Driver settings → Onboarding tab (QR application link + requirements modal)
   Figma: Dispatch Desktop / node 20366-25582 (tab), 20379-29097 (modal)

   Every colour goes through a self-theming token from custom_fonts_colors.css /
   theme_colors.css so the section and the modal both follow dark mode without a
   second [data-theme="dark"] block.
   ========================================================================== */

.sd-dr-onboarding .dispatch-settings-single {
    display: block;
}

/* ── header row ─────────────────────────────────────────────────────────── */

.sd-dr-onboarding-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
}

/* The title/subtitle use the shared .settings-small-section-header / -subheader classes
   (settings.v11.css) so they match the Bonuses tab exactly. No local overrides here — the
   subheader supplies its own margin-top: 5px, so this wrapper adds no gap of its own. */
.sd-dr-onboarding-header-copy {
    min-width: 0;
}

/* ── shared secondary button (Requirements / Download / Copy) ───────────── */

.sd-dr-onboarding-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px;
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-950);
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.sd-dr-onboarding-btn-secondary:hover {
    background: var(--sd-neutral-50);
}

.sd-dr-onboarding-btn-secondary .material-symbols-rounded {
    font-size: 24px;
    line-height: 24px;
}

#sd-dr-onboarding-requirements-btn {
    padding: 12px 20px 12px 16px;
}

.sd-dr-onboarding-download-btn {
    width: 100%;
}

/* ── content column ─────────────────────────────────────────────────────── */

.sd-dr-onboarding-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 560px;
    max-width: 100%;
    margin-top: 32px;
}

/* ── QR code / Branded flyer segmented switch ───────────────────────────── */

.sd-dr-onboarding-format-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--card-background);
    border-radius: 14px;
}

.sd-dr-onboarding-format-option {
    flex: 1 0 0;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sd-neutral-600);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.sd-dr-onboarding-format-option.sd-dr-onboarding-format-selected {
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-900);
    font-weight: 500;
}

/* ── preview ────────────────────────────────────────────────────────────── */

.sd-dr-onboarding-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.sd-dr-onboarding-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 36px 0;
    background: var(--card-background);
    border-radius: 12px;
}

.sd-dr-onboarding-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-dr-onboarding-qr {
    width: 180px;
    height: 180px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    /* box-shadow rather than border/outline: dom-to-image renders borders as dark
       hairlines in the exported PNG (see .sd-branded-template-container). */
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.08);
}

.sd-dr-onboarding-qr img,
.sd-dr-onboarding-qr canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* ── branded flyer (252×252 preview, exported at 5× → 1260×1260) ────────── */

/* NOTE: the exported subtree deliberately uses BLOCK FLOW, not flexbox.
   dom-to-image renders the clone inside an SVG <foreignObject> with a
   `transform: scale(N)` on the root; a flex container with `align-items: center`
   anywhere in that subtree makes the whole foreignObject render EMPTY at scale >= 3
   (verified: 2x fine, 3x/4x/5x produced a 1260x1260 image with zero non-white pixels).
   downloadAsImage() uses scale 5, so the flyer downloaded as a blank page.
   Centering here is done with text-align + margin:auto, which rasterizes correctly. */
.sd-dr-onboarding-flyer {
    display: block;
    width: 252px;
    height: 252px;
    box-sizing: border-box;
    padding: 16px 14px 12px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 0 0 1px var(--sd-neutral-300);
}

.sd-dr-onboarding-flyer-logo-wrap {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border-radius: 50%;
    background: #f4f4f8;
    /* line-height instead of flex centering — see the note above. */
    line-height: 34px;
    font-size: 0;
}

.sd-dr-onboarding-flyer-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}

.sd-dr-onboarding-flyer-title {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: #0a0a0a;
}

.sd-dr-onboarding-flyer-subtitle {
    margin-top: 2px;
    font-size: 8px;
    font-weight: 400;
    line-height: 11px;
    color: #404040;
}

.sd-dr-onboarding-flyer-qr-card {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 14px 0;
    background: #f4f4f8;
    border-radius: 8px;
}

.sd-dr-onboarding-flyer-qr {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    padding: 4px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.sd-dr-onboarding-flyer-qr img,
.sd-dr-onboarding-flyer-qr canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.sd-dr-onboarding-flyer-footnote {
    margin-top: 8px;
    font-size: 8px;
    font-weight: 400;
    line-height: 11px;
    color: #404040;
}

/* ── application link ───────────────────────────────────────────────────── */

.sd-dr-onboarding-link-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-dr-onboarding-link-label {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--sd-neutral-900);
}

.sd-dr-onboarding-link-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.sd-dr-onboarding-link-input {
    flex: 1 0 0;
    min-width: 0;
    height: 44px;
    padding: 8px 16px;
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-900);
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.sd-dr-onboarding-link-input:focus {
    outline: none;
    border-color: var(--sd-dark-green-change);
}

/* ==========================================================================
   "Edit onboarding requirements" modal
   Lives in modalSet.scala.html, i.e. OUTSIDE the Vue root — its copy is literal
   English plus data-dro-i18n keys applied by localize.js.
   ========================================================================== */

.sd-dr-onboarding-req-modal .modal-dialog {
    width: 600px;
    max-width: calc(100% - 32px);
}

.sd-dr-onboarding-req-modal .modal-content {
    /* custom_fonts_colors.css:576 sets .modal-content background with !important. */
    background: var(--sd-neutral-100) !important;
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.sd-dr-onboarding-req-modal .modal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 32px 32px 16px;
    border-bottom: none;
}

.sd-dr-onboarding-req-modal .modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.48px;
    color: var(--sd-neutral-900);
}

.sd-dr-onboarding-req-modal .modal-header p {
    margin: 8px 0 0;
    padding-right: 40px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sd-neutral-900);
}

.sd-dro-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 99px;
    color: var(--sd-neutral-700);
    cursor: pointer;
}

.sd-dro-modal-close:hover {
    background: var(--card-background);
}

.sd-dro-modal-close .material-symbols-rounded {
    font-size: 24px;
    line-height: 24px;
}

.sd-dr-onboarding-req-modal .modal-body {
    padding: 4px 32px;
}

.sd-dro-requirement-list {
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 20px;
    overflow: hidden;
}

.sd-dro-requirement-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sd-neutral-400-route);
}

.sd-dro-requirement-row:last-child {
    border-bottom: none;
}

.sd-dro-requirement-copy {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sd-dro-requirement-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sd-dro-requirement-copy strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sd-neutral-900);
}

.sd-dro-requirement-copy > span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--sd-neutral-600);
}

.sd-dro-requirement-always {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--sd-neutral-500);
}

/* The always-required row reads as informational rather than actionable. */
.sd-dro-requirement-row.is-locked .sd-dro-requirement-copy strong,
.sd-dro-requirement-row.is-locked .sd-dro-requirement-copy > span {
    color: var(--sd-neutral-500);
}

/* Checkbox — deliberately self-contained rather than reusing .sd-checkbox-container from
   common/inputs.css: that file loads AFTER this one in dbContainer, and every override ties on
   specificity (0-2-1), so the shared 20px/3px/slate-grey component silently won. Own classes,
   own glyph, no dependency on tick.svg. Figma: 18px box, 2px radius, #01AD85 when on. The
   accent stays fixed in dark mode — the themed --sd-dark-green-change flips to a pale green
   that would wash out the white tick. */
.sd-dro-checkbox {
    --sd-dro-check-on: #01AD85;
    --sd-dro-check-locked: var(--sd-neutral-450);
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.sd-dro-checkbox input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

.sd-dro-checkbox-box {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--sd-neutral-450);
    border-radius: 2px;
    background: transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Tick drawn with borders so there is no asset to resolve and no encoding to get wrong.
   Sized to the design's Icons/check_small (a 24px glyph centred on the 18px box): the rotated
   6x11 L spans ~12px with a 2.5px stroke. Centred with translate rather than left/top offsets,
   and nudged up 55% because a checkmark's optical centre sits below its geometric one. */
.sd-dro-checkbox-box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -55%) rotate(45deg);
    opacity: 0;
}

.sd-dro-checkbox input:checked ~ .sd-dro-checkbox-box {
    background: var(--sd-dro-check-on);
    border-color: var(--sd-dro-check-on);
}

.sd-dro-checkbox input:checked ~ .sd-dro-checkbox-box::after {
    opacity: 1;
}

/* Locked "always required" row: on, but grey rather than green so it does not read as a choice. */
.sd-dro-checkbox input:disabled ~ .sd-dro-checkbox-box {
    background: var(--sd-dro-check-locked);
    border-color: var(--sd-dro-check-locked);
}

.sd-dro-checkbox:has(input:disabled) {
    cursor: not-allowed;
}

.sd-dro-checkbox input:focus-visible ~ .sd-dro-checkbox-box {
    outline: 2px solid var(--sd-dro-check-on);
    outline-offset: 2px;
}

.sd-dr-onboarding-req-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 32px;
    border-top: none;
}

.sd-dro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.sd-dro-btn--secondary {
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-950);
    border: 1px solid var(--sd-neutral-400-route);
}

.sd-dro-btn--secondary:hover {
    background: var(--sd-neutral-50);
}

.sd-dro-btn--primary {
    background: var(--sd-dark-green);
    color: #ffffff;
    border: 1px solid var(--sd-dark-green);
}

/* Interaction states mirror .sd-primary-btn-dark-green (common/buttons.css) — the primary
   button used by the Bonuses tab — so every green CTA in driver settings behaves the same. */
.sd-dro-btn--primary:hover:not(:disabled) {
    background-color: var(--sd-darker-green);
    border-color: var(--sd-darker-green);
}

.sd-dro-btn--primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 128, 98, 0.1);
}

.sd-dro-btn--primary:active:not(:disabled) {
    background-color: var(--sd-darker-green);
}

.sd-dro-btn--primary:disabled {
    background: var(--card-background);
    color: var(--sd-neutral-500);
    border-color: var(--card-background);
    cursor: not-allowed;
}