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

html.invoice-lang-ar .invoice-localized,
html.invoice-lang-ar .fwter-auth-localized{
  direction:rtl;
  text-align:right;
  font-family:"Alexandria",sans-serif;
}
html.invoice-lang-en .invoice-localized,
html.invoice-lang-en .fwter-auth-localized{
  direction:ltr;
  text-align:left;
}
html,body,#root,.sidebar,.main-sidebar,.sidebar-panel,.header{direction:ltr!important}
.invoice-number,.invoice-code,.invoice-date,.invoice-money,.invoice-ltr,
input[type=email],input[type=tel],input[type=url],input[name*=number],input[name*=code]{
  direction:ltr!important;unicode-bidi:isolate;text-align:left
}
.invoice-language-toggle{
  min-width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .55rem;border-radius:9999px;font-size:.72rem;font-weight:700;color:#64748b;
}
.invoice-language-toggle:hover{background:rgba(226,232,240,.7)}
.dark .invoice-language-toggle{color:#cbd5e1}
.dark .invoice-language-toggle:hover{background:rgba(51,65,85,.45)}
.lang-en-only{display:none}
html.invoice-lang-en .lang-en-only{display:inline}
html.invoice-lang-en .lang-ar-only{display:none}
html.invoice-lang-ar .lang-ar-only{display:inline}
html.invoice-lang-ar .lang-en-only{display:none}
.fwter-radius{border-radius:5px!important}
.fwter-no-shadow{box-shadow:none!important}
.fwter-page-title{font-family:"Alexandria",sans-serif}
.fwter-form-card{border:1px solid rgb(226 232 240);background:#fff;border-radius:5px}
.dark .fwter-form-card{border-color:rgb(51 65 85);background:rgb(31 46 70)}
.fwter-table-wrap{overflow-x:auto}
.fwter-table{width:100%;border-collapse:collapse}
.fwter-table th,.fwter-table td{padding:.8rem .85rem;border-bottom:1px solid rgb(241 245 249);font-size:.78rem}
.dark .fwter-table th,.dark .fwter-table td{border-color:rgb(51 65 85)}
.fwter-kpi-mark{width:7px;height:7px;border-radius:9999px;display:inline-block}
.fwter-item-row{display:grid;grid-template-columns:minmax(180px,2fr) 80px 120px 90px 110px 38px;gap:.6rem;align-items:end}
@media(max-width:900px){.fwter-item-row{grid-template-columns:1fr 1fr}.fwter-item-row>*:first-child{grid-column:1/-1}}

/* FWTER V4 - Lineone invoice builder */
.fwter-items-head,
.fwter-item-row-v4{
  grid-template-columns:minmax(260px,2.1fr) 88px 128px 96px 110px 130px 42px;
  gap:.75rem;
  align-items:center;
}
.fwter-items-head{
  margin-bottom:.55rem;
  padding:0 .25rem;
  color:#94a3b8;
  font-size:.68rem;
  font-weight:600;
}
.fwter-item-row-v4{
  display:grid;
  padding:.85rem;
  border:1px solid rgb(226 232 240);
  border-radius:5px;
  background:#fff;
  transition:border-color .2s ease,background-color .2s ease;
}
.fwter-item-row-v4:hover{border-color:rgb(203 213 225)}
.dark .fwter-item-row-v4{border-color:rgb(51 65 85);background:rgb(31 46 70)}
.dark .fwter-item-row-v4:hover{border-color:rgb(71 85 105)}
.fwter-item-field{display:block}
.fwter-item-field>span{display:block;margin-bottom:.3rem;color:#94a3b8;font-size:.68rem}
.fwter-line-total{display:flex;min-height:2.5rem;align-items:center;justify-content:flex-end;gap:.25rem}
html.invoice-lang-ar .fwter-line-total{justify-content:flex-start}
@media(max-width:1279px){
  .fwter-item-row-v4{grid-template-columns:minmax(240px,2fr) repeat(2,minmax(120px,1fr));align-items:end}
  .fwter-item-main{grid-column:1/-1}
  .fwter-line-total{justify-content:flex-start;flex-direction:column;align-items:flex-start}
}
@media(max-width:639px){
  .fwter-item-row-v4{grid-template-columns:1fr 1fr;padding:.75rem}
  .fwter-item-main{grid-column:1/-1}
  .fwter-line-total{align-items:flex-start}
  .fwter-item-row-v4 [data-remove-item]{align-self:end}
}
@media(max-width:430px){
  .fwter-item-row-v4{grid-template-columns:1fr}
  .fwter-item-main{grid-column:auto}
}


/* FWTER V5 - Lineone Form Layout 2/5 structure */
.fwter-invoice-v5 .card{
  overflow:hidden;
}
.fwter-invoice-v5 .fwter-item-row-v5{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  padding:0 !important;
  border:1px solid rgb(226 232 240);
  border-radius:5px;
  background:#fff;
}
.dark .fwter-invoice-v5 .fwter-item-row-v5{
  border-color:rgb(51 65 85);
  background:rgb(31 46 70);
}
.fwter-invoice-v5 .fwter-item-row-v5:hover{
  border-color:rgb(203 213 225);
}
.dark .fwter-invoice-v5 .fwter-item-row-v5:hover{
  border-color:rgb(71 85 105);
}
.fwter-invoice-v5 .fwter-item-field{
  display:block;
}
.fwter-invoice-v5 .fwter-item-field>span{
  display:block;
  margin-bottom:0;
  color:inherit;
  font-size:inherit;
}
.fwter-invoice-v5 .fwter-line-total-v5{
  display:flex;
  min-height:4.25rem;
  flex-direction:column;
  justify-content:center;
  border-radius:5px;
  background:rgb(248 250 252);
  padding:.65rem .8rem;
}
.dark .fwter-invoice-v5 .fwter-line-total-v5{
  background:rgb(24 39 64);
}
.fwter-invoice-v5 input,
.fwter-invoice-v5 select,
.fwter-invoice-v5 textarea{
  box-sizing:border-box;
}
.fwter-invoice-v5 textarea{
  min-height:7rem;
}
@media(max-width:1023px){
  .fwter-invoice-v5 .card + .card{
    margin-top:0;
  }
}


/* FWTER V5.1 - RTL select arrow alignment */
html.invoice-lang-ar .fwter-invoice-v5 select.form-select,
html.invoice-lang-ar .fwter-invoice-v5 select.fwter-rtl-select {
  direction: rtl;
  text-align: right;
  background-position: left .85rem center !important;
  padding-right: .85rem !important;
  padding-left: 2.65rem !important;
}
html.invoice-lang-en .fwter-invoice-v5 select.form-select,
html.invoice-lang-en .fwter-invoice-v5 select.fwter-rtl-select {
  direction: ltr;
  text-align: left;
  background-position: right .85rem center !important;
  padding-left: .85rem !important;
  padding-right: 2.65rem !important;
}
html.invoice-lang-ar .fwter-invoice-v5 select.form-select option {
  direction: rtl;
  text-align: right;
}
html.invoice-lang-en .fwter-invoice-v5 select.form-select option {
  direction: ltr;
  text-align: left;
}
.fwter-invoice-v5 .fwter-currency-select {
  font-variant-numeric: tabular-nums;
}


/* FWTER V5.3.1 - GLOBAL RTL/LTR SELECT RULE
   Permanent rule for all localized forms/pages. */
html.invoice-lang-ar .invoice-localized select.form-select {
  direction: rtl;
  text-align: right;
  background-position: left .85rem center !important;
  padding-right: .85rem !important;
  padding-left: 2.65rem !important;
}
html.invoice-lang-en .invoice-localized select.form-select {
  direction: ltr;
  text-align: left;
  background-position: right .85rem center !important;
  padding-left: .85rem !important;
  padding-right: 2.65rem !important;
}
html.invoice-lang-ar .invoice-localized select.form-select option {
  direction: rtl;
  text-align: right;
}
html.invoice-lang-en .invoice-localized select.form-select option {
  direction: ltr;
  text-align: left;
}


/* FWTER V5.4.1 - Products Advanced Table spacing */
.fwter-products-list .fwter-products-table thead th {
  padding-top: .9rem !important;
  padding-bottom: .9rem !important;
}
.fwter-products-list .fwter-products-table tbody tr:not(:only-child) td,
.fwter-products-list .fwter-products-table tbody tr[data-fwter-product-row] td {
  padding-top: .85rem !important;
  padding-bottom: .85rem !important;
}
.fwter-products-list .fwter-products-empty-state {
  padding: 2.75rem 1.25rem !important;
  line-height: 1.7;
}


/* FWTER V5.11 - Global Header / Sidebar / Footer */
.fwter-main-sidebar-inner{border-right:1px solid rgb(226 232 240)}
.dark .fwter-main-sidebar-inner{border-color:rgb(51 65 85)}
.fwter-panel-icon{background:rgba(99,102,241,.08);color:#6366f1}
.dark .fwter-panel-icon{background:rgba(129,140,248,.12);color:#a5b4fc}
.fwter-panel-link:nth-child(2) .fwter-panel-icon{background:rgba(14,165,233,.10);color:#0ea5e9}
.fwter-panel-link:nth-child(3) .fwter-panel-icon{background:rgba(236,72,153,.10);color:#ec4899}
.fwter-panel-link:nth-child(4) .fwter-panel-icon{background:rgba(16,185,129,.10);color:#10b981}
.fwter-panel-link:nth-child(5) .fwter-panel-icon{background:rgba(245,158,11,.12);color:#f59e0b}
.fwter-panel-link:nth-child(6) .fwter-panel-icon{background:rgba(139,92,246,.10);color:#8b5cf6}
.fwter-panel-link:nth-child(7) .fwter-panel-icon{background:rgba(6,182,212,.10);color:#06b6d4}
.fwter-sidebar-panel-inner{padding-left:var(--main-sidebar-width)}
.fwter-sidebar-panel-header{border-bottom:1px solid rgb(226 232 240)}
.dark .fwter-sidebar-panel-header{border-color:rgb(51 65 85)}
.fwter-header-tools{gap:.5rem}
.invoice-language-toggle{min-width:5.4rem;height:2.1rem;display:inline-flex;align-items:center;justify-content:center;gap:.38rem;padding:0 .75rem;border:1px solid rgb(226 232 240);background:#fff;border-radius:9999px;font-size:.7rem;font-weight:600;color:#475569;transition:background-color .2s,border-color .2s,color .2s}
.invoice-language-toggle:hover{background:rgb(248 250 252);border-color:rgb(203 213 225)}
.dark .invoice-language-toggle{background:rgb(31 46 70);border-color:rgb(51 65 85);color:#cbd5e1}
.dark .invoice-language-toggle:hover{background:rgb(38 53 78);border-color:rgb(71 85 105)}
.fwter-header-search{position:relative}
html.invoice-lang-ar .fwter-header-search input{direction:rtl!important;text-align:right!important;padding-right:2.25rem!important;padding-left:1rem!important}
html.invoice-lang-ar .fwter-header-search>label>span{right:0!important;left:auto!important}
.fwter-content-stack{width:100%;min-width:0;min-height:100vh;display:flex;flex-direction:column}
.fwter-content-stack>.main-content{flex:1 0 auto}
.fwter-global-footer{margin-left:var(--main-sidebar-width);padding:0 var(--margin-x) 1rem;transition:margin .25s ease}
.fwter-global-footer-inner{min-height:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid rgb(226 232 240)}
.dark .fwter-global-footer-inner{border-color:rgb(51 65 85)}
@media (min-width:80rem){.is-sidebar-open .fwter-global-footer{margin-left:calc(var(--main-sidebar-width) + var(--sidebar-panel-width))}}

html.invoice-lang-ar .main-sidebar{left:auto!important;right:0!important;--tw-translate-x:100%}
html.invoice-lang-ar .sidebar-panel{left:auto!important;right:0!important;--tw-translate-x:100%}
html.invoice-lang-ar .fwter-main-sidebar-inner{border-right:0;border-left:1px solid rgb(226 232 240)}
html.dark.invoice-lang-ar .fwter-main-sidebar-inner{border-left-color:rgb(51 65 85)}
html.invoice-lang-ar .fwter-sidebar-panel-inner{padding-left:0!important;padding-right:var(--main-sidebar-width)!important}
html.invoice-lang-ar .fwter-header-row{flex-direction:row-reverse}
html.invoice-lang-ar nav.header{right:auto!important;left:0!important}
html.invoice-lang-ar .main-content{margin-left:0!important;margin-right:var(--main-sidebar-width)!important}
html.invoice-lang-ar .fwter-global-footer{margin-left:0!important;margin-right:var(--main-sidebar-width)!important}
html.invoice-lang-ar .is-sidebar-open .sidebar-panel,
html.invoice-lang-ar .is-sidebar-open .main-sidebar{--tw-translate-x:0}
html.invoice-lang-ar .sidebar-panel .invoice-localized,
html.invoice-lang-ar .fwter-panel-link{direction:rtl;text-align:right}
html.invoice-lang-ar .fwter-global-footer-inner>p:first-child{text-align:right}
html.invoice-lang-ar .fwter-global-footer-inner>p:last-child{text-align:left}
@media (min-width:48rem){html.invoice-lang-ar .main-sidebar{--tw-translate-x:0}}
@media (min-width:80rem){
  html.invoice-lang-ar .is-sidebar-open .main-content{margin-right:calc(var(--main-sidebar-width) + var(--sidebar-panel-width))!important;margin-left:0!important}
  html.invoice-lang-ar .is-sidebar-open .fwter-global-footer{margin-right:calc(var(--main-sidebar-width) + var(--sidebar-panel-width))!important;margin-left:0!important}
}
html.invoice-lang-en .main-sidebar{left:0!important;right:auto!important}
html.invoice-lang-en .sidebar-panel{left:0!important;right:auto!important}
html.invoice-lang-en nav.header{right:0!important;left:auto!important}
html.invoice-lang-en .fwter-header-row{flex-direction:row}
html.invoice-lang-en .fwter-sidebar-panel-inner{padding-left:var(--main-sidebar-width)!important;padding-right:0!important}
@media(max-width:767px){
  .fwter-global-footer,html.invoice-lang-ar .fwter-global-footer{margin-left:0!important;margin-right:0!important;padding-left:1rem;padding-right:1rem}
  .fwter-global-footer-inner{flex-direction:column!important;align-items:flex-start;gap:.35rem}
  html.invoice-lang-ar .fwter-global-footer-inner{align-items:flex-end}
}
html.invoice-lang-ar .fwter-sidebar-panel-inner .lang-en-only,
html.invoice-lang-ar .fwter-main-sidebar-inner .lang-en-only,
html.invoice-lang-ar .fwter-global-footer .lang-en-only{display:none!important}
html.invoice-lang-en .fwter-sidebar-panel-inner .lang-ar-only,
html.invoice-lang-en .fwter-main-sidebar-inner .lang-ar-only,
html.invoice-lang-en .fwter-global-footer .lang-ar-only{display:none!important}


/* =========================================================
   FWTER V5.11.2 - Main rail tooltip restore
   ========================================================= */
#fwter-rail-tooltip{
  position:fixed;
  z-index:99999;
  display:none;
  max-width:220px;
  padding:.45rem .7rem;
  border-radius:5px;
  background:#1e293b;
  color:#fff;
  font-size:.72rem;
  font-weight:500;
  line-height:1.35;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 8px 20px rgba(15,23,42,.16);
  opacity:0;
  transform:translateY(-50%) scale(.97);
  transition:opacity .12s ease,transform .12s ease;
}
#fwter-rail-tooltip.is-visible{
  display:block;
  opacity:1;
  transform:translateY(-50%) scale(1);
}
#fwter-rail-tooltip[data-placement="left"]::after,
#fwter-rail-tooltip[data-placement="right"]::after{
  content:"";
  position:absolute;
  top:50%;
  width:0;
  height:0;
  transform:translateY(-50%);
  border:5px solid transparent;
}
#fwter-rail-tooltip[data-placement="left"]::after{
  right:-10px;
  border-left-color:#1e293b;
}
#fwter-rail-tooltip[data-placement="right"]::after{
  left:-10px;
  border-right-color:#1e293b;
}
.dark #fwter-rail-tooltip{
  background:#0f172a;
}
.dark #fwter-rail-tooltip[data-placement="left"]::after{
  border-left-color:#0f172a;
}
.dark #fwter-rail-tooltip[data-placement="right"]::after{
  border-right-color:#0f172a;
}
@media (hover:none){
  #fwter-rail-tooltip{display:none!important}
}


/* =========================================================
   FWTER V5.11.3 - Arabic sidebar/content overlap fix
   The RTL shell must REDUCE usable width, not only add margin.
   ========================================================= */
html.invoice-lang-ar .main-content{
  box-sizing:border-box!important;
  margin-left:0!important;
  margin-right:var(--main-sidebar-width)!important;
  width:calc(100% - var(--main-sidebar-width))!important;
  max-width:calc(100% - var(--main-sidebar-width))!important;
}

html.invoice-lang-ar nav.header{
  box-sizing:border-box!important;
  left:0!important;
  right:var(--main-sidebar-width)!important;
  width:auto!important;
}

html.invoice-lang-ar .fwter-global-footer{
  box-sizing:border-box!important;
  margin-left:0!important;
  margin-right:var(--main-sidebar-width)!important;
  width:calc(100% - var(--main-sidebar-width))!important;
  max-width:calc(100% - var(--main-sidebar-width))!important;
}

@media (min-width:80rem){
  html.invoice-lang-ar .is-sidebar-open .main-content{
    margin-left:0!important;
    margin-right:calc(var(--main-sidebar-width) + var(--sidebar-panel-width))!important;
    width:calc(100% - var(--main-sidebar-width) - var(--sidebar-panel-width))!important;
    max-width:calc(100% - var(--main-sidebar-width) - var(--sidebar-panel-width))!important;
  }

  html.invoice-lang-ar .is-sidebar-open nav.header{
    left:0!important;
    right:calc(var(--main-sidebar-width) + var(--sidebar-panel-width))!important;
    width:auto!important;
  }

  html.invoice-lang-ar .is-sidebar-open .fwter-global-footer{
    margin-left:0!important;
    margin-right:calc(var(--main-sidebar-width) + var(--sidebar-panel-width))!important;
    width:calc(100% - var(--main-sidebar-width) - var(--sidebar-panel-width))!important;
    max-width:calc(100% - var(--main-sidebar-width) - var(--sidebar-panel-width))!important;
  }
}

@media (max-width:767px){
  html.invoice-lang-ar .main-content,
  html.invoice-lang-ar .fwter-global-footer{
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  html.invoice-lang-ar nav.header{
    left:0!important;
    right:0!important;
    width:auto!important;
  }
}