:root {
    --sidebar-width: 220px;
    --violet-1000: #13071f;
    --violet-950: #1b0a2a;
    --violet-900: #24103a;
    --violet-850: #2c1646;
    --violet-800: #352054;
    --violet-700: #56317e;
    --violet-600: #7345a7;
    --violet-500: #8f5fc5;
    --violet-200: #d9c8ed;
    --violet-100: #efe7f7;
    --violet-50: #f7f2fb;
    --surface: #ffffff;
    --background: #f5f0f9;
    --text: #211729;
    --text-soft: #756a7d;
    --text-light: #9b90a3;
    --border: #e9e0ef;
    --border-dark: #ddd0e6;
    --radius: 4px;
}


/* ------------------------------------------------------------
   Basis
------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            #fbf8fd 0,
            var(--background) 42%,
            #f3edf7 100%
        );
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

.srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ------------------------------------------------------------
   Layout
------------------------------------------------------------ */

.libraryApp {
    display: grid;
    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);
    width: min(
        1500px,
        calc(100% - 48px)
    );
    max-width: 1500px;
    min-height:
        calc(100vh - 48px);
    margin:
        24px auto;
    overflow: hidden;
    background:
        var(--surface);
    border:
        1px solid
        var(--border);
    border-radius:
        4px;
    box-shadow:
        0 18px 50px
        rgba(52, 24, 76, .10);
}


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

.sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding:
        30px 18px 20px;
    background:
        linear-gradient(
            180deg,
            var(--violet-1000),
            var(--violet-900)
        );
    color:
        #ffffff;
}

.sidebarBrand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 10px;
    margin-bottom: 48px;
    color: #ffffff;
}

.sidebarBrandIcon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    color: #ffffff;
    font-size: 18px;
}

.sidebarBrandText {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.sidebarBrandText strong {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
}

.sidebarBrandText small {
    color: rgba(255, 255, 255, .42);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .10em;
}

.sidebarBrand:hover .sidebarBrandIcon {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .13);
}

.sidebarBrand:hover .sidebarBrandText small {
    color: rgba(255, 255, 255, .58);
}

.sidebarNavigation {
    display:
        grid;
    gap:
        8px;
}

.sidebarLink {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 15px;
    border-radius: 4px;
    color: rgba(255, 255, 255, .68);
    font-size: 14px;
    transition: background .18s ease, color .18s ease;
}

.sidebarLink i {
    width:
        20px;
    text-align:
        center;
    font-size:
        18px;
}

.sidebarLink:hover {
    color:
        #ffffff;
    background:
        rgba(
            255,
            255,
            255,
            .07
        );
}

.sidebarLink.isActive {
    color:
        #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--violet-700),
            var(--violet-850)
        );
}

.sidebarFooter {
    display:
        flex;
    align-items:
        center;
    gap:
        10px;
    margin-top:
        auto;
    padding:
        14px;
    background:
        rgba(
            255,
            255,
            255,
            .06
        );
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .05
        );
    border-radius:
        4px;
}

.sidebarFooterIcon {
    display:
        grid;
    place-items:
        center;
    flex:
        0 0 34px;
    width:
        34px;
    height:
        34px;
    background:
        rgba(
            255,
            255,
            255,
            .08
        );
    border-radius:
        4px;
}

.sidebarFooter strong,
.sidebarFooter span {
    display:
        block;
}

.sidebarFooter strong {
    font-size:
        12px;
}

.sidebarFooter span {
    margin-top:
        3px;
    color:
        rgba(
            255,
            255,
            255,
            .55
        );
    font-size:
        11px;
}


.sidebarNavigation {
    display: grid;
    gap: 0;
}

.sidebarNavGroup {
    display: grid;
    gap: 6px;
}

.sidebarNavTitle {
    padding: 0 15px;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .38);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.sidebarNavDivider {
    height: 1px;
    margin: 14px 10px;
    background: rgba(255, 255, 255, .09);
}

.sidebarLogout {
    color: rgba(255, 255, 255, .55);
}

.sidebarLogout:hover {
    color: #ffffff;
    background: rgba(176, 52, 52, .30);
}

/* ------------------------------------------------------------
   Hauptbereich
------------------------------------------------------------ */

.libraryMain {
    min-width:
        0;
    background:
        var(--surface);
}


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

.libraryHeader {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        30px;
    min-height:
        118px;
    padding:
        28px 36px;
    border-bottom:
        1px solid
        var(--border);
}

.libraryHeader h1 {
    margin:
        0 0 9px;
    font-size:
        26px;
    line-height:
        1.2;
}

.libraryCount {
    color:
        var(--violet-600);
    font-size:
        15px;
}

.libraryHeaderActions {
    display:
        flex;
    align-items:
        center;
    gap:
        16px;
    width:
        min(
            600px,
            60%
        );
}


.librarySearch input[type="search"]::-webkit-search-cancel-button,
.librarySearch input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}


.librarySearch {
    position: relative;
    flex: 1;
}

.librarySearchIcon {
    position: absolute;
    top: 50%;
    left: 16px;
    color: #8a8f96;
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}

.librarySearchClear {
    position: absolute;
    top: 50%;
    right: 10px;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #8a8f96;
    transform: translateY(-50%);
}

.librarySearchClear.isVisible {
    display: grid;
}

.librarySearchClear:hover {
    background: #f1f2f4;
    color: #555c65;
}


.librarySearch input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 44px;
    outline: none;
    background: #ffffff;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    color: var(--text);
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.librarySearch input::placeholder {
    color: #a093aa;
}

.librarySearch input:focus {
    border-color:
        var(--violet-500);
    box-shadow:
        0 0 0 3px
        rgba(
            115,
            69,
            167,
            .10
        );
}

.librarySearch > i {
    position: absolute;
    top: 50%;
    left: 16px;
    color: #8a8f96;
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}

.bookSearchHighlight {
    padding: 0;
    background: #ffcc4d;
    border-radius: 2px;
    color: #111111;
    font-weight: inherit;
}

.addBookButton {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        10px;
    height:
        50px;
    padding:
        0 22px;
    white-space:
        nowrap;
    background:
        linear-gradient(
            135deg,
            var(--violet-850),
            var(--violet-1000)
        );
    border-radius:
        4px;
    color:
        #ffffff;
    font-size:
        14px;
    font-weight:
        600;
    box-shadow:
        0 6px 16px
        rgba(
            48,
            21,
            72,
            .18
        );
}


/* ------------------------------------------------------------
   Toolbar
------------------------------------------------------------ */

.libraryToolbar {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        20px;
    min-height:
        68px;
    padding:
        0 36px;
    border-bottom:
        1px solid
        var(--border);
    background:
        var(--violet-50);
}

.libraryToolbarInfo {
    color:
        var(--text-soft);
    font-size:
        13px;
}

.libraryToolbarRight {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    font-size: 13px;
}

.libraryToolbarRight label {
    position: relative;
    top: 1px;
}

.libraryToolbarRight strong {
    color:
        var(--violet-800);
}


/* ------------------------------------------------------------
   Tabelle
------------------------------------------------------------ */

.booksTableHeader,
.bookRow {
    display: grid;
    grid-template-columns:
        minmax(320px, 2.4fr)
        minmax(130px, 1.1fr)
        minmax(105px, .9fr)
        minmax(150px, 1.25fr)
        112px
        92px
        72px;
    align-items: center;
    column-gap: 14px;
}

.booksTableHeader {
    min-height:
        52px;
    padding:
        0 36px;
    background:
        #fbf9fc;
    border-bottom:
        1px solid
        var(--border);
    color:
        #8e8197;
    font-size:
        11px;
    font-weight:
        600;
    text-transform:
        uppercase;
    letter-spacing:
        .04em;
}

.bookRows {
    position:
        relative;
    min-height:
        300px;
}

.bookRows.isLoading {
    opacity:
        .48;
    pointer-events:
        none;
}

.bookRows.isLoading::after {
    content:
        "";
    position:
        absolute;
    top:
        30px;
    left:
        50%;
    width:
        24px;
    height:
        24px;
    margin-left:
        -12px;
    border:
        3px solid
        #e8deef;
    border-top-color:
        var(--violet-600);
    border-radius:
        50%;
    animation:
        booksSpinner
        .7s linear infinite;
}

.bookRow {
    min-height:
        96px;
    padding:
        12px 36px;
    border-bottom:
        1px solid
        var(--border);
    transition:
        background
        .15s ease;
}

.bookRow:hover {
    background:
        #fdfbfe;
}

.bookColumn {
    min-width:
        0;
    color:
        #302539;
    font-size:
        13px;
}

.bookColumnMain {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    overflow: visible;
}

.bookCoverButton {
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 70px;
    padding: 0;
    overflow: hidden;
    cursor: default;
    background: #f1f2f4;
    border: 1px solid #e2e4e8;
    border-radius: var(--radius);
}

.bookCoverButton[data-cover] {
    cursor:
        zoom-in;
}

.bookCoverButton img {
    display:
        block;
    width:
        100%;
    height:
        100%;
    object-fit:
        cover;
}

.bookCoverPlaceholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #7f858d;
    font-size: 20px;
}

.bookPrimary {
    position: relative;
    min-width: 0;
    padding-top: 1px;
    overflow: visible;
}

.bookTitle {
    position: relative;
    z-index: 3;
    display: block;
    width: max-content;
    max-width: none;
    margin-bottom: 6px;
    overflow: visible;
    color: #211629;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: nowrap;
}

.bookMetaLine {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #918696;
    font-size: 11px;
    line-height: 1.45;
}

.bookMetaLine strong {
    flex: 0 0 auto;
    color: #74697c;
    font-weight: 700;
}

.bookMetaLine > span {
    min-width: 0;
}

.bookMetaDetails {
    gap: 9px;
    margin-top: 2px;
    white-space: nowrap;
}

.bookMetaDetails > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bookMetaSeparator {
    color: #b9afbe;
}




.bookTypeIcons {
    display:
        flex;
    align-items:
        center;
    gap:
        7px;
}

.bookTypeIcon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background:
        linear-gradient(
            135deg,
            var(--violet-850),
            var(--violet-1000)
        );
    border: 1px solid var(--violet-900);
    border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(48, 21, 72, .16);
}


/* Kindle / Amazon */

.bookTypeIcon:has(.fa-amazon) {
    background: #ffcc4d;
    border-color: #e3ae28;
    color: #111111;
}

.bookTypeIcon:has(.fa-amazon) i {
    color: #111111;
}


/* Nicht im Bestand */

.bookTypeIcon.isEmpty {
    color:
        #a79bac;
    background:
        #f3eff5;
    border-color:
        #e9e1ed;
}


/* Leeres Kindle-Feld bleibt grau */

.bookTypeIcon.isEmpty:has(.fa-amazon) {
    color: #a79bac;
    background: #f3eff5;
    border-color: #e9e1ed;
}

.bookActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

.booksTableHeader span:last-child {
    text-align: right;
}

.bookActionButton {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #7d6f86;
}

.bookActionButton:hover {
    background:
        var(--violet-100);
    color:
        var(--violet-800);
}

/* ------------------------------------------------------------
   Beschreibung-Modal
------------------------------------------------------------ */

.descriptionModal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: none;
    place-items: center;
    padding: 32px;
    background:
        rgba(
            18,
            7,
            29,
            .72
        );
    backdrop-filter:
        blur(3px);
}

.descriptionModal.isOpen {
    display: grid;
}

.descriptionModalDialog {
    width:
        min(
            720px,
            100%
        );
    max-height:
        calc(100vh - 64px);
    overflow:
        auto;
    background:
        #ffffff;
    border:
        1px solid
        var(--border);
    border-radius:
        4px;
    box-shadow:
        0 24px 60px
        rgba(
            24,
            10,
            38,
            .24
        );
}

.descriptionModalHeader {
    display:
        flex;
    align-items:
        flex-start;
    justify-content:
        space-between;
    gap:
        20px;
    padding:
        20px 22px 16px;
    border-bottom:
        1px solid
        var(--border);
}

.descriptionModalLabel {
    display:
        block;
    margin-bottom:
        5px;
    color:
        var(--violet-600);
    font-size:
        10px;
    font-weight:
        700;
    text-transform:
        uppercase;
    letter-spacing:
        .06em;
}

.descriptionModalHeader h2 {
    margin:
        0;
    color:
        var(--text);
    font-size:
        20px;
    line-height:
        1.3;
}

.descriptionModalClose {
    display:
        grid;
    place-items:
        center;
    flex:
        0 0 34px;
    width:
        34px;
    height:
        34px;
    padding:
        0;
    cursor:
        pointer;
    background:
        var(--violet-50);
    border:
        1px solid
        var(--border);
    border-radius:
        4px;
    color:
        var(--text-soft);
}

.descriptionModalClose:hover {
    background:
        var(--violet-100);
    color:
        var(--violet-800);
}

.descriptionModalText {
    padding:
        22px;
    color:
        #44374d;
    font-size:
        14px;
    line-height:
        1.7;
    white-space:
        pre-line;
}

/* ------------------------------------------------------------
   Empty
------------------------------------------------------------ */

.booksEmpty {
    display:
        grid;
    justify-items:
        center;
    gap:
        9px;
    padding:
        70px 20px;
    color:
        var(--text-soft);
    text-align:
        center;
}

.booksEmpty i {
    margin-bottom:
        5px;
    color:
        #b8a8c3;
    font-size:
        28px;
}

.booksEmpty strong {
    color:
        var(--text);
}


/* ------------------------------------------------------------
   Pagination
------------------------------------------------------------ */

.libraryPagination {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        20px;
    min-height:
        78px;
    padding:
        15px 36px;
    background:
        #ffffff;
}

.pagination {
    display:
        flex;
    align-items:
        center;
    gap:
        8px;
}

.paginationButton {
    display:
        inline-grid;
    place-items:
        center;
    min-width:
        34px;
    height:
        34px;
    padding:
        0 10px;
    cursor:
        pointer;
    background:
        #ffffff;
    border:
        1px solid
        var(--border-dark);
    border-radius:
        4px;
    color:
        #45344f;
    font-size:
        12px;
    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.paginationButton:hover:not(:disabled) {
    border-color:
        var(--violet-500);
}

.paginationButton.isActive {
    color:
        #ffffff;
    background:
        var(--violet-700);
    border-color:
        var(--violet-700);
    box-shadow:
        0 3px 8px
        rgba(
            86,
            49,
            126,
            .24
        );
}

.paginationButton:disabled {
    opacity:
        .4;
    cursor:
        default;
}

.paginationDots {
    padding:
        0 4px;
    color:
        #a69aaa;
}

.entriesInfo {
    display:
        flex;
    align-items:
        center;
    gap:
        6px;
    color:
        var(--text-soft);
    font-size:
        12px;
}

.entriesPerPage {
    min-width: 64px;
    height: 34px;
    padding: 0 26px 0 10px;
    cursor: pointer;
    background: #ffffff;
    border:
        1px solid
        var(--border-dark);
    border-radius: 4px;
    color:
        var(--violet-800);
    font-size: 12px;
    font-weight: 600;
    outline: none;
}

.entriesPerPage:hover,
.entriesPerPage:focus {
    border-color:
        var(--violet-500);
}

/* ------------------------------------------------------------
   Cover-Lightbox
------------------------------------------------------------ */

.coverModal {
    position:
        fixed;
    z-index:
        1000;
    inset:
        0;
    display:
        none;
    place-items:
        center;
    padding:
        40px;
    background:
        rgba(
            18,
            7,
            29,
            .88
        );
}

.coverModal.isOpen {
    display:
        grid;
}

.coverModal img {
    display:
        block;
    max-width:
        min(
            600px,
            88vw
        );
    max-height:
        88vh;
    object-fit:
        contain;
    border-radius:
        var(--radius);
    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            .38
        );
}

.coverModalActions {
    position:
        absolute;
    top:
        24px;
    right:
        28px;
    display:
        flex;
    align-items:
        center;
    gap:
        10px;
}

.coverModalEdit {
    display:
        inline-flex;
    align-items:
        center;
    gap:
        7px;
    height:
        42px;
    padding:
        0 15px;
    background:
        rgba(
            255,
            255,
            255,
            .12
        );
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );
    border-radius:
        4px;
    color:
        #ffffff;
    font-size:
        13px;
    font-weight:
        600;
}

.coverModalClose {
    display:
        grid;
    place-items:
        center;
    width:
        42px;
    height:
        42px;
    cursor:
        pointer;
    background:
        rgba(
            255,
            255,
            255,
            .12
        );
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );
    border-radius:
		4px;
    color:
        #ffffff;
    font-size:
        18px;
}


.bookCategoryBadge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    background: #f1f2f4;
    border: 1px solid #d6d9de;
    border-radius: 4px;
    color: #747b84;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookCategoryEmpty {
    color: var(--text-light);
}


/* ------------------------------------------------------------
   Buchreihe
------------------------------------------------------------ */

.bookSeries {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bookSeriesName {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--violet-700);
    font-size: 11px;
    font-weight: 600;
}

.bookSeriesName i {
    flex: 0 0 auto;
    width: 14px;
    color: var(--violet-600);
    font-size: 10px;
    text-align: center;
}

.bookSeriesName span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookSeries small {
    padding-left: 20px;
    color: var(--text-light);
    font-size: 9px;
    font-weight: 600;
}

.bookSeriesEmpty {
    color: var(--text-light);
}

/* ------------------------------------------------------------
   Status
------------------------------------------------------------ */

.bookStatusBadge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.bookStatusRead {
    color: #246b3c;
    background: #e8f5ec;
    border: 1px solid #cde8d5;
}

.bookStatusStarted {
    color: #8a5a12;
    background: #fff4dc;
    border: 1px solid #f2ddb2;
}

.bookStatusUnread {
    color: #8a3131;
    background: #fbeaea;
    border: 1px solid #efcccc;
}

.bookStatusNone {
    color: #746a7c;
    background: #f1edf4;
    border: 1px solid #e4dce9;
}


/* ------------------------------------------------------------
   Animation
------------------------------------------------------------ */

@keyframes booksSpinner {
    to {
        transform:
            rotate(360deg);
    }
}