/* ============================================================
   PUBLIC PAGES THEME — mirrors the landing page (Welcome.vue):
   light airy background, single violet accent, pastel cards,
   Plus Jakarta Sans, rounded cards, generous whitespace.
   Scope everything under .lp-page so the in-app pages are untouched.
   ============================================================ */
.lp-page {
  --bg: #f4f3f8;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --violet: #2b82f0;
  --violet-hover: #1a6fdc;
  --lav: #dcd2f5;
  --peach: #e7d4c9;
  --mint: #cfe4dd;
  --skyblue: #c9def4;
  --dark: #1b2430;
  --line: rgba(31, 41, 51, 0.08);
  --radius: 28px;
  --radius-sm: 18px;
  --pill: 999px;
  --shadow: 0 24px 60px -34px rgba(31, 41, 51, 0.3);

  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

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

.lp-page .lp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-page .lp-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ---- typography ---- */
.lp-page h1, .lp-page h2, .lp-page h3 { color: var(--ink); letter-spacing: -0.035em; font-weight: 600; line-height: 1.08; margin: 0; }
.lp-page p { margin: 0; }
.lp-page a { text-decoration: none; }

.lp-page .lp-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet);
  margin-bottom: 16px;
}
.lp-page .lp-title { font-size: clamp(34px, 4.6vw, 56px); }
.lp-page .lp-h2 { font-size: clamp(28px, 3.6vw, 46px); }
.lp-page .lp-h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.lp-page .lp-lead { font-size: clamp(17px, 2vw, 21px); font-weight: 400; color: var(--muted); line-height: 1.55; }
.lp-page .lp-text { color: var(--muted); line-height: 1.6; font-size: 15.5px; }
.lp-page .lp-underline { position: relative; color: var(--violet); }

/* ---- sections ---- */
.lp-page .lp-section { padding: 70px 0; }
.lp-page .lp-section-sm { padding: 44px 0; }
.lp-page .lp-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.lp-page .lp-section-head .lp-lead { margin-top: 14px; }

/* ---- hero ---- */
.lp-page .lp-hero { position: relative; padding: 64px 0 40px; text-align: center; overflow: hidden; }
.lp-page .lp-hero .lp-title { margin: 0 auto; max-width: 16ch; }
.lp-page .lp-hero .lp-lead { margin: 18px auto 0; max-width: 60ch; }

/* ---- buttons ---- */
.lp-page .lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--pill); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  letter-spacing: -0.01em; text-decoration: none;
}
.lp-page .lp-btn-primary { background: var(--violet); color: #fff; box-shadow: 0 16px 30px -16px rgba(43,130,240,0.6); }
.lp-page .lp-btn-primary:hover { background: var(--violet-hover); transform: translateY(-2px); }
.lp-page .lp-btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.lp-page .lp-btn-secondary:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px); }
.lp-page .lp-btn-ghost { background: rgba(43,130,240,0.08); color: var(--violet); }
.lp-page .lp-btn-ghost:hover { background: rgba(43,130,240,0.14); }

/* ---- cards ---- */
.lp-page .lp-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 30px; box-shadow: 0 26px 60px -38px rgba(31,41,51,0.32);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lp-page .lp-card:hover { transform: translateY(-6px); box-shadow: 0 34px 76px -34px rgba(31,41,51,0.38); }
.lp-page .lp-grid { display: grid; gap: 22px; }
.lp-page .lp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lp-page .lp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lp-page .lp-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* colored icon tile (gradient) */
.lp-page .lp-ico {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; margin-bottom: 18px;
}
.lp-page .lp-ico.blue   { background: linear-gradient(150deg, #5aa2ff, #2b82f0); box-shadow: 0 14px 28px -10px rgba(43,130,240,0.6); }
.lp-page .lp-ico.green  { background: linear-gradient(150deg, #34d399, #10b981); box-shadow: 0 14px 28px -10px rgba(16,185,129,0.55); }
.lp-page .lp-ico.violet { background: linear-gradient(150deg, #a78bfa, #7c5cff); box-shadow: 0 14px 28px -10px rgba(124,92,255,0.55); }
.lp-page .lp-ico.amber  { background: linear-gradient(150deg, #fbbf24, #f59e0b); box-shadow: 0 14px 28px -10px rgba(245,158,11,0.55); }
.lp-page .lp-ico.cyan   { background: linear-gradient(150deg, #22d3ee, #06b6d4); box-shadow: 0 14px 28px -10px rgba(6,182,212,0.55); }
.lp-page .lp-ico.pink   { background: linear-gradient(150deg, #f472b6, #ec4899); box-shadow: 0 14px 28px -10px rgba(236,72,153,0.55); }

/* dark CTA card (like the landing CTA) */
.lp-page .lp-cta { position: relative; background: var(--dark); border-radius: var(--radius); padding: 72px 48px; text-align: center; overflow: hidden; color: #fff; }
.lp-page .lp-cta::before { content: ''; position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(43,130,240,0.28), rgba(43,130,240,0) 62%); pointer-events: none; }
.lp-page .lp-cta > * { position: relative; z-index: 1; }
.lp-page .lp-cta h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); margin: 0 0 14px; }
.lp-page .lp-cta p { color: rgba(255,255,255,0.66); font-size: clamp(16px,2vw,19px); margin: 0 auto 30px; max-width: 50ch; }

/* ---- reveal ---- */
.lp-page .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.22,0.7,0.2,1), transform 0.7s cubic-bezier(0.22,0.7,0.2,1); will-change: opacity, transform; }
.lp-page .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-page .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   NAVBAR / FOOTER — restyle to the light landing look,
   only when inside a .lp-page (in-app chrome stays as is).
   !important guarantees we beat the components' scoped styles.
   ============================================================ */
:is(.lp-page, .landing-page) .navbar,
:is(.lp-page, .landing-page) .navbar a,
:is(.lp-page, .landing-page) .navbar button,
:is(.lp-page, .landing-page) .navbar input { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }

/* minimal flat navbar (contiant-style) — logo left, links pushed right, dark pill CTA */
:is(.lp-page, .landing-page) .navbar {
  background: rgba(244, 243, 248, 0.7) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
:is(.lp-page, .landing-page) .navbar .nav-content {
  background: transparent !important;
  border: none !important; box-shadow: none !important;
  padding: 22px 0 !important;
}
:is(.lp-page, .landing-page) .navbar .nav-icon { display: none !important; }
:is(.lp-page, .landing-page) .navbar .nav-links { margin-left: auto; gap: 34px !important; margin-right: 34px; }
:is(.lp-page, .landing-page) .nav-link {
  color: var(--muted) !important; font-weight: 500 !important; font-size: 15.5px !important;
  padding: 0 !important; background: none !important; border-radius: 0;
  transition: color 0.2s ease;
}
:is(.lp-page, .landing-page) .nav-link:hover,
:is(.lp-page, .landing-page) .nav-link.router-link-active { color: var(--ink) !important; background: none !important; }
:is(.lp-page, .landing-page) .language-btn { background: transparent !important; border: 1px solid var(--line) !important; color: var(--muted) !important; border-radius: var(--pill) !important; height: 40px !important; }
:is(.lp-page, .landing-page) .language-btn:hover { background: #fff !important; border-color: var(--ink) !important; color: var(--ink) !important; }
:is(.lp-page, .landing-page) .btn-nav-login { background: var(--dark) !important; color: #fff !important; border-radius: var(--pill) !important; box-shadow: none !important; padding: 12px 26px !important; font-weight: 600 !important; }
:is(.lp-page, .landing-page) .btn-nav-login:hover { background: #0e151f !important; transform: translateY(-1px); }
:is(.lp-page, .landing-page) .mobile-menu-btn { color: var(--ink) !important; }
:is(.lp-page, .landing-page) .nav-links.mobile-open { background: #fff !important; border-top: 1px solid var(--line) !important; }
:is(.lp-page, .landing-page) .language-dropdown { background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: 14px !important; }

@media (max-width: 1024px) {
  :is(.lp-page, .landing-page) .navbar .nav-content { padding: 16px 0 !important; }
  :is(.lp-page, .landing-page) .navbar .nav-links { margin-left: 0; margin-right: 0; gap: 2px !important; }
  :is(.lp-page, .landing-page) .nav-links.mobile-open {
    background: #fff !important; border-top: 1px solid var(--line) !important;
    padding: 10px !important; border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 50px -24px rgba(31,41,51,0.4) !important;
  }
  :is(.lp-page, .landing-page) .nav-links.mobile-open .nav-link {
    width: 100%; padding: 14px 16px !important; border-bottom: none !important;
    border-radius: 12px; font-size: 16px !important; font-weight: 600 !important;
    color: var(--ink) !important;
  }
  :is(.lp-page, .landing-page) .nav-links.mobile-open .nav-link:hover,
  :is(.lp-page, .landing-page) .nav-links.mobile-open .nav-link.router-link-active {
    background: rgba(43,130,240,0.08) !important; color: var(--violet) !important;
  }
}

.lp-page .footer { background: var(--bg) !important; border-top: 1px solid var(--line) !important; }
.lp-page .footer-logo img { filter: brightness(0) saturate(100%); }
.lp-page .footer-description { color: var(--muted) !important; }
.lp-page .footer-heading { color: var(--ink) !important; }
.lp-page .footer-links a, .lp-page .footer-links span { color: var(--muted) !important; }
.lp-page .footer-links a:hover { color: var(--violet) !important; }
.lp-page .social-icon { background: rgba(31,41,51,0.06) !important; color: var(--muted) !important; }
.lp-page .social-icon:hover { background: var(--violet) !important; color: #fff !important; }
.lp-page .footer-bottom { border-top-color: var(--line) !important; }
.lp-page .footer-bottom p { color: var(--muted) !important; }
.lp-page .footer-legal-links a { color: var(--muted) !important; }
.lp-page .footer-legal-links a:hover { color: var(--ink) !important; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .lp-page .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lp-page .lp-grid-3 { grid-template-columns: 1fr; }
  .lp-page .lp-grid-2 { grid-template-columns: 1fr; }
  .lp-page .lp-section { padding: 50px 0; }
  .lp-page .lp-cta { padding: 56px 24px; }
}
@media (max-width: 600px) {
  .lp-page .lp-grid-4 { grid-template-columns: 1fr; }
}
/*
 * Density
 *
 * Three settings, differing in how much room the interface takes rather than
 * in colour: spacious (what the app shipped with), compact, and tabular.
 *
 * Spacious has no block here at all — it is whatever the components say — so
 * it cannot drift from the original however much the other two change.
 *
 * The rules below are written against html[data-density], which is present
 * for compact and for tabular alike. Tabular then tightens further in its own
 * section at the foot of this file.
 *
 * Add a setting in three places at once: here, resources/js/utils/theme.js
 * for the list the profile renders, and config/themes.php, which is the
 * whitelist the API accepts.
 */

/*
 * Indigo also runs the dashboard at half the spacing.
 *
 * A theme here is not only a palette: this one is the compact layout, kept
 * beside the original rather than replacing it, so both can be lived with
 * before one is chosen.
 *
 * Everything is confined to .home-page, which is the dashboard's root — the
 * navigation sits outside it and is deliberately untouched, and the class
 * names below are generic enough to exist on other pages too.
 *
 * These selectors outrank the components' own scoped rules on specificity, so
 * no !important is needed. The one exception would be an inline style, which
 * nothing can outrank — the upload glyph's size was moved into a class for
 * exactly that reason.
 */

/* The page and the gaps between its blocks */
html[data-density] .home-page { padding: 12px 0; }
html[data-density] .home-page .scans-section { margin-top: 16px; margin-bottom: 24px; }
html[data-density] .home-page .table-container { margin-bottom: 16px; }

/* Company card */
/*
 * The company you are working in now has a card of its own in the top row,
 * beside the upload form — see Home.vue, which holds its layout. It used to
 * be lifted out of the flow and parked at the page's top left, which worked
 * while the form was 600px and centred, and stopped working the moment the
 * form moved to the left edge: the badge sat on top of it.
 *
 * What is left here is only what this density changes — the sizes.
 */
html[data-density] .home-page .company-header-bar {
  padding: 12px;
}

html[data-density] .home-page .company-info {
  gap: 8px;
}

html[data-density] .home-page .company-name-badge .company-name {
  font-size: 14px;
  color: var(--primary);
}

/* The swap button says what it does again.
 *
 * It was shrunk to a bare 26px glyph when the company was a badge squeezed
 * into the gutter. In a card there is room for the words, and a lone arrow
 * at the foot of the card did not read as a button at all. */
html[data-density] .home-page .btn-switch-company {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--primary);
  backdrop-filter: none;
}

/* No lift on hover — the tint and the border do the work. */
html[data-density] .home-page .btn-switch-company:hover {
  transform: none;
}

/* Upload form */
html[data-density] .home-page .upload-zone { padding: 26px 24px; margin-bottom: 12px; }
html[data-density] .home-page .upload-icon { margin-bottom: 10px; }
/* The drop-zone glyph is an SVG now and takes its size as an attribute, so
   the theme sets width and height rather than a font size. */
html[data-density] .home-page .upload-icon-glyph { width: 26px; height: 26px; }
html[data-density] .home-page .upload-text { font-size: 15px; margin-bottom: 4px; }
html[data-density] .home-page .upload-subtext { font-size: 13px; }
html[data-density] .home-page .btn-hide-form { height: 34px; font-size: 12px; margin-bottom: 12px; }
html[data-density] .home-page .upload-buttons { margin-bottom: 16px; }
html[data-density] .home-page .btn-camera,
html[data-density] .home-page .btn-upload { height: 36px; font-size: 14px; padding: 0 18px; min-width: 130px; }

/* Filter and action bands above the table */
html[data-density] .home-page .table-header { padding: 10px 20px; }
html[data-density] .home-page .actions-row { padding: 10px 20px; }
html[data-density] .home-page .filters-row { padding: 12px 20px; gap: 12px; }
html[data-density] .home-page .filter-item { gap: 5px; }
html[data-density] .home-page .btn-filter,
html[data-density] .home-page .btn-export-single { height: 36px; padding: 0 18px; }

/*
 * The dropdowns.
 *
 * Not confined to .home-page like the rest: these same controls are used
 * inside modals, which are teleported to <body> and so fall outside the
 * dashboard's root. Half-height in one place and full height in the next
 * would read as a bug rather than a density.
 *
 * The navigation has none of these — its language control is a .lang-btn — so
 * it stays as it is.
 *
 * .selector-input covers the company, type, vendor and account-code
 * selectors, which all share one geometry; .select-input is CustomSelect.
 * The max-height is for the account-code one, which pins both ends.
 */
html[data-density] .selector-input,
html[data-density] .select-input,
html[data-density] .date-field-input {
  padding: 5px 32px 5px 10px;
  min-height: 30px;
  max-height: none;
}

html[data-density] .selector-input .selected-value,
html[data-density] .select-input .selected-value,
html[data-density] .date-field-input {
  font-size: 13px;
}

html[data-density] .selector-input .dropdown-icon,
html[data-density] .select-input .dropdown-icon {
  font-size: 11px;
  right: 11px;
}

/* The native select and text inputs in the dashboard's filter row */
html[data-density] .home-page .filter-select,
html[data-density] .home-page .filter-input,
html[data-density] .home-page .sort-select {
  padding: 5px 10px;
  font-size: 13px;
}

/*
 * The open dropdowns.
 *
 * Shrinking the closed control only moved half the problem: the list that
 * opens from it carries its own padding and type size, and left alone it
 * towered over the field it belonged to.
 *
 * Global for the same reason as the fields themselves — these lists are used
 * inside modals too.
 */
html[data-density] .dropdown-item {
  padding: 5px 10px;
}

html[data-density] .dropdown-item.loading,
html[data-density] .dropdown-item.empty,
html[data-density] .dropdown-item.empty-with-action {
  padding: 10px;
}

html[data-density] .dropdown-item .company-name,
html[data-density] .dropdown-item .option-label {
  font-size: 13px;
}

html[data-density] .dropdown-item .company-vat {
  font-size: 11px;
}

/* Half the rows' height means twice as many fit; the list keeps roughly the
   same reach down the page rather than showing the same few, smaller. */
html[data-density] .dropdown-menu,
html[data-density] .dropdown-list {
  max-height: 230px;
}

/*
 * Borders, at the weight the dropdowns use.
 *
 * Several places drew a 2px blue frame where a field draws a 1px grey one.
 * Next to each other the heavy ones read as alerts rather than as containers,
 * which is not what any of them mean: the upload zone is a target, the hide
 * button is an ordinary control, and an active filter is a state worth a
 * tint, not a ring.
 *
 * The reference is .selector-input: 1px solid var(--border).
 */
html[data-density] .home-page .upload-zone {
  border: 1px solid var(--border);
}

/* The drop target still has to announce itself while a file is over it —
   that is the one moment the strong border earns its place. */
html[data-density] .home-page .upload-zone:hover:not(.disabled),
html[data-density] .home-page .upload-zone.drag-over:not(.disabled) {
  border-color: var(--primary);
}

/* Width only. The colour belongs to the button, which changes it on hover —
   restating it here as a shorthand put it back to grey on every state. */
html[data-density] .home-page .btn-hide-form {
  border-width: 1px;
  border-style: solid;
}

/* An active filter keeps its tint and loses the ring.
 *
 * Each wrapper class is named rather than relying on .active-filter alone:
 * the components write .company-selector.active-filter .selector-input, and a
 * shorter selector here loses the specificity contest however deep the theme
 * prefix is. The tint is restated too, so it follows the theme's blue instead
 * of staying the sky one the components hardcode. */
html[data-density] .company-selector.active-filter .selector-input:not(.open),
html[data-density] .type-selector.active-filter .selector-input:not(.open),
html[data-density] .vendor-selector.active-filter .selector-input:not(.open) {
  border: 1px solid var(--primary);
  background: rgba(43, 130, 240, 0.05);
}

html[data-density] .home-page .filter-select.active-filter,
html[data-density] .home-page .filter-input.active-filter {
  border: 1px solid var(--primary);
  background: rgba(43, 130, 240, 0.05);
}

/*
 * The selection bar above the table.
 *
 * Its own min-height of 60px held the band open regardless of what was in it,
 * so the buttons had to come down and that floor with them.
 */
html[data-density] .home-page .select-row {
  padding: 7px 20px;
  min-height: 0;
}

html[data-density] .home-page .select-all-section { font-size: 12px; }
html[data-density] .home-page .bulk-actions { gap: 8px; }
html[data-density] .home-page .selected-count { font-size: 12px; padding: 4px 10px; }
html[data-density] .home-page .btn-bulk { padding: 5px 12px; font-size: 12px; gap: 6px; }

/*
 * The foot of the dashboard: the totals, the pager and the QR card.
 *
 * Both .pagination and .pagination-btn exist in two components with different
 * sizes, so each is given its own value rather than one shared rule.
 */

/* Totals summary */
html[data-density] .home-page .totals-summary { padding: 12px; margin-top: 12px; }
html[data-density] .home-page .totals-label { font-size: 14px; margin-bottom: 8px; }
html[data-density] .home-page .totals-container { gap: 10px; }
html[data-density] .home-page .currency-group { padding: 10px; min-width: 220px; }
html[data-density] .home-page .currency-header {
  font-size: 11px;
  padding: 4px 10px;
  margin: -10px -10px 8px -10px;
}
html[data-density] .home-page .total-item { padding: 3px 8px; }
html[data-density] .home-page .total-label { font-size: 12px; }
html[data-density] .home-page .total-value { font-size: 13px; }
html[data-density] .home-page .total-grand .total-label { font-size: 12px; }
html[data-density] .home-page .total-grand .total-value { font-size: 14px; }

/* Pager */
html[data-density] .home-page .pagination { margin-top: 16px; padding-top: 16px; padding-bottom: 0; }
html[data-density] .home-page .pagination-btn { padding: 5px 14px; font-size: 13px; }
html[data-density] .home-page .pagination-page { min-width: 30px; padding: 0 10px; font-size: 13px; }
/* The page numbers are .pagination-number in Home and .pagination-page in
   ScansTable — two names for the same control, so both are listed. */
html[data-density] .home-page .pagination-numbers { gap: 4px; }
html[data-density] .home-page .pagination-number { width: 28px; height: 28px; font-size: 13px; }
html[data-density] .home-page .items-per-page-label { font-size: 12px; padding: 4px 8px; }
/* The right side keeps room for the caret drawn there; a symmetric padding
   put the arrow on top of the last letter. */
html[data-density] .home-page .items-per-page-select { font-size: 12px; padding: 4px 24px 4px 8px; }


/*
 * The date band between groups of uploads.
 *
 * Its checkbox stays 16px, like the rows' own: it selects the whole day's
 * worth at once, which is the click least worth making easy to miss.
 */
html[data-density] .home-page .date-separator { padding: 5px 18px; }
html[data-density] .home-page .date-label { font-size: 12px; }
html[data-density] .home-page .date-header { gap: 7px; }

/*
 * The last of it, found by walking every sized class in the three dashboard
 * files against what this theme already overrides.
 *
 * The filter row was the telling one: its padding had come down but a
 * min-height of 42px held the fields open anyway. A min-height left behind is
 * exactly the kind of thing that makes an element look untouched, so they are
 * all listed here.
 */

/* Filter row: the heights that outlived the padding */
html[data-density] .home-page .filter-select,
html[data-density] .home-page .filter-input {
  min-height: 30px;
}

html[data-density] .home-page .btn-clear-filters {
  padding: 5px 14px;
  min-height: 30px;
  font-size: 13px;
  gap: 6px;
}

html[data-density] .home-page .filter-label,
html[data-density] .home-page .sort-label {
  font-size: 10px;
  letter-spacing: 0.6px;
}

/* The filter button's own label, which sits in a span of its own */
html[data-density] .home-page .btn-filter-text { font-size: 13px; }

/* Shown in place of "hide the form" once the form is hidden. Same type size
   as the swap-company button it stands beside, which it is drawn after. */
html[data-density] .home-page .btn-toggle-form {
  height: 34px;
  font-size: 12px;
}

html[data-density] .home-page .scan-count,
html[data-density] .home-page .scan-totals-center { font-size: 12px; }
html[data-density] .home-page .page-container { padding: 0 16px; }

/* ------------------------------------------------------------------
 * Scan details page
 *
 * This page is built from utility classes and inline styles, not from
 * named ones, so there is nothing for a theme to redefine the way the
 * dashboard's classes can be. The utilities it actually uses are
 * redefined instead, scoped to .scan-details-page so no other page is
 * touched.
 *
 * The image is the exception the whole thing is for: it is not shrunk.
 * It grows, because the form beside it is narrowed and the preview pane
 * takes the room that frees up.
 * ------------------------------------------------------------------ */

/* The form pane, wider than it ships at every width it declares.
   Narrowing it had given the preview more room but left the line items
   needing a sideways scroll; now that everything inside is smaller, the extra
   width goes to fitting that table whole. The preview is flex-1 and gives up
   exactly what is taken. */
@media (min-width: 768px) {
  html[data-density] .scan-details-page .details-pane { width: 560px; }
}
@media (min-width: 1024px) {
  html[data-density] .scan-details-page .details-pane { width: 700px; }
}
@media (min-width: 1280px) {
  html[data-density] .scan-details-page .details-pane { width: 900px; }
}
@media (min-width: 1536px) {
  html[data-density] .scan-details-page .details-pane { width: 1040px; }
}

/* Padding */
html[data-density] .scan-details-page .py-1 { padding-top: .125rem; padding-bottom: .125rem; }
html[data-density] .scan-details-page .py-2 { padding-top: .25rem; padding-bottom: .25rem; }
html[data-density] .scan-details-page .py-3 { padding-top: .375rem; padding-bottom: .375rem; }
html[data-density] .scan-details-page .px-2 { padding-left: .375rem; padding-right: .375rem; }
html[data-density] .scan-details-page .px-3 { padding-left: .5rem; padding-right: .5rem; }
html[data-density] .scan-details-page .px-4 { padding-left: .625rem; padding-right: .625rem; }
html[data-density] .scan-details-page .p-1\.5 { padding: .25rem; }
html[data-density] .scan-details-page .p-2 { padding: .3rem; }
html[data-density] .scan-details-page .p-3 { padding: .45rem; }
html[data-density] .scan-details-page .p-4 { padding: .625rem; }
html[data-density] .scan-details-page .p-6 { padding: 1rem; }

/* Gaps and stacking */
html[data-density] .scan-details-page .gap-2 { gap: .3rem; }
html[data-density] .scan-details-page .gap-3 { gap: .45rem; }
html[data-density] .scan-details-page .gap-4 { gap: .6rem; }
html[data-density] .scan-details-page .mb-2 { margin-bottom: .25rem; }
html[data-density] .scan-details-page .mb-3 { margin-bottom: .4rem; }
html[data-density] .scan-details-page .mb-4 { margin-bottom: .5rem; }
html[data-density] .scan-details-page .mt-1 { margin-top: .125rem; }
html[data-density] .scan-details-page .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: .6rem; }
html[data-density] .scan-details-page .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .45rem; }

/* Type: one notch down, no more — these are the figures being read off an
   invoice, and shrinking them the way spacing shrinks would cost accuracy. */
html[data-density] .scan-details-page .text-xs { font-size: .7rem; line-height: 1rem; }
html[data-density] .scan-details-page .text-sm { font-size: .78rem; line-height: 1.1rem; }
html[data-density] .scan-details-page .text-base { font-size: .85rem; line-height: 1.2rem; }
html[data-density] .scan-details-page .text-lg { font-size: .95rem; line-height: 1.3rem; }

/* Icons and the top bar */
html[data-density] .scan-details-page .h-4 { height: .85rem; }
html[data-density] .scan-details-page .w-4 { width: .85rem; }
html[data-density] .scan-details-page .h-5 { height: 1rem; }
html[data-density] .scan-details-page .w-5 { width: 1rem; }
html[data-density] .scan-details-page .h-16 { height: 3rem; }

/* The preview keeps its own sizes, the 900px ceiling included. Lifting it
   made sense while the form pane was narrow; the pane is wider than stock
   now, so the cap is back and the preview behaves exactly as it does on the
   other themes. */

/*
 * What actually carries this page's size.
 *
 * The utility overrides above reach the wrappers, but every field, label and
 * button on the page is a named class from app.css — .form-input alone
 * appears 43 times — so none of it moved. These are the ones that count.
 */
html[data-density] .scan-details-page .form-input {
  padding: .3rem .5rem;
  font-size: .8rem;
  line-height: 1.1rem;
  height: 1.75rem;
}

/* Textareas grow past the fixed height, so the height is released for them. */
html[data-density] .scan-details-page textarea.form-input {
  height: auto;
  min-height: 3rem;
}

html[data-density] .scan-details-page .form-input-bold { font-size: .85rem; }

html[data-density] .scan-details-page .form-group { margin-bottom: .35rem; }
html[data-density] .scan-details-page .form-label {
  font-size: .68rem;
  line-height: .9rem;
  margin-bottom: .2rem;
}

html[data-density] .scan-details-page .form-section { padding: .5rem; }
html[data-density] .scan-details-page .form-section-title { font-size: .68rem; }

html[data-density] .scan-details-page .btn {
  padding: .3rem .8rem;
  font-size: .8rem;
  line-height: 1.1rem;
  gap: .35rem;
}
html[data-density] .scan-details-page .btn-sm { padding: .2rem .6rem; font-size: .72rem; }

html[data-density] .scan-details-page .scan-details-btn {
  height: 30px;
  padding: 0 .7rem;
  gap: .35rem;
}
html[data-density] .scan-details-page .scan-details-nav-btn { height: 1.75rem; }
html[data-density] .scan-details-page .scan-details-amount-input,
html[data-density] .scan-details-page .scan-details-total-input { font-size: .9rem; }

/*
 * The rest of the scan details page.
 *
 * Several of these use !important, which is not a habit but the only lever
 * left: the page sets those sizes in style attributes on the element, and a
 * stylesheet cannot outrank one otherwise. The four that carried !important
 * inline could not be reached at all and were moved into classes instead.
 */

/* Top bar, header and tabs */
html[data-density] .scan-details-page .scan-details-topbar { padding: 5px; margin: 2px; height: 3rem; }
html[data-density] .scan-details-page .scan-details-header { padding: 4px; margin-bottom: .5rem; }
html[data-density] .scan-details-page .scan-details-header h2 { font-size: .95rem; }
html[data-density] .scan-details-page [style*="padding: 0.25rem"] { padding: .15rem !important; }
html[data-density] .scan-details-page [style*="padding: 0.5rem 1.5rem"] { padding: .3rem .9rem !important; }

/* The two "pick a counterparty" buttons */
html[data-density] .scan-details-page .select-seller-btn {
  height: 24px !important;
  padding: 2px 6px !important;
}

/* The currency box beside the totals heading */
html[data-density] .scan-details-page [style*="width: 80px"] {
  padding: .2rem .35rem !important;
}

/* The grand total, which states its own larger size */
html[data-density] .scan-details-page .form-input-large {
  font-size: .95rem;
  height: 2rem;
}

/* Line items */
html[data-density] .scan-details-page .line-items-header { padding: 4px; }
html[data-density] .scan-details-page .line-items-wrap { padding: 4px; }
html[data-density] .scan-details-page .line-items-wrap th { padding: .25rem .4rem; font-size: .68rem; }
html[data-density] .scan-details-page .line-items-wrap td { padding: .2rem .3rem; }

/* Footer */
html[data-density] .scan-details-page .scan-details-footer { margin: 2px !important; }
html[data-density] .scan-details-page .scan-details-footer-inner { padding: 5px !important; gap: .5rem; }
html[data-density] .scan-details-page .scan-details-checkbox-label { padding: .2rem .5rem; gap: .35rem; }
html[data-density] .scan-details-page .scan-details-checkbox-text-bottom { font-size: .68rem; }
html[data-density] .scan-details-page .scan-details-buttons { gap: .35rem; }

/* The settings menu that drops from the top bar */
html[data-density] .scan-details-page [style*="padding: 0.75rem"] { padding: .4rem !important; }

/*
 * The totals in the footer.
 *
 * These are declared in the page's own scoped styles and restate their width
 * at three breakpoints, so setting the type size alone left the boxes as wide
 * as before. Width and padding are given here too.
 */
html[data-density] .scan-details-page .scan-details-amount-input,
html[data-density] .scan-details-page .scan-details-total-input {
  padding: 3px 7px;
  font-size: 13px;
  width: 110px;
}

/* The grand total stays a step larger than the VAT beside it — it is the
   figure being checked against the document. */
html[data-density] .scan-details-page .scan-details-total-input {
  font-size: 15px;
  width: 130px;
}

@media (min-width: 1301px) {
  html[data-density] .scan-details-page .scan-details-amount-input { width: 130px; }
  html[data-density] .scan-details-page .scan-details-total-input { width: 150px; }
}

html[data-density] .scan-details-page .scan-details-currency { font-size: 12px; }
html[data-density] .scan-details-page .scan-details-label { font-size: 9px; }
html[data-density] .scan-details-page .scan-details-amount-container { gap: 0; }
html[data-density] .scan-details-page .scan-details-amount-container > div { gap: .3rem; }

/* The same 16px square the dashboard's checkboxes use, so the two read as
   one control rather than two sizes of the same thing. The tick inside comes
   down with it, and its offset with it, or it would sit off-centre. */
html[data-density] .scan-details-page .scan-details-checkbox-container,
html[data-density] .scan-details-page .scan-details-checkbox {
  width: 1rem;
  height: 1rem;
}

html[data-density] .scan-details-page .scan-details-checkbox-icon {
  font-size: .6rem;
  left: .2rem;
}

/*
 * The footer's own height.
 *
 * Its two rows are what set it: the one holding the verify box, and the one
 * holding the totals. Only the heights come down here — the verify box keeps
 * flex: 1 and stays stretched across the row, because taking that away moved
 * it and that was not the problem.
 */
html[data-density] .scan-details-page .scan-details-checkbox-label { height: 32px; }
html[data-density] .scan-details-page .scan-details-footer-inner { padding: 4px !important; gap: .35rem; }
html[data-density] .scan-details-page .scan-details-nav-buttons { gap: .25rem; }

/* The footer is pinned to 175px on wide screens, which is the empty space
   under the buttons: the content no longer fills it. Let it hug what it
   holds instead. */
@media (min-width: 1024px) {
  html[data-density] .scan-details-page .scan-details-footer {
    height: auto;
    min-height: 0;
  }
}

/*
 * Warning banners on one line.
 *
 * .warning-content stacks its heading above its text, which costs a whole
 * line per banner for a sentence that fits beside it. Laid out in a row
 * instead, wrapping only when the text genuinely runs out of width.
 */
html[data-density] .home-page .warning-content {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

/* A banner's expandable list is a block of its own and must not try to sit
   beside the sentence. */
html[data-density] .home-page .warning-content > .warning-details {
  flex-basis: 100%;
  margin-top: 4px;
}

/* The components now carry these sizes for every theme, so the only thing
   left here is the slightly tighter margin. */
html[data-density] .home-page .invalid-vat-warning-banner,
html[data-density] .home-page .validation-warning-banner,
html[data-density] .home-page .total-mismatch-warning-banner {
  margin-bottom: 8px;
}

/*
 * The company picker above the table never looks idle.
 *
 * It is marked .active-filter whenever a company is chosen — and one always
 * is, since the dashboard cannot be used without one. So the highlight was on
 * permanently and said nothing; it only read as "this field is selected".
 * Here it is left plain, like any other field.
 *
 * The filter row's own company picker keeps the highlight: there a choice is
 * genuinely optional and the mark earns its place.
 */
html[data-density] .home-page .company-selector-group .company-selector.active-filter .selector-input:not(.open) {
  border: 1px solid var(--border);
  background: #fff;
}

/*
 * The scan rows, a quarter smaller.
 *
 * The spacing takes the full 25%; the type takes about a pixel. A quarter off
 * an 11px label leaves 8px, which is not a smaller label but an unreadable
 * one — and these rows hold invoice numbers and sums that get checked against
 * a document.
 *
 * Every line height the component states is already a whole number, and the
 * sizes below keep the row's total on one too, so the hairline between rows
 * stays on a device pixel and keeps painting.
 */
html[data-density] .home-page .scan-row { padding: 10px 18px; }
html[data-density] .home-page .table-headers { padding: 9px 18px; }

html[data-density] .home-page .scan-thumbnail { width: 38px; height: 38px; }
html[data-density] .home-page .scan-status { padding: 3px 8px; font-size: 10px; gap: 4px; }

html[data-density] .home-page .scan-info { gap: 4px; }
html[data-density] .home-page .invoice-header { gap: 9px; }
html[data-density] .home-page .invoice-number { font-size: 14px; }
html[data-density] .home-page .invoice-date { font-size: 12px; }
html[data-density] .home-page .invoice-type { font-size: 10px; padding: 2px 5px; }
html[data-density] .home-page .invoice-details { gap: 4px; font-size: 12px; }
html[data-density] .home-page .company-text { font-size: 13px; }
html[data-density] .home-page .invoice-tax-id-inline { font-size: 12px; }
html[data-density] .home-page .type-select { height: 24px; font-size: 11px; padding: 3px 9px; padding-right: 24px; }

html[data-density] .home-page .invoice-amount { gap: 4px; }
html[data-density] .home-page .amount-value { font-size: 17px; }
html[data-density] .home-page .amount-currency { font-size: 13px; }
html[data-density] .home-page .invoice-vat { font-size: 12px; }
html[data-density] .home-page .invoice-payment { font-size: 10px; }

html[data-density] .home-page .scan-actions { gap: 6px; }
html[data-density] .home-page .btn-action,
html[data-density] .home-page .btn-view {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

/* The placeholder a row gets while it is still off-screen, matched to what it
   now measures so the list does not jump as it scrolls. */
html[data-density] .home-page .scan-row { contain-intrinsic-size: auto 88px; }

/*
 * The company's details under its name — a stacked list of small pairs, each
 * line centred on the card. The layout itself is in Home.vue; what this
 * density changes is how tight the lines sit.
 */
html[data-density] .home-page .company-name-badge {
  gap: 8px;
}

html[data-density] .home-page .company-details {
  gap: 2px;
}

html[data-density] .home-page .company-detail {
  font-size: 11px;
  line-height: 14px;
}

html[data-density] .home-page .company-detail-label {
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

html[data-density] .home-page .company-detail-value {
  color: var(--text-secondary);
}

/* The bar's side padding, matched to the page's.
 *
 * Both are capped at 1400px, but the bar pads 32px and the page 16px here, so
 * the icons sat further in than everything below them. Same number, same edge.
 */
html[data-density] .nav-container {
  padding: 0 16px;
}

/* ------------------------------------------------------------------
 * Companies page
 *
 * Spacing takes the full cut; type takes a pixel or two. A quarter off an
 * 11px label is unreadable, and these cards carry VAT numbers and addresses
 * that get checked against documents.
 *
 * Scoped to .companies-page, so the generic names below — .btn, .form-group,
 * .modal-header — reach only this page.
 * ------------------------------------------------------------------ */

html[data-density] .companies-page { padding: 12px 16px; }

/* Header */
html[data-density] .companies-page .page-title { font-size: 20px; margin-bottom: 3px; }
html[data-density] .companies-page .page-subtitle { font-size: 12px; }
html[data-density] .companies-page .btn-settings { padding: 4px 10px; font-size: 12px; gap: 6px; }
html[data-density] .companies-page .btn-create { padding: 5px 12px; font-size: 13px; gap: 6px; }
html[data-density] .companies-page .search-input { padding: 6px 12px 6px 32px; font-size: 13px; }
html[data-density] .companies-page .header-actions { gap: 8px; }

/* Cards */
html[data-density] .companies-page .companies-grid { gap: 12px; }
html[data-density] .companies-page .company-card { padding: 12px; }
html[data-density] .companies-page .company-name { font-size: 15px; }
html[data-density] .companies-page .inactive-label { padding: 2px 7px; font-size: 10px; }
html[data-density] .companies-page .company-details { gap: 4px; }
html[data-density] .companies-page .detail-row { gap: 6px; }
html[data-density] .companies-page .detail-label,
html[data-density] .companies-page .detail-value { font-size: 12px; }
/* Only the size here. How they are drawn — hairline border, no fill, the
   mark in colour — belongs to Companies.vue, where the page's other quiet
   actions are drawn the same way. */
html[data-density] .companies-page .company-actions .btn-icon {
  width: 24px;
  height: 24px;
  padding: 0;
}

html[data-density] .companies-page .company-actions { gap: 6px; }

/* Empty and loading */
html[data-density] .companies-page .loading-state,
html[data-density] .companies-page .empty-state { padding: 36px 20px; }
html[data-density] .companies-page .btn-primary { padding: 7px 18px; font-size: 13px; }

/* Settings panel */
html[data-density] .companies-page .settings-section-header { padding: 10px 14px; }
html[data-density] .companies-page .settings-section-title { font-size: 15px; gap: 8px; }
html[data-density] .companies-page .btn-close-settings { padding: 4px 10px; font-size: 12px; }
html[data-density] .companies-page .settings-section-body { padding: 12px; gap: 8px; }
html[data-density] .companies-page .settings-card { padding: 10px; gap: 10px; }
html[data-density] .companies-page .settings-card-left { gap: 10px; }
html[data-density] .companies-page .settings-icon { width: 28px; height: 28px; font-size: 13px; }
html[data-density] .companies-page .settings-gear-btn { width: 26px; height: 26px; }

/* The settings dialogs, which are teleported out of the page but belong to
   it — named one by one so no other modal is caught. */
html[data-density] .modal-container .modal-header { padding: 10px 14px; }
html[data-density] .modal-container .modal-title { font-size: 14px; }
html[data-density] .modal-container .modal-body { padding: 12px; }
html[data-density] .modal-container .modal-footer { padding: 8px 14px; gap: 8px; }
html[data-density] .modal-container .form-group { margin-bottom: 8px; font-size: 12px; }
html[data-density] .modal-container .form-control { padding: 5px 9px; font-size: 13px; }
html[data-density] .modal-container .btn { padding: 5px 14px; font-size: 13px; }
/* ------------------------------------------------------------------
 * Tabular
 *
 * Only the list of documents changes here. Everything else keeps the
 * compact sizes above — the point of this setting is to read the rows the
 * way a spreadsheet is read, not to squeeze the whole screen again.
 *
 * Nothing is dropped from a row either. What changes is that its fields
 * stop stacking: a row becomes one line, and the header above shares the
 * same column template, so each heading sits over the values it names.
 * ------------------------------------------------------------------ */

html[data-density='tabular'] .home-page .scan-row { padding: 5px 14px; }
html[data-density='tabular'] .home-page .table-headers { padding: 6px 14px; }
html[data-density='tabular'] .home-page .date-separator { padding: 3px 14px; }

html[data-density='tabular'] .home-page .table-headers,
html[data-density='tabular'] .home-page .scan-row {
  display: grid;
  /* The amount column carries three things side by side — the sum, its VAT
     and the payment method — so it is the one that needs real width. */
  /* No thumbnail column: at this density the preview was too small to tell
     one document from another, so it earned none of the width. */
  grid-template-columns: 15px 76px minmax(0, 1fr) 398px 76px;
  align-items: center;
  gap: 10px;
}

/* A row's children come in a different order than the header's — status is
   third in a row and fifth in the header — so they are reordered here
   rather than in the markup, which the other two densities still rely on. */
html[data-density='tabular'] .home-page .scan-checkbox,
html[data-density='tabular'] .home-page .header-checkbox { order: 1; }
html[data-density='tabular'] .home-page .scan-thumbnail,
html[data-density='tabular'] .home-page .header-thumbnail { order: 2; }
html[data-density='tabular'] .home-page .scan-info,
html[data-density='tabular'] .home-page .header-info { order: 3; }
html[data-density='tabular'] .home-page .invoice-amount-wrapper,
html[data-density='tabular'] .home-page .header-amount { order: 4; }
html[data-density='tabular'] .home-page .scan-status,
html[data-density='tabular'] .home-page .header-status { order: 2; }
html[data-density='tabular'] .home-page .scan-actions,
html[data-density='tabular'] .home-page .header-actions { order: 6; }

html[data-density='tabular'] .home-page .scan-thumbnail,
html[data-density='tabular'] .home-page .header-thumbnail { display: none; }

/* The three stacked lines of a row become one. */
html[data-density='tabular'] .home-page .scan-info {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

html[data-density='tabular'] .home-page .invoice-header { flex-shrink: 0; gap: 6px; }

/* The company name has no natural length, so it is what gives way when the
   row runs out of width. */
html[data-density='tabular'] .home-page .invoice-details {
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
}

html[data-density='tabular'] .home-page .company-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-density='tabular'] .home-page .invoice-type-selector { flex-shrink: 0; }
html[data-density='tabular'] .home-page .type-select { height: 20px; padding: 1px 6px; padding-right: 18px; }

/* The amount, its VAT and the payment method, in a line and pushed right. */
html[data-density='tabular'] .home-page .invoice-amount-wrapper {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

html[data-density='tabular'] .home-page .invoice-amount {
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

/* Figures never wrap. A sum broken over two lines is unreadable, and it was
   what set the height of every row. */
html[data-density='tabular'] .home-page .invoice-amount,
html[data-density='tabular'] .home-page .amount-value,
html[data-density='tabular'] .home-page .amount-currency,
html[data-density='tabular'] .home-page .invoice-vat,
html[data-density='tabular'] .home-page .invoice-payment {
  white-space: nowrap;
  max-width: none;
  flex-shrink: 0;
  line-height: 1.2;
}

/* The actions sit at the right edge of their column in both rows, so the
   heading lands over the buttons. */
html[data-density='tabular'] .home-page .scan-actions,
html[data-density='tabular'] .home-page .header-actions {
  justify-self: end;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
  gap: 4px;
}

/* Smaller mark, smaller button. The component asks for 14px but the
   component's own stylesheet pins every action glyph to 16, so the size is
   restated here — for this density only, so the other two keep theirs. */
html[data-density='tabular'] .home-page .btn-action,
html[data-density='tabular'] .home-page .btn-view {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

html[data-density='tabular'] .home-page .btn-action svg {
  width: 14px;
  height: 14px;
}

/* Hovering shifts a row's padding on the other densities, which in a grid
   would nudge every column. A left edge marks it instead. */
html[data-density='tabular'] .home-page .scan-row:hover,
html[data-density='tabular'] .home-page .scan-row.selected {
  border-left: none;
  padding-left: 14px;
  box-shadow: inset 3px 0 0 0 #2b82f0;
}

/* A one-line row no longer needs the taller placeholder reserved for it
   while it is off-screen. */
html[data-density='tabular'] .home-page .scan-row { contain-intrinsic-size: auto 42px; }

/* Each field keeps the same slot on every row.
 *
 * Laid out by content, the parts started wherever the one before them ended —
 * a long invoice number pushed that row's company name right, a short one
 * pulled it left, and nothing lined up down the page. Fixed widths give each
 * field a column of its own.
 *
 * The widths sit on the parts rather than on their children, because several
 * of those children are conditional: a row with no VAT number or no warning
 * would otherwise shift everything after it.
 */
html[data-density='tabular'] .home-page .scan-info { overflow: hidden; }

html[data-density='tabular'] .home-page .invoice-header {
  width: 292px;
  flex-shrink: 0;
  gap: 8px;
}

html[data-density='tabular'] .home-page .invoice-number {
  width: 112px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-density='tabular'] .home-page .invoice-date {
  width: 88px;
  flex-shrink: 0;
  white-space: nowrap;
}

html[data-density='tabular'] .home-page .invoice-type {
  width: 68px;
  flex-shrink: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The counterparty takes what is left; its VAT number is a fixed field after
   it, so the two do not trade places from row to row. */
html[data-density='tabular'] .home-page .invoice-details {
  flex: 1 1 auto;
  min-width: 0;
}

html[data-density='tabular'] .home-page .company-text {
  flex: 1 1 auto;
  min-width: 0;
}

html[data-density='tabular'] .home-page .invoice-tax-id-inline {
  width: 116px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

html[data-density='tabular'] .home-page .invoice-type-selector { width: 74px; }
html[data-density='tabular'] .home-page .type-select { width: 100%; }

/* The same on the money side: sum, its VAT and the payment method each hold
   a slot, so the figures stack cleanly down the column. */
html[data-density='tabular'] .home-page .invoice-amount {
  width: 104px;
  justify-content: flex-end;
}

html[data-density='tabular'] .home-page .invoice-vat {
  width: 112px;
  justify-content: flex-end;
}

html[data-density='tabular'] .home-page .invoice-payment {
  width: 108px;
  justify-content: flex-start;
  overflow: hidden;
}

/* A warning marks a row without moving it.
 *
 * The stripe down the left of a flagged row is a border, which takes width
 * from the row and pushes every field in it 4px right. On a grid that breaks
 * the alignment of the whole column — the flagged rows sat 4px off the clean
 * ones. An inset shadow draws the same stripe and occupies nothing.
 */
html[data-density='tabular'] .home-page .scan-row,
html[data-density='tabular'] .home-page .scan-row:hover,
html[data-density='tabular'] .home-page .scan-row.selected {
  border-left: 0 !important;
  padding-left: 14px !important;
}

html[data-density='tabular'] .home-page .scan-row.has-warning,
html[data-density='tabular'] .home-page .scan-row.has-total-mismatch {
  box-shadow: inset 3px 0 0 0 #ffc107;
}

html[data-density='tabular'] .home-page .scan-row.has-zero-value-line {
  box-shadow: inset 3px 0 0 0 #d97706;
}

html[data-density='tabular'] .home-page .scan-row.has-invalid-vat {
  box-shadow: inset 3px 0 0 0 #ef4444;
}

html[data-density='tabular'] .home-page .scan-row.has-company-warning {
  box-shadow: inset 3px 0 0 0 #dc2626;
}

html[data-density='tabular'] .home-page .scan-row.is-checked {
  box-shadow: inset 3px 0 0 0 #10b981;
}

/* Hovering or selecting takes over the stripe, so the row still answers to
   the pointer even when it is already flagged. */
html[data-density='tabular'] .home-page .scan-row:hover,
html[data-density='tabular'] .home-page .scan-row.selected {
  box-shadow: inset 3px 0 0 0 #2b82f0;
}

/* The money column, laid out rather than packed.
 *
 * The sum, its VAT and the payment method were given fixed widths that came
 * to more than the column held. With nothing allowed to shrink and the lot
 * pushed to the right, the overflow spilled out of the left-hand side and
 * landed on top of the type selector next to it.
 *
 * A grid inside the cell instead: three tracks that share exactly the width
 * there is, so the figures still line up down the page and nothing escapes.
 */
html[data-density='tabular'] .home-page .invoice-amount-wrapper {
  display: grid;
  align-items: baseline;
  gap: 12px;
  width: 100%;
}

html[data-density='tabular'] .home-page .invoice-amount {
  width: auto;
  min-width: 0;
  justify-content: flex-end;
}

html[data-density='tabular'] .home-page .invoice-vat {
  width: auto;
  min-width: 0;
  justify-content: flex-end;
}

html[data-density='tabular'] .home-page .invoice-payment {
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  overflow: hidden;
}

html[data-density='tabular'] .home-page .amount-value,
html[data-density='tabular'] .home-page .amount-currency,
html[data-density='tabular'] .home-page .invoice-vat > *,
html[data-density='tabular'] .home-page .invoice-payment > * {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Everything on a row sits on its middle.
 *
 * The fields were a few pixels apart vertically: the invoice number, date and
 * document type aligned to the top of their block, while the sum and its VAT
 * aligned on a shared baseline — which, with a 17px figure beside an 11px
 * label, puts the label's box lower than the middle of the row.
 *
 * A baseline is right when text of different sizes runs on in a sentence.
 * These are separate fields in separate slots, and there they read as
 * misaligned rather than as set on a line.
 */
html[data-density='tabular'] .home-page .invoice-header,
html[data-density='tabular'] .home-page .invoice-details,
html[data-density='tabular'] .home-page .invoice-amount-wrapper,
html[data-density='tabular'] .home-page .invoice-amount,
html[data-density='tabular'] .home-page .invoice-vat,
html[data-density='tabular'] .home-page .invoice-payment,
html[data-density='tabular'] .home-page .invoice-tax-id-inline {
  align-items: center;
}

/* The three badges and the select carry their own box heights, so they are
   levelled against the row rather than against the text beside them. */
html[data-density='tabular'] .home-page .invoice-type,
html[data-density='tabular'] .home-page .type-select,
html[data-density='tabular'] .home-page .scan-status {
  align-self: center;
}

/* The leftovers of the stacked layout.
 *
 * The header block carries 4px under it and the type selector 4px above —
 * the gaps between the three lines a row used to be. Side by side they do
 * nothing but push each block off the centre by half their own height, which
 * is exactly the 2.5px the fields were out by.
 */
html[data-density='tabular'] .home-page .invoice-header,
html[data-density='tabular'] .home-page .invoice-details,
html[data-density='tabular'] .home-page .invoice-type-selector,
html[data-density='tabular'] .home-page .invoice-amount,
html[data-density='tabular'] .home-page .invoice-vat,
html[data-density='tabular'] .home-page .invoice-payment {
  margin: 0;
}

/* A large sum must not break the grid — and must not be cut either.
 *
 * At seven figures the sum and its currency no longer fitted side by side,
 * the currency dropped to a second line and that row grew from 35px to 51.
 * Every row is its own grid, so a track that sizes to content would differ
 * from row to row; the width has to be a number, picked for the largest
 * figure worth planning for.
 *
 * Within that, the number itself never shrinks and never gets an ellipsis.
 * A truncated sum can be misread, and these are read against a document. If
 * something is long enough to run out of room, the currency gives way — it
 * is repeated in the VAT beside it.
 */
html[data-density='tabular'] .home-page .invoice-amount-wrapper {
  /* Each with room to spare rather than to the pixel: a figure that grows by
     one digit should not start disappearing. */
  grid-template-columns: 164px 134px 76px;
}

html[data-density='tabular'] .home-page .invoice-amount {
  flex-wrap: nowrap;
}

html[data-density='tabular'] .home-page .amount-value {
  flex-shrink: 0;
  overflow: visible;
  text-overflow: clip;
}

html[data-density='tabular'] .home-page .amount-currency {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smaller tick boxes.
 *
 * They were held at 16px as a click target while everything around them came
 * down; at this density they were the largest thing in the row's first
 * column. 13px still gives a 35px-tall row's worth of height to aim at,
 * since the whole cell takes the click.
 */
html[data-density='tabular'] .home-page .scan-checkbox .checkbox-input,
html[data-density='tabular'] .home-page .header-checkbox .checkbox-input,
html[data-density='tabular'] .home-page .date-checkbox,
html[data-density='tabular'] .home-page .checkbox-placeholder {
  width: 13px;
  height: 13px;
}

/* The cell itself stays as tall as the row, so a slightly smaller box is not
   a smaller target. */
html[data-density='tabular'] .home-page .scan-checkbox,
html[data-density='tabular'] .home-page .header-checkbox {
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* The headings sit over their own fields.
 *
 * The info column holds several fields in a line — number, date, document
 * type, counterparty, VAT number, income/expense — while its heading held two
 * labels sized by their own text and separated by a middot. They landed
 * wherever the words ended, not over the columns they name.
 *
 * The two labels are given the widths of the fields beneath them, and the
 * middot goes: a separator belongs between words, not between columns.
 */
html[data-density='tabular'] .home-page .header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

html[data-density='tabular'] .home-page .header-info .sortable-header:first-child {
  width: 112px;
  flex-shrink: 0;
}

html[data-density='tabular'] .home-page .header-info .sortable-header:last-child {
  width: 88px;
  flex-shrink: 0;
}

html[data-density='tabular'] .home-page .header-sep { display: none; }

/* "СУМА" over the figures, not over the left edge of their cell.
 *
 * The heading and the amount track did start at the same pixel, but the
 * figures are right-aligned within that track while the label sat at its
 * left — so they lined up only in the measurement, not to the eye.
 *
 * The heading is given the amount track's own width and pushed to its right
 * edge, where the digits end.
 */
html[data-density='tabular'] .home-page .header-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 164px;
  justify-self: start;
  text-align: right;
  gap: 4px;
}

/* The sum and its currency are one value, not two fields.
 *
 * Everything else on the row is levelled on its middle, and the sum was too —
 * which centred the small "EUR" against the tall figure and left it floating
 * above the digits' feet. A currency written after a number sits on the same
 * line as the number; that is a baseline, not a centre.
 *
 * The two are put back on a shared baseline, and the whole pair is then
 * centred in the row as one block, so the row stays level.
 *
 * The figure itself comes down a step as well. At 17px it was the largest
 * type on the page by some way, which is more weight than a column of sums
 * needs when every row carries one.
 */
html[data-density='tabular'] .home-page .invoice-amount {
  align-items: baseline;
  line-height: 1;
}

html[data-density='tabular'] .home-page .amount-value { font-size: 15px; }
html[data-density='tabular'] .home-page .amount-currency { font-size: 11px; }

/* The VAT cell, the same way.
 *
 * The label and its figure were pushed to the right edge of the cell as one
 * group, so "VAT:" landed wherever the number happened to start — further
 * right on a short figure than on a long one. Down a column of rows the
 * labels stepped in and out and the figures did not share an edge.
 *
 * The label is pinned to the left of the cell and the figure fills the rest
 * and ends at its right edge: one column of labels, one column of sums.
 *
 * The size comes down a step with the sum above it, so the VAT stays the
 * quieter of the two.
 */
html[data-density='tabular'] .home-page .invoice-vat {
  width: 100%;
  font-size: 11px;
}

html[data-density='tabular'] .home-page .vat-label {
  flex-shrink: 0;
}

html[data-density='tabular'] .home-page .vat-amount {
  flex: 1;
  min-width: 0;
  text-align: right;
}

/* One line of text across the whole row.
 *
 * Every cell was levelled on the middle of its box, which is not the same as
 * levelling the text in it: where a box is centred, its baseline sits half an
 * ascender below the middle, and an ascender is a share of the font size. So
 * the 15px sum came to rest about a pixel and a half below the 11px VAT and
 * two below the 10px payment method — boxes level, text not, which is what
 * the eye actually reads along a row.
 *
 * The row is aligned on the baseline instead, so the number, the sum, its VAT
 * and the payment method all sit on one line.
 *
 * What carries its own box rather than only text — the tick box, the status
 * badge, the type select and the action buttons — stays centred: a box is
 * levelled against the row, not hung from the text's baseline.
 */
html[data-density='tabular'] .home-page .scan-row {
  align-items: baseline;
}

html[data-density='tabular'] .home-page .scan-checkbox,
html[data-density='tabular'] .home-page .scan-status,
html[data-density='tabular'] .home-page .scan-actions,
html[data-density='tabular'] .home-page .invoice-type,
html[data-density='tabular'] .home-page .invoice-type-selector,
html[data-density='tabular'] .home-page .type-select {
  align-self: center;
}

html[data-density='tabular'] .home-page .invoice-amount-wrapper,
html[data-density='tabular'] .home-page .invoice-vat,
html[data-density='tabular'] .home-page .invoice-payment {
  align-items: baseline;
}

/* The card icon is a picture, not a letter.
 *
 * On a baseline it has none of its own, so it is hung by the bottom of its
 * box — which left it riding three pixels above the words it belongs to.
 * It is pushed back down onto the middle of the text.
 *
 * Shifted rather than aligned: the cell takes its own baseline from its first
 * child, so centring the icon in the box would hand the row the icon's edge
 * instead of the text's line, and the words would go off the row to fix the
 * icon. A relative offset moves the picture and leaves the line where it is.
 */
html[data-density='tabular'] .home-page .invoice-payment > svg {
  position: relative;
  top: 3px;
}

/* Light headings.
 *
 * At 700 the headings were bolder than the rows they name, and a heading does
 * not need weight to be found: it is already set apart by being small, grey,
 * uppercase and letter-spaced. Dropped to a regular weight, it labels the
 * column instead of competing with it.
 */
html[data-density='tabular'] .home-page .table-headers {
  font-weight: 400;
}

/* The badge is the word, not the column.
 *
 * It was stretched across the whole status track, so "Готово" sat in the
 * middle of a slab of green with half the block empty either side. It now
 * sizes to its own text.
 *
 * The track keeps its width, because the longest status in any of the five
 * languages still has to live there — Greek's "Αρχειοθετημένα" measures
 * 75px against English's "Archived" at 43. It is capped at the track and
 * given an ellipsis, so in that one case the word is shortened rather than
 * allowed to climb into the invoice number beside it.
 *
 * The heading comes to the badge's edge with it: it was centred over a block
 * that filled the column, and there is no such block any more.
 */
html[data-density='tabular'] .home-page .scan-status {
  justify-self: start;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 2px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}

html[data-density='tabular'] .home-page .header-status.sortable-header {
  justify-content: flex-start;
}

/* ------------------------------------------------------------------
 * The totals, on a wide screen: one line.
 *
 * The density sizes above are written for the stacked card — a heading with
 * a margin under it, a currency band inset into the card's padding, rows
 * with their own padding. On a wide screen ScansTable lays the same parts
 * out as one line of captions and figures, and those margins are what kept
 * the band at twice the height of its own text.
 *
 * Same breakpoint as the phone layout, so the two never both apply.
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
  html[data-density] .home-page .totals-summary { padding: 11px 20px; }
  html[data-density] .home-page .totals-label { font-size: 10px; margin: 0; }
  html[data-density] .home-page .totals-container { gap: 28px; }
  html[data-density] .home-page .currency-group { padding: 0; min-width: 0; flex: 1 1 auto; }
  html[data-density] .home-page .currency-header { font-size: 10px; padding: 0; margin: 0; }
  html[data-density] .home-page .total-item { padding: 0; }
  html[data-density] .home-page .total-label,
  html[data-density] .home-page .total-grand .total-label { font-size: 10px; }
  html[data-density] .home-page .total-value { font-size: 14px; }
  html[data-density] .home-page .total-grand .total-value { font-size: 16px; }
}

/* ── The VAT label travels with its figure ─────────────────────────────
 *
 * The label was pinned to the left of its cell and the figure to the right,
 * so the labels shared an edge down the page. That also held the cell open
 * across the gap between the two, and the width came out of the counterparty
 * column next to it — the part of the row that is actually read, and the part
 * that was losing the end of a company's name.
 *
 * The two now sit together at the right of the cell. The figures keep the
 * edge they shared; only the label's left edge moves, and it moves with the
 * number it belongs to, which is where it reads as its label rather than as a
 * column heading. The cell is then only as wide as the pair needs, and the
 * difference goes to the name.
 * ------------------------------------------------------------------ */
html[data-density='tabular'] .home-page .invoice-vat {
  justify-content: flex-end;
}

html[data-density='tabular'] .home-page .vat-amount {
  /* Beside the label rather than filling the cell. It may still give way on
     an unusually long figure, which is why the ellipsis stays. */
  flex: 0 1 auto;
  text-align: right;
}

html[data-density='tabular'] .home-page .invoice-amount-wrapper {
  /* The label (24px), its gap and a figure the size of "240,938.60 EUR"
     (85px): 118px holds the pair with a little to spare, against 134px when
     the two stood at opposite edges. */
  grid-template-columns: 164px 118px 76px;
}

/* And the row's own column comes down with it.
 *
 * The amount column is a fixed track in the row's grid, so narrowing the
 * cells inside it only moved them about within the same 398px — the name
 * beside it gained nothing. The track is set to what the three cells and
 * their two gaps now measure (164 + 118 + 76 + 24), and the 16px goes to
 * the counterparty, which is the column that was running out. */
html[data-density='tabular'] .home-page .table-headers,
html[data-density='tabular'] .home-page .scan-row {
  grid-template-columns: 15px 76px minmax(0, 1fr) 382px 76px;
}

.container[data-v-5b15bdfa] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.navbar[data-v-5b15bdfa] {
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.nav-content[data-v-5b15bdfa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.nav-logo[data-v-5b15bdfa] {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-links[data-v-5b15bdfa] {
  display: flex;
  align-items: center;
  gap: 32px;
}
.mobile-menu-btn[data-v-5b15bdfa] {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s ease;
}
.mobile-menu-btn[data-v-5b15bdfa]:hover {
  color: #1e293b;
}
.nav-link[data-v-5b15bdfa] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-link[data-v-5b15bdfa]:hover {
  color: #1e293b;
}
.nav-icon[data-v-5b15bdfa] {
  font-size: 16px;
}
.nav-actions[data-v-5b15bdfa] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.language-selector[data-v-5b15bdfa] {
  position: relative;
}
.language-btn[data-v-5b15bdfa] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 40px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
}
.language-btn[data-v-5b15bdfa]:hover {
  background: #f8fafc;
  border-color: #0ea5e9;
  color: #0ea5e9;
}
.language-dropdown[data-v-5b15bdfa] {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  overflow: hidden;
  z-index: 1000;
}
.language-dropdown button[data-v-5b15bdfa] {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: none;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.language-dropdown button[data-v-5b15bdfa]:hover {
  background: #f8fafc;
  color: #1e293b;
}
.language-dropdown button.active[data-v-5b15bdfa] {
  background: #eff6ff;
  color: #0ea5e9;
  font-weight: 600;
}
.btn-contact-sales[data-v-5b15bdfa] {
  display: inline-block;
  padding: 8px 20px;
  background: transparent;
  color: #0ea5e9;
  border: 2px solid #0ea5e9;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-left: 8px;
}
.btn-contact-sales[data-v-5b15bdfa]:hover {
  background: #0ea5e9;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-nav-login[data-v-5b15bdfa] {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  color: white;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}
.btn-nav-login[data-v-5b15bdfa]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
@media (max-width: 1024px) {
.mobile-menu-btn[data-v-5b15bdfa] {
    display: block;
}
.desktop-cta[data-v-5b15bdfa] {
    display: none;
}
.nav-links[data-v-5b15bdfa] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #e2e8f0;
}
.nav-links.mobile-open[data-v-5b15bdfa] {
    display: flex;
}
.nav-link[data-v-5b15bdfa] {
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
}
.nav-link[data-v-5b15bdfa]:hover {
    background: #f8fafc;
}
}
@media (max-width: 768px) {
.nav-content[data-v-5b15bdfa] {
    padding: 12px 0;
}
}

.container[data-v-89dea43f] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.container[data-v-89dea43f]::before,
.container[data-v-89dea43f]::after {
  content: none;
}
.footer[data-v-89dea43f] {
  padding: 80px 0 40px;
  background: #1e293b;
  color: white;
  overflow: hidden;
  position: relative;
}
.footer[data-v-89dea43f]::before {
  content: none;
}
.footer[data-v-89dea43f]::after {
  content: none;
}
.footer-content[data-v-89dea43f] {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  margin-bottom: 60px;
}
.footer-left[data-v-89dea43f] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-logo[data-v-89dea43f] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-description[data-v-89dea43f] {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  font-size: 15px;
  margin: 0;
}
.footer-social[data-v-89dea43f] {
  display: flex;
  gap: 12px;
}
.social-icon[data-v-89dea43f] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  text-decoration: none;
}
.social-icon[data-v-89dea43f]:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}
.footer-links-grid[data-v-89dea43f] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer-column[data-v-89dea43f] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-heading[data-v-89dea43f] {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: white;
}
.footer-links[data-v-89dea43f] {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li[data-v-89dea43f] {
  margin-bottom: 10px;
}
.footer-links a[data-v-89dea43f],
.footer-links span[data-v-89dea43f] {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}
.footer-links a[data-v-89dea43f]:hover {
  color: white;
}
.footer-divider[data-v-89dea43f] {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 40px;
}
.footer-bottom[data-v-89dea43f] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}
.footer-bottom p[data-v-89dea43f] {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-legal-links[data-v-89dea43f] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.footer-legal-links a[data-v-89dea43f] {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-legal-links a[data-v-89dea43f]:hover {
  color: rgba(255, 255, 255, 1);
}
.footer-legal-links .separator[data-v-89dea43f] {
  color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 1024px) {
.footer-content[data-v-89dea43f] {
    grid-template-columns: 1fr;
    gap: 40px;
}
.footer-links-grid[data-v-89dea43f] {
    grid-template-columns: repeat(2, 1fr);
}
}

.faq-section[data-v-2a638e23] {
    padding: 80px 0;
    background: white;
    text-align: center;
}
.faq-section .section-title[data-v-2a638e23] {
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 16px 0;
    color: #1e293b;
}
.faq-section .section-subtitle[data-v-2a638e23] {
    font-size: 20px;
    color: #64748b;
    margin: 0 auto 30px auto;
    max-width: 700px;
}
.faq-list[data-v-2a638e23] {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 10px;
}
.faq-item[data-v-2a638e23] {
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-item[data-v-2a638e23]:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-item.active[data-v-2a638e23] {
    border-color: #0ea5e9;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15);
}
.faq-question[data-v-2a638e23] {
    width: 100%;
    padding: 24px 28px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
    transition: all 0.3s ease;
}
.faq-question[data-v-2a638e23]:hover {
    color: #0ea5e9;
}
.faq-item.active .faq-question[data-v-2a638e23] {
    color: #0ea5e9;
}
.faq-icon[data-v-2a638e23] {
    color: #64748b;
    font-size: 16px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
}
.faq-item.active .faq-icon[data-v-2a638e23] {
    color: #0ea5e9;
}
.faq-answer[data-v-2a638e23] {
    padding: 0 28px 24px 28px;
    color: #475569;
    font-size: 16px;
    line-height: 1.7;
    animation: slideDown-2a638e23 0.3s ease;
}
.faq-answer p[data-v-2a638e23] {
    margin: 0;
}
@keyframes slideDown-2a638e23 {
from {
        opacity: 0;
        transform: translateY(-10px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
@media (max-width: 768px) {
.faq-question[data-v-2a638e23] {
        font-size: 16px;
        padding: 20px 20px;
}
.faq-answer[data-v-2a638e23] {
        padding: 0 20px 20px 20px;
        font-size: 15px;
}
}

/* ============================================================
   CONTIANT-INSPIRED — light, airy, rounded pastel cards,
   violet accent, dark navy CTA cards, generous whitespace.
   ============================================================ */
.landing-page[data-v-a08971ce] {
  --bg: #f4f3f8;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --violet: #2b82f0;
  --violet-hover: #1a6fdc;
  --lav: #dcd2f5;
  --peach: #e7d4c9;
  --mint: #cfe4dd;
  --skyblue: #c9def4;
  --dark: #1b2430;
  --line: rgba(31, 41, 51, 0.08);
  --radius: 28px;
  --radius-sm: 18px;
  --pill: 999px;
  --shadow: 0 24px 60px -34px rgba(31, 41, 51, 0.3);

  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
.container[data-v-a08971ce] { max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.section-title[data-v-a08971ce] {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--ink);
}
.section-subtitle[data-v-a08971ce] {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}

/* Scroll-reveal — fades/rises in on scroll down, reverses on scroll up */
.reveal[data-v-a08971ce] {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in-view[data-v-a08971ce] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal[data-v-a08971ce] { opacity: 1 !important; transform: none !important;
}
}

/* shared pill button */
.btn-hero[data-v-a08971ce], .btn-cta[data-v-a08971ce] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  border: 1px solid transparent;
}
.btn-hero.btn-primary[data-v-a08971ce], .btn-cta.btn-primary[data-v-a08971ce] {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(43, 130, 240, 0.7);
}
.btn-hero.btn-primary[data-v-a08971ce]::after, .btn-cta.btn-primary[data-v-a08971ce]::after,
.btn-hero.btn-secondary[data-v-a08971ce]::after {
  content: '→';
  font-size: 1.05em;
  transition: transform 0.2s ease;
}
.btn-hero.btn-primary[data-v-a08971ce]:hover, .btn-cta.btn-primary[data-v-a08971ce]:hover {
  background: var(--violet-hover);
  transform: translateY(-2px);
}
.btn-hero.btn-primary[data-v-a08971ce]:hover::after, .btn-cta.btn-primary[data-v-a08971ce]:hover::after { transform: translateX(4px);
}
.btn-hero.btn-secondary[data-v-a08971ce] {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-hero.btn-secondary[data-v-a08971ce]:hover { transform: translateY(-2px); border-color: rgba(31,41,51,0.2);
}
.btn-hero.btn-secondary[data-v-a08971ce]:hover::after { transform: translateX(4px);
}

/* ===================== HERO ===================== */
.hero-section[data-v-a08971ce] { position: relative; padding: 56px 0 60px; background: transparent; overflow: clip; overflow-clip-margin: 140px;
}
.mobile-hero-cta[data-v-a08971ce] { display: none;
}
.hero-content[data-v-a08971ce] { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: end;
}
.hero-content--imgleft[data-v-a08971ce] { grid-template-columns: 0.95fr 1.05fr;
}
.hero-content--imgleft .hero-image img[data-v-a08971ce] { margin-left: 0; margin-right: auto;
}
.hero-content > .hero-text[data-v-a08971ce] { align-self: center; padding-bottom: 70px;
}
.hero-kicker[data-v-a08971ce] {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 18px;
}
.hero-title[data-v-a08971ce] {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 6px;
}
.hero-underline[data-v-a08971ce] {
  display: block;
  width: 220px;
  height: 12px;
  margin: 0 0 26px;
  background: var(--violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12'%3E%3Cpath d='M3 8 C 55 3, 110 10, 165 5 S 213 4, 217 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12'%3E%3Cpath d='M3 8 C 55 3, 110 10, 165 5 S 213 4, 217 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.hero-trust[data-v-a08971ce] { display: flex; flex-direction: column; gap: 14px; margin-top: 38px;
}
.hero-trust-label[data-v-a08971ce] { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted);
}
.hero-logos[data-v-a08971ce] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hlogo[data-v-a08971ce] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 30px; padding: 0 12px;
  border-radius: 8px; background: rgba(31,41,51,0.05);
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: rgba(31,41,51,0.45);
}
.hero-subtitle[data-v-a08971ce] {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--muted);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0 0 32px;
}
.hero-buttons[data-v-a08971ce] { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.hero-image[data-v-a08971ce] { align-self: end;
}
.hero-image-mobile[data-v-a08971ce] { display: none;
}
.hero-image-desktop[data-v-a08971ce] { display: block;
}
.hero-image img[data-v-a08971ce] {
  width: 100%;
  max-width: 468px;
  height: auto;
  margin-left: auto;
  display: block;
  filter: drop-shadow(0 40px 60px rgba(31, 41, 51, 0.22));
}
/* anchor the hand+phone to the very bottom edge so it reads as "rising from below" */
.hero-image-desktop .hero-visual[data-v-a08971ce] { align-items: center; margin-bottom: 0;
}

/* Hero floating UI cards (Contiant-style scene) */
.hero-visual[data-v-a08971ce] { position: relative; display: flex; justify-content: center;
}
.hfloat[data-v-a08971ce] {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 22px 50px -18px rgba(31, 41, 51, 0.28), 0 0 0 1px rgba(31, 41, 51, 0.04);
  z-index: 3;
  animation: hfloatY-a08971ce 6s ease-in-out infinite;
}
.hfloat-txt[data-v-a08971ce] { display: flex; flex-direction: column; line-height: 1.15;
}
.hfloat-txt b[data-v-a08971ce] { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.hfloat-txt i[data-v-a08971ce] { font-size: 12.5px; font-style: normal; color: var(--muted);
}
.hfloat-ico[data-v-a08971ce] {
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0;
}
.hfloat-ico.ok[data-v-a08971ce] { background: #22a06b;
}
.hfloat-ico.blue[data-v-a08971ce] { background: var(--violet);
}
.hfloat-ico.acc[data-v-a08971ce] { background: #f59e0b;
}
.hfloat-acc[data-v-a08971ce] { font-size: 14px; font-weight: 600; color: var(--ink);
}
.hfloat-dot[data-v-a08971ce] { width: 9px; height: 9px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px rgba(34, 160, 107, 0.15);
}
.hfloat-result[data-v-a08971ce] { bottom: 12%; left: -6%; animation-delay: -1s;
}
.hfloat-acc[data-v-a08971ce] { top: 40%; right: -2%; animation-delay: -3s;
}
.hfloat-speed[data-v-a08971ce] { top: 12%; left: -8%; animation-delay: -5s;
}
@keyframes hfloatY-a08971ce {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(-12px);
}
}

/* ===================== FEATURES / VIDEO ===================== */
.features-section[data-v-a08971ce] { padding: 80px 0 0; text-align: center;
}
.features-section .section-title[data-v-a08971ce] { margin: 0 0 14px;
}
.features-section .section-subtitle[data-v-a08971ce] { margin: 0 auto; max-width: 560px;
}
.video-container[data-v-a08971ce] { display: flex; justify-content: center; padding: 0 20px;
}
.monitor-frame-image[data-v-a08971ce] {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: block;
}
.monitor-content[data-v-a08971ce] { position: absolute; inset: 0;
}
.monitor-content iframe[data-v-a08971ce] { width: 100%; height: 100%; border: none; display: block;
}

/* ===================== POWER GRID (every format → hub → export) ===================== */
.grid-section[data-v-a08971ce] { padding: 70px 0 90px; text-align: center; overflow: hidden;
}
.grid-title[data-v-a08971ce] { margin: 0 0 64px;
}
.powergrid[data-v-a08971ce] {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0;
  max-width: 1040px;
  margin: 0 auto;
}
.pg-sources[data-v-a08971ce] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.pg-sources .pg-chip[data-v-a08971ce]:nth-child(7) { grid-column: 1 / -1; justify-self: center;
}
.pg-chip[data-v-a08971ce] {
  width: 78px; height: 70px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -22px rgba(31,41,51,0.4);
  color: var(--ink); font-size: 18px;
}
.pg-fmt[data-v-a08971ce] { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted);
}
.pg-wires[data-v-a08971ce] { height: 200px;
}
.pg-wires svg[data-v-a08971ce] { width: 100%; height: 100%;
}
.pg-wires path[data-v-a08971ce] { fill: none; stroke: var(--line); stroke-width: 1.5;
}
.pg-wires-r[data-v-a08971ce] { min-width: 40px;
}
.pg-hub[data-v-a08971ce] {
  width: 84px; height: 84px; border-radius: 24px;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 26px 50px -24px rgba(31,41,51,0.45);
}
.pg-hub-logo[data-v-a08971ce] { width: 46px; height: 46px; transform: translateX(3px);
}
.pg-result[data-v-a08971ce] { display: flex; align-items: center; gap: 16px; justify-self: end;
}
.pg-card[data-v-a08971ce] { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.pg-extract[data-v-a08971ce] { width: 230px; padding: 20px 22px; text-align: left;
}
.pg-row[data-v-a08971ce] { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.pg-row[data-v-a08971ce]:nth-child(3) { border-bottom: none;
}
.pg-k[data-v-a08971ce] { font-size: 13px; color: var(--muted);
}
.pg-v[data-v-a08971ce] { font-size: 14px; font-weight: 700; color: var(--ink);
}
.pg-amount[data-v-a08971ce] { color: var(--violet);
}
.pg-export[data-v-a08971ce] {
  margin-top: 14px; width: 100%; padding: 11px; border: none; cursor: pointer;
  border-radius: var(--pill); background: var(--dark); color: #fff;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pg-success[data-v-a08971ce] { width: 170px; padding: 22px 20px; text-align: left; display: flex; flex-direction: column; gap: 6px;
}
.pg-check[data-v-a08971ce] { width: 34px; height: 34px; border-radius: 50%; background: rgba(43,130,240,0.12); color: var(--violet); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 6px;
}
.pg-success b[data-v-a08971ce] { font-size: 15px; font-weight: 700; color: var(--ink);
}
.pg-success i[data-v-a08971ce] { font-size: 12px; font-style: normal; color: var(--muted); line-height: 1.4;
}

/* ===================== HOW IT WORKS (Contiant "Payment way with" flow cards) ===================== */
.how-it-works-section[data-v-a08971ce] { padding: 70px 0 100px;
}
/* ===== How It Works — sequential reveal (card → card → card, left → right) ===== */
.steps-timeline.reveal[data-v-a08971ce] { opacity: 1; transform: none;
}
.steps-timeline.reveal[data-v-a08971ce] > * { opacity: 0; transform: translateY(26px); transition: opacity 0.5s cubic-bezier(0.22,0.7,0.2,1), transform 0.55s cubic-bezier(0.22,0.7,0.2,1);
}
.steps-timeline.in-view[data-v-a08971ce] > * { opacity: 1; transform: none;
}
.steps-timeline.in-view[data-v-a08971ce] > *:nth-child(1) { transition-delay: 0.05s;
}
.steps-timeline.in-view[data-v-a08971ce] > *:nth-child(2) { transition-delay: 0.25s;
}
.steps-timeline.in-view[data-v-a08971ce] > *:nth-child(3) { transition-delay: 0.45s;
}
.steps-timeline.in-view[data-v-a08971ce] > *:nth-child(4) { transition-delay: 0.65s;
}
.steps-timeline.in-view[data-v-a08971ce] > *:nth-child(5) { transition-delay: 0.85s;
}

/* power-grid pieces placed inside the step cards */
.step-visual .pg-sources[data-v-a08971ce] { gap: 10px;
}
.step-visual .pg-success[data-v-a08971ce] { box-shadow: 0 16px 34px -24px rgba(31,41,51,0.4);
}

/* solid pastel colour per step card (matches the showcase sections) */
.step-item.step-blue[data-v-a08971ce]   { background: var(--skyblue); border: none;
}
.step-item.step-violet[data-v-a08971ce] { background: var(--lav); border: none;
}
.step-item.step-green[data-v-a08971ce]  { background: var(--mint); border: none;
}
.steps-timeline[data-v-a08971ce] {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 36px;
}
.step-item[data-v-a08971ce] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 22px 26px;
  box-shadow: 0 26px 60px -38px rgba(31,41,51,0.32);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-item[data-v-a08971ce]:hover { transform: translateY(-6px); box-shadow: 0 34px 76px -34px rgba(31,41,51,0.38);
}

/* visual stage — centered in the upper area, like contiant */
.step-visual[data-v-a08971ce] {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-scene[data-v-a08971ce] { position: relative; display: flex; align-items: center; justify-content: center;
}

/* unified step icon tile */
.sv-tile[data-v-a08971ce] {
  width: 58px; height: 58px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  box-shadow: 0 14px 28px -10px rgba(31,41,51,0.45);
}
.sv-blue[data-v-a08971ce] { background: linear-gradient(150deg, #5aa2ff, #2b82f0); box-shadow: 0 14px 28px -10px rgba(43,130,240,0.6);
}
.sv-dark[data-v-a08971ce] { background: linear-gradient(150deg, #2b3a4d, #1b2430); box-shadow: 0 14px 28px -10px rgba(27,36,48,0.6);
}
.sv-green[data-v-a08971ce] { background: linear-gradient(150deg, #34c98b, #1f9b6a); box-shadow: 0 14px 28px -10px rgba(34,160,107,0.55);
}
.step-title[data-v-a08971ce] { font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 0; line-height: 1.15; white-space: nowrap;
}
.step-arrow[data-v-a08971ce] {
  display: flex; align-items: center; justify-content: center;
  color: #b5bcc8;
  width: 78px;
  margin: 0;
}
.step-arrow svg[data-v-a08971ce] { width: 74px; height: 40px;
}

/* ===================== BEFORE / AFTER ===================== */
.parallax-section[data-v-a08971ce] { position: relative; overflow: hidden; padding: 40px 0 90px; background: transparent; display: block;
}
.parallax-background[data-v-a08971ce], .parallax-overlay[data-v-a08971ce] { display: none;
}
.parallax-content[data-v-a08971ce] { position: relative; padding: 0 24px;
}
.before-after-container[data-v-a08971ce] { max-width: 1100px; margin: 0 auto; text-align: center;
}
.before-after-title[data-v-a08971ce] { font-size: clamp(32px, 4vw, 50px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px;
}
.before-after-subtitle[data-v-a08971ce] { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); margin: 0 0 40px;
}
.before-after-wrapper[data-v-a08971ce] { max-width: 1000px; margin: 0 auto;
}
.before-after-slider[data-v-a08971ce] {
  position: relative; width: 100%; height: 560px; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: ew-resize; user-select: none; background: #fff;
}
.before-image[data-v-a08971ce], .after-image[data-v-a08971ce] { position: absolute; inset: 0; width: 100%; height: 100%;
}
.before-image img[data-v-a08971ce], .after-image img[data-v-a08971ce] { width: 100%; height: 100%; object-fit: contain; display: block;
}
.after-image[data-v-a08971ce] { clip-path: inset(0 50% 0 0); transition: clip-path 0.05s ease-out;
}
.image-label[data-v-a08971ce] {
  position: absolute; bottom: 24px; padding: 8px 18px;
  background: var(--dark); color: #fff;
  font-size: 13px; font-weight: 600; border-radius: var(--pill); z-index: 5;
}
.before-label[data-v-a08971ce] { left: 24px;
}
.after-label[data-v-a08971ce] { right: 24px;
}
.slider-handle[data-v-a08971ce] { position: absolute; top: 0; bottom: 0; width: 2px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none;
}
.slider-line[data-v-a08971ce] { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background: var(--violet);
}
.slider-button[data-v-a08971ce] {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--violet); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(43, 130, 240, 0.45);
}
.slider-button svg[data-v-a08971ce] { width: 24px; height: 24px;
}

/* ===================== BENEFITS — pinned dark card-stack (scroll-locked) ===================== */
.benefits-section[data-v-a08971ce] { position: relative; padding: 36px 0;
}
.benefits-section.benefits-animated[data-v-a08971ce] { height: 240vh; padding: 0;
}
.benefits-section.benefits-animated .benefits-sticky[data-v-a08971ce] {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
  padding: 84px 0 24px; box-sizing: border-box;
}
.benefits-stage[data-v-a08971ce] {
  background: var(--dark);
  border-radius: var(--radius);
  padding: 64px 64px 70px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: hidden;
  position: relative;
}
.benefits-stage[data-v-a08971ce]::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 860px; height: 860px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43,130,240,0.28), rgba(43,130,240,0) 62%);
  pointer-events: none; z-index: 0;
}
.benefits-stage[data-v-a08971ce] > * { position: relative; z-index: 1;
}
.benefits-section.benefits-animated .benefits-stage[data-v-a08971ce] {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: center;
  align-content: center;
  width: 100%;
  min-height: calc(100vh - 132px);
  padding: 48px 72px;
}
.benefits-copy[data-v-a08971ce] { text-align: left;
}
.benefits-eyebrow[data-v-a08971ce] {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8fc6ff; margin-bottom: 16px;
}
.benefits-copy .section-title[data-v-a08971ce] { color: #fff; margin: 0 0 14px;
}
.benefits-copy .section-subtitle[data-v-a08971ce] { color: rgba(255, 255, 255, 0.6); margin: 0; max-width: 38ch;
}

/* card window */
.benefits-window[data-v-a08971ce] { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.benefits-section.benefits-animated .benefits-window[data-v-a08971ce] {
  display: block;
  height: 640px;
}
.benefit-card[data-v-a08971ce] {
  position: relative;
  background: linear-gradient(158deg, #ffffff 0%, #f3f7fd 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 38px 38px 40px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.55);
}
.benefits-section.benefits-animated .benefit-card[data-v-a08971ce] {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  transition: transform 0.55s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.45s ease;
}
.bc-num[data-v-a08971ce] {
  position: absolute; top: 16px; right: 26px;
  font-size: 64px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: rgba(31, 41, 51, 0.06);
  pointer-events: none;
}
.benefit-icon[data-v-a08971ce] {
  position: relative;
  width: 58px; height: 58px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px; font-size: 22px; color: #fff;
}
.benefit-icon.blue[data-v-a08971ce]   { background: linear-gradient(150deg, #5aa2ff, #2b82f0); box-shadow: 0 14px 28px -10px rgba(43,130,240,0.6);
}
.benefit-icon.green[data-v-a08971ce]  { background: linear-gradient(150deg, #34d399, #10b981); box-shadow: 0 14px 28px -10px rgba(16,185,129,0.55);
}
.benefit-icon.purple[data-v-a08971ce] { background: linear-gradient(150deg, #a78bfa, #7c5cff); box-shadow: 0 14px 28px -10px rgba(124,92,255,0.55);
}
.benefit-icon.orange[data-v-a08971ce] { background: linear-gradient(150deg, #fbbf24, #f59e0b); box-shadow: 0 14px 28px -10px rgba(245,158,11,0.55);
}
.benefit-icon.cyan[data-v-a08971ce]   { background: linear-gradient(150deg, #22d3ee, #06b6d4); box-shadow: 0 14px 28px -10px rgba(6,182,212,0.55);
}
.benefit-icon.pink[data-v-a08971ce]   { background: linear-gradient(150deg, #f472b6, #ec4899); box-shadow: 0 14px 28px -10px rgba(236,72,153,0.55);
}
.benefit-title[data-v-a08971ce] { position: relative; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: #16273a; margin: 0 0 11px; line-height: 1.12;
}
.benefit-description[data-v-a08971ce] { position: relative; font-size: 15.5px; color: rgba(22, 39, 58, 0.6); line-height: 1.55; margin: 0;
}
.benefits-cta[data-v-a08971ce] {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 32px;
  padding: 14px 28px;
  border-radius: var(--pill);
  background: var(--violet);
  color: #fff;
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.benefits-cta[data-v-a08971ce]::after { content: '→'; transition: transform 0.2s ease;
}
.benefits-cta[data-v-a08971ce]:hover { background: var(--violet-hover); transform: translateY(-2px);
}
.benefits-cta[data-v-a08971ce]:hover::after { transform: translateX(4px);
}

/* ===================== INDUSTRIES (alternating text + visual blocks) ===================== */
.industries-section[data-v-a08971ce] { position: relative; padding: 60px 0 100px; text-align: center; overflow: hidden;
}
.industries-section .hero-background[data-v-a08971ce] { display: none;
}
.industries-section .section-title[data-v-a08971ce] { color: var(--ink); margin: 0 0 0;
}
.industries-section .section-subtitle[data-v-a08971ce] { color: var(--muted); margin: 24px auto 0; max-width: 640px;
}

/* drawing underline under the centered title */
.section-underline[data-v-a08971ce] {
  display: block;
  width: 150px; height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1) 0.1s;
}
.section-title.in-view + .section-underline[data-v-a08971ce] { transform: scaleX(1);
}

/* clean industry grid (Contiant "Payment evolution for every industry") */
.ind-grid[data-v-a08971ce] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 52px; margin-top: 66px; text-align: left;
}
.ind-item[data-v-a08971ce] {
}
.ind-ico[data-v-a08971ce] {
  width: 54px; height: 54px; border-radius: 15px;
  background: rgba(43,130,240,0.1); color: var(--violet);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 20px;
}
.ind-title[data-v-a08971ce] { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; line-height: 1.2;
}
.ind-desc[data-v-a08971ce] { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0;
}
.industry-blocks[data-v-a08971ce] { display: flex; flex-direction: column; gap: 56px; margin-top: 80px;
}
.industry-row[data-v-a08971ce] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  text-align: left;
}
.industry-row:nth-child(even) .industry-text[data-v-a08971ce] { order: 2;
}
.industry-row:nth-child(even) .industry-visual[data-v-a08971ce] { order: 1;
}
.industry-kicker[data-v-a08971ce] {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--violet); margin-bottom: 14px;
}
.industry-title[data-v-a08971ce] { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 22px; line-height: 1.08;
}
.industry-list[data-v-a08971ce] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
}
.industry-list li[data-v-a08971ce] { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--muted);
}
.industry-list li svg[data-v-a08971ce] {
  flex-shrink: 0; width: 22px; height: 22px; padding: 5px;
  border-radius: 50%; background: rgba(43, 130, 240, 0.12); color: var(--violet);
  font-size: 11px;
}

/* pastel visual panel with a faux dashboard card */
.industry-visual[data-v-a08971ce] {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 44px;
}
.industry-visual.v-lav[data-v-a08971ce] { background: var(--lav);
}
.industry-visual.v-peach[data-v-a08971ce] { background: var(--peach);
}
.industry-visual.v-mint[data-v-a08971ce] { background: var(--mint);
}
.iv-card[data-v-a08971ce] {
  width: 100%; max-width: 360px;
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 30px 60px -28px rgba(31, 41, 51, 0.4);
}
.iv-top[data-v-a08971ce] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;
}
.iv-ico[data-v-a08971ce] {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--dark); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.iv-num[data-v-a08971ce] { font-size: 30px; font-weight: 700; color: rgba(31, 41, 51, 0.14); letter-spacing: -0.02em;
}
.iv-lines[data-v-a08971ce] { display: flex; flex-direction: column; gap: 12px;
}
.iv-lines span[data-v-a08971ce] { height: 12px; border-radius: 6px; background: #eef1f6;
}
.iv-lines span[data-v-a08971ce]:nth-child(1) { width: 100%;
}
.iv-lines span[data-v-a08971ce]:nth-child(2) { width: 78%;
}
.iv-lines span[data-v-a08971ce]:nth-child(3) { width: 88%; background: linear-gradient(90deg, var(--violet), #7db0ff); opacity: 0.85;
}

/* ===================== WHY CHOOSE / TIME SAVINGS ===================== */
.why-choose-section[data-v-a08971ce] { padding: 90px 0; background: transparent;
}
.why-choose-header[data-v-a08971ce] { text-align: center; margin-bottom: 56px;
}
.why-choose-header .section-title[data-v-a08971ce] { color: var(--ink); margin: 0 0 14px;
}
.why-choose-header .section-subtitle[data-v-a08971ce] { color: var(--muted); margin: 0 auto; max-width: 700px;
}
.time-savings-grid[data-v-a08971ce] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; margin-bottom: 50px; align-items: stretch;
}
.time-comparison-card[data-v-a08971ce] { border-radius: var(--radius); padding: 40px 34px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
}
.time-comparison-card.automated[data-v-a08971ce] { background: var(--dark); border-color: transparent;
}
.comparison-header[data-v-a08971ce] { text-align: center; margin-bottom: 26px;
}
.comparison-icon[data-v-a08971ce] { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 16px;
}
.traditional-icon[data-v-a08971ce] { background: var(--bg); color: var(--muted);
}
.automated-icon[data-v-a08971ce] { background: var(--violet); color: #fff;
}
.comparison-title[data-v-a08971ce] { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.automated .comparison-title[data-v-a08971ce] { color: #fff;
}
.comparison-body[data-v-a08971ce] { text-align: center;
}
.time-estimate[data-v-a08971ce] { margin-bottom: 26px; padding: 22px; background: var(--bg); border-radius: var(--radius-sm);
}
.automated .time-estimate[data-v-a08971ce] { background: rgba(255,255,255,0.08);
}
.time-number[data-v-a08971ce] { display: block; font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; color: var(--ink);
}
.automated .time-number[data-v-a08971ce] { color: #fff;
}
.time-estimate.highlight .time-number[data-v-a08971ce] { color: #bfdbfe;
}
.time-unit[data-v-a08971ce] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
}
.automated .time-unit[data-v-a08971ce] { color: rgba(255,255,255,0.55);
}
.comparison-tasks[data-v-a08971ce] { list-style: none; padding: 0; margin: 0; text-align: left;
}
.comparison-tasks li[data-v-a08971ce] { display: flex; align-items: center; gap: 12px; padding: 11px 4px; font-size: 15px; color: var(--muted); line-height: 1.45; border-bottom: 1px solid var(--line);
}
.comparison-tasks li[data-v-a08971ce]:last-child { border-bottom: none;
}
.automated .comparison-tasks li[data-v-a08971ce] { color: rgba(255,255,255,0.82); border-bottom-color: rgba(255,255,255,0.1);
}
.task-icon[data-v-a08971ce] { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex !important; align-items: center; justify-content: center; font-size: 17px;
}
.comparison-tasks .task-icon.negative[data-v-a08971ce] { color: #cbd0d6;
}
.comparison-tasks .task-icon.positive[data-v-a08971ce] { display: inline-flex !important; color: #60a5fa;
}
.vs-divider[data-v-a08971ce] { display: flex; align-items: center; justify-content: center; align-self: center; width: 52px; height: 52px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px -8px rgba(43,130,240,0.6);
}
.savings-highlight[data-v-a08971ce] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 50px;
}
.savings-stat[data-v-a08971ce] { background: var(--card); border-radius: var(--radius); padding: 38px 28px; text-align: center; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.3s ease;
}
.savings-stat[data-v-a08971ce]:hover { transform: translateY(-6px);
}
.stat-icon[data-v-a08971ce] { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: rgba(43,130,240,0.1); color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-number[data-v-a08971ce] { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 6px;
}
.stat-label[data-v-a08971ce] { font-size: 15px; color: var(--muted); font-weight: 400; margin: 0;
}
.roi-calculator[data-v-a08971ce] { background: var(--card); border-radius: var(--radius); padding: 50px; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.roi-title[data-v-a08971ce] { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; text-align: center;
}
.roi-description[data-v-a08971ce] { font-size: 16px; color: var(--muted); text-align: center; margin-bottom: 32px;
}
.roi-breakdown[data-v-a08971ce] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.roi-item[data-v-a08971ce] { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--bg); border-radius: var(--radius-sm); border: none;
}
.roi-item.highlight[data-v-a08971ce] { background: var(--violet);
}
.roi-item.highlight .roi-label[data-v-a08971ce], .roi-item.highlight .roi-value[data-v-a08971ce] { color: #fff;
}
.roi-label[data-v-a08971ce] { font-size: 15px; color: var(--muted); font-weight: 500;
}
.roi-value[data-v-a08971ce] { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}
.roi-input[data-v-a08971ce] { font-size: 20px; font-weight: 700; color: var(--ink); border: none; background: #fff; text-align: right; width: 110px; padding: 6px 10px; border-radius: 10px; transition: box-shadow 0.2s ease;
}
.roi-input[data-v-a08971ce]:focus { outline: none; box-shadow: 0 0 0 2px var(--violet);
}
.roi-input[data-v-a08971ce]::-webkit-inner-spin-button, .roi-input[data-v-a08971ce]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;
}
.roi-input[type=number][data-v-a08971ce] { -moz-appearance: textfield; appearance: textfield;
}

/* ===================== DEVELOPER / API (lavender card + code editor) ===================== */
.dev-section[data-v-a08971ce] { padding: 26px 0;
}
.dev-section .container[data-v-a08971ce] { background: var(--lav); border-radius: var(--radius); padding: 56px;
}
.dev-card[data-v-a08971ce] { background: transparent; border-radius: 0; padding: 0;
}
.dev-title[data-v-a08971ce] { font-size: clamp(28px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; text-align: center; color: var(--ink); margin: 0 0 48px;
}
.dev-underline[data-v-a08971ce] { position: relative; white-space: nowrap;
}
.dev-underline[data-v-a08971ce]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 7px; background: var(--violet); border-radius: 4px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5 C 50 2, 100 7, 150 4 S 196 3, 198 5' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5 C 50 2, 100 7, 150 4 S 196 3, 198 5' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.dev-grid[data-v-a08971ce] { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center;
}
.dev-steps[data-v-a08971ce] { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.dev-steps li[data-v-a08971ce] { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink);
}
.dev-steps li span[data-v-a08971ce] { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(27,36,48,0.08); font-size: 12px; font-weight: 700; color: var(--muted);
}
.dev-sub[data-v-a08971ce] { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px;
}
.dev-desc[data-v-a08971ce] { font-size: 15px; color: rgba(27,36,48,0.62); line-height: 1.55; margin: 0;
}
.dev-editor[data-v-a08971ce] { background: #161d27; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -34px rgba(27,36,48,0.7);
}
.dev-tabs[data-v-a08971ce] { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: #1e2733; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dev-dot[data-v-a08971ce] { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18);
}
.dev-tab[data-v-a08971ce] { margin-left: 6px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); padding: 4px 12px; border-radius: var(--pill);
}
.dev-tab.active[data-v-a08971ce] { background: var(--violet); color: #fff;
}
.dev-tab[data-v-a08971ce]:first-of-type { margin-left: 14px;
}
.dev-code[data-v-a08971ce] { margin: 0; padding: 22px 24px; font-family: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75; color: rgba(255,255,255,0.82); overflow-x: auto; white-space: pre;
}
.dev-code .c-cm[data-v-a08971ce] { color: #6b7689;
}
.dev-code .c-st[data-v-a08971ce] { color: #8fd0a0;
}
.dev-code .c-vr[data-v-a08971ce] { color: #ef8aa0;
}
.dev-code .c-nm[data-v-a08971ce] { color: #79b6ff;
}

/* ===================== SHOWCASE (Contiant dashboard sections) ===================== */
.showcase-section[data-v-a08971ce] { padding: 26px 0;
}
.showcase-section .container[data-v-a08971ce] { background: var(--peach); border-radius: var(--radius); padding: 56px;
}
.sc-mint .container[data-v-a08971ce] { background: var(--mint);
}
.sc-sky .container[data-v-a08971ce] { background: var(--skyblue);
}
.sc-lav .container[data-v-a08971ce] { background: var(--mint);
}

/* time-savings comparison bars (in the dashboard visual) */
.dash-compare[data-v-a08971ce] { display: flex; flex-direction: column; gap: 18px; margin-bottom: 2px;
}

/* industry list (no percentages) */
.dash-industries[data-v-a08971ce] { display: flex; flex-direction: column; gap: 7px;
}
.di-row[data-v-a08971ce] { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; background: #f8fafc; border: 1px solid #eef2f6;
}
.di-ico[data-v-a08971ce] { width: 32px; height: 32px; border-radius: 9px; background: #eff6ff; color: #0ea5e9; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.di-name[data-v-a08971ce] { flex: 1; font-size: 13.5px; font-weight: 600; color: #0f172a;
}
.di-tick[data-v-a08971ce] { color: #10b981; font-size: 13px;
}
.dc-head[data-v-a08971ce] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;
}
.dc-label[data-v-a08971ce] { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #0f172a;
}
.dc-ico[data-v-a08971ce] { width: 24px; height: 24px; border-radius: 7px; background: #eff6ff; color: #0ea5e9; display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.dc-val[data-v-a08971ce] { font-size: 12px; font-weight: 700;
}
.dc-bad[data-v-a08971ce] { color: #ef4444;
}
.dc-good[data-v-a08971ce] { color: #10b981;
}
.dc-brand[data-v-a08971ce] { color: #0ea5e9;
}
.dc-track[data-v-a08971ce] { height: 12px; border-radius: 6px; background: #eef2f6; overflow: hidden;
}
.dc-fill[data-v-a08971ce] { display: block; height: 100%; border-radius: 6px;
}
.dc-fill-bad[data-v-a08971ce] { background: linear-gradient(90deg, #fca5a5, #ef4444);
}
.dc-fill-good[data-v-a08971ce] { background: linear-gradient(90deg, #6ee7b7, #10b981);
}
.dc-fill-brand[data-v-a08971ce] { background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

/* interactive calculator inputs inside the dashboard */
.dash-calc[data-v-a08971ce] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.calc-row[data-v-a08971ce] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 12px; cursor: text;
}
.calc-label[data-v-a08971ce] { font-size: 12px; font-weight: 600; color: #64748b;
}
.calc-input[data-v-a08971ce] {
  width: 62px; text-align: right; border: none; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 8px;
  font-size: 14px; font-weight: 700; color: #0f172a;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.calc-input[data-v-a08971ce]:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
.calc-input[data-v-a08971ce]::-webkit-inner-spin-button, .calc-input[data-v-a08971ce]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;
}
.calc-input[type=number][data-v-a08971ce] { -moz-appearance: textfield; appearance: textfield;
}
.sc-row[data-v-a08971ce] { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: 52px; align-items: center;
}
.sc-row--imgright[data-v-a08971ce] { grid-template-columns: 0.78fr 1.22fr;
}
.sc-copy[data-v-a08971ce] { padding: 6px 0;
}
.sc-title[data-v-a08971ce] { font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; color: var(--ink); margin: 0 0 18px;
}
.sc-underline[data-v-a08971ce] { position: relative; white-space: nowrap;
}
.sc-underline[data-v-a08971ce]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 7px; background: var(--violet); border-radius: 4px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5 C 50 2, 100 7, 150 4 S 196 3, 198 5' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5 C 50 2, 100 7, 150 4 S 196 3, 198 5' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.sc-kick[data-v-a08971ce] { font-size: 17px; font-weight: 700; font-style: italic; color: var(--ink); margin: 0 0 12px;
}
.sc-desc[data-v-a08971ce] { font-size: 15px; color: rgba(27,36,48,0.62); line-height: 1.6; margin: 0; max-width: 42ch;
}

/* faux app dashboard — mirrors the real Invoice Scan UI (light theme, sky accent, solid status badges) */
.dash[data-v-a08971ce] { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 44px 84px -36px rgba(15,23,42,0.4); color: #0f172a;
}
.dash-bar[data-v-a08971ce] { display: none;
}
.dash-dots[data-v-a08971ce] { display: flex; gap: 5px;
}
.dash-dots i[data-v-a08971ce] { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1;
}
.dash-logo[data-v-a08971ce] { width: 17px; height: 17px; margin-left: 8px;
}
.dash-brand[data-v-a08971ce] { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a;
}
.dash-user[data-v-a08971ce] { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #64748b;
}
.dash-ava[data-v-a08971ce] { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}
.dash-nav[data-v-a08971ce] { display: none;
}
.dash-nav .active[data-v-a08971ce] { color: #0f172a; position: relative;
}
.dash-nav .active[data-v-a08971ce]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: #0ea5e9; border-radius: 2px;
}

/* invoice table */
.dash-thead[data-v-a08971ce], .dash-r[data-v-a08971ce] { display: grid; grid-template-columns: 30px 1fr 120px 96px 80px; align-items: center; gap: 12px; padding: 10px 18px;
}
.dash-thead[data-v-a08971ce] { background: #f8fafc; border-bottom: 2px solid #e2e8f0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b;
}
.dash-thead .th-info[data-v-a08971ce] { grid-column: 1 / 3;
}
.dash-thead .th-amt[data-v-a08971ce] { text-align: right;
}
.dash-thead .th-st[data-v-a08971ce] { text-align: center;
}
.dash-thead .th-act[data-v-a08971ce] { text-align: right;
}
.dash-rows[data-v-a08971ce] { display: flex; flex-direction: column;
}
.dash-r[data-v-a08971ce] { border-bottom: 1px solid #eef2f6;
}
.dash-r[data-v-a08971ce]:last-child { border-bottom: none;
}
.r-thumb[data-v-a08971ce] { width: 30px; height: 36px; border-radius: 6px; background: #eff6ff; color: #0ea5e9; display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.r-info[data-v-a08971ce] { display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.r-info b[data-v-a08971ce] { font-size: 13px; font-weight: 700; color: #0f172a;
}
.r-info i[data-v-a08971ce] { font-style: normal; font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-amt[data-v-a08971ce] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.r-amt b[data-v-a08971ce] { font-size: 13px; font-weight: 700; color: #0f172a;
}
.r-amt small[data-v-a08971ce] { font-size: 10px; font-weight: 600; color: #94a3b8;
}
.r-amt i[data-v-a08971ce] { font-style: normal; font-size: 10.5px; color: #94a3b8;
}
.r-st[data-v-a08971ce] { justify-self: center; padding: 4px 10px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: #fff; white-space: nowrap;
}
.st-ok[data-v-a08971ce] { background: #10b981;
}
.st-proc[data-v-a08971ce] { background: #f59e0b;
}
.st-fail[data-v-a08971ce] { background: #ef4444;
}
.r-act[data-v-a08971ce] { justify-self: end; display: inline-flex; gap: 6px;
}
.r-act .ra[data-v-a08971ce] { width: 26px; height: 26px; border-radius: 7px; background: #f1f5f9; color: #64748b; display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

/* analytics variant — light */
.dash-analytics[data-v-a08971ce] { padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.dash-stats[data-v-a08971ce] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.dash-stat[data-v-a08971ce] { background: #f8fafc; border: 1px solid #eef2f6; border-radius: 12px; padding: 14px 16px;
}
.dash-stat-k[data-v-a08971ce] { display: block; font-size: 11px; color: #64748b; margin-bottom: 6px;
}
.dash-stat b[data-v-a08971ce] { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #0f172a;
}
.dash-chart-row[data-v-a08971ce] { display: grid; grid-template-columns: 1.6fr 0.85fr; gap: 12px;
}
.dash-bars[data-v-a08971ce] { display: flex; align-items: flex-end; gap: 8px; height: 132px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 12px; padding: 16px;
}
.dash-bars i[data-v-a08971ce] { flex: 1; min-height: 6px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}
.dash-donut[data-v-a08971ce] { display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 12px;
}
.donut[data-v-a08971ce] { position: relative; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(#0ea5e9 0 53%, #e2e8f0 53% 100%); display: flex; align-items: center; justify-content: center;
}
.donut[data-v-a08971ce]::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #ffffff;
}
.donut b[data-v-a08971ce] { position: relative; font-size: 18px; font-weight: 700; color: #0f172a;
}

/* ---- Contiant-style staggered reveal for the code editor + dashboards ---- */
/* code editor slides in from the side after the title */
.dev-card.reveal .dev-editor[data-v-a08971ce] {
  opacity: 0; transform: translateX(46px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.22,0.7,0.2,1) 0.15s, transform 0.7s cubic-bezier(0.22,0.7,0.2,1) 0.15s;
}
.dev-card.in-view .dev-editor[data-v-a08971ce] { opacity: 1; transform: none;
}
.dev-card.reveal .dev-steps li[data-v-a08971ce] { opacity: 0; transform: translateX(-16px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.7,0.2,1);
}
.dev-card.in-view .dev-steps li[data-v-a08971ce] { opacity: 1; transform: none;
}
.dev-card.in-view .dev-steps li[data-v-a08971ce]:nth-child(1) { transition-delay: 0.2s;
}
.dev-card.in-view .dev-steps li[data-v-a08971ce]:nth-child(2) { transition-delay: 0.32s;
}
.dev-card.in-view .dev-steps li[data-v-a08971ce]:nth-child(3) { transition-delay: 0.44s;
}

/* invoice table rows cascade in */
.sc-visual.reveal .dash-r[data-v-a08971ce] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22,0.7,0.2,1);
}
.sc-visual.in-view .dash-r[data-v-a08971ce] { opacity: 1; transform: none;
}
.sc-visual.in-view .dash-r[data-v-a08971ce]:nth-child(1) { transition-delay: 0.22s;
}
.sc-visual.in-view .dash-r[data-v-a08971ce]:nth-child(2) { transition-delay: 0.31s;
}
.sc-visual.in-view .dash-r[data-v-a08971ce]:nth-child(3) { transition-delay: 0.40s;
}
.sc-visual.in-view .dash-r[data-v-a08971ce]:nth-child(4) { transition-delay: 0.49s;
}
.sc-visual.in-view .dash-r[data-v-a08971ce]:nth-child(5) { transition-delay: 0.58s;
}

/* analytics: stat cards rise, bars grow, donut pops */
.sc-visual.reveal .dash-stat[data-v-a08971ce] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22,0.7,0.2,1);
}
.sc-visual.in-view .dash-stat[data-v-a08971ce] { opacity: 1; transform: none;
}
.sc-visual.in-view .dash-stat[data-v-a08971ce]:nth-child(1) { transition-delay: 0.2s;
}
.sc-visual.in-view .dash-stat[data-v-a08971ce]:nth-child(2) { transition-delay: 0.3s;
}
.sc-visual.in-view .dash-stat[data-v-a08971ce]:nth-child(3) { transition-delay: 0.4s;
}
.sc-visual.reveal .dash-bars i[data-v-a08971ce] { transform: scaleY(0); transform-origin: bottom; transition: transform 0.65s cubic-bezier(0.22,0.7,0.2,1);
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce] { transform: scaleY(1);
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(1) { transition-delay: 0.35s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(2) { transition-delay: 0.41s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(3) { transition-delay: 0.47s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(4) { transition-delay: 0.53s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(5) { transition-delay: 0.59s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(6) { transition-delay: 0.65s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(7) { transition-delay: 0.71s;
}
.sc-visual.in-view .dash-bars i[data-v-a08971ce]:nth-child(8) { transition-delay: 0.77s;
}
.sc-visual.reveal .dash-donut[data-v-a08971ce] { opacity: 0; transform: scale(0.85); transition: opacity 0.5s ease 0.5s, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.5s;
}
.sc-visual.in-view .dash-donut[data-v-a08971ce] { opacity: 1; transform: none;
}

/* comparison / industry bars grow from the left */
.sc-visual.reveal .dc-fill[data-v-a08971ce] { transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.22,0.7,0.2,1);
}
.sc-visual.in-view .dc-fill[data-v-a08971ce] { transform: scaleX(1);
}
.sc-visual.in-view .dc-row:nth-child(1) .dc-fill[data-v-a08971ce] { transition-delay: 0.30s;
}
.sc-visual.in-view .dc-row:nth-child(2) .dc-fill[data-v-a08971ce] { transition-delay: 0.38s;
}
.sc-visual.in-view .dc-row:nth-child(3) .dc-fill[data-v-a08971ce] { transition-delay: 0.46s;
}
.sc-visual.in-view .dc-row:nth-child(4) .dc-fill[data-v-a08971ce] { transition-delay: 0.54s;
}
.sc-visual.in-view .dc-row:nth-child(5) .dc-fill[data-v-a08971ce] { transition-delay: 0.62s;
}
.sc-visual.in-view .dc-row:nth-child(6) .dc-fill[data-v-a08971ce] { transition-delay: 0.70s;
}

/* industry list rows cascade in */
.sc-visual.reveal .di-row[data-v-a08971ce] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.7,0.2,1);
}
.sc-visual.in-view .di-row[data-v-a08971ce] { opacity: 1; transform: none;
}
.sc-visual.in-view .di-row[data-v-a08971ce]:nth-child(1) { transition-delay: 0.22s;
}
.sc-visual.in-view .di-row[data-v-a08971ce]:nth-child(2) { transition-delay: 0.30s;
}
.sc-visual.in-view .di-row[data-v-a08971ce]:nth-child(3) { transition-delay: 0.38s;
}
.sc-visual.in-view .di-row[data-v-a08971ce]:nth-child(4) { transition-delay: 0.46s;
}
.sc-visual.in-view .di-row[data-v-a08971ce]:nth-child(5) { transition-delay: 0.54s;
}
.sc-visual.in-view .di-row[data-v-a08971ce]:nth-child(6) { transition-delay: 0.62s;
}

/* ===================== CTA (dark navy card) ===================== */
.cta-section[data-v-a08971ce] { padding: 40px 0 110px;
}
.cta-section .container[data-v-a08971ce] {
  position: relative;
  background: var(--dark);
  border-radius: var(--radius);
  padding: 96px 48px;
  text-align: center;
  overflow: hidden;
}
.cta-section .container[data-v-a08971ce]::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 760px; height: 760px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43,130,240,0.28), rgba(43,130,240,0) 62%);
  pointer-events: none;
}
.cta-section .container[data-v-a08971ce] > * { position: relative; z-index: 1;
}
.cta-title[data-v-a08971ce] { font-size: clamp(32px, 4vw, 50px); font-weight: 600; letter-spacing: -0.03em; color: #fff; margin: 0 0 16px;
}
.cta-subtitle[data-v-a08971ce] { font-size: clamp(17px, 1.8vw, 20px); color: rgba(255,255,255,0.65); margin: 0 auto 36px; max-width: 580px; line-height: 1.5;
}
.cta-buttons[data-v-a08971ce] { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.cta-section .btn-primary[data-v-a08971ce] { background: var(--violet); color: #fff;
}
.cta-section .btn-primary[data-v-a08971ce]:hover { background: var(--violet-hover); transform: translateY(-2px);
}
.cta-section .btn-secondary[data-v-a08971ce] {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--pill);
  font-size: 16px; font-weight: 600; text-decoration: none;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25);
  transition: all 0.2s ease;
}
.cta-section .btn-secondary[data-v-a08971ce]:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px);
}

/* ===================== COMPONENT OVERRIDES (landing only) ===================== */
.landing-page[data-v-a08971ce] .navbar,
.landing-page[data-v-a08971ce] .navbar a,
.landing-page[data-v-a08971ce] .navbar button,
.landing-page[data-v-a08971ce] .navbar input {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.landing-page[data-v-a08971ce] .navbar {
  background: rgba(244, 243, 248, 0.8);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.landing-page[data-v-a08971ce] .nav-link { color: var(--muted);
}
.landing-page[data-v-a08971ce] .nav-link:hover, .landing-page[data-v-a08971ce] .nav-link.router-link-active { color: var(--ink);
}
.landing-page[data-v-a08971ce] .language-btn { background: transparent; border: 1px solid var(--line); color: var(--muted);
}
.landing-page[data-v-a08971ce] .language-btn:hover { background: #fff; border-color: var(--violet); color: var(--violet);
}
.landing-page[data-v-a08971ce] .btn-nav-login { background: var(--violet); color: #fff; border-radius: var(--pill); box-shadow: none;
}
.landing-page[data-v-a08971ce] .btn-nav-login:hover { background: var(--violet-hover); transform: translateY(-2px);
}
.landing-page[data-v-a08971ce] .mobile-menu-btn { color: var(--ink);
}
.landing-page[data-v-a08971ce] .nav-links.mobile-open { background: #fff; border-top: 1px solid var(--line);
}
.landing-page[data-v-a08971ce] .language-dropdown { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}

/* FAQ — refined to match the design language (lighter, premium) */
.landing-page[data-v-a08971ce] .faq-section { padding: 50px 0 100px; background: transparent;
}
.landing-page[data-v-a08971ce] .faq-section .section-title { font-size: clamp(32px, 4vw, 50px); font-weight: 600; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 14px;
}
.landing-page[data-v-a08971ce] .faq-section .section-subtitle { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted);
}
.landing-page[data-v-a08971ce] .faq-list { max-width: 760px; margin-top: 44px;
}
.landing-page[data-v-a08971ce] .faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  margin-bottom: 10px; overflow: hidden;
  box-shadow: 0 12px 32px -26px rgba(31,41,51,0.32);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.landing-page[data-v-a08971ce] .faq-item:hover { border-color: rgba(43,130,240,0.35);
}
.landing-page[data-v-a08971ce] .faq-item.active { border-color: var(--violet); box-shadow: 0 18px 44px -26px rgba(43,130,240,0.45);
}
.landing-page[data-v-a08971ce] .faq-question {
  padding: 19px 24px; background: transparent; color: var(--ink);
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
}
.landing-page[data-v-a08971ce] .faq-question:hover, .landing-page[data-v-a08971ce] .faq-item.active .faq-question { color: var(--violet);
}
.landing-page[data-v-a08971ce] .faq-icon {
  width: 30px; height: 30px; padding: 9px; box-sizing: border-box;
  border-radius: 50%; background: rgba(43,130,240,0.1); color: var(--violet);
  margin-left: 16px; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease;
}
.landing-page[data-v-a08971ce] .faq-item.active .faq-icon { background: var(--violet); color: #fff;
}
.landing-page[data-v-a08971ce] .faq-answer { padding: 0 24px 22px;
}
.landing-page[data-v-a08971ce] .faq-answer p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0;
}

/* Footer — light to match */
.landing-page[data-v-a08971ce] .footer { background: var(--bg); border-top: 1px solid var(--line);
}
.landing-page[data-v-a08971ce] .footer-logo img { filter: brightness(0) saturate(100%);
}
.landing-page[data-v-a08971ce] .footer-description { color: var(--muted);
}
.landing-page[data-v-a08971ce] .footer-heading { color: var(--ink);
}
.landing-page[data-v-a08971ce] .footer-links a, .landing-page[data-v-a08971ce] .footer-links span { color: var(--muted);
}
.landing-page[data-v-a08971ce] .footer-links a:hover { color: var(--violet);
}
.landing-page[data-v-a08971ce] .social-icon { background: rgba(31,41,51,0.06); color: var(--muted);
}
.landing-page[data-v-a08971ce] .social-icon:hover { background: var(--violet); color: #fff;
}
.landing-page[data-v-a08971ce] .footer-bottom { border-top-color: var(--line);
}
.landing-page[data-v-a08971ce] .footer-bottom p { color: var(--muted);
}
.landing-page[data-v-a08971ce] .footer-legal-links a { color: var(--muted);
}
.landing-page[data-v-a08971ce] .footer-legal-links a:hover { color: var(--ink);
}
.landing-page[data-v-a08971ce] .footer-legal-links .separator { color: var(--line);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
.mobile-hero-cta[data-v-a08971ce] { display: none;
}
.hero-content[data-v-a08971ce] { grid-template-columns: 1fr; gap: 30px;
}
.hero-text[data-v-a08971ce] { order: 1;
}
.hero-image-desktop[data-v-a08971ce] { display: block; order: 2;
}
.hero-image-mobile[data-v-a08971ce] { display: none;
}
.hero-image-desktop .hero-visual[data-v-a08971ce] { max-width: 300px; margin: 0 auto;
}
.hero-image-desktop img[data-v-a08971ce] { max-width: 300px;
}
.hfloat-result[data-v-a08971ce] { bottom: 2%; left: 0;
}
.hfloat-acc[data-v-a08971ce] { top: 46%; right: 0;
}
.hfloat-speed[data-v-a08971ce] { top: 0; left: 0;
}
.ind-grid[data-v-a08971ce] { grid-template-columns: 1fr; gap: 30px; margin-top: 44px;
}
.industry-row[data-v-a08971ce] { grid-template-columns: 1fr; gap: 28px;
}
.industry-row:nth-child(even) .industry-text[data-v-a08971ce] { order: 0;
}
.industry-row:nth-child(even) .industry-visual[data-v-a08971ce] { order: 0;
}
.industry-visual[data-v-a08971ce] { aspect-ratio: 16 / 10; padding: 32px;
}
.industry-blocks[data-v-a08971ce] { gap: 44px; margin-top: 50px;
}
.benefits-stage[data-v-a08971ce] { padding: 40px 22px 44px; gap: 30px;
}
.benefits-window[data-v-a08971ce] { grid-template-columns: 1fr; gap: 16px;
}
.benefits-copy[data-v-a08971ce] { text-align: center;
}
.benefits-copy .section-subtitle[data-v-a08971ce] { margin: 0 auto;
}
  /* mobile benefit cards: slightly tighter + slide-up reveal on scroll */
.benefits-window .benefit-card[data-v-a08971ce] { padding: 30px 28px 32px;
}
.benefit-card.m-reveal[data-v-a08971ce] { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22,0.7,0.2,1);
}
.benefit-card.m-in[data-v-a08971ce] { opacity: 1; transform: none;
}
.time-savings-grid[data-v-a08971ce] { grid-template-columns: 1fr; gap: 18px;
}
.vs-divider[data-v-a08971ce] { display: none;
}
.savings-highlight[data-v-a08971ce] { grid-template-columns: 1fr; gap: 18px;
}
.roi-breakdown[data-v-a08971ce] { grid-template-columns: 1fr; gap: 14px;
}
.before-after-slider[data-v-a08971ce] { height: 420px;
}
.steps-timeline[data-v-a08971ce] { grid-template-columns: 1fr; gap: 12px;
}
.step-item[data-v-a08971ce] { aspect-ratio: 1 / 1; width: 100%; max-width: 280px; justify-self: center; padding: 28px 22px; gap: 18px;
}
.step-visual[data-v-a08971ce] { min-height: auto;
}
.step-arrow[data-v-a08971ce] { padding: 4px 0; width: auto; margin: 0 auto; justify-self: center;
}
.step-arrow svg[data-v-a08971ce] { transform: rotate(90deg);
}
  /* source chips → 2×2 square chips inside the smaller card */
.step-visual .pg-sources[data-v-a08971ce] { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; max-width: 180px;
}
.step-visual .pg-chip[data-v-a08971ce] { width: auto; height: auto; aspect-ratio: 1 / 1;
}
.step-visual .pg-fmt[data-v-a08971ce] { font-size: 12px;
}
.roi-calculator[data-v-a08971ce] { padding: 34px 22px;
}

  /* power grid → stack vertically */
.powergrid[data-v-a08971ce] { grid-template-columns: 1fr; gap: 22px; justify-items: center;
}
.pg-wires[data-v-a08971ce] { display: none;
}
.pg-sources[data-v-a08971ce] { grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.pg-sources .pg-chip[data-v-a08971ce]:nth-child(7) { grid-column: auto;
}
.pg-result[data-v-a08971ce] { flex-direction: column; justify-self: center;
}
.grid-title[data-v-a08971ce] { margin-bottom: 40px;
}

  /* developer card → stack */
.dev-section .container[data-v-a08971ce] { padding: 34px 22px;
}
.dev-card[data-v-a08971ce] { padding: 0;
}
.dev-grid[data-v-a08971ce] { grid-template-columns: 1fr; gap: 30px;
}
.dev-code[data-v-a08971ce] { font-size: 12px;
}
  /* slide the code editor up (not sideways) so it never causes horizontal scroll */
.dev-card.reveal .dev-editor[data-v-a08971ce] { transform: translateY(28px) scale(0.98);
}

  /* showcase dashboards → stack */
.showcase-section .container[data-v-a08971ce] { padding: 28px 16px;
}
.sc-row[data-v-a08971ce], .sc-row--imgright[data-v-a08971ce] { grid-template-columns: 1fr; gap: 28px;
}
.sc-row--imgright .sc-copy[data-v-a08971ce] { order: 0;
}
.dash-nav[data-v-a08971ce] { gap: 12px; overflow-x: auto;
}
.dash-tr[data-v-a08971ce] { font-size: 11.5px;
}
  /* invoice table → fit narrow screens (hide header + actions, auto columns so nothing overlaps) */
.dash-thead[data-v-a08971ce] { display: none;
}
.dash-r[data-v-a08971ce] { grid-template-columns: 20px 1fr auto auto; gap: 9px; padding: 10px 12px;
}
.th-act[data-v-a08971ce], .r-act[data-v-a08971ce] { display: none;
}
.r-st[data-v-a08971ce] { justify-self: end; font-size: 9.5px; padding: 3px 8px;
}
.r-amt b[data-v-a08971ce] { font-size: 12.5px;
}
.r-amt small[data-v-a08971ce], .r-amt i[data-v-a08971ce] { font-size: 9.5px;
}
.r-info b[data-v-a08971ce] { font-size: 12.5px;
}
.r-info i[data-v-a08971ce] { font-size: 11px;
}
}


/* Billing toggle */
.billing-toggle[data-v-4324be2b] { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 44px; font-weight: 600; color: var(--muted); font-size: 15px;
}
.billing-toggle span.active[data-v-4324be2b] { color: var(--ink);
}
.save-badge[data-v-4324be2b] { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: var(--pill); background: rgba(16,185,129,0.14); color: #0f9b6a; font-size: 11px; font-weight: 700;
}
.toggle-switch[data-v-4324be2b] { position: relative; display: inline-block; width: 52px; height: 28px;
}
.toggle-switch input[data-v-4324be2b] { opacity: 0; width: 0; height: 0;
}
.slider[data-v-4324be2b] { position: absolute; inset: 0; background: #d7dce4; border-radius: var(--pill); cursor: pointer; transition: background 0.2s ease;
}
.slider[data-v-4324be2b]::before { content: ''; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider[data-v-4324be2b] { background: var(--violet);
}
.toggle-switch input:checked + .slider[data-v-4324be2b]::before { transform: translateX(24px);
}

/* Pricing cards */
.pricing-grid[data-v-4324be2b] { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 22px; max-width: 1100px; margin: 0 auto;
}
.price-card[data-v-4324be2b] {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: 0 26px 60px -38px rgba(31,41,51,0.32);
  flex: 1 1 300px; max-width: 340px;
  display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.price-card[data-v-4324be2b]:hover { transform: translateY(-6px); box-shadow: 0 36px 80px -36px rgba(31,41,51,0.4);
}
.price-card.featured[data-v-4324be2b] { border-color: var(--violet); box-shadow: 0 36px 80px -34px rgba(43,130,240,0.45);
}
.featured-badge[data-v-4324be2b] { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--violet); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: var(--pill); white-space: nowrap;
}
.plan-name[data-v-4324be2b] { font-size: 21px; font-weight: 700; color: var(--ink);
}
.plan-desc[data-v-4324be2b] { color: var(--muted); font-size: 14px; margin: 6px 0 18px; line-height: 1.5; min-height: 42px;
}
.plan-price[data-v-4324be2b] { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px;
}
.plan-price .currency[data-v-4324be2b] { font-size: 22px; font-weight: 700; color: var(--ink);
}
.plan-price .amount[data-v-4324be2b] { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.plan-price .period[data-v-4324be2b] { font-size: 15px; color: var(--muted); font-weight: 500;
}
.yearly-note[data-v-4324be2b] { font-size: 12.5px; color: var(--muted); margin: 0 0 18px;
}
.plan-button[data-v-4324be2b] { width: 100%; margin: 18px 0 22px;
}
.plan-features[data-v-4324be2b] { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.plan-features li[data-v-4324be2b] { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); line-height: 1.45;
}
.plan-features li svg[data-v-4324be2b] { color: var(--violet); margin-top: 2px; flex-shrink: 0;
}
.plan-info[data-v-4324be2b] { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.plan-info p[data-v-4324be2b] { font-size: 12.5px; color: var(--muted); margin: 2px 0;
}

/* FAQ */
.faq-grid[data-v-4324be2b] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.faq-card[data-v-4324be2b] { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px 26px; box-shadow: 0 18px 44px -34px rgba(31,41,51,0.3);
}
.faq-card h4[data-v-4324be2b] { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.cta-buttons[data-v-4324be2b] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
@media (max-width: 768px) {
.faq-grid[data-v-4324be2b] { grid-template-columns: 1fr;
}
}

/* page-specific bits — the rest comes from the shared .lp-page theme */
.stats-grid[data-v-9297bf6a] { gap: 16px;
}
.stat[data-v-9297bf6a] {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 30px 24px; text-align: center; box-shadow: 0 26px 60px -38px rgba(31,41,51,0.32);
}
.stat .lp-ico[data-v-9297bf6a] { margin: 0 auto 16px;
}
.stat-num[data-v-9297bf6a] { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.stat-label[data-v-9297bf6a] { font-size: 14px; color: var(--muted); margin-top: 4px;
}
.story-grid[data-v-9297bf6a] { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
}
/* ===== animated "invoice scanner" visual ===== */
.story-visual[data-v-9297bf6a] {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 30px 26px;
}
/* animated "our journey" timeline — builds itself, dots gently pulse */
.journey-card[data-v-9297bf6a] {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 32px 32px 28px; box-shadow: 0 40px 80px -34px rgba(31,41,51,0.5);
}
.jc-head[data-v-9297bf6a] { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.jc-logo[data-v-9297bf6a] { width: 50px; height: 50px; border-radius: 13px; background: #f4f7fc; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.jc-logo img[data-v-9297bf6a] { width: 30px; height: 30px;
}
.jc-head-txt b[data-v-9297bf6a] { display: block; font-size: 18px; font-weight: 800; color: var(--ink);
}
.jc-head-txt i[data-v-9297bf6a] { font-style: normal; font-size: 13.5px; color: var(--muted);
}
.jc-timeline[data-v-9297bf6a] { position: relative; padding-left: 34px;
}
.jc-line[data-v-9297bf6a] { position: absolute; left: 8px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #5aa2ff, #7c5cff); transform-origin: top; transform: scaleY(0); animation: jcLine-9297bf6a 1.8s cubic-bezier(0.6,0,0.2,1) 0.2s forwards;
}
.jc-item[data-v-9297bf6a] { position: relative; margin-bottom: 24px; opacity: 0; transform: translateX(10px); animation: jcItem-9297bf6a 0.55s cubic-bezier(0.22,0.7,0.2,1) forwards;
}
.jc-item[data-v-9297bf6a]:last-child { margin-bottom: 0;
}
.jc-item.i1[data-v-9297bf6a] { animation-delay: 0.5s;
}
.jc-item.i2[data-v-9297bf6a] { animation-delay: 0.9s;
}
.jc-item.i3[data-v-9297bf6a] { animation-delay: 1.3s;
}
.jc-item.i4[data-v-9297bf6a] { animation-delay: 1.7s;
}
.jc-dot[data-v-9297bf6a] { position: absolute; left: -34px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--violet); animation: jcPulse-9297bf6a 2.6s ease-in-out infinite;
}
.jc-item.i2 .jc-dot[data-v-9297bf6a] { animation-delay: 0.5s;
}
.jc-item.i3 .jc-dot[data-v-9297bf6a] { animation-delay: 1s;
}
.jc-item.i4 .jc-dot[data-v-9297bf6a] { animation-delay: 1.5s;
}
.jc-dot.green[data-v-9297bf6a] { border-color: #10b981; animation-name: jcPulseG-9297bf6a;
}
.jc-text b[data-v-9297bf6a] { display: block; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em;
}
.jc-text span[data-v-9297bf6a] { font-size: 14px; color: var(--muted); line-height: 1.45;
}
@keyframes jcLine-9297bf6a {
to { transform: scaleY(1);
}
}
@keyframes jcItem-9297bf6a {
to { opacity: 1; transform: none;
}
}
@keyframes jcPulse-9297bf6a {
0%,100% { box-shadow: 0 0 0 4px rgba(43,130,240,0.12);
}
50% { box-shadow: 0 0 0 8px rgba(43,130,240,0.03);
}
}
@keyframes jcPulseG-9297bf6a {
0%,100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.14);
}
50% { box-shadow: 0 0 0 8px rgba(16,185,129,0.03);
}
}

/* floating milestone chips */
.ex-chip[data-v-9297bf6a] { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 13px; box-shadow: 0 18px 40px -22px rgba(31,41,51,0.45); animation: floaty-9297bf6a 5s ease-in-out infinite;
}
.ex-chip b[data-v-9297bf6a] { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.1;
}
.ex-chip i[data-v-9297bf6a] { font-style: normal; font-size: 11px; color: var(--muted);
}
.ex-ico[data-v-9297bf6a] { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0;
}
.ex-ico.amber[data-v-9297bf6a] { background: #f59e0b;
}
.ex-ico.green[data-v-9297bf6a] { background: #10b981;
}
.ex-ico.violet[data-v-9297bf6a] { background: #7c5cff;
}
.ex-found[data-v-9297bf6a] { top: 16px; right: -10px; animation-delay: -1.2s;
}
.ex-rate[data-v-9297bf6a] { bottom: 28px; right: -14px; animation-delay: -3s;
}
@keyframes floaty-9297bf6a {
0%,100% { transform: translateY(0);
}
50% { transform: translateY(-9px);
}
}
@media (prefers-reduced-motion: reduce) {
.jc-line[data-v-9297bf6a], .jc-item[data-v-9297bf6a], .jc-dot[data-v-9297bf6a], .ex-chip[data-v-9297bf6a] { animation: none !important;
}
.jc-line[data-v-9297bf6a] { transform: scaleY(1);
}
.jc-item[data-v-9297bf6a] { opacity: 1; transform: none;
}
}
@media (max-width: 1024px) {
.story-visual[data-v-9297bf6a] { padding: 24px 16px;
}
}
.story-content .lp-h2[data-v-9297bf6a] { margin: 4px 0 16px;
}
.story-text[data-v-9297bf6a] { margin-bottom: 26px; font-size: 16px;
}
.story-highlights[data-v-9297bf6a] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
}
.story-highlights li[data-v-9297bf6a] { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.hl-tick[data-v-9297bf6a] {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(43,130,240,0.12); color: var(--violet);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.team-card[data-v-9297bf6a] { text-align: center;
}
.team-card .lp-h3[data-v-9297bf6a] { margin-bottom: 4px;
}
.team-avatar[data-v-9297bf6a] {
  width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 18px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 28px;
}
.team-avatar.blue[data-v-9297bf6a]   { background: linear-gradient(150deg, #5aa2ff, #2b82f0);
}
.team-avatar.green[data-v-9297bf6a]  { background: linear-gradient(150deg, #34d399, #10b981);
}
.team-avatar.violet[data-v-9297bf6a] { background: linear-gradient(150deg, #a78bfa, #7c5cff);
}
.team-role[data-v-9297bf6a] { color: var(--violet); font-weight: 600; font-size: 14px; margin: 0 0 10px;
}
.cta-buttons[data-v-9297bf6a] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.cta-secondary[data-v-9297bf6a] { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.cta-secondary[data-v-9297bf6a]:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.4);
}
@media (max-width: 1024px) {
.story-grid[data-v-9297bf6a] { grid-template-columns: 1fr; gap: 32px;
}
}

.contact-grid[data-v-5d5a8de3] { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start;
}
.form-section[data-v-5d5a8de3], .info-section[data-v-5d5a8de3] { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; box-shadow: 0 26px 60px -40px rgba(31,41,51,0.3);
}
.form-section .lp-h3[data-v-5d5a8de3], .info-section .lp-h3[data-v-5d5a8de3] { margin-bottom: 22px;
}
.contact-form[data-v-5d5a8de3] { display: flex; flex-direction: column; gap: 18px;
}
.form-group[data-v-5d5a8de3] { display: flex; flex-direction: column; gap: 7px;
}
.form-group label[data-v-5d5a8de3] { font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.form-group input[data-v-5d5a8de3], .form-group textarea[data-v-5d5a8de3] {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #fbfbfd; color: var(--ink); font-size: 15px; font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease; resize: vertical;
}
.form-group input[data-v-5d5a8de3]:focus, .form-group textarea[data-v-5d5a8de3]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,130,240,0.12); background: #fff;
}
.form-group input[data-v-5d5a8de3]::placeholder, .form-group textarea[data-v-5d5a8de3]::placeholder { color: #aab1bd;
}
.btn-submit[data-v-5d5a8de3] { width: 100%; margin-top: 6px;
}
.btn-submit[data-v-5d5a8de3]:disabled { opacity: 0.7; cursor: default;
}
.info-cards[data-v-5d5a8de3] { display: flex; flex-direction: column; gap: 16px;
}
.info-card[data-v-5d5a8de3] { display: flex; gap: 16px; align-items: flex-start;
}
.info-card .lp-ico[data-v-5d5a8de3] { margin-bottom: 0; width: 48px; height: 48px; font-size: 18px; flex-shrink: 0;
}
.info-content h3[data-v-5d5a8de3] { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
}
.info-content a[data-v-5d5a8de3], .info-content p[data-v-5d5a8de3] { display: block; color: var(--muted); font-size: 14px; text-decoration: none; margin: 1px 0;
}
.info-content a[data-v-5d5a8de3]:hover { color: var(--violet);
}
.faq-box[data-v-5d5a8de3] { display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line);
}
.faq-box .lp-ico[data-v-5d5a8de3] { margin-bottom: 0; width: 48px; height: 48px; font-size: 18px; flex-shrink: 0;
}
.faq-box h3[data-v-5d5a8de3] { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
}
.map-container[data-v-5d5a8de3] { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.map-container iframe[data-v-5d5a8de3] { display: block;
}
@media (max-width: 1024px) {
.contact-grid[data-v-5d5a8de3] { grid-template-columns: 1fr;
}
}

.fmt-card[data-v-2353a39e] { display: flex; flex-direction: column;
}
.fmt-head[data-v-2353a39e] { display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.fmt-head .lp-ico[data-v-2353a39e] { margin-bottom: 0; width: 50px; height: 50px; font-size: 20px; flex-shrink: 0;
}
.fmt-title[data-v-2353a39e] { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
}
.fmt-badge[data-v-2353a39e] { display: inline-block; padding: 3px 10px; border-radius: var(--pill); background: rgba(43,130,240,0.1); color: var(--violet); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.fmt-card .lp-text[data-v-2353a39e] { flex: 1; margin-bottom: 16px; font-size: 14.5px;
}
.fmt-features[data-v-2353a39e] { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px;
}
.fmt-features li[data-v-2353a39e] { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink);
}
.fmt-features li svg[data-v-2353a39e] { color: var(--violet); margin-top: 2px; flex-shrink: 0;
}
.custom-card[data-v-2353a39e], .learn-card[data-v-2353a39e] { display: flex; align-items: center; gap: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; box-shadow: 0 22px 54px -40px rgba(31,41,51,0.3);
}
.custom-card .lp-ico[data-v-2353a39e], .learn-card .lp-ico[data-v-2353a39e] { margin-bottom: 0; flex-shrink: 0;
}
.custom-text[data-v-2353a39e], .learn-text[data-v-2353a39e] { flex: 1;
}
.custom-text .lp-h3[data-v-2353a39e], .learn-text .lp-h3[data-v-2353a39e] { margin-bottom: 6px;
}
.custom-btn[data-v-2353a39e] { flex-shrink: 0;
}
.learn-link[data-v-2353a39e] { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; font-size: 14.5px; flex-shrink: 0; transition: gap 0.2s ease;
}
.learn-card:hover .learn-link[data-v-2353a39e] { gap: 12px;
}
.cta-buttons[data-v-2353a39e] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.cta-secondary[data-v-2353a39e] { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.cta-secondary[data-v-2353a39e]:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.4);
}
@media (max-width: 768px) {
.custom-card[data-v-2353a39e], .learn-card[data-v-2353a39e] { flex-direction: column; align-items: flex-start; gap: 16px;
}
}

.res-card[data-v-a208e25b] { display: flex; flex-direction: column; text-decoration: none;
}
.res-card .lp-h3[data-v-a208e25b] { margin-bottom: 8px;
}
.res-card .lp-text[data-v-a208e25b] { flex: 1; margin-bottom: 18px;
}
.res-link[data-v-a208e25b] { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; font-size: 14.5px; transition: gap 0.2s ease;
}
.res-card:hover .res-link[data-v-a208e25b] { gap: 12px;
}
.cta-buttons[data-v-a208e25b] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.cta-secondary[data-v-a208e25b] { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.cta-secondary[data-v-a208e25b]:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.4);
}

.guides-toolbar[data-v-006bfd0d] { margin-bottom: 40px; display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.search-box[data-v-006bfd0d] { position: relative; width: 100%; max-width: 520px;
}
.search-box input[data-v-006bfd0d] { width: 100%; padding: 14px 44px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink); font-size: 15px; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-box input[data-v-006bfd0d]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,130,240,0.12);
}
.search-icon[data-v-006bfd0d] { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted);
}
.clear-search[data-v-006bfd0d] { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px;
}
.filters[data-v-006bfd0d] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.filter-pill[data-v-006bfd0d] { padding: 9px 18px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.filter-pill[data-v-006bfd0d]:hover { border-color: var(--violet); color: var(--violet);
}
.filter-pill.active[data-v-006bfd0d] { background: var(--violet); border-color: var(--violet); color: #fff;
}
.tutorial-card[data-v-006bfd0d] { padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.video-thumb[data-v-006bfd0d] { height: 150px; position: relative; display: flex; align-items: center; justify-content: center;
}
.video-thumb.g1[data-v-006bfd0d] { background: linear-gradient(150deg, #5aa2ff, #2b82f0);
}
.video-thumb.g2[data-v-006bfd0d] { background: linear-gradient(150deg, #34d399, #10b981);
}
.video-thumb.g3[data-v-006bfd0d] { background: linear-gradient(150deg, #a78bfa, #7c5cff);
}
.video-thumb.g4[data-v-006bfd0d] { background: linear-gradient(150deg, #fbbf24, #f59e0b);
}
.video-thumb.g5[data-v-006bfd0d] { background: linear-gradient(150deg, #22d3ee, #06b6d4);
}
.video-thumb.g6[data-v-006bfd0d] { background: linear-gradient(150deg, #f472b6, #ec4899);
}
.play-icon[data-v-006bfd0d] { font-size: 46px; color: rgba(255,255,255,0.92);
}
.duration[data-v-006bfd0d] { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--pill);
}
.tutorial-body[data-v-006bfd0d] { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1;
}
.tutorial-cat[data-v-006bfd0d] { color: var(--violet); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.tutorial-card .lp-h3[data-v-006bfd0d] { font-size: 18px; margin-bottom: 8px; line-height: 1.25;
}
.tutorial-card .lp-text[data-v-006bfd0d] { flex: 1; margin-bottom: 14px; font-size: 14px;
}
.watch-link[data-v-006bfd0d] { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; font-size: 14px; transition: gap 0.2s ease;
}
.tutorial-card:hover .watch-link[data-v-006bfd0d] { gap: 12px;
}
.no-results[data-v-006bfd0d] { text-align: center; color: var(--muted); padding: 40px 0;
}
.cta-buttons[data-v-006bfd0d] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.cta-secondary[data-v-006bfd0d] { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.cta-secondary[data-v-006bfd0d]:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.4);
}

.positions-list[data-v-9ab51efb] { display: flex; flex-direction: column; gap: 16px;
}
.position-card[data-v-9ab51efb] { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 26px 28px; box-shadow: 0 18px 44px -34px rgba(31,41,51,0.3); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.position-card[data-v-9ab51efb]:hover { border-color: rgba(43,130,240,0.35); box-shadow: 0 26px 56px -34px rgba(31,41,51,0.36);
}
.position-header[data-v-9ab51efb] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px;
}
.position-header .lp-h3[data-v-9ab51efb] { margin-bottom: 8px;
}
.position-meta[data-v-9ab51efb] { display: flex; gap: 16px; flex-wrap: wrap;
}
.position-meta span[data-v-9ab51efb] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500;
}
.apply-btn[data-v-9ab51efb] { flex-shrink: 0; padding: 10px 20px; font-size: 14px;
}
@media (max-width: 600px) {
.position-header[data-v-9ab51efb] { flex-direction: column;
}
.apply-btn[data-v-9ab51efb] { width: 100%;
}
}

.benefits-list[data-v-446ac8da] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px;
}
.benefit-item[data-v-446ac8da] { display: flex; gap: 14px; align-items: flex-start;
}
.hl-tick[data-v-446ac8da] { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: rgba(43,130,240,0.12); color: var(--violet); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 2px;
}
.benefit-item h3[data-v-446ac8da] { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
}
@media (max-width: 768px) {
.benefits-list[data-v-446ac8da] { grid-template-columns: 1fr;
}
}

.blog-card[data-v-f4261b43] { padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.blog-image[data-v-f4261b43] { height: 150px; position: relative; display: flex; align-items: flex-end; padding: 16px;
}
.blog-image.g1[data-v-f4261b43] { background: linear-gradient(150deg, #5aa2ff, #2b82f0);
}
.blog-image.g2[data-v-f4261b43] { background: linear-gradient(150deg, #34d399, #10b981);
}
.blog-image.g3[data-v-f4261b43] { background: linear-gradient(150deg, #a78bfa, #7c5cff);
}
.blog-image.g4[data-v-f4261b43] { background: linear-gradient(150deg, #fbbf24, #f59e0b);
}
.blog-image.g5[data-v-f4261b43] { background: linear-gradient(150deg, #22d3ee, #06b6d4);
}
.blog-image.g6[data-v-f4261b43] { background: linear-gradient(150deg, #f472b6, #ec4899);
}
.blog-category[data-v-f4261b43] { background: rgba(255,255,255,0.92); color: var(--ink); font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--pill); letter-spacing: 0.02em;
}
.blog-body[data-v-f4261b43] { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1;
}
.blog-meta[data-v-f4261b43] { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.blog-card .lp-h3[data-v-f4261b43] { font-size: 19px; margin-bottom: 8px; line-height: 1.25;
}
.blog-card .lp-text[data-v-f4261b43] { flex: 1; margin-bottom: 16px; font-size: 14.5px;
}
.read-more[data-v-f4261b43] { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; font-size: 14px; transition: gap 0.2s ease;
}
.blog-card:hover .read-more[data-v-f4261b43] { gap: 12px;
}
.cta-buttons[data-v-f4261b43] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.cta-secondary[data-v-f4261b43] { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.cta-secondary[data-v-f4261b43]:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.4);
}

.stats-grid[data-v-40a99582] { gap: 16px;
}
.stat[data-v-40a99582] { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 30px 24px; text-align: center; box-shadow: 0 26px 60px -38px rgba(31,41,51,0.32);
}
.stat .lp-ico[data-v-40a99582] { margin: 0 auto 16px;
}
.stat-num[data-v-40a99582] { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.stat-label[data-v-40a99582] { font-size: 14px; color: var(--muted); margin-top: 4px;
}
.feat-card[data-v-40a99582] { display: flex; flex-direction: column;
}
.feat-card .lp-h3[data-v-40a99582] { margin-bottom: 8px;
}
.feat-card .lp-text[data-v-40a99582] { flex: 1; margin-bottom: 16px;
}
.feat-link[data-v-40a99582] { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; font-size: 14.5px; transition: gap 0.2s ease;
}
.feat-card:hover .feat-link[data-v-40a99582] { gap: 12px;
}
.disc-head[data-v-40a99582] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; gap: 16px;
}
.view-all[data-v-40a99582] { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; font-size: 14.5px; white-space: nowrap;
}
.disc-list[data-v-40a99582] { display: flex; flex-direction: column; gap: 12px;
}
.disc-item[data-v-40a99582] { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; box-shadow: 0 16px 40px -34px rgba(31,41,51,0.3); transition: border-color 0.2s ease;
}
.disc-item[data-v-40a99582]:hover { border-color: rgba(43,130,240,0.35);
}
.disc-avatar[data-v-40a99582] { width: 44px; height: 44px; border-radius: 50%; background: rgba(43,130,240,0.1); color: var(--violet); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.disc-content[data-v-40a99582] { flex: 1; min-width: 0;
}
.disc-content h4[data-v-40a99582] { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px;
}
.disc-meta[data-v-40a99582] { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--muted); align-items: center;
}
.disc-meta .author[data-v-40a99582] { color: var(--ink); font-weight: 600;
}
.disc-meta .cat[data-v-40a99582] { color: var(--violet); font-weight: 600;
}
.disc-meta .sep[data-v-40a99582] { opacity: 0.5;
}
.disc-stats[data-v-40a99582] { display: flex; gap: 16px; flex-shrink: 0;
}
.disc-stats span[data-v-40a99582] { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600;
}
.cta-buttons[data-v-40a99582] { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.cta-secondary[data-v-40a99582] { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25);
}
.cta-secondary[data-v-40a99582]:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.4);
}
@media (max-width: 600px) {
.disc-item[data-v-40a99582] { flex-wrap: wrap;
}
.disc-stats[data-v-40a99582] { width: 100%; padding-left: 60px;
}
}

.terms-meta[data-v-8bf46fb9] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.terms-updated[data-v-8bf46fb9] {
  padding: 8px 18px;
  border-radius: var(--pill);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.terms-section[data-v-8bf46fb9] { padding-bottom: 80px;
}
.terms-card[data-v-8bf46fb9] {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px 52px;
}
.terms-block[data-v-8bf46fb9] { padding-top: 34px;
}
.terms-block[data-v-8bf46fb9]:first-child { padding-top: 0;
}
.terms-block + .terms-block[data-v-8bf46fb9] { border-top: 1px solid var(--line); margin-top: 34px;
}
.terms-h2[data-v-8bf46fb9] {
  font-size: 21px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.terms-num[data-v-8bf46fb9] {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--violet);
  background: rgba(43, 130, 240, 0.09);
  border-radius: 8px;
  padding: 3px 9px;
  letter-spacing: 0;
}
.terms-text[data-v-8bf46fb9] {
  color: var(--muted);
  line-height: 1.65;
  font-size: 15.5px;
  margin-bottom: 14px;
}
.terms-text[data-v-8bf46fb9]:last-child { margin-bottom: 0;
}
.terms-list[data-v-8bf46fb9] {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15.5px;
}
.terms-list li[data-v-8bf46fb9] { margin-bottom: 7px;
}
.terms-list li[data-v-8bf46fb9]:last-child { margin-bottom: 0;
}

/* Pulls the retention promise out of the wall of text. */
.terms-highlight[data-v-8bf46fb9] {
  background: rgba(43, 130, 240, 0.06);
  border: 1px solid rgba(43, 130, 240, 0.18);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  margin-bottom: 14px;
}
.terms-highlight p[data-v-8bf46fb9] {
  color: var(--ink);
  line-height: 1.65;
  font-size: 15.5px;
  margin-bottom: 12px;
}
.terms-highlight p[data-v-8bf46fb9]:last-child { margin-bottom: 0;
}
.terms-card[data-v-8bf46fb9] strong { color: var(--ink); font-weight: 600;
}
.terms-card[data-v-8bf46fb9] a { color: var(--violet);
}
.terms-card[data-v-8bf46fb9] a:hover { text-decoration: underline;
}
@media (max-width: 720px) {
.terms-card[data-v-8bf46fb9] { padding: 32px 24px; border-radius: var(--radius-sm);
}
.terms-h2[data-v-8bf46fb9] { font-size: 19px;
}
}

.date-field-control[data-v-7c01a428] {
    display: inline-flex;
}

/* A class the call site kept — form-input, form-control, filter-input — lands
   on this root, because that is where Vue puts a fall-through class, and it
   brings a native field's padding, border and background with it. The frame
   is the button's job, so the root carries none of it. !important because the
   page's rule and this one are of equal weight and the page's comes later. */
.date-field-control[data-v-7c01a428] {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
}

/* And the button fills whatever width the field was given. */
.date-field-control[data-v-7c01a428] {
    width: 100%;
}
.date-field-input[data-v-7c01a428] {
    width: 100%;
}

/* The field itself: the same quiet control as the pickers beside it. */
.date-field-input[data-v-7c01a428] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 108px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Room for the chevron drawn on the right. */
    padding-right: 26px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23374151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.date-field-input[data-v-7c01a428]:hover {
    border-color: var(--primary);
}
.date-field-input.open[data-v-7c01a428] {
    border-color: var(--primary);
    color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%232b82f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.5 3.5-3.5 3.5 3.5'/%3E%3C/svg%3E");
}
.date-field-input[data-v-7c01a428]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.date-field-placeholder[data-v-7c01a428] {
    color: var(--text-light, #64748b);
}

/* The calendar, dressed like every other menu in the app. */
.date-menu[data-v-7c01a428] {
    position: fixed;
    /* Above every overlay in the app — at 1000 it opened behind any modal. */
    z-index: 100100;
    width: 252px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: inherit;
}
.date-menu-head[data-v-7c01a428] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 2px 6px;
}
.date-menu-month[data-v-7c01a428] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: capitalize;
}
.date-menu-step[data-v-7c01a428] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.15s ease;
}
.date-menu-step[data-v-7c01a428]:hover {
    background: var(--primary-light, #e0f2fe);
}
.date-menu-weekdays[data-v-7c01a428],
.date-menu-grid[data-v-7c01a428] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.date-menu-weekdays span[data-v-7c01a428] {
    padding: 2px 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-light, #64748b);
    text-align: center;
    text-transform: uppercase;
}
.date-menu-day[data-v-7c01a428] {
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}
.date-menu-day[data-v-7c01a428]:hover:not(:disabled) {
    background: var(--primary-light, #e0f2fe);
}

/* Days either side of the month stay in place but step back. */
.date-menu-day.is-outside[data-v-7c01a428] {
    color: var(--text-light, #cbd5e1);
}
.date-menu-day[data-v-7c01a428]:disabled {
    color: #dbe2ea;
    cursor: default;
}

/* Today is marked by a ring, the chosen day by a fill — so the two can be
   the same day without one hiding the other. */
.date-menu-day.is-today[data-v-7c01a428] {
    box-shadow: inset 0 0 0 1px var(--primary);
}
.date-menu-day.is-selected[data-v-7c01a428] {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}
.date-menu-foot[data-v-7c01a428] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--gray-lighter, #f1f5f9);
}
.date-menu-action[data-v-7c01a428] {
    padding: 3px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}
.date-menu-action[data-v-7c01a428]:hover {
    background: var(--primary-light, #e0f2fe);
}

.modal-overlay[data-v-85306bcb] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
  animation: fadeIn-85306bcb 0.2s ease;
}
@keyframes fadeIn-85306bcb {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.modal-content[data-v-85306bcb] {
  background: white;
  border-radius: 16px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp-85306bcb 0.3s ease;
  position: relative;
}
@keyframes slideUp-85306bcb {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.modal-header[data-v-85306bcb] {
  padding: 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3[data-v-85306bcb] {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-body[data-v-85306bcb] {
  padding: 24px;
}
.modal-description[data-v-85306bcb] {
  margin: 0 0 24px 0;
  color: var(--text-secondary);
  font-size: 15px;
  text-align: center;
}
.error-banner[data-v-85306bcb] {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dc2626;
  font-size: 14px;
}
.error-banner svg[data-v-85306bcb] {
  flex-shrink: 0;
}
.modal-options[data-v-85306bcb] {
  display: grid;
  gap: 12px;
}
.modal-option-btn[data-v-85306bcb] {
  width: 100%;
  padding: 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-option-btn[data-v-85306bcb]:not(:disabled):hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}
.modal-option-btn[data-v-85306bcb]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.modal-option-btn.disabled[data-v-85306bcb] {
  opacity: 0.5;
  cursor: not-allowed;
}
.option-icon[data-v-85306bcb] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--primary);
}
.modal-option-btn h4[data-v-85306bcb] {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.premium-badge[data-v-85306bcb] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.modal-option-btn p[data-v-85306bcb] {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.no-scans-warning[data-v-85306bcb] {
  color: #dc2626 !important;
  font-weight: 500;
  font-size: 13px !important;
}
.modal-option-btn.normal-scan[data-v-85306bcb]:not(:disabled):hover {
  border-color: #10b981;
  background: #ecfdf5;
}
.modal-option-btn.normal-scan:not(:disabled):hover h4[data-v-85306bcb] {
  color: #10b981;
}
.modal-option-btn.normal-scan:not(:disabled):hover .option-icon[data-v-85306bcb] {
  color: #10b981;
}
.modal-option-btn.hard-scan[data-v-85306bcb]:not(:disabled):hover {
  border-color: #f59e0b;
  background: #fffbeb;
}
.modal-option-btn.hard-scan:not(:disabled):hover h4[data-v-85306bcb] {
  color: #f59e0b;
}
.modal-option-btn.hard-scan:not(:disabled):hover .option-icon[data-v-85306bcb] {
  color: #f59e0b;
}
.loading-overlay[data-v-85306bcb] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.loading-spinner[data-v-85306bcb] {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-85306bcb 1s linear infinite;
}
@keyframes spin-85306bcb {
to { transform: rotate(360deg);
}
}
.loading-overlay p[data-v-85306bcb] {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}
@media (max-width: 640px) {
.modal-content[data-v-85306bcb] {
    width: 95%;
    margin: 20px;
}
.modal-header[data-v-85306bcb] {
    padding: 20px;
}
.modal-body[data-v-85306bcb] {
    padding: 20px;
}
.modal-option-btn[data-v-85306bcb] {
    padding: 16px;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-85306bcb],
.modal-container[data-v-85306bcb],
.modal-content-large[data-v-85306bcb] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-85306bcb] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-85306bcb],
.modal-header h3[data-v-85306bcb],
.modal-header h4[data-v-85306bcb],
.modal-title[data-v-85306bcb] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-85306bcb] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-85306bcb] {
    padding: 12px 14px;
}
.modal-footer[data-v-85306bcb] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-85306bcb],
.btn-close[data-v-85306bcb],
.modal-close[data-v-85306bcb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-85306bcb]:hover,
.btn-close[data-v-85306bcb]:hover,
.modal-close[data-v-85306bcb]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-85306bcb],
.btn-secondary[data-v-85306bcb],
.btn-cancel[data-v-85306bcb],
.btn-cancel-edit[data-v-85306bcb],
.btn-save[data-v-85306bcb],
.btn-save-edit[data-v-85306bcb],
.btn-confirm[data-v-85306bcb],
.btn-danger[data-v-85306bcb],
.btn-success[data-v-85306bcb],
.btn-add[data-v-85306bcb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-85306bcb],
.btn-cancel[data-v-85306bcb],
.btn-cancel-edit[data-v-85306bcb] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-85306bcb]:hover:not(:disabled),
.btn-cancel[data-v-85306bcb]:hover:not(:disabled),
.btn-cancel-edit[data-v-85306bcb]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-85306bcb],
.btn-confirm[data-v-85306bcb],
.btn-save[data-v-85306bcb],
.btn-save-edit[data-v-85306bcb],
.btn-add[data-v-85306bcb] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-85306bcb]:hover:not(:disabled),
.btn-confirm[data-v-85306bcb]:hover:not(:disabled),
.btn-save[data-v-85306bcb]:hover:not(:disabled),
.btn-save-edit[data-v-85306bcb]:hover:not(:disabled),
.btn-add[data-v-85306bcb]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-85306bcb] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-85306bcb]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-85306bcb] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-85306bcb]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The two choices as rows, like the dashboard's and the PDF chooser's: the
   mark, what it does, and what that means. They were centred posters with a
   48px glyph over a 16px heading. */
.modal-content[data-v-85306bcb] {
  max-width: 400px;
}
.modal-description[data-v-85306bcb] {
  margin: 0 0 8px;
  font-size: 11px;
  color: #64748b;
  text-align: left;
  font-weight: 400;
}
.modal-options[data-v-85306bcb] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-option-btn[data-v-85306bcb] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.modal-option-btn[data-v-85306bcb]:not(:disabled):hover {
  border-color: #0697e4;
  background: #fff;
  transform: none;
  box-shadow: none;
}
.modal-option-btn.normal-scan[data-v-85306bcb]:not(:disabled):hover,
.modal-option-btn.hard-scan[data-v-85306bcb]:not(:disabled):hover {
  border-color: #0697e4;
  background: #fff;
}
.modal-option-btn.normal-scan:not(:disabled):hover h4[data-v-85306bcb],
.modal-option-btn.hard-scan:not(:disabled):hover h4[data-v-85306bcb],
.modal-option-btn.normal-scan:not(:disabled):hover .option-icon[data-v-85306bcb],
.modal-option-btn.hard-scan:not(:disabled):hover .option-icon[data-v-85306bcb] {
  color: #0697e4;
}
.option-icon[data-v-85306bcb] {
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  color: #0697e4;
  font-size: inherit;
}
.option-text[data-v-85306bcb] {
  display: block;
  min-width: 0;
}
.modal-option-btn h4[data-v-85306bcb] {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.modal-option-btn p[data-v-85306bcb] {
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #64748b;
}
.premium-badge[data-v-85306bcb] {
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: .4px;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-85306bcb],
.modal-body input[type="number"][data-v-85306bcb],
.modal-body input[type="email"][data-v-85306bcb],
.modal-body input[type="tel"][data-v-85306bcb],
.modal-body input[type="url"][data-v-85306bcb],
.modal-body input[type="search"][data-v-85306bcb],
.modal-body input[type="date"][data-v-85306bcb],
.modal-body input[type="password"][data-v-85306bcb],
.modal-body select[data-v-85306bcb],
.modal-body textarea[data-v-85306bcb] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-85306bcb]:focus,
.modal-body input[type="number"][data-v-85306bcb]:focus,
.modal-body input[type="email"][data-v-85306bcb]:focus,
.modal-body input[type="tel"][data-v-85306bcb]:focus,
.modal-body input[type="url"][data-v-85306bcb]:focus,
.modal-body input[type="search"][data-v-85306bcb]:focus,
.modal-body input[type="date"][data-v-85306bcb]:focus,
.modal-body input[type="password"][data-v-85306bcb]:focus,
.modal-body select[data-v-85306bcb]:focus,
.modal-body textarea[data-v-85306bcb]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-85306bcb],
.modal-body .form-label[data-v-85306bcb] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-85306bcb] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-85306bcb],
.modal-actions[data-v-85306bcb] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-85306bcb]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-85306bcb]:hover,
.btn-icon.btn-icon-danger[data-v-85306bcb]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-85306bcb] {
  transition: transform 0.15s ease;
}

.select-field[data-v-82aeb9cb] {
    display: inline-flex;
    min-width: 0;
}

/* A class the call site kept — form-input, form-control, filter-input — lands
   on this root, because that is where Vue puts a fall-through class, and it
   brings a native field's padding, border and background with it. The frame
   is the button's job, so the root carries none of it. !important because the
   page's rule and this one are of equal weight and the page's comes later. */
.select-field[data-v-82aeb9cb] {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
}
.select-field--block[data-v-82aeb9cb] {
    display: flex;
    width: 100%;
}

/* The field: the same quiet control as the pickers beside it, with the
   chevron drawn on it rather than supplied by the browser. */
.select-field .select-field-input[data-v-82aeb9cb] {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 7px 26px 7px 10px;
    background: #fff;
    border: 1px solid var(--border, #dde3ea);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary, #1e293b);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23374151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.select-field .select-field-input[data-v-82aeb9cb]:hover:not(:disabled) {
    border-color: var(--primary, #0697e4);
}
.select-field .select-field-input.open[data-v-82aeb9cb] {
    border-color: var(--primary, #0697e4);
    color: var(--primary, #0697e4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%232b82f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.5 3.5-3.5 3.5 3.5'/%3E%3C/svg%3E");
}
.select-field .select-field-input[data-v-82aeb9cb]:disabled {
    color: var(--text-light, #64748b);
    background-color: #f8fafc;
    cursor: default;
}
.select-field .select-field-input[data-v-82aeb9cb]:focus-visible {
    outline: 2px solid var(--primary, #0697e4);
    outline-offset: 1px;
}
.select-field .select-field-value[data-v-82aeb9cb] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-field .select-field-input.is-placeholder .select-field-value[data-v-82aeb9cb] {
    color: var(--text-light, #64748b);
}

/* The list, dressed like every other menu in the app. */
.select-menu[data-v-82aeb9cb] {
    position: fixed;
    /* Over every layer the app stacks: modal overlays at 9999, a modal opened
       from a modal at 10100, the original-invoice preview at 10200. A menu
       below one of those still opens — it is simply painted underneath, and
       reads as a dropdown that does nothing. */
    z-index: 100100;
    max-height: 260px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border, #dde3ea);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    overflow-y: auto;
    /* At the end of the list the wheel would otherwise carry on to the page
       behind, which moves the field and closes the menu. */
    overscroll-behavior: contain;
    font-family: inherit;
}
.select-menu-item[data-v-82aeb9cb] {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s ease;
}
.select-menu-item[data-v-82aeb9cb]:hover {
    background: var(--primary-light, #e0f2fe);
}
.select-menu-item.selected[data-v-82aeb9cb] {
    color: var(--primary, #0697e4);
    font-weight: 700;
}

.modal-overlay[data-v-7e3aa664] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn-7e3aa664 0.3s ease;
  padding: 20px;
  overflow-y: auto;
}
.bulgarian-invoice-modal[data-v-7e3aa664] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn-7e3aa664 0.3s ease;
}
.modal-header[data-v-7e3aa664] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 20px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.header-icon[data-v-7e3aa664] {
  background: var(--primary);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.icon-gas-pump[data-v-7e3aa664] {
  /* Optional: remove animation for cleaner look */
}
.header-content[data-v-7e3aa664] {
  flex: 1;
}
.header-content h3[data-v-7e3aa664] {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-subtitle[data-v-7e3aa664] {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.modal-body[data-v-7e3aa664] {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-section[data-v-7e3aa664] {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: #fef2f2;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}
.info-icon[data-v-7e3aa664] {
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.info-section p[data-v-7e3aa664] {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}
.form-group[data-v-7e3aa664] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label[data-v-7e3aa664] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-group label svg[data-v-7e3aa664] {
  font-size: 16px;
  color: var(--primary);
}
.form-select[data-v-7e3aa664] {
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}
.form-select[data-v-7e3aa664]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-select[data-v-7e3aa664]:hover {
  border-color: var(--primary);
}
.help-text[data-v-7e3aa664] {
  margin: 0;
  padding: 12px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.help-text strong[data-v-7e3aa664] {
  color: var(--text-primary);
}
.summary-box[data-v-7e3aa664] {
  background: white;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.summary-title[data-v-7e3aa664] {
  background: var(--primary);
  color: white;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.summary-content[data-v-7e3aa664] {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.summary-row[data-v-7e3aa664] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.summary-row span[data-v-7e3aa664] {
  color: var(--text-secondary);
}
.summary-row strong[data-v-7e3aa664] {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}
.modal-footer[data-v-7e3aa664] {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}
.btn-cancel[data-v-7e3aa664],
.btn-confirm[data-v-7e3aa664] {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn-cancel[data-v-7e3aa664] {
  background: white;
  color: var(--text-primary);
  border: 2px solid var(--border);
}
.btn-cancel[data-v-7e3aa664]:hover {
  background: #f8fafc;
  border-color: var(--text-secondary);
}
.btn-confirm[data-v-7e3aa664] {
  background: var(--primary);
  color: white;
}
.btn-confirm[data-v-7e3aa664]:hover:not(:disabled) {
  background: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-confirm[data-v-7e3aa664]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.loading-spinner-small[data-v-7e3aa664] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-7e3aa664 0.8s linear infinite;
}
@keyframes fadeIn-7e3aa664 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes scaleIn-7e3aa664 {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes spin-7e3aa664 {
to {
    transform: rotate(360deg);
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-7e3aa664],
.modal-container[data-v-7e3aa664],
.modal-content-large[data-v-7e3aa664] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-7e3aa664] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-7e3aa664],
.modal-header h3[data-v-7e3aa664],
.modal-header h4[data-v-7e3aa664],
.modal-title[data-v-7e3aa664] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-7e3aa664] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-7e3aa664] {
    padding: 12px 14px;
}
.modal-footer[data-v-7e3aa664] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-7e3aa664],
.btn-close[data-v-7e3aa664],
.modal-close[data-v-7e3aa664] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-7e3aa664]:hover,
.btn-close[data-v-7e3aa664]:hover,
.modal-close[data-v-7e3aa664]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-7e3aa664],
.btn-secondary[data-v-7e3aa664],
.btn-cancel[data-v-7e3aa664],
.btn-cancel-edit[data-v-7e3aa664],
.btn-save[data-v-7e3aa664],
.btn-save-edit[data-v-7e3aa664],
.btn-confirm[data-v-7e3aa664],
.btn-danger[data-v-7e3aa664],
.btn-success[data-v-7e3aa664],
.btn-add[data-v-7e3aa664] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-7e3aa664],
.btn-cancel[data-v-7e3aa664],
.btn-cancel-edit[data-v-7e3aa664] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-7e3aa664]:hover:not(:disabled),
.btn-cancel[data-v-7e3aa664]:hover:not(:disabled),
.btn-cancel-edit[data-v-7e3aa664]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-7e3aa664],
.btn-confirm[data-v-7e3aa664],
.btn-save[data-v-7e3aa664],
.btn-save-edit[data-v-7e3aa664],
.btn-add[data-v-7e3aa664] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-7e3aa664]:hover:not(:disabled),
.btn-confirm[data-v-7e3aa664]:hover:not(:disabled),
.btn-save[data-v-7e3aa664]:hover:not(:disabled),
.btn-save-edit[data-v-7e3aa664]:hover:not(:disabled),
.btn-add[data-v-7e3aa664]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-7e3aa664] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-7e3aa664]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-7e3aa664] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-7e3aa664]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-7e3aa664],
.modal-body input[type="number"][data-v-7e3aa664],
.modal-body input[type="email"][data-v-7e3aa664],
.modal-body input[type="tel"][data-v-7e3aa664],
.modal-body input[type="url"][data-v-7e3aa664],
.modal-body input[type="search"][data-v-7e3aa664],
.modal-body input[type="date"][data-v-7e3aa664],
.modal-body input[type="password"][data-v-7e3aa664],
.modal-body select[data-v-7e3aa664],
.modal-body textarea[data-v-7e3aa664] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-7e3aa664]:focus,
.modal-body input[type="number"][data-v-7e3aa664]:focus,
.modal-body input[type="email"][data-v-7e3aa664]:focus,
.modal-body input[type="tel"][data-v-7e3aa664]:focus,
.modal-body input[type="url"][data-v-7e3aa664]:focus,
.modal-body input[type="search"][data-v-7e3aa664]:focus,
.modal-body input[type="date"][data-v-7e3aa664]:focus,
.modal-body input[type="password"][data-v-7e3aa664]:focus,
.modal-body select[data-v-7e3aa664]:focus,
.modal-body textarea[data-v-7e3aa664]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-7e3aa664],
.modal-body .form-label[data-v-7e3aa664] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-7e3aa664] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-7e3aa664],
.modal-actions[data-v-7e3aa664] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-7e3aa664]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-7e3aa664]:hover,
.btn-icon.btn-icon-danger[data-v-7e3aa664]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-7e3aa664] {
  transition: transform 0.15s ease;
}

.upload-queue[data-v-9ab82eac] {
  max-width: 600px;
  margin: 0 auto;
}

/* Toggle Upload Form Buttons */
.btn-toggle-form[data-v-9ab82eac],
.btn-hide-form[data-v-9ab82eac] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 45px;
  border: 2px solid var(--primary);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
  background: white;
  color: var(--primary);
}
.btn-toggle-form[data-v-9ab82eac]:hover,
.btn-hide-form[data-v-9ab82eac]:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
}

/* Its twin's dress: the button that hides the form and the one that brings
   it back are the same action in two states, so they are drawn alike —
   hairline border, no fill, blue text, a tint and a blue edge on hover. It
   keeps the full width, because that is its place in this column. */
.btn-hide-form[data-v-9ab82eac] {
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--primary);
  font-size: 12px;
}
.btn-hide-form[data-v-9ab82eac]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: none;
}

/* "Show the upload form", dressed like the swap-company button beside it.
 *
 * The two stand next to each other on the collapsed row and are the same
 * kind of thing — a quiet action on a white bar — so they are drawn the same
 * way: a hairline border, no fill, blue text, and a tint with a blue edge on
 * hover. It was a 2px blue frame at 15px type, which read as the page's main
 * button while sitting beside a secondary one. */
.btn-toggle-form[data-v-9ab82eac] {
  width: auto;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: transparent;
  color: var(--primary);
}
.btn-toggle-form[data-v-9ab82eac]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: none;
}
.pdf-processing-banner[data-v-9ab82eac] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  animation: slideDown-9ab82eac 0.3s ease;
}

/* Bulgarian Invoice Progress Overlay */
.bulgarian-progress-overlay[data-v-9ab82eac] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn-9ab82eac 0.3s ease;
}
.bulgarian-progress-card[data-v-9ab82eac] {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: scaleIn-9ab82eac 0.3s ease;
}
.progress-header[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.progress-icon[data-v-9ab82eac] {
  font-size: 32px;
  color: #3b82f6;
}
.progress-header h3[data-v-9ab82eac] {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}
.progress-info[data-v-9ab82eac] {
  margin-bottom: 20px;
}
.progress-filename[data-v-9ab82eac] {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 8px 0;
  font-weight: 500;
}
.progress-count[data-v-9ab82eac] {
  font-size: 16px;
  color: #1e293b;
  margin: 0;
  font-weight: 600;
}
.progress-bar-container[data-v-9ab82eac] {
  width: 100%;
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-bar-fill[data-v-9ab82eac] {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 6px;
  transition: width 0.3s ease;
}
.progress-percentage[data-v-9ab82eac] {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #3b82f6;
}

/* Bulgarian Success Modal */
.bulgarian-success-modal[data-v-9ab82eac] {
  max-width: 500px;
}
.bulgarian-success-modal .modal-header[data-v-9ab82eac] {
  text-align: center;
  padding-bottom: 24px;
}
.success-icon-wrapper[data-v-9ab82eac] {
  margin-bottom: 16px;
}
.success-icon[data-v-9ab82eac] {
  font-size: 64px;
  color: #22c55e;
  animation: successPulse-9ab82eac 0.6s ease;
}
@keyframes successPulse-9ab82eac {
0% {
    transform: scale(0);
    opacity: 0;
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
.bulgarian-success-modal .modal-header h3[data-v-9ab82eac] {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
}
.success-summary[data-v-9ab82eac] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.summary-row[data-v-9ab82eac] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
}
.summary-label[data-v-9ab82eac] {
  font-size: 14px;
  color: #4b5563;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.summary-value[data-v-9ab82eac] {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
.success-row[data-v-9ab82eac] {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.success-row .summary-label[data-v-9ab82eac] {
  color: #16a34a;
}
.success-value[data-v-9ab82eac] {
  color: #16a34a;
  font-size: 20px;
}
.error-row[data-v-9ab82eac] {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.error-row .summary-label[data-v-9ab82eac] {
  color: #dc2626;
}
.error-value[data-v-9ab82eac] {
  color: #dc2626;
  font-size: 20px;
}
.btn-confirm-success[data-v-9ab82eac] {
  background: #22c55e;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
}
.btn-confirm-success[data-v-9ab82eac]:hover {
  background: #16a34a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
@keyframes fadeIn-9ab82eac {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes scaleIn-9ab82eac {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes slideDown-9ab82eac {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.form-select[data-v-9ab82eac] {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}
.form-select[data-v-9ab82eac]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.form-select[data-v-9ab82eac]:hover {
  border-color: var(--primary);
}

/* Multi-Page Mode */
.multi-page-option[data-v-9ab82eac] {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.checkbox-label[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"][data-v-9ab82eac] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.checkbox-text[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.checkbox-text svg[data-v-9ab82eac] {
  color: var(--primary);
}
.checkbox-description[data-v-9ab82eac] {
  margin: 8px 0 0 32px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Hard Scan Option */
.hard-scan-option[data-v-9ab82eac] {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.hard-scan-option .checkbox-text svg[data-v-9ab82eac] {
  color: #f59e0b;
}
.hard-scan-option .checkbox-label input[type="checkbox"][data-v-9ab82eac]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.hard-scan-option .checkbox-label[data-v-9ab82eac]:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}
.upload-zone[data-v-9ab82eac] {
  background: white;
  border: 2px solid var(--primary);
  /* 12px is the page's card corner — the cards beside this one, the filter
     card, the table and the totals all use it. */
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}
.upload-zone.disabled[data-v-9ab82eac] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.upload-zone[data-v-9ab82eac]:hover:not(.disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-light);
}
.upload-zone.drag-over[data-v-9ab82eac]:not(.disabled) {
  border-color: var(--primary-hover);
  background: var(--blue-light);
  transform: scale(1.01);
}
.upload-zone-content[data-v-9ab82eac] {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-icon-glyph[data-v-9ab82eac] {
  color: #4b5563;
}
.upload-icon[data-v-9ab82eac] {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.upload-text[data-v-9ab82eac] {
  font-size: 17px;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  font-weight: 500;
}
.upload-subtext[data-v-9ab82eac] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Limit Reached Message */
.limit-reached-message[data-v-9ab82eac] {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 2px solid #f59e0b;
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  margin-bottom: 20px;
}
.limit-title[data-v-9ab82eac] {
  font-size: 24px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 12px 0;
}
.limit-description[data-v-9ab82eac] {
  font-size: 16px;
  color: #78350f;
  margin: 0 0 20px 0;
  line-height: 1.5;
}
.limit-details[data-v-9ab82eac] {
  background: white;
  border-radius: 12px;
  padding: 16px 24px;
  margin: 0 auto 28px;
  max-width: 300px;
}
.limit-details p[data-v-9ab82eac] {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #92400e;
}
.btn-upgrade[data-v-9ab82eac] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-upgrade[data-v-9ab82eac]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.btn-upgrade[data-v-9ab82eac]:active {
  transform: translateY(0);
}
.hidden[data-v-9ab82eac] {
  display: none;
}
.upload-buttons[data-v-9ab82eac] {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

/* Mobile document-type chooser */
.doc-chooser-overlay[data-v-9ab82eac] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;           /* track the dynamic mobile viewport (address bar) */
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;      /* centre the dialog on screen */
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 2000;
}
.doc-chooser[data-v-9ab82eac] {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
.doc-chooser-title[data-v-9ab82eac] {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 4px 0 12px;
  text-align: center;
}
.doc-choice[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  margin-bottom: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}
.doc-choice[data-v-9ab82eac]:active {
  background: #eef2f7;
}
.doc-choice-icon[data-v-9ab82eac] {
  font-size: 20px;
  color: #3b82f6;
  flex-shrink: 0;
}
.doc-choice-text[data-v-9ab82eac] {
  display: flex;
  flex-direction: column;
}
.doc-choice-name[data-v-9ab82eac] {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.doc-choice-desc[data-v-9ab82eac] {
  font-size: 12px;
  color: #4b5563;
}
.doc-chooser-cancel[data-v-9ab82eac] {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Multi-page photo staging (mobile only) */
.multipage-panel[data-v-9ab82eac] {
  margin: 12px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.multipage-header[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.multipage-title[data-v-9ab82eac] {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.multipage-close[data-v-9ab82eac] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}
.multipage-close[data-v-9ab82eac]:hover {
  background: #f8fafc;
  color: #dc2626;
  border-color: #cbd5e1;
}
.multipage-close svg[data-v-9ab82eac] {
  width: 13px;
  height: 13px;
  display: block;
}
.multipage-pages[data-v-9ab82eac] {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}
.multipage-page[data-v-9ab82eac] {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 100px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.multipage-page img[data-v-9ab82eac] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.multipage-page-num[data-v-9ab82eac] {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 5px;
  padding: 0 5px;
}
.multipage-remove[data-v-9ab82eac] {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}
.multipage-remove[data-v-9ab82eac]:hover {
  background: #f8fafc;
  color: #dc2626;
  border-color: #cbd5e1;
}
.multipage-remove svg[data-v-9ab82eac] {
  width: 11px;
  height: 11px;
  display: block;
}
.multipage-actions[data-v-9ab82eac] {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.multipage-btn[data-v-9ab82eac] {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.multipage-btn svg[data-v-9ab82eac] {
  width: 13px;
  height: 13px;
  display: block;
}
.multipage-btn-add[data-v-9ab82eac] {
  background: #0ea5e9;
  color: #fff;
}
.multipage-btn-add[data-v-9ab82eac]:hover:not(:disabled) {
  background: #0284c7;
  transform: translateY(-1px);
}
.multipage-btn-done[data-v-9ab82eac] {
  background: #10b981;
  color: #fff;
}
.multipage-btn-done[data-v-9ab82eac]:hover:not(:disabled) {
  background: #059669;
  transform: translateY(-1px);
}
.multipage-btn[data-v-9ab82eac]:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.btn-camera[data-v-9ab82eac],
.btn-upload[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 28px;
  height: 45px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}
.btn-camera[data-v-9ab82eac] {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
}
.btn-camera[data-v-9ab82eac]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.btn-upload[data-v-9ab82eac] {
  background: white;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}
.btn-upload[data-v-9ab82eac]:hover {
  background: var(--bg-gray);
  border-color: var(--gray-light);
  transform: translateY(-1px);
}

/* Uploading a file is the main thing asked of this form on a desktop, where
   the camera button is not there at all, so it is the one in colour. The
   register beside it keeps the quiet treatment. */
.btn-upload--primary[data-v-9ab82eac] {
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
}
.btn-upload--primary[data-v-9ab82eac]:hover {
  background: var(--primary-hover);
  border: none;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

/* The upload queue, at the dashboard's scale.
 *
 * It was five 140px cards — a thumbnail the size of a stamp album, the name
 * on one line, the size on the next, the state on a third — which on five
 * files made the middle column taller than the screen and pulled the three
 * cards beside it out of shape. It is a list of rows now: one line each, the
 * state read from the bar under it. */
.file-queue[data-v-9ab82eac] {
  background: white;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  padding: 0;
  box-shadow: none;
}
.queue-header[data-v-9ab82eac] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #dde3ea;
}
.queue-header h3[data-v-9ab82eac] {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.btn-clear[data-v-9ab82eac] {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.btn-clear[data-v-9ab82eac]:hover {
  background: transparent;
  color: var(--primary);
  transform: translateY(-2px);
}
.file-list[data-v-9ab82eac] {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px;
}
.file-item[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  background: transparent;
  border-radius: 6px;
  border: none;
  transition: background 0.15s ease;
}
.file-item + .file-item[data-v-9ab82eac] {
  border-top: 1px solid var(--gray-lighter, #f1f5f9);
}
.file-item[data-v-9ab82eac]:hover {
  background: #fbfcfd;
}

/* Only a failure is marked on the edge.
 *
 * Every state had its own coloured bar, which put a stripe beside each row
 * saying what the row already says in words: the spinner and its text while
 * it works, the tick when it is done. The one thing worth catching the eye
 * from across the page is a file that did not go through. */
.file-item.failed[data-v-9ab82eac] {
  box-shadow: inset 2px 0 0 0 var(--danger);
}
.file-preview[data-v-9ab82eac] {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde3ea;
}
.file-preview img[data-v-9ab82eac] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-icon[data-v-9ab82eac] {
  color: var(--text-light);
}
.file-info[data-v-9ab82eac] {
  flex: 1;
  min-width: 0;
}

/* Name on the left, size on the right of the same line. */
.file-head[data-v-9ab82eac] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.file-name[data-v-9ab82eac] {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size[data-v-9ab82eac] {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-light, #64748b);
  white-space: nowrap;
}
.progress-bar[data-v-9ab82eac] {
  height: 3px;
  background: var(--gray-lighter, #f1f5f9);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
  position: relative;
}
.progress-fill[data-v-9ab82eac] {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}
.progress-fill.processing[data-v-9ab82eac] {
  background: var(--warning);
}
.scanning-line[data-v-9ab82eac] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 60%,
    transparent 100%
  );
  animation: scan-9ab82eac 2s ease-in-out infinite;
}
@keyframes scan-9ab82eac {
0% {
    transform: translateX(-100%);
}
100% {
    transform: translateX(100%);
}
}
.upload-state[data-v-9ab82eac] {
  margin-top: 2px;
}
.processing-state[data-v-9ab82eac] {
  margin-top: 2px;
}
.processing-text[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--warning);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 0;
}
.loading-spinner[data-v-9ab82eac] {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 2px solid var(--warning-light);
  border-top-color: var(--warning);
  border-radius: 50%;
  animation: spin-9ab82eac 1s linear infinite;
}
@keyframes spin-9ab82eac {
to { transform: rotate(360deg);
}
}
.status-success[data-v-9ab82eac] {
  color: var(--success);
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}
.status-error[data-v-9ab82eac] {
  color: var(--danger);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-actions[data-v-9ab82eac] {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

/* The marks at the end of a row, drawn like the dashboard's: nothing behind
   them, and the hover is the mark turning blue and lifting two pixels. */
.btn-queue-action[data-v-9ab82eac] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.btn-queue-action[data-v-9ab82eac]:hover {
  background: transparent;
  color: var(--primary);
  transform: translateY(-2px);
}
.btn-queue-action.btn-view-invoice[data-v-9ab82eac] {
  color: #0697e4;
}
.btn-queue-action.btn-retry[data-v-9ab82eac],
.btn-queue-action.btn-rescan[data-v-9ab82eac] {
  color: #d08700;
}
.btn-view[data-v-9ab82eac] {
  background: #0ea5e9;
  color: white;
}
.btn-view[data-v-9ab82eac]:hover {
  background: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Success Card */
.success-card[data-v-9ab82eac] {
  margin-top: 24px;
  background: white;
  border: 3px solid var(--success);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Consolidated Success Card */
/* A finished file is a row like the ones still working: the same height, the
   same thumbnail, the same three marks at the end. */
.success-card-consolidated[data-v-9ab82eac] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: white;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: none;
  margin: 0;
  transition: background 0.15s ease;
}
.success-card-consolidated[data-v-9ab82eac]:hover {
  background: #fbfcfd;
}
.success-card-consolidated + .success-card-consolidated[data-v-9ab82eac],
.success-card-consolidated + .file-item[data-v-9ab82eac],
.file-item + .success-card-consolidated[data-v-9ab82eac] {
  border-top: 1px solid var(--gray-lighter, #f1f5f9);
}
.original-thumbnail[data-v-9ab82eac] {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde3ea;
  transition: border-color 0.15s ease;
}
.original-thumbnail[data-v-9ab82eac]:hover {
  border-color: var(--primary);
}
.thumbnail-image[data-v-9ab82eac] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbnail-placeholder[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-light);
}
.success-info[data-v-9ab82eac] {
  flex: 1;
  min-width: 0;
}

/* What was read off the page, on two short lines instead of a striped table:
   the number with the counterparty, then the sum with the date. */
.success-head[data-v-9ab82eac] {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.success-check[data-v-9ab82eac] {
  align-self: center;
  flex-shrink: 0;
  color: var(--success, #10b981);
}
.success-number[data-v-9ab82eac] {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.success-seller[data-v-9ab82eac] {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.success-meta[data-v-9ab82eac] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 1px;
  padding-left: 19px;
  font-size: 11px;
  color: var(--text-light, #64748b);
}
.success-amount[data-v-9ab82eac] {
  font-weight: 700;
  color: var(--primary);
}
.success-actions[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
.upload-zone[data-v-9ab82eac] {
    padding: 40px 20px;
}
.upload-buttons[data-v-9ab82eac] {
    flex-direction: column;
}

  /* The rows stay rows on a phone: they are one line high now, and stacking
     their parts was what the 140px cards needed, not these. The counterparty
     is what gives way when there is no width for it. */
.success-seller[data-v-9ab82eac] {
    display: none;
}
.success-card[data-v-9ab82eac] {
    padding: 24px 20px;
}
}

/* Multi-Page PDF Modal */
.modal-overlay[data-v-9ab82eac] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  animation: fadeIn-9ab82eac 0.3s ease;
}
.modal-content[data-v-9ab82eac] {
  background: white;
  border-radius: 12px;
  padding: 0;
  max-width: 550px;
  width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: slideUp-9ab82eac 0.3s ease;
}
@keyframes slideUp-9ab82eac {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.modal-header[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #dde3ea;
  position: relative;
}
.header-icon[data-v-9ab82eac] {
  background: #0ea5e9;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.register-payment-modal[data-v-9ab82eac] {
  max-width: 480px;
}
.register-payment-modal .modal-header[data-v-9ab82eac] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.register-payment-modal .modal-header-content[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.register-payment-modal .modal-header h2[data-v-9ab82eac] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.register-payment-modal .btn-icon[data-v-9ab82eac] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.register-payment-modal .btn-icon[data-v-9ab82eac]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.register-payment-hint[data-v-9ab82eac] {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.register-payment-modal .modal-options[data-v-9ab82eac] {
  grid-template-columns: 1fr;
}
.register-payment-modal .payment-option[data-v-9ab82eac] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 16px;
}
.register-payment-modal .payment-info[data-v-9ab82eac] {
  flex: 1;
  min-width: 0;
}
.payment-icon[data-v-9ab82eac] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}
.register-payment-modal .payment-option h4[data-v-9ab82eac],
.register-payment-modal .payment-option p[data-v-9ab82eac] {
  text-align: left;
}
.register-payment-modal .payment-option h4[data-v-9ab82eac] {
  margin-bottom: 2px;
}
.payment-icon-blue[data-v-9ab82eac] {
  background: var(--primary, #0ea5e9);
}
.payment-icon-green[data-v-9ab82eac] {
  background: #10b981;
}
.header-content[data-v-9ab82eac] {
  flex: 1;
}
.header-content h3[data-v-9ab82eac] {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
.modal-subtitle[data-v-9ab82eac] {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
}
.modal-body[data-v-9ab82eac] {
  padding: 24px;
}

/* The choice dialogue, at the dashboard's scale.
 *
 * One size for all three densities on purpose: a dialogue is read once, in
 * front of everything else, and it should not be a different size depending
 * on how tight the table behind it is set. */
.modal-choice[data-v-9ab82eac] {
  max-width: 380px;
  /* The dashboard's card: a hairline edge and a shadow soft enough that the
     edge is what draws it, not the shadow. */
  border: 1px solid #dde3ea;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-choice .header-content h3[data-v-9ab82eac] {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.modal-choice .modal-subtitle[data-v-9ab82eac] {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.modal-choice .modal-body[data-v-9ab82eac] {
  padding: 10px;
}

/* The close, as the quiet icon button the rest of the app uses. */
.modal-close[data-v-9ab82eac] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Hovering turns the mark blue and lifts it two pixels, with nothing drawn
   behind it — the navigation's gesture, now the app's one hover for a mark
   that is on its own. */
.modal-close[data-v-9ab82eac]:hover {
  background: transparent;
  color: var(--primary);
  transform: translateY(-2px);
}
.modal-description[data-v-9ab82eac] {
  margin: 0 0 24px 0;
  color: #4b5563;
  font-size: 15px;
  text-align: center;
  line-height: 1.6;
  font-weight: 500;
}
.modal-body strong[data-v-9ab82eac] {
  color: var(--primary);
  font-weight: 700;
}
.modal-options[data-v-9ab82eac] {
  display: grid;
  gap: 6px;
}

/* A choice reads as a row, like everything else in this app: the mark, then
   what it does, then what that means. It was a centred card with a 56px
   solid glyph over a 16px heading — three posters stacked in a dialogue. */
.modal-option-btn[data-v-9ab82eac] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* The edge turns blue and the mark with it; nothing fills. A wash the
   colour of a chosen row made hovering look like choosing. */
.modal-option-btn[data-v-9ab82eac]:hover {
  border-color: var(--primary);
  background: #fff;
}
.modal-option-btn[data-v-9ab82eac]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.option-text[data-v-9ab82eac] {
  display: block;
}
.modal-option-btn h4[data-v-9ab82eac] {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.modal-option-btn p[data-v-9ab82eac] {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.4;
}
.option-icon[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  transition: color 0.2s ease;
  color: var(--primary);
}
.modal-option-btn:hover h4[data-v-9ab82eac],
.modal-option-btn:hover .option-icon[data-v-9ab82eac] {
  color: var(--primary);
}

/* Mixed Mode Modal */
/* The classification sheet.
 *
 * Same card as the dashboard: a hairline edge, a soft shadow and one 12px
 * radius. The previews keep the size they had — 200px columns at a page's
 * own proportions — and everything around them is drawn thin so the pages
 * are what the eye lands on. */
.mixed-mode-modal[data-v-9ab82eac] {
  max-width: 90%;
  width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #dde3ea;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.mixed-mode-modal .header-content h3[data-v-9ab82eac] {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.mixed-mode-modal .modal-subtitle[data-v-9ab82eac] {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.mixed-mode-body[data-v-9ab82eac] {
  max-height: calc(90vh - 140px);
  overflow-y: auto;
  padding: 12px;
}
.pages-classification-grid[data-v-9ab82eac] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.page-classification-item[data-v-9ab82eac] {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  background: white;
  transition: border-color 0.15s ease;
}
.page-classification-item.page-excluded[data-v-9ab82eac] {
  opacity: 0.55;
  background: #fbfcfd;
}
.page-classification-item.page-excluded .page-preview-img[data-v-9ab82eac] {
  filter: grayscale(100%);
}

/* Tint and edge on hover, no lift — the same as a row in the table. */
.page-classification-item[data-v-9ab82eac]:hover {
  border-color: var(--primary);
}
.page-classification-item.page-excluded[data-v-9ab82eac]:hover {
  border-color: #4b5563;
}
.page-preview-wrapper[data-v-9ab82eac] {
  position: relative;
  aspect-ratio: 1 / 1.4;
  background: var(--bg-gray);
  overflow: hidden;
}

/* Nothing around the box: the chip it sat on made it read as two squares,
   one inside the other, where the dashboard has just the one. */
.page-checkbox-wrapper[data-v-9ab82eac] {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The dashboard's box, drawn here too: a plain square with a thin stroked
   tick, nothing tinted and nothing typed from a font. The app's stylesheet
   rules it is overriding all carry !important. */
.page-checkbox[data-v-9ab82eac] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.page-checkbox[data-v-9ab82eac]:hover {
  border-color: #4b5563 !important;
}
.page-checkbox[data-v-9ab82eac]:checked {
  background-color: #fff !important;
  border-color: #4b5563 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}
.page-checkbox[data-v-9ab82eac]::before,
.page-checkbox[data-v-9ab82eac]:checked::before {
  content: none !important;
  display: none !important;
}
.page-preview-img[data-v-9ab82eac] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Which page this is: a label on the sheet, not a black sticker over it. */
.page-number-badge[data-v-9ab82eac] {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dde3ea;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}
.page-rotation-controls[data-v-9ab82eac] {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.page-preview-wrapper:hover .page-rotation-controls[data-v-9ab82eac] {
  opacity: 1;
}

/* A touch screen never hovers, so on one they are simply there — otherwise
   a page photographed sideways could not be turned at all. */
@media (hover: none) {
.page-rotation-controls[data-v-9ab82eac] {
    opacity: 1;
}
}
.btn-rotate[data-v-9ab82eac] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #dde3ea;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

/* The chip stays as it is — it is what keeps the mark legible over a
   photographed page — and the hover is the mark turning blue and lifting. */
.btn-rotate[data-v-9ab82eac]:hover {
  color: var(--primary);
  transform: translateY(-2px);
}
.page-classification-controls[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: white;
  border-top: 1px solid var(--gray-lighter, #f1f5f9);
}
.classification-label[data-v-9ab82eac] {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  /* The name of the field gives way before its value does. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The picker: the app's quiet control with the chevron drawn on it, the same
   as the type and per-page selects on the dashboard. */
.invoice-pick[data-v-9ab82eac] {
  /* Never squeezed: it holds the number, which is the point of the card. */
  flex: 0 0 auto;
  min-width: 52px;
  margin-left: auto;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23374151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invoice-pick[data-v-9ab82eac]:hover:not(:disabled) {
  border-color: var(--primary);
}
.invoice-pick.open[data-v-9ab82eac] {
  border-color: var(--primary);
  color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%232b82f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.5 3.5-3.5 3.5 3.5'/%3E%3C/svg%3E");
}
.invoice-pick[data-v-9ab82eac]:disabled {
  color: var(--text-light, #64748b);
  cursor: default;
}
.classification-summary[data-v-9ab82eac] {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
}
.classification-summary h4[data-v-9ab82eac] {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

/* The groups read as a list, not as a stack of cards: as many across as fit,
   each one line. */
.summary-items[data-v-9ab82eac] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.summary-item[data-v-9ab82eac] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.summary-item svg[data-v-9ab82eac] {
  color: var(--primary);
  flex-shrink: 0;
}
.summary-item strong[data-v-9ab82eac] {
  color: var(--text-primary);
  font-weight: 700;
}
.modal-footer[data-v-9ab82eac] {
  padding: 10px 14px;
  border-top: 1px solid #dde3ea;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: white;
}
.btn-cancel-mixed[data-v-9ab82eac],
.btn-confirm-mixed[data-v-9ab82eac] {
  padding: 6px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-cancel-mixed[data-v-9ab82eac] {
  background: white;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-cancel-mixed[data-v-9ab82eac]:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-confirm-mixed[data-v-9ab82eac] {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: white;
}
.btn-confirm-mixed[data-v-9ab82eac]:hover:not(:disabled) {
  background: var(--primary-hover);
}
.btn-confirm-mixed[data-v-9ab82eac]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* The invoice-number menu: the same white panel as every other dropdown in
   the app, in the body so the card it belongs to cannot clip it. */
.invoice-menu[data-v-9ab82eac] {
  position: fixed;
  /* Over the overlay, which sits at 9999 — the menu is teleported to the
     body, so it is that z-index it has to clear, not the card's. */
  z-index: 10050;
  max-height: 240px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  /* At the end of the list the wheel would otherwise carry on to the page
     behind, which moves the menu's anchor and closes it. */
  overscroll-behavior: contain;
}
.invoice-menu-item[data-v-9ab82eac] {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.invoice-menu-item[data-v-9ab82eac]:hover {
  background: var(--primary-light, #e0f2fe);
}
.invoice-menu-item.selected[data-v-9ab82eac] {
  color: var(--primary);
  font-weight: 700;
}

/* Starting a new invoice is a different kind of action, so it sits under a
   line rather than in the run of numbers. */
.invoice-menu-item--new[data-v-9ab82eac] {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--gray-lighter, #f1f5f9);
  border-radius: 0 0 6px 6px;
  color: var(--primary);
  font-weight: 600;
}
.loading-spinner-small[data-v-9ab82eac] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-9ab82eac 0.8s linear infinite;
}
@media (max-width: 640px) {
.modal-content[data-v-9ab82eac] {
    width: 95%;
    margin: 20px;
}

  /* The two redrawn dialogues are excluded: they are set at one compact size
     for every screen and density, and these were loosening them back to the
     old poster proportions on a phone. */
.modal-content:not(.modal-choice):not(.mixed-mode-modal) .modal-header[data-v-9ab82eac],
  .modal-content:not(.modal-choice):not(.mixed-mode-modal) .modal-body[data-v-9ab82eac] {
    padding: 20px;
}
.modal-content:not(.modal-choice) .modal-option-btn[data-v-9ab82eac] {
    padding: 16px;
}

  /* Full bleed on a phone, so no edge and no corners to draw. */
.mixed-mode-modal[data-v-9ab82eac] {
    max-width: 100%;
    width: 100%;
    margin: 0;
    max-height: 100vh;
    border: none;
    border-radius: 0;
}

  /* Two across: the pages are what is being judged here, and one per row
     would mean scrolling past a screenful for every page. */
.pages-classification-grid[data-v-9ab82eac] {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

  /* The label above the picker, not beside it — side by side there is room
     for about three characters of the invoice number. */
.page-classification-controls[data-v-9ab82eac] {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}
.invoice-pick[data-v-9ab82eac] {
    width: 100%;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-9ab82eac],
.modal-container[data-v-9ab82eac],
.modal-content-large[data-v-9ab82eac] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-9ab82eac] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-9ab82eac],
.modal-header h3[data-v-9ab82eac],
.modal-header h4[data-v-9ab82eac],
.modal-title[data-v-9ab82eac] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-9ab82eac] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #4b5563;
}
.modal-body[data-v-9ab82eac] {
    padding: 12px 14px;
}
.modal-footer[data-v-9ab82eac] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-9ab82eac],
.btn-close[data-v-9ab82eac],
.modal-close[data-v-9ab82eac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4b5563;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-9ab82eac]:hover,
.btn-close[data-v-9ab82eac]:hover,
.modal-close[data-v-9ab82eac]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-9ab82eac],
.btn-secondary[data-v-9ab82eac],
.btn-cancel[data-v-9ab82eac],
.btn-cancel-edit[data-v-9ab82eac],
.btn-save[data-v-9ab82eac],
.btn-save-edit[data-v-9ab82eac],
.btn-confirm[data-v-9ab82eac],
.btn-danger[data-v-9ab82eac],
.btn-success[data-v-9ab82eac],
.btn-add[data-v-9ab82eac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-9ab82eac],
.btn-cancel[data-v-9ab82eac],
.btn-cancel-edit[data-v-9ab82eac] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-9ab82eac]:hover:not(:disabled),
.btn-cancel[data-v-9ab82eac]:hover:not(:disabled),
.btn-cancel-edit[data-v-9ab82eac]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-9ab82eac],
.btn-confirm[data-v-9ab82eac],
.btn-save[data-v-9ab82eac],
.btn-save-edit[data-v-9ab82eac],
.btn-add[data-v-9ab82eac] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-9ab82eac]:hover:not(:disabled),
.btn-confirm[data-v-9ab82eac]:hover:not(:disabled),
.btn-save[data-v-9ab82eac]:hover:not(:disabled),
.btn-save-edit[data-v-9ab82eac]:hover:not(:disabled),
.btn-add[data-v-9ab82eac]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-9ab82eac] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-9ab82eac]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-9ab82eac] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-9ab82eac]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The row of answers under a question — "delete these seven?" — is a footer
   like any other: a hairline above it and the two buttons at its end. */
.modal-actions[data-v-9ab82eac] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #dde3ea;
    background: #fff;
}

/* The "what are you photographing" sheet, in the same dress as the choice
   dialogue it stands in for: one 12px card, hairline edge, rows not posters. */
.doc-chooser[data-v-9ab82eac] {
  max-width: 380px;
  padding: 10px;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.doc-chooser-title[data-v-9ab82eac] {
  margin: 2px 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.doc-choice[data-v-9ab82eac] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  text-align: left;
}
.doc-choice + .doc-choice[data-v-9ab82eac] {
  margin-top: 6px;
}
.doc-choice[data-v-9ab82eac]:hover {
  border-color: var(--primary, #0697e4);
  background: #fff;
  transform: none;
  box-shadow: none;
}
.doc-choice-icon[data-v-9ab82eac] {
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--primary, #0697e4);
  font-size: inherit;
}
.doc-choice-icon svg[data-v-9ab82eac] {
  width: 18px;
  height: 18px;
}
.doc-choice-name[data-v-9ab82eac] {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.doc-choice-desc[data-v-9ab82eac] {
  font-size: 11px;
  color: #4b5563;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-9ab82eac] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-9ab82eac],
.modal-actions[data-v-9ab82eac] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-9ab82eac]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-9ab82eac]:hover,
.btn-icon.btn-icon-danger[data-v-9ab82eac]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-9ab82eac] {
  transition: transform 0.15s ease;
}

.company-selector[data-v-5a3e7032] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selector-label[data-v-5a3e7032] {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.selector-wrapper[data-v-5a3e7032] {
  position: relative;
}
.selector-input[data-v-5a3e7032] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
}
.selector-input[data-v-5a3e7032]:hover:not(.disabled) {
  border-color: var(--gray-light);
}
.selector-input.open[data-v-5a3e7032] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.company-selector.active-filter .selector-input[data-v-5a3e7032]:not(.open) {
  border: 2px solid #0ea5e9;
  background: rgba(14, 165, 233, 0.05);
}
.selector-input.disabled[data-v-5a3e7032] {
  background: var(--bg-gray);
  cursor: not-allowed;
  opacity: 0.6;
}
.search-input[data-v-5a3e7032] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  padding: 0;
}
.search-input[data-v-5a3e7032]::placeholder {
  color: var(--text-light);
}
.selected-value[data-v-5a3e7032] {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selector-input:not(.open) .selected-value[data-v-5a3e7032]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-light);
}
.dropdown-icon[data-v-5a3e7032] {
  position: absolute;
  right: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  font-size: 12px;
  pointer-events: none;
}
.dropdown-icon.rotate[data-v-5a3e7032] {
  transform: rotate(180deg);
}
.dropdown-menu[data-v-5a3e7032] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}
.dropdown-list[data-v-5a3e7032] {
  max-height: 300px;
  overflow-y: auto;
}
.dropdown-item[data-v-5a3e7032] {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--gray-lighter);
}
.dropdown-item[data-v-5a3e7032]:last-child {
  border-bottom: none;
}
.dropdown-item[data-v-5a3e7032]:hover,
.dropdown-item.highlighted[data-v-5a3e7032] {
  background: var(--primary-light);
}
.dropdown-item.selected[data-v-5a3e7032] {
  background: var(--primary-light);
  font-weight: 600;
}
.dropdown-item.clear-option[data-v-5a3e7032] {
  font-style: italic;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}
.dropdown-item.clear-option.selected[data-v-5a3e7032] {
  font-style: normal;
  font-weight: 600;
  color: var(--text-primary);
}
.dropdown-item.loading[data-v-5a3e7032],
.dropdown-item.empty[data-v-5a3e7032] {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--text-secondary);
  cursor: default;
  padding: 16px;
}
.dropdown-item.empty-with-action[data-v-5a3e7032] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  color: var(--text-secondary);
  cursor: default;
  padding: 16px;
}
.empty-message[data-v-5a3e7032] {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}
.btn-create-default[data-v-5a3e7032] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}
.btn-create-default[data-v-5a3e7032]:hover:not(:disabled) {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.btn-create-default[data-v-5a3e7032]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.btn-create-default svg[data-v-5a3e7032] {
  flex-shrink: 0;
}
.dropdown-item.loading[data-v-5a3e7032]:hover,
.dropdown-item.empty[data-v-5a3e7032]:hover,
.dropdown-item.empty-with-action[data-v-5a3e7032]:hover {
  background: white;
}
.company-name[data-v-5a3e7032] {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.company-vat[data-v-5a3e7032] {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.spinner-small[data-v-5a3e7032] {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-5a3e7032 0.6s linear infinite;
}
@keyframes spin-5a3e7032 {
to { transform: rotate(360deg);
}
}
.selector-error[data-v-5a3e7032] {
  font-size: 12px;
  color: var(--danger);
  font-style: italic;
}

.vendor-selector[data-v-8c281b8d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selector-label[data-v-8c281b8d] {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.selector-wrapper[data-v-8c281b8d] {
  position: relative;
}
.selector-input[data-v-8c281b8d] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
}
.selector-input[data-v-8c281b8d]:hover:not(.disabled) {
  border-color: var(--gray-light);
}
.selector-input.open[data-v-8c281b8d] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.vendor-selector.active-filter .selector-input[data-v-8c281b8d]:not(.open) {
  border: 2px solid #0ea5e9;
  background: rgba(14, 165, 233, 0.05);
}
.selector-input.disabled[data-v-8c281b8d] {
  background: var(--bg-gray);
  cursor: not-allowed;
  opacity: 0.6;
}
.search-input[data-v-8c281b8d] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  padding: 0;
}
.search-input[data-v-8c281b8d]::placeholder {
  color: var(--text-light);
}
.selected-value[data-v-8c281b8d] {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-icon[data-v-8c281b8d] {
  position: absolute;
  right: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  font-size: 12px;
  pointer-events: none;
}
.dropdown-icon.rotate[data-v-8c281b8d] {
  transform: rotate(180deg);
}
.dropdown-menu[data-v-8c281b8d] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}
.dropdown-list[data-v-8c281b8d] {
  max-height: 300px;
  overflow-y: auto;
}
.dropdown-item[data-v-8c281b8d] {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--gray-lighter);
}
.dropdown-item[data-v-8c281b8d]:last-child {
  border-bottom: none;
}
.dropdown-item[data-v-8c281b8d]:hover,
.dropdown-item.highlighted[data-v-8c281b8d] {
  background: var(--primary-light);
}
.dropdown-item.selected[data-v-8c281b8d] {
  background: var(--primary-light);
  font-weight: 600;
}
.dropdown-item.clear-option[data-v-8c281b8d] {
  font-style: italic;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}
.dropdown-item.clear-option.selected[data-v-8c281b8d] {
  font-style: normal;
  font-weight: 600;
  color: var(--text-primary);
}
.dropdown-item.loading[data-v-8c281b8d],
.dropdown-item.empty[data-v-8c281b8d] {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--text-secondary);
  cursor: default;
  padding: 16px;
}
.dropdown-item.loading[data-v-8c281b8d]:hover,
.dropdown-item.empty[data-v-8c281b8d]:hover {
  background: white;
}
.vendor-name[data-v-8c281b8d] {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.vendor-vat[data-v-8c281b8d] {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.spinner-small[data-v-8c281b8d] {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-8c281b8d 0.6s linear infinite;
}
@keyframes spin-8c281b8d {
to { transform: rotate(360deg);
}
}
.selector-error[data-v-8c281b8d] {
  font-size: 12px;
  color: var(--danger);
  font-style: italic;
}

.type-selector[data-v-0d0c4e52] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selector-label[data-v-0d0c4e52] {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.selector-wrapper[data-v-0d0c4e52] {
  position: relative;
}
.selector-input[data-v-0d0c4e52] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
}
.selector-input[data-v-0d0c4e52]:hover:not(.disabled) {
  border-color: var(--gray-light);
}
.selector-input.open[data-v-0d0c4e52] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.type-selector.active-filter .selector-input[data-v-0d0c4e52]:not(.open) {
  border: 2px solid #0ea5e9;
  background: rgba(14, 165, 233, 0.05);
}
.selector-input.disabled[data-v-0d0c4e52] {
  background: var(--bg-gray);
  cursor: not-allowed;
  opacity: 0.6;
}
.search-input[data-v-0d0c4e52] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  padding: 0;
}
.search-input[data-v-0d0c4e52]::placeholder {
  color: var(--text-light);
}
.selected-value[data-v-0d0c4e52] {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-icon[data-v-0d0c4e52] {
  position: absolute;
  right: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  font-size: 12px;
  pointer-events: none;
}
.dropdown-icon.rotate[data-v-0d0c4e52] {
  transform: rotate(180deg);
}
.dropdown-menu[data-v-0d0c4e52] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 250px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}
.dropdown-list[data-v-0d0c4e52] {
  max-height: 250px;
  overflow-y: auto;
}
.dropdown-item[data-v-0d0c4e52] {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--gray-lighter);
}
.dropdown-item[data-v-0d0c4e52]:last-child {
  border-bottom: none;
}
.dropdown-item[data-v-0d0c4e52]:hover,
.dropdown-item.highlighted[data-v-0d0c4e52] {
  background: var(--primary-light);
}
.dropdown-item.selected[data-v-0d0c4e52] {
  background: var(--primary-light);
  font-weight: 600;
}
.dropdown-item.empty[data-v-0d0c4e52] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: default;
  padding: 16px;
}
.dropdown-item.empty[data-v-0d0c4e52]:hover {
  background: white;
}
.type-name[data-v-0d0c4e52] {
  font-size: 14px;
  color: var(--text-primary);
}

.custom-select[data-v-d3085b73] {
  position: relative;
}
.select-input[data-v-d3085b73] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
}
.select-input[data-v-d3085b73]:hover {
  border-color: var(--gray-light);
}
.select-input.open[data-v-d3085b73] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.selected-value[data-v-d3085b73] {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-icon[data-v-d3085b73] {
  position: absolute;
  right: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  font-size: 12px;
  pointer-events: none;
}
.dropdown-icon.rotate[data-v-d3085b73] {
  transform: rotate(180deg);
}
.dropdown-menu[data-v-d3085b73] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 250px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow-y: auto;
}
.dropdown-item[data-v-d3085b73] {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--gray-lighter);
}
.dropdown-item[data-v-d3085b73]:last-child {
  border-bottom: none;
}
.dropdown-item[data-v-d3085b73]:hover {
  background: var(--primary-light);
}
.dropdown-item.selected[data-v-d3085b73] {
  background: var(--primary-light);
  font-weight: 600;
}
.option-label[data-v-d3085b73] {
  font-size: 14px;
  color: var(--text-primary);
}

.scans-table-wrapper[data-v-18391467] {
    width: 100%;
}

/* Loading State */
.loading-state[data-v-18391467] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 24px;
    color: var(--text-secondary);
}
.spinner-large[data-v-18391467] {
    width: 56px;
    height: 56px;
    border: 5px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-18391467 0.8s linear infinite;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}
@keyframes spin-18391467 {
to { transform: rotate(360deg);
}
}

/* Empty State */
.empty-state[data-v-18391467] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    text-align: center;
}
.empty-icon[data-v-18391467] {
    color: var(--text-light);
}
.empty-title[data-v-18391467] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 4px 0;
    letter-spacing: -0.02em;
}
.empty-text[data-v-18391467] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.btn-start-scanning[data-v-18391467] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border: none;
    /* 10px, like the upload buttons it stands in for — it was a full pill,
       the only rounded-off control on the page. */
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
    letter-spacing: -0.01em;
}
.btn-start-scanning[data-v-18391467]:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.45);
}

/* Scans List */
/* No border of its own. The card around it draws one already, and the two
   lines sat a pixel apart — which read as a single thick edge, with two
   different corner radii fighting at each corner. */
.scans-list[data-v-18391467] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
}
.date-separator[data-v-18391467] {
    padding: 7px 18px;
    border-bottom: 1px solid #eef1f4;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--white);
}
.date-separator[data-v-18391467]:first-child {
    border-top: none;
}

/* Table Headers (Desktop Only) */
.table-headers[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf2;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4b5563;
}
.header-checkbox[data-v-18391467] {
    display: flex;
    align-items: center;
    width: 16px;
    flex-shrink: 0;
}
.header-thumbnail[data-v-18391467] {
    width: 60px;
    flex-shrink: 0;
}
.header-info[data-v-18391467] {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-sep[data-v-18391467] {
    color: #cbd5e1;
    font-weight: 400;
}
.header-amount[data-v-18391467] {
    width: 140px;
    flex-shrink: 0;
}
.header-status[data-v-18391467] {
    width: 100px;
    flex-shrink: 0;
    text-align: center;
}
.header-actions[data-v-18391467] {
    width: 160px;
    flex-shrink: 0;
    text-align: right;
}
.sortable-header[data-v-18391467] {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}
.header-status.sortable-header[data-v-18391467] {
    justify-content: center;
}
.sortable-header[data-v-18391467]:hover {
    color: #334155;
}
.sortable-header .sort-icon[data-v-18391467] {
    /* Sized by the component, not by the type size: it is a drawing now. */
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}
.sortable-header:hover .sort-icon[data-v-18391467],
.sortable-header.sort-active .sort-icon[data-v-18391467] {
    opacity: 1;
}
.sortable-header.sort-active[data-v-18391467] {
    color: var(--primary-color, #3b82f6);
}
.date-header[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.date-label[data-v-18391467] {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.scan-row[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: white;
    border-bottom: 1px solid #dde3ea;
    transition: all 0.2s ease;
    cursor: pointer;
    /* Virtualize long lists: the browser skips rendering/layout for rows that
       are off-screen, keeping large registers (hundreds of rows) smooth.
       contain-intrinsic-size reserves the right scroll height as a placeholder. */
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
}
.scan-row[data-v-18391467]:hover {
    background: #f8fafc;
    border-left: 3px solid #0ea5e9;
    padding-left: 15px;
}
.scan-row.selected[data-v-18391467] {
    background: #eff6ff;
    border-left: 3px solid #0ea5e9;
    padding-left: 15px;
}
.scan-row.is-checked[data-v-18391467] {
    background: linear-gradient(90deg, #d1fae5 0%, #f0fdf4 30%, #ffffff 100%);
}
.scan-row.is-checked[data-v-18391467]:hover {
    background: linear-gradient(90deg, #d1fae5 0%, #ecfdf5 30%, #f8fafc 100%);
}
.scan-row.is-checked.selected[data-v-18391467] {
    background: linear-gradient(90deg, #a7f3d0 0%, #d1fae5 30%, #f0fdf4 100%);
    box-shadow: -3px 0 0 0 #10b981;
}
.scan-row.has-warning[data-v-18391467] {
    background: linear-gradient(90deg, #ffeaa7 0%, #fff3cd 30%, #ffffff 100%);
    border-left: 3px solid #ffc107;
}
.scan-row.has-warning[data-v-18391467]:hover {
    background: linear-gradient(90deg, #ffde7d 0%, #ffeaa7 30%, #fffbf0 100%);
}
.scan-row.has-warning.selected[data-v-18391467] {
    background: linear-gradient(90deg, #ffde7d 0%, #ffeaa7 30%, #fffbf0 100%);
    box-shadow: -3px 0 0 0 #ffc107;
}
.scan-row.has-warning.is-checked[data-v-18391467] {
    background: linear-gradient(90deg, #d1fae5 0%, #f5fde9 15%, #fff3cd 30%, #ffffff 100%);
}
.scan-row.has-warning.is-checked.selected[data-v-18391467] {
    background: linear-gradient(90deg, #bbf7d0 0%, #ecf9d5 15%, #ffeaa7 30%, #fffbf0 100%);
    box-shadow: -3px 0 0 0 #10b981, -6px 0 0 0 #ffc107;
}
.scan-row[data-v-18391467]:last-child {
    border-bottom: none;
}

/* Archived Row Styles */
.scan-row.status-archived[data-v-18391467] {
    opacity: 0.7;
    background: #f8fafc;
}
.scan-row.status-archived[data-v-18391467]:hover {
    opacity: 0.85;
    background: #f1f5f9;
}
.scan-row.status-archived .invoice-number[data-v-18391467],
.scan-row.status-archived .company-text[data-v-18391467] {
    color: #4b5563;
}
.scan-row.status-archived .amount-value[data-v-18391467] {
    color: #4b5563;
}

/* Upload Row Styles */
.upload-row[data-v-18391467] {
    background: #fefce8;
    cursor: default;
}
.upload-row[data-v-18391467]:hover {
    background: #fef9c3;
}
.upload-row.status-uploading[data-v-18391467] {
    background: #eff6ff;
}
.upload-row.status-processing[data-v-18391467] {
    background: #fef3c7;
}
.upload-row.status-completed[data-v-18391467] {
    background: #dcfce7;
}
.upload-row.status-failed[data-v-18391467] {
    background: #fee2e2;
}
.checkbox-placeholder[data-v-18391467] {
    width: 13px;
    height: 13px;
}
.upload-progress[data-v-18391467] {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}
.spinner-tiny[data-v-18391467] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-18391467 0.6s linear infinite;
}
.upload-error[data-v-18391467] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

/* Checkbox */
.scan-checkbox[data-v-18391467] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* A plain tick box.
 *
 * Three things were drawing it and none of them belonged in these rows: the
 * app's stylesheet typed a black ✓ character into a white square, this file
 * rounded the square to 6px and grew it on hover, and the browser's own
 * control fills itself solid blue when ticked.
 *
 * So it is drawn here instead, and drawn as a tick: a thin stroked check in
 * the same weight as the icons beside it, on a quiet square that does not
 * change colour. Nothing is tinted, nothing is typed from a font.
 *
 * !important throughout — the rules being overridden all carry it.
 */
.checkbox-input[data-v-18391467],
.date-checkbox[data-v-18391467] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 13px;
    height: 13px;
    margin: 0;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.checkbox-input[data-v-18391467]:hover,
.date-checkbox[data-v-18391467]:hover {
    border-color: #4b5563 !important;
}
.checkbox-input[data-v-18391467]:checked,
.date-checkbox[data-v-18391467]:checked {
    background-color: #fff !important;
    border-color: #4b5563 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px 11px !important;
}

/* The ✓ the app's stylesheet types in. :checked is in the selector so this
   outweighs the rule it is cancelling. */
.checkbox-input[data-v-18391467]:checked::before,
.date-checkbox[data-v-18391467]:checked::before,
.checkbox-input[data-v-18391467]::before,
.date-checkbox[data-v-18391467]::before {
    content: none !important;
    display: none !important;
}

/* Invalid VAT Row Styling */
.scan-row.has-invalid-vat[data-v-18391467] {
    background: linear-gradient(90deg, #fcc 0%, #fee 3%, #ffffff 100%) !important;
    border-left: 4px solid #ef4444 !important;
}
.scan-row.has-invalid-vat[data-v-18391467]:hover {
    background: linear-gradient(90deg, #fbb 0%, #fcc 3%, #fff5f5 100%) !important;
    border-left-color: #dc2626 !important;
    box-shadow: -4px 0 0 0 #dc2626 !important;
    transform: translateX(2px);
}
.scan-row.has-invalid-vat.selected[data-v-18391467] {
    background: linear-gradient(90deg, #fbb 0%, #fcc 30%, #fff5f5 100%) !important;
    box-shadow: -4px 0 0 0 #dc2626 !important;
}

/* Company Validation Warning Row Styling - Purple/Blue */
.scan-row.has-company-warning[data-v-18391467] {
    background: linear-gradient(90deg, #fee2e2 0%, #fef2f2 3%, #ffffff 100%) !important;
    border-left: 4px solid #dc2626 !important;
}
.scan-row.has-company-warning[data-v-18391467]:hover {
    background: linear-gradient(90deg, #fecaca 0%, #fee2e2 3%, #fef5f5 100%) !important;
    border-left-color: #b91c1c !important;
    box-shadow: -4px 0 0 0 #b91c1c !important;
    transform: translateX(2px);
}
.scan-row.has-company-warning.selected[data-v-18391467] {
    background: linear-gradient(90deg, #fecaca 0%, #fee2e2 30%, #fef5f5 100%) !important;
    box-shadow: -4px 0 0 0 #b91c1c !important;
}

/* Zero-value Line Row Styling - Amber, the advisory tone */
.scan-row.has-zero-value-line[data-v-18391467] {
    background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 3%, #ffffff 100%) !important;
    border-left: 4px solid #d97706 !important;
}
.scan-row.has-zero-value-line[data-v-18391467]:hover {
    background: linear-gradient(90deg, #fde68a 0%, #fef3c7 3%, #fffdf5 100%) !important;
    border-left-color: #b45309 !important;
    box-shadow: -4px 0 0 0 #b45309 !important;
    transform: translateX(2px);
}
.scan-row.has-zero-value-line.selected[data-v-18391467] {
    background: linear-gradient(90deg, #fde68a 0%, #fef3c7 30%, #fffdf5 100%) !important;
    box-shadow: -4px 0 0 0 #b45309 !important;
}

/* Total Mismatch Row Styling - Matches warning banner yellow (#fff3cd) */
.scan-row.has-total-mismatch[data-v-18391467] {
    background: linear-gradient(90deg, #fff3cd 0%, #fff3cd 3%, #ffffff 100%) !important;
    border-left: 4px solid #ffc107 !important;
}
.scan-row.has-total-mismatch[data-v-18391467]:hover {
    background: linear-gradient(90deg, #ffe69c 0%, #fff3cd 3%, #fffbf0 100%) !important;
    border-left-color: #f59e0b !important;
    box-shadow: -4px 0 0 0 #f59e0b !important;
    transform: translateX(2px);
}
.scan-row.has-total-mismatch.selected[data-v-18391467] {
    background: linear-gradient(90deg, #ffe69c 0%, #fff3cd 30%, #fffbf0 100%) !important;
    box-shadow: -4px 0 0 0 #f59e0b !important;
}

/* Status Badge */
.scan-status[data-v-18391467] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.status-completed[data-v-18391467] {
    background: #10b981;
    color: #ffffff;
}
.status-processing[data-v-18391467] {
    background: #f59e0b;
    color: #ffffff;
}
.status-failed[data-v-18391467] {
    background: #ef4444;
    color: #ffffff;
}
.status-pending[data-v-18391467] {
    background: #64748b;
    color: #ffffff;
}
.status-archived[data-v-18391467] {
    background: #64748b;
    color: #ffffff;
}

/* Time Badge */
.scan-time[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.scan-time svg[data-v-18391467] {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Thumbnail */
.scan-thumbnail[data-v-18391467] {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.scan-thumbnail[data-v-18391467]:hover {
    border-color: #0ea5e9;
    transform: scale(1.05);
}
.thumbnail-img[data-v-18391467] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-placeholder[data-v-18391467] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}
.thumbnail-placeholder svg[data-v-18391467] {
    color: white;
    opacity: 0.9;
}

/* Invoice Info */
.scan-info[data-v-18391467] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    flex: 1;
    cursor: pointer;
}

/* Whole pixels rather than the font's own: 13px text at the browser's
   'normal' is 15.6px, and those fractions accumulated differently from row to
   row, leaving the hairline between device pixels on some rows. A 1px rule
   there is not dropped but anti-aliased, and at the old #e2e8f0 against white
   half strength read as no line at all — hence the slightly darker rule too. */
.invoice-header[data-v-18391467],
.invoice-details[data-v-18391467],
.invoice-vat[data-v-18391467],
.invoice-payment[data-v-18391467],
.scan-status[data-v-18391467] {
    line-height: 18px;
}
.invoice-header[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.invoice-type[data-v-18391467] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}
.invoice-number[data-v-18391467] {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.invoice-date-inline[data-v-18391467] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
    flex-shrink: 0;
}
.invoice-date-inline svg[data-v-18391467] {
    opacity: 0.6;
}
.invoice-details[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: nowrap;
}
.invoice-details svg[data-v-18391467] {
    flex-shrink: 0;
    opacity: 0.6;
}
.company-text[data-v-18391467] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}
.invoice-tax-id-row[data-v-18391467] {
}
.invoice-tax-id-inline[data-v-18391467] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: 'Courier New', monospace;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.invoice-tax-id-inline svg[data-v-18391467] {
    width: 12px;
    height: 12px;
    font-style: normal;
    color: #0ea5e9;
}
.invoice-tax-id-inline.vat-invalid-text[data-v-18391467] {
    color: #ef4444;
    font-weight: 600;
}
.invoice-tax-id-inline.vat-invalid-text svg[data-v-18391467] {
    color: #ef4444;
}
.invoice-tax-id[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: 'Courier New', monospace;
}
.invoice-tax-id svg[data-v-18391467] {
    flex-shrink: 0;
    opacity: 0.6;
    color: #6366f1;
}
.invoice-amount-wrapper[data-v-18391467] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 140px;
    margin-right: 90px;
}
.invoice-amount[data-v-18391467] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.amount-value[data-v-18391467] {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    overflow-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
}
.amount-currency[data-v-18391467] {
    font-size: 16px;
    font-weight: 700;
    color: #4b5563;
    line-height: 1;
}
.invoice-date[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}
.invoice-date svg[data-v-18391467] {
    flex-shrink: 0;
    opacity: 0.6;
    width: 12px;
    height: 12px;
}
.invoice-meta-row[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.invoice-payment[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #4b5563;
    font-weight: 600;
}
.invoice-payment svg[data-v-18391467] {
    flex-shrink: 0;
    opacity: 0.7;
    color: #4b5563;
}
.invoice-vat[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.vat-label[data-v-18391467] {
    font-weight: 600;
    color: #4b5563;
}
.vat-amount[data-v-18391467] {
    font-weight: 600;
    color: #4b5563;
}
.invoice-type-selector[data-v-18391467] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 4px;
}
.type-select[data-v-18391467] {
    width: 100px;
    height: 30px;
    padding: 4px 12px;
    padding-right: 30px;
    /* No box at all: the word and its arrow are enough to say it can be
       changed, and a framed control in every row drew a column of boxes
       down the table. */
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    appearance: none;
    /* A drawn chevron, not a filled wedge — the same hairline weight as every
       other mark on the row. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23374151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* With the frame gone, the colour carries the hover. */
.type-select[data-v-18391467]:hover {
    color: var(--primary);
}

/* Open: the chevron turns over, the way it does on the pickers above. */
.type-select.open[data-v-18391467] {
    color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%232b82f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.5 3.5-3.5 3.5 3.5'/%3E%3C/svg%3E");
}

/* Keyboard focus still needs to be visible, and now nothing else marks it. */
.type-select[data-v-18391467]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* The action label: the same white box with blue text the navigation shows,
   placed beside the button rather than drawn by it. */
.row-tip[data-v-18391467] {
    position: fixed;
    z-index: 1000;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 10px 24px -10px rgba(31, 41, 51, 0.45);
    color: #2b82f0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* The label takes the colour of the action it names. */
.row-tip--danger[data-v-18391467] {
    color: #e04545;
}
.row-tip--export[data-v-18391467] {
    color: #0f9d6f;
}

/* The list itself, dressed like the pickers at the top of the page rather
   than by the operating system. */
.type-menu[data-v-18391467] {
    position: fixed;
    z-index: 1000;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}
.type-menu-item[data-v-18391467] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}
.type-menu-item + .type-menu-item[data-v-18391467] {
    border-top: 1px solid var(--gray-lighter, #f1f5f9);
}
.type-menu-item[data-v-18391467]:hover {
    background: var(--primary-light, #e0f2fe);
}
.type-menu-item.selected[data-v-18391467] {
    background: var(--primary-light, #e0f2fe);
    font-weight: 600;
}

/* Actions */
.scan-actions[data-v-18391467] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.scan-actions .invoice-amount[data-v-18391467] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: auto;
    gap: 2px;
}

/* The row's three actions: just the mark, in its own colour.
 *
 * Three filled squares per row made a column of colour down the right of the
 * table that was louder than anything beside it. Even outlined, three boxes
 * on every row are three boxes; the border is kept but left transparent, so
 * it costs its pixel of space without being seen, and appears — with the
 * tint — only under the pointer. */
.btn-action[data-v-18391467] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.btn-action svg[data-v-18391467] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

/* Each keeps its colour, in the mark rather than behind it. */
.btn-view[data-v-18391467] {
    color: #0697e4;
}
.btn-export[data-v-18391467] {
    color: #0f9d6f;
}
.btn-action.btn-delete[data-v-18391467] {
    color: #e04545;
}

/* Hovering lifts the mark two pixels and nothing else happens — the same
   gesture as the icons in the navigation. The tint it replaces put a
   coloured box back on every row the pointer crossed, which is what the
   transparent border was there to avoid in the first place. */
.btn-action[data-v-18391467]:hover {
    background: transparent;
    transform: translateY(-2px);
}

/* Pagination */
.pagination[data-v-18391467] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding: 24px 0;
}
.pagination-btn[data-v-18391467] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.pagination-btn[data-v-18391467]:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}
.pagination-btn[data-v-18391467]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.pagination-pages[data-v-18391467] {
    display: flex;
    gap: 8px;
}
.pagination-page[data-v-18391467] {
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.pagination-page[data-v-18391467]:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}
.pagination-page.active[data-v-18391467] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-color: #0ea5e9;
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

/* Totals Summary */
.totals-summary[data-v-18391467] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-top: 3px solid var(--primary);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.totals-container[data-v-18391467] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}
.totals-label[data-v-18391467] {
    font-size: 18px;
    font-weight: 700;
    color: #4b5563;
    letter-spacing: -0.01em;
    width: 100%;
    margin-bottom: 12px;
}

/* One currency's totals, as wide as a figure needs and no wider.
 *
 * It was `flex: 1 1 300px`, which with a single currency stretched the card
 * across the whole page: the label sat at the far left and its figure a
 * thousand pixels away at the right, with nothing in between. Two or three
 * currencies now stand side by side and wrap, which is what the row was for.
 */
.currency-group[data-v-18391467] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
    flex: 0 1 340px;
    min-width: 260px;
    max-width: 100%;
}
.currency-header[data-v-18391467] {
    font-size: 13px;
    font-weight: 800;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: #f9fafb;
    border-radius: 6px 6px 0 0;
    margin: -16px -16px 12px -16px;
}
.totals-items[data-v-18391467] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.total-item[data-v-18391467] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: transparent;
    border-bottom: none;
    transition: all 0.2s ease;
}
.total-item[data-v-18391467]:hover {
    background: rgba(14, 165, 233, 0.05);
}
.total-item.total-grand[data-v-18391467] {
    background: transparent;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    padding: 8px 10px;
    margin-top: 2px;
}
.total-label[data-v-18391467] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.total-grand .total-label[data-v-18391467] {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
}
.total-value[data-v-18391467] {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    white-space: nowrap;
}
.total-item:nth-child(2) .total-value[data-v-18391467] {
    color: #4b5563;
}
.total-grand .total-value[data-v-18391467] {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
}

/* The summary, designed for a wide screen.
 *
 * Not the phone's card stretched sideways — that is what it was, and it
 * showed: a white panel inside a panel, a chip, three rows squeezed into a
 * strip with hairlines between them.
 *
 * Here it is what a wide screen can do and a phone cannot: the figures as
 * tiles, each with its caption above it, spread along one band. The caption
 * is the small grey uppercase the table's own headings use, the figures are
 * the only things with weight, and the total carries the colour because it
 * is the number the row exists for.
 *
 * The breakpoint matches the phone layout's, so the two never both apply.
 */
@media (min-width: 769px) {
.totals-summary[data-v-18391467] {
        display: flex;
        align-items: baseline;
        gap: 28px;
        padding: 11px 20px;
        background: var(--white);
        border: 1px solid #dde3ea;
        border-top: 1px solid #dde3ea;
        border-radius: 12px;
        box-shadow: none;
}
.totals-label[data-v-18391467] {
        width: auto;
        margin: 0;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--text-light);
        flex-shrink: 0;
}
.totals-container[data-v-18391467] {
        flex: 1;
        flex-direction: row;
        align-items: baseline;
        gap: 28px;
        min-width: 0;
}

    /* No card of its own: the band is the surface. Several currencies stand
       apart on it, each headed by its code. */
.currency-group[data-v-18391467] {
        /* Takes the band: the pairs are spread along it rather than bunched
           at the left with the rest of the width empty. */
        flex: 1 1 auto;
        flex-direction: row;
        align-items: baseline;
        gap: 24px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        min-width: 0;
}
.currency-header[data-v-18391467] {
        padding: 0;
        background: transparent;
        border: none;
        font-size: 10px;
        letter-spacing: 0.6px;
        color: var(--text-light);
        flex-shrink: 0;
}
.totals-items[data-v-18391467] {
        flex: 1;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 28px;
        flex-wrap: wrap;
}

    /* Caption and figure on one line, so the whole band is one line. */
.total-item[data-v-18391467] {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 8px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
}

    /* The grand total's rule-above belongs to the stacked card, where it
       separated the sum from the lines it sums. In a row of tiles it is a
       dash floating over one caption. */
.total-item.total-grand[data-v-18391467] {
        border-top: none;
        margin-top: 0;
        padding: 0;
}
.total-label[data-v-18391467],
    .total-grand .total-label[data-v-18391467] {
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--text-light);
        line-height: 1;
        white-space: nowrap;
}
.total-value[data-v-18391467] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        text-align: left;
        line-height: 1;
        white-space: nowrap;
}
.total-grand .total-value[data-v-18391467] {
        font-size: 17px;
        font-weight: 800;
        color: var(--primary);
}
}

/* Validation Warning Banner */
.validation-warning-banner[data-v-18391467] {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
}
.validation-warning-banner svg[data-v-18391467] {
    display: none;
}
.warning-content[data-v-18391467] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.warning-summary[data-v-18391467] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.validation-warning-banner strong[data-v-18391467] {
    color: #856404;
    margin-right: 4px;
    flex-shrink: 0;
}
.validation-warning-banner span[data-v-18391467] {
    color: #856404;
}
.clickable-warning[data-v-18391467] {
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}
.clickable-warning[data-v-18391467]:hover {
    color: #664d03;
}

/* Opened, the list used to start 28px below the line that opened it — 8px
 * of column gap, 8px of its own margin and 12px of padding, all stacked on
 * top of each other inside a banner that already pads itself. It is a list
 * under a sentence; it starts right under it. */
.warning-details[data-v-18391467] {
    margin-top: 2px;
    padding: 0;
    background: transparent;
    font-size: 12px;
}
.detail-item[data-v-18391467] {
    padding: 2px 0;
    border-bottom: none;
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.4;
}
.detail-item + .detail-item[data-v-18391467] {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.detail-item[data-v-18391467]:last-child {
    border-bottom: none;
}
.detail-item .btn-action.btn-view[data-v-18391467] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: white;
}
.detail-item .btn-action.btn-view[data-v-18391467]:hover {
    background: #0284c7;
    border-color: #0284c7;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}
.detail-item .btn-action.btn-view svg[data-v-18391467] {
    color: white;
    width: 16px;
    height: 16px;
}
.detail-item strong[data-v-18391467] {
    display: inline-block;
    margin-right: 8px;
    color: #664d03;
}
.invoice-link[data-v-18391467] {
    text-decoration: none;
    color: #0066cc;
    transition: all 0.2s ease;
}
.invoice-link[data-v-18391467]:hover {
    color: #0052a3;
    text-decoration: underline;
}
.invoice-link strong[data-v-18391467] {
    color: inherit;
}
.missing-fields[data-v-18391467] {
    color: #856404;
    font-style: italic;
}

/* Invalid VAT Warning Banner */
.invalid-vat-warning-banner[data-v-18391467] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
}
.invalid-vat-warning-banner svg[data-v-18391467] {
    display: none;
}
.invalid-vat-warning-banner strong[data-v-18391467] {
    color: #dc3545;
    margin-right: 4px;
    flex-shrink: 0;
}
.invalid-vat-warning-banner span[data-v-18391467] {
    color: #721c24;
}

/* Total Mismatch Warning Banner */
.total-mismatch-warning-banner[data-v-18391467] {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
}
.total-mismatch-warning-banner svg[data-v-18391467] {
    display: none;
}
.total-mismatch-warning-banner strong[data-v-18391467] {
    color: #856404;
    margin-right: 4px;
    flex-shrink: 0;
}
.total-mismatch-warning-banner span[data-v-18391467] {
    color: #856404;
}


/* Responsive */
@media (max-width: 968px) {
.table-headers[data-v-18391467] {
        display: none;
}
.scans-list[data-v-18391467] {
        border: none;
        border-radius: 0;
        gap: 12px;
        background: transparent;
}
.scan-row[data-v-18391467] {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        position: relative;
        min-height: auto;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.scan-row[data-v-18391467]:hover {
        border-left: 1px solid #e2e8f0;
        padding-left: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.scan-checkbox[data-v-18391467] {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 15;
        background: white;
        border-radius: 4px;
        padding: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.scan-status[data-v-18391467] {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
        padding: 6px 12px;
        font-size: 11px;
        border-radius: 6px;
        grid-column: unset;
        grid-row: unset;
        margin: 0;
}
.scan-thumbnail[data-v-18391467] {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        margin: 48px 0 0 12px;
        align-self: flex-start;
        grid-column: unset;
        grid-row: unset;
        flex-shrink: 0;
}
.scan-info[data-v-18391467] {
        margin-left: 104px;
        margin-top: -80px;
        padding: 0 12px 12px 0;
        min-width: 0;
        width: calc(100% - 116px);
}
.invoice-header[data-v-18391467] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 4px;
}
.invoice-number[data-v-18391467] {
        font-size: 16px;
        font-weight: 700;
}
.invoice-type[data-v-18391467] {
        font-size: 11px;
        background: #f1f5f9;
        padding: 2px 6px;
        border-radius: 4px;
}
.invoice-date[data-v-18391467] {
        font-size: 12px;
        color: #4b5563;
        margin-bottom: 4px;
}
.invoice-details[data-v-18391467] {
        margin-bottom: 4px;
        flex-wrap: wrap;
}
.company-text[data-v-18391467] {
        font-size: 14px;
        font-weight: 600;
        color: #334155;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100% - 20px);
        flex-basis: 100%;
}
.invoice-tax-id-row[data-v-18391467] {
        margin-top: 4px;
        width: 100%;
}
.invoice-tax-id-inline[data-v-18391467] {
        font-size: 12px;
        color: #4b5563;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex-basis: 100%;
        margin-top: 4px;
}
.invoice-amount-wrapper[data-v-18391467] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: #f8fafc;
        padding: 14px 12px;
        border-radius: 0;
        margin-top: 0;
        width: 100%;
        border-top: 1px solid #e2e8f0;
}
.invoice-amount[data-v-18391467] {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
}
.amount-value[data-v-18391467] {
        font-size: 24px;
        font-weight: 700;
        color: #0f172a;
}
.amount-currency[data-v-18391467] {
        font-size: 16px;
        font-weight: 600;
        color: #4b5563;
}
.invoice-vat[data-v-18391467] {
        display: none;
}
.invoice-payment[data-v-18391467] {
        display: none;
}
.invoice-type-selector[data-v-18391467] {
        display: none;
}
.scan-actions[data-v-18391467] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        width: 100%;
        margin-top: 0;
        border-top: 1px solid #e2e8f0;
        background: white;
        border-radius: 0 0 12px 12px;
        justify-content: flex-end;
}
.btn-action[data-v-18391467] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 18px;
        border: none;
}
.btn-action svg[data-v-18391467] {
        width: 20px;
        height: 20px;
}

    /* Upload rows */
.upload-row[data-v-18391467] {
        flex-direction: row;
        flex-wrap: wrap;
        min-height: auto;
}
.upload-row .scan-checkbox[data-v-18391467] {
        position: static;
        order: 1;
}
.upload-row .scan-status[data-v-18391467] {
        position: static;
        order: 2;
        margin-left: auto;
}
.upload-row .scan-thumbnail[data-v-18391467] {
        order: 3;
        width: 50px;
        height: 50px;
        margin: 0;
        align-self: center;
}
.upload-row .scan-info[data-v-18391467] {
        order: 4;
        margin: 0;
        width: calc(100% - 130px);
}
.upload-row .scan-actions[data-v-18391467] {
        order: 5;
        width: 100%;
        margin-top: 12px;
        justify-content: flex-end;
}

    /* Totals summary */
.totals-summary[data-v-18391467] {
        padding: 16px;
        margin-top: 16px;
}
.totals-container[data-v-18391467] {
        flex-direction: column;
        gap: 12px;
}
.currency-group[data-v-18391467] {
        min-width: 100%;
}
.total-item[data-v-18391467] {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 0;
}
.total-label[data-v-18391467] {
        font-size: 14px;
}
.total-value[data-v-18391467] {
        font-size: 16px;
}
.total-grand .total-label[data-v-18391467] {
        font-size: 15px;
}
.total-grand .total-value[data-v-18391467] {
        font-size: 18px;
}
}

/* Unique Partner Name Highlighting */
.company-text.unique-name[data-v-18391467] {
    background-color: #ffebee;
    color: #c62828;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* VAT Validation Indicators */
.vat-indicator[data-v-18391467] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 14px;
    cursor: help;
}
.vat-indicator.vat-valid[data-v-18391467] {
    color: #10b981;
}
.vat-indicator.vat-invalid[data-v-18391467] {
    color: #ef4444;
}
.invoice-tax-id.vat-invalid-text[data-v-18391467] {
    color: #ef4444;
    font-weight: 600;
}
.invoice-tax-id.vat-invalid-text svg[data-v-18391467] {
    color: #ef4444;
}

/* Delete Confirmation Modal */
.modal-overlay[data-v-18391467] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content[data-v-18391467] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
}
.modal-header[data-v-18391467] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.modal-header h3[data-v-18391467] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    padding-right: 40px;
}
.modal-header .btn[data-v-18391467] {
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
}
.modal-actions[data-v-18391467] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: none;
    padding-top: 0;
}
.btn-confirm[data-v-18391467],
.btn-cancel[data-v-18391467] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-confirm[data-v-18391467] {
    background: #ef4444;
    color: white;
}
.btn-confirm[data-v-18391467]:hover {
    background: #dc2626;
}
.btn-cancel[data-v-18391467] {
    background: #f1f5f9;
    color: #4b5563;
}
.btn-cancel[data-v-18391467]:hover {
    background: #e2e8f0;
}
.keyboard-hint[data-v-18391467] {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-18391467],
.modal-container[data-v-18391467],
.modal-content-large[data-v-18391467] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-18391467] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-18391467],
.modal-header h3[data-v-18391467],
.modal-header h4[data-v-18391467],
.modal-title[data-v-18391467] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-18391467] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #4b5563;
}
.modal-body[data-v-18391467] {
    padding: 12px 14px;
}
.modal-footer[data-v-18391467] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-18391467],
.btn-close[data-v-18391467],
.modal-close[data-v-18391467] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4b5563;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-18391467]:hover,
.btn-close[data-v-18391467]:hover,
.modal-close[data-v-18391467]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-18391467],
.btn-secondary[data-v-18391467],
.btn-cancel[data-v-18391467],
.btn-cancel-edit[data-v-18391467],
.btn-save[data-v-18391467],
.btn-save-edit[data-v-18391467],
.btn-confirm[data-v-18391467],
.btn-danger[data-v-18391467],
.btn-success[data-v-18391467],
.btn-add[data-v-18391467] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-18391467],
.btn-cancel[data-v-18391467],
.btn-cancel-edit[data-v-18391467] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-18391467]:hover:not(:disabled),
.btn-cancel[data-v-18391467]:hover:not(:disabled),
.btn-cancel-edit[data-v-18391467]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-18391467],
.btn-confirm[data-v-18391467],
.btn-save[data-v-18391467],
.btn-save-edit[data-v-18391467],
.btn-add[data-v-18391467] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-18391467]:hover:not(:disabled),
.btn-confirm[data-v-18391467]:hover:not(:disabled),
.btn-save[data-v-18391467]:hover:not(:disabled),
.btn-save-edit[data-v-18391467]:hover:not(:disabled),
.btn-add[data-v-18391467]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-18391467] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-18391467]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-18391467] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-18391467]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The row of answers under a question — "delete these seven?" — is a footer
   like any other: a hairline above it and the two buttons at its end. */
.modal-actions[data-v-18391467] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #dde3ea;
    background: #fff;
}

/* A question and its two answers: one line between them, not two, and the
   one that deletes carries the bin's red rather than the app's blue. */
.modal-overlay .modal-content .modal-header[data-v-18391467] {
    border-bottom: none;
    padding-bottom: 4px;
}
.modal-actions .btn-confirm[data-v-18391467] {
    background: #e04545;
    border-color: #e04545;
}
.modal-actions .btn-confirm[data-v-18391467]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-18391467] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-18391467],
.modal-actions[data-v-18391467] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-18391467]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-18391467]:hover,
.btn-icon.btn-icon-danger[data-v-18391467]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-18391467] {
  transition: transform 0.15s ease;
}

.modal-enter-active[data-v-86c87aec],
.modal-leave-active[data-v-86c87aec] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-86c87aec],
.modal-leave-to[data-v-86c87aec] {
  opacity: 0;
}
.modal-enter-active .relative[data-v-86c87aec],
.modal-leave-active .relative[data-v-86c87aec] {
  transition: transform 0.3s ease;
}
.modal-enter-from .relative[data-v-86c87aec],
.modal-leave-to .relative[data-v-86c87aec] {
  transform: scale(0.9);
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-86c87aec],
.modal-container[data-v-86c87aec],
.modal-content-large[data-v-86c87aec] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-86c87aec] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-86c87aec],
.modal-header h3[data-v-86c87aec],
.modal-header h4[data-v-86c87aec],
.modal-title[data-v-86c87aec] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-86c87aec] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-86c87aec] {
    padding: 12px 14px;
}
.modal-footer[data-v-86c87aec] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-86c87aec],
.btn-close[data-v-86c87aec],
.modal-close[data-v-86c87aec] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-86c87aec]:hover,
.btn-close[data-v-86c87aec]:hover,
.modal-close[data-v-86c87aec]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-86c87aec],
.btn-secondary[data-v-86c87aec],
.btn-cancel[data-v-86c87aec],
.btn-cancel-edit[data-v-86c87aec],
.btn-save[data-v-86c87aec],
.btn-save-edit[data-v-86c87aec],
.btn-confirm[data-v-86c87aec],
.btn-danger[data-v-86c87aec],
.btn-success[data-v-86c87aec],
.btn-add[data-v-86c87aec] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-86c87aec],
.btn-cancel[data-v-86c87aec],
.btn-cancel-edit[data-v-86c87aec] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-86c87aec]:hover:not(:disabled),
.btn-cancel[data-v-86c87aec]:hover:not(:disabled),
.btn-cancel-edit[data-v-86c87aec]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-86c87aec],
.btn-confirm[data-v-86c87aec],
.btn-save[data-v-86c87aec],
.btn-save-edit[data-v-86c87aec],
.btn-add[data-v-86c87aec] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-86c87aec]:hover:not(:disabled),
.btn-confirm[data-v-86c87aec]:hover:not(:disabled),
.btn-save[data-v-86c87aec]:hover:not(:disabled),
.btn-save-edit[data-v-86c87aec]:hover:not(:disabled),
.btn-add[data-v-86c87aec]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-86c87aec] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-86c87aec]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-86c87aec] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-86c87aec]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-86c87aec],
.modal-body input[type="number"][data-v-86c87aec],
.modal-body input[type="email"][data-v-86c87aec],
.modal-body input[type="tel"][data-v-86c87aec],
.modal-body input[type="url"][data-v-86c87aec],
.modal-body input[type="search"][data-v-86c87aec],
.modal-body input[type="date"][data-v-86c87aec],
.modal-body input[type="password"][data-v-86c87aec],
.modal-body select[data-v-86c87aec],
.modal-body textarea[data-v-86c87aec] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-86c87aec]:focus,
.modal-body input[type="number"][data-v-86c87aec]:focus,
.modal-body input[type="email"][data-v-86c87aec]:focus,
.modal-body input[type="tel"][data-v-86c87aec]:focus,
.modal-body input[type="url"][data-v-86c87aec]:focus,
.modal-body input[type="search"][data-v-86c87aec]:focus,
.modal-body input[type="date"][data-v-86c87aec]:focus,
.modal-body input[type="password"][data-v-86c87aec]:focus,
.modal-body select[data-v-86c87aec]:focus,
.modal-body textarea[data-v-86c87aec]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-86c87aec],
.modal-body .form-label[data-v-86c87aec] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}


/* A field with a mark standing in it keeps the room for the mark: the
   tighter padding above would have put the text under the magnifier. */
.search-box input[data-v-86c87aec],
.search-input[data-v-86c87aec],
.modal-search-input-wrapper input[data-v-86c87aec] {
    padding-left: 30px;
}

/* Outweighing the field's own padding, which is written as .search-box
   .search-input and so outranks a plain descendant rule. */
.search-box input.search-input[data-v-86c87aec],
.modal-search-input-wrapper input[data-v-86c87aec] {
    padding-left: 32px;
}


/* The list of counterparties, at the table's scale.
 *
 * Each one was a card 96px tall with a blue tile for a mark; twelve of them
 * made a column of boxes inside a box. They are rows now, parted by a
 * hairline, with the mark drawn in line and the address under the name. */
.modal-header .modal-title[data-v-86c87aec] {
    font-size: 14px;
    font-weight: 700;
}
.modal-tabs[data-v-86c87aec] {
    padding: 0 14px;
    border-bottom: 1px solid #dde3ea;
}
.modal-tab[data-v-86c87aec] {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
}
.modal-search-container[data-v-86c87aec] {
    padding: 10px 14px;
    gap: 8px;
}
.modal-search-container select[data-v-86c87aec],
.modal-search-input-wrapper input[data-v-86c87aec] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}
.modal-search-input-wrapper input[data-v-86c87aec] {
    padding-left: 32px;
}
.modal-search-icon[data-v-86c87aec] {
    color: #94a3b8;
}
.modal-list-item[data-v-86c87aec] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 14px;
    margin: 0;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    box-shadow: none;
}
.modal-list-item[data-v-86c87aec]:hover {
    background: #fbfcfd;
    border-color: #f1f5f9;
    transform: none;
    box-shadow: none;
}
.modal-list-item-icon[data-v-86c87aec] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin-top: 2px;
    background: transparent;
    border-radius: 0;
    color: #0697e4;
    box-shadow: none;
}
.modal-list-item-icon svg[data-v-86c87aec] {
    width: 14px;
    height: 14px;
}
.modal-list-item-title[data-v-86c87aec] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.modal-list-item-badge[data-v-86c87aec] {
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
}
.modal-list-item-address[data-v-86c87aec] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0 0;
    font-size: 11px;
    color: #64748b;
}
.modal-list-item-address svg[data-v-86c87aec] {
    width: 12px;
    height: 12px;
}
.modal-list-item-arrow[data-v-86c87aec] {
    color: #cbd5e1;
}
.modal-list-item-arrow svg[data-v-86c87aec] {
    width: 13px;
    height: 13px;
}


/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-86c87aec] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-86c87aec],
.modal-actions[data-v-86c87aec] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-86c87aec]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-86c87aec]:hover,
.btn-icon.btn-icon-danger[data-v-86c87aec]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-86c87aec] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-86c87aec] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.modal-backdrop[data-v-d04c964b] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-container[data-v-d04c964b] {
  position: relative;
  z-index: 9999;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.vendor-code-modal[data-v-d04c964b] {
  max-width: 700px;
}
.modal-subtitle[data-v-d04c964b] {
  font-size: 14px;
  color: #6c757d;
  margin-top: 4px;
}
.vendors-list[data-v-d04c964b] {
  max-height: 400px;
  overflow-y: auto;
}
.vendor-item[data-v-d04c964b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  gap: 16px;
}
.vendor-item[data-v-d04c964b]:last-child {
  border-bottom: none;
}
.vendor-info[data-v-d04c964b] {
  flex: 1;
  min-width: 0;
}
.vendor-name[data-v-d04c964b] {
  font-weight: 500;
  color: #212529;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-vat[data-v-d04c964b] {
  font-size: 13px;
  color: #6c757d;
  margin-top: 2px;
}
.vendor-code-input[data-v-d04c964b] {
  flex: 0 0 200px;
}
.vendor-code-input input[data-v-d04c964b] {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}
.vendor-code-input input[data-v-d04c964b]:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.error-message[data-v-d04c964b] {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: 4px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.loading-container[data-v-d04c964b] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: #6c757d;
}
.spinner-small[data-v-d04c964b] {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin-d04c964b 1s linear infinite;
}
@keyframes spin-d04c964b {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.modal-footer[data-v-d04c964b] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
}
.btn[data-v-d04c964b] {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-d04c964b] {
  background-color: #6c757d;
  color: white;
}
.btn-secondary[data-v-d04c964b]:hover {
  background-color: #5a6268;
}
.btn-primary[data-v-d04c964b] {
  background-color: #007bff;
  color: white;
}
.btn-primary[data-v-d04c964b]:hover:not(:disabled) {
  background-color: #0056b3;
}
.btn-primary[data-v-d04c964b]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-d04c964b],
.modal-container[data-v-d04c964b],
.modal-content-large[data-v-d04c964b] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-d04c964b] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-d04c964b],
.modal-header h3[data-v-d04c964b],
.modal-header h4[data-v-d04c964b],
.modal-title[data-v-d04c964b] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-d04c964b] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-d04c964b] {
    padding: 12px 14px;
}
.modal-footer[data-v-d04c964b] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-d04c964b],
.btn-close[data-v-d04c964b],
.modal-close[data-v-d04c964b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-d04c964b]:hover,
.btn-close[data-v-d04c964b]:hover,
.modal-close[data-v-d04c964b]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-d04c964b],
.btn-secondary[data-v-d04c964b],
.btn-cancel[data-v-d04c964b],
.btn-cancel-edit[data-v-d04c964b],
.btn-save[data-v-d04c964b],
.btn-save-edit[data-v-d04c964b],
.btn-confirm[data-v-d04c964b],
.btn-danger[data-v-d04c964b],
.btn-success[data-v-d04c964b],
.btn-add[data-v-d04c964b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-d04c964b],
.btn-cancel[data-v-d04c964b],
.btn-cancel-edit[data-v-d04c964b] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-d04c964b]:hover:not(:disabled),
.btn-cancel[data-v-d04c964b]:hover:not(:disabled),
.btn-cancel-edit[data-v-d04c964b]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-d04c964b],
.btn-confirm[data-v-d04c964b],
.btn-save[data-v-d04c964b],
.btn-save-edit[data-v-d04c964b],
.btn-add[data-v-d04c964b] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-d04c964b]:hover:not(:disabled),
.btn-confirm[data-v-d04c964b]:hover:not(:disabled),
.btn-save[data-v-d04c964b]:hover:not(:disabled),
.btn-save-edit[data-v-d04c964b]:hover:not(:disabled),
.btn-add[data-v-d04c964b]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-d04c964b] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-d04c964b]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-d04c964b] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-d04c964b]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-d04c964b],
.modal-body input[type="number"][data-v-d04c964b],
.modal-body input[type="email"][data-v-d04c964b],
.modal-body input[type="tel"][data-v-d04c964b],
.modal-body input[type="url"][data-v-d04c964b],
.modal-body input[type="search"][data-v-d04c964b],
.modal-body input[type="date"][data-v-d04c964b],
.modal-body input[type="password"][data-v-d04c964b],
.modal-body select[data-v-d04c964b],
.modal-body textarea[data-v-d04c964b] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-d04c964b]:focus,
.modal-body input[type="number"][data-v-d04c964b]:focus,
.modal-body input[type="email"][data-v-d04c964b]:focus,
.modal-body input[type="tel"][data-v-d04c964b]:focus,
.modal-body input[type="url"][data-v-d04c964b]:focus,
.modal-body input[type="search"][data-v-d04c964b]:focus,
.modal-body input[type="date"][data-v-d04c964b]:focus,
.modal-body input[type="password"][data-v-d04c964b]:focus,
.modal-body select[data-v-d04c964b]:focus,
.modal-body textarea[data-v-d04c964b]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-d04c964b],
.modal-body .form-label[data-v-d04c964b] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-d04c964b] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-d04c964b],
.modal-actions[data-v-d04c964b] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-d04c964b]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-d04c964b]:hover,
.btn-icon.btn-icon-danger[data-v-d04c964b]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-d04c964b] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-d04c964b] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.modal-backdrop[data-v-78a00759] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-container[data-v-78a00759] {
  position: relative;
  z-index: 9999;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.invoice-vendor-code-modal[data-v-78a00759] {
  max-width: 700px;
}
.modal-content[data-v-78a00759] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-78a00759] {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.modal-title-section[data-v-78a00759] {
  flex: 1;
}
.modal-title[data-v-78a00759] {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #111827;
}
.modal-subtitle[data-v-78a00759] {
  font-size: 14px;
  color: #6c757d;
  margin-top: 4px;
  margin-bottom: 0;
}
.btn-icon[data-v-78a00759] {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 20px;
  padding: 4px;
  transition: color 0.2s;
}
.btn-icon[data-v-78a00759]:hover {
  color: #111827;
}
.modal-body[data-v-78a00759] {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}
.loading-container[data-v-78a00759] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: #6b7280;
}
.spinner-small[data-v-78a00759] {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin-78a00759 0.6s linear infinite;
}
@keyframes spin-78a00759 {
to {
    transform: rotate(360deg);
}
}
.counterparties-list[data-v-78a00759] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.counterparty-item[data-v-78a00759] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.counterparty-info[data-v-78a00759] {
  flex: 1;
  min-width: 0;
}
.counterparty-name-row[data-v-78a00759] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}
.counterparty-name[data-v-78a00759] {
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.counterparty-type-badge[data-v-78a00759] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.badge-supplier[data-v-78a00759] {
  background: #dbeafe;
  color: #1e40af;
}
.badge-client[data-v-78a00759] {
  background: #fef3c7;
  color: #92400e;
}
.counterparty-vat[data-v-78a00759] {
  font-size: 13px;
  color: #6b7280;
}
.counterparty-code-input[data-v-78a00759] {
  width: 200px;
}
.form-control[data-v-78a00759] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}
.form-control[data-v-78a00759]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.error-message[data-v-78a00759] {
  margin-top: 16px;
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 14px;
}
.modal-footer[data-v-78a00759] {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.btn[data-v-78a00759] {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-secondary[data-v-78a00759] {
  background: #f3f4f6;
  color: #374151;
}
.btn-secondary[data-v-78a00759]:hover {
  background: #e5e7eb;
}
.btn-primary[data-v-78a00759] {
  background: #3b82f6;
  color: white;
}
.btn-primary[data-v-78a00759]:hover:not(:disabled) {
  background: #2563eb;
}
.btn-primary[data-v-78a00759]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-78a00759],
.modal-container[data-v-78a00759],
.modal-content-large[data-v-78a00759] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-78a00759] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-78a00759],
.modal-header h3[data-v-78a00759],
.modal-header h4[data-v-78a00759],
.modal-title[data-v-78a00759] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-78a00759] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-78a00759] {
    padding: 12px 14px;
}
.modal-footer[data-v-78a00759] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-78a00759],
.btn-close[data-v-78a00759],
.modal-close[data-v-78a00759] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-78a00759]:hover,
.btn-close[data-v-78a00759]:hover,
.modal-close[data-v-78a00759]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-78a00759],
.btn-secondary[data-v-78a00759],
.btn-cancel[data-v-78a00759],
.btn-cancel-edit[data-v-78a00759],
.btn-save[data-v-78a00759],
.btn-save-edit[data-v-78a00759],
.btn-confirm[data-v-78a00759],
.btn-danger[data-v-78a00759],
.btn-success[data-v-78a00759],
.btn-add[data-v-78a00759] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-78a00759],
.btn-cancel[data-v-78a00759],
.btn-cancel-edit[data-v-78a00759] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-78a00759]:hover:not(:disabled),
.btn-cancel[data-v-78a00759]:hover:not(:disabled),
.btn-cancel-edit[data-v-78a00759]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-78a00759],
.btn-confirm[data-v-78a00759],
.btn-save[data-v-78a00759],
.btn-save-edit[data-v-78a00759],
.btn-add[data-v-78a00759] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-78a00759]:hover:not(:disabled),
.btn-confirm[data-v-78a00759]:hover:not(:disabled),
.btn-save[data-v-78a00759]:hover:not(:disabled),
.btn-save-edit[data-v-78a00759]:hover:not(:disabled),
.btn-add[data-v-78a00759]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-78a00759] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-78a00759]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-78a00759] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-78a00759]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-78a00759],
.modal-body input[type="number"][data-v-78a00759],
.modal-body input[type="email"][data-v-78a00759],
.modal-body input[type="tel"][data-v-78a00759],
.modal-body input[type="url"][data-v-78a00759],
.modal-body input[type="search"][data-v-78a00759],
.modal-body input[type="date"][data-v-78a00759],
.modal-body input[type="password"][data-v-78a00759],
.modal-body select[data-v-78a00759],
.modal-body textarea[data-v-78a00759] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-78a00759]:focus,
.modal-body input[type="number"][data-v-78a00759]:focus,
.modal-body input[type="email"][data-v-78a00759]:focus,
.modal-body input[type="tel"][data-v-78a00759]:focus,
.modal-body input[type="url"][data-v-78a00759]:focus,
.modal-body input[type="search"][data-v-78a00759]:focus,
.modal-body input[type="date"][data-v-78a00759]:focus,
.modal-body input[type="password"][data-v-78a00759]:focus,
.modal-body select[data-v-78a00759]:focus,
.modal-body textarea[data-v-78a00759]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-78a00759],
.modal-body .form-label[data-v-78a00759] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-78a00759] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-78a00759],
.modal-actions[data-v-78a00759] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-78a00759]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-78a00759]:hover,
.btn-icon.btn-icon-danger[data-v-78a00759]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-78a00759] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-78a00759] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.account-code-selector[data-v-24d5109f] {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
}
.dropdown-backdrop[data-v-24d5109f] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: transparent;
}
.selector-wrapper[data-v-24d5109f] {
  position: relative;
  width: 100%;
  z-index: 10000;
}
.selector-input[data-v-24d5109f] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 36px 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 38px;
  max-height: 38px;
  width: 100%;
  z-index: 10001;
}
.selector-input[data-v-24d5109f]:hover {
  border-color: #d1d5db;
}
.selector-input.missing[data-v-24d5109f] {
  border-color: #fb923c;
  background-color: #fff7ed;
}
.selector-input.missing[data-v-24d5109f]:hover {
  border-color: #f97316;
  background-color: #ffedd5;
}
.selector-input.open[data-v-24d5109f] {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.selected-value[data-v-24d5109f] {
  flex: 1;
  font-size: 13px;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}
.selected-value > span[data-v-24d5109f]:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.dropdown-icon[data-v-24d5109f] {
  position: absolute;
  right: 12px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease;
  font-size: 11px;
  pointer-events: none;
}
.dropdown-icon.rotate[data-v-24d5109f] {
  transform: rotate(180deg);
}
.dropdown-menu[data-v-24d5109f] {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 10002;
  max-height: 350px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.search-wrapper[data-v-24d5109f] {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}
.search-input[data-v-24d5109f] {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
  background: white;
}
.search-input[data-v-24d5109f]:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.search-icon[data-v-24d5109f] {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 12px;
  pointer-events: none;
}
.clear-search[data-v-24d5109f] {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  border: none;
  border-radius: 50%;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 10px;
}
.clear-search[data-v-24d5109f]:hover {
  background: #d1d5db;
  color: #1f2937;
}
.dropdown-list[data-v-24d5109f] {
  max-height: 292px;
  overflow-y: auto;
  flex: 1;
}
.dropdown-item[data-v-24d5109f] {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
}
.dropdown-item[data-v-24d5109f]:last-child {
  border-bottom: none;
}
.dropdown-item[data-v-24d5109f]:hover {
  background-color: #f9fafb;
}
.dropdown-item.selected[data-v-24d5109f] {
  background-color: #eff6ff;
  color: #1e40af;
}
.dropdown-item.placeholder[data-v-24d5109f] {
  color: #9ca3af;
  font-style: italic;
}
.dropdown-item.no-results[data-v-24d5109f] {
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  padding: 16px 12px;
}
.code-info[data-v-24d5109f] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.code-number[data-v-24d5109f] {
  font-weight: 600;
  color: #1f2937;
}
.code-separator[data-v-24d5109f] {
  color: #9ca3af;
}
.code-name[data-v-24d5109f] {
  color: #6b7280;
  /* Shrinks when the row is tight, but does not grow — otherwise it would push
     the barcode away from the name to the far edge of the row. */
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-barcodes[data-v-24d5109f] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.barcode-label[data-v-24d5109f] {
  color: #6b7280;
}

/* Styled like the account code itself — both are identifiers, so they read the
   same weight and colour rather than one looking like a tag pinned on. */
.mapping-chip[data-v-24d5109f] {
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}
.mapping-more[data-v-24d5109f] {
  color: #9ca3af;
}

/* Hover card for the description keywords — same language as the app's cards:
   white surface, soft border, rounded corners, blue accent. */
.keyword-popover[data-v-24d5109f] {
  position: fixed;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(31, 41, 51, 0.28);
  padding: 12px 14px;
  pointer-events: none;
  overflow: hidden;
}
.keyword-popover-head[data-v-24d5109f] {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b82f0;
}
.keyword-popover-count[data-v-24d5109f] {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(43, 130, 240, 0.09);
  font-size: 10.5px;
  line-height: 16px;
  letter-spacing: 0;
}
.keyword-popover-list[data-v-24d5109f] {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: auto;
}
.keyword-pill[data-v-24d5109f] {
  padding: 3px 9px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12px;
  line-height: 17px;
}

/* The keyword the search actually hit. */
.keyword-pill.matched[data-v-24d5109f] {
  background: rgba(43, 130, 240, 0.1);
  color: #1d4ed8;
  font-weight: 600;
}
.dropdown-item.selected .code-number[data-v-24d5109f],
.dropdown-item.selected .code-name[data-v-24d5109f] {
  color: #1e40af;
}
.internal-code-badge-small[data-v-24d5109f] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
}

/* Scrollbar styling */
.dropdown-list[data-v-24d5109f]::-webkit-scrollbar {
  width: 6px;
}
.dropdown-list[data-v-24d5109f]::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}
.dropdown-list[data-v-24d5109f]::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.dropdown-list[data-v-24d5109f]::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ── At the product's scale ────────────────────────────────────────────
 *
 * The field matched nothing else: 38px tall with its own greys, and when a
 * value was still missing it turned amber — a colour this product uses
 * nowhere. Same hairline field as everywhere, and "still to be filled" is
 * said by the edge, in the warning colour the rest of the app uses. */
.selector-input[data-v-24d5109f] {
  min-height: 32px;
  padding: 6px 28px 6px 10px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  font-size: 13px;
}
.selector-input[data-v-24d5109f]:hover {
  border-color: var(--primary, #0697e4);
}
.selector-input.missing[data-v-24d5109f] {
  border-color: #f0b429;
  background-color: #fff;
}
.selector-input.missing[data-v-24d5109f]:hover {
  border-color: #d99a0b;
  background-color: #fff;
}
.selector-input.open[data-v-24d5109f] {
  border-color: var(--primary, #0697e4);
  box-shadow: none;
}
.selected-value[data-v-24d5109f] {
  font-size: 13px;
}

.internal-code-selector[data-v-0642be04] {
  position: relative;
  width: 100%;
}
.selector-wrapper[data-v-0642be04] {
  position: relative;
  width: 100%;
}
.selector-input[data-v-0642be04] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px 0 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 38px;
  z-index: 10001;
  width: 38px;
}
.selector-input[data-v-0642be04]:hover {
  border-color: #d1d5db;
}
.selector-input.missing[data-v-0642be04] {
  border-color: #fb923c;
  background-color: #fff7ed;
}
.selector-input.missing[data-v-0642be04]:hover {
  border-color: #f97316;
  background-color: #ffedd5;
}
.selector-input.open[data-v-0642be04] {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.selected-value[data-v-0642be04] {
  flex: 1;
  font-size: 13px;
  color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.placeholder-text[data-v-0642be04] {
  color: #1f2937;
  font-size: 13px;
  font-weight: 400;
}
.dropdown-icon[data-v-0642be04] {
  position: absolute;
  right: 5px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease;
  font-size: 8px;
  pointer-events: none;
}
.dropdown-icon.rotate[data-v-0642be04] {
  transform: rotate(180deg);
}
.dropdown-menu[data-v-0642be04] {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 10002;
  max-height: 200px;
  overflow: hidden;
}
.dropdown-list[data-v-0642be04] {
  max-height: 200px;
  overflow-y: auto;
}
.dropdown-item[data-v-0642be04] {
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.dropdown-item[data-v-0642be04]:last-child {
  border-bottom: none;
}
.dropdown-item[data-v-0642be04]:hover {
  background-color: #f9fafb;
}
.dropdown-item.selected[data-v-0642be04] {
  background-color: #eff6ff;
}
.dropdown-item.placeholder[data-v-0642be04] {
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  font-size: 12px;
}
.code-info[data-v-0642be04] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.selected-code[data-v-0642be04] {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}
.internal-code-badge-display[data-v-0642be04] {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

/* ── At the product's scale ────────────────────────────────────────────
 *
 * The field matched nothing else: 38px tall with its own greys, and when a
 * value was still missing it turned amber — a colour this product uses
 * nowhere. Same hairline field as everywhere, and "still to be filled" is
 * said by the edge, in the warning colour the rest of the app uses. */
/* The box is as narrow as it can be, so its padding has to leave room for the
   value: 38px wide against 38px of padding left the text nothing to occupy and
   a chosen code simply never appeared. */
.selector-input[data-v-0642be04] {
  min-height: 32px;
  height: 32px;
  width: 56px;
  padding: 0 16px 0 8px;
  justify-content: flex-start;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  font-size: 13px;
}
.selected-value[data-v-0642be04] {
  justify-content: flex-start;
}
.selected-code[data-v-0642be04] {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-icon[data-v-0642be04] {
  right: 6px;
}
.selector-input[data-v-0642be04]:hover {
  border-color: var(--primary, #0697e4);
}
.selector-input.missing[data-v-0642be04] {
  border-color: #f0b429;
  background-color: #fff;
}
.selector-input.missing[data-v-0642be04]:hover {
  border-color: #d99a0b;
  background-color: #fff;
}
.selector-input.open[data-v-0642be04] {
  border-color: var(--primary, #0697e4);
  box-shadow: none;
}
.selected-value[data-v-0642be04] {
  font-size: 13px;
}

.modal-overlay[data-v-4389e22c] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-content[data-v-4389e22c] {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.modal-header[data-v-4389e22c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header-content[data-v-4389e22c] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.modal-header h2[data-v-4389e22c] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.modal-header-actions[data-v-4389e22c] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-nav[data-v-4389e22c] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-nav[data-v-4389e22c]:hover:not(:disabled) {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary);
}
.btn-nav[data-v-4389e22c]:disabled {
  opacity: 0.3;
  cursor: default;
}
.btn-close[data-v-4389e22c] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close[data-v-4389e22c]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.modal-body[data-v-4389e22c] {
  padding: 24px;
}
.form-group[data-v-4389e22c] {
  margin-bottom: 20px;
}
.form-group label[data-v-4389e22c] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-4389e22c] {
  color: var(--danger);
}
.form-group input[type="text"][data-v-4389e22c],
.form-group input[type="number"][data-v-4389e22c],
.form-group select[data-v-4389e22c] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.form-group input[data-v-4389e22c]:focus,
.form-group select[data-v-4389e22c]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.form-row[data-v-4389e22c] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.checkbox-label[data-v-4389e22c] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"][data-v-4389e22c] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.field-hint[data-v-4389e22c] {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
  font-style: italic;
}
.input-with-button[data-v-4389e22c] {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.input-with-button input[data-v-4389e22c] {
  flex: 1;
}
.input-with-button .btn-icon[data-v-4389e22c] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.input-with-button .btn-icon[data-v-4389e22c]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.input-with-button .btn-icon[data-v-4389e22c]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-with-button .btn-icon[data-v-4389e22c]:disabled:hover {
  background: var(--bg-gray);
  border-color: var(--border);
  color: var(--text-secondary);
}
.modal-footer[data-v-4389e22c] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.btn-secondary[data-v-4389e22c],
.btn-primary[data-v-4389e22c] {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-4389e22c] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-secondary[data-v-4389e22c]:hover {
  background: var(--bg-gray);
}
.btn-primary[data-v-4389e22c] {
  background: var(--primary);
  border: none;
  color: white;
}
.btn-primary[data-v-4389e22c]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-4389e22c]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 640px) {
.form-row[data-v-4389e22c] {
    grid-template-columns: 1fr;
}
}

/* Descriptions Modal Styles */
.descriptions-modal-overlay[data-v-4389e22c] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.descriptions-modal-content[data-v-4389e22c] {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.descriptions-modal-header[data-v-4389e22c] {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.descriptions-modal-header h3[data-v-4389e22c] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.descriptions-modal-body[data-v-4389e22c] {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.add-description-section[data-v-4389e22c] {
  margin-bottom: 24px;
  padding: 16px;
}
.add-description-label[data-v-4389e22c] {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.add-description-input-group[data-v-4389e22c] {
  display: flex;
  gap: 8px;
}
.add-description-input[data-v-4389e22c] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: white;
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}
.add-description-input[data-v-4389e22c]:focus {
  outline: none;
  border-color: var(--primary);
}
.descriptions-header[data-v-4389e22c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}
.descriptions-select-all[data-v-4389e22c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-gray);
  border-radius: 8px;
  flex: 1;
}
.select-all-label[data-v-4389e22c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.descriptions-count-inline[data-v-4389e22c] {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}
.descriptions-count[data-v-4389e22c] {
  padding: 12px;
  background: var(--bg-gray);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  flex: 1;
}
.descriptions-actions[data-v-4389e22c] {
  display: flex;
  gap: 8px;
}
.btn-delete-selected[data-v-4389e22c] {
  padding: 10px 16px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-delete-selected[data-v-4389e22c]:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-1px);
}
.btn-delete-selected[data-v-4389e22c]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.descriptions-list[data-v-4389e22c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.description-item[data-v-4389e22c] {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s ease;
  align-items: center;
}
.description-item[data-v-4389e22c]:hover {
  background: var(--bg-gray);
  border-color: var(--primary);
}
.description-checkbox[data-v-4389e22c] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.description-number[data-v-4389e22c] {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  min-width: 30px;
}
.description-text[data-v-4389e22c] {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  flex: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.description-text[data-v-4389e22c]:hover {
  background-color: #f3f4f6;
}
.internal-code-badge[data-v-4389e22c] {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  margin-left: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.internal-code-badge-small[data-v-4389e22c] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
}
.internal-code-input[data-v-4389e22c] {
  width: 120px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary);
  background: #f9fafb;
  transition: all 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}

/* iOS-style toggle for Active / Default Account Code form rows */
.form-group-toggle[data-v-4389e22c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toggle[data-v-4389e22c] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.toggle input[data-v-4389e22c] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track[data-v-4389e22c] {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background 0.2s ease;
  cursor: pointer;
}
.toggle-track[data-v-4389e22c]::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle input:checked + .toggle-track[data-v-4389e22c] {
  background: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-4389e22c]::before {
  transform: translateX(16px);
}
.toggle input:focus-visible + .toggle-track[data-v-4389e22c] {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.toggle-text[data-v-4389e22c] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  user-select: none;
}

/* Loose-match toggle below the Description Mapping field — sits under the input */
.form-group-toggle-inline[data-v-4389e22c] {
  margin-top: 10px;
}

/* Loose-match toggle inline with each description list row */
.form-group-toggle-row[data-v-4389e22c] {
  flex-shrink: 0;
}
.form-group-toggle-row .toggle-text[data-v-4389e22c] {
  font-size: 12px;
  color: var(--text-secondary);
}
.internal-code-input[data-v-4389e22c]:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.internal-code-input[data-v-4389e22c]::placeholder {
  color: #9ca3af;
  font-size: 11px;
}
.description-edit-input[data-v-4389e22c] {
  flex: 1;
  padding: 6px 10px;
  border: 2px solid var(--primary);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  background: white;
}
.edit-actions[data-v-4389e22c] {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.btn-save-edit[data-v-4389e22c],
.btn-cancel-edit[data-v-4389e22c] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-save-edit[data-v-4389e22c] {
  background: #10b981;
  color: white;
}
.btn-save-edit[data-v-4389e22c]:hover:not(:disabled) {
  background: #059669;
  transform: scale(1.05);
}
.btn-save-edit[data-v-4389e22c]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-cancel-edit[data-v-4389e22c] {
  background: #ef4444;
  color: white;
}
.btn-cancel-edit[data-v-4389e22c]:hover {
  background: #dc2626;
  transform: scale(1.05);
}
.descriptions-modal-footer[data-v-4389e22c] {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-4389e22c],
.modal-container[data-v-4389e22c],
.modal-content-large[data-v-4389e22c] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-4389e22c] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-4389e22c],
.modal-header h3[data-v-4389e22c],
.modal-header h4[data-v-4389e22c],
.modal-title[data-v-4389e22c] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-4389e22c] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-4389e22c] {
    padding: 12px 14px;
}
.modal-footer[data-v-4389e22c] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-4389e22c],
.btn-close[data-v-4389e22c],
.modal-close[data-v-4389e22c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-4389e22c]:hover,
.btn-close[data-v-4389e22c]:hover,
.modal-close[data-v-4389e22c]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-4389e22c],
.btn-secondary[data-v-4389e22c],
.btn-cancel[data-v-4389e22c],
.btn-cancel-edit[data-v-4389e22c],
.btn-save[data-v-4389e22c],
.btn-save-edit[data-v-4389e22c],
.btn-confirm[data-v-4389e22c],
.btn-danger[data-v-4389e22c],
.btn-success[data-v-4389e22c],
.btn-add[data-v-4389e22c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-4389e22c],
.btn-cancel[data-v-4389e22c],
.btn-cancel-edit[data-v-4389e22c] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-4389e22c]:hover:not(:disabled),
.btn-cancel[data-v-4389e22c]:hover:not(:disabled),
.btn-cancel-edit[data-v-4389e22c]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-4389e22c],
.btn-confirm[data-v-4389e22c],
.btn-save[data-v-4389e22c],
.btn-save-edit[data-v-4389e22c],
.btn-add[data-v-4389e22c] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-4389e22c]:hover:not(:disabled),
.btn-confirm[data-v-4389e22c]:hover:not(:disabled),
.btn-save[data-v-4389e22c]:hover:not(:disabled),
.btn-save-edit[data-v-4389e22c]:hover:not(:disabled),
.btn-add[data-v-4389e22c]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-4389e22c] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-4389e22c]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-4389e22c] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-4389e22c]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-4389e22c],
.modal-body input[type="number"][data-v-4389e22c],
.modal-body input[type="email"][data-v-4389e22c],
.modal-body input[type="tel"][data-v-4389e22c],
.modal-body input[type="url"][data-v-4389e22c],
.modal-body input[type="search"][data-v-4389e22c],
.modal-body input[type="date"][data-v-4389e22c],
.modal-body input[type="password"][data-v-4389e22c],
.modal-body select[data-v-4389e22c],
.modal-body textarea[data-v-4389e22c] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-4389e22c]:focus,
.modal-body input[type="number"][data-v-4389e22c]:focus,
.modal-body input[type="email"][data-v-4389e22c]:focus,
.modal-body input[type="tel"][data-v-4389e22c]:focus,
.modal-body input[type="url"][data-v-4389e22c]:focus,
.modal-body input[type="search"][data-v-4389e22c]:focus,
.modal-body input[type="date"][data-v-4389e22c]:focus,
.modal-body input[type="password"][data-v-4389e22c]:focus,
.modal-body select[data-v-4389e22c]:focus,
.modal-body textarea[data-v-4389e22c]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-4389e22c],
.modal-body .form-label[data-v-4389e22c] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The preview sheet and the descriptions sheet, same frame as the rest. */
.invoice-preview-modal[data-v-4389e22c],
.descriptions-modal[data-v-4389e22c] {
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.preview-header[data-v-4389e22c],
.descriptions-modal-header[data-v-4389e22c] {
  padding: 12px 14px;
  border-bottom: 1px solid #dde3ea;
}
.preview-header h3[data-v-4389e22c],
.descriptions-modal-header h3[data-v-4389e22c] {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.descriptions-modal-body[data-v-4389e22c] {
  padding: 12px 14px;
}
.descriptions-modal-footer[data-v-4389e22c] {
  padding: 10px 14px;
  gap: 8px;
  border-top: 1px solid #dde3ea;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-4389e22c] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-4389e22c],
.modal-actions[data-v-4389e22c] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-nav[data-v-4389e22c],
.btn-delete-selected[data-v-4389e22c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-nav[data-v-4389e22c] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-nav[data-v-4389e22c]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}
.btn-delete-selected[data-v-4389e22c] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #e04545;
}
.btn-delete-selected[data-v-4389e22c]:hover:not(:disabled) {
  background: #fff;
  border-color: #e04545;
  color: #e04545;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-4389e22c]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-4389e22c]:hover,
.btn-icon.btn-icon-danger[data-v-4389e22c]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-4389e22c] {
  transition: transform 0.15s ease;
}

/* ── The switch, the chips and the hints ───────────────────────────────
 *
 * The switch was a solid blue pill with a white knob — the loudest mark in a
 * card of hairlines — and the alternative names sat in blue-on-blue chips
 * with an 18px typographic cross. All three are now what the rest of the
 * product uses: a rail with a handle, a quiet chip with a hairline, and a
 * hint one step smaller than the field it explains. */
.toggle[data-v-4389e22c] {
  width: 30px;
  height: 17px;
}
.toggle-track[data-v-4389e22c] {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: none;
}
.toggle-track[data-v-4389e22c]::before,
.toggle-track[data-v-4389e22c]::after {
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 2.5px;
  right: auto;
  top: 50%;
  margin-top: -4.5px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: none;
}
.toggle-track[data-v-4389e22c]::after {
  content: none;
}
.toggle input:checked + .toggle-track[data-v-4389e22c] {
  background: transparent;
  border-color: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-4389e22c]::before {
  background: var(--primary);
  transform: translateX(13px);
}
.toggle:hover .toggle-track[data-v-4389e22c] {
  border-color: var(--primary);
}
.toggle-text[data-v-4389e22c],
.toggle-label[data-v-4389e22c] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* An alternative name on file: a quiet chip, not a blue badge. */
.alias-tag[data-v-4389e22c] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 8px;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.alias-remove[data-v-4389e22c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.alias-remove[data-v-4389e22c]:hover {
  background: transparent;
  color: #e04545;
  transform: translateY(-1px);
}
.alias-tags[data-v-4389e22c] {
  gap: 5px;
}
.alias-input[data-v-4389e22c] {
  font-size: 13px;
}

/* What a field means, a step below the field itself. */
.field-hint[data-v-4389e22c] {
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
}
.form-group[data-v-4389e22c] {
  margin-bottom: 10px;
}
.form-group label[data-v-4389e22c] {
  margin-bottom: 3px;
}

/* ── The last details ──────────────────────────────────────────────────
 *
 * The internal code wore a violet gradient pill with a shadow — a colour
 * from no part of this product; the two marks beside the mapping fields were
 * 32px bordered tiles; and the hints were set in italics. */
.internal-code-badge[data-v-4389e22c] {
  padding: 1px 6px;
  background: #f4f9fd;
  border: 1px solid #dde3ea;
  border-radius: 4px;
  color: var(--primary, #0697e4);
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
  margin-left: 8px;
}
.input-with-button .btn-icon[data-v-4389e22c] {
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
}
.input-with-button .btn-icon[data-v-4389e22c]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  transform: translateY(-2px);
}
.input-with-button .btn-icon svg[data-v-4389e22c] {
  width: 14px;
  height: 14px;
}

/* These open the list of mappings already saved against the code, so on a code
   that does not exist yet there is nothing to open. In the action colour it
   read as a live button that ignored the click; grey says it is not one yet,
   and the tooltip says when it will be. */
.input-with-button .btn-icon[data-v-4389e22c]:disabled {
  color: #94a3b8;
  opacity: 0.65;
  cursor: not-allowed;
}
.btn-nav[data-v-4389e22c] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  box-shadow: none;
}
.btn-nav[data-v-4389e22c]:hover:not(:disabled) {
  background: transparent;
  color: var(--primary, #0697e4);
  transform: translateY(-2px);
}
.btn-nav[data-v-4389e22c]:disabled {
  color: #cbd5e1;
  cursor: default;
}
.field-hint[data-v-4389e22c] {
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: #64748b;
}
.form-group-toggle-inline[data-v-4389e22c] {
  margin-top: 6px;
}
.modal-header-actions[data-v-4389e22c] {
  display: flex;
  align-items: center;
  gap: 2px;
}

.modal-backdrop[data-v-986e5a99] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow-x: auto;
}
.modal-container[data-v-986e5a99] {
  position: relative;
  z-index: 9999;
  width: 1378px !important;
  min-width: 1378px !important;
  margin: 0 auto;
}
.missing-account-codes-modal[data-v-986e5a99] {
  max-width: 1378px !important;
  width: 1378px !important;
}
.modal-content[data-v-986e5a99] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-986e5a99] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(to bottom, #ffffff, #fafbfc);
  gap: 16px;
  border-radius: 12px 12px 0 0;
}
.modal-title-section[data-v-986e5a99] {
  flex: 1;
}
.modal-header-actions[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-title[data-v-986e5a99] {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #111827;
  letter-spacing: -0.01em;
}
.modal-subtitle[data-v-986e5a99] {
  font-size: 14px;
  color: #6b7280;
  margin-top: 6px;
  margin-bottom: 12px;
  font-weight: 400;
}
.header-actions-row[data-v-986e5a99] {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: nowrap;
}
.modal-title-section .btn-add[data-v-986e5a99] {
  margin-top: 8px;
}
.btn-icon[data-v-986e5a99] {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon[data-v-986e5a99]:hover {
  background: #f3f4f6;
  color: #374151;
}
.modal-body[data-v-986e5a99] {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.loading-container[data-v-986e5a99] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: #6b7280;
  font-size: 15px;
}
.spinner-small[data-v-986e5a99] {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin-986e5a99 0.8s linear infinite;
}
@keyframes spin-986e5a99 {
to { transform: rotate(360deg);
}
}
.items-list[data-v-986e5a99] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.invoice-group[data-v-986e5a99] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoice-header[data-v-986e5a99] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.invoice-header-actions[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.invoice-mapping[data-v-986e5a99] {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
}
.invoice-mapping > .account-code-selector[data-v-986e5a99] {
  flex: 1;
  min-width: 300px;
}
.invoice-mapping > .internal-code-selector[data-v-986e5a99] {
  flex: 0 0 auto;
  width: auto;
}
.invoice-title[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #1e293b;
  font-size: 15px;
}
.invoice-info[data-v-986e5a99] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.invoice-main-line[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.invoice-icon[data-v-986e5a99] {
  color: #3b82f6;
  font-size: 18px;
}
.invoice-number[data-v-986e5a99] {
  color: #0f172a;
  font-weight: 700;
}
.invoice-number-link[data-v-986e5a99] {
  color: #2563eb;
  text-decoration: none;
  cursor: pointer;
}
.invoice-number-link[data-v-986e5a99]:hover {
  text-decoration: underline;
}
.invoice-date[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}
.invoice-date-icon[data-v-986e5a99] {
  font-size: 11px;
  color: #94a3b8;
}
.vendor-name[data-v-986e5a99] {
  color: #64748b;
  font-weight: 500;
  padding-left: 8px;
  border-left: 2px solid #cbd5e1;
}
.item-count[data-v-986e5a99] {
  display: block;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.btn-add[data-v-986e5a99] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
  max-width: 150px;
  height: 40px;
}
.btn-add svg[data-v-986e5a99] {
  flex-shrink: 0;
}
.btn-add[data-v-986e5a99]:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}
.btn-add[data-v-986e5a99]:active {
  transform: translateY(0);
}
.item-row[data-v-986e5a99] {
  display: flex;
  align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  gap: 12px;
  background: white;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.item-row[data-v-986e5a99]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.item-info[data-v-986e5a99] {
  flex: 1;
  min-width: 0;
}
.item-type-badge[data-v-986e5a99] {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  width: fit-content;
}
.item-type-badge.barcode[data-v-986e5a99] {
  color: #1e40af;
}
.item-type-badge.description[data-v-986e5a99] {
  color: #6b21a8;
}
.item-type-badge.both[data-v-986e5a99] {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #92400e;
  border: 1px solid #fbbf24;
}
.combined-item[data-v-986e5a99] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 8px;
  row-gap: 8px;
  align-items: center;
}
.combined-item[data-v-986e5a99] > * {
  flex-shrink: 0;
}
.combined-item .mt-2[data-v-986e5a99] {
  margin-top: 0;
  margin-left: 0;
}
.item-value[data-v-986e5a99] {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.4;
  display: inline-block;
}
.item-description[data-v-986e5a99],
.item-barcode[data-v-986e5a99] {
  font-size: 13px;
  color: #6b7280;
  margin-top: 6px;
  font-weight: 500;
  padding: 6px 10px;
  background: #f9fafb;
  border-radius: 6px;
  border-left: 3px solid #e5e7eb;
}
.item-mapping[data-v-986e5a99] {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 540px;
}
.item-mapping > .account-code-selector[data-v-986e5a99] {
  flex: 1;
  min-width: 280px;
  max-width: 420px;
}
.item-mapping > .internal-code-selector[data-v-986e5a99] {
  flex: 0 0 auto;
  width: auto;
}
.item-mapping .btn-add-quick[data-v-986e5a99] {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: #0ea5e9;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.item-mapping .btn-add-quick svg[data-v-986e5a99] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.item-mapping .btn-add-quick[data-v-986e5a99]:hover {
  background: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.item-mapping .btn-add-quick[data-v-986e5a99]:active {
  transform: translateY(0);
}
.item-mapping select[data-v-986e5a99] {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}
.item-mapping select[data-v-986e5a99]:hover {
  border-color: #cbd5e1;
}
.item-mapping select[data-v-986e5a99]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.error-message[data-v-986e5a99] {
  padding: 14px 18px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}
.modal-footer[data-v-986e5a99] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid #e5e7eb;
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
}
.btn[data-v-986e5a99] {
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}
.btn-secondary[data-v-986e5a99] {
  background: white;
  color: #374151;
  border: 2px solid #e5e7eb;
}
.btn-secondary[data-v-986e5a99]:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.btn-primary[data-v-986e5a99] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-primary[data-v-986e5a99]:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}
.btn-primary[data-v-986e5a99]:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

/* Account Code Modal Wrapper - Ensure it appears above this modal */
.account-code-modal-wrapper[data-v-986e5a99] {
  z-index: 10100;
}
.account-code-modal-wrapper[data-v-986e5a99] .modal-overlay {
  z-index: 10100 !important;
}

/* Original invoice preview overlay */
.original-preview-backdrop[data-v-986e5a99] {
  position: fixed;
  inset: 0;
  z-index: 10200;
  background: rgba(15, 23, 42, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.original-preview[data-v-986e5a99] {
  background: #fff;
  border-radius: 12px;
  width: min(1400px, 95vw);
  height: min(95vh, 1400px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.original-preview-header[data-v-986e5a99] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid #e2e8f0;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
  min-height: 80px;
}
.original-preview-title[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
  color: #2563eb;
}
.original-preview-actions[data-v-986e5a99] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.zoom-level[data-v-986e5a99] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 55px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  background: #f1f5f9;
  border-radius: 6px;
  user-select: none;
}
.original-preview-btn[data-v-986e5a99] {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  font-size: 14px;
}
.original-preview-btn[data-v-986e5a99]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.original-preview-btn[data-v-986e5a99]:hover:not(:disabled) {
  background: #eef2f7;
  color: #0f172a;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.original-preview-frame-container[data-v-986e5a99] {
  flex: 1;
  overflow: auto;
  background: #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  user-select: none;
}
.original-preview-frame-container.is-zoomed[data-v-986e5a99] {
  cursor: grab;
}
.original-preview-frame-container.is-dragging[data-v-986e5a99] {
  cursor: grabbing;
}
.original-preview-frame[data-v-986e5a99] {
  min-width: 100%;
  min-height: 100%;
  border: 0;
  background: #ffffff;
  transform-origin: top left;
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
.modal-backdrop[data-v-986e5a99] {
    padding: 10px;
}
.modal-content[data-v-986e5a99] {
    max-height: 95vh;
}
.modal-header[data-v-986e5a99] {
    padding: 16px;
    flex-wrap: wrap;
}
.modal-header-actions[data-v-986e5a99] {
    width: 100%;
    order: -1;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.modal-title-section[data-v-986e5a99] {
    width: 100%;
}
.modal-title[data-v-986e5a99] {
    font-size: 18px;
}
.modal-subtitle[data-v-986e5a99] {
    font-size: 13px;
}
.header-actions-row[data-v-986e5a99] {
    flex-direction: column;
    align-items: stretch;
}
.modal-body[data-v-986e5a99] {
    padding: 16px;
}
.btn-add[data-v-986e5a99] {
    width: 100%;
    justify-content: center;
}
.invoice-header[data-v-986e5a99] {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
}
.invoice-title[data-v-986e5a99] {
    flex-wrap: wrap;
    font-size: 14px;
}
.invoice-number[data-v-986e5a99] {
    font-size: 14px;
}
.vendor-name[data-v-986e5a99] {
    font-size: 13px;
    padding-left: 6px;
    flex-basis: 100%;
    border-left: none;
    padding-top: 4px;
}
.invoice-header-actions[data-v-986e5a99] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.invoice-mapping[data-v-986e5a99] {
    min-width: 100%;
}
.item-count[data-v-986e5a99] {
    text-align: center;
}
.item-row[data-v-986e5a99] {
    flex-direction: column;
    padding: 12px;
    gap: 10px;
}
.item-info[data-v-986e5a99] {
    width: 100%;
}
.combined-item[data-v-986e5a99] {
    flex-wrap: wrap;
}
.item-mapping[data-v-986e5a99] {
    flex: 1;
    width: 100%;
    margin-left: 0;
}
.modal-footer[data-v-986e5a99] {
    padding: 16px;
    flex-direction: column;
}
.btn[data-v-986e5a99] {
    width: 100%;
    justify-content: center;
}
}
@media (max-width: 480px) {
.modal-backdrop[data-v-986e5a99] {
    padding: 0;
}
.modal-content[data-v-986e5a99] {
    border-radius: 0;
    max-height: 100vh;
}
.modal-header[data-v-986e5a99] {
    padding: 12px;
}
.modal-title[data-v-986e5a99] {
    font-size: 16px;
}
.modal-body[data-v-986e5a99] {
    padding: 12px;
}
.invoice-header[data-v-986e5a99] {
    padding: 10px;
}
.invoice-title[data-v-986e5a99] {
    font-size: 13px;
    gap: 8px;
}
.item-row[data-v-986e5a99] {
    padding: 10px;
}
.item-value[data-v-986e5a99] {
    font-size: 12px;
}
.item-type-badge[data-v-986e5a99] {
    font-size: 9px;
    padding: 2px 6px;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-986e5a99],
.modal-container[data-v-986e5a99],
.modal-content-large[data-v-986e5a99] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-986e5a99] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-986e5a99],
.modal-header h3[data-v-986e5a99],
.modal-header h4[data-v-986e5a99],
.modal-title[data-v-986e5a99] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-986e5a99] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-986e5a99] {
    padding: 12px 14px;
}
.modal-footer[data-v-986e5a99] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-986e5a99],
.btn-close[data-v-986e5a99],
.modal-close[data-v-986e5a99] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-986e5a99]:hover,
.btn-close[data-v-986e5a99]:hover,
.modal-close[data-v-986e5a99]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-986e5a99],
.btn-secondary[data-v-986e5a99],
.btn-cancel[data-v-986e5a99],
.btn-cancel-edit[data-v-986e5a99],
.btn-save[data-v-986e5a99],
.btn-save-edit[data-v-986e5a99],
.btn-confirm[data-v-986e5a99],
.btn-danger[data-v-986e5a99],
.btn-success[data-v-986e5a99],
.btn-add[data-v-986e5a99] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-986e5a99],
.btn-cancel[data-v-986e5a99],
.btn-cancel-edit[data-v-986e5a99] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-986e5a99]:hover:not(:disabled),
.btn-cancel[data-v-986e5a99]:hover:not(:disabled),
.btn-cancel-edit[data-v-986e5a99]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-986e5a99],
.btn-confirm[data-v-986e5a99],
.btn-save[data-v-986e5a99],
.btn-save-edit[data-v-986e5a99],
.btn-add[data-v-986e5a99] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-986e5a99]:hover:not(:disabled),
.btn-confirm[data-v-986e5a99]:hover:not(:disabled),
.btn-save[data-v-986e5a99]:hover:not(:disabled),
.btn-save-edit[data-v-986e5a99]:hover:not(:disabled),
.btn-add[data-v-986e5a99]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-986e5a99] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-986e5a99]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-986e5a99] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-986e5a99]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-986e5a99],
.modal-body input[type="number"][data-v-986e5a99],
.modal-body input[type="email"][data-v-986e5a99],
.modal-body input[type="tel"][data-v-986e5a99],
.modal-body input[type="url"][data-v-986e5a99],
.modal-body input[type="search"][data-v-986e5a99],
.modal-body input[type="date"][data-v-986e5a99],
.modal-body input[type="password"][data-v-986e5a99],
.modal-body select[data-v-986e5a99],
.modal-body textarea[data-v-986e5a99] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-986e5a99]:focus,
.modal-body input[type="number"][data-v-986e5a99]:focus,
.modal-body input[type="email"][data-v-986e5a99]:focus,
.modal-body input[type="tel"][data-v-986e5a99]:focus,
.modal-body input[type="url"][data-v-986e5a99]:focus,
.modal-body input[type="search"][data-v-986e5a99]:focus,
.modal-body input[type="date"][data-v-986e5a99]:focus,
.modal-body input[type="password"][data-v-986e5a99]:focus,
.modal-body select[data-v-986e5a99]:focus,
.modal-body textarea[data-v-986e5a99]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-986e5a99],
.modal-body .form-label[data-v-986e5a99] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-986e5a99] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-986e5a99],
.modal-actions[data-v-986e5a99] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-add-quick[data-v-986e5a99] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-add-quick[data-v-986e5a99] {
  background: #0697e4;
  border: 1px solid #0697e4;
  color: #fff;
}
.btn-add-quick[data-v-986e5a99]:hover:not(:disabled) {
  background: #0b84c7;
  border-color: #0b84c7;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-986e5a99]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-986e5a99]:hover,
.btn-icon.btn-icon-danger[data-v-986e5a99]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-986e5a99] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-986e5a99] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── At the product's scale ────────────────────────────────────────────
 *
 * The rows were amber-tinted fields beside a filled blue square, with the
 * kind of each line set in magenta small caps and a 1378px wrapper holding
 * it all. Same rows as the rest of the app now: hairline fields, a quiet
 * mark to add a code, and the kind said in the secondary grey. */
.missing-account-codes-modal[data-v-986e5a99] {
  width: min(1100px, 94vw) !important;
  min-width: 0 !important;
}
.items-list[data-v-986e5a99] {
  gap: 10px;
}
.invoice-group[data-v-986e5a99] {
  border: 1px solid #dde3ea;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}
.invoice-header[data-v-986e5a99] {
  padding: 8px 10px;
  background: #fbfcfd;
  border-bottom: 1px solid #f1f5f9;
}
.item-count[data-v-986e5a99] {
  display: block;
  padding: 5px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #64748b;
  text-transform: uppercase;
}
.item-row[data-v-986e5a99] {
  gap: 10px;
  padding: 7px 10px;
  border: none;
  border-top: 1px solid #f1f5f9;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.item-row[data-v-986e5a99]:hover {
  background: #fbfcfd;
  transform: none;
  box-shadow: none;
}
.item-type-badge[data-v-986e5a99] {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #64748b;
}
.item-type-badge.barcode[data-v-986e5a99],
.item-type-badge.description[data-v-986e5a99] {
  background: transparent;
  color: #64748b;
}
.item-value[data-v-986e5a99] {
  font-size: 12px;
  line-height: 1.4;
  color: #1e293b;
}
.item-mapping[data-v-986e5a99] {
  gap: 6px;
}

/* Adding a code from a row: the mark on its own, like every other. */
.btn-add-quick[data-v-986e5a99] {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--primary, #0697e4);
  box-shadow: none;
}
.btn-add-quick[data-v-986e5a99]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  transform: translateY(-2px);
}
.btn-add-quick svg[data-v-986e5a99] {
  width: 14px;
  height: 14px;
}
.header-actions-row[data-v-986e5a99] {
  margin-top: 8px;
}

/* Written with the row as well, because the rule it answers is
   .item-mapping .btn-add-quick — a class on its own cannot outrank it. */
.item-mapping .btn-add-quick[data-v-986e5a99] {
  /* flex-basis, not width, is what sizes it in the row. */
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--primary, #0697e4);
  box-shadow: none;
}
.item-mapping .btn-add-quick svg[data-v-986e5a99] {
  width: 14px;
  height: 14px;
}
.item-mapping .btn-add-quick[data-v-986e5a99]:hover {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  transform: translateY(-2px);
  box-shadow: none;
}

.modal-backdrop[data-v-68bbb2e7] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow-x: auto;
}
.modal-container[data-v-68bbb2e7] {
  position: relative;
  z-index: 9999;
  width: 1100px;
  min-width: 1100px;
  margin: 0 auto;
}
.vat-exemption-modal[data-v-68bbb2e7] {
  max-width: 1100px;
  width: 1100px;
}
.modal-content[data-v-68bbb2e7] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-68bbb2e7] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(to bottom, #ffffff, #fafbfc);
  gap: 16px;
  border-radius: 12px 12px 0 0;
}
.modal-title-section[data-v-68bbb2e7] {
  flex: 1;
}
.modal-title[data-v-68bbb2e7] {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #111827;
  letter-spacing: -0.01em;
}
.modal-subtitle[data-v-68bbb2e7] {
  font-size: 14px;
  color: #6b7280;
  margin-top: 6px;
  margin-bottom: 0;
  font-weight: 400;
}
.btn-icon[data-v-68bbb2e7] {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #6b7280;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon[data-v-68bbb2e7]:hover {
  background: #f3f4f6;
  color: #374151;
}
.modal-body[data-v-68bbb2e7] {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.loading-container[data-v-68bbb2e7] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: #6b7280;
  font-size: 15px;
}
.spinner-small[data-v-68bbb2e7] {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin-68bbb2e7 0.8s linear infinite;
}
@keyframes spin-68bbb2e7 {
to { transform: rotate(360deg);
}
}
.invoices-list[data-v-68bbb2e7] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.invoice-item[data-v-68bbb2e7] {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  gap: 16px;
  background: white;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.invoice-item[data-v-68bbb2e7]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.invoice-thumbnail[data-v-68bbb2e7] {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.invoice-thumbnail[data-v-68bbb2e7]:hover {
  border-color: #0ea5e9;
  transform: scale(1.05);
}
.thumbnail-img[data-v-68bbb2e7] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.invoice-content[data-v-68bbb2e7] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.invoice-info[data-v-68bbb2e7] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.invoice-header-line[data-v-68bbb2e7] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.invoice-icon[data-v-68bbb2e7] {
  color: #3b82f6;
  font-size: 16px;
  flex-shrink: 0;
}
.invoice-number[data-v-68bbb2e7] {
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
}
.separator[data-v-68bbb2e7] {
  color: #cbd5e1;
  font-weight: 400;
  font-size: 15px;
}
.vendor-name[data-v-68bbb2e7] {
  color: #64748b;
  font-weight: 500;
}
.vat-rate[data-v-68bbb2e7] {
  color: #ea580c;
  font-weight: 600;
  padding: 2px 8px;
  background: #ffedd5;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 12px;
}
.invoice-fields[data-v-68bbb2e7] {
  display: grid;
  grid-template-columns: 240px 480px;
  gap: 12px;
}
.field-group[data-v-68bbb2e7] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-group label[data-v-68bbb2e7] {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.field-group .form-control[data-v-68bbb2e7] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  background: white;
  color: #1f2937;
  transition: all 0.2s ease;
  min-height: 38px;
}
.field-group select.form-control[data-v-68bbb2e7] {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236b7280' d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  padding-right: 36px;
}
.field-group .form-control[data-v-68bbb2e7]:hover {
  border-color: #d1d5db;
}
.field-group .form-control[data-v-68bbb2e7]:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.error-message[data-v-68bbb2e7] {
  padding: 14px 18px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}
.modal-footer[data-v-68bbb2e7] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid #e5e7eb;
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
}
.btn[data-v-68bbb2e7] {
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}
.btn-secondary[data-v-68bbb2e7] {
  background: white;
  color: #374151;
  border: 2px solid #e5e7eb;
}
.btn-secondary[data-v-68bbb2e7]:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.btn-primary[data-v-68bbb2e7] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-primary[data-v-68bbb2e7]:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}
.btn-primary[data-v-68bbb2e7]:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
.modal-backdrop[data-v-68bbb2e7] {
    padding: 0;
    overflow-y: auto;
}
.modal-container[data-v-68bbb2e7] {
    width: 100%;
    min-width: auto;
    max-width: 100%;
    margin: 0;
}
.vat-exemption-modal[data-v-68bbb2e7] {
    width: 100%;
    max-width: 100%;
    min-width: auto;
}
.modal-content[data-v-68bbb2e7] {
    border-radius: 0;
    max-height: 100vh;
    min-height: 100vh;
}
.modal-header[data-v-68bbb2e7] {
    padding: 12px 16px;
    gap: 8px;
}
.modal-title-section[data-v-68bbb2e7] {
    padding-right: 24px;
}
.modal-title[data-v-68bbb2e7] {
    font-size: 16px;
    line-height: 1.3;
}
.modal-subtitle[data-v-68bbb2e7] {
    font-size: 12px;
    line-height: 1.4;
}
.close-btn[data-v-68bbb2e7] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 6px;
}
.modal-body[data-v-68bbb2e7] {
    padding: 12px;
    gap: 12px;
    overflow-y: auto;
}
.invoice-item[data-v-68bbb2e7] {
    padding: 12px;
    gap: 10px;
    flex-direction: column;
}
.invoice-thumbnail[data-v-68bbb2e7] {
    display: none;
}
.invoice-content[data-v-68bbb2e7] {
    margin-left: 0;
    width: 100%;
}
.invoice-header-line[data-v-68bbb2e7] {
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
}
.invoice-icon[data-v-68bbb2e7] {
    font-size: 14px;
}
.invoice-number[data-v-68bbb2e7] {
    font-size: 13px;
}
.vendor-name[data-v-68bbb2e7] {
    font-size: 12px;
    word-break: break-word;
}
.separator[data-v-68bbb2e7] {
    font-size: 13px;
}
.vat-rate[data-v-68bbb2e7] {
    padding: 2px 6px;
    font-size: 10px;
}
.invoice-fields[data-v-68bbb2e7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: none;
}
.field-group[data-v-68bbb2e7] {
    width: 100%;
}
.field-group label[data-v-68bbb2e7] {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.form-control[data-v-68bbb2e7] {
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
}
.modal-footer[data-v-68bbb2e7] {
    padding: 12px 16px;
    flex-direction: column-reverse;
    gap: 10px;
    border-top: 1px solid #e5e7eb;
}
.btn[data-v-68bbb2e7] {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 12px 16px;
}
}


/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-68bbb2e7],
.modal-container[data-v-68bbb2e7],
.modal-content-large[data-v-68bbb2e7] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-68bbb2e7] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-68bbb2e7],
.modal-header h3[data-v-68bbb2e7],
.modal-header h4[data-v-68bbb2e7],
.modal-title[data-v-68bbb2e7] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-68bbb2e7] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-68bbb2e7] {
    padding: 12px 14px;
}
.modal-footer[data-v-68bbb2e7] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-68bbb2e7],
.btn-close[data-v-68bbb2e7],
.modal-close[data-v-68bbb2e7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-68bbb2e7]:hover,
.btn-close[data-v-68bbb2e7]:hover,
.modal-close[data-v-68bbb2e7]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-68bbb2e7],
.btn-secondary[data-v-68bbb2e7],
.btn-cancel[data-v-68bbb2e7],
.btn-cancel-edit[data-v-68bbb2e7],
.btn-save[data-v-68bbb2e7],
.btn-save-edit[data-v-68bbb2e7],
.btn-confirm[data-v-68bbb2e7],
.btn-danger[data-v-68bbb2e7],
.btn-success[data-v-68bbb2e7],
.btn-add[data-v-68bbb2e7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-68bbb2e7],
.btn-cancel[data-v-68bbb2e7],
.btn-cancel-edit[data-v-68bbb2e7] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-68bbb2e7]:hover:not(:disabled),
.btn-cancel[data-v-68bbb2e7]:hover:not(:disabled),
.btn-cancel-edit[data-v-68bbb2e7]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-68bbb2e7],
.btn-confirm[data-v-68bbb2e7],
.btn-save[data-v-68bbb2e7],
.btn-save-edit[data-v-68bbb2e7],
.btn-add[data-v-68bbb2e7] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-68bbb2e7]:hover:not(:disabled),
.btn-confirm[data-v-68bbb2e7]:hover:not(:disabled),
.btn-save[data-v-68bbb2e7]:hover:not(:disabled),
.btn-save-edit[data-v-68bbb2e7]:hover:not(:disabled),
.btn-add[data-v-68bbb2e7]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-68bbb2e7] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-68bbb2e7]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-68bbb2e7] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-68bbb2e7]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-68bbb2e7],
.modal-body input[type="number"][data-v-68bbb2e7],
.modal-body input[type="email"][data-v-68bbb2e7],
.modal-body input[type="tel"][data-v-68bbb2e7],
.modal-body input[type="url"][data-v-68bbb2e7],
.modal-body input[type="search"][data-v-68bbb2e7],
.modal-body input[type="date"][data-v-68bbb2e7],
.modal-body input[type="password"][data-v-68bbb2e7],
.modal-body select[data-v-68bbb2e7],
.modal-body textarea[data-v-68bbb2e7] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-68bbb2e7]:focus,
.modal-body input[type="number"][data-v-68bbb2e7]:focus,
.modal-body input[type="email"][data-v-68bbb2e7]:focus,
.modal-body input[type="tel"][data-v-68bbb2e7]:focus,
.modal-body input[type="url"][data-v-68bbb2e7]:focus,
.modal-body input[type="search"][data-v-68bbb2e7]:focus,
.modal-body input[type="date"][data-v-68bbb2e7]:focus,
.modal-body input[type="password"][data-v-68bbb2e7]:focus,
.modal-body select[data-v-68bbb2e7]:focus,
.modal-body textarea[data-v-68bbb2e7]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-68bbb2e7],
.modal-body .form-label[data-v-68bbb2e7] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-68bbb2e7] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-68bbb2e7],
.modal-actions[data-v-68bbb2e7] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-68bbb2e7]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-68bbb2e7]:hover,
.btn-icon.btn-icon-danger[data-v-68bbb2e7]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-68bbb2e7] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-68bbb2e7] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Use global modal-backdrop and modal-container from app.css */
/* Custom styles only for specific modal content */
.export-columns-modal[data-v-9dcc18ad] {
  /* Override global modal-content height to extend to max */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
}
.modal-header[data-v-9dcc18ad] {
  /* Modal header is already styled globally, just add specific overrides */
  flex-shrink: 0;
  border-radius: 1rem 1rem 0 0;
}
.modal-header h2[data-v-9dcc18ad] {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.modal-body[data-v-9dcc18ad] {
  /* Override global modal-body to work with flex layout */
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}
.columns-instructions[data-v-9dcc18ad] {
  padding: 12px;
  background: var(--info-bg, #eff6ff);
  border-radius: 8px;
  border-left: 3px solid var(--info-border, #3b82f6);
}
.columns-instructions p[data-v-9dcc18ad] {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #374151);
}
.columns-search[data-v-9dcc18ad] {
  width: 100%;
}
.search-input[data-v-9dcc18ad] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
}
.columns-actions[data-v-9dcc18ad] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.type-filter-bar[data-v-9dcc18ad] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
}
.type-filter-label[data-v-9dcc18ad] {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}
.type-filter-buttons[data-v-9dcc18ad] {
  display: flex;
  gap: 4px;
}
.type-filter-btn[data-v-9dcc18ad] {
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary, #374151);
  cursor: pointer;
  transition: all 0.15s;
}
.type-filter-btn[data-v-9dcc18ad]:hover {
  background: #f3f4f6;
}
.type-filter-btn.active[data-v-9dcc18ad] {
  background: var(--primary, #4f8cff);
  color: #fff;
  border-color: var(--primary, #4f8cff);
}
.btn-sm[data-v-9dcc18ad] {
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.columns-list[data-v-9dcc18ad] {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 8px;
  background: var(--bg-secondary, #f9fafb);
  min-height: 0;
}
.column-item[data-v-9dcc18ad] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 8px;
  transition: all 0.2s;
}
.column-item[data-v-9dcc18ad]:hover {
  border-color: var(--primary, #4f8cff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.column-item.disabled[data-v-9dcc18ad] {
  opacity: 0.5;
}
.drag-handle[data-v-9dcc18ad] {
  cursor: grab;
  color: var(--text-tertiary, #9ca3af);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.drag-handle[data-v-9dcc18ad]:active {
  cursor: grabbing;
}
.column-order[data-v-9dcc18ad] {
  width: 40px;
  height: 32px;
  text-align: center;
  background: var(--bg-tertiary, #f3f4f6);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  padding: 0 4px;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}
.column-order[data-v-9dcc18ad]::-webkit-outer-spin-button,
.column-order[data-v-9dcc18ad]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.column-order[data-v-9dcc18ad]:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  background: #fff;
}
.column-toggle[data-v-9dcc18ad] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.column-toggle input[data-v-9dcc18ad] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track[data-v-9dcc18ad] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 10px;
  transition: background 0.2s;
}
.toggle-track[data-v-9dcc18ad]::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.column-toggle input:checked + .toggle-track[data-v-9dcc18ad] {
  background: var(--primary, #4f8cff);
}
.column-toggle input:checked + .toggle-track[data-v-9dcc18ad]::before {
  transform: translateX(16px);
}
.column-info[data-v-9dcc18ad] {
  flex: 1;
  min-width: 0;
}
.column-label[data-v-9dcc18ad] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #111827);
  margin-bottom: 2px;
}
.column-key[data-v-9dcc18ad] {
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  font-family: monospace;
}
.modal-footer[data-v-9dcc18ad] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
  flex-shrink: 0;
  border-radius: 0 0 1rem 1rem;
}
.footer-left[data-v-9dcc18ad] {
  flex: 1;
}
.selected-count[data-v-9dcc18ad] {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}
.footer-right[data-v-9dcc18ad] {
  display: flex;
  gap: 12px;
}
.btn-secondary[data-v-9dcc18ad],
.btn-primary[data-v-9dcc18ad] {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-secondary[data-v-9dcc18ad] {
  background: white;
  border: 1px solid var(--border-color, #d1d5db);
  color: var(--text-primary, #374151);
}
.btn-secondary[data-v-9dcc18ad]:hover {
  background: var(--hover-bg, #f3f4f6);
}
.btn-primary[data-v-9dcc18ad] {
  background: var(--primary, #4f8cff);
  color: white;
}
.btn-primary[data-v-9dcc18ad]:hover {
  background: var(--primary-dark, #3b7ad8);
}
.btn-primary[data-v-9dcc18ad]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-9dcc18ad],
.modal-container[data-v-9dcc18ad],
.modal-content-large[data-v-9dcc18ad] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-9dcc18ad] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-9dcc18ad],
.modal-header h3[data-v-9dcc18ad],
.modal-header h4[data-v-9dcc18ad],
.modal-title[data-v-9dcc18ad] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-9dcc18ad] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-9dcc18ad] {
    padding: 12px 14px;
}
.modal-footer[data-v-9dcc18ad] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-9dcc18ad],
.btn-close[data-v-9dcc18ad],
.modal-close[data-v-9dcc18ad] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-9dcc18ad]:hover,
.btn-close[data-v-9dcc18ad]:hover,
.modal-close[data-v-9dcc18ad]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-9dcc18ad],
.btn-secondary[data-v-9dcc18ad],
.btn-cancel[data-v-9dcc18ad],
.btn-cancel-edit[data-v-9dcc18ad],
.btn-save[data-v-9dcc18ad],
.btn-save-edit[data-v-9dcc18ad],
.btn-confirm[data-v-9dcc18ad],
.btn-danger[data-v-9dcc18ad],
.btn-success[data-v-9dcc18ad],
.btn-add[data-v-9dcc18ad] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-9dcc18ad],
.btn-cancel[data-v-9dcc18ad],
.btn-cancel-edit[data-v-9dcc18ad] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-9dcc18ad]:hover:not(:disabled),
.btn-cancel[data-v-9dcc18ad]:hover:not(:disabled),
.btn-cancel-edit[data-v-9dcc18ad]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-9dcc18ad],
.btn-confirm[data-v-9dcc18ad],
.btn-save[data-v-9dcc18ad],
.btn-save-edit[data-v-9dcc18ad],
.btn-add[data-v-9dcc18ad] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-9dcc18ad]:hover:not(:disabled),
.btn-confirm[data-v-9dcc18ad]:hover:not(:disabled),
.btn-save[data-v-9dcc18ad]:hover:not(:disabled),
.btn-save-edit[data-v-9dcc18ad]:hover:not(:disabled),
.btn-add[data-v-9dcc18ad]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-9dcc18ad] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-9dcc18ad]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-9dcc18ad] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-9dcc18ad]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-9dcc18ad],
.modal-body input[type="number"][data-v-9dcc18ad],
.modal-body input[type="email"][data-v-9dcc18ad],
.modal-body input[type="tel"][data-v-9dcc18ad],
.modal-body input[type="url"][data-v-9dcc18ad],
.modal-body input[type="search"][data-v-9dcc18ad],
.modal-body input[type="date"][data-v-9dcc18ad],
.modal-body input[type="password"][data-v-9dcc18ad],
.modal-body select[data-v-9dcc18ad],
.modal-body textarea[data-v-9dcc18ad] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-9dcc18ad]:focus,
.modal-body input[type="number"][data-v-9dcc18ad]:focus,
.modal-body input[type="email"][data-v-9dcc18ad]:focus,
.modal-body input[type="tel"][data-v-9dcc18ad]:focus,
.modal-body input[type="url"][data-v-9dcc18ad]:focus,
.modal-body input[type="search"][data-v-9dcc18ad]:focus,
.modal-body input[type="date"][data-v-9dcc18ad]:focus,
.modal-body input[type="password"][data-v-9dcc18ad]:focus,
.modal-body select[data-v-9dcc18ad]:focus,
.modal-body textarea[data-v-9dcc18ad]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-9dcc18ad],
.modal-body .form-label[data-v-9dcc18ad] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* A field with a mark standing in it keeps the room for the mark: the
   tighter padding above would have put the text under the magnifier. */
.search-box input[data-v-9dcc18ad],
.search-input[data-v-9dcc18ad],
.modal-search-input-wrapper input[data-v-9dcc18ad] {
    padding-left: 30px;
}

/* Outweighing the field's own padding, which is written as .search-box
   .search-input and so outranks a plain descendant rule. */
.search-box input.search-input[data-v-9dcc18ad],
.modal-search-input-wrapper input[data-v-9dcc18ad] {
    padding-left: 32px;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-9dcc18ad] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-9dcc18ad],
.modal-actions[data-v-9dcc18ad] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-sm[data-v-9dcc18ad] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-sm[data-v-9dcc18ad] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-sm[data-v-9dcc18ad]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-9dcc18ad]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-9dcc18ad]:hover,
.btn-icon.btn-icon-danger[data-v-9dcc18ad]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-9dcc18ad] {
  transition: transform 0.15s ease;
}

/* ── The column list, at the table's scale ─────────────────────────────
 *
 * Forty-one rows of 12px padding in bordered white cards on a grey field,
 * with a blue instruction panel over them and a filled blue pill for the
 * chosen side — the dialogue was as loud as the table it configures and
 * four screens long. Rows now, parted by a hairline, on white. */
.columns-instructions[data-v-9dcc18ad] {
  padding: 8px 10px;
  background: #f4f9fd;
  border: 1px solid #dde3ea;
  border-left: 2px solid var(--primary);
  border-radius: 8px;
}
.columns-instructions p[data-v-9dcc18ad] {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.columns-actions[data-v-9dcc18ad] {
  gap: 6px;
}

/* Which side is being set: a quiet pair, the chosen one marked by its edge
   and its colour rather than by a filled pill. */
.type-filter-bar[data-v-9dcc18ad] {
  gap: 8px;
}
.type-filter-label[data-v-9dcc18ad] {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.type-filter-btn[data-v-9dcc18ad] {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
}
.type-filter-btn[data-v-9dcc18ad]:hover {
  background: #fff;
  border-color: var(--primary);
  color: var(--primary);
}
.type-filter-btn.active[data-v-9dcc18ad] {
  background: #f4f9fd;
  border-color: var(--primary);
  color: var(--primary);
}
.columns-list[data-v-9dcc18ad] {
  border: 1px solid #dde3ea;
  border-radius: 8px;
  padding: 4px;
  background: #fff;
}
.column-item[data-v-9dcc18ad] {
  gap: 9px;
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  margin-bottom: 0;
  transition: background 0.15s ease;
}
.column-item + .column-item[data-v-9dcc18ad] {
  border-top: 1px solid #f1f5f9;
}
.column-item[data-v-9dcc18ad]:hover {
  background: #fbfcfd;
  border-color: transparent;
  box-shadow: none;
}
.column-item.disabled[data-v-9dcc18ad] {
  opacity: 0.55;
}
.drag-handle[data-v-9dcc18ad] {
  width: 16px;
  height: 16px;
  color: #cbd5e1;
}
.drag-handle svg[data-v-9dcc18ad] {
  width: 14px;
  height: 14px;
}

/* Written with the element as well as the class: the field rules above are
   .modal-body input[type="number"], which outranks a class on its own. */
input.column-order[data-v-9dcc18ad],
.column-item input.column-order[data-v-9dcc18ad] {
  width: 36px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: #64748b;
}
.column-label[data-v-9dcc18ad] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.column-key[data-v-9dcc18ad] {
  font-size: 10px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The switch, as everywhere: a rail with a handle. */
.column-toggle[data-v-9dcc18ad] {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}
.column-toggle input[data-v-9dcc18ad] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.column-toggle .toggle-track[data-v-9dcc18ad] {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.column-toggle .toggle-track[data-v-9dcc18ad]::before {
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 2.5px;
  top: 50%;
  margin-top: -4.5px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.column-toggle input:checked + .toggle-track[data-v-9dcc18ad] {
  /* The earlier rule in this file fills the rail blue; the rail is an
     outline now, so the fill is cancelled here as well as the edge set. */
  background: transparent;
  border-color: var(--primary);
}
.column-toggle input:checked + .toggle-track[data-v-9dcc18ad]::before {
  background: var(--primary);
  transform: translateX(13px);
}
.column-toggle:hover .toggle-track[data-v-9dcc18ad] {
  border-color: var(--primary);
}
.selected-count[data-v-9dcc18ad] {
  font-size: 11px;
  color: #64748b;
}
.columns-search .search-input[data-v-9dcc18ad] {
  height: 32px;
  padding: 0 10px 0 10px;
  font-size: 13px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-9dcc18ad] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.missing-info-warning[data-v-3217bf8a] {
  background-color: #fff3cd;
  /* border-radius removed */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #856404;
}
.missing-info-warning svg[data-v-3217bf8a] { display: none;
}
.missing-info-warning strong[data-v-3217bf8a] {
  color: #856404;
  margin-right: 4px;
  flex-shrink: 0;
}
.missing-info-warning span[data-v-3217bf8a] {
  color: #856404;
}
.invalid-vat-warning[data-v-3217bf8a] {
  background-color: #fee;

  /* border-radius removed */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #721c24;
}
.invalid-vat-warning svg[data-v-3217bf8a] { display: none;
}
.invalid-vat-warning strong[data-v-3217bf8a] {
  color: #dc3545;
  margin-right: 4px;
  flex-shrink: 0;
}
.invalid-vat-warning span[data-v-3217bf8a] {
  color: #721c24;
}
.vat-conflict-warning[data-v-3217bf8a] {
  background-color: #fff3cd;

  /* border-radius removed */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #856404;
}
.vat-conflict-warning svg[data-v-3217bf8a] { display: none;
}
.vat-conflict-warning strong[data-v-3217bf8a] {
  color: #856404;
  margin-right: 4px;
  flex-shrink: 0;
}
.vat-conflict-warning span[data-v-3217bf8a] {
  color: #856404;
}
.missing-info-warning[data-v-3217bf8a] {
  background-color: #fff3cd;
  /* border-radius removed */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #856404;
}
.missing-info-warning svg[data-v-3217bf8a] { display: none;
}
.missing-info-warning strong[data-v-3217bf8a] {
  color: #856404;
  margin-right: 4px;
  flex-shrink: 0;
}
.missing-info-warning span[data-v-3217bf8a] {
  color: #856404;
}
.invalid-vat-warning[data-v-3217bf8a] {
  background-color: #fee;
  /* border-radius removed */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #721c24;
}
.invalid-vat-warning svg[data-v-3217bf8a] { display: none;
}
.invalid-vat-warning strong[data-v-3217bf8a] {
  color: #dc3545;
  margin-right: 4px;
  flex-shrink: 0;
}
.invalid-vat-warning span[data-v-3217bf8a] {
  color: #721c24;
}
.vat-conflict-warning[data-v-3217bf8a] {
  background-color: #fff3cd;
  /* border-radius removed */
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #856404;
}
.vat-conflict-warning svg[data-v-3217bf8a] { display: none;
}
.vat-conflict-warning strong[data-v-3217bf8a] {
  color: #856404;
  margin-right: 4px;
  flex-shrink: 0;
}
.vat-conflict-warning span[data-v-3217bf8a] {
  color: #856404;
}
.invoices-table-container[data-v-3217bf8a] {
  margin-top: 20px;
  overflow-x: scroll;
  border: 1px solid var(--border-color);
  /* border-radius removed */
  scrollbar-gutter: stable;
}
.invoices-table-container[data-v-3217bf8a]::-webkit-scrollbar {
  height: 8px;
  display: block;
}
.invoices-table-container[data-v-3217bf8a]::-webkit-scrollbar-track {
  background: #f1f1f1;
  display: block;
}
.invoices-table-container[data-v-3217bf8a]::-webkit-scrollbar-thumb {
  background: #888;
  display: block;
}
.invoices-table-container[data-v-3217bf8a]::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.invoices-review-table[data-v-3217bf8a] {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.invoices-review-table thead[data-v-3217bf8a] {
  background-color: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.invoices-review-table th[data-v-3217bf8a] {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.invoices-review-table th[data-v-3217bf8a]:nth-child(1) { width: 12%;
} /* Invoice Number */
.invoices-review-table th[data-v-3217bf8a]:nth-child(2) { width: 10%;
}  /* Date */
.invoices-review-table th[data-v-3217bf8a]:nth-child(3) { width: 11%;
} /* Company VAT */
.invoices-review-table th[data-v-3217bf8a]:nth-child(4) { width: 11%;
} /* Partner VAT */
.invoices-review-table th[data-v-3217bf8a]:nth-child(5) { width: 20%;
} /* Partner Name */
.invoices-review-table th[data-v-3217bf8a]:nth-child(6) { width: 6%;
}  /* Currency */
.invoices-review-table th[data-v-3217bf8a]:nth-child(7) { width: 10%;
} /* VAT Amount */
.invoices-review-table th[data-v-3217bf8a]:nth-child(8) { width: 10%;
} /* Total Amount */
.invoices-review-table th[data-v-3217bf8a]:nth-child(9) { width: 10%; text-align: center;
} /* Actions */
.invoices-review-table td[data-v-3217bf8a] {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  overflow: visible;
}
.invoices-review-table tbody tr[data-v-3217bf8a]:hover {
  background-color: var(--bg-hover);
}
.invoices-review-table tbody tr:last-child td[data-v-3217bf8a] {
  border-bottom: none;
}
.invoices-review-table td.amount[data-v-3217bf8a] {
  text-align: right;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}
.invoices-review-table td.missing-data[data-v-3217bf8a] {
  background-color: #fee;
  color: #dc3545;
  font-weight: 600;
}
.invoices-review-table td.conflict-vat[data-v-3217bf8a] {
  background-color: #ffeb3b;
  color: #856404;
  font-weight: 600;
}
td.conflict-vat .editable-field[data-v-3217bf8a] {
  background-color: #ffeb3b !important;
  border-color: #ffc107 !important;
}
.conflict-vat-row[data-v-3217bf8a] {
  background-color: rgba(255, 235, 59, 0.2);
}
.conflict-vat-row[data-v-3217bf8a]:hover {
  background-color: rgba(255, 235, 59, 0.3);
}
.invoices-review-table td.unique-name[data-v-3217bf8a] {
  background-color: #ffebee;
  color: #c62828;
  font-weight: 600;
}
td.unique-name .editable-field[data-v-3217bf8a] {
  background-color: #ffebee !important;
  border-color: #ef5350 !important;
}
.type-badge[data-v-3217bf8a] {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}
.type-badge.type-invoice[data-v-3217bf8a] {
  background-color: #e3f2fd;
  color: #1976d2;
}
.type-badge.type-credit_note[data-v-3217bf8a] {
  background-color: #fff3e0;
  color: #f57c00;
}
.type-badge.type-debit_note[data-v-3217bf8a] {
  background-color: #fce4ec;
  color: #c2185b;
}
.type-badge.type-receipt[data-v-3217bf8a] {
  background-color: #e8f5e9;
  color: #388e3c;
}
.type-badge.type-unknown[data-v-3217bf8a] {
  background-color: #f5f5f5;
  color: #757575;
}
.editable-field[data-v-3217bf8a] {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background-color: white;
  transition: border-color 0.2s;
}
.editable-field[data-v-3217bf8a]:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}
.editable-field[data-v-3217bf8a]:hover {
  border-color: #999;
}
.missing-data .editable-field[data-v-3217bf8a] {
  background-color: #fee;
  border-color: #dc3545;
}
.missing-data .editable-field[data-v-3217bf8a]:focus {
  background-color: white;
  border-color: #4a90e2;
}
input[type="number"].editable-field[data-v-3217bf8a] {
  text-align: left;
}
.loading-container[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-secondary);
}
.no-data[data-v-3217bf8a] {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-style: italic;
}
.format-option[data-v-3217bf8a] {
  cursor: pointer;
  transition: all 0.2s ease;
}
.format-option.has-submenu[data-v-3217bf8a] {
  cursor: pointer;
  position: relative;
}

/* The card does not lift or cast a shadow: a lift is the gesture a mark on
   its own uses, and a card the size of a paragraph rising two pixels under
   the pointer reads as the grid shifting. The blue edge says enough. */
.format-option[data-v-3217bf8a]:hover:not(.loading) {
  transform: none;
  box-shadow: none;
}
.format-option .format-icon svg[data-v-3217bf8a] {
  transition: transform 0.15s ease;
}
.format-option:hover:not(.loading) > .format-content .format-icon svg[data-v-3217bf8a] {
  transform: scale(1.18);
}
.format-option.submenu-open[data-v-3217bf8a] {
  box-shadow: none;
  border-color: var(--primary);
}
.format-option.loading[data-v-3217bf8a] {
  pointer-events: none;
  opacity: 0.6;
}
.format-content[data-v-3217bf8a] {
  position: relative;
}
.format-arrow[data-v-3217bf8a] {
  position: absolute;
  right: -32px;
  top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  transition: transform 0.2s ease;
}

/* An opened format, at the same scale as the card it hangs under.
 *
 * It was a stack of grey slabs: 12px padding on every row, a filled
 * background for each one and a third, darker fill for the options inside
 * them — boxes within boxes within a box. The rows are parted by a hairline
 * now and fill nothing; the one that is chosen keeps a light tint. */
.format-submenu[data-v-3217bf8a] {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}
.submenu-actions[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.submenu-expand-arrow[data-v-3217bf8a] {
  margin-left: auto;
  color: #999;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.submenu-item.type-open[data-v-3217bf8a] {
  background-color: #f4f9fd;
  flex-wrap: wrap;
}
.type-options[data-v-3217bf8a] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid #e3ecf4;
}

/* Purchases or sales: a line of text with its mark, indented under the
   format it belongs to — not a third filled slab. */
.type-option[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background-color: transparent;
  transition: background 0.15s ease;
}
.type-option[data-v-3217bf8a]:hover {
  background-color: #fff;
}
.type-option-icon[data-v-3217bf8a] {
  width: auto;
  color: var(--primary);
  flex-shrink: 0;
}
.type-option-icon svg[data-v-3217bf8a] {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}
.type-option:hover .type-option-icon svg[data-v-3217bf8a] {
  transform: scale(1.18);
}
.submenu-item[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 0;
  border-radius: 6px;
  transition: background 0.15s ease;
  background-color: transparent;
  position: relative;
}
.submenu-item + .submenu-item[data-v-3217bf8a] {
  border-top: 1px solid #f1f5f9;
}
.submenu-item[data-v-3217bf8a]:hover {
  background-color: #fbfcfd;
}
.submenu-item.selected[data-v-3217bf8a] {
  background-color: #f4f9fd;
  border-left: none;
  box-shadow: inset 2px 0 0 0 var(--primary);
}
.submenu-item-main[data-v-3217bf8a] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* The row does not slide sideways under the pointer — nothing else in the
   app moves on hover except a mark standing on its own. */
.submenu-item-main[data-v-3217bf8a]:hover {
  transform: none;
}
.submenu-settings-btn[data-v-3217bf8a] {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-secondary, #64748b);
  flex-shrink: 0;
}
.submenu-settings-btn svg[data-v-3217bf8a] {
  width: 13px;
  height: 13px;
}

/* The app's one hover for a mark on its own. */
.submenu-settings-btn[data-v-3217bf8a]:hover {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
  transform: translateY(-2px);
}
.submenu-icon[data-v-3217bf8a] {
  color: var(--primary);
  width: auto;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.submenu-icon svg[data-v-3217bf8a] {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}

/* Hovering a row grows its mark a little. The row itself holds still — the
   mark is what answers the pointer. */
.submenu-item:hover .submenu-icon svg[data-v-3217bf8a],
.submenu-item-main:hover .submenu-icon svg[data-v-3217bf8a] {
  transform: scale(1.18);
}
.submenu-details[data-v-3217bf8a] {
  flex: 1;
}
.submenu-name[data-v-3217bf8a] {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0;
}
.submenu-description[data-v-3217bf8a] {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.format-loading[data-v-3217bf8a] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.loading-message[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 14px;
}
.spinner-small[data-v-3217bf8a] {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-3217bf8a 0.6s linear infinite;
}
@keyframes spin-3217bf8a {
to { transform: rotate(360deg);
}
}
.btn-success[data-v-3217bf8a] {
  background-color: #10b981;
  color: white;
  margin-right: 8px;
}
.btn-success[data-v-3217bf8a]:hover:not(:disabled) {
  background-color: #059669;
}
.btn-success[data-v-3217bf8a]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.flex[data-v-3217bf8a] {
  display: flex;
}
.items-center[data-v-3217bf8a] {
  align-items: center;
}
.gap-2[data-v-3217bf8a] {
  gap: 0.5rem;
}
.btn-view[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background-color: #4a90e2;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-view[data-v-3217bf8a]:hover {
  background-color: #357abd;
}
.btn-view[data-v-3217bf8a]:active {
  transform: translateY(0);
}
.select-seller-btn[data-v-3217bf8a] {
  padding: 4px 8px;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: #4a90e2;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.select-seller-btn[data-v-3217bf8a]:hover {
  background-color: #357abd;
}

/* Accounting Date Modal */
/* Matches how .accounting-date-modal sizes itself — the width belongs on the
   inner content box, not on this wrapper. */
.santa-vat-modal .modal-content[data-v-3217bf8a] {
  max-width: 780px;
}

/* The service list carries a selector and a five-decimal amount, neither of
   which fits the narrower VAT layout. */
.santa-service-modal .modal-content[data-v-3217bf8a] {
  max-width: min(1120px, 94vw);
}
.santa-vat-hint[data-v-3217bf8a] {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13.5px;
  line-height: 1.55;
}
.santa-vat-table[data-v-3217bf8a] {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.santa-vat-row[data-v-3217bf8a] {
  display: grid;
  grid-template-columns: 1.4fr 2fr 0.5fr 0.9fr;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
  align-items: baseline;
}
.santa-vat-row + .santa-vat-row[data-v-3217bf8a] { border-top: 1px solid #f3f4f6;
}
.santa-vat-row-head[data-v-3217bf8a] {
  background: #f9fafb;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.sv-col-invoice[data-v-3217bf8a] { display: flex; flex-direction: column; gap: 2px;
}
.sv-link[data-v-3217bf8a] { color: #2b82f0; font-weight: 600; text-decoration: none;
}
.sv-link[data-v-3217bf8a]:hover { text-decoration: underline;
}
.sv-seller[data-v-3217bf8a] { font-size: 11px; color: #9ca3af;
}
.sv-col-item[data-v-3217bf8a] { color: #374151;
}
.sv-col-qty[data-v-3217bf8a], .sv-col-total[data-v-3217bf8a] { text-align: right; color: #111827; font-weight: 600;
}

/* The service list trades the quantity column for the code being confirmed,
   which is a selector rather than text and needs the room. The amount is given
   a fixed track: it carries five decimals and must never be the column that
   gives way. */
.santa-vat-row.santa-service-row[data-v-3217bf8a] {
  grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.8fr) minmax(220px, 1.6fr) 150px;
  align-items: center;
}
.santa-vat-row.santa-service-row.santa-vat-row-head[data-v-3217bf8a] { align-items: baseline;
}
.santa-service-row .sv-col-total[data-v-3217bf8a] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sv-col-code[data-v-3217bf8a] { display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.sv-changed[data-v-3217bf8a] {
  font-size: 11px;
  color: #92400e;
}
.sv-error[data-v-3217bf8a] {
  margin: 0 0 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #b91c1c;
}
.santa-vat-row-head .sv-col-code[data-v-3217bf8a] { color: inherit;
}
.accounting-date-modal .modal-container[data-v-3217bf8a] {
  max-width: 720px;
}
.accounting-date-hint[data-v-3217bf8a] {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%);
  border-left: 4px solid var(--primary, #0ea5e9);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}
.accounting-date-modal .form-group[data-v-3217bf8a] {
  margin-top: 8px;
}
.accounting-date-modal .form-group label[data-v-3217bf8a] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.accounting-date-modal .form-control[data-v-3217bf8a] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}
.accounting-date-modal .form-control[data-v-3217bf8a]:focus {
  outline: none;
  border-color: var(--primary, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.accounting-date-invoice-list[data-v-3217bf8a] {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  overflow: hidden;
}
.accounting-date-list-header[data-v-3217bf8a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-primary);
}
.accounting-date-table[data-v-3217bf8a] {
  max-height: 340px;
  overflow-y: auto;
}
.accounting-date-row[data-v-3217bf8a] {
  display: grid;
  grid-template-columns: 36px 1fr 140px 180px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-primary);
}
.accounting-date-row[data-v-3217bf8a]:last-child {
  border-bottom: 0;
}
.accounting-date-row[data-v-3217bf8a]:hover:not(.accounting-date-row-head) {
  background: #f8fafc;
}
.accounting-date-row-head[data-v-3217bf8a] {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 16px;
  z-index: 1;
}
.accounting-date-col-idx[data-v-3217bf8a] {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.accounting-date-col-number[data-v-3217bf8a] {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-date-col-doc-date[data-v-3217bf8a] {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.accounting-date-col-muted[data-v-3217bf8a] {
  color: #cbd5e1;
}
.accounting-date-col-post-date[data-v-3217bf8a] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.accounting-date-row-input[data-v-3217bf8a] {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  background: white;
  transition: all 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.accounting-date-row-input[data-v-3217bf8a]:focus {
  outline: none;
  border-color: var(--primary, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.accounting-date-row-reset[data-v-3217bf8a] {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.accounting-date-row-reset[data-v-3217bf8a]:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
@media (max-width: 640px) {
.accounting-date-row[data-v-3217bf8a] {
    grid-template-columns: 28px 1fr 140px;
    grid-template-areas:
      "idx number docdate"
      ".   post   post";
    gap: 6px 8px;
}
.accounting-date-col-idx[data-v-3217bf8a] { grid-area: idx;
}
.accounting-date-col-number[data-v-3217bf8a] { grid-area: number;
}
.accounting-date-col-doc-date[data-v-3217bf8a] { grid-area: docdate;
}
.accounting-date-col-post-date[data-v-3217bf8a] { grid-area: post;
}
.accounting-date-row-head[data-v-3217bf8a] { display: none;
}
}

/* Warning Confirmation Modal */
.warning-confirmation-modal .modal-container[data-v-3217bf8a] {
  max-width: 500px;
}
.warning-confirmation-content[data-v-3217bf8a] {
  padding: 24px 0;
}
.warning-confirmation-content .warning-message[data-v-3217bf8a] {
  margin: 12px 0;
  padding: 12px 16px;
  /* border-radius removed */
  font-size: 14px;
  line-height: 1.5;
}
.warning-confirmation-content .warning-message-error[data-v-3217bf8a] {
  background-color: #fef2f2;
  border-left: 4px solid #dc3545;
  color: #991b1b;
}
.warning-confirmation-content .warning-message-error strong[data-v-3217bf8a] {
  color: #dc3545;
  font-weight: 600;
}
.warning-confirmation-content .warning-message-warning[data-v-3217bf8a] {
  background-color: #fefce8;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}
.warning-confirmation-content .warning-message-warning strong[data-v-3217bf8a] {
  color: #d97706;
  font-weight: 600;
}
.warning-confirmation-content .confirmation-question[data-v-3217bf8a] {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

/* Responsive Styles for screens less than 1350px */
@media (max-width: 1349px) {
.invoices-table-container[data-v-3217bf8a] {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.invoices-review-table[data-v-3217bf8a] {
    min-width: 1200px;
}
}

/* VAT Validation Indicators */
.vat-indicator-inline[data-v-3217bf8a] {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 14px;
  cursor: help;
  vertical-align: middle;
}
.vat-indicator-inline.vat-valid[data-v-3217bf8a] {
  color: #10b981;
}
.vat-indicator-inline.vat-invalid[data-v-3217bf8a] {
  color: #ef4444;
}
.vat-invalid-cell[data-v-3217bf8a] {
  color: #ef4444 !important;
  font-weight: 600;
}
.vat-invalid-cell input[data-v-3217bf8a] {
  color: #ef4444 !important;
  font-weight: 600;
  border-color: #ef4444 !important;
}


/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-3217bf8a],
.modal-container[data-v-3217bf8a],
.modal-content-large[data-v-3217bf8a] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-3217bf8a] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-3217bf8a],
.modal-header h3[data-v-3217bf8a],
.modal-header h4[data-v-3217bf8a],
.modal-title[data-v-3217bf8a] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-3217bf8a] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-3217bf8a] {
    padding: 12px 14px;
}
.modal-footer[data-v-3217bf8a] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-3217bf8a],
.btn-close[data-v-3217bf8a],
.modal-close[data-v-3217bf8a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-3217bf8a]:hover,
.btn-close[data-v-3217bf8a]:hover,
.modal-close[data-v-3217bf8a]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-3217bf8a],
.btn-secondary[data-v-3217bf8a],
.btn-cancel[data-v-3217bf8a],
.btn-cancel-edit[data-v-3217bf8a],
.btn-save[data-v-3217bf8a],
.btn-save-edit[data-v-3217bf8a],
.btn-confirm[data-v-3217bf8a],
.btn-danger[data-v-3217bf8a],
.btn-success[data-v-3217bf8a],
.btn-add[data-v-3217bf8a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-3217bf8a],
.btn-cancel[data-v-3217bf8a],
.btn-cancel-edit[data-v-3217bf8a] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-3217bf8a]:hover:not(:disabled),
.btn-cancel[data-v-3217bf8a]:hover:not(:disabled),
.btn-cancel-edit[data-v-3217bf8a]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-3217bf8a],
.btn-confirm[data-v-3217bf8a],
.btn-save[data-v-3217bf8a],
.btn-save-edit[data-v-3217bf8a],
.btn-add[data-v-3217bf8a] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-3217bf8a]:hover:not(:disabled),
.btn-confirm[data-v-3217bf8a]:hover:not(:disabled),
.btn-save[data-v-3217bf8a]:hover:not(:disabled),
.btn-save-edit[data-v-3217bf8a]:hover:not(:disabled),
.btn-add[data-v-3217bf8a]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-3217bf8a] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-3217bf8a]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-3217bf8a] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-3217bf8a]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-3217bf8a],
.modal-body input[type="number"][data-v-3217bf8a],
.modal-body input[type="email"][data-v-3217bf8a],
.modal-body input[type="tel"][data-v-3217bf8a],
.modal-body input[type="url"][data-v-3217bf8a],
.modal-body input[type="search"][data-v-3217bf8a],
.modal-body input[type="date"][data-v-3217bf8a],
.modal-body input[type="password"][data-v-3217bf8a],
.modal-body select[data-v-3217bf8a],
.modal-body textarea[data-v-3217bf8a] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-3217bf8a]:focus,
.modal-body input[type="number"][data-v-3217bf8a]:focus,
.modal-body input[type="email"][data-v-3217bf8a]:focus,
.modal-body input[type="tel"][data-v-3217bf8a]:focus,
.modal-body input[type="url"][data-v-3217bf8a]:focus,
.modal-body input[type="search"][data-v-3217bf8a]:focus,
.modal-body input[type="date"][data-v-3217bf8a]:focus,
.modal-body input[type="password"][data-v-3217bf8a]:focus,
.modal-body select[data-v-3217bf8a]:focus,
.modal-body textarea[data-v-3217bf8a]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-3217bf8a],
.modal-body .form-label[data-v-3217bf8a] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-3217bf8a] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-3217bf8a],
.modal-actions[data-v-3217bf8a] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-3217bf8a]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-3217bf8a]:hover,
.btn-icon.btn-icon-danger[data-v-3217bf8a]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-3217bf8a] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-3217bf8a] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.home-page[data-v-b3ace151] {
    min-height: 100vh;
    background: var(--bg-gray);
    padding: 24px 0;
}
.page-container[data-v-b3ace151] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Company Selection Screen (STATE A) */
/* Taken out of the page's container so the photograph reaches every edge.
   No z-index: that leaves it above the page's own content but still under the
   navigation, which is sticky at 100 and whose blur lets the image through. */
.company-selection-screen[data-v-b3ace151] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-image: url('/img/blog-image.jpg');
    background-size: cover;
    background-position: center;
    overflow: auto;
}

/* A wash over the photograph. Without it the card's white and the page's own
   greys sit on whatever happens to be behind them, and the greeting stops
   being readable the moment the image changes. */
.company-selection-screen[data-v-b3ace151]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(2px);
}

/* The card is above the wash, not under it. */
.company-selection-screen[data-v-b3ace151] > * {
    position: relative;
    z-index: 1;
}
.selection-card[data-v-b3ace151] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* It holds a logo, one line of greeting and one field — 600px was a
       width inherited from a card with far more in it. */
    max-width: 460px;
    width: 100%;
}

/* Height only, so the square mark keeps its proportions. Centred by its own
   margins rather than by the card's text-align, which a block-level image
   would not follow. */
.selection-logo[data-v-b3ace151] {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto;
}
.selection-icon[data-v-b3ace151] {
    margin-bottom: 20px;
}
.selection-title[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 24px;
    font-weight: 700;
    text-wrap: pretty;
    word-break: break-all;
    color: var(--text-primary);
    margin: 0 0 24px 0;
}
.selection-brand[data-v-b3ace151] {
    font-size: 24px;
    font-weight: 700;
}

/* Lighter and smaller than the name above it: the greeting is the second
   thing read, not the first. */
.selection-greeting[data-v-b3ace151] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
}
.selection-selector[data-v-b3ace151] {
    margin-bottom: 24px;
}
.selection-hint[data-v-b3ace151] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}
.link-button[data-v-b3ace151] {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: 14px;
}
.link-button[data-v-b3ace151]:hover {
    color: #0284c7;
}

/* Company card (STATE B)
 *
 * It was a blue band across the page, then a badge parked loose at the top
 * left — which, once the upload form moved to the left edge, landed on top of
 * it. It is a card now, the same make as the one holding the QR code, and it
 * holds its column in the row instead of floating over one.
 *
 * Everything in it is centred on the card's middle: the name, the record
 * under it and the swap button below that.
 */
.company-header-bar[data-v-b3ace151] {
    flex-shrink: 0;
    width: 260px;
    background: white;
    /* The same corner as every other card on the page: the panels under it,
       the table and the totals are all 12px. This row was 16 and read as
       belonging to a different set. */
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.company-info[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.company-name-badge[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Full width, or the block shrinks to its longest line and the two
       columns inside it stop meeting the card's own edges. */
    width: 100%;
}

/* The record as a table of pairs: the label against the card's left edge,
 * the value against its right. Two straight edges instead of fifteen lines
 * each centred on its own width. The name and the button stay centred — they
 * speak for the whole card, not for one field. */
.company-details[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
}
.company-detail[data-v-b3ace151] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    line-height: 15px;
}
.company-detail-label[data-v-b3ace151] {
    flex-shrink: 0;
}

/* The contact lines, under a hairline that separates them from the registry
   above without adding a second heading to a card this small. */
.company-contact[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--gray-lighter, #f1f5f9);
    text-align: left;
}
.company-contact-line[data-v-b3ace151] {
    font-size: 11px;
    line-height: 15px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.company-detail-label[data-v-b3ace151] {
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.company-detail-value[data-v-b3ace151] {
    color: var(--text-secondary);
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}
.company-name-badge svg[data-v-b3ace151] {
    flex-shrink: 0;
}
.company-name[data-v-b3ace151] {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.btn-switch-company[data-v-b3ace151] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-switch-company[data-v-b3ace151]:hover {
    background: var(--primary-light, #e0f2fe);
    border-color: var(--primary);
}
.btn-switch-company svg[data-v-b3ace151] {
    flex-shrink: 0;
    display: block;
    vertical-align: middle;
}

/* Upload Section */
.upload-section[data-v-b3ace151] {
    margin-bottom: 32px;
}

/* The drop zone and the QR code, side by side.
 *
 * The form takes what is left; the QR keeps a column of its own, since a
 * code has to stay big enough for a phone to read it. Narrow screens put
 * them back one above the other, where the row is dropped. */
.upload-row[data-v-b3ace151] {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

/* One height for all three.
 *
 * Left to themselves the three columns each stood as tall as their own
 * contents — 243, 246 and 252px — which reads as three boxes that nearly
 * line up, and nearly is worse than not at all. They stretch to the tallest
 * instead, and the drop zone in the middle takes the slack so its white box
 * reaches the bottom with the cards either side.
 */
.upload-row__form[data-v-b3ace151] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.upload-row__form[data-v-b3ace151] .upload-queue {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.upload-row__form[data-v-b3ace151] .upload-zone-slot {
    flex: 1;
    display: flex;
}
.upload-row__form[data-v-b3ace151] .upload-zone {
    flex: 1;
}

/* …until the queue fills. Then the two outer cards take their own height and
   sit at the top of the row, and only the middle column grows. */
.upload-row--queued[data-v-b3ace151] {
    align-items: flex-start;
}

/* With a height to fill, the card's own parts take their places: the name
   and the record at the top, the swap button at the foot. */
.upload-row:not(.upload-row--collapsed) .company-info[data-v-b3ace151] {
    height: 100%;
    justify-content: space-between;
}

/* The code and its line sit in the middle of whatever height the row has. */
.upload-row:not(.upload-row--collapsed) .qr-code-section[data-v-b3ace151] {
    justify-content: center;
}

/* Hidden form: the row comes down to one line.
 *
 * Hiding the form empties the whole row, so the only thing left to say is
 * which company the page is showing — that has to stay on screen, or the
 * table below it belongs to nobody. The card drops its record and its QR
 * neighbour and keeps the name, with the button to bring the form back at
 * the other end of the same line.
 */
.upload-row--collapsed[data-v-b3ace151] {
    align-items: center;
}

/* Both parts of the collapsed row stand 40px tall — the bar was 54 and the
   button 34, which beside each other read as two unrelated things. */
.upload-row--collapsed .company-header-bar[data-v-b3ace151] {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    text-align: left;
}
.upload-row--collapsed .company-info[data-v-b3ace151] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

/* The name and the registry run along the line rather than stacking: there
   is a card's worth of room here and only one line to fill, so the facts
   that were worth a card when it was open are worth stating here too. */
.upload-row--collapsed .company-name-badge[data-v-b3ace151] {
    width: auto;
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    overflow: hidden;
}
.upload-row--collapsed .company-details[data-v-b3ace151] {
    display: flex;
    flex-direction: row;
    width: auto;
    gap: 16px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.upload-row--collapsed .company-detail[data-v-b3ace151] {
    gap: 5px;
}

/* The contact block stays out: an address and a web address are long, and
   cut in half by an ellipsis they say less than nothing. */
.upload-row--collapsed .company-contact[data-v-b3ace151] {
    display: none;
}
.upload-row--collapsed .upload-row__form[data-v-b3ace151] {
    flex: 0 0 auto;
}

/* The button carries 20px under it for the form that used to follow it;
   with nothing following, that is what pushed it off the bar's line. */
.upload-row--collapsed .upload-row__form[data-v-b3ace151] .btn-toggle-form {
    height: 40px;
    margin-bottom: 0;
}

/* QR Code Section */
.qr-code-section[data-v-b3ace151] {
    flex-shrink: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Smaller, but not at the code's expense.
 *
 * The squares are what a camera reads, and they are coarser now that the
 * code is drawn at the standard error correction rather than the highest —
 * 43 across instead of 61. That buys the size: at 100px the symbol gives
 * 2.3px per square, where the old 116px one gave 1.9.
 *
 * The white around it is the quiet zone a scanner needs to find the symbol,
 * so the padding stays wide even though the card shrank.
 */
.qr-code-card[data-v-b3ace151] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--border);
    /* A corner inside a corner is drawn tighter than the one around it, or
       the two look like they are fighting. */
    border-radius: 8px;
    padding: 9px;
}
.qr-code-image[data-v-b3ace151] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.qr-code-placeholder[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-secondary);
}
.qr-code-placeholder p[data-v-b3ace151] {
    font-size: 13px;
    margin: 0;
}
.spinner[data-v-b3ace151] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b3ace151 1s linear infinite;
}
@keyframes spin-b3ace151 {
to {
        transform: rotate(360deg);
}
}
.qr-info[data-v-b3ace151] {
    flex: 1;
}
.qr-title[data-v-b3ace151] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.qr-description[data-v-b3ace151] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Scans Section */
.scans-section[data-v-b3ace151] {
    margin-top: 32px;
    margin-bottom: 48px;
}

/* No longer a card itself — just the stack that spaces the three apart. */
.table-container[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

/* The cards' edge, dark enough to be seen where it matters.
 *
 * It was #e2e8f0, and the table's own header band is #f8fafc — the same
 * colour as the page behind the card. So along the top that line separated
 * two identical greys, and around the corner, where a 1px line is drawn at
 * half strength across the curve, it disappeared altogether: the card read
 * as having no rounded corners at all.
 *
 * #dde3ea is what the rows inside already divide themselves with, so the
 * card is now outlined in the same weight as its own contents.
 */
.panel[data-v-b3ace151] {
    background: var(--white);
    border: 1px solid #dde3ea;
    border-radius: 12px;
    overflow: hidden;
}

/* The card with the pickers in it must not clip.
 *
 * overflow: hidden is there to keep the rounded corners honest around the
 * table's rows. On this card it also cut off the open company and document
 * lists at the card's own bottom edge — which looked like the list opening
 * behind the warning below it, when in fact it was being trimmed to the box.
 *
 * Nothing inside this one has a background of its own to spill past the
 * corners, so it can be left open.
 */
.panel--controls[data-v-b3ace151] {
    overflow: visible;
}

/* Collapse to nothing when empty, so the gap around them does not double. */
.alerts-slot[data-v-b3ace151]:empty,
.totals-slot[data-v-b3ace151]:empty {
    display: none;
}

/* The banners carry their own margin inside the old single card; between
   cards the stack's gap does that job. */
.alerts-slot[data-v-b3ace151] > * {
    margin-bottom: 0 !important;
}
.alerts-slot[data-v-b3ace151] > * + * {
    margin-top: 8px;
}

/* Table Header */
.table-header[data-v-b3ace151] {
    padding: 20px 24px;
    border-bottom: 2px solid var(--border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.header-actions[data-v-b3ace151] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.btn-manual-entry[data-v-b3ace151],
.btn-companies[data-v-b3ace151],
.btn-filter[data-v-b3ace151] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 45px;
}
.btn-manual-entry[data-v-b3ace151] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}
.btn-manual-entry[data-v-b3ace151]:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.btn-filter[data-v-b3ace151] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-filter svg[data-v-b3ace151] {
    display: block;
    flex-shrink: 0;
}
.btn-filter-text[data-v-b3ace151] {
    font-size: 14px;
    font-weight: 600;
    color: white;
}
.btn-filter.active[data-v-b3ace151] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}
.btn-companies[data-v-b3ace151]:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}
.btn-filter[data-v-b3ace151]:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

/* Filters Row */
.filters-row[data-v-b3ace151] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    padding: 24px;
    border-bottom: 2px solid var(--border);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.filter-item[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.filter-label[data-v-b3ace151] {
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Hide the standalone "Filter:" label if it exists */
.filters-row > .filter-label[data-v-b3ace151] {
    display: none;
}
.filter-select[data-v-b3ace151],
.filter-input[data-v-b3ace151] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 42px;
}
.filter-select.active-filter[data-v-b3ace151],
.filter-input.active-filter[data-v-b3ace151] {
    border: 2px solid #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

/* The date fields are the same box as every other filter.
 *
 * Only the calendar they open is ours; the field itself has no business
 * looking different from the pickers it stands in a row with — it was a
 * narrow 108px button while they filled their column.
 */
.filter-date[data-v-b3ace151] {
    display: block;
    width: 100%;
}
.filter-date[data-v-b3ace151] .date-field-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    background-color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-date[data-v-b3ace151] .date-field-input:hover {
    border-color: var(--gray-light);
}
.filter-date[data-v-b3ace151] .date-field-input.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* A date that is set marks its field, the way the other filters do. */
.filter-date.active-filter[data-v-b3ace151] .date-field-input {
    border: 2px solid #0ea5e9;
    background-color: rgba(14, 165, 233, 0.05);
}
.filter-clear-container[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.btn-clear-filters[data-v-b3ace151] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 42px;
}
.btn-clear-filters[data-v-b3ace151]:hover {
    border-color: #ef4444;
    color: white;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-clear-filters svg[data-v-b3ace151] {
    flex-shrink: 0;
    font-size: 16px;
}
.filter-select[data-v-b3ace151]:hover,
.filter-input[data-v-b3ace151]:hover {
    border-color: var(--gray-light);
}
.filter-select[data-v-b3ace151]:focus,
.filter-input[data-v-b3ace151]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.filter-select option[data-v-b3ace151] {
    background: white;
    color: var(--text-primary);
}
.filter-select option[data-v-b3ace151]:checked,
.filter-select option[data-v-b3ace151]:hover,
.filter-select option[data-v-b3ace151]:focus {
    background: var(--primary-light) !important;
    color: var(--text-primary) !important;
}

/* Actions Row */
/* No background of its own — this is what was squaring off the card's
 * corners.
 *
 * The row carried a white-to-grey fade. A background is painted as a
 * rectangle with square corners, and this card does not clip its children
 * (it cannot: the pickers in it drop lists that have to leave the box), so
 * that rectangle covered the rounded corners the card draws underneath it.
 *
 * The fade ran from #ffffff to #f8fafc across one row — barely visible, and
 * it cost the corners. The card's own white does the same job. */
.actions-row[data-v-b3ace151] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    gap: 16px;
}
.sort-group[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* stretch, not flex-start: flex-start sizes each child to its own
   content, so the company field grew and shrank with the name in it — shifting
   the type picker beside it and leaving a gap under the label when the name
   was short. Pinned widths hold the row still whatever is selected. */
.company-selector-group[data-v-b3ace151],
.type-selector-group[data-v-b3ace151] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Wide enough for a full company name, which the type selector never needs. */
.company-selector-group[data-v-b3ace151] {
    flex: 0 0 240px;
    min-width: 240px;
}
.type-selector-group[data-v-b3ace151] {
    flex: 0 0 190px;
    min-width: 190px;
}
.filter-export-group[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.actions-row .btn-filter[data-v-b3ace151] {
    margin-left: 0;
}
.sort-label[data-v-b3ace151] {
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.sort-select[data-v-b3ace151] {
    padding: 11px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: white;
    cursor: pointer;
    min-width: 180px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sort-select[data-v-b3ace151]:hover {
    border-color: #0ea5e9;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}
.sort-select[data-v-b3ace151]:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}
.export-actions[data-v-b3ace151] {
    display: flex;
    gap: 12px;
}
.btn-export-single[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    height: 45px;
}
.btn-export-single[data-v-b3ace151]:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.btn-export[data-v-b3ace151] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-original[data-v-b3ace151] {
    background: #0ea5e9;
}
.btn-original[data-v-b3ace151]:hover {
    background: #0284c7;
}
.btn-pdf[data-v-b3ace151] {
    background: #ef4444;
}
.btn-pdf[data-v-b3ace151]:hover {
    background: #dc2626;
}
.btn-txt[data-v-b3ace151] {
    background: #64748b;
}
.btn-txt[data-v-b3ace151]:hover {
    background: #475569;
}
.btn-nap[data-v-b3ace151] {
    background: #8b5cf6;
}
.btn-nap[data-v-b3ace151]:hover {
    background: #7c3aed;
}
.btn-nap-alt[data-v-b3ace151] {
    background: #ec4899;
}
.btn-nap-alt[data-v-b3ace151]:hover {
    background: #db2777;
}
.btn-html[data-v-b3ace151] {
    background: #f59e0b;
}
.btn-html[data-v-b3ace151]:hover {
    background: #d97706;
}
.btn-xlsx[data-v-b3ace151] {
    background: #10b981;
}
.btn-xlsx[data-v-b3ace151]:hover {
    background: #059669;
}

/* Select Row */
/* White, like the rows under it. Three tinted bands stacked — this, the
   column headers and the date strip — made the top of the table look like
   three separate tables; only the headers keep a fill now. */
.select-row[data-v-b3ace151] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
    min-height: 0;
    position: relative; /* anchor the centred scan-count/totals */
}
.select-all-section[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.select-all-section input[type="checkbox"][data-v-b3ace151] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.select-all-section label[data-v-b3ace151] {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.bulk-actions[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.selected-count[data-v-b3ace151] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 8px 12px;
    background: var(--white);
    border-radius: 6px;
}
.btn-bulk[data-v-b3ace151] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-bulk-export[data-v-b3ace151] {
    background: #10b981 !important;
    background-color: #10b981 !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.btn-bulk-export[data-v-b3ace151]:hover {
    background: #059669 !important;
    background-color: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.btn-bulk-archive[data-v-b3ace151] {
    background: #f59e0b !important;
    background-color: #f59e0b !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.btn-bulk-archive[data-v-b3ace151]:hover {
    background: #d97706 !important;
    background-color: #d97706 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.btn-bulk-delete[data-v-b3ace151] {
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.btn-bulk-delete[data-v-b3ace151]:hover {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.scan-count[data-v-b3ace151] {
    font-size: 12px;
    color: var(--text-light);
}
.scan-totals-center[data-v-b3ace151] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
}

/* Pagination */
.pagination[data-v-b3ace151] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}
.pagination-left[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.pagination-center[data-v-b3ace151] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.pagination-right[data-v-b3ace151] {
    flex: 1;
}
.items-per-page-label[data-v-b3ace151] {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}
.items-per-page-select[data-v-b3ace151] {
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    /* Room for the chevron the stylesheet draws on the right. */
    padding-right: 26px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%23374151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.items-per-page-select[data-v-b3ace151]:hover {
    border-color: var(--primary);
}
.items-per-page-select[data-v-b3ace151]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.items-per-page-select.open[data-v-b3ace151] {
    border-color: var(--primary);
    color: var(--primary);
    /* Turned over and in the same blue as the text, while the list is down. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%232b82f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.5 3.5-3.5 3.5 3.5'/%3E%3C/svg%3E");
}

/* The list, dressed like the pickers at the top of the page rather than by
   the operating system. */
.per-page-menu[data-v-b3ace151] {
    position: fixed;
    z-index: 1000;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}
.per-page-menu-item[data-v-b3ace151] {
    display: block;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}
.per-page-menu-item + .per-page-menu-item[data-v-b3ace151] {
    border-top: 1px solid var(--gray-lighter, #f1f5f9);
}
.per-page-menu-item[data-v-b3ace151]:hover {
    background: var(--primary-light, #e0f2fe);
}
.per-page-menu-item.selected[data-v-b3ace151] {
    background: var(--primary-light, #e0f2fe);
    font-weight: 600;
}
.pagination-btn[data-v-b3ace151] {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.pagination-btn[data-v-b3ace151]:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}
.pagination-btn[data-v-b3ace151]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-numbers[data-v-b3ace151] {
    display: flex;
    gap: 6px;
}
.pagination-number[data-v-b3ace151] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.pagination-number[data-v-b3ace151]:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.pagination-number.active[data-v-b3ace151] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
@media (max-width: 768px) {
.scans-section[data-v-b3ace151] {
        padding: 12px;
}
.upload-row[data-v-b3ace151] {
        flex-direction: column;
}

    /* Stacked, the two cards are no longer columns of a row — they are the
       page. A 260px card under a full-width one reads as something that did
       not finish loading. */
.company-header-bar[data-v-b3ace151] {
        width: 100%;
}

    /* Collapsed, the bar keeps the name and nothing else.
     *
     * On a wide screen it also carries the VAT number, the registration
     * number and the tax office, which fit beside the name with room to
     * spare. At 390px they do not: the line overflowed and pushed the name
     * itself out of sight, leaving a bar that said "ДДС НОМЕР …" and no
     * company at all — which is the one thing it exists to say. */
.upload-row--collapsed .company-details[data-v-b3ace151] {
        display: none;
}

    /* Stacked, both parts take the width. The collapsed bar is told to grow
       along the row's main axis, which on a phone runs downwards — so it grew
       taller and stayed as narrow as its text, floating in the middle of the
       screen with the button under it. */
.upload-row--collapsed .company-header-bar[data-v-b3ace151] {
        width: 100%;
        height: auto;
        min-height: 40px;
}
.upload-row--collapsed .upload-row__form[data-v-b3ace151] {
        width: 100%;
}

    /* The component's own box has to take the width too, or the button
       inside it is 100% of something narrower than the card above it. */
.upload-row--collapsed .upload-row__form[data-v-b3ace151] .upload-queue {
        width: 100%;
        align-self: stretch;
}
.upload-row--collapsed .upload-row__form[data-v-b3ace151] .btn-toggle-form {
        width: 100%;
}
.qr-code-section[data-v-b3ace151] {
        width: 100%;
        padding: 16px;
}
.qr-code-card[data-v-b3ace151] {
        width: 160px;
        height: 160px;
}
.qr-info[data-v-b3ace151] {
        text-align: center;
}
.filters-section[data-v-b3ace151] {
        flex-direction: column;
}
.filters-grid[data-v-b3ace151] {
        grid-template-columns: 1fr;
}
.bulk-actions-bar[data-v-b3ace151] {
        flex-direction: column;
        gap: 12px;
}
.table-header[data-v-b3ace151] {
        padding: 12px;
}
.header-actions[data-v-b3ace151] {
        width: 100%;
        flex-wrap: wrap;
}
.btn-manual-entry[data-v-b3ace151],
    .btn-companies[data-v-b3ace151],
    .btn-filter[data-v-b3ace151] {
        flex: 1;
        min-width: calc(50% - 6px);
        padding: 10px 12px;
        font-size: 13px;
        gap: 6px;
        height: auto;
}
.filters-row[data-v-b3ace151] {
        grid-template-columns: 1fr;
        padding: 16px 12px;
        gap: 12px;
}
.filters-row .filter-item[data-v-b3ace151] {
        width: 100%;
}
.actions-row[data-v-b3ace151] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
}
.company-selector-group[data-v-b3ace151],
    .type-selector-group[data-v-b3ace151] {
        flex: 1 1 auto;
        min-width: 0;
}
.filter-export-group[data-v-b3ace151] {
        display: flex;
        gap: 12px;
        width: 100%;
}
.filter-export-group .btn-filter[data-v-b3ace151],
    .filter-export-group .export-actions[data-v-b3ace151] {
        flex: 1 1 50%;
        min-width: 0;
        max-width: 50%;
}
.filter-export-group .btn-filter[data-v-b3ace151] {
        margin-left: 0;
}
.filter-export-group .btn-export-single[data-v-b3ace151] {
        width: 100%;
}
.sort-group[data-v-b3ace151],
    .type-selector-group[data-v-b3ace151] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
}
.sort-label[data-v-b3ace151] {
        font-size: 10px;
}
.sort-select[data-v-b3ace151] {
        width: 100%;
        min-width: auto;
        padding: 10px 12px;
        font-size: 13px;
}
.export-actions[data-v-b3ace151] {
        width: 100%;
}
.btn-export-single[data-v-b3ace151] {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
        height: auto;
}
.select-row[data-v-b3ace151] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
}
.select-all-section[data-v-b3ace151] {
        justify-content: center;
}
.select-all-section label[data-v-b3ace151] {
        font-size: 12px;
}
.bulk-actions[data-v-b3ace151] {
        flex-direction: column;
        width: 100%;
        gap: 8px;
}
.selected-count[data-v-b3ace151] {
        text-align: center;
}
.btn-bulk[data-v-b3ace151] {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 8px 14px;
}
.scan-count[data-v-b3ace151] {
        text-align: center;
        font-size: 12px;
}
.scan-totals-center[data-v-b3ace151] {
        position: static;
        transform: none;
        white-space: normal;
        text-align: center;
        font-size: 12px;
}
.bulk-actions-left[data-v-b3ace151],
    .bulk-actions-right[data-v-b3ace151] {
        width: 100%;
        justify-content: center;
}
.pagination[data-v-b3ace151] {
        flex-direction: column;
        gap: 16px;
}
.pagination-left[data-v-b3ace151],
    .pagination-center[data-v-b3ace151] {
        width: 100%;
        justify-content: center;
}
.pagination-numbers[data-v-b3ace151] {
        gap: 4px;
}
.pagination-number[data-v-b3ace151] {
        width: 36px;
        height: 36px;
        font-size: 12px;
}
.pagination-btn[data-v-b3ace151] {
        padding: 8px 12px;
        font-size: 12px;
}
.items-per-page-label[data-v-b3ace151] {
        font-size: 12px;
}
.items-per-page-select[data-v-b3ace151] {
        padding: 6px 10px;
        font-size: 12px;
}
}

/* Bulk Delete Modal */
.modal-overlay[data-v-b3ace151] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content[data-v-b3ace151] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
}
.modal-header[data-v-b3ace151] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.modal-header h3[data-v-b3ace151] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    padding-right: 40px;
}
.modal-header .btn[data-v-b3ace151] {
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
}
.modal-actions[data-v-b3ace151] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.btn-confirm[data-v-b3ace151],
.btn-cancel[data-v-b3ace151] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-confirm[data-v-b3ace151] {
    background: #10b981;
    color: white;
}
.btn-confirm[data-v-b3ace151]:hover {
    background: #059669;
}
.btn-cancel[data-v-b3ace151] {
    background: #f1f5f9;
    color: #4b5563;
}
.btn-cancel[data-v-b3ace151]:hover {
    background: #e2e8f0;
}

/* Persistent register-missing notice */
.register-notice[data-v-b3ace151] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    color: #78350f;
}
.register-notice__icon[data-v-b3ace151] {
    font-size: 1.25rem;
    line-height: 1.4;
}
.register-notice__body[data-v-b3ace151] {
    flex: 1 1 auto;
    min-width: 0;
}
.register-notice__title[data-v-b3ace151] {
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.register-notice__nums[data-v-b3ace151] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.4rem;
}
.register-notice__hint[data-v-b3ace151] {
    font-size: 0.82rem;
    opacity: 0.85;
}
.register-notice__actions[data-v-b3ace151] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    align-self: center; /* vertically centre the button within the tall banner */
}
.register-notice__btn[data-v-b3ace151] {
    background: #d97706;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.register-notice__btn[data-v-b3ace151]:hover:not(:disabled) {
    background: #b45309;
}
.register-notice__btn[data-v-b3ace151]:disabled {
    opacity: 0.65;
    cursor: default;
}
.register-notice__dismiss[data-v-b3ace151] {
    background: transparent;
    border: none;
    color: #78350f;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-b3ace151],
.modal-container[data-v-b3ace151],
.modal-content-large[data-v-b3ace151] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-b3ace151] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-b3ace151],
.modal-header h3[data-v-b3ace151],
.modal-header h4[data-v-b3ace151],
.modal-title[data-v-b3ace151] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-b3ace151] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #4b5563;
}
.modal-body[data-v-b3ace151] {
    padding: 12px 14px;
}
.modal-footer[data-v-b3ace151] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-b3ace151],
.btn-close[data-v-b3ace151],
.modal-close[data-v-b3ace151] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4b5563;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-b3ace151]:hover,
.btn-close[data-v-b3ace151]:hover,
.modal-close[data-v-b3ace151]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-b3ace151],
.btn-secondary[data-v-b3ace151],
.btn-cancel[data-v-b3ace151],
.btn-cancel-edit[data-v-b3ace151],
.btn-save[data-v-b3ace151],
.btn-save-edit[data-v-b3ace151],
.btn-confirm[data-v-b3ace151],
.btn-danger[data-v-b3ace151],
.btn-success[data-v-b3ace151],
.btn-add[data-v-b3ace151] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-b3ace151],
.btn-cancel[data-v-b3ace151],
.btn-cancel-edit[data-v-b3ace151] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-b3ace151]:hover:not(:disabled),
.btn-cancel[data-v-b3ace151]:hover:not(:disabled),
.btn-cancel-edit[data-v-b3ace151]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-b3ace151],
.btn-confirm[data-v-b3ace151],
.btn-save[data-v-b3ace151],
.btn-save-edit[data-v-b3ace151],
.btn-add[data-v-b3ace151] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-b3ace151]:hover:not(:disabled),
.btn-confirm[data-v-b3ace151]:hover:not(:disabled),
.btn-save[data-v-b3ace151]:hover:not(:disabled),
.btn-save-edit[data-v-b3ace151]:hover:not(:disabled),
.btn-add[data-v-b3ace151]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-b3ace151] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-b3ace151]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-b3ace151] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-b3ace151]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The row of answers under a question — "delete these seven?" — is a footer
   like any other: a hairline above it and the two buttons at its end. */
.modal-actions[data-v-b3ace151] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #dde3ea;
    background: #fff;
}

/* A question and its two answers: one line between them, not two, and the
   one that deletes carries the bin's red rather than the app's blue. */
.modal-overlay .modal-content .modal-header[data-v-b3ace151] {
    border-bottom: none;
    padding-bottom: 4px;
}
.modal-actions .btn-confirm[data-v-b3ace151] {
    background: #e04545;
    border-color: #e04545;
}
.modal-actions .btn-confirm[data-v-b3ace151]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-b3ace151] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-b3ace151],
.modal-actions[data-v-b3ace151] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-b3ace151]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-b3ace151]:hover,
.btn-icon.btn-icon-danger[data-v-b3ace151]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-b3ace151] {
  transition: transform 0.15s ease;
}

/* flex, not inline-block: an inline wrapper carries a line box whose
   descender space sits under the button, making this taller than the 40px it
   contains and lifting the label above the icons it stands next to. */
.language-selector[data-v-5b3c9c74] { position: relative; display: flex; align-items: center;
}
.lang-btn[data-v-5b3c9c74] {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* The same 40x40 square as the nav icons, with the outlined box centred
     inside it. */
  box-sizing: border-box;
  width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 11px;
  /* The same ink as the nav icons. */
  background: transparent; color: var(--gray, #322e38);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Matches the nav icons beside it: blue, lifted two pixels, no box. Kept in
   sync with .btn-icon:hover in Navigation.vue. */
.lang-btn[data-v-5b3c9c74]:hover, .lang-btn.open[data-v-5b3c9c74] {
  color: #2b82f0;
  transform: translateY(-2px);
}

/* 1.5px to sit between the icons' 1.6 stroke and a border's whole pixels;
   currentColor so the outline turns blue with the text on hover rather than
   being a second thing to keep in step. */
.lang-code[data-v-5b3c9c74] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  /* An optical correction: the code is all caps, so its mass sits above the
     baseline while the line box still reserves room for descenders. */
  padding-top: 1px;
}
.lang-dropdown[data-v-5b3c9c74] {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 160px; padding: 6px;
  background: #ffffff; border: 1px solid rgba(31, 41, 51, 0.08);
  border-radius: 14px; box-shadow: 0 24px 60px -34px rgba(31, 41, 51, 0.4);
  display: flex; flex-direction: column;
}
.lang-dropdown button[data-v-5b3c9c74] {
  text-align: left; padding: 10px 12px; border: none; background: none;
  border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink, #1f2933);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.lang-dropdown button[data-v-5b3c9c74]:hover { background: rgba(31, 41, 51, 0.05);
}
/* The chosen language is said by its colour alone; a filled row behind it
   read as a second kind of hover. */
.lang-dropdown button.active[data-v-5b3c9c74] { background: none; color: #2b82f0;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-5b3c9c74]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-5b3c9c74]:hover,
.btn-icon.btn-icon-danger[data-v-5b3c9c74]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-5b3c9c74] {
  transition: transform 0.15s ease;
}

/* aligned with the public site design (light, violet accent, Plus Jakarta Sans) */
.profile-page[data-v-bb8b4eb1] {
  --violet: #2b82f0; --violet-hover: #1a6fdc; --ink: #1f2933; --muted: #6b7280;
  --line: rgba(31,41,51,0.08); --card: #ffffff; --pill: 999px;
  background: #f4f3f8; min-height: 100vh; padding: 44px 0 80px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em; color: var(--ink);
}
.profile-page button[data-v-bb8b4eb1], .profile-page input[data-v-bb8b4eb1], .profile-page select[data-v-bb8b4eb1] { font-family: inherit;
}
.page-container[data-v-bb8b4eb1] { max-width: 900px; margin: 0 auto; padding: 0 24px;
}
.page-header[data-v-bb8b4eb1] { margin-bottom: 32px;
}
.page-title[data-v-bb8b4eb1] { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 8px;
}
.page-subtitle[data-v-bb8b4eb1] { font-size: 16px; color: var(--muted); margin: 0;
}
.section-card[data-v-bb8b4eb1] { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 56px -42px rgba(31,41,51,0.3); margin-bottom: 22px; overflow: hidden;
}
.card-header[data-v-bb8b4eb1] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.card-title[data-v-bb8b4eb1] { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em;
}
.card-content[data-v-bb8b4eb1] { padding: 26px 28px;
}
.info-grid[data-v-bb8b4eb1] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.info-item[data-v-bb8b4eb1] { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.info-label[data-v-bb8b4eb1] { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.info-value[data-v-bb8b4eb1] { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0;
}
.subscription-info[data-v-bb8b4eb1] { display: flex; flex-direction: column; gap: 20px;
}
.sub-item[data-v-bb8b4eb1] { display: flex; flex-direction: column; gap: 6px;
}
.sub-label[data-v-bb8b4eb1] { font-size: 13px; font-weight: 600; color: var(--muted);
}
.sub-value[data-v-bb8b4eb1] { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0;
}
.progress-bar[data-v-bb8b4eb1] { height: 10px; background: #eef1f6; border-radius: var(--pill); overflow: hidden; margin-top: 4px;
}
.progress-fill[data-v-bb8b4eb1] { height: 100%; background: linear-gradient(90deg, #5aa2ff, #2b82f0); border-radius: var(--pill); transition: width 0.5s ease;
}
.progress-fill-premium[data-v-bb8b4eb1] { background: linear-gradient(90deg, #a78bfa, #7c5cff);
}
.btn-primary[data-v-bb8b4eb1] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--pill); border: none; background: var(--violet); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 14px 26px -14px rgba(43,130,240,0.6); text-decoration: none;
}
.btn-primary[data-v-bb8b4eb1]:hover { background: var(--violet-hover); transform: translateY(-2px);
}
.btn-secondary[data-v-bb8b4eb1] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none;
}
.btn-secondary[data-v-bb8b4eb1]:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px);
}
.api-note[data-v-bb8b4eb1] { display: flex; gap: 14px; align-items: flex-start; background: rgba(43,130,240,0.06); border: 1px solid rgba(43,130,240,0.18); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; color: var(--violet);
}
.note-title[data-v-bb8b4eb1] { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
}
.note-text[data-v-bb8b4eb1] { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0;
}
.note-text code[data-v-bb8b4eb1] { background: rgba(43,130,240,0.1); color: var(--violet); padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
}
.api-keys-list[data-v-bb8b4eb1] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px;
}
.api-key-item[data-v-bb8b4eb1] { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fbfbfd; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.key-name[data-v-bb8b4eb1] { font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.key-value[data-v-bb8b4eb1] { font-size: 13px; color: var(--muted); font-family: 'Fira Code', monospace; margin-top: 2px;
}
.key-meta[data-v-bb8b4eb1] { font-size: 12px; color: #9aa3af; margin-top: 4px;
}
.btn-delete[data-v-bb8b4eb1] { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--pill); border: 1px solid rgba(239,68,68,0.25); background: #fff; color: #ef4444; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.btn-delete[data-v-bb8b4eb1]:hover { background: #ef4444; color: #fff; border-color: #ef4444;
}
.no-keys[data-v-bb8b4eb1] { color: var(--muted); font-size: 14px; padding: 8px 0 22px;
}
.api-example[data-v-bb8b4eb1] { background: #161d27; border-radius: 14px; padding: 18px 20px;
}
.example-title[data-v-bb8b4eb1] { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.6); margin: 0 0 10px;
}
.example-code[data-v-bb8b4eb1] { font-family: 'Fira Code', monospace; font-size: 12.5px; color: rgba(255,255,255,0.85); white-space: pre-wrap; word-break: break-all; margin: 0; line-height: 1.6;
}
.modal-overlay[data-v-bb8b4eb1] { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-content[data-v-bb8b4eb1] { background: #fff; border-radius: 22px; width: 100%; max-width: 460px; box-shadow: 0 40px 90px -40px rgba(31,41,51,0.5); overflow: hidden;
}
.modal-header[data-v-bb8b4eb1] { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line);
}
.modal-header h3[data-v-bb8b4eb1] { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0;
}
.btn-close[data-v-bb8b4eb1] { background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer;
}
.btn-close[data-v-bb8b4eb1]:hover { color: var(--ink);
}
.modal-body[data-v-bb8b4eb1] { padding: 24px 26px;
}
.form-group[data-v-bb8b4eb1] { display: flex; flex-direction: column; gap: 8px;
}
.form-group label[data-v-bb8b4eb1] { font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.form-input[data-v-bb8b4eb1] { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--ink); background: #fbfbfd; transition: all 0.2s ease;
}
.form-input[data-v-bb8b4eb1]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,130,240,0.12); background: #fff;
}
.key-created-alert[data-v-bb8b4eb1] { margin-top: 18px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 16px;
}
.alert-title[data-v-bb8b4eb1] { font-size: 14px; font-weight: 700; color: #b45309; margin: 0 0 4px;
}
.alert-text[data-v-bb8b4eb1] { font-size: 13px; color: #92700e; margin: 0 0 12px;
}
.key-display[data-v-bb8b4eb1] { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.key-display code[data-v-bb8b4eb1] { flex: 1; font-family: 'Fira Code', monospace; font-size: 12.5px; color: var(--ink); word-break: break-all;
}
.btn-copy[data-v-bb8b4eb1] { padding: 7px 14px; border-radius: var(--pill); border: none; background: var(--violet); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-copy[data-v-bb8b4eb1]:hover { background: var(--violet-hover);
}
.modal-footer[data-v-bb8b4eb1] { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 18px 26px; border-top: 1px solid var(--line);
}

/* Theme picker */
.theme-hint[data-v-bb8b4eb1] { margin: 0 0 16px; font-size: 14px; color: var(--muted);
}
.theme-options[data-v-bb8b4eb1] { display: flex; flex-wrap: wrap; gap: 12px;
}
.theme-option[data-v-bb8b4eb1] {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: all 0.2s ease; font-family: inherit;
}
.theme-option[data-v-bb8b4eb1]:hover:not(:disabled) {
  border-color: #cbd5e1; transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(31,41,51,0.35);
}
/* The chosen one is ringed rather than filled: a fill would compete with the
   swatches, which are the thing being compared. */
.theme-option.selected[data-v-bb8b4eb1] {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(43,130,240,0.12);
}
.theme-option[data-v-bb8b4eb1]:disabled { opacity: 0.6; cursor: default;
}

/* Three bars at the spacing the setting gives. It shows what is actually
   being chosen, which a colour swatch could not: all three share one palette. */
.theme-preview[data-v-bb8b4eb1] {
  display: flex; flex-direction: column; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
}
.theme-preview span[data-v-bb8b4eb1] { display: block; height: 3px; border-radius: 2px; background: var(--violet); opacity: 0.75;
}
.theme-preview--spacious span + span[data-v-bb8b4eb1] { margin-top: 7px;
}
.theme-preview--compact span + span[data-v-bb8b4eb1] { margin-top: 4px;
}
.theme-preview--tabular span + span[data-v-bb8b4eb1] { margin-top: 2px;
}
.theme-name[data-v-bb8b4eb1] { font-size: 14px; font-weight: 600; color: var(--ink);
}
.theme-tag[data-v-bb8b4eb1] {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); background: rgba(31,41,51,0.05);
  padding: 3px 8px; border-radius: 999px;
}
@media (max-width: 600px) {
.info-grid[data-v-bb8b4eb1] { grid-template-columns: 1fr;
}
.card-header[data-v-bb8b4eb1] { flex-direction: column; align-items: flex-start;
}
.api-key-item[data-v-bb8b4eb1] { flex-direction: column; align-items: flex-start;
}
.theme-options[data-v-bb8b4eb1] { flex-direction: column;
}
.theme-option[data-v-bb8b4eb1] { width: 100%;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-bb8b4eb1],
.modal-container[data-v-bb8b4eb1],
.modal-content-large[data-v-bb8b4eb1] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-bb8b4eb1] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-bb8b4eb1],
.modal-header h3[data-v-bb8b4eb1],
.modal-header h4[data-v-bb8b4eb1],
.modal-title[data-v-bb8b4eb1] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-bb8b4eb1] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-bb8b4eb1] {
    padding: 12px 14px;
}
.modal-footer[data-v-bb8b4eb1] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-bb8b4eb1],
.btn-close[data-v-bb8b4eb1],
.modal-close[data-v-bb8b4eb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-bb8b4eb1]:hover,
.btn-close[data-v-bb8b4eb1]:hover,
.modal-close[data-v-bb8b4eb1]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-bb8b4eb1],
.btn-secondary[data-v-bb8b4eb1],
.btn-cancel[data-v-bb8b4eb1],
.btn-cancel-edit[data-v-bb8b4eb1],
.btn-save[data-v-bb8b4eb1],
.btn-save-edit[data-v-bb8b4eb1],
.btn-confirm[data-v-bb8b4eb1],
.btn-danger[data-v-bb8b4eb1],
.btn-success[data-v-bb8b4eb1],
.btn-add[data-v-bb8b4eb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-bb8b4eb1],
.btn-cancel[data-v-bb8b4eb1],
.btn-cancel-edit[data-v-bb8b4eb1] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-bb8b4eb1]:hover:not(:disabled),
.btn-cancel[data-v-bb8b4eb1]:hover:not(:disabled),
.btn-cancel-edit[data-v-bb8b4eb1]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-bb8b4eb1],
.btn-confirm[data-v-bb8b4eb1],
.btn-save[data-v-bb8b4eb1],
.btn-save-edit[data-v-bb8b4eb1],
.btn-add[data-v-bb8b4eb1] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-bb8b4eb1]:hover:not(:disabled),
.btn-confirm[data-v-bb8b4eb1]:hover:not(:disabled),
.btn-save[data-v-bb8b4eb1]:hover:not(:disabled),
.btn-save-edit[data-v-bb8b4eb1]:hover:not(:disabled),
.btn-add[data-v-bb8b4eb1]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-bb8b4eb1] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-bb8b4eb1]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-bb8b4eb1] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-bb8b4eb1]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The row of answers under a question — "delete these seven?" — is a footer
   like any other: a hairline above it and the two buttons at its end. */
.modal-actions[data-v-bb8b4eb1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #dde3ea;
    background: #fff;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-bb8b4eb1] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-bb8b4eb1],
.modal-actions[data-v-bb8b4eb1] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-copy[data-v-bb8b4eb1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-copy[data-v-bb8b4eb1] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-copy[data-v-bb8b4eb1]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-bb8b4eb1]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-bb8b4eb1]:hover,
.btn-icon.btn-icon-danger[data-v-bb8b4eb1]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-bb8b4eb1] {
  transition: transform 0.15s ease;
}

/* ── The profile, at the product's scale ───────────────────────────────
 *
 * Another page built like a public one: a 42px heading over a column 852px
 * wide, cards with 24px padding and soft shadows, 14px body text. Inside the
 * application it is a settings page, and settings are read in rows. */
/* The same measure as the dashboard — 1400px with a 16px gutter — so a card
   here starts on the same line as a card there. */
.page-container[data-v-bb8b4eb1] {
  max-width: 1400px;
  padding: 0 16px;
}
.page-header[data-v-bb8b4eb1] {
  margin-bottom: 16px;
  text-align: left;
}
.page-title[data-v-bb8b4eb1] {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 2px;
}
.page-subtitle[data-v-bb8b4eb1] {
  font-size: 12px;
}
.section-card[data-v-bb8b4eb1] {
  max-width: none;
  margin: 0 0 12px;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: none;
}
.card-header[data-v-bb8b4eb1] {
  padding: 9px 14px;
  border-bottom: 1px solid #dde3ea;
}
.card-title[data-v-bb8b4eb1] {
  font-size: 13px;
  font-weight: 700;
}
.card-content[data-v-bb8b4eb1] {
  padding: 12px 14px;
}

/* Who is signed in: label over value, four to a row. */
.info-grid[data-v-bb8b4eb1] {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
}
.info-label[data-v-bb8b4eb1] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #94a3b8;
  margin-bottom: 1px;
}
.info-value[data-v-bb8b4eb1] {
  font-size: 13px;
  font-weight: 600;
}

/* How tight the interface is set. */
.theme-hint[data-v-bb8b4eb1] {
  font-size: 11px;
  margin-bottom: 8px;
}
.theme-options[data-v-bb8b4eb1] {
  gap: 8px;
}
.theme-option[data-v-bb8b4eb1] {
  padding: 7px 12px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}
.theme-option[data-v-bb8b4eb1]:hover {
  border-color: var(--primary, #0697e4);
  transform: none;
  box-shadow: none;
}
.theme-option.selected[data-v-bb8b4eb1] {
  border-color: var(--primary, #0697e4);
  background: #f4f9fd;
  box-shadow: none;
}
.theme-name[data-v-bb8b4eb1] {
  font-size: 12px;
  font-weight: 600;
}
.theme-tag[data-v-bb8b4eb1] {
  padding: 1px 5px;
  font-size: 9px;
  border-radius: 4px;
}

/* The subscription summary. */
.sub-label[data-v-bb8b4eb1] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #94a3b8;
}
.sub-value[data-v-bb8b4eb1] {
  font-size: 13px;
  font-weight: 700;
}
.sub-item[data-v-bb8b4eb1] {
  margin-bottom: 10px;
}
.progress-bar[data-v-bb8b4eb1] {
  height: 4px;
  background: #f1f5f9;
  border-radius: 2px;
}

/* The API section: a quiet note, a plain list, one example. */
.api-note[data-v-bb8b4eb1] {
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: #f4f9fd;
  border: 1px solid #dde3ea;
  border-left: 2px solid var(--primary, #0697e4);
  border-radius: 8px;
}
.note-title[data-v-bb8b4eb1] {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 1px;
}
.note-text[data-v-bb8b4eb1] {
  font-size: 11px;
  line-height: 1.45;
}
.note-text code[data-v-bb8b4eb1] {
  padding: 0 4px;
  font-size: 10px;
  border-radius: 4px;
}
.api-keys-list[data-v-bb8b4eb1] {
  display: flex;
  flex-direction: column;
}
.api-key-item[data-v-bb8b4eb1] {
  padding: 7px 0;
  border: none;
  border-top: 1px solid #f1f5f9;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.key-name[data-v-bb8b4eb1] {
  font-size: 12px;
  font-weight: 700;
}
.key-value[data-v-bb8b4eb1] {
  font-size: 11px;
}
.key-meta[data-v-bb8b4eb1] {
  font-size: 10px;
  color: #94a3b8;
}
.btn-delete[data-v-bb8b4eb1] {
  height: 26px;
  padding: 0 10px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #e04545;
  box-shadow: none;
}
.btn-delete[data-v-bb8b4eb1]:hover {
  border-color: #e04545;
  background: #fff;
  transform: none;
}
.no-keys[data-v-bb8b4eb1] {
  font-size: 12px;
  padding: 4px 0 12px;
}
.api-example[data-v-bb8b4eb1] {
  padding: 10px 12px;
  border-radius: 8px;
}
.example-title[data-v-bb8b4eb1] {
  font-size: 10px;
  margin: 0 0 6px;
}
.example-code[data-v-bb8b4eb1] {
  font-size: 11px;
  line-height: 1.5;
}

/* The mark in the density picker: the app's blue, and it grows a little
   under the pointer like the others. */
.theme-preview[data-v-bb8b4eb1] {
  color: var(--primary, #0697e4);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.theme-option:hover:not(:disabled) .theme-preview[data-v-bb8b4eb1] {
  transform: scale(1.12);
}

/* The greys, one step darker.
 *
 * Small text in #94a3b8 on white sits around 2.9:1 — fine for a hint that is
 * glanced at, thin for a label someone is reading. The labels move to the
 * slate the rest of the app uses for secondary text, and the running text to
 * a darker grey still. */
.page-subtitle[data-v-bb8b4eb1],
.theme-hint[data-v-bb8b4eb1],
.note-text[data-v-bb8b4eb1],
.no-keys[data-v-bb8b4eb1],
.key-value[data-v-bb8b4eb1] {
  color: #5b6472;
}
.info-label[data-v-bb8b4eb1],
.sub-label[data-v-bb8b4eb1],
.key-meta[data-v-bb8b4eb1],
.example-title[data-v-bb8b4eb1] {
  color: #64748b;
}

/* Darker again, to the same values the plans page uses. */
.page-subtitle[data-v-bb8b4eb1],
.theme-hint[data-v-bb8b4eb1],
.note-text[data-v-bb8b4eb1],
.no-keys[data-v-bb8b4eb1],
.key-value[data-v-bb8b4eb1] {
  color: #4b5563;
}
.info-label[data-v-bb8b4eb1],
.sub-label[data-v-bb8b4eb1],
.key-meta[data-v-bb8b4eb1],
.example-title[data-v-bb8b4eb1] {
  color: #5b6472;
}

/* Matches .current-plan-card on the page so the two sit in the same column
   rather than this one running the full width of the container. */
.invoice-request-card[data-v-afd24c5c] {
  width: 100%;
  max-width: 1004px;
  margin: 0 auto 40px;
  background: #fff;
  border: 1px solid rgba(31, 41, 51, 0.08);
  border-radius: 24px;
  padding: 28px 34px;
  box-shadow: 0 26px 60px -40px rgba(31, 41, 51, 0.3);
}
.irc-head[data-v-afd24c5c] { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
}
.irc-icon[data-v-afd24c5c] {
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; color: #fff; font-size: 17px;
  background: linear-gradient(150deg, #5aa2ff, #2b82f0);
}
.irc-head-text h3[data-v-afd24c5c] { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #111827;
}
.irc-head-text p[data-v-afd24c5c] { margin: 0; font-size: 13.5px; color: #6b7280; line-height: 1.5;
}
.irc-primary[data-v-afd24c5c],
.irc-secondary[data-v-afd24c5c] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.irc-primary[data-v-afd24c5c] { background: #2b82f0; color: #fff;
}
.irc-primary[data-v-afd24c5c]:hover:not(:disabled) { background: #1a6fdc;
}
.irc-secondary[data-v-afd24c5c] { background: #fff; color: #374151; border-color: #e5e7eb;
}
.irc-secondary[data-v-afd24c5c]:hover:not(:disabled) { border-color: #9ca3af;
}
.irc-primary[data-v-afd24c5c]:disabled, .irc-secondary[data-v-afd24c5c]:disabled { opacity: 0.6; cursor: default;
}
.irc-form[data-v-afd24c5c] { display: flex; flex-direction: column; gap: 14px;
}
.irc-row[data-v-afd24c5c] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.irc-field[data-v-afd24c5c] { display: flex; flex-direction: column; gap: 6px;
}
.irc-field > span[data-v-afd24c5c] { font-size: 12.5px; font-weight: 600; color: #374151;
}
.irc-field input[data-v-afd24c5c],
.irc-field select[data-v-afd24c5c],
.irc-field textarea[data-v-afd24c5c] {
  width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 9px;
  font-size: 14px; font-family: inherit; color: #111827; background: #fff;
}
.irc-field input[data-v-afd24c5c]:focus,
.irc-field select[data-v-afd24c5c]:focus,
.irc-field textarea[data-v-afd24c5c]:focus {
  outline: none; border-color: #2b82f0; box-shadow: 0 0 0 3px rgba(43, 130, 240, 0.12);
}
.irc-total[data-v-afd24c5c] {
  padding: 12px 16px; border-radius: 10px;
  background: rgba(43, 130, 240, 0.06); border: 1px solid rgba(43, 130, 240, 0.16);
  font-size: 14px; color: #374151;
}
.irc-total-row[data-v-afd24c5c] { display: flex; align-items: center; justify-content: space-between; padding: 2px 0;
}
.irc-total-discount[data-v-afd24c5c] { color: #059669; font-weight: 600;
}
.irc-total-final[data-v-afd24c5c] { padding-top: 8px;
}
.irc-total-row + .irc-total-final[data-v-afd24c5c] {
  margin-top: 6px; border-top: 1px solid rgba(43, 130, 240, 0.18);
}
.irc-total strong[data-v-afd24c5c] { font-size: 18px; color: #1d4ed8;
}
.irc-actions[data-v-afd24c5c] { display: flex; justify-content: flex-end; gap: 10px;
}
.irc-error[data-v-afd24c5c] {
  margin: 0; padding: 10px 14px; border-radius: 9px;
  background: #fef2f2; color: #b91c1c; font-size: 13px;
  border: 1px solid #fecaca;
}
.irc-status[data-v-afd24c5c] { padding: 16px; border-radius: 12px; border: 1px solid #e5e7eb; background: #f9fafb;
}
.irc-status-pending[data-v-afd24c5c] { background: #fffbeb; border-color: #fde68a;
}
.irc-status-invoiced[data-v-afd24c5c] { background: #eff6ff; border-color: #bfdbfe;
}
.irc-status-row[data-v-afd24c5c] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.irc-status-badge[data-v-afd24c5c] {
  padding: 3px 10px; border-radius: 999px; background: #fff;
  border: 1px solid #e5e7eb; font-size: 12px; font-weight: 700; color: #374151;
}
.irc-status-plan[data-v-afd24c5c] { font-size: 14px; font-weight: 600; color: #111827;
}
.irc-status-hint[data-v-afd24c5c] { margin: 8px 0 0; font-size: 13px; color: #6b7280; line-height: 1.5;
}
.irc-status-actions[data-v-afd24c5c] { display: flex; align-items: center; gap: 16px; margin-top: 10px;
}
.irc-link-btn[data-v-afd24c5c] {
  padding: 0; border: 0; background: none;
  color: #2b82f0; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.irc-link-btn[data-v-afd24c5c]:hover:not(:disabled) { color: #1a6fdc;
}
.irc-link-btn[data-v-afd24c5c]:disabled { opacity: 0.5; cursor: default;
}
.irc-link-danger[data-v-afd24c5c] { color: #6b7280;
}
.irc-link-danger[data-v-afd24c5c]:hover:not(:disabled) { color: #b91c1c;
}
.irc-editing-hint[data-v-afd24c5c] {
  margin: 0 0 4px; padding: 9px 13px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e; font-size: 13px;
}

/* Set on its own tinted panel: sitting flush under the form, these settled
   requests read as part of it, and their amounts get mistaken for the total. */
.irc-history[data-v-afd24c5c] {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
}
.irc-history-head[data-v-afd24c5c] {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9ca3af; margin-bottom: 8px;
}
.irc-history-row[data-v-afd24c5c] {
  display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px;
  align-items: center; padding: 7px 0; font-size: 13px; color: #6b7280;
}
.irc-history-row + .irc-history-row[data-v-afd24c5c] { border-top: 1px solid #f3f4f6;
}
.irc-history-date[data-v-afd24c5c] { color: #9ca3af;
}
.irc-history-plan[data-v-afd24c5c] { color: #374151;
}
.irc-history-amount[data-v-afd24c5c] { font-weight: 600; color: #111827;
}
.irc-history-status[data-v-afd24c5c] { font-size: 12px; font-weight: 600;
}
.irc-history-status.is-paid[data-v-afd24c5c] { color: #059669;
}
.irc-history-status.is-cancelled[data-v-afd24c5c] { color: #9ca3af;
}
@media (max-width: 640px) {
.irc-row[data-v-afd24c5c] { grid-template-columns: 1fr;
}
.irc-history-row[data-v-afd24c5c] { grid-template-columns: 1fr auto; row-gap: 2px;
}
.irc-history-date[data-v-afd24c5c] { grid-column: 1 / -1;
}
}

/* ── At the product's scale ────────────────────────────────────────────
 *
 * The card was built for the public pricing page: 1004px wide and centred
 * while everything around it is full width, a 24px corner, a long shadow,
 * and a 42px blue tile for a mark that the rest of the app draws as a line.
 */
.invoice-request-card[data-v-afd24c5c] {
  max-width: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: none;
}
.irc-head[data-v-afd24c5c] {
  gap: 9px;
  margin-bottom: 10px;
}
.irc-icon[data-v-afd24c5c] {
  width: auto;
  height: auto;
  margin-top: 1px;
  background: transparent;
  border-radius: 0;
  color: var(--primary, #0697e4);
}
.irc-icon svg[data-v-afd24c5c] {
  width: 16px;
  height: 16px;
}
.irc-head-text h3[data-v-afd24c5c] {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 1px;
}
.irc-head-text p[data-v-afd24c5c] {
  font-size: 11px;
  line-height: 1.45;
}
.irc-primary[data-v-afd24c5c],
.irc-secondary[data-v-afd24c5c] {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}
.irc-primary[data-v-afd24c5c] {
  background: var(--primary, #0697e4);
  border: 1px solid var(--primary, #0697e4);
}
.irc-primary[data-v-afd24c5c]:hover:not(:disabled) {
  background: #0b84c7;
  border-color: #0b84c7;
}
.irc-secondary[data-v-afd24c5c] {
  border: 1px solid #dde3ea;
}
.irc-secondary[data-v-afd24c5c]:hover:not(:disabled) {
  border-color: var(--primary, #0697e4);
  color: var(--primary, #0697e4);
}
.irc-form[data-v-afd24c5c] {
  gap: 8px;
}
.irc-row[data-v-afd24c5c] {
  gap: 8px;
}
.irc-field[data-v-afd24c5c] {
  gap: 3px;
}
.irc-field > span[data-v-afd24c5c] {
  font-size: 11px;
}
.irc-field input[data-v-afd24c5c],
.irc-field select[data-v-afd24c5c],
.irc-field textarea[data-v-afd24c5c] {
  padding: 7px 10px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  font-size: 13px;
}
.irc-total[data-v-afd24c5c] {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
}
.irc-total strong[data-v-afd24c5c] {
  font-size: 14px;
  color: var(--primary, #0697e4);
}
.irc-status[data-v-afd24c5c],
.irc-history[data-v-afd24c5c] {
  padding: 10px 12px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
}
.irc-history-head[data-v-afd24c5c] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #94a3b8;
}
.irc-history-row[data-v-afd24c5c] {
  padding: 5px 0;
  font-size: 11px;
  border-top: 1px solid #f1f5f9;
}
.irc-error[data-v-afd24c5c] {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
}

/* The greys, at the same value as the page around it. A rule on the page
   cannot reach in here — these styles are scoped to the component. */
.irc-head-text p[data-v-afd24c5c],
.irc-total[data-v-afd24c5c],
.irc-status[data-v-afd24c5c],
.irc-history-row[data-v-afd24c5c],
.irc-field > span[data-v-afd24c5c] {
  color: #4b5563;
}
.irc-history-head[data-v-afd24c5c] {
  color: #64748b;
}

/* Same shell as .invoice-request-card and .current-plan-card so the three
   stack as one column. */
.billing-invoices-card[data-v-6954e050] {
  width: 100%;
  max-width: 1004px;
  margin: 0 auto 40px;
  background: #fff;
  border: 1px solid rgba(31, 41, 51, 0.08);
  border-radius: 24px;
  padding: 28px 34px;
  box-shadow: 0 26px 60px -40px rgba(31, 41, 51, 0.3);
}
.bic-head[data-v-6954e050] { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
}
.bic-icon[data-v-6954e050] {
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; color: #fff; font-size: 17px;
  background: linear-gradient(150deg, #5aa2ff, #2b82f0);
}
.bic-head-text h3[data-v-6954e050] { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #111827;
}
.bic-head-text p[data-v-6954e050] { margin: 0; font-size: 13.5px; color: #6b7280; line-height: 1.5;
}
.bic-primary[data-v-6954e050] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: #2b82f0; color: #fff;
}
.bic-primary[data-v-6954e050]:hover { background: #1a6fdc;
}
.bic-loading[data-v-6954e050] { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #6b7280;
}
.bic-spinner[data-v-6954e050] {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #d1d5db; border-top-color: #2b82f0;
  animation: bic-spin-6954e050 0.7s linear infinite;
}
@keyframes bic-spin-6954e050 {
to { transform: rotate(360deg);
}
}
.bic-error[data-v-6954e050] { margin: 10px 0 0; font-size: 13px; color: #b91c1c;
}
.bic-empty[data-v-6954e050] { margin: 0; font-size: 13.5px; color: #6b7280;
}
.bic-list[data-v-6954e050] { display: flex; flex-direction: column;
}
.bic-row[data-v-6954e050] {
  display: grid;
  grid-template-columns: 120px 1fr auto 96px auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid #f1f3f5;
  font-size: 13.5px;
}
.bic-row[data-v-6954e050]:first-child { border-top: none;
}
.bic-date[data-v-6954e050] { color: #6b7280;
}
.bic-number[data-v-6954e050] { color: #111827; font-weight: 600;
}
.bic-amount[data-v-6954e050] { color: #111827; font-weight: 600; white-space: nowrap;
}
.bic-status[data-v-6954e050] {
  justify-self: start;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  background: #f3f4f6; color: #4b5563;
}
.bic-status.is-paid[data-v-6954e050] { background: #dcfce7; color: #166534;
}
.bic-status.is-open[data-v-6954e050] { background: #fef3c7; color: #92400e;
}
.bic-status.is-uncollectible[data-v-6954e050],
.bic-status.is-void[data-v-6954e050] { background: #fee2e2; color: #991b1b;
}
.bic-links[data-v-6954e050] { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
}
.bic-link[data-v-6954e050] {
  display: inline-flex; align-items: center; gap: 6px;
  color: #2b82f0; font-weight: 600; text-decoration: none;
}
.bic-link[data-v-6954e050]:hover { text-decoration: underline;
}
.bic-link-quiet[data-v-6954e050] { color: #6b7280; font-weight: 500;
}
.bic-more[data-v-6954e050] { margin: 14px 0 0; font-size: 12.5px; color: #6b7280;
}
@media (max-width: 768px) {
.billing-invoices-card[data-v-6954e050] { padding: 22px 20px;
}
.bic-row[data-v-6954e050] { grid-template-columns: 1fr auto; row-gap: 6px;
}
.bic-links[data-v-6954e050] { grid-column: 1 / -1;
}
}

/* matches the public Pricing page design */
.subscription-page[data-v-468b4f40] {
  --violet: #2b82f0; --violet-hover: #1a6fdc; --ink: #1f2933; --muted: #6b7280;
  --line: rgba(31,41,51,0.08); --card: #ffffff; --pill: 999px;
  background: #f4f3f8; min-height: 100vh; padding: 44px 0 80px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em; color: var(--ink);
}
.subscription-page button[data-v-468b4f40], .subscription-page select[data-v-468b4f40] { font-family: inherit;
}
.page-container[data-v-468b4f40] { max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.page-header[data-v-468b4f40] { text-align: center; margin-bottom: 40px;
}
.page-title[data-v-468b4f40] { font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 10px;
}
.page-subtitle[data-v-468b4f40] { font-size: clamp(16px, 2vw, 19px); color: var(--muted); margin: 0;
}

/* current plan card */
.current-plan-card[data-v-468b4f40] { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px 34px; box-shadow: 0 26px 60px -40px rgba(31,41,51,0.3); margin: 0 auto 40px; width: 100%; max-width: 1004px;
}
.plan-badge[data-v-468b4f40] { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); background: rgba(43,130,240,0.1); padding: 5px 12px; border-radius: var(--pill); margin-bottom: 14px;
}
.current-plan-title[data-v-468b4f40] { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px;
}
.current-plan-subtitle[data-v-468b4f40] { color: var(--muted); font-size: 15px; margin: 0 0 24px;
}
.usage-header[data-v-468b4f40] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.usage-label[data-v-468b4f40] { font-size: 14px; font-weight: 600; color: var(--ink);
}
.usage-count[data-v-468b4f40] { font-size: 13px; color: var(--muted); font-weight: 600;
}
.progress-bar[data-v-468b4f40] { height: 10px; background: #eef1f6; border-radius: var(--pill); overflow: hidden;
}
.progress-fill[data-v-468b4f40] { height: 100%; background: linear-gradient(90deg, #5aa2ff, #2b82f0); border-radius: var(--pill); transition: width 0.5s ease;
}
.progress-fill-premium[data-v-468b4f40] { background: linear-gradient(90deg, #a78bfa, #7c5cff);
}
.usage-note[data-v-468b4f40] { font-size: 12.5px; color: var(--muted); margin: 14px 0 0;
}
.btn-manage-subscription[data-v-468b4f40] { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 11px 22px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.btn-manage-subscription[data-v-468b4f40]:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px);
}

/* loading */
.loading-plans[data-v-468b4f40] { text-align: center; padding: 60px 0; color: var(--muted);
}
.spinner[data-v-468b4f40] { width: 36px; height: 36px; border: 3px solid #e5e9f0; border-top-color: var(--violet); border-radius: 50%; margin: 0 auto 16px; animation: spin-468b4f40 0.8s linear infinite;
}
@keyframes spin-468b4f40 {
to { transform: rotate(360deg);
}
}

/* plans grid (equal-height, centered like Pricing) */
.plans-grid[data-v-468b4f40] { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 22px; margin-bottom: 64px;
}
.plan-card[data-v-468b4f40] { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px 28px; box-shadow: 0 26px 60px -40px rgba(31,41,51,0.3); flex: 1 1 280px; max-width: 320px; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.plan-card[data-v-468b4f40]:hover { transform: translateY(-6px); box-shadow: 0 36px 80px -36px rgba(31,41,51,0.4);
}
.plan-card.featured[data-v-468b4f40] { border-color: var(--violet); box-shadow: 0 36px 80px -34px rgba(43,130,240,0.45);
}
.plan-card.current[data-v-468b4f40] { border-color: #10b981;
}
.featured-badge[data-v-468b4f40], .current-plan-badge[data-v-468b4f40] { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: var(--pill); white-space: nowrap;
}
.featured-badge[data-v-468b4f40] { background: var(--violet);
}
.current-plan-badge[data-v-468b4f40] { background: #10b981;
}
.plan-header[data-v-468b4f40] { margin-bottom: 20px;
}
.plan-name[data-v-468b4f40] { font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 0 12px;
}
.plan-price[data-v-468b4f40] { display: flex; align-items: baseline; gap: 6px;
}
.price-amount[data-v-468b4f40] { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.price-period[data-v-468b4f40] { font-size: 14px; color: var(--muted); font-weight: 500;
}
.plan-features[data-v-468b4f40] { list-style: none; margin: 0 0 22px; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.feature-item[data-v-468b4f40] { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); line-height: 1.45;
}
.feature-icon[data-v-468b4f40] { color: var(--violet); margin-top: 2px; flex-shrink: 0;
}
.plan-btn[data-v-468b4f40] { width: 100%; padding: 13px 22px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin-top: auto;
}
.plan-btn[data-v-468b4f40]:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px);
}
.plan-btn.featured[data-v-468b4f40] { background: var(--violet); color: #fff; border-color: var(--violet); box-shadow: 0 16px 30px -16px rgba(43,130,240,0.6);
}
.plan-btn.featured[data-v-468b4f40]:hover { background: var(--violet-hover); color: #fff; transform: translateY(-2px);
}
.plan-btn.current[data-v-468b4f40] { background: #f1f3f6; color: var(--muted); cursor: default; border-color: transparent;
}
.plan-btn.current[data-v-468b4f40]:hover { transform: none; color: var(--muted); border-color: transparent;
}

/* faq (like Pricing) */
.faq-section[data-v-468b4f40] { max-width: 880px; margin: 0 auto;
}
.faq-title[data-v-468b4f40] { text-align: center; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 36px;
}
.faq-grid[data-v-468b4f40] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.faq-item[data-v-468b4f40] { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: 0 18px 44px -34px rgba(31,41,51,0.3);
}
.faq-question[data-v-468b4f40] { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.faq-answer[data-v-468b4f40] { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0;
}
@media (max-width: 768px) {
.faq-grid[data-v-468b4f40] { grid-template-columns: 1fr;
}
.plan-card[data-v-468b4f40] { max-width: 100%;
}
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-manage-subscription[data-v-468b4f40] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-manage-subscription[data-v-468b4f40] {
  background: #0697e4;
  border: 1px solid #0697e4;
  color: #fff;
}
.btn-manage-subscription[data-v-468b4f40]:hover:not(:disabled) {
  background: #0b84c7;
  border-color: #0b84c7;
  box-shadow: none;
  transform: none;
}


/* ── The plans page, at the product's scale ────────────────────────────
 *
 * It was built like a public pricing page: a 48px heading, 24px corners,
 * 38px prices and long shadows under every card — nearly three thousand
 * pixels for five plans. Inside the application it sits next to a table of
 * 13px rows, so it reads as a different site.
 *
 * Same card as everywhere else now: hairline edge, one 12px corner, no
 * shadow, 13px type; the five plans fit one row and the page fits a screen
 * and a half instead of three. */
/* The same measure as the dashboard — 1400px with a 16px gutter — so a card
   here starts on the same line as a card there. */
.page-container[data-v-468b4f40] {
  max-width: 1400px;
  padding: 0 16px;
}
.page-header[data-v-468b4f40] {
  margin-bottom: 16px;
  text-align: left;
}
.page-title[data-v-468b4f40] {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.page-subtitle[data-v-468b4f40] {
  font-size: 12px;
}

/* What is being paid for now. */
.current-plan-card[data-v-468b4f40] {
  max-width: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: none;
}
.plan-badge[data-v-468b4f40] {
  margin-bottom: 8px;
  padding: 2px 7px;
  font-size: 9px;
  border-radius: 4px;
}
.current-plan-title[data-v-468b4f40] {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 1px;
}
.current-plan-subtitle[data-v-468b4f40] {
  font-size: 11px;
  margin: 0 0 12px;
}
.usage-header[data-v-468b4f40] {
  margin-bottom: 4px;
}
.usage-label[data-v-468b4f40] {
  font-size: 12px;
}
.usage-count[data-v-468b4f40] {
  font-size: 11px;
}
.progress-bar[data-v-468b4f40] {
  height: 4px;
  background: #f1f5f9;
}
.usage-note[data-v-468b4f40] {
  font-size: 11px;
  margin: 10px 0 0;
}

/* The five plans, in one row. */
.plans-grid[data-v-468b4f40] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  align-items: stretch;
}
.plan-card[data-v-468b4f40] {
  max-width: none;
  padding: 12px;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.plan-card[data-v-468b4f40]:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary, #0697e4);
}
.plan-card.featured[data-v-468b4f40] {
  border-color: var(--primary, #0697e4);
  box-shadow: none;
}
.plan-card.current[data-v-468b4f40] {
  border-color: #10b981;
  box-shadow: none;
}
.featured-badge[data-v-468b4f40],
.current-plan-badge[data-v-468b4f40] {
  top: -9px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
}
.plan-header[data-v-468b4f40] {
  margin-bottom: 10px;
}
.plan-name[data-v-468b4f40] {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
}
.price-amount[data-v-468b4f40] {
  font-size: 22px;
  font-weight: 800;
}
.price-period[data-v-468b4f40] {
  font-size: 11px;
}
.plan-features[data-v-468b4f40] {
  margin: 0 0 12px;
  padding: 10px 0 0;
  gap: 5px;
  border-top: 1px solid #f1f5f9;
}
.feature-item[data-v-468b4f40] {
  gap: 6px;
  font-size: 11px;
  line-height: 1.35;
}
.feature-icon[data-v-468b4f40] {
  margin-top: 1px;
}
.feature-icon svg[data-v-468b4f40] {
  width: 12px;
  height: 12px;
}
.plan-btn[data-v-468b4f40] {
  padding: 0 12px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #dde3ea;
  font-size: 12px;
  font-weight: 600;
}
.plan-btn[data-v-468b4f40]:hover {
  border-color: var(--primary, #0697e4);
  color: var(--primary, #0697e4);
  transform: none;
}
.plan-btn.featured[data-v-468b4f40] {
  background: var(--primary, #0697e4);
  border-color: var(--primary, #0697e4);
  box-shadow: none;
}
.plan-btn.featured[data-v-468b4f40]:hover {
  background: #0b84c7;
  border-color: #0b84c7;
  transform: none;
}
.plan-btn.current[data-v-468b4f40] {
  background: #f8fafc;
  border-color: #dde3ea;
  color: #94a3b8;
}

/* The questions, as a quiet two-column list. */
.faq-section[data-v-468b4f40] {
  max-width: none;
}
.faq-title[data-v-468b4f40] {
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  margin: 0 0 10px;
}

/* A line of text should not run the full 1368px: past about ninety
   characters the eye loses the start of the next line. */
.faq-grid[data-v-468b4f40] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faq-answer[data-v-468b4f40],
.faq-question[data-v-468b4f40] {
  max-width: 68ch;
}
.faq-grid[data-v-468b4f40] {
  gap: 10px;
}
.faq-item[data-v-468b4f40] {
  padding: 12px 14px;
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: none;
}

/* Read, not scanned.
 *
 * The rest of this page is glanced at — a price, a limit, a button — and
 * 11px suits that. These are sentences, and three lines of 11px grey at 1.5
 * is where it stops being comfortable: the question gets the size of a row's
 * heading and the answer the size of its text, with the line spacing opened
 * up and the grey darkened a step. */
.faq-question[data-v-468b4f40] {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink, #1e293b);
}
.faq-answer[data-v-468b4f40] {
  font-size: 12.5px;
  line-height: 1.6;
  color: #5b6472;
}
.btn-manage-subscription[data-v-468b4f40] {
  margin-top: 12px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}
.btn-manage-subscription[data-v-468b4f40]:hover {
  transform: translateY(-2px);
}

/* Narrow screens: the row of five becomes two, then one. */
@media (max-width: 1200px) {
.plans-grid[data-v-468b4f40] { grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 860px) {
.plans-grid[data-v-468b4f40] { grid-template-columns: repeat(2, 1fr);
}
.faq-grid[data-v-468b4f40] { grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.plans-grid[data-v-468b4f40] { grid-template-columns: 1fr;
}
}

/* The greys, darker again.
 *
 * Secondary text here is read, not glanced at — a usage count, a note about
 * the period, an answer three lines long. #4b5563 on white is about 8:1, and
 * still clearly a step below the headings it sits under. */
.page-subtitle[data-v-468b4f40],
.current-plan-subtitle[data-v-468b4f40],
.usage-note[data-v-468b4f40],
.usage-count[data-v-468b4f40],
.price-period[data-v-468b4f40],
.faq-answer[data-v-468b4f40],
.irc-head-text p[data-v-468b4f40],
.irc-total[data-v-468b4f40],
.irc-status[data-v-468b4f40],
.irc-history-row[data-v-468b4f40] {
  color: #4b5563;
}
.plan-badge[data-v-468b4f40],
.irc-history-head[data-v-468b4f40],
.usage-label[data-v-468b4f40] {
  color: #5b6472;
}
.irc-history-head[data-v-468b4f40] {
  color: #64748b;
}
.vue-magnifier__magnifier{position:relative;display:inline-block;line-height:0}.vue-magnifier__magnifying-glass{position:absolute;z-index:1;background:#fff no-repeat;border:solid #ebebeb;box-shadow:2px 2px 3px #0000004d;opacity:0;transition:opacity .3s;pointer-events:none}.vue-magnifier__magnifying-glass.vue-magnifier__circle{border-radius:50%}.vue-magnifier__magnifying-glass.vue-magnifier__visible{opacity:1}

.modal-enter-active[data-v-f52408ef],
.modal-leave-active[data-v-f52408ef] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-f52408ef],
.modal-leave-to[data-v-f52408ef] {
  opacity: 0;
}
.modal-enter-active .relative[data-v-f52408ef],
.modal-leave-active .relative[data-v-f52408ef] {
  transition: transform 0.3s ease;
}
.modal-enter-from .relative[data-v-f52408ef],
.modal-leave-to .relative[data-v-f52408ef] {
  transform: scale(0.9);
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-f52408ef],
.modal-container[data-v-f52408ef],
.modal-content-large[data-v-f52408ef] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-f52408ef] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-f52408ef],
.modal-header h3[data-v-f52408ef],
.modal-header h4[data-v-f52408ef],
.modal-title[data-v-f52408ef] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-f52408ef] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-f52408ef] {
    padding: 12px 14px;
}
.modal-footer[data-v-f52408ef] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-f52408ef],
.btn-close[data-v-f52408ef],
.modal-close[data-v-f52408ef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-f52408ef]:hover,
.btn-close[data-v-f52408ef]:hover,
.modal-close[data-v-f52408ef]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-f52408ef],
.btn-secondary[data-v-f52408ef],
.btn-cancel[data-v-f52408ef],
.btn-cancel-edit[data-v-f52408ef],
.btn-save[data-v-f52408ef],
.btn-save-edit[data-v-f52408ef],
.btn-confirm[data-v-f52408ef],
.btn-danger[data-v-f52408ef],
.btn-success[data-v-f52408ef],
.btn-add[data-v-f52408ef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-f52408ef],
.btn-cancel[data-v-f52408ef],
.btn-cancel-edit[data-v-f52408ef] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-f52408ef]:hover:not(:disabled),
.btn-cancel[data-v-f52408ef]:hover:not(:disabled),
.btn-cancel-edit[data-v-f52408ef]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-f52408ef],
.btn-confirm[data-v-f52408ef],
.btn-save[data-v-f52408ef],
.btn-save-edit[data-v-f52408ef],
.btn-add[data-v-f52408ef] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-f52408ef]:hover:not(:disabled),
.btn-confirm[data-v-f52408ef]:hover:not(:disabled),
.btn-save[data-v-f52408ef]:hover:not(:disabled),
.btn-save-edit[data-v-f52408ef]:hover:not(:disabled),
.btn-add[data-v-f52408ef]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-f52408ef] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-f52408ef]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-f52408ef] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-f52408ef]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-f52408ef],
.modal-body input[type="number"][data-v-f52408ef],
.modal-body input[type="email"][data-v-f52408ef],
.modal-body input[type="tel"][data-v-f52408ef],
.modal-body input[type="url"][data-v-f52408ef],
.modal-body input[type="search"][data-v-f52408ef],
.modal-body input[type="date"][data-v-f52408ef],
.modal-body input[type="password"][data-v-f52408ef],
.modal-body select[data-v-f52408ef],
.modal-body textarea[data-v-f52408ef] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-f52408ef]:focus,
.modal-body input[type="number"][data-v-f52408ef]:focus,
.modal-body input[type="email"][data-v-f52408ef]:focus,
.modal-body input[type="tel"][data-v-f52408ef]:focus,
.modal-body input[type="url"][data-v-f52408ef]:focus,
.modal-body input[type="search"][data-v-f52408ef]:focus,
.modal-body input[type="date"][data-v-f52408ef]:focus,
.modal-body input[type="password"][data-v-f52408ef]:focus,
.modal-body select[data-v-f52408ef]:focus,
.modal-body textarea[data-v-f52408ef]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-f52408ef],
.modal-body .form-label[data-v-f52408ef] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* A field with a mark standing in it keeps the room for the mark: the
   tighter padding above would have put the text under the magnifier. */
.search-box input[data-v-f52408ef],
.search-input[data-v-f52408ef],
.modal-search-input-wrapper input[data-v-f52408ef] {
    padding-left: 30px;
}

/* Outweighing the field's own padding, which is written as .search-box
   .search-input and so outranks a plain descendant rule. */
.search-box input.search-input[data-v-f52408ef],
.modal-search-input-wrapper input[data-v-f52408ef] {
    padding-left: 32px;
}

/* The list of counterparties, at the table's scale.
 *
 * Each one was a card 96px tall with a blue tile for a mark; twelve of them
 * made a column of boxes inside a box. They are rows now, parted by a
 * hairline, with the mark drawn in line and the address under the name. */
.modal-header .modal-title[data-v-f52408ef] {
    font-size: 14px;
    font-weight: 700;
}
.modal-tabs[data-v-f52408ef] {
    padding: 0 14px;
    border-bottom: 1px solid #dde3ea;
}
.modal-tab[data-v-f52408ef] {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
}
.modal-search-container[data-v-f52408ef] {
    padding: 10px 14px;
    gap: 8px;
}
.modal-search-container select[data-v-f52408ef],
.modal-search-input-wrapper input[data-v-f52408ef] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}
.modal-search-input-wrapper input[data-v-f52408ef] {
    padding-left: 32px;
}
.modal-search-icon[data-v-f52408ef] {
    color: #94a3b8;
}
.modal-list-item[data-v-f52408ef] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 14px;
    margin: 0;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    box-shadow: none;
}
.modal-list-item[data-v-f52408ef]:hover {
    background: #fbfcfd;
    border-color: #f1f5f9;
    transform: none;
    box-shadow: none;
}
.modal-list-item-icon[data-v-f52408ef] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin-top: 2px;
    background: transparent;
    border-radius: 0;
    color: #0697e4;
    box-shadow: none;
}
.modal-list-item-icon svg[data-v-f52408ef] {
    width: 14px;
    height: 14px;
}
.modal-list-item-title[data-v-f52408ef] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.modal-list-item-badge[data-v-f52408ef] {
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
}
.modal-list-item-address[data-v-f52408ef] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0 0;
    font-size: 11px;
    color: #64748b;
}
.modal-list-item-address svg[data-v-f52408ef] {
    width: 12px;
    height: 12px;
}
.modal-list-item-arrow[data-v-f52408ef] {
    color: #cbd5e1;
}
.modal-list-item-arrow svg[data-v-f52408ef] {
    width: 13px;
    height: 13px;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-f52408ef] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-f52408ef],
.modal-actions[data-v-f52408ef] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-f52408ef]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-f52408ef]:hover,
.btn-icon.btn-icon-danger[data-v-f52408ef]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-f52408ef] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-f52408ef] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* The line-item grid.
 *
 * Each input fills the column it is in rather than carrying a width of its
 * own, so the header widths above are what actually decide the layout. The
 * headers wrap instead of forcing their column wider than its values need —
 * a two-line heading costs nothing, a column sized to its heading costs the
 * description the room it needs. */
.line-items-wrap input[data-v-a710970c],
.line-items-wrap select[data-v-a710970c] {
    width: 100%;
    min-width: 0;
}
.line-items-wrap th[data-v-a710970c] {
    white-space: normal;
    line-height: 1.2;
    vertical-align: bottom;
}
.line-items-wrap td[data-v-a710970c] {
    vertical-align: middle;
}

/* Lifted out of inline style attributes so a theme can reach them — an inline
   !important outranks every stylesheet. The values are unchanged. */
.scan-details-topbar[data-v-a710970c] {
    padding: 10px;
    margin: 5px;
}

/* The top bar's controls, in the dashboard's dress.
 *
 * They were the app's generic buttons: 15px type in a 42px box with a solid
 * glyph beside it, which beside the table this page is opened from read as a
 * different product. Hairline edge, 13px label, a drawn mark, and the hover
 * is the edge and the text turning blue — nothing fills. */
.scan-details-topbar .topbar-btn[data-v-a710970c] {
    height: 32px;
    padding: 0 12px;
    gap: 7px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    transition: all 0.15s ease;
}
.scan-details-topbar .topbar-btn[data-v-a710970c]:hover:not(:disabled) {
    background: #fff;
    border-color: var(--primary, #0697e4);
    color: var(--primary, #0697e4);
}
.scan-details-topbar .topbar-btn[data-v-a710970c]:disabled {
    color: var(--text-light, #94a3b8);
    border-color: #e9edf2;
    cursor: default;
}

/* The menu under the settings button: the app's panel, not a shadowed card. */
.topbar-menu[data-v-a710970c] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 190px;
    padding: 4px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    z-index: 9999;
}
.topbar-menu-item[data-v-a710970c] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.topbar-menu-item svg[data-v-a710970c] {
    color: var(--primary, #0697e4);
    flex-shrink: 0;
}
.topbar-menu-item[data-v-a710970c]:hover {
    background: var(--primary-light, #e0f2fe);
}
.topbar-menu-item--danger[data-v-a710970c],
.topbar-menu-item--danger svg[data-v-a710970c] {
    color: #e04545;
}
.topbar-menu-item--danger[data-v-a710970c]:hover {
    background: #fff1f1;
}

/* The footer's two actions, at the same scale: export quiet, save the one
   filled button on the page. */
.scan-details-btn[data-v-a710970c] {
    height: 32px;
    padding: 0 14px;
    gap: 7px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.scan-details-btn.btn-secondary[data-v-a710970c] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: var(--text-primary, #1e293b);
}
.scan-details-btn.btn-secondary[data-v-a710970c]:hover:not(:disabled) {
    background: #fff;
    border-color: var(--primary, #0697e4);
    color: var(--primary, #0697e4);
}
.scan-details-btn.btn-success[data-v-a710970c] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.scan-details-btn.btn-success[data-v-a710970c]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
}
.scan-details-header[data-v-a710970c],
.line-items-header[data-v-a710970c],
.line-items-wrap[data-v-a710970c] {
    padding: 10px;
}
.scan-details-amount-container[data-v-a710970c] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.scan-details-amount-container > div[data-v-a710970c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.scan-details-amount-input[data-v-a710970c],
.scan-details-total-input[data-v-a710970c] {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    width: 120px;
    background: white;
    transition: all 0.2s ease;
}
@media (max-width: 1023px) {
.scan-details-amount-input[data-v-a710970c],
    .scan-details-total-input[data-v-a710970c] {
        width: 100%;
        font-size: 14px;
        padding: 6px 8px;
        height: 33px;
        box-sizing: border-box;
}
}
@media (min-width: 1024px) and (max-width: 1300px) {
.scan-details-amount-input[data-v-a710970c],
    .scan-details-total-input[data-v-a710970c] {
        width: 90px;
        font-size: 14px;
}
}
@media (min-width: 1301px) {
.scan-details-amount-input[data-v-a710970c],
    .scan-details-total-input[data-v-a710970c] {
        width: 180px;
}
}
.scan-details-amount-input[data-v-a710970c]:focus,
.scan-details-total-input[data-v-a710970c]:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.scan-details-total-input[data-v-a710970c] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.scan-details-total-input[data-v-a710970c]::placeholder {
    background: none;
    -webkit-text-fill-color: #9ca3af;
    color: #9ca3af;
}
.scan-details-currency[data-v-a710970c] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

/* Mobile Top Navigation */
@media (max-width: 768px) {
.flex-shrink-0.h-16[data-v-a710970c] {
        height: auto;
        min-height: 3.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
}
.flex-shrink-0.h-16 > button[data-v-a710970c],
    .flex-shrink-0.h-16 > div[data-v-a710970c] {
        flex-shrink: 0;
}

    /* Back button takes full width on very small screens */
@media (max-width: 380px) {
.flex-shrink-0.h-16[data-v-a710970c] {
            justify-content: center;
}
.flex-shrink-0.h-16 > button[data-v-a710970c]:first-child {
            order: 1;
}
.flex-shrink-0.h-16 > div[data-v-a710970c]:nth-child(2) {
            order: 2;
}
.flex-shrink-0.h-16 > div[data-v-a710970c]:nth-child(3) {
            order: 3;
}
}
.select-seller-btn[data-v-a710970c] {
        padding: 4px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        background-color: #4a90e2 !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        transition: background-color 0.2s !important;
}
.select-seller-btn svg[data-v-a710970c] {
        color: white !important;
}
.select-seller-btn[data-v-a710970c]:hover {
        background-color: #357abd !important;
}
}

.modal-overlay[data-v-13f880fa] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}
.modal-content[data-v-13f880fa] {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.modal-header[data-v-13f880fa] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2[data-v-13f880fa] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.btn-close[data-v-13f880fa] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close[data-v-13f880fa]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.modal-body[data-v-13f880fa] {
  padding: 24px;
}
.info-box[data-v-13f880fa],
.warning-box[data-v-13f880fa] {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.info-box[data-v-13f880fa] {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.warning-box[data-v-13f880fa] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.info-box svg[data-v-13f880fa],
.warning-box svg[data-v-13f880fa] {
  flex-shrink: 0;
  margin-top: 2px;
}
.info-box p[data-v-13f880fa],
.warning-box p[data-v-13f880fa] {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.form-group[data-v-13f880fa] {
  margin-bottom: 20px;
}
.form-group label[data-v-13f880fa] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-13f880fa] {
  color: var(--danger);
}
.modal-footer[data-v-13f880fa] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 24px;
  border-top: 1px solid var(--border);
}
.btn-secondary[data-v-13f880fa],
.btn-danger[data-v-13f880fa] {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-13f880fa] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-secondary[data-v-13f880fa]:hover {
  background: var(--bg-gray);
}
.btn-danger[data-v-13f880fa] {
  background: #dc2626;
  border: none;
  color: white;
}
.btn-danger[data-v-13f880fa]:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.btn-danger[data-v-13f880fa]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-13f880fa],
.modal-container[data-v-13f880fa],
.modal-content-large[data-v-13f880fa] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-13f880fa] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-13f880fa],
.modal-header h3[data-v-13f880fa],
.modal-header h4[data-v-13f880fa],
.modal-title[data-v-13f880fa] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-13f880fa] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-13f880fa] {
    padding: 12px 14px;
}
.modal-footer[data-v-13f880fa] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-13f880fa],
.btn-close[data-v-13f880fa],
.modal-close[data-v-13f880fa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-13f880fa]:hover,
.btn-close[data-v-13f880fa]:hover,
.modal-close[data-v-13f880fa]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-13f880fa],
.btn-secondary[data-v-13f880fa],
.btn-cancel[data-v-13f880fa],
.btn-cancel-edit[data-v-13f880fa],
.btn-save[data-v-13f880fa],
.btn-save-edit[data-v-13f880fa],
.btn-confirm[data-v-13f880fa],
.btn-danger[data-v-13f880fa],
.btn-success[data-v-13f880fa],
.btn-add[data-v-13f880fa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-13f880fa],
.btn-cancel[data-v-13f880fa],
.btn-cancel-edit[data-v-13f880fa] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-13f880fa]:hover:not(:disabled),
.btn-cancel[data-v-13f880fa]:hover:not(:disabled),
.btn-cancel-edit[data-v-13f880fa]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-13f880fa],
.btn-confirm[data-v-13f880fa],
.btn-save[data-v-13f880fa],
.btn-save-edit[data-v-13f880fa],
.btn-add[data-v-13f880fa] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-13f880fa]:hover:not(:disabled),
.btn-confirm[data-v-13f880fa]:hover:not(:disabled),
.btn-save[data-v-13f880fa]:hover:not(:disabled),
.btn-save-edit[data-v-13f880fa]:hover:not(:disabled),
.btn-add[data-v-13f880fa]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-13f880fa] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-13f880fa]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-13f880fa] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-13f880fa]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-13f880fa],
.modal-body input[type="number"][data-v-13f880fa],
.modal-body input[type="email"][data-v-13f880fa],
.modal-body input[type="tel"][data-v-13f880fa],
.modal-body input[type="url"][data-v-13f880fa],
.modal-body input[type="search"][data-v-13f880fa],
.modal-body input[type="date"][data-v-13f880fa],
.modal-body input[type="password"][data-v-13f880fa],
.modal-body select[data-v-13f880fa],
.modal-body textarea[data-v-13f880fa] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-13f880fa]:focus,
.modal-body input[type="number"][data-v-13f880fa]:focus,
.modal-body input[type="email"][data-v-13f880fa]:focus,
.modal-body input[type="tel"][data-v-13f880fa]:focus,
.modal-body input[type="url"][data-v-13f880fa]:focus,
.modal-body input[type="search"][data-v-13f880fa]:focus,
.modal-body input[type="date"][data-v-13f880fa]:focus,
.modal-body input[type="password"][data-v-13f880fa]:focus,
.modal-body select[data-v-13f880fa]:focus,
.modal-body textarea[data-v-13f880fa]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-13f880fa],
.modal-body .form-label[data-v-13f880fa] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-13f880fa] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-13f880fa],
.modal-actions[data-v-13f880fa] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-13f880fa]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-13f880fa]:hover,
.btn-icon.btn-icon-danger[data-v-13f880fa]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-13f880fa] {
  transition: transform 0.15s ease;
}

.modal-overlay[data-v-dbf8dedb] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-content[data-v-dbf8dedb] {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.modal-header[data-v-dbf8dedb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2[data-v-dbf8dedb] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.btn-close[data-v-dbf8dedb] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close[data-v-dbf8dedb]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.modal-body[data-v-dbf8dedb] {
  padding: 24px;
}
.form-group[data-v-dbf8dedb] {
  margin-bottom: 20px;
}
.form-group label[data-v-dbf8dedb] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-dbf8dedb] {
  color: var(--danger);
}
.form-group input[type="text"][data-v-dbf8dedb],
.form-group input[type="email"][data-v-dbf8dedb],
.form-group input[type="tel"][data-v-dbf8dedb] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.form-group input[data-v-dbf8dedb]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.form-row[data-v-dbf8dedb] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* iOS-style toggle, matches the rest of the app */
.form-group-toggle[data-v-dbf8dedb] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toggle[data-v-dbf8dedb] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.toggle input[data-v-dbf8dedb] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track[data-v-dbf8dedb] {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background 0.2s ease;
  cursor: pointer;
}
.toggle-track[data-v-dbf8dedb]::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle input:checked + .toggle-track[data-v-dbf8dedb] {
  background: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-dbf8dedb]::before {
  transform: translateX(16px);
}
.toggle input:focus-visible + .toggle-track[data-v-dbf8dedb] {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.toggle-text[data-v-dbf8dedb] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  user-select: none;
}
.modal-footer[data-v-dbf8dedb] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.btn-secondary[data-v-dbf8dedb],
.btn-primary[data-v-dbf8dedb] {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-dbf8dedb] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-secondary[data-v-dbf8dedb]:hover {
  background: var(--bg-gray);
}
.btn-primary[data-v-dbf8dedb] {
  background: var(--primary);
  border: none;
  color: white;
}
.btn-primary[data-v-dbf8dedb]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-dbf8dedb]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Alias Names Styling */
.alias-names-container[data-v-dbf8dedb] {
  width: 100%;
}
.alias-tags[data-v-dbf8dedb] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  min-height: 42px;
  align-items: center;
}
.alias-tags[data-v-dbf8dedb]:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.alias-tag[data-v-dbf8dedb] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
  font-weight: 500;
}
.alias-remove[data-v-dbf8dedb] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #3b82f6;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
}
.alias-remove[data-v-dbf8dedb]:hover {
  background: #dbeafe;
  color: #1e40af;
}
.alias-input[data-v-dbf8dedb] {
  flex: 1;
  min-width: 150px;
  border: none;
  outline: none;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-primary);
}
.alias-input[data-v-dbf8dedb]::placeholder {
  color: var(--text-light);
}
.field-hint[data-v-dbf8dedb] {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
.form-row[data-v-dbf8dedb] {
    grid-template-columns: 1fr;
}
}

/* Dropzone Section */
.dropzone[data-v-dbf8dedb] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  padding: 48px 32px;
  margin-bottom: 32px;
  border: 3px dashed #0ea5e9;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropzone.dragover[data-v-dbf8dedb] {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: var(--primary);
  border-width: 3px;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.2);
  transform: scale(1.02);
}
.dropzone.uploading[data-v-dbf8dedb] {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  cursor: wait;
}
.dropzone.has-file[data-v-dbf8dedb] {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #10b981;
}
.dropzone-empty[data-v-dbf8dedb],
.dropzone-extracting[data-v-dbf8dedb],
.dropzone-success[data-v-dbf8dedb] {
  text-align: center;
  width: 100%;
}
.upload-icon[data-v-dbf8dedb],
.success-icon[data-v-dbf8dedb] {
  margin: 0 auto 20px;
  color: var(--primary);
}
.dropzone.has-file .success-icon[data-v-dbf8dedb] {
  color: #10b981;
}
.dropzone h3[data-v-dbf8dedb] {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.dropzone p[data-v-dbf8dedb] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}
.dropzone-actions[data-v-dbf8dedb] {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
}
.btn-browse[data-v-dbf8dedb],
.btn-camera[data-v-dbf8dedb] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 10px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
}
.btn-browse[data-v-dbf8dedb]:hover,
.btn-camera[data-v-dbf8dedb]:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}
.btn-browse[data-v-dbf8dedb]:active,
.btn-camera[data-v-dbf8dedb]:active {
  transform: translateY(0);
}
.btn-upload-another[data-v-dbf8dedb] {
  margin-top: 16px;
  padding: 10px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-upload-another[data-v-dbf8dedb]:hover {
  background: #0284c7;
  transform: translateY(-1px);
}
.file-types[data-v-dbf8dedb] {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 16px;
}
.dropzone-extracting .spinner-large[data-v-dbf8dedb] {
  width: 48px;
  height: 48px;
  border: 4px solid #fde68a;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin-dbf8dedb 1s linear infinite;
  margin: 0 auto 20px;
}
.extracting-text[data-v-dbf8dedb] {
  font-size: 16px;
  font-weight: 600;
  color: #f59e0b;
}
.file-name[data-v-dbf8dedb] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 8px;
  word-break: break-word;
}
.success-message[data-v-dbf8dedb] {
  font-size: 14px;
  font-weight: 500;
  color: #10b981;
}
@keyframes spin-dbf8dedb {
to { transform: rotate(360deg);
}
}

/* Legacy Upload Section (can be removed if not used elsewhere) */
.upload-section[data-v-dbf8dedb] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 2px dashed #0ea5e9;
}
.upload-info[data-v-dbf8dedb] {
  text-align: center;
  margin-bottom: 20px;
}
.upload-info svg[data-v-dbf8dedb] {
  color: var(--primary);
  margin-bottom: 12px;
}
.upload-info h3[data-v-dbf8dedb] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.upload-info p[data-v-dbf8dedb] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.upload-actions[data-v-dbf8dedb] {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn-upload[data-v-dbf8dedb],
.btn-camera[data-v-dbf8dedb] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-upload[data-v-dbf8dedb]:hover:not(:disabled),
.btn-camera[data-v-dbf8dedb]:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}
.btn-upload[data-v-dbf8dedb]:disabled,
.btn-camera[data-v-dbf8dedb]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.extracting-state[data-v-dbf8dedb] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
}
.error-message[data-v-dbf8dedb] {
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #c33;
  font-size: 14px;
  line-height: 1.5;
}
.spinner-small[data-v-dbf8dedb] {
  width: 20px;
  height: 20px;
  border: 2px solid #e0f2fe;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-dbf8dedb 0.8s linear infinite;
}
@keyframes spin-dbf8dedb {
to { transform: rotate(360deg);
}
}
.uploaded-file[data-v-dbf8dedb] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
}
.uploaded-file span[data-v-dbf8dedb] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-clear[data-v-dbf8dedb] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-clear[data-v-dbf8dedb]:hover {
  background: var(--bg-gray);
  color: var(--danger);
}
.divider[data-v-dbf8dedb] {
  position: relative;
  text-align: center;
  margin: 24px 0;
}
.divider[data-v-dbf8dedb]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.divider span[data-v-dbf8dedb] {
  position: relative;
  display: inline-block;
  padding: 0 16px;
  background: white;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-dbf8dedb],
.modal-container[data-v-dbf8dedb],
.modal-content-large[data-v-dbf8dedb] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-dbf8dedb] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-dbf8dedb],
.modal-header h3[data-v-dbf8dedb],
.modal-header h4[data-v-dbf8dedb],
.modal-title[data-v-dbf8dedb] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-dbf8dedb] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-dbf8dedb] {
    padding: 12px 14px;
}
.modal-footer[data-v-dbf8dedb] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-dbf8dedb],
.btn-close[data-v-dbf8dedb],
.modal-close[data-v-dbf8dedb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-dbf8dedb]:hover,
.btn-close[data-v-dbf8dedb]:hover,
.modal-close[data-v-dbf8dedb]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-dbf8dedb],
.btn-secondary[data-v-dbf8dedb],
.btn-cancel[data-v-dbf8dedb],
.btn-cancel-edit[data-v-dbf8dedb],
.btn-save[data-v-dbf8dedb],
.btn-save-edit[data-v-dbf8dedb],
.btn-confirm[data-v-dbf8dedb],
.btn-danger[data-v-dbf8dedb],
.btn-success[data-v-dbf8dedb],
.btn-add[data-v-dbf8dedb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-dbf8dedb],
.btn-cancel[data-v-dbf8dedb],
.btn-cancel-edit[data-v-dbf8dedb] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-dbf8dedb]:hover:not(:disabled),
.btn-cancel[data-v-dbf8dedb]:hover:not(:disabled),
.btn-cancel-edit[data-v-dbf8dedb]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-dbf8dedb],
.btn-confirm[data-v-dbf8dedb],
.btn-save[data-v-dbf8dedb],
.btn-save-edit[data-v-dbf8dedb],
.btn-add[data-v-dbf8dedb] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-dbf8dedb]:hover:not(:disabled),
.btn-confirm[data-v-dbf8dedb]:hover:not(:disabled),
.btn-save[data-v-dbf8dedb]:hover:not(:disabled),
.btn-save-edit[data-v-dbf8dedb]:hover:not(:disabled),
.btn-add[data-v-dbf8dedb]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-dbf8dedb] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-dbf8dedb]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-dbf8dedb] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-dbf8dedb]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-dbf8dedb],
.modal-body input[type="number"][data-v-dbf8dedb],
.modal-body input[type="email"][data-v-dbf8dedb],
.modal-body input[type="tel"][data-v-dbf8dedb],
.modal-body input[type="url"][data-v-dbf8dedb],
.modal-body input[type="search"][data-v-dbf8dedb],
.modal-body input[type="date"][data-v-dbf8dedb],
.modal-body input[type="password"][data-v-dbf8dedb],
.modal-body select[data-v-dbf8dedb],
.modal-body textarea[data-v-dbf8dedb] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-dbf8dedb]:focus,
.modal-body input[type="number"][data-v-dbf8dedb]:focus,
.modal-body input[type="email"][data-v-dbf8dedb]:focus,
.modal-body input[type="tel"][data-v-dbf8dedb]:focus,
.modal-body input[type="url"][data-v-dbf8dedb]:focus,
.modal-body input[type="search"][data-v-dbf8dedb]:focus,
.modal-body input[type="date"][data-v-dbf8dedb]:focus,
.modal-body input[type="password"][data-v-dbf8dedb]:focus,
.modal-body select[data-v-dbf8dedb]:focus,
.modal-body textarea[data-v-dbf8dedb]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-dbf8dedb],
.modal-body .form-label[data-v-dbf8dedb] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-dbf8dedb] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-dbf8dedb],
.modal-actions[data-v-dbf8dedb] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-dbf8dedb]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-dbf8dedb]:hover,
.btn-icon.btn-icon-danger[data-v-dbf8dedb]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-dbf8dedb] {
  transition: transform 0.15s ease;
}

/* ── The switch, the chips and the hints ───────────────────────────────
 *
 * The switch was a solid blue pill with a white knob — the loudest mark in a
 * card of hairlines — and the alternative names sat in blue-on-blue chips
 * with an 18px typographic cross. All three are now what the rest of the
 * product uses: a rail with a handle, a quiet chip with a hairline, and a
 * hint one step smaller than the field it explains. */
.toggle[data-v-dbf8dedb] {
  width: 30px;
  height: 17px;
}
.toggle-track[data-v-dbf8dedb] {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: none;
}
.toggle-track[data-v-dbf8dedb]::before,
.toggle-track[data-v-dbf8dedb]::after {
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 2.5px;
  right: auto;
  top: 50%;
  margin-top: -4.5px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: none;
}
.toggle-track[data-v-dbf8dedb]::after {
  content: none;
}
.toggle input:checked + .toggle-track[data-v-dbf8dedb] {
  background: transparent;
  border-color: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-dbf8dedb]::before {
  background: var(--primary);
  transform: translateX(13px);
}
.toggle:hover .toggle-track[data-v-dbf8dedb] {
  border-color: var(--primary);
}
.toggle-text[data-v-dbf8dedb],
.toggle-label[data-v-dbf8dedb] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* An alternative name on file: a quiet chip, not a blue badge. */
.alias-tag[data-v-dbf8dedb] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 8px;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.alias-remove[data-v-dbf8dedb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.alias-remove[data-v-dbf8dedb]:hover {
  background: transparent;
  color: #e04545;
  transform: translateY(-1px);
}
.alias-tags[data-v-dbf8dedb] {
  gap: 5px;
}
.alias-input[data-v-dbf8dedb] {
  font-size: 13px;
}

/* What a field means, a step below the field itself. */
.field-hint[data-v-dbf8dedb] {
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
}
.form-group[data-v-dbf8dedb] {
  margin-bottom: 10px;
}
.form-group label[data-v-dbf8dedb] {
  margin-bottom: 3px;
}

.modal-overlay[data-v-d2ce0891] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-content[data-v-d2ce0891] {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.modal-header[data-v-d2ce0891] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2[data-v-d2ce0891] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.btn-close[data-v-d2ce0891] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close[data-v-d2ce0891]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.modal-body[data-v-d2ce0891] {
  padding: 24px;
}
.form-group[data-v-d2ce0891] {
  margin-bottom: 20px;
}
.form-group label[data-v-d2ce0891] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-d2ce0891] {
  color: var(--danger);
}
.form-group input[type="text"][data-v-d2ce0891],
.form-group input[type="email"][data-v-d2ce0891],
.form-group input[type="tel"][data-v-d2ce0891] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.form-group input[data-v-d2ce0891]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* iOS-style toggle, matches the rest of the app */
.form-group-toggle[data-v-d2ce0891] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toggle[data-v-d2ce0891] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.toggle input[data-v-d2ce0891] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track[data-v-d2ce0891] {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background 0.2s ease;
  cursor: pointer;
}
.toggle-track[data-v-d2ce0891]::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle input:checked + .toggle-track[data-v-d2ce0891] {
  background: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-d2ce0891]::before {
  transform: translateX(16px);
}
.toggle input:focus-visible + .toggle-track[data-v-d2ce0891] {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.toggle-text[data-v-d2ce0891] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  user-select: none;
}
.modal-footer[data-v-d2ce0891] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.btn-secondary[data-v-d2ce0891],
.btn-primary[data-v-d2ce0891] {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-d2ce0891] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-secondary[data-v-d2ce0891]:hover {
  background: var(--bg-gray);
}
.btn-primary[data-v-d2ce0891] {
  background: var(--primary);
  border: none;
  color: white;
}
.btn-primary[data-v-d2ce0891]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-d2ce0891]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.alias-names-container[data-v-d2ce0891] {
  width: 100%;
}
.alias-tags[data-v-d2ce0891] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  min-height: 42px;
  align-items: center;
}
.alias-tags[data-v-d2ce0891]:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.alias-tag[data-v-d2ce0891] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
  font-weight: 500;
}
.alias-remove[data-v-d2ce0891] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #3b82f6;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
}
.alias-remove[data-v-d2ce0891]:hover {
  background: #dbeafe;
  color: #1e40af;
}
.alias-input[data-v-d2ce0891] {
  flex: 1;
  min-width: 150px;
  border: none;
  outline: none;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-primary);
}
.alias-input[data-v-d2ce0891]::placeholder {
  color: var(--text-light);
}
.field-hint[data-v-d2ce0891] {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.error-message[data-v-d2ce0891] {
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #c33;
  font-size: 14px;
  line-height: 1.5;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-d2ce0891],
.modal-container[data-v-d2ce0891],
.modal-content-large[data-v-d2ce0891] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-d2ce0891] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-d2ce0891],
.modal-header h3[data-v-d2ce0891],
.modal-header h4[data-v-d2ce0891],
.modal-title[data-v-d2ce0891] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-d2ce0891] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-d2ce0891] {
    padding: 12px 14px;
}
.modal-footer[data-v-d2ce0891] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-d2ce0891],
.btn-close[data-v-d2ce0891],
.modal-close[data-v-d2ce0891] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-d2ce0891]:hover,
.btn-close[data-v-d2ce0891]:hover,
.modal-close[data-v-d2ce0891]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-d2ce0891],
.btn-secondary[data-v-d2ce0891],
.btn-cancel[data-v-d2ce0891],
.btn-cancel-edit[data-v-d2ce0891],
.btn-save[data-v-d2ce0891],
.btn-save-edit[data-v-d2ce0891],
.btn-confirm[data-v-d2ce0891],
.btn-danger[data-v-d2ce0891],
.btn-success[data-v-d2ce0891],
.btn-add[data-v-d2ce0891] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-d2ce0891],
.btn-cancel[data-v-d2ce0891],
.btn-cancel-edit[data-v-d2ce0891] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-d2ce0891]:hover:not(:disabled),
.btn-cancel[data-v-d2ce0891]:hover:not(:disabled),
.btn-cancel-edit[data-v-d2ce0891]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-d2ce0891],
.btn-confirm[data-v-d2ce0891],
.btn-save[data-v-d2ce0891],
.btn-save-edit[data-v-d2ce0891],
.btn-add[data-v-d2ce0891] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-d2ce0891]:hover:not(:disabled),
.btn-confirm[data-v-d2ce0891]:hover:not(:disabled),
.btn-save[data-v-d2ce0891]:hover:not(:disabled),
.btn-save-edit[data-v-d2ce0891]:hover:not(:disabled),
.btn-add[data-v-d2ce0891]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-d2ce0891] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-d2ce0891]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-d2ce0891] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-d2ce0891]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-d2ce0891],
.modal-body input[type="number"][data-v-d2ce0891],
.modal-body input[type="email"][data-v-d2ce0891],
.modal-body input[type="tel"][data-v-d2ce0891],
.modal-body input[type="url"][data-v-d2ce0891],
.modal-body input[type="search"][data-v-d2ce0891],
.modal-body input[type="date"][data-v-d2ce0891],
.modal-body input[type="password"][data-v-d2ce0891],
.modal-body select[data-v-d2ce0891],
.modal-body textarea[data-v-d2ce0891] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-d2ce0891]:focus,
.modal-body input[type="number"][data-v-d2ce0891]:focus,
.modal-body input[type="email"][data-v-d2ce0891]:focus,
.modal-body input[type="tel"][data-v-d2ce0891]:focus,
.modal-body input[type="url"][data-v-d2ce0891]:focus,
.modal-body input[type="search"][data-v-d2ce0891]:focus,
.modal-body input[type="date"][data-v-d2ce0891]:focus,
.modal-body input[type="password"][data-v-d2ce0891]:focus,
.modal-body select[data-v-d2ce0891]:focus,
.modal-body textarea[data-v-d2ce0891]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-d2ce0891],
.modal-body .form-label[data-v-d2ce0891] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-d2ce0891] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-d2ce0891],
.modal-actions[data-v-d2ce0891] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-d2ce0891]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-d2ce0891]:hover,
.btn-icon.btn-icon-danger[data-v-d2ce0891]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-d2ce0891] {
  transition: transform 0.15s ease;
}

/* ── The switch, the chips and the hints ───────────────────────────────
 *
 * The switch was a solid blue pill with a white knob — the loudest mark in a
 * card of hairlines — and the alternative names sat in blue-on-blue chips
 * with an 18px typographic cross. All three are now what the rest of the
 * product uses: a rail with a handle, a quiet chip with a hairline, and a
 * hint one step smaller than the field it explains. */
.toggle[data-v-d2ce0891] {
  width: 30px;
  height: 17px;
}
.toggle-track[data-v-d2ce0891] {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: none;
}
.toggle-track[data-v-d2ce0891]::before,
.toggle-track[data-v-d2ce0891]::after {
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 2.5px;
  right: auto;
  top: 50%;
  margin-top: -4.5px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: none;
}
.toggle-track[data-v-d2ce0891]::after {
  content: none;
}
.toggle input:checked + .toggle-track[data-v-d2ce0891] {
  background: transparent;
  border-color: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-d2ce0891]::before {
  background: var(--primary);
  transform: translateX(13px);
}
.toggle:hover .toggle-track[data-v-d2ce0891] {
  border-color: var(--primary);
}
.toggle-text[data-v-d2ce0891],
.toggle-label[data-v-d2ce0891] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* An alternative name on file: a quiet chip, not a blue badge. */
.alias-tag[data-v-d2ce0891] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 8px;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.alias-remove[data-v-d2ce0891] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.alias-remove[data-v-d2ce0891]:hover {
  background: transparent;
  color: #e04545;
  transform: translateY(-1px);
}
.alias-tags[data-v-d2ce0891] {
  gap: 5px;
}
.alias-input[data-v-d2ce0891] {
  font-size: 13px;
}

/* What a field means, a step below the field itself. */
.field-hint[data-v-d2ce0891] {
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
}
.form-group[data-v-d2ce0891] {
  margin-bottom: 10px;
}
.form-group label[data-v-d2ce0891] {
  margin-bottom: 3px;
}

.modal-overlay[data-v-6e72d2f2] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  overflow-y: auto;
}
.modal-container[data-v-6e72d2f2] {
  background: white;
  border-radius: 16px;
  width: 100%;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.modal-header[data-v-6e72d2f2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header-content[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.modal-header h2[data-v-6e72d2f2] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.form-group[data-v-6e72d2f2] {
  margin-bottom: 20px;
}
.form-label[data-v-6e72d2f2] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-6e72d2f2] {
  color: #ef4444;
  margin-left: 4px;
}
.form-hint[data-v-6e72d2f2] {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 20px;
  line-height: 1.4;
}
.checkbox-label[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"][data-v-6e72d2f2] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}
.checkbox-label input[type="checkbox"][data-v-6e72d2f2]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.radio-group[data-v-6e72d2f2] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.radio-group-horizontal[data-v-6e72d2f2] {
  flex-direction: row;
  gap: 12px;
}
.radio-group-horizontal .radio-label[data-v-6e72d2f2] {
  flex: 1;
}
.radio-label[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 46px;
}
.radio-label[data-v-6e72d2f2]:hover {
  border-color: var(--primary);
  background-color: rgba(14, 165, 233, 0.05);
}
.radio-label input[type="radio"][data-v-6e72d2f2] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}
.radio-label input[type="radio"]:checked + span[data-v-6e72d2f2] {
  font-weight: 600;
  color: var(--primary);
}
.radio-label input[type="radio"][data-v-6e72d2f2]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.form-input[data-v-6e72d2f2] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-family: monospace;
}
.form-input[data-v-6e72d2f2]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-input[data-v-6e72d2f2]:disabled {
  background-color: var(--bg-gray);
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-primary[data-v-6e72d2f2] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary[data-v-6e72d2f2]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-6e72d2f2]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary[data-v-6e72d2f2] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-6e72d2f2]:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-small[data-v-6e72d2f2] {
  padding: 6px 12px;
  font-size: 13px;
}
.btn-icon[data-v-6e72d2f2] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.btn-icon[data-v-6e72d2f2]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.bulk-import-modal[data-v-6e72d2f2] {
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  margin: auto;
}
.modal-body[data-v-6e72d2f2] {
  padding: 24px;
}
.import-instructions[data-v-6e72d2f2] {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  margin-bottom: 24px;
}
.instruction-icon[data-v-6e72d2f2] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: 20px;
}
.instruction-text h4[data-v-6e72d2f2] {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.instruction-text ul[data-v-6e72d2f2] {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.instruction-text li[data-v-6e72d2f2] {
  margin-bottom: 4px;
}
.form-textarea[data-v-6e72d2f2] {
  width: 100%;
  min-height: 280px;
  max-height: 280px;
  height: 280px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.2s ease;
}
.form-textarea[data-v-6e72d2f2]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-textarea[data-v-6e72d2f2]:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}
.action-buttons[data-v-6e72d2f2] {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.btn-large[data-v-6e72d2f2] {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}
.btn-spinner[data-v-6e72d2f2] {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-6e72d2f2 0.6s linear infinite;
  display: inline-block;
  margin-right: 8px;
}
@keyframes spin-6e72d2f2 {
to { transform: rotate(360deg);
}
}
.error-message[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  color: #dc2626;
  margin-top: 16px;
  font-size: 14px;
}
.info-message[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  color: #1e40af;
  margin-top: 12px;
  font-size: 14px;
}
.info-message svg[data-v-6e72d2f2] {
  color: #3b82f6;
  font-size: 16px;
  flex-shrink: 0;
}
.parsed-results[data-v-6e72d2f2] {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px dashed var(--border);
}
.results-header[data-v-6e72d2f2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.results-header h3[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.results-header h3 svg[data-v-6e72d2f2] {
  color: #10b981;
}
.parsed-table-wrapper[data-v-6e72d2f2] {
  max-height: 300px;
  overflow-y: auto;
  border: 2px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
}
.parsed-table[data-v-6e72d2f2] {
  width: 100%;
  border-collapse: collapse;
}
.parsed-table thead[data-v-6e72d2f2] {
  position: sticky;
  top: 0;
  background: var(--bg-gray);
  z-index: 1;
}
.parsed-table th[data-v-6e72d2f2] {
  padding: 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}
.parsed-table td[data-v-6e72d2f2] {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.parsed-table tbody tr[data-v-6e72d2f2]:hover {
  background: #f8fafc;
}
.code-cell[data-v-6e72d2f2] {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--primary);
}
.type-badge[data-v-6e72d2f2] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.type-expense[data-v-6e72d2f2] {
  background: #fef3c7;
  color: #d97706;
}
.type-revenue[data-v-6e72d2f2] {
  background: #d1fae5;
  color: #059669;
}
.type-asset[data-v-6e72d2f2] {
  background: #dbeafe;
  color: #0284c7;
}
.type-liability[data-v-6e72d2f2] {
  background: #fecaca;
  color: #dc2626;
}
.status-badge[data-v-6e72d2f2] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.status-badge.active[data-v-6e72d2f2] {
  background: #d1fae5;
  color: #059669;
}
.import-result[data-v-6e72d2f2] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}
.import-result.success[data-v-6e72d2f2] {
  background: #d1fae5;
  border-left: 4px solid #10b981;
  color: #065f46;
}
.import-result.warning[data-v-6e72d2f2] {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}
.import-result.error[data-v-6e72d2f2] {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #dc2626;
}
.import-result svg[data-v-6e72d2f2] {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 2px;
}
.result-message[data-v-6e72d2f2] {
  font-weight: 600;
  margin: 0 0 8px 0;
}
.error-list[data-v-6e72d2f2] {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}
.error-list li[data-v-6e72d2f2] {
  margin-bottom: 4px;
}

/* Excel Upload Styles */
.file-upload-area[data-v-6e72d2f2] {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
  background: var(--bg-gray);
  cursor: pointer;
}
.file-upload-area[data-v-6e72d2f2]:hover {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.05);
}
.file-upload-area.drag-over[data-v-6e72d2f2] {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.1);
  transform: scale(1.02);
}
.upload-prompt[data-v-6e72d2f2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.upload-icon[data-v-6e72d2f2] {
  font-size: 48px;
  color: #10b981;
  margin-bottom: 8px;
}
.upload-text[data-v-6e72d2f2] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.upload-hint[data-v-6e72d2f2] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.file-selected[data-v-6e72d2f2] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  text-align: left;
}
.file-icon[data-v-6e72d2f2] {
  font-size: 36px;
  color: #10b981;
  flex-shrink: 0;
}
.file-info[data-v-6e72d2f2] {
  flex: 1;
  min-width: 0;
}
.file-name[data-v-6e72d2f2] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  word-break: break-word;
}
.file-size[data-v-6e72d2f2] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.btn-remove-file[data-v-6e72d2f2] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  border: none;
  border-radius: 6px;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-remove-file[data-v-6e72d2f2]:hover {
  background: #fee2e2;
  transform: scale(1.1);
}

/* Column Mapping Styles */
.column-mapping[data-v-6e72d2f2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--bg-gray);
  border-radius: 10px;
  margin-bottom: 20px;
}
.mapping-row[data-v-6e72d2f2] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mapping-row label[data-v-6e72d2f2] {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Data Preview Styles */
.data-preview[data-v-6e72d2f2] {
  margin-top: 24px;
  padding: 20px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
}
.data-preview h4[data-v-6e72d2f2] {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-table-wrapper[data-v-6e72d2f2] {
  max-height: 250px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.preview-table[data-v-6e72d2f2] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.preview-table thead[data-v-6e72d2f2] {
  position: sticky;
  top: 0;
  background: var(--bg-gray);
  z-index: 1;
}
.preview-table th[data-v-6e72d2f2] {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.preview-table td[data-v-6e72d2f2] {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.preview-table tbody tr[data-v-6e72d2f2]:hover {
  background: #f8fafc;
}
.preview-table .code-cell[data-v-6e72d2f2] {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--primary);
}

/* Column Mapping Help */
.column-mapping-help[data-v-6e72d2f2] {
  margin-top: 16px;
  padding: 16px;
  background: #eff6ff;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}
.column-mapping-help p[data-v-6e72d2f2] {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.column-mapping-help ul[data-v-6e72d2f2] {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.column-mapping-help li[data-v-6e72d2f2] {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.column-mapping-help strong[data-v-6e72d2f2] {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-6e72d2f2],
.modal-container[data-v-6e72d2f2],
.modal-content-large[data-v-6e72d2f2] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-6e72d2f2] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-6e72d2f2],
.modal-header h3[data-v-6e72d2f2],
.modal-header h4[data-v-6e72d2f2],
.modal-title[data-v-6e72d2f2] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-6e72d2f2] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-6e72d2f2] {
    padding: 12px 14px;
}
.modal-footer[data-v-6e72d2f2] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-6e72d2f2],
.btn-close[data-v-6e72d2f2],
.modal-close[data-v-6e72d2f2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-6e72d2f2]:hover,
.btn-close[data-v-6e72d2f2]:hover,
.modal-close[data-v-6e72d2f2]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-6e72d2f2],
.btn-secondary[data-v-6e72d2f2],
.btn-cancel[data-v-6e72d2f2],
.btn-cancel-edit[data-v-6e72d2f2],
.btn-save[data-v-6e72d2f2],
.btn-save-edit[data-v-6e72d2f2],
.btn-confirm[data-v-6e72d2f2],
.btn-danger[data-v-6e72d2f2],
.btn-success[data-v-6e72d2f2],
.btn-add[data-v-6e72d2f2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-6e72d2f2],
.btn-cancel[data-v-6e72d2f2],
.btn-cancel-edit[data-v-6e72d2f2] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-6e72d2f2]:hover:not(:disabled),
.btn-cancel[data-v-6e72d2f2]:hover:not(:disabled),
.btn-cancel-edit[data-v-6e72d2f2]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-6e72d2f2],
.btn-confirm[data-v-6e72d2f2],
.btn-save[data-v-6e72d2f2],
.btn-save-edit[data-v-6e72d2f2],
.btn-add[data-v-6e72d2f2] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-6e72d2f2]:hover:not(:disabled),
.btn-confirm[data-v-6e72d2f2]:hover:not(:disabled),
.btn-save[data-v-6e72d2f2]:hover:not(:disabled),
.btn-save-edit[data-v-6e72d2f2]:hover:not(:disabled),
.btn-add[data-v-6e72d2f2]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-6e72d2f2] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-6e72d2f2]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-6e72d2f2] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-6e72d2f2]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-6e72d2f2],
.modal-body input[type="number"][data-v-6e72d2f2],
.modal-body input[type="email"][data-v-6e72d2f2],
.modal-body input[type="tel"][data-v-6e72d2f2],
.modal-body input[type="url"][data-v-6e72d2f2],
.modal-body input[type="search"][data-v-6e72d2f2],
.modal-body input[type="date"][data-v-6e72d2f2],
.modal-body input[type="password"][data-v-6e72d2f2],
.modal-body select[data-v-6e72d2f2],
.modal-body textarea[data-v-6e72d2f2] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-6e72d2f2]:focus,
.modal-body input[type="number"][data-v-6e72d2f2]:focus,
.modal-body input[type="email"][data-v-6e72d2f2]:focus,
.modal-body input[type="tel"][data-v-6e72d2f2]:focus,
.modal-body input[type="url"][data-v-6e72d2f2]:focus,
.modal-body input[type="search"][data-v-6e72d2f2]:focus,
.modal-body input[type="date"][data-v-6e72d2f2]:focus,
.modal-body input[type="password"][data-v-6e72d2f2]:focus,
.modal-body select[data-v-6e72d2f2]:focus,
.modal-body textarea[data-v-6e72d2f2]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-6e72d2f2],
.modal-body .form-label[data-v-6e72d2f2] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The "how to" panel, quieted: a tinted strip with the mark in line, not a
   48px blue disc over a block of its own. The drop zone keeps its dashes but
   drops to the type size the rest of the dialogue uses. */
.import-instructions[data-v-6e72d2f2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #f4f9fd;
    border: 1px solid #dde3ea;
    border-left: 2px solid #0697e4;
    border-radius: 8px;
    box-shadow: none;
}
.instruction-icon[data-v-6e72d2f2] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin: 1px 0 0;
    background: transparent;
    border-radius: 0;
    color: #0697e4;
    font-size: inherit;
    box-shadow: none;
}
.instruction-icon svg[data-v-6e72d2f2] {
    width: 14px;
    height: 14px;
}
.instruction-text h4[data-v-6e72d2f2],
.instruction-text strong[data-v-6e72d2f2] {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}
.instruction-text[data-v-6e72d2f2],
.instruction-text li[data-v-6e72d2f2],
.instruction-text p[data-v-6e72d2f2] {
    font-size: 11px;
    line-height: 1.5;
    color: #64748b;
}
.file-upload-area[data-v-6e72d2f2] {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
}
.file-upload-area.drag-over[data-v-6e72d2f2] {
    border-color: #0697e4;
    background: #f4f9fd;
}
.upload-icon[data-v-6e72d2f2] {
    color: #94a3b8;
}
.upload-text[data-v-6e72d2f2] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.upload-hint[data-v-6e72d2f2] {
    font-size: 11px;
    color: #94a3b8;
}

/* The one action: the dashboard's filled button, not a 48px slab. */
.btn-large[data-v-6e72d2f2] {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-6e72d2f2] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-6e72d2f2],
.modal-actions[data-v-6e72d2f2] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-remove-file[data-v-6e72d2f2] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-remove-file[data-v-6e72d2f2] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #e04545;
}
.btn-remove-file[data-v-6e72d2f2]:hover:not(:disabled) {
  background: #fff;
  border-color: #e04545;
  color: #e04545;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-6e72d2f2]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-6e72d2f2]:hover,
.btn-icon.btn-icon-danger[data-v-6e72d2f2]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-6e72d2f2] {
  transition: transform 0.15s ease;
}

.modal-overlay[data-v-c1848868] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  overflow-y: auto;
}
.modal-container[data-v-c1848868] {
  background: white;
  border-radius: 16px;
  width: 100%;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.bulk-import-modal[data-v-c1848868] {
  max-width: 900px;
  margin: auto;
}
.modal-header[data-v-c1848868] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header-content[data-v-c1848868] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.modal-header h2[data-v-c1848868] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.modal-body[data-v-c1848868] {
  padding: 24px;
}
.form-group[data-v-c1848868] {
  margin-bottom: 20px;
}
.form-label[data-v-c1848868] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-c1848868] {
  color: #ef4444;
  margin-left: 4px;
}
.form-input[data-v-c1848868] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  transition: all 0.2s ease;
}
.form-input[data-v-c1848868]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.import-instructions[data-v-c1848868] {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  margin-bottom: 24px;
}
.instruction-icon[data-v-c1848868] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: 20px;
}
.instruction-text h4[data-v-c1848868] {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.instruction-text ul[data-v-c1848868] {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.instruction-text li[data-v-c1848868] {
  margin-bottom: 4px;
}

/* Checkboxes / options */
.radio-group[data-v-c1848868] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.radio-label[data-v-c1848868] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.radio-label[data-v-c1848868]:hover {
  border-color: var(--primary);
  background-color: rgba(14, 165, 233, 0.05);
}
.radio-label input[type="checkbox"][data-v-c1848868] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
  margin-top: 2px;
}
.radio-label span[data-v-c1848868] {
  display: block;
  line-height: 1.4;
}
.radio-label small[data-v-c1848868] {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-secondary);
}

/* File upload */
.file-upload-area[data-v-c1848868] {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
  background: var(--bg-gray);
  cursor: pointer;
}
.file-upload-area[data-v-c1848868]:hover {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.05);
}
.file-upload-area.drag-over[data-v-c1848868] {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.1);
  transform: scale(1.02);
}
.upload-prompt[data-v-c1848868] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.upload-icon[data-v-c1848868] {
  font-size: 48px;
  color: #10b981;
  margin-bottom: 8px;
}
.upload-text[data-v-c1848868] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.upload-hint[data-v-c1848868] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.file-selected[data-v-c1848868] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  text-align: left;
  cursor: default;
}
.file-icon[data-v-c1848868] {
  font-size: 36px;
  color: #10b981;
  flex-shrink: 0;
}
.file-info[data-v-c1848868] {
  flex: 1;
  min-width: 0;
}
.file-name[data-v-c1848868] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  word-break: break-word;
}
.file-size[data-v-c1848868] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.btn-remove-file[data-v-c1848868] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  border: none;
  border-radius: 6px;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-remove-file[data-v-c1848868]:hover {
  background: #fee2e2;
  transform: scale(1.1);
}

/* Column mapping */
.column-mapping[data-v-c1848868] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
  background: var(--bg-gray);
  border-radius: 10px;
  margin-bottom: 20px;
}
.mapping-row[data-v-c1848868] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mapping-row label[data-v-c1848868] {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.column-mapping-help[data-v-c1848868] {
  margin-bottom: 16px;
  padding: 16px;
  background: #eff6ff;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}
.column-mapping-help p[data-v-c1848868] {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.column-mapping-help ul[data-v-c1848868] {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.column-mapping-help li[data-v-c1848868] {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.column-mapping-help strong[data-v-c1848868] {
  color: var(--text-primary);
  font-weight: 600;
}

/* Data Preview */
.data-preview[data-v-c1848868] {
  margin-top: 24px;
  padding: 20px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
}
.data-preview h4[data-v-c1848868] {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-table-wrapper[data-v-c1848868] {
  max-height: 250px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.preview-table[data-v-c1848868] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.preview-table thead[data-v-c1848868] {
  position: sticky;
  top: 0;
  background: var(--bg-gray);
  z-index: 1;
}
.preview-table th[data-v-c1848868] {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.preview-table td[data-v-c1848868] {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.preview-table tbody tr[data-v-c1848868]:hover {
  background: #f8fafc;
}

/* Buttons */
.action-buttons[data-v-c1848868] {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.btn-primary[data-v-c1848868] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary[data-v-c1848868]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-c1848868]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary[data-v-c1848868] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-c1848868]:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-large[data-v-c1848868] {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}
.btn-icon[data-v-c1848868] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.btn-icon[data-v-c1848868]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Error / spinner / result */
.error-message[data-v-c1848868] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  color: #dc2626;
  margin-top: 16px;
  font-size: 14px;
}
.import-progress[data-v-c1848868] {
  text-align: center;
  padding: 40px 20px;
}
.spinner[data-v-c1848868] {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin-c1848868 1s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin-c1848868 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.import-result[data-v-c1848868] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}
.import-result.success[data-v-c1848868] {
  background: #d1fae5;
  border-left: 4px solid #10b981;
  color: #065f46;
}
.import-result.error[data-v-c1848868] {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #dc2626;
}
.import-result svg[data-v-c1848868] {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 2px;
}
.result-message[data-v-c1848868] {
  font-weight: 600;
  margin: 0 0 8px 0;
}
.result-stats[data-v-c1848868] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.stat-chip[data-v-c1848868] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.stat-chip.success[data-v-c1848868] { background: #d1fae5; color: #059669;
}
.stat-chip.info[data-v-c1848868] { background: #dbeafe; color: #0284c7;
}
.stat-chip.warning[data-v-c1848868] { background: #fef3c7; color: #d97706;
}
.stat-chip.error[data-v-c1848868] { background: #fecaca; color: #dc2626;
}
.error-list[data-v-c1848868] {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
}
.error-list li[data-v-c1848868] {
  margin-bottom: 4px;
}
@media (max-width: 640px) {
.column-mapping[data-v-c1848868] {
    grid-template-columns: 1fr;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-c1848868],
.modal-container[data-v-c1848868],
.modal-content-large[data-v-c1848868] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-c1848868] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-c1848868],
.modal-header h3[data-v-c1848868],
.modal-header h4[data-v-c1848868],
.modal-title[data-v-c1848868] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-c1848868] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-c1848868] {
    padding: 12px 14px;
}
.modal-footer[data-v-c1848868] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-c1848868],
.btn-close[data-v-c1848868],
.modal-close[data-v-c1848868] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-c1848868]:hover,
.btn-close[data-v-c1848868]:hover,
.modal-close[data-v-c1848868]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-c1848868],
.btn-secondary[data-v-c1848868],
.btn-cancel[data-v-c1848868],
.btn-cancel-edit[data-v-c1848868],
.btn-save[data-v-c1848868],
.btn-save-edit[data-v-c1848868],
.btn-confirm[data-v-c1848868],
.btn-danger[data-v-c1848868],
.btn-success[data-v-c1848868],
.btn-add[data-v-c1848868] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-c1848868],
.btn-cancel[data-v-c1848868],
.btn-cancel-edit[data-v-c1848868] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-c1848868]:hover:not(:disabled),
.btn-cancel[data-v-c1848868]:hover:not(:disabled),
.btn-cancel-edit[data-v-c1848868]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-c1848868],
.btn-confirm[data-v-c1848868],
.btn-save[data-v-c1848868],
.btn-save-edit[data-v-c1848868],
.btn-add[data-v-c1848868] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-c1848868]:hover:not(:disabled),
.btn-confirm[data-v-c1848868]:hover:not(:disabled),
.btn-save[data-v-c1848868]:hover:not(:disabled),
.btn-save-edit[data-v-c1848868]:hover:not(:disabled),
.btn-add[data-v-c1848868]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-c1848868] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-c1848868]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-c1848868] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-c1848868]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-c1848868],
.modal-body input[type="number"][data-v-c1848868],
.modal-body input[type="email"][data-v-c1848868],
.modal-body input[type="tel"][data-v-c1848868],
.modal-body input[type="url"][data-v-c1848868],
.modal-body input[type="search"][data-v-c1848868],
.modal-body input[type="date"][data-v-c1848868],
.modal-body input[type="password"][data-v-c1848868],
.modal-body select[data-v-c1848868],
.modal-body textarea[data-v-c1848868] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-c1848868]:focus,
.modal-body input[type="number"][data-v-c1848868]:focus,
.modal-body input[type="email"][data-v-c1848868]:focus,
.modal-body input[type="tel"][data-v-c1848868]:focus,
.modal-body input[type="url"][data-v-c1848868]:focus,
.modal-body input[type="search"][data-v-c1848868]:focus,
.modal-body input[type="date"][data-v-c1848868]:focus,
.modal-body input[type="password"][data-v-c1848868]:focus,
.modal-body select[data-v-c1848868]:focus,
.modal-body textarea[data-v-c1848868]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-c1848868],
.modal-body .form-label[data-v-c1848868] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The "how to" panel, quieted: a tinted strip with the mark in line, not a
   48px blue disc over a block of its own. The drop zone keeps its dashes but
   drops to the type size the rest of the dialogue uses. */
.import-instructions[data-v-c1848868] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #f4f9fd;
    border: 1px solid #dde3ea;
    border-left: 2px solid #0697e4;
    border-radius: 8px;
    box-shadow: none;
}
.instruction-icon[data-v-c1848868] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin: 1px 0 0;
    background: transparent;
    border-radius: 0;
    color: #0697e4;
    font-size: inherit;
    box-shadow: none;
}
.instruction-icon svg[data-v-c1848868] {
    width: 14px;
    height: 14px;
}
.instruction-text h4[data-v-c1848868],
.instruction-text strong[data-v-c1848868] {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}
.instruction-text[data-v-c1848868],
.instruction-text li[data-v-c1848868],
.instruction-text p[data-v-c1848868] {
    font-size: 11px;
    line-height: 1.5;
    color: #64748b;
}
.file-upload-area[data-v-c1848868] {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
}
.file-upload-area.drag-over[data-v-c1848868] {
    border-color: #0697e4;
    background: #f4f9fd;
}
.upload-icon[data-v-c1848868] {
    color: #94a3b8;
}
.upload-text[data-v-c1848868] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.upload-hint[data-v-c1848868] {
    font-size: 11px;
    color: #94a3b8;
}

/* The one action: the dashboard's filled button, not a 48px slab. */
.btn-large[data-v-c1848868] {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-c1848868] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-c1848868],
.modal-actions[data-v-c1848868] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-remove-file[data-v-c1848868] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-remove-file[data-v-c1848868] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #e04545;
}
.btn-remove-file[data-v-c1848868]:hover:not(:disabled) {
  background: #fff;
  border-color: #e04545;
  color: #e04545;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-c1848868]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-c1848868]:hover,
.btn-icon.btn-icon-danger[data-v-c1848868]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-c1848868] {
  transition: transform 0.15s ease;
}

.modal-overlay[data-v-00c227e0] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  overflow-y: auto;
}
.modal-container[data-v-00c227e0] {
  background: white;
  border-radius: 16px;
  width: 100%;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.bulk-import-modal[data-v-00c227e0] {
  max-width: 900px;
  margin: auto;
}
.modal-header[data-v-00c227e0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header-content[data-v-00c227e0] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.modal-header h2[data-v-00c227e0] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.modal-body[data-v-00c227e0] {
  padding: 24px;
}
.form-group[data-v-00c227e0] {
  margin-bottom: 20px;
}
.form-label[data-v-00c227e0] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-00c227e0] {
  color: #ef4444;
  margin-left: 4px;
}
.form-input[data-v-00c227e0] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  transition: all 0.2s ease;
}
.form-input[data-v-00c227e0]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.import-instructions[data-v-00c227e0] {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  margin-bottom: 24px;
}
.instruction-icon[data-v-00c227e0] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: 20px;
}
.instruction-text h4[data-v-00c227e0] {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.instruction-text ul[data-v-00c227e0] {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.instruction-text li[data-v-00c227e0] {
  margin-bottom: 4px;
}
.radio-group[data-v-00c227e0] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.radio-label[data-v-00c227e0] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.radio-label[data-v-00c227e0]:hover {
  border-color: var(--primary);
  background-color: rgba(14, 165, 233, 0.05);
}
.radio-label input[type="checkbox"][data-v-00c227e0] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
  margin-top: 2px;
}
.radio-label span[data-v-00c227e0] {
  display: block;
  line-height: 1.4;
}
.radio-label small[data-v-00c227e0] {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-secondary);
}
.file-upload-area[data-v-00c227e0] {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
  background: var(--bg-gray);
  cursor: pointer;
}
.file-upload-area[data-v-00c227e0]:hover {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.05);
}
.file-upload-area.drag-over[data-v-00c227e0] {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.1);
  transform: scale(1.02);
}
.upload-prompt[data-v-00c227e0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.upload-icon[data-v-00c227e0] {
  font-size: 48px;
  color: #10b981;
  margin-bottom: 8px;
}
.upload-text[data-v-00c227e0] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.upload-hint[data-v-00c227e0] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.file-selected[data-v-00c227e0] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  text-align: left;
  cursor: default;
}
.file-icon[data-v-00c227e0] {
  font-size: 36px;
  color: #10b981;
  flex-shrink: 0;
}
.file-info[data-v-00c227e0] {
  flex: 1;
  min-width: 0;
}
.file-name[data-v-00c227e0] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  word-break: break-word;
}
.file-size[data-v-00c227e0] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.btn-remove-file[data-v-00c227e0] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  border: none;
  border-radius: 6px;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-remove-file[data-v-00c227e0]:hover {
  background: #fee2e2;
  transform: scale(1.1);
}
.column-mapping[data-v-00c227e0] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
  background: var(--bg-gray);
  border-radius: 10px;
  margin-bottom: 20px;
}
.mapping-row[data-v-00c227e0] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mapping-row label[data-v-00c227e0] {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.data-preview[data-v-00c227e0] {
  margin-top: 24px;
  padding: 20px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
}
.data-preview h4[data-v-00c227e0] {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-table-wrapper[data-v-00c227e0] {
  max-height: 250px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.preview-table[data-v-00c227e0] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.preview-table thead[data-v-00c227e0] {
  position: sticky;
  top: 0;
  background: var(--bg-gray);
  z-index: 1;
}
.preview-table th[data-v-00c227e0] {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.preview-table td[data-v-00c227e0] {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.preview-table tbody tr[data-v-00c227e0]:hover {
  background: #f8fafc;
}
.action-buttons[data-v-00c227e0] {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.btn-primary[data-v-00c227e0] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary[data-v-00c227e0]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-00c227e0]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary[data-v-00c227e0] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-00c227e0]:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-large[data-v-00c227e0] {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}
.btn-icon[data-v-00c227e0] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.btn-icon[data-v-00c227e0]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.error-message[data-v-00c227e0] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  color: #dc2626;
  margin-top: 16px;
  font-size: 14px;
}
.import-progress[data-v-00c227e0] {
  text-align: center;
  padding: 40px 20px;
}
.spinner[data-v-00c227e0] {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin-00c227e0 1s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin-00c227e0 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.import-result[data-v-00c227e0] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
}
.import-result.success[data-v-00c227e0] {
  background: #d1fae5;
  border-left: 4px solid #10b981;
  color: #065f46;
}
.import-result.error[data-v-00c227e0] {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #dc2626;
}
.import-result svg[data-v-00c227e0] {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 2px;
}
.result-message[data-v-00c227e0] {
  font-weight: 600;
  margin: 0 0 8px 0;
}
.result-stats[data-v-00c227e0] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.stat-chip[data-v-00c227e0] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.stat-chip.success[data-v-00c227e0] { background: #d1fae5; color: #059669;
}
.stat-chip.info[data-v-00c227e0] { background: #dbeafe; color: #0284c7;
}
.stat-chip.warning[data-v-00c227e0] { background: #fef3c7; color: #d97706;
}
.stat-chip.error[data-v-00c227e0] { background: #fecaca; color: #dc2626;
}
.error-list[data-v-00c227e0] {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
}
.error-list li[data-v-00c227e0] {
  margin-bottom: 4px;
}
@media (max-width: 640px) {
.column-mapping[data-v-00c227e0] {
    grid-template-columns: 1fr;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-00c227e0],
.modal-container[data-v-00c227e0],
.modal-content-large[data-v-00c227e0] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-00c227e0] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-00c227e0],
.modal-header h3[data-v-00c227e0],
.modal-header h4[data-v-00c227e0],
.modal-title[data-v-00c227e0] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-00c227e0] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-00c227e0] {
    padding: 12px 14px;
}
.modal-footer[data-v-00c227e0] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-00c227e0],
.btn-close[data-v-00c227e0],
.modal-close[data-v-00c227e0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-00c227e0]:hover,
.btn-close[data-v-00c227e0]:hover,
.modal-close[data-v-00c227e0]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-00c227e0],
.btn-secondary[data-v-00c227e0],
.btn-cancel[data-v-00c227e0],
.btn-cancel-edit[data-v-00c227e0],
.btn-save[data-v-00c227e0],
.btn-save-edit[data-v-00c227e0],
.btn-confirm[data-v-00c227e0],
.btn-danger[data-v-00c227e0],
.btn-success[data-v-00c227e0],
.btn-add[data-v-00c227e0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-00c227e0],
.btn-cancel[data-v-00c227e0],
.btn-cancel-edit[data-v-00c227e0] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-00c227e0]:hover:not(:disabled),
.btn-cancel[data-v-00c227e0]:hover:not(:disabled),
.btn-cancel-edit[data-v-00c227e0]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-00c227e0],
.btn-confirm[data-v-00c227e0],
.btn-save[data-v-00c227e0],
.btn-save-edit[data-v-00c227e0],
.btn-add[data-v-00c227e0] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-00c227e0]:hover:not(:disabled),
.btn-confirm[data-v-00c227e0]:hover:not(:disabled),
.btn-save[data-v-00c227e0]:hover:not(:disabled),
.btn-save-edit[data-v-00c227e0]:hover:not(:disabled),
.btn-add[data-v-00c227e0]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-00c227e0] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-00c227e0]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-00c227e0] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-00c227e0]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-00c227e0],
.modal-body input[type="number"][data-v-00c227e0],
.modal-body input[type="email"][data-v-00c227e0],
.modal-body input[type="tel"][data-v-00c227e0],
.modal-body input[type="url"][data-v-00c227e0],
.modal-body input[type="search"][data-v-00c227e0],
.modal-body input[type="date"][data-v-00c227e0],
.modal-body input[type="password"][data-v-00c227e0],
.modal-body select[data-v-00c227e0],
.modal-body textarea[data-v-00c227e0] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-00c227e0]:focus,
.modal-body input[type="number"][data-v-00c227e0]:focus,
.modal-body input[type="email"][data-v-00c227e0]:focus,
.modal-body input[type="tel"][data-v-00c227e0]:focus,
.modal-body input[type="url"][data-v-00c227e0]:focus,
.modal-body input[type="search"][data-v-00c227e0]:focus,
.modal-body input[type="date"][data-v-00c227e0]:focus,
.modal-body input[type="password"][data-v-00c227e0]:focus,
.modal-body select[data-v-00c227e0]:focus,
.modal-body textarea[data-v-00c227e0]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-00c227e0],
.modal-body .form-label[data-v-00c227e0] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* The "how to" panel, quieted: a tinted strip with the mark in line, not a
   48px blue disc over a block of its own. The drop zone keeps its dashes but
   drops to the type size the rest of the dialogue uses. */
.import-instructions[data-v-00c227e0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #f4f9fd;
    border: 1px solid #dde3ea;
    border-left: 2px solid #0697e4;
    border-radius: 8px;
    box-shadow: none;
}
.instruction-icon[data-v-00c227e0] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin: 1px 0 0;
    background: transparent;
    border-radius: 0;
    color: #0697e4;
    font-size: inherit;
    box-shadow: none;
}
.instruction-icon svg[data-v-00c227e0] {
    width: 14px;
    height: 14px;
}
.instruction-text h4[data-v-00c227e0],
.instruction-text strong[data-v-00c227e0] {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}
.instruction-text[data-v-00c227e0],
.instruction-text li[data-v-00c227e0],
.instruction-text p[data-v-00c227e0] {
    font-size: 11px;
    line-height: 1.5;
    color: #64748b;
}
.file-upload-area[data-v-00c227e0] {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
}
.file-upload-area.drag-over[data-v-00c227e0] {
    border-color: #0697e4;
    background: #f4f9fd;
}
.upload-icon[data-v-00c227e0] {
    color: #94a3b8;
}
.upload-text[data-v-00c227e0] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.upload-hint[data-v-00c227e0] {
    font-size: 11px;
    color: #94a3b8;
}

/* The one action: the dashboard's filled button, not a 48px slab. */
.btn-large[data-v-00c227e0] {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-00c227e0] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-00c227e0],
.modal-actions[data-v-00c227e0] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-remove-file[data-v-00c227e0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-remove-file[data-v-00c227e0] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #e04545;
}
.btn-remove-file[data-v-00c227e0]:hover:not(:disabled) {
  background: #fff;
  border-color: #e04545;
  color: #e04545;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-00c227e0]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-00c227e0]:hover,
.btn-icon.btn-icon-danger[data-v-00c227e0]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-00c227e0] {
  transition: transform 0.15s ease;
}

.modal-overlay[data-v-a493d80e] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-content-large[data-v-a493d80e] {
  background: white;
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-a493d80e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header-content[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.modal-header h2[data-v-a493d80e] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.tab-navigation[data-v-a493d80e] {
  display: flex;
  gap: 8px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tab-button[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-button[data-v-a493d80e]:hover {
  color: var(--text-primary);
  background: var(--bg-gray);
}
.tab-button.active[data-v-a493d80e] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.modal-body[data-v-a493d80e] {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.tab-content[data-v-a493d80e] {
  animation: fadeIn-a493d80e 0.2s ease;
}
@keyframes fadeIn-a493d80e {
from { opacity: 0;
}
to { opacity: 1;
}
}
.tab-header[data-v-a493d80e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
.tab-header h3[data-v-a493d80e] {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.header-actions[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.filter-container[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-label[data-v-a493d80e] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.search-box[data-v-a493d80e] {
  position: relative;
  flex: 0 1 300px;
  min-width: 200px;
}
.search-icon[data-v-a493d80e] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 14px;
  pointer-events: none;
}
.search-input[data-v-a493d80e] {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.search-input[data-v-a493d80e]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.search-input[data-v-a493d80e]::placeholder {
  color: var(--text-secondary);
}
.form-group[data-v-a493d80e] {
  margin-bottom: 20px;
}
.form-group label[data-v-a493d80e] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.required[data-v-a493d80e] {
  color: var(--danger);
}
.form-group input[type="text"][data-v-a493d80e],
.form-group input[type="email"][data-v-a493d80e],
.form-group input[type="tel"][data-v-a493d80e],
.form-group input[type="url"][data-v-a493d80e] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.form-group input[data-v-a493d80e]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-row[data-v-a493d80e] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkbox-label[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 12px;
  margin-bottom: 8px;
}
.checkbox-label input[type="checkbox"][data-v-a493d80e] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.checkbox-label span[data-v-a493d80e] {
  font-size: 14px;
  line-height: 18px;
  user-select: none;
  margin-left: 2px;
}
.toggle-label[data-v-a493d80e] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  width: auto;
}
.form-group-toggle[data-v-a493d80e] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.toggle-text[data-v-a493d80e] {
  font-size: 14px;
  line-height: 20px;
  user-select: none;
}
.toggle[data-v-a493d80e] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle input[data-v-a493d80e] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track[data-v-a493d80e] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 10px;
  transition: background 0.2s;
}
.toggle-track[data-v-a493d80e]::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-track[data-v-a493d80e] {
  background: var(--primary, #4f8cff);
}
.toggle input:checked + .toggle-track[data-v-a493d80e]::before {
  transform: translateX(16px);
}
.alias-names-container[data-v-a493d80e] {
  width: 100%;
}
.alias-tags[data-v-a493d80e] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  min-height: 42px;
  align-items: center;
}
.alias-tag[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
  font-weight: 500;
}
.alias-remove[data-v-a493d80e] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #3b82f6;
  font-size: 18px;
  cursor: pointer;
  border-radius: 3px;
}
.alias-remove[data-v-a493d80e]:hover {
  background: #dbeafe;
  color: #1e40af;
}
.alias-input[data-v-a493d80e] {
  flex: 1;
  min-width: 150px;
  border: none;
  outline: none;
  padding: 4px 6px;
  font-size: 14px;
}
.field-hint[data-v-a493d80e] {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.form-section-title[data-v-a493d80e] {
  margin: 32px 0 20px 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.form-section-title h4[data-v-a493d80e] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.form-section-title .section-hint[data-v-a493d80e] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.help-text[data-v-a493d80e] {
  font-size: 14px;
  color: #6b7280;
  margin-top: 8px;
}
.font-semibold[data-v-a493d80e] {
  font-weight: 600;
}
.modal-footer[data-v-a493d80e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Internal code column in the account-codes list */
.internal-column[data-v-a493d80e] { width: 130px; white-space: nowrap;
}
.internal-badge[data-v-a493d80e] {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Goods and services get their own colour: the two are told apart constantly. */
.internal-badge-s[data-v-a493d80e] { background: #e0f2fe; color: #075985;
}
.internal-badge-u[data-v-a493d80e] { background: #fef3c7; color: #92400e;
}
.internal-empty[data-v-a493d80e] { color: #d1d5db;
}

/* Payment codes tab */
.pc-intro[data-v-a493d80e] {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary, #6b7280);
  max-width: 70ch;
}
.pc-table[data-v-a493d80e] { display: flex; flex-direction: column;
}
.pc-row[data-v-a493d80e] {
  display: grid;
  grid-template-columns: 1fr 180px 120px;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.pc-row.pc-head[data-v-a493d80e] {
  border-top: none;
  padding-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #6b7280);
}
.pc-method[data-v-a493d80e] { font-size: 14px; color: var(--text-primary, #111827);
}
.pc-input[data-v-a493d80e] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.pc-input[data-v-a493d80e]:focus { outline: none; border-color: #2b82f0;
}
.pc-default[data-v-a493d80e] {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.pc-hint[data-v-a493d80e] {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, #6b7280);
  max-width: 70ch;
}
@media (max-width: 640px) {
.pc-row[data-v-a493d80e] { grid-template-columns: 1fr 120px;
}
.pc-row[data-v-a493d80e] > :nth-child(3) { display: none;
}
}
.footer-left[data-v-a493d80e],
.footer-right[data-v-a493d80e] {
  display: flex;
  gap: 12px;
}
.btn-save-as-alias[data-v-a493d80e],
.btn-add[data-v-a493d80e],
.btn-secondary[data-v-a493d80e],
.btn-primary[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-save-as-alias[data-v-a493d80e] {
  background: white;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}
.btn-save-as-alias[data-v-a493d80e]:hover {
  background: #fef3c7;
}
.btn-add[data-v-a493d80e] {
  background: var(--primary);
  border: none;
  color: white;
}
.btn-add[data-v-a493d80e]:hover {
  background: var(--primary-hover);
}
.btn-secondary[data-v-a493d80e] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-secondary[data-v-a493d80e]:hover {
  background: var(--bg-gray);
}
.btn-primary[data-v-a493d80e] {
  background: var(--primary);
  border: none;
  color: white;
}
.btn-primary[data-v-a493d80e]:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary[data-v-a493d80e]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.loading-state[data-v-a493d80e],
.empty-state[data-v-a493d80e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}
.spinner[data-v-a493d80e] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-a493d80e 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-a493d80e {
to { transform: rotate(360deg);
}
}
.vendors-table[data-v-a493d80e],
.account-codes-table[data-v-a493d80e],
.code-mapping-table[data-v-a493d80e] {
  overflow-x: auto;
}
.bulk-actions[data-v-a493d80e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: transparent;
  border-left: none;
  border-radius: 8px;
  margin-bottom: 16px;
}
.selection-count[data-v-a493d80e] {
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}
.btn-danger[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-danger[data-v-a493d80e]:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.checkbox-column[data-v-a493d80e] {
  width: 40px;
  text-align: center;
}
.checkbox-column input[type="checkbox"][data-v-a493d80e] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.barcode-badge[data-v-a493d80e] {
  display: inline-block;
  padding: 4px 12px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}
.mapping-badge[data-v-a493d80e] {
  display: inline-block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 400;
}
.text-muted[data-v-a493d80e] {
  color: #9ca3af;
}
table[data-v-a493d80e] {
  width: 100%;
  border-collapse: collapse;
}
thead[data-v-a493d80e] {
  background: var(--bg-gray);
}
th[data-v-a493d80e] {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
td[data-v-a493d80e] {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
th.actions-column[data-v-a493d80e] {
  width: 120px;
  min-width: 120px;
  text-align: center;
}
.sortable-header[data-v-a493d80e] {
  cursor: pointer;
  user-select: none;
}
.sortable-header[data-v-a493d80e]:hover {
  background-color: var(--bg-secondary, #f3f4f6);
}
.sort-icon[data-v-a493d80e] {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  transition: color 0.15s ease;
}
.sort-icon.active[data-v-a493d80e] {
  color: var(--primary, #4a90e2);
}
td.actions-column[data-v-a493d80e] {
  width: 120px;
  min-width: 120px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.actions-wrapper[data-v-a493d80e] {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}
.btn-icon[data-v-a493d80e] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.btn-icon[data-v-a493d80e]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-icon.btn-icon-danger[data-v-a493d80e]:hover {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* Invoice Action Buttons */
.invoice-actions[data-v-a493d80e] {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.btn-action[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-action svg[data-v-a493d80e] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.btn-view[data-v-a493d80e] {
  background: #0ea5e9;
  color: white;
}
.btn-view[data-v-a493d80e]:hover {
  background: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-export[data-v-a493d80e] {
  background: #10b981;
  color: white;
}
.btn-export[data-v-a493d80e]:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-action.btn-delete[data-v-a493d80e] {
  background: #ef4444;
  color: white;
}
.btn-action.btn-delete[data-v-a493d80e]:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Invoice Preview Modal */
.invoice-preview-modal-overlay[data-v-a493d80e] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.invoice-preview-modal[data-v-a493d80e] {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.preview-header[data-v-a493d80e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.preview-header h3[data-v-a493d80e] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.preview-actions[data-v-a493d80e] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-print[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--primary, #4a90e2);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-print[data-v-a493d80e]:hover {
  background: var(--primary-hover, #357abd);
  opacity: 0.9;
}
.btn-close[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close[data-v-a493d80e]:hover {
  background: var(--bg-gray);
  border-color: var(--text-primary);
  color: var(--text-primary);
}
.preview-content[data-v-a493d80e] {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray, #f8f8f8);
}
.preview-image[data-v-a493d80e] {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.preview-placeholder[data-v-a493d80e] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
}
@print {
  /* This @print is for fallback only - main printing happens in separate window */
body[data-v-a493d80e] {
    margin: 0;
    padding: 0;
    background: white;
}
.invoice-preview-modal-overlay[data-v-a493d80e] {
    background: white;
    width: 100%;
    height: 100%;
}
.invoice-preview-modal[data-v-a493d80e] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.preview-header[data-v-a493d80e] {
    display: none !important;
}
.preview-content[data-v-a493d80e] {
    padding: 0;
    background: white;
    height: 100%;
}
.preview-image[data-v-a493d80e] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
}
@media (max-width: 640px) {
.modal-overlay[data-v-a493d80e] {
    padding: 0;
}
.modal-content-large[data-v-a493d80e] {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
}
.modal-header[data-v-a493d80e] {
    padding: 16px;
}
.modal-header h2[data-v-a493d80e] {
    font-size: 18px;
}
.modal-body[data-v-a493d80e] {
    padding: 16px;
}
.form-row[data-v-a493d80e] {
    grid-template-columns: 1fr;
}
.tab-navigation[data-v-a493d80e] {
    overflow-x: auto;
    padding: 0 8px;
    gap: 4px;
}
.tab-button[data-v-a493d80e] {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
}
.tab-header[data-v-a493d80e] {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.header-actions[data-v-a493d80e] {
    width: 100%;
    flex-direction: column;
    gap: 8px;
}
.search-box[data-v-a493d80e] {
    flex: 1;
    width: 100%;
    max-width: 100%;
}
.btn-add[data-v-a493d80e] {
    width: 100%;
    justify-content: center;
}
.footer-left[data-v-a493d80e],
  .footer-right[data-v-a493d80e] {
    flex-direction: column;
    width: 100%;
    gap: 8px;
}
.modal-footer[data-v-a493d80e] {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid var(--border);
}
.btn-save[data-v-a493d80e],
  .btn-cancel[data-v-a493d80e],
  .btn-primary[data-v-a493d80e],
  .btn-secondary[data-v-a493d80e],
  .btn-save-as-alias[data-v-a493d80e] {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
}
.form-group label[data-v-a493d80e] {
    font-size: 13px;
}
.form-group input[data-v-a493d80e] {
    padding: 10px 12px;
    font-size: 14px;
}
}

/* Invoices Table Styles */
.invoices-table[data-v-a493d80e] {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.select-row[data-v-a493d80e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.select-all-section[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.select-all-section input[type="checkbox"][data-v-a493d80e] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.select-all-section label[data-v-a493d80e] {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.bulk-actions[data-v-a493d80e] {
  display: flex;
  gap: 8px;
}
.btn-bulk-archive[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  height: 45px;
}
.btn-bulk-archive[data-v-a493d80e]:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.btn-bulk-download[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  height: 45px;
}
.btn-bulk-download[data-v-a493d80e]:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.btn-bulk-export[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  height: 45px;
}
.btn-bulk-export[data-v-a493d80e]:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.btn-bulk-delete[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  height: 45px;
}
.btn-bulk-delete[data-v-a493d80e]:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
.table-label[data-v-a493d80e] {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.scan-count[data-v-a493d80e] {
  font-size: 14px;
  color: #64748b;
}
.date-separator[data-v-a493d80e] {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.date-separator-row[data-v-a493d80e] {
  background: #f8fafc !important;
}
.date-separator-row td[data-v-a493d80e] {
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.date-separator-row[data-v-a493d80e]:hover {
  background: #f8fafc !important;
}
.date-header[data-v-a493d80e] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.date-checkbox[data-v-a493d80e] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}
.date-label[data-v-a493d80e] {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.date-count[data-v-a493d80e] {
  font-size: 12px;
  color: #64748b;
  margin-left: 4px;
}
.invoices-table[data-v-a493d80e] {
  overflow-x: auto;
  max-width: 100%;
}
.invoices-table table[data-v-a493d80e] {
  width: 100%;
  border-collapse: collapse;
}
.invoices-table th[data-v-a493d80e],
.invoices-table td[data-v-a493d80e] {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}
.invoices-table thead[data-v-a493d80e] {
  background: #f8fafc;
}
.invoices-table th[data-v-a493d80e] {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}
.invoices-table td[data-v-a493d80e] {
  font-size: 14px;
  color: #0f172a;
}
.invoices-table tbody tr[data-v-a493d80e] {
  transition: background 0.15s ease;
}
.invoices-table tbody tr[data-v-a493d80e]:hover {
  background: #f8fafc;
}
.checkbox-column[data-v-a493d80e] {
  width: 50px;
  text-align: center;
}
.checkbox-column input[type="checkbox"][data-v-a493d80e] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.actions-column[data-v-a493d80e] {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}
.invoices-table tbody tr[data-v-a493d80e] {
  transition: background 0.15s ease;
}
.invoices-table tbody tr[data-v-a493d80e]:hover {
  background: #f8fafc;
}
.checkbox-column[data-v-a493d80e] {
  width: 50px;
  text-align: center;
}
.checkbox-column input[type="checkbox"][data-v-a493d80e] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.actions-column[data-v-a493d80e] {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.btn-icon[data-v-a493d80e] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}
.btn-icon[data-v-a493d80e]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-icon.btn-icon-danger[data-v-a493d80e]:hover {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}
.status-badge[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.status-pending[data-v-a493d80e] {
  background: #fef3c7;
  color: #92400e;
}
.status-processed[data-v-a493d80e] {
  background: #d1fae5;
  color: #065f46;
}
.status-archived[data-v-a493d80e] {
  background: #e5e7eb;
  color: #374151;
}
.status-failed[data-v-a493d80e] {
  background: #fee2e2;
  color: #991b1b;
}

/* Filter Row Styles */
.filters-row[data-v-a493d80e] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.filter-item[data-v-a493d80e] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  flex: 1;
  flex-basis: 0; /* Ensure equal distribution */
}
.filter-item label[data-v-a493d80e] {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-select[data-v-a493d80e],
.filter-input[data-v-a493d80e] {
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  transition: all 0.2s ease;
  width: 100%; /* Ensure full width */
  box-sizing: border-box; /* Include padding in width */
  max-width: 100%; /* Prevent overflow */
}
.filter-select[data-v-a493d80e]:focus,
.filter-input[data-v-a493d80e]:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.filter-select[data-v-a493d80e] {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-select option[data-v-a493d80e] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Specific width for date inputs */
#filterDateFrom[data-v-a493d80e],
#filterDateTo[data-v-a493d80e] {
  width: 151px;
  min-width: 151px;
  max-width: 151px;
}

/* Ensure date filter items maintain proper flex behavior */
.filter-item[data-v-a493d80e]:has(#filterDateFrom),
.filter-item[data-v-a493d80e]:has(#filterDateTo) {
  flex: 0 0 auto; /* Don't grow or shrink */
  flex-basis: 151px; /* Base width matches input */
}
.btn-clear-filters[data-v-a493d80e] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
  align-self: flex-start;
}
.btn-clear-filters[data-v-a493d80e]:hover {
  border-color: #ef4444;
  color: white;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-clear-filters svg[data-v-a493d80e] {
  flex-shrink: 0;
  font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 950px) {
.invoices-table[data-v-a493d80e] {
    overflow-x: visible;
}
.invoices-table table[data-v-a493d80e] {
    display: block;
}
.invoices-table thead[data-v-a493d80e] {
    display: none;
}
.invoices-table tbody[data-v-a493d80e] {
    display: block;
}
.invoices-table tbody tr[data-v-a493d80e] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.invoices-table tbody tr[data-v-a493d80e]:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.date-separator-row[data-v-a493d80e] {
    border: none !important;
    box-shadow: none !important;
    background: #f8fafc !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}
.invoices-table td[data-v-a493d80e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: none;
}
.invoices-table td[data-v-a493d80e]:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}
.invoices-table td[data-v-a493d80e]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.checkbox-column[data-v-a493d80e] {
    width: 100%;
    justify-content: flex-start;
}
.checkbox-column[data-v-a493d80e]::before {
    content: 'Select';
}
.actions-column[data-v-a493d80e] {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    padding: 12px 0 0 0;
    border-top: 1px solid #e2e8f0 !important;
}
.actions-column[data-v-a493d80e]::before {
    content: none;
}
.invoice-actions[data-v-a493d80e] {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
}
.btn-action[data-v-a493d80e] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
}
.btn-action svg[data-v-a493d80e] {
    width: 18px;
    height: 18px;
}
}
@media (max-width: 768px) {
.filters-row[data-v-a493d80e] {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}
.filter-item[data-v-a493d80e] {
    min-width: 100%;
    gap: 4px;
}
.filter-item label[data-v-a493d80e] {
    font-size: 11px;
}
.filter-select[data-v-a493d80e],
  .filter-input[data-v-a493d80e] {
    padding: 10px 12px;
    font-size: 14px;
}
#filterDateFrom[data-v-a493d80e],
  #filterDateTo[data-v-a493d80e] {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}
.filter-item[data-v-a493d80e]:has(#filterDateFrom),
  .filter-item[data-v-a493d80e]:has(#filterDateTo) {
    flex-basis: 100%;
}
.btn-clear-filters[data-v-a493d80e] {
    width: 100%;
    padding: 12px;
    justify-content: center;
}
.btn-clear-filters[data-v-a493d80e] {
    align-self: stretch;
    justify-content: center;
}
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-a493d80e],
.modal-container[data-v-a493d80e],
.modal-content-large[data-v-a493d80e] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-a493d80e] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-a493d80e],
.modal-header h3[data-v-a493d80e],
.modal-header h4[data-v-a493d80e],
.modal-title[data-v-a493d80e] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-a493d80e] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-a493d80e] {
    padding: 12px 14px;
}
.modal-footer[data-v-a493d80e] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-a493d80e],
.btn-close[data-v-a493d80e],
.modal-close[data-v-a493d80e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-a493d80e]:hover,
.btn-close[data-v-a493d80e]:hover,
.modal-close[data-v-a493d80e]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-a493d80e],
.btn-secondary[data-v-a493d80e],
.btn-cancel[data-v-a493d80e],
.btn-cancel-edit[data-v-a493d80e],
.btn-save[data-v-a493d80e],
.btn-save-edit[data-v-a493d80e],
.btn-confirm[data-v-a493d80e],
.btn-danger[data-v-a493d80e],
.btn-success[data-v-a493d80e],
.btn-add[data-v-a493d80e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-a493d80e],
.btn-cancel[data-v-a493d80e],
.btn-cancel-edit[data-v-a493d80e] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-a493d80e]:hover:not(:disabled),
.btn-cancel[data-v-a493d80e]:hover:not(:disabled),
.btn-cancel-edit[data-v-a493d80e]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-a493d80e],
.btn-confirm[data-v-a493d80e],
.btn-save[data-v-a493d80e],
.btn-save-edit[data-v-a493d80e],
.btn-add[data-v-a493d80e] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-a493d80e]:hover:not(:disabled),
.btn-confirm[data-v-a493d80e]:hover:not(:disabled),
.btn-save[data-v-a493d80e]:hover:not(:disabled),
.btn-save-edit[data-v-a493d80e]:hover:not(:disabled),
.btn-add[data-v-a493d80e]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-a493d80e] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-a493d80e]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-a493d80e] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-a493d80e]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* ── Fields at the table's scale ───────────────────────────────────────
 *
 * The dialogues were built with 16px type in 44px boxes, which next to the
 * 13px rows of the table reads as a different application. Same hairline,
 * same 8px corner, same type size as the controls on the dashboard. */
.modal-body input[type="text"][data-v-a493d80e],
.modal-body input[type="number"][data-v-a493d80e],
.modal-body input[type="email"][data-v-a493d80e],
.modal-body input[type="tel"][data-v-a493d80e],
.modal-body input[type="url"][data-v-a493d80e],
.modal-body input[type="search"][data-v-a493d80e],
.modal-body input[type="date"][data-v-a493d80e],
.modal-body input[type="password"][data-v-a493d80e],
.modal-body select[data-v-a493d80e],
.modal-body textarea[data-v-a493d80e] {
    padding: 7px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.modal-body input[type="text"][data-v-a493d80e]:focus,
.modal-body input[type="number"][data-v-a493d80e]:focus,
.modal-body input[type="email"][data-v-a493d80e]:focus,
.modal-body input[type="tel"][data-v-a493d80e]:focus,
.modal-body input[type="url"][data-v-a493d80e]:focus,
.modal-body input[type="search"][data-v-a493d80e]:focus,
.modal-body input[type="date"][data-v-a493d80e]:focus,
.modal-body input[type="password"][data-v-a493d80e]:focus,
.modal-body select[data-v-a493d80e]:focus,
.modal-body textarea[data-v-a493d80e]:focus {
    outline: none;
    border-color: #0697e4;
    box-shadow: none;
}
.modal-body label[data-v-a493d80e],
.modal-body .form-label[data-v-a493d80e] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* A field with a mark standing in it keeps the room for the mark: the
   tighter padding above would have put the text under the magnifier. */
.search-box input[data-v-a493d80e],
.search-input[data-v-a493d80e],
.modal-search-input-wrapper input[data-v-a493d80e] {
    padding-left: 30px;
}

/* The row actions inside the tables, drawn like the dashboard's: the mark in
   its own colour with nothing behind it, and the hover is a two-pixel lift.
   They were filled squares — blue, green and red — three per row. */
.btn-action[data-v-a493d80e],
.btn-action.btn-view[data-v-a493d80e],
.btn-action.btn-export[data-v-a493d80e],
.btn-action.btn-delete[data-v-a493d80e] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
}
.btn-action svg[data-v-a493d80e] {
    width: 14px;
    height: 14px;
}
.btn-action.btn-view[data-v-a493d80e] { color: #0697e4;
}
.btn-action.btn-export[data-v-a493d80e] { color: #0f9d6f;
}
.btn-action.btn-delete[data-v-a493d80e] { color: #e04545;
}
.btn-action[data-v-a493d80e]:hover,
.btn-action.btn-view[data-v-a493d80e]:hover,
.btn-action.btn-export[data-v-a493d80e]:hover,
.btn-action.btn-delete[data-v-a493d80e]:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-2px);
}

/* Outweighing the field's own padding, which is written as .search-box
   .search-input and so outranks a plain descendant rule. */
.search-box input.search-input[data-v-a493d80e],
.modal-search-input-wrapper input[data-v-a493d80e] {
    padding-left: 32px;
}

/* Every mark-on-its-own in this dialogue — the row actions, the close — is
   the dashboard's: no box, the mark in its own colour, and the hover is a
   two-pixel lift. They were grey tiles with a hairline around them. */
.btn-icon[data-v-a493d80e] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #0697e4;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-icon svg[data-v-a493d80e] {
    width: 14px;
    height: 14px;
}
.btn-icon.btn-icon-danger[data-v-a493d80e] {
    color: #e04545;
}
.btn-icon[data-v-a493d80e]:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-2px);
}
.modal-header .btn-icon[data-v-a493d80e] {
    color: #64748b;
}

/* The preview sheet and the descriptions sheet, same frame as the rest. */
.invoice-preview-modal[data-v-a493d80e],
.descriptions-modal[data-v-a493d80e] {
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.preview-header[data-v-a493d80e],
.descriptions-modal-header[data-v-a493d80e] {
  padding: 12px 14px;
  border-bottom: 1px solid #dde3ea;
}
.preview-header h3[data-v-a493d80e],
.descriptions-modal-header h3[data-v-a493d80e] {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.descriptions-modal-body[data-v-a493d80e] {
  padding: 12px 14px;
}
.descriptions-modal-footer[data-v-a493d80e] {
  padding: 10px 14px;
  gap: 8px;
  border-top: 1px solid #dde3ea;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-a493d80e] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-a493d80e],
.modal-actions[data-v-a493d80e] {
    border-radius: 0 0 12px 12px;
}

/* A sortable heading and its mark on one line. The <th> is a table cell, so
   the icon followed the text onto the next line; the dashboard sets the pair
   side by side and so does this. */
.sortable-header[data-v-a493d80e] {
  white-space: nowrap;
}
.sortable-header svg[data-v-a493d80e] {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 5px;
  color: #94a3b8;
}

/* ── The tabs, and the switch ───────────────────────────────────────────
 *
 * The tabs were 14px labels in a 12/20 box with a 3px underline; at the
 * dialogue's scale that is a band as tall as its heading. And the switch was
 * a solid blue pill with a white knob — the loudest mark in a card of
 * hairlines. Both are now what the companies page settled on. */
.tab-navigation[data-v-a493d80e] {
  padding: 0 8px;
  border-bottom: 1px solid #dde3ea;
  gap: 2px;
}
.tab-button[data-v-a493d80e] {
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-button svg[data-v-a493d80e] {
  color: currentColor;
  transition: transform 0.15s ease;
}
.tab-button:hover svg[data-v-a493d80e] {
  transform: scale(1.18);
}

/* A rail with a handle on it, not a filled pill: grey to the left when off,
   blue to the right when on. */
.toggle[data-v-a493d80e] {
  width: 30px;
  height: 17px;
}
.toggle-track[data-v-a493d80e] {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: none;
}
.toggle-track[data-v-a493d80e]::before {
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 2.5px;
  top: 50%;
  margin-top: -4.5px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.toggle input:checked + .toggle-track[data-v-a493d80e] {
  background: transparent;
  border-color: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-a493d80e]::before {
  background: var(--primary);
  transform: translateX(13px);
}
.toggle:hover .toggle-track[data-v-a493d80e] {
  border-color: var(--primary);
}
.toggle-text[data-v-a493d80e],
.toggle-label[data-v-a493d80e] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* The payment-code table, at the same scale as the rest. */
.pc-row[data-v-a493d80e] {
  font-size: 12px;
}
.pc-head[data-v-a493d80e] {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.pc-input[data-v-a493d80e] {
  padding: 5px 8px;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 12px;
}
.pc-intro[data-v-a493d80e],
.pc-hint[data-v-a493d80e] {
  font-size: 11px;
  color: #64748b;
}

/* The tables inside the tabs. */
.tab-header h3[data-v-a493d80e] {
  font-size: 14px;
  font-weight: 700;
}
.vendors-table th[data-v-a493d80e],
.account-codes-table th[data-v-a493d80e] {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.vendors-table td[data-v-a493d80e],
.account-codes-table td[data-v-a493d80e] {
  font-size: 12px;
}
.select-row[data-v-a493d80e] {
  font-size: 11px;
}
.empty-state p[data-v-a493d80e] {
  font-size: 12px;
  color: #64748b;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-save-as-alias[data-v-a493d80e],
.btn-bulk-download[data-v-a493d80e],
.btn-print[data-v-a493d80e],
.btn-clear-filters[data-v-a493d80e],
.btn-bulk-delete[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-save-as-alias[data-v-a493d80e],
.btn-bulk-download[data-v-a493d80e],
.btn-print[data-v-a493d80e],
.btn-clear-filters[data-v-a493d80e] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-save-as-alias[data-v-a493d80e]:hover:not(:disabled),
.btn-bulk-download[data-v-a493d80e]:hover:not(:disabled),
.btn-print[data-v-a493d80e]:hover:not(:disabled),
.btn-clear-filters[data-v-a493d80e]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}
.btn-bulk-delete[data-v-a493d80e] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #e04545;
}
.btn-bulk-delete[data-v-a493d80e]:hover:not(:disabled) {
  background: #fff;
  border-color: #e04545;
  color: #e04545;
  box-shadow: none;
  transform: none;
}


/* The deleting mark hovers like every other mark: it turns its own colour
   and lifts, and nothing is drawn behind it. Two earlier rules in this file
   gave it a red box with a red edge — written as .btn-icon.btn-icon-danger,
   which outranks a plain .btn-icon:hover, so they are answered in kind. */
.btn-icon.btn-icon-danger[data-v-a493d80e]:hover,
.btn-icon.btn-icon-danger[data-v-a493d80e]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon[data-v-a493d80e]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-a493d80e] {
  transition: transform 0.15s ease;
}

/* ── The switch, the chips and the hints ───────────────────────────────
 *
 * The switch was a solid blue pill with a white knob — the loudest mark in a
 * card of hairlines — and the alternative names sat in blue-on-blue chips
 * with an 18px typographic cross. All three are now what the rest of the
 * product uses: a rail with a handle, a quiet chip with a hairline, and a
 * hint one step smaller than the field it explains. */
.toggle[data-v-a493d80e] {
  width: 30px;
  height: 17px;
}
.toggle-track[data-v-a493d80e] {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: none;
}
.toggle-track[data-v-a493d80e]::before,
.toggle-track[data-v-a493d80e]::after {
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 2.5px;
  right: auto;
  top: 50%;
  margin-top: -4.5px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: none;
}
.toggle-track[data-v-a493d80e]::after {
  content: none;
}
.toggle input:checked + .toggle-track[data-v-a493d80e] {
  background: transparent;
  border-color: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-a493d80e]::before {
  background: var(--primary);
  transform: translateX(13px);
}
.toggle:hover .toggle-track[data-v-a493d80e] {
  border-color: var(--primary);
}
.toggle-text[data-v-a493d80e],
.toggle-label[data-v-a493d80e] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* An alternative name on file: a quiet chip, not a blue badge. */
.alias-tag[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 8px;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.alias-remove[data-v-a493d80e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.alias-remove[data-v-a493d80e]:hover {
  background: transparent;
  color: #e04545;
  transform: translateY(-1px);
}
.alias-tags[data-v-a493d80e] {
  gap: 5px;
}
.alias-input[data-v-a493d80e] {
  font-size: 13px;
}

/* What a field means, a step below the field itself. */
.field-hint[data-v-a493d80e] {
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
}
.form-group[data-v-a493d80e] {
  margin-bottom: 10px;
}
.form-group label[data-v-a493d80e] {
  margin-bottom: 3px;
}

.companies-page[data-v-0376b144] {
  min-height: 100vh;
  background: var(--bg-gray);
  padding: 24px 20px;
}
.companies-container[data-v-0376b144] {
  max-width: 1366px;
  margin: 0 auto;
}
.page-header[data-v-0376b144] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.header-actions[data-v-0376b144] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-box[data-v-0376b144] {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon[data-v-0376b144] {
  position: absolute;
  left: 14px;
  color: var(--text-secondary);
  pointer-events: none;
}
.search-input[data-v-0376b144] {
  padding: 11px 16px 11px 44px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: white;
  width: 300px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.search-input[data-v-0376b144]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}
.search-input[data-v-0376b144]::placeholder {
  color: var(--text-light);
}
.page-title[data-v-0376b144] {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}
.page-subtitle[data-v-0376b144] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.btn-create[data-v-0376b144] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}
.btn-create svg[data-v-0376b144] {
  vertical-align: middle;
}
.btn-create[data-v-0376b144]:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}
.loading-state[data-v-0376b144],
.empty-state[data-v-0376b144] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}
.spinner[data-v-0376b144] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-0376b144 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-0376b144 {
to { transform: rotate(360deg);
}
}
.empty-state svg[data-v-0376b144] {
  margin-bottom: 24px;
}
.empty-state h3[data-v-0376b144] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.empty-state p[data-v-0376b144] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}
.btn-primary[data-v-0376b144] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}
.btn-primary svg[data-v-0376b144] {
  vertical-align: middle;
}
.btn-primary[data-v-0376b144]:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}
.companies-grid[data-v-0376b144] {
  display: grid;
  /* Four to a row, not as many as fit: at 1366px the auto-fill was choosing
     three and leaving a column of air. The minimum keeps a card from being
     squeezed narrower than a company name needs. */
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 20px;
}
@media (max-width: 1200px) {
.companies-grid[data-v-0376b144] {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}
}
@media (max-width: 900px) {
.companies-grid[data-v-0376b144] {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
}
}

/* One pixel, in both states.
 *
 * The card was framed at 2px and the hover only changed that frame's colour,
 * so a thick blue line appeared around whatever the pointer touched — the
 * heaviest thing on a page of hairlines. The line stays 1px and the hover
 * says its piece with the colour and a touch of shadow instead. */
.company-card[data-v-0376b144] {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}
.company-card[data-v-0376b144]:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
  background: white;
}
.company-card.inactive[data-v-0376b144] {
  opacity: 0.5;
  background: #f9fafb;
}
.company-card.inactive[data-v-0376b144]:hover {
  opacity: 0.7;
  background: #f3f4f6;
  border-color: #9ca3af;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.company-header[data-v-0376b144] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.company-name-wrapper[data-v-0376b144] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.company-name[data-v-0376b144] {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.inactive-label[data-v-0376b144] {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #f87171;
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.company-actions[data-v-0376b144] {
  display: flex;
  gap: 4px;
}

/* Nothing of its own: the look is set once, below, with the page's other
   quiet actions. This rule used to repaint it white with a grey mark. */
.company-actions .btn-icon[data-v-0376b144] {
  flex-shrink: 0;
}

/* The card's two actions, drawn like the dashboard's row actions: just the
 * mark, in its own colour, and no outline in either state. The border stays
 * in the box at zero visibility so the geometry does not change under the
 * pointer. Deleting keeps its own red. */
.btn-icon[data-v-0376b144] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-icon-danger[data-v-0376b144] {
  color: #e04545;
}

/* Hovering lifts the mark two pixels and leaves the background alone — the
   same gesture as the navigation's icons and the dashboard's row actions. */
.btn-icon[data-v-0376b144]:hover {
  background: transparent;
  transform: translateY(-2px);
}
.company-details[data-v-0376b144] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-row[data-v-0376b144] {
  display: flex;
  gap: 8px;
}
.detail-label[data-v-0376b144] {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 60px;
}
.detail-value[data-v-0376b144] {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}
@media (max-width: 768px) {
.companies-container[data-v-0376b144] {
    padding: 16px;
}
.page-header[data-v-0376b144] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
}
.page-title[data-v-0376b144] {
    font-size: 24px;
}
.page-subtitle[data-v-0376b144] {
    font-size: 13px;
}
.header-actions[data-v-0376b144] {
    flex-direction: column;
    gap: 10px;
}
.search-box[data-v-0376b144] {
    width: 100%;
}
.search-input[data-v-0376b144] {
    width: 100%;
}
.btn-create[data-v-0376b144] {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
}
.companies-grid[data-v-0376b144] {
    grid-template-columns: 1fr;
    gap: 12px;
}
.company-card[data-v-0376b144] {
    padding: 16px;
}

  /* The name and its two actions stay on one line.
   *
   * They were stacked here, which cost a whole row of the card to hold two
   * 28px buttons and left them floating under the name with nothing beside
   * them. Two marks fit next to any name — the name takes what is left and
   * ellipsises if it has to. */
.company-header[data-v-0376b144] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.company-name-wrapper[data-v-0376b144] {
    min-width: 0;
    flex: 1;
}
.company-name[data-v-0376b144] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-actions[data-v-0376b144] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
}

/* Settings Button
 *
 * The same quiet action the dashboard uses for swapping company and showing
 * the upload form: a hairline border, no fill, blue text, and a tint with a
 * blue edge on hover. It was a 2px frame with a shadow that lifted four
 * pixels on hover — which is a lot of movement for a link to a panel. */
.btn-settings[data-v-0376b144] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 12px;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-settings[data-v-0376b144]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* Settings Section (inline dashboard-style) */
.settings-section[data-v-0376b144] {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.settings-section-header[data-v-0376b144] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 2px solid var(--border);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.settings-section-title[data-v-0376b144] {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--primary);
}
.settings-section-title h2[data-v-0376b144] {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.btn-close-settings[data-v-0376b144] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close-settings[data-v-0376b144]:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}
.settings-section-body[data-v-0376b144] {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Settings Cards */
.settings-card[data-v-0376b144] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.settings-card.active[data-v-0376b144] {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.settings-card-left[data-v-0376b144] {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.settings-icon[data-v-0376b144] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}
.settings-icon-amber[data-v-0376b144] {
  background: #f59e0b;
}
.settings-icon-blue[data-v-0376b144] {
  background: var(--primary);
}
.settings-icon-orange[data-v-0376b144] {
  background: #f97316;
}
.settings-icon-green[data-v-0376b144] {
  background: #10b981;
}
.settings-info[data-v-0376b144] {
  flex: 1;
  min-width: 0;
}
.settings-info h3[data-v-0376b144] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.settings-info p[data-v-0376b144] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.settings-gear-btn[data-v-0376b144] {
  background: white;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary, #6b7280);
  flex-shrink: 0;
  margin-top: 4px;
}
.settings-gear-btn[data-v-0376b144]:hover {
  background: var(--primary, #4f8cff);
  color: white;
  border-color: var(--primary, #4f8cff);
}

/* Toggle Switch */
.toggle[data-v-0376b144] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.toggle input[data-v-0376b144] {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Drawn like the icon beside it: a rail with a handle on it.
 *
 * It was a solid blue pill with a white knob — the heaviest mark in a row of
 * hairline borders and thin glyphs, and the only thing on the card that
 * shouted. Now it is a 1.5px outline with a small filled handle: grey and to
 * the left when off, blue and to the right when on. The state reads from the
 * handle's side and the colour of the line, which is how the slider icon in
 * the heading reads too. */
.toggle-track[data-v-0376b144] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.toggle-track[data-v-0376b144]::before {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  left: 3px;
  top: 50%;
  margin-top: -5px;
  background: #64748b;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.toggle input:checked + .toggle-track[data-v-0376b144] {
  background: transparent;
  border-color: var(--primary);
}
.toggle input:checked + .toggle-track[data-v-0376b144]::before {
  background: var(--primary);
  transform: translateX(17px);
}
.toggle:hover .toggle-track[data-v-0376b144] {
  border-color: var(--primary);
}
.toggle input:focus-visible + .toggle-track[data-v-0376b144] {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Modal Styles */
.modal-backdrop[data-v-0376b144] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}
.modal-container[data-v-0376b144] {
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: auto;
  position: relative;
}
.modal-content[data-v-0376b144] {
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-0376b144] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}
.modal-title[data-v-0376b144] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.modal-body[data-v-0376b144] {
  padding: 24px;
}
.accounting-date-hint[data-v-0376b144] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  line-height: 1.5;
}
.clients-scope-options[data-v-0376b144] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.clients-scope-option[data-v-0376b144] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: white;
}
.clients-scope-option[data-v-0376b144]:hover {
  border-color: var(--primary);
  background: #f8fafc;
}
.clients-scope-option input[type="radio"][data-v-0376b144] {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--primary);
}
.clients-scope-label[data-v-0376b144] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.clients-scope-hint[data-v-0376b144] {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.clients-companies-list[data-v-0376b144] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px;
  background: #f9fafb;
}
.clients-company-row[data-v-0376b144] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  user-select: none;
  transition: background 0.15s ease;
}
.clients-company-row[data-v-0376b144]:hover {
  background: white;
}
.clients-company-row input[type="checkbox"][data-v-0376b144] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}
.clients-companies-empty[data-v-0376b144] {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.form-group[data-v-0376b144] {
  margin-bottom: 16px;
}
.form-group label[data-v-0376b144] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.form-control[data-v-0376b144] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s;
}
.form-control[data-v-0376b144]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.modal-footer[data-v-0376b144] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}
.btn[data-v-0376b144] {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-0376b144] {
  background: var(--primary);
  color: white;
}
.btn-primary[data-v-0376b144]:hover {
  background: #0ea5e9;
}
.btn-secondary[data-v-0376b144] {
  background: #f3f4f6;
  color: var(--text-primary);
}
.btn-secondary[data-v-0376b144]:hover {
  background: #e5e7eb;
}

/* `.btn-icon` was declared a second time down here, undoing the border and
   the colour set for it above. The one definition is the one near the cards
   it belongs to. */

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-0376b144],
.modal-container[data-v-0376b144],
.modal-content-large[data-v-0376b144] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-0376b144] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-0376b144],
.modal-header h3[data-v-0376b144],
.modal-header h4[data-v-0376b144],
.modal-title[data-v-0376b144] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-0376b144] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #4b5563;
}
.modal-body[data-v-0376b144] {
    padding: 12px 14px;
}
.modal-footer[data-v-0376b144] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-0376b144],
.btn-close[data-v-0376b144],
.modal-close[data-v-0376b144] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4b5563;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-0376b144]:hover,
.btn-close[data-v-0376b144]:hover,
.modal-close[data-v-0376b144]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-0376b144],
.btn-secondary[data-v-0376b144],
.btn-cancel[data-v-0376b144],
.btn-cancel-edit[data-v-0376b144],
.btn-save[data-v-0376b144],
.btn-save-edit[data-v-0376b144],
.btn-confirm[data-v-0376b144],
.btn-danger[data-v-0376b144],
.btn-success[data-v-0376b144],
.btn-add[data-v-0376b144] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-0376b144],
.btn-cancel[data-v-0376b144],
.btn-cancel-edit[data-v-0376b144] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-0376b144]:hover:not(:disabled),
.btn-cancel[data-v-0376b144]:hover:not(:disabled),
.btn-cancel-edit[data-v-0376b144]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-0376b144],
.btn-confirm[data-v-0376b144],
.btn-save[data-v-0376b144],
.btn-save-edit[data-v-0376b144],
.btn-add[data-v-0376b144] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-0376b144]:hover:not(:disabled),
.btn-confirm[data-v-0376b144]:hover:not(:disabled),
.btn-save[data-v-0376b144]:hover:not(:disabled),
.btn-save-edit[data-v-0376b144]:hover:not(:disabled),
.btn-add[data-v-0376b144]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-0376b144] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-0376b144]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-0376b144] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-0376b144]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The row of answers under a question — "delete these seven?" — is a footer
   like any other: a hairline above it and the two buttons at its end. */
.modal-actions[data-v-0376b144] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #dde3ea;
    background: #fff;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-0376b144] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-0376b144],
.modal-actions[data-v-0376b144] {
    border-radius: 0 0 12px 12px;
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-0376b144]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-0376b144]:hover,
.btn-icon.btn-icon-danger[data-v-0376b144]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-0376b144] {
  transition: transform 0.15s ease;
}

/* The search field, like every other field in the app: a hairline that turns
   blue. It carried a 2px edge and, on focus, a 4px halo around it — the
   heaviest outline on the page, around the quietest control. */
.search-input[data-v-0376b144] {
  height: 32px;
  padding: 0 12px 0 32px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.search-input[data-v-0376b144]:hover {
  border-color: #4b5563;
}
.search-input[data-v-0376b144]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: none;
}
.search-icon[data-v-0376b144] {
  left: 11px;
  color: #4b5563;
}
.search-icon svg[data-v-0376b144] {
  width: 13px;
  height: 13px;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-0376b144] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.vendors-page[data-v-11ca859d] {
  min-height: 100vh;
  background: var(--bg-gray);
  padding: 24px 20px;
}
.vendors-container[data-v-11ca859d] {
  max-width: 1200px;
  margin: 0 auto;
}
.page-header[data-v-11ca859d] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 20px;
}
.btn-back[data-v-11ca859d] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}
.btn-back[data-v-11ca859d]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.page-title[data-v-11ca859d] {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.page-subtitle[data-v-11ca859d] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.btn-create[data-v-11ca859d] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-create[data-v-11ca859d]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.loading-state[data-v-11ca859d],
.empty-state[data-v-11ca859d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}
.spinner[data-v-11ca859d] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-11ca859d 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-11ca859d {
to { transform: rotate(360deg);
}
}
.empty-state svg[data-v-11ca859d] {
  margin-bottom: 24px;
}
.empty-state h3[data-v-11ca859d] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.empty-state p[data-v-11ca859d] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}
.btn-primary[data-v-11ca859d] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary[data-v-11ca859d]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.vendors-list[data-v-11ca859d] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}
.vendor-card[data-v-11ca859d] {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}
.vendor-card[data-v-11ca859d]:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
  transform: translateY(-2px);
}
.vendor-header[data-v-11ca859d] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.vendor-name[data-v-11ca859d] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.btn-icon[data-v-11ca859d] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-icon[data-v-11ca859d]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.vendor-details[data-v-11ca859d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-row[data-v-11ca859d] {
  display: flex;
  gap: 8px;
}
.detail-label[data-v-11ca859d] {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 60px;
}
.detail-value[data-v-11ca859d] {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}
@media (max-width: 768px) {
.page-header[data-v-11ca859d] {
    flex-direction: column;
    align-items: flex-start;
}
.vendors-list[data-v-11ca859d] {
    grid-template-columns: 1fr;
}
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-create[data-v-11ca859d],
.btn-back[data-v-11ca859d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-create[data-v-11ca859d] {
  background: #0697e4;
  border: 1px solid #0697e4;
  color: #fff;
}
.btn-create[data-v-11ca859d]:hover:not(:disabled) {
  background: #0b84c7;
  border-color: #0b84c7;
  box-shadow: none;
  transform: none;
}
.btn-back[data-v-11ca859d] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-back[data-v-11ca859d]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-11ca859d]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-11ca859d]:hover,
.btn-icon.btn-icon-danger[data-v-11ca859d]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-11ca859d] {
  transition: transform 0.15s ease;
}

.account-codes-page[data-v-18171b66] {
  min-height: 100vh;
  background: var(--bg-gray);
  padding: 24px 20px;
}
.account-codes-container[data-v-18171b66] {
  max-width: 1200px;
  margin: 0 auto;
}
.page-header[data-v-18171b66] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 20px;
}
.btn-back[data-v-18171b66] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}
.btn-back[data-v-18171b66]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.page-title[data-v-18171b66] {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.page-subtitle[data-v-18171b66] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.header-actions[data-v-18171b66] {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.btn-secondary[data-v-18171b66] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-18171b66]:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}
.btn-create[data-v-18171b66] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-create[data-v-18171b66]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.loading-state[data-v-18171b66],
.empty-state[data-v-18171b66] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}
.spinner[data-v-18171b66] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-18171b66 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-18171b66 {
to { transform: rotate(360deg);
}
}
.empty-state svg[data-v-18171b66] {
  margin-bottom: 24px;
}
.empty-state h3[data-v-18171b66] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.empty-state p[data-v-18171b66] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}
.btn-primary[data-v-18171b66] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary[data-v-18171b66]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.account-codes-table[data-v-18171b66] {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
table[data-v-18171b66] {
  width: 100%;
  border-collapse: collapse;
}
thead[data-v-18171b66] {
  background: var(--bg-gray);
}
th[data-v-18171b66] {
  text-align: left;
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
tbody tr[data-v-18171b66] {
  border-bottom: 1px solid var(--border);
  transition: all 0.2s ease;
}
tbody tr[data-v-18171b66]:hover {
  background: var(--bg-gray);
}
tbody tr[data-v-18171b66]:last-child {
  border-bottom: none;
}
td[data-v-18171b66] {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-primary);
}
.code-cell[data-v-18171b66] {
  font-weight: 600;
  font-family: monospace;
  color: var(--primary);
}
.type-badge[data-v-18171b66] {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.type-expense[data-v-18171b66] {
  background: #fee2e2;
  color: #991b1b;
}
.type-revenue[data-v-18171b66] {
  background: #dcfce7;
  color: #166534;
}
.type-neutral[data-v-18171b66] {
  background: #f3f4f6;
  color: #374151;
}
.type-asset[data-v-18171b66] {
  background: #dbeafe;
  color: #1e40af;
}
.type-liability[data-v-18171b66] {
  background: #fef3c7;
  color: #92400e;
}
.status-badge[data-v-18171b66] {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge.active[data-v-18171b66] {
  background: var(--success-bg);
  color: var(--success-dark);
}
.status-badge.inactive[data-v-18171b66] {
  background: var(--gray-light);
  color: var(--text-secondary);
}
.btn-icon[data-v-18171b66] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-icon[data-v-18171b66]:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 768px) {
.page-header[data-v-18171b66] {
    flex-direction: column;
    align-items: flex-start;
}
.account-codes-table[data-v-18171b66] {
    overflow-x: auto;
}
table[data-v-18171b66] {
    min-width: 600px;
}
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-create[data-v-18171b66],
.btn-back[data-v-18171b66] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-create[data-v-18171b66] {
  background: #0697e4;
  border: 1px solid #0697e4;
  color: #fff;
}
.btn-create[data-v-18171b66]:hover:not(:disabled) {
  background: #0b84c7;
  border-color: #0b84c7;
  box-shadow: none;
  transform: none;
}
.btn-back[data-v-18171b66] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-back[data-v-18171b66]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-18171b66]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-18171b66]:hover,
.btn-icon.btn-icon-danger[data-v-18171b66]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-18171b66] {
  transition: transform 0.15s ease;
}

/* Animations */
@keyframes slide-up-8eb569d1 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes fade-in-8eb569d1 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.animate-slide-up[data-v-8eb569d1] {
  animation: slide-up-8eb569d1 0.4s ease-out forwards;
}
.animate-fade-in[data-v-8eb569d1] {
  animation: fade-in-8eb569d1 0.5s ease-out;
}

/* Utility Classes */
.grid[data-v-8eb569d1] { display: grid;
}
.grid-cols-1[data-v-8eb569d1] { grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-3[data-v-8eb569d1] { gap: 0.75rem;
}
.gap-4[data-v-8eb569d1] { gap: 1rem;
}
.mb-1[data-v-8eb569d1] { margin-bottom: 0.25rem;
}
.mb-4[data-v-8eb569d1] { margin-bottom: 1rem;
}
.mb-6[data-v-8eb569d1] { margin-bottom: 1.5rem;
}
.mb-8[data-v-8eb569d1] { margin-bottom: 2rem;
}
.p-5[data-v-8eb569d1] { padding: 1.25rem;
}
.py-16[data-v-8eb569d1] { padding-top: 4rem; padding-bottom: 4rem;
}
.w-5[data-v-8eb569d1] { width: 1.25rem;
}
.h-5[data-v-8eb569d1] { height: 1.25rem;
}
.w-10[data-v-8eb569d1] { width: 2.5rem;
}
.h-10[data-v-8eb569d1] { height: 2.5rem;
}
.w-20[data-v-8eb569d1] { width: 5rem;
}
.h-20[data-v-8eb569d1] { height: 5rem;
}
.rounded-lg[data-v-8eb569d1] { border-radius: 0.5rem;
}
.rounded-xl[data-v-8eb569d1] { border-radius: 0.75rem;
}
.rounded-full[data-v-8eb569d1] { border-radius: 9999px;
}
.text-xs[data-v-8eb569d1] { font-size: 0.75rem; line-height: 1rem;
}
.text-sm[data-v-8eb569d1] { font-size: 0.875rem; line-height: 1.25rem;
}
.text-lg[data-v-8eb569d1] { font-size: 1.125rem; line-height: 1.75rem;
}
.text-2xl[data-v-8eb569d1] { font-size: 1.5rem; line-height: 2rem;
}
.font-bold[data-v-8eb569d1] { font-weight: 700;
}
.font-semibold[data-v-8eb569d1] { font-weight: 600;
}
.font-medium[data-v-8eb569d1] { font-weight: 500;
}
.font-mono[data-v-8eb569d1] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.flex[data-v-8eb569d1] { display: flex;
}
.flex-col[data-v-8eb569d1] { flex-direction: column;
}
.items-center[data-v-8eb569d1] { align-items: center;
}
.justify-center[data-v-8eb569d1] { justify-content: center;
}
.bg-card[data-v-8eb569d1] { background-color: white;
}
.bg-accent[data-v-8eb569d1] { background-color: #f1f5f9;
}
.bg-muted[data-v-8eb569d1] { background-color: #f1f5f9;
}
.bg-status-paid\/15[data-v-8eb569d1] { background-color: rgba(16, 185, 129, 0.15);
}
.text-accent-foreground[data-v-8eb569d1] { color: #64748b;
}
.text-muted-foreground[data-v-8eb569d1] { color: #64748b;
}
.text-foreground[data-v-8eb569d1] { color: #0f172a;
}
.text-status-paid[data-v-8eb569d1] { color: #10b981;
}
.text-primary-foreground[data-v-8eb569d1] { color: white;
}
.gradient-primary[data-v-8eb569d1] { background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
}
.invoice-shadow[data-v-8eb569d1] { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.md\:grid-cols-3[data-v-8eb569d1] { grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

/* Original Styles */
.manual-invoice-page[data-v-8eb569d1] {
  min-height: 100vh;
  background: var(--bg-gray);
  padding: 24px 0;
}
.page-container[data-v-8eb569d1] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Stats Cards Animations */
@keyframes slide-up-8eb569d1 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes fade-in-8eb569d1 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.animate-slide-up[data-v-8eb569d1] {
  animation: slide-up-8eb569d1 0.4s ease-out forwards;
}
.animate-fade-in[data-v-8eb569d1] {
  animation: fade-in-8eb569d1 0.5s ease-out forwards;
}

/* Card Styles */
.bg-card[data-v-8eb569d1] {
  background: white;
}
.invoice-shadow[data-v-8eb569d1] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.bg-accent[data-v-8eb569d1] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.text-accent-foreground[data-v-8eb569d1] {
  color: white;
}
.text-muted-foreground[data-v-8eb569d1] {
  color: #64748b;
}
.text-foreground[data-v-8eb569d1] {
  color: #1e293b;
}
.bg-status-paid\/15[data-v-8eb569d1] {
  background: rgba(34, 197, 94, 0.15);
}
.text-status-paid[data-v-8eb569d1] {
  color: #22c55e;
}
.gradient-primary[data-v-8eb569d1] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.text-primary-foreground[data-v-8eb569d1] {
  color: white;
}

/* Button Styles */
.btn-new-invoice[data-v-8eb569d1] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.btn-new-invoice[data-v-8eb569d1]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-create-first[data-v-8eb569d1] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.btn-create-first[data-v-8eb569d1]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Invoice Table */
.invoices-table[data-v-8eb569d1] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scan-row[data-v-8eb569d1] {
  display: grid;
  grid-template-columns: 40px 140px 80px 100px 1fr 240px;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.scan-row[data-v-8eb569d1]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.scan-checkbox[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-input[data-v-8eb569d1] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.scan-status[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.status-completed[data-v-8eb569d1] {
  background: #dcfce7;
  color: #166534;
}
.scan-time[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-dark);
}
.scan-thumbnail[data-v-8eb569d1] {
  width: 80px;
  height: 100px;
  background: var(--bg-gray);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumbnail-img[data-v-8eb569d1] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scan-info[data-v-8eb569d1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invoice-header[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.invoice-type[data-v-8eb569d1] {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.invoice-number[data-v-8eb569d1] {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.invoice-details[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-dark);
}
.company-text[data-v-8eb569d1] {
  font-weight: 500;
}
.invoice-amount[data-v-8eb569d1] {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.amount-value[data-v-8eb569d1] {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.amount-currency[data-v-8eb569d1] {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-dark);
}
.invoice-date[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-dark);
}
.invoice-type-selector[data-v-8eb569d1] {
  margin-top: 4px;
}
.type-select[data-v-8eb569d1] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.type-select[data-v-8eb569d1]:hover {
  border-color: #cbd5e1;
}
.type-select[data-v-8eb569d1]:focus {
  outline: none;
  border-color: var(--primary);
}
.scan-actions[data-v-8eb569d1] {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.btn-action[data-v-8eb569d1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-action svg[data-v-8eb569d1] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.btn-view[data-v-8eb569d1] {
  background: #0ea5e9;
  color: white;
}
.btn-view[data-v-8eb569d1]:hover {
  background: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-export[data-v-8eb569d1] {
  background: #10b981;
  color: white;
}
.btn-export[data-v-8eb569d1]:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-action.btn-delete[data-v-8eb569d1] {
  background: #ef4444;
  color: white;
}
.btn-action.btn-delete[data-v-8eb569d1]:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Modal Styles */
.modal-overlay[data-v-8eb569d1] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}
.modal-container[data-v-8eb569d1] {
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.modal-content[data-v-8eb569d1] {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modal-appear-8eb569d1 0.3s ease-out;
}
@keyframes modal-appear-8eb569d1 {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.modal-header[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title[data-v-8eb569d1] {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.btn-close-modal[data-v-8eb569d1] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--gray-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-close-modal[data-v-8eb569d1]:hover {
  background: var(--bg-gray);
  color: var(--text-primary);
}
.modal-body[data-v-8eb569d1] {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Invoice Form Styles */
.invoice-form[data-v-8eb569d1] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-section[data-v-8eb569d1] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-title[data-v-8eb569d1] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-header-with-button[data-v-8eb569d1] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-row[data-v-8eb569d1] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field[data-v-8eb569d1] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label[data-v-8eb569d1] {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}
.form-field input[data-v-8eb569d1],
.form-field select[data-v-8eb569d1],
.form-field textarea[data-v-8eb569d1] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  transition: border-color 0.2s ease;
}
.form-field input[data-v-8eb569d1]:focus,
.form-field select[data-v-8eb569d1]:focus,
.form-field textarea[data-v-8eb569d1]:focus {
  outline: none;
  border-color: #3b82f6;
}
.form-field textarea[data-v-8eb569d1] {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.upload-box[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload-btn[data-v-8eb569d1] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload-btn[data-v-8eb569d1]:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.upload-hint[data-v-8eb569d1] {
  font-size: 12px;
  color: #94a3b8;
}

/* Items Table */
.items-table[data-v-8eb569d1] {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.table-header[data-v-8eb569d1] {
  display: grid;
  grid-template-columns: 2fr 80px 120px 100px 40px;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}
.table-row[data-v-8eb569d1] {
  display: grid;
  grid-template-columns: 2fr 80px 120px 100px 40px;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
}
.table-row[data-v-8eb569d1]:last-child {
  border-bottom: none;
}
.table-row input[data-v-8eb569d1] {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
}
.table-row input[data-v-8eb569d1]:focus {
  outline: none;
  border-color: #3b82f6;
}
.col-description[data-v-8eb569d1] { grid-column: 1;
}
.col-qty[data-v-8eb569d1] { grid-column: 2; text-align: center;
}
.col-price[data-v-8eb569d1] { grid-column: 3;
}
.col-total[data-v-8eb569d1] { grid-column: 4; text-align: right; font-weight: 500;
}
.col-action[data-v-8eb569d1] { grid-column: 5; text-align: center;
}
.btn-add-item[data-v-8eb569d1] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-add-item[data-v-8eb569d1]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.btn-remove-item[data-v-8eb569d1] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.btn-remove-item[data-v-8eb569d1]:hover {
  background: #fef2f2;
  color: #ef4444;
}
.total-amount[data-v-8eb569d1] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  font-size: 16px;
}
.total-amount strong[data-v-8eb569d1] {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.section-header[data-v-8eb569d1] {
  margin: 32px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.section-header h3[data-v-8eb569d1] {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo Upload */
.logo-upload-container[data-v-8eb569d1] {
  width: 100%;
}
.logo-upload-placeholder[data-v-8eb569d1] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-gray);
  transition: all 0.2s ease;
}
.logo-upload-placeholder[data-v-8eb569d1]:hover {
  border-color: var(--primary);
  background: rgba(102, 126, 234, 0.05);
}
.btn-upload-logo[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-upload-logo[data-v-8eb569d1]:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.upload-hint[data-v-8eb569d1] {
  margin-top: 12px;
  font-size: 13px;
  color: var(--gray-dark);
}
.logo-preview[data-v-8eb569d1] {
  position: relative;
  display: inline-block;
  max-width: 300px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: white;
}
.logo-preview img[data-v-8eb569d1] {
  max-width: 100%;
  max-height: 200px;
  display: block;
  border-radius: 8px;
}
.btn-remove-logo[data-v-8eb569d1] {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: var(--danger);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-remove-logo[data-v-8eb569d1]:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* Total Input */
.total-label[data-v-8eb569d1] {
  font-weight: 700;
  color: var(--primary);
}
.total-input[data-v-8eb569d1] {
  font-weight: 700;
  font-size: 16px;
  background: var(--bg-gray);
  color: var(--primary);
}

/* Error Message */
.error-message[data-v-8eb569d1] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 14px;
  margin-bottom: 20px;
}
.required[data-v-8eb569d1] {
  color: #ef4444;
  margin-left: 2px;
}

/* Form Actions */
.form-actions[data-v-8eb569d1] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 8px;
}
.btn[data-v-8eb569d1] {
  padding: 11px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}
.btn-cancel[data-v-8eb569d1] {
  background: white;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.btn-cancel[data-v-8eb569d1]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--text-primary);
}
.btn-create[data-v-8eb569d1] {
  background: #16a34a;
  color: white;
  min-width: 140px;
}
.btn-create[data-v-8eb569d1]:hover:not(:disabled) {
  background: #15803d;
}
.btn-create[data-v-8eb569d1]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
.form-row[data-v-8eb569d1] {
    grid-template-columns: 1fr;
}
.grid[data-v-8eb569d1] {
    grid-template-columns: 1fr;
}
.form-actions[data-v-8eb569d1] {
    flex-direction: column;
}
.btn[data-v-8eb569d1] {
    width: 100%;
    justify-content: center;
}
}

/* The row actions inside the tables, drawn like the dashboard's: the mark in
   its own colour with nothing behind it, and the hover is a two-pixel lift.
   They were filled squares — blue, green and red — three per row. */
.btn-action[data-v-8eb569d1],
.btn-action.btn-view[data-v-8eb569d1],
.btn-action.btn-export[data-v-8eb569d1],
.btn-action.btn-delete[data-v-8eb569d1] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
}
.btn-action svg[data-v-8eb569d1] {
    width: 14px;
    height: 14px;
}
.btn-action.btn-view[data-v-8eb569d1] { color: #0697e4;
}
.btn-action.btn-export[data-v-8eb569d1] { color: #0f9d6f;
}
.btn-action.btn-delete[data-v-8eb569d1] { color: #e04545;
}
.btn-action[data-v-8eb569d1]:hover,
.btn-action.btn-view[data-v-8eb569d1]:hover,
.btn-action.btn-export[data-v-8eb569d1]:hover,
.btn-action.btn-delete[data-v-8eb569d1]:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-2px);
}

/* ── The dashboard's dress ─────────────────────────────────────────────
 *
 * One card, one 12px radius, hairline edges, and controls at the table's
 * scale: 13px labels in 32px boxes, one filled button and the rest quiet.
 * A dialogue is opened from the table and should read as the same product.
 *
 * Last in the file on purpose — these do not delete what the modal set for
 * itself above, they settle the frame, the heading and the buttons. */
.modal-content[data-v-8eb569d1],
.modal-container[data-v-8eb569d1],
.modal-content-large[data-v-8eb569d1] {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.modal-header[data-v-8eb569d1] {
    padding: 12px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #fff;
}
.modal-header h2[data-v-8eb569d1],
.modal-header h3[data-v-8eb569d1],
.modal-header h4[data-v-8eb569d1],
.modal-title[data-v-8eb569d1] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.modal-subtitle[data-v-8eb569d1] {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}
.modal-body[data-v-8eb569d1] {
    padding: 12px 14px;
}
.modal-footer[data-v-8eb569d1] {
    padding: 10px 14px;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dde3ea;
}

/* The close: a mark on its own, with the lift the rest of the app has. */
.modal-header .btn-icon[data-v-8eb569d1],
.btn-close[data-v-8eb569d1],
.modal-close[data-v-8eb569d1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    box-shadow: none;
    transition: all 0.15s ease;
}
.modal-header .btn-icon[data-v-8eb569d1]:hover,
.btn-close[data-v-8eb569d1]:hover,
.modal-close[data-v-8eb569d1]:hover {
    background: transparent;
    color: #0697e4;
    transform: translateY(-2px);
}

/* The buttons: the same box everywhere, filled only where something is
   being committed. */
.btn-primary[data-v-8eb569d1],
.btn-secondary[data-v-8eb569d1],
.btn-cancel[data-v-8eb569d1],
.btn-cancel-edit[data-v-8eb569d1],
.btn-save[data-v-8eb569d1],
.btn-save-edit[data-v-8eb569d1],
.btn-confirm[data-v-8eb569d1],
.btn-danger[data-v-8eb569d1],
.btn-success[data-v-8eb569d1],
.btn-add[data-v-8eb569d1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: all 0.15s ease;
}
.btn-secondary[data-v-8eb569d1],
.btn-cancel[data-v-8eb569d1],
.btn-cancel-edit[data-v-8eb569d1] {
    background: #fff;
    border: 1px solid #dde3ea;
    color: #1e293b;
}
.btn-secondary[data-v-8eb569d1]:hover:not(:disabled),
.btn-cancel[data-v-8eb569d1]:hover:not(:disabled),
.btn-cancel-edit[data-v-8eb569d1]:hover:not(:disabled) {
    background: #fff;
    border-color: #0697e4;
    color: #0697e4;
    box-shadow: none;
    transform: none;
}
.btn-primary[data-v-8eb569d1],
.btn-confirm[data-v-8eb569d1],
.btn-save[data-v-8eb569d1],
.btn-save-edit[data-v-8eb569d1],
.btn-add[data-v-8eb569d1] {
    background: #0697e4;
    border: 1px solid #0697e4;
    color: #fff;
}
.btn-primary[data-v-8eb569d1]:hover:not(:disabled),
.btn-confirm[data-v-8eb569d1]:hover:not(:disabled),
.btn-save[data-v-8eb569d1]:hover:not(:disabled),
.btn-save-edit[data-v-8eb569d1]:hover:not(:disabled),
.btn-add[data-v-8eb569d1]:hover:not(:disabled) {
    background: #0b84c7;
    border-color: #0b84c7;
    box-shadow: none;
    transform: none;
}
.btn-success[data-v-8eb569d1] {
    background: #10b981;
    border: 1px solid #10b981;
    color: #fff;
}
.btn-success[data-v-8eb569d1]:hover:not(:disabled) {
    background: #0ea371;
    border-color: #0ea371;
    box-shadow: none;
    transform: none;
}
.btn-danger[data-v-8eb569d1] {
    background: #e04545;
    border: 1px solid #e04545;
    color: #fff;
}
.btn-danger[data-v-8eb569d1]:hover:not(:disabled) {
    background: #c93a3a;
    border-color: #c93a3a;
    box-shadow: none;
    transform: none;
}

/* The row of answers under a question — "delete these seven?" — is a footer
   like any other: a hairline above it and the two buttons at its end. */
.modal-actions[data-v-8eb569d1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #dde3ea;
    background: #fff;
}

/* The corners.
 *
 * The card is rounded but does not clip, so the header's own white — and the
 * footer's — was painted square and stood a pixel or two outside the curve.
 * The bands carry the same radius on the side they sit on. Clipping the card
 * instead would cut off anything a dialogue drops below its edge. */
.modal-header[data-v-8eb569d1] {
    border-radius: 12px 12px 0 0;
}
.modal-footer[data-v-8eb569d1],
.modal-actions[data-v-8eb569d1] {
    border-radius: 0 0 12px 12px;
}

/* ── The rest of the buttons ───────────────────────────────────────────
 *
 * The chrome above settles the ones named primary, secondary, cancel and
 * save; these carry names of their own and so kept the old 15px-in-a-49px-box
 * shape. Same geometry as the others: a 32px box, a 13px label, 8px corner,
 * and a filled face only where something is being committed. */
.btn-new-invoice[data-v-8eb569d1],
.btn-create-first[data-v-8eb569d1],
.btn-add-item[data-v-8eb569d1],
.btn-close-modal[data-v-8eb569d1],
.btn-remove-item[data-v-8eb569d1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: all 0.15s ease;
  width: auto;
}
.btn-new-invoice[data-v-8eb569d1],
.btn-create-first[data-v-8eb569d1] {
  background: #0697e4;
  border: 1px solid #0697e4;
  color: #fff;
}
.btn-new-invoice[data-v-8eb569d1]:hover:not(:disabled),
.btn-create-first[data-v-8eb569d1]:hover:not(:disabled) {
  background: #0b84c7;
  border-color: #0b84c7;
  box-shadow: none;
  transform: none;
}
.btn-add-item[data-v-8eb569d1],
.btn-close-modal[data-v-8eb569d1] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #1e293b;
}
.btn-add-item[data-v-8eb569d1]:hover:not(:disabled),
.btn-close-modal[data-v-8eb569d1]:hover:not(:disabled) {
  background: #fff;
  border-color: #0697e4;
  color: #0697e4;
  box-shadow: none;
  transform: none;
}
.btn-remove-item[data-v-8eb569d1] {
  background: #fff;
  border: 1px solid #dde3ea;
  color: #e04545;
}
.btn-remove-item[data-v-8eb569d1]:hover:not(:disabled) {
  background: #fff;
  border-color: #e04545;
  color: #e04545;
  box-shadow: none;
  transform: none;
}


/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-8eb569d1]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-8eb569d1]:hover,
.btn-icon.btn-icon-danger[data-v-8eb569d1]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-8eb569d1] {
  transition: transform 0.15s ease;
}

/* ── One frame, not two ────────────────────────────────────────────────
 *
 * The chrome above gives a hairline, a 12px corner and a shadow to both
 * .modal-content and .modal-container — but in this dialogue the container
 * is only the box that centres the card, and in one case it is far wider
 * than the card, so its edge was drawn as a rectangle standing in the empty
 * space beside the dialogue. The card keeps the frame; the wrapper carries
 * none. */
.modal-container[data-v-8eb569d1] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.rates-page[data-v-9ff20d67] {
  min-height: 100vh;
  background: var(--bg-gray);
  padding: 24px 20px;
}
.rates-container[data-v-9ff20d67] {
  max-width: 1366px;
  margin: 0 auto;
}

/* Header */
.page-header[data-v-9ff20d67] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-title[data-v-9ff20d67] {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  letter-spacing: -0.02em;
}
.page-subtitle[data-v-9ff20d67] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.date-field[data-v-9ff20d67] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.date-label[data-v-9ff20d67] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-light);
}
.date-field input[data-v-9ff20d67] {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary);
  background: #fff;
  font-family: inherit;
}
.date-field input[data-v-9ff20d67]:focus {
  outline: none;
  border-color: #2b82f0;
  box-shadow: 0 0 0 3px rgba(43, 130, 240, 0.12);
}

/* The strip of facts above the table */
.summary-strip[data-v-9ff20d67] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.summary-tile[data-v-9ff20d67] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  /* A grid item will not shrink below its own content unless told to, and a
     sentence with no break points pushed this tile out of its track and over
     the one beside it. */
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  /* A coloured edge rather than a coloured fill: the tiles sit in a row and
     three filled blocks would read as three warnings. */
  border-left: 3px solid var(--border);
  border-radius: 10px;
}

/* 'pinned', not 'fixed': Tailwind is loaded globally and owns .fixed as
   position: fixed, which took this tile out of the flow and left the one
   before it with nowhere to sit. A modifier here has to be a word no utility
   class already claims. */
.summary-tile.pinned[data-v-9ff20d67] { border-left-color: #2b82f0;
}
.summary-tile.good[data-v-9ff20d67] { border-left-color: #10b981;
}
.summary-tile.bad[data-v-9ff20d67] { border-left-color: #ef4444;
}
.summary-tile.info[data-v-9ff20d67] { border-left-color: #cbd5e1;
}
.tile-label[data-v-9ff20d67] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-light);
}
.tile-value[data-v-9ff20d67] {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.summary-tile.bad .tile-value[data-v-9ff20d67] { color: #b91c1c;
}
.summary-tile.good .tile-value[data-v-9ff20d67] { color: #047857;
}
.tile-note[data-v-9ff20d67] {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.tile-note.warn[data-v-9ff20d67] { color: #92400e;
}
.carried-note[data-v-9ff20d67] {
  margin: 0 0 12px 0;
  padding: 9px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #92400e;
}
.era-note[data-v-9ff20d67] {
  margin: 0 0 16px 0;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #854d0e;
}

/* Table */
.rates-table[data-v-9ff20d67] {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
table[data-v-9ff20d67] {
  width: 100%;
  border-collapse: collapse;
}
thead[data-v-9ff20d67] {
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
}
th[data-v-9ff20d67] {
  text-align: left;
  padding: 10px 18px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
th.numeric[data-v-9ff20d67] { text-align: right;
}
tbody tr[data-v-9ff20d67] { border-bottom: 1px solid #eef1f4;
}
tbody tr[data-v-9ff20d67]:last-child { border-bottom: none;
}
tbody tr[data-v-9ff20d67]:hover { background: #f8fafc;
}
td[data-v-9ff20d67] {
  padding: 8px 18px;
  font-size: 13px;
  color: var(--text-primary);
}

/* Figures line up digit over digit, which is the whole point of reading a
   column of rates. */
.numeric[data-v-9ff20d67] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.numeric.strong[data-v-9ff20d67] {
  font-weight: 700;
}
.unit[data-v-9ff20d67] {
  color: var(--text-light);
  font-size: 12px;
}
.name-cell[data-v-9ff20d67] {
  color: var(--text-secondary);
}

/* The code as an outlined chip, the same shape the language control uses. */
.code-chip[data-v-9ff20d67] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 8px;
  border: 1.5px solid rgba(43, 130, 240, 0.35);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2b82f0;
}

/* The lev's row, held apart from the quoted ones by tone rather than by a
   heavier line: it belongs in the table but is not of the same kind. */
.pinned-row[data-v-9ff20d67] {
  background: #f8fbff;
}
.pinned-row[data-v-9ff20d67]:hover {
  background: #f1f7fe;
}
.fixed-tag[data-v-9ff20d67] {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(43, 130, 240, 0.1);
  color: #2b82f0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
tbody tr.disagrees[data-v-9ff20d67] { background: #fef2f2;
}
tbody tr.disagrees[data-v-9ff20d67]:hover { background: #fee2e2;
}
td.mismatch[data-v-9ff20d67] { color: #b91c1c; font-weight: 700;
}
.source-note[data-v-9ff20d67] {
  margin: 12px 0 0 0;
  font-size: 12px;
  color: var(--text-light);
}
.source-note a[data-v-9ff20d67] {
  color: #2b82f0;
  text-decoration: none;
  font-weight: 600;
}
.source-note a[data-v-9ff20d67]:hover { text-decoration: underline;
}

/* States */
.loading-state[data-v-9ff20d67],
.empty-state[data-v-9ff20d67] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.empty-state h3[data-v-9ff20d67] {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}
.empty-state p[data-v-9ff20d67] {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 420px;
}
.spinner[data-v-9ff20d67] {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top-color: #2b82f0;
  border-radius: 50%;
  animation: spin-9ff20d67 0.8s linear infinite;
}
@keyframes spin-9ff20d67 {
to { transform: rotate(360deg);
}
}
@media (max-width: 720px) {
.page-header[data-v-9ff20d67] { flex-direction: column; align-items: stretch;
}
th[data-v-9ff20d67], td[data-v-9ff20d67] { padding: 8px 12px;
}
.name-cell[data-v-9ff20d67] { display: none;
}
}

.auth-page[data-v-30cefe89] { min-height: 100vh; background: var(--bg);
}
.auth-split[data-v-30cefe89] { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}

/* form side */
.auth-form-side[data-v-30cefe89] { display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.auth-container[data-v-30cefe89], .auth-card[data-v-30cefe89] { width: 100%; max-width: 420px;
}
.auth-card[data-v-30cefe89] { background: transparent;
}
.auth-logo[data-v-30cefe89] { display: flex; justify-content: center; margin-bottom: 28px;
}
.auth-logo img[data-v-30cefe89] { height: 38px;
}
.auth-header[data-v-30cefe89] { text-align: center; margin-bottom: 30px;
}
.auth-title[data-v-30cefe89] { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px;
}
.auth-subtitle[data-v-30cefe89] { font-size: 15px; color: var(--muted); margin: 0;
}
.alert[data-v-30cefe89] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; font-weight: 500;
}
.alert-error[data-v-30cefe89] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
.alert-success[data-v-30cefe89] { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
}
.alert svg[data-v-30cefe89] { flex-shrink: 0;
}
.btn-google[data-v-30cefe89] { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; transition: all 0.2s ease; cursor: pointer;
}
.btn-google[data-v-30cefe89]:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(31,41,51,0.35);
}
.google-icon[data-v-30cefe89] { width: 20px; height: 20px;
}
.divider[data-v-30cefe89] { display: flex; align-items: center; margin: 22px 0; color: var(--muted); font-size: 14px;
}
.divider[data-v-30cefe89]::before, .divider[data-v-30cefe89]::after { content: ''; flex: 1; height: 1px; background: var(--line);
}
.divider span[data-v-30cefe89] { padding: 0 16px;
}
.auth-form[data-v-30cefe89] { display: flex; flex-direction: column; gap: 18px;
}
.form-group[data-v-30cefe89] { display: flex; flex-direction: column; gap: 7px;
}
.form-label[data-v-30cefe89] { font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.form-input[data-v-30cefe89] { width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--ink); background: #fbfbfd; transition: all 0.2s ease; font-family: inherit;
}
.form-input[data-v-30cefe89]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,130,240,0.12); background: #fff;
}
.form-input[data-v-30cefe89]:disabled { background: #f1f3f6; cursor: not-allowed;
}
.password-input-wrapper[data-v-30cefe89] { position: relative;
}
.password-toggle[data-v-30cefe89] { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 8px; display: flex; transition: color 0.2s ease;
}
.password-toggle[data-v-30cefe89]:hover { color: var(--violet);
}
.form-options[data-v-30cefe89] { display: flex; justify-content: space-between; align-items: center; margin-top: -2px;
}
.checkbox-label[data-v-30cefe89] { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer;
}
.checkbox-input[data-v-30cefe89] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--violet);
}
.forgot-link[data-v-30cefe89] { font-size: 14px; color: var(--violet); text-decoration: none; font-weight: 600;
}
.forgot-link[data-v-30cefe89]:hover { text-decoration: underline;
}
.btn-submit[data-v-30cefe89] { width: 100%; padding: 14px 24px; background: var(--violet); color: #fff; border: none; border-radius: var(--pill); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin-top: 6px; box-shadow: 0 16px 30px -16px rgba(43,130,240,0.6);
}
.btn-submit[data-v-30cefe89]:hover:not(:disabled) { background: var(--violet-hover); transform: translateY(-2px);
}
.btn-submit[data-v-30cefe89]:disabled { opacity: 0.6; cursor: not-allowed; transform: none;
}
.auth-footer[data-v-30cefe89] { margin-top: 22px; text-align: center; font-size: 14px; color: var(--muted);
}
.auth-link[data-v-30cefe89] { color: var(--violet); text-decoration: none; font-weight: 600;
}
.auth-link[data-v-30cefe89]:hover { text-decoration: underline;
}

/* brand side */
.auth-brand[data-v-30cefe89] { position: relative; background: var(--dark); color: #fff; overflow: hidden; display: flex; align-items: center;
}
.brand-glow[data-v-30cefe89] { position: absolute; left: 50%; top: 42%; width: 720px; height: 720px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(43,130,240,0.32), rgba(43,130,240,0) 62%); pointer-events: none;
}
.brand-content[data-v-30cefe89] { position: relative; z-index: 1; padding: 64px 72px; max-width: 520px;
}
.brand-logo[data-v-30cefe89] { display: flex; align-items: center; gap: 12px; margin-bottom: 40px;
}
.brand-logo-tile[data-v-30cefe89] { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.brand-logo-tile img[data-v-30cefe89] { width: 26px; height: 26px;
}
.brand-name[data-v-30cefe89] { font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}
.brand-title[data-v-30cefe89] { color: #fff; font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 16px;
}
.brand-sub[data-v-30cefe89] { font-size: 17px; color: rgba(255,255,255,0.62); line-height: 1.55; margin: 0 0 34px; max-width: 38ch;
}
.brand-points[data-v-30cefe89] { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 16px;
}
.brand-points li[data-v-30cefe89] { display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,0.92);
}
.bp-tick[data-v-30cefe89] { width: 26px; height: 26px; border-radius: 50%; background: rgba(43,130,240,0.25); color: #8fc6ff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.brand-trust[data-v-30cefe89] { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
@media (max-width: 900px) {
.auth-split[data-v-30cefe89] { grid-template-columns: 1fr;
}
.auth-brand[data-v-30cefe89] { display: none;
}
}

.auth-page[data-v-6c3751fd] { min-height: 100vh; background: var(--bg);
}
.auth-split[data-v-6c3751fd] { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}

/* form side */
.auth-form-side[data-v-6c3751fd] { display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.auth-card[data-v-6c3751fd] { width: 100%; max-width: 420px; background: transparent;
}
.auth-logo[data-v-6c3751fd] { display: flex; justify-content: center; margin-bottom: 24px;
}
.auth-logo img[data-v-6c3751fd] { height: 38px;
}
.auth-header[data-v-6c3751fd] { text-align: center; margin-bottom: 26px;
}
.auth-title[data-v-6c3751fd] { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px;
}
.auth-subtitle[data-v-6c3751fd] { font-size: 15px; color: var(--muted); margin: 0;
}
.alert[data-v-6c3751fd] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; font-weight: 500;
}
.alert-error[data-v-6c3751fd] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
.alert svg[data-v-6c3751fd] { flex-shrink: 0;
}
.btn-google[data-v-6c3751fd] { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; transition: all 0.2s ease; cursor: pointer;
}
.btn-google[data-v-6c3751fd]:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(31,41,51,0.35);
}
.google-icon[data-v-6c3751fd] { width: 20px; height: 20px;
}
.divider[data-v-6c3751fd] { display: flex; align-items: center; margin: 20px 0; color: var(--muted); font-size: 14px;
}
.divider[data-v-6c3751fd]::before, .divider[data-v-6c3751fd]::after { content: ''; flex: 1; height: 1px; background: var(--line);
}
.divider span[data-v-6c3751fd] { padding: 0 16px;
}
.auth-form[data-v-6c3751fd] { display: flex; flex-direction: column; gap: 16px;
}
.form-group[data-v-6c3751fd] { display: flex; flex-direction: column; gap: 7px;
}
.form-label[data-v-6c3751fd] { font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.form-input[data-v-6c3751fd] { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--ink); background: #fbfbfd; transition: all 0.2s ease; font-family: inherit;
}
.form-input[data-v-6c3751fd]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,130,240,0.12); background: #fff;
}
.form-input[data-v-6c3751fd]:disabled { background: #f1f3f6; cursor: not-allowed;
}
.form-hint[data-v-6c3751fd] { font-size: 12px; color: var(--muted); margin: 0;
}
.password-input-wrapper[data-v-6c3751fd] { position: relative;
}
.password-toggle[data-v-6c3751fd] { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 8px; display: flex; transition: color 0.2s ease;
}
.password-toggle[data-v-6c3751fd]:hover { color: var(--violet);
}
.checkbox-label[data-v-6c3751fd] { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--muted); cursor: pointer; line-height: 1.5;
}
.checkbox-input[data-v-6c3751fd] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--violet); margin-top: 2px; flex-shrink: 0;
}
.inline-link[data-v-6c3751fd] { color: var(--violet); text-decoration: none; font-weight: 600;
}
.inline-link[data-v-6c3751fd]:hover { text-decoration: underline;
}
.btn-submit[data-v-6c3751fd] { width: 100%; padding: 14px 24px; background: var(--violet); color: #fff; border: none; border-radius: var(--pill); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin-top: 4px; box-shadow: 0 16px 30px -16px rgba(43,130,240,0.6);
}
.btn-submit[data-v-6c3751fd]:hover:not(:disabled) { background: var(--violet-hover); transform: translateY(-2px);
}
.btn-submit[data-v-6c3751fd]:disabled { opacity: 0.6; cursor: not-allowed; transform: none;
}
.auth-footer[data-v-6c3751fd] { margin-top: 20px; text-align: center; font-size: 14px; color: var(--muted);
}
.auth-link[data-v-6c3751fd] { color: var(--violet); text-decoration: none; font-weight: 600;
}
.auth-link[data-v-6c3751fd]:hover { text-decoration: underline;
}

/* brand side */
.auth-brand[data-v-6c3751fd] { position: relative; background: var(--dark); color: #fff; overflow: hidden; display: flex; align-items: center;
}
.brand-glow[data-v-6c3751fd] { position: absolute; left: 50%; top: 42%; width: 720px; height: 720px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(43,130,240,0.32), rgba(43,130,240,0) 62%); pointer-events: none;
}
.brand-content[data-v-6c3751fd] { position: relative; z-index: 1; padding: 64px 72px; max-width: 520px;
}
.brand-logo[data-v-6c3751fd] { display: flex; align-items: center; gap: 12px; margin-bottom: 40px;
}
.brand-logo-tile[data-v-6c3751fd] { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.brand-logo-tile img[data-v-6c3751fd] { width: 26px; height: 26px;
}
.brand-name[data-v-6c3751fd] { font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}
.brand-title[data-v-6c3751fd] { color: #fff; font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 16px;
}
.brand-sub[data-v-6c3751fd] { font-size: 17px; color: rgba(255,255,255,0.62); line-height: 1.55; margin: 0 0 34px; max-width: 40ch;
}
.brand-points[data-v-6c3751fd] { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 16px;
}
.brand-points li[data-v-6c3751fd] { display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,0.92);
}
.bp-tick[data-v-6c3751fd] { width: 26px; height: 26px; border-radius: 50%; background: rgba(43,130,240,0.25); color: #8fc6ff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.brand-trust[data-v-6c3751fd] { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
@media (max-width: 900px) {
.auth-split[data-v-6c3751fd] { grid-template-columns: 1fr;
}
.auth-brand[data-v-6c3751fd] { display: none;
}
}

.auth-page[data-v-abcaceee] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  padding: 20px;
}
.auth-container[data-v-abcaceee] {
  width: 100%;
  max-width: 440px;
}
.auth-card[data-v-abcaceee] {
  background: white;
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.auth-logo[data-v-abcaceee] {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo img[data-v-abcaceee] {
  height: 40px;
}
.auth-header[data-v-abcaceee] {
  text-align: center;
  margin-bottom: 32px;
}
.auth-title[data-v-abcaceee] {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}
.auth-subtitle[data-v-abcaceee] {
  font-size: 15px;
  color: #64748b;
  margin: 0;
}
.alert[data-v-abcaceee] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
}
.alert-error[data-v-abcaceee] {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.alert-success[data-v-abcaceee] {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.alert svg[data-v-abcaceee] {
  flex-shrink: 0;
}
.auth-form[data-v-abcaceee] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group[data-v-abcaceee] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label[data-v-abcaceee] {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.form-input[data-v-abcaceee] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  color: #1e293b;
  transition: all 0.2s ease;
}
.form-input[data-v-abcaceee]:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-input[data-v-abcaceee]:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}
.btn-submit[data-v-abcaceee] {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}
.btn-submit[data-v-abcaceee]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}
.btn-submit[data-v-abcaceee]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.success-state[data-v-abcaceee] {
  text-align: center;
}
.success-icon[data-v-abcaceee] {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  border-radius: 50%;
  color: white;
  font-size: 36px;
}
.success-text[data-v-abcaceee] {
  font-size: 15px;
  color: #334155;
  line-height: 1.6;
  margin: 0 0 16px 0;
}
.success-text strong[data-v-abcaceee] {
  color: #0ea5e9;
  font-weight: 600;
}
.success-hint[data-v-abcaceee] {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}
.resend-btn[data-v-abcaceee] {
  background: none;
  border: none;
  color: #0ea5e9;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.resend-btn[data-v-abcaceee]:hover:not(:disabled) {
  color: #0284c7;
}
.resend-btn[data-v-abcaceee]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-footer[data-v-abcaceee] {
  margin-top: 24px;
  text-align: center;
}
.back-link[data-v-abcaceee] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: color 0.2s ease;
}
.back-link[data-v-abcaceee]:hover {
  color: #0284c7;
}
@media (max-width: 480px) {
.auth-card[data-v-abcaceee] {
    padding: 32px 24px;
}
.auth-title[data-v-abcaceee] {
    font-size: 24px;
}
}

.auth-page[data-v-85d66ae2] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  padding: 20px;
}
.auth-container[data-v-85d66ae2] {
  width: 100%;
  max-width: 440px;
}
.auth-card[data-v-85d66ae2] {
  background: white;
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.auth-logo[data-v-85d66ae2] {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo img[data-v-85d66ae2] {
  height: 40px;
}
.auth-header[data-v-85d66ae2] {
  text-align: center;
  margin-bottom: 32px;
}
.auth-title[data-v-85d66ae2] {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}
.auth-subtitle[data-v-85d66ae2] {
  font-size: 15px;
  color: #64748b;
  margin: 0;
}
.alert[data-v-85d66ae2] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
}
.alert-error[data-v-85d66ae2] {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.alert svg[data-v-85d66ae2] {
  flex-shrink: 0;
}
.auth-form[data-v-85d66ae2] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group[data-v-85d66ae2] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label[data-v-85d66ae2] {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.form-input[data-v-85d66ae2] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  color: #1e293b;
  transition: all 0.2s ease;
}
.form-input[data-v-85d66ae2]:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-input[data-v-85d66ae2]:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}
.form-hint[data-v-85d66ae2] {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}
.password-input-wrapper[data-v-85d66ae2] {
  position: relative;
}
.password-toggle[data-v-85d66ae2] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.password-toggle[data-v-85d66ae2]:hover {
  color: #0ea5e9;
}
.btn-submit[data-v-85d66ae2] {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}
.btn-submit[data-v-85d66ae2]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}
.btn-submit[data-v-85d66ae2]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.auth-footer[data-v-85d66ae2] {
  margin-top: 24px;
  text-align: center;
}
.back-link[data-v-85d66ae2] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: color 0.2s ease;
}
.back-link[data-v-85d66ae2]:hover {
  color: #0284c7;
}
@media (max-width: 480px) {
.auth-card[data-v-85d66ae2] {
    padding: 32px 24px;
}
.auth-title[data-v-85d66ae2] {
    font-size: 24px;
}
}

.navigation[data-v-077e51c4] {
  background: rgba(244, 243, 248, 0.8);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: none;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
}
.navigation a[data-v-077e51c4], .navigation button[data-v-077e51c4], .navigation select[data-v-077e51c4] { font-family: inherit;
}
.nav-container[data-v-077e51c4] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-left[data-v-077e51c4] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-logo[data-v-077e51c4] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.nav-logo[data-v-077e51c4]:hover {
  opacity: 0.8;
}
.logo-icon[data-v-077e51c4] {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.logo-text[data-v-077e51c4] {
  height: 20px;
  flex-shrink: 0;
}
.nav-sections[data-v-077e51c4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-center[data-v-077e51c4] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-link[data-v-077e51c4] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray);
  text-decoration: none;
  transition: all 0.2s ease;
}
.nav-link[data-v-077e51c4]:hover {
  background: var(--light-gray);
  color: var(--dark);
}
.nav-link[data-v-077e51c4] {
  border-radius: 11px;
}
.nav-link.active[data-v-077e51c4] {
  background: rgba(43, 130, 240, 0.1);
  color: #2b82f0;
  box-shadow: none;
}
.nav-link svg[data-v-077e51c4] {
  display: none;
}
.nav-right[data-v-077e51c4] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-info[data-v-077e51c4] {
  padding: 9px 8px;
  background: transparent;
}
.user-name[data-v-077e51c4] {
  font-size: 14px;
  font-weight: 600;
  color: #2b82f0;
}
.btn-icon[data-v-077e51c4] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 11px;
  color: var(--gray);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* No box behind the icon: the hover is the icon turning blue, lifting two
   pixels, and naming itself underneath. */
.btn-icon[data-v-077e51c4]:hover {
  color: #2b82f0;
  transform: translateY(-2px);
}

/* Our own tooltip in place of the browser's: the OS draws that one in its own
   grey box and no stylesheet can reach it. Same shape — a small box under the
   icon — but no border and the text in the bar's blue.
   
   It hangs below the bar rather than inside it. There are only 12px of bar
   under a 40px icon, and the nav's own z-index keeps the box above whatever
   it covers. */
.btn-icon[data-v-077e51c4]::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(31, 41, 51, 0.45);
  color: #2b82f0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.btn-icon[data-v-077e51c4]:hover::after {
  opacity: 1;
}

/* Signing out names itself in its own colour. */
button.btn-icon[data-v-077e51c4]::after {
  color: #e04545;
}
.btn-icon svg[data-v-077e51c4] {
  flex-shrink: 0;
}

/* Signing out keeps its warning colour; the gesture is the same. */
button.btn-icon[data-v-077e51c4]:hover {
  color: #e04545;
}

/* Hamburger Button
 *
 * Just the three lines: no box, no border, drawn at the same hairline weight
 * as the icons beside it. It was a bordered white square — a button around a
 * mark that is already a button. */
.hamburger-btn[data-v-077e51c4] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease;
  color: var(--dark);
}
.hamburger-btn[data-v-077e51c4]:hover {
  color: #2b82f0;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay[data-v-077e51c4] {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  /* Use an explicit viewport-based height instead of top+bottom: the nav is the
     containing block for this fixed element, so bottom:0 collapsed it to ~0px and
     nothing got dimmed. vh is relative to the viewport regardless. */
  height: calc(100vh - 60px);
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* Mobile Menu */
.mobile-menu[data-v-077e51c4] {
  display: none;
  position: fixed;
  top: 60px;
  right: 0;
  width: 256px;
  max-width: 85vw;
  height: calc(100vh - 60px);
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  /* Hide off-screen by the panel's OWN width, so it is reliably hidden even when a
     transformed ancestor changes the containing block (right: -100% was not).
     Also visibility:hidden so a scrollbar gutter can never leave an edge peeking. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  z-index: 999;
  overflow-y: auto;
}
.mobile-menu.open[data-v-077e51c4] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

/* The drawer, in the same dress as the rest of the app.
 *
 * It was a blue gradient slab with white text over a list of 16px rows — a
 * panel from a different product. Everything here is white with a hairline
 * under the name, the rows are the quiet kind the dashboard uses, and the
 * one in colour is the one that matters: the way out. */
.mobile-menu-header[data-v-077e51c4] {
  padding: 14px 16px;
  border-bottom: 1px solid #dde3ea;
  background: white;
}
.user-info-mobile[data-v-077e51c4] {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
}
.user-info-mobile .user-name[data-v-077e51c4] {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}
.mobile-menu-items[data-v-077e51c4] {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu-item[data-v-077e51c4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.mobile-menu-item[data-v-077e51c4]:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.mobile-menu-item svg[data-v-077e51c4] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: inherit;
}
.mobile-menu-item.router-link-active[data-v-077e51c4] {
  background: var(--primary-light);
  color: var(--primary);
}

/* The language row: built like a menu item, with the picker sitting at its
   right end instead of a chevron. */
.mobile-menu-language[data-v-077e51c4] {
  display: flex;
  align-items: center;
  /* The gap is what lands the label on the same 39px as the rows above:
     12px of padding, the 24px code box, and this. */
  gap: 3px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.mobile-menu-language svg[data-v-077e51c4] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.mobile-menu-language > span[data-v-077e51c4] {
  flex: 1;
}

/* The picker is drawn for the top bar, where it is a 40px icon square with
   the code centred in it. Here the code IS the row's icon, so the square and
   its padding go — otherwise the box starts 12px further in than the glyphs
   above it and drags the label with it. */
.mobile-menu-language[data-v-077e51c4] .language-selector {
  /* It carries 8px on its left for the gap in the top bar, where it follows
     the other icons. Here it is first in the row, and that 8px pushed both
     the code and the label out of the icon column. */
  margin: 0;
}
.mobile-menu-language[data-v-077e51c4] .lang-btn {
  width: 24px;
  height: 24px;
  padding: 0;
}

/* Signing out keeps its own red, and a line above it: it is not one more
   place to go. */
.logout-btn[data-v-077e51c4] {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #dde3ea;
  border-radius: 0 0 8px 8px;
  color: #e04545;
}
.logout-btn[data-v-077e51c4]:hover {
  background: #fff1f1;
  color: #e04545;
}

/* Responsive */
@media (max-width: 768px) {
.nav-container[data-v-077e51c4] {
    padding: 0 12px;
    height: 60px;
}
.nav-left[data-v-077e51c4] {
    flex: 0 0 auto;
    gap: 16px;
}
.logo-icon[data-v-077e51c4] {
    width: 28px;
    height: 28px;
}
.logo-text[data-v-077e51c4] {
    height: 18px;
}
.nav-logo[data-v-077e51c4] {
    font-size: 16px;
}
.nav-center[data-v-077e51c4] {
    flex: 1;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 12px;
}
.nav-link[data-v-077e51c4] {
    padding: 8px 12px;
    font-size: 13px;
}
.nav-right[data-v-077e51c4] {
    display: none;
}
.hamburger-btn[data-v-077e51c4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px !important;
    height: 33px !important;
    padding: 0 !important;
    font-size: 16px !important;
}
.mobile-menu-overlay[data-v-077e51c4] {
    display: block;
}
.mobile-menu[data-v-077e51c4] {
    display: block;
}
.btn-icon[data-v-077e51c4] {
    width: 36px;
    height: 36px;
}
.btn-icon svg[data-v-077e51c4] {
    width: 18px;
    height: 18px;
}
}

/* ── One hover for a mark on its own ───────────────────────────────────
 *
 * Wherever a button is just an icon — a row's edit or delete, a field's
 * helper, a dialogue's close — hovering turns the mark its own colour and
 * lifts it two pixels. Nothing is drawn behind it. Written last, and the
 * danger variant written with both of its classes, because the rules being
 * answered are themselves .btn-icon.btn-icon-danger. */
.btn-icon[data-v-077e51c4]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--primary, #0697e4);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon.btn-icon-danger[data-v-077e51c4]:hover,
.btn-icon.btn-icon-danger[data-v-077e51c4]:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: #e04545;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-icon svg[data-v-077e51c4] {
  transition: transform 0.15s ease;
}

.app-wrapper {
  min-height: 100vh;
  background: var(--bg-gray);
}
.app-content {
  min-height: 100vh;
}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}.v-toast--fade-out{animation-name:fadeOut}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:none}}.v-toast--fade-in-down{animation-name:fadeInDown}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:none}}.v-toast--fade-in-up{animation-name:fadeInUp}.fade-enter-active,.fade-leave-active{transition:opacity 150ms ease-out}.fade-enter,.fade-leave-to{opacity:0}.v-toast{position:fixed;display:flex;top:0;bottom:0;left:0;right:0;padding:2em;overflow:hidden;z-index:1090;pointer-events:none}.v-toast__item{display:inline-flex;align-items:center;animation-duration:150ms;margin:.5em 0;box-shadow:0 1px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:.25em;pointer-events:auto;opacity:.92;color:#fff;min-height:3em;cursor:pointer}.v-toast__item--success{background-color:#28a745}.v-toast__item--info{background-color:#17a2b8}.v-toast__item--warning{background-color:#ffc107}.v-toast__item--error{background-color:#dc3545}.v-toast__item--default{background-color:#343a40}.v-toast__item--warning{color:#000}.v-toast__item.v-toast__item--top,.v-toast__item.v-toast__item--bottom{align-self:center}.v-toast__item.v-toast__item--top-right,.v-toast__item.v-toast__item--bottom-right{align-self:flex-end}.v-toast__item.v-toast__item--top-left,.v-toast__item.v-toast__item--bottom-left{align-self:flex-start}.v-toast__text{margin:0;padding:.5em 1em;word-break:break-word}.v-toast__icon{display:none}.v-toast.v-toast--top{flex-direction:column}.v-toast.v-toast--bottom{flex-direction:column-reverse}.v-toast.v-toast--custom-parent{position:absolute}@media screen and (max-width: 768px){.v-toast{padding:0;position:fixed !important}}.v-toast__item{opacity:1;min-height:4em}.v-toast__item .v-toast__text{padding:1.5em 1em}.v-toast__item .v-toast__icon{display:block;width:27px;min-width:27px;height:27px;margin-left:1em;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.999 45.999'%3e %3cpath fill='%23fff' d='M39.264 6.736c-8.982-8.981-23.545-8.982-32.528 0-8.982 8.982-8.981 23.545 0 32.528 8.982 8.98 23.545 8.981 32.528 0 8.981-8.983 8.98-23.545 0-32.528zM25.999 33a3 3 0 11-6 0V21a3 3 0 116 0v12zm-3.053-17.128c-1.728 0-2.88-1.224-2.844-2.735-.036-1.584 1.116-2.771 2.879-2.771 1.764 0 2.88 1.188 2.917 2.771-.001 1.511-1.152 2.735-2.952 2.735z'/%3e %3c/svg%3e") no-repeat}[dir=rtl] .v-toast__item .v-toast__icon{margin-left:unset;margin-right:1em}.v-toast__item.v-toast__item--success .v-toast__icon{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3e %3cpath fill='%23fff' d='M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329l-16 18a1.997 1.997 0 01-2.745.233l-10-8a2 2 0 012.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 012.99 2.659z'/%3e %3c/svg%3e") no-repeat}.v-toast__item.v-toast__item--error .v-toast__icon{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51.976 51.976'%3e %3cpath fill='%23fff' d='M44.373 7.603c-10.137-10.137-26.632-10.138-36.77 0-10.138 10.138-10.137 26.632 0 36.77s26.632 10.138 36.77 0c10.137-10.138 10.137-26.633 0-36.77zm-8.132 28.638a2 2 0 01-2.828 0l-7.425-7.425-7.778 7.778a2 2 0 11-2.828-2.828l7.778-7.778-7.425-7.425a2 2 0 112.828-2.828l7.425 7.425 7.071-7.071a2 2 0 112.828 2.828l-7.071 7.071 7.425 7.425a2 2 0 010 2.828z'/%3e %3c/svg%3e") no-repeat}.v-toast__item.v-toast__item--warning .v-toast__icon{background:url("data:image/svg+xml,%3csvg viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill='%23000' d='M49.466 41.26L29.216 6.85c-.69-1.16-1.89-1.85-3.22-1.85-1.32 0-2.53.69-3.21 1.85L2.536 41.26c-.71 1.2-.72 2.64-.03 3.85.68 1.18 1.89 1.89 3.24 1.89h40.51c1.35 0 2.56-.71 3.23-1.89.7-1.21.69-2.65-.02-3.85zm-25.53-21.405h3.381v3.187l-.724 8.92H24.66l-.725-8.92v-3.187zm2.97 17.344a1.712 1.712 0 01-1.267.543c-.491 0-.914-.181-1.268-.543a1.788 1.788 0 01-.531-1.297c0-.502.176-.935.53-1.297a1.712 1.712 0 011.269-.544c.49 0 .914.181 1.268.544s.53.795.53 1.297c0 .503-.176.934-.53 1.297z'/%3e %3c/svg%3e") no-repeat}