/* ---- CSS variables ---- */
:root {
    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-secondary: #6c757d;
    --color-danger: #dc3545;
    --modal-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* ---- Reset & base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
#app { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.app-content-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.no-room-content { max-width: 760px; margin: 0 auto; overflow-y: auto; flex: 1; min-height: 0; }
h1 { color: #333; margin-bottom: 20px; }
.card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; }
input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
input:focus { outline: none; border-color: #0d6efd; }
button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background: #f8f9fa; font-weight: 600; }
tr:hover { background: #f8f9fa; }
.empty { text-align: center; color: #999; padding: 40px; }
.loading { text-align: center; padding: 20px; color: #666; }

/* ---- Buttons ---- */
.btn-primary { background: #0d6efd; color: white; }
.btn-primary:hover { background: #0b5ed7; }
.btn-secondary { background: #6c757d; color: white; }
.btn-secondary:hover { background: #545b62; }
.btn-danger { background: #dc3545; color: white; }
.btn-danger:hover { background: #c82333; }
.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: #888; padding: 2px 6px; border-radius: 4px; }
.btn-close:hover { background: #f0f0f0; color: #333; }

/* ---- Forms ---- */
.form-hint { display: block; margin-top: 4px; font-size: 0.82rem; color: #888; }
.form-counter { font-weight: 400; color: #aaa; font-size: 0.75rem; margin-left: 4px; }
.form-input { border: 1px solid #ddd; border-radius: 6px; padding: 7px 10px; font-size: 0.88rem; width: 100%; box-sizing: border-box; font-family: inherit; }
.form-input:focus { outline: 2px solid #0d6efd; border-color: transparent; }
.input-reveal { position: relative; display: flex; align-items: center; }
.input-reveal input { flex: 1; padding-right: 40px; font-family: monospace; font-size: 0.85rem; }
.btn-reveal { position: absolute; right: 6px; background: none; border: none; cursor: pointer; padding: 4px; font-size: 1rem; line-height: 1; color: #666; }
.btn-reveal:hover { color: #333; }

/* ---- Modal base ---- */
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-card { max-width: 400px; width: 90%; box-shadow: var(--modal-shadow); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h2, .modal-header h3 { margin: 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* ---- Mobile fullscreen modals ---- */
@media (max-width: 600px) {
    .modal-backdrop { align-items: flex-start; padding: 0; }
    .modal-backdrop > .modal-card:not(.color-picker-modal-card),
    .modal-backdrop > .overview-map-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
    }
    .modal-backdrop > .overview-map-card { overflow-y: hidden; }
}