/* ================================================================
   FIX 1: Header navbar
   ================================================================ */
nav.navbar.navbar-inverse {
    background-color: #E6E8E8 !important;
    background-image: none !important;
    border-color: #d0d3d3 !important;
}

/* Header text → dark */
nav.navbar.navbar-inverse .navbar-brand,
nav.navbar.navbar-inverse .navbar-brand:hover,
nav.navbar.navbar-inverse a,
nav.navbar.navbar-inverse a:hover,
nav.navbar.navbar-inverse #tablist > li > a,
nav.navbar.navbar-inverse #user-preferences > a,
nav.navbar.navbar-inverse #user-logout > a,
nav.navbar.navbar-inverse .navbar-nav > li > a {
    color: #333333 !important;
}

/* Hamburger icon (3 lines) → teal */
nav.navbar.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #1E777B !important;
}

/* Header SVG/icon → teal */
nav.navbar.navbar-inverse > .container-fluid .icon,
nav.navbar.navbar-inverse > .container-fluid svg {
    color: #1E777B !important;
    fill: #1E777B !important;
}

/* Header icon images (tryton-menu hamburger etc.) → teal via CSS filter */
nav.navbar.navbar-inverse img.icon,
nav.navbar.navbar-inverse .btn img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(50%) saturate(500%) hue-rotate(145deg) brightness(90%) !important;
}

/* Logo in header → no filter, show original colors */
nav.navbar.navbar-inverse #title img,
nav.navbar.navbar-inverse .navbar-brand img {
    filter: none !important;
}

/* Tab close (X) buttons → bigger, clean */
nav.navbar.navbar-inverse #tablist > li > a .close,
nav.navbar.navbar-inverse #tablist > li > button.close,
nav.navbar.navbar-inverse #tablist .close {
    color: #333333 !important;
    opacity: 0.6 !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

nav.navbar.navbar-inverse #tablist > li > a .close:hover,
nav.navbar.navbar-inverse #tablist > li > button.close:hover,
nav.navbar.navbar-inverse #tablist .close:hover {
    opacity: 1 !important;
    color: #1E777B !important;
}

/* Selected/active tab in header */
nav.navbar.navbar-inverse #tablist > li.active > a,
nav.navbar.navbar-inverse #tablist > li.active > a:hover,
nav.navbar.navbar-inverse #tablist > li.active > a:focus {
    background-color: #C3CAC8 !important;
    color: #333333 !important;
}

/* Active tab close button → match bg seamlessly */
nav.navbar.navbar-inverse #tablist > li.active > a .close,
nav.navbar.navbar-inverse #tablist > li.active > a button.close {
    color: #333333 !important;
    background: transparent !important;
}

/* Header Action button / search area → clean seamless look */
nav.navbar.navbar-inverse #global-search .input-group {
    border: 1px solid #C3CAC8 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

nav.navbar.navbar-inverse #global-search .input-group input,
nav.navbar.navbar-inverse #global-search .input-group .input-group-btn .btn,
nav.navbar.navbar-inverse #global-search .input-group .input-group-addon {
    border: none !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Header buttons → no borders, no rounded outlines */
nav.navbar.navbar-inverse .btn,
nav.navbar.navbar-inverse .btn:hover,
nav.navbar.navbar-inverse .btn:focus,
nav.navbar.navbar-inverse .btn:active {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #333333 !important;
}

/* Action dropdown button specifically */
nav.navbar.navbar-inverse .navbar-action .btn,
nav.navbar.navbar-inverse .navbar-action .btn:hover,
nav.navbar.navbar-inverse .navbar-action .btn:focus,
nav.navbar.navbar-inverse .navbar-action .dropdown-toggle,
nav.navbar.navbar-inverse .navbar-action .dropdown-toggle:hover,
nav.navbar.navbar-inverse .navbar-action .dropdown-toggle:focus {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Action input-group wrapper → remove all borders */
nav.navbar.navbar-inverse .input-group,
nav.navbar.navbar-inverse .navbar-form .input-group {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

nav.navbar.navbar-inverse .input-group .btn,
nav.navbar.navbar-inverse .input-group .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

nav.navbar.navbar-inverse .btn svg,
nav.navbar.navbar-inverse .btn .icon {
    color: #1E777B !important;
    fill: #1E777B !important;
}

nav.navbar.navbar-inverse .btn img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(50%) saturate(500%) hue-rotate(145deg) brightness(90%) !important;
}

/* ================================================================
   FIX 2: Sidebar folder/list icons → dark gray (match reference)
   ================================================================ */
#menu .icon,
#menu .icon *,
#menu svg,
#menu img.icon {
    color: #1E777B !important;
    fill: #1E777B !important;
    filter: none !important;
}

/* ================================================================
   FIX 3: Sidebar expand/collapse arrows
   ================================================================ */
#menu .caret,
#menu .tree-caret,
#menu [class*="arrow"],
#menu [class*="expand"],
#menu [class*="collapse"] {
    color: #1E777B !important;
    border-top-color: #1E777B !important;
    border-bottom-color: #1E777B !important;
    border-right-color: #1E777B !important;
    border-left-color: #1E777B !important;
}

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

/* --- Toolbar / Panel Heading → light gray (content area only) --- */
#tabcontent .panel-default > .panel-heading,
#tabcontent .panel-primary > .panel-heading,
#tabcontent .panel-heading,
#tabcontent nav.toolbar {
    background: #E6E8E8 !important;
    background-color: #E6E8E8 !important;
    background-image: none !important;
    color: #333333 !important;
    border-color: #d0d3d3 !important;
    border-bottom: 1px solid #d0d3d3 !important;
}

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

/* --- Toolbar text → dark gray (content area only) --- */
#tabcontent .panel-heading *,
#tabcontent nav.toolbar * {
    color: #333333 !important;
}

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

/* --- ALL Buttons → white (global, not scoped) --- */
.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: 2px !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;
}

/* --- 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: none !important;
    color: #333333 !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: #e6f3f3 !important;
    background-color: #e6f3f3 !important;
    color: #134e51 !important;
    border-color: #b0d5d6 !important;
}

/* --- Toolbar navigation buttons → white, no border (match reference) --- */
#tabcontent .panel-heading button#switch_,
#tabcontent .panel-heading button#previous,
#tabcontent .panel-heading button#next {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}

/* Pagination input in toolbar */
#tabcontent .panel-heading .btn-toolbar input {
    border: 1px solid #d0d3d3 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    text-align: center !important;
}

/* --- All toolbar button icons → teal --- */
.btn img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(50%) saturate(500%) hue-rotate(145deg) brightness(90%) !important;
}

.btn svg {
    fill: #1E777B !important;
    color: #1E777B !important;
}

/* --- SVG Icons → teal --- */
.btn svg,
.btn .icon {
    color: #1E777B !important;
    fill: #1E777B !important;
}

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

/* --- SVG Icons → teal (content area only) --- */
#tabcontent .panel-heading svg,
#tabcontent nav.toolbar svg,
#tabcontent .panel-heading .icon,
#tabcontent nav.toolbar .icon,
#tabcontent .btn svg,
#tabcontent .btn .icon {
    color: #1E777B !important;
    fill: #1E777B !important;
}

#tabcontent .btn:hover svg,
#tabcontent .btn:hover .icon {
    color: #155558 !important;
    fill: #155558 !important;
}

#tabcontent .panel-heading img,
#tabcontent nav.toolbar img {
    filter: none !important;
}

/* --- ALL Form Controls → rounded, clean like login inputs --- */
.form-control:not([type="checkbox"]):not([type="radio"]) {
    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: #1E777B !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 119, 123, 0.15) !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 (content area only, not sidebar/navbar) --- */
#tabcontent a {
    color: #333333 !important;
    text-decoration: none !important;
}

#tabcontent a:hover,
#tabcontent a:focus {
    color: #1E777B !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: #134e51 !important;
    background-color: #e6f3f3 !important;
    border-radius: 12px !important;
}

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

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

.progress-bar {
    background: linear-gradient(135deg, #134e51 0%, #1E777B 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: #e6f3f3 !important;
    color: #134e51 !important;
    border-color: #e8e8e8 !important;
}

/* --- Checkbox/Radio → no border --- */
input[type="checkbox"],
input[type="checkbox"].form-control,
input[type="checkbox"].form-control.input-sm,
input[type="checkbox"].form-control.input-sm.mousetrap,
.form-boolean input,
.form-boolean input.form-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #f0f0f0 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    background-image: none !important;
}

input[type="checkbox"]:checked,
input[type="checkbox"].form-control:checked,
.form-boolean input:checked {
    background-color: #1E777B !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='white' d='M10 3L5 8.5 2 5.5 2.7 4.8 5 7.1 9.3 2.3z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px !important;
}

input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    background-color: #f0f0f0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
}

input[type="radio"]:checked {
    background-color: #1E777B !important;
}

.form-boolean {
    display: inline-block !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !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: #e6f3f3 !important;
    color: #134e51 !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: #f2f9f9 !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: #e6f3f3 !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 groups → single rounded wrapper border --- */
.input-group {
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fafafa !important;
}

.input-group > .form-control,
.input-group > .form-control:not([type="checkbox"]):not([type="radio"]),
.input-group .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn .btn,
.input-group > .input-group-addon,
.input-group .input-group-btn .btn,
.input-group .input-group-addon {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Focused input-group → teal border on wrapper */
.input-group:focus-within {
    border-color: #1E777B !important;
    box-shadow: 0 0 0 3px rgba(30, 119, 123, 0.15) !important;
}

/* Focused input inside group → no individual border */
.input-group > .form-control:focus,
.input-group .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #ffffff !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: #1E777B !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 #1E777B !important;
    color: #1E777B !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: #1E777B !important;
    box-shadow: 0 0 0 3px rgba(30, 119, 123, 0.15) !important;
}

/* --- Login button → purple gradient --- */
.login-dialog .btn-primary,
.login-dialog .btn-primary:hover,
.login-dialog .btn-primary:focus {
    background: linear-gradient(135deg, #134e51 0%, #1E777B 100%) !important;
    background-color: #1E777B !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: #1E777B !important;
    box-shadow: 0 0 0 3px rgba(30, 119, 123, 0.15) !important;
}

.ask-dialog .btn-primary,
.ask-dialog .btn-primary:hover,
.ask-dialog .btn-primary:focus {
    background: linear-gradient(135deg, #134e51 0%, #1E777B 100%) !important;
    background-color: #1E777B !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: #1E777B !important;
    font-size: 13px !important;
}

.ask-dialog .btn-link:hover {
    color: #134e51 !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, #134e51 0%, #1E777B 100%) !important;
    background-color: #1E777B !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: #1E777B !important;
    box-shadow: 0 0 0 3px rgba(30, 119, 123, 0.15) !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: #E6E8E8 !important;
    background-color: #E6E8E8 !important;
    color: #333333 !important;
    border-color: #d0d3d3 !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
   ================================================================ */

/* --- SVG icons (content area only) --- */
#tabcontent svg[fill="#267f82"],
#tabcontent .icon svg {
    fill: #1E777B !important;
}

/* --- Caret / Arrow icons (content area only) --- */
#tabcontent .caret {
    border-top-color: #1E777B !important;
    border-bottom-color: #1E777B !important;
}

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

/* --- Dropdown arrows (content area only) --- */
#tabcontent .dropdown-toggle .caret {
    border-top-color: #1E777B !important;
}

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

#tabcontent table.tree img.icon {
    filter: none !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: #1E777B !important;
}

/* --- Selection highlight color --- */
::selection {
    background: #d4eded !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: #e6f3f3 !important;
    border-color: #b0d5d6 !important;
    color: #134e51 !important;
}

/* ================================================================
   FORM GROUP FIELDSETS - Rounded borders on all sides
   ================================================================ */
#tabcontent .form fieldset,
#tabcontent .form .form-group-container,
.modal .form fieldset {
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    background: #fafafa !important;
}

#tabcontent .form fieldset > legend,
.modal .form fieldset > legend {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #555555 !important;
    padding: 0 8px !important;
    width: auto !important;
    border: none !important;
    margin-bottom: 8px !important;
}