/* ============================================================
   DATABASE EDITOR - ADMIN STYLES
   ============================================================

   These styles are intentionally separated from style.css.

   The public search interface and the administration interface
   serve different purposes:

       Search
           browse/read inventory

       Admin
           create/edit/delete structured data

   The visual design aims to resemble a modern desktop management
   application while still remaining responsive in the browser.
*/


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

.admin-page {

    min-height:
        100vh;

    background:
        #f4f5f7;

    color:
        #1f2328;
}



.admin-main {

    width:
        min(
            1500px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        32px 0 48px;
}



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

.admin-header {

    background:
        #ffffff;

    border-bottom:
        1px solid #d8dadd;
}



.admin-header-inner {

    width:
        min(
            1500px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        24px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        32px;
}



.admin-header h1 {

    margin:
        0 0 4px;

    font-size:
        2rem;
}



.admin-header p {

    margin:
        0;

    color:
        #666;
}



.admin-home-link {

    text-decoration:
        none;

    color:
        #222;

    font-weight:
        600;

    white-space:
        nowrap;
}



/* ============================================================
   MAIN TABS
   ============================================================ */

.admin-tabs {

    display:
        flex;

    gap:
        8px;

    margin-bottom:
        24px;

    padding:
        6px;

    background:
        #e8eaed;

    border-radius:
        10px;

    width:
        fit-content;
}



.admin-tab {

    border:
        0;

    background:
        transparent;

    padding:
        10px 18px;

    border-radius:
        8px;

    cursor:
        pointer;

    font-size:
        1rem;

    font-weight:
        600;
}



.admin-tab.is-active {

    background:
        #ffffff;

    box-shadow:
        0 1px 4px rgb(0 0 0 / 12%);
}



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

.admin-section {

    background:
        #ffffff;

    border:
        1px solid #d8dadd;

    border-radius:
        12px;

    padding:
        24px;
}



.admin-section-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;
}



.admin-section-header h2 {

    margin:
        0 0 6px;

    font-size:
        1.5rem;
}



.admin-section-header p {

    margin:
        0;

    color:
        #666;
}



/* ============================================================
   TOOLBARS
   ============================================================ */

.admin-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        18px;
}



.admin-search-input {

    flex:
        1;

    min-width:
        220px;

    padding:
        11px 13px;

    border:
        1px solid #c9ccd1;

    border-radius:
        8px;

    font-size:
        1rem;
}



.admin-count {

    color:
        #666;

    white-space:
        nowrap;
}



/* ============================================================
   BUTTONS
   ============================================================ */

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

    border:
        0;

    border-radius:
        7px;

    cursor:
        pointer;

    font-size:
        0.95rem;

    font-weight:
        600;

    padding:
        9px 14px;
}



.admin-primary-button {

    background:
        #1f6feb;

    color:
        #ffffff;
}



.admin-secondary-button {

    background:
        #e8eaed;

    color:
        #222;
}



.admin-danger-button {

    background:
        #cf222e;

    color:
        #ffffff;
}



.admin-action-button {

    background:
        #eef1f4;

    color:
        #222;

    padding:
        6px 10px;
}



.admin-action-button.delete {

    color:
        #b42318;
}



.admin-primary-button:hover,
.admin-secondary-button:hover,
.admin-danger-button:hover,
.admin-action-button:hover {

    filter:
        brightness(0.96);
}


.admin-primary-button:focus-visible,
.admin-secondary-button:focus-visible,
.admin-danger-button:focus-visible,
.admin-action-button:focus-visible,
.admin-tab:focus-visible,
.reference-tab:focus-visible,
.dialog-close-button:focus-visible,
.admin-home-link:focus-visible,
.login-back-link a:focus-visible {

    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        2px;
}


/* ============================================================
   DISABLED BUTTON STATE
   ============================================================ */

/*
    Database operations may take a moment.

    Disabled buttons clearly indicate that the current action is
    already being processed and also prevent accidental duplicate
    submissions.
*/
.admin-primary-button:disabled,
.admin-secondary-button:disabled,
.admin-danger-button:disabled,
.admin-action-button:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

    filter:
        none;
}


/* ============================================================
   TABLES
   ============================================================ */

.admin-table-wrapper {

    overflow-x:
        auto;

    border:
        1px solid #d8dadd;

    border-radius:
        10px;
}



.admin-table {

    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        850px;
}



.admin-table th,
.admin-table td {

    text-align:
        left;

    padding:
        12px 14px;

    border-bottom:
        1px solid #eceef0;

    vertical-align:
        middle;
}



.admin-table th {

    background:
        #f6f8fa;

    font-size:
        0.9rem;

    color:
        #50555b;
}



.admin-table tbody tr:hover {

    background:
        #f8fafc;
}



.admin-table td:last-child {

    white-space:
        nowrap;
}



.admin-actions {

    display:
        flex;

    gap:
        8px;
}



/* ============================================================
   PAGINATION
   ============================================================ */

/*
    The inventory can contain more than one thousand records.

    Only one page is rendered at a time, while this toolbar lets
    the user move through the filtered result set.
*/
.admin-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        18px;
}



.pagination-info {

    color:
        #666;

    font-size:
        0.95rem;
}



.pagination-controls {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}



.pagination-size-label {

    color:
        #555;

    font-weight:
        600;
}



.pagination-size-select {

    padding:
        8px 10px;

    border:
        1px solid #c9ccd1;

    border-radius:
        7px;

    background:
        #ffffff;

    font:
        inherit;
}



.pagination-page {

    min-width:
        105px;

    text-align:
        center;

    color:
        #555;

    font-weight:
        600;
}



/*
    Disabled navigation buttons remain visible but clearly show
    that there is no page available in that direction.
*/
.admin-pagination button:disabled {

    opacity:
        0.45;

    cursor:
        not-allowed;
}



/* ============================================================
   REFERENCE TABS
   ============================================================ */

.reference-tabs {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        18px;
}



.reference-tab {

    border:
        1px solid #c9ccd1;

    background:
        #ffffff;

    padding:
        8px 14px;

    border-radius:
        999px;

    cursor:
        pointer;
}



.reference-tab.is-active {

    background:
        #1f2328;

    color:
        #ffffff;

    border-color:
        #1f2328;
}



.reference-title {

    font-size:
        1.1rem;

    font-weight:
        700;
}



/* ============================================================
   DIALOGS
   ============================================================ */

.admin-dialog {

    width:
        min(
            760px,
            calc(100% - 32px)
        );

    max-height:
        90vh;

    overflow-y:
        auto;

    border:
        0;

    border-radius:
        14px;

    padding:
        0;

    box-shadow:
        0 16px 60px rgb(0 0 0 / 28%);
}



.admin-dialog-small {

    width:
        min(
            480px,
            calc(100% - 32px)
        );
}



.admin-dialog::backdrop {

    background:
        rgb(0 0 0 / 45%);
}



.admin-dialog form,
.admin-dialog > div {

    padding:
        24px;
}



.dialog-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        22px;
}



.dialog-header h2 {

    margin:
        0;
}



.dialog-close-button {

    border:
        0;

    background:
        transparent;

    font-size:
        1.8rem;

    cursor:
        pointer;

    line-height:
        1;
}



/* ============================================================
   FORMS
   ============================================================ */

.form-grid {

    display:
        grid;

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

    gap:
        18px;
}



.form-grid label,
.admin-dialog label {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    font-weight:
        600;
}



.form-grid input,
.form-grid select,
.form-grid textarea,
.admin-dialog-small input {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        10px 11px;

    border:
        1px solid #c9ccd1;

    border-radius:
        7px;

    font:
        inherit;

    background:
        #ffffff;
}



.form-field-wide {

    grid-column:
        1 / -1;
}



.dialog-actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        24px;
}



/* ============================================================
   ITEM PHOTO SECTION
   ============================================================ */

/*
    Separates photo management visually from the normal inventory
    fields.

    The section provides preview, file selection, Upload / Replace
    and Remove actions for an existing inventory item.

    It spans both columns of the desktop form grid so the photograph
    has enough horizontal space for a useful preview.
*/
.item-photo-section {

    grid-column:
        1 / -1;

    margin-top:
        24px;

    padding-top:
        22px;

    border-top:
        1px solid #d9dde3;
}



.item-photo-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        14px;
}



.item-photo-title {

    margin:
        0 0 4px;

    font-size:
        1.1rem;
}



.item-photo-description {

    margin:
        0;

    color:
        #666;

    font-size:
        0.9rem;
}



/* ------------------------------------------------------------
   PHOTO PREVIEW
   ------------------------------------------------------------ */

/*
    A fixed preview area avoids layout jumps when photographs have
    different dimensions or aspect ratios.
*/
.item-photo-preview-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        220px;

    margin-bottom:
        16px;

    padding:
        12px;

    overflow:
        hidden;

    border:
        1px solid #d6d9de;

    border-radius:
        10px;

    background:
        #f5f6f8;
}



.item-photo-preview {

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    max-height:
        320px;

    object-fit:
        contain;

    border-radius:
        6px;
}



/* ------------------------------------------------------------
   PHOTO FILE SELECTOR
   ------------------------------------------------------------ */

.item-photo-controls {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        8px;
}



.item-photo-file-label {

    font-weight:
        600;
}



.item-photo-file-input {

    max-width:
        100%;

    font:
        inherit;
}



.item-photo-status {

    margin:
        2px 0 0;

    color:
        #666;

    font-size:
        0.9rem;
}


/* ------------------------------------------------------------
   PHOTO ACTION BUTTON
   ------------------------------------------------------------ */

/*
    Upload / Replace is kept separate from the normal Item Save
    operation.

    The button becomes enabled only after the user selects a valid
    local image.
*/
.item-photo-action-button {

    margin-top:
        8px;
}


/*
    Keep the button visually clear when no local image has been
    selected yet.
*/
.item-photo-action-button:disabled {

    cursor:
        not-allowed;

    opacity:
        0.55;
}


/* ============================================================
   MESSAGES
   ============================================================ */

.admin-message {

    margin-bottom:
        20px;

    padding:
        12px 15px;

    border-radius:
        8px;

    border:
        1px solid transparent;
}



.admin-message.success {

    background:
        #dafbe1;

    border-color:
        #2da44e;

    color:
        #116329;
}



.admin-message.error {

    background:
        #ffebe9;

    border-color:
        #cf222e;

    color:
        #82071e;
}



/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.visually-hidden {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;
}



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

/*
    On smaller screens the Database Editor changes from a
    desktop-oriented layout to a single-column layout.

    The photo preview is also reduced slightly so it does not
    occupy too much vertical space on mobile devices.
*/
@media (
    max-width:
        800px
) {

    .item-photo-preview-wrapper {

        min-height:
            180px;
    }


    .item-photo-preview {

        max-height:
            260px;
    }


    .admin-main,
    .admin-header-inner {

        width:
            min(
                100% - 24px,
                1500px
            );
    }


    .admin-section {

        padding:
            16px;
    }


    .admin-section-header,
    .admin-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .form-grid {

        grid-template-columns:
            1fr;
    }


    .form-field-wide {

        grid-column:
            auto;
    }


    .admin-primary-button {

        width:
            100%;
    }


    .admin-pagination {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .pagination-controls {

        flex-wrap:
            wrap;

        justify-content:
            space-between;
    }
}



/* ==================================================================
   ADMIN LOGIN
   ==================================================================

   The login page intentionally reuses the visual language of the
   Database Editor.

   A centred card keeps the interface simple and works well on both
   desktop and mobile devices.
   ================================================================== */


.admin-login-page {
    min-height: 100vh;
    background: #f3f4f6;
}


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

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

    padding: 24px;
}


.login-card {
    width: 100%;
    max-width: 430px;

    background: #ffffff;

    border: 1px solid #d1d5db;
    border-radius: 14px;

    padding: 32px;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.08);
}


.login-card-header {
    margin-bottom: 24px;
}


.login-card-header h1 {
    margin: 0 0 8px;
}


.login-card-header p {
    margin: 0;

    color: #5f6368;
}


.login-card .admin-form-group {
    margin-bottom: 18px;
}


.login-card .admin-form-group label {
    display: block;

    margin-bottom: 6px;

    font-weight: 600;
}


.login-card .admin-form-group input {
    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #c7cdd4;
    border-radius: 7px;

    font: inherit;
}


.login-card .admin-form-group input:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}


.login-submit-button {
    width: 100%;

    margin-top: 4px;

    padding: 11px 16px;
}


.login-back-link {
    margin-top: 22px;

    text-align: center;
}


.login-back-link a {
    color: #333333;
    text-decoration: none;

    font-weight: 600;
}


.login-back-link a:hover {
    text-decoration: underline;
}


/*
    Keep error messages visually separated from the form.
*/
.login-card .admin-message {
    margin-bottom: 18px;
}


/* ------------------------------------------------------------------
   Mobile adjustments
   ------------------------------------------------------------------ */

@media (max-width: 600px) {

    .login-page-container {
        align-items: flex-start;

        padding: 20px 14px;
    }


    .login-card {
        margin-top: 40px;

        padding: 24px 20px;
    }
}


/* ==================================================================
   ADMIN HEADER AUTHENTICATION CONTROLS
   ================================================================== */

.admin-header-content {

    flex:
        1;

    min-width:
        0;
}


.admin-header-content h1 {
    margin-bottom: 4px;
}


.admin-header-content p {
    margin: 0;
}


/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media (max-width: 700px) {


    .admin-header-inner {

        gap:
            14px;
    }

    #logout-button {
        flex-shrink: 0;
    }
}


/* ============================================================
   ADMIN AUTHENTICATION LOADING STATE
   ============================================================ */

/*
    The Database Editor starts hidden while JavaScript verifies
    the administrator session.

    This prevents protected interface content from briefly
    appearing before an unauthenticated visitor is redirected
    to the login page.
*/
.admin-page.admin-auth-pending {
    visibility: hidden;
}


/* ============================================================
   INPUTS/SELECTS/TEXTAREAS
   ============================================================ */

/*
.admin-search-input:focus-visible,
.pagination-size-select:focus-visible,
.form-grid input:focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible,
.admin-dialog-small input:focus-visible {

    outline:
        2px solid #2563eb;

    outline-offset:
        1px;
}