:root {
    --bg: #f7f2e9;
    --surface: #fffdf9;
    --surface-2: #fbf8f2;
    --text: #181714;
    --muted: #777168;
    --line: #ddd5c8;
    --line-strong: #cfc4b4;
    --orange: #cb3f0c;
    --orange-dark: #a93209;
    --orange-soft: #fff0e8;
    --gold: #b67900;
    --gold-soft: #fff5d7;
    --green: #24854b;
    --green-soft: #eaf6ed;
    --gray-soft: #f0eee9;
    --danger: #c62828;
    --shadow: 0 10px 32px rgba(71, 52, 28, .08);
    --shadow-soft: 0 4px 16px rgba(71, 52, 28, .06);
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 16px;
}

* { box-sizing: border-box; }
html { font-size: 16px; background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 92% 3%, rgba(203, 63, 12, .05), transparent 18rem),
        var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.app-main {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 22px 18px 36px;
}
.app-main.has-bottom-nav { padding-bottom: 108px; }

.desktop-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 253, 249, .92);
    border-bottom: 1px solid rgba(207, 196, 180, .7);
    backdrop-filter: blur(16px);
}
.desktop-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .02em;
}
.brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: #fff;
}
.desktop-link {
    text-decoration: none;
    color: #4d473f;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 12px;
}
.desktop-link:hover { background: var(--gray-soft); color: var(--text); }

.mobile-bottom-nav {
    position: fixed;
    z-index: 1040;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95);
    border-top: 1px solid rgba(207, 196, 180, .72);
    backdrop-filter: blur(18px);
    box-shadow: 0 -8px 28px rgba(61, 46, 25, .08);
}
.bottom-nav-item {
    min-height: 58px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: #8c8983;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
}
.bottom-nav-item i { font-size: 1.35rem; line-height: 1; }
.bottom-nav-item.active { color: var(--orange); }
.bottom-nav-item.active::after {
    content: "";
    width: 38px;
    height: 3px;
    border-radius: 10px;
    margin-top: 2px;
    background: var(--orange);
}

.mobile-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 6px 0 22px;
}
.page-heading {
    margin: 0;
    font-size: clamp(1.85rem, 7vw, 2.65rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.025em;
}
.page-subtitle { color: var(--muted); margin-top: 7px; font-size: .98rem; }
.icon-button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid var(--line);
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.82);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}
.icon-button i { font-size: 1.25rem; }
.back-button { border-radius: 50%; }

.hero-card,
.app-card {
    background: rgba(255, 253, 249, .93);
    border: 1px solid rgba(221, 213, 200, .86);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}
.hero-card { padding: 22px; }
.app-card { padding: 20px; }

.hero-brand-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hero-title { margin: 0; font-size: clamp(1.8rem, 6vw, 2.65rem); font-weight: 900; letter-spacing: -.03em; }
.hero-caption { color: var(--muted); margin-top: 8px; }
.status-online {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--green);
    background: var(--green-soft);
    font-weight: 850;
}
.status-online.offline { color: #716d65; background: #ece9e3; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.hero-key-art {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #cdbb9e;
    background: linear-gradient(145deg, #fff, #f0e8da);
    font-size: 2rem;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 2px 14px;
}
.section-title { margin: 0; font-size: 1.45rem; font-weight: 900; }
.section-help { color: var(--muted); font-size: .88rem; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.stat-card {
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}
.stat-card.gold { background: var(--gold-soft); border-color: #e6c570; }
.stat-card.orange { background: var(--orange-soft); border-color: #efb399; }
.stat-label { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: #5d574f; font-weight: 800; }
.stat-card.gold .stat-label, .stat-card.gold .stat-value { color: var(--gold); }
.stat-card.orange .stat-label, .stat-card.orange .stat-value { color: var(--orange); }
.stat-value { margin-top: 5px; font-size: clamp(1.9rem, 7vw, 2.45rem); line-height: 1; font-weight: 900; }
.stat-unit { font-size: .8rem; font-weight: 800; margin-left: 4px; }

.locker-mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.locker-tile {
    min-width: 0;
    min-height: 96px;
    padding: 13px 12px;
    border: 1.5px solid var(--line);
    border-radius: 17px;
    background: rgba(255,255,255,.92);
    color: var(--text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .15s ease, box-shadow .15s ease;
}
button.locker-tile { width: 100%; text-align: left; }
.locker-tile:not(.disabled):active { transform: scale(.98); }
.locker-tile.reserved { border-color: #d79b12; background: var(--gold-soft); }
.locker-tile.ready { border-color: #ea6c35; background: var(--orange-soft); }
.locker-no { font-size: 1.35rem; font-weight: 900; line-height: 1; }
.locker-state-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .79rem; font-weight: 800; color: #69645d; }
.locker-state-line .mini-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #d3d1cc; }
.locker-tile.reserved .locker-state-line { color: var(--gold); }
.locker-tile.reserved .mini-dot { background: #d99a00; }
.locker-tile.ready .locker-state-line { color: var(--orange); }
.locker-tile.ready .mini-dot { background: var(--orange); }

.primary-cta,
.btn-mobile-primary {
    min-height: 58px;
    border: 0;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #dc4d12, var(--orange));
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(203, 63, 12, .2);
}
.primary-cta { width: 100%; margin-top: 18px; }
.primary-cta:hover, .btn-mobile-primary:hover { color: #fff; background: linear-gradient(135deg, #ca410d, var(--orange-dark)); }

.today-list { display: grid; gap: 10px; }
.today-item {
    background: rgba(255,255,255,.86);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.today-item-title { font-weight: 900; }
.today-item-sub { color: var(--muted); font-size: .88rem; margin-top: 3px; }

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 17px;
    box-shadow: var(--shadow-soft);
}
.search-box i { color: #8a867f; font-size: 1.15rem; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 1rem; }
.search-box button { border: 0; background: transparent; color: var(--orange); font-weight: 900; }
.filter-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 8px;
    margin: 12px -1px 2px;
    scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.8);
    color: #625d55;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 850;
}
.filter-chip.active { color: #fff; background: var(--orange); border-color: var(--orange); }
.filter-chip.orange { color: var(--orange); border-color: #f0bca7; background: var(--orange-soft); }
.filter-chip.gold { color: var(--gold); border-color: #e7cc86; background: var(--gold-soft); }
.filter-chip.green { color: var(--green); border-color: #bcdcc8; background: var(--green-soft); }

.guest-list { display: grid; gap: 13px; margin-top: 14px; }
.guest-card {
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 17px;
    box-shadow: var(--shadow-soft);
}
.guest-top { display: flex; justify-content: space-between; gap: 12px; }
.guest-name { font-size: 1.18rem; font-weight: 900; }
.guest-meta { color: #5f5a53; font-size: .93rem; margin-top: 2px; }
.pin-mini { text-align: right; }
.pin-mini-label { color: var(--muted); font-size: .72rem; }
.pin-mini-value { font-size: 1.3rem; font-weight: 950; letter-spacing: .04em; }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 900;
}
.status-pill.waiting { color: var(--gold); background: var(--gold-soft); }
.status-pill.ready { color: var(--orange); background: var(--orange-soft); }
.status-pill.picked { color: var(--green); background: var(--green-soft); }
.status-pill.cancelled, .status-pill.expired { color: #716b63; background: #efede9; }
.guest-card-footer { margin-top: 13px; padding-top: 12px; border-top: 1px solid #ece7df; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.guest-time { color: var(--muted); font-size: .86rem; }
.detail-link { color: var(--orange); text-decoration: none; font-weight: 900; }

.form-stack { display: grid; gap: 14px; }
.form-section {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-soft);
}
.form-section-title { font-size: 1.2rem; font-weight: 900; margin: 0 0 14px; }
.mobile-field { position: relative; margin-bottom: 11px; }
.mobile-field:last-child { margin-bottom: 0; }
.mobile-field .field-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #48443e;
    font-size: 1.08rem;
    pointer-events: none;
}
.mobile-field .form-control,
.mobile-field .form-select {
    min-height: 56px;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding-left: 45px;
    background-color: #fff;
    font-size: 1rem;
    box-shadow: none;
}
.mobile-field .form-control:focus,
.mobile-field .form-select:focus {
    border-color: #df8e69;
    box-shadow: 0 0 0 4px rgba(203, 63, 12, .08);
}
.field-label { display: block; color: var(--muted); font-size: .78rem; font-weight: 800; margin: 0 0 6px 2px; }
.auto-slot-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e4c77a;
    border-radius: 16px;
    background: var(--gold-soft);
}
.auto-slot-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: grid; place-items: center; background: #fff7df; color: var(--gold); font-size: 1.3rem; }
.auto-slot-title { font-weight: 900; }
.auto-slot-sub { color: #856d37; font-size: .82rem; margin-top: 2px; }
.form-actions-sticky { position: sticky; bottom: 82px; z-index: 20; margin-top: 14px; }

.detail-shell { max-width: 720px; margin: 0 auto; }
.detail-status-bar { margin: 12px 0 16px; }
.detail-info-card { padding: 4px 17px; }
.detail-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid #ebe5dc; }
.detail-row:last-child { border-bottom: 0; }
.detail-row i { color: #4e4942; font-size: 1.1rem; }
.detail-label { color: #5f5a53; }
.detail-value { text-align: right; font-weight: 900; }
.pin-hero {
    margin: 14px 0;
    padding: 18px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(145deg, #fff7f2, #fff0e7);
    border: 1px solid #f1b497;
}
.pin-hero-label { color: var(--orange); font-weight: 850; }
.pin-hero-value { margin-top: 2px; color: var(--orange); font-size: clamp(2.5rem, 13vw, 4.6rem); line-height: 1; font-weight: 950; letter-spacing: .08em; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.btn-mobile-secondary {
    min-height: 52px;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 850;
}
.btn-mobile-danger { color: var(--danger); border-color: #efb8b8; background: #fffafa; }

.locker-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.locker-page-grid .locker-tile { min-height: 112px; }
.locker-room { margin-top: 6px; font-size: .8rem; color: #6a645c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mobile-offcanvas.offcanvas-bottom {
    height: auto;
    max-height: 82vh;
    border-radius: 28px 28px 0 0;
    border: 0;
    background: var(--surface);
}
.mobile-offcanvas .offcanvas-header { padding: 18px 20px 8px; }
.mobile-offcanvas .offcanvas-body { padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); }
.offcanvas-handle { width: 48px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: #d9d5ce; }

.settings-grid { display: grid; gap: 16px; }
.setting-card { padding: 18px; }

.login-shell { min-height: calc(100vh - 44px); display: grid; place-items: center; padding: 20px 0; }
.login-card {
    width: min(440px, 100%);
    padding: 28px 22px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
}
.login-logo { width: 70px; height: 70px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(135deg, #dc4d12, var(--orange)); color: #fff; font-size: 2rem; }
.login-title { text-align: center; font-size: 1.55rem; font-weight: 950; }
.login-sub { text-align: center; color: var(--muted); margin-bottom: 22px; }

.empty-state { padding: 32px 18px; text-align: center; color: var(--muted); }
.empty-state i { display: block; font-size: 2.2rem; color: #c5bbae; margin-bottom: 8px; }

.validation-summary-errors ul { margin-bottom: 0; }
.text-danger { font-size: .82rem; }

/* Keep Bootstrap controls visually consistent */
.btn-primary { background: var(--orange); border-color: var(--orange); }
.btn-primary:hover, .btn-primary:focus { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-outline-primary { color: var(--orange); border-color: #df8e69; }
.btn-outline-primary:hover { background: var(--orange); border-color: var(--orange); }
.card { border-radius: var(--radius-lg); }

@media (min-width: 768px) {
    .app-main { padding: 30px 24px 48px; }
    .app-main.has-bottom-nav { padding-bottom: 48px; }
    .hero-card, .app-card { padding: 26px; }
    .locker-mobile-grid, .locker-page-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .guest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .hero-card { padding: 30px; }
    .locker-mobile-grid, .locker-page-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .form-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .form-section.full { grid-column: 1 / -1; }
    .form-actions-sticky { position: static; }
}

@media (max-width: 380px) {
    .app-main { padding-left: 12px; padding-right: 12px; }
    .stat-grid { gap: 7px; }
    .stat-card { padding: 12px 9px; }
    .locker-mobile-grid, .locker-page-grid { gap: 7px; }
    .locker-tile { padding: 11px 9px; }
}

/* SMS / deeSMSX */
.sms-setting-card { position: relative; }
.sms-config-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #8c6c22;
    background: var(--gold-soft);
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}
.sms-config-badge.ready { color: var(--green); background: var(--green-soft); }
.sms-toggle-row {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}
.sms-switch { width: 3rem !important; height: 1.6rem; cursor: pointer; }
.sms-switch:checked { background-color: var(--orange); border-color: var(--orange); }
.credential-status {
    margin: -5px 0 7px 2px;
    color: var(--green);
    font-size: .75rem;
    font-weight: 750;
}
.sms-note { margin: 6px 2px 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.sms-note code { color: #80501c; background: #f5efe5; padding: 1px 4px; border-radius: 5px; }
.sms-textarea-wrap { position: relative; }
.sms-textarea-wrap textarea { border-radius: 16px; padding: 13px 13px 30px; resize: vertical; }
.sms-counter { position: absolute; right: 12px; bottom: 8px; color: var(--muted); font-size: .72rem; pointer-events: none; }
.sms-test-box { padding: 14px; border: 1px dashed #d9cbbb; border-radius: 18px; background: #fffaf4; }
.sms-test-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sms-test-form .btn-mobile-secondary { min-width: 116px; }
.btn-mobile-sms {
    min-height: 56px;
    border: 1px solid #efb399;
    border-radius: 16px;
    background: var(--orange-soft);
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 900;
}
.sms-auto-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 4px 12px;
    color: var(--green);
    font-size: .78rem;
    font-weight: 750;
}
@media (max-width: 420px) {
    .sms-test-form { grid-template-columns: 1fr; }
    .sms-test-form .btn-mobile-secondary { width: 100%; }
}

/* Staff & password management */
.staff-admin-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f3ece2;
    color: #6f5841;
    font-size: .74rem;
    font-weight: 900;
}
.staff-security-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #e6dccf;
    border-radius: 16px;
    background: #fbf7f1;
    color: #675e53;
    font-size: .82rem;
    line-height: 1.45;
}
.staff-security-note i { color: var(--orange); margin-top: 1px; }
.staff-create-card {
    padding: 15px;
    border: 1px solid #ead7c8;
    border-radius: 18px;
    background: #fffaf6;
}
.staff-create-title { display: flex; align-items: center; gap: 8px; font-weight: 900; margin-bottom: 12px; }
.staff-create-title i { color: var(--orange); }
.staff-form-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.staff-list { display: grid; gap: 12px; }
.staff-user-card {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}
.staff-user-card.inactive { opacity: .72; background: #f6f4f1; }
.staff-user-head { display: flex; align-items: center; gap: 11px; }
.staff-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 1.2rem;
}
.staff-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.staff-role-badge, .staff-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ece9e4;
    color: #625d56;
    font-size: .68rem;
    font-weight: 850;
}
.staff-role-badge { background: #f4eadc; color: #7b572b; }
.staff-status-badge.active { background: var(--green-soft); color: var(--green); }
.staff-username { margin-top: 2px; color: var(--muted); font-size: .8rem; }
.staff-actions-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.staff-action-box { padding: 12px; border: 1px solid #eee7de; border-radius: 15px; background: #fcfbf9; }
.min-w-0 { min-width: 0; }

@media (min-width: 700px) {
    .staff-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}