/* Final shared layout guardrails.
   Keep this file loaded after page-local CSS so cockpit.digigen.us has one
   stable visual authority for shell, clock, admin, and call-mode layout. */
:root{
  --dg-shell-top:54px;
  --dg-clock-top:54px;
  --dg-call-next-top:0px;
  --dg-content:1180px;
  --dg-radius:8px;
  --dg-focus:0 0 0 3px rgba(0,115,234,.22);
  --dg-z-nav:120;
  --dg-z-clock:110;
  --dg-z-overlay:1400;
  --dg-z-toast:1500;
}

html{scroll-padding-top:118px;max-width:100%;overflow-x:hidden;overflow-x:clip}
body{letter-spacing:0;max-width:100%;overflow-x:hidden;overflow-x:clip}

.topnav{
  position:sticky!important;
  top:0!important;
  z-index:var(--dg-z-nav)!important;
  min-height:var(--dg-shell-top)!important;
  background:#fff!important;
  border-bottom:1px solid #d9e0ea!important;
  box-shadow:0 1px 0 rgba(16,24,40,.05)!important;
}

.topnav a,
.topnav button,
.btn{
  border-radius:var(--dg-radius)!important;
  min-height:44px;
  min-width:44px;
  white-space:nowrap;
}

.topnav a:focus-visible,
.topnav button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible{
  outline:2px solid transparent!important; outline-offset:2px;
  box-shadow:var(--dg-focus)!important;
}

.admin-actions.tight{margin-top:10px!important}
.admin-actions.block{margin:10px 0 12px!important}
.admin-actions.form-submit{margin-top:12px!important}
.admin-form-grid.user-form{margin-top:12px!important}
.admin-label.with-gap{margin-top:12px!important}
.targeting-card.full-span{grid-column:1/-1!important}
.targeting-warning.spaced{margin-top:12px!important}
.targeting-warning.compact{margin-top:8px!important}
.notice.compact{margin:8px 0 0!important}
.notice.flush{margin:0!important}
.admin-inline-note{font-size:12px!important}
.admin-form-help{margin-top:10px!important}
.pipeline-panel-hidden[hidden],
.owner-action-hidden[hidden]{display:none}
.work-progress-fill{width:var(--work-progress-width,0%)}
.submitted-score.flush{margin-top:10px;margin-bottom:0}
.submitted-box.spaced{margin-top:10px}
.manual-sub-field.saved-picker{margin-top:10px}
.manual-sub-context.warning{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
.manual-sub-context .work-location-note{margin-top:6px}
.draft-preview{
  font-family:var(--dg-font-ui,"Open Sans",Arial,Helvetica,sans-serif);
  background:#080a10;
  color:#dde3f0;
  padding:24px;
  line-height:1.5;
}

.tz-clock{
  position:sticky!important;
  top:var(--dg-clock-top)!important;
  z-index:var(--dg-z-clock)!important;
  width:min(var(--dg-content),calc(100% - 32px))!important;
  max-width:var(--dg-content)!important;
  height:auto!important;max-height:none!important;
  min-height:56px!important;
  margin:8px auto 10px!important;
  display:flex!important;
  grid-template-columns:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  background:#fff!important;
  border:1px solid #d0d5dd!important;
  border-radius:9px!important;
  box-shadow:0 6px 16px rgba(15,23,42,.06)!important;
  scrollbar-width:thin;
}

.tz-clock .tz-title{
  flex:0 0 112px!important;
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 10px!important;
  background:#f8fafc!important;
  border-right:1px solid #d0d5dd!important;
  color:#111827!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.6px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

.tz-clock .tz-row{
  flex:1 1 94px!important;
  min-width:88px!important;
  min-height:56px!important;
  padding:8px 8px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,auto) auto!important;
  grid-template-areas:"label label" "time ampm"!important;
  align-content:center!important;
  justify-content:center!important;
  column-gap:3px!important;
  row-gap:3px!important;
  border-right:1px solid #e4e7ef!important;
  border-bottom:0!important;
}

.tz-clock .tz-row:last-child{border-right:0}
.tz-clock .tz-row.tz-wide{flex-basis:104px!important;min-width:98px!important}

.tz-clock .tz-label{
  grid-area:label!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  color:#667085!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.5px!important;
  line-height:1!important;
  text-align:center!important;
  text-transform:uppercase!important;
}

.tz-clock .tz-abbr{
  color:#344054!important;
  font-size:8px!important;
  font-weight:950!important;
  letter-spacing:.4px!important;
}

.tz-clock .tz-time{
  grid-area:time!important;
  color:#111827!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-align:right!important;
  font-variant-numeric:tabular-nums!important;
}

.tz-clock .tz-ampm{
  grid-area:ampm!important;
  color:#667085!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:1.15!important;
  align-self:center!important;
  text-align:left!important;
}

.tz-clock .tz-active{
  background:#eaf3ff!important;
  box-shadow:inset 0 -3px 0 #0073ea!important;
}
.tz-clock .tz-business{background:#f7fffb!important}
.tz-clock .tz-after-hours{background:#fbfcff!important}
.tz-clock .tz-after-hours .tz-time{color:#344054!important}

.call-overlay{z-index:var(--dg-z-overlay)!important}
.call-next{
  position:sticky!important;
  top:0!important;
  z-index:7!important;
}
.call-tab-bar{
  position:sticky!important;
  top:var(--dg-call-next-top)!important;
  z-index:6!important;
}

.dg-toast,
#toast{z-index:var(--dg-z-toast)!important}

.admin-shell{
  grid-template-columns:minmax(220px,260px) minmax(0,1fr)!important;
}
.admin-rail{
  top:calc(var(--dg-shell-top) + 60px)!important;
  max-height:calc(100vh - var(--dg-shell-top) - 76px);
  overflow:auto;
  padding-right:2px;
}
.admin-nav button,
.admin-nav a{
  border-radius:999px!important;
  min-height:44px!important;
}
.admin-summary{
  grid-template-columns:repeat(5,minmax(150px,1fr))!important;
}
.admin-shell{grid-template-columns:250px minmax(0,1fr);gap:16px}main:has(.admin-shell){width:min(1360px,calc(100% - 32px))}
.admin-flow{
  grid-template-columns:repeat(5,minmax(150px,1fr))!important;
}
.admin-page-head,
.admin-panel,
.admin-metric,
.flow-card,
.targeting-card,
.action-card{
  border-radius:var(--dg-radius)!important;
}
.targeting-presets{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
  align-items:stretch;
}
.targeting-preset{
  width:100%;min-height:118px;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;align-items:start;justify-content:stretch;justify-items:start;gap:7px;
  border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--dg-radius)!important;
  background:#f8fbff;padding:13px 14px;color:#000;text-align:left;white-space:normal;box-shadow:none;line-height:1.2;
}
.targeting-preset:hover{
  border-color:#7aa7ff;background:#eef5ff;color:#000;
}
.targeting-preset b,
.targeting-preset span{
  width:100%;display:block;text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:normal;hyphens:auto;
}
.targeting-preset b{
  color:#000;font-size:13px;line-height:1.15;font-weight:950;
}
.targeting-preset span{
  margin:0;color:#000;font-size:11.5px;line-height:1.32;font-weight:750;
}
.targeting-grid{grid-template-columns:minmax(520px,1.12fr) minmax(430px,.88fr);gap:16px}
.targeting-card{padding:14px}.targeting-card textarea,.targeting-card input,.targeting-card select{box-sizing:border-box}
.targeting-card textarea{min-height:166px}.targeting-card textarea.compact{min-height:116px}
.sos-admin-list{gap:8px}.sos-admin-list div{padding:10px 11px}
.script-library-card textarea{
  min-height:220px;
}
.script-library-card textarea.tall{
  min-height:340px;
}
.script-library-tools{
  position:sticky;
  bottom:12px;
  z-index:5;
  padding:10px;
  margin:12px -4px -4px;
  background:rgba(255,255,255,.94);
  border:1px solid #e4e7ef;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  backdrop-filter:blur(10px);
}
button[data-admin-tab="scripts"]:not(.active){background:transparent;color:inherit;box-shadow:none}
.admin-quick-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

@media(max-width:1180px){
  .admin-summary,
  .admin-flow,
  .admin-quick-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .targeting-grid{grid-template-columns:1fr!important}
  .targeting-preset{min-height:0}
}

@media(max-width:980px){
  .admin-shell{grid-template-columns:1fr!important}
  .admin-rail{
    position:sticky!important;
    top:calc(var(--dg-clock-top) + 56px)!important;
    max-height:min(42vh,360px)!important;
    overflow:auto!important;
    padding:8px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid #d9e0ea!important;
    border-radius:10px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.08)!important;
    backdrop-filter:blur(10px);
    z-index:90;
  }
  .admin-nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-nav-title{grid-column:1/-1}
  .admin-summary,
  .admin-flow,
  .targeting-presets,
  .script-library-grid,
  .admin-quick-links{grid-template-columns:1fr!important}
}

@media(max-width:680px){
  html{scroll-padding-top:104px}
  .topnav{gap:6px!important;padding:8px 10px!important}
  .topnav .right{width:100%;margin-left:0!important;justify-content:flex-start!important}
  .tz-clock{
    width:calc(100% - 24px)!important;
    margin:8px 12px!important;
  }
  .tz-clock .tz-title{flex-basis:92px!important}
  .tz-clock .tz-row{min-width:82px!important}
  .call-next,
  .call-tab-bar{position:static!important;top:auto!important}
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}