[x-cloak] { display: none !important; }

/* Chinese (zh_CN) — CJK reads smaller at the same px; scale rem-based UI ~1.2× */
html[lang="zh-CN"] {
    font-size: 120%;
}

/* zh-CN: rem text grows but Tailwind w-[180px] sidebars stay fixed — widen + wrap */
html[lang="zh-CN"] .t1-nav {
    width: 14rem !important;
    min-width: 14rem;
}
html[lang="zh-CN"] .t1-nav button,
html[lang="zh-CN"] .t1-nav p {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}
html[lang="zh-CN"] .shop-app-header {
    flex-wrap: wrap;
    gap: 0.5rem;
}
html[lang="zh-CN"] .shop-product-card__head,
html[lang="zh-CN"] .shop-product-card__foot {
    flex-wrap: wrap;
    gap: 0.375rem;
}
html[lang="zh-CN"] .shop-product-card__name {
    min-width: 0;
    flex: 1 1 8rem;
}
html[lang="zh-CN"] .shop-product-card__foot .shop-sell-btn {
    margin-left: auto;
}

/* ════════════════════════════════════════════════════════════
   Template 1 — subpanel layout
   <aside class="t1-nav w-[180px]">   left nav pane
   <div   class="t1-content">         right content pane
   ════════════════════════════════════════════════════════════ */

/* Left nav pane: white bg, right border, rounded left corners.
   Width is NOT set here — use w-[180px] or w-[200px] alongside. */
.t1-nav {
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #fff;
    border-top-left-radius: 0.5rem;     /* rounded-tl-lg */
    border-bottom-left-radius: 0.5rem;  /* rounded-bl-lg */
}

/* Right content pane: no background, padded, scrollable.
   Individual cards inside use .section-white-box for white boxes. */
.t1-content {
    flex: 1 1 0%;
    padding: 1.25rem 1.5rem;            /* py-5 px-6 */
    overflow-y: auto;
    min-width: 0;
}

/* ── Help popup trigger — apply to any element ────────────── */
.help_popup {
    font-style: italic;
    color: #555;
    cursor: pointer;
}

/* ── White section box ─────────────────────────────────────── */
.section-white-box {
    background: #fff;
    padding: 14px 16px;
}

/* Income split cards — clickable, near-white hover tint per bucket */
.income-split-card {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.income-split-card--recorded:hover { background-color: #f6fef9; }
.income-split-card--pending:hover { background-color: #fffdf6; }
.income-split-card--to-be-recorded:hover { background-color: #f6fbff; }

/* ── Striped section table ─────────────────────────────────── */
/* Use alongside component-specific table classes (e.g. .fm-table).
   Component CSS (loaded after this file) can override padding, borders, etc. */
.section-table {
    width: 100%;
    border-collapse: collapse;
}
.section-table thead tr {
    border-bottom: 2px solid #e5e7eb;
    color: var(--dmk-text-muted-min);
}
.section-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
}
.section-table td {
    padding: 6px 8px;
}
.section-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}
.section-table tbody tr:nth-child(even) {
    background: #f9fafb;
}
.section-table tbody tr.section-table-row--warning,
.section-table tbody tr.section-table-row--warning:nth-child(even) {
    background: #fffbeb;
}
.section-table tbody tr.section-table-row--prepaid,
.section-table tbody tr.section-table-row--prepaid:nth-child(even) {
    background: #ecfdf5;
}

.section-table--compact th,
.section-table--compact td {
    padding: 4px 6px;
    font-size: 0.75rem;
    vertical-align: middle;
}
.section-table--compact select {
    font-size: 0.7rem;
    padding: 2px 4px;
    max-width: 7.5rem;
}
.section-table--compact input[type="number"] {
    font-size: 0.7rem;
    width: 2.75rem;
    padding: 2px 4px;
}

/* Minimum muted text — matches Revenue bucket hints (text-gray-500 / “Officially logged”).
   app.css loads after Tailwind CDN and per-app CSS so this is the app-wide floor. */
:root {
    --dmk-text-muted-min: #6b7280;
    --dmk-foreign-currency: #555;
    /* Revenue chart — slate greys, spaced for legibility on white */
    --dmk-revenue-rooms: #0f172a;
    --dmk-revenue-fnb: #475569;
    --dmk-revenue-transport: #94a3b8;
    --dmk-revenue-other: #cbd5e1;
    --dmk-occupancy-bar: #64748b;
}

.occupancy-bar { background-color: var(--dmk-occupancy-bar); }

.revenue-swatch-rooms,
.revenue-bar-rooms { background-color: var(--dmk-revenue-rooms); }
.revenue-swatch-fnb,
.revenue-bar-fnb { background-color: var(--dmk-revenue-fnb); }
.revenue-swatch-transport,
.revenue-bar-transport { background-color: var(--dmk-revenue-transport); }
.revenue-swatch-other,
.revenue-bar-other { background-color: var(--dmk-revenue-other); }

/* CNY · USD · THB lines under LAK amounts — app-wide */
.money-amount-foreign,
.money-amount .money-amount-foreign {
    color: var(--dmk-foreign-currency);
}

.text-gray-300,
.text-gray-400,
.text-gray-500 {
    color: var(--dmk-text-muted-min);
}

.fm-table thead th,
.fm-settings-row .fm-s-hint {
    color: var(--dmk-text-muted-min);
}