/*
 * Thlengta square-corner design system.
 * Loaded last so feature styles cannot reintroduce rounded cards or controls.
 */

html body :where(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea,
  dialog,
  [role="dialog"],
  [role="button"],
  .btn,
  .button,
  .card,
  .panel,
  .modal,
  .dialog,
  .popup,
  .popover,
  .dropdown,
  .drawer,
  .sheet,
  .toast,
  .notice,
  .banner,
  .alert,
  .chip,
  .badge,
  [class$="-btn"],
  [class*="-btn "],
  [class$="-button"],
  [class*="-button "],
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-modal"],
  [class*="-modal "],
  [class$="-dialog"],
  [class*="-dialog "],
  [class$="-popup"],
  [class*="-popup "],
  [class$="-popover"],
  [class*="-popover "],
  [class$="-dropdown"],
  [class*="-dropdown "],
  [class$="-drawer"],
  [class*="-drawer "],
  [class$="-sheet"],
  [class*="-sheet "],
  [class$="-container"],
  [class*="-container "],
  [class$="-notice"],
  [class*="-notice "],
  [class$="-banner"],
  [class*="-banner "],
  [class$="-alert"],
  [class*="-alert "],
  [class$="-chip"],
  [class*="-chip "],
  [class$="-badge"],
  [class*="-badge "],
  [class$="-pill"],
  [class*="-pill "],
  [class$="-tile"],
  [class*="-tile "],
  [class$="-item"],
  [class*="-item "],
  [class$="-row"],
  [class*="-row "],
  [class$="-wrap"],
  [class*="-wrap "],
  [class$="-frame"],
  [class*="-frame "],
  [class$="-window"],
  [class*="-window "],
  [class$="-surface"],
  [class*="-surface "],
  [class$="-fieldset"],
  [class*="-fieldset "],
  [class$="-menu"],
  [class*="-menu "],
  [class$="-tabs"],
  [class*="-tabs "],
  [class$="-tab"],
  [class*="-tab "]
) {
  border-radius: 0 !important;
}

/* Keep identity, location and state indicators circular. */
html body :where(
  .avatar,
  [class$="-avatar"],
  [class*="-avatar "],
  [class$="-profile-photo"],
  [class*="-profile-photo "],
  [class$="-profile-image"],
  [class*="-profile-image "],
  .tt-store-ident-logo,
  .tt-store-ident-fallback,
  .o-store-chooser-icon,
  .o-store-management-logo,
  .tt-dashboard-workplace-logo,
  .tt-dashboard-detail-logo,
  .o-attendance-store img,
  .o-attendance-store > span,
  .he-store-icon,
  .tt-scan-workplace-logo,
  .tt-scan-workplace-fallback,
  .staff-workplace-mark,
  .attendance-map-workplace-mark,
  [class$="-spinner"],
  [class*="-spinner "],
  [class$="-dot"],
  [class*="-dot "],
  [class$="-radio"],
  [class*="-radio "],
  .leaflet-marker-icon,
  .leaflet-div-icon
) {
  border-radius: 50% !important;
}

/* Device mockups are physical silhouettes, not application containers. */
html body .fl-phone-frame {
  border-radius: 36px !important;
}

html body .fl-phone-frame::before {
  border-radius: 32px !important;
}

html body .fl-phone-frame::after {
  border-radius: 28px !important;
}

html body :where(
  .tt-store-ident-logo,
  .o-store-chooser-icon img,
  .o-store-management-logo img,
  .tt-dashboard-workplace-logo img,
  .tt-dashboard-detail-logo img,
  .o-attendance-store img,
  .he-store-icon img,
  .tt-scan-workplace-logo,
  .staff-workplace-mark img,
  .attendance-map-workplace-mark img
) {
  border-radius: 50% !important;
}

/*
 * Borderless surface hierarchy.
 * Page canvas, raised content, controls, and selected states are separated by
 * shade instead of decorative outlines.
 */
:root {
  --tt-surface-raised: #ffffff;
  --tt-surface-subtle: #f3f5f4;
  --tt-surface-hover: #e9edeb;
  --tt-surface-selected: #e1e7e4;
  --tt-surface-table-alt: #f8faf9;
  --tt-google-auth-surface: #d1d5db;
  --tt-google-auth-hover: #c4c9d0;
  --tt-google-auth-active: #b8bec6;
  --tt-google-auth-edge: rgba(17, 24, 39, .26);
}

@keyframes tt-page-content-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html body {
  animation: tt-page-content-fade-in 600ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  html body {
    animation: none;
  }
}

html[data-theme="dark"] {
  --tt-surface-raised: #191d23;
  --tt-surface-subtle: #22272e;
  --tt-surface-hover: #292f37;
  --tt-surface-selected: #303740;
  --tt-surface-table-alt: #1d2229;
  --tt-google-auth-surface: #3f454d;
  --tt-google-auth-hover: #4a515a;
  --tt-google-auth-active: #555d67;
  --tt-google-auth-edge: rgba(255, 255, 255, .22);
}

/* Google auth stays visible without reintroducing a line border. */
html body .tt-google-auth-button {
  border: 0 !important;
  background: var(--tt-google-auth-surface) !important;
  color: var(--text, #151b1a) !important;
  box-shadow:
    0 0 0 1px var(--tt-google-auth-edge),
    0 3px 8px rgba(17, 24, 39, .12) !important;
}

html body .tt-google-auth-button:is(:hover, :focus-visible) {
  background: var(--tt-google-auth-hover) !important;
  box-shadow:
    0 0 0 1px var(--tt-google-auth-edge),
    0 4px 10px rgba(17, 24, 39, .16) !important;
}

html body .tt-google-auth-button:is(:active, .tt-google-auth-busy) {
  background: var(--tt-google-auth-active) !important;
  box-shadow: 0 0 0 1px var(--tt-google-auth-edge) !important;
}

/* Buttons communicate interaction through fill, not a rectangular outline. */
html body :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button,
  [class$="-btn"],
  [class*="-btn "],
  [class$="-button"],
  [class*="-button "]
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button,
  [class$="-btn"],
  [class*="-btn "],
  [class$="-button"],
  [class*="-button "]
):focus {
  outline: 0 !important;
}

body[data-app-shell="1"] :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button,
  [class$="-btn"],
  [class*="-btn "],
  [class$="-button"],
  [class*="-button "]
):where(:not(.primary):not([class*="primary"]):not([class*="danger"]):not([class*="success"]):not([class*="warning"]):not([class*="brand"]):not([class*="logo"])):hover,
body[data-app-shell="1"] :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button,
  [class$="-btn"],
  [class*="-btn "],
  [class$="-button"],
  [class*="-button "]
):where(:not(.primary):not([class*="primary"]):not([class*="danger"]):not([class*="success"]):not([class*="warning"]):not([class*="brand"]):not([class*="logo"])):focus-visible {
  border: 0 !important;
  background: var(--tt-surface-hover) !important;
  box-shadow: none !important;
}

/* The notification bell is an icon control, not a shaded rectangular button. */
html body[data-app-shell="1"] .tt-notification-bell-button,
html body[data-app-shell="1"] .tt-notification-bell-button:is(:hover, :focus-visible, :active) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* App cards sit one shade above their canvas. */
body[data-app-shell="1"]:not([data-shell-role="metrics"]) :where(
  .card,
  .panel,
  .item,
  .notice,
  .tt-raised-surface,
  .tt-flat-surface,
  .tt-table-desktop,
  .tt-mobile-row-card,
  .tt-log-table-wrap,
  .tt-log-mobile-card,
  .tt-roster-mobile-card,
  .o-attendance-card,
  .o-ops-panel,
  .o-ops-onboarding,
  .o-store-management-card,
  .o-store-chooser-card,
  .o-task-card,
  .he-store-card,
  .he-calendar-panel,
  .he-event-board,
  .staff-attendance,
  .staff-install-panel,
  .staff-leave-panel,
  .staff-calendar-panel,
  .staff-badges-panel,
  .staff-insights-panel,
  .staff-leaderboard-panel,
  .staff-score-panel,
  .staff-sessions-panel,
  .staff-trend-panel,
  .pwa-card,
  .pwa-row,
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "]
) {
  border: 0 !important;
  background-color: var(--tt-surface-raised) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"]:not([data-shell-role="metrics"]) :where(
  .o-attendance-card,
  .o-store-management-card,
  .o-store-chooser-card,
  .o-task-card
):hover {
  border: 0 !important;
  background-color: var(--tt-surface-subtle) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"]:not([data-shell-role="metrics"]) :is(
  .o-attendance-card.is-selected-store,
  .o-attendance-card.is-selected-store:hover,
  .o-store-management-card.is-active,
  .o-store-chooser-card.is-active
) {
  border: 0 !important;
  background: var(--tt-surface-selected) !important;
  box-shadow: none !important;
}

/* Dashboard attention and calendar detail rows use alternating shade. */
body[data-app-shell="1"]:not([data-shell-role="metrics"]) :where(
  .o-attention-row,
  .o-activity-row,
  .o-upcoming-row,
  .o-calendar-detail,
  .o-calendar-event-item,
  .o-attendance-metrics > div
) {
  border: 0 !important;
  background-color: var(--tt-surface-subtle) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"]:not([data-shell-role="metrics"]) :where(
  .o-attention-row,
  .o-activity-row,
  .o-upcoming-row
):hover {
  border: 0 !important;
  background-color: var(--tt-surface-hover) !important;
  box-shadow: none !important;
}

/* Calendar status fills remain intact; only their box-like rings are removed. */
body[data-app-shell="1"] :where(
  .o-calendar-grid button,
  .he-day
) {
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] :where(
  .o-calendar-grid button.is-active-date,
  .he-day.is-selected
) {
  filter: brightness(.92);
}

/* Selected navigation is a quiet surface shade with no bar, ring, or border. */
body[data-app-shell="1"] :is(
  .o-nav-link,
  .o-bnav-item,
  .mx-nav-link,
  .mx-mobile-tab
) {
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] :is(
  .o-nav-link.active,
  .o-bnav-item.active,
  .mx-nav-link.active,
  .mx-mobile-tab.active
) {
  border: 0 !important;
  background: var(--tt-surface-selected) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] :is(
  .o-nav-link.active,
  .o-bnav-item.active,
  .mx-nav-link.active,
  .mx-mobile-tab.active
)::before {
  content: none !important;
  display: none !important;
}

/* Staff, attendance, MetriX, and admin tables separate rows by shade. */
body[data-app-shell="1"] :where(
  table,
  .tt-log-table-wrap,
  .tt-table-desktop,
  .sa-table-wrap,
  .mx3-table-wrap,
  .mx3-team-table-wrap,
  .mx6-answer-table-wrap
) {
  border: 0 !important;
  background-color: var(--tt-surface-raised) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] table :where(th, td) {
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-shell="1"] table thead th {
  background-color: var(--tt-surface-subtle) !important;
}

body[data-app-shell="1"] table tbody tr:nth-child(even) td {
  background-color: var(--tt-surface-table-alt) !important;
}

body[data-app-shell="1"] table tbody tr:hover td {
  background-color: var(--tt-surface-hover) !important;
}

/* Superadmin shares the authenticated shell. */
body[data-app-shell="1"] :where(
  .sa-notice,
  .sa-stats,
  .sa-sales-stats,
  .sa-table-wrap,
  .sa-panel
) {
  border: 0 !important;
  background-color: var(--tt-surface-raised) !important;
  box-shadow: none !important;
}

/* Blog administration uses its own shell and light canvas. */
body.ba-body :where(
  .ba-button,
  .ba-icon-button,
  button,
  [role="button"]
) {
  border: 0 !important;
  box-shadow: none !important;
}

body.ba-body :where(
  .ba-kpis,
  .ba-panel,
  .ba-table-wrap,
  .ba-fieldset,
  .ba-editor-block,
  .ba-media-upload,
  .ba-media-card
) {
  border: 0 !important;
  background: var(--tt-surface-raised) !important;
  box-shadow: none !important;
}

body.ba-body .ba-table :where(th, td) {
  border: 0 !important;
}

body.ba-body .ba-table thead th {
  background: var(--tt-surface-subtle) !important;
}

body.ba-body .ba-table tbody tr:nth-child(even) td {
  background: var(--tt-surface-table-alt) !important;
}

body.ba-body :where(.ba-sidebar a, .ba-sidebar form button):hover {
  background: var(--tt-surface-hover) !important;
}

body.ba-body .ba-sidebar a.is-active {
  border: 0 !important;
  background: var(--tt-surface-selected) !important;
  color: var(--ba-ink) !important;
  box-shadow: none !important;
}

/* Public controls also lose decorative borders without changing branded fills. */
body:not([data-app-shell="1"]):not(.ba-body) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button
) {
  border: 0 !important;
  box-shadow: none !important;
}

/* List pages previously carried inline table and outer-card borders. */
html body[data-app-shell="1"] .o-main .tt-borderless-list-page :is(
  .card,
  .super.card,
  .tt-table-desktop,
  .tt-mobile-row-card,
  table,
  th,
  td
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"] .o-main .tt-borderless-list-page > .card {
  background: var(--tt-surface-raised) !important;
}

html body[data-app-shell="1"] .o-main .tt-borderless-list-page .topbar {
  border: 0 !important;
}

html body[data-app-shell="1"] .o-main .tt-borderless-list-page :is(
  .badge,
  .chip,
  .tt-action-icon,
  .tt-icon-btn
) {
  border: 0 !important;
  box-shadow: none !important;
}

/* Attendance navigation, rows, details, and mobile cards all use fill contrast. */
html body[data-app-shell="1"] .o-main .tt-attendance-logs-page :is(
  .tt-logs-filter-card,
  .tt-attendance-view-tabs,
  .tt-attendance-view-tabs a,
  .tt-attendance-view-switcher form,
  .tt-log-table-wrap,
  .tt-log-table th,
  .tt-log-main-row td,
  .tt-log-detail-row td,
  .tt-log-detail-grid > div,
  .tt-log-mobile-card,
  .tt-log-mobile-main,
  .tt-roster-mobile-card,
  .tt-log-event,
  .tt-log-status,
  .tt-log-more,
  .tt-pager-wrap,
  .tt-pager-current
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-logs-filter-card,
html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-attendance-view-tabs,
html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-attendance-view-switcher form {
  background: var(--tt-surface-subtle) !important;
}

html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-attendance-view-tabs a.is-active {
  background: var(--tt-surface-selected) !important;
}

html body[data-app-shell="1"] .o-main .tt-attendance-logs-page :is(
  .tt-log-mobile-card,
  .tt-roster-mobile-card
) {
  background: var(--tt-surface-raised) !important;
}

html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-log-detail-grid > div {
  background: var(--tt-surface-subtle) !important;
}

/* Workplace creation and editing stay borderless across every wizard step. */
html body[data-app-shell="1"] .tt-create-dialog {
  border: 0 !important;
  box-shadow: 0 26px 72px rgba(17, 30, 38, .24) !important;
}

html body[data-app-shell="1"] .tt-create-dialog.is-workplace-flow {
  width: min(980px, calc(100vw - 28px));
  max-width: 980px;
}

html body[data-app-shell="1"] .tt-create-dialog.is-workplace-flow .tt-create-dialog-head {
  border: 0 !important;
  background: var(--tt-surface-subtle) !important;
}

html body[data-app-shell="1"] .tt-borderless-flow-page :is(
  .card,
  .super,
  .topbar,
  .chip,
  .notice,
  .tt-setup-card,
  .tt-store-kind-card,
  .tt-weekly-row,
  .tt-shift-row,
  .tt-wiz-shift-row,
  .tt-simple-day-row,
  .tt-shift-seed-card,
  .tt-review-block,
  .tt-review-schedule-row,
  .tt-review-map,
  .tt-flat-surface,
  .tt-map-wrap,
  .tt-radius-row,
  .tt-day-chip span,
  .tt-shift-days span,
  .tt-settings-shell,
  .tt-store-settings-card,
  .tt-crop-panel,
  .tt-crop-stage
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"] .tt-borderless-flow-page > :is(.card, .super),
html body[data-app-shell="1"] .tt-create-dialog .tt-borderless-flow-page > :is(.card, .super),
html body[data-app-shell="1"] .tt-create-dialog .tt-borderless-flow-page > .tt-workplace-review-shell {
  background: transparent !important;
}

html body[data-app-shell="1"] .tt-borderless-flow-page :is(
  .tt-setup-card,
  .tt-weekly-row,
  .tt-shift-row,
  .tt-wiz-shift-row,
  .tt-simple-day-row,
  .tt-shift-seed-card,
  .tt-review-block,
  .tt-review-schedule-row,
  .tt-flat-surface,
  .tt-store-settings-card,
  .notice
) {
  background: var(--tt-surface-subtle) !important;
}

html body[data-app-shell="1"] .tt-borderless-flow-page .tt-store-kind-card {
  background: var(--tt-surface-raised) !important;
}

html body[data-app-shell="1"] .tt-borderless-flow-page .tt-store-kind-card:is(.is-selected, :has(input:checked)) {
  border: 0 !important;
  background: var(--tt-surface-selected) !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"] .tt-borderless-flow-page :is(
  .tt-day-chip input:checked + span,
  .tt-shift-days input:checked + span
) {
  border: 0 !important;
  background: var(--tt-surface-selected) !important;
}

html body[data-app-shell="1"] .tt-create-dialog .tt-workplace-flow-view {
  padding: 0 !important;
}

@media (max-width: 640px) {
  html body[data-app-shell="1"] .tt-create-dialog.is-workplace-flow {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }

  html body[data-app-shell="1"] .tt-create-dialog.is-workplace-flow .tt-create-dialog-body {
    padding: 12px;
  }
}

/* Dashboard workplace cards sit directly on the canvas without a second surface. */
body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-attendance-grid.o-workplace-well {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-workplace-well > .o-attendance-card {
  border: 0 !important;
  background: var(--tt-surface-raised) !important;
  box-shadow: none !important;
}

body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-workplace-well > .o-attendance-card:hover {
  background: #f1f3f5 !important;
}

body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-workplace-well > .o-attendance-card.is-selected-store,
body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-workplace-well > .o-attendance-card.is-selected-store:hover {
  background: var(--tt-surface-raised) !important;
}

html[data-theme="dark"] body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-attendance-card {
  border: 0 !important;
  background: #191d23 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-attendance-card:hover {
  background: #22272e !important;
}

html[data-theme="dark"] body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-attendance-card.is-selected-store,
html[data-theme="dark"] body[data-app-shell="1"]:not([data-shell-role="metrics"]) .o-main .o-attendance-card.is-selected-store:hover {
  border: 0 !important;
  background: #292f37 !important;
  box-shadow: none !important;
}

/* MetriX uses the same hierarchy with a darker, product-specific canvas. */
body[data-app-shell="1"][data-shell-role="metrics"] {
  --tt-mx-canvas: #0b0c0d;
  --tt-mx-raised: #151719;
  --tt-mx-subtle: #1d2022;
  --tt-mx-hover: #25292c;
  --tt-mx-selected: #2c3134;
}

html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] {
  --tt-mx-canvas: #f3f5f4;
  --tt-mx-raised: #ffffff;
  --tt-mx-subtle: #edf0ef;
  --tt-mx-hover: #e4e8e6;
  --tt-mx-selected: #dce2df;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  button,
  .btn,
  .mx-nav-link,
  .mx-back-link,
  .mx-menu-btn,
  .mx-sidebar-close,
  .mx-profile-btn,
  .mx3-button,
  .mx3-icon-button,
  .mx4-tool-button,
  .mx4-pop-button,
  .mx6-focus-close,
  .mx6-focus-download,
  .mx6-table-download-trigger
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  .mx-sidebar,
  .mx-top,
  .m2-surface,
  .mx-lock-table,
  .mx-lock-dialog,
  .mx6-staff-workspace,
  .mx6-staff-row,
  .mx8-usage-board,
  .mx4-rank-row,
  .mx4-mobile-rank,
  .mx4-profile-data,
  .mx4-profile-metrics,
  .mx4-score-note,
  .mx5-card-detail,
  .mx6-answer,
  .mx6-answer-table-wrap,
  .mx6-table-tools,
  .mx6-context-pop,
  .mx3-notice,
  .mx4-empty,
  .mx4-rank-list,
  .mx4-profile-nav,
  .mx4-profile-card-wrap,
  .mx6-focus-dialog
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx-main {
  background: var(--tt-mx-canvas) !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  .mx-sidebar,
  .m2-surface,
  .mx-lock-table,
  .mx-lock-dialog,
  .mx6-staff-workspace,
  .mx8-usage-board,
  .mx4-profile-data,
  .mx4-score-note,
  .mx5-card-detail,
  .mx6-answer,
  .mx6-answer-table-wrap,
  .mx6-context-pop
) {
  background: var(--tt-mx-raised) !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  .mx6-staff-row,
  .mx4-rank-row,
  .mx4-mobile-rank,
  .mx4-profile-metrics,
  .mx6-table-tools,
  .mx3-notice,
  .mx6-chat-input
) {
  border: 0 !important;
  background: var(--tt-mx-subtle) !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  .mx6-context-menu > summary,
  .mx6-context-current,
  .mx6-context-range,
  .mx6-context-range > a,
  .mx6-context-custom > summary,
  .mx6-context-actions button,
  .mx6-suggestions button,
  .mx6-message p,
  .mx6-message-mark,
  .mx8-meter,
  .mx8-reset-row,
  .mx8-reset-icon,
  .mx4-profile-data > header,
  .mx4-profile-metrics > span,
  .mx4-score-breakdown > div
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  .mx6-context-menu > summary,
  .mx6-context-range > a,
  .mx6-context-custom > summary,
  .mx6-context-actions button,
  .mx6-suggestions button,
  .mx8-reset-icon
) {
  background: var(--tt-mx-subtle) !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  a.mx6-staff-row,
  .mx4-rank-row,
  .mx4-mobile-rank
):hover {
  border: 0 !important;
  background: var(--tt-mx-hover) !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  .mx-nav-link.active,
  .mx-mobile-tab.active
) {
  border: 0 !important;
  background: var(--tt-mx-selected) !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] :is(
  table,
  th,
  td,
  .mx4-rank-head,
  .mx6-panel-head,
  .mx6-chat-head,
  .mx6-staff-summary,
  .mx6-staff-summary > span,
  .mx6-staff-metrics > span,
  .mx6-detail-dates,
  .mx6-detail-dates span,
  .mx5-detail-head,
  .mx5-detail-grid,
  .mx5-detail-score,
  .mx5-detail-section,
  .mx8-usage-head,
  .mx8-usage-summary,
  .mx8-usage-notes,
  .mx8-usage-notes > div
) {
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] table thead th,
html body[data-app-shell="1"][data-shell-role="metrics"] .mx4-rank-head,
html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-panel-head {
  background: var(--tt-mx-subtle) !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] table tbody tr:nth-child(even) td,
html body[data-app-shell="1"][data-shell-role="metrics"] .mx8-usage-notes > div:nth-child(even) {
  background: var(--tt-mx-subtle) !important;
}

/* The desktop header is empty; mobile keeps it for the navigation opener. */
@media (min-width: 981px) {
  html body[data-app-shell="1"][data-shell-role="metrics"] .mx-top {
    display: none !important;
  }

  html body[data-app-shell="1"][data-shell-role="metrics"] .mx-main {
    min-height: 100dvh;
  }

  html body[data-app-shell="1"][data-shell-role="metrics"][data-metrics-page="metrics_overview"] .mx-body {
    height: 100dvh !important;
  }
}

@media (max-width: 980px) {
  html body[data-app-shell="1"][data-shell-role="metrics"] .mx-top {
    border: 0 !important;
    background: var(--tt-mx-raised) !important;
    box-shadow: none !important;
  }
}

/*
 * MetriX chat tables are the deliberate exception to the borderless system:
 * cell rules preserve row/column scanning and the export control must remain
 * visible against either theme.
 */
html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-answer-table-wrap {
  border: 1px solid #383d40 !important;
  background: var(--tt-mx-raised) !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-tools {
  border: 0 !important;
  border-bottom: 1px solid #383d40 !important;
  background: var(--tt-mx-subtle) !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-answer table :is(th, td) {
  border: 0 !important;
  border-right: 1px solid #34393c !important;
  border-bottom: 1px solid #34393c !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-answer table :is(th, td):last-child {
  border-right: 0 !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-answer table tbody tr:last-child td {
  border-bottom: 0 !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger {
  width: 34px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: #f1f3f2 !important;
  color: #111416 !important;
  opacity: 1 !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger:hover,
html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger:focus-visible {
  background: #ffffff !important;
  color: #000000 !important;
}

html body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger :is(
  svg,
  .tt-ui-icon
) {
  display: block !important;
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] .mx6-answer-table-wrap {
  border-color: #cbd2d6 !important;
}

html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-tools {
  border-bottom-color: #cbd2d6 !important;
}

html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] .mx6-answer table :is(th, td) {
  border-right-color: #d3d9dc !important;
  border-bottom-color: #d3d9dc !important;
}

html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger {
  background: #242a2e !important;
  color: #ffffff !important;
}

html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger:hover,
html[data-theme="light"] body[data-app-shell="1"][data-shell-role="metrics"] .mx6-table-download-trigger:focus-visible {
  background: #111517 !important;
  color: #ffffff !important;
}

/* Touch layouts keep the row separation that desktop users receive on hover. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body[data-app-shell="1"]:not([data-shell-role="metrics"]) :is(
    .tt-mobile-row-card,
    .tt-log-mobile-card,
    .tt-roster-mobile-card,
    .o-attendance-card,
    .o-store-management-card,
    .o-store-chooser-card,
    .o-task-card,
    .o-attention-row,
    .o-activity-row,
    .o-upcoming-row,
    .pwa-row
  ) {
    border: 0 !important;
    background-color: var(--tt-surface-hover) !important;
    box-shadow: none !important;
  }

  body[data-app-shell="1"]:not([data-shell-role="metrics"]) :is(
    .tt-mobile-row-card,
    .tt-log-mobile-card,
    .tt-roster-mobile-card,
    .o-attendance-card,
    .o-store-management-card,
    .o-store-chooser-card,
    .o-task-card,
    .o-attention-row,
    .o-activity-row,
    .o-upcoming-row,
    .pwa-row
  ):is(:active, :focus-within) {
    background-color: var(--tt-surface-selected) !important;
  }

  body[data-app-shell="1"] .sa-page :is(.sa-table, .sa-sales-table) tbody tr {
    border: 0 !important;
    background-color: var(--tt-surface-hover) !important;
    box-shadow: none !important;
  }

  body[data-app-shell="1"] .sa-page :is(.sa-table, .sa-sales-table) tbody tr:is(:active, :focus-within) {
    background-color: var(--tt-surface-selected) !important;
  }

  body[data-app-shell="1"] .sa-page :is(.sa-table, .sa-sales-table) tbody tr > td {
    background-color: transparent !important;
  }

  /* Every attendance entry remains individually visible without mouse hover. */
  html body[data-app-shell="1"] .o-main .tt-attendance-logs-page :is(
    .tt-log-mobile-card,
    .tt-roster-mobile-card
  ) {
    border: 0 !important;
    background-color: var(--tt-surface-hover) !important;
    box-shadow: none !important;
  }

  html body[data-app-shell="1"] .o-main .tt-attendance-logs-page :is(
    .tt-log-mobile-card,
    .tt-roster-mobile-card
  ):is(:active, :focus-within) {
    background-color: var(--tt-surface-selected) !important;
  }

  html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-log-mobile-main {
    background-color: transparent !important;
  }

  html body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-log-mobile-detail .tt-log-detail-grid > div {
    border: 0 !important;
    background-color: var(--tt-surface-raised) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-app-shell="1"] .o-main .tt-attendance-logs-page :is(
    .tt-log-mobile-card,
    .tt-roster-mobile-card
  ) {
    background-color: #292f37 !important;
  }

  html[data-theme="dark"] body[data-app-shell="1"] .o-main .tt-attendance-logs-page :is(
    .tt-log-mobile-card,
    .tt-roster-mobile-card
  ):is(:active, :focus-within) {
    background-color: #303740 !important;
  }

  html[data-theme="dark"] body[data-app-shell="1"] .o-main .tt-attendance-logs-page .tt-log-mobile-detail .tt-log-detail-grid > div {
    background-color: #191d23 !important;
  }

  /* Staff cards need page-level specificity to outrank the legacy dark shell. */
  html body[data-app-shell="1"] .o-main .tt-staff-list-page .tt-mobile-row-card {
    border: 0 !important;
    background-color: var(--tt-surface-hover) !important;
    box-shadow: none !important;
  }

  html body[data-app-shell="1"] .o-main .tt-staff-list-page .tt-mobile-row-card:is(:active, :focus-within) {
    background-color: var(--tt-surface-selected) !important;
  }

  html body[data-app-shell="1"] .o-main .tt-staff-list-page .tt-mobile-row-card.is-actions-open {
    background-color: var(--tt-surface-selected) !important;
  }

  html[data-theme="dark"] body[data-app-shell="1"] .o-main .tt-staff-list-page .tt-mobile-row-card {
    background-color: #292f37 !important;
  }

  html[data-theme="dark"] body[data-app-shell="1"] .o-main .tt-staff-list-page .tt-mobile-row-card:is(:active, :focus-within) {
    background-color: #303740 !important;
  }

  html[data-theme="dark"] body[data-app-shell="1"] .o-main .tt-staff-list-page .tt-mobile-row-card.is-actions-open {
    background-color: #303740 !important;
  }

}