/* static/css/style.css */
/* CSS Variables for Theming */
:root {
  --bg-primary: #ecf0f1;
  --bg-secondary: #fff;
  --bg-tertiary: #f8f9fa;
  --bg-hover: #f8f9fa;
  --text-primary: #2c3e50;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --border-color: #e0e0e0;
  --border-light: #f0f0f0;
  --header-bg: #2c3e50;
  --header-text: #fff;
  --shadow: rgba(0,0,0,.1);
  --input-border: #ddd;
  --input-focus: #3498db;
  --savings-positive-bg: #d4edda;
  --savings-positive-border: #28a745;
  --savings-negative-bg: #f8d7da;
  --savings-negative-border: #dc3545;
  --savings-neutral-bg: #e2e3e5;
  --savings-neutral-border: #6c757d;
  --savings-explanation-color: #666;
  --savings-total-text: #0c5460;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #242424;
  --bg-hover: #3a3a3a;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted: #888;
  --border-color: #404040;
  --border-light: #353535;
  --header-bg: #1f1f1f;
  --header-text: #e0e0e0;
  --shadow: rgba(0,0,0,.3);
  --input-border: #404040;
  --input-focus: #5dade2;
  --savings-positive-bg: #1e4d2b;
  --savings-positive-border: #4ade80;
  --savings-negative-bg: #4d1e24;
  --savings-negative-border: #f87171;
  --savings-neutral-bg: #323232;
  --savings-neutral-border: #9ca3af;
  --savings-explanation-color: #aaa;
  --savings-total-text: #1a1a1a;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.container { max-width:1200px; margin:0 auto; padding:0 1rem; }

/* Header */
header { background:var(--header-bg); color:var(--header-text); padding:1rem 0; box-shadow:0 2px 4px var(--shadow); }
header .container { display:flex; justify-content:space-between; align-items:center; }
header h1 { font-size:1.5rem; font-weight:600; }

nav { display:flex; gap:1.5rem; align-items:center; }
nav a { color:var(--header-text); text-decoration:none; padding:.5rem 1rem; border-radius:4px; transition:background-color .2s; }
nav a:hover { background-color:rgba(255,255,255,.1); }
.user-info { color:var(--text-muted); font-size:.9rem; }
.logout-btn { background:#e74c3c; padding:.5rem 1rem; border-radius:4px; }
.logout-btn:hover { background:#c0392b; }
.lang-toggle { display:flex; gap:.25rem; background:rgba(255,255,255,.1); padding:.25rem; border-radius:4px; }
.lang-btn { color:var(--header-text); text-decoration:none; padding:.35rem .75rem; border-radius:3px; font-size:.85rem; font-weight:600; transition:all .2s; }
.lang-btn:hover { background:rgba(255,255,255,.15); }
.lang-btn.active { background:rgba(255,255,255,.25); color:#fff; }
.theme-toggle { background:transparent; border:1px solid var(--header-text); color:var(--header-text); padding:.5rem .75rem; cursor:pointer; border-radius:4px; font-size:.9rem; transition:all .2s; }
.theme-toggle:hover { background:rgba(255,255,255,.1); }

/* Main */
main { padding:2rem 0; min-height:calc(100vh - 200px); }

/* Footer */
footer { background:#34495e; color:#fff; text-align:center; padding:1.5rem 0; margin-top:2rem; }
footer p { font-size:.9rem; }

/* Flash */
.flash-messages { margin-bottom:1.5rem; }
.flash { padding:1rem; border-radius:4px; margin-bottom:1rem; border-left:4px solid; }
.flash-success { background:#d4edda; color:#155724; border-left-color:#28a745; }
.flash-error { background:#f8d7da; color:#721c24; border-left-color:#dc3545; }
.flash-warning { background:#fff3cd; color:#856404; border-left-color:#ffc107; }
.flash-info { background:#d1ecf1; color:#0c5460; border-left-color:#17a2b8; }

/* Form elements */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; margin-bottom:.5rem; font-weight:600; color:var(--text-primary); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.75rem; border:1px solid var(--input-border); border-radius:4px; font-size:1rem; font-family:inherit;
  background:var(--bg-secondary); color:var(--text-primary);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--input-focus); box-shadow:0 0 0 3px rgba(52,152,219,.1);
}

/* Buttons */
.btn { display:inline-block; padding:.75rem 1.5rem; border:none; border-radius:4px; font-size:1rem; cursor:pointer; text-decoration:none; transition:all .2s; font-weight:600; }
.btn-primary { background:#3498db; color:#fff; }
.btn-primary:hover { background:#2980b9; }
.btn-success { background:#27ae60; color:#fff; }
.btn-success:hover { background:#229954; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }
.btn-secondary { background:#95a5a6; color:#fff; }
.btn-secondary:hover { background:#7f8c8d; }
.btn-sm { padding:.5rem 1rem; font-size:.875rem; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* Calculator page bits */
.calculator-container { background:var(--bg-secondary); padding:2rem; border-radius:8px; box-shadow:0 2px 4px var(--shadow); max-width:1000px; margin:0 auto; }
.calculator-form { margin-bottom:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checkbox-group { margin:1rem 0; }
.checkbox-group label { display:flex; align-items:center; margin-bottom:.5rem; font-weight:normal; }
.checkbox-group input[type="checkbox"], .checkbox-group input[type="radio"] { margin-right:.5rem; width:auto; }
.optimization-section { margin-top:1.5rem; padding-top:1.5rem; border-top:2px solid var(--border-color); }
#dynamic_fields { margin-top:1rem; }

.results-container { background:var(--bg-tertiary); padding:2rem; border-radius:8px; margin-top:2rem; }
.calculation-box { background:var(--bg-secondary); padding:1.5rem; border-radius:8px; margin-bottom:1.5rem; box-shadow:0 2px 4px var(--shadow); }
.calculation-box h4 { margin:0 0 1rem; color:var(--text-primary); font-size:1.1rem; border-bottom:2px solid #3498db; padding-bottom:.5rem; }
.error-box { background:var(--savings-negative-bg); border-left:4px solid var(--savings-negative-border); }
.error-box #error_message { color:var(--text-primary); font-weight:600; font-size:1rem; }
.optimization-box h4 { border-bottom-color:#f39c12; color:#f39c12; }
.optimization-warning { background:#fff3cd; color:#856404; padding:.75rem; border-radius:4px; margin-bottom:1rem; text-align:center; font-weight:600; border:2px solid #ffc107; }
.price-display-large { text-align:center; margin:1rem 0; }
.price-value { font-size:2.5rem; font-weight:700; color:var(--text-primary); }

.breakdown-compact { margin:1rem 0; }
.breakdown-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--border-color); }
.breakdown-row:last-child { border-bottom:none; }
.breakdown-row span:first-child { color:var(--text-muted); }
.breakdown-row span:last-child { font-weight:600; color:var(--text-primary); }

.details-expandable, .finishing-expandable { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-color); }
#production_details, #optimized_production_details, #finishing_details, #optimized_finishing_details {
  margin-top:1rem; padding:1rem; background:var(--bg-tertiary); border-radius:4px; font-size:.9rem;
}
#production_details div, #optimized_production_details div, #finishing_details div, #optimized_finishing_details div { padding:.25rem 0; }

.savings-breakdown { background:var(--bg-tertiary); padding:1rem; border-radius:4px; border:1px solid var(--border-color); }
.savings-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem; margin-bottom:.5rem; border-radius:4px; }
.savings-item.positive { background:var(--savings-positive-bg); border-left:4px solid var(--savings-positive-border); }
.savings-item.negative { background:var(--savings-negative-bg); border-left:4px solid var(--savings-negative-border); }
.savings-item.neutral { background:var(--savings-neutral-bg); border-left:4px solid var(--savings-neutral-border); }
.savings-item.total { background:#d1ecf1; border:2px solid #17a2b8; color:var(--savings-total-text); font-size:1.05rem; margin-top:1rem; }
.savings-icon { font-size:1.2rem; font-weight:700; min-width:24px; }
.savings-explanation { font-size:.85rem; color:var(--savings-explanation-color); margin-top:.25rem; }

/* Database Management Styles */
.database-container { background:var(--bg-secondary); padding:2rem; border-radius:8px; box-shadow:0 2px 4px var(--shadow); }
.db-section { margin-bottom:3rem; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid var(--border-color); }
.section-header h3 { margin:0; color:var(--text-primary); font-size:1.3rem; font-weight:600; }

/* Table Styles */
.table-responsive { overflow-x:auto; margin-top:1rem; }
.db-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; overflow:hidden; }
.db-table thead { background:var(--bg-tertiary); }
.db-table thead tr th { padding:1rem; text-align:left; font-weight:600; color:var(--text-secondary); font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--border-color); }
.db-table tbody tr { transition:background-color .2s; border-bottom:1px solid var(--border-light); }
.db-table tbody tr:last-child { border-bottom:none; }
.db-table tbody tr:hover { background-color:var(--bg-hover); }
.db-table tbody tr td { padding:.875rem 1rem; color:var(--text-secondary); font-size:.95rem; vertical-align:middle; }
.db-table tbody tr td:first-child { color:var(--text-muted); font-weight:600; font-size:.85rem; }

/* Sortable Table Headers */
.db-table thead th.sortable { cursor:pointer; user-select:none; position:relative; transition:background-color .2s; }
.db-table thead th.sortable:hover { background-color:var(--bg-hover); }
.db-table thead th.sortable.sort-asc, .db-table thead th.sortable.sort-desc { background-color:var(--bg-hover); color:var(--text-primary); }
.sort-arrow { font-size:1rem; margin-left:.25rem; color:var(--input-focus); }

/* Badge Styles */
.badge { display:inline-block; padding:.35rem .65rem; border-radius:12px; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.badge-sra1 { background:#e3f2fd; color:#1565c0; }
.badge-sra2 { background:#f3e5f5; color:#6a1b9a; }
.badge-sra3 { background:#fff3e0; color:#e65100; }
.badge-sra4 { background:#e8f5e9; color:#2e7d32; }
.badge-oversized { background:#fce4ec; color:#c2185b; }
.badge-custom { background:#f5f5f5; color:#616161; }

.badge-admin { background:#ffebee; color:#c62828; }
.badge-editor { background:#e8eaf6; color:#3949ab; }
.badge-user { background:#e0f2f1; color:#00695c; }

.badge-calc { background:#f5f5f5; color:#546e7a; padding:.3rem .6rem; font-size:.75rem; }

/* Action Buttons in Tables */
.db-table .btn-sm { margin-right:.25rem; }
.db-table .btn-sm:last-child { margin-right:0; }

/* Info Text */
.info-text { font-style:italic; color:var(--text-muted); margin:1rem 0; padding:.75rem 1rem; background:var(--bg-tertiary); border-left:4px solid var(--text-muted); border-radius:4px; }

/* Login Page */
.login-container { display:flex; justify-content:center; align-items:center; min-height:60vh; }
.login-box { background:var(--bg-secondary); padding:2rem; border-radius:8px; box-shadow:0 2px 8px var(--shadow); max-width:400px; width:100%; }
.login-box h2 { margin:0 0 1.5rem; color:var(--text-primary); text-align:center; }
.login-info { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border-color); text-align:center; color:var(--text-muted); font-size:.9rem; }

/* Modal Styles */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); }
.modal-content { background-color:var(--bg-secondary); margin:5% auto; padding:2rem; border:1px solid var(--border-color); border-radius:8px; width:90%; max-width:600px; max-height:80vh; overflow-y:auto; }
.close { color:var(--text-muted); float:right; font-size:28px; font-weight:bold; cursor:pointer; }
.close:hover { color:var(--text-primary); }
.modal-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1.5rem; }
.price-display { background:var(--bg-tertiary); padding:1rem; border-radius:4px; margin:1rem 0; }
.price-item { margin:0.5rem 0; }

/* Toast Notifications */
#toast-container { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999; max-width:500px; width:90%; }
.toast { background:var(--bg-secondary); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); margin-bottom:1rem; padding:1rem 1.5rem; position:relative; border-left:4px solid; animation:slideDown 0.3s ease-out; display:flex; align-items:center; justify-content:space-between; }
.toast.success { background:#d4edda; color:#155724; border-left-color:#28a745; }
.toast.error { background:#f8d7da; color:#721c24; border-left-color:#dc3545; }
.toast.warning { background:#fff3cd; color:#856404; border-left-color:#ffc107; }
.toast.info { background:#d1ecf1; color:#0c5460; border-left-color:#17a2b8; }
.toast-message { flex:1; font-weight:500; }
.toast-close { background:none; border:none; color:inherit; cursor:pointer; font-size:1.5rem; line-height:1; padding:0; margin-left:1rem; opacity:.5; transition:opacity .2s; }
.toast-close:hover { opacity:1; }
.toast.fade-out { animation:fadeOut 0.3s ease-out forwards; }
@keyframes slideDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-20px); } }

/* Utility Classes */
.hidden { display:none !important; }

@media (max-width:768px) {
  header .container { flex-direction:column; gap:1rem; }
  nav { flex-wrap:wrap; justify-content:center; }
  header h1 { font-size:1.25rem; }
  .form-row { grid-template-columns:1fr; }
  .price-value { font-size:2rem; }

  .section-header { flex-direction:column; align-items:flex-start; gap:1rem; }
  .db-table thead tr th { padding:.75rem .5rem; font-size:.8rem; }
  .db-table tbody tr td { padding:.625rem .5rem; font-size:.85rem; }
  .badge { font-size:.7rem; padding:.25rem .5rem; }
}