/* PPDO MIS Global Mobile UI Cleanup - 20260710
   Safe CSS-only polish for mobile/tablet. No database or PHP logic changes. */

:root{
  --ppdo-mobile-safe-blue:#0078ad;
  --ppdo-mobile-sidebar:#00435c;
  --ppdo-mobile-card:#ffffff;
  --ppdo-mobile-border:#dbe7f1;
  --ppdo-mobile-text:#0b2542;
}

@media (max-width: 900px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important;background:#eef4f8!important;}
  *{box-sizing:border-box!important;}

  /* App shell */
  body .app,body .app-shell,body .layout,body .workspace{width:100%!important;max-width:100%!important;margin:0!important;overflow-x:hidden!important;}
  body main,body .main,body .content,body .app-main,body .page-content,body #content,body .mis-content{width:100%!important;max-width:100%!important;margin:0!important;padding:10px!important;overflow-x:hidden!important;}

  /* Header */
  body header,body .site-header,body .top-header,body .ppdo-header,body .main-header{
    position:relative!important;width:100%!important;min-height:auto!important;height:auto!important;padding:8px 10px!important;display:block!important;overflow:hidden!important;
  }
  body header .brand,body .site-header .brand,body .ppdo-brand,body .header-brand{
    display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;min-width:0!important;
  }
  body header img,body .site-header img,body .ppdo-brand img{max-width:52px!important;max-height:52px!important;object-fit:contain!important;flex:0 0 auto!important;}
  body header h1,body .site-header h1,body .ppdo-brand h1,body .brand-title{
    font-size:18px!important;line-height:1.06!important;margin:0!important;letter-spacing:.02em!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  body header p,body .site-header p,body .brand-subtitle{font-size:11px!important;line-height:1.2!important;margin:2px 0 0!important;}
  body .header-time,body .time-box,body .ppdo-time,body .pst-time,body .system-time{font-size:11px!important;line-height:1.25!important;margin:6px 0!important;text-align:left!important;display:block!important;}
  body .global-search,body .header-search,body .top-search,body form.search{width:100%!important;max-width:100%!important;margin:6px 0 0!important;display:flex!important;}
  body .global-search input,body .header-search input,body .top-search input,body form.search input[type="search"],body header input[type="search"],body header input[type="text"]{width:100%!important;min-width:0!important;height:40px!important;font-size:15px!important;border-radius:8px 0 0 8px!important;}
  body .global-search button,body .header-search button,body .top-search button,body form.search button{height:40px!important;min-width:46px!important;border-radius:0 8px 8px 0!important;}

  /* Sidebar drawer: hidden by default on mobile */
  body .sidebar,body aside.sidebar,body .app-sidebar,body .mis-sidebar,body #sidebar{
    position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(82vw,320px)!important;max-width:320px!important;height:100dvh!important;z-index:2147482500!important;transform:translateX(-110%)!important;transition:transform .22s ease!important;overflow-y:auto!important;box-shadow:0 18px 50px rgba(2,8,23,.38)!important;background:var(--ppdo-mobile-sidebar)!important;margin:0!important;padding-bottom:76px!important;
  }
  body.ppdo-sidebar-open .sidebar,body.ppdo-sidebar-open aside.sidebar,body.ppdo-sidebar-open .app-sidebar,body.ppdo-sidebar-open .mis-sidebar,body.ppdo-sidebar-open #sidebar{transform:translateX(0)!important;}
  body.ppdo-sidebar-open::before{content:"";position:fixed;inset:0;background:rgba(2,8,23,.48);z-index:2147482400;}
  body .sidebar-toggle,body .mobile-menu-toggle,body #mobileMenuButton{display:flex!important;align-items:center!important;justify-content:center!important;}
  body .ppdo-mobile-menu-btn{
    position:fixed!important;left:10px!important;bottom:12px!important;z-index:2147482600!important;width:50px!important;height:50px!important;border:0!important;border-radius:16px!important;background:#06365a!important;color:#fff!important;font-size:26px!important;font-weight:900!important;box-shadow:0 12px 28px rgba(2,8,23,.28)!important;
  }

  /* Common sections and cards */
  body .card,body .panel,body .box,body .module-card,body .content-card,body .ppdo-panel,body .settings-card,body .table-card{
    width:100%!important;max-width:100%!important;margin:10px 0!important;padding:12px!important;border-radius:14px!important;background:var(--ppdo-mobile-card)!important;overflow:hidden!important;
  }
  body .section-title,body .page-title,body .module-header,body .panel-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important;}
  body .section-title h2,body .section-title h3,body .page-title h2,body .module-header h2,body .panel-header h3{font-size:18px!important;line-height:1.2!important;margin:0!important;}
  body .section-title p,body .page-title p,body .module-header p,body .panel-header p{font-size:12px!important;line-height:1.35!important;margin:3px 0 0!important;}

  /* Buttons */
  body .btn,body button,body input[type="submit"],body input[type="button"],body a.button{
    min-height:40px!important;border-radius:11px!important;font-size:13px!important;line-height:1.15!important;white-space:normal!important;text-align:center!important;touch-action:manipulation!important;
  }
  body .btn-row,body .actions,body .toolbar,body .quick-actions,body .ppdo-quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;align-items:stretch!important;width:100%!important;}
  body .btn-row .btn,body .actions .btn,body .toolbar .btn,body .quick-actions .btn,body .ppdo-quick-actions .btn{width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:10px 8px!important;}

  /* Forms */
  body form,body .form-card{width:100%!important;max-width:100%!important;}
  body .form-grid,body .grid-2,body .grid-3,body .ppdo-form-grid,body .ppdo-core-form-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  body label{font-size:11px!important;font-weight:800!important;letter-spacing:.04em!important;color:#334155!important;}
  body input,body select,body textarea{max-width:100%!important;width:100%!important;min-height:40px!important;font-size:15px!important;border-radius:10px!important;}
  body textarea{min-height:90px!important;}

  /* Tables become horizontally scrollable by default. Module-specific JS can convert to cards. */
  body table{width:100%!important;min-width:720px;border-collapse:collapse!important;}
  body .table-wrap,body .responsive-table,body .table-responsive,body .data-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:12px!important;}
  body th,body td{font-size:11px!important;line-height:1.25!important;padding:8px!important;}

  /* Modals must fit phones */
  body .modal,body .modal-overlay,body .ppdo-modal-overlay,body .modal-backdrop{z-index:2147483000!important;}
  body .modal.show,body .modal-overlay.show,body .ppdo-modal-overlay.show{display:flex!important;align-items:stretch!important;justify-content:stretch!important;padding:0!important;}
  body .modal-card,body .modal-content,body .modal-dialog,body .ppdo-modal-card,body .ppdo-core-record-dialog{
    width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;overflow:auto!important;padding:14px!important;
  }
  body .modal-header,body .ppdo-modal-header{position:sticky!important;top:0!important;background:#fff!important;z-index:2!important;padding:10px 0!important;margin:-14px -14px 12px!important;padding-left:14px!important;padding-right:14px!important;border-bottom:1px solid #e5edf6!important;}

  /* Dashboard calendar/mobile generic */
  body .ppdo-calendar-top-panel,body .calendar-panel{padding:12px!important;border-radius:16px!important;overflow:hidden!important;}
  body .ppdo-dashboard-calendar-split{display:block!important;grid-template-columns:1fr!important;}
  body .ppdo-mini-calendar,body .ppdo-calendar-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:4px!important;width:100%!important;}
  body .ppdo-mini-cal-day,body .calendar-day-btn,body .ppdo-calendar-day{min-height:32px!important;height:32px!important;border-radius:8px!important;font-size:11px!important;padding:2px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  body .ppdo-mini-cal-head,body .ppdo-calendar-day-name{font-size:8.5px!important;text-align:center!important;padding:2px 0!important;}

  /* Hide helper captions that consume space on small screens */
  body .muted.long-help,body .desktop-only-help,body .field-help-heavy{display:none!important;}
}

@media (max-width: 480px){
  body main,body .main,body .content,body .app-main,body .page-content{padding:8px!important;}
  body header h1,body .site-header h1,body .brand-title{font-size:16px!important;}
  body .btn-row,body .actions,body .toolbar,body .quick-actions,body .ppdo-quick-actions{grid-template-columns:1fr 1fr!important;gap:7px!important;}
  body .btn,body button{font-size:12px!important;min-height:38px!important;}
  body .card,body .panel,body .box,body .ppdo-panel{padding:10px!important;border-radius:13px!important;}
  body .stats,body .ppdo-dashboard-stats,body .ppdo-core-overview{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
}