/* ===== PHS Roles Hub — Modern / Salesforce-style polish ===== */
.phs-auth-msg{max-width:900px;margin:24px auto;padding:16px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;}
.phs-hub{
  --ink:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --accent:#3b82f6; --accent2:#2563eb; --bg:#ffffff;
  --shadow:0 12px 34px rgba(2,6,23,.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.phs-hub .wrap{max-width:1040px;margin:0 auto;padding:48px 20px 72px;}
.phs-hub .hero{border:1px solid var(--line);border-radius:28px;background:
  radial-gradient(900px 320px at 18% -10%, rgba(59,130,246,.08), transparent 60%),
  radial-gradient(700px 260px at 92% 0%, rgba(37,99,235,.06), transparent 55%),
  #fff; box-shadow:var(--shadow); padding:28px 24px; margin-bottom:16px;}
.phs-hub .eyebrow{display:inline-flex;gap:10px;align-items:center;background:#f5f8fc;border:1px solid var(--line);
  color:var(--muted);padding:8px 12px;border-radius:999px;font-size:13px;letter-spacing:.2px;}
.phs-hub .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.phs-hub h1{font-size:28px;letter-spacing:-0.01em;margin:10px 0 6px;font-weight:700;}
.phs-hub .sub{color:var(--muted);}

/* Toolbar + tabs */
.phs-hub .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px;flex-wrap:wrap;}
.phs-hub .tabs.pills{display:flex;gap:10px;flex-wrap:wrap;}
.phs-hub .tabs .tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;
  font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(2,6,23,.06);}
.phs-hub .tabs .tab.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;}
.phs-hub .toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.phs-hub .pill{background:#f5f8fc;border:1px solid var(--line);border-radius:999px;padding:6px 10px;
  font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;}
.phs-hub .pill.tip-pill{border-style:dashed}

/* Cards */
.phs-hub .card{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.95);
  backdrop-filter: blur(8px); box-shadow:var(--shadow); padding:20px;}
.phs-hub .card h2{margin:0 0 12px;font-size:20px;}

/* Panels */
.grid.singlecol{display:block;}
/*.panel{display:none;margin-top:12px;}*/
.panel.active{display:block;}

/* Form grid & fields */
.phs-hub .phs-form .field{display:flex;flex-direction:column;margin-bottom:14px;}
.phs-hub .phs-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:780px){ .phs-hub .phs-form .field-row{grid-template-columns:1fr;} }
.phs-hub .phs-form label{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px;display:flex;gap:6px;align-items:center;}
.phs-hub .phs-form .hint{font-weight:600;color:#718198;font-size:12px}
.phs-hub .phs-form input,
.phs-hub .phs-form select,
.phs-hub .phs-form textarea{
  border:1px solid var(--line); border-radius:12px; padding:11px 12px; font:inherit; background:#fff; color:var(--ink);
  outline:none; transition:border .15s, box-shadow .15s, background .15s;
}
.phs-hub .phs-form input, .phs-hub .phs-form select{height:44px;}
.phs-hub .phs-form textarea{min-height:120px;resize:vertical;}
.phs-hub .phs-form input:focus, .phs-hub .phs-form select:focus, .phs-hub .phs-form textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

/* Buttons */
.phs-hub .btn{appearance:none;border:0;border-radius:14px;padding:12px 14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:transform .1s ease, box-shadow .2s ease;}
.phs-hub .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.25);}
.phs-hub .btn.primary:hover{transform:translateY(-1px);}
.phs-hub .btn.secondary{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 6px 16px rgba(2,6,23,.06);}
.phs-hub .btn.secondary:hover{transform:translateY(-1px);}
.phs-hub .btn.ghost{background:#fff;border:1px solid var(--line);}
.phs-hub .muted{color:var(--muted);}
.phs-hub .tip{margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:#f8fafc;color:var(--muted);}

/* Dropzone */
.phs-hub .dropzone{border:2px dashed var(--line);border-radius:16px;padding:22px;text-align:center;background:#fff;cursor:pointer;position:relative;min-height:120px;display:flex;align-items:center;justify-content:center;}
.phs-hub .dropzone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.phs-hub .dropzone .dz-instructions{color:var(--muted);font-size:14px;}
.phs-hub .dropzone.is-drag{border-color:var(--accent);background:linear-gradient(180deg,rgba(59,130,246,.06),transparent);}

/* Help pills */
.phs-hub .pills.help{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}

/* v1.7.2: ensure secondary buttons show dark text */
.phs-hub .btn.secondary{color:#0f172a!important;}
.phs-hub .btn.primary{color:#ffffff!important;}


/* v1.7.4: Ensure tab/button text is always visible (no hover-only labels) */
.phs-hub .tabs .tab:not(.active){ color: var(--ink) !important; opacity: 1 !important; }
.phs-hub .toolbar .btn, .phs-hub .toolbar .pill { color: var(--ink) !important; opacity: 1 !important; }
.phs-hub .tabs .tab{ text-shadow: none !important; }

/* v1.7.4: Editable combo box styles */
.phs-hub .phs-combo{border:1px solid var(--line); background:#fff; border-radius:12px; padding:6px; display:flex; flex-wrap:wrap; gap:6px; min-height:44px; align-items:center;}
.phs-hub .phs-combo input{border:0; outline:none; flex:1 1 160px; min-width:120px; height:32px; font:inherit; color:var(--ink); background:transparent;}
.phs-hub .phs-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#f1f5f9; border:1px solid var(--line); font-size:12px;}
.phs-hub .phs-chip button{appearance:none; border:0; background:transparent; cursor:pointer; font-size:16px; line-height:1; padding:0 2px; color:#334155;}
.phs-hub .phs-combo-list{position:relative;}
.phs-hub .phs-combo-options{position:absolute; z-index:50; margin-top:6px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); max-height:220px; overflow:auto; width:100%;}
.phs-hub .phs-combo-options[hidden]{display:none;}
.phs-hub .phs-combo-option{padding:8px 10px; cursor:pointer; font-size:14px;}
.phs-hub .phs-combo-option[aria-selected="true"], .phs-hub .phs-combo-option:hover{background:#f0f7ff;}