/* --- Master Theme Variables --- */
:root {
    /* Primary Master Color (Rust/Burnt Orange) */
    --primary: #BE4D25;
    --primary-rgb: 190, 77, 37;

    /* Variants */
    --primary-hover: #A33D1B;
    --primary-active: #923416;
    --primary-light: rgba(var(--primary-rgb), 0.08);
    --primary-soft: rgba(var(--primary-rgb), 0.15);
    --primary-ultra-light: rgba(var(--primary-rgb), 0.02);

    /* System Colors */
    --body-bg: #f2eee6;
    /* Warmer background for soft card contrast */
    --border-color: #E2E8F0;
    --text-main: #0f172a;
    --text-muted: #475569;

    /* Bootstrap 5 Compatibility */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-hover);
    /* Typography Tokens */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', sans-serif;
}

/* --- Global Base --- */
body {
    font-family: var(--font-main) !important;
    background-color: var(--body-bg);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.025em;
    font-weight: 700;
}

/* --- Layout Overrides --- */

/* Page header banner */
.page-header-banner h5,
.page-header-banner h4 {
    background: linear-gradient(135deg, var(--primary) 0%, #EA580C 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.page-header-banner .icon-circle {
    background: var(--primary-soft) !important;
}

.page-header-banner .icon-circle i {
    color: var(--primary) !important;
}

.page-header-banner .badge-outline-light {
    background: var(--primary-light);
    border: 1px solid var(--primary-soft);
    color: var(--primary);
}

/* Sidebar */
.sidebar {
    width: 260px !important;
    background-color: #fff !important;
    border-right: 1px solid var(--border-color);
}

.nav-sidebar {
    padding-top: 0.5rem;
}

.nav-sidebar .nav-item-header {
    padding: 1.5rem 1.25rem 0.5rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.nav-sidebar .nav-link {
    padding: 0.65rem 1.25rem;
    color: var(--text-main);
    font-weight: 500;
    border-left: 4px solid transparent;
    transition: all 0.15s ease;
}

.nav-sidebar .nav-link:hover {
    background-color: var(--primary-ultra-light);
    color: var(--primary);
}

.nav-sidebar .nav-link i {
    color: var(--text-muted);
    margin-right: 0.85rem;
    font-size: 1.2rem;
    width: 1.2rem;
    text-align: center;
    transition: color 0.15s ease;
}

.nav-sidebar .nav-link:hover i,
.nav-sidebar .nav-link.active i {
    color: var(--primary) !important;
}

.nav-sidebar .nav-link.active {
    color: var(--primary) !important;
    background-color: var(--primary-light) !important;
    border-left-color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Submenus */
.nav-item-submenu>.nav-link:after {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.nav-item-submenu.nav-item-open>.nav-link {
    color: var(--primary) !important;
    font-weight: 600;
    background-color: var(--primary-ultra-light);
}

.nav-group-sub {
    background-color: #faf9f6 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.nav-group-sub .nav-link {
    padding: 0.5rem 1.25rem 0.5rem 3.3rem;
    font-size: 0.85rem;
    border-left: none;
    color: var(--text-muted);
}

.nav-group-sub .nav-link:hover {
    color: var(--primary) !important;
    background-color: transparent !important;
}

.nav-group-sub .nav-link.active {
    background-color: transparent !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Sidebar Search */
.sidebar-search-input {
    background-color: #f8fafc !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 100px !important;
    padding-left: 2.5rem !important;
    font-size: 0.85rem;
    height: 38px;
    transition: all 0.2s ease;
}

.sidebar-search-input:focus {
    background-color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-ultra-light) !important;
}

/* Buttons */
.btn-primary {
    --btn-bg: var(--primary);
    --btn-border-color: var(--primary);
    --btn-hover-bg: var(--primary-hover);
    --btn-hover-border-color: var(--primary-hover);
    --btn-active-bg: var(--primary-active);
    --btn-active-border-color: var(--primary-active);

    /* The base theme leaves --btn-disabled-bg at its own blue, so a disabled
       primary button rendered off-brand everywhere in the app. Most visible on
       forms whose submit stays disabled until valid. */
    --btn-disabled-bg: var(--primary);
    --btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --btn-color: var(--primary);
    --btn-border-color: var(--primary);
    --btn-hover-bg: var(--primary);
    --btn-hover-border-color: var(--primary);
}

.btn-success {
    --btn-bg: var(--success);
    --btn-color: #fff;
    --btn-border-color: var(--success);
    --btn-hover-bg: #047857;
    --btn-hover-border-color: #047857;
    --btn-active-bg: #065f46;
    --btn-active-border-color: #065f46;
}

.btn-danger {
    --btn-bg: var(--danger);
    --btn-color: #fff;
    --btn-border-color: var(--danger);
    --btn-hover-bg: #dc2626;
    --btn-hover-border-color: #dc2626;
    --btn-active-bg: #b91c1c;
    --btn-active-border-color: #b91c1c;
}

/* Modal — make form wrapper layout-transparent so modal-dialog-scrollable works correctly */
#ajaxModal .modal-content > form {
    display: contents;
}

/* Clip modal-content so colored headers/footers don't overhang the rounded corners */
#ajaxModal .modal-content {
    overflow: hidden;
}

/* Navigation & Pagination */
.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

.page-link {
    color: var(--primary);
}

/* Form Elements */
.form-control,
.form-select {
    background-color: var(--primary-ultra-light);
    border-color: var(--border-color);
}

/* Form Elements & Focus States */
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-search__field:focus {
    background-color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.125rem var(--primary-soft) !important;
    outline: 0 !important;
}

/* Input Groups Focus State — highlights the whole group seamlessly without cutting off attached buttons */
.input-group:focus-within {
    box-shadow: 0 0 0 0.125rem var(--primary-soft);
    border-radius: var(--border-radius, 0.375rem);
}
.input-group.rounded-pill:focus-within {
    border-radius: 50rem;
}
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text,
.input-group:focus-within > .btn {
    border-color: var(--primary) !important;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
    box-shadow: none !important;
}

/* Copy button tactile feedback and transitions */
.btn-copy {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-copy:active {
    transform: scale(0.95);
}

/* Checkboxes, radios and switches show their state through their own background
   (the tick, the dot, the switch knob are background images on it), so the white
   fill above must not apply to them — a switch went blank the moment it was
   clicked, because focus painted it white under a white knob. Focus ring only. */
.form-check-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.125rem var(--primary-soft) !important;
    outline: 0 !important;
}

/* The base theme's --component-active-bg is its own blue, which left every
   checked box, radio and switch off-brand. Scoped to form checks rather than
   overriding --component-active-bg globally, which also drives active nav and
   list items. */
.form-check-input {
    --form-check-input-checked-bg-color: var(--primary);
    --form-check-input-checked-border-color: var(--primary);
}

/* --- Global List Group Active & Selection System (Titan Standard) --- */
.list-group-item {
    transition: all 0.15s ease-in-out;
    border-left: 4px solid transparent;
}

.list-group-item.active,
.list-group-item-action.active {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    border-left: 4px solid var(--primary) !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.25), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.list-group-item.active .fw-semibold,
.list-group-item-action.active .fw-semibold {
    color: var(--primary) !important;
}

.list-group-item-action:hover:not(.active) {
    background-color: #f8fafc !important;
}

/* Source Choice Card Selection */
.source-choice {
    transition: all 0.2s ease-in-out;
}

.source-choice.border-primary,
.source-choice.active {
    border: 2px solid var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.15) !important;
}

.source-choice.border-primary .rounded-circle,
.source-choice.active .rounded-circle {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.source-choice.border-primary h6,
.source-choice.active h6 {
    color: var(--primary) !important;
}

/* Global focus-visible for better accessibility without blue outlines */
:focus-visible {
    outline: 2px solid var(--primary-soft) !important;
    outline-offset: 1px;
}

/* Select2 Highlights & High Contrast Theming */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted,
.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--default .select2-results__option--selected {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
}

.select2-dropdown {
    border-color: var(--primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--border-color);
    transition: all 0.2s ease;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.125rem var(--primary-soft) !important;
}

.select2-results__option {
    padding: 0.6rem 0.75rem;
    transition: background 0.2s ease;
}

/* Premium Shadows */
.shadow-premium {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03), 0 10px 15px -3px rgba(0, 0, 0, 0.02) !important;
}

/* Modals */
.modal-header,
.modal-footer {
    background-color: var(--primary-ultra-light);
}

/* Global Content Area (Titan Standard) */
.content {
    padding: 1rem 1.5rem 2rem 1.5rem !important;
    max-width: 100%;
}

/* Defensive fix for nested content divs */
.content .content {
    padding: 0 !important;
}

/* Management Header (Refined Modular Style) */
.management-header {
    padding: 0 0 1.5rem 0;
    /* Standardize header vertical spacing */
    margin-bottom: 0.5rem;
}

.management-header .header-brand-icon {
    width: 44px;
    height: 44px;
    background: #fdf2f0;
    /* Soft peach/rust background */
    color: var(--primary);
    border-radius: 50%;
    /* Circle instead of rounded square for brand icon too */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 1rem;
}

.management-header h5 {
    color: var(--primary);
    /* Rust title as per design */
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    line-height: 1.2;
}

.management-header .text-muted {
    font-size: 0.875rem;
    color: #64748b !important;
    /* Cool slate for subtitle */
    font-weight: 400;
    margin-top: 0.15rem;
}

/* --- Titan Modern Page Header (Global Card Style) --- */
.page-header-titan {
    background: #fff !important;
    border: 0 !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 1rem !important;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.page-header-titan .card-body {
    padding: 1rem 1.5rem !important;
    /* py-3 px-4 */
}

.page-header-titan h1 {
    color: var(--primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
}

.page-header-titan .text-muted {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    /* fw-medium */
    letter-spacing: -0.01em;
}

/* Management Card & Unified Filter Toolbar */
.card-management {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
    transform: none !important;
    transition: none !important;
}

.card-management:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.card-management > .card-body.border-bottom,
.card-management .filter-toolbar,
.card-management .bg-light.bg-opacity-10 {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.85rem 1.25rem !important;
}

/* Crisp, Defined Quick-Search Input */
.card-management .form-control-ghost,
.form-control-ghost {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50rem !important;
    padding: 0.55rem 1rem 0.55rem 2.6rem !important;
    color: var(--text-main) !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.card-management .form-control-ghost:focus,
.form-control-ghost:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
}

.card-management .form-control-feedback-icon,
.form-control-feedback-icon {
    top: 50%;
    transform: translateY(-50%);
    padding-left: 0.85rem !important;
}

/* Cohesive Input-Group Focus State */
.input-group:focus-within .input-group-text {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background-color: #ffffff !important;
}

.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
}

/* Refined Table Styling — High-Contrast Slate Header */
.table-management thead th {
    background: #f8fafc !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1e293b !important;
    padding: 0.85rem 1.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.table-management tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Titan Slim Sidebar — canonical width (merged above) */

/* High-Density Table System */
.table-management tbody td {
    padding: 0.85rem 1.5rem !important;
    /* Tighter padding */
    font-size: 0.85rem !important;
}

.table-management .action-surface {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 0.25rem;
    display: inline-flex;
    gap: 0.25rem;
}

.table-management .action-surface .btn-sm {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    transition: all 0.2s;
}

.table-management .action-surface .btn-sm:hover {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Ghost Badge System */
.badge-ghost {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border: 0;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
}

.badge-ghost-info {
    background-color: #eff6ff;
    color: #1e40af;
}

.badge-ghost-success {
    background-color: #ecfdf5;
    color: #065f46;
}

.badge-ghost-danger {
    background-color: #fef2f2;
    color: #991b1b;
}

.badge-ghost-warning {
    background-color: #fffbeb;
    color: #92400e;
}

.badge-ghost-secondary {
    background-color: #f1f5f9;
    color: #334155;
}

/* Dashboard Premium Metrics */
.metric-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 1.25rem;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.metric-card .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

.metric-card .metric-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-main);
    letter-spacing: -1px;
}

.metric-card .metric-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.metric-card .metric-trend {
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

/* Global Utility Overrides */
.bg-primary {
    background-color: var(--primary) !important;
}

/* bg-primary-soft: use instead of "bg-primary bg-opacity-10"
   The !important on .bg-primary breaks Bootstrap's opacity mechanism,
   so bg-primary bg-opacity-* always renders as solid. Use this instead. */
.bg-primary-soft {
    background-color: var(--primary-light) !important; /* rgba(190,77,37, 0.08) */
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.link-primary {
    color: var(--primary) !important;
}

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

/* ═══════════════════════════════════════════════════════════
   Login Page Specific Styles (Titan Design)
   ═══════════════════════════════════════════════════════════ */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.flat-login-card {
    background: #fff;
    width: 100%;
    max-width: 1000px;
    display: flex;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px -15px var(--primary-soft);
    overflow: hidden;
}

.login-form-panel {
    flex: 1;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-section {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}

.brand-icon {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: 1rem;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.welcome-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.welcome-subtitle {
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

.form-group-flat {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-control-flat {
    height: 3.5rem;
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 0 1.5rem 0 3.5rem;
    font-size: 1rem;
    width: 100%;
    transition: all 0.2s ease;
    background: var(--primary-light);
}

.form-control-flat:focus {
    background: #fff;
    border-color: var(--primary);
    outline: none;
}

.input-icon-start,
.input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.25rem;
    pointer-events: none;
    opacity: 0.8;
}

.input-icon-start {
    left: 1.25rem;
}

.input-icon {
    right: 1.25rem;
}

.password-toggle {
    cursor: pointer;
    pointer-events: all;
    opacity: 1;
}

.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    font-size: 0.95rem;
}

.flat-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.flat-checkbox input {
    display: none;
}

.flat-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.flat-checkbox input:checked+.checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.flat-checkbox input:checked+.checkmark::after {
    content: "\e9a2";
    font-family: 'icomoon';
    color: #fff;
    font-size: 0.8rem;
}

.btn-flat-primary {
    height: 3.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50rem;
    width: 100%;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
}

.login-branding-panel {
    flex: 1;
    background: var(--primary);
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.branding-graphic {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 2.5rem;
}

.transition-overlay {
    position: fixed;
    inset: 0;
    background: var(--primary);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.transition-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Header Action Buttons (Titan Modern) --- */
.btn-header-pill {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-main);
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
}

.btn-header-pill:hover {
    background-color: #f8fafc;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-header-pill i {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.btn-header-pill:hover i {
    color: var(--primary);
}

/* --- Titan Light Buttons (Filters & Secondary Actions) --- */
.btn-titan-light {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: var(--text-main);
    font-weight: 700;
    padding: 0.55rem 1.25rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.btn-titan-light:hover {
    background-color: #ffffff;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transform: translateY(-1px);
}

.btn-titan-light i {
    font-size: 1rem;
    opacity: 0.7;
}

.btn-titan-light:hover i {
    opacity: 1;
    color: var(--primary);
}

/* Primary variant of the pill if needed */
.btn-header-pill-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.btn-header-pill-primary i {
    color: rgba(255, 255, 255, 0.8);
}

.btn-header-pill-primary:hover {
    background-color: #8c2a1e;
    /* Darker rust */
    color: #ffffff;
}

.btn-header-pill-primary:hover i {
    color: #ffffff;
}

/* --- Select2 Layout Fix (Prevent Page Shift) --- */
.filter-toolbar .select2-container--default .select2-selection--multiple {
    max-height: 38px;
    overflow-y: auto !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding-bottom: 0 !important;
}

.filter-toolbar .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* Slim scrollbar for Select2 */
.filter-toolbar .select2-selection--multiple::-webkit-scrollbar {
    width: 4px;
}

.filter-toolbar .select2-selection--multiple::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Tighten sidebar search section padding */
.sidebar-section-body.p-3 {
    padding: 0.75rem 1rem !important;
}

/* --- Titan Filter Drawer (Off-canvas) --- */
.offcanvas-filter {
    width: 400px !important;
    border-left: 0 !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1) !important;
}

.offcanvas-filter .offcanvas-header {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
}

.offcanvas-filter .offcanvas-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.offcanvas-filter .offcanvas-body {
    padding: 1.5rem;
    background-color: #fff;
}

.filter-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color);
    display: block;
}

.offcanvas-footer {
    padding: 1.25rem 1.5rem;
    background: var(--body-bg);
    border-top: 1px solid var(--border-color);
}

.filter-control-group {
    margin-bottom: 1.5rem;
}

.filter-control-group label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0.5rem;
    display: block;
}

/* --- WhatsApp Chat Utilities --- */
.bg-whatsapp-chat {
    background-color: #efeae2;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-repeat: repeat;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ccc;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.conv-item {
    transition: background 0.15s ease;
    cursor: pointer;
}
.conv-item:hover {
    background-color: #f5f6f6 !important;
}
.conv-item.active {
    background-color: #f0f2f3 !important;
}

.chat-bubble {
    padding: 6px 10px 8px;
    border-radius: 8px;
    position: relative;
    max-width: 65%;
    font-size: 0.9rem;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.1);
    line-height: 1.4;
}

.chat-bubble.msg-inbound {
    background-color: #fff;
    align-self: flex-start;
    border-top-left-radius: 0;
}

.chat-bubble.msg-outbound {
    background-color: #dcf8c6;
    align-self: flex-end;
    border-top-right-radius: 0;
}

.message-time {
    font-size: 0.7rem;
    color: #667781;
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.message-status {
    margin-left: 4px;
}

.hover-text-dark:hover {
    color: #333 !important;
    transition: color 0.2s;
}

.bg-light {
    background-color: #f0f2f5 !important;
}

.conv-item.active {
    background-color: #ebebeb !important;
}

.ph-xl {
    font-size: 1.5rem;
}

.fs-xs { font-size: 0.75rem !important; }
.fs-xxs { font-size: 0.65rem !important; }

.hover-bg-light:hover { background-color: rgba(0,0,0,0.02) !important; transition: background 0.2s; }

/* --- intl-tel-input (country code picker) --- */
.iti {
    width: 100%;
}
.iti__flag-container {
    z-index: 1056; /* above Bootstrap modal (1055) */
}

/* --------------------------------------------------------------------
   Flat UI: remove decorative shadows app-wide (cards, buttons, pills,
   dropdowns, offcanvas, chat bubbles, etc.) — including whatever the
   vendor theme applies by default, not just the rules above.
   Focus-ring box-shadows (e.g. .form-control:focus) are intentionally
   excluded via :not() so keyboard/tap focus indicators still show —
   this rule doesn't match an element at all while it's focused, so the
   real focus-ring rule for it applies untouched, no override needed.
   -------------------------------------------------------------------- */
*:not(:focus):not(:focus-within):not(:focus-visible) {
    box-shadow: none !important;
}
.cursor-pointer { cursor: pointer; }