/* TrinoTime Cloud v1.0.4 — Signature Standard UI
   Adapted from the supplied TrinoTime reference package as the default workspace UI.
   Presentation only: no billing, tenant, payroll, attendance, schedule, leave, or auth logic changes. */

:root{
  --tt-sidebar:266px;
  --tt-sidebar-compact:88px;
  --tt-right-rail:316px;
  --tt-gutter:24px;
  --tt-canvas:#F8FAFC;
  --tt-surface:#FFFFFF;
  --tt-surface-soft:rgba(255,255,255,.86);
  --tt-line:#E6EAF0;
  --tt-line-soft:#EEF1F4;
  --tt-ink:#17191D;
  --tt-muted:#697386;
  --tt-soft:#98A2B3;
  --tt-gold:#C78B18;
  --tt-gold-dark:#9F6810;
  --tt-gold-pale:#FFF5DF;
  --tt-green:#2EA966;
  --tt-red:#B95B57;
  --tt-blue:#5D72D8;
  --tt-shadow:0 18px 55px rgba(15,23,42,.07),0 2px 10px rgba(15,23,42,.035);
  --tt-shadow-hover:0 22px 58px rgba(15,23,42,.095),0 4px 16px rgba(15,23,42,.05);
  --tenant-primary:var(--tt-gold);
  --tenant-accent:var(--tt-gold);
  --bg:var(--tt-canvas);
  --card:var(--tt-surface);
  --line:var(--tt-line);
  --text:var(--tt-ink);
  --muted:var(--tt-muted);
}

html,body{background:var(--tt-canvas);color:var(--tt-ink)}
body{font-family:Poppins,'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
button,input,select,textarea{font-family:inherit}

/* Release strip */
.demo-banner{
  height:30px!important;
  background:#F1F4F7!important;
  color:#7A8492!important;
  border-bottom:1px solid #E5E9EF!important;
  font-size:8px!important;
  letter-spacing:.08em!important;
}

/* ---------- Workspace shell ---------- */
.app-shell{display:block!important;height:calc(100vh - 30px)!important;height:calc(100dvh - 30px)!important;background:var(--tt-canvas)!important}
.app-shell.hidden{display:none!important}
.sidebar{
  position:fixed!important;
  top:30px;bottom:0;left:0;
  width:var(--tt-sidebar)!important;
  padding:18px 18px 16px!important;
  overflow-y:auto;overflow-x:hidden;
  background:rgba(255,255,255,.97)!important;
  color:var(--tt-ink)!important;
  border-right:1px solid var(--tt-line)!important;
  box-shadow:5px 0 28px rgba(15,23,42,.035)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.04);
  backdrop-filter:blur(18px) saturate(1.04);
  transition:width .2s ease,padding .2s ease;
  z-index:130!important;
}
.app-main{
  height:100%!important;
  margin-left:var(--tt-sidebar)!important;
  min-width:0!important;
  background:var(--tt-canvas)!important;
  transition:margin-left .2s ease;
}
body.tt-sidebar-compact .sidebar{width:var(--tt-sidebar-compact)!important;padding-left:14px!important;padding-right:14px!important}
body.tt-sidebar-compact .app-main{margin-left:var(--tt-sidebar-compact)!important}

/* Brand */
.app-brand{
  min-height:58px;padding:4px 4px 15px!important;gap:10px!important;color:var(--tt-ink)!important;
  font-family:Poppins,sans-serif!important;font-size:29px!important;font-weight:700!important;
  letter-spacing:-.055em!important;text-transform:none!important;
}
.app-brand img{width:34px!important;height:34px!important;filter:drop-shadow(0 8px 16px rgba(159,104,16,.10))}
.app-brand>span{font-size:0}
.app-brand>span::before{content:'Trino';font-size:29px;background:linear-gradient(108deg,#7D4D09 0%,#BF7E12 17%,#F7D789 39%,#C4871C 55%,#8A570D 71%,#E6B85B 86%,#A5680F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.app-brand em{font-size:29px!important;color:#24272D!important;font-style:normal!important;font-weight:700!important;margin-left:2px!important;letter-spacing:-.055em!important}

.workspace-switcher{
  min-height:63px!important;margin:0 0 18px!important;padding:12px 13px!important;
  border:1px solid #E7EAF0!important;border-radius:13px!important;background:rgba(255,255,255,.78)!important;
  color:var(--tt-ink)!important;box-shadow:0 8px 24px rgba(15,23,42,.025)!important;
}
.workspace-avatar{width:32px!important;height:32px!important;border-radius:9px!important;background:linear-gradient(145deg,#FFF8E5,#E3B64E)!important;color:#76500D!important}
.workspace-switcher small{color:#98A2B3!important;font-size:7px!important;letter-spacing:.12em!important}
.workspace-switcher strong{color:inherit!important;font-size:10px!important;font-weight:600!important}
.workspace-switcher>span:last-child{color:#9CA3AF}

.side-nav{gap:4px!important}
.side-nav button,.sidebar-bottom button{
  min-height:46px!important;padding:0 12px!important;border-radius:10px!important;color:#303641!important;
  font-size:11px!important;font-weight:500!important;gap:12px!important;transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
.side-nav button>span,.sidebar-bottom button>span{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;color:#717B89!important}
.side-nav button svg,.sidebar-bottom button svg{width:18px;height:18px;stroke-width:1.8}
.side-nav button:hover,.sidebar-bottom button:hover{background:#F7F8FA!important;color:#1F242C!important}
.side-nav button.active{background:linear-gradient(90deg,#FFF6E7,#F9EDDA)!important;color:#3D2A0A!important;box-shadow:inset 0 0 0 1px rgba(197,135,27,.13)!important}
.side-nav button.active>span{color:#B77812!important}
.side-nav button.active::after{content:'';width:5px;height:5px;border-radius:50%;background:#C78B18;margin-left:auto;box-shadow:0 0 0 4px rgba(199,139,24,.08)}
.nav-rule{background:#ECEFF3!important;margin:8px 5px!important}
.sidebar-bottom{border-top:1px solid #ECEFF3!important;padding-top:10px!important}
.sidebar-bottom a{color:#7D8795!important;font-size:9px!important;padding:9px 12px!important}
.sidebar-bottom a:hover{color:#9F6810!important}
.powered{color:#A1A9B4!important;font-size:7px!important}.powered strong{color:#7B8490!important}

#signatureSidebarToggle{
  width:100%;min-height:42px;border:1px solid #E7EAF0;border-radius:10px;background:#fff;color:#687383;
  display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;font-size:9px;font-weight:600;
}
#signatureSidebarToggle svg{width:16px;height:16px}
#signatureSidebarToggle:hover{background:#F8F9FB;color:#9F6810}
body.tt-sidebar-compact .app-brand{justify-content:center;padding-left:0!important;padding-right:0!important}
body.tt-sidebar-compact .app-brand>span,body.tt-sidebar-compact .workspace-switcher>div,body.tt-sidebar-compact .workspace-switcher>span:last-child,body.tt-sidebar-compact .side-nav button:not(.active)::after,body.tt-sidebar-compact .side-nav button i,body.tt-sidebar-compact .side-nav button{font-size:0!important}
body.tt-sidebar-compact .workspace-switcher{justify-content:center;padding:10px!important}
body.tt-sidebar-compact .side-nav button,.tt-sidebar-compact .sidebar-bottom button{justify-content:center;padding:0!important}
body.tt-sidebar-compact .side-nav button>span,.tt-sidebar-compact .sidebar-bottom button>span{margin:0!important}
body.tt-sidebar-compact .sidebar-bottom a,.tt-sidebar-compact .powered{display:none}
body.tt-sidebar-compact #signatureSidebarToggle span{display:none}

/* ---------- Header ---------- */
.app-topbar{
  min-height:76px!important;height:76px!important;padding:0 var(--tt-gutter)!important;background:rgba(248,250,252,.90)!important;
  border-bottom:1px solid rgba(226,231,238,.92)!important;box-shadow:0 4px 18px rgba(15,23,42,.025)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:110!important;
}
.app-topbar small{color:#8A93A0!important;font-size:8px!important;letter-spacing:.025em}
.app-topbar h1{font-family:Poppins,sans-serif!important;font-size:18px!important;font-weight:600!important;letter-spacing:-.025em!important;color:#20242B!important}
.connection-chip{border:1px solid #E2E7EC!important;background:rgba(255,255,255,.85)!important;color:#66717E!important;padding:7px 10px!important}
.user-menu{border:1px solid #E2E7EC!important;background:rgba(255,255,255,.86)!important;border-radius:12px!important;padding:6px 9px!important;box-shadow:0 8px 22px rgba(15,23,42,.03)!important}
.user-menu>span{background:linear-gradient(145deg,#FFF7E4,#E8C56D)!important;color:#76500D!important}
.user-menu strong{color:#252A32!important}.user-menu small{color:#8A94A1!important}
.user-popover{border-color:#E3E7EC!important;box-shadow:0 22px 50px rgba(15,23,42,.13)!important}

.content{padding:22px var(--tt-gutter) 42px!important;background:var(--tt-canvas)!important}
.view{max-width:1560px;margin:0 auto}

/* ---------- Dashboard layout ---------- */
.signature-overview-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--tt-right-rail);gap:20px;align-items:start}
.signature-overview-main{min-width:0}
.signature-right-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;align-self:start}
.signature-right-card{background:#fff;border:1px solid var(--tt-line);border-radius:14px;box-shadow:0 10px 32px rgba(15,23,42,.04);padding:15px}
.signature-right-head{display:flex;align-items:center;gap:8px;padding-bottom:11px;border-bottom:1px solid #EFF1F4;color:#2A3039;font-size:10px;font-weight:600}
.signature-right-head svg{width:16px;height:16px;color:#B77812}.signature-right-head button{margin-left:auto;border:0;background:none;color:#A26D13;font-size:8px;font-weight:600;padding:0}
.signature-announcement{display:grid;grid-template-columns:34px 1fr;gap:9px;padding-top:12px}.signature-announcement-icon{width:34px;height:34px;border-radius:10px;background:#FFF5DF;color:#A46B10;display:grid;place-items:center}.signature-announcement-icon svg{width:16px;height:16px}.signature-announcement strong{font-size:9px;color:#2C323B}.signature-announcement small{font-size:7px;color:#98A2B3}.signature-announcement p{grid-column:1/-1;margin:4px 0 0;color:#6F7885;font-size:8px;line-height:1.5}
.signature-upcoming{padding-top:12px}.signature-upcoming-top{display:flex;justify-content:space-between;gap:10px}.signature-upcoming-copy{display:flex;flex-direction:column;gap:4px}.signature-upcoming-copy strong{font-size:10px}.signature-upcoming-copy span{font-size:7px;color:#8E98A5}.signature-upcoming-status{align-self:flex-start;border-radius:999px;background:#E9F7F0;color:#2E9464;padding:5px 7px;font-size:6px;font-weight:700}.signature-upcoming-time{margin-top:14px;border:1px solid #ECEFF3;border-radius:11px;padding:12px;background:linear-gradient(145deg,#FCFDFE,#F8FAFC)}.signature-upcoming-time small{display:block;color:#98A2B3;font-size:6px;letter-spacing:.08em}.signature-upcoming-time strong{display:block;margin-top:5px;font-size:17px;font-weight:600;letter-spacing:-.03em;color:#242A32}.signature-upcoming-time span{display:block;margin-top:4px;font-size:7px;color:#7C8795}
.signature-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}.signature-quick-btn{min-height:64px;border:1px solid #E9EDF1;border-radius:11px;background:#FBFCFD;color:#4E5968;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:10px;font-size:7px;font-weight:600;text-align:left}.signature-quick-btn svg{width:17px;height:17px;color:#B77812}.signature-quick-btn:hover{background:#FFF9EE;border-color:#E7D2A7;color:#79500C;transform:translateY(-1px)}
.signature-system-row{display:flex;align-items:center;gap:8px;padding-top:12px;color:#687382;font-size:8px}.signature-system-row i{width:7px;height:7px;border-radius:50%;background:#33C375;box-shadow:0 0 0 4px rgba(51,195,117,.09)}.signature-system-row strong{margin-left:auto;color:#2EA966;font-size:7px}

/* Hero copied into standard workspace language */
.welcome-card{
  min-height:310px!important;padding:25px 28px!important;border:0!important;border-radius:0!important;color:#20242B!important;
  background:
    linear-gradient(180deg,rgba(248,250,252,.16) 0%,rgba(248,250,252,.04) 62%,rgba(248,250,252,.20) 100%),
    radial-gradient(circle at 21% 12%,rgba(255,240,215,.34),transparent 34%),
    url('../img/portal-cloud-1.webp') center 45%/cover no-repeat!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.58),0 12px 34px rgba(56,73,90,.07)!important;
  overflow:hidden!important;isolation:isolate!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(310px,430px)!important;gap:28px!important;align-items:center!important;
}
.welcome-card::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.40),rgba(255,255,255,.08) 54%,rgba(255,255,255,.30));z-index:0;pointer-events:none}
.welcome-card::after{display:none!important}.welcome-card>*{position:relative!important;z-index:1!important}
.welcome-card>div:first-child{max-width:650px}.welcome-card .live{display:inline-flex;align-items:center;color:#8D631A!important;font-size:8px!important;font-weight:700!important;letter-spacing:.12em!important}.welcome-card .live i{background:#C78B18!important;box-shadow:0 0 0 4px rgba(199,139,24,.10)!important}
.welcome-card h2{font-family:Poppins,sans-serif!important;font-size:clamp(33px,3vw,52px)!important;line-height:.98!important;font-weight:600!important;letter-spacing:-.055em!important;color:#1D2127!important;margin:15px 0 11px!important}.welcome-card p{max-width:580px!important;color:#616C79!important;font-size:10px!important;line-height:1.65!important}
.welcome-card>#inviteBtn{position:absolute!important;right:22px!important;bottom:20px!important;z-index:3!important}
.signature-hero-clock{justify-self:end;width:min(100%,410px);padding:23px 24px;border:1px solid rgba(255,255,255,.82);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 18px 48px rgba(49,64,79,.12),inset 0 1px 0 rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(1.05);backdrop-filter:blur(18px) saturate(1.05)}
.signature-hero-clock small{display:block;color:#7B8490;font-size:7px;letter-spacing:.14em;font-weight:700}.signature-hero-clock strong{display:block;margin:9px 0 2px;font-size:clamp(35px,3.5vw,54px);font-weight:600;letter-spacing:-.055em;color:#171A1F;font-variant-numeric:tabular-nums}.signature-hero-clock span{display:block;color:#6D7784;font-size:9px}.signature-clock-line{height:1px;background:linear-gradient(90deg,#C78B18,rgba(199,139,24,.08));margin:14px 0 12px}.signature-clock-meta{display:flex!important;align-items:center;justify-content:space-between!important;color:#7B8490!important;font-size:7px!important}.signature-clock-meta b{color:#2EA966;font-size:7px}

/* KPI + panel surfaces */
.metrics-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;margin-top:14px!important}
.metrics-grid article,.attendance-metrics article,.schedule-metrics article,.overtime-metrics article,.leave-metrics article,.report-metrics article,.payroll-metrics article,.billing-metrics article{
  background:#fff!important;border:1px solid var(--tt-line)!important;border-radius:13px!important;box-shadow:0 8px 28px rgba(15,23,42,.035)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.metrics-grid article:hover,.attendance-metrics article:hover,.schedule-metrics article:hover,.overtime-metrics article:hover,.leave-metrics article:hover,.report-metrics article:hover,.payroll-metrics article:hover,.billing-metrics article:hover{transform:translateY(-2px);box-shadow:var(--tt-shadow-hover)!important;border-color:#E2D4B8!important}
.metric-icon{background:#FFF7E8!important;color:#B77812!important}
.metrics-grid small,.attendance-metrics small,.schedule-metrics small,.overtime-metrics small,.leave-metrics small,.report-metrics small,.payroll-metrics small,.billing-metrics small{color:#8993A0!important}
.metrics-grid strong,.attendance-metrics strong,.schedule-metrics strong,.overtime-metrics strong,.leave-metrics strong,.report-metrics strong,.payroll-metrics strong,.billing-metrics strong{color:#22272E!important;font-family:Poppins,sans-serif!important;font-weight:600!important}
.dashboard-grid.identity-dashboard{grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr)!important;gap:12px!important}
.panel,.billing-plan-card,.report-trend-card,.team-card,.schedule-calendar-panel{border:1px solid var(--tt-line)!important;background:#fff!important;border-radius:13px!important;box-shadow:0 10px 32px rgba(15,23,42,.035)!important}
.panel-head h3{font-family:Poppins,sans-serif!important;font-weight:600!important;color:#252A31!important}.panel-head small{color:#919BA8!important}
.secure-chip{background:#EAF7F1!important;color:#2F8768!important}
.foundation-panel .panel-head small{font-size:0!important}.foundation-panel .panel-head small::after{content:'WORKSPACE SAFEGUARDS';font-size:6px;letter-spacing:.12em}.foundation-panel .panel-head h3{font-size:0!important}.foundation-panel .panel-head h3::after{content:'Protected by design';font-size:13px}.foundation-list i{background:#EAF7F1!important;color:#2F8768!important}.foundation-list small{color:#7D8794!important}
.next-release-panel{border:1px solid var(--tt-line)!important;background:linear-gradient(145deg,#FFFFFF,#FBFCFD)!important}.next-release-panel>span{background:#FFF4DE!important;color:#8E6015!important}

/* Light Pearl treatment across feature heroes */
.attendance-hero,.schedule-hero,.overtime-hero,.leave-hero,.reports-hero,.payroll-hero,.billing-hero{
  color:#20242B!important;border:1px solid var(--tt-line)!important;border-radius:16px!important;
  background:radial-gradient(circle at 85% 0%,rgba(222,177,77,.13),transparent 36%),linear-gradient(135deg,#FFFFFF,#F8FAFC)!important;
  box-shadow:0 12px 34px rgba(15,23,42,.04)!important;
}
.attendance-hero h2,.schedule-hero h2,.overtime-hero h2,.leave-hero h2,.reports-hero h2,.payroll-hero h2,.billing-hero h2{color:#20242B!important;font-family:Poppins,sans-serif!important;font-weight:600!important;letter-spacing:-.035em!important}
.attendance-hero p,.schedule-hero p,.overtime-hero p,.leave-hero p,.reports-hero p,.payroll-hero p,.billing-hero p,.attendance-hero .live,.schedule-hero .live,.overtime-hero .live,.leave-hero .live,.reports-hero .live,.payroll-hero .live,.billing-hero .live{color:#697386!important}
.attendance-clock{background:#171B21!important;border-color:#282E36!important;box-shadow:0 14px 34px rgba(23,27,33,.16)!important}.attendance-clock small{color:#B8C0CA!important}.attendance-clock strong{color:#FFFDF7!important}.attendance-clock span{color:#D5B568!important}

/* Buttons */
.primary-btn,.button:not(.button-ghost):not(.button-light),.billing-plan-card.current button{
  border:1px solid #B97E13!important;background:linear-gradient(145deg,#D6A342,#B77B12)!important;color:#FFFDF7!important;box-shadow:0 9px 20px rgba(145,94,10,.15),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.primary-btn:hover,.button:not(.button-ghost):not(.button-light):hover{filter:brightness(1.02);transform:translateY(-1px)}
.secondary-btn,.link-btn,.payroll-period-nav button,.schedule-controls button{border-color:#E1E6EC!important;background:#fff!important;color:#657080!important}
.secondary-btn:hover,.payroll-period-nav button:hover,.schedule-controls button:hover{border-color:#D9BF8A!important;color:#986611!important;background:#FFFBF4!important}
.link-btn{color:#9D6B14!important}.danger-btn{border-radius:9px!important}

/* Forms + tables */
input,select,textarea{border-color:#DFE4EA!important;background:#fff!important;color:#202732!important}
input:focus,select:focus,textarea:focus{border-color:#D0AD65!important;box-shadow:0 0 0 3px rgba(199,139,24,.10)!important}
.attendance-table-wrap,.report-table-wrap,.payroll-table-wrap,.people-table-wrap{border-color:#E7EBEF!important;background:#fff!important}
.attendance-table th,.report-table th,.payroll-table th,.people-table th{background:#F7F9FB!important;color:#7D8897!important}
.attendance-table td,.report-table td,.payroll-table td,.people-table td{border-color:#EDF0F3!important}
.status-chip.online,.payroll-status.approved{background:#EAF7F1!important;color:#2F8768!important}.payroll-status.locked{background:#171B21!important;color:#fff!important}

/* Modals: explicit stacking contract */
.modal-backdrop{z-index:900!important;background:rgba(17,24,39,.33)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.card-modal,.leave-modal,.payroll-modal,.overtime-modal{border:1px solid rgba(255,255,255,.84)!important;background:#fff!important;box-shadow:0 30px 90px rgba(15,23,42,.20)!important}
.brand-drawer{z-index:950!important}.drawer-backdrop{z-index:940!important}.toast{z-index:1100!important}

/* ---------- Auth/onboarding ---------- */
.gate-shell{background:
  linear-gradient(108deg,rgba(239,243,245,.22),rgba(242,244,245,.04)),
  url('../img/portal-cloud-2.webp') center/cover no-repeat!important}
.gate-layout{border-color:rgba(255,255,255,.78)!important;background:rgba(255,255,255,.90)!important;box-shadow:0 36px 90px rgba(44,59,73,.15)!important}
.gate-brand-panel{color:#1D2229!important;background:linear-gradient(118deg,rgba(255,255,255,.955),rgba(252,252,250,.93) 43%,rgba(246,248,249,.89) 72%,rgba(249,244,232,.84))!important;border-right:1px solid #E8EBEF!important}
.gate-brand{color:#1F242B!important}.gate-brand em{color:#A46D13!important}.gate-eyebrow{color:#956618!important}.gate-brand-panel h1{font-family:Poppins,sans-serif!important;color:#181C21!important}.gate-brand-panel p{color:#66717E!important}.security-note,.mini-security-grid span{border-color:#E7EAEF!important;background:rgba(255,255,255,.65)!important}.security-note b{color:#2F8768!important}.security-note span,.mini-security-grid small{color:#788391!important}.mini-security-grid b{color:#333A44!important}.gate-card{background:rgba(255,255,255,.92)!important}.auth-tabs button.active{box-shadow:0 6px 18px rgba(15,23,42,.07)!important}.loader-ring{border-top-color:#C78B18!important}.text-button{color:#986611!important}.trial-box{background:#FFF9ED!important;border-color:#F0DFC0!important}.trial-box b{color:#8F6116!important}.trial-box span{color:#806F50!important}

/* ---------- Marketing / setup / platform ---------- */
.site-header{background:rgba(248,250,252,.82)!important;border-color:#E6EAF0!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.brand{font-family:Poppins,sans-serif!important}.brand strong,.brand b{color:#1F242B!important}.hero{position:relative}.hero::before{content:'';position:absolute;inset:-50px 38% auto -20vw;height:520px;background:url('../img/portal-cloud-2.webp') center/cover no-repeat;border-radius:48px;opacity:.34;filter:saturate(.82) contrast(1.03);z-index:-1;pointer-events:none}.hero h1,.section-heading h2,.final-cta h2{font-family:Poppins,sans-serif!important;letter-spacing:-.05em!important}.eyebrow{color:#956618!important}.app-frame,.feature-card,.price-card,.security-panel,.brand-demo-card{border-color:#E3E7EC!important;box-shadow:var(--tt-shadow)!important}.price-card.featured{border-color:#D9BC82!important}.popular{background:#FFF2D6!important;color:#8A5D10!important}.final-cta{background:linear-gradient(135deg,#171B21,#2B3139)!important}.platform-header,.platform-shell>section,.wrap>section{border-color:#E5E9EF!important}.platform-header{background:rgba(248,250,252,.90)!important}

/* ---------- Responsive ---------- */
@media(max-width:1280px){
  .signature-overview-layout{grid-template-columns:1fr}.signature-right-rail{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.signature-right-card:last-child{grid-column:auto}
  .welcome-card{grid-template-columns:minmax(0,1fr) 340px!important}.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .sidebar{transform:translateX(-100%);width:266px!important;transition:transform .2s ease!important}.sidebar.open{transform:translateX(0)}.app-main,body.tt-sidebar-compact .app-main{margin-left:0!important}.mobile-menu{display:inline-grid!important;place-items:center!important}
  body.tt-sidebar-compact .sidebar{width:266px!important;padding:18px!important}.signature-right-rail{grid-template-columns:1fr 1fr}.welcome-card{grid-template-columns:1fr!important;min-height:0!important}.signature-hero-clock{justify-self:stretch;width:100%}.welcome-card>#inviteBtn{position:static!important;justify-self:start!important}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
  :root{--tt-gutter:14px}.app-topbar{height:68px!important;min-height:68px!important}.connection-chip{display:none!important}.signature-right-rail{grid-template-columns:1fr}.metrics-grid{grid-template-columns:1fr!important}.dashboard-grid.identity-dashboard{grid-template-columns:1fr!important}.welcome-card{padding:20px!important}.welcome-card h2{font-size:34px!important}.signature-hero-clock strong{font-size:39px}.signature-quick-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---------- v1.0.4.2 Readability + compact-navigation polish ----------
   User-requested readability pass: larger text at normal viewing distance,
   while preserving layout and horizontal scrolling for dense operational tables. */
:root{
  --tt-readable-body:13px;
  --tt-readable-small:10px;
  --tt-readable-table:12.5px;
  --tt-readable-table-head:10.5px;
}

/* Compact-navigation alignment: the general sidebar-bottom span rule used to
   constrain this label to an icon-sized box, which caused the words to wrap. */
#signatureSidebarToggle{
  min-height:48px!important;
  padding:0 14px!important;
  gap:10px!important;
  font-size:12.5px!important;
  line-height:1.2!important;
  text-align:center!important;
}
#signatureSidebarToggle>span{
  width:auto!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  line-height:1.2!important;
  margin:0!important;
  flex:0 1 auto!important;
}
#signatureSidebarToggle svg{width:18px!important;height:18px!important;flex:0 0 auto!important}
body.tt-sidebar-compact #signatureSidebarToggle>span{display:none!important}

/* Sidebar + top bar */
.demo-banner{font-size:10px!important}
.workspace-switcher small{font-size:9px!important}
.workspace-switcher strong{font-size:12px!important}
.workspace-avatar{font-size:10px!important}
.side-nav button,.sidebar-bottom button{font-size:13px!important;min-height:48px!important}
.side-nav button>span,.sidebar-bottom button>span{width:20px!important;height:20px!important}
.side-nav button svg,.sidebar-bottom button svg{width:20px!important;height:20px!important}
.sidebar-bottom a{font-size:11px!important}
.powered{font-size:9px!important}
.app-topbar small{font-size:10px!important}
.app-topbar h1{font-size:22px!important}
.connection-chip{font-size:10px!important}
.user-menu strong{font-size:12px!important}
.user-menu small,.user-menu b{font-size:10px!important}
.user-popover span,.user-popover button{font-size:11px!important}

/* Hero, KPI cards and right rail */
.welcome-card .live{font-size:10px!important}
.welcome-card p{font-size:13px!important;line-height:1.7!important}
.signature-hero-clock small{font-size:10px!important}
.signature-hero-clock span{font-size:11px!important}
.signature-clock-meta,.signature-clock-meta b{font-size:10px!important}
.metrics-grid small,.attendance-metrics small,.schedule-metrics small,.overtime-metrics small,.leave-metrics small,.report-metrics small,.payroll-metrics small,.billing-metrics small{font-size:11px!important}
.metrics-grid strong,.attendance-metrics strong,.schedule-metrics strong,.overtime-metrics strong,.leave-metrics strong,.report-metrics strong,.payroll-metrics strong,.billing-metrics strong{font-size:24px!important}
.metrics-grid span,.attendance-metrics span,.schedule-metrics span,.overtime-metrics span,.leave-metrics span,.report-metrics span,.payroll-metrics span,.billing-metrics span{font-size:10px!important}
.panel-head small{font-size:9.5px!important}
.panel-head h3{font-size:17px!important}
.secure-chip{font-size:10px!important;padding:6px 9px!important}
.signature-right-head{font-size:12px!important}
.signature-right-head button{font-size:10px!important}
.signature-announcement strong{font-size:12px!important}
.signature-announcement small{font-size:10px!important}
.signature-announcement p{font-size:11px!important}
.signature-upcoming-copy strong{font-size:12px!important}
.signature-upcoming-copy span,.signature-upcoming-status{font-size:10px!important}
.signature-upcoming-time small{font-size:9px!important}
.signature-upcoming-time span{font-size:10px!important}
.signature-quick-btn{font-size:10.5px!important}
.signature-system-row,.signature-system-row strong{font-size:10px!important}

/* Buttons, form controls and supporting copy */
.primary-btn,.secondary-btn,.link-btn,.button,.payroll-period-nav button,.schedule-controls button{font-size:12px!important}
.primary-btn,.secondary-btn{padding:11px 15px!important}
#appShell label,.card-modal label,.leave-modal label,.payroll-modal label,.overtime-modal label{font-size:11.5px!important}
#appShell input,#appShell select,#appShell textarea,.card-modal input,.card-modal select,.card-modal textarea{font-size:12.5px!important;line-height:1.35!important}
.form-message,.fine-print,.modal-note{font-size:10.5px!important;line-height:1.55!important}
.empty-table{font-size:12px!important}
.tiny-action{font-size:10px!important;padding:7px 9px!important}

/* Dense operational tables: increase readability and spacing; preserve horizontal scroll. */
.attendance-table th,.report-table th,.payroll-table th,.people-table th,.overtime-table th,.leave-table th{
  font-size:var(--tt-readable-table-head)!important;
  line-height:1.25!important;
  padding:12px 13px!important;
}
.attendance-table td,.report-table td,.payroll-table td,.people-table td,.overtime-table td,.leave-table td{
  font-size:var(--tt-readable-table)!important;
  line-height:1.35!important;
  padding:12px 13px!important;
}
.attendance-table td strong,.attendance-table td b,.report-table td strong,.payroll-table td strong,.people-table td strong,.overtime-table td strong,.leave-table td strong,
.person-cell strong,.report-person strong,.ot-person strong{font-size:12.5px!important}
.attendance-table td small,.report-person small,.person-cell small,.ot-person small,.leave-person small,.table-sub,.ot-dayoff{font-size:10px!important;line-height:1.35!important}
.attendance-state,.report-status,.payroll-status,.member-status,.invite-status,.leave-status,.ot-variance,.team-pill{font-size:10px!important;padding:6px 9px!important}
.row-action{font-size:10.5px!important;padding:7px 10px!important}

/* Payroll-specific readability */
.payroll-workflow span{font-size:10.5px!important}
.payroll-filters label,.payroll-period-panel label{font-size:11px!important}
.payroll-period-nav button{font-size:11px!important}
.payroll-paid-leave legend{font-size:11px!important}
.payroll-paid-leave label{font-size:11px!important}
.payroll-modal label{font-size:11.5px!important}

/* People/team management */
.people-tabs button{font-size:11px!important}
.people-filters input,.people-filters select{font-size:12px!important}
.team-card-copy small,.audit-item small,.audit-item time{font-size:9.5px!important}
.team-card-copy h4{font-size:14px!important}
.team-card-copy p,.audit-item strong{font-size:11px!important}
.row-actions{gap:7px!important}

/* Keep readable scale on tablets/mobile without forcing desktop-sized headings. */
@media(max-width:980px){
  #signatureSidebarToggle{font-size:12px!important}
  .side-nav button,.sidebar-bottom button{font-size:13px!important}
  .attendance-table td,.report-table td,.payroll-table td,.people-table td,.overtime-table td,.leave-table td{font-size:12px!important}
}
@media(max-width:650px){
  .app-topbar h1{font-size:20px!important}
  .panel-head h3{font-size:16px!important}
  .primary-btn,.secondary-btn,.button{font-size:11.5px!important}
}