@import "./css/variables.css";

/* ═══════════════════════════════════════════════════
   LOGIN PAGE — Full Premium Design
   ═══════════════════════════════════════════════════ */

/* ── Full-screen container ── */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(220, 60%, 10%) 0%, hsl(250, 60%, 16%) 50%, hsl(280, 50%, 12%) 100%);
}

/* ── Animated blobs ── */
.login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: blobFloat 12s ease-in-out infinite;
}

.blob-1 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, hsl(250, 90%, 65%), hsl(280, 80%, 50%));
  top: -200px;
  left: -150px;
  animation-delay: 0s;
}

.blob-2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, hsl(200, 90%, 60%), hsl(230, 80%, 55%));
  bottom: -150px;
  right: -100px;
  animation-delay: -4s;
}

.blob-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, hsl(300, 80%, 60%), hsl(320, 70%, 50%));
  top: calc(50% - 175px);
  left: calc(50% - 175px);
  animation-delay: -8s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.05); }
  66%       { transform: translate(-20px, 20px) scale(0.97); }
}

/* ── Login Card ── */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 1rem;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2.5rem 2.25rem;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  color: #fff;
}

/* Shake animation for invalid login */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(8px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

.login-card.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── Step Transitions ── */
.login-step {
  width: 100%;
}

@keyframes stepEnter {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes stepExit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}

.login-step.step-enter {
  animation: stepEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.login-step.step-exit {
  animation: stepExit 0.25s ease-in forwards;
}

/* ── Brand / Logo ── */
.login-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, hsl(250, 80%, 65%), hsl(280, 70%, 60%));
  font-size: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4); }
  50%       { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.65); }
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
  color: #fff;
}

.login-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* ── Form fields ── */
.login-field-group {
  margin-bottom: 1.25rem;
}

.login-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--font);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  outline: none;
}

.login-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.login-input:focus {
  border-color: hsl(250, 80%, 70%);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.login-input.text-center {
  text-align: center;
  letter-spacing: 0.25em;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ── Password wrap / eye toggle ── */
.login-password-wrap {
  position: relative;
}

.login-password-wrap .login-input {
  padding-right: 3rem;
}

.login-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  border-radius: 6px;
}

.login-eye-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

/* ── User preview (step 2) ── */
.login-user-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.login-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(250, 80%, 65%), hsl(280, 70%, 60%));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.login-username-display {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.login-switch-user {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  font-family: var(--font);
}

.login-switch-user:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Remember me / Forgot ── */
.login-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.825rem;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: hsl(250, 80%, 65%);
  cursor: pointer;
}

.login-forgot-link {
  background: none;
  border: none;
  color: hsl(250, 90%, 75%);
  font-size: 0.825rem;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-forgot-link:hover {
  color: #fff;
}

/* ── Error message ── */
.login-error {
  font-size: 0.82rem;
  color: hsl(355, 90%, 70%);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* ── Primary login button ── */
.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, hsl(250, 80%, 62%), hsl(270, 70%, 58%));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
  position: relative;
  overflow: hidden;
}

.btn-login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  border-radius: inherit;
}

.btn-login:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.55);
}

.btn-login:active:not(:disabled) {
  transform: translateY(0);
}

.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-login-text { font-weight: 600; }
.btn-login-arrow { font-size: 1.1rem; }

/* ── Loading spinner ── */
.btn-login-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Secondary button (cancel etc.) ── */
.btn-login-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-login-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── Divider ── */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* ── OTP digit inputs ── */
.otp-input-container {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
  outline: none;
  caret-color: hsl(250, 80%, 70%);
}

.otp-digit:focus {
  border-color: hsl(250, 80%, 70%);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  transform: translateY(-2px);
}

.otp-digit:not(:placeholder-shown):not(:focus) {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
}

/* ── OTP actions row ── */
.otp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.login-link-btn {
  background: none;
  border: none;
  color: hsl(250, 90%, 75%);
  font-size: 0.82rem;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.login-link-btn:hover:not(:disabled) {
  color: #fff;
}

.login-link-btn:disabled {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  cursor: default;
}

/* ── Button row (for two side-by-side buttons) ── */
.login-btn-row {
  display: flex;
  gap: 0.75rem;
}

.login-btn-row .btn-login {
  flex: 1;
}

/* ── Hidden utility (keep in sync with JS usage) ── */
.hidden { display: none !important; }

/* ── Dark theme overrides for login ── */
body.dark-theme .login-screen {
  background: linear-gradient(135deg, hsl(220, 60%, 6%) 0%, hsl(250, 60%, 10%) 50%, hsl(280, 50%, 7%) 100%);
}

body.dark-theme .login-blob {
  opacity: 0.25;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .login-card {
    padding: 1.75rem 1.25rem;
    border-radius: 20px;
    margin: 0.5rem;
  }

  .otp-digit {
    width: 40px;
    height: 50px;
    font-size: 1.2rem;
  }

  .otp-input-container {
    gap: 0.35rem;
  }
}

/* ═══ END LOGIN ═══════════════════════════════════ */


/* Resizable columns */
.resizable-table {
  table-layout: fixed;
}

.resizable-table th {
  position: relative;
  user-select: none;
}

.resizable-table th .resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}

.resizable-table th .resize-handle:hover,
.resizable-table th:hover .resize-handle {
  background: var(--accent);
}

.resizable-table th.resizing {
  background: var(--accent-light);
}

.resize-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 9999;
  display: none;
}

.resize-overlay.active {
  display: block;
  cursor: col-resize;
}

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

body {
  font-family: var(--font);
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Global Transition overrides for smooth dark/light theme switching */
body, .sidebar, .panel, .dashboard-card, .stat-card, .modal, .side-drawer, input, select, textarea, button {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background: var(--surface);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  height: 100%;
  overflow-y: auto;
}

.brand {
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.nav-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  margin-bottom: 0.25rem;
}

.nav-btn:hover { background: var(--surface2); color: var(--text); }
.nav-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.dept-tab-btn {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  background: var(--surface2);
  border: 1px solid var(--border-solid);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dept-tab-btn:hover {
  background: var(--surface3);
  color: var(--text);
}
.dept-tab-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.main {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 100;
  overflow: visible;
}

.page-header h1 { font-size: 1.25rem; font-weight: 600; }

.btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface2);
  color: var(--text);
}

.btn-edit {
  background: var(--accent-light);
  color: var(--accent);
  border-color: hsl(250, 80%, 88%);
}
.btn-edit:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transform: translateY(-1px);
}
.btn-edit:active {
  transform: translateY(0);
}

.btn-danger {
  background: var(--danger-light);
  color: var(--danger);
  border-color: hsl(355, 80%, 88%);
}
.btn-danger:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
}
.btn-danger:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 12px;
  border-radius: calc(var(--radius) - 4px);
}

.toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.toolbar .search-input {
  flex: 1;
}

.toolbar select.search-input {
  flex: 0 0 150px;
}

input, select, textarea, option {
  padding: 0.5rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-solid);
  color: var(--text);
}

input[readonly], select[readonly], textarea[readonly],
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface2);
  color: var(--text-secondary);
  opacity: 0.8;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.search-input { min-width: 200px; flex: 1; }

table {
  width: 100%;
  border-collapse: separate;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  table-layout: fixed;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-solid);
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  min-width: 80px;
  max-width: 300px;
}

th {
  background: var(--surface2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 10;
}

.th-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.th-filter {
  flex: 1;
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.th-sort {
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.th-sort:hover {
  background: var(--surface2);
}

/* Freeze first 4 columns in bill entry table (Date, Vendor, PAN, Items) */
#panel-bill-entry .table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 190px);
}

#panel-bill-entry th:nth-child(-n+4),
#panel-bill-entry td:nth-child(-n+4) {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface);
}

#panel-bill-entry th:nth-child(-n+4) {
  background: var(--surface2);
  z-index: 20;  /* above both row-freeze and header-freeze */
  top: 0;
}

/* Non-frozen header cells still need top sticky */
#panel-bill-entry th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10;
}

#panel-bill-entry th:nth-child(1),
#panel-bill-entry td:nth-child(1) { left: 0; }
#panel-bill-entry th:nth-child(2),
#panel-bill-entry td:nth-child(2) { left: 140px; }
#panel-bill-entry th:nth-child(3),
#panel-bill-entry td:nth-child(3) { left: 280px; }
#panel-bill-entry th:nth-child(4),
#panel-bill-entry td:nth-child(4) { left: 400px; }

/* Date column width to prevent line wrapping */
#panel-bill-entry td:nth-child(1),
#panel-bill-entry th:nth-child(1) {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  white-space: nowrap;
}

tr:last-child td { border-bottom: 1px solid var(--border); }
tr:hover td { background: var(--surface2); }

.badge {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
}

.badge-pending { background: var(--warning-light); color: var(--warning); }
.badge-paid { background: var(--success-light); color: var(--success); }
.badge-draft { background: var(--surface2); color: var(--text-secondary); }
.badge-low { background: var(--danger-light); color: var(--danger); }

.hidden { display: none !important; }

.panel {
  display: none;
  background: var(--surface);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 100%;
  height: 100%;
  animation: loginFadeUp 0.4s ease-out;
}

.panel.active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: visible;
  position: relative;
  z-index: 10;
}

/* Dashboard and Import panels can scroll internally as wholes */
#panel-dashboard.active,
#panel-import.active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Enable vertical scrolling internally for all tables to allow sticky th headers */
.table-container {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 190px);
  max-width: 100%;
  margin-bottom: 1rem;
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}

.table-container table {
  border: none;
  margin-bottom: 0;
  border-radius: 0;
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.table-container th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10;
  background: var(--surface2) !important;
}

.table-container th,
.table-container td {
  white-space: nowrap !important;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 250px;
}

/* ——— Stock Level Matrix ——— */
.stock-matrix-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
}

.stock-matrix-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.stock-matrix-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.matrix-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
}

.matrix-badge span {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.stock-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.stock-matrix-card {
  border: 1px solid;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stock-matrix-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.smc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.smc-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.smc-cat {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.smc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.smc-bar-wrap {
  margin-bottom: 0.65rem;
}

.smc-bar-bg {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: visible;
}

.smc-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 3px;
}

.smc-reorder-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(0,0,0,0.35);
  border-radius: 1px;
  transform: translateX(-50%);
}

.smc-reorder-marker::after {
  content: "⬇";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(0,0,0,0.4);
}

.smc-stats {
  display: flex;
  gap: 0.5rem;
}

.smc-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.smc-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.smc-stat-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}




.muted { color: var(--text-secondary); font-size: 13px; }
.help { margin-bottom: 1rem; padding: 0.75rem; background: var(--surface2); border-radius: var(--radius); }
.error { color: var(--danger); font-size: 13px; margin-top: 0.5rem; }
.empty { text-align: center; padding: 2rem; color: var(--text-secondary); }
.warn-text { color: var(--warning); font-weight: 600; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal {
  background: var(--surface-solid);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: auto;
  padding: 1.5rem;
}

.modal.wide {
  max-width: 1200px;
}

.modal h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-grid .full { grid-column: 1 / -1; }
.form-grid .double { grid-column: span 2; }

.nepali-date-field.compact { margin-bottom: 0; }
.nepali-date-inputs.compact { display: flex; gap: 0.25rem; }
.nepali-date-inputs.compact select { flex: 1; padding: 0.25rem 0.5rem; font-size: 12px; }
.date-preview.compact { margin-top: 0.25rem; font-size: 11px; }

.line-items { margin-top: 1rem; }
.line-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.75fr 0.75fr 1fr 1fr 0.5fr;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--surface2);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 0.5rem;
}

.line-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.75fr 0.75fr 1fr 1fr 0.5fr;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  align-items: center;
}

.line-row input, .line-row select {
  padding: 0.25rem 0.5rem;
  font-size: 12px;
}

.line-amt {
  font-weight: 600;
  text-align: right;
}

.line-actions-cell {
  display: flex;
  justify-content: center;
}

.bill-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  align-items: center;
}

.totals-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.totals-header label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
}

.bill-totals > div {
  font-size: 13px;
}

.bill-totals .total {
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
}

.form-section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.form-section:last-child { border-bottom: none; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-secondary); }
label .required { color: var(--danger); }

.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ═══════════════════════════════════════════
   LOGIN SCREEN — Professional Two-Step Design
   ═══════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────── */
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(60px, -80px) scale(1.1); }
  66%       { transform: translate(-40px, 40px) scale(0.95); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-70px, 60px) scale(1.08); }
  66%       { transform: translate(50px, -50px) scale(1.05); }
}
@keyframes blobFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(40px, 80px) scale(1.12); }
}

@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginStepIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginStepOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-32px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-9px); }
  30%       { transform: translateX(8px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(2px); }
}
@keyframes spinnerRot {
  to { transform: rotate(360deg); }
}
@keyframes avatarPop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Screen container ──────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    hsl(240, 60%, 8%) 0%,
    hsl(250, 55%, 12%) 35%,
    hsl(260, 50%, 10%) 65%,
    hsl(240, 65%, 7%) 100%
  );
}

/* ── Animated background blobs ─────────────── */
.login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}
.blob-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, hsl(250, 90%, 65%), transparent 70%);
  top: -120px; left: -100px;
  animation: blobFloat1 18s ease-in-out infinite;
}
.blob-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, hsl(200, 90%, 60%), transparent 70%);
  bottom: -140px; right: -80px;
  animation: blobFloat2 22s ease-in-out infinite;
}
.blob-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, hsl(280, 80%, 60%), transparent 70%);
  top: 40%; left: 55%;
  animation: blobFloat3 16s ease-in-out infinite;
}

/* ── Glass card ────────────────────────────── */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 2.5rem 2.25rem;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  animation: loginFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}

/* ── Steps ─────────────────────────────────── */
.login-step {
  width: 100%;
}
.login-step.step-enter {
  animation: loginStepIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.login-step.step-exit {
  animation: loginStepOut 0.28s ease-in forwards;
}
.login-card.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── Brand block ───────────────────────────── */
.login-brand {
  text-align: center;
  margin-bottom: 2rem;
}
.login-logo {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, hsl(250, 90%, 70%), hsl(200, 90%, 65%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(150, 130, 255, 0.5));
}
.login-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.3rem;
  letter-spacing: -0.02em;
}
.login-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Field group ───────────────────────────── */
.login-field-group {
  margin-bottom: 1.1rem;
}
.login-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.login-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  font-family: var(--font);
  transition: all 0.2s ease;
  outline: none;
}
.login-input::placeholder { color: rgba(255,255,255,0.3); }
.login-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: hsl(250, 90%, 70%);
  box-shadow: 0 0 0 3px rgba(150, 120, 255, 0.2);
}

/* ── Password wrapper ──────────────────────── */
.login-password-wrap {
  position: relative;
}
.login-password-wrap .login-input {
  padding-right: 3rem;
}
.login-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.login-eye-btn:hover { color: rgba(255, 255, 255, 0.85); }

/* ── Remember me ───────────────────────────── */
.login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  margin-bottom: 1.25rem;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: hsl(250, 90%, 65%);
  cursor: pointer;
}

/* ── Error message ─────────────────────────── */
.login-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  color: hsl(355, 90%, 70%);
  background: rgba(220, 50, 50, 0.12);
  border: 1px solid rgba(220, 50, 50, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.login-error::before { content: "⚠"; font-size: 14px; }

/* ── CTA Button ────────────────────────────── */
.btn-login {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, hsl(250, 85%, 62%) 0%, hsl(260, 80%, 55%) 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 18px rgba(120, 90, 230, 0.4);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.btn-login:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(120, 90, 230, 0.55);
  background: linear-gradient(135deg, hsl(250, 85%, 65%) 0%, hsl(260, 80%, 60%) 100%);
}
.btn-login:active:not(:disabled) { transform: translateY(0); }
.btn-login:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
.btn-login-arrow { font-size: 16px; transition: transform 0.2s; }
.btn-login:hover .btn-login-arrow { transform: translateX(4px); }

/* Divider for alternate logins */
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0 1rem 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.login-divider:not(:empty)::before {
  margin-right: .5em;
}
.login-divider:not(:empty)::after {
  margin-left: .5em;
}

/* Spinner inside button */
.btn-login-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinnerRot 0.7s linear infinite;
}

/* ── User preview (step 2) ─────────────────── */
.login-user-preview {
  text-align: center;
  margin-bottom: 1.75rem;
}
.login-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(250, 85%, 62%), hsl(200, 90%, 55%));
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  box-shadow: 0 4px 18px rgba(120, 90, 230, 0.45);
  animation: avatarPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.login-username-display {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}
.login-switch-user {
  background: none;
  border: none;
  color: hsl(250, 80%, 75%);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font);
  transition: color 0.18s;
}
.login-switch-user:hover { color: hsl(250, 90%, 85%); }

/* ── Hint text ─────────────────────────────── */
.login-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0;
}

/* ── OTP Verification Step ──────────────────── */
.otp-input-container {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.otp-digit {
  width: 50px;
  height: 54px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
}
.otp-digit:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: hsl(250, 90%, 70%);
  box-shadow: 0 0 0 3px rgba(150, 120, 255, 0.2);
}
.otp-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 13px;
}
.login-forgot-link {
  background: none;
  border: none;
  color: hsl(250, 80%, 75%);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  font-family: var(--font);
}
.login-forgot-link:hover {
  color: hsl(250, 90%, 85%);
  text-decoration: underline;
}
.login-remember-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.login-remember-row .login-remember {
  margin-bottom: 0;
}
.login-link-btn {
  background: none;
  border: none;
  color: hsl(250, 80%, 75%);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  font-family: var(--font);
}
.login-link-btn:hover:not(:disabled) {
  color: hsl(250, 90%, 85%);
  text-decoration: underline;
}
.login-link-btn:disabled {
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}
.btn-login-secondary {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-bottom: 1rem;
}
.btn-login-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}
.login-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}


.actions { display: flex; gap: 0.5rem; }

td.actions,
#panel-bill-entry thead th:last-child,
#panel-stock thead th:last-child,
#panel-issue thead th:last-child,
#panel-vendor thead th:last-child,
#panel-payments thead th:last-child,
#panel-vehicles thead th:last-child,
#panel-vehicle-details thead th:last-child,
#panel-users thead th:last-child {
  display: table-cell;
  white-space: nowrap;
  vertical-align: middle;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  padding: 0.4rem 0.75rem;
}

td.actions > *,
#panel-bill-entry thead th:last-child > *,
#panel-stock thead th:last-child > *,
#panel-issue thead th:last-child > *,
#panel-vendor thead th:last-child > *,
#panel-payments thead th:last-child > *,
#panel-vehicles thead th:last-child > *,
#panel-vehicle-details thead th:last-child > *,
#panel-users thead th:last-child > * {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 0.35rem;
}

td.actions > *:last-child {
  margin-right: 0;
}

.full { width: 100%; }





.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
}

.dashboard-main,
.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dashboard-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.section-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-hero {
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, hsl(247, 88%, 95%) 0%, hsl(247, 88%, 98%) 100%);
  border: 1px solid hsl(247, 88%, 90%);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(124, 111, 247, 0.05);
}

.dashboard-greeting {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.dashboard-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.dashboard-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 14px;
  padding: 1.25rem;
  color: white;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dashboard-card:hover {
  transform: translateY(-4px) scale(1.02);
}

.dashboard-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(220deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

.dashboard-card.card-spend {
  background: linear-gradient(135deg, hsl(247, 88%, 70%) 0%, hsl(247, 88%, 60%) 100%);
  box-shadow: 0 6px 20px rgba(124, 111, 247, 0.3);
}

.dashboard-card.card-pending {
  background: linear-gradient(135deg, hsl(200, 95%, 55%) 0%, hsl(200, 95%, 45%) 100%);
  box-shadow: 0 6px 20px rgba(23, 162, 184, 0.3);
}

.dashboard-card.card-low {
  background: linear-gradient(135deg, hsl(24, 95%, 58%) 0%, hsl(14, 95%, 50%) 100%);
  box-shadow: 0 6px 20px rgba(253, 126, 20, 0.3);
}

.dashboard-card.card-unpaid {
  background: linear-gradient(135deg, hsl(142, 70%, 45%) 0%, hsl(142, 72%, 36%) 100%);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
}

.dashboard-card.card-valuation {
  background: linear-gradient(135deg, hsl(280, 85%, 65%) 0%, hsl(280, 85%, 55%) 100%);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3);
}

.dashboard-card .card-icon {
  font-size: 2.25rem;
  background: rgba(255, 255, 255, 0.2);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.dashboard-card .card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.dashboard-card .card-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: hsl(247, 88%, 80%);
  box-shadow: 0 4px 12px rgba(124, 111, 247, 0.08);
}

.stat-card .stat-icon {
  font-size: 1.5rem;
  background: hsl(247, 88%, 97%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid hsl(247, 88%, 93%);
  flex-shrink: 0;
}

.stat-card .label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.stat-card .value {
  font-size: 1.35rem;
  font-weight: 750;
  color: var(--text);
  line-height: 1.1;
}

.stat-card.warn .stat-icon {
  background: hsl(14, 95%, 97%);
  border-color: hsl(14, 95%, 93%);
}

.stat-card.warn .value {
  color: var(--warning);
}

.stat-card.warn:hover {
  border-color: hsl(14, 95%, 80%);
  box-shadow: 0 4px 12px rgba(253, 126, 20, 0.08);
}

.dashboard-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dept-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  transition: transform 0.2s ease;
}

.dept-card:hover {
  transform: translateX(4px);
}

.dept-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.dept-name {
  font-weight: 600;
  font-size: 13px;
}

.dept-amount {
  color: var(--text-secondary);
  font-size: 13px;
}

.dept-bar-bg {
  background: var(--border);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.dept-bar {
  background: var(--accent);
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface2);
  border-radius: var(--radius);
  font-size: 13px;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.activity-time {
  color: var(--text-secondary);
  font-size: 11px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alert-item {
  padding: 0.75rem;
  border-radius: var(--radius);
  font-size: 13px;
  border-left: 3px solid;
}

.alert-item.warning {
  background: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}

.alert-item.danger {
  background: #f8d7da;
  border-color: #dc3545;
  color: #842029;
}

.alert-item.info {
  background: #d1e7dd;
  border-color: #198754;
  color: #0f5132;
}

.alert-item .alert-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.top-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.top-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--surface2);
  border-radius: var(--radius);
  font-size: 13px;
}

.top-item .name {
  font-weight: 600;
}

.top-item .value {
  color: var(--text-secondary);
}

.setup-banner {
  background: var(--accent);
  color: white;
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.setup-banner p {
  margin: 0;
}

/* --- Setup / Import Premium Styling --- */
.import-container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 992px) {
  .import-container {
    grid-template-columns: 1fr;
  }
}

.import-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 2.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.import-dropzone:hover, .import-dropzone.dragover {
  border-color: var(--accent);
  background: rgba(79, 70, 229, 0.03);
  transform: translateY(-2px);
}

.import-dropzone .dz-icon {
  font-size: 2.5rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.import-dropzone:hover .dz-icon {
  transform: scale(1.1);
}

.import-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.import-dropzone a, .import-dropzone button {
  position: relative;
  z-index: 10;
}

.import-options-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1rem;
}

.import-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stepper-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  height: fit-content;
}

.import-stepper {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1rem;
}

.import-stepper::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: var(--border);
  z-index: 1;
}

.step-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  position: relative;
  z-index: 2;
  align-items: center;
}

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.step-item.pending .step-circle {
  background: var(--surface2);
}

.step-item.active .step-circle {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(79, 70, 229, 0.1);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
  animation: pulse-step 2s infinite;
}

.step-item.success .step-circle {
  border-color: var(--success);
  background: var(--success);
  color: white;
}

.step-item.error .step-circle {
  border-color: var(--danger);
  background: var(--danger);
  color: white;
  animation: shake-step 0.5s ease-in-out;
}

.step-item.skipped .step-circle {
  border-color: var(--text-secondary);
  background: var(--surface2);
  color: var(--text-secondary);
  opacity: 0.6;
}

.step-details {
  flex: 1;
}

.step-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}

.step-status-text {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.step-item.success .step-status-text {
  color: var(--success);
}

.step-item.error .step-status-text {
  color: var(--danger);
}

.import-preview-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1rem;
}

.preview-table-container {
  overflow-x: auto;
  margin-top: 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  max-height: 250px;
}

.preview-table-container table {
  border: none;
  border-radius: 0;
}

.preview-table-container th {
  top: 0;
  position: sticky;
}

.validation-warnings {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid var(--warning);
  border-radius: 4px;
}

.validation-warnings ul {
  padding-left: 1.25rem;
  margin-top: 0.25rem;
  font-size: 12.5px;
  color: #7b5c00;
}

.danger-zone-card {
  margin-top: 2rem;
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.02);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.danger-zone-title {
  color: var(--danger);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.danger-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.import-advanced-toggle {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.advanced-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.advanced-import-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s ease;
}

.advanced-import-card:hover {
  border-color: var(--text-secondary);
}

.advanced-import-card h4 {
  font-size: 13.5px;
  font-weight: 600;
}

.advanced-import-card input[type="file"] {
  font-size: 12px;
  width: 100%;
}

@keyframes pulse-step {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

@keyframes shake-step {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Collapsible Navigation Group */
.nav-group-header-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 13.5px;
}
.nav-group-header-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.nav-group-header-btn .arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.nav-group-header-btn.collapsed .arrow {
  transform: rotate(-90deg);
}
.nav-group-container {
  padding-left: 0.75rem;
  border-left: 1px dashed var(--border);
  margin-left: 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: all 0.3s ease;
}
.nav-group-container.collapsed {
  display: none;
}

/* Pagination Styling */
.pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

/* Make sure table has no bottom radius when pagination is present */
.table-container + .pagination-footer,
table + .pagination-footer {
  border-top: none;
  margin-top: -1px;
}
.table-container:has(+ .pagination-footer) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
table {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-select-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination-select {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

.pagination-select:focus {
  border-color: var(--accent);
}

.pagination-buttons {
  display: flex;
  gap: 0.25rem;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}

.pagination-btn:active:not(:disabled) {
  transform: translateY(0);
}

.pagination-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Duplicate .table-container rules removed to restore overflow-y and max-height */

/* ——— Pagination ——— */
/* When pagination immediately follows a table, join them seamlessly */
.table-container + .pagination-container {
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 1rem;
}

.table-container:has(+ .pagination-container) {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
  margin-bottom: 0;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 1rem;
}

.pagination-info {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pagination-select-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  color: var(--text-secondary);
}

.pagination-select {
  padding: 0.2rem 0.4rem;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  min-width: 60px;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not([disabled]) {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}

.pagination-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}

.pagination-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ——— Column Visibility Dropdown ——— */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: var(--surface-solid);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  min-width: 240px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dropdown-menu.hidden {
  display: none !important;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s ease;
  user-select: none;
}

.dropdown-item:hover {
  background: var(--surface2);
}

.dropdown-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent);
  margin: 0;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
}

.dropdown-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-header-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 0;
}

.dropdown-header-btn:hover {
  text-decoration: underline;
}

/* ——— Column Resizer ——— */
th {
  position: relative !important;
}

.column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 30;
  transition: background 0.15s;
}

.column-resizer:hover,
.column-resizer.resizing {
  background: var(--accent);
}

/* Responsive adjustments */
.mobile-navbar {
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  border-radius: var(--radius);
}

.mobile-brand {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 90;
}

.sidebar-overlay.open {
  display: block;
}

@media (max-width: 1024px) {
  .app {
    grid-template-columns: 1fr;
    height: 100vh;
    padding: 0.5rem;
  }
  
  .mobile-navbar {
    display: flex;
  }
  
  .sidebar {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: var(--sidebar-w);
    height: calc(100vh - 1rem);
    z-index: 100;
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main {
    height: calc(100vh - 1rem);
    overflow-y: auto;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  
  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  
  .modal {
    max-height: 95vh;
    padding: 1rem;
    border-radius: var(--radius);
  }
}

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

@media (max-width: 576px) {
  .app {
    padding: 0;
  }
  .sidebar {
    top: 0; left: 0; bottom: 0;
    height: 100vh;
    border-radius: 0;
  }
  .main {
    height: 100vh;
    padding: 0.5rem;
  }
  .mobile-navbar {
    border-radius: 0;
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .header-actions .btn {
    width: 100%;
  }
  .bill-totals {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .line-header {
    display: none;
  }
  .line-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem;
  }
  .line-row > * {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .line-row > *::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
  }
  .line-actions-cell {
    align-items: stretch;
  }
}

/* ——— Compact Dashboard Styles ——— */
.compact-header {
  margin-bottom: 0.75rem !important;
  padding: 0.5rem 1rem !important;
}

.dashboard-greeting-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

#panel-dashboard {
  height: calc(100vh - 2.5rem);
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dashboard-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0; /* prevent overflow */
  height: 100%;
  overflow: hidden;
}

.scrollable-section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Custom styling for new lists */
.payments-list, .movements-list, .vehicle-summary-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.payment-item, .movement-item, .vehicle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.payment-item:hover, .movement-item:hover, .vehicle-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  background: var(--surface2);
  border-color: var(--accent);
}

.payment-item .amount {
  font-weight: 700;
  color: var(--success);
}

.movement-item .qty-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
}

.qty-badge.in {
  background: var(--success-light);
  color: var(--success);
}

.qty-badge.out {
  background: var(--danger-light);
  color: var(--danger);
}

.vehicle-status-counts {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.vehicle-status-counts .badge {
  flex: 1;
  text-align: center;
  padding: 0.4rem;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
}


.dashboard-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
  margin-top: 0 !important;
}

.dashboard-card {
  padding: 0.75rem !important;
  border-radius: 10px !important;
  gap: 0.5rem !important;
}

.dashboard-card .card-icon {
  font-size: 1.5rem !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
}

.dashboard-card .card-value {
  font-size: 1.1rem !important;
}

.dashboard-card .card-label {
  font-size: 11px !important;
}

.stats-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
}

.stat-card {
  padding: 0.5rem !important;
  border-radius: 10px !important;
}

.stat-card .value {
  font-size: 1.2rem !important;
}

.stat-card .label {
  font-size: 10px !important;
}

.dashboard-section {
  padding: 0.75rem !important;
  border-radius: 10px !important;
}

.section-header h2 {
  font-size: 0.95rem !important;
  margin-bottom: 0.5rem !important;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.quick-actions .btn {
  padding: 0.4rem 0.5rem !important;
  font-size: 12px !important;
}

.alerts-list, .top-list, .activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.alert-item {
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.alert-title {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

.top-item {
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.activity-item {
  padding: 0.4rem 0.5rem !important;
  gap: 0.5rem !important;
  font-size: 12px !important;
}

.activity-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.activity-time {
  font-size: 10px !important;
}

@media (max-width: 1024px) {
  #panel-dashboard {
    height: auto;
    overflow: visible;
  }
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    height: auto;
    overflow: visible;
  }
  .dashboard-col {
    height: auto;
    overflow: visible;
  }
  .scrollable-section {
    flex: none;
    max-height: 350px;
    overflow-y: auto;
  }
  .dashboard-summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* ——— Dashboard Clickable Cards ——— */
.dashboard-card, .stat-card, .dept-card, .alert-item, .top-item {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
}

.dept-card:hover {
  transform: translateX(3px);
  background: var(--surface2) !important;
}

.alert-item:hover, .top-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.top-item:hover {
  border-color: var(--accent) !important;
}

/* Selected row highlight for stock table */
.selected-row td {
  background-color: var(--accent-light) !important;
  font-weight: 500;
  border-bottom-color: var(--accent) !important;
}

/* ——— Bill Scanner Premium Styling ——— */
.scanner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 992px) {
  .scanner-container {
    grid-template-columns: 1fr;
  }
}

.scanner-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.scanner-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.scanner-dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--surface2);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background-color 0.25s;
}

.scanner-dropzone.dragover,
.scanner-dropzone:hover {
  border-color: var(--accent);
  background: rgba(124, 111, 247, 0.04);
}

.dropzone-prompt {
  text-align: center;
  pointer-events: none;
}

.dropzone-icon {
  font-size: 2.75rem;
  display: block;
  margin-bottom: 0.75rem;
  animation: floatBounce 2.5s ease-in-out infinite;
}

.dropzone-text {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 0.25rem 0;
  color: var(--text);
}

.dropzone-browse {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}

.dropzone-subtext {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.scanner-preview-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}

.scanner-preview-wrapper img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 6px;
}

.btn-clear-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
}

.btn-clear-preview:hover {
  background: #c82333;
  transform: scale(1.08);
}

.scanner-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Scanner Animation line effect */
.scanner-dropzone.scanning::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px var(--accent);
  animation: scanEffect 2s linear infinite;
  z-index: 5;
}

@keyframes scanEffect {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Camera viewport & live streaming */
#camera-container {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--surface2);
}

.camera-viewport-wrapper {
  position: relative;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

#camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.camera-shutter-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

.camera-shutter-overlay.flash {
  animation: shutterFlash 0.3s ease-out;
}

@keyframes shutterFlash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Placeholder for forms */
.scanner-placeholder {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface2);
}

.placeholder-content {
  text-align: center;
  max-width: 280px;
  padding: 1.5rem;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

.placeholder-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.scan-spark-icon {
  animation: rotateSpark 3s linear infinite;
}

@keyframes rotateSpark {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .aside, .mobile-navbar, #btn-print-dashboard, .form-actions, .actions, .modal, .modal-backdrop {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .dashboard-grid {
    display: block !important;
  }
  .dashboard-summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dashboard-section, .stat-card, .dept-card, .alert-item {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Dark theme chart adjustments & scrollbar */
body.dark-theme::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.dark-theme::-webkit-scrollbar-track {
  background: var(--bg-gradient);
}
body.dark-theme::-webkit-scrollbar-thumb {
  background: var(--border-solid);
  border-radius: 4px;
}

/* Header Action Buttons (Notification Bell, Dark Toggle) */
.header-action-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  font-size: 1.1rem;
}
.header-action-btn:hover {
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.notification-wrap {
  position: relative;
}

.notification-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0.5rem;
  right: 0.5rem;
  width: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  z-index: 2000;
  max-height: 360px;
  overflow-y: auto;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.notification-dropdown.hidden {
  display: none;
}

.notification-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}

.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.825rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text);
}

.notification-item:hover {
  background: var(--surface2);
}

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

.notification-item .icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.notification-item .content {
  flex: 1;
}

.notification-item .title {
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: var(--text);
}

.notification-item .msg {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.3;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
}

.notification-badge.hidden {
  display: none;
}

/* Placeholder for forms */
.scanner-placeholder {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface2);
}

.placeholder-content {
  text-align: center;
  max-width: 280px;
  padding: 1.5rem;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

.placeholder-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.scan-spark-icon {
  animation: rotateSpark 3s linear infinite;
}

@keyframes rotateSpark {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .aside, .mobile-navbar, #btn-print-dashboard, .form-actions, .actions, .modal, .modal-backdrop {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .dashboard-grid {
    display: block !important;
  }
  .dashboard-summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dashboard-section, .stat-card, .dept-card, .alert-item {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Dark theme chart adjustments & scrollbar */
body.dark-theme::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.dark-theme::-webkit-scrollbar-track {
  background: var(--bg-gradient);
}
body.dark-theme::-webkit-scrollbar-thumb {
  background: var(--border-solid);
  border-radius: 4px;
}

/* Header Action Buttons (Notification Bell, Dark Toggle) */
.header-action-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  font-size: 1.1rem;
}
.header-action-btn:hover {
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.notification-wrap {
  position: relative;
}

.notification-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0.5rem;
  right: 0.5rem;
  width: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  z-index: 2000;
  max-height: 360px;
  overflow-y: auto;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.notification-dropdown.hidden {
  display: none;
}

.notification-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}

.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.825rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text);
}

.notification-item:hover {
  background: var(--surface2);
}

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

.notification-item .icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.notification-item .content {
  flex: 1;
}

.notification-item .title {
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: var(--text);
}

.notification-item .msg {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.3;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid var(--surface-solid);
}
.notification-badge.hidden {
  display: none;
}

/* ─── Command Palette ───────────────────────────────────────── */
#command-palette input:focus { outline: none; }
.palette-item:hover { background: var(--accent-light) !important; }

/* ─── Mobile Card View ──────────────────────────────────────── */
@media (max-width: 640px) {
  body.mobile-view table thead { display: none; }
  body.mobile-view table tbody tr {
    display: block;
    border: 1px solid var(--border-solid);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
  }
  body.mobile-view table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    border: none;
    font-size: 0.875rem;
  }
  body.mobile-view table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 100px;
  }
}

/* ─── Focus ring ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Help icon tooltip ─────────────────────────────────────── */
.help-icon {
  position: relative;
}
.help-icon:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface-solid);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  max-width: 280px;
  z-index: 9999;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  font-weight: 400;
  font-family: var(--font);
}
.help-icon:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text);
  z-index: 9999;
}

/* ─── Smooth page transitions ───────────────────────────────── */
.panel {
  transition: opacity 0.15s ease;
}
.panel.panel-entering {
  animation: panelFadeIn 0.2s ease;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Empty state refinement ────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  color: var(--text-secondary);
  text-align: center;
  gap: 0.75rem;
}
.empty-state svg, .empty-state .empty-icon {
  font-size: 2.5rem;
  opacity: 0.4;
}
.empty-state p {
  font-size: 0.9rem;
  max-width: 300px;
  line-height: 1.5;
}

/* ─── Budget utilization bar ────────────────────────────────── */
.budget-bar-wrap {
  height: 8px;
  background: var(--surface2);
  border-radius: 100px;
  overflow: hidden;
  min-width: 80px;
}
.budget-bar {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s ease;
}
.budget-bar.safe { background: var(--success); }
.budget-bar.warn { background: var(--warning); }
.budget-bar.over { background: var(--danger); }

/* ─── Floating action button (FAB) ─────────────────────────── */
.fab {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
  display: none;
  align-items: center;
  gap: 0.5rem;
  z-index: 100;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font);
}
.fab:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.5);
}
@media (max-width: 640px) {
  .fab { display: flex; }
}

/* Bulk Actions Toolbar */
.bulk-toolbar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--surface);
  border: 1px solid var(--border-solid);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.bulk-toolbar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.bulk-toolbar .selection-count {
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-muted);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
}
.bulk-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ─── Enhanced Mobile Responsiveness ───────────────────────────── */
@media (max-width: 768px) {
  /* Enhanced mobile table styles */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  
  .table-responsive table {
    display: block;
    white-space: nowrap;
  }
  
  /* Mobile action buttons */
  .mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  
  .mobile-actions .btn {
    width: 100%;
    text-align: center;
  }
  
  /* Mobile pagination */
  .pagination {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .pagination .page-info {
    order: -1;
    font-size: 0.9rem;
  }
  
  /* Mobile search */
  .search-container {
    flex-direction: column;
    gap: 8px;
  }
  
  .search-container .search-input {
    width: 100%;
  }
  
  .search-container .filter-dropdown {
    width: 100%;
  }
  
  /* Mobile form layouts */
  .form-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .form-row .form-group {
    width: 100%;
  }
  
  /* Mobile dashboard */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-section {
    margin-bottom: 16px;
  }
  
  /* Touch-friendly targets */
  .btn,
  .action-btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Mobile modals */
  .modal {
    width: 95%;
    max-width: none;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Mobile toast notifications */
  #toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  
  .toast {
    width: 100%;
    min-width: auto;
  }
  
  /* Mobile offline indicator */
  #offline-indicator {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }
  
  /* Mobile command palette */
  .command-item {
    padding: 16px;
  }
  
  /* Mobile undo notifications */
  .undo-notification {
    width: 90%;
    left: 5%;
    bottom: 100px;
  }
}

/* Sticky Table Headers */
.table-container th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface) !important;
}

/* Skeleton Loading State */
.skeleton-row td {
  position: relative;
  overflow: hidden;
  background-color: var(--surface2) !important;
  color: transparent !important;
}
.skeleton-row td * {
  visibility: hidden;
}
.skeleton-row td::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: skeleton-pulse 1.5s infinite;
}
@keyframes skeleton-pulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Stylized Empty State */
.ux-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.ux-empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: floatBounce 3s ease-in-out infinite;
}
.ux-empty-state .empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.ux-empty-state .empty-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 320px;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Inline Input Validation */
input.validation-invalid, select.validation-invalid, textarea.validation-invalid {
  border-color: var(--danger) !important;
  background-color: rgba(220, 53, 69, 0.03) !important;
}
.validation-error-label {
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
  display: block;
}

/* Command Palette Items */
.palette-item {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
  color: var(--text);
  font-size: 0.9rem;
}
.palette-item:hover, .palette-item.active {
  background: var(--surface2);
}
.palette-item .category {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Side Drawer Modals */
.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100vh;
  background: var(--surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10500;
  display: flex;
  flex-direction: column;
}
.side-drawer.open {
  transform: translateX(0);
}

/* Chronological Timeline */
.timeline-container {
  position: relative;
  padding-left: 2rem;
  margin: 1rem 0;
  border-left: 2px solid var(--border);
}
.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}
.timeline-marker {
  position: absolute;
  left: -2.5rem;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border);
}
.timeline-marker.create {
  background: var(--success);
}
.timeline-marker.delete {
  background: var(--danger);
}
.timeline-marker.update {
  background: var(--warning);
}
.timeline-content {
  background: var(--surface2);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.timeline-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.timeline-user {
  font-weight: 700;
  font-size: 0.85rem;
}

/* Search Highlights */
.search-highlight {
  background-color: rgba(255, 235, 59, 0.4);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Sticky Action Columns */
table {
  border-collapse: separate !important;
}
table th:last-child,
table td:last-child {
  position: sticky;
  right: 0;
  background: var(--surface-solid);
  z-index: 2;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.05);
}
body.dark-theme table th:last-child,
body.dark-theme table td:last-child {
  background: var(--surface-solid);
}

@keyframes pulse {
  0% { transform: scale(0.95); }
  70% { transform: scale(1.1); }
  100% { transform: scale(0.95); }
}

/* Editable Table Cell Fields (Spreadsheet style) */
.bill-line input, 
.bill-line select {
  border: 1px solid var(--border-solid) !important;
  background: var(--surface-solid) !important;
  color: var(--text) !important;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.bill-line input:hover, 
.bill-line select:hover {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}
.bill-line input:focus, 
.bill-line select:focus {
  background: var(--surface-solid) !important;
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--accent-light) !important;
}

/* Users Page Layout Improvement */
.users-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2rem;
  width: 100%;
}

.users-section,
.departments-section {
  display: flex;
  flex-direction: column;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  gap: 1rem;
}

#panel-users .table-container {
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (max-width: 1024px) {
  .users-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ── 1.6 Mobile Modal Overflow Fix ──────────────────────────────────────────── */
.modal {
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
}
.modal .form-actions,
.modal .modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--surface-solid);
  padding: 0.75rem 0 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  z-index: 2;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .modal {
    max-height: 85dvh;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: auto;
    width: 100%;
    max-width: 100%;
  }
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .mobile-view .data-table thead { display: none; }
  .mobile-view .data-table tr {
    display: block;
    margin-bottom: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-solid);
    border-radius: var(--radius);
    padding: 0.75rem;
  }
  .mobile-view .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.25rem 0;
    border: none;
    font-size: 0.875rem;
    gap: 0.5rem;
  }
  .mobile-view .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
    min-width: 100px;
  }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* ── 1.4 Column Sort Indicators ──────────────────────────────────────────────── */
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { background: var(--surface2); }
.data-table th.sort-asc::after  { content: " ↑"; font-size: 0.75em; color: var(--primary); }
.data-table th.sort-desc::after { content: " ↓"; font-size: 0.75em; color: var(--primary); }
.data-table th.sort-asc, .data-table th.sort-desc { color: var(--primary); }

/* ── 1.7 Help Button ─────────────────────────────────────────────────────────── */
.help-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-solid);
  background: var(--surface2); color: var(--text-secondary);
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.help-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Procurement Step Tracker ────────────────────────────────────────────────── */
.step-tracker {
  display: flex; align-items: center; gap: 0;
  margin: 0.75rem 0; font-size: 0.78rem;
}
.step-tracker .step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex: 1; position: relative;
}
.step-tracker .step::before {
  content: ""; position: absolute; top: 12px;
  left: calc(-50% + 12px); right: calc(50% + 12px);
  height: 2px; background: var(--border-solid); z-index: 0;
}
.step-tracker .step:first-child::before { display: none; }
.step-tracker .step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border-solid); background: var(--surface);
  z-index: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
}
.step-tracker .step.done   .step-dot { background: var(--success); border-color: var(--success); color: #fff; }
.step-tracker .step.active .step-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.step-tracker .step.done::before     { background: var(--success); }
.step-tracker .step-label { color: var(--text-secondary); font-size: 0.7rem; text-align: center; }
.step-tracker .step.done   .step-label { color: var(--success); font-weight: 600; }
.step-tracker .step.active .step-label { color: var(--primary); font-weight: 600; }

/* ── Dashboard Card Quick Actions ───────────────────────────────────────────── */
.dashboard-card .card-quick-action {
  margin-top: 0.5rem; display: flex; gap: 0.375rem; flex-wrap: wrap;
}
.card-quick-action .btn-quick {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.2);
  color: inherit; cursor: pointer; font-weight: 600;
  transition: background 0.15s; white-space: nowrap;
}
.card-quick-action .btn-quick:hover { background: rgba(255,255,255,0.4); }

/* Compact Alerts Section on Dashboard */
#dashboard-alerts-section {
  padding: 0.5rem 0.75rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
#dashboard-alerts-section .section-header {
  margin-bottom: 0.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#dashboard-alerts-section .section-header h2 {
  font-size: 0.9rem !important;
  margin-bottom: 0 !important;
}
#dashboard-alerts-section .btn-ghost {
  padding: 1px 6px !important;
  font-size: 0.75rem !important;
}

/* Same bill line items border styling */
tr.same-bill-row td {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════
   PRODUCTION POLISH — Print & Accessibility Indicators
   ═══════════════════════════════════════════════════ */

/* Focus Ring for Keyboard Access */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Print Overrides */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .sidebar, .nav-header, .quick-actions, .no-print {
    display: none !important;
  }
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .card, .glass-panel {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}