/* ==========================================================================
   Colosian Markets — Admin
   ========================================================================== */

.admin-page {
    --admin-border: rgba(255, 255, 255, 0.07);
    --admin-border-strong: rgba(255, 255, 255, 0.11);
    --admin-surface: rgba(255, 255, 255, 0.018);
    --admin-surface-hover: rgba(255, 255, 255, 0.028);
    --admin-muted: rgba(255, 255, 255, 0.42);

    display: grid;
    gap: 0.75rem;
}


/* ==========================================================================
   Admin terminal hub
   ========================================================================== */

.admin-page--hub {
    gap: 0.6rem;
}

.admin-terminal-console {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid var(--admin-border);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.008);
}


/* ==========================================================================
   Terminal console bar
   ========================================================================== */

.admin-terminal-console__bar {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        0 0.8rem;

    border-bottom:
        1px solid var(--admin-border);

    background:
        rgba(255, 255, 255, 0.012);

    color:
        var(--admin-muted);

    font-size: 0.58rem;
    font-weight: 650;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.admin-terminal-console__identity {
    display: flex;
    align-items: center;

    gap: 0.45rem;

    min-width: 0;
}

.admin-terminal-console__divider {
    color:
        rgba(255, 255, 255, 0.18);
}

.admin-terminal-console__meta {
    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}

.admin-terminal-console__status {
    width: 6px;
    height: 6px;

    flex:
        0 0 6px;

    display: inline-block;

    border-radius: 50%;

    background:
        #20c997;

    box-shadow:
        0 0 8px rgba(32, 201, 151, 0.28);
}


/* ==========================================================================
   Terminal module grid
   ========================================================================== */

.admin-terminal-grid {
    display: grid;

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

    min-width: 0;
}


/* ==========================================================================
   Terminal module
   ========================================================================== */

.admin-terminal-module {
    min-width: 0;
    min-height: 205px;

    display: grid;

    grid-template-rows:
        auto 1fr auto;

    padding: 0;

    appearance: none;

    cursor: pointer;

    text-align: left;

    color:
        var(--color-text);

    border: 0;

    border-right:
        1px solid var(--admin-border);

    border-radius: 0;

    background:
        transparent;

    transition:
        background 140ms ease;
}

.admin-terminal-module:last-child {
    border-right: 0;
}

.admin-terminal-module:hover {
    background:
        rgba(255, 255, 255, 0.018);
}

.admin-terminal-module:focus-visible {
    outline:
        1px solid rgba(255, 255, 255, 0.28);

    outline-offset:
        -1px;
}


/* ==========================================================================
   Terminal module top line
   ========================================================================== */

.admin-terminal-module__top {
    min-height: 32px;

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 0.55rem;

    padding:
        0 0.72rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);

    color:
        var(--admin-muted);

    font-size: 0.54rem;
    font-weight: 650;

    line-height: 1;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.admin-terminal-module__number {
    color:
        rgba(255, 255, 255, 0.24);

    font-variant-numeric:
        tabular-nums;
}

.admin-terminal-module__code {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-terminal-module__state {
    color:
        rgba(32, 201, 151, 0.82);

    font-size: 0.5rem;
}


/* ==========================================================================
   Terminal module body
   ========================================================================== */

.admin-terminal-module__body {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    align-items: start;

    gap: 0.8rem;

    padding:
        1rem 0.8rem;
}

.admin-terminal-module__symbol {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border:
        1px solid var(--admin-border-strong);

    border-radius: 5px;

    background:
        rgba(255, 255, 255, 0.018);

    color:
        rgba(255, 255, 255, 0.76);

    font-size: 0.68rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.04em;
}

.admin-terminal-module__content {
    min-width: 0;
}

.admin-terminal-module__content h2 {
    margin:
        0 0 0.42rem;

    color:
        var(--color-text);

    font-size: 0.88rem;
    font-weight: 650;

    line-height: 1.25;

    letter-spacing: -0.015em;
}

.admin-terminal-module__content p {
    max-width: 290px;

    margin: 0;

    color:
        var(--admin-muted);

    font-size: 0.67rem;
    font-weight: 450;

    line-height: 1.5;
}


/* ==========================================================================
   Terminal module footer
   ========================================================================== */

.admin-terminal-module__footer {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    padding:
        0 0.75rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.045);

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.54rem;
    font-weight: 650;

    line-height: 1;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    transition:
        color 140ms ease,
        background 140ms ease;
}

.admin-terminal-module:hover .admin-terminal-module__footer {
    color:
        rgba(255, 255, 255, 0.82);

    background:
        rgba(255, 255, 255, 0.012);
}


/* ==========================================================================
   Terminal console footer
   ========================================================================== */

.admin-terminal-console__footer {
    min-height: 32px;

    display: flex;
    align-items: center;

    gap: 1rem;

    padding:
        0 0.8rem;

    border-top:
        1px solid var(--admin-border);

    color:
        rgba(255, 255, 255, 0.28);

    background:
        rgba(255, 255, 255, 0.008);

    font-size: 0.52rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.admin-terminal-console__footer-status {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    margin-left: auto;

    color:
        rgba(32, 201, 151, 0.7);
}


/* ==========================================================================
   Asset grid

   Desktop terminal layout:
   three creator assets per row.
   ========================================================================== */

.admin-assets-grid {
    display: grid;

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

    gap: 0.75rem;

    align-items: start;
}


/* ==========================================================================
   Asset card
   ========================================================================== */

.admin-asset-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 0;

    overflow: hidden;

    border:
        1px solid var(--admin-border);

    border-radius: 14px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.008));
}


/* ==========================================================================
   Asset card header
   ========================================================================== */

.admin-asset-card .market-table-card__header {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0.7rem 0.8rem;

    border-bottom:
        1px solid var(--admin-border);

    background:
        rgba(255, 255, 255, 0.012);
}

.admin-asset-card .market-table-card__title {
    margin: 0;

    font-size: 0.82rem;
    font-weight: 650;

    line-height: 1.25;

    letter-spacing: -0.01em;
}


/* ==========================================================================
   Form layout
   ========================================================================== */

.admin-asset-card .buy-sell-form-layout {
    display: grid;

    gap: 0;

    padding: 0;
}

.admin-asset-card .buy-sell-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);
}


/* ==========================================================================
   Fields
   ========================================================================== */

.admin-asset-card .tools-field {
    min-width: 0;

    display: grid;

    gap: 0.3rem;

    padding:
        0.62rem 0.7rem;

    border-right:
        1px solid rgba(255, 255, 255, 0.045);

    background:
        transparent;
}

.admin-asset-card .tools-field:last-child {
    border-right: 0;
}

.admin-asset-card .tools-field__label {
    margin: 0;

    color:
        var(--admin-muted);

    font-size: 0.58rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.admin-asset-card .tools-input {
    width: 100%;
    min-width: 0;

    min-height: 34px;

    padding:
        0.45rem 0.55rem;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius: 7px;

    outline: none;

    background:
        rgba(255, 255, 255, 0.018);

    color:
        var(--color-text);

    font-size: 0.72rem;

    transition:
        border-color 140ms ease,
        background 140ms ease;
}

.admin-asset-card .tools-input:hover {
    border-color:
        rgba(255, 255, 255, 0.1);
}

.admin-asset-card .tools-input:focus {
    border-color:
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.026);
}


/* ==========================================================================
   Read-only price
   ========================================================================== */

.admin-readonly-field {
    display: flex;
    align-items: center;

    min-height: 34px;

    padding:
        0.45rem 0.55rem;

    box-sizing: border-box;

    cursor: default;

    color:
        var(--color-text);

    font-size: 0.78rem;
    font-weight: 650;

    border:
        1px solid rgba(255, 255, 255, 0.045);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.012);
}


/* ==========================================================================
   Historic prices
   ========================================================================== */

.admin-history-block {
    display: grid;

    gap: 0;

    min-width: 0;

    padding:
        0.65rem 0.7rem 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);
}

.admin-history-block>.tools-field__label {
    margin-bottom: 0.5rem;
}

.admin-history-list {
    display: block;

    max-height: 118px;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding-right: 0.3rem;
}

.admin-history-row {
    display: grid;

    grid-template-columns:
        minmax(72px, 0.7fr) minmax(0, 1fr);

    align-items: center;

    gap: 0.5rem;

    min-height: 25px;

    padding:
        0.18rem 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.035);

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

    font-size: 0.67rem;

    line-height: 1.2;
}

.admin-history-row:first-child {
    border-top: 0;
}

.admin-history-row span:first-child {
    color:
        var(--color-text);

    font-variant-numeric:
        tabular-nums;
}

.admin-history-row span:last-child {
    color:
        var(--admin-muted);

    text-align: right;
}


/* ==========================================================================
   Asset footer
   ========================================================================== */

.admin-asset-card__footer {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: 0.65rem;

    min-height: 52px;

    margin: 0;

    padding:
        0.55rem 0.7rem;
}

.admin-asset-card__status {
    min-width: 0;

    min-height: 0;

    margin: 0;

    font-size: 0.66rem;

    line-height: 1.3;
}

.admin-asset-card__status--empty {
    visibility: hidden;
}

.admin-asset-card__footer .tools-form-actions,
.admin-asset-card__footer .buy-sell-form-actions {
    display: flex;

    margin: 0;
    padding: 0;
}

.admin-asset-card__footer .button {
    min-height: 32px;

    padding:
        0.45rem 0.7rem;

    border-radius: 7px;

    font-size: 0.66rem;
    font-weight: 650;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================================
   Add asset / general admin forms
   ========================================================================== */

.admin-page .buy-sell-metrics-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* ==========================================================================
   Scrollbars
   ========================================================================== */

.admin-history-list {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.12) transparent;
}

.admin-history-list::-webkit-scrollbar {
    width: 5px;
}

.admin-history-list::-webkit-scrollbar-track {
    background:
        transparent;
}

.admin-history-list::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.1);
}

.admin-history-list::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 255, 255, 0.16);
}


/* ==========================================================================
   Responsive — medium desktop / laptop
   ========================================================================== */

@media (max-width: 1050px) {

    .admin-terminal-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .admin-terminal-module__body {
        grid-template-columns:
            34px minmax(0, 1fr);

        gap: 0.6rem;
    }

    .admin-terminal-module__symbol {
        width: 34px;
        height: 34px;
    }

    .admin-assets-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================================
   Responsive — tablet
   ========================================================================== */

@media (max-width: 820px) {

    .admin-terminal-grid {
        grid-template-columns: 1fr;
    }

    .admin-terminal-module {
        min-height: 150px;

        border-right: 0;

        border-bottom:
            1px solid var(--admin-border);
    }

    .admin-terminal-module:last-child {
        border-bottom: 0;
    }

    .admin-terminal-console__footer {
        flex-wrap: wrap;

        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}


/* ==========================================================================
   Responsive — mobile
   ========================================================================== */

@media (max-width: 700px) {

    .admin-terminal-console__bar {
        align-items: flex-start;

        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .admin-terminal-console__identity {
        flex-wrap: wrap;
    }

    .admin-terminal-console__meta {
        display: none;
    }

    .admin-terminal-module__body {
        grid-template-columns:
            36px minmax(0, 1fr);
    }

    .admin-terminal-module__symbol {
        width: 36px;
        height: 36px;
    }

    .admin-terminal-console__footer {
        gap: 0.6rem;
    }

    .admin-terminal-console__footer-status {
        width: 100%;

        margin-left: 0;
    }

    .admin-assets-grid {
        grid-template-columns: 1fr;
    }

    .admin-page .buy-sell-metrics-grid {
        grid-template-columns: 1fr;
    }

    .admin-asset-card .buy-sell-form-row {
        grid-template-columns: 1fr;
    }

    .admin-asset-card .tools-field {
        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.04);
    }

    .admin-asset-card .tools-field:last-child {
        border-bottom: 0;
    }

    .admin-asset-card__footer {
        grid-template-columns: 1fr;
    }

    .admin-asset-card__footer .button {
        width: 100%;
    }
}