* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7fc; color:#333; }

/* ---------- PUBLIC LOGIN PAGE ---------- */
.container { max-width: 500px; margin: 80px auto; background: white; padding: 40px; border-radius: 16px; box-shadow:0 20px 40px rgba(0,0,0,0.08); }
.logo-main { display:block; margin:0 auto 20px; max-width:160px; }
h1 { text-align:center; color:#1a237e; font-size:2.2em; font-weight:700; }
.tagline { font-size:0.95em; color:#666; display:block; margin-top:-8px; margin-bottom:20px; }
.card { background:#fff; border:1px solid #eef1f6; border-radius:12px; padding:24px; margin:20px 0; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
input, textarea, select { width:100%; padding:12px 14px; margin:8px 0 16px; border:1px solid #dce1e8; border-radius:8px; font-size:15px; background:#fafbfc; transition: border 0.2s; }
input:focus, textarea:focus, select:focus { border-color:#1a237e; outline:none; }
textarea { resize:vertical; min-height:90px; }
.btn { background:#1a237e; color:white; border:none; padding:14px 28px; border-radius:8px; cursor:pointer; font-size:16px; font-weight:600; text-decoration:none; display:inline-block; transition: background 0.2s; }
.btn:hover { background:#0d1560; }
.btn-small { background:#5c6bc0; color:white; border:none; padding:6px 14px; border-radius:6px; font-size:13px; cursor:pointer; text-decoration:none; display:inline-block; margin:3px; }
.danger { background:#e53935; }
.danger:hover { background:#b71c1c; }
.alert { padding:14px; border-radius:8px; margin-bottom:18px; font-weight:500; }
.error { background:#ffebee; color:#b71c1c; border-left:4px solid #b71c1c; }
.success { background:#e8f5e9; color:#1b5e20; border-left:4px solid #2e7d32; }
.broadcast { background:#e3f2fd; padding:14px 20px; border-radius:10px; margin:0 0 25px 0; font-weight:600; color:#0d47a1; border-left:4px solid #1a237e; }

/* ---------- COMPANY PORTAL LAYOUT ---------- */
.app-container { display:flex; min-height:100vh; }
.sidebar { width:260px; background: linear-gradient(180deg, #1a237e 0%, #283593 100%); color:white; padding:20px 0; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:10; }
.sidebar-header { padding:0 20px 25px; border-bottom:1px solid rgba(255,255,255,0.15); margin-bottom:20px; text-align:center; }
.sidebar-header img { height:45px; margin-bottom:8px; }
.sidebar-header h4 { font-size:1.2em; font-weight:600; word-break:break-word; }
.nav { list-style:none; padding:0 10px; }
.nav li { margin:4px 0; }
.nav li a { display:flex; align-items:center; gap:10px; padding:12px 18px; color:rgba(255,255,255,0.9); text-decoration:none; border-radius:10px; transition: all 0.2s; font-size:15px; }
.nav li a:hover, .nav li a.active { background:rgba(255,255,255,0.2); color:white; font-weight:600; }

.main-content { flex:1; margin-left:260px; padding:30px; background:#f4f7fc; min-height:100vh; overflow-y:auto; }
.main-content h1 { text-align:left; margin-bottom:25px; color:#1a237e; font-size:2em; font-weight:700; }

/* ---------- DASHBOARD STATS ---------- */
.stats-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:24px; margin-top:10px; }
.stat-card { background:white; border-radius:16px; padding:28px 24px; box-shadow:0 6px 18px rgba(0,0,0,0.06); transition: transform 0.2s; }
.stat-card:hover { transform:translateY(-4px); }
.stat-card h3 { color:#5c6bc0; font-size:0.95em; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
.stat-card p { font-size:2.4em; font-weight:700; color:#1a237e; }

/* ---------- TABLES ---------- */
table { width:100%; border-collapse:collapse; background:white; margin-top:20px; border-radius:14px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.04); }
th, td { padding:14px 16px; text-align:left; }
th { background:#1a237e; color:white; font-weight:600; font-size:0.9em; }
td { border-bottom:1px solid #f0f0f0; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#f8faff; }

/* ---------- TABS ---------- */
.tabs { margin:20px 0; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tab { padding:10px 22px; background:#e8eaf6; color:#1a237e; border-radius:10px 10px 0 0; text-decoration:none; font-weight:600; transition:0.2s; }
.tab.active { background:#1a237e; color:white; }
.tab:hover:not(.active) { background:#c5cae9; }

/* ---------- FORMS & LAYOUT HELPERS ---------- */
.row { display:flex; gap:12px; }
.row input, .row select { flex:1; }
.commodity-row, .sale-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; padding:16px; background:#f9fafc; border-radius:12px; align-items:center; border:1px solid #eef1f6; }
.commodity-row input, .commodity-row select, .sale-row input, .sale-row select { width:auto; flex:1; min-width:110px; margin:0; }

/* ---------- MODAL ---------- */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); }
.modal-content { background:white; margin:12% auto; padding:30px; border-radius:16px; width:90%; max-width:420px; box-shadow:0 20px 40px rgba(0,0,0,0.15); }
.close { float:right; font-size:30px; cursor:pointer; color:#888; }
.close:hover { color:#000; }

/* ---------- HEADER (some pages) ---------- */
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.header .logo-small { height:42px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .sidebar { width:100%; position:relative; }
  .main-content { margin-left:0; }
  .app-container { flex-direction:column; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:500px) {
  .stats-grid { grid-template-columns:1fr; }
}