@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
body[data-role=admin] {
  --bi-sidebar: 208px;
  --bi-blue: #0878e8;
  --bi-navy: #0b1930;
  --bi-border: #dce6f1;
  --bi-shadow: 0 3px 12px #10233f0a;
  background: #f1f5fb;
  color: #10233f;
  font-family: Tajawal, Arial, sans-serif;
}
body[data-role=admin] .site-header,
body[data-role=admin] .intro { display: none; }
body[data-role=admin] #work-main { width: auto; margin: 0; padding: 0 14px; }
body[data-role=admin] #workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
body[data-role=admin] #workspace > :is(#work-orders,#work-controls,#admin-overview,#admin-customers,#admin-performance) {
  grid-column: 1;
  grid-row: auto;
  min-width: 0;
}
body[data-role=admin] #workspace > .toolbar {
  display: flex;
  grid-column: 1;
  margin: 0 -14px;
  padding: 10px 14px;
  min-height: 66px;
  gap: 8px;
  background: #f8fbfe;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--bi-border);
}
body[data-role=admin] .toolbar button { margin-inline-start: 0; min-height: 36px; padding: 5px 9px; }
body[data-role=admin] .toolbar #mode { display: none; }
#bi-page-title { margin-inline-end: auto; line-height: 1.2; }
#bi-page-title strong { display: block; font-size: 22px; }
#bi-page-title small { display: block; color: #526780; font-size: 12px; margin-top: 3px; }
#bi-search { flex: 1 1 235px; max-width: 415px; flex-wrap: nowrap; align-items: center; gap: 5px; }
#bi-search input { min-height: 36px; border-color: var(--bi-border); }
#bi-search label { flex-basis: auto; }
.bi-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-role=admin] #admin-navigation {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 5;
  width: var(--bi-sidebar);
  max-width: 85vw;
  height: 100dvh;
  align-self: stretch;
  padding: 12px;
  background: linear-gradient(155deg,#162d49,#0b1930 45%);
  color: white;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
body[data-role=admin] #admin-navigation button {
  flex: 0 0 auto;
  width: 100%;
  color: #f1f5fb;
  min-height: 36px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  justify-content: flex-start;
}
body[data-role=admin] #admin-navigation button[aria-selected=true] { background: #0878e8; color: #fff; }
body[data-role=admin] #admin-navigation button:not([aria-selected=true]):hover { background: #ffffff1a; color: #fff; }
body[data-role=admin] #admin-navigation .admin-count { color: #10233f; }
.bi-logo { display: grid; place-items: center; margin: 0 auto 10px; width: min(100%,160px); min-height: 50px; border-radius: 8px; background: #f4f8fe; }
.bi-logo img { width: 137px; max-width: 100%; max-height: 44px; object-fit: contain; }
#bi-nav-sections { display: grid; gap: 3px; }
.bi-reports-nav { background: #ffffff0b; border-radius: 8px; padding: 3px 0; }
.bi-reports-nav summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; padding: 7px 9px; }
.bi-reports-nav summary::-webkit-details-marker { display: none; }
body[data-role=admin] #admin-navigation button.bi-subnav { padding-inline-start: 17px; min-height: 30px; font-size: 13px; font-weight: 400; }
body[data-role=admin] #admin-navigation #bi-new-order { margin-top: auto; padding: 8px 10px; justify-content: center; background: #0878e8; min-height: 42px; }
body[data-role=admin] #admin-overview { display: block; padding: 0; }
.bi-filters { align-items: end; gap: 7px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bi-border); }
.bi-filters label { flex: 0 1 146px; gap: 3px; font-size: 13px; }
.bi-filters select,.bi-filters input { min-height: 33px; border-color: var(--bi-border); padding: 4px 8px; }
.bi-filters button { min-height: 33px; padding: 3px 10px; }
#bi-dimensions { display: grid; width: 100%; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
#bi-status { margin: 6px 1px; }
.bi-grid { display: grid; gap: 10px; margin-bottom: 10px; min-width: 0; }
.bi-kpis { grid-template-columns: repeat(6,minmax(0,1fr)); }
.bi-charts { grid-template-columns: minmax(165px,.9fr) minmax(280px,2fr) minmax(160px,.9fr); }
.bi-ranks { grid-template-columns: repeat(4,minmax(0,1fr)); }
.bi-bottom { grid-template-columns: minmax(0,2.15fr) minmax(0,1fr); }
.bi-panel,.bi-kpi { border: 1px solid var(--bi-border); border-radius: 12px; padding: 11px; min-width: 0; box-shadow: var(--bi-shadow); }
.bi-panel { background: #fff; }
.bi-panel-head,.bi-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bi-panel-head { margin-bottom: 8px; }
.bi-panel-head h2 { margin: 0; font-size: 17px; }
.bi-panel-head svg,.bi-kpi svg { width: 19px; height: 19px; flex: none; }
.bi-panel-head svg { color: #0878e8; }
body[data-role=admin] button.bi-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  text-align: start;
  min-height: 124px;
  color: #10233f;
  background: linear-gradient(140deg,var(--tint),#fff);
}
body[data-role=admin] button.bi-kpi:hover { border-color: var(--bi-blue); }
.bi-kpi-head { font-size: 14px; width: 100%; justify-content: flex-start; }
.bi-kpi strong { font-size: clamp(18px,1.8vw,27px); line-height: 1.1; }
.bi-kpi small { color: #526780; font-weight: 400; line-height: 1.2; }
.bi-kpi .bi-compare { margin-top: auto; color: #23664c; }
.bi-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--tint); color: var(--accent); flex: none; }
.bi-violet { --tint:#f1eaf9;--accent:#713ac1; }
.bi-blue { --tint:#e4f0ff;--accent:#0969cb; }
.bi-amber { --tint:#fff1dc;--accent:#a34e12; }
.bi-green { --tint:#e6f7ee;--accent:#147646; }
.bi-empty,.bi-chart-empty { color: #526780; font-size: 13px; }
.bi-chart-empty { min-height: 160px; display: grid; place-items: center; padding: 14px; background: #f6f9fd; border-radius: 8px; }
.bi-chart-controls { display: flex; flex-wrap: wrap; gap: 3px; }
.bi-chart-controls button,.bi-panel .bi-link { min-height: 29px; padding: 3px 7px; font-size: 12px; }
.bi-chart-controls button[aria-pressed=true] { background: #0878e8; color: white; }
.bi-line-chart { width: 100%; min-height: 160px; }
.bi-chart-labels { direction: ltr; display: flex; justify-content: space-between; color: #526780; font-size: 12px; }
.bi-chart-legend,.bi-detail-meta { font-size: 13px; color: #385775; margin: 5px 0; }
.bi-status-chart { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 145px; }
.bi-status-chart svg { width: 105px; height: 105px; margin-inline: auto; }
.bi-status-list,.bi-ranking { list-style: none; margin: 0; padding: 0; }
.bi-status-list { flex: 1; min-width: 90px; }
.bi-status-list li,.bi-ranking li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-block: 5px; border-bottom: 1px solid #edf2f7; font-size: 13px; }
.bi-ranking progress { width: min(38%,85px); height: 8px; accent-color: #0878e8; margin-inline-start: auto; }
.bi-panel > .bi-link { margin-top: 8px; }
.bi-table th,.bi-table td { padding: 6px; }
.bi-table .bi-empty { text-align: center; padding: 13px; }
.bi-notice-list { display: grid; gap: 7px; clear: both; }
.bi-notice-list .bi-notice-item{display:grid;gap:.45rem;text-align:start;padding:.85rem}
.bi-notice-list .bi-notice-item{background:#fff;color:#173b62;border:1px solid #d4e2f0;white-space:normal;overflow-wrap:anywhere}
.bi-notice-list .bi-notice-item:hover{background:#e7f3ff;color:#10233f}
.bi-notice-item time{font-size:.8rem;color:#425d78}
.bi-notice-list .bi-notice-unread{background:#f1f8ff;border-inline-start:4px solid #1673c4}
.bi-notice-details{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.83rem;line-height:1.7}
.bi-notice-toast{position:fixed;z-index:100;inset-inline-end:1rem;inset-block-end:1rem;display:grid;gap:.5rem;padding:1rem;background:#fff;color:#173b62;border:1px solid #c7dbea;border-radius:.7rem;box-shadow:0 4px 18px #203c5c33;max-width:min(24rem,calc(100vw - 2rem))}
.bi-dialog-form > p { flex-basis: 100%; }
.bi-form-error { color: #b42318; }
@media(min-width: 900px) {
  body[data-role=admin] #work-main { padding-inline-start: calc(var(--bi-sidebar) + 14px); }
  body[data-role=admin] #admin-menu { display: none; }
}
@media(max-width: 1250px) {
  .bi-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bi-charts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bi-charts > :nth-child(2) { grid-row: 1; grid-column: 1 / -1; }
}
@media(max-width: 899px) {
  body[data-role=admin] #admin-navigation { transform: translateX(105%); transition: transform .2s; }
  body[data-role=admin] #admin-navigation.bi-open { transform: translateX(0); box-shadow: 0 0 0 100vmax #0b193073; }
  #bi-search { order: 6; max-width: none; flex-basis: 100%; }
  .bi-ranks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #bi-dimensions { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width: 580px) {
  #bi-page-title strong { font-size: 17px; }
  #bi-page-title small { display: none; }
  body[data-role=admin] .toolbar #bi-fullscreen { display: none; }
  body[data-role=admin] .toolbar #role { font-size: 13px; }
  .bi-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bi-charts,.bi-bottom { grid-template-columns: minmax(0,1fr); }
  .bi-panel { padding: 9px; }
  .bi-panel-head h2 { font-size: 15px; }
  .bi-filters button,#bi-search button { width: auto; }
  .bi-kpi-head { font-size: 13px; }
  #bi-dimensions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}