/* public/assets/css/components/modal.css */

:root {
    /* Safe fallbacks if a token isn't defined yet */
    --modal-backdrop: rgba(0, 0, 0, 0.55);
    --modal-bg: var(--surface, #fff);
    --modal-text: var(--text, #111);
    --modal-border: var(--border, rgba(0, 0, 0, 0.12));
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

    --modal-radius: var(--radius-lg, 14px);
    --modal-pad: var(--space-5, 20px);

    --modal-title-size: 16px;
    --modal-body-size: 14px;

    --modal-z: 9999;

    --btn-radius: var(--radius-md, 10px);
}

/* Backdrop */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z);
    display: none;
    /* hidden by default */
}

.app-modal.is-open {
    display: block;
}

.app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
}

/* Panel */
.app-modal__panel {
    position: relative;
    margin: 8vh auto 0 auto;
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100vh - 16vh);
    overflow: hidden;

    background: var(--modal-bg);
    color: var(--modal-text);
    border: 1px solid var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
}

/* Layout */
.app-modal__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: var(--modal-pad);
    border-bottom: 1px solid var(--modal-border);
}

.app-modal__title {
    margin: 0;
    font-size: var(--modal-title-size);
    font-weight: 650;
    line-height: 1.2;
}

.app-modal__close {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--btn-radius);
    line-height: 0;
}

.app-modal__close:focus-visible {
    outline: 2px solid var(--focus, #2563eb);
    outline-offset: 2px;
}

.app-modal__body {
    padding: var(--modal-pad);
    overflow: auto;
    max-height: calc(100vh - 260px);
    font-size: var(--modal-body-size);
}

.app-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: var(--modal-pad);
    border-top: 1px solid var(--modal-border);
}

/* Buttons (minimal tokenized) */
.app-modal__btn {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--btn-radius);
    border: 1px solid var(--modal-border);
    background: var(--surface-2, #f6f7f9);
    color: var(--modal-text);
    cursor: pointer;
    font-weight: 600;
}

.app-modal__btn:hover {
    filter: brightness(0.98);
}

.app-modal__btn:active {
    transform: translateY(1px);
}

.app-modal__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.app-modal__btn--primary {
    background: var(--primary, #2563eb);
    border-color: transparent;
    color: var(--primary-contrast, #fff);
}

.app-modal__btn--danger {
    background: var(--danger, #dc2626);
    border-color: transparent;
    color: #fff;
}

/* Small screens: push panel lower a bit */
@media (max-width: 520px) {
    .app-modal__panel {
        margin-top: 10vh;
        width: calc(100vw - 18px);
    }
}


/* --- Modal: support embedding an existing page form/card inside the modal --- */
.app-modal__body .employment-form-card {
    /* it is already a "card" on the page; inside modal we want it flat */
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.app-modal__body .employment-form-card h2 {
    margin-top: 0;
}