/* Final shared UI polish. Loaded after Bootstrap so it applies consistently. */

:root {
    color-scheme: light;
}

body.dark-mode {
    color-scheme: dark;
}

.login-body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: clamp(12px, 4vw, 24px);
}

.login-card {
    width: min(420px, calc(100vw - 24px));
    max-width: 100%;
}

body {
    text-rendering: optimizeLegibility;
}

/* Install button is shown only when the browser offers PWA installation. */
.pwa-install-button {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1090;
    min-height: 42px;
    padding: 10px 15px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--primary, #198754);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    font-weight: 700;
}

.pwa-install-button[hidden] { display: none !important; }

@media (max-width: 576px) {
    .pwa-install-button {
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        font-size: 13px;
    }
}

html,
body,
.wrapper,
.content {
    max-width: 100%;
}

.content,
.navbar-left,
.navbar-right,
.card,
.card-body,
.row > * {
    min-width: 0;
}

img,
svg,
canvas {
    max-width: 100%;
}

.content .container-fluid {
    padding: clamp(16px, 2.2vw, 28px);
}

.content .container-fluid > :first-child {
    animation: sfFadeUp .28s ease both;
}

/* Wide desktop: preserve readable line lengths without wasting available space. */
@media (min-width: 1600px) {
    .content .container-fluid {
        max-width: 1780px;
        margin-inline: auto;
        padding: 32px 36px;
    }

    .card-body {
        padding: 22px;
    }
}

/* Desktop and laptop. */
@media (min-width: 1200px) and (max-width: 1599px) {
    .content .container-fluid {
        padding: 26px 28px;
    }
}

/* Compact laptops and tablets in landscape. */
@media (min-width: 769px) and (max-width: 1199px) {
    .content .container-fluid {
        padding: 20px;
    }

    .search-box {
        width: min(300px, 30vw);
    }

    .card-body {
        padding: 16px;
    }
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header,
.card-footer {
    background: var(--card-bg);
    border-color: var(--border);
    padding: 15px 18px;
}

.card-body {
    background: var(--card-bg);
    color: var(--text);
}

.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.2;
}

.btn i,
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab {
    margin-right: 0;
}

/* Keep labels centered in every shared button, action control, and status pill. */
.btn,
.login-btn,
.logout-btn,
.table-action,
.table .action-btn,
.btn-icon,
.badge,
.badge-count,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1.2;
    text-align: center;
}

.btn,
.login-btn,
.logout-btn,
.table-action,
.table .action-btn,
.btn-icon {
    gap: 7px;
}

.badge,
.badge-count,
.status-badge {
    min-height: 24px;
    white-space: nowrap;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 1px;
}

.form-control,
.form-select {
    min-height: 44px;
    border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: var(--input-focus);
}

.input-group > .btn {
    min-height: 44px;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.alert .btn-close {
    margin-left: auto;
    flex: 0 0 auto;
}

.alert-success { border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-warning { border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.alert-info { border-color: color-mix(in srgb, var(--info) 30%, transparent); }

.table-responsive {
    border-radius: inherit;
    scrollbar-color: var(--primary) transparent;
}

.table-responsive::after {
    content: 'Swipe horizontally to view more';
    display: none;
    padding: 7px 12px;
    color: var(--text-muted);
    font-size: 11px;
    background: var(--body-secondary);
}

.table th,
.table td {
    vertical-align: middle;
}

.table td .btn,
.table td .table-action {
    vertical-align: middle;
}

/* Shared table controls: present on every table that contains records. */
.data-table-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.data-table-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 180px;
}

.data-table-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.data-table-search .form-control {
    padding-left: 38px;
}

.data-table-filter {
    flex: 0 1 180px;
    min-width: 150px;
}

.data-table-page-size {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.data-table-page-size .form-select {
    width: 74px;
    min-width: 74px;
}

.data-table-status {
    padding: 9px 16px;
    color: var(--text-muted);
    background: var(--card-bg);
    border-inline: 1px solid var(--border);
    font-size: 12px;
}

.data-table-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 16px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.data-table-pagination .btn {
    min-width: 34px;
    min-height: 34px;
    padding: 6px 9px;
}

.data-table-pagination .btn.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.empty-state,
.ui-empty-state {
    padding: clamp(32px, 7vw, 64px) 20px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state > i,
.ui-empty-state > i {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
}

.ui-loading {
    position: relative;
    pointer-events: none;
    opacity: .72;
}

.btn.is-loading {
    cursor: wait;
}

.btn .button-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sfSpin .7s linear infinite;
}

body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .card-body,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--text);
    border-color: var(--border);
}

body.dark-mode .text-muted,
body.dark-mode small.text-muted {
    color: var(--text-muted) !important;
}

body.dark-mode .bg-light,
body.dark-mode .table-light,
body.dark-mode .table-secondary {
    background-color: var(--body-secondary) !important;
    color: var(--text) !important;
}

@media (max-width: 768px) {
    .content .container-fluid {
        padding: 16px 14px;
    }

    .content .container-fluid > .d-flex.justify-content-between,
    .content .container-fluid > .d-flex.align-items-center {
        align-items: stretch !important;
    }

    .content .container-fluid > .d-flex.justify-content-between > .btn,
    .content .container-fluid > .d-flex.justify-content-between > a.btn {
        width: 100%;
    }

    .dashboard-quick-actions {
        align-items: center !important;
        flex: 0 0 auto;
    }

    .dashboard-quick-actions .btn {
        width: auto !important;
        min-height: 42px;
        padding: 8px 12px;
        white-space: nowrap;
    }

    .card-header,
    .card-footer {
        padding: 13px 14px;
    }

    .card-body {
        padding: 14px;
    }

    .card-body.p-0 {
        padding: 0;
    }

    .table-responsive::after {
        display: block;
    }

    .table {
        min-width: 640px;
    }

    .table th,
    .table td {
        padding: 10px 12px;
    }

    .data-table-controls {
        flex-wrap: wrap;
        padding: 12px;
        gap: 8px;
    }

    .data-table-search {
        flex-basis: 100%;
    }

    .data-table-filter {
        flex: 1 1 150px;
    }

    .data-table-page-size {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .data-table-enhanced.table {
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }

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

    .table-responsive:has(.data-table-enhanced) {
        overflow: visible;
        border: 0;
    }

    .data-table-enhanced,
    .data-table-enhanced tbody,
    .data-table-enhanced tr,
    .data-table-enhanced td {
        display: block;
        width: 100%;
    }

    .data-table-enhanced tbody {
        background: transparent;
    }

    .data-table-enhanced tbody tr {
        margin: 0 0 12px;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--card-bg);
        box-shadow: var(--shadow-sm);
    }

    .data-table-enhanced tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 38px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid var(--border-light);
        text-align: right !important;
    }

    .data-table-enhanced tbody td:last-child {
        border-bottom: 0;
    }

    .data-table-enhanced tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        text-align: left;
    }

    .data-table-enhanced tbody td form {
        margin-left: auto;
    }

    .data-table-status {
        padding: 9px 12px;
    }

    .data-table-pagination {
        justify-content: center;
        padding: 10px 12px 12px;
    }

    form .d-flex.gap-2,
    form .d-flex.gap-3,
    .card-body > .d-flex.gap-2,
    .card-body > .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    form .d-flex.gap-2 > .btn,
    form .d-flex.gap-3 > .btn {
        flex: 1 1 160px;
    }
}

/* Tablet portrait and below: the sidebar becomes an overlay and content owns full width. */
@media (max-width: 992px) {
    .content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .top-navbar {
        left: 0 !important;
        width: 100% !important;
        padding-inline: 16px;
    }

    .sidebar {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .content .container-fluid > .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}

@media (max-width: 576px) {
    .content .container-fluid {
        padding: 12px;
    }

    .btn {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .form-control,
    .form-select,
    .input-group > .btn {
        min-height: 42px;
    }

    .alert {
        padding: 11px 12px;
        font-size: 13px;
    }

    .data-table-page-size {
        justify-content: flex-start;
    }

    .data-table-pagination .btn {
        min-width: 32px;
        min-height: 32px;
        padding: 5px 8px;
    }
}

@media (max-width: 480px) {
    .top-navbar {
        height: 60px;
        padding-inline: 10px;
    }

    .content {
        padding-top: 60px;
    }

    .navbar-left,
    .navbar-right {
        gap: 7px;
    }

    .search-box {
        min-width: 0;
        height: 38px;
        padding-inline: 10px;
    }

    .nav-icon,
    .menu-btn {
        min-width: 38px;
        min-height: 38px;
    }

    .content .container-fluid > .d-flex.justify-content-between > .btn,
    .content .container-fluid > .d-flex.justify-content-between > a.btn {
        flex-basis: 100%;
    }

    .dashboard-quick-actions .btn {
        min-height: 40px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .table {
        min-width: 580px;
    }

    .login-card {
        width: min(420px, calc(100vw - 24px));
        padding: 28px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content .container-fluid > :first-child {
        animation: none;
    }
}