/*
 Mobile-first responsive styles for Tobacco Rehandling
 Focus: clean, readable UI on phones with pleasant desktop layout
 */

:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --accent:#2563eb;
  --danger:#dc2626;
  --success:#16a34a;
  --glass: rgba(15,23,42,0.04);
  --max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
}

.app-container{max-width:var(--max-width);margin:0 auto;padding:12px 14px}

/* Top navigation (mobile-first). On small screens it's a compact header with a menu button */
.top-nav{display:flex;align-items:center;justify-content:space-between;background:var(--panel);padding:10px 14px;border-bottom:1px solid var(--glass);position:sticky;top:0;z-index:60;flex-wrap:wrap}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem}
.nav-toggle{background:transparent;border:0;padding:6px 8px;font-size:18px}
.nav-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle{transition:transform 160ms ease}
.nav-toggle.open{transform:rotate(90deg)}

.nav-links{display:none;width:100%;margin-top:8px;order:2;position:absolute;left:0;right:0;top:100%;background:var(--panel);padding:10px 12px;border-top:1px solid var(--glass);box-shadow:0 8px 20px rgba(2,6,23,0.08);z-index:70}
.nav-links ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.brand{order:0}
.nav-toggle{order:1}
.nav-right{order:3}

.nav-links.show{display:block}
.nav-links ul li{display:flex;align-items:center;justify-content:flex-start}
.nav-links a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--text);font-weight:600}
.nav-links a:hover{background:var(--glass);color:var(--accent)}

.nav-right{display:flex;gap:8px;align-items:center}
.nav-user{font-size:0.9rem;color:var(--muted)}

/* Flash messages */
.flash{padding:10px 12px;background:#fff;border:1px solid #e6eef6;border-left:4px solid var(--accent);border-radius:6px;margin:10px 0}
.flash.error{border-left-color:var(--danger);background:#fff5f5}
.flash.success{border-left-color:var(--success)}

/* Forms and buttons */
form{background:transparent}
label{display:block;font-size:0.85rem;color:var(--muted);margin-bottom:6px}
input[type="text"], input[type="email"], input[type="password"], textarea, select{width:100%;padding:10px 12px;border:1px solid #e6eef6;border-radius:8px;background:#fff}
textarea{min-height:90px}
.form-row{margin-bottom:12px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;border:0;font-weight:600;text-decoration:none}
.btn.secondary{background:#f1f5f9;color:var(--text);border:1px solid #e6eef6}
.btn.danger{background:var(--danger)}

/* Tables: responsive stack on small screens */
.responsive-table{width:100%;border-collapse:collapse;margin-top:8px}
.responsive-table thead{display:none}
.responsive-table tr{display:block;border:1px solid var(--glass);border-radius:8px;padding:8px;margin-bottom:8px;background:var(--panel)}
.responsive-table td{display:flex;justify-content:space-between;padding:6px 8px;border-bottom:1px dashed rgba(0,0,0,0.04)}
.responsive-table td:last-child{border-bottom:0}
.responsive-table td .label{color:var(--muted);font-size:0.85rem}

/* Desktop layout (wider screens) */
@media(min-width:900px){
  .app-container{padding:20px}
  .top-nav{padding:12px 20px}
  .nav-toggle{display:none}
  .top-nav{flex-wrap:nowrap}
  .nav-links{display:block;position:static;width:auto;margin-top:0;order:0;padding:0;border-top:0;box-shadow:none}
  .nav-links ul{flex-direction:row;gap:12px}
  .responsive-table{width:100%}
  .responsive-table thead{display:table-header-group}
  .responsive-table tr{display:table-row;border:none;background:transparent;padding:0;margin:0}
  .responsive-table td{display:table-cell;padding:8px 12px;border-bottom:1px solid #f1f5f9}
}

/* Modal (used by QA modal) */
#qa-modal{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:rgba(2,6,23,0.45);z-index:200}
#qa-modal.show{display:flex}
#qa-modal-content{background:var(--panel);padding:16px;border-radius:10px;max-width:640px;width:96%;box-shadow:0 10px 30px rgba(2,6,23,0.2)}

/* Devise pages: center forms for mobile */
.auth-card{max-width:420px;margin:18px auto;padding:14px;background:var(--panel);border-radius:10px;border:1px solid #eef2ff}
.auth-card h2{margin-top:0;margin-bottom:6px}
.small-muted{color:var(--muted);font-size:0.9rem}

/* Utilities */
.text-right{text-align:right}
.muted{color:var(--muted)}
.mb-8{margin-bottom:8px}
.mt-8{margin-top:8px}

/* Accessibility focus */
a:focus, button:focus, input:focus{outline:3px solid rgba(37,99,235,0.18);outline-offset:2px}

/* Enough spacing for mobile tappable targets */
button, .btn{min-height:40px}

/* Barcode link styling: use system accent color, no underline, compact */
.barcode-link{color:var(--accent);font-weight:700;text-decoration:none}
.barcode-link:hover{color:darken(var(--accent), 8%);text-decoration:underline}

/* Visual barcode block used on bale show page */
.barcode-visual{background:linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.01));padding:8px;border-radius:8px;border:1px solid var(--glass);display:inline-block}
.barcode-visual svg{display:block;height:auto;max-width:320px;width:100%;}
.barcode-raw{font-family:monospace;font-weight:700;color:var(--muted);font-size:0.9rem;margin-top:6px}

/* Nav badges for counts */
.nav-badge{display:inline-block;padding:2px 6px;border-radius:999px;font-weight:700;font-size:0.75rem;color:#fff;background:var(--muted);margin-left:4px;min-width:24px;text-align:center}
.nav-badge.accent{background:var(--accent)}
.nav-badge.danger{background:var(--danger)}

/* Dashboard widgets (mobile-first) */
.card{background:var(--panel);padding:12px;border-radius:10px;border:1px solid var(--glass);margin-bottom:10px}
.card-title{margin:0 0 8px 0;font-size:1rem}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
.stat{display:flex;flex-direction:column;align-items:flex-start;padding:8px;border-radius:8px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.stat-value{font-size:1.6rem;font-weight:800;color:var(--accent)}
.stat-label{font-size:0.85rem;color:var(--muted)}

@media(min-width:720px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .stat{align-items:center}
}