/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Theme CSS Variables - Light Theme (Default) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e7f3ff;
    --text-primary: #212529;
    --text-secondary: #666;
    --text-muted: #6c757d;
    --border-color: #ced4da;
    --border-light: #ddd;
    --border-dark: #b3d9ff;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.175);
    --code-bg: #f5f5f5;
    --search-result-odd: #f8f9fb;
    --search-result-even: #f0f0f4;
    --settings-section-bg: #e7f3ff;
    --settings-section-border: #b3d9ff;
    --modal-bg: #fff;
    --dropdown-bg: #fff;
    --autocomplete-bg: #fff;
    --autocomplete-border: #ddd;
    --autocomplete-hover: #f5f5f5;
    --autocomplete-selected: #e8e8e8;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #1e2a3a;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --border-color: #444;
    --border-light: #555;
    --border-dark: #2a4a6a;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --code-bg: #2a2a2a;
    --search-result-odd: #252525;
    --search-result-even: #2a2a2a;
    --settings-section-bg: #1e2a3a;
    --settings-section-border: #2a4a6a;
    --modal-bg: #2d2d2d;
    --dropdown-bg: #2d2d2d;
    --autocomplete-bg: #2d2d2d;
    --autocomplete-border: #444;
    --autocomplete-hover: #3a3a3a;
    --autocomplete-selected: #4a4a4a;
}

/* Layout
-------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 100;
    line-height: 1.1;
    color: var(--text-primary);
}

h1, h2, h3, p {
    margin-bottom: 24px;
}

h1 {
    margin-top: 15px;
}

h2, h3 {
    margin-top: 40px;
}

h4 {
    margin-top: 11px;
    margin-bottom: 11px;
    font-size: 20px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.ms-Icon-ul {
    margin-left: 8px;
}

.ms-Icon-ul li {
    position: relative;
}

.ms-Icon-ul li i.ms-Icon {
    position: absolute;
    left: -24px;
}

.alert {
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem; /* Bootstrap 5 default border-radius */
}

.alert-warning {
    color: #000;
    background-color: #fff4ce;
    border-color: #fff4ce;
}

/* Navigation
-------------------------------------------------- */
#navbar ul {
    margin-left: 0px;
}

.navbar-dark {
    background-color: #004880 !important;
    border-color: #002b4d;
}

/* Dark theme header - darker blue-gray that complements the dark theme */
[data-theme="dark"] .navbar-dark {
    background-color: #1a2a3a !important;
    border-color: #0f1a26;
}

.navbar {
    border-radius: 0;
    display: block;
    flex-wrap: wrap;
    position: relative;
    z-index: 1030;
}

.navbar .nav-item.dropdown {
    position: relative;
}

.navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    margin-top: -0.125rem; /* Negative margin to create slight overlap, eliminating gap */
    min-width: 160px;
}

/* Hover behavior for Admin dropdown - keep menu visible when hovering over link or menu */
.navbar .nav-item.dropdown:hover > .dropdown-menu,
.navbar .nav-item.dropdown .dropdown-menu:hover {
    display: block;
}

/* Ensure dropdown menu is visible and properly positioned */
.navbar .nav-item.dropdown .dropdown-menu {
    pointer-events: auto;
}

/* Custom dropdown toggle caret on the right */
.navbar .dropdown-toggle::after {
    display: none;
}

.navbar .dropdown-toggle-caret {
    display: inline-block;
    margin-left: 0.5rem;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    color: #e3ebf1;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-dark .navbar-nav .nav-link {
    font-weight: 400;
    color: #e3ebf1;
}

.navbar-nav .nav-item a {
    font-weight: 400;
    color: #e3ebf1;
}

.navbar-nav .nav-item {
    display: flex;
    align-items: flex-end;
}

.navbar-nav .nav-link {
    line-height: 1.5;
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-nav .nav-link span {
    display: inline-block;
    line-height: 1.5;
}

/* Dropdown menu styling - use Bootstrap default styling */
.navbar-dark .dropdown-menu {
    /* Bootstrap default dropdown menu styles */
    background-color: var(--dropdown-bg);
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem var(--shadow-lg);
    z-index: 1050;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: left;
    list-style: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.navbar-dark .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--text-primary) !important;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary);
}

/* Dark theme: Better hover color for Admin dropdown items */
[data-theme="dark"] .navbar-dark .dropdown-item:hover,
[data-theme="dark"] .navbar-dark .dropdown-item:focus {
    color: #fff !important;
    background-color: #2a4a6a !important;
}

.navbar-dark .dropdown-item.active,
.navbar-dark .dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #0d6efd;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #e3ebf1;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.active:hover,
.navbar-dark .navbar-nav .nav-link.active:focus {
    background-color: transparent;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link.active:hover {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link.active span {
    padding: 0;
    border-bottom: 1px solid #fff;
    margin-bottom: 0;
    line-height: 1.5;
}

.home-link.navbar-brand {
    display: inline-flex;
    align-items: flex-end;
    padding: 0;
    margin-right: 1rem;
    padding-bottom: 4px;
}

.navbar-logo {
    width: 94px;
    height: 29px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    display: block;
}

.nuget-logo-image {
    background-image: url('../images/logo-header-white-fill.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* LinkyWeb-style small icon buttons */
.action-buttons {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-end;
}
.action-buttons form {
    margin: 0;
}
.action-buttons .btn {
    padding: 4px 8px;
    line-height: 1.1;
    min-width: 32px;
    border-radius: 0;
}

/* Enable/Disable User Button Hover States */
.toggle-active-btn[data-is-active="true"]:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}
.toggle-active-btn[data-is-active="true"]:hover .toggle-active-icon-check {
    display: none !important;
}
.toggle-active-btn[data-is-active="true"]:hover .toggle-active-icon-ban {
    display: inline-block !important;
}

.toggle-active-btn[data-is-active="false"]:hover {
    background-color: transparent !important;
    border-color: var(--bs-success) !important;
    color: var(--bs-success) !important;
}
.toggle-active-btn[data-is-active="false"]:hover .toggle-active-icon-ban {
    display: none !important;
}
.toggle-active-btn[data-is-active="false"]:hover .toggle-active-icon-check {
    display: inline-block !important;
}

/* Toggle Admin Button Hover States */
.toggle-admin-btn[data-is-admin="true"]:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}
.toggle-admin-btn[data-is-admin="true"]:hover .toggle-admin-icon-shield {
    display: none !important;
}
.toggle-admin-btn[data-is-admin="true"]:hover .toggle-admin-icon-slash {
    display: inline-block !important;
}

.toggle-admin-btn[data-is-admin="false"]:hover {
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}
.toggle-admin-btn[data-is-admin="false"]:hover .toggle-admin-icon-slash {
    display: none !important;
}
.toggle-admin-btn[data-is-admin="false"]:hover .toggle-admin-icon-shield {
    display: inline-block !important;
}

/* Delete Button Hover State */
.delete-user-btn:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: var(--bs-white);
}

/* API Key Button - White icon for solid buttons */
.api-key-status-button.btn-success .fa-key,
.api-key-status-button.btn-warning .fa-key {
    color: var(--bs-white) !important;
}

/* Ensure Actions column doesn't have excessive whitespace */
table.table th:last-child,
table.table td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* Outline buttons to mirror LinkyWeb styling */
.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    border: 1px solid #6c757d;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Dark theme for outline secondary buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-primary);
    background-color: transparent;
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus {
    color: #fff;
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Dark theme for default buttons */
[data-theme="dark"] .btn-default {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus {
    color: #fff;
    background-color: #3a3a3a;
    border-color: var(--border-color);
}

.btn-outline-primary {
    color: #0d6efd;
    background-color: transparent;
    border: 1px solid #0d6efd;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}

.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    border: 1px solid #dc3545;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

.btn-outline-success {
    color: #198754;
    background-color: transparent;
    border: 1px solid #198754;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-warning {
    color: #f0ad4e;
    background-color: transparent;
    border: 1px solid #f0ad4e;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    color: #fff;
    background-color: #e09d3e;
    border-color: #e09d3e;
}

/* Solid button hover states - darker colors for better distinction */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e09d3e;
    border-color: #e09d3e;
}

/* Bootstrap Orange button using --bs-orange */
.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc6e0f;
    --bs-btn-hover-border-color: #d0660d;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d0660d;
    --bs-btn-active-border-color: #c55f0c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-orange);
    --bs-btn-disabled-border-color: var(--bs-orange);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
}

.btn-orange:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* Dark theme: Change Search Options and Search buttons from orange to blue */
[data-theme="dark"] .search-container .btn-orange,
[data-theme="dark"] .search-container .btn.btn-orange {
    --bs-btn-bg: #0956cc;
    --bs-btn-border-color: #0956cc;
    --bs-btn-hover-bg: #0b6cff;
    --bs-btn-hover-border-color: #0b6cff;
    background-color: #0956cc !important;
    border-color: #0956cc !important;
}

[data-theme="dark"] .search-container .btn-orange:hover,
[data-theme="dark"] .search-container .btn.btn-orange:hover {
    background-color: #0b6cff !important;
    border-color: #0b6cff !important;
}

[data-theme="dark"] .search-container .btn-orange:active,
[data-theme="dark"] .search-container .btn-orange.active,
[data-theme="dark"] .search-container .btn.btn-orange:active,
[data-theme="dark"] .search-container .btn.btn-orange.active {
    --bs-btn-active-bg: #0848b3;
    --bs-btn-active-border-color: #0848b3;
    background-color: #0848b3 !important;
    border-color: #0848b3 !important;
}

.btn-orange:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-orange:active,
.btn-orange.active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: var(--bs-btn-active-shadow);
}

.btn-md {
    height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.btn-outline-default {
    color: #333;
    background-color: transparent;
    border: 1px solid #ccc;
}
.btn-outline-default:hover,
.btn-outline-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.row-flash-success {
    background-color: #d4edda !important;
}

.row-flash-danger {
    background-color: #f8d7da !important;
}

.row-flash {
    transition: background-color 0.2s ease;
}

.inline-confirm {
    display: none;
}

.inline-confirm.show {
    display: block;
}

.admin-actions {
    margin: 6px 0 4px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-version-panel {
    margin-top: 6px;
}

.admin-version-table th:first-child,
.admin-version-table td:first-child {
    text-align: left;
}

/* Base admin-version-table styles with theme support */
.admin-version-table {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.admin-version-table thead th {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.admin-version-table tbody td {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.version-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

.version-actions .version-page-size {
    margin-bottom: 0;
}

.version-controls {
    min-height: 40px; /* Prevent container from shrinking when buttons are hidden */
}

.version-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 31px; /* Match button height to prevent container shrinking */
}

.version-toolbar > * {
    margin-right: 20px;
}

.version-toolbar > *:last-child {
    margin-right: 0;
}

.version-delete-btn.button-hidden,
.version-cache-btn.button-hidden {
    margin: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    line-height: 0;
}

.version-delete-btn {
    margin-left: 10px;
}

.version-toolbar .version-page-size {
    margin-left: auto;
    padding-top: 2px;
    flex-shrink: 0;
}

.version-toolbar .version-page-size label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
}

.version-toolbar .version-page-size select.form-select-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    min-width: 70px;
    width: auto;
    flex-shrink: 0;
}

.version-delete-btn {
    white-space: nowrap;
}

.version-hidden {
    display: none !important;
}

/* Checkbox styling for Package Versions page */
.checkbox-delete {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #d9534f;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #d43f3a;
    border-radius: 3px;
    position: relative;
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.checkbox-delete:checked {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.checkbox-delete:checked::after {
    content: "✓";
    position: absolute;
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.checkbox-cache {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #5cb85c;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #4cae4c;
    border-radius: 3px;
    position: relative;
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.checkbox-cache:checked {
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.checkbox-cache:checked::after {
    content: "✓";
    position: absolute;
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* Dark theme for checkboxes - background matches row background */
[data-theme="dark"] .checkbox-delete {
    background-color: var(--bg-primary);
    border-color: #d43f3a;
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-delete:checked,
[data-theme="dark"] .checkbox-delete:checked {
    background-color: #d9534f !important;
    border-color: #d43f3a;
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-delete:checked:after {
    color: var(--bg-primary) !important;
}

/* Checkbox in admin version table - match row background */
[data-theme="dark"] .admin-version-table .checkbox-delete,
[data-theme="dark"] .admin-version-table.borderless .checkbox-delete {
    background-color: transparent;
}

[data-theme="dark"] .admin-version-table thead .checkbox-delete {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .admin-version-table tbody tr:hover .checkbox-delete,
[data-theme="dark"] .admin-version-table.borderless tbody tr:hover .checkbox-delete {
    background-color: var(--bg-tertiary);
}

/* Checkmark color matches row background when checked - use row background color */
[data-theme="dark"] .admin-version-table tbody td .checkbox-delete:checked::after,
[data-theme="dark"] .admin-version-table.borderless tbody td .checkbox-delete:checked::after {
    color: var(--bg-primary);
}

[data-theme="dark"] .admin-version-table thead th .checkbox-delete:checked::after {
    color: var(--bg-secondary);
}

[data-theme="dark"] .admin-version-table tbody tr:hover td .checkbox-delete:checked::after,
[data-theme="dark"] .admin-version-table.borderless tbody tr:hover td .checkbox-delete:checked::after {
    color: var(--bg-tertiary);
}

/* Special case for bg-info rows */
[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-delete {
    background-color: rgba(13, 202, 240, 0.2);
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-delete:checked::after {
    color: rgba(13, 202, 240, 0.2);
}

[data-theme="dark"] .checkbox-cache {
    background-color: var(--bg-primary);
    border-color: #4cae4c;
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-cache:checked,
[data-theme="dark"] .checkbox-cache:checked {
    background-color: #5cb85c !important;
    border-color: #4cae4c;
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-cache:checked:after {
    color: var(--bg-primary) !important;
}

/* Checkbox in admin version table - match row background */
[data-theme="dark"] .admin-version-table .checkbox-cache,
[data-theme="dark"] .admin-version-table.borderless .checkbox-cache {
    background-color: transparent;
}

[data-theme="dark"] .admin-version-table thead .checkbox-cache {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .admin-version-table tbody tr:hover .checkbox-cache,
[data-theme="dark"] .admin-version-table.borderless tbody tr:hover .checkbox-cache {
    background-color: var(--bg-tertiary);
}

/* Checkmark color matches row background when checked - use row background color */
[data-theme="dark"] .admin-version-table tbody td .checkbox-cache:checked::after,
[data-theme="dark"] .admin-version-table.borderless tbody td .checkbox-cache:checked::after {
    color: var(--bg-primary);
}

[data-theme="dark"] .admin-version-table thead th .checkbox-cache:checked::after {
    color: var(--bg-secondary);
}

[data-theme="dark"] .admin-version-table tbody tr:hover td .checkbox-cache:checked::after,
[data-theme="dark"] .admin-version-table.borderless tbody tr:hover td .checkbox-cache:checked::after {
    color: var(--bg-tertiary);
}

/* Special case for bg-info rows */
[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-cache {
    background-color: rgba(13, 202, 240, 0.2);
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-cache:checked::after {
    color: rgba(13, 202, 240, 0.2);
}

/* Checkboxes in search results (Index page) - match search result background */
[data-theme="dark"] .search-result .checkbox-cache,
[data-theme="dark"] .search-result .checkbox-delete,
[data-theme="dark"] .search-result .cache-package-checkbox,
[data-theme="dark"] .search-result .delete-package-checkbox {
    background-color: var(--search-result-odd);
}

[data-theme="dark"] .search-result:nth-of-type(even) .checkbox-cache,
[data-theme="dark"] .search-result:nth-of-type(even) .checkbox-delete,
[data-theme="dark"] .search-result:nth-of-type(even) .cache-package-checkbox,
[data-theme="dark"] .search-result:nth-of-type(even) .delete-package-checkbox {
    background-color: var(--search-result-even);
}

/* Checkmark color matches search result background when checked */
[data-theme="dark"] .search-result .checkbox-cache:checked::after,
[data-theme="dark"] .search-result .checkbox-delete:checked::after,
[data-theme="dark"] .search-result .cache-package-checkbox:checked::after,
[data-theme="dark"] .search-result .delete-package-checkbox:checked::after {
    color: var(--search-result-odd);
}

[data-theme="dark"] .search-result:nth-of-type(even) .checkbox-cache:checked::after,
[data-theme="dark"] .search-result:nth-of-type(even) .checkbox-delete:checked::after,
[data-theme="dark"] .search-result:nth-of-type(even) .cache-package-checkbox:checked::after,
[data-theme="dark"] .search-result:nth-of-type(even) .delete-package-checkbox:checked::after {
    color: var(--search-result-even);
}

.admin-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-confirm-dialog {
    background: var(--modal-bg);
    padding: 16px;
    border-radius: 4px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 4px 16px var(--shadow-lg);
    transition: background-color 0.3s ease;
}

.admin-confirm-message {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text-primary);
}

.admin-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.admin-confirm-overlay[hidden] {
    display: none !important;
}

.admin-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-success-dialog {
    background: var(--modal-bg);
    padding: 20px 24px;
    border-radius: 4px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 4px 16px var(--shadow-lg);
    border-left: 4px solid #198754;
    transition: background-color 0.3s ease;
}

.admin-success-message {
    font-size: 15px;
    color: #198754;
    font-weight: 500;
}

.admin-success-overlay[hidden] {
    display: none !important;
}

.admin-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-loading-dialog {
    background: var(--modal-bg);
    padding: 24px 32px;
    border-radius: 4px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 4px 16px var(--shadow-lg);
    text-align: center;
    transition: background-color 0.3s ease;
}

.admin-loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #198754;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.admin-loading-message {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
    transition: color 0.3s ease;
}

.admin-loading-overlay[hidden] {
    display: none !important;
}

.nav-email {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 0;
}

.login-hero {
    min-height: calc(100vh - 140px);
    display: flex;
    justify-content: center;
    padding: 30px 15px;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

.login-card {
    max-width: 420px;
    width: 100%;
    box-shadow: 0 6px 18px var(--shadow);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.login-card-modern {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--bg-primary);
    background-clip: border-box;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.login-card-header {
    background: #0078d4;
    color: #fff;
    padding: 18px 20px;
    text-align: center;
}

.login-card-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.login-card-header i {
    margin-right: 8px;
}

.login-card-body {
    padding: 24px;
}

.mb-20 { margin-bottom: 20px; }
.mb-10 { margin-bottom: 10px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }

.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }

.text-truncate {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.push-attempts-table {
    table-layout: fixed;
    width: 100%;
}

.push-attempts-table th.user-agent-cell,
.push-attempts-table td.user-agent-cell {
    width: 40%;
}

.push-attempts-table .user-agent-text {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-logo {
    font-size: 36px;
    color: #0078d4;
    margin-bottom: 6px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-group-vertical > .btn-block {
    border-radius: 4px;
}

.login-hero .panel-heading {
    border-bottom: none;
    background: transparent;
}

.login-hero .panel-body {
    padding-top: 10px;
}

.login-subtitle {
    margin-bottom: 20px;
    font-size: 14px;
}

.login-card .btn-lg {
    padding: 10px 14px;
    font-size: 16px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    pointer-events: auto;
}

.modal-overlay.show {
    display: flex;
    pointer-events: auto;
}

.modal-dialog {
    background: #fff;
    border-radius: 4px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    max-height: 90vh;
    overflow-y: auto;
    pointer-events: auto;
    position: relative;
    z-index: 1051;
}

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.modal-header.danger {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.modal-body {
    padding: 12px 16px;
}

.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    text-align: right;
}

.search-container {
    padding-top: 16px;
    padding-bottom: 16px;
    display: block !important;
    width: 100%;
}

.search-container .input-group {
    max-width: 100%;
}


/*.search-container .form-control {
    border-radius: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: 0px;
    padding-bottom: 0px;
}*/

/* Search options flyout - Bootstrap dropdown menu styling */
#search-options-flyout {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: -1px;
    min-width: 200px;
    z-index: 1000;
}

/* Position the dropdown relative to the Search Options button */
.search-container .input-group {
    position: relative;
}

/* Show dropdown on hover of Search Options button only - CSS fallback */
#search-options-btn:hover ~ #search-options-flyout {
    display: block !important;
}

/* Keep dropdown visible when hovering over it */
#search-options-flyout:hover {
    display: block !important;
}

/* Custom styling for dropdown items with checkboxes */
.search-option-item.dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    cursor: pointer;
    white-space: nowrap;
}

.search-option-item.dropdown-item:hover {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
}

.search-option-item input[type="checkbox"] {
    margin-right: 0.5rem;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--dropdown-bg);
    transition: background-color 0.3s ease;
}

/* Dark theme for search option checkboxes */
[data-theme="dark"] .search-option-item input[type="checkbox"] {
    background-color: transparent !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .search-option-item input[type="checkbox"]:checked {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-option-item:hover input[type="checkbox"]:not(:checked) {
    background-color: transparent !important;
}

[data-theme="dark"] .search-option-item:hover input[type="checkbox"]:checked {
    background-color: var(--bg-secondary);
}

.search-option-item label {
    margin: 0;
    cursor: pointer;
    font-weight: normal;
    font-size: inherit;
    user-select: none;
    flex: 1;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--autocomplete-bg);
    border: 1px solid var(--autocomplete-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px var(--shadow);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.autocomplete-list li {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s;
    color: var(--text-primary);
}

.autocomplete-list li strong {
    font-size: 0.85em;
    font-weight: 600;
}

.autocomplete-list li:last-child {
    border-bottom: none;
}

.autocomplete-list li:hover,
.autocomplete-list li.selected {
    background-color: var(--autocomplete-hover);
}

.autocomplete-list li:active {
    background-color: var(--autocomplete-selected);
}

/* Search container uses Bootstrap input-group - buttons are inline */
/* Left side: rounded on search input */
/* Header search container - scoped to navbar search only */
.search-container .input-group .form-control {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Ensure all search buttons have borders */
/* Header search buttons - orange border styles */
.search-container .input-group .btn {
    border: 1px solid var(--bs-orange) !important;
    border-left: 0 !important;
}

/* Dark theme: Change search button borders to blue */
[data-theme="dark"] .search-container .input-group .btn {
    border-color: #0956cc !important;
}

/* Search Options button (middle button): darker orange borders on left and right to distinguish it */
.search-container .input-group .btn:not(:last-child) {
    border-radius: 0 !important;
    border-left: 1px solid var(--bs-btn-hover-border-color) !important;
    border-right: 2px solid var(--bs-btn-hover-border-color) !important;
    border-top: 1px solid var(--bs-orange) !important;
    border-bottom: 1px solid var(--bs-orange) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Dark theme: Change Search Options button borders to blue */
[data-theme="dark"] .search-container .input-group .btn:not(:last-child) {
    border-left-color: #0b6cff !important;
    border-right-color: #0b6cff !important;
    border-top-color: #0956cc !important;
    border-bottom-color: #0956cc !important;
}

/* Hover state for Search Options button - darker borders on all sides */
.search-container .input-group .btn:not(:last-child):hover {
    border-left-color: var(--bs-btn-active-border-color) !important;
    border-right-color: var(--bs-btn-active-border-color) !important;
    border-top-color: var(--bs-btn-hover-border-color) !important;
    border-bottom-color: var(--bs-btn-hover-border-color) !important;
}

/* Dark theme: Search Options button hover - use lighter blue */
[data-theme="dark"] .search-container .input-group .btn:not(:last-child):hover {
    border-left-color: #0b6cff !important;
    border-right-color: #0b6cff !important;
    border-top-color: #0b6cff !important;
    border-bottom-color: #0b6cff !important;
}

/* Active state for Search Options button - darkest borders on left and right */
.search-container .input-group .btn:not(:last-child):active,
.search-container .input-group .btn:not(:last-child).active {
    border-left-color: #b8560a !important;
    border-right-color: #b8560a !important;
}

/* Dark theme: Search Options button active state */
[data-theme="dark"] .search-container .input-group .btn:not(:last-child):active,
[data-theme="dark"] .search-container .input-group .btn:not(:last-child).active {
    border-left-color: #0848b3 !important;
    border-right-color: #0848b3 !important;
    border-top-color: #0848b3 !important;
    border-bottom-color: #0848b3 !important;
}

/* Right side: rounded on last button (search submit) - must override Bootstrap's input-group rules */
/* Use multiple selectors with high specificity to ensure this overrides Bootstrap */
/* Header search form - scoped to search-container only */
.search-container #search-form .input-group > .btn:last-child,
.search-container .input-group > .btn:last-child,
.search-container .input-group .btn.btn-orange:last-child,
.search-container .input-group button[type="submit"].btn:last-child,
.search-container .input-group button[type="submit"].btn.btn-orange,
.search-container #search-form .input-group button[type="submit"],
.search-container .input-group > button.btn.btn-orange:last-of-type {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--bs-orange) !important;
    border-top: 1px solid var(--bs-orange) !important;
    border-bottom: 1px solid var(--bs-orange) !important;
    /* Use shorthand to ensure it's applied */
    border-radius: 0 0.375rem 0.375rem 0 !important;
    /* Also set individual properties to be absolutely sure */
    -webkit-border-top-right-radius: 0.375rem !important;
    -webkit-border-bottom-right-radius: 0.375rem !important;
    -moz-border-radius-topright: 0.375rem !important;
    -moz-border-radius-bottomright: 0.375rem !important;
}

/* Dark theme: Search button borders to blue */
[data-theme="dark"] .search-container #search-form .input-group > .btn:last-child,
[data-theme="dark"] .search-container .input-group > .btn:last-child,
[data-theme="dark"] .search-container .input-group .btn.btn-orange:last-child,
[data-theme="dark"] .search-container .input-group button[type="submit"].btn:last-child,
[data-theme="dark"] .search-container .input-group button[type="submit"].btn.btn-orange,
[data-theme="dark"] .search-container #search-form .input-group button[type="submit"],
[data-theme="dark"] .search-container .input-group > button.btn.btn-orange:last-of-type {
    border-right-color: #0956cc !important;
    border-top-color: #0956cc !important;
    border-bottom-color: #0956cc !important;
}

/* Hover state for last button (Search submit) - standard hover */
/* Header search only */
.search-container .input-group .btn:last-child:hover,
.search-container #search-form .input-group button[type="submit"]:hover {
    border-right-color: var(--bs-btn-hover-border-color) !important;
    border-top-color: var(--bs-btn-hover-border-color) !important;
    border-bottom-color: var(--bs-btn-hover-border-color) !important;
}

/* Dark theme: Search button hover - use lighter blue */
[data-theme="dark"] .search-container .input-group .btn:last-child:hover,
[data-theme="dark"] .search-container #search-form .input-group button[type="submit"]:hover {
    border-right-color: #0b6cff !important;
    border-top-color: #0b6cff !important;
    border-bottom-color: #0b6cff !important;
}

/* Active state for last button (Search submit) - standard active */
/* Header search only */
.search-container .input-group .btn:last-child:active,
.search-container .input-group .btn:last-child.active,
.search-container #search-form .input-group button[type="submit"]:active {
    border-right-color: var(--bs-btn-active-border-color) !important;
    border-top-color: var(--bs-btn-active-border-color) !important;
    border-bottom-color: var(--bs-btn-active-border-color) !important;
}

/* Dark theme: Search button active state */
[data-theme="dark"] .search-container .input-group .btn:last-child:active,
[data-theme="dark"] .search-container .input-group .btn:last-child.active,
[data-theme="dark"] .search-container #search-form .input-group button[type="submit"]:active {
    border-right-color: #0848b3 !important;
    border-top-color: #0848b3 !important;
    border-bottom-color: #0848b3 !important;
}

.link-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline;
    margin: 0;
    padding: 0;
    color: #337ab7;
}

.link-button:hover,
.link-button:focus {
    outline: none;
    text-decoration: underline;
    color: #23527c;
}

/* Index page
-------------------------------------------------- */
.search-options {
    margin-bottom: 20px;
}

.package-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    min-height: fit-content;
}

.package-list-header-left {
    flex: 0 0 auto;
    min-width: 200px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 31px; /* Match button height to prevent container shrinking */
}

.package-list-header-left #cache-selected-packages.button-hidden,
.package-list-header-left #delete-selected-packages.button-hidden {
    margin: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
}

.package-list-header-center {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.package-list-header-center h1 {
    margin: 0;
    pointer-events: auto;
}

.package-list-header-right {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    margin-left: auto;
}

.package-count {
    margin: 0;
    font-size: 36px;
    font-weight: 400;
}

.sort-control label {
    margin-right: 8px;
    font-weight: 600;
    position: relative;
    top: 1px;
}

.page-size-control {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(calc(-50% - 10px));
}

.page-size-control label {
    margin: 0;
    position: relative;
    top: 0px;
}

.sort-control .dropdown-menu > .active > a,
.page-size-control .dropdown-menu > .active > a,
.dropdown-menu .dropdown-item.active {
    font-weight: 600;
}

/* Dark theme for general dropdown menus (not navbar) */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
    background-color: transparent;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    color: #fff !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    color: #fff !important;
    background-color: #0d6efd !important;
}

/* Dark theme specifically for Sort By dropdown */
[data-theme="dark"] .sort-control .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sort-control .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .sort-control .dropdown-item:hover,
[data-theme="dark"] .sort-control .dropdown-item:focus {
    color: var(--text-primary) !important;
    background-color: #3a3a3a !important;
}

[data-theme="dark"] .sort-control .dropdown-item.active {
    color: #fff !important;
    background-color: #0d6efd !important;
    font-weight: 600;
}

.page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 15px;
    flex-wrap: wrap;
    position: relative;
}

.page-nav-center {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    justify-content: center;
}

.page-nav .pager {
    margin: 0;
    list-style: none;
    padding-left: 0;
}

.pager-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    list-style: none;
    padding-left: 0;
}

.pager-inline li {
    margin: 0;
    list-style: none;
}

.pager-inline .page-info {
    font-weight: 600;
}

.page-nav .page-info {
    font-weight: 600;
}

.sort-control .dropdown-menu > .active > a {
    font-weight: 600;
}

.search-options span.ms-Checkbox-text {
    font-weight: bold;
    font-size: 16px;
}

.search-options .form-group {
    margin-right: 10px;
}

.search-options select, .search-options #prerelease {
    margin-left: 10px;
}

.search-dropdown {
    margin-left: 5px;
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.search-result {
    padding-top: 15px;
    padding-bottom: 15px;
}

.search-result:nth-of-type(odd) {
    background-color: var(--search-result-odd);
    transition: background-color 0.3s ease;
}

.search-result:nth-of-type(even) {
    background-color: var(--search-result-even);
    transition: background-color 0.3s ease;
}

.search-result .search-result-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search-result .search-result-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.search-result .admin-actions {
    margin-left: auto;
}

.search-result .package-title {
    font-size: 24px;
    font-weight: 300;
    line-height: .9;
    margin-right: 5px;
    color: rgb(51, 122, 183);
    text-decoration: none;
}

.search-result .package-title:hover {
    text-decoration: underline;
}

.search-result .info {
    padding-left: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: -5px;
    line-height: 20px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result .info span:not(:first-child) {
    padding-left: 10px;
}

.search-result .info li {
    display: inline;
}

.search-result .info li + li {
    padding-left: 10px;
    margin-left: 10px;
}

.search-result-description {
    margin-top: 8px;
    color: var(--text-primary);
    line-height: 1.5;
    max-height: 4.5em; /* Limit to approximately 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

/* Style HTML/Markdown content in search results - keep it compact and inline */
.search-result-description p {
    margin: 0 0 0.5em 0;
    display: inline;
}

.search-result-description p:last-child {
    margin-bottom: 0;
}

.search-result-description h1,
.search-result-description h2,
.search-result-description h3,
.search-result-description h4,
.search-result-description h5,
.search-result-description h6 {
    display: inline;
    font-size: inherit;
    font-weight: 600;
    margin: 0;
}

.search-result-description ul,
.search-result-description ol {
    display: inline;
    margin: 0;
    padding-left: 1.5em;
}

.search-result-description li {
    display: inline;
    margin: 0;
}

.search-result-description code {
    background-color: var(--code-bg);
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

.search-result-description pre {
    display: none; /* Hide code blocks in search results */
}

/* Ensure Markdown links are properly styled and clickable */
.search-result-description a {
    color: #0078d4;
    text-decoration: none;
    display: inline;
}

.search-result-description a:hover {
    text-decoration: underline;
}

.search-result-description img {
    display: none; /* Hide images in search results */
}

.search-result-description blockquote {
    display: none; /* Hide blockquotes in search results */
}

.search-result-description table {
    display: none; /* Hide tables in search results */
}

/* Remove formatting from search result descriptions - keep text plain */
/* Force all formatting tags to display as normal text */
.search-result-description strong,
.search-result-description b,
.search-result-description * strong,
.search-result-description * b {
    font-weight: normal !important;
    font-style: normal !important;
}

.search-result-description em,
.search-result-description i,
.search-result-description * em,
.search-result-description * i {
    font-style: normal !important;
    font-weight: normal !important;
}

.search-result-description u,
.search-result-description ins,
.search-result-description * u,
.search-result-description * ins {
    text-decoration: none !important;
}

.search-result-description del,
.search-result-description s,
.search-result-description strike,
.search-result-description * del,
.search-result-description * s,
.search-result-description * strike {
    text-decoration: none !important;
    font-weight: normal !important;
    font-style: normal !important;
}

/* Remove heading formatting - make headings display as normal text */
.search-result-description h1,
.search-result-description h2,
.search-result-description h3,
.search-result-description h4,
.search-result-description h5,
.search-result-description h6,
.search-result-description * h1,
.search-result-description * h2,
.search-result-description * h3,
.search-result-description * h4,
.search-result-description * h5,
.search-result-description * h6 {
    font-size: inherit !important;
    font-weight: normal !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    display: inline !important;
}

/* Ensure all text in search results is plain */
.search-result-description {
    font-weight: normal !important;
    font-style: normal !important;
    text-decoration: none !important;
}

/* But preserve links */
.search-result-description a {
    color: #0078d4 !important;
    text-decoration: none !important;
}

.search-result-description a:hover {
    text-decoration: underline !important;
}

.search-result .ms-Icon {
    position: relative;
    top: 2px;
    margin-right: 2px;
}

.search-result .tags {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabbed instructions, used on upload and package page
-------------------------------------------------- */
.tabbed-info {
    font-size: 0.8em;
    margin-top: 15px;
}

.tabbed-info ul {
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    border: 0;
    width: 750px;
}

.tabbed-info li {
    padding: 0;
    margin-right: 5px;
    margin-bottom: 0;
    float: left;
    position: relative;
    display: block;
}

.tabbed-info li a {
    padding: 5px 10px;
    margin: 0;
    color: #000;
    background-color: #eaeaea;
    border: 0;
    position: relative;
    display: block;
    text-decoration: none;
}

.tabbed-info li.active a {
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    background-color: #002440;
}

.tabbed-info .content {
    display: table;
    width: 100%;
}

.tabbed-info .content .script {
    display: table-cell;
    width: 100%;
    max-width: 1px;
    padding: 8px 40px 8px 10px;
    font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
    line-height: 1.5;
    color: #fff;
    background-color: #002440;
    border-color: #002440;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    vertical-align: top;
}

.tabbed-info .content .script .script-line:before {
    content: "> ";
}

.tabbed-info .content .copy-button {
    display: table-cell;
    vertical-align: top;
    padding: 0;
    width: 1px;
    position: relative;
}

.tabbed-info .content .copy-button button {
    position: absolute;
    top: 0;
    left: -32px;
    bottom: 0;
    min-height: 32px;
    min-width: 32px;
    border-radius: 0px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

/* Package page
-------------------------------------------------- */
.display-package .package-icon {
    margin-top: 15px;
}

@media screen and (max-width: 768px) {
  .display-package .package-icon img {
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
  }

  /* Hide package icons in search results on mobile */
  .search-result .col-sm-1 {
    display: none !important;
  }

  .search-result .col-sm-11 {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Mobile screens (portrait and landscape) - fix sort control overlap */
/* Apply column layout on smaller screens to prevent overlap */
@media screen and (max-width: 1400px) {
  /* Make sort control go to its own line on mobile screens to prevent overlap */
  .package-list-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .package-list-header-center {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    text-align: left !important;
    margin: 10px 0 !important;
    order: 2 !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  .package-list-header-right {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
    order: 3 !important;
    flex: none !important;
  }

  .package-list-header-left {
    order: 1 !important;
    min-width: auto !important;
    width: 100% !important;
  }

  .package-count {
    font-size: 24px;
  }
}

.display-package .package-title {
    word-break: break-word;
    overflow-wrap: break-word;
}

.display-package h1 small {
    margin-left: 10px;
    font-size: 45%;
}

.display-package .tabbed-info {
    margin-bottom: 20px;
}

.display-package .package-description {
    line-height: 1.6;
    word-wrap: break-word;
}

.display-package .package-description p {
    margin-bottom: 1em;
}

.display-package .package-description p:last-child {
    margin-bottom: 0;
}

.display-package .package-description h1,
.display-package .package-description h2,
.display-package .package-description h3,
.display-package .package-description h4,
.display-package .package-description h5,
.display-package .package-description h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.display-package .package-description h1:first-child,
.display-package .package-description h2:first-child,
.display-package .package-description h3:first-child {
    margin-top: 0;
}

.display-package .package-description ul,
.display-package .package-description ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

.display-package .package-description li {
    margin-bottom: 0.5em;
}

.display-package .package-description code {
    background-color: var(--code-bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

.display-package .package-description pre {
    background-color: var(--code-bg);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1em;
    color: var(--text-primary);
}

.display-package .package-description pre code {
    background-color: transparent;
    padding: 0;
}

.display-package .package-description a {
    color: #0078d4;
    text-decoration: none;
}

.display-package .package-description a:hover {
    text-decoration: underline;
}

.display-package .package-description img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
}

.display-package .package-description blockquote {
    border-left: 4px solid var(--border-color);
    padding-left: 1em;
    margin: 1em 0;
    color: var(--text-secondary);
    font-style: italic;
}

.display-package .package-description table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.display-package .package-description table th,
.display-package .package-description table td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    color: var(--text-primary);
}

.display-package .package-description table th {
    background-color: var(--code-bg);
    font-weight: 600;
    color: var(--text-primary);
}

.display-package .package-readme img {
    max-width: 100%;
}

.display-package .package-release-notes {
    white-space: pre-wrap;
}

.package-details-info {
    margin-top: -25px;
}

.package-details-info .ms-Icon-ul li {
    margin-bottom: 15px;
}

.package-details-info .icon {
  position: absolute;
  left: -24px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

/* Dark theme: Change link color in package details info aside */
[data-theme="dark"] .package-details-info a {
    color: #4a9eff !important;
    text-decoration: none;
}

[data-theme="dark"] .package-details-info a:hover,
[data-theme="dark"] .package-details-info a:focus {
    color: #6bb0ff !important;
    text-decoration: none;
}

/* Request access link styling - matches package-details-info links */
.request-access-link {
    color: #0078d4;
    text-decoration: none;
}

.request-access-link:hover,
.request-access-link:focus {
    color: #005a9e;
    text-decoration: underline;
}

[data-theme="dark"] .request-access-link {
    color: #4a9eff !important;
    text-decoration: none;
}

[data-theme="dark"] .request-access-link:hover,
[data-theme="dark"] .request-access-link:focus {
    color: #6bb0ff !important;
    text-decoration: none;
}

.display-package .expandable-section h2 button {
    color: var(--text-primary);
    text-decoration: none;
}

.display-package .expandable-section h2 .fas {
    font-size: 0.6em;
    position: relative;
    top: -2px;
    margin-right: 5px;
}

.display-package .package-used-by td, .display-package .package-used-by th {
  padding: 8px 8px 8px 15px;
}

.display-package .package-used-by thead tr {
  border-bottom: 2px solid var(--border-color);
}

.display-package .package-used-by tbody tr {
  border-bottom: 1px solid var(--border-color);
}

.display-package .package-used-by td div {
  margin-top: 4px;
}

.display-package .package-used-by td span {
  margin-left: 3px;
}

.dependency-groups h4 {
    line-height: 1.4;
}

.dependency-groups h4 > span {
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 3px;
}

.dependency-group li span {
    color: var(--text-secondary);
}

.display-package .version-list .ms-Icon {
    position: relative;
    top: 2px;
    margin-right: 5px;
}

/* Users page search - ensure it uses default Bootstrap styles, not header search orange borders */
/* These rules must come AFTER the search-container rules and have higher specificity */
.user-search-input-group .form-control,
.user-search-input-group .form-control-sm,
.ip-restriction-search-input-group .form-control,
.ip-restriction-search-input-group .form-control-sm {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.user-search-input-group .btn,
.user-search-input-group .btn.btn-outline-secondary,
.ip-restriction-search-input-group .btn,
.ip-restriction-search-input-group .btn.btn-outline-secondary {
    border: 1px solid var(--bs-border-color) !important;
    border-left: 1px solid var(--bs-border-color) !important;
    border-right: 1px solid var(--bs-border-color) !important;
    border-top: 1px solid var(--bs-border-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.user-search-input-group .btn:hover,
.user-search-input-group .btn.btn-outline-secondary:hover,
.ip-restriction-search-input-group .btn:hover,
.ip-restriction-search-input-group .btn.btn-outline-secondary:hover {
    border-color: var(--bs-border-color) !important;
    border-left-color: var(--bs-border-color) !important;
    border-right-color: var(--bs-border-color) !important;
    border-top-color: var(--bs-border-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

.user-search-input-group .btn:active,
.user-search-input-group .btn.active,
.user-search-input-group .btn:focus,
.user-search-input-group .btn.btn-outline-secondary:active,
.user-search-input-group .btn.btn-outline-secondary.active,
.user-search-input-group .btn.btn-outline-secondary:focus,
.ip-restriction-search-input-group .btn:active,
.ip-restriction-search-input-group .btn.active,
.ip-restriction-search-input-group .btn:focus,
.ip-restriction-search-input-group .btn.btn-outline-secondary:active,
.ip-restriction-search-input-group .btn.btn-outline-secondary.active,
.ip-restriction-search-input-group .btn.btn-outline-secondary:focus {
    border-color: var(--bs-border-color) !important;
    border-left-color: var(--bs-border-color) !important;
    border-right-color: var(--bs-border-color) !important;
    border-top-color: var(--bs-border-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

/* Fix btn-group when buttons are in separate forms */
.btn-group form:first-child .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group form:not(:first-child):not(:last-child) .btn {
    border-radius: 0 !important;
}

.btn-group form:last-child .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Version pagination styles */
.pager-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pager-status {
    font-weight: 600;
}

/* Package list pagination styles */
.package-authors {
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* IP Restrictions table on Package page */
#ip-restrictions-container .table-responsive {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: visible;
}

#ip-restrictions-container table {
    width: 100%;
    table-layout: fixed; /* Force column widths to be respected */
    margin-bottom: 0;
    max-width: 100%;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

#ip-restrictions-container table th:nth-child(1),
#ip-restrictions-container table td:nth-child(1) {
    width: 70%;
    max-width: 70%;
    overflow: hidden;
}

#ip-restrictions-container table th:nth-child(2),
#ip-restrictions-container table td:nth-child(2) {
    width: 30%;
    max-width: 30%;
    overflow: hidden;
}

/* Dark theme for IP Restrictions table on Package page */
[data-theme="dark"] #ip-restrictions-container .table-responsive {
    border-color: var(--border-color);
}

[data-theme="dark"] #ip-restrictions-container table {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] #ip-restrictions-container table thead {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] #ip-restrictions-container table thead th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] #ip-restrictions-container table tbody {
    background-color: var(--bg-primary);
}

[data-theme="dark"] #ip-restrictions-container table tbody td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] #ip-restrictions-container table tbody tr {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] #ip-restrictions-container table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] #ip-restrictions-container table tbody tr:hover td {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Table-sm variant in IP restrictions container */
[data-theme="dark"] #ip-restrictions-container table.table-sm thead th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] #ip-restrictions-container table.table-sm tbody td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Code elements in IP restrictions table */
[data-theme="dark"] #ip-restrictions-container table code {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

/* Badges in IP restrictions table */
[data-theme="dark"] #ip-restrictions-container table .badge {
    color: var(--text-primary);
}

/* Force override Bootstrap defaults for IP restrictions table */
[data-theme="dark"] #ip-restrictions-container .table,
[data-theme="dark"] #ip-restrictions-container .table.table-sm {
    --bs-table-bg: var(--bg-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-secondary);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-tertiary);
    --bs-table-active-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-tertiary);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] #ip-restrictions-container .table > :not(caption) > * > *,
[data-theme="dark"] #ip-restrictions-container .table.table-sm > :not(caption) > * > * {
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

[data-theme="dark"] #ip-restrictions-container .table > thead,
[data-theme="dark"] #ip-restrictions-container .table.table-sm > thead {
    --bs-table-bg: var(--bg-secondary);
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] #ip-restrictions-container .table > tbody,
[data-theme="dark"] #ip-restrictions-container .table.table-sm > tbody {
    --bs-table-bg: var(--bg-primary);
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] #ip-restrictions-container .table > thead > tr > th,
[data-theme="dark"] #ip-restrictions-container .table.table-sm > thead > tr > th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] #ip-restrictions-container .table > tbody > tr > td,
[data-theme="dark"] #ip-restrictions-container .table.table-sm > tbody > tr > td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Site Settings Page Styles */
.form-group {
    margin-bottom: 0px;
}

/* Row spacing for responsive columns */
.settings-section .row {
    margin-bottom: 20px;
}

.settings-section .row:last-child {
    margin-bottom: 0;
}

.help-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* Section containers with background colors */
.settings-section {
    background-color: var(--settings-section-bg);
    border: 1px solid var(--settings-section-border);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px var(--shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.section-header {
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 12px;
    margin-bottom: 25px;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-primary);
}

.section-icon {
    font-size: 1.3em;
    color: var(--text-secondary);
}

/* Custom tooltip styling for wider, multi-line tooltips */
.tooltip {
    max-width: 500px !important;
    word-wrap: break-word;
    white-space: normal;
    pointer-events: none;
}

.tooltip-inner {
    max-width: 1000px;
    width: max-content;
    min-width: 250px;
    text-align: left;
    padding: 10px 14px;
    white-space: normal;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.5;
}

/* Ensure labels with tooltips maintain consistent cursor */
label[data-bs-toggle="tooltip"],
label span[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* Prevent tooltip from interfering with hover states */
[data-bs-toggle="tooltip"] {
    position: relative;
}

/* Make all labels bold */
.form-group label,
.settings-section label {
    font-weight: bold !important;
}

/* Form styling improvements - ensure consistent height */
.form-control,
.form-select {
    height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Multi-select elements should use their natural height based on size attribute */
.form-select[multiple] {
    height: auto !important;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}

/* Small form select - override default height to match btn-sm */
.form-select-sm {
    height: calc(1.5em + 0.5rem + 2px) !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Ensure checkboxes align with form controls */
.checkbox {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}

.checkbox label {
    font-weight: bold !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex-shrink: 0;
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease;
}

/* Dark theme for standard form checkboxes */
[data-theme="dark"] .checkbox input[type="checkbox"] {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .checkbox input[type="checkbox"]:checked {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Checkboxes in settings sections */
[data-theme="dark"] .settings-section .checkbox input[type="checkbox"] {
    background-color: var(--settings-section-bg);
}

[data-theme="dark"] .settings-section .checkbox input[type="checkbox"]:checked {
    background-color: var(--bg-secondary);
}

/* Checkboxes in tables */
[data-theme="dark"] .table .checkbox input[type="checkbox"],
[data-theme="dark"] .table input[type="checkbox"] {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .checkbox input[type="checkbox"],
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) input[type="checkbox"] {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) .checkbox input[type="checkbox"],
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) input[type="checkbox"] {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .table tbody tr:hover .checkbox input[type="checkbox"],
[data-theme="dark"] .table tbody tr:hover input[type="checkbox"] {
    background-color: var(--bg-tertiary);
}

/* Standard checkboxes in tables - checkmark color matches row background */
[data-theme="dark"] .table .checkbox input[type="checkbox"]:checked::after,
[data-theme="dark"] .table input[type="checkbox"]:checked::after {
    color: var(--bg-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .checkbox input[type="checkbox"]:checked::after,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) input[type="checkbox"]:checked::after {
    color: var(--bg-secondary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) .checkbox input[type="checkbox"]:checked::after,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) input[type="checkbox"]:checked::after {
    color: var(--bg-primary);
}

[data-theme="dark"] .table tbody tr:hover .checkbox input[type="checkbox"]:checked::after,
[data-theme="dark"] .table tbody tr:hover input[type="checkbox"]:checked::after {
    color: var(--bg-tertiary);
}

/* Checkboxes in table headers */
[data-theme="dark"] .table thead .checkbox input[type="checkbox"],
[data-theme="dark"] .table thead input[type="checkbox"] {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table thead .checkbox input[type="checkbox"]:checked::after,
[data-theme="dark"] .table thead input[type="checkbox"]:checked::after {
    color: var(--bg-secondary);
}

/* Alert improvements */
.alert {
    border-radius: 6px;
    margin-bottom: 25px;
}

/* Modal overlay improvements for cache cleanup */
#cache-result-overlay .modal-header {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

#cache-result-overlay .modal-header.danger {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

#cache-result-overlay .modal-body {
    color: var(--text-primary);
}

.modal-dialog {
    background: var(--modal-bg);
    transition: background-color 0.3s ease;
}

.modal-body {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

#purge-confirm-overlay .modal-header {
    background: #fff3cd;
    color: #856404;
    border-color: #ffc107;
}

/* Additional Dark Theme Support */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Comprehensive Dark Theme Table Support */
[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table thead th {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Dark theme: Override text-dark class in table headers (Users page sort buttons) */
[data-theme="dark"] .table thead th .sort-button,
[data-theme="dark"] .table thead th button.sort-button,
[data-theme="dark"] .table thead th .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table tbody td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table tbody th {
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

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

[data-theme="dark"] .table-sm thead th {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table-sm tbody td {
    color: var(--text-primary);
}

/* Borderless tables in dark theme */
[data-theme="dark"] .table.borderless td,
[data-theme="dark"] .table.borderless th {
    border-color: transparent;
}

[data-theme="dark"] .table.borderless tbody tr {
    border-color: transparent;
}

/* Admin version table dark theme */
[data-theme="dark"] .admin-version-table {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

[data-theme="dark"] .admin-version-table thead {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .admin-version-table thead th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .admin-version-table tbody {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .admin-version-table tbody td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .admin-version-table tbody th {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .admin-version-table tbody tr {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .admin-version-table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .admin-version-table tbody tr:hover td {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Borderless admin version table - still needs background colors */
[data-theme="dark"] .admin-version-table.borderless thead th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .admin-version-table.borderless tbody td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .admin-version-table.borderless tbody tr {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .admin-version-table.borderless tbody tr:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .admin-version-table.borderless tbody tr:hover td {
    background-color: var(--bg-tertiary) !important;
}

/* No-border tbody in admin version table */
[data-theme="dark"] .admin-version-table tbody.no-border td {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .admin-version-table tbody.no-border tr {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .admin-version-table tbody.no-border tr:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .admin-version-table tbody.no-border tr:hover td {
    background-color: var(--bg-tertiary) !important;
}

/* Version row with bg-info class */
[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-delete,
[data-theme="dark"] .admin-version-table tbody tr.version-row.bg-info td .checkbox-cache {
    background-color: transparent !important;
}

/* Links in admin version table */
[data-theme="dark"] .admin-version-table a {
    color: #4a9eff;
    text-decoration: none;
}

[data-theme="dark"] .admin-version-table a:hover {
    color: #6bb0ff;
    text-decoration: none;
}

/* Force override Bootstrap defaults for admin version table */
[data-theme="dark"] .table.admin-version-table,
[data-theme="dark"] .table.borderless.admin-version-table {
    --bs-table-bg: var(--bg-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-secondary);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-tertiary);
    --bs-table-active-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-tertiary);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .table.admin-version-table > :not(caption) > * > *,
[data-theme="dark"] .table.borderless.admin-version-table > :not(caption) > * > * {
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table.admin-version-table > thead,
[data-theme="dark"] .table.borderless.admin-version-table > thead {
    --bs-table-bg: var(--bg-secondary);
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .table.admin-version-table > tbody,
[data-theme="dark"] .table.borderless.admin-version-table > tbody {
    --bs-table-bg: var(--bg-primary);
    background-color: var(--bg-primary) !important;
}

/* Package used-by table dark theme */
[data-theme="dark"] .package-used-by th,
[data-theme="dark"] .package-used-by td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .package-used-by thead tr {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .package-used-by tbody tr {
    border-bottom-color: var(--border-color);
}

/* Table responsive wrapper dark theme */
[data-theme="dark"] .table-responsive {
    border-color: var(--border-color);
}

/* Table links in dark theme */
[data-theme="dark"] .table a {
    color: #0078d4;
    text-decoration: none;
}

[data-theme="dark"] .table a:hover {
    color: #005a9e;
    text-decoration: none;
}

/* Table code elements in dark theme */
[data-theme="dark"] .table code {
    background-color: var(--code-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Table badges in dark theme */
[data-theme="dark"] .table .badge {
    color: var(--text-primary);
}

/* Ensure all table cells have proper text color */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--text-primary);
}

/* Table row hover states that might override striped */
[data-theme="dark"] .table tbody tr:hover td,
[data-theme="dark"] .table tbody tr:hover th {
    color: var(--text-primary);
}

/* Bootstrap table variants */
[data-theme="dark"] .table-bordered {
    border-color: var(--border-color);
}

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

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

/* Table caption dark theme */
[data-theme="dark"] .table caption {
    color: var(--text-secondary);
}

/* Ensure table headers maintain visibility */
[data-theme="dark"] .table thead {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .table thead tr {
    border-color: var(--border-color);
}

/* Table body rows */
[data-theme="dark"] .table tbody tr {
    border-color: var(--border-color);
}

/* Override any Bootstrap default table colors */
[data-theme="dark"] .table > :not(:first-child) {
    border-top-color: var(--border-color);
}

/* Ensure table cells with specific Bootstrap classes */
[data-theme="dark"] .table .table-active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-primary {
    background-color: rgba(13, 110, 253, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-secondary {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-success {
    background-color: rgba(25, 135, 84, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-info {
    background-color: rgba(13, 202, 240, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-light {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table-dark {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Nested tables in dark theme */
[data-theme="dark"] .table .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table .table thead th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .table .table tbody td {
    color: var(--text-primary);
}

/* Table with no-border class */
[data-theme="dark"] .table.no-border td,
[data-theme="dark"] .table.no-border th,
[data-theme="dark"] .table tbody.no-border td,
[data-theme="dark"] .table tbody.no-border th {
    border-color: transparent;
}

/* Table row classes */
[data-theme="dark"] .table tbody tr.bg-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr.bg-primary {
    background-color: rgba(13, 110, 253, 0.2) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr.bg-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr.bg-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr.bg-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary);
}

/* Ensure table links maintain visibility */
[data-theme="dark"] .table a:not(.btn) {
    color: #4a9eff;
    text-decoration: none;
}

[data-theme="dark"] .table a:not(.btn):hover {
    color: #6bb0ff;
    text-decoration: none;
}

/* Table small text */
[data-theme="dark"] .table small {
    color: var(--text-secondary);
}

/* Table code blocks */
[data-theme="dark"] .table code {
    background-color: var(--code-bg);
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 2px;
}

/* Table strong/bold text */
[data-theme="dark"] .table strong,
[data-theme="dark"] .table b {
    color: var(--text-primary);
}

/* Table with vertical alignment */
[data-theme="dark"] .table td[style*="vertical-align"],
[data-theme="dark"] .table th[style*="vertical-align"] {
    color: var(--text-primary);
}

/* Ensure all table text elements are visible */
[data-theme="dark"] .table p,
[data-theme="dark"] .table span,
[data-theme="dark"] .table div {
    color: var(--text-primary);
}

/* Table with specific width constraints */
[data-theme="dark"] .table th[style*="width"],
[data-theme="dark"] .table td[style*="width"] {
    color: var(--text-primary);
}

/* Card body: use same padding on all sides (match left/right; avoid large bottom padding) */
.card .card-body {
    padding: var(--bs-card-spacer-x);
}

[data-theme="dark"] .card {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .badge {
    color: var(--text-primary);
}

/* Ensure Bootstrap components respect dark theme */
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

[data-theme="dark"] .form-select {
    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='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Dark theme for tabbed info */
[data-theme="dark"] .tabbed-info li a {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .tabbed-info li.active a {
    background-color: #002440;
    color: #fff;
}

[data-theme="dark"] .tabbed-info .content .script {
    background-color: #002440;
    color: #fff;
    border-color: #002440;
}

/* ============================================
   Common Utility Classes (from inline styles)
   ============================================ */

/* Layout utilities */
.inline-form {
    display: inline;
    margin: 0;
}

.flex-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.flex-form-item {
    flex: 1 1 260px;
}

.full-width-row {
    width: 100%;
}

.search-form-container {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.search-input-group {
    flex: 1 1 360px;
    min-width: 260px;
}

.inline-block-select {
    display: inline-block;
    width: auto;
    min-width: 70px;
    flex-shrink: 0;
}

/* Ensure form-select-sm has proper sizing in pagination controls */
.pagination-controls .form-select-sm,
.pagination-controls .inline-block-select {
    min-width: 70px;
    width: auto;
    flex-shrink: 0;
}

.pagination-container {
    margin-top: 8px;
}

.pagination-info {
    padding-top: 6px;
}

.pagination-controls {
    gap: 20px;
}

.pagination-rows-label {
    padding-top: 2px;
}

/* Visibility utilities */
.visibility-hidden {
    visibility: hidden;
}

.visibility-hidden-ml {
    visibility: hidden;
    margin-left: 10px;
}

/* Button utilities */
.sort-button {
    border: none;
    background: none;
    cursor: pointer;
}

.sort-icon-inactive {
    opacity: 0.3;
}

/* Form utilities */
.date-filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.date-filter-label {
    margin: 0;
    font-weight: normal;
}

.date-filter-input {
    width: auto;
    display: inline-block;
}

.float-end-mt {
    margin-top: 5px;
}

/* Alert utilities */
.alert-no-margin {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.code-block-container {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #28a745;
}

.code-block-container pre {
    margin: 0;
}

/* ============================================
   Logs Page Styles
   ============================================ */
.logs-page-row {
    margin-bottom: 20px;
}

.logs-btn-group {
    margin-bottom: 10px;
}

.logs-table td {
    vertical-align: top;
}

.logs-table .badge {
    font-size: 11px;
    padding: 3px 6px;
}

.logs-table pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    font-size: 11px;
}

.logs-table .white-space-pre {
    white-space: pre-line;
}

/* More distinct row colors for better contrast - override Bootstrap's table-striped */
.logs-table.table-striped > tbody > tr:nth-of-type(odd) > td,
.logs-table.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #e9ecef !important;
}

.logs-table.table-striped > tbody > tr:nth-of-type(even) > td,
.logs-table.table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: #f5f5f5 !important;
}

.logs-table.table-hover > tbody > tr:hover > td,
.logs-table.table-hover > tbody > tr:hover > th {
    background-color: #dee2e6 !important;
}

/* Override severity-based row colors to work with striped background */
.logs-table.table-striped > tbody > tr.danger:nth-of-type(odd) > td,
.logs-table.table-striped > tbody > tr.danger:nth-of-type(odd) > th {
    background-color: #f5d7d9 !important;
}

.logs-table.table-striped > tbody > tr.danger:nth-of-type(even) > td,
.logs-table.table-striped > tbody > tr.danger:nth-of-type(even) > th {
    background-color: #ffeef0 !important;
}

.logs-table.table-hover > tbody > tr.danger:hover > td,
.logs-table.table-hover > tbody > tr.danger:hover > th {
    background-color: #f1c2c5 !important;
}

.logs-table.table-striped > tbody > tr.warning:nth-of-type(odd) > td,
.logs-table.table-striped > tbody > tr.warning:nth-of-type(odd) > th {
    background-color: #fff3cd !important;
}

.logs-table.table-striped > tbody > tr.warning:nth-of-type(even) > td,
.logs-table.table-striped > tbody > tr.warning:nth-of-type(even) > th {
    background-color: #fff8e6 !important;
}

.logs-table.table-hover > tbody > tr.warning:hover > td,
.logs-table.table-hover > tbody > tr.warning:hover > th {
    background-color: #ffeaa7 !important;
}

.logs-table.table-striped > tbody > tr.info:nth-of-type(odd) > td,
.logs-table.table-striped > tbody > tr.info:nth-of-type(odd) > th {
    background-color: #d1ecf1 !important;
}

.logs-table.table-striped > tbody > tr.info:nth-of-type(even) > td,
.logs-table.table-striped > tbody > tr.info:nth-of-type(even) > th {
    background-color: #e7f3f5 !important;
}

.logs-table.table-hover > tbody > tr.info:hover > td,
.logs-table.table-hover > tbody > tr.info:hover > th {
    background-color: #bee5eb !important;
}

/* Dark theme for logs table */
[data-theme="dark"] .logs-table.table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #2a2a2a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr:nth-of-type(even) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: #333333 !important;
}

[data-theme="dark"] .logs-table.table-hover > tbody > tr:hover > td,
[data-theme="dark"] .logs-table.table-hover > tbody > tr:hover > th {
    background-color: #3a3a3a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr.danger:nth-of-type(odd) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr.danger:nth-of-type(odd) > th {
    background-color: #4a2a2a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr.danger:nth-of-type(even) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr.danger:nth-of-type(even) > th {
    background-color: #5a2a2a !important;
}

[data-theme="dark"] .logs-table.table-hover > tbody > tr.danger:hover > td,
[data-theme="dark"] .logs-table.table-hover > tbody > tr.danger:hover > th {
    background-color: #5a3a3a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr.warning:nth-of-type(odd) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr.warning:nth-of-type(odd) > th {
    background-color: #4a3a2a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr.warning:nth-of-type(even) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr.warning:nth-of-type(even) > th {
    background-color: #5a4a2a !important;
}

[data-theme="dark"] .logs-table.table-hover > tbody > tr.warning:hover > td,
[data-theme="dark"] .logs-table.table-hover > tbody > tr.warning:hover > th {
    background-color: #5a4a3a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr.info:nth-of-type(odd) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr.info:nth-of-type(odd) > th {
    background-color: #2a3a4a !important;
}

[data-theme="dark"] .logs-table.table-striped > tbody > tr.info:nth-of-type(even) > td,
[data-theme="dark"] .logs-table.table-striped > tbody > tr.info:nth-of-type(even) > th {
    background-color: #3a4a5a !important;
}

[data-theme="dark"] .logs-table.table-hover > tbody > tr.info:hover > td,
[data-theme="dark"] .logs-table.table-hover > tbody > tr.info:hover > th {
    background-color: #3a4a6a !important;
}

/* ============================================
   IP Restrictions Page Styles
   ============================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex !important;
}

.modal-dialog-custom {
    background-color: var(--modal-bg);
    border-radius: 5px;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 4px 6px var(--shadow-lg);
    max-height: 95vh;
    overflow-y: auto;
    transition: background-color 0.3s ease;
}

.modal-dialog-custom h3 {
    margin-top: 0;
    color: var(--text-primary);
}

.error-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1060;
    align-items: center;
    justify-content: center;
}

.error-overlay.show {
    display: flex !important;
}

.error-modal {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 5px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 6px var(--shadow-lg);
}

.success-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1060;
    align-items: center;
    justify-content: center;
}

.success-overlay.show {
    display: flex !important;
}

.success-modal {
    background-color: #d1e7dd;
    border: 2px solid #198754;
    border-radius: 5px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 6px var(--shadow-lg);
}

/* Dark theme for modals */
[data-theme="dark"] .modal-dialog-custom {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .error-modal {
    background-color: #4a3a2a;
    border-color: #ffc107;
    color: var(--text-primary);
}

[data-theme="dark"] .success-modal {
    background-color: #2a4a3a;
    border-color: #198754;
    color: var(--text-primary);
}

/* ============================================
   API Keys Page Styles
   ============================================ */
.api-keys-info-margin {
    margin-top: 8px;
}

.api-keys-form-margin {
    margin-top: 8px;
}

/* ============================================
   Upload Page Styles
   ============================================ */
.upload-alert-margin {
    margin-top: 8px;
}

/* ============================================
   Login Page Styles
   ============================================ */
.login-button-margin {
    margin-top: 10px;
}

/* ============================================
   Package Page Styles
   ============================================ */
.package-admin-button-hidden {
    display: none !important;
}

.package-admin-button-hidden-ml {
    display: none !important;
    margin-left: 10px;
}

.package-checkbox-cell {
    width: 32px;
}

/* ============================================
   Index Page Styles
   ============================================ */
.index-search-result-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================
   Layout Styles
   ============================================ */
.search-input-group-relative {
    position: relative;
}

.search-options-flyout-hidden {
    display: none;
}

.autocomplete-dropdown-hidden {
    display: none;
}

/* ============================================
   Users Page Styles
   ============================================ */
.users-icon-display {
    display: none;
}

.users-icon-display-active {
    display: inline-block;
}

/* API Keys Modal Styles */
.api-keys-modal-footer {
    padding: 0;
    border-top: none;
    margin-top: 12px;
}

.api-keys-modal-dialog {
    max-width: 700px;
}

.api-keys-close-button {
    float: right;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-top: -4px;
}

.api-keys-card-margin {
    margin-bottom: 15px;
}

.api-keys-form-group {
    flex: 1 1 260px;
    margin-bottom: 0;
}

.api-keys-text-margin {
    margin-top: 8px;
    margin-bottom: 0;
}

.api-keys-alert-hidden {
    display: none;
    margin-bottom: 15px;
}

.api-keys-code-block {
    word-break: break-all;
    display: block;
    padding: 8px;
    background: var(--code-bg);
    border-radius: 4px;
}

.api-keys-security-text {
    margin-top: 8px;
}

.api-keys-loading {
    text-align: center;
    padding: 20px;
}

.api-keys-content-hidden {
    display: none;
}

/* Dark theme for API keys code block */
[data-theme="dark"] .api-keys-code-block {
    background-color: var(--code-bg);
    color: var(--text-primary);
}

/* Width utilities */
.w-30 {
    width: 30%;
}

.w-100 {
    width: 100%;
}

.white-space-pre {
    white-space: pre-line;
}

/* Dark theme for code blocks */
[data-theme="dark"] .code-block-container {
    background-color: var(--code-bg);
    border-left-color: #28a745;
}

[data-theme="dark"] .code-block-container pre {
    color: var(--text-primary);
}

/* ============================================
   Users Page Error Modal Styles
   ============================================ */
form.inline-form {
    display: inline-block;
    margin: 0;
}

/* Error Modal Styles */
#error-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

#error-overlay.show {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#error-modal {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 5px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 6px var(--shadow-lg);
    margin: auto;
    position: relative;
}

#error-modal .error-header {
    color: #856404;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#error-modal .error-body {
    color: #856404;
    margin-bottom: 15px;
}

#error-modal .error-footer {
    text-align: right;
}

#error-modal .btn-close-error {
    background-color: #ffc107;
    color: #856404;
    border: 1px solid #ffc107;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

#error-modal .btn-close-error:hover {
    background-color: #ffca2c;
    border-color: #ffca2c;
}

/* Dark theme for error modal */
[data-theme="dark"] #error-modal {
    background-color: #4a3a2a;
    border-color: #ffc107;
    color: var(--text-primary);
}

[data-theme="dark"] #error-modal .error-header,
[data-theme="dark"] #error-modal .error-body {
    color: var(--text-primary);
}

[data-theme="dark"] #error-modal .btn-close-error {
    background-color: #ffc107;
    color: #000;
}

[data-theme="dark"] #error-modal .btn-close-error:hover {
    background-color: #ffca2c;
    border-color: #ffca2c;
}