/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: #f0f4f8; color: #333; min-height: 100vh; display: flex; flex-direction: column;
       overflow-x: hidden; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Navbar === */
.navbar { background: #3b82f6; color: #fff; padding: 0.5rem 1rem; display: flex;
          justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
.navbar a { color: #fff; }
.brand { font-weight: 700; font-size: 1.1rem; }
.nav-links a { margin-left: 1rem; font-size: 0.9rem; }

/* === Container === */
.container { max-width: 800px; margin: 0 auto; padding: 1rem; flex: 1; }

/* === Footer === */
.footer { background: #e2e8f0; color: #64748b; padding: 0.75rem 1rem; text-align: center; font-size: 0.85rem; }
.footer a { color: #3b82f6; }
.footer-row { margin: 0.25rem 0; }
#msk-time { color: #1e40af; font-weight: 600; margin-left: 1rem; }

/* === Page Header === */
.page-header { margin-bottom: 1rem; }
.page-header h1 { font-size: 1.3rem; }
.hint { color: #666; font-size: 0.85rem; margin-top: 0.25rem; }
.info-text { color: #555; font-size: 0.9rem; margin-bottom: 0.5rem; }

/* === Buttons === */
.btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 6px;
       font-size: 0.9rem; cursor: pointer; text-align: center; transition: background 0.2s; }
.btn-primary { background: #3b82f6; color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-secondary { background: #94a3b8; color: #fff; }
.btn-secondary:hover { background: #64748b; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* === Actions Bar === */
.actions-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }

/* === Auth Form (Login) === */
.auth-form { max-width: 360px; margin: 2rem auto; padding: 1.5rem; background: #fff;
             border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.auth-form h2 { text-align: center; margin-bottom: 1.25rem; }
.auth-form label { display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9rem; }
.auth-form input[type="text"], .auth-form input[type="password"] {
    width: 100%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 16px; margin-bottom: 0.75rem; }
.auth-form .btn-block { width: 100%; padding: 0.7rem; font-size: 1rem; margin-top: 0.5rem; }
.alert { padding: 0.6rem; border-radius: 6px; margin-bottom: 0.75rem; font-size: 0.9rem; }
.alert-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

/* === Card === */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.mt-16 { margin-top: 1rem; }

/* === Contacts Table (mobile-friendly) === */
.contacts-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.contact-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem;
                background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.contact-icon { font-size: 1.3rem; flex-shrink: 0; }
.contact-value { flex: 1; font-size: 0.95rem; word-break: break-all; }
.contact-delete { flex-shrink: 0; }

/* === Password Change Banner === */
.password-banner { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
                   padding: 0.75rem; margin-bottom: 1rem; text-align: center; }
.password-banner a { font-weight: 600; }

/* === Announcements === */
.announcements { margin: 0.5rem 0 1rem; }
.announcement-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
                     padding: 0.75rem; margin-bottom: 0.5rem; }
.announcement-card p { margin: 0.25rem 0; font-size: 0.9rem; }
.announcement-img { max-width: 100%; max-height: 250px; border-radius: 6px; margin: 0 auto 0.5rem; display: block; }

/* === Orders List === */
.orders-list { display: flex; flex-direction: column; gap: 0.75rem; }
.order-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem;
              box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.order-card.order-sent { border-left: 4px solid #3b82f6; }
.order-card.order-draft { border-left: 4px solid #f59e0b; }
.order-card.order-cancelled { border-left: 4px solid #ef4444; opacity: 0.7; }
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.order-num { font-weight: 600; }
.order-meta { font-size: 0.85rem; color: #64748b; display: flex; gap: 1rem; }
.order-comment { font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem; }
.order-actions { margin-top: 0.5rem; display: flex; gap: 0.5rem; }

/* === Order Status === */
.order-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 12px;
                font-size: 0.8rem; font-weight: 600; }
.status-draft { background: #fef3c7; color: #92400e; }
.status-sent { background: #dbeafe; color: #1e40af; }
.status-cancelled { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.status-confirmed { background: #d1fae5; color: #065f46; }
.status-delivered { background: #e0e7ff; color: #3730a3; }
.status-cancelled { background: #fee2e2; color: #991b1b; }

/* === Product Groups & Rows === */
.product-group { margin-bottom: 1rem; }
.product-group h3 { font-size: 1rem; color: #3b82f6; border-bottom: 1px solid #dbeafe;
                    padding-bottom: 0.25rem; margin-bottom: 0.5rem; }
.product-list { display: flex; flex-direction: column; gap: 0.35rem; }
.product-row { display: flex; justify-content: space-between; align-items: center;
               padding: 0.3rem 0.5rem; background: #fff; border-radius: 4px;
               border: 1px solid #e2e8f0; }
.product-label { flex: 1; font-size: 0.9rem; }
.qty-input { width: 70px; padding: 0.3rem; border: 1px solid #cbd5e1; border-radius: 4px;
             text-align: center; font-size: 1rem; }
.qty-readonly { font-weight: 600; font-size: 0.95rem; min-width: 30px; text-align: center; }

/* === Forms === */
.form-group { margin-bottom: 0.75rem; }
.form-group label { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; font-weight: 500; }
.form-group input[type="text"], .form-group input[type="password"], .form-group input[type="number"],
.form-group input[type="date"], .form-group input[type="url"], .form-group input[type="datetime-local"],
.form-group input[type="email"], .form-group select, .form-group textarea {
    width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.95rem;
}
.form-group textarea { resize: vertical; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }

/* === Error / Success === */
.error-box { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 0.75rem;
             border-radius: 6px; margin-bottom: 0.75rem; }
.success-box { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; padding: 0.75rem;
               border-radius: 6px; margin-bottom: 0.75rem; }
.empty-state { text-align: center; color: #94a3b8; padding: 2rem; }

/* === Modal === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                 background: rgba(0,0,0,0.4); z-index: 200; display: flex;
                 align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 12px; padding: 1.5rem; max-width: 400px;
             width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.modal-box h3 { margin-bottom: 0.75rem; }
.modal-box p { margin-bottom: 1rem; color: #555; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* === Admin Grid === */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.admin-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem;
              text-align: center; font-weight: 500; font-size: 0.95rem; transition: all 0.2s; }
.admin-card:hover { background: #eff6ff; border-color: #3b82f6; text-decoration: none; transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0,0,0,0.08); }

/* === Data Table (with horizontal scroll on mobile) === */
.table-wrap { margin: 0.5rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th, .data-table td { padding: 0.4rem 0.6rem; border: 1px solid #e2e8f0; text-align: left; }
.data-table th { background: #f8fafc; font-weight: 600; }
.data-table tr:hover { background: #f0f9ff; }

/* Mobile: tables scroll horizontally inside wrapper */
@media (max-width: 600px) {
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
                  width: calc(100% + 1rem); margin-left: -0.5rem; margin-right: -0.5rem; }
    .data-table { white-space: nowrap; min-width: 500px; }
}

/* === Checkbox List === */
.checkbox-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; max-height: 200px;
                 overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.5rem; }
.checkbox-item { font-size: 0.85rem; white-space: nowrap; }

/* === Settings === */
.setting-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.setting-key { font-weight: 600; min-width: 200px; font-size: 0.85rem; }
.setting-desc { color: #94a3b8; font-size: 0.8rem; }
.setting-input { flex: 1; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.9rem; }

/* === Detail === */
.detail-info { background: #fff; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
               border: 1px solid #e2e8f0; }
.detail-info p { margin: 0.3rem 0; }

.muted { color: #94a3b8; }

/* === Pagination === */
.pagination { display: flex; justify-content: center; gap: 0.25rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-block; padding: 0.4rem 0.7rem; border-radius: 6px;
           font-size: 0.85rem; border: 1px solid #e2e8f0; background: #fff; }
.pagination a:hover { background: #eff6ff; text-decoration: none; }
.pagination .active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.pagination .disabled { color: #94a3b8; pointer-events: none; }

/* === Preferences / Visibility Settings === */
.pref-group { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
              margin-bottom: 0.75rem; overflow: hidden;
              transition: opacity 0.3s, border-color 0.3s; }
.pref-group.is-hidden { opacity: 0.5; border-style: dashed; border-color: #f59e0b; }
.pref-group-header { display: flex; justify-content: space-between; align-items: center;
                     padding: 0.6rem 0.75rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.pref-group-name { font-weight: 600; font-size: 0.95rem; }
.pref-lock { font-size: 0.75rem; color: #3b82f6; font-weight: 500; }
.pref-lock-sm { font-size: 0.7rem; }

/* Toggle switch — group level */
.pref-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.pref-toggle-label { font-size: 0.75rem; color: #94a3b8; }
.pref-toggle input { display: none; }
.switch { position: relative; width: 38px; height: 22px; background: #cbd5e1; border-radius: 12px;
          transition: background 0.3s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
                 background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.pref-toggle input:checked + .switch { background: #22c55e; }
.pref-toggle input:checked + .switch::after { transform: translateX(16px); }

/* Toggle switch — product level (smaller) */
.pref-toggle-sm { cursor: pointer; display: flex; align-items: center; }
.pref-toggle-sm input { display: none; }
.switch-sm { position: relative; width: 32px; height: 18px; background: #cbd5e1; border-radius: 10px;
             transition: background 0.3s; flex-shrink: 0; }
.switch-sm::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
                    background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.pref-toggle-sm input:checked + .switch-sm { background: #22c55e; }
.pref-toggle-sm input:checked + .switch-sm::after { transform: translateX(14px); }

/* Product row */
.pref-products { padding: 0.25rem 0.5rem; }
.pref-product { display: flex; justify-content: space-between; align-items: center;
                padding: 0.35rem 0.25rem; border-bottom: 1px solid #f1f5f9;
                transition: opacity 0.3s; }
.pref-product:last-child { border-bottom: none; }
.pref-product.is-hidden { opacity: 0.4; }
.pref-product-name { font-size: 0.9rem; }

/* === Settlement / Shop tabs === */
.settlement-tabs, .shop-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid #e5e7eb;
    padding-bottom:4px; margin-bottom:0.75rem; }
.settlement-tabs .btn, .shop-tabs .btn { border-radius:6px 6px 0 0; }

/* === Responsive tweaks === */
@media (max-width: 600px) {
    .container { padding: 0.5rem; }
    .page-header h1 { font-size: 1.1rem; }
    .navbar { padding: 0.4rem 0.6rem; }
    .brand { font-size: 1rem; }
    .nav-links a { margin-left: 0.5rem; font-size: 0.8rem; }
    .qty-input { width: 60px; font-size: 16px; } /* prevent zoom on iOS */
    .product-row { padding: 0.25rem 0.4rem; }
    .admin-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .admin-card { padding: 0.75rem; font-size: 0.9rem; }
    .data-table { font-size: 0.8rem; }
    .data-table th, .data-table td { padding: 0.3rem 0.4rem; }
    .modal-box { width: 95%; padding: 1rem; }
    .order-meta { flex-direction: column; gap: 0.15rem; }
    .order-card { padding: 0.6rem; }
    .order-header { flex-wrap: wrap; }
    .btn { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .actions-bar { gap: 0.35rem; }
    .actions-bar .btn { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 0.8rem; }
    .auth-form { margin: 1rem auto; padding: 1rem; }
    .pref-group-header { flex-wrap: wrap; gap: 0.25rem; }
    .pref-product { flex-wrap: wrap; }
    .settlement-tabs .btn, .shop-tabs .btn { font-size: 0.75rem; padding: 0.2rem 0.4rem; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }
    .footer { font-size: 0.75rem; padding: 0.5rem; }
}