/* ==========================================================================
   Environment identification (§3.6)

   Training is given a deliberately different chrome from Live: an amber/ochre
   palette that reads as "not production" at a glance, plus a persistent banner
   and a diagonal watermark on any printable document. Live styling is
   unchanged — the absence of all of this is the Live signal.
   ========================================================================== */

.env-banner {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 16px;
    background: repeating-linear-gradient(
        45deg,
        #b45309, #b45309 14px,
        #92400e 14px, #92400e 28px
    );
    color: #fff;
    font: 600 12.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.env-banner__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fde68a;
    box-shadow: 0 0 0 3px rgba(253, 230, 138, .3);
    animation: env-pulse 2.4s ease-in-out infinite;
    flex: none;
}

@keyframes env-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .env-banner__dot { animation: none; }
}

/* --- Training chrome ---------------------------------------------------- */

body.env-training .topbar {
    background: #78350f;
    border-bottom: 3px solid #f59e0b;
    color: #fffbeb;
}

body.env-training .sidebar .brand {
    background: #78350f;
    color: #fffbeb;
    border-bottom: 3px solid #f59e0b;
}

body.env-training .topbar a,
body.env-training .topbar .btn-ghost,
body.env-training .topbar .user-chip,
body.env-training .topbar .business-date {
    color: #fffbeb;
}

body.env-training .login-card {
    border-top: 5px solid #b45309;
}

/* Environment chip shown next to the property selector. */
.env-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font: 700 10.5px/1.4 system-ui, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.env-chip--live {
    background: rgba(16, 185, 129, .14);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .45);
}

.env-chip--training {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

/* --- Document watermark (§3.6) ------------------------------------------
   Applied to receipts, registration cards, folios, reports and any exported
   or printed document produced in Training. Kept behind content and non-
   interactive so it can never obscure or intercept the page.
   ------------------------------------------------------------------------ */

.doc-watermark {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.doc-watermark span {
    transform: rotate(-32deg);
    font: 800 clamp(18px, 4.2vw, 46px)/1.25 system-ui, sans-serif;
    letter-spacing: .12em;
    text-align: center;
    color: rgba(180, 83, 9, .13);
    border: 6px solid rgba(180, 83, 9, .13);
    border-radius: 14px;
    padding: 22px 40px;
    max-width: 85vw;
    text-transform: uppercase;
    user-select: none;
}

body.env-training .content,
body.env-training .doc-sheet {
    position: relative;
    z-index: 1;
}

/* Printed output keeps the banner and watermark. */
@media print {
    .env-banner {
        position: static;
        background: #92400e !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .doc-watermark {
        position: fixed;
        display: flex !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .doc-watermark span {
        color: rgba(180, 83, 9, .22) !important;
        border-color: rgba(180, 83, 9, .22) !important;
    }
}

/* ==========================================================================
   Room-status board (§5.2, §20)

   Three axes, three colour families. The point is that a glance at a row tells
   you all three conditions independently — the single-status board could not.
   Colours are consistent everywhere a status appears.
   ========================================================================== */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.stat-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #94a3b8;
    border-radius: 8px;
    padding: 10px 12px;
}

.stat-tile__value { font: 700 22px/1.1 system-ui, sans-serif; color: #0f172a; }
.stat-tile__label { font-size: 11.5px; color: #64748b; margin-top: 3px; letter-spacing: .02em; }
.stat-tile__meta  { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }

.stat-tile--ok     { border-left-color: #059669; }
.stat-tile--warn   { border-left-color: #d97706; }
.stat-tile--danger { border-left-color: #dc2626; }

/* --- Status pills -------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font: 600 11px/1.5 system-ui, sans-serif;
    white-space: nowrap;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

/* Occupancy — blue family (Front Office owns it) */
.pill-occ-occupied     { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.pill-occ-vacant       { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.pill-occ-due_in       { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.pill-occ-due_out      { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.pill-occ-checked_out  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.pill-occ-skipper      { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pill-occ-sleep_out    { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.pill-occ-no_show      { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Housekeeping — green/amber family (Housekeeping owns it) */
.pill-hk-clean,
.pill-hk-ready_for_sale,
.pill-hk-inspected            { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.pill-hk-dirty                { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
.pill-hk-cleaning_in_progress { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.pill-hk-inspection_pending   { background: #fde68a; color: #78350f; border-color: #fbbf24; }
.pill-hk-pickup               { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.pill-hk-dnd,
.pill-hk-refused_service      { background: #e5e7eb; color: #374151; border-color: #9ca3af; }
.pill-hk-awaiting_maintenance { background: #fecaca; color: #991b1b; border-color: #f87171; }
.pill-hk-deep_cleaning        { background: #cffafe; color: #155e75; border-color: #67e8f9; }
.pill-hk-turndown_pending,
.pill-hk-turndown_completed   { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

/* Operational — red family (Management/Maintenance owns it) */
.pill-op-in_service          { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.pill-op-out_of_order        { background: #fecaca; color: #7f1d1d; border-color: #f87171; }
.pill-op-out_of_service      { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
.pill-op-temporarily_blocked,
.pill-op-management_block    { background: #e9d5ff; color: #6b21a8; border-color: #d8b4fe; }
.pill-op-show_room           { background: #cffafe; color: #155e75; border-color: #67e8f9; }
.pill-op-house_use           { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* --- Badges & rows ------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font: 600 10px/1.6 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #e2e8f0;
    color: #475569;
}
.badge-ok     { background: #d1fae5; color: #065f46; }
.badge-warn   { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-muted  { background: #f1f5f9; color: #64748b; }

tr.row-alert { background: #fff7ed; }
tr.row-alert td { border-top-color: #fdba74; }

.room-board td { vertical-align: middle; }
.table-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.plain-list { list-style: none; padding: 0; margin: 8px 0; }
.plain-list li { padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
.filters { flex-wrap: wrap; gap: 8px; align-items: end; }
.check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.btn-sm { padding: 3px 9px; font-size: 12px; }
.card-danger { border-left: 3px solid #dc2626; }
.stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 640px; }

/* --- Guest profile forms (§9.3) ------------------------------------------
   A two-column grid so the long §9.3 field set stays scannable rather than
   becoming a single tall column.
   ------------------------------------------------------------------------ */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 18px;
    margin: 10px 0;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #475569;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

.country-select { max-width: 100%; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}


/* --- Guest form: progressive disclosure (§9.3) ----------------------------
   Cards inside .stack (a flex column with align-items:flex-start) collapse to
   their content width; stretch them so the two-column .form-grid can breathe.
   Optional field sets are collapsed into <details> groups so the create form
   opens with only the fields the front desk actually needs.
   ------------------------------------------------------------------------ */

.guest-form { align-items: stretch; }
.guest-form > .card,
.guest-form > details { align-self: stretch; width: 100%; box-sizing: border-box; }

.form-hint { font-size: 12.5px; color: #64748b; margin: 4px 0 10px; }

details.field-group {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    margin: 8px 0;
}
details.field-group > summary {
    cursor: pointer;
    padding: 11px 14px;
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
details.field-group > summary::-webkit-details-marker { display: none; }
details.field-group > summary::before { content: '\25B8'; font-size: 11px; color: #64748b; }
details.field-group[open] > summary::before { content: '\25BE'; }
details.field-group[open] > summary { border-bottom: 1px solid #eef2f7; }
details.field-group > .field-group-body { padding: 4px 14px 14px; }