:root {
    --green:#0B6B3A;
    --green-dark:#064E2C;
    --green-mid:#15803D;
    --green-soft:#EAF6EE;
    --bg:#F6FAF7;
    --text:#183126;
    --muted:#6B7A72;
    --border:#DDE8E1;
    --white:#fff;
    --danger:#B42318;
    --gold:#C99A22;
}
* {
    box-sizing:border-box;
}
html,
body {
    margin:0;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
}
body {
    min-height:100vh;
    line-height:1.5;
}
a {
    color:inherit;
}

.shell {
    display:flex;
    min-height:100vh;
}
.sidebar,
aside.fixed {
    width:230px!important;
    background:#fff!important;
    border-right:1px solid var(--border)!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    padding:22px 16px!important;
    display:flex;
    flex-direction:column;
    z-index:50;
    box-shadow:none!important;
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 8px 22px;
    border-bottom:1px solid var(--border);
}
.brand img {
    width:38px;
    height:38px;
    object-fit:contain;
}
.brand strong {
    display:block;
    font-size:17px;
}
.brand small {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:2px;
}
.userbox,
aside.fixed>div:first-child>div:nth-child(2) {
    margin:16px 0!important;
    padding:12px!important;
    background:var(--green-soft)!important;
    border-radius:12px!important;
    box-shadow:none!important;
}
.userbox strong {
    font-size:13px;
}
.userbox small {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}
.nav {
    display:flex;
    flex-direction:column;
    gap:4px;
}
.nav a,
aside.fixed nav a,
aside.fixed a[data-path="login"] {
    color:#53645B!important;
    text-decoration:none;
    padding:10px 12px!important;
    border-radius:10px!important;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:none!important;
    transition:.15s ease!important;
}
.nav a:hover,
aside.fixed nav a:hover,
aside.fixed a[data-path="login"]:hover {
    background:#f0f6f2!important;
    color:var(--green-dark)!important;
}
.nav a.active,
aside.fixed nav a[class*="bg-inverse-surface"] {
    background:var(--green)!important;
    color:#fff!important;
    font-weight:700!important;
}
.nav .material-symbols-outlined,
aside.fixed nav .material-symbols-outlined {
    font-size:19px!important;
}
.sidebar-bottom,
aside.fixed>div:last-child {
    margin-top:auto;
    border-top:1px solid var(--border);
    padding-top:14px;
}
.logout,
aside.fixed a[data-path="login"] {
    color:#9b2c2c!important;
}
.main {
    margin-left:230px;
    width:calc(100% - 230px);
}
.topbar,
header.fixed {
    height:68px!important;
    background:#fff!important;
    border-bottom:1px solid var(--border)!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px!important;
    position:sticky;
    top:0;
    left:230px!important;
    right:0;
    z-index:40;
    box-shadow:none!important;
    backdrop-filter:none!important;
}
.topbar .search,
header.fixed input[placeholder*="Cari"] {
    width:330px!important;
    background:#f5f8f6!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    padding:10px 14px!important;
    outline:none!important;
    height:auto!important;
    color:var(--text)!important;
}
.topbar .search:focus,
header.fixed input[placeholder*="Cari"]:focus {
    border-color:#b9d6c4!important;
    background:#fff!important;
}
.profile {
    font-size:12px;
}
.profile b {
    display:block;
}
.profile span {
    color:var(--muted);
    font-size:10px;
}
/* simplify the Tailwind-generated topbar to match Data Buku */
header.fixed .relative.flex.items-center:has(input[placeholder*="Cari"]) {
    display:block!important;
}
header.fixed .relative.flex.items-center:has(input[placeholder*="Cari"]) .material-symbols-outlined {
    display:none!important;
}
header.fixed .relative.flex.items-center:has(input[placeholder*="Cari"])>div {
    display:none!important;
}
header.fixed>div:last-child>button,
header.fixed>div:last-child>.relative,
header.fixed>div:last-child>.h-8 {
    display:none!important;
}
header.fixed>div:last-child>div:last-child {
    background:transparent!important;
    padding:0!important;
    border-radius:0!important;
    display:flex!important;
    gap:0!important;
}
header.fixed>div:last-child>div:last-child>div:first-child {
    display:none!important;
}
header.fixed>div:last-child>div:last-child>span {
    display:none!important;
}
header.fixed .text-on-surface-variant {
    color:var(--muted)!important;
}
header.fixed .bg-surface-container-low {
    background:transparent!important;
}
body>div.pl-72 {
    padding-left:230px!important;
}
.content,
main.w-full {
    padding:28px 30px 42px!important;
    max-width:1400px!important;
    margin:0 auto!important;
    background:var(--bg)!important;
    min-height:calc(100vh - 68px)!important;
}
main.w-full {
    margin-left:230px!important;
    width:calc(100% - 230px)!important;
    padding-top:28px!important;
}
main.w-full>div {
    max-width:none!important;
    margin:0!important;
    gap:22px!important;
}
/* headings */
.page-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:22px;
}
.eyebrow {
    color:var(--green);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.page-head h1 {
    font-size:28px;
    margin:5px 0 4px;
    letter-spacing:-.03em;
    color:var(--green-dark);
}
.page-head p {
    margin:0;
    color:var(--muted);
    font-size:13px;
}
main.w-full>div>section:first-child:not(.relative) {
    display:flex!important;
    justify-content:space-between!important;
    align-items:flex-end!important;
    gap:20px!important;
    margin-bottom:22px!important;
}
main.w-full>div>section:first-child:not(.relative) h1 {
    font-size:28px!important;
    line-height:1.2!important;
    letter-spacing:-.03em!important;
    color:var(--green-dark)!important;
    margin:0!important;
    font-weight:700!important;
}
main.w-full>div>section:first-child:not(.relative) p {
    margin:5px 0 0!important;
    color:var(--muted)!important;
    font-size:13px!important;
}
/* Buttons */
.btn,
main button {
    border:0;
    border-radius:9px!important;
    padding:10px 16px;
    font:600 12px inherit;
    cursor:pointer;
    box-shadow:none!important;
}
.btn-primary,
main button.bg-primary,
main button[class*="bg-primary"] {
    background:var(--green)!important;
    color:#fff!important;
}
.btn-primary:hover,
main button.bg-primary:hover {
    background:var(--green-dark)!important;
}
.btn-outline {
    background:#fff!important;
    border:1px solid var(--border)!important;
    color:var(--text)!important;
}
.btn-danger {
    background:#fff0ef!important;
    color:var(--danger)!important;
}
/* cards */
.card,
main .bg-white,
main [class*="bg-surface-container-lowest"] {
    background:#fff!important;
    border:1px solid var(--border)!important;
    border-radius:14px!important;
    box-shadow:0 2px 10px rgba(20,55,38,.04)!important;
}
.toolbar {
    padding:14px;
    display:flex;
    gap:10px;
    align-items:center;
    border-bottom:1px solid var(--border);
}
.input,
main input,
main select,
main textarea {
    width:100%;
    padding:10px 12px!important;
    border:1px solid var(--border)!important;
    border-radius:9px!important;
    background:#fff!important;
    outline:none;
    color:var(--text)!important;
    box-shadow:none!important;
    font:400 12px inherit!important;
}
.input:focus,
main input:focus,
main select:focus,
main textarea:focus {
    border-color:#9bc7aa!important;
    box-shadow:0 0 0 3px rgba(11,107,58,.08)!important;
}
.table {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}
.table th,
table th {
    font-size:10px!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
    color:#75837b!important;
    background:#fbfdfb!important;
    text-align:left;
}
.table th,
.table td,
table th,
table td {
    padding:13px 12px!important;
    border-bottom:1px solid #edf2ee!important;
}
.table tr:last-child td,
table tr:last-child td {
    border-bottom:0;
}
.table td strong {
    font-size:12px;
}
.table .actions,
table .actions {
    text-align:right;
    white-space:nowrap;
}
.empty {
    text-align:center;
    color:var(--muted);
    padding:35px!important;
}
.badge {
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
}
.badge-green {
    background:var(--green-soft);
    color:var(--green);
}
.badge-gold {
    background:#fff7df;
    color:#8b6500;
}
.badge-red {
    background:#fff0ef;
    color:var(--danger);
}
/* forms / modals */
.modal-backdrop {
    position:fixed;
    inset:0;
    background:rgba(15,35,25,.35);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:100;
}
.modal-backdrop.open {
    display:flex;
}
.modal {
    width:min(520px,100%);
    background:#fff;
    border-radius:16px;
    padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.16);
}
.modal h2 {
    margin:0 0 5px;
    font-size:19px;
}
.modal p {
    margin:0 0 18px;
    color:var(--muted);
    font-size:12px;
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.field {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.field.full {
    grid-column:1/-1;
}
.field label {
    font-size:11px;
    font-weight:700;
}
.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:18px;
}
/* loan / return */
.rfid-box {
    display:flex;
    gap:10px;
}
.rfid-box .input {
    font-family:monospace;
}
.student-card {
    display:none;
    margin-top:14px;
    padding:14px;
    background:var(--green-soft);
    border:1px solid #cde4d5;
    border-radius:12px;
}
.student-card.show {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.student-card strong {
    display:block;
}
.student-card small {
    color:var(--muted);
}
.catalog {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.book-card {
    padding:16px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:13px;
}
.book-card h3 {
    margin:4px 0;
    font-size:14px;
}
.book-card p {
    margin:0;
    color:var(--muted);
    font-size:11px;
}
.book-meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
}
.book-card.selected {
    border:2px solid var(--green);
    padding:15px;
    background:#f9fdf9;
}
.book-card button {
    width:100%;
    margin-top:12px;
}
.loan-summary {
    margin-top:18px;
    padding:16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:13px;
}
.summary-row {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:7px 0;
    font-size:12px;
}
.summary-row strong {
    color:var(--green);
}
.return-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.return-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
}
.return-item input {
    accent-color:var(--green);
    width:17px;
    height:17px;
}
.return-item .grow {
    flex:1;
}
.return-item small {
    color:var(--muted);
    display:block;
    margin-top:3px;
}
.return-item .due {
    font-size:10px;
}
.notice {
    padding:12px 14px;
    border-radius:10px;
    background:#f7faf8;
    color:#53645b;
    font-size:11px;
    margin-bottom:16px;
}
.danger-text {
    color:var(--danger);
}
/* Tailwind pages: convert the dashboard/data/report layouts to the Data Buku visual system */
main.w-full section {
    color:var(--text);
}
main.w-full section [class*="rounded-3xl"],
main.w-full section [class*="rounded-2xl"] {
    border-radius:14px!important;
}
main.w-full section [class*="shadow"] {
    box-shadow:0 2px 10px rgba(20,55,38,.04)!important;
}
main.w-full section [class*="bg-surface-container-lowest"],
main.w-full section [class*="bg-surface-container-low"] {
    background:#fff!important;
    border:1px solid var(--border)!important;
}
main.w-full section [class*="bg-surface-container-high"],
main.w-full section [class*="bg-surface-container"] {
    background:#f8fbf9!important;
}
main.w-full [class*="bg-primary-container"],
main.w-full [class*="bg-primary"] {
    background:var(--green)!important;
    color:#fff!important;
}
main.w-full [class*="text-primary"] {
    color:var(--green)!important;
}
main.w-full [class*="text-on-surface-variant"],
main.w-full .text-slate-500 {
    color:var(--muted)!important;
}
main.w-full [class*="bg-green-50"] {
    background:var(--green-soft)!important;
    color:var(--green)!important;
}
main.w-full [class*="text-green-700"],
main.w-full [class*="text-green-600"] {
    color:var(--green)!important;
}
/* Dashboard welcome header */
main.w-full>div>section.relative {
    background:#fff!important;
    border:1px solid var(--border)!important;
    border-radius:14px!important;
    box-shadow:0 2px 10px rgba(20,55,38,.04)!important;
    padding:22px!important;
}
main.w-full>div>section.relative .absolute {
    display:none!important;
}
/* Dashboard statistic cards */
main.w-full>div>section.grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
    gap:14px!important;
}
main.w-full>div>section.grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>div {
    padding:18px!important;
    border-radius:14px!important;
    background:#fff!important;
    border:1px solid var(--border)!important;
    box-shadow:0 2px 10px rgba(20,55,38,.04)!important;
}
/* Dashboard book photos are intentionally removed; data buku has no cover images */
main.w-full img {
    display:none!important;
}
main.w-full .group:has(img)>div:first-child {
    display:none!important;
}
main.w-full .group:has(img) {
    padding:18px!important;
    gap:0!important;
}
/* Dashboard chart/table sections */
main.w-full>div>section.grid.grid-cols-1.lg\:grid-cols-3>div {
    background:#fff!important;
    border:1px solid var(--border)!important;
    border-radius:14px!important;
    padding:20px!important;
    box-shadow:0 2px 10px rgba(20,55,38,.04)!important;
}
/* status/error accents */
main.w-full [class*="bg-error-container"] {
    background:#fff0ef!important;
    color:var(--danger)!important;
}
.danger-text {
    color:var(--danger)!important;
}
/* Keep dashboard charts readable and restrained */
main.w-full svg {
    max-width:100%;
}
/* settings/report cards */
main.w-full .grid {
    gap:14px!important;
}
/* login page remains governed by its own inline styles */
.binalib-login {
    background:var(--bg)!important;
}
/* responsive */
@media(max-width:900px) {
    .sidebar,
    aside.fixed {
        width:190px!important;
    }
    .main {
        margin-left:190px;
        width:calc(100% - 190px);
    }
    body>div.pl-72 {
        padding-left:190px!important;
    }
    header.fixed {
        left:190px!important;
    }
    .content,
    main.w-full {
        padding:22px 18px!important;
    }
    main.w-full {
        margin-left:190px!important;
        width:calc(100% - 190px)!important;
    }
    .catalog {
        grid-template-columns:1fr 1fr;
    }
    .topbar .search,
    header.fixed input[placeholder*="Cari"] {
        width:230px!important;
    }
}
@media(max-width:680px) {
    .sidebar,
    aside.fixed {
        display:none!important;
    }
    .main {
        margin-left:0;
        width:100%;
    }
    body>div.pl-72 {
        padding-left:0!important;
    }
    header.fixed {
        left:0!important;
    }
    .content,
    main.w-full {
        padding:20px 16px!important;
    }
    main.w-full {
        margin-left:0!important;
        width:100%!important;
    }
    .topbar .search,
    header.fixed input[placeholder*="Cari"] {
        display:none!important;
    }
    .catalog {
        grid-template-columns:1fr;
    }
    .form-grid {
        grid-template-columns:1fr;
    }
    .page-head,
    main.w-full>div>section:first-child:not(.relative) {
        align-items:flex-start!important;
        flex-direction:column!important;
    }
    .student-card.show {
        align-items:flex-start;
        flex-direction:column;
    }
}
.dashboard-actions {
    display:flex;
    gap:8px;
    align-items:center;
}
main.w-full>div>section:nth-of-type(3) {
    display:none!important;
}
@media(max-width:680px) {
    .dashboard-actions {
        width:100%;
    }
    .dashboard-actions .btn {
        flex:1;
    }
}

/* ===== Global request loading indicator ===== */
#binalib-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 28, 21, .16);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

#binalib-loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.binalib-loading-card {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 40px rgba(6, 78, 44, .14);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.binalib-spinner {
    width: 19px;
    height: 19px;
    border: 2px solid #d8e6de;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: binalib-spin .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes binalib-spin {
    to { transform: rotate(360deg); }
}