/* Zeybox Modern UI — responsive overlay for admin panel */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --zb-primary: #4f46e5;
    --zb-primary-dark: #3730a3;
    --zb-primary-light: #818cf8;
    --zb-accent: #06b6d4;
    --zb-success: #10b981;
    --zb-danger: #ef4444;
    --zb-warning: #f59e0b;
    --zb-surface: #ffffff;
    --zb-surface-2: #f8fafc;
    --zb-border: #e2e8f0;
    --zb-text: #0f172a;
    --zb-text-muted: #64748b;
    --zb-sidebar: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
    --zb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --zb-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --zb-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
    --zb-radius: 12px;
    --zb-radius-lg: 16px;
    --zb-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base typography */
body,
.sidebar,
.topbar,
.card,
.modal,
.btn,
.form-control {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    background: var(--zb-surface-2) !important;
    color: var(--zb-text);
    -webkit-font-smoothing: antialiased;
}

/* Preloader */
#preloader {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(8px);
}

#preloader .preloader span {
    background: var(--zb-primary-light) !important;
    border-radius: 50%;
}

/* Sidebar */
.sidebar.bg-gradient-primary {
    background: var(--zb-sidebar) !important;
    box-shadow: var(--zb-shadow-lg);
    transition: width 0.25s ease, min-width 0.25s ease;
}

body.sidebar-toggled .sidebar {
    transition: width 0.25s ease, min-width 0.25s ease;
}

.sidebar .nav-item .nav-link {
    border-radius: 10px;
    margin: 2px 0.75rem;
    padding: 0.75rem 1rem !important;
    transition: var(--zb-transition);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.sidebar .nav-item .nav-link i {
    opacity: 0.85;
    width: 1.25rem;
}

.sidebar-brand {
    padding: 1.25rem 1rem !important;
}

.sidebar .sidebar-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
    margin: 0.5rem 1rem !important;
}

.sidebar .collapse-inner {
    border-radius: var(--zb-radius) !important;
    box-shadow: var(--zb-shadow) !important;
}

.sidebar .collapse-item {
    border-radius: 8px;
    margin: 2px 8px;
    transition: var(--zb-transition);
    font-weight: 500;
}

.sidebar .collapse-item:hover {
    background: #eef2ff !important;
    color: var(--zb-primary) !important;
}

.sidebar-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--zb-radius) !important;
    backdrop-filter: blur(4px);
}

.sidebar-card .btn-success {
    background: #25d366 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
}

/* Topbar */
.topbar {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--zb-border) !important;
    box-shadow: var(--zb-shadow-sm) !important;
    padding: 0.75rem 1.5rem !important;
    height: auto !important;
}

.zb-topbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zb-text);
    letter-spacing: -0.01em;
}

.zb-topbar-subtitle {
    font-size: 0.75rem;
    color: var(--zb-text-muted);
    font-weight: 500;
}

.topbar .img-profile {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--zb-border);
}

.topbar .dropdown-menu {
    border: 1px solid var(--zb-border) !important;
    border-radius: var(--zb-radius) !important;
    box-shadow: var(--zb-shadow-lg) !important;
    padding: 0.5rem !important;
}

.topbar .dropdown-item {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
}

.topbar .dropdown-item:hover {
    background: #eef2ff !important;
    color: var(--zb-primary) !important;
}

#sidebarToggleTop {
    color: var(--zb-primary) !important;
    font-size: 1.25rem;
}

/* Page headings */
.zb-page-header {
    margin-bottom: 1.5rem;
}

.zb-page-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--zb-text);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.zb-page-header p {
    color: var(--zb-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Stat cards */
.zb-stat-card {
    border: 1px solid var(--zb-border) !important;
    border-radius: var(--zb-radius-lg) !important;
    background: var(--zb-surface) !important;
    box-shadow: var(--zb-shadow-sm) !important;
    transition: var(--zb-transition);
    overflow: hidden;
    position: relative;
}

.zb-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zb-primary), var(--zb-accent));
    opacity: 0;
    transition: var(--zb-transition);
}

.zb-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--zb-shadow-lg) !important;
    border-color: var(--zb-primary-light) !important;
}

.zb-stat-card:hover::before {
    opacity: 1;
}

.zb-stat-card .card-body {
    padding: 1.25rem !important;
}

.zb-stat-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    color: var(--zb-primary) !important;
}

.zb-stat-value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--zb-text) !important;
}

.zb-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: var(--zb-primary);
    font-size: 1.25rem;
}

/* Cards */
.card {
    border: 1px solid var(--zb-border) !important;
    border-radius: var(--zb-radius-lg) !important;
    box-shadow: var(--zb-shadow-sm) !important;
    overflow: hidden;
}

.card-header {
    background: var(--zb-surface) !important;
    border-bottom: 1px solid var(--zb-border) !important;
    padding: 1rem 1.25rem !important;
}

.card-header h6 {
    font-weight: 700 !important;
    color: var(--zb-text) !important;
    font-size: 0.95rem !important;
}

/* Tables */
.table-responsive {
    border-radius: 0 0 var(--zb-radius-lg) var(--zb-radius-lg);
}

.zb-table thead tr,
.table thead tr {
    background: linear-gradient(135deg, var(--zb-primary) 0%, var(--zb-primary-dark) 100%) !important;
    color: #fff !important;
}

.zb-table thead th,
.table thead th {
    border: none !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.875rem 1rem !important;
    white-space: nowrap;
}

.zb-table tbody tr,
.table tbody tr {
    transition: var(--zb-transition);
}

.zb-table tbody tr:hover,
.table tbody tr:hover {
    background: #f1f5f9 !important;
}

.zb-table tbody td,
.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
    border-color: var(--zb-border) !important;
    font-size: 0.85rem;
}

/* Action buttons */
.zb-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px !important;
    border: none;
    cursor: pointer;
    transition: var(--zb-transition);
    text-decoration: none !important;
}

.zb-action-btn:hover {
    transform: scale(1.08);
    box-shadow: var(--zb-shadow);
}

.zb-action-btn--view {
    background: #eef2ff !important;
    color: var(--zb-primary) !important;
}

.zb-action-btn--view:hover {
    background: var(--zb-primary) !important;
    color: #fff !important;
}

.zb-action-btn--edit {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.zb-action-btn--delete {
    background: #fee2e2 !important;
    color: var(--zb-danger) !important;
}

.zb-action-btn--delete:hover {
    background: var(--zb-danger) !important;
    color: #fff !important;
}

.zb-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: #ecfeff;
    color: #0891b2;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--zb-transition);
    border: 1px solid #a5f3fc;
    cursor: pointer;
}

.zb-link-btn:hover {
    background: #0891b2;
    color: #fff;
    border-color: #0891b2;
}

/* Primary buttons */
.btn-primary {
    background: var(--zb-primary) !important;
    border-color: var(--zb-primary) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3);
    transition: var(--zb-transition);
}

.btn-primary:hover {
    background: var(--zb-primary-dark) !important;
    border-color: var(--zb-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.btn-danger {
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.btn-icon-split {
    border-radius: 10px !important;
    overflow: hidden;
}

/* Badges */
.badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 0.35em 0.65em !important;
}

.badge-info {
    background: #e0e7ff !important;
    color: var(--zb-primary) !important;
}

.badge-primary {
    background: var(--zb-primary) !important;
}

/* Forms */
.form-control,
.form-control-user {
    border-radius: 10px !important;
    border: 1px solid var(--zb-border) !important;
    padding: 0.75rem 1rem !important;
    transition: var(--zb-transition);
    font-size: 0.9rem !important;
}

.form-control:focus,
.form-control-user:focus {
    border-color: var(--zb-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

select.form-control,
select.okumaFormSelect {
    padding: 0 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--zb-primary) !important;
    border-color: var(--zb-primary) !important;
}

/* Content modal */
.zeybox-content-modal .modal-dialog {
    max-width: min(95vw, 1100px);
    margin: 1rem auto;
}

.zeybox-content-modal .modal-content {
    border: none;
    border-radius: var(--zb-radius-lg);
    box-shadow: var(--zb-shadow-lg);
    overflow: hidden;
}

.zeybox-content-modal .modal-header {
    background: var(--zb-surface);
    border-bottom: 1px solid var(--zb-border);
    padding: 1rem 1.25rem;
}

.zeybox-content-modal .modal-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--zb-text);
}

.zeybox-content-modal .modal-body {
    background: var(--zb-surface-2);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.zeybox-content-modal .modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--zb-primary);
}

.zeybox-modal-iframe {
    width: 100%;
    min-height: 70vh;
    border: none;
    border-radius: 0;
    background: #fff;
}

/* Popup report pages inside modal */
.zb-popup-page {
    padding: 1rem;
}

.zb-popup-page .card {
    margin-bottom: 0 !important;
}

/* Image lightbox */
.zeybox-image-modal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.zeybox-image-modal .modal-body {
    padding: 0;
}

.zeybox-image-modal img {
    max-height: 85vh;
    border-radius: var(--zb-radius);
    box-shadow: var(--zb-shadow-lg);
}

.zeybox-image-modal .close {
    position: absolute;
    top: -2rem;
    right: 0;
    color: #fff;
    opacity: 1;
    font-size: 2rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Confirm modal */
#logoutModal .modal-content {
    border: none;
    border-radius: var(--zb-radius-lg);
    box-shadow: var(--zb-shadow-lg);
}

#logoutModal .modal-header {
    border-bottom: 1px solid var(--zb-border);
}

#logoutModal .modal-title {
    font-weight: 700;
}

/* Login page */
.zb-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 50%, #06b6d4 100%) !important;
    position: relative;
    overflow: hidden;
}

.zb-login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.zb-login-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--zb-radius-lg) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
}

.zb-login-card .card-body {
    padding: 2rem !important;
}

.zb-login-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--zb-text) !important;
    letter-spacing: -0.02em;
}

.zb-login-card .btn-primary {
    padding: 0.75rem !important;
    font-size: 0.95rem !important;
}

/* Images in tables */
.personelResim,
.sinifResim {
    border-radius: 8px;
    cursor: pointer;
    transition: var(--zb-transition);
    object-fit: cover;
}

.personelResim {
    width: 40px;
    height: 40px;
}

.personelResim:hover {
    transform: scale(1.1);
    box-shadow: var(--zb-shadow);
}

.sinifResim {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Footer */
.sticky-footer {
    border-top: 1px solid var(--zb-border) !important;
    background: var(--zb-surface) !important;
}

.sticky-footer .copyright {
    font-size: 0.8rem;
    color: var(--zb-text-muted);
    font-weight: 500;
}

/* Scroll to top */
.scroll-to-top {
    background: var(--zb-primary) !important;
    border-radius: 12px !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    box-shadow: var(--zb-shadow-lg) !important;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px !important;
    border: 1px solid var(--zb-border) !important;
    padding: 0.35rem 0.75rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--zb-primary) !important;
    border-color: var(--zb-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    .zb-topbar-title {
        font-size: 0.85rem;
    }

    .zb-stat-value {
        font-size: 1.25rem !important;
    }

    .zeybox-content-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .zeybox-content-modal .modal-body {
        max-height: calc(100vh - 100px);
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .zb-table tbody td,
    .table tbody td {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .zb-page-header h1 {
        font-size: 1.25rem;
    }

    .zb-login-card .card-body {
        padding: 1.5rem !important;
    }

    .zb-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Touch-friendly targets on mobile */
@media (hover: none) and (pointer: coarse) {
    .zb-action-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    .sidebar .nav-item .nav-link {
        padding: 0.875rem 1rem !important;
    }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    .zb-login-page {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* List card wrapper */
.zb-list-card {
    border: none;
    border-radius: var(--zb-radius-lg);
    box-shadow: var(--zb-shadow);
    overflow: hidden;
}

.zb-list-card .card-body {
    padding: 0;
}

.zb-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--zb-surface);
    border-bottom: 1px solid var(--zb-border);
}

.zb-list-toolbar .zb-search {
    flex: 1 1 200px;
    max-width: 320px;
    position: relative;
}

.zb-list-toolbar .zb-search input {
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 2.25rem;
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius);
    font-size: 0.875rem;
    background: #fff;
}

.zb-list-toolbar .zb-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zb-muted);
    font-size: 0.85rem;
}

.zb-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

.zb-action-row--spread {
    justify-content: space-between;
}

.zb-action-row--spread > span {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--zb-muted);
}

@media (max-width: 767.98px) {
    .zb-action-row--spread {
        flex-direction: column;
        align-items: stretch;
    }

    .zb-action-row--spread > span {
        text-align: center;
        margin-bottom: 0.25rem;
    }

    .zb-action-row .btn {
        width: 100%;
        justify-content: center;
    }
}

.zb-table-wrap {
    padding: 0;
}

/* Mobile-friendly table → card rows */
@media (max-width: 767.98px) {
    .zb-mobile-table thead {
        display: none !important;
    }

    .zb-mobile-table tbody tr {
        display: block;
        margin: 0.75rem 1rem;
        padding: 0.85rem 1rem;
        background: #fff;
        border: 1px solid var(--zb-border) !important;
        border-radius: var(--zb-radius);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .zb-mobile-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.45rem 0 !important;
        border: none !important;
        font-size: 0.85rem !important;
        text-align: right;
    }

    .zb-mobile-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--zb-muted);
        text-align: left;
        flex: 0 0 40%;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .zb-mobile-table tbody td[data-label=""]::before,
    .zb-mobile-table tbody td:not([data-label])::before {
        display: none;
    }

    .zb-mobile-table tbody td.zb-td-actions {
        justify-content: flex-end;
        padding-top: 0.65rem !important;
        margin-top: 0.35rem;
        border-top: 1px dashed var(--zb-border) !important;
    }

    .zb-mobile-table tbody td.zb-td-actions::before {
        display: none;
    }

    .zb-mobile-table tbody td.zb-td-primary {
        font-size: 0.95rem !important;
        font-weight: 600;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid var(--zb-border) !important;
        margin-bottom: 0.25rem;
    }

    .zb-mobile-table tbody td.zb-td-primary::before {
        display: none;
    }
}

/* Report popup shell */
.zb-report-shell {
    padding: 0.5rem 0 1rem;
}

.zb-report-header {
    text-align: center;
    padding: 0.5rem 1rem 1rem;
}

.zb-report-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zb-text);
    margin-bottom: 0.35rem;
}

.zb-report-header p {
    font-size: 0.875rem;
    color: var(--zb-muted);
    margin-bottom: 0.25rem;
}

.zb-report-header .zb-report-subtitle {
    font-weight: 600;
    color: var(--zb-primary);
}

.zb-report-search {
    padding: 0 1rem 0.75rem;
}

.zb-report-search input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius);
    font-size: 0.9rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 0.85rem center;
}

.zb-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 1rem 1rem;
}

.zb-report-list-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.zb-report-list-item:hover {
    border-color: var(--zb-primary-light);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
}

.zb-report-list-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--zb-primary-light), #e0e7ff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zb-report-list-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.zb-report-list-body {
    flex: 1;
    min-width: 0;
}

.zb-report-list-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--zb-text);
    margin: 0 0 0.15rem;
    word-break: break-word;
}

.zb-report-list-meta {
    font-size: 0.78rem;
    color: var(--zb-muted);
    margin: 0;
    word-break: break-word;
}

.zb-report-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--zb-muted);
    white-space: nowrap;
}

.zb-report-list-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: var(--zb-radius);
    background: var(--zb-primary);
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s, transform 0.1s;
}

.zb-report-list-action:hover {
    background: var(--zb-primary-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.zb-report-list-action i {
    font-size: 0.9rem;
}

.zb-report-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--zb-muted);
    font-size: 0.9rem;
}

/* Report detail cards */
.zb-report-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.zb-report-detail-card {
    background: #fff;
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius-lg);
    overflow: hidden;
}

.zb-report-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--zb-surface);
    border-bottom: 1px solid var(--zb-border);
}

.zb-report-detail-index {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--zb-primary);
    background: #eef2ff;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

.zb-report-detail-date {
    font-size: 0.78rem;
    color: var(--zb-muted);
}

.zb-report-detail-body {
    max-height: 4.5rem;
    overflow: hidden;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    transition: max-height 0.25s ease;
}

.zb-report-detail-body.is-expanded {
    max-height: none;
}

.zb-report-detail-body b {
    font-weight: 600;
}

.zb-report-detail-toggle {
    display: block;
    width: 100%;
    padding: 0.55rem 1rem;
    border: none;
    border-top: 1px dashed var(--zb-border);
    background: #fafbfc;
    color: var(--zb-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.zb-report-detail-device {
    padding: 0.65rem 1rem 0.85rem;
    font-size: 0.75rem;
    color: var(--zb-muted);
    background: #f8fafc;
    border-top: 1px solid var(--zb-border);
    word-break: break-word;
}

.zb-report-detail-device summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--zb-text);
    margin-bottom: 0.35rem;
}

.zb-report-back {
    margin-top: 0.5rem;
}

@media (max-width: 575.98px) {
    .zb-report-list-item {
        flex-wrap: wrap;
    }

    .zb-report-list-badge {
        order: 3;
        margin-left: calc(42px + 0.85rem);
    }

    .zb-report-list-action {
        order: 4;
        width: 100%;
        margin-top: 0.35rem;
    }
}