/*
 * Laptop display scaling (Windows 125% / 150% / 175% on a 1920×1080 screen gives
 * a 1536 / 1280 / 1097 px wide, 775 / 640 / 550 px tall viewport).
 * Loaded by layouts/app and layouts/welcome-pg after the main bundle; plain CSS, no build step.
 * Full-HD at 100% is not affected.
 */

/* ---------- PDF viewers in dialogs fill the dialog (one scrollbar, at any height) ---------- */
.app-modal .ux4g-modal-box:has(> .ux4g-modal-body > .app-pdf-viewer) {
    height: calc(100vh - 2 * var(--ux4g-padding-m));
    height: calc(100dvh - 2 * var(--ux4g-padding-m));
}

.app-modal .ux4g-modal-body:has(> .app-pdf-viewer) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.app-modal .ux4g-modal-body > .app-pdf-viewer {
    flex: 1 1 auto;
    height: auto;
    min-height: 240px;
}

/* ---------- Laptop widths (scaled 125–175%) ---------- */
@media (min-width: 992px) and (max-width: 1365px) {
    :root {
        --app-sidebar-width: 224px;
    }

    .app-content {
        padding: 20px 20px 32px;
    }

    .app-page-header {
        margin-bottom: 16px;
        padding: 12px 20px 16px;
    }

    /* Home: three panels side by side instead of two + one below */
    .app-home-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Keep the four summary cards on one row down to 992px (they used to wrap to 2×2 below 1200px). */
@media (min-width: 992px) and (max-width: 1199px) {
    .app-apps-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .app-apps-kpi {
        gap: 8px;
        padding: 10px;
    }

    .app-apps-kpi-icon {
        width: 32px;
        height: 32px;
    }

    .app-apps-kpi-text .ux4g-body-xs-default {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------- Short screens (scaled 150–175%) ---------- */
@media (max-height: 820px) and (min-width: 768px) {
    /* Dialogs: tighter header and footer leave more room for the content */
    .app-modal .ux4g-modal-header {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .app-modal .ux4g-modal-actions {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .app-modal .ux4g-modal-box {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        margin-top: 8px;
    }

    .app-modal .ux4g-modal-box:has(> .ux4g-modal-body > .app-pdf-viewer) {
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
    }

    .app-modal .ux4g-textarea-input {
        min-height: 72px;
    }

    /* Public home: smaller masthead, panels sized to the screen */
    .app-pmast-inner {
        padding-block: 6px;
    }

    .app-pmast-logo,
    .app-pmast-swachh {
        height: 40px;
    }

    .app-home-wrap {
        padding-top: 12px;
    }

    .app-home-auth {
        margin-bottom: 12px;
    }

    .app-pcard {
        height: max(400px, calc(100vh - 230px));
        height: max(400px, calc(100dvh - 230px));
    }
}

@media (max-height: 620px) and (min-width: 768px) {
    /* The IP / browser / OS strip is informational; hide it when space is tight. */
    .app-sysbar {
        display: none;
    }

    .app-pmast-title .ux4g-body-s-strong {
        display: none;
    }

    .app-page-header {
        gap: 6px;
    }
}

/* ---------- Login / register / forgot password (layouts/guest) ---------- */
/* Light, soft shadow on the auth cards (candidate login / register / forgot password, admin login). */
.app-login,
.app-guest .app-auth {
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 6px 20px rgb(16 24 40 / 0.06);
}

/* The "How to apply" box inside the login card stays flat. */
.app-login-steps-card {
    box-shadow: none;
}

/* Centre the card in the space below the masthead (auto margins collapse when it does not fit). */
.app-guest .app-guest-main {
    display: flex;
    flex-direction: column;
}

.app-guest .app-guest-main > .app-login,
.app-guest .app-guest-main > .app-auth {
    margin-block: auto;
}

/* Left panel content lines up with the form instead of leaving a gap at the bottom. */
.app-login-aside {
    justify-content: center;
}

.app-login-aside .app-login-help {
    margin-top: 0;   /* keep "Need help?" with the steps instead of pinned to the bottom */
}

@media (min-width: 992px) and (max-height: 820px) {
    .app-login-aside,
    .app-login-form {
        gap: 12px;
        padding-block: 16px;
    }

    .app-login-form .app-auth-fields {
        gap: 12px;
    }

    .app-login-lock {
        width: 44px;
        height: 44px;
        margin-bottom: 0 !important;
    }

    .app-login-steps-card {
        gap: 8px;
        padding: 12px 16px;
    }

    .app-login-welcome {
        font-size: 26px;
    }
}

@media (max-height: 700px) and (min-width: 768px) {
    /* The IP / browser / OS strip is informational; hide it when space is tight. */
    .app-sysbar {
        display: none;
    }
}

/* ---------- Public pages background: soft tint, radar rings + sweep, microwave wave lines ---------- */
.app-guest .app-guest-main {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(900px 520px at 0% 0%, rgb(254 243 199 / 0.55), transparent 65%),
        radial-gradient(800px 520px at 100% 100%, rgb(219 234 254 / 0.45), transparent 65%),
        var(--ux4g-bg-neutral);
}

/* Radar rings in the top-right corner, with a slow sweep */
.app-guest .app-guest-main::before {
    content: '';
    display: block;
    position: absolute;
    top: -260px;
    right: -260px;
    bottom: auto;
    left: auto;
    z-index: -1;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgb(245 158 11 / 0.14), transparent 22%, transparent),
        repeating-radial-gradient(circle, transparent 0 46px, rgb(217 119 6 / 0.10) 46px 47.5px);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 70%);
    mask-image: radial-gradient(circle, #000 55%, transparent 70%);
    pointer-events: none;
    animation: app-bg-sweep 14s linear infinite;
}

/* Microwave wave lines along the bottom */
.app-guest .app-guest-main::after {
    content: '';
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: auto;
    height: 180px;
    border-radius: 0;
    opacity: 1;
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath d='M0 60 Q30 40 60 60 T120 60 T180 60 T240 60' stroke='%23d97706' stroke-opacity='.16'/%3E%3Cpath d='M0 95 Q30 75 60 95 T120 95 T180 95 T240 95' stroke='%237c5cf0' stroke-opacity='.12'/%3E%3Cpath d='M0 130 Q30 110 60 130 T120 130 T180 130 T240 130' stroke='%233b82f6' stroke-opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 240px 180px;
    -webkit-mask-image: linear-gradient(0deg, #000, transparent);
    mask-image: linear-gradient(0deg, #000, transparent);
    pointer-events: none;
    animation: app-bg-waves 30s linear infinite;
}

@keyframes app-bg-sweep {
    to { transform: rotate(360deg); }
}

@keyframes app-bg-waves {
    to { background-position: 240px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app-guest .app-guest-main::before,
    .app-guest .app-guest-main::after {
        animation: none;
    }
}

/* Masthead: the Swachh Bharat image has ~20 % empty margin around its artwork,
   so scale it up to look the same size as the SAMEER logo (layout height unchanged). */
.app-pmast-swachh {
    transform: scale(1.24);
    transform-origin: right center;
}

/* ---------- My applications: skeleton (placeholder + fade-out veil) ---------- */
.app-mas {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-mas .app-skeleton {
    display: inline-block;
    height: 12px;
    border-radius: 6px;
}

.app-mas-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-mas .app-mas-search { flex: 0 1 448px; height: 40px; border-radius: 8px; }
.app-mas-tabs { display: inline-flex; gap: 6px; margin-left: auto; padding: 4px; border-radius: 10px; background: var(--ux4g-color-secondary-50); }
.app-mas .app-mas-tab { width: 86px; height: 32px; border-radius: 8px; }
.app-mas .app-mas-select { width: 160px; height: 40px; border-radius: 8px; }
.app-mas .app-mas-select-s { width: 128px; }

.app-mas-table {
    overflow: hidden;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 12px;
}

.app-mas-row {
    display: grid;
    grid-template-columns: 40px 1fr 1.4fr 2fr 1fr 1fr 2.2fr;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 0 16px;
    border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.app-mas-row:first-child { border-top: 0; }
.app-mas-head { min-height: 42px; background: var(--ux4g-bg-neutral); }
.app-mas .app-mas-thin { height: 9px; }
.app-mas-advt, .app-mas-actions { display: inline-flex; align-items: center; gap: 6px; }
.app-mas-post { display: inline-flex; flex-direction: column; gap: 6px; }
.app-mas .app-mas-dot { width: 14px; height: 14px; border-radius: 4px; }
.app-mas .app-mas-pill { width: 96px; height: 26px; border-radius: 999px; }
.app-mas .app-mas-button { width: 120px; height: 26px; border-radius: 6px; }

/* Smooth hand-over: veil holds briefly, fades out; real content rises in underneath */
.app-mas-reveal { position: relative; }

.app-mas-reveal > .app-mas-veil {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    background-color: var(--ux4g-bg-neutral-elevated);
    pointer-events: none;
    animation: app-mas-veil-out 0.6s ease-in-out 0.5s forwards;
}

.app-mas-reveal > :not(.app-mas-veil) {
    animation: app-mas-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-mas-reveal > :not(.app-mas-veil):nth-child(2) { animation-delay: 0.5s; }
.app-mas-reveal > :not(.app-mas-veil):nth-child(3) { animation-delay: 0.6s; }
.app-mas-reveal > :not(.app-mas-veil):nth-child(n+4) { animation-delay: 0.7s; }

@keyframes app-mas-veil-out {
    to { opacity: 0; visibility: hidden; }
}

@keyframes app-mas-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 991px) {
    .app-mas-toolbar { flex-wrap: wrap; }
    .app-mas-tabs { margin-left: 0; }
    .app-mas-row { grid-template-columns: 30px 1fr 1fr 1fr; }
    .app-mas-row > :nth-child(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-mas-reveal > .app-mas-veil { display: none; }
    .app-mas-reveal > * { animation: none !important; }
}
.app-mas .app-skeleton { margin: 0; }

/* My applications: page-level skeleton pieces */
.app-mas-page .app-skeleton { display: inline-block; height: 12px; margin: 0; border-radius: 6px; }
.app-mas-crumbs { display: inline-flex; gap: 14px; margin-bottom: 4px; }
.app-mas-htext { display: inline-flex; flex-direction: column; gap: 8px; }
.app-mas-page .app-mas-hicon { width: 56px; height: 56px; border-radius: 12px; }
.app-mas-page .app-mas-htitle { width: 220px; height: 22px; }
.app-mas-page .app-mas-cicon { width: 36px; height: 36px; border-radius: 8px; }

/* Table-action skeleton (search / filter / sort / paging) */
.app-mas-loading .app-skeleton { display: inline-block; height: 12px; margin: 0; border-radius: 6px; }
.app-mas-loading .app-mas-thin { height: 9px; }
.app-mas-loading { animation: app-mas-fade-in 0.15s ease both; }

@keyframes app-mas-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Table-skeleton pieces wherever the table skeleton is used (refresh veil and table actions) */
.app-mas-table .app-skeleton { display: inline-block; height: 12px; margin: 0; border-radius: 6px; }
.app-mas-table .app-mas-thin { height: 9px; }
.app-mas-table .app-mas-dot { width: 14px; height: 14px; border-radius: 4px; }
.app-mas-table .app-mas-pill { width: 96px; height: 26px; border-radius: 999px; }
.app-mas-table .app-mas-button { width: 120px; height: 26px; border-radius: 6px; }

/* Admin dashboard: full-page skeleton while switching advertisement */
.app-dash-reveal > .app-dash-switch {
    position: absolute;
    inset: 0;
    z-index: 7;
    overflow: hidden;
    background-color: var(--ux4g-bg-neutral);
}

.app-dash-switch .app-dash-hero-skeleton,
.app-dash-switch .app-skel-card {
    animation: none;
}

.app-dash-switch-in { transition: opacity 0.25s ease; }
.app-dash-switch-from { opacity: 0; }
.app-dash-switch-to { opacity: 1; }
.app-dash-reveal > .app-dash-switch { animation: none; }

/* Admin support ticket: attachment block */
.app-ticket-attachment {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 10px;
    background-color: var(--ux4g-bg-neutral);
}

.app-ticket-attachment-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ux4g-text-neutral-secondary);
    font-size: 12px;
    font-weight: var(--ux4g-fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-ticket-attachment-thumb {
    display: block;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 8px;
    background-color: #ffffff;
}

.app-ticket-attachment-thumb img { display: block; max-width: 100%; max-height: 260px; margin: 0 auto; object-fit: contain; }

.app-ticket-attachment-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-ticket-attachment-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ux4g-text-neutral-primary); font-size: 13px; font-weight: var(--ux4g-fw-semibold); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Admin support: "Reply by e-mail?" dialog ---------- */
#replyModal .app-reply-confirm {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#replyModal .app-reply-confirm p { margin: 0; }

#replyModal .app-reply-lead {
    color: var(--ux4g-text-neutral-secondary);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Recipient + ticket card */
#replyModal .app-reply-card {
    overflow: hidden;
    border: 1px solid var(--ux4g-color-secondary-200);
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}

#replyModal .app-reply-recipient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(120deg, #fff7ed, #ffffff);
}

#replyModal .app-reply-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #ea580c);
    box-shadow: 0 4px 10px rgb(234 88 12 / 0.25);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#replyModal .app-reply-recipient-text,
#replyModal .app-reply-ticket-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#replyModal .app-reply-name {
    color: var(--ux4g-text-neutral-primary);
    font-size: 15px;
    font-weight: var(--ux4g-fw-bold);
    line-height: 1.3;
}

#replyModal .app-reply-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    color: var(--ux4g-text-neutral-secondary);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#replyModal .app-reply-email .ux4g-icon-outlined { flex-shrink: 0; color: var(--ux4g-text-brand-primary-default); }

#replyModal .app-reply-ticket {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px dashed var(--ux4g-color-secondary-200);
}

#replyModal .app-reply-ticket > .ux4g-icon-outlined {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: var(--ux4g-color-secondary-100);
    color: var(--ux4g-text-brand-primary-default);
}

#replyModal .app-reply-ticket-no {
    width: fit-content;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--ux4g-color-secondary-50);
    border: 1px solid var(--ux4g-color-secondary-200);
    color: var(--ux4g-text-brand-primary-default);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: var(--ux4g-fw-bold);
}

#replyModal .app-reply-ticket-subject {
    overflow: hidden;
    color: var(--ux4g-text-neutral-primary);
    font-size: 13.5px;
    font-weight: var(--ux4g-fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

#replyModal .app-reply-ticket .app-tag { flex-shrink: 0; }

/* Status-change hint */
#replyModal .app-reply-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background-color: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.4;
}

#replyModal .app-reply-hint .ux4g-icon-outlined { flex-shrink: 0; color: #2563eb; }

/* ---------- Admin support: ticket view (two columns) ---------- */
.app-tv {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start;
}

.app-tv p, .app-tv h3 { margin: 0; }
.app-tv .ux4g-icon-outlined { color: inherit; }

.app-tv-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Person card */
.app-tv-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ux4g-color-secondary-200);
    border-radius: 14px;
    background: linear-gradient(120deg, #fff7ed, #ffffff 70%);
}

.app-tv-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #ea580c);
    box-shadow: 0 4px 12px rgb(234 88 12 / 0.25);
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.app-tv-person-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.app-tv-name { color: var(--ux4g-text-neutral-primary); font-size: 17px; font-weight: var(--ux4g-fw-bold); }
.app-tv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.app-tv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--ux4g-text-neutral-secondary);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.app-tv-chip .ux4g-icon-outlined { font-size: 15px; color: var(--ux4g-text-brand-primary-default); }
a.app-tv-chip:hover { border-color: var(--ux4g-border-color-primary-default); color: var(--ux4g-text-brand-primary-default); }

/* Issue card */
.app-tv-issue {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
    background-color: #ffffff;
}

.app-tv-issue-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.app-tv-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 7px;
    border-radius: 999px;
    background-color: var(--ux4g-color-secondary-100);
    color: var(--ux4g-text-brand-primary-default);
    font-size: 12px;
    font-weight: var(--ux4g-fw-bold);
}

.app-tv-category .ux4g-icon-outlined { font-size: 15px; }
.app-tv-time { color: var(--ux4g-text-neutral-tertiary); font-size: 12px; }
.app-tv-subject { color: var(--ux4g-text-neutral-primary); font-size: 16px; font-weight: var(--ux4g-fw-bold); line-height: 1.35; }

.app-tv-message {
    color: var(--ux4g-text-neutral-secondary);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Attachment tile */
.app-tv-attach {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 12px;
    background-color: var(--ux4g-bg-neutral);
}

.app-tv-attach-thumb {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 84px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 10px;
    background-color: #ffffff;
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.app-tv-attach-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(0 0 0 / 0.1); }
.app-tv-attach-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.app-tv-attach-thumb.is-pdf { background-color: #fef2f2; color: #dc2626; cursor: pointer; }
.app-tv-attach-thumb.is-pdf .ux4g-icon-outlined { font-size: 34px; }

.app-tv-attach-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }

.app-tv-attach-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ux4g-text-neutral-tertiary);
    font-size: 11px;
    font-weight: var(--ux4g-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-tv-attach-label .ux4g-icon-outlined { font-size: 14px; }
.app-tv-attach-name { overflow: hidden; color: var(--ux4g-text-neutral-primary); font-size: 13.5px; font-weight: var(--ux4g-fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.app-tv-attach-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* Side panel */
.app-tv-side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--ux4g-color-secondary-200);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--ux4g-color-secondary-50), #ffffff);
}

.app-tv-side-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ux4g-text-neutral-secondary);
    font-size: 12px;
    font-weight: var(--ux4g-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-tv-side-title .ux4g-icon-outlined { font-size: 17px; color: var(--ux4g-text-brand-primary-default); }
.app-tv-form { display: flex; flex-direction: column; gap: 14px; }

/* Status cards */
.app-tv-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.app-tv-status legend { margin-bottom: 6px; padding: 0; color: var(--ux4g-text-neutral-primary); font-size: 13px; font-weight: var(--ux4g-fw-semibold); }

.app-tv-status-opt {
    --c: #b45309; --c-soft: #fef3c7;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1.5px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: 10px;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.app-tv-status-opt.is-in_progress { --c: #1d4ed8; --c-soft: #dbeafe; }
.app-tv-status-opt.is-resolved { --c: #15803d; --c-soft: #dcfce7; }
.app-tv-status-opt.is-closed { --c: #475467; --c-soft: #eef0f3; }

.app-tv-status-opt:hover { border-color: var(--c); }
.app-tv-status-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--c-soft); }

.app-tv-status-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--c-soft);
    color: var(--c);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.app-tv-status-icon .ux4g-icon-outlined { font-size: 17px; }
.app-tv-status-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.app-tv-status-text strong { color: var(--ux4g-text-neutral-primary); font-size: 13px; }
.app-tv-status-text small { overflow: hidden; color: var(--ux4g-text-neutral-tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.app-tv-status-opt:has(input:checked) {
    border-color: var(--c);
    background-color: var(--c-soft);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
}

.app-tv-status-opt:has(input:checked) .app-tv-status-icon { background-color: var(--c); color: #ffffff; }
.app-tv-status-opt:has(input:checked) .app-tv-status-text strong { color: var(--c); }

.app-tv-history {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--ux4g-color-secondary-200);
    color: var(--ux4g-text-neutral-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.app-tv-history .ux4g-icon-outlined { flex-shrink: 0; font-size: 16px; }
.app-tv-history strong { color: var(--ux4g-text-neutral-secondary); }

@media (max-width: 860px) {
    .app-tv { grid-template-columns: minmax(0, 1fr); }
    .app-tv-side { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .app-tv * { transition: none !important; }
}

/* Ticket view: the xl dialog removes body padding; give the two columns some room */
.app-modal .app-tv-modal .ux4g-modal-body,
.app-tv-modal .ux4g-modal-xl .ux4g-modal-body {
    padding: 16px 20px;
}

/* Admin → Admit cards: four filters in one row */
.app-apps-filters.app-ac-list-filters {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(120px, 0.5fr);
}

@media (max-width: 991px) {
    .app-apps-filters.app-ac-list-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Admin → Admit cards: selection bar + e-mail dialog ---------- */
.app-ac-actions > .app-apps-action-group { flex: 1 1 auto; }
.app-ac-actions > .app-ac-sel-group { flex: 0 0 auto; }
.app-ac-actions .app-apps-action-buttons > .ux4g-btn-primary { flex: 1 1 auto; justify-content: center; }
.app-apps-selected-hidden { align-self: center; padding: 2px 8px; border-radius: 999px; background-color: #eff6ff; color: #1d4ed8; font-size: 11.5px; font-weight: var(--ux4g-fw-semibold); white-space: nowrap; }
.app-apps-table tbody tr.is-selected { background-color: var(--ux4g-color-secondary-50); }

.app-acm p { margin: 0; }
.app-acm .ux4g-icon-outlined { color: inherit; }
.app-acm-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.app-acm-hero { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #ea580c); box-shadow: 0 6px 16px rgb(234 88 12 / 0.28); color: #ffffff; }
.app-acm-hero .ux4g-icon-outlined { font-size: 30px; }
.app-acm-lead { color: var(--ux4g-text-neutral-primary); font-size: 16px; }
.app-acm-points { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--ux4g-color-secondary-200); border-radius: 12px; background-color: var(--ux4g-color-secondary-50); list-style: none; text-align: left; }
.app-acm-points li { display: flex; align-items: center; gap: 8px; color: var(--ux4g-text-neutral-secondary); font-size: 13.5px; }
.app-acm-points .ux4g-icon-outlined { flex-shrink: 0; color: var(--ux4g-text-brand-primary-default); font-size: 18px; }
.app-acm-note { color: #b45309; font-size: 12.5px; font-weight: var(--ux4g-fw-semibold); }

.app-acm-progress { display: flex; flex-direction: column; gap: 12px; }
.app-acm-progress-head { display: flex; justify-content: space-between; color: var(--ux4g-text-neutral-primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.app-acm-bar { height: 10px; overflow: hidden; border-radius: 999px; background-color: var(--ux4g-color-secondary-100); }
.app-acm-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background-color: var(--ux4g-bg-primary-strong); background-image: linear-gradient(45deg, rgb(255 255 255 / 0.25) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.25) 50%, rgb(255 255 255 / 0.25) 75%, transparent 75%, transparent); background-size: 16px 16px; transition: width 0.3s ease; }
.app-acm-bar > span.is-done { background-color: var(--ux4g-bg-success-strong); background-image: none; }
.app-acm-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.app-acm-stats > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.app-acm-stats .ux4g-icon-outlined { font-size: 16px; }
.app-acm-stats .is-sent { background-color: #ecfdf3; color: #15803d; }
.app-acm-stats .is-skipped { background-color: #fffbeb; color: #b45309; }
.app-acm-stats .is-failed { background-color: #fef2f2; color: #dc2626; }
.app-acm-problems { display: flex; flex-direction: column; gap: 4px; max-height: 200px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.app-acm-problems li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background-color: var(--ux4g-bg-neutral); font-size: 12.5px; }
.app-acm-problems li.is-failed { background-color: #fef2f2; color: #b91c1c; }
.app-acm-problem-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: var(--ux4g-fw-bold); }
.app-acm-actions { display: flex; gap: 10px; justify-content: flex-end; width: 100%; }

/* Admit cards: clickable rows and clearly visible checkboxes */
.app-ac-actions ~ .app-table-loading-frame .app-apps-rows tr[data-ac-row] { cursor: pointer; }
.app-ac-actions ~ .app-table-loading-frame .app-apps-rows tr[data-ac-row]:hover { background-color: var(--ux4g-color-secondary-50); }
.app-ac-actions ~ .app-table-loading-frame .ux4g-checkbox-control {
    border: 1.5px solid var(--ux4g-border-color-primary-default, #f0a63a) !important;
    background-color: #ffffff;
}

/* Admit card e-mail: compose */
.app-acm-compose { display: flex; flex-direction: column; gap: 12px; }
.app-acm-field { display: flex; flex-direction: column; gap: 5px; }
.app-acm-label { color: var(--ux4g-text-neutral-primary); font-size: 13px; font-weight: var(--ux4g-fw-semibold); }
.app-acm-label small { color: var(--ux4g-text-neutral-tertiary); font-weight: 400; }
.app-acm-input { width: 100%; padding: 9px 12px; border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; }
.app-acm-input:focus { outline: 2px solid var(--ux4g-border-color-primary-hover); outline-offset: 0; border-color: transparent; }
.app-acm-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.app-acm-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; padding: 8px; overflow-y: auto; border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 8px; background: #fff; }
.app-acm-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid var(--ux4g-color-secondary-200); border-radius: 999px; background: var(--ux4g-color-secondary-50); font-size: 12.5px; }
.app-acm-chip-name { font-weight: var(--ux4g-fw-semibold); color: var(--ux4g-text-neutral-primary); white-space: nowrap; }
.app-acm-chip-mail { overflow: hidden; color: var(--ux4g-text-neutral-secondary); text-overflow: ellipsis; white-space: nowrap; }
.app-acm-chip button { display: inline-flex; padding: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--ux4g-text-neutral-tertiary); cursor: pointer; }
.app-acm-chip button:hover { background: #fee2e2; color: #dc2626; }
.app-acm-chip button .ux4g-icon-outlined { font-size: 15px; }
.app-acm-chip.is-off { border-style: dashed; opacity: 0.55; }
.app-acm-hint { margin: 0; color: var(--ux4g-text-neutral-tertiary); font-size: 12px; }
.app-acm-hint code { padding: 0 4px; border-radius: 4px; background: var(--ux4g-bg-neutral); font-size: 11.5px; }
.app-acm-attach { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--ux4g-color-secondary-50); color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; }
.app-acm-attach .ux4g-icon-outlined { flex-shrink: 0; color: var(--ux4g-text-brand-primary-default); font-size: 17px; }
.app-acm-error { margin: 0; color: #dc2626; font-size: 12.5px; font-weight: var(--ux4g-fw-semibold); }
.app-acm-loading { display: flex; align-items: center; gap: 8px; color: var(--ux4g-text-neutral-secondary); font-size: 13px; }

/* ---------- Admit card e-mail: mail-client style compose ---------- */
.app-mc { display: flex; flex-direction: column; gap: 10px; }
.app-mc p { margin: 0; }
.app-mc .ux4g-icon-outlined { color: inherit; }
.app-mc-sheet { overflow: hidden; border: 1px solid var(--ux4g-border-color-neutral-subtle); border-radius: 14px; background: #ffffff; box-shadow: 0 1px 3px rgb(16 24 40 / 0.05); }

.app-mc-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle); }
.app-mc-row.is-to { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.app-mc-label { flex: 0 0 58px; padding-top: 2px; color: var(--ux4g-text-neutral-tertiary); font-size: 13px; font-weight: var(--ux4g-fw-semibold); }
.app-mc-row.is-to .app-mc-label { padding-top: 7px; }
.app-mc-input { flex: 1 1 auto; min-width: 0; padding: 6px 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ux4g-text-neutral-primary); }
.app-mc-subject { font-weight: var(--ux4g-fw-semibold); }
.app-mc-row:focus-within { background: #fffcf7; }

.app-mc-chips { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; min-width: 0; max-height: 120px; overflow-y: auto; }
.app-mc-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 3px 4px 3px 3px; border: 1px solid var(--ux4g-color-secondary-200); border-radius: 999px; background: var(--ux4g-color-secondary-50); transition: border-color 0.15s ease; }
.app-mc-chip:hover { border-color: var(--ux4g-border-color-primary-default); }
.app-mc-avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #ea580c); color: #ffffff; font-size: 11px; font-weight: 800; }
.app-mc-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.app-mc-chip-text strong { overflow: hidden; color: var(--ux4g-text-neutral-primary); font-size: 12.5px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.app-mc-chip-text small { overflow: hidden; color: var(--ux4g-text-neutral-secondary); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.app-mc-chip button, .app-mc-x { display: inline-flex; flex-shrink: 0; padding: 3px; border: 0; border-radius: 50%; background: transparent; color: var(--ux4g-text-neutral-tertiary); cursor: pointer; }
.app-mc-chip button:hover, .app-mc-x:hover { background: #fee2e2; color: #dc2626; }
.app-mc-chip button .ux4g-icon-outlined, .app-mc-x .ux4g-icon-outlined { font-size: 15px; }
.app-mc-chip.is-off { border-style: dashed; opacity: 0.5; }
.app-mc-chip.is-off .app-mc-avatar { background: #98a2b3; }
/* Cc / Bcc chip inputs */
.app-mc-row.is-chips { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; cursor: text; }
.app-mc-row.is-chips .app-mc-label { padding-top: 8px; }
.app-mc-row.is-chips .app-mc-x { margin-top: 5px; }
.app-mc-row.is-chips .app-mc-chips { align-items: center; }
.app-mc-chip-input { flex: 1 0 160px; min-height: 34px; }
.app-mc-chip.is-copy { animation: app-mc-chip-in 0.2s ease both; }
.app-mc-chip.is-copy .app-mc-avatar { background: linear-gradient(135deg, #60a5fa, #4f46e5); }
.app-mc-chip.is-bad { border-color: #fca5a5; background: #fef2f2; }
.app-mc-chip.is-bad .app-mc-avatar { background: #ef4444; }
.app-mc-chip.is-bad .app-mc-chip-text small { color: #dc2626; }
@keyframes app-mc-chip-in { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

.app-mc-toggles { display: inline-flex; flex-shrink: 0; gap: 2px; padding-top: 5px; }
.app-mc-toggles button { padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ux4g-text-neutral-secondary); font: inherit; font-size: 13px; font-weight: var(--ux4g-fw-semibold); cursor: pointer; }
.app-mc-toggles button:hover { background: var(--ux4g-color-secondary-100); color: var(--ux4g-text-brand-primary-default); }

.app-mc-skip { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle); background: #fffbeb; color: #b45309; font-size: 12px; }
.app-mc-skip .ux4g-icon-outlined { font-size: 16px; }

.app-mc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px dashed var(--ux4g-border-color-neutral-subtle); background: var(--ux4g-bg-neutral); }
.app-mc-tools-label { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; color: var(--ux4g-text-neutral-tertiary); font-size: 11.5px; font-weight: var(--ux4g-fw-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.app-mc-tools-label .ux4g-icon-outlined { font-size: 15px; }
.app-mc-tag { padding: 2px 9px; border: 1px solid #d9d0f5; border-radius: 999px; background: #f6f3ff; color: #4a2bc2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; cursor: pointer; transition: background-color 0.15s ease; }
.app-mc-tag:hover { background: #4a2bc2; color: #ffffff; }

.app-mc-body { display: block; width: 100%; min-height: 150px; padding: 14px; border: 0; outline: 0; resize: vertical; background: #ffffff; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ux4g-text-neutral-primary); }

.app-mc-attach { display: flex; align-items: center; gap: 12px; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid var(--ux4g-border-color-neutral-subtle); border-radius: 12px; background: var(--ux4g-bg-neutral); }
.app-mc-file-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 44px; border-radius: 6px; background: #fef2f2; color: #dc2626; box-shadow: inset 0 0 0 1px #fecaca; }
.app-mc-file-icon .ux4g-icon-outlined { font-size: 22px; }
.app-mc-file-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.app-mc-file-text strong { overflow: hidden; color: var(--ux4g-text-neutral-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.app-mc-file-text small { color: var(--ux4g-text-neutral-tertiary); font-size: 11.5px; }
.app-mc-lock { display: inline-flex; flex-shrink: 0; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: #ecfdf3; color: #15803d; font-size: 11.5px; font-weight: var(--ux4g-fw-bold); }
.app-mc-lock .ux4g-icon-outlined { font-size: 14px; }

.app-mc-foot { align-items: center; }
.app-mc-summary { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
.app-mc-summary .ux4g-icon-outlined { color: var(--ux4g-text-brand-primary-default); font-size: 18px; }
#admitCardMailModal .ux4g-modal-body { background: var(--ux4g-bg-neutral); }

/* Admit cards: compact, standard-size e-mail button */
.app-ac-actions > .app-apps-action-group { flex: 0 0 auto; }
.app-ac-actions .app-apps-action-buttons > .ux4g-btn-primary { flex: 0 0 auto; min-width: 0; padding-inline: 16px; }

/* Admit card e-mail status (table column) */
.app-ml { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: var(--ux4g-fw-semibold); white-space: nowrap; }
.app-ml .ux4g-icon-outlined { color: inherit; font-size: 15px; }
.app-ml small { margin-left: 2px; font-weight: 400; opacity: 0.8; }
.app-ml-none { padding: 0; color: var(--ux4g-text-neutral-tertiary); }
.app-ml-sent { background: #ecfdf3; color: #15803d; }
.app-ml-sending { background: #eff6ff; color: #1d4ed8; }
.app-ml-queued { background: #fffbeb; color: #b45309; cursor: help; }
.app-ml-failed { background: #fef2f2; color: #dc2626; cursor: help; }
.app-ml-failed button { display: inline-flex; margin-left: 2px; padding: 1px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.app-ml-failed button:hover { background: #dc2626; color: #fff; }
.app-acm-stats .is-pending { background-color: #eff6ff; color: #1d4ed8; }
.app-acm-bg { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--ux4g-bg-neutral); color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; line-height: 1.45; }
.app-acm-bg .ux4g-icon-outlined { flex-shrink: 0; color: var(--ux4g-text-brand-primary-default); font-size: 17px; }

/* Compose: grouped placeholders + rich-text editor */
.app-mc-tools { gap: 6px 14px; }
.app-mc-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.app-mc-group-label { display: inline-flex; align-items: center; gap: 3px; color: var(--ux4g-text-neutral-tertiary); font-size: 11px; font-weight: var(--ux4g-fw-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.app-mc-group-label .ux4g-icon-outlined { font-size: 14px; }
.app-mc-tag { font-family: inherit; font-size: 12px; font-weight: var(--ux4g-fw-semibold); }

.app-mc-rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 10px; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle); background: #ffffff; }
.app-mc-rte-bar button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--ux4g-text-neutral-secondary); cursor: pointer; }
.app-mc-rte-bar button:hover { background: var(--ux4g-color-secondary-100); color: var(--ux4g-text-brand-primary-default); }
.app-mc-rte-bar .ux4g-icon-outlined { font-size: 19px; color: inherit; }
.app-mc-rte-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--ux4g-border-color-neutral-subtle); }

/* ---------- Compose mail: modern look ---------- */
#admitCardMailModal .ux4g-modal-body { background: linear-gradient(180deg, #fff8f1 0%, #f8fafc 140px); }
.app-mc-sheet {
    position: relative; overflow: visible; border: 1px solid #f1e3cf; border-radius: 18px; background: #ffffff;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 16px 32px -20px rgb(234 88 12 / 0.35);
    animation: app-mc-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Gradient top edge drawn as the card's own border, so it follows the rounded corners. */
.app-mc-sheet {
    border-top: 4px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #f59e0b, #ea580c, #db2777) border-box;
}
.app-mc-sheet > :first-child { border-radius: 14px 14px 0 0; }

.app-mc-row { position: relative; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid #f2f4f7; transition: background 0.2s ease; }
.app-mc-row::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(#f59e0b, #ea580c); transform: scaleY(0); transition: transform 0.2s ease; }
.app-mc-row:focus-within { background: #fffaf3; }
.app-mc-row:focus-within::after { transform: scaleY(1); }
.app-mc-label {
    flex: 0 0 64px; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
    height: 28px; margin-top: 3px; padding: 0 8px; border-radius: 8px; background: #f2f4f7;
    color: #475467; font-size: 12px; font-weight: var(--ux4g-fw-bold, 700); letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease;
}
.app-mc-row.is-to .app-mc-label, .app-mc-row.is-chips .app-mc-label { padding-top: 0; }
.app-mc-row:focus-within .app-mc-label { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #ffffff; }
.app-mc-row.is-subject { align-items: center; }
.app-mc-row.is-subject .app-mc-label { align-self: center; margin-top: 0; }
.app-mc-subject { font-size: 15px; font-weight: var(--ux4g-fw-semibold, 600); }
.app-mc-count { flex-shrink: 0; color: #98a2b3; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.2s ease; }
.app-mc-row:focus-within .app-mc-count { opacity: 1; }
.app-mc-toggles button { border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; }
.app-mc-toggles button:hover { border-color: #fed7aa; background: #fff7ed; }
.app-mc-chip { box-shadow: 0 1px 2px rgb(16 24 40 / 0.06); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.app-mc-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 12px -8px rgb(234 88 12 / 0.6); }
.app-mc-chip.is-copy { border-color: #c7d2fe; background: #eef2ff; }
.app-mc-chip.is-copy:hover { box-shadow: 0 6px 12px -8px rgb(79 70 229 / 0.6); }

/* Toolbar: formatting left, "Insert field" right */
.app-mc-toolbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 12px; border-bottom: 1px solid #f2f4f7; background: #fcfcfd; }
.app-mc-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.app-mc-fmt button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #475467; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.app-mc-fmt button:hover { background: #fff1e0; color: #c2410c; transform: translateY(-1px); }
.app-mc-fmt button:active { transform: scale(0.92); }
.app-mc-fmt .ux4g-icon-outlined { font-size: 19px; }
.app-mc-insert { position: relative; flex-shrink: 0; }
.app-mc-insert-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border: 1px solid #ddd6fe; border-radius: 999px;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #5b21b6; font: inherit; font-size: 13px; font-weight: var(--ux4g-fw-semibold, 600); cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.app-mc-insert-btn:hover, .app-mc-insert-btn.is-open { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #ffffff; box-shadow: 0 8px 16px -8px rgb(109 40 217 / 0.7); }
.app-mc-insert-btn .ux4g-icon-outlined { font-size: 17px; }
.app-mc-insert-caret { transition: transform 0.2s ease; }
.app-mc-insert-btn.is-open .app-mc-insert-caret { transform: rotate(180deg); }

.app-mc-pop {
    position: absolute; top: calc(100% + 8px); right: 0; width: min(400px, 82vw); padding: 12px; border: 1px solid #ede9fe; border-radius: 16px;
    background: #ffffff; box-shadow: 0 24px 48px -16px rgb(16 24 40 / 0.28), 0 2px 6px rgb(16 24 40 / 0.06); transform-origin: top right;
}
.app-mc-pop-enter { transition: opacity 0.16s ease, transform 0.16s ease; }
.app-mc-pop-from { opacity: 0; transform: translateY(-6px) scale(0.96); }
.app-mc-pop-to { opacity: 1; transform: none; }
.app-mc-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #ede9fe; color: #101828; font-size: 13px; font-weight: var(--ux4g-fw-semibold, 600); }
.app-mc-pop-target { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: #f5f3ff; color: #6d28d9; font-size: 11.5px; }
.app-mc-pop-target .ux4g-icon-outlined { font-size: 14px; }
.app-mc-pop-group + .app-mc-pop-group { margin-top: 10px; }
.app-mc-pop-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: #667085; font-size: 11px; font-weight: var(--ux4g-fw-bold, 700); letter-spacing: 0.06em; text-transform: uppercase; }
.app-mc-pop-label .ux4g-icon-outlined { font-size: 14px; }
.app-mc-pop-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.app-mc-pop .app-mc-tag {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 1px solid #eaecf0; border-radius: 10px;
    background: #ffffff; color: #101828; font-size: 12.5px; text-align: left; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.app-mc-pop .app-mc-tag code { color: #7c3aed; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.app-mc-pop .app-mc-tag:hover { border-color: #c4b5fd; background: #f5f3ff; color: #101828; transform: translateY(-1px); }

/* Editor */
.app-mc-editor { min-height: 180px; padding: 18px 20px; font-size: 14.5px; line-height: 1.7; }
.app-mc-editor:focus { background: #fffdfa; }

/* Attachment */
.app-mc-files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px 14px; border-top: 1px dashed #eaecf0; border-radius: 0 0 18px 18px; background: #fcfcfd; }
.app-mc-files-label { display: inline-flex; align-items: center; gap: 4px; color: #667085; font-size: 12px; font-weight: var(--ux4g-fw-semibold, 600); }
.app-mc-files-label .ux4g-icon-outlined { font-size: 16px; transform: rotate(45deg); }
.app-mc-file {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 6px 14px 6px 6px; border: 1px solid #eaecf0; border-radius: 12px;
    background: #ffffff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.app-mc-file:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgb(220 38 38 / 0.45); }
.app-mc-file.is-stack { box-shadow: 4px 4px 0 -1px #ffffff, 4px 4px 0 0 #eaecf0, 8px 8px 0 -1px #ffffff, 8px 8px 0 0 #f2f4f7; margin-right: 8px; }
.app-mc-doc { position: relative; flex-shrink: 0; width: 32px; height: 40px; overflow: hidden; border: 1px solid #fecaca; border-radius: 4px 9px 4px 4px; background: #ffffff; }
.app-mc-doc::before { content: ''; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-bottom-left-radius: 3px; background: linear-gradient(225deg, #ffffff 50%, #fecaca 50%); }
.app-mc-doc-lines { position: absolute; top: 9px; left: 5px; right: 8px; height: 12px; background: repeating-linear-gradient(#e4e7ec 0 2px, transparent 2px 5px); }
.app-mc-doc-tag { position: absolute; inset: auto 0 0; padding: 1px 0; background: linear-gradient(135deg, #ef4444, #b91c1c); color: #ffffff; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-align: center; }
.app-mc-file .app-mc-file-text strong { font-size: 13px; }
.app-mc-private { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #ecfdf3; color: #15803d; font-size: 11.5px; font-weight: var(--ux4g-fw-semibold, 600); }
.app-mc-private .ux4g-icon-outlined { font-size: 15px; }

.app-mc-foot .ux4g-btn-primary { background-image: linear-gradient(135deg, #f59e0b, #ea580c); border-color: transparent; color: #ffffff; box-shadow: 0 8px 18px -10px rgb(234 88 12 / 0.9); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.app-mc-foot .ux4g-btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgb(234 88 12 / 0.95); }
.app-mc-foot .ux4g-btn-primary:disabled { background-image: none; box-shadow: none; }

@keyframes app-mc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 575px) {
    .app-mc-label { flex-basis: 52px; }
    .app-mc-pop-items { grid-template-columns: 1fr; }
    .app-mc-private { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-mc-sheet, .app-mc-chip { animation: none; } }
.app-mc-rte-target { margin-left: auto; color: var(--ux4g-text-neutral-tertiary); font-size: 11.5px; }

.app-mc-editor { min-height: 170px; max-height: 300px; padding: 14px; overflow-y: auto; outline: 0; color: var(--ux4g-text-neutral-primary); font-size: 14px; line-height: 1.6; }
.app-mc-editor:focus { background: #fffcf7; }
.app-mc-editor p { margin: 0 0 10px; }
.app-mc-editor ul, .app-mc-editor ol { margin: 0 0 10px; padding-left: 22px; }
.app-mc-editor a { color: var(--ux4g-text-brand-primary-default); text-decoration: underline; }
.app-mc-editor ul { list-style: disc; }
.app-mc-editor ol { list-style: decimal; }
.app-mc-editor li { display: list-item; }

/* ---------- Admit card e-mail: sending / finished ---------- */
.app-ms { --ms-c: #f59e0b; --ms-c2: #ea580c; --ms-soft: #fff7ed; display: flex; flex-direction: column; gap: 14px; }
.app-ms.is-done { --ms-c: #22c55e; --ms-c2: #15803d; --ms-soft: #f0fdf4; }
.app-ms.is-warn { --ms-c: #f59e0b; --ms-c2: #dc2626; --ms-soft: #fffbeb; }
.app-ms .ux4g-icon-outlined { color: inherit; }

.app-ms-hero {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 22px 20px; overflow: hidden; text-align: center;
    border: 1px solid color-mix(in srgb, var(--ms-c) 22%, transparent); border-radius: 18px;
    background: radial-gradient(120% 90% at 50% 0%, var(--ms-soft) 0%, #ffffff 70%);
    transition: background 0.5s ease, border-color 0.5s ease;
}
.app-ms-blob { position: absolute; border-radius: 50%; filter: blur(28px); opacity: 0.45; pointer-events: none; }
.app-ms-blob-a { top: -40px; left: -30px; width: 140px; height: 140px; background: var(--ms-c); animation: app-ms-float 7s ease-in-out infinite; }
.app-ms-blob-b { right: -40px; bottom: -50px; width: 160px; height: 160px; background: var(--ms-c2); opacity: 0.25; animation: app-ms-float 9s ease-in-out infinite reverse; }

.app-ms-visual { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; }
.app-ms-orb {
    position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ms-c), var(--ms-c2)); color: #ffffff;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ms-c2) 70%, transparent), inset 0 -3px 0 rgb(0 0 0 / 0.08);
}
.app-ms.is-done .app-ms-orb { animation: app-ms-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.app-ms.is-warn .app-ms-orb { animation: app-ms-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both, app-ms-shake 0.5s ease 0.5s; }
.app-ms-ripple { position: absolute; inset: 12px; border: 2px solid var(--ms-c); border-radius: 50%; opacity: 0; }
.app-ms.is-busy .app-ms-ripple { animation: app-ms-ripple 2s ease-out infinite; }
.app-ms.is-busy .app-ms-ripple-2 { animation-delay: 1s; }
.app-ms.is-done .app-ms-ripple { animation: app-ms-ripple 0.9s ease-out 0.2s 1; }
.app-ms-plane { font-size: 32px; animation: app-ms-fly 1.6s ease-in-out infinite; }
.app-ms-tick { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: app-ms-draw 0.45s ease-out 0.35s forwards; }
.app-ms-alert { font-size: 38px; font-weight: 700; }

.app-ms-confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.app-ms-confetti i {
    position: absolute; top: 50%; left: 50%; width: 7px; height: 11px; margin: -5px 0 0 -3px; border-radius: 2px; background: var(--c); opacity: 0;
    animation: app-ms-burst 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s forwards;
}
.app-ms-confetti i:nth-child(even) { width: 8px; height: 8px; border-radius: 50%; animation-delay: 0.38s; }

.app-ms-title { position: relative; margin: 0; color: var(--ux4g-text-neutral-primary); font-size: 19px; font-weight: var(--ux4g-fw-bold, 700); animation: app-ms-rise 0.4s ease both; }
.app-ms-sub { position: relative; max-width: 440px; margin: 0; color: var(--ux4g-text-neutral-secondary); font-size: 13.5px; line-height: 1.5; }

.app-ms-progress { position: relative; width: 100%; max-width: 460px; margin-top: 12px; }
.app-ms-bar { height: 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ms-c) 14%, #eef0f3); }
.app-ms-bar-fill {
    position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit;
    background: linear-gradient(90deg, var(--ms-c), var(--ms-c2));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-ms.is-busy .app-ms-bar-fill {
    background-image: linear-gradient(45deg, rgb(255 255 255 / 0.25) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.25) 50%, rgb(255 255 255 / 0.25) 75%, transparent 75%), linear-gradient(90deg, var(--ms-c), var(--ms-c2));
    background-size: 16px 16px, 100% 100%;
    animation: app-ms-stripes 0.8s linear infinite;
}
.app-ms-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent); transform: translateX(-100%); animation: app-ms-shine 1.8s ease-in-out infinite; }
.app-ms.is-done .app-ms-bar-fill::after, .app-ms.is-warn .app-ms-bar-fill::after { animation-iteration-count: 1; }
.app-ms-progress-meta { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ux4g-text-neutral-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.app-ms-progress-meta strong { color: var(--ms-c2); font-size: 13px; }

.app-ms-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-ms-stat {
    --t: #16a34a; --tb: #dcfce7;
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 14px; background: #ffffff;
    animation: app-ms-rise 0.45s ease both; animation-delay: var(--d, 0ms);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.app-ms-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--t) 35%, transparent); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--t) 60%, transparent); }
.app-ms-stat.is-queue { --t: #2563eb; --tb: #dbeafe; }
.app-ms-stat.is-failed { --t: #dc2626; --tb: #fee2e2; }
.app-ms-stat.is-skipped { --t: #b45309; --tb: #fef3c7; }
.app-ms-stat-icon { display: grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tb); color: var(--t); }
.app-ms-stat-icon .ux4g-icon-outlined { font-size: 20px; }
.app-ms.is-busy .app-ms-stat.is-queue .app-ms-stat-icon { animation: app-ms-pulse 1.6s ease-in-out infinite; }
.app-ms-stat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.app-ms-stat-text strong { color: var(--ux4g-text-neutral-primary); font-size: 20px; font-variant-numeric: tabular-nums; }
.app-ms-stat-text small { color: var(--ux4g-text-neutral-tertiary); font-size: 12px; font-weight: var(--ux4g-fw-semibold, 600); }

.app-ms-problems { display: flex; flex-direction: column; gap: 6px; max-height: 180px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.app-ms-problems li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 12.5px; animation: app-ms-rise 0.3s ease both; }
.app-ms-problems li.is-failed { background: #fef2f2; color: #b91c1c; }
.app-ms-problems li .ux4g-icon-outlined { font-size: 16px; }
.app-ms-problem-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: var(--ux4g-fw-bold, 700); white-space: nowrap; }
.app-ms-problem-why { flex: 1; text-align: right; overflow-wrap: anywhere; }

@keyframes app-ms-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, 10px); } }
@keyframes app-ms-ripple { from { transform: scale(0.85); opacity: 0.7; } to { transform: scale(1.55); opacity: 0; } }
@keyframes app-ms-fly { 0% { transform: translate(-3px, 3px) rotate(-12deg); } 50% { transform: translate(4px, -4px) rotate(-22deg); } 100% { transform: translate(-3px, 3px) rotate(-12deg); } }
@keyframes app-ms-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes app-ms-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes app-ms-draw { to { stroke-dashoffset: 0; } }
@keyframes app-ms-burst {
    0% { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-62px) rotate(200deg) scale(1); opacity: 0; }
}
@keyframes app-ms-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes app-ms-stripes { to { background-position: 16px 0, 0 0; } }
@keyframes app-ms-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes app-ms-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

@media (max-width: 575px) { .app-ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
    .app-ms *, .app-ms *::after { animation: none !important; }
    .app-ms-tick { stroke-dashoffset: 0; }
    .app-ms-confetti { display: none; }
}

/* Placeholder bar: one row per group, labels in a column */
.app-mc-tools { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 14px; }
.app-mc-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-mc-group-label { flex: 0 0 130px; }
.app-mc-tools { flex-wrap: nowrap; }
.app-mc-tools > .app-mc-group { flex: 0 0 auto; min-height: 0; }

/* Compose mail: a large dialog so the editor and the "Insert field" menu have room */
#admitCardMailModal .ux4g-modal-box {
    display: flex; flex-direction: column;
    width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
    transition: width 0.3s ease;
}
#admitCardMailModal .ux4g-modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 18px 22px; }
#admitCardMailModal:has(.app-ms) .ux4g-modal-box { width: min(720px, calc(100vw - 32px)); }
#admitCardMailModal .app-mc-editor { min-height: 300px; }
#admitCardMailModal .app-mc-pop { width: min(560px, 80vw); }
#admitCardMailModal .app-mc-pop-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-height: 760px) { #admitCardMailModal .app-mc-editor { min-height: 200px; } }

.app-acm-title { display: inline-flex; align-items: center; gap: 8px; }
.app-acm-title .ux4g-icon-outlined { font-size: 22px; color: inherit; }

/* ---------- Publish / unpublish: OTP step ---------- */
.app-otp2 { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.app-otp2 .ux4g-icon-outlined { color: inherit; }
.app-otp2-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.app-otp2-badge { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px; background: linear-gradient(135deg, #fbbf24, #ea580c); color: #ffffff; box-shadow: 0 12px 24px -12px rgb(234 88 12 / 0.8); animation: app-otp2-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.app-otp2-badge .ux4g-icon-outlined { font-size: 30px; }
.app-otp2-ring { position: absolute; inset: -6px; border: 2px solid #fdba74; border-radius: 24px; opacity: 0; animation: app-otp2-ring 2.2s ease-out infinite; }
.app-otp2-hero h3 { margin: 0; color: var(--ux4g-text-neutral-primary); font-size: 19px; font-weight: var(--ux4g-fw-bold, 700); }
.app-otp2-hero p { max-width: 340px; margin: 0; color: var(--ux4g-text-neutral-secondary); font-size: 13.5px; line-height: 1.55; }
.app-otp2-pill { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 5px 6px 5px 10px; border: 1px solid #bbf7d0; border-radius: 999px; background: #f0fdf4; color: #15803d; font-size: 12.5px; font-weight: var(--ux4g-fw-semibold, 600); }
.app-otp2-pill .ux4g-icon-outlined { font-size: 16px; }
.app-otp2-pill.is-unpublish { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.app-otp2-pill-advt { padding: 1px 8px; border-radius: 999px; background: #ffffff; color: var(--ux4g-text-neutral-secondary); font-weight: var(--ux4g-fw-semibold, 600); }

.app-otp2-form { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.app-otp2-boxes { display: flex; justify-content: center; gap: 8px; }
.app-otp2-box {
    width: 46px; height: 54px; padding: 0; border: 1.5px solid #d0d5dd; border-radius: 12px; background: #ffffff;
    color: var(--ux4g-text-neutral-primary); font: inherit; font-size: 22px; font-weight: var(--ux4g-fw-bold, 700); text-align: center; caret-color: #ea580c;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.app-otp2-box::placeholder { color: #d0d5dd; }
.app-otp2-box:not(:placeholder-shown) { border-color: #fdba74; background: #fff7ed; animation: app-otp2-tap 0.18s ease; }
.app-otp2-box:focus { outline: 0; border-color: #ea580c; box-shadow: 0 0 0 4px rgb(234 88 12 / 0.15); transform: translateY(-2px); }
.app-otp2-boxes.is-error { animation: app-otp2-shake 0.4s ease; }
.app-otp2-boxes.is-error .app-otp2-box { border-color: #f87171; background: #fef2f2; }
.app-otp2-error { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: #dc2626; font-size: 12.5px; font-weight: var(--ux4g-fw-semibold, 600); }
.app-otp2-error .ux4g-icon-outlined { font-size: 16px; }

.app-otp2-resend { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding-top: 12px; border-top: 1px dashed var(--ux4g-border-color-neutral-subtle, #eaecf0); color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
.app-otp2-resend button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 999px; background: #fff7ed; color: #c2410c; font: inherit; font-weight: var(--ux4g-fw-semibold, 600); cursor: pointer; transition: background 0.15s ease; }
.app-otp2-resend button:hover:not(:disabled) { background: #ffedd5; }
.app-otp2-resend button:disabled { background: #f2f4f7; color: #98a2b3; cursor: default; }
.app-otp2-resend button .ux4g-icon-outlined { font-size: 16px; }
.app-otp2-resend strong { font-variant-numeric: tabular-nums; }

@keyframes app-otp2-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes app-otp2-ring { from { transform: scale(0.9); opacity: 0.8; } to { transform: scale(1.25); opacity: 0; } }
@keyframes app-otp2-tap { 50% { transform: scale(1.06); } }
@keyframes app-otp2-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 400px) { .app-otp2-box { width: 40px; height: 48px; font-size: 20px; } .app-otp2-boxes { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .app-otp2 *, .app-otp2-boxes { animation: none !important; } }
.app-otp2-shield { width: 32px; height: 32px; fill: none; stroke: #ffffff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-otp2-shield circle { fill: #ffffff; stroke: none; }

/* Info note (blue) — e.g. "details are taken from your locked profile" */
.app-note.app-note-info { border-left-color: #3b82f6; background-color: #eff6ff; color: #1e3a8a; }
.app-note.app-note-info .ux4g-icon-outlined { color: #2563eb; }
.app-note.app-note-info strong { color: #1e40af; }

/* Application preview: Back on the left, Final submit in the centre */
.app-fs-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.app-fs-actions > :first-child { justify-self: start; }
.app-fs-actions > :nth-child(2) { justify-self: center; }
@media (max-width: 575px) { .app-fs-actions { grid-template-columns: 1fr; justify-items: center; } .app-fs-actions > :first-child { justify-self: center; } }

/* Final submit: declaration checkbox */
.app-consent { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid #fed7aa; border-radius: 12px; background: #fffaf3; color: var(--ux4g-text-neutral-secondary); font-size: 13px; line-height: 1.55; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.app-consent input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #ea580c; cursor: pointer; }
.app-consent:has(input:checked) { border-color: #86efac; background: #f0fdf4; color: var(--ux4g-text-neutral-primary); }
.app-consent.is-error { border-color: #f87171; background: #fef2f2; animation: app-otp2-shake 0.4s ease; }

/* Payment details: Pay now bar inside the card */
.app-paybar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; border: 1px solid #fed7aa; border-radius: 14px; background: linear-gradient(135deg, #fff7ed, #ffffff); }
.app-paybar-icon { display: grid; flex-shrink: 0; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #fbbf24, #ea580c); color: #ffffff; }
.app-paybar-icon .ux4g-icon-outlined { color: inherit; font-size: 22px; }
.app-paybar-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-paybar-text small { color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; }
.app-paybar-text strong { color: var(--ux4g-text-neutral-primary); font-size: 20px; }
.app-paybar-form { margin: 0; }
.app-paybar-form .ux4g-btn { gap: 6px; }
@media (max-width: 575px) { .app-paybar-form, .app-paybar-form .ux4g-btn { width: 100%; justify-content: center; } }

/* Payment details: compact card (fits one screen) */
.app-pay-card .app-stack { gap: 14px; }
.app-pay-dl.app-dl { gap: 12px 20px; }
.app-pay-dl .app-dl-item { gap: 2px; }
@media (min-width: 768px) { .app-pay-dl.app-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .app-pay-dl.app-dl { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.app-pay-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); }
.app-pay-head h3 { margin: 0; }
.app-pay-card .app-paybar { padding: 10px 14px; }
.app-pay-card .app-paybar-icon { width: 36px; height: 36px; border-radius: 10px; }
.app-pay-card .app-paybar-icon .ux4g-icon-outlined { font-size: 19px; }
.app-pay-card .app-paybar-text strong { font-size: 18px; }

/* ---------- Payment page: two-column checkout ---------- */
.app-pay { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.app-pay-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-pay-block { padding: 14px 16px 16px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 14px; background: #ffffff; animation: app-pay-in 0.35s ease both; }
.app-pay-block + .app-pay-block { animation-delay: 80ms; }
.app-pay-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.app-pay-block-head h3 { margin: 0; margin-right: auto; color: var(--ux4g-text-neutral-primary); font-size: 15px; font-weight: var(--ux4g-fw-bold, 700); }
.app-pay-block-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff7ed; color: #ea580c; }
.app-pay-block-icon .ux4g-icon-outlined { color: inherit; font-size: 18px; }
.app-pay-post { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #fff7ed, #ffffff); }
.app-pay-post strong { color: var(--ux4g-text-neutral-primary); font-size: 15px; }
.app-pay-code { padding: 2px 8px; border-radius: 6px; background: #ea580c; color: #ffffff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.app-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin: 0; }
.app-pay-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-pay-grid div { min-width: 0; }
.app-pay-grid dt { margin: 0 0 3px; color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.app-pay-grid dd { margin: 0; color: var(--ux4g-text-neutral-primary); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.app-pay-grid dd.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.app-pay-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.app-pay-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.app-pay-status.is-success { background: #ecfdf3; color: #067647; }
.app-pay-status.is-pending { background: #fffaeb; color: #b54708; }
.app-pay-status.is-failed { background: #fff4ed; color: #c2410c; }
.app-pay-status.is-failed .app-pay-status-dot, .app-pay-status.is-pending .app-pay-status-dot { animation: app-pay-blink 1.4s ease-in-out infinite; }
.app-pay-receipt { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #fed7aa; border-radius: 999px; color: #c2410c; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background 0.15s ease; }
.app-pay-receipt:hover { background: #fff7ed; }
.app-pay-receipt .ux4g-icon-outlined { color: inherit; font-size: 16px; }

.app-pay-side {
    position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; padding: 20px; overflow: hidden; border-radius: 18px; color: #ffffff;
    background: radial-gradient(120% 80% at 0% 0%, #fbbf24 0%, transparent 55%), linear-gradient(155deg, #f59e0b 0%, #ea580c 60%, #c2410c 100%);
    box-shadow: 0 20px 36px -22px rgb(234 88 12 / 0.9); animation: app-pay-in 0.4s ease both;
}
.app-pay-side::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border: 1.5px solid rgb(255 255 255 / 0.18); border-radius: 50%; pointer-events: none; }
.app-pay-side .ux4g-icon-outlined { color: inherit; }
.app-pay-side-label { color: rgb(255 255 255 / 0.8); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.app-pay-amount { font-size: 38px; font-weight: 800; line-height: 1.1; }
.app-pay-side-sub { margin-bottom: 10px; color: rgb(255 255 255 / 0.85); font-size: 12.5px; }
.app-pay-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: rgb(124 45 18 / 0.25); font-size: 12.5px; line-height: 1.45; }
.app-pay-hint .ux4g-icon-outlined { font-size: 16px; }
.app-pay-form { position: relative; z-index: 1; margin: 0; }
.app-pay-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 16px; overflow: hidden; border: 0; border-radius: 12px; background: #ffffff; color: #c2410c; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 20px -12px rgb(0 0 0 / 0.5); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.app-pay-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(251 191 36 / 0.25) 50%, transparent 70%); transform: translateX(-100%); animation: app-pay-shine 2.8s ease-in-out infinite; }
.app-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgb(0 0 0 / 0.55); }
.app-pay-btn .ux4g-icon-outlined { font-size: 19px; }
.app-pay-secure { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; color: rgb(255 255 255 / 0.85); font-size: 11.5px; }
.app-pay-secure .ux4g-icon-outlined { font-size: 15px; }
.app-pay-done { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #ffffff; color: var(--ux4g-text-neutral-primary); }
.app-pay-done-tick { display: grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #16a34a; }
.app-pay-done-tick svg { width: 18px; height: 18px; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.app-pay-done b { display: block; font-size: 14px; }
.app-pay-done small { color: var(--ux4g-text-neutral-secondary); font-size: 12px; }

@keyframes app-pay-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes app-pay-blink { 50% { opacity: 0.3; } }
@keyframes app-pay-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (max-width: 991px) { .app-pay { grid-template-columns: 1fr; } .app-pay-side { position: static; } }
@media (max-width: 575px) { .app-pay-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .app-pay *, .app-pay-block, .app-pay-side { animation: none !important; } }

/* ---------- Payment page: compact (everything incl. the footer fits one laptop screen) ---------- */
.app-stack.app-pay-page { gap: 12px; }
.app-pay-page .app-page-header { padding-top: 10px; padding-bottom: 12px; }
.app-pay-page .app-page-header .ux4g-breadcrumb, .app-pay-page .app-page-header nav { margin-bottom: 6px; padding-bottom: 6px; }
.app-pay-page .app-page-header-icon { width: 40px; height: 40px; }
.app-pay-page .app-page-header-icon .ux4g-icon-outlined { font-size: 22px; }
.app-pay-page .app-page-header h1 { font-size: 22px; }
.app-pay-page .app-stepper { padding-top: 10px; padding-bottom: 10px; }
.app-pay-page .app-pay-card > .app-card-header { padding-top: 10px; padding-bottom: 10px; }
.app-pay-page .app-pay-card > .ux4g-card-body, .app-pay-page .app-pay-card .app-card-body { padding-top: 12px; padding-bottom: 12px; }
.app-pay-page .app-pay-card footer, .app-pay-page .app-pay-card .ux4g-card-footer { padding-top: 10px; padding-bottom: 10px; }

.app-pay-page .app-pay { gap: 14px; }
.app-pay-page .app-pay-main { gap: 10px; }
.app-pay-page .app-pay-block { padding: 10px 14px 12px; }
.app-pay-page .app-pay-block-head { margin-bottom: 8px; }
.app-pay-page .app-pay-block-icon { width: 26px; height: 26px; border-radius: 8px; }
.app-pay-page .app-pay-block-icon .ux4g-icon-outlined { font-size: 16px; }
.app-pay-page .app-pay-block-head h3 { font-size: 14px; }
.app-pay-page .app-pay-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; }
.app-pay-page .app-pay-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-pay-page .app-pay-grid dt { margin-bottom: 1px; font-size: 10.5px; }
.app-pay-page .app-pay-grid dd { font-size: 13.5px; }
.app-pay-grid .is-wide { grid-column: span 2; }
.app-pay-grid .app-pay-code { margin-right: 4px; }

.app-pay-page .app-pay-side { padding: 16px; }
.app-pay-page .app-pay-amount { font-size: 30px; }
.app-pay-page .app-pay-side-sub { margin-bottom: 8px; }
.app-pay-page .app-pay-hint { margin-bottom: 8px; padding: 6px 9px; font-size: 12px; }
.app-pay-page .app-pay-btn { padding: 11px 14px; font-size: 14.5px; }
.app-pay-page .app-pay-secure { margin-top: 8px; font-size: 11px; }
@media (max-width: 575px) { .app-pay-grid .is-wide { grid-column: 1 / -1; } }

/* Payment page: plain font for values / labels, light fee panel */
.app-pay-grid dd.is-mono { font-family: inherit; font-size: inherit; }
.app-pay-grid dt, .app-pay-page .app-pay-grid dt { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ux4g-text-neutral-secondary, #667085); }
.app-pay-code { letter-spacing: 0; }

.app-pay-side { border: 1px solid #fed7aa; background: linear-gradient(160deg, #fff7ed 0%, #ffffff 100%); color: var(--ux4g-text-neutral-primary, #101828); box-shadow: 0 12px 28px -22px rgb(234 88 12 / 0.6); }
.app-pay-side::after { border-color: #ffedd5; }
.app-pay-side-label { color: #c2410c; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.app-pay-amount { color: var(--ux4g-text-neutral-primary, #101828); }
.app-pay-side-sub { color: var(--ux4g-text-neutral-secondary, #667085); }
.app-pay-hint { border: 1px solid #fed7aa; background: #ffffff; color: #9a3412; }
.app-pay-btn { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #ffffff; box-shadow: 0 10px 20px -12px rgb(234 88 12 / 0.9); }
.app-pay-btn::after { background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.3) 50%, transparent 70%); }
.app-pay-btn:hover { box-shadow: 0 14px 24px -12px rgb(234 88 12 / 0.95); }
.app-pay-secure { color: var(--ux4g-text-neutral-secondary, #667085); }
.app-pay-secure .ux4g-icon-outlined { color: #16a34a; }
.app-pay-done { border: 1px solid #bbf7d0; background: #f0fdf4; }
.app-pay-grid dd.is-nowrap { white-space: nowrap; overflow-wrap: normal; }
.app-pay-grid .is-appno { grid-column: span 2; min-width: max-content; }
@media (max-width: 575px) { .app-pay-grid .is-appno { grid-column: 1 / -1; } }
.app-pay-receipt { background: transparent; font-family: inherit; cursor: pointer; }

/* ---------- Admin → Candidate accounts: Manage login dialog ---------- */
.app-cm { display: flex; flex-direction: column; gap: 14px; }
.app-cm .ux4g-icon-outlined { color: inherit; }
.app-cm-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 12px; background: #fcfcfd; }
.app-cm-who strong { display: block; color: var(--ux4g-text-neutral-primary); font-size: 14px; }
.app-cm-who small { color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; }
.app-cm-who em { color: #b54708; font-style: normal; }
.app-cm-avatar { display: grid; flex-shrink: 0; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #ea580c); color: #fff; font-weight: 800; }
.app-cm-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #f2f4f7; }
.app-cm-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ux4g-text-neutral-secondary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.app-cm-tabs button .ux4g-icon-outlined { font-size: 18px; }
.app-cm-tabs button.is-active { background: #fff; color: #c2410c; box-shadow: 0 1px 3px rgb(16 24 40 / 0.12); }
.app-cm-form { display: flex; flex-direction: column; gap: 12px; }
.app-cm-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; line-height: 1.45; }
.app-cm-hint .ux4g-icon-outlined { flex-shrink: 0; margin-top: 1px; color: #c2410c; font-size: 16px; }
.app-cm-modes { display: grid; gap: 8px; }
.app-cm-mode { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.app-cm-mode input { margin-top: 3px; accent-color: #ea580c; }
.app-cm-mode b { display: block; font-size: 13.5px; }
.app-cm-mode small { color: var(--ux4g-text-neutral-secondary); font-size: 12px; }
.app-cm-mode.is-active { border-color: #fdba74; background: #fff7ed; }
.app-cm-pw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-cm-pw-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
@media (max-width: 575px) { .app-cm-pw { grid-template-columns: 1fr; } }

/* ---------- Admin → Application fees ---------- */
.app-fee-wrap { overflow-x: auto; }
.app-fee-table { width: 100%; border-collapse: collapse; }
.app-fee-table th, .app-fee-table td { padding: 10px 12px; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); text-align: left; vertical-align: top; }
.app-fee-table thead th { color: var(--ux4g-text-neutral-secondary); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.app-fee-table tbody th { width: 34%; padding-top: 18px; color: var(--ux4g-text-neutral-primary); font-size: 14px; font-weight: 600; }
.app-fee-type { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.app-fee-type.is-contract { background: #eff6ff; color: #1d4ed8; }
.app-fee-type.is-regular { background: #fff7ed; color: #c2410c; }
.app-fee-input { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 0 12px; border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 10px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.app-fee-input:focus-within { border-color: #ea580c; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.15); }
.app-fee-input.is-error { border-color: #dc2626; }
.app-fee-input span { color: var(--ux4g-text-neutral-secondary); font-weight: 600; }
.app-fee-input input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; }
.app-fee-error { display: block; margin-top: 4px; color: #dc2626; font-size: 12px; }
.app-fee-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.app-fee-rule { display: flex; flex: 1 1 420px; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid #fed7aa; border-radius: 12px; background: #fffaf3; color: var(--ux4g-text-neutral-secondary); font-size: 13px; line-height: 1.5; }
.app-fee-rule .ux4g-icon-outlined { flex-shrink: 0; color: #c2410c; font-size: 18px; }

/* Create / Edit advertisement: application fee grid */
.app-advt-fees .app-advt-panel-title { flex-wrap: wrap; }
.app-advt-fees .app-advt-panel-title .app-fee-type { margin-left: auto; font-size: 12px; font-weight: 600; }
.app-advt-fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 12px; }
.app-advt-fee-col { display: flex; flex-direction: column; gap: 8px; }
.app-advt-fee-heading { color: var(--ux4g-text-neutral-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.app-advt-fee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-advt-fee-label { color: var(--ux4g-text-neutral-primary); font-size: 14px; font-weight: 600; }
.app-advt-fee-row .app-fee-input { flex: 0 0 150px; }
@media (max-width: 767px) { .app-advt-fee-grid { grid-template-columns: 1fr; } }

/* ============ Create / Edit advertisement — redesign (.app-advt-v2) ============ */
.app-advt-v2 { padding-bottom: 8px; }
.app-advt-v2 .app-advt-panel { gap: 14px; padding: 18px 20px; border: 1px solid #eef0f3; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); }
.app-advt-v2 .ux4g-icon-outlined { color: inherit; }

/* Section headers: icon + title + one-line description */
.app-advt-v2-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #f2f4f7; }
.app-advt-v2-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ux4g-text-neutral-primary); font-size: 16px; font-weight: 700; }
.app-advt-v2-head p { margin: 2px 0 0; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; }
.app-advt-v2-icon { display: grid; flex-shrink: 0; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #c2410c; box-shadow: inset 0 0 0 1px #fed7aa; }
.app-advt-v2-icon .ux4g-icon-outlined { font-size: 20px; }
.app-advt-v2-count { padding: 1px 9px; border-radius: 999px; background: #f2f4f7; color: var(--ux4g-text-neutral-secondary); font-size: 12px; font-weight: 700; }
.app-advt-v2-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.app-advt-v2-find { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; }
.app-advt-v2-find:focus-within { border-color: #ea580c; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.12); }
.app-advt-v2-find .ux4g-icon-outlined { color: #98a2b3; font-size: 18px; }
.app-advt-v2-find input { width: 150px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; }

/* Posts: compact table */
.app-advt-v2-cols { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 40px; gap: 12px; padding: 0 12px 6px; color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.app-advt-v2 .app-advt-posts { gap: 0; overflow: visible; border: 1px solid #eef0f3; border-radius: 12px; }
.app-advt-v2 .app-advt-post { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 40px; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-top: 1px solid #f2f4f7; border-radius: 0; background: #fff; transition: background 0.15s ease; }
.app-advt-v2 .app-advt-post:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
.app-advt-v2 .app-advt-post:last-child { border-radius: 0 0 12px 12px; }
.app-advt-v2 .app-advt-post:hover { background: #fffaf3; }
.app-advt-v2 .app-advt-post-no { width: 26px; height: 26px; background: #f2f4f7; color: var(--ux4g-text-neutral-secondary); font-size: 12px; }
.app-advt-v2 .app-advt-post:hover .app-advt-post-no { background: #ffedd5; color: #c2410c; }
.app-advt-v2 .app-advt-post .ux4g-label-m-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-advt-v2 .app-advt-post .ux4g-input-container { gap: 0; }
.app-advt-v2 .app-advt-post-remove { margin: 0; }

/* Fees heading inside its panel */
.app-advt-v2-feetitle { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #f2f4f7; font-size: 16px; }

/* Publishing toggles as simple rows */
.app-advt-v2 .app-advt-toggles { gap: 0; }
.app-advt-v2 .app-advt-toggle { padding: 10px 2px; border: 0; border-top: 1px solid #f2f4f7; border-radius: 0; background: transparent; }
.app-advt-v2 .app-advt-toggle:first-child { border-top: 0; }

/* Sticky action bar */
.app-advt-v2-bar {
    position: sticky; bottom: 12px; z-index: 20; grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 10px 12px 10px 16px; border: 1px solid #fde4c4; border-radius: 16px;
    background: rgb(255 255 255 / 0.92); backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px -16px rgb(16 24 40 / 0.35);
}
.app-advt-v2-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.app-advt-v2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #f2f4f7; color: var(--ux4g-text-neutral-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-advt-v2-chip .ux4g-icon-outlined { font-size: 15px; }
.app-advt-v2-chip.is-strong { background: #fff7ed; color: #9a3412; font-size: 13px; }
.app-advt-v2-chip.is-contract { background: #eff6ff; color: #1d4ed8; }
.app-advt-v2-chip.is-regular { background: #fff7ed; color: #c2410c; }
.app-advt-v2-chip.is-active { background: #ecfdf3; color: #067647; }
.app-advt-v2-chip.is-closed { background: #fef3f2; color: #b42318; }
.app-advt-v2-actions { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 767px) {
    .app-advt-v2-cols { display: none; }
    .app-advt-v2 .app-advt-post { grid-template-columns: 30px minmax(0, 1fr) 36px; }
    .app-advt-v2 .app-advt-post .app-qual { grid-column: 2 / -1; grid-row: 2; }
    .app-advt-v2-find input { width: 110px; }
    .app-advt-v2-actions { width: 100%; }
    .app-advt-v2-actions .ux4g-btn { flex: 1; justify-content: center; }
}
/* Advertisement form: posts pagination */
.app-advt-v2-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.app-advt-v2-pager-info { color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
.app-advt-v2-pager-info strong { color: var(--ux4g-text-neutral-primary); }
.app-advt-v2-pager-nav { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.app-advt-v2-pager-nav button { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; color: var(--ux4g-text-neutral-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.app-advt-v2-pager-nav button:hover:not(:disabled) { border-color: #fdba74; background: #fff7ed; }
.app-advt-v2-pager-nav button.is-current { border-color: #ea580c; background: #ea580c; color: #fff; }
.app-advt-v2-pager-nav button:disabled { opacity: 0.4; cursor: default; }
.app-advt-v2-pager-nav .ux4g-icon-outlined { font-size: 18px; }
.app-advt-v2-noresult { margin: 0; color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
/* Advertisement details: compact — one row of six fields on wide screens */
.app-advt-v2 .app-advt-panel { gap: 12px; padding: 14px 16px; }
.app-advt-v2-head { gap: 10px; padding-bottom: 10px; }
.app-advt-v2-head h2 { font-size: 15px; }
.app-advt-v2-head p { font-size: 12px; }
.app-advt-v2-icon { width: 32px; height: 32px; border-radius: 9px; }
.app-advt-v2-icon .ux4g-icon-outlined { font-size: 18px; }
.app-advt-v2 .app-advt-grid { gap: 10px 12px; }
@media (min-width: 1400px) {
    .app-advt-v2 .app-advt-grid { grid-template-columns: 0.9fr 1fr 1.25fr 1fr 1fr 1.25fr; }
}

/* Advertisement form: application fees as a summary card + edit dialog */
.app-fee-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app-fee-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid #eef0f3; border-radius: 999px; background: #f9fafb; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; font-weight: 600; }
.app-fee-chip strong { padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--ux4g-text-neutral-primary); font-size: 13px; box-shadow: inset 0 0 0 1px #e4e7ec; }
.app-fee-chip.is-concession { border-color: #fed7aa; background: #fffaf3; }
.app-fee-chip.is-concession strong { color: #c2410c; box-shadow: inset 0 0 0 1px #fed7aa; }
.app-fee-chip.is-error { border-color: #fca5a5; background: #fef2f2; }
.app-fee-modal .ux4g-modal-body { display: flex; flex-direction: column; gap: 16px; }
.app-fee-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-fee-modal-col { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 14px; background: #fcfcfd; }
.app-fee-modal-col + .app-fee-modal-col { border-color: #fde4c8; background: #fffbf6; }
.app-fee-modal-heading { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #f2f4f7; color: var(--ux4g-text-neutral-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.app-fee-modal-heading .ux4g-icon-outlined { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff7ed; color: #c2410c; font-size: 16px; }
.app-fee-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.app-fee-modal-row .app-fee-input { flex: 0 0 140px; }
.app-fee-modal .app-fee-rule { flex: none; }
.app-fee-modal .ux4g-modal-actions { justify-content: space-between; }
@media (max-width: 767px) { .app-fee-modal-grid { grid-template-columns: 1fr; } }

/* Create / Edit advertisement: fit the whole page on one screen */
.app-page-header-tight { gap: 6px; margin-bottom: 10px; padding: 10px 20px 12px; }
.app-page-header-tight .app-breadcrumb { padding-bottom: 6px; }
.app-page-header-tight .app-page-header-icon { width: 38px; height: 38px; }
.app-page-header-tight .app-page-header-icon .ux4g-icon-outlined { font-size: 22px !important; }
.app-page-header-tight h1 { font-size: 20px; line-height: 1.25; }
.app-page-header-tight p { font-size: 13px; }
.app-page-header-tight::after { display: none; }
.app-stack:has(> .app-page-header-tight) { gap: 10px; }
.app-advt-v2.app-advt-form, .app-advt-v2 .app-advt-form-main, .app-advt-v2 .app-advt-form-side { gap: 12px; }
.app-advt-v2 .app-advt-panel { gap: 10px; padding: 12px 14px; }
.app-advt-v2-head { padding-bottom: 8px; }
/* Details fields */
.app-advt-v2 .app-advt-grid input, .app-advt-v2 .app-advt-grid select { min-height: 36px; height: 36px; padding-top: 0; padding-bottom: 0; }
/* Posts: shorter rows */
.app-advt-v2-cols { padding-bottom: 4px; }
.app-advt-v2 .app-advt-post { padding: 5px 12px; }
.app-advt-v2 .app-advt-post select { min-height: 34px; height: 34px; padding-top: 0; padding-bottom: 0; }
.app-advt-v2 .app-advt-post .app-qual-trigger { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
.app-advt-v2 .app-advt-post-remove { width: 32px; height: 32px; }
.app-advt-v2-pager-nav button { min-width: 30px; height: 30px; }
.app-advt-v2-find { height: 32px; }
/* Publishing: tighter toggle rows */
.app-advt-v2 .app-advt-toggle { padding: 7px 2px; }
.app-advt-v2 .app-advt-toggle-icon { width: 28px; height: 28px; }
.app-advt-v2 .app-advt-toggle-text { font-size: 11.5px; line-height: 1.35; }
.app-advt-v2 .app-advt-toggle-text strong { font-size: 13.5px; }
/* Vacancy notice */
.app-advt-v2 .app-dropzone { padding-top: 10px; padding-bottom: 10px; }

/* Advertisement form: Centre dropdown */
.app-centre { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-centre-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 8px 0 6px; border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 10px; background: #fff; color: var(--ux4g-text-neutral-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.app-centre-trigger:hover { border-color: #fdba74; }
.app-centre-trigger.is-open, .app-centre-trigger:focus-visible { border-color: #ea580c; outline: 0; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.14); }
.app-centre.is-error .app-centre-trigger { border-color: #dc2626; }
.app-centre-badge { display: inline-grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #c2410c; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px #fed7aa; }
.app-centre-badge .ux4g-icon-outlined { color: #c2410c; font-size: 16px; }
.app-centre-value { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.app-centre-value.is-placeholder { color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-weight: 400; }
.app-centre-chevron { color: #667085 !important; font-size: 20px; transition: transform 0.2s ease; }
.app-centre-trigger.is-open .app-centre-chevron { color: #ea580c !important; transform: rotate(180deg); }
.app-centre-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 100%; width: max-content; max-width: 320px; max-height: 300px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid #eef0f3; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -12px rgb(16 24 40 / 0.22), 0 2px 6px rgb(16 24 40 / 0.05); }
.app-centre-menu-title { padding: 6px 10px 6px; color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.app-centre-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--ux4g-text-neutral-primary); font-size: 14px; cursor: pointer; transition: background 0.12s ease; }
.app-centre-option.is-active { background: #fff7ed; }
.app-centre-option.is-selected { font-weight: 700; }
.app-centre-option.is-selected .app-centre-badge { background: #ea580c; color: #fff; box-shadow: none; }
.app-centre-option-name { flex: 1; white-space: nowrap; }
.app-centre-check { color: #ea580c !important; font-size: 18px; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; }
.app-centre-option.is-selected .app-centre-check { opacity: 1; transform: scale(1); }
.app-centre-empty { padding: 10px; color: var(--ux4g-text-neutral-secondary); font-size: 13px; }

/* Advertisement form: Add post dialog */
.app-addpost { display: flex; flex-direction: column; gap: 14px; }
.app-addpost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.app-addpost-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid #eef0f3; border-radius: 14px; background: #fcfcfd; }
.app-addpost-step { display: flex; align-items: center; gap: 8px; color: var(--ux4g-text-neutral-primary); font-size: 13.5px; font-weight: 700; }
.app-addpost-step b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #ea580c; color: #fff; font-size: 12px; }
.app-addpost-step em { margin-left: auto; padding: 1px 9px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 12px; font-style: normal; }
.app-addpost-search { display: flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; }
.app-addpost-search:focus-within { border-color: #ea580c; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.12); }
.app-addpost-search .ux4g-icon-outlined { color: #98a2b3; font-size: 18px; }
.app-addpost-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; }
.app-addpost-list { display: flex; flex-direction: column; gap: 2px; height: 280px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid #f2f4f7; border-radius: 10px; background: #fff; }
.app-addpost-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ux4g-text-neutral-primary); font-size: 13.5px; cursor: pointer; transition: background 0.12s ease; }
.app-addpost-list li:hover { background: #fff7ed; }
.app-addpost-list li.is-selected { background: #ffedd5; font-weight: 600; }
.app-addpost-list li.is-used { color: #98a2b3; cursor: not-allowed; }
.app-addpost-list li.is-used:hover { background: transparent; }
.app-addpost-list li.app-addpost-empty { color: var(--ux4g-text-neutral-secondary); cursor: default; }
.app-addpost-name { flex: 1; min-width: 0; }
.app-addpost-radio { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid #d0d5dd; border-radius: 999px; background: #fff; transition: border 0.12s ease; }
.is-selected > .app-addpost-radio { border: 5px solid #ea580c; }
.app-addpost-check { display: inline-grid; flex-shrink: 0; place-items: center; width: 18px; height: 18px; border: 2px solid #d0d5dd; border-radius: 5px; background: #fff; }
.app-addpost-check .ux4g-icon-outlined { color: #fff !important; font-size: 14px; opacity: 0; }
.is-selected > .app-addpost-check { border-color: #ea580c; background: #ea580c; }
.is-selected > .app-addpost-check .ux4g-icon-outlined { opacity: 1; }
.app-addpost-tag { padding: 1px 8px; border-radius: 999px; background: #f2f4f7; color: #667085; font-size: 11px; font-weight: 700; }
.app-addpost-summary { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px dashed #d0d5dd; border-radius: 12px; background: #f9fafb; transition: all 0.15s ease; }
.app-addpost-summary > .ux4g-icon-outlined { color: #98a2b3 !important; font-size: 20px; }
.app-addpost-summary.is-ready { border: 1px solid #fed7aa; background: #fffaf3; }
.app-addpost-summary.is-ready > .ux4g-icon-outlined { color: #ea580c !important; }
.app-addpost-summary strong { font-size: 14px; }
.app-addpost-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.app-addpost-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 10px; border: 1px solid #fed7aa; border-radius: 999px; background: #fff; color: #9a3412; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.app-addpost-chip .ux4g-icon-outlined { color: inherit !important; font-size: 14px; }
.app-addpost-chip:hover { background: #fff7ed; }
.app-addpost-muted { color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; }
.app-addpost-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
@media (max-width: 767px) { .app-addpost-grid { grid-template-columns: 1fr; } .app-addpost-list { height: 200px; } }
/* Add post dialog: not-found state */
.app-addpost-list li.app-addpost-empty { flex: 1; flex-direction: column; justify-content: center; gap: 4px; padding: 20px; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; text-align: center; cursor: default; }
.app-addpost-list li.app-addpost-empty:hover { background: transparent; }
.app-addpost-list li.app-addpost-empty strong { color: var(--ux4g-text-neutral-primary); font-size: 14px; }
.app-addpost-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 999px; background: #fff7ed; box-shadow: 0 0 0 6px #fffaf3; }
.app-addpost-empty-icon .ux4g-icon-outlined { color: #ea580c !important; font-size: 24px; }
/* Advertisement form: before Alpine starts paging, show only the first 5 posts (no full-table flash on reload) */
html:not(.app-advt-paged) .app-advt-v2 .app-advt-posts > li:nth-child(n+6) { display: none; }

/* Create / Edit advertisement: loading skeleton */
.app-sk { display: block; flex-shrink: 0; border-radius: 6px; background: linear-gradient(90deg, #f2f4f7 0%, #fdf1e6 50%, #f2f4f7 100%); background-size: 200% 100%; animation: app-sk-shimmer 1.3s ease-in-out infinite; }
@keyframes app-sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .app-sk { animation: none; } }
.app-sk-icon { width: 32px; height: 32px; border-radius: 9px; }
.app-sk-input { width: 100%; height: 36px; border-radius: 10px; }
.app-advt-sk .app-advt-panel { display: flex; flex-direction: column; }
.app-advt-sk-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f2f4f7; }
.app-advt-sk-lines { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.app-advt-sk-head .app-advt-sk-lines { flex: 0 1 auto; }
.app-advt-sk-field { display: flex; flex-direction: column; gap: 8px; }
.app-advt-sk-rows { overflow: hidden; border: 1px solid #eef0f3; border-radius: 12px; }
.app-advt-sk-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 40px; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid #f2f4f7; }
.app-advt-sk-row:first-child { border-top: 0; }
.app-advt-sk-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-advt-sk-pages { display: flex; gap: 4px; }
.app-advt-sk-toggle { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid #f2f4f7; }
.app-advt-sk-toggle:first-of-type { border-top: 0; }
@media (max-width: 767px) { .app-advt-sk-row { grid-template-columns: 30px minmax(0, 1fr) 36px; } .app-advt-sk-row > :nth-child(3) { display: none; } .app-advt-sk-head > .app-sk[style*="margin-left"] { display: none; } }
/* Posts table: not-found state for Find post */
.app-advt-v2-noresult { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 1px dashed #e4e7ec; border-radius: 12px; background: #fcfcfd; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; text-align: center; }
.app-advt-v2-noresult[style*="none"] { display: none !important; }
.app-advt-v2-noresult strong { color: var(--ux4g-text-neutral-primary); font-size: 14px; }
.app-advt-v2-noresult .ux4g-btn { margin-top: 4px; }
/* Save button inside the Vacancy notice card, centred */
.app-advt-submit-in { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid #f2f4f7; }
.app-advt-v2 .app-advt-submit.app-advt-submit-in { display: flex; justify-content: center; width: 100%; }
.app-advt-v2 .app-advt-submit.app-advt-submit-in > * { width: auto; margin: 0 auto; }
/* Update / Create advertisement button */
.app-advt-v2 .ux4g-btn.app-advt-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 180px; height: 42px; padding: 0 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 8px 18px -8px rgb(234 88 12 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.app-advt-v2 .ux4g-btn.app-advt-save .ux4g-icon-outlined { color: #fff !important; font-size: 20px; }
.app-advt-v2 .ux4g-btn.app-advt-save:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 22px -8px rgb(234 88 12 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.app-advt-v2 .ux4g-btn.app-advt-save:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px -6px rgb(234 88 12 / 0.7); }
.app-advt-v2 .ux4g-btn.app-advt-save:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #fb923c; }
.app-advt-v2 .ux4g-btn.app-advt-save:disabled { opacity: 0.75; cursor: progress; }
/* Update button: light style */
.app-advt-v2 .ux4g-btn.app-advt-save { border: 1px solid #fdba74; background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%); color: #c2410c; box-shadow: 0 1px 2px rgb(16 24 40 / 0.05); }
.app-advt-v2 .ux4g-btn.app-advt-save .ux4g-icon-outlined { color: #ea580c !important; }
.app-advt-v2 .ux4g-btn.app-advt-save:hover:not(:disabled) { border-color: #fb923c; background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%); filter: none; box-shadow: 0 6px 14px -8px rgb(234 88 12 / 0.45); }
.app-advt-v2 .ux4g-btn.app-advt-save:active:not(:disabled) { box-shadow: none; }
.app-advt-v2 .app-advt-save .ux4g-spinner-light-split { filter: invert(45%) sepia(90%) saturate(1500%) hue-rotate(350deg); }
/* Update button: flat standard button (no shadow, no lift) */
.app-advt-v2 .ux4g-btn.app-advt-save,
.app-advt-v2 .ux4g-btn.app-advt-save:hover:not(:disabled),
.app-advt-v2 .ux4g-btn.app-advt-save:active:not(:disabled) { min-width: 140px; height: 40px; padding: 0 20px; border-radius: 8px; box-shadow: none; transform: none; filter: none; font-size: 14px; }
.app-advt-v2 .ux4g-btn.app-advt-save { background: #fff7ed; }
.app-advt-v2 .ux4g-btn.app-advt-save:hover:not(:disabled) { background: #ffedd5; }
.app-advt-v2 .ux4g-btn.app-advt-save:focus-visible { box-shadow: 0 0 0 3px rgb(234 88 12 / 0.2); }
/* Posts with applications while the advertisement is active: locked (no delete, no change) */
.app-advt-v2 .app-advt-post-locked { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e4e7ec; border-radius: 8px; background: #f9fafb; color: #98a2b3; cursor: help; }
.app-advt-v2 .app-advt-post select:disabled { background: #f9fafb; color: var(--ux4g-text-neutral-primary); opacity: 1; cursor: not-allowed; }

/* Advertisement details: Type / Status as two radio options */
.app-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.app-opt { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 10px; border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 10px; background: #fff; color: var(--ux4g-text-neutral-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.app-opt:hover { border-color: #fdba74; color: var(--ux4g-text-neutral-primary); }
.app-opt-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid #c4c9d2; border-radius: 999px; background: #fff; transition: border-color 0.15s ease; }
.app-opt-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: currentColor; transform: scale(0); transition: transform 0.15s ease; }
.app-opt.is-selected { border-color: #fb923c; background: #fff7ed; color: #c2410c; font-weight: 600; }
.app-opt.is-selected .app-opt-dot { border-color: currentColor; }
.app-opt.is-selected .app-opt-dot::after { transform: scale(1); }
.app-opt.is-active.is-selected { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.app-opt.is-closed.is-selected { border-color: #d0d5dd; background: #f2f4f7; color: #344054; }
.app-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(234 88 12 / 0.18); }
/* Advertisement details: same 40px height for every field, enough width for Type / Status */
.app-advt-v2 .app-advt-grid .ux4g-input { box-sizing: border-box; height: 40px; min-height: 40px; }
.app-advt-v2 .app-advt-grid .ux4g-input input { height: auto; min-height: 0; }
.app-advt-v2 .app-centre-trigger { height: 40px; }
.app-advt-v2 .app-opt { height: 40px; gap: 7px; padding: 0 10px; }
.app-advt-v2 .app-advt-grid > * { min-width: 0; align-self: end; }
@media (min-width: 1400px) {
    .app-advt-v2 .app-advt-grid { grid-template-columns: minmax(130px, 1fr) minmax(140px, 1fr) minmax(210px, 1.35fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(200px, 1.3fr); }
}

/* ============ Desktop sidebar: collapse to an icon rail (menu button in the header) ============ */
@media (min-width: 768px) {
    :root { --app-rail-width: 76px; }
    .app-layout > .app-sidebar { overflow-x: hidden; transition: flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
    .app-layout::before { transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

    html.app-nav-collapsed .app-layout > .app-sidebar { flex-basis: var(--app-rail-width); width: var(--app-rail-width); }
    html.app-nav-collapsed .app-layout::before { width: var(--app-rail-width); }

    /* Icons only, centred */
    html.app-nav-collapsed .app-nav { padding-left: 10px; padding-right: 10px; }
    html.app-nav-collapsed .app-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
    html.app-nav-collapsed .app-nav-link-label,
    html.app-nav-collapsed .app-nav-caret { display: none; }
    html.app-nav-collapsed .app-nav-link[aria-current='page']::before { left: -10px; }
    html.app-nav-collapsed .app-nav-sub { display: none !important; }
    /* Section titles become a thin divider */
    html.app-nav-collapsed .app-nav-section { height: 1px; margin: 8px 6px; padding: 0; overflow: hidden; background: var(--ux4g-color-secondary-100, #f2e6d9); font-size: 0; }
    html.app-nav-collapsed .app-nav-section::after { display: none; }
    /* Badge sits on the icon */
    html.app-nav-collapsed .app-nav-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; line-height: 18px; }
    /* Help card becomes one icon button */
    html.app-nav-collapsed .app-sidebar-help { align-items: center; margin: auto 10px 14px; padding: 6px; border: 0; background: transparent; }
    html.app-nav-collapsed .app-sidebar-help > :not(.app-sidebar-help-btn) { display: none; }
    html.app-nav-collapsed .app-sidebar-help-btn { width: 44px; height: 44px; min-width: 0; padding: 0; justify-content: center; font-size: 0; gap: 0; }
    html.app-nav-collapsed .app-sidebar-help-btn .ux4g-icon-outlined { font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .app-layout > .app-sidebar, .app-layout::before { transition: none !important; }
}

/* Sidebar collapse button on the sidebar's right edge (desktop only) */
.app-rail-toggle { display: none; }
@media (min-width: 768px) {
    .app-rail-toggle {
        position: fixed; top: calc(var(--app-header-height) + 18px); left: calc(var(--app-sidebar-width) - 13px); z-index: 40;
        display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
        border: 1px solid #f1dcc4; border-radius: 999px; background: #fff; color: #9a3412; cursor: pointer;
        box-shadow: 0 1px 3px rgb(16 24 40 / 0.12);
        transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .app-rail-toggle .ux4g-icon-outlined { color: inherit; font-size: 18px; transition: transform 0.25s ease; }
    .app-rail-toggle:hover { border-color: #fb923c; background: #fff7ed; color: #ea580c; }
    .app-rail-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.25); }
    html.app-nav-collapsed .app-rail-toggle { left: calc(var(--app-rail-width) - 13px); }
    html.app-nav-collapsed .app-rail-toggle .ux4g-icon-outlined { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .app-rail-toggle, .app-rail-toggle .ux4g-icon-outlined { transition: none !important; } }

/* ============ Sidebar on every screen size ============
   Phones (< 768px): off-canvas drawer from the header menu button.
   Tablets (768–991px): icon rail; expanding floats the full menu over the page.
   Laptops / desktops (≥ 992px): full sidebar or icon rail (edge button, remembered).
   Large screens / TVs: a little wider. Short screens: tighter rows. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .app-menu-toggle, .app-sidebar-head, .app-sidebar-overlay { display: none !important; }
    .app-layout { position: relative; }
    .app-layout > .app-sidebar {
        position: sticky; top: var(--app-header-height); z-index: 35;
        flex: 0 0 var(--app-rail-width); width: var(--app-sidebar-width);
        height: calc(100vh - var(--app-header-height)); height: calc(100dvh - var(--app-header-height));
        margin-right: calc(var(--app-rail-width) - var(--app-sidebar-width));
        transform: none; visibility: visible; box-shadow: 0 18px 40px -12px rgb(16 24 40 / 0.3);
    }
    html.app-nav-collapsed .app-layout > .app-sidebar { width: var(--app-rail-width); margin-right: 0; box-shadow: none; }
    .app-layout::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--app-rail-width);
        border-right: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); background-color: var(--ux4g-color-secondary-50, #fffaf3); pointer-events: none;
    }
    html.app-nav-collapsed .app-layout::before { width: var(--app-rail-width); }
}
/* Phones: a comfortable drawer width */
@media (max-width: 767.98px) {
    .app-sidebar { width: min(288px, 86vw); }
    .app-rail-toggle { display: none !important; }
}
/* Large screens and TVs */
@media (min-width: 1600px) { :root { --app-sidebar-width: 272px; } }
@media (min-width: 2200px) {
    :root { --app-sidebar-width: 300px; --app-rail-width: 88px; }
    .app-nav-link { font-size: 16px; }
}
/* Short screens (small laptops, zoomed browsers): tighter rows, help card as an icon */
@media (min-width: 768px) and (max-height: 760px) {
    .app-nav-link { min-height: 40px; }
    .app-nav-link > .ux4g-icon-outlined:first-child { width: 32px; height: 32px; }
    .app-nav-section { margin-top: 2px; }
    .app-sidebar-help > p { display: none; }
    .app-sidebar-help { flex-direction: row; align-items: center; margin-bottom: 10px; padding: 8px; }
    .app-sidebar-help-btn { flex: 1; justify-content: center; }
}
/* Rail: let the icon list scroll on very short screens */
@media (min-width: 768px) { .app-layout > .app-sidebar { overflow-y: auto; scrollbar-width: thin; } }

/* ============ Create / Edit advertisement: responsive at every size ============
   The form measures the width it actually gets (sidebar open or collapsed, any zoom) and sets
   html[data-advt-size] = xs | s | m | l and html[data-advt-narrow] (see the x-init in advt-form).
   Before that runs: 3 columns, or 1 on phones. */
.app-advt-v2 .app-advt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .app-advt-v2 .app-advt-grid { grid-template-columns: minmax(0, 1fr); } }
html[data-advt-size='xs'] .app-advt-v2 .app-advt-grid { grid-template-columns: minmax(0, 1fr); }
html[data-advt-size='s'] .app-advt-v2 .app-advt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-advt-size='m'] .app-advt-v2 .app-advt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-advt-size='l'] .app-advt-v2 .app-advt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(190px, 1.25fr); }

/* Posts: stacked rows when the form is narrow */
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-cols { display: none !important; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post { grid-template-columns: 30px minmax(0, 1fr) 36px; row-gap: 6px; padding: 8px 10px; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post .app-qual { grid-column: 2 / -1; grid-row: 2; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-head-actions { width: 100%; margin-left: 0; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-find { flex: 1; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-find input { width: 100%; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-pager { justify-content: center; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-pager-info { width: 100%; text-align: center; }
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 40px; }
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post .app-qual { grid-column: auto; grid-row: auto; }

/* Right column: beside the form on wide screens; below it (two cards side by side) on tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .app-advt-v2 .app-advt-form-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 767.98px) {
    .app-advt-v2 .app-advt-panel { padding: 12px; border-radius: 14px; }
    .app-advt-v2 .app-advt-submit-in .ux4g-btn { width: 100%; }
    .app-page-header-tight { padding: 10px 14px 12px; }
    .app-page-header-tight p { display: none; }
}
@media (min-width: 1800px) { .app-advt-v2.app-advt-form { grid-template-columns: minmax(0, 1fr) 380px; } }

/* Skeleton rows */
.app-advt-sk .app-advt-sk-row { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 40px; }
@media (max-width: 767.98px) { .app-advt-sk .app-advt-sk-row { grid-template-columns: 30px minmax(0, 1fr) 36px; } .app-advt-sk .app-advt-sk-row > :nth-child(3) { display: none; } }

/* Date fields: the text box shrinks so the calendar button always stays visible */
.app-date .ux4g-input { min-width: 0; }
.app-date .ux4g-input-input { flex: 1 1 auto; width: 100%; min-width: 0; }
.app-date .ux4g-input-actions { flex-shrink: 0; }
/* Advertisement dropdowns: status tones */
.app-centre-badge.is-green { background: #ecfdf3; color: #15803d; box-shadow: inset 0 0 0 1px #bbf7d0; }
.app-centre-badge.is-green .ux4g-icon-outlined { color: #15803d; }
.app-centre-badge.is-grey { background: #f2f4f7; color: #475467; box-shadow: inset 0 0 0 1px #e4e7ec; }
.app-centre-badge.is-grey .ux4g-icon-outlined { color: #475467; }
.app-centre-option.is-selected .app-centre-badge.is-green { background: #16a34a; }
.app-centre-option.is-selected .app-centre-badge.is-grey { background: #667085; }
.app-centre-option.is-selected .app-centre-badge .ux4g-icon-outlined { color: #fff; }

/* Posts table: post + qualifications pickers in the same dropdown design as Centre / Type / Status */
.app-advt-v2 .app-advt-post .app-centre-trigger { height: 38px; }
.app-advt-v2 .app-advt-post .app-qual-trigger.app-centre-trigger { min-height: 38px; height: auto; padding-top: 3px; padding-bottom: 3px; background: #fff; }
.app-advt-v2 .app-advt-post .app-qual-trigger .app-qual-chips { flex: 1; min-width: 0; }
.app-centre-trigger.is-locked { background: #f9fafb; cursor: not-allowed; }
.app-centre-trigger.is-locked .app-centre-badge { background: #f2f4f7; box-shadow: inset 0 0 0 1px #e4e7ec; }
.app-centre-trigger.is-locked .app-centre-badge .ux4g-icon-outlined, .app-centre-trigger.is-locked .app-centre-chevron { color: #98a2b3 !important; }
.app-centre-trigger.is-locked:hover { border-color: var(--ux4g-border-color-neutral-default, #d0d5dd); }
.app-post-dd .app-centre-value { font-weight: 500; }
.app-post-menu { width: 100%; max-width: none; max-height: none; padding: 6px; overflow: hidden; }
.app-post-menu-search { display: flex; align-items: center; gap: 6px; height: 34px; margin: 0 0 6px; padding: 0 10px; border: 1px solid #e4e7ec; border-radius: 10px; background: #f9fafb; }
.app-post-menu-search:focus-within { border-color: #ea580c; background: #fff; }
.app-post-menu-search .ux4g-icon-outlined { color: #98a2b3; font-size: 18px; }
.app-post-menu-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; }
.app-post-menu-list { max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.app-post-menu-list .app-centre-option-name { white-space: normal; }
.app-centre-option.is-taken { color: #98a2b3; cursor: not-allowed; }
.app-centre-option.is-taken.is-active { background: #f9fafb; }
/* Posts table: rows-per-page selector */
.app-advt-v2-pager-info { margin-right: auto; }
.app-advt-v2-perpage { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
.app-advt-v2-perpage select { height: 32px; padding: 0 28px 0 10px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; color: var(--ux4g-text-neutral-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; }
.app-advt-v2-perpage select:hover { border-color: #fdba74; }
.app-advt-v2-perpage select:focus { border-color: #ea580c; outline: 0; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.12); }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-perpage { width: 100%; justify-content: center; }
/* Rows per page now sits in the posts header, after Find post */
.app-advt-v2-head-actions .app-advt-v2-perpage { gap: 6px; font-size: 12.5px; white-space: nowrap; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-v2-head-actions .app-advt-v2-perpage { width: auto; }
/* Rows per page dropdown (Centre design, compact) */
.app-perpage-dd { flex: 0 0 auto; }
.app-perpage-dd .app-centre-trigger { width: auto; height: 32px; padding-right: 6px; }
.app-perpage-dd .app-centre-badge { width: 22px; height: 22px; }
.app-perpage-dd .app-centre-badge .ux4g-icon-outlined { font-size: 15px; }
.app-perpage-dd .app-centre-value { font-size: 13.5px; }
.app-perpage-dd .app-centre-value small { color: var(--ux4g-text-neutral-secondary); font-size: 12px; font-weight: 500; }
.app-perpage-dd .app-centre-menu { right: 0; left: auto; min-width: 160px; }
.app-advt-v2-find { height: 32px; }

/* ============ Date picker: fits every screen size and zoom ============ */
.app-date-dropdown:not(.app-date-has-time):not(.app-date-inline) { width: min(320px, calc(100vw - 16px)); }
.app-date-dropdown.app-date-inline:not(.app-date-has-time) { width: min(320px, calc(100vw - 16px)); }
@media (min-width: 577px) {
    .app-date-dropdown { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
}
/* Day cells scale with the calendar width instead of a fixed 40px */
.app-date .ux4g-date-picker-day.app-date-day { width: min(40px, 100%); height: auto; aspect-ratio: 1 / 1; }
.app-date .ux4g-date-picker-grid, .app-date .ux4g-date-picker-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* Phones: bottom sheet with comfortable touch targets */
@media (max-width: 576px) {
    .app-date .ux4g-date-picker-day.app-date-day { width: min(46px, 100%); }
    .app-date-dropdown { max-height: 85vh; max-height: 85dvh; }
}
/* Short screens (laptops at 125–175% zoom, landscape phones): tighter calendar */
@media (min-width: 577px) and (max-height: 720px) {
    .app-date .ux4g-date-picker-day.app-date-day { width: min(34px, 100%); font-size: 13px; }
    .app-date .ux4g-date-picker-header { padding-top: 6px; padding-bottom: 6px; }
    .app-date .ux4g-date-picker-footer { padding-top: 8px; padding-bottom: 8px; }
}
/* Large screens / TVs */
@media (min-width: 2200px) {
    .app-date-dropdown:not(.app-date-has-time):not(.app-date-inline), .app-date-dropdown.app-date-inline:not(.app-date-has-time) { width: 360px; }
    .app-date .ux4g-date-picker-day.app-date-day { width: min(46px, 100%); font-size: 15px; }
}
/* Date picker: smaller, compact calendar (desktop / tablet) */
@media (min-width: 577px) {
    .app-date-dropdown:not(.app-date-has-time):not(.app-date-inline), .app-date-dropdown.app-date-inline:not(.app-date-has-time) { width: min(272px, calc(100vw - 16px)); }
    .app-date .ux4g-date-picker-header { padding: 8px 10px; }
    .app-date .app-date-current { padding: 3px 8px; font-size: 14px; }
    .app-date .ux4g-date-picker-nav-btn { width: 28px; height: 28px; }
    .app-date .ux4g-date-picker-nav-btn .ux4g-icon-outlined { font-size: 20px; }
    .app-date .ux4g-date-picker-calendar { padding: 6px 8px 4px; }
    .app-date .ux4g-date-picker-weekdays { margin-bottom: 2px; }
    .app-date .ux4g-date-picker-weekday { height: 26px; font-size: 11.5px; }
    .app-date .ux4g-date-picker-grid { row-gap: 2px; }
    .app-date .ux4g-date-picker-day.app-date-day { width: min(32px, 100%); font-size: 13px; }
    .app-date .ux4g-date-picker-footer { gap: 8px; padding: 8px 10px; }
    .app-date .ux4g-date-picker-footer .ux4g-btn { min-height: 30px; height: 30px; padding: 0 12px; font-size: 13px; }
}
@media (min-width: 2200px) {
    .app-date-dropdown:not(.app-date-has-time):not(.app-date-inline), .app-date-dropdown.app-date-inline:not(.app-date-has-time) { width: 320px; }
    .app-date .ux4g-date-picker-day.app-date-day { width: min(40px, 100%); font-size: 14px; }
}
/* Date picker (date only): no fixed inner width, so all 7 columns fit and no scrollbar appears */
.app-date-dropdown:not(.app-date-has-time) .app-date-main { min-width: 0; }
.app-date-dropdown:not(.app-date-has-time) .app-date-body { display: block; }
.app-date-dropdown:not(.app-date-has-time) { overflow-x: hidden; }
.app-date-dropdown:not(.app-date-has-time) .ux4g-date-picker-day.app-date-day { justify-self: center; margin: 0 auto; }
.app-date-dropdown:not(.app-date-has-time) .ux4g-date-picker-footer > .ux4g-btn { flex: 1 1 0; justify-content: center; }

/* ============ Advertisements list: compact, standard sizes ============ */
.app-advt-list { gap: 12px; }
.app-advt-list .app-page-header-tight .app-page-header-actions .ux4g-btn { height: 34px; padding: 0 14px; font-size: 13.5px; }
/* Status cards */
.app-advt-list .app-advt-kpis { gap: 10px; }
.app-advt-list .app-advt-kpi { min-height: 0; padding: 8px 12px; gap: 10px; border-radius: 12px; }
.app-advt-list .app-advt-kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
.app-advt-list .app-advt-kpi-icon .ux4g-icon-outlined { font-size: 17px !important; }
.app-advt-list .app-advt-kpi-text { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 6px; }
.app-advt-list .app-advt-kpi-text span { font-size: 13px; }
.app-advt-list .app-advt-kpi-text strong { font-size: 18px; line-height: 1.2; }
/* Card header */
.app-advt-list .ux4g-card-header, .app-advt-list .app-card-header { padding-top: 10px; padding-bottom: 10px; }
.app-advt-list .ux4g-card-header .ux4g-icon-outlined, .app-advt-list .app-card-header .ux4g-icon-outlined { font-size: 18px; }
/* Toolbar: one compact row, labels kept for screen readers */
.app-advt-list .app-posts-toolbar { align-items: center; gap: 10px; padding: 10px 16px; }
.app-advt-list .app-posts-toolbar .ux4g-label-m-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-advt-list .app-posts-search { flex: 0 1 320px; max-width: 320px; }
.app-advt-list .app-posts-toolbar .ux4g-input { height: 36px; min-height: 36px; }
.app-advt-list .app-posts-toolbar .ux4g-input-input { font-size: 13.5px; }
.app-advt-list .app-posts-perpage { flex: 0 0 auto; margin-left: auto; }
.app-advt-list .app-posts-perpage select { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
/* Table: standard 14px text, tighter rows */
.app-advt-list .app-advt-table { font-size: 13.5px; }
.app-advt-list .app-advt-table thead th { padding-top: 8px; padding-bottom: 8px; font-size: 11px; }
.app-advt-list .app-advt-table tbody td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; }
.app-advt-list .app-posts-icon { width: 28px; height: 28px; border-radius: 8px; }
.app-advt-list .app-posts-icon .ux4g-icon-outlined { font-size: 16px !important; }
.app-advt-list .app-advt-name { gap: 8px; }
.app-advt-list .app-advt-name-text { display: flex; align-items: center; gap: 6px; flex-direction: row; }
.app-advt-list .app-advt-name-text strong { font-size: 14px; }
.app-advt-list .app-advt-type { padding: 1px 7px; font-size: 10.5px; }
.app-advt-list .app-advt-window { gap: 3px; }
.app-advt-list .app-advt-range { font-size: 13px; }
.app-advt-list .app-advt-window-meta { font-size: 11px; }
.app-advt-list .app-advt-window-meta progress { height: 4px; max-width: 220px; }
.app-advt-list .app-advt-count { display: inline-flex; align-items: baseline; gap: 4px; }
.app-advt-list .app-advt-count strong { font-size: 14px; }
.app-advt-list .app-advt-count span { font-size: 12px; }
.app-advt-list .app-advt-status { gap: 4px; }
.app-advt-list .app-advt-status .ux4g-tag, .app-advt-list .app-advt-status [class*='ux4g-tag'] { font-size: 11.5px; }
.app-advt-list .app-apps-icon-btn { width: 30px; height: 30px; }
.app-advt-list .app-apps-row-actions { gap: 4px; }
.app-advt-list .app-apps-footer { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 767.98px) {
    .app-advt-list .app-advt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-advt-list .app-posts-search { flex: 1 1 100%; max-width: none; }
    .app-advt-list .app-posts-perpage { margin-left: 0; }
}
.app-advt-list .app-card-icon { width: 30px; height: 30px; border-radius: 8px; }
.app-advt-list .ux4g-card-title { font-size: 15px; }
.app-advt-list .app-card-heading-text p, .app-advt-list .app-card-heading-text span { font-size: 12.5px; }

/* ============ Advertisements list: data table (tabs · search · filters · sortable table · pagination) ============ */
.app-at { display: flex; flex-direction: column; overflow: visible; border: 1px solid #eef0f3; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); }
.app-at-tabs { display: flex; gap: 4px; padding: 10px 14px 0; overflow-x: auto; border-bottom: 1px solid #eef0f3; scrollbar-width: none; }
.app-at-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 10px; border: 0; background: transparent; color: var(--ux4g-text-neutral-secondary); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.app-at-tab .ux4g-icon-outlined { color: inherit; font-size: 17px; }
.app-at-tab:hover { color: var(--ux4g-text-neutral-primary); }
.app-at-tab::after { content: ''; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.app-at-tab.is-current { color: #c2410c; }
.app-at-tab.is-current::after { background: #ea580c; }
.app-at-tab-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 11.5px; line-height: 20px; text-align: center; }
.app-at-tab.is-current .app-at-tab-count { background: #ffedd5; color: #c2410c; }

.app-at-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; }
.app-at-search { display: flex; flex: 1 1 280px; align-items: center; gap: 8px; max-width: 420px; height: 36px; margin: 0; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; }
.app-at-search:focus-within { border-color: #ea580c; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.12); }
.app-at-search .ux4g-icon-outlined { color: #98a2b3; font-size: 18px; }
.app-at-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; }
.app-at-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.app-filter-dd { flex: 0 0 auto; }
.app-filter-dd .app-centre-trigger { width: auto; min-width: 140px; height: 36px; padding-right: 8px; }
.app-filter-dd .app-centre-trigger.is-set { border-color: #fdba74; background: #fffaf3; }
.app-filter-dd .app-centre-badge { width: 22px; height: 22px; }
.app-filter-dd .app-centre-badge .ux4g-icon-outlined { font-size: 15px; }
.app-filter-dd .app-centre-value { font-size: 13.5px; font-weight: 600; }
.app-filter-dd.is-right .app-centre-menu { right: 0; left: auto; }
.app-filter-dd .app-centre-menu { min-width: 180px; }
.app-at-clear { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #c2410c; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.app-at-clear .ux4g-icon-outlined { color: inherit; font-size: 17px; }
.app-at-clear:hover { background: #fff7ed; }

.app-at-frame { position: relative; transition: opacity 0.15s ease; }
.app-at-frame.is-loading { opacity: 0.55; pointer-events: none; }
.app-at-scroll { overflow-x: auto; border-top: 1px solid #eef0f3; }
.app-at-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13.5px; }
.app-at-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; border-bottom: 1px solid #eaecf0; background: #f9fafb; color: #475467; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.app-at-table tbody td { padding: 9px 12px; border-bottom: 1px solid #f2f4f7; color: var(--ux4g-text-neutral-primary); vertical-align: middle; }
.app-at-table tbody tr:last-child td { border-bottom: 0; }
.app-at-table tbody tr:hover td { background: #fffbf6; }
.app-at-table .is-num { text-align: right; }
.app-at-col-sr { width: 48px; color: #98a2b3 !important; }
.app-at-col-actions { width: 1%; text-align: right !important; white-space: nowrap; }
.app-at-sort { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.app-at-sort .ux4g-icon-outlined { color: #98a2b3; font-size: 15px; }
.app-at-sort:hover, .app-at-sort.is-sorted { color: #c2410c; }
.app-at-sort.is-sorted .ux4g-icon-outlined { color: #ea580c; }
.app-at-advt { color: var(--ux4g-text-neutral-primary); font-weight: 700; text-decoration: none; }
.app-at-advt:hover { color: #c2410c; text-decoration: underline; }
.app-at-type { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #fff7ed; color: #c2410c; font-size: 12px; font-weight: 600; }
.app-at-type.is-regular { background: #eff6ff; color: #1d4ed8; }
.app-at-centre { white-space: nowrap; }
.app-at-date { white-space: nowrap; }
.app-at-window { display: block; margin-top: 1px; color: #98a2b3; font-size: 11.5px; }
.app-at-window.is-open { color: #15803d; }
.app-at-window.is-urgent { color: #c2410c; font-weight: 600; }
.app-at-window.is-upcoming { color: #1d4ed8; }
.app-at-count { color: var(--ux4g-text-neutral-primary); font-weight: 700; text-decoration: none; }
.app-at-count:hover { color: #c2410c; text-decoration: underline; }
.app-at-status { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.app-at-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-at-pill.is-active { background: #ecfdf3; color: #067647; }
.app-at-pill.is-closed { background: #f2f4f7; color: #475467; }
.app-at-pill.is-archived { background: #fff; color: #667085; box-shadow: inset 0 0 0 1px #e4e7ec; }
.app-at-pill .ux4g-icon-outlined { color: inherit; font-size: 14px; }
.app-at-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.app-at-actions { display: inline-flex; gap: 4px; }
.app-at-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; color: #475467; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.app-at-icon .ux4g-icon-outlined { color: inherit; font-size: 17px; }
.app-at-icon:hover { border-color: #fdba74; background: #fff7ed; color: #c2410c; }
.app-at-icon.is-primary { color: #c2410c; }
.app-at-icon.is-disabled { opacity: 0.35; cursor: not-allowed; }
.app-at-icon.is-disabled:hover { border-color: #e4e7ec; background: #fff; color: #475467; }
.app-at-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 16px; color: var(--ux4g-text-neutral-secondary); font-size: 13px; text-align: center; }
.app-at-empty strong { color: var(--ux4g-text-neutral-primary); font-size: 15px; }
.app-at-empty .ux4g-btn { margin-top: 6px; }

.app-at-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; border-top: 1px solid #eef0f3; }
.app-at-perpage { display: inline-flex; align-items: center; gap: 8px; color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
.app-at-perpage .app-filter-dd .app-centre-trigger { min-width: 0; height: 32px; }
.app-at-perpage .app-centre-menu { top: auto; bottom: calc(100% + 6px); min-width: 120px; }
.app-at-range { color: var(--ux4g-text-neutral-secondary); font-size: 13px; }
.app-at-range strong { color: var(--ux4g-text-neutral-primary); }
.app-at-pages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.app-at-pages button { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; color: var(--ux4g-text-neutral-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.app-at-pages button:hover:not(:disabled) { border-color: #fdba74; background: #fff7ed; }
.app-at-pages button.is-current { border-color: #ea580c; background: #ea580c; color: #fff; }
.app-at-pages button:disabled { opacity: 0.4; cursor: default; }
.app-at-pages .ux4g-icon-outlined { font-size: 18px; }
.app-at-gap { padding: 0 2px; color: #98a2b3; }

@media (max-width: 767.98px) {
    .app-at-search { flex-basis: 100%; max-width: none; }
    .app-at-filters { width: 100%; margin-left: 0; }
    .app-at-filters .app-filter-dd { flex: 1 1 0; }
    .app-at-filters .app-filter-dd .app-centre-trigger { width: 100%; min-width: 0; }
    .app-at-foot { justify-content: center; }
    .app-at-pages { margin-left: 0; }
}
/* Advertisements table — refined layout */
.app-at-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.app-at-head-text h2 { margin: 0; color: var(--ux4g-text-neutral-primary); font-size: 15px; font-weight: 700; }
.app-at-head-text p { margin: 1px 0 0; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; }
.app-at-toolbar { gap: 10px; padding: 12px 16px; }
.app-at-seg { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border-radius: 10px; background: #f2f4f7; }
.app-at-seg-item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #475467; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.app-at-seg-item:hover { color: var(--ux4g-text-neutral-primary); }
.app-at-seg-item.is-current { background: #fff; color: #c2410c; box-shadow: 0 1px 2px rgb(16 24 40 / 0.1); }
.app-at-seg-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgb(16 24 40 / 0.06); color: inherit; font-size: 11.5px; line-height: 18px; text-align: center; }
.app-at-seg-item.is-current .app-at-seg-count { background: #ffedd5; }
.app-at-search { flex: 1 1 220px; max-width: none; }
.app-at-filters { margin-left: 0; }

.app-at-table { table-layout: fixed; min-width: 960px; }
.app-at-table thead th { padding: 10px 14px; }
.app-at-table tbody td { padding: 10px 14px; }
.app-at-advt-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-at-advt-cell > span:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.app-at-advt-icon { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #c2410c; box-shadow: inset 0 0 0 1px #fed7aa; }
.app-at-advt-icon .ux4g-icon-outlined { color: inherit; font-size: 17px; }
.app-at-advt { font-size: 14px; }
.app-at-type { padding: 0 7px; border-radius: 5px; font-size: 11px; line-height: 18px; }
.app-at-centre { overflow: hidden; color: #344054 !important; text-overflow: ellipsis; }
.app-at-centre .ux4g-icon-outlined { margin-right: 4px; color: #98a2b3; font-size: 16px; vertical-align: -3px; }
.app-at-range-cell { display: flex; flex-direction: column; gap: 1px; }
.app-at-dates { color: #344054; white-space: nowrap; }
.app-at-dates span { color: #98a2b3; }
.app-at-count { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #f9fafb; box-shadow: inset 0 0 0 1px #eaecf0; font-size: 13.5px; }
.app-at-count .ux4g-icon-outlined { color: #98a2b3; font-size: 16px; }
.app-at-count:hover { background: #fff7ed; box-shadow: inset 0 0 0 1px #fed7aa; text-decoration: none; }
.app-at-count:hover .ux4g-icon-outlined { color: #ea580c; }
.app-at-pill.is-closed { background: #fef3f2; color: #b42318; }
.app-at-table tbody tr:hover td { background: #fffaf5; }
.app-at-foot { padding: 10px 16px; background: #fcfcfd; border-radius: 0 0 16px 16px; }
@media (max-width: 991.98px) {
    .app-at-seg { order: -1; width: 100%; overflow-x: auto; }
    .app-at-search { flex-basis: 100%; }
}
/* Advertisements list v3: same look as the "Posts & qualifications" panel */
.app-at-v3 { gap: 12px; padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 16px; }
.app-at-v3 .app-at-head2 { gap: 10px; padding-bottom: 10px; }
.app-at-v3 .app-at-head2 h2 { font-size: 15px; }
.app-at-v3 .app-at-head2 p { font-size: 12px; }
.app-at-v3 .app-advt-v2-icon { width: 32px; height: 32px; border-radius: 9px; }
.app-at-v3 .app-advt-v2-icon .ux4g-icon-outlined { font-size: 18px; }
.app-at-v3 .app-advt-v2-head-actions { gap: 8px; }
.app-at-v3 .app-at-find { height: 32px; }
.app-at-v3 .app-at-find input { width: 170px; }
.app-at-v3 .app-filter-dd .app-centre-trigger { min-width: 0; height: 32px; padding-left: 5px; }
.app-at-v3 .app-filter-dd .app-centre-value { font-size: 13px; }
.app-at-v3 .app-at-clear { height: 32px; }
/* Table: light headings + rounded inner box */
.app-at-v3 .app-at-scroll { overflow-x: auto; border: 1px solid #eef0f3; border-radius: 12px; border-top: 1px solid #eef0f3; }
.app-at-v3 .app-at-table thead th { position: static; padding: 9px 12px; border-bottom: 1px solid #f2f4f7; background: transparent; color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 11px; letter-spacing: 0.06em; }
.app-at-v3 .app-at-sort { color: var(--ux4g-text-neutral-tertiary, #98a2b3); }
.app-at-v3 .app-at-sort:hover, .app-at-v3 .app-at-sort.is-sorted { color: #c2410c; }
.app-at-v3 .app-at-table tbody td { padding: 8px 12px; border-bottom: 1px solid #f2f4f7; }
.app-at-v3 .app-at-table tbody tr:hover td { background: #fffaf3; }
/* Footer: "Showing …" + pager, no band */
.app-at-v3 .app-at-foot { padding: 4px 0 0; border-top: 0; background: transparent; border-radius: 0; }
.app-at-v3 .app-at-pages { margin-left: auto; }
@media (max-width: 991.98px) {
    .app-at-v3 .app-advt-v2-head-actions { width: 100%; margin-left: 0; }
    .app-at-v3 .app-at-find { flex: 1 1 100%; }
    .app-at-v3 .app-at-find input { width: 100%; }
}
/* Advertisements table: columns sized to fit inside the frame (actions always visible) */
.app-at-v3 .app-at-table { table-layout: auto; width: 100%; min-width: 860px; }
.app-at-v3 .app-at-col-sr { width: 44px; padding-right: 4px !important; }
.app-at-v3 .app-at-w-advt_no { width: 22%; }
.app-at-v3 .app-at-w-centre { width: 15%; }
.app-at-v3 .app-at-w-start_date { width: 24%; }
.app-at-v3 .app-at-w-applications_count { width: 13%; }
.app-at-v3 .app-at-w-status { width: 16%; }
.app-at-v3 .app-at-col-actions { width: 1%; padding-right: 14px !important; text-align: right; white-space: nowrap; }
.app-at-v3 .app-at-table th, .app-at-v3 .app-at-table td { vertical-align: middle; }
.app-at-v3 .app-at-centre { white-space: nowrap; }
.app-at-v3 .app-at-status { flex-wrap: nowrap; }

/* Advertisements table: application window as an animated mini timeline */
.app-tl { --tone: #98a2b3; --tone-soft: #f2f4f7; display: flex; flex-direction: column; gap: 5px; max-width: 280px; }
.app-tl.is-open { --tone: #16a34a; --tone-soft: #ecfdf3; }
.app-tl.is-urgent { --tone: #ea580c; --tone-soft: #fff7ed; }
.app-tl.is-upcoming { --tone: #2563eb; --tone-soft: #eff6ff; }
.app-tl.is-ended { --tone: #98a2b3; --tone-soft: #f2f4f7; }
.app-tl-dates { display: flex; align-items: center; gap: 8px; }
.app-tl-date { display: inline-flex; flex-direction: column; flex-shrink: 0; align-items: center; min-width: 46px; padding: 2px 6px; border-radius: 8px; background: #f9fafb; box-shadow: inset 0 0 0 1px #eaecf0; line-height: 1.15; transition: box-shadow 0.2s ease, background 0.2s ease; }
.app-tl-date b { color: #344054; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.app-tl-date small { color: #98a2b3; font-size: 10px; }
.app-at-table tbody tr:hover .app-tl-date { background: #fff; box-shadow: inset 0 0 0 1px var(--tone); }
.app-tl-track { position: relative; flex: 1; min-width: 40px; height: 4px; border-radius: 999px; background: #eaecf0; }
.app-tl-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, #fff), var(--tone)); animation: app-tl-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-tl-knob { position: absolute; top: 50%; left: var(--p); width: 10px; height: 10px; border: 2px solid #fff; border-radius: 999px; background: var(--tone); box-shadow: 0 0 0 1px var(--tone); transform: translate(-50%, -50%); animation: app-tl-slide 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-tl.is-ended .app-tl-knob { display: none; }
.app-tl-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border-radius: 999px; background: var(--tone-soft); color: var(--tone); font-size: 11.5px; font-weight: 600; }
.app-tl.is-ended .app-tl-chip { color: #667085; }
.app-tl-dot { position: relative; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.app-tl.is-open .app-tl-dot::after, .app-tl.is-urgent .app-tl-dot::after, .app-tl.is-upcoming .app-tl-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: app-tl-pulse 1.6s ease-out infinite; }
@keyframes app-tl-grow { from { width: 0; } }
@keyframes app-tl-slide { from { left: 0; } }
@keyframes app-tl-pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
@media (prefers-reduced-motion: reduce) { .app-tl-fill, .app-tl-knob, .app-tl-dot::after { animation: none !important; } }
/* Application window: colourful heartbeat line */
.app-tl.is-ended { --tone: #7c3aed; --tone-soft: #f5f3ff; }
.app-tl.is-open { --tone: #059669; --tone-soft: #ecfdf5; }
.app-tl.is-urgent { --tone: #ea580c; --tone-soft: #fff7ed; }
.app-tl.is-upcoming { --tone: #2563eb; --tone-soft: #eff6ff; }
.app-tl-date { background: var(--tone-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent); }
.app-tl-date b { color: color-mix(in srgb, var(--tone) 80%, #101828); }
.app-tl-date small { color: color-mix(in srgb, var(--tone) 55%, #98a2b3); }
.app-tl-track { height: 24px; background: transparent; }
.app-tl-pulse { display: block; width: 100%; height: 24px; overflow: visible; }
.app-tl-pulse path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app-tl-base { stroke: color-mix(in srgb, var(--tone) 18%, transparent); stroke-width: 2; }
.app-tl-beat { stroke: var(--tone); stroke-width: 2; stroke-dasharray: 60 200; stroke-dashoffset: 260; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tone) 55%, transparent)); animation: app-tl-beat 2.4s linear infinite; }
@keyframes app-tl-beat { to { stroke-dashoffset: 0; } }
.app-tl-chip { background: var(--tone-soft); color: var(--tone) !important; }
.app-tl.is-ended .app-tl-chip { color: var(--tone) !important; }
.app-tl .app-tl-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: app-tl-pulse 1.6s ease-out infinite; }
.app-at-table tbody tr:nth-child(2n) .app-tl-beat { animation-delay: -0.8s; }
.app-at-table tbody tr:nth-child(3n) .app-tl-beat { animation-delay: -1.6s; }
@media (prefers-reduced-motion: reduce) { .app-tl-beat { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; } }
/* Application window: start date green, end date red (all states) */
.app-tl .app-tl-date:not(.is-end) { background: #ecfdf3; box-shadow: inset 0 0 0 1px #a7f3d0; }
.app-tl .app-tl-date:not(.is-end) b { color: #047857; }
.app-tl .app-tl-date:not(.is-end) small { color: #10b981; }
.app-tl .app-tl-date.is-end { background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; }
.app-tl .app-tl-date.is-end b { color: #b91c1c; }
.app-tl .app-tl-date.is-end small { color: #f87171; }
.app-at-table tbody tr:hover .app-tl-date:not(.is-end) { background: #fff; box-shadow: inset 0 0 0 1px #10b981; }
.app-at-table tbody tr:hover .app-tl-date.is-end { background: #fff; box-shadow: inset 0 0 0 1px #ef4444; }
/* "Ended" chip in red */
.app-tl.is-ended .app-tl-chip { background: #fef2f2; color: #dc2626 !important; box-shadow: inset 0 0 0 1px #fecaca; }
/* Ended: heartbeat line in grey */
.app-tl.is-ended .app-tl-base { stroke: #e4e7ec; }
.app-tl.is-ended .app-tl-beat { stroke: #98a2b3; filter: drop-shadow(0 0 2px rgb(152 162 179 / 0.5)); }
/* Application window: each date on one line */
.app-tl { max-width: 340px; }
.app-tl-date { flex-direction: row; min-width: 0; padding: 3px 8px; }
.app-tl-date b { font-size: 12px; }
.app-tl-track { min-width: 28px; }
/* Days-left chip centred under the timeline */
.app-tl-chip { align-self: center; }
/* Advertisements table: centred headings (and their cells) for Centre, Application window, Applications, Status, Actions */
.app-at-v3 .app-at-table th.app-at-w-centre, .app-at-v3 .app-at-table th.app-at-w-start_date,
.app-at-v3 .app-at-table th.app-at-w-applications_count, .app-at-v3 .app-at-table th.app-at-w-status,
.app-at-v3 .app-at-table th.app-at-col-actions { text-align: center !important; }
.app-at-v3 .app-at-table th .app-at-sort { justify-content: center; }
.app-at-v3 .app-at-table tbody td:nth-child(3), .app-at-v3 .app-at-table tbody td:nth-child(4),
.app-at-v3 .app-at-table tbody td:nth-child(5), .app-at-v3 .app-at-table tbody td:nth-child(6),
.app-at-v3 .app-at-table tbody td.app-at-col-actions { text-align: center !important; }
.app-at-v3 .app-tl { margin: 0 auto; }
.app-at-v3 .app-at-status { justify-content: center; }
.app-at-v3 .app-at-actions { justify-content: center; }
/* Advertisements table: tighter rows and columns */
.app-at-v3 .app-at-table thead th { padding: 7px 10px; }
.app-at-v3 .app-at-table tbody td { padding: 6px 10px; }
.app-at-v3 .app-at-col-sr { width: 36px; }
.app-at-v3 .app-at-advt-cell { gap: 8px; }
.app-at-v3 .app-at-advt-icon { width: 28px; height: 28px; border-radius: 8px; }
.app-at-v3 .app-at-advt-icon .ux4g-icon-outlined { font-size: 15px; }
.app-at-v3 .app-at-advt-cell > span:last-child { flex-direction: row; align-items: center; gap: 6px; }
.app-at-v3 .app-tl { gap: 2px; max-width: 320px; }
.app-at-v3 .app-tl-dates { gap: 6px; }
.app-at-v3 .app-tl-date { padding: 1px 7px; }
.app-at-v3 .app-tl-track, .app-at-v3 .app-tl-pulse { height: 18px; }
.app-at-v3 .app-tl-chip { padding: 0 8px 0 6px; font-size: 11px; line-height: 17px; }
.app-at-v3 .app-at-count { padding: 2px 9px 2px 7px; }
.app-at-v3 .app-at-icon { width: 28px; height: 28px; }
.app-at-v3 .app-at-icon .ux4g-icon-outlined { font-size: 16px; }
.app-at-v3 .app-at-w-advt_no { width: 18%; }
.app-at-v3 .app-at-w-centre { width: 14%; }
.app-at-v3 .app-at-w-start_date { width: 28%; }
.app-at-v3 .app-at-w-applications_count { width: 12%; }
.app-at-v3 .app-at-w-status { width: 16%; }
button.app-at-icon { padding: 0; font: inherit; cursor: pointer; }

/* =====================================================================
   All list pages (.app-index): same look as the Advertisements list —
   slim header, compact status cards, one-row toolbar, rounded table frame
   with light headings, compact rows and orange pager.
   ===================================================================== */
.app-index { gap: 12px; }
/* Page header (slim) */
.app-index > .app-page-header { gap: 6px; margin-bottom: 0; padding: 10px 20px 12px; }
.app-index > .app-page-header::after { display: none; }
.app-index > .app-page-header .app-breadcrumb { padding-bottom: 6px; }
.app-index > .app-page-header .app-page-header-icon { width: 38px; height: 38px; }
.app-index > .app-page-header .app-page-header-icon .ux4g-icon-outlined { font-size: 22px !important; }
.app-index > .app-page-header h1 { font-size: 20px; line-height: 1.25; }
.app-index > .app-page-header p { font-size: 13px; }
.app-index > .app-page-header .app-page-header-actions .ux4g-btn { height: 34px; min-height: 34px; padding: 0 14px; font-size: 13.5px; }

/* Summary cards */
.app-index .app-apps-kpis, .app-index .app-advt-kpis { gap: 10px; }
.app-index .app-apps-kpi, .app-index .app-advt-kpi { min-height: 0; gap: 10px; padding: 8px 12px; border-radius: 12px; }
.app-index .app-apps-kpi-icon, .app-index .app-advt-kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
.app-index .app-apps-kpi-icon .ux4g-icon-outlined, .app-index .app-advt-kpi-icon .ux4g-icon-outlined { font-size: 17px !important; }
.app-index .app-apps-kpi-text strong, .app-index .app-advt-kpi-text strong { font-size: 18px; line-height: 1.2; }

/* Card = panel */
.app-index .app-card { overflow: visible; border: 1px solid #eef0f3; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); }
.app-index .app-card > .app-card-header { gap: 10px; margin: 0 16px; padding: 14px 0 10px; border-bottom: 1px solid #f2f4f7; background: transparent; }
.app-index .app-card-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #c2410c; box-shadow: inset 0 0 0 1px #fed7aa; }
.app-index .app-card-icon .ux4g-icon-outlined { color: inherit; font-size: 18px !important; }
.app-index .app-card .ux4g-card-title { font-size: 15px; font-weight: 700; }
.app-index .app-card-heading-text p { margin-top: 1px; font-size: 12px; }
.app-index .app-card > .app-card-body { padding: 12px 16px 14px; }
.app-index .app-card > .app-card-body.app-card-body-flush { padding: 12px 16px 14px; }

/* Toolbar: one compact row, labels hidden visually (kept for screen readers) */
.app-index .app-apps-filters, .app-index .app-posts-toolbar, .app-index .app-apps-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; background: transparent;
}
.app-index .app-apps-filters .ux4g-label-m-default, .app-index .app-posts-toolbar .ux4g-label-m-default, .app-index .app-apps-toolbar .ux4g-label-m-default {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.app-index .app-apps-search, .app-index .app-posts-search { flex: 1 1 240px; max-width: 360px; margin-right: auto; }
.app-index .app-apps-filters .ux4g-input-container, .app-index .app-posts-toolbar .ux4g-input-container, .app-index .app-apps-toolbar .ux4g-input-container { gap: 0; min-width: 0; }
.app-index .app-apps-filters .ux4g-input, .app-index .app-posts-toolbar .ux4g-input, .app-index .app-apps-toolbar .ux4g-input { height: 34px; min-height: 34px; border-radius: 10px; }
.app-index .app-apps-filters .ux4g-input-input, .app-index .app-posts-toolbar .ux4g-input-input { font-size: 13.5px; }
.app-index .app-apps-filters select, .app-index .app-posts-toolbar select, .app-index .app-apps-toolbar select {
    height: 34px; min-height: 34px; padding: 0 30px 0 12px; border: 1px solid #d0d5dd; border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--ux4g-text-neutral-primary); font-size: 13.5px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.app-index .app-apps-filters select:hover, .app-index .app-posts-toolbar select:hover, .app-index .app-apps-toolbar select:hover { border-color: #fdba74; }
.app-index .app-apps-filters select:focus, .app-index .app-posts-toolbar select:focus, .app-index .app-apps-toolbar select:focus { border-color: #ea580c; outline: 0; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.12); }
.app-index .app-apps-filter, .app-index .app-apps-perpage, .app-index .app-posts-perpage { flex: 0 0 auto; min-width: 130px; }

/* Table: rounded frame, light headings, compact rows */
.app-index .app-table-wrap { overflow-x: auto; border: 1px solid #eef0f3 !important; border-radius: 12px !important; background: #fff; box-shadow: none; }
.app-index .app-table-wrap .ux4g-table { margin: 0; border: 0; font-size: 13.5px; }
.app-index .app-table-wrap .ux4g-table thead th {
    padding: 8px 12px; border-bottom: 1px solid #f2f4f7; background: transparent !important;
    color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.app-index .app-table-wrap .ux4g-table tbody td { padding: 7px 12px; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.app-index .app-table-wrap .ux4g-table tbody tr:last-child td { border-bottom: 0; }
.app-index .app-table-wrap .ux4g-table tbody tr:hover td { background: #fffaf3; }
.app-index .app-apps-col-sr { width: 40px; color: #98a2b3; }
.app-index .app-apps-icon-btn { width: 28px; height: 28px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; }
.app-index .app-apps-icon-btn .ux4g-icon-outlined { font-size: 16px !important; }
.app-index .app-apps-icon-btn:hover { border-color: #fdba74; background: #fff7ed; color: #c2410c; }
.app-index .app-apps-row-actions { gap: 4px; }

/* Pagination: page buttons on the right, no "Showing …" line */
.app-index .app-apps-footer { padding: 0; border: 0; background: transparent; }
.app-index .app-pagination { justify-content: flex-end; padding: 12px 0 0; }
.app-index .app-pagination > p { display: none; }
.app-index .app-pagination .ux4g-pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.app-index .app-pagination .ux4g-page-number, .app-index .app-pagination .ux4g-page-nav {
    display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #e4e7ec; border-radius: 8px;
    background: #fff; color: var(--ux4g-text-neutral-primary); font-size: 13px; font-weight: 600;
}
.app-index .app-pagination .ux4g-page-nav { font-size: 18px; }
.app-index .app-pagination .ux4g-page-number:hover, .app-index .app-pagination .ux4g-page-nav:hover:not(:disabled) { border-color: #fdba74; background: #fff7ed; }
.app-index .app-pagination .ux4g-page-number.active { border-color: #ea580c; background: #ea580c; color: #fff; }
.app-index .app-pagination .ux4g-page-nav:disabled { opacity: 0.4; cursor: default; }
.app-index .app-pagination .ux4g-page-number-more { border: 0; background: transparent; color: #98a2b3; }

@media (max-width: 767.98px) {
    .app-index .app-apps-search, .app-index .app-posts-search { flex-basis: 100%; max-width: none; margin-right: 0; }
    .app-index .app-apps-filter, .app-index .app-apps-perpage, .app-index .app-posts-perpage { flex: 1 1 0; }
    .app-index .app-pagination { justify-content: center; }
    .app-index .app-card > .app-card-header { margin: 0 12px; }
    .app-index .app-card > .app-card-body, .app-index .app-card > .app-card-body.app-card-body-flush { padding: 10px 12px 12px; }
}

/* List pages: controls in the card header (search · filters · rows per page) */
.app-index .app-card > .app-card-header { display: flex; flex-wrap: wrap; align-items: center; }
.app-index .app-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.app-index .app-card-actions .app-at-find { height: 32px; }
.app-index .app-card-actions .app-at-find input { width: 220px; }
.app-index .app-card-actions .app-filter-dd .app-centre-trigger { min-width: 0; max-width: 260px; height: 32px; padding-left: 5px; }
.app-index .app-card-actions .app-filter-dd .app-centre-value { font-size: 13px; }
.app-index .app-card-actions .app-filter-dd .app-centre-menu { max-height: 320px; overflow-y: auto; }

/* Applications page: overview strip (advertisement picker + counts) compact */
.app-index .app-apps-overview { gap: 10px; padding: 10px; border-radius: 16px; }
.app-index .app-apps-picker { gap: 10px; padding: 8px 12px; border-radius: 12px; }
.app-index .app-apps-picker-icon { width: 34px; height: 34px; border-radius: 9px; }
.app-index .app-apps-picker-icon .ux4g-icon-outlined { font-size: 20px !important; }
.app-index .app-apps-picker .ux4g-label-m-default { font-size: 12px; }
.app-index .app-apps-picker select { height: 34px; min-height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; font-weight: 600; }
.app-index .app-apps-kpi-rate { gap: 6px; }

/* Applications page: bulk actions as one compact row */
.app-index .app-apps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; background: transparent; }
.app-index .app-apps-action-group { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border: 1px solid #eef0f3; border-radius: 12px; background: #fcfcfd; }
.app-index .app-apps-action-label { margin: 0; color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.app-index .app-apps-action-buttons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-index .app-apps-action-buttons .ux4g-btn { width: auto; height: 30px; min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.app-index .app-apps-action-buttons .ux4g-btn .ux4g-icon-outlined { font-size: 17px !important; }
.app-index .app-apps-selected { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid #fed7aa; border-radius: 8px; background: #fff; color: #c2410c; font-size: 12.5px; }
.app-index .app-apps-pdf-group { margin-left: auto; }
.app-index .app-export-meta:empty { display: none; }

@media (max-width: 991.98px) {
    .app-index .app-card-actions { width: 100%; margin-left: 0; }
    .app-index .app-card-actions .app-at-find { flex: 1 1 100%; }
    .app-index .app-card-actions .app-at-find input { width: 100%; }
    .app-index .app-apps-pdf-group { margin-left: 0; }
}
.app-index .app-apps-actions > .app-apps-action-group { flex: 0 1 auto; min-width: 0; }
.app-index .app-apps-actions > .app-apps-action-group.app-apps-pdf-group { margin-left: auto; }
.app-index .app-apps-actions .app-apps-action-buttons { flex: 0 1 auto; flex-wrap: wrap; }
.app-index .app-apps-actions .app-apps-action-buttons > .ux4g-btn:not(.app-cancel-export) { flex: 0 0 auto; }
@media (max-width: 991px) {
    .app-index .app-apps-actions > .app-apps-action-group { flex-basis: auto; }
    .app-index .app-apps-actions > .app-apps-action-group.app-apps-pdf-group { margin-left: 0; }
}
/* Applications page: action groups fill the row evenly (no gap), label on top, content centred */
.app-index .app-apps-actions { display: grid; grid-template-columns: repeat(4, auto); justify-content: stretch; gap: 8px; align-items: stretch; }
.app-index .app-apps-actions > .app-apps-action-group,
.app-index .app-apps-actions > .app-apps-action-group.app-apps-pdf-group { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; margin: 0; padding: 6px 10px 8px; }
.app-index .app-apps-action-label { text-align: center; }
.app-index .app-apps-actions .app-apps-action-buttons { justify-content: center; flex-wrap: nowrap; }
.app-index .app-apps-pdf-group .app-apps-action-buttons > .ux4g-btn:not(.app-cancel-export) { flex: 1 1 auto; }
.app-index .app-apps-selected { height: 30px; font-size: 12.5px; font-weight: 600; }
.app-index .app-apps-actions .ux4g-switch-label { font-size: 12.5px; font-weight: 600; }
@media (max-width: 1199.98px) { .app-index .app-apps-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-index .app-apps-actions .app-apps-action-buttons { flex-wrap: wrap; } }
@media (max-width: 575.98px) { .app-index .app-apps-actions { grid-template-columns: minmax(0, 1fr); } }

/* Multi-select filter dropdown (search + checkboxes) */
.app-multi-dd .app-centre-menu.app-multi-menu { width: 340px; max-width: calc(100vw - 24px); max-height: none; padding: 8px; overflow: visible; }
.app-multi-dd .app-post-menu-list { max-height: 260px; }
.app-multi-dd .app-centre-option-name { white-space: normal; line-height: 1.35; }
.app-multi-option { align-items: flex-start; gap: 10px; }
.app-multi-option .app-addpost-check { margin-top: 1px; }
.app-multi-option.is-selected { background: #fff7ed; font-weight: 600; }
.app-multi-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; color: var(--ux4g-text-neutral-secondary); font-size: 12px; }
.app-multi-bar button { padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: #c2410c; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.app-multi-bar button:hover { background: #fff7ed; }
.app-multi-foot { display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 6px; border-top: 1px solid #f2f4f7; }
.app-multi-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: #ea580c; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.app-multi-dd .app-centre-value { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-index .app-card-actions .app-multi-dd .app-centre-menu { max-height: none; overflow: visible; }
.app-index .app-card-actions .app-multi-dd:not(.is-right) .app-centre-menu { right: 0; left: auto; }
/* Multi-select dropdown: not-found state */
.app-multi-empty { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 10px; color: var(--ux4g-text-neutral-secondary); font-size: 12.5px; text-align: center; }
.app-multi-empty strong { color: var(--ux4g-text-neutral-primary); font-size: 14px; }
.app-multi-empty .app-addpost-empty-icon { width: 42px; height: 42px; margin-bottom: 4px; }
.app-multi-empty button { margin-top: 4px; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: #c2410c; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.app-multi-empty button:hover { background: #fff7ed; }
/* Single-choice filter dropdowns: checkbox in front of each option */
.app-filter-dd .app-multi-option { align-items: center; }
.app-filter-dd .app-multi-option .app-addpost-check { margin-top: 0; }
.app-filter-dd .app-centre-menu { min-width: 190px; }
/* Applications page: advertisement picker as a Centre-style dropdown */
.app-apps-picker-field { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.app-apps-advt-dd .app-centre-trigger { width: 100%; min-width: 180px; height: 36px; }
.app-apps-advt-dd .app-centre-value { font-size: 14px; font-weight: 700; }
.app-apps-advt-dd .app-centre-menu { min-width: 100%; }
/* Filter dropdown with search */
.app-filter-dd-search { padding: 0 0 6px; list-style: none; }
.app-filter-dd-search .app-post-menu-search { margin: 0; }
.app-filter-dd .app-centre-menu:has(.app-filter-dd-search) { max-height: 340px; overflow-y: auto; }

/* Applications page: submission rate as a heartbeat (pulse) line */
.app-apps-ecg { position: relative; width: 100%; height: 26px; }
.app-apps-ecg svg { display: block; width: 100%; height: 26px; overflow: visible; }
.app-apps-ecg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app-apps-ecg-base path { stroke: #e4e7ec; }
.app-apps-ecg-fill { position: absolute; inset: 0; clip-path: inset(-6px calc(100% - var(--p)) -6px 0); animation: app-ecg-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-apps-ecg-fill path { stroke: #16a34a; filter: drop-shadow(0 0 2px rgb(22 163 74 / 0.45)); }
.app-apps-ecg-fill .app-apps-ecg-beat { stroke: #86efac; stroke-width: 3; stroke-dasharray: 26 400; stroke-dashoffset: 426; filter: drop-shadow(0 0 4px rgb(34 197 94 / 0.9)); animation: app-ecg-beat 2.2s linear infinite; }
@keyframes app-ecg-reveal { from { clip-path: inset(-6px 100% -6px 0); } }
@keyframes app-ecg-beat { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .app-apps-ecg-fill, .app-apps-ecg-beat { animation: none !important; } }
/* Action bars: any number of groups share the full row equally */
.app-index .app-apps-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 1199.98px) { .app-index .app-apps-actions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .app-index .app-apps-actions { grid-template-columns: minmax(0, 1fr); } }
/* List tables: sticky headings stay solid and above the rows while scrolling */
.app-index .app-table-wrap .ux4g-table thead th { position: sticky; top: 0; z-index: 3; background: #fff !important; box-shadow: inset 0 -1px 0 #f2f4f7; }
.app-index .app-table-wrap .ux4g-table thead th:first-child { border-top-left-radius: 12px; }
.app-index .app-table-wrap .ux4g-table thead th:last-child { border-top-right-radius: 12px; }
.app-index .app-table-wrap .ux4g-table tbody td { position: relative; z-index: 0; }
.app-index .app-table-wrap { scrollbar-width: thin; scrollbar-color: #e4e7ec transparent; }
/* List tables: light background on the heading row */
.app-index .app-table-wrap .ux4g-table thead th { background: #f9fafb !important; color: #667085; box-shadow: inset 0 -1px 0 #eaecf0; }
.app-at-v3 .app-at-table thead th { background: #f9fafb; color: #667085; border-bottom: 1px solid #eaecf0; }
.app-at-v3 .app-at-table thead th:first-child { border-top-left-radius: 12px; }
.app-at-v3 .app-at-table thead th:last-child { border-top-right-radius: 12px; }
.app-at-v3 .app-at-sort { color: #667085; }
/* Table heading row: light theme (peach) colour */
.app-index .app-table-wrap .ux4g-table thead th { background: #fff4e8 !important; color: #9a3412; box-shadow: inset 0 -1px 0 #fed7aa; }
.app-at-v3 .app-at-table thead th { background: #fff4e8; color: #9a3412; border-bottom: 1px solid #fed7aa; }
.app-at-v3 .app-at-sort { color: #9a3412; }
.app-at-v3 .app-at-sort .ux4g-icon-outlined { color: #fb923c; }
.app-at-v3 .app-at-sort:hover, .app-at-v3 .app-at-sort.is-sorted { color: #c2410c; }
/* Advertisement picker (no label): icon and dropdown vertically centred */
.app-index .app-apps-picker { align-items: center; align-self: stretch; }
.app-index .app-apps-picker-field { justify-content: center; gap: 0; }

/* List page skeleton (lazy placeholder) */
.app-idx-sk.app-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.app-idx-sk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f2f4f7; }
.app-idx-sk-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.app-idx-sk-table { overflow: hidden; border: 1px solid #eef0f3; border-radius: 12px; }
.app-idx-sk-row { display: grid; grid-template-columns: 40px repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid #f2f4f7; }
.app-idx-sk-row:first-child { border-top: 0; }
.app-idx-sk-row.is-head { background: #fff4e8; }
.app-idx-sk-row .app-sk { width: 70%; }
@media (max-width: 767.98px) { .app-idx-sk-tools { width: 100%; margin-left: 0; } .app-idx-sk-row > :nth-child(n+5) { display: none; } }

/* Candidate accounts table */
.app-ca-center { text-align: center !important; }
.app-ca-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-ca-avatar { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #c2410c; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px #fed7aa; }
.app-ca-person-text { display: flex; flex-direction: column; min-width: 0; }
.app-ca-person-text strong { color: var(--ux4g-text-neutral-primary); font-size: 13.5px; }
.app-ca-person-text small { overflow: hidden; color: var(--ux4g-text-neutral-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.app-ca-count { display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 12.5px; font-weight: 700; }
.app-ca-count.is-zero { background: #f2f4f7; color: #98a2b3; }
.app-ca-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-ca-pill .ux4g-icon-outlined { color: inherit; font-size: 14px; }
.app-ca-pill.is-locked { background: #eff6ff; color: #1d4ed8; }
.app-ca-pill.is-open { background: #f2f4f7; color: #475467; }
.app-ca-pill.is-none { background: transparent; color: #98a2b3; font-weight: 500; }
.app-ca-pill.is-active { background: #ecfdf3; color: #067647; }
.app-ca-pill.is-blocked { background: #fef2f2; color: #b91c1c; }
.app-ca-actions { display: inline-flex; gap: 4px; }
.app-at-icon.is-danger { color: #b91c1c; }
.app-at-icon.is-danger:hover { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.app-at-icon:disabled { opacity: 0.4; cursor: not-allowed; }
/* Summary cards: any number of cards share the full row equally */
.app-index .app-apps-kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 991.98px) { .app-index .app-apps-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .app-index .app-apps-kpis { grid-template-columns: minmax(0, 1fr); } }

/* Manage login dialog — redesign */
#candidateManageModal .ux4g-modal-body { padding-top: 14px; }
.app-cm { gap: 16px; }
.app-cm-who { gap: 12px; padding: 14px; border: 1px solid #fde4c8; border-radius: 14px; background: linear-gradient(135deg, #fff7ed 0%, #fffbf6 60%, #fff 100%); }
.app-cm-avatar { width: 44px; height: 44px; background: linear-gradient(135deg, #fb923c, #ea580c); font-size: 15px; letter-spacing: 0.02em; box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px rgb(234 88 12 / 0.6); }
.app-cm-who-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.app-cm-who-text strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.app-cm-who-text small { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: #667085; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.app-cm-who-text small .ux4g-icon-outlined { color: #98a2b3; font-size: 14px; }
.app-cm-badge { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.app-cm-badge .ux4g-icon-outlined { font-size: 14px; }
.app-cm-badge.is-ok { background: #ecfdf3; color: #067647; }
.app-cm-badge.is-warn { background: #fffaeb; color: #b54708; }
/* Underline tabs */
.app-cm-tabs { gap: 0; padding: 0; border-bottom: 1px solid #eaecf0; border-radius: 0; background: transparent; }
.app-cm-tabs button { position: relative; flex: 0 0 auto; padding: 8px 14px 10px; border-radius: 0; color: #667085; }
.app-cm-tabs button::after { content: ''; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background 0.15s ease; }
.app-cm-tabs button:hover { color: var(--ux4g-text-neutral-primary); }
.app-cm-tabs button.is-active { background: transparent; color: #c2410c; box-shadow: none; }
.app-cm-tabs button.is-active::after { background: #ea580c; }
/* Fields and notes */
.app-cm-form { gap: 14px; }
.app-cm .ux4g-input { border-radius: 10px; }
.app-cm-hint { padding: 10px 12px; border: 1px solid #fde4c8; border-radius: 10px; background: #fffaf3; color: #7c2d12; }
.app-cm-hint .ux4g-icon-outlined { color: #ea580c; }
.app-cm-mode { padding: 12px 14px; }
.app-cm-mode.is-active { box-shadow: 0 0 0 3px rgb(234 88 12 / 0.08); }
/* Footer buttons */
#candidateManageModal .ux4g-modal-actions { gap: 8px; padding-top: 12px; border-top: 1px solid #f2f4f7; }
#candidateManageModal .ux4g-modal-actions .ux4g-btn { height: 38px; min-height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
#candidateManageModal .ux4g-modal-actions .ux4g-btn-primary { border-color: #ea580c; background: #ea580c; color: #fff; }
#candidateManageModal .ux4g-modal-actions .ux4g-btn-primary .ux4g-icon-outlined { color: #fff; }
#candidateManageModal .ux4g-modal-actions .ux4g-btn-primary:hover:not(:disabled) { border-color: #c2410c; background: #c2410c; }
/* Manage login: consistent edges, aligned icons and buttons */
#candidateManageModal .ux4g-modal-box { width: min(520px, calc(100vw - 24px)); }
#candidateManageModal .ux4g-modal-header { padding: 16px 20px 12px; }
#candidateManageModal .ux4g-modal-body { padding: 14px 20px 4px; }
#candidateManageModal .ux4g-modal-actions { justify-content: flex-end; align-items: center; padding: 12px 20px 16px; }
#candidateManageModal .ux4g-modal-actions .ux4g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
#candidateManageModal .ux4g-modal-actions .ux4g-btn .ux4g-icon-outlined { font-size: 18px !important; line-height: 1; }
.app-cm-form .ux4g-input-container { gap: 6px; }
.app-cm-form .ux4g-input { height: 40px; min-height: 40px; }
.app-cm-hint { align-items: center; }
.app-cm-hint .ux4g-icon-outlined { align-self: flex-start; margin-top: 2px; }
.app-cm-tabs button { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.app-cm-tabs button .ux4g-icon-outlined { font-size: 18px; line-height: 1; }
.app-cm-hint strong { overflow-wrap: anywhere; }

/* Admin users table */
.app-admin-access { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.app-admin-access small { display: inline-flex; align-items: center; gap: 3px; color: #667085; font-size: 12px; }
.app-admin-access small .ux4g-icon-outlined { color: #98a2b3; font-size: 14px; }
.app-ca-pill.is-super { background: #fff7ed; color: #c2410c; }
.app-ca-pill.is-centre { background: #eff6ff; color: #1d4ed8; }
.app-admin-status { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 6px; border: 1px solid #eaecf0; border-radius: 999px; background: #fff; cursor: pointer; }
.app-admin-status-text { color: #b91c1c; font-size: 12px; font-weight: 600; }
.app-admin-status-text.is-on { color: #067647; }
.app-admin-updated { color: #667085; font-size: 12.5px; }
.app-index .is-disabled-row td { background: #fcfcfd; }
.app-index .is-disabled-row .app-ca-person-text strong, .app-index .is-disabled-row .app-apps-candidate-name { color: #667085; }
/* Custom dropdowns inside dialogs: the list floats over the dialog (placed by the dropdown's script) */
.ux4g-modal-body .app-centre-menu { max-width: none; overflow-y: auto; }
.app-centre-trigger:disabled { background: #f9fafb; cursor: not-allowed; opacity: 0.8; }

/* Advertisement form: upper age limit column on posts + age relaxation panel */
.app-advt-v2-cols,
.app-advt-v2 .app-advt-post,
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 118px 40px; }
.app-advt-post-age { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-advt-v2 .app-advt-post-age .ux4g-label-m-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-age-input { max-width: none; height: 38px; padding: 0 10px; }
.app-age-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }
.app-age-input > span { flex-shrink: 0; color: var(--ux4g-text-neutral-secondary, #667085); font-size: 12px; }
.app-age-input.is-error { border-color: var(--ux4g-border-color-error, #d92d20); }
.app-addpost-age { display: flex; flex-direction: column; gap: 6px; flex: 0 0 160px; margin-left: auto; }
.app-addpost-summary { flex-wrap: wrap; }
.app-age-reckon { margin-top: 12px; }
.app-age-reckon small { display: block; color: var(--ux4g-text-neutral-secondary, #667085); font-weight: 400; }
.app-age-reckon .app-age-input { flex: 0 0 180px; }
@media (max-width: 767px) {
    .app-advt-v2 .app-advt-post { grid-template-columns: 30px minmax(0, 1fr) 36px; }
    .app-advt-v2 .app-advt-post .app-advt-post-age { grid-column: 2 / -1; grid-row: 3; }
    .app-addpost-age { flex-basis: 100%; margin-left: 0; }
}
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post { grid-template-columns: 30px minmax(0, 1fr) 36px; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post .app-advt-post-age { grid-column: 2 / -1; grid-row: 3; }
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post .app-advt-post-age { grid-column: auto; grid-row: auto; }
/* Candidate: apply-for-post dialog */
.app-apply-post-age { display: inline-flex; align-items: center; gap: 4px; }
.app-apply-post.is-age-ineligible { opacity: 0.75; }
.app-apply-post-age.is-bad { color: var(--ux4g-text-error, #d92d20); }
.app-apply-status.is-error { border-left-color: var(--ux4g-bg-error-strong, #d92d20); background-color: var(--ux4g-bg-error-soft, #fef3f2); }
.app-apply-status.is-error > .ux4g-icon-outlined { color: var(--ux4g-text-error-default, #d92d20); }
/* Advertisement form: experience column */
.app-advt-v2-cols,
.app-advt-v2 .app-advt-post,
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.2fr) 100px 124px 40px; }
.app-advt-post-exp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-advt-v2 .app-advt-post-exp .ux4g-label-m-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-exp-btn { width: 100%; cursor: pointer; font: inherit; text-align: left; color: var(--ux4g-text-neutral-secondary, #667085); }
.app-exp-btn .app-exp-btn-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.app-exp-btn.is-set { color: var(--ux4g-text-neutral-primary, #101828); }
.app-exp-btn:hover { border-color: #fb923c; }
.app-exp-form { display: flex; flex-direction: column; gap: 14px; }
.app-exp-post { display: flex; align-items: center; gap: 8px; margin: 0; }
.app-exp-group { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.app-exp-group:disabled { opacity: 0.5; }
.app-exp-option { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.app-exp-option input { accent-color: #ea580c; }
@media (max-width: 767px) {
    .app-advt-v2 .app-advt-post { grid-template-columns: 30px minmax(0, 1fr) 36px; }
    .app-advt-v2 .app-advt-post .app-advt-post-exp { grid-column: 2 / -1; grid-row: 4; }
}
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post { grid-template-columns: 30px minmax(0, 1fr) 36px; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post .app-advt-post-exp { grid-column: 2 / -1; grid-row: 4; }
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post .app-advt-post-exp { grid-column: auto; grid-row: auto; }
/* Advertisement form: also-required qualifications + minimum marks */
.app-addpost-modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f2f4f7; }
.app-addpost-modes button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 8px; padding: 4px 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ux4g-text-neutral-secondary, #667085); cursor: pointer; }
.app-addpost-modes button small { font-weight: 400; }
.app-addpost-modes button em { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ffedd5; color: #c2410c; font-size: 11px; text-align: center; }
.app-addpost-modes button.is-active { background: #fff; color: #c2410c; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.app-addpost-chips-also { margin-top: 4px; align-items: center; }
.app-addpost-chips-also .app-addpost-chip { background: #eef4ff; border-color: #c7d7fe; }
.app-advt-post-quals { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app-advt-post-extra { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 6px; align-items: start; }
.app-advt-v2 .app-advt-post .app-advt-post-quals .ux4g-label-m-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-qual-also .app-qual-trigger.app-centre-trigger { min-height: 34px; background: #fcfcfd; }
.app-qual-also .app-qual-chip { background: #eef4ff; color: #3538cd; }
.app-advt-post-pct { height: 34px; }
html[data-advt-narrow='1'] .app-advt-v2 .app-advt-post .app-advt-post-quals { grid-column: 2 / -1; grid-row: 2; }
html[data-advt-narrow='0'] .app-advt-v2 .app-advt-post .app-advt-post-quals { grid-column: auto; grid-row: auto; }
@media (max-width: 767px) { .app-advt-v2 .app-advt-post .app-advt-post-quals { grid-column: 2 / -1; grid-row: 2; } }
/* Add post: several posts at once */
.app-addpost-bulk { display: inline-flex; gap: 10px; margin-left: auto; }
.app-addpost-bulk button { border: 0; padding: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: #c2410c; cursor: pointer; }
.app-addpost-bulk button:hover { text-decoration: underline; }
.app-addpost-code { color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 11px; font-weight: 600; }
/* Apply for post: eligibility pills + "Not eligible" panel */
.app-elig-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.app-elig-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.app-elig-pill .ux4g-icon-outlined { font-size: 13px; }
.app-elig-pill.is-bad { background: #fef3f2; color: #b42318; }
.app-apply-post.is-age-ineligible { opacity: 1; }
.app-apply-post.is-age-ineligible .app-apply-post-icon { filter: grayscale(1); opacity: 0.6; }
.app-inel { overflow: hidden; border: 1px solid #fecdca; border-radius: 14px; background: linear-gradient(180deg, #fff5f4 0%, #fff 70%); box-shadow: 0 6px 18px -10px rgba(217, 45, 32, 0.35); animation: app-inel-in 0.22s ease-out; }
@keyframes app-inel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.app-inel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.app-inel-badge { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #f04438, #d92d20); color: #fff; box-shadow: 0 4px 10px -4px rgba(217, 45, 32, 0.6); }
.app-inel-badge .ux4g-icon-outlined { font-size: 20px; }
.app-inel-head strong { display: block; color: #912018; font-size: 15px; line-height: 1.3; }
.app-inel-head small { display: block; color: #b42318; font-size: 12.5px; opacity: 0.85; }
.app-inel-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 0 16px 12px; }
.app-inel-rule { padding: 12px 14px; border: 1px solid #fee4e2; border-radius: 12px; background: #fff; }
.app-inel-rule-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.app-inel-rule-name { display: inline-flex; align-items: center; gap: 6px; color: #344054; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.app-inel-rule-name .ux4g-icon-outlined { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fef3f2; color: #d92d20; font-size: 15px; }
.app-inel-delta { padding: 2px 9px; border-radius: 999px; background: #fef3f2; color: #b42318; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.app-inel-compare { display: flex; align-items: flex-end; gap: 10px; }
.app-inel-value { display: flex; flex-direction: column; min-width: 0; }
.app-inel-value strong { color: #101828; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.app-inel-value.is-you strong { color: #d92d20; }
.app-inel-value small { color: #667085; font-size: 11.5px; }
.app-inel-vs { padding-bottom: 18px; color: #98a2b3; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.app-inel-bar { position: relative; height: 6px; margin-top: 10px; border-radius: 999px; background: #f2f4f7; }
.app-inel-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #fda29b, #d92d20); }
.app-inel-bar-mark { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 2px; background: #101828; }
.app-inel-hint { margin: 8px 0 0; color: #667085; font-size: 11.5px; }
.app-inel-text { margin: 0; color: #b42318; font-size: 13px; }
.app-inel-foot { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-top: 1px dashed #fecdca; background: #fffbfa; color: #667085; font-size: 12px; }
.app-inel-foot .ux4g-icon-outlined { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .app-inel { animation: none; } }

/* Identity status row: keep the verify button on the right even when there is no status tag */
.app-identity-status > .ux4g-btn:last-child { margin-left: auto; }

/* ---------- Searchable dropdown (x-ui.combobox) ---------- */
.app-combo { position: relative; }
.app-combo-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 9px 12px 9px 14px;
    border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 10px; background: #fff;
    color: var(--ux4g-text-neutral-primary, #101828); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.app-combo-trigger:hover:not(:disabled) { border-color: var(--ux4g-border-color-primary-hover, #98a2b3); }
.app-combo-trigger:focus-visible, .app-combo-trigger[aria-expanded="true"] {
    outline: none; border-color: var(--ux4g-border-color-primary-default, #b54708);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 18%, transparent);
}
.app-combo-trigger:disabled { background: var(--ux4g-bg-neutral, #f2f4f7); color: var(--ux4g-text-neutral-tertiary, #98a2b3); cursor: not-allowed; }
.app-combo.ux4g-input-error .app-combo-trigger { border-color: var(--ux4g-border-color-error, #f04438); }
.app-combo-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.app-combo-value.is-empty { color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-weight: 400; }
.app-combo-caret { flex: none; font-size: 20px; color: var(--ux4g-text-neutral-secondary, #667085); transition: transform .2s; }
.app-combo-trigger[aria-expanded="true"] .app-combo-caret { transform: rotate(180deg); color: var(--ux4g-text-brand-primary-default, #b54708); }

.app-combo-panel {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; overflow: hidden;
    border: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 14px; background: #fff;
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .22), 0 4px 10px -4px rgba(16, 24, 40, .08);
    transform-origin: top center;
}
.app-combo-enter { transition: opacity .14s ease-out, transform .14s ease-out; }
.app-combo-leave { transition: opacity .1s ease-in, transform .1s ease-in; }
.app-combo-from { opacity: 0; transform: translateY(-4px) scale(.98); }

.app-combo-search {
    display: flex; align-items: center; gap: 8px; margin: 8px; padding: 0 10px; border-radius: 10px;
    background: var(--ux4g-bg-neutral, #f2f4f7); border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.app-combo-search:focus-within { background: #fff; border-color: var(--ux4g-border-color-primary-default, #b54708); }
.app-combo-search > .ux4g-icon-outlined { font-size: 19px; color: var(--ux4g-text-neutral-tertiary, #98a2b3); }
.app-combo-search input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ux4g-text-neutral-primary, #101828); }
.app-combo-clear { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #e4e7ec; color: #475467; cursor: pointer; }
.app-combo-clear .ux4g-icon-outlined { font-size: 15px; }

.app-combo-list { max-height: 264px; margin: 0; padding: 0 6px 6px; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.app-combo-option {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
    color: var(--ux4g-text-neutral-primary, #101828); font-size: 14px; line-height: 1.35;
}
.app-combo-option + .app-combo-option { margin-top: 1px; }
.app-combo-option.is-active { background: color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 8%, #fff); }
.app-combo-option.is-selected { color: var(--ux4g-text-brand-primary-default, #b54708); font-weight: 600; }
.app-combo-option-text { flex: 1; min-width: 0; }
.app-combo-check { flex: none; font-size: 18px; opacity: 0; color: var(--ux4g-text-brand-primary-default, #b54708); }
.app-combo-option.is-selected .app-combo-check { opacity: 1; }
.app-combo-option.is-placeholder { color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 13px; }
.app-combo-empty { justify-content: center; align-items: center;
    display: flex; align-items: flex-start; gap: 8px; margin: 0 8px 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--ux4g-bg-neutral, #f9fafb); color: var(--ux4g-text-neutral-secondary, #667085); font-size: 13px; line-height: 1.4;
}
.app-combo-empty .ux4g-icon-outlined { font-size: 18px; }
@media (max-width: 575.98px) { .app-combo-panel { min-width: 0; } .app-combo-list { max-height: 50vh; } }
.app-combo-list.is-plain { padding-top: 6px; }

/* ---------- Add / edit professional training modal ---------- */
.app-tm-modal .ux4g-modal-box { overflow: hidden; border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(16, 24, 40, .35); }
.app-tm-modal .ux4g-modal-header {
    position: relative; padding: 20px 24px 18px; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0);
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 14%, #fff) 0%, #fff 62%);
}
.app-tm-modal .ux4g-modal-header-title-content { align-items: center !important; gap: 14px !important; }
.app-tm-modal .ux4g-modal-header-title-content > .ux4g-icon-outlined {
    display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; font-size: 24px !important;
    color: #fff; background: linear-gradient(135deg, var(--ux4g-border-color-primary-default, #b54708), color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 65%, #f79009));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 70%, transparent);
}
.app-tm-modal .ux4g-modal-header-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.app-tm-modal .ux4g-modal-header-sub-heading { color: var(--ux4g-text-neutral-secondary, #667085); font-size: 13px; }
.app-tm-modal .ux4g-modal-body { padding: 20px 24px; background: #fcfcfd; }

.app-tm { display: grid; gap: 14px; }
.app-tm-card { padding: 16px 18px 18px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.app-tm-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.app-tm-card-head > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.app-tm-card-head strong { color: var(--ux4g-text-neutral-primary, #101828); font-size: 14.5px; font-weight: 700; }
.app-tm-card-head small { color: var(--ux4g-text-neutral-secondary, #667085); font-size: 12.5px; }
.app-tm-tile {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 10%, #fff); color: var(--ux4g-text-brand-primary-default, #b54708);
}
.app-tm-tile .ux4g-icon-outlined { font-size: 20px; }
.app-tm-tile.is-alt { background: #eff8ff; color: #1570ef; }
.app-tm-duration {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 11px; border-radius: 999px;
    background: #ecfdf3; color: #067647; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.app-tm-duration .ux4g-icon-outlined { font-size: 16px; }
.app-tm-duration.is-bad { background: #fef3f2; color: #b42318; }
.app-tm-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.app-tm-arrow {
    display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 50%;
    background: var(--ux4g-bg-neutral, #f2f4f7); color: var(--ux4g-text-neutral-secondary, #667085);
}
.app-tm-arrow .ux4g-icon-outlined { font-size: 18px; }

.app-tm-modal .ux4g-modal-actions { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); background: #fff; }
.app-tm-note { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 0 0; color: var(--ux4g-text-neutral-secondary, #667085); font-size: 12.5px; }
.app-tm-note .ux4g-icon-outlined { font-size: 17px; color: #12b76a; }

@media (max-width: 575.98px) {
    .app-tm-modal .ux4g-modal-header, .app-tm-modal .ux4g-modal-body { padding-left: 16px; padding-right: 16px; }
    .app-tm-card { padding: 14px; }
    .app-tm-card-head { flex-wrap: wrap; }
    .app-tm-duration { margin-left: 48px; }
    .app-tm-range { grid-template-columns: 1fr; }
    .app-tm-arrow { display: none; }
    .app-tm-modal .ux4g-modal-actions { flex-wrap: wrap; padding: 12px 16px; }
    .app-tm-note { flex-basis: 100%; }
}

/* ---------- Add / edit employment record modal (uses .app-tm-* from the training modal) ---------- */
.app-tm-tile.is-doc { background: #fef3f2; color: #d92d20; }
.app-em-type { display: grid; gap: 6px; margin-bottom: 14px; }
.app-em-type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-em-type-option {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 10px;
    border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd); border-radius: 10px; background: #fff; cursor: pointer;
    color: var(--ux4g-text-neutral-secondary, #475467); font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.app-em-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.app-em-type-option .ux4g-icon-outlined { font-size: 19px; }
.app-em-type-option:hover { border-color: var(--ux4g-border-color-primary-hover, #98a2b3); }
.app-em-type-option:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 20%, transparent); }
.app-em-type-option.is-selected, .app-em-type-option:has(input:checked) {
    border-color: var(--ux4g-border-color-primary-default, #b54708); color: var(--ux4g-text-brand-primary-default, #b54708);
    background: color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 7%, #fff);
}
.app-em-type-options.is-error .app-em-type-option { border-color: var(--ux4g-border-color-error, #f04438); }
.app-em-reason { margin-top: 14px; }

.app-em-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; cursor: pointer;
    border: 1.5px dashed color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 45%, #d0d5dd); border-radius: 14px;
    background: color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 3%, #fff); transition: border-color .15s, background .15s;
}
.app-em-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.app-em-drop:hover, .app-em-drop.is-over { border-color: var(--ux4g-border-color-primary-default, #b54708); background: color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 8%, #fff); }
.app-em-drop.is-error { border-color: var(--ux4g-border-color-error, #f04438); background: #fffbfa; }
.app-em-drop-icon {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%;
    background: #fff; color: var(--ux4g-text-brand-primary-default, #b54708); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 10%, transparent);
}
.app-em-drop-icon .ux4g-icon-outlined { font-size: 24px; }
.app-em-drop-title { color: var(--ux4g-text-neutral-secondary, #475467); font-size: 14px; }
.app-em-drop-title strong { color: var(--ux4g-text-brand-primary-default, #b54708); }
.app-em-drop-sub { color: var(--ux4g-text-neutral-tertiary, #98a2b3); font-size: 12.5px; }

.app-em-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #eaecf0); border-radius: 12px; background: #fff; }
.app-em-file.is-new { border-color: #abefc6; background: #f6fef9; }
.app-em-file-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fef3f2; color: #d92d20; }
.app-em-file-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-em-file-text strong { overflow: hidden; color: var(--ux4g-text-neutral-primary, #101828); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.app-em-file-text small { display: inline-flex; align-items: center; gap: 4px; color: #067647; font-size: 12.5px; }
.app-em-file-text small .ux4g-icon-outlined { font-size: 15px; }
.app-em-file-btn {
    position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--ux4g-border-color-neutral-default, #d0d5dd);
    border-radius: 8px; background: #fff; color: var(--ux4g-text-neutral-primary, #344054); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.app-em-file-btn:hover { border-color: var(--ux4g-border-color-primary-default, #b54708); color: var(--ux4g-text-brand-primary-default, #b54708); }
.app-em-file-btn .ux4g-icon-outlined { font-size: 17px; }
.app-em-file-btn.is-danger { width: 34px; padding: 0; justify-content: center; }
.app-em-file-btn.is-danger:hover { border-color: #fda29b; color: #d92d20; }
.app-visually-hidden-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.app-em-uploading { align-items: center; gap: 8px; margin-top: 10px; color: var(--ux4g-text-neutral-secondary, #667085); font-size: 13px; }
.app-em-doc-error { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: #b42318; font-size: 13px; }
.app-em-doc-error .ux4g-icon-outlined { font-size: 17px; }

/* Certificate link in employment tables */
.app-exp-doc-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #fef3f2; color: #b42318; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.app-exp-doc-link:hover { background: #fee4e2; }
.app-exp-doc-link .ux4g-icon-outlined { font-size: 16px; }
.app-exp-doc-missing { display: inline-flex; align-items: center; gap: 4px; color: #b54708; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.app-exp-doc-missing .ux4g-icon-outlined { font-size: 16px; }

@media (max-width: 575.98px) {
    .app-em-type-options { grid-template-columns: 1fr; }
    .app-em-file { flex-wrap: wrap; }
}

/* Employment modal: wide, two columns (employer & post | period + certificate) */
.app-em-modal .ux4g-modal-box { width: min(1120px, 96vw); max-width: 96vw; }
.app-em-modal .ux4g-modal-body { padding: 16px 20px; }
.app-em-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.app-em-right { display: grid; gap: 14px; }
.app-em-modal .app-tm-card { padding: 14px 16px 16px; }
.app-em-modal .app-tm-card-head { margin-bottom: 12px; }
.app-em-modal .app-em-type { margin-bottom: 12px; }
.app-em-modal .app-em-reason { margin-top: 12px; }
.app-em-modal .app-em-drop { flex-direction: row; justify-content: center; gap: 12px; padding: 14px 16px; text-align: left; }
.app-em-modal .app-em-drop-icon { width: 40px; height: 40px; margin: 0; flex: none; }
.app-em-modal .app-em-drop-title, .app-em-modal .app-em-drop-sub { display: block; }
.app-em-drop-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.app-em-modal .app-em-type-option { min-height: 38px; font-size: 13.5px; }
@media (max-width: 991.98px) {
    .app-em-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Rich dropdown options (post choice): name + code on two lines, age badge on the right */
.app-combo-option.is-rich { align-items: center; padding: 8px 10px; }
.app-combo-option.is-rich .app-combo-option-text { display: flex; flex-direction: column; font-weight: 600; }
.app-combo-option-sub { color: var(--ux4g-text-neutral-secondary, #667085); font-size: 12px; font-weight: 500; }
.app-combo-badge {
    display: inline-flex; flex: none; align-items: center; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    background: #eef4ff; color: #3538cd; font-size: 11.5px; font-weight: 700;
}
.app-combo-badge.is-bad { background: #fef3f2; color: #b42318; }
.app-apply-post-combo .app-combo-list { max-height: 320px; }

/* Dropdown inside a dialog: the list opens in place (no clipping by the dialog's scroll area) */
.app-combo.is-inline .app-combo-panel {
    position: static; min-width: 0; margin-top: 6px;
    box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .25);
}
.app-combo.is-inline .app-combo-list { max-height: 300px; }
.app-combo-tag {
    display: inline-flex; flex: none; align-items: center; min-width: 58px; justify-content: center; padding: 3px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--ux4g-border-color-primary-default, #b54708) 10%, #fff); color: var(--ux4g-text-brand-primary-default, #b54708);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.app-combo-option.is-selected .app-combo-tag { background: var(--ux4g-border-color-primary-default, #b54708); color: #fff; }

/* ---------- Post status card (Apply dialog): not eligible / eligible / already applied ---------- */
.app-pstat {
    --pstat: #d92d20; --pstat-soft: #fef3f2; --pstat-line: #fecdca; --pstat-ink: #912018;
    display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--pstat-line); border-radius: 14px;
    background: linear-gradient(135deg, var(--pstat-soft) 0%, #fff 70%); animation: app-pstat-in .22s ease-out;
}
.app-pstat.is-ok { --pstat: #079455; --pstat-soft: #ecfdf3; --pstat-line: #abefc6; --pstat-ink: #085d3a; }
.app-pstat.is-warn { --pstat: #dc6803; --pstat-soft: #fffaeb; --pstat-line: #fedf89; --pstat-ink: #93370d; }
@keyframes app-pstat-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.app-pstat-icon {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--pstat);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pstat) 14%, transparent);
}
.app-pstat-icon .ux4g-icon-outlined { font-size: 21px; }
.app-pstat-body { flex: 1; min-width: 0; }
.app-pstat-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.app-pstat-title { color: var(--pstat-ink); font-size: 15px; font-weight: 800; line-height: 1.3; }
.app-pstat-chip { padding: 3px 10px; border-radius: 999px; background: var(--pstat); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.app-pstat-text { margin: 4px 0 0; color: #475467; font-size: 13.5px; line-height: 1.5; }
.app-pstat-text b { color: #101828; }
.app-pstat-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.app-pstat-fact { display: flex; flex-direction: column; min-width: 96px; padding: 7px 12px; border: 1px solid #eaecf0; border-radius: 10px; background: #fff; }
.app-pstat-fact small { color: #667085; font-size: 11.5px; font-weight: 500; }
.app-pstat-fact b { color: #101828; font-size: 15px; font-weight: 800; }
.app-pstat-fact.is-you { border-color: var(--pstat-line); }
.app-pstat-fact.is-you b { color: var(--pstat); }
.app-pstat-note { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; color: #667085; font-size: 12.5px; }
.app-pstat-note .ux4g-icon-outlined { font-size: 15px; }
@media (max-width: 575.98px) { .app-pstat { padding: 12px; gap: 10px; } .app-pstat-icon { width: 34px; height: 34px; } .app-pstat-fact { flex: 1; min-width: 0; } }

/* ---------- "Before you apply" guide (after login) ---------- */
[x-cloak] { display: none !important; }
.app-guide-modal .ux4g-modal-box { width: min(1180px, 96vw); max-width: 96vw; }
.app-guide-modal .ux4g-modal-header { padding-top: 12px; padding-bottom: 10px; background: radial-gradient(120% 260% at 0% 0%, #fff1dc 0%, #fff 55%); border-bottom: 1px solid #fde7c7; }
.app-guide-modal .ux4g-modal-header-title-content > .ux4g-icon-outlined { background: linear-gradient(135deg, #b54708, #f79009) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(181, 71, 8, .6); }
.app-guide-modal .ux4g-modal-body { padding: 12px 16px; background: #f8f9fc; }
.app-guide {
    display: grid; gap: 10px;
    --g-ink: #101828; --g-text: #344054; --g-muted: #667085; --g-border: #eaecf0;
    --g-main: #b54708; --g-deep: #7a2e0e; --g-warm: #f79009; --g-soft: #fffaeb; --g-line: #fedf89;
}

/* How to apply: 5-step timeline */
.app-guide-steps {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; list-style: none;
    border: 1px solid var(--g-border); border-radius: 16px; background: #fff; box-shadow: 0 4px 16px -12px rgba(16, 24, 40, .25);
}
.app-guide-step { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; }
/* Arrow between steps */
.app-guide-link { position: relative; display: flex; flex: 1 1 32px; align-items: center; justify-content: center; min-width: 32px; align-self: stretch; }
.app-guide-link::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 2px dashed #fdc77a; }
.app-guide-arrow {
    position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: #fef0c7; border: 1px solid #fedf89; color: #b54708; box-shadow: 0 0 0 3px #fff; animation: app-guide-nudge 1.6s ease-in-out infinite;
}
.app-guide-arrow .ux4g-icon-outlined { font-size: 15px; font-weight: 700; }
@keyframes app-guide-nudge { 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .app-guide-arrow { animation: none; } }
.app-guide-num {
    position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: #fff;
    background: linear-gradient(135deg, var(--g-main), var(--g-warm)); box-shadow: 0 0 0 3px #fff3e0;
}
.app-guide-num .ux4g-icon-outlined { font-size: 17px; }
.app-guide-num b {
    position: absolute; top: -5px; right: -6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
    background: var(--g-ink); color: #fff; font-size: 9.5px; font-weight: 800; box-shadow: 0 0 0 2px #fff;
}
.app-guide-step-text { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.25; }
.app-guide-step-text strong { color: var(--g-ink); font-size: 12.5px; font-weight: 700; }
.app-guide-step-text small { overflow: hidden; color: var(--g-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Tabs: one per open advertisement (shown when two or more are open) */
.app-guide-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.app-guide-tab {
    display: grid; flex: 1 1 0; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "icon text center due count";
    align-items: center; gap: 10px; min-width: 280px; padding: 7px 12px; border: 1.5px solid var(--g-border); border-radius: 12px;
    background: #fff; color: var(--g-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.app-guide-tab:hover { border-color: #fdb022; transform: translateY(-1px); }
.app-guide-tab:focus-visible { outline: 3px solid #fec84b; outline-offset: 2px; }
.app-guide-tab.is-active { border-color: var(--g-main); background: linear-gradient(135deg, #fffaeb, #fff 70%); box-shadow: 0 12px 24px -16px rgba(181, 71, 8, .8); }
.app-guide-tab-icon { grid-area: icon; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #f2f4f7; color: #475467; transition: background .15s, color .15s; }
.app-guide-tab.is-active .app-guide-tab-icon { background: linear-gradient(135deg, var(--g-main), var(--g-warm)); color: #fff; }
.app-guide-tab-text { grid-area: text; display: flex; flex-direction: column; line-height: 1.15; }
.app-guide-tab-text small { color: var(--g-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-guide-tab-text strong { color: var(--g-ink); font-size: 15px; font-weight: 800; }
.app-guide-tab-count { grid-area: count; padding: 2px 9px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 12px; font-weight: 700; white-space: nowrap; }
.app-guide-tab.is-active .app-guide-tab-count { background: #fef0c7; color: var(--g-main); }
.app-guide-center {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px 2px 6px; border: 1px solid #b2ddff; border-radius: 999px;
    background: #eff8ff; color: #175cd3; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.app-guide-center .ux4g-icon-outlined { font-size: 14px; }
.app-guide-tab .app-guide-center { grid-area: center; }
.app-guide-tab-due { grid-area: due; display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--g-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.app-guide-tab-due .ux4g-icon-outlined { font-size: 15px; }
.app-guide-tab-due.is-soon { color: #b42318; }

/* Advertisement panel: posts table + side facts */
.app-guide-advt { overflow: hidden; border: 1px solid var(--g-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px -18px rgba(16, 24, 40, .4); }
.app-guide-advt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; }
.app-guide-posts { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--g-border); }
.app-guide-posts-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 6px 10px;
    border-bottom: 1px solid var(--g-border); background: linear-gradient(180deg, #fff, #fcfcfd);
}
.app-guide-posts-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-guide-posts-title > div { display: flex; flex-direction: column; line-height: 1.15; }
.app-guide-posts-title small { color: var(--g-main); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.app-guide-posts-title strong { color: var(--g-ink); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.app-guide-posts-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--g-main), var(--g-warm)); color: #fff; }
.app-guide-posts-count { padding: 2px 9px; border-radius: 999px; background: #fef0c7; border: 1px solid var(--g-line); color: var(--g-deep); font-size: 12px; font-weight: 700; white-space: nowrap; }
.app-guide-search {
    display: flex; align-items: center; gap: 6px; min-width: 230px; height: 32px; margin: 0; padding: 0 10px;
    border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: #98a2b3; transition: border-color .15s, box-shadow .15s;
}
.app-guide-posts-head > .app-guide-search:only-child { flex: 1; }
.app-guide-search:focus-within { border-color: var(--g-warm); box-shadow: 0 0 0 4px rgba(247, 144, 9, .15); }
.app-guide-search .ux4g-icon-outlined { font-size: 19px; }
.app-guide-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--g-ink); font: inherit; font-size: 13px; box-shadow: none; }

/* Table box fills whatever height the side panel gives the row; the table scrolls inside */
.app-guide-table-box { position: relative; flex: 1; min-height: 360px; }
.app-guide-table-wrap { position: absolute; inset: 0; overflow: auto; }
.app-guide-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.app-guide-table th {
    position: sticky; top: 0; z-index: 1; padding: 6px 10px; border-bottom: 1px solid var(--g-border); background: #f9fafb;
    color: #475467; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.app-guide-table td { padding: 5px 10px; border-bottom: 1px solid #f2f4f7; color: var(--g-text); line-height: 1.3; vertical-align: middle; }
.app-guide-table tbody tr:nth-child(even) td { background: #fcfcfd; }
.app-guide-table tbody tr:hover td { background: var(--g-soft); }
.app-guide-table tbody tr:last-child td { border-bottom: 0; }
.app-guide-table .is-num { width: 34px; color: #98a2b3; font-variant-numeric: tabular-nums; text-align: center; }
.app-guide-code {
    display: inline-block; min-width: 54px; padding: 1px 6px; border: 1px solid var(--g-line); border-radius: 5px; background: #fef0c7; color: var(--g-deep);
    font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; text-align: center;
}
.app-guide-post { color: var(--g-ink) !important; font-weight: 600; }
.app-guide-age { display: inline-block; padding: 1px 8px; border: 1px solid #b2ddff; border-radius: 999px; background: #eff8ff; color: #175cd3; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.app-guide-age.is-none { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.app-guide-exp { width: 30%; color: var(--g-muted) !important; font-size: 11.5px; }
.app-guide-exp.is-nil { color: #98a2b3 !important; }
.app-guide-noresult { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 24px; color: var(--g-muted); font-size: 13.5px; }
.app-guide-empty { margin: 0; padding: 24px; color: var(--g-muted); text-align: center; }

.app-guide-side { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px; background: linear-gradient(180deg, #fffaf3, #fff 70%); }
.app-guide-card { padding: 8px 10px; border: 1px solid var(--g-border); border-radius: 10px; background: #fff; }
.app-guide-card h4 { display: flex; align-items: center; gap: 5px; margin: 0 0 5px; color: #475467; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.app-guide-card h4 .ux4g-icon-outlined { font-size: 15px; color: var(--g-main); }
.app-guide-big { margin: 0; color: var(--g-ink); font-size: 14px; font-weight: 800; }
.app-guide-due { display: flex; align-items: center; gap: 10px; }
.app-guide-due strong { display: block; color: var(--g-ink); font-size: 12.5px; font-weight: 700; }
.app-guide-cal { display: flex; flex: none; flex-direction: column; width: 46px; overflow: hidden; border: 1px solid #fecdca; border-radius: 9px; background: #fff; text-align: center; box-shadow: 0 6px 14px -10px rgba(180, 35, 24, .6); }
.app-guide-cal small { padding: 1px 0; background: #d92d20; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.app-guide-cal b { color: var(--g-ink); font-size: 18px; font-weight: 800; line-height: 1.15; }
.app-guide-cal span { padding-bottom: 2px; color: var(--g-muted); font-size: 9px; font-weight: 600; }
.app-guide-asof { display: block; margin-top: 3px; color: var(--g-muted); font-size: 11px; }
.app-guide-asof b { color: var(--g-ink); }
.app-guide-left { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #fffaeb; color: var(--g-main); font-size: 11px; font-weight: 700; }
.app-guide-left.is-soon { background: #fef3f2; color: #b42318; }
.app-guide-relax { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.app-guide-relax li { display: flex; flex-direction: column; gap: 0; padding: 3px 7px; border: 1px solid #d1fadf; border-radius: 7px; background: #f6fef9; color: var(--g-muted); font-size: 10.5px; line-height: 1.3; }
.app-guide-relax b { color: #067647; font-size: 12px; font-weight: 800; white-space: nowrap; }
.app-guide-pdf {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: #fff !important; text-decoration: none !important;
    background: linear-gradient(135deg, var(--g-main), var(--g-warm)); box-shadow: 0 10px 22px -12px rgba(181, 71, 8, .8); transition: transform .15s, filter .15s;
}
.app-guide-fee-one { margin: 0; color: var(--g-muted); font-size: 12px; }
.app-guide-fee-one b { color: var(--g-ink); font-size: 16px; font-weight: 800; }
.app-guide-fee { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.app-guide-fee li { display: flex; align-items: baseline; gap: 8px; color: var(--g-muted); font-size: 11.5px; line-height: 1.35; }
.app-guide-fee b { flex: none; min-width: 52px; color: var(--g-ink); font-size: 13px; font-weight: 800; }
.app-guide-fee b.is-free { color: #067647; }
.app-guide-pdf:hover { transform: translateY(-1px); filter: brightness(1.05); }
.app-guide-pdf > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; line-height: 1.3; }
.app-guide-pdf strong { font-size: 12.5px; }
.app-guide-pdf small { opacity: .88; font-size: 10.5px; }
.app-guide-pdf .ux4g-icon-outlined { font-size: 19px; }
.app-guide-pdf .ux4g-icon-outlined:last-child { font-size: 16px; }

.app-guide-novac { display: flex; gap: 10px; padding: 16px; border: 1px dashed #d0d5dd; border-radius: 14px; background: #fff; color: #475467; font-size: 13px; }
.app-guide-novac .ux4g-icon-outlined { color: #12b76a; }
.app-guide-warn {
    display: grid; gap: 6px; margin: 0; padding: 8px 10px; border: 1px solid var(--g-line); border-left: 4px solid var(--g-warm);
    border-radius: 10px; background: linear-gradient(90deg, #fffaeb, #fffdf7);
}
.app-guide-check-head { display: flex; align-items: center; gap: 8px; }
.app-guide-check-head strong { color: var(--g-deep); font-size: 13px; font-weight: 800; }
.app-guide-warn-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f79009, #fdb022); color: #fff; }
.app-guide-warn-icon .ux4g-icon-outlined { font-size: 15px; }
.app-guide-check { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.app-guide-check li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px 4px 4px; border: 1px solid #fde7c7; border-radius: 10px; background: #fff; cursor: help; }
.app-guide-check li > .ux4g-icon-outlined {
    display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fef0c7; color: var(--g-main); font-size: 14px;
}
.app-guide-check b { min-width: 0; overflow: hidden; color: var(--g-ink); font-size: 12px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1199.98px) { .app-guide-check { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .app-guide-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-guide-alert { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 5px 10px; border-radius: 8px; background: #fef3f2; color: #7a271a; font-size: 12px !important; line-height: 1.45; }
.app-guide-alert > span:last-child { font-size: 12px !important; }
.app-guide-alert .ux4g-icon-outlined { flex: none; margin-top: 1px; color: #d92d20; font-size: 16px; }
.app-guide-alert strong { color: #b42318; }

/* Footer: consent + continue */
.app-guide-modal .ux4g-modal-actions { gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.app-guide-consent {
    display: flex; flex: 1; align-items: flex-start; gap: 8px; padding: 7px 12px; border: 1.5px solid #d0d5dd; border-radius: 10px; background: #fff; cursor: pointer;
    color: var(--g-text, #344054); font-size: 12px; line-height: 1.45; transition: border-color .15s, background .15s;
}
.app-guide-consent:hover { border-color: #98a2b3; }
.app-guide-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; appearance: auto; -webkit-appearance: checkbox; accent-color: #079455; border: 0; outline: none; box-shadow: none; cursor: pointer; }
.app-guide-consent strong { color: #101828; }
.app-guide-consent:has(input:checked) { border-color: #47cd89; background: #ecfdf3; }
.app-guide-consent.is-error { border-color: #fda29b; background: #fffbfa; }
.app-guide-go { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.app-guide-go .ux4g-icon-outlined { font-size: 18px; transition: transform .15s; }
.app-guide-go:not(:disabled) { border-color: #b54708; background: linear-gradient(135deg, #b54708, #f79009); box-shadow: 0 8px 18px -8px rgba(181, 71, 8, .6); }
.app-guide-go:not(:disabled):hover .ux4g-icon-outlined { transform: translateX(3px); }
.app-guide-go:disabled { border-color: #eaecf0; background: #f2f4f7; color: #98a2b3; cursor: not-allowed; }

/* Responsive */
@media (max-height: 760px) {
    .app-guide { gap: 8px; }
    .app-guide-table-box { min-height: 260px; }
    .app-guide-table td { padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 1199.98px) {
    .app-guide-step-text small { display: none; }
}
@media (max-width: 991.98px) {
    .app-guide-advt-grid { grid-template-columns: minmax(0, 1fr); }
    .app-guide-posts { border-right: 0; border-bottom: 1px solid var(--g-border); }
    .app-guide-table-box { min-height: 0; }
    .app-guide-table-wrap { position: static; max-height: 45vh; }
    .app-guide-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 767.98px) {
    .app-guide-modal .ux4g-modal-body { padding: 14px; }
    .app-guide-steps { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
    .app-guide-link { display: none; }
    .app-guide-arrow { display: none; }
    .app-guide-tab { min-width: 240px; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "icon text center count" "icon due due due"; }
    .app-guide-search { flex: 1 1 100%; min-width: 0; }
    .app-guide-table .is-exp, .app-guide-table .is-num { display: none; }
    .app-guide-table th, .app-guide-table td { padding-left: 10px; padding-right: 10px; }
    .app-guide-modal .ux4g-modal-actions { flex-direction: column; align-items: stretch; }
    .app-guide-go { justify-content: center; }
}

/* ---------- Admin › Candidate accounts: guide panel + bulk actions ---------- */
.app-gm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 16px 18px; border: 1px solid #fedf89; border-radius: 16px;
    background: radial-gradient(120% 180% at 0% 0%, #fffaeb 0%, #fff 60%); box-shadow: 0 4px 14px -10px rgba(181, 71, 8, .35);
}
.app-gm-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #b54708, #f79009); box-shadow: 0 8px 18px -8px rgba(181, 71, 8, .6); }
.app-gm-icon .ux4g-icon-outlined { font-size: 24px; }
.app-gm-text { display: flex; flex: 1 1 340px; flex-direction: column; gap: 3px; min-width: 0; }
.app-gm-text strong { color: #101828; font-size: 15px; font-weight: 800; }
.app-gm-text > span { color: #475467; font-size: 13px; line-height: 1.45; }
.app-gm-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.app-gm-meta > span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid #eaecf0; border-radius: 999px; background: #fff; color: #475467; font-size: 12px; }
.app-gm-meta .ux4g-icon-outlined { font-size: 15px; color: #b54708; }
.app-gm-meta b { color: #101828; }
.app-gm-stat { display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 10px 14px; border: 1px solid #eaecf0; border-radius: 12px; background: #fff; }
.app-gm-stat-num { color: #067647; font-size: 20px; font-weight: 800; line-height: 1.1; }
.app-gm-stat-num small { color: #667085; font-size: 13px; font-weight: 600; }
.app-gm-stat-label { color: #475467; font-size: 12px; }
.app-gm-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #f2f4f7; }
.app-gm-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #12b76a, #47cd89); }
.app-gm-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.app-gm-btn .ux4g-icon-outlined { font-size: 18px; }

.app-bulk {
    position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 16px 10px; padding: 10px 14px;
    border: 1px solid #1d2939; border-radius: 12px; background: #1d2939; color: #f2f4f7; box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .6);
    animation: app-pstat-in .18s ease-out;
}
.app-bulk-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.app-bulk-count .ux4g-icon-outlined { font-size: 19px; color: #fec84b; }
.app-bulk-count b { color: #fff; font-size: 15px; }
.app-bulk-link { padding: 0; border: 0; background: none; color: #fec84b; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.app-bulk-note { color: #d0d5dd; font-size: 12.5px; }
.app-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.app-bulk-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px;
    background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.app-bulk-btn:hover { background: rgba(255, 255, 255, .16); }
.app-bulk-btn .ux4g-icon-outlined { font-size: 17px; }
.app-bulk-btn.is-primary { border-color: #f79009; background: linear-gradient(135deg, #b54708, #f79009); }
.app-bulk-btn.is-primary:hover { filter: brightness(1.08); }
.app-bulk-btn.is-ghost { border-color: transparent; background: transparent; color: #d0d5dd; }

.app-bulk-col { width: 40px; text-align: center; }
.app-bulk-check { width: 17px; height: 17px; accent-color: #b54708; cursor: pointer; vertical-align: middle; }
.app-apps-table tr.is-picked td { background: #fffaeb !important; }

.app-bulk-confirm { display: grid; gap: 8px; text-align: center; }
.app-bulk-confirm-count { justify-self: center; padding: 6px 16px; border-radius: 999px; background: #fffaeb; border: 1px solid #fedf89; color: #7a2e0e; font-size: 14px; }
.app-bulk-confirm-count b { color: #b54708; font-size: 18px; }
.app-bulk-confirm p { margin: 0; color: #475467; font-size: 13.5px; line-height: 1.5; }

@media (max-width: 767.98px) { .app-bulk-actions { margin-left: 0; } .app-gm-stat { flex: 1 1 100%; } }
.app-all-cap { display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 10px; padding: 9px 12px; border: 1px solid #b2ddff; border-radius: 10px; background: #eff8ff; color: #194185; font-size: 13px; line-height: 1.45; }
.app-all-cap .ux4g-icon-outlined { font-size: 18px; color: #1570ef; }
.app-guide-go:not(:disabled), .app-guide-go:not(:disabled) .ux4g-icon-outlined { color: #fff !important; }