/* ── 08-access-control.css ── Login, badge, footer, About, audit, role gates ── */

/* Login overlay */
#loginOverlay{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(135deg,#0f5f39,#167a4a); }
#loginOverlay[hidden]{ display:none; }
.login-card{ width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:28px 26px; }
.login-card h2{ margin:0 0 4px; font-size:1.25rem; color:var(--ink); }
.login-card .login-sub{ margin:0 0 20px; color:var(--muted); font-size:.85rem; }
.login-card label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.login-card select{ width:100%; min-height:42px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:.92rem; margin-bottom:18px; }
.login-card .login-btn{ width:100%; min-height:46px; background:var(--green); color:#fff; border:none; border-radius:8px; font-weight:700; font-size:.95rem; cursor:pointer; }
.login-card .login-btn:hover{ background:var(--green-dark); }
.login-brand{ text-align:center; margin-bottom:18px; }
.login-brand .login-logo{ width:54px; height:54px; border-radius:12px; background:var(--green); display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; }
.login-foot{ margin-top:18px; text-align:center; font-size:.72rem; color:var(--muted); line-height:1.5; }
body.locked-out{ overflow:hidden; }

/* Header user badge — sits inline beside the company h1 inside .brand-title-row */
.brand-title-row{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; min-width:0; }
.brand-title-row h1{ margin:0; flex:0 1 auto; min-width:0; }
.auth-user-badge{ display:inline-flex; align-items:center; gap:7px; padding:3px 6px 3px 7px; border:1px solid var(--line); border-radius:20px; background:var(--bg); width:max-content; max-width:260px; flex-shrink:0; box-sizing:border-box; }
.auth-user-badge[hidden]{ display:none; }
.auth-user-badge .auth-avatar{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:var(--green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; }
.auth-user-badge .auth-meta{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.auth-user-badge .auth-name{ font-weight:700; font-size:.78rem; color:var(--ink); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-user-badge .auth-role{ font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.auth-logout-btn{ flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:6px; min-height:28px; padding:0 7px; cursor:pointer; font-size:.9rem; }
.auth-logout-btn:hover{ background:var(--bg); }

/* Footer */
.app-footer{ margin:28px 0 8px; padding:14px 18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; font-size:.74rem; color:var(--muted); }
.app-footer a{ color:var(--green); text-decoration:none; cursor:pointer; }
.app-footer a:hover{ text-decoration:underline; }
.app-footer .app-version-tag{ padding:2px 8px; border:1px solid var(--line); border-radius:12px; }

/* About modal */
#aboutModal{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.45); }
#aboutModal[hidden]{ display:none; }
.about-card{ width:min(440px,100%); background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:22px; }
.about-card h2{ margin:0 0 12px; }
.about-card dl{ margin:0 0 14px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.86rem; }
.about-card dt{ color:var(--muted); font-weight:600; }
.about-card dd{ margin:0; color:var(--ink); }
.about-card .about-legal{ font-size:.74rem; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; line-height:1.5; }
.about-card .about-close{ margin-top:14px; min-height:40px; width:100%; border:1px solid var(--line); background:var(--bg); border-radius:8px; cursor:pointer; font-weight:600; }

/* Audit log view */
#auditLogView{ padding:8px 0; }
.audit-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; }
.audit-wrap h2{ margin:0 0 4px; }
.audit-wrap .audit-sub{ margin:0 0 14px; color:var(--muted); font-size:.84rem; }
.audit-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.audit-table th, .audit-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.audit-table th{ color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.audit-table .al-action{ display:inline-block; padding:2px 8px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-weight:600; }
.audit-table .al-role{ color:var(--muted); font-size:.72rem; }

/* Role gating — Viewer is read-only */
body.role-viewer [type="submit"],
body.role-viewer .primary,
body.role-viewer #addAllocationBtn,
body.role-viewer .form-actions button:not([id^="cancel"]):not(#aboutCloseBtn):not(.auth-logout-btn){
  display:none !important;
}
body.role-viewer .team-add-row{ display:none !important; }
body.role-viewer .danger{ display:none !important; }
/* Viewer read-only banner hint */
body.role-viewer .ac-viewer-hint{ display:flex; }
.ac-viewer-hint{ display:none; align-items:center; gap:8px; margin:10px 0; padding:8px 12px; background:#fff7e6; border:1px solid #f0d9a0; border-radius:8px; font-size:.8rem; color:#81530d; }
html.dark .ac-viewer-hint{ background:#2a2410; border-color:#5a4a1a; color:#c47f2a; }

/* ── Owner Initialization Wizard ── */
#ownerWizard{ position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(135deg,#0f5f39,#167a4a); overflow:auto; }
#ownerWizard[hidden]{ display:none; }
.wizard-card{ width:min(440px,100%); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:28px 26px; }
.wizard-card h2{ margin:0 0 6px; font-size:1.2rem; color:var(--ink); }
.wizard-card label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin:10px 0 5px; }
.wizard-card input{ width:100%; min-height:40px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:.92rem; }
.wizard-card .pw-hint{ font-weight:400; color:var(--muted); font-size:.72rem; }
.login-error{ margin:12px 0 0; padding:8px 10px; background:#fdecec; border:1px solid #e6b3b3; border-radius:6px; color:#b83b3b; font-size:.8rem; }
html.dark .login-error{ background:#3a1f1f; border-color:#5a2a2a; color:#e05555; }

/* Login inputs (credential form) */
#loginUsername, #loginPassword{ width:100%; min-height:42px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:.92rem; margin-bottom:6px; }
.login-card label{ margin-top:8px; }

/* Password modal hint */
.pw-hint{ font-weight:400; color:var(--muted); font-size:.72rem; }
#passwordModal{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.45); }
#passwordModal[hidden]{ display:none; }
#passwordModal label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:5px; }

/* User management */
.um-table{ width:100%; border-collapse:collapse; font-size:.84rem; margin-bottom:18px; }
.um-table th, .um-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.um-table th{ color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.um-owner-tag{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:8px; background:var(--green); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.04em; }
.um-role{ min-height:32px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); padding:0 6px; }
.um-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.um-btn{ border:1px solid var(--line); background:var(--panel); border-radius:6px; min-height:30px; padding:0 10px; cursor:pointer; font-size:.78rem; }
.um-btn:hover{ background:var(--bg); }
.pill.um-inactive{ background:#f0e0e0; color:#8a4a4a; }
.um-add{ border-top:1px solid var(--line); padding-top:14px; }
.um-add h3{ margin:0 0 10px; font-size:.95rem; }
.um-add-grid{ display:grid; grid-template-columns:1.4fr 1fr .9fr 1fr auto; gap:8px; align-items:center; }
.um-add-grid input, .um-add-grid select{ min-height:38px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); padding:0 9px; font-size:.84rem; }
.um-add-grid .primary{ min-height:38px; }
.um-error{ margin-top:10px; padding:8px 10px; background:#fdecec; border:1px solid #e6b3b3; border-radius:6px; color:#b83b3b; font-size:.8rem; }
.um-denied{ padding:16px; background:#fff7e6; border:1px solid #f0d9a0; border-radius:8px; color:#81530d; font-size:.9rem; }
@media(max-width:760px){ .um-add-grid{ grid-template-columns:1fr 1fr; } }

/* ── Print copyright footer (req 10: printable documents) ───────────────────
   A discreet ownership line on every printed page. Uses a fixed footer so it
   appears on printed invoices, OTs and reports without altering their layout. */
@media print{
  body::after{
    content:"© 2026 Wael Fayad. All rights reserved.";
    position:fixed;
    bottom:6px; left:0; right:0;
    text-align:center;
    font-size:8pt;
    color:#666;
    letter-spacing:.02em;
  }
  /* Keep interactive-only chrome out of print. */
  #loginOverlay, #ownerWizard, #passwordModal, #aboutModal,
  .auth-user-badge, .app-footer{ display:none !important; }
}

/* Read-only notice for non-owner Company Profile / team views */
.cp-readonly-note{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; margin:8px 0;
  background:#fff7e6; border:1px solid #f0d9a0; border-radius:8px;
  font-size:.85rem; color:#81530d;
}
html.dark .cp-readonly-note{ background:#2a2410; border-color:#5a4a1a; color:#c47f2a; }

/* ── Recovery key modal (reuses About card styling) ─────────────────────────*/
#recoveryKeyModal{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.55); }
#recoveryKeyModal[hidden]{ display:none; }
.recovery-key-value{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:1.4rem; font-weight:700; letter-spacing:.08em; text-align:center;
  padding:16px; border:2px dashed var(--green); border-radius:10px;
  background:var(--bg); color:var(--ink); user-select:all; word-break:break-all;
}

/* ── Login link-style buttons (Forgot Password / Back) ──────────────────────*/
.login-linkbtn{
  display:block; width:100%; margin-top:10px; background:none; border:none;
  color:var(--green); font-size:.84rem; cursor:pointer; text-align:center; padding:6px;
}
.login-linkbtn:hover{ text-decoration:underline; }
.login-error{
  margin:8px 0 0; padding:8px 10px; border-radius:6px; font-size:.82rem;
  background:#fdeaea; color:#b83b3b; border:1px solid #f1c4c4;
}
html.dark .login-error{ background:#3a1f1f; border-color:#6a2f2f; color:#e88; }

/* ── User management: force-change + delete button ──────────────────────────*/
.um-force-change{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.84rem; color:var(--ink); cursor:pointer; }
.um-force-change input{ width:auto; min-height:0; }
.um-btn-danger{ border-color:#e1b8b8; background:#fff8f8; color:#b83b3b; }
.um-btn-danger:hover{ background:#fdeaea; }
html.dark .um-btn-danger{ background:#2a1717; border-color:#5a2f2f; color:#e88; }

/* ── Remember username checkbox on login ────────────────────────────────────*/
.login-remember{ display:flex; align-items:center; gap:8px; margin:4px 0 8px; font-size:.84rem; color:var(--ink); cursor:pointer; }
.login-remember input{ width:auto; min-height:0; }

/* ── Flagged legacy non-owner Director awaiting correction ──────────────────*/
.um-role-fix{ border-color:#e0a800; background:#fff8e1; color:#856404; font-weight:650; }
html.dark .um-role-fix{ background:#3a2f17; border-color:#6a5a2f; color:#e0c87a; }

/* ════════════════════════ Provider Invoice Import ══════════════════════════ */
#pInvImportModal{ position:fixed; inset:0; z-index:9700; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.5); }
#pInvImportModal[hidden]{ display:none; }
.pi-modal-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; width:min(1050px,96vw); max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow); padding:20px; }
.pi-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pi-modal-head h2{ margin:0; font-size:1.1rem; }
.pi-modal-close{ min-height:32px; padding:4px 10px; }
.pi-modal-sub{ font-size:.84rem; color:var(--muted); margin:6px 0 12px; }
.pi-sum{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pi-chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:650; background:var(--bg); border:1px solid var(--line); color:var(--ink); }
.pi-chip-ok{ background:#e7f3ec; color:var(--green-dark); border-color:#bfe0cb; }
.pi-chip-bad{ background:#f8e8e8; color:var(--red); border-color:#f1c4c4; }
.pi-table-wrap{ overflow:auto; flex:1; border:1px solid var(--line); border-radius:8px; }
.pi-table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.pi-table th, .pi-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.pi-table th{ position:sticky; top:0; background:var(--bg); color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.pi-table tr.pi-bad{ background:#fdf3f3; }
html.dark .pi-table tr.pi-bad{ background:#2a1717; }
.pi-errs{ margin-top:4px; font-size:.78rem; color:var(--red); line-height:1.35; }
.pi-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }