* {
    box-sizing: border-box;
}


body {
    margin: 0;
    font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
    background: #f0f4f8;
    color: #0f172a;
}


a {
    text-decoration: none;
}


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


.sidebar {
    width: 250px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 24px 18px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
}


.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 8px 6px;
}


.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #0D2B4E;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}


.brand h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}


.brand p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #4a6580;
}


.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.nav-link {
    color: #1e3a5f;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.2s ease;
}


.nav-link:hover {
    background: #f3f4f6;
    color: #0D2B4E;
}


.main-content {
    margin-left: 250px;
    width: calc(100% - 250px);
    padding: 32px;
}


.page-shell {
    max-width: 1380px;
    margin: 0 auto;
}


.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px 5px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
    margin-bottom: 6px;
    white-space: nowrap;
}
.back-link:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}
.back-link svg { flex-shrink: 0; }

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


.page-header h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    color: #0D2B4E;
}


.page-header p {
    margin: 0;
    color: #4a6580;
    font-size: 15px;
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}


.stats-grid-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 0;
}


.stat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}


.compact-card {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}


.stat-label {
    display: inline-block;
    font-size: 13px;
    color: #4a6580;
    margin-bottom: 10px;
}


.stat-card h3 {
    margin: 0 0 8px;
    font-size: 26px;
    color: #0D2B4E;
}


.stat-card p {
    margin: 0;
    color: #4a6580;
    font-size: 14px;
}


.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}


.panel-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin-bottom: 20px;
}


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


.panel-header h2 {
    margin: 0;
    font-size: 20px;
    color: #0D2B4E;
}


.clean-list {
    margin: 0;
    padding-left: 18px;
    color: #4b5563;
}


.clean-list li {
    margin-bottom: 10px;
}


.clean-list p {
    margin: 0 0 8px;
    color: #4b5563;
}


.form-card {
    margin-bottom: 24px;
}


.account-form,
.customer-form,
.filter-grid,
.register-grid,
.auth-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}


.auth-form {
    grid-template-columns: 1fr;
}


.invoice-top-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}


.journal-top-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    margin-bottom: 20px;
}


.form-group {
    display: flex;
    flex-direction: column;
}


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


.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 8px;
}


.form-group input,
.form-group select,
.form-group textarea,
.table-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    color: #0D2B4E;
    outline: none;
    box-sizing: border-box;
}

/* Compact variant for dense payroll line-item tables */
.lonpost-table .table-input {
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13px;
}
.lonpost-table .code-inp {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    background: #f0f4ff;
    border-color: #c7d2fe;
    color: #3730a3;
    letter-spacing: .04em;
    min-width: 0;
}


.form-group textarea {
    min-height: 110px;
    resize: vertical;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.table-input:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.05);
}


.form-actions {
    grid-column: 1 / -1;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.form-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}


.primary-btn,
.secondary-btn,
.danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: 0.2s ease;
    text-align: center;
}


.primary-btn {
    background: linear-gradient(135deg, #2ECEC4, #19B5AB);
    color: #fff;
}


.primary-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}


.secondary-btn {
    background: #f0f4f8;
    color: #0D2B4E;
    border: 1px solid #d1dce8;
}


.secondary-btn:hover {
    background: #e2ebf4;
    border-color: #2ECEC4;
}


.danger-btn {
    background: #fee2e2;
    color: #991b1b;
}


.danger-btn:hover {
    background: #fecaca;
}


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


.bulk-toolbar select,
.bulk-toolbar input {
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 14px;
    background: white;
    color: #0D2B4E;
}


.table-wrapper {
    overflow-x: auto;
    width: 100%;
}


.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}


.data-table thead th {
    text-align: left;
    font-size: 13px;
    color: #4a6580;
    font-weight: 600;
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
}


.data-table tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #1e3a5f;
    vertical-align: middle;
}


.table-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #1e3a5f;
    font-size: 12px;
    font-weight: 600;
}


.action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.inline-form {
    margin: 0;
}


.alert {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 500;
}


.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}


.alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}


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


.detail-item {
    background: #f9fafb;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 16px;
}


.detail-item-full {
    grid-column: 1 / -1;
}


.detail-label {
    display: block;
    font-size: 12px;
    color: #4a6580;
    margin-bottom: 8px;
}


.auth-page-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}


.auth-card {
    width: 100%;
    max-width: 480px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}


.auth-card-wide {
    max-width: 760px;
}


.auth-card h1 {
    margin: 0 0 8px;
    font-size: 28px;
}


.auth-card p {
    margin: 0 0 20px;
    color: #4a6580;
}


.auth-btn {
    width: 100%;
}


.auth-switch {
    margin-top: 18px;
    font-size: 14px;
}


.auth-switch a {
    color: #0D2B4E;
    font-weight: 600;
}


.drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s ease;
}


.drop-zone:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}


.drop-zone.dragover {
    border-color: #2563eb;
    background: #dbeafe;
}


.drop-zone-content h3 {
    margin: 10px 0 6px;
    font-size: 20px;
}


.drop-zone-content p {
    margin: 0;
    color: #64748b;
}


.drop-zone-icon {
    font-size: 34px;
    line-height: 1;
}


.selected-file-name {
    margin-top: 14px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}


.hidden {
    display: none !important;
}


.w-full {
    width: 100%;
}


.text-muted {
    color: #4a6580;
}


.mb-0 {
    margin-bottom: 0;
}


.mt-20 {
    margin-top: 20px;
}


/* Modals */


.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}


.modal-card {
    width: 100%;
    max-width: 560px;
    background: white;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}


.modal-card-large {
    max-width: 980px;
}


.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
    gap: 12px;
}


.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #0D2B4E;
}


.modal-close-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: #f3f4f6;
    color: #0D2B4E;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s ease;
}


.modal-close-btn:hover {
    background: #e5e7eb;
}


.modal-body {
    padding: 22px;
    max-height: 75vh;
    overflow-y: auto;
}


.modal-body p {
    margin-top: 0;
    color: #4b5563;
}


.modal-actions {
    padding: 0 22px 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* Viewer */


.viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1200;
}


.viewer-shell {
    width: min(1200px, 96vw);
    height: min(90vh, 920px);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
}


.viewer-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(248, 250, 252, 0.9);
}


.viewer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}


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


.viewer-body {
    flex: 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: white;
}


.viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}


.viewer-loading {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}


.viewer-fallback {
    padding: 24px;
    text-align: center;
}


.viewer-fallback p {
    margin: 0 0 16px;
    color: #64748b;
}


/* Hover peek */


.hover-peek {
    position: absolute;
    width: 340px;
    height: 240px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(10px);
    z-index: 1300;
    pointer-events: auto;
}


.hover-peek-inner {
    width: 100%;
    height: 100%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.preview-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    color: #0D2B4E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
    font-size: 16px;
    padding: 0;
}


.preview-icon-btn:hover {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}


/* Generic actions popover */


.actions-popover {
    position: absolute;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
    padding: 8px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 6px;
    backdrop-filter: blur(10px);
}


.actions-popover-link {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: #0D2B4E;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    transition: 0.2s ease;
}


.actions-popover-link:hover {
    background: #f3f4f6;
}


/* Document row actions menu */


.doc-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 90px;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
    padding: 8px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.doc-actions-link {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: #0D2B4E;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s ease;
}


.doc-actions-link:hover {
    background: #f3f4f6;
}


/* Mini popup */


.doc-row-actions {
    position: relative;
}


.mini-popup-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}


.mini-popup-card {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
    padding: 8px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 6px;
    backdrop-filter: blur(10px);
}


.mini-popup-card::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}


.mini-popup-link {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: #0D2B4E;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s ease;
    position: relative;
    z-index: 1;
}


.mini-popup-link:hover {
    background: #f3f4f6;
}


/* Responsive */


@media (max-width: 1100px) {
    .stats-grid,
    .stats-grid-detail,
    .content-grid,
    .account-form,
    .customer-form,
    .filter-grid,
    .register-grid,
    .invoice-top-grid,
    .journal-top-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }


    .page-shell {
        max-width: 100%;
    }
}


@media (max-width: 768px) {
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }


    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 20px;
    }


    .app-layout {
        flex-direction: column;
    }


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


    .panel-card {
        padding: 18px;
    }


    .modal-overlay,
    .viewer-overlay {
        padding: 12px;
    }


    .modal-card,
    .modal-card-large {
        max-width: 100%;
    }


    .viewer-shell {
        width: 100%;
        height: 86vh;
        border-radius: 18px;
    }


    .hover-peek {
        display: none !important;
    }


    .bulk-toolbar {
        flex-direction: column;
        align-items: stretch;
    }


    .bulk-toolbar select,
    .bulk-toolbar input,
    .bulk-toolbar button {
        width: 100%;
    }


    .action-group {
        width: 100%;
    }


    .action-group .primary-btn,
    .action-group .secondary-btn,
    .action-group .danger-btn {
        width: 100%;
    }


    .form-actions-row {
        flex-direction: column;
        align-items: stretch;
    }


    .form-actions-row .primary-btn,
    .form-actions-row .secondary-btn,
    .form-actions-row .danger-btn {
        width: 100%;
    }


    .doc-actions-menu,
    .actions-popover,
    .mini-popup-card {
        left: 0 !important;
        right: auto;
        min-width: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════
   FX DESIGN SYSTEM — shared futuristic components
═══════════════════════════════════════════════════════════ */

.fx-shell { display:flex; flex-direction:column; gap:22px; }

/* Page header banner */
.fx-page-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 28px;
    background:linear-gradient(135deg,#0D2B4E 0%,#0e3a6e 60%,#0D2B4E 100%);
    border-radius:14px; border:1px solid rgba(46,206,196,.2);
    position:relative; overflow:hidden;
}
.fx-page-head::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 70% 50%,rgba(46,206,196,.1) 0%,transparent 60%);
    pointer-events:none;
}
.fx-page-head h1 { font-size:20px; font-weight:700; color:#fff; margin:0 0 3px; letter-spacing:-.3px; }
.fx-page-head p  { font-size:12px; color:rgba(255,255,255,.55); margin:0; }
.fx-page-head-right { display:flex; gap:8px; position:relative; z-index:1; }

/* Light cards */
.fx-card {
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:22px 24px;
    box-shadow:0 1px 4px rgba(13,43,78,.06);
}
.fx-card-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; gap:12px;
}
.fx-card-title { font-size:14px; font-weight:600; color:#0D2B4E; }
.fx-card-sub   { font-size:11px; color:#64748b; margin-top:2px; }

/* Inputs */
.fx-input, .fx-select, .fx-textarea {
    background:#fff; border:1px solid #cbd5e1;
    color:#0D2B4E; padding:9px 12px; border-radius:9px;
    font-size:13px; width:100%; outline:none;
    font-family:inherit; transition:border-color .15s;
}
.fx-input:focus, .fx-select:focus, .fx-textarea:focus {
    border-color:#2ECEC4; box-shadow:0 0 0 2px rgba(46,206,196,.15);
}
.fx-input::placeholder { color:#94a3b8; }
.fx-label { font-size:11px; font-weight:600; color:#475569; text-transform:uppercase;
            letter-spacing:.4px; margin-bottom:5px; display:block; }

/* Form group */
.fx-form-group { display:flex; flex-direction:column; gap:0; }
.fx-form-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; align-items:end; }
.fx-form-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:end; }
.fx-form-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:end; }
.fx-col-full   { grid-column:1/-1; }

/* Buttons */
.fx-btn-primary {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px; border-radius:9px; border:none; cursor:pointer;
    font-size:12px; font-weight:600; font-family:inherit;
    background:linear-gradient(135deg,#2ECEC4,#19B5AB);
    color:#fff; transition:opacity .15s, transform .1s;
}
.fx-btn-primary:hover { opacity:.9; transform:translateY(-1px); }

.fx-btn-ghost {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:9px; cursor:pointer;
    font-size:12px; font-weight:600; font-family:inherit;
    background:#f8fafc; border:1px solid #e2e8f0;
    color:#334155; text-decoration:none; transition:all .15s;
}
.fx-btn-ghost:hover { border-color:#2ECEC4; color:#0D2B4E; }

.fx-btn-danger {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:9px; border:1px solid #fecaca; cursor:pointer;
    font-size:12px; font-weight:600; font-family:inherit;
    background:#fef2f2; color:#dc2626; transition:all .15s;
}
.fx-btn-danger:hover { background:#fee2e2; border-color:#fca5a5; }

.fx-btn-success {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:9px; border:1px solid #86efac; cursor:pointer;
    font-size:12px; font-weight:600; font-family:inherit;
    background:#f0fdf4; color:#166534; transition:all .15s;
}
.fx-btn-success:hover { background:#dcfce7; }

/* Tables */
.fx-table-wrap { overflow-x:auto; border-radius:10px; border:1px solid #f1f5f9; }
.fx-table { width:100%; border-collapse:collapse; }
.fx-table thead th {
    padding:9px 16px; font-size:10px; font-weight:600; letter-spacing:.6px;
    text-transform:uppercase; color:#475569; background:#f8fafc;
    text-align:left; white-space:nowrap; border-bottom:1px solid #e2e8f0;
}
.fx-table thead th:first-child { border-radius:8px 0 0 0; }
.fx-table thead th:last-child  { border-radius:0 8px 0 0; }
.fx-table tbody tr { border-top:1px solid #f1f5f9; transition:background .1s; }
.fx-table tbody tr:hover { background:#f8fafc; }
.fx-table tbody td { padding:10px 16px; font-size:12px; color:#334155; }
.fx-table tfoot td { padding:10px 16px; font-size:12px; font-weight:700;
                     color:#0D2B4E; background:#f8fafc; border-top:2px solid #e2e8f0; }

/* Badges */
.fx-badge {
    display:inline-flex; align-items:center; padding:2px 8px;
    border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
}
.fx-badge-asset     { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.fx-badge-liability { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.fx-badge-income    { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.fx-badge-expense   { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.fx-badge-paid      { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.fx-badge-unpaid    { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.fx-badge-partial   { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.fx-badge-posted    { background:#e0faf8; color:#0D2B4E; border:1px solid #2ECEC4; }
.fx-badge-pending   { background:#f3f4f6; color:#1e3a5f; border:1px solid #e5e7eb; }
.fx-badge-neutral   { background:#f3f4f6; color:#1e3a5f; border:1px solid #e5e7eb; }
.fx-badge-info      { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.fx-badge-purple    { background:#f3e8ff; color:#6b21a8; border:1px solid #d8b4fe; }

/* Filter/search bar */
.fx-filter-row {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:14px 0; border-bottom:1px solid #e2e8f0; margin-bottom:14px;
}
.fx-search-box {
    position:relative; flex:1; min-width:180px;
}
.fx-search-box svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:#94a3b8; }
.fx-search-box input {
    background:#f8fafc; border:1px solid #e2e8f0;
    color:#334155; padding:8px 12px 8px 32px; border-radius:9px;
    font-size:12px; width:100%; outline:none; font-family:inherit;
}
.fx-search-box input:focus { border-color:#2ECEC4; }
.fx-search-box input::placeholder { color:#94a3b8; }

/* Drag handle */
.fx-drag-handle {
    cursor:grab; color:#334155; padding:0 8px; display:flex; align-items:center;
    user-select:none; transition:color .15s;
}
.fx-drag-handle:hover { color:#64748b; }
.sortable-ghost  { opacity:.35; background:rgba(46,206,196,.12)!important; }
.sortable-chosen { cursor:grabbing!important; }
.sortable-drag   { opacity:0; }

/* Inline table inputs */
.fx-table-input {
    background:#fff; border:1px solid #e2e8f0;
    color:#0D2B4E; padding:7px 10px; border-radius:7px;
    font-size:12px; width:100%; outline:none; font-family:inherit;
}
.fx-table-input:focus { border-color:#2ECEC4; }
.fx-table-input::placeholder { color:#94a3b8; }

/* Drag-and-drop file zone */
.fx-drop-zone {
    border:2px dashed rgba(46,206,196,.4); border-radius:12px;
    padding:36px; text-align:center; cursor:pointer;
    background:rgba(46,206,196,.03); transition:all .2s;
    position:relative;
}
.fx-drop-zone.drag-over {
    border-color:#2ECEC4; background:rgba(46,206,196,.08);
    box-shadow:0 0 0 4px rgba(46,206,196,.1);
}
.fx-drop-zone input[type=file] {
    position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.fx-drop-icon { font-size:32px; margin-bottom:10px; opacity:.5; }
.fx-drop-title { font-size:14px; font-weight:600; color:#475569; margin-bottom:4px; }
.fx-drop-sub   { font-size:11px; color:#94a3b8; }

/* Alert */
.fx-alert-error {
    background:#fef2f2; border:1px solid #fecaca;
    color:#991b1b; padding:10px 14px; border-radius:9px; font-size:12px;
    margin-bottom:14px;
}
.fx-alert-success {
    background:#f0fdf4; border:1px solid #bbf7d0;
    color:#166534; padding:10px 14px; border-radius:9px; font-size:12px;
    margin-bottom:14px;
}

/* Live total row */
.fx-total-display {
    display:flex; align-items:center; justify-content:flex-end; gap:20px;
    padding:12px 16px; background:#f8fafc; border:1px solid #e2e8f0;
    border-radius:10px; margin-top:12px;
}
.fx-total-item { text-align:right; }
.fx-total-label { font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:.5px; }
.fx-total-value { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:#0D2B4E; }
.fx-total-value.balanced   { color:#166534; }
.fx-total-value.unbalanced { color:#dc2626; }

/* Popup actions */
.fx-popup-wrap { position:relative; display:inline-block; }
.fx-popup-menu {
    position:absolute; right:0; top:calc(100% + 6px); z-index:50;
    background:#fff; border:1px solid #e2e8f0;
    border-radius:10px; padding:6px; min-width:160px;
    box-shadow:0 8px 24px rgba(13,43,78,.12);
}
.fx-popup-menu.hidden { display:none; }
.fx-popup-link {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:7px; font-size:12px;
    color:#334155; text-decoration:none; transition:background .1s;
}
.fx-popup-link:hover { background:#f0fdfb; color:#0D2B4E; }

/* VAT gauge */
.fx-vat-gauge { position:relative; height:6px; background:rgba(255,255,255,.06);
                border-radius:99px; margin-top:10px; overflow:hidden; }
.fx-vat-gauge-fill { height:100%; border-radius:99px; transition:width .5s ease; }

/* Empty state */
.fx-empty { padding:48px; text-align:center; color:#475569; }
.fx-empty-icon { font-size:36px; opacity:.25; margin-bottom:10px; }
.fx-empty-text { font-size:14px; font-weight:700; color:#475569; }
.fx-empty-sub { font-size:12px; color:#94a3b8; margin-top:6px; }

/* ══════════════════════════════════════════════════════
   Light-module skin (lx-*)  —  customers, bills,
   debitor/kreditor, company, rules, audit_trail
══════════════════════════════════════════════════════ */
.lx-shell{display:flex;flex-direction:column;gap:22px;}
.lx-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:4px;}
.lx-page-head h1{font-size:22px;font-weight:800;color:#0f172a;margin:0;}
.lx-page-head p{font-size:13px;color:#64748b;margin:4px 0 0;}
.lx-page-head-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.lx-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.lx-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.lx-card-title{font-size:14px;font-weight:700;color:#0f172a;}
.lx-card-sub{font-size:12px;color:#94a3b8;margin-top:2px;}
.lx-label{font-size:11px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px;}
.lx-input,.lx-select{width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:9px;font-size:13px;color:#0f172a;background:#fff;transition:border-color .15s;}
.lx-input:focus,.lx-select:focus{outline:none;border-color:#2ECEC4;box-shadow:0 0 0 3px rgba(46,206,196,.12);}
.lx-form-group{display:flex;flex-direction:column;}
.lx-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.lx-form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.lx-col-full{grid-column:1/-1;}
.lx-btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:linear-gradient(135deg,#2ECEC4,#19B5AB);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none;}
.lx-btn-primary:hover{opacity:.88;}
.lx-btn-ghost{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:#f8fafc;color:#334155;border:1px solid #e2e8f0;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s;}
.lx-btn-ghost:hover{background:#f1f5f9;border-color:#cbd5e1;}
.lx-btn-danger{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s;}
.lx-btn-danger:hover{background:#fee2e2;}
.lx-table-wrap{overflow-x:auto;border-radius:10px;border:1px solid #f1f5f9;}
.lx-table{width:100%;border-collapse:collapse;font-size:13px;}
.lx-table thead th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.4px;background:#f8fafc;border-bottom:1px solid #e2e8f0;white-space:nowrap;}
.lx-table tbody td{padding:10px 14px;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:middle;}
.lx-table tbody tr:last-child td{border-bottom:none;}
.lx-table tbody tr:hover{background:#f8fafc;}
.lx-table tfoot td{padding:10px 14px;background:#f8fafc;border-top:2px solid #e2e8f0;font-size:12px;}
.lx-table-input{width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:7px;font-size:12px;color:#0f172a;background:#fff;}
.lx-table-input:focus{outline:none;border-color:#2ECEC4;}
.lx-drag-handle{cursor:grab;color:#cbd5e1;display:flex;align-items:center;padding:0 2px;}
.lx-drag-handle:hover{color:#94a3b8;}
.lx-search-box{display:flex;align-items:center;gap:7px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:7px 12px;}
.lx-search-box input{border:none;background:transparent;font-size:12px;color:#334155;outline:none;width:160px;}
.lx-search-box svg{color:#94a3b8;flex-shrink:0;}
.lx-alert-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:4px;}
.lx-empty{text-align:center;padding:40px 20px;}
.lx-empty-icon{font-size:32px;margin-bottom:8px;opacity:.4;}
.lx-empty-text{font-size:14px;font-weight:700;color:#475569;}
.lx-empty-sub{font-size:12px;color:#94a3b8;margin-top:6px;max-width:380px;margin-left:auto;margin-right:auto;}
.lx-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.lx-kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;border-top-width:3px;}
.lx-kpi-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;}
.lx-kpi-value{font-size:22px;font-weight:800;color:#0f172a;margin:6px 0 2px;font-variant-numeric:tabular-nums;}
.lx-kpi-sub{font-size:11px;color:#94a3b8;}
.lx-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;}
.lx-badge-paid{background:#dcfce7;color:#166534;border:1px solid #86efac;}
.lx-badge-unpaid{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}
.lx-badge-partial{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;}
.lx-badge-posted{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;}
.lx-badge-pending{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;}
.lx-badge-neutral{background:#f3f4f6;color:#1e3a5f;border:1px solid #e5e7eb;}
.lx-badge-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;}
.lx-badge-purple{background:#f3e8ff;color:#6b21a8;border:1px solid #d8b4fe;}
.lx-badge-admin{background:#fdf4ff;color:#7c3aed;border:1px solid #e9d5ff;}
.lx-badge-owner{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}
.lx-badge-staff{background:#f0fdf4;color:#166534;border:1px solid #86efac;}
.lx-badge-create{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;}
.lx-badge-delete{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}
.lx-badge-update{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;}
.lx-popup-wrap{position:relative;}
.lx-popup-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #e2e8f0;border-radius:10px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:100;}
.lx-popup-menu.hidden{display:none;}
.lx-popup-link{display:block;padding:9px 14px;font-size:12px;color:#334155;text-decoration:none;transition:background .12s;}
.lx-popup-link:hover{background:#f8fafc;}
.lx-total-display{display:flex;align-items:center;gap:24px;padding:14px 0 2px;flex-wrap:wrap;margin-top:8px;}
.lx-total-item{display:flex;flex-direction:column;gap:2px;}
.lx-total-label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;}
.lx-total-value{font-size:16px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums;}
.lx-total-value.balanced{color:#16a34a;}
.lx-total-value.unbalanced{color:#dc2626;}
.lx-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.lx-tab{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;color:#475569;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;}
.lx-tab:hover{background:#f8fafc;color:#0f172a;}
.lx-tab.active{background:#2ECEC4;border-color:#2ECEC4;color:#fff;}
.lx-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.lx-summary-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;}
.lx-summary-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
.lx-summary-value{font-size:20px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums;display:block;}
.lx-summary-sub{font-size:11px;color:#94a3b8;display:block;margin-top:2px;}
.lx-summary-warn{color:#dc2626;}
.lx-summary-ok{color:#16a34a;}
.lx-workspace-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,.9fr);gap:20px;align-items:start;}
.lx-detail-card{position:sticky;top:20px;}
.lx-workspace-row{cursor:pointer;transition:background .12s;}
.lx-workspace-row:hover{background:#f8fafc;}
.lx-workspace-row.is-selected{background:#eef2ff;box-shadow:inset 3px 0 0 #2ECEC4;}
.lx-workspace-empty{min-height:280px;border:2px dashed #e2e8f0;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;color:#94a3b8;}
.lx-subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.lx-subtab{border:1px solid #e2e8f0;background:#f8fafc;color:#475569;border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.lx-subtab.active{background:#2ECEC4;border-color:#2ECEC4;color:#fff;}
.lx-subpanel.hidden{display:none;}
.lx-subtab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:#e2e8f0;color:#475569;border-radius:999px;font-size:10px;font-weight:700;}
.lx-subtab.active .lx-subtab-count{background:rgba(255,255,255,.25);color:#fff;}
.lx-overdue-pill{display:inline-block;font-size:10px;font-weight:700;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:5px;padding:1px 6px;margin-left:5px;vertical-align:middle;}
.lx-toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.lx-toolbar-field{display:flex;flex-direction:column;gap:5px;min-width:160px;}
.lx-table-scroll{max-height:640px;overflow:auto;}
.lx-table-scroll thead th{position:sticky;top:0;background:#f8fafc;z-index:2;}
.lx-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.lx-detail-item{display:flex;flex-direction:column;gap:3px;}
.lx-detail-label{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;}
.lx-detail-value{font-size:13px;font-weight:600;color:#0f172a;}
@media(max-width:1100px){.lx-workspace-grid,.lx-summary-grid,.lx-kpi-grid{grid-template-columns:1fr!important;}.lx-detail-card{position:static;}}
@media(max-width:768px){.lx-form-grid,.lx-form-grid-4{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  ≤ 768px
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Shell gaps ── */
  .lx-shell, .fx-shell { gap: 12px; }

  /* ── 2-column grids → 1 column (inline style override) ── */
  [style*="grid-template-columns:360px"],
  [style*="grid-template-columns: 360px"],
  [style*="grid-template-columns:340px"],
  [style*="grid-template-columns: 340px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Dashboard ── */
  .db-hero { flex-direction: column !important; padding: 18px !important; }
  .db-hero-right { flex-wrap: wrap; width: 100%; }
  .db-hero-stat { flex: 1; min-width: calc(50% - 6px); }

  /* ── Idle warning ── */
  #idleWarning { font-size: 12px; padding: 8px 14px; }
}