/*
--------------------------------------------------------------
Audition Manager Theme
--------------------------------------------------------------

Default styling for the Audition Manager applicant experience.

This stylesheet provides a consistent, professional interface
regardless of the active WordPress theme.

--------------------------------------------------------------
*/


/*--------------------------------------------------------------
Design Tokens
--------------------------------------------------------------*/

:root {

    /* Colors */

    --am-color-primary:
        #2271b1;

    --am-color-primary-hover:
        #135e96;

    --am-color-success:
        #00a32a;

    --am-color-success-background:
        #edfaef;

    --am-color-warning:
        #d97706;

    --am-color-warning-background:
        #fff8eb;

    --am-color-danger:
        #d63638;

    --am-color-danger-background:
        #fcf0f1;

    --am-color-text:
        #1d2327;

    --am-color-text-muted:
        #646970;

    --am-color-border:
        #dcdcde;

    --am-color-background:
        #f6f7f7;

    --am-color-surface:
        #ffffff;


    /* Border Radius */

    --am-radius-sm:
        6px;

    --am-radius:
        10px;

    --am-radius-lg:
        16px;


    /* Shadows */

    --am-shadow-sm:
        0 2px 8px rgba(
            0,
            0,
            0,
            .05
        );

    --am-shadow:
        0 10px 28px rgba(
            0,
            0,
            0,
            .08
        );


    /* Animation */

    --am-transition:
        .18s ease;


    /* Spacing */

    --am-space-xs:
        8px;

    --am-space-sm:
        16px;

    --am-space-md:
        24px;

    --am-space-lg:
        40px;

    --am-space-xl:
        56px;

}


/*--------------------------------------------------------------
Base
--------------------------------------------------------------*/

.am-public {

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.6;

    color:
        var(
            --am-color-text
        );

}

.am-public *,
.am-public *::before,
.am-public *::after {

    box-sizing:
        border-box;

}

.am-public img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}

.am-public hr {

    border:
        0;

    border-top:
        1px solid var(
            --am-color-border
        );

    margin:
        var(--am-space-lg)
        0;

}


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

.am-public h2,
.am-public h3,
.am-public h4 {

    margin:
        0 0
        var(--am-space-sm);

    font-family:
        inherit;

    font-weight:
        700;

    line-height:
        1.25;

    color:
        var(
            --am-color-text
        );

}

.am-public h2 {

    font-size:
        2rem;

}

.am-public h3 {

    font-size:
        1.5rem;

}

.am-public h4 {

    font-size:
        1.2rem;

}

.am-public p {

    margin:
        0 0
        var(--am-space-sm);

    color:
        var(
            --am-color-text
        );

}

.am-public small {

    color:
        var(
            --am-color-text-muted
        );

}

.am-public a {

    color:
        var(
            --am-color-primary
        );

    text-decoration:
        none;

    transition:
        color
        var(--am-transition);

}

.am-public a:hover {

    color:
        var(
            --am-color-primary-hover
        );

    text-decoration:
        underline;

}

/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/

.am-page-header {

    margin-bottom:
        var(--am-space-lg);

}

.am-section-title {

    margin:
        0 0
        var(--am-space-sm);

}

.am-page-nav {

    margin-bottom:
        var(--am-space-md);

}

.am-page-nav a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    font-weight:
        600;

}


/*--------------------------------------------------------------
Grid Layout
--------------------------------------------------------------*/

.am-room-grid,
.am-slot-grid {

    display:
        grid;

    gap:
        var(--am-space-md);

}


/*--------------------------------------------------------------
Cards
--------------------------------------------------------------*/

.am-room-card,
.am-slot-card,
.am-reservation-card {

    background:
        var(--am-color-surface);

    border:
        1px solid
        var(--am-color-border);

    border-radius:
        var(--am-radius);

    box-shadow:
        var(--am-shadow-sm);

    transition:

        transform
            var(--am-transition),

        box-shadow
            var(--am-transition),

        border-color
            var(--am-transition);

    overflow:
        hidden;

}

.am-room-card:hover,
.am-slot-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #c3c4c7;

    box-shadow:
        var(--am-shadow);

}

.am-card-body {

    padding:
        var(--am-space-md);

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--am-space-sm);

}

.am-card-actions {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    padding:

        var(--am-space-sm)

        var(--am-space-md);

    border-top:
        1px solid
        var(--am-color-border);

    background:
        #fafafa;

}


/*--------------------------------------------------------------
Reservation Card
--------------------------------------------------------------*/

.am-reservation-card {

    max-width:
        700px;

    margin:
        0 auto;

}

.am-reservation-summary {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin-top:
        var(--am-space-sm);

    margin-bottom:
        var(--am-space-md);

    padding:
        var(--am-space-md);

    background:
        #f8fafc;

    border:
        1px solid
        var(--am-color-border);

    border-radius:
        var(--am-radius);

}

.am-summary-date {

    font-size:
        1.05rem;

    font-weight:
        600;

}

.am-summary-time {

    font-size:
        2rem;

    font-weight:
        700;

    color:
        var(--am-color-primary);

    line-height:
        1.1;

}


/*--------------------------------------------------------------
Room Cards
--------------------------------------------------------------*/

.am-room-title {

    margin:
        0;

    font-size:
        1.3rem;

}

.am-room-description {

    color:
        var(--am-color-text-muted);

    flex:
        1;

}


/*--------------------------------------------------------------
Slot Cards
--------------------------------------------------------------*/

.am-slot-date {

    font-size:
        1rem;

    font-weight:
        600;

}

.am-slot-time {

    font-size:
        2rem;

    font-weight:
        700;

    color:
        var(--am-color-primary);

    line-height:
        1.1;

}

.am-slot-reserved-name {

    color:
        var(--am-color-text-muted);

    font-size:
        .9rem;

}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

.am-form {

    margin-top:
        var(--am-space-md);

}

.am-form-group {

    margin-bottom:
        var(--am-space-md);

}

.am-label {

    display:
        block;

    margin-bottom:
        var(--am-space-xs);

    font-size:
        .95rem;

    font-weight:
        600;

    color:
        var(--am-color-text);

}

.am-input,
.am-textarea,
.am-select {

    display:
        block;

    width:
        100%;

    padding:
        12px 16px;

    font:

        inherit;

    color:
        var(--am-color-text);

    background:
        var(--am-color-surface);

    border:
        1px solid
        var(--am-color-border);

    border-radius:
        var(--am-radius-sm);

    transition:

        border-color
            var(--am-transition),

        box-shadow
            var(--am-transition),

        background
            var(--am-transition);

}

.am-input:focus,
.am-textarea:focus,
.am-select:focus {

    outline:
        none;

    border-color:
        var(--am-color-primary);

    box-shadow:
        0 0 0 3px rgba(
            34,
            113,
            177,
            .15
        );

}

.am-textarea {

    min-height:
        140px;

    resize:
        vertical;

}


/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/

.am-button,
.am-button:visited {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:

        12px
        24px;

    border:
        none;

    border-radius:
        var(--am-radius-sm);

    background:
        var(--am-color-primary);

    color:
        #ffffff;

    font-size:
        .95rem;

    font-weight:
        600;

    line-height:
        1;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:

        background-color
            var(--am-transition),

        transform
            var(--am-transition),

        box-shadow
            var(--am-transition);

    box-shadow:
        var(--am-shadow-sm);

}

.am-button:hover {

    background:
        var(--am-color-primary-hover);

    color:
        #ffffff;

    text-decoration:
        none;

    transform:
        translateY(-1px);

}

.am-button:active {

    transform:
        translateY(0);

}

.am-button:focus {

    outline:
        none;

    box-shadow:

        0 0 0 3px rgba(
            34,
            113,
            177,
            .20
        );

}

.am-form-actions {

    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        var(--am-space-lg);

}


/*--------------------------------------------------------------
Status Badges
--------------------------------------------------------------*/

.am-slot-break,
.am-slot-closed,
.am-button-disabled {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        160px;

    padding:

        12px
        20px;

    border-radius:
        var(--am-radius-sm);

    font-weight:
        600;

    user-select:
        none;

}

.am-button-disabled {

    background:
        #b8b8b8;

    color:
        #ffffff;

    pointer-events:
        none;

}

.am-slot-break {

    background:
        #f0ad4e;

    color:
        #ffffff;

}

.am-slot-closed {

    background:
        #6c757d;

    color:
        #ffffff;

}


/*--------------------------------------------------------------
Alerts
--------------------------------------------------------------*/

.am-success,
.am-error {

    padding:

        var(--am-space-md);

    margin-bottom:
        var(--am-space-lg);

    border-left:
        5px solid;

    border-radius:
        var(--am-radius);

    box-shadow:
        var(--am-shadow-sm);

}

.am-success {

    background:
        var(--am-color-success-background);

    border-color:
        var(--am-color-success);

    color:
        #135e27;

}

.am-error {

    background:
        var(--am-color-danger-background);

    border-color:
        var(--am-color-danger);

    color:
        #7a1f1f;

}

.am-success h3,
.am-error h3 {

    margin-top:
        0;

}

.am-success p:last-child,
.am-error p:last-child {

    margin-bottom:
        0;

}


/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/

.am-text-center {

    text-align:
        center;

}

.am-text-muted {

    color:
        var(--am-color-text-muted);

}

.am-hidden {

    display:
        none;

}


/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media (
    max-width: 768px
) {

    .am-public {

        margin:

            var(--am-space-md)

            auto;

        padding:

            0

            var(--am-space-sm);

    }

    .am-card-actions,
    .am-form-actions {

        justify-content:
            stretch;

    }

    .am-button,
    .am-button-disabled,
    .am-slot-break,
    .am-slot-closed {

        width:
            100%;

    }

    .am-summary-time {

        font-size:
            1.6rem;

    }

}