/* ================================================================
   butaneiran v1.3 — light design layer ON TOP of bootstrap-rtl
   Keeps bi identity: Yekan font, light topbar, bootstrap colors.
   Adds: ergonomics, rounded whitespace, equal tile grid,
         real horizontal-scroll responsiveness for wide tables.
   ================================================================ */

/* ---------- 1. font & base ---------- */
@font-face{font-family:Yekan;src:url(./fonts/Yekan.eot);src:url(./fonts/Yekan.eot?#iefix) format("embedded-opentype"),url(./fonts/Yekan.woff) format("woff"),url(./fonts/Yekan.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#f2f6fa;
  --surface:#fff;
  --ink:#2b3648;
  --ink2:#46586f;
  --muted:#7c8da1;
  --line:#e2e9f1;
  --line2:#cdd9e6;
  --brand:#0f5daa;
  --brand-soft:#eaf2fb;
  --radius:10px;
  --shadow-sm:0 1px 3px rgba(30,60,100,.07);
  --shadow:0 3px 12px rgba(30,60,100,.10);
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Yekan,Tahoma,sans-serif!important;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.9;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{color:#1b2c44;font-weight:800;line-height:1.6}
a{color:#0a6cd6}
a:hover{color:#0956aa}
.container{max-width:1200px}
::selection{background:rgba(10,108,214,.16)}

/* ---------- 2. topbar (light, bi-like) ---------- */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(30,60,100,.06);
  min-height:58px;
  padding:.5rem 1rem;
}
.navbar-brand{
  color:#1b2c44!important;
  font-weight:800;
  display:flex;align-items:center;gap:.55rem;
  font-size:1.1rem;
}
.navbar-brand img{width:38px;height:38px;border-radius:9px;object-fit:contain}
.navbar-brand small{display:flex;flex-direction:column;font-size:.66rem;font-weight:400;color:var(--muted);line-height:1.5}
.navbar .nav-link{color:#46586f!important;border-radius:8px;padding:.45rem .95rem;font-weight:700;font-size:.92rem;transition:background .15s,color .15s}
.navbar .nav-link:hover{background:var(--brand-soft);color:#0a3a6b!important}
.navbar-toggler{border:1px solid var(--line2);border-radius:8px}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(10,108,214,.18)}
.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2346586f' stroke-width='2.6' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
@media(max-width:991px){
  .navbar-collapse{background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:.5rem;padding:.35rem;box-shadow:var(--shadow-sm)}
}

/* ---------- 3. breadcrumb ---------- */
.breadcrumbcontain{margin:.7rem 0 .95rem}
.breadcrumb{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.55rem 1rem;font-size:.85rem;box-shadow:var(--shadow-sm);margin:0}
.breadcrumb-item a{color:var(--muted);font-weight:700}
.breadcrumb-item a:hover{color:var(--brand);text-decoration:none}
.breadcrumb-item.active{color:#1b2c44;font-weight:800}
.breadcrumb-item+.breadcrumb-item::before{color:#b6c4d4}

/* ---------- 4. buttons (light polish, bootstrap colors kept) ---------- */
.btn{
  font-family:Yekan,Tahoma,sans-serif;
  border-radius:9px;
  font-weight:700;
  padding:.5rem 1.1rem;
  line-height:1.75;
  box-shadow:var(--shadow-sm);
  transition:transform .08s,box-shadow .15s,filter .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none}
.btn:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-sm)}
.btn i,.btn span[class*=icon-]{font-size:1.12em}
.btn-lg{border-radius:12px;padding:.6rem 1.4rem;font-size:1.02rem}
.btn-sm{border-radius:8px;padding:.25rem .7rem;font-size:.84rem}
.btn-xs{border-radius:7px;padding:.12rem .55rem;font-size:.78rem}
.btn-block{width:100%}
.btn:disabled,.btn.disabled{opacity:.55;pointer-events:none;box-shadow:none;filter:grayscale(.2)}
.btn.disabled:hover{transform:none;box-shadow:none}

/* home dashboard tiles — equal height, centered, light colors kept */
.mainButtons{
  min-height:112px;margin-bottom:14px!important;border-radius:16px;
  display:flex!important;flex-direction:column;justify-content:center;align-items:center;
  font-size:1rem!important;padding:.65rem .3rem!important;line-height:1.9;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 3px 10px rgba(30,60,100,.13)!important;
  white-space:normal!important;
}
.mainButtons span[class*=icon-]{font-size:1.85rem;line-height:1;margin-bottom:.2rem}
.mainButtons:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(30,60,100,.22)!important;filter:brightness(1.03)}
.mainButtons:active{transform:translateY(0)}
@media(max-width:575px){.mainButtons{min-height:100px;font-size:.88rem!important}.mainButtons span[class*=icon-]{font-size:1.5rem}}

/* device picker pages (#brands) — round step buttons */
#brands a.btn-lg{min-width:230px;border-radius:999px;margin:.45rem .35rem;font-weight:800;font-size:1.05rem;padding:.62rem 1.6rem;box-shadow:0 3px 10px rgba(30,60,100,.14)!important}
#brands a.btn-lg:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,60,100,.22)!important}
.text-center > a.btn-lg{display:inline-flex;align-items:center;gap:.5rem;margin:.4rem .3rem}

/* ---------- 5. forms ---------- */
.form-group{margin-bottom:1rem}
label{font-weight:700;color:var(--ink2);font-size:.87rem;margin-bottom:.3rem;display:inline-block}
.form-control,.custom-select{
  border-radius:9px;
  border:1px solid var(--line2);
  padding:.48rem .85rem;
  font-size:.95rem;font-family:Yekan,Tahoma,sans-serif;
  color:var(--ink);
  background-color:#fff;
  min-height:42px;
  transition:border-color .15s,box-shadow .15s;
}
.form-control:hover,.custom-select:hover{border-color:#a9bdd4}
.form-control:focus,.custom-select:focus{border-color:#4d9ff0;box-shadow:0 0 0 .2rem rgba(10,108,214,.13);outline:0}
.form-control::placeholder{color:#a2b2c4}
.form-control:disabled{background:#f3f6f9;color:var(--muted)}
select.form-control:not([size]):not([multiple]),.custom-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23607a95' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left .8rem center;padding-left:2.1rem;cursor:pointer;
}
textarea.form-control{min-height:85px;resize:vertical}
.form-check-input{margin-top:.34rem}
.form-text{color:var(--muted);font-size:.8rem}
.custom-control-label{font-weight:600}
.custom-control-label::before,.custom-control-label::after{width:1.3rem;height:1.3rem;top:.22rem;border-radius:6px}
.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .18rem rgba(10,108,214,.16)}
.input-group-text{border-color:var(--line2);background:#f2f6fa;color:var(--ink2)}
.input-group>.input-group-prepend .input-group-text{border-radius:9px 0 0 9px}
.input-group>.input-group-append .input-group-text{border-radius:0 9px 9px 0}

/* ---------- 6. tables + wide-table responsiveness ---------- */
.table{background:var(--surface);font-size:.9rem;margin-bottom:1rem;max-width:none}
.table thead th{
  background:#edf3f9;color:#20344e;
  border-bottom:2px solid #d5e0ec;
  font-weight:800;padding:.6rem .7rem;white-space:nowrap;vertical-align:middle;font-size:.86rem;
}
.table td{padding:.5rem .7rem;vertical-align:middle;border-top:1px solid var(--line)}
.table tbody tr{transition:background .1s}
.table-striped tbody tr:nth-of-type(odd){background:#f7fafc}
.table-hover tbody tr:hover{background:#eef5fc}
.table-bordered,.table-bordered th,.table-bordered td{border-color:var(--line)}
.table-sm th,.table-sm td{padding:.3rem .5rem}
/* scrollable wrapper: allow real x-scroll (bi's .table-responsive never overflowed correctly on touch) */
.table-responsive{
  display:block;width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
}
.table-responsive>.table{margin-bottom:0}
/* the JS auto-wraps bare tables in .table-responsive on small screens */
@media(max-width:991px){
  .table-responsive{-webkit-overflow-scrolling:touch}
  .table-responsive::after{content:"";display:none}
}
.thead-dark th{background:#343a40;color:#fff}
.thead-dark a{color:#fff!important}
.thead-dark a.active{color:#ffe066!important;font-weight:800}
.table-primary,.table-primary>td{background:#d8e8fa!important}
.table-success,.table-success>td{background:#dcf1e3!important}
.table-danger,.table-danger>td{background:#fde3e6!important}
.table-warning,.table-warning>td{background:#fdf0d3!important}
.table-light,.table-light>td{background:#f6f8fb!important}
@media(max-width:575px){
  .table{font-size:.83rem}
  .table thead th,.table td{padding:.4rem .5rem}
}

/* ---------- 7. cards / modal / dropdown / alerts ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:1rem}
.card-header{background:#f7fafd;border-bottom:1px solid var(--line);font-weight:800;color:#1b2c44;padding:.7rem 1.1rem;border-radius:var(--radius) var(--radius) 0 0}
.card-body{padding:1.1rem}
.card-footer{background:#f7fafd;border-top:1px solid var(--line)}
.modal-content{border:0;border-radius:14px;box-shadow:0 10px 40px rgba(20,40,70,.25)}
.modal-header{border-bottom:1px solid var(--line);background:#fff;padding:.85rem 1.2rem;border-radius:14px 14px 0 0}
.modal-title{color:#1b2c44;font-weight:800;font-size:1rem}
.modal-body{padding:1.2rem}
.modal-footer{border-top:1px solid var(--line);background:#f8fafc;padding:.7rem 1.2rem}
.modal-backdrop.show{opacity:.5}
.dropdown-menu{border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.4rem;font-size:.92rem}
.dropdown-item{border-radius:7px;padding:.42rem .85rem;color:var(--ink2);font-weight:600}
.dropdown-item:hover{background:var(--brand-soft);color:#0a3a6b}
.alert{border-radius:var(--radius);font-size:.93rem;padding:.75rem 1.05rem}
.badge{border-radius:6px;padding:.4em .6em;font-weight:800}
.pagination .page-link{border-color:var(--line);border-radius:8px!important;margin:0 2px;color:#0a6cd6;font-weight:700;padding:.4rem .8rem}
.pagination .page-item.active .page-link{background:#0a6cd6;border-color:#0a6cd6}
.progress{border-radius:99px;background:#e8eef5}

/* ---------- 8. plugins (subtle) ---------- */
.select2-container--default .select2-selection--single{height:42px;border-color:var(--line2);border-radius:9px;padding:4px 4px 0 26px;font-family:Yekan,Tahoma,sans-serif}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:32px;color:var(--ink);font-size:.95rem}
.select2-container--default .select2-selection--single .select2-selection__arrow{left:8px;right:auto;top:8px}
.select2-container--default .select2-selection--multiple{border-color:var(--line2);border-radius:9px}
.select2-container--default.select2-container--focus .select2-selection--single,.select2-container--default.select2-container--focus .select2-selection--multiple{border-color:#4d9ff0;box-shadow:0 0 0 .2rem rgba(10,108,214,.13)}
.select2-dropdown{border-color:var(--line);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}
.select2-results__option--highlighted{background:#0a6cd6!important}
.dropzone{border:2px dashed #b7cbe0;border-radius:var(--radius);background:#fbfdff;min-height:130px;display:flex;flex-direction:column;justify-content:center;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone.dz-drag-hover{border-color:#4d9ff0;background:#f2f8ff}
.dz-message{color:var(--muted);font-weight:700}
.dz-message i,.dz-message span[class*=icon-]{font-size:2.1rem;color:#0a6cd6;display:block}
.ajax-file-upload{font-family:Yekan,Tahoma,sans-serif;border-radius:8px!important;font-weight:700}
.swal2-popup{border-radius:16px;font-family:Yekan,Tahoma,sans-serif!important}
.swal2-styled{border-radius:9px!important}
.swal2-image{min-width:100%;min-height:250px;background:linear-gradient(90deg,#ccc,#fff,#ccc,#fff);background-size:400% 400%;animation:gradient 15s ease infinite}
.datepicker-plot-area{border-radius:10px;border-color:var(--line);font-family:Yekan,Tahoma,sans-serif}
.datepicker-day-view .table-days td.selected span{background:#0a6cd6}
.loading_box{border-radius:10px!important;font-family:Yekan,Tahoma,sans-serif!important}

/* ---------- 9. floating sms panel (footer widget, bi-like) ---------- */
.st-actionContainer{z-index:999;position:fixed;display:inline-block}
.right-bottom{bottom:2em;right:2em;float:right!important}
.left-bottom{bottom:2em;left:2em;float:left!important}
div.st-actionContainer li{list-style:none}
.st-panel{width:auto;margin-bottom:10%;background-color:#5f6f81;color:#fff;border:0;border-radius:12px;box-shadow:0 8px 24px rgba(20,40,70,.3);display:none}
.st-panel-header{background:#fff;color:#1b2c44;padding:.45rem .8rem;border-radius:12px 12px 0 0;font-weight:800}
.st-panel-contents{padding:14px}
.st-button-main{font-size:24px;color:#fff;text-align:center;line-height:60px;cursor:pointer;height:100%;width:100%;display:table}
.st-btn-container{background:#007bff;width:60px;height:60px;border-radius:100%;box-shadow:0 5px 16px rgba(0,90,190,.35)}
.rotateForward{animation-name:rotateF;animation-duration:.4s}
@keyframes rotateF{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.rotateBackward{animation-name:rotateB;animation-duration:.4s}
@keyframes rotateB{from{transform:rotate(360deg)}to{transform:rotate(0)}}

/* ---------- 10. helpers (kept from old style.css) ---------- */
.photos{cursor:pointer;transform:rotate(.0001deg);transition:transform .6s cubic-bezier(.165,.84,.44,1);min-width:50px;min-height:100px;background:linear-gradient(90deg,#ccc,#fff,#ccc,#fff);background-size:400% 400%;animation:gradient 15s ease infinite}
.photos:hover{transform:scale(1.12)}
.rowLoadingShow{background:linear-gradient(90deg,#ccc,#fff,#ccc,#fff);background-size:400% 400%;animation:gradient 15s ease infinite}
.paginatorBtn{padding:0 6px!important;margin:1px!important}
@keyframes gradient{0%{background-position:0 50%}25%{background-position:100% 50%}50%{background-position:0 50%}75%{background-position:100% 50%}100%{background-position:0 50%}}
.blink_me{font-weight:800;animation:blinker 2s linear infinite}
@keyframes blinker{0%{opacity:1}50%{opacity:0;font-weight:lighter}75%{opacity:1}100%{opacity:1}}
.icon-spinner9{display:inline-block;animation:btnspin 1s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* ---------- 11. mobile polish ---------- */
@media(max-width:575px){
  body{font-size:13.5px}
  .form-control,.custom-select,select.form-control{font-size:16px!important;min-height:44px} /* stop iOS zoom */
  .container{padding:0 10px}
  .card-header{padding:.6rem .9rem}
  .modal-dialog{max-width:calc(100% - 1rem);margin:.6rem auto}
  .navbar-brand{font-size:1rem}
  .navbar-brand img{width:34px;height:34px}
}

/* ---------- 12. phones & small tablets: no visible scrollbars ----------
   Tables keep their natural layout (no forced wrap/shrink). When a table is
   wider than the screen it scrolls sideways by swipe/wheel with an invisible
   scrollbar. DataTables controls stack & center. Applies to all modules.    */
@media(max-width:991px){
  .table-responsive{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;-ms-overflow-style:none!important;
  }
  .table-responsive::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .table-responsive>.table,table.table,table.dataTable{width:100%!important;max-width:none!important}
  table.dataTable>thead>tr>th:not(.sorting_disabled),table.dataTable>thead>tr>td:not(.sorting_disabled){padding-right:20px!important}
  div.dataTables_wrapper div.dataTables_filter{float:none!important;text-align:center!important}
  div.dataTables_wrapper div.dataTables_filter label{display:block!important;text-align:center!important;white-space:normal!important;margin-bottom:.3rem!important}
  div.dataTables_wrapper div.dataTables_filter input{display:block!important;width:100%!important;max-width:320px!important;margin:.3rem auto 0!important}
  div.dataTables_wrapper div.dataTables_length{float:none!important;text-align:center!important;margin-bottom:.3rem!important}
  div.dataTables_wrapper div.dataTables_length label{margin-bottom:0!important}
  div.dataTables_wrapper div.dataTables_info{text-align:center!important;padding-top:.6em!important;font-size:.85rem!important}
  div.dataTables_wrapper div.dataTables_paginate{float:none!important;text-align:center!important;white-space:normal!important;margin:.4rem 0!important}
  div.dataTables_wrapper div.dataTables_paginate ul.pagination{justify-content:center!important;flex-wrap:wrap!important}
  .dataTables_wrapper .row{margin:0!important}
  .pagination{flex-wrap:wrap!important;justify-content:center!important}
}
/* ---------- 14. home dashboard grid (mobile-first tiles) ---------- */
.dash-banner{margin:8px 0 14px}
.dash-banner .btn{
  width:100%;min-height:52px;border-radius:13px;font-size:1.04rem;
  display:flex;box-shadow:0 3px 10px rgba(30,60,100,.14);
}
.dash-banner .bi-ic{font-size:1.45rem}
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 6px}
@media(min-width:576px){.dash-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:992px){.dash-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mtile{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:114px;padding:.7rem .45rem;border-radius:17px;
  font-size:.97rem;line-height:1.65;text-align:center;color:#fff!important;
  box-shadow:0 4px 14px rgba(30,60,100,.13);border:0!important;
  transition:transform .12s ease,box-shadow .15s ease,filter .15s ease;
}
.mtile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(30,60,100,.22);color:#fff!important}
.mtile:active{transform:translateY(0) scale(.97)}
.mtile .bi-ic{font-size:2.1rem;line-height:1;display:block;text-shadow:0 2px 4px rgba(0,0,0,.15)}
.mtile .bi-tx{display:block;font-weight:800}
.mtile .bi-cnt{display:block;font-size:.8rem;line-height:1;min-height:1.2em;color:rgba(255,255,255,.95)}
.mtile .bi-cnt .blink_me{color:#ffe066}
.mtile.btn-primary{background:linear-gradient(160deg,#2b86ef,#0a63c6)}
.mtile.btn-success{background:linear-gradient(160deg,#2cb565,#12803f)}
.mtile.btn-danger{background:linear-gradient(160deg,#ef5a6b,#c93245)}
.mtile.btn-warning{background:linear-gradient(160deg,#ffc046,#ec9405);color:#3d2b00!important}
.mtile.btn-warning .bi-ic{text-shadow:0 2px 3px rgba(0,0,0,.12)}
.mtile.btn-info{background:linear-gradient(160deg,#22b5d8,#0a7895)}
.dash-hr{grid-column:1/-1;width:100%;border:0;border-top:1px solid var(--line);margin:.5rem 0}
@media(max-width:575px){
  .mtile{min-height:96px;font-size:.9rem;border-radius:14px;gap:3px}
  .mtile .bi-ic{font-size:1.7rem}
  .dash-grid{gap:9px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}