/**
 * ============================================================================
 * MLDB Library System
 * Page Styles
 * ============================================================================
 */


/* ============================================================================
   Item Details
   ============================================================================ */

.item-details {
    max-width: 900px;

    margin: 0 auto;

    padding: 40px 24px 60px;
}

.item-details__back {
    display: inline-block;

    margin-bottom: 24px;

    color: inherit;

    text-decoration: none;
}

.item-details__back:hover {
    text-decoration: underline;
}


/* ============================================================================
   Item Header
   ============================================================================ */

.item-details__header {
    margin-bottom: 32px;
}

.item-details__header h1 {
    margin: 0;

    font-size: 32px;

    line-height: 1.2;
}

.item-details__subtitle {
    margin: 10px 0 0;

    color: #666;

    font-size: 18px;
}


/* ============================================================================
   Metadata
   ============================================================================ */

.item-details__metadata {
    border-top: 1px solid #ddd;
}

.item-details__row {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid #eee;
}

.item-details__row strong {
    font-weight: 600;
}

.item-details__row span {
    color: #333;
}


/* ============================================================================
   Content Sections
   ============================================================================ */

.item-details__section {
    margin-top: 40px;
}

.item-details__section h2 {
    margin: 0 0 16px;

    font-size: 22px;
}

.item-details__section p {
    margin: 0;

    color: #333;

    line-height: 1.6;
}


/* ============================================================================
   Electronic Version
   ============================================================================ */

.item-file {
    padding-top: 32px;

    border-top: 1px solid #ddd;
}

.item-file__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


/* ============================================================================
   Item Error
   ============================================================================ */

.item-error {
    max-width: 700px;

    margin: 80px auto;

    padding: 40px 24px;

    box-sizing: border-box;

    text-align: center;

    background: #ffffff;

    border: 1px solid #ddd;

    border-radius: 10px;
}

.item-error h1 {
    margin-bottom: 16px;

    font-size: 28px;
}

.item-error p {
    margin-bottom: 24px;

    color: #555;
}

.item-error a {
    display: inline-block;

    color: #222;

    text-decoration: none;
}

.item-error a:hover {
    text-decoration: underline;
}


/* ============================================================================
   Dashboard
   ============================================================================ */

.dashboard {
    display: grid;

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

    gap: 24px;

    margin-top: 32px;
}

.dashboard__card {
    padding: 28px;

    background: #ffffff;

    border: 1px solid #ddd;

    border-radius: 10px;
}

.dashboard__card h2 {
    margin: 0 0 12px;

    font-size: 24px;
}

.dashboard__card p {
    margin: 0 0 24px;

    color: #555;

    line-height: 1.5;
}

.dashboard__card .button {
    display: inline-block;
}


/* ============================================================================
   Librarian Items
   ============================================================================ */

.librarian-items {
    padding: 32px 0 60px;
}


/* ============================================================================
   Librarian Items — Page Header
   ============================================================================ */

.librarian-items-page__header {
    align-items: flex-end;

    margin-bottom: 24px;
}

.librarian-items-page__header h1 {
    margin: 0;

    color: #172033;

    font-size: 30px;

    line-height: 1.2;
}

.librarian-items-page__header p {
    margin: 8px 0 0;

    color: #718096;

    font-size: 14px;
}

.librarian-items-page__add-button {
    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 18px;

    box-sizing: border-box;

    border: 1px solid #315ea8;

    border-radius: 8px;

    background: #315ea8;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.librarian-items-page__add-button:hover {
    background: #274f8f;

    border-color: #274f8f;
}


/* ============================================================================
   Workspace
   ============================================================================ */

.librarian-items-page__workspace {
    width: 100%;
}


/* ============================================================================
   Toolbar
   ============================================================================ */

.librarian-items-page
.librarian-items__toolbar {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    margin-bottom: 14px;
}


/* ============================================================================
   Controls Wrapper
   ----------------------------------------------------------------------------
   Панель "Колонки" знаходиться у звичайному потоці сторінки.
   При відкритті вона розсуває таблицю вниз і не перекриває її.
   ============================================================================ */

.librarian-items-page
.librarian-items__controls-wrapper {
    width: 100%;
}


/* ============================================================================
   Controls
   ============================================================================ */

.librarian-items-page
.librarian-items__controls {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    margin-bottom: 14px;
}


/* ============================================================================
   Active / Archived Tabs
   ============================================================================ */

.librarian-items-page
.librarian-items__status-buttons {
    display: flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;
}

.librarian-items-page
.librarian-items__status-buttons
.button {
    min-height: 40px;

    padding: 0 16px;

    box-sizing: border-box;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


/* ============================================================================
   Search
   ============================================================================ */

.librarian-items-page
.librarian-items__search {
    flex: 1 1 auto;

    width: 100%;

    min-width: 180px;

    height: 42px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #d7deea;

    border-radius: 8px;

    background: #ffffff;

    color: #243047;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.librarian-items-page
.librarian-items__search::placeholder {
    color: #9aa6b8;
}

.librarian-items-page
.librarian-items__search:hover {
    border-color: #c2cada;
}

.librarian-items-page
.librarian-items__search:focus {
    border-color: #7c9ee8;

    box-shadow:
        0 0 0 3px rgba(
            124,
            158,
            232,
            0.12
        );
}


/* ============================================================================
   Sorting / Per Page
   ============================================================================ */

.librarian-items-page
.librarian-items__sort,

.librarian-items-page
.librarian-items__per-page {
    height: 42px;

    box-sizing: border-box;

    padding: 0 34px 0 12px;

    border: 1px solid #d7deea;

    border-radius: 8px;

    background: #ffffff;

    color: #344054;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.librarian-items-page
.librarian-items__sort {
    width: 165px;
}

.librarian-items-page
.librarian-items__per-page {
    width: 145px;
}

.librarian-items-page
.librarian-items__sort:hover,

.librarian-items-page
.librarian-items__per-page:hover {
    border-color: #c2cada;
}

.librarian-items-page
.librarian-items__sort:focus,

.librarian-items-page
.librarian-items__per-page:focus {
    border-color: #7c9ee8;

    box-shadow:
        0 0 0 3px rgba(
            124,
            158,
            232,
            0.12
        );
}


/* ============================================================================
   Columns Button
   ============================================================================ */

.librarian-items-page
#columns-button {
    height: 42px;

    padding: 0 15px;

    box-sizing: border-box;

    border-radius: 8px;

    white-space: nowrap;

    cursor: pointer;
}


/* ============================================================================
   Columns Panel
   ----------------------------------------------------------------------------
   Панель є частиною звичайного потоку сторінки.
   При відкритті вона розсуває таблицю вниз і не перекриває її.
   ============================================================================ */

.librarian-items-page
.librarian-items__columns-panel {
    position: static;

    display: none;

    width: 100%;

    margin: 0 0 14px;

    padding: 16px 18px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 12px;

    box-shadow:
        0 4px 16px rgba(
            15,
            23,
            42,
            0.06
        );
}

.librarian-items-page
.librarian-items__columns-panel.is-open {
    display: block;
}


/* ----------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__columns-header {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;

    padding-bottom: 10px;

    border-bottom: 1px solid #edf0f4;
}


.librarian-items-page
.librarian-items__columns-title {
    color: #25364d;

    font-size: 13px;

    font-weight: 650;
}


.librarian-items-page
.librarian-items__columns-description {
    margin: 0;

    color: #8a95a3;

    font-size: 11px;

    line-height: 1.3;

    text-align: right;
}


/* ----------------------------------------------------------------------------
   List
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__columns-list {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 8px;
}


/* ----------------------------------------------------------------------------
   Option
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__column-option {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 34px;

    padding: 5px 9px;

    box-sizing: border-box;

    border: 1px solid #e5e9ef;

    border-radius: 7px;

    background: #fafbfc;

    color: #344054;

    cursor: grab;

    user-select: none;

    transition:
        background-color 0.12s ease,
        border-color 0.12s ease;
}

.librarian-items-page
.librarian-items__column-option:hover {
    background: #f5f8fc;

    border-color: #d4dce7;
}

.librarian-items-page
.librarian-items__column-option.is-dragging {
    opacity: 0.45;

    background: #eef4ff;

    border-color: #bfd0ef;
}


/* ----------------------------------------------------------------------------
   Checkbox
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__column-option input {
    width: 15px;
    height: 15px;

    margin: 0;

    flex-shrink: 0;

    accent-color: #315ea8;

    cursor: pointer;
}


/* ----------------------------------------------------------------------------
   Label
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__column-label {
    display: inline-flex;

    align-items: center;

    color: inherit;

    font-size: 12px;

    line-height: 1.3;

    cursor: pointer;
}


/* ----------------------------------------------------------------------------
   Drag handle
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__drag-handle {
    width: 10px;

    flex-shrink: 0;

    color: #aeb7c3;

    font-size: 11px;

    line-height: 1;

    text-align: center;

    cursor: grab;
}


/* ----------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__columns-footer {
    display: flex;

    justify-content: flex-end;

    margin-top: 12px;

    padding-top: 10px;

    border-top: 1px solid #edf0f4;
}

.librarian-items-page
.librarian-items__columns-footer .button {
    min-height: 30px;

    padding: 5px 9px;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #64748b;

    font-size: 11px;

    cursor: pointer;
}

.librarian-items-page
.librarian-items__columns-footer .button:hover {
    background: #f5f7fa;

    color: #315ea8;
}


/* ============================================================================
   Table Wrapper
   ============================================================================ */

.librarian-items-page
.librarian-items__table-wrapper {
    width: 100%;

    overflow-x: auto;

    box-sizing: border-box;

    border: 1px solid #dfe5ed;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(
            15,
            23,
            42,
            0.025
        );

    scrollbar-width: thin;
}


/* ============================================================================
   Table
   ============================================================================ */

.librarian-items-page
.librarian-items__table {
    width: 100%;

    min-width: 980px;

    border-collapse: separate;

    border-spacing: 0;

    background: #ffffff;
}


/* ============================================================================
   Table Header
   ============================================================================ */

.librarian-items-page
.librarian-items__table
thead {
    background: #f8fafc;
}

.librarian-items-page
.librarian-items__table
thead
th {
    height: 42px;

    box-sizing: border-box;

    padding: 0 12px;

    border-bottom: 1px solid #e3e8ef;

    color: #667085;

    font-size: 11px;

    font-weight: 650;

    line-height: 1.2;

    text-align: left;

    white-space: nowrap;

    vertical-align: middle;
}


/* ============================================================================
   Table Body
   ============================================================================ */

.librarian-items-page
.librarian-items__table
tbody
tr {
    background: #ffffff;

    transition:
        background-color 0.12s ease;
}

.librarian-items-page
.librarian-items__table
tbody
tr:hover {
    background: #fafcff;
}

.librarian-items-page
.librarian-items__table
tbody
tr:last-child
td {
    border-bottom: none;
}


/* ============================================================================
   Table Cells
   ============================================================================ */

.librarian-items-page
.librarian-items__table
tbody
td {
    min-height: 48px;

    padding: 10px 12px;

    border-bottom: 1px solid #edf0f4;

    color: #475467;

    font-size: 12px;

    line-height: 1.35;

    vertical-align: middle;
}


/* ============================================================================
   Title
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--title {
    min-width: 190px;

    color: #253b63;

    font-size: 12px;

    font-weight: 650;

    line-height: 1.35;
}

.librarian-items-page
.librarian-items__cell--title:hover {
    color: #1d4f91;
}


/* ============================================================================
   Authors
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--authornames {
    min-width: 145px;

    color: #475467;

    line-height: 1.35;
}


/* ============================================================================
   Type
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--type {
    min-width: 80px;

    color: #475467;

    white-space: nowrap;
}


/* ============================================================================
   ISBN / ISMN / ISSN
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--isbn,

.librarian-items-page
.librarian-items__cell--ismn,

.librarian-items-page
.librarian-items__cell--issn {
    min-width: 120px;

    color: #667085;

    white-space: nowrap;
}


/* ============================================================================
   Year
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--year {
    min-width: 65px;

    color: #475467;

    white-space: nowrap;
}


/* ============================================================================
   Language
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--languageid {
    min-width: 110px;

    color: #475467;

    line-height: 1.35;
}


/* ============================================================================
   Pages
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--pages {
    min-width: 70px;

    color: #667085;

    white-space: nowrap;
}


/* ============================================================================
   Copies
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--copies {
    min-width: 80px;

    color: #667085;

    white-space: nowrap;

    text-align: center;
}


/* ============================================================================
   Publisher
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--publisherid {
    min-width: 140px;

    color: #475467;

    line-height: 1.35;
}


/* ============================================================================
   Specialization
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--specializationid {
    min-width: 120px;

    color: #475467;

    line-height: 1.35;
}


/* ============================================================================
   ID
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--itemid {
    min-width: 100px;

    color: #8a95a3;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 11px;

    white-space: nowrap;
}


/* ============================================================================
   Actions
   ============================================================================ */

.librarian-items-page
.librarian-items__cell--actions {
    width: 1%;

    padding-right: 14px !important;

    text-align: right;

    white-space: nowrap;
}

.librarian-items-page
.librarian-items__actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 6px;

    min-width: 150px;

    white-space: nowrap;
}

.librarian-items-page
.librarian-items-page
.librarian-items__actions
.button {
    min-height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 11px;

    box-sizing: border-box;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


/* Редагувати */

.librarian-items-page
.librarian-items__actions
.button--primary {
    background: #eef3f9;

    border-color: #d4deeb;

    color: #31547f;
}

.librarian-items-page
.librarian-items__actions
.button--primary:hover {
    background: #e3ebf5;

    border-color: #c3d1e2;

    color: #26476d;
}


/* Архівувати */

.librarian-items-page
.librarian-items__actions
.button--danger {
    background: #fff7f7;

    border-color: #ead3d6;

    color: #b04a56;
}

.librarian-items-page
.librarian-items__actions
.button--danger:hover {
    background: #ffeded;

    border-color: #dfb8bd;

    color: #9d3542;
}


/* Відновити */

.librarian-items-page
.librarian-items__actions
.button--secondary {
    background: #f5f7fa;

    border-color: #dce2e9;

    color: #526173;
}

.librarian-items-page
.librarian-items__actions
.button--secondary:hover {
    background: #e9edf2;

    border-color: #cbd3dd;

    color: #3d4b5d;
}


/* ----------------------------------------------------------------------------
   Edit
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__actions
.button--primary {
    background: #1f2937;

    border-color: #1f2937;

    color: #ffffff;
}

.librarian-items-page
.librarian-items__actions
.button--primary:hover {
    background: #111827;

    border-color: #111827;
}


/* ----------------------------------------------------------------------------
   Archive
   ---------------------------------------------------------------------------- */

.librarian-items-page
.librarian-items__actions
.button--danger {
    background: #ffffff;

    border-color: #e0a2ab;

    color: #c43d4b;
}

.librarian-items-page
.librarian-items__actions
.button--danger:hover {
    background: #fff4f5;

    border-color: #c43d4b;

    color: #b42332;
}


/* ============================================================================
   Empty State
   ============================================================================ */

.librarian-items-page
.item-empty {
    padding: 56px 24px;

    border: 1px solid #dfe5ed;

    border-radius: 12px;

    background: #ffffff;

    color: #7b8794;

    text-align: center;
}


/* ============================================================================
   Error
   ============================================================================ */

.librarian-items-page
.item-error {
    margin: 0;

    padding: 40px 24px;

    border: 1px solid #ead1d5;

    border-radius: 12px;

    background: #ffffff;
}


/* ============================================================================
   Pagination
   ============================================================================ */

.librarian-items-page
.librarian-items__pagination {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 14px;
}

.librarian-items-page
.librarian-items__pagination-info {
    color: #7b8794;

    font-size: 12px;
}

.librarian-items-page
.librarian-items__pagination-controls {
    display: flex;

    align-items: center;

    gap: 5px;
}

.librarian-items-page
.librarian-items__pagination-controls
.button {
    min-width: 34px;

    min-height: 34px;

    padding: 0 9px;

    border-radius: 7px;

    font-size: 12px;
}


/* ============================================================================
   Librarian Item Form
   ============================================================================ */

.librarian-item {
    max-width: 900px;

    margin: 0 auto;

    padding: 32px 0 60px;
}

.librarian-item__form {
    padding: 32px;

    background: #ffffff;

    border: 1px solid #ddd;

    border-radius: 10px;
}


/* ============================================================================
   Generic Form
   ============================================================================ */

.form__group {
    margin-bottom: 20px;
}

.form__group label {
    display: block;

    margin-bottom: 8px;

    font-weight: 600;
}

.form__group input,
.form__group textarea {
    width: 100%;

    padding: 10px 12px;

    box-sizing: border-box;

    border: 1px solid #ccc;

    border-radius: 6px;

    font: inherit;
}

.form__group input:focus,
.form__group textarea:focus {
    outline: none;

    border-color: #222;
}

.form__group input[readonly] {
    background: #f5f5f5;
}


/* ============================================================================
   Form Actions
   ============================================================================ */

.form__actions {
    display: flex;

    gap: 12px;

    margin-top: 28px;
}


/* ============================================================================
   Form Message
   ============================================================================ */

.form__message {
    margin: 20px 0;

    padding: 12px 16px;

    border: 1px solid #ddd;

    border-radius: 6px;

    background: #f5f5f5;
}

.form__message--error {
    border-color: #c00;

    background: #fff5f5;
}


/* ============================================================================
   Librarian Workspace
   ============================================================================ */

.librarian-shell {
    min-height: 100vh;

    display: flex;

    background: #f4f6f9;
}


/* ============================================================================
   Sidebar
   ============================================================================ */

.librarian-sidebar {
    position: fixed;

    inset: 0 auto 0 0;

    z-index: 20;

    width: 248px;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    padding: 24px 16px;

    background: #18263a;

    color: #ffffff;

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

.librarian-sidebar__brand {
    display: flex;

    align-items: baseline;

    gap: 9px;

    padding: 0 12px 28px;
}

.librarian-sidebar__logo {
    color: #ffffff;

    text-decoration: none;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 0.04em;
}

.librarian-sidebar__caption {
    color: rgba(
        255,
        255,
        255,
        0.55
    );

    font-size: 12px;
}

.librarian-sidebar__nav {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.librarian-sidebar__link {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 44px;

    padding: 0 12px;

    box-sizing: border-box;

    border-radius: 9px;

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

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.librarian-sidebar__link:hover {
    background: rgba(
        255,
        255,
        255,
        0.08
    );

    color: #ffffff;
}

.librarian-sidebar__link--active {
    background: rgba(
        255,
        255,
        255,
        0.12
    );

    color: #ffffff;
}

.librarian-sidebar__icon {
    width: 20px;

    flex-shrink: 0;

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

    font-size: 18px;

    line-height: 1;

    text-align: center;
}

.librarian-sidebar__bottom {
    margin-top: auto;

    padding-top: 18px;

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


/* ============================================================================
   Main / Topbar
   ============================================================================ */

.librarian-main {
    width: calc(100% - 248px);

    min-width: 0;

    margin-left: 248px;
}

.librarian-topbar {
    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding: 0 36px;

    box-sizing: border-box;

    background: #ffffff;

    border-bottom: 1px solid #e2e6eb;
}

.librarian-topbar__title {
    display: flex;

    flex-direction: column;

    gap: 3px;

    color: #233247;

    font-size: 14px;
}

.librarian-topbar__eyebrow {
    color: #7b8794;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.librarian-topbar__logout {
    flex-shrink: 0;
}


/* ============================================================================
   Content
   ============================================================================ */

.librarian-content {
    width: min(
        1180px,
        calc(100% - 64px)
    );

    margin: 0 auto;

    padding: 34px 0 48px;
}

.librarian-content__header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 22px;
}

.librarian-content__back {
    display: inline-block;

    margin-bottom: 10px;

    color: #64748b;

    font-size: 13px;

    text-decoration: none;
}

.librarian-content__back:hover {
    color: #243b53;

    text-decoration: underline;
}

.librarian-content__header h1 {
    margin: 0;

    color: #172033;

    font-size: 30px;

    line-height: 1.2;
}

.librarian-content__header p {
    margin: 8px 0 0;

    color: #718096;

    font-size: 14px;
}


/* ============================================================================
   Librarian Item Form
   ============================================================================ */

.librarian-item-form {
    padding: 0;

    background: transparent;
}

.librarian-form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.librarian-form__section {
    padding: 26px 28px;

    background: #ffffff;

    border: 1px solid #e0e5eb;

    border-radius: 12px;

    box-shadow:
        0 1px 2px rgba(
            15,
            23,
            42,
            0.025
        );
}

.librarian-form__section-header {
    margin-bottom: 22px;
}

.librarian-form__section-header > div {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}

.librarian-form__section-number {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: #edf3ff;

    color: #315ea8;

    font-size: 11px;

    font-weight: 700;
}

.librarian-form__section h2 {
    margin: 0;

    color: #25364d;

    font-size: 17px;

    line-height: 1.3;
}

.librarian-form__section-header p {
    margin: 4px 0 0;

    color: #8290a3;

    font-size: 12px;

    line-height: 1.4;
}


/* ============================================================================
   Form Grid
   ============================================================================ */

.librarian-form__grid {
    display: grid;

    gap: 16px;

    margin-bottom: 16px;
}

.librarian-form__grid:last-child {
    margin-bottom: 0;
}

.librarian-form__grid--two {
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );
}

.librarian-form__grid--three {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
}


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

.librarian-form .form__group {
    min-width: 0;

    margin-bottom: 0;
}

.librarian-form__field label,
.librarian-form__relation-header label {
    display: block;

    margin-bottom: 7px;

    color: #344054;

    font-size: 12px;

    font-weight: 650;
}

.librarian-form__required {
    margin-left: 2px;

    color: #c43d4b;
}

.librarian-form__field input,
.librarian-form__field textarea,
.librarian-form__field select,
.librarian-form .publisher-input,
.librarian-form .author-input,
.librarian-form .specialization-input,
.librarian-form .keyword-input {
    width: 100%;

    min-width: 0;

    box-sizing: border-box;

    border: 1px solid #d5dce5;

    border-radius: 8px;

    background: #ffffff;

    color: #1f2937;

    font: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.librarian-form__field input,
.librarian-form .publisher-input,
.librarian-form .author-input,
.librarian-form .specialization-input,
.librarian-form .keyword-input {
    height: 42px;

    padding: 0 12px;
}

.librarian-form__field textarea {
    min-height: 130px;

    padding: 11px 12px;

    resize: vertical;

    line-height: 1.5;
}

.librarian-form__field input::placeholder,
.librarian-form .publisher-input::placeholder,
.librarian-form .author-input::placeholder,
.librarian-form .specialization-input::placeholder,
.librarian-form .keyword-input::placeholder {
    color: #a1aab7;
}

.librarian-form__field input:focus,
.librarian-form__field textarea:focus,
.librarian-form .publisher-input:focus,
.librarian-form .author-input:focus,
.librarian-form .specialization-input:focus,
.librarian-form .keyword-input:focus {
    border-color: #5578ad;

    box-shadow:
        0 0 0 3px rgba(
            85,
            120,
            173,
            0.10
        );
}


/* ============================================================================
   Native Select
   ============================================================================ */

.librarian-select {
    position: relative;

    width: 100%;
}

.librarian-select::after {
    content: '';

    position: absolute;

    top: 50%;
    right: 13px;

    width: 7px;
    height: 7px;

    margin-top: -5px;

    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;

    transform: rotate(45deg);

    pointer-events: none;
}

.librarian-select select {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 42px;

    padding: 0 38px 0 12px;

    cursor: pointer;
}

.librarian-select select:focus {
    border-color: #5578ad;

    box-shadow:
        0 0 0 3px rgba(
            85,
            120,
            173,
            0.10
        );
}


/* ============================================================================
   Autocomplete
   ============================================================================ */

.publisher-autocomplete,
.author-autocomplete,
.specialization-autocomplete,
.keyword-autocomplete {
    position: relative;
}

.publisher-suggestions,
.author-suggestions,
.specialization-suggestions,
.keyword-suggestions {
    position: absolute;

    z-index: 50;

    top: calc(100% + 5px);

    left: 0;
    right: 0;

    max-height: 250px;

    overflow-y: auto;

    padding: 5px;

    box-sizing: border-box;

    border: 1px solid #d9e0e8;

    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 12px 28px rgba(
            15,
            23,
            42,
            0.12
        );
}

.publisher-suggestion,
.author-suggestion,
.specialization-suggestion,
.keyword-suggestion {
    display: block;

    width: 100%;

    padding: 9px 10px;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #344054;

    font: inherit;

    font-size: 13px;

    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}

.publisher-suggestion:hover,
.author-suggestion:hover,
.specialization-suggestion:hover,
.keyword-suggestion:hover {
    background: #f1f5f9;

    color: #253b5c;
}

.publisher-suggestion--create,
.author-suggestion--create,
.specialization-suggestion--create,
.keyword-suggestion--create {
    margin-top: 4px;

    border-top: 1px solid #edf0f4;

    border-radius: 0;

    color: #315ea8;

    font-weight: 600;
}

.publisher-suggestion-empty,
.author-suggestion-empty,
.specialization-suggestion-empty,
.keyword-suggestion-empty {
    padding: 9px 10px;

    color: #8a95a3;

    font-size: 12px;
}


/* ============================================================================
   Relations
   ============================================================================ */

.librarian-form__relation-grid {
    display: grid;

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

    gap: 16px;
}

.librarian-form__relation {
    min-width: 0;

    padding: 16px;

    box-sizing: border-box;

    border: 1px solid #e1e6ec;

    border-radius: 10px;

    background: #fafbfd;
}

.librarian-form__relation--authors {
    grid-column: span 1;
}

.librarian-form__relation--specializations {
    grid-column: span 1;
}

.librarian-form__relation--keywords {
    grid-column: 1 / -1;
}

.librarian-form__relation-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}

.librarian-form__relation-header label {
    margin-bottom: 3px;
}

.librarian-form__relation-header span {
    display: block;

    color: #8994a3;

    font-size: 11px;

    line-height: 1.35;
}

.librarian-add-button {
    min-height: 30px;

    padding: 6px 9px;

    flex-shrink: 0;

    border-radius: 6px;

    font-size: 11px;
}

.librarian-form__list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.librarian-form__list:empty::before {
    content: 'Ще нічого не додано';

    display: block;

    padding: 11px;

    border: 1px dashed #d9dfe7;

    border-radius: 7px;

    color: #98a2b3;

    font-size: 11px;

    text-align: center;
}


/* ============================================================================
   Author / Specialization / Keyword Rows
   ============================================================================ */

.author-row,
.specialization-row,
.keyword-row {
    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;
}

.author-row > .author-autocomplete,
.specialization-row > .specialization-autocomplete,
.keyword-row > .keyword-autocomplete {
    flex: 1 1 auto;

    min-width: 0;
}


/* ============================================================================
   Author Role Dropdown
   ============================================================================ */

.author-role-dropdown {
    position: relative;

    width: 150px;

    flex: 0 0 150px;
}

.author-role-dropdown
.librarian-custom-dropdown__button {
    height: 42px;

    font-size: 12px;
}

.author-role-dropdown
.librarian-custom-dropdown__menu {
    min-width: 190px;

    right: auto;
}

.author-role-dropdown
.librarian-custom-dropdown__option {
    font-size: 12px;
}


/* ============================================================================
   Remove Buttons
   ============================================================================ */

.remove-author-button,
.remove-specialization-button,
.remove-keyword-button {
    min-height: 32px;

    padding: 6px 9px;

    flex-shrink: 0;

    border-radius: 6px;

    font-size: 11px;
}


/* ============================================================================
   Form Actions
   ============================================================================ */

.librarian-form__actions {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 4px 2px 0;
}

.librarian-form__submit {
    min-width: 190px;
}


/* ============================================================================
   Form Status
   ============================================================================ */

.librarian-form > .form__message {
    margin: 0;

    border-radius: 9px;
}


/* ============================================================================
   Digital File / Dropzone
   ============================================================================ */

.librarian-file {
    width: 100%;
}

.librarian-file__input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

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

    white-space: nowrap;

    border: 0;
}

.librarian-file__dropzone {
    position: relative;

    width: 100%;

    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 28px 24px;

    border: 1.5px dashed #c7d2e1;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f7f9fc 100%
        );

    color: #344054;

    text-align: center;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.librarian-file__dropzone:hover {
    border-color: #5578ad;

    background:
        linear-gradient(
            180deg,
            #f9fbff 0%,
            #f3f7fd 100%
        );

    box-shadow:
        0 4px 14px rgba(
            49,
            94,
            168,
            0.06
        );
}

.librarian-file__dropzone:focus-visible {
    outline: none;

    border-color: #5578ad;

    box-shadow:
        0 0 0 4px rgba(
            85,
            120,
            173,
            0.12
        );
}

.librarian-file__dropzone[hidden] {
    display: none;
}

.librarian-file__dropzone--dragover {
    border-color: #315ea8;

    background: #eef4ff;

    box-shadow:
        0 0 0 4px rgba(
            49,
            94,
            168,
            0.08
        );

    transform: translateY(-1px);
}

.librarian-file__upload-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 13px;

    border-radius: 14px;

    background: #edf3ff;

    color: #315ea8;
}

.librarian-file__upload-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.librarian-file__dropzone-title {
    margin: 0;

    color: #26384d;

    font-size: 14px;

    font-weight: 650;

    line-height: 1.4;
}

.librarian-file__dropzone-title strong {
    color: #315ea8;
}

.librarian-file__dropzone-text {
    margin: 6px 0 0;

    color: #7b8794;

    font-size: 12px;

    line-height: 1.45;
}

.librarian-file__dropzone-hint {
    margin: 9px 0 0;

    color: #a0a8b4;

    font-size: 11px;

    line-height: 1.4;
}


/* ============================================================================
   Selected File
   ============================================================================ */

.librarian-file__selected {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

    padding: 13px 15px;

    box-sizing: border-box;

    border: 1px solid #dce5f2;

    border-radius: 9px;

    background: #f8faff;
}

.librarian-file__selected[hidden] {
    display: none;
}

.librarian-file__selected--visible {
    display: flex;

    align-items: center;

    gap: 12px;
}

.librarian-file__file-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: #edf3ff;

    color: #315ea8;
}

.librarian-file__file-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.librarian-file__file-info {
    min-width: 0;

    flex: 1;
}

.librarian-file__file-name {
    overflow: hidden;

    color: #26384d;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.librarian-file__file-meta {
    margin-top: 3px;

    color: #8a95a3;

    font-size: 11px;
}


/* ============================================================================
   Upload Status
   ============================================================================ */

.librarian-file__status {
    display: none;

    margin-top: 10px;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.4;
}

.librarian-file__status--visible {
    display: block;
}

.librarian-file__status--success {
    color: #287a4b;
}

.librarian-file__status--error {
    color: #b42318;
}


/* ============================================================================
   Custom Dropdown
   ============================================================================ */

.librarian-custom-dropdown {
    position: relative;

    width: 100%;
}

.librarian-custom-dropdown__button {
    width: 100%;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 0 12px;

    box-sizing: border-box;

    border: 1px solid #d5dce5;

    border-radius: 8px;

    background: #ffffff;

    color: #1f2937;

    font: inherit;

    font-size: 13px;

    text-align: left;

    cursor: pointer;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.librarian-custom-dropdown__button:hover {
    border-color: #b9c3cf;
}

.librarian-custom-dropdown__button:focus,
.librarian-custom-dropdown--open
.librarian-custom-dropdown__button {
    border-color: #5578ad;

    box-shadow:
        0 0 0 3px rgba(
            85,
            120,
            173,
            0.10
        );
}

.librarian-custom-dropdown__value {
    min-width: 0;

    overflow: hidden;

    color: #344054;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.librarian-custom-dropdown__value--placeholder {
    color: #a1aab7;
}

.librarian-custom-dropdown__arrow {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    margin-top: -4px;

    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;

    transform: rotate(45deg);

    transition:
        transform 0.15s ease;
}

.librarian-custom-dropdown--open
.librarian-custom-dropdown__arrow {
    margin-top: 4px;

    transform: rotate(225deg);
}


/* ----------------------------------------------------------------------------
   Dropdown Menu
   ---------------------------------------------------------------------------- */

.librarian-custom-dropdown__menu {
    position: absolute;

    z-index: 100;

    top: calc(100% + 5px);

    left: 0;
    right: 0;

    max-height: 260px;

    overflow-y: auto;

    padding: 5px;

    box-sizing: border-box;

    border: 1px solid #d9e0e8;

    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 12px 28px rgba(
            15,
            23,
            42,
            0.12
        );
}

.librarian-custom-dropdown__menu[hidden] {
    display: none;
}

.librarian-custom-dropdown__option {
    width: 100%;

    display: block;

    padding: 9px 10px;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #344054;

    font: inherit;

    font-size: 13px;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}

.librarian-custom-dropdown__option:hover {
    background: #f1f5f9;

    color: #253b5c;
}

.librarian-custom-dropdown__option--selected {
    background: #edf3ff;

    color: #315ea8;

    font-weight: 600;
}

.librarian-custom-dropdown__option--placeholder {
    color: #8a95a3;
}

.librarian-custom-dropdown__option--placeholder:hover {
    background: #f7f8fa;
}


/* ============================================================================
   Librarian Login Modal
   ============================================================================ */

.librarian-modal {
    width: min(
        100%,
        460px
    );

    padding: 2.5rem 2.5rem 2rem;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 18px;

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

.librarian-modal .modal__close {
    position: absolute;

    top: 1rem;
    right: 1rem;

    width: 2.25rem;
    height: 2.25rem;

    display: flex;

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

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #4b5563;

    font-size: 1.5rem;

    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.librarian-modal .modal__close:hover {
    background: #f1f3f5;

    color: #111827;
}

.librarian-modal__icon {
    width: 4.5rem;
    height: 4.5rem;

    margin: 0 auto 1.25rem;

    display: flex;

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

    border-radius: 50%;

    background: #eef4ff;

    color: #1857c9;
}

.librarian-modal__icon svg {
    width: 2.2rem;
    height: 2.2rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.librarian-modal__title {
    margin: 0;

    color: #172033;

    font-size: 1.45rem;

    line-height: 1.3;

    text-align: center;
}

.librarian-modal__description {
    margin: 0.55rem 0 1.75rem;

    color: #6b7280;

    font-size: 0.95rem;

    text-align: center;
}


/* ============================================================================
   Login Form
   ============================================================================ */

.librarian-form {
    display: flex;

    flex-direction: column;

    gap: 1.15rem;
}

.librarian-form__field {
    display: flex;

    flex-direction: column;

    gap: 0.45rem;
}

.librarian-form__field label {
    color: #263247;

    font-size: 0.9rem;

    font-weight: 600;
}

.librarian-form__input {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
}

.librarian-form__input svg {
    position: absolute;

    left: 1rem;

    width: 1.15rem;
    height: 1.15rem;

    fill: none;

    stroke: #6b7280;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.librarian-form__input input {
    width: 100%;
    height: 3rem;

    padding:
        0.75rem
        1rem
        0.75rem
        2.9rem;

    box-sizing: border-box;

    border: 1px solid #d5dbe5;

    border-radius: 9px;

    background: #ffffff;

    color: #172033;

    font: inherit;

    font-size: 0.95rem;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.librarian-form__input input::placeholder {
    color: #9aa3b2;
}

.librarian-form__input input:focus {
    border-color: #1857c9;

    box-shadow:
        0 0 0 3px rgba(
            24,
            87,
            201,
            0.12
        );
}

.librarian-form__message {
    padding: 0.75rem 0.9rem;

    border-radius: 8px;

    background: #fff1f1;

    color: #b42318;

    font-size: 0.9rem;

    line-height: 1.4;
}

.librarian-form__submit {
    width: 100%;
    min-height: 3rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 0.15rem;

    border: 0;

    border-radius: 9px;

    background: #173b8f;

    color: #ffffff;

    font: inherit;

    font-size: 0.95rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.1s ease;
}

.librarian-form__submit:hover {
    background: #123278;
}

.librarian-form__submit:active {
    transform: translateY(1px);
}

.librarian-form__submit:disabled {
    opacity: 0.65;

    cursor: wait;
}

.librarian-form__submit svg {
    width: 1.1rem;
    height: 1.1rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.librarian-form__note {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    margin-top: 0.4rem;

    color: #8a93a3;

    font-size: 0.8rem;

    text-align: center;
}

.librarian-form__note::before,
.librarian-form__note::after {
    content: '';

    flex: 1;

    height: 1px;

    background: #e5e7eb;
}


/* ============================================================================
   Public Catalog — Librarian Link
   ============================================================================ */

.page-header__links {
    display: flex;

    align-items: center;

    gap: 1.5rem;
}

.page-header__librarian-link {
    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    padding: 0;

    border: 0;

    background: none;

    color: inherit;

    font: inherit;

    font-weight: 500;

    text-decoration: none;

    cursor: pointer;
}

.page-header__librarian-link:hover {
    text-decoration: underline;
}

.page-header__librarian-icon {
    width: 1rem;
    height: 1rem;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================================
   Responsive — Details
   ============================================================================ */

@media (max-width: 600px) {

    .item-details {
        padding: 24px 16px 40px;
    }

    .item-details__header h1 {
        font-size: 26px;
    }

    .item-details__row {
        grid-template-columns: 1fr;

        gap: 4px;
    }

    .item-details__row strong {
        font-size: 14px;
    }

    .item-file__actions {
        flex-direction: column;
    }

    .item-file__actions .button {
        text-align: center;
    }

    .item-error {
        margin: 40px 16px;

        padding: 32px 20px;
    }

}


/* ============================================================================
   Responsive — Dashboard
   ============================================================================ */

@media (max-width: 800px) {

    .dashboard {
        grid-template-columns: 1fr;
    }

}


/* ============================================================================
   Responsive — Librarian Workspace
   ============================================================================ */

@media (max-width: 1100px) {

    .librarian-form__relation-grid {
        grid-template-columns: 1fr;
    }

    .librarian-content {
        width: min(
            calc(100% - 40px),
            1000px
        );
    }

    .librarian-items-page
    .librarian-items__controls {
        flex-wrap: wrap;
    }

    .librarian-items-page
    .librarian-items__search {
        flex: 1 1 100%;

        order: 2;
    }

    .librarian-items-page
    .librarian-items__status-buttons {
        order: 1;
    }

    .librarian-items-page
    .librarian-items__sort,

    .librarian-items-page
    .librarian-items__per-page,

    .librarian-items-page
    #columns-button {
        order: 1;
    }

}


/* ============================================================================
   Responsive — Tablet
   ============================================================================ */

@media (max-width: 800px) {

    .librarian-sidebar {
        position: static;

        width: 100%;

        min-height: auto;

        padding: 12px 14px;
    }

    .librarian-sidebar__brand {
        padding: 4px 8px 12px;
    }

    .librarian-sidebar__nav,
    .librarian-sidebar__bottom {
        flex-direction: row;

        flex-wrap: wrap;
    }

    .librarian-sidebar__bottom {
        margin-top: 8px;

        padding-top: 8px;
    }

    .librarian-sidebar__link {
        min-height: 38px;
    }

    .librarian-shell {
        display: block;
    }

    .librarian-main {
        width: 100%;

        margin-left: 0;
    }

    .librarian-topbar {
        min-height: 64px;

        padding: 0 20px;
    }

    .librarian-content {
        width: calc(100% - 32px);

        padding-top: 24px;
    }

    .librarian-form__grid--three {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* ============================================================================
   Responsive — Mobile
   ============================================================================ */

@media (max-width: 700px) {

    .librarian-items-page__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }

    .librarian-items-page
    .librarian-items__controls {
        align-items: stretch;

        flex-direction: column;

        margin-bottom: 14px;
    }

    .librarian-items-page
    .librarian-items__controls-wrapper {
        width: 100%;
    }

    .librarian-items-page
    .librarian-items__status-buttons {
        width: 100%;
    }

    .librarian-items-page
    .librarian-items__status-buttons
    .button {
        flex: 1;
    }

    .librarian-items-page
    .librarian-items__sort,

    .librarian-items-page
    .librarian-items__per-page,

    .librarian-items-page
    #columns-button {
        width: 100%;
    }

    /*
     * На мобільному панель також залишається
     * у звичайному потоці сторінки.
     */

    .librarian-items-page
    .librarian-items__columns-panel {
        position: static;

        width: 100%;

        margin: 0 0 14px;

        box-shadow:
            0 4px 16px rgba(
                15,
                23,
                42,
                0.06
            );
    }

    .librarian-items-page
    .librarian-items__columns-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

    .librarian-items-page
    .librarian-items__columns-description {
        text-align: left;
    }

    .librarian-items-page
    .librarian-items__columns-list {
        display: grid;

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

    .librarian-items-page
    .librarian-items__pagination {
        align-items: stretch;

        flex-direction: column;
    }

}


/* ============================================================================
   Responsive — Small Screens
   ============================================================================ */

@media (max-width: 600px) {

    .librarian-sidebar__nav,
    .librarian-sidebar__bottom {
        display: none;
    }

    .librarian-topbar {
        padding: 0 16px;
    }

    .librarian-topbar__title strong {
        font-size: 12px;
    }

    .librarian-content {
        width: calc(100% - 24px);

        padding: 20px 0 32px;
    }

    .librarian-content__header h1 {
        font-size: 25px;
    }

    .librarian-form__section {
        padding: 20px 16px;

        border-radius: 10px;
    }

    .librarian-form__grid--two,
    .librarian-form__grid--three {
        grid-template-columns: 1fr;
    }

    .librarian-form__relation-header {
        align-items: stretch;

        flex-direction: column;
    }

    .librarian-add-button {
        align-self: flex-start;
    }

    .author-row,
    .specialization-row,
    .keyword-row {
        align-items: stretch;

        flex-wrap: wrap;
    }

    .author-row > .author-autocomplete,
    .specialization-row > .specialization-autocomplete,
    .keyword-row > .keyword-autocomplete {
        flex-basis: 100%;
    }

    .author-role-dropdown {
        flex: 1 1 auto;

        width: auto;

        min-width: 0;
    }

    .author-role-dropdown
    .librarian-custom-dropdown__menu {
        width: 100%;

        min-width: 0;
    }

    .remove-author-button,
    .remove-specialization-button,
    .remove-keyword-button {
        flex-shrink: 0;
    }

    .librarian-file__dropzone {
        min-height: 165px;

        padding: 24px 16px;
    }

    .librarian-file__selected--visible {
        align-items: flex-start;
    }

    .librarian-form__actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .librarian-form__actions .button {
        width: 100%;

        text-align: center;
    }

    .librarian-items-page
    .librarian-items__columns-list {
        grid-template-columns: 1fr;
    }

}


/* ============================================================================
   Very Small Screens
   ============================================================================ */

@media (max-width: 420px) {

    .librarian-file__dropzone {
        min-height: 150px;
    }

    .librarian-file__upload-icon {
        width: 46px;
        height: 46px;
    }

    .librarian-file__dropzone-title {
        font-size: 13px;
    }

    .librarian-file__dropzone-text {
        font-size: 11px;
    }

}

.librarian-form__field input[readonly] {
    background: #f5f6f8;
    color: #667085;
    cursor: default;
}

.librarian-form__field input[readonly]:focus {
    border-color: #d0d5dd;
    box-shadow: none;
}

/* ============================================================================
   LIBRARIAN REFERENCES
   ============================================================================ */

.librarian-references-page {
    max-width: 1180px;
}


/* --------------------------------------------------------------------------
   TABS
   -------------------------------------------------------------------------- */

.references__tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 22px;
    padding: 4px;

    background: #ffffff;

    border: 1px solid #e1e6ee;
    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.04);

    overflow-x: auto;
}


.reference-tab {
    position: relative;

    flex: 0 0 auto;

    min-height: 46px;

    padding: 0 20px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #334155;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}


.reference-tab:hover {
    background: #f5f7fb;
    color: #172033;
}


.reference-tab.is-active {
    background: #eef4ff;
    color: #1d5fd1;
}


.reference-tab.is-active::after {
    content: "";

    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 0;

    height: 2px;

    background: #3974df;

    border-radius: 2px 2px 0 0;
}



/* --------------------------------------------------------------------------
   MAIN CARD
   -------------------------------------------------------------------------- */

.references__card {
    padding: 22px;

    background: #ffffff;

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

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.045);
}



/* --------------------------------------------------------------------------
   TOOLBAR
   -------------------------------------------------------------------------- */

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

    gap: 20px;

    margin-bottom: 20px;
}


.references__search {
    position: relative;

    flex: 1 1 auto;

    max-width: 430px;
}


.references__search-icon {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #718096;

    font-size: 20px;
    line-height: 1;

    pointer-events: none;
}


.references__search-input {
    width: 100%;
    height: 44px;

    box-sizing: border-box;

    padding: 0 16px 0 42px;

    border: 1px solid #dce3ec;
    border-radius: 9px;

    background: #ffffff;

    color: #172033;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.references__search-input::placeholder {
    color: #94a3b8;
}


.references__search-input:focus {
    border-color: #8db3ee;

    box-shadow:
        0 0 0 3px rgba(59, 116, 223, 0.10);
}


.references__toolbar-right {
    display: flex;
    align-items: center;

    gap: 12px;
}


.references__status {
    display: flex;
    align-items: center;

    padding: 2px;

    border: 1px solid #dce3ec;
    border-radius: 9px;

    background: #f8fafc;
}


.reference-status-button {
    min-width: 92px;
    height: 38px;

    padding: 0 14px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #475569;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}


.reference-status-button:hover {
    color: #1e293b;
}


.reference-status-button.is-active {
    background: #ffffff;

    color: #245fba;

    box-shadow:
        0 1px 4px rgba(15, 23, 42, 0.08);
}



/* --------------------------------------------------------------------------
   ADD BUTTON
   -------------------------------------------------------------------------- */

.references__add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    height: 42px;

    padding: 0 17px;

    border: 1px solid #294c7d;
    border-radius: 8px;

    background: #29466f;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.references__add-button:hover {
    background: #243f65;
    border-color: #243f65;
}


.references__add-button:active {
    transform: translateY(1px);
}


.references__add-icon {
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
}



/* --------------------------------------------------------------------------
   MESSAGE
   -------------------------------------------------------------------------- */

.references__message {
    margin-bottom: 18px;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 14px;
}


.references__message--success {
    border: 1px solid #cce6d2;
    background: #f1faf3;
    color: #28613a;
}


.references__message--error {
    border: 1px solid #f0c5c5;
    background: #fff5f5;
    color: #a32929;
}



/* --------------------------------------------------------------------------
   TABLE
   -------------------------------------------------------------------------- */

.references__table-container {
    width: 100%;
}


.references__table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #e1e6ee;
    border-radius: 10px;
}


.references__table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: auto;
}


.references__table thead th {
    height: 48px;

    padding: 0 16px;

    background: #f8fafc;

    border-bottom: 1px solid #e1e6ee;

    color: #475569;

    font-size: 12px;
    font-weight: 700;

    text-align: left;

    white-space: nowrap;
}


.references__table tbody td {
    min-height: 52px;

    padding: 12px 16px;

    border-bottom: 1px solid #edf0f4;

    color: #263449;

    font-size: 14px;

    vertical-align: middle;
}


.references__table tbody tr:last-child td {
    border-bottom: 0;
}


.references__table tbody tr {
    transition:
        background-color 0.15s ease;
}


.references__table tbody tr:hover {
    background: #fafcff;
}


.references__id-column {
    width: 150px;
}


.references__actions-column {
    width: 260px;

    text-align: right !important;
}


.references__id-cell {
    color: #64748b !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 13px !important;
}


.references__name-cell {
    font-weight: 500;
}


.references__actions-cell {
    text-align: right;
}


.references__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;
}



/* --------------------------------------------------------------------------
   ACTION BUTTONS
   -------------------------------------------------------------------------- */

.references__edit-button,
.references__archive-button,
.references__restore-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;

    padding: 0 13px;

    border-radius: 7px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.references__edit-button {
    min-width: 112px;

    border: 1px solid #dbe2eb;

    background: #f8fafc;

    color: #334155;
}


.references__edit-button:hover {
    background: #eef2f7;
    border-color: #cbd5e1;
    color: #1e293b;
}


.references__archive-button {
    min-width: 108px;

    border: 1px solid #efb6b6;

    background: #ffffff;

    color: #c53b3b;
}


.references__archive-button:hover {
    background: #fff5f5;
    border-color: #e69b9b;
}


.references__restore-button {
    min-width: 108px;

    border: 1px solid #b9d3f4;

    background: #ffffff;

    color: #2867b2;
}


.references__restore-button:hover {
    background: #f2f7ff;
    border-color: #9dbce5;
}



/* --------------------------------------------------------------------------
   FOOTER / COUNT
   -------------------------------------------------------------------------- */

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

    min-height: 54px;

    padding-top: 4px;
}


.references__count {
    color: #7b8798;

    font-size: 13px;
}


.references__count strong {
    color: #475569;
    font-weight: 600;
}



/* --------------------------------------------------------------------------
   EMPTY / LOADING / ERROR
   -------------------------------------------------------------------------- */

.references__loading {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 180px;

    color: #7b8798;

    font-size: 14px;
}


.references__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 30px;

    text-align: center;
}


.references__empty-title {
    margin-bottom: 6px;

    color: #334155;

    font-size: 15px;
    font-weight: 600;
}


.references__empty-text {
    color: #94a3b8;

    font-size: 13px;
}


.references__error {
    padding: 22px;

    border: 1px solid #efc4c4;
    border-radius: 9px;

    background: #fff7f7;
}


.references__error-title {
    margin-bottom: 6px;

    color: #a32929;

    font-size: 15px;
    font-weight: 700;
}


.references__error-text {
    color: #7f1d1d;

    font-size: 14px;
    line-height: 1.5;
}



/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .references__toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .references__search {
        max-width: none;
    }


    .references__toolbar-right {
        justify-content: space-between;
    }

}


@media (max-width: 640px) {

    .references__card {
        padding: 14px;
    }


    .references__tabs {
        margin-bottom: 14px;
    }


    .reference-tab {
        padding: 0 14px;
    }


    .references__toolbar-right {
        align-items: stretch;
        flex-direction: column;
    }


    .references__status {
        width: 100%;
    }


    .reference-status-button {
        flex: 1;
    }


    .references__add-button {
        width: 100%;
    }


    .references__actions {
        align-items: stretch;
        flex-direction: column;
    }


    .references__edit-button,
    .references__archive-button,
    .references__restore-button {
        width: 100%;
    }

}

/* ============================================================================
   Public Catalog — Pagination
   ============================================================================ */

.catalog-pagination {
    display: flex;

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

    gap: 24px;

    margin-top: 32px;
    padding-top: 20px;

    border-top: 1px solid #e5e7eb;
}


.catalog-pagination__info {
    color: #7b8492;

    font-size: 14px;
    line-height: 1.4;
}


.catalog-pagination__info strong {
    color: #344054;

    font-weight: 600;
}


.catalog-pagination__controls {
    display: flex;

    align-items: center;

    gap: 6px;
}


.catalog-pagination__pages {
    display: flex;

    align-items: center;

    gap: 4px;
}


.catalog-pagination__button,
.catalog-pagination__page {
    display: inline-flex;

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

    min-width: 38px;
    height: 38px;

    padding: 0 10px;

    box-sizing: border-box;

    border: 1px solid #d9dee7;
    border-radius: 8px;

    background: #ffffff;

    color: #475467;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.catalog-pagination__button:hover:not(:disabled),
.catalog-pagination__page:hover {
    border-color: #b9c3d1;

    background: #f8fafc;

    color: #1f2937;
}


.catalog-pagination__button:disabled {
    opacity: 0.45;

    cursor: default;
}


.catalog-pagination__page--active {
    border-color: #294c7d;

    background: #294c7d;

    color: #ffffff;
}


.catalog-pagination__page--active:hover {
    border-color: #294c7d;

    background: #294c7d;

    color: #ffffff;
}


.catalog-pagination__ellipsis {
    display: inline-flex;

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

    width: 30px;
    height: 38px;

    color: #98a2b3;

    font-size: 14px;

    user-select: none;
}



/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 700px) {

    .catalog-pagination {
        align-items: stretch;

        flex-direction: column;

        gap: 14px;
    }


    .catalog-pagination__info {
        text-align: center;
    }


    .catalog-pagination__controls {
        justify-content: center;
    }


    .catalog-pagination__button,
    .catalog-pagination__page {
        min-width: 36px;
        height: 36px;
    }

}


@media (max-width: 480px) {

    .catalog-pagination__controls {
        gap: 3px;
    }


    .catalog-pagination__pages {
        gap: 2px;
    }


    .catalog-pagination__button,
    .catalog-pagination__page {
        min-width: 34px;
        height: 34px;

        padding: 0 7px;

        font-size: 13px;
    }


    .catalog-pagination__ellipsis {
        width: 22px;
    }

}

/* ============================================================================
   Librarian Items — Digital Version Badge
   ============================================================================ */

.librarian-items__title-wrapper {
    display: grid;

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

    align-items: center;

    column-gap: 8px;

    width: 100%;
}


.librarian-items__title {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.librarian-items__digital-icon-cell {
    display: flex;

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

    width: 24px;
    height: 24px;
}


.librarian-items__digital-icon {
    display: flex;

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

    width: 18px;
    height: 18px;

    border-radius: 5px;

    background: #eef3ff;

    color: #3155a6;

    cursor: help;
}


.librarian-items__digital-icon svg {
    width: 11px;
    height: 11px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================================
   Public Catalog — Pagination Refinement
   ============================================================================ */

.catalog-pagination {
    margin-top: 24px;
    padding-top: 18px;
    border-top-color: #e1e6ee;
}

.catalog-pagination__info {
    color: #7b8798;
    font-size: 13px;
}

.catalog-pagination__controls {
    gap: 5px;
}

.catalog-pagination__button,
.catalog-pagination__page {
    min-width: 36px;
    height: 36px;
    border-color: #d7deea;
    border-radius: 8px;
    color: #526173;
    font-size: 13px;
}

.catalog-pagination__button:hover:not(:disabled),
.catalog-pagination__page:hover {
    border-color: #bdc9d8;
    background: #f6f8fb;
}

.catalog-pagination__page--active,
.catalog-pagination__page--active:hover {
    border-color: #315ea8;
    background: #315ea8;
    color: #ffffff;
}