/* =====================================================================
   FBR Digital Invoice — application-specific styles

   Deposito theme ke upar sirf wo cheezein jo is app ke liye chahiyein.
   Theme ki apni files (style.css / skin_color.css) ko chherna nahi —
   warna template update karna namumkin ho jata hai.
   ===================================================================== */

/* ---------- Invoice: version badge ---------- */
.badge-version {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 3px;
    color: #fff;
}
.badge-v3 { background-color: #14a44d; }
.badge-v1 { background-color: #8b95a5; }

/* ---------- Invoice status ---------- */
.status-Draft      { color: #8b95a5; font-weight: 600; }
.status-Validated  { color: #e4a11b; font-weight: 600; }
.status-InProcess  { color: #3b71ca; font-weight: 600; }
.status-Posted     { color: #14a44d; font-weight: 600; }

/* ---------- Petroleum levy tag ---------- */
.levy-badge {
    display: inline-block;
    background: #e4a11b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
}

/* ---------- Grids ---------- */
table.grid-table td { vertical-align: middle !important; }

.grid-table .fbr-no  { font-size: 11px; color: #3b71ca; word-break: break-all; }
.grid-table .gst-line { font-size: 11px; color: #8b95a5; }

/* Action icons ek line mein, halka sa gap */
.action-buttons a {
    display: inline-block;
    padding: 3px 5px;
    font-size: 15px;
    line-height: 1;
}
.action-buttons a:hover { opacity: .7; }

/* ---------- Cart / entry tables ---------- */
#cartTable th,
#cartTable td,
#itemsTable th,
#itemsTable td {
    font-size: 12px;
    padding: 6px !important;
    vertical-align: middle;
}
#cartTable tfoot td { background: #f6f7fb; font-weight: 700; }

/* ---------- Report tables ---------- */
#reportTable th {
    background: #f6f7fb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
#reportTable td       { font-size: 12.5px; }
#reportTable tfoot td { background: #f6f7fb; font-weight: 700; }

.stock-negative { color: #dc4c64; font-weight: 700; }
.row-opening td { background: #fffbe6; font-weight: 600; }

/* Numbers hamesha column mein line-up hon */
.text-end, td.text-end, th.text-end,
.num, td.num { font-variant-numeric: tabular-nums; }

/* ---------- Read-only calculated fields ---------- */
.calc-field {
    background-color: #eef1f6 !important;
    font-weight: 600;
}
.calc-total {
    background-color: #2b3a55 !important;
    color: #ffd166 !important;
    font-weight: 700;
    font-size: 17px;
}

/* ---------- select2 ko Bootstrap 5 input jaisa dikhana ---------- */
.select2-container .select2-selection--single {
    height: calc(2.25rem + 2px);
    border: 1px solid #d5dae2;
    border-radius: .25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem);
    padding-left: .75rem;
    color: #4d5875;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3b71ca;
}
.select2-dropdown { border-color: #d5dae2; }

/* select2 modal ke andar clip na ho */
.modal .select2-container { z-index: 1056; }

/* ---------- DataTables ko theme ke sath sur mein rakhna ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d5dae2;
    border-radius: .25rem;
    padding: .25rem .5rem;
}
/*  NOTE: current-page button ka rang yahan set NAHI karna.
    color_theme.css har theme ke liye .paginate_button.current khud style
    karti hai (theme-primary = #6cbbfa, theme-info = #a45ff8). Pehle yahan
    aik hardcoded #3b71ca tha jo dono panels mein theme se ulat rang deta
    tha.  */

/* ---------- Chhote helpers ---------- */
.cursor-pointer { cursor: pointer; }
.w-90 { width: 90px; }

@media print {
    .main-header, .main-sidebar, .main-footer, .content-header, .no-print { display: none !important; }
    .content-wrapper { margin-left: 0 !important; }
}

/* ---------- Header ka logo ----------
   Deposito ka .logo-box background navy (#2f3478) hai, aur light-skin mein
   sidebar bhi wahi navy — is liye left column upar se neeche tak aik hi
   rang ka rehta hai. Deposito khud yahan "logo-light-text.png" (safaid
   logo) rakhta hai; hamare paas sirf aik asset hai jis mein text dark grey
   hai, jo navy par takreeban invisible ho jata tha. Filter se usay safaid
   kar dete hain — alag asset banane ki zaroorat nahi. */
.main-header .logo-box .logo img {
    filter: brightness(0) invert(1);
}

/* ---------- Deposito ki width/height utilities ka trap ----------
   Deposito mein .w-100 ka matlab width:100px hai (Bootstrap ka 100% nahi),
   isi tarah .h-100 = 100px, .w-50 = 50px. Percentage ke liye Deposito
   .w-p100 / .h-p100 deta hai. Naya markup likhte waqt ye zaroor yaad
   rakhein — warna full-width button 100px ka ho kar reh jata hai. */