/* =============================================================================
   mh-profileform.css  -  USER PROFILE Build 01: the shared ProfileForm (.pf-*).
   -----------------------------------------------------------------------------
   One form, two hosts: the My Profile overlay Profile tab and the standalone
   /profile-setup screen (.pf-screen). Field controls inherit the global
   .mh-app input/select/textarea theming (--mh-ctrl-* tokens); this file only
   adds layout, the photo block, the standalone screen frame, and the Save/
   Complete actions. Colours resolve from the global design tokens (mh-theme.css);
   no hardcoded brand hex. Light + dark via body.dark. Plain hyphens only.
   ========================================================================== */

.pf-loading{ padding:40px 8px; text-align:center; color:var(--mh-muted); font-size:14px; }

.pf{ display:flex; flex-direction:column; gap:22px; }

/* ---- photo (optional) ---- */
.pf-photo{ display:flex; align-items:center; gap:18px; }
.pf-av{ width:86px; height:86px; border-radius:50%; flex:none; position:relative; display:grid; place-items:center;
        background:linear-gradient(145deg,var(--mh-green),var(--mh-sidebar-2)); border:3px solid var(--mh-line); overflow:hidden; }
.pf-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:none; }
.pf-av.has img{ display:block; }
.pf-av .pf-ini{ display:grid; place-items:center; color:#FCFAF4; width:100%; height:100%; }
.pf-av .pf-ini svg{ width:46%; height:46%; }
.pf-photo-side{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pf-photo-name{ font-family:var(--mh-font-head); font-weight:600; font-size:18px; color:var(--mh-ink); }
.pf-photo-sub{ font-size:13px; color:var(--mh-muted); margin-bottom:5px; }
.pf-photo-btn{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; height:34px; padding:0 14px;
               border-radius:999px; cursor:pointer; background:var(--mh-ctrl-fill); border:1px solid var(--mh-ctrl-border);
               color:var(--mh-green-d); font-weight:700; font-size:12.5px; transition:background .15s ease, border-color .15s ease; }
.pf-photo-btn svg{ width:15px; height:15px; }
.pf-photo-btn:hover{ background:var(--mh-ctrl-fill-2); border-color:var(--mh-ctrl-focus-border); }
.pf-photo-hint{ font-size:11.5px; color:var(--mh-muted); margin-top:4px; }
body.dark .pf-photo-btn{ color:var(--mh-ctrl-selected); }

/* ---- sections + grid ---- */
.pf-section{ display:flex; flex-direction:column; gap:12px; }
.pf-sec-title{ margin:0; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mh-green-d); }
body.dark .pf-sec-title{ color:var(--mh-ctrl-selected); }
.pf-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.pf-fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.pf-span2{ grid-column:1 / -1; }
.pf-fld > label{ font-size:12.5px; font-weight:700; color:var(--mh-slate); }
body.dark .pf-fld > label{ color:var(--mh-ink); }
.pf-req{ color:var(--mh-clay); font-weight:800; }
.pf-help{ font-size:11.5px; color:var(--mh-muted); }
/* KICKOFF 18 (security): Department + Email are admin-managed, shown locked here.
   Grayed, disabled, with a lock-icon "managed by your administrator" note. */
.pf-fld input.pf-locked{ width:100%; background:var(--mh-ctrl-fill-2); color:var(--mh-muted);
                         border:1px dashed var(--mh-ctrl-border); cursor:not-allowed; opacity:1; }
.pf-fld input.pf-locked:focus{ box-shadow:none; }
.pf-lockhint{ display:flex; align-items:center; gap:5px; }
.pf-lockhint svg{ width:12px; height:12px; flex:none; }

/* The frozen date picker + the lookup dropdowns fill their field column. */
.pf-fld .dp{ width:100%; }
.pf-fld select{ width:100%; }

/* Required-but-empty cue on submit (server validation is authoritative). */
.pf .bad{ border-color:var(--mh-danger) !important; box-shadow:0 0 0 3px rgba(176,70,60,.18) !important; }

/* ---- in-form Save (My Profile overlay host) ---- */
.pf-actions{ display:flex; justify-content:flex-end; }
.pf-save{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px; border:none; border-radius:999px;
          cursor:pointer; background:var(--mh-green); color:#fff; font-family:inherit; font-weight:700; font-size:13.5px;
          box-shadow:0 6px 16px rgba(78,124,114,.32); transition:background .15s ease, transform .15s ease, box-shadow .15s ease; }
.pf-save svg{ width:17px; height:17px; }
.pf-save:hover{ background:var(--mh-green-d); transform:translateY(-1px); }
.pf-save:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

/* =============================================================================
   Standalone /profile-setup screen frame (the future first-login gate screen).
   Centered card on the cool page background; no sidebar, no topbar.
   ========================================================================== */
.pf-screen{ min-height:calc(100 * var(--mh-vh)); width:100%; display:grid; place-items:center; padding:32px 18px;
            background:radial-gradient(900px 520px at 50% -8%, color-mix(in srgb, var(--mh-green) 14%, transparent), transparent 60%), var(--mh-cream); }
.pf-card{ width:min(880px,100%); background:var(--mh-surface,var(--mh-cream-2)); border:1px solid var(--mh-line);
          border-radius:22px; box-shadow:0 30px 70px rgba(20,32,28,.18); overflow:hidden; display:flex; flex-direction:column;
          max-height:calc(calc(100 * var(--mh-vh)) - 64px); }
body.dark .pf-card{ box-shadow:0 30px 70px rgba(0,0,0,.45); }

.pf-head{ padding:26px 30px 20px; background:radial-gradient(440px 240px at 0% -20%, rgba(110,156,144,.30), transparent 62%),
          linear-gradient(150deg, var(--mh-sidebar), var(--mh-sidebar-2)); color:#EAF1ED; }
.pf-head-mk{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pf-head-mk img{ height:30px; width:auto; display:block; }
.pf-head-mk span{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(234,241,237,.82); }
.pf-head h1{ font-family:var(--mh-font-head); font-weight:600; font-size:26px; color:#FCFAF4; margin:0 0 6px; letter-spacing:-.4px; }
.pf-head p{ margin:0; font-size:13.5px; color:rgba(234,241,237,.86); max-width:60ch; }

.pf-scroll{ padding:24px 30px; overflow:auto; }

.pf-foot{ padding:16px 30px; border-top:1px solid var(--mh-line); display:flex; align-items:center; justify-content:space-between;
          gap:14px; background:var(--mh-cream-2); }
.pf-foot .pf-foot-note{ font-size:12px; color:var(--mh-muted); display:inline-flex; align-items:center; gap:7px; min-width:0; }
.pf-foot .pf-foot-note svg{ width:15px; height:15px; flex:none; color:var(--mh-green); }
.pf-complete{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 26px; border:none; border-radius:999px;
              cursor:pointer; background:var(--mh-green); color:#fff; font-family:inherit; font-weight:700; font-size:14px;
              white-space:nowrap; box-shadow:0 8px 20px rgba(78,124,114,.34); transition:background .15s ease, transform .15s ease; }
.pf-complete svg{ width:18px; height:18px; }
.pf-complete:hover{ background:var(--mh-green-d); transform:translateY(-1px); }
.pf-complete:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

@media (max-width:640px){
    .pf-grid{ grid-template-columns:1fr; }
    .pf-foot{ flex-direction:column-reverse; align-items:stretch; }
    .pf-complete{ justify-content:center; }
}