.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:900;border:1px solid transparent;white-space:nowrap}.badge.ok,.badge .ok{background:#EAF7F0;color:#176A45;border-color:#C8E8D8}.badge.warn,.badge .warn{background:#FFF6DF;color:#8A5A00;border-color:#F2D99A}.badge.bad,.badge .bad{background:#FFF0F0;color:#9E3333;border-color:#F0C9C9}.badge.neutral,.badge .neutral{background:#F0F4F5;color:#5F7478;border-color:#DCE5E7}.attachment-table-btn{font:inherit}.attachment-action{font:inherit!important}.private-attachments h3{color:#15646B!important}.private-attachments .privacy-note{color:#60777C!important}.offer-details-drawer{display:none!important}.sidebar-logo-bottom{display:none!important}
.nav-mobile-label{display:none}

/* Mobile-first polish layered over V6 without touching business logic */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden;background:#F4F8F9}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .app,.app.sidebar-collapsed{display:block!important;min-height:100vh}
  /* Never reveal app content below login: this overrides mobile display:block!important. */
  #appView.hidden, .app.hidden, .app.sidebar-collapsed.hidden{display:none!important}
  main{width:100%;min-width:0;padding:12px 12px calc(76px + env(safe-area-inset-bottom))!important;overflow:hidden}

  /* Bottom navigation: app-like and thumb friendly */
  .app aside,.app.sidebar-collapsed aside{position:fixed!important;inset:auto 0 0 0!important;height:auto!important;min-height:62px;background:rgba(19,92,99,.97)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:minmax(0,1fr) 42px;gap:4px;align-items:center;z-index:1000!important;border-top:1px solid rgba(255,255,255,.16);box-shadow:0 -10px 30px rgba(20,71,77,.18);overflow:visible!important}
  .sidebar-head,.sidebar-logo-card,.userbox{display:none!important}
  .nav{display:flex!important;flex-wrap:nowrap!important;gap:2px!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .nav::-webkit-scrollbar{display:none}
  .app aside .nav>.saken-nav-group{display:contents!important}
  .app aside .nav .saken-nav-group-label{display:none!important}
  .nav button,.app.sidebar-collapsed .nav button{width:62px!important;min-width:62px!important;min-height:48px!important;padding:3px 1px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;text-align:center!important;border-radius:9px!important;font-size:10px!important;line-height:1.1!important;color:#EAF7F6!important;white-space:nowrap!important;scroll-snap-align:start}
  .nav button.active{background:#42C0C4!important;color:#073C42!important;box-shadow:none!important}
  .nav-icon{min-width:0!important;font-size:18px!important;line-height:1!important}
  .nav .nav-label,.app.sidebar-collapsed .nav .nav-label{display:block!important;white-space:nowrap!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav .nav-has-short-label .nav-label,.app.sidebar-collapsed .nav .nav-has-short-label .nav-label{display:none!important}
  .nav .nav-mobile-label,.app.sidebar-collapsed .nav .nav-mobile-label{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .sidebar-logout{display:flex!important;width:42px!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0!important;border-radius:9px!important;background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
  .sidebar-logout .nav-label{display:none!important}
  .sidebar-logout .nav-icon{font-size:20px!important;margin:0!important}

  /* Compact page headers */
  .topbar{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:12px!important}
  .topbar>div{min-width:0;flex:1}
  .topbar h1{font-size:20px!important;line-height:1.25!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sub{display:none!important}
  .topbar>.btn{width:auto!important;min-width:auto!important;min-height:38px!important;padding:8px 10px!important;font-size:11px!important;white-space:nowrap!important;flex:0 0 auto}

  /* Cards / dashboard */
  .panel,.dash-section{border-radius:14px!important;box-shadow:0 4px 14px rgba(21,100,107,.05)!important}
  .panel{padding:10px!important;margin-bottom:10px!important}
  .dash-section{padding:11px!important;margin-bottom:10px!important}
  .dash-title{font-size:14px!important;margin-bottom:8px!important}
  .dashboard-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:10px!important}
  .summary-chip{padding:10px 11px!important;border-radius:12px!important}
  .summary-chip .k{font-size:10px!important}
  .summary-chip .v{font-size:20px!important}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .metric-card{padding:10px!important;min-height:78px;border-radius:11px!important}
  .metric-card .label{font-size:10.5px!important;line-height:1.35!important}
  .metric-card .value{font-size:21px!important;margin-top:3px!important}
  .panel-head{margin-bottom:8px!important}
  .panel-head b{font-size:14px!important}
  .recent-table{overflow:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:10px!important}
  .recent-table table{min-width:650px!important}

  /* Filters: search full width, filters compact 2x2 */
  .filter-panel{padding:10px!important}
  .filters-v2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .filters-v2 #search{grid-column:1/-1!important}
  .filters-v2 .btn{grid-column:1/-1!important;width:100%!important}
  input,select,textarea{font-size:16px!important;min-height:44px!important} /* prevents iOS zoom */
  .active-filters{margin-top:7px!important;gap:5px!important}
  .filter-pill{font-size:10px!important;padding:4px 7px!important}

  /* Quick filters: one horizontal swipe row instead of wrapping */
  .quick-filters-bar{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:7px!important;padding:8px 9px!important;margin-bottom:10px!important;border-radius:12px!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .quick-filters-bar::-webkit-scrollbar{display:none}
  .quick-title{display:none!important}
  .quick-filter{flex:0 0 auto!important;min-height:38px!important;padding:7px 9px!important;font-size:10.5px!important;scroll-snap-align:start}
  .quick-filter .count{min-width:20px!important;height:20px!important;font-size:9px!important}
  .quick-clear{flex:0 0 auto!important;margin-inline-start:0!important}

  /* Offers become readable cards, no horizontal table */
  .offers-table-panel{padding:8px!important;background:transparent!important;border:0!important;box-shadow:none!important}
  .offers-table-panel>.panel-head{padding:0 2px 2px!important}
  .table-help{display:none!important}
  #offersView .table-wrap{border:0!important;background:transparent!important;max-height:none!important;overflow:visible!important}
  #offersTable{display:block!important;min-width:0!important;width:100%!important}
  #offersTable thead{display:none!important}
  #offersTable tbody{display:grid!important;gap:10px!important;padding:0!important}
  #offersTable tr{display:grid!important;grid-template-columns:1fr 1fr!important;background:#fff!important;border:1px solid #DDE9EA!important;border-radius:14px!important;overflow:hidden!important;box-shadow:0 4px 13px rgba(21,100,107,.055)!important;scroll-margin-bottom:92px}
  #offersTable tr.offer-row-attention{border-inline-start:4px solid #E0A13B!important}
  #offersTable tr.offer-row-complete{border-inline-start:4px solid #38A875!important}
  #offersTable tr.offer-row-selected{border-color:#44B8AF!important;box-shadow:0 0 0 2px rgba(68,184,175,.14),0 6px 16px rgba(21,100,107,.08)!important}
  #offersTable td{display:block!important;position:static!important;width:auto!important;min-width:0!important;max-width:none!important;white-space:normal!important;border:0!important;border-bottom:1px solid #EEF3F4!important;padding:8px 10px!important;background:#fff!important;box-shadow:none!important;font-size:12px!important;overflow-wrap:anywhere}
  #offersTable td:before{content:attr(data-label);display:block;font-size:9.5px;color:#83969A;font-weight:800;margin-bottom:2px}
  #offersTable td[data-label="اسم المالك"]{grid-column:1/-1!important;background:#F8FCFC!important;padding-top:10px!important;padding-bottom:10px!important}
  #offersTable td[data-label="الموقع"]{grid-column:1/-1!important}
  #offersTable td[data-label="إجراءات"]{grid-column:1/-1!important;background:#F8FBFB!important;border-bottom:0!important;padding:8px!important}
  #offersTable td[data-label="رقم العقد"]{font-weight:900;color:#164F55}
  #offersTable td[data-label="السعر"]{font-weight:900;color:#15646B}
  .offer-owner-main{font-size:13px!important}
  .offer-attention-chip{font-size:9px!important;padding:2px 6px!important}
  .row-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;justify-content:stretch!important}
  .row-actions .icon-btn{min-height:38px!important;width:100%!important;font-size:11px!important}
  .empty-state{grid-column:1/-1!important;background:#fff!important;border-radius:12px!important}

  /* Details panel behaves like a focused sheet under the selected card */
  .offer-details-panel{border-radius:14px!important;margin-top:10px!important;box-shadow:0 8px 24px rgba(21,100,107,.09)!important;scroll-margin-bottom:92px}
  .details-head{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;padding:11px!important}
  .details-title strong{font-size:14px!important}
  .details-title small{font-size:10.5px!important;max-width:none!important;line-height:1.55!important}
  .details-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;width:100%!important}
  .details-actions .btn{width:100%!important;min-height:38px!important}
  .details-tabs{display:flex!important;overflow-x:auto!important;gap:5px!important;padding:8px 8px 0!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .details-tabs::-webkit-scrollbar{display:none}
  .details-tab{flex:0 0 auto!important;font-size:10.5px!important;padding:7px 9px!important}
  .details-content{padding:10px!important}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .detail-item{padding:8px!important;border-radius:9px!important}
  .detail-item .k{font-size:9.5px!important}
  .detail-item .v{font-size:11px!important}
  .detail-item.wide,.detail-item.full{grid-column:1/-1!important}

  /* Forms: one clear vertical flow */
  .form-panel{padding:10px!important}
  .form-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .form-section-title{grid-column:1/-1!important;font-size:13px!important;margin-top:7px!important;padding-top:10px!important}
  .field.full{grid-column:1/-1!important}
  .field label{font-size:12px!important;margin-bottom:5px!important}
  textarea{min-height:100px!important}
  .form-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;position:sticky;bottom:82px;background:rgba(255,255,255,.96);padding:9px;margin:12px -2px -2px;border:1px solid #E2ECEE;border-radius:12px;z-index:8;box-shadow:0 -6px 18px rgba(21,100,107,.06)}
  .form-actions .btn{width:100%!important;min-height:44px!important}
  .private-attachments{padding:10px!important}
  .attachment-grid{grid-template-columns:1fr!important;gap:8px!important}

  /* Follow-up cards */
  .follow-grid{grid-template-columns:1fr!important;gap:9px!important}
  .follow-card{padding:12px!important;border-radius:13px!important}

  /* Auth / overlays / notifications */
  .auth-wrap{padding:14px!important}
  .auth-card{padding:20px 16px!important;border-radius:18px!important}
  .auth-logo{width:150px!important;margin-bottom:12px!important}
  .auth-card h1{font-size:21px!important}
  .toast-region{left:10px!important;right:10px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;max-width:none!important}
  .modal-backdrop{padding:14px!important}
  .confirm-dialog{padding:18px!important;border-radius:16px!important}
}

@media(max-width:430px){
  main{padding-inline:9px!important}
  .dashboard-summary,.metric-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .metric-card{min-height:72px!important;padding:9px!important}
  .metric-card .label{font-size:10px!important}
  .metric-card .value{font-size:19px!important}
  .filters-v2{grid-template-columns:1fr!important}
  .filters-v2 #search,.filters-v2 .btn{grid-column:auto!important}
  #offersTable tr{grid-template-columns:1fr 1fr!important}
  .detail-grid{grid-template-columns:1fr!important}
  .detail-item.wide,.detail-item.full{grid-column:auto!important}
  .nav button,.app.sidebar-collapsed .nav button{font-size:9px!important;padding-inline:1px!important}
  .nav-icon{font-size:17px!important}
}

/* Grouped sidebar (2026-10-14): sub-pages of العروض العقارية live in the page tabs on mobile. */
@media(max-width:760px){
  .app aside .nav .saken-nav-sub{display:none!important}
  .app aside .nav .saken-nav-group[hidden]{display:none!important}
}