.pa-shell,
.pa-modal-content {
    font-family: inherit;
}

.pa-shell,
.pa-shell * {
    box-sizing: border-box;
}

.pa-shell [hidden],
.pa-modal[hidden],
.pa-modal-content [hidden],
[hidden].pa-modal,
[hidden].pa-field,
[hidden].pa-leave-extra,
[hidden].pa-leave-balance,
[hidden].pa-pending-list {
    display: none !important;
}

.pa-shell {
    width: min(680px, 100%);
    margin: 24px auto;
    padding: 0 12px;
}

.pa-card {
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbfd);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
    animation: paFloatIn 0.45s ease both;
}

.pa-panel {
    display: grid;
    gap: 22px;
    padding: 34px;
}

.pa-panel-head h3,
.pa-modal-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(28px, 4vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.pa-panel-head p,
.pa-modal-head p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.9;
}

.pa-panel-badge {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(15, 118, 110, 0.1);
}

.pa-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pa-meta-chip {
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pa-meta-chip span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.pa-meta-chip strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.pa-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #14b8a6;
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.12);
}

.pa-field {
    display: grid;
    gap: 8px;
}

.pa-field label {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.pa-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 0 16px;
    border: 1px solid #d8e1ea;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.pa-input-wrap.is-loading {
    border-color: rgba(20, 184, 166, 0.34);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
}

.pa-input-wrap.is-valid {
    border-color: rgba(5, 150, 105, 0.36);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

.pa-input-wrap.is-invalid {
    border-color: rgba(239, 68, 68, 0.42);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

.pa-input-wrap:focus-within {
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.1);
    transform: translateY(-1px);
}

.pa-field-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 16px;
    font-weight: 800;
    flex: 0 0 32px;
}

.pa-field input,
.pa-field textarea {
    width: 100%;
    border: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: 15px;
    outline: none;
}

.pa-field input {
    min-height: 58px;
    padding: 0;
}

.pa-shell .pa-field input#pa-national-code {
    direction: ltr;
    text-align: left;
    display: block !important;
    width: 100% !important;
    min-height: 58px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: "Vazirmatn", "IRANSansX", "IRANYekanX", Tahoma, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
}

.pa-field textarea {
    min-height: 128px;
    padding: 16px 18px;
    border: 1px solid #d8e1ea;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    resize: vertical;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.pa-field textarea:focus {
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.1);
    transform: translateY(-1px);
}

.pa-field input::placeholder,
.pa-field textarea::placeholder {
    color: #94a3b8;
}

.pa-field-hint {
    color: #64748b;
    font-size: 12px;
}

.pa-search-status {
    min-height: 20px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.8;
}

.pa-search-status.is-loading {
    color: #0f766e;
}

.pa-search-status.is-valid {
    color: #047857;
}

.pa-search-status.is-invalid {
    color: #b91c1c;
}

.pa-search-status.is-info {
    color: #1d4ed8;
}

.pa-request-types {
    display: grid;
    gap: 10px;
}

.pa-request-option {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #d8e1ea;
    border-radius: 18px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.pa-request-option:hover {
    border-color: rgba(15, 118, 110, 0.28);
    transform: translateY(-1px);
}

.pa-request-option:has(input:checked) {
    border-color: rgba(15, 118, 110, 0.42);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
    background: #f7fffd;
}

.pa-request-option:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.pa-request-option input {
    margin: 0;
    accent-color: #0f766e;
}

.pa-request-option-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.pa-request-option-text {
    color: #64748b;
    font-size: 12px;
    line-height: 1.9;
}

/* The row is already dimmed to 0.5; the reason it is dimmed still has to be
   readable, so give it more contrast than the ordinary hint, not less. */
.pa-request-option-text.is-unavailable {
    color: #b45309;
    font-weight: 700;
}

/* Live counter under the reason box — turns the minimum into visible
   progress instead of an error the employee only meets on submit. */
.pa-char-count {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
}

.pa-char-count:empty {
    display: none;
}

.pa-char-count.is-short {
    color: #b45309;
}

.pa-char-count.is-ok {
    color: #0f766e;
}

.pa-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pa-actions-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pa-actions-main #pa-leave-request-btn {
    grid-column: 1 / -1;
    display: inline-flex !important;
    visibility: visible !important;
}

.pa-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    width: 100%;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 16px 26px rgba(15, 118, 110, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
}

.pa-shell .pa-btn,
.pa-modal .pa-btn,
.pa-modal-content .pa-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    outline: 0 !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    font-family: "Vazirmatn", "IRANSansX", "IRANYekanX", Tahoma, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.pa-shell .pa-btn,
.pa-modal .pa-btn,
.pa-modal-content .pa-btn {
    background: linear-gradient(135deg, #12c6a0 0%, #0f9f88 52%, #0b7f78 100%) !important;
    box-shadow: 0 18px 30px rgba(15, 159, 136, 0.2) !important;
}

.pa-shell .pa-btn::before,
.pa-modal .pa-btn::before,
.pa-modal-content .pa-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

.pa-shell .pa-btn > *,
.pa-modal .pa-btn > *,
.pa-modal-content .pa-btn > * {
    position: relative;
    z-index: 1;
}

.pa-shell .pa-btn-secondary,
.pa-modal .pa-btn-secondary,
.pa-modal-content .pa-btn-secondary {
    background: linear-gradient(135deg, #32486b 0%, #243551 58%, #182335 100%) !important;
    box-shadow: 0 18px 30px rgba(36, 53, 81, 0.22) !important;
}

.pa-shell .pa-btn-warning,
.pa-modal .pa-btn-warning,
.pa-modal-content .pa-btn-warning {
    background: linear-gradient(135deg, #f8fafc 0%, #e8edf5 55%, #dbe4ee 100%) !important;
    box-shadow: 0 16px 28px rgba(148, 163, 184, 0.22) !important;
    color: #243447 !important;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
}

.pa-shell .pa-btn-warning::before,
.pa-modal .pa-btn-warning::before,
.pa-modal-content .pa-btn-warning::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16));
}

.pa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 34px rgba(15, 118, 110, 0.22);
    filter: saturate(1.04);
}

.pa-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.16);
}

.pa-btn:disabled,
.pa-btn.is-loading {
    cursor: wait;
    opacity: 0.8;
}

.pa-btn.is-loading::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-inline-start: 10px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    animation: paSpin 0.8s linear infinite;
}

.pa-btn-secondary {
    background: linear-gradient(135deg, #32486b 0%, #243551 58%, #182335 100%);
    box-shadow: 0 18px 30px rgba(36, 53, 81, 0.22);
}

.pa-btn-warning {
    background: linear-gradient(135deg, #f8fafc 0%, #e8edf5 55%, #dbe4ee 100%);
    box-shadow: 0 16px 28px rgba(148, 163, 184, 0.22);
    color: #243447;
    border: 1px solid rgba(148, 163, 184, 0.38);
}

.pa-btn[data-type="checkin"]:hover,
.pa-modal-content button[type="submit"].pa-btn:hover,
.pa-modal-content #pa-capture.pa-btn:hover {
    box-shadow: 0 24px 38px rgba(15, 159, 136, 0.28) !important;
}

.pa-btn-secondary:hover {
    box-shadow: 0 24px 38px rgba(36, 53, 81, 0.28) !important;
}

.pa-btn-warning:hover {
    box-shadow: 0 22px 34px rgba(148, 163, 184, 0.28) !important;
    filter: none;
}

.pa-message {
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    line-height: 1.9;
}

.pa-modal {
    position: fixed;
    inset: 0;
    padding: 18px;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}

.pa-modal-content {
    width: min(92vw, 560px);
    margin: auto;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    flex-shrink: 0;
    animation: paFloatIn 0.24s ease both;
}

.pa-modal-content-camera {
    width: min(94vw, 680px);
}

.pa-modal-head {
    margin-bottom: 18px;
}

.pa-camera-frame {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #020617;
}

#pa-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #020617;
}

.pa-camera-overlay {
    position: absolute;
    inset: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.16);
    pointer-events: none;
}

.pa-toast-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
    display: grid;
    gap: 10px;
    max-width: min(90vw, 360px);
}

.pa-toast {
    border-radius: 14px;
    padding: 12px 14px;
    color: #1f2937;
    border: 1px solid transparent;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    animation: paFadeIn 0.22s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pa-toast-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.pa-toast-error {
    background: #fef2f2;
    border-color: #fecaca;
}

.pa-toast-info {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pa-toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    font-size: 13px;
    font-weight: 700;
}

.pa-toast-success .pa-toast-icon {
    color: #15803d;
    background: rgba(21, 128, 61, 0.12);
}

.pa-toast-error .pa-toast-icon {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.12);
}

.pa-toast-info .pa-toast-icon {
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.12);
}

.pa-leave-balance {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 14px;
    color: #0e7490;
    font-size: 12px;
    line-height: 1.8;
}
.pa-balance-item strong { color: #0f172a; }
.pa-pending-list {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 14px;
    font-size: 12px;
    color: #92400e;
}
.pa-pending-title { font-weight: 800; margin-bottom: 6px; }
.pa-pending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px dashed #fde68a;
}
.pa-pending-item:first-of-type { border-top: 0; }
.pa-btn-cancel {
    border: 0;
    background: #fee2e2;
    color: #b91c1c;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}
.pa-btn-cancel:hover { background: #fecaca; }
.pa-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}
.pa-time-range input { font: inherit; }

.pa-toast .pa-toast-close {
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    font-size: 20px;
}

.pa-toast .pa-toast-close:hover {
    color: #111827;
}

.pa-toast.is-leaving {
    animation: paFadeOut 0.22s ease forwards;
}

@keyframes paFadeOut {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes paFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes paFloatIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes paSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .pa-shell {
        margin: 16px auto;
        padding: 0 8px;
    }

    .pa-panel {
        padding: 22px 18px;
        gap: 18px;
    }

    .pa-panel-head p {
        display: none;
    }

    .pa-meta-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pa-meta-chip-status {
        display: none;
    }

    .pa-actions-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pa-actions-main #pa-leave-request-btn {
        grid-column: 1 / -1;
    }

    .pa-modal {
        padding: 14px;
    }

    .pa-modal-content {
        padding: 18px;
        border-radius: 20px;
    }

    .pa-camera-overlay {
        inset: 14px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-card,
    .pa-modal-content,
    .pa-toast,
    .pa-btn,
    .pa-input-wrap,
    .pa-field textarea {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── Personalized panel ─── */
.pa-user-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #d8e1ea;
    border-radius: 22px;
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 70%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    animation: paFloatIn 0.32s ease both;
}

.pa-user-panel-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.pa-user-panel-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 56px;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.18);
    background: #f0fdfa;
}

.pa-user-panel-avatar svg,
.pa-user-panel-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pa-user-panel-name {
    color: #0f172a;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.pa-user-panel-greeting {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}

.pa-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.pa-status-chip::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px currentColor;
    opacity: 0.92;
}

.pa-status-chip-not_started {
    background: #f1f5f9;
    color: #475569;
}

.pa-status-chip-working {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.pa-status-chip-done {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.pa-user-panel-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pa-user-time {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.pa-user-time-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pa-user-time-value {
    color: #0f172a;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
    font-size: 16px;
}

.pa-user-time-value.is-empty {
    color: #94a3b8;
    font-weight: 600;
    font-size: 13px;
}

.pa-user-week {
    display: grid;
    gap: 6px;
}

.pa-user-week-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.pa-user-week-value {
    color: #0f172a;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pa-user-week-track {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.pa-user-week-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #0f766e);
    transition: width 0.6s cubic-bezier(.22,1,.36,1);
}

.pa-user-week-fill.is-full {
    background: linear-gradient(90deg, #10b981, #059669);
}

.pa-user-week-fill.is-low {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.pa-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pa-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
}

.pa-user-badge-teal {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.pa-user-badge-gold {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(245, 158, 11, 0.18));
    color: #92400e;
}

.pa-user-badge-violet {
    background: rgba(139, 92, 246, 0.14);
    color: #6d28d9;
}

.pa-user-badge-green {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

/* ─── Skeleton loader ─── */
.pa-user-skeleton {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
}

.pa-skel-stack {
    display: grid;
    gap: 8px;
}

.pa-skel {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: paShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}

.pa-skel-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

.pa-skel-line {
    height: 12px;
    border-radius: 999px;
    width: 60%;
}

.pa-skel-line-lg {
    height: 16px;
    width: 80%;
}

.pa-skel-bar {
    height: 8px;
    border-radius: 999px;
    width: 100%;
}

@keyframes paShimmer {
    0% { background-position: -160% 0; }
    100% { background-position: 160% 0; }
}

/* ─── Confetti (CSS-only) ─── */
.pa-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.pa-confetti.is-firing .pa-confetti-piece {
    animation: paConfettiFall 1.9s cubic-bezier(.22,1,.36,1) forwards;
}

.pa-confetti-piece {
    position: absolute;
    top: -12px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
}

@keyframes paConfettiFall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--pa-x, 0), 105vh, 0) rotate(720deg);
        opacity: 0;
    }
}

@media (max-width: 580px) {
    .pa-user-panel-head {
        grid-template-columns: auto 1fr;
    }
    .pa-user-panel-head .pa-status-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .pa-user-panel-times {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-skel,
    .pa-confetti-piece,
    .pa-user-week-fill {
        animation: none !important;
        transition: none !important;
    }
}

/* === v2 kiosk SPA === */

@font-face {
    font-family: "IRANSans";
    src: url("fonts/IRANSans.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.pa-kiosk-app,
.pa-kiosk-app *,
.pa-modal,
.pa-modal *,
.pa-toast-container,
.pa-toast-container * {
    font-family: "IRANSans", "Vazirmatn", "IRANSansX", Tahoma, sans-serif;
    box-sizing: border-box;
}

.pa-kiosk-app [hidden] {
    display: none !important;
}

/* ─── Idle: centered head + optional logo ─── */
.pa-kiosk-head {
    text-align: center;
    justify-items: center;
}

.pa-kiosk-logo {
    display: block;
    max-width: 160px;
    max-height: 96px;
    margin: 0 auto 12px;
    object-fit: contain;
}

/* ─── Idle: big clock ─── */
.pa-kiosk-clock-wrap {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 22px 16px;
    border-radius: 22px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    background:
        radial-gradient(circle at 20% 0%, rgba(20, 184, 166, 0.1), transparent 55%),
        linear-gradient(180deg, #f0fdfa, #ffffff);
}

.pa-kiosk-clock {
    font-size: clamp(44px, 9vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #0ea5a3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pa-kiosk-date {
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

.pa-idle-notice {
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.9;
    animation: paFadeIn 0.24s ease both;
}

/* ─── Panel layout ─── */
.pa-kiosk-shell-wide {
    width: min(760px, 100%);
}

.pa-kiosk-panel {
    display: grid;
    gap: 14px;
    animation: paFloatIn 0.35s ease both;
}

.pa-panel-header {
    position: sticky;
    top: 8px;
    z-index: 50;
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid #d8e1ea;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.94), rgba(255, 255, 255, 0.94));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.pa-panel-header-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.pa-panel-header-meta {
    min-width: 0;
}

.pa-panel-header-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pa-session-countdown {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pa-session-countdown.is-warning {
    background: #fef2f2;
    color: #b91c1c;
}

.pa-lock-btn {
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    padding: 8px 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pa-lock-btn:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

/* ─── Tab bar ─── */
.pa-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid #d8e1ea;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.pa-tab {
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #64748b;
    min-height: 44px;
    padding: 0 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pa-tab:hover {
    color: #0f766e;
    background: #f0fdfa;
}

.pa-tab.is-active {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.24);
}

.pa-tab-content {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.06), transparent 36%),
        linear-gradient(180deg, #ffffff, #f8fbfd);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.07);
    min-height: 220px;
}

/* ─── Today tab ─── */
.pa-today {
    display: grid;
    gap: 14px;
}

.pa-today-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.pa-today-actions {
    display: grid;
}

.pa-worked-so-far {
    color: #0f766e;
    font-size: 13px;
    font-weight: 700;
}

.pa-streak-note {
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.14), rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.26);
    color: #92400e;
    font-size: 13px;
    font-weight: 800;
}

/* ─── Motivational message card ─── */
.pa-motivate-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background:
        radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.12), transparent 44%),
        radial-gradient(circle at 90% 100%, rgba(245, 158, 11, 0.12), transparent 44%),
        linear-gradient(135deg, #ecfeff 0%, #f0fdfa 55%, #ffffff 100%);
    box-shadow: 0 18px 40px rgba(15, 118, 110, 0.14);
    overflow: hidden;
    animation: paMotivatePop 0.5s cubic-bezier(.22,1,.36,1) both;
}

.pa-motivate-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(120%);
    animation: paMotivateShine 1.6s ease 0.35s both;
    pointer-events: none;
}

.pa-motivate-spark {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.3);
    animation: paSparkSpin 1.2s cubic-bezier(.22,1,.36,1) both;
}

.pa-motivate-text {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 2;
}

@keyframes paMotivatePop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    60% {
        transform: translateY(-3px) scale(1.01);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes paMotivateShine {
    from { transform: translateX(120%); }
    to { transform: translateX(-120%); }
}

@keyframes paSparkSpin {
    from { transform: rotate(-160deg) scale(0.4); }
    to { transform: rotate(0deg) scale(1); }
}

.pa-info-card {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    line-height: 1.9;
}

/* ─── Hourly-leave live card ─── */
.pa-hourly-host {
    display: grid;
    gap: 12px;
}

.pa-hourly-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.1), transparent 46%),
        linear-gradient(180deg, #faf5ff, #ffffff);
    box-shadow: 0 12px 28px rgba(109, 40, 217, 0.1);
}

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

.pa-hourly-title {
    color: #6d28d9;
    font-size: 14px;
    font-weight: 800;
}

.pa-hourly-window,
.pa-hourly-subtype,
.pa-hourly-out-note {
    color: #475569;
    font-size: 13px;
    line-height: 1.9;
}

.pa-hourly-out-note {
    color: #b45309;
    font-weight: 700;
}

.pa-hourly-done {
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-size: 13px;
    font-weight: 800;
}

.pa-kiosk-app .pa-btn-hourly-start {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    box-shadow: 0 16px 28px rgba(109, 40, 217, 0.24) !important;
}

.pa-kiosk-app .pa-btn-hourly-end {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 16px 28px rgba(217, 119, 6, 0.24) !important;
}

/* ─── Status / request chips ─── */
.pa-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}

.pa-chip + .pa-chip {
    margin-inline-start: 5px;
}

.pa-chip-on_time,
.pa-chip-approved {
    background: rgba(16, 185, 129, 0.13);
    color: #047857;
}

.pa-chip-late,
.pa-chip-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

.pa-chip-early_leave {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
}

.pa-chip-absent,
.pa-chip-rejected {
    background: rgba(239, 68, 68, 0.13);
    color: #b91c1c;
}

.pa-chip-warn {
    background: #fffbeb;
    color: #b45309;
    border: 1px dashed rgba(245, 158, 11, 0.5);
}

.pa-chip-leave {
    background: rgba(139, 92, 246, 0.13);
    color: #6d28d9;
}

/* ─── Records tab ─── */
.pa-records {
    display: grid;
    gap: 14px;
}

.pa-month-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.pa-month-nav-btn {
    border: 1px solid #d8e1ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f766e;
    min-height: 40px;
    padding: 0 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pa-month-nav-btn:hover:not(:disabled) {
    background: #f0fdfa;
    transform: translateY(-1px);
}

.pa-month-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pa-month-nav-title {
    text-align: center;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.pa-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    -webkit-overflow-scrolling: touch;
}

.pa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 480px;
}

.pa-table th {
    text-align: right;
    padding: 12px 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.pa-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    vertical-align: middle;
}

.pa-table tbody tr:hover {
    background: #f8fffd;
}

.pa-cell-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pa-cell-date {
    white-space: nowrap;
}

/* The arithmetic under a worked-hours figure. Deliberately quiet: it is there
   for the row that looks wrong, and must not compete with the number itself. */
.pa-cell-note {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    max-width: 280px;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    white-space: normal;
}

.pa-cell-note span + span::before {
    content: '‚2';
    margin-inline-end: 8px;
    color: #cbd5e1;
}

.pa-cell-weekday {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.pa-table-total td {
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 800;
    border-bottom: 0;
}

/* ─── «سوابق من» on a phone ───────────────────────────────────────────────
   A five-column table inside a 375px screen was a 480px-wide strip you had to
   drag sideways to read a single day. Below 560px the table stops behaving
   like a table: every row becomes its own card and each cell carries its
   column name from data-label, so a day reads top to bottom with no
   horizontal scrolling at all. */
@media (max-width: 560px) {
    #pa-kiosk-app .pa-table-wrap {
        overflow-x: visible;
        border: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    #pa-kiosk-app .pa-table,
    #pa-kiosk-app .pa-table tbody,
    #pa-kiosk-app .pa-table tfoot,
    #pa-kiosk-app .pa-table tr,
    #pa-kiosk-app .pa-table td {
        display: block;
        width: auto;
        min-width: 0;
    }

    /* The header row is redundant once every cell names itself. */
    #pa-kiosk-app .pa-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    #pa-kiosk-app .pa-table tbody tr {
        margin-bottom: 10px;
        padding: 6px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    }

    #pa-kiosk-app .pa-table tbody tr:hover {
        background: #ffffff;
    }

    #pa-kiosk-app .pa-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
    }

    #pa-kiosk-app .pa-table tbody td:last-child {
        border-bottom: 0;
    }

    #pa-kiosk-app .pa-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #94a3b8;
        font-size: 12px;
        font-weight: 800;
    }

    /* The date cell is the card's heading, not another label/value pair. */
    #pa-kiosk-app .pa-table tbody td.pa-cell-date {
        display: block;
        padding-top: 4px;
        color: #0f172a;
        font-weight: 800;
    }

    #pa-kiosk-app .pa-table tbody td.pa-cell-date::before {
        display: none;
    }

    /* Label and figure keep the first line; the breakdown wraps under them. */
    #pa-kiosk-app .pa-table tbody td.pa-cell-num {
        flex-wrap: wrap;
    }

    #pa-kiosk-app .pa-cell-note {
        flex: 0 0 100%;
        max-width: none;
        margin-top: 7px;
    }

    #pa-kiosk-app .pa-cell-status {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #pa-kiosk-app .pa-cell-status .pa-chip {
        margin-inline-start: auto;
    }

    #pa-kiosk-app .pa-cell-status .pa-chip ~ .pa-chip {
        margin-inline-start: 0;
    }

    /* colSpan means nothing once the cells are blocks; rebuild the total row
       as a single teal strip. */
    #pa-kiosk-app .pa-table-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 16px;
        background: #f0fdfa;
        border: 1px solid rgba(15, 118, 110, 0.18);
    }

    #pa-kiosk-app .pa-table-total td {
        padding: 0;
        border: 0;
        background: none;
    }

    #pa-kiosk-app .pa-month-nav-btn {
        padding: 0 10px;
        font-size: 11px;
    }
}

.pa-month-leaves {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(139, 92, 246, 0.24);
    background: #faf5ff;
}

.pa-section-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.pa-month-leave-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #475569;
    padding: 6px 0;
    border-top: 1px dashed rgba(139, 92, 246, 0.22);
}

.pa-month-leave-row:first-of-type {
    border-top: 0;
}

.pa-month-leave-date {
    color: #0f172a;
    font-weight: 700;
}

/* ─── Schedule tab ─── */
.pa-schedule,
.pa-schedule-body {
    display: grid;
    gap: 14px;
}

.pa-sched-list {
    display: grid;
    gap: 8px;
}

.pa-sched-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.pa-sched-row.is-working {
    border-color: rgba(20, 184, 166, 0.32);
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 60%);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.07);
}

.pa-sched-day {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.pa-sched-hours {
    color: #0f766e;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pa-sched-hours.is-off {
    color: #cbd5e1;
}

.pa-sched-tag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.pa-sched-tag-on {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.pa-sched-tag-off {
    background: #f1f5f9;
    color: #94a3b8;
}

.pa-sched-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 16px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0e7490;
    font-size: 13px;
}

.pa-sched-summary strong {
    color: #0f172a;
    font-weight: 800;
}

.pa-sched-custom-note {
    margin-inline-start: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.13);
    color: #6d28d9;
    font-size: 11px;
    font-weight: 800;
}

/* ─── Requests tab ─── */
.pa-requests {
    display: grid;
    gap: 14px;
}

.pa-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.pa-seg-btn {
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    min-height: 40px;
    padding: 0 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pa-seg-btn.is-active {
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.pa-seg-panes {
    display: grid;
    gap: 12px;
}

.pa-request-form {
    display: grid;
    gap: 14px;
}

.pa-select {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #d8e1ea;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.pa-select:focus {
    outline: 0;
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.1);
}

.pa-request-list {
    display: grid;
    gap: 10px;
}

.pa-request-item {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    animation: paFadeIn 0.22s ease both;
}

.pa-request-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pa-request-item-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.pa-request-item-detail {
    color: #475569;
    font-size: 12px;
    line-height: 1.9;
}

.pa-request-item-reason {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.9;
}

.pa-admin-note {
    padding: 8px 12px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.9;
}

.pa-request-item .pa-btn-cancel {
    justify-self: start;
    padding: 8px 14px;
    border-radius: 10px;
}

/* ─── Generic bits ─── */
.pa-loading {
    padding: 26px 16px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    animation: paPulse 1.2s ease-in-out infinite;
}

.pa-empty-note {
    padding: 22px 16px;
    text-align: center;
    border-radius: 16px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.9;
}

@keyframes paPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .pa-panel-header {
        top: 4px;
        padding: 12px;
    }

    .pa-panel-header-main {
        grid-template-columns: auto 1fr;
    }

    .pa-panel-header-side {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .pa-tab {
        font-size: 12px;
    }

    .pa-tab-content {
        padding: 14px;
        border-radius: 20px;
    }

    .pa-kiosk-clock-wrap {
        padding: 16px 12px;
    }

    .pa-sched-row {
        grid-template-columns: 1fr auto;
    }

    .pa-sched-row .pa-sched-tag {
        display: none;
    }

    .pa-month-nav-btn {
        padding: 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-motivate-card,
    .pa-motivate-card::after,
    .pa-motivate-spark,
    .pa-kiosk-panel,
    .pa-request-item,
    .pa-loading,
    .pa-idle-notice {
        animation: none !important;
        transition: none !important;
    }
}

/* Inline SVG icons (kiosk) */
.pa-icon {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.18em;
  shape-rendering: geometricPrecision;
}
.pa-motivate-spark { display: inline-flex; align-items: center; }
.pa-streak-note,
.pa-hourly-done { display: inline-flex; align-items: center; gap: 5px; }

/* === v2.4 — staged idle screen: code first, then the three actions ======= */

/* The whole idle UI is id-scoped and !important-free but high-specificity,
   because the site theme also styles button/select/input on the front end.
   #pa-kiosk-app always wins without us fighting the theme rule by rule. */

/* --- stage: hidden until a full national code is present ---------------- */
#pa-kiosk-app .pa-kiosk-stage:empty { display: none; }
#pa-kiosk-app .pa-kiosk-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  animation: pa-stage-in 220ms ease-out;
}
@keyframes pa-stage-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #pa-kiosk-app .pa-kiosk-stage { animation: none; }
}

/* --- the two punch buttons: the point of the whole screen --------------- */
/* Always two columns, phones included: ورود and خروج are a pair and reading
   them side by side is the whole point — stacking them on a narrow screen
   turns a glance into a scroll. */
#pa-kiosk-app .pa-kiosk-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Icon and label sit on ONE line. Stacking them (flex-direction: column) put
   the glyph on its own row above/below the words, which is what made the pair
   look broken on a phone. Row order follows the DOM, and the DOM is RTL, so
   ثبت ورود gets its icon on the right of the words and ثبت خروج gets its icon
   after them, on the left. */
#pa-kiosk-app .pa-btn-punch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 14px 10px;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
#pa-kiosk-app .pa-btn-in {
  background: linear-gradient(150deg, #10b981 0%, #0f766e 55%, #115e59 100%);
  box-shadow: 0 10px 22px -8px rgba(13, 148, 136, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
#pa-kiosk-app .pa-btn-out {
  background: linear-gradient(150deg, #fb923c 0%, #ea580c 55%, #c2410c 100%);
  box-shadow: 0 10px 22px -8px rgba(234, 88, 12, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
#pa-kiosk-app .pa-btn-punch:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
#pa-kiosk-app .pa-btn-punch:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.96);
}
#pa-kiosk-app .pa-btn-punch:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 3px;
}
#pa-kiosk-app .pa-btn-punch:disabled { opacity: 0.6; cursor: default; }

/* Bare glyph — no disc behind it. The gradient is dark enough that a white
   stroke reads on its own, and the plate was only adding visual weight. */
#pa-kiosk-app .pa-punch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
}
#pa-kiosk-app .pa-punch-icon svg { width: 22px; height: 22px; display: block; }
/* nowrap keeps «ثبت ورود» on one line; without it the two words break apart
   inside a narrow column and the button grows a second row again. */
#pa-kiosk-app .pa-punch-label {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

/* --- the quiet third action -------------------------------------------- */
#pa-kiosk-app .pa-btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f1f5f9;
  color: #64748b;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#pa-kiosk-app .pa-btn-more:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #475569;
}
#pa-kiosk-app .pa-btn-more:focus-visible { outline: 2px solid #64748b; outline-offset: 2px; }

/* --- birth-date step: three Jalali dropdowns ---------------------------- */
#pa-kiosk-app .pa-verify-box { display: flex; flex-direction: column; gap: 12px; }
#pa-kiosk-app .pa-verify-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #475569;
}
#pa-kiosk-app .pa-birth-picker .pa-date-picker {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
  width: 100%;
}
/* Own field styling — the theme's select rules do not reach in here. */
#pa-kiosk-app .pa-birth-picker select {
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 0 34px 0 12px;
  box-sizing: border-box;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
                    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #0f172a;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#pa-kiosk-app .pa-birth-picker select:hover { border-color: #94a3b8; }
#pa-kiosk-app .pa-birth-picker select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
  outline: none;
}
#pa-kiosk-app .pa-birth-picker.is-invalid select {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.13);
}
/* The shared picker prints tiny captions under each select; keep them subtle. */
#pa-kiosk-app .pa-birth-picker .pa-date-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  text-align: center;
}
#pa-kiosk-app .pa-verify-box .pa-btn {
  min-height: 54px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
}

/* --- punch confirmation card ------------------------------------------- */
#pa-kiosk-app .pa-punch-result { text-align: center; }
#pa-kiosk-app .pa-punch-result-mark {
  width: 82px; height: 82px; margin: 6px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 42px; font-weight: 700; color: #fff;
}
#pa-kiosk-app .pa-punch-result.is-in .pa-punch-result-mark {
  background: linear-gradient(150deg, #10b981, #0f766e);
  box-shadow: 0 10px 24px -10px rgba(13, 148, 136, 0.8);
}
#pa-kiosk-app .pa-punch-result.is-out .pa-punch-result-mark {
  background: linear-gradient(150deg, #fb923c, #ea580c);
  box-shadow: 0 10px 24px -10px rgba(234, 88, 12, 0.8);
}
#pa-kiosk-app .pa-punch-result-title { margin: 0 0 4px; font-size: 23px; font-weight: 800; }
#pa-kiosk-app .pa-punch-result-name { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #0f172a; }
#pa-kiosk-app .pa-punch-result-time {
  margin: 6px 0 12px;
  font-size: 46px; font-weight: 800; letter-spacing: 1px;
  color: #0f172a; font-variant-numeric: tabular-nums;
}
#pa-kiosk-app .pa-punch-result-message {
  margin: 0 auto 20px; max-width: 46ch;
  font-size: 14px; line-height: 2; color: #475569;
}

@media (max-width: 430px) {
  /* Two columns still; only the type and the glyph shrink so icon + label
     keep fitting on the single line. */
  #pa-kiosk-app .pa-btn-punch { min-height: 64px; gap: 6px; padding: 12px 6px; font-size: 15px; }
  #pa-kiosk-app .pa-punch-label { font-size: 15px; }
  #pa-kiosk-app .pa-punch-icon svg { width: 19px; height: 19px; }
  #pa-kiosk-app .pa-btn-more { min-height: 48px; font-size: 16px; }
  #pa-kiosk-app .pa-birth-picker .pa-date-picker { grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; }
  #pa-kiosk-app .pa-birth-picker select { min-height: 52px; font-size: 15px; }
  #pa-kiosk-app .pa-punch-result-time { font-size: 38px; }
}