/* ============================================================
   SAFENTRA DESIGN SYSTEM — LAYOUT
   Application shell: header, sidebar, workspace, footer,
   breadcrumb, page header, drawers, scrims, auth layout.
   ============================================================ */

/* ================= APPLICATION SHELL ================= */
.shell{display:none;min-height:100vh;flex-direction:column}
.shell.on{display:flex}

.shell-body{flex:1;display:flex;min-height:0}

/* ================= HEADER ================= */
.hdr{
  position:sticky;top:0;z-index:var(--z-header);
  display:flex;align-items:center;gap:var(--sp-4);
  height:var(--header-h);padding:0 var(--sp-5);
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
}
.hdr-l{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.hdr-c{flex:1;display:flex;justify-content:center;min-width:0}
.hdr-r{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}

.burger{display:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand:hover{text-decoration:none}
.brand-mark{width:32px;height:32px;flex:none}
.brand-tx{line-height:1.15;white-space:nowrap}
.brand-name{display:block;font-size:15px;font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--color-text)}
.brand-sub{display:block;font-size:var(--text-2xs);font-weight:var(--fw-medium);color:var(--color-text-3);letter-spacing:.04em;text-transform:uppercase}

.hdr-div{width:1px;height:26px;background:var(--color-border);margin:0 var(--sp-2)}

/* Header context selectors */
.ctxsel{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;
  border:1px solid var(--color-border);border-radius:var(--r-md);background:var(--color-surface-2);
  color:var(--color-text-2);font-size:var(--text-sm);font-weight:var(--fw-medium);
  max-width:190px;transition:border-color var(--t),background var(--t);
}
.ctxsel:hover{border-color:var(--color-border-strong);background:var(--color-surface)}
.ctxsel .ic{color:var(--color-text-3);width:15px;height:15px}
.ctxsel b{font-weight:var(--fw-semibold);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxsel .car{width:14px;height:14px}

/* Global search trigger */
.gsearch{
  display:flex;align-items:center;gap:10px;width:min(460px,100%);height:36px;padding:0 12px;
  border:1px solid var(--color-border);border-radius:var(--r-md);
  background:var(--color-surface-2);color:var(--color-text-3);
  font-size:var(--text-sm);transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.gsearch:hover{border-color:var(--color-border-strong);background:var(--color-surface)}
.gsearch:focus-visible{outline:none;box-shadow:var(--ring)}
.gsearch span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsearch .ic{width:16px;height:16px}
.gsearch-ic{display:none;width:36px}

/* Header icon buttons */
.hact{position:relative}
.hact .n-badge, .n-badge{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-500);color:#fff;border-radius:var(--r-full);
  font-size:9.5px;font-weight:var(--fw-bold);line-height:1;border:2px solid var(--color-surface);
}
.hact-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red-500);border:2px solid var(--color-surface)}

/* Ask Safentra pill */
.ask-btn{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  border-radius:var(--r-full);border:1px solid transparent;
  background:linear-gradient(135deg,var(--blue-500),#3B74F7 45%,var(--teal-500));
  color:#fff;font-size:var(--text-sm);font-weight:var(--fw-semibold);
  box-shadow:0 2px 8px -2px rgba(15,98,254,.5);
  transition:box-shadow var(--t),transform var(--t);
}
.ask-btn:hover{box-shadow:0 4px 12px -2px rgba(15,98,254,.55)}
.ask-btn .ic{width:15px;height:15px}

/* Role chip + user chip */
.role-chip,.user-chip{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 10px;
  border-radius:var(--r-md);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);
  transition:background var(--t);
}
.role-chip:hover,.user-chip:hover{background:var(--color-hover)}
.role-chip .ic-sh{color:var(--color-primary)}
.role-tx{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.car{width:14px;height:14px;color:var(--color-text-3)}

/* ================= SIDEBAR ================= */
.sbar{
  position:sticky;top:var(--header-h);
  width:var(--sidebar-w);height:calc(100vh - var(--header-h));
  display:flex;flex-direction:column;flex:none;
  background:var(--color-surface);border-right:1px solid var(--color-border);
  transition:width var(--t) var(--ease),transform var(--t) var(--ease);
  z-index:var(--z-sidebar);
}
.sbar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sp-3) var(--sp-3) var(--sp-5)}
.sbar-ft{border-top:1px solid var(--color-border);padding:var(--sp-3)}

.nav-sec{
  padding:var(--sp-4) 10px var(--sp-2);
  font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-text-3);white-space:nowrap;
}
.nav-item{margin:1px 0}
.nav-lnk{
  display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;
  border-radius:var(--r-md);color:var(--color-text-2);
  font-size:var(--text-md);font-weight:var(--fw-medium);text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);position:relative;text-align:left;
}
.nav-lnk:hover{background:var(--color-hover);color:var(--color-text);text-decoration:none}
.nav-ico{width:18px;height:18px;flex:none;color:var(--color-text-3);transition:color var(--t-fast)}
.nav-lnk:hover .nav-ico{color:var(--color-text-2)}
.nav-tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{
  min-width:20px;height:18px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-primary-soft);color:var(--color-primary);border-radius:var(--r-full);
  font-size:var(--text-2xs);font-weight:var(--fw-bold);
}
.nav-caret{width:14px;height:14px;color:var(--color-text-3);transition:transform var(--t) var(--ease)}
.nav-item.open .nav-caret{transform:rotate(180deg)}

.nav-lnk.act{background:var(--color-primary-soft);color:var(--color-primary-active);font-weight:var(--fw-semibold)}
.nav-lnk.act .nav-ico{color:var(--color-primary)}
.nav-lnk.act::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--color-primary);
}
.nav-lnk.act-parent{color:var(--color-text);font-weight:var(--fw-semibold)}
.nav-lnk.act-parent .nav-ico{color:var(--color-primary)}

.nav-sub{overflow:hidden;padding:2px 0 4px}
.nav-sub .nav-lnk{height:34px;padding-left:44px;font-size:var(--text-sm);font-weight:var(--fw-regular)}
.nav-sub .nav-lnk:hover{font-weight:var(--fw-medium)}
.nav-sub .nav-lnk.act{font-weight:var(--fw-semibold)}
.nav-sub .nav-lnk.act::before{left:-12px}

/* Collapsed (rail) sidebar */
body.nav-mini .sbar{width:var(--sidebar-rail)}
body.nav-mini .nav-sec{text-align:center;padding:var(--sp-4) 0 var(--sp-2);font-size:0}
body.nav-mini .nav-sec::after{content:"· · ·";font-size:var(--text-xs);color:var(--color-border-strong)}
body.nav-mini .nav-lnk{justify-content:center;padding:0}
body.nav-mini .nav-tx,body.nav-mini .nav-caret{display:none}
body.nav-mini .nav-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;font-size:9.5px;border:2px solid var(--color-surface)}
body.nav-mini .nav-lnk.act::before{left:-12px;top:6px;bottom:6px}
body.nav-mini .nav-fly-anchors .nav-lnk{position:relative}

/* Sidebar flyout (rail mode) */
.nav-fly{
  position:fixed;z-index:calc(var(--z-sidebar) + 5);min-width:220px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);padding:6px;animation:pop-in var(--t) var(--ease);
}
.nav-fly .nf-h{padding:8px 10px 6px;font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-3)}
.nav-fly a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);color:var(--color-text-2);font-size:var(--text-sm);font-weight:var(--fw-medium)}
.nav-fly a:hover{background:var(--color-hover);color:var(--color-text);text-decoration:none}
.nav-fly a.act{color:var(--color-primary-active);background:var(--color-primary-soft)}

/* Sidebar footer + context mini card */
.ctx-mini{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-lg);
  background:var(--color-surface-2);border:1px solid var(--color-border);cursor:pointer;
  transition:border-color var(--t),background var(--t);text-align:left;width:100%;
}
.ctx-mini:hover{border-color:var(--color-border-strong);background:var(--color-surface)}
.ctx-mini .cm-ic{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--color-primary-soft);color:var(--color-primary);flex:none}
.ctx-mini b{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ctx-mini span{font-size:var(--text-xs);color:var(--color-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;display:block}
body.nav-mini .ctx-mini{justify-content:center;padding:8px 6px}
body.nav-mini .cm-tx{display:none}
.collapse-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:34px;margin-top:var(--sp-3);
  border-radius:var(--r-md);color:var(--color-text-3);font-size:var(--text-sm);font-weight:var(--fw-medium);
  border:1px solid var(--color-border);background:var(--color-surface);transition:all var(--t);
}
.collapse-btn:hover{color:var(--color-text);background:var(--color-hover)}
.collapse-btn .ic{transition:transform var(--t) var(--ease)}
body.nav-mini .collapse-btn .ic{transform:rotate(180deg)}
body.nav-mini .collapse-btn span{display:none}

.sbar-backdrop{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:calc(var(--z-sidebar) - 1);
  background:rgba(15,23,42,.42);opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease);
}
body.nav-open .sbar-backdrop{opacity:1;pointer-events:auto}

/* ================= MAIN / WORKSPACE ================= */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.page-wrap{
  flex:1;width:100%;max-width:var(--page-max);margin:0 auto;
  padding:var(--sp-5) var(--sp-8) var(--sp-10);
}

/* Breadcrumb */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-bottom:var(--sp-2);font-size:var(--text-sm)}
.crumb a,.crumb span{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:var(--r-sm);color:var(--color-text-3);font-weight:var(--fw-medium)}
.crumb a:hover{color:var(--color-primary);text-decoration:none;background:var(--color-hover)}
.crumb .sep{color:var(--color-border-strong);padding:0 1px}
.crumb .cur{color:var(--color-text);font-weight:var(--fw-semibold);pointer-events:none}

/* Page header */
.page-head{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.ph-main{min-width:0;flex:1}
.ph-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph-title h1{font-size:var(--text-3xl)}
.ph-ic{width:40px;height:40px;border-radius:var(--r-lg);display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-soft);color:var(--color-primary);flex:none}
.ph-ic .ic{width:20px;height:20px}
.ph-sub{margin-top:5px;color:var(--color-text-2);font-size:var(--text-md);max-width:760px}
.ph-ctx{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.ph-actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex-wrap:wrap}

.ctx-crumb{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--color-text-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-full);padding:3px 10px}
.ctx-crumb .ic{width:12px;height:12px}

/* Footer */
.app-foot{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  min-height:var(--footer-h);padding:6px var(--sp-8);
  border-top:1px solid var(--color-border);background:var(--color-surface);
  font-size:var(--text-xs);color:var(--color-text-3);
}
.app-foot a{color:var(--color-text-3);font-weight:var(--fw-medium)}
.app-foot a:hover{color:var(--color-primary)}
.af-r{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.ver-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border:1px solid var(--color-border);border-radius:var(--r-full);background:var(--color-surface-2);font-family:var(--font-mono);font-size:10.5px}
.env-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-full);background:var(--teal-50);color:var(--teal-700);font-weight:var(--fw-semibold);font-size:10.5px;border:1px solid var(--teal-100)}
[data-theme="dark"] .env-chip{background:rgba(36,181,166,.12);color:var(--teal-300);border-color:rgba(36,181,166,.25)}
.env-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-500)}

/* ================= SCRIM / DRAWERS ================= */
.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(15,23,42,.45);opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);
  width:min(var(--drawer-w),100vw);max-width:100vw;
  display:flex;flex-direction:column;
  background:var(--color-surface);border-left:1px solid var(--color-border);
  box-shadow:var(--shadow-xl);
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease);
  visibility:hidden;
}
.drawer.open{transform:none;visibility:visible}
.drawer.lg{width:min(var(--drawer-w-lg),100vw)}
.drw-hd{
  flex:none;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);min-height:64px;
}
.drw-tit{flex:1;min-width:0}
.drw-tit h3{font-size:var(--text-lg)}
.drw-tit p{font-size:var(--text-xs);color:var(--color-text-3);margin-top:1px}
.drw-bd{flex:1;overflow-y:auto;min-height:0}
.drw-ft{flex:none;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--color-border)}

/* ================= AUTH LAYOUT ================= */
.auth{display:flex;min-height:100vh}
.auth-brand{
  display:flex;flex-direction:column;flex:0 0 46%;max-width:46%;
  padding:var(--sp-10) var(--sp-12) var(--sp-8);color:#E6EDF7;position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 500px at -10% -10%,rgba(46,123,246,.35),transparent 55%),
    radial-gradient(900px 600px at 110% 110%,rgba(36,181,166,.22),transparent 55%),
    linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 55%,#0A2A4E 100%);
}
.auth-brand::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(900px 700px at 30% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(900px 700px at 30% 30%,#000 30%,transparent 75%);
}
.auth-brand>*{position:relative}
.ab-top{display:flex;align-items:center;gap:12px}
.ab-top .brand-mark{width:38px;height:38px}
.ab-name{font-size:19px;font-weight:var(--fw-bold);letter-spacing:-.01em;color:#fff}
.ab-sub{font-size:10.5px;font-weight:var(--fw-semibold);letter-spacing:.12em;text-transform:uppercase;color:#A9B8CD}
.ab-mid{margin:auto 0;padding:var(--sp-12) 0;max-width:520px}
.ab-mid h1{font-size:var(--text-5xl);line-height:1.12;letter-spacing:-.025em;color:#fff;font-weight:var(--fw-bold)}
.ab-mid h1 em{font-style:normal;color:#8FD9CF;background:linear-gradient(90deg,#8FD9CF,#7FB4FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ab-mid>p{margin-top:var(--sp-5);font-size:15.5px;line-height:1.65;color:#B7C5D9;max-width:460px}
.auth-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-10)}
.a-stat{padding:var(--sp-4);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045)}
.a-stat b{display:block;font-size:22px;font-weight:var(--fw-bold);color:#fff;letter-spacing:-.01em}
.a-stat span{font-size:11.5px;color:#9FB1C9;font-weight:var(--fw-medium)}
.auth-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.auth-badges li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:var(--fw-semibold);color:#C6D3E4}
.auth-badges .ic{width:12px;height:12px;color:#7BE0D1}
.ab-ft{font-size:11.5px;color:#8FA3BE}

.auth-panel{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-8) var(--sp-6);overflow-y:auto;position:relative;
}
.auth-card{width:100%;max-width:404px}
.auth-support{width:100%;max-width:404px;margin-top:var(--sp-4)}
.auth-foot{width:100%;max-width:404px;margin-top:var(--sp-6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--text-xs);color:var(--color-text-3)}
.auth-foot nav{display:flex;gap:var(--sp-3)}
.auth-foot a{color:var(--color-text-3);font-weight:var(--fw-medium)}

/* Generic pop-in / fade for menus */
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Page entrance */
.page-wrap>.anim-in{animation:slide-up var(--t-slow) var(--ease)}