.form-help {
  display: block;
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-style: italic;
}
/*
  Core visual system
  - Professional, readable, minimal. Explicit font stack, sizes, spacing, and rhythm.
*/

:root {
  /* Color palette (professional, subtle) */
  --primary: #c62828;          /* red accent - industrial theme */
  --primary-hover: #b71c1c;    /* darker red for hover states */
  --muted: #6B7280;            /* gray-500 */
  --ok: #0A7B22;
  --err: #B00020;
  --bg: #F9FAFB;               /* gray-50 */
  --text: #111827;             /* gray-900 */
  --text-secondary: #374151;   /* gray-700 */
  --text-tertiary: #6B7280;    /* gray-500 */
  --text-subtle: #9CA3AF;      /* gray-400 */
  --card: #FFFFFF;
  --border: #E5E7EB;           /* gray-200 */
  --border-subtle: #F3F4F6;   /* gray-100 */
  --bg-hover: #F3F4F6;        /* gray-100 */
  --head: #F3F6FF;             /* light head */

  /* Typography */
  --font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xxs: 11px;  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;
  --fs-lg: 18px;   --fs-xl: 24px;  --fs-xxl: 30px;
  --lh-tight: 1.25; --lh-base: 1.5; --lh-loose: 1.65;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px;

  /* Radii & shadows */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,.10);

  /* Status colors */
  --color-dark-blue: #1e40af;    /* Used for completed status, trends, activity indicators */
  --color-amber: #F59E0B;        /* Used for pending status badges */
}

* { box-sizing: border-box; }

/* Base layout */
body {
  font-family: var(--font-sans);
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-size: var(--fs-md); line-height: var(--lh-base);
}

header {
  background: #FFFFFF; color: var(--text);
  padding: calc(var(--space-4) * 0.85) calc(var(--space-4) * 0.85);
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--border);
}

nav a {
  color: var(--text-secondary);
  margin-right: calc(var(--space-3) * 0.85);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: 15px;
  padding: calc(16px * 0.85) calc(6px * 0.85);
  display: inline-block;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
nav a:hover {
  color: var(--primary);
  text-decoration: underline;
}
nav a.nav-active, nav a[aria-current="page"], nav a.active {
  color: var(--primary);
  font-weight: var(--fw-bold);
  border-bottom: 3px solid transparent;
  background: rgba(198, 40, 40, 0.08);
  border-radius: 4px 4px 0 0;
  text-decoration: none;
}

/* General links */
.container { 
  padding: var(--space-7) 0; /* Only vertical padding, no horizontal padding */
  max-width: 100%; /* Remove max-width constraint to allow page-container to control width */
  margin: 0 auto; 
}
/* Negative margin hack removed - page-container now handles its own consistent padding */

a { color: #334155; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary); text-decoration: underline; }
/* Override hover for buttons - gray steel shadow on hover */
a.btn:hover,
a.btn:active,
a.btn:focus {
  color: #fff;
  text-decoration: none;
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.35);
}
a.btn.btn-secondary:hover,
a.btn.btn-secondary:active,
a.btn.btn-secondary:focus {
  color: #fff;
  text-decoration: none;
  background: var(--muted);
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.35);
}

/* spacing increased above */

h2 {
  color: var(--text);                     /* gray-900 */
  font-weight: 700;
  font-size: 1.75rem;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem 0;
  padding-left: 0.75rem; /* Space between page-container padding and red border */
  border-left: 3px solid var(--primary);
  /* No bottom border or padding-bottom - consistent with Dashboard style */
}
h3 {
  color: var(--text);
  font-size: var(--fs-lg);                /* 18px */
  font-weight: var(--fw-medium);          /* 600 */
  line-height: var(--lh-tight);
  margin: var(--space-3) 0 var(--space-2);
}

/* Tables */
table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
thead { background: var(--head); }
thead th {
  position: relative;
  user-select: none;
  overflow: hidden; /* Prevent text overflow */
  text-overflow: ellipsis; /* Truncate long text with ellipsis */
  /* Keep padding unchanged - no width increase to prevent Actions column cutoff */
}
thead th[data-sort]::after {
  content: '';
  position: absolute;
  right: 0.25rem; /* Position within existing padding space */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 2.5px solid transparent; /* Smaller arrow to fit in existing space */
  border-right: 2.5px solid transparent; /* Smaller arrow */
}
thead th[data-sort="asc"]::after {
  border-bottom: 4px solid var(--primary); /* Smaller arrow fits better */
  margin-top: -2px; /* Adjusted for smaller size */
}
thead th[data-sort="desc"]::after {
  border-top: 4px solid var(--primary); /* Smaller arrow fits better */
  margin-top: 2px; /* Adjusted for smaller size */
}
thead th:hover {
  background-color: rgba(198, 40, 40, 0.05);
}
th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; }
/* Override for sauda table wrapper - increased text size by 5% */
.sauda-table-panel .table-wrapper th {
  padding: 0.428rem 0.536rem;
  font-size: 0.632em;
  font-weight: 600;
  white-space: nowrap; /* Prevent header text wrapping */
  overflow: hidden; /* Prevent text overflow */
  text-overflow: ellipsis; /* Truncate long text with ellipsis */
  /* Keep original padding - no width increase to prevent Actions column cutoff */
}
/* Arrow positioned to minimize overlap - uses existing padding space */
.sauda-table-panel .table-wrapper th[data-sort]::after {
  right: 0.3rem; /* Positioned slightly inside padding - creates small gap from text */
}

.sauda-table-panel .table-wrapper td {
  padding: 0.428rem 0.536rem;
  font-size: 0.582em; /* Set to 0.60em as requested */
  white-space: nowrap; /* Prevent cell text wrapping */
}

/* Make table columns more compact but readable */
.sauda-table-panel .table-wrapper .data-table {
  table-layout: fixed; /* Fixed layout for predictable column widths */
  width: 100%;
  max-width: 100%;
}
td { vertical-align: middle; }
tr:hover td { background: #F9FAFF; }

/* Buttons */
.btn {
  display: inline-block; padding: 8px 12px; background: var(--primary); color: #fff;
  text-decoration: none; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  font-weight: var(--fw-medium); line-height: var(--lh-tight);
  transition: box-shadow 0.2s ease;
  margin-right: 0.5rem; /* Standardized spacing for standalone buttons */
}
.btn:hover {
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.35);
}
.btn:last-child {
  margin-right: 0; /* Remove margin from last button */
}
/* Buttons in forms and flex containers use gap instead */
form .btn,
form.inline .btn,
.table-search-form .btn {
  margin-right: 0;
}
.btn-secondary { 
  background: var(--muted); 
  /* No hover - keep gray background always */
}
.btn-active { filter: brightness(0.92); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.btn:focus { outline: 2px solid rgba(198, 40, 40, .5); outline-offset: 2px; }

/* Table buttons - consistent styling for all table action buttons */
.btn-table {
  display: inline-block; 
  padding: 6px 10px; 
  background: var(--primary); 
  color: #fff;
  text-decoration: none; 
  border-radius: var(--radius-sm); 
  border: 0; 
  cursor: pointer;
  font-weight: var(--fw-medium); 
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  vertical-align: middle; /* Ensure proper alignment in table cells */
  transition: box-shadow 0.2s ease;
  margin-right: 0.5rem;
}
/* Smaller buttons in sauda table - increased text size */
.sauda-table-panel .table-wrapper .btn-table {
  padding: 2.994px 4.988px;
  font-size: 0.768em;
  margin-right: 0.247rem;
}
.btn-table:hover {
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.35);
}
.btn-table:last-child {
  margin-right: 0;
}
.btn-table.btn-secondary {
  background: var(--muted);
}
/* Override hover for table button links - gray steel shadow on hover */
a.btn-table:hover,
a.btn-table:active,
a.btn-table:focus {
  color: #fff;
  text-decoration: none;
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.35);
}
a.btn-table.btn-secondary:hover,
a.btn-table.btn-secondary:active,
a.btn-table.btn-secondary:focus {
  color: #fff;
  text-decoration: none;
  background: var(--muted);
  box-shadow: 0 2px 8px rgba(100, 100, 100, 0.35);
}

/* Forms */
input, select { padding: 8px 10px; border: 1px solid #d0d7de; border-radius: var(--radius-sm); margin-right: var(--space-2); background: #fff; }
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2); }

form.inline { 
  display: flex; 
  gap: var(--space-2); 
  align-items: center; 
  flex-wrap: wrap; 
  margin: var(--space-2) 0 var(--space-4); 
}
form.inline .btn {
  margin-right: 0; /* Buttons in inline forms use gap instead */
}

/* Standardize button groups/spacing */
.table-search-form .btn,
form .btn {
  margin-right: 0; /* Use parent gap/flex-gap for spacing */
}

/* Table toolbar - top right alignment */
.table-toolbar {
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: flex-end;
}

/* Table search form - ensure proper spacing */
.table-search-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.table-search-form input {
  margin-right: 0; /* Use gap instead */
}

.table-search-form select {
  margin-right: 0; /* Use gap instead */
}

/* Standardize all buttons in table-search-form to same size */
.table-search-form .btn {
  padding: 8px 12px; /* Same padding as standard .btn */
  font-size: var(--fs-sm); /* Explicit font size for consistency */
  min-width: 90px; /* Minimum width to accommodate text */
  text-align: center;
  white-space: nowrap;
}

/* Badges */
/* Minimal status indicators (dot + label) */
.badge { padding: 0; background: transparent; color: var(--text-secondary); font-size: inherit; font-weight: var(--fw-medium); }
.badge::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #9CA3AF; vertical-align: middle; }
.badge-pending::before { background: var(--color-amber); }     /* amber-500 */
.badge-partial::before { background: var(--primary); }     /* red accent */
.badge-completed::before { background: var(--color-dark-blue); }   /* dark blue */

/* Status badge in sauda table - make consistent with row text */
.sauda-table-panel .table-wrapper td .badge {
  font-size: inherit; /* Match the row font size */
  color: var(--text); /* Match row text color */
  font-weight: var(--fw-regular); /* Lighter weight to match row text */
}

/* Feedback */
.flash-success { 
  color: var(--ok); 
  padding-left: 36px; /* Align with h2 red border position (24px page-container + 12px h2 padding) */
  margin-bottom: 1rem;
}
.flash-error { 
  color: var(--err); 
  padding-left: 36px; /* Align with h2 red border position (24px page-container + 12px h2 padding) */
  margin-bottom: 1rem;
}

/* Cards & KPI */
.kpi {
  background: var(--card);
  border: 1px solid #F3F4F6;             /* very subtle divider */
  border-radius: 12px;                    /* stronger rounding */
  padding: var(--space-6);                /* 24px internal */
  box-shadow: 0 1px 3px rgba(0,0,0,.08);  /* depth */
  cursor: pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.kpi:hover { transform: scale(1.02); box-shadow: var(--shadow-md); background: #F9FAFB; }
.kpi:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.08); }
.kpi:focus-visible { outline: 2px solid rgba(198,40,40,.5); outline-offset: 2px; }
.kpi-label {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
  letter-spacing: .01em;
}
.kpi-value {
  font-size: 36px;
  font-weight: var(--fw-bold);            /* 700 */
  line-height: var(--lh-tight);
}
.kpi-blue .kpi-value { color: var(--primary); }
.kpi-amber .kpi-value { color: var(--color-amber); }
.kpi-green .kpi-value { color: var(--color-dark-blue); }
.kpi-purple .kpi-value { color: var(--color-dark-blue); } /* Changed from purple to blue */
.kpi-red .kpi-value { color: #EF4444; }
.kpi, .card { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.kpi:hover, .card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: #FAFAFE; }

/* Recent activity list styles */
.list-card { background: var(--card); border: 1px solid #F3F4F6; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.list-card .header { padding: 20px 24px; border-bottom: 1px solid #F3F4F6; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); display:flex; justify-content:space-between; align-items:center; }
.list-card .header a { color: var(--text-secondary); font-weight: var(--fw-medium); }
.list-card .header a:hover { color: var(--primary); }
.list-card ul { list-style: none; margin: 0; padding: 0; }
.list-card .item { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #F3F4F6; transition: all .15s ease; cursor: pointer; }
.list-card .item:last-child { border-bottom: 0; }
.list-card .item:hover { background: #F9FAFB; }
.list-card .meta { color: var(--text-subtle); font-size: 13px; font-weight: var(--fw-regular); }
.list-card .item a { color: var(--text-secondary); font-weight: var(--fw-medium); font-size: var(--fs-sm); transition: color .15s ease; }
.list-card .item a:hover { color: var(--primary); }

/* KPI corner icon (optional) */
.kpi-icon { position:absolute; top: 10px; right: 12px; opacity: .2; }
.kpi-icon svg { width: 20px; height: 20px; }

/* Focus rings for all clickable items */
a:focus-visible, button:focus-visible, .item:focus-visible { outline: 2px solid rgba(198,40,40,.5); outline-offset: 2px; }

/* Skeleton loading states */
.skeleton { position: relative; overflow: hidden; background: #F3F4F6; border-radius: 8px; }
.skeleton::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: shimmer 1.1s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.spinner { width: 18px; height: 18px; border: 2px solid #E5E7EB; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive tweaks for activity timestamp stacking on mobile */
@media (max-width: 640px) {
  .list-card .item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .list-card .meta { align-self: flex-start; }
}

/* Recent activity dot indicators */
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.dot-blue { background:var(--primary); }
.dot-green { background: var(--color-dark-blue); }
.dot-purple { background: var(--color-dark-blue); } /* Changed from purple to blue */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ========================================
   DASHBOARD SPECIFIC STYLES
   Industrial-Corporate Theme
   ======================================== */

/* Removed duplicate color definitions - using --primary and --primary-hover instead */

/* Dashboard container - uses base container but with different padding */
/* Base page container - consistent spacing matching Saudas/Orders pages */
.page-container {
  max-width: 1670px; /* Same as saudas-page for visual consistency */
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;  /* Consistent left padding from screen edge */
  padding-right: 24px; /* Equal right padding for symmetry */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Dashboard uses base page container - inherits padding from .page-container */
/* No override needed - dashboard-container now uses .page-container padding */

/* Accounts Page uses base page container - inherits from .page-container */

/* Dashboard Header */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Dashboard title now uses base h2 styles - class removed as all h2s are now consistent */

/* Period Selector */
.dashboard-header .period-selector {
  display: flex;
  gap: 0.5rem;
}

.period-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}

.period-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--text-tertiary);
}

.period-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 600;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Enable horizontal scrolling for tables on smaller screens (< 1200px) */
/* This maintains full laptop view (> 1200px) without scrolling */
@media (max-width: 1199px) {
  /* General table wrapper */
  .table-wrapper {
    overflow-x: auto !important; /* Enable horizontal scroll on smaller screens */
  }
  
  /* Sauda table panel */
  .sauda-table-panel .table-wrapper {
    overflow-x: auto !important; /* Enable horizontal scroll on smaller screens */
  }
  
  /* Order table panel */
  .order-table-panel .table-wrapper {
    overflow-x: auto !important; /* Enable horizontal scroll on smaller screens */
  }
  
  /* Completed orders table panel */
  .completed-orders-table-panel .table-wrapper {
    overflow-x: auto !important; /* Enable horizontal scroll on smaller screens */
  }
  
  /* Dispatch info panel - enable scrolling on smaller screens */
  .dispatch-info-panel {
    overflow-y: auto !important; /* Enable vertical scroll when content exceeds */
    overflow-x: auto !important; /* Enable horizontal scroll when content exceeds */
    max-height: calc(100vh - 120px) !important; /* Maintain max height */
  }
  
  .order-info {
    overflow-y: visible !important;
    overflow-x: visible !important;
    min-width: max-content; /* Allow expansion beyond container width (reuse orders table pattern) */
  }
  
  /* Allow info rows to expand horizontally */
  .dispatch-info-panel .info-row {
    overflow-x: visible !important; /* Allow horizontal expansion */
    min-width: max-content; /* Allow row to expand beyond container */
  }
  
  /* Allow info values to expand horizontally */
  .dispatch-info-panel .info-value {
    max-width: none !important; /* Remove width constraint */
    white-space: nowrap; /* Prevent wrapping for long content */
  }
  
  .dispatch-info-panel .highlight-row .info-value {
    max-width: none !important; /* Remove width constraint for highlight rows too */
  }
  
  /* Allow tables to expand beyond container width when needed */
  .table-wrapper .data-table,
  .sauda-table-panel .table-wrapper .data-table,
  .order-table-panel .table-wrapper .data-table,
  .completed-orders-table-panel .data-table {
    min-width: max-content; /* Allow table to expand beyond 100% width */
    width: auto; /* Override fixed 100% width to allow expansion */
  }
  
  /* For fixed layout tables, ensure they can expand */
  .order-table-panel .table-wrapper .data-table,
  .completed-orders-table-panel .data-table {
    table-layout: auto; /* Switch to auto layout on smaller screens for better responsiveness */
  }
}

.metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.125rem;
  box-shadow: 0 2px 6px rgba(198, 40, 40, 0.25);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
  position: relative;
}

.metric-card:hover {
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.35);
  transform: translateY(-1px);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.56rem;
}

.metric-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
}

.metric-value {
  font-size: 1.69rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

.metric-value-warning {
  color: var(--primary);
}

.metric-comparison {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  white-space: nowrap;
  margin-left: auto;
}

.trend-up {
  color: var(--color-dark-blue);
  font-weight: 600;
}

.trend-down {
  color: var(--primary);
  font-weight: 600;
}

.trend-neutral {
  color: var(--text-tertiary);
}

/* Activity Section */
.activity-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.activity-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}

.activity-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
  gap: 0.75rem;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background: var(--bg-hover);
}

.activity-item.activity-empty {
  cursor: default;
  color: var(--text-tertiary);
}

.activity-item.activity-empty:hover {
  background: transparent;
}

.activity-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-indicator.activity-order {
  background: var(--primary);
}

.activity-indicator.activity-sauda {
  background: var(--color-dark-blue);
}

.activity-indicator.activity-dispatch {
  background: var(--primary);
}

.activity-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 1rem;
}

.activity-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font-sans);
}

.activity-time {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  white-space: nowrap;
}

/* Period selector buttons */
.period-selector .btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

/* Saudas Page - Two-Column Layout */
/* Saudas page uses base page container */
.saudas-page {
  /* Inherits max-width, margin, and padding from .page-container */
  min-height: calc(100vh - 120px);
}

.saudas-layout {
  display: flex;
  gap: 0.9rem; /* Reduced by another 20%: 1.125rem * 0.8 */
  align-items: flex-start;
}

/* Left Panel: Create New Sauda Form */
.sauda-form-panel {
  flex: 0 0 25%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.08rem; /* Reduced by another 20%: 1.35rem * 0.8 */
  box-shadow: var(--shadow-md);
  min-width: 0; /* Prevents flex item from overflowing */
}

/* Base panel title - used by all panels */
.panel-title {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.9rem 0;
  padding-bottom: 0.54rem;
  padding-left: 0.54rem;
  border-left: 3px solid var(--primary);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

.sauda-form {
  display: flex;
  flex-direction: column;
  gap: 0.72rem; /* Reduced by another 20%: 0.9rem * 0.8 */
}

.sauda-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.36rem; /* Reduced by another 20%: 0.45rem * 0.8 */
}

.sauda-form label {
  font-size: 0.72em; /* Reduced by another 20%: 0.9em * 0.8 */
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

.sauda-form input,
.sauda-form select {
  width: 100%;
  padding: 0.45rem 0.54rem; /* Reduced by another 20%: 0.5625rem * 0.8, 0.675rem * 0.8 */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.72em; /* Reduced by another 20%: 0.9em * 0.8 */
  font-family: var(--font-sans);
  background: #fff;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sauda-form input:focus,
.sauda-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2);
}

.sauda-form .btn {
  width: 100%;
  margin-top: 0.36rem; /* Reduced by another 20%: 0.45rem * 0.8 */
  margin-right: 0;
  padding: 0.576rem 0.778rem; /* Reduced by another 20%: 0.72rem * 0.8, 0.972rem * 0.8 */
  font-size: 0.72em; /* Reduced by another 20%: 0.9em * 0.8 */
}

/* Right Panel: Existing Saudas Table */
.sauda-table-panel {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.08rem;
  box-shadow: var(--shadow-md);
  min-width: 0; /* Allows flex item to shrink below content size */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevents panel itself from overflowing */
  max-width: 100%; /* Ensure panel doesn't exceed container */
}

.sauda-table-panel .table-toolbar {
  margin-bottom: 0.72rem;
  flex-shrink: 0;
  width: 100%;
  overflow: hidden; /* Prevent toolbar from causing overflow */
}

/* Toolbar form - single row, NO wrapping */
.sauda-table-panel .table-search-form {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* Tighter gap to fit in one line */
  flex-wrap: nowrap; /* Force single line */
  width: 100%;
  justify-content: flex-end; /* Align to right */
  overflow: hidden; /* Prevent overflow */
}

/* Toolbar form elements - optimized to fit in single line */
.sauda-table-panel .table-search-form input {
  flex: 0 1 120px; /* Flexible width, smaller to fit */
  min-width: 100px;
  max-width: 120px;
  font-size: 0.8em;
  padding: 0.35rem 0.45rem; /* Slightly reduced padding */
}

.sauda-table-panel .table-search-form select {
  flex: 0 1 130px; /* Flexible width, smaller to fit */
  min-width: 110px;
  max-width: 130px;
  font-size: 0.8em;
  padding: 0.35rem 0.45rem; /* Slightly reduced padding */
}

.sauda-table-panel .table-search-form .btn {
  flex: 0 0 auto; /* Don't shrink buttons */
  font-size: 0.75em; /* Slightly smaller font for buttons to fit in one line */
  padding: 0.35rem 0.6rem; /* Reduced padding to fit */
  min-width: 60px; /* Smaller min-width */
  white-space: nowrap;
}

/* Table Wrapper - Responsive Container (NO horizontal scroll) */
.table-wrapper {
  overflow-x: hidden; /* Changed from auto - no horizontal scroll */
  overflow-y: visible;
  border-radius: var(--radius-sm);
  background-color: var(--card);
  flex: 1;
  min-width: 0; /* Critical for flex children */
  width: 100%; /* Ensure it respects parent width */
}

.table-wrapper .data-table {
  width: 100%;
  max-width: 100%; /* Prevent table from exceeding container */
  margin: 0;
  table-layout: auto; /* Use automatic layout for responsive columns */
}

/* Pagination Controls */
.pagination-container {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pagination-info {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination-page-info {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 0 var(--space-3);
  font-weight: var(--fw-medium);
}

.pagination-controls .btn {
  margin-right: 0;
}

/* Fixed table layout with percentage-based column widths for sauda table */
.sauda-table-panel .table-wrapper th:nth-child(1),
.sauda-table-panel .table-wrapper td:nth-child(1) {
  width: 16%; /* Code column */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(2),
.sauda-table-panel .table-wrapper td:nth-child(2) {
  width: 15%; /* Account Name */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(3),
.sauda-table-panel .table-wrapper td:nth-child(3) {
  width: 8%; /* Product */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(4),
.sauda-table-panel .table-wrapper td:nth-child(4) {
  width: 8%; /* Grade */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(5),
.sauda-table-panel .table-wrapper td:nth-child(5) {
  width: 10%; /* Base Rate */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(6),
.sauda-table-panel .table-wrapper td:nth-child(6) {
  width: 10%; /* Total Qty */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(7),
.sauda-table-panel .table-wrapper td:nth-child(7) {
  width: 10%; /* Remaining */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(8),
.sauda-table-panel .table-wrapper td:nth-child(8) {
  width: 7%; /* Status */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(9),
.sauda-table-panel .table-wrapper td:nth-child(9) {
  width: 9%; /* Days */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sauda-table-panel .table-wrapper th:nth-child(10),
.sauda-table-panel .table-wrapper td:nth-child(10) {
  width: 7%; /* Actions (4% given to Days) */
  white-space: nowrap;
  overflow: visible; /* Allow buttons to be fully visible */
}

/* Responsive: Stack on mobile/tablet */
@media (max-width: 900px) {
  .saudas-layout {
    flex-direction: column;
    gap: 1rem;
  }
  
  .sauda-form-panel {
    flex: 1 1 100%;
    width: 100%;
  }
  
  .sauda-table-panel {
    flex: 1 1 100%;
    width: 100%;
    overflow: visible;
  }
  
  .table-wrapper {
    width: 100%;
    overflow-x: auto; /* Allow scroll on mobile only if absolutely necessary */
  }
  
  /* On mobile, allow horizontal scroll only if table is too wide */
  .sauda-table-panel .table-wrapper .data-table {
    min-width: 0; /* Remove min-width constraint on mobile */
    font-size: 0.65em; /* Slightly smaller on mobile for better fit */
  }
  
  .sauda-table-panel .table-wrapper th,
  .sauda-table-panel .table-wrapper td {
    padding: 0.4rem 0.5rem; /* Slightly smaller padding on mobile */
  }
  
  /* Toolbar - allow wrapping on mobile only */
  .sauda-table-panel .table-search-form {
    gap: 0.375rem;
    flex-wrap: wrap; /* Allow wrapping on mobile */
  }
  
  .sauda-table-panel .table-search-form input,
  .sauda-table-panel .table-search-form select {
    flex: 1 1 120px;
    min-width: 100px;
    max-width: none; /* Remove max-width constraint on mobile */
  }
  
  .sauda-table-panel .table-search-form .btn {
    flex: 1 1 auto;
    min-width: 60px;
  }
}

/* Accounts Page - All elements reduced by 20% (except width and heading) */
.accounts-page .table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(var(--space-2) * 0.8); /* 20% reduction */
}

.accounts-page .table-search-form {
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * 0.8); /* 20% reduction */
}

.accounts-page .table-search-form input {
  margin-right: 0;
  padding: calc(8px * 0.8) calc(10px * 0.8); /* 20% reduction */
  font-size: calc(1em * 0.8); /* 20% reduction */
}

.accounts-page .table-search-form .btn {
  padding: calc(8px * 0.8) calc(12px * 0.8); /* 20% reduction */
  font-size: calc(1em * 0.8); /* 20% reduction */
}

/* Accounts page form - 20% reduction */
.accounts-page form[method="post"] {
  margin: calc(12px * 0.8) 0; /* 20% reduction */
}

.accounts-page form[method="post"] input {
  padding: calc(8px * 0.8) calc(10px * 0.8); /* 20% reduction */
  font-size: calc(1em * 0.8); /* 20% reduction */
  margin-right: calc(var(--space-2) * 0.8); /* 20% reduction */
}

.accounts-page form[method="post"] .btn {
  padding: calc(8px * 0.8) calc(12px * 0.8); /* 20% reduction */
  font-size: calc(1em * 0.8); /* 20% reduction */
}
.period-selector .btn-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.period-selector .btn-secondary {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.period-selector .btn-secondary:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

/* ============================================
   ORDERS PAGE LAYOUT (matches Saudas layout)
   ============================================ */

/* Orders page uses base page container - inherits from .page-container */

.orders-layout {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* Left Panel: Order Intake Forms */
.order-form-panel {
  flex: 0 0 20%; /* Reduced to 20% to give more space to table columns */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem; /* Reduced from 1.08rem to accommodate narrower panel */
  box-shadow: var(--shadow-md);
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px); /* Increased height to show full form */
  overflow: hidden;
}

/* Order form panel needs flex-shrink: 0 for layout */
.order-form-panel .panel-title {
  flex-shrink: 0;
}

.order-form-toggle {
  display: flex;
  gap: 0.25rem; /* Further reduced to fit both buttons on one line in 20% panel */
  margin-bottom: 0.9rem;
  flex-shrink: 0;
}

.order-form-toggle .btn {
  flex: 1;
  padding: 0.4rem 0.5rem; /* Further reduced to fit both buttons on one line in 20% panel */
  font-size: 0.55em; /* Further reduced to fit both buttons on one line in 20% panel */
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.order-form-toggle .btn-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.order-form-toggle .btn:hover {
  background: var(--primary-hover);
  color: #fff;
  border-color: var(--primary-hover);
}

.order-form-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.36rem;
  margin-right: -0.36rem;
}

.order-form-container::-webkit-scrollbar {
  width: 6px;
}

.order-form-container::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 3px;
}

.order-form-container::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.order-form-container::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.order-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
}

.order-form label {
  font-size: 0.72em;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

.order-form input,
.order-form select {
  width: 100%;
  padding: 0.4rem 0.5rem; /* Reduced from 0.45rem 0.54rem for narrower panel */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.72em;
  font-family: var(--font-sans);
  background: #fff;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.order-form input:focus,
.order-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2);
}

.order-form .btn {
  width: 100%;
  margin-top: 0.36rem;
  margin-right: 0;
  padding: 0.5rem 0.65rem; /* Reduced from 0.576rem 0.778rem for narrower panel */
  font-size: 0.72em;
}

.new-account-fields {
  margin-top: 0.36rem;
  padding: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
}

/* Right Panel: Orders Table */
.order-table-panel {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.08rem;
  box-shadow: var(--shadow-md);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}

.order-table-panel .table-toolbar {
  margin-bottom: 0.72rem;
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
}

.order-table-panel .table-search-form {
  display: flex;
  align-items: center;
  gap: 0.3rem; /* Reduced gap to fit all 8 elements */
  flex-wrap: nowrap; /* Force single line */
  width: 100%;
  justify-content: flex-start; /* Align elements from start */
  overflow: hidden; /* Prevent overflow */
}

.order-table-panel .table-search-form input {
  flex: 1 1 0; /* Equal flex growth, can shrink, no base size */
  min-width: 70px; /* Minimum width for usability */
  max-width: 100px; /* Constrained to fit all elements */
  font-size: 0.75em; /* Smaller font to fit */
  padding: 0.3rem 0.4rem; /* Reduced padding */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.order-table-panel .table-search-form select {
  flex: 1 1 0; /* Equal flex growth, can shrink, no base size */
  min-width: 80px; /* Minimum width for dropdown text */
  max-width: 100px; /* Constrained to fit all elements */
  font-size: 0.75em; /* Smaller font to fit */
  padding: 0.3rem 0.4rem; /* Reduced padding */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-table-panel .table-search-form select option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Standardize toolbar buttons - all 3 buttons same size */
.order-table-panel .table-search-form .btn {
  flex: 0 0 75px; /* Fixed size, same for all buttons */
  font-size: 0.75em; /* Consistent font size */
  padding: 0.35rem 0.5rem; /* Consistent padding */
  min-width: 75px; /* Same min-width */
  max-width: 75px; /* Same max-width */
  white-space: nowrap;
  text-align: center;
}

.order-table-panel .table-wrapper {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.order-table-panel .table-wrapper .data-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.order-table-panel .table-wrapper th {
  background: var(--bg-hover);
  padding: 0.428rem 0.536rem;
  text-align: left;
  font-size: 0.632em;
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Color-code saudaless rows */
.order-table-panel .table-wrapper .data-table tbody tr[data-saudaless="true"] {
  background-color: #f9fafb;
}

.order-table-panel .table-wrapper .data-table tbody tr[data-saudaless="true"]:hover {
  background-color: #f3f4f6;
}

.order-table-panel .table-wrapper th:hover {
  background-color: rgba(198, 40, 40, 0.05);
}

.order-table-panel .table-wrapper td {
  padding: 0.428rem 0.536rem;
  font-size: 0.582em;
  white-space: nowrap;
}

.order-table-panel .table-wrapper .btn-table {
  padding: 2.994px 4.988px;
  font-size: 0.768em;
  margin-right: 0.247rem;
}

/* Fixed table layout with percentage-based column widths for orders table (Code column hidden in UI; sort=code still supported; CSV includes order_code) */
/* Column 1: Account Name - increased for better visibility */
.order-table-panel .table-wrapper th.col-account-name,
.order-table-panel .table-wrapper td.col-account-name {
  width: 20%;
  min-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 2: Product */
.order-table-panel .table-wrapper th:nth-child(2),
.order-table-panel .table-wrapper td:nth-child(2) {
  width: 7%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 3: Size */
.order-table-panel .table-wrapper th:nth-child(3),
.order-table-panel .table-wrapper td:nth-child(3) {
  width: 5%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 4: Thk */
.order-table-panel .table-wrapper th:nth-child(4),
.order-table-panel .table-wrapper td:nth-child(4) {
  width: 4%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 5: Grade */
.order-table-panel .table-wrapper th:nth-child(5),
.order-table-panel .table-wrapper td:nth-child(5) {
  width: 5%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 6: Qty */
.order-table-panel .table-wrapper th:nth-child(6),
.order-table-panel .table-wrapper td:nth-child(6) {
  width: 6%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 7: Delivery Place */
.order-table-panel .table-wrapper th:nth-child(7),
.order-table-panel .table-wrapper td:nth-child(7) {
  width: 9%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 8: Delivery Date (4% given to Days) */
.order-table-panel .table-wrapper th:nth-child(8),
.order-table-panel .table-wrapper td:nth-child(8) {
  width: 7%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 9: Remaining */
.order-table-panel .table-wrapper th:nth-child(9),
.order-table-panel .table-wrapper td:nth-child(9) {
  width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 10: Status */
.order-table-panel .table-wrapper th:nth-child(10),
.order-table-panel .table-wrapper td:nth-child(10) {
  width: 6%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 11: Days (4%; from Delivery Date) */
.order-table-panel .table-wrapper th:nth-child(11),
.order-table-panel .table-wrapper td:nth-child(11) {
  width: 9%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Days column: age-indicator badge (Orders + Saudas), compact to match other column text */
.age-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.12rem 0.28rem;
  border-radius: 3px;
  font-weight: 500;
  font-size: 0.72em;
  white-space: nowrap;
  line-height: 1.2;
}
.age-indicator.age-normal {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.age-indicator.age-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}
.age-indicator.age-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Column 12: Actions */
.order-table-panel .table-wrapper th:nth-child(12),
.order-table-panel .table-wrapper td:nth-child(12) {
  width: 12%;
  white-space: nowrap;
  overflow: visible;
}

/* Accounts Table Panel - matches activity-section styling */
.accounts-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9.6px; /* 12px * 0.8 - 20% reduction */
  box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1); /* 2px 6px * 0.8 - 20% reduction */
  overflow: hidden;
  padding: 0.864rem; /* 1.08rem * 0.8 - 20% reduction */
}

/* Login Page - consistent with accounts page styling */
/* Login page uses base page container - inherits from .page-container */

.login-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.08rem;
  max-width: 400px;
  margin: 0 auto;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-form .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.login-form .form-group:not(.remember-me-group) label {
  font-weight: var(--fw-medium);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.4;
  width: auto;
  min-width: 80px;
  text-align: left;
  flex-shrink: 0;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.4;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  height: auto;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.login-form input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.login-form .remember-me-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: -0.5rem;
}

.login-form .remember-me-group label {
  font-size: var(--fs-sm);
  line-height: 1.4;
  width: auto;
  margin: 0;
  font-weight: var(--fw-normal);
}

.login-form .form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  justify-content: center;
}

.login-form .form-actions .btn {
  flex: 0 0 auto;
  min-width: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accounts-table-panel .table-toolbar {
  margin-bottom: calc(0.72rem * 0.8); /* 20% reduction */
}

.accounts-table-panel .table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

/* Accounts table cells - 20% reduction */
.accounts-table-panel .data-table th {
  padding: calc(0.5rem * 0.8) calc(0.75rem * 0.8); /* 20% reduction */
  font-size: calc(0.9em * 0.8); /* 20% reduction */
}

.accounts-table-panel .data-table td {
  padding: calc(0.5rem * 0.8) calc(0.75rem * 0.8); /* 20% reduction */
  font-size: calc(0.9em * 0.8); /* 20% reduction */
}

.accounts-table-panel .data-table .btn-table {
  padding: calc(6px * 0.8) calc(10px * 0.8); /* 20% reduction */
  font-size: calc(var(--fs-sm) * 0.8); /* 20% reduction */
}

/* Accounts pagination - 20% reduction */
.accounts-page .pagination-container {
  padding: calc(var(--space-4) * 0.8) calc(var(--space-6) * 0.8); /* 20% reduction */
  font-size: calc(1em * 0.8); /* 20% reduction */
}

.accounts-page .pagination-controls .btn {
  padding: calc(8px * 0.8) calc(12px * 0.8); /* 20% reduction */
  font-size: calc(1em * 0.8); /* 20% reduction */
}

/* Admin page uses base page container - inherits from .page-container */

/* Admin Table Panel - matches activity-section styling */
.admin-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9.6px; /* 12px * 0.8 */
  box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1); /* 2px 6px * 0.8 */
  overflow: hidden;
  padding: 0.864rem; /* 1.08rem * 0.8 */
  margin-bottom: 1.2rem; /* 1.5rem * 0.8 */
}

.admin-table-panel .table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

.admin-table-panel .data-table th {
  padding: calc(0.5rem * 0.8) calc(0.75rem * 0.8); /* 20% reduction */
  font-size: calc(0.9em * 0.8); /* 20% reduction */
}

.admin-table-panel .data-table td {
  padding: calc(0.5rem * 0.8) calc(0.75rem * 0.8); /* 20% reduction */
  font-size: calc(0.9em * 0.8); /* 20% reduction */
}

.admin-table-panel .data-table th:hover {
  background-color: rgba(198, 40, 40, 0.05);
}

.admin-table-panel .data-table .btn-table {
  padding: 4.8px 8px; /* 6px 10px * 0.8 - 20% reduction */
  font-size: 0.8em; /* Standard button font size * 0.8 */
  vertical-align: middle; /* Ensure proper alignment in table cells */
}

/* Fix alignment for inline forms in admin table cells */
.admin-table-panel .data-table td form {
  display: inline;
  vertical-align: middle;
}

.admin-table-panel .data-table td form button.btn-table {
  vertical-align: middle;
}

/* Ensure anchor buttons also align properly */
.admin-table-panel .data-table td a.btn-table {
  vertical-align: middle;
}

.admin-form .btn {
  padding: calc(var(--space-3) * 0.8) calc(9.6px * 1.2); /* Match input padding vertically, slightly wider horizontally */
  font-size: calc(var(--fs-md) * 0.8); /* Match input font-size */
  align-self: flex-end; /* Ensure button aligns with form inputs */
  height: auto; /* Allow button to size naturally */
  /* Push button down to align with input field (account for label + label margin) */
  margin-top: calc(calc(var(--fs-sm) * 0.8) + calc(var(--space-2) * 0.8));
  margin-bottom: 0;
  box-sizing: border-box; /* Include padding in height calculation */
}

/* Completed Orders Table Panel - matches activity-section styling */
/* Completed Orders page uses base page container - inherits from .page-container */

.completed-orders-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px; /* 12px * 0.9 */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* 2px 6px * 0.9 */
  overflow: hidden;
  margin-top: calc(var(--space-4) * 0.8);
}

.completed-orders-table-panel .table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

.completed-orders-table-panel .data-table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.completed-orders-table-panel .data-table th {
  background: var(--bg-hover);
  padding: 0.35rem 0.50rem; /* 0.432rem 0.576rem * 0.9 */
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: 0.65em; /* 0.8em * 0.9 */
  color: var(--text);
  border-bottom: 1.5px solid var(--border); /* 2px * 0.9 */
  white-space: nowrap;
}

.completed-orders-table-panel .data-table th:hover {
  background-color: rgba(198, 40, 40, 0.05);
}

.completed-orders-table-panel .data-table td {
  padding: 0.35rem 0.50rem; /* 0.432rem 0.576rem * 0.9 */
  border-bottom: 0.8px solid var(--border-subtle); /* 1px * 0.9 */
  color: var(--text-secondary);
  font-size: 0.6em; /* 0.8em * 0.9 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Color-code saudaless rows */
.completed-orders-table-panel .data-table tbody tr[data-saudaless="true"] {
  background-color: #f9fafb;
}

.completed-orders-table-panel .data-table tbody tr[data-saudaless="true"]:hover {
  background-color: #f3f4f6;
}

/* Fixed table layout with percentage-based column widths for completed orders table */
/* Column 1: Code (FOCUS - increased width) */
.completed-orders-table-panel .table-wrapper th:nth-child(1),
.completed-orders-table-panel .table-wrapper td:nth-child(1) {
  width: 10%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 2: Account Name */
.completed-orders-table-panel .table-wrapper th:nth-child(2),
.completed-orders-table-panel .table-wrapper td:nth-child(2) {
  width: 14%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 3: Product */
.completed-orders-table-panel .table-wrapper th:nth-child(3),
.completed-orders-table-panel .table-wrapper td:nth-child(3) {
  width: 6%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 4: Size */
.completed-orders-table-panel .table-wrapper th:nth-child(4),
.completed-orders-table-panel .table-wrapper td:nth-child(4) {
  width: 4%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 5: Thk */
.completed-orders-table-panel .table-wrapper th:nth-child(5),
.completed-orders-table-panel .table-wrapper td:nth-child(5) {
  width: 3%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 6: Grade */
.completed-orders-table-panel .table-wrapper th:nth-child(6),
.completed-orders-table-panel .table-wrapper td:nth-child(6) {
  width: 4%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 7: Qty */
.completed-orders-table-panel .table-wrapper th:nth-child(7),
.completed-orders-table-panel .table-wrapper td:nth-child(7) {
  width: 6%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 8: Final Rate */
.completed-orders-table-panel .table-wrapper th:nth-child(8),
.completed-orders-table-panel .table-wrapper td:nth-child(8) {
  width: 9%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Allow multiple lines for final rates */
  vertical-align: top; /* Align content to top */
  padding-top: 0.35rem; /* Match td padding */
  padding-bottom: 0.35rem;
}

/* Column 9: Slips */
.completed-orders-table-panel .table-wrapper th:nth-child(9),
.completed-orders-table-panel .table-wrapper td:nth-child(9) {
  width: 6%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Allow multiple lines for slips */
  vertical-align: top; /* Align content to top */
  padding-top: 0.35rem; /* Match td padding */
  padding-bottom: 0.35rem;
}

/* Slips container - vertical display */
.completed-orders-table-panel .slips-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 4em; /* Limit height to ~3-4 lines */
  overflow: hidden;
  cursor: default; /* Default cursor, tooltip still works via title attribute */
}

.completed-orders-table-panel .slip-item {
  font-size: 0.85em; /* Increased from 0.6em for better readability */
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Final Rate container - vertical display (reusing slips pattern) */
.completed-orders-table-panel .final-rate-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 4em; /* Limit height to ~3-4 lines */
  overflow: hidden;
}

.completed-orders-table-panel .final-rate-item {
  font-size: 0.85em; /* Consistent with slip-item and sauda-code-item */
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sauda Codes container - vertical display (reusing slips pattern) */
.completed-orders-table-panel .sauda-codes-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 4em; /* Limit height to ~3-4 lines */
  overflow: hidden;
  cursor: default; /* Default cursor, tooltip still works via title attribute */
}

.completed-orders-table-panel .sauda-code-item {
  font-size: 0.85em; /* Consistent with slip-item and final-rate-item */
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 10: Delivery Date */
.completed-orders-table-panel .table-wrapper th:nth-child(10),
.completed-orders-table-panel .table-wrapper td:nth-child(10) {
  width: 9%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 11: Delivery Place */
.completed-orders-table-panel .table-wrapper th:nth-child(11),
.completed-orders-table-panel .table-wrapper td:nth-child(11) {
  width: 9%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 12: Sauda Linked (FOCUS - increased width) */
.completed-orders-table-panel .table-wrapper th:nth-child(12),
.completed-orders-table-panel .table-wrapper td:nth-child(12) {
  width: 12%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Allow multiple lines for sauda codes */
  vertical-align: top; /* Align content to top */
  padding-top: 0.35rem; /* Match td padding */
  padding-bottom: 0.35rem;
}

/* Column 13: Factory */
.completed-orders-table-panel .table-wrapper th:nth-child(13),
.completed-orders-table-panel .table-wrapper td:nth-child(13) {
  width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 14: Dispatched At */
.completed-orders-table-panel .table-wrapper th:nth-child(14),
.completed-orders-table-panel .table-wrapper td:nth-child(14) {
  width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 15: Actions */
.completed-orders-table-panel .table-wrapper th:nth-child(15),
.completed-orders-table-panel .table-wrapper td:nth-child(15) {
  width: 5%;
  min-width: 100px;
  white-space: nowrap;
  overflow: visible;
}

.completed-orders-table-panel .pagination-container {
  padding: calc(var(--space-4) * 0.72) calc(var(--space-6) * 0.72); /* 0.8 * 0.9 */
  border-top: 0.8px solid var(--border); /* 1px * 0.9 */
  background: var(--bg-hover);
  font-size: 0.6em; /* 0.8em * 0.9 */
}

/* Edit Page Styling */
.edit-page-container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6);
}

.edit-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.edit-form .form-group {
  margin-bottom: var(--space-5);
}

.edit-form .form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
  color: var(--text);
  font-size: var(--fs-sm);
}

.edit-form .form-control {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  background: #fff;
  transition: border-color 0.2s ease;
}

.edit-form .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2);
}

.edit-form .form-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
}

/* Admin form styling */
.admin-form {
  display: flex;
  gap: calc(var(--space-3) * 0.8); /* 20% reduction */
  align-items: flex-end;
  margin-bottom: calc(var(--space-4) * 0.8); /* 20% reduction */
  flex-wrap: wrap;
}

.admin-form .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 120px; /* 150px * 0.8 */
}

.admin-form .form-group label {
  display: block;
  margin-bottom: calc(var(--space-2) * 0.8); /* 20% reduction */
  font-weight: var(--fw-medium);
  color: var(--text);
  font-size: calc(var(--fs-sm) * 0.8); /* 20% reduction */
}

.admin-form .form-control {
  width: 100%;
  padding: calc(var(--space-3) * 0.8); /* 20% reduction */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: calc(var(--fs-md) * 0.8); /* 20% reduction */
  background: #fff;
}

/* Admin note paragraph - 20% reduction */
.admin-note {
  color: var(--text-secondary);
  font-size: calc(0.9em * 0.8); /* 20% reduction */
  margin-bottom: calc(1.5rem * 0.8); /* 20% reduction */
}

/* Reduce button size in completed orders table by 10% */
.completed-orders-table-panel .data-table .btn-table {
  padding: 4.5px 7px; /* 4.8px 8px * 0.9 */
  font-size: 0.65em; /* 0.8em * 0.9 */
}

/* Reduce badge size in completed orders table by 10% */
.completed-orders-table-panel .data-table .badge {
  font-size: 0.9em; /* Inherit from td (0.72em) but reduce badge dot */
}

.completed-orders-table-panel .data-table .badge::before {
  width: 6.5px; /* 8px * 0.9 */
  height: 6.5px; /* 8px * 0.9 */
  margin-right: 5px; /* 6px * 0.9 */
}

/* Total value display styling */
.total-value-display {
  font-weight: var(--fw-medium);
  color: var(--text);
}

.total-value-display:hover {
  color: var(--primary);
}

.order-table-panel .table-wrapper td {
  padding: 0.54rem 0.72rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.order-table-panel .table-wrapper .btn-table {
  padding: 0.288rem 0.54rem;
  font-size: 0.691em;
  margin-right: 0.36rem;
  white-space: nowrap;
}

/* Responsive: Stack layout on mobile */
@media (max-width: 768px) {
  .orders-layout {
    flex-direction: column;
    gap: 1.08rem;
  }

  .order-form-panel {
    flex: 1 1 100%;
    max-height: none;
    width: 100%;
  }

  .order-table-panel {
    flex: 1 1 100%;
    width: 100%;
  }

  .order-table-panel .table-search-form {
    flex-wrap: wrap;
  }

  .order-table-panel .table-search-form input,
  .order-table-panel .table-search-form select,
  .order-table-panel .table-search-form .btn {
    flex: 1 1 auto;
    min-width: 100px;
  }
}

/* Dispatch Page - Two-Column Layout */
/* Dispatch page uses base page container - inherits padding from .page-container */

.dispatch-layout {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* Left Panel: Dispatch Form */
.dispatch-form-panel {
  flex: 0 0 40%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.08rem;
  box-shadow: var(--shadow-md);
  min-width: 0;
}

/* Dispatch form panel uses base .panel-title */

.dispatch-form {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.dispatch-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
}

.dispatch-form label {
  font-size: 0.72em;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

.dispatch-form input {
  padding: 0.54rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.72em;
  font-family: var(--font-sans);
  background: var(--card);
  color: var(--text);
}

.dispatch-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.dispatch-form small {
  font-size: 0.65em;
  color: var(--text-tertiary);
}

.dispatch-form .form-actions {
  display: flex;
  gap: 0.54rem;
  margin-top: 0.36rem;
}

/* Right Panel: Order Information */
.dispatch-info-panel {
  flex: 0 0 460px; /* Increased further: 418px * 1.1 ≈ 460px (21% more than original 380px) */
  max-width: 460px; /* Increased further: 418px * 1.1 ≈ 460px */
  min-width: 460px; /* Ensure minimum width to prevent shrinking */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.08rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow: hidden; /* Prevent panel itself from scrolling - content area (.order-info) will scroll */
}

/* Dispatch info panel uses base .panel-title */

.order-info {
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
  overflow-y: visible;
  overflow-x: visible; /* Ensure horizontal overflow is visible */
  flex: 1;
  min-width: 0; /* Allow flex item to shrink below content size */
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.36rem 0;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0; /* Allow flex item to shrink */
  overflow: hidden; /* Container clips overflow */
}

.info-row:last-child {
  border-bottom: none;
}

.info-row.highlight-row {
  background: rgba(220, 38, 38, 0.05);
  padding: 0.54rem 0.72rem;
  margin: 0 -0.72rem;
  border-left: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  overflow: hidden; /* Ensure content fits within bounds */
  width: calc(100% + 1.44rem); /* Account for negative margin: 0.72rem * 2 = 1.44rem */
  box-sizing: border-box; /* Include padding and border in width calculation */
  display: flex; /* Ensure flex layout */
  justify-content: space-between; /* Maintain space-between alignment */
  align-items: center; /* Center align items */
}

.info-label {
  font-size: 0.78em;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  flex: 0 0 28%; /* Reduced from 35% to 28% to give more space to value */
  min-width: 0; /* Allow shrinking if needed */
  overflow: hidden; /* Ensure it doesn't overflow */
  box-sizing: border-box; /* Include padding in width calculation */
}

.info-value {
  font-size: 0.78em;
  color: var(--text);
  font-family: var(--font-sans);
  text-align: right;
  flex: 1;
  font-weight: var(--fw-regular);
  min-width: 0; /* Allow flex item to shrink */
  overflow: visible; /* Content can extend, but container clips */
  word-wrap: break-word; /* Break long words if needed */
  max-width: 100%; /* Ensure it doesn't exceed parent width */
}

.info-value.highlight {
  color: var(--text);
  font-weight: var(--fw-medium);
}

.highlight-row .info-value {
  text-align: right;
  color: var(--text);
  word-spacing: 0.18rem;
  line-height: 1.5;
  overflow: visible; /* Content can extend, but container clips */
  min-width: 0; /* Allow flex item to shrink */
  max-width: 100%; /* Ensure it doesn't exceed parent width */
  flex-shrink: 1; /* Allow shrinking if needed */
  box-sizing: border-box; /* Include padding in width calculation */
  white-space: nowrap; /* Ensure single line (matches inline style) */
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .dispatch-layout {
    flex-direction: column;
  }
  
  .dispatch-form-panel,
  .dispatch-info-panel {
    flex: 1 1 100%;
    min-width: 0; /* Allow shrinking on mobile */
    max-width: 100%; /* Allow full width on mobile */
  }
}

/* Auth-aware navigation */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.main-nav .nav-links,
.main-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-nav .nav-actions .nav-user {
  color: var(--text-secondary, #6b7280);
  font-size: 0.95rem;
}

.main-nav .nav-actions a {
  text-decoration: none;
}

/* Account link styling - gray by default, red on hover */
.account-link {
  color: #6b7280;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.account-link:hover {
  color: var(--primary, #c62828);
}