/* Local UI fixes for national-network/offline mode
   Fonts are expected on host at:
   public_html/ticket/assets/fonts/vazirmatn-fd/
   Because this CSS lives in public_html/ticket/assets/app/, browser URLs use ../fonts/...
*/

@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-Thin.ttf') format('truetype');
  font-weight:100;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-ExtraLight.ttf') format('truetype');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-Light.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-ExtraBold.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn-fd/Vazirmatn-FD-Black.ttf') format('truetype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --local-font-stack:'Vazirmatn FD',Tahoma,'Segoe UI',Arial,sans-serif;
}

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .btn,
html[dir="rtl"] .card,
html[dir="rtl"] .table,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .nav,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .modal,
html[dir="rtl"] .alert,
html[dir="rtl"] .badge,
html[dir="rtl"] .pagination,
html[dir="rtl"] .pwt-datepicker,
html[dir="rtl"] .pwt-datepicker-container,
html[dir="rtl"] .pwt-datepicker-popup,
html[dir="rtl"] .persian-datepicker,
html[dir="rtl"] .persian-datepicker-container,
html[dir="rtl"] .datepicker-plot-area{
  font-family:var(--local-font-stack) !important;
}

.table-responsive{overflow-x:auto}
.modal{direction:rtl}
.dropdown-menu{text-align:right}
.input-group>:not(:first-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>:not(:last-child){border-top-left-radius:0;border-bottom-left-radius:0}
.pwt-datepicker,.pwt-datepicker-container,.pwt-datepicker-popup,.persian-datepicker,.persian-datepicker-container,.datepicker-plot-area{z-index:2050!important}
.local-datepicker-hint{font-size:.75rem;color:#6c757d;margin-top:.25rem}
.bi{min-width:1em;text-align:center}

/* General responsive polish */
img, svg, canvas{max-width:100%}
.card{max-width:100%}
.table-responsive{width:100%; -webkit-overflow-scrolling:touch}
.table{vertical-align:middle}
.table th,.table td{word-break:normal}
.form-control,.form-select,.btn{max-width:100%}

@media (max-width: 991.98px){
  .container,.container-fluid{max-width:100%; padding-left:12px; padding-right:12px}
  .card-header.d-flex,.d-flex.justify-content-between.align-items-center{gap:.5rem; flex-wrap:wrap}
}

@media (max-width: 575.98px){
  .container,.container-fluid{padding-left:8px; padding-right:8px}
  .card{border-radius:12px}
  .card-body{padding:1rem .85rem}
  .card-header{padding:.75rem .85rem}
  .btn{white-space:normal}
  .btn-sm{padding:.35rem .6rem}
  .table-responsive{border-radius:10px}
  .table{font-size:.86rem; min-width:620px}
  .pagination{flex-wrap:wrap; gap:.25rem}
  h1,.h1{font-size:1.55rem} h2,.h2{font-size:1.35rem} h3,.h3{font-size:1.2rem}
}


/* Keep the internal-note checkbox immediately before its Persian label.
   In RTL layout this means the checkbox is on the visual right of the text. */
.internal-note-check{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  flex-direction:row;
  direction:rtl;
  gap:.5rem;
  padding:0 !important;
  margin:0;
  min-height:auto;
}
.internal-note-check .form-check-label{
  margin:0;
  cursor:pointer;
  line-height:1.8;
}
.internal-note-check .form-check-input{
  float:none !important;
  position:static;
  margin:0 !important;
  flex:0 0 auto;
  cursor:pointer;
}
@media (max-width: 575.98px){
  .internal-note-check{
    max-width:100%;
    align-items:flex-start;
  }
  .internal-note-check .form-check-label{
    flex:0 1 auto;
  }
}


/* Ticket list filter layout: stable RTL grid on desktop and mobile */
.ticket-filter-form{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1rem;
  align-items:start;
  direction:rtl;
}
.ticket-filter-field{
  min-width:0;
}
.ticket-filter-form .form-label{
  display:block;
  margin-bottom:.45rem;
  font-weight:600;
  white-space:nowrap;
}
.ticket-filter-form .form-control,
.ticket-filter-form .form-select{
  width:100%;
}
.ticket-filter-form .local-datepicker-hint{
  min-height:2.2em;
  line-height:1.7;
}
.ticket-filter-actions{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:.5rem;
  padding-top:.25rem;
}
@media (max-width: 1399.98px){
  .ticket-filter-form{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 767.98px){
  .ticket-filter-form{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem;}
  .ticket-filter-form .form-label{white-space:normal;}
}
@media (max-width: 575.98px){
  .ticket-filter-form{grid-template-columns:1fr;}
  .ticket-filter-actions .btn{width:100%;}
}

/* Ensure canvas-based chart labels use the local Persian font stack where the browser can inherit it. */
canvas,
.chart-wrap,
.chart-wrap *{
  font-family:var(--local-font-stack) !important;
}