/* Modernized KumarBrothers frontend styles
   - Follow the user's design principles: clean spacing, soft shadows, consistent colors
   - Keep JS-dependent classes (like .low-stock, .table, .form-control) intact
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --brand-dark: #0b2447;
  --brand-steel: #6b7280;
  --accent: #2563eb;
  --danger: #dc2626;
  --success: #16a34a;
  --bg: #f5f7fb;
  --muted: #6c757d;
  --card-bg: #ffffff;
  --max-width: 1100px;
}

html, body { height: 100%; }
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: #0f1724;
  margin:0;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

.container-fluid.main-container{ padding-top:20px; }

/* Navbar */
.kb-navbar{
  /* Use a dark navbar to match existing markup that applies `text-white` to links */
  background: linear-gradient(90deg,var(--brand-dark), #0f3a60);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 10px 16px;
}
.kb-navbar .navbar-brand{ font-weight:700; font-size:1.05rem; color:#ffffff; }
.kb-navbar .nav-link{ color: rgba(255,255,255,0.95) !important; margin-right:12px; }
.kb-navbar .nav-link.active{ font-weight:700; color:rgba(255,255,255,0.95) !important; }

/* If you prefer a light navbar, remove `text-white` on the links in HTML or adjust styles here. */
.role-badge{ background:#fff; color:var(--brand-dark); border-radius:6px; padding:6px 10px; font-weight:600; }

/* Cards */
.card.kb-card{ background:var(--card-bg); border-radius:10px; border:none; box-shadow:0 6px 18px rgba(11,36,71,0.06); }
.kb-section-title{ font-size:1rem; font-weight:700; color:var(--brand-dark); }

/* Headings */
h4, h5 { font-weight:700; color:var(--brand-dark); }

/* Instruction box */
.instruction-box{ background:#fffef6; border-left:6px solid var(--accent); padding:14px; border-radius:8px; }
.instruction-meta{ font-size:0.9rem; color:var(--muted); }

/* Tables */
.table { border-collapse: separate; border-spacing: 0 10px; width:100%; }
.table thead th{ background: transparent; color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.table tbody tr{ background:var(--card-bg); box-shadow:0 2px 8px rgba(0,0,0,0.04); border-radius:8px; }
.table th, .table td { vertical-align: middle; padding:12px; border:none; }
.low-stock{ background: linear-gradient(90deg, rgba(245,158,11,0.06), transparent); border-left:4px solid var(--warning); }

/* KPI small card */
.kpi-card h3 { font-weight: 700; margin: .25rem 0; font-size: 1.35rem; }
.kpi-card small { color: var(--muted); }
.kpi-card .badge { font-size: .75rem; padding: 6px 8px; }

/* Status badges */
.badge-success { background: #22c55e; color: #fff; }
.badge-warning { background: #facc15; color: #111827; }

/* Status badges */
.badge-status{ padding:6px 10px; border-radius:999px; font-weight:700; }
.status-inprogress{ background:#fff3cd; color:#856404; }
.status-completed{ background:#d4edda; color:#155724; }

/* Buttons */
.btn-kb{ background: var(--brand-dark); color:#fff; border:none; border-radius:8px; padding:10px 14px; font-weight:700; }
.btn-kb-outline{ background:transparent; border:1px solid var(--brand-dark); color:var(--brand-dark); border-radius:8px; padding:8px 12px; }

/* Form styling */
.form-control{ border-radius:8px; border:1px solid #e6e9ee; padding:10px 12px; }
.form-control:focus{ box-shadow: 0 0 0 4px rgba(37,99,235,0.08); border-color:var(--accent); }
.file-drop{ border:1px dashed #d1d5db; padding:14px; border-radius:8px; text-align:center; background:var(--card-bg); }

/* Utilities */
.mb-10{ margin-bottom:10px; }
.mt-10{ margin-top:10px; }
.p-12{ padding:12px; }
.small-muted{ color:var(--muted); font-size:0.95rem; }

/* Grid helpers */
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 992px) { .grid-3 { grid-template-columns: 1fr; } }

/* Accessibility */
.btn, .btn-kb, .btn-kb-outline { min-height:40px; }

/* Keep existing JS hooks intact */
/* No IDs/classes renamed to avoid breaking scripts */


/* Global UI Tweaks: applied per user request */
body {
  background-color: #f6f7fb;
}

.card {
  border-radius: 12px;
}

h2, h3, h4, h5 {
  letter-spacing: 0.3px;
}

/* Global consistency styles (ERP-style) */
body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f6f7fb; /* soft neutral background */
  color: #2c2f33;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: 0.3px;
}

h2 { font-size: 1.6rem; }
h5 { font-size: 1.05rem; }

.card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.table th {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6c757d;
}

.table td { font-size: 0.9rem; }
.table tbody tr:hover { background-color: #f1f3f6; }

.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background-color: #0d6efd; border: none; }
.btn-primary:hover { background-color: #0b5ed7; }

.badge { padding: .45em .65em; font-weight:500; font-size: .75rem; border-radius:6px; }

.form-control, .form-select { border-radius:8px; font-size:0.9rem; }

/* Reduce flashy transitions: keep UI stable for factory use */
* { transition: none !important; }

/* RESPONSIVENESS: mobile + tablet improvements (desktop-first) */
/* Ensure page headers stack on small screens */
@media (max-width: 768px) {
  /* Make top-level header rows stack vertically and align start */
  .main-container > .d-flex.justify-content-between,
  .main-container > .d-flex.justify-content-between.align-items-center,
  .main-container > .d-flex.justify-content-between.align-items-start {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  /* Reduce heading sizes for mobile safety */
  h2 { font-size: 1.3rem; }

  /* Buttons full width on small screens to improve touch targets */
  .btn { width: 100%; }

  /* Forms: inputs stretch full width and have breathing room */
  .form-control, .form-select { width: 100% !important; margin-bottom: 0.5rem; }

  /* Make KPI cards stack nicely */
  .kpi-card { text-align: left; }

  /* Smaller table font on mobile for readability */
  table { font-size: 0.85rem; }
}

/* Tablet tweaks */
@media (min-width: 769px) and (max-width: 1024px){
  .btn { min-height: 44px; }
}

/* Prevent horizontal overflow except for tables (allow scrolling there) */
html, body { overflow-x: hidden; }
.table-responsive { overflow-x: auto; }

/* Ensure main container has side padding on small screens so content doesn't touch edges */
.container-fluid.main-container{ padding-left: 12px; padding-right: 12px; }

/* Ensure tappable size and spacing */
.btn, .btn-kb, .btn-kb-outline { min-height: 44px; padding-top: .55rem; padding-bottom: .55rem; }