/* =========================================================================
   Responsive layer for phones + tablets (student AND admin portals)
   Loaded by student/student.Master + admin/main.Master (after tanweel-shell.css) and by
   the login pages. Goal: every page can be
   filled in and read on a phone/tablet without scrolling left or right.

   Two legacy patterns cause horizontal overflow on small screens:
   1) Form-layout <table>s that line up label/field pairs in 4-6 columns
      (requst_details.aspx, new_course.aspx, letters.aspx, ...). These never
      carry an id, unlike GridViews, so "table:not([id]):not(.dataTable)" selects exactly them.
      Tablet: re-flowed into a 2-column label|field grid. Phone: one column.
   2) GridView/DataTables data grids with many columns. js/tanweel-student-
      responsive.js adds .tw-cards to any grid that doesn't fit its container,
      turning each row into a card of "header: value" lines.
   ========================================================================= */

/* ---- Global safety: nothing may be wider than its container ---- */
.app .content img{max-width:100%; height:auto;}
.app .content input:not([type=checkbox]):not([type=radio]):not([type=image]),
.app .content select,
.app .content textarea{max-width:100%;}
.app .content .btn{max-width:100%; white-space:normal;}
.app .content td, .app .content th{overflow-wrap:anywhere;}
.app .content center{display:block;}

/* ---- Data grids rendered as cards (class toggled by JS) ---- */
table.tw-cards,
table.tw-cards > tbody,
table.tw-cards > tbody > tr,
table.tw-cards > tbody > tr > td{display:block !important; width:100% !important; height:auto !important;}
table.tw-cards{border:none !important; background:transparent !important;}
table.tw-cards > thead,
table.tw-cards tr.tw-head{display:none !important;}
table.tw-cards > tbody > tr{
  border:1px solid var(--line,#e3e8ee) !important; border-radius:10px; margin-bottom:10px;
  background:#fff !important; overflow:hidden; box-shadow:0 1px 2px rgba(20,40,60,.05);
}
table.tw-cards > tbody > tr > td{
  display:flex !important; box-sizing:border-box !important; align-items:center; justify-content:space-between; gap:12px;
  text-align:left !important; padding:8px 12px !important; min-height:36px;
  border:none !important; border-bottom:1px solid var(--line,#e3e8ee) !important;
  background:transparent !important; color:var(--text,#1f2a33) !important;
}
table.tw-cards > tbody > tr > td:last-child{border-bottom:none !important;}
table.tw-cards > tbody > tr > td::before{
  content:attr(data-label); flex:0 0 auto; max-width:45%;
  text-align:right; font-weight:700; font-size:12px; color:var(--muted,#6b7a86);
}
table.tw-cards > tbody > tr > td > .tw-val{flex:1 1 auto; min-width:0; text-align:left; overflow-wrap:anywhere;}
table.tw-cards > tbody > tr > td.tw-hide{display:none !important;}
table.tw-cards > tbody > tr > td.dataTables_empty{justify-content:center; text-align:center !important;}
table.tw-cards > tbody > tr > td.dataTables_empty::before{content:none;}
table.tw-cards > tbody > tr:hover > td{background:transparent !important;}
/* DataTables scrollX mode (admin reports) clones the header into its own table above the
   body - hide it and un-clip the scrolling body while the body is shown as cards. */
.tw-cards-wrap .dataTables_scrollHead,
.tw-cards-wrap .dataTables_scrollFoot{display:none !important;}
.tw-cards-wrap .dataTables_scrollBody{overflow:visible !important; height:auto !important; max-height:none !important;}

/* =========================================================================
   Tablet + phone (sidebar is already off-canvas below 900px - tanweel-shell.css)
   ========================================================================= */
@media (max-width:900px){
  .app .content{padding:16px;}
  .topbar{padding:10px 14px; gap:10px;}
  .topbar .searchbox{display:none;}
  .topbar .right{margin-inline-start:auto; min-width:0;}
  .userchip{min-width:0;}
  .userchip > span:nth-child(2){max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sidebar{overflow-y:auto;}
  .tw-sidebar-backdrop{position:fixed; inset:0; background:rgba(13,26,41,.45); z-index:65;}

  /* Form-layout tables -> label|field grid */
  .app .content table:not([id]):not(.dataTable),
  .app .content table:not([id]):not(.dataTable) > tbody{display:block; width:100% !important; height:auto !important;}
  .app .content table:not([id]):not(.dataTable) > tbody > tr{
    display:grid; grid-template-columns:minmax(110px,34%) minmax(0,1fr);
    column-gap:12px; align-items:center;
  }
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td{
    display:block; width:auto !important; height:auto !important; min-width:0;
    padding:6px 4px; border-bottom:none;
  }
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td[colspan],
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td:only-child{grid-column:1 / -1;}
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td.tw-blank{display:none;}
  /* sideways forms (headings row above a fields row) - see labelColumnForms() in the JS */
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td.tw-colhead{display:none;}
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td.tw-labelled{background:transparent !important;}
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td.tw-labelled::before{
    content:attr(data-label); display:block; margin-bottom:4px;
    font-weight:700; font-size:12px; color:var(--navy-dark,#0d2a41);
  }
  .app .content table:not([id]):not(.dataTable) tr:hover td{background:transparent;}
  .app .content table:not([id]):not(.dataTable) td > input:not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]):not([type=button]),
  .app .content table:not([id]):not(.dataTable) td > select,
  .app .content table:not([id]):not(.dataTable) td > textarea{width:100% !important;}
  .app .content table:not([id]):not(.dataTable) td > input[type=file]{width:100% !important;}

  /* asp:Menu tab bar (requst_details.aspx, new_course.aspx) - wrap instead of overflowing */
  .tanweel-tabmenu, .tanweel-tabmenu > ul{width:100% !important; height:auto !important;}
  .tanweel-tabmenu > ul{display:flex !important; flex-wrap:wrap; float:none !important;}
  .tanweel-tabmenu > ul > li{float:none !important; flex:1 1 auto; position:relative !important;}
  .tanweel-tabmenu > ul > li > a{display:flex !important; align-items:center; justify-content:center; gap:4px; white-space:nowrap; padding:8px 6px !important; font-size:13px;}

  /* DataTables controls stack instead of floating side by side */
  .dataTables_wrapper{width:100%;}
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_length{float:none !important; text-align:center !important; width:100%; margin:6px 0;}
  .dataTables_wrapper .dataTables_filter label{display:flex; align-items:center; gap:8px; width:100%;}
  .dataTables_wrapper .dataTables_filter input{flex:1; min-width:0; margin:0 !important;}
  .dt-buttons{float:none !important; justify-content:center;}
  .tanweel-toolbar-right, .tanweel-toolbar-right label, .tanweel-toolbar-right input[type=search]{width:100%;}

  .report-card-grid .btn{min-width:0; flex:1 1 200px;}
}

/* =========================================================================
   Phone
   ========================================================================= */
@media (max-width:560px){
  .app .content{padding:12px;}
  .card .card-head, .card .card-body{padding:12px;}
  .pagehead h1{font-size:18px;}
  .userchip .avatar{display:none;}

  /* Form-layout tables -> one column, label above its field */
  .app .content table:not([id]):not(.dataTable) > tbody > tr{grid-template-columns:minmax(0,1fr);}
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td{padding:3px 2px;}
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td > span:only-child,
  .app .content table:not([id]):not(.dataTable) > tbody > tr > td > label:only-child{font-weight:700; font-size:13px; color:var(--navy-dark,#0d2a41); margin-top:6px; display:inline-block;}
  /* label/field pairs laid out as floated fixed-width divs inside one cell (admin add_requst.aspx) */
  .app .content table:not([id]):not(.dataTable) td > div[style*="float"]{float:none !important; width:100% !important; height:auto !important; margin-bottom:4px;}
  .app .content table:not([id]):not(.dataTable) td > div[style*="float"] > input:not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]),
  .app .content table:not([id]):not(.dataTable) td > div[style*="float"] > select,
  .app .content table:not([id]):not(.dataTable) td > div[style*="float"] > textarea{width:100% !important;}
  .app .content table:not([id]):not(.dataTable) td > input[type=submit],
  .app .content table:not([id]):not(.dataTable) td > .btn{width:100% !important; justify-content:center;}

  .report-card-grid .btn{flex-basis:100%;}
  .filter-grid .fld{min-width:0 !important; flex:1 1 100%;}
  .filter-grid .fld input, .filter-grid .fld select, .filter-grid .fld .btn{width:100% !important;}

  .dt-buttons{gap:6px;}
  .dt-button{padding:7px 12px !important; font-size:12px !important;}

  /* Login / forgot-password (reg.Master) */
  .login-side{padding:24px 16px;}
  .login-side .logo-badge-lg{width:140px; margin-bottom:12px;}
  .login-form-side{padding:24px 16px;}
}