/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f3f4f6;

    color:
        #222;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.top-bar {
    background:
        #20242b;

    color:
        #fff;

    padding:
        14px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.top-bar h1 {
    margin:
        0;

    font-size:
        20px;
}


.top-bar span {
    display:
        block;

    margin-top:
        2px;

    font-size:
        12px;

    color:
        #b9bec7;
}


.logout-link {
    color:
        #fff;

    text-decoration:
        none;

    border:
        1px solid #555c66;

    border-radius:
        6px;

    padding:
        8px 12px;

    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| MAIN
|--------------------------------------------------------------------------
*/

.admin-container {
    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        20px;
}


/*
|--------------------------------------------------------------------------
| COLLECTION TABS
|--------------------------------------------------------------------------
*/

.collection-tabs {
    display:
        flex;

    gap:
        10px;

    margin-bottom:
        18px;
}


.collection-tab {
    flex:
        1;

    border:
        0;

    border-radius:
        8px;

    padding:
        14px;

    background:
        #dfe3e8;

    color:
        #475569;

    font-size:
        16px;

    font-weight:
        bold;

    cursor:
        pointer;
}


.collection-tab.active {
    background:
        #334155;

    color:
        #fff;
}


.count {
    display:
        inline-block;

    min-width:
        24px;

    margin-left:
        5px;

    padding:
        2px 7px;

    border-radius:
        20px;

    background:
        rgba(255,255,255,.22);

    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| COLLECTION PANELS
|--------------------------------------------------------------------------
*/

.collection-panel {
    display:
        none;

    background:
        #fff;

    border-radius:
        10px;

    padding:
        18px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}


.collection-panel.active {
    display:
        block;
}


.crop-card {
    background:
        #fff;

    border-radius:
        10px;

    padding:
        18px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}


/*
|--------------------------------------------------------------------------
| SECTION HEADING
|--------------------------------------------------------------------------
*/

.section-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        12px;
}


.section-heading h2 {
    margin:
        0 0 5px;
}


.section-heading p {
    margin:
        0;

    color:
        #777;

    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| MANAGER ACTIONS
|--------------------------------------------------------------------------
*/

.manager-actions {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        16px;

    min-height:
        30px;
}


.archive-link {
    display:
        inline-block;

    text-decoration:
        none;

    color:
        #475569;

    font-size:
        13px;

    font-weight:
        bold;

    padding:
        7px 11px;

    background:
        #e2e8f0;

    border-radius:
        6px;
}


.archive-count {
    display:
        inline-block;

    margin-left:
        4px;

    padding:
        2px 6px;

    background:
        #fff;

    border-radius:
        20px;
}


.order-status {
    color:
        #64748b;

    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.primary-button,
.secondary-button {
    border-radius:
        7px;

    padding:
        11px 16px;

    font-size:
        14px;

    font-weight:
        bold;

    cursor:
        pointer;
}


.primary-button {
    border:
        0;

    background:
        #334155;

    color:
        #fff;
}


.primary-button:disabled {
    opacity:
        .5;

    cursor:
        default;
}


.secondary-button {
    border:
        1px solid #bbb;

    background:
        #fff;

    color:
        #444;
}


/*
|--------------------------------------------------------------------------
| MEDIA GRID
|--------------------------------------------------------------------------
*/

.media-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        16px;
}


.media-card {
    background:
        #fff;

    border:
        1px solid #ddd;

    border-radius:
        10px;

    overflow:
        hidden;

    transition:
        opacity .15s,
        transform .15s;
}


.media-card.dragging {
    opacity:
        .65;

    transform:
        scale(.97);

    border:
        2px solid #2563eb;
}


/*
|--------------------------------------------------------------------------
| MEDIA IMAGE
|--------------------------------------------------------------------------
*/

.media-preview {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        5 / 8;

    background:
        #000;

    overflow:
        hidden;
}


.drag-area {
    cursor:
        default;

    touch-action:
        pan-y;
}


.media-preview img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    pointer-events:
        none;
}


.drag-indicator {
    position:
        absolute;

    right:
        7px;

    top:
        7px;

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(0,0,0,.65);

    color:
        #fff;

    border-radius:
        6px;

    font-size:
        17px;

    cursor:
        move;

    touch-action:
        none;

    pointer-events:
        auto;
}


/*
|--------------------------------------------------------------------------
| ACTIVE MEDIA ACTIONS
|--------------------------------------------------------------------------
*/

.media-actions {
    padding:
        8px;
}


.archive-button {
    width:
        100%;

    border:
        0;

    border-radius:
        6px;

    padding:
        9px;

    background:
        #f1f5f9;

    color:
        #475569;

    font-weight:
        bold;

    cursor:
        pointer;
}


/*
|--------------------------------------------------------------------------
| ARCHIVE ACTIONS
|--------------------------------------------------------------------------
*/

.archive-actions {
    display:
        flex;

    gap:
        6px;

    padding:
        8px;
}


.restore-button,
.delete-button {
    flex:
        1;

    border:
        0;

    border-radius:
        6px;

    padding:
        9px 5px;

    font-weight:
        bold;

    cursor:
        pointer;
}


.restore-button {
    background:
        #dcfce7;

    color:
        #166534;
}


.delete-button {
    background:
        #fee2e2;

    color:
        #991b1b;
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.empty-state {
    grid-column:
        1 / -1;

    border:
        2px dashed #d3d6db;

    border-radius:
        10px;

    padding:
        50px 20px;

    text-align:
        center;

    color:
        #777;
}


.empty-state strong {
    display:
        block;

    color:
        #444;

    margin-bottom:
        5px;
}


.empty-state p {
    margin-bottom:
        0;
}


/*
|--------------------------------------------------------------------------
| CROPPER
|--------------------------------------------------------------------------
*/

.crop-section {
    display:
        none;

    margin-top:
        20px;
}


.crop-section.visible {
    display:
        block;
}


.crop-heading {
    text-align:
        center;

    margin-bottom:
        16px;
}


.crop-heading h2 {
    margin:
        0 0 5px;

    font-size:
        19px;
}


.crop-heading p {
    margin:
        0;

    color:
        #777;

    font-size:
        13px;
}


.crop-workspace {
    display:
        flex;

    justify-content:
        center;

    width:
        100%;

    padding:
        15px 0;
}


/*
|--------------------------------------------------------------------------
| TABLET PREVIEW FRAME
|--------------------------------------------------------------------------
*/

.tablet-frame {
    width:
        240px;

    height:
        384px;

    max-width:
        60vw;

    background:
        #000;

    border:
        2px solid #333;

    border-radius:
        4px;

    overflow:
        hidden;

    touch-action:
        none;
}


#crop-canvas {
    display:
        block;

    width:
        100%;

    height:
        100%;

    background:
        #000;

    touch-action:
        none;

    cursor:
        move;
}


/*
|--------------------------------------------------------------------------
| CROP ACTIONS
|--------------------------------------------------------------------------
*/

.crop-actions {
    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        15px;
}


.crop-actions button {
    min-width:
        120px;
}


.upload-status {
    min-height:
        18px;

    margin-top:
        5px;

    color:
        #555;

    font-size:
        13px;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| COMPOSITE MENU
|--------------------------------------------------------------------------
*/

.composite-preview-card {
    margin-bottom:
        25px;
}


.composite-preview-card > .media-preview {
    width:
        240px;

    max-width:
        100%;

    margin:
        0 auto 12px;
}


.composite-status {
    text-align:
        center;

    margin-bottom:
        25px;
}


.composite-status strong {
    display:
        block;

    margin-bottom:
        4px;
}


.composite-status p {
    margin:
        0;

    color:
        #777;

    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| COMPOSITE REGION EDITOR
|--------------------------------------------------------------------------
*/

.composite-region-editor {
    margin-top:
        20px;

    padding-top:
        20px;

    border-top:
        1px solid #e2e8f0;
}


.composite-editor-heading {
    margin-bottom:
        15px;
}


.composite-editor-heading h3 {
    margin:
        0 0 5px;

    font-size:
        18px;
}


.composite-editor-heading p {
    margin:
        0;

    color:
        #777;

    font-size:
        13px;
}


.composite-editor-layout {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;
}


/*
|--------------------------------------------------------------------------
| COMPOSITE EDITOR IMAGE
|--------------------------------------------------------------------------
*/

.composite-region-canvas {
    position:
        relative;

    flex:
        0 0 300px;

    width:
        300px;

    max-width:
        100%;

    aspect-ratio:
        5 / 8;

    background:
        #000;

    border:
        2px solid #333;

    overflow:
        hidden;

    touch-action:
        none;

    cursor:
        crosshair;
}


#composite-region-image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;
}


.composite-region-layer {
    position:
        absolute;

    left:
        0;

    top:
        0;

    right:
        0;

    bottom:
        0;

    touch-action:
        none;
}


/*
|--------------------------------------------------------------------------
| COMPOSITE REGION CONTROLS
|--------------------------------------------------------------------------
*/

.composite-editor-controls {
    flex:
        1;

    min-width:
        0;
}


.composite-editor-controls label {
    display:
        block;

    margin-bottom:
        6px;

    font-size:
        13px;

    font-weight:
        bold;
}


#composite-menu-target {
    width:
        100%;

    padding:
        10px;

    border:
        1px solid #ccc;

    border-radius:
        6px;

    background:
        #fff;

    font-size:
        14px;
}


.composite-region-status {
    min-height:
        20px;

    margin:
        10px 0;

    color:
        #64748b;

    font-size:
        13px;
}


.composite-region-actions {
    display:
        flex;

    gap:
        8px;

    margin-bottom:
        20px;
}


.composite-region-actions button {
    flex:
        1;
}


.composite-existing-heading {
    padding-top:
        15px;

    border-top:
        1px solid #e2e8f0;

    margin-bottom:
        10px;
}


.composite-region-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


/*
|--------------------------------------------------------------------------
| COMPOSITE REGION BOXES
|--------------------------------------------------------------------------
*/

.composite-region-box {
    position:
        absolute;

    border:
        2px solid #2563eb;

    background:
        rgba(37,99,235,.18);

    pointer-events:
        none;
}


.composite-region-box.pending {
    border-style:
        dashed;

    background:
        rgba(37,99,235,.10);
}


/*
|--------------------------------------------------------------------------
| COMPOSITE REGION LIST
|--------------------------------------------------------------------------
*/

.composite-region-list-item {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        8px 10px;

    background:
        #f8fafc;

    border:
        1px solid #e2e8f0;

    border-radius:
        6px;

    font-size:
        12px;
}


.composite-region-list-item span {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.composite-region-remove {
    flex:
        0 0 auto;

    border:
        0;

    border-radius:
        5px;

    padding:
        6px 9px;

    background:
        #fee2e2;

    color:
        #991b1b;

    font-size:
        12px;

    font-weight:
        bold;

    cursor:
        pointer;
}


.composite-region-empty {
    color:
        #777;

    font-size:
        12px;

    padding:
        8px 0;
}


/*
|--------------------------------------------------------------------------
| LOGIN
|--------------------------------------------------------------------------
*/

.login-page {
    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;
}


.login-card {
    width:
        100%;

    max-width:
        380px;

    background:
        #fff;

    border-radius:
        12px;

    padding:
        30px;

    box-shadow:
        0 4px 20px rgba(0,0,0,.12);
}


.login-card h1 {
    margin:
        0;

    text-align:
        center;
}


.login-subtitle {
    margin:
        5px 0 25px;

    text-align:
        center;

    color:
        #777;
}


.login-card label {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        13px;

    font-weight:
        bold;
}


.login-card input {
    width:
        100%;

    margin-bottom:
        18px;

    padding:
        12px;

    border:
        1px solid #ccc;

    border-radius:
        6px;

    font-size:
        16px;
}


.login-card .primary-button {
    width:
        100%;
}


.error-message {
    margin-bottom:
        18px;

    padding:
        10px;

    border-radius:
        6px;

    background:
        #fee2e2;

    color:
        #991b1b;

    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| PHONE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {


    .composite-editor-layout {
        flex-direction:
            column;

        align-items:
            center;
    }


    .composite-region-canvas {
        flex:
            none;

        width:
            260px;

        max-width:
            80vw;
    }


    .composite-editor-controls {
        width:
            100%;
    }

    .admin-container {
        padding:
            12px;
    }


    .collection-panel,
    .crop-card {
        padding:
            12px;
    }


    .section-heading {
        align-items:
            flex-start;

        gap:
            10px;
    }


    .section-heading h2 {
        font-size:
            18px;
    }


    .collection-tab {
        padding:
            12px 8px;

        font-size:
            15px;
    }


    .media-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            10px;
    }


    .tablet-frame {
        width:
            220px;

        height:
            352px;

        max-width:
            58vw;
    }


    .crop-actions {
        margin-bottom:
            20px;
    }
}


/*
|--------------------------------------------------------------------------
| LARGE SCREEN
|--------------------------------------------------------------------------
*/

@media (min-width: 900px) {

    .tablet-frame {
        width:
            300px;

        height:
            480px;
    }
}