:root{color-scheme:light;--ink:#183044;--nav:#102d3d;--blue:#0d6670;--line:#dce5e9;--muted:#607680}*{box-sizing:border-box}body{margin:0;background:#f4f7f9;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}a{color:#075f79;overflow-wrap:anywhere}a:hover{text-decoration:underline}button,input,textarea,select{font:inherit}button,.link-button{cursor:pointer;display:inline-block;border-radius:8px;padding:10px 18px;font-weight:700;text-decoration:none;border:1px solid transparent;min-height:44px}.primary{background:var(--blue);color:#fff}.primary:hover{background:#09535b}.outline{background:#fff;color:#17495b;border-color:#b9ccd4}.danger-button{background:#a33328;color:#fff}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #398eaa;outline-offset:3px}h1,h2,h3{line-height:1.2;margin-top:0}h1{font-size:clamp(27px,3vw,36px);letter-spacing:-.035em;margin-bottom:10px}h2{font-size:21px}p{margin:8px 0 20px;color:var(--muted)}label{display:block;font-size:14px;font-weight:650;margin-bottom:16px}input,textarea,select{display:block;border:1px solid #bfcfd6;border-radius:7px;padding:10px 12px;background:#fff;color:var(--ink);width:100%;margin-top:6px;font-size:16px;min-width:0}textarea{resize:vertical}input[type=checkbox]{display:inline-block;width:19px;height:19px;vertical-align:middle;margin:0;accent-color:var(--blue);flex:none}input[type=file]{max-width:100%;font-size:14px}.shell{display:flex;min-height:100vh}.shell>aside{width:230px;flex:none;background:var(--nav);color:#fff;padding:30px 20px;display:flex;flex-direction:column;gap:24px}.side-name{font-size:30px;font-weight:900;color:#96df35}.side-name span{display:block;font-size:16px;color:#fff;font-weight:650}.shell nav a{display:block;padding:12px 10px;color:#c2d9e1;text-decoration:none;font-size:15px;border-radius:7px}.shell nav a:hover,.shell nav a[aria-current]{background:#214758;color:#fff}.side-bottom{margin-top:auto;font-size:14px}.side-bottom>span{display:block;margin-bottom:10px}.main{flex:1;min-width:0;max-width:1450px;padding:28px clamp(18px,3vw,48px) 32px}.main>header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}.logo{display:block;width:300px;height:auto;max-width:100%}.org{color:#637985;font-size:14px;text-align:right}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px;margin-bottom:22px;box-shadow:0 6px 24px #16364a06}.title-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.title-row p{margin:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.metrics>a{padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}.metrics span{display:block;font-size:14px;color:#617681}.metrics strong{font-size:36px;line-height:1.5}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.form-grid .wide{grid-column:1/-1}.actions{display:flex;justify-content:flex-end;margin-top:18px}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.two-col .panel{margin:0 0 22px}.search-form{display:flex;gap:14px;align-items:flex-end;margin-bottom:22px}.search-form label{margin:0}.search-form label:first-child{flex:1}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:650px}th{text-align:left;font-size:13px;color:#607884;background:#f6f9fb;padding:13px 15px}td{vertical-align:top;padding:16px 15px;border-top:1px solid #e6edf0;font-size:14px}td:first-child{max-width:450px}td strong{font-size:15px;font-weight:700}small,td small{display:block;font-size:13px;color:#6f828c;line-height:1.5;margin-top:4px}.status{display:inline-block;background:#edf4f5;color:#315e65;border-radius:20px;padding:5px 9px;white-space:nowrap;font-size:14px}.urgent{display:inline-block;background:#fff0ec;color:#a33c2d;font-size:13px;padding:2px 7px;margin-top:6px;border-radius:4px}.late{color:#a83629;font-weight:700}.empty{text-align:center;padding:45px 10px}.alert{background:#ffefea;color:#973728;border:1px solid #efc3b7;padding:15px;border-radius:9px;margin-bottom:20px}.notice{background:#eaf6f2;color:#245d51;padding:16px;border-radius:8px;margin-bottom:20px}.notice a{font-weight:700}.auth{max-width:620px;margin:45px auto;padding:0 20px}.auth>.logo{width:380px;margin:0 auto 24px}.auth .panel{padding:30px}.auth form>button{width:100%;margin-top:8px}.small{font-size:14px}.authenticator{background:#f3f8fa;padding:20px;border-radius:8px;margin-bottom:20px}.authenticator code,.notice code{display:block;font-size:18px;font-weight:700;overflow-wrap:anywhere;color:#153b4a}.narrow{max-width:660px}.verify{background:#f6f8fa;border:1px solid #e2eaf0;padding:18px;border-radius:8px;margin:18px 0;max-width:650px}.verify strong{display:block;font-size:14px;margin-bottom:12px}.verify label:last-child{margin-bottom:0}.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin-top:20px}.danger{border-color:#e4c8c2}.danger p{color:#784f47}.notes{margin-top:22px}.notes article{padding:16px 0;border-top:1px solid var(--line)}.notes p{white-space:normal;color:var(--ink);margin:0 0 5px}.import-list{max-height:550px;overflow:auto;margin-bottom:20px}.import-row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);margin:0}.import-row input{margin-top:5px}.import-row strong{font-size:15px}.import-row em{font-size:13px;color:#6a828a}.review-row{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding:13px 0}.review-row>a{flex:1}.staff{border-top:1px solid var(--line);padding:16px 0}.staff summary,details>summary{cursor:pointer;font-size:16px;font-weight:650}.staff form{padding:15px 0}.codes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:25px}.codes code{background:#f1f5f7;padding:10px;font-size:15px;overflow-wrap:anywhere}.prose{max-width:920px}.prose h2{margin-top:28px}.prose p{max-width:80ch}footer{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;color:#6b7e87}footer img{display:block;width:200px;max-width:100%;height:auto}
.import-row>span{flex:1;min-width:0}.import-row textarea{margin-top:0}.check{cursor:pointer}
@media(max-width:1000px){.shell>aside{width:200px}.metrics{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.main>header{align-items:flex-start}.org{max-width:180px}.logo{width:260px}}@media(max-width:760px){.shell{display:block}.shell>aside{width:100%;padding:14px 18px;display:block}.side-name{font-size:20px;display:flex;align-items:center;gap:12px}.side-name span{font-size:16px}.shell nav{display:flex;flex-wrap:wrap;margin-top:10px;gap:3px}.shell nav a{font-size:14px;padding:8px}.side-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.side-bottom>span{margin:0}.side-bottom button{padding:6px 12px;font-size:14px;min-height:36px}.main{padding:24px 16px}.main>header{margin-bottom:25px}.logo{width:220px}.org{font-size:13px;max-width:120px}.panel{padding:19px}.title-row{align-items:flex-start}.metrics{gap:10px}.metrics>a{padding:13px 18px}.search-form{flex-wrap:wrap}.search-form label:first-child{flex-basis:100%}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.review-row{flex-wrap:wrap}footer{flex-wrap:wrap}footer img{width:165px}.auth{margin-top:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}


/* =========================================================
   WORKFORCE CONNECT CC - FIVE STATUS TILES FIX
   Keep Open / Urgent / Overdue / Booked / Closed on one row.
   This rule is deliberately at the END of app.css so it wins
   over the older max-width:1000px two-column rule.
   ========================================================= */

@media (min-width:701px){
  .metrics{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .metrics > a{
    min-width:0 !important;
    padding:14px 16px !important;
  }

  .metrics span{
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .metrics strong{
    font-size:32px !important;
    line-height:1.35 !important;
  }
}

@media (max-width:700px){
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .metrics > a:last-child{
    grid-column:1 / -1 !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT CC - RAY & PAUL HEADER LOGO SIZE FIX
   ========================================================= */

.main > header .org-logo{
  display:block !important;
  width:92px !important;
  max-width:18% !important;
  height:68px !important;
  max-height:68px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

@media(max-width:760px){
  .main > header .org-logo{
    width:72px !important;
    height:54px !important;
    max-height:54px !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT CC - MATCH HEADER LOGO DEPTH
   Give Workforce Connect CC and Ray & Paul the same visual height.
   ========================================================= */

.main > header .logo,
.main > header .org-logo{
  height:78px !important;
  max-height:78px !important;
  width:auto !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

.main > header .logo{
  max-width:72% !important;
}

.main > header .org-logo{
  max-width:22% !important;
}

@media(max-width:760px){
  .main > header .logo,
  .main > header .org-logo{
    height:58px !important;
    max-height:58px !important;
  }

  .main > header .logo{max-width:72% !important;}
  .main > header .org-logo{max-width:24% !important;}
}


/* =========================================================
   WORKFORCE CONNECT CC - AUTO EXPANDING TEXT AREAS
   Long booking details / issue descriptions open to full height.
   ========================================================= */

textarea{
  overflow-y:hidden !important;
  resize:none !important;
  min-height:86px;
  height:auto;
}

.import-row textarea{
  min-height:58px;
}


/* =========================================================
   WORKFORCE CONNECT CC - TRUE AUTO EXPANDING TEXT AREAS
   Uses native CSS sizing so it works with the site's no-JS CSP.
   ========================================================= */

textarea{
  field-sizing:content !important;
  height:auto !important;
  min-height:86px !important;
  max-height:none !important;
  overflow:hidden !important;
  resize:none !important;
}

.import-row textarea{
  field-sizing:content !important;
  min-height:58px !important;
  max-height:none !important;
  overflow:hidden !important;
}