/* App compatibility layer on top of site.css */

/* =========================================================
   GLOBAL APP DECLUTTER (match cleaned home/about direction)
   ========================================================= */

/* Remove decorative eyebrow chip rows across app surfaces. */
.wrap .h-eyebrow,
.o-main .h-eyebrow,
.mx-body .h-eyebrow{
  display:none !important;
}

/* Hide non-essential badges that usually appear in page top bars. */
.wrap .topbar .badge,
.o-main .topbar .badge,
.mx-body .topbar .badge{
  display:none !important;
}

/* Keep page intros cleaner and tighter. */
.wrap .topbar .small,
.o-main .topbar .small,
.mx-body .topbar .small{
  margin-top: 4px !important;
}

/* reuse the marketing design but keep existing app wrapper class */
.wrap{
  width: min(var(--max), calc(100% - 32px));
  margin: 26px auto;
  padding: 0;
}

/* your app uses .super.card, marketing uses .card.
   Keep both working and make .super.card wider */
.super.card{
  max-width: 1200px;
}

table th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
table td{ vertical-align: top; }

/* app pages probably have <button> without .btn */
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 3px 3px 0 #111;
  font-weight: 800;
  cursor: pointer;
}
button:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #111; }
button:active{ transform: translate(0,0); box-shadow: 2px 2px 0 #111; }

/* app errors */
.error{
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #ffe2da;
}

/* muted helper */
.muted{ font-size: 13px; color: var(--muted); }

/* inputs already styled in site.css, keep sizing comfy */
input, select, textarea{ font-size: 14px; }

/* Compact search toggle (owner dashboard / stores) */
.tt-search-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}
.tt-search-inline{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}
.tt-icon-btn{
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  box-shadow:3px 3px 0 #111;
  flex-shrink:0;
}
.tt-icon-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}
.tt-search-pop{
  box-sizing:border-box;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  transform:translateY(-2px) scale(.98);
  transform-origin:right top;
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:6px;
  width:min(340px, calc(100vw - 28px));
  min-width:min(340px, calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:999px;
  box-shadow:3px 3px 0 #111;
  padding:4px 6px 4px 10px;
  transition:opacity .16s ease, transform .16s ease;
  z-index:30;
}
.tt-search-inline.is-open .tt-search-pop,
[data-store-search-root].is-open .tt-search-pop{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.tt-search-pop input[type="search"]{
  border:none;
  box-shadow:none;
  background:transparent;
  padding:7px 2px;
  width:100%;
  min-width:0;
  border-radius:0;
}
.tt-search-pop input[type="search"]:focus{
  outline:none;
  box-shadow:none;
}
.tt-search-clear{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  border-radius:999px;
  border:1.5px solid rgba(0,0,0,.1);
  background:#f4f6f5;
  color:var(--muted);
  box-shadow:none;
  font-size:18px;
  line-height:1;
}
.tt-search-clear:hover{
  transform:none;
  box-shadow:none;
  background:#ecefee;
  color:var(--ink);
}
.tt-search-clear:active{
  transform:none;
  box-shadow:none;
}

/* Search filter must override component display rules (dashboard cards use display:flex). */
[data-store-search-item][hidden],
[data-store-search-item].tt-search-item-hidden{
  display:none !important;
}

/* Password eye toggle */
.pw-toggle-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}
.pw-toggle-wrap > input{
  width:100%;
  min-width:0;
  padding-right:44px !important;
}
.pw-toggle-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  border-radius:999px;
  border:1.5px solid rgba(0,0,0,.08);
  background:#fff;
  color:#475569;
  box-shadow:none;
  gap:0;
}
.pw-toggle-btn:hover{
  transform:translateY(-50%);
  box-shadow:none;
  background:#f3f4f6;
  color:#111827;
}
.pw-toggle-btn:active{
  transform:translateY(-50%);
  box-shadow:none;
}
.pw-toggle-btn svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  display:block;
}

@media (max-width: 640px){
  .tt-search-pop{
    right:0;
    top:calc(100% + 8px);
    transform:translateY(0) scale(.98);
    min-width:min(320px, calc(100vw - 24px));
    width:min(320px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    z-index:12;
  }
  .tt-search-inline.is-open .tt-search-pop,
  [data-store-search-root].is-open .tt-search-pop{
    transform:translateY(0) scale(1);
  }
}

/* Shared confirmation dialog for destructive and account-changing actions. */
body.tt-confirm-open{
  overflow: hidden;
}

.tt-confirm-backdrop{
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(5px);
}

.tt-confirm-backdrop.is-open{
  display: grid;
  animation: tt-confirm-fade 0.16s ease-out both;
}

.tt-confirm-modal{
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  outline: none;
  animation: tt-confirm-rise 0.2s ease-out both;
}

.tt-confirm-icon{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #fffaeb;
  color: #b54708;
}

.tt-confirm-icon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt-confirm-modal[data-tone="danger"] .tt-confirm-icon{
  background: #fff1f2;
  color: #b42318;
}

.tt-confirm-copy h2{
  margin: 0;
  color: #101828;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.tt-confirm-copy p{
  margin: 8px 0 0;
  color: #667085;
  font-size: 0.92rem;
  line-height: 1.55;
}

.tt-confirm-copy .tt-confirm-countdown{
  color: #b42318;
  font-size: 0.8rem;
  font-weight: 750;
}

.tt-confirm-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.tt-confirm-actions .btn{
  width: 100% !important;
  min-height: 44px;
  margin: 0 !important;
  justify-content: center;
}

.tt-confirm-cancel{
  border-color: #d0d5dd !important;
  background: #fff !important;
  color: #344054 !important;
}

.tt-confirm-submit{
  border-color: #b54708 !important;
  background: #b54708 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.tt-confirm-modal[data-tone="danger"] .tt-confirm-submit{
  border-color: #d92d20 !important;
  background: #d92d20 !important;
}

.tt-confirm-submit:disabled{
  cursor: not-allowed;
  opacity: 0.48;
}

@keyframes tt-confirm-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes tt-confirm-rise{
  from{ opacity: 0; transform: translateY(10px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px){
  .tt-confirm-backdrop{
    place-items: end center;
    padding: 0;
  }

  .tt-confirm-modal{
    width: 100%;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top));
    overflow-y: auto;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    margin-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce){
  .tt-confirm-backdrop.is-open,
  .tt-confirm-modal{
    animation: none;
  }
}

/* Compact attendance log with expandable technical details. */
.tt-log-empty{
  margin-top: 14px;
  background: #f8fafc !important;
}

.tt-log-table-wrap{
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #fff;
}

.tt-log-table{
  width: 100%;
  border-collapse: collapse;
}

.tt-log-table th{
  padding: 11px 14px;
  border-bottom: 1px solid #e4e7ec;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: uppercase;
}

.tt-log-table th:last-child{
  width: 58px;
}

.tt-log-main-row td{
  padding: 13px 14px;
  border-bottom: 1px solid #eef0f3;
  color: #344054;
  font-size: 0.84rem;
}

.tt-log-staff{
  display: block;
  max-width: 280px;
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-log-event{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.tt-log-event.is-success{ background:#ecfdf3; border-color:#abefc6; color:#027a48; }
.tt-log-event.is-danger{ background:#fff1f2; border-color:#fecaca; color:#b42318; }
.tt-log-event.is-neutral{ background:#f2f4f7; border-color:#e4e7ec; color:#475467; }
.tt-log-event.is-blue{ background:#eff6ff; border-color:#bfdbfe; color:#175cd3; }
.tt-log-event.is-leave{ background:#fffaeb; border-color:#fedf89; color:#b54708; }

.tt-log-status{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-left: 3px solid #d0d5dd;
  border-radius: 0 7px 7px 0;
  background: #f8fafc;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.tt-log-status.is-success{ border-color:#12b76a; background:#ecfdf3; color:#027a48; }
.tt-log-status.is-danger{ border-color:#f04438; background:#fff1f2; color:#b42318; }
.tt-log-status.is-leave{ border-color:#f79009; background:#fffaeb; color:#b54708; }

.tt-log-more-cell{
  text-align: right;
}

.tt-log-more{
  display: inline-grid !important;
  place-items: center;
  width: 36px !important;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #475467 !important;
  box-shadow: none !important;
}

.tt-log-more:hover,
.tt-log-more.is-open{
  border-color: #9db7e8 !important;
  background: #eff6ff !important;
  color: #175cd3 !important;
  transform: none !important;
}

.tt-log-more svg{
  transition: transform 0.16s ease;
}

.tt-log-more.is-open svg{
  transform: rotate(45deg);
}

.tt-log-detail-row td{
  padding: 0 !important;
  border-bottom: 1px solid #e4e7ec;
  background: #f8fafc;
}

.tt-log-detail-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.tt-log-detail-grid > div{
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fff;
}

.tt-log-detail-grid span{
  color: #667085;
  font-size: 0.68rem;
  font-weight: 750;
}

.tt-log-detail-grid strong{
  overflow: hidden;
  color: #344054;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-log-detail-grid strong.is-success{ color:#027a48; }
.tt-log-detail-grid strong.is-danger{ color:#b42318; }
.tt-log-detail-grid strong.is-leave{ color:#b54708; }

.tt-log-mobile-list{
  display: none;
  gap: 10px;
  margin-top: 12px;
}

.tt-log-mobile-card{
  padding: 14px;
  border: 1px solid #e4e7ec;
  border-radius: 15px;
  background: #fff;
}

.tt-log-mobile-head,
.tt-log-mobile-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tt-log-mobile-head{
  align-items: flex-start;
  flex-direction: column;
}

.tt-log-mobile-signals{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.tt-log-mobile-head > strong{
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-log-mobile-main{
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #eef0f3;
}

.tt-log-mobile-main time{
  color: #344054;
  font-size: 1rem;
  font-weight: 800;
}

.tt-log-mobile-detail{
  margin-top: 10px;
}

.tt-log-mobile-detail .tt-log-detail-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}

@media (max-width: 420px){
  .tt-log-mobile-detail .tt-log-detail-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px){
  .tt-log-table-wrap{ display:none !important; }
  .tt-log-mobile-list{ display:grid; }
  .tt-log-more{
    width: 42px !important;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }
}

/* =========================================================
   APP SHADOW BUDGET (flat nested surfaces, selective elevation)
   ========================================================= */

/* Reusable utilities */
.tt-flat-surface,
.tt-card-flat,
.tt-panel-flat{
  box-shadow:none !important;
}
.tt-raised-surface{
  box-shadow:var(--shadow) !important;
}
.tt-raised-surface-sm{
  box-shadow:3px 3px 0 #111 !important;
}
.tt-hover-pop{
  box-shadow:none !important;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.tt-hover-pop:hover,
.tt-hover-pop:active,
.tt-hover-pop:focus-within{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 #111 !important;
}
.tt-no-shadow-btn{
  box-shadow:none !important;
}
.tt-no-shadow-btn:hover,
.tt-no-shadow-btn:active{
  box-shadow:none !important;
  transform:none !important;
}

/* Keep compact utility buttons flat (search icon / tabs / segmented controls / toggles) */
.tt-icon-btn{
  box-shadow:none;
  border:1.5px solid var(--border);
  background:#fff;
}
.tt-icon-btn:hover{
  transform:none;
  box-shadow:none;
  background:#f3f4f6;
}
.tt-icon-btn:active{
  transform:none;
  box-shadow:none;
}

/* Floating search field should remain elevated */
.tt-search-pop{
  box-shadow:3px 3px 0 #111;
}

/* App shell shadow budget: nested cards flat by default */
.wrap .card .card,
.o-main .card .card,
.mx-body .card .card{
  box-shadow:none !important;
}

/* Top-level content cards stay raised */
.wrap > .section > .card,
.wrap > .card,
.o-main > .section > .card,
.o-main > .card,
.mx-body > .section > .card,
.mx-body > .card{
  box-shadow:var(--shadow) !important;
}

/* Nested helper surfaces in app UIs should be flat */
.wrap .badge,
.o-main .badge,
.mx-body .badge,
.wrap .icon,
.o-main .icon,
.mx-body .icon{
  box-shadow:none !important;
}

.o-main .notice,
.mx-body .notice,
.wrap .notice{
  box-shadow:none !important;
}

/* Metrics module: flatten most panels/cards, keep only clickable cards popping on interaction */
.mx-body .mxm-kpi,
.mx-body .mxm-panel,
.mx-body .mp-card,
.mx-body .pm-filter-card,
.mx-body .pm-card,
.mx-body .pm-chart-card,
.mx-body .pm-lock-card{
  box-shadow:none !important;
}

/* Metrics clickable cards (flat at rest, pop on hover/press) */
.mx-body .mxs-card,
.mx-body .mxf-card,
.mx-body .pm-store-card{
  box-shadow:none !important;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.mx-body .mxs-card:hover,
.mx-body .mxs-card:active,
.mx-body .mxs-card:focus-visible,
.mx-body .mxf-card:hover,
.mx-body .mxf-card:active,
.mx-body .mxf-card:focus-visible,
.mx-body .pm-store-card:hover,
.mx-body .pm-store-card:active,
.mx-body .pm-store-card:focus-visible{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 #111 !important;
}

/* Metrics shell compact controls should not look like primary CTA buttons */
.mx-body [role="tablist"] button,
.mx-body .seg button,
.mx-body .mxm-tabseg button,
.mx-body .mp-tabseg button,
.mx-body .mxm-tab button,
.mx-body .mp-tab button{
  box-shadow:none !important;
  transform:none !important;
}
.mx-body [role="tablist"] button:hover,
.mx-body .seg button:hover,
.mx-body .mxm-tabseg button:hover,
.mx-body .mp-tabseg button:hover{
  box-shadow:none !important;
  transform:none !important;
}

/* Wizard / schedule editor specifics (most visible clutter) */
.wrap .ss-day-row{
  box-shadow:none !important;
}
.wrap .tt-day-chip span{
  box-shadow:none !important;
}

/* Owner/manager shells: utility pills and tiny action clusters should stay flatter */
.o-main .o-shc-actions a,
.o-main .o-shc-pill,
.o-main .o-shc-badge{
  box-shadow:none;
}

/* Keep raised floating/focus surfaces across app shells */
.o-dropdown,
.mx-dd,
.o-overlay-sheet,
.mx-overlay-sheet{
  box-shadow:var(--shadow);
}

/* =========================================================
   APP-LIKE PAGE TRANSITIONS + NAV PROGRESS
   ========================================================= */

/* Keep transitions respectful for accessibility */
@media (prefers-reduced-motion: reduce) {
  body.tt-motion .wrap,
  body.tt-motion .o-main,
  body.tt-motion .mx-body {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

body.tt-motion .wrap,
body.tt-motion .o-main,
body.tt-motion .mx-body {
  will-change: opacity, transform, filter;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), filter .22s ease;
}

@keyframes tt-page-in {
  from {
    opacity: .01;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

body.tt-motion.tt-enter .wrap,
body.tt-motion.tt-enter .o-main,
body.tt-motion.tt-enter .mx-body {
  animation: tt-page-in .24s cubic-bezier(.22,1,.36,1) both;
}

body.tt-motion.tt-leaving .wrap,
body.tt-motion.tt-leaving .o-main,
body.tt-motion.tt-leaving .mx-body {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(1px);
}

#tt-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  opacity: 0;
  background: linear-gradient(90deg, #1f7a5b 0%, #16a34a 55%, #4ade80 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
  transition: width .18s linear, opacity .18s ease;
  z-index: 1200;
  pointer-events: none;
}
#tt-nav-progress.active {
  opacity: 1;
}

/* =========================================================
   PAGINATION + MOBILE TABLE/CARD UTILITIES (APP ONLY)
   ========================================================= */
.tt-pager-wrap{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.tt-pager-wrap .small{
  min-width:0;
  overflow-wrap:anywhere;
}

.tt-pager{
  display:flex;
  align-items:center;
  gap:8px;
}

.tt-pager-btn{
  width:auto;
  min-width:0;
}

.tt-pager-current{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--border);
  border-radius:999px;
  background:#eaf6f0;
  font-size:12px;
  font-weight:900;
}

.tt-pager-disabled{
  opacity:.55;
  pointer-events:none;
}

.tt-table-mobile{
  display:none;
}

.tt-mobile-row-card{
  border:1.5px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:10px;
  display:grid;
  gap:8px;
}

.tt-mobile-row-card .tt-mobile-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.tt-mobile-row-card .tt-mobile-row-title{
  font-weight:900;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.tt-mobile-row-card .tt-mobile-grid{
  display:grid;
  gap:6px;
}

.tt-mobile-row-card .tt-mobile-kv{
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  gap:6px;
  align-items:start;
}

.tt-mobile-row-card .tt-mobile-k{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.tt-mobile-row-card .tt-mobile-v{
  font-size:12px;
  overflow-wrap:anywhere;
}

.tt-mobile-row-card .tt-mobile-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tt-logs-toolbar{
  display:grid;
  gap:16px;
}

.tt-logs-toolbar-form,
.tt-logs-range-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}

.tt-logs-toolbar-form .field,
.tt-logs-range-form .field{
  margin:0;
  min-width:0;
  flex:1 1 180px;
}

.tt-logs-toolbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}

.tt-logs-toolbar-actions .btn,
.tt-logs-range-submit{
  width:auto;
}

.tt-logs-separator{
  height:1px;
  background:rgba(15,23,42,0.08);
}

.tt-logs-toolbar-note{
  max-width:60ch;
}

.tt-logs-custom{
  display:grid;
  gap:10px;
}

.tt-logs-custom-toggle{
  list-style:none;
  cursor:pointer;
}

.tt-logs-custom-toggle::-webkit-details-marker{
  display:none;
}

.tt-logs-custom-toggle::marker{
  content:"";
}

.tt-logs-custom-body{
  display:grid;
  gap:12px;
}

body[data-app-shell="1"] .o-main,
.tt-mobile-compact .o-main,
body[data-app-shell="1"] .mx-body,
.tt-mobile-compact .mx-body{
  min-width:0;
  overflow-x:hidden;
}

body[data-app-shell="1"] .super.card,
.tt-mobile-compact .super.card{
  max-width:100%;
}

@media (max-width: 768px){
  body[data-app-shell="1"] .section,
  .tt-mobile-compact .section{
    padding: 12px 0 calc(20px + env(safe-area-inset-bottom));
  }

  body[data-app-shell="1"] .card.pad,
  .tt-mobile-compact .card.pad{
    padding: 12px;
  }

  body[data-app-shell="1"] .topbar,
  .tt-mobile-compact .topbar{
    margin-bottom: 10px !important;
  }

  body[data-app-shell="1"] .actions,
  .tt-mobile-compact .actions{
    margin-top: 10px;
    gap: 8px;
  }

  .tt-table-desktop{
    display:none !important;
  }

  .tt-table-mobile{
    display:grid;
    gap:10px;
  }

  .tt-logs-toolbar-form,
  .tt-logs-range-form{
    display:grid;
    gap:10px;
    align-items:stretch;
  }

  .tt-logs-toolbar-form .field,
  .tt-logs-range-form .field{
    width:100%;
    flex:auto;
  }

  .tt-logs-toolbar-actions{
    display:grid;
    gap:8px;
  }

  .tt-logs-toolbar-actions .btn,
  .tt-logs-toolbar-form .btn,
  .tt-logs-range-submit,
  .tt-logs-custom-toggle{
    width:100% !important;
    max-width:100%;
  }

  .tt-logs-range-form input[type="datetime-local"],
  .tt-logs-toolbar-form input[type="date"]{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .tt-mobile-row-card{
    padding:9px;
    gap:7px;
  }

  .tt-pager-wrap{
    align-items:flex-start;
    flex-direction:column;
  }

  .tt-pager{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:8px;
    align-items:center;
  }

  .tt-pager-btn{
    width:100% !important;
    max-width:100%;
  }

  .tt-pager-current{
    justify-self:center;
  }
}

/* =========================================================
   STORE IDENTITY (logo + name) INLINE
   ========================================================= */
.tt-store-ident{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
}

.tt-store-ident-prefix{
  color:var(--muted);
  font-weight:600;
  flex-shrink:0;
}

.tt-store-ident-main{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.tt-store-ident-logo,
.tt-store-ident-fallback{
  border-radius:999px;
  border:1.5px solid rgba(0,0,0,.14);
  flex-shrink:0;
}

.tt-store-ident-logo{
  object-fit:cover;
  display:block;
  background:#fff;
}

.tt-store-ident-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#1f7a5b;
  background:#eaf6f0;
}

/* =========================================================
   2026 APP SURFACE REFRESH
   ========================================================= */

.wrap{
  width: min(1240px, calc(100% - 40px));
  margin: 22px auto 42px;
}

.super.card{
  border-radius: 28px;
}

button{
  border: 1px solid rgba(10, 37, 64, 0.10);
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 12px 28px rgba(9, 20, 46, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

button:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(9, 20, 46, 0.12);
}

button:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(9, 20, 46, 0.10);
}

.tt-icon-btn,
.tt-search-clear,
.pw-toggle-btn{
  box-shadow: none !important;
  background: rgba(255,255,255,0.94) !important;
  color: var(--muted) !important;
}

.wrap > .section > .card,
.wrap > .card,
.o-main > .section > .card,
.o-main > .card,
.mx-body > .section > .card,
.mx-body > .card{
  border-radius: 28px !important;
  box-shadow: var(--shadow) !important;
}

.wrap .card .card,
.o-main .card .card,
.mx-body .card .card{
  border-radius: 22px !important;
  background: rgba(255,255,255,0.72) !important;
}

.wrap .badge,
.o-main .badge,
.mx-body .badge,
.wrap .icon,
.o-main .icon,
.mx-body .icon{
  border-color: rgba(10, 37, 64, 0.08) !important;
  background: rgba(255,255,255,0.78) !important;
}

.o-main .notice,
.mx-body .notice,
.wrap .notice{
  border-radius: 18px !important;
  border-color: rgba(10, 37, 64, 0.1) !important;
  background: linear-gradient(180deg, rgba(232, 240, 255, 0.88), rgba(247, 250, 255, 0.92)) !important;
}

.error{
  border-radius: 18px;
  border-color: rgba(209, 76, 103, 0.16);
  background: linear-gradient(180deg, rgba(255, 241, 243, 0.96), rgba(255, 250, 250, 0.92));
}

.wrap .topbar,
.o-main .topbar,
.mx-body .topbar{
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}

body[data-app-shell="1"] .o-header{
  height: 64px !important;
  padding: 0 18px !important;
  background: rgba(244, 247, 255, 0.74) !important;
  border-bottom: 1px solid rgba(10, 37, 64, 0.08) !important;
  backdrop-filter: blur(22px) !important;
  box-shadow: 0 10px 40px rgba(9, 20, 46, 0.06);
}

body[data-app-shell="1"] .o-hamburger,
body[data-app-shell="1"] .o-profile-btn{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] .o-hamburger:hover,
body[data-app-shell="1"] .o-profile-btn:hover{
  transform: none !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] .o-page-title{
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}

body[data-app-shell="1"] .o-avatar{
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(10, 37, 64, 0.1) !important;
  background: linear-gradient(180deg, rgba(15, 98, 254, 0.12), rgba(125, 211, 252, 0.08)) !important;
}

body[data-app-shell="1"] .o-sidebar{
  width: 238px !important;
  background: rgba(255,255,255,0.82) !important;
  border-right: 1px solid rgba(10, 37, 64, 0.08) !important;
  backdrop-filter: blur(18px) !important;
}

body[data-app-shell="1"] .o-sidebar-section{
  padding: 12px 18px 6px !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  color: #72829a !important;
}

body[data-app-shell="1"] .o-nav-link{
  margin: 0 10px 4px !important;
  padding: 12px 14px !important;
  border-left: none !important;
  border-radius: 16px !important;
  color: var(--muted) !important;
}

body[data-app-shell="1"] .o-nav-link:hover{
  background: rgba(15, 98, 254, 0.06) !important;
  color: var(--ink) !important;
}

body[data-app-shell="1"] .o-nav-link.active{
  background: linear-gradient(180deg, rgba(15, 98, 254, 0.12), rgba(15, 98, 254, 0.08)) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 98, 254, 0.10) !important;
}

body[data-app-shell="1"] .o-nav-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  background: #d92d20 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

body[data-app-shell="1"] .o-nav-badge.is-dismissed{
  display: none !important;
}

body[data-app-shell="1"] .o-bnav-item{
  position: relative !important;
}

body[data-app-shell="1"] .o-bnav-badge{
  position: absolute !important;
  top: 5px !important;
  right: max(14px, calc(50% - 24px)) !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 0.62rem !important;
  margin-left: 0 !important;
}

body[data-app-shell="1"] .o-dropdown{
  border: 1px solid rgba(10, 37, 64, 0.10) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 24px 60px rgba(9, 20, 46, 0.14) !important;
}

body[data-app-shell="1"] .o-dropdown-hdr{
  background: linear-gradient(180deg, rgba(15, 98, 254, 0.08), rgba(255,255,255,0.92)) !important;
  border-bottom: 1px solid rgba(10, 37, 64, 0.08) !important;
}

body[data-app-shell="1"] .o-dropdown a,
body[data-app-shell="1"] .o-dropdown button{
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] .o-dropdown a:hover,
body[data-app-shell="1"] .o-dropdown button:hover{
  background: rgba(15, 98, 254, 0.06) !important;
  transform: none !important;
}

body[data-app-shell="1"] .o-main{
  margin-top: 64px !important;
  padding: 28px !important;
  background: transparent !important;
}

body[data-app-shell="1"] .o-bottom-nav{
  background: rgba(255,255,255,0.88) !important;
  border-top: 1px solid rgba(10, 37, 64, 0.08) !important;
  backdrop-filter: blur(22px) !important;
}

body[data-app-shell="1"] .o-bnav-item{
  color: #7d8ba2 !important;
}

body[data-app-shell="1"] .o-bnav-item.active{
  color: var(--accent) !important;
}

.o-section-title{
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.o-stat-row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.o-stat{
  padding: 20px 18px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 22px;
  background: rgba(255,255,255,0.74);
  box-shadow: 0 14px 36px rgba(9, 20, 46, 0.08);
}

.o-stat-label{
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.o-stat-value{
  margin-top: 10px;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink);
}

.o-stat-sub{
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.o-store-swipe{
  gap: 14px !important;
}

.o-shc{
  min-width: 270px;
  padding: 18px !important;
  border: 1px solid rgba(10, 37, 64, 0.08) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,250,255,0.84)) !important;
  box-shadow: 0 18px 44px rgba(9, 20, 46, 0.10) !important;
}

.o-shc:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 50px rgba(9, 20, 46, 0.12) !important;
}

.o-shc--add{
  color: var(--accent) !important;
  border-style: solid !important;
  background: rgba(15, 98, 254, 0.05) !important;
}

.o-shc-badge,
.o-shc-pill{
  border-radius: 999px !important;
  border: 1px solid rgba(10, 37, 64, 0.08) !important;
  background: rgba(255,255,255,0.78) !important;
  color: var(--muted) !important;
}

.o-shc-badge.active{
  background: rgba(43, 213, 118, 0.12) !important;
  color: #0d7a48 !important;
}

.o-shc-badge.idle{
  background: rgba(250, 204, 21, 0.14) !important;
  color: #9a6700 !important;
}

.o-shc-num{
  font-size: 2.4rem !important;
  letter-spacing: -0.07em;
}

.o-shc-actions{
  gap: 8px !important;
}

.o-shc-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px !important;
  border: 1px solid rgba(10, 37, 64, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.94) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.o-shc-actions a:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 28px rgba(9, 20, 46, 0.08) !important;
}

.o-shc-actions a.primary{
  background: linear-gradient(135deg, #0f62fe, #1292ff) !important;
  color: #fff !important;
}

.o-upsell-grid{
  gap: 12px !important;
}

.o-upsell-card{
  border: 1px solid rgba(10, 37, 64, 0.08) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.78) !important;
  box-shadow: none !important;
}

.o-upsell-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(9, 20, 46, 0.10) !important;
}

.tt-search-pop{
  border: 1px solid rgba(10, 37, 64, 0.08) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 18px 40px rgba(9, 20, 46, 0.12) !important;
}

/* Search fields stay visually and spatially attached to their trigger. */
.tt-search-inline .tt-search-pop{
  position:absolute !important;
  top:calc(100% + 7px) !important;
  right:0 !important;
  bottom:auto !important;
  left:auto !important;
  width:min(320px, calc(100vw - 20px)) !important;
  min-width:min(280px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  padding:5px 6px 5px 12px !important;
  border-radius:14px !important;
  transform-origin:right top !important;
  z-index:80 !important;
}
.tt-search-inline.tt-search-align-left .tt-search-pop{
  right:auto !important;
  left:0 !important;
  transform-origin:left top !important;
}
.tt-search-inline.tt-search-open-up .tt-search-pop{
  top:auto !important;
  bottom:calc(100% + 7px) !important;
  transform-origin:right bottom !important;
}
.tt-search-inline.tt-search-align-left.tt-search-open-up .tt-search-pop{transform-origin:left bottom !important}
.tt-search-pop input[type="search"]{min-height:38px !important;font-size:14px !important}
.tt-search-inline.is-open>.tt-icon-btn{border-color:#2563eb !important;color:#2563eb !important;background:#eef4ff !important}

@media(max-width:680px){
  body[data-app-shell="1"] .o-main .topbar>.tt-search-inline{
    width:44px !important;
    align-self:flex-end;
  }
  .tt-search-inline .tt-search-pop{
    width:min(300px, calc(100vw - 20px)) !important;
    min-width:min(260px, calc(100vw - 20px)) !important;
  }
}

.tt-pager-current{
  border-color: rgba(10, 37, 64, 0.08);
  background: rgba(15, 98, 254, 0.08);
  color: var(--accent);
}

@media (max-width: 1080px){
  .o-stat-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .wrap{
    width: min(1240px, calc(100% - 24px));
    margin: 14px auto 26px;
  }

  body[data-app-shell="1"] .o-sidebar{
    width: 280px !important;
  }

  body[data-app-shell="1"] .o-main{
    padding: 18px 14px calc(var(--bnav-h) + 22px) !important;
  }

  .o-stat-row{
    grid-template-columns: 1fr;
  }

  .o-shc{
    min-width: min(88vw, 280px);
  }
}

/* =========================================================
   SIMPLE FLOW PASS
   Mobile-first task navigation and plain status text.
   ========================================================= */

.wrap{
  width: min(1180px, calc(100% - 28px));
}

.wrap > .section > .card,
.wrap > .card,
.o-main > .section > .card,
.o-main > .card,
.mx-body > .section > .card,
.mx-body > .card,
.super.card{
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}

body[data-app-shell="1"] .o-header{
  height: 58px !important;
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

body[data-app-shell="1"] .o-sidebar{
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
}

body[data-app-shell="1"] .o-nav-link{
  margin: 0 8px 2px !important;
  padding: 11px 12px !important;
  border-radius: 8px !important;
}

body[data-app-shell="1"] .o-nav-link.active{
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] .o-main{
  margin-top: 58px !important;
  padding: 22px !important;
}

.o-task-panel{
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.o-task-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.o-task-card{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}

.o-task-card:hover{
  border-color: var(--border-strong);
  text-decoration: none;
}

.o-task-card.primary{
  border-color: #bfdbfe;
  background: #eff6ff;
}

.o-task-icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f2f4f7;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  flex-shrink: 0;
}

.o-task-card.primary .o-task-icon{
  background: #2563eb;
  color: #ffffff;
}

.o-task-copy{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.o-task-copy b{
  font-size: 0.95rem;
  line-height: 1.2;
}

.o-task-copy small{
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.o-section-title{
  font-size: 1rem;
  letter-spacing: 0;
}

.o-stat-row{
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
}

.o-stat{
  padding: 14px;
  border-radius: 8px;
  box-shadow: none;
}

.o-stat-label{
  letter-spacing: 0.05em;
}

.o-stat-value{
  font-size: 1.9rem;
  letter-spacing: 0;
}

.o-shc{
  width: 260px;
  min-width: 260px;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.o-shc:hover{
  transform: none !important;
  box-shadow: none !important;
}

.o-shc-badge{
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  text-transform: none !important;
  font-size: 0.78rem !important;
}

.o-shc-dot{
  display: none !important;
}

.o-shc-simple-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.o-shc-simple-stats div{
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
}

.o-shc-simple-stats b{
  font-size: 1.15rem;
  line-height: 1;
}

.o-shc-simple-stats span{
  color: var(--muted);
  font-size: 0.78rem;
}

.o-shc-actions a{
  border-radius: 8px !important;
  box-shadow: none !important;
}

.o-shc-actions a.primary{
  background: #2563eb !important;
  color: #ffffff !important;
}

.o-plan-label{
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.o-upsell-card{
  border-radius: 8px !important;
}

.o-activity-feed{
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.o-activity-late{
  background: transparent !important;
  padding: 0 !important;
}

@media (max-width: 768px){
  .wrap{
    width: min(1180px, calc(100% - 20px));
  }

  body[data-app-shell="1"] .o-main{
    padding: 14px 10px calc(var(--bnav-h) + 18px) !important;
  }

  .o-task-grid{
    grid-template-columns: 1fr;
  }

  .o-task-card{
    min-height: 68px;
  }

  .o-stat-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .o-store-swipe{
    display: grid !important;
    grid-template-columns: 1fr;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .o-shc{
    width: 100%;
    min-width: 0;
  }
}

/* Quiet dashboard density */
.o-task-card{
  min-height: 58px;
  padding: 12px;
}

.o-task-icon{
  width: 34px;
  height: 34px;
}

.o-task-copy small{
  display: none;
}

.o-shc-summary{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
}

.o-shc-summary b{
  color: var(--ink);
  font-size: 1.35rem;
}

.o-shc-summary span{
  font-size: 0.82rem;
}

.o-shc-last{
  display: none;
}

@media (max-width: 768px){
  .o-task-card{
    min-height: 54px;
  }
}

@media (min-width: 769px){
  body[data-shell-role="owner"] .o-sidebar{
    width: 238px !important;
  }

  body[data-shell-role="owner"] .o-main{
    margin-left: 238px !important;
  }
}

/* =========================================================
   GUIDED UI LAYER
   Visual anchors for non-technical users without hiding power.
   ========================================================= */

:root{
  --tt-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.6 12 4l8 6.6V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1v-9.4Z'/%3E%3C/svg%3E");
  --tt-icon-stores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10h14l-1-5H6l-1 5Z'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3Cpath d='M4 10h16'/%3E%3C/svg%3E");
  --tt-icon-staff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.4a3.6 3.6 0 0 0-3.6-3.6H7.6A3.6 3.6 0 0 0 4 18.6V20'/%3E%3Cpath d='M10 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M20 20v-1a3 3 0 0 0-2.4-2.9'/%3E%3Cpath d='M15.6 4.4a3 3 0 0 1 0 5.8'/%3E%3C/svg%3E");
  --tt-icon-attendance: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3'/%3E%3Cpath d='M16 3v3'/%3E%3Cpath d='M4 8h16'/%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z'/%3E%3Cpath d='m8 14 2.1 2.1L16 10.8'/%3E%3C/svg%3E");
  --tt-icon-leave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3'/%3E%3Cpath d='M16 3v3'/%3E%3Cpath d='M4 8h16'/%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
  --tt-icon-phones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
  --tt-icon-performance: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='m7 15 3.2-3.2 2.2 2.2L18 8.4'/%3E%3Cpath d='M18 8.4V13'/%3E%3Cpath d='M13.5 8.4H18'/%3E%3C/svg%3E");
  --tt-page-icon: var(--tt-icon-home);
}

body[data-active-page="stores"]{ --tt-page-icon: var(--tt-icon-stores); }
body[data-active-page="employees"]{ --tt-page-icon: var(--tt-icon-staff); }
body[data-active-page="logs"]{ --tt-page-icon: var(--tt-icon-attendance); }
body[data-active-page="devices"]{ --tt-page-icon: var(--tt-icon-phones); }
body[data-active-page="leaves"]{ --tt-page-icon: var(--tt-icon-leave); }
body[data-active-page="managers"]{ --tt-page-icon: var(--tt-icon-staff); }
body[data-active-page="metrics"]{ --tt-page-icon: var(--tt-icon-performance); }
body[data-active-page="notifications_app"]{ --tt-page-icon: var(--tt-icon-phones); }
body[data-shell-role="manager"]{ --tt-page-icon: var(--tt-icon-stores); }
body[data-shell-role="employee"]{ --tt-page-icon: var(--tt-icon-staff); }

.tt-ui-icon{
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

body[data-app-shell="1"] .o-nav-link{
  gap: 10px !important;
}

body[data-app-shell="1"] .o-nav-link .tt-ui-icon{
  color: currentColor;
  opacity: 0.88;
}

body[data-app-shell="1"] .o-bnav-icon{
  display: grid;
  place-items: center;
  min-height: 22px;
}

body[data-app-shell="1"] .o-bnav-icon .tt-ui-icon{
  width: 20px;
  height: 20px;
}

body[data-app-shell="1"] .o-main .topbar{
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

body[data-app-shell="1"] .o-main .topbar > div:first-child{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-width: 0;
}

body[data-app-shell="1"] .o-main .topbar > div:first-child::before{
  content: "";
  grid-row: 1 / span 4;
  width: 48px;
  height: 48px;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: #eff6ff var(--tt-page-icon) center / 25px 25px no-repeat;
}

body[data-app-shell="1"] .o-main .topbar h2{
  margin: 0 0 2px !important;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

body[data-app-shell="1"] .o-main .topbar .small{
  max-width: 680px;
  color: #667085 !important;
}

body[data-app-shell="1"] .o-main .card,
body[data-app-shell="1"] .o-main .notice,
body[data-app-shell="1"] .o-main .item,
body[data-app-shell="1"] .mx-body .card,
body[data-app-shell="1"] .mx-body .notice{
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] .o-main .list{
  display: grid;
  gap: 10px;
}

body[data-app-shell="1"] .o-main .item{
  padding: 14px;
  background: #fff;
}

body[data-app-shell="1"] .o-main .icon{
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dbe7ff !important;
  border-radius: 12px !important;
  background: #eff6ff !important;
  box-shadow: none !important;
  color: #1d4ed8 !important;
  font-weight: 900;
}

body[data-app-shell="1"] .o-main .badge,
body[data-app-shell="1"] .mx-body .badge{
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  gap: 6px !important;
  background: #f9fafb !important;
  color: #344054 !important;
  font-size: 0.78rem !important;
  line-height: 1.1;
}

body[data-app-shell="1"] .o-main .dot,
body[data-app-shell="1"] .mx-body .dot{
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
}

body[data-app-shell="1"] .o-main .actions{
  gap: 8px !important;
}

body[data-app-shell="1"] .o-main .btn,
body[data-app-shell="1"] .o-main button,
body[data-app-shell="1"] .mx-body .btn,
body[data-app-shell="1"] .mx-body button{
  border-radius: 8px !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] .o-main .card.pad[style*="text-align:center"]::before,
body[data-app-shell="1"] .mx-body .card.pad[style*="text-align:center"]::before{
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  background: #eff6ff var(--tt-page-icon) center / 30px 30px no-repeat;
}

body[data-app-shell="1"] .tt-table-desktop{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

body[data-app-shell="1"] .tt-table-desktop table th{
  border-bottom: 1px solid var(--border) !important;
  background: #f8fafc;
  color: #667085;
  letter-spacing: 0.03em;
}

body[data-app-shell="1"] .tt-mobile-row-card{
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #fff !important;
}

body[data-app-shell="1"] .tt-mobile-row-head{
  align-items: flex-start;
  gap: 10px;
}

.tt-guidance-card{
  background: #f8fafc !important;
}

.tt-feature-line{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  color: #667085;
  font-size: 0.86rem;
}

.tt-feature-line span{
  display: inline-flex;
  gap: 4px;
}

.tt-row-more{
  position: relative;
  display: inline-flex;
}

.tt-row-more summary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.tt-row-more summary::-webkit-details-marker{
  display: none;
}

.tt-row-more > div{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: grid;
  min-width: 150px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.tt-row-more a{
  padding: 10px 12px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
}

.tt-row-more a + a{
  border-top: 1px solid var(--border);
}

.tt-row-more a:hover{
  background: #f8fafc;
}

/* Marketing/auth/check-in pages use the main layout, not the app shell. */
body:not([data-app-shell]) .h-eyebrow{
  display: none !important;
}

body:not([data-app-shell]) .section .card.pad > .topbar{
  align-items: center !important;
  gap: 14px !important;
}

body:not([data-app-shell]) .section .card.pad > .topbar > div:first-child{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

body:not([data-app-shell]) .section .card.pad > .topbar > div:first-child::before{
  content: "";
  grid-row: 1 / span 4;
  width: 48px;
  height: 48px;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: #eff6ff var(--tt-page-icon) center / 25px 25px no-repeat;
}

body:not([data-app-shell]) .section .card.pad > .topbar h2{
  margin: 0 0 2px !important;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

body:not([data-app-shell]) .section .card.pad[style*="text-align:center"]:not(:has(.topbar))::before{
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  background: #eff6ff var(--tt-page-icon) center / 30px 30px no-repeat;
}

/* Shared owner store chooser: Attendance, Staff, and Managers. */
.o-store-chooser-head{
  margin-bottom: 16px !important;
}

.o-store-chooser-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.o-store-chooser-card{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  gap: 14px;
  align-items: center;
  min-height: 142px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.o-store-chooser-card:hover{
  border-color: #93b4f5;
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
  transform: translateY(-2px);
  text-decoration: none;
}

.o-store-chooser-icon,
.o-store-management-logo{
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe7ff;
  background: #eff6ff;
  color: #2563eb;
}

.o-store-chooser-icon{
  width: 52px;
  height: 52px;
  border-radius: 15px;
}

.o-store-chooser-icon img,
.o-store-management-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.o-store-chooser-copy,
.o-store-management-copy{
  min-width: 0;
}

.o-store-chooser-copy h3,
.o-store-management-copy h3{
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.o-store-chooser-copy h3{
  font-size: 1.08rem;
}

.o-store-chooser-copy p,
.o-store-management-copy p{
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.o-store-chooser-arrow{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f8fafc;
  color: #475467;
}

.o-store-chooser-arrow svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stores management grid. */
.o-stores-page-head{
  margin-bottom: 16px !important;
}

.o-stores-head-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.o-store-management-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.o-store-management-card{
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
  min-width: 0;
  min-height: 190px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.o-store-management-card:hover{
  border-color: #c4d5f8;
  box-shadow: 0 12px 28px rgba(15,23,42,0.07);
}

.o-store-management-main{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
}

.o-store-management-logo{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  flex: 0 0 auto;
}

.o-store-management-copy h3{
  font-size: 1.05rem;
}

.o-store-management-copy p{
  line-height: 1.3;
}

.o-store-icon-actions{
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.o-store-icon-actions a{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #d7dee8;
  border-radius: 11px;
  background: #f8fafc;
  color: #344054;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.o-store-icon-actions a:hover{
  border-color: #93b4f5;
  background: #eff6ff;
  color: #1d4ed8;
}

.o-store-icon-actions a.is-locked{
  color: #98a2b3;
  background: #f2f4f7;
}

.o-store-management-card.is-locked{
  background: #f8fafc;
}

.o-store-management-locked{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.o-store-management-locked a{
  color: #1d4ed8;
  font-weight: 850;
}

@media (max-width: 900px){
  .o-store-management-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .o-store-chooser-grid,
  .o-store-management-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .o-store-chooser-card{
    min-height: 94px;
    padding: 14px;
    border-radius: 12px;
  }

  .o-store-chooser-icon{
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .o-stores-head-actions{
    width: 100%;
  }

  .o-stores-head-actions .btn{
    flex: 1;
  }

  .o-store-management-card{
    min-height: 170px;
    padding: 16px;
    border-radius: 12px;
  }

  .o-store-icon-actions{
    grid-template-columns: repeat(5, minmax(38px, 1fr));
  }

  .o-store-icon-actions a{
    width: 100%;
  }
}

/* Attendance export dialog */
.tt-logs-filter-card{
  padding: 14px !important;
  background: #f8fafc !important;
}

.tt-logs-toolbar-compact{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.tt-logs-toolbar-compact .tt-logs-toolbar-form{
  flex: 1;
  max-width: 520px;
}

.tt-export-trigger{
  display: inline-grid !important;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0 !important;
  border: 1px solid #cdd5df !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #1d4ed8 !important;
  cursor: pointer;
}

.tt-export-trigger:hover{
  border-color: #93b4f5 !important;
  background: #eff6ff !important;
  transform: none !important;
}

.tt-export-open{
  overflow: hidden;
}

body.tt-export-open .o-bottom-nav{
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.tt-export-backdrop{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,23,42,0.46);
  opacity: 0;
  backdrop-filter: blur(5px);
  transition: opacity 0.18s ease;
}

.tt-export-backdrop[hidden]{
  display: none !important;
}

.tt-export-backdrop.open{
  opacity: 1;
}

.tt-export-modal{
  width: min(680px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: auto;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15,23,42,0.24);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}

.tt-export-backdrop.open .tt-export-modal{
  transform: translateY(0) scale(1);
}

.tt-export-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.tt-export-head h3{
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.tt-export-head p{
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.tt-export-close{
  display: inline-grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}

.tt-export-body{
  padding: 20px;
}

.tt-export-options{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tt-export-option{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.tt-export-option:hover{
  border-color: #93b4f5;
  background: #f8fbff;
  text-decoration: none;
}

.tt-export-option-icon{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  flex: 0 0 auto;
}

.tt-export-option > span:last-child{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tt-export-option b{
  font-size: 0.9rem;
}

.tt-export-option small{
  color: var(--muted);
  font-size: 0.76rem;
}

.tt-export-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tt-export-divider::after{
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1;
}

.tt-export-range-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.tt-export-range-form .field{
  margin: 0;
  min-width: 0;
}

.tt-export-range-form input{
  width: 100%;
  min-width: 0;
}

.tt-export-range-form .btn{
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  white-space: nowrap;
}

.tt-export-note{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 640px){
  .tt-logs-toolbar-compact{
    align-items: end;
  }

  .tt-logs-toolbar-compact .tt-logs-toolbar-form{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .tt-export-backdrop{
    align-items: flex-end;
    padding: 0;
  }

  .tt-export-modal{
    width: 100%;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }

  .tt-export-head{
    padding: 18px 16px 14px;
  }

  .tt-export-body{
    padding: 16px;
  }

  .tt-export-options,
  .tt-export-range-form{
    grid-template-columns: 1fr;
  }

  .tt-export-range-form .btn{
    grid-column: 1;
  }

  .tt-export-option{
    min-height: 66px;
  }

  .tt-export-range-form .btn{
    width: 100%;
  }
}

@media (max-width: 680px){
  body[data-app-shell="1"] .o-main .topbar{
    align-items: stretch !important;
    flex-direction: column;
  }

  body[data-app-shell="1"] .o-main .topbar > div:first-child{
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 10px;
  }

  body[data-app-shell="1"] .o-main .topbar > div:first-child::before{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-size: 22px 22px;
  }

  body[data-app-shell="1"] .o-main .actions,
  body[data-app-shell="1"] .o-main .topbar > div:last-child{
    width: 100%;
  }

  body[data-app-shell="1"] .o-main .actions .btn,
  body[data-app-shell="1"] .o-main .actions button{
    flex: 1 1 auto;
  }

  .tt-row-more,
  .tt-row-more summary{
    flex: 1 1 auto;
  }

  .tt-row-more > div{
    left: 0;
    right: auto;
    min-width: 100%;
  }

  body:not([data-app-shell]) .section .card.pad > .topbar > div:first-child{
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 10px;
  }

  body:not([data-app-shell]) .section .card.pad > .topbar > div:first-child::before{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-size: 22px 22px;
  }
}

/* Compact action language for staff and manager lists. */
.tt-page-icon-actions,
.tt-icon-actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-page-icon-actions{
  margin: 12px 0 8px;
}

.tt-icon-actions form{
  display: inline-flex;
  margin: 0 !important;
}

.tt-action-icon,
body[data-app-shell="1"] .o-main .actions .tt-action-icon,
body[data-app-shell="1"] .o-main .tt-mobile-actions .tt-action-icon{
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d7dee8 !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #344054 !important;
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
}

.tt-action-icon:hover{
  border-color: #9db7e8 !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  transform: none !important;
}

.tt-action-icon:focus-visible{
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.tt-action-icon.is-primary{
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #fff !important;
}

.tt-action-icon.is-primary:hover{
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  color: #fff !important;
}

.tt-action-icon.is-warning{
  border-color: #fedf89 !important;
  background: #fffbeb !important;
  color: #b54708 !important;
}

.tt-action-icon.is-success{
  border-color: #abefc6 !important;
  background: #ecfdf3 !important;
  color: #027a48 !important;
}

.tt-action-icon.is-danger{
  border-color: #fecaca !important;
  background: #fff1f2 !important;
  color: #b42318 !important;
}

@media (max-width: 640px){
  .tt-action-icon,
  body[data-app-shell="1"] .o-main .actions .tt-action-icon,
  body[data-app-shell="1"] .o-main .tt-mobile-actions .tt-action-icon{
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}