/*
 * SU Inventory — app-shell theme over Pico.
 *
 * Layout: a fixed plum sidebar (#sidebar) on the left and a cream content
 * panel (#panel) on the right, both floating on a navy page background.
 * Pico is locked to data-theme="light" in page_head.php so the panel chrome
 * stays light regardless of the visitor's system preference.
 */

:root {
    /* Shell palette (matches the approved mockup) */
    --su-navy:          #1e2a47;   /* page background */
    --su-plum:          #4f2543;   /* sidebar top */
    --su-plum-deep:     #371a30;   /* sidebar bottom */
    --su-accent:        #e2772e;   /* orange — primary buttons */
    --su-accent-active: #c14e16;   /* darker orange — active nav pill, hover */
    --su-panel:         #ece5e0;   /* cream content panel */

    /* Surfaces inside the panel */
    --su-bg:            var(--su-panel);
    --su-page:          #ffffff;   /* white surfaces (form inputs, table rows) */
    --su-card:          #ffffff;   /* cards, infobox, fieldsets */
    --su-card-alt:      #f0ebe7;   /* hover, table header band, placeholders */
    --su-card-border:   #e0d9d4;
    --su-divider:       #d6cec9;

    --su-text:          #111111;
    --su-text-muted:    #555555;
    --su-text-faint:    #777777;

    --su-link:          #0d2a52;   /* navy */
    --su-link-hover:    #061838;

    --su-error:         #b00020;
    --su-success:       #2e7d32;

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

html {
    font-size: 85%;  /* 85% of browser default (16px → 12px) — scales all rem units */
}

html, body {
    background: var(--su-navy);
    color: var(--su-text);
    font-family: Arial, Helvetica, sans-serif;
}
body { padding: 0; margin: 0; }

a              { color: var(--su-link); }
a:hover        { color: var(--su-link-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--su-text); font-family: Arial, Helvetica, sans-serif; }
p, li, label, dd, dt   { color: var(--su-text); }
button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }

/* ============================================================
   App shell — sidebar + panel
   ============================================================ */

#app {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.25rem;
    min-height: 100vh;
}

#sidebar {
    flex: 0 0 270px;
    width: 270px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--su-plum), var(--su-plum-deep));
    border-radius: 14px;
    padding: 1.25rem 1rem;
    color: #fff;
}

#panel {
    flex: 1;
    min-width: 0;
    background: var(--su-panel);
    border-radius: 14px;
    padding: 1.5rem 1.75rem 2rem;
    min-height: calc(100vh - 2.5rem);
}

/* --- Sidebar pieces --- */

.side-brand {
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    color: #fff;
    font-weight: bold;
    font-size: 1.05rem;
}
.side-location { font-weight: normal; font-size: .95rem; }

.side-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .35);
    margin: .9rem .25rem 1rem;
}

.side-nav { flex: 1; }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li { margin: 0; }

.side-nav a,
.side-nav .side-disabled {
    display: block;
    padding: .38rem .9rem;
    margin-bottom: .15rem;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: .95rem;
}
.side-nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.side-nav a.active,
.side-nav a.active:hover { background: var(--su-accent-active); color: #fff; }

.side-sub {
    margin: 0 0 .35rem .95rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
    padding-left: .4rem;
}
.side-sub a { font-weight: normal; font-size: .9rem; padding: .26rem .8rem; }

.side-disabled {
    color: rgba(255, 255, 255, .45);
    cursor: default;
}
.side-disabled small { font-weight: normal; font-size: .75rem; }

.side-user {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 10px;
    padding: .6rem .75rem;
}
.side-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ddd;
    color: var(--su-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}
.side-user-meta { min-width: 0; line-height: 1.25; }
.side-user-meta b { color: #fff; display: block; font-size: .95rem; }
.side-user-meta span {
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-user-meta a { color: rgba(255, 255, 255, .9); font-size: .8rem; }
.side-user-meta a:hover { color: #fff; }

/* --- Panel header / toolbar --- */

.panel-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.panel-toolbar input[type="search"] {
    flex: 1;
    min-width: 180px;
    margin: 0;
    padding: .5rem .75rem;
    background: var(--su-page);
    color: var(--su-text);
    border: 1px solid #ccc;
    border-radius: 8px;
}
.panel-toolbar label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    white-space: nowrap;
    color: var(--su-text);
    font-size: .9rem;
}
.panel-toolbar select {
    margin: 0;
    width: auto;
    background: var(--su-page);
    color: var(--su-text);
    border: 1px solid #ccc;
}
.panel-count { color: var(--su-text-muted); font-size: .9rem; white-space: nowrap; }

.panel-title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}
.panel-title .panel-title-note { font-weight: normal; font-size: .9rem; color: var(--su-text-muted); }

.btn-accent {
    display: inline-block;
    background: var(--su-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .5rem 1.1rem;
    font-weight: bold;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
    width: auto;
    margin: 0;
}
.btn-accent:hover { background: var(--su-accent-active); color: #fff; }

.btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--su-text);
    border: none;
    padding: .5rem .6rem;
    font-weight: bold;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
    width: auto;
    margin: 0;
}
.btn-ghost:hover { text-decoration: underline; color: var(--su-text); background: transparent; }

/* ============================================================
   Card grid (items.php, items_by_kit.php)
   ============================================================ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--su-card);
    border: none;
    border-radius: 6px;
    margin: 0;
    padding: .8rem 1rem 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: box-shadow .12s ease;
}
.card:hover,
.card:focus-visible { box-shadow: 0 4px 16px rgba(0, 0, 0, .18); outline: none; }

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}
.card-status { font-size: .85rem; font-weight: bold; }
.card-status.available  { color: var(--su-success); }
.card-status.out        { color: var(--su-error); }
.card-status.nonlending { color: var(--su-text-muted); font-weight: normal; }

.card-kebab {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--su-text-muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: .1rem .35rem;
    margin: 0;
    width: auto;
    cursor: pointer;
}
.card-kebab:hover { color: var(--su-text); background: none; }

.card-media {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}
.card-media img { max-width: 100%; max-height: 170px; object-fit: contain; }
.card-noimage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--su-card-alt);
    color: var(--su-text-muted);
    border-radius: 4px;
    font-size: .9rem;
}

.card-name {
    margin: auto 0 0;
    font-size: 1rem;
    font-weight: bold;
    color: var(--su-text);
    line-height: 1.3;
}
.card-sub { font-size: .8rem; color: var(--su-text-muted); margin-top: .2rem; }

/* ============================================================
   Detail modal
   ============================================================ */

/* Pico makes the <dialog> itself a fullscreen overlay; the panel is its <article>. */
dialog#cardModal > article {
    max-width: 780px;
    width: 92%;
    border: none;
    border-radius: 12px;
    padding: 0;
    background: var(--su-page);
    color: var(--su-text);
}

.modal-close-row { display: flex; justify-content: flex-end; padding: .5rem .6rem 0; }
.modal-close {
    background: none;
    border: none;
    color: var(--su-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    padding: .2rem .5rem;
    margin: 0;
    width: auto;
    cursor: pointer;
}
.modal-close:hover { color: var(--su-text); background: none; }

.modal-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem;
}
.modal-media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.modal-media img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 6px; }

.modal-info { min-width: 0; }
.modal-status { font-size: .9rem; font-weight: bold; }
.modal-status.available  { color: var(--su-success); }
.modal-status.out        { color: var(--su-error); }
.modal-status.nonlending { color: var(--su-text-muted); font-weight: normal; }

.modal-title { margin: .25rem 0 .9rem; font-size: 1.3rem; }

.modal-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem 1rem;
    margin: 0 0 1.1rem;
    font-size: .92rem;
}
.modal-fields dt { font-weight: bold; color: var(--su-text); }
.modal-fields dd { margin: 0; color: var(--su-text); }

.modal-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.modal-actions form { margin: 0; }

@media (max-width: 640px) {
    .modal-body { grid-template-columns: 1fr; }
}

/* ============================================================
   Errors and status
   ============================================================ */

.error,
span.error,
td.error,
h3.error,
h4.error { color: var(--su-error); }

#content { padding-block: 0 1rem; }

/* ============================================================
   Infobox (items_detail.php)
   ============================================================ */

#infobox {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    background: var(--su-card);
    color: var(--su-text);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--su-card-border);
    border-radius: 8px;
    min-height: 240px;
}
#infobox a               { color: var(--su-link); }
#infobox a:hover         { color: var(--su-link-hover); }
#infobox h2              { margin: 0; font-size: 1.25rem; color: var(--su-text); }
#infobox h3              { margin: .25rem 0 0; font-size: 1rem; font-weight: normal; color: var(--su-text); }
#infobox .infobox-text,
#infobox > :not(img):not(.infobox-text) {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
}
#infobox img {
    order: -1;
    flex-shrink: 0;
    align-self: stretch;
    width: auto;
    height: auto;
    max-height: 320px;
    max-width: 320px;
    object-fit: cover;
    border-radius: 6px;
}

@media (max-width: 640px) {
    #infobox { flex-direction: column; min-height: 0; }
    #infobox img {
        height: auto;
        max-height: 220px;
        max-width: 100%;
        align-self: flex-start;
    }
}

/* ============================================================
   Tables (.table2 + .datatable)
   ============================================================ */

table.table2,
table.datatable {
    width: 100%;
    background: var(--su-page);
    color: var(--su-text);
    border: 1px solid var(--su-card-border);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}
table.table2 thead,
table.datatable thead {
    background: var(--su-card-alt);
}
table.table2 tbody,
table.datatable tbody {
    background: var(--su-page);
}
table.table2 th,
table.datatable th {
    color: var(--su-text);
    font-weight: 600;
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--su-divider);
}
table.table2 th a,
table.datatable th a {
    color: var(--su-link);
    text-decoration: none;
}
table.table2 td,
table.datatable td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--su-card-border);
    color: var(--su-text);
    vertical-align: middle;
}
table.table2 tbody tr:last-child td,
table.datatable tbody tr:last-child td {
    border-bottom: none;
}
table.table2 tbody tr:hover,
table.datatable tbody tr:hover {
    background: var(--su-card-alt);
}
table.table2 a,
table.datatable a { color: var(--su-link); }
table.table2 a:hover,
table.datatable a:hover { color: var(--su-link-hover); }
table.table2 td.error,
table.datatable td.error { color: var(--su-error); font-weight: 600; }
table img { max-width: 50px; height: auto; vertical-align: middle; }

/* DataTables container + controls */
div.dt-container { color: var(--su-text); }
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    background: var(--su-page);
    color: var(--su-text);
    border: 1px solid #ccc;
    padding: .25rem .5rem;
    margin: 0 .25rem;
}
div.dt-container .dt-paging button {
    color: var(--su-link) !important;
    background: var(--su-page) !important;
}
div.dt-container .dt-paging button.current {
    background: var(--su-card-alt) !important;
}

/* ============================================================
   Forms
   ============================================================ */

form ol, form ul { list-style: none; padding: 0; margin: 0; }
form ol li, form ul li { margin-bottom: .75rem; }

form fieldset {
    background: var(--su-card);
    color: var(--su-text);
    border: 1px solid var(--su-card-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
form fieldset legend  { font-weight: 600; color: var(--su-text); }
form fieldset label   { color: var(--su-text); }
form fieldset a       { color: var(--su-link); }
form fieldset h4      { color: var(--su-text); margin: .25rem 0; }

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form input[type="number"],
form input[type="search"],
form input[type="date"],
form input[type="url"],
form input[type="file"],
form select,
form textarea {
    background: var(--su-page);
    color: var(--su-text);
    border: 1px solid #ccc;
}
form input::placeholder,
form textarea::placeholder { color: var(--su-text-faint); }

.hint { color: var(--su-text-muted); font-size: .85rem; }
.hidden { display: none; }

/* ============================================================
   Danger zone (items_detail.php) — delete item flow
   ============================================================ */

.danger-zone {
    background: #fff5f5;
    color: var(--su-text);
    border: 1px solid #f1c4c4;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 1rem;
}
.danger-zone h3 {
    margin: 0 0 .5rem;
    color: var(--su-error);
    font-size: 1.05rem;
}
.danger-zone ul { margin: .25rem 0 .75rem 1.25rem; }
.danger-zone .delete-button {
    background: var(--su-error);
    color: #fff;
    border: 1px solid var(--su-error);
    border-radius: 4px;
    padding: .4rem .9rem;
    cursor: pointer;
    font-weight: 600;
}
.danger-zone .delete-button:hover { background: #8c0019; border-color: #8c0019; }
.danger-zone .cancel-link {
    margin-left: 1rem;
    color: var(--su-link);
    text-decoration: none;
}
.danger-zone .cancel-link:hover { text-decoration: underline; }

/* Top-of-page flash banner (set via $_SESSION['flash']) */
.flash {
    background: #eafaf0;
    color: #1f4a2c;
    border: 1px solid #b8e0c8;
    border-radius: 6px;
    padding: .6rem .85rem;
    margin: 0 0 1rem;
}

/* ============================================================
   Responsive — stack sidebar above panel on narrow screens
   ============================================================ */

@media (max-width: 860px) {
    #app { flex-direction: column; padding: .75rem; }
    #sidebar {
        position: static;
        width: auto;
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
    }
    #panel { min-height: 0; padding: 1rem; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    table { font-size: .9rem; }
    th, td { padding: .4rem .3rem; }
}