@import url("colors.css");

/* Admin Styles | J Dodson LLC | Photo Luminara Studio */

/* GLOBAL */
html, body.admin-body {
    height: 100%;
    margin: 0;
    background: var(--color-body-bg);
    color: var(--admin-text);
    font-family: system-ui, sans-serif;
}

.admin-wrapper {
    display: flex;
    width: 100%;
    min-height: 100%;
}

/* SIDEBAR — FIXED */
.admin-sidebar {
    width: 250px;
    height: 100vh;
    background: var(--admin-sidebar-bg);
    border-right: 1px solid var(--admin-border);
    padding: 25px 0px;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
}

/* MAIN CONTENT AREA */
.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 1100px;
    width: 100%;
    margin-left: 250px;
    box-sizing: border-box;
}

/* DASHBOARD CARD GRID */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

    .admin-cards .admin-card {
        display: block;
        cursor: pointer;
        text-decoration: none;
        color: var(--admin-text);
        width: 100%;
        padding: 10px 40px 5px 20px;
        max-width: none;
        margin: 0;
        position: relative;
    }

        .admin-cards .admin-card:nth-child(2) {
            left: -40px;
        }

        .admin-cards .admin-card:nth-child(3) {
            left: -80px;
        }

/* ANALYTICS SECTION */
.analytics-section {
    margin-top: 50px;
}

.analytics-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--admin-text-muted);
    margin-bottom: 20px;
    opacity: 0.85;
    letter-spacing: 0.5px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-width: 850px;
    margin: 0 0 20px 0;
    gap: 20px;
}

.analytics-box {
    background: var(--card-admin-bg);
    border: 1px solid var(--admin-border-strong);
    padding: 18px 20px;
    border-radius: 8px;
    color: var(--admin-text);
    box-shadow: var(--shadow-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .analytics-box .big-number {
        font-size: 48px;
        font-weight: 700;
        line-height: 1;
        margin: 10px 0 0 0;
        letter-spacing: -1px;
    }

    .analytics-box:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-2);
        background: var(--card-admin-hover-bg);
    }

    .analytics-box h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: 600;
        color: var(--admin-text-special);
    }

    .analytics-box p,
    .analytics-box li {
        font-size: 15px;
        line-height: 1.4;
        opacity: 0.9;
    }

    .analytics-box ul {
        margin: 0;
        padding-left: 18px;
    }

/* LOGO */
.admin-logo {
    text-align: center;
    margin: 0px 10px 20px 10px;
}

    .admin-logo h2 {
        font-size: 18px;
        font-weight: 600;
        color: var(--admin-text);
        margin: 0;
    }

/* NAVIGATION */
.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-item {
    padding: 12px 10px;
    margin: 0;
    background: var(--admin-nav-item-bg);
    color: var(--admin-nav-item-text);
    text-decoration: none;
    transition: 0.2s ease;
    font-size: 16px;
}

    .admin-nav-item:hover {
        background: var(--admin-nav-item-hover-bg);
        color: var(--admin-nav-item-hover-text);
    }

    .admin-nav-item.active {
        background: var(--admin-nav-item-active-bg);
        color: var(--admin-nav-item-active-text);
        border-color: var(--color-accent-border);
    }

/* LOGOUT BUTTON */
.admin-logout {
    margin: 30px 20px 10px 20px;
}

.logout-btn {
    display: block;
    padding: 12px;
    background: var(--admin-logout-bg);
    color: var(--admin-logout-text);
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    transition: 0.2s ease;
}

    .logout-btn:hover {
        background: var(--admin-logout-bg-hover);
    }

/* CONTENT WRAPPER */
.admin-page {
    flex: 1 1 auto;
    padding: 10px 10px 10px 40px;
    margin: 0;
    background: var(--color-main-bg);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

    .admin-page h1,
    .admin-title {
        font-size: 32px;
        margin-bottom: 25px;
        font-weight: 600;
        max-width: 900px;
    }

/* HEADER ROW */
.admin-header-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

    .admin-header-row .admin-title {
        margin: 0;
    }

    .admin-header-row .admin-btn.save {
        margin-top: 4px;
        width: 160px;
        height: 34px;
        font-size: 16px;
        font-weight: 500;
    }

/* CARDS */
.admin-card {
    background: var(--card-admin-bg);
    padding: 25px;
    border-radius: 14px;
    margin-bottom: 30px;
    border: 1px solid var(--admin-border);
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

    .admin-card:hover {
        background: var(--card-admin-hover-bg);
    }

    .admin-card h2 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: 600;
    }

/* FORMS */
.admin-form {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    box-sizing: border-box;
}

label {
    display: block;
    margin-bottom: 2px;
    margin-top: 6px;
    font-size: 14px;
    color: var(--admin-text-muted);
}

/* GLOBAL FIELD STYLING (inputs + selects) */
.admin-input,
.admin-select {
    margin: 5px 2px;
    padding: 10px;
    background: var(--admin-input-bg);
    border: 1px solid var(--admin-input-border);
    border-radius: 8px;
    color: var(--admin-input-text);
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 450px;
}

    .admin-input:focus,
    .admin-select:focus,
    textarea.admin-input:focus {
        outline: 2px solid var(--admin-focus-ring);
        border-color: var(--admin-input-focus-border);
    }

/* TEXTAREA — wider, but still controlled */
textarea.admin-input {
    background: var(--admin-input-bg);
    border: 1px solid var(--admin-input-border);
    border-radius: 8px;
    color: var(--admin-input-text);
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 650px;
    resize: vertical;
}

/* ROWS */
.admin-row {
    display: flex;
    gap: 20px;
}

    .admin-row > div {
        flex: 1;
    }

    .admin-row .admin-phone,
    .admin-row .admin-state,
    .admin-row .admin-zip {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

/* FIX SPECIAL FIELD WIDTHS */
input.admin-input.admin-phone {
    width: 140px;
    max-width: 140px;
}

input.admin-input.admin-state {
    width: 60px;
    max-width: 60px;
    text-transform: uppercase;
}

input.admin-input.admin-zip {
    width: 100px;
    max-width: 100px;
}

/* Slideshow numeric fields */
input[type="number"].admin-input {
    width: 130px;
    max-width: 130px;
}

/* Dropdowns for layouts, navigation, etc. */
select.admin-select {
    width: 210px;
    max-width: 210px;
}

.admin-divider {
    margin: 20px 0;
    width: 60%;
    border: 0;
    border-top: 1px solid var(--admin-input-border);
}

/* CHECKBOX */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-checkbox {
    transform: scale(1.4);
    margin-right: 6px;
}

/* MEDIA GRID */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* Base item */
.media-item {
    background: var(--card-admin-bg);
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 10px;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
    position: relative;
}

    .media-item img {
        width: 100%;
        border-radius: 8px;
    }

.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 48px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    background: var(--admin-btn-bg);
    color: var(--admin-btn-text);
}

    /* DANGER */
    .admin-btn.danger {
        background: var(--admin-danger);
        color: #fff;
        border-color: var(--admin-danger);
    }

        .admin-btn.danger:hover {
            background: #ff6b6b;
        }

    /* SMALL */
    .admin-btn.small {
        padding: 4px 12px;
        height: auto;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        margin-bottom: 1px;
        line-height: normal;
    }

        .admin-btn.small:not(.danger):hover {
            background: var(--admin-btn-bg-hover);
            color: var(--admin-btn-text);
        }

.inline-form button.admin-btn.small {
    padding: 4px 12px;
    height: 28px;
    line-height: 1;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SAVE (Secondary Button) */
.admin-btn.save {
    background: var(--admin-btn-secondary-bg);
    color: var(--admin-btn-secondary-text);
    border-color: var(--admin-btn-secondary-bg);
    width: 260px;
    max-height: 50px;
    font-size: 22px;
    font-weight: 700;
}

    .admin-btn.save:hover {
        background: var(--admin-btn-secondary-hover);
    }

/* Action buttons */
.media-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}

    .media-actions .media-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--admin-btn-bg);
        color: var(--admin-btn-text);
        border-radius: 8px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        padding: 6px 12px;
        height: auto;
        line-height: normal;
    }

        .media-actions .media-btn:hover {
            background: var(--admin-btn-bg-hover);
        }

    .media-actions a {
        color: var(--admin-unselected-button);
        font-size: 40px;
        text-decoration: none;
        line-height: 1;
    }

        .media-actions a.active {
            color: var(--admin-selected-button);
        }

/* DRAGGING STATE — lifted, shadowed, obvious */
.media-item.dragging {
    opacity: 0.6;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    cursor: grabbing;
}

/* DROP TARGET — clear visual placeholder */
.media-item.over {
    border: 2px dashed #888;
    background: rgba(0,0,0,0.05);
}

/* LOGIN PAGE */
.login-page {
    background: var(--color-body-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-box {
    background: var(--card-admin-bg);
    padding: 40px;
    border-radius: 14px;
    border: 1px solid var(--card-admin-border);
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--shadow-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .login-box h1 {
        color: var(--admin-text-special);
        margin-top: 0;
        margin-bottom: 25px;
        font-size: 28px;
        font-weight: 600;
    }

.login-form {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 25px;
}

    .login-form label {
        font-size: 20px;
        font-synthesis-weight: 600;
    }

.login-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-btn-bg);
    color: var(--admin-btn-text);
    border-radius: 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    height: 50px;
    padding: 0 30px;
    width: 80%;
    max-width: 80%;
}

    .login-btn:hover {
        background: var(--admin-btn-bg-hover);
    }

.toggle-pass {
    width: 60px;
    padding: 6px 8px;
    font-size: 14px;
    background: var(--admin-btn-bg);
    color: var(--admin-btn-text);
    border: 1px solid var(--admin-input-border);
    border-radius: 6px;
    cursor: pointer;
}

    .toggle-pass:hover {
        background: var(--admin-btn-bg-hover);
    }

/* ALERTS */
.admin-error,
.admin-success,
.admin-warning {
    text-align: center;
    width: 300px;
    max-width: 300px;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.admin-error {
    background: var(--admin-danger-bg);
    color: var(--admin-danger);
    border: 1px solid var(--admin-danger);
}

.admin-success {
    background: var(--admin-success-bg);
    color: var(--admin-success);
    border: 1px solid var(--admin-success);
}

.admin-warning {
    background: var(--admin-warning-bg);
    color: var(--admin-warning);
    border: 1px solid var(--admin-warning);
}

.inline-form {
    display: inline-block;
    margin: 0;
}

    .inline-form .small-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--admin-btn-bg);
        color: var(--admin-btn-text);
        border-radius: 8px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        padding: 6px 10px;
        height: auto;
        line-height: normal;
    }

        .inline-form .small-btn:hover {
            background: var(--admin-btn-bg-hover);
        }

/* TABLE */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

    .admin-table th,
    .admin-table td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--admin-border);
        text-align: left;
    }

    .admin-table th {
        background: var(--card-admin-alt);
        font-weight: 600;
    }

/* FOOTER */
.admin-footer {
    width: 100%;
    flex-shrink: 0;
    padding: 12px 30px;
    background: var(--admin-sidebar-bg);
    border-top: 1px solid var(--admin-border);
    color: var(--admin-text-muted);
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    margin-top: 0;
}

    .admin-footer p {
        margin: 0;
        opacity: 0.8;
        letter-spacing: 0.3px;
    }

/* RESPONSIVE */
@media (max-width: 800px) {

    .admin-wrapper {
        flex-direction: column;
    }

    .admin-sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .admin-page {
        padding: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex: 1;
    }

    .admin-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

        .admin-cards .admin-card {
            position: relative;
            left: 0;
            margin: 0;
            max-width: none;
            padding: 10px 40px 5px 20px;
        }

            .admin-cards .admin-card:nth-child(2) {
                top: -40px;
                left: 0;
                z-index: 2;
            }

            .admin-cards .admin-card:nth-child(3) {
                top: -80px;
                left: 0;
                z-index: 3;
            }
}

/* WIDE LAYOUT FOR ADMIN FORM PANELS */
@media (min-width: 1600px) {

    .admin-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }

    .settings-page .settings-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }

        .settings-page .settings-form .admin-card {
            flex: 1 1 calc(33.333% - 20px);
            max-width: calc(33.333% - 20px);
            margin-bottom: 20px;
        }
}