@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    :root {
        --navy: #0F172A;
        --navy-light: #1E293B;
        --gold: #2563EB;
        --gold-light: #3B82F6;
        --cream: #F8FAFC;
        --white: #ffffff;
        --green: #059669;
        --green-light: #D1FAE5;
        --red: #DC2626;
        --red-light: #FEE2E2;
        --gray: #64748B;
        --border: #E2E8F0;
        --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
        --shadow-lg: 0 24px 64px rgba(0, 0, 0, .50), 0 0 0 1px rgba(255, 255, 255, .06);
        --shadow-glow: 0 4px 16px rgba(37, 99, 235, .3);
        --indigo: #4F46E5;
    }

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

    /* ── CUSTOM SCROLLBAR ─────────────────────────────── */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: var(--cream);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray);
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--border) var(--cream);
    }

    body {
        font-family: 'Inter', sans-serif;
        background: var(--cream);
        color: var(--navy);
        min-height: 100vh;
    }

    /* ── LOGIN ANIMATIONS ─────────────────────────────── */
    @keyframes loginBgIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes loginCardIn {
        from {
            opacity: 0;
            transform: translateY(28px) scale(0.97);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes loginOrbFloat {

        0%,
        100% {
            transform: translateY(0) scale(1);
        }

        50% {
            transform: translateY(-16px) scale(1.04);
        }
    }

    @keyframes logoCirclePulse {
        0% {
            box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
        }

        70% {
            box-shadow: 0 0 0 14px rgba(37, 99, 235, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
        }
    }

    @keyframes dividerExpand {
        from {
            width: 0;
            opacity: 0;
        }

        to {
            width: 48px;
            opacity: 1;
        }
    }

    @keyframes fadeSlideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes shimmerSlide {
        from {
            left: -80%;
        }

        to {
            left: 130%;
        }
    }

    /* LOGIN SCREEN */
    #loginScreen {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #020817;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
            linear-gradient(155deg, #020817 0%, #0C1220 55%, #0A1530 100%);
        background-size: 64px 64px, 64px 64px, 100% 100%;
        position: relative;
        overflow: hidden;
        animation: loginBgIn 0.6s ease both;
    }

    #loginScreen::before {
        content: '';
        position: absolute;
        top: -200px;
        right: -200px;
        width: 800px;
        height: 800px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 60%);
        animation: loginOrbFloat 7s ease-in-out infinite;
    }

    #loginScreen::after {
        content: '';
        position: absolute;
        bottom: -150px;
        left: -150px;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.13) 0%, transparent 60%);
        animation: loginOrbFloat 9s ease-in-out infinite reverse;
    }

    .login-card {
        background: var(--white);
        border-radius: 20px;
        padding: 52px 48px;
        width: 420px;
        box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.6), 0 32px 80px rgba(0, 0, 0, 0.52), 0 0 40px rgba(37, 99, 235, 0.06);
        position: relative;
        z-index: 1;
        animation: loginCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    .login-logo {
        text-align: center;
        margin-bottom: 36px;
    }

    .logo-circle {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.5px;
        box-shadow: 0 8px 28px rgba(37, 99, 235, 0.35), 0 0 0 4px rgba(37, 99, 235, 0.08);
        animation: loginCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both,
            logoCirclePulse 2.5s ease 1s;
    }

    .login-logo .brand {
        font-family: 'Inter', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--navy);
        letter-spacing: 0.5px;
        animation: fadeSlideUp 0.5s ease 0.5s both;
    }

    .login-logo .brand span {
        color: var(--gold);
    }

    .login-logo .tagline {
        font-size: 12px;
        color: var(--gray);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 4px;
        animation: fadeSlideUp 0.5s ease 0.6s both;
    }

    .gold-divider {
        height: 2px;
        background: linear-gradient(90deg, var(--gold), var(--gold-light));
        margin: 16px auto;
        border-radius: 2px;
        animation: dividerExpand 0.6s ease 0.65s both;
    }

    .login-title {
        font-family: 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 8px;
        color: var(--navy);
        animation: fadeSlideUp 0.5s ease 0.68s both;
    }

    .login-subtitle {
        font-size: 13px;
        color: var(--gray);
        text-align: center;
        margin-bottom: 32px;
        animation: fadeSlideUp 0.5s ease 0.73s both;
    }

    .form-group {
        margin-bottom: 20px;
        animation: fadeSlideUp 0.5s ease 0.78s both;
    }

    .form-group+.form-group {
        animation-delay: 0.84s;
    }

    .form-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 14px 16px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        color: var(--navy);
        background: var(--cream);
        transition: all 0.2s;
        outline: none;
    }

    .form-group input:focus,
    .form-group select:focus {
        border-color: var(--gold);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

    .btn-login {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
        color: var(--white);
        border: none;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.25s;
        margin-top: 8px;
        animation: fadeSlideUp 0.5s ease 0.9s both;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
        position: relative;
        overflow: hidden;
    }

    .btn-login::after {
        content: '';
        position: absolute;
        top: 0;
        left: -80%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
        transition: left 0s;
    }

    .btn-login:hover::after {
        left: 130%;
        transition: left 0.55s ease;
    }

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(37, 99, 235, 0.5);
        background: linear-gradient(135deg, #1D4ED8 0%, #4338CA 100%);
    }

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

    .error-msg {
        color: var(--red);
        font-size: 13px;
        text-align: center;
        margin-top: 12px;
        display: none;
    }

    .contact-hint {
        display: none;
        margin-top: 12px;
        padding: 12px 16px;
        background: rgba(37, 99, 235, 0.06);
        border: 1px solid rgba(37, 99, 235, 0.25);
        border-radius: 10px;
        font-size: 12px;
        color: #1D4ED8;
        text-align: center;
        line-height: 1.5;
        animation: fadeSlideUp 0.4s ease;
    }

    .contact-hint a {
        color: var(--navy);
        font-weight: 600;
        text-decoration: none;
    }

    .contact-hint a:hover {
        text-decoration: underline;
    }

    /* LOADING SPINNER */
    .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        margin-right: 8px;
        vertical-align: middle;
    }

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

    /* MAIN APP */
    #mainApp {
        display: none;
    }

    .header {
        background: linear-gradient(180deg, #0F172A 0%, #0D1523 100%);
        padding: 0 40px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 1px 0 rgba(37, 99, 235, 0.18), 0 4px 24px rgba(0, 0, 0, 0.28);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        color: var(--white);
        font-size: 20px;
        cursor: pointer;
        margin-right: 16px;
    }

    .header-brand {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--white);
    }

    .header-brand span {
        color: var(--gold);
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .header-client {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
    }

    .header-client strong {
        color: var(--white);
        font-weight: 600;
    }

    .header-nav {
        display: flex;
        gap: 20px;
        align-items: center;
        margin-right: auto;
        margin-left: 40px;
    }

    .nav-item {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        padding: 8px 12px;
        border-radius: 8px;
    }

    .nav-item:hover,
    .nav-item.active {
        color: var(--white);
        background: rgba(37, 99, 235, 0.12);
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
    }

    .btn-logout {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: var(--white);
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
    }

    .btn-logout:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* ── SETTINGS PANEL ──────────────────────────────── */
    .settings-card {
        background: var(--white);
        border-radius: 16px;
        box-shadow: var(--shadow);
        max-width: 520px;
    }

    .settings-card-header {
        background: var(--navy);
        border-radius: 16px 16px 0 0;
        padding: 22px 28px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .settings-card-header-icon {
        font-size: 22px;
    }

    .settings-card-title {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        color: var(--white);
        font-weight: 600;
    }

    .settings-card-body {
        padding: 28px;
    }

    .settings-form-group {
        margin-bottom: 18px;
    }

    .settings-form-group label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--navy);
        margin-bottom: 7px;
    }

    .settings-form-group input {
        width: 100%;
        padding: 13px 15px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        color: var(--navy);
        background: var(--cream);
        transition: all 0.2s;
        outline: none;
    }

    .settings-form-group input:focus {
        border-color: var(--gold);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

    .settings-error {
        display: none;
        background: var(--red-light);
        color: var(--red);
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 16px;
    }

    .settings-success {
        display: none;
        background: var(--green-light);
        color: var(--green);
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 16px;
    }

    .btn-settings-save {
        padding: 13px 28px;
        background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
        color: var(--white);
        border: none;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
    }

    .btn-settings-save:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.42);
        background: linear-gradient(135deg, #1D4ED8 0%, #4338CA 100%);
    }

    .btn-settings-save:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .view-section {
        display: none;
    }

    .view-section.active {
        display: block;
    }

    .main-content {
        max-width: 1320px;
        margin: 0 auto;
        padding: 40px;
    }

    .btn-primary {
        background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
        color: var(--white);
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
    }

    .btn-primary:hover {
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38);
        transform: translateY(-1px);
    }

    .btn-outline {
        background: var(--white);
        color: var(--navy);
        border: 1px solid var(--border);
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
    }

    .btn-outline:hover {
        border-color: var(--gold);
        color: var(--gold);
    }

    /* STATS */
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 36px;
    }

    .stat-card {
        background: var(--white);
        border-radius: 14px;
        padding: 20px 24px;
        box-shadow: var(--shadow);
        border-left: 4px solid transparent;
        transition: transform 0.22s, box-shadow 0.22s;
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    }

    .stat-card.total {
        border-left-color: var(--navy);
    }

    .stat-card.total:hover {
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.13);
    }

    .stat-card.pending {
        border-left-color: var(--gold);
    }

    .stat-card.pending:hover {
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.13);
    }

    .stat-card.approved {
        border-left-color: var(--green);
    }

    .stat-card.approved:hover {
        box-shadow: 0 8px 24px rgba(5, 150, 105, 0.13);
    }

    .stat-card.rejected {
        border-left-color: var(--red);
    }

    .stat-card.rejected:hover {
        box-shadow: 0 8px 24px rgba(220, 38, 38, 0.13);
    }

    .stat-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gray);
        margin-bottom: 8px;
    }

    .stat-value {
        font-family: 'Inter', sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: var(--navy);
    }

    .stat-sub {
        font-size: 12px;
        color: var(--gray);
        margin-top: 4px;
    }

    /* SECTION */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .section-title {
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 600;
        color: var(--navy);
    }

    .filter-tabs {
        display: flex;
        gap: 8px;
    }

    .filter-tab {
        padding: 7px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: 1.5px solid var(--border);
        background: var(--white);
        color: var(--gray);
        font-family: 'Inter', sans-serif;
    }

    .filter-tab.active {
        background: #2563EB;
        color: var(--white);
        border-color: #2563EB;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    /* INVOICE TABLE */
    .invoice-table {
        background: var(--white);
        border-radius: 16px;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .invoice-table-header {
        display: grid;
        grid-template-columns: 1.5fr 1.1fr 0.85fr 0.75fr 0.95fr 0.9fr 1fr 2.4fr;
        column-gap: 10px;
        padding: 14px 24px;
        background: #1E293B;
        color: rgba(255, 255, 255, 0.65);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .invoice-table-header>*,
    .invoice-row>* {
        min-width: 0;
    }

    .invoice-table-header .sortable {
        cursor: pointer;
        user-select: none;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .invoice-table-header .sortable:hover {
        color: var(--gold-light);
    }

    .invoice-table-header .num-col {
        justify-content: flex-end;
    }

    .sort-icon {
        font-size: 10px;
        opacity: 0.5;
        transition: opacity 0.2s;
    }

    .sort-icon.sort-active {
        opacity: 1;
        color: var(--gold-light);
    }

    .invoice-row {
        display: grid;
        grid-template-columns: 1.5fr 1.1fr 0.85fr 0.75fr 0.95fr 0.9fr 1fr 2.4fr;
        column-gap: 10px;
        padding: 18px 24px;
        border-bottom: 1px solid var(--border);
        align-items: center;
        transition: background 0.15s;
        cursor: pointer;
    }

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

    .invoice-row:hover {
        background: #F1F5F9;
    }

    .invoice-row.approved {
        background: rgba(45, 122, 79, 0.04);
    }

    .invoice-row.rejected {
        background: rgba(192, 57, 43, 0.04);
    }

    /* Podświetlanie nieopłaconych */
    .invoice-row.row-unpaid {
        border-left: 3px solid #f39c12;
    }

    .invoice-row.row-unpaid-overdue {
        border-left: 3px solid var(--red);
        background: rgba(192, 57, 43, 0.04) !important;
    }

    .invoice-row.row-paid {
        border-left: 3px solid var(--green);
    }

    /* ── PAYMENT BUTTON ──────────────────────────────────────────────── */
    .invoice-paid-cell {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .btn-payment {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 11px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: all 0.2s;
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
    }

    .btn-paid {
        background: var(--green-light);
        color: var(--green);
        border-color: var(--green);
    }

    .btn-paid:hover {
        background: var(--green);
        color: #fff;
    }

    .btn-unpaid {
        background: #fdecea;
        color: var(--red);
        border-color: var(--red);
    }

    .btn-unpaid:hover {
        background: var(--red);
        color: #fff;
    }

    .vendor-name {
        font-weight: 600;
        font-size: 14px;
        color: var(--navy);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 16px;
    }

    .invoice-doc {
        min-width: 0;
        overflow: hidden;
    }

    .invoice-number {
        font-size: 13px;
        color: var(--gray);
        font-family: monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .invoice-date {
        font-size: 13px;
        color: var(--navy);
    }

    .invoice-amount {
        font-weight: 700;
        font-size: 15px;
        color: var(--navy);
        font-family: 'Inter', sans-serif;
    }

    .num-col {
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 4px;
    }

    .invoice-net,
    .invoice-vat {
        font-size: 13px;
        color: var(--gray);
        font-family: 'Inter', sans-serif;
    }

    .invoice-net.vat-adjusted,
    .invoice-vat.vat-adjusted {
        background: rgba(241, 196, 15, 0.2);
        color: #8a6d1a;
        font-weight: 600;
        border-radius: 6px;
        padding: 3px 6px;
        margin: -3px -2px;
    }

    .invoice-vat.vat-adjusted i {
        font-size: 10px;
        color: #c9941a;
        margin-left: 3px;
    }

    .vat-adjusted-note {
        background: rgba(241, 196, 15, 0.12);
        border: 1px solid rgba(201, 148, 26, 0.35);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 12.5px;
        line-height: 1.5;
        color: #6b5410;
    }

    .vat-adjusted-note i {
        color: #c9941a;
        margin-right: 6px;
    }

    .due-date {
        font-size: 13px;
    }

    .due-overdue {
        color: var(--red);
        font-weight: 600;
    }

    .due-soon {
        color: #e67e22;
        font-weight: 500;
    }

    .due-ok {
        color: var(--gray);
    }

    .invoice-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
        align-items: center;
        min-width: 0;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .status-approved {
        background: var(--green-light);
        color: var(--green);
    }

    .status-rejected {
        background: var(--red-light);
        color: var(--red);
    }

    .btn-approve,
    .btn-reject {
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        font-family: 'Inter', sans-serif;
    }

    .btn-approve {
        background: var(--green-light);
        color: var(--green);
    }

    .btn-approve:hover {
        background: var(--green);
        color: var(--white);
        transform: scale(1.05);
    }

    .btn-reject {
        background: var(--red-light);
        color: var(--red);
    }

    .btn-reject:hover {
        background: var(--red);
        color: var(--white);
        transform: scale(1.05);
    }

    /* LOADING STATE */
    .loading-state {
        text-align: center;
        padding: 60px 40px;
        color: var(--gray);
    }

    .loading-state .big-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border);
        border-top-color: var(--navy);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: 0 auto 16px;
    }

    .loading-state p {
        font-size: 14px;
    }

    /* MODAL */
    .modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(26, 39, 68, 0.6);
        z-index: 200;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .modal-overlay.open {
        display: flex;
    }

    .modal {
        background: var(--white);
        border-radius: 20px;
        width: 600px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        animation: modalIn 0.25s ease;
    }

    @keyframes modalIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .modal-header {
        background: var(--navy);
        padding: 24px 32px;
        border-radius: 20px 20px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modal-title {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        color: var(--white);
        font-weight: 600;
    }

    .modal-close {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        font-size: 20px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .modal-close:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.1);
    }

    .modal-body {
        padding: 32px;
    }

    .invoice-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 28px;
    }

    .detail-field label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gray);
        display: block;
        margin-bottom: 6px;
    }

    .detail-field .value {
        font-size: 15px;
        font-weight: 600;
        color: var(--navy);
    }

    .detail-field .value.amount {
        font-family: 'Inter', sans-serif;
        font-size: 24px;
    }

    .pdf-preview {
        background: var(--cream);
        border: 2px dashed var(--border);
        border-radius: 12px;
        padding: 32px;
        text-align: center;
        margin-bottom: 28px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .pdf-preview:hover {
        border-color: var(--gold);
        background: rgba(201, 168, 76, 0.05);
    }

    .pdf-icon {
        font-size: 40px;
        margin-bottom: 8px;
    }

    .pdf-text {
        font-size: 14px;
        color: var(--gray);
    }

    .pdf-text strong {
        color: var(--navy);
        display: block;
        font-size: 15px;
        margin-bottom: 4px;
    }

    /* PDF BUTTON W LIŚCIE */
    .btn-pdf {
        padding: 5px 10px;
        border-radius: 6px;
        border: 1px solid rgba(37, 99, 235, 0.35);
        background: rgba(37, 99, 235, 0.05);
        color: #2563EB;
        cursor: pointer;
        font-size: 11px;
        font-family: 'Inter', sans-serif;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .btn-pdf:hover {
        background: #2563EB;
        border-color: #2563EB;
        color: #fff;
    }

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

    /* PDF VIEWER MODAL */
    #pdfModal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(26, 39, 68, 0.85);
        z-index: 300;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(6px);
    }

    #pdfModal.open {
        display: flex;
    }

    .pdf-modal-inner {
        background: var(--white);
        border-radius: 16px;
        width: 92vw;
        max-width: 900px;
        height: 88vh;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }

    .pdf-modal-header {
        background: var(--navy);
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .pdf-modal-title {
        color: var(--white);
        font-size: 15px;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
    }

    .pdf-modal-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .btn-pdf-download {
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid var(--gold);
        background: transparent;
        color: var(--gold);
        cursor: pointer;
        font-size: 13px;
        font-family: 'Inter', sans-serif;
        transition: all 0.2s;
    }

    .btn-pdf-download:hover {
        background: var(--gold);
        color: var(--navy);
    }

    .btn-pdf-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: rgba(255, 255, 255, 0.8);
        font-size: 20px;
        cursor: pointer;
        padding: 4px 10px;
        border-radius: 6px;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
    }

    .btn-pdf-close:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    #pdfFrame {
        flex: 1;
        border: none;
        width: 100%;
    }

    .pdf-loading {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        color: var(--gray);
    }

    .pdf-loading .big-spinner {
        width: 36px;
        height: 36px;
        border: 3px solid var(--border);
        border-top-color: var(--navy);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .modal-actions {
        display: flex;
        gap: 12px;
    }

    .btn-modal-approve {
        flex: 1;
        padding: 14px;
        background: linear-gradient(135deg, #2d7a4f, #3a9962);
        color: var(--white);
        border: none;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-modal-approve:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(45, 122, 79, 0.35);
    }

    .btn-modal-reject {
        flex: 1;
        padding: 14px;
        background: var(--white);
        color: var(--red);
        border: 2px solid var(--red);
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-modal-reject:hover {
        background: var(--red);
        color: var(--white);
        transform: translateY(-1px);
    }

    /* NOTICE */
    .notice-banner {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(201, 168, 76, 0.06));
        border: 1px solid rgba(37, 99, 235, 0.25);
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 13px;
        color: #1D4ED8;
    }

    .notice-icon {
        font-size: 18px;
        flex-shrink: 0;
    }

    /* EMPTY / ERROR */
    .empty-state {
        text-align: center;
        padding: 60px 40px;
        color: var(--gray);
    }

    .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .empty-title {
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        color: var(--navy);
        margin-bottom: 8px;
    }

    /* FOOTER */
    .footer {
        text-align: center;
        padding: 32px 40px;
        font-size: 12px;
        color: var(--gray);
        border-top: 1px solid var(--border);
        margin-top: 40px;
    }

    /* LINE ITEMS */
    .line-items-header {
        display: grid;
        grid-template-columns: 1fr 80px 110px 36px;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--gray);
        padding: 0 4px;
        margin-bottom: 6px;
    }

    .line-item-row {
        display: grid;
        grid-template-columns: 1fr 80px 110px 36px;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
    }

    .line-item-row input {
        padding: 9px 12px;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        font-size: 13px;
        font-family: 'Inter', sans-serif;
        color: var(--navy);
        background: var(--cream);
        width: 100%;
        transition: border-color 0.2s;
    }

    .line-item-row input:focus {
        outline: none;
        border-color: var(--gold);
        background: var(--white);
    }

    .btn-remove-row {
        width: 36px;
        height: 36px;
        background: var(--red-light);
        border: 1.5px solid rgba(192, 57, 43, 0.25);
        border-radius: 8px;
        color: var(--red);
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .btn-remove-row:hover {
        background: var(--red);
        color: #fff;
    }

    .btn-add-row {
        width: 100%;
        padding: 9px;
        border: 1.5px dashed var(--border);
        border-radius: 8px;
        background: transparent;
        color: var(--gray);
        font-size: 13px;
        font-family: 'Inter', sans-serif;
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 4px;
    }

    .btn-add-row:hover {
        border-color: var(--gold);
        color: var(--navy);
        background: rgba(201, 168, 76, 0.05);
    }

    .line-items-total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1.5px solid var(--border);
        font-size: 14px;
        color: var(--gray);
    }

    .line-items-total strong {
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        color: var(--navy);
    }

    /* TOAST */
    .toast {
        position: fixed;
        bottom: 32px;
        right: 32px;
        background: var(--navy);
        color: var(--white);
        padding: 14px 20px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: var(--shadow-lg);
        z-index: 300;
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        gap: 10px;
    }

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

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

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

    /* COOKIE BANNER */
    .cookie-banner {
        position: fixed;
        bottom: -100px;
        /* starts hidden */
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: 0 -4px 24px rgba(26, 58, 42, 0.15);
        z-index: 500;
        display: flex;
        justify-content: center;
        padding: 16px;
        transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .cookie-banner.show {
        bottom: 0;
    }

    .cookie-content {
        max-width: 1100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .cookie-text {
        font-size: 13px;
        color: var(--gray);
        line-height: 1.5;
    }

    .cookie-text strong {
        color: var(--navy);
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        margin-right: 8px;
    }

    .cookie-btn {
        padding: 10px 24px;
        background: linear-gradient(135deg, var(--navy), var(--navy-light));
        color: var(--white);
        border: none;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .cookie-btn:hover {
        box-shadow: 0 4px 16px rgba(26, 39, 68, 0.25);
        transform: translateY(-1px);
    }

    @media (max-width: 768px) {
        .mobile-menu-btn {
            display: block;
        }

        .header-nav {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 64px;
            left: -100%;
            width: 250px;
            height: calc(100vh - 64px);
            background: var(--navy);
            padding: 20px;
            transition: left 0.3s ease;
            z-index: 99;
            margin-left: 0;
            align-items: flex-start;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
        }

        .header-nav.open {
            left: 0;
        }

        .nav-item {
            width: 100%;
            margin-bottom: 12px;
        }

        .stats-bar,
        .leave-stat-bar {
            grid-template-columns: 1fr;
        }

        /* Card layout for tables */
        .invoice-table-header,
        .lv-hdr,
        .emp-hdr {
            display: none !important;
        }

        .invoice-row,
        .lv-row,
        .emp-row {
            display: flex !important;
            flex-direction: column;
            gap: 8px;
            padding: 16px !important;
            margin-bottom: 12px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--white);
            box-shadow: var(--shadow);
        }

        .invoice-row>*,
        .lv-row>*,
        .emp-row>* {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        /* Fake labels using ::before for invoice row (Purchases) */
        #invoiceList .invoice-row>div:nth-child(1)::before {
            content: "Sprzedawca:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(2)::before {
            content: "Faktura:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(3)::before {
            content: "Netto:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(4)::before {
            content: "VAT:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(5)::before {
            content: "Brutto:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(6)::before {
            content: "Termin:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(7)::before {
            content: "Opłacona:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #invoiceList .invoice-row>div:nth-child(8) {
            justify-content: flex-end;
            margin-top: 8px;
            border-top: 1px solid var(--border);
            padding-top: 12px;
        }

        /* Fake labels for Sales list */
        #salesList .invoice-row>div:nth-child(1)::before {
            content: "Nabywca:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #salesList .invoice-row>div:nth-child(2)::before {
            content: "Nr faktury:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #salesList .invoice-row>div:nth-child(3)::before {
            content: "Data wyst.:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #salesList .invoice-row>div:nth-child(4)::before {
            content: "Termin:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #salesList .invoice-row>div:nth-child(5)::before {
            content: "Kwota:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        /* Fake labels for Customers list */
        #customersList .invoice-row>div:nth-child(1)::before {
            content: "Nazwa:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #customersList .invoice-row>div:nth-child(2)::before {
            content: "NIP/Regon:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #customersList .invoice-row>div:nth-child(3)::before {
            content: "Email:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        #customersList .invoice-row>div:nth-child(4)::before {
            content: "Miasto:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        /* Fake labels for leave row */
        .lv-row>div:nth-child(1)::before {
            content: "Pracownik:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .lv-row>div:nth-child(2)::before {
            content: "Typ urlopu:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .lv-row>div:nth-child(3)::before {
            content: "Okres:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .lv-row>div:nth-child(4)::before {
            content: "Dni:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .lv-row>div:nth-child(5)::before {
            content: "Złożono:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .lv-row>div:nth-child(6) {
            justify-content: flex-end;
            margin-top: 8px;
            border-top: 1px solid var(--border);
            padding-top: 12px;
        }

        /* Fake labels for employee row */
        .emp-row>div:nth-child(1)::before {
            content: "Pracownik:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .emp-row>div:nth-child(2)::before {
            content: "Saldo urlop.:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .emp-row>div:nth-child(3)::before {
            content: "Zaległy:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .emp-row>div:nth-child(4)::before {
            content: "Wykorzystano:";
            color: var(--gray);
            font-size: 11px;
            text-transform: uppercase;
        }

        .emp-row>div:nth-child(5) {
            justify-content: flex-end;
            margin-top: 8px;
            border-top: 1px solid var(--border);
            padding-top: 12px;
        }

        .main-content {
            padding: 24px 16px;
        }

        .header {
            padding: 0 16px;
        }

        .header-right select.lang-select {
            display: none;
        }

        .login-card {
            width: 95%;
            padding: 32px 20px;
            margin: 20px 0;
        }

        .role-tabs {
            display: flex !important;
            flex-direction: column;
        }

        .role-tab {
            width: 100%;
            margin-bottom: 4px;
        }

        .modal {
            width: 95%;
            padding: 20px;
        }

        .header-brand {
            margin-right: auto;
        }
    }

    /* ── URLOPY ── */
    .leave-stat-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 24px;
    }

    .leave-stat {
        background: var(--white);
        border-radius: 12px;
        padding: 16px 20px;
        box-shadow: var(--shadow);
        border-left: 4px solid transparent;
        transition: transform .2s;
    }

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

    .leave-stat.lv1 {
        border-left-color: var(--gold);
    }

    .leave-stat.lv2 {
        border-left-color: var(--green);
    }

    .leave-stat.lv3 {
        border-left-color: var(--blue);
    }

    .leave-stat.lv4 {
        border-left-color: var(--red);
    }

    .leave-table {
        background: var(--white);
        border-radius: 14px;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .lv-hdr {
        display: grid;
        grid-template-columns: 2fr 1.6fr 1.2fr 1fr 1.2fr 1.2fr;
        padding: 12px 22px;
        background: #1E293B;
        color: rgba(255, 255, 255, .65);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .lv-row {
        display: grid;
        grid-template-columns: 2fr 1.6fr 1.2fr 1fr 1.2fr 1.2fr;
        padding: 15px 22px;
        border-bottom: 1px solid var(--border);
        align-items: center;
        transition: background .15s;
    }

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

    .lv-row:hover {
        background: #F1F5F9;
    }

    .lv-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
    }

    .lv-type-wypoczynkowy {
        background: var(--green-light);
        color: var(--green);
    }

    .lv-type-zalegly {
        background: #fef3e7;
        color: #e67e22;
    }

    .lv-type-okolicznosciowy {
        background: var(--blue-light);
        color: var(--blue);
    }

    .lv-type-bezplatny {
        background: #f3e8ff;
        color: #7c3aed;
    }

    .lv-type-macierzynski {
        background: #fce7f3;
        color: #be185d;
    }

    .lv-type-rodzicielski {
        background: #fff7ed;
        color: #c2410c;
    }

    .lv-type-ojcowski {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .lv-type-wychowawczy {
        background: #f0fdf4;
        color: #166534;
    }

    .lv-type-na_zadanie {
        background: #fefce8;
        color: #854d0e;
    }

    .lv-status {
        display: inline-flex;
        align-items: center;
        padding: 3px 11px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .lv-pending {
        background: rgba(217, 119, 6, 0.1);
        color: #B45309;
    }

    .lv-approved {
        background: var(--green-light);
        color: var(--green);
    }

    .lv-rejected {
        background: var(--red-light);
        color: var(--red);
    }

    .lv-row-actions {
        display: flex;
        gap: 6px;
    }

    .btn-lv-ok {
        padding: 5px 12px;
        border-radius: 6px;
        background: var(--green-light);
        color: var(--green);
        border: none;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all .2s;
    }

    .btn-lv-ok:hover {
        background: var(--green);
        color: #fff;
    }

    .btn-lv-rej {
        padding: 5px 12px;
        border-radius: 6px;
        background: var(--red-light);
        color: var(--red);
        border: none;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all .2s;
    }

    .btn-lv-rej:hover {
        background: var(--red);
        color: #fff;
    }

    .lv-filter-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .lv-filter-tab {
        padding: 7px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        border: 1.5px solid var(--border);
        background: var(--white);
        color: var(--gray);
        font-family: 'Inter', sans-serif;
        transition: all .2s;
    }

    .lv-filter-tab.active {
        background: #2563EB;
        color: #fff;
        border-color: #2563EB;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    /* ── PRACOWNICY ── */
    .emp-table {
        background: var(--white);
        border-radius: 14px;
        box-shadow: var(--shadow);
        overflow: hidden;
        margin-bottom: 24px;
    }

    .emp-hdr {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
        padding: 12px 22px;
        background: #1E293B;
        color: rgba(255, 255, 255, .65);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .emp-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
        padding: 15px 22px;
        border-bottom: 1px solid var(--border);
        align-items: center;
        transition: background .15s;
    }

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

    .emp-row:hover {
        background: #F1F5F9;
    }

    .emp-name {
        font-weight: 600;
        font-size: 14px;
    }

    .saldo-mini {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
    }

    .saldo-mini.ok {
        color: var(--green);
    }

    .saldo-mini.warn {
        color: var(--orange);
    }

    .saldo-mini.low {
        color: var(--red);
    }

    .emp-actions {
        display: flex;
        gap: 6px;
    }

    .btn-emp {
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all .2s;
        font-family: 'Inter', sans-serif;
        border: none;
    }

    .btn-emp.edit {
        background: var(--blue-light);
        color: var(--blue);
    }

    .btn-emp.edit:hover {
        background: var(--blue);
        color: #fff;
    }

    .btn-emp.del {
        background: var(--red-light);
        color: var(--red);
    }

    .btn-emp.del:hover {
        background: var(--red);
        color: #fff;
    }

    .code-box {
        background: linear-gradient(135deg, var(--navy), var(--navy-light));
        color: #fff;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        margin: 16px 0;
    }

    .code-box .code-val {
        font-family: monospace;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 4px;
        color: #e8c97a;
        display: block;
        margin: 8px 0;
    }

    .code-box small {
        font-size: 12px;
        opacity: .7;
    }

    /* ─── Panel boczny: Projekty ────────────────────────────────────────── */
    .projects-sidebar {
        position: fixed;
        top: 64px;
        right: -320px;
        width: 300px;
        height: calc(100vh - 64px);
        background: var(--white);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease;
        z-index: 150;
        overflow-y: auto;
        padding: 20px;
    }

    .projects-sidebar.open {
        right: 0;
    }

    .projects-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 16px;
        color: var(--navy);
        margin-bottom: 16px;
    }

    .projects-sidebar-header button {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--gray);
        font-size: 16px;
    }

    .project-drop-zone {
        transition: background 0.2s;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 8px;
        font-size: 13px;
    }

    .project-drop-zone.flash {
        background: var(--green-light);
    }

    .project-drop-zone-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
    }

    .project-drop-zone button {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--gray);
        font-size: 12px;
        padding: 2px 4px;
    }

    .project-chevron {
        font-size: 10px;
        display: inline-block;
        transition: transform 0.2s;
        color: var(--gray);
    }

    .project-chevron.expanded {
        transform: rotate(90deg);
    }

    .project-invoices-list {
        margin-top: 8px;
    }

    .project-invoice-row {
        padding: 6px 4px 6px 18px;
        font-size: 12px;
        border-top: 1px solid var(--border);
        cursor: pointer;
    }

    .project-invoice-row:hover {
        background: var(--cream);
    }

    .project-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 6px;
        background: var(--cream);
        font-size: 11px;
        color: var(--navy);
        white-space: nowrap;
    }

    .project-badge i {
        cursor: pointer;
        color: var(--gray);
    }

    .project-badge-empty {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 6px;
        color: var(--gray);
        font-style: italic;
        background: transparent;
        border: 1px dashed var(--border);
        font-size: 11px;
        white-space: nowrap;
    }

    /* ── LANGUAGE PICKER ─────────────────────────────── */
    .lang-picker {
        position: relative;
        display: inline-block;
    }

    .lang-picker-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        color: var(--white);
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    /* Light variant (on light backgrounds like login card) */
    .lang-picker:not(.lang-picker--dark) .lang-picker-btn {
        background: rgba(15,23,42,0.06);
        border-color: var(--border);
        color: var(--navy);
    }

    .lang-picker-btn:hover {
        background: rgba(255,255,255,0.15);
    }

    .lang-picker:not(.lang-picker--dark) .lang-picker-btn:hover {
        background: var(--cream);
        border-color: var(--gold);
    }

    .lang-flag {
        font-size: 16px;
        line-height: 1;
    }

    .lang-code {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .lang-picker-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(15,23,42,0.16);
        min-width: 140px;
        z-index: 200;
        overflow: hidden;
        animation: fadeSlideUp 0.15s ease;
    }

    .lang-picker.open .lang-picker-dropdown {
        display: block;
    }

    .lang-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 500;
        color: var(--navy);
        cursor: pointer;
        transition: background 0.15s;
    }

    .lang-option:hover {
        background: var(--cream);
    }

    .lang-option span {
        font-weight: 600;
    }

    /* ── SETTINGS LANGUAGE BUTTONS ───────────────────── */
    .settings-lang-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 16px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        background: var(--white);
        color: var(--navy);
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
    }

    .settings-lang-btn:hover {
        border-color: var(--gold);
        background: var(--cream);
    }

    .invoice-toolbar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .invoice-search-wrap {
        position: relative;
        flex: 1;
        min-width: 220px;
    }

    .invoice-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray);
        font-size: 14px;
        pointer-events: none;
    }

    .invoice-search {
        width: 100%;
        padding: 10px 14px 10px 40px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-size: 14px;
        font-family: 'DM Sans', sans-serif;
        background: var(--white);
        color: var(--navy);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        box-shadow: 0 1px 4px rgba(26,58,42,0.06);
    }

    .invoice-search:focus {
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(26,58,42,0.08);
    }

    /* Filter tab variants */
    .filter-tab-unpaid {
        border-color: #f39c12 !important;
        color: #b07d10 !important;
    }

    .filter-tab-unpaid.active,
    .filter-tab-unpaid:hover {
        background: #f39c12 !important;
        color: #fff !important;
        border-color: #f39c12 !important;
    }

    .filter-tab-paid {
        border-color: var(--green) !important;
        color: var(--green) !important;
    }

    .filter-tab-paid.active,
    .filter-tab-paid:hover {
        background: var(--green) !important;
        color: #fff !important;
        border-color: var(--green) !important;
    }

    .btn-secondary {
        background: #b5b5b5;
        color: black;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
    }