* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 { color: #1a1a2e; margin-bottom: 0.5rem; }
.subtitle { color: #666; margin-bottom: 2rem; }

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

input, select {
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

small { color: #888; margin-top: 0.3rem; }

button {
    background: #1a1a2e;
    color: #fff;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

button:hover { background: #16213e; }
button:disabled { background: #999; cursor: not-allowed; }

.offer-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: #fafafa;
}

.offer-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }

.price-comparison {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.price-box {
    flex: 1;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
}

.price-original {
    background: #fff3e0;
    border: 1px solid #ffcc80;
}

.price-discount {
    background: #e8f5e9;
    border: 1px solid #81c784;
}

.price-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.price-original .price-value { color: #e65100; }
.price-discount .price-value { color: #2e7d32; }

.savings-badge {
    display: inline-block;
    background: #2e7d32;
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.meal-plan { color: #666; font-size: 0.9rem; margin-top: 0.3rem; }

/* Rates table layout */
.rates-table { margin-top: 0.8rem; }

.rates-header {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    font-size: 0.85rem;
    color: #666;
}

.rate-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eee;
    align-items: center;
    font-size: 0.9rem;
}

.rate-row:last-child { border-bottom: none; }

.rate-col-name { flex: 2; }
.rate-col-meal { flex: 1.5; color: #666; font-size: 0.85rem; }
.rate-col-price { flex: 1.2; text-align: right; font-weight: 600; }
.rate-col-savings { flex: 1.5; text-align: right; }

.price-original-text { color: #e65100; }
.price-discount-text { color: #2e7d32; }

.savings-badge-sm {
    display: inline-block;
    background: #2e7d32;
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
}

.error { color: #d32f2f; }
.success { color: #2e7d32; background: #e8f5e9; padding: 0.8rem; border-radius: 4px; margin-bottom: 1rem; }

.config-info { color: #666; font-size: 0.85rem; margin-bottom: 1rem; }

.admin-info {
    margin-top: 2rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.admin-info h3 { margin-bottom: 0.5rem; }
.admin-info li { margin-left: 1.5rem; margin-bottom: 0.3rem; }

.logout-link { float: right; color: #d32f2f; }

#loading { text-align: center; padding: 2rem; color: #666; }

/* Region selector */
.region-selector {
    margin-bottom: 1rem;
}

.region-selector > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.region-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.region-btn {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0;
}

.region-btn:hover { background: #e0e0e0; }

.region-btn.active, .savings-btn.active {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

.savings-btn {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0;
}

.savings-btn:hover { background: #e0e0e0; }

.brand-btn {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0;
}

.brand-btn:hover { background: #e0e0e0; }

.brand-btn.active {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

/* Scanner tabs */
.scan-mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ddd;
}

.tab-btn {
    background: none;
    color: #666;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    margin-top: 0;
}

.tab-btn.active {
    color: #1a1a2e;
    border-bottom-color: #1a1a2e;
    font-weight: 600;
}

.tab-btn:hover { color: #1a1a2e; }

.scan-year-hint {
    color: #888;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Scanner page */
.scanner-card { transition: box-shadow 0.2s; }
.scanner-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

.scanner-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.scanner-info { flex: 1; }
.scanner-info h3 { margin-bottom: 0.3rem; }
.scanner-location { color: #666; font-size: 0.9rem; margin-bottom: 0.3rem; }
.scanner-room { color: #555; font-size: 0.9rem; margin-bottom: 0.5rem; }

.scanner-price {
    text-align: right;
    min-width: 180px;
    flex-shrink: 0;
}

.scanner-price .price-value {
    font-size: 1.4rem;
}

.price-label { font-size: 0.8rem; color: #666; }

.price-public-line {
    display: block;
    font-size: 0.85rem;
    color: #999;
    text-decoration: line-through;
    margin-top: 0.2rem;
}

.meal-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pc-tag { background: #e8f5e9; color: #2e7d32; }
.mp-tag { background: #fff3e0; color: #e65100; }
.ai-tag { background: #e3f2fd; color: #1565c0; }

.discount-tag {
    display: inline-block;
    background: #2e7d32;
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.3rem;
}

.room-details {
    color: #888;
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

.scanner-months {
    font-size: 0.8rem;
    color: #1565c0;
    margin-bottom: 0.3rem;
}

.scanner-date {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0.3rem;
}

.scanner-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.booking-link {
    display: inline-block;
    background: #0056b3;
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.booking-link:hover { background: #004494; }

.unverified-tag {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

.scan-stats {
    display: flex;
    gap: 1.5rem;
    padding: 0.6rem 1rem;
    background: #f0f4ff;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #555;
}

.scan-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}


.last-seen {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.3rem;
}

.last-seen-cell {
    font-size: 0.8rem;
    color: #999;
}

.no-data-msg {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
}

.no-data-msg h2 { margin-bottom: 1rem; }
.no-data-msg pre {
    background: #f5f5f5;
    padding: 0.8rem;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.detail-btn {
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    background: #1a1a2e;
}

.detail-btn:hover { background: #16213e; }

.tax-info { font-size: 0.8rem; color: #888; }

/* Loading spinner */
.loading-spinner {
    text-align: center;
    padding: 2rem;
    color: #666;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
}

.modal-content {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 101;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

/* Detail table */
.detail-room { margin-bottom: 1.5rem; }
.detail-room h3 { margin-bottom: 0.5rem; color: #1a1a2e; }

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.detail-table th {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid #ddd;
    color: #666;
    font-size: 0.85rem;
}

.detail-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}

.detail-table .row-fb { background: #e8f5e9; }
.detail-table .row-hb { background: #fff3e0; }

.detail-date-info {
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.savings-highlight {
    background: #e8f5e9;
    border: 1px solid #81c784;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.8rem;
    color: #2e7d32;
    font-size: 0.9rem;
}

.savings-warn {
    background: #fff3e0;
    border: 1px solid #ffcc80;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.8rem;
    color: #e65100;
    font-size: 0.9rem;
}

/* Admin scanner link */
.admin-actions {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f0f4ff;
    border-radius: 6px;
    border: 1px solid #c5cae9;
}

.admin-actions a {
    display: inline-block;
    background: #1a1a2e;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-actions a:hover { background: #16213e; }

/* Monitor page */
.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-link { color: #1565c0; font-weight: 600; text-decoration: none; }
.nav-link:hover { text-decoration: underline; }

.monitor-section {
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.monitor-section h3 { margin-bottom: 0.8rem; color: #1a1a2e; }

.add-hotel-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ddd;
}

.add-hotel-tabs .tab-btn {
    margin-top: 0;
    padding: 0.5rem 1.2rem;
}

.add-form-row {
    display: flex;
    gap: 0.8rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.add-form-row input {
    flex: 1;
    min-width: 120px;
}

.add-form-row button {
    margin-top: 0;
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
}

.city-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.city-result-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.8rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.city-result-card .hotel-info h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.city-result-card .hotel-info p { font-size: 0.8rem; color: #666; }

.city-result-card .add-btn {
    margin-top: 0;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    background: #1565c0;
}

.city-result-card .add-btn:hover { background: #0d47a1; }

.monitor-hotel-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.8rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.monitor-hotel-card .hotel-meta h3 { font-size: 1rem; margin-bottom: 0.2rem; }
.monitor-hotel-card .hotel-meta p { font-size: 0.85rem; color: #666; }

.monitor-hotel-card .hotel-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.monitor-hotel-card .hotel-actions button {
    margin-top: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

.btn-view { background: #1a1a2e; }
.btn-check { background: #2e7d32; }
.btn-check:hover { background: #1b5e20; }
.btn-remove { background: #d32f2f; }
.btn-remove:hover { background: #b71c1c; }

.monitor-period {
    font-size: 0.8rem;
    color: #888;
}

/* Meal tags for monitor */
.ep-tag { background: #f5f5f5; color: #666; }
.bb-tag { background: #e3f2fd; color: #1565c0; }

/* Trend indicators */
.trend-down { color: #2e7d32; font-weight: 600; }
.trend-up { color: #d32f2f; font-weight: 600; }
.trend-same { color: #999; }
.trend-new { color: #1565c0; font-size: 0.8rem; font-style: italic; }

.price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.price-table th {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid #ddd;
    color: #666;
    font-size: 0.82rem;
}

.price-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}

.price-table .date-group td {
    background: #f5f8ff;
    font-weight: 600;
    color: #1a1a2e;
    padding-top: 0.8rem;
}

th.sortable:hover { background: #e8eaf6; }

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.empty-state p { margin-bottom: 0.5rem; }

.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #1a1a2e;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 200;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .form-row { flex-direction: column; }
    .price-comparison { flex-direction: column; }
    .container { margin: 1rem; padding: 1rem; }
    .scanner-row { flex-direction: column; }
    .scanner-price { text-align: left; min-width: auto; margin-top: 0.5rem; }
    .modal-content { width: 95%; padding: 1rem; }
    .detail-table { font-size: 0.8rem; }
    .monitor-hotel-card { flex-direction: column; align-items: flex-start; }
    .add-form-row { flex-direction: column; }
    .city-results { grid-template-columns: 1fr; }
}