/* ============================================================================
   app.css — Investime UI
   v1.2 (2025-10-17)
   - Strukturë e qartë me seksione të komentuara
   - Unifikim i :root (pa duplikime)
   - Tabela FG & Bank: widths me variabla + rregullime të header/numrave/butonit
   - “.muted” vetëm ngjyrë (pa background)
   - Rregulla responsive + print të ruajtura
   -------------------------------------------------------------------------- */

/* 1) FOUNDATIONS — Variabla, Resets, Bazat tipografike
   -------------------------------------------------------------------------- */
   :root{
    /* Ngjyrat kryesore */
    --fg:#0b1220;
    --bg:#ffffff;
    --muted:#64748b;
    --line:#e5e7eb;
    --brand:#0b1220;
  
    /* Gjendje */
    --ok:#166534;
    --warn:#a16207;
    --err:#9f1239;
    --info:#1d4ed8;
  
    /* Kurora & hije */
    --radius:12px;
    --radius-lg:16px;
    --radius-pill:999px;
    --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  
    /* ---- COL LAYOUT (FG & BANK) ----
       Këto variabla kontrollojnë gjerësitë e kolonave kryesore.
       Ndrysho vetëm këtu për të “tuning” layout-in.
    */
    /* Kolonat numerike + kolona e veprimeve (butoni) */
    --col-num: 5rem;       /* Plan/Paguar/Mbetur (min-width) */
    --col-actions: 6.5rem; /* “Paguaj” (min-width)         */
  
    /* FG */
    --fg-col-idx: 2.8rem;
    --fg-col-acts: 14rem;
    --fg-col-period: 8rem;
    --fg-col-product: 16rem;
    --fg-col-notes: 6rem;
  
    /* Bank */
    --bk-col-idx: 2.8rem;
    --bk-col-acts: 14rem;
    --bk-col-period: 8rem;
    --bk-col-notes: 8rem;
  }
  
  *{ box-sizing:border-box }
  html,body{ height:100% }
  body{
    font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
    margin:0; color:var(--fg); background:var(--bg);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  img{ max-width:100%; height:auto }
  a{ color:inherit }
  
  /* Tipografi bazë */
  h1{ font-size:22px; margin:0 }
  h2{ font-size:18px; margin:0 0 8px }
  h3{ font-size:16px; margin:0 0 6px }
  small, .note{ color:var(--muted); font-size:13px }
  .muted{ color:var(--muted); background:transparent }
  .pre{
    white-space:pre-wrap; background:#0b1220; color:#fff;
    padding:12px; border-radius:10px
  }
  
  /* 2) LAYOUT PRIMITIVES — Wrap, Grids, Helpers
     -------------------------------------------------------------------------- */
  .wrap{ max-width:1100px; margin:24px auto; padding:0 16px }
  .wrap.narrow{ max-width:860px }
  .section{ margin:18px 0 }
  .hdr{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px }
  .sub{ color:var(--muted); font-size:14px }
  .center{ display:flex; align-items:center; justify-content:center }
  .right{ display:flex; justify-content:flex-end }
  .flex{ display:flex }
  .space-between{ display:flex; justify-content:space-between; align-items:center }
  .gap-6{ gap:6px } .gap-8{ gap:8px } .gap-12{ gap:12px } .gap-16{ gap:16px }
  
  /* Sistemi i grideve */
  .grid{ display:grid; gap:12px }
  .grid-2{ grid-template-columns:1fr 1fr }
  .grid-3{ grid-template-columns:1fr 1fr 1fr }
  .grid-4{ grid-template-columns:repeat(4,1fr) }
  .row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
  
  /* Client/Brand grid (desktop) */
  .grid-client-brand{
    display:grid; grid-template-columns:1.6fr 0.8fr; gap:12px; align-items:end;
  }
  
  /* 3) TOP BAR, CARDS, BANNERS
     -------------------------------------------------------------------------- */
  .bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; border-bottom:1px solid var(--line); background:#fff
  }
  .logo{ height:28px }
  
  .card{
    border:1px solid var(--line); border-radius:var(--radius-lg);
    background:#fff; padding:12px; box-shadow:var(--shadow);
  }
  .card.flat{ box-shadow:none }
  .card.muted{ background:#f8fafc }
  
  .banner{
    padding:10px 12px; border-radius:var(--radius); border:1px solid var(--line);
    background:#f8fafc; color:var(--fg)
  }
  .banner.info{ border-color:#bfdbfe; background:#eff6ff }
  .banner.warn{ border-color:#fde68a; background:#fffbeb }
  .banner.err{ border-color:#fecaca; background:#fff1f2 }
  .banner.ok{ border-color:#bbf7d0; background:#f0fdf4 }
  
  /* 4) BUTTONS & BADGES/TAGS
     -------------------------------------------------------------------------- */
  button, .btn{
    font-size:14px; padding:8px 12px;
    border:1px solid var(--brand); color:#fff; background:var(--brand);
    border-radius:10px; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
  }
  .btn:hover{ background:#111827; color:#fff }
  .btn.secondary{ background:#fff; color:var(--brand); border-color:var(--brand) }
  .btn.secondary:hover{ background:#f8fafc }
  .btn.ghost{ background:#fff; color:var(--fg); border-color:var(--line) }
  .btn.ghost:hover{ background:#f8fafc }
  .btn.danger{ background:#b91c1c; border-color:#b91c1c }
  .btn.danger:hover{ background:#991b1b }
  .btn.ok{ background:#166534; border-color:#166534 }
  .btn.warn{ background:#a16207; border-color:#a16207 }
  .btn.small{ padding:6px 10px; font-size:13px; border-radius:8px }
  .btn-sm{ padding:6px 10px; font-size:13px; border-radius:8px }
  .btn.block{ display:block; width:100% }
  button[disabled], .btn[disabled]{ opacity:.6; cursor:not-allowed }
  
  /* Icon button */
  .iconbtn{
    width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer
  }
  .iconbtn:hover{ background:#f8fafc }
  
  /* Badges & Tags */
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 8px; border-radius:var(--radius-pill);
    border:1px solid var(--line); font-size:12px; color:var(--muted)
  }
  .badge b{ font-weight:700 }
  .tag{
    display:inline-block; padding:3px 8px; border-radius:8px;
    background:#f3f4f6; border:1px solid var(--line); font-size:12px
  }
  
  /* 5) FORMS — Inputs, Focus, Helpers
     -------------------------------------------------------------------------- */
  label{ display:block; font-weight:600; margin:8px 0 6px }
  input, select, textarea{
    font-size:14px; padding:10px 12px; border:1px solid var(--line);
    border-radius:10px; background:#fff; color:var(--fg)
  }
  textarea{ min-height:96px; resize:vertical }
  input:focus, select:focus, textarea:focus{
    outline:none; border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.25)
  }
  input[readonly], select[readonly], textarea[readonly]{ background:#f8fafc }
  .help{ font-size:12px; color:var(--muted); margin-top:4px }
  .is-invalid{ border-color:var(--err)!important; box-shadow:0 0 0 3px rgba(159,18,57,.15)!important }
  
  .input.wide{ min-width:540px }
  .brand-select{ min-width:280px }
  .small-input{ padding:8px 10px; font-size:13px }
  .field-sm{ max-width:220px } /* Fatura e parë nr/dt */
  
  /* 6) TABS & STEPS & PANES
     -------------------------------------------------------------------------- */
  .tabs{ display:flex; gap:8px; align-items:center }
  .tab{
    padding:6px 10px; border-radius:8px; border:1px solid var(--line);
    text-decoration:none; color:var(--fg); background:#fff;
    display:inline-flex; align-items:center; gap:6px
  }
  .tab:hover{ background:#f8fafc }
  .tab.active{ background:var(--brand); color:#fff; border-color:var(--brand) }
  .tab .count{ font-size:12px; padding:0 7px; border-radius:999px; background:#0ea5e9; color:#fff }
  
  .steps{
    display:flex; gap:8px; list-style:none; margin:0; padding:8px 2px;
    position:sticky; top:54px; z-index:9; background:#fff; border-bottom:1px solid var(--line)
  }
  .steps li{
    padding:4px 10px; border:1px solid var(--line); border-radius:var(--radius-pill);
    font-size:13px; color:var(--fg); background:#fff
  }
  .steps li.on{ background:var(--brand); color:#fff; border-color:var(--brand) }
  .steps li.done{ background:#111827; color:#fff; border-color:#111827; opacity:.9 }
  
  .pane{ display:none; padding:12px }
  .pane.show{ display:block }
  
  /* 7) TABLES — Generike + specifike për FG/Bank/Payments
     -------------------------------------------------------------------------- */
  /* Tabelë generike */
  .t{ border-collapse:collapse; width:100%; background:#fff }
  .t th, .t td{ border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top }
  .t th{ background:#f8fafc; font-weight:700 }
  .t.compact th, .t.compact td{ padding:4px 6px }
  .t.zebra tbody tr:nth-child(odd){ background:#fafafa }
  .t .right{ text-align:right }
  .t .center{ text-align:center }
  .t .muted{ color:var(--muted) }
  .t.sticky thead th{ position:sticky; top:0; z-index:1 }
  
  /* Payments table: gjerësitë e kolonave */
  #payTable th.col-qty,    #payTable td.col-qty{ width:110px; text-align:right }
  #payTable th.col-val,    #payTable td.col-val{ width:130px; text-align:right }
  #payTable th.col-actions,#payTable td.col-actions{ width:80px;  text-align:right; white-space:nowrap }
  
  /* FG & Bank — qeliza me shumë rreshta */
  .cell-lines{ display:flex; flex-direction:column; gap:4px }
  .cell-lines .line{
    color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* 1 line + ellipsis */
  }
  
  /* Periudha në një rresht, kompakte */
  .cell-period{ display:flex; flex-direction:row; gap:6px; align-items:center }
  
  /* Header-at: mos i ça fjalët */
  #tbl-fg thead th, #tbl-bank thead th{
    white-space:nowrap; word-break:keep-all;
  }
  
  /* Qelizat e trupit: palos normalisht, por lejo wrap aty ku duhet */
  #tbl-fg td, #tbl-bank td{
    word-break:normal; overflow-wrap:anywhere;
  }
  
  /* FG — numrat djathtas + min widths */
  #tbl-fg th:nth-child(6), #tbl-fg td:nth-child(6),
  #tbl-fg th:nth-child(7), #tbl-fg td:nth-child(7),
  #tbl-fg th:nth-child(8), #tbl-fg td:nth-child(8){
    min-width:var(--col-num); text-align:right; white-space:nowrap;
  }
  /* FG — kolona veprimeve (buton) */
  #tbl-fg th:nth-child(9), #tbl-fg td:nth-child(9){
    min-width:var(--col-actions); white-space:nowrap;
  }
  
  /* BANK — numrat djathtas + min widths */
  #tbl-bank th:nth-child(5), #tbl-bank td:nth-child(5),
  #tbl-bank th:nth-child(6), #tbl-bank td:nth-child(6),
  #tbl-bank th:nth-child(7), #tbl-bank td:nth-child(7){
    min-width:var(--col-num); text-align:right; white-space:nowrap;
  }
  /* BANK — kolona veprimeve */
  #tbl-bank th:nth-child(8), #tbl-bank td:nth-child(8){
    min-width:var(--col-actions); white-space:nowrap;
  }
  
  /* FG — widths sipas variablave */
  #tbl-fg th:nth-child(1), #tbl-fg td:nth-child(1){ width:var(--fg-col-idx) }
  #tbl-fg th:nth-child(2), #tbl-fg td:nth-child(2){ width:var(--fg-col-acts) }
  #tbl-fg th:nth-child(3), #tbl-fg td:nth-child(3){ width:var(--fg-col-period) }
  #tbl-fg th:nth-child(4), #tbl-fg td:nth-child(4){ width:var(--fg-col-product) }
  #tbl-fg th:nth-child(5), #tbl-fg td:nth-child(5){ width:var(--fg-col-notes) }
  
  /* BANK — widths sipas variablave */
  #tbl-bank th:nth-child(1), #tbl-bank td:nth-child(1){ width:var(--bk-col-idx) }
  #tbl-bank th:nth-child(2), #tbl-bank td:nth-child(2){ width:var(--bk-col-acts) }
  #tbl-bank th:nth-child(3), #tbl-bank td:nth-child(3){ width:var(--bk-col-period) }
  #tbl-bank th:nth-child(4), #tbl-bank td:nth-child(4){ width:var(--bk-col-notes) }
  
  /* Lejo “auto” layout në shumicën e rasteve; “fixed” vetëm në desktop të gjerë */
  #tbl-fg, #tbl-bank{ table-layout:auto; width:100% }
  @media (min-width:1200px){
    #tbl-fg, #tbl-bank{ table-layout:fixed }
  }
  
  /* Butoni brenda qelizës: mos u ndaj në rreshta */
  #tbl-fg td .btn, #tbl-bank td .btn{ white-space:nowrap }
  /* 7.1 Hard reset për header-at te 4B (parandalon grumbullimin) */


  
  /* 8) FG ROWS (quick allocation) — përdoret në disa ekrane
     -------------------------------------------------------------------------- */
  .fgRow{ display:flex; gap:6px; align-items:center; margin:6px 0; flex-wrap:wrap }
  .fgRow input{ width:120px }
  
  /* 9) DROPDOWNS & CHECKLIST (SKU chooser)
     -------------------------------------------------------------------------- */
  .dropdown{ position:relative; min-width:480px }
  .dropdown-menu{
    position:absolute; left:0; right:0; top:calc(100% + 4px);
    border:1px solid var(--line); background:#fff; border-radius:12px;
    box-shadow:0 10px 30px rgba(0.06); display:none; max-height:320px; overflow:auto; z-index:20
  }
  .dropdown-menu.show{ display:block }
  .dropdown-item{ padding:8px 10px; border-bottom:1px solid #f3f4f6; cursor:pointer }
  .dropdown-item:hover{ background:#f8fafc }
  .dropdown-item .small{ font-size:12px; color:var(--muted) }
  
  .menu-checklist{
    display:block; margin-top:6px; border:1px solid var(--line); background:#fff;
    border-radius:12px; padding:6px; max-height:320px; overflow:auto; box-shadow:var(--shadow)
  }
  .menu-checklist label{
    display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; cursor:pointer
  }
  .menu-checklist label:hover{ background:#f8fafc }
  .menu-checklist .menu-actions{ display:flex; gap:8px; justify-content:flex-end; padding:6px 0 2px }
  .menu-checklist .badge-sel{
    font-size:12px; color:var(--muted);
    border:1px solid var(--line); padding:2px 8px; border-radius:999px
  }
  
  /* 10) CHIPS (tags)
     -------------------------------------------------------------------------- */
  .chip{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:#0b1220; color:#fff; padding:10px; border-radius:999px
  }
  .chip .small{ opacity:.85 }
  .chip button{ background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer }
  
  /* 11) UTILITIES — spacing, visibility, alignment, state text
     -------------------------------------------------------------------------- */
  .hide, .hidden{ display:none!important }
  .mt{ margin-top:12px } .mt-6{ margin-top:6px } .mt-16{ margin-top:16px }
  .mb{ margin-bottom:12px } .mb-16{ margin-bottom:16px }
  .ml-auto{ margin-left:auto }
  .w-100{ width:100% }
  .text-right{ text-align:right }
  
  .error{ color:var(--err) }
  .success{ color:var(--ok) }
  .warn{ color:var(--warn) }
  .info{ color:var(--info) }
  
  /* 12) TOASTS
     -------------------------------------------------------------------------- */
  .toast{
    position:fixed; right:16px; bottom:16px; z-index:50;
    display:flex; flex-direction:column; gap:8px
  }
  .toast .msg{
    padding:10px 12px; border-radius:10px; border:1px solid var(--line);
    background:#fff; box-shadow:var(--shadow)
  }
  .toast .msg.ok{ border-color:#bbf7d0; background:#f0fdf4 }
  .toast .msg.err{ border-color:#fecaca; background:#fff1f2 }
  .toast .msg.warn{ border-color:#fde68a; background:#fffbeb }
  
  /* 13) MODALS & DRAWER
     -------------------------------------------------------------------------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(2,6,23,.55);
    display:none; align-items:center; justify-content:center; z-index:100
  }
  .modal-backdrop.show{ display:flex }
  
  .modal{
    width:min(720px,92vw); background:#fff; border-radius:16px; border:1px solid var(--line);
    box-shadow:var(--shadow); padding:16px
  }
  .modal .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
  .modal .modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
  
  .drawer{
    position:fixed; top:0; right:-420px; width:400px; height:100%;
    background:#fff; border-left:1px solid var(--line); box-shadow:var(--shadow);
    transition:right .25s ease; z-index:90; padding:14px
  }
  .drawer.show{ right:0 }
  
  /* 14) PROGRESS, TOOLTIP, CODE
     -------------------------------------------------------------------------- */
  .progress{ height:8px; background:#f1f5f9; border-radius:999px; overflow:hidden }
  .progress > span{ display:block; height:100%; background:#0ea5e9; width:0; transition:width .25s ease }
  
  .tooltip{ position:relative }
  .tooltip:hover .tooltip-box{ opacity:1; transform:translateY(0) }
  .tooltip-box{
    position:absolute; left:50%; transform:translate(-50%,-6px); top:-8px;
    background:#111827; color:#fff; padding:6px 8px; border-radius:8px; font-size:12px;
    white-space:nowrap; opacity:0; pointer-events:none; transition:all .15s ease
  }
  code{
    background:#0b12200d; border:1px solid #e5e7eb; border-radius:6px; padding:2px 6px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
  }
  
  /* 15) WIZARD-SPECIFIC HELPERS
     -------------------------------------------------------------------------- */
  #payActItems .pick.done{ background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px }
  #payActItems .pick.done input[type="checkbox"]{ accent-color:#10b981 }
  #payActItems .pick{
    border:1px solid var(--line); background:#fff; border-radius:8px;
    transition:background .15s ease, border-color .15s ease;
  }
  #payActItems .pick:hover{ background:#f8fafc; border-color:#dbe1e8 }
  
  .wizard-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
  .wizard-actions{ display:flex; gap:10px }
  .wizard-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px }
  .helper{
    border:1px dashed var(--line); border-radius:12px; padding:10px;
    background:#fafafa; color:var(--muted); font-size:13px
  }
  
  /* Summary: butonët “Detajim” */
  #summaryView [data-alloc].btn.ghost{
    background:#f3f4f6; border-color:#d1d5db; color:#374151;
  }
  #summaryView [data-alloc].btn.ghost:hover{
    background:#e5e7eb; border-color:#9ca3af;
  }
  
#step4b .mini-progress{height:6px;border-radius:6px;background:#eef2f7;overflow:hidden}
#step4b .mini-progress span{display:block;height:100%;background:#16a34a}

#step4b .fgPayTable th,
#step4b .fgPayTable td,
#step4b .fgUnallocTable th,
#step4b .fgUnallocTable td{padding:8px 10px}

#step4b .small{font-size:12px}
#step4b .muted{color:#64748b}

#step4b .btn.ok{background:#106a2b}
#step4b .btn.warn{background:#c2410c}


  /* 16) OPSIONALE (jo aktive këtu) — mbajtur për referencë
     --------------------------------------------------------------------------
  .table.grid {
    display:grid;
    grid-template-columns:40px 1.4fr 1.1fr 1fr 0.8fr 0.7fr 0.7fr 0.9fr 120px;
  }
  .col-resizer { width:6px; cursor:col-resize; }
  -------------------------------------------------------------------------- */


/* Mos i thyej numrat karakter-më-karakter në qeliza */
#tbl-fg td, #tbl-bank td{ word-break: normal; overflow-wrap: anywhere; }




/* Anulo rregullin global .right{display:flex} brenda 4B */


/* Kolona e tekstit te header-i të ketë hapësirë të mjaftueshme */



  /* 17) RESPONSIVE
     -------------------------------------------------------------------------- */
  @media (max-width:980px){
    .grid-client-brand{ grid-template-columns:1fr }
    .input.wide{ min-width:unset }
  }
  @media (max-width:880px){
    .grid-3{ grid-template-columns:1fr 1fr }
    .grid-4{ grid-template-columns:1fr 1fr }
  }
  @media (max-width:680px){
    .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr }
    .bar{ flex-wrap:wrap; gap:8px }
    .wizard-head{ flex-direction:column; align-items:flex-start }
    .right{ justify-content:flex-start }
    .wrap{ padding:0 12px }
  }
  
  /* 18) PRINT
     -------------------------------------------------------------------------- */
  @media print{
    .bar, .btn, .tabs, .toast, .modal-backdrop, .drawer{ display:none!important }
    .card{ box-shadow:none; border-color:#d1d5db }
    .wrap{ max-width:100%; margin:0; padding:0 }
  }
  @media print{ .no-print{ display:none!important } }
  





/* anulo globalen .right { display:flex } vetëm këtu */


/* ── Header i pagesës: jep gjerësi të detyrueshme kolonave ── */
/* 1) “Aktivizimet” (th)  2) teksti i aktivizimeve  3) titulli “Sasia kontratë”
      4) totali  5) titulli “Alokuar”  6) vlera e alokuar  7) titulli “Mbetur”  8) vlera e mbetur */
      
      
      
      
      

      
      

/* kolona “Përshkrim” në tabelën e rreshtave të alokimit: mos u hap shumë */




/* 0) neutralizo “trick”-et globale që na prishin tabelat */



/* 1) lejo wrap normal të teksteve (shuan white-space:nowrap nga tabela të tjera) */