/* Custom Color Theme
   Primary: Teal/Cyan - Professional, modern, accessible
   Secondary: Slate - Neutral, versatile
   Accent: Indigo - For links and highlights
   Destructive: Red - For destructive actions
   Success: Green - For confirmations
*/

:root {
    /* Core Palette - Light Mode */
    --teal-50: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;

    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;

    --mocha-400: #94A3B8;
    /* Slate-400 */
    --mocha-500: #64748B;
    /* Slate-500 */
    --mocha-600: #475569;
    /* Slate-600 */
    --mocha-700: #334155;
    /* Slate-700 */

    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-700: #B91C1C;

    --green-500: #22C55E;
    --green-600: #16A34A;
    --green-700: #15803D;

    --amber-500: #F59E0B;
    --amber-600: #D97706;

    /* Semantic Functional Colors - Light Mode */
    --primary-color: var(--teal-600);
    --primary-hover: var(--teal-700);
    --primary-light: var(--teal-100);
    --primary-fg: #FFFFFF;

    --secondary-color: var(--mocha-500);
    --secondary-hover: var(--mocha-600);
    --secondary-fg: #FFFFFF;

    --destructive-color: var(--red-600);
    --destructive-hover: var(--red-700);
    --destructive-fg: #FFFFFF;

    --success-color: var(--green-600);
    --success-hover: var(--green-700);
    --success-fg: #FFFFFF;

    --warning-color: var(--amber-500);
    --warning-hover: var(--amber-600);

    --link-color: var(--indigo-600);
    --link-hover: var(--indigo-700);

    --bg-color: var(--slate-50);
    --surface-color: #FFFFFF;
    --surface-border: var(--slate-200);

    --text-color: var(--slate-800);
    --text-muted: var(--slate-500);

    --sidebar-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --border-color: var(--slate-200);
    --input-bg: #FFFFFF;
    --input-border: var(--slate-300);

    --hover-bg: var(--slate-100);

    --header-text: var(--slate-900);
}

/* Dark Mode Overrides */
[data-theme='dark'] {
    /* Button colors stay the same in dark mode for consistency */
    --primary-color: var(--teal-600);
    --primary-hover: var(--teal-700);
    --primary-light: var(--teal-800);
    --primary-fg: #FFFFFF;

    --secondary-color: var(--mocha-500);
    --secondary-hover: var(--mocha-600);
    --secondary-fg: #FFFFFF;

    --destructive-color: var(--red-600);
    --destructive-hover: var(--red-700);
    --destructive-fg: #FFFFFF;

    --success-color: var(--green-600);
    --success-hover: var(--green-700);
    --success-fg: #FFFFFF;

    --link-color: var(--teal-200);
    --link-hover: var(--teal-100);

    --bg-color: var(--slate-900);
    --surface-color: var(--slate-800);
    --surface-border: var(--slate-700);

    --text-color: var(--slate-100);
    --text-muted: var(--slate-400);

    --sidebar-bg: var(--slate-800);
    --card-bg: var(--slate-800);
    --border-color: var(--slate-700);
    --input-bg: var(--slate-900);
    --input-border: var(--slate-600);

    --hover-bg: var(--slate-700);

    --header-text: #FFFFFF;

    /* Invert logo for dark mode visibility */
    --logo-filter: invert(1);
}

/* Global Resets & Utilities */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

#app,
.page {
    background-color: var(--bg-color);
}

/* Improved Typography Contrast */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--header-text) !important;
}

/* Placeholders (Search, Forms) */
::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}

[data-theme='dark'] ::placeholder {
    color: #6B7280 !important;
    /* Lighter gray for visibility on dark */
    opacity: 1;
}

/* Links */
a,
.btn-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
.btn-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Buttons - Primary (main actions like Peek, Send) */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-fg) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--primary-fg) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-fg) !important;
}

/* Buttons - Secondary (cancel, back, less important actions) */
.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-fg) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
}

.btn-outline-secondary {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-fg) !important;
}

/* Buttons - Success (Send message, confirmations) */
.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--success-fg) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-success:hover:not(:disabled) {
    background-color: var(--success-hover) !important;
    border-color: var(--success-hover) !important;
}

/* Buttons - Danger/Destructive (Delete, Purge) */
.btn-danger {
    background-color: var(--destructive-color) !important;
    border-color: var(--destructive-color) !important;
    color: var(--destructive-fg) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--destructive-hover) !important;
    border-color: var(--destructive-hover) !important;
}

.btn-outline-danger {
    color: var(--destructive-color) !important;
    border-color: var(--destructive-color) !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: var(--destructive-color) !important;
    border-color: var(--destructive-color) !important;
    color: var(--destructive-fg) !important;
}

/* Buttons - Info (Monitor, secondary features) */
.btn-info {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-fg) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-info:hover:not(:disabled) {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
}

/* Buttons - Warning */
.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: var(--slate-900) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-warning:hover:not(:disabled) {
    background-color: var(--warning-hover) !important;
    border-color: var(--warning-hover) !important;
}

/* Sidebar & NavMenu specific fixes */
.sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-color) !important;
}

.nav-header {
    color: var(--header-text);
    border-bottom: 1px solid var(--border-color);
}

.folder-header {
    color: var(--text-color);
    font-weight: 500;
}

.folder-header:hover {
    color: var(--text-color);
}

.folder-header:hover span {
    color: var(--primary-color);
}

.recent-namespace-tile:hover {
    color: var(--text-color) !important;
}

.user-section {
    color: var(--text-color);
}

/* Resubmit modal delete option - styled as warning */
.resubmit-delete-option {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning-color);
}

.resubmit-delete-option .form-check-input:checked {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

/* Input Fields */
.form-control,
.form-select,
textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.25) !important;
}

/* Explorer Page Specifics */
.explorer-namespace-title {
    color: var(--header-text);
    font-weight: 700;
}

.entity-column-header {
    background-color: var(--hover-bg) !important;
    color: var(--header-text) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

/* Entity List Items */
.entity-item {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.entity-item:hover {
    background-color: var(--hover-bg) !important;
}

.entity-item.active {
    background-color: var(--primary-color) !important;
    color: var(--primary-fg) !important;
    border-color: var(--primary-color);
}

/* Custom Favorites Toggle Button (Explorer) */
.favorite-toggle-btn {
    background: none;
    border: none;
    color: #F59E0B;
    /* Amber */
    font-size: 1.75rem;
    /* Match the visual weight of H1 */
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.favorite-toggle-btn:hover {
    transform: scale(1.2);
    color: #D97706;
    /* Amber-600 */
}

.favorite-toggle-btn.not-favorited {
    color: var(--text-muted);
    /* Gray when not favorite */
    opacity: 0.5;
}

.favorite-toggle-btn.not-favorited:hover {
    color: #F59E0B;
    opacity: 1;
}

/* Rename Button (Explorer) */
.rename-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.rename-btn:hover {
    color: var(--primary-color);
    opacity: 1;
}

.namespace-rename-input {
    font-size: 1.5rem;
    font-weight: 600;
    max-width: 400px;
}

/* Namespace Cards (Home) */
.namespace-card {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.namespace-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--surface-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
    border: 2px solid var(--surface-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Alerts */
.alert-info {
    background-color: rgba(13, 148, 136, 0.1) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
}

[data-theme='dark'] .alert-info {
    background-color: rgba(20, 184, 166, 0.1) !important;
    color: var(--teal-200) !important;
}

/* Alert success/warning in dark mode - ensure text is readable */
[data-theme='dark'] .alert-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: #198754 !important;
    color: #75d9a3 !important;
}

[data-theme='dark'] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: #ffc107 !important;
    color: #ffda6a !important;
}

[data-theme='dark'] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: #dc3545 !important;
    color: #f8a9b0 !important;
}

/* Modal Fixes */
.modal-content {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color) !important;
}

[data-theme='dark'] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Accordion styling for dark mode */
.accordion-item {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

.accordion-button {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

.accordion-button::after {
    filter: var(--bs-accordion-btn-icon-filter, none);
}

[data-theme='dark'] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.accordion-body {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

/* Toast Notifications - use theme colors */
.toast.bg-success {
    background-color: var(--primary-color) !important;
}

.toast.bg-danger {
    background-color: var(--destructive-color) !important;
}

.toast.bg-warning {
    background-color: var(--warning-color) !important;
}

.toast.bg-info {
    background-color: var(--primary-color) !important;
}

/* Message List Preview Hover */
.message-preview-container {
    position: relative;
    width: 100%;
}

.message-preview-line {
    cursor: text;
    display: block;
    width: 100%;
}

.message-preview-tooltip {
    display: none;
    position: fixed;
    /* Anchored to viewport/mouse */
    top: calc(var(--mouse-y, 0px) + 15px);
    left: calc(var(--mouse-x, 0px) + 15px);
    z-index: 1050;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    border-radius: 1rem;
    /* Fully rounded bubble */
    width: auto;
    min-width: 300px;
    max-width: 500px;
    white-space: pre-wrap;
    word-break: break-word;
    /* Better wrapping */
    max-height: 300px;
    overflow-y: auto;
    color: var(--text-color);
    cursor: text;
}

.message-preview-line {
    cursor: pointer;
    /* Same as row */
    display: block;
    width: 100%;
}

.message-item {
    cursor: pointer;
}

.message-preview-container:hover .message-preview-tooltip {
    display: block;
}

/* Search Input in Message List Header */
.message-search {
    position: relative;
    max-width: 250px;
}

.message-search .form-control {
    padding-right: 2rem;
}

.message-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

mark {
    background-color: rgba(245, 158, 11, 0.3);
    /* Low opacity warning color */
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Tabs Dark Mode Fixes & Styling */
.nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
    padding: 0.25rem 0.75rem;
    /* Shorter vertically */
    font-size: 0.9rem;
    background-color: transparent;
    border-radius: 0.25rem 0.25rem 0 0;
    margin-right: 2px;
}

/* Inactive tabs in dark mode - make them darker/subtle */
[data-theme='dark'] .nav-tabs .nav-link {
    background-color: rgba(0, 0, 0, 0.2);
    /* Darker than surface */
    color: var(--slate-400);
}

.nav-tabs .nav-link:hover {
    color: var(--text-color);
    background-color: var(--hover-bg);
}

.nav-tabs .nav-link.active {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: var(--surface-color) !important;
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* Ensure active tab looks connected */
[data-theme='dark'] .nav-tabs .nav-link.active {
    background-color: var(--surface-color) !important;
    color: var(--primary-color) !important;
    border-bottom-color: var(--surface-color) !important;
}

/* Table Dark Mode Fixes */
.table {
    color: var(--text-color) !important;
    --bs-table-color: var(--text-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--hover-bg);
}

.table> :not(caption)>*>* {
    color: var(--text-color) !important;
    /* Force text color on all cells */
}

[data-theme='dark'] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-color) !important;
}

/* Helper Text / Form Text Visibility */
.form-text,
.text-muted {
    color: var(--text-muted) !important;
}

[data-theme='dark'] .form-text,
[data-theme='dark'] .text-muted {
    color: var(--slate-300) !important;
    /* Lighter grey for better contrast on dark */
    opacity: 0.9;
}

/* Dropdown Menu - Dark Mode */
[data-theme='dark'] .dropdown-menu {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

[data-theme='dark'] .dropdown-item {
    color: var(--text-color);
}

[data-theme='dark'] .dropdown-item:hover,
[data-theme='dark'] .dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

[data-theme='dark'] .dropdown-header {
    color: var(--slate-400);
}

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

/* Ensure muted text inside active items is readable (light mode & dark mode) */
.dropdown-item.active .text-muted,
.dropdown-item:active .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme='dark'] .dropdown-item.active,
[data-theme='dark'] .dropdown-item:active {
    background-color: var(--primary-color);
    color: #FFFFFF;
}