/* =============================================================================
   Workday Demo — Global Mobile Responsive Layer
   Purpose: make the full application usable on phones without changing backend logic.
   Loaded after style.css and sidebar_layout.css.
   ============================================================================= */

:root{
  --mobile-pad: 12px;
  --mobile-radius: 16px;
}

img, svg, video, canvas{max-width:100%;height:auto;}
input, select, textarea, button{font:inherit;max-width:100%;}
button, .btn, a{touch-action:manipulation;}

/* Prevent invisible horizontal overflow from breaking the mobile viewport. */
html, body{max-width:100%;overflow-x:hidden;}
body.layout-sidebar .content,
body.layout-sidebar .container,
.app-main,
.card,
.board,
.table-wrap,
.admin-wrap,
.page-shell{
  min-width:0;
}

/* -------------------- Shell / sidebar -------------------- */
@media (max-width: 1023px){
  body.layout-sidebar{
    height:100dvh !important;
    overflow:hidden !important;
    background:#f5f7fb !important;
  }
  body.layout-sidebar .page{
    display:block !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#f5f7fb !important;
  }
  body.layout-sidebar .content{
    display:flex !important;
    flex-direction:column !important;
    height:100dvh !important;
    min-height:0 !important;
    width:100% !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    background:#f8fafc !important;
    padding-bottom:0 !important;
  }
  body.layout-sidebar .topbar-mobile{
    display:flex !important;
    flex:0 0 auto !important;
    min-height:56px;
    padding:10px var(--mobile-pad) !important;
    z-index:1100 !important;
  }
  body.layout-sidebar .container{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:var(--mobile-pad) var(--mobile-pad) 22px !important;
    background:#f8fafc !important;
  }
  body.layout-sidebar .sidebar{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    width:min(320px, 88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 22px 22px 0 !important;
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    z-index:1200 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  body.layout-sidebar .sidebar.open{
    transform:translateX(0) !important;
  }
  body.layout-sidebar .sidebar__brand,
  body.layout-sidebar .sidebar__user,
  body.layout-sidebar .sidebar__search,
  body.layout-sidebar .sidebar__footer{
    flex:0 0 auto !important;
  }
  body.layout-sidebar .sidebar__nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:18px !important;
  }
  body.layout-sidebar .overlay{
    z-index:1150 !important;
    background:rgba(15,23,42,.48) !important;
  }
  body.sidebar-open{
    overflow:hidden !important;
    touch-action:none;
  }
  .brand-mobile{
    max-width:calc(100vw - 74px);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .site-footer{
    position:static !important;
    flex:0 0 auto !important;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
    font-size:11px !important;
    z-index:auto !important;
  }
  .site-footer__inner{
    padding:0 !important;
    gap:4px !important;
    display:block !important;
    text-align:center !important;
  }
}

/* -------------------- Common page layout -------------------- */
@media (max-width: 900px){
  .admin-wrap,
  .page-shell,
  .readme-wrap,
  .container > .card,
  .app-main{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .card,
  .group-card,
  .teacher-group-card,
  .trainer-card,
  .readme-card{
    border-radius:var(--mobile-radius) !important;
    padding:14px !important;
    margin-bottom:12px !important;
  }
  .page-header,
  .card-head,
  .flex-between,
  .teacher-header,
  .trainer-toolbar,
  .toolbar,
  .hero-top,
  .group-header{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .page-header .title h1,
  .hero h1{
    font-size:22px !important;
    line-height:1.2 !important;
  }
  h1{font-size:24px !important;line-height:1.2;}
  h2{font-size:20px !important;line-height:1.25;}
  h3{font-size:17px !important;line-height:1.25;}
  p{overflow-wrap:anywhere;}
}

/* -------------------- Forms / buttons -------------------- */
@media (max-width: 760px){
  form,
  .form,
  .inline,
  .form-actions,
  .trainer-admin-panel,
  .board-toolbar,
  .add-col-form,
  #add-board-form,
  #add-group-form,
  .custom-pair,
  .teacher-group-footer{
    width:100% !important;
  }
  .inline,
  .form-actions,
  .trainer-admin-panel,
  .custom-pair,
  .teacher-group-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:9px !important;
  }
  .form-row,
  .w-260,
  .flex-1{
    width:100% !important;
    max-width:100% !important;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], select, textarea,
  .input{
    width:100% !important;
    min-width:0 !important;
    min-height:42px;
    font-size:16px !important; /* prevents iOS zoom */
  }
  .btn, button, .nav-btn, .teacher-attendance-btn{
    min-height:42px;
  }
  .btn:not(.btn-icon):not(.col-kebab):not(.g-kebab-btn):not(.trainer-field-btn),
  .nav-btn,
  .teacher-attendance-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .btn-sm{min-height:38px;}
}

/* -------------------- Tables: horizontal scroll instead of page overflow -------------------- */
@media (max-width: 900px){
  .table-wrap,
  .card:has(> .table),
  .card:has(table),
  .group-card .table-wrap,
  .admin-wrap .table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    max-width:100% !important;
  }
  table,
  .table{
    width:100% !important;
    min-width:680px;
  }
  .table th,
  .table td,
  table th,
  table td{
    padding:9px 10px !important;
    font-size:13px !important;
  }
  .trainer-table{min-width:760px !important;}
}

/* Compact card-style lists on phones. */
@media (max-width: 640px){
  .list{
    padding-left:0 !important;
    list-style:none !important;
  }
  .list .item,
  .item{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:14px !important;
  }
  .item-main,
  .item-actions{
    width:100% !important;
  }
  .item-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
}

/* -------------------- Board / group pages -------------------- */
@media (max-width: 900px){
  .boards{
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .board{
    max-width:100% !important;
    overflow:hidden !important;
  }
  .board-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .board-head-title{
    min-width:0 !important;
  }
  .board-head-title h3,
  .board-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .board-grid{
    overflow-x:auto !important;
    max-width:100% !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .grid-header,.row{
    min-width:0 !important;
  }
  .sidepanel{
    width:min(100vw, 460px) !important;
    right:-105vw !important;
  }
  .sidepanel.open{right:0 !important;}
  .sidepanel-body{padding:12px !important;}
  .status-manage{
    inset:auto 10px 10px 10px !important;
    width:auto !important;
    max-height:80dvh !important;
    overflow:auto !important;
  }
  .status-row{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
}

/* -------------------- Dashboard -------------------- */
@media (max-width: 760px){
  .kpi-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .kpi-card{
    min-height:auto !important;
    padding:14px !important;
  }
  .kpi-value{font-size:24px !important;}
  .teacher-groups-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .teacher-group-card{
    max-width:none !important;
  }
}

/* -------------------- Attendance / report pages -------------------- */
@media (max-width: 760px){
  .hero{
    border-radius:18px !important;
    padding:18px 14px !important;
    margin-bottom:12px !important;
  }
  .hero-stats{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .stat-card{
    min-width:0 !important;
    width:100% !important;
  }
  .toolbar-left,
  .toolbar-right,
  .group-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .table-wrap table{min-width:760px;}
}

/* -------------------- Login and demo cards -------------------- */
@media (max-width: 640px){
  .login-wrap,
  .login-card,
  .auth-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .login-card,
  .auth-card{
    border-radius:18px !important;
    padding:16px !important;
  }
  .demo-accounts,
  .demo-grid,
  .demo-buttons{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* -------------------- Popups / modals -------------------- */
@media (max-width: 760px){
  .modal,
  .popup,
  .student-profile-modal,
  .student-profile-box,
  .student-profile-dialog{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:88dvh !important;
  }
  .student-profile-content,
  .modal-body,
  .popup-body{
    max-height:72dvh !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* -------------------- Notification popover -------------------- */
@media (max-width: 640px){
  .n-pop{
    left:8px !important;
    right:8px !important;
    top:64px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - 84px) !important;
  }
  .n-head,
  .n-tabs{
    flex-wrap:wrap !important;
  }
  .n-actions{
    width:100% !important;
    margin-left:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
}

/* -------------------- Read Me page language blocks -------------------- */
@media (max-width: 760px){
  .readme-lang-switch,
  .readme-actions,
  .language-switch,
  .lang-switch{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .readme-section,
  .readme-block{
    padding:14px !important;
    border-radius:16px !important;
  }
}

/* -----------------------------------------------------------------------------
   Final mobile fixes
   ----------------------------------------------------------------------------- */
@media (max-width: 1023px){
  /* The footer must stay inside the content flow and never cover the menu/logout. */
  body.layout-sidebar .site-footer{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    z-index:1 !important;
    width:100% !important;
    flex:0 0 auto !important;
    transform:none !important;
  }
  body.layout-sidebar .content{
    overflow:hidden !important;
  }
  body.layout-sidebar .container{
    padding-bottom:18px !important;
  }
  body.layout-sidebar .sidebar{
    z-index:3000 !important;
  }
  body.layout-sidebar .overlay{
    z-index:2500 !important;
  }
  body.layout-sidebar .sidebar__footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:2 !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 -8px 18px rgba(15,23,42,.06) !important;
  }
}

/* Trainer page: turn the wide desktop table into clean mobile cards. */
@media (max-width: 700px){
  .trainer-toolbar{
    gap:12px !important;
  }
  .trainer-admin-panel{
    background:#f8fafc !important;
    border:1px solid #e5e7eb !important;
    border-radius:14px !important;
    padding:10px !important;
  }
  .trainer-help{
    font-size:12px !important;
    line-height:1.55 !important;
  }
  .trainer-table{
    min-width:0 !important;
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 12px !important;
    display:block !important;
  }
  .trainer-table thead{
    display:none !important;
  }
  .trainer-table tbody{
    display:block !important;
    width:100% !important;
  }
  .trainer-table tr[data-trainer-row]{
    display:block !important;
    width:100% !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:16px !important;
    padding:10px !important;
    box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
    margin-bottom:12px !important;
  }
  .trainer-table td{
    display:grid !important;
    grid-template-columns:minmax(96px, 38%) 1fr !important;
    align-items:start !important;
    gap:10px !important;
    width:100% !important;
    border:0 !important;
    border-bottom:1px solid #f1f5f9 !important;
    padding:10px 4px !important;
    white-space:normal !important;
    text-align:left !important;
  }
  .trainer-table td:last-child{
    border-bottom:0 !important;
  }
  .trainer-table td::before{
    content:attr(data-label);
    color:#64748b;
    font-size:12px;
    font-weight:800;
    line-height:1.35;
  }
  .trainer-table .trainer-cell-value{
    max-width:100% !important;
    min-width:0 !important;
    word-break:break-word !important;
    white-space:normal !important;
  }
  .trainer-table .trainer-edit-input{
    min-width:0 !important;
    width:100% !important;
  }
  .trainer-role-pill{
    justify-self:start !important;
  }
  .trainer-status{
    min-height:0 !important;
  }
  .table-wrap:has(.trainer-table){
    overflow:visible !important;
    border:0 !important;
  }
}