:root{--bg:#f5f7fb;--dark:#111827;--blue:#2f80ed;--green:#27ae60;--teal:#00a6a6;--purple:#7b61ff;--orange:#f2994a;--red:#eb5757;--violet:#9b51e0;--gray:#64748b}*{font-family:'Rubik',Tahoma,Arial,sans-serif}body{background:var(--bg);color:#1f2937}.sidebar{width:285px;background:#101828;color:#fff;position:fixed;right:0;top:0;bottom:0;z-index:1040;overflow:auto}.sidebar .brand{padding:1.2rem;border-bottom:1px solid rgba(255,255,255,.08);font-weight:800}.sidebar a{display:flex;align-items:center;gap:.65rem;color:rgba(255,255,255,.78);text-decoration:none;margin:.22rem .75rem;padding:.72rem 1rem;border-radius:1rem}.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.12);color:#fff}.main{margin-right:285px;padding:1rem 1.25rem 2rem}.topbar,.card-soft{background:rgba(255,255,255,.96);border:1px solid #e8edf5;border-radius:1.25rem;box-shadow:0 12px 28px rgba(15,23,42,.06)}.topbar{padding:.85rem 1rem;margin-bottom:1rem}.form-control,.form-select,.btn,.ts-control{border-radius:.9rem!important}.form-control,.form-select,.ts-control{border-color:#d7deea!important;background:#fff!important;min-height:42px}.form-label{font-weight:600;color:#475569}.btn-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}.section-card{color:#fff;border:0;border-radius:1.35rem;min-height:125px;transition:.16s;overflow:hidden;position:relative}.section-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,23,42,.16)}.section-card i{font-size:2.15rem}.watermark{position:absolute;left:-12px;bottom:-30px;font-size:8rem!important;opacity:.1}.bg-products{background:linear-gradient(135deg,#2f80ed,#56ccf2)}.bg-invoices{background:linear-gradient(135deg,#27ae60,#6fcf97)}.bg-companies{background:linear-gradient(135deg,#00a6a6,#00d2d2)}.bg-reps{background:linear-gradient(135deg,#7b61ff,#b388ff)}.bg-payments{background:linear-gradient(135deg,#f2994a,#f2c94c)}.bg-expenses{background:linear-gradient(135deg,#eb5757,#ff8a80)}.bg-reports{background:linear-gradient(135deg,#9b51e0,#bb6bd9)}.bg-users{background:linear-gradient(135deg,#4f4f4f,#828282)}.table thead th{background:#f1f5f9;color:#334155;white-space:nowrap}.table td,.table th{vertical-align:middle}.badge-pill{border-radius:999px;padding:.45rem .7rem}.invoice-item{background:#fff;border:1px solid #e5ebf4;border-radius:1.1rem;padding:1rem;margin-bottom:.85rem}.drag-handle{cursor:grab;color:#94a3b8;font-size:1.3rem}.breadcrumb{font-size:.9rem}.wallet-tab{border-radius:1rem!important}.movement-debit{border-right:4px solid var(--red)}.movement-credit,.movement-payment{border-right:4px solid var(--green)}.movement-invoice{border-right:4px solid var(--blue)}@media(max-width:991px){.sidebar{transform:translateX(100%);transition:.2s}.sidebar.open{transform:none}.main{margin-right:0}}@media print{.sidebar,.topbar,.no-print,.btn{display:none!important}.main{margin:0;padding:0}.card-soft{box-shadow:none;border:1px solid #ddd}body{background:#fff}}

/* V2.1 UI refinements */
.company-logo{width:76px;height:76px;border-radius:22px;object-fit:cover;border:1px solid #e2e8f0;background:#f8fafc}.avatar-lg{width:68px;height:68px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#4f46e5;font-size:2rem}.stat-card{border-radius:1.15rem;padding:1rem;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:92px}.stat-card small{opacity:.86}.stat-card strong{font-size:1.35rem}.stat-blue{background:linear-gradient(135deg,#2563eb,#60a5fa)}.stat-green{background:linear-gradient(135deg,#059669,#34d399)}.stat-red{background:linear-gradient(135deg,#dc2626,#fb7185)}.invoice-line-card{border:1px solid #dfe7f3;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 10px 22px rgba(15,23,42,.045)}.invoice-line-top{display:grid;grid-template-columns:42px minmax(260px,1fr) auto;gap:.85rem;align-items:center}.drag-pill{height:42px;border-radius:14px;background:#f1f5f9;display:flex;align-items:center;justify-content:center}.line-actions{display:flex;gap:.45rem}.invoice-metrics-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:.75rem;align-items:end}.metric-readonly,.metric-total{min-height:42px;border:1px dashed #cbd5e1;border-radius:.9rem;padding:.45rem .65rem;background:#f8fafc;display:flex;flex-direction:column;justify-content:center}.metric-readonly span,.metric-total span{font-size:.78rem;color:#64748b}.metric-readonly strong,.metric-total strong{font-size:1.05rem}.metric-total{background:#ecfdf5;border-color:#86efac}.invoice-info-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.invoice-info-strip>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:1rem;padding:.75rem}.invoice-info-strip span{display:block;color:#64748b;font-size:.82rem}.summary-box{border:1px solid #dbe3ef;border-radius:14px;padding:12px;background:#f8fafc}.permission-card{display:flex;align-items:center;gap:.55rem;border:1px solid #e2e8f0;background:#fff;border-radius:1rem;padding:.75rem;height:100%;cursor:pointer}.permission-card:hover{background:#f8fafc}.permission-card input{transform:scale(1.15)}
@media(max-width:1200px){.invoice-metrics-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.invoice-line-top{grid-template-columns:1fr}.line-actions{justify-content:flex-end}.invoice-metrics-grid,.invoice-info-strip{grid-template-columns:1fr}}


/* V2.3 refinements */
.btn-primary{--bs-btn-bg:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--app-primary),#000 12%);--bs-btn-hover-border-color:color-mix(in srgb,var(--app-primary),#000 12%)}
.btn-outline-primary,.btn-outline-info,.btn-action{--bs-btn-color:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--app-primary);--bs-btn-hover-border-color:var(--app-primary);--bs-btn-focus-shadow-rgb:47,128,237;--bs-btn-active-color:#fff;--bs-btn-active-bg:color-mix(in srgb,var(--app-primary),#000 12%);--bs-btn-active-border-color:color-mix(in srgb,var(--app-primary),#000 12%);--bs-btn-disabled-color:var(--app-primary);--bs-btn-disabled-border-color:var(--app-primary)}
.text-primary{color:var(--app-primary)!important}.bg-primary{background-color:var(--app-primary)!important}.border-primary{border-color:var(--app-primary)!important}
.sidebar a.active{background:color-mix(in srgb,var(--app-primary),transparent 72%)}.btn-sidebar-logout{display:flex;align-items:center;gap:.65rem;color:rgba(255,255,255,.78);border:0;border-radius:1rem;padding:.72rem 1rem}.btn-sidebar-logout:hover{background:rgba(255,255,255,.12);color:#fff}.toast-container{direction:rtl}.app-toast{border-radius:1rem!important;overflow:hidden}.actions-cell .btn{min-width:42px}.dropdown-menu .dropdown-item{display:flex;align-items:center;gap:.45rem}.filter-action-bar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.9rem}.summary-card{border:0;border-radius:1.25rem;color:#fff;box-shadow:0 12px 26px rgba(15,23,42,.08);overflow:hidden;position:relative}.summary-card .icon{font-size:2rem;opacity:.9}.summary-card small{opacity:.85}.summary-card a{color:#fff;text-decoration:underline}.summary-sales{background:linear-gradient(135deg,#2563eb,#60a5fa)}.summary-payments{background:linear-gradient(135deg,#059669,#34d399)}.summary-debt{background:linear-gradient(135deg,#dc2626,#fb7185)}.summary-expenses{background:linear-gradient(135deg,#ea580c,#fdba74)}.summary-cost{background:linear-gradient(135deg,#475569,#94a3b8)}.summary-gross{background:linear-gradient(135deg,#7c3aed,#c084fc)}.summary-net{background:linear-gradient(135deg,#0f766e,#5eead4)}.summary-area{background:linear-gradient(135deg,#4338ca,#818cf8)}.company-wallet-card{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #e2e8f0;border-radius:1.25rem}.wallet-adjust-button{border-style:dashed}.modal-form-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:1.1rem;padding:1rem}.user-avatar{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#eef2ff;color:#4f46e5;font-weight:800}.action-split .btn{height:34px}.muted-field[disabled],.muted-field[readonly]{background:#f8fafc!important;color:#64748b;opacity:1}.representative-mini-card{border:1px solid #e2e8f0;border-radius:1.2rem;background:#fff;padding:1rem}.balance-due{color:#dc2626}.balance-credit{color:#059669}.balance-zero{color:#64748b}


/* V2.4 unified split action buttons */
.actions-cell{white-space:nowrap}
.btn-group.action-split, .btn-group.split-actions{direction:rtl;display:inline-flex;vertical-align:middle}
.btn-group.action-split>.btn, .btn-group.split-actions>.btn{border-radius:0!important;min-height:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;box-shadow:none!important}
.btn-group.action-split>.btn:first-child, .btn-group.split-actions>.btn:first-child{border-radius:0!important}
.btn-group.action-split>.dropdown-toggle-split, .btn-group.split-actions>.dropdown-toggle-split{border-radius:0!important;padding-inline:.55rem!important;min-width:34px;width:34px}
.btn-group.action-split>.dropdown-toggle-split::after, .btn-group.split-actions>.dropdown-toggle-split::after{margin-inline-start:0}
.btn-group.action-split .dropdown-menu, .btn-group.split-actions .dropdown-menu{border-radius:.65rem;box-shadow:0 14px 30px rgba(15,23,42,.12);border-color:#e2e8f0;padding:.35rem}
.btn-group.action-split .dropdown-item, .btn-group.split-actions .dropdown-item{border-radius:.45rem;padding:.55rem .75rem}
.btn-group.action-split .dropdown-item:hover, .btn-group.split-actions .dropdown-item:hover{background:#f1f5f9}



/* V2.5 dropdown + theme fixes */
.dropdown-menu.dropdown-portal{
    position: fixed !important;
    z-index: 3000 !important;
    display: block !important;
    inset: auto auto auto auto !important;
    max-height: 70vh;
    overflow-y: auto;
    min-width: 190px;
}
.actions-cell .btn-outline-info,
.btn-group.action-split>.btn-outline-info,
.btn-group.split-actions>.btn-outline-info{
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
    --bs-btn-disabled-color: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-group.action-split>.btn,
.btn-group.split-actions>.btn{
    border-radius:0!important;
    min-height:34px;
    height:34px;
}
.color-choice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:.55rem;
}
.color-choice{
    border:1px solid #dbe3ef;
    background:#fff;
    border-radius:.85rem;
    padding:.55rem .65rem;
    display:flex;
    align-items:center;
    gap:.55rem;
    cursor:pointer;
    transition:.15s ease;
}
.color-choice:hover{background:#f8fafc;border-color:var(--app-primary)}
.color-choice input{accent-color:var(--app-primary)}
.color-swatch{
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid #fff;
    outline:1px solid #cbd5e1;
    flex:0 0 22px;
}


/* V2.6 fix: action dropdowns are positioned by custom JS, not Bootstrap Popper. */
.dropdown-menu.dropdown-portal{
    position:fixed!important;
    inset:auto!important;
    transform:none!important;
    z-index:9999!important;
    max-height:70vh;
    overflow-y:auto;
    min-width:190px;
}
.actions-cell{position:relative;overflow:visible!important}


/* V2.7 effective dropdown fix: do not portal menus to body.
   The previous portal approach could miscalculate positions in RTL layouts.
   Keep Bootstrap menus beside the real button and allow table containers to show them. */
.table-responsive,
.card-soft,
.js-live-target,
.actions-cell,
.filter-action-bar{
    overflow: visible !important;
}
.table-responsive .dropdown-menu,
.actions-cell .dropdown-menu,
.btn-group.action-split .dropdown-menu,
.btn-group.split-actions .dropdown-menu{
    z-index: 1085 !important;
}
.dropdown-menu.dropdown-portal{
    position:absolute!important;
    transform:none!important;
}
@media(max-width: 768px){
    .table-responsive{overflow-x:auto!important;overflow-y:visible!important;}
}

/* Keep compact numeric fields free of browser spinner controls. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
input[type="number"]{
    appearance:textfield;
    -moz-appearance:textfield;
}

/* V2.8 compact square fields. Attached controls remain visually merged. */
.form-control,
.form-select,
.ts-wrapper .ts-control,
.input-group-text{
    border-radius:0!important;
    min-height:38px;
}
.form-control-sm,
.form-select-sm,
.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text,
.input-group-sm>.btn{
    min-height:32px;
    border-radius:0!important;
}
.input-group>.form-control,
.input-group>.form-select,
.input-group>.input-group-text,
.input-group>.btn,
.form-control::file-selector-button{
    border-radius:0!important;
}

/* Square controls keep compact tables and attached actions visually aligned. */
button,
.btn,
.btn-close,
.page-link,
.dropdown-item{
    border-radius:0!important;
}

/* Collapsible desktop sidebar with an off-canvas mobile mode. */
.sidebar,.main{transition:width .2s ease,margin-right .2s ease,transform .2s ease}
.sidebar .brand span,.sidebar nav a span,.btn-sidebar-logout span{white-space:nowrap}
.sidebar-toggle{flex:0 0 auto}
.sidebar-close{color:#fff!important;border:0!important;padding:.25rem .4rem!important}
.sidebar-backdrop{display:none;position:fixed;inset:0;border:0;background:rgba(15,23,42,.5);z-index:1035}
body.sidebar-mobile-open{overflow:hidden}
html.sidebar-collapsed .sidebar{width:76px}
html.sidebar-collapsed .main{margin-right:76px}
html.sidebar-collapsed .sidebar .brand{justify-content:center!important;padding:1.2rem .5rem}
html.sidebar-collapsed .sidebar .brand span,
html.sidebar-collapsed .sidebar nav a span,
html.sidebar-collapsed .sidebar .btn-sidebar-logout span,
html.sidebar-collapsed .sidebar nav>div{display:none}
html.sidebar-collapsed .sidebar nav a,
html.sidebar-collapsed .sidebar .btn-sidebar-logout{justify-content:center;margin:.22rem .5rem;padding:.72rem .5rem}
html.sidebar-collapsed .sidebar form{padding-inline:0!important}
html.sidebar-collapsed .sidebar nav i{font-size:1.15rem}

@media(min-width:768px) and (max-width:991px){
    .sidebar{transform:none}
    .main{margin-right:285px}
    html.sidebar-collapsed .main{margin-right:76px}
}

@media(max-width:767px){
    html.sidebar-collapsed .sidebar{width:285px}
    html.sidebar-collapsed .main{margin-right:0}
    html.sidebar-collapsed .sidebar .brand{justify-content:flex-start!important;padding:1.2rem}
    html.sidebar-collapsed .sidebar .brand span,
    html.sidebar-collapsed .sidebar nav a span,
    html.sidebar-collapsed .sidebar .btn-sidebar-logout span{display:inline}
    html.sidebar-collapsed .sidebar nav>div{display:block}
    html.sidebar-collapsed .sidebar nav a,
    html.sidebar-collapsed .sidebar .btn-sidebar-logout{justify-content:flex-start;margin:.22rem .75rem;padding:.72rem 1rem}
    .sidebar.open~.sidebar-backdrop{display:block}
}

/* Invoice status confirmation: compact, auditable summary before irreversible transitions. */
.invoice-transition-modal .modal-content{border:0;border-top:4px solid var(--app-primary);box-shadow:0 24px 70px rgba(15,23,42,.24)}
.invoice-transition-header{background:linear-gradient(135deg,color-mix(in srgb,var(--app-primary),transparent 92%),#fff);border-bottom:1px solid #dbe3ef}
.transition-status-flow{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.8rem;border:1px solid #dbe3ef;background:#f8fafc}
.transition-status-flow .badge{font-size:.88rem;padding:.55rem .8rem}
.transition-status-flow>i{font-size:1.15rem;color:#64748b}
.transition-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#dbe3ef;border:1px solid #dbe3ef}
.transition-summary-grid>div{background:#fff;padding:.7rem .8rem;min-width:0}
.transition-summary-grid span{display:block;color:#64748b;font-size:.75rem;margin-bottom:.2rem}
.transition-summary-grid strong{display:block;color:#1e293b;font-size:.9rem;overflow-wrap:anywhere}
.transition-totals{border:1px solid #dbe3ef;background:#fff}
.transition-totals>div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem .85rem;border-bottom:1px solid #e2e8f0}
.transition-totals>div:last-child{border-bottom:0}
.transition-grand-total{background:#eef6ff;font-size:1.1rem;font-weight:800}
.transition-grand-total strong{font-size:1.3rem;color:var(--app-primary)}
@media(max-width:767px){
    .transition-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .invoice-transition-modal .modal-footer{flex-direction:column-reverse;align-items:stretch}
    .invoice-transition-modal .modal-footer form,.invoice-transition-modal .modal-footer .btn{width:100%}
}