/* CampsApp Responsive UI v5
 * Production compatibility layer for RTL phones, tablets, laptops,
 * desktop/4K screens, browser zoom and short landscape viewports.
 * Loaded after app.css and intentionally overrides legacy fixed sizing.
 */

:root{
  --content-gutter:clamp(10px,2vw,30px);
  --touch-target:44px;
  --page-max:1760px;
  --mobile-sidebar:min(88vw,320px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
  scrollbar-gutter:stable;
}

body{
  min-width:0;
  overflow-x:clip;
}

body.sidebar-open{overscroll-behavior:none}

.app-shell{
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  min-width:0;
}

.sidebar{
  height:100vh;
  height:100dvh;
  max-width:100vw;
}

.content{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:visible;
  padding-inline:var(--content-gutter);
}

.topbar,.page-content,.app-footer{
  width:min(100%,var(--page-max));
  margin-inline:auto;
}

.page-content,.panel,.panel-head,.actions-bar,.form-grid,.filters,.grid-2,.stats-grid,
.stats-4,.phase3-stats,.inline-form,.details-grid,.project-workspace,.selection-list,
.beneficiary-row,.beneficiary-actions,.sidebar-user-card,.topbar,.topbar-start,
.page-title-wrap,.list>div,form,label{min-width:0}

img,video,canvas,svg{max-width:100%}
img,video,canvas{height:auto}
input,select,textarea,button{max-width:100%;min-width:0}
pre,code{max-width:100%;overflow-wrap:anywhere}

/* Long Arabic/English content, UUIDs, filenames and URLs must never expand the page. */
.panel,.stat,td,th,dd,.user-copy,.page-title-wrap,.list>div,.alert,.selection-item,
.block-muted,.muted-text,.hint,.sidebar-user-card{overflow-wrap:anywhere;word-break:normal}

/* Forms and action groups */
.form-grid,.inline-form,.filters,.bulk-options,.mini-edit,.user-edit,.reset-row{
  width:100%;
}
.mini-edit,.user-edit,.reset-row{min-width:0!important;max-width:100%}
.inline-approval{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(150px,1.25fr) auto;
  gap:7px;
  align-items:center;
  min-width:0;
  margin-block:5px;
}
.inline-approval input,.inline-approval select{min-width:0}
.actions-bar>*{max-width:100%}
.form-actions>*{max-width:100%}

/* Standardize a few legacy utility classes still used by older admin views. */
.block{display:block}
.muted{color:var(--muted);font-size:11px}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:var(--radius);padding:19px;margin-bottom:17px;min-width:0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;border-radius:10px;padding:8px 13px;border:1px solid #0b847a;background:linear-gradient(145deg,#0e9b8e,#0a8278);color:#fff;font-weight:800;font-size:12px;cursor:pointer}

/* Tables scroll only inside their own container on medium screens. */
.table-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{min-width:100%;max-width:none}
.table-wrap th,.table-wrap td{max-width:min(42vw,420px)}
.table-wrap td input,.table-wrap td select,.table-wrap td textarea{min-width:0}

/* Large screens: retain readable density instead of stretching forms/cards indefinitely. */
@media (min-width:1761px){
  .stats-grid{grid-template-columns:repeat(5,minmax(180px,1fr))}
  .grid-2{gap:20px}
  .panel{padding:21px}
}

@media (max-width:1440px){
  :root{--sidebar:272px}
  .topbar{gap:16px}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .inline-form{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:1180px){
  .stats-grid,.phase3-stats,.stats-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inline-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topbar h1{font-size:25px}
  .panel,.card{padding:17px}
  .table-wrap th,.table-wrap td{max-width:340px}
}

/* Tablet/small laptop: navigation becomes an off-canvas drawer. */
@media (max-width:1024px){
  :root{--sidebar:var(--mobile-sidebar)}
  body.sidebar-open{overflow:hidden;touch-action:none}
  .app-shell{display:block}
  .sidebar{
    position:fixed;
    inset-block:0;
    inset-inline-start:auto;
    right:0;
    width:var(--sidebar);
    max-width:100%;
    transform:translateX(105%);
    box-shadow:var(--shadow-lg);
    transition:transform .24s ease;
    padding-top:max(14px,env(safe-area-inset-top));
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .sidebar-collapse{display:none!important}
  .sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,10,20,.52);
    backdrop-filter:blur(3px);
    z-index:45;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}
  .mobile-menu{display:grid!important;min-width:var(--touch-target);min-height:var(--touch-target)}
  .content{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .topbar{padding-top:max(14px,env(safe-area-inset-top));align-items:center}
  .grid-2,.project-workspace{grid-template-columns:1fr}
  .form-grid,.details-grid{grid-template-columns:1fr}
  .span-2,.details-grid .wide{grid-column:auto}
  .mini-edit,.user-edit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .permission-box{grid-column:1/-1}
  .bulk-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidebar-collapsed .app-shell{display:block}
  .sidebar-collapsed .sidebar{padding-inline:14px}
  .sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-item span,
  .sidebar-collapsed .user-copy,.sidebar-collapsed .sidebar-user-card form,.sidebar-collapsed .sidebar-user-card>a{display:initial}
  .sidebar-collapsed .brand{display:flex;flex:1}
  .sidebar-collapsed .brand-wrap{justify-content:initial}
  .sidebar-collapsed .nav-item{justify-content:flex-start;padding:9px 11px}
  .sidebar-collapsed .sidebar-user-card{grid-template-columns:40px minmax(0,1fr) 34px 34px;padding:9px}
  .sidebar-collapsed .avatar{margin:0}
  .sidebar-collapsed .nav-item:hover::after{display:none}
}

@media (max-width:820px){
  .topbar{flex-wrap:wrap;align-items:flex-start;gap:10px}
  .topbar-start{width:100%}
  .topbar-actions{margin-inline-start:auto}
  .topbar h1{font-size:23px}
  .topbar p{white-space:normal}
  .stats-grid,.phase3-stats,.stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inline-form,.filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-head,.section-head{align-items:flex-start;flex-wrap:wrap}
  .panel-head>*,.section-head>*{min-width:0}
  .actions-bar{align-items:stretch}
  .search-row,.upload-row{flex-wrap:wrap}
  .search-row input,.upload-row input{flex:1 1 220px}
  .search-row select{flex:1 1 160px;max-width:none}
  .danger-zone{align-items:flex-start;flex-direction:column}
  .beneficiary-row{align-items:stretch;flex-direction:column}
  .beneficiary-actions{padding:8px 12px 12px;flex-wrap:wrap}
  .inline-approval{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inline-approval button{grid-column:1/-1;width:100%}
  .pager{flex-wrap:wrap}
}

/* Phones and small tablets: convert data tables into labeled cards. JS supplies data-label attributes. */
@media (max-width:900px){
  .table-wrap.is-responsive-table{
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .table-wrap.is-responsive-table table,
  .table-wrap.is-responsive-table tbody,
  .table-wrap.is-responsive-table tr,
  .table-wrap.is-responsive-table td{display:block;width:100%;min-width:0;max-width:100%}
  .table-wrap.is-responsive-table table{background:transparent;white-space:normal}
  .table-wrap.is-responsive-table thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  .table-wrap.is-responsive-table tbody{display:grid;gap:11px}
  .table-wrap.is-responsive-table tbody tr{
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  .table-wrap.is-responsive-table tbody tr:hover{background:#fff}
  .table-wrap.is-responsive-table tbody td{
    display:grid;
    grid-template-columns:minmax(92px,36%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    text-align:right;
    padding:10px 12px;
    border-bottom:1px solid #edf1f5;
    white-space:normal;
    min-height:42px;
  }
  .table-wrap.is-responsive-table tbody td:last-child{border-bottom:0}
  .table-wrap.is-responsive-table tbody td::before{
    content:attr(data-label);
    color:#738196;
    font-size:10px;
    font-weight:900;
    line-height:1.6;
  }
  .table-wrap.is-responsive-table tbody td[data-full="1"]{display:block;text-align:center}
  .table-wrap.is-responsive-table tbody td[data-full="1"]::before,
  .table-wrap.is-responsive-table tbody td:not([data-label])::before{display:none}
  .table-wrap.is-responsive-table .row-actions{justify-content:flex-start}
  .table-wrap.is-responsive-table .mini-edit,
  .table-wrap.is-responsive-table .user-edit,
  .table-wrap.is-responsive-table .reset-row,
  .table-wrap.is-responsive-table .inline-approval{grid-column:1/-1;min-width:0;width:100%}
  .table-wrap.is-responsive-table .inline-approval{grid-template-columns:1fr}
  .table-wrap.is-responsive-table .inline-approval button{grid-column:auto}
  .table-wrap.is-responsive-table details{max-width:100%}
  .audit-json{width:100%}
  .audit-json pre{max-width:100%}
}

@media (max-width:620px){
  body{font-size:14px}
  .content{
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  .topbar{position:sticky;padding-bottom:12px;margin-bottom:4px}
  .topbar-start{align-items:flex-start}
  .topbar h1{font-size:21px;line-height:1.35}
  .topbar p{font-size:11px;line-height:1.55}
  .eyebrow{display:none}
  .system-status{min-width:var(--touch-target);min-height:var(--touch-target);padding:9px}
  .system-status span{display:none}
  .panel,.card{padding:13px;border-radius:14px;margin-bottom:12px}
  .panel-head,.section-head{margin-bottom:12px}
  .panel-head h2,.panel h2,.section-head h2{font-size:15px}
  .stat{padding:13px;min-height:100px}
  .stat strong{font-size:22px}
  .stat small{font-size:10px}
  .actions-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .actions-bar .actions-spacer{display:none}
  .actions-bar>.button,.actions-bar>button,.actions-bar>form{min-width:0;width:100%}
  .actions-bar>form>button{width:100%}
  .button,button.primary,button.secondary-button,button.danger,.danger-button,.ok-button,.btn{
    min-height:var(--touch-target);
    padding:9px 11px;
    font-size:11px;
  }
  input,select,textarea{min-height:44px;font-size:16px}
  textarea{min-height:100px}
  .inline-form,.filters,.form-grid,.bulk-options,.mini-edit,.user-edit,.reset-row,.inline-approval{grid-template-columns:1fr}
  .permission-box{grid-template-columns:1fr;grid-column:auto}
  .permission-box>b,.permission-box>p{grid-column:auto}
  .form-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .form-actions>*{width:100%}
  .selection-item{align-items:flex-start}
  .select-tools{align-items:flex-start;flex-wrap:wrap}
  .select-tools>input{flex:1 1 100%;width:100%}
  .list>div{flex-direction:column;gap:4px}
  .bar-row{grid-template-columns:58px minmax(0,1fr) 30px;gap:7px}
  .qr-video{min-height:180px}
  .qr-card img{width:min(280px,100%)}
  .app-footer{display:block;text-align:center;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .app-footer span{display:block}

  /* Authentication pages must scroll on short devices instead of clipping content. */
  .login-page{
    min-height:100vh;
    min-height:100dvh;
    place-items:start center;
    padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
  }
  .login-shell{grid-template-columns:1fr;width:100%;max-width:520px;border-radius:18px;margin:auto 0}
  .login-visual{display:none}
  .login-card{padding:28px 20px;min-height:auto}
  .login-card .mobile-login-logo{display:grid;width:52px;height:52px;margin-bottom:20px;border-radius:15px;background:linear-gradient(145deg,#12a698,#0b7b72);color:#fff;place-items:center}
  .registration-card .form-grid{grid-template-columns:1fr}
  .registration-card .span-2{grid-column:auto}
  .login-card h1{font-size:22px}
  .login-card label{font-size:12px}
}

@media (max-width:460px){
  :root{--content-gutter:10px;--mobile-sidebar:min(92vw,310px)}
  .stats-grid,.phase3-stats,.stats-4{grid-template-columns:1fr}
  .actions-bar,.form-actions{grid-template-columns:1fr}
  .topbar-actions{display:none}
  .mobile-menu{width:42px;height:42px;flex:0 0 42px}
  .page-title-wrap h1,.page-title-wrap p{overflow-wrap:anywhere}
  .table-wrap.is-responsive-table tbody td{grid-template-columns:1fr;gap:3px}
  .table-wrap.is-responsive-table tbody td::before{font-size:9px;color:#8a97a8}
  .panel,.card{padding:12px}
  .alert{grid-template-columns:22px minmax(0,1fr) 24px;padding:10px}
  .login-card{padding-inline:17px}
}

@media (max-width:340px){
  .content{padding-inline:7px}
  .panel,.card{padding:10px;border-radius:12px}
  .topbar h1{font-size:19px}
  .topbar p{display:none}
  .stat{min-height:92px}
  .brand-copy small{display:none}
  .login-page{padding-inline:8px}
  .login-card{padding-inline:14px}
}

/* Short-height landscape devices and zoomed desktop windows. */
@media (max-height:620px) and (max-width:1180px){
  .topbar{position:relative}
  .login-page{overflow-y:auto;place-items:start center}
  .login-shell{margin-block:auto}
}

@media (max-height:560px) and (max-width:1024px) and (orientation:landscape){
  .sidebar{padding-top:8px;padding-bottom:8px}
  .brand-wrap{padding-bottom:8px;margin-bottom:5px}
  .brand-mark{width:38px;height:38px;border-radius:11px}
  .nav-item{min-height:38px;padding-block:7px}
  .nav-section{margin-bottom:7px}
  .sidebar-user-card{padding:6px}
  .avatar{width:34px;height:34px}
}

/* Guest desktop pages can also become vertically constrained. */
@media (min-width:621px){
  .login-page{min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
  .login-shell{margin-block:auto}
}

@media print{
  html,body{overflow:visible!important}
  .content,.page-content{width:100%!important;max-width:none!important}
  .table-wrap{overflow:visible!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Small admin filter used by migration sessions. */
.sync-status-filter{display:flex;align-items:center;gap:8px;min-width:0}
.sync-status-filter select{width:auto;min-width:150px}
@media (max-width:620px){
  .sync-status-filter{width:100%;display:grid;grid-template-columns:1fr}
  .sync-status-filter select{width:100%;min-width:0}
}

details,summary{max-width:100%;min-width:0}
summary{overflow-wrap:anywhere}
.table-wrap:focus-visible{outline:3px solid var(--brand-ring);outline-offset:2px}