/*
 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;cursor:pointer}
.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}
}

/* Admin Sidebar Styles */
.admin-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: var(--panel);
  border-right: 1px solid var(--glass);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--glass);
}

.sidebar-brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.sidebar-role-badge {
  display: inline-block;
  padding: 4px 8px;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin: 0;
}

.sidebar-section-title {
  padding: 12px 16px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.sidebar-link:hover {
  background: var(--glass);
  color: var(--accent);
}

.sidebar-link.active {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.sidebar-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.7rem;
  color: white;
  min-width: 20px;
  text-align: center;
}

.sidebar-badge.accent {
  background: var(--accent);
}

.sidebar-badge.danger {
  background: var(--danger);
}

.sidebar-divider {
  height: 1px;
  background: var(--glass);
  margin: 8px 16px;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--glass);
  background: rgba(248, 250, 252, 0.5);
}

.sidebar-user-info {
  margin-bottom: 12px;
}

.sidebar-user-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 2px;
}

.sidebar-user-email {
  font-size: 0.8rem;
  color: var(--muted);
  word-break: break-all;
}

.btn-sidebar-logout {
  width: 100%;
  padding: 8px 12px;
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sidebar-logout:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

/* Main content adjustment when sidebar is present */
.app-container-with-sidebar {
  margin-left: 260px;
  max-width: calc(var(--max-width) + 260px);
  padding: 20px;
}

/* Mobile responsive for admin sidebar */
@media (max-width: 899px) {
  .admin-sidebar {
    width: 100%;
    position: relative;
  }
  
  .app-container-with-sidebar {
    margin-left: 0;
    padding: 12px 14px;
  }
}