/* LUXORIA styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f5f0eb; color: #333; }
nav { background: #5c4033; color: white; padding: 0.6rem 1.2rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
nav h1 { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
nav button { background: none; border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; font-size: 0.75rem; white-space: nowrap; }
nav button:hover, nav button.active { background: rgba(255,255,255,0.2); border-color: white; }
.container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.section { display: none; }
.section.active { display: block; }
.card { background: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
h2 { margin-bottom: 1rem; color: #5c4033; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid #eee; }
th { background: #faf6f2; color: #5c4033; font-weight: 600; }
.low-stock { color: #c0392b; font-weight: 600; }
.btn { padding: 0.4rem 0.9rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.btn-primary { background: #5c4033; color: white; }
.btn-success { background: #27ae60; color: white; }
.btn-danger { background: #c0392b; color: white; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.form-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.form-row label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 500; flex: 1; min-width: 150px; }
.form-row input, .form-row select, .form-row textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; }
.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge-planned { background: #f0e6d3; color: #5c4033; }
.badge-active { background: #d6eaf8; color: #1a5276; }
.badge-completed { background: #d4efdf; color: #1e8449; }
.badge-rejected { background: #fadbd8; color: #922b21; }
.badge-new { background: #d6eaf8; color: #1a5276; }
.badge-confirmed { background: #f0e6d3; color: #5c4033; }
.badge-shipped { background: #d5f5e3; color: #1e8449; }
.badge-cancelled { background: #fadbd8; color: #922b21; }
.progress-bar { background: #eee; border-radius: 4px; height: 20px; position: relative; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: white; }
.progress-ok { background: #27ae60; }
.progress-warn { background: #f39c12; }
.progress-over { background: #c0392b; }
.capacity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.wc-card { border: 1px solid #e0d5cc; border-radius: 8px; padding: 1rem; }
.wc-card h3 { color: #5c4033; margin-bottom: 0.5rem; font-size: 1rem; }
.shelf-info { font-size: 0.8rem; color: #888; }
.alert { padding: 0.8rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-danger { background: #fadbd8; color: #922b21; }
.alert-success { background: #d4efdf; color: #1e8449; }
.inci-box { background: #faf6f2; padding: 1rem; border-radius: 4px; font-style: italic; margin-top: 0.5rem; }
.recipe-items-list { margin: 0.5rem 0; }
.recipe-item-row { display: flex; gap: 0.5rem; align-items: end; margin-bottom: 0.4rem; }
.recipe-item-row select, .recipe-item-row input { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; }
.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.stat-card { background: white; border-radius: 8px; padding: 1.2rem; flex: 1; min-width: 180px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center; }
.stat-card .number { font-size: 2rem; font-weight: 700; color: #5c4033; }
.stat-card .label { font-size: 0.85rem; color: #888; margin-top: 0.3rem; }
/* Modal */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; justify-content:center; align-items:flex-start; padding:2rem; overflow-y:auto; }
.modal-overlay.open { display:flex; }
.modal { background:white; border-radius:12px; max-width:700px; width:100%; padding:2rem; position:relative; box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:#888; }
.modal-close:hover { color:#333; }
.product-card-header { display:flex; gap:1.5rem; margin-bottom:1.5rem; }
.product-card-img { width:200px; height:200px; object-fit:contain; border-radius:8px; background:#faf6f2; flex-shrink:0; }
.product-card-img-placeholder { width:200px; height:200px; border-radius:8px; background:#faf6f2; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:3rem; flex-shrink:0; }
.product-card-info h2 { color:#5c4033; margin-bottom:0.5rem; font-size:1.2rem; }
.product-card-meta { font-size:0.85rem; color:#666; line-height:1.8; }
.product-card-meta strong { color:#333; }
.inci-section { background:#faf6f2; padding:1rem; border-radius:8px; margin-top:1rem; }
.inci-section h3 { font-size:0.9rem; color:#5c4033; margin-bottom:0.5rem; }
.inci-section p { font-size:0.85rem; line-height:1.6; font-style:italic; color:#555; }
.product-row { cursor:pointer; }
.product-row:hover { background:#faf6f2; }
/* Orders & price lists */
.order-card { border: 1px solid #e0d5cc; border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem; }
.order-card:hover { border-color: #5c4033; }
.order-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.8rem; }
.order-line-row { display:flex; gap:0.5rem; align-items:end; margin-bottom:0.4rem; }
/* Tabs */
.tab-bar { display:flex; gap:0; border-bottom:2px solid #e0d5cc; margin-bottom:1.5rem; }
.tab-btn { padding:0.6rem 1.2rem; border:none; background:none; cursor:pointer; font-size:0.9rem; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab-btn:hover { color:#5c4033; }
.tab-btn.active { color:#5c4033; font-weight:600; border-bottom-color:#5c4033; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.pl-status-draft { color:#888; }
.pl-status-confirmed { color:#27ae60; font-weight:600; }
.pl-status-expired { color:#c0392b; }

/* Gantt kalender */
.gantt-container { overflow-x:auto; margin-top:0.5rem; }
.gantt-table { border-collapse:collapse; min-width:100%; }
.gantt-table th, .gantt-table td { border:1px solid #e0d5cc; }
.gantt-wc-header { position:sticky; left:0; background:#faf6f2; z-index:2; min-width:140px; padding:0.5rem; font-size:0.85rem; }
.gantt-wc-name { position:sticky; left:0; background:white; z-index:1; min-width:140px; font-weight:600; vertical-align:top; padding:0.5rem; border-right:2px solid #e0d5cc; font-size:0.85rem; }
.gantt-week-header { text-align:center; min-width:90px; font-size:0.8rem; padding:0.4rem; background:#faf6f2; }
.gantt-cell { min-width:90px; min-height:55px; vertical-align:top; padding:3px; cursor:pointer; position:relative; }
.gantt-cell:hover { outline:2px solid #5c4033; outline-offset:-2px; }
.gantt-util-0 { background:white; }
.gantt-util-low { background:#eafaf1; }
.gantt-util-mid { background:#fef9e7; }
.gantt-util-high { background:#fdedec; }
.gantt-util-over { background:#fadbd8; }
.gantt-bar { border-radius:4px; padding:3px 6px; font-size:0.7rem; line-height:1.3; color:white; cursor:pointer; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt-bar:hover { opacity:0.85; }
.gantt-status-draft { background:#aaa; }
.gantt-status-confirmed { background:#2980b9; }
.gantt-status-in_progress { background:#e67e22; }
.gantt-status-completed { background:#27ae60; }

/* ── Ligipääsetavus ────────────────────────────────── */
input:focus, select:focus, textarea:focus, button:focus {
    outline: 2px solid #5c4033;
    outline-offset: 1px;
}
button:focus-visible { outline: 2px solid #5c4033; outline-offset: 2px; }

button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
input:disabled, select:disabled, textarea:disabled {
    background: #f0f0f0;
    color: #999;
}

/* ── Vormi valideerimine ──────────────────────────── */
input.field-error, select.field-error { border-color: #c0392b; background: #fdf0ef; }
input.field-success, select.field-success { border-color: #27ae60; }
.field-error-msg { color: #c0392b; font-size: 0.8rem; margin-top: 2px; }

/* ── Laadimisanimatsioon ──────────────────────────── */
.spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 3px solid #e0d6cc; border-top-color: #5c4033;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.7); display: flex;
    align-items: center; justify-content: center; z-index: 100;
}

/* ── Mobiilivaade ─────────────────────────────────── */

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
    .container { max-width: 100%; padding: 0 0.5rem; }
    nav { flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem; }
    nav .nav-buttons { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .form-row { flex-direction: column; }
    .form-row label { min-width: auto; }
    .capacity-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .modal-content { max-width: 95%; margin: 1rem; }
    .stat-card { min-width: 120px; }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    body { font-size: 14px; }
    nav { position: relative; flex-wrap: wrap; }
    nav .nav-brand { width: 100%; text-align: center; margin-bottom: 0.3rem; display: flex; justify-content: space-between; align-items: center; }
    nav .nav-buttons { justify-content: center; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    nav .nav-buttons.collapsed { display: none; }
    nav .nav-buttons.expanded { display: flex; }
    nav button { font-size: 0.75rem; padding: 0.4rem 0.7rem; min-height: 36px; }
    .hamburger-btn { display: block; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: white; padding: 0.3rem; }
    .container { margin: 0.5rem auto; }
    .card { padding: 0.8rem; margin-bottom: 0.8rem; }
    table { font-size: 0.85rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    th, td { padding: 0.3rem 0.4rem; white-space: nowrap; }
    .modal-content { max-width: 100%; margin: 0; min-height: 100vh; border-radius: 0; }
    .modal-close { top: 0.5rem; right: 0.5rem; font-size: 1.5rem; padding: 0.5rem; }
    .stat-cards { flex-direction: column; }
    .stat-card { min-width: auto; }
    .product-card-header { flex-direction: column; gap: 0.5rem; }
    .tab-bar { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .tab-btn { font-size: 0.8rem; padding: 0.5rem 0.9rem; min-height: 36px; }
    .btn { min-height: 36px; padding: 0.4rem 0.8rem; }

    /* Tabelite responsive vaade */
    .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hide-mobile { display: none !important; }
    .stats { flex-wrap: wrap; }
    .stats .stat-card { flex: 1 1 45%; min-width: 120px; }
}
.hamburger-btn { display: none; }

/* Small mobile (max 480px) */
@media (max-width: 480px) {
    body { font-size: 13px; }
    nav button { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
    .btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1rem; }
    .card { padding: 0.5rem; }
    .gantt-container { font-size: 0.75rem; }
    .order-card { padding: 0.5rem; }
}

/* ── Printimine ──────────────────────────────────── */
@media print {
    nav, .btn, .modal-overlay, .tab-bar, .no-print { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #ccc; padding: 4px 8px; }
}

/* ── Dark mode ───────────────────────────────────── */
[data-theme="dark"] {
    --bg: #1a1a2e; --bg-card: #16213e; --bg-nav: #0f3460;
    --text: #e0e0e0; --text-secondary: #a0a0b0; --border: #2a2a4a;
    --accent: #e67e22; --accent-bg: #2a2a4a;
}
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] nav { background: var(--bg-nav); }
[data-theme="dark"] .card { background: var(--bg-card); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
[data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--accent); }
[data-theme="dark"] th { background: var(--accent-bg); color: var(--text); }
[data-theme="dark"] td, [data-theme="dark"] th { border-bottom-color: var(--border); }
[data-theme="dark"] .form-row input, [data-theme="dark"] .form-row select, [data-theme="dark"] .form-row textarea {
    background: #1a1a2e; color: var(--text); border-color: var(--border);
}
[data-theme="dark"] .stat-card { background: var(--bg-card); }
[data-theme="dark"] .stat-card .number { color: var(--accent); }
[data-theme="dark"] .stat-card .label { color: var(--text-secondary); }
[data-theme="dark"] .modal { background: var(--bg-card); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .tab-btn { color: var(--text-secondary); }
[data-theme="dark"] .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .tab-bar { border-bottom-color: var(--border); }
[data-theme="dark"] .order-card { border-color: var(--border); }
[data-theme="dark"] .wc-card { border-color: var(--border); }
[data-theme="dark"] .product-row:hover { background: var(--accent-bg); }
[data-theme="dark"] .inci-section, [data-theme="dark"] .inci-box { background: var(--accent-bg); }
[data-theme="dark"] .gantt-wc-header, [data-theme="dark"] .gantt-wc-name { background: var(--bg-card); }
[data-theme="dark"] .gantt-week-header { background: var(--accent-bg); }
[data-theme="dark"] .alert-success { background: #1e3a2f; color: #7dcea0; }
[data-theme="dark"] .alert-danger { background: #3a1e1e; color: #f1948a; }
[data-theme="dark"] a { color: #5dade2; }
[data-theme="dark"] #searchModal > div { background: var(--bg-card); }
[data-theme="dark"] #searchInput { background: var(--bg); color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] #notifPanel { background: var(--bg-card); }
[data-theme="dark"] #notifPanel > div:first-child { border-bottom-color: var(--border); }
[data-theme="dark"] #onlinePanel { background: var(--bg-card); color: var(--text); }
[data-theme="dark"] #onlinePanel > div:first-child { background: var(--accent-bg); color: var(--text); border-bottom-color: var(--border); }
/* Dark mode puuduvad reeglid */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-secondary); }
[data-theme="dark"] .btn { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
[data-theme="dark"] .btn-danger { background: #c0392b; color: white; }
[data-theme="dark"] table { color: var(--text); }
tr[style*="cursor:pointer"]:hover { background: #edf2fa; }
[data-theme="dark"] tr:hover { background: var(--accent-bg); }
[data-theme="dark"] .progress-bar { background: var(--border); }
[data-theme="dark"] label { color: var(--text); }
[data-theme="dark"] option { background: var(--bg-card); color: var(--text); }