/*
    خدمة حجز موعد — styles shared by the booking, my-appointments and review pages.
    Kept in one file rather than three <style> blocks so the three pages cannot drift.

    Colours come from the DGA tokens already loaded by App.razor; the fallbacks keep
    the pages sane if a token is ever renamed.
*/

.apt-page {
    --apt-green: var(--dga-color-primary, #006c35);
    --apt-green-soft: var(--dga-color-primary-50, #e8f4ee);
    --apt-border: var(--dga-color-border, #e3e6e8);
    --apt-muted: var(--dga-color-text-secondary, #5b6670);
    --apt-radius: 12px;
}

.apt-breadcrumb-section {
    background: var(--apt-green-soft);
    padding: 1.25rem 0 1.5rem;
    margin-bottom: 2rem;
}

.apt-page-title {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    margin: .5rem 0 0;
}

.apt-section { padding-bottom: 3rem; }

.apt-card {
    background: var(--background-white);
    border: 1px solid var(--apt-border);
    border-radius: var(--apt-radius);
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* ---- form ---------------------------------------------------------------- */

.apt-field { margin-bottom: 1.5rem; }

.apt-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: .5rem;
}

.apt-required { color: #c0392b; }

.apt-optional {
    color: var(--apt-muted);
    font-weight: var(--font-weight-regular);
    font-size: .875rem;
}

.apt-field-hint {
    font-size: .8125rem;
    color: var(--apt-muted);
    margin: .375rem 0 0;
}

.apt-field-error {
    font-size: .8125rem;
    color: #c0392b;
    margin: .375rem 0 0;
}

.apt-field-check {
    background: var(--apt-green-soft);
    border-radius: var(--apt-radius);
    padding: 1rem 1.25rem;
}

.apt-field-check .form-check-label { font-weight: var(--font-weight-semibold); }

.apt-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ---- confirmation: success banner ---------------------------------------- */

.apt-success-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--apt-green-soft), var(--background-white));
    border: 1px solid var(--apt-green);
    border-radius: var(--apt-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.apt-success-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--apt-green);
    color: var(--background-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.apt-success-title { font-size: 1.3rem; font-weight: var(--font-weight-bold); margin: 0 0 .15rem; }

.apt-success-sub { color: var(--apt-muted); margin: 0; font-size: .925rem; }

/* ---- confirmation: the pass ---------------------------------------------- */

.apt-pass {
    background: var(--background-white);
    border: 1px solid var(--apt-border);
    border-radius: var(--apt-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    margin-bottom: 1.25rem;
}

.apt-pass-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.5rem;
    background: var(--background-white);
    border-bottom: 3px solid var(--apt-green);
}

/* The lockup is ~5.3:1 and already carries the Emirate's name in both languages,
   so the card does not repeat it as text. */
.apt-pass-logo {
    height: 42px;
    width: auto;
    max-width: 62%;
    object-fit: contain;
}

.apt-qr-placeholder {
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
}

.apt-pass-kind {
    font-size: .8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--apt-green);
    white-space: nowrap;
}

.apt-pass-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.75rem;
    align-items: center;
    padding: 1.75rem 1.5rem;
}

@media (max-width: 767.98px) {
    .apt-pass-body {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        justify-items: center;
        text-align: center;
    }
}

/* the queue position — the thing the citizen is really being handed */
.apt-pass-turn {
    border: 2px solid var(--apt-border);
    border-radius: var(--apt-radius);
    padding: 1rem 1.4rem;
    text-align: center;
    min-width: 132px;
}

.apt-pass-turn.is-priority {
    border-color: #f0b429;
    background: #fffaf0;
}

.apt-pass-turn.is-senior {
    border-color: #7aa7d9;
    background: #f2f7fd;
}

.apt-pass-turn-label {
    display: block;
    font-size: .75rem;
    color: var(--apt-muted);
    margin-bottom: .15rem;
}

.apt-pass-turn-value {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--apt-green);
}

.apt-pass-turn.is-priority .apt-pass-turn-value { color: #8a6100; }

.apt-pass-turn.is-senior .apt-pass-turn-value { color: #1c4f8f; }

.apt-pass-turn-band {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .4rem;
    font-size: .75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--apt-muted);
}

.apt-pass-details { margin: 0; }

.apt-pass-details > div { margin-bottom: .9rem; }

.apt-pass-details > div:last-child { margin-bottom: 0; }

.apt-pass-details dt {
    font-size: .75rem;
    font-weight: var(--font-weight-medium);
    color: var(--apt-muted);
    margin-bottom: .15rem;
}

.apt-pass-details dd { margin: 0; font-weight: var(--font-weight-semibold); }

.apt-pass-day {
    display: inline-block;
    background: var(--apt-green-soft);
    color: var(--apt-green);
    border-radius: 6px;
    padding: .1rem .5rem;
    margin-inline-end: .4rem;
}

.apt-pass-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}

.apt-pass-notes { font-weight: var(--font-weight-regular); color: var(--apt-muted); font-size: .9rem; }

.apt-pass-qr { text-align: center; }

.apt-pass-qr .apt-booking-code { font-size: 1.05rem; margin-top: .5rem; }

.apt-pass-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    background: #fafbfc;
    border-top: 1px dashed var(--apt-border);
    font-size: .8125rem;
    color: var(--apt-muted);
}

.apt-actions-center { justify-content: center; }

/* ---- confirmation -------------------------------------------------------- */

.apt-confirm-head { margin-bottom: 1.5rem; }

.apt-confirm-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--apt-green-soft);
    color: var(--apt-green);
    font-size: 2rem;
}

.apt-confirm-icon-muted {
    background: #f1f3f5;
    color: var(--apt-muted);
}

.apt-confirm-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: .5rem;
}

.apt-confirm-sub {
    color: var(--apt-muted);
    margin-bottom: 0;
}

.apt-qr-wrap, .apt-qr-inline {
    padding: 1.5rem 0;
    border-block: 1px solid var(--apt-border);
    margin-bottom: 1.5rem;
}

.apt-qr {
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    padding: .5rem;
    background: var(--background-white);
}

.apt-booking-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.35rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .06em;
    margin-top: .75rem;
}

.apt-booking-code-hint {
    font-size: .8125rem;
    color: var(--apt-muted);
    margin: .25rem 0 0;
}

.apt-summary { margin-bottom: 1.5rem; }

.apt-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--apt-border);
}

.apt-summary-row:last-child { border-bottom: 0; }

.apt-summary-label { color: var(--apt-muted); }

.apt-summary-value { font-weight: var(--font-weight-semibold); text-align: end; }

.apt-queue-number {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
}

.apt-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: var(--font-weight-semibold);
    padding: .2rem .6rem;
    border-radius: 999px;
}

/* 1 ذوي الهمم · 2 كبار السن · 3 عام */
.apt-priority-1 { background: #fff4d6; color: #8a6100; }
.apt-priority-2 { background: #e7f0fb; color: #1c4f8f; }
.apt-priority-3 { background: #eef1f3; color: #48535c; }

.apt-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: var(--apt-green-soft);
    border-radius: var(--apt-radius);
    padding: .9rem 1.1rem;
    font-size: .9rem;
}

.apt-note i { color: var(--apt-green); margin-top: .15rem; }

/* ---- my appointments ----------------------------------------------------- */

.apt-list-card { padding: 1.25rem; }

.apt-list-title { font-size: 1.05rem; font-weight: var(--font-weight-bold); margin-bottom: .35rem; }

.apt-list-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .875rem;
    color: var(--apt-muted);
    margin-bottom: .4rem;
}

.apt-list-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.apt-list-notes {
    font-size: .875rem;
    color: var(--apt-muted);
    margin: .5rem 0 0;
}

.apt-list-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: .75rem;
}

.apt-queue-box {
    border-radius: var(--apt-radius);
    padding: .75rem .5rem;
    text-align: center;
}

.apt-queue-box-label {
    display: block;
    font-size: .7rem;
    opacity: .75;
}

.apt-queue-box-value {
    display: block;
    font-size: 1.85rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.apt-status {
    display: inline-block;
    font-size: .8125rem;
    font-weight: var(--font-weight-semibold);
    padding: .25rem .7rem;
    border-radius: 999px;
}

.apt-status-booked { background: #e7f0fb; color: #1c4f8f; }
.apt-status-inservice { background: #e6f5ec; color: #0f6b39; }
.apt-status-completed { background: #eef1f3; color: #48535c; }
.apt-status-noshow { background: #fdeaea; color: #a02222; }
.apt-status-cancelled { background: #e9ecef; color: #343a40; }

.apt-reviewed {
    font-size: .8125rem;
    color: var(--apt-green);
}

.apt-empty-icon { font-size: 3rem; color: var(--apt-border); }

.apt-empty p { color: var(--apt-muted); margin: 1rem 0; }

/* ---- review -------------------------------------------------------------- */

.apt-review-section { padding-top: 3rem; }

.apt-review-card { padding: 2.25rem; }

.apt-review-head { margin-bottom: 1.75rem; }

.apt-review-meta {
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--apt-muted);
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.apt-review-dot { opacity: .5; }

.apt-stars-field {
    border: 0;
    text-align: center;
    margin-bottom: 1.75rem;
}

.apt-stars-field .apt-label { text-align: center; }

.apt-stars {
    display: inline-flex;
    flex-direction: row-reverse; /* so hover fills right-to-left in RTL */
    gap: .35rem;
    justify-content: center;
}

.apt-star {
    cursor: pointer;
    font-size: 2.25rem;
    line-height: 1;
    color: #d8dde1;
    transition: color .12s ease, transform .12s ease;
}

.apt-star:hover { transform: scale(1.08); }

.apt-star.is-on { color: #f5a623; }

/* Keyboard users must be able to see which star has focus. */
.apt-star-input:focus-visible + .apt-star {
    outline: 2px solid var(--apt-green);
    outline-offset: 3px;
    border-radius: 4px;
}

.apt-stars-label {
    margin-top: .6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--apt-green);
}

/* ---- print --------------------------------------------------------------- */

/*
    Print.

    The pass is the only thing worth paper. Everything else on the page is hidden,
    and the layout containers are flattened — Bootstrap's grid plus the RTL
    direction were pushing the card off the left edge and clipping it.
*/

/* ---- who the booking is for ---------------------------------------------- */

.apt-list-person {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .35rem 0 .1rem;
    font-size: .8125rem;
    color: var(--apt-muted);
}

.apt-list-person i { font-size: .95rem; }

.apt-list-person strong {
    font-weight: var(--font-weight-semibold);
    color: var(--text-display, #1b1b1b);
}

/* Identity numbers get the same monospace treatment as the booking code: they are
   read aloud and compared character by character against an ID card. */
.apt-list-nid,
.apt-pass-nid {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}

/* ---- سجل التتبع — the tracking log --------------------------------------- */

.apt-timeline-panel {
    border-top: 1px solid var(--apt-border);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.apt-timeline-panel-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    margin: 0 0 1rem;
}

.apt-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-start: 2.5rem;
    position: relative;
}

/* The rail is drawn between consecutive dots rather than down the whole list, so
   it starts and stops at a dot instead of stubbing out above the first one and
   trailing past the last. Logical properties keep it on the right in Arabic and on
   the left in English without a second rule. */
.apt-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    /* The dot is 2rem wide at -2.5rem, so its centre sits at -1.5rem. */
    inset-inline-start: calc(-1.5rem - 1px);
    top: 2.0625rem;      /* the bottom edge of this item's dot */
    bottom: -.0625rem;   /* the top edge of the next one's */
    width: 2px;
    background: var(--apt-border);
}

.apt-timeline-item {
    position: relative;
    padding-bottom: 1.125rem;
}

.apt-timeline-item:last-child { padding-bottom: 0; }

.apt-timeline-dot {
    position: absolute;
    inset-inline-start: -2.5rem;
    top: .0625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--apt-border);
    border-radius: 50%;
    background: var(--background-white);
    color: var(--apt-muted);
    font-size: .9375rem;
}

.apt-timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.apt-timeline-title {
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.apt-timeline-time {
    font-size: .8125rem;
    color: var(--apt-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.apt-timeline-actor {
    display: block;
    margin-top: .125rem;
    font-size: .8125rem;
    color: var(--apt-muted);
}

.apt-timeline-details {
    margin: .375rem 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--apt-muted);
}

/* Colour carries the outcome rather than decorating the list: green for the two
   steps that mean the visit went as intended, red for the two that mean it did not. */
.apt-timeline-checkedin .apt-timeline-dot,
.apt-timeline-completed .apt-timeline-dot {
    border-color: var(--apt-green);
    background: var(--apt-green-soft);
    color: var(--apt-green);
}

.apt-timeline-noshow .apt-timeline-dot,
.apt-timeline-cancelled .apt-timeline-dot {
    border-color: #e4b3ad;
    background: #fdf1ef;
    color: #c0392b;
}

.apt-timeline-reviewed .apt-timeline-dot {
    border-color: #e8c66a;
    background: #fdf7e6;
    color: #b07d06;
}

.apt-timeline-empty {
    margin: 0;
    font-size: .875rem;
    color: var(--apt-muted);
}

/* The two facts the beneficiary asks for by name: who handled it, and when the
   service window closes. Kept beside the status, not buried in the log. */
.apt-served-by,
.apt-expected {
    display: block;
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--apt-muted);
}

.apt-served-by strong { color: var(--dga-color-text, #1b1b1b); }

@media print {

    @page {
        size: A4 portrait;
        margin: 14mm;
    }

    html, body {
        background: var(--background-white) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 1. Drop the page chrome entirely. */
    header, footer, nav,
    .apt-breadcrumb-section,
    .apt-success-banner,
    .apt-note,
    .apt-actions,
    .apt-timeline-panel,
    .apt-list-actions,
    .apt-status,
    .apt-page-title,
    .apt-empty,
    .alert,
    .spinner-border,
    [class*="cookie"],
    [class*="accessibility"],
    [class*="skip-link"] {
        display: none !important;
    }

    /* 2. Flatten the layout containers. Grid columns, fixed widths and negative
          margins are what threw the card to one side; none of it means anything
          on paper. */
    .container, .container-fluid, .row, [class*="col-"],
    main, section, article,
    .apt-page, .apt-section, .apt-card, .apt-list-card, .apt-qr-inline {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        position: static !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* 3. On مواعيدي, only the opened pass prints — not the row that summarises it. */
    .apt-list-card > .row {
        display: none !important;
    }

    /* 4. The pass itself: fixed width, centred, never split across pages. */
    .apt-pass {
        display: block !important;
        width: 150mm !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border: 1.5px solid #1b1b1b !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
        overflow: hidden !important;
    }

    /* The logo is an <img>, so it prints on its own; the green rule under it needs
       colour-adjust because browsers strip borders' colour along with backgrounds. */
    .apt-pass-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5mm 7mm !important;
        background: var(--background-white) !important;
        border-bottom: 3px solid var(--apt-green) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .apt-pass-logo {
        height: 13mm !important;
        width: auto !important;
        max-width: 62% !important;
    }

    .apt-pass-kind {
        color: var(--apt-green) !important;
        font-size: 9pt !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Stacked and centred on paper — the three-column screen layout is too tight
       at 150mm and left the QR crowding the details. */
    .apt-pass-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 7mm !important;
        padding: 8mm 7mm !important;
        text-align: center !important;
    }

    .apt-pass-qr { order: 1; }
    .apt-pass-turn { order: 2; }
    .apt-pass-details { order: 3; }

    .apt-pass-qr .apt-qr {
        width: 46mm !important;
        height: 46mm !important;
        border: 1px solid #ccc !important;
    }

    .apt-booking-code {
        font-size: 15pt !important;
        letter-spacing: .08em !important;
    }

    .apt-pass-turn {
        border: 1.5px solid #1b1b1b !important;
        border-radius: 6px !important;
        padding: 4mm 8mm !important;
        background: transparent !important;
    }

    .apt-pass-turn-value {
        color: #000 !important;
        font-size: 30pt !important;
    }

    .apt-pass-turn-label,
    .apt-pass-turn-band { color: #000 !important; }

    /* Details read as a tidy two-column list rather than a centred jumble. */
    .apt-pass-details {
        width: 100% !important;
        max-width: 110mm !important;
        text-align: start !important;
        border-top: 1px dashed #bbb !important;
        padding-top: 5mm !important;
    }

    .apt-pass-details > div {
        display: flex !important;
        justify-content: space-between !important;
        gap: 6mm !important;
        margin-bottom: 3mm !important;
    }

    .apt-pass-details dt { color: #444 !important; margin: 0 !important; }
    .apt-pass-details dd { text-align: end !important; }

    .apt-pass-day {
        background: transparent !important;
        color: #000 !important;
        padding: 0 !important;
        font-weight: var(--font-weight-bold);
    }

    .apt-pass-footer {
        display: flex !important;
        justify-content: center !important;
        padding: 4mm 7mm !important;
        border-top: 1px solid #ccc !important;
        background: transparent !important;
        font-size: 9pt !important;
        color: #333 !important;
    }
}