body.app-fade { animation: fadeIn .22s ease-out; }
@keyframes fadeIn { from{opacity:.25; transform:translateY(4px)} to{opacity:1; transform:none} }
a { color: var(--teal); text-decoration: none; }
.login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1d1d1b 0%,#282826 52%,#039298 160%); padding:32px; }
.login-card { width:min(460px,100%); background:#fff; border-top:5px solid var(--teal); border-radius:8px; padding:32px; box-shadow:0 24px 80px rgba(0,0,0,.28); }
.login-brand { font-size:30px; letter-spacing:7px; font-weight:700; color:var(--black); }
.login-eyebrow,.eyebrow { color:var(--teal); letter-spacing:2.5px; text-transform:uppercase; font-size:11px; font-weight:700; margin-top:8px; }
.login-card h1 { margin:10px 0 6px; }
.login-card p { color:var(--grey); margin-bottom:22px; }
.login-card input { margin:6px 0 16px; }
.alert { background:#fff4f4; color:#a20000; border:1px solid #f0b8b8; padding:10px 12px; border-radius:4px; margin:14px 0; font-size:13px; }
.demo-box { background:var(--teal-lt); border-left:4px solid var(--teal); padding:12px; margin-top:18px; font-size:12px; line-height:1.6; }
.primary-btn,.secondary-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:4px; padding:10px 16px; border:0; cursor:pointer; font-family:'Work Sans',sans-serif; font-weight:700; font-size:13px; }
.primary-btn { background:var(--teal); color:#fff; }
.primary-btn:hover { filter:brightness(.94); }
.secondary-btn { background:#fff; color:var(--black); border:1px solid var(--grey-mid); }
.primary-btn.small,.secondary-btn.small { padding:7px 11px; font-size:12px; }
.topbar { background:#ffffff; color:#000000; min-height:58px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:4px solid var(--teal); }
.topbar b { letter-spacing:4px; margin-right:14px; }
.topbar span { color:#000000; font-size:13px; }
.topbar a { color:#000000; }
.dashboard { max-width:1100px; margin:28px auto; padding:0 24px 60px; }
.hero { background:#fff; border:1px solid var(--grey-mid); border-left:5px solid var(--teal); border-radius:6px; padding:26px; display:flex; justify-content:space-between; gap:20px; box-shadow:0 8px 30px rgba(0,0,0,.04); }
.hero h1 { font-size:27px; margin:7px 0; }
.hero p { color:var(--grey); line-height:1.55; margin:0; }
.current-form { background:var(--black); color:#aaa; padding:16px 18px; border-radius:6px; min-width:230px; font-size:12px; }
.current-form b { color:var(--teal); font-size:15px; }
.packet-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:22px; }
.packet-card { background:#fff; border:1px solid var(--grey-mid); border-radius:6px; padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.04); }
.packet-title { font-size:18px; font-weight:700; color:var(--black); }
.packet-meta { color:var(--grey); font-size:12px; margin-top:4px; line-height:1.5; }
.status-pill { display:inline-flex; padding:4px 9px; border-radius:999px; background:var(--teal-lt); color:var(--teal); font-size:11px; font-weight:700; margin:10px 8px 8px 0; }
.status-pill.muted { background:#f1f1f1; color:#777; }
.progress-line { height:6px; background:#eee; border-radius:20px; overflow:hidden; margin:10px 0 14px; }
.progress-line span { display:block; height:100%; background:var(--teal); }
.packet-footer { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--grey); }
.admin-panel,.admin-reopen { max-width:1100px; margin:20px auto; background:#fff; border:1px solid var(--grey-mid); border-left:5px solid var(--black); border-radius:6px; padding:18px; }
.admin-panel form,.admin-reopen form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.admin-panel select,.admin-reopen select { max-width:280px; }
.admin-reopen input { max-width:360px; }
.app-toolbar { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--grey-mid); padding:12px 22px; display:flex; justify-content:space-between; gap:16px; align-items:center; box-shadow:0 4px 18px rgba(0,0,0,.04); }
.app-toolbar .sep { display:inline-block; width:1px; height:18px; background:var(--grey-mid); margin:0 12px; vertical-align:middle; }
.autosave-state { color:var(--grey); font-size:12px; margin-left:6px; }
.readonly-banner { background:#fff8df; color:#755900; border-left:4px solid #d4a900; padding:10px 16px; margin:0 auto 18px; max-width:900px; font-size:13px; }
.locked input,.locked select,.locked textarea { background:#f7f7f7 !important; color:#777 !important; }
.audit-table { width:100%; border-collapse:collapse; background:#fff; font-size:12px; }
.audit-table th { background:var(--black); color:#fff; text-align:left; padding:10px; }
.audit-table td { padding:9px 10px; border-bottom:1px solid #eee; vertical-align:top; }
.print-actions { position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid #ddd; padding:12px 20px; display:flex; gap:10px; justify-content:flex-end; }
.watermark { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; font-size:78px; font-weight:700; color:rgba(147,146,149,.16); transform:rotate(-24deg); pointer-events:none; z-index:5; letter-spacing:4px; }
body.print-mode .nav-bar, body.print-mode .print-actions { display:none; }
body.print-mode .form-section { display:block !important; page-break-after:always; }
body.print-mode .form-section.print-hidden { display:none !important; }
body.print-mode .content { max-width:960px; margin:22px auto; }
@media print { .print-actions,.app-toolbar,.admin-reopen,.nav-bar { display:none !important; } .form-section { display:block !important; page-break-after:always; } .form-section.print-hidden{display:none!important;} body{background:#fff;} .content{margin:0 auto; padding-bottom:0;} .watermark{position:fixed;} }
@media (max-width:800px){ .app-toolbar,.hero,.topbar{flex-direction:column; align-items:flex-start;} .app-toolbar{position:relative;} .packet-footer{flex-direction:column; align-items:flex-start; gap:10px;} }
/* v3 workflow + staff master additions */
.workflow-panel { max-width:1100px; margin:18px auto; padding:18px 22px; background:#fff; border:1px solid var(--grey-mid); border-left:5px solid var(--teal); border-radius:7px; display:grid; grid-template-columns:1.4fr 1fr; gap:18px; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.workflow-panel h3 { margin:5px 0 8px; }
.workflow-panel p { margin:5px 0; color:#555; font-size:13px; }
.form-state-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:stretch; }
.form-state { border:1px solid #e1e1e1; border-radius:6px; padding:9px; background:#fafafa; font-size:11px; min-height:68px; }
.form-state b { display:block; margin-bottom:6px; color:var(--black); }
.form-state span { display:block; color:var(--grey); }
.form-state em { display:inline-block; margin-top:5px; font-style:normal; background:var(--teal); color:#fff; padding:2px 7px; border-radius:999px; font-size:10px; }
.form-state.submitted { background:var(--teal-lt); border-color:var(--emp-border); }
.form-state.open { box-shadow:0 0 0 2px rgba(3,146,152,.18); }
.form-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.mini-chip { font-size:10px; padding:3px 7px; border-radius:999px; border:1px solid #ddd; background:#fff; color:#666; }
.mini-chip.done { background:var(--teal-lt); border-color:var(--emp-border); color:var(--teal); font-weight:700; }
.editable-banner { background:var(--teal-lt); color:#075f63; border-left:4px solid var(--teal); padding:10px 16px; margin:0 auto 18px; max-width:900px; font-size:13px; }
.role-locked input,.role-locked select,.role-locked textarea { background:#f7f7f7 !important; color:#777 !important; }
.csv-form textarea { width:100%; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; margin-bottom:12px; }
.table-scroll { overflow:auto; }
.hierarchy-tree, .hierarchy-tree ul { list-style:none; margin:0; padding-left:20px; }
.hierarchy-tree > li { padding-left:0; }
.tree-node { background:#fff; border:1px solid var(--grey-mid); border-left:4px solid var(--teal); border-radius:5px; padding:10px 12px; margin:8px 0; }
.tree-node b { display:block; }
.tree-node span { display:block; color:var(--grey); font-size:12px; margin-top:3px; }
@media (max-width:900px){ .workflow-panel{grid-template-columns:1fr;} .form-state-grid{grid-template-columns:repeat(2,1fr);} }

/* v3.1 polish patch based on review feedback */
.login-logo-img { display:block; width: min(360px, 100%); height:auto; object-fit:contain; margin: 0 0 18px; }
.login-form { margin-top: 18px; }
.sign-in-btn { margin-top: 12px; min-width: 132px; }
.user-strip { display:flex; align-items:center; gap:14px; }
.logout-btn { display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--black) !important; border-radius:999px; padding:7px 13px; font-size:12px; font-weight:700; border:1px solid rgba(255,255,255,.35); }
.logout-btn:hover { background:var(--teal-lt); color:var(--teal) !important; }
.topbar-title { letter-spacing:.3px !important; font-size:18px; font-weight:700; }
.secondary-btn.dark { background:transparent; color:#000000 !important; border-color:rgba(0,0,0,.36); }
.admin-action-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }

/* Sticky ERALDA header and toolbar */
.app-toolbar { top:0; z-index:120; }
#packetApp .page-header { position:sticky; top:58px; z-index:110; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.workflow-panel { margin-top:22px; }

.toolbar-left { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.toolbar-left .status-pill { margin-left:8px; margin-right:8px; }
.toolbar-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.primary-btn.small, .secondary-btn.small { margin:0; }

.workflow-panel { grid-template-columns: 1.1fr 1.2fr; align-items:start; }
.workflow-details { display:grid; grid-template-columns: 160px 1fr; row-gap:8px; column-gap:14px; margin:12px 0 0; }
.workflow-details div { display:contents; }
.workflow-details dt { color:var(--grey); font-size:11px; text-transform:uppercase; letter-spacing:1.2px; font-weight:700; }
.workflow-details dd { margin:0; color:var(--black); font-size:13px; font-weight:600; }
.form-state-grid { align-items:stretch; }
.form-state { display:flex; flex-direction:column; justify-content:space-between; gap:3px; }

.panel-title-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.panel-title-row h3 { margin:0 0 4px; font-size:20px; font-weight:700; letter-spacing:.2px; }
.panel-title-row p { margin:0; color:var(--grey); font-size:13px; }
.hier-edit-bar { display:none; align-items:center; flex-wrap:wrap; gap:10px; background:var(--teal-lt); border-left:4px solid var(--teal); padding:12px 14px; margin:12px 0 16px; border-radius:4px; font-size:13px; }
.hierarchy-panel.editing .hier-edit-bar { display:flex; }
.hierarchy-dropzone { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.hier-country { border:1px solid var(--grey-mid); border-radius:8px; background:#fff; overflow:hidden; }
.hier-country > h3 { background:var(--black); color:var(--white); margin:0; padding:12px 16px; font-size:15px; letter-spacing:.5px; }
.hier-dept { padding:14px 16px 10px; border-top:1px solid #ececec; }
.hier-dept h4 { margin:0 0 8px; font-size:12px; color:var(--teal); text-transform:uppercase; letter-spacing:1.4px; }
.tree-node { cursor:default; transition:transform .15s, box-shadow .15s, border-color .15s; }
.tree-node small { display:block; color:#aaa; font-size:10px; margin-top:4px; }
.hierarchy-panel.editing .tree-node { cursor:grab; }
.hierarchy-panel.editing .tree-node:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.tree-node.dragging { opacity:.45; }
.tree-node.drop-target { border-color:var(--teal); box-shadow:0 0 0 3px rgba(3,146,152,.18); }
#hierMsg { color:var(--teal); font-weight:700; }

@media (max-width:800px){
  #packetApp .page-header { top:0; position:relative; }
  .app-toolbar { position:relative; }
  .workflow-details { grid-template-columns:1fr; }
  .workflow-details div { display:block; }
  .workflow-details dd { margin:2px 0 8px; }
  .toolbar-actions { justify-content:flex-start; }
}


/* v3.2 bugfix + spacing patch */
.login-card input { display:block; width:100%; margin:8px 0 18px; }
.login-form .primary-btn, .sign-in-btn { margin-top:18px; }
.primary-btn, .secondary-btn { margin:4px 6px 4px 0; }
.toolbar-actions { gap:18px; }
.toolbar-left { gap:16px; }
.toolbar-left .status-pill { margin-left:12px; margin-right:12px; }
.admin-panel form, .admin-reopen form, .csv-form { gap:16px; }
.admin-action-row { gap:18px; }
.hier-edit-bar { gap:16px; }
.panel-title-row .secondary-btn { margin-left:12px; }
button + button, a.secondary-btn + button, button + a.secondary-btn, .secondary-btn + .secondary-btn { margin-left:8px; }
.tree-node.invalid-drop { border-color:#c92a2a !important; box-shadow:0 0 0 3px rgba(201,42,42,.15) !important; }
#hierMsg { display:inline-block; line-height:1.45; }

/* v3.3 workflow / hierarchy / login polish */
.current-form { background:#f2f3f3 !important; color:#5f6062 !important; border:1px solid #dadcdd; box-shadow:none; }
.current-form b { color:var(--black) !important; }
.workflow-panel.merged-info { grid-template-columns:1.35fr 1fr; }
.employee-workflow-details { grid-template-columns: 150px 1fr 150px 1fr; }
.employee-workflow-details dt { align-self:start; }
.employee-workflow-details dd { align-self:start; }
#packetApp .info-bar { display:none !important; }

.login-shell { background:
  radial-gradient(circle at 18% 10%, rgba(3,146,152,.28), transparent 34%),
  linear-gradient(135deg,#111 0%,#252523 48%,#039298 155%); }
.login-card { width:min(500px,100%); border-radius:14px; padding:38px 42px 34px; position:relative; overflow:hidden; }
.login-card::before { content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--teal),#5bbfc4,var(--teal)); }
.login-card::after { content:""; position:absolute; right:-80px; top:-80px; width:180px; height:180px; border-radius:999px; background:rgba(3,146,152,.07); pointer-events:none; }
.login-logo-img { width:min(390px,100%); margin-bottom:20px; }
.login-eyebrow { color:var(--teal); letter-spacing:4px; font-size:11px; font-weight:800; text-transform:uppercase; margin-bottom:8px; }
.login-card h1 { font-size:30px; line-height:1.1; margin:10px 0 12px; }
.login-card p { font-size:14px; margin-bottom:24px; }
.login-form { display:grid; grid-template-columns:1fr; gap:8px; }
.login-card input { border-radius:4px; padding:11px 12px; }
.sign-in-btn { min-height:44px; width:150px; justify-self:end; box-shadow:0 8px 16px rgba(3,146,152,.22); }
.demo-box { border-radius:0 0 8px 0; }

.hier-search-panel { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:16px; align-items:end; background:#fafafa; border:1px solid #e2e2e2; border-radius:8px; padding:14px; margin:12px 0 16px; }
.hier-search-panel input,.hier-search-panel select { width:100%; }
#hierSearchMsg { color:var(--teal); font-weight:700; font-size:12px; align-self:center; }
#hierSearchMsg.error-text, #hierMsg.error-text { color:#c92a2a; }
.tree-node.search-hit { border-color:var(--teal); box-shadow:0 0 0 3px rgba(3,146,152,.15); }
.tree-node.search-dim { opacity:.35; }

@media (max-width:1000px){
  .employee-workflow-details { grid-template-columns:140px 1fr; }
  .hier-search-panel { grid-template-columns:1fr; }
  .sign-in-btn { justify-self:stretch; width:100%; }
}

/* v3.4 UI / workflow fixes */
.print-mode #packetApp .page-header,
.export-shell #packetApp .page-header { position: static !important; top: auto !important; box-shadow:none !important; }
.print-mode .content { margin-top: 24px !important; }
.export-shell { background:#fff; min-height:100vh; }
.print-actions { position: sticky; top:0; z-index:300; display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:14px 24px; background:#ffffff; border-bottom:1px solid #ddd; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.print-actions .print-hint { color:#666; font-size:12px; }
.print-mode .watermark { position: fixed; inset: 35% auto auto 14%; transform: rotate(-18deg); font-size:72px; font-weight:800; color:rgba(0,0,0,.06); letter-spacing:4px; pointer-events:none; z-index:10; }
@media print { .print-actions { display:none!important; } .watermark { color:rgba(0,0,0,.08)!important; } #packetApp .page-header { position:static!important; } }

.workspace-group { margin:26px 0 34px; }
.workspace-group > h2 { font-size:18px; letter-spacing:.3px; border-left:5px solid var(--teal); padding-left:14px; margin:0 0 14px; }
.workspace-dept { margin:16px 0 22px; }
.workspace-dept > h3 { font-size:12px; text-transform:uppercase; letter-spacing:1.8px; color:var(--grey); margin:0 0 12px; }
.empty-state { background:#fff; border:1px solid #ddd; border-radius:8px; padding:24px; color:#666; }

.inline-admin-form { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.inline-admin-form select, .inline-admin-form input { min-width:220px; }
.row-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.row-actions form { margin:0; }
.staff-edit-form { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:16px; align-items:end; }
.staff-edit-form input, .staff-edit-form select { width:100%; }
.staff-edit-actions { grid-column:1/-1; display:flex; gap:16px; align-items:center; }
.muted-note { color:#777; font-size:12px; margin-top:10px; }

.login-loading { position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; background:rgba(255,255,255,.92); z-index:50; text-align:center; }
.login-loading.show { display:flex; }
.loader-ring { width:42px; height:42px; border-radius:50%; border:4px solid #d8eeee; border-top-color:var(--teal); animation: eraldaSpin .8s linear infinite; }
.login-loading b { font-size:15px; }
.login-loading span { color:#777; font-size:12px; }
@keyframes eraldaSpin { to { transform:rotate(360deg); } }
.login-card { position:relative; }

.primary-btn, .secondary-btn, .logout-btn { white-space:nowrap; }
button.primary-btn.small, a.secondary-btn.small, button.secondary-btn.small { margin-right:10px; margin-bottom:8px; }

/* v3.5 refinements requested from UI review */
.form-state { min-height:78px; }
.form-state em { order:1; align-self:flex-start; margin-top:0; margin-bottom:4px; }
.form-state span { order:2; }
.form-state b { order:0; }
.subordinate-tag { display:inline-flex; vertical-align:middle; margin-left:10px; padding:4px 10px; border-radius:999px; background:#e6f7f7; color:var(--teal); border:1px solid var(--emp-border); font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.packet-card { min-height:226px; display:flex; flex-direction:column; justify-content:space-between; }
.packet-grid { align-items:stretch; }
.staff-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start; }
.staff-card { background:#fff; border:1px solid var(--grey-mid); border-radius:8px; padding:16px; box-shadow:0 8px 22px rgba(0,0,0,.035); overflow:hidden; }
.staff-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:10px; }
.staff-card-head b { display:block; font-size:17px; color:var(--black); }
.staff-card-head span { color:var(--grey); font-size:11px; font-weight:700; letter-spacing:1px; }
.staff-card-meta { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.staff-card-meta span { border:1px solid #ddd; background:#fafafa; border-radius:999px; padding:3px 8px; font-size:11px; color:#666; }
.staff-card p { margin:8px 0; font-size:13px; }
.staff-inline-edit { display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-6px); transition:grid-template-rows .22s ease, opacity .22s ease, transform .22s ease, margin .22s ease; margin-top:0; }
.staff-inline-edit.open { grid-template-rows:1fr; opacity:1; transform:translateY(0); margin-top:14px; }
.staff-inline-edit > form, .staff-inline-edit > p { overflow:hidden; }
.staff-inline-edit .staff-edit-form { padding-top:14px; border-top:1px solid #eee; }
.staff-table-details { margin-top:18px; }
.staff-table-details summary { cursor:pointer; font-weight:700; color:var(--teal); padding:10px 0; }
.link-user-form select { min-width:230px; max-width:280px; }
.add-goal-btn { position:relative; z-index:2; }

/* v3.6 confirmation modal and admin polish */
.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(29,29,27,.45); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.modal-overlay.show { opacity:1; pointer-events:auto; }
.confirm-modal { width:min(520px, calc(100vw - 36px)); background:#fff; border-top:5px solid var(--teal); border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.28); transform:translateY(12px) scale(.98); transition:transform .18s ease; padding:24px; }
.modal-overlay.show .confirm-modal { transform:translateY(0) scale(1); }
.confirm-modal h3 { margin:0 0 8px; font-size:20px; }
.confirm-modal p { margin:0; color:#555; line-height:1.55; }
.confirm-modal .modal-actions { display:flex; justify-content:flex-end; gap:14px; margin-top:22px; }
.hidden-by-rule { display:none !important; }
.staff-search { min-width:280px; max-width:360px; }
.staff-country-group { margin-top:24px; }
.staff-country-group h4 { border-left:4px solid var(--teal); padding-left:12px; font-size:18px; margin:0 0 14px; }
.staff-dept-title { color:var(--grey); letter-spacing:2px; font-size:11px; text-transform:uppercase; font-weight:700; margin:14px 0 10px; }
.create-user-form { display:grid; grid-template-columns:1.3fr .8fr 1.5fr auto; gap:14px; align-items:end; margin-bottom:18px; background:#f7f7f5; border:1px solid #e1e1e1; border-radius:8px; padding:14px; }
@media (max-width:900px){ .create-user-form{grid-template-columns:1fr;} .staff-search{max-width:100%; width:100%;} }

/* v3.8 document export, hierarchy connector lines, unsaved prompt polish */
.document-export { background:#ececea; padding-bottom:60px; }
.doc-page { max-width:980px; margin:34px auto; background:#fff; border:1px solid #d9d9d9; box-shadow:0 18px 50px rgba(0,0,0,.12); padding:42px 48px; color:#1d1d1b; position:relative; }
.doc-header { display:flex; gap:28px; align-items:center; border-bottom:4px solid var(--teal); padding-bottom:22px; margin-bottom:26px; }
.doc-header img { width:220px; max-width:36%; height:auto; object-fit:contain; }
.doc-header h1 { font-size:28px; margin:6px 0; }
.doc-header p { color:#777; margin:0; font-weight:600; }
.doc-summary { margin-bottom:28px; }
.doc-summary h2 { font-size:22px; margin:0 0 14px; }
.doc-section { break-inside:avoid; margin:28px 0; border:1px solid #d8d8d8; border-radius:6px; overflow:hidden; }
.doc-section-head { display:flex; justify-content:space-between; gap:18px; align-items:center; background:#1d1d1b; color:#fff; padding:14px 18px; }
.doc-section-head h3 { color:#fff; font-size:18px; margin:0; }
.doc-section-head span { background:#e6f7f7; color:var(--teal); border-radius:999px; padding:5px 10px; font-size:11px; font-weight:800; white-space:nowrap; }
.doc-section h4 { margin:18px 18px 12px; color:var(--teal); text-transform:uppercase; letter-spacing:1.6px; font-size:12px; }
.doc-kv, .doc-table { width:100%; border-collapse:collapse; margin:0; }
.doc-kv th, .doc-kv td, .doc-table th, .doc-table td { border:1px solid #dedede; padding:10px 12px; vertical-align:top; font-size:12px; text-align:left; }
.doc-kv th, .doc-table th { background:#f5f5f5; font-weight:800; color:#333; width:22%; }
.doc-table th { background:#1d1d1b; color:#fff; }
.doc-section .doc-kv, .doc-section .doc-table { margin:0 18px 18px; width:calc(100% - 36px); }
.doc-muted, .doc-note { margin:0 18px 18px; color:#666; font-size:12px; line-height:1.6; }
.doc-watermark { position:fixed; left:50%; top:45%; transform:translate(-50%,-50%) rotate(-20deg); font-size:76px; font-weight:900; color:rgba(3,146,152,.08); letter-spacing:8px; pointer-events:none; z-index:1; text-transform:uppercase; }
.doc-page { z-index:2; }
@media print { .document-export { background:#fff; } .doc-page { margin:0; box-shadow:none; border:none; padding:18mm 14mm; max-width:none; } .doc-section { page-break-inside:avoid; } .doc-header img { width:170px; } .doc-watermark { color:rgba(3,146,152,.09)!important; } }

/* Hierarchy connector lines without changing card alignment */
.hierarchy-tree ul { position:relative; margin-left:8px; padding-left:28px; border-left:2px solid rgba(3,146,152,.28); }
.hierarchy-tree li { position:relative; }
.hierarchy-tree ul > li::before { content:""; position:absolute; left:-28px; top:28px; width:24px; height:2px; background:rgba(3,146,152,.28); }
.hierarchy-tree ul > li:last-child::after { content:""; position:absolute; left:-30px; top:30px; bottom:0; width:4px; background:#fff; }
.hierarchy-tree .tree-node { position:relative; z-index:1; }

@media (max-width:700px){ .doc-page{padding:26px 20px;} .doc-header{display:block;} .doc-header img{max-width:100%; width:210px; margin-bottom:18px;} }

/* v3.9 manager workspace choice modal */
.choice-overlay { position:fixed; inset:0; background:rgba(29,29,27,.42); backdrop-filter:blur(9px); display:none; align-items:center; justify-content:center; z-index:9999; opacity:0; transition:opacity .2s ease; }
.choice-overlay.show { display:flex; opacity:1; }
.choice-modal { width:min(560px, calc(100vw - 36px)); background:#fff; border-top:5px solid var(--teal); border-radius:14px; box-shadow:0 28px 90px rgba(0,0,0,.26); padding:30px; transform:translateY(8px); animation:choiceIn .22s ease forwards; }
.choice-modal h2 { margin:8px 0 10px; font-size:25px; }
.choice-modal p { color:#666; line-height:1.55; margin:0 0 22px; }
.choice-actions { display:flex; gap:14px; justify-content:flex-end; flex-wrap:wrap; }
@keyframes choiceIn { from{opacity:.2; transform:translateY(14px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }

.modal-actions.single{justify-content:flex-end;}
.doc-sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:22px;}
.doc-sign-box{min-height:96px;padding:18px 0 4px;}
.doc-sign-box:first-child{padding-left:18px;}
.doc-sign-line{border-bottom:1.6px solid #1d1d1b;height:34px;margin-bottom:10px;}
.doc-sign-box b{display:block;font-size:12px;color:#1d1d1b;}
.doc-sign-box span{display:block;font-size:11px;color:#777;margin-top:2px;}
@media print{.doc-sign-section{break-inside:avoid;}.doc-sign-grid{grid-template-columns:1fr 1fr;}}


/* Wider layout for management / admin pages with large datasets and operational controls. */
.dashboard.admin-wide { max-width:1580px; }
.dashboard.admin-wide .admin-panel { width:100%; box-sizing:border-box; }
.dashboard.admin-wide .table-scroll { width:100%; }
@media (max-width:900px){ .dashboard.admin-wide { max-width:1100px; } }

/* Verified fix: make every direct admin section align with the responsive wide admin container. */
.dashboard.admin-wide {
  width: min(92vw, 1680px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.dashboard.admin-wide > .hero,
.dashboard.admin-wide > .admin-panel,
.dashboard.admin-wide > section,
.dashboard.admin-wide > form,
.dashboard.admin-wide > table,
.dashboard.admin-wide .admin-panel,
.dashboard.admin-wide .admin-reopen,
.dashboard.admin-wide .notif-card,
.dashboard.admin-wide .queue-dock,
.dashboard.admin-wide .template-panel,
.dashboard.admin-wide .staff-admin-shell,
.dashboard.admin-wide .user-accounts-panel,
.dashboard.admin-wide .staff-master-panel {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.dashboard.admin-wide .table-scroll,
.dashboard.admin-wide .audit-table,
.dashboard.admin-wide .smtp-vertical-form,
.dashboard.admin-wide .template-form {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .dashboard.admin-wide {
    width: calc(100vw - 28px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Admin dashboard responsive wide layout patch */
.dashboard.admin-dashboard .packet-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.dashboard.admin-dashboard .packet-card {
  min-width: 0;
}
.dashboard.admin-dashboard .admin-action-row {
  align-items: center;
}
@media (max-width:900px){
  .dashboard.admin-dashboard .packet-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin review packet finder */
.review-packet-filter{margin-top:20px!important;margin-bottom:22px!important;}
.review-filter-grid{display:grid;grid-template-columns:minmax(360px,2fr) repeat(3,minmax(170px,1fr)) auto;gap:14px;align-items:end;margin-top:16px;}
.review-filter-grid input,.review-filter-grid select{width:100%;max-width:none!important;box-sizing:border-box;}
.review-filter-actions{display:flex;align-items:flex-end;}
.review-filter-status{margin-top:14px;color:var(--grey);font-size:13px;font-weight:700;}
@media(max-width:1100px){.review-filter-grid{grid-template-columns:2fr 1fr 1fr;}.review-filter-search{grid-column:span 2;}.review-filter-actions{align-self:end;}}
@media(max-width:700px){.review-filter-grid{grid-template-columns:1fr;}.review-filter-search{grid-column:auto;}.review-filter-actions .secondary-btn{width:100%;}}

.mini-chip.locked { background:#f1f5f9; border-color:#cbd5e1; color:#64748b; font-weight:700; }
.form-state.locked { opacity:.72; background:#f8fafc; }
.form-state.locked span { color:#64748b; }


/* Super Admin global quick navigation and combined topbar/menu dock. */
.super-admin-quick-nav {
  position:relative;
  z-index:120;
  width:100%;
  box-sizing:border-box;
  padding:10px 0 11px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(29,29,27,.12);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.super-admin-quick-nav-inner {
  width:min(96vw,1840px);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding:0 2px 2px;
  box-sizing:border-box;
}
.super-admin-nav-link {
  flex:0 0 auto;
  white-space:nowrap;
  min-height:36px;
  padding:8px 14px;
  border-color:rgba(29,29,27,.16);
  background:#fff;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.super-admin-nav-link:hover {
  border-color:rgba(3,146,152,.48);
  color:var(--teal);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(3,146,152,.10);
}
.super-admin-nav-link.active,
.super-admin-nav-link[aria-current="page"] {
  background:var(--teal-lt);
  color:var(--teal);
  border-color:rgba(3,146,152,.42);
  box-shadow:inset 0 0 0 1px rgba(3,146,152,.08);
}
.super-admin-shell-dock {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:650;
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease,opacity .18s ease;
  will-change:transform,opacity;
}
.super-admin-shell-dock.show {
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.super-admin-shell-dock-inner {
  width:100%;
  margin:0;
}
.super-admin-shell-dock .topbar {
  width:100%;
  box-sizing:border-box;
  box-shadow:none;
}
.super-admin-shell-dock .super-admin-quick-nav {
  box-shadow:none;
  border-bottom:3px solid var(--teal);
}
@media (prefers-reduced-motion: reduce) {
  .super-admin-shell-dock,
  .super-admin-nav-link { transition:none; }
}
@media (max-width:700px) {
  .super-admin-quick-nav { padding:8px 0 9px; }
  .super-admin-quick-nav-inner { width:calc(100vw - 20px); gap:8px; }
  .super-admin-nav-link { min-height:34px; padding:7px 11px; }
}