/* ===== Sidebar Base Background (ONLY when logged in) ===== */
body.logged-in #menu,
body.logged-in .sao-menu,
body.logged-in .sao-sidebar {
    background: linear-gradient(1turn, #451e7c, #2a0845) !important;
    color: #ffffff !important;
}

/* ===== Table Structure ===== */
body.logged-in #menu table.tree,
body.logged-in #menu .tree-container,
body.logged-in #menu .treeview {
    background: transparent !important;
}

/* ===== Table Rows ===== */
body.logged-in #menu table.tree tbody tr,
body.logged-in #menu table.tree tr,
body.logged-in #menu .tree-container tbody tr,
body.logged-in #menu .treeview tbody tr {
    color: #ffffff !important;
    transition: background-color 0.3s ease !important;
}

/* ===== Table Cells ===== */
body.logged-in #menu table.tree td,
body.logged-in #menu table.tree th,
body.logged-in #menu .tree-container td {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== DARK HOVER ON TABLE ROWS ===== */
body.logged-in #menu table.tree tbody tr:hover,
body.logged-in #menu table.tree tbody tr:hover td,
body.logged-in #menu table.tree tr:hover,
body.logged-in #menu table.tree tr:hover td,
body.logged-in #menu .tree-container tbody tr:hover,
body.logged-in #menu .tree-container tbody tr:hover td,
body.logged-in #menu .treeview tbody tr:hover,
body.logged-in #menu .treeview tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.60) !important;
    color: #ffffff !important;
}

/* ===== Selected/Active Rows ===== */
body.logged-in #menu table.tree tbody tr.selected,
body.logged-in #menu table.tree tbody tr.selected td,
body.logged-in #menu table.tree tbody tr.active,
body.logged-in #menu table.tree tbody tr.active td,
body.logged-in #menu table.tree tbody tr[aria-selected="true"],
body.logged-in #menu table.tree tbody tr[aria-selected="true"] td,
body.logged-in #menu table.tree tbody tr.sao-active,
body.logged-in #menu table.tree tbody tr.sao-active td {
    background-color: rgba(0, 0, 0, 0.70) !important;
    color: #ffffff !important;
}

/* ===== Hover on Selected Rows (Even Darker) ===== */
body.logged-in #menu table.tree tbody tr.selected:hover,
body.logged-in #menu table.tree tbody tr.selected:hover td,
body.logged-in #menu table.tree tbody tr.active:hover,
body.logged-in #menu table.tree tbody tr.active:hover td,
body.logged-in #menu table.tree tbody tr[aria-selected="true"]:hover,
body.logged-in #menu table.tree tbody tr[aria-selected="true"]:hover td,
body.logged-in #menu table.tree tbody tr.sao-active:hover,
body.logged-in #menu table.tree tbody tr.sao-active:hover td {
    background-color: rgba(0, 0, 0, 0.80) !important;
}

/* ===== Links Inside Table ===== */
body.logged-in #menu table.tree a,
body.logged-in #menu .tree-container a,
body.logged-in #menu .treeview a {
    color: #ffffff !important;
    text-decoration: none !important;
}

body.logged-in #menu table.tree a:hover,
body.logged-in #menu .tree-container a:hover {
    color: #ffffff !important;
}

/* ===== Sidebar ALL Icons, Arrows & Stars (force white) ===== */
body.logged-in #menu img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9;
}

body.logged-in #menu tr:hover img {
    opacity: 1;
}

body.logged-in #menu .icon,
body.logged-in #menu .icon *,
body.logged-in #menu svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

body.logged-in #menu .caret,
body.logged-in #menu .tree-caret,
body.logged-in #menu [class*="arrow"],
body.logged-in #menu [class*="expand"],
body.logged-in #menu [class*="collapse"] {
    color: #ffffff !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    border-right-color: #ffffff !important;
    border-left-color: #ffffff !important;
}

body.logged-in #menu button,
body.logged-in #menu button span {
    color: #ffffff !important;
}

/* ===== Scrollbar Styling ===== */
body.logged-in #menu::-webkit-scrollbar {
    width: 8px;
}

body.logged-in #menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

body.logged-in #menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

body.logged-in #menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ================================================================
   HEADER / TOP NAVBAR - Purple gradient with white text & icons
   (Applies on BOTH login screen and after login)
   ================================================================ */

/* --- Navbar Background --- */
nav.navbar.navbar-inverse {
    background: linear-gradient(1turn, #451e7c, #2a0845) !important;
    border-color: #2a0845 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* --- Action Tab / Global Search --- */
#global-search .input-group {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px;
}

#global-search .input-group input,
#global-search .input-group .input-group-btn .btn,
#global-search .input-group .input-group-addon {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

#global-search .input-group .icon,
#global-search .input-group svg,
#global-search .input-group img {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* --- Brand / "Tryton" Text --- */
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #ffffff !important;
}

/* --- Hamburger Menu Icon Bars --- */
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* --- Tab Links --- */
.navbar-inverse #tablist > li > a {
    color: #ffffff !important;
}

/* --- Active Tab --- */
.navbar-inverse #tablist > li.active > a,
.navbar-inverse #tablist > li.active > a:hover,
.navbar-inverse #tablist > li.active > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* --- Tab Close Buttons --- */
.navbar-inverse #tablist > li > a .close,
.navbar-inverse #tablist > li > button.close {
    color: #ffffff !important;
    opacity: 0.6;
}

.navbar-inverse #tablist > li > a .close:hover,
.navbar-inverse #tablist > li > button.close:hover {
    opacity: 1;
}

/* --- User Preferences (Administrator) --- */
.navbar-inverse #user-preferences > a,
.navbar-inverse #user-preferences > a:hover,
.navbar-inverse #user-preferences > a:focus {
    color: #ffffff !important;
}

/* --- Logout Link --- */
.navbar-inverse #user-logout > a,
.navbar-inverse #user-logout > a:hover,
.navbar-inverse #user-logout > a:focus {
    color: #ffffff !important;
}

/* --- All Navbar SVG Icons (hamburger, logout, etc.) --- */
nav.navbar.navbar-inverse > .container-fluid .icon,
nav.navbar.navbar-inverse > .container-fluid svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* --- General Navbar Links & Text --- */
.navbar-inverse .navbar-nav > li > a {
    color: #ffffff !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- Navbar Toggle Button Border on Hover --- */
.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: transparent !important;
}

/* --- Navbar buttons override (prevent global .btn white override) --- */
nav.navbar.navbar-inverse .btn,
nav.navbar.navbar-inverse .btn:hover,
nav.navbar.navbar-inverse .btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

nav.navbar.navbar-inverse .btn svg,
nav.navbar.navbar-inverse .btn .icon,
nav.navbar.navbar-inverse .btn img {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: none !important;
}

/* --- Navbar logo image (keep white, no dark filter) --- */
nav.navbar.navbar-inverse .navbar-brand img,
nav.navbar.navbar-inverse #title img {
    filter: none !important;
    opacity: 1 !important;
}

/* --- Navbar links override (prevent global 'a' dark color) --- */
nav.navbar.navbar-inverse a,
nav.navbar.navbar-inverse a:hover,
nav.navbar.navbar-inverse a:focus {
    color: #ffffff !important;
}

/* ================================================================
   GLOBAL MODERN CLEAN UI THEME
   White backgrounds, soft gray borders, subtle shadows
   ================================================================ */

/* --- Toolbar / Panel Heading → Clean white --- */
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-heading,
.panel-heading .navbar-inverse,
.panel-heading .container-fluid,
.panel-heading .container-fluid.navbar-inverse,
nav.toolbar .navbar-inverse,
nav.toolbar .container-fluid,
nav.toolbar .container-fluid.navbar-inverse,
nav.toolbar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;
    border-color: #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

.panel-heading,
nav.toolbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* --- Toolbar text → dark gray --- */
.panel-heading *,
.panel-heading .navbar-inverse *,
nav.toolbar *,
nav.toolbar .navbar-inverse * {
    color: #333333 !important;
}

/* --- Page title styling --- */
.panel-heading h4,
.panel-heading h3,
.panel-heading .title,
nav.toolbar h4,
nav.toolbar .title {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}

/* --- Buttons → Clean with soft borders --- */
.btn-default,
.btn-primary,
.btn-info,
.btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px !important;
    color: #333333 !important;
    transition: all 0.2s ease !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn-default:hover,
.btn-primary:hover,
.btn-info:hover {
    background-color: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* --- Active states → subtle purple tint --- */
.btn-default.active,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.pagination > .active > a,
.pagination > .active > span {
    background: #f0edf5 !important;
    background-color: #f0edf5 !important;
    color: #2a0845 !important;
    border-color: #c5b8d9 !important;
}

/* --- SVG Icons → dark gray --- */
.panel-heading svg,
nav.toolbar svg,
.panel-heading .icon,
nav.toolbar .icon,
.btn svg,
.btn .icon {
    color: #555555 !important;
    fill: #555555 !important;
}

.btn:hover svg,
.btn:hover .icon {
    color: #1a1a2e !important;
    fill: #1a1a2e !important;
}

.panel-heading img,
nav.toolbar img {
    filter: brightness(0) opacity(0.7) !important;
}

/* --- ALL Form Controls → rounded, clean like login inputs --- */
.form-control {
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    color: #333333 !important;
    background-color: #fafafa !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    border-color: #7c3aed !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* --- Toolbar inputs (keep compact) --- */
.panel-heading input,
.panel-heading .form-control,
nav.toolbar input,
nav.toolbar .form-control {
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    padding: 4px 8px !important;
}

/* --- Select dropdowns → matching style --- */
select.form-control {
    border-radius: 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 30px !important;
}

/* --- Form labels → clean uppercase like login --- */
.form-group > label,
.control-label,
td.label > label,
.dict-label,
label.control-label {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #555555 !important;
    letter-spacing: 0.3px !important;
}

/* --- Form groups spacing --- */
.form-group {
    margin-bottom: 12px !important;
}

/* --- Textarea → matching rounded style --- */
textarea.form-control {
    border-radius: 10px !important;
    min-height: 80px !important;
}

/* --- Links → subtle dark, no harsh black --- */
a {
    color: #333333 !important;
    text-decoration: none !important;
}

a:hover,
a:focus {
    color: #7c3aed !important;
}

/* --- Panel borders → soft rounded card like login --- */
.panel-default,
.panel-primary {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    background: #ffffff !important;
}

/* --- Panel body → clean padding --- */
.panel-body {
    background: #ffffff !important;
    padding: 16px !important;
}

/* --- Badge --- */
.panel-heading .badge {
    color: #2a0845 !important;
    background-color: #f0edf5 !important;
    border-radius: 12px !important;
}

.label-primary {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}

/* --- Progress bar → purple --- */
.progress {
    border-radius: 10px !important;
    background-color: #f0edf5 !important;
    overflow: hidden !important;
}

.progress-bar {
    background: linear-gradient(135deg, #2a0845 0%, #7c3aed 100%) !important;
    border-radius: 10px !important;
}

/* --- List items --- */
.list-group-item {
    border-color: #e8e8e8 !important;
    color: #333333 !important;
}

.list-group-item.active,
.list-group-item.active:hover {
    background-color: #f0edf5 !important;
    color: #2a0845 !important;
    border-color: #e8e8e8 !important;
}

/* --- Checkbox/Radio → purple accent --- */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #7c3aed !important;
}

/* --- Dropdown menus → clean rounded --- */
.dropdown-menu {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 6px !important;
}

.dropdown-menu > li > a {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: background 0.15s ease !important;
}

.dropdown-menu > li > a:hover {
    background-color: #f0edf5 !important;
    color: #2a0845 !important;
}

/* --- Tables → clean modern style --- */
#tabcontent table.tree {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#tabcontent table.tree thead th {
    background: #fafafa !important;
    color: #555555 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #e8e8e8 !important;
    padding: 10px 12px !important;
}

#tabcontent table.tree tbody tr {
    transition: background 0.15s ease !important;
}

#tabcontent table.tree tbody tr:hover {
    background-color: #f8f7fc !important;
}

#tabcontent table.tree tbody td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #333333 !important;
    font-size: 14px !important;
}

#tabcontent table.tree tbody tr.selected,
#tabcontent table.tree tbody tr[aria-selected="true"] {
    background-color: #f0edf5 !important;
}

/* --- Tab content area → clean background --- */
#tabs {
    background-color: #f5f5f8 !important;
}

#tabcontent {
    background-color: #f5f5f8 !important;
}

/* --- Tab pane → white card inside --- */
#tabcontent .tab-pane {
    background: #ffffff !important;
    border-radius: 0 !important;
}

/* --- Form view → clean card style --- */
#tabcontent .form {
    background: #ffffff !important;
}

/* --- Input group buttons (calendar icon, etc.) --- */
.input-group-btn .btn,
.input-group-addon {
    border-radius: 0 10px 10px 0 !important;
    border-color: #d0d0d0 !important;
    background: #fafafa !important;
}

.input-group .form-control:first-child {
    border-radius: 10px 0 0 10px !important;
}

/* --- Notebook tabs (form sub-tabs) → clean style --- */
.nav-tabs {
    border-bottom: 2px solid #e8e8e8 !important;
}

.nav-tabs > li > a {
    border: none !important;
    border-radius: 0 !important;
    color: #888888 !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
}

.nav-tabs > li > a:hover {
    border: none !important;
    background: transparent !important;
    color: #7c3aed !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none !important;
    border-bottom: 3px solid #7c3aed !important;
    color: #7c3aed !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* --- Well / info boxes → soft style --- */
.well {
    background: #fafafa !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* ================================================================
   LOGIN PAGE - Clean centered card with logo
   ================================================================ */

/* --- Login dialog background --- */
.login-dialog .modal-dialog {
    max-width: 450px !important;
    margin-top: 8vh !important;
}

.login-dialog .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    overflow: visible !important;
}

.login-dialog .modal-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center !important;
}

/* --- Hide default modal title --- */
.login-dialog .modal-header .modal-title {
    display: none !important;
}

.login-dialog .modal-header .close {
    display: none !important;
}

/* --- Login logo injection target --- */
.login-dialog .radix-login-logo {
    display: block;
    margin: 0 auto 10px auto;
    height: 50px;
}

/* --- Login heading text --- */
.login-dialog .login-heading {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 20px;
}

/* --- Login body --- */
.login-dialog .modal-body {
    padding: 20px 40px 30px 40px !important;
}

.login-dialog .modal-footer {
    display: none !important;
}

/* --- Login form labels --- */
.login-dialog .control-label {
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 6px !important;
}

/* --- Login form inputs --- */
.login-dialog .form-control {
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: border-color 0.2s ease !important;
}

.login-dialog .form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* --- Login button → purple gradient --- */
.login-dialog .btn-primary,
.login-dialog .btn-primary:hover,
.login-dialog .btn-primary:focus {
    background: linear-gradient(135deg, #2a0845 0%, #7c3aed 100%) !important;
    background-color: #7c3aed !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
    transition: opacity 0.2s ease !important;
}

.login-dialog .btn-primary:hover {
    opacity: 0.9 !important;
}

/* --- Login panel inside modal → no border --- */
.login-dialog .panel,
.login-dialog .panel-default {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.login-dialog .panel-body {
    padding: 0 !important;
}

/* --- Login modal backdrop --- */
.login-dialog.modal {
    background-color: #f5f5f8 !important;
}

.login-dialog + .modal-backdrop {
    background-color: #f5f5f8 !important;
    opacity: 1 !important;
}

/* ================================================================
   PASSWORD POPUP - Clean card matching login style
   ================================================================ */

/* --- Password popup → same style as login page --- */
.ask-dialog .modal-dialog {
    max-width: 450px !important;
    margin-top: 8vh !important;
}

.ask-dialog .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    overflow: visible !important;
}

.ask-dialog .modal-header {
    background: #ffffff !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center !important;
    border-radius: 16px 16px 0 0 !important;
}

.ask-dialog .modal-header .modal-title {
    display: none !important;
}

.ask-dialog .modal-header .close {
    display: none !important;
}

.ask-dialog .radix-login-logo {
    display: block;
    margin: 0 auto 10px auto;
    height: 50px;
}

.ask-dialog .login-heading {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.ask-dialog .modal-body {
    padding: 20px 40px 10px 40px !important;
    background-color: #ffffff !important;
}

.ask-dialog .modal-footer {
    background: #ffffff !important;
    border-top: none !important;
    padding: 0 40px 30px 40px !important;
    text-align: center !important;
    border-radius: 0 0 16px 16px !important;
}

.ask-dialog .control-label {
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 6px !important;
}

.ask-dialog .form-control {
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: border-color 0.2s ease !important;
}

.ask-dialog .form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.ask-dialog .btn-primary,
.ask-dialog .btn-primary:hover,
.ask-dialog .btn-primary:focus {
    background: linear-gradient(135deg, #2a0845 0%, #7c3aed 100%) !important;
    background-color: #7c3aed !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    display: block !important;
    margin-top: 5px !important;
    transition: opacity 0.2s ease !important;
}

.ask-dialog .btn-primary:hover {
    opacity: 0.9 !important;
}

.ask-dialog .btn-link {
    color: #7c3aed !important;
    font-size: 13px !important;
}

.ask-dialog .btn-link:hover {
    color: #2a0845 !important;
}

.ask-dialog .panel,
.ask-dialog .panel-default {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.ask-dialog .panel-body {
    padding: 0 !important;
}

.ask-dialog .panel-heading {
    display: none !important;
}

.ask-dialog.modal {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* ================================================================
   MODAL / POPUP DIALOGS - Clean white theme
   ================================================================ */

/* --- Modal header → white, same clean style as login --- */
.modal-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: none !important;
    padding: 18px 20px !important;
}

.modal-header .modal-title {
    color: #1a1a2e !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

.modal-header .close {
    color: #999999 !important;
    opacity: 0.8 !important;
}

.modal-header .close:hover {
    color: #333333 !important;
    opacity: 1 !important;
}

/* --- Modal content → clean white rounded card like login --- */
.modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
}

/* --- Modal body --- */
.modal-body {
    color: #333333 !important;
    background-color: #ffffff !important;
    padding: 20px 24px !important;
}

/* --- Modal footer → white, no harsh border like login --- */
.modal-footer {
    background: #ffffff !important;
    border-top: 1px solid #e8e8e8 !important;
    padding: 14px 20px !important;
}

/* --- Modal buttons → purple gradient like login button --- */
.modal-footer .btn-primary,
.modal-footer .btn-primary:focus {
    background: linear-gradient(135deg, #2a0845 0%, #7c3aed 100%) !important;
    background-color: #7c3aed !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    transition: opacity 0.2s ease !important;
}

.modal-footer .btn-primary:hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
}

.modal-footer .btn-default {
    background: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    color: #333333 !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
}

.modal-footer .btn-default:hover {
    border-color: #b0b0b0 !important;
    background: #f5f5f5 !important;
}

/* --- Modal form controls → same as login inputs --- */
.modal .form-control {
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: border-color 0.2s ease !important;
}

.modal .form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* --- Modal panel headings (inside popups) --- */
.modal .panel-heading,
.modal .panel-default > .panel-heading,
.modal .panel-heading .navbar-inverse,
.modal .panel-heading .container-fluid {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #e8e8e8 !important;
}

.modal .panel-heading *,
.modal nav.toolbar * {
    color: #333333 !important;
}

.modal .panel-heading svg,
.modal nav.toolbar svg,
.modal .panel-heading .icon,
.modal nav.toolbar .icon {
    color: #555555 !important;
    fill: #555555 !important;
}

.modal .panel-heading .btn,
.modal nav.toolbar .btn {
    background-color: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px !important;
    color: #333333 !important;
}

/* --- Wizard form popups --- */
.wizard-form .panel-heading,
.wizard-form .panel-default > .panel-heading {
    background: #ffffff !important;
    color: #333333 !important;
    border-color: #e8e8e8 !important;
}

/* ================================================================
   REMAINING ICONS & ARROWS - Override teal everywhere
   ================================================================ */

/* --- All remaining SVG icons globally --- */
svg[fill="#267f82"],
.icon svg {
    fill: #555555 !important;
}

/* --- Caret / Arrow icons --- */
.caret {
    border-top-color: #555555 !important;
    border-bottom-color: #555555 !important;
}

.panel-heading .caret,
nav.toolbar .caret {
    border-top-color: #333333 !important;
    border-bottom-color: #333333 !important;
}

/* --- Dropdown arrows --- */
.dropdown-toggle .caret {
    border-top-color: #555555 !important;
}

/* --- Tree view expand/collapse arrows (content area) --- */
#tabcontent .icon,
#tabcontent .icon svg,
#tabcontent table.tree .icon,
#tabcontent table.tree .icon svg {
    color: #555555 !important;
    fill: #555555 !important;
}

#tabcontent table.tree img.icon {
    filter: brightness(0) opacity(0.6) !important;
}

/* --- Breadcrumb / navigation arrows --- */
.breadcrumb > li + li:before {
    color: #999999 !important;
}

/* --- Pagination arrows --- */
.pagination > li > a,
.pagination > li > span {
    color: #333333 !important;
    border-color: #d0d0d0 !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
}

.pagination > li > a:hover {
    background-color: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
}

/* --- Tab navigation arrows in content --- */
.pager > li > a {
    border-color: #d0d0d0 !important;
    border-radius: 6px !important;
    color: #333333 !important;
}

.pager > li > a:hover {
    background-color: #f5f5f5 !important;
}

/* --- Any remaining teal text color --- */
.text-primary {
    color: #7c3aed !important;
}

/* --- Selection highlight color --- */
::selection {
    background: #e8ddf5 !important;
    color: #1a1a2e !important;
}

/* --- Tooltip styling --- */
.tooltip-inner {
    background-color: #1a1a2e !important;
    border-radius: 6px !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #1a1a2e !important;
}

/* --- Alert/notification styling --- */
.alert-info {
    background-color: #f0edf5 !important;
    border-color: #c5b8d9 !important;
    color: #2a0845 !important;
}