/* ==========================================================================
   CatchCorner Admin - Site Styles
   ========================================================================== */

/* ---------- Layout dimensions ---------- */
:root {
    --sidebar-width: 16rem;
    --sidebar-collapsed-width: 3.5rem;
    --header-height: 56px;
}

/* ==========================================================================
   Light-mode palette  (matches Replit source)
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --cc-bg: hsl(0, 0%, 100%);
    --cc-fg: hsl(222, 13%, 15%);
    --cc-border: hsl(220, 9%, 92%);
    --cc-card: hsl(0, 0%, 98%);
    --cc-card-fg: hsl(222, 13%, 15%);
    --cc-muted: hsl(220, 12%, 94%);
    --cc-muted-fg: hsl(222, 10%, 40%);
    --cc-input: hsl(220, 13%, 75%);
    --cc-primary: hsl(217, 91%, 45%);
    --cc-primary-fg: hsl(217, 91%, 98%);
    --cc-secondary: hsl(220, 12%, 93%);
    --cc-secondary-fg: hsl(222, 13%, 15%);
    --cc-destructive: hsl(0, 84%, 48%);
    --cc-accent: hsl(217, 15%, 94%);

    /* Sidebar – light theme (matches Replit) */
    --sidebar-bg: hsl(220, 9%, 96%);
    --sidebar-text: hsl(222, 13%, 15%);
    --sidebar-text-hover: hsl(222, 13%, 5%);
    --sidebar-active-bg: hsl(217, 91%, 45%);
    --sidebar-active-text: hsl(217, 91%, 98%);
    --sidebar-group-text: hsl(222, 10%, 40%);
    --sidebar-border: hsl(220, 9%, 90%);

    /* Header */
    --header-bg: hsl(0, 0%, 100%);
    --header-fg: hsl(222, 13%, 15%);
    --header-border: hsl(220, 9%, 92%);
}

/* ==========================================================================
   Dark-mode palette  (matches Replit source)
   ========================================================================== */
[data-bs-theme="dark"] {
    --cc-bg: hsl(222, 13%, 8%);
    --cc-fg: hsl(220, 9%, 96%);
    --cc-border: hsl(222, 13%, 18%);
    --cc-card: hsl(222, 13%, 10%);
    --cc-card-fg: hsl(220, 9%, 96%);
    --cc-muted: hsl(220, 12%, 17%);
    --cc-muted-fg: hsl(220, 9%, 65%);
    --cc-input: hsl(220, 13%, 35%);
    --cc-primary: hsl(217, 91%, 42%);
    --cc-primary-fg: hsl(217, 91%, 98%);
    --cc-secondary: hsl(220, 12%, 18%);
    --cc-secondary-fg: hsl(220, 9%, 96%);
    --cc-destructive: hsl(0, 84%, 35%);
    --cc-accent: hsl(217, 15%, 18%);

    /* Sidebar – dark theme */
    --sidebar-bg: hsl(222, 13%, 12%);
    --sidebar-text: hsl(220, 9%, 80%);
    --sidebar-text-hover: hsl(220, 9%, 96%);
    --sidebar-active-bg: hsl(217, 91%, 42%);
    --sidebar-active-text: hsl(217, 91%, 98%);
    --sidebar-group-text: hsl(220, 9%, 50%);
    --sidebar-border: hsl(222, 13%, 16%);

    /* Header */
    --header-bg: hsl(222, 13%, 6%);
    --header-fg: hsl(220, 9%, 96%);
    --header-border: hsl(222, 13%, 16%);

    /* --- Bootstrap variable overrides ----------------------------------- */
    --bs-body-bg: hsl(222, 13%, 8%);
    --bs-body-color: hsl(220, 9%, 96%);
    --bs-border-color: hsl(222, 13%, 18%);
    --bs-tertiary-bg: hsl(222, 13%, 12%);
    --bs-secondary-bg: hsl(220, 12%, 17%);
    --bs-secondary-color: hsl(220, 9%, 65%);
    --bs-heading-color: hsl(220, 9%, 96%);
    --bs-emphasis-color: hsl(220, 9%, 96%);
    --bs-link-color: hsl(217, 91%, 55%);
    --bs-link-hover-color: hsl(217, 91%, 65%);
    --bs-code-color: hsl(340, 75%, 68%);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    margin: 0;
    overflow-x: hidden;
}

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

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--header-bg);
    color: var(--header-fg);
    z-index: 1040;
    border-bottom: 1px solid var(--header-border);
}

.app-header .sidebar-toggle {
    border: none;
    line-height: 1;
    color: var(--header-fg);
}

.app-header .sidebar-toggle:hover {
    opacity: 0.8;
}

.app-header .btn-link {
    border: none;
    text-decoration: none;
    color: var(--header-fg);
}

.app-header .btn-link:hover {
    opacity: 0.85;
}

.app-header .fw-semibold {
    color: var(--header-fg);
}

.app-header .dropdown-toggle {
    color: var(--header-fg) !important;
}

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

.app-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    transition: width 0.2s ease, transform 0.2s ease;
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
}

.app-sidebar::-webkit-scrollbar {
    width: 4px;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.sidebar-header {
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-header i,
.sidebar-header .sidebar-text {
    color: var(--sidebar-text) !important;
}

.sidebar-content {
    padding: 0.75rem 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer .text-white,
.sidebar-footer .text-truncate {
    color: var(--sidebar-text) !important;
}

/* Sidebar group */
.sidebar-group {
    margin-bottom: 0.25rem;
}

.sidebar-group-header {
    padding: 0.75rem 1rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-group-text);
    white-space: nowrap;
    overflow: hidden;
}

/* Sidebar link */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}

.sidebar-link i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-link .sidebar-text {
    margin-left: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-link:hover {
    color: var(--sidebar-text-hover);
    background-color: var(--cc-accent);
    text-decoration: none;
}

.sidebar-link.active {
    color: var(--sidebar-active-text);
    background-color: var(--sidebar-active-bg);
    border-left-color: var(--cc-primary);
}

/* Collapsed sidebar */
.app-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.app-sidebar.collapsed .sidebar-group-header {
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.app-sidebar.collapsed .sidebar-text {
    display: none;
}

.app-sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
}

.app-sidebar.collapsed .sidebar-link i {
    margin: 0;
    font-size: 1.1rem;
}

/* Count badges only make sense next to the link text; hide them when collapsed. */
.app-sidebar.collapsed .nav-count-badge,
.app-sidebar.collapsed .nav-count-group {
    display: none !important;
}

/* ==========================================================================
   Main content
   ========================================================================== */

.app-main {
    margin-top: var(--header-height);
    margin-left: var(--sidebar-width);
    min-height: calc(100vh - var(--header-height));
    transition: margin-left 0.2s ease;
}

.app-sidebar.collapsed ~ .sidebar-overlay ~ .app-main,
.app-sidebar.collapsed ~ .app-main {
    margin-left: var(--sidebar-collapsed-width);
}

.main-container {
    max-width: 1600px;
    padding: 1.5rem;
}

/* ==========================================================================
   Mobile sidebar overlay
   ========================================================================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1025;
}

.sidebar-overlay.show {
    display: block;
}

/* Responsive: hide sidebar on mobile */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }

    .app-sidebar.mobile-open {
        transform: translateX(0);
    }

    .app-sidebar.mobile-open .sidebar-group-header {
        visibility: visible;
        height: auto;
        padding: 0.75rem 1rem 0.35rem;
    }

    .app-sidebar.mobile-open .sidebar-text {
        display: inline;
    }

    .app-sidebar.mobile-open .sidebar-link {
        justify-content: flex-start;
        padding-left: 1rem;
        border-left-width: 3px;
    }

    .app-main {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   Auth layout
   ========================================================================== */

.auth-body {
    background-color: hsl(220, 9%, 96%);
}

[data-bs-theme="dark"] .auth-body {
    background-color: var(--cc-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--bs-body-bg);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .auth-card {
    background: var(--cc-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Toast notifications
   ========================================================================== */

.toast-container {
    z-index: 1090 !important;
}

/* ==========================================================================
   General enhancements
   ========================================================================== */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.card {
    border-radius: 0.75rem;
}

/* Subtle table improvements + vertical column borders on all tables */
.table > :not(caption) > * > * {
    padding: 0.65rem 0.75rem;
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
}

/* Darker shadow on cards that contain a table (applies to all table pages) */
.card:has(table) {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Page title spacing */
h4.fw-bold {
    color: var(--bs-heading-color);
}

/* ==========================================================================
   Dark-mode component overrides  (match Replit blue-gray palette)
   ========================================================================== */

/* Cards */
[data-bs-theme="dark"] .card {
    background-color: var(--cc-card);
    border-color: var(--cc-border);
}

[data-bs-theme="dark"] .card .card-header {
    border-bottom-color: var(--cc-border);
}

[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Darker shadow on table cards (dark mode) */
[data-bs-theme="dark"] .card:has(table) {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45) !important;
}

/* Tables */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--cc-accent);
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: var(--cc-border);
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead {
    --bs-table-bg: var(--cc-muted);
    --bs-table-color: var(--cc-fg);
}

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--cc-bg);
    border-color: var(--cc-input);
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--cc-bg);
    border-color: var(--cc-primary);
    color: var(--cc-fg);
    box-shadow: 0 0 0 0.25rem hsla(217, 91%, 45%, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--cc-muted-fg);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--cc-muted);
    border-color: var(--cc-input);
    color: var(--cc-muted-fg);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--cc-bg);
    border-color: var(--cc-input);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--cc-card);
    border-color: var(--cc-border);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--cc-border);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--cc-border);
}

/* Dropdown menus */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--cc-card);
    border-color: var(--cc-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--cc-accent);
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--cc-border);
}

/* Badges */
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: var(--cc-secondary) !important;
    color: var(--cc-secondary-fg) !important;
}

[data-bs-theme="dark"] .badge.bg-info {
    background-color: hsl(217, 91%, 25%) !important;
    color: hsl(217, 91%, 90%) !important;
}

/* Buttons */
[data-bs-theme="dark"] .btn-outline-primary {
    color: hsl(217, 91%, 60%);
    border-color: hsl(217, 91%, 40%);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
    color: var(--cc-primary-fg);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--cc-muted-fg);
    border-color: var(--cc-input);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--cc-muted);
    border-color: var(--cc-input);
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .btn-outline-danger {
    color: hsl(0, 84%, 55%);
    border-color: hsl(0, 84%, 35%);
}

[data-bs-theme="dark"] .btn-outline-success {
    color: hsl(142, 71%, 55%);
    border-color: hsl(142, 71%, 30%);
}

/* Nav tabs */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--cc-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--cc-muted-fg);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--cc-border);
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--cc-bg);
    border-color: var(--cc-border) var(--cc-border) var(--cc-bg);
    color: var(--cc-fg);
}

/* Alerts */
[data-bs-theme="dark"] .alert-danger {
    background-color: hsl(0, 84%, 12%);
    border-color: hsl(0, 84%, 20%);
    color: hsl(0, 84%, 75%);
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background-color: var(--cc-card);
    border-color: var(--cc-border);
    color: var(--cc-fg);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--cc-muted);
    border-color: var(--cc-border);
    color: var(--cc-muted-fg);
}

/* Focus ring */
[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--cc-bg), 0 0 0 0.25rem hsla(217, 91%, 45%, 0.4);
}

/* Toasts in dark mode */
[data-bs-theme="dark"] .toast {
    background-color: var(--cc-card);
    border-color: var(--cc-border);
}

/* Text color helpers */
[data-bs-theme="dark"] .text-muted {
    color: var(--cc-muted-fg) !important;
}

/* Collapse / accordion borders */
[data-bs-theme="dark"] .border-secondary {
    border-color: var(--cc-border) !important;
}

/* ==========================================================================
   Audit Log Action Badges  (match Replit green/blue/red pill style)
   ========================================================================== */

.action-badge-create {
    background-color: hsl(142, 71%, 90%);
    color: hsl(142, 71%, 25%);
}
.action-badge-update {
    background-color: hsl(217, 91%, 90%);
    color: hsl(217, 91%, 30%);
}
.action-badge-delete {
    background-color: hsl(0, 84%, 90%);
    color: hsl(0, 84%, 30%);
}
.action-badge-other {
    background-color: hsl(220, 9%, 90%);
    color: hsl(220, 9%, 30%);
}

[data-bs-theme="dark"] .action-badge-create {
    background-color: hsl(142, 71%, 15%);
    color: hsl(142, 71%, 75%);
}
[data-bs-theme="dark"] .action-badge-update {
    background-color: hsl(217, 91%, 15%);
    color: hsl(217, 91%, 75%);
}
[data-bs-theme="dark"] .action-badge-delete {
    background-color: hsl(0, 84%, 15%);
    color: hsl(0, 84%, 75%);
}
[data-bs-theme="dark"] .action-badge-other {
    background-color: hsl(220, 9%, 20%);
    color: hsl(220, 9%, 70%);
}

/* ==========================================================================
   Searchable Select Component
   ========================================================================== */

.searchable-select {
    position: relative;
    width: 100%;
}

.searchable-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    appearance: none;
    cursor: pointer;
    text-align: left;
    padding-right: 2.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-btn:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.searchable-select-btn.placeholder-text {
    color: var(--bs-secondary-color);
}

.searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    max-height: 300px;
    overflow: hidden;
    flex-direction: column;
}

.searchable-select-dropdown.show {
    display: flex;
}

.searchable-select-search {
    padding: 0.5rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    flex-shrink: 0;
}

.searchable-select-search input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    outline: none;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.searchable-select-search input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

.searchable-select-options {
    overflow-y: auto;
    max-height: 248px;
}

.searchable-select-option {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select-option:hover {
    background-color: var(--bs-tertiary-bg);
}

.searchable-select-option.active {
    background-color: #0d6efd;
    color: #fff;
}

.searchable-select-option.active:hover {
    background-color: #0b5ed7;
}

.searchable-select-group {
    padding: 0.4rem 0.75rem 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    pointer-events: none;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    margin-top: 0.25rem;
}

.searchable-select-group:first-child {
    border-top: none;
    margin-top: 0;
}

.searchable-select-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    font-style: italic;
}