/* ==== Global design-system primitives ====
   This file is the single source of truth for:
   tokens, generic UI primitives and the central stylesheet entrypoint.
   Module css files should compose these primitives instead of redefining them.
*/

@import url('./navigation.css');

:root{
  --ju-gold:#F5B400;
  --ju-anth:#2F343A;
  --ju-bg:#F5F6F8;
  --ju-card:#FFFFFF;
  --ju-soft:#F8FAFC;

  --ju-text:#2F343A;
  --ju-text-strong:#0F172A;
  --ju-text-muted:#64748B;
  --ju-text-subtle:#94A3B8;

  --ju-border:rgba(0,0,0,.08);
  --ju-border-strong:rgba(0,0,0,.14);
  --ju-overlay:rgba(15,23,42,.56);

  --ju-shadow-color:rgba(0,0,0,.05);
  --ju-shadow-color-soft:rgba(0,0,0,.02);
  --ju-shadow:0 8px 24px var(--ju-shadow-color);

  --ju-success:#466655;
  --ju-warning:#8A6700;
  --ju-danger:#AA3A30;
  --ju-success-bg:#F3F7F4;
  --ju-warning-bg:#FFF9EC;
  --ju-danger-bg:#FFF6F5;

  --ju-accent-soft:rgba(245,180,0,.10);
  --ju-accent-line:rgba(138,103,0,.18);
  --ju-accent-focus:rgba(245,180,0,.18);
  --ju-accent-hover:rgba(245,180,0,.05);

  --ju-shell-bg:var(--ju-anth);
  --ju-shell-text:rgba(255,255,255,.84);
  --ju-shell-text-soft:rgba(255,255,255,.68);
  --ju-shell-line:rgba(255,255,255,.10);
  --ju-shell-fill:rgba(255,255,255,.06);
  --ju-shell-fill-strong:rgba(255,255,255,.12);

  --ju-radius:6px;
  --ju-font:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;

  --ju-header-gap: 18px;
  --ju-table-accent-line: var(--ju-accent-line);

  --ju-motion-fast: .18s;
  --ju-ease-standard: ease;
  --ju-selected-line: var(--ju-gold);
  --ju-selected-bg: var(--ju-accent-soft);
  --ju-table-left-accent: var(--ju-gold);

  --ju-border-soft: rgba(15,23,42,.06);
  --ju-danger-line: rgba(170,58,48,.22);
  --ju-muted: #6B7280;

  --app-workbar-offset: var(--app-workbar-height);
  --folder-depth: 0;
  --line: var(--ju-border);
  --line-strong: var(--ju-border-strong);
  --radius-md: 6px;
  --radius-sm: 4px;
  --shadow-md: 0 12px 24px rgba(15,23,42,.12);
  --surface: var(--ju-card);
  --surface-2: var(--ju-soft);
  --text: var(--ju-text-strong);

  --space-3: 12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--ju-font);background:var(--ju-bg);color:var(--ju-anth)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px;width:auto}
.card{background:var(--ju-card);border:1px solid var(--ju-border);border-radius:var(--ju-radius);box-shadow:var(--ju-shadow)}
.card-h{padding:14px 16px;border-bottom:1px solid var(--ju-border);font-weight:600}
.card-b{padding:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.kpi{flex:1 1 220px}
.kpi .big{font-size:26px;font-weight:800}
.navgrid{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}
.navitem{padding:10px 14px;border-radius:999px;background:var(--ju-card);border:1px solid var(--ju-border);font-weight:700}
.navitem.active{background:var(--ju-accent-soft);border-color:var(--ju-accent-line)}
.small{font-size:12px;color:var(--ju-text-muted)}

/* Notices */
.notice{border:1px solid var(--ju-border);background:var(--ju-card);padding:12px 14px;border-radius:var(--ju-radius);margin:12px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.notice-warn,
.notice-warning{border-color:var(--ju-accent-line);background:var(--ju-accent-soft)}
.notice-success{border-color:var(--ju-success-bg);background:var(--ju-success-bg)}
.notice-error{border-color:var(--ju-danger);background:var(--ju-danger-bg)}

.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{max-width:420px;width:100%;}

/* Internal app layout */
.admin-app{background:var(--ju-bg);}
.admin-app .page,.admin-app .home{min-height:100vh;}

.admin-app .appMiniBtn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:6px;background:var(--ju-shell-fill);border:1px solid var(--ju-shell-fill-strong);color:var(--ju-card);font-weight:700;text-decoration:none;}
.admin-app .appMainHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.admin-app .appGrid2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;}
.admin-app .panel{background:var(--ju-shell-text);border:1px solid var(--ju-border);border-radius:6px;box-shadow:var(--ju-shadow);padding:16px;}
.admin-app .form label{display:block;font-weight:700;margin-bottom:6px;}

.admin-app .form textarea{min-height:120px;resize:vertical;}
.admin-app .muted{color:var(--ju-text-muted);}
.admin-app .success,.admin-app .alert{padding:12px 14px;border-radius:6px;margin:0 0 14px 0;border:1px solid var(--ju-border);}
.admin-app .success{background:var(--ju-success-bg);border-color:var(--ju-success-bg);}
.admin-app .alert{background:var(--ju-danger-bg);border-color:var(--ju-danger);}
/* Konsistenzpaket Sprint 2 */
.document-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px;}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.metric-card{background:var(--ju-card);border:1px solid var(--ju-border);border-radius:6px;box-shadow:0 8px 24px var(--ju-shadow-color);padding:16px;display:grid;gap:6px;}
.metric-card--primary{background:var(--ju-warning-bg);border-color:var(--ju-accent-line);}
.metric-card--success{background:var(--ju-soft);border-color:var(--ju-success-bg);}
.metric-card--warning{background:var(--ju-warning-bg);border-color:var(--ju-accent-line);}
.metric-card--danger{background:var(--ju-danger-bg);border-color:var(--ju-danger);}
.metric-card--quiet,.metric-card--neutral{background:var(--ju-card);border-color:var(--ju-border);}
.metric-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ju-text-muted);}
.metric-value{font-size:30px;line-height:1;font-weight:900;color:var(--ju-text-strong);}
.metric-hint{font-size:13px;color:var(--ju-text-muted);line-height:1.45;}
.alert-box{padding:12px 14px;border-radius:6px;margin:0 0 14px 0;border:1px solid var(--ju-border-strong);background:var(--ju-card);color:var(--ju-text-strong);}
.alert-box--info{background:var(--ju-soft);border-color:var(--ju-border-strong);}
.alert-box--success{background:var(--ju-success-bg);border-color:var(--ju-success-bg);}
.alert-box--warning{background:var(--ju-accent-soft);border-color:var(--ju-accent-line);}
.alert-box--error{background:var(--ju-danger-bg);border-color:var(--ju-danger);}
.suggest-box{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:8px;background:var(--ju-card);border:1px solid var(--ju-border);border-radius:6px;box-shadow:0 16px 28px var(--ju-border-strong);max-height:220px;overflow:auto;display:none;}
.suggest-box.is-open,.suggest-box.show{display:block;}
.suggest-box .btn{display:flex;width:100%;padding:12px 14px;border-radius:0;text-align:left;justify-content:flex-start;}
.suggest-box .btn:hover,.suggest-box .btn:focus{background:var(--ju-soft);}
.suggest-box strong{display:block;color:var(--ju-text-strong);}
.suggest-box span{display:block;margin-top:4px;color:var(--ju-text-muted);font-size:12px;}
.section--next-step{border-color:var(--ju-accent-line);background:linear-gradient(180deg,var(--ju-warning-bg) 0%,var(--ju-soft) 100%);box-shadow:0 8px 24px var(--ju-accent-soft);}
.section--context-summary{background:var(--ju-warning-bg);border-color:var(--ju-accent-soft);}
.context-list{display:grid;gap:0;}
.context-list-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--ju-border);}

.context-list-row--compact{
  padding:8px 0;
}

.context-list-row--dense{
  padding:6px 0;
}

.context-list-row--divided{
  padding:10px 0;
  border-bottom:1px solid var(--ju-border);
}

.context-list-row--divided:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.context-list-row:last-child{border-bottom:0;padding-bottom:0;}
.context-list-label{font-weight:700;color:var(--ju-text-muted);}
.context-list-value{font-weight:700;color:var(--ju-text-strong);text-align:right;}
.check-input,.radio-input{accent-color:var(--ju-gold);margin:0;}
.empty-state{padding:26px 18px;border:1px dashed var(--ju-border-strong);border-radius:6px;background:var(--ju-card);text-align:center;display:grid;gap:10px;}
.header-stack{display:grid;gap:16px;margin:0 0 18px;}
.page-header--document{margin:2px 0 18px;}
@media (max-width: 768px){
  .context-list-row{display:block;}
  .context-list-value{text-align:left;display:block;margin-top:3px;}
}

/* === P12 CORE FIX v2 === */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
img,svg,iframe,canvas,video{
  max-width:100%;
  height:auto;
}
body{
  overflow-wrap:normal;
}
.admin-app,
.admin-app .page,
.admin-app .home,
.container,
.panel,
.card,
.notice,

.helpWrap,
.settingsAdminWrap,
.articleWrap,
.ticketAdminWrap,
.moduleShell{
  width:100%;
  max-width:100%;
}

.row,
.topbar,
.topbarActions,
.navgrid,
.document-actions,
.quickActionRow,
.sectionActions,
.loginBannerActions{
  max-width:100%;
  flex-wrap:wrap;
}
.table,
.articleTableWrap{
  max-width:100%;
}
.articleTableWrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:1023px){
  

  

  

  .admin-app .container,
  .admin-app .helpWrap,
  .admin-app .settingsAdminWrap{
    padding-left:16px;
    padding-right:16px;
  }
}

html{scroll-behavior:smooth}
body{background:var(--ju-bg);background-image:none;color:var(--ju-text-strong)}
body.admin-app{background:var(--ju-bg);background-image:none}
.page{padding-bottom:110px}
.card,.docPanel,.docCard,.settingsPanel,.settingsCard,.articlePanel,.ticketPanel,.mailComposerPanel,.surface{
  background:var(--ju-card);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--ju-border);
  box-shadow:var(--ju-shadow);
  border-radius:var(--ju-radius);
}
.appMainHeader,.dmsHero,.searchHero,.helpHero{position:relative}
.appMainHeader:after,.dmsHero:after,.searchHero:after,.helpHero:after{
  content:'';display:block;width:88px;height:4px;border-radius:999px;margin-top:14px;background:linear-gradient(90deg,var(--ju-gold),transparent);
}

.kpi{display:none}

.masterMiluLauncher{
  position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,var(--ju-text-strong) 0%,var(--ju-text) 100%);color:var(--ju-card);text-decoration:none;
  box-shadow:0 20px 50px var(--ju-border-strong);border:1px solid var(--ju-shell-fill)
}
.masterMiluLauncher:hover{text-decoration:none;transform:translateY(-1px);color:var(--ju-card)}
.masterMiluLauncher strong{font-size:14px;line-height:1}
.masterMiluLauncher span{font-size:12px;line-height:1;color:var(--ju-shell-text-soft)}
.masterMiluLauncherIcon{
  width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ju-gold) 0%, var(--ju-gold) 100%);color:var(--ju-anth);box-shadow:inset 0 1px 0 var(--ju-shell-text-soft)
}
.masterMiluLauncherIcon svg{width:20px;height:20px}
.masterMiluLauncherLabel{display:flex;flex-direction:column;gap:3px}
@media (max-width:980px){
  
  .masterMiluLauncher{right:16px;bottom:16px;padding:12px 14px}
  .masterMiluLauncherLabel span{display:none}
}
@media (max-width:640px){
  .masterMiluLauncherLabel{display:none}
  .masterMiluLauncher{padding:12px;border-radius:6px}
}

.orderFlowRail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.orderFlowStep{position:relative;padding:14px 16px;border-radius:6px;background:linear-gradient(180deg,var(--ju-card),var(--ju-soft));border:1px solid var(--ju-border);box-shadow:0 10px 30px var(--ju-border)}
.orderFlowStep.is-active{border-color:var(--ju-gold);box-shadow:0 16px 40px var(--ju-accent-focus)}
.orderFlowStep::after{content:"";position:absolute;right:-8px;top:50%;width:16px;height:2px;background:var(--ju-border-strong);transform:translateY(-50%)}
.orderFlowStep:last-child::after{display:none}
.orderFlowEyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ju-text-subtle);margin-bottom:6px}
.orderFlowTitle{display:block;font-size:15px;font-weight:700;color:var(--ju-text-strong)}
.orderFlowHint{display:block;font-size:12px;color:var(--ju-text-muted);margin-top:5px;line-height:1.45}
.orderMetaStrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.orderMetaCard{padding:16px 18px;border-radius:6px;background:linear-gradient(180deg,var(--ju-card),var(--ju-soft));border:1px solid var(--ju-border);box-shadow:0 18px 45px var(--ju-border)}
.orderMetaLabel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ju-text-subtle)}
.orderMetaValue{margin-top:8px;font-size:20px;font-weight:700;color:var(--ju-text-strong)}
.orderMetaHint{margin-top:4px;font-size:12px;color:var(--ju-text-muted);line-height:1.45}
.reminderWorkboard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);gap:18px;margin-top:18px;align-items:start}
.reminderAsideCard{padding:18px;border-radius:6px;background:linear-gradient(180deg,var(--ju-card),var(--ju-soft));border:1px solid var(--ju-border);box-shadow:0 18px 46px var(--ju-border);position:sticky;top:104px}
.reminderAsideCard h3{margin:0 0 10px;font-size:16px;color:var(--ju-text-strong)}
.reminderAsideList{display:grid;gap:10px;margin-top:12px}
.reminderAsideItem{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:6px;background:var(--ju-soft);border:1px solid var(--ju-border)}
.reminderAsideItem strong{display:block;font-size:14px;color:var(--ju-text-strong)}
.reminderAsideItem span{display:block;font-size:12px;color:var(--ju-text-muted);margin-top:3px}
.articleTypeCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 0}
.articleTypeCard{padding:14px 16px;border-radius:6px;border:1px solid var(--ju-border);background:linear-gradient(180deg,var(--ju-card),var(--ju-soft));box-shadow:0 16px 38px var(--ju-shadow-color)}
.articleTypeCard.is-active{border-color:var(--ju-gold);box-shadow:0 18px 42px var(--ju-accent-focus)}
.articleTypeCard strong{display:block;font-size:15px;color:var(--ju-text-strong)}
.articleTypeCard span{display:block;font-size:12px;color:var(--ju-text-muted);margin-top:6px;line-height:1.45}
.articleModeHint{margin-top:12px;padding:12px 14px;border-radius:6px;background:var(--ju-warning-bg);border:1px solid var(--ju-accent-line);font-size:13px;color:var(--ju-warning);line-height:1.5}
@media (max-width: 1100px){
  .orderFlowRail,.orderMetaStrip,.articleTypeCards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reminderWorkboard{grid-template-columns:1fr}
  .reminderAsideCard{position:static}
}
@media (max-width: 720px){
  .orderFlowRail,.orderMetaStrip,.articleTypeCards{grid-template-columns:1fr}
}

.settingsHero,
.adminOpsHero,
.helpHubHero,
.billingHero,
.authHeroCard{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  border:1px solid var(--ju-border);
  background:linear-gradient(135deg, var(--ju-accent-soft) 0%, var(--ju-card) 28%, var(--ju-card) 100%);
  box-shadow:0 18px 42px var(--ju-border);
}
.settingsHero::after,
.adminOpsHero::after,
.helpHubHero::after,
.billingHero::after,
.authHeroCard::after{
  content:"";
  position:absolute;
  inset:auto -80px -80px auto;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, var(--ju-accent-focus) 0%, transparent 70%);
  pointer-events:none;
}
.settingsHero,
.adminOpsHero,
.helpHubHero,
.billingHero{padding:22px; margin-bottom:18px;}
.heroEyebrow{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ju-warning);margin-bottom:10px;display:inline-flex;align-items:center;gap:8px}
.heroTitle{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.05;color:var(--ju-text-strong)}
.heroLead{margin:10px 0 0;color:var(--ju-text-muted);max-width:760px;line-height:1.6;font-size:15px}
.heroMetaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.heroMetaChip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--ju-border);background:var(--ju-shell-text);font-size:12px;font-weight:800;color:var(--ju-text-muted)}
.heroActionRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.softPanel{padding:16px;border-radius:6px;background:var(--ju-card);border:1px solid var(--ju-border);box-shadow:0 10px 24px var(--ju-shadow-color)}
.softGrid2{display:grid;grid-template-columns:1.25fr .95fr;gap:18px}
.softGrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.segmentCard{padding:16px;border-radius:6px;background:var(--ju-card);border:1px solid var(--ju-border);box-shadow:0 8px 22px var(--ju-shadow-color)}
.segmentCard h3{margin:0 0 8px;font-size:18px;color:var(--ju-text-strong)}
.segmentCard p{margin:0;color:var(--ju-text-muted);line-height:1.55}
.segmentList{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.segmentList li{display:flex;gap:10px;align-items:flex-start;color:var(--ju-text-muted)}
.segmentList li::before{content:"•";color:var(--ju-warning);font-weight:900}
.stepChip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:var(--ju-card);border:1px solid var(--ju-border);font-size:12px;font-weight:800;color:var(--ju-text-strong)}
.authSplit{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,.8fr);gap:18px;align-items:start}
.authHeroCard{padding:22px}
.authHeroCard h2{margin:10px 0 8px;font-size:28px;line-height:1.05;color:var(--ju-text-strong)}
.authHeroCard p{margin:0;color:var(--ju-text-muted);line-height:1.6}
.authTrustList{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.authTrustList li{display:flex;gap:10px;align-items:flex-start;color:var(--ju-text-muted)}
.authTrustList li::before{content:"✓";font-weight:900;color:var(--ju-success)}
.authStatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.authStat{padding:14px;border-radius:6px;background:var(--ju-card);border:1px solid var(--ju-border)}
.authStat strong{display:block;font-size:22px;color:var(--ju-text-strong)}
.authStat span{font-size:12px;font-weight:800;color:var(--ju-text-muted);text-transform:uppercase;letter-spacing:.06em}
.billingFlow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.billingFlow .stepChip{justify-content:flex-start}
.quickTileGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.quickTile{padding:16px;border-radius:6px;background:var(--ju-card);border:1px solid var(--ju-border);box-shadow:0 8px 22px var(--ju-shadow-color)}
.quickTile h3{margin:0 0 6px;font-size:17px;color:var(--ju-text-strong)}
.quickTile p{margin:0;color:var(--ju-text-muted);line-height:1.55}
.quickTile a{margin-top:12px;display:inline-flex;align-items:center;font-weight:800;text-decoration:none}
.helpContextRow{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}
.miluSpotlight{padding:20px;border-radius:6px;background:linear-gradient(135deg, var(--ju-border) 0%, var(--ju-card) 26%, var(--ju-card) 100%);border:1px solid var(--ju-border-strong);box-shadow:0 14px 28px var(--ju-border)}
.miluSpotlight h2{margin:0 0 8px;font-size:24px;color:var(--ju-text-strong)}
.miluSpotlight p{margin:0;color:var(--ju-text-muted);line-height:1.6}
.contextBadge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--ju-border);border:1px solid var(--ju-border-strong);font-size:11px;font-weight:900;color:var(--ju-shell-bg);text-transform:uppercase;letter-spacing:.06em}
@media (max-width: 1100px){
  .softGrid2,.helpContextRow,.authSplit{grid-template-columns:1fr}
  .quickTileGrid,.softGrid3,.billingFlow{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .quickTileGrid,.softGrid3,.billingFlow,.authStatGrid{grid-template-columns:1fr}
}

/* === Dashboard shell reset v3.6 === */

/* remove old secondary dashboard sidebar completely */

.statusStrip{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  min-width:0;
}
.statusPillCard{
  min-width:0;
  max-width:100%;
}
.admin-app .dashboardSection[id]{
  scroll-margin-top:96px;
}

.is-hidden-by-view{
  display:none;
}

.is-hidden-by-view{
  display:none;
}

/* ========================================
   - keep original workbar layout
   - tabs use full bar height
   - search trigger gets slight radius only

/* ========================================
   - tabs truly flush to workbar height
   - text optically centered
   - search trigger slight radius, still right-aligned

/* ========================================

/* ========================================
   - remove sidebar right border causing bright line
   - disable any appWorkbar ::before overlays

/* ========================================
   - force one identical shell gradient for sidebar + workbar
   - neutralize legacy workbar color drift

:root{
  --ju-shell-unified-start:var(--ju-anth);
  --ju-shell-unified-end:var(--ju-shell-bg);
}

/* ========================================
   - canonicalize one shell color
   - override geometry so no workspace gap shows through
   - re-enable a controlled left extension for the workbar

:root{
  --ju-shell-canonical:var(--ju-shell-bg);
}

/* ========================================
   - flatten any remaining sidebar/workbar tone drift
   - add left/right breathing room to Ctrl+K search field

/* ========================================
   - keep v18 shell/workbar state
   - only add a bit more bottom spacing for the opened search field

/* ========================================
   - mobile search belongs to header, not workbar
   - smooth slide-down sheet under mobile header
   - keep workbar mobile-only for module navigation

/* ========================================
   - closed: no extra gap, workbar sits directly below header
   - open: global search opens between header and workbar
   - dashboard inline search is fully disabled on mobile

/* ========================================
   final-mobile-search-reset
   - mobile header loupe is the only search trigger
   - mobile search renders between header and workbar
   - workbar stays dropdown-only on mobile

/* ========================================
   Bereinigte Basis nur für Hauptnavigation / Workbar / mobile Suche:
   - mobile Suchpanel ohne weißen Rand / Streifen
   - Suchpanel bündig zum Viewport, Innenabstand nur im inneren Shell
   - Workbar unten ohne Restspalt

/* ========================================
   part8-mobile-menu-search-dropdown-fix
   - entfernt linken Streifen der mobilen Suche
   - integriert Dropdown bündig in die Workbar

/* === shared search result styles === */
.searchHero{display:grid;gap:14px;margin-bottom:18px}
.searchHeroCard{padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.searchGroup,.searchEmpty{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.searchHeroTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.searchHeroLabel,.searchChip,.searchGroupCount,.searchResultBadge,.searchAction{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-weight:800;font-size:12px}
.searchHeroLabel{gap:8px;background:var(--ju-warning-bg);color:var(--ju-warning)}
.searchGroupCount,.searchChip{background:var(--ju-soft);border:1px solid var(--ju-border);color:var(--ju-text-muted)}
.searchChip.is-active{background:var(--ju-text-strong);color:var(--ju-card);border-color:var(--ju-text-strong);text-decoration:none}
.searchHero h1{margin:10px 0 0;font-size:32px;line-height:1.08;color:var(--ju-text-strong)}
.searchHero p{margin:8px 0 0;color:var(--ju-text-muted);font-size:15px;line-height:1.55}
.searchFilters{display:grid;gap:12px;margin-top:14px}
.searchChipRow{display:flex;gap:8px;flex-wrap:wrap}
.searchSelectRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.searchSelectRow .select{max-width:100%;}
.searchGroup{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--ju-border)}
.searchGroupHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:8px}
.searchGroupTitle{margin:0;font-size:24px;line-height:1.15;color:var(--ju-text-strong)}
.searchResultList{display:grid;gap:0}
.searchResultItem{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--ju-border);background:transparent;border-radius:0;box-shadow:none}
.searchResultList .searchResultItem:first-child{border-top:0}
.searchResultTop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.searchResultBody{display:grid;gap:6px;min-width:0}
.searchResultTitle{font-size:20px;font-weight:800;line-height:1.18;color:var(--ju-text-strong)}
.searchResultTitle a{color:inherit;text-decoration:none}
.searchResultTitle a:hover{text-decoration:underline}
.searchResultSub{font-size:15px;line-height:1.55;color:var(--ju-text-muted)}
.searchResultMeta{font-size:13px;color:var(--ju-text-muted);line-height:1.6}
.searchResultBadge{align-self:flex-start;background:transparent;border:1px solid var(--ju-accent-focus);color:var(--ju-warning);white-space:nowrap;padding:6px 10px}
.searchActions{display:flex;gap:8px;flex-wrap:wrap;padding-top:0}
.searchAction{background:var(--ju-card);border:1px solid var(--ju-border);color:var(--ju-text-strong);text-decoration:none;transition:border-color .18s ease, background .18s ease, color .18s ease}
.searchAction:hover{border-color:var(--ju-border-strong);background:var(--ju-soft)}
.searchAction--primary{background:var(--ju-text-strong);color:var(--ju-card);border-color:var(--ju-text-strong)}
.searchAction--primary:hover{background:var(--ju-text-strong);color:var(--ju-card);border-color:var(--ju-text-strong)}
.searchHintGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.searchHint{padding:14px 0 0;border-radius:0;background:transparent;border:0;border-top:1px solid var(--ju-border)}
.searchHint strong{display:block;margin-bottom:4px;color:var(--ju-text-strong)}
.searchHint span{font-size:13px;color:var(--ju-text-muted)}
.searchEmpty{margin-top:18px;padding:16px 0;border-top:1px dashed var(--ju-border-strong);color:var(--ju-text-muted)}

/* === live search results in dashboard workbar === */

.admin-app .dashboardSearchResultsHost{margin:18px 0 20px}
.admin-app .dashboardSearchResultsHead{display:block;margin-bottom:12px}
.admin-app .dashboardSearchResultsEyebrow{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;background:var(--ju-warning-bg);color:var(--ju-warning)}
.admin-app .dashboardSearchResultsTitle{margin:10px 0 0;font-size:30px;line-height:1.08;color:var(--ju-text-strong)}
.admin-app .dashboardSearchResultsLead{margin:8px 0 0;color:var(--ju-text-muted);font-size:14px;line-height:1.55}
.admin-app .dashboardSearchResultsBody .searchGroup:last-child,
.admin-app .dashboardSearchResultsBody .searchEmpty:last-child{margin-bottom:0}
.admin-app .dashboardSearchResultsBody .searchGroup,
.admin-app .dashboardSearchResultsBody .searchEmpty{background:transparent}
@media (max-width:760px){
  .searchHero h1,.admin-app .dashboardSearchResultsTitle{font-size:26px}
  .searchHintGrid{grid-template-columns:1fr}
  .searchResultTop{flex-direction:column}
}

/* ========================================
   - sticky workbar
   - flatter search trigger
   - plain search results surface
   - hide module chrome while search-results tab is active

@media (min-width:981px){
  

  .admin-app .dashboardSearchResultsHost{
    margin:0 0 28px;
    padding:0;
    background:var(--ju-card);
    background-image:none;
    border:0;
    box-shadow:none;
  }

  .admin-app .dashboardSearchResultsHead{
    margin:0 0 18px;
    padding:0;
    border:0;
    background:transparent;
  }

  .admin-app .dashboardSearchResultsTitle{
    margin:0;
  }

  .admin-app .dashboardSearchResultsLead{
    margin-top:8px;
  }

  

  

  

  

  
}

.admin-app .dashboardSearchResultsEyebrow{
  display:none;
}

.admin-app .dashboardSearchResultsBody,
.admin-app .dashboardSearchResultsBody .searchGroup,
.admin-app .dashboardSearchResultsBody .searchResultItem,
.admin-app .dashboardSearchResultsBody .searchEmpty{
  background:var(--ju-card);
  background-image:none;
  box-shadow:none;
}

.admin-app .dashboardSearchResultsBody .searchGroup{
  margin-top:22px;
  padding-top:18px;
}

.admin-app .dashboardSearchResultsBody .searchResultItem{
  padding:14px 0;
}

.admin-app .is-hidden-by-view{
  display:none;
}

/* ========================================
   - remove foreign white page feel
   - use dashboard background and linear result hierarchy
   - emphasize section headers with gold divider

.admin-app .dashboardSearchResultsHost,
.admin-app .dashboardSearchResultsHead,
.admin-app .dashboardSearchResultsBody,
.admin-app .dashboardSearchResultsBody .searchGroup,
.admin-app .dashboardSearchResultsBody .searchResultItem,
.admin-app .dashboardSearchResultsBody .searchEmpty{
  background:transparent;
  background-image:none;
  border-radius:0;
  box-shadow:none;
}

.admin-app .dashboardSearchResultsHost{
  margin:0 0 28px;
  padding:0;
}

.admin-app .dashboardSearchResultsHead{
  margin:0 0 18px;
  padding:0;
}

.admin-app .dashboardSearchResultsTitle{
  margin:0;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ju-text-strong);
}

.admin-app .dashboardSearchResultsLead{
  margin:8px 0 0;
  font-size:14px;
  color:var(--ju-text-muted);
}

.admin-app .dashboardSearchResultsBody .searchGroup{
  margin-top:26px;
  padding-top:0;
  border-top:0;
}

.admin-app .dashboardSearchResultsBody .searchGroupHead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:0 0 12px;
  padding:0;
}

.admin-app .dashboardSearchResultsBody .searchGroupTitle{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0;
  min-width:0;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.01em;
  color:var(--ju-text-strong);
}

.admin-app .dashboardSearchResultsBody .searchGroupTitle::before{
  content:"";
  display:inline-block;
  width:34px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--ju-gold) 0%, var(--ju-gold) 100%);
  box-shadow:0 0 0 1px var(--ju-shadow-color-soft);
}

.admin-app .dashboardSearchResultsBody .searchGroupCount{
  padding:5px 11px;
  border-radius:999px;
  background:var(--ju-shell-text-soft);
  border:1px solid var(--ju-border);
  color:var(--ju-text-strong);
  font-size:12px;
  font-weight:800;
}

.admin-app .dashboardSearchResultsBody .searchResultList{
  display:grid;
  gap:0;
}

.admin-app .dashboardSearchResultsBody .searchResultItem{
  display:grid;
  gap:10px;
  padding:16px 0;
  border-top:1px solid var(--ju-border);
}

.admin-app .dashboardSearchResultsBody .searchResultList .searchResultItem:first-child{
  border-top:1px solid var(--ju-border-strong);
}

.admin-app .dashboardSearchResultsBody .searchResultTop{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:14px;
}

.admin-app .dashboardSearchResultsBody .searchResultBody{
  gap:4px;
}

.admin-app .dashboardSearchResultsBody .searchResultTitle{
  font-size:22px;
  line-height:1.14;
  font-weight:850;
  letter-spacing:-0.015em;
  color:var(--ju-text-strong);
}

.admin-app .dashboardSearchResultsBody .searchResultItem--code-title .searchResultTitle{
  font-size:17px;
  line-height:1.2;
  letter-spacing:.01em;
}

.admin-app .dashboardSearchResultsBody .searchResultSub{
  font-size:15px;
  line-height:1.5;
  color:var(--ju-text-muted);
}

.admin-app .dashboardSearchResultsBody .searchResultMeta{
  font-size:13px;
  line-height:1.55;
  color:var(--ju-text-muted);
}

.admin-app .dashboardSearchResultsBody .searchResultBadge{
  align-self:start;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--ju-accent-line);
  background:var(--ju-accent-soft);
  color:var(--ju-warning);
  font-size:12px;
  font-weight:800;
}

.admin-app .dashboardSearchResultsBody .searchActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding-top:0;
}

.admin-app .dashboardSearchResultsBody .searchAction{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ju-text-strong);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  box-shadow:none;
}

.admin-app .dashboardSearchResultsBody .searchAction::after{
  content:"→";
  display:inline-block;
  margin-left:6px;
  color:var(--ju-warning);
  transition:transform .18s ease;
}

.admin-app .dashboardSearchResultsBody .searchAction:hover{
  color:var(--ju-text-strong);
}

.admin-app .dashboardSearchResultsBody .searchAction:hover::after{
  transform:translateX(2px);
}

.admin-app .dashboardSearchResultsBody .searchAction--primary{
  color:var(--ju-text-strong);
}

.admin-app .dashboardSearchResultsBody .searchEmpty{
  margin-top:14px;
  padding:18px 0;
  border-top:1px dashed var(--ju-border-strong);
  color:var(--ju-text-muted);
}

@media (max-width:760px){
  .admin-app .dashboardSearchResultsBody .searchGroupHead{
    grid-template-columns:1fr;
  }

  .admin-app .dashboardSearchResultsTitle{
    font-size:26px;
  }

  .admin-app .dashboardSearchResultsBody .searchGroupTitle{
    font-size:20px;
  }

  .admin-app .dashboardSearchResultsBody .searchResultTitle{
    font-size:18px;
  }
}

/* ==========================================================================
   Core components: buttons, forms, badges and toolbars
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--ju-border-strong);
  border-radius:6px;
  background:var(--ju-card);
  color:var(--ju-text-strong);
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    color var(--ju-motion-fast) var(--ju-ease-standard),
    box-shadow var(--ju-motion-fast) var(--ju-ease-standard),
    transform var(--ju-motion-fast) var(--ju-ease-standard);
}

.btn:hover,
.btn:focus{
  background:var(--ju-soft);
  border-color:var(--ju-accent-line);
  color:var(--ju-text-strong);
  outline:none;
}

.btn:focus-visible{
  box-shadow:0 0 0 3px var(--ju-accent-focus);
}

.btn[disabled],
.btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

.btn-primary{
  background:var(--ju-gold);
  border-color:var(--ju-gold);
  color:var(--ju-anth);
}

.btn-primary:hover,
.btn-primary:focus{
  background:var(--ju-gold);
  border-color:var(--ju-gold);
  color:var(--ju-anth);
  box-shadow:0 0 0 3px var(--ju-accent-focus);
}

.btn-secondary{
  background:var(--ju-card);
  border-color:var(--ju-border);
  color:var(--ju-text-strong);
}

.btn-secondary:hover,
.btn-secondary:focus{
  background:var(--ju-soft);
  border-color:var(--ju-accent-line);
}

.btn-danger{
  background:var(--ju-danger-bg);
  border-color:var(--ju-danger-line);
  color:var(--ju-danger);
}

.btn-danger:hover,
.btn-danger:focus{
  background:var(--ju-danger-bg);
  border-color:var(--ju-danger);
  color:var(--ju-danger);
}

.btn-sm{
  min-height:32px;
  padding:0 10px;
  font-size:12px;
}

.btn-icon{
  width:38px;
  padding:0;
}

.form-field{
  display:grid;
  gap:6px;
  min-width:0;
}

.form-label{
  color:var(--ju-text-strong);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.form-label--hidden{
  display:none;
}

.form-label--block{
  display:block;
  margin-bottom:8px;
}

.form-label--compact{
  margin:0 0 6px;
}

.form-label--upper{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ju-text-muted);
}

.field-min-0 > *,
.field-min-0{
  min-width:0;
}


.form-hint{
  color:var(--ju-text-muted);
  font-size:12px;
  line-height:1.45;
}

.input,
.select,
.textarea{
  width:100%;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--ju-border-strong);
  border-radius:6px;
  background:var(--ju-card);
  color:var(--ju-text-strong);
  font:inherit;
  box-shadow:none;
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    color var(--ju-motion-fast) var(--ju-ease-standard),
    box-shadow var(--ju-motion-fast) var(--ju-ease-standard);
}

.input::placeholder,
.textarea::placeholder{
  color:var(--ju-text-subtle);
}

.input:focus,
.select:focus,
.textarea:focus{
  outline:none;
  border-color:var(--ju-gold);
  box-shadow:0 0 0 3px var(--ju-accent-focus);
}

.input[disabled],
.select[disabled],
.textarea[disabled],
.input[readonly],
.select[readonly],
.textarea[readonly]{
  background:var(--ju-soft);
  color:var(--ju-text-muted);
  cursor:not-allowed;
}

.textarea{
  min-height:120px;
  padding-top:10px;
  padding-bottom:10px;
  resize:vertical;
}

.select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ju-text-muted) 50%),
    linear-gradient(135deg,var(--ju-text-muted) 50%,transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:32px;
}

.badge,
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:24px;
  padding:0 9px;
  border:1px solid var(--ju-border);
  border-radius:999px;
  background:var(--ju-soft);
  color:var(--ju-text-muted);
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

.badge-success,
.pill-success{
  background:var(--ju-success-bg);
  border-color:var(--ju-success);
  color:var(--ju-success);
}

.badge-warning,
.pill-warning{
  background:var(--ju-warning-bg);
  border-color:var(--ju-accent-line);
  color:var(--ju-warning);
}

.badge-danger,
.pill-danger{
  background:var(--ju-danger-bg);
  border-color:var(--ju-danger-line);
  color:var(--ju-danger);
}

.badge-muted,
.badge-neutral,
.pill-muted{
  background:var(--ju-soft);
  border-color:var(--ju-border);
  color:var(--ju-text-muted);
}

.ui-toolbar{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
}

.ui-toolbar--between{
  justify-content:space-between;
}

.ui-toolbar--end{
  justify-content:flex-end;
}

@media (prefers-reduced-motion: reduce){
  .btn,
  .input,
  .select,
  .textarea{
    transition:none;
  }
}

/* ==== Core UI system (Styleguide v2) ==== */

.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin:0 0 var(--ju-header-gap);
}

.page-header-title{
  display:grid;
  gap:8px;
  position:relative;
  padding-left:14px;
}

.page-header-title::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:3px;
  border-radius:2px;
  background:var(--ju-gold);
  opacity:.55;
}

.page-title{
  margin:0 0 10px;
  font-size:54px;
  line-height:.96;
  letter-spacing:-.04em;
  font-weight:700;
  color:var(--ju-text-strong);
}

.page-subtitle{
  margin:0;
  max-width:72ch;
  color:var(--ju-text-muted);
  font-size:15px;
  line-height:1.5;
}

.page-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  color:var(--ju-text-muted);
  font-size:14px;
  line-height:1.5;
}

.page-meta strong{
  color:var(--ju-text-strong);
  font-weight:800;
}

.page-meta-sep{
  color:var(--ju-text-subtle);
}

.page-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.page-header--compact .page-title{
  font-size:46px;
  line-height:1;
}

.page-header--document{
  margin:2px 0 18px;
}

.page-header--stack{
  display:grid;
  gap:8px;
}

.header-stack{
  display:grid;
  gap:16px;
  margin:0 0 18px;
}

.section{
  display:grid;
  gap:14px;
}

.section-header{
  display:grid;
  gap:4px;
}

.section-title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:var(--ju-text-strong);
}

.section-lead{
  margin:0;
  color:var(--ju-text-muted);
  font-size:13px;
  line-height:1.5;
}

.section-header--flush{
  padding:0 0 10px;
  margin:0;
  border-bottom:0;
}

.section-content--flush{
  padding:0;
}

.empty-state--flush{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}

.page-meta--tight{
  margin-bottom:12px;
}

.table-sort{
  width:100%;
  padding:12px 14px;
  border:0;
  background:transparent;
  text-align:left;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ju-text-muted);
  cursor:pointer;
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    color var(--ju-motion-fast) var(--ju-ease-standard),
    box-shadow var(--ju-motion-fast) var(--ju-ease-standard),
    opacity var(--ju-motion-fast) var(--ju-ease-standard),
    transform var(--ju-motion-fast) var(--ju-ease-standard);
}

.table-sort:hover,
.table-sort:focus{
  color:var(--ju-text-strong);
  outline:none;
}

.table-sort.is-active{
  color:var(--ju-text-strong);
  border-bottom:2px solid var(--ju-gold);
}

.table-sort.is-active::after{
  content:"▾";
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  transform:translateY(-1px);
}

.table-sort[data-sort-dir="asc"].is-active::after{
  content:"▴";
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--ju-border);
  border-radius:10px;
  background:var(--ju-card);
  position:relative;
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    box-shadow var(--ju-motion-fast) var(--ju-ease-standard),
    opacity var(--ju-motion-fast) var(--ju-ease-standard),
    transform var(--ju-motion-fast) var(--ju-ease-standard);
}

.table-wrap::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:var(--ju-table-accent-line);
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  pointer-events:none;
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    opacity var(--ju-motion-fast) var(--ju-ease-standard);
}

.table-wrap.is-linked{
  padding-left:12px;
}

.table-wrap.is-linked::after{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:2px;
  background:var(--ju-table-left-accent);
  opacity:.55;
  pointer-events:none;
}

.table-wrap.is-linked::before{
  left:12px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.table th,
.table td{
  padding:11px 10px;
  border-bottom:1px solid var(--ju-border);
  text-align:left;
  vertical-align:top;
}

.table th{
  color:var(--ju-text-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--ju-soft);
  border-bottom:2px solid var(--ju-gold);
}

.table tbody tr > td{
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    color var(--ju-motion-fast) var(--ju-ease-standard),
    box-shadow var(--ju-motion-fast) var(--ju-ease-standard);
}

.table tbody tr:hover > td{
  background:var(--ju-accent-hover);
}

.table tr.is-selected > td,
.table tbody tr.is-selected:hover > td{
  background:var(--ju-selected-bg);
  box-shadow:inset 0 1px 0 var(--ju-accent-line), inset 0 -1px 0 var(--ju-accent-line);
}

.table tr.is-selected{
  outline:1px solid var(--ju-accent-line);
  outline-offset:-1px;
}

.table tr.is-selected > td:first-child{
  position:relative;
  box-shadow:
    inset 3px 0 0 var(--ju-selected-line),
    inset 0 1px 0 var(--ju-accent-line),
    inset 0 -1px 0 var(--ju-accent-line);
}

.table-actions{
  text-align:right;
  white-space:nowrap;
}

.table-amount{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.table-status{
  white-space:nowrap;
}

.table-empty-cell{
  text-align:center;
  color:var(--ju-text-muted);
  padding:24px 16px;
}

.table-compact th,
.table-compact td{
  padding-top:9px;
  padding-bottom:9px;
}

.table-subline{
  display:inline-block;
  margin-top:4px;
  color:var(--ju-text-muted);
  font-size:12px;
  line-height:1.4;
}

.table-filters{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 var(--ju-header-gap);
}

.table-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--ju-border);
  border-radius:999px;
  background:var(--ju-card);
  color:var(--ju-text-muted);
  font-size:13px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:
    background-color var(--ju-motion-fast) var(--ju-ease-standard),
    border-color var(--ju-motion-fast) var(--ju-ease-standard),
    color var(--ju-motion-fast) var(--ju-ease-standard),
    box-shadow var(--ju-motion-fast) var(--ju-ease-standard);
}

.table-filter:hover,
.table-filter:focus{
  background:var(--ju-soft);
  border-color:var(--ju-accent-line);
  color:var(--ju-text-strong);
  outline:none;
}

.table-filter.is-active,
.table-filter[aria-pressed="true"],
.table-filter[aria-current="true"],
.table-filter[data-active="true"]{
  background:var(--ju-accent-soft);
  border-color:var(--ju-accent-line);
  color:var(--ju-text-strong);
  box-shadow:inset 0 0 0 1px var(--ju-accent-line);
}

.metric-grid--compact{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.pageAlert{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.pageAlert--soft{
  background:var(--ju-accent-soft);
  border:1px solid var(--ju-accent-focus);
  border-radius:6px;
  padding:12px 14px;
}

/* workbar-only shell cleanup */
.appShellGrid--document.docGrid,
.appShellGrid--settings.settingsShell,
.appShellGrid--compact.articleShell,
.appShellGrid--compact.tasksShell,
.appShellGrid--dms.dmsGrid,
.appShellGrid--dms-view.dmsViewGrid{
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}

@media (max-width:980px){
  .metric-grid--compact{
    grid-template-columns:1fr;
  }
}

@media (max-width:860px){
  .page-header{
    gap:14px;
  }

  .page-title{
    font-size:40px;
  }

  .form-row,
  .form-grid{
    grid-template-columns:1fr;
  }

  .table-filters{
    gap:8px;
  }

  .table-filter{
    min-height:34px;
    padding:0 11px;
  }
}

@media (max-width:640px){
  .page-header-title{
    padding-left:10px;
  }

  .page-header-title::before{
    width:2px;
    opacity:.4;
  }

  .page-header{
    margin:0 0 14px;
  }

  .table-filters{
    margin:0 0 14px;
  }

  .table-wrap{
    border-radius:8px;
  }

  .table-wrap::before{
    border-top-left-radius:8px;
    border-top-right-radius:8px;
  }

  .table-wrap.is-linked{
    padding-left:10px;
  }

  .table-wrap.is-linked::after{
    top:8px;
    bottom:8px;
    width:2px;
    opacity:.4;
  }

  .table-wrap.is-linked::before{
    left:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-header-title,
  .page-header-title::before,
  .table-wrap,
  .table-wrap::before,
  .table tbody tr > td,
  .table-filter,
  .table-sort{
    transition:none;
  }
}

/* ==========================================================================
   Final utilities: visibility and spacing
   ========================================================================== */

.is-hidden{
  display:none;
}

.stack-top-sm{
  margin-top:12px;
}

.stack-top-md{
  margin-top:16px;
}

.auth-card--narrow{
  max-width:560px;
  margin:0 auto;
}

.section-lead--spaced-sm{
  margin-top:4px;
}

.section-lead--spaced-md{
  margin-top:8px;
}

.section-header--document{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin:0 0 14px;
}

/* ==== Core layout/form helpers (Styleguide v2) ==== */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.form-grid--single{
  grid-template-columns:1fr;
}

.form-grid--toolbar{
  grid-template-columns:minmax(220px,1fr) minmax(160px,auto) minmax(120px,auto) auto;
  align-items:end;
}

.form-row{
  display:grid;
  gap:8px;
}

.form-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.form-actions--end{
  justify-content:flex-end;
}

.form-field--span-2{
  grid-column:1 / -1;
}

.layout-main{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:16px;
  align-items:start;
}

.layout-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.card-collapsible summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;
  list-style:none;
}

.card-collapsible summary::-webkit-details-marker{
  display:none;
}

.card-collapsible summary::after{
  content:"▾";
  float:right;
  color:var(--ju-text-muted);
}

.card-collapsible:not([open]) summary::after{
  content:"▸";
}

.card-collapsible .card-b{
  border-top:1px solid var(--ju-border);
}

@media (max-width:980px){
  .layout-main,
  .layout-grid-2,
  .form-grid,
  .form-grid--toolbar{
    grid-template-columns:1fr;
  }
}

/* ==== Core UI refinements (Styleguide v2) ==== */
.ui-toolbar--stretch{
  width:100%;
}

.ui-toolbar--stretch .form-field{
  flex:1 1 220px;
  min-width:180px;
}

.ui-toolbar--stretch .form-field:first-child{
  flex:2 1 360px;
}

.ui-toolbar--stretch .input,
.ui-toolbar--stretch .select{
  width:100%;
}

.layout-main,
.layout-grid-2,
.metric-grid{
  margin-bottom:16px;
}

.card-collapsible{
  margin-top:14px;
}

.card-collapsible summary:hover{
  background:var(--ju-soft);
}


.required-marker{ color:var(--ju-danger); font-weight:800; }
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid{
  border-color:var(--ju-danger);
  background:var(--ju-danger-bg);
  box-shadow:0 0 0 3px rgba(170,58,48,.12);
}

/* ==== Document viewer + review field states ==== */
.input--autofilled,
.select.input--autofilled{
  background:var(--ju-warning-bg);
  border-color:var(--ju-accent-line);
}

.documentViewer{
  display:grid;
  gap:12px;
}

.documentViewerViewport{
  position:relative;
  min-height:220px;
  max-height:78vh;
  overflow:auto;
  padding:12px;
  border:1px solid var(--ju-border);
  border-radius:6px;
  background:var(--ju-soft);
}

.documentViewerCanvasHost{
  display:grid;
  justify-items:center;
}

.documentViewerCanvas{
  max-width:100%;
  height:auto;
  background:var(--ju-card);
  border:1px solid var(--ju-border);
  border-radius:6px;
  box-shadow:var(--ju-shadow);
}

.documentViewerLoading,
.documentViewerFallback{
  padding:16px;
  border:1px solid var(--ju-border);
  border-radius:6px;
  background:var(--ju-card);
  color:var(--ju-text-muted);
}

.documentViewerActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.documentViewerPager{
  margin-top:10px;
}
/* ==== Candidate review preview alignment ==== */
.candidateReviewPreviewGrid{
  align-items:start;
}

.candidateReviewPreviewGrid > .card-collapsible{
  min-height:0;
}

.candidateReviewPreviewGrid > .card-collapsible[open]{
  display:flex;
  flex-direction:column;
}

.candidateReviewPreviewGrid > .card-collapsible[open] .card-b{
  flex:1 1 auto;
  height:70vh;
  min-height:420px;
  overflow:auto;
}

.candidateReviewMailText{
  line-height:1.65;
  white-space:normal;
}

.candidateReviewMailText a{
  color:var(--ju-link);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.candidateReviewPreviewGrid .documentViewerViewport{
  max-height:calc(70vh - 54px);
}

@media (max-width:980px){
  .candidateReviewPreviewGrid > .card-collapsible[open] .card-b{
    height:auto;
    min-height:0;
  }

  .candidateReviewPreviewGrid .documentViewerViewport{
    max-height:78vh;
  }
}
.documentViewerImage{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  background:var(--ju-card);
  border:1px solid var(--ju-border);
  border-radius:6px;
  box-shadow:var(--ju-shadow);
}

.attachment-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.attachment-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:6px 10px;
  border:1px solid var(--ju-border);
  border-radius:999px;
  background:var(--ju-soft);
  color:var(--ju-text);
  font-size:13px;
  line-height:1.2;
  text-decoration:none;
}

.attachment-chip.is-active{
  background:var(--ju-warning-bg);
  border-color:var(--ju-accent-line);
  font-weight:700;
}

.attachment-chip.is-muted{
  color:var(--ju-text-muted);
}

/* ==== PDF password overlay ==== */
.documentViewerViewport{
  position:relative;
}

.pdfPasswordOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(255,255,255,.82);
  z-index:2;
}

.pdfPasswordCard{
  width:min(100%, 360px);
  box-shadow:var(--ju-shadow);
}

.pdfPasswordNotice{
  margin-top:10px;
}

.scanOcrPanel{ margin: var(--space-4, 1rem) 0; }
.scanOcrProgress{ margin-top: var(--space-3, .75rem); }
.scanOcrProgressBar{ width: 100%; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.scanOcrProgressBar span{ display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ju-gold); transition: width .25s ease; }
.scanOcrPreview{ margin-top: var(--space-3, .75rem); }
.scanOcrTextPreview{ max-height: 18rem; overflow: auto; white-space: pre-wrap; }

/* ==== Generic file dropzone ==== */
.fileDropzone{
  display:grid;
  gap:8px;
  padding:18px 20px;
  min-height:132px;
  align-items:center;
  justify-items:center;
  text-align:center;
  border:2px dashed var(--ju-border-strong);
  border-radius:6px;
  background:var(--ju-card);
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.fileDropzone--compact{min-height:0;padding:14px 16px;}
.fileDropzone.is-dragover{border-color:var(--ju-accent-line);background:var(--ju-accent-soft);}
.fileDropzoneTitle{font-weight:800;color:var(--ju-text-strong);}
.fileDropzoneHint{font-size:12px;color:var(--ju-text-muted);line-height:1.4;}
.fileDropzoneFile{font-weight:700;color:var(--ju-text-strong);}

/* Generic progress pattern (OCR, imports, bulk processing) */
.progressRail{width:100%;height:.55rem;border-radius:999px;overflow:hidden;background:var(--surface-2);}
.progressRail span{display:block;width:0;height:100%;border-radius:inherit;background:var(--ju-gold);transition:width .25s ease;}
.progressMeta{margin-top:var(--space-2,.5rem);font-size:12px;color:var(--ju-text-muted);}