/* 
 * Shuddham Milk Dispatch Challan - Style Design System
 * Modern Material 3 & Glassmorphism Theme
 */

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

:root {
  /* Premium Royal Blue & Gold Color Palette */
  --primary-color: #1e3a8a;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --primary-glow: rgba(30, 58, 138, 0.15);
  
  --secondary-color: #b45309;
  --secondary-hover: #d97706;
  --secondary-light: #fef3c7;
  
  --bg-color: #f1f5f9;
  --surface-color: rgba(255, 255, 255, 0.85);
  --surface-solid: #ffffff;
  --surface-border: rgba(226, 232, 240, 0.8);
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #06b6d4;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --blur: blur(16px);
}

[data-theme="dark"] {
  --primary-color: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-light: #1e293b;
  --primary-glow: rgba(59, 130, 246, 0.25);
  
  --secondary-color: #f59e0b;
  --secondary-hover: #fbbf24;
  --secondary-light: #334155;
  
  --bg-color: #0b0f19;
  --surface-color: rgba(15, 23, 42, 0.85);
  --surface-solid: #0f1729;
  --surface-border: rgba(51, 65, 85, 0.6);
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.5;
  /* Lock the page to the viewport on desktop so there is a SINGLE scroll
     region (<main>). Without this the body scrolls AND <main> scrolls, which
     clips content and produces the "two vertical motions" feel. The mobile
     media query below restores normal page scroll (sidebar becomes a top bar). */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: var(--transition);
}

h1, h2, h3, h4, .font-display {
  font-family: 'Outfit', sans-serif;
}

/* App Shell Structure */
#app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

/* Glassmorphic Sidebar (Navigation) */
aside {
  width: 280px;
  /* PAIRED with `main { min-width: 0 }` below — do not remove either half.
     aside is a flex child of #app-container; without flex-shrink: 0 a wide
     report table inside <main> (whose default min-width:auto refuses to
     shrink below the table's intrinsic width) steals width from the sidebar
     and squeezes/wraps the menu labels. The sidebar keeps its fixed 280px;
     <main> owns horizontal overflow instead. */
  flex-shrink: 0;
  background: var(--surface-color);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  padding: 24px;
  z-index: 100;
  height: 100vh;
  overflow-y: auto;
  /* Reserve the scrollbar's width even when nothing scrolls, so expanding a
     tall submenu (which makes the sidebar scrollable) doesn't shrink the space
     for menu labels and squeeze/wrap them. */
  scrollbar-gutter: stable;
  transition: var(--transition);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 8px;
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.brand-text h1 {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
  letter-spacing: 0.5px;
}

.brand-text p {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.nav-item, .fav-shortcut-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
}

.nav-item i, .fav-shortcut-item i {
  width: 20px;
  height: 20px;
}

.nav-item:hover, .fav-shortcut-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.nav-item.active {
  background: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 8px 16px var(--primary-glow);
}

.nav-section {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 20px 2px 20px;
  margin-top: 6px;
  opacity: 0.75;
}

.nav-section:first-of-type {
  margin-top: 0;
}

.nav-item.coming-soon {
  cursor: default;
  opacity: 0.55;
}

.nav-item.coming-soon:hover {
  background-color: transparent;
  color: var(--text-secondary);
}

.nav-item .nav-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface-border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Favorites — pinned sidebar group + per-item star toggle */
.nav-favorites-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 20px 2px 20px;
  opacity: 0.75;
}

.nav-favorites-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.nav-fav-star {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav-fav-star i {
  width: 16px;
  height: 16px;
}

.nav-fav-star:hover {
  color: var(--secondary-color);
  background: var(--secondary-light);
}

.nav-fav-star.is-favorited {
  color: var(--secondary-color);
}

.theme-toggle.is-favorited {
  color: var(--secondary-color);
}

.favorites-empty-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Accordion parent tab (module group) */
.nav-parent {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  margin-top: 4px;
}

.nav-parent i.nav-lead {
  width: 20px;
  height: 20px;
}

.nav-parent:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.nav-parent.active-group {
  background: var(--primary-light);
  color: var(--primary-color);
}

.nav-parent .nav-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.nav-parent.expanded .nav-chevron {
  transform: rotate(90deg);
}

.nav-children {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 4px 0;
  padding-left: 14px;
  border-left: 2px solid var(--surface-border);
  margin-left: 22px;
}

.nav-children.expanded {
  display: flex;
}

.nav-children .nav-item {
  font-size: 14px;
  padding: 11px 16px;
}

/* Module home page action tiles */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: var(--bg-color);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

.home-tile:hover:not(.disabled) {
  border-color: var(--primary-color);
  box-shadow: 0 8px 18px var(--primary-glow);
  transform: translateY(-2px);
}

.home-tile.disabled {
  cursor: default;
  opacity: 0.55;
}

.home-tile i {
  width: 26px;
  height: 26px;
  color: var(--primary-color);
}

.home-tile .home-tile-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.home-tile .home-tile-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* User Session Profile Box */
.user-profile {
  margin-top: auto;
  background: var(--primary-light);
  border: 1px solid var(--surface-border);
  padding: 16px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}

.user-meta h3 {
  font-size: 14px;
  font-weight: 700;
}

.user-meta p {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: capitalize;
}

.btn-logout {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-logout:hover {
  background: var(--danger);
  color: #ffffff;
}

/* Main Workspace Viewport */
main {
  flex-grow: 1;
  /* PAIRED with `aside { flex-shrink: 0 }` above — do not remove either half.
     min-width: 0 overrides the flexbox default min-width:auto so <main> is
     allowed to be narrower than its widest table; overflow-x: auto then makes
     any wide report scroll horizontally INSIDE the content pane instead of
     squeezing the sidebar. Every current and future wide table inherits this
     — no per-report overflow wrappers needed. */
  min-width: 0;
  overflow-x: auto;
  padding: 40px;
  overflow-y: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid var(--surface-border);
  padding-bottom: 20px;
}

.page-title h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary-color);
}

.page-title p {
  font-size: 14px;
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle {
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
}

.theme-toggle:hover {
  background: var(--primary-light);
  color: var(--primary-color);
}

/* Multi-View Handling */
.app-view {
  display: none;
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-view.active {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Role-gated admin sections (hidden for non-admin master-data users) */
.hidden-section { display: none !important; }

/* Generic visibility class. It looks like it always existed — it did not.
   v2.156.0 shipped "Test as user" with three elements written as
   `class="hidden"` and toggled by classList.add/remove('hidden'), against a
   rule that was never in this file. Nothing threw and no test noticed, because
   `classList.contains('hidden')` was true the whole time: the class was
   correct, only the styling was missing. The screen therefore showed its
   success box ("Test link ready — ", "expires in .", an <a> with no href yet,
   so genuinely un-clickable) and its "you have not set your PIN" warning
   permanently, from page load, whatever the server had actually answered —
   and `add('hidden')` could never take the warning away again. Reported
   28 Jul 2026 as four separate bugs; it was this one line. */
.hidden { display: none !important; }

/* App version label */
.app-version {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  opacity: 0.75;
  margin-top: 2px;
}
.login-header .app-version {
  margin-top: 8px;
}

/* "Update ready" badge — a new service worker has installed and is waiting
   (v2.193.0). Sits directly under the version label it supersedes, in the
   chrome that is already there; a release must be announceable without
   interrupting whatever form is open. Toggled by `.hidden` (index.css:560),
   which — see that rule's own comment — has to actually exist. */
.app-update-badge {
  display: inline-block;
  align-self: flex-start;
  width: max-content;
  margin-top: 4px;
  padding: 3px 8px;
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
  background: transparent;
  color: var(--secondary-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--transition);
}
.app-update-badge:hover { background: var(--secondary-color); color: #fff; }
.app-update-badge:disabled { cursor: default; opacity: 0.6; }
.app-update-badge:disabled:hover { background: transparent; color: var(--secondary-color); }

/* Glassmorphic Cards */
.card {
  background: var(--surface-color);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(30, 58, 138, 0.3);
}

/* Quick Statistics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon i {
  width: 26px;
  height: 26px;
}

.stat-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-info p {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
}

/* Login Panel Layout */
#login-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at top right, var(--primary-light), var(--bg-color));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 40px;
  text-align: center;
}

.login-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background: var(--primary-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px var(--primary-glow);
}

.login-logo i {
  width: 36px;
  height: 36px;
  color: #ffffff;
}

.login-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-color);
}

.login-header p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* Standard Inputs & Labels */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.input-container i {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  padding: 12px 16px 12px 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-glow);
}

/* Button UI Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: var(--transition);
}

.btn-primary {
  background: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--primary-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--secondary-color);
  color: #ffffff;
}

.btn-secondary:hover {
  background: var(--secondary-hover);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--surface-border);
  color: var(--text-secondary);
}

.btn-outline:hover {
  background: var(--primary-light);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Customer Orders — active status filter / shift tab */
.co-filter.active,
.co-shift.active {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px var(--primary-glow);
}
.co-filter.active:hover,
.co-shift.active:hover {
  background: var(--primary-hover);
  color: #ffffff;
}

/* File Upload Zone */
.upload-zone {
  border: 2.5px dashed var(--surface-border);
  padding: 40px;
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.3);
}

.upload-zone:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

.upload-icon {
  width: 64px;
  height: 64px;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.upload-icon i {
  width: 32px;
  height: 32px;
}

/* Challan Grid Forms */
.challan-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.full-width {
  grid-column: span 2;
}

.milk-params-card {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin-top: 16px;
}

.params-header {
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--primary-color);
}

.milk-qty-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.milk-qty-row.header-row {
  font-weight: bold;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.qty-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.qty-input-group span {
  position: absolute;
  right: 12px;
  font-size: 10px;
  font-weight: bold;
  color: var(--text-muted);
}

.form-control-qty {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  font-size: 12px;
  outline: none;
  background: #ffffff;
}

.form-control-qty:focus {
  border-color: var(--primary-color);
}

/* Visual Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #ecfeff; color: #155e75; }

/* Custom Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--surface-color);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1.5px solid var(--surface-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
}

.close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 20px 24px;
  border-top: 1.5px solid var(--surface-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Wizard List & Table UI */
.order-wizard-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wizard-item {
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: var(--transition);
}

.wizard-item.accepted { border-color: var(--success); background-color: #f0fdf4; }
.wizard-item.rejected { border-color: var(--danger); background-color: #fef2f2; opacity: 0.7; }

.wizard-item-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.wizard-item-info p {
  font-size: 12px;
  color: var(--text-muted);
}

.wizard-milk-badges {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.milk-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--bg-color);
  border-radius: 4px;
}

/* Mobile-Friendly Tables */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.responsive-table th {
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 13px;
  padding: 14px;
  text-align: left;
  border-bottom: 2px solid var(--surface-border);
}

.responsive-table td {
  padding: 14px;
  font-size: 13.5px;
  border-bottom: 1.5px solid var(--surface-border);
}

.responsive-table tr:hover td {
  background: var(--primary-light);
}

/* The Billing actions cell is a flex row (.row-actions). It MUST be allowed to
   wrap. With the default flex-wrap:nowrap its min-content width is the sum of
   every button and badge it holds, which pinned the table at 1086px against an
   855px viewport at 1280px — and because the Actions column is sticky (below),
   that 231px of overflow was spent painting the column on top of its neighbour:
   the Receipt Status cell's "Pending" badge, 73px wide, had 212px of cover over
   it and was completely invisible. Wrapping drops the column from 327px to
   113px and the table to 873px, and the badge is clear at every width.
   This also replaced an inline style="display:flex; …" on the cell, which
   duplicated .row-actions' own display:flex. v2.220.0. */
#billing-table td.row-actions {
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

/* Keep the Billing table's Actions column (Generate PI / Invoice) pinned to the
   right edge so the buttons stay visible even when the table scrolls sideways.
   NOTE this is what converts any horizontal overflow into OVERPAINTING of the
   column to its left — it is inert only while the table fits. */
#billing-table th:last-child,
#billing-table td:last-child {
  position: sticky;
  right: 0;
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
}
#billing-table th:last-child {
  background: var(--primary-light);
  z-index: 3;
}
#billing-table td:last-child {
  background: var(--surface-solid);
  z-index: 1;
}
#billing-table tr:hover td:last-child {
  background: var(--primary-light);
}

/* Audit Activity Logs */
.audit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.audit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  font-size: 12.5px;
  border-left: 3px solid var(--text-muted);
}

.audit-item.admin-log { border-left-color: var(--secondary-color); }
.audit-item.user-log { border-left-color: var(--primary-color); }

.audit-time {
  font-family: monospace;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 130px;
}

.audit-user {
  font-weight: bold;
  color: var(--primary-color);
  min-width: 80px;
}

/* Action Toggles */
.row-actions {
  display: flex;
  gap: 8px;
}

/* A control that is blocked must LOOK blocked. This used to be written inline as
   `disabled style="opacity:0.5;"` appended to tags that ALREADY carried a
   style= — per HTML5 tree construction the first attribute of a name wins and
   the later duplicate is silently dropped, so the dimming never applied and a
   blocked button was pixel-identical to a live one (three billing buttons, for
   as long as that code existed; measured on shuddham_dev at v2.219.0 as a
   computed opacity of "1" against markup asking for 0.5). A class cannot
   collide that way, which is the whole point of moving it here. v2.220.0. */
.is-blocked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The reason a row's action is blocked, printed in the row itself. A disabled
   control's title= needs a hover to appear and is not readable at a glance in
   any case, so the cause has to be on screen without one. Amber matches the
   "Pending" / "PI" badges it sits under (#92400e). v2.220.0. */
.cell-note {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: #92400e;
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--surface-border);
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
}

.icon-btn:hover {
  background: var(--primary-light);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.icon-btn.delete:hover {
  background: #fee2e2;
  color: var(--danger);
  border-color: var(--danger);
}

/* Responsive Mobile Layout Overrides */
@media (max-width: 768px) {
  /* On phones the sidebar stacks above content as a top bar, so the whole
     page scrolls as one. Undo the desktop viewport lock. */
  body {
    height: auto;
    overflow-y: auto;
  }

  #app-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  aside {
    width: 100vw;
    border-right: none;
    border-bottom: 1.5px solid var(--surface-border);
    padding: 16px;
    height: auto;
    overflow-y: visible;
  }

  .brand {
    margin-bottom: 16px;
  }

  nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .nav-item, .fav-shortcut-item {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Favorites collapse into the same horizontal-scroll strip as the rest of
     the mobile nav; per-item stars only stay in the header on this breakpoint. */
  .nav-favorites-label {
    display: none;
  }

  .nav-favorites-list {
    flex-direction: row;
  }

  .nav-fav-star {
    display: none;
  }

  .user-profile {
    display: none; /* Hide profile card on mobile sidebar, place inside dashboard or settings */
  }

  main {
    padding: 20px;
    height: auto;
  }

  .challan-form-grid {
    grid-template-columns: 1fr;
  }

  .full-width {
    grid-column: span 1;
  }

  .milk-qty-row {
    grid-template-columns: 1fr;
    gap: 8px;
    border: 1px solid var(--surface-border);
    padding: 16px;
    border-radius: var(--radius-sm);
    background: #ffffff;
  }

  .milk-qty-row.header-row {
    display: none;
  }

  .milk-qty-row::before {
    content: attr(data-product);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 6px;
    font-size: 14px;
  }

  .qty-input-group label {
    font-size: 11px;
    color: var(--text-muted);
  }

  .wizard-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .row-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* ---- Field list tables → stacked cards on phones ----
     Scoped to field-facing lists by id (Receipt Entry + Product Challan list,
     plus the Milk Outstanding Report — analysts/sales staff read it on phones),
     so the desktop-primary tables that share the .responsive-table class are
     left as-is. Reuses the .milk-qty-row card idiom. */
  #challans-table thead,
  #product-challans-table thead,
  #milk-outstanding-table thead { display: none; }

  #challans-table,
  #challans-table tbody,
  #challans-table tr,
  #challans-table td,
  #product-challans-table,
  #product-challans-table tbody,
  #product-challans-table tr,
  #product-challans-table td,
  #milk-outstanding-table,
  #milk-outstanding-table tbody,
  #milk-outstanding-table tr,
  #milk-outstanding-table td {
    display: block;
    width: 100%;
  }

  #challans-table tr,
  #product-challans-table tr,
  #milk-outstanding-table tr {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #ffffff;
  }

  #challans-table td,
  #product-challans-table td,
  #milk-outstanding-table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 12px;
    border: none;
    padding: 7px 0;
    text-align: right;
  }
  /* let multi-badge cells (e.g. Status) overflow onto a second line, right-aligned */
  #challans-table td .badge { margin-left: 0; }
  #challans-table td[data-label="Status"],
  #product-challans-table td[data-label="Status"] { justify-content: flex-end; }
  #challans-table td[data-label="Status"]::before,
  #product-challans-table td[data-label="Status"]::before { margin-right: auto; }

  #challans-table td::before,
  #product-challans-table td::before,
  #milk-outstanding-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--primary-color);
    flex: 0 0 42%;
    text-align: left;
  }

  /* empty-state colspan row: no label, keep it centered */
  #challans-table td[colspan],
  #product-challans-table td[colspan],
  #milk-outstanding-table td[colspan] { display: block; text-align: center; }
  #challans-table td[colspan]::before,
  #product-challans-table td[colspan]::before,
  #milk-outstanding-table td[colspan]::before { content: ''; }

  /* Milk Outstanding: totals row + drill-down rows get a visual accent so they
     read distinctly from a normal party card in the stacked mobile layout. */
  #milk-outstanding-table tr.mor-totals-row {
    background: var(--primary-light);
    border-color: var(--primary-color);
    font-weight: 700;
  }
  #milk-outstanding-table tr.mor-detail-row {
    background: var(--bg-color);
    margin-top: -8px;
    margin-left: 10px;
    margin-right: 10px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* checkbox cell: label on the left, box on the right */
  #challans-table td[data-label="Select"] { justify-content: flex-start; gap: 10px; }

  /* action icons: full-width wrapped row under the card, with a divider */
  #challans-table td.row-actions,
  #product-challans-table td.row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--surface-border);
  }
  #challans-table td.row-actions::before,
  #product-challans-table td.row-actions::before {
    flex-basis: 100%;
    margin-bottom: 2px;
  }

  /* tappable touch targets (>=40px) for the row action icons on phones */
  #challans-table td.row-actions .icon-btn,
  #product-challans-table td.row-actions .icon-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix 2 — Master Data: any populated table scrolls inside its own box
     instead of forcing whole-page horizontal scroll. Defensive: the live DB
     has product/party rows wider than the dev test DB. */
  #admin-view table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fix 3 — desktop-primary report/admin tables: never force full-page
     horizontal scroll on a phone; each scrolls inside its own box. These are
     desktop tools (Billing, Login History, Current Rates, Active Users, and
     the 26-col User Rights & Access) — intentionally NOT redesigned as cards. */
  #accounting-view .responsive-table,
  #reports-view .responsive-table,
  #active-users-view .responsive-table,
  #rates-report-view .responsive-table,
  #user-access-view .responsive-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS Safari auto-zooms the page when a focused input's font is < 16px.
     Bump the entry-form controls to 16px on phones to stop that jump. */
  .form-control {
    font-size: 16px;
  }
}

/* Tab/Sheet Selection Cards Styling */
.sheet-card {
  background: var(--surface-color);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 2px solid var(--surface-border);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  transition: var(--transition);
}

.sheet-card:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sheet-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.sheet-card.morning .sheet-card-icon {
  background: #fef3c7;
  color: #b45309;
}

.sheet-card.evening .sheet-card-icon {
  background: #eff6ff;
  color: #1e3a8a;
}

.sheet-card-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.sheet-card-info p {
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================
   HIGH-FIDELITY PRINT STYLING (@media print)
   ========================================== */
@media print {
  html, body {
    overflow: hidden !important;
    height: 283mm !important;
    max-height: 283mm !important;
  }

  /* Hide the rest of the application layout completely to prevent pagination spill */
  body > *:not(#print-preview-modal) {
    display: none !important;
  }
  
  /* Reset the modal overlay back to flat print-friendly margins */
  #print-preview-modal.modal-overlay {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 283mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  #print-preview-modal .modal-content {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    max-width: 210mm !important;
    height: 283mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
  }

  #print-preview-modal .modal-header,
  #print-preview-modal .modal-footer {
    display: none !important;
  }

  #print-preview-modal .modal-body {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #print-preview-container {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 283mm !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ffffff !important;
  }

  /* Force background colors and exact text contrast on all devices */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }

  body {
    background-color: #ffffff;
  }
}

/* Premium Card Blocks and restricted sidebar styles */
.milk-block-card {
  background: var(--bg-color);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--surface-border);
  border-left-width: 4px;
  transition: var(--transition);
}

.milk-block-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(30, 58, 138, 0.3);
}

.milk-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

/* User restricted sidebar menu styling */
.nav-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Trial Balance — hierarchical view (v2.187.0).
   The rows are keyboard-navigable (Enter/Space act, up/down move,
   Escape collapses), so the focus ring is not decoration: a <tr> gets
   no dependable default outline across browsers, and without this the
   arrow keys move a focus nobody can see.
   ------------------------------------------------------------------ */
.tb-row:focus { outline: 2px solid var(--secondary-color); outline-offset: -2px; }
.tb-row:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: -2px; }
.tb-row-group:hover { filter: brightness(0.97); }
.tb-row-account:hover { background: var(--surface-2, #f8fafc); }

/* ------------------------------------------------------------------
   Combined Ledger (v2.188.0).
   Same reasoning as the trial-balance rows above: Enter opens the
   underlying voucher/document and up/down move between rows, so a <tr>
   without a visible focus ring moves a focus nobody can see.
   ------------------------------------------------------------------ */
.cbl-row:focus { outline: 2px solid var(--secondary-color); outline-offset: -2px; }
.cbl-row:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: -2px; }
.cbl-row-open { cursor: pointer; }
.cbl-row-open:hover { background: var(--surface-2, #f8fafc); }
/* The splice handover: the one row the combined statement is right or wrong at. */
.cbl-handover td { border-top: 2px solid var(--secondary-color); }
/* SIDE BY SIDE, DEGRADING TO STACKED. Two books at once needs the width; below
   ~900px the columns would each be too narrow to read a figure in, so they
   stack instead of scrolling the page sideways. */
.cbl-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cbl-sides { grid-template-columns: 1fr; } }
/* Wide content scrolls inside its own box — the page body never scrolls sideways. */
.cbl-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------
   THE FOUR ALIGNED STATES (v2.190.0).
   COLOUR IS NEVER THE SIGNAL. Achal sends these screenshots to staff, and a
   screenshot loses the tooltip, survives a monochrome print and reaches people
   who do not see these hues apart — so every row also carries the state in
   WORDS in its own column, and the two "missing" states are different hues AND
   different words. The tints are a second channel, not the first.
   ------------------------------------------------------------------ */
.cbl-al-matched      { background: transparent; }
.cbl-al-date-diff    { background: rgba(2, 132, 199, .09); }     /* blue   — matched, dates differ */
.cbl-al-busy-only    { background: rgba(180, 83, 9, .11); }      /* amber  — MISSING IN SAKSHAM */
.cbl-al-saksham-only { background: rgba(124, 58, 237, .11); }    /* violet — MISSING IN BUSY */
.cbl-al-date-diff    td:first-child { border-left: 3px solid #0284c7; }
.cbl-al-busy-only    td:first-child { border-left: 3px solid #b45309; }
.cbl-al-saksham-only td:first-child { border-left: 3px solid #7c3aed; }
.cbl-al-matched      td:first-child { border-left: 3px solid transparent; }
.cbl-state { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
/* The vertical rule between the two books, so a blank half reads as a blank
   half rather than as a short row. */
.cbl-al-sak { border-left: 1px solid var(--border-color, #e5e7eb); }
.cbl-blank { color: var(--text-secondary, #6b7280); font-style: italic; }
.cbl-pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0; }
.cbl-pager button[disabled] { opacity: .45; cursor: default; }
.cbl-pagenum { min-width: 30px; padding: 2px 7px; }
.cbl-pagenum[aria-current="page"] { font-weight: 800; outline: 2px solid var(--secondary-color); outline-offset: -2px; }

/* ===========================================================================
   MASTER DATA — laptop-first sub-tabs and tables (v2.256.0)
   ---------------------------------------------------------------------------
   Achal, 20 Aug 2026, as a STANDING RULE: app.shuddhamdairy.com is used on the
   laptop, so every screen and every addition to it is designed for the laptop
   from here on unless he says otherwise. milk.shuddhamdairy.com and
   order.shuddhamdairy.com stay mobile-first at ~380px — field users and
   customers on phones. A phone must not BREAK on the staff app; it is simply
   no longer the design target. The media query at the bottom of this block is
   what keeps that promise for these tables.

   THE CLASS NAMES ARE `md-*`, AND THAT IS DELIBERATE. `class="data-table"` sits
   on ~35 tables across index.html and app.js and is styled NOWHERE in this
   repo — every one of those tables renders legibly only through its own inline
   cell padding. v2.244.0 hit exactly this and fixed ONE table rather than the
   selector. Writing a rule for that class name HERE would restyle thirty-five
   tables in a release that verified five, so it is left inert and these get
   their own name. (This comment deliberately never spells that selector with a
   leading dot: test/order-history-party-filter.test.js greps the raw stylesheet
   for it, and a comment quoting the defect is how a negative lint gets defeated
   by its own explanation.)
   test/master-data-tabs.test.js re-asserts the zero-selector fact each run.
   =========================================================================== */

.md-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--surface-border);
}
.md-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 10px 18px;
  margin-bottom: -2px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.md-tab i { width: 16px; height: 16px; }
.md-tab:hover { color: var(--primary-color); background: var(--bg-color); }
.md-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/* One panel on screen at a time, full page width. The tab logic writes display
   on THIS element and never on a card inside it — three of the cards already
   have their style.display written by role permissions (app.js applyRolePermissions
   and renderMilkTypeRestrictions), and two writers on one property fight in
   whatever order they happen to run. */
.md-panel { display: grid; grid-template-columns: 1fr; gap: 24px; }
/* A grid item defaults to min-width:auto, so a card holding a table with a
   min-width WIDER than the track stretches the track instead of letting the
   table scroll — measured at 380px on 20 Aug 2026: the wrap came out 1042px
   inside a 380px screen, with the far columns simply unreachable. The staff app
   is laptop-first now, but it still must not BREAK on a phone. */
.md-panel > .card { min-width: 0; }

.md-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-color);
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-bottom: 2px solid var(--surface-border);
  white-space: nowrap;
}
.md-table th.md-sortable { cursor: pointer; user-select: none; }
.md-table th.md-sortable:hover { color: var(--primary-color); }
.md-si { font-size: 9px; opacity: .8; margin-left: 3px; }
.md-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
  font-weight: 600;
}
.md-table tbody tr:hover { background: var(--bg-color); }
.md-table tbody tr:last-child td { border-bottom: none; }
.md-name { font-weight: 700; }
.md-sub { font-size: 11px; font-weight: normal; color: var(--text-secondary); }
.md-muted { font-weight: normal; color: var(--text-muted); }
.md-wrapcell { white-space: normal; max-width: 340px; }
.md-actions { white-space: nowrap; text-align: right; }
.md-actions .icon-btn { padding: 4px; }
.md-empty { padding: 16px 12px; font-size: 12.5px; font-weight: normal; color: var(--text-secondary); }
.md-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
}

/* A phone must not BREAK here even though it is no longer the target: the tab
   strip wraps, the tables keep their min-width and scroll sideways inside
   .md-table-wrap rather than crushing their columns, and the 68vh cap comes off
   so the page's own scroll does the work instead of a scroller inside a
   scroller. */
@media (max-width: 760px) {
  .md-tabs { gap: 2px; margin-bottom: 16px; }
  .md-tab { padding: 8px 11px; font-size: 12px; gap: 5px; }
  .md-tab i { width: 14px; height: 14px; }
  .md-table-wrap { max-height: none; }
  .md-table { font-size: 12px; }
  .md-table thead th { padding: 8px 8px; }
  .md-table tbody td { padding: 7px 8px; }
  .md-wrapcell { max-width: 180px; }
}