:root {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #172033;
    background: #f4f6fa;

    --color-primary: #315efb;
    --color-primary-dark: #2448c9;
    --color-text: #172033;
    --color-muted: #667085;
    --color-border: #dfe4ec;
    --color-border-input: #cbd3df;
    --color-surface: #ffffff;
    --color-background: #f4f6fa;
    --color-success: #176b3a;
    --color-success-bg: #eaf8f0;
    --color-error: #9b1c1c;
    --color-error-bg: #feecec;
    --color-info: #2453a6;
    --color-info-bg: #edf4ff;
    --shadow-card: 0 12px 40px rgb(30 45 75 / 7%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--color-text);
    background: var(--color-background);
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(255 255 255 / 95%);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.header-content {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-content nav {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.brand {
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.inline-form {
    display: inline;
}

.link-button {
    margin-left: 8px;
    padding: 6px 0;
    border: 0;
    color: var(--color-primary);
    background: transparent;
    font-weight: 600;
    cursor: pointer;
}

.link-button:hover {
    color: var(--color-primary-dark);
}

/* Form controls */

label {
    display: block;
    margin: 18px 0 8px;
    color: var(--color-text);
    font-weight: 650;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: 8px;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

input,
select {
    min-height: 44px;
}

textarea {
    min-height: 110px;
    line-height: 1.5;
    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #aeb8c8;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(49 94 251 / 12%);
}

input::placeholder,
textarea::placeholder {
    color: #98a2b3;
}

/* Buttons */

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.primary-button {
    border: 1px solid var(--color-primary);
    color: #ffffff;
    background: var(--color-primary);
}

.primary-button:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
    box-shadow: 0 8px 20px rgb(49 94 251 / 18%);
    transform: translateY(-1px);
}

.secondary-button {
    border: 1px solid var(--color-border-input);
    color: var(--color-text);
    background: var(--color-surface);
}

.secondary-button:hover {
    border-color: #aeb8c8;
    background: #f8f9fc;
    transform: translateY(-1px);
}

button.primary-button {
    width: auto;
}

/* Alerts */

.alert {
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    line-height: 1.5;
}

.alert strong {
    display: block;
}

.alert ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.alert-error {
    color: var(--color-error);
    background: var(--color-error-bg);
    border-color: #f6c9c9;
}

.alert-success {
    color: var(--color-success);
    background: var(--color-success-bg);
    border-color: #c8ead6;
}

.alert-info {
    color: var(--color-info);
    background: var(--color-info-bg);
    border-color: #cadcff;
}

/* Authentication */

.auth-card {
    width: min(440px, 100%);
    margin: 80px auto;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.auth-card h1 {
    margin-top: 0;
}

.auth-card .primary-button {
    width: 100%;
    margin-top: 24px;
}

.subtitle {
    margin-bottom: 28px;
    color: var(--color-muted);
}

.auth-footer {
    margin-top: 24px;
    color: var(--color-muted);
    text-align: center;
}

/* Dashboard */

.dashboard-header {
    margin: 40px 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-header h1 {
    margin: 4px 0 8px;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -0.035em;
}

.dashboard-header p {
    max-width: 720px;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.dashboard-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.dashboard-card {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 8px 28px rgb(30 45 75 / 5%);
}

.dashboard-card h2 {
    margin: 4px 0 0;
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.card-label {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-card dl {
    margin: 24px 0 0;
}

dt {
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 0.875rem;
}

dd {
    margin: 4px 0 0;
    font-weight: 550;
}

.card-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf0f5;
}

.card-actions .primary-button {
    width: 100%;
}

.card-actions .secondary-button {
    width: 100%;
    margin-top: 10px;
}

/* Status */

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-active {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.status-inactive {
    color: #8a2830;
    background: #feecee;
}

/* Registration */

.registration-page {
    max-width: 920px;
    margin: 48px auto 80px;
}

.registration-header {
    margin-bottom: 28px;
    text-align: center;
}

.registration-header h1 {
    margin-bottom: 8px;
}

.registration-form {
    display: grid;
    gap: 24px;
}

.form-section {
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.form-section-header {
    margin-bottom: 24px;
}

.form-section-header h2 {
    margin: 0 0 6px;
}

.form-section-header p {
    margin: 0;
    color: var(--color-muted);
}

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.form-field,
.form-group {
    min-width: 0;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field label,
.form-group label {
    margin-top: 0;
}

.form-field small,
.form-group small {
    display: block;
    margin-top: 7px;
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.field-hint {
    display: inline-block;
    margin-left: 6px;
    color: var(--color-muted);
    font-weight: 500;
}

.radio-group {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border-input);
    border-radius: 10px;
    background: #fbfcfe;
    font-weight: 550;
}

.radio-group input[type="radio"] {
    width: auto;
    min-height: auto;
    margin: 0;
}

.mailbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.mailbox-card {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 8px 28px rgb(30 45 75 / 5%);
}

.mailbox-card h3 {
    margin: 4px 0 12px;
    font-size: 1.1rem;
}

.mailbox-summary {
    margin: 0;
}

.mailbox-summary dt {
    margin-top: 10px;
}

.mailbox-summary dd {
    word-break: break-word;
}

.current-mailbox-summary {
    margin-top: 14px;
}

.current-mailbox-summary dt {
    margin-top: 14px;
}

.form-actions {
    padding: 24px;
    text-align: center;
}

.registration-submit {
    width: 100%;
    max-width: 420px;
}

/* Hotel policy */

.policy-form {
    display: grid;
    gap: 24px;
    margin-bottom: 48px;
}

.policy-version-summary {
    margin-bottom: 24px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #c8ead6;
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 6px 20px rgb(30 45 75 / 4%);
}

.policy-version-summary > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.policy-version-summary small {
    color: var(--color-muted);
}

.policy-section {
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.policy-section-heading {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.policy-section-heading h2 {
    margin: 5px 0 7px;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.policy-section-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.policy-section .form-grid {
    margin-bottom: 20px;
}

.policy-section .form-group {
    margin-top: 20px;
}

.policy-section .form-group:first-of-type {
    margin-top: 0;
}

/* Grid gaps provide spacing; paired fields must share the same top edge. */
.policy-section .form-grid > .form-group {
    margin-top: 0;
}


.policy-section-internal {
    border-color: #d9d4ec;
    background:
        linear-gradient(
            135deg,
            rgb(247 245 255 / 90%),
            rgb(255 255 255 / 100%)
        );
}

.policy-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 50;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 14px 40px rgb(30 45 75 / 14%);
    backdrop-filter: blur(10px);
}

.policy-save-bar > div {
    display: grid;
    gap: 4px;
}

.policy-save-bar small {
    color: var(--color-muted);
}

.policy-save-bar .primary-button {
    min-width: 170px;
    flex-shrink: 0;
}

.policy-history {
    margin: 0 0 80px;
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
}

.history-list {
    display: grid;
    gap: 10px;
}

.history-item {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #e7eaf0;
    border-radius: 10px;
    background: #fafbfc;
}

.history-item > div {
    display: grid;
    gap: 4px;
}

.history-item span:not(.status-badge) {
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* Reservation queue */

.reservation-section {
    margin: 0 0 80px;
}

.section-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-heading h2 {
    margin: 5px 0 6px;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.section-heading p {
    margin: 0;
    color: var(--color-muted);
}

.reservation-count {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-surface);
    font-size: 0.85rem;
    font-weight: 700;
}

.reservation-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 8px 28px rgb(30 45 75 / 5%);
}

.reservation-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.reservation-table th,
.reservation-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    vertical-align: middle;
}

.reservation-table th {
    color: var(--color-muted);
    background: #fafbfc;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.reservation-table tbody tr:last-child td {
    border-bottom: 0;
}

.reservation-table tbody tr:hover {
    background: #fafcff;
}

.reservation-table td {
    font-size: 0.9rem;
}

.reservation-identity,
.offer-summary,
.sync-summary {
    display: grid;
    gap: 4px;
}

.reservation-identity span,
.offer-summary small,
.sync-summary span,
.muted-value {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.stay-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.stay-dates span {
    color: var(--color-muted);
}

.numeric-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.case-status,
.offer-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--color-info);
    background: var(--color-info-bg);
    font-size: 0.76rem;
    font-weight: 750;
    text-transform: capitalize;
    white-space: nowrap;
}

.offer-status {
    width: fit-content;
    color: #69510a;
    background: #fff7dc;
}

.table-warning {
    display: block;
    width: fit-content;
    margin-top: 6px;
    color: #8a4b08;
    font-size: 0.75rem;
    font-weight: 700;
}

.empty-state {
    padding: 42px 24px;
    border: 1px dashed var(--color-border-input);
    border-radius: 14px;
    background: var(--color-surface);
    text-align: center;
}

.empty-state h3 {
    margin: 0 0 8px;
}

.empty-state p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--color-muted);
    line-height: 1.55;
}

/* Responsive */

@media (max-width: 720px) {
    .container {
        width: min(100% - 24px, 1100px);
    }

    .header-content {
        min-height: 62px;
    }

    .header-content nav > span {
        display: none;
    }

    .dashboard-header {
        margin-top: 28px;
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-header .secondary-button {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field-full {
        grid-column: auto;
    }

    .form-section,
    .policy-section,
    .policy-history {
        padding: 20px;
    }

    .policy-version-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .policy-version-summary > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .policy-save-bar {
        bottom: 8px;
        align-items: stretch;
        flex-direction: column;
    }

    .policy-save-bar .primary-button {
        width: 100%;
    }

    .history-item {
        align-items: flex-start;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .auth-card {
        margin: 32px auto;
        padding: 22px;
    }

    .dashboard-card {
        padding: 20px;
    }

    .card-heading {
        flex-direction: column;
    }

    .policy-section-heading {
        flex-direction: column;
    }

    .history-item {
        flex-direction: column;
    }
}


/* Reservation detail */

.reservation-link {
    color: var(--color-primary);
    font-weight: 750;
    text-decoration: none;
}

.reservation-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.reservation-detail-header {
    margin: 38px 0 24px;
}

.back-link {
    display: inline-flex;
    margin-bottom: 20px;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.detail-title-row h1 {
    margin: 5px 0 8px;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    letter-spacing: -0.035em;
}

.detail-title-row p {
    margin: 0;
    color: var(--color-muted);
}

.detail-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.reservation-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.detail-card {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 8px 28px rgb(30 45 75 / 5%);
}

.detail-card-wide {
    margin-bottom: 48px;
}

.detail-card-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.detail-card-heading h2 {
    margin: 5px 0 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.detail-definition-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin: 0;
}

.detail-definition-grid-wide {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.detail-definition-grid > div,
.version-data-grid > div,
.commercial-line-data > div {
    min-width: 0;
}

.detail-definition-grid dt,
.version-data-grid dt,
.commercial-line-data dt {
    margin: 0 0 5px;
}

.detail-definition-grid dd,
.version-data-grid dd,
.commercial-line-data dd {
    overflow-wrap: anywhere;
}

.commercial-lines {
    display: grid;
    gap: 12px;
}

.commercial-line {
    padding: 16px;
    border: 1px solid #e7eaf0;
    border-radius: 10px;
    background: #fafbfc;
}

.commercial-line-main {
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.commercial-line-main span {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.commercial-line-data {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.detail-empty-block {
    padding: 22px;
    border: 1px dashed var(--color-border-input);
    border-radius: 10px;
    background: #fafbfc;
}

.detail-empty-block p {
    margin: 7px 0 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.reservation-history-section {
    margin: 0 0 48px;
}

.reservation-version-list {
    display: grid;
    gap: 12px;
}

.reservation-version-card {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.reservation-version-current {
    border-color: #b9c9ff;
    box-shadow: 0 8px 24px rgb(49 94 251 / 8%);
}

.version-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.version-heading > div:first-child {
    display: grid;
    gap: 4px;
}

.version-heading span:not(.status-badge):not(.case-status) {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.version-data-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
}

.version-warning {
    display: inline-flex;
    margin-top: 16px;
    color: #8a4b08;
    font-size: 0.78rem;
    font-weight: 700;
}

.privacy-note {
    margin: 0 0 80px;
    padding: 18px 20px;
    border: 1px solid #d9d4ec;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgb(247 245 255 / 90%),
            rgb(255 255 255 / 100%)
        );
}

.privacy-note p {
    margin: 6px 0 0;
    color: var(--color-muted);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .reservation-detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-definition-grid-wide,
    .version-data-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .commercial-line-data {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .detail-title-row,
    .detail-card-heading,
    .version-heading {
        flex-direction: column;
    }

    .detail-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .detail-definition-grid,
    .detail-definition-grid-wide,
    .version-data-grid,
    .commercial-line-data {
        grid-template-columns: 1fr;
    }

    .detail-card {
        padding: 20px;
    }

    .commercial-line-main {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Reservation working copy */

.source-working-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: 20px;
    margin-bottom: 20px;
}

.source-card {
    align-self: start;
}

.working-card {
    border-color: #cfd8ff;
}

.working-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    white-space: nowrap;
}

.working-status-draft {
    color: #7a4c00;
    background: #fff3cf;
}

.working-status-confirmed {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.working-meta {
    display: grid;
    gap: 4px;
    color: var(--color-muted);
    font-size: 0.8rem;
    text-align: right;
}

.source-commercial-summary {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf0f5;
}

.source-commercial-summary h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.source-commercial-line {
    padding: 10px 0;
    display: grid;
    gap: 3px;
    border-bottom: 1px solid #edf0f5;
}

.source-commercial-line:last-child {
    border-bottom: 0;
}

.source-commercial-line span {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.working-form {
    display: grid;
    gap: 24px;
}

.working-commercial-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
}

.working-commercial-heading h3 {
    margin: 0 0 5px;
}

.working-commercial-heading p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.working-room-lines {
    display: grid;
    gap: 12px;
}

.working-room-line {
    padding: 16px;
    border: 1px solid #e1e6f3;
    border-radius: 12px;
    background: #fafbff;
}

.room-line-grid {
    display: grid;
    grid-template-columns:
        0.75fr
        1.4fr
        0.65fr
        1fr
        0.8fr
        0.65fr
        1.2fr
        auto;
    gap: 10px;
    align-items: end;
}

.room-line-grid label {
    margin: 0 0 6px;
    font-size: 0.75rem;
}

.room-line-remove-cell {
    display: flex;
    align-items: flex-end;
}

.remove-room-line {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #efb7b7;
    border-radius: 8px;
    color: #9b1c1c;
    background: #fff6f6;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.working-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
}

.working-actions span {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.working-confirm-form {
    margin-top: 24px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid #e4e8f2;
}

.working-confirm-form p {
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.working-confirm-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 1180px) {
    .room-line-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .source-working-layout {
        grid-template-columns: 1fr;
    }

    .working-meta {
        text-align: left;
    }
}

@media (max-width: 720px) {
    .room-line-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .working-commercial-heading,
    .working-actions,
    .working-confirm-form {
        align-items: stretch;
        flex-direction: column;
    }

    .working-confirm-form .primary-button,
    .working-actions .primary-button,
    .working-commercial-heading .secondary-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .room-line-grid {
        grid-template-columns: 1fr;
    }
}


/* Reservation queue - working-copy state */

.reservation-table-working {
    min-width: 1240px;
}

.working-queue-summary {
    display: grid;
    gap: 5px;
    justify-items: start;
}

.working-queue-summary small {
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

.queue-working-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}

.queue-working-confirmed {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.queue-working-draft {
    color: #7a4c00;
    background: #fff3cf;
}

.queue-working-stale {
    color: var(--color-error);
    background: var(--color-error-bg);
}

.queue-working-empty {
    color: var(--color-muted);
    background: #f1f3f6;
}


/* CLOUD-BETA 2E - Working Copy rebase */

.rebase-decision-panel {
    margin: 0 0 22px;
    padding: 22px;
    border: 1px solid #efc98d;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #fffaf1,
            #ffffff
        );
}

.rebase-decision-heading h2 {
    margin: 5px 0 8px;
    font-size: 1.25rem;
}

.rebase-decision-heading p {
    max-width: 850px;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.rebase-options {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.rebase-option {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #e5e8ef;
    border-radius: 12px;
    background: #fff;
}

.rebase-option-primary {
    border-color: #c9d4ff;
    background: #fafbff;
}

.rebase-option-label {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.rebase-option h3 {
    margin: 0 0 7px;
    font-size: 1rem;
}

.rebase-option p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.rebase-option form,
.rebase-option button {
    width: 100%;
}

.working-editor-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: contents;
    border: 0;
}

.working-editor-fieldset:disabled {
    opacity: 0.55;
}

.working-editor-fieldset:disabled input,
.working-editor-fieldset:disabled select,
.working-editor-fieldset:disabled button {
    cursor: not-allowed;
}

.working-consistency-warning {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #efc98d;
    border-radius: 10px;
    background: #fff8e8;
}

.working-consistency-warning p {
    margin: 5px 0 0;
    color: #7a4c00;
    font-size: 0.86rem;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .rebase-options {
        grid-template-columns: 1fr;
    }
}


/* Customer request history */

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.customer-history-section {
    margin: 0 0 48px;
}

.customer-event-list {
    display: grid;
    gap: 12px;
}

.customer-event {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.customer-event-pending {
    border-color: #efc98d;
    background:
        linear-gradient(
            135deg,
            #fffaf1,
            #ffffff
        );
}

.customer-event-date {
    display: grid;
    align-content: start;
    gap: 3px;
}

.customer-event-date strong {
    font-size: 0.9rem;
}

.customer-event-date span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.customer-event-content {
    min-width: 0;
}

.customer-event-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.customer-event-heading > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.customer-event-heading small {
    color: var(--color-muted);
}

.customer-event-type {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.customer-event-decision {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.customer-event-decision-pending {
    color: #7a4c00;
    background: #fff3cf;
}

.customer-event-decision-reviewed,
.customer-event-decision-no_action {
    color: var(--color-muted);
    background: #f1f3f6;
}

.customer-event-decision-applied {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.customer-event-summary {
    margin: 12px 0 0;
    line-height: 1.55;
}

.customer-event-changes {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.customer-event-change {
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    border: 1px solid #e8ebf1;
    border-radius: 9px;
    background: #fafbfc;
}

.customer-event-change span {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.customer-event-change strong {
    font-size: 0.86rem;
}

.customer-event-footer {
    margin-top: 14px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #edf0f5;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.customer-event-action-needed {
    color: #8a4b08;
    font-weight: 750;
}

.customer-history-empty {
    padding: 28px 22px;
}

@media (max-width: 760px) {
    .customer-event {
        grid-template-columns: 1fr;
    }

    .customer-event-date {
        display: flex;
        gap: 8px;
    }

    .customer-event-changes {
        grid-template-columns: 1fr;
    }

    .customer-event-footer,
    .customer-event-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Communication Event operator decisions */

.customer-event-reviewed {
    border-color: #c7d8ee;
    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #ffffff
        );
}

.customer-event-no-action {
    opacity: 0.78;
    background: #fafafa;
}

.customer-event-decision-reviewed {
    color: #295f8f;
    background: #e9f3ff;
}

.customer-event-decision-no_action {
    color: #59606a;
    background: #eef0f3;
}

.customer-event-considered {
    color: #295f8f;
    font-weight: 750;
}

.customer-event-closed {
    color: var(--color-muted);
    font-weight: 700;
}

.customer-event-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.customer-event-actions form {
    margin: 0;
}

.customer-event-button {
    min-height: 38px;
}

.customer-event-action-note {
    margin: 9px 0 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .customer-event-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-event-actions form,
    .customer-event-button {
        width: 100%;
    }
}


/* =========================================================
   Authoritative Hotel State
   ========================================================= */

.hotel-state-section,
.hotel-state-history-section {
    margin: 0 0 42px;
}

.hotel-state-current-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f6ee;
    color: #17643a;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.hotel-state-current-card {
    padding: 24px;
    border: 1px solid #b9ddc8;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #f4fbf7,
            #ffffff
        );
}

.hotel-state-meta {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hotel-state-meta > div {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid #deeee5;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
}

.hotel-state-meta span,
.hotel-state-stay-grid dt {
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.hotel-state-meta strong {
    font-size: 0.98rem;
}

.hotel-state-stay-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
}

.hotel-state-stay-grid > div {
    padding: 12px 14px;
    border-bottom: 1px solid #e5eee8;
}

.hotel-state-stay-grid dd {
    margin: 5px 0 0;
    font-weight: 750;
}

.hotel-state-commercial-list {
    margin-top: 20px;
}

.hotel-state-commercial-list h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.hotel-state-commercial-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid #e7eee9;
}

.hotel-state-commercial-line > div {
    display: grid;
    gap: 3px;
}

.hotel-state-commercial-line span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.hotel-state-rate {
    text-align: right;
}

.hotel-state-authority-note {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #e8f6ee;
    color: #24553a;
    font-size: 0.8rem;
    line-height: 1.5;
}

.hotel-state-empty {
    padding: 28px 22px;
}

.hotel-state-history-list {
    display: grid;
    gap: 10px;
}

.hotel-state-history-card {
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.hotel-state-history-current {
    border-color: #b9ddc8;
}

.hotel-state-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hotel-state-history-heading > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.hotel-state-history-heading span {
    color: var(--color-muted);
    font-size: 0.76rem;
}

.hotel-state-history-data {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.hotel-state-history-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.hotel-state-history-lines span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 7px;
    background: #f3f5f7;
    font-size: 0.74rem;
}

@media (max-width: 760px) {
    .hotel-state-meta,
    .hotel-state-stay-grid {
        grid-template-columns: 1fr;
    }

    .hotel-state-commercial-line,
    .hotel-state-history-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .hotel-state-rate {
        text-align: left;
    }
}


/* =========================================================
   Case operational overview
   Cloud is chronology, not decision-maker.
   ========================================================= */

.case-attention-section,
.case-timeline-section {
    margin: 0 0 42px;
}

.attention-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef1f4;
    color: #59606a;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.attention-count-open {
    background: #fff0d6;
    color: #87520b;
}

.attention-event-list {
    display: grid;
    gap: 10px;
}

.attention-event-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #efd09b;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #fffaf1,
            #ffffff
        );
}

.attention-event-time {
    display: grid;
    align-content: start;
    gap: 3px;
}

.attention-event-time span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.attention-event-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.attention-event-body p {
    margin: 10px 0 0;
    line-height: 1.5;
}

.actor-badge,
.after-hotel-badge,
.timeline-open-badge,
.hotel-version-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.actor-badge {
    padding: 4px 8px;
}

.actor-customer {
    background: #eef3ff;
    color: #355c9b;
}

.actor-hotel {
    background: #e8f6ee;
    color: #17643a;
}

.after-hotel-badge,
.timeline-open-badge {
    padding: 4px 8px;
    background: #fff0d6;
    color: #87520b;
}

.hotel-version-badge {
    padding: 4px 8px;
    background: #e8f6ee;
    color: #17643a;
}

.attention-change-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.attention-change {
    display: grid;
    gap: 4px;
    padding: 9px 11px;
    border: 1px solid #ece2d0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
}

.attention-change span {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.attention-change strong {
    font-size: 0.86rem;
}

.case-attention-clear {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid #cce5d7;
    border-radius: 11px;
    background: #f4fbf7;
    color: #24553a;
}

.case-attention-clear span {
    color: #557565;
    font-size: 0.8rem;
}

.case-timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.timeline-entry {
    display: grid;
    grid-template-columns:
        24px 104px minmax(0, 1fr);
    gap: 12px;
    position: relative;
}

.timeline-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.timeline-rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e1e5ea;
}

.timeline-entry:first-child .timeline-rail::after {
    top: 20px;
}

.timeline-entry:last-child .timeline-rail::after {
    bottom: calc(100% - 22px);
}

.timeline-dot {
    position: relative;
    z-index: 2;
    width: 11px;
    height: 11px;
    margin-top: 20px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ccd2d9;
}

.timeline-customer .timeline-dot {
    background: #5a7fc0;
}

.timeline-hotel .timeline-dot {
    background: #2f8a59;
}

.timeline-date {
    display: grid;
    align-content: start;
    gap: 3px;
    padding-top: 15px;
}

.timeline-date strong {
    font-size: 0.84rem;
}

.timeline-date span {
    color: var(--color-muted);
    font-size: 0.76rem;
}

.timeline-card {
    margin-bottom: 12px;
    padding: 17px 19px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
}

.timeline-hotel .timeline-card {
    border-color: #cce5d7;
    background:
        linear-gradient(
            135deg,
            #f7fcf9,
            #ffffff
        );
}

.timeline-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.timeline-card-heading > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-summary {
    margin: 11px 0 0;
    line-height: 1.5;
}

.timeline-change-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.timeline-change-list > div {
    display: grid;
    gap: 3px;
    min-width: 145px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f5f7f9;
}

.timeline-change-list span {
    color: var(--color-muted);
    font-size: 0.7rem;
}

.timeline-change-list strong {
    font-size: 0.82rem;
}

.timeline-hotel-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 13px;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.timeline-hotel-facts strong {
    color: var(--color-text);
}

.timeline-hotel-lines {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

.timeline-hotel-lines > div {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid #deeee5;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
}

.timeline-hotel-lines span {
    color: var(--color-muted);
    font-size: 0.74rem;
}

@media (max-width: 760px) {
    .attention-event-card {
        grid-template-columns: 1fr;
    }

    .attention-event-time {
        display: flex;
        gap: 8px;
    }

    .attention-change-grid,
    .timeline-hotel-lines {
        grid-template-columns: 1fr;
    }

    .timeline-entry {
        grid-template-columns:
            20px minmax(0, 1fr);
        gap: 8px;
    }

    .timeline-date {
        grid-column: 2;
        display: flex;
        gap: 7px;
        padding-top: 12px;
    }

    .timeline-card {
        grid-column: 2;
    }
}


/* =========================================================
   Operational case layout — technical data demoted
   ========================================================= */

.technical-details {
    margin: 52px 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
}

.technical-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    background: #f7f8fa;
}

.technical-details > summary::-webkit-details-marker {
    display: none;
}

.technical-details > summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.technical-details[open] > summary::after {
    content: "−";
}

.technical-details > summary > div {
    display: grid;
    gap: 4px;
}

.technical-details > summary strong {
    font-size: 0.96rem;
}

.technical-details-hint {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.technical-details-body {
    display: grid;
    gap: 26px;
    padding: 20px;
    border-top: 1px solid var(--color-border);
}

.technical-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.technical-status-card {
    display: grid;
    gap: 5px;
    padding: 14px 15px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fbfcfd;
}

.technical-status-card > span,
.technical-status-card small {
    color: var(--color-muted);
    font-size: 0.74rem;
}

.technical-status-card > strong {
    font-size: 0.9rem;
}

.technical-explanation {
    padding: 14px 16px;
    border-left: 3px solid #c8ced6;
    background: #f7f8fa;
}

.technical-explanation p {
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.technical-history-section {
    display: grid;
    gap: 12px;
}

.compact-heading {
    margin-bottom: 0;
}

.compact-heading h3 {
    margin: 3px 0 0;
    font-size: 1rem;
}

.technical-version-list {
    display: grid;
    gap: 6px;
}

.technical-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 12px;
    border: 1px solid #e6e9ed;
    border-radius: 8px;
    background: #ffffff;
}

.technical-version-row > div {
    display: grid;
    gap: 2px;
}

.technical-version-row > div:last-child {
    text-align: right;
}

.technical-version-row span {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.technical-version-row strong {
    font-size: 0.8rem;
}

@media (max-width: 760px) {
    .technical-details > summary {
        align-items: flex-start;
    }

    .technical-details-hint {
        display: none;
    }

    .technical-status-grid {
        grid-template-columns: 1fr;
    }

    .technical-version-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .technical-version-row > div:last-child {
        text-align: left;
    }
}


/* =========================================================
   4A — Reservation case visual redesign
   Scope: practice detail only.
   Brand: DeepBooking petrol + orange.
   ========================================================= */

.case-visual-page {
    --db-petrol: #265262;
    --db-petrol-dark: #193c48;
    --db-petrol-soft: #eaf1f3;
    --db-orange: #f29a38;
    --db-orange-dark: #c96e17;
    --db-orange-soft: #fff4e8;
    --db-ink: #14202a;
    --db-muted: #65717c;
    --db-line: #dce4e8;
    --db-soft: #f6f8f9;
    --db-blue: #5576a8;
    --db-blue-soft: #edf3fb;
    --db-success: #2d7254;
    --db-success-soft: #edf8f2;

    padding: 30px 0 64px;
}

.case-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 34px;
    padding: 26px 28px 0;
    border-radius: 22px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 10%,
            rgb(242 154 56 / 24%),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--db-petrol),
            var(--db-petrol-dark)
        );
    box-shadow:
        0 24px 60px rgb(20 49 60 / 18%);
}

.case-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -130px;
    width: 330px;
    height: 330px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
    pointer-events: none;
}

.case-hero-topline,
.case-hero-main,
.case-flow-strip {
    position: relative;
    z-index: 1;
}

.case-hero-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.case-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(255 255 255 / 78%);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.case-back-link:hover {
    color: #ffffff;
}

.case-hero-statuses {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.case-status-hero,
.hero-attention-pill,
.hero-clear-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.case-status-hero {
    color: #ffffff;
    background: rgb(255 255 255 / 12%);
    border: 1px solid rgb(255 255 255 / 16%);
}

.hero-attention-pill {
    color: #5e3508;
    background: #ffdcae;
}

.hero-clear-pill {
    color: #dff6e9;
    background: rgb(112 198 151 / 18%);
    border: 1px solid rgb(185 235 207 / 25%);
}

.case-hero-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);
    gap: 34px;
    align-items: end;
    padding: 34px 0 30px;
}

.case-eyebrow {
    color: rgb(255 255 255 / 62%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.case-hero h1 {
    margin: 7px 0 12px;
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.case-hero-identity {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.02rem, 2vw, 1.25rem);
    font-weight: 750;
}

.case-hero-hotel {
    margin: 7px 0 0;
    color: rgb(255 255 255 / 64%);
    font-size: 0.86rem;
}

.case-hero-facts {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(90px, 0.65fr)
        minmax(120px, 0.85fr);
    gap: 8px;
}

.case-hero-facts > div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 13px;
    background: rgb(255 255 255 / 8%);
    backdrop-filter: blur(8px);
}

.case-hero-facts span {
    display: block;
    margin-bottom: 5px;
    color: rgb(255 255 255 / 55%);
    font-size: 0.68rem;
    font-weight: 700;
}

.case-hero-facts strong {
    display: block;
    font-size: 0.83rem;
    line-height: 1.35;
}

.case-hero-facts i {
    margin: 0 4px;
    color: var(--db-orange);
    font-style: normal;
}

.case-flow-strip {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0 -28px;
    padding: 15px 28px;
    background: rgb(9 29 36 / 26%);
    border-top: 1px solid rgb(255 255 255 / 9%);
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-step > div {
    min-width: 0;
}

.flow-step small {
    display: block;
    margin-bottom: 2px;
    color: rgb(255 255 255 / 48%);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.flow-step strong {
    display: block;
    overflow: hidden;
    color: rgb(255 255 255 / 87%);
    font-size: 0.77rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.flow-step-customer .flow-dot {
    background: #8eb2e5;
}

.flow-step-hotel .flow-dot {
    background: #80c4ab;
}

.flow-step-pms .flow-dot {
    background: var(--db-orange);
}

.flow-arrow {
    color: rgb(255 255 255 / 24%);
    font-weight: 700;
}

.case-inline-alert {
    margin: -10px 0 28px;
    padding: 14px 16px;
    border: 1px solid #ccddeb;
    border-radius: 12px;
    color: #34536d;
    background: #f2f8fc;
    font-size: 0.84rem;
}

.state-control-center,
.attention-modern-section,
.timeline-modern-section {
    margin-bottom: 46px;
}

.state-control-heading,
.modern-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.state-control-heading > div,
.modern-section-heading > div {
    min-width: 0;
}

.case-section-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--db-petrol);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.state-control-heading h2,
.modern-section-heading h2 {
    margin: 0;
    color: var(--db-ink);
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    letter-spacing: -0.025em;
}

.state-control-heading > p,
.modern-section-heading p {
    max-width: 475px;
    margin: 0;
    color: var(--db-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.state-control-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.state-panel {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--db-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgb(25 53 65 / 7%);
}

.state-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

.hotel-state-panel::before {
    background: var(--db-petrol);
}

.pms-state-panel::before {
    background: var(--db-orange);
}

.state-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.state-actor-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.state-actor-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 900;
}

.state-actor-hotel {
    color: #ffffff;
    background: var(--db-petrol);
}

.state-actor-pms {
    color: #ffffff;
    background: var(--db-orange);
}

.state-actor-title span:not(.state-actor-icon) {
    display: block;
    margin-bottom: 2px;
    color: var(--db-muted);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.state-actor-title h3 {
    margin: 0;
    color: var(--db-ink);
    font-size: 0.96rem;
    letter-spacing: -0.015em;
}

.version-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 850;
    white-space: nowrap;
}

.version-pill-hotel {
    color: var(--db-petrol);
    background: var(--db-petrol-soft);
}

.version-pill-confirmed {
    color: #915213;
    background: var(--db-orange-soft);
}

.version-pill-draft {
    color: #6a5a24;
    background: #fff9da;
}

.state-panel-meta {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 17px;
}

.state-panel-meta > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #e6ebee;
    border-radius: 10px;
    background: #f9fafb;
}

.state-panel-meta span {
    display: block;
    margin-bottom: 4px;
    color: var(--db-muted);
    font-size: 0.65rem;
    font-weight: 700;
}

.state-panel-meta strong {
    display: block;
    overflow: hidden;
    color: var(--db-ink);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.state-room-list {
    display: grid;
    gap: 0;
    border-top: 1px solid #edf0f2;
}

.state-room-row {
    display: grid;
    grid-template-columns:
        42px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f2;
}

.state-room-quantity {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--db-petrol);
    background: var(--db-petrol-soft);
    font-size: 0.92rem;
    font-weight: 900;
}

.pms-room-quantity {
    color: #995718;
    background: var(--db-orange-soft);
}

.state-room-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.state-room-copy strong {
    color: var(--db-ink);
    font-size: 0.84rem;
}

.state-room-copy span,
.state-room-rate span {
    color: var(--db-muted);
    font-size: 0.68rem;
}

.allocation-origin {
    width: fit-content;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    color: #935215;
    background: var(--db-orange-soft);
    font-size: 0.62rem;
    font-weight: 750;
}

.state-room-rate {
    min-width: 96px;
    display: grid;
    gap: 2px;
    text-align: right;
}

.state-room-rate strong {
    color: var(--db-ink);
    font-size: 0.79rem;
}

.state-truth-note,
.pms-ready-note,
.pms-draft-note,
.pms-stale-note {
    margin-top: 15px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.5;
}

.state-truth-note,
.pms-ready-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.state-truth-note {
    color: #335c4b;
    background: var(--db-success-soft);
}

.truth-lock,
.pms-ready-dot {
    color: var(--db-success);
    font-size: 0.62rem;
    line-height: 1.8;
}

.state-truth-note p,
.pms-ready-note p {
    margin: 0;
}

.pms-ready-note {
    color: #754514;
    background: var(--db-orange-soft);
}

.pms-ready-dot {
    color: var(--db-orange);
}

.pms-draft-note {
    color: #6a5a24;
    background: #fff9da;
}

.pms-stale-note {
    color: #8d3c30;
    background: #fff0ed;
}

.state-panel-empty {
    padding: 32px 18px;
    border: 1px dashed #d8e0e4;
    border-radius: 12px;
    color: var(--db-muted);
    background: #fafbfc;
    text-align: center;
}

.state-panel-empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--db-ink);
}

.state-panel-empty p {
    max-width: 430px;
    margin: 0 auto;
    font-size: 0.78rem;
    line-height: 1.55;
}

.modern-attention-count,
.timeline-event-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #6c757e;
    background: #eef1f3;
    font-size: 0.68rem;
    font-weight: 850;
}

.modern-attention-open {
    color: #85490c;
    background: #fff0dc;
}

.modern-attention-list {
    display: grid;
    gap: 10px;
}

.modern-attention-card {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #efd5b6;
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            #fff9f2,
            #ffffff 56%
        );
}

.modern-attention-date {
    display: grid;
    align-content: start;
    gap: 2px;
    padding-top: 3px;
}

.modern-attention-date strong {
    color: var(--db-ink);
    font-size: 0.82rem;
}

.modern-attention-date span {
    color: var(--db-muted);
    font-size: 0.7rem;
}

.modern-attention-content p {
    margin: 8px 0 0;
    color: #4f5c66;
    font-size: 0.8rem;
    line-height: 1.55;
}

.modern-attention-title,
.timeline-modern-card-head,
.timeline-modern-card-head > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.modern-attention-title strong {
    font-size: 0.79rem;
}

.actor-chip {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.actor-chip-customer {
    color: #41628f;
    background: var(--db-blue-soft);
}

.actor-chip-hotel {
    color: var(--db-petrol);
    background: var(--db-petrol-soft);
}

.actor-chip-pms {
    color: #945316;
    background: var(--db-orange-soft);
}

.modern-change-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.modern-change-grid > div {
    min-width: 100px;
    padding: 7px 9px;
    border: 1px solid #eee2d5;
    border-radius: 8px;
    background: rgb(255 255 255 / 75%);
}

.modern-change-grid span {
    display: block;
    margin-bottom: 2px;
    color: var(--db-muted);
    font-size: 0.61rem;
}

.modern-change-grid strong {
    color: var(--db-ink);
    font-size: 0.72rem;
}

.modern-change-grid i,
.timeline-modern-changes i {
    margin: 0 4px;
    color: var(--db-orange);
    font-style: normal;
}

.attention-clear-modern {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid #cfe3d8;
    border-radius: 14px;
    color: #345e4c;
    background:
        linear-gradient(
            120deg,
            #f1f9f5,
            #ffffff
        );
}

.attention-clear-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--db-success);
    font-size: 0.9rem;
    font-weight: 900;
}

.attention-clear-modern strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.83rem;
}

.attention-clear-modern p {
    margin: 0;
    color: #698071;
    font-size: 0.72rem;
}

.timeline-heading {
    align-items: flex-start;
}

.timeline-modern {
    position: relative;
    display: grid;
}

.timeline-modern-entry {
    display: grid;
    grid-template-columns:
        74px
        22px
        minmax(0, 1fr);
    gap: 12px;
    position: relative;
}

.timeline-modern-date {
    display: grid;
    align-content: start;
    gap: 2px;
    padding-top: 16px;
    text-align: right;
}

.timeline-modern-date strong {
    color: var(--db-ink);
    font-size: 0.73rem;
    text-transform: uppercase;
}

.timeline-modern-date span {
    color: var(--db-muted);
    font-size: 0.67rem;
}

.timeline-modern-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.timeline-modern-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #dce4e7;
}

.timeline-modern-entry:first-child .timeline-modern-rail::before {
    top: 20px;
}

.timeline-modern-entry:last-child .timeline-modern-rail::before {
    bottom: calc(100% - 21px);
}

.timeline-modern-dot {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: 19px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cfd9dd;
}

.timeline-modern-customer .timeline-modern-dot {
    background: var(--db-blue);
}

.timeline-modern-hotel .timeline-modern-dot {
    background: var(--db-petrol);
}

.timeline-modern-pms .timeline-modern-dot {
    background: var(--db-orange);
}

.timeline-modern-card {
    margin-bottom: 11px;
    padding: 14px 16px;
    border: 1px solid #e2e7ea;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgb(25 53 65 / 4%);
}

.timeline-modern-hotel .timeline-modern-card {
    border-left: 3px solid var(--db-petrol);
}

.timeline-modern-customer .timeline-modern-card {
    border-left: 3px solid var(--db-blue);
}

.timeline-modern-pms .timeline-modern-card {
    border-left: 3px solid var(--db-orange);
    background:
        linear-gradient(
            120deg,
            #fffaf5,
            #ffffff 62%
        );
}

.timeline-modern-card-head {
    justify-content: space-between;
    gap: 12px;
}

.timeline-modern-card-head > div {
    min-width: 0;
}

.timeline-modern-card-head strong {
    color: var(--db-ink);
    font-size: 0.79rem;
}

.timeline-needs-attention,
.timeline-version-pill,
.timeline-pms-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 850;
    white-space: nowrap;
}

.timeline-needs-attention {
    color: #8a4a0a;
    background: #fff0dc;
}

.timeline-version-pill {
    color: var(--db-petrol);
    background: var(--db-petrol-soft);
}

.timeline-pms-pill {
    color: #945316;
    background: var(--db-orange-soft);
}

.timeline-modern-summary {
    margin: 9px 0 0;
    color: #53616b;
    font-size: 0.76rem;
    line-height: 1.55;
}

.pms-timeline-note strong {
    color: #8b4c12;
}

.timeline-modern-changes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.timeline-modern-changes > div {
    min-width: 100px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f5f7f8;
}

.timeline-modern-changes span {
    display: block;
    margin-bottom: 2px;
    color: var(--db-muted);
    font-size: 0.6rem;
}

.timeline-modern-changes strong {
    color: var(--db-ink);
    font-size: 0.7rem;
}

.timeline-state-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 10px;
}

.timeline-state-facts span {
    color: var(--db-muted);
    font-size: 0.68rem;
}

.timeline-state-facts strong {
    margin-left: 5px;
    color: var(--db-ink);
    font-size: 0.72rem;
}

.timeline-room-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.timeline-room-chips > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 5px 8px;
    border-radius: 8px;
    color: #355c4d;
    background: var(--db-success-soft);
    font-size: 0.67rem;
}

.timeline-room-chips span {
    color: #6b7b73;
    font-size: 0.62rem;
}

.timeline-pms-chips > div {
    color: #8a4d13;
    background: var(--db-orange-soft);
}

.timeline-pms-chips span {
    color: #a36d39;
}

.technical-details-modern {
    margin-top: 8px;
    border-color: #e3e8ea;
    background: #fbfcfc;
}

.technical-details-modern > summary {
    min-height: 68px;
}

@media (max-width: 900px) {
    .case-hero-main,
    .state-control-grid {
        grid-template-columns: 1fr;
    }

    .case-hero-facts {
        max-width: 620px;
    }

    .state-control-heading,
    .modern-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .state-control-heading > p,
    .modern-section-heading p {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .case-visual-page {
        padding-top: 18px;
    }

    .case-hero {
        margin-left: -4px;
        margin-right: -4px;
        padding: 20px 18px 0;
        border-radius: 18px;
    }

    .case-hero-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .case-hero-main {
        gap: 22px;
        padding: 26px 0 22px;
    }

    .case-hero-facts {
        grid-template-columns: 1fr 1fr;
    }

    .case-hero-facts > div:first-child {
        grid-column: 1 / -1;
    }

    .case-flow-strip {
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 0 -18px;
        padding: 14px 18px;
    }

    .flow-arrow {
        display: none;
    }

    .state-panel {
        padding: 17px;
    }

    .state-panel-header {
        flex-direction: column;
    }

    .state-panel-meta {
        grid-template-columns: 1fr 1fr;
    }

    .state-panel-meta > div:first-child {
        grid-column: 1 / -1;
    }

    .state-room-row {
        grid-template-columns:
            38px minmax(0, 1fr);
    }

    .state-room-rate {
        grid-column: 2;
        min-width: 0;
        text-align: left;
    }

    .modern-attention-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .timeline-modern-entry {
        grid-template-columns:
            48px
            18px
            minmax(0, 1fr);
        gap: 7px;
    }

    .timeline-modern-date {
        padding-top: 14px;
    }

    .timeline-modern-date strong {
        font-size: 0.64rem;
    }

    .timeline-modern-card {
        padding: 12px;
    }

    .timeline-modern-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   4B — Official deepBooking visual language
   Reference palette extracted from official LinkedIn artwork:
   dark petrol   #194859
   mid petrol    #245465
   light petrol  #356576
   orange        #F97304
   cold white    #F6F8F9
   soft coral    #FDA06F
   ========================================================= */

:root {
    --db-brand-petrol-950: #153f4f;
    --db-brand-petrol-900: #194859;
    --db-brand-petrol-800: #245465;
    --db-brand-petrol-700: #356576;
    --db-brand-orange: #f97304;
    --db-brand-orange-dark: #dc6200;
    --db-brand-coral: #fda06f;
    --db-brand-white: #f6f8f9;
    --db-brand-ice: #edf3f5;
    --db-brand-line: #d7e2e6;
    --db-brand-ink: #17323d;
}

/* ---------- Main Cloud header ---------- */

.site-header {
    background:
        linear-gradient(
            105deg,
            rgb(53 101 118 / 98%) 0%,
            rgb(36 84 101 / 99%) 44%,
            rgb(25 72 89 / 100%) 100%
        );
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    box-shadow:
        0 10px 30px rgb(15 48 61 / 18%);
    backdrop-filter: blur(14px);
}

.header-content {
    min-height: 74px;
}

.brand-official {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    color: var(--db-brand-white);
    text-decoration: none;
}

.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.055em;
}

.brand-deep {
    color: var(--db-brand-orange);
}

.brand-booking {
    color: var(--db-brand-white);
}

.brand-signature {
    padding-bottom: 1px;
    color: rgb(246 248 249 / 54%);
    font-size: 0.59rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-content nav {
    color: rgb(246 248 249 / 70%);
}

.header-content nav > span {
    color: rgb(246 248 249 / 72%);
}

.link-button {
    color: var(--db-brand-coral);
}

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

/* ---------- Practice page canvas ---------- */

body:has(.case-visual-page) {
    background:
        linear-gradient(
            180deg,
            #eaf1f3 0,
            #f6f8f9 330px,
            #f8fafb 100%
        );
}

.case-visual-page {
    --db-petrol: var(--db-brand-petrol-800);
    --db-petrol-dark: var(--db-brand-petrol-900);
    --db-petrol-soft: #e7eff2;
    --db-orange: var(--db-brand-orange);
    --db-orange-dark: var(--db-brand-orange-dark);
    --db-orange-soft: #fff0e4;
    --db-ink: var(--db-brand-ink);
    --db-muted: #62747c;
    --db-line: var(--db-brand-line);
    --db-soft: #f4f7f8;
    --db-blue: #718f9d;
    --db-blue-soft: #edf3f5;
    --db-success: #38725e;
    --db-success-soft: #edf6f2;

    padding-top: 34px;
}

/* ---------- Hero ---------- */

.case-hero {
    isolation: isolate;
    padding-top: 28px;
    border: 1px solid rgb(255 255 255 / 7%);
    background:
        radial-gradient(
            circle at 77% -5%,
            rgb(249 115 4 / 30%),
            transparent 27%
        ),
        radial-gradient(
            circle at 105% 105%,
            rgb(253 160 111 / 12%),
            transparent 33%
        ),
        linear-gradient(
            118deg,
            var(--db-brand-petrol-700) 0%,
            var(--db-brand-petrol-800) 44%,
            var(--db-brand-petrol-900) 100%
        );
    box-shadow:
        0 28px 70px rgb(18 58 72 / 24%);
}

.case-hero::before {
    content: "deepBooking";
    position: absolute;
    z-index: 0;
    right: 24px;
    top: 45px;
    color: rgb(255 255 255 / 3.8%);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.075em;
    pointer-events: none;
}

.case-hero::after {
    right: -120px;
    bottom: -170px;
    width: 400px;
    height: 400px;
    border-color: rgb(255 255 255 / 10%);
    box-shadow:
        0 0 0 36px rgb(255 255 255 / 2.5%),
        0 0 0 72px rgb(255 255 255 / 1.5%);
}

.case-back-link {
    color: rgb(246 248 249 / 72%);
}

.case-back-link:hover {
    color: var(--db-brand-white);
}

.case-back-link span {
    color: var(--db-brand-orange);
}

.case-status-hero {
    color: var(--db-brand-white);
    border-color: rgb(255 255 255 / 13%);
    background: rgb(255 255 255 / 9%);
}

.hero-clear-pill {
    color: #ffffff;
    border-color: rgb(255 255 255 / 9%);
    background: rgb(255 255 255 / 10%);
}

.hero-clear-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #70c19d;
    box-shadow: 0 0 0 4px rgb(112 193 157 / 10%);
}

.hero-attention-pill {
    color: #642e00;
    background:
        linear-gradient(
            90deg,
            #ffcfaa,
            #fda06f
        );
}

.case-eyebrow {
    color: var(--db-brand-coral);
}

.case-hero h1 {
    color: var(--db-brand-white);
    text-shadow: 0 8px 30px rgb(6 29 38 / 18%);
}

.case-hero-facts > div {
    border-color: rgb(255 255 255 / 10%);
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 11%),
            rgb(255 255 255 / 5%)
        );
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 6%);
}

.case-hero-facts span {
    color: rgb(246 248 249 / 52%);
}

.case-hero-facts strong {
    color: var(--db-brand-white);
}

.case-flow-strip {
    background:
        linear-gradient(
            90deg,
            rgb(10 36 46 / 26%),
            rgb(13 43 54 / 38%)
        );
}

.flow-step small {
    color: rgb(246 248 249 / 43%);
}

.flow-step strong {
    color: rgb(246 248 249 / 88%);
}

.flow-step-customer .flow-dot {
    background: #8ba7b3;
    box-shadow: 0 0 0 4px rgb(139 167 179 / 10%);
}

.flow-step-hotel .flow-dot {
    background: #f6f8f9;
    box-shadow: 0 0 0 4px rgb(246 248 249 / 8%);
}

.flow-step-pms .flow-dot {
    background: var(--db-brand-orange);
    box-shadow: 0 0 0 4px rgb(249 115 4 / 12%);
}

/* ---------- Section hierarchy ---------- */

.case-section-kicker {
    color: var(--db-brand-orange-dark);
}

.state-control-heading h2,
.modern-section-heading h2 {
    color: var(--db-brand-petrol-900);
}

.state-control-heading > p,
.modern-section-heading p {
    color: #6c7d84;
}

.state-control-center {
    position: relative;
}

.state-control-center::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 38px -18px -18px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            rgb(36 84 101 / 3%),
            rgb(249 115 4 / 2.8%)
        );
}

/* ---------- Hotel State / PMS cards ---------- */

.state-control-grid {
    gap: 18px;
}

.state-panel {
    padding: 22px;
    border-color: #dbe4e7;
    border-radius: 20px;
    box-shadow:
        0 14px 38px rgb(20 59 72 / 8%),
        0 2px 8px rgb(20 59 72 / 3%);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.state-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 48px rgb(20 59 72 / 11%),
        0 3px 10px rgb(20 59 72 / 4%);
}

.hotel-state-panel {
    background:
        radial-gradient(
            circle at 100% 0,
            rgb(53 101 118 / 7%),
            transparent 33%
        ),
        #ffffff;
}

.pms-state-panel {
    background:
        radial-gradient(
            circle at 100% 0,
            rgb(249 115 4 / 8%),
            transparent 35%
        ),
        #ffffff;
}

.hotel-state-panel::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--db-brand-petrol-700),
            var(--db-brand-petrol-900)
        );
}

.pms-state-panel::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--db-brand-orange),
            var(--db-brand-coral)
        );
}

.state-actor-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    box-shadow:
        0 8px 20px rgb(20 60 73 / 12%);
}

.state-actor-hotel {
    background:
        linear-gradient(
            145deg,
            var(--db-brand-petrol-700),
            var(--db-brand-petrol-900)
        );
}

.state-actor-pms {
    background:
        linear-gradient(
            145deg,
            var(--db-brand-orange),
            #e96500
        );
}

.version-pill-hotel {
    color: #214e5d;
    background: #e8f0f2;
    border: 1px solid #dbe7ea;
}

.version-pill-confirmed {
    color: #9e4500;
    background:
        linear-gradient(
            90deg,
            #fff2e8,
            #ffeadb
        );
    border: 1px solid #ffd9bd;
}

.state-panel-meta > div {
    border-color: #e5ebee;
    background:
        linear-gradient(
            180deg,
            #fbfcfc,
            #f5f8f9
        );
}

.state-room-row {
    transition: background 150ms ease;
}

.state-room-row:hover {
    margin-inline: -8px;
    padding-inline: 8px;
    border-radius: 10px;
    background: #f8fafb;
}

.state-room-quantity {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--db-brand-petrol-700),
            var(--db-brand-petrol-900)
        );
    box-shadow:
        0 7px 16px rgb(35 83 100 / 14%);
}

.pms-room-quantity {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--db-brand-orange),
            #e76600
        );
    box-shadow:
        0 7px 16px rgb(249 115 4 / 14%);
}

.allocation-origin {
    color: #a14800;
    border: 1px solid #ffe0c8;
    background: #fff4eb;
}

.state-truth-note {
    color: #315863;
    border: 1px solid #d7e5e9;
    background:
        linear-gradient(
            90deg,
            #edf4f6,
            #f7fafb
        );
}

.truth-lock {
    color: var(--db-brand-petrol-700);
}

.pms-ready-note {
    color: #8d4309;
    border: 1px solid #ffdfc6;
    background:
        linear-gradient(
            90deg,
            #fff2e8,
            #fff8f2
        );
}

.pms-ready-dot {
    color: var(--db-brand-orange);
}

/* ---------- Attention ---------- */

.modern-attention-count,
.timeline-event-count {
    color: #536972;
    background: #e9eff1;
}

.modern-attention-open {
    color: #8c4000;
    background: #ffebda;
}

.modern-attention-card {
    border-color: #f2cfb1;
    background:
        linear-gradient(
            105deg,
            #fff2e7 0%,
            #fffaf6 20%,
            #ffffff 64%
        );
    box-shadow:
        0 10px 28px rgb(113 68 28 / 6%);
}

.attention-clear-modern {
    border-color: #d3e1e5;
    color: #315967;
    background:
        linear-gradient(
            110deg,
            #edf4f6,
            #ffffff 68%
        );
    box-shadow:
        0 10px 28px rgb(25 72 89 / 5%);
}

.attention-clear-icon {
    background:
        linear-gradient(
            145deg,
            var(--db-brand-petrol-700),
            var(--db-brand-petrol-900)
        );
}

/* ---------- Timeline heading / legend ---------- */

.timeline-heading-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.timeline-legend {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.timeline-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid #dce5e8;
    border-radius: 999px;
    color: #61727a;
    background: #ffffff;
    font-size: 0.63rem;
    font-weight: 750;
}

.timeline-legend-item i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.timeline-legend-customer i {
    background: #819aa5;
}

.timeline-legend-hotel i {
    background: var(--db-brand-petrol-700);
}

.timeline-legend-pms i {
    background: var(--db-brand-orange);
}

/* ---------- Timeline ---------- */

.timeline-modern {
    padding: 6px 0 2px;
}

.timeline-modern-rail::before {
    width: 2px;
    background:
        linear-gradient(
            180deg,
            rgb(249 115 4 / 40%),
            rgb(53 101 118 / 36%) 38%,
            rgb(36 84 101 / 20%) 100%
        );
}

.timeline-modern-dot {
    width: 13px;
    height: 13px;
    border: 3px solid #f7fafb;
    box-shadow:
        0 0 0 1px #c9d7dc,
        0 4px 10px rgb(27 68 83 / 12%);
}

.timeline-modern-customer .timeline-modern-dot {
    background: #819aa5;
}

.timeline-modern-hotel .timeline-modern-dot {
    background: var(--db-brand-petrol-700);
}

.timeline-modern-pms .timeline-modern-dot {
    background: var(--db-brand-orange);
}

.timeline-modern-card {
    border-color: #dde6e9;
    border-radius: 15px;
    box-shadow:
        0 9px 26px rgb(24 62 75 / 5%);
    transition:
        transform 170ms ease,
        box-shadow 170ms ease;
}

.timeline-modern-card:hover {
    transform: translateX(3px);
    box-shadow:
        0 14px 34px rgb(24 62 75 / 9%);
}

.timeline-modern-hotel .timeline-modern-card {
    border-left: 4px solid var(--db-brand-petrol-700);
    background:
        linear-gradient(
            100deg,
            rgb(237 244 246 / 68%),
            #ffffff 23%
        );
}

.timeline-modern-customer .timeline-modern-card {
    border-left: 4px solid #819aa5;
}

.timeline-modern-pms .timeline-modern-card {
    border-left: 4px solid var(--db-brand-orange);
    background:
        linear-gradient(
            105deg,
            #fff1e6,
            #fff9f4 18%,
            #ffffff 60%
        );
}

.actor-chip {
    letter-spacing: 0.085em;
}

.actor-chip-customer {
    color: #4d6874;
    background: #e9f0f2;
}

.actor-chip-hotel {
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            var(--db-brand-petrol-700),
            var(--db-brand-petrol-800)
        );
}

.actor-chip-pms {
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            var(--db-brand-orange),
            #ea6700
        );
}

.timeline-version-pill {
    color: #285364;
    border: 1px solid #d5e4e8;
    background: #edf4f6;
}

.timeline-pms-pill {
    color: #994500;
    border: 1px solid #ffddc2;
    background: #fff0e5;
}

.timeline-needs-attention {
    color: #863c00;
    border: 1px solid #ffd4b2;
    background: #ffebdb;
}

.timeline-room-chips > div {
    color: #315863;
    border: 1px solid #dce8eb;
    background: #edf4f6;
}

.timeline-pms-chips > div {
    color: #934100;
    border-color: #ffe0c7;
    background: #fff1e6;
}

/* ---------- Technical area ---------- */

.technical-details-modern {
    border-color: #dce5e8;
    background:
        linear-gradient(
            180deg,
            #f6f9fa,
            #fbfcfc
        );
}

.technical-details-modern > summary:hover {
    background: #f0f5f6;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .brand-signature {
        display: none;
    }

    .timeline-heading-tools {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .site-header .container {
        width: min(100%, calc(100% - 24px));
    }

    .header-content {
        min-height: 66px;
    }

    .brand-wordmark {
        font-size: 1.35rem;
    }

    .header-content nav > span {
        display: none;
    }

    .case-hero::before {
        right: 8px;
        top: 70px;
        font-size: 4.6rem;
    }

    .timeline-legend {
        display: none;
    }
}


/* =========================================================
   4C — Global DeepBooking Cloud Design System
   Applies the official 4B visual language to every existing
   Cloud page without changing form actions, field names,
   routes or business logic.
   ========================================================= */

:root {
    --color-primary: #245465;
    --color-primary-dark: #194859;
    --color-text: #17323d;
    --color-muted: #667981;
    --color-border: #d8e3e7;
    --color-border-input: #c8d7dd;
    --color-surface: #ffffff;
    --color-background: #f4f8f9;

    --color-success: #356858;
    --color-success-bg: #edf6f2;
    --color-error: #9b3d35;
    --color-error-bg: #fff0ed;
    --color-info: #315d6e;
    --color-info-bg: #edf4f6;

    --shadow-card:
        0 14px 40px rgb(20 59 72 / 7%),
        0 2px 8px rgb(20 59 72 / 3%);
}

body {
    color: var(--color-text);
    background:
        radial-gradient(
            circle at 8% 0,
            rgb(53 101 118 / 7%),
            transparent 27rem
        ),
        linear-gradient(
            180deg,
            #edf4f6 0,
            #f7f9fa 260px,
            #f8fafb 100%
        );
}

/* ---------- Global text and links ---------- */

main.container {
    min-height: calc(100vh - 74px);
}

main h1,
main h2,
main h3 {
    color: #194859;
}

main a:not(.primary-button):not(.secondary-button):not(.brand):not(:where(.room-types-page a, .configuration-nav-button, .dashboard-management-actions a)) {
    text-decoration-color: rgb(249 115 4 / 30%);
    text-underline-offset: 3px;
}

main a:not(.primary-button):not(.secondary-button):not(.brand):not(:where(.room-types-page a, .configuration-nav-button, .dashboard-management-actions a)):hover {
    color: #194859;
    text-decoration-color: #f97304;
}

/* ---------- Global controls ---------- */

label {
    color: #244853;
    font-size: 0.87rem;
    font-weight: 720;
}

input,
select,
textarea {
    border-color: #cbd9de;
    border-radius: 10px;
    color: #17323d;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fcfdfd
        );
    box-shadow:
        inset 0 1px 0 rgb(25 72 89 / 2%);
}

input:hover,
select:hover,
textarea:hover {
    border-color: #9eb5be;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #356576;
    box-shadow:
        0 0 0 3px rgb(53 101 118 / 11%),
        0 5px 16px rgb(25 72 89 / 5%);
}

input::placeholder,
textarea::placeholder {
    color: #9aaaae;
}

.primary-button {
    border-color: #f97304;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #fb7b11,
            #f36c00
        );
    box-shadow:
        0 7px 18px rgb(249 115 4 / 14%);
}

.primary-button:hover {
    border-color: #dc6200;
    background:
        linear-gradient(
            135deg,
            #f47106,
            #dc6200
        );
    box-shadow:
        0 11px 25px rgb(249 115 4 / 22%);
}

.secondary-button {
    border-color: #c9d9de;
    color: #245465;
    background: #ffffff;
}

.secondary-button:hover {
    border-color: #9eb7c0;
    color: #194859;
    background: #f2f7f8;
}

.link-button {
    color: #fda06f;
}

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

/* ---------- Alerts ---------- */

.alert {
    border-radius: 12px;
    box-shadow: 0 7px 20px rgb(25 72 89 / 4%);
}

.alert-success {
    color: #315c4e;
    border-color: #cfe2d9;
    background:
        linear-gradient(
            105deg,
            #edf6f2,
            #f9fcfb
        );
}

.alert-info {
    color: #315a69;
    border-color: #d2e1e6;
    background:
        linear-gradient(
            105deg,
            #edf4f6,
            #f9fbfc
        );
}

.alert-error {
    color: #8f3b34;
    border-color: #f0cbc6;
    background:
        linear-gradient(
            105deg,
            #fff0ed,
            #fff9f8
        );
}

/* =========================================================
   Authentication
   ========================================================= */

body:has(.auth-card) {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgb(249 115 4 / 13%),
            transparent 24rem
        ),
        radial-gradient(
            circle at 90% 0,
            rgb(53 101 118 / 20%),
            transparent 34rem
        ),
        linear-gradient(
            155deg,
            #edf4f6,
            #f8fafb 58%,
            #eef4f6
        );
}

.auth-card {
    position: relative;
    overflow: hidden;
    margin-top: 72px;
    padding: 38px;
    border-color: #d5e1e5;
    border-radius: 22px;
    box-shadow:
        0 28px 70px rgb(20 59 72 / 14%),
        0 3px 10px rgb(20 59 72 / 4%);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            #f97304,
            #fda06f 34%,
            #356576 68%,
            #194859
        );
}

.auth-card::after {
    content: "deepBooking";
    position: absolute;
    right: -12px;
    top: 8px;
    color: rgb(36 84 101 / 3.5%);
    font-size: 4.3rem;
    font-weight: 800;
    letter-spacing: -0.075em;
    pointer-events: none;
}

.auth-card h1 {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    letter-spacing: -0.035em;
}

.auth-card .subtitle {
    position: relative;
    z-index: 1;
    color: #718189;
    line-height: 1.55;
}

.auth-card .primary-button {
    min-height: 48px;
    border-radius: 10px;
}

.auth-footer a {
    color: #245465;
    font-weight: 700;
}

/* =========================================================
   Registration
   ========================================================= */

.registration-page {
    max-width: 980px;
    margin-top: 40px;
}

.registration-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 30px 34px;
    border-radius: 20px;
    color: #ffffff;
    text-align: left;
    background:
        radial-gradient(
            circle at 92% 0,
            rgb(249 115 4 / 24%),
            transparent 17rem
        ),
        linear-gradient(
            120deg,
            #356576,
            #245465 48%,
            #194859
        );
    box-shadow:
        0 20px 50px rgb(25 72 89 / 18%);
}

.registration-header::after {
    content: "deepBooking";
    position: absolute;
    right: 18px;
    bottom: -20px;
    color: rgb(255 255 255 / 4%);
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: -0.075em;
}

.registration-header h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 7px;
    color: #f6f8f9;
}

.registration-header p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgb(246 248 249 / 68%);
}

.registration-form {
    gap: 18px;
}

.form-section {
    border-color: #d9e3e7;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

.form-section-header {
    padding-bottom: 17px;
    border-bottom: 1px solid #e7edef;
}

.form-section-header h2 {
    color: #245465;
}

.form-section-header p {
    color: #74858c;
    line-height: 1.5;
}

.form-field small,
.form-group small {
    color: #7a898f;
}

/* =========================================================
   Dashboard / Hotel cards
   ========================================================= */

.dashboard-header {
    position: relative;
    overflow: hidden;
    margin: 34px 0 22px;
    padding: 28px 30px;
    border-radius: 20px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% -20%,
            rgb(249 115 4 / 28%),
            transparent 19rem
        ),
        linear-gradient(
            118deg,
            #356576,
            #245465 46%,
            #194859
        );
    box-shadow:
        0 20px 52px rgb(25 72 89 / 18%);
}

.dashboard-header::after {
    content: "";
    position: absolute;
    right: -85px;
    bottom: -115px;
    width: 270px;
    height: 270px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgb(255 255 255 / 2%),
        0 0 0 56px rgb(255 255 255 / 1.5%);
}

.dashboard-header > * {
    position: relative;
    z-index: 1;
}

.dashboard-header h1 {
    margin-top: 0;
    color: #f6f8f9;
}

.dashboard-header p {
    color: rgb(246 248 249 / 68%);
}

.dashboard-grid {
    gap: 18px;
}

.dashboard-card {
    position: relative;
    overflow: hidden;
    border-color: #d9e3e7;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgb(53 101 118 / 6%),
            transparent 15rem
        ),
        #ffffff;
    box-shadow: var(--shadow-card);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            #245465,
            #356576 62%,
            #f97304
        );
}

.dashboard-card:hover {
    transform: translateY(-3px);
    border-color: #c7d7dc;
    box-shadow:
        0 20px 46px rgb(20 59 72 / 11%),
        0 3px 10px rgb(20 59 72 / 4%);
}

.dashboard-card h2 {
    color: #194859;
}

.card-label {
    color: #f16e04;
}

.dashboard-card dt {
    color: #7a898f;
}

.dashboard-card dd {
    color: #294955;
}

.card-actions {
    border-color: #e6edef;
}

.status-active {
    color: #315f50;
    border: 1px solid #d1e3da;
    background: #edf6f2;
}

.status-inactive {
    color: #8e433d;
    border: 1px solid #efcfcb;
    background: #fff1ef;
}

/* =========================================================
   Hotel Policy
   ========================================================= */

.policy-form {
    gap: 18px;
}

.policy-version-summary {
    position: relative;
    overflow: hidden;
    padding: 18px 20px 18px 24px;
    border-color: #cddde2;
    border-radius: 14px;
    background:
        linear-gradient(
            105deg,
            #edf4f6,
            #ffffff 72%
        );
    box-shadow:
        0 10px 28px rgb(25 72 89 / 6%);
}

.policy-version-summary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #f97304;
}

.policy-version-summary small {
    color: #6d7f86;
}

.policy-section {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-color: #d8e3e7;
    border-radius: 19px;
    box-shadow: var(--shadow-card);
}

.policy-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            #356576,
            #245465
        );
    opacity: 0.9;
}

.policy-section-heading {
    margin-bottom: 22px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e7edef;
}

.policy-section-heading h2 {
    color: #194859;
}

.policy-section-heading p {
    color: #728289;
}

.policy-section-internal {
    border-color: #eadccc;
    background:
        radial-gradient(
            circle at 100% 0,
            rgb(249 115 4 / 7%),
            transparent 18rem
        ),
        linear-gradient(
            135deg,
            #fffaf6,
            #ffffff 60%
        );
}

.policy-section-internal::before {
    background:
        linear-gradient(
            90deg,
            #f97304,
            #fda06f
        );
}

.policy-save-bar {
    bottom: 14px;
    border-color: #cad9de;
    border-radius: 16px;
    background:
        linear-gradient(
            105deg,
            rgb(25 72 89 / 96%),
            rgb(36 84 101 / 96%)
        );
    box-shadow:
        0 20px 46px rgb(19 53 65 / 23%);
}

.policy-save-bar strong {
    color: #ffffff;
}

.policy-save-bar small {
    color: rgb(246 248 249 / 60%);
}

.policy-save-bar .primary-button {
    border-color: #f97304;
    box-shadow:
        0 8px 20px rgb(249 115 4 / 22%);
}

.policy-history {
    border-color: #d9e3e7;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafcfc
        );
    box-shadow:
        0 10px 30px rgb(25 72 89 / 5%);
}

.history-item {
    border-color: #e2eaed;
    background: #ffffff;
    transition:
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}

.history-item:hover {
    transform: translateX(2px);
    border-color: #ccdce1;
    background: #f5f9fa;
}

/* =========================================================
   Reservation queue
   ========================================================= */

.reservation-section {
    margin-top: 4px;
}

.section-heading h2 {
    color: #194859;
}

.reservation-count {
    border-color: #d2dfe3;
    color: #536c76;
    background: #edf4f6;
}

.reservation-table-wrapper {
    border-color: #d6e1e5;
    border-radius: 16px;
    box-shadow:
        0 12px 34px rgb(25 72 89 / 6%);
}

.reservation-table th {
    color: #59717b;
    background:
        linear-gradient(
            180deg,
            #eef4f6,
            #eaf1f3
        );
}

.reservation-table th,
.reservation-table td {
    border-bottom-color: #e8eef0;
}

.reservation-table tbody tr {
    transition: background 130ms ease;
}

.reservation-table tbody tr:hover {
    background: #f3f8f9;
}

.reservation-link {
    color: #245465;
}

.reservation-link:hover {
    color: #194859;
}

.case-status {
    color: #315b6b;
    border: 1px solid #d2e1e6;
    background: #edf4f6;
}

.offer-status {
    color: #994600;
    border: 1px solid #ffdfc7;
    background: #fff1e6;
}

.table-warning {
    color: #9a4a08;
}

/* =========================================================
   Legacy detail / generic cards that may still exist
   ========================================================= */

.detail-card,
.reservation-version-card,
.working-card,
.source-card {
    border-color: #d8e3e7;
    border-radius: 16px;
    box-shadow:
        0 10px 30px rgb(25 72 89 / 5%);
}

.reservation-version-current {
    border-color: #bcd0d7;
    box-shadow:
        0 10px 28px rgb(36 84 101 / 8%);
}

.back-link {
    color: #245465;
}

.back-link:hover {
    color: #194859;
}

/* =========================================================
   Empty states
   ========================================================= */

.empty-state,
.detail-empty-block {
    border-color: #cbdce1;
    color: #657981;
    background:
        radial-gradient(
            circle at 50% 0,
            rgb(53 101 118 / 5%),
            transparent 12rem
        ),
        #ffffff;
}

/* =========================================================
   Responsive global polish
   ========================================================= */

@media (max-width: 720px) {
    .registration-header,
    .dashboard-header {
        padding: 24px 22px;
        border-radius: 17px;
    }

    .policy-section {
        padding: 22px;
    }

    .policy-save-bar {
        bottom: 8px;
    }

    .auth-card {
        margin-top: 40px;
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .registration-header,
    .dashboard-header {
        margin-left: -2px;
        margin-right: -2px;
    }

    .auth-card {
        padding: 25px 22px;
    }

    .policy-section {
        padding: 19px;
    }
}


/* =========================================================
   4D — Booking Control Center completeness + PMS editor
   ========================================================= */

.state-date-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 11px;
}

.state-date-grid > div,
.state-date-grid > label {
    min-width: 0;
    display: block;
    padding: 11px 12px;
    border: 1px solid #dce6e9;
    border-radius: 11px;
    background:
        linear-gradient(
            180deg,
            #f9fbfb,
            #f3f7f8
        );
}

.state-date-grid span {
    display: block;
    margin-bottom: 5px;
    color: #6f8188;
    font-size: 0.64rem;
    font-weight: 750;
}

.state-date-grid strong {
    display: block;
    color: #194859;
    font-size: 0.83rem;
    white-space: nowrap;
}

.state-secondary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.state-secondary-meta > div {
    min-width: 130px;
    flex: 1 1 130px;
    padding: 8px 10px;
    border-left: 2px solid #d7e3e7;
}

.state-secondary-meta span {
    display: block;
    margin-bottom: 2px;
    color: #7a8a90;
    font-size: 0.61rem;
}

.state-secondary-meta strong {
    color: #294c58;
    font-size: 0.73rem;
}

.pms-date-editor-grid label {
    padding: 9px 10px 10px;
}

.pms-date-editor-grid input {
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
}

.pms-editor-form {
    display: block;
}

.pms-editor-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 17px 0 9px;
}

.pms-editor-heading > div:first-child {
    display: grid;
    gap: 2px;
}

.pms-editor-heading strong {
    color: #194859;
    font-size: 0.82rem;
}

.pms-editor-heading span {
    color: #75858c;
    font-size: 0.66rem;
}

.pms-allocation-total {
    flex: 0 0 auto;
    text-align: right;
}

.pms-allocation-total span {
    display: block;
    color: #7a898f;
    font-size: 0.6rem;
}

.pms-allocation-total strong {
    color: #245465;
    font-size: 0.8rem;
}

.pms-allocation-total strong.pms-total-mismatch {
    color: #b44b19;
}

.pms-editor-lines {
    display: grid;
    gap: 10px;
}

.pms-editor-row {
    padding: 12px;
    border: 1px solid #ead9ca;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgb(249 115 4 / 5%),
            transparent 9rem
        ),
        linear-gradient(
            180deg,
            #fffdfb,
            #fff9f5
        );
}

.pms-editor-row-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        92px;
    gap: 8px;
}

.pms-editor-row-commercial {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.15fr)
        minmax(90px, 0.75fr)
        70px
        minmax(130px, 1fr)
        34px;
    gap: 7px;
    align-items: end;
    margin-top: 8px;
}

.pms-editor-row label {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pms-editor-row label > span {
    color: #74858c;
    font-size: 0.59rem;
    font-weight: 750;
}

.pms-editor-row input,
.pms-editor-row select {
    width: 100%;
    min-height: 36px;
    padding: 6px 7px;
    border-radius: 8px;
    font-size: 0.7rem;
}

.pms-remove-line {
    width: 34px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #efd5c1;
    border-radius: 8px;
    color: #a24b0f;
    background: #fff7f1;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

.pms-remove-line:hover:not(:disabled) {
    border-color: #f1b98e;
    color: #843a08;
    background: #ffecdd;
}

.pms-remove-line:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pms-editor-origin {
    display: inline-block;
    margin-top: 8px;
}

.pms-editor-add-row {
    margin-top: 10px;
}

.pms-editor-add-row .secondary-button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.67rem;
}

.pms-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eee1d7;
}

.pms-editor-actions .primary-button,
.pms-editor-actions .secondary-button,
.pms-open-editor-form .primary-button {
    min-height: 39px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: 0.7rem;
}

.pms-open-editor-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .pms-editor-row-commercial {
        grid-template-columns:
            1fr 1fr 80px;
    }

    .pms-editor-row-commercial label:nth-child(4) {
        grid-column: 1 / 3;
    }

    .pms-remove-line {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 680px) {
    .state-date-grid {
        grid-template-columns: 1fr;
    }

    .pms-editor-row-main,
    .pms-editor-row-commercial {
        grid-template-columns: 1fr;
    }

    .pms-editor-row-commercial label:nth-child(4),
    .pms-remove-line {
        grid-column: auto;
        grid-row: auto;
    }

    .pms-remove-line {
        width: 100%;
    }

    .pms-editor-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pms-allocation-total {
        text-align: left;
    }

    .pms-editor-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pms-editor-actions button,
    .pms-open-editor-form button {
        width: 100%;
    }
}


/* =========================================================
   4E — Group identity + PMS cleanup
   ========================================================= */

.case-hero-case-number {
    margin: 8px 0 0;
    color: rgb(246 248 249 / 62%);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.055em;
}

.state-group-field {
    display: block;
    margin-bottom: 10px;
    padding: 12px 13px;
    border: 1px solid #dce6e9;
    border-radius: 11px;
    background:
        linear-gradient(
            180deg,
            #fbfcfc,
            #f4f8f9
        );
}

.state-group-field > span {
    display: block;
    margin-bottom: 5px;
    color: #6f8188;
    font-size: 0.64rem;
    font-weight: 750;
}

.state-group-field > strong {
    display: block;
    overflow: hidden;
    color: #194859;
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.state-group-field-hotel {
    border-left: 3px solid #356576;
}

.state-group-field-pms,
.pms-group-editor {
    border-left: 3px solid #f97304;
}

.pms-group-editor input {
    width: 100%;
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

.pms-editor-row-commercial {
    grid-template-columns:
        minmax(120px, 1.15fr)
        minmax(90px, 0.75fr)
        minmax(130px, 1fr)
        34px;
}

@media (max-width: 1100px) {
    .pms-editor-row-commercial {
        grid-template-columns:
            1fr 1fr;
    }

    .pms-editor-row-commercial label:nth-child(3) {
        grid-column: 1 / 2;
    }

    .pms-remove-line {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }
}

@media (max-width: 680px) {
    .state-group-field > strong {
        white-space: normal;
    }

    .pms-editor-row-commercial,
    .pms-editor-row-commercial label:nth-child(3),
    .pms-remove-line {
        grid-template-columns: 1fr;
        grid-column: auto;
        grid-row: auto;
    }
}

/* Room-type links use the dashboard action-button treatment. */
.room-types-page a,
.room-types-page a:visited,
a.configuration-nav-button,
a.configuration-nav-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 14px 18px;
    border: 1px solid #ffffff45;
    border-radius: 12px;
    background: #315f6e;
    color: #fff;
    font-weight: 650;
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.room-types-page a:hover,
.room-types-page a:focus,
.room-types-page a:active,
a.configuration-nav-button:hover,
a.configuration-nav-button:focus,
a.configuration-nav-button:active {
    color: #ffba87;
    background: #3e6b79;
    border-color: #ffba87;
}
.room-types-page a:focus-visible,
a.configuration-nav-button:focus-visible {
    outline: 3px solid #ffba87;
    outline-offset: 3px;
}
.room-types-page a > span,
a.configuration-nav-button > span { color: #ffba87; }
.room-types-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}
.room-types-navigation a { min-width: 180px; }
.room-types-page > .form-section + .form-section { margin-top: 28px; }
@media (max-width: 480px) {
    .room-types-navigation a { width: 100%; }
}

a.configuration-nav-button { min-width: 180px; }

.mailbox-navigation { display: flex; justify-content: flex-start; margin: 24px 0; }

/* Shared settings action in the authenticated header. */
.site-header .header-settings-link,
.site-header .header-settings-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #f97304;
    border-radius: 10px;
    text-decoration: none;
}
.site-header .header-settings-link:hover,
.site-header .header-settings-link:focus-visible,
.site-header .header-settings-link:active {
    color: #ffba87;
    background: rgb(249 115 4 / 12%);
}
.site-header .header-settings-link:focus-visible {
    outline: 2px solid #f97304;
    outline-offset: 2px;
}

/* Compact reservation facts: one row, sized to labels and values. */
.case-visual-page .case-hero-main {
    grid-template-columns: minmax(0, 1fr) max-content;
}
.case-visual-page .case-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    justify-content: start;
}
.case-visual-page .case-hero-facts > div {
    min-width: 0;
    padding: 12px 14px;
    box-sizing: border-box;
}
.case-visual-page .case-hero-facts > div:first-child {
    grid-column: auto;
}
.case-visual-page .case-hero-facts span,
.case-visual-page .case-hero-facts strong {
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .case-visual-page .case-hero-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Shared actor colors across the reservation flow and chronology. */
.case-visual-page {
    --case-customer-color: #27845a;
    --case-hotel-color: #183e52;
    --case-pms-color: var(--db-brand-orange);
}

.case-visual-page .flow-step-customer .flow-dot,
.case-visual-page .timeline-legend-customer i,
.case-visual-page .timeline-modern-customer .timeline-modern-dot {
    background: var(--case-customer-color);
}
.case-visual-page .flow-step-customer .flow-dot {
    box-shadow: 0 0 0 4px rgb(255 255 255 / 16%);
}
.case-visual-page .timeline-modern-customer .timeline-modern-card {
    border-left-color: var(--case-customer-color);
}
.case-visual-page .actor-chip-customer {
    color: #fff;
    background: var(--case-customer-color);
}

.case-visual-page .flow-step-hotel .flow-dot,
.case-visual-page .timeline-legend-hotel i,
.case-visual-page .timeline-modern-hotel .timeline-modern-dot {
    background: var(--case-hotel-color);
}
.case-visual-page .flow-step-hotel .flow-dot {
    box-shadow: 0 0 0 4px rgb(255 255 255 / 16%);
}
.case-visual-page .timeline-modern-hotel .timeline-modern-card {
    border-left-color: var(--case-hotel-color);
}
.case-visual-page .actor-chip-hotel {
    color: #fff;
    background: var(--case-hotel-color);
}

.case-visual-page .flow-step-pms .flow-dot,
.case-visual-page .timeline-legend-pms i,
.case-visual-page .timeline-modern-pms .timeline-modern-dot {
    background: var(--case-pms-color);
}
.case-visual-page .flow-step-pms .flow-dot {
    box-shadow: 0 0 0 4px rgb(255 255 255 / 16%);
}
.case-visual-page .timeline-modern-pms .timeline-modern-card {
    border-left-color: var(--case-pms-color);
}
.case-visual-page .actor-chip-pms {
    color: #fff;
    background: var(--case-pms-color);
}

/* Keep each control heading with its panel on desktop and mobile. */
.case-visual-page .state-control-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.case-visual-page .state-control-column > .state-panel {
    flex: 1;
}
.case-visual-page .state-column-title {
    margin: 0 0 18px;
    font-size: 1.38rem;
    line-height: 1.25;
    color: var(--case-hotel-color);
}
.case-visual-page .state-column-title-pms {
    color: var(--case-pms-color);
}

.case-visual-page .hotel-response-alignment {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin: 0 0 20px;
    border: 1px solid #d3e1e5;
    border-radius: 14px;
    color: var(--case-hotel-color);
    background: #edf4f6;
}
.case-visual-page .hotel-response-alignment .attention-clear-icon {
    background: var(--case-hotel-color);
}
.case-visual-page .hotel-response-alignment-alert {
    color: #b42318;
    background: #fff1f0;
    border-color: #f3b5af;
}
.case-visual-page .hotel-response-alignment-alert .attention-clear-icon {
    background: #b42318;
}

.case-visual-page .hotel-state-panel .state-secondary-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.case-visual-page .hotel-state-panel .state-secondary-meta > div {
    min-width: 0;
}
@media (max-width: 680px) {
    .case-visual-page .hotel-state-panel .state-secondary-meta {
        grid-template-columns: 1fr;
    }
}

.site-header .header-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f97304;
    box-shadow: none;
    cursor: pointer;
}
.site-header .header-logout-button:hover,
.site-header .header-logout-button:focus-visible,
.site-header .header-logout-button:active {
    color: #ffba87;
    background: rgb(249 115 4 / 12%);
}
.site-header .header-logout-button:focus-visible {
    outline: 2px solid #f97304;
    outline-offset: 2px;
}

/* Keep customer data and its compact reply action on one row. */
.case-visual-page .timeline-modern-customer .timeline-modern-card { min-width: 0; }
.case-visual-page .timeline-customer-data-row {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    margin-top: 10px;
    padding-bottom: 4px;
}
.case-visual-page .timeline-customer-data-row .timeline-modern-changes {
    flex-wrap: nowrap;
    flex: 1 0 auto;
    margin-top: 0;
    gap: 6px;
}
.case-visual-page .timeline-customer-data-row .timeline-modern-changes > div {
    min-width: 0;
    padding: 6px 8px;
    white-space: nowrap;
}
.case-visual-page .timeline-customer-data-row .timeline-modern-changes strong { font-size: .68rem; }
.case-visual-page .timeline-reply-action {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px;
}
.case-visual-page .timeline-reply-action .configuration-nav-button {
    min-width: 0;
    padding: 7px 9px;
    gap: 5px;
    font-size: .65rem;
    white-space: nowrap;
    border-radius: 8px;
}
.case-visual-page .timeline-reply-action svg { flex-shrink: 0; }

/* PMS uses the same information hierarchy as the commercial state. */
.case-visual-page .pms-transmission-status { color: #a84e00; background: #fff3e9; border-color: #ffd5b5; }
.case-visual-page .pms-transmission-status .attention-clear-icon { background: #f97304; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.case-visual-page .pms-state-panel .state-secondary-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.case-visual-page .pms-source-note { color: #7d551e; font-size: .85rem; padding: 12px; background: #fff3e9; border-radius: 10px; }
@media(max-width: 680px) { .case-visual-page .pms-state-panel .state-secondary-meta { grid-template-columns: 1fr; } }