/* TrinoTime Cloud v1.0.4.6 — UI/UX Production Polish + Diagnostics
   Presentation/accessibility only. No workforce, tenant, payroll or billing rules. */
:root{
  --tt-body-readable:14px;
  --tt-table-readable:13.5px;
  --tt-table-head-readable:11px;
  --tt-focus:#a86d0d;
  --tt-layer-sticky:200;
  --tt-layer-popover:420;
  --tt-layer-drawer:760;
  --tt-layer-overlay:900;
  --tt-layer-modal:1000;
  --tt-layer-critical:1100;
  --tt-layer-toast:1250;
}

/* Comfortable baseline + contrast */
.app-shell{font-size:var(--tt-body-readable)}
.app-main,.view,.panel{color:#1b2432}
.app-topbar h1,.view h2,.view h3,.view h4,.panel strong,.panel b{color:#182033}
.view p,.panel p{color:#536176;line-height:1.65}
.side-nav button,.sidebar-bottom button{font-size:14px!important}
.workspace-switcher strong{font-size:13px!important}
.workspace-switcher small{font-size:10px!important}
.app-topbar small{font-size:10.5px!important}.app-topbar h1{font-size:23px!important}
.user-menu strong{font-size:13px!important}.user-menu small{font-size:10.5px!important}
.connection-chip{font-size:10.5px!important;font-weight:650}
.connection-chip.is-offline{border-color:#e6c180!important;background:#fff7e7!important;color:#8a5b08!important}

/* Consistent clear glass hierarchy */
.panel,.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:rgba(255,255,255,.84)!important;
  border:1px solid rgba(219,226,236,.92)!important;
  box-shadow:0 14px 40px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);backdrop-filter:blur(16px) saturate(1.08);
}
.panel:hover{box-shadow:0 18px 44px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.96)!important}

/* Buttons and controls */
.primary-btn,.secondary-btn,.link-btn,.button,.payroll-period-nav button,.schedule-controls button{
  min-height:42px;font-size:13.5px!important;font-weight:650!important;border-radius:11px!important;
}
#appShell input,#appShell select,#appShell textarea,.card-modal input,.card-modal select,.card-modal textarea{
  min-height:42px;font-size:14px!important;color:#1d2634!important;background:rgba(255,255,255,.96)!important;border-color:#d9e0e9!important;
}
#appShell textarea,.card-modal textarea{min-height:88px}
#appShell label,.card-modal label,.leave-modal label,.payroll-modal label,.overtime-modal label{font-size:12.5px!important;color:#354052!important}
::placeholder{color:#8994a5!important;opacity:1}

/* Strong keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(199,139,24,.33)!important;outline-offset:2px!important;box-shadow:0 0 0 1px var(--tt-focus)!important;
}

/* Tables: readable and sticky without crushing columns */
.attendance-table-wrap,.report-table-wrap,.payroll-table-wrap,.people-table-wrap,.diagnostics-table-wrap{overflow:auto;scrollbar-gutter:stable}
.attendance-table th,.report-table th,.payroll-table th,.people-table th,.overtime-table th,.leave-table th,.diagnostics-table th{
  position:sticky;top:0;z-index:3;background:rgba(247,249,252,.97)!important;color:#667387!important;font-size:var(--tt-table-head-readable)!important;letter-spacing:.045em!important;padding:13px 14px!important;
}
.attendance-table td,.report-table td,.payroll-table td,.people-table td,.overtime-table td,.leave-table td,.diagnostics-table td{
  font-size:var(--tt-table-readable)!important;line-height:1.45!important;padding:13px 14px!important;color:#253043!important;
}
.attendance-table tbody tr:hover,.report-table tbody tr:hover,.payroll-table tbody tr:hover,.people-table tbody tr:hover,.diagnostics-table tbody tr:hover{background:rgba(247,249,252,.78)}
.empty-table{font-size:13px!important;color:#778397!important;padding:28px 18px!important;text-align:center!important}

/* Status chips remain semantic rather than brand-colored */
.attendance-state,.report-status,.payroll-status,.member-status,.invite-status,.leave-status,.ot-variance,.team-pill{font-size:10.5px!important;font-weight:700!important}

/* Better loading/offline/error feedback */
.form-message{font-size:12px!important;line-height:1.55!important;min-height:0}
.form-message:not(:empty){padding:9px 11px;border-radius:9px;background:#fff8e8;color:#78500d;border:1px solid #f0d8a4}
.form-message.success{background:#ecf8f1;color:#247147;border-color:#c9ead8}
.gate-card p{font-size:14px;line-height:1.65}

/* Layer contract: avoids dropdown/modal regressions. */
.app-topbar{z-index:var(--tt-layer-sticky)!important}
.sidebar{z-index:calc(var(--tt-layer-sticky) + 20)!important}
.user-popover,.workspace-menu{z-index:var(--tt-layer-popover)!important}
.drawer-backdrop{z-index:var(--tt-layer-drawer)!important}.brand-drawer{z-index:calc(var(--tt-layer-drawer) + 10)!important}
.modal-backdrop{z-index:var(--tt-layer-modal)!important}.card-modal,.leave-modal,.payroll-modal,.overtime-modal{position:relative;z-index:calc(var(--tt-layer-modal) + 10)!important}
.toast{z-index:var(--tt-layer-toast)!important}

/* Settings & diagnostics */
.settings-view{gap:20px!important}
.settings-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;padding:28px 30px;border:1px solid #e0e6ee;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(251,246,235,.88));box-shadow:0 16px 44px rgba(15,23,42,.055),inset 0 1px 0 #fff}
.settings-hero .live{font-size:10px;font-weight:800;letter-spacing:.09em;color:#9b6810}.settings-hero .live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34ad71;margin-right:7px}
.settings-hero h2{font-size:28px;margin:7px 0 6px}.settings-hero p{max-width:760px;margin:0;font-size:14px;color:#5b677a}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.settings-card{padding:22px!important}.settings-card>p{font-size:13.5px;margin:10px 0 18px}
.settings-feature-list{display:grid;gap:10px}.settings-feature-list>span{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid #edf0f4}.settings-feature-list b{font-size:12.5px}.settings-feature-list small{font-size:11px;color:#7e8998;text-align:right}
.system-diagnostics{padding:22px!important}.diagnostics-head{align-items:flex-start!important;gap:18px}.diagnostics-head p{margin:5px 0 0;font-size:12px;max-width:700px}.diagnostics-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.diagnostics-toggle{display:flex!important;align-items:center;gap:8px;min-height:42px;padding:0 11px;border:1px solid #dce3eb;border-radius:11px;background:#fff;font-size:11.5px!important;white-space:nowrap}.diagnostics-toggle input{min-height:auto!important;width:16px;height:16px;margin:0}
.diagnostics-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.diagnostics-metrics>div{padding:15px;border:1px solid #e1e7ef;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,249,252,.9))}.diagnostics-metrics small{display:block;font-size:10px;color:#7d8999;text-transform:uppercase;letter-spacing:.06em}.diagnostics-metrics strong{display:block;font-size:20px;margin:6px 0 4px}.diagnostics-metrics span{font-size:10.5px;color:#718094;line-height:1.4}
.diagnostics-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.diagnostics-summary>span{padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid #e8edf3}.diagnostics-summary b{display:block;font-size:11.5px}.diagnostics-summary small{display:block;font-size:10px;color:#7c8796;margin-top:3px}
.diagnostics-table-wrap{border:1px solid #e3e8ef;border-radius:14px;background:#fff;max-height:360px}.diagnostics-table{width:100%;border-collapse:collapse;min-width:780px}.diagnostics-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:#344154;background:#f4f6f8;padding:3px 5px;border-radius:5px}.diag-status{display:inline-flex;min-width:38px;justify-content:center;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800}.diag-status.good{background:#e8f7ef;color:#26734a}.diag-status.bad{background:#fff0ef;color:#a04742}
.diagnostics-note{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff8e9;border:1px solid #efd8a7}.diagnostics-note b{font-size:11px;color:#86590b;white-space:nowrap}.diagnostics-note span{font-size:10.5px;line-height:1.5;color:#6e5b39}

/* Scrollbars remain visible but unobtrusive */
.app-shell *{scrollbar-width:thin;scrollbar-color:#aab3bf transparent}.app-shell *::-webkit-scrollbar{width:10px;height:10px}.app-shell *::-webkit-scrollbar-thumb{background:#aab3bf;border:3px solid transparent;background-clip:padding-box;border-radius:999px}.app-shell *::-webkit-scrollbar-track{background:transparent}

/* Responsive production behavior */
@media(max-width:1100px){.diagnostics-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.diagnostics-summary{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}}
@media(max-width:760px){.settings-hero{align-items:flex-start;flex-direction:column;padding:22px}.settings-hero h2{font-size:24px}.diagnostics-head{flex-direction:column}.diagnostics-actions{justify-content:flex-start}.diagnostics-metrics{grid-template-columns:1fr}.side-nav button,.sidebar-bottom button{font-size:14px!important}}
@media(max-width:650px){.panel,.metrics-grid>article,.attendance-metrics>article,.schedule-metrics>article,.overtime-metrics>article,.leave-metrics>article,.report-metrics>article,.payroll-metrics>article,.billing-metrics>article{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)!important}.attendance-table td,.report-table td,.payroll-table td,.people-table td,.overtime-table td,.leave-table td,.diagnostics-table td{font-size:13px!important}.app-topbar h1{font-size:21px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- v1.0.4.8 Compact Navigation Repair ----------
   Compact mode is a true icon rail: no clipped wordmark/workspace labels,
   no stray text nodes, and no visible sidebar scrollbar. */
body.tt-sidebar-compact .sidebar{
  width:var(--tt-sidebar-compact)!important;
  padding:14px 10px 12px!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
}
body.tt-sidebar-compact .sidebar::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
body.tt-sidebar-compact .app-main{margin-left:var(--tt-sidebar-compact)!important}

/* Brand becomes mark-only. The pseudo wordmark and Cloud <em> previously
   retained explicit font sizes and overflowed the 88px compact rail. */
body.tt-sidebar-compact .app-brand{
  min-height:56px!important;
  width:100%!important;
  padding:2px 0 12px!important;
  justify-content:center!important;
  gap:0!important;
  overflow:hidden!important;
}
body.tt-sidebar-compact .app-brand>span,
body.tt-sidebar-compact .app-brand>span::before,
body.tt-sidebar-compact .app-brand em{
  display:none!important;
  content:none!important;
}
body.tt-sidebar-compact .app-brand img{
  width:38px!important;
  height:38px!important;
  margin:0!important;
  flex:0 0 38px!important;
}

/* Workspace switcher becomes avatar-only. Explicit child font sizes from the
   readability layer must not leak back into compact mode. */
body.tt-sidebar-compact .workspace-switcher{
  width:56px!important;
  min-width:56px!important;
  min-height:56px!important;
  height:56px!important;
  margin:0 auto 16px!important;
  padding:0!important;
  gap:0!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.tt-sidebar-compact .workspace-switcher>div,
body.tt-sidebar-compact .workspace-switcher>span:last-child{
  display:none!important;
}
body.tt-sidebar-compact .workspace-avatar{
  width:38px!important;
  height:38px!important;
  margin:0!important;
  font-size:10px!important;
  flex:0 0 38px!important;
}

/* Navigation is centered and icon-only with one stable hit target per item. */
body.tt-sidebar-compact .side-nav{width:100%!important;gap:6px!important;align-items:center!important}
body.tt-sidebar-compact .side-nav button{
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  min-height:50px!important;
  height:50px!important;
  margin:0 auto!important;
  padding:0!important;
  gap:0!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:0!important;
  overflow:hidden!important;
}
body.tt-sidebar-compact .side-nav button>span{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
}
body.tt-sidebar-compact .side-nav button>span svg{width:22px!important;height:22px!important}
body.tt-sidebar-compact .side-nav button i{display:none!important}
body.tt-sidebar-compact .side-nav button::after{display:none!important;content:none!important}
body.tt-sidebar-compact .side-nav button.active{
  box-shadow:inset 0 0 0 1px rgba(197,135,27,.18),0 6px 18px rgba(159,104,16,.08)!important;
}
body.tt-sidebar-compact .nav-rule{width:44px!important;margin:8px auto!important;flex:0 0 1px!important}

/* Bottom actions follow the same icon-rail contract. */
body.tt-sidebar-compact .sidebar-bottom{
  align-items:center!important;
  width:100%!important;
  padding-top:10px!important;
  gap:6px!important;
}
body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle){
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  min-height:48px!important;
  height:48px!important;
  padding:0!important;
  margin:0 auto!important;
  justify-content:center!important;
  gap:0!important;
  font-size:0!important;
  overflow:hidden!important;
}
body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle)>span{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
}
body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle)>span svg{width:22px!important;height:22px!important}
body.tt-sidebar-compact .sidebar-bottom a,
body.tt-sidebar-compact .powered{display:none!important}

/* Collapse control becomes a single centered expand icon in compact mode. */
body.tt-sidebar-compact #signatureSidebarToggle{
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  min-height:46px!important;
  height:46px!important;
  margin:4px auto 0!important;
  padding:0!important;
  gap:0!important;
  font-size:0!important;
  border-radius:12px!important;
}
body.tt-sidebar-compact #signatureSidebarToggle>span{display:none!important}
body.tt-sidebar-compact #signatureSidebarToggle svg{
  width:20px!important;
  height:20px!important;
  margin:0!important;
  transform:rotate(180deg);
  transition:transform .18s ease;
}

/* Prevent compact rules from leaking onto the mobile drawer. */
@media(max-width:980px){
  body.tt-sidebar-compact .sidebar{width:266px!important;padding:18px!important;scrollbar-width:thin!important}
}

/* v1.0.4.9 seat-limit affordance */
#inviteForm button[type="submit"].seat-limit-disabled,#inviteForm button[type="submit"]:disabled{opacity:.46;filter:saturate(.45);cursor:not-allowed;box-shadow:none!important}


/* v1.0.5.0 payroll current-profile vs locked-snapshot clarity */
.payroll-rate-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:2px 0 12px}
.payroll-rate-context>span{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid rgba(123,139,164,.2);border-radius:15px;background:rgba(247,249,252,.88)}
.payroll-rate-context>span small{font-size:11px;letter-spacing:.09em;font-weight:800;color:#8090a6}
.payroll-rate-context>span strong{font-size:17px;color:#172033}
.payroll-rate-effect{margin-top:0!important;padding:11px 13px;border-radius:13px;background:rgba(222,170,61,.09);border:1px solid rgba(205,148,24,.18);color:#59677b!important;font-weight:600}
@media(max-width:640px){.payroll-rate-context{grid-template-columns:1fr}}