/*
 * GSOC UI tokens and compact controls.
 * Reference: Employer wizard, Hardware / Post Package wizard, Shift Information.
 * Include this on a new screen. Do not restyle an existing page only to adopt it.
 * Rules: docs/DESIGN_SYSTEM.md
 */

:root {
    --gsoc-panel: #020b16;
    --gsoc-card: #060f1b;
    --gsoc-text: #e6edf7;
    --gsoc-muted: #8893ab;
    --gsoc-line: #1f2e52;
    --gsoc-blue: #3b82f6;
    --gsoc-blue-border: #2563eb;
    --gsoc-blue-ink: #93c5fd;
    --gsoc-grey: #6c757d;
    --gsoc-grey-border: #5c636a;
    --gsoc-danger: #fca5a5;
    --gsoc-danger-border: rgba(239, 68, 68, 0.55);
    --gsoc-danger-fill: rgba(239, 68, 68, 0.10);
    --gsoc-warn: #f59e0b;
    --gsoc-warn-border: rgba(245, 158, 11, 0.55);
    --gsoc-warn-fill: rgba(245, 158, 11, 0.10);
    --gsoc-gap-label: 4px;
    --gsoc-gap-container: 6px;
    --gsoc-gap-row: 8px;
    --gsoc-btn-height: 38px;
    --gsoc-btn-pad-x: 0.75rem;
    --gsoc-btn-font: 1rem;
    --gsoc-btn-weight: 600;
    --gsoc-btn-radius: 4px;
    --gsoc-modal-radius: 16px;
    --gsoc-modal-width: calc(100vw - 24px);
    --gsoc-modal-max-width: 640px;
    --gsoc-modal-height: min(780px, 86vh);
    --gsoc-modal-max-height: 86vh;
}

.gsoc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gsoc-gap-container);
}

.gsoc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--gsoc-gap-row);
    align-items: end;
}

.gsoc-field {
    display: flex;
    flex-direction: column;
    gap: var(--gsoc-gap-label);
    min-width: 0;
}

.gsoc-label {
    margin: 0;
    color: var(--gsoc-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gsoc-input,
.gsoc-select,
.gsoc-textarea {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--gsoc-line);
    border-radius: 8px;
    background: #071426;
    color: var(--gsoc-text);
    font-size: 16px;
    line-height: 1.4;
}

.gsoc-textarea {
    height: auto;
    min-height: 64px;
}

.gsoc-btn-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gsoc-gap-row);
}

.gsoc-btn-row .gsoc-btn-solid {
    margin-left: auto;
}

.gsoc-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    height: var(--gsoc-btn-height);
    margin: 0;
    padding: 0 var(--gsoc-btn-pad-x);
    border-radius: var(--gsoc-btn-radius);
    font-size: var(--gsoc-btn-font);
    font-weight: var(--gsoc-btn-weight);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.gsoc-btn-solid {
    border: 1px solid var(--gsoc-blue-border);
    background: var(--gsoc-blue);
    color: #fff;
}

.gsoc-btn-solid i,
.gsoc-btn-solid i::before {
    color: #fff;
}

.gsoc-btn-solid:disabled,
.gsoc-btn-solid.is-wait {
    border-color: var(--gsoc-grey-border);
    background: var(--gsoc-grey);
    color: #fff;
    cursor: not-allowed;
}

.gsoc-btn-outline {
    border: 1px solid rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.10);
    color: var(--gsoc-blue-ink);
}

.gsoc-btn-outline i,
.gsoc-btn-outline i::before {
    color: var(--gsoc-blue-ink);
}

.gsoc-btn-danger {
    border: 1px solid var(--gsoc-danger-border);
    background: var(--gsoc-danger-fill);
    color: var(--gsoc-danger);
}

.gsoc-btn-danger i,
.gsoc-btn-danger i::before {
    color: var(--gsoc-danger);
}

.gsoc-btn-warn {
    border: 1px solid var(--gsoc-warn-border);
    background: var(--gsoc-warn-fill);
    color: var(--gsoc-warn);
}

.gsoc-btn-warn i,
.gsoc-btn-warn i::before {
    color: var(--gsoc-warn);
}

@media (max-width: 430px) {
    .gsoc-btn,
    .gsoc-btn-solid,
    .gsoc-btn-outline,
    .gsoc-btn-danger,
    .gsoc-btn-warn {
        width: auto;
        max-width: calc(100vw - 32px);
    }
}

/* Post Package frame. One size, one glow, for every form modal. */
.gsoc-modal-frame {
    width: var(--gsoc-modal-width);
    max-width: var(--gsoc-modal-max-width);
    height: var(--gsoc-modal-height);
    max-height: var(--gsoc-modal-max-height);
    margin: auto;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--gsoc-text);
    background: var(--gsoc-panel) !important;
    border: 1px solid rgba(59, 130, 246, 0.72) !important;
    border-radius: var(--gsoc-modal-radius);
    background-clip: padding-box;
    box-shadow:
        inset 0 0 0 1px rgba(96, 165, 250, 0.22),
        0 0 0 1px rgba(59, 130, 246, 0.50),
        0 0 26px rgba(59, 130, 246, 0.36),
        0 0 70px rgba(59, 130, 246, 0.18),
        0 18px 50px rgba(0, 0, 0, 0.58) !important;
    animation: shiftInfoGlowPulse 3.2s ease-in-out infinite;
}
@keyframes shiftInfoGlowPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(96, 165, 250, 0.22),
            0 0 0 1px rgba(59, 130, 246, 0.50),
            0 0 26px rgba(59, 130, 246, 0.36),
            0 0 70px rgba(59, 130, 246, 0.18),
            0 18px 50px rgba(0, 0, 0, 0.58) !important;
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(147, 197, 253, 0.30),
            0 0 0 1px rgba(96, 165, 250, 0.65),
            0 0 34px rgba(59, 130, 246, 0.50),
            0 0 84px rgba(59, 130, 246, 0.28),
            0 18px 50px rgba(0, 0, 0, 0.58) !important;
    }
}
/* The glow lives on the frame. An inner Bootstrap panel does not paint a second one. */
.gsoc-modal-frame > .modal-content,
body.ss-ui-skin .gsoc-modal-frame > .modal-content,
#shiftInfoModal .gsoc-modal-frame > .modal-content,
.shift-info-skin .gsoc-modal-frame > .modal-content,
#timeBlockModal .gsoc-modal-frame > .modal-content,
#callWindowModal .gsoc-modal-frame > .modal-content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}
.pp-progress {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}
.pp-progress > span {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--gsoc-line);
}
.pp-progress > span.on,
.pp-progress > span.active,
.pp-progress > span.completed {
    background: var(--gsoc-blue);
}
.gsoc-modal-frame .pp-card,
.gsoc-modal-frame .shift-assignment-form {
    background: var(--gsoc-card);
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 14px;
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
dialog.gsoc-modal-frame[open],
.modal-dialog.gsoc-modal-frame {
    display: flex;
    flex-direction: column;
}
.gsoc-modal-frame > .modal-content {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.modal.show:has(.gsoc-modal-frame) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible !important;
}
@media (max-width: 700px) {
    .gsoc-modal-frame {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0 !important;
        box-sizing: border-box;
    }
    dialog.gsoc-modal-frame,
    .gsoc-modal-frame > .modal-content {
        border-radius: 0 !important;
    }
}

/* Shift Information Unassign, Delete, and Assign are 4px. Every modal action button uses that. */
.gsoc-modal-frame :is(
    .btn,
    .pp-primary, .pp-back, .pp-add, .pp-print, .pp-lock, .pp-plus, .pp-doc,
    .aw-next, .aw-back, .aw-add, .aw-choice, .aw-primary, .aw-outline, .popsicle-btn,
    .gsoc-btn,
    .hw-primary, .hw-back, .hw-plus, .hw-lock,
    .ew-primary, .ew-back, .ew-add, .ew-filebtn, .ew-roster-add,
    .gsoc-si-save, .gsoc-si-danger, .si-call-btn,
    .demo-back, .demo-book, .demo-nda,
    .share-btn, .share-mode,
    .psw-choice, .psw-back, .psw-go,
    .circle-add-btn, .doc-edit-btn, .btn-take-photo
):not(.btn-close):not(.gsoc-shutter) {
    border-radius: var(--gsoc-btn-radius) !important;
}
/* Camera shutter. A circle, not the 4px footer button. */
.gsoc-shutter {
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 0;
    border-radius: 50% !important;
    border: 1px solid var(--gsoc-blue-border);
    background: var(--gsoc-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 80px;
    cursor: pointer;
}
.gsoc-shutter i,
.gsoc-shutter i::before {
    color: #fff !important;
    font-size: 28px;
}
.gsoc-shutter.is-redo {
    background: transparent;
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--gsoc-blue-ink);
}
.gsoc-shutter.is-redo i,
.gsoc-shutter.is-redo i::before { color: var(--gsoc-blue-ink) !important; }
#uniformPhotoPromptModal.shift-info-skin .modal-header { border-bottom: 0 !important; }
#uniformPhotoPromptModal.shift-info-skin .modal-body { padding-bottom: 0 !important; }
#uniformPhotoPromptModal .shift-assignment-form p {
    margin: 0 0 10px;
    text-align: left;
    color: var(--gsoc-text);
    font-size: 14.5px;
    line-height: 1.45;
}
#uniformPhotoPromptModal .gsoc-muted { color: var(--gsoc-muted); }
.gsoc-shutter-row {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 0 15px;
}

/* Footer buttons share one box. Shift Information Unassign and Assign are the reference. */
.gsoc-modal-frame :is(.si-foot, .aw-foot, .pp-foot, .ew-foot, .hw-foot, .gsoc-si-foot, .psw-actions, .modal-footer) :is(
    button,
    a.btn,
    .btn,
    label.ew-filebtn
):not(.btn-close):not(.pp-lock):not(.hw-lock):not(.gsoc-shutter) {
    box-sizing: border-box !important;
    height: var(--gsoc-btn-height) !important;
    min-height: var(--gsoc-btn-height) !important;
    padding: 0 var(--gsoc-btn-pad-x) !important;
    font-size: var(--gsoc-btn-font) !important;
    font-weight: var(--gsoc-btn-weight) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
}