/* Suqya Hail V10.1 — responsive & cross-browser layer
   Targets current Chrome/Edge/Firefox/Safari + iOS/Android browsers.
   Keeps the approved visual identity and only changes layout behavior. */

:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --tap:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{min-width:0;max-width:100vw;overflow-x:hidden;padding-left:var(--safe-left);padding-right:var(--safe-right)}
img,svg,video,canvas{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
button,.btn,.icon-btn,.menu-toggle,.select,input,.input{min-height:var(--tap)}
button,.btn,.icon-btn,.menu-toggle{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{font-size:16px}
canvas{display:block;width:100%!important}
.table-wrap,.donations-scroll,.compact-summary-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.table{width:100%;min-width:max-content}
.modal{padding:max(14px,var(--safe-top)) max(14px,var(--safe-right)) max(14px,var(--safe-bottom)) max(14px,var(--safe-left))}
.modal-box{max-height:calc(100dvh - 28px);overflow:auto;-webkit-overflow-scrolling:touch}
.top-dropdown-menu{max-height:min(70dvh,620px);overflow:auto;-webkit-overflow-scrolling:touch}

/* Browser fallbacks when color-mix is unavailable. */
@supports not (color:color-mix(in srgb,#000,#fff)){
  .card,.procurement-kpi,.report-launch-grid a{background:var(--surface,#fff)}
  .status,.badge{background:#e9f7ff}
  .progress-track,.purchase-bar i{background:#e6eef5!important}
  :root[data-theme='dark'] .card,:root[data-theme='dark'] .procurement-kpi{background:#102942}
}

/* Large desktops */
@media (min-width:1600px){
  .content,.dashboard-content-final,.reference-admin-content{width:min(1560px,calc(100% - 48px))!important}
  .dashboard-hero-image{height:190px}
  .reference-kpi-grid-final{gap:16px!important}
  .card{padding:20px}
}

/* Laptop / small desktop */
@media (max-width:1366px){
  .content,.dashboard-content-final,.reference-admin-content{width:min(100% - 28px,1460px)!important}
  .dashboard-hero-image{height:150px}
  .dashboard-toolbar-shell{width:min(100% - 28px,1460px)!important}
  .reference-filter-row,.toolbar-filter-row{gap:8px!important;flex-wrap:wrap!important}
  .reference-filter-row .select,.toolbar-filter-row .select{min-width:150px;flex:1 1 160px}
  .reference-period-tabs{flex:0 1 auto}
  .reference-kpi-grid-final{gap:12px!important}
  .reference-kpi-card-final{min-width:0!important}
  .ref-kpi-value{font-size:clamp(24px,2.3vw,34px)!important}
  .purchase-analysis-grid{grid-template-columns:1fr 1fr!important}
}

/* Tablets landscape / compact laptops */
@media (max-width:1100px){
  .dashboard-hero-image{height:130px}
  .dashboard-toolbar-shell,.content,.dashboard-content-final,.reference-admin-content{width:calc(100% - 22px)!important}
  .toolbar-strip{align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important}
  .reference-filter-row,.toolbar-filter-row{order:2;width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dashboard-toolbar-actions{order:1;margin-inline-start:auto!important}
  .reference-date-box{grid-column:span 2}
  .reference-period-tabs{grid-column:1/-1;justify-self:stretch;display:grid!important;grid-template-columns:repeat(4,1fr)!important}
  .reference-period-tabs button{min-width:0!important}
  .reference-kpi-grid-final{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .procurement-kpis,.purchase-kpis,.finance-kpis,.ops-kpis,.report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .reference-dashboard-grid-final,.reference-bottom-grid-final{grid-template-columns:1fr!important}
  .purchase-analysis-grid,.finance-grid,.ops-grid,.donation-flow{grid-template-columns:1fr!important}
  .advanced-analytics-grid.analytics-reflow-v72{grid-template-columns:1fr 1fr!important}
  .region-intelligence-grid{grid-template-columns:1fr!important}
  .admin-tabs.reference-admin-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .report-filters,.purchase-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-feature-head{align-items:flex-start!important;flex-wrap:wrap}
  .page-feature-head>.btn{width:auto}
  .product-admin-row{grid-template-columns:90px 1.5fr 1fr .8fr auto!important;overflow:auto}
  .product-admin-row>*{min-width:0}
  .smart-report-grid{grid-template-columns:1fr!important}
  .sq-map-canvas{height:420px!important}
}

/* Tablets portrait */
@media (max-width:900px){
  .global-header{padding-top:var(--safe-top)}
  .dashboard-hero-image{height:115px;border-radius:0 0 18px 18px}
  .reference-filter-row,.toolbar-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .reference-date-box{grid-column:1/-1}
  .reference-kpi-grid-final{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .advanced-analytics-grid.analytics-reflow-v72{grid-template-columns:1fr!important;grid-template-areas:"forecast" "alerts"!important}
  .advanced-analytics-grid.analytics-reflow-v72>.forecast-card,.advanced-analytics-grid.analytics-reflow-v72>.alerts-card{height:auto!important}
  .page-dashboard .alerts-card .smart-alerts{display:flex!important;max-height:360px!important;overflow-y:auto!important}
  .forecast-card .mini-forecast-chart,.procurement-chart-wrap{min-height:260px}
  .admin-tabs.reference-admin-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .goal-settings-grid,.form-grid,.donor-info-grid{grid-template-columns:1fr 1fr!important}
  .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .smart-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .top-dropdown-menu{left:12px!important;right:12px!important;width:auto!important;top:auto!important;transform:none!important}
  .top-dropdown-menu .top-menu-link{min-height:48px}
  .sq-map-canvas{height:380px!important}
}

/* Phones landscape / large phones */
@media (max-width:700px){
  :root{--tap:46px}
  body{padding-bottom:var(--safe-bottom)}
  .dashboard-toolbar-shell,.content,.dashboard-content-final,.reference-admin-content{width:calc(100% - 16px)!important}
  .dashboard-hero-image{height:96px}
  .toolbar-strip{padding:8px!important}
  .dashboard-toolbar-actions{width:100%;justify-content:flex-end!important}
  .reference-filter-row,.toolbar-filter-row{grid-template-columns:1fr!important}
  .reference-date-box,.reference-period-tabs{grid-column:auto}
  .reference-period-tabs{grid-template-columns:repeat(4,1fr)!important;overflow:auto}
  .reference-kpi-grid-final,.procurement-kpis,.purchase-kpis,.finance-kpis,.ops-kpis,.report-kpis{grid-template-columns:1fr!important}
  .reference-kpi-card-final{min-height:138px!important}
  .ref-kpi-art{max-width:34%!important}
  .procurement-kpi{min-height:105px!important}
  .section-title,.ref-title-row{gap:8px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .section-title h3,.ref-title-row h3{font-size:19px!important;line-height:1.35}
  .card{border-radius:17px!important;padding:14px!important}
  .curve-legend,.procurement-legend{gap:7px!important}
  .curve-legend span,.procurement-legend span{font-size:11px!important}
  .forecast-card .mini-forecast-chart,.procurement-chart-wrap,.ref-chart-wrap{height:250px!important;min-height:250px!important}
  .forecast-insights{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-dashboard .alerts-card .smart-alerts{max-height:330px!important}
  .smart-alert{padding:10px!important}
  .smart-alert span{min-width:0}
  .smart-alert span b,.smart-alert span small{overflow-wrap:anywhere}
  .purchase-analysis-grid,.report-filters,.purchase-filters,.goal-settings-grid,.form-grid,.donor-info-grid,.payment-grid,.smart-summary-grid{grid-template-columns:1fr!important}
  .admin-tabs.reference-admin-tabs{grid-template-columns:1fr!important}
  .admin-tabs.reference-admin-tabs .btn{justify-content:flex-start!important;text-align:right!important}
  .page-feature-head{display:grid!important;grid-template-columns:1fr!important}
  .page-feature-head>.btn{width:100%}
  .product-admin-row{grid-template-columns:1fr!important;gap:8px!important;padding:14px!important;border:1px solid var(--line)!important;border-radius:14px!important;margin-bottom:10px}
  .product-admin-row .product-thumb-cell{justify-self:center}
  .modal{align-items:flex-end!important;padding:0!important}
  .modal-box{width:100%!important;max-width:none!important;max-height:min(92dvh,760px)!important;border-radius:22px 22px 0 0!important;padding:18px max(16px,var(--safe-right)) max(18px,var(--safe-bottom)) max(16px,var(--safe-left))!important}
  .modal-head{position:sticky;top:-18px;z-index:3;background:var(--surface);padding:10px 0 8px}
  .donation-flow{gap:10px!important}
  .hero-copy{min-height:145px!important;padding:16px!important}
  .hero-copy h1{font-size:24px!important}
  .hero-copy p{padding-left:0!important;max-width:100%!important}
  .hero-3d-visual{opacity:.25;pointer-events:none}
  .qty-stepper{grid-template-columns:56px 1fr!important}
  .summary-total-box{gap:12px;flex-wrap:wrap}
  .summary-total-box .total{font-size:25px!important}
  .payment{min-height:56px}
  .sq-map-canvas{height:330px!important}
  .hailmap-toolbar{flex-wrap:wrap!important}
  .hailmap-toolbar-group{flex-wrap:wrap!important}
  .print-kpis{grid-template-columns:1fr 1fr!important}
}

/* Small phones */
@media (max-width:430px){
  .dashboard-hero-image{height:82px}
  .dashboard-toolbar-shell,.content,.dashboard-content-final,.reference-admin-content{width:calc(100% - 12px)!important}
  .menu-toggle span:last-child{display:none}
  .menu-toggle,.icon-btn{min-width:46px;padding-inline:11px!important}
  .reference-period-tabs button{font-size:11px;padding-inline:4px!important}
  .reference-kpi-card-final{min-height:126px!important;padding:13px!important}
  .ref-kpi-title{font-size:13px!important}
  .ref-kpi-value{font-size:27px!important}
  .ref-kpi-caption,.trend-pill{font-size:9px!important}
  .procurement-kpi b,.purchase-kpi b,.finance-kpi b,.ops-kpi b,.report-kpi b{font-size:22px!important}
  .forecast-card .mini-forecast-chart,.procurement-chart-wrap,.ref-chart-wrap{height:220px!important;min-height:220px!important}
  .forecast-insights{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .forecast-insight{padding:9px!important}
  .forecast-insight b{font-size:13px!important}
  .smart-alert{font-size:11px!important}
  .table th,.table td{padding:9px 8px!important;font-size:12px!important}
  .btn{width:100%}
  .smart-report-actions{width:100%;display:grid!important;grid-template-columns:1fr!important}
  .print-kpis{grid-template-columns:1fr!important}
  .sq-map-canvas{height:300px!important}
}

/* Very narrow devices */
@media (max-width:360px){
  .reference-period-tabs{grid-template-columns:repeat(2,1fr)!important}
  .forecast-insights{grid-template-columns:1fr!important}
  .payment-grid{grid-template-columns:1fr!important}
  .ref-kpi-art{display:none!important}
  .ref-kpi-copy{max-width:100%!important;width:100%!important}
  .reference-kpi-card-final{min-height:112px!important}
}

/* Touch devices: remove hover-only dependencies. */
@media (hover:none),(pointer:coarse){
  .card:hover,.procurement-kpi:hover,.report-launch-grid a:hover,.smart-alert:hover{transform:none!important}
  .btn,.menu-toggle,.icon-btn,.payment,.smart-alert,.reference-period-tabs button{cursor:pointer}
  .table tbody tr:hover{background:inherit}
}

/* Landscape mobile height constraints. */
@media (max-height:520px) and (orientation:landscape){
  .dashboard-hero-image{height:66px!important}
  .top-dropdown-menu{max-height:65dvh}
  .modal-box{max-height:94dvh!important}
  .sq-map-canvas{height:250px!important}
}

/* Printing remains clean. */
@media print{
  body{overflow:visible!important;padding:0!important}
  .table-wrap{overflow:visible!important}
  .table{min-width:0!important}
}

/* ===== V10.1.1 — شريط الفلاتر: «السنة» مقصوصة وزر ↻ فوق زر الوضع =====
   الصف الواحد يحتاج ~1200px للفلاتر وحدها؛ أقل من 1500px يفيض على أزرار القائمة/الوضع.
   هنا: صفّان تحت 1500px، وتبويبات الفترة بعرض كامل على الجوال. */
.page-dashboard .toolbar-filter-row .reference-period-tabs{min-width:0!important;overflow:hidden;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.page-dashboard .toolbar-filter-row.reference-filter-row{grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr) minmax(0,.85fr) minmax(0,.82fr) minmax(0,.9fr) minmax(0,.82fr) minmax(0,1.5fr) 50px!important}
.page-dashboard .toolbar-filter-row .reference-period-tabs button{min-width:0!important;padding-inline:6px!important}
@media (max-width:1499px){
  .page-dashboard .integrated-toolbar-shell{height:auto!important}
  .page-dashboard .toolbar-filter-row.reference-filter-row{grid-template-columns:repeat(4,minmax(0,1fr)) 48px!important;grid-auto-flow:row!important;gap:8px!important}
  .page-dashboard .toolbar-filter-row .reference-date-box{grid-column:1 / span 2!important;grid-row:1!important}
  .page-dashboard .toolbar-filter-row #donationTypeFilter{grid-column:3!important;grid-row:1!important}
  .page-dashboard .toolbar-filter-row #campaignFilter{grid-column:4!important;grid-row:1!important}
  .page-dashboard .toolbar-filter-row .reference-reset{grid-column:5!important;grid-row:1!important;width:48px!important}
  .page-dashboard .toolbar-filter-row #paymentFilter{grid-column:1!important;grid-row:2!important}
  .page-dashboard .toolbar-filter-row #pointTypeFilter{grid-column:2!important;grid-row:2!important}
  .page-dashboard .toolbar-filter-row #districtFilter{grid-column:3!important;grid-row:2!important}
  .page-dashboard .toolbar-filter-row .reference-period-tabs{grid-column:4 / span 2!important;grid-row:2!important}
}
@media (max-width:1100px){
  .page-dashboard .toolbar-filter-row.reference-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-dashboard .toolbar-filter-row.reference-filter-row > *,
  .page-dashboard .toolbar-filter-row #donationTypeFilter,.page-dashboard .toolbar-filter-row #campaignFilter,
  .page-dashboard .toolbar-filter-row #paymentFilter,.page-dashboard .toolbar-filter-row #pointTypeFilter,
  .page-dashboard .toolbar-filter-row #districtFilter{grid-column:auto!important;grid-row:auto!important}
  .page-dashboard .toolbar-filter-row .reference-date-box,
  .page-dashboard .toolbar-filter-row .reference-period-tabs{grid-column:1 / -1!important}
  .page-dashboard .toolbar-filter-row .reference-reset{grid-column:1 / -1!important;width:100%!important}
}
@media (max-width:520px){
  .page-dashboard .toolbar-filter-row.reference-filter-row{grid-template-columns:1fr!important}
}