/* ============================================================
   Vatty Main Stylesheet
   Sections: Reset · Tokens · Base · Layout · Header · Footer
             Cards · Buttons · Forms · Upload · Table · Badges
             Code · Helpers · Login Page · Responsive
============================================================ */


/* -- Reset ------------------------------------------------- */

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


/* -- Design Tokens ----------------------------------------- */

:root {
    /* Brand */
    --brand: #0a91b1;
    --brand-dark: #077a96;
    --brand-light: #d0fafe;

    /* Ink scale */
    --ink: #0D1117;
    --ink-muted: #5A6272;
    --ink-faint: #8C95A4;

    /* Surfaces */
    --surface: #FFFFFF;
    --surface-alt: #ffffff;

    /* Borders */
    --border: #E2E6EE;
    --border-strong: #C8CDD8;

    /* Semantic */
    --success: #0EA574;
    --success-bg: #E6F5F0;
    --danger: #D92D20;
    --danger-bg: #FEE4E2;
    --warning: #B54708;
    --warning-bg: #FEF0C7;

    /* Shape */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-brand: none;
}


/* -- Base -------------------------------------------------- */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--surface-alt);
    color: var(--ink);
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

h1 {
    font-size: 32px;
    font-weight: 600;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

h3 {
    font-size: 18px;
    font-weight: 500;
}

h4 {
    font-size: 15px;
    font-weight: 500;
}

p {
    color: var(--ink-muted);
    line-height: 1.65;
}


/* -- Layout ------------------------------------------------ */

.vatty-container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

.vatty-main {
    flex: 1;
    padding: 48px 0;
}

.vatty-app-shell {
    padding: 32px;
}

.vatty-page-header {
    margin-bottom: 32px;
}


/* -- Header ------------------------------------------------ */

.vatty-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
}

.vatty-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.vatty-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.vatty-logo img {
    height: 28px;
    width: auto;
}

.vatty-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vatty-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
    text-decoration: none;
}

.vatty-nav a:hover {
    color: var(--ink);
    background: var(--surface-alt);
    text-decoration: none;
}

.vatty-nav a.vatty-nav-muted {
    color: var(--ink-faint);
}

.vatty-button {
    background: var(--brand);
    color: #ffffff !important;
    padding: 9px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-brand);
    transition: background .15s;
    text-decoration: none !important;
}

.vatty-button:hover {
    background: var(--brand-dark);
    text-decoration: none !important;
}


/* -- Footer ------------------------------------------------ */

.vatty-footer {
    background: var(--surface);
    padding: 52px 0 32px;
    margin-top: auto;
}

.vatty-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
}

.vatty-footer-brand img.vatty-footer-logo {
    height: 26px;
    width: auto;
    margin-bottom: 14px;
}

.vatty-footer-brand p {
    font-size: 14px;
    color: var(--ink-muted);
    max-width: 240px;
    line-height: 1.6;
}

.vatty-footer-links {
    display: flex;
    gap: 64px;
    flex-shrink: 0;
}

.vatty-footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vatty-footer-col-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px;
}

.vatty-footer-col a {
    font-size: 14px;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color .15s;
}

.vatty-footer-col a:hover {
    color: var(--ink);
    text-decoration: none;
}

.vatty-footer-bottom {
    margin-top: 28px;
    font-size: 13px;
    color: var(--ink-faint);
}


/* -- Cards ------------------------------------------------- */

.vatty-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}

.vatty-card+.vatty-card {
    margin-top: 16px;
}


/* -- Buttons ----------------------------------------------- */

.vatty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius);
    padding: 11px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, transform .1s;
    text-decoration: none;

    /* default = primary */
    background: var(--brand);
    color: #ffffff;
    box-shadow: var(--shadow-brand);
}

.vatty-btn:hover {
    background: var(--brand-dark);
    text-decoration: none;
    color: #ffffff;
}

.vatty-btn:active {
    transform: scale(.98);
}

.vatty-btn.secondary {
    background: var(--brand-light);
    color: var(--brand-dark);
    box-shadow: none;
}

.vatty-btn.secondary:hover {
    background: #d9e9ff;
    color: var(--brand-dark);
}

.vatty-btn.ghost {
    background: transparent;
    color: var(--ink-muted);
    border: 1.5px solid var(--border);
    box-shadow: none;
}

.vatty-btn.ghost:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--ink);
}

.vatty-btn.danger {
    background: var(--danger);
    color: #fff;
}

.vatty-btn.danger:hover {
    background: #b91c1c;
}

.vatty-btn.sm {
    font-size: 13px;
    padding: 7px 16px;
}


/* -- Forms (general) --------------------------------------- */

.vatty-form {
    max-width: 420px;
    margin: 60px auto;
}

.vatty-field {
    margin-bottom: 18px;
}

.vatty-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 7px;
}

.vatty-field input,
.vatty-field select,
.vatty-field textarea,
.vatty-form input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
}

.vatty-field textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.5;
}

.vatty-field input::placeholder,
.vatty-form input::placeholder {
    color: var(--ink-faint);
}

.vatty-field input:focus,
.vatty-field select:focus,
.vatty-field textarea:focus,
.vatty-form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(11, 107, 251, .10);
}

.vatty-field-hint {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 5px;
}

.vatty-field-error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 5px;
}


/* -- Alerts ------------------------------------------------ */

.vatty-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.vatty-alert.success {
    background: var(--success-bg);
    border-color: #6ee7b7;
    color: #065f46;
}

.vatty-alert.danger {
    background: var(--danger-bg);
    border-color: #fca5a5;
    color: #991b1b;
}

.vatty-alert.warning {
    background: var(--warning-bg);
    border-color: #fcd34d;
    color: var(--warning);
}


/* -- Upload Area ------------------------------------------- */

.vatty-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.vatty-upload:hover,
.vatty-upload.dragover {
    border-color: var(--brand);
    background: var(--brand-light);
}

.vatty-upload p {
    font-size: 14px;
    color: var(--ink-muted);
    margin-top: 8px;
}


/* -- Table ------------------------------------------------- */

.vatty-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.vatty-table {
    width: 100%;
    border-collapse: collapse;
}

.vatty-table thead {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.vatty-table th {
    text-align: left;
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-faint);
    white-space: nowrap;
}

.vatty-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.vatty-table tr:last-child td {
    border-bottom: none;
}

.vatty-table tbody tr:hover td {
    background: inherit;
}


/* -- Badges ------------------------------------------------ */

.vatty-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.vatty-badge::before {
    display: none;
}

.vatty-badge.green {
    background: var(--success-bg);
    color: #065f46;
}

.vatty-badge.red {
    background: var(--danger-bg);
    color: #991b1b;
}

.vatty-badge.amber {
    background: var(--warning-bg);
    color: var(--warning);
}

.vatty-badge.blue {
    background: var(--brand-light);
    color: var(--brand-dark);
}

.vatty-badge.gray {
    background: var(--surface-alt);
    color: var(--ink-muted);
}


/* -- Code -------------------------------------------------- */

pre,
code {
    font-family: 'DM Mono', 'Fira Code', ui-monospace, monospace;
}

pre {
    background: #0d1117;
    color: #c9d1d9;
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
}

code {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: .875em;
    color: var(--ink);
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}


/* -- Grid Helpers ------------------------------------------ */

.vatty-grid {
    display: grid;
    gap: 24px;
}

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

.vatty-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.vatty-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.vatty-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


/* -- Login Page -------------------------------------------- */

.vatty-login-page {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: rgb(15, 23, 42);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vatty-login-wrap {
    width: 100%;
    max-width: 900px;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.vatty-signup-wrap {
    max-width: 900px;
}

.vatty-login-form-logo {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
}

.vatty-login-form-logo img {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.vatty-login-form-hd {
    width: 100%;
    margin-bottom: 28px;
    text-align: center;
}

.vatty-login-form-hd h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.5px;
    margin-bottom: 4px;
    color: var(--ink);
}

.vatty-login-form-hd p {
    font-size: 15px;
    color: var(--ink-muted);
}

.vatty-login-error {
    width: 100%;
    background: var(--danger-bg);
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: var(--radius);
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.vatty-login-wrap form {
    width: 100%;
}

.vatty-login-field {
    margin-bottom: 18px;
}

.vatty-login-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 7px;
}

.vatty-login-field input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
}

.vatty-login-field input::placeholder {
    color: var(--ink-faint);
}

.vatty-login-field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(11, 107, 251, .10);
}

.vatty-login-forgot {
    display: flex;
    justify-content: flex-end;
    margin-top: -8px;
    margin-bottom: 22px;
}

.vatty-login-forgot a {
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}

.vatty-login-forgot a:hover {
    text-decoration: underline;
}

.vatty-login-submit {
    width: 100%;
    height: 48px;
    background: var(--brand);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: background .15s, transform .1s;
}

.vatty-login-submit:hover {
    background: var(--brand-dark);
}

.vatty-login-submit:active {
    transform: scale(.99);
}

.vatty-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 22px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.vatty-login-divider::before,
.vatty-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.vatty-login-sso {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.vatty-login-sso:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    text-decoration: none;
    color: var(--ink);
}

.vatty-login-register-link {
    margin-top: 22px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-muted);
    width: 100%;
}

.vatty-login-register-link a {
    color: var(--brand);
    font-weight: 500;
}


/* -- Responsive -------------------------------------------- */

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

    .vatty-footer-links {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .vatty-main {
        padding: 32px 0;
    }

    .vatty-app-shell {
        padding: 20px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
    }

    .vatty-grid-2,
    .vatty-grid-3 {
        grid-template-columns: 1fr;
    }

    .vatty-grid-4 {
        grid-template-columns: 1fr;
    }

    .vatty-footer-inner {
        flex-direction: column;
        gap: 32px;
    }

    .vatty-footer-links {
        gap: 32px;
    }

    .vatty-login-wrap {
        padding: 40px 24px;
    }
}

/* -- Register Page ----------------------------------------- */

.vatty-register-wrap {
    max-width: 440px;
}

.vatty-register-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.vatty-label-optional {
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-faint);
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.vatty-input-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .10) !important;
}

.vatty-register-terms {
    margin: 4px 0 20px;
}

.vatty-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
}

.vatty-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    flex: 0 0 16px !important;
    margin-top: 2px;
    accent-color: var(--brand);
    cursor: pointer;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.vatty-checkbox-label span {
    flex: 1;
}

.vatty-checkbox-label a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

.vatty-checkbox-label a:hover {
    text-decoration: underline;
}

.vatty-terms-error .vatty-checkbox-label {
    color: var(--danger);
}

@media (max-width: 480px) {
    .vatty-register-name-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* -- Dashboard --------------------------------------------- */

.vatty-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--ink-muted);
    font-size: 15px;
    min-height: 200px;
}

.vatty-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: vatty-spin .7s linear infinite;
    flex-shrink: 0;
}

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

/* Header */

.vatty-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.vatty-dash-header h1 {
    margin-bottom: 2px;
}

.vatty-dash-header p {
    font-size: 15px;
    color: var(--ink-muted);
}

/* Summary cards */

.vatty-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.vatty-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vatty-summary-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-faint);
}

.vatty-summary-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1;
}

.vatty-summary-value--brand {
    color: var(--brand);
}

/* Section header */

.vatty-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.vatty-section-header h2 {
    margin: 0;
}

.vatty-receipt-count {
    font-size: 13px;
    color: var(--ink-faint);
    font-weight: 500;
}

/* Table overrides for dashboard */

.vatty-td-right {
    text-align: right !important;
}

.vatty-td-vat {
    font-weight: 600;
    color: var(--ink);
}

.vatty-td-supplier {
    max-width: 200px;
}

.vatty-supplier-name {
    display: block;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vatty-supplier-vat {
    display: block;
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 2px;
}

/* Confidence bar */

.vatty-confidence {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

.vatty-confidence-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.vatty-confidence-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.vatty-confidence-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    min-width: 28px;
    text-align: right;
}

/* Detail button */

.vatty-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.vatty-row-btn:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--ink);
}

.vatty-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    color: var(--ink-muted);
    transition: background .12s, color .12s;
    padding: 0;
    flex-shrink: 0;
}
.vatty-icon-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Empty state */

.vatty-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 72px 32px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink-faint);
}

.vatty-empty p {
    font-size: 15px;
    max-width: 280px;
}

/* -- Detail Drawer ----------------------------------------- */

.vatty-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 23, .4);
    z-index: 500;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity .2s ease;
}

.vatty-drawer-overlay--open {
    opacity: 1;
}

.vatty-drawer {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(32px);
    transition: transform .25s ease;
    overflow: hidden;
}

.vatty-drawer-overlay--open .vatty-drawer {
    transform: translateX(0);
}

.vatty-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.vatty-drawer-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
}

.vatty-drawer-header p {
    font-size: 13px;
    color: var(--ink-muted);
}

.vatty-drawer-close {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.vatty-drawer-close:hover {
    background: var(--surface-alt);
    color: var(--ink);
}

.vatty-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vatty-drawer-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.vatty-drawer-amount {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vatty-drawer-amount--highlight {
    border-color: var(--brand);
    background: var(--brand-light);
}

.vatty-drawer-amount-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-faint);
}

.vatty-drawer-amount-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.3px;
}

.vatty-drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.vatty-drawer-key {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.vatty-drawer-val {
    font-size: 13px;
    color: var(--ink);
    text-align: right;
}

.vatty-mono {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
}

.vatty-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.vatty-drawer-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-faint);
}

.vatty-drawer-text {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.65;
    white-space: pre-wrap;
}

/* -- Dashboard Responsive ---------------------------------- */

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

@media (max-width: 768px) {
    .vatty-dash-header {
        flex-direction: column;
        align-items: stretch;
    }

    .vatty-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vatty-drawer {
        max-width: 100%;
    }

    .vatty-drawer-amounts {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .vatty-drawer-amounts {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* -- App Shell --------------------------------------------- */

.vatty-app-shell {
    display: block;
    min-height: 100vh;
    background: #f8fafc;
}

/* -- Sidebar ----------------------------------------------- */

.vatty-app-sidebar {
    background: #0f172a;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: width .2s ease;
    width: 240px;
    z-index: 100;
}

.vatty-app-sidebar.collapsed {
    width: 64px;
}

.vatty-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.vatty-sidebar-logo-img {
    height: 22px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .9;
    transition: opacity .15s;
    flex-shrink: 0;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-logo-img {
    display: none;
}

.vatty-sidebar-collapse {
    background: rgba(255, 255, 255, .07);
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, .5);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.vatty-sidebar-collapse:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-collapse svg {
    transform: rotate(180deg);
}

.vatty-sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .25);
    padding: 14px 20px 6px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .15s;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-section-label {
    opacity: 0;
    padding: 4px 0;
    height: 0;
    overflow: hidden;
}

.vatty-app-sidebar.collapsed .vatty-app-sidebar-inner {
    padding: 2px 12px;
    align-items: center;
}

.vatty-app-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 10px;
    flex-shrink: 0;
}

.vatty-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
}

.vatty-sidebar-item svg {
    flex-shrink: 0;
}

.vatty-sidebar-item span {
    opacity: 1;
    transition: opacity .15s;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-item span {
    display: none;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-item {
    padding: 9px;
    justify-content: center;
    width: 40px;
    margin: 0 auto;
}

.vatty-sidebar-item:hover {
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.vatty-sidebar-item.active {
    background: rgba(10, 145, 177, .2);
    color: #67e8f9;
    text-decoration: none;
}

.vatty-sidebar-item.active svg {
    color: #67e8f9;
}

.vatty-app-sidebar-user {
    margin-top: auto;
    padding: 14px 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

.vatty-sidebar-avatar {
    width: 32px;
    height: 32px;
    background: rgba(10, 145, 177, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #67e8f9;
    flex-shrink: 0;
}

.vatty-sidebar-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity .15s, width .2s;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-user-info {
    opacity: 0;
    width: 0;
}

.vatty-app-sidebar-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vatty-sidebar-user-email {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, .35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vatty-app-sidebar-logout {
    background: rgba(255, 255, 255, .06);
    border: none;
    border-radius: 7px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .4);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.vatty-app-sidebar-logout:hover {
    background: rgba(217, 45, 32, .2);
    color: #fca5a5;
}

/* -- Topbar ------------------------------------------------ */

.vatty-app-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 240px;
    transition: margin-left .2s ease;
}

.vatty-app-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 52px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    z-index: 150;
    transition: left .2s ease;
}

.vatty-topbar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.vatty-topbar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
}

.vatty-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Bell button ── */
.vatty-topbar-bell {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, border-color .12s, color .12s;
}
.vatty-topbar-bell:hover { background: var(--surface-hover, #f1f5f9); color: var(--ink); }
.vatty-topbar-bell.has-unread { color: var(--brand, #0a91b1); border-color: var(--brand, #0a91b1); }

.vatty-bell-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--surface);
}

/* ── Notification panel (dropdown) ── */
.vatty-notif-panel {
    position: fixed;
    top: 56px;
    right: 16px;
    width: 380px;
    max-height: 500px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
}
.vatty-notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface-alt, #f8fafc);
}
.vatty-notif-panel-head h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.vatty-notif-panel-head button {
    font-size: 12px;
    color: var(--brand, #0a91b1);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}
.vatty-notif-panel-head button:hover { text-decoration: underline; }
.vatty-notif-list {
    overflow-y: auto;
    flex: 1;
}
.vatty-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
    color: inherit;
}
.vatty-notif-item:last-child { border-bottom: none; }
.vatty-notif-item:hover { background: var(--surface-hover, #f1f5f9); }
.vatty-notif-item.unread { background: #f0fdff; }
.vatty-notif-item.unread:hover { background: #e0f7fc; }

.vatty-notif-type-icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.vatty-notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand, #0a91b1);
    flex-shrink: 0;
    margin-top: 5px;
    margin-left: auto;
}
.vatty-notif-item.read .vatty-notif-dot { display: none; }
.vatty-notif-item-body { flex: 1; min-width: 0; }
.vatty-notif-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}
.vatty-notif-item.unread .vatty-notif-item-title { font-weight: 600; }
.vatty-notif-item-meta {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 3px;
}
.vatty-notif-empty {
    padding: 40px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.vatty-notif-panel-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    text-align: center;
    flex-shrink: 0;
    background: var(--surface-alt, #f8fafc);
}
.vatty-notif-panel-foot a {
    font-size: 13px;
    color: var(--brand, #0a91b1);
    font-weight: 500;
    text-decoration: none;
}
.vatty-notif-panel-foot a:hover { text-decoration: underline; }

/* ── Upload complete modal ── */
.vatty-upload-complete-modal {
    text-align: center;
    padding: 36px 32px 28px;
    max-width: 380px;
}
.vatty-upload-complete-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--icon-color, #0a91b1) 12%, transparent);
    color: var(--icon-color, #0a91b1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.vatty-upload-complete-modal h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
}
.vatty-upload-modal-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 24px;
    text-align: left;
}
.vatty-upload-modal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 500;
}
.vatty-upload-modal-row--ok {
    background: #f0fdf4;
    color: #166534;
}
.vatty-upload-modal-row--fail {
    background: #fef2f2;
    color: #991b1b;
}
.vatty-upload-complete-actions {
    display: flex;
    gap: 10px;
}

/* ── Sidebar notification badge ── */
.vatty-sidebar-item { position: relative; }
.vatty-sidebar-notif-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Background upload toast ── */
.vatty-bg-upload-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ink, #0f172a);
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9998;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    max-width: 320px;
    cursor: pointer;
    transition: opacity .3s;
}
.vatty-bg-upload-toast-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vatty-spin .7s linear infinite;
    flex-shrink: 0;
}
.vatty-bg-upload-toast-progress {
    font-size: 11px;
    color: rgba(255,255,255,.7);
    margin-top: 2px;
}
@keyframes vatty-spin { to { transform: rotate(360deg); } }

.vatty-topbar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 7px 14px;
    flex-shrink: 0;
}

.vatty-mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-muted);
    padding: 4px;
}

.vatty-app-inner {
    flex: 1;
    padding: 20px 24px 24px;
    padding-top: calc(52px + 20px);
}

/* -- Improved stat cards ----------------------------------- */

.vatty-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.vatty-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;

}

.vatty-summary-card:hover {
    box-shadow: var(--shadow-md);
}

.vatty-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
}

.vatty-summary-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.5px;
    line-height: 1;
}

.vatty-summary-value--brand {
    color: var(--brand);
}

/* -- Improved table ---------------------------------------- */

.vatty-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.vatty-table {
    width: 100%;
    border-collapse: collapse;
}

.vatty-table thead {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.vatty-table th {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
    text-align: left;
    white-space: nowrap;
    cursor: default;
}

.vatty-table td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.vatty-table tr:last-child td {
    border-bottom: none;
}

.vatty-table tbody tr {
    transition: background .1s;
}

.vatty-table tbody tr:hover td {
    background: #f8fafc;
}

.vatty-td-right {
    text-align: right !important;
}

.vatty-td-vat {
    font-weight: 600;
}

.vatty-supplier-name {
    display: block;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.vatty-supplier-vat {
    display: block;
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 2px;
    font-family: ui-monospace, monospace;
}

/* -- Row action button ------------------------------------- */

.vatty-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.vatty-row-btn:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--ink);
}

/* -- Upload view ------------------------------------------- */

.vatty-upload-shell {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vatty-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 52px 32px;
    text-align: center;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.vatty-upload:hover,
.vatty-upload.dragover {
    border-color: var(--brand);
    background: var(--brand-light);
}

.vatty-upload svg {
    color: var(--ink-faint);
    margin: 0 auto 12px;
}

.vatty-upload p {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.6;
}

.vatty-upload-company {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vatty-upload-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.vatty-select {
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C95A4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.vatty-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .1);
}

.vatty-upload-preview-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

.vatty-preview-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
}

#vatty-preview-img {
    max-height: 72px;
    max-width: 100px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    object-fit: cover;
}

/* -- Progress card ----------------------------------------- */

.vatty-upload-progress-card {
    max-width: 500px;
}

.vatty-upload-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.vatty-upload-progress-bar {
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}

.vatty-upload-progress-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width .4s ease;
}

.vatty-upload-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vatty-upload-steps li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 8px 36px;
    border-radius: 8px;
    background: var(--surface-alt);
    position: relative;
    font-size: 13px;
    color: var(--ink-muted);
}

.vatty-upload-steps li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 11px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
}

.vatty-upload-steps li.done {
    color: var(--ink);
    background: var(--success-bg);
}

.vatty-upload-steps li.done::before {
    background: var(--success);
    border-color: var(--success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center;
}

.vatty-upload-steps li.active::before {
    border-color: var(--brand);
    border-top-color: transparent;
    animation: vatty-spin .7s linear infinite;
}

.vatty-upload-steps li span {
    font-weight: 500;
    color: var(--ink);
}

.vatty-upload-steps li small {
    font-size: 11px;
    color: var(--ink-muted);
}

/* -- Result card ------------------------------------------- */

.vatty-result-card {
    max-width: 500px;
}

.vatty-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.vatty-result-header h3 {
    margin-bottom: 3px;
    font-size: 18px;
}

.vatty-result-header p {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0;
}

.vatty-result-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.vatty-result-amount {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* -- Decision grid ----------------------------------------- */

.vatty-decision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
}

.vatty-decision-grid>div {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vatty-decision-grid>div span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink-faint);
}

.vatty-decision-grid>div strong {
    font-size: 13px;
    color: var(--ink);
}

/* -- Dash header ------------------------------------------- */

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

.vatty-dash-header h1 {
    margin-bottom: 2px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
}

.vatty-dash-header p {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0;
}

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

.vatty-section-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.vatty-receipt-count {
    font-size: 13px;
    color: var(--ink-faint);
    font-weight: 500;
}

/* -- Empty state ------------------------------------------- */

.vatty-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 72px 32px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink-faint);
}

.vatty-empty p {
    font-size: 14px;
    max-width: 280px;
}

/* -- Companies --------------------------------------------- */

.vatty-companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* -- Confidence bar ---------------------------------------- */

.vatty-confidence {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.vatty-confidence-bar {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.vatty-confidence-fill {
    height: 100%;
    border-radius: 999px;
}

.vatty-confidence-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* -- Drawer ------------------------------------------------ */

.vatty-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 23, .45);
    z-index: 400;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity .2s ease;
    backdrop-filter: blur(2px);
}

.vatty-drawer-overlay--open {
    opacity: 1;
}

.vatty-drawer {
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(32px);
    transition: transform .25s ease;
    overflow: hidden;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .08);
}

.vatty-drawer-overlay--open .vatty-drawer {
    transform: translateX(0);
}

.vatty-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: #f8fafc;
}

.vatty-drawer-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
}

.vatty-drawer-header p {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 0;
}

.vatty-drawer-close {
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.vatty-drawer-close:hover {
    background: var(--surface-alt);
    color: var(--ink);
}

.vatty-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vatty-drawer-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.vatty-drawer-amount {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vatty-drawer-amount--highlight {
    border-color: var(--brand);
    background: var(--brand-light);
}

.vatty-drawer-amount-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
}

.vatty-drawer-amount-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.3px;
}

.vatty-drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.vatty-drawer-key {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.vatty-drawer-val {
    font-size: 13px;
    color: var(--ink);
    text-align: right;
}

.vatty-drawer-section {
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

.vatty-drawer-section:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.vatty-drawer-section-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

.vatty-drawer-text {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.65;
    white-space: pre-wrap;
}

.vatty-drawer-actions {
    padding-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Drawer form fields ── */
.vatty-drawer-field {
    margin-bottom: 16px;
}
.vatty-drawer-field:last-child { margin-bottom: 0; }

.vatty-drawer-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.vatty-required { color: #D92D20; margin-left: 2px; }

.vatty-drawer-input,
.vatty-drawer-select,
.vatty-drawer-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.vatty-drawer-input,
.vatty-drawer-select {
    height: 40px;
    padding: 0 12px;
}

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

.vatty-drawer-textarea {
    padding: 10px 12px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.vatty-drawer-input:focus,
.vatty-drawer-select:focus,
.vatty-drawer-textarea:focus {
    border-color: var(--brand, #0a91b1);
    box-shadow: 0 0 0 3px rgba(10,145,177,.1);
}

.vatty-drawer-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0 20px;
}

/* ── Drawer notice (info/warning box) ── */
.vatty-drawer-notice {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.vatty-drawer-notice-icon {
    flex-shrink: 0;
    color: var(--brand, #0a91b1);
    margin-top: 1px;
}

.vatty-drawer-notice-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px;
}

.vatty-drawer-notice-body {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.5;
}

.vatty-check-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

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

.vatty-check-row strong {
    color: var(--ink);
    font-weight: 500;
}

.vatty-check-row span {
    color: var(--ink-muted);
    text-align: right;
}

.vatty-calculation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vatty-calculation-row {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vatty-calculation-row strong {
    font-size: 12px;
    color: var(--ink);
    font-weight: 600;
}

.vatty-calculation-row code {
    font-size: 12px;
    color: var(--brand);
    font-family: ui-monospace, monospace;
    background: none;
    border: none;
    padding: 0;
}

.vatty-calculation-row small {
    font-size: 11px;
    color: var(--ink-faint);
}

.vatty-done-list ol {
    counter-reset: none;
}

.vatty-muted-small {
    font-size: 12px;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

.vatty-mono {
    font-family: ui-monospace, monospace;
}

.vatty-original-file-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    flex-wrap: wrap;
}

.vatty-original-file-card strong {
    display: block;
    font-size: 13px;
    color: var(--ink);
}

.vatty-original-file-card small {
    font-size: 11px;
    color: var(--ink-faint);
}

.vatty-original-file-actions {
    display: flex;
    gap: 8px;
}

/* -- Toast ------------------------------------------------- */

.vatty-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s;
    max-width: 360px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
}

.vatty-toast--show {
    opacity: 1;
    transform: translateY(0);
}

.vatty-toast--error {
    background: var(--danger);
}

.vatty-toast--success {
    background: var(--success);
}

/* -- Loading ----------------------------------------------- */

.vatty-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--ink-muted);
    font-size: 14px;
    min-height: 200px;
}

.vatty-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: vatty-spin .7s linear infinite;
    flex-shrink: 0;
}

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

/* -- Helpers ----------------------------------------------- */

.vatty-link {
    font-size: 13px;
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}

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

.vatty-btn-sm {
    font-size: 13px;
    padding: 7px 14px;
}

/* -- AI usage frontend ------------------------------------- */

.vatty-ai-cost,
.vatty-ai-reliability {
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* -- Homepage marketing ------------------------------------ */

.vatty-hero {
    background: linear-gradient(145deg, #0452CC 0%, var(--brand) 55%, #2E8BFF 100%);
    padding: 88px 0 72px;
}

.vatty-hero h1 {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.vatty-hero p {
    font-size: 18px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.65;
    margin-bottom: 32px;
}

.vatty-pill {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.vatty-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.vatty-btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .28);
    box-shadow: none;
}

.vatty-btn-ghost:hover {
    background: rgba(255, 255, 255, .20);
    color: #fff;
    box-shadow: none;
}

.vatty-btn-white {
    background: #fff;
    color: var(--brand);
    box-shadow: none;
}

.vatty-btn-white:hover {
    background: #f0fdfe;
    color: var(--brand-dark);
}

.vatty-hero-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 48px;
}

.vatty-hero-stat-n {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    display: block;
    letter-spacing: -.5px;
}

.vatty-hero-stat-l {
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    display: block;
    margin-top: 3px;
}

.vatty-features {
    padding: 80px 0;
}

.vatty-features>.vatty-container>h2 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin-bottom: 40px;
    max-width: 520px;
}

.vatty-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vatty-feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;

}

.vatty-feature-card:hover {
    box-shadow: var(--shadow-md);
}

.vatty-feature-icon {
    width: 44px;
    height: 44px;
    background: var(--brand-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    margin-bottom: 16px;
}

.vatty-feature-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.vatty-feature-card p {
    font-size: 14px;
    line-height: 1.6;
}

.vatty-cta {
    background: var(--brand);
    padding: 72px 0;
}

.vatty-cta-inner {
    text-align: center;
}

.vatty-cta h2 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 12px;
}

.vatty-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 28px;
}

/* -- Responsive -------------------------------------------- */

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

    .vatty-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .vatty-app-sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        transition: left .25s ease;
    }

    .vatty-app-sidebar.mobile-open {
        left: 0;
    }

    .vatty-mobile-menu-btn {
        display: flex;
    }

    .vatty-app-inner {
        padding: 20px;
    }

    .vatty-app-topbar {
        padding: 0 16px;
    }

    .vatty-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .vatty-drawer {
        max-width: 100%;
    }

    .vatty-hero h1 {
        font-size: 34px;
    }

    .vatty-features-grid {
        grid-template-columns: 1fr;
    }

    .vatty-decision-grid {
        grid-template-columns: 1fr;
    }

    .vatty-result-amounts {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .vatty-register-name-row {
        grid-template-columns: 1fr;
    }

    .vatty-drawer-amounts {
        grid-template-columns: repeat(3, 1fr);
    }

    .vatty-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- App page body reset ----------------------------------- */
body.vatty-app-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #f8fafc;
    min-height: 100vh;
    overflow-x: hidden;
}

body.vatty-app-page #wpadminbar {
    display: none !important;
}

html:has(body.vatty-app-page) {
    margin-top: 0 !important;
}

/* -- App page full-bleed fix ------------------------------- */

body.vatty-app-page,
html:has(body.vatty-app-page) {
    margin: 0 !important;
    padding: 0 !important;
}

body.vatty-app-page .vatty-app-shell {
    min-height: 100vh;
    position: relative;
}

body.vatty-app-page .vatty-app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
}

body.vatty-app-page .vatty-app-sidebar.collapsed {
    width: 64px;
}

body.vatty-app-page .vatty-app-content {
    margin-left: 240px;
}

body.vatty-app-page .vatty-app-sidebar.collapsed~.vatty-app-content {
    margin-left: 64px;
}

@media (max-width: 768px) {
    body.vatty-app-page .vatty-app-sidebar {
        left: -240px;
        transition: left .25s ease;
    }

    body.vatty-app-page .vatty-app-sidebar.mobile-open {
        left: 0;
    }

    body.vatty-app-page .vatty-app-content {
        margin-left: 0;
    }
}

/* -- Topbar collapsed + mobile overrides ------------------- */

body.vatty-app-page .vatty-app-sidebar.collapsed~.vatty-app-content .vatty-app-topbar {
    left: 64px;
}

@media (max-width: 768px) {
    body.vatty-app-page .vatty-app-content {
        margin-left: 0 !important;
    }

    .vatty-app-topbar {
        left: 0 !important;
    }

    .vatty-app-inner {
        padding: 16px;
        padding-top: calc(52px + 16px);
    }
}

/* -- AI Usage view ----------------------------------------- */

.vatty-ai-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    margin-bottom: 4px;
}

.vatty-ai-chart-row {
    display: grid;
    grid-template-columns: 64px 1fr 160px;
    align-items: center;
    gap: 14px;
}

.vatty-ai-chart-date {
    font-size: 12px;
    color: var(--ink-muted);
    white-space: nowrap;
}

.vatty-ai-chart-track {
    background: var(--surface-alt);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.vatty-ai-chart-bar {
    height: 8px;
    border-radius: 999px;
    min-width: 3px;
    transition: width .4s ease;
}

.vatty-ai-chart-meta {
    font-size: 12px;
    color: var(--ink-muted);
    text-align: right;
    white-space: nowrap;
}

.vatty-ai-empty {
    font-size: 14px;
    color: var(--ink-faint);
    text-align: center;
    padding: 24px 0;
}

.vatty-ai-disclaimer {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 16px;
    line-height: 1.5;
}

/* -- Custom modal ------------------------------------------ */

.vatty-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 23, .5);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(3px);
}

.vatty-modal-overlay--open {
    opacity: 1;
}

.vatty-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .08);
    width: 100%;
    max-width: 420px;
    transform: scale(.96) translateY(8px);
    transition: transform .18s ease;
    overflow: hidden;
}

.vatty-modal-overlay--open .vatty-modal {
    transform: scale(1) translateY(0);
}

.vatty-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 20px;
}

.vatty-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vatty-modal-icon.danger {
    background: #fee2e2;
    color: #D92D20;
}

.vatty-modal-icon.info {
    background: var(--brand-light);
    color: var(--brand);
}

.vatty-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 5px;
    letter-spacing: -.2px;
}

.vatty-modal-header p {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.55;
}

.vatty-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
}

/* Danger variant for confirm button */
.vatty-btn-danger {
    background: #D92D20;
    color: #fff;
}

.vatty-btn-danger:hover {
    background: #b91c1c;
    color: #fff;
}

/* -- Scrollable tables on smaller screens ------------------ */

.vatty-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar styling */
.vatty-table-wrap::-webkit-scrollbar {
    height: 5px;
}

.vatty-table-wrap::-webkit-scrollbar-track {
    background: var(--surface-alt);
}

.vatty-table-wrap::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}

.vatty-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--ink-faint);
}

/* -- Table action column ----------------------------------- */

/* Actions column: always shrink to content, right-aligned, never wraps */
.vatty-table th:last-child,
.vatty-table td:last-child {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    padding-right: 16px;
    vertical-align: middle;
}

/* Confidence column: enough room for bar + label */
.vatty-confidence {
    min-width: 160px;
}

/* -- Login page register CTA ------------------------------- */

.vatty-login-register-cta {
    width: 100%;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.vatty-login-register-cta p {
    font-size: 13px;
    color: var(--ink-faint);
    font-weight: 500;
    margin: 0;
}

.vatty-login-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-light);
    color: var(--brand);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background .15s, color .15s;
    border: 1.5px solid transparent;
}

.vatty-login-register-btn:hover {
    background: #c0eef8;
    color: var(--brand-dark);
    text-decoration: none;
}

.vatty-login-register-btn svg {
    transition: transform .15s;
}

.vatty-login-register-btn:hover svg {
    transform: translateX(2px);
}

/* Last row in a section has no bottom border - section top border is the divider */
.vatty-drawer-section .vatty-check-row:last-child,
.vatty-drawer-section .vatty-drawer-row:last-child,
.vatty-drawer-section .vatty-calculation-row:last-child {
    border-bottom: none;
}

/* Remove bottom border on drawer-row that immediately precedes a section */
.vatty-drawer-row:has(+ .vatty-drawer-section) {
    border-bottom: none;
}

/* -- Evidence Packs ---------------------------------------- */

.vatty-packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.vatty-packs-grid .vatty-card+.vatty-card {
    margin-top: 0;
}

.vatty-pack-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;

}

.vatty-pack-card:hover {
    box-shadow: var(--shadow-md);
}

.vatty-pack-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vatty-pack-card-title h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 3px;
}

.vatty-pack-company {
    font-size: 12px;
    color: var(--ink-muted);
}

.vatty-pack-period {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-muted);
}

.vatty-pack-desc {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vatty-pack-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
}

.vatty-pack-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.vatty-pack-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.3px;
}

.vatty-pack-stat-brand {
    color: var(--brand);
}

.vatty-pack-stat-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink-faint);
}

.vatty-pack-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;

}

.vatty-pack-card-actions .vatty-btn-secondary {
    flex: 1;
    justify-content: center;
}

/* Detail two-column layout */

.vatty-pack-detail-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.vatty-pack-detail-aside {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    position: sticky;
    top: calc(52px + 20px);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vatty-pack-detail-aside .vatty-section-header {
    margin-bottom: 0;
}

.vatty-pack-search-input {
    width: 100%;
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
    background: var(--surface-alt);
}

.vatty-pack-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .10);
    background: var(--surface);
}

.vatty-pack-available-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.vatty-pack-available-row:last-child {
    border-bottom: none;
}

.vatty-pack-available-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vatty-pack-available-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vatty-pack-available-meta {
    font-size: 11px;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.vatty-pack-form-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
}

.vatty-pack-form-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .10);
}

@media (max-width: 900px) {
    .vatty-pack-detail-cols {
        grid-template-columns: 1fr;
    }

    .vatty-pack-detail-aside {
        position: static;
        max-height: none;
    }
}

@media (max-width: 500px) {
    .vatty-packs-grid {
        grid-template-columns: 1fr;
    }
}

/* -- Date input styling ------------------------------------ */

.vatty-pack-date-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
    cursor: pointer;
}

.vatty-pack-date-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .10);
}

/* Style the calendar icon */
.vatty-pack-date-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: opacity .15s, background .15s;
    filter: invert(40%) sepia(60%) saturate(400%) hue-rotate(155deg);
}

.vatty-pack-date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--brand-light);
}

/* -- Pack form textarea ------------------------------------- */

.vatty-pack-textarea {
    width: 100%;
    min-height: 120px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    resize: vertical;
    line-height: 1.6;
    transition: border-color .15s;
}

.vatty-pack-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .10);
}

.vatty-pack-textarea::placeholder {
    color: var(--ink-faint);
}

/* -- Date input wrapper with icon -------------------------- */

.vatty-date-wrap {
    position: relative;
}

.vatty-date-wrap::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a91b1' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath stroke-linecap='round' d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.vatty-pack-date-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px 0 38px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

.vatty-pack-date-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .10);
}

.vatty-pack-date-input::placeholder {
    color: var(--ink-faint);
}


/* -- Evidence pack date fields: keep icon and text separated -- */
.vatty-date-wrap {
    position: relative;
}

.vatty-date-wrap::before {
    left: 16px;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.vatty-date-wrap .vatty-pack-date-input,
.vatty-pack-date-input.vatty-flatpickr {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 14px 0 48px !important;
    line-height: 46px;
    font-size: 14px;
    font-family: inherit;
    text-indent: 0 !important;
    background-position: 16px center;
}

.vatty-date-wrap .vatty-pack-date-input::-webkit-calendar-picker-indicator,
.vatty-pack-date-input.vatty-flatpickr::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
}


/* -- Flatpickr calendar alignment fix ---------------------- */

/* When altInput is active, hide the original hidden input and size the alt correctly */
.vatty-drawer-input.flatpickr-input.flatpickr-mobile { display: none; }
input.flatpickr-input[type="hidden"] + .vatty-drawer-input { width: 100%; }

/* Hide calendar icon on ALL flatpickr inputs in drawers */
.vatty-drawer-input::-webkit-calendar-picker-indicator,
.flatpickr-input::-webkit-calendar-picker-indicator,
.flatpickr-input.vatty-drawer-input::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
}

.flatpickr-calendar {
    padding: 0 14px 14px !important;
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-days,
.dayContainer {
    width: 100% !important;
    max-width: none !important;
}

.dayContainer {
    padding: 0 8px !important;
    justify-content: space-between !important;
}

.flatpickr-day {
    max-width: 40px !important;
    flex-basis: 40px !important;
}

.flatpickr-current-month {
    left: 0 !important;
    width: 100% !important;
}

/* -- Company profile --------------------------------------- */

.vatty-co-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.vatty-co-profile-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(52px + 20px);
}

.vatty-co-aside-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.vatty-co-aside-card h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
    margin-bottom: 12px;
}

.vatty-co-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.vatty-co-detail-row:last-child {
    border-bottom: none;
}

.vatty-co-detail-row>span:first-child {
    color: var(--ink-muted);
    flex-shrink: 0;
}

.vatty-co-detail-row>span:last-child {
    color: var(--ink);
    text-align: right;
    font-size: 13px;
}

/* Form field standardisation */
.vatty-field-input {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
}

.vatty-field-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .10);
}

.vatty-field-input::placeholder {
    color: var(--ink-faint);
}

@media (max-width: 900px) {
    .vatty-co-profile-grid {
        grid-template-columns: 1fr;
    }

    .vatty-co-profile-aside {
        position: static;
    }
}

/* -- Remove all vertical table borders --------------------- */
.vatty-table th,
.vatty-table td {
    border-left: none !important;
    border-right: none !important;
}

/* -- Modal X close button ---------------------------------- */
.vatty-modal-x {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-faint);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    transition: background .15s, color .15s;
}

.vatty-modal-x:hover {
    background: var(--surface-alt);
    color: var(--ink);
}

/* Dashboard insights */
.vatty-dashboard-summary-grid {
    margin-bottom: 22px;
}

.vatty-summary-sub {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.35;
}

.vatty-dashboard-confidence-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    overflow: hidden;
    margin-top: 4px;
}

.vatty-dashboard-confidence-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
}

.vatty-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}

.vatty-dashboard-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.vatty-dashboard-panel--wide {
    grid-column: 1 / -1;
    min-width: 0;
}

.vatty-dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.vatty-dashboard-panel-head h2 {
    font-size: 18px;
    margin: 0;
    letter-spacing: -.02em;
}

.vatty-dashboard-companies-table-wrap {
    margin-top: 4px;
}

.vatty-dashboard-companies-table .vatty-td-company {
    min-width: 220px;
}

.vatty-company-name {
    display: block;
    font-weight: 800;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vatty-company-vat {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--ink-faint);
}

.vatty-dashboard-company-profile {
    white-space: nowrap;
}







.vatty-dashboard-empty {
    min-height: 180px;
    padding: 28px;
}

@media (max-width: 1100px) {
    .vatty-dashboard-grid {
        grid-template-columns: 1fr;
    }
}


/* Dashboard companies list: match Recent receipts table treatment */
.vatty-dashboard-companies-table-wrap {
    margin-top: 0;
}

.vatty-dashboard-companies-table .vatty-company-name,
.vatty-dashboard-companies-table .vatty-supplier-name {
    font-weight: 500;
}

.vatty-dashboard-receipts-header {
    margin-top: 26px;
}

.vatty-dashboard-companies-table .vatty-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



/* ============================================================
   Auth / front / 404 dark-background polish
   ============================================================ */

.vatty-login-page {
    background: rgb(15, 23, 42);
    color: #e5e7eb;
    padding: 24px 16px;
}

.vatty-login-page .vatty-login-form-hd {
    text-align: center;
}

.vatty-login-form-hd h1 {
    color: #ffffff;
}

.vatty-login-form-hd p,
.vatty-login-register-link,
.vatty-login-register-cta p,
.vatty-field-hint,
.vatty-checkbox-label,
.vatty-label-optional {
    color: #94a3b8;
}

.vatty-login-field label {
    color: #dbe4f0;
}

.vatty-login-field input {
    color: #0f172a;
    background: #ffffff;
}

.vatty-login-field input::placeholder {
    color: #8c95a4;
}

.vatty-login-divider {
    color: #a7b0c0;
}

.vatty-login-divider::before,
.vatty-login-divider::after {
    background: rgba(226, 230, 238, .75);
}

.vatty-login-register-cta {
    border-color: rgba(226, 230, 238, .45);
}

.vatty-login-forgot a,
.vatty-login-register-link a,
.vatty-checkbox-label a {
    color: #16a6c4;
}

.vatty-login-forgot a:hover,
.vatty-login-register-link a:hover,
.vatty-checkbox-label a:hover {
    color: #38c4dd;
}

.vatty-login-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    color: #16a6c4;
    font-weight: 600;
    text-decoration: none;
}

.vatty-login-register-btn:hover {
    background: transparent;
    color: #38c4dd;
    text-decoration: underline;
}

.vatty-login-submit,
.vatty-login-sso {
    border-radius: var(--radius);
}

.vatty-login-page .vatty-plan-row {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: #e5e7eb;
}

.vatty-login-page .vatty-plan-row:hover {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
}

.vatty-login-page .vatty-plan-row.selected {
    border-color: var(--brand);
    background: rgba(10, 145, 177, .15);
}

.vatty-login-page .vatty-plan-row-name {
    color: #f1f5f9;
}

.vatty-login-page .vatty-plan-row-amount {
    color: #f1f5f9;
}

.vatty-login-page .vatty-plan-row-companies,
.vatty-login-page .vatty-plan-row-period {
    color: #64748b;
}

.vatty-login-page .vatty-plan-row-radio {
    border-color: rgba(255, 255, 255, .3);
}

.vatty-login-page .vatty-plan-addon-note {
    color: #475569;
}

/* Legal links */
.vatty-legal-links {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(226, 230, 238, .2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    width: 100%;
    text-align: center;
}

.vatty-legal-links a {
    font-size: 12px;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}

.vatty-legal-links a:hover {
    color: #94a3b8;
}

.vatty-legal-links span[aria-hidden] {
    color: #334155;
    font-size: 12px;
}

/* Drawer label fix */
.vatty-drawer label {
    color: #0f172a !important;
    font-weight: 500;
}

.vatty-drawer .text-muted,
.vatty-drawer small {
    color: #475569 !important;
}

/* Company pack status badge + account settings */
.vatty-badge.gray {
    background: #f1f5f9;
    color: #64748b;
}

.vatty-sidebar-account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
    padding: 4px;
    margin: -4px;
}

.vatty-sidebar-account-link:hover,
.vatty-sidebar-account-link.active {
    background: rgba(255, 255, 255, .06);
}

.vatty-app-sidebar.collapsed .vatty-sidebar-account-link {
    flex: 0 0 auto;
}

.vatty-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.vatty-account-card {
    padding: 24px;
}

.vatty-account-card .vatty-section-header {
    margin: 0 0 18px;
}

.vatty-account-detail-list {
    display: grid;
    gap: 14px;
}

.vatty-account-detail-list>div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.vatty-account-detail-list>div:last-child {
    border-bottom: 0;
}

.vatty-account-detail-list span {
    color: var(--ink-muted);
    font-size: 14px;
}

.vatty-account-detail-list strong {
    color: var(--ink);
    font-size: 14px;
    text-align: right;
}

.vatty-account-form {
    max-width: 460px;
}

.vatty-account-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.vatty-account-danger-card {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .vatty-account-grid {
        grid-template-columns: 1fr;
    }
}

/* Global button sizing */
.vatty-btn,
.vatty-row-btn {
    font-size: 12px !important;
}

/* Password reveal toggle */
.vatty-password-wrap {
    position: relative;
    display: block;
}

.vatty-password-wrap input[type="password"],
.vatty-password-wrap input[type="text"] {
    width: 100%;
    padding-right: 46px !important;
    box-sizing: border-box;
}

.vatty-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    border: 0;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    /* critical: do NOT set width:100% or it covers the whole input */
    flex-shrink: 0;
}

.vatty-password-toggle:hover,
.vatty-password-toggle:focus-visible {
    color: #0f172a;
    outline: none;
}

.vatty-password-toggle svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
    display: block;
    flex-shrink: 0;
}

.vatty-login-page .vatty-password-toggle,
.vatty-register-page .vatty-password-toggle,
.vatty-auth .vatty-password-toggle {
    color: #64748b;
    /* explicitly not full-width */
    width: 44px !important;
}

/* Receipt risk flags */
.vatty-risk-flags {
    display: grid;
    gap: 8px;
}

.vatty-risk-flag {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 10px;
    color: #78350f;
}

.vatty-risk-flag strong {
    font-size: 12px;
    font-weight: 700;
}

.vatty-risk-flag span {
    font-size: 12px;
    line-height: 1.4;
}

.vatty-risk-flag.high {
    border-color: #fecaca;
    background: #fef2f2;
    color: #7f1d1d;
}

.vatty-risk-flag.low {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #14532d;
}


/* VATTY overview search/filter controls */
.vatty-list-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin: 0 0 18px;
}

.vatty-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: min(360px, 100%);
    color: var(--ink-muted, #64748b);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.vatty-search-input,
.vatty-filter-select {
    width: 100%;
    min-height: 42px;
    border: 1.5px solid var(--border, #d9e1ea);
    border-radius: var(--radius, 12px);
    padding: 0 14px;
    background: var(--surface, #ffffff);
    color: var(--ink, #0f172a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: border-color .15s, background .15s;
}

.vatty-search-input::placeholder {
    color: var(--ink-faint, #94a3b8);
    font-weight: 400;
}

.vatty-search-input:focus,
.vatty-filter-select:focus {
    border-color: var(--brand, #0a91b1);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .12);
}

.vatty-pack-filter-tools .vatty-status-filter-field {
    min-width: 180px;
}

.vatty-filter-select {
    appearance: auto;
}

.vatty-evidence-export-btn {
    white-space: nowrap;
}


/* Clean search/filter controls: no visible field label text required */
.vatty-search-field {
    gap: 0;
}

/* Dropdowns/selects should match standard VATTY form fields */
.vatty-app select,
.vatty-drawer select,
.vatty-filter-select,
.vatty-search-field select,
.vatty-field select,
.vatty-form select {
    width: 100%;
    min-height: 42px;
    border: 1.5px solid var(--border, #d9e1ea);
    border-radius: var(--radius, 12px);
    padding: 0 40px 0 14px;
    background-color: var(--surface, #ffffff);
    color: var(--ink, #0f172a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    outline: none;
    transition: border-color .15s, background .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-muted, #64748b) 50%),
        linear-gradient(135deg, var(--ink-muted, #64748b) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
}

.vatty-app select:focus,
.vatty-drawer select:focus,
.vatty-filter-select:focus,
.vatty-search-field select:focus,
.vatty-field select:focus,
.vatty-form select:focus {
    border-color: var(--brand, #0a91b1);
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .12);
}

.vatty-app select:disabled,
.vatty-drawer select:disabled,
.vatty-filter-select:disabled,
.vatty-search-field select:disabled,
.vatty-field select:disabled,
.vatty-form select:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}



/* -- Batch upload ------------------------------------------- */

.vatty-upload-shell--batch {
    max-width: 760px;
}

#vatty-upload-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vatty-upload--batch {
    padding: 44px 32px;
    position: relative;
}

.vatty-upload-hint {
    font-size: 12px !important;
    color: var(--ink-faint) !important;
    margin-top: 6px !important;
}

/* File queue */

.vatty-file-queue {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.vatty-file-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.vatty-queue-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.vatty-queue-items {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
}

.vatty-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

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

.vatty-queue-item--done {
    background: #f0fdf4;
}

.vatty-queue-item--error {
    background: #fff5f5;
}

.vatty-queue-item--processing {
    background: #f0fafe;
}

.vatty-queue-status {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vatty-queue-status--pending {
    background: var(--surface-alt);
    border: 1.5px solid var(--border);
    color: var(--ink-faint);
}

.vatty-queue-status--processing {
    background: var(--brand-light);
}

.vatty-queue-status--done {
    background: #dcfce7;
    color: #16a34a;
}

.vatty-queue-status--error {
    background: #fee2e2;
    color: var(--danger);
}

.vatty-queue-status--skipped {
    background: var(--surface-alt);
    color: var(--ink-faint);
}

.vatty-queue-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vatty-queue-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vatty-queue-item-meta {
    font-size: 11px;
    color: var(--ink-faint);
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.vatty-queue-item-error {
    color: var(--danger);
    font-weight: 500;
}

.vatty-queue-remove {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-faint);
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}

.vatty-queue-remove:hover {
    background: var(--danger-bg);
    border-color: #fca5a5;
    color: var(--danger);
}

/* Batch results */

.vatty-batch-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vatty-batch-summary {
    padding: 16px 20px;
}

.vatty-batch-summary-stats {
    display: flex;
    gap: 28px;
    align-items: center;
}

.vatty-batch-summary-stats>div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vatty-batch-summary-stats>div span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
}

.vatty-batch-summary-stats>div strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.3px;
}

.vatty-batch-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vatty-batch-result-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    transition: border-color .15s;
}

.vatty-batch-result-item:hover {
    box-shadow: var(--shadow-sm);
}

.vatty-batch-result-item--saved {
    background: #f0fdf4;
    border-color: #86efac;
    opacity: .75;
}

.vatty-batch-result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

.vatty-batch-result-header>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vatty-batch-result-header strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vatty-batch-result-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

/* -- Billing placeholder ------------------------------------ */

.vatty-billing-placeholder {
    max-width: 560px;
}

.vatty-billing-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 28px;
    gap: 12px;
}

.vatty-billing-icon {
    width: 64px;
    height: 64px;
    background: var(--brand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    margin-bottom: 4px;
}

.vatty-billing-placeholder-inner h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.vatty-billing-placeholder-inner p {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.65;
    max-width: 380px;
    margin: 0;
}

.vatty-billing-coming-soon-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}



/* -- Queue progress bar (replaces spinner on processing rows) */

.vatty-queue-item--processing {
    padding: 10px 18px 12px;
    background: #f0fafe;
}

.vatty-queue-item-processing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.vatty-queue-item-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    flex-shrink: 0;
    min-width: 34px;
    text-align: right;
}

.vatty-queue-progress-track {
    height: 5px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.vatty-queue-progress-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width 0.35s ease;
    min-width: 3px;
}

/* -- Batch result item: actions right-aligned --------------- */

.vatty-batch-result-item {
    flex-wrap: nowrap;
    align-items: center;
}

.vatty-batch-result-header {
    flex-wrap: nowrap;
    gap: 16px;
}

.vatty-batch-result-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
    padding-left: 12px;
}



/* -- VAT Periods / Submissions ------------------------------ */

.vatty-period-card {
    position: relative;
}

.vatty-period-deadline-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ink-muted);
    margin: 8px 0 6px;
}

.vatty-period-deadline-row strong {
    color: var(--ink);
}

.vatty-period-issues-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.vatty-period-urgency {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-light);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 4px;
}

.vatty-period-urgency--overdue {
    color: var(--danger);
    background: #fee2e2;
}

/* Dashboard company table VAT period column */
.vatty-summary-card--risk {
    border-color: #fca5a5;
    background: #fff5f5;
}

.vatty-summary-value--risk {
    color: var(--danger) !important;
}



/* -- Nine-box VAT return panel ------------------------------ */

.vatty-nine-box {
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
}

.vatty-nine-box-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.vatty-nine-box-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.vatty-nine-box-readiness {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.vatty-nine-box-readiness-bar {
    width: 140px;
    height: 5px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.vatty-nine-box-readiness-bar>div {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width .4s ease;
}

/* The 3×3 grid */
.vatty-nine-box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.vatty-nine-box-cell {
    padding: 16px 18px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background .12s;
}

.vatty-nine-box-cell:nth-child(3n) {
    border-right: none;
}

.vatty-nine-box-cell:nth-child(7),
.vatty-nine-box-cell:nth-child(8),
.vatty-nine-box-cell:nth-child(9) {
    border-bottom: none;
}

/* Cell type colours */
.vatty-nine-box-cell--from-vatty {
    background: #f0fdf4;
}

.vatty-nine-box-cell--from-vatty::before {
    content: 'FROM RECEIPTS';
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #16a34a;
    opacity: .7;
}

.vatty-nine-box-cell--input {
    background: #fefce8;
}

.vatty-nine-box-cell--input::before {
    content: 'ENTER MANUALLY';
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #b45309;
    opacity: .7;
}

.vatty-nine-box-cell--calc {
    background: #f8fafc;
}

.vatty-nine-box-cell--zero {
    background: #f8fafc;
    opacity: .8;
}

.vatty-nine-box-cell--pending {
    background: #f8fafc;
}

/* Net VAT cell colours */
.vatty-nine-box-payable {
    background: #fff7ed !important;
}

.vatty-nine-box-refund {
    background: #f0fdf4 !important;
}

.vatty-nine-box-num {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-faint);
    margin-bottom: 4px;
}

.vatty-nine-box-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    line-height: 1.4;
    margin-bottom: 8px;
    max-width: 180px;
}

.vatty-nine-box-value {
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 5px;
    min-height: 28px;
}

.vatty-nine-box-value strong {
    font-weight: 700;
    letter-spacing: -.3px;
}

.vatty-nine-box-empty {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-faint);
    font-style: italic;
}

.vatty-nine-box-source {
    font-size: 11px;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 4px;
}

.vatty-nine-box-source svg {
    color: #16a34a;
    flex-shrink: 0;
}

/* Manual input fields inside cells */
.vatty-nine-box-input {
    width: 100%;
    max-width: 120px;
    height: 32px;
    padding: 0 8px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    background: #fff;
    color: var(--ink);
    transition: border-color .12s;
}

.vatty-nine-box-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}

/* Footer */
.vatty-nine-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.vatty-nine-box-footer p {
    font-size: 12px;
    color: var(--ink-faint);
    margin: 0;
    flex: 1;
    line-height: 1.6;
}

/* Responsive: stack to 1 column on narrow */
@media (max-width: 700px) {
    .vatty-nine-box-grid {
        grid-template-columns: 1fr;
    }

    .vatty-nine-box-cell {
        border-right: none;
    }

    .vatty-nine-box-cell:nth-child(n) {
        border-bottom: 1px solid var(--border);
    }
}


/* ═══════════════════════════════════════════════════════════════
   ANDREW FEEDBACK 12/05/26 UPDATES
   ═══════════════════════════════════════════════════════════════ */

/* ── Portfolio layout (dashboard + priority panel) ── */
.vatty-portfolio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.vatty-portfolio-main {
    min-width: 0;
}

/* ── Priority Actions Panel ── */
.vatty-priority-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.vatty-priority-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle, #f8fafc);
}

.vatty-priority-list {
    display: flex;
    flex-direction: column;
}

.vatty-priority-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}

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

.vatty-priority-item:hover {
    background: var(--surface-hover, #f0f4f8);
    text-decoration: none;
}

.vatty-priority-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

.vatty-priority-dot--red {
    background: #ef4444;
}

.vatty-priority-dot--amber {
    background: #f59e0b;
}

.vatty-priority-dot--green {
    background: #10b981;
}

.vatty-priority-label {
    flex: 1;
    font-size: 12px;
    line-height: 1.4;
}

.vatty-priority-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--border);
    border-radius: 100px;
    padding: 2px 8px;
    color: var(--text-muted);
    white-space: nowrap;
}

.vatty-priority-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.vatty-priority-empty svg {
    opacity: .4;
}

/* ── More menu (replaces standalone Delete button) ── */
.vatty-more-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.vatty-more-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
}

.vatty-more-menu {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    min-width: 130px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    width: max-content;
    /* Hidden state: truly zero footprint */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    min-width: 0;
}

.vatty-more-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    width: max-content;
    height: auto;
    overflow: visible;
    padding: 4px;
    border: 1.5px solid var(--border);
    min-width: 130px;
}

.vatty-more-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text);
    transition: background .12s;
}

.vatty-more-menu-item:hover {
    background: var(--surface-hover, #f0f4f8);
}

.vatty-more-delete {
    color: #D92D20 !important;
}

.vatty-more-delete:hover {
    background: #fff1f0 !important;
}


/* ── Under Development placeholder (reuses billing style) ── */
/* (already covered by .vatty-billing-placeholder no extra needed) */

/* ── Responsive: collapse priority panel on smaller screens ── */
@media (max-width: 1100px) {
    .vatty-portfolio-layout {
        grid-template-columns: 1fr;
    }

    .vatty-priority-panel {
        position: static;
        order: -1;
    }

    .vatty-priority-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .vatty-priority-item {
        flex: 1 1 200px;
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

    .vatty-priority-item:last-child {
        border-right: none;
    }
}


/* ── Sidebar Priority Actions ── */
.vatty-sidebar-priority {
    margin: 8px 10px 0;
    border: 1.5px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-priority {
    display: none;
}

.vatty-sidebar-priority-header {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
}

.vatty-sidebar-priority-list {
    display: flex;
    flex-direction: column;
}

.vatty-sidebar-priority-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: background .12s, color .12s;
    line-height: 1.3;
}

.vatty-sidebar-priority-item:last-child {
    border-bottom: none;
}

.vatty-sidebar-priority-item:hover {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
}

.vatty-sidebar-priority-label {
    flex: 1;
    font-size: 11px;
    line-height: 1.35;
}

.vatty-sidebar-priority-count {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, .1);
    border-radius: 100px;
    padding: 1px 6px;
    white-space: nowrap;
    color: rgba(255, 255, 255, .6);
    flex-shrink: 0;
}


/* ── Hierarchy Breadcrumb ── */
.vatty-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.vatty-breadcrumb-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--brand, #0a91b1);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: opacity .12s;
}

.vatty-breadcrumb-link:hover {
    opacity: .75;
    text-decoration: underline;
}

.vatty-breadcrumb-sep {
    font-size: 13px;
    color: var(--text-muted);
    opacity: .5;
    user-select: none;
}

.vatty-breadcrumb-current {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
}


/* ── Workload grid (Portfolio view) ── */
.vatty-workload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 900px) {
    .vatty-workload-grid {
        grid-template-columns: 1fr;
    }
}

.vatty-workload-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.vatty-workload-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle, #f8fafc);
}

.vatty-workload-section-header svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.vatty-workload-section-header h2 {
    font-size: 13px;
    font-weight: 700;
    flex: 1;
    margin: 0;
    letter-spacing: .1px;
}

.vatty-workload-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--border);
    border-radius: 100px;
    padding: 2px 8px;
    color: var(--text-muted);
}

.vatty-workload-empty {
    padding: 20px 16px;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.vatty-workload-section .vatty-table-wrap {
    margin: 0;
    border-radius: 10px;
    border: none;
    box-shadow: none;
}

.vatty-workload-section .vatty-table {
    border-radius: 0;
}


/* Clickable company rows on portfolio */
.vatty-portfolio-company-row:hover td {
    background: var(--surface-hover, #f0f4f8);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR LIGHT/DARK THEME
   ═══════════════════════════════════════════════════════════════ */

/* -- Toggle button ----------------------------------------- */
.vatty-sidebar-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid rgba(255, 255, 255, .12);
    background: transparent;
    cursor: pointer;
    color: rgba(255, 255, 255, .5);
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}

.vatty-sidebar-theme-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    border-color: rgba(255, 255, 255, .25);
}

.vatty-app-sidebar.collapsed .vatty-sidebar-theme-toggle {
    margin: 0 auto;
}

/* -- Light sidebar ------------------------------------------ */
.vatty-app-sidebar.sidebar-light {
    background: #ffffff;
    border-right: 1.5px solid #e2e8f0;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-logo {
    border-bottom-color: #e2e8f0;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-logo-img {
    filter: none;
    opacity: 1;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-collapse {
    color: #64748b;
    border-color: #e2e8f0;
    background: transparent;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-collapse:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-section-label {
    color: #94a3b8;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-item {
    color: #475569;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-item.active {
    background: #eff6ff;
    color: #0a91b1;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-item.active svg {
    color: #0a91b1;
}

.vatty-app-sidebar.sidebar-light .vatty-app-sidebar-user {
    border-top-color: #e2e8f0;
}

.vatty-app-sidebar.sidebar-light .vatty-app-sidebar-name {
    color: #0f172a;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-user-email {
    color: #94a3b8;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-avatar {
    background: #0a91b1;
    color: #fff;
}

.vatty-app-sidebar.sidebar-light .vatty-app-sidebar-logout {
    color: #94a3b8;
    border-color: #e2e8f0;
}

.vatty-app-sidebar.sidebar-light .vatty-app-sidebar-logout:hover {
    background: #fee2e2;
    color: #D92D20;
    border-color: #fca5a5;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-account-link:hover,
.vatty-app-sidebar.sidebar-light .vatty-sidebar-account-link.active {
    background: #f1f5f9;
}

/* Priority panel - light */
.vatty-app-sidebar.sidebar-light .vatty-sidebar-priority {
    border-color: #e2e8f0;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-priority-header {
    color: #94a3b8;
    border-bottom-color: #e2e8f0;
    background: #f8fafc;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-priority-item {
    color: #475569;
    border-bottom-color: #f1f5f9;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-priority-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-priority-count {
    background: #e2e8f0;
    color: #64748b;
}

/* Toggle button - light */
.vatty-app-sidebar.sidebar-light .vatty-sidebar-theme-toggle {
    border-color: #e2e8f0;
    color: #64748b;
}

.vatty-app-sidebar.sidebar-light .vatty-sidebar-theme-toggle:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}



/* Actual divider between sidebar nav/settings and Priority Actions */
.vatty-sidebar-divider {
    display: block !important;
    height: 1px !important;
    width: calc(100% - 40px) !important;
    margin: 18px 20px 18px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    flex: 0 0 auto !important;
}

.vatty-app-sidebar.collapsed .vatty-sidebar-divider {
    display: none !important;
}

.vatty-sidebar-divider+.vatty-sidebar-priority {
    margin-top: 0 !important;
}




/* Hard-disable table heading sort behaviour/visuals */
.vatty-table thead th,
.vatty-table-wrap table thead th {
    cursor: default !important;
}

.vatty-table thead th::before,
.vatty-table thead th::after,
.vatty-table-wrap table thead th::before,
.vatty-table-wrap table thead th::after,
th .vatty-sort-icon {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}




/* Account page layout cleanup */
.vatty-account-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: start !important;
}

.vatty-card.vatty-account-card {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
}

.vatty-account-grid>.vatty-card.vatty-account-card:nth-child(3),
.vatty-account-grid>.vatty-card.vatty-account-card:last-child {
    grid-column: 1 / -1 !important;
}

.vatty-account-form {
    display: block !important;
}

.vatty-account-form .vatty-btn {
    margin-top: 14px !important;
}

@media (max-width: 900px) {
    .vatty-account-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Account page spacing/font cleanup */
.vatty-account-grid .vatty-card+.vatty-card,
.vatty-account-grid>.vatty-card.vatty-account-card+.vatty-card.vatty-account-card {
    margin-top: 0 !important;
}

.vatty-account-grid,
.vatty-account-grid .vatty-card,
.vatty-account-grid .vatty-account-card,
.vatty-account-grid input,
.vatty-account-grid button {
    font-size: 14px !important;
}

.vatty-account-grid .vatty-section-header h2,
.vatty-account-grid h2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
}

.vatty-account-detail-list span,
.vatty-account-detail-list strong,
.vatty-account-form label,
.vatty-account-form p {
    font-size: 14px !important;
}


/* Calendar icons for date inputs */
.vatty-drawer input[type="date"],
.vatty-modal input[type="date"],
.vatty-field input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238C95A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
    padding-right: 42px !important;
    cursor: pointer !important;
}

.vatty-drawer input[type="date"]::-webkit-calendar-picker-indicator,
.vatty-modal input[type="date"]::-webkit-calendar-picker-indicator,
.vatty-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}




/* Left aligned calendar icons for period date fields */
.vatty-date-input,
.vatty-drawer input[id*="period"][id*="start"],
.vatty-drawer input[id*="period"][id*="end"],
.vatty-drawer input[id*="deadline"],
.vatty-drawer input[name*="period_start"],
.vatty-drawer input[name*="period_end"],
.vatty-drawer input[name*="deadline"] {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238C95A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 18px 18px !important;
    padding-left: 46px !important;
    padding-right: 14px !important;
    cursor: pointer !important;
}

.vatty-date-input::-webkit-calendar-picker-indicator,
.vatty-drawer input[id*="period"][id*="start"]::-webkit-calendar-picker-indicator,
.vatty-drawer input[id*="period"][id*="end"]::-webkit-calendar-picker-indicator,
.vatty-drawer input[id*="deadline"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    cursor: pointer !important;
}




/* Verified empty VAT periods spacing */
.vatty-co-empty-periods-wrap,
.vatty-co-empty-state,
.vatty-empty-periods-card {
    margin-bottom: 32px !important;
}

.vatty-co-empty-periods-wrap+.vatty-summary-grid,
.vatty-co-empty-state+.vatty-summary-grid,
.vatty-empty-periods-card+.vatty-summary-grid {
    margin-top: 32px !important;
}


/* Actual empty VAT periods margin before stats */
.vatty-empty-vat-periods-wrap {
    margin-bottom: 32px !important;
}

.vatty-empty-vat-periods-wrap+.vatty-summary-grid {
    margin-top: 32px !important;
}


/* Margin below generic empty states */
.vatty-empty {
    margin-bottom: 20px !important;
}


/* ── VAT period detail view ─────────────────────────────────
   Matches company overview style: section-header + table,
   no card wrappers. Two-column grid layout.
──────────────────────────────────────────────────────────── */

.vatty-period-detail-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    margin-bottom: 24px;
}

.vatty-period-detail-main .vatty-section-header,
.vatty-period-detail-aside .vatty-section-header {
    margin-bottom: 12px;
}

/* Table in main column: standard bordered table */
.vatty-period-detail-main .vatty-table-wrap {
    margin-bottom: 0;
}

/* Available receipts list in aside */
.vatty-period-detail-aside .vatty-pack-available-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.vatty-period-detail-aside .vatty-pack-available-row:last-child {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 900px) {
    .vatty-period-detail-cols {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE - iPhone and small screens (≤ 480px)
   ══════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
@media (max-width: 480px) {
    .vatty-app-inner {
        padding: 12px;
        padding-top: calc(52px + 12px);
    }

    .vatty-app-topbar {
        padding: 0 12px;
        gap: 8px;
    }

    /* Shrink upload button to icon-only on very small screens */
    .vatty-topbar-upload-btn span,
    .vatty-topbar-upload-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ── Summary cards: single column on mobile ── */
@media (max-width: 480px) {
    .vatty-summary-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .vatty-summary-card {
        padding: 14px 16px;
    }

    .vatty-summary-value {
        font-size: 22px;
    }
}

/* ── Dash header: stack on mobile ── */
@media (max-width: 500px) {
    .vatty-dash-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .vatty-dash-header h1 {
        font-size: 18px;
    }

    .vatty-dash-header>div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Tables: horizontal scroll on small screens ── */
@media (max-width: 500px) {
    .vatty-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vatty-table {
        min-width: 500px;
    }

    /* Period and pack receipt tables can be narrower */
    .vatty-period-detail-main .vatty-table,
    .vatty-pack-detail-main .vatty-table {
        min-width: 420px;
    }
}

/* ── List tools: full width search on mobile ── */
@media (max-width: 500px) {
    .vatty-list-tools {
        flex-direction: column;
        gap: 8px;
    }

    .vatty-search-field {
        min-width: 0;
        width: 100%;
    }

    .vatty-pack-filter-tools .vatty-status-filter-field {
        min-width: 0;
        width: 100%;
    }
}

/* ── Section header: wrap on mobile ── */
@media (max-width: 480px) {
    .vatty-section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Company profile grid: already stacks at 900px ── */
/* Push aside below main on mobile */
@media (max-width: 500px) {
    .vatty-co-profile-grid {
        gap: 16px;
    }

    .vatty-co-aside-card {
        padding: 14px 16px;
    }

    .vatty-co-detail-row {
        flex-wrap: wrap;
        gap: 2px;
    }
}

/* ── Period detail: already stacks at 900px ── */
@media (max-width: 500px) {
    .vatty-period-detail-cols {
        gap: 20px;
    }
}

/* ── Workload grid: single col on mobile ── */
@media (max-width: 500px) {
    .vatty-workload-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* ── Nine-box VAT return: already stacks at 700px ── */

/* ── Upload shell: full width on mobile ── */
@media (max-width: 500px) {

    .vatty-upload-shell,
    .vatty-upload-shell--batch {
        max-width: 100%;
    }

    .vatty-upload--batch {
        padding: 32px 16px;
    }
}

/* ── Breadcrumb: allow wrapping ── */
@media (max-width: 480px) {
    .vatty-breadcrumb {
        flex-wrap: wrap;
        gap: 2px 0;
    }
}

/* ── Pack/period cards: tighter on mobile ── */
@media (max-width: 480px) {
    .vatty-pack-detail-cols {
        gap: 16px;
    }

    .vatty-pack-card {
        padding: 14px 16px;
    }
}

/* ── Row buttons: ensure tap targets ── */
@media (max-width: 480px) {
    .vatty-row-btn {
        padding: 7px 10px;
        font-size: 12px;
    }

    .vatty-btn {
        padding: 9px 14px;
        font-size: 13px;
    }
}

/* ── More menu: keep on screen ── */
@media (max-width: 480px) {
    .vatty-more-menu {
        right: 0;
        left: auto;
    }
}

/* ── Account/settings grid ── */
@media (max-width: 480px) {
    .vatty-account-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── File queue on upload ── */
@media (max-width: 480px) {
    .vatty-file-queue-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .vatty-batch-result-header {
        flex-wrap: wrap;
    }
}

/* ── Evidence packs grid ── */
@media (max-width: 480px) {
    .vatty-packs-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* ── Sidebar overlay on mobile: dim background ── */
@media (max-width: 768px) {
    .vatty-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 149;
    }

    .vatty-sidebar-overlay.active {
        display: block;
    }
}

/* ── Drawer: full screen on mobile ── */
@media (max-width: 480px) {
    .vatty-drawer {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
    }

    .vatty-drawer-inner {
        padding: 16px;
    }
}

/* ── Topbar upload: icon-only on very small screens ── */
@media (max-width: 380px) {
    .vatty-topbar-upload-label {
        display: none;
    }

    .vatty-topbar-upload-btn {
        padding: 7px 9px;
    }
}


/* More menu visibility fix */
/* More menu: fixed positioning escapes table overflow */
.vatty-more-menu {
    position: fixed !important;
    z-index: 9999 !important;
    /* ensure override doesn't restore size */
}

.vatty-more-menu.open,
.vatty-more-menu.is-open {
    display: block !important;
}


/* Insights dashboard */
.vatty-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.vatty-insights-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

.vatty-insights-card {
    padding: 0 !important;
    overflow: hidden;
}

.vatty-insights-card>.vatty-section-header {
    padding: 18px 20px;
    margin: 0;
    border-bottom: 1px solid var(--line, #E2E6EE);
}

.vatty-insights-card .vatty-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 10px;
}

.vatty-insight-actions {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.vatty-insight-action {
    border: 1px solid var(--line, #E2E6EE);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.vatty-insight-action strong {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.vatty-insight-action p {
    margin: 0;
    color: var(--ink-faint, #667085);
    font-size: 13px;
    line-height: 1.45;
}

.vatty-insight-action--green {
    border-color: rgba(18, 183, 106, .25);
    background: rgba(18, 183, 106, .06);
}

.vatty-insight-action--amber {
    border-color: rgba(247, 144, 9, .28);
    background: rgba(247, 144, 9, .07);
}

.vatty-insight-action--blue {
    border-color: rgba(10, 145, 177, .25);
    background: rgba(10, 145, 177, .06);
}

.vatty-insight-deadlines {
    padding: 20px;
    display: grid;
    gap: 10px;
}

.vatty-insight-deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line, #E2E6EE);
    border-radius: 12px;
    padding: 12px 14px;
}

.vatty-insight-deadline strong,
.vatty-insight-deadline span {
    display: block;
}

.vatty-insight-deadline strong {
    font-size: 14px;
}

.vatty-insight-deadline div>span {
    font-size: 12px;
    color: var(--ink-faint, #667085);
    margin-top: 3px;
}

@media (max-width: 1100px) {

    .vatty-insights-grid,
    .vatty-insights-panels {
        grid-template-columns: 1fr;
    }
}


/* Insights table sections should match Portfolio table styling */
.vatty-insights-table-section {
    margin-bottom: 20px !important;
}

.vatty-insights-table-section>.vatty-section-header {
    padding: 0 !important;
    margin: 0 0 12px !important;
    border-bottom: 0 !important;
}

.vatty-insights-table-section>.vatty-section-header h2 {
    margin: 0 !important;
}

.vatty-insights-table-section .vatty-table-wrap {
    margin: 0 !important;
    border: 1px solid var(--line, #E2E6EE) !important;
    border-radius: 10px;
    overflow: hidden !important;
    background: #fff !important;
}

.vatty-insights-table-section .vatty-table {
    margin: 0 !important;
}


/* Insights lower panels should match table/card styling */
.vatty-insights-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid var(--line, #E2E6EE) !important;
    background: #fff !important;
}

.vatty-insights-card>.vatty-section-header {
    padding: 18px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line, #E2E6EE) !important;
    background: #fff !important;
}

.vatty-insights-card>.vatty-section-header h2 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.vatty-insight-actions,
.vatty-insight-deadlines {
    padding: 0 !important;
    display: block !important;
}

.vatty-insight-action,
.vatty-insight-deadline {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line, #E2E6EE) !important;
    background: #fff !important;
    padding: 18px 20px !important;
}

.vatty-insight-action:last-child,
.vatty-insight-deadline:last-child {
    border-bottom: 0 !important;
}

.vatty-insight-action strong,
.vatty-insight-deadline strong {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.vatty-insight-action p,
.vatty-insight-deadline div>span {
    margin-top: 6px !important;
    font-size: 13px !important;
    color: var(--ink-faint, #667085) !important;
}

/* remove coloured backgrounds */
.vatty-insight-action--green,
.vatty-insight-action--amber,
.vatty-insight-action--blue {
    background: #fff !important;
}


/* Insights: make lower sections match Company VAT performance */
.vatty-insights-panels .vatty-insights-card {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.vatty-insights-panels .vatty-insights-card>.vatty-section-header {
    padding: 0 !important;
    margin: 0 0 12px !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.vatty-insights-panels .vatty-insights-card>.vatty-section-header h2 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.vatty-insights-panels .vatty-insights-card .vatty-insight-actions,
.vatty-insights-panels .vatty-insights-card .vatty-insight-deadlines {
    border: 1px solid var(--line, #E2E6EE) !important;
    border-radius: 14px !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: block !important;
}

.vatty-insights-panels .vatty-insights-card .vatty-insight-action,
.vatty-insights-panels .vatty-insights-card .vatty-insight-deadline {
    border: 0 !important;
    border-bottom: 1px solid var(--line, #E2E6EE) !important;
    border-radius: 0 !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 18px 20px !important;
}

.vatty-insights-panels .vatty-insights-card .vatty-insight-action:last-child,
.vatty-insights-panels .vatty-insights-card .vatty-insight-deadline:last-child {
    border-bottom: 0 !important;
}

/* Risk score badge should size to content */
.vatty-summary-card .vatty-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
}


/* Insights page: remove stacked card top margins */
.vatty-insights-panels .vatty-card+.vatty-card,
.vatty-insights-grid .vatty-card+.vatty-card,
.vatty-insights-card+.vatty-insights-card {
    margin-top: 0 !important;
}


/* Accountant-focused Insights metrics */
.vatty-insights-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.vatty-insight-metric-card {
    min-height: 164px;
}

.vatty-insight-card-note {
    display: block;
    margin-top: 10px;
    color: var(--ink-faint, #667085);
    font-size: 12px;
    line-height: 1.4;
}

.vatty-insights-table-section {
    margin-bottom: 20px !important;
}

.vatty-insights-table-section>.vatty-section-header {
    padding: 0 !important;
    margin: 0 0 12px !important;
    border-bottom: 0 !important;
}

.vatty-insights-table-section>.vatty-section-header h2 {
    margin: 0 !important;
}

.vatty-insights-table-section .vatty-table-wrap {
    margin: 0 !important;
    border: 1px solid var(--line, #E2E6EE) !important;
    border-radius: 10px;
    overflow: hidden !important;
    background: #fff !important;
}

.vatty-insights-panels .vatty-card+.vatty-card,
.vatty-insights-grid .vatty-card+.vatty-card,
.vatty-insights-metric-grid .vatty-card+.vatty-card,
.vatty-insights-table-section+.vatty-insights-table-section {
    margin-top: 0 !important;
}

.vatty-summary-card .vatty-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
}

@media (max-width: 1280px) {
    .vatty-insights-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .vatty-insights-metric-grid {
        grid-template-columns: 1fr;
    }
}


/* Insights explainers */
.vatty-insight-explainer {
    margin: 4px 0 0 !important;
    color: var(--ink-faint, #667085) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    max-width: 720px !important;
}

.vatty-insights-table-section>.vatty-section-header {
    align-items: flex-end !important;
}

.vatty-insights-table-section>.vatty-section-header h2 {
    margin-bottom: 0 !important;
}

.vatty-insight-metric-card .vatty-badge {
    margin-top: 8px !important;
}


/* Insights responsive + scrollable tables */
.vatty-insights-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.vatty-insights-table-section .vatty-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.vatty-insights-table-section .vatty-table {
    min-width: 680px !important;
}

.vatty-insight-explainer {
    margin: 4px 0 0 !important;
    color: var(--ink-faint, #667085) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    max-width: 720px !important;
}

.vatty-insight-card-note {
    display: block;
    margin-top: 10px;
    color: var(--ink-faint, #667085);
    font-size: 12px;
    line-height: 1.4;
}

.vatty-summary-card .vatty-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
}

@media (max-width: 1320px) {
    .vatty-insights-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .vatty-insights-panels {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    .vatty-insights-metric-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Insights 50/50 two-column layout */
.vatty-insights-panels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
    margin-bottom: 24px !important;
}

.vatty-insights-table-section {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    .vatty-insights-panels {
        grid-template-columns: 1fr !important;
    }
}


/* Insights single-column layout */
.vatty-insights-panels {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
    margin-bottom: 24px !important;
}


/* Remove underline from View CTA hover */
.vatty-row-btn,
.vatty-row-btn:hover,
.vatty-row-btn:focus,
.vatty-row-btn:active {
    text-decoration: none !important;
}


/* Insights back to 2-column layout */
.vatty-insights-panels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
    margin-bottom: 24px !important;
}

@media (max-width: 900px) {
    .vatty-insights-panels {
        grid-template-columns: 1fr !important;
    }
}


/* Final Insights consistency/responsiveness */
.vatty-insights-table-section .vatty-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.vatty-insights-table-section .vatty-table {
    min-width: 720px !important;
}

.vatty-insights-panels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
    margin-bottom: 24px !important;
}

.vatty-insights-table-section {
    min-width: 0 !important;
}

@media (max-width: 900px) {
    .vatty-insights-panels {
        grid-template-columns: 1fr !important;
    }
}


/* Insights compact tables + info tooltips */
.vatty-insights-table-section .vatty-table-wrap {
    overflow-x: visible !important;
}

.vatty-insights-table-section .vatty-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
}

.vatty-insights-table-section .vatty-table th,
.vatty-insights-table-section .vatty-table td {
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: normal !important;
}

.vatty-insights-table-section .vatty-row-btn {
    padding: 8px 14px !important;
    min-width: 0 !important;
}

.vatty-insight-title-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
}

.vatty-insight-title-row h2 {
    margin: 0 !important;
}

.vatty-info-tip {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.vatty-info-icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--ink-faint, #667085) !important;
    border: 1px solid var(--line, #E2E6EE) !important;
    background: #fff !important;
    cursor: help !important;
}

.vatty-info-tooltip {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 8px) !important;
    transform: translateX(-50%) !important;
    width: 280px !important;
    max-width: min(280px, 70vw) !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .22) !important;
}

.vatty-info-tip:hover .vatty-info-tooltip,
.vatty-info-tip:focus .vatty-info-tooltip,
.vatty-info-tip:focus-within .vatty-info-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Issues badge tooltip — wider trigger so reposition slightly */
.vatty-issues-badge .vatty-info-tooltip {
    left: 0 !important;
    transform: none !important;
    width: 240px !important;
}

.vatty-insight-explainer {
    display: none !important;
}

@media (max-width: 1200px) {
    .vatty-insights-panels {
        grid-template-columns: 1fr !important;
    }
}


/* Insights stat cards after removing explainer copy */
.vatty-insights-metric-grid .vatty-summary-card,
.vatty-insights-metric-grid .vatty-insight-metric-card {
    min-height: 112px !important;
    height: auto !important;
    padding: 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.vatty-insights-metric-grid .vatty-summary-label {
    margin-bottom: 8px !important;
}

.vatty-insights-metric-grid .vatty-summary-value {
    line-height: 1.05 !important;
}

.vatty-insights-metric-grid .vatty-badge {
    margin-top: 10px !important;
}






/* Final insights stat sizing cleanup */
.vatty-insights-metric-grid .vatty-summary-card,
.vatty-insights-metric-grid .vatty-insight-metric-card {
    min-height: 96px !important;
    padding: 20px 24px !important;
}

.vatty-insights-metric-grid .vatty-summary-label {
    margin-bottom: 6px !important;
}

.vatty-insights-metric-grid .vatty-summary-value {
    margin-bottom: 0 !important;
}

.vatty-insights-metric-grid .vatty-summary-card--risk {
    justify-content: center !important;
}

/* Company dashboard receipt CTA alignment */
.vatty-table th:last-child {
    background: var(--surface-secondary, #F8FAFC) !important;
}





/* CTA icon visibility: only hide View CTA icons, keep delete/more icons */
.vatty-row-btn svg {
    display: inline-block;
}

/* chevrons and detail icons always visible */
.vatty-btn-view-company svg,
.vatty-insights-view-cta svg,
.vatty-btn-detail svg {
    display: inline-block !important;
}

.vatty-more-menu-item svg,
.vatty-more-delete svg,
.vatty-btn-delete-company svg,
.vatty-pack-delete svg,
.vatty-period-delete svg,
.vatty-more-menu-btn svg {
    display: inline-block !important;
    flex: 0 0 auto !important;
}


/* Insights View CTA should inherit exact standard row button styling */
.vatty-insights-view-cta,
.vatty-insights-table-section .vatty-btn-view-company {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}


/* Force Insights CTA to exact row button dimensions */
.vatty-insights-view-cta,
.vatty-insights-table-section .vatty-btn-view-company {
    font-size: 13px !important;
    padding: 0 14px !important;
    min-height: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
}


/* Match Insights CTA size to compact dashboard CTAs */
.vatty-insights-view-cta,
.vatty-insights-table-section .vatty-btn-view-company {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    line-height: 26px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}


/* Portfolio section headers should match table TH styling */
.vatty-dashboard-section-title,
.vatty-overview-card-header,
.vatty-portfolio-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--ink-faint, #98A2B3) !important;
    line-height: 1.2 !important;
}

/* Remove icons from portfolio overview/table headings */
.vatty-dashboard-section-title svg,
.vatty-overview-card-header svg,
.vatty-portfolio-section-title svg {
    display: none !important;
}


/* ACTUAL portfolio overview header fix */
.vatty-overview-grid .vatty-card h2,
.vatty-overview-grid .vatty-card .vatty-card-title,
.vatty-overview-grid .vatty-section-header h2 {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #98A2B3 !important;
    line-height: 1.2 !important;
}

/* Remove overview heading icons */
.vatty-overview-grid .vatty-card h2 svg,
.vatty-overview-grid .vatty-card .vatty-card-title svg,
.vatty-overview-grid .vatty-section-header h2 svg,
.vatty-overview-grid .vatty-card h2 i,
.vatty-overview-grid .vatty-card .vatty-card-title i,
.vatty-overview-grid .vatty-section-header h2 i {
    display: none !important;
}


/* Actual workload card headers: remove icons and match table TH styling */
.vatty-workload-section-header svg {
    display: none !important;
}

.vatty-workload-section-header {
    gap: 0 !important;
}

.vatty-workload-section-header h2 {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #98A2B3 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   SIGNUP PAGE — matches login style, wider for plan grid
   ══════════════════════════════════════════════════════════════ */

/* ── Signup plan picker — same width as login card ── */
.vatty-plan-grid--compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
}

/* Row-style plan card */
.vatty-plan-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    cursor: pointer;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .15s;
    user-select: none;
}

.vatty-plan-row:hover {
    border-color: var(--border-strong);
}

.vatty-plan-row.selected {
    border-color: var(--brand);
    background: var(--brand-light, #f0fdff);
}

.vatty-plan-row-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s, background .15s;
}

.vatty-plan-row.selected .vatty-plan-row-radio {
    border-color: var(--brand);
    background: var(--brand);
}

.vatty-plan-row.selected .vatty-plan-row-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

.vatty-plan-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vatty-plan-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    white-space: normal;
}

.vatty-plan-row-companies {
    font-size: 11px;
    color: var(--ink-faint);
    white-space: normal;
    line-height: 1.3;
}

.vatty-plan-row-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.vatty-plan-row-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.vatty-plan-row-period {
    font-size: 11px;
    color: var(--ink-faint);
    white-space: normal;
}

.vatty-plan-badge--inline {
    position: static;
    transform: none;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 99px;
}

.vatty-plan-addon-note {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 16px;
    text-align: center;
    width: 100%;
}

/* Constrain form elements to readable width, centred within wide card */
.vatty-login-wrap .vatty-login-form-hd,
.vatty-login-wrap form,
.vatty-login-wrap .vatty-login-submit,
.vatty-login-wrap .vatty-login-sso,
.vatty-login-wrap .vatty-login-divider,
.vatty-login-wrap .vatty-login-error,
.vatty-login-wrap .vatty-login-register-cta,
.vatty-login-wrap .vatty-legal-links,
.vatty-login-wrap .vatty-plan-addon-note,
.vatty-login-wrap .vatty-signup-paid-note,
.vatty-login-wrap .vatty-login-forgot {
    width: 100%;
    max-width: 460px;
}

.vatty-login-wrap .vatty-login-sso {
    justify-content: center;
}

.vatty-login-wrap .vatty-login-form-hd {
    text-align: center;
}

/* Plan grid always spans full card width */
.vatty-login-wrap .vatty-plan-grid--compact {
    max-width: 100%;
}

@media (max-width: 700px) {
    .vatty-plan-grid--compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .vatty-plan-grid--compact {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vatty-plan-row {
        padding: 12px 14px;
    }

    .vatty-plan-row-amount {
        font-size: 18px;
    }
}

/* Step indicator */
.vatty-signup-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
}

.vatty-signup-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vatty-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
    background: var(--surface);
    flex-shrink: 0;
    transition: all .2s;
}

.vatty-step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-faint);
    transition: color .2s;
}

.vatty-signup-step.active .vatty-step-num {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.vatty-signup-step.active .vatty-step-label {
    color: var(--ink);
}

.vatty-signup-step-connector {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 16px;
}

/* Step headings */
.vatty-signup-step-hd {
    margin-bottom: 32px;
}

.vatty-signup-step-hd h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin-bottom: 6px;
}

.vatty-signup-step-hd p {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0;
}

.vatty-signup-back-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--brand);
    cursor: pointer;
    padding: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vatty-signup-back-btn::before {
    content: '←';
}

.vatty-inline-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--brand);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

/* Plan grid */
.vatty-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.vatty-plan-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    background: var(--surface);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    outline: none;
    user-select: none;
}

.vatty-plan-card:hover {
    border-color: var(--border-strong);
}

.vatty-plan-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(10, 145, 177, .2);
}

.vatty-plan-card.selected {
    border-color: var(--brand);
    background: var(--brand-light, #f0fdff);
}

.vatty-plan-card--popular {
    border-color: var(--brand);
}

.vatty-plan-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

.vatty-plan-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vatty-plan-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.vatty-plan-desc {
    font-size: 12px;
    color: var(--ink-faint);
}

.vatty-plan-price {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.vatty-plan-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.5px;
}

.vatty-plan-period {
    font-size: 12px;
    color: var(--ink-faint);
}

.vatty-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.vatty-plan-features li {
    font-size: 12px;
    color: var(--ink-muted);
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}

.vatty-plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
}

.vatty-plan-feature--excluded::before {
    content: '✕';
    color: var(--ink-faint);
}

.vatty-plan-feature--excluded {
    color: var(--ink-faint);
    text-decoration: line-through;
}

.vatty-plan-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.vatty-plan-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
    position: relative;
}

.vatty-plan-card.selected .vatty-plan-radio {
    border-color: var(--brand);
    background: var(--brand);
}

.vatty-plan-card.selected .vatty-plan-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

.vatty-plan-select-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
}

.vatty-plan-card.selected .vatty-plan-select-label {
    color: var(--brand);
}

.vatty-plan-addon-note {
    font-size: 12px;
    color: var(--ink-faint);
    margin-bottom: 24px;
}

.vatty-signup-paid-note {
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
    margin-top: 12px;
}

/* Responsive signup */
@media (max-width: 1100px) {
    .vatty-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .vatty-plan-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .vatty-plan-amount {
        font-size: 18px;
    }
}


/* ══════════════════════════════════════════════════════════════
   BILLING VIEW
   ══════════════════════════════════════════════════════════════ */

.vatty-billing-notice {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.vatty-billing-notice--warn {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #78350f;
}

.vatty-billing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.vatty-billing-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}

.vatty-billing-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
    margin-bottom: 8px;
}

.vatty-billing-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vatty-billing-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.vatty-billing-plan-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vatty-billing-plan-card.current {
    border-color: var(--brand);
    background: var(--brand-light, #f0fdff);
}

.vatty-billing-current-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--brand);
    margin-bottom: 4px;
}

.vatty-billing-plan-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.vatty-billing-plan-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.5px;
}

.vatty-billing-plan-companies {
    font-size: 13px;
    color: var(--ink-muted);
}

/* ── Per-company pricing & cadence toggle ── */
.vatty-billing-plan-per-co {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 4px;
}

.vatty-billing-plan-per-co-label {
    font-size: 12px;
    color: var(--ink-muted);
    font-weight: 400;
}

.vatty-billing-plan-per-co {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.5px;
}

.vatty-billing-plan-total-note {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 2px;
}

.vatty-billing-save-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: #dcfce7;
    color: #166534;
    padding: 2px 7px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Cadence toggle bar — billing view */
.vatty-billing-cadence-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.vatty-billing-cadence-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
}

.vatty-billing-cadence-toggle {
    display: flex;
    background: var(--surface-alt, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding: 3px;
    gap: 2px;
}

.vatty-cadence-btn {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.vatty-cadence-btn.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.vatty-cadence-save {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #dcfce7;
    color: #166534;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Cadence toggle — signup page */
.vatty-signup-cadence-bar {
    display: flex;
    background: var(--surface-alt, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding: 3px;
    gap: 2px;
    margin-bottom: 16px;
}

.vatty-signup-cadence-bar .vatty-cadence-btn {
    flex: 1;
    text-align: center;
}

/* Plan row per-company price (signup picker) */
.vatty-plan-row-per-co {
    display: flex;
    align-items: baseline;
    gap: 2px;
    justify-content: flex-end;
}

.vatty-plan-row-per-co-amt {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.vatty-plan-row-total {
    font-size: 11px;
    color: var(--ink-muted);
    text-align: right;
    margin-top: 2px;
}

.vatty-billing-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.vatty-billing-actions-section {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
}

.vatty-billing-actions-section:last-child {
    border-bottom: none;
}

.vatty-billing-actions-section h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

.vatty-billing-actions-section p {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0 0 14px;
}

.vatty-billing-danger-section {
    background: #fff8f8;
}

/* Company limit modal */
.vatty-limit-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vatty-limit-option {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vatty-limit-option--primary {
    border-color: var(--brand);
    background: var(--brand-light, #f0fdff);
}

.vatty-limit-option-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.vatty-limit-option-desc {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .vatty-billing-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vatty-billing-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .vatty-billing-plans-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Billing success modal ── */
.vatty-billing-success-modal {
    text-align: center;
    padding: 40px 32px;
    max-width: 380px;
}

.vatty-billing-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.vatty-billing-success-modal h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -.3px;
}

.vatty-billing-success-modal p {
    font-size: 14px;
    color: var(--ink-muted);
    margin-bottom: 24px;
}

/* ── Upgrade nudge modal ── */
.vatty-upgrade-modal {
    max-width: 400px;
    padding: 32px;
    text-align: center;
}

.vatty-upgrade-modal h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -.3px;
}

.vatty-upgrade-modal p {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Signup plan page alignment fix
   Keeps the plan picker centered horizontally and moved up neatly
   ============================================================ */
.vatty-signup-page.vatty-login-page {
    min-height: 100vh;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(28px, 6vh, 64px) 24px 32px;
}

.vatty-signup-page .vatty-signup-wrap {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    align-items: center;
}

.vatty-signup-page #vatty-step-1,
.vatty-signup-page #vatty-step-2 {
    width: 100%;
}

.vatty-signup-page #vatty-step-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vatty-signup-page .vatty-login-form-logo,
.vatty-signup-page .vatty-login-form-hd,
.vatty-signup-page .vatty-plan-addon-note,
.vatty-signup-page .vatty-login-submit,
.vatty-signup-page .vatty-login-register-cta,
.vatty-signup-page .vatty-legal-links {
    margin-left: auto;
    margin-right: auto;
}

.vatty-signup-page .vatty-login-form-hd {
    text-align: center;
}

.vatty-signup-page .vatty-plan-grid--compact {
    width: 100%;
    max-width: 1010px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.vatty-signup-page #vatty-step-1>.vatty-login-submit {
    width: 100%;
    max-width: 720px;
}

.vatty-signup-page #vatty-step-1>.vatty-login-register-cta,
.vatty-signup-page .vatty-legal-links {
    max-width: 720px;
}

@media (max-width: 700px) {
    .vatty-signup-page.vatty-login-page {
        padding: 28px 16px 24px;
    }

    .vatty-signup-page .vatty-plan-grid--compact {
        max-width: 520px;
    }
}


/* Signup alignment refinements */
.vatty-signup-page .vatty-login-form-hd {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.vatty-signup-page #vatty-step-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vatty-signup-page #vatty-step-2 form,
.vatty-signup-page #vatty-step-2 .vatty-login-sso,
.vatty-signup-page #vatty-step-2 .vatty-login-divider,
.vatty-signup-page #vatty-step-2 .vatty-login-register-cta,
.vatty-signup-page #vatty-step-2 .vatty-signup-paid-note {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.vatty-signup-page #vatty-step-2 form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   Signup + login width consistency
   Keeps /signup/ and /login/ forms aligned to the same width
   ============================================================ */
.vatty-signup-page .vatty-signup-wrap,
.vatty-login-page .vatty-login-wrap {
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Unified auth flow width fix
   /login/, /signup/ step 1 pricing, and /signup/ step 2 form
   all share the same 500px content width.
   ============================================================ */
.vatty-login-page .vatty-login-wrap,
.vatty-signup-page .vatty-signup-wrap {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.vatty-signup-page.vatty-login-page {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.vatty-signup-page #vatty-step-1,
.vatty-signup-page #vatty-step-2,
.vatty-signup-page #vatty-step-2 form,
.vatty-signup-page #vatty-step-2 .vatty-login-sso,
.vatty-signup-page #vatty-step-2 .vatty-login-divider,
.vatty-signup-page #vatty-step-2 .vatty-login-register-cta,
.vatty-signup-page #vatty-step-2 .vatty-signup-paid-note,
.vatty-signup-page .vatty-login-form-hd,
.vatty-signup-page .vatty-plan-grid--compact,
.vatty-signup-page #vatty-step-1>.vatty-login-submit,
.vatty-signup-page #vatty-step-1>.vatty-login-register-cta,
.vatty-signup-page .vatty-legal-links {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-form-hd,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap form,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-submit,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-sso,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-divider,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-error,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-register-cta,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-legal-links,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-wrap .vatty-login-forgot {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.vatty-signup-page .vatty-plan-grid--compact {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.vatty-signup-page .vatty-plan-card,
.vatty-signup-page .vatty-plan-row {
    min-width: 0 !important;
    width: 100% !important;
}

.vatty-signup-page .vatty-login-submit,
.vatty-login-page .vatty-login-submit,
.vatty-signup-page .vatty-login-sso,
.vatty-login-page .vatty-login-sso {
    width: 100% !important;
}

@media (max-width: 700px) {
    .vatty-signup-page .vatty-plan-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 420px) {
    .vatty-signup-page.vatty-login-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .vatty-signup-page .vatty-plan-grid--compact {
        gap: 10px !important;
    }
}

/* ============================================================
   FINAL AUTH WIDTH LOCK
   Make /signup/ account form exactly match /login/ form width.
   Pricing remains centered, but auth controls use the same 460px readable width.
   ============================================================ */
:root {
    --vatty-auth-form-width: 460px;
    --vatty-auth-page-width: 500px;
}

.vatty-login-page .vatty-login-wrap,
.vatty-signup-page .vatty-signup-wrap {
    width: 100% !important;
    max-width: var(--vatty-auth-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.vatty-login-page:not(.vatty-signup-page) .vatty-login-form-hd,
.vatty-login-page:not(.vatty-signup-page) form,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-submit,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-sso,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-divider,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-error,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-register-cta,
.vatty-login-page:not(.vatty-signup-page) .vatty-legal-links,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-forgot,
.vatty-signup-page #vatty-step-2 .vatty-login-form-hd,
.vatty-signup-page #vatty-step-2 form,
.vatty-signup-page #vatty-step-2 .vatty-login-submit,
.vatty-signup-page #vatty-step-2 .vatty-login-sso,
.vatty-signup-page #vatty-step-2 .vatty-login-divider,
.vatty-signup-page #vatty-step-2 .vatty-login-error,
.vatty-signup-page #vatty-step-2 .vatty-login-register-cta,
.vatty-signup-page #vatty-step-2 .vatty-legal-links,
.vatty-signup-page #vatty-step-2 .vatty-login-forgot,
.vatty-signup-page #vatty-step-2 .vatty-signup-paid-note {
    width: 100% !important;
    max-width: var(--vatty-auth-form-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.vatty-signup-page #vatty-step-2 .vatty-register-name-row {
    width: 100% !important;
    max-width: var(--vatty-auth-form-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    box-sizing: border-box !important;
}

.vatty-signup-page #vatty-step-2 .vatty-login-field,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-field {
    width: 100% !important;
    box-sizing: border-box !important;
}

.vatty-signup-page #vatty-step-2 input:not([type="checkbox"]),
.vatty-login-page:not(.vatty-signup-page) input:not([type="checkbox"]),
.vatty-signup-page #vatty-step-2 .vatty-password-wrap,
.vatty-login-page:not(.vatty-signup-page) .vatty-password-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 560px) {
    .vatty-signup-page #vatty-step-2 .vatty-register-name-row {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   FIX 18: ONE WIDTH LOCK FOR LOGIN + SIGNUP
   Keeps /login/, /signup/ step 1 and /signup/ step 2 all the
   same 500px visual width. This intentionally overrides the
   older 460px auth form lock above.
   ============================================================ */
:root {
    --vatty-auth-form-width: 500px !important;
    --vatty-auth-page-width: 500px !important;
}

body.vatty-login-page,
body.vatty-signup-page.vatty-login-page {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: clamp(28px, 6vh, 56px) 24px 32px !important;
    box-sizing: border-box !important;
}

.vatty-login-page .vatty-login-wrap,
.vatty-signup-page .vatty-signup-wrap {
    width: 100% !important;
    max-width: 500px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Login page content */
.vatty-login-page:not(.vatty-signup-page) .vatty-login-form-logo,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-form-hd,
.vatty-login-page:not(.vatty-signup-page) form,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-submit,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-sso,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-divider,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-error,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-register-cta,
.vatty-login-page:not(.vatty-signup-page) .vatty-legal-links,
.vatty-login-page:not(.vatty-signup-page) .vatty-login-forgot {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Signup step 1 + step 2 content */
.vatty-signup-page #vatty-step-1,
.vatty-signup-page #vatty-step-2,
.vatty-signup-page #vatty-step-1 .vatty-login-form-logo,
.vatty-signup-page #vatty-step-1 .vatty-login-form-hd,
.vatty-signup-page #vatty-step-1 .vatty-plan-grid--compact,
.vatty-signup-page #vatty-step-1 .vatty-plan-addon-note,
.vatty-signup-page #vatty-step-1 .vatty-login-submit,
.vatty-signup-page #vatty-step-1 .vatty-login-register-cta,
.vatty-signup-page #vatty-step-1 .vatty-legal-links,
.vatty-signup-page #vatty-step-2 .vatty-login-form-logo,
.vatty-signup-page #vatty-step-2 .vatty-login-form-hd,
.vatty-signup-page #vatty-step-2 form,
.vatty-signup-page #vatty-step-2 .vatty-login-submit,
.vatty-signup-page #vatty-step-2 .vatty-login-sso,
.vatty-signup-page #vatty-step-2 .vatty-login-divider,
.vatty-signup-page #vatty-step-2 .vatty-login-error,
.vatty-signup-page #vatty-step-2 .vatty-login-register-cta,
.vatty-signup-page #vatty-step-2 .vatty-legal-links,
.vatty-signup-page #vatty-step-2 .vatty-login-forgot,
.vatty-signup-page #vatty-step-2 .vatty-signup-paid-note,
.vatty-signup-page #vatty-step-2 .vatty-register-name-row {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.vatty-signup-page #vatty-step-2 form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.vatty-signup-page #vatty-step-2 .vatty-register-name-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.vatty-login-page .vatty-login-field {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Text inputs inside login fields fill full width — but NOT checkboxes or buttons */
.vatty-login-page .vatty-login-field input:not([type="checkbox"]),
.vatty-login-page .vatty-password-wrap input:not([type="checkbox"]) {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* password-wrap is full width but overflow-visible so toggle sits inside */
.vatty-login-page .vatty-password-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
}

/* Submit buttons are full width; password-toggle is NOT */
.vatty-login-page .vatty-login-submit,
.vatty-signup-page .vatty-login-submit {
    width: 100% !important;
    box-sizing: border-box !important;
}

.vatty-signup-page .vatty-plan-grid--compact {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.vatty-signup-page .vatty-plan-card,
.vatty-signup-page .vatty-plan-row {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {

    body.vatty-login-page,
    body.vatty-signup-page.vatty-login-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .vatty-signup-page .vatty-plan-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .vatty-signup-page #vatty-step-2 .vatty-register-name-row {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   TARGETED FIXES: password eye, checkbox, plan card text
   ============================================================ */

/* 1. Password toggle: always a fixed 44px wide, never full-width */
.vatty-password-toggle {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    max-width: 44px !important;
    min-width: 0 !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    color: #64748b !important;
    box-sizing: border-box !important;
}

/* 2. Checkbox: locked dimensions, never full-width */
.vatty-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    flex: 0 0 16px !important;
    margin-top: 2px !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    accent-color: var(--brand) !important;
    cursor: pointer !important;
}

/* 3. Plan card text: fit within ~117px cards */
.vatty-plan-row {
    padding: 14px 12px !important;
}

.vatty-plan-row-name {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

.vatty-plan-row-companies {
    font-size: 11px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

.vatty-plan-row-amount {
    font-size: 18px !important;
    white-space: nowrap !important;
}

.vatty-plan-row-period {
    font-size: 11px !important;
    white-space: normal !important;
}

.vatty-login-page .vatty-plan-row-name,
.vatty-login-page .vatty-plan-row-amount {
    font-size: 13px !important;
}

.vatty-login-page .vatty-plan-row-amount {
    font-size: 18px !important;
}

/* ── VAT Number Checker ── */
.vatty-vat-checker-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

.vatty-vat-checker-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.vatty-vat-checker-icon {
    position: absolute;
    left: 13px;
    color: var(--ink-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.vatty-vat-checker-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 44px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    letter-spacing: .02em;
}

.vatty-vat-checker-input:focus {
    border-color: var(--brand, #0a91b1);
    box-shadow: 0 0 0 3px rgba(10,145,177,.1);
}

.vatty-vat-checker-input::placeholder { color: var(--ink-faint, #94a3b8); }

/* Result card */
.vatty-vat-result-card {
    border-radius: 12px;
    border: 1.5px solid var(--border);
    overflow: hidden;
    margin-bottom: 20px;
}

.vatty-vat-result-card--valid {
    border-color: #86efac;
    background: #f0fdf4;
}

.vatty-vat-result-card--invalid {
    border-color: #fca5a5;
    background: #fef2f2;
}

.vatty-vat-result-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}

.vatty-vat-result-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vatty-vat-result-card--valid .vatty-vat-result-icon {
    background: #dcfce7;
    color: #16a34a;
}

.vatty-vat-result-card--invalid .vatty-vat-result-icon {
    background: #fee2e2;
    color: #dc2626;
}

.vatty-vat-result-vat {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-family: ui-monospace, monospace;
    letter-spacing: .03em;
}

.vatty-vat-result-status {
    font-size: 13px;
    margin-top: 2px;
}

.vatty-vat-result-card--valid .vatty-vat-result-status { color: #16a34a; }
.vatty-vat-result-card--invalid .vatty-vat-result-status { color: #dc2626; }

.vatty-vat-result-details {
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vatty-vat-result-row {
    display: flex;
    gap: 16px;
    font-size: 13px;
    align-items: baseline;
}

.vatty-vat-result-row span:first-child {
    width: 80px;
    flex-shrink: 0;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}


/* ── Gmail preview modal ─────────────────────────────────── */

#vatty-gmail-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}
#vatty-gmail-preview-modal.vatty-modal--open {
    opacity: 1;
    pointer-events: all;
}
.vatty-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
}
.vatty-gmail-preview-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.22);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(8px);
    transition: transform .18s;
}
#vatty-gmail-preview-modal.vatty-modal--open .vatty-gmail-preview-box {
    transform: translateY(0);
}
.vatty-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.vatty-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.vatty-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-faint);
    padding: 2px 6px;
    border-radius: 6px;
    transition: background .12s, color .12s;
}
.vatty-modal-close:hover {
    background: var(--surface-alt);
    color: var(--ink);
}
.vatty-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 20px 22px;
}

/* Meta header */
.vatty-gmail-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.vatty-gmail-preview-meta-row {
    display: flex;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
}
.vatty-gmail-preview-meta-row span {
    width: 56px;
    flex-shrink: 0;
    color: var(--ink-faint);
    font-weight: 500;
}
.vatty-gmail-preview-meta-row strong {
    color: var(--ink);
    font-weight: 500;
    word-break: break-word;
}

/* Split layout: email body | attachment */
.vatty-gmail-preview-cols {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vatty-gmail-preview-cols--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.vatty-gmail-preview-email,
.vatty-gmail-preview-attachment {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.vatty-gmail-preview-iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
}
.vatty-gmail-preview-text {
    padding: 16px;
    font-size: 13px;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    max-height: 420px;
    overflow-y: auto;
}
.vatty-gmail-preview-attach-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: #f8fafc;
}
.vatty-gmail-preview-pdf {
    width: 100%;
    height: 420px;
    display: block;
    border: none;
}
.vatty-gmail-preview-img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    display: block;
    padding: 12px;
}

/* Loading spinner */
.vatty-spinner-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    color: var(--ink-muted);
    font-size: 14px;
}
.vatty-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: vatty-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes vatty-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .vatty-gmail-preview-cols--split {
        grid-template-columns: 1fr;
    }
}

/* ── No bold text anywhere in tables ─────────────────────── */
.vatty-table td strong,
.vatty-table td b {
    font-weight: 500;
}

/* ── Chevron View buttons: clean icon-only style ──────────── */
.vatty-row-btn svg,
.vatty-btn-secondary svg {
    display: block;
}

/* ── Chevron / icon-only row buttons ─────────────────────── */
.vatty-row-btn svg,
.vatty-btn svg {
    display: block;
    flex-shrink: 0;
}


/* ── More menu: Edit item style ──────────────────────────── */
.vatty-more-menu-item:not(.vatty-more-delete) {
    color: var(--ink);
}

/* ── Search input wrapper with icon ─────────────────────── */
.vatty-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.vatty-search-wrap::before {
    content: '';
    position: absolute;
    left: 13px;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.vatty-search-wrap .vatty-search-input,
.vatty-search-wrap .vatty-pack-search-input {
    padding-left: 38px;
    width: 100%;
}

/* ── Remove all table row hovers globally ────────────────── */
.vatty-table tbody tr:hover td,
.vatty-table-wrap table tbody tr:hover td {
    background: inherit !important;
}



/* ── Chevron CTA: identical size/border to more menu button ─ */
.vatty-btn-detail,
.vatty-btn-view-company,
.vatty-co-open-period,
.vatty-period-open,
.vatty-pack-open,
.vatty-btn-open-company-pack,
.vatty-dash-view-period,
.vatty-dashboard-company-profile,
.vatty-insights-view-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: none !important;
    color: var(--ink-muted) !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s !important;
    flex-shrink: 0 !important;
}

.vatty-btn-detail:hover,
.vatty-btn-view-company:hover,
.vatty-co-open-period:hover,
.vatty-period-open:hover,
.vatty-pack-open:hover,
.vatty-btn-open-company-pack:hover,
.vatty-dash-view-period:hover,
.vatty-dashboard-company-profile:hover,
.vatty-insights-view-cta:hover {
    background: var(--surface-alt) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink) !important;
}