/* Shared design tokens and typography across public, account, and admin views.
   Loaded after each page's original styles so legacy component fonts cannot diverge. */
:root {
    --archive-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --archive-font-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --archive-paper: #eee5d1;
    --archive-sheet: #f9f3e6;
    --archive-forest: #243f30;
    --archive-forest-dark: #182e24;
    --archive-line: #c8b99b;
}
/* Include Bootstrap components, gallery explorer navigation, administration tables,
   modal content, authentication forms and elements styled with font shorthand. */
body, body :is(button, input, select, textarea, option, label, table, caption, thead, tbody, tfoot, tr, th, td,
    .explorer-sidebar, .explorer-sidebar *, .explorer-content, .explorer-content *,
    .classic-sidebar, .classic-sidebar *, .classic-table, .classic-table *,
    .admin-users, .admin-users *, .classic-workspace, .classic-workspace *,
    .modal, .modal *, .dropdown-menu, .dropdown-menu *, .btn, .nav-link,
    .form-control, .form-select, .account-card, .account-card *,
    .perforated-header, .perforated-header *, .perforated-discover, .perforated-discover *) {
    font-family: var(--archive-font-body) !important;
}
/* The same serif treatment is used for headings and site branding everywhere. */
body :is(h1, h2, h3, h4, h5, h6, .collection-heading, .sidebar-label,
    .classic-title h2, .classic-brand strong, .account-brand strong,
    .perforated-brand-copy strong, .perforated-intro-title, .type-intro-page h2,
    .perforated-discover h2) {
    font-family: var(--archive-font-heading) !important;
}
/* Explorer and admin table styling shares the site's forest-and-paper palette. */
.explorer-sidebar { background: var(--archive-sheet); border-color: var(--archive-line); }
.explorer-sidebar .sidebar-label { background: var(--archive-forest); color: #fff8e7; }
.explorer-sidebar .collection-tabs > .nav-link { color: var(--archive-forest-dark); border-bottom-color: var(--archive-line); }
.admin-page :is(.classic-table, .admin-users) { font-family: var(--archive-font-body) !important; }
.admin-page :is(.classic-table, .admin-users) th { background: #eae0ca; color: var(--archive-forest); }
.admin-page :is(.classic-table, .admin-users) td { border-bottom-color: var(--archive-line); }

/* Unified interactive components. Keep tab, icon, link and destructive controls distinct. */
:root {
    --archive-control-bg: #fffdf7;
    --archive-control-border: #b5a887;
    --archive-control-radius: 6px;
    --archive-control-focus: #9e8555;
}
body :is(button, input, select, textarea, .btn, .form-control, .form-select, .admin-button, .gallery-search),
body :is(button, input, select, textarea)::placeholder {
    font-family: var(--archive-font-body) !important;
    font-size: inherit;
}
body :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea, .form-control, .form-select) {
    color: var(--archive-forest-dark);
    background-color: var(--archive-control-bg);
    border: 1px solid var(--archive-control-border);
    border-radius: var(--archive-control-radius);
    accent-color: var(--archive-forest);
}
body :is(input, select, textarea, button, .btn, .admin-button, a):focus-visible {
    outline: 2px solid var(--archive-control-focus);
    outline-offset: 2px;
}
body :is(input, select, textarea):disabled { opacity: .65; cursor: not-allowed; }
body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--archive-forest); }
body input[type="file"] { color: var(--archive-forest-dark); font-family: var(--archive-font-body) !important; }
body input[type="file"]::file-selector-button {
    font-family: var(--archive-font-body) !important;
    background: var(--archive-sheet);
    color: var(--archive-forest-dark);
    border: 1px solid var(--archive-control-border);
    border-radius: var(--archive-control-radius);
    padding: .45rem .8rem;
    margin-right: .7rem;
    cursor: pointer;
}
body :is(button, .btn, .admin-button, input[type="submit"], input[type="button"], input[type="reset"]) {
    font-family: var(--archive-font-body) !important;
    border-radius: var(--archive-control-radius);
}
/* Filled actions only: do not overwrite sidebar tabs, modal close buttons or text links. */
body :is(.admin-button, .btn-primary, button[type="submit"], input[type="submit"]) {
    background-color: var(--archive-forest);
    border-color: var(--archive-forest);
    color: #fffdf7;
}
body :is(.admin-button, .btn-primary, button[type="submit"], input[type="submit"]):hover:not(:disabled) {
    background-color: var(--archive-forest-dark);
    border-color: var(--archive-forest-dark);
    color: #fffdf7;
}
body :is(.btn-secondary, .btn-outline-secondary, button[type="reset"], input[type="reset"]) {
    background-color: var(--archive-sheet);
    border-color: var(--archive-control-border);
    color: var(--archive-forest-dark);
}
body :is(.btn-danger, .classic-delete button, button[data-action="delete"]) {
    background-color: #a63e35;
    border-color: #a63e35;
    color: #fff;
}
body :is(button, .btn, .admin-button):disabled { opacity: .55; cursor: not-allowed; }
body :is(.modal-content, .dropdown-menu) {
    background-color: var(--archive-sheet);
    color: var(--archive-forest-dark);
    border-color: var(--archive-line);
}
body :is(.table, .classic-table, .admin-users) :is(th, td, button, input, select) {
    font-family: var(--archive-font-body) !important;
}
body .explorer-sidebar :is(button, input, select, a),
body .classic-sidebar :is(button, input, select, a) {
    font-family: var(--archive-font-body) !important;
}

/* Final consistency refinements: gallery navigation, compact account forms, preview metadata. */
.explorer-sidebar .sidebar-menulink {
    background: var(--archive-forest);


}
.explorer-sidebar .sidebar-menulink a,
.explorer-sidebar .sidebar-menulink a:visited {


    text-underline-offset: 3px;
}

/* Scope compact sizing to account pages; do not shrink the admin workspace. */
.account-page:not(.admin-page) {
    padding: 1rem;
}
.account-page:not(.admin-page) > .account-card {
    width: min(100%, 420px);
    padding: 1.35rem 1.6rem;
}
.account-page:not(.admin-page) .account-brand img {
    width: 44px;
    height: 44px;
}
.account-page:not(.admin-page) .account-brand strong {
    font-size: 1.15rem;
}
.account-page:not(.admin-page) .account-card h1 {
    font-size: 1.45rem;
    margin: .8rem 0;
}
.account-page:not(.admin-page) .account-card label {
    margin: .65rem 0 .2rem;
}
.account-page:not(.admin-page) .account-card :is(input, select) {
    padding: .52rem .65rem;
}
.account-page:not(.admin-page) .account-card button[type="submit"] {
    margin-top: .8rem;
    padding: .55rem 1rem;
}
.account-page:not(.admin-page) .account-back {
    margin-top: .9rem;
}
.archive-preview-details dd {
    font-size: .875rem;
    line-height: 1.45;
}
@media (max-width: 480px) {
    .account-page:not(.admin-page) > .account-card {
        padding: 1.1rem;
    }
}

/* September refinements: exact sidebar colour and slightly smaller preview heading. */
.explorer-sidebar .sidebar-menulink { background-color: #8da597; color: #182e24; }
.explorer-sidebar .sidebar-menulink a,
.explorer-sidebar .sidebar-menulink a:visited { color: #182e24; text-decoration-color: #294b39; }
.explorer-sidebar .sidebar-menulink a:hover,
.explorer-sidebar .sidebar-menulink a:focus-visible { color: #10261b; }
#imagePreviewDetailsTitle { font-size: clamp(1.25rem, 2vw, 1.75rem); }

/* Explicitly size the authentication card to its content, not the viewport.
   These rules do not affect the administration dashboard. */
body.account-page:not(.admin-page) {
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
body.account-page:not(.admin-page) > .account-card {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    height: auto;
    min-height: 0;
    max-height: none;
    width: min(100%, 420px);
    padding: 1rem 1.4rem;
}
body.account-page:not(.admin-page) .account-card h1 { margin: .55rem 0; }
body.account-page:not(.admin-page) .account-card label { margin: .45rem 0 .15rem; }
body.account-page:not(.admin-page) .account-card :is(input, select) { padding: .4rem .6rem; }
body.account-page:not(.admin-page) .account-card button[type="submit"] { margin-top: .55rem; padding: .45rem .85rem; }
body.account-page:not(.admin-page) .account-back { margin-top: .55rem; }
@media (max-width: 480px) {
    body.account-page:not(.admin-page) > .account-card { padding: .9rem 1rem; }
}

/* Gallery-only refinements: quieter navigation and one integrated search control. */
.explorer-sidebar .sidebar-menulink { font-size: 14px; padding: 13px 12px; line-height: 1.35; }
.explorer-sidebar .sidebar-label { font-size: 23px; padding: 15px 15px; gap: 9px; line-height: 1.2; }
.explorer-sidebar .sidebar-label span { font-size: 22px; }
.explorer-sidebar .collection-tabs { padding: 7px 10px 12px; }
.explorer-sidebar .collection-tabs > .nav-link {
    font-size: 15px; line-height: 1.35; gap: 9px; padding: 10px 9px;
}
.explorer-sidebar .collection-tabs > .nav-link::before { font-size: 16px; }
.explorer-sidebar .collection-count { font-size: 11px; }
.explorer-content .gallery-search-wrap {
    display: flex; align-items: center; gap: 9px;
    flex: 0 1 245px; width: 245px; min-width: 180px;
    padding: 0 12px; min-height: 42px;
    background: #fffdf7; border: 1px solid #c6b79a;
    border-radius: 7px; box-shadow: none;
}
.explorer-content .gallery-search-wrap .gallery-search-icon {
    flex: 0 0 17px; width: 17px; height: 17px;
    color: #536a5a; display: block;
}
body .explorer-content .gallery-search-wrap input.gallery-search {
    flex: 1 1 auto; display: block; width: 100%; min-width: 0;
    height: 40px; padding: 0; margin: 0;
    border: 0; border-radius: 0; outline: none; box-shadow: none;
    background: transparent; background-color: transparent;
    color: #243f30; font-size: 14px; line-height: 1.4;
    appearance: none; -webkit-appearance: none;
}
body .explorer-content .gallery-search-wrap input.gallery-search:focus { outline: none; box-shadow: none; }
.explorer-content .gallery-search-wrap:focus-within {
    border-color: #536a5a; outline: 2px solid #8da597;
    outline-offset: 2px; box-shadow: none;
}
body .explorer-content .gallery-search-wrap input.gallery-search::placeholder { color: #756f63; opacity: 1; font-size: 14px; }
@media (max-width: 760px) {
    .explorer-content .gallery-search-wrap { flex: 1 1 auto; width: 100%; min-width: 0; }
}

/* Gallery search: the wrapper owns the only visible border. */
body .explorer-content .gallery-search-wrap input.gallery-search,
body .explorer-content .gallery-search-wrap input.gallery-search:hover,
body .explorer-content .gallery-search-wrap input.gallery-search:focus,
body .explorer-content .gallery-search-wrap input.gallery-search:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}


/* Consistent native-select replacement: keep the dropdown indicator away from the edge. */
body select,
body .form-select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 2.65rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23244a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .9rem center !important;
    background-size: 12px 8px !important;
}