/* PPDO MIS Phase 1 Stabilization Layer
   Purpose: safe UI consistency, responsive layouts, visible focus states,
   resilient tables/forms, and improved dashboard/calendar behavior.
   No database or workflow changes are made by this stylesheet. */

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{min-height:100dvh}
img,svg,video,canvas{max-width:100%}
iframe{max-width:100%}
.main,.app-main,.content,.page-content{min-width:0}
.card,.ppdo-panel,.modal-card,.field,.form-grid>*{min-width:0;overflow-wrap:anywhere}

/* Accessible, consistent form controls */
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  max-width:100%;
  min-height:42px;
}
:where(input,select,textarea,button,a):focus-visible{
  outline:3px solid rgba(14,116,178,.32)!important;
  outline-offset:2px!important;
}
:where(button,.btn,input[type="submit"],input[type="button"]){
  min-height:40px;
  touch-action:manipulation;
}
:where(button,.btn,input[type="submit"],input[type="button"])[disabled],
:where(button,.btn).is-disabled{
  cursor:not-allowed!important;
  opacity:.58!important;
  filter:saturate(.55)!important;
}
.field label{display:block;line-height:1.35}
.field small,.field .help,.field .muted{overflow-wrap:anywhere}
input[type="file"]{width:100%;padding:8px}
textarea{resize:vertical}

/* Stable action/header wrapping */
:where(.toolbar,.actions,.page-head,.section-title,.card-head,.modal-actions,.website-save-bar){
  row-gap:10px;
}
:where(.toolbar,.actions,.modal-actions){flex-wrap:wrap}
.section-title{gap:12px}
.section-title>div{min-width:0}
.section-title h3,.section-title p{overflow-wrap:anywhere}

/* Resilient tables */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}
.table-wrap>table{width:100%;min-width:700px;border-collapse:separate;border-spacing:0}
.table-wrap thead th{position:sticky;top:0;z-index:2;background:#f5f9fc!important}
.table-wrap tbody tr{transition:background-color .16s ease}
.table-wrap tbody tr:hover{background:rgba(14,116,178,.045)}
.table-wrap th,.table-wrap td{vertical-align:top;overflow-wrap:anywhere}

/* Flash messages are readable and closable */
.flash{position:relative;padding-right:48px!important}
.ppdo-flash-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;min-height:30px;border:0;border-radius:999px;
  background:rgba(15,23,42,.08);color:inherit;font-size:18px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
}

/* Submission state prevents accidental repeated saves */
form.ppdo-is-submitting{position:relative;opacity:.78;pointer-events:none}
form.ppdo-is-submitting::after{
  content:"Saving…";
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:2147483000;padding:11px 16px;border-radius:999px;
  background:#0b3d66;color:#fff;font-weight:900;font-size:13px;
  box-shadow:0 14px 30px rgba(15,23,42,.28);
}

/* Offline status. It appears only when the browser loses connectivity. */
.ppdo-network-status{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(30px);
  z-index:2147483001;padding:10px 16px;border-radius:999px;
  background:#991b1b;color:#fff;font-size:13px;font-weight:900;
  box-shadow:0 14px 30px rgba(15,23,42,.28);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.ppdo-network-status.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Dashboard stabilization after removal of the large banner */
.main>.ppdo-google-calendar-card:first-of-type,
.main>.ppdo-calendar-sync-panel:first-of-type{margin-top:0!important}
.ppdo-google-calendar-card{width:100%;max-width:100%}
.ppdo-google-calendar-grid{min-width:0}
.ppdo-google-calendar-pane{display:flex;flex-direction:column;min-height:0}
.ppdo-google-calendar-frame{flex:1;min-height:420px}
.ppdo-google-calendar-status{overflow-wrap:anywhere}
.ppdo-google-calendar-card .section-title .btn{flex:0 0 auto}

/* Modal viewport safety */
.modal-overlay,.modal{overscroll-behavior:contain}
.modal-card{
  max-width:min(980px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
}

/* Helpful, non-intrusive status styling for System Health */
.ppdo-health-summary{display:grid;grid-template-columns:minmax(190px,.42fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:18px}
.ppdo-health-score{display:grid;place-items:center;text-align:center;padding:24px;border:1px solid #cfe2ef;border-radius:18px;background:linear-gradient(160deg,#f8fcff,#edf7fc)}
.ppdo-health-score strong{display:block;font-size:46px;line-height:1;color:#0b3d66}
.ppdo-health-score span{display:block;margin-top:8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#52677b}
.ppdo-health-score.good{background:linear-gradient(160deg,#f0fdf4,#dcfce7);border-color:#bbf7d0}
.ppdo-health-score.warn{background:linear-gradient(160deg,#fffbeb,#fef3c7);border-color:#fde68a}
.ppdo-health-score.bad{background:linear-gradient(160deg,#fff1f2,#fee2e2);border-color:#fecaca}
.ppdo-health-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.ppdo-health-check{padding:12px 14px;border:1px solid #dbe7f1;border-radius:13px;background:#fff}
.ppdo-health-check b{display:block;color:#173d63;margin-bottom:4px}
.ppdo-health-check small{display:block;color:#64748b;line-height:1.4}
.ppdo-health-check .status{display:inline-flex;margin-top:8px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.ppdo-health-check.pass .status{background:#dcfce7;color:#166534}
.ppdo-health-check.warn .status{background:#fef3c7;color:#92400e}
.ppdo-health-check.fail .status{background:#fee2e2;color:#991b1b}

@media(max-width:1100px){
  .ppdo-google-calendar-grid{grid-template-columns:1fr!important}
  .ppdo-google-calendar-month{height:520px!important}
  .ppdo-google-calendar-agenda{height:440px!important}
}

@media(max-width:760px){
  .main{padding-left:10px!important;padding-right:10px!important}
  :where(.toolbar,.actions,.modal-actions,.section-title){width:100%}
  :where(.toolbar,.actions,.modal-actions)>.btn,
  :where(.toolbar,.actions,.modal-actions)>button,
  :where(.toolbar,.actions,.modal-actions)>a.btn{max-width:100%}
  .table-wrap>table{min-width:620px}
  .ppdo-google-calendar-card .section-title{align-items:stretch!important}
  .ppdo-google-calendar-card .section-title .btn{width:100%;justify-content:center}
  .ppdo-google-calendar-month{height:460px!important;min-height:460px!important}
  .ppdo-google-calendar-agenda{height:380px!important;min-height:380px!important}
  .ppdo-health-summary{grid-template-columns:1fr}
  .modal-card{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
}

@media(max-width:480px){
  :where(.btn,button,input[type="submit"],input[type="button"]){font-size:13px}
  .ppdo-google-calendar-month{height:420px!important;min-height:420px!important}
  .ppdo-google-calendar-agenda{height:340px!important;min-height:340px!important}
  .ppdo-network-status{left:12px;right:12px;bottom:12px;transform:translateY(30px);text-align:center}
  .ppdo-network-status.show{transform:translateY(0)}
}

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

@media print{
  .ppdo-network-status,.ppdo-flash-close{display:none!important}
  .table-wrap{overflow:visible!important}
  .table-wrap>table{min-width:0!important}
}