/* ==========================================================================
   Organizational Checkup dashboard UI  (css/oc-ui.css, v1.0, Phase 1)
   Tokens, app shell and base components for dashboard.php.
   Source: docs/audit/dashboard-redesign-proposal.md, with two corrections from
   docs/audit/quiz-desktop-design-audit.md: muted text = navy-80 #3C6580 (6.2:1),
   and the Six Key Components colour map is the quiz's (css/oc-brand-override.css).

   Loaded LAST in <head> with media="screen": print output is owned by
   css/dashboard-print.css and is not affected by anything here.

   Why there is !important in this file: css/oc-brand-override.css (shared with the
   quiz) declares ~400 rules with !important. Where a base component here must win
   over one of those, the same property is marked !important; everything else is
   plain. When Phase 2 stops loading the override on the dashboard these go away.

   Owner rules: orange buttons always carry white text; nothing within 12px of the
   screen edge; phone (<768px) has its own layout.
   ========================================================================== */

:root{
  /* brand (EOS Worldwide Brand Style Guide v05.2025) */
  --oc-orange:#FF7900; --oc-orange-burnt:#F04E23; --oc-blue:#0D7BB4; --oc-navy:#0B3E60;
  --oc-yellow:#FFC900; --oc-green:#1B9066; --oc-teal:#00A9AD; --oc-slate:#45577A;
  /* navy tints (20% steps) plus two light surface steps */
  --oc-navy-80:#3C6580; --oc-navy-60:#6D8BA0; --oc-navy-40:#9DB2BF; --oc-navy-20:#CED8DF;
  --oc-navy-10:#E7ECEF; --oc-navy-5:#F3F6F8;
  /* semantic */
  --oc-text:var(--oc-navy); --oc-text-muted:var(--oc-navy-80);
  --oc-link:var(--oc-blue); --oc-cta:var(--oc-orange);
  --oc-bg:var(--oc-navy-5); --oc-surface:#FFFFFF; --oc-border:var(--oc-navy-20);
  --oc-success:var(--oc-green); --oc-danger:var(--oc-orange-burnt); --oc-warning:var(--oc-yellow);
  --oc-success-text:#146B4C; --oc-warning-text:#6B5400; --oc-danger-text:#9A2F11;
  /* Six Key Components: same map as the quiz (each >=3:1 on the navy-10 track; Vision carries a burnt rim) */
  --oc-c-vision:var(--oc-orange); --oc-c-people:var(--oc-blue); --oc-c-data:var(--oc-green);
  --oc-c-issues:var(--oc-navy); --oc-c-process:var(--oc-orange-burnt); --oc-c-traction:var(--oc-slate);
  /* type scale (Montserrat only) */
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px; --fs-stat:56px;
  /* spacing, radius, elevation */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,62,96,.06); --sh-2:0 4px 16px rgba(11,62,96,.08);
  /* shell */
  --oc-sidebar-w:248px; --oc-topbar-h:60px; --oc-tabbar-h:64px;
  --oc-gutter:24px;
  --oc-font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---- base ---------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--oc-bg)!important;color:var(--oc-text)!important;font-size:var(--fs-base);line-height:1.5}
/* Montserrat everywhere on the dashboard (the shared override sets Roboto Condensed on p/td/label) */
body p, body td, body label, body li, body th, body .welcome-desc, body .next-steps{font-family:var(--oc-font)!important}
body p, body td, body label{color:inherit}
a{color:var(--oc-link)}
a:hover{color:var(--oc-navy)}
:focus-visible{outline:3px solid var(--oc-blue)!important;outline-offset:2px}
.oc-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
img,canvas,video,iframe{max-width:100%}
/* the old CSS hid the page scrollbar; scrolling is the user's choice */
html::-webkit-scrollbar{width:auto}

/* ---- app shell ------------------------------------------------------------- */
.oc-app{min-height:100vh}
.oc-shell{display:grid;grid-template-columns:var(--oc-sidebar-w) minmax(0,1fr);min-height:100vh}
.oc-shell--bare{grid-template-columns:minmax(0,1fr)}
/* safety net: if a legacy view closes one div too many, escaped blocks still land in the content column */
.oc-shell:not(.oc-shell--bare)>:not(.oc-side):not(.oc-main){grid-column:2;min-width:0}
/* the sidebar colour runs the full page height even when the page is taller than the sticky panel */
@media (min-width:768px){.oc-shell:not(.oc-shell--bare){background:linear-gradient(to right,var(--oc-navy) var(--oc-sidebar-w),transparent var(--oc-sidebar-w))}}

.oc-side{background:var(--oc-navy);color:#fff;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.oc-side-logo{display:block;margin:var(--sp-1) var(--sp-2) var(--sp-6);border-radius:var(--r-sm)}
.oc-side-logo img{width:200px;max-width:100%;height:auto;display:block}
.oc-side-company{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)!important;padding:0 var(--sp-2);margin:0 0 var(--sp-2);overflow-wrap:anywhere}
.oc-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.oc-nav a{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);border-left:3px solid transparent;color:rgba(255,255,255,.84);font-size:var(--fs-base);font-weight:500;text-decoration:none}
.oc-nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.oc-nav a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;font-weight:700;border-left-color:var(--oc-orange)}
.oc-side-foot{margin-top:auto;padding:var(--sp-4) var(--sp-2) 0;display:flex;flex-direction:column;gap:0;font-size:var(--fs-xs);color:rgba(255,255,255,.7)}
.oc-side-foot a{color:rgba(255,255,255,.84);text-decoration:none;min-height:44px;display:flex;align-items:center}
.oc-side-foot a:hover{color:#fff;text-decoration:underline}

.oc-main{min-width:0;display:flex;flex-direction:column}
.oc-top{position:sticky;top:0;z-index:20;height:var(--oc-topbar-h);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--oc-gutter);background:var(--oc-surface);border-bottom:1px solid var(--oc-border)}
.oc-top-logo{display:none;flex:none}
.oc-top-logo img{display:block;height:auto}
.oc-top-title{flex:1;min-width:0;margin:0;font-size:var(--fs-md)!important;font-weight:700;line-height:1.2;color:var(--oc-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;text-transform:none}
.oc-user{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--oc-navy);min-width:0}
.oc-user-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-avatar{width:32px;height:32px;border-radius:50%;background:var(--oc-navy-10);color:var(--oc-navy);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;flex:none}
.oc-logout{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-pill);color:var(--oc-navy);font-size:var(--fs-sm);font-weight:700;text-decoration:none}
.oc-logout:hover{background:var(--oc-navy-5);color:var(--oc-navy);text-decoration:none}
/* guests and the EOS Implementer report: no sidebar, navy header strip like the quiz */
.oc-shell--bare .oc-top{background:var(--oc-navy);border-bottom:0;color:#fff}
.oc-shell--bare .oc-top-logo{display:block}
.oc-shell--bare .oc-top-logo img{width:195px} /* brand minimum for the horizontal wordmark */
.oc-shell--bare .oc-top-title{color:#fff}
.oc-tabbar{display:none}

/* content column: replaces the old .main-content grey box with the 500px padding hack */
.main-content.oc-content{flex:1;width:100%;max-width:1240px;padding:var(--oc-gutter)!important;margin:0;background:transparent;color:var(--oc-text);min-height:0}
.oc-shell--bare .main-content.oc-content{margin:0 auto}
.oc-content>.row{margin-left:-12px;margin-right:-12px}

/* legal footer (markup in dashboard.php; base list style in oc-consent.css) */
.oc-dash-footer{padding:var(--sp-6) 0 var(--sp-2)!important;color:var(--oc-text-muted)!important}
.oc-dash-footer .oc-legal a,.oc-dash-footer .oc-legal button{color:var(--oc-navy-80)!important}
.oc-phone-only{display:none!important}

/* ---- buttons --------------------------------------------------------------- */
.btn{font-family:var(--oc-font)!important;font-weight:700!important;font-size:var(--fs-sm);letter-spacing:.02em!important;text-transform:none!important;line-height:1.2;min-height:44px;padding:0 var(--sp-6);border-radius:var(--r-pill)!important;border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);white-space:normal;text-align:center;box-shadow:none!important;animation:none!important;transform:none!important;filter:none!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important}
.btn:hover,.btn:focus{text-decoration:none}
/* primary: EOS Orange pill, white label (owner rule), burnt orange on hover with white label */
.btn-primary,.btn-info,.btn-warning,.register-here,.register-button,#btn-login,.resend-invites-button,.view-recommendations-button,.cta-button,.cta-button2,.quiz-start{
  background:var(--oc-orange)!important;border:2px solid var(--oc-orange)!important;color:#fff!important;border-radius:var(--r-pill)!important;box-shadow:none!important;animation:none!important;font-size:var(--fs-sm)!important;padding:0 var(--sp-6)!important;min-height:44px;text-transform:none!important;letter-spacing:.02em!important}
.btn-primary:hover,.btn-primary:focus,.btn-info:hover,.btn-info:focus,.btn-warning:hover,.btn-warning:focus,.register-here:hover,.register-button:hover,#btn-login:hover,.resend-invites-button:hover,.resend-invites-button:focus,.view-recommendations-button:hover,.cta-button:hover,.cta-button2:hover{
  background:var(--oc-orange-burnt)!important;border-color:var(--oc-orange-burnt)!important;color:#fff!important}
.btn-primary *,.btn-info *,.btn-warning *,.register-here *,#btn-login *,.resend-invites-button *,.view-recommendations-button *{color:#fff!important}
/* secondary: white pill, navy outline */
.btn-default,.btn-outline,.print-btn{background:var(--oc-surface)!important;border:2px solid var(--oc-navy)!important;color:var(--oc-navy)!important;border-radius:var(--r-pill)!important;font-size:var(--fs-sm)!important;padding:0 var(--sp-6)!important;min-width:0!important;text-transform:none!important;letter-spacing:.02em!important}
.btn-default:hover,.btn-default:focus,.btn-outline:hover,.btn-outline:focus,.print-btn:hover,.print-btn:focus{background:var(--oc-navy-5)!important;color:var(--oc-navy)!important;border-color:var(--oc-navy)!important}
/* tertiary: text only */
.btn-link{background:transparent!important;border-color:transparent!important;color:var(--oc-navy)!important;padding:0 var(--sp-3)!important;text-decoration:underline}
.btn-link:hover{background:var(--oc-navy-5)!important}
/* status buttons keep AA contrast */
.btn-success{background:var(--oc-success-text)!important;border:2px solid var(--oc-success-text)!important;color:#fff!important}
.btn-danger{background:var(--oc-surface)!important;border:2px solid var(--oc-danger-text)!important;color:var(--oc-danger-text)!important}
.btn-danger:hover,.btn-danger:focus{background:rgba(240,78,35,.08)!important;color:var(--oc-danger-text)!important}
.btn[disabled],.btn.disabled,fieldset[disabled] .btn,.resend-invites-button-disabled{opacity:.5;cursor:not-allowed}
.btn-sm{min-height:36px;padding:0 var(--sp-4)!important;font-size:var(--fs-xs)!important}
/* row icon actions (People, Invitations, Campaigns, Account tables): 40px targets, one neutral colour */
.btn-eosdashboard,.btn.oc-action{min-width:40px;min-height:40px;width:40px;height:40px;padding:0!important;margin:1px;border-radius:var(--r-md)!important;border:0!important;background:transparent!important;color:var(--oc-navy)!important;display:inline-flex;align-items:center;justify-content:center;font-size:17px!important;vertical-align:middle}
.btn-eosdashboard:hover,.btn-eosdashboard:focus,.btn.oc-action:hover{background:var(--oc-navy-10)!important;color:var(--oc-navy)!important}
.btn-eosdashboard em,.btn-eosdashboard .fa{color:inherit!important;font-size:17px!important;margin:0!important}
.btn-circle{min-height:0}
/* the roadmap "next" circle stays a 44px orange circle with a white arrow */
.presc-btn.btn,.quiz-btn.btn{width:44px!important;height:44px!important;min-height:44px;padding:0!important;border-radius:50%!important;background:var(--oc-orange)!important;border:0!important;box-shadow:none!important;transform:none!important}
.presc-btn .btn-icon{color:#fff!important}
.presc-btn-container .presc-btn-text{color:var(--oc-navy)!important;font-size:var(--fs-sm)!important;font-weight:700}

/* ---- cards ------------------------------------------------------------------ */
.oc-card,.panel,.well{background:var(--oc-surface)!important;border:1px solid var(--oc-border)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-1)!important;overflow:hidden}
.panel-heading,.panel-info>.panel-heading,#loginbox .panel-heading,#signupbox .panel-heading{background:var(--oc-surface)!important;color:var(--oc-navy)!important;border-bottom:1px solid var(--oc-navy-10)!important;padding:var(--sp-4) var(--sp-5)!important;text-transform:none!important;letter-spacing:0!important;font-size:var(--fs-base)}
.panel-title,.panel-info>.panel-heading .panel-title{color:var(--oc-navy)!important;font-size:var(--fs-md)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none}
.panel-info>.panel-heading a,.panel-heading a{color:var(--oc-link)!important;font-size:var(--fs-sm)!important;font-weight:600;text-transform:none;display:inline-block;padding:12px 0;margin:-12px 0} /* 44px hit area without growing the header */
.panel-body{padding:var(--sp-5)!important}
.well{padding:var(--sp-4) var(--sp-5)}

/* ---- forms ------------------------------------------------------------------- */
label,.control-label{font-size:var(--fs-sm);font-weight:600;color:var(--oc-navy)}
label.error,.help-block{font-size:var(--fs-sm);font-weight:500;color:var(--oc-danger-text)}
.form-control{min-height:44px;max-width:100%;padding:10px 14px!important;font-family:var(--oc-font)!important;font-size:var(--fs-base)!important;color:var(--oc-navy)!important;background-color:var(--oc-surface)!important;border:1.5px solid var(--oc-navy-20)!important;border-radius:var(--r-md)!important;box-shadow:none!important}
.form-control:focus{border-color:var(--oc-blue)!important;box-shadow:0 0 0 3px rgba(13,123,180,.25)!important;outline:0}
.form-control::placeholder{color:var(--oc-navy-80)!important;opacity:1}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:var(--oc-navy-5)!important;color:var(--oc-navy-80)!important;cursor:not-allowed}
.form-control.error,.has-error .form-control{border-color:var(--oc-orange-burnt)!important}
select.form-control{padding-right:36px!important}
textarea.form-control{min-height:96px}
.input-group-addon{background:var(--oc-navy-5)!important;border:1.5px solid var(--oc-navy-20)!important;border-right:0!important;color:var(--oc-navy-80)!important;border-radius:var(--r-md) 0 0 var(--r-md)!important}
.input-group .form-control:not(:first-child){border-radius:0 var(--r-md) var(--r-md) 0!important}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--oc-navy);vertical-align:middle;margin-top:0}
.checkbox label,.radio-inline{font-size:var(--fs-sm)!important;color:var(--oc-navy)!important}
input[type=file]{max-width:100%;font-size:var(--fs-sm)}

/* ---- alerts ----------------------------------------------------------------- */
.alert{background:var(--oc-surface)!important;border:1px solid var(--oc-border)!important;border-left-width:4px!important;border-radius:var(--r-md)!important;padding:var(--sp-3) var(--sp-4)!important;font-size:var(--fs-sm)!important;font-weight:500!important;line-height:1.5;color:var(--oc-navy)!important;box-shadow:var(--sh-1);margin-bottom:var(--sp-4)}
.alert a{font-weight:700;text-decoration:underline}
.alert-success{border-color:rgba(27,144,102,.4)!important;border-left-color:var(--oc-green)!important;color:var(--oc-success-text)!important}
.alert-success a{color:var(--oc-success-text)!important}
.alert-warning{border-color:rgba(255,201,0,.6)!important;border-left-color:var(--oc-yellow)!important;color:var(--oc-warning-text)!important}
.alert-warning a{color:var(--oc-warning-text)!important}
.alert-danger{border-color:rgba(240,78,35,.4)!important;border-left-color:var(--oc-orange-burnt)!important;color:var(--oc-danger-text)!important}
.alert-danger a{color:var(--oc-danger-text)!important}
.alert-info{border-left-color:var(--oc-blue)!important}
.alert p,.alert li,.alert strong{color:inherit!important}
/* the shell's alerts: icon + body + dismiss */
.oc-alert{display:flex;align-items:flex-start;gap:var(--sp-3)}
.oc-alert>.oc-i{margin-top:1px}
.oc-alert-body{flex:1;min-width:0;overflow-wrap:anywhere}
.alert .close,.alert-dismissable .close,.alert-dismissible .close{position:static!important;float:none;flex:none;opacity:1;text-shadow:none;color:inherit;width:32px;height:32px;margin:-6px -6px -6px auto;border-radius:var(--r-sm);display:grid;place-items:center;font-size:20px;line-height:1}
.alert .close:hover{background:var(--oc-navy-5);opacity:1}
.alert-dismissable,.alert-dismissible{padding-right:var(--sp-4)!important}

/* ---- tables ------------------------------------------------------------------ */
.table{font-size:var(--fs-sm);color:var(--oc-navy);background:var(--oc-surface);margin-bottom:var(--sp-4)}
.table>thead>tr>th,.table>tbody>tr>th,.table>tr>th,.table th{font-family:var(--oc-font)!important;font-size:var(--fs-xs)!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--oc-navy-80)!important;background:var(--oc-surface)!important;border-top:0!important;border-bottom:2px solid var(--oc-navy-10)!important;padding:var(--sp-3) var(--sp-4)!important;vertical-align:bottom}
.table>tbody>tr>td,.table>tr>td,.table td{font-size:var(--fs-sm)!important;color:var(--oc-navy)!important;border-top:1px solid var(--oc-navy-10)!important;padding:var(--sp-3) var(--sp-4)!important;vertical-align:middle!important}
.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{border-left:0!important;border-right:0!important}
.table-striped>tbody>tr:nth-of-type(odd){background-color:transparent!important}
.table>tbody>tr:hover{background-color:var(--oc-navy-5)!important}
.table-responsive{border:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* the black-header "campaign details" table joins the system */
.campaign-details-table th{background:var(--oc-navy-5)!important;color:var(--oc-navy-80)!important;font-size:var(--fs-xs)!important;letter-spacing:.06em!important}
.campaign-details-table td,.campaign-details-table .td1{color:var(--oc-navy)!important;font-size:var(--fs-sm)!important;letter-spacing:0!important}
/* status labels become pills */
.label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:4px 10px;line-height:1.2;letter-spacing:0}
/* !important: AdminLTE.css (loaded on view-report) forces its own label colours with !important */
.label-success{background:rgba(27,144,102,.12)!important;color:var(--oc-success-text)!important}
.label-danger,.label-default{background:var(--oc-navy-10)!important;color:var(--oc-navy-80)!important}
.label-primary{background:var(--oc-navy)!important;color:#fff!important}
.label-warning{background:rgba(255,201,0,.25)!important;color:var(--oc-warning-text)!important}

/* ---- modals and tabs ------------------------------------------------------- */
.modal-content{border-radius:14px!important;border:0!important;box-shadow:var(--sh-2)!important}
.modal .modal-header{background:var(--oc-surface)!important;color:var(--oc-navy)!important;border-bottom:1px solid var(--oc-navy-10)!important;padding:var(--sp-4) var(--sp-6)!important}
.modal .modal-title{color:var(--oc-navy)!important;font-size:var(--fs-md)!important;font-weight:700!important}
.modal .modal-header .close{opacity:.8;color:var(--oc-navy);text-shadow:none;width:44px;height:44px;margin:-10px -12px 0 0;font-size:24px}
.modal-body{padding:var(--sp-6)!important;min-height:0!important}
.modal .modal-footer{background:var(--oc-surface)!important;border-top:1px solid var(--oc-navy-10)!important;padding:var(--sp-4) var(--sp-6)!important;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2)}
.modal .modal-footer .btn+.btn{margin-left:0}
.modal-dialog{max-width:calc(100vw - 32px)}
.nav-tabs{background:var(--oc-surface)!important;border-bottom:2px solid var(--oc-navy-10)!important}
.nav-tabs>li>a{color:var(--oc-navy-80)!important;font-size:var(--fs-sm)!important;min-height:44px}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:var(--oc-navy)!important;border-bottom:3px solid var(--oc-orange)!important}

/* ---- legacy page bodies: keep them inside the column (Phase 2 rebuilds them) ---- */
/* row actions on one line; below 1200px wide tables scroll inside themselves instead of widening the page */
.oc-content td:has(>.oc-action){white-space:nowrap}
@media (max-width:1199px){
  .oc-content table.table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
.answers-title{margin-left:16px!important;color:var(--oc-navy)!important;font-size:var(--fs-lg)!important;font-weight:800!important;letter-spacing:0!important}
.label.label-success,.label.label-danger,.label.label-primary,.label.label-default,.label.label-warning{border:0}
.campaign-status-box-green{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs)!important;font-weight:700;border-radius:var(--r-pill);padding:4px 10px!important;line-height:1.2;background:rgba(27,144,102,.12)!important;color:var(--oc-success-text)!important;border:0!important}
.label::before,.campaign-status-box-green::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
/* the orange text that fails contrast on white (audit item 3) moves to navy; orange stays for buttons only */
.answers-list-answer,.presc-book-do,.report-action,.campaign-completed,.campaign-expires,.view-answers{color:var(--oc-navy)!important}
.btn-block{display:flex;width:100%}
.employees-header,.campaign-welcome,.answers-title{overflow-wrap:anywhere}
.pie-container{max-width:100%}

/* Tablet with sidebar (768-1023px): the content column is only 520-775px wide, so Bootstrap's sm grid is
   too tight; stack the legacy columns as on a phone. */
@media (min-width:768px) and (max-width:1023px){
  .oc-shell:not(.oc-shell--bare) .oc-content [class*="col-sm-"]{width:100%;float:none}
  .oc-shell:not(.oc-shell--bare) .oc-content [class*="col-sm-offset"]{margin-left:0}
  .oc-content [style*="table-cell"],.oc-content [style*="display: table"],.oc-content [style*="display:table"]{display:block!important;width:100%!important;float:none!important}
  .pie-container{min-width:0!important}
}

/* ==========================================================================
   Phone (<768px): navy header strip, fixed bottom tab bar, 16px gutters
   ========================================================================== */
@media (max-width:767px){
  :root{--oc-gutter:16px}
  .oc-shell{grid-template-columns:minmax(0,1fr)}
  .oc-side{display:none}
  .oc-top{height:auto;min-height:var(--oc-topbar-h);padding:calc(env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));gap:var(--sp-3);background:var(--oc-navy);border-bottom:0;color:#fff}
  .oc-top-logo{display:block}
  .oc-top-logo img,.oc-shell--bare .oc-top-logo img{width:132px} /* 30px tall, as in the approved phone mockups */
  .oc-top-title{font-size:var(--fs-base)!important;color:#fff}
  .oc-user{display:none}
  .oc-logout{color:#fff;width:44px;padding:0;justify-content:center}
  .oc-logout:hover{background:rgba(255,255,255,.1);color:#fff}
  .oc-logout-label{display:none}

  .oc-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1030;min-height:var(--oc-tabbar-h);padding:0 max(12px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(12px,env(safe-area-inset-left,0px));background:var(--oc-surface);border-top:1px solid var(--oc-border);box-shadow:0 -2px 12px rgba(11,62,96,.06)}
  .oc-tabbar a{flex:1 1 0;min-width:0;min-height:var(--oc-tabbar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--oc-navy-80);text-decoration:none;white-space:nowrap}
  .oc-tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .oc-tabbar a[aria-current="page"]{color:var(--oc-navy);font-weight:700;box-shadow:inset 0 3px 0 var(--oc-orange)}
  .oc-tabbar a[aria-current="page"] .oc-i{color:var(--oc-orange)}
  .oc-tabbar .oc-i{width:22px;height:22px}

  .main-content.oc-content{padding:var(--sp-4) max(16px,env(safe-area-inset-right,0px)) var(--sp-6) max(16px,env(safe-area-inset-left,0px))!important}
  .oc-shell:not(.oc-shell--bare) .main-content.oc-content{padding-bottom:calc(var(--oc-tabbar-h) + env(safe-area-inset-bottom,0px) + 24px)!important}
  .oc-phone-only{display:list-item!important}

  /* legacy bodies: no fixed widths wider than the column; tables scroll inside themselves */
  .oc-content .row{margin-left:0;margin-right:0}
  .oc-content [class*="col-"]{padding-left:0;padding-right:0}
  /* People/Invitations lay columns out with inline display:table-cell; stack them on a phone */
  .oc-content [style*="table-cell"],.oc-content [style*="display: table"],.oc-content [style*="display:table"]{display:block!important;width:100%!important;float:none!important}
  .oc-content [class*="col-"][style*="background-color:#fff"],.oc-content [class*="col-"][style*="background-color: #fff"]{padding-left:16px;padding-right:16px;border-radius:var(--r-lg)}
  /* row actions stay on one line inside the scrolling table */
  .oc-content td[align="center"]:has(.oc-action),.oc-content td:has(>.oc-action){white-space:nowrap}
  /* form buttons fill the column (row icon actions excluded) */
  .oc-content form .btn:not(.oc-action),.oc-content .btn-outline{width:100%;margin:0 0 var(--sp-2)!important}
  .employees-header{font-size:var(--fs-lg)!important;padding:16px 0 8px!important;line-height:1.25}
  .employees-header span{display:block;margin-top:8px}
  .answers-title{margin-left:0!important}
  /* jPList hides its whole panel (search, filters, pagination and the table header) under 600px; keep them */
  .oc-content div.jplist-panel{display:block}
  .oc-content thead.jplist-panel{display:table-header-group}
  .oc-content .jplist-ios-button{display:none!important}
  .presc-reading,.presc-intro,.presc-next-step,.presc-eos-tools,.presc-container [class$="-title"]{font-size:var(--fs-lg)!important;overflow-wrap:anywhere;line-height:1.25}
  .presc-container{padding:20px 16px!important}
  .oc-content table.table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .oc-content table.table>thead,.oc-content table.table>tbody{width:100%}
  .oc-content .table>thead>tr>th,.oc-content .table td{white-space:nowrap}
  /* Bootstrap's .table-responsive sets nowrap on every cell under 768px; let text wrap, keep headers and actions on one line */
  .oc-content .table td,.oc-content .table-responsive>.table>tbody>tr>td,.oc-content .table-responsive>.table>tr>td{white-space:normal;min-width:72px}
  .oc-content .table td:has(.oc-action){white-space:nowrap!important}
  .oc-content .answers-list .table td:first-child{min-width:220px}
  .oc-content .form-control{width:100%!important;display:block}
  .oc-content .input-group{display:flex;width:100%}
  .oc-content .input-group:not(:has(.input-group-addon)){flex-wrap:wrap;gap:var(--sp-2)}
  .oc-content .form-horizontal .form-group{margin-left:0;margin-right:0}
  .oc-content .input-group .form-control{flex:1;min-width:0}
  .oc-content .input-group-addon{width:auto;display:flex;align-items:center}
  .btn-outline,.no-results-container,.steps-nav-container{min-width:0!important;max-width:100%!important;width:auto!important}
  .no-results-container{width:100%!important}
  .pie-container{min-width:0!important}
  .btn{max-width:100%}
  .modal-dialog{margin:16px auto!important;width:auto}
  .oc-content .nav-tabs{display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .oc-content .nav-tabs>li{float:none;flex:none}
}

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

/* Contact Us (org7 Formstack embed, dashboard.php help view): readable message box, brand fields and button */
.main-content .ff-textarea{min-height:120px!important}
.main-content .ff-ext-textarea,.main-content .ff-textarea,.main-content .ff-input-type,.main-content .ff-picklist{border:1px solid var(--oc-border,#D5DEE8)!important;border-radius:8px!important;font-family:var(--oc-font)!important;font-size:15px!important;padding:10px 12px!important}
.main-content .ff-label,.main-content .ff-label-field{color:var(--oc-navy,#0B3E60)!important;font-family:var(--oc-font)!important;font-weight:600!important}
.main-content .ff-btn-submit{background:#FF7900!important;border:0!important;border-radius:999px!important;color:#fff!important;font-family:var(--oc-font)!important;font-weight:700!important;min-height:44px;padding:0 24px!important}
.main-content .employees-help{font-family:var(--oc-font)!important;font-size:15px!important;line-height:1.6!important}
/* Contact us card (dashboard.php help view) around the Formstack embed: no grey box, full card width */
.oc-help-card{background:var(--oc-surface,#fff);border:1px solid var(--oc-border,#D5DEE8);border-radius:var(--r-lg,16px);box-shadow:var(--sh-1,0 1px 2px rgba(11,62,96,.06));padding:28px 32px;max-width:760px}
.oc-help-card #dvFastForms,.oc-help-card #form1,.oc-help-card #dvBannerHTML,.oc-help-card #dvBannerHTML>div{width:100%!important;max-width:none!important}
.oc-help-card .ff-form-main{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;width:100%!important;max-width:none!important}
.oc-help-card .ff-page-row,.oc-help-card .ff-group-row,.oc-help-card .ff-footer-group,.oc-help-card .ff-item-row{padding-left:0!important;padding-right:0!important;width:100%!important;max-width:none!important}
.oc-help-card .ff-footer-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding-top:8px!important}
@media (max-width:767px){.oc-help-card{padding:20px}}
.oc-help-card .ff-group-row{margin:0!important;padding:0!important}
.oc-help-card .ff-item-row{width:100%!important;padding:0 0 16px!important} /* display untouched: Formstack hides internal fields (Owner, Case Origin, Record Type, Business Hours) inline */
.oc-help-card .ff-item-row:has(> .ff-section-col){display:none!important}
.oc-help-card .ff-label-col{width:auto!important;padding:0 0 6px!important}
.oc-help-card .ff-label{margin:0!important}
.oc-help-card .ff-field-col{padding:0!important;width:100%!important}
.oc-help-card .ff-input-type,.oc-help-card .ff-textarea{width:100%!important;box-sizing:border-box!important}
.oc-help-card .ff-footer-row{display:block!important;padding:0!important}
.oc-help-card .ff-submit-btn{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0!important;width:100%!important}
.oc-help-card .ff-btn-submit{margin:0!important}
/* Footer (copyright notice + policy links) at the very bottom of every dashboard page (legal review 2026-10-27):
   the content column is a flex column and the footer takes the remaining space above it. */
.main-content.oc-content{display:flex;flex-direction:column}
.main-content.oc-content>*{flex:0 0 auto}
.main-content.oc-content>.oc-dash-footer{margin-top:auto!important;width:100%}
.oc-dash-copy{margin:0 0 4px!important;font-size:13px!important;color:var(--oc-text-muted,#3D6580)!important}