/*
 * TDPlanner Modern Theme
 * Clean Bootstrap 5 theme replacing Metronic legacy styles.
 * Uses CSS custom properties for easy theming and dark mode readiness.
 */

/* ======================================================
   CSS CUSTOM PROPERTIES (Light theme - default)
   ====================================================== */
:root {
    --tdp-sidebar-bg: #1e293b;
    --tdp-sidebar-text: #cbd5e1;
    --tdp-sidebar-active: #3b82f6;
    --tdp-sidebar-hover-bg: #334155;
    --tdp-header-bg: #0f172a;
    --tdp-header-text: #f1f5f9;
    --tdp-content-bg: #f1f5f9;
    --tdp-card-bg: #ffffff;
    --tdp-card-border: #e2e8f0;
    --tdp-accent: #3b82f6;
    --tdp-accent-hover: #2563eb;
    --tdp-text: #1e293b;
    --tdp-text-muted: #64748b;
    --tdp-border: #e2e8f0;
    --tdp-success: #16a34a;
    --tdp-warning: #d97706;
    --tdp-danger: #dc2626;
    --tdp-info: #0284c7;
    --tdp-sidebar-width: 250px;
}

/* ======================================================
   DARK MODE (future toggle via JS adding class to html)
   ====================================================== */
html[data-theme="dark"] {
    --tdp-sidebar-bg: #0f172a;
    --tdp-sidebar-text: #94a3b8;
    --tdp-sidebar-hover-bg: #1e293b;
    --tdp-header-bg: #020617;
    --tdp-header-text: #e2e8f0;
    --tdp-content-bg: #0f172a;
    --tdp-card-bg: #1e293b;
    --tdp-card-border: #334155;
    --tdp-text: #e2e8f0;
    --tdp-text-muted: #94a3b8;
    --tdp-border: #334155;
}

/* ======================================================
   PAGE LAYOUT
   ====================================================== */
.tdp-page {
    background-color: var(--tdp-content-bg);
    min-height: 100vh;
}

.tdp-content {
    padding: 1rem 1.25rem;
    color: var(--tdp-text);
}

/* ======================================================
   PAGE HEADER (title + breadcrumb)
   ====================================================== */
.tdp-page-header {
    margin-bottom: 0.8125rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tdp-border);
}

.tdp-page-header h3,
.tdp-page-header .tdp-page-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tdp-text);
    margin-bottom: 0.15rem;
}

.tdp-page-header .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.tdp-page-header .breadcrumb-item a {
    color: var(--tdp-accent);
    text-decoration: none;
}

/* ======================================================
   CARDS — Replace .well, .portlet
   ====================================================== */
.tdp-card {
    background-color: var(--tdp-card-bg);
    border: 1px solid var(--tdp-card-border);
    border-radius: 0.5rem;
    margin-bottom: 0.8125rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tdp-card-header {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--tdp-card-border);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tdp-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tdp-card-body {
    padding: 0.8125rem;
}

.tdp-card-footer {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--tdp-card-border);
    background-color: rgba(0, 0, 0, 0.01);
}

/* Compact card variant (for info banners) */
.tdp-card-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--tdp-text-muted);
    background-color: var(--tdp-card-bg);
    border: 1px solid var(--tdp-card-border);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}
/* Ensure all checkboxes are visible and clickable across the app */
.tdp-page .form-check-input,
.tdp-page input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    cursor: pointer;
    accent-color: var(--tdp-accent, #3b82f6);
}
/* Notify page contact card checkboxes — extra prominent */
.tdp-card-sm .form-check-input,
.tdp-card-sm input[type="checkbox"] {
    width: 1.5em;
    height: 1.5em;
    border: 2px solid #999;
}

/* ======================================================
   STATUS BADGES — Replace inline-styled status spans
   ====================================================== */
.tdp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.175rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.tdp-status-complete {
    background-color: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.tdp-status-ticketing {
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.tdp-status-released {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.tdp-status-staffing {
    background-color: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}

.tdp-status-no-tdr {
    background-color: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

/* Event TD assignment badges */
.tdp-badge-cancelled {
    background-color: var(--tdp-danger);
    color: #fff;
}

.tdp-badge-warning {
    background-color: #fbbf24;
    color: #78350f;
}

.tdp-badge-info {
    background-color: #38bdf8;
    color: #0c4a6e;
}

.tdp-badge-success {
    background-color: #4ade80;
    color: #14532d;
}

/* ======================================================
   TABLE ENHANCEMENTS
   ====================================================== */

/* Tighter, modern table styling */
.tdp-table {
    font-size: 0.8125rem;
}

.tdp-table thead th {
    background-color: #f8fafc;
    border-bottom: 2px solid var(--tdp-border);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--tdp-text-muted);
    padding: 0.375rem 0.625rem;
    white-space: nowrap;
}

.tdp-table tbody td {
    padding: 0.3rem 0.625rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--tdp-card-border);
    line-height: 1.4;
}

.tdp-table tbody tr:hover {
    background-color: #f1f5f9;
    transition: background-color 0.15s ease;
}

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

/* Wrap table in card for contained look */
.tdp-table-card {
    background-color: var(--tdp-card-bg);
    border: 1px solid var(--tdp-card-border);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tdp-table-card .table {
    margin-bottom: 0;
}

/* DataTables wrapper adjustments for modern look */
.tdp-table-card .dataTables_wrapper {
    padding: 0;
}

.tdp-table-card .dataTables_wrapper .row:first-child,
.tdp-table-card .dataTables_wrapper .row:last-child {
    padding: 0.5rem 0.8125rem;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--tdp-card-border);
}

.tdp-table-card .dataTables_wrapper .row:last-child {
    border-bottom: none;
    border-top: 1px solid var(--tdp-card-border);
}

/* Compact density option */
.tdp-table-compact thead th {
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
}

.tdp-table-compact tbody td {
    padding: 0.35rem 0.8rem;
    font-size: 0.8125rem;
}

/* ======================================================
   FILTER TOOLBAR
   ====================================================== */
.tdp-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.8125rem;
    background-color: var(--tdp-card-bg);
    border: 1px solid var(--tdp-card-border);
    border-radius: 0.5rem;
    margin-bottom: 0.625rem;
}

.tdp-filter-bar .form-control {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}
.tdp-filter-bar .form-select {
    font-size: 0.8125rem;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    width: auto;
}

.tdp-filter-bar .input-group-text {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

.tdp-filter-bar .btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
}

@media (max-width: 575px) {
    .tdp-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .tdp-filter-bar .form-control,
    .tdp-filter-bar .form-select {
        max-width: none;
    }

    .tdp-filter-bar .input-group {
        width: 100% !important;
    }
}

/* ======================================================
   ACTION BUTTONS
   ====================================================== */
.tdp-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ======================================================
   EMPTY STATE
   ====================================================== */
.tdp-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tdp-text-muted);
}

.tdp-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.8125rem;
    opacity: 0.5;
}

.tdp-empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* ======================================================
   ICON INDICATORS (comment, per diem, etc.)
   ====================================================== */
.tdp-icon-indicator {
    font-size: 0.875rem;
    margin-left: 0.25rem;
    cursor: default;
}

.tdp-icon-indicator.text-success { color: var(--tdp-success) !important; }
.tdp-icon-indicator.text-info    { color: var(--tdp-info) !important; }
.tdp-icon-indicator.text-purple  { color: #7c3aed !important; }

/* ======================================================
   TOOLTIP UPGRADE (use BS5 native tooltips)
   ====================================================== */
.tooltips {
    cursor: default;
}

/* ======================================================
   DASHBOARD: Notification feeds (Metronic .feeds layout replacement)
   ====================================================== */
.tdp-page ul.feeds {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tdp-page ul.feeds > li {
    display: flex;
    align-items: flex-start;
    padding: 0.8rem 0.8125rem;
    border-bottom: 1px solid var(--tdp-card-border);
    gap: 0.5rem;
}

.tdp-page ul.feeds > li:last-child {
    border-bottom: none;
}

.tdp-page ul.feeds .col1 {
    flex: 1;
    min-width: 0;
}

.tdp-page ul.feeds .col2 {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.8rem;
}

.tdp-page ul.feeds .col2 .date a {
    color: var(--tdp-text-muted);
    text-decoration: none;
}

.tdp-page ul.feeds .cont {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.tdp-page ul.feeds .cont-col1 {
    flex-shrink: 0;
}

.tdp-page ul.feeds .cont-col2 {
    flex: 1;
    min-width: 0;
}

.tdp-page ul.feeds .cont-col2 .desc {
    font-size: 0.85rem;
    color: var(--tdp-text);
    line-height: 1.4;
}

/* Dashboard filter buttons */
.tdp-page .home-filter-buttons {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}

/* Dashboard upcoming events list-group */
.tdp-page .list-group-item {
    border-color: var(--tdp-card-border);
}

/* ======================================================
   VER-INLINE-MENU (vertical sidebar tabs — EditEvent, ViewEvent)
   Replaces Metronic style.css rules for .ver-inline-menu
   ====================================================== */
.tdp-page ul.ver-inline-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block !important;
    flex-wrap: initial !important;
}

.tdp-page .ver-inline-menu li {
    position: relative;
    margin-bottom: 1px;
}

.tdp-page .ver-inline-menu li a {
    display: block;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--tdp-text-muted);
    background: #f8fafc;
    border-left: 2px solid var(--tdp-border);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.tdp-page .ver-inline-menu li a i {
    display: inline-block;
    width: 2rem;
    text-align: center;
    padding: 0.8rem 0.5rem;
    margin-right: 0.25rem;
    background: #e2e8f0;
    color: var(--tdp-text-muted);
    font-size: 0.85rem;
}

.tdp-page .ver-inline-menu li:hover a {
    background: #e2e8f0;
    color: var(--tdp-text);
}

.tdp-page .ver-inline-menu li:hover a i {
    background: var(--tdp-border);
    color: #fff;
}

.tdp-page .ver-inline-menu li.active a {
    background: var(--tdp-accent);
    color: #fff;
    border-left-color: var(--tdp-accent-hover);
}

.tdp-page .ver-inline-menu li.active a i {
    background: var(--tdp-accent-hover) !important;
    color: #fff;
}

/* Arrow indicator for active tab */
.tdp-page .ver-inline-menu li.active::after {
    content: '';
    display: inline-block;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid var(--tdp-accent);
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
}

/* Pending extension requests highlight in sidebar tabs */
.tdp-page .ver-inline-menu li.has-pending-requests a {
    background: #fef2f2;
    color: #dc2626;
    border-left-color: #dc2626;
}

/* ======================================================
   FILTER PILLS (TD Planner status filters: All, Unassigned, etc.)
   ====================================================== */
.tdp-page ul.filter-td-planner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0.8125rem 0;
}

.tdp-page ul.filter-td-planner li {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 2rem;
    cursor: pointer;
    background: #e2e8f0;
    color: var(--tdp-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
}

.tdp-page ul.filter-td-planner li:hover {
    background: #cbd5e1;
    color: var(--tdp-text);
}

.tdp-page ul.filter-td-planner li.active {
    background: var(--tdp-accent);
    color: #fff;
    border-color: var(--tdp-accent-hover);
}

/* ======================================================
   TABBABLE / NAV-TABS (top-level View/Edit tabs)
   ====================================================== */
.tdp-page .tabbable-custom .nav-tabs {
    border-bottom: 2px solid var(--tdp-border);
    margin-bottom: 0;
}

.tdp-page .tabbable-custom .nav-tabs .nav-link {
    color: var(--tdp-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.8rem 1rem;
    font-size: 0.875rem;
}

.tdp-page .tabbable-custom .nav-tabs .nav-link:hover {
    color: var(--tdp-text);
    border-bottom-color: var(--tdp-border);
}

.tdp-page .tabbable-custom .nav-tabs .nav-link.active {
    color: var(--tdp-accent);
    border-bottom-color: var(--tdp-accent);
    font-weight: 600;
}

.tdp-page .tabbable-custom .tab-content {
    padding-top: 1rem;
}

/* ======================================================
   PORTLET (card-like containers in extension requests, etc.)
   ====================================================== */
.tdp-page .portlet {
    border: 1px solid var(--tdp-card-border);
    border-radius: 0.5rem;
    margin-bottom: 0.625rem;
    overflow: hidden;
}

.tdp-page .portlet .portlet-title {
    padding: 0.4rem 0.8125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--tdp-card-border);
}

.tdp-page .portlet .portlet-title h4 {
    margin: 0;
    font-size: 0.95rem;
}

.tdp-page .portlet.box.blue .portlet-title { background: var(--tdp-accent); color: #fff; }
.tdp-page .portlet.box.blue .portlet-title h4,
.tdp-page .portlet.box.blue .portlet-title .caption { color: #fff; }
.tdp-page .portlet.box.green .portlet-title { background: var(--tdp-success); color: #fff; }
.tdp-page .portlet.box.green .portlet-title h4,
.tdp-page .portlet.box.green .portlet-title .caption { color: #fff; }
.tdp-page .portlet.box.red .portlet-title { background: var(--tdp-danger); color: #fff; }
.tdp-page .portlet.box.red .portlet-title h4,
.tdp-page .portlet.box.red .portlet-title .caption { color: #fff; }

.tdp-page .portlet .portlet-body {
    padding: 0.625rem 0.8125rem;
}

/* ======================================================
   PORTLET TITLE BAR — caption + tools layout (EditEvent TD slots)
   ====================================================== */
.tdp-page .portlet .portlet-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tdp-page .portlet .portlet-title .caption {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdp-page .portlet .portlet-title .tools {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* Hide the Metronic collapse toggle (not needed without Metronic JS) */
.tdp-page .portlet .portlet-title .tools > a.collapse {
    display: none;
}

/* Portlet color variants */
.tdp-page .portlet.box.grey .portlet-title { background: #6c757d; color: #fff; }
.tdp-page .portlet.box.grey .portlet-title h4,
.tdp-page .portlet.box.grey .portlet-title .caption { color: #fff; }
.tdp-page .portlet.box.yellow .portlet-title { background: #fbbf24; color: #78350f; }
.tdp-page .portlet.box.yellow .portlet-title h4,
.tdp-page .portlet.box.yellow .portlet-title .caption { color: #78350f; }

/* Action button inside portlet title */
.tdp-page .portlet .portlet-title .fitInPortletButton {
    font-size: 0.8125rem;
    padding: 0.2rem 0.5rem;
}

/* Dropdown items missing Bootstrap 5 dropdown-item class (legacy Metronic markup) */
.tdp-page .dropdown-menu li a:not(.dropdown-item) {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
}
.tdp-page .dropdown-menu li a:not(.dropdown-item):hover {
    color: #1e2125;
    background-color: #e9ecef;
}
.tdp-page .dropdown-menu li a:not(.dropdown-item) i {
    color: #212529;
    margin-right: 0.25rem;
}

/* jQuery UI Autocomplete — dropdown styling for name lookup fields */
.ui-autocomplete {
    position: absolute;
    z-index: 10000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    padding: 4px 0;
    margin: 2px 0 0;
}
.ui-autocomplete .ui-menu-item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #212529;
    white-space: nowrap;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    padding: 4px 8px;
    display: block;
}
.ui-autocomplete .ui-menu-item .ui-state-active,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background-color: #e9ecef;
    color: #1e2125;
    border: none;
    border-radius: 3px;
}

/* TD Planner actions list (Add/Save buttons) */
.tdp-page ul.tdplanner-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}

/* ======================================================
   MAGIC SUGGEST (duties tag input) — needs min height when empty
   ====================================================== */
.tdp-page .ms-ctn {
    min-height: 30px !important;
    height: auto !important;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background: #fff;
    overflow: visible !important;
}

.tdp-page .ms-sel-ctn {
    min-height: 28px !important;
    height: auto !important;
}

/* Fix: MagicSuggest sets height:0 when initialized in hidden tab */
.tdp-page .ms-ctn[style*="height: 0"] {
    height: auto !important;
}
.tdp-page .ms-ctn[style*="height:0"] {
    height: auto !important;
}

/* MagicSuggest trigger arrow */
.tdp-page .ms-trigger {
    width: 25px;
    cursor: pointer;
    border-left: 1px solid #ced4da;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.tdp-page .ms-trigger .ms-trigger-ico {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #666;
}

/* MagicSuggest input field — always keep min-width so it's clickable */
.tdp-page .ms-ctn input[type="text"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 60px !important;
    width: auto !important;
    height: 26px;
}
.tdp-page .ms-ctn input.ms-empty-text {
    color: #aaa;
    font-style: italic;
}

/* Make the whole ms-sel-ctn clickable to open dropdown */
.tdp-page .ms-sel-ctn {
    cursor: text;
}

/* MagicSuggest helper text */
.tdp-page .ms-helper {
    font-size: 0.8125rem;
    color: var(--tdp-text-muted);
}

.tdp-page .ms-sel-item {
    background: var(--tdp-accent);
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    padding: 2px 6px;
    font-size: 0.8125rem;
}

.tdp-page .ms-close-btn {
    color: #fff;
    margin-left: 4px;
}

.tdp-page .ms-res-ctn {
    border: 1px solid var(--tdp-border);
    border-radius: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999 !important;
    background: #fff;
    max-height: 250px;
    overflow-y: auto;
    position: absolute !important;
}

.tdp-page .ms-res-item {
    padding: 0.4rem 0.8125rem;
    font-size: 0.8125rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.tdp-page .ms-res-item:last-child {
    border-bottom: none;
}

.tdp-page .ms-res-item:hover,
.tdp-page .ms-res-item-active {
    background: var(--tdp-accent);
    color: #fff;
}

/* Ensure portlet body doesn't clip MagicSuggest dropdown */
.tdp-page .portlet-body {
    overflow: visible;
}
.tdp-page #td-planner-items .portlet {
    overflow: visible;
}

/* Ensure the tab content and accordion don't clip dropdowns */
.tdp-page .tab-pane {
    overflow: visible;
}
.tdp-page .accordion {
    overflow: visible;
}

/* Modals must break out of grid and center on viewport.
   Grid containers can create new containing blocks, so we
   use fixed positioning with explicit viewport dimensions. */
.tdp-page .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1055 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tdp-page .modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tdp-page .modal-dialog {
    margin: 0 auto !important;
    max-width: calc(100% - 2rem) !important;
    width: var(--bs-modal-width, 500px) !important;
}
.tdp-page .modal-dialog.modal-lg {
    width: var(--bs-modal-width, 800px) !important;
}
.tdp-page .modal-dialog.modal-xl {
    width: var(--bs-modal-width, 1140px) !important;
}
.tdp-page .modal-backdrop {
    z-index: 1050 !important;
}

/* Prevent grid/transform from trapping fixed-position modals */
.tdp-page .page-container {
    transform: none !important;
    will-change: auto !important;
    perspective: none !important;
}

/* ======================================================
   NEWS-BLOCKS (event detail display cards)
   ====================================================== */
.tdp-page .news-blocks {
    margin-bottom: 0.8125rem;
}
.tdp-page .news-blocks h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    color: var(--tdp-text);
}
.tdp-page .news-block-tags em {
    font-size: 0.8125rem;
    color: var(--tdp-text-muted);
}

/* ======================================================
   PROFILE-ACCOUNT layout (EditEvent View tab)
   ====================================================== */
.tdp-page .profile-account .sidebar-nav-fixed {
    position: sticky !important;
    top: 60px;
}

/* ======================================================
   PAGE CONTAINER FIX — CSS Grid layout for sidebar + content + footer
   ====================================================== */
.tdp-page .page-header-fixed {
    padding-top: 50px; /* clear fixed header */
}
.tdp-page .page-container,
.tdp-page .page-container.row {
    display: grid !important;
    grid-template-columns: var(--tdp-sidebar-width) 1fr;
    grid-template-rows: 1fr auto;
    min-height: calc(100vh - 50px);
    margin: 0 !important;
    --bs-gutter-x: 0;
}
.tdp-page .page-container.row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: none !important;
    width: auto !important;
}
.tdp-page .page-container > .page-sidebar {
    grid-column: 1;
    grid-row: 1 / -1; /* sidebar spans all rows */
}
.tdp-page .page-container > .page-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.tdp-page .page-container > .footer {
    grid-column: 2;
    grid-row: 2;
}

/* ======================================================
   HEADER (for _LayoutV3 — overrides Metronic navbar)
   ====================================================== */
.tdp-page .header.navbar {
    background-color: var(--tdp-header-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 0;
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 1055;
    left: 0;
    right: 0;
    top: 0;
}

/* Push page content below fixed header */
.tdp-page .page-header-fixed {
    padding-top: 46px;
}

.tdp-page .header .navbar-brand {
    padding: 0.15rem 0.5rem;
}
.tdp-page .header .navbar-brand img {
    height: 30px;
}

.tdp-page .header .nav-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.tdp-page .header .username {
    color: var(--tdp-header-text);
    font-size: 0.8125rem;
}

.tdp-page .header .dropdown-menu {
    font-size: 0.8125rem;
}

/* ======================================================
   SIDEBAR (for _LayoutV3 — replaces Metronic sidebar CSS)
   ====================================================== */
.tdp-page .page-sidebar {
    background-color: var(--tdp-sidebar-bg);
    width: var(--tdp-sidebar-width);
    min-height: calc(100vh - 50px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.tdp-page ul.page-sidebar-menu {
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
}

.tdp-page ul.page-sidebar-menu li {
    list-style: none;
}

.tdp-page ul.page-sidebar-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.15rem;
    color: var(--tdp-sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}

.tdp-page ul.page-sidebar-menu > li > a i:first-child {
    width: 1.25rem;
    margin-right: 0.8rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

.tdp-page ul.page-sidebar-menu > li > a .arrow {
    margin-left: auto;
    font-size: 0;
}
.tdp-page ul.page-sidebar-menu > li > a .arrow::after {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--tdp-sidebar-text);
    opacity: 0.5;
    transition: transform 0.2s ease;
    display: inline-block;
}
.tdp-page ul.page-sidebar-menu > li.open > a .arrow::after {
    transform: rotate(90deg);
}

.tdp-page ul.page-sidebar-menu > li > a:hover {
    background-color: var(--tdp-sidebar-hover-bg);
    color: #fff;
}

.tdp-page ul.page-sidebar-menu > li.active > a {
    background-color: var(--tdp-sidebar-hover-bg);
    color: #fff;
    border-left-color: var(--tdp-sidebar-active);
}
.tdp-page ul.page-sidebar-menu > li.active > a i:first-child {
    opacity: 1;
    color: var(--tdp-sidebar-active);
}

/* Sub-menu */
.tdp-page ul.page-sidebar-menu .sub-menu {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.15);
}

.tdp-page ul.page-sidebar-menu li.open > .sub-menu {
    display: block;
}

.tdp-page ul.page-sidebar-menu .sub-menu > li > a {
    display: block;
    padding: 0.45rem 1.15rem 0.45rem 2.75rem;
    color: var(--tdp-sidebar-text);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}

.tdp-page ul.page-sidebar-menu .sub-menu > li > a:hover {
    background-color: var(--tdp-sidebar-hover-bg);
    color: #fff;
}

.tdp-page ul.page-sidebar-menu .sub-menu > li.active > a {
    color: #fff;
    background-color: var(--tdp-sidebar-hover-bg);
    border-left-color: var(--tdp-sidebar-active);
}

/* Sidebar search */
.tdp-page .page-sidebar .sidebar-search {
    padding: 0.5rem 0.8125rem;
}
.tdp-page .page-sidebar .sidebar-search input[type="text"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    color: var(--tdp-sidebar-text);
    padding: 0.4rem 0.8125rem;
    font-size: 0.8125rem;
}
.tdp-page .page-sidebar .sidebar-search input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.tdp-page .page-sidebar .sidebar-search input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--tdp-sidebar-active);
    outline: none;
    color: #fff;
}
.tdp-page .page-sidebar .sidebar-search .submit {
    display: none;
}

/* Sidebar toggler (desktop) */
.tdp-page .sidebar-toggler {
    display: none;
}

/* Pending extension requests highlight */
.tdp-page li#navEventsReviewExtensionRequests.has-pending-reviews > a {
    background: #c0392b !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-left-color: #ff6b6b !important;
}

/* Page content area */
.tdp-page .page-content {
    min-height: calc(100vh - 50px);
}

/* Footer */
.tdp-page .footer {
    padding: 0.8125rem 1.25rem;
    font-size: 0.8rem;
    color: var(--tdp-text-muted);
    border-top: 1px solid var(--tdp-border);
    background: var(--tdp-card-bg);
}

/* ======================================================
   RESPONSIVE — SIDEBAR + CONTENT (mobile)
   ====================================================== */
@media (max-width: 767px) {
    .tdp-page .page-header-fixed {
        padding-top: 50px;
    }
    .tdp-page .page-container,
    .tdp-page .page-container.row {
        grid-template-columns: 1fr !important;
    }
    .tdp-page .page-container > .page-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 260px !important;
        transform: translateX(-260px);
        transition: transform 0.3s ease;
        z-index: 1050 !important;
        overflow-y: auto !important;
        grid-column: 1;
        grid-row: 1 / -1;
    }
    body.tdp-page.sidebar-open .page-sidebar {
        transform: translateX(0) !important;
    }
    .tdp-page .page-container > .page-content {
        grid-column: 1;
    }
    .tdp-page .page-container > .footer {
        grid-column: 1;
    }
    .tdp-page .tdp-content {
        padding: 0.8125rem;
    }
    .tdp-page .tdp-page-header h3 {
        font-size: 1.15rem;
    }
}

/* ======================================================
   GLOBAL COMPACT POLISH
   Tighter spacing for a professional, data-dense UI
   ====================================================== */

/* DataTables search/length controls */
.dataTables_wrapper .dataTables_length select {
    font-size: 0.8125rem;
    padding: 0.2rem 0.4rem;
}
.dataTables_wrapper .dataTables_filter input {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}
/* Gap between search/length row and table */
.dataTables_wrapper .row:first-child {
    margin-bottom: 0.5rem;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    font-size: 0.8125rem;
}

/* Tighter action bar above tables */
.d-flex.gap-2.mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Breadcrumb tighter */
.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* Compact all tables app-wide (catches un-modernized views too) */
.page-content .table > thead > tr > th,
.page-content .table > thead > tr > td {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.page-content .table > tbody > tr > td {
    padding: 0.3rem 0.625rem;
    font-size: 0.8125rem;
    vertical-align: middle;
    line-height: 1.4;
}

/* ======================================================
   GLOBAL MODERNIZATION — applies to ALL views using _LayoutV3
   regardless of whether they use tdp-* markup classes.
   Targets the .page-content > .container-fluid structure
   that every view shares.
   ====================================================== */

/* Apply tdp-content styling to all container-fluid inside page-content */
.page-content > .container-fluid {
    padding: 1rem 1.25rem;
    color: #1e293b;
    color: var(--tdp-text, #1e293b);
}

/* Modernize old-style page headers: h3.page-title */
.page-content .page-title,
.page-content h3.page-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tdp-text, #1e293b);
    margin-bottom: 0.25rem;
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tdp-border, #e2e8f0);
}

/* Old-style breadcrumbs: tighter */
.page-content .breadcrumb {
    font-size: 0.8rem;
    padding: 0;
    margin-bottom: 0.5rem;
    background: none;
}

/* Old-style .well → modern look */
.page-content .well {
    padding: 0.5rem 0.8125rem;
    font-size: 0.8125rem;
    color: var(--tdp-text-muted, #64748b);
    background-color: var(--tdp-card-bg, #ffffff);
    border: 1px solid var(--tdp-card-border, #e2e8f0);
    border-radius: 0.375rem;
    margin-bottom: 0.625rem;
    box-shadow: none;
}

/* Form labels in all views */
.page-content label.form-label,
.page-content label.control-label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* Form controls tighter — only actual inputs, not divs with form-control */
.page-content input.form-control,
.page-content textarea.form-control,
.page-content select.form-control {
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
}
.page-content select.form-select {
    font-size: 0.8125rem;
    padding: 0.3rem 2rem 0.3rem 0.5rem;
}
.page-content .input-group-text {
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
}

/* Buttons — slightly smaller for professional density */
.page-content .btn {
    font-size: 0.8125rem;
    padding: 0.3rem 0.625rem;
}
/* Restore btn-group toggle buttons to their own sizing */
.page-content .btn-group .btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}
.page-content .btn.btn-sm,
.page-content .table .btn-sm,
.tdp-table .btn.btn-sm {
    font-size: 0.8rem;
    padding: 0.125rem 0.35rem;
    line-height: 1.4;
}

/* Spacing between rows — only direct children of tdp-content */
.page-content > .container-fluid.tdp-content > .row {
    margin-bottom: 0.35rem;
}

/* Pricing cards in DataExport — tighter */
.page-content .pricing {
    font-size: 0.8125rem;
    margin-bottom: 0.8125rem;
}
.page-content .pricing .pricing-head h3 {
    font-size: 0.95rem;
}
.page-content .pricing .pricing-head h3 span {
    font-size: 0.8rem;
}

/* Accordion in FAQ — tighter */
.page-content .accordion-heading a {
    font-size: 0.875rem;
    padding: 0.5rem 0.8125rem;
}
.page-content .accordion-inner {
    font-size: 0.8125rem;
    padding: 0.5rem 0.8125rem;
}

/* Nav tabs — compact */
.page-content .nav-tabs .nav-link {
    font-size: 0.8125rem;
    padding: 0.4rem 0.8125rem;
}

/* Dashboard stat cards in Me page */
.page-content .dashboard-stat {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

/* Alert messages — tighter */
.page-content .alert {
    font-size: 0.8125rem;
    padding: 0.5rem 0.8125rem;
    margin-bottom: 0.625rem;
}

/* ======================================================
   DATEPICKER — modern styling override for bootstrap-datepicker
   ====================================================== */
.datepicker {
    z-index: 1060 !important;
    background: #fff;
    border: 1px solid var(--tdp-border, #e2e8f0);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 250px;
    font-family: inherit;
}

/* Remove old arrow carets */
.datepicker:before,
.datepicker:after {
    display: none;
}

/* Table layout */
.datepicker table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

/* All cells — roomy and readable */
.datepicker td,
.datepicker th {
    text-align: center;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    border: none;
    padding: 0;
}

/* Header row — month/year title and nav arrows */
.datepicker thead tr:first-child th {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tdp-text, #1e293b);
    padding: 0.35rem 0;
    cursor: pointer;
}
.datepicker thead tr:first-child th:hover {
    background: #f1f5f9;
    border-radius: 0.375rem;
}

/* Day-of-week headers */
.datepicker thead tr:last-child th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tdp-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 0.25rem;
}

/* Nav arrows */
.datepicker th.next,
.datepicker th.prev {
    font-size: 1rem;
    color: var(--tdp-text-muted, #64748b);
    width: 32px;
}
.datepicker th.next:hover,
.datepicker th.prev:hover {
    color: var(--tdp-accent, #3b82f6);
    background: #eff6ff;
}

/* Month/year switch */
.datepicker th.switch {
    width: auto;
    font-weight: 600;
}

/* Day cells */
.datepicker td.day {
    color: var(--tdp-text, #1e293b);
    cursor: pointer;
    transition: background 0.1s;
}
.datepicker td.day:hover {
    background: #f1f5f9;
}
.datepicker td.old,
.datepicker td.new {
    color: #cbd5e1;
}
.datepicker td.day.disabled {
    color: #e2e8f0;
    cursor: not-allowed;
}

/* Today highlight */
.datepicker td.today,
.datepicker td.today:hover {
    background: #eff6ff;
    color: var(--tdp-accent, #3b82f6);
    font-weight: 600;
}

/* Active/selected date */
.datepicker td.active,
.datepicker td.active:hover,
.datepicker td.active:focus,
.datepicker td.active:active,
.datepicker td.active.active {
    background: var(--tdp-accent, #3b82f6) !important;
    color: #fff !important;
    text-shadow: none !important;
    border: none !important;
    filter: none !important;
}

/* Month/year picker spans */
.datepicker td span {
    display: block;
    width: auto;
    height: 36px;
    line-height: 36px;
    float: none;
    display: inline-block;
    width: 30%;
    margin: 1%;
    cursor: pointer;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}
.datepicker td span:hover {
    background: #f1f5f9;
}
.datepicker td span.active,
.datepicker td span.active:hover,
.datepicker td span.active:focus,
.datepicker td span.active.active {
    background: var(--tdp-accent, #3b82f6) !important;
    color: #fff !important;
    text-shadow: none !important;
    filter: none !important;
    border: none !important;
}
.datepicker td span.old {
    color: #cbd5e1;
}

/* ======================================================
   FULLCALENDAR v1 — compact & professional styling
   ====================================================== */

/* Scale down the overall calendar */
.fc {
    font-size: 0.8125rem;
}

/* Header title */
.fc-header-title h2 {
    font-size: 1rem;
    font-weight: 600;
}

/* Toolbar buttons — clear, separated, compact */
.fc-button {
    padding: 0.2rem 0.5rem !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 0.8125rem !important;
    border: 1px solid var(--tdp-border, #cbd5e1) !important;
    background: #fff !important;
    color: var(--tdp-text, #1e293b) !important;
    border-radius: 0.25rem !important;
    margin: 0 1px !important;
    cursor: pointer;
}

.fc-button:hover,
.fc-state-hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.fc-state-active,
.fc-button-today.fc-state-active {
    background: var(--tdp-accent, #3b82f6) !important;
    color: #fff !important;
    border-color: var(--tdp-accent, #3b82f6) !important;
}

/* Prev/Next arrows */
.fc-text-arrow {
    font-size: 1.1em !important;
    line-height: 1 !important;
}

/* Today button when not active */
.fc-button-today {
    font-weight: 600;
}

/* Day cells — compact */
.fc-day-number {
    font-size: 0.8125rem;
    padding: 2px 4px;
}

/* Event entries in calendar */
.fc-event {
    font-size: 0.8rem;
    padding: 1px 3px;
    border-radius: 2px;
}

/* Week/day view time slots */
.fc-agenda .fc-agenda-axis {
    font-size: 0.8rem;
    width: 40px;
}

/* Column headers (Mon, Tue, ...) */
.fc th {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 2px;
}

/* Calendar row height — compact cells */
.fc-view-month td.fc-day,
.fc-view-month .fc-day-content {
    min-height: 0 !important;
    height: auto !important;
}
.fc-view-month tr {
    height: auto !important;
}
.fc-day-content > div {
    min-height: 1.5em !important;
}

/* ======================================================
   BTN-GROUP TOGGLE BUTTONS — visible styling for bare .btn
   Used in Account profile (shirt size, gender, etc.)
   ====================================================== */
.btn-group[data-bs-toggle="buttons"] .btn,
.page-content .btn-group .btn:not([class*="btn-"]):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary) {
    background: #fff;
    border: 1px solid var(--tdp-border, #cbd5e1);
    color: var(--tdp-text, #1e293b);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}
.btn-group[data-bs-toggle="buttons"] .btn:hover,
.page-content .btn-group .btn:not([class*="btn-"]):hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.btn-group[data-bs-toggle="buttons"] .btn.active,
.page-content .btn-group .btn.active {
    background: var(--tdp-accent, #3b82f6) !important;
    color: #fff !important;
    border-color: var(--tdp-accent, #3b82f6) !important;
}

/* ======================================================
   EDIT EVENT — TD Planner field grid
   CSS Grid layout for consistent column widths across all
   TD statuses. Replaces old flex/col-md-1 approach.
   ====================================================== */

/* TD field labels — compact and no-wrap.
   Alignment is inherited from the parent cell so wide-column uses
   (e.g. Comments in col-md-6) stay left while grid cells stay centered. */
.td-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 2px;
    display: block;
    color: #555;
}

/* CSS Grid: main fields row */
.td-fields-grid {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) 65px 85px 65px 65px 50px auto;
    gap: 0 8px;
    align-items: start;
    padding: 6px 8px;
}
/* When Deem column is present, add an extra column before Duties */
.td-fields-grid.has-deem {
    grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) 65px 85px 65px 65px 50px 45px auto;
}

/* Each field cell */
.td-fields-grid .td-field {
    text-align: center;
    min-width: 0;
}

/* All inputs and readonly displays inside the grid fill their cell.
   !important overrides legacy Bootstrap 2 .input-mini { width: 60px } */
.td-fields-grid input[type="text"],
.td-fields-grid .td-date-display {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.75rem;
    padding: 3px 2px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
}

/* Each grid cell must not overflow */
.td-fields-grid .td-field {
    overflow: hidden;
}
.td-fields-grid .td-date-display {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    cursor: default;
}

/* Requests button inside grid */
.td-fields-grid .requests-btn {
    font-size: 0.75rem;
    padding: 3px 6px;
    white-space: nowrap;
    width: 100%;
}

/* Duties column takes remaining space */
.td-fields-grid .td-field-duties {
    text-align: left;
}

/* Mobile: stack fields into a 2-column grid */
@media (max-width: 768px) {
    .td-fields-grid,
    .td-fields-grid.has-deem {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .td-fields-grid .td-field-duties {
        grid-column: 1 / -1;
    }
}

/* Collapse/expand behavior */
.portlet-body.collapsed {
    display: none;
}
.portlet-title {
    cursor: pointer;
}
.portlet-title .collapse-indicator {
    margin-right: 6px;
    transition: transform 0.2s;
    display: inline-block;
}
.portlet-title .collapse-indicator.collapsed {
    transform: rotate(-90deg);
}

/* Expand All / Collapse All button */
.td-expand-controls {
    display: inline-flex;
    gap: 6px;
    margin-left: 12px;
}

/* Legacy utility classes (from style.css / BS2, needed by _LayoutV3 pages) */
.display-none { display: none; }
.display-block { display: block; }
.display-inline-block { display: inline-block; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.unstyled { list-style: none; padding-left: 0; }

/* Edit Event tab — info sidebar and form polish */
.sale-summary .portlet-body {
    padding: 0.5rem 0.8125rem;
}
.sale-summary .portlet-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sale-summary .portlet-body ul li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--tdp-border, #e2e8f0);
}
.sale-summary .portlet-body ul li:last-child {
    border-bottom: none;
}
.sale-info {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tdp-text-muted, #64748b);
}
.sale-num {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tdp-text, #1e293b);
}

/* Event Options / Update button bar */
.eventSaveButtonPos {
    margin-bottom: 0.5rem;
}

/* Event Details tab — compact news-blocks */
.editEventDetails .news-blocks h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.1rem 0;
}
.editEventDetails .news-blocks {
    margin-bottom: 0.5rem;
}
.editEventDetails .news-blocks .news-block-tags em {
    font-size: 0.8125rem;
    color: var(--tdp-text-muted, #64748b);
}

/* Search results — people cards */
.search-people-extra-padding {
    margin: 0 !important;
}
.booking-blocks {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem !important;
    border: 1px solid var(--tdp-card-border, #e2e8f0) !important;
    border-radius: 0.375rem;
    background: var(--tdp-card-bg, #fff);
    margin-bottom: 0.35rem;
    min-height: 0;
}
.booking-blocks .booking-img {
    float: none !important;
    flex-shrink: 0;
    width: 56px;
    text-align: center;
}
.booking-blocks .booking-img img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 !important;
}
.booking-blocks .booking-img .btn {
    display: none;
}
.booking-blocks .booking-img ul {
    display: none;
}
.booking-blocks > div:last-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.booking-blocks h2 {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.15rem 0;
    line-height: 1.3;
}
.booking-blocks h2 a {
    color: var(--tdp-accent, #3b82f6);
    text-decoration: none;
}
.booking-blocks ul.unstyled,
.booking-blocks ul.inline {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--tdp-text-muted, #64748b);
}
.booking-blocks ul.inline li {
    display: inline;
    margin-right: 0.35rem;
}
.booking-blocks br {
    display: none;
}
.booking-blocks h5 {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0.3rem 0 0.1rem 0;
}
.booking-blocks p {
    font-size: 0.8125rem;
    margin: 0;
    color: var(--tdp-text-muted, #64748b);
}

/* Home dashboard — notification panel */
.home-filter-buttons {
    font-size: 0.8rem !important;
    padding: 0.2rem 0.5rem !important;
}
#homepage-noti-filters {
    margin-bottom: 0.35rem;
    display: flex;
    gap: 0.25rem;
}
#homepage-noti-filters .col-md-4 {
    padding: 0;
    flex: 0 0 auto;
    width: auto;
}

/* Notification feed list */
ul.feeds {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.feeds li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--tdp-border, #e2e8f0);
    font-size: 0.8rem;
}
ul.feeds li:last-child {
    border-bottom: none;
}
ul.feeds li .col1 {
    flex: 1;
    min-width: 0;
}
ul.feeds li .col2 {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.8125rem;
    color: var(--tdp-text-muted, #64748b);
    padding-left: 0.5rem;
}
ul.feeds li .col2 a {
    color: var(--tdp-text-muted, #64748b);
    text-decoration: none;
}
ul.feeds li .col2 a:hover {
    color: var(--tdp-accent, #3b82f6);
}
ul.feeds .cont {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
ul.feeds .cont-col1 {
    flex-shrink: 0;
}
ul.feeds .cont-col2 {
    flex: 1;
    min-width: 0;
}
ul.feeds .cont-col2 .desc {
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Global body font tuning */
.tdp-page {
    font-size: 0.875rem;
}