/* ==========================================
   GLOBAL
========================================== */

* {

    box-sizing:
        border-box;

}


:root {

    --black:
        #0b0b0b;

    --black-light:
        #151515;

    --black-panel:
        #1d1d1d;

    --gold:
        #d4af37;

    --gold-light:
        #f0d878;

    --text:
        #f2f2f2;

    --text-muted:
        #a6a6a6;

    --border:
        #3a321c;

}


/* ==========================================
   BODY
========================================== */

body {

    margin:
        0;

    min-height:
        100vh;

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

    background:
        var(--black);

    color:
        var(--text);

}


/* ==========================================
   NAVIGATION
========================================== */

.dmi-nav {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    width:
        100%;

    min-height:
        64px;

    padding:
        10px 28px;

    background:
        rgba(
            11,
            11,
            11,
            0.97
        );

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

    box-shadow:
        0 4px 18px
        rgba(
            0,
            0,
            0,
            0.35
        );

    backdrop-filter:
        blur(
            8px
        );

}


.dmi-nav a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        9px 15px;

    border:
        1px solid
        transparent;

    border-radius:
        6px;

    color:
        var(--gold);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        0.02em;

    text-decoration:
        none;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;

}


.dmi-nav a:hover {

    background:
        #24200f;

    border-color:
        var(--gold);

    color:
        var(--gold-light);

    transform:
        translateY(
            -1px
        );

}


.dmi-nav a:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset:
        2px;

}


/* Push Logout to the far right while preserving wrapping */
.dmi-nav a:last-child {

    margin-left:
        auto;

    border-color:
        #6f2525;

    color:
        #f0b0b0;

}


.dmi-nav a:last-child:hover {

    background:
        #351313;

    border-color:
        #c54b4b;

    color:
        #ffffff;

}


/* ==========================================
   MAIN CONTAINER
========================================== */

.container {

    max-width:
        1400px;

    margin:
        0 auto;

    padding:
        40px;

}


/* ==========================================
   HEADINGS
========================================== */

h1,
h2,
h3 {

    color:
        var(--gold);

}


h1 {

    margin-top:
        0;

}


/* ==========================================
   STATUS
========================================== */

.status {

    display:
        inline-block;

    padding:
        10px 16px;

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

    border-radius:
        6px;

    background:
        var(--black-panel);

    color:
        var(--gold-light);

    font-weight:
        bold;

}


/* ==========================================
   BRAND GRID
========================================== */

.brand-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                220px,
                1fr
            )
        );

    gap:
        20px;

    margin-top:
        30px;

}


.brand-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        120px;

    padding:
        20px;

    background:
        var(--black-panel);

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

    border-radius:
        8px;

    color:
        var(--gold);

    font-size:
        20px;

    font-weight:
        bold;

    text-decoration:
        none;

    transition:
        0.2s;

}


.brand-card:hover {

    border-color:
        var(--gold);

    background:
        #24200f;

    transform:
        translateY(
            -3px
        );

}


/* ==========================================
   BACK LINK
========================================== */

.back-link {

    display:
        inline-block;

    margin-bottom:
        25px;

    color:
        var(--gold);

    text-decoration:
        none;

}


.back-link:hover {

    color:
        var(--gold-light);

}


/* ==========================================
   PRODUCT LIST
========================================== */

.product-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin-top:
        30px;

}


.product-row {

    display:
        grid;

    grid-template-columns:
        220px
        1fr;

    align-items:
        center;

    padding:
        18px 22px;

    background:
        var(--black-panel);

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

    border-radius:
        6px;

    color:
        var(--text);

    text-decoration:
        none;

    transition:
        0.2s;

}


.product-row:hover {

    border-color:
        var(--gold);

    transform:
        translateX(
            4px
        );

}


.product-number {

    color:
        var(--gold);

    font-weight:
        bold;

}


.product-name {

    color:
        var(--text);

}


/* ==========================================
   PAGE HEADER
========================================== */

.page-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        30px;

}


.page-subtitle {

    margin-top:
        8px;

    color:
        var(--text-muted);

}


/* ==========================================
   SEARCH INPUT
========================================== */

.search-input {

    width:
        280px;

    padding:
        12px 16px;

    background:
        var(--black-panel);

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

    border-radius:
        6px;

    color:
        var(--text);

    font-size:
        15px;

}


.search-input:focus {

    outline:
        none;

    border-color:
        var(--gold);

    box-shadow:
        0 0 0 2px
        rgba(
            212,
            175,
            55,
            0.15
        );

}


.search-input::placeholder {

    color:
        var(--text-muted);

}


/* ==========================================
   NO RESULTS
========================================== */

.no-results {

    padding:
        40px;

    text-align:
        center;

    color:
        var(--text-muted);

    border:
        1px dashed
        var(--border);

    border-radius:
        6px;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (
    max-width:
        850px
) {

    .dmi-nav {

        position:
            static;

        align-items:
            stretch;

        padding:
            10px 14px;

    }


    .dmi-nav a {

        flex:
            1 1
            calc(
                50% - 8px
            );

    }


    .dmi-nav a:last-child {

        margin-left:
            0;

    }


    .container {

        padding:
            24px 18px;

    }


    .page-header {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .search-input {

        width:
            100%;

    }


    .product-row {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }

}


@media (
    max-width:
        500px
) {

    .dmi-nav a {

        flex:
            1 1
            100%;

    }

}


/* ==========================================
   BUTTONS AND FORM CONTROLS
========================================== */

button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


.button-primary,
.button-secondary,
.button-danger {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        11px 18px;

    border-radius:
        6px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        transform 0.2s;

}


.button-primary {

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

    background:
        var(--gold);

    color:
        #111111;

}


.button-primary:hover {

    border-color:
        var(--gold-light);

    background:
        var(--gold-light);

    transform:
        translateY(
            -1px
        );

}


.button-secondary {

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

    background:
        #151515;

    color:
        var(--gold-light);

}


.button-secondary:hover {

    border-color:
        var(--gold);

    background:
        #24200f;

    color:
        #ffffff;

}


.button-danger {

    border:
        1px solid
        #8d3535;

    background:
        #321515;

    color:
        #ffd0d0;

}


.button-danger:hover {

    border-color:
        #d65d5d;

    background:
        #4a1b1b;

    color:
        #ffffff;

}


.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset:
        2px;

}


/* ==========================================
   DETAIL SECTIONS
========================================== */

.detail-section {

    padding:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(
                29,
                29,
                29,
                0.98
            ),
            rgba(
                20,
                20,
                20,
                0.98
            )
        );

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

    border-radius:
        10px;

    box-shadow:
        0 14px 35px
        rgba(
            0,
            0,
            0,
            0.22
        );

}


/* ==========================================
   BRANDS PAGE
========================================== */

.page-header-stat {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    min-width:
        120px;

    padding:
        14px 18px;

    background:
        var(--black-panel);

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

    border-radius:
        8px;

}


.page-header-stat strong {

    color:
        var(--gold-light);

    font-size:
        24px;

    line-height:
        1;

}


.page-header-stat span {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        12px;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

}


.brand-search-panel {

    display:
        grid;

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

    align-items:
        end;

    gap:
        10px 22px;

    margin-bottom:
        26px;

}


.brand-search-panel label {

    grid-column:
        1 / -1;

    color:
        var(--gold-light);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


.brand-search-panel input {

    width:
        100%;

    min-height:
        48px;

    padding:
        12px 16px;

    background:
        #101010;

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

    border-radius:
        7px;

    color:
        var(--text);

    font-size:
        16px;

}


.brand-search-panel input::placeholder {

    color:
        #777777;

}


.brand-search-panel input:focus {

    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(
            212,
            175,
            55,
            0.12
        );

    outline:
        none;

}


.brand-search-results {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        13px;

    white-space:
        nowrap;

}


.brand-card-wrapper {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        280px;

    overflow:
        hidden;

    background:
        linear-gradient(
            160deg,
            #1e1e1e,
            #151515
        );

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

    border-radius:
        10px;

    box-shadow:
        0 10px 25px
        rgba(
            0,
            0,
            0,
            0.2
        );

    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.2s;

}


.brand-card-wrapper::before {

    position:
        absolute;

    top:
        0;

    right:
        0;

    left:
        0;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    content:
        "";

    opacity:
        0.55;

}


.brand-card-wrapper:hover {

    border-color:
        rgba(
            212,
            175,
            55,
            0.65
        );

    box-shadow:
        0 16px 34px
        rgba(
            0,
            0,
            0,
            0.32
        );

    transform:
        translateY(
            -3px
        );

}


.brand-card-wrapper[hidden] {

    display:
        none;

}


.brand-card-wrapper .brand-card {

    justify-content:
        flex-start;

    min-height:
        88px;

    padding:
        24px 20px
        14px;

    background:
        transparent;

    border:
        0;

    border-radius:
        0;

    font-size:
        21px;

    text-align:
        left;

}


.brand-card-wrapper .brand-card:hover {

    background:
        transparent;

    transform:
        none;

}


.brand-usage {

    display:
        grid;

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

    gap:
        8px;

    margin:
        0;

    padding:
        0 20px
        18px;

}


.brand-usage span {

    padding:
        8px 10px;

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

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

    border-radius:
        6px;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.35;

}


.brand-delete-form {

    margin:
        auto 20px 20px;

}


.brand-delete-form button {

    width:
        100%;

}


.brand-in-use-note {

    margin:
        auto 20px 20px;

    padding:
        11px 12px;

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

    border-left:
        3px solid
        #6c5a24;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.45;

}


.brand-no-results {

    margin-top:
        26px;

}


/* ==========================================
   LOGIN PAGE
========================================== */

.login-page {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        calc(
            100vh - 150px
        );

    padding:
        30px 0;

}


.login-card {

    position:
        relative;

    width:
        100%;

    max-width:
        440px;

    overflow:
        hidden;

    padding:
        42px;

    background:
        linear-gradient(
            150deg,
            #202020,
            #141414
        );

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

    border-radius:
        12px;

    box-shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.5
        );

}


.login-card::before {

    position:
        absolute;

    top:
        0;

    right:
        0;

    left:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            var(--gold-light),
            var(--gold),
            transparent
        );

    content:
        "";

}


.login-brand-mark {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    height:
        64px;

    margin:
        0 auto 20px;

    background:
        #121212;

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

    border-radius:
        50%;

    color:
        var(--gold-light);

    font-size:
        17px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    box-shadow:
        0 0 0 7px
        rgba(
            212,
            175,
            55,
            0.06
        );

}


.login-card h1 {

    margin:
        0;

    color:
        var(--gold);

    font-size:
        30px;

    text-align:
        center;

}


.login-subtitle {

    max-width:
        300px;

    margin:
        10px auto 0;

    color:
        var(--text-muted);

    line-height:
        1.5;

    text-align:
        center;

}


.login-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    margin-top:
        30px;

}


.login-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.login-form label {

    color:
        var(--gold-light);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.04em;

}


.login-form input {

    width:
        100%;

    min-height:
        48px;

    padding:
        12px 14px;

    background:
        #0f0f0f;

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

    border-radius:
        7px;

    color:
        var(--text);

    font-size:
        16px;

    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        background 0.2s;

}


.login-form input:hover {

    border-color:
        #62552c;

}


.login-form input:focus {

    background:
        #131313;

    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(
            212,
            175,
            55,
            0.12
        );

    outline:
        none;

}


.login-form button {

    width:
        100%;

    min-height:
        48px;

    margin-top:
        4px;

    font-size:
        16px;

}


/* ==========================================
   BRANDS / LOGIN RESPONSIVE
========================================== */

@media (
    max-width:
        700px
) {

    .page-header-stat {

        align-items:
            flex-start;

        width:
            100%;

    }


    .brand-search-panel {

        grid-template-columns:
            1fr;

    }


    .brand-search-results {

        white-space:
            normal;

    }


    .brand-usage {

        grid-template-columns:
            1fr;

    }


    .login-page {

        min-height:
            auto;

        padding:
            20px 0;

    }


    .login-card {

        padding:
            32px 24px;

    }

}