/* =============================================================================
 * TourMatrix Design System — CSS Variables & Utility Classes
 *
 * Shared design tokens for the Bridge (Yii2) application.
 * Typography and gradients align with the marketing site (tourmatrix.in
 * assets/css/style.css: Sora headings, DM Sans body, brand gradient).
 * Load this file BEFORE all other stylesheets.
 * ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap");

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */

:root {
    /* Brand Colors — derived from TourMatrix logo */
    --tm-brand-purple:       #7C3AED;     /* Logo: purple swoosh */
    --tm-brand-purple-light: #f3e8ff;
    --tm-brand-purple-dark:  #5B21B6;
    --tm-brand-pink:         #fe016e;     /* Logo: pink accent swoosh */
    --tm-brand-pink-light:   #fff1f5;
    --tm-brand-gold:         #F5A623;     /* Logo: paper plane gold */
    --tm-brand-gold-light:   #fef9ee;
    --tm-brand-dark:         #1e2339;     /* Logo: dark navy */
    --tm-brand-dark-alt:     #273058;
    --tm-brand-light:        #f0f3ff;

    /* Marketing-site aliases (same values; use for clarity in new code) */
    --tm-marketing-primary:     var(--tm-brand-purple);
    --tm-marketing-accent:      var(--tm-brand-pink);
    --tm-marketing-heading:     var(--tm-brand-dark);
    --tm-marketing-body-bg:     var(--tm-brand-light);

    /* Semantic Colors */
    --tm-success:         #10b981;
    --tm-success-light:   #d1fae5;
    --tm-success-dark:    #065f46;
    --tm-warning:         #F5A623;     /* Logo gold */
    --tm-warning-light:   var(--tm-brand-gold-light);
    --tm-warning-dark:    #92400e;
    --tm-danger:          #fe016e;      /* Logo pink — used for delete/danger actions */
    --tm-danger-light:    var(--tm-brand-pink-light);
    --tm-danger-dark:     #be0150;
    --tm-info:            #0ea5e9;
    --tm-info-light:      #e0f2fe;
    --tm-info-dark:       #075985;

    /* Text Colors */
    --tm-text-primary:    #1e293b;
    --tm-text-secondary:  #64748b;
    --tm-text-muted:      #94a3b8;
    --tm-text-inverse:    #ffffff;
    /* Marketing body subtitle / secondary copy */
    --tm-text-subtitle:   #696969;

    /* Surface & Border Colors */
    --tm-bg-page:         #f8fafc;
    --tm-bg-card:         #ffffff;
    --tm-bg-hover:        #f1f5f9;
    /* Centered auth / subscription shells (tourmatrix.in .mx-bg-light-blue) */
    --tm-bg-auth:         var(--tm-brand-light);
    /* Minimal published / external preview pages (legacy solid; prefer tokens) */
    --tm-bg-published:    #7C3AED;
    --tm-border:          #cbd5e1;
    --tm-border-light:    #e2e8f0;
    --tm-border-focus:    var(--tm-brand-purple);

    /* Tables (aligned headers across legacy + Bootstrap) */
    --tm-table-header-bg:     var(--tm-brand-purple);
    --tm-table-header-color:  var(--tm-text-inverse);
    --tm-table-cell-padding:  0.625rem 1rem;

    /* Radius */
    --tm-radius-sm:       6px;
    --tm-radius-md:       8px;
    --tm-radius-lg:       12px;
    --tm-radius-xl:       16px;
    --tm-radius-full:     9999px;

    /* Shadows */
    --tm-shadow-sm:       0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tm-shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --tm-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --tm-shadow-xl:       0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* Typography (Poppins = headings, Nunito = body; Sora/DM Sans as fallback) */
    --tm-font-display:    'Poppins', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tm-font-sans:       'Nunito', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tm-font-size-xs:    0.75rem;
    --tm-font-size-sm:    0.875rem;
    --tm-font-size-base:  1rem;
    --tm-font-size-lg:    1.125rem;
    --tm-font-size-xl:    1.25rem;
    --tm-font-size-2xl:   1.5rem;

    /* ─── Legacy Font Variable Remapping ──────────────────────────────────── */
    /* Redirect ALL legacy Bw-Mitga / DM Sans variables to design system fonts */
    --primary-font-reg:   'Nunito', 'DM Sans', sans-serif;
    --primary-font-bold:  'Poppins', 'Sora', sans-serif;
    --primary-font-light: 'Nunito', 'DM Sans', sans-serif;
    --primary-font-400:   'Nunito', 'DM Sans', sans-serif;
    --primary-font-500:   'Nunito', 'DM Sans', sans-serif;
    --primary-font-600:   'Poppins', 'Sora', sans-serif;
    --primary-font-700:   'Poppins', 'Sora', sans-serif;
    --primary-font-800:   'Poppins', 'Sora', sans-serif;

    /* Spacing */
    --tm-space-1:         0.25rem;
    --tm-space-2:         0.5rem;
    --tm-space-3:         0.75rem;
    --tm-space-4:         1rem;
    --tm-space-5:         1.25rem;
    --tm-space-6:         1.5rem;
    --tm-space-8:         2rem;

    /* Transitions */
    --tm-transition:      150ms ease-in-out;

    /* Gradients (tourmatrix.in) */
    --tm-gradient-primary: linear-gradient(135deg, #7C3AED 0%, #fe016e 100%);
    --tm-gradient-gold:   linear-gradient(135deg, #F5A623 0%, #f59e0b 100%);
    --tm-gradient-dark:   linear-gradient(223.42deg, #1e2339 23.03%, #273058 130.01%);
}

/* ─── Global Typography Override ───────────────────────────────────────────── */
/* Catch-all: force Nunito on body, Poppins on headings across ALL pages.     */
/* This overrides hardcoded Bw-Mitga, Sofia Pro, Avenir, and other legacy     */
/* fonts in custom-style.css, booking-request.css, full-page.css, etc.        */

body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(code):not(pre) {
    font-family: 'Nunito', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.heading, .sec_heading, .card-title, .modal-title,
th, thead th,
.btn, button, .nav-link,
label, .Labelclass,
.font-bw-mitga {
    font-family: 'Poppins', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ─── Font Rendering ──────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55 !important;
    color: #1e293b;
    letter-spacing: -0.01em;
}

/* ─── Heading Scale ───────────────────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2 !important; letter-spacing: -0.025em; color: #0f172a; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.25 !important; letter-spacing: -0.02em; color: #0f172a; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3 !important; letter-spacing: -0.015em; color: #1e293b; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.35 !important; color: #1e293b; }
h5 { font-size: 0.875rem; font-weight: 600; line-height: 1.4 !important; color: #334155; }
h6 { font-size: 0.8125rem; font-weight: 600; line-height: 1.4 !important; color: #334155; }

/* ─── Body Text Helpers ───────────────────────────────────────────────────── */
p, .text-body { font-size: 0.875rem; line-height: 1.6; color: #334155; }
small, .text-sm { font-size: 0.8125rem; line-height: 1.5; }
.text-xs { font-size: 0.75rem; line-height: 1.45; }
.text-muted { color: #64748b !important; }

/* ─── Table Typography ────────────────────────────────────────────────────── */
table { font-size: 0.8125rem; }
table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; }
table td { font-size: 0.8125rem; font-weight: 400; color: #1e293b; line-height: 1.45; }

/* ─── Form Typography ─────────────────────────────────────────────────────── */
input, select, textarea, .form-control {
    font-size: 0.875rem !important;
    font-weight: 400;
    color: #1e293b;
    letter-spacing: -0.005em;
}
label, .Labelclass, .control-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
}

/* ─── Button Typography ───────────────────────────────────────────────────── */
.btn, button {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ─── Breadcrumb & Navigation Typography ──────────────────────────────────── */
.breadcrumb { font-size: 0.8125rem; font-weight: 500; }
.nav-link { font-size: 0.875rem; font-weight: 500; }
.dropdown-item { font-size: 0.8125rem; font-weight: 400; }

/* ─── Card Typography ─────────────────────────────────────────────────────── */
.card-title { font-size: 0.9375rem; font-weight: 600; color: #1e293b; }
.card-body { font-size: 0.8125rem; }

/* ─── Button System ─────────────────────────────────────────────────────────── */

.btn-tm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--tm-font-sans);
    font-size: var(--tm-font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--tm-radius-md);
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--tm-transition);
    text-decoration: none;
}

.btn-tm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-tm-sm {
    padding: 0.25rem 0.625rem;
    font-size: var(--tm-font-size-xs);
}

.btn-tm-lg {
    padding: 0.625rem 1.25rem;
    font-size: var(--tm-font-size-base);
}

/* Primary */
.btn-tm-primary {
    background: var(--tm-brand-purple);
    color: var(--tm-text-inverse);
    box-shadow: var(--tm-shadow-sm);
}

.btn-tm-primary:hover {
    opacity: 0.9;
    text-decoration: none;
    color: var(--tm-text-inverse);
}

/* Secondary */
.btn-tm-secondary {
    background: var(--tm-bg-card);
    color: var(--tm-text-primary);
    border-color: var(--tm-border);
}

.btn-tm-secondary:hover {
    background: var(--tm-bg-hover);
    text-decoration: none;
    color: var(--tm-text-primary);
}

/* Danger */
.btn-tm-danger {
    background: var(--tm-danger);
    color: var(--tm-text-inverse);
}

.btn-tm-danger:hover {
    opacity: 0.9;
    text-decoration: none;
    color: var(--tm-text-inverse);
}

/* Outline */
.btn-tm-outline {
    background: transparent;
    color: var(--tm-brand-purple);
    border-color: var(--tm-brand-purple);
}

.btn-tm-outline:hover {
    background: var(--tm-brand-purple-light);
    text-decoration: none;
    color: var(--tm-brand-purple);
}

/* Success */
.btn-tm-success {
    background: var(--tm-success);
    color: var(--tm-text-inverse);
}

.btn-tm-success:hover {
    opacity: 0.9;
    text-decoration: none;
    color: var(--tm-text-inverse);
}

/* Quote / itinerary toolbar (legacy .btn-outline-custom — use tokens) */
.btn-outline-tm-accent {
    color: var(--tm-brand-pink);
    border-color: var(--tm-brand-pink);
    background-color: transparent;
}

.btn-outline-tm-accent:hover {
    background-color: var(--tm-brand-pink);
    border-color: var(--tm-brand-pink);
    color: var(--tm-text-inverse);
}

/* ─── Card System ───────────────────────────────────────────────────────────── */

.card-tm {
    background: var(--tm-bg-card);
    border: 1px solid var(--tm-border-light);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-sm);
}

.card-tm-header {
    padding: var(--tm-space-3) var(--tm-space-5);
    border-bottom: 1px solid var(--tm-border-light);
    font-size: var(--tm-font-size-sm);
    font-weight: 600;
    color: var(--tm-text-primary);
}

.card-tm-body {
    padding: var(--tm-space-5);
}

.card-tm-footer {
    padding: var(--tm-space-3) var(--tm-space-5);
    border-top: 1px solid var(--tm-border-light);
}

/* ─── Badge System ──────────────────────────────────────────────────────────── */

.badge-tm {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full);
    font-size: var(--tm-font-size-xs);
    font-weight: 500;
    line-height: 1.5;
}

.badge-tm-success {
    background: var(--tm-success-light);
    color: var(--tm-success-dark);
}

.badge-tm-warning {
    background: var(--tm-warning-light);
    color: var(--tm-warning-dark);
}

.badge-tm-danger {
    background: var(--tm-danger-light);
    color: var(--tm-danger-dark);
}

.badge-tm-info {
    background: var(--tm-info-light);
    color: var(--tm-info-dark);
}

.badge-tm-purple {
    background: var(--tm-brand-purple-light);
    color: var(--tm-brand-purple-dark);
}

.badge-tm-neutral {
    background: #f1f5f9;
    color: var(--tm-text-secondary);
}

/* ─── Form Inputs ───────────────────────────────────────────────────────────── */

.input-tm {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--tm-font-sans);
    font-size: var(--tm-font-size-sm);
    line-height: 1.5;
    color: var(--tm-text-primary);
    background: var(--tm-bg-card);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-md);
    transition: border-color var(--tm-transition), box-shadow var(--tm-transition);
}

.input-tm:focus {
    border-color: var(--tm-brand-purple);
    box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.12);
    outline: none;
}

.input-tm::placeholder {
    color: var(--tm-text-muted);
}

.input-tm:disabled {
    background: var(--tm-bg-page);
    opacity: 0.7;
    cursor: not-allowed;
}

/* Select variant */
select.input-tm {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 2rem;
}

/* ─── Alert System ──────────────────────────────────────────────────────────── */

.alert-tm {
    padding: var(--tm-space-4);
    border-radius: var(--tm-radius-md);
    border: 1px solid transparent;
    font-size: var(--tm-font-size-sm);
}

.alert-tm-info {
    background: var(--tm-info-light);
    border-color: #bae6fd;
    color: var(--tm-info-dark);
}

.alert-tm-success {
    background: var(--tm-success-light);
    border-color: #a7f3d0;
    color: var(--tm-success-dark);
}

.alert-tm-warning {
    background: var(--tm-warning-light);
    border-color: #fde68a;
    color: var(--tm-warning-dark);
}

.alert-tm-error {
    background: var(--tm-danger-light);
    border-color: #fecaca;
    color: var(--tm-danger-dark);
}

/* ─── Table Enhancements ────────────────────────────────────────────────────── */

.table-tm {
    width: 100%;
    font-size: var(--tm-font-size-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.table-tm thead th {
    background: var(--tm-bg-page);
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: var(--tm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary);
    border-bottom: 1px solid var(--tm-border-light);
}

.table-tm tbody td {
    padding: 0.625rem 1rem;
    color: var(--tm-text-primary);
    border-bottom: 1px solid var(--tm-border-light);
}

.table-tm tbody tr:hover {
    background: var(--tm-bg-hover);
}

.table-tm tbody tr:last-child td {
    border-bottom: none;
}

/* Bootstrap 4: add `table-tm` next to `table` for consistent data grids */
.table.table-tm {
    width: 100%;
    margin-bottom: 0;
    font-family: var(--tm-font-sans);
    font-size: var(--tm-font-size-sm);
    color: var(--tm-text-primary);
    background: var(--tm-bg-card);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--tm-border-light);
    border-radius: var(--tm-radius-md);
    overflow: hidden;
}

/* Skip .table-enquiry-class: thead uses purple row classes on <tr> */
.table.table-tm:not(.table-enquiry-class) thead th {
    background: var(--tm-bg-page);
    color: var(--tm-text-secondary);
    font-size: var(--tm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--tm-border-light);
    border-top: none;
    vertical-align: middle;
    padding: var(--tm-table-cell-padding);
}

.table.table-tm tbody td {
    border-top: 1px solid var(--tm-border-light);
    vertical-align: middle;
    padding: var(--tm-table-cell-padding);
}

.table.table-tm tbody tr:hover {
    background: var(--tm-bg-hover);
}

.table.table-tm.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(248, 250, 252, 0.85);
}

.table.table-tm.table-striped tbody tr:nth-of-type(odd):hover {
    background: var(--tm-bg-hover);
}

.table.table-tm.table-bordered th,
.table.table-tm.table-bordered td {
    border: 1px solid var(--tm-border-light);
}

.table.table-tm.table-bordered thead th {
    border-bottom-width: 2px;
    border-color: var(--tm-border-light);
}

/* Optional wrapper: card-style table block in main content */
.tm-table-wrap {
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-border-light);
    background: var(--tm-bg-card);
    box-shadow: var(--tm-shadow-sm);
    overflow: auto;
    margin-bottom: var(--tm-space-4);
}

.tm-table-wrap .table {
    margin-bottom: 0;
}

/* Default polish for unmarked Bootstrap tables in app shell (non-destructive) */
.main-contr .data-content .table {
    font-family: var(--tm-font-sans);
    font-size: var(--tm-font-size-sm);
}

.main-contr .data-content .table:not(.table-enquiry-class) thead th {
    font-weight: 600;
    color: var(--tm-text-primary);
    border-bottom: 2px solid var(--tm-border-light);
    background: var(--tm-bg-page);
}

.main-contr .data-content .table tbody td {
    border-color: var(--tm-border-light);
    vertical-align: middle;
}

.main-contr .data-content .table tbody tr:hover {
    background-color: var(--tm-bg-hover);
}

/* Wide tables in flex layouts: allow horizontal scroll instead of blowing out the column */
.main-contr .data-content .table-responsive {
    min-width: 0;
}

/* ─── Modal Overlay ─────────────────────────────────────────────────────────── */

.modal-tm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-tm-content {
    background: var(--tm-bg-card);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-tm-header {
    padding: var(--tm-space-5);
    border-bottom: 1px solid var(--tm-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-tm-header h3 {
    font-size: var(--tm-font-size-lg);
    font-weight: 600;
    color: var(--tm-text-primary);
    margin: 0;
}

.modal-tm-body {
    padding: var(--tm-space-5);
}

.modal-tm-footer {
    padding: var(--tm-space-4) var(--tm-space-5);
    border-top: 1px solid var(--tm-border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--tm-space-3);
}

/* ─── Utility Classes ───────────────────────────────────────────────────────── */

.tm-text-primary { color: var(--tm-text-primary); }
.tm-text-secondary { color: var(--tm-text-secondary); }
.tm-text-muted { color: var(--tm-text-muted); }
.tm-text-success { color: var(--tm-success); }
.tm-text-warning { color: var(--tm-warning); }
.tm-text-danger { color: var(--tm-danger); }
.tm-text-info { color: var(--tm-info); }
.tm-text-brand { color: var(--tm-brand-purple); }

.tm-bg-page { background-color: var(--tm-bg-page); }
.tm-bg-card { background-color: var(--tm-bg-card); }

.tm-border { border-color: var(--tm-border); }
.tm-border-light { border-color: var(--tm-border-light); }

/* ─── Focus Ring ────────────────────────────────────────────────────────────── */

.focus-ring-tm:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.2);
}

/* ─── Gradient Backgrounds ──────────────────────────────────────────────────── */

.tm-gradient-purple {
    background: linear-gradient(135deg, var(--tm-brand-purple), var(--tm-brand-pink));
}

.tm-gradient-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.tm-gradient-info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

/* ─── Marketing-aligned typography (opt-in; avoids restyling every legacy view) ─ */

.tm-heading,
.tm-page-title {
    font-family: var(--tm-font-display);
    color: var(--tm-marketing-heading);
}

.tm-prose-muted {
    color: var(--tm-text-subtitle);
}

/* ─── Layout shells (replace inline body/wrapper styles) ─ */

body.tm-layout-auth {
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--tm-bg-auth);
}

body.tm-layout-auth--hero {
    background-image: url('/images/tm_welcome.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tm-layout-auth__panel {
    width: min(40%, 28rem);
}

@media (max-width: 767.98px) {
    .tm-layout-auth__panel {
        width: 100%;
        max-width: 28rem;
        padding: 0 16px !important;
    }

    /* Stack form labels above inputs on mobile */
    .tm-layout-auth .form-group.row .col-md-3,
    .tm-layout-auth .form-group.row .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Fix hardcoded label positioning */
    .tm-layout-auth .Inline-label {
        left: auto !important;
        position: relative !important;
    }

    /* Enlarge login button for touch (44px min target) */
    .tm-layout-auth .login-btn,
    .tm-layout-auth button[type="submit"] {
        width: 100% !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    /* Prevent iOS zoom on input focus (must be >= 16px) */
    .tm-layout-auth .login-input,
    .tm-layout-auth input[type="email"],
    .tm-layout-auth input[type="password"],
    .tm-layout-auth input[type="text"] {
        font-size: 16px !important;
        height: 44px !important;
        padding: 10px 12px !important;
    }

    /* Readable footer links */
    .tm-layout-auth .footer-links,
    .tm-layout-auth .card-body a {
        font-size: 13px !important;
    }
}

body.tm-layout-subscription {
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background: var(--tm-bg-auth);
}

.tm-layout-subscription__panel {
    width: min(58%, 48rem);
}

@media (max-width: 991.98px) {
    .tm-layout-subscription__panel {
        width: 100%;
    }
}

body.tm-layout-published {
    background: var(--tm-bg-published);
}

/* Quotation preview layouts (Bootstrap 5) — typography only; keep BS grid/components separate */
body.tm-quotation-preview {
    font-family: var(--tm-font-sans);
}

/* =============================================================================
 * MODERNIZATION LAYER — Bootstrap 4 Component Overrides
 *
 * These rules upgrade Bootstrap 4 defaults to match the design system.
 * They target Bootstrap classes directly so every page benefits automatically.
 * No functionality changes — visual refinements only.
 * ============================================================================= */

/* ─── Global Typography ────────────────────────────────────────────────────── */

body {
    font-family: var(--tm-font-sans);
    color: var(--tm-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tm-font-sans);
    font-weight: 600;
    color: var(--tm-text-primary);
    letter-spacing: -0.01em;
}

::selection {
    background: var(--tm-brand-purple-light);
    color: var(--tm-brand-purple-dark);
}

/* ─── Scrollbar Styling ────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--tm-border);
    border-radius: var(--tm-radius-full);
}

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

/* ─── Bootstrap Form Controls ──────────────────────────────────────────────── */

.form-control {
    font-family: var(--tm-font-sans);
    font-size: var(--tm-font-size-sm);
    color: var(--tm-text-primary);
    border-color: var(--tm-border-light);
    border-radius: var(--tm-radius-sm);
    transition: border-color var(--tm-transition), box-shadow var(--tm-transition);
}

.form-control:focus {
    border-color: var(--tm-brand-purple);
    box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.1);
}

.form-control::placeholder {
    color: var(--tm-text-muted);
}

.form-control-sm {
    font-size: var(--tm-font-size-xs);
    border-radius: var(--tm-radius-sm);
}

label, .control-label {
    font-size: var(--tm-font-size-sm);
    font-weight: 500;
    color: var(--tm-text-primary);
    margin-bottom: 4px;
}

/* Select2 integration */
.select2-container--default .select2-selection--single {
    border-color: var(--tm-border-light) !important;
    border-radius: var(--tm-radius-sm) !important;
    height: 36px !important;
    transition: border-color var(--tm-transition);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tm-brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.1) !important;
}

/* ─── Bootstrap Buttons ────────────────────────────────────────────────────── */

.btn {
    font-family: var(--tm-font-sans);
    font-weight: 500;
    border-radius: var(--tm-radius-sm);
    transition: all var(--tm-transition);
    font-size: var(--tm-font-size-sm);
    letter-spacing: 0.01em;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--tm-brand-purple);
    border-color: var(--tm-brand-purple);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--tm-brand-purple-dark);
    border-color: var(--tm-brand-purple-dark);
    box-shadow: 0 4px 12px rgba(131, 27, 238, 0.25);
}

.btn-outline-primary {
    color: var(--tm-brand-purple);
    border-color: var(--tm-brand-purple);
}

.btn-outline-primary:hover {
    background-color: var(--tm-brand-purple);
    border-color: var(--tm-brand-purple);
    color: var(--tm-text-inverse);
    box-shadow: 0 4px 12px rgba(131, 27, 238, 0.25);
}

.btn-success {
    background-color: var(--tm-success);
    border-color: var(--tm-success);
}

.btn-danger {
    background-color: var(--tm-danger);
    border-color: var(--tm-danger);
}

.btn-warning {
    background-color: var(--tm-warning);
    border-color: var(--tm-warning);
}

.btn-info {
    background-color: var(--tm-info);
    border-color: var(--tm-info);
    color: var(--tm-text-inverse);
}

/* ─── Bootstrap Cards ──────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--tm-border-light);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-sm);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--tm-shadow-md);
}

.card-header {
    background-color: var(--tm-bg-page);
    border-bottom: 1px solid var(--tm-border-light);
    font-weight: 600;
    font-size: var(--tm-font-size-sm);
    padding: 12px 16px;
}

.card-body {
    padding: 16px;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--tm-border-light);
    padding: 12px 16px;
}

/* ─── Bootstrap Tables ─────────────────────────────────────────────────────── */

.table {
    font-size: var(--tm-font-size-sm);
    color: var(--tm-text-primary);
}

.table thead th {
    font-weight: 600;
    font-size: var(--tm-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-width: 1px;
    padding: 10px 12px;
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-top: 1px solid var(--tm-border-light);
}

.table tbody tr {
    transition: background-color var(--tm-transition);
}

.table-hover tbody tr:hover {
    background-color: var(--tm-bg-hover);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.015);
}

/* ─── Bootstrap Modals ─────────────────────────────────────────────────────── */

.modal-content {
    border: none;
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-xl);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--tm-border-light);
    padding: 16px 20px;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: var(--tm-font-size-base);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--tm-border-light);
    padding: 12px 20px;
}

.modal-backdrop.show {
    opacity: 0.4;
}

/* ─── Bootstrap Dropdowns ──────────────────────────────────────────────────── */

.dropdown-menu {
    border: 1px solid var(--tm-border-light);
    border-radius: var(--tm-radius-md);
    box-shadow: var(--tm-shadow-lg);
    padding: 4px;
    font-size: var(--tm-font-size-sm);
}

.dropdown-item {
    border-radius: var(--tm-radius-sm);
    padding: 8px 12px;
    transition: background-color var(--tm-transition);
}

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

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--tm-brand-purple-light);
    color: var(--tm-brand-purple-dark);
}

/* ─── Bootstrap Nav Tabs ───────────────────────────────────────────────────── */

.nav-tabs {
    border-bottom: 1px solid var(--tm-border-light);
}

.nav-tabs .nav-link {
    font-size: var(--tm-font-size-sm);
    font-weight: 500;
    color: var(--tm-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    transition: all var(--tm-transition);
}

.nav-tabs .nav-link:hover {
    color: var(--tm-text-primary);
    border-color: transparent;
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--tm-brand-purple);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--tm-brand-purple);
}

/* ─── Bootstrap Badges ─────────────────────────────────────────────────────── */

.badge {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    border-radius: var(--tm-radius-full);
    padding: 3px 8px;
}

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

.badge-success, .bg-success {
    background-color: var(--tm-success) !important;
}

.badge-danger, .bg-danger {
    background-color: var(--tm-danger) !important;
}

.badge-warning, .bg-warning {
    background-color: var(--tm-warning) !important;
    color: #fff !important;
}

.badge-info, .bg-info {
    background-color: var(--tm-info) !important;
}

/* ─── Bootstrap Alerts ─────────────────────────────────────────────────────── */

.alert {
    border-radius: var(--tm-radius-md);
    font-size: var(--tm-font-size-sm);
    border: none;
}

.alert-info {
    background-color: var(--tm-info-light);
    color: var(--tm-info-dark);
}

.alert-success {
    background-color: var(--tm-success-light);
    color: var(--tm-success-dark);
}

.alert-warning {
    background-color: var(--tm-warning-light);
    color: var(--tm-warning-dark);
}

.alert-danger {
    background-color: var(--tm-danger-light);
    color: var(--tm-danger-dark);
}

/* ─── Bootstrap Pagination ─────────────────────────────────────────────────── */

.page-link {
    color: var(--tm-brand-purple);
    border-color: var(--tm-border-light);
    font-size: var(--tm-font-size-sm);
    transition: all var(--tm-transition);
}

.page-link:hover {
    color: var(--tm-brand-purple-dark);
    background-color: var(--tm-brand-purple-light);
    border-color: var(--tm-brand-purple-light);
}

.page-item.active .page-link {
    background-color: var(--tm-brand-purple);
    border-color: var(--tm-brand-purple);
}

/* ─── Bootstrap Tooltips & Popovers ────────────────────────────────────────── */

.tooltip-inner {
    background-color: var(--tm-brand-dark);
    border-radius: var(--tm-radius-sm);
    font-size: var(--tm-font-size-xs);
    padding: 4px 8px;
}

.popover {
    border-radius: var(--tm-radius-md);
    border-color: var(--tm-border-light);
    box-shadow: var(--tm-shadow-lg);
}

/* ─── DataTables Integration ───────────────────────────────────────────────── */

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--tm-border-light);
    border-radius: var(--tm-radius-sm);
    font-size: var(--tm-font-size-sm);
    padding: 4px 8px;
    transition: border-color var(--tm-transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--tm-brand-purple);
    box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.1);
    outline: none;
}

.dataTables_wrapper .dataTables_info {
    font-size: var(--tm-font-size-xs);
    color: var(--tm-text-secondary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--tm-radius-sm) !important;
    font-size: var(--tm-font-size-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--tm-brand-purple) !important;
    border-color: var(--tm-brand-purple) !important;
    color: #fff !important;
}

/* ─── Empty States ─────────────────────────────────────────────────────────── */

.tm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--tm-text-muted);
}

.tm-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.tm-empty-state p {
    font-size: var(--tm-font-size-sm);
    margin: 0;
}

/* ─── Toastr Overrides ─────────────────────────────────────────────────────── */

.toast-success {
    background-color: var(--tm-success) !important;
}

.toast-error {
    background-color: var(--tm-danger) !important;
}

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

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

#toast-container > div {
    border-radius: var(--tm-radius-md) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    font-family: var(--tm-font-sans) !important;
    font-size: var(--tm-font-size-sm) !important;
}

/* ─── Smooth Animations ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .fade {
        transition: opacity 0.2s ease;
    }

    .modal.fade .modal-dialog {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .collapse {
        transition: height 0.25s ease;
    }

    .dropdown-menu {
        animation: tm-dropdown-in 0.15s ease-out;
    }

    @keyframes tm-dropdown-in {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ─── DataTable Brand Styling ──────────────────────────────────────────────── */
/* Ensures all DataTable UI elements follow the brand purple + Poppins/Nunito fonts */

/* Table header row — brand purple */
.thtablerow-en,
.thtablerow-slab,
.thtableguestcount,
.th-table-tarif-room,
table thead tr {
    background-color: var(--tm-brand-purple) !important;
    color: #fff !important;
    font-family: 'Poppins', var(--tm-font-sans) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.01em;
}

.thtablerow-en th,
.thtablerow-slab th,
.thtableguestcount th,
.th-table-tarif-room th,
.tariff_table th,
.thtablerules,
.child-policy-property-table th,
.nationalityTable-th-class th,
.thtableaccomadation th,
.accordion-top {
    background-color: var(--tm-brand-purple) !important;
    color: #fff !important;
}

/* Catch-all: ANY table header inside .data-content gets brand purple */
.data-content table thead th,
.data-content table thead td,
.data-content table.dataTable thead th,
.data-content table.dataTable thead td,
.data-content .table-striped thead th,
.data-content .dataTables_wrapper table thead th {
    background-color: var(--tm-brand-purple) !important;
    color: #fff !important;
    font-family: 'Poppins', var(--tm-font-sans) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* DataTable sorting icon color on purple bg */
.data-content table.dataTable thead .sorting::before,
.data-content table.dataTable thead .sorting::after,
.data-content table.dataTable thead .sorting_asc::before,
.data-content table.dataTable thead .sorting_desc::before {
    color: rgba(255,255,255,0.4) !important;
}

/* ─── Tariff Rate Badges — Subtle Tinted Style ─────────────────────────────── */
/* Replaces heavy solid-fill badges with refined light-bg + colored-text badges */

.data-content .rate-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: var(--tm-radius-full, 9999px) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: var(--tm-font-sans) !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
}

.data-content .rate-red {
    background: var(--tm-brand-pink-light, #fff1f5) !important;
    color: var(--tm-brand-pink, #fe016e) !important;
    border-color: rgba(254, 1, 110, 0.2) !important;
}

.data-content .rate-orange {
    background: var(--tm-brand-gold-light, #fef9ee) !important;
    color: #b45309 !important;
    border-color: rgba(245, 166, 35, 0.25) !important;
}

.data-content .rate-blue {
    background: var(--tm-brand-purple-light, #f3e8ff) !important;
    color: var(--tm-brand-purple, #7C3AED) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

/* Also style the mother-date-pill badges on property cards */
.data-content .mother-date-pill.red {
    background: var(--tm-brand-pink, #fe016e) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-full) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
}

.data-content .mother-date-pill.orange {
    background: var(--tm-brand-gold, #F5A623) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-full) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
}

.data-content .mother-date-pill.blue {
    background: var(--tm-brand-purple, #7C3AED) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-full) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
}

/* DataTable wrapper — card style */
.dataTables_wrapper {
    font-family: 'Nunito', var(--tm-font-sans) !important;
}

/* DataTable filter bar — proper spacing when title/buttons are appended into it */
.dataTables_wrapper .dataTables_filter {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 12px 0 16px !important;
}

/* Page titles appended into DataTable filter bar */
.dataTables_wrapper .dataTables_filter .left_title,
.dataTables_wrapper .dataTables_filter .card-title,
.dataTables_wrapper .dataTables_filter #title {
    position: static !important;
    margin: 0 !important;
    font-family: var(--tm-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: var(--tm-text-primary) !important;
    order: -1 !important;
    flex: 1 !important;
    top: auto !important;
    left: auto !important;
}

/* Fix left_title when in original position (before JS moves it) */
.data-content .left_title {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-family: var(--tm-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: var(--tm-text-primary) !important;
}

/* Action dropdown buttons in tables */
.data-content .cust_dropdown_btn {
    border: 1px solid var(--tm-border, #cbd5e1) !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-family: var(--tm-font-sans) !important;
    font-weight: 500 !important;
    color: var(--tm-text-secondary) !important;
    background: var(--tm-bg-card) !important;
    transition: all 0.15s ease !important;
}

.data-content .cust_dropdown_btn:hover {
    border-color: var(--tm-brand-purple) !important;
    color: var(--tm-brand-purple) !important;
    background: var(--tm-brand-purple-light) !important;
}

/* DataTable search input */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--tm-border-light) !important;
    border-radius: var(--tm-radius-md) !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-family: 'Nunito', var(--tm-font-sans) !important;
    outline: none !important;
    transition: border-color 0.15s ease !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--tm-brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* DataTable pagination */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--tm-border-light) !important;
    border-radius: var(--tm-radius-md) !important;
    background: var(--tm-bg-card) !important;
    color: var(--tm-text-secondary) !important;
    font-family: 'Nunito', var(--tm-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    margin: 0 2px !important;
    transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tm-brand-purple-light) !important;
    border-color: var(--tm-brand-purple) !important;
    color: var(--tm-brand-purple) !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tm-brand-purple) !important;
    border-color: var(--tm-brand-purple) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.25) !important;
    font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--tm-bg-page) !important;
    border-color: var(--tm-border-light) !important;
    color: var(--tm-text-muted) !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* DataTable info text */
.dataTables_wrapper .dataTables_info {
    font-size: 12px !important;
    color: var(--tm-text-muted) !important;
    font-family: 'Nunito', var(--tm-font-sans) !important;
    padding-top: 12px !important;
}

/* DataTable length selector */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--tm-border-light) !important;
    border-radius: var(--tm-radius-md) !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-family: 'Nunito', var(--tm-font-sans) !important;
}

/* Table body rows */
.table-enquiry-class tbody tr,
.table.table-tm tbody tr {
    transition: background-color 0.1s ease;
}

.table-enquiry-class tbody tr:hover,
.table.table-tm tbody tr:hover {
    background-color: rgba(124, 58, 237, 0.03) !important;
}

/* Sorting arrows — use brand purple for active sort */
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    color: var(--tm-brand-purple) !important;
    opacity: 1 !important;
}

/* ─── Global Font Refinement ───────────────────────────────────────────────── */
/* Apply Poppins for headings and Nunito for body across modernized views */

.tm-page-title,
.tm-page-header {
    font-family: 'Poppins', var(--tm-font-display) !important;
}

/* ─── Badge Refresh ────────────────────────────────────────────────────────── */
/* Ensure badges use the new purple */

.badge-tm-purple {
    background-color: var(--tm-brand-purple-light) !important;
    color: var(--tm-brand-purple) !important;
}

/* ─── Action Buttons in Tables ─────────────────────────────────────────────── */

.buttonEnquiry-add,
.buttonAddproperty,
.main_add_btn {
    background: var(--tm-brand-purple) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--tm-radius-md) !important;
    padding: 8px 16px !important;
    font-family: 'Poppins', var(--tm-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.buttonEnquiry-add:hover,
.buttonAddproperty:hover,
.main_add_btn:hover {
    background: var(--tm-brand-purple-dark) !important;
    box-shadow: var(--tm-shadow-md) !important;
}

/* ─── Breadcrumb Bar ───────────────────────────────────────────────────────── */

/* ─── Standard Page Header ─────────────────────────────────────────────────── */
/* Single row: breadcrumb on left, action buttons on right                    */

.tm-std-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    min-height: 36px;
}

.tm-std-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Reset Bootstrap column classes on buttons moved into header */
.tm-std-header-actions #add_button,
.tm-std-header-actions .dropdown {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.tm-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--tm-font-sans);
    font-size: 12px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.tm-breadcrumbs a {
    color: var(--tm-text-muted, #94a3b8) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.tm-breadcrumbs a:hover {
    color: var(--tm-brand-purple, #7C3AED) !important;
}

.tm-crumb-sep {
    color: var(--tm-border, #cbd5e1);
    font-size: 12px;
    -webkit-user-select: none;
    user-select: none;
}

.tm-crumb-current {
    color: var(--tm-text-primary, #1e293b);
    font-weight: 600;
    font-size: 13px;
}

/* Hide ALL duplicate page titles — breadcrumb handles page identity now */
.data-content .lead-page-title,
.data-content .tm-page-title,
.data-content .left_title,
.data-content .card-title-user,
.data-content .tm-page-header .tm-page-title,
.data-content .heading,
.data-content .card-header > h4.mb-0,
.data-content .payments_booking_header,
.data-content .room-booking-header {
    display: none !important;
}

/* Align action column cells consistently */
.data-content table td:last-child > div[style*="float: right"],
.data-content table td:last-child > div[style*="float:right"] {
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Consistent action icon sizes inside table cells */
.data-content table td img[src*="icons/"],
.data-content table td img[src*="Icon"] {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
}

/* Collapse the empty wrapper row left behind when buttons/titles are moved/hidden */
.data-content > .col-md-12[style*="height: 5px"],
.data-content .col-md-12[style*="height: 5px"] {
    display: none !important;
}

/* Collapse lead header to only show its action buttons */
.data-content .lead-page-header {
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.data-content .lead-page-header .lead-page-actions {
    margin-left: auto !important;
}

/* Reset Filter button — secondary style, not green */
.data-content #reset_filter,
.data-content button[onclick*="resetFilter"] {
    background: var(--tm-bg-card, #fff) !important;
    color: var(--tm-text-secondary, #64748b) !important;
    border: 1px solid var(--tm-border, #cbd5e1) !important;
}

.data-content #reset_filter:hover,
.data-content button[onclick*="resetFilter"]:hover {
    background: var(--tm-bg-hover, #f1f5f9) !important;
}

/* Suggested Itineraries button — outline pink style */
.data-content #btn_find_suggestions,
.data-content .btn-outline-info {
    background: transparent !important;
    color: var(--tm-brand-pink, #fe016e) !important;
    border: 1px solid var(--tm-brand-pink, #fe016e) !important;
    border-radius: var(--tm-radius-md, 8px) !important;
}

.data-content #btn_find_suggestions:hover,
.data-content .btn-outline-info:hover {
    background: var(--tm-brand-pink-light, #fff1f5) !important;
}

/* =============================================================================
 * GLOBAL THEME LAYER — Unified Dashboard-Style Consistency
 *
 * These rules target the .data-content wrapper (present in ALL pages via
 * tm_main.php layout) and override Bootstrap defaults + legacy styles
 * so every page inherits the dashboard aesthetic automatically.
 * ============================================================================= */

/* ─── Page Background & Content Area ──────────────────────────────────────── */

/* ─── Layout Overflow Fix ─────────────────────────────────────────────────── */
/* Sidebar is 256px fixed left; .main-contr has margin-left: 256px via inline style.
   Content must never exceed (100vw - 256px). */

html, body {
    overflow-x: hidden !important;
}

/* ─── Unified Header Bar ──────────────────────────────────────────────────── */
/* Sidebar header (56px) + navbar (56px) = seamless top bar                  */

.navbar {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--tm-border-light, #e2e8f0) !important;
    box-shadow: none !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
}

.navbar .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.navbar .navbar-brand {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.navbar .navbar-brand img {
    height: auto !important;
    max-height: 38px !important;
    width: auto !important;
}

/* Right-side nav items: align center vertically, remove gaps */
.navbar .navbar-nav {
    height: 56px !important;
    align-items: center !important;
    gap: 4px !important;
}

.navbar .navbar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.navbar .navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    font-family: var(--tm-font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    white-space: nowrap !important;
}

/* Action buttons in navbar (My Follow Ups, Tariff Calculator) */
.navbar .nav-link.calculator {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Notification icons */
.navbar .notification-link {
    padding: 6px !important;
}

.navbar .notification-cite img,
.navbar .message-cite img {
    width: 20px !important;
    height: 20px !important;
}

/* Profile dropdown */
.navbar .profile-link {
    padding: 4px 8px !important;
}

.navbar .profile-cite img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Navbar collapse: no margin/padding disrupting alignment */
.navbar .navbar-collapse {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Hamburger toggle — always visible on desktop */
@media (min-width: 1024px) {
    .tm-navbar-hamburger {
        display: flex !important;
    }
}

/* Hide navbar logo on desktop — sidebar handles branding now */
@media (min-width: 1024px) {
    .navbar .navbar-brand {
        display: none !important;
    }
    /* Show navbar logo when sidebar is collapsed */
    .tm-sidebar-collapsed .navbar .navbar-brand {
        display: flex !important;
        align-items: center;
    }
}

/* ─── Mobile Support (< 992px) ────────────────────────────────────────────── */
/* Unlocks the app for mobile. responsive-overlay.css handles most styling.  */

/* Remove the "screen size not supported" blocker */
.hide-smaller-screens {
    display: none !important;
}

@media (max-width: 991.98px) {
    /* Sidebar: hidden off-screen by default, slide-in via hamburger */
    #tm-sidebar {
        transform: translateX(-100%);
        z-index: 1070 !important;
        width: 280px !important;
        max-width: 85vw !important;
        transition: transform 0.25s ease !important;
        overflow-x: hidden !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
    }

    #tm-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Sidebar collapsed state not used on mobile — always full sidebar or hidden */
    #tm-sidebar.collapsed {
        width: 280px !important;
        max-width: 85vw !important;
    }
    #tm-sidebar.collapsed .tm-sb-logo-full { display: flex !important; }
    #tm-sidebar.collapsed .tm-sb-logo-mini { display: none !important; }
    #tm-sidebar.collapsed .tm-sb-label { display: inline !important; }
    #tm-sidebar.collapsed .tm-sb-chevron { display: block !important; }
    #tm-sidebar.collapsed .tm-sb-children { display: block !important; }
    #tm-sidebar.collapsed .tm-sb-btn,
    #tm-sidebar.collapsed .tm-sb-link,
    #tm-sidebar.collapsed .tm-sb-dash { justify-content: flex-start !important; padding-left: 14px !important; padding-right: 14px !important; }

    /* Content: full width, no sidebar margin */
    .main-contr {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Navbar: single row, fixed 50px height */
    .navbar {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 12px !important;
        flex-wrap: nowrap !important;
    }

    .navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
    }

    /* Hamburger: far left */
    .btn-hamburger-mobile {
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        padding: 8px !important;
    }

    /* Logo: centered absolutely */
    .navbar .navbar-brand {
        display: flex !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar .navbar-brand img {
        max-height: 32px !important;
    }

    /* Force collapse to stay visible + inline */
    .navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        margin-left: auto !important;
    }

    .navbar .navbar-nav {
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important;
        height: auto !important;
        flex-wrap: nowrap !important;
    }

    /* Hide desktop hamburger */
    .tm-navbar-hamburger {
        display: none !important;
    }

    /* Hide Follow Ups + Tariff Calculator — they're in sidebar */
    .navbar .nav-link.calculator {
        display: none !important;
    }

    /* Hide navbar-toggler (Bootstrap default) — we use our own hamburger */
    .navbar .navbar-toggler {
        display: none !important;
    }

    /* Hide profile name/role — just avatar */
    .navbar .profile-dropdown .user-name,
    .navbar .profile-dropdown .user-role,
    .navbar .profile-nav > div:not(.profile-cite) {
        display: none !important;
    }

    .navbar .profile-link {
        padding: 2px !important;
    }

    .navbar .profile-cite img {
        width: 28px !important;
        height: 28px !important;
    }

    .navbar .notification-link {
        padding: 4px !important;
    }

    /* Show mobile quick-actions in sidebar */
    .tm-sb-mobile-actions {
        display: flex !important;
    }

    /* Reduce content padding */
    .content-contr .data-content {
        padding: 12px !important;
    }

    /* Breadcrumb header: allow wrapping */
    .tm-std-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    /* DataTables: scrollable table body within fixed page layout */
    /* Ancestors stay overflow:hidden (no page-level scroll bleed) */

    /* Table wrapper: contains everything, no overflow */
    .data-content .dataTables_wrapper,
    .data-content .card-body {
        overflow: visible !important;
        width: 100% !important;
    }

    /* The actual scrollable area: wraps just the table */
    .data-content .dataTables_wrapper table,
    .data-content .card-body > table,
    .data-content table.dataTable,
    .data-content table.display,
    .data-content table.d,
    .data-content table.table-striped {
        display: block !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 65vh !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    .data-content table thead,
    .data-content table tbody {
        display: table !important;
        width: 100% !important;
        min-width: 800px !important;
    }

    .data-content table thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    /* Filter rows: stack vertically */
    .data-content #filter-row,
    .data-content .row[id*="filter"] {
        flex-direction: column !important;
    }

    .data-content #filter-row .form-group,
    .data-content .row[id*="filter"] .form-group {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.main-contr {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    /* Width is controlled dynamically by sidebar collapse JS */
}

.content-contr {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.content-contr .data-content {
    background: var(--tm-bg-page, #F9FAFB) !important;
    min-height: calc(100vh - 52px) !important;
    height: auto !important;
    padding: 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Override design_changes.css overflow:visible and tm_bridge.css wrong height */
.overflow_fix .data-content,
.overflow_fix.content-contr .data-content {
    height: auto !important;
    overflow-x: hidden !important;
}

/* Fix loading overlay — use 100% not 100vw */
.init-ajax .load-ajax {
    width: 100% !important;
    left: 0 !important;
}

/* Override design_changes.css .overflow_fix that sets overflow: visible */
.overflow_fix .data-content {
    overflow-x: hidden !important;
}

/* ─── DatePicker Fix — ensure dropdown renders above sidebar ──────────────── */
.datepicker-dropdown,
.datepicker.dropdown-menu {
    z-index: 1080 !important;
}

/* ─── intl-tel-input (Phone) Fix — full width + proper padding ────────────── */
.iti {
    display: block !important;
    width: 100% !important;
}
.iti input.inputTextClass,
.iti input[type="tel"].inputTextClass {
    width: 100% !important;
    padding-left: 52px !important;
}

/* ─── Typography — Global Font Override ───────────────────────────────────── */

.data-content {
    font-family: var(--tm-font-sans) !important;
    color: var(--tm-text-primary, #1e293b);
}

.data-content h1, .data-content h2, .data-content h3,
.data-content h4, .data-content h5, .data-content h6,
.data-content .heading,
.data-content .card-title,
.data-content .tm-page-title,
.data-content .card-title.font-bw-mitga,
.data-content .lead-page-title {
    font-family: var(--tm-font-display) !important;
    color: var(--tm-text-primary, #111827) !important;
    letter-spacing: -0.01em;
}

/* Legacy font aliases — redirect to new brand fonts */
.font-bw-mitga {
    font-family: var(--tm-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.font-bw-mitga-text {
    font-family: var(--tm-font-sans) !important;
    font-weight: 500 !important;
}
.font-bw-mitga-low-weight {
    font-family: var(--tm-font-sans) !important;
    font-weight: 400 !important;
}

/* ─── Cards & Panels ──────────────────────────────────────────────────────── */

.data-content .card {
    border: none !important;
    border-radius: var(--tm-radius-lg, 12px) !important;
    box-shadow: var(--tm-shadow-md) !important;
    background: var(--tm-bg-card, #fff) !important;
    overflow: hidden;
}

.data-content .card .card-header {
    background: var(--tm-bg-card, #fff) !important;
    border-bottom: 1px solid var(--tm-border-light, #e2e8f0) !important;
    font-family: var(--tm-font-display) !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
}

.data-content .card .card-body {
    padding: 20px !important;
}

/* Property cards & custom card wrappers */
.data-content .property-card-list,
.data-content .shadow-div {
    border-radius: var(--tm-radius-lg, 12px) !important;
    box-shadow: var(--tm-shadow-md) !important;
    border: none !important;
    background: var(--tm-bg-card, #fff) !important;
}

/* ─── Buttons — Unified Brand Styling ─────────────────────────────────────── */

/* Primary buttons — all variants get brand purple */
.data-content .btn-primary,
.data-content .btn.btn-primary,
.data-content .blue-btn,
.data-content .primary-btn {
    background: var(--tm-brand-purple) !important;
    border-color: var(--tm-brand-purple) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    font-family: var(--tm-font-display) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease !important;
    box-shadow: var(--tm-shadow-sm) !important;
    text-decoration: none !important;
}

.data-content .btn-primary:hover,
.data-content .btn.btn-primary:hover,
.data-content .blue-btn:hover,
.data-content .primary-btn:hover {
    background: var(--tm-brand-purple-dark) !important;
    border-color: var(--tm-brand-purple-dark) !important;
    box-shadow: var(--tm-shadow-md) !important;
    transform: translateY(-1px);
}

/* All add/create buttons */
/* Hide legacy plus-add.svg icon inside styled buttons */
.data-content .buttonAddUser img[src*="plus-add"],
.data-content .main_add_btn img[src*="plus-add"],
.data-content .buttonEnquiry-add img[src*="plus-add"] {
    display: none !important;
}

.data-content .buttonAddUser,
.data-content .btn-create-main {
    background: var(--tm-brand-purple) !important;
    border-color: var(--tm-brand-purple) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    font-family: var(--tm-font-display) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    box-shadow: var(--tm-shadow-sm) !important;
    transition: all 0.15s ease !important;
}

.data-content .buttonAddUser:hover,
.data-content .btn-create-main:hover {
    background: var(--tm-brand-purple-dark) !important;
    box-shadow: var(--tm-shadow-md) !important;
}

/* Secondary / outline buttons */
.data-content .btn-outline-secondary,
.data-content .btn-secondary,
.data-content .grey-btn,
.data-content .sentenq-button {
    background: var(--tm-bg-card, #fff) !important;
    color: var(--tm-text-secondary, #64748b) !important;
    border: 1px solid var(--tm-border, #cbd5e1) !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    font-family: var(--tm-font-sans) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.data-content .btn-outline-secondary:hover,
.data-content .btn-secondary:hover,
.data-content .grey-btn:hover,
.data-content .sentenq-button:hover {
    background: var(--tm-bg-hover, #f1f5f9) !important;
    color: var(--tm-text-primary) !important;
    border-color: var(--tm-border, #cbd5e1) !important;
}

/* Success buttons */
.data-content .btn-success,
.data-content .btn.btn-success {
    background: var(--tm-success) !important;
    border-color: var(--tm-success) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    font-family: var(--tm-font-sans) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Danger buttons */
.data-content .btn-danger,
.data-content .btn.btn-danger {
    background: var(--tm-danger) !important;
    border-color: var(--tm-danger) !important;
    color: #fff !important;
    border-radius: var(--tm-radius-md, 8px) !important;
    font-family: var(--tm-font-sans) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Small buttons */
.data-content .btn-sm,
.data-content .btn.btn-sm {
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: var(--tm-radius-sm, 6px) !important;
}

/* ─── Form Inputs — Rounded with Purple Focus ─────────────────────────────── */

.data-content .form-control,
.data-content input[type="text"],
.data-content input[type="email"],
.data-content input[type="number"],
.data-content input[type="password"],
.data-content input[type="tel"],
.data-content input[type="date"],
.data-content textarea,
.data-content select.form-control {
    border-radius: var(--tm-radius-md, 8px) !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
    font-family: var(--tm-font-sans) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    color: var(--tm-text-primary) !important;
    background: #fff !important;
}

.data-content .form-control:focus,
.data-content input:focus,
.data-content textarea:focus,
.data-content select.form-control:focus {
    border-color: var(--tm-brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
    outline: none !important;
}

/* Multi-select: constrain to single-line height with dropdown chevron */
.data-content select[multiple].form-control {
    min-height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !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 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

/* Hide stray <br> tags that create whitespace gaps in content areas */
.data-content .content > .container-fluid > br,
.data-content .container-fluid > br {
    display: none !important;
}

/* Select2 dropdowns — consistent rounded-8px, NOT pill-shaped */
.data-content .select2-container--default .select2-selection--single,
.data-content .select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--tm-radius-md, 8px) !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
    min-height: 38px !important;
    font-family: var(--tm-font-sans) !important;
    background: #fff !important;
}

.data-content .select2-container--default.select2-container--focus .select2-selection,
.data-content .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--tm-brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* Select2 placeholder text — visible gray, not faded */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection__placeholder {
    color: var(--tm-text-muted, #94a3b8) !important;
    opacity: 1 !important;
    font-size: 13px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tm-text-primary, #1e293b) !important;
    font-size: 13px !important;
    line-height: 36px !important;
    padding-left: 12px !important;
}

/* Select2 multi-select choice tags — small rounded chips, not pill */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: var(--tm-radius-sm, 6px) !important;
    background: var(--tm-brand-purple-light, #f3e8ff) !important;
    color: var(--tm-brand-purple, #7C3AED) !important;
    border: 1px solid rgba(124, 58, 237, 0.2) !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
    font-family: var(--tm-font-sans) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tm-brand-purple, #7C3AED) !important;
}

/* Select2 dropdown results panel */
.select2-dropdown {
    border-radius: var(--tm-radius-md, 8px) !important;
    border-color: var(--tm-border-light, #e2e8f0) !important;
    box-shadow: var(--tm-shadow-lg) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--tm-brand-purple, #7C3AED) !important;
}

/* Ensure form labels have consistent font */
.data-content label,
.data-content .Labelclass {
    font-family: var(--tm-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tm-text-primary, #1e293b) !important;
    margin-bottom: 6px !important;
}

/* Filter row containers */
.data-content #filter-row,
.data-content .filter-row {
    background: var(--tm-bg-card, #fff) !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
    border-radius: var(--tm-radius-lg, 12px) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

/* ─── Flash Messages / Alerts ─────────────────────────────────────────────── */

.data-content .alert {
    border-radius: var(--tm-radius-lg, 12px) !important;
    font-family: var(--tm-font-sans) !important;
    font-size: 13px !important;
    padding: 14px 18px !important;
    border-width: 1px !important;
}

.data-content .alert-success,
.data-content .alert-tm-success {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.data-content .alert-danger,
.data-content .alert-tm-error,
.data-content .alert-warning {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.data-content .alert-info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

/* ─── Badges — Pill-Shaped, Brand Colors ──────────────────────────────────── */

.data-content .badge {
    font-family: var(--tm-font-sans) !important;
    font-weight: 600 !important;
    border-radius: var(--tm-radius-full, 9999px) !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.01em;
}

.data-content .badge-info {
    background: var(--tm-brand-purple-light) !important;
    color: var(--tm-brand-purple) !important;
}

.data-content .badge-success {
    background: var(--tm-success-light, #d1fae5) !important;
    color: var(--tm-success-dark, #065f46) !important;
}

.data-content .badge-warning {
    background: var(--tm-warning-light, #fef3c7) !important;
    color: var(--tm-warning-dark, #92400e) !important;
}

.data-content .badge-danger {
    background: var(--tm-danger-light, #fee2e2) !important;
    color: var(--tm-danger-dark, #991b1b) !important;
}

/* ─── Tables — Refined DataTable Presentation ─────────────────────────────── */

.data-content .table {
    font-family: var(--tm-font-sans) !important;
    background: var(--tm-bg-card, #fff);
    border-radius: var(--tm-radius-md, 8px);
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.data-content .table-responsive {
    border-radius: var(--tm-radius-md, 8px) !important;
    overflow: hidden;
}

/* Compact row padding — tighter, scannable */
.data-content table tbody td,
.data-content table.dataTable tbody td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: var(--tm-text-primary, #1e293b) !important;
    border-bottom: 1px solid var(--tm-border-light, #f1f5f9) !important;
    border-top: none !important;
    line-height: 1.5 !important;
}

/* Zebra striping — very subtle */
.data-content table tbody tr:nth-child(even) td {
    background: #fafbfc !important;
}

.data-content table tbody tr:nth-child(odd) td {
    background: #fff !important;
}

/* Row hover — soft purple tint */
.data-content table tbody tr:hover td {
    background: rgba(124, 58, 237, 0.03) !important;
}

/* Header cells — compact, no uppercase screaming */
.data-content table thead th,
.data-content table.dataTable thead th {
    padding: 10px 14px !important;
    text-transform: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}

/* Action icon buttons — smaller, subtler, consistent spacing */
.data-content .table-actions .btn,
.data-content td .btn-sm,
.data-content td .btn.btn-sm {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--tm-radius-sm, 6px) !important;
    margin: 0 1px !important;
    font-size: 12px !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
    background: var(--tm-bg-card, #fff) !important;
    color: var(--tm-text-secondary, #64748b) !important;
    transition: all 0.15s ease !important;
}

.data-content .table-actions .btn:hover,
.data-content td .btn-sm:hover {
    border-color: var(--tm-brand-purple) !important;
    color: var(--tm-brand-purple) !important;
    background: var(--tm-brand-purple-light, #f3e8ff) !important;
    transform: translateY(-1px) !important;
}

/* Danger action buttons (delete) — pink hover */
.data-content .table-actions .btn-danger,
.data-content td .btn-danger.btn-sm {
    border-color: rgba(254, 1, 110, 0.2) !important;
    color: var(--tm-brand-pink, #fe016e) !important;
    background: var(--tm-brand-pink-light, #fff1f5) !important;
}

.data-content .table-actions .btn-danger:hover,
.data-content td .btn-danger.btn-sm:hover {
    background: var(--tm-brand-pink, #fe016e) !important;
    color: #fff !important;
    border-color: var(--tm-brand-pink) !important;
}

/* Make action icon images slightly smaller */
.data-content td img[src*="icon"],
.data-content td img[src*="Icon"] {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.data-content td a:hover img[src*="icon"],
.data-content td a:hover img[src*="Icon"],
.data-content td button:hover img[src*="icon"],
.data-content td button:hover img[src*="Icon"] {
    opacity: 1;
}

/* Phone number links — subtle, secondary color */
.data-content td a[href^="tel:"] {
    color: var(--tm-brand-purple) !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.data-content td a[href^="tel:"]:hover {
    text-decoration: underline !important;
}

/* Table wrapper card — DataTables wrapper */
.data-content .dataTables_wrapper {
    background: var(--tm-bg-card, #fff) !important;
    border-radius: var(--tm-radius-lg, 12px) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* DataTable length + filter bar */
.data-content .dataTables_wrapper .dataTables_length,
.data-content .dataTables_wrapper .dataTables_filter {
    padding: 12px 16px !important;
}

/* DataTable info + pagination footer */
.data-content .dataTables_wrapper .dataTables_info,
.data-content .dataTables_wrapper .dataTables_paginate {
    padding: 10px 16px !important;
    border-top: 1px solid var(--tm-border-light, #f1f5f9) !important;
}

/* ─── Filter Containers ───────────────────────────────────────────────────── */

.data-content .filters-container,
.data-content #filters-container {
    background: var(--tm-bg-card, #fff) !important;
    border-radius: var(--tm-radius-lg, 12px) !important;
    padding: 16px 20px !important;
    box-shadow: var(--tm-shadow-sm) !important;
    margin-bottom: 16px !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
}

/* ─── Page Header Pattern ─────────────────────────────────────────────────── */
/* Ensure all page headers have consistent spacing and typography */

.data-content .tm-page-header,
.data-content .lead-page-header,
.data-content .room-booking-header {
    margin-bottom: 20px !important;
}

.data-content .tm-page-title,
.data-content .lead-page-title {
    font-family: var(--tm-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: var(--tm-text-primary, #111827) !important;
    margin-bottom: 0 !important;
}

/* ─── Tooltips ─────────────────────────────────────────────────────────────── */

.tooltip-inner {
    background: var(--tm-brand-dark, #1e2339) !important;
    font-family: var(--tm-font-sans) !important;
    font-size: 12px !important;
    border-radius: var(--tm-radius-sm, 6px) !important;
    padding: 6px 10px !important;
}

/* ─── Modals ──────────────────────────────────────────────────────────────── */

.modal-content {
    border-radius: var(--tm-radius-lg, 12px) !important;
    border: none !important;
    box-shadow: var(--tm-shadow-xl) !important;
}

.modal-header {
    border-bottom: 1px solid var(--tm-border-light, #e2e8f0) !important;
    font-family: var(--tm-font-display) !important;
    padding: 16px 20px !important;
}

.modal-footer {
    border-top: 1px solid var(--tm-border-light, #e2e8f0) !important;
    padding: 12px 20px !important;
}

/* ─── Scrollbar Styling ───────────────────────────────────────────────────── */

.data-content::-webkit-scrollbar { width: 6px; }
.data-content::-webkit-scrollbar-track { background: transparent; }
.data-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
.data-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* ─── Misc Legacy Overrides ───────────────────────────────────────────────── */

/* Dropdown menus — modern style */
.data-content .dropdown-menu {
    border-radius: var(--tm-radius-md, 8px) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    border: 1px solid var(--tm-border-light, #e2e8f0) !important;
    padding: 6px !important;
    font-family: var(--tm-font-sans) !important;
}

.data-content .dropdown-menu .dropdown-item {
    border-radius: var(--tm-radius-sm, 6px) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    transition: background 0.1s ease !important;
}

.data-content .dropdown-menu .dropdown-item:hover {
    background: var(--tm-bg-hover, #f1f5f9) !important;
}