/* ═══════════════════════════════════════════════════════════
   FinvoX Admin — Design System v1.0
   Aesthetic: Dark fintech, refined, indigo-blue accents
   Fonts: DM Sans + JetBrains Mono
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:          #080b12;
  --bg2:         #0d1120;
  --surface:     #111827;
  --surface2:    #1a2236;
  --surface3:    #223050;
  --border:      rgba(255,255,255,.07);
  --border2:     rgba(255,255,255,.12);
  --accent:      #4f7cff;
  --accent-dim:  rgba(79,124,255,.15);
  --accent-glow: rgba(79,124,255,.35);
  --accent-h:    #7b9fff;
  --success:     #10b981;
  --success-dim: rgba(16,185,129,.15);
  --warning:     #f59e0b;
  --warning-dim: rgba(245,158,11,.15);
  --danger:      #f43f5e;
  --danger-dim:  rgba(244,63,94,.15);
  --purple:      #a855f7;
  --purple-dim:  rgba(168,85,247,.15);
  --text:        #e2e8f0;
  --text2:       #94a3b8;
  --text3:       #4b5e7e;
  --font:        'DM Sans',-apple-system,sans-serif;
  --mono:        'JetBrains Mono',monospace;
  --r:           10px;
  --r-sm:        6px;
  --r-lg:        14px;
  --shadow:      0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 48px rgba(0,0,0,.6);
  --sidebar-w:   240px;
  --header-h:    60px;
}

*,*::before,*::after{box-sizing:border-box}
.finvox-wrap,#finvox-app{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

/* Dark background only when FinvoX app is rendered */
body.wp-admin #wpwrap:has(#finvox-app){background:var(--bg)}
#finvox-app,#finvox-frontend-app{box-sizing:border-box;font-family:var(--font);font-size:14px;color:var(--text);-webkit-font-smoothing:antialiased}
#finvox-app *,#finvox-frontend-app *{box-sizing:border-box}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* FinvoX layout — scoped inside #finvox-app and #finvox-frontend-app */
#finvox-app .fvx-layout,
#finvox-frontend-app .fvx-layout{display:flex;min-height:calc(100vh - 32px)}

#finvox-app .fvx-sidebar,
#finvox-frontend-app .fvx-sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:32px;height:calc(100vh - 32px);overflow:hidden;flex-shrink:0}
.fvx-sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.fvx-sidebar-logo svg{color:var(--accent);flex-shrink:0}
.fvx-logo-text{font-size:18px;font-weight:700;letter-spacing:-.3px}
.fvx-logo-v{font-size:10px;color:var(--text3);margin-left:auto;background:var(--surface2);padding:2px 6px;border-radius:20px}
.fvx-nav{flex:1;padding:12px 8px;overflow-y:auto;min-height:0}
.fvx-nav-group{margin-bottom:20px}
.fvx-nav-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text3);padding:0 12px;margin-bottom:6px;display:block}
#finvox-app .fvx-nav-item,
#finvox-frontend-app .fvx-nav-item{display:flex !important;align-items:center !important;gap:10px !important;padding:9px 12px !important;margin:2px 0 !important;border-radius:var(--r-sm) !important;cursor:pointer !important;transition:background .15s,color .15s !important;color:var(--text2) !important;font-size:13.5px !important;position:relative !important;user-select:none !important;background:transparent !important;border:none !important;width:100% !important;text-align:left !important;list-style:none !important}
#finvox-app .fvx-nav-item:hover,
#finvox-frontend-app .fvx-nav-item:hover{background:var(--surface) !important;color:var(--text) !important}
#finvox-app .fvx-nav-item.active,
#finvox-frontend-app .fvx-nav-item.active{background:var(--accent-dim) !important;color:var(--accent-h) !important}
#finvox-app .fvx-nav-item.active::before,
#finvox-frontend-app .fvx-nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:0 3px 3px 0}
#finvox-app .fvx-nav-item svg,
#finvox-frontend-app .fvx-nav-item svg{flex-shrink:0 !important;opacity:.75 !important}
#finvox-app .fvx-nav-item.active svg,
#finvox-frontend-app .fvx-nav-item.active svg{opacity:1 !important}
.fvx-sidebar-footer{padding:12px 8px 16px;border-top:1px solid var(--border);flex-shrink:0}
.fvx-license-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);background:var(--surface);font-size:12px;color:var(--text2)}
.fvx-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);flex-shrink:0}
.fvx-dot.off{background:var(--text3);box-shadow:none}

.fvx-main{flex:1;display:flex;flex-direction:column;min-height:calc(100vh - 32px);overflow:hidden;min-width:0}
.fvx-topbar{height:var(--header-h);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:16px;position:sticky;top:32px;z-index:50;flex-shrink:0}
.fvx-topbar-title{font-size:16px;font-weight:600;flex:1}
.fvx-topbar-actions{display:flex;align-items:center;gap:10px}
.fvx-content{flex:1;padding:28px;width:100%;overflow-y:auto}

/* Frontend page (shortcode) — no WP admin bar */
#finvox-frontend-app .fvx-layout{min-height:100vh}
#finvox-frontend-app .fvx-sidebar{top:0;height:100vh;position:fixed;left:0;z-index:100}
#finvox-frontend-app .fvx-main{min-height:100vh;margin-left:var(--sidebar-w)}
#finvox-frontend-app .fvx-topbar{top:0}

/* WP admin bar adjustments — only affects FinvoX admin pages */
html.admin-bar #finvox-app .fvx-sidebar{top:32px;height:calc(100vh - 32px)}
html.admin-bar #finvox-app .fvx-topbar{top:32px}
html.admin-bar #finvox-app .fvx-main{min-height:calc(100vh - 32px)}
html.admin-bar #finvox-app .fvx-layout{min-height:calc(100vh - 32px)}
html:not(.admin-bar) #finvox-app .fvx-sidebar{top:0;height:100vh}
html:not(.admin-bar) #finvox-app .fvx-topbar{top:0}

@media screen and (max-width:782px){
  html.admin-bar #finvox-app .fvx-layout{min-height:calc(100vh - 46px)}
  html.admin-bar #finvox-app .fvx-sidebar{top:46px;height:calc(100vh - 46px)}
  html.admin-bar #finvox-app .fvx-main{min-height:calc(100vh - 46px)}
  html.admin-bar #finvox-app .fvx-topbar{top:46px}
}

/* Buttons */
.fvx-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-sm);font-family:var(--font);font-size:13.5px;font-weight:500;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
.fvx-btn:disabled{opacity:.45;pointer-events:none}
.fvx-btn-primary{background:var(--accent);color:#fff}
.fvx-btn-primary:hover{background:var(--accent-h);box-shadow:0 0 16px var(--accent-glow);transform:translateY(-1px)}
.fvx-btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}
.fvx-btn-secondary:hover{background:var(--surface3);border-color:var(--accent);color:var(--accent-h)}
.fvx-btn-ghost{background:transparent;color:var(--text2)}
.fvx-btn-ghost:hover{background:var(--surface);color:var(--text)}
.fvx-btn-danger{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(244,63,94,.25)}
.fvx-btn-danger:hover{background:var(--danger);color:#fff}
.fvx-btn-success{background:var(--success-dim);color:var(--success);border:1px solid rgba(16,185,129,.25)}
.fvx-btn-success:hover{background:var(--success);color:#fff}
.fvx-btn-sm{padding:5px 11px;font-size:12.5px}
.fvx-btn-icon{padding:7px}

/* Cards */
.fvx-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.fvx-card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.fvx-card-title{font-size:14px;font-weight:600}
.fvx-card-body{padding:20px}

/* Stats */
.fvx-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.fvx-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.fvx-stat:hover{border-color:var(--border2);transform:translateY(-2px)}
.fvx-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.fvx-stat.blue::before{background:linear-gradient(90deg,var(--accent),transparent)}
.fvx-stat.green::before{background:linear-gradient(90deg,var(--success),transparent)}
.fvx-stat.yellow::before{background:linear-gradient(90deg,var(--warning),transparent)}
.fvx-stat.red::before{background:linear-gradient(90deg,var(--danger),transparent)}
.fvx-stat.purple::before{background:linear-gradient(90deg,var(--purple),transparent)}
.fvx-stat-icon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fvx-stat.blue .fvx-stat-icon{background:var(--accent-dim);color:var(--accent)}
.fvx-stat.green .fvx-stat-icon{background:var(--success-dim);color:var(--success)}
.fvx-stat.yellow .fvx-stat-icon{background:var(--warning-dim);color:var(--warning)}
.fvx-stat.red .fvx-stat-icon{background:var(--danger-dim);color:var(--danger)}
.fvx-stat.purple .fvx-stat-icon{background:var(--purple-dim);color:var(--purple)}
.fvx-stat-value{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.5px;line-height:1;margin-bottom:6px}
.fvx-stat-label{font-size:12.5px;color:var(--text2)}

/* Table */
.fvx-table-wrap{overflow-x:auto}
.fvx-table{width:100%;border-collapse:collapse}
.fvx-table th{text-align:left;padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);border-bottom:1px solid var(--border);white-space:nowrap}
.fvx-table td{padding:13px 16px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle}
.fvx-table tr:last-child td{border-bottom:none}
.fvx-table tr:hover td{background:rgba(255,255,255,.025)}
.fvx-table .mono{font-family:var(--mono);font-size:13px}

/* Badges */
.fvx-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:500}
.fvx-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.fvx-badge.draft{background:var(--surface2);color:var(--text3)}
.fvx-badge.sent{background:var(--accent-dim);color:var(--accent)}
.fvx-badge.accepted,.fvx-badge.certified,.fvx-badge.paid{background:var(--success-dim);color:var(--success)}
.fvx-badge.invoiced{background:var(--purple-dim);color:var(--purple)}
.fvx-badge.rejected,.fvx-badge.voided,.fvx-badge.overdue{background:var(--danger-dim);color:var(--danger)}
.fvx-badge.expired,.fvx-badge.pending_fel{background:var(--warning-dim);color:var(--warning)}

/* Forms */
.fvx-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.fvx-field{display:flex;flex-direction:column;gap:6px}
.fvx-field.span-2{grid-column:span 2}
.fvx-field.span-3{grid-column:span 3}
.fvx-label{font-size:12px;font-weight:500;color:var(--text2)}
.fvx-label .req{color:var(--danger);margin-left:3px}
.fvx-input,.fvx-select,.fvx-textarea{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13.5px;padding:9px 12px;width:100%;transition:border-color .15s,box-shadow .15s;outline:none}
.fvx-input:focus,.fvx-select:focus,.fvx-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.fvx-input::placeholder{color:var(--text3)}
.fvx-select{cursor:pointer}
.fvx-select option{background:var(--surface2)}
.fvx-textarea{resize:vertical;min-height:80px}
.fvx-input.mono{font-family:var(--mono)}

/* Line items */
.fvx-lines{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.fvx-lines-head{display:grid;grid-template-columns:2fr 80px 70px 110px 70px 80px 110px 40px;background:var(--surface2);border-bottom:1px solid var(--border)}
.fvx-lines-head span{padding:9px 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3)}
.fvx-line-row{display:grid;grid-template-columns:2fr 80px 70px 110px 70px 80px 110px 40px;border-bottom:1px solid var(--border);align-items:center}
.fvx-line-row:last-child{border-bottom:none}
.fvx-line-row:hover{background:rgba(255,255,255,.02)}
.fvx-line-row input,.fvx-line-row select{background:transparent;border:none;color:var(--text);font-family:var(--font);font-size:13px;padding:10px;width:100%;outline:none}
.fvx-line-row input:focus{background:var(--accent-dim)}
.fvx-line-row .mono{font-family:var(--mono);font-size:12.5px}
.fvx-line-total{font-family:var(--mono);font-size:13px;padding:10px;color:var(--text);text-align:right}
.fvx-line-remove{display:flex;align-items:center;justify-content:center;padding:10px}
.fvx-lines-totals{border-top:2px solid var(--border2);background:var(--surface2);padding:12px 16px;display:flex;justify-content:flex-end}
.fvx-totals-g{display:grid;grid-template-columns:auto auto;gap:6px 24px;text-align:right}
.fvx-totals-g .tl{color:var(--text2);font-size:13px}
.fvx-totals-g .tv{font-family:var(--mono);font-size:13px}
.fvx-totals-g .tl-total{color:var(--text);font-weight:600;font-size:15px}
.fvx-totals-g .tv-total{font-family:var(--mono);font-weight:600;font-size:16px;color:var(--accent-h)}

/* Tabs */
.fvx-tabs{display:flex;border-bottom:1px solid var(--border);gap:2px;margin-bottom:20px}
.fvx-tab{padding:10px 18px;font-size:13.5px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;margin-bottom:-1px}
.fvx-tab:hover{color:var(--text)}
.fvx-tab.active{color:var(--accent-h);border-bottom-color:var(--accent)}

/* Modal */
.fvx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fvx-fade .2s ease}
@keyframes fvx-fade{from{opacity:0}to{opacity:1}}
.fvx-modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:fvx-mi .25s cubic-bezier(.34,1.56,.64,1)}
.fvx-modal.lg{max-width:920px}
.fvx-modal.xl{max-width:1150px}
@keyframes fvx-mi{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.fvx-modal-head{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.fvx-modal-title{font-size:16px;font-weight:600;flex:1}
.fvx-modal-body{padding:24px}
.fvx-modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* Search */
.fvx-search-bar{display:flex;gap:10px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.fvx-search{position:relative;flex:1;max-width:340px}
.fvx-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.fvx-search input{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13.5px;padding:9px 12px 9px 36px;width:100%;outline:none;transition:border-color .15s}
.fvx-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.fvx-search input::placeholder{color:var(--text3)}

/* Toast */
.fvx-toasts{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:10px}
.fvx-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);animation:fvx-ti .3s cubic-bezier(.34,1.56,.64,1);max-width:360px;border:1px solid}
@keyframes fvx-ti{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.fvx-toast.success{background:var(--success-dim);border-color:rgba(16,185,129,.3);color:var(--success)}
.fvx-toast.error{background:var(--danger-dim);border-color:rgba(244,63,94,.3);color:var(--danger)}
.fvx-toast.warning{background:var(--warning-dim);border-color:rgba(245,158,11,.3);color:var(--warning)}
.fvx-toast.info{background:var(--accent-dim);border-color:rgba(79,124,255,.3);color:var(--accent)}

/* Misc */
.fvx-empty{padding:60px 20px;text-align:center;color:var(--text3)}
.fvx-empty-title{font-size:15px;color:var(--text2);margin-bottom:6px}
.fvx-spinner{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:fvx-spin .6s linear infinite}
@keyframes fvx-spin{to{transform:rotate(360deg)}}
.fvx-loading{display:flex;align-items:center;justify-content:center;padding:60px;gap:14px;color:var(--text2)}
.fvx-divider{height:1px;background:var(--border);margin:20px 0}
.fvx-flex{display:flex;align-items:center}
.fvx-flex-between{display:flex;align-items:center;justify-content:space-between}
.fvx-gap-2{gap:8px}
.fvx-gap-3{gap:12px}
.fvx-mb-4{margin-bottom:16px}
.fvx-mb-6{margin-bottom:24px}
.fvx-mono{font-family:var(--mono)}
.fvx-muted{color:var(--text2)}
.fvx-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:14px}
.fvx-uuid{font-family:var(--mono);font-size:11.5px;color:var(--text3);background:var(--surface2);padding:3px 7px;border-radius:4px}
.fvx-fel-ok{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:var(--success-dim);color:var(--success);border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.fvx-pagination{display:flex;align-items:center;gap:6px;padding:16px 20px;border-top:1px solid var(--border);justify-content:flex-end}
.fvx-page-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-size:13px;transition:all .15s}
.fvx-page-btn:hover{border-color:var(--accent);color:var(--accent)}
.fvx-page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fvx-page-info{font-size:12.5px;color:var(--text3);margin:0 8px}

/* Alert */
.fvx-alert{padding:12px 16px;border-radius:var(--r-sm);font-size:13.5px;display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;border:1px solid}
.fvx-alert.info{background:var(--accent-dim);border-color:rgba(79,124,255,.3);color:var(--accent-h)}
.fvx-alert.success{background:var(--success-dim);border-color:rgba(16,185,129,.3);color:var(--success)}
.fvx-alert.warning{background:var(--warning-dim);border-color:rgba(245,158,11,.3);color:var(--warning)}
.fvx-alert.error{background:var(--danger-dim);border-color:rgba(244,63,94,.3);color:var(--danger)}

@media(max-width:960px){
  .fvx-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  #finvox-app .fvx-sidebar,
  #finvox-frontend-app .fvx-sidebar{width:56px}
  .fvx-logo-text,.fvx-logo-v,.fvx-nav-label,
  .fvx-nav-item span,.fvx-sidebar-footer .fvx-user-name,
  .fvx-sidebar-footer .fvx-user-role{display:none}
  .fvx-nav-item{justify-content:center;padding:10px}
  .fvx-sidebar-logo{justify-content:center;padding:16px 8px}
  #finvox-frontend-app .fvx-main{margin-left:56px}
  .fvx-stats-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════
   MODULE: Clients
   ══════════════════════════════════════════════════════ */
.fvx-clients-layout{display:flex;gap:20px;align-items:flex-start}
.fvx-clients-table{flex:1;min-width:0}
.fvx-clients-layout.has-detail .fvx-clients-table{flex:1}

/* Row selected highlight */
tr.row-selected td{background:var(--accent-dim)!important}

/* Client detail panel */
.fvx-client-detail{width:280px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;position:sticky;top:calc(var(--header-h) + 28px);max-height:calc(100vh - var(--header-h) - 90px);overflow:hidden}
.fvx-detail-head{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.fvx-detail-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-dim);color:var(--accent-h);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.fvx-detail-body{flex:1;overflow-y:auto;padding:16px}
.fvx-detail-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--border);gap:8px}
.fvx-detail-row:last-of-type{border-bottom:none}
.fvx-detail-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.fvx-detail-value{font-size:12.5px;color:var(--text);text-align:right;word-break:break-all}
.fvx-detail-value.mono{font-family:var(--mono)}
.fvx-detail-notes{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.fvx-detail-foot{padding:12px 16px;border-top:1px solid var(--border)}

/* Badge pill (for NIT, etc.) */
.fvx-badge-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11.5px;background:var(--surface2);color:var(--text2);font-family:var(--mono)}

/* Contact links */
.fvx-contact-link{display:inline-flex;align-items:center;gap:4px;color:var(--text3);font-size:12px;text-decoration:none;margin-right:10px}
.fvx-contact-link:hover{color:var(--accent)}

/* Modal tabs */
.fvx-modal-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 20px;background:var(--bg2)}
.fvx-tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font-size:13px;color:var(--text2);cursor:pointer;transition:all .15s;margin-bottom:-1px;font-family:var(--font)}
.fvx-tab-btn:hover{color:var(--text)}
.fvx-tab-btn.active{color:var(--accent-h);border-bottom-color:var(--accent)}

/* Modal large */
.fvx-modal-lg{max-width:680px}

/* Badge per regime */
.fvx-badge.general{background:rgba(79,124,255,.12);color:var(--accent-h)}
.fvx-badge.pequeno_contribuyente{background:rgba(245,158,11,.12);color:var(--warning)}
.fvx-badge.exento{background:rgba(16,185,129,.12);color:var(--success)}

@media(max-width:900px){
  .fvx-clients-layout{flex-direction:column}
  .fvx-client-detail{width:100%;position:static;max-height:none}
}

/* ══════════════════════════════════════════════════════
   MODULE: Items
   ══════════════════════════════════════════════════════ */

/* Toggle group (Todos / Productos / Servicios) */
.fvx-toggle-group{display:inline-flex;background:var(--surface);border-radius:var(--r-sm);padding:3px;gap:2px}
.fvx-toggle{background:none;border:none;padding:5px 12px;border-radius:calc(var(--r-sm) - 2px);font-size:12.5px;color:var(--text2);cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap}
.fvx-toggle:hover{color:var(--text)}
.fvx-toggle.active{background:var(--surface3);color:var(--text);font-weight:500}

/* Price preview card in modal */
.fvx-price-preview{grid-column:span 2;background:var(--surface);border-radius:var(--r-sm);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.fvx-price-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text2)}
.fvx-price-row.total{padding-top:6px;border-top:1px solid var(--border);color:var(--text);font-weight:600;font-size:14px}
.fvx-price-row .success{color:var(--success)}
.fvx-price-row .danger{color:var(--danger)}

/* Input with prefix (currency) */
.fvx-input-prefix{display:flex;align-items:center;position:relative}
.fvx-prefix{position:absolute;left:12px;font-size:12px;color:var(--text3);pointer-events:none;z-index:1;font-family:var(--mono)}
.fvx-input.has-prefix{padding-left:44px}

/* Checkbox label */
.fvx-label-check{display:flex;align-items:center;cursor:pointer;font-weight:400}

/* Stock warning */
.mono.danger{color:var(--danger)}
.mono.success{color:var(--success)}

/* ══════════════════════════════════════════════════════
   MODULE: Quotes — líneas y modal XL
   ══════════════════════════════════════════════════════ */
.fvx-modal-xl{max-width:900px;width:95vw}
.fvx-quote-header{display:flex;gap:16px;align-items:flex-start}

/* Catálogo popup */
.fvx-catalog-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:12px}
.fvx-catalog-list{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.fvx-catalog-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background .12s}
.fvx-catalog-item:hover{background:var(--surface2)}

/* Lines table */
.fvx-lines{background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);overflow:hidden}
.fvx-lines-head{display:grid;grid-template-columns:1fr 56px 56px 80px 56px 56px 80px 28px;gap:0;background:var(--surface2);border-bottom:1px solid var(--border);padding:6px 8px;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.fvx-line-sort{display:flex;align-items:center}
.fvx-lines-head{grid-template-columns:24px 1fr 56px 56px 80px 56px 56px 80px 28px}
.fvx-line-row{display:grid;grid-template-columns:24px 1fr 56px 56px 80px 56px 56px 80px 28px;gap:0;border-bottom:1px solid var(--border);align-items:center}
.fvx-line-row:last-child{border-bottom:none}
.fvx-line-row input{background:none;border:none;border-right:1px solid var(--border);padding:8px 8px;font-size:13px;color:var(--text);font-family:var(--font);outline:none;width:100%;height:100%}
.fvx-line-row input:focus{background:var(--surface2)}
.fvx-line-row input:disabled{color:var(--text3)}
.fvx-line-desc{} /* full width flex */
.fvx-line-unit{text-align:center}
.fvx-line-num{text-align:right}
.fvx-line-total{padding:8px;font-family:var(--mono);font-size:13px;text-align:right;color:var(--text);font-weight:500;border-right:1px solid var(--border)}
.fvx-line-del{background:none;border:none;color:var(--text3);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color .12s}
.fvx-line-del:hover{color:var(--danger)}
.fvx-line-sort button{transform:rotate(90deg)}

/* Totals */
.fvx-lines-totals{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.fvx-totals-g{display:grid;grid-template-columns:auto auto;gap:4px 24px;min-width:260px}
.tl{font-size:12.5px;color:var(--text3);text-align:right}
.tv{font-size:12.5px;text-align:right}
.tl-total{font-size:13.5px;font-weight:700;text-align:right}
.tv-total{font-size:15px;font-weight:700;color:var(--text);text-align:right}

/* Status badges */
.fvx-badge.draft{background:rgba(148,163,184,.15);color:var(--text3)}
.fvx-badge.sent{background:rgba(79,124,255,.15);color:var(--accent-h)}
.fvx-badge.accepted{background:rgba(16,185,129,.15);color:var(--success)}
.fvx-badge.rejected{background:rgba(244,63,94,.15);color:var(--danger)}
.fvx-badge.expired{background:rgba(245,158,11,.15);color:var(--warning)}
.fvx-badge.invoiced{background:rgba(168,85,247,.15);color:var(--purple)}
.fvx-badge.paid{background:rgba(16,185,129,.15);color:var(--success)}
.fvx-badge.certified{background:rgba(16,185,129,.15);color:var(--success)}
.fvx-badge.voided{background:rgba(244,63,94,.15);color:var(--danger)}

/* ══════════════════════════════════════════════════════
   MODULE: Invoices — FEL chip & pagos
   ══════════════════════════════════════════════════════ */
.fvx-fel-ok{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;background:rgba(16,185,129,.15);color:var(--success);font-size:11.5px;font-weight:600;border:1px solid rgba(16,185,129,.25)}
.fvx-uuid{font-family:var(--mono);font-size:11.5px;color:var(--text3)}
.fvx-btn-success{background:rgba(16,185,129,.15);color:var(--success);border:1px solid rgba(16,185,129,.3)}
.fvx-btn-success:hover{background:var(--success);color:#fff}
.mono.success{color:var(--success)}
.mono.danger{color:var(--danger)}

/* ══════════════════════════════════════════════════════
   MODULE: Settings — save bar
   ══════════════════════════════════════════════════════ */
.fvx-save-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.fvx-btn-secondary{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
.fvx-btn-secondary:hover{background:var(--surface3);color:var(--text)}

/* ── Input focus fix: prevent WP Admin from stealing focus inside modals ── */
#finvox-app .fvx-overlay input,
#finvox-app .fvx-overlay textarea,
#finvox-app .fvx-overlay select,
#finvox-frontend-app .fvx-overlay input,
#finvox-frontend-app .fvx-overlay textarea,
#finvox-frontend-app .fvx-overlay select{pointer-events:auto!important;user-select:auto!important;-webkit-user-select:auto!important}
#finvox-app .fvx-overlay,
#finvox-frontend-app .fvx-overlay{isolation:isolate}