/* ============================================================
   HiWay — site.css  (Bootstrap 5.3, FA 6, dark-mode aware)
   ============================================================ */

/* ---- base ------------------------------------------------- */
html {
    height: 100%;
}
/* ── Body / page background (outside + behind container) ────────── */
body {
    min-height: 100%;
    min-height: 100dvh;
    display       : flex;
    flex-direction: column;
    background-color: #f0f2f5;  /* light mode: cool mid-grey */
}

[data-bs-theme="dark"] body {
    background-color: #111318;  /* dark mode: deeper than bs-body-bg */
}

/* ── Content wrap stays clean white / dark card surface ─────────── */
.hw-wrap {
    flex            : 1 0 auto;
    padding-top     : calc(56px + 1.25rem);
    padding-bottom  : 2rem;
    background-color: transparent; /* let body grey show through */
}

/* ── Content card wrapper ────────────────────────────────────────── */
.hw-content-card {
    background-color : var(--bs-body-bg);
    border           : 1px solid var(--bs-border-color);
    border-radius    : var(--bs-border-radius-lg, 0.5rem);
    box-shadow       : 0 1px 4px rgba(0, 0, 0, 0.06);
    padding          : 1rem;
}
.hw-wrap .container-xxl,
.hw-wrap .container-fluid {
    padding-left : 1rem;
    padding-right: 1rem;
}
[data-bs-theme="dark"] .hw-content-card {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Calendar index only — mobile: flush with screen sides; more room for the grid */
@media (max-width: 991.98px) {
    .hw-wrap .hw-cal-index-outer.container-fluid,
    .hw-wrap .hw-cal-index-outer.container-xxl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .hw-content-card.hw-cal-index-card {
        padding: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
    .hw-cal-index-outer .hw-breadcrumb-wrap {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .hw-cal-index-card .calendar-index > .d-flex.align-items-center:first-of-type {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .hw-cal-index-card .calendar-index .card.border-0.shadow {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    .hw-cal-index-card .calendar-index .card .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
/* ---- sticky-footer layout --------------------------------- */
.wrap {
    flex      : 1 0 auto;
    min-height: calc(100vh - 60px);
}

.wrap > .container,
.wrap > .container-fluid {
    padding-top: 80px;
    padding-bottom: 30px;
}

.footer {
    height: 60px;
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    padding-top: 18px;
}

/* ---- navbar tweaks ---------------------------------------- */
.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ---- user dropdown ---------------------------------------- */
.hw-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    flex-shrink: 0;
}
.hw-avatar.hw-avatar-lg {
    width: 38px;
    height: 38px;
    background: var(--bs-primary);
    font-size: .9rem;
}
.hw-user-dropdown .dropdown-item {
    font-size: .9rem;
    padding: .45rem .85rem;
}
.hw-user-dropdown .dropdown-item:active {
    background-color: var(--bs-primary);
    color: #fff;
}
/* pill indicator next to theme label */
.hw-theme-pill {
    display: inline-block;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    position: relative;
    vertical-align: middle;
}
.hw-theme-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bs-secondary-color);
    transition: transform .2s;
}
[data-bs-theme="dark"] .hw-theme-pill::after {
    transform: translateX(14px);
    background: #fff;
}
[data-bs-theme="dark"] .hw-avatar {
    background: rgba(255,255,255,.15);
}

/* ---- breadcrumbs / content spacing ------------------------ */
.content-wrapper {
    padding: 1.5rem 0;
}

/* ---- sort icons (FA 6 instead of removed Glyphicons) ------ */
a.asc::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0de";
    margin-left: 4px;
    font-size: .8em;
}
a.desc::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0dd";
    margin-left: 4px;
    font-size: .8em;
}

/* ---- form helpers ----------------------------------------- */
.hint-block {
    display: block;
    margin-top: 4px;
    color: var(--bs-secondary-color);
    font-size: .875em;
}
.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 4px solid var(--bs-danger-border-subtle);
    padding: 10px 16px;
    margin-bottom: 1rem;
    border-radius: 4px;
}
.not-set {
    color: #c55;
    font-style: italic;
}

/* ---- homepage tiles --------------------------------------- */
.tile-grid .tile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 110px;
    font-size: 1rem;
    font-weight: 600;
    white-space: normal;
    border-radius: 12px;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
}
.tile-grid .tile-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.tile-grid .tile-btn i {
    font-size: 1.7rem;
}

/* Homepage tiles: semantic accents (uses Bootstrap theme vars, works in dark mode) */
.tile-grid .tile-btn.tile-booking {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-primary-btn-color, #fff);
}
.tile-grid .tile-btn.tile-booking:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-primary-btn-color, #fff);
    filter: brightness(1.06);
}
.tile-grid .tile-btn.tile-schedule {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: var(--bs-info-btn-color, #fff);
}
.tile-grid .tile-btn.tile-schedule:hover {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: var(--bs-info-btn-color, #fff);
    filter: brightness(1.06);
}
.tile-grid .tile-btn.tile-analytics {
    background-color: color-mix(in srgb, var(--bs-success) 88%, var(--bs-body-bg));
    border-color: var(--bs-success);
    color: var(--bs-success-text-emphasis, var(--bs-success));
}
[data-bs-theme="dark"] .tile-grid .tile-btn.tile-analytics {
    background-color: color-mix(in srgb, var(--bs-success) 35%, var(--bs-body-bg));
    color: var(--bs-success);
}
.tile-grid .tile-btn.tile-analytics:hover {
    filter: brightness(1.05);
    color: inherit;
}
.tile-grid .tile-btn.tile-master {
    background-color: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    color: var(--bs-primary);
}
[data-bs-theme="dark"] .tile-grid .tile-btn.tile-master {
    background-color: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-body-bg));
}
.tile-grid .tile-btn.tile-master:hover {
    color: var(--bs-primary);
    filter: brightness(1.03);
}
.tile-grid .tile-btn.tile-compliance {
    background-color: color-mix(in srgb, var(--bs-warning) 22%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-warning) 55%, var(--bs-border-color));
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}
[data-bs-theme="dark"] .tile-grid .tile-btn.tile-compliance {
    background-color: color-mix(in srgb, var(--bs-warning) 18%, var(--bs-body-bg));
    color: var(--bs-warning);
}
.tile-grid .tile-btn.tile-compliance:hover {
    color: inherit;
    filter: brightness(1.03);
}
.tile-grid .tile-btn.tile-places {
    background-color: color-mix(in srgb, var(--bs-teal, #20c997) 16%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-teal, #20c997) 40%, var(--bs-border-color));
    color: var(--bs-teal, #20c997);
}
[data-bs-theme="dark"] .tile-grid .tile-btn.tile-places {
    color: color-mix(in srgb, var(--bs-teal, #20c997) 85%, #fff);
}
.tile-grid .tile-btn.tile-places:hover {
    color: inherit;
    filter: brightness(1.03);
}
.tile-grid .tile-btn.tile-insight {
    background-color: color-mix(in srgb, var(--bs-info) 20%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-info) 50%, var(--bs-border-color));
    color: var(--bs-info-text-emphasis, var(--bs-info));
}
[data-bs-theme="dark"] .tile-grid .tile-btn.tile-insight {
    color: var(--bs-info);
}
.tile-grid .tile-btn.tile-insight:hover {
    color: inherit;
    filter: brightness(1.03);
}
.tile-grid .tile-btn.tile-system {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}
.tile-grid .tile-btn.tile-system:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    filter: brightness(1.04);
}

@media (min-width: 576px) {
    .tile-grid .tile-btn { height: 120px; font-size: 1.05rem; }
}
@media (min-width: 992px) {
    .tile-grid .tile-btn { height: 130px; }
}

/* ---- responsive data grids -------------------------------- */
.grid-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Grid cells: vertically centered; min width for readability (horizontal alignment stays default / per-column kv-align-*) */
.grid-view .table > thead > tr > th,
.grid-view .table > tbody > tr > td {
    vertical-align: middle;
    min-width: 120px;
}
.grid-view .table > thead > tr > th.kartik-sheet-style,
.grid-view .table > tbody > tr > td.kartik-sheet-style {
    min-width: 36px;
}

/* ---- DataTables filter input ------------------------------ */
.dataTables_filter input {
    padding: 6px 12px;
    font-size: .875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.dataTables_filter input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* ---- calendar booking cells ------------------------------- */
td .green {
    width: 100%;
    background-color: #10b981;
    min-height: 26px;
    border-radius: 5px;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2em .45em;
}
td .red {
    width: 100%;
    min-height: 26px;
    background-color: #ef4444;
    border-radius: 5px;
}
td.color {
    vertical-align: middle !important;
}
/* White text only on plain availability pills inside booking cells — NOT calendar-booking-cell */
.color > div:not(.calendar-booking-cell) {
    color: #fff;
    text-align: center;
}
/* Tinted booking bars use light rgba fill → dark text in light theme */
.calendar-booking-cell {
    cursor: pointer;
    border-radius: 6px;
    padding: .25em .5em;
    font-size: .79em;
    line-height: 1.35;
    white-space: normal;
    color: var(--bs-emphasis-color);
    text-align: left;
    max-width:100%;
}
[data-bs-theme="dark"] .calendar-booking-cell {
    color: #fff;
}

/* Centered dash for booked middle-day / empty incoming cell */
#calendar-main .calendar-booking-cell.hw-cal-range-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    text-align: center;
}
#calendar-incoming-main .hw-cal-incoming-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    text-align: center;
    font-weight: 500;
}
#calendar-incoming-main .hw-cal-incoming-placeholder:not(.calendar-booking-cell) {
    color: var(--bs-secondary-color);
}

/* Calendar / grid hex swatches (hotel & location colors) */
.hw-cal-color-badge {
    display: inline-flex;
    align-items: center;
}
.hw-cal-color-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.28);
    vertical-align: middle;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .hw-cal-color-dot {
    border-color: rgba(255, 255, 255, 0.35);
}
.hw-cal-color-code {
    font-size: 0.85em;
    font-weight: 500;
}
.hw-cal-colored-name {
    text-decoration-color: currentColor;
}


/* ---- calendar table spacing ------------------------------- */
#calendar-main_wrapper td .checkbox-primary,
#calendar-main_wrapper td hr {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---- calendar: pickup/delivery hint strip + booking (stay inside td) ---- */
.sum-both {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0.05rem;
}
.sum-both > .green {
    flex: 0 0 30%;
    width: 30% !important;
    min-width: 30px;
    max-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: inherit !important;
}
/* Flex default min-width:auto blocks shrinking — allow text to wrap inside narrow date columns */
.sum-both > .calendar-booking-cell {
    flex: 1 1 0;
    min-width: 130px;
    max-width: 100%;

    box-sizing: border-box;
}

/* ---- kartik grid z-index fix ------------------------------ */
.input-group .form-control {
    z-index: 0 !important;
}

/* ---- misc utility ----------------------------------------- */
.nowrap {
    white-space: nowrap;
    padding: 0 .4em;
}
.padding-0 {
    padding: 0 !important;
}
.padding-05 {
    padding-top: .5rem;
}
.half-width {
    width: 50%;
}
.fw-600 {
    font-weight: 600;
}

/* ---- Dashboard KPI cards (gradient) ----------------------- */
.dash-kpi-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform .15s, box-shadow .15s;
}
.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
.dash-kpi-card.dash-kpi-indigo  { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.dash-kpi-card.dash-kpi-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.dash-kpi-card.dash-kpi-amber   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.dash-kpi-card.dash-kpi-cyan    { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.dash-kpi-card.dash-kpi-orange  { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.dash-kpi-card.dash-kpi-violet  { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.dash-kpi-card .dash-kpi-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.02em;
}
.dash-kpi-card .dash-kpi-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.78);
    margin-bottom: .25rem;
}
.dash-kpi-card .dash-kpi-icon {
    font-size: 2.6rem;
    color: rgba(255,255,255,.22);
    flex-shrink: 0;
}

/* ---- Dashboard chart cards -------------------------------- */
.dash-chart-card {
    border-radius: 14px;
    overflow: hidden;
}
.dash-chart-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .65rem 1rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}
.dash-chart-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Dashboard title icon --------------------------------- */
.dash-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ---- Dashboard date filter -------------------------------- */
.dash-month-input {
    border-radius: 8px;
    font-size: .82rem;
}

/* ---- Keep legacy .kpi-card class working elsewhere -------- */
.kpi-card {
    border-left: 4px solid;
    border-radius: 8px;
}
.kpi-card.kpi-primary  { border-color: #6366f1; }
.kpi-card.kpi-success  { border-color: #10b981; }
.kpi-card.kpi-warning  { border-color: #f59e0b; }
.kpi-card.kpi-info     { border-color: #06b6d4; }
.kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}
.kpi-card .kpi-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
}
.kpi-card .kpi-icon {
    font-size: 2.5rem;
    opacity: .18;
}

/* ---- login page ------------------------------------------- */
.login-background-image {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.login-card {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
[data-bs-theme="dark"] .login-card {
    background: rgba(33,37,41,.92);
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
}

/* ---- audit trail table ------------------------------------ */
.audit-trail pre {
    max-height: 120px;
    overflow: auto;
    font-size: .78rem;
    margin: 0;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-radius: 4px;
    padding: 4px 6px;
}

/* ---- booking detail card ---------------------------------- */
.booking-detail-card .table th {
    width: 35%;
    color: #6c757d;
    font-weight: 500;
}

/* ---- status badges ---------------------------------------- */
.badge-status-confirmed  { background-color: #198754; }
.badge-status-draft      { background-color: #6c757d; }
.badge-status-cancelled  { background-color: #dc3545; }
.badge-status-completed  { background-color: #0d6efd; }

/* ============================================================
   Calendar table
   ============================================================ */
.calendar-scroll-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
}

.cal-table {
    font-size: .82rem;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
}

.cal-table thead th,
.cal-table tbody td,
.cal-table tfoot th {
    vertical-align: middle !important;
    padding: .3rem .4rem;
}

/* Sticky first 2 columns — applies to both calendars */
.cal-table thead th:nth-child(1),
.cal-table thead th:nth-child(2),
.cal-table tbody td:nth-child(1),
.cal-table tbody td:nth-child(2),
.cal-table tfoot th:nth-child(1),
.cal-table tfoot th:nth-child(2) {
    position: sticky;
    z-index: 3;
    background: var(--bs-body-bg);
}
.cal-table thead th:nth-child(1),
.cal-table tbody td:nth-child(1),
.cal-table tfoot th:nth-child(1) { left: 0; }
.cal-table thead th:nth-child(2),
.cal-table tbody td:nth-child(2),
.cal-table tfoot th:nth-child(2) { left: 90px; }

/* Extra sticky columns for main calendar (4 fixed header cols) */
.cal-table-full thead th:nth-child(3),
.cal-table-full thead th:nth-child(4),
.cal-table-full tbody td:nth-child(3),
.cal-table-full tbody td:nth-child(4),
.cal-table-full tfoot th:nth-child(3),
.cal-table-full tfoot th:nth-child(4) {
    position: sticky;
    z-index: 3;
    background: var(--bs-body-bg);
}
.cal-table-full thead th:nth-child(3),
.cal-table-full tbody td:nth-child(3),
.cal-table-full tfoot th:nth-child(3) { left: 180px; }
.cal-table-full thead th:nth-child(4),
.cal-table-full tbody td:nth-child(4),
.cal-table-full tfoot th:nth-child(4) { left: 270px; }

/* Sticky header row */
.cal-table thead th { z-index: 4; top: 0; position: sticky; }

/* Date columns — narrow */
.cal-table th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)),
.cal-table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    min-width: 80px;
    max-width: 140px;
}

.cal-table .calendar-booking-cell {
    font-size: .78rem;
    border-radius: 4px;
    padding: .2em .4em;
    line-height: 1.3;
    white-space: normal;
}

/* ============================================================
   DataTables 2.x + Bootstrap 5 bundle — dark mode overrides
   ============================================================ */
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td,
[data-bs-theme="dark"] table.dataTable tfoot th,
[data-bs-theme="dark"] table.dataTable tfoot td {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] table.dataTable tbody tr.odd > * {
    background-color: var(--bs-tertiary-bg) !important;
}
[data-bs-theme="dark"] table.dataTable tbody td {
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] div.dt-container,
[data-bs-theme="dark"] .dataTables_wrapper {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] div.dt-length label,
[data-bs-theme="dark"] div.dt-search label,
[data-bs-theme="dark"] div.dt-info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .dt-paging .page-link {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dt-paging .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
/* Sticky column backgrounds in dark + striped rows */
[data-bs-theme="dark"] .cal-table tbody td:nth-child(1),
[data-bs-theme="dark"] .cal-table tbody td:nth-child(2) {
    background-color: var(--bs-body-bg) !important;
}
[data-bs-theme="dark"] .cal-table tbody tr.odd td:nth-child(1),
[data-bs-theme="dark"] .cal-table tbody tr.odd td:nth-child(2) {
    background-color: var(--bs-tertiary-bg) !important;
}
[data-bs-theme="dark"] .cal-table.cal-table-full tbody td:nth-child(3),
[data-bs-theme="dark"] .cal-table.cal-table-full tbody td:nth-child(4) {
    background-color: var(--bs-body-bg) !important;
}
[data-bs-theme="dark"] .cal-table.cal-table-full tbody tr.odd td:nth-child(3),
[data-bs-theme="dark"] .cal-table.cal-table-full tbody tr.odd td:nth-child(4) {
    background-color: var(--bs-tertiary-bg) !important;
}
[data-bs-theme="dark"] .cal-table thead th {
    background-color: var(--bs-secondary-bg) !important;
}

/* ============================================================
   Breadcrumbs (Bootstrap 5)
   ============================================================ */
.hw-breadcrumb-wrap .breadcrumb {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}
.hw-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
    font-weight: 600;
}
.hw-breadcrumb-wrap .breadcrumb-item.active {
    color: var(--bs-body-color);
}
.hw-breadcrumb-wrap .breadcrumb-item:not(.active) a {
    text-decoration: none;
}
.hw-breadcrumb-wrap .breadcrumb-item:not(.active) a:hover {
    text-decoration: underline;
}

/* ============================================================
   Modals + AJAX booking form
   ============================================================ */
.modal-content {
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}
.modal-header .modal-title {
    line-height: 1.35;
}
.book-form-modal .field-datetimepicker .input-group {
    flex-wrap: nowrap;
}
.book-form-modal .help-block {
    color: var(--bs-danger);
    font-size: .8125rem;
    margin-top: .25rem;
}
/* Kartik / bootstrap-datepicker above modal backdrop (BS modal ~1055) */
.modal .datepicker,
.modal .datepicker-dropdown,
.modal.datetimepicker-dropdown,
.modal .bootstrap-datetimepicker-widget.dropdown-menu,
.modal .datetimepicker.dropdown-menu {
    z-index: 2000 !important;
}
.modal-open .select2-container--open {
    z-index: 2000 !important;
}

/* Page-level bootstrap-datepicker (Kartik DatePicker): must stack above fixed navbar (1030),
 * expanded collapse, and nav dropdowns. Modal-scoped pickers above use 2000 — use 2005 here
 * so month/day grids are never clipped under .hw-navbar / .fixed-top. */
.datepicker-dropdown,
.datepicker.datepicker-dropdown,
.dropdown-menu.datepicker-dropdown,
.datepicker.datepicker-dropdown.dropdown-menu {
    z-index: 2005 !important;
}

/* Kartik smalot datetimepicker popup — theme-aligned */
.bootstrap-datetimepicker-widget.dropdown-menu,
.datetimepicker.dropdown-menu {
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td,
.datetimepicker.dropdown-menu table th,
.datetimepicker.dropdown-menu table td {
    border-radius: var(--bs-border-radius-sm);
}
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu,
[data-bs-theme="dark"] .datetimepicker.dropdown-menu {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* ============================================================
   Calendar tables — sticky columns + visual polish
   ============================================================
   table-responsive (overflow-x:auto) is on .grid-scroll-wrapper.
   position:sticky + cumulative left offsets pin the identifier
   columns while date columns scroll horizontally.

   Main calendar thead: ΚΤΕΟ, Ασφάλεια, Κατηγορία, Όχημα, then dates.
   Incoming calendar: cols 1-2 (Category ~120, Vehicle)
   ============================================================ */

/* ---- Wrapper card ---- */
.grid-scroll-wrapper {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    /* No overflow:hidden here — table-responsive (same element) needs overflow-x:auto */
}

/* Strip default DataTables wrapper padding (id legacy + DT2 .dt-container) */
#calendar-main_wrapper,
#calendar-incoming-main_wrapper,
.calendar-index .dt-container {
    padding: 0;
}

#calendar-incoming-main tr{
    max-width: 30vw;
}

/* ---- DataTable controls bar (top) ---- */
#calendar-main_wrapper .row.mb-2,
#calendar-incoming-main_wrapper .row.mb-2,
.calendar-index .dt-container .row.mb-2 {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .5rem 1rem;
    margin: 0 !important;
}

/* ---- DataTable info/pagination bar (bottom) ---- */
#calendar-main_wrapper .row.mt-2,
#calendar-incoming-main_wrapper .row.mt-2,
.calendar-index .dt-container .row.mt-2 {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .4rem 1rem;
    margin: 0 !important;
}

/* ---- Table header ---- */
#calendar-main thead th,
#calendar-incoming-main thead th {
    background: var(--bs-secondary-bg);
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    padding: .5rem .55rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--bs-border-color) !important;
    /* vertical sticky so header pins when page scrolls down */
    position: sticky !important;
    top: 0;
    z-index: 5 !important;
}

.hw-cal-incoming-day-counts {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bs-primary);
    line-height: 1.25;
}

#calendar-incoming-main thead th .hw-cal-incoming-day-counts {
    color: var(--bs-body-color);
}

/* ---- Table body + foot cells ---- */
#calendar-main td,
#calendar-main tfoot th,
#calendar-incoming-main td,
#calendar-incoming-main tfoot th {
    padding: .3rem .5rem;
    vertical-align: middle;
    font-size: .82rem;
}

/* ---- Category / vehicle name labels ---- */
.vehicle-name {
    font-weight: 600;
    white-space: nowrap;
    font-size: .84rem;
    color: var(--bs-link-color);
}
/* Main calendar vehicle column: wrap long names (e.g. model + plate) */
#calendar-main .vehicle-name {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
    min-width: 120px;
}
/* Main calendar category column: wrap long labels */
#calendar-main .category-name {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}
/* Main calendar Ασφάλεια (col 2): wrap “Μέχρι …” in badge */
#calendar-main tbody td:nth-child(2) .green,
#calendar-main tbody td:nth-child(2) .red {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
    max-width: 100%;
}
.category-name {
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Main calendar: Όχημα column a bit wider than others (desktop auto-layout) */
#calendar-main col.cal-col-vehicle {
    min-width: 12rem;
}

/* ---- Date column widths ---- */
/* Main calendar: narrow date cells */
#calendar-main thead th:nth-child(n+5),
#calendar-main tbody td:nth-child(n+5),
#calendar-main tfoot th:nth-child(n+5) {
    min-width: 200px;
    max-width: 250px;
}

/*
 * Main calendar — mobile “lower resolution”: JS toggles .hw-cal-mobile-compact / .hw-cal-mobile-nano
 * on .calendar-index (see theme/calendar/index.js) so day columns shrink and typography tightens on small viewports.
 */
.calendar-index.hw-cal-mobile-compact #calendar-main thead th:nth-child(n+5),
.calendar-index.hw-cal-mobile-compact #calendar-main tbody td:nth-child(n+5),
.calendar-index.hw-cal-mobile-compact #calendar-main tfoot th:nth-child(n+5) {
    min-width: 132px;
    max-width: 162px;
}
.calendar-index.hw-cal-mobile-compact #calendar-main thead th,
.calendar-index.hw-cal-mobile-compact #calendar-main td {
    padding: .28rem .4rem;
    font-size: .76rem;
}
.calendar-index.hw-cal-mobile-compact #calendar-main col.cal-col-vehicle {
    min-width: 9rem;
}
.calendar-index.hw-cal-mobile-compact #calendar-main .vehicle-name {
    font-size: .76rem;
    min-width: 96px;
}
.calendar-index.hw-cal-mobile-compact #calendar-main .category-name {
    font-size: .65rem;
}
/* Let booking text wrap in narrow day cells instead of one long nowrap line */
.calendar-index.hw-cal-mobile-compact #calendar-main .calendar-booking-cell > div {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.calendar-index.hw-cal-mobile-nano #calendar-main thead th:nth-child(n+5),
.calendar-index.hw-cal-mobile-nano #calendar-main tbody td:nth-child(n+5),
.calendar-index.hw-cal-mobile-nano #calendar-main tfoot th:nth-child(n+5) {
    min-width: 102px;
    max-width: 128px;
}
.calendar-index.hw-cal-mobile-nano #calendar-main thead th,
.calendar-index.hw-cal-mobile-nano #calendar-main td {
    padding: .22rem .3rem;
    font-size: .72rem;
}
.calendar-index.hw-cal-mobile-nano #calendar-main col.cal-col-vehicle {
    min-width: 7.5rem;
}

/* Main calendar — mobile: horizontal scroll for filters + grid; ΚΤΕΟ hidden in JS */

/* Incoming calendar: wider date cells (hold booking detail text) */
#calendar-incoming-main thead th:nth-child(n+3),
#calendar-incoming-main tbody td:nth-child(n+3),
#calendar-incoming-main tfoot th:nth-child(n+3) {
    min-width: 220px;
}

/* ---- Mirrored top scrollbar ----------------------------------------
 * A thin div above the table-responsive wrapper whose inner div is sized
 * to match the table scroll-width. JS syncs scrollLeft with the wrapper.
 * -------------------------------------------------------------------- */
.cal-top-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;                              /* just enough to show the scrollbar */
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
    background: var(--bs-tertiary-bg);
}
.cal-top-scroll > div {
    height: 1px;                               /* inner div triggers overflow */
}
/* Connect the two strips: remove the top radius + top border from the card below */
.cal-top-scroll + .grid-scroll-wrapper {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}


/* ---- Dark-mode overrides ---- */
[data-bs-theme="dark"] #calendar-main thead th,
[data-bs-theme="dark"] #calendar-incoming-main thead th {
    background-color: var(--bs-secondary-bg) !important;
}
[data-bs-theme="dark"] #calendar-main_wrapper .row.mb-2,
[data-bs-theme="dark"] #calendar-main_wrapper .row.mt-2,
[data-bs-theme="dark"] .calendar-index .dt-container .row.mb-2,
[data-bs-theme="dark"] .calendar-index .dt-container .row.mt-2,
[data-bs-theme="dark"] #calendar-incoming-main_wrapper .row.mb-2,
[data-bs-theme="dark"] #calendar-incoming-main_wrapper .row.mt-2 {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}
.form-group {
    margin-bottom: 0.5rem;
}

/* ====================================================================
   Calendar-incoming: compact filter bar
   ==================================================================== */

/* Tighter card padding on mobile */
.cal-filter-body {
    padding: .6rem .75rem;
}
@media (min-width: 992px) {
    .cal-filter-body {
        padding: .5rem 1rem;
    }
}

/* Smaller label */
.cal-filter-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

/* Select2 height to match form-control-sm on mobile */
@media (max-width: 991.98px) {
    .cal-filter-body .select2-container--krajee .select2-selection {
        min-height: calc(1.5em + .5rem + 2px) !important;
        font-size: .875rem !important;
    }
    .cal-filter-body .select2-container--krajee .select2-selection__rendered {
        line-height: 1.5 !important;
        padding: .25rem .5rem !important;
        font-size: .875rem !important;
    }
    .cal-filter-body .select2-container--krajee .select2-selection__arrow {
        height: calc(1.5em + .5rem + 2px) !important;
    }
    .cal-filter-body .select2-container--krajee .select2-selection__choice {
        font-size: .75rem !important;
        padding: 0 .35rem !important;
        line-height: 1.4 !important;
    }
}


/* ====================================================================
   Calendar-incoming: mobile tile list  (shown below lg breakpoint)
   ==================================================================== */

.calendar-incoming-mobile {
    padding: 0;
}

/* ---- Day group separator ---- */
.cal-mobile-day-header {
    font-size: .75rem;
}
.cal-mobile-day-header .badge {
    font-size: .78rem;
    letter-spacing: .04em;
    font-weight: 600;
    padding: .3em .65em;
}
.cal-mobile-day-header hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

/* ---- Tile card ---- */
/* The .single-detail inside has border-left:[accent] as an inline style.
   We make the body padding-free so that border becomes the card's left accent. */
.cal-mobile-tile {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .15s ease;
}
.cal-mobile-tile:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.11);
}

/* ---- Tile header (vehicle name + type badge) ---- */
.cal-mobile-tile-veh {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 2.5rem;
}
.cal-mobile-tile-veh .vehicle-name {
    font-size: .88rem;
    font-weight: 600;
    max-width: 58vw;
}
.cal-mobile-tile-veh .category-name {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}

/* Multiple type pills when Παράδοση + Παραλαβή merged in one tile (JS) */
.cal-mobile-type-badges {
    align-items: center;
}

/* Separator between merged booking blocks in one tile */
.cal-mobile-merge-hr {
    margin: 0.35rem 0;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 0.85;
}

/* Type pill (Παράδοση / Παραλαβή) */
.cal-mobile-type-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .25em .6em;
    border-radius: 2em;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-paradosi {
    background: rgba(234,179,8,.18);
    color: #92610a;
    border: 1px solid rgba(234,179,8,.45);
}
.badge-paralabi {
    background: rgba(37,99,235,.13);
    color: #1d4ed8;
    border: 1px solid rgba(37,99,235,.35);
}
[data-bs-theme="dark"] .badge-paradosi {
    background: rgba(234,179,8,.22);
    color: #fde047;
    border-color: rgba(234,179,8,.4);
}
[data-bs-theme="dark"] .badge-paralabi {
    background: rgba(99,160,255,.18);
    color: #93c5fd;
    border-color: rgba(99,160,255,.35);
}

/* ---- Booking block (single-detail) inside tile ----
   No padding on wrapper; block fills edge-to-edge so its border-left
   (accent color from location/hotel) forms the card's left accent strip. */
.cal-mobile-tile-body {
    padding: 0 !important;
}
.cal-mobile-tile-body .single-detail {
    display: block;
    width: 100%;
    border-radius: 0;
    /* Neutralise the red fill from CalendarColorHelper — keep only border-left */
    background-color: var(--bs-body-bg) !important;
    padding: .65rem .85rem .65rem 1rem;
    font-size: .84rem;
    cursor: pointer;
}
/* Hide the bold h5 title — the type pill in the card header already shows it */
.cal-mobile-tile-body .single-detail .bold.text-center {
    display: none;
}
/* Info rows */
.cal-mobile-tile-body .single-detail .date,
.cal-mobile-tile-body .single-detail .money,
.cal-mobile-tile-body .single-detail .loction,
.cal-mobile-tile-body .single-detail .hw-cal-incoming-hotel,
.cal-mobile-tile-body .single-detail .customer,
.cal-mobile-tile-body .single-detail .description,
.cal-mobile-tile-body .single-detail .paidika-kathismata {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: block;
    margin-bottom: .25rem;
    line-height: 1.4;
}
/* Hotel + room stacked */
.cal-mobile-tile-body .hw-cal-incoming-hotel {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
/* Checkbox row */
.cal-mobile-tile-body .checkbox,
.cal-mobile-tile-body .checkbox-primary {
    margin: .5rem 0 .3rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.cal-mobile-tile-body .checkbox input[type="checkbox"],
.cal-mobile-tile-body .checkbox-primary input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.cal-mobile-tile-body label.custom-control-label {
    font-size: .84rem;
    cursor: pointer;
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .cal-mobile-tile {
    border-color: var(--bs-border-color);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
[data-bs-theme="dark"] .cal-mobile-tile-veh {
    background: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .cal-mobile-tile-body .single-detail {
    background-color: var(--bs-body-bg) !important;
}

/* fs-7 utility (Bootstrap 5 doesn't include it by default) */
.fs-7 { font-size: .875rem !important; }


#calendar-main
.calendar-booking-cell > div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.4em;

    /* CRITICAL: It must have a constrained width to know when to cut off */
    width: 100%; /* Or a specific px/rem value, or max-width */
    display: block;
}



.kv-table-header.w0 th a {
    color: inherit !important; /* Forces the link to take the color of the <th> */
    text-decoration: none !important; /* Removes the underline */
    display: block; /* Makes the whole cell clickable, not just the text */
}

/* Prevent color change on hover, but keep the pointer cursor */
.kv-table-header.w0 th a:hover {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer; /* Lets the user know it's still clickable for sorting */
}
/* ── Navbar ──────────────────────────────────────────────────────── */
.hw-navbar {
    background-color: var(--bs-body-bg);
    border-bottom   : 1px solid var(--bs-border-color);
    /* navbar-dark/light handled automatically by data-bs-theme */
}

.hw-navbar .nav-link,
.hw-navbar .navbar-brand {
    color: var(--bs-body-color);
}
.hw-navbar .nav-link:hover,
.hw-navbar .nav-link:focus {
    color: var(--bs-primary);
}
.hw-navbar .navbar-toggler-icon {
    /* BS5 auto-handles this with data-bs-theme */
}

/* Logo in navbar */
.hw-navbar-logo {
    height    : 32px;
    width     : auto;
    display   : block;
    object-fit: contain;
}


/* ── Avatar bubble ───────────────────────────────────────────────── */
.hw-avatar {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 30px;
    height         : 30px;
    border-radius  : 50%;
    background-color: var(--bs-primary);
    color          : #fff;
    flex-shrink    : 0;
}
.hw-avatar-lg {
    width : 38px;
    height: 38px;
    font-size: 1rem;
}

/* ── User dropdown ───────────────────────────────────────────────── */
.hw-user-dropdown {
    background-color: var(--bs-body-bg);
    border-color    : var(--bs-border-color);
}
.hw-user-dropdown .dropdown-item {
    color: var(--bs-body-color);
}
.hw-user-dropdown .dropdown-item:hover,
.hw-user-dropdown .dropdown-item:focus {
    background-color: var(--bs-secondary-bg);
    color           : var(--bs-body-color);
}

/* ── Theme toggle pill indicator ─────────────────────────────────── */
.hw-theme-pill {
    display         : inline-block;
    width           : 28px;
    height          : 16px;
    border-radius   : 8px;
    background-color: var(--bs-secondary-bg);
    border          : 1px solid var(--bs-border-color);
    position        : relative;
    vertical-align  : middle;
    transition      : background-color 0.2s;
}
.hw-theme-pill::after {
    content         : '';
    position        : absolute;
    top             : 2px;
    left            : 2px;
    width           : 10px;
    height          : 10px;
    border-radius   : 50%;
    background-color: var(--bs-secondary-color, #6c757d);
    transition      : transform 0.2s, background-color 0.2s;
}
[data-bs-theme="dark"] .hw-theme-pill {
    background-color: var(--bs-primary);
    border-color    : var(--bs-primary);
}
[data-bs-theme="dark"] .hw-theme-pill::after {
    transform       : translateX(12px);
    background-color: #fff;
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.hw-breadcrumb-wrap .breadcrumb {
    background-color: var(--bs-secondary-bg);
    border          : 1px solid var(--bs-border-color);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.hw-footer-credit .link-secondary:hover {
    color           : var(--bs-primary);
    text-decoration : underline;
}
.hw-footer {
    flex-shrink     : 0;
    padding         : 0.1rem 0;
    border-top      : 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}
.hw-footer-logo {
    height    : 24px;
    width     : auto;
    object-fit: contain;
    opacity   : 0.7;
}

/* Public guest booking confirmation (signed link layout) */
.hw-guest-booking-footer {
    font-size: 0.9375rem;
}
@media (min-width: 768px) {
    .hw-guest-booking-footer .text-md-end > p {
        max-width: 28rem;
        margin-left: auto;
    }
}

/* ── Navbar notification bell (dropdown panel) ───────────────────── */
.hw-notification-bell .hw-notif-trigger {
    width:           2.5rem;
    height:          2.5rem;
    transition:      background-color 0.15s ease, color 0.15s ease;
}
.hw-notification-bell .hw-notif-trigger:hover,
.hw-notification-bell .hw-notif-trigger:focus-visible {
    background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.12));
    color:            var(--bs-primary);
}

.hw-notification-bell .hw-notif-dropdown {
    min-width:     340px;
    max-width:     min(420px, calc(100vw - 1rem));
    border-radius: 14px;
    border:        1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    box-shadow:
        0 0.35rem 0.75rem rgba(0, 0, 0, 0.06),
        0 1rem 2.25rem rgba(0, 0, 0, 0.11);
    margin-top:    0.45rem !important;
}

.hw-notif-header-bar {
    padding:       0.875rem 1rem;
    gap:           0.75rem;
    background:    var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
}
.hw-notif-header-title {
    font-weight:    600;
    font-size:      0.9375rem;
    letter-spacing: -0.02em;
    color:          var(--bs-emphasis-color);
}
.hw-notif-mark-all {
    flex-shrink:     0;
    white-space:     nowrap;
    font-weight:     600;
    font-size:       0.8125rem;
    color:           var(--bs-primary);
    border:          none;
    background:      transparent;
    padding:         0.35rem 0.55rem;
    margin:          -0.35rem -0.55rem -0.35rem 0;
    border-radius:   8px;
    line-height:     1.2;
    transition:      background 0.12s ease;
}
.hw-notif-mark-all:hover {
    background: rgba(13, 110, 253, 0.12);
    color:      var(--bs-primary);
}

.hw-notification-bell .hw-notif-scroll-li {
    position:   relative;
    max-height: min(320px, 52vh);
    overflow-y: auto;
}
.hw-notif-scroll-empty {
    min-height: 148px;
}

.hw-notif-empty-icon {
    font-size: 1.85rem;
    opacity:   0.35;
    color:     var(--bs-secondary-color);
}

.hw-notif-item.dropdown-item {
    padding:       0;
    white-space:   normal;
}
.hw-notif-item .hw-notif-row {
    position:      relative;
    padding:     0.85rem 1rem;
    transition:  background-color 0.12s ease;
}
.hw-notif-item.dropdown-item:hover .hw-notif-row,
.hw-notif-item.dropdown-item:focus-visible .hw-notif-row {
    background-color: var(--bs-tertiary-bg);
}
.hw-notif-item-static:hover .hw-notif-row {
    background-color: var(--bs-tertiary-bg);
}
.hw-notif-item-unread .hw-notif-row {
    border-left:   3px solid var(--bs-primary);
    padding-left:  calc(1rem - 3px);
    background-color: rgba(13, 110, 253, 0.07);
}
.hw-notif-item-unread.dropdown-item:hover .hw-notif-row,
.hw-notif-item-unread.dropdown-item:focus-visible .hw-notif-row {
    background-color: rgba(13, 110, 253, 0.11);
}

.hw-notif-item-static.hw-notif-item-unread .hw-notif-row {
    border-left:      3px solid var(--bs-primary);
    padding-left:     calc(1rem - 3px);
    background-color: rgba(13, 110, 253, 0.06);
}

.hw-notif-icon {
    width:           2.35rem;
    height:          2.35rem;
    border-radius:   11px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.95rem;
}
.hw-notif-accent-watch {
    background: rgba(13, 110, 253, 0.14);
    color:      var(--bs-primary);
}
.hw-notif-accent-info {
    background: rgba(13, 202, 240, 0.18);
    color:      #0aa2c0;
}
.hw-notif-accent-warn {
    background: rgba(220, 53, 69, 0.14);
    color:      var(--bs-danger);
}
.hw-notif-accent-muted {
    background: var(--bs-secondary-bg);
    color:      var(--bs-secondary-color);
}
.hw-notif-accent-default {
    background: rgba(13, 110, 253, 0.12);
    color:      var(--bs-primary);
}

.hw-notif-title {
    font-weight:   600;
    font-size:     0.875rem;
    line-height:   1.38;
    color:         var(--bs-emphasis-color);
    margin-bottom: 0.15rem;
}
.hw-notif-item:not(.hw-notif-item-unread) .hw-notif-title {
    font-weight: 500;
    opacity:     0.9;
}
.hw-notif-body {
    font-size:     0.8125rem;
    line-height:   1.48;
    color:         var(--bs-secondary-color);
    margin-bottom: 0.3rem;
}
.hw-notif-meta {
    font-size:       0.72rem;
    font-weight:     500;
    color:           var(--bs-tertiary-color);
    letter-spacing:  0.03em;
    text-transform:  uppercase;
}

.hw-notif-footer-link {
    display:         flex;
    align-items:     center;
    padding:         0.68rem 1rem;
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--bs-body-color);
    text-decoration: none;
    transition:      background 0.12s ease, color 0.12s ease;
}
.hw-notif-footer-link:hover {
    background: var(--bs-tertiary-bg);
    color:      var(--bs-primary);
}

.hw-notification-bell .hw-notif-badge {
    top:          0.05rem;
    right:        0.15rem;
    left:         auto;
    transform:    none;
    font-size:    0.61rem;
    font-weight:  700;
    min-width:    1.15rem;
    padding:      0.2em 0.45em;
    background:   linear-gradient(135deg, #e63946 0%, #c1121f 100%);
    color:        #fff;
    border:       2px solid var(--bs-body-bg);
    line-height:  1;
}

.hw-notif-item-static {
    cursor: default;
}

[data-bs-theme="dark"] .hw-notification-bell .hw-notif-dropdown {
    box-shadow:
        0 0.35rem 0.75rem rgba(0, 0, 0, 0.35),
        0 1rem 2.25rem rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .hw-notif-accent-info {
    color: #5eead4;
}

/* Booking notification-only modal (calendar): summary scrolls if tall */
.hw-booking-notification-modal .hw-notify-modal-summary {
    max-height: min(42vh, 320px);
    overflow-y: auto;
}