@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,left .3s,top .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;line-height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body{top:35px;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict;z-index:0}.wb-control *,.wb-icon{background-repeat:no-repeat}.wb-drag{height:100%;padding-left:10px;cursor:move}.wb-title{font-family:Arial,sans-serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-icon{display:none;width:20px;height:100%;margin:-1px 8px 0-3px;float:left;background-size:100%;background-position:center}.wb-e,.wb-w{width:10px;top:0}.wb-n,.wb-s{left:0;height:10px;position:absolute}.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e{position:absolute;right:-5px;bottom:0;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{position:absolute;bottom:0;cursor:w-resize;z-index:2}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;position:absolute}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-se,.wb-sw{bottom:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize;z-index:2}.wb-control{float:right;height:100%;max-width:100%;text-align:center}.wb-control *{display:inline-block;width:30px;height:100%;max-width:100%;background-position:center;cursor:pointer}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.wb-body .wb-hide,.wb-show,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min,.wb-full{display:none}.winbox.max .wb-drag,.winbox.min .wb-drag{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center calc(50% + 6px)}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjMgMC0xMiA1LjM3LTEyIDEydjQwYzAgNi42MyA1LjM3IDEyIDEyIDEyaDQwYzYuNjMgMCAxMi01LjM3IDEyLTEyem0tNTIgNGMtMi4yMSAwLTQtMS43OS00LTRWMzZjMC0yLjIxIDEuNzktNCA0LTRoNDBjMi4yMSAwIDQgMS43OSA0IDR2NDBjMCAyLjIxLTEuNzkgNC00IDRINDB6Ii8+PC9zdmc+);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto;background-position:5px center}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-drag,body.wb-lock iframe{pointer-events:none}.winbox.max{box-shadow:none}.winbox.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}body.wb-lock .winbox{will-change:left,top,width,height;transition:none}.winbox.modal:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{content:"";position:absolute;top:-50vh;left:-50vw;right:-50vw;bottom:-50vh;background:#0d1117;animation:wb-fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-shadow{box-shadow:none}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert}

/* Context Menu Styles */
.context-menu{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,0.2);padding:4px 0;min-width:200px}.context-menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;color:#333;transition:background-color 0.15s}.context-menu-item:hover{background-color:#f0f0f0}.context-menu-item i{font-size:16px}.context-menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}

/* Manually Edited Cell */
.manually-edited-cell{background-color:#add8e6!important}
/* CSS Variables for Theme Management */
:root {
    /* Blue Theme (Default) */
    --bg-primary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --bg-secondary: rgba(255, 255, 255, 0.95);
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-inverse: #ffffff;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --navbar-bg: #0d6efd;
    --btn-primary: linear-gradient(45deg, #0d6efd, #0984e3);
    --btn-primary-hover: linear-gradient(45deg, #0b5ed7, #0770d1);
    --dropdown-bg: #ffffff;
    --dropdown-hover: #e3f2fd;
    --table-header: linear-gradient(135deg, #e3f2fd, #f8f9fa);
    --table-border: #0d6efd;
    --focus-ring: rgba(13, 110, 253, 0.25);
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --alert-bg: #f8f9fa;
    --dirty-bg: #fff3cd;
}

/* Light Mode */
[data-theme="light"] {
    --bg-primary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --bg-secondary: rgba(255, 255, 255, 0.98);
    --text-primary: #495057;
    --text-secondary: #6c757d;
    --text-inverse: #495057;
    --border-color: #e9ecef;
    --card-bg: #ffffff;
    --navbar-bg: #f8f9fa;
    --btn-primary: linear-gradient(45deg, #6c757d, #495057);
    --btn-primary-hover: linear-gradient(45deg, #5a6268, #3e444a);
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f8f9fa;
    --table-header: linear-gradient(135deg, #f8f9fa, #ffffff);
    --table-border: #dee2e6;
    --focus-ring: rgba(108, 117, 125, 0.25);
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --alert-bg: #f8f9fa;
    --dirty-bg: #fff3cd;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-primary: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
    --bg-secondary: rgba(33, 37, 41, 0.95);
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --text-inverse: #f8f9fa;
    --border-color: #495057;
    --card-bg: #343a40;
    --navbar-bg: #212529;
    --btn-primary: linear-gradient(45deg, #375a7f, #2c4866);
    --btn-primary-hover: linear-gradient(45deg, #2e4a66, #24394d);
    --dropdown-bg: #343a40;
    --dropdown-hover: #495057;
    --table-header: linear-gradient(135deg, #495057, #343a40);
    --table-border: #6c757d;
    --focus-ring: rgba(55, 90, 127, 0.5);
    --input-bg: #495057;
    --input-border: #6c757d;
    --alert-bg: #343a40;
    --dirty-bg: #6c5d2e;
}

/* Visual feedback for modified fields */
.ims-dirty {
    background-color: var(--dirty-bg) !important;
}

/* Login Page Styles */
.login-body {
    background: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
}

.card {
    border: none;
    border-radius: 15px;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.card-body {
    background: var(--bg-secondary);
    border-radius: 15px;
}

.input-group-text {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    border-right: none;
    color: var(--text-primary);
}

.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus {
    border-left: none;
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
    border-color: var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--btn-primary);
    border: none;
    border-radius: 25px;
    padding: 12px 0;
    font-weight: 600;
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--text-inverse);
}

/* Dashboard Styles */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
}

.dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.dropdown-item {
    padding: 10px 20px;
    transition: background-color 0.2s;
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* Stats Cards */
.bg-primary {
    background: linear-gradient(45deg, #0d6efd, #0984e3) !important;
    color: #000000 !important;
}

.bg-primary .card-title,
.bg-primary h2,
.bg-primary i {
    color: #000000 !important;
}

.bg-success {
    background: linear-gradient(45deg, #198754, #20c997) !important;
    color: #000000 !important;
}

.bg-success .card-title,
.bg-success h2,
.bg-success i {
    color: #000000 !important;
}

.bg-warning {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
    color: #000000 !important;
}

.bg-warning .card-title,
.bg-warning h2,
.bg-warning i {
    color: #000000 !important;
}

.bg-info {
    background: linear-gradient(45deg, #4facfe, #00f2fe) !important;
    color: #000000 !important;
}

.bg-info .card-title,
.bg-info h2,
.bg-info i {
    color: #000000 !important;
}

/* Table Styles */
.tabulator {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--card-bg);
}

.tabulator-header {
    background: var(--table-header);
    border-bottom: 2px solid var(--table-border);
    color: var(--text-primary);
}

.tabulator-col-title {
    color: var(--text-primary);
}

/* Dark mode specific header text fix */
[data-theme="dark"] .tabulator-header {
    color: #000000;
}

[data-theme="dark"] .tabulator-col-title {
    color: #000000;
}

.tabulator-cell {
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
    background-color: transparent;
}

.tabulator-row {
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.tabulator-row:nth-child(even) {
    background-color: var(--alert-bg);
    color: var(--text-primary);
}

.tabulator-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Dark mode specific tabulator fixes */
[data-theme="dark"] .tabulator-row:nth-child(even) {
    background-color: rgba(73, 80, 87, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-row:nth-child(even) .tabulator-cell {
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-row:nth-child(odd) .tabulator-cell {
    color: var(--text-primary);
}

/* Pagination controls for dark mode */
[data-theme="dark"] .tabulator-page {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .tabulator-page:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-page.active {
    background-color: var(--btn-primary);
    color: var(--text-inverse);
}

/* Light mode specific tabulator fixes */
[data-theme="light"] .tabulator-row:nth-child(even) {
    background-color: var(--alert-bg);
    color: var(--text-primary);
}

[data-theme="light"] .tabulator-row:nth-child(even) .tabulator-cell {
    color: var(--text-primary);
}

[data-theme="light"] .tabulator-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="light"] .tabulator-row:nth-child(odd) .tabulator-cell {
    color: var(--text-primary);
}

/* Additional tabulator controls styling */
.tabulator-tableHolder {
    background-color: var(--card-bg);
}

.tabulator-footer {
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Tabulator sorting arrows and controls */
.tabulator-col-sorter {
    color: var(--text-secondary);
}

.tabulator-col-sorter.tabulator-col-sorter-asc,
.tabulator-col-sorter.tabulator-col-sorter-desc {
    color: var(--text-primary);
}

/* Tabulator loading and empty states */
.tabulator-loader {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.tabulator-placeholder {
    color: var(--text-secondary);
    background-color: var(--card-bg);
}

/* Tabulator selection highlighting */
.tabulator-row.tabulator-selected {
    background-color: var(--focus-ring) !important;
    color: var(--text-primary) !important;
}

.tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Dark mode tabulator controls */
[data-theme="dark"] .tabulator-col-sorter {
    color: var(--text-secondary);
}

[data-theme="dark"] .tabulator-col-sorter.tabulator-col-sorter-asc,
[data-theme="dark"] .tabulator-col-sorter.tabulator-col-sorter-desc {
    color: var(--text-primary);
}

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

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

[data-theme="dark"] .tabulator-row.tabulator-selected {
    background-color: rgba(55, 90, 127, 0.3) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Light mode tabulator controls */
[data-theme="light"] .tabulator-row.tabulator-selected {
    background-color: rgba(108, 117, 125, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Tabulator hover effects */
.tabulator-row:hover {
    background-color: var(--dropdown-hover) !important;
    color: var(--text-primary) !important;
}

.tabulator-row:hover .tabulator-cell {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tabulator-row:hover {
    background-color: rgba(73, 80, 87, 0.5) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tabulator-row:hover .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Tabulator header filter styling */
.tabulator-header-filter input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    width: 100%;
}

.tabulator-header-filter input:focus {
    outline: none;
    border-color: var(--table-border);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.tabulator-header-filter input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Dark mode header filter styling */
[data-theme="dark"] .tabulator-header-filter input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

[data-theme="dark"] .tabulator-header-filter input:focus {
    border-color: var(--table-border);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

[data-theme="dark"] .tabulator-header-filter input::placeholder {
    color: var(--text-secondary);
}

/* Light mode header filter styling */
[data-theme="light"] .tabulator-header-filter input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

[data-theme="light"] .tabulator-header-filter input:focus {
    border-color: var(--table-border);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.95);
    }

    .card-body {
        padding: 2rem;
    }

    /* Dark theme mobile menu adjustments */
    [data-theme="dark"] .navbar-nav .dropdown-menu {
        background: rgba(52, 58, 64, 0.95);
        color: var(--text-primary);
    }

    [data-theme="dark"] .navbar-nav .dropdown-item {
        color: var(--text-primary);
    }

    [data-theme="dark"] .navbar-nav .dropdown-item:hover,
    [data-theme="dark"] .navbar-nav .dropdown-item:focus {
        background-color: var(--dropdown-hover);
        color: var(--text-primary);
    }

    /* Dark theme mobile submenu adjustments */
    [data-theme="dark"] .navbar-nav .dropdown-submenu .dropdown-menu {
        background: rgba(52, 58, 64, 0.95);
    }

    [data-theme="dark"] .navbar-nav .dropdown-submenu .dropdown-item {
        color: var(--text-primary);
    }

    [data-theme="dark"] .navbar-nav .dropdown-submenu .dropdown-item:hover {
        background-color: var(--dropdown-hover);
        color: var(--text-primary);
    }

    /* Light theme mobile menu adjustments */
    [data-theme="light"] .navbar-nav .dropdown-menu {
        background: rgba(248, 249, 250, 0.95);
        color: var(--text-primary);
    }

    [data-theme="light"] .navbar-nav .dropdown-item {
        color: var(--text-primary);
    }

    [data-theme="light"] .navbar-nav .dropdown-item:hover,
    [data-theme="light"] .navbar-nav .dropdown-item:focus {
        background-color: var(--dropdown-hover);
        color: var(--text-primary);
    }
}

/* Loading spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Alert styles */
.alert {
    border: none;
    border-radius: 10px;
}

/* Quick actions */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
    border-width: 2px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Navbar Theme Styles */
.navbar {
    background-color: var(--navbar-bg) !important;
}

.navbar-brand {
    color: var(--text-inverse) !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.nav-link:hover {
    color: var(--text-inverse) !important;
}

/* Dark mode navbar adjustments */
[data-theme="dark"] .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--text-primary) !important;
}

/* Light mode navbar adjustments */
[data-theme="light"] .navbar-brand,
[data-theme="light"] .nav-link {
    color: var(--text-primary) !important;
}

.breadcrumb-item.active {
    color: #0d6efd;
}

.breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: #0d6efd;
}

/* Focus states for accessibility */
.btn:focus,
.form-control:focus,
.btn-check:focus + .btn {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Custom blue accent for alerts */
.alert-info {
    background-color: #d1ecf1;
    border-color: #b8daff;
    color: #055160;
}

.alert-primary {
    background-color: #cff4fc;
    border-color: #b6effb;
    color: #0c4a6e;
}

/* Theme Switcher Styles */
.theme-switcher {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.theme-switcher:hover {
    opacity: 0.8;
}

.theme-dropdown {
    position: relative;
    display: inline-block;
}

.theme-dropdown-toggle {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 10px 15px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    transition: all 0.3s ease;
    text-align: left;
}

.theme-dropdown-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.theme-dropdown-toggle::after {
    content: "▼";
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.theme-dropdown.show .theme-dropdown-toggle::after {
    transform: rotate(180deg);
}

.theme-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    padding: 8px 0;
    margin-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.theme-dropdown.show .theme-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 10px;
}

.theme-dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

.theme-dropdown-item.active {
    background: var(--btn-primary);
    color: var(--text-inverse);
}

.theme-dropdown-item.active:hover {
    background: var(--btn-primary-hover);
    color: var(--text-inverse);
}

.theme-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.theme-icon.blue {
    background: linear-gradient(45deg, #0d6efd, #0984e3);
}

.theme-icon.light {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
}

.theme-icon.dark {
    background: linear-gradient(45deg, #343a40, #495057);
}

/* Theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Additional theme adjustments */
.breadcrumb-item.active {
    color: var(--text-primary);
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item a:hover {
    color: var(--text-primary);
}

/* Modal theme support */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.modal-footer {
    border-top: 1px solid var(--border-color);
}

.btn-close {
    filter: var(--bs-btn-close-white-filter, none);
}

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

/* Dark mode specific adjustments */
[data-theme="dark"] body {
    background-color: #1a1a1a;
    color: var(--text-primary);
}

[data-theme="dark"] .bg-primary {
    background: linear-gradient(45deg, #375a7f, #2c4866) !important;
}

[data-theme="dark"] .bg-success {
    background: linear-gradient(45deg, #28a745, #20c997) !important;
}

[data-theme="dark"] .bg-warning {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
}

[data-theme="dark"] .bg-info {
    background: linear-gradient(45deg, #17a2b8, #20c997) !important;
}

/* Dark theme widget text should remain white (override the black from base styles) */
[data-theme="dark"] .bg-primary,
[data-theme="dark"] .bg-success,
[data-theme="dark"] .bg-warning,
[data-theme="dark"] .bg-info {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-primary .card-title,
[data-theme="dark"] .bg-primary h2,
[data-theme="dark"] .bg-primary i,
[data-theme="dark"] .bg-success .card-title,
[data-theme="dark"] .bg-success h2,
[data-theme="dark"] .bg-success i,
[data-theme="dark"] .bg-warning .card-title,
[data-theme="dark"] .bg-warning h2,
[data-theme="dark"] .bg-warning i,
[data-theme="dark"] .bg-info .card-title,
[data-theme="dark"] .bg-info h2,
[data-theme="dark"] .bg-info i {
    color: #ffffff !important;
}

/* Light theme widget text overrides */
[data-theme="light"] .bg-primary,
[data-theme="light"] .bg-success,
[data-theme="light"] .bg-warning,
[data-theme="light"] .bg-info {
    color: #000000 !important;
}

[data-theme="light"] .bg-primary .card-title,
[data-theme="light"] .bg-primary h2,
[data-theme="light"] .bg-primary i,
[data-theme="light"] .bg-success .card-title,
[data-theme="light"] .bg-success h2,
[data-theme="light"] .bg-success i,
[data-theme="light"] .bg-warning .card-title,
[data-theme="light"] .bg-warning h2,
[data-theme="light"] .bg-warning i,
[data-theme="light"] .bg-info .card-title,
[data-theme="light"] .bg-info h2,
[data-theme="light"] .bg-info i {
    color: #000000 !important;
}

/* Widget draggable styles */
.widget-draggable {
    cursor: move;
    transition: all 0.3s ease;
    position: relative;
}

.widget-draggable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.widget-draggable:hover::before {
    opacity: 1;
}

.sortable-chosen {
    opacity: 0.8;
    transform: rotate(5deg);
}

.sortable-ghost {
    opacity: 0.4;
    background: #e9ecef !important;
    border: 2px dashed #adb5bd !important;
}

.sortable-drag {
    transform: rotate(5deg);
    z-index: 1000;
}

/* Drag handle indicator */
.widget-draggable::before {
    content: "⋮⋮";
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    font-size: 16px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure cards are properly positioned for dragging */
#dashboardWidgets .col-md-3,
#dashboardSecondaryWidgets .col-md-8,
#dashboardSecondaryWidgets .col-md-4 {
    margin-bottom: 1.5rem;
}

/* WinBox Theme Styling */
.winbox {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.winbox .wb-header {
    background: var(--navbar-bg) !important;
    color: var(--text-inverse) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.winbox .wb-title {
    color: var(--text-inverse) !important;
}

.winbox .wb-control span {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.winbox .wb-control span:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.winbox .wb-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Dark theme specific WinBox styling */
[data-theme="dark"] .winbox .wb-header {
    background: var(--navbar-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .winbox .wb-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .winbox .wb-control span {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .winbox .wb-control span:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Light theme specific WinBox styling */
[data-theme="light"] .winbox .wb-header {
    background: var(--navbar-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .winbox .wb-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .winbox .wb-control span {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .winbox .wb-control span:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Modal window styles */
.modal-window {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 400px;
    min-height: 300px;
    z-index: 1000;
}

.modal-window-header {
    background: var(--bg-primary);
    color: white;
    padding: 10px 15px;
    border-radius: 8px 8px 0 0;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-window-title {
    flex-grow: 1;
    margin: 0;
    font-size: 16px;
}

.modal-window-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
}

.modal-window-body {
    padding: 20px;
    height: calc(100% - 50px);
    overflow: auto;
}

.modal-window-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

/* Dropdown Submenu Styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
    display: none;
}

.dropdown-submenu:hover .dropdown-menu,
.dropdown-submenu.show .dropdown-menu {
    display: block;
}

.dropdown-submenu .dropdown-toggle::after {
    display: none;
}

.dropdown-submenu .dropdown-toggle {
    position: relative;
}

.dropdown-submenu .dropdown-toggle .bi-chevron-right {
    transition: transform 0.2s ease;
}

.dropdown-submenu:hover .dropdown-toggle .bi-chevron-right,
.dropdown-submenu.show .dropdown-toggle .bi-chevron-right {
    transform: rotate(90deg);
}

/* Dark mode submenu adjustments */
[data-theme="dark"] .dropdown-submenu .dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
}

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

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

/* Light mode submenu adjustments */
[data-theme="light"] .dropdown-submenu .dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .dropdown-submenu .dropdown-item {
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-submenu .dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* File Control Compact Component Styles */
.file-control-compact {
    display: inline-block;
}

.file-dropzone-compact {
    transition: all 0.3s ease;
    border-color: var(--border-color) !important;
    background-color: var(--input-bg);
    min-height: 40px;
    cursor: pointer;
}

.file-dropzone-compact:hover {
    border-color: var(--table-border) !important;
    background-color: var(--dropdown-hover);
}

.file-dropzone-compact.border-primary {
    border-color: var(--table-border) !important;
    background-color: var(--dropdown-hover) !important;
}

.document-list-compact .dropdown-item-text {
    white-space: normal;
    border-bottom: 1px solid var(--border-color);
}

.document-list-compact .dropdown-item-text:last-child {
    border-bottom: none;
}

.document-list-compact .btn-group-sm .btn {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1;
}

.document-list-compact .btn-group-sm .btn i {
    font-size: 0.75rem;
}

/* Dropdown menu styling */
.file-control-compact .dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.file-control-compact .dropdown-menu .btn-link {
    color: var(--table-border);
    text-decoration: none;
    font-weight: 500;
}

.file-control-compact .dropdown-menu .btn-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

/* Progress bar in compact mode */
.file-control-compact .progress {
    background-color: var(--alert-bg);
}

.file-control-compact .progress-bar {
    background-color: var(--table-border);
}

/* Dark mode compact file control adjustments */
[data-theme="dark"] .file-dropzone-compact {
    background-color: var(--input-bg);
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .file-dropzone-compact:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .file-control-compact .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .file-control-compact .dropdown-menu .btn-link {
    color: var(--table-border);
}

[data-theme="dark"] .file-control-compact .dropdown-menu .btn-link:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .document-list-compact .dropdown-item-text {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Light mode compact file control adjustments */
[data-theme="light"] .file-dropzone-compact {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

[data-theme="light"] .file-dropzone-compact:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="light"] .file-control-compact .dropdown-menu {
    background-color: var(--dropdown-bg);
}

[data-theme="light"] .document-list-compact .dropdown-item-text {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Button hover effects */
.file-control-compact .btn-outline-primary:hover .bi-download,
.file-control-compact .btn-outline-success:hover .bi-eye,
.file-control-compact .btn-outline-danger:hover .bi-trash {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Compact button styling */
.file-control-compact .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.file-control-compact .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* File drop target styling for main button */
.file-drop-target {
    transition: all 0.3s ease;
}

.file-drop-target.file-drop-active {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    border-color: var(--table-border) !important;
}

.file-drop-target.file-drop-active .bi-paperclip {
    animation: paperclip-bounce 0.6s ease-in-out infinite;
}

/* Paperclip animation for active drop state */
@keyframes paperclip-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .file-drop-target.file-drop-active {
    box-shadow: 0 4px 12px rgba(55, 90, 127, 0.4);
}

/* Light mode adjustments */
[data-theme="light"] .file-drop-target.file-drop-active {
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Tabulator Menu Items (Context Menu, Dropdown) */
.tabulator-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tabulator-menu-item {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

.tabulator-menu-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* Dark mode Tabulator menu styling */
[data-theme="dark"] .tabulator-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-menu-item {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-menu-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

.tabulator-menu-separator {
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .tabulator-menu-separator {
    border-top-color: var(--border-color);
}

/* Product Fields Panel - Ensure text is always black on light background */
#productFieldsPanel label {
    color: #000 !important;
}

#productFieldsPanel .bi-info-circle {
    color: #6c757d !important;
}

/* Lighter placeholder text for better visibility */
#productFieldsPanel input::placeholder,
#productFieldsPanel select::placeholder,
#productFieldsPanel textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1;
}

#productFieldsPanel input::-webkit-input-placeholder {
    color: #adb5bd !important;
}

#productFieldsPanel input::-moz-placeholder {
    color: #adb5bd !important;
}

#productFieldsPanel input:-ms-input-placeholder {
    color: #adb5bd !important;
}