* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: #ffffff;
    color: #1a1a1a;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.dashboard-container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

/* Sidebar Styles */
.sidebar {
    width: 240px;
    background-color: #1e1e1e;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 32px 20px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a #1e1e1e;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #4a4a4a;
    border-radius: 3px;
}

.logo-area {
    text-align: center;
    margin-bottom: 40px;
}

.sidebar-logo-img {
    width: 100%;
    max-width: 170px;
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 16px;
}

/* Which property you're looking at, under the divider. Set in small caps
   at a lower contrast than the nav so it reads as context rather than as
   another thing to click. */
.sidebar-hotel-name {
    margin-top: 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

.sidebar-hotel-name:empty {
    display: none;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background-color: #333333;
    border: none;
    color: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    /* A button centres its text by default, which only shows once a
       label is long enough to wrap: Front Office sits on one line and
       looks left-aligned, Vision Impossible wraps to two and looks
       centred. Setting it here keeps every label starting at the same
       point, wrapped or not. */
    text-align: left;
    line-height: 1.3;
}

.nav-btn:hover {
    background-color: #3d3d3d;
}

.nav-btn.active {
    background-color: #4a4a4a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.nav-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.nav-btn .icon svg {
    width: 18px;
    height: 18px;
}

/* Budget collapsible sub-tab group */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-group-toggle {
    justify-content: flex-start;
    position: relative;
}

.nav-group-toggle.group-active {
    background-color: #4a4a4a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.nav-group-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-chevron {
    transform: rotate(90deg);
}

.nav-group-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    padding-left: 16px;
    border-left: 2px solid #3d3d3d;
    margin-left: 12px;
    margin-top: 0;
    transition: max-height 0.2s ease, margin-top 0.2s ease;
}

.nav-group-list.open {
    max-height: 600px;
    margin-top: 10px;
}

.nav-subbtn {
    padding: 9px 14px;
    font-size: 13px;
}

/* Main Content Styles */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 40px;
    height: 100%;
    overflow-y: auto;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.date-display {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.date-display h2 {
    font-size: 44px;
    font-weight: 700;
    color: #111111;
    line-height: 1;
}

.date-display span {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.user-email {
    font-size: 12px;
    color: #777;
}

.dropdown-arrow {
    font-size: 10px;
    color: #555;
    margin-left: 6px;
}

/* Grid Layout */
.grid-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
    padding-bottom: 24px;
}

.left-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card {
    border-radius: 16px;
    padding: 20px;
}

.month-card {
    background-color: #b8b3cc;
    color: #2c254a;
    display: flex;
    flex-direction: column;
}

.mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mini-cal-header .card-title {
    margin-bottom: 0;
}

.cal-nav-btn {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.45);
    color: #2c254a;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cal-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.event-card {
    background-color: #c9989f;
    flex: 1;
    color: #4a252a;
    overflow-y: auto;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Mini Calendar Styles */
.mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 11px;
}

.cal-day-name {
    font-weight: 600;
    color: #4a3e6b;
    padding-bottom: 4px;
}

.cal-cell {
    padding: 6px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.cal-cell:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.cal-cell.selected {
    background-color: #4a252a;
    color: #ffffff;
    font-weight: 600;
}

.cal-cell.empty {
    cursor: default;
}

/* Events List Styles */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.event-item {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.event-desc {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 3px;
}

/* Main Panel Timeline Styles */
.main-panel {
    background-color: #e2b96d;
    color: #4a3818;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.timeline-container {
    flex: 1;
    overflow-y: auto;
    margin-top: 12px;
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
}

/* Timeline grid (positioned like a real calendar, not a table, so events
   can start/end at any 15-minute mark instead of snapping to a whole cell) */
.timeline-grid {
    display: flex;
    flex-direction: column;
    font-size: 11px;
}

.timeline-header {
    display: flex;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 3;
}

.time-col-header {
    width: 65px;
    flex-shrink: 0;
}

.staff-header {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-left: none;
    padding: 8px 4px;
}

.time-col-header + .staff-header {
    border-left: 1px solid #eaeaea;
}

.timeline-body {
    display: flex;
}

.time-labels {
    width: 65px;
    flex-shrink: 0;
}

.hour-label {
    height: 60px;
    box-sizing: border-box;
    padding-top: 2px;
    padding-right: 8px;
    text-align: right;
    color: #777;
    font-weight: 500;
    border-top: 1px solid #eaeaea;
}

.staff-columns {
    display: flex;
    flex: 1;
}

.staff-column {
    flex: 1;
    position: relative;
    border-right: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 59px,
        #f0f0f0 59px,
        #f0f0f0 60px
    );
    cursor: pointer;
}

.staff-column:first-child {
    border-left: 1px solid #eaeaea;
}

.staff-column:hover {
    background-color: #fafafa;
}

.event-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 4px 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
    color: #2c2c2c;
}

.event-block:hover {
    filter: brightness(0.95);
}

.eb-title {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eb-time {
    font-size: 9.5px;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eb-desc {
    font-size: 9.5px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Booking Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.modal-overlay.open {
    display: flex;
}

.modal-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-box.wide {
    width: 520px;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-hint {
    font-weight: 400;
    text-transform: none;
    color: #999;
    font-size: 11px;
    margin-left: 2px;
}

.modal-dialog-message {
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

.modal-box h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.modal-box label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-top: 4px;
}

.modal-box select,
.modal-box input[type="text"],
.modal-box textarea {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 13px;
    font-family: inherit;
    margin-top: 4px;
    resize: vertical;
}

.modal-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.color-swatch.selected {
    border-color: #1e1e1e;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}

.modal-actions-right {
    display: flex;
    gap: 8px;
}

.modal-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #f0f0f0;
    color: #333;
}

.modal-btn.primary {
    background: #1e1e1e;
    color: #fff;
}

.modal-btn.danger {
    background: transparent;
    color: #b3352f;
    padding-left: 0;
}

.modal-btn.is-loading {
    cursor: not-allowed;
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.modal-btn .btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spinner-spin 0.6s linear infinite;
}

.modal-btn.danger .btn-spinner {
    border-color: rgba(179, 53, 47, 0.3);
    border-top-color: #b3352f;
}

.modal-btn:not(.primary):not(.danger) .btn-spinner {
    border-color: rgba(26, 26, 26, 0.25);
    border-top-color: #1a1a1a;
}

@keyframes btn-spinner-spin {
    to { transform: rotate(360deg); }
}

/* S.W.O.T view */
.swot-view {
    flex: 1;
    min-height: 0;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.swot-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    color: #1a1a1a;
}

.swot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gcal-connect-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.gcal-connect-btn:hover {
    background: #f5f5f5;
}

.gcal-connect-btn.connected {
    background: #eafaf0;
    border-color: #a7e3bf;
    color: #1c7a43;
}

.swot-header .card-title {
    margin-bottom: 0;
}

.swot-table-wrap {
    flex: 1;
    overflow: auto;
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
}

.swot-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.swot-table th {
    position: sticky;
    top: 0;
    background-color: #1e1e1e;
    color: #ffffff;
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

.swot-table td {
    border: 1px solid #eee;
    padding: 12px 14px;
    vertical-align: top;
    line-height: 1.5;
}

.swot-table td[contenteditable="true"] {
    cursor: text;
    background-color: #ffffff;
}

.swot-table td[contenteditable="true"]:hover {
    background-color: #f5f9ff;
}

.swot-table td[contenteditable="true"]:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
    background-color: #fffbe8;
}

.swot-table td.swot-editable-cell {
    min-width: 220px;
}

.swot-table td.swot-content-cell,
.swot-table td.swot-editable-cell {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.swot-table td.swot-row-actions {
    width: 90px;
}

.swot-table td.hotel-name-cell {
    background-color: #1e1e1e;
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
}

.swot-table td.hotel-name-cell[contenteditable="true"] {
    background-color: #1e1e1e;
}

.swot-table td.hotel-name-cell[contenteditable="true"]:focus {
    background-color: #fffbe8;
    color: #1a1a1a;
}

.swot-empty {
    color: #999;
}

.swot-table ol {
    margin: 0;
    padding-left: 18px;
}

.swot-table li {
    margin-bottom: 6px;
}

.swot-table li:last-child {
    margin-bottom: 0;
}

.swot-row-actions {
    white-space: nowrap;
    text-align: center;
    width: 76px;
    min-width: 76px;
}

.swot-row-btn {
    display: block;
    width: 100%;
    background-color: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    margin: 0 0 4px 0;
}

.swot-row-btn:last-child {
    margin-bottom: 0;
}

.swot-row-btn:hover {
    background-color: #e2e2e2;
}

.swot-row-btn.primary {
    background-color: #1e1e1e;
    color: #ffffff;
}

.swot-row-btn.primary:hover {
    background-color: #333333;
}

.swot-row-btn.danger {
    background-color: transparent;
    color: #b3352f;
}

.swot-row-btn.danger:hover {
    color: #7c231f;
    background-color: transparent;
}

/* Holiday view */
.holiday-view {
    flex: 1;
    min-height: 0;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.holiday-card {
    background-color: #ffffff;
    color: #1a1a1a;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.holiday-title {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #1a1a1a;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    margin-bottom: 22px;
}

.holiday-year-select {
    color: #f5a428;
    background: transparent;
    border: none;
    border-bottom: 2px dashed rgba(245, 164, 40, 0.5);
    text-decoration: none;
    margin-left: 6px;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0 2px;
}

.holiday-year-select:hover,
.holiday-year-select:focus {
    border-bottom-color: #f5a428;
    outline: none;
}

.holiday-filters {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 18px;
}

.holiday-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.holiday-filter-group label {
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

.holiday-filter-group select {
    width: auto;
    min-width: 160px;
}

.holiday-empty-note {
    text-align: center;
    background-color: #fff7e6;
    color: #a05a12;
    font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.holiday-source-note {
    text-align: center;
    font-size: 11.5px;
    padding: 6px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.holiday-source-note.is-live {
    background-color: #eaf7ee;
    color: #1e6b34;
}

.holiday-source-note.is-offline {
    background-color: #f2f2f2;
    color: #666;
}

.holiday-source-note a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.holiday-body {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
    flex: 1;
    min-height: 0;
}

.holiday-mini-wrap {
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 20px;
    align-self: start;
}

.holiday-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 16px;
}

.mini-month-title-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.mini-month-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    border-bottom: 3px solid #f5a428;
    padding-bottom: 3px;
}

.mini-cal-table {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 1px;
    text-align: center;
}

.mini-dow {
    font-size: 9px;
    font-weight: 700;
    color: #888;
    padding-bottom: 3px;
}

.mini-day {
    font-size: 9.5px;
    color: #333;
    padding: 2px 0;
}

.mini-day.empty {
    visibility: hidden;
}

.mini-day.is-marked {
    color: #c9781a;
    font-weight: 700;
    border: 1.3px solid #f5a428;
    border-radius: 50%;
}

.holiday-list-wrap {
    overflow-y: auto;
}

.holiday-list {
    column-count: 2;
    column-gap: 36px;
}

.holiday-list-month {
    break-inside: avoid;
    margin-bottom: 20px;
}

.holiday-list-month h4 {
    color: #2f6fed;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.holiday-entry-line {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .holiday-body {
        grid-template-columns: 1fr;
    }
    .holiday-list {
        column-count: 1;
    }
}

.swot-actions-col {
    width: 60px;
}

.swot-hotel-col {
    width: 120px;
}

.swot-content-col {
    width: 220px;
}

.swot-edit-btn {
    background-color: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

.swot-edit-btn:hover {
    background-color: #e2e2e2;
}

/* Staff Payroll view */
.payroll-view {
    flex: 1;
    min-height: 0;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.payroll-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    color: #1a1a1a;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.key-stats-table {
    border-collapse: collapse;
    margin: 14px 14px 20px 14px;
    font-size: 13px;
    width: auto;
    min-width: 340px;
}

.key-stats-table th {
    text-align: left;
    text-decoration: underline;
    font-size: 14px;
    padding: 4px 10px 8px 4px;
    border: none;
    background: none;
}

.key-stats-table td {
    border: 1px solid #333;
    padding: 4px 10px;
    font-weight: 700;
}

.key-stats-table td:first-child {
    font-weight: 700;
}

.key-stats-table td:last-child {
    font-weight: 400;
    text-align: left;
}

/* Opening Timeline — visual Gantt-style milestone chart anchored to a
   fixed -24..-1 MTH axis, rendered with CSS Grid so milestone columns
   and phase bands both just declare which grid column(s) they occupy. */
.ot-subtitle {
    font-size: 12.5px;
    color: #7a8ba0;
    margin: 6px 0 0;
}

.ot-canvas-wrap {
    flex: 1;
    min-width: 0;
    margin-top: 10px;
    padding: 4px 0 20px 0;
}

.ot-scroll {
    overflow-x: auto;
}

.ot-grid {
    display: grid;
    /* Column count is set inline per-render (23 months + 7 weekly buckets
       in the final month = 30 columns) since it's no longer a fixed 24;
       this is just a fallback in case the inline style is ever missing. */
    grid-template-columns: repeat(30, 170px);
    grid-template-rows: 52px 6px auto;
    grid-auto-rows: auto;
    position: relative;
    min-width: max-content;
    padding: 0 20px;
    row-gap: 6px;
}

.ot-axis-cell {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    padding-bottom: 8px;
    border-radius: 6px;
}

.ot-axis-cell:hover {
    background: #eef3f8;
}

.ot-axis-cell:hover .ot-axis-label {
    color: #2c5f8a;
}

.ot-axis-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5c7fa3;
    margin-bottom: 4px;
}

.ot-axis-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7c8d;
    white-space: nowrap;
}

.ot-axis-line {
    grid-row: 2;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #7ea8c9, #5c7fa3);
}

.ot-column {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 6px;
    min-height: 40px;
}

.ot-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.ot-card:hover {
    border-color: #a9c0d6;
}

.ot-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.ot-color-trigger {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.ot-month-select {
    font-size: 9.5px;
    font-weight: 700;
    color: #5c7fa3;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.ot-delete-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    border: none;
    background: none;
    color: #c94f4f;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.ot-card:hover .ot-delete-btn {
    opacity: 1;
}

.ot-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #2c2c2c;
    line-height: 1.3;
    outline: none;
}

.ot-notes {
    font-size: 11px;
    color: #777;
    font-style: italic;
    line-height: 1.3;
    margin-top: 4px;
    outline: none;
    min-height: 14px;
}

.ot-notes-empty:empty:before {
    content: attr(data-placeholder);
    color: #bbb;
}

.ot-color-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: 4px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 160px;
    flex-wrap: wrap;
    gap: 6px;
}

.ot-color-popover.open {
    display: flex;
}

.ot-color-popover .color-swatch {
    width: 20px;
    height: 20px;
}

.ot-band {
    position: relative;
    background: #f5f0a9;
    border: 1px solid #d8cf6a;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ot-band-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #4a4520;
    text-align: center;
    outline: none;
    max-width: 100%;
}

.ot-band-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10.5px;
    color: #6b6530;
}

.ot-band-controls label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ot-band-controls select {
    font-size: 10.5px;
    border: 1px solid #d8cf6a;
    border-radius: 4px;
    background: #fffdf0;
}

.ot-band-delete {
    position: static;
    opacity: 1;
    color: #a04f4f;
}

.payroll-table-wrap {
    flex: 1;
    overflow: auto;
    margin-top: 10px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
}

.payroll-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 12px;
}

.payroll-table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    padding: 8px 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #333;
    text-align: center;
    z-index: 2;
    line-height: 1.3;
}

.budget-month-range {
    display: inline-block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #888;
}

.budget-group-subtotal-row td {
    background-color: #f8f8f8;
    font-weight: 600;
    color: #555;
}

.payroll-table td {
    border: 1px solid #eee;
    padding: 6px 10px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.payroll-table td.text-cell {
    text-align: left;
    white-space: normal;
}

.payroll-table td[contenteditable="true"] {
    cursor: text;
    background-color: #ffffff;
}

.payroll-table td[contenteditable="true"]:hover {
    background-color: #f5f9ff;
}

.payroll-table td[contenteditable="true"]:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
    background-color: #fffbe8;
}

.payroll-table td.computed-cell {
    background-color: #eceff3;
    font-weight: 600;
    color: #4a4a4a;
    cursor: not-allowed;
}

.payroll-table td.payroll-select-cell {
    padding: 4px 6px;
}

.payroll-rate-select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 11.5px;
    font-family: inherit;
    color: #1a1a1a;
    cursor: pointer;
}

.payroll-rate-select:hover {
    background-color: #f5f9ff;
}

.payroll-rate-label {
    font-size: 11.5px;
    color: #4a4a4a;
}

.payroll-section-row td {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 700;
    text-align: left;
    padding: 8px 10px;
    cursor: text;
}

.payroll-section-row td[contenteditable="true"] {
    background-color: #1a1a1a;
}

.payroll-section-row td[contenteditable="true"]:focus {
    background-color: #fffbe8;
    color: #1a1a1a;
}

.payroll-section-actions-cell {
    background-color: #1a1a1a;
    white-space: nowrap;
}

.payroll-mini-btn {
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    margin-right: 4px;
}

.payroll-mini-btn:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

.capex-group-mini-btn {
    background-color: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 5px;
    color: #333;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    padding: 4px 8px;
    cursor: pointer;
    margin-right: 6px;
}

.capex-group-mini-btn:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.payroll-subtotal-row td {
    background-color: #f2f2f2;
    font-weight: 700;
}

.payroll-total-row td {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 800;
    border-top: 2px solid #000;
}

.forecast-table {
    margin-bottom: 8px;
    font-size: 11.5px;
}

.forecast-table th,
.forecast-table td {
    white-space: nowrap;
}

.forecast-dash {
    color: #bbb;
    text-align: center;
}

.forecast-key-row td {
    background-color: #2c5f8a;
    color: #ffffff;
    font-weight: 800;
}

.forecast-start-year-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-right: 4px;
}

.payroll-delete-row-btn {
    background: transparent;
    border: none;
    color: #b3352f;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.payroll-delete-row-btn:hover {
    color: #7c231f;
}

.linen-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ratechart-year-editable {
    cursor: text;
    border-bottom: 2px dashed #ccc;
    padding: 0 2px;
}

.ratechart-year-editable:hover {
    border-bottom-color: #999;
}

.ratechart-year-editable:focus {
    outline: none;
    border-bottom-color: #1a1a1a;
    background-color: #fffbe8;
}

.linen-supplier-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.linen-supplier-input {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 12px;
    font-family: inherit;
    width: 200px;
}

.sheet-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
    font-size: 11px;
    color: #777;
}

.legend-chip {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #ddd;
}

.legend-chip.is-editable {
    background-color: #ffffff;
}

.legend-chip.is-computed {
    background-color: #eceff3;
    border-color: #ccc;
}

.roomcost-table th.bedtype-header {
    background-color: #eef4ff;
    color: #1a1a1a;
}

.roomcost-bedtype-name {
    display: block;
    outline: none;
}

.roomcost-bedtype-count {
    display: block;
    font-weight: 400;
    outline: none;
}

.roomcost-bedtype-delete {
    background: transparent;
    border: none;
    color: #b3352f;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.payroll-table th.payroll-benefit-header {
    background-color: #eef4ff;
    color: #1a1a1a;
}

.payroll-benefit-delete {
    background: transparent;
    border: none;
    color: #b3352f;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* Timeline / Gantt view */
.timeline-table th.day-header {
    background-color: #eef4ff;
    color: #1a1a1a;
    min-width: 22px;
    padding: 6px 2px;
    font-size: 9.5px;
}

.timeline-table td.timeline-bar-cell {
    padding: 0;
    min-width: 22px;
    background-color: #fafafa;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.timeline-table td.timeline-bar-cell.active {
    background-color: #e05a4e;
}

.timeline-status-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.timeline-status-chip.completed {
    background-color: #d7f4dd;
    color: #1e6b34;
}

.timeline-status-chip.in-progress {
    background-color: #dbe9ff;
    color: #1a4fa0;
}

.timeline-status-chip.delayed {
    background-color: #ffe3cc;
    color: #a05a12;
}

.timeline-status-chip.cancelled {
    background-color: #ededed;
    color: #888888;
    text-decoration: line-through;
}

.timeline-status-cell {
    padding: 4px 6px !important;
    min-width: 130px;
    white-space: normal !important;
}

.timeline-status-select {
    width: 100%;
    min-width: 118px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 5px 8px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    background-color: #ffffff;
    color: #444;
    cursor: pointer;
}

.timeline-status-select.completed {
    background-color: #d7f4dd;
    color: #1e6b34;
    border-color: #b7e3c2;
}

.timeline-status-select.in-progress {
    background-color: #dbe9ff;
    color: #1a4fa0;
    border-color: #b9d3ff;
}

.timeline-status-select.delayed {
    background-color: #ffe3cc;
    color: #a05a12;
    border-color: #ffce9e;
}

.timeline-status-select.cancelled {
    background-color: #ededed;
    color: #888888;
    border-color: #ddd;
}

.timeline-date-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 11px;
    font-family: inherit;
    background-color: #ffffff;
    color: #333;
}

.timeline-date-input:hover {
    border-color: #999;
}

/* CAPEX view — extends the payroll table styles with budget/actual column
   groups, department vs. sub-group headers, and a highlight row style. */
.capex-table th.budget-group {
    background-color: #eef4ff;
    color: #1a1a1a;
}

.capex-table th.actual-group {
    background-color: #eefaf0;
    color: #1a1a1a;
}

.capex-group-row td {
    background-color: #f5f5f5;
    font-weight: 700;
    font-style: italic;
    text-align: left;
    padding: 6px 10px;
    color: #333;
    cursor: text;
}

.capex-group-row td[contenteditable="true"] {
    background-color: #f5f5f5;
}

.capex-group-row td[contenteditable="true"]:focus {
    background-color: #fffbe8;
}

.capex-item-row.is-highlighted td:not(.computed-cell):not(.payroll-delete-row-btn-cell) {
    background-color: #fff9c4;
}

/* Hotel Requirements */
.hotelreq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.hotelreq-table > tbody > tr > td {
    border: 1px solid #eee;
    padding: 10px 14px;
    vertical-align: top;
}

.hotelreq-label-cell {
    width: 220px;
    font-weight: 700;
    background-color: #f8f9fa;
    color: #333;
}

.hotelreq-value-cell {
    color: #333;
}

.hotelreq-actions-cell {
    width: 40px;
    text-align: center;
}

/* Nested Hotel Bank Details table */
.hotelreq-bank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.hotelreq-bank-table td {
    border: 1px solid #eee;
    padding: 6px 10px;
}

.hotelreq-bank-table td.hotelreq-bank-label {
    width: 160px;
    font-weight: 600;
    color: #555;
    background-color: #fbfbfb;
}

/* Nested Rooms Details table */
.hotelreq-rooms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 8px;
}

.hotelreq-rooms-table th {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    padding: 6px 10px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #333;
    text-align: left;
}

.hotelreq-rooms-table td {
    border: 1px solid #eee;
    padding: 6px 10px;
}

.hotelreq-add-room-btn {
    background-color: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.hotelreq-add-room-btn:hover {
    background-color: #e2e2e2;
}

/* ---- Auth screen (Login / Register) ---- */
.auth-screen {
    position: fixed;
    inset: 0;
    background-color: #eef0f2;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-card {
    position: relative;
    width: 320px;
    background-color: #1e1e1e;
    border-radius: 20px;
    padding: 28px 26px 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.auth-back-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #3a3a3a;
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.auth-back-btn:hover {
    background-color: #4a4a4a;
}

.auth-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 18px;
}

.auth-logo-img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.auth-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.auth-input {
    background-color: #d9d9d9;
    border: none;
    border-radius: 20px;
    padding: 11px 16px;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

.auth-input::placeholder {
    color: #777;
}

select.auth-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.auth-done-btn {
    background-color: #8fb8f0;
    border: none;
    border-radius: 20px;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-done-btn:hover {
    background-color: #7aa8e8;
}

.auth-done-btn:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(26, 26, 26, 0.25);
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.auth-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: #cccccc;
    text-decoration: underline;
    cursor: pointer;
}

.auth-link:hover {
    color: #ffffff;
}

.auth-error {
    color: #ff8a80;
    font-size: 11.5px;
    margin: -4px 0 8px;
    min-height: 0;
}

.auth-error:empty {
    display: none;
}

.auth-success {
    color: #9be3a8;
    font-size: 11.5px;
    margin: -4px 0 8px;
}

.auth-success:empty {
    display: none;
}

/* ---- Top-bar profile menu ---- */
.user-profile {
    position: relative;
    cursor: pointer;
}

.user-profile-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 120px;
    z-index: 50;
    overflow: hidden;
}

.user-profile-menu.open {
    display: block;
}

.user-profile-menu button {
    width: 100%;
    background: none;
    border: none;
    padding: 10px 14px;
    text-align: left;
    font-size: 13px;
    color: #b3352f;
    cursor: pointer;
    font-family: inherit;
}

.user-profile-menu button:hover {
    background-color: #f7f7f7;
}

/* ---- Accounts tab ---- */
.accounts-card {
    overflow-y: auto;
}

.accounts-subsection {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.accounts-subsection:first-of-type {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.accounts-subsection h4 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.accounts-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.accounts-subheader h4 {
    margin-bottom: 0;
}

.accounts-add-hotel-row {
    display: flex;
    gap: 8px;
}

.accounts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accounts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
}

.accounts-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The name in the users list doubles as its own edit field — no pencil,
   no dialog, just type over it. Bordered on hover so it is discoverable
   without looking like an input all the time. */
.accounts-name-edit {
    border-radius: 5px;
    padding: 1px 4px;
    margin-left: -4px;
    cursor: text;
}

.accounts-name-edit:hover {
    background-color: #f0f0f0;
}

.accounts-name-edit:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
    background-color: #fffbe8;
}


.accounts-row-title {
    font-weight: 700;
    color: #1a1a1a;
}

.accounts-row-sub {
    color: #888;
    font-size: 11px;
}

.accounts-row-actions {
    display: flex;
    gap: 6px;
}

.accounts-btn {
    background-color: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

.accounts-btn:hover {
    background-color: #e2e2e2;
}

.accounts-btn.approve {
    background-color: #1e1e1e;
    color: #fff;
}

.accounts-btn.approve:hover {
    background-color: #333;
}

.accounts-btn.danger {
    background-color: transparent;
    color: #b3352f;
}

.accounts-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 8px;
}

.accounts-status-badge.approved {
    background-color: #d7f4dd;
    color: #1e6b34;
}

.accounts-status-badge.pending {
    background-color: #ffe3cc;
    color: #a05a12;
}

.accounts-status-badge.rejected {
    background-color: #f6d3d0;
    color: #a02a1e;
}

/* Sits next to the status badge rather than replacing it — an account can
   be approved and still unverified, and both facts matter. */
.accounts-status-badge.unverified {
    background-color: #f2e6f7;
    color: #6b3a85;
}

/* Appears inside the login error when an unverified address tries to sign
   in — a text-weight action, not a second primary button competing with
   Sign in. */
.auth-resend-btn {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: #3d5a80;
    text-decoration: underline;
    cursor: pointer;
}

.auth-resend-btn:disabled {
    color: #999;
    cursor: default;
    text-decoration: none;
}

.accounts-empty {
    color: #999;
    font-size: 12px;
    padding: 8px 0;
}

/* ---- App loading overlay (shown while data loads after login) ---- */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 900;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.app-loading-overlay.open {
    display: flex;
}

/* ---- Admin hotel switcher ---- */
.hotel-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 20px;
    padding: 6px 14px;
}

.hotel-switcher label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.hotel-switcher select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    padding: 2px 4px;
}

.eb-shared-icon {
    font-size: 9px;
}

.event-block.event-block-readonly {
    cursor: default;
    opacity: 0.92;
}

.event-block.event-block-google {
    box-shadow: 0 0 0 1.5px rgba(66, 133, 244, 0.6);
    cursor: pointer;
}

/* Signature block is built by JS only at print time and removed right
   after (see buildPrintSignatureBlock / printCurrentTab in script.js),
   but this keeps it invisible on the rare frame before the print dialog
   engages. */
.print-signature-block {
    display: none;
}

/* ---- Print / Save as PDF ---- */
/* The active tab's own display:flex/grid (set inline by JS) already means
   every OTHER tab is display:none and never prints — this only needs to
   hide the surrounding app chrome (sidebar, top bar, buttons) so what's
   left is just the title and the table. */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    /* The on-screen app is a fixed-viewport layout (body pinned to
       100vh with overflow:hidden, so each tab scrolls internally).
       That's exactly what was clipping printed content beyond one
       screen's worth — print needs the whole document to flow freely
       instead, so every container in the chain down to the table has
       to be unpinned, not just the innermost ones. */
    html, body {
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
    }

    .sidebar,
    .top-bar,
    .hotel-switcher,
    .auth-screen,
    .app-loading-overlay,
    .modal-overlay,
    .sheet-legend,
    .user-profile-menu,
    .tab-print-btn,
    .modal-btn,
    .payroll-mini-btn,
    .capex-group-mini-btn,
    .payroll-delete-row-btn,
    .roomcost-bedtype-delete,
    .payroll-benefit-delete,
    .swot-row-btn,
    .hotelreq-add-room-btn,
    .vendors-controls,
    .hk-add-box,
    .hk-controls,
    .cal-nav-btn {
        display: none !important;
    }

    .dashboard-container {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .main-content {
        display: block !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* IMPORTANT: no `display` override here. Each tab's section carries
       an inline display:none (inactive) or display:flex (active tab),
       set by JS — that's the only thing keeping other tabs out of the
       printout. Forcing `display` here with !important would win over
       that inline style and print every tab at once. Only the sizing
       properties below need overriding. */
    .payroll-view,
    .swot-view {
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .card {
        display: block !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .payroll-table-wrap,
    .swot-table-wrap,
    .payroll-card,
    .swot-card,
    .vision-card,
    .accounts-card {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    /* Staff Payroll: Citizenship and Age Group are there to drive the
       EPF/SOCSO/EIS auto-calculation, not something meant to leave the
       building on a printed sheet — hide both columns (header, every
       row, and the subtotal/total placeholder cells) only when printing.
       On-screen they stay visible and editable as normal. */
    .payroll-col-rategroup {
        display: none !important;
    }

    /* Agreed By / Witnessed By signature block — injected by JS
       (buildPrintSignatureBlock in script.js) as the last element of
       whichever tab is being printed, and removed again right after.
       Hidden by default below; this is the only place it's shown. */
    .print-signature-block {
        display: flex !important;
        justify-content: space-between;
        gap: 48px;
        margin-top: 40px;
        page-break-inside: avoid;
    }

    .print-signature-col {
        flex: 1;
    }

    .print-signature-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #1a1a1a;
        margin: 0 0 8px;
    }

    /* Blank space to sign in — no line or border, just room. */
    .print-signature-space {
        height: 60px;
    }

    /* Three lines per column now rather than two, so the gap between
       them comes down to keep the block off a second page. */
    .print-signature-text {
        font-size: 11px;
        color: #1a1a1a;
        margin: 0 0 14px;
    }
}
/* ---- Shared "Budget" color theme ----
   Palette (left to right in the reference swatch): 1 #3d5a80 (section),
   2 #98c1d9 (group), 3 #e0fbfc (group subtotal), 4 #ee6c4d (section
   subtotal), 5 #293241 (header row). Scoped to .payroll-table, which every
   spreadsheet-style tab shares (Staff Payroll, Room Cost, Rate Chart,
   CAPEX, OPEX, Budget, Linen, Timeline) — Hotel Information, Calendar,
   S.W.O.T, Holiday and Accounts use their own markup and never get this
   class, so they're untouched. */
.payroll-table thead th {
    background-color: #293241;
    color: #ffffff;
}

.payroll-table .payroll-section-row td,
.payroll-table .payroll-section-row td[contenteditable="true"],
.payroll-table .payroll-section-actions-cell {
    background-color: #3d5a80;
    color: #ffffff;
}

.payroll-table .capex-group-row td,
.payroll-table .capex-group-row td[contenteditable="true"] {
    background-color: #98c1d9;
    color: #1a1a1a;
}

.payroll-table .payroll-subtotal-row td {
    background-color: #ee6c4d;
    color: #ffffff;
}

/* Must come after .payroll-subtotal-row above — Budget's group subtotal
   rows carry both classes, and this needs to win the tie on equal
   specificity. */
.payroll-table .budget-group-subtotal-row td {
    background-color: #e0fbfc;
    color: #1a1a1a;
}

/* "+ Add ..." primary buttons across every themed tab — colored to match
   the section color (1) instead of the app-wide dark default. Accounts'
   "+ Add Hotel" is deliberately excluded. */
#payroll-add-benefit-btn,
#payroll-add-section-btn,
#roomcost-add-section-btn,
#ratechart-add-row-btn,
#capex-add-section-btn,
#opex-add-section-btn,
#budget-add-section-btn,
#linen-add-section-btn,
#timeline-add-section-btn {
    background: #3d5a80;
    color: #ffffff;
}

#payroll-add-benefit-btn:hover,
#payroll-add-section-btn:hover,
#roomcost-add-section-btn:hover,
#ratechart-add-row-btn:hover,
#capex-add-section-btn:hover,
#opex-add-section-btn:hover,
#budget-add-section-btn:hover,
#linen-add-section-btn:hover,
#timeline-add-section-btn:hover {
    background: #32496a;
}

.payroll-table .payroll-mini-btn {
    background-color: #ffffff;
    color: #3d5a80;
}

.payroll-table .payroll-mini-btn:hover {
    background-color: #e8eef5;
}

.payroll-table .capex-group-mini-btn {
    background-color: #ffffff;
    color: #1f4e6b;
}

.payroll-table .capex-group-mini-btn:hover {
    background-color: #eaf4fa;
}

/* =====================================================================
   Technical Standard tab — Hyatt Place ASPAC guest-journey reference.
   Deliberately its own blueprint-navy look (not the app's card/table
   theme) since this is a technical-drawing reference tool, not a data
   entry sheet. Everything is scoped under .ts-journey so it can't leak
   into or be affected by the rest of the dashboard's styles.
   ===================================================================== */
.ts-journey {
    --ts-navy-deep: #0a2238;
    --ts-navy: #0d2b45;
    --ts-line-bright: #d7ecf9;
    --ts-line-dim: #6fa8c9;
    --ts-line-faint: rgba(215, 236, 249, 0.16);
    --ts-amber: #e3a13c;
    --ts-amber-dim: rgba(227, 161, 60, 0.22);
    --ts-paper: #eef3f7;
    --ts-paper-line: #c4d3de;
    --ts-ink: #16232e;
    --ts-ink-soft: #4c6577;

    background: var(--ts-navy-deep);
    background-image:
        linear-gradient(var(--ts-line-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--ts-line-faint) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--ts-line-bright);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.ts-journey .card-title {
    color: var(--ts-line-bright);
}

.ts-doc-ref {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ts-line-dim);
    margin: 0 0 16px;
}

.ts-rail-wrap {
    margin-bottom: 20px;
}

.ts-rail {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
}

.ts-rail::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--ts-line-dim) 0 6px, transparent 6px 12px);
    transform: translateY(-50%);
    z-index: 0;
}

.ts-stop {
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    color: var(--ts-line-dim);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
}

.ts-stop .ts-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--ts-line-dim);
    background: var(--ts-navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--ts-line-dim);
    transition: all .15s ease;
}

.ts-stop .ts-label {
    color: var(--ts-line-dim);
    transition: color .15s ease;
}

.ts-stop.active .ts-mark {
    border-color: var(--ts-amber);
    background: var(--ts-amber-dim);
    color: var(--ts-amber);
}

.ts-stop.active .ts-label {
    color: var(--ts-line-bright);
    font-weight: 600;
}

.ts-stop:hover .ts-mark {
    border-color: var(--ts-line-bright);
    color: var(--ts-line-bright);
}

.ts-stage {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 980px) {
    .ts-stage {
        grid-template-columns: 1fr;
    }
}

.ts-scene-frame {
    background: var(--ts-navy);
    border: 1px solid var(--ts-line-faint);
    border-radius: 6px;
    padding: 18px 18px 14px;
}

.ts-scene-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.ts-scene-title h4 {
    font-family: 'Archivo', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ts-line-bright);
    margin: 0;
}

.ts-scale-note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--ts-line-dim);
}

.ts-scene-caption {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    color: var(--ts-line-dim);
    margin: 0 0 12px;
    max-width: 70ch;
}

.ts-journey svg.ts-scene {
    width: 100%;
    height: auto;
    display: block;
    background: var(--ts-navy-deep);
    border-radius: 4px;
}

.ts-journey .ts-hotspot {
    cursor: pointer;
}

.ts-journey .ts-hotspot .ts-callout-ring {
    fill: var(--ts-navy-deep);
    stroke: var(--ts-amber);
    stroke-width: 1.6;
    transition: fill .15s ease;
}

.ts-journey .ts-hotspot .ts-callout-num {
    fill: var(--ts-amber);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.ts-journey .ts-hotspot:hover .ts-callout-ring,
.ts-journey .ts-hotspot.selected .ts-callout-ring {
    fill: var(--ts-amber);
}

.ts-journey .ts-hotspot:hover .ts-callout-num,
.ts-journey .ts-hotspot.selected .ts-callout-num {
    fill: var(--ts-navy-deep);
}

.ts-journey .ts-leader {
    stroke: var(--ts-line-dim);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    opacity: 0.7;
}

.ts-journey .ts-hotspot-label {
    fill: var(--ts-line-bright);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    pointer-events: none;
}

.ts-journey .ts-hotspot:hover .ts-hotspot-label,
.ts-journey .ts-hotspot.selected .ts-hotspot-label {
    fill: var(--ts-amber);
}

.ts-nav-arrows {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.ts-nav-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    background: none;
    border: 1px solid var(--ts-line-dim);
    color: var(--ts-line-bright);
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.ts-nav-btn:hover {
    border-color: var(--ts-amber);
    color: var(--ts-amber);
}

.ts-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.ts-spec-panel {
    background: var(--ts-paper);
    color: var(--ts-ink);
    border-radius: 6px;
    min-height: 420px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ts-paper-line);
}

.ts-spec-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--ts-amber) 0 10px, transparent 10px 20px);
}

.ts-spec-inner {
    padding: 22px 20px 20px;
    font-family: 'IBM Plex Sans', sans-serif;
}

.ts-spec-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: var(--ts-ink-soft);
    padding-top: 10px;
}

.ts-spec-empty .ts-big-num {
    font-family: 'Archivo', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--ts-paper-line);
    line-height: 1;
}

.ts-spec-empty p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.ts-spec-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ts-ink-soft);
    margin: 0 0 4px;
}

.ts-spec-title {
    font-family: 'Archivo', sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ts-ink);
}

.ts-spec-pageref {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ts-ink-soft);
    border-bottom: 1px dashed var(--ts-paper-line);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.ts-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ts-spec-list li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.ts-spec-list li::before {
    content: "—";
    color: var(--ts-amber);
    font-weight: 700;
    flex-shrink: 0;
}

.ts-spec-refs {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--ts-paper-line);
    font-size: 11px;
    color: var(--ts-ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.7;
}

.ts-footnote {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--ts-line-dim);
    opacity: 0.8;
    margin: 16px 0 0;
}

/* =====================================================================
   Vision Impossible tab — the group's own 2026 scorecard. Reuses the
   .payroll-table skin every spreadsheet tab shares (section rows in
   #3d5a80, group rows in #98c1d9) so it reads as part of the same
   family; the only new colour work here is the traffic-light and
   escalation states, which carry information the shared skin has no
   equivalent for.
   ===================================================================== */

.vision-summary {
    margin-top: 4px;
}

.vision-summary-body {
    margin-top: 8px;
}

.vision-headline {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    padding: 8px 10px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #fbfbfb;
}

.vision-headline:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
    background-color: #fffbe8;
}

.vision-legend-note {
    color: #999;
}

/* ---- Task table ---- */

.vision-table {
    min-width: 1320px;
}

/* Search bar above the table. Highlighting, not filtering, so the count
   is the only feedback that the search did anything. */
/* Count and share in one cell: the share is the same number read a
   second way, so it sits with it rather than in a column of its own. */
.vision-dash-table td.vision-done-cell {
    white-space: nowrap;
}

.vision-done-pct {
    color: #8a8a8a;
    font-weight: 400;
}


.vision-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    flex-wrap: wrap;
}

/* The icon sits inside the field, so the field is what flexes and the
   input fills it. */
.vision-search-field {
    position: relative;
    flex: 0 1 280px;
    display: block;
}

.vision-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #a0a0a0;
    pointer-events: none;
}

/* Sits inside the field on the right, so clearing is where the text is
   rather than a button further along the bar. */
.vision-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: #8a8a8a;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.vision-search-clear:hover {
    background-color: #ececec;
    color: #1a1a1a;
}

.vision-search-input {
    width: 100%;
    padding: 7px 30px 7px 32px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1a1a;
    background-color: #ffffff;
}

.vision-search-input:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
}

.vision-search-count {
    font-size: 12px;
    color: #777;
}

/* Every cell in a hit row takes the tint, including the ones carrying a
   status colour of their own — a row half-highlighted reads as an error. */
.vision-table tr.is-hit > td {
    background-color: #fff6cc;
}

/* The two heading rows already have strong backgrounds, so a tint would
   not show. They get a band down the left edge instead. */
.vision-table tr.vision-stream-row.is-hit > td:first-child,
.vision-table tr.vision-pillar-row.is-hit > td:first-child {
    box-shadow: inset 4px 0 0 #e0b23c;
}

.vision-table tr.vision-stream-row.is-hit > td,
.vision-table tr.vision-pillar-row.is-hit > td {
    background-color: inherit;
}

/* Shift+Enter puts real newlines in these fields, and pre-wrap is what
   makes them show up again after the cell is saved and re-rendered. */
.vision-title-cell span[contenteditable="true"],
.vision-table td.vision-figure-cell,
.vision-task-note {
    white-space: pre-wrap;
}


.vision-table td.vision-title-cell {
    min-width: 340px;
    max-width: 460px;
    white-space: normal;
    line-height: 1.45;
}

.vision-title-cell span[contenteditable="true"] {
    display: block;
    padding: 2px 3px;
    border-radius: 4px;
}

.vision-title-cell span[contenteditable="true"]:hover {
    background-color: #f5f9ff;
}

.vision-title-cell span[contenteditable="true"]:focus {
    outline: 2px solid #1e1e1e;
    background-color: #fffbe8;
}

.vision-task-note {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    color: #8a8a8a;
    font-style: italic;
}

/* A <td> given `display: flex` stops being a table cell, which makes the
   browser drop its colspan and shove the next cell into column 2 — that
   put the delete button under Goal. The cell stays a table cell; the flex
   row is an inner div. */
.vision-stream-row td.text-cell,
.vision-pillar-row td.text-cell {
    white-space: normal;
}

.vision-row-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vision-stream-note {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

.vision-stream-count {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.18);
}

.vision-pillar-row .vision-row-inner {
    font-weight: 600;
}

.vision-empty-cell {
    color: #aaa;
    font-size: 11.5px;
    font-style: italic;
}

/* Columns whose contents sit in the middle of the cell — the heading
   goes with them. */
.vision-table th.vision-col-center {
    text-align: center;
}

.vision-date-cell {
    padding: 4px 6px;
    text-align: center;
}

/* The formatted date is ours; the native input is stretched over it at
   zero opacity so the browser still owns the picker and the change
   event, without also owning the way the date reads. */
.vision-date-field {
    position: relative;
    display: block;
    min-width: 96px;
}

.vision-date-text {
    display: block;
    padding: 4px 6px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    font-size: 11.5px;
    color: #1a1a1a;
    background-color: #ffffff;
    text-align: center;
}

.vision-date-text.is-empty {
    color: #b0b0b0;
}

.vision-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
}

.vision-date-input:focus + .vision-date-text,
.vision-date-field:focus-within .vision-date-text {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
    background-color: #fffbe8;
}

/* Traffic light — the select itself is tinted so a row's state is
   readable while scanning, without adding a separate status chip
   column. */
.vision-status-select {
    min-width: 118px;
    font-weight: 600;
    text-align: center;
    text-align-last: center;
}

.vision-status-select.vision-status-done {
    background-color: #dff3e4;
    border-color: #a8d8b8;
    color: #1f6b3a;
}

.vision-status-select.vision-status-working {
    background-color: #fdf1cf;
    border-color: #e8cf87;
    color: #85630c;
}

.vision-status-select.vision-status-stuck {
    background-color: #fadcd7;
    border-color: #eeb0a5;
    color: #a02a1e;
}


/* Blank is the grey state now that "Not Started" is gone — it reads as a
   real "nobody has said yet" rather than an empty control. */
.vision-status-select.vision-status-blank {
    background-color: #eceff3;
    border-color: #d3d8de;
    color: #5a626c;
}

/* Escalation columns are derived, never typed into — the grey matches
   .computed-cell elsewhere so it reads as "the app worked this out".
   They stay empty until a stage is actually reached, at which point one
   dot appears. Three narrow columns of dots read down a long table far
   better than three columns of dates. */
.vision-esc-cell {
    background-color: #f4f6f8;
    font-size: 11px;
    min-width: 42px;
    text-align: center;
    vertical-align: middle;
}

.vision-esc-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d64533;
    box-shadow: 0 0 0 2px rgba(214, 69, 51, 0.18);
}

/* ---- Module Access grid (Accounts tab, system owner only) ---- */

.accounts-hint {
    color: #888;
    font-size: 11.5px;
    margin: -4px 0 10px;
}

/* Role picker in the user list — sits beside Delete in the actions column,
   so it needs to read as a control at the same weight as that button. */
.accounts-role-select {
    padding: 5px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
}

.accounts-role-select:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
}

/* Your own account and the system owner's can't be changed here, so the
   role shows as plain text rather than a control that would only error. */
.accounts-role-static {
    padding: 5px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #999;
}

.accounts-module-row {
    align-items: flex-start;
}

.accounts-module-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.accounts-module-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
}

/* Department Access uses the same toggles as the module grid, but six
   positions x six departments stacked in a column would run off the
   screen — so that grid wraps into rows instead. */

.accounts-module-toggles.is-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 20px;
    max-width: 760px;
}

.accounts-module-toggles.is-grid .accounts-module-toggle {
    min-width: 150px;
}

/* Position picker in the user list, beside the role dropdown. */
.accounts-position-select {
    padding: 5px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    max-width: 160px;
}

.accounts-position-select:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
}

/* =====================================================================
   Department sub-tabs — the strip of buttons a department tab shows
   above its own panels (Front Office: Forecast / VIP). Kept generic so
   the other five departments can reuse it as they get built out.
   ===================================================================== */
/* The strips are kept in the markup but not shown: parent and child tabs
   are navigated from the sidebar's collapsible groups instead, so a
   second row of the same buttons inside the card would be one control
   too many. Unhide this to put them back. */
.subtab-strip {
    display: none;
    gap: 6px;
    margin: 4px 0 14px;
    border-bottom: 1px solid #eaeaea;
    flex-shrink: 0;
}

.subtab-btn {
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
}

.subtab-btn:hover {
    color: #3d5a80;
}

.subtab-btn.active {
    color: #293241;
    border-bottom-color: #ee6c4d;
}

.subtab-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---- Front Office ---- */

.fo-controls {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.fo-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fo-control label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.fo-week-nav {
    flex-direction: row;
    gap: 8px;
}

/* The metric names run down the left of both forecast tables, so that
   column stays put while the week scrolls sideways. */
.fo-table .fo-metric-col,
.fo-table td.fo-row-label {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 190px;
    text-align: left;
}

.fo-table td.fo-row-label {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.fo-table .fo-col-date {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #cfd6e0;
}

.fo-summary-wrap {
    margin-top: 18px;
    flex: none;
}

.fo-table td.computed-cell.is-negative {
    color: #a02a1e;
}

.fo-table td.computed-cell.is-positive {
    color: #2f6b3f;
}

.fo-vip-block {
    margin-bottom: 26px;
}

.fo-vip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fo-vip-header h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #293241;
}

.fo-vip-add-btn {
    background-color: #3d5a80;
}

.fo-vip-add-btn:hover {
    background-color: #32496a;
}

.fo-table td.fo-vip-empty {
    padding: 18px;
    color: #aaa;
    font-style: italic;
}

.fo-table .fo-vip-actions-col {
    width: 90px;
}

/* ---- Sales & Marketing ---- */

.sm-controls {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sm-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-control label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.sm-table .sm-no-col {
    width: 44px;
}

.sm-table .sm-name-col {
    min-width: 210px;
    text-align: left;
}

.sm-table td.text-cell {
    min-width: 160px;
}

.sm-table .sm-actions-col,
.sm-table td.sm-actions {
    width: 90px;
}

/* The Actual / Budget and MTD / YTD banners sit above their own column
   headings, so the divider between the two halves needs to read at a
   glance — otherwise a budget figure looks like an actual one. */
.sm-table thead tr:first-child th + th {
    border-left: 2px solid #ffffff;
}

.sm-table td.sm-empty {
    padding: 18px;
    color: #aaa;
    font-style: italic;
    text-align: center;
}

.sm-social-table .sm-metric-col {
    min-width: 170px;
    text-align: left;
}

.sm-social-table td.sm-metric-col {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.sm-social-table th {
    min-width: 150px;
}

.sm-platform-name {
    display: inline-block;
    padding: 1px 4px;
    min-width: 40px;
    border-radius: 4px;
    cursor: text;
}

.sm-platform-name:focus {
    outline: 2px solid #ffffff;
    background-color: #3d5a80;
}

.sm-platform-remove {
    margin-left: 6px;
    border: none;
    background: none;
    color: #b9c4d2;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.sm-platform-remove:hover {
    color: #ffffff;
}

/* S.W.O.T moved inside Sales & Marketing, where it sits in a flex panel
   rather than in a view section of its own. */
.subtab-panel > .swot-card {
    flex: 1;
    min-height: 0;
    box-shadow: none;
    padding: 0;
}

/* =====================================================================
   Vendors & Partners — the hotel's contact book, grouped by trade.
   Its own top-level tab, sitting between Hotel Information and Calendar.
   ===================================================================== */
.vendors-controls {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.vendors-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vendors-control label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.vendors-control input {
    min-width: 300px;
}

.vendors-table .vendors-no-col {
    width: 44px;
}

/* Company, email and remarks carry the long values, so they get the room
   and the left alignment that reads properly at a glance. */
.vendors-table td.text-cell {
    min-width: 190px;
}

.vendors-table .vendors-actions-col,
.vendors-table td.vendors-actions {
    width: 90px;
}

/* The trade heading row: name on the left, count and its two buttons on
   the right, so adding a vendor is always next to the trade it lands in. */
.vendors-table td.vendors-group-actions {
    text-align: right;
    white-space: nowrap;
}

.vendors-table .vendors-count {
    margin-right: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.75;
}

.vendors-table td.vendors-empty {
    padding: 14px 18px;
    color: #aaa;
    font-style: italic;
    text-align: center;
}

/* =====================================================================
   Housekeeping — the room master. The status board and release form
   that come next will add to this section rather than start a new one.
   ===================================================================== */
.hk-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.hk-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hk-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #f0f3f7;
    font-size: 11.5px;
    font-weight: 600;
    color: #4a4a4a;
}

.hk-chip b {
    margin-left: 4px;
    color: #293241;
}

.hk-chip.is-strong {
    background-color: #3d5a80;
    color: #ffffff;
}

.hk-chip.is-strong b {
    color: #ffffff;
}

.hk-chip.is-muted {
    background-color: #f7f7f7;
    color: #888;
}

/* The bulk-add row is boxed off because it does something different in
   kind from the filters below it — one writes rooms, the other only
   changes what you are looking at, and they must not be confusable. */
.hk-add-box {
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px dashed #cfd8e3;
    border-radius: 10px;
    background-color: #fafbfd;
}

.hk-add-label {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.hk-add-fields,
.hk-controls {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.hk-controls {
    margin-bottom: 12px;
}

.hk-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hk-control label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.hk-add-fields .linen-supplier-input {
    width: 110px;
}

/* Sits under a field rather than inside it as placeholder text, because
   a greyed-out value inside a box reads as one already filled in. */
.field-hint {
    margin-top: 3px;
    font-size: 10px;
    color: #a0a0a0;
}

.hk-types-wrap {
    overflow-x: auto;
}

/* The rooms table shares its card with the add box, the filters and the
   room-type table below, so the flex:1 that lets a table fill its card
   elsewhere squeezed this one down to three rows. It sizes to a
   readable minimum instead, and the card scrolls when the two tables
   together outgrow it. */
#hk-rooms-wrap {
    min-height: 300px;
}

#view-housekeeping .payroll-card {
    overflow-y: auto;
}

.hk-rooms-table .hk-room-col {
    width: 90px;
    font-weight: 700;
}

.hk-rooms-table .hk-floor-col {
    width: 70px;
}

.hk-rooms-table .hk-service-col {
    width: 120px;
}

.hk-rooms-table td.text-cell,
.hk-types-table td.text-cell {
    min-width: 180px;
}

.hk-rooms-table .hk-actions-col,
.hk-types-table .hk-actions-col,
.hk-rooms-table td.hk-actions,
.hk-types-table td.hk-actions {
    width: 90px;
}

/* A room out of inventory is still on the list — it just isn't sellable.
   Dimming it says that without hiding it. */
.hk-rooms-table tr.hk-row-out td {
    opacity: 0.55;
}

.hk-count {
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 600;
    opacity: 0.75;
}

.hk-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    cursor: pointer;
}

.hk-switch input[disabled] {
    cursor: default;
}

.hk-subsection {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #eaeaea;
}

.hk-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.hk-subsection-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #293241;
}

.hk-empty {
    padding: 22px;
    color: #aaa;
    font-style: italic;
    text-align: center;
}

/* =====================================================================
   Vision Impossible — Dashboard sub-tab. Read-only analytics counted off
   the Task table, so nothing here is an input: no editable cells, no
   focus states, no hover affordances that suggest otherwise.
   ===================================================================== */
.vision-dashboard {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.vision-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.vision-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid #eaeaea;
    border-left: 3px solid #98c1d9;
    border-radius: 10px;
    background-color: #ffffff;
}

.vision-stat.is-done { border-left-color: #4a9d6a; }
.vision-stat.is-working { border-left-color: #e0b23c; }
.vision-stat.is-stuck { border-left-color: #d0604c; }
.vision-stat.is-overdue { border-left-color: #a02a1e; }
.vision-stat.is-soon { border-left-color: #6f9fc4; }

.vision-stat-value {
    font-size: 34px;
    font-weight: 700;
    color: #293241;
    line-height: 1.05;
}

/* The number carries the tile's colour, not just the edge — a row of
   figures is read at a glance and the 3px border was doing that work on
   its own. Darker than the border in each case: these are the same hues
   at text weight, where a border-strength colour would be hard to read. */
.vision-stat.is-done .vision-stat-value { color: #2f7d52; }
.vision-stat.is-working .vision-stat-value { color: #a8791d; }
.vision-stat.is-stuck .vision-stat-value { color: #c0392b; }
.vision-stat.is-overdue .vision-stat-value { color: #a02a1e; }
.vision-stat.is-soon .vision-stat-value { color: #2f6f9f; }

/* Last, so it wins over the tone colours above. */
.vision-stat.is-zero .vision-stat-value { color: #9aa1aa; }

.vision-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.vision-stat-sub {
    font-size: 11px;
    color: #aaa;
}

/* Two equal columns: the status mix and escalation cards sit side by
   side and stretch to the same height rather than each shrinking to its
   own content, which left one visibly shorter than the other. */
.vision-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 14px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .vision-dash-grid {
        grid-template-columns: 1fr;
    }
}

.vision-dash-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    background-color: #ffffff;
}

.vision-dash-card.is-wide {
    grid-column: 1 / -1;
}

.vision-dash-card h4 {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #293241;
}

.vision-dash-note,
.vision-dash-footnote {
    font-size: 11.5px;
    line-height: 1.5;
    color: #999;
}

.vision-dash-footnote {
    margin-top: auto;
    padding-top: 10px;
}

.vision-dash-empty {
    padding: 40px;
    text-align: center;
    color: #aaa;
    font-style: italic;
}

/* Status mix */
.vision-donut-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.vision-donut {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vision-donut-hole {
    position: absolute;
    inset: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #ffffff;
}

.vision-donut-value {
    font-size: 20px;
    font-weight: 700;
    color: #293241;
}

.vision-donut-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
}

.vision-legend-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    color: #555;
}

.vision-legend-list li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.vision-legend-list strong {
    color: #293241;
}

.vision-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vision-legend-pct {
    color: #aaa;
    font-size: 11px;
}

/* Escalation stages */
.vision-stage-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
}

.vision-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px;
    border-radius: 10px;
    background-color: #fdf1cf;
    text-align: center;
}

.vision-stage.is-last {
    background-color: #fadcd7;
}

.vision-stage-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #293241;
}

.vision-stage-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #85630c;
}

.vision-stage.is-last .vision-stage-label {
    color: #a02a1e;
}

/* Breakdown tables */
.vision-dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.vision-dash-table th {
    padding: 6px 8px;
    border-bottom: 1px solid #eaeaea;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
    text-align: center;
}

.vision-dash-table th:first-child,
.vision-dash-table td.text-cell {
    text-align: left;
}

.vision-dash-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #f4f4f4;
    text-align: center;
    color: #444;
}

.vision-dash-table td.vision-cell-alert {
    color: #a02a1e;
    font-weight: 700;
}

.vision-progress-cell {
    width: 40%;
    min-width: 140px;
}

.vision-bar {
    display: flex;
    height: 9px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f0f2f5;
}

.vision-bar.is-empty {
    background-color: #f0f2f5;
}

.vision-bar-seg {
    display: block;
    height: 100%;
}

/* Due-by-month bars */
.vision-months {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 6px;
}

.vision-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vision-month-bars {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.vision-month-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 2px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.vision-month-seg {
    display: block;
    width: 100%;
}

.vision-month-seg.is-open { background-color: #ee6c4d; }
.vision-month-seg.is-done { background-color: #4a9d6a; }

.vision-month-count {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    min-height: 14px;
}

.vision-month-label {
    font-size: 10.5px;
    color: #999;
}

/* Standing text inside a department tab until its sub-tabs are built. */
.dept-placeholder {
    padding: 28px 4px;
    color: #999;
    font-size: 13px;
}

.accounts-module-toggle input {
    width: 15px;
    height: 15px;
    accent-color: #3d5a80;
    cursor: pointer;
}
/* ---- Module access banner ---- */
/* Sits between the top bar and whichever tab is open. Only the system
   owner ever sees it, on tabs the viewed hotel has switched off. */
.module-access-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background-color: #fff7e6;
    border: 1px solid #f0c674;
    border-left: 4px solid #d98e04;
    border-radius: 10px;
    color: #6b4a00;
    font-size: 13px;
    line-height: 1.45;
    flex-shrink: 0;
}

.module-access-banner-icon {
    font-size: 16px;
    line-height: 1;
}

.module-access-banner span:nth-of-type(2) {
    flex: 1;
}

.module-access-banner-btn {
    padding: 7px 14px;
    background-color: #d98e04;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.module-access-banner-btn:hover {
    background-color: #b87703;
}

/* Nav buttons for modules the viewed hotel doesn't have. Owner-only:
   for everyone else these buttons are hidden outright. */
.nav-btn.module-off {
    opacity: 0.55;
}

.nav-btn.module-off::after {
    content: "off";
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.16);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Vision Impossible: print sizing ---- */
/* Thirteen columns don't fit A4 landscape at screen sizes. The table's
   1180px min-width is what pushes the last columns off the page, so it
   comes off here and the layout switches to fixed percentage widths —
   that way the browser can't widen a column to suit its content and
   spill the rest over the edge. Everything else is a font and padding
   reduction to match. */
@media print {
    .module-access-banner {
        display: none !important;
    }

    .vision-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 8px !important;
    }

    .vision-table th,
    .vision-table td {
        padding: 3px 4px !important;
        font-size: 8px !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    .vision-table th {
        font-size: 7px !important;
        letter-spacing: 0 !important;
    }

    .vision-table td.vision-title-cell {
        min-width: 0 !important;
        max-width: none !important;
        line-height: 1.3 !important;
    }

    .vision-task-note {
        font-size: 7px !important;
    }

    /* The date input and status dropdown are form controls on screen.
       In print they only need to read as text, so the chrome comes off
       and the cell keeps its width. */
    .vision-date-field {
        min-width: 0 !important;
    }

    .vision-date-text {
        font-size: 8px !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    .vision-date-input {
        display: none !important;
    }

    .vision-esc-dot {
        width: 7px !important;
        height: 7px !important;
        box-shadow: none !important;
        /* Browsers strip background colours in print unless told not to;
           the dot is the whole content of the cell, so it has to stay. */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .vision-audit-select,
    .vision-audit-chip {
        min-width: 0 !important;
        font-size: 7.5px !important;
        padding: 1px 2px !important;
        border: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        text-align: center !important;
    }

    .vision-owner-input {
        font-size: 8px !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        width: 100% !important;
    }

    .vision-status-select {
        font-size: 7.5px !important;
        padding: 1px 2px !important;
        border: none !important;
        width: 100% !important;
        min-width: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        text-align: center !important;
    }

    .vision-esc-cell {
        font-size: 7px !important;
        min-width: 0 !important;
    }

    .vision-headline {
        font-size: 10px !important;
    }

    /* Column widths, in the order the header row declares them: Task,
       Owner, Goal, Actual, Due Date, Traffic Light, 1st, 2nd, 3rd,
       Proof, Audit, then the delete column, which has no printed content
       and takes no width. Task takes most of what Bottleneck gave back. */
    .vision-table th:nth-child(1),  .vision-table td:nth-child(1)  { width: 27% !important; }
    .vision-table th:nth-child(2),  .vision-table td:nth-child(2)  { width: 11% !important; }
    .vision-table th:nth-child(3),  .vision-table td:nth-child(3)  { width: 9% !important; }
    .vision-table th:nth-child(4),  .vision-table td:nth-child(4)  { width: 9% !important; }
    .vision-table th:nth-child(5),  .vision-table td:nth-child(5)  { width: 9% !important; }
    .vision-table th:nth-child(6),  .vision-table td:nth-child(6)  { width: 10% !important; }
    .vision-table th:nth-child(7),  .vision-table td:nth-child(7)  { width: 3.5% !important; }
    .vision-table th:nth-child(8),  .vision-table td:nth-child(8)  { width: 3.5% !important; }
    .vision-table th:nth-child(9),  .vision-table td:nth-child(9)  { width: 3.5% !important; }
    .vision-table th:nth-child(10), .vision-table td:nth-child(10) { width: 7% !important; }
    .vision-table th:nth-child(11), .vision-table td:nth-child(11) { width: 7% !important; }
    .vision-table th:nth-child(12), .vision-table td:nth-child(12) { width: 0 !important; padding: 0 !important; }

    /* Stream and section header rows span the table, so the widths above
       would chop them up. They opt out. */
    .vision-table td[colspan] {
        width: auto !important;
    }
}

/* Hotel picker on Accounts rows — system owner only, for correcting a
   user who registered under the wrong property. Wider than the role
   dropdown next to it because hotel names run long. */
.accounts-hotel-select {
    padding: 5px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    max-width: 190px;
}

.accounts-hotel-select:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
}

/* ---- Vision Impossible: audit, proof and read-only cells ---- */
.vision-audit-select.vision-audit-pass,
.vision-audit-chip.vision-audit-pass {
    background-color: #e6f5ea;
    border-color: #b5dfc2;
    color: #1d6b35;
}

.vision-audit-select.vision-audit-fail,
.vision-audit-chip.vision-audit-fail {
    background-color: #fdeaea;
    border-color: #f0bcbc;
    color: #a12222;
}

.vision-audit-select.vision-audit-blank,
.vision-audit-chip.vision-audit-blank {
    background-color: #eceff3;
    border-color: #d3d8de;
    color: #5a626c;
}

/* Wide enough for "Pass" and "Fail" plus the dropdown arrow. Without a
   floor the column collapses to the header width and clips the value to
   its first letter. */
.vision-audit-select {
    min-width: 82px;
    text-align: center;
    text-align-last: center;
}

/* The read-only chip is inline, so centring it is the cell's job. */
.vision-table td.payroll-select-cell,
.vision-table td.vision-readonly {
    text-align: center;
}

/* Goal and Actual are read against each other, so they hold the same
   width whatever is in them — a wide Goal beside a narrow Actual made two
   figures that mean the same thing look unrelated. */
.vision-table td.vision-figure-cell {
    min-width: 110px;
    width: 110px;
}

.vision-table td.vision-owner-cell {
    padding: 4px 6px;
    min-width: 150px;
}

/* An input with a datalist: the hotel's registered staff drop down from
   it, and anything else can still be typed straight in. */
.vision-owner-input {
    width: 100%;
    padding: 4px 6px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    font-family: inherit;
    font-size: 12px;
    color: #1a1a1a;
}

.vision-owner-input:hover {
    border-color: #d8d8d8;
    background-color: #ffffff;
}

.vision-owner-input:focus {
    outline: 2px solid #1e1e1e;
    outline-offset: -2px;
    background-color: #fffbe8;
}

.vision-owner-input::placeholder {
    color: #c0c0c0;
}

.vision-audit-chip {
    display: inline-block;
    min-width: 52px;
    text-align: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* Fields a staff member can see but not set — due date, audit result and
   the Black Arrow headline. Shown as plain text rather than a disabled
   control, so it reads as information rather than a locked box. */
.vision-readonly {
    color: #444444;
    cursor: default;
}

.vision-proof-cell {
    min-width: 150px;
}

.vision-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    margin: 0 4px 3px 0;
    padding: 2px 4px 2px 7px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background-color: #f6f8fa;
    font-size: 11px;
}

.vision-proof-open {
    max-width: 110px;
    overflow: hidden;
    border: none;
    background: none;
    padding: 0;
    color: #1a4f8a;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.vision-proof-open:hover {
    text-decoration: underline;
}

/* Preview modal. Wider and taller than the app's other dialogs because
   it holds a document rather than a sentence. */
.vision-proof-box {
    display: flex;
    flex-direction: column;
    width: min(1000px, 92vw);
    max-width: none;
    height: min(760px, 88vh);
    padding: 0;
    overflow: hidden;
}

.vision-proof-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid #ececec;
    flex-shrink: 0;
}

.vision-proof-modal-head h3 {
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vision-proof-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* The Drive link is an anchor styled as a button, so it needs the bits
   .modal-btn assumes a <button> already has. */
#vision-proof-modal-open {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.vision-proof-frame-wrap {
    flex: 1;
    min-height: 0;
    background-color: #f4f4f4;
}

#vision-proof-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.vision-proof-remove {
    border: none;
    background: none;
    color: #999999;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.vision-proof-remove:hover {
    color: #a12222;
}

.vision-proof-add {
    padding: 3px 9px;
    border: 1px dashed #c9ced4;
    border-radius: 6px;
    background-color: transparent;
    color: #555555;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.vision-proof-add:hover:not(:disabled) {
    border-style: solid;
    border-color: #1e1e1e;
    color: #1a1a1a;
}

/* Uploading. The label stays put and a spinner appears beside it, so the
   button keeps its width and the row doesn't shift mid-upload. */
.vision-proof-add.is-busy {
    color: #888888;
    cursor: default;
}

.vision-proof-add.is-busy::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border: 1.5px solid #c9ced4;
    border-top-color: #555555;
    border-radius: 50%;
    vertical-align: -1px;
    animation: vision-proof-spin 0.7s linear infinite;
}

@keyframes vision-proof-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .vision-proof-add.is-busy::before {
        animation-duration: 2.4s;
    }
}

@media print {
    /* Paper can't be clicked, so the attach button and the remove crosses
       go; the file names stay, since knowing proof exists is the point. */
    .vision-proof-add,
    .vision-proof-remove,
    .vision-search-bar {
        display: none !important;
    }

    /* The print size is set on the table's cells, and these two carry a
       font-size of their own, so the file name kept its screen size while
       everything around it shrank. They have to be told separately. */
    .vision-proof-open {
        color: #1a1a1a !important;
        font-size: 8px !important;
        max-width: 100% !important;
    }

    .vision-proof-item {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 8px !important;
        max-width: 100% !important;
    }
}

/* ---- Toolbar buttons ---- */
/* Every sheet header carries the same three controls — zoom, PDF, and the
   tab's own add button — and they were three different heights in three
   different colours because only the last one had ever been styled. These
   two now take their geometry from .modal-btn and the grey fill of its
   secondary variant, so a header reads as one set of controls while the
   dark button stays the one that adds something. */
.tab-print-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: #f0f0f0;
    color: #333333;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.tab-print-btn:hover {
    background: #e4e4e4;
}

/* ---- Table size control ---- */
/* Injected into each sheet's header by setupTableZoomControls(). The
   minus and plus step through fixed sizes; the percentage between them
   resets to 100%. */
.table-zoom {
    display: inline-flex;
    align-items: stretch;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f0f0f0;
    flex-shrink: 0;
}

.table-zoom-btn {
    width: 30px;
    border: none;
    background-color: transparent;
    color: #333333;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.table-zoom-btn:hover:not(:disabled) {
    background-color: #e4e4e4;
}

.table-zoom-btn:disabled {
    color: #b6b6b6;
    cursor: default;
}

/* The dividers are a shade of the same background rather than a border
   colour of their own, so the three parts read as one control. */
.table-zoom-level {
    min-width: 52px;
    padding: 8px 4px;
    border: none;
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    background-color: transparent;
    color: #333333;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    cursor: pointer;
}

.table-zoom-level:hover {
    background-color: #e4e4e4;
}

@media print {
    /* Each sheet has its own print sizing, so a screen setting of 60% or
       150% must not follow the table onto paper. */
    .table-zoom {
        display: none !important;
    }

    .payroll-table-wrap table {
        zoom: 1 !important;
    }
}

/* ---- Escalation templates (Accounts tab) ---- */
.vision-template-row {
    display: block;
    padding: 14px 16px;
}

.vision-template-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.vision-template-name {
    flex: 1;
    max-width: 320px;
    font-weight: 600;
}

.vision-template-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.vision-template-level {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 190px;
}

.vision-template-level span {
    color: #666666;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.vision-template-owners {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
}

/* An owner already covered by another template. Shown rather than hidden,
   so it's clear why they can't be ticked here. */
.accounts-module-toggle.is-claimed {
    opacity: 0.45;
    cursor: not-allowed;
}