:root {
  --bg: #2f4858;
  --bg-alt: #1d3340;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --ink: #ecf0f1;
  --ink-soft: rgba(236, 240, 241, 0.75);
  --line: rgba(236, 240, 241, 0.1);
  --brand-primary: #f18d4f;
  --brand-secondary: #4f9ef1;
  --brand-dark: #1d3340;
  --ok: #2ecc71;
  --warn: #ff6b6b;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-soft: 0 18px 32px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 24px 56px rgba(0, 0, 0, 0.25);
  --font-sans: "Roboto", system-ui, sans-serif;
  --font-display: "JetBrains Mono", "SFMono-Regular", monospace;
  --form-bg: rgba(0, 0, 0, 0.2);
  --card-bg: rgba(255, 255, 255, 0.05);
  --accent-glow: rgba(241, 141, 79, 0.25);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
}

.public-body {
  background: var(--bg);
}

.site-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 75%, rgba(79, 158, 241, 0.08), transparent 35%),
    radial-gradient(circle at 88% 20%, rgba(241, 141, 79, 0.1), transparent 33%);
  filter: blur(1px);
  animation: slow-drift 16s ease-in-out infinite alternate;
}

@keyframes slow-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: var(--font-display);
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

::placeholder {
  color: rgba(236, 240, 241, 0.35);
}

::selection {
  background: var(--accent-glow);
  color: #fff;
}

/* ── Layout ── */

.app-shell {
  min-height: 100vh;
  display: flex;
}

/* ── Floating rail navigation ── */

.nav-wrapper {
  position: fixed;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 60px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 2px;
  z-index: 100;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.nav-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  text-decoration: none;
  transition: transform 0.15s var(--ease);
  flex-shrink: 0;
}

.nav-mark-img {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-mark:hover {
  transform: scale(1.04);
}

.nav-mark:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.nav-rule {
  width: 22px;
  height: 1px;
  background: var(--line);
  margin: 4px 0 8px;
  flex-shrink: 0;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nav-link {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: rgba(236, 240, 241, 0.5);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
  position: relative;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

.nav-link.is-active {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
}

.nav-link.is-active::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 1px;
  background: var(--brand-primary);
}

.nav-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.nav-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.nav-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

.nav-link:hover .nav-tip,
.nav-link:focus-visible .nav-tip,
.nav-avatar:hover .nav-tip,
.nav-avatar:focus-visible .nav-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.nav-spacer {
  flex: 1;
}

.nav-logout-form {
  margin: 0;
  display: flex;
  justify-content: center;
}

.nav-logout-btn {
  color: rgba(255, 107, 107, 0.55);
}

.nav-logout-btn:hover {
  color: var(--warn);
  background: rgba(255, 107, 107, 0.08);
}

.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-top: 6px;
  position: relative;
  cursor: default;
  flex-shrink: 0;
}

.nav-avatar:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ── Mobile top bar ── */

.nav-mobile-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(29, 51, 64, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 200;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
}

.nav-hamburger {
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s, width 0.25s;
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-mobile-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  text-decoration: none;
}

/* ── Mobile drawer ── */

.nav-drawer {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: 280px;
  background: rgba(29, 51, 64, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--line);
  z-index: 199;
  flex-direction: column;
  padding: 16px 12px;
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease);
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-menu--drawer {
  align-items: stretch;
  gap: 2px;
}

.nav-drawer .nav-link {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.nav-drawer .nav-link.is-active::before {
  left: 0;
  top: 10px;
  bottom: 10px;
  border-radius: 0 2px 2px 0;
}

.nav-drawer .nav-tip {
  display: none;
}

.nav-label {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  color: inherit;
}

.nav-drawer-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drawer-foot .nav-logout-form {
  display: block;
}

.nav-drawer-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 4px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.nav-drawer-user .nav-avatar {
  width: 32px;
  height: 32px;
  margin-top: 0;
  font-size: 0.78rem;
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 198;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Content area ── */

.content {
  flex: 1;
  width: min(1320px, 100%);
  padding: 32px 32px 48px;
  margin-left: 92px;
}

.content-admin-link {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 4px 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
}

.page-subtitle {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.95rem;
}

.page-subtitle a {
  color: var(--brand-primary);
  font-weight: 600;
}

.page-subtitle a:hover {
  text-decoration: underline;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-primary);
  font-weight: 600;
}

/* ── Cards & Panels ── */

.cards {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cards .card,
.cards .metric {
  flex: 1;
  min-width: 280px;
}

.cards-3 {
  /* Deprecated layout, kept for compatibility if needed elsewhere */
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Bento Grid ── */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.bento-tile {
  background: rgba(47, 72, 88, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.bento-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(241, 141, 79, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.bento-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(241, 141, 79, 0.2);
}

.bento-tile-chart {
  grid-column: span 4;
}

.bento-tile-2 {
  grid-column: span 2;
}

.bento-tile-full {
  grid-column: span 6;
}

.tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #5a7a8a;
  font-family: var(--font-display);
  margin: 0 0 8px 0;
  position: relative;
  z-index: 1;
}

.tile-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: -1px;
  margin: 0 0 8px 0;
  position: relative;
  z-index: 1;
}

.tile-value-blue {
  color: var(--brand-secondary);
}

.tile-trend {
  font-size: 11px;
  font-family: var(--font-display);
  margin: 0;
  position: relative;
  z-index: 1;
}

.trend-up {
  color: #4caf8a;
}

.trend-down {
  color: #ef5350;
}

.trend-flat {
  color: #5a7a8a;
}

.tile-sub {
  font-size: 11px;
  color: #5a7a8a;
  font-family: var(--font-display);
  margin: 6px 0 0 0;
  position: relative;
  z-index: 1;
}

/* ── Year Slicer ── */

.year-slicer {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.year-pill {
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-family: var(--font-display);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #5a7a8a;
  text-decoration: none;
  transition: all 0.15s var(--ease);
  cursor: pointer;
  display: inline-block;
}

.year-pill:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.year-pill.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #1d3340;
  font-weight: 700;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .bento-tile-chart,
  .bento-tile-2,
  .bento-tile-full {
    grid-column: span 2;
  }
}

.card,
.panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(241, 141, 79, 0.3);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(241, 141, 79, 0.1);
}

.metric {
  padding: 24px;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 200px;
}

.metric::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(241, 141, 79, 0.08), transparent 40%);
}

.metric p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

.metric h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  position: relative;
  z-index: 1;
}

.metric small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.metric-alert {
  border-color: var(--warn);
}

.metric-alert::after {
  background: linear-gradient(160deg, rgba(255, 107, 107, 0.1), transparent 40%);
}

.panel {
  padding: 24px;
  margin-bottom: 16px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.panel-header h3 {
  margin: 0;
  font-family: var(--font-display);
}

/* ── Tables ── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 740px;
}

th,
td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

th {
  padding: 16px;
  font-weight: 600;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

th {
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.customer-id-cell {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

tbody a {
  color: var(--brand-primary);
  font-weight: 700;
}

tbody a:hover {
  text-decoration: underline;
}

/* ── Badges ── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.badge-draft {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.15);
  border-color: rgba(243, 156, 18, 0.25);
}

.badge-sent {
  color: #85c1ff;
  background: rgba(79, 158, 241, 0.18);
  border-color: rgba(79, 158, 241, 0.35);
}

.badge-paid {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.25);
}

.badge-overdue {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.25);
}

.badge-rc {
  color: var(--brand-primary);
  background: rgba(241, 141, 79, 0.15);
  border-color: rgba(241, 141, 79, 0.35);
  font-family: var(--font-display);
}

.badge-inactive {
  color: rgba(236, 240, 241, 0.6);
  background: rgba(236, 240, 241, 0.08);
  border-color: rgba(236, 240, 241, 0.15);
}

/* ── Forms & Inputs ── */

.filter-grid,
.form-grid {
  display: grid;
  gap: 16px;
}

.filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.field {
  display: grid;
  gap: 6px;
}

label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.control-input,
input,
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--form-bg);
  color: var(--ink);
  font: inherit;
  color-scheme: dark;
}

textarea {
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ecf0f1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.control-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(241, 141, 79, 0.2);
  border-color: var(--brand-primary);
  background: rgba(0, 0, 0, 0.3);
}

.control-checkbox {
  width: auto;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.field-optional {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  opacity: 0.65;
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  flex-shrink: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.field-checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}

.field-spacer {
  visibility: hidden;
  pointer-events: none;
}

.form-actions,
.filter-actions,
.stack-actions,
.inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-actions {
  padding-bottom: 1px;
}

.stack-actions {
  justify-content: flex-end;
}

/* ── Buttons ── */

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    background 0.2s var(--ease-out);
}

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

.btn-primary {
  color: var(--brand-dark);
  background: var(--brand-primary);
  box-shadow: 0 8px 20px var(--accent-glow);
}

.btn-primary:hover {
  box-shadow: 0 12px 28px rgba(241, 141, 79, 0.35);
}

.btn-ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-mini {
  padding: 6px 12px;
  font-size: 0.78rem;
}

.link {
  color: var(--brand-primary);
  font-weight: 700;
}

.link:hover {
  text-decoration: underline;
}

.error {
  margin: 0;
  color: var(--warn);
  font-size: 0.8rem;
}

/* ── Messages ── */

.messages {
  margin-bottom: 12px;
}

.message {
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: var(--radius-md);
  background: rgba(46, 204, 113, 0.1);
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* ── Info grid ── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.info-grid > div {
  display: flex;
  flex-direction: column;
}

.text-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 8px 0;
}

.info-grid strong {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.top-gap {
  margin-top: 12px;
}

/* ── Auth / Login ── */

.public-content {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 34px 24px 40px;
}

/* ── Auth v2 (Simplified & Modernized) ── */

.auth-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1000;
  background: var(--bg); /* Match project background */
}

/* ── Static star field (CSS box-shadow, zero JS, zero animation) ── */

.auth-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  z-index: -2;
  pointer-events: none;
}

.auth-stars::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: rgba(236, 240, 241, 0.65);
  border-radius: 50%;
  animation:
    star-twinkle-a 9s ease-in-out infinite alternate,
    star-drift-a 45s linear infinite alternate;
  box-shadow:
    48px 23px rgba(236,240,241,0.7), 183px 67px rgba(236,240,241,0.4),
    312px 19px rgba(236,240,241,0.6), 467px 91px rgba(236,240,241,0.45),
    598px 34px rgba(236,240,241,0.75), 745px 78px rgba(236,240,241,0.35),
    883px 22px rgba(236,240,241,0.65), 1034px 85px rgba(236,240,241,0.5),
    1178px 41px rgba(236,240,241,0.7), 1321px 93px rgba(236,240,241,0.4),
    1456px 26px rgba(236,240,241,0.6), 1612px 72px rgba(236,240,241,0.45),
    1748px 38px rgba(236,240,241,0.75), 1890px 81px rgba(236,240,241,0.35),
    72px 152px rgba(236,240,241,0.5), 234px 218px rgba(236,240,241,0.6),
    389px 174px rgba(236,240,241,0.35), 527px 243px rgba(236,240,241,0.5),
    681px 198px rgba(236,240,241,0.45), 843px 262px rgba(236,240,241,0.65),
    992px 187px rgba(236,240,241,0.4), 1143px 251px rgba(236,240,241,0.55),
    1287px 209px rgba(236,240,241,0.45), 1432px 273px rgba(236,240,241,0.6),
    1578px 193px rgba(236,240,241,0.35), 1723px 258px rgba(236,240,241,0.5),
    1867px 214px rgba(236,240,241,0.4), 28px 672px rgba(236,240,241,0.55),
    167px 731px rgba(236,240,241,0.4), 345px 698px rgba(236,240,241,0.65),
    492px 762px rgba(236,240,241,0.35), 639px 714px rgba(236,240,241,0.5),
    788px 779px rgba(236,240,241,0.45), 934px 738px rgba(236,240,241,0.6),
    1082px 795px rgba(236,240,241,0.35), 1228px 752px rgba(236,240,241,0.5),
    1374px 811px rgba(236,240,241,0.45), 1519px 768px rgba(236,240,241,0.65),
    1663px 826px rgba(236,240,241,0.4), 1807px 784px rgba(236,240,241,0.55);
}

.auth-stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(236, 240, 241, 0.85);
  border-radius: 50%;
  animation:
    star-twinkle-b 13s ease-in-out infinite alternate,
    star-drift-b 55s linear infinite alternate;
  animation-delay: -5s, -22s;
  box-shadow:
    124px 48px rgba(236,240,241,0.85), 423px 112px rgba(236,240,241,0.7),
    698px 57px rgba(236,240,241,0.8), 956px 103px rgba(236,240,241,0.6),
    1215px 63px rgba(236,240,241,0.75), 1489px 98px rgba(236,240,241,0.65),
    1764px 52px rgba(236,240,241,0.8), 198px 334px rgba(236,240,241,0.7),
    512px 298px rgba(236,240,241,0.65), 834px 342px rgba(236,240,241,0.75),
    1102px 312px rgba(236,240,241,0.6), 1378px 358px rgba(236,240,241,0.7),
    1645px 328px rgba(236,240,241,0.65), 87px 854px rgba(236,240,241,0.75),
    367px 878px rgba(236,240,241,0.6), 623px 845px rgba(236,240,241,0.7),
    889px 891px rgba(236,240,241,0.65), 1156px 862px rgba(236,240,241,0.75),
    1423px 883px rgba(236,240,241,0.6), 1689px 851px rgba(236,240,241,0.7),
    1912px 874px rgba(236,240,241,0.65), 45px 478px rgba(236,240,241,0.7),
    1875px 512px rgba(236,240,241,0.65), 723px 923px rgba(236,240,241,0.6),
    1234px 947px rgba(236,240,241,0.55);
}


.auth-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 85%, rgba(79, 158, 241, 0.09), transparent 45%),
    radial-gradient(ellipse at 78% 15%, rgba(241, 141, 79, 0.09), transparent 45%),
    radial-gradient(ellipse at 55% 50%, rgba(79, 158, 241, 0.04), transparent 35%),
    radial-gradient(circle at center, transparent 0%, rgba(29, 51, 64, 0.65) 100%);
  z-index: -1;
  pointer-events: none;
  animation: nebula-drift 28s linear infinite;
}


@keyframes star-twinkle-a {
  /* Small stars — narrow breathing range */
  from { opacity: 0.55; }
  to   { opacity: 0.85; }
}

@keyframes star-twinkle-b {
  /* Large stars — slightly wider range */
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

@keyframes nebula-drift {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(-7px, 5px); }
  70%  { transform: translate(5px, -4px); }
  100% { transform: translate(0, 0); }
}

@keyframes star-drift-a {
  /* Layer A — slow drift right-down */
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, 18px); }
}

@keyframes star-drift-b {
  /* Layer B — slow drift left-up, out of phase with A */
  from { transform: translate(0, 0); }
  to   { transform: translate(-22px, -28px); }
}

@keyframes satellite-pass {
  /*
   * Travels from top-right off-screen to bottom-left off-screen.
   * Uses a slight arc via intermediate translate steps.
   * Pauses off-screen for the remainder of the cycle (≈50 % of 50s).
   */
  0%   { transform: translate(110vw, -8vh)  rotate(-12deg); opacity: 0; }
  2%   { opacity: 1; }
  42%  { transform: translate(-12vw, 106vh) rotate(-18deg); opacity: 1; }
  44%  { transform: translate(-14vw, 108vh) rotate(-18deg); opacity: 0; }
  100% { transform: translate(-14vw, 108vh) rotate(-18deg); opacity: 0; }
}

/* ── Satellite ── */

.satellite {
  position: absolute;
  /* Anchor top-left; keyframes drive it from top-right off-screen to bottom-left off-screen */
  top: 0;
  left: 0;
  z-index: 0;          /* Above stars (-2), below card (1) */
  pointer-events: none;
  width: 6px;
  height: 4px;
  background: rgba(180, 200, 220, 0.7);
  border-radius: 1px;
  animation: satellite-pass 50s linear infinite;
  animation-delay: -12s;
}

/* Left solar panel */
.satellite::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 100%;
  margin-right: 1px;
  width: 10px;
  height: 2px;
  background: rgba(180, 200, 220, 0.55);
  border-radius: 1px;
}

/* Right solar panel */
.satellite::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 100%;
  margin-left: 1px;
  width: 10px;
  height: 2px;
  background: rgba(180, 200, 220, 0.55);
  border-radius: 1px;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(420px, 90vw);
  padding: 44px 36px;
  background: rgba(29, 51, 64, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(241, 141, 79, 0.32);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong), 0 0 80px rgba(241, 141, 79, 0.07);
  animation: auth-appear 0.8s var(--ease-out);
}

/* HUD corner brackets */
.auth-card::before,
.auth-card::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.45;
}

.auth-card::before {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid var(--brand-primary);
  border-left: 1px solid var(--brand-primary);
  border-radius: 0 0 0 2px;
}

.auth-card::after {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid var(--brand-primary);
  border-right: 1px solid var(--brand-primary);
  border-radius: 0 0 2px 0;
}

@keyframes auth-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 12px;
  overflow: visible;
}

.auth-alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.25);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form .field label {
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.auth-form input {
  font-family: var(--font-display) !important;
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
  caret-color: var(--brand-primary);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.auth-form input:focus {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(241, 141, 79, 0.2);
  outline: none;
}

.btn-block {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  font-size: 0.88rem;
}

.auth-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.status-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.status-item {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse {
  width: 6px;
  height: 6px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ok);
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-stars::before,
  .auth-stars::after,
  .auth-overlay,
  .auth-card,
  .satellite,
  .site-glow,
  .pulse {
    animation: none !important;
  }

  .satellite {
    display: none;
  }
}

/* ── Line items formset ── */

.invoice-create-cards {
  margin-bottom: 20px;
}

.invoice-create-card {
  min-height: 136px;
}

.invoice-create-card h3 {
  margin-bottom: 0;
}

.invoice-form-panel {
  border-color: rgba(241, 141, 79, 0.24);
}

.invoice-form-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}

.invoice-form-intro h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.invoice-form-intro p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.invoice-form-caption {
  max-width: 42ch;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(241, 141, 79, 0.22);
  background: rgba(241, 141, 79, 0.08);
  color: rgba(236, 240, 241, 0.9);
  font-size: 0.82rem;
  line-height: 1.45;
}

.form-section-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 8px 0 0;
}

.form-section-full {
  grid-column: 1 / -1;
}

.line-items-wrap {
  overflow-x: auto;
}

.line-items-note {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 740px; /* Adjusted min-width for fewer columns */
}

.line-items-table td {
  vertical-align: top;
}

.line-items-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.line-items-table td input,
.line-items-table td select {
  padding: 6px 8px;
  font-size: 0.88rem;
}

.line-item-row td:last-child {
  width: 120px;
}

.delete-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  color: var(--warn);
  cursor: pointer;
  white-space: nowrap;
}

.deleted-row {
  opacity: 0.4;
}

.invoice-form-actions {
  margin-top: 6px;
  justify-content: flex-end;
}

/* ── Invoice form extras ── */

.form-section-label {
  margin: 0 0 16px;
  padding-bottom: 8px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.field-required {
  color: var(--brand-primary);
  font-weight: 700;
}

.customer-preview {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-secondary);
}

.customer-preview-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.customer-preview-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.customer-preview-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
}


.form-actions-right {
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
}

/* ── Invoice detail extras ── */

.reverse-charge-note {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--brand-primary);
  padding-left: 12px;
}

/* Summary rows in detail line-items tfoot */
tfoot .summary-row td {
  border-bottom: none;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

tfoot .summary-total td {
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  padding-top: 12px;
}

tfoot .summary-total td.font-mono {
  color: var(--brand-primary);
  font-size: 1.1rem;
}

/* ── Info grid wide span ── */

.info-grid-wide {
  grid-column: 1 / -1;
}

/* ── Pagination ── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.bulk-hint {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.bulk-check-col { width: 44px; }

.bulk-select,
#bulk-select-all { cursor: pointer; }

/* ── form-grid two-column default ── */

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Utility classes ── */

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.font-mono {
  font-family: var(--font-display);
}

.min-w-desc {
  min-width: 200px;
}

.w-24 { width: 96px; }
.w-32 { width: 128px; }

/* ── Invoice Summary (for tables) ── */
.invoice-summary-table-footer .summary-row {
  display: table-row;
}

.invoice-summary-table-footer .summary-row td {
  border-bottom: none;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.invoice-summary-table-footer .summary-total td {
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.2rem; /* Increased size for emphasis */
  color: var(--brand-primary);
  padding-top: 12px;
}


/* ── Responsive ── */

@media (max-width: 1120px) {
  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .nav-wrapper {
    display: none !important;
  }

  .nav-mobile-bar {
    display: flex;
  }

  .nav-drawer {
    display: flex;
  }

  .nav-backdrop {
    display: block;
  }

  .content {
    margin-left: 0 !important;
    padding-top: 72px;
  }
  
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .content {
    padding: 72px 14px 36px;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .stack-actions {
    justify-content: flex-start;
  }

  .cards-3,
  .filter-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }

  .public-content {
    padding: 22px 14px 32px;
  }

  .invoice-form-intro {
    flex-direction: column;
  }

  .invoice-form-caption {
    max-width: none;
  }

  .invoice-form-actions {
    justify-content: flex-start;
  }
}

/* ── Live total cells in invoice form tfoot ── */

tfoot .summary-row td,
tfoot .summary-total td {
  background: transparent;
}

/* ── Customer detail summary strip ── */

.customer-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* ── Cards grid (fallback for metric cards outside cards-3) ── */

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

@media (max-width: 700px) {
  .customer-summary-strip {
    grid-template-columns: 1fr;
  }
}

/* ── Inbox: invoice upload page ──────────────────────────────────────────── */

.upload-shell {
  margin-bottom: 24px;
}

.panel-meta {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Desktop drop zone */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 36px 28px;
  border: 1.5px dashed rgba(241, 141, 79, 0.32);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 141, 79, 0.08), transparent 60%),
    var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease-out),
    background 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.dropzone:hover,
.dropzone:focus-within,
.dropzone.is-active {
  border-color: var(--brand-primary);
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 141, 79, 0.18), transparent 60%),
    var(--surface-strong);
  transform: translateY(-1px);
}

.dropzone.has-files {
  border-style: solid;
  border-color: rgba(241, 141, 79, 0.45);
  min-height: 160px;
}

.dropzone.has-files .dropzone-ico {
  width: 40px;
  height: 40px;
}

.dropzone-ico {
  width: 56px;
  height: 56px;
  color: var(--brand-primary);
  filter: drop-shadow(0 6px 14px var(--accent-glow));
}

.dropzone-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dropzone-sub {
  font-size: 14px;
  color: var(--ink-soft);
}

.dropzone-link {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dropzone-meta {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Mobile action cards (hidden on desktop) */
.upload-mobile {
  display: none;
}

.action-card {
  display: grid;
  grid-template-columns: 48px 1fr 16px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease-out),
    background 0.2s var(--ease-out),
    transform 0.1s var(--ease-out);
}

.action-card:active {
  transform: scale(0.98);
}

.action-card:hover,
.action-card:focus-within {
  border-color: var(--brand-primary);
  background: var(--surface-strong);
}

/* Primary action — bias the eye toward Scan on mobile */
.action-card:has(.action-ico-primary) {
  border-color: rgba(241, 141, 79, 0.45);
  background:
    linear-gradient(180deg, rgba(241, 141, 79, 0.10), rgba(241, 141, 79, 0.02)),
    var(--surface);
}

.action-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(241, 141, 79, 0.12);
  color: var(--brand-primary);
}

.action-ico-primary {
  background: var(--brand-primary);
  color: var(--brand-dark);
  box-shadow: 0 8px 18px var(--accent-glow);
}

.action-ico svg {
  width: 24px;
  height: 24px;
}

.action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.action-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.action-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.action-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.action-chev svg {
  width: 16px;
  height: 16px;
}

.action-card:hover .action-chev,
.action-card:focus-within .action-chev {
  color: var(--brand-primary);
  transform: translateX(2px);
}

/* Selected files preview */
.file-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.file-list-item {
  display: grid;
  grid-template-columns: 28px 1fr auto 28px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.file-list-item:hover {
  border-color: rgba(236, 240, 241, 0.18);
  background: rgba(0, 0, 0, 0.28);
}

.file-list-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.file-list-remove:hover,
.file-list-remove:focus-visible {
  background: rgba(255, 107, 107, 0.14);
  color: var(--warn);
  outline: none;
}

.file-list-remove svg {
  width: 14px;
  height: 14px;
}

.file-list-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--brand-secondary);
}

.file-list-ico svg {
  width: 20px;
  height: 20px;
}

.file-list-name {
  font-family: var(--font-display);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list-size {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-soft);
}

.upload-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 6px 0;
  border-top: 1px solid var(--line);
}

.upload-actions-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.upload-summary {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

@media (max-width: 700px) {
  .dropzone {
    display: none;
  }
  .upload-mobile {
    display: grid;
    gap: 12px;
  }
  .upload-actions {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(29, 51, 64, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-strong);
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .upload-actions-right {
    flex: 1 1 100%;
    justify-content: space-between;
    order: 1;
  }
  .upload-actions #clearBtn {
    order: 2;
    flex: 1 1 auto;
  }
  .upload-actions #uploadBtn {
    flex: 2 1 auto;
    padding: 12px 16px;
  }
}

/* ---------- Email compose ---------- */
.email-compose {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.2fr);
  gap: 24px;
  align-items: start;
}
.email-compose-preview {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
}
.email-compose-preview .panel-header small {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}
.email-preview-iframe {
  width: 100%;
  min-height: 720px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f5f7;
}

/* ── Status Selector ── */
.status-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.status-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-control {
  position: relative;
}

.status-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ecf0f1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.status-select:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
}

.status-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(241, 141, 79, 0.2);
}

.status-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-display .badge {
  align-self: flex-start;
  font-size: 0.75rem;
  padding: 6px 12px;
}

.status-date {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 1120px) {
  .email-compose {
    grid-template-columns: 1fr;
  }
  .email-compose-preview {
    position: static;
  }
  .email-preview-iframe {
    min-height: 560px;
  }
}