/* Gen-Meds Accounting System - Mobile-First CSS */
:root {
  --primary: #1a5276;
  --primary-light: #2980b9;
  --primary-dark: #0d3244;
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;
  --info: #3498db;
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --text: #2c3e50;
  --text-light: #7f8c8d;
  --border: #e0e6ed;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: all 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ========== LOGIN SCREEN ========== */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 20px;
}

.login-box {
  background: white;
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: left;
  width: 100%;
  max-width: 400px;
}

.login-box .logo { font-size: 64px; margin-bottom: 10px; }
.login-box h1 { color: var(--primary); font-size: 28px; margin-bottom: 5px; }
.login-box .subtitle { color: var(--text-light); margin-bottom: 30px; font-size: 14px; }
.login-box .version { color: var(--text-light); font-size: 12px; margin-top: 20px; }

#login-form input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  transition: var(--transition);
}

#login-form input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ========== MAIN APP ========== */
#main-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  box-shadow: var(--shadow);
}

.app-header .header-logo {
  height: 48px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  margin-right: 12px;
}

@media (max-width: 767px) {
  .app-header .header-logo {
    height: 40px;
    max-width: 240px;
  }
}

.menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  margin-right: 12px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
}

.logo-small { font-size: 22px; }

.header-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-icon:hover { background: rgba(255,255,255,0.25); }

/* ========== SIDEBAR ========== */
.sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: 260px;
  background: white;
  border-right: 1px solid var(--border);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.sidebar.open { transform: translateX(0); }

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
}

.nav-items { padding: 8px 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--text);
  text-decoration: none;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--bg);
  color: var(--primary);
}

.nav-item.active {
  background: rgba(26, 82, 118, 0.08);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

.nav-icon { font-size: 20px; width: 24px; text-align: left; }
.nav-label { font-size: 14px; }

.sidebar-overlay {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ========== CONTENT ========== */
.content {
  margin-top: 8px;
  padding: 20px;
  min-height: calc(100vh - 56px);
}

.screen-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.screen-content.active { display: block; }

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

/* ========== SECTION HEADERS ========== */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

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

.section-header .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.section-header input,
.section-header select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  min-width: 160px;
}

/* ========== BUTTONS ========== */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); }

.btn-secondary {
  background: white;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover { background: rgba(26, 82, 118, 0.05); }

.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}

/* ========== STATS GRID ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  transition: var(--transition);
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.stat-card.success { border-top: 3px solid var(--success); }
.stat-card.warning { border-top: 3px solid var(--warning); }
.stat-card.danger { border-top: 3px solid var(--danger); }
.stat-card:not(.success):not(.warning):not(.danger) { border-top: 3px solid var(--primary); }

.stat-icon { font-size: 28px; margin-bottom: 8px; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--primary); }
.stat-card.success .stat-value { color: var(--success); }
.stat-card.warning .stat-value { color: var(--warning); }
.stat-card.danger .stat-value { color: var(--danger); }
.stat-label { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* ========== DASHBOARD SECTIONS ========== */
.dashboard-sections {
  display: grid;
  gap: 20px;
}

.section-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.section-card h3 {
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ========== TABLES ========== */
.table-container {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead {
  background: var(--primary);
  color: white;
  position: sticky;
  top: 0;
}

th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tr:hover { background: rgba(26, 82, 118, 0.03); }

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-paid { background: #d4edda; color: #155724; }
.status-partial { background: #fff3cd; color: #856404; }
.status-unpaid { background: #f8d7da; color: #721c24; }

.action-btns {
  display: flex;
  gap: 6px;
}

.action-btns button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  border-radius: 4px;
  transition: var(--transition);
}

.action-btns button:hover { background: var(--bg); }

.empty {
  text-align: left;
  padding: 40px;
  color: var(--text-light);
  font-size: 14px;
}

/* ========== MODALS ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.modal-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 2001;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

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

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-light);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover { background: var(--bg); color: var(--danger); }

.modal-body { padding: 20px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: white;
}

/* ========== FORMS ========== */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: var(--transition);
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Purchase/Sale item rows */
.purchase-item-row,
.sale-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.sale-item-row {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
}

.purchase-item-row input,
.sale-item-row input,
.sale-item-row select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.si-total {
  font-weight: 600;
  color: var(--primary);
  font-size: 13px;
}

.sale-total {
  background: var(--bg);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-top: 16px;
}

/* ========== ACCOUNTING SUMMARY ========== */
.accounting-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.summary-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  text-align: left;
}

.summary-card.income { border-left: 4px solid var(--success); }
.summary-card.expense { border-left: 4px solid var(--danger); }
.summary-card.net { border-left: 4px solid var(--info); }

.summary-label { font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.summary-value { font-size: 18px; font-weight: 700; }
.summary-card.income .summary-value { color: var(--success); }
.summary-card.expense .summary-value { color: var(--danger); }
.summary-card.net .summary-value { color: var(--info); }

/* ========== REPORTS ========== */
.report-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.tab-btn {
  background: white;
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  transition: var(--transition);
}

.tab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.report-tab { display: none; }
.report-tab.active { display: block; }

.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.report-filters input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ========== SETTINGS ========== */
.settings-grid {
  display: grid;
  gap: 20px;
}

.settings-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.settings-card h3 {
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ========== HINTS ========== */
.hint {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
  font-style: italic;
}

/* ========== HIDDEN ========== */
.hidden { display: none !important; }

/* ========== RESPONSIVE ========== */
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .section-header { flex-direction: row; align-items: center; justify-content: space-between; }
  .dashboard-sections { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .sidebar {
    transform: translateX(0);
    width: 240px;
  }
  .menu-toggle { display: none; }
  .content { margin-left: 240px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .settings-grid { grid-template-columns: repeat(3, 1fr); }
  .modal { max-width: 700px; }
}

@media (max-width: 767px) {
  .form-row { grid-template-columns: 1fr; }
  .purchase-item-row,
  .sale-item-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
  }
  .accounting-summary { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 18px; }
  .content { padding: 12px; }
  .modal { width: 95%; max-height: 95vh; }
}


/* Bigger New Sale window */
#sale-modal {
  width: 96vw;
  max-width: 1180px;
  max-height: 94vh;
}
#sale-modal .modal-body {
  padding: 22px;
}
#sale-modal .sale-item-row {
  grid-template-columns: minmax(240px, 2.2fr) minmax(150px, 1.4fr) 80px 120px 90px 120px 44px !important;
}
#sale-modal .si-price,
#sale-modal .si-qty,
#sale-modal .si-comm {
  width: 100% !important;
}
#sale-modal .si-total {
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 767px) {
  #sale-modal { width: 98vw; max-height: 96vh; }
  #sale-modal .sale-item-row { grid-template-columns: 1fr !important; }
}

/* Print styles for invoice */
@media print {
  .app-header, .sidebar, .menu-toggle, .btn-icon { display: none !important; }
  .content { margin: 0; padding: 0; }
}

/* RTL support ready */
[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .sidebar.open { transform: translateX(0); }
[dir="rtl"] .content { margin-left: 0; }
[dir="rtl"] .nav-item { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .nav-item.active { border-left: none; border-right-color: var(--primary); }


/* ========== EXCEL-STYLE TABLES ========== */
.excel-table-container {
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}

.excel-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.excel-table th {
  background: var(--primary);
  color: white;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.2);
}

.excel-table td {
  padding: 4px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.excel-table .row-num {
  text-align: left;
  font-weight: 600;
  color: var(--primary);
  background: var(--bg);
  width: 30px;
}

.excel-table input,
.excel-table select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  transition: var(--transition);
}

.excel-table input:hover,
.excel-table select:hover {
  border-color: var(--border);
  background: white;
}

.excel-table input:focus,
.excel-table select:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 2px rgba(26, 82, 118, 0.1);
}

.excel-table input[type="number"] {
  text-align: right;
}

.excel-table .item-row:nth-child(even) {
  background: rgba(26, 82, 118, 0.02);
}

.excel-table .item-row:hover {
  background: rgba(26, 82, 118, 0.05);
}

.excel-table .btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  border-radius: 4px;
  transition: var(--transition);
}

.excel-table .btn-icon:hover {
  background: var(--danger);
  color: white;
}

/* Mobile responsive for excel tables */
@media (max-width: 767px) {
  .excel-table-container {
    max-height: 50vh;
  }
  .excel-table {
    font-size: 12px;
  }
  .excel-table input,
  .excel-table select {
    padding: 4px 6px;
  }
}



/* Inventory styled like Purchase Preview */
.inventory-preview-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.inventory-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(26,82,118,0.08), rgba(41,128,185,0.04));
  border-bottom: 1px solid var(--border);
}
.inventory-preview-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}
.inventory-preview-subtitle {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 3px;
}
.inventory-preview-total {
  text-align: right;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 190px;
}
.inventory-preview-total-label {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.inventory-preview-total-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
}
.inventory-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
.inventory-summary-strip > div {
  background: #fff;
  padding: 12px 16px;
}
.inventory-summary-strip strong {
  display: block;
  font-size: 18px;
  color: var(--primary);
}
.inventory-summary-strip span {
  display: block;
  font-size: 12px;
  color: var(--text-light);
}
.inventory-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.inventory-preview-table th {
  background: var(--primary);
  color: white;
  padding: 10px 8px;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
.inventory-preview-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13px;
}
.inventory-preview-table tbody tr:hover {
  background: rgba(26,82,118,0.04);
}
.inv-number {
  width: 45px;
  text-align: left;
  color: var(--text-light);
  font-weight: 700;
}
.inv-item-cell strong,
.price-cell strong {
  display: block;
  color: var(--text);
}
.inv-item-cell small,
.price-cell small,
.inventory-preview-table td small {
  display: block;
  color: var(--text-light);
  font-size: 11px;
  margin-top: 2px;
}
.stock-pill,
.expiry-pill,
.batch-pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}
.stock-pill.success,
.expiry-pill.success { background: rgba(39,174,96,.12); color: var(--success); }
.stock-pill.danger,
.expiry-pill.danger { background: rgba(231,76,60,.12); color: var(--danger); }
.batch-pill { background: rgba(52,152,219,.12); color: var(--info); }
.price-cell { text-align: right; white-space: nowrap; }
.muted-text { color: var(--text-light); font-size: 12px; }
@media (max-width: 900px) {
  .inventory-preview-header { flex-direction: column; align-items: stretch; }
  .inventory-preview-total { text-align: left; }
  .inventory-summary-strip { grid-template-columns: 1fr; }
  .inventory-preview-card { overflow-x: auto; }
  .inventory-preview-table { min-width: 1250px; }
}


/* Wider Inventory Edit/Add window */
#item-modal {
  width: 98vw !important;
  max-width: 1900px !important;
  max-height: 94vh !important;
}
#item-modal .modal-body {
  padding: 18px !important;
  max-height: calc(94vh - 130px) !important;
  overflow-y: auto !important;
}
#item-modal .excel-table-container {
  max-height: 72vh !important;
  overflow: auto !important;
}
#item-modal .excel-table {
  min-width: 1780px !important;
  table-layout: fixed;
}
#item-modal .excel-table th,
#item-modal .excel-table td {
  padding: 6px !important;
}
#item-modal .excel-table th:nth-child(2),
#item-modal .excel-table td:nth-child(2) { width: 260px; }
#item-modal .excel-table th:nth-child(3),
#item-modal .excel-table td:nth-child(3) { width: 135px; }
#item-modal .excel-table th:nth-child(4),
#item-modal .excel-table td:nth-child(4),
#item-modal .excel-table th:nth-child(5),
#item-modal .excel-table td:nth-child(5) { width: 140px; }
#item-modal .excel-table th:nth-child(11),
#item-modal .excel-table td:nth-child(11) { width: 140px; }
#item-modal .excel-table th:nth-child(12),
#item-modal .excel-table td:nth-child(12) { width: 135px; }
#item-modal .excel-table th:nth-child(15),
#item-modal .excel-table td:nth-child(15) { width: 180px; }
#item-modal .excel-table th:nth-child(18),
#item-modal .excel-table td:nth-child(18) { width: 220px; }
#item-modal .excel-table input,
#item-modal .excel-table select {
  font-size: 13px !important;
  padding: 8px 9px !important;
  background: #fff !important;
  border-color: var(--border) !important;
}


/* Simplified Inventory Edit view */
#item-modal .inventory-edit-row input {
  min-width: 100%;
}
#item-modal .inventory-edit-row .ei-name { font-weight: 700; }
#item-modal .inventory-edit-row .ei-sold-qty {
  background: #f3f6f9 !important;
  color: var(--text-light) !important;
}
#item-modal .excel-table:has(.inventory-edit-row) {
  min-width: 1180px !important;
}
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(2),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(2) { width: 340px; }
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(3),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(3) { width: 160px; }
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(4),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(4) { width: 150px; }
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(5),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(5),
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(6),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(6) { width: 110px; }
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(7),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(7) { width: 135px; }
#item-modal .excel-table:has(.inventory-edit-row) th:nth-child(8),
#item-modal .excel-table:has(.inventory-edit-row) td:nth-child(8) { width: 210px; }


/* Dashboard calculation panels */
.dashboard-calculations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 24px 0;
}
.calc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.calc-card h3 {
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 10px;
}
.calc-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.calc-line:last-child { border-bottom: 0; }
.calc-line strong { display: block; font-size: 13px; color: var(--text); }
.calc-line small { display: block; color: var(--text-light); font-size: 11px; margin-top: 2px; }
.calc-line span { font-weight: 700; color: var(--primary); white-space: nowrap; }
.calc-line.positive span { color: var(--success); }
.calc-line.negative span { color: var(--danger); }
@media (min-width: 900px) {
  .dashboard-calculations { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .dashboard-calculations { grid-template-columns: repeat(4, 1fr); }
}


/* Inventory table padding: item 10px, all other fields 6px */
.inventory-preview-table th,
.inventory-preview-table td {
  padding: 6px !important;
}
.inventory-preview-table .inv-item-cell {
  padding: 10px !important;
}
.inventory-preview-table .inv-item-cell strong {
  line-height: 1.25;
}

/* Accounting customer ledger filters */
.ledger-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:10px}.ledger-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ledger-actions select{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:white}@media(max-width:767px){.ledger-header{flex-direction:column}.ledger-actions{width:100%}.ledger-actions select,.ledger-actions button{width:100%}}

/* Inventory item details under item name */
.inventory-preview-table .inv-item-cell { text-align:left !important; padding:10px !important; min-width:260px; }
.inventory-preview-table .inv-item-cell strong { display:block; font-weight:800; margin-bottom:3px; }
.inventory-preview-table .inv-item-cell small { display:block; color:#516173; line-height:1.25; margin-top:2px; }
.inventory-preview-table th:not(:nth-child(2)),
.inventory-preview-table td:not(.inv-item-cell) { text-align:center !important; padding:6px !important; }
.inventory-preview-table .price-cell { text-align:center !important; }

/* Purchase rows include batch and expiry fields */
.purchase-item-row {
  grid-template-columns: minmax(210px, 2fr) 80px 110px 140px 150px 110px 44px !important;
}
.purchase-item-row input.pi-batch,
.purchase-item-row input.pi-expiry {
  min-width: 0;
}
@media (max-width: 900px) {
  .purchase-item-row { grid-template-columns: 1fr !important; }
}

/* Professional Accounting Center */
.accounting-pro-header .muted,
.muted { color: var(--text-light); font-size: 13px; margin-top: 4px; }
.accounting-pro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.accounting-pro-card {
  background: white;
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.accounting-pro-card span { display:block; color: var(--text-light); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing:.35px; }
.accounting-pro-card strong { display:block; color: var(--primary-dark); font-size: 20px; margin: 5px 0; }
.accounting-pro-card small { color: var(--text-light); }
.accounting-pro-card.success { border-top-color: var(--success); }
.accounting-pro-card.warning { border-top-color: var(--warning); }
.accounting-pro-card.danger { border-top-color: var(--danger); }
.accounting-tabs { display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 18px; }
.accounting-tab {
  border: 1px solid var(--border);
  background: white;
  color: var(--primary);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor:pointer;
}
.accounting-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
.accounting-tab-panel { display:none; }
.accounting-tab-panel.active { display:block; }
.aging-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.aging-card {
  background: #fff;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.aging-card strong { display:block; color: var(--primary-dark); }
.aging-card small { color: var(--text-light); }
.aging-card span { display:block; font-weight:800; margin: 7px 0; color: var(--primary); }
.aging-bar { height: 7px; background:#edf2f7; border-radius:999px; overflow:hidden; }
.aging-bar i { display:block; height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); }
.pro-ledger-card {
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:white;
  margin-bottom:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.pro-ledger-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding: 14px 16px;
  background:#f8fbfd;
  border-bottom:1px solid var(--border);
}
.pro-ledger-head h3 { margin:0 0 3px; color: var(--primary-dark); }
.pro-ledger-head p { color: var(--text-light); margin:0 0 7px; }
.pro-ledger-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.customer-account-summary {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:1px;
  background: var(--border);
}
.customer-account-summary > div { background:white; padding: 12px; }
.customer-account-summary span { display:block; color: var(--text-light); font-size: 11px; text-transform: uppercase; font-weight: 800; }
.customer-account-summary strong { display:block; margin-top:4px; color: var(--primary-dark); }
.ledger-detail { padding: 14px; background:white; border-top:1px solid var(--border); overflow:auto; }
.credit-warning { display:block; color:var(--danger); font-weight:800; padding: 10px 16px; background:rgba(231,76,60,.08); border-top:1px solid rgba(231,76,60,.18); }
#collection-center table td,
#outstanding-invoices-table table td,
#customer-ledger-professional table td,
#lab-ranking table td,
#monthly-performance table td,
#accounting-table table td { vertical-align:middle; }
@media (max-width: 767px) {
  .pro-ledger-head { flex-direction:column; }
  .pro-ledger-actions { justify-content:flex-start; }
  .accounting-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .accounting-tab { white-space:nowrap; }
}

/* Settings reset danger zone */
.settings-card.danger-zone {
  border: 2px solid rgba(231,76,60,.25);
  background: #fffafa;
}
.settings-card.danger-zone h3 {
  color: var(--danger);
}
.settings-card.danger-zone input {
  border-color: rgba(231,76,60,.35);
}

/* Professional Medical Rep Center */
.rep-pro-header { align-items:flex-start; }
.rep-kpi-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.rep-kpi-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.rep-kpi-card span { display:block; color:var(--text-light); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.rep-kpi-card strong { display:block; color:var(--primary); font-size:24px; margin-top:5px; }
.rep-kpi-card.success strong { color:var(--success); }
.rep-kpi-card.warning strong { color:var(--warning); }
.rep-tabs { display:flex; gap:8px; margin:12px 0 16px; flex-wrap:wrap; }
.rep-tab { border:1px solid var(--border); background:white; color:var(--text); padding:10px 16px; border-radius:999px; cursor:pointer; font-weight:700; }
.rep-tab.active { background:var(--primary); color:white; border-color:var(--primary); }
.rep-achieved { display:inline-block; padding:4px 10px; border-radius:999px; font-weight:800; }
.rep-achieved.success { background:rgba(39,174,96,.12); color:var(--success); }
.rep-achieved.warning { background:rgba(243,156,18,.12); color:var(--warning); }
.rep-achieved.danger { background:rgba(231,76,60,.12); color:var(--danger); }
code { background:#f1f5f9; padding:3px 6px; border-radius:5px; }
@media(max-width:900px){ .rep-kpi-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .rep-kpi-grid { grid-template-columns: 1fr; } }


.rep-statement-panel{margin-top:18px;background:#fff;border:1px solid #dce6ef;border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.rep-statement-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #e5edf5;padding-bottom:12px;margin-bottom:14px}
.rep-statement-header h3{margin:0;color:#1a5276;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.rep-statement-header h2{margin:4px 0;color:#1f2937}
.rep-statement-actions{text-align:right;line-height:1.7}
.rep-kpi-grid.compact{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0}
.badge.success{display:inline-block;background:#dcfce7;color:#166534;padding:4px 8px;border-radius:999px;font-weight:700;font-size:12px}
@media(max-width:800px){.rep-statement-header{display:block}.rep-statement-actions{text-align:left;margin-top:10px}}

.rep-filter-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 16px;
  align-items: center;
}
.rep-filter-box h3 { margin: 0 0 6px; color: var(--primary); }
.rep-filter-control label { display: block; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.rep-filter-control select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
}
@media(max-width:760px){ .rep-filter-box { grid-template-columns: 1fr; } }


/* Applied: invoice logo 3x larger and left aligned */
.brand-left{text-align:left!important}.brand-left img{width:420px!important;max-width:420px!important;max-height:150px!important;object-fit:contain!important;object-position:left top!important;display:block!important;margin-left:0!important}.logo-section{width:420px!important;text-align:left!important;margin-left:0!important;padding-left:0!important;flex:none!important}.logo-section img{width:420px!important;max-width:none!important;height:auto!important;display:block!important;margin:0!important}


/* Purchase period summary */
.purchase-period-summary{
  display:grid;
  grid-template-columns:repeat(6,minmax(130px,1fr));
  gap:12px;
  margin:0 0 16px 0;
}
.purchase-period-summary>div{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  box-shadow:var(--shadow);
  border-top:3px solid var(--primary);
}
.purchase-period-summary span{
  display:block;
  color:var(--text-light);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.purchase-period-summary strong{
  display:block;
  margin-top:5px;
  color:var(--primary-dark);
  font-size:18px;
}
@media(max-width:900px){.purchase-period-summary{grid-template-columns:repeat(2,1fr)}}

/* === POS-style New Sale screen inspired by pharmacy desktop workflow === */
.sale-pos-modal {
  width: 96vw !important;
  max-width: 1500px !important;
  height: 92vh !important;
  max-height: 92vh !important;
  display: flex;
  flex-direction: column;
}
.sale-pos-modal.hidden { display: none !important; }
.sale-pos-header { flex: 0 0 auto; }
.sale-pos-body {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 10px !important;
  background: #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sale-pos-topbar,
.sale-pos-customerbar,
.sale-pos-scanbar {
  display: grid;
  gap: 8px;
  align-items: end;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.sale-pos-topbar { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.sale-pos-customerbar { grid-template-columns: 1.6fr 1.4fr 1.2fr 1fr 1fr; }
.sale-pos-scanbar { grid-template-columns: 2.8fr auto auto 180px; }
.pos-field label,
.sale-pos-notes label {
  display: block;
  font-size: 11px;
  color: #34495e;
  font-weight: 700;
  margin-bottom: 3px;
}
.pos-field input,
.pos-field select,
.pos-pay-row input,
.pos-pay-row select,
.sale-pos-notes textarea {
  width: 100%;
  border: 1px solid #ccd6e0;
  border-radius: 5px;
  padding: 7px 8px;
  font-size: 13px;
  background: #fff;
}
.pos-barcode-wrap {
  display: flex;
  align-items: center;
  border: 2px solid #b9c7d6;
  background: #fff;
  border-radius: 8px;
  height: 46px;
}
.barcode-icon {
  font-size: 28px;
  color: #27ae60;
  font-weight: 900;
  padding: 0 12px;
}
#sale-barcode-search {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: 600;
}
.sale-pos-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 8px;
}
.sale-pos-info {
  background: #fff8df;
  border: 1px solid #d4c188;
  border-radius: 8px;
  padding: 10px;
  overflow: auto;
}
.sale-pos-info h4 {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #1a5276;
}
.pos-info-line {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  border-bottom: 1px solid #eadfae;
  padding: 7px 0;
  font-size: 12px;
}
.pos-info-line span { color: #6b5d2d; font-weight: 700; }
.pos-info-line strong { text-align: right; color: #2c3e50; word-break: break-word; }
.sale-pos-grid-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid #9aa7b6;
  border-radius: 8px;
  background: #fff;
}
.sale-pos-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sale-pos-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e6edf5;
  border: 1px solid #b8c4d0;
  padding: 7px;
  text-align: center;
  color: #1f3344;
}
.sale-pos-grid td {
  border: 1px solid #c5ced8;
  padding: 4px;
  text-align: center;
  background: #fff;
}
.sale-pos-grid tr:nth-child(even) td { background: #f4f7fa; }
.sale-pos-grid .pos-item-select {
  width: 100%;
  min-width: 360px;
  border: none;
  background: transparent;
  font-weight: 700;
  color: #1a5276;
  padding: 6px;
}
.sale-pos-grid input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  padding: 6px;
  font-weight: 600;
}
.sale-pos-grid .si-total {
  display: block;
  font-weight: 900;
  color: #c0392b;
  padding: 6px;
}
.sale-pos-bottom {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 360px 260px;
  gap: 8px;
}
.sale-pos-notes,
.sale-pos-payment,
.sale-pos-net {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
}
.sale-pos-payment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pos-pay-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #34495e;
  margin-bottom: 3px;
}
.sale-pos-net {
  background: #c60000;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sale-pos-net span { font-size: 15px; font-weight: 800; }
.sale-pos-net strong { font-size: 42px; line-height: 1; }
.sale-pos-net small { color: #ffdede; }
.sale-pos-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f7f9fb;
}
@media (max-width: 900px) {
  .sale-pos-topbar,
  .sale-pos-customerbar,
  .sale-pos-scanbar,
  .sale-pos-main,
  .sale-pos-bottom { grid-template-columns: 1fr; }
  .sale-pos-modal { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; }
}


/* Bigger New Sale item-adding box */
#newSaleModal .modal-dialog,
#saleModal .modal-dialog,
#new-sale-modal .modal-dialog,
.new-sale-modal .modal-dialog {
  width: 96vw !important;
  max-width: 96vw !important;
}

#newSaleModal .modal-content,
#saleModal .modal-content,
#new-sale-modal .modal-content,
.new-sale-modal .modal-content {
  height: 92vh !important;
  max-height: 92vh !important;
}

#newSaleModal .modal-body,
#saleModal .modal-body,
#new-sale-modal .modal-body,
.new-sale-modal .modal-body {
  max-height: calc(92vh - 120px) !important;
  overflow-y: auto !important;
}

#saleItemsContainer,
#saleItemsTableContainer,
#saleItemsList,
#saleItems,
#invoiceItems,
#invoiceItemsContainer,
.sale-items-container,
.sale-items-table-container,
.sale-items-list,
.sale-items-grid,
.invoice-items-container,
.invoice-items-table-container,
.new-sale-items,
.items-section,
.items-grid {
  min-height: 480px !important;
  max-height: 600px !important;
  height: 52vh !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

#saleItemsContainer table,
#saleItemsTableContainer table,
#invoiceItemsContainer table,
.sale-items-grid table,
.invoice-items-table-container table {
  width: 100% !important;
}

#newSaleModal .totals-section,
#saleModal .totals-section,
.new-sale-modal .totals-section,
.sale-totals,
.invoice-totals {
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  z-index: 5 !important;
  border-top: 1px solid #ddd !important;
  padding-top: 8px !important;
}


/* Master Stock */
.master-stock-strip { margin-bottom: 12px; }
.master-stock-table th { white-space: nowrap; }
.master-stock-group td {
  background: #e8f2ff !important;
  color: #0f3f7a;
  font-weight: 800;
  text-align: left !important;
  font-size: 14px;
  border-top: 2px solid #0f62b3;
}
.master-stock-out {
  opacity: .72;
}
.master-stock-in td {
  background: #fff;
}


/* Master Stock sold details */
.link-button.sold-details-btn {
  background: transparent;
  border: none;
  color: #0f62b3;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 6px;
}
.link-button.sold-details-btn:hover { color: #063c75; }
.detail-header-box {
  background: #f4f8ff;
  border: 1px solid #d7e7ff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.sold-details-table th,
.sold-details-table td {
  white-space: nowrap;
}
.btn-sm {
  padding: 4px 8px !important;
  font-size: 12px !important;
}


/* Sold details edit/delete actions */
.btn-danger {
  background: #dc3545 !important;
  color: #fff !important;
  border: 1px solid #dc3545 !important;
  border-radius: 6px;
}
.btn-danger:hover { background: #bb2d3b !important; }
.sold-details-table td:last-child { min-width: 170px; }
.sold-details-table .btn-sm { margin: 2px; }


/* Invoice status update */
.invoice-status-update-btn {
  margin-left: 6px;
  border-radius: 6px;
}
.status-paid { background:#d7f5df;color:#116329;padding:3px 8px;border-radius:12px;font-weight:700; }
.status-partial { background:#fff3cd;color:#8a5a00;padding:3px 8px;border-radius:12px;font-weight:700; }
.status-unpaid { background:#fde2e2;color:#a51616;padding:3px 8px;border-radius:12px;font-weight:700; }


/* Master Stock purchase-ledger behavior */
.master-stock-table caption,
.master-stock-note {
  color:#555;
  font-size:13px;
}


/* Master Stock group totals */
.master-stock-group-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.master-stock-group-line span:first-child {
  font-size: 15px;
  font-weight: 900;
  color: #0f3f7a;
  flex: 1;
  min-width: 260px;
}
.master-stock-group-line span:not(:first-child) {
  background: #ffffff;
  border: 1px solid #bcd7ff;
  border-radius: 8px;
  padding: 4px 10px;
  color: #0f3f7a;
}


/* EXACT New Sale POS layout fix: stack small fields at left, make item grid wide/tall */
#sale-modal.sale-pos-modal {
  width: 98vw !important;
  max-width: 98vw !important;
  height: 94vh !important;
  max-height: 94vh !important;
}

#sale-modal .sale-pos-body {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 8px !important;
}

/* Left stacked small fields */
#sale-modal .sale-pos-topbar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  padding: 6px !important;
  margin: 0 !important;
  align-content: start !important;
}

#sale-modal .sale-pos-customerbar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  padding: 6px !important;
  margin: 0 !important;
  align-content: start !important;
  overflow-y: auto !important;
}

/* Make all stacked fields compact */
#sale-modal .pos-field label,
#sale-modal .pos-pay-row label,
#sale-modal .sale-pos-notes label {
  font-size: 10px !important;
  margin-bottom: 1px !important;
  line-height: 1.05 !important;
}

#sale-modal .pos-field input,
#sale-modal .pos-field select,
#sale-modal .pos-pay-row input,
#sale-modal .pos-pay-row select {
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 6px !important;
  font-size: 12px !important;
}

/* Right side search bar */
#sale-modal .sale-pos-scanbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) 120px 110px 130px !important;
  gap: 6px !important;
  padding: 6px !important;
  margin: 0 !important;
}

#sale-modal .pos-barcode-wrap {
  height: 38px !important;
}

#sale-modal #sale-barcode-search {
  font-size: 16px !important;
}

/* Main item grid takes almost all space on the right */
#sale-modal .sale-pos-main {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
}

#sale-modal .sale-pos-info {
  display: none !important;
}

#sale-modal .sale-pos-grid-wrap {
  height: 100% !important;
  min-height: 520px !important;
  width: 100% !important;
  overflow: auto !important;
  border: 2px solid #9aa7b6 !important;
}

#sale-modal .sale-pos-grid {
  min-width: 1150px !important;
  width: 100% !important;
  font-size: 13px !important;
}

/* Bottom totals compact */
#sale-modal .sale-pos-bottom {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) 360px 240px !important;
  gap: 8px !important;
  max-height: 120px !important;
  overflow: hidden !important;
}

#sale-modal .sale-pos-notes,
#sale-modal .sale-pos-payment,
#sale-modal .sale-pos-net {
  padding: 6px !important;
}

#sale-modal .sale-pos-notes textarea {
  height: 64px !important;
  max-height: 64px !important;
  font-size: 12px !important;
}

#sale-modal .sale-pos-net strong {
  font-size: 34px !important;
}

/* Keep action buttons compact */
#sale-modal .sale-pos-actions {
  padding: 8px !important;
  gap: 6px !important;
}

#sale-modal .sale-pos-actions button {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* Mobile: fields remain stacked, item grid still large */
@media (max-width: 900px) {
  #sale-modal.sale-pos-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  #sale-modal .sale-pos-body {
    display: block !important;
    overflow-y: auto !important;
    padding: 6px !important;
  }

  #sale-modal .sale-pos-topbar,
  #sale-modal .sale-pos-customerbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 5px !important;
    margin-bottom: 6px !important;
  }

  #sale-modal .sale-pos-scanbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  #sale-modal .sale-pos-info {
    display: none !important;
  }

  #sale-modal .sale-pos-grid-wrap {
    height: 46vh !important;
    min-height: 360px !important;
  }

  #sale-modal .sale-pos-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }
}


/* Remove barcode/add row/price type area and give space to items grid */
#sale-modal .sale-pos-scanbar{
  display:none !important;
}
#sale-modal .sale-pos-main{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
}
#sale-modal .sale-pos-grid-wrap{
  min-height:650px !important;
  height:72vh !important;
}


/* New Sale user-friendly layout:
   full customer information box + large multi-item entry grid */
#sale-modal.sale-pos-modal{
  width:98vw!important;
  max-width:98vw!important;
  height:95vh!important;
  max-height:95vh!important;
}

#sale-modal .sale-pos-body{
  display:grid!important;
  grid-template-columns:340px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:10px!important;
  padding:10px!important;
  overflow:hidden!important;
}

/* Full customer info box on left */
#sale-modal .sale-pos-topbar,
#sale-modal .sale-pos-customerbar{
  grid-column:1!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  margin:0!important;
  padding:10px!important;
  background:#f8fbff!important;
  border:1px solid #d4e2f2!important;
  border-radius:12px!important;
  align-content:start!important;
}

#sale-modal .sale-pos-topbar{
  grid-row:1!important;
  max-height:210px!important;
}

#sale-modal .sale-pos-customerbar{
  grid-row:1!important;
  margin-top:220px!important;
  max-height:calc(95vh - 360px)!important;
  overflow-y:auto!important;
}

/* Compact but complete customer fields */
#sale-modal .pos-field label,
#sale-modal .pos-pay-row label,
#sale-modal .sale-pos-notes label{
  font-size:11px!important;
  font-weight:700!important;
  color:#334155!important;
  margin-bottom:2px!important;
}

#sale-modal .pos-field input,
#sale-modal .pos-field select,
#sale-modal .pos-pay-row input,
#sale-modal .pos-pay-row select{
  height:34px!important;
  min-height:34px!important;
  padding:5px 8px!important;
  font-size:13px!important;
  border-radius:8px!important;
}

/* Main item table fills right side */
#sale-modal .sale-pos-main{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  min-width:0!important;
  height:100%!important;
}

#sale-modal .sale-pos-info{
  display:none!important;
}

#sale-modal .sale-pos-grid-wrap{
  height:100%!important;
  min-height:620px!important;
  width:100%!important;
  overflow:auto!important;
  border:2px solid #cbd5e1!important;
  border-radius:12px!important;
  background:white!important;
}

#sale-modal .sale-pos-grid{
  min-width:1180px!important;
  width:100%!important;
  font-size:14px!important;
}

#sale-modal .sale-pos-grid th{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  background:#eaf3ff!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

#sale-modal .sale-pos-grid td{
  padding:8px!important;
  vertical-align:middle!important;
}

#sale-modal .sale-pos-grid input,
#sale-modal .sale-pos-grid select{
  height:34px!important;
  min-height:34px!important;
  font-size:13px!important;
}

/* Remove old top scan/add row controls; item addition happens through grid */
#sale-modal .sale-pos-scanbar{
  display:none!important;
}

/* Bottom payment/totals bar */
#sale-modal .sale-pos-bottom{
  grid-column:1 / -1!important;
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) 420px 260px!important;
  gap:10px!important;
  max-height:150px!important;
  overflow:hidden!important;
}

#sale-modal .sale-pos-notes,
#sale-modal .sale-pos-payment,
#sale-modal .sale-pos-net{
  background:#f8fbff!important;
  border:1px solid #d4e2f2!important;
  border-radius:12px!important;
  padding:10px!important;
}

#sale-modal .sale-pos-notes textarea{
  height:84px!important;
  max-height:84px!important;
  resize:none!important;
}

#sale-modal .sale-pos-payment{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
}

#sale-modal .sale-pos-net strong{
  font-size:42px!important;
  line-height:1!important;
}

/* Action buttons simple and clear */
#sale-modal .sale-pos-actions{
  padding:8px 10px!important;
  gap:8px!important;
  background:#f8fbff!important;
  border-top:1px solid #dbe5ef!important;
}

#sale-modal .sale-pos-actions button{
  min-height:42px!important;
  border-radius:10px!important;
  font-weight:700!important;
}

/* Mobile-friendly */
@media(max-width:900px){
  #sale-modal.sale-pos-modal{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
  }
  #sale-modal .sale-pos-body{
    display:block!important;
    overflow-y:auto!important;
    padding:8px!important;
  }
  #sale-modal .sale-pos-topbar,
  #sale-modal .sale-pos-customerbar{
    margin:0 0 8px 0!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #sale-modal .sale-pos-main{
    height:auto!important;
  }
  #sale-modal .sale-pos-grid-wrap{
    height:48vh!important;
    min-height:380px!important;
  }
  #sale-modal .sale-pos-bottom{
    display:grid!important;
    grid-template-columns:1fr!important;
    max-height:none!important;
  }
}


/* =====================================================
   NEW SALE DESIGNER COMPLETE REDESIGN
   Goal: customer info card + large multi-item table + sticky totals/actions
   ===================================================== */

/* Main modal/window */
#sale-modal.sale-pos-modal,
#sale-modal,
#newSaleModal,
#saleModal {
  width: 98vw !important;
  max-width: 98vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Main body layout */
#sale-modal .sale-pos-body,
#newSaleModal .modal-body,
#saleModal .modal-body {
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 12px !important;
  background: #eef4fb !important;
  overflow: hidden !important;
  max-height: calc(95vh - 100px) !important;
}

/* Full customer information card */
#sale-modal .sale-pos-topbar,
#sale-modal .sale-pos-customerbar,
#newSaleModal .form-grid,
#saleModal .form-grid,
#newSaleModal .customer-section,
#saleModal .customer-section,
#newSaleModal .payment-section,
#saleModal .payment-section {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid #d8e4f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  align-content: start !important;
  margin: 0 !important;
}

#sale-modal .sale-pos-topbar {
  grid-row: 1 !important;
  max-height: 190px !important;
}

#sale-modal .sale-pos-customerbar {
  grid-row: 1 !important;
  margin-top: 202px !important;
  max-height: calc(95vh - 375px) !important;
  overflow-y: auto !important;
}

/* Labels and inputs */
#sale-modal label,
#newSaleModal label,
#saleModal label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  margin-bottom: 3px !important;
  letter-spacing: .2px !important;
}

#sale-modal input,
#sale-modal select,
#newSaleModal input,
#newSaleModal select,
#saleModal input,
#saleModal select {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  padding: 5px 9px !important;
  font-size: 13px !important;
}

/* Hide old barcode/add-row/price type strip to make full item space */
#sale-modal .sale-pos-scanbar,
#newSaleModal .barcode-entry,
#saleModal .barcode-entry,
#newSaleModal .sale-entry-bar,
#saleModal .sale-entry-bar,
#newSaleModal .item-search-row,
#saleModal .item-search-row {
  display: none !important;
}

/* Main item entry area */
#sale-modal .sale-pos-main,
#newSaleModal .items-section,
#saleModal .items-section,
#newSaleModal .sale-items-section,
#saleModal .sale-items-section,
#newSaleModal .invoice-items-section,
#saleModal .invoice-items-section {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

#sale-modal .sale-pos-info {
  display: none !important;
}

/* Large multi-item grid */
#sale-modal .sale-pos-grid-wrap,
#saleItemsContainer,
#saleItemsTableContainer,
#saleItemsList,
#saleItems,
#saleItemsBody,
#invoiceItems,
#invoiceItemsContainer,
.sale-items-container,
.sale-items-table-container,
.sale-items-grid,
.invoice-items-container,
.invoice-items-table-container,
.items-grid,
.new-sale-items {
  width: 100% !important;
  height: 100% !important;
  min-height: 620px !important;
  max-height: none !important;
  overflow: auto !important;
  display: block !important;
  background: #fff !important;
  border: 2px solid #b8c7d8 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
}

#sale-modal .sale-pos-grid,
#saleItemsContainer table,
#saleItemsTableContainer table,
#saleItemsList table,
#saleItems table,
#invoiceItems table,
#invoiceItemsContainer table,
.sale-items-grid table,
.invoice-items-table-container table {
  width: 100% !important;
  min-width: 1180px !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}

#sale-modal .sale-pos-grid th,
#saleItemsContainer th,
#saleItemsTableContainer th,
#invoiceItemsContainer th,
.sale-items-grid th,
.invoice-items-table-container th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #dbeafe !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  padding: 9px !important;
  white-space: nowrap !important;
}

#sale-modal .sale-pos-grid td,
#saleItemsContainer td,
#saleItemsTableContainer td,
#invoiceItemsContainer td,
.sale-items-grid td,
.invoice-items-table-container td {
  padding: 8px !important;
  vertical-align: middle !important;
}

/* First row as item search/add row if your JS adds blank rows */
#sale-modal .sale-pos-grid input,
#sale-modal .sale-pos-grid select,
#saleItemsContainer input,
#saleItemsContainer select,
#saleItemsTableContainer input,
#saleItemsTableContainer select,
#invoiceItemsContainer input,
#invoiceItemsContainer select {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

/* Bottom totals/payment/notes area */
#sale-modal .sale-pos-bottom,
#newSaleModal .sale-bottom,
#saleModal .sale-bottom,
#newSaleModal .notes-totals-row,
#saleModal .notes-totals-row {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) 430px 270px !important;
  gap: 12px !important;
  max-height: 150px !important;
  overflow: hidden !important;
}

#sale-modal .sale-pos-notes,
#sale-modal .sale-pos-payment,
#sale-modal .sale-pos-net,
#newSaleModal .totals-section,
#saleModal .totals-section,
#newSaleModal .sale-totals,
#saleModal .sale-totals,
#newSaleModal .invoice-totals,
#saleModal .invoice-totals {
  background: #ffffff !important;
  border: 1px solid #d8e4f0 !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

#sale-modal .sale-pos-notes textarea,
#newSaleModal textarea,
#saleModal textarea {
  height: 82px !important;
  max-height: 82px !important;
  resize: none !important;
  font-size: 13px !important;
}

#sale-modal .sale-pos-payment {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

#sale-modal .sale-pos-net strong,
#newSaleModal .net-total,
#saleModal .net-total {
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #b91c1c !important;
}

/* Action bar: clear buttons */
#sale-modal .sale-pos-actions,
#newSaleModal .modal-footer,
#saleModal .modal-footer,
.new-sale-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  background: #f8fbff !important;
  border-top: 1px solid #dbe5ef !important;
  padding: 10px !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 40 !important;
}

#sale-modal .sale-pos-actions button,
#newSaleModal .modal-footer button,
#saleModal .modal-footer button,
.new-sale-actions button {
  min-height: 42px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
}

/* Mobile */
@media (max-width: 900px) {
  #sale-modal.sale-pos-modal,
  #sale-modal,
  #newSaleModal,
  #saleModal {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  #sale-modal .sale-pos-body,
  #newSaleModal .modal-body,
  #saleModal .modal-body {
    display: block !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 120px) !important;
    padding: 8px !important;
  }

  #sale-modal .sale-pos-topbar,
  #sale-modal .sale-pos-customerbar,
  #newSaleModal .form-grid,
  #saleModal .form-grid,
  #newSaleModal .customer-section,
  #saleModal .customer-section,
  #newSaleModal .payment-section,
  #saleModal .payment-section {
    margin: 0 0 8px 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #sale-modal .sale-pos-grid-wrap,
  #saleItemsContainer,
  #saleItemsTableContainer,
  #invoiceItemsContainer,
  #invoiceItems,
  .sale-items-container,
  .sale-items-table-container,
  .sale-items-grid,
  .invoice-items-container,
  .invoice-items-table-container,
  .items-grid,
  .new-sale-items {
    height: 50vh !important;
    min-height: 380px !important;
  }

  #sale-modal .sale-pos-bottom,
  #newSaleModal .sale-bottom,
  #saleModal .sale-bottom,
  #newSaleModal .notes-totals-row,
  #saleModal .notes-totals-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  #sale-modal .sale-pos-actions,
  #newSaleModal .modal-footer,
  #saleModal .modal-footer,
  .new-sale-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    position: sticky !important;
  }

  #sale-modal .sale-pos-actions button,
  #newSaleModal .modal-footer button,
  #saleModal .modal-footer button,
  .new-sale-actions button {
    min-height: 48px !important;
    font-size: 13px !important;
    padding: 5px !important;
  }
}


/* ERP COMPREHENSIVE REDESIGN */
:root{--erp-bg:#f3f6fb;--erp-panel:#ffffff;--erp-ink:#132238;--erp-muted:#6b7a90;--erp-line:#dce6f1;--erp-blue:#12344d;--erp-blue2:#1f6f9d;--erp-green:#138a55;--erp-red:#c0392b;--erp-orange:#c77900;}
body{background:linear-gradient(135deg,#f4f7fb 0%,#eef4fa 100%)!important;color:var(--erp-ink)!important}.content{background:transparent!important}.sidebar{background:#0d2235!important;border-right:1px solid rgba(255,255,255,.08)!important}.sidebar-header{background:#081827!important;border-bottom:1px solid rgba(255,255,255,.08)!important}.nav-item{border-radius:14px!important;margin:5px 10px!important;color:#dce8f3!important;transition:.2s!important}.nav-item:hover,.nav-item.active{background:linear-gradient(135deg,#1f6f9d,#12344d)!important;color:white!important;box-shadow:0 8px 24px rgba(18,52,77,.25)!important}.top-header{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--erp-line)!important}.screen-content h2{letter-spacing:-.03em}.section-card,.settings-card,.calc-card,.stat-card,.accounting-pro-card,.finance-kpi{border:1px solid var(--erp-line)!important;border-radius:18px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 12px 34px rgba(20,42,70,.07)!important}.table-container table{border-collapse:separate!important;border-spacing:0!important}.table-container th{background:#f4f8fb!important;color:#26384f!important;border-bottom:1px solid var(--erp-line)!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.04em}.table-container td{border-bottom:1px solid #edf2f7!important}.btn-primary{background:linear-gradient(135deg,#1f6f9d,#12344d)!important;border:0!important;border-radius:12px!important;box-shadow:0 10px 20px rgba(31,111,157,.2)!important}.btn-secondary{background:#fff!important;color:#12344d!important;border:1px solid #cbd9e7!important;border-radius:12px!important}.erp-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;background:linear-gradient(135deg,#12344d,#1f6f9d);color:white;border-radius:24px;padding:24px;margin-bottom:16px;box-shadow:0 20px 45px rgba(18,52,77,.22)}.erp-hero h2{font-size:32px;margin:4px 0;color:white}.erp-hero p{max-width:780px;color:#d8edf9;margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900;color:#9fd6f3}.erp-hero-actions{display:flex;gap:8px;flex-wrap:wrap}.finance-period-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;background:white;border:1px solid var(--erp-line);border-radius:18px;padding:12px;margin:12px 0}.finance-period-bar label{font-size:12px;font-weight:800;color:var(--erp-muted);display:grid;gap:4px}.finance-period-bar input,.finance-period-bar select{height:38px;border:1px solid #cbd9e7;border-radius:10px;padding:0 10px}.finance-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}.finance-kpi{padding:16px;display:grid;gap:5px;position:relative;overflow:hidden}.finance-kpi:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:#1f6f9d}.finance-kpi.good:before{background:var(--erp-green)}.finance-kpi.danger:before{background:var(--erp-red)}.finance-kpi.warning:before{background:var(--erp-orange)}.finance-kpi.strong:before{background:linear-gradient(90deg,#12344d,#1f6f9d)}.finance-kpi span{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--erp-muted);font-weight:900}.finance-kpi strong{font-size:25px;letter-spacing:-.04em}.finance-kpi small{color:var(--erp-muted)}.finance-tabs,.accounting-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.finance-tab,.accounting-tab{border:1px solid #cbd9e7;background:white;color:#12344d;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}.finance-tab.active,.accounting-tab.active{background:#12344d!important;color:white!important;border-color:#12344d!important}.finance-panel,.accounting-tab-panel{display:none}.finance-panel.active,.accounting-tab-panel.active{display:block}.finance-two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}.finance-alert{border:1px solid var(--erp-line);border-left:5px solid #1f6f9d;border-radius:14px;padding:12px;margin-bottom:8px;background:#fff}.finance-alert.danger{border-left-color:var(--erp-red);background:#fff7f6}.finance-alert.warning{border-left-color:var(--erp-orange);background:#fffaf2}.finance-alert.good{border-left-color:var(--erp-green);background:#f4fff9}@media(max-width:900px){.erp-hero{display:block}.finance-two-col{grid-template-columns:1fr}.erp-hero-actions{margin-top:12px}.finance-kpi strong{font-size:21px}}

/* =========================================================
   GenMeds ERP Professional 2036 - Exact dark-sidebar redesign
   Inspired by approved Sold Details screenshot
   Applies globally across dashboard, sales, inventory, finance,
   reports, modals, tables and action bars.
   ========================================================= */
:root{
  --gm-sidebar:#07162a;
  --gm-sidebar-2:#0c2037;
  --gm-sidebar-soft:rgba(255,255,255,.08);
  --gm-sidebar-active:#1768f2;
  --gm-blue:#0f62fe;
  --gm-blue-dark:#0b4ed0;
  --gm-page:#f8fafc;
  --gm-card:#ffffff;
  --gm-border:#dfe7f1;
  --gm-text:#111827;
  --gm-muted:#64748b;
  --gm-green:#008a45;
  --gm-red:#ef4444;
  --gm-amber:#f59e0b;
  --gm-radius:10px;
  --gm-shadow:0 2px 10px rgba(15,23,42,.06);
  --primary:var(--gm-blue);
  --primary-light:#3b82f6;
  --primary-dark:#0b4ed0;
  --bg:var(--gm-page);
  --card-bg:var(--gm-card);
  --text:var(--gm-text);
  --text-light:var(--gm-muted);
  --border:var(--gm-border);
  --radius:var(--gm-radius);
  --shadow:var(--gm-shadow);
}
html,body{background:var(--gm-page)!important;color:var(--gm-text)!important;font-size:14px!important;}
body{overflow-x:hidden!important;}
#main-app{display:block!important;background:var(--gm-page)!important;min-height:100vh!important;}

/* Top bar like the reference image */
.app-header{
  position:fixed!important;top:0!important;left:260px!important;right:0!important;height:64px!important;
  background:#fff!important;color:#0f172a!important;border-bottom:1px solid var(--gm-border)!important;
  box-shadow:0 1px 4px rgba(15,23,42,.04)!important;z-index:1000!important;padding:0 24px!important;
  display:flex!important;align-items:center!important;gap:16px!important;
}
.menu-toggle{color:#1f2937!important;background:transparent!important;border:0!important;font-size:24px!important;margin:0!important;width:32px!important;height:32px!important;padding:0!important;}
.header-title{flex:1!important;display:flex!important;align-items:center!important;gap:14px!important;}
.header-logo{display:none!important;}
.gm-global-search{width:min(520px,45vw)!important;height:42px!important;border:1px solid var(--gm-border)!important;border-radius:7px!important;background:#fff!important;display:flex!important;align-items:center!important;gap:10px!important;padding:0 14px!important;color:var(--gm-muted)!important;box-shadow:0 1px 2px rgba(15,23,42,.03)!important;}
.gm-global-search input{border:0!important;outline:0!important;background:transparent!important;width:100%!important;font-size:14px!important;color:#334155!important;min-height:0!important;height:auto!important;padding:0!important;}
.header-actions{display:flex!important;align-items:center!important;gap:12px!important;}
.header-actions .btn-icon{background:#fff!important;color:#1f2937!important;border:0!important;width:34px!important;height:34px!important;border-radius:50%!important;font-size:18px!important;position:relative!important;}
.header-actions .btn-icon:hover{background:#f1f5f9!important;}
.gm-user-pill{display:flex!important;align-items:center!important;gap:10px!important;margin-left:8px!important;color:#0f172a!important;}
.gm-user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#93c5fd);display:flex;align-items:center;justify-content:center;font-weight:900;color:#0b4ed0;border:1px solid #bfdbfe;}
.gm-user-meta{line-height:1.1}.gm-user-meta strong{display:block;font-size:14px}.gm-user-meta small{font-size:12px;color:var(--gm-muted)}

/* Fixed dark sidebar */
.sidebar{
  position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:260px!important;
  background:linear-gradient(180deg,var(--gm-sidebar) 0%, var(--gm-sidebar-2) 100%)!important;
  border-right:0!important;box-shadow:4px 0 18px rgba(0,0,0,.18)!important;z-index:1001!important;
  transform:none!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;color:#fff!important;
}
.sidebar-header{height:76px!important;padding:16px 18px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#fff!important;display:flex!important;align-items:center!important;gap:12px!important;}
.sidebar-header img{display:none!important;}
.sidebar-header::before{content:'✚';width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#39a9ff,#0f62fe);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;box-shadow:0 10px 24px rgba(15,98,254,.32);}
.sidebar-header::after{content:'GenMeds ERP\A Professional 2036';white-space:pre-line;font-size:22px;line-height:1.05;font-weight:800;color:#fff;}
.nav-items{padding:14px 10px 18px!important;display:flex!important;flex-direction:column!important;gap:4px!important;}
.nav-items::before{content:'MAIN NAVIGATION';font-size:11px;color:#9fb2c7;padding:0 8px 10px;letter-spacing:.04em;font-weight:700;}
.nav-item{height:40px!important;padding:0 10px!important;margin:0!important;border-radius:7px!important;border-left:0!important;color:#f8fafc!important;display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important;font-weight:500!important;}
.nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;}
.nav-item.active{background:linear-gradient(90deg,#0f62fe,#1d6ff4)!important;color:#fff!important;border-left:0!important;font-weight:700!important;box-shadow:0 8px 18px rgba(15,98,254,.25)!important;}
.nav-icon{width:24px!important;text-align:center!important;font-size:18px!important;filter:grayscale(100%) brightness(10)!important;opacity:.95!important;}
.nav-label{font-size:14px!important;}
.sidebar::after{content:'© 2026 GenMeds ERP\A Professional 2036';white-space:pre-line;margin-top:auto;padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.08);color:#dbeafe;font-size:12px;line-height:1.6;}
.sidebar-overlay{display:none!important;}

/* Main content area */
.content{margin-left:260px!important;margin-top:64px!important;padding:22px 26px 24px!important;min-height:calc(100vh - 64px)!important;background:var(--gm-page)!important;}
.screen-content{max-width:none!important;}
.screen-content>h2,.section-header h2{font-size:24px!important;font-weight:800!important;color:#0b0f19!important;margin:0 0 8px!important;}
.screen-content>h2::first-letter{ }
.section-header{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:flex-start!important;gap:16px!important;margin-bottom:18px!important;}
.section-header p,.muted,.empty{color:var(--gm-muted)!important;}
.section-header .actions,.actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;}

/* Cards and panels */
.stat-card,.summary-card,.section-card,.settings-card,.accounting-pro-card,.finance-kpi-card,.rep-kpi-card,.dashboard-card,.card,.modal-content,.table-container,.report-filters,.filters,.finance-panel,.rep-statement-panel,.detail-header-box{
  background:#fff!important;border:1px solid var(--gm-border)!important;border-radius:var(--gm-radius)!important;box-shadow:var(--gm-shadow)!important;color:var(--gm-text)!important;
}
.stat-card,.summary-card,.accounting-pro-card,.finance-kpi-card,.rep-kpi-card{padding:18px!important;min-height:104px!important;}
.stats-grid,.accounting-pro-grid,.finance-kpi-grid,.rep-kpi-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:16px!important;margin-bottom:18px!important;}
.stat-value,.summary-value,.accounting-pro-card strong,.finance-kpi-card strong,.rep-kpi-card strong{font-size:26px!important;font-weight:900!important;color:#0f172a!important;}
.stat-label,.summary-label,.accounting-pro-card span,.finance-kpi-card span,.rep-kpi-card span{font-size:13px!important;color:var(--gm-muted)!important;font-weight:600!important;}
.section-card{padding:16px!important;margin-bottom:16px!important;}
.section-card h3{font-size:16px!important;margin:0 0 12px!important;color:#0f172a!important;}

/* Filters like screenshot */
.report-filters,.filters,.sale-filters,.inventory-filters,.finance-filters,.accounting-filters{padding:18px!important;margin-bottom:16px!important;display:flex!important;align-items:end!important;gap:16px!important;flex-wrap:wrap!important;}
input,select,textarea{border:1px solid var(--gm-border)!important;border-radius:7px!important;background:#fff!important;color:#1f2937!important;box-shadow:none!important;}
input:not([type='checkbox']):not([type='radio']),select{min-height:42px!important;padding:9px 12px!important;font-size:14px!important;}
textarea{padding:10px 12px!important;font-size:14px!important;}
label{font-size:13px!important;font-weight:600!important;color:#111827!important;margin-bottom:7px!important;display:block!important;}
.form-group{margin-bottom:12px!important;}

/* Tables matching image */
.table-container{padding:16px!important;overflow:auto!important;}
table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;color:#1f2937!important;font-size:13px!important;}
th{background:#f8fafc!important;color:#111827!important;font-weight:800!important;border-top:1px solid var(--gm-border)!important;border-bottom:1px solid var(--gm-border)!important;padding:13px 12px!important;white-space:nowrap!important;}
td{background:#fff!important;color:#1f2937!important;border-bottom:1px solid var(--gm-border)!important;padding:13px 12px!important;vertical-align:middle!important;}
th:first-child,td:first-child{border-left:1px solid var(--gm-border)!important;}th:last-child,td:last-child{border-right:1px solid var(--gm-border)!important;}
tbody tr:hover td{background:#f9fafb!important;}
a{color:#0057e7!important;text-decoration:none!important;}a:hover{text-decoration:underline!important;}

/* Buttons */
button,.btn-primary,.btn-secondary,.btn-danger,.btn-success,.btn-warning,.tab-btn,.accounting-tab,.finance-tab,.rep-tab{
  border-radius:7px!important;min-height:38px!important;font-weight:700!important;border:1px solid transparent!important;cursor:pointer!important;transition:.18s ease!important;box-shadow:none!important;
}
.btn-primary,button.btn-primary{background:linear-gradient(180deg,#1269f3,#095adf)!important;color:#fff!important;border-color:#0b5fe5!important;}
.btn-primary:hover{background:#0b4ed0!important;transform:translateY(-1px)!important;}
.btn-secondary,button.btn-secondary{background:#fff!important;color:#1f2937!important;border-color:var(--gm-border)!important;}
.btn-secondary:hover{background:#f8fafc!important;border-color:#cbd5e1!important;}
.btn-danger{background:#ef4444!important;color:#fff!important;border-color:#ef4444!important;}
.btn-success{background:#16a34a!important;color:#fff!important;border-color:#16a34a!important;}
.btn-sm{min-height:30px!important;padding:4px 9px!important;font-size:12px!important;}

/* Status pills */
.status-paid,.paid,.badge-paid{background:#dcfce7!important;color:#047857!important;border:1px solid #bbf7d0!important;border-radius:7px!important;padding:6px 10px!important;font-weight:800!important;display:inline-block!important;}
.status-unpaid,.unpaid,.badge-unpaid{background:#fee2e2!important;color:#dc2626!important;border:1px solid #fecaca!important;border-radius:7px!important;padding:6px 10px!important;font-weight:800!important;display:inline-block!important;}
.status-partial,.partial,.badge-partial{background:#ffedd5!important;color:#ea580c!important;border:1px solid #fed7aa!important;border-radius:7px!important;padding:6px 10px!important;font-weight:800!important;display:inline-block!important;}

/* Sold details exact white professional layout */
#masterStockSoldDetailsModal .modal-content,.sold-details,.sold-details-container,.sold-details-panel,.sold-details-modal,.sold-details-table,.sold-details-table th,.sold-details-table td{background:#fff!important;}
#masterStockSoldDetailsModal .modal-content{width:min(1240px,96vw)!important;max-height:88vh!important;border-radius:10px!important;border:1px solid var(--gm-border)!important;box-shadow:0 24px 60px rgba(15,23,42,.22)!important;}
#masterStockSoldDetailsModal .modal-header{background:#fff!important;border-bottom:1px solid var(--gm-border)!important;padding:18px 20px!important;}
#masterStockSoldDetailsModal .modal-header h3{font-size:22px!important;color:#0b0f19!important;font-weight:900!important;}
#masterStockSoldDetailsModal .modal-body{background:#fff!important;padding:18px!important;}
#masterStockSoldDetailsModal .modal-footer{background:#fff!important;border-top:1px solid var(--gm-border)!important;padding:14px 18px!important;}
.detail-header-box{background:#fff!important;border:1px solid var(--gm-border)!important;padding:16px!important;border-radius:10px!important;color:#111827!important;}
.sold-details-table{border-radius:8px!important;overflow:hidden!important;}
.sold-details-table th{background:#f8fafc!important;color:#111827!important;}
.sold-details-table td{background:#fff!important;color:#1f2937!important;}
.sold-details-table tbody tr:hover td{background:#f9fafb!important;}
.sold-details-table .btn-secondary{background:#0f62fe!important;color:#fff!important;border-color:#0f62fe!important;}
.sold-details-table .btn-danger{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important;}
.link-button.sold-details-btn{color:#0f62fe!important;text-decoration:none!important;background:transparent!important;font-weight:900!important;}

/* Modals */
.modal-overlay{background:rgba(15,23,42,.45)!important;backdrop-filter:blur(2px)!important;}
.modal-content{border-radius:12px!important;overflow:hidden!important;}
.modal-header,.modal-footer{background:#fff!important;border-color:var(--gm-border)!important;}
.close-btn{background:#fff!important;color:#334155!important;border:1px solid var(--gm-border)!important;border-radius:8px!important;}

/* Finance Center polish */
#screen-finance .section-header,#screen-accounting .section-header{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
.finance-tabs,.accounting-tabs,.rep-tabs,.report-tabs{display:flex!important;gap:8px!important;margin:14px 0 16px!important;flex-wrap:wrap!important;}
.finance-tab,.accounting-tab,.rep-tab,.tab-btn{background:#fff!important;border:1px solid var(--gm-border)!important;color:#1f2937!important;padding:0 14px!important;}
.finance-tab.active,.accounting-tab.active,.rep-tab.active,.tab-btn.active{background:#0f62fe!important;color:#fff!important;border-color:#0f62fe!important;}
.finance-panel,.accounting-tab-panel,.report-tab{background:transparent!important;}

/* Dashboard / screen heading spacing */
.screen-content.active{animation:none!important;}
.screen-content>h2 + .stats-grid{margin-top:14px!important;}

/* Exact desktop sizing; mobile fallback */
@media (min-width: 768px){
  .sidebar{transform:none!important;}
  .content{margin-left:260px!important;}
}
@media (max-width: 900px){
  .app-header{left:0!important;height:60px!important;padding:0 12px!important;}
  .sidebar{transform:translateX(-100%)!important;top:0!important;width:260px!important;}
  .sidebar.open{transform:translateX(0)!important;}
  .content{margin-left:0!important;margin-top:60px!important;padding:14px!important;}
  .gm-global-search{display:none!important;}
  .sidebar-overlay{display:block!important;top:0!important;}
}