/**

 * Mobile-first workspace refinements (logged-in app + portal shell).

 * Loaded after workspace-showcase-brand.css. Scoped to body.tb-workspace-premium.

 *

 * Breakpoints:

 * - ≤1024px: compact shell, stacked heroes/grids, touch-friendly controls, horizontal table scroll.

 * - ≤640px: phone — bottom dock, extra safe padding, hide horizontal module strip, full-width panel actions.

 * - ≥1536px: large desktop — slightly wider content rail (still capped).

 */



body.tb-workspace-premium .tb-form-row-2 {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--tb-space-4, 16px);

}



body.tb-workspace-premium {

  padding-bottom: env(safe-area-inset-bottom, 0);

}



/* --------------------------------------------------------------------------

   Tablet + small laptop (≤1024px) — no bottom dock; keep module strip scrollable

   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  body.tb-workspace-premium .app-content {

    padding: var(--tb-space-4, 16px) var(--tb-space-3, 12px) var(--tb-space-8, 32px);

    max-width: 100%;

  }



  body.tb-workspace-premium .app-header-inner {

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 10px;

    padding: 12px 14px;

  }



  body.tb-workspace-premium .app-page-title {

    font-size: 1.15rem;

    line-height: 1.25;

  }



  body.tb-workspace-premium .app-header-toolbar {

    width: 100%;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;

  }



  body.tb-workspace-premium .app-header-search {

    order: 3;

    width: 100%;

    min-width: 0;

  }



  body.tb-workspace-premium .app-header-search-input {

    min-height: 44px;

    font-size: 16px;

  }



  body.tb-workspace-premium .shell .sidebar .side-nav a {

    min-height: 44px;

    display: flex;

    align-items: center;

  }



  body.tb-workspace-premium .tb-hero-shell,

  body.tb-workspace-premium .tb-mobile-stack {

    grid-template-columns: 1fr !important;

    gap: var(--tb-space-4, 16px);

  }



  body.tb-workspace-premium .layout-with-context {

    display: flex;

    flex-direction: column;

    gap: var(--tb-space-4, 16px);

  }



  body.tb-workspace-premium .tb-profile-hero {

    flex-direction: column;

    align-items: flex-start !important;

  }



  body.tb-workspace-premium .tb-quick-actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

  }



  body.tb-workspace-premium .tb-quick-actions .btn {

    width: 100%;

    justify-content: center;

    min-height: 44px;

  }



  body.tb-workspace-premium .tb-profile-metrics {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    width: 100%;

  }



  body.tb-workspace-premium .grid-2,

  body.tb-workspace-premium .tb-form-row-2 {

    grid-template-columns: 1fr !important;

  }



  body.tb-workspace-premium .table-wrap {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    margin-left: calc(-1 * var(--tb-space-3, 12px));

    margin-right: calc(-1 * var(--tb-space-3, 12px));

    padding-left: var(--tb-space-3, 12px);

    padding-right: var(--tb-space-3, 12px);

  }



  body.tb-workspace-premium .btn,

  body.tb-workspace-premium .btn-brand,

  body.tb-workspace-premium .btn-secondary,

  body.tb-workspace-premium .btn-ghost {

    min-height: 44px;

    padding-left: 16px;

    padding-right: 16px;

  }



  body.tb-workspace-premium .panel-header {

    flex-wrap: wrap;

    gap: 10px;

    align-items: flex-start;

  }



  body.tb-workspace-premium .tb-showcase-topnav-link {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

  }

}



/* --------------------------------------------------------------------------

   Phone (≤640px) — dock, hide top strip, summary-first header

   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  body.tb-workspace-premium .app-content {

    padding-bottom: calc(var(--tb-space-8, 32px) + 56px + env(safe-area-inset-bottom, 0px));

  }



  body.tb-workspace-premium .app-page-subtitle {

    display: none;

  }



  body.tb-workspace-premium .tb-showcase-topnav {

    display: none;

  }



  body.tb-workspace-premium .panel-header .btn {

    width: 100%;

    justify-content: center;

  }

}



@media (min-width: 1536px) {

  body.tb-workspace-premium .app-content {

    max-width: min(1440px, 100%);

  }

}



/* Fixed bottom dock (phones only) */

.tb-mobile-app-dock {

  display: none;

}



@media (max-width: 640px) {

  .tb-mobile-app-dock {

    display: flex;

    position: fixed;

    z-index: 50;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));

    background: rgba(255, 255, 255, 0.96);

    border-top: 1px solid var(--tb-line, #e2e8f0);

    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);

    justify-content: space-around;

    align-items: stretch;

    gap: 2px;

  }



  body.tb-workspace-premium .tb-mobile-app-dock {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 251, 0.98) 100%);

  }



  .tb-mobile-app-dock__item {

    flex: 1 1 0;

    min-width: 0;

    min-height: 48px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    padding: 4px 2px;

    font-size: 10px;

    font-weight: 700;

    color: var(--tb-ink-secondary, #334155);

    text-decoration: none;

    border-radius: 10px;

    cursor: pointer;

    border: 0;

    background: transparent;

    font-family: inherit;

  }



  .tb-mobile-app-dock__item.is-active {

    color: var(--tb-showcase-navy, #0d4ea6);

    background: rgba(13, 78, 166, 0.08);

  }



  .tb-mobile-app-dock__ico {

    font-size: 15px;

    line-height: 1;

    opacity: 0.9;

  }



  .tb-mobile-app-dock__item--more {

    color: var(--tb-ink, #0f172a);

  }

}



/* Workforce absence cards */

.tb-wf-abs-list {

  display: flex;

  flex-direction: column;

  gap: var(--tb-space-4, 16px);

}



.tb-wf-abs-card {

  border: 1px solid var(--tb-line, #e2e8f0);

  border-radius: var(--tb-radius-md, 14px);

  padding: var(--tb-space-4, 16px);

  background: var(--tb-surface-subtle, #f8fafc);

}



.tb-wf-abs-card-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  margin-bottom: 8px;

}



.tb-wf-abs-dl {

  margin: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px 12px;

  font-size: 13px;

}



.tb-wf-abs-dl dt {

  margin: 0;

  font-weight: 700;

  color: var(--tb-muted, #64748b);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.tb-wf-abs-dl dd {

  margin: 0;

  font-weight: 600;

  color: var(--tb-ink, #0f172a);

}



@media (max-width: 520px) {

  .tb-wf-abs-dl {

    grid-template-columns: 1fr;

  }

}



.tb-form-stack .field {

  margin-bottom: 0;

}



.tb-form-stack {

  display: flex;

  flex-direction: column;

  gap: var(--tb-space-4, 16px);

}



/* Paired table (desktop) + stacked cards (phone) */

.tb-data-stack {

  display: flex;

  flex-direction: column;

  gap: var(--tb-space-4, 16px);

}



@media (min-width: 641px) {

  .tb-data-stack--md-hide {

    display: none !important;

  }

}



@media (max-width: 640px) {

  .tb-data-stack--sm-hide {

    display: none !important;

  }

}



.tb-rec-card {

  border: 1px solid var(--tb-line, #e2e8f0);

  border-radius: var(--tb-radius-md, 14px);

  padding: var(--tb-space-4, 16px);

  background: var(--tb-surface, #fff);

}



.tb-rec-card__top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 10px;

}



.tb-rec-card__when {

  font-size: 1rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  text-decoration: none;

  color: var(--tb-ink, #0f172a);

  display: block;

  line-height: 1.25;

}



.tb-rec-card__when:hover {

  color: var(--tb-showcase-navy, #0d4ea6);

}



.tb-rec-card__meta {

  display: flex;

  flex-wrap: wrap;

  gap: 8px 14px;

  font-size: 13px;

  color: var(--tb-ink-secondary, #334155);

}



.tb-rec-card__actions {

  margin-top: 12px;

}



.tb-rec-card__actions .btn {

  width: 100%;

  justify-content: center;

}

.tb-rec-card__title {

  font-size: 1.05rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  margin: 0;

  color: var(--tb-ink, #0f172a);

}

.tb-rec-card__title a {

  color: inherit;

  text-decoration: none;

}

.tb-rec-card__title a:hover {

  color: var(--tb-showcase-navy, #0d4ea6);

}

@media (max-width: 640px) {

  .tb-ac-mobile-card .tb-ac-actions--stack {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

  }

  .tb-ac-mobile-card .tb-ac-actions--stack .btn,

  .tb-ac-mobile-card .tb-ac-actions--stack button[type="submit"] {

    width: 100%;

    justify-content: center;

  }

  .tb-ac-mobile-card .tb-ac-actions--stack select.input {

    width: 100%;

    min-height: 44px;

    font-size: 16px;

  }

}

/* Compliance thresholds — responsive card grid (single form, no duplicate inputs) */
body.tb-workspace-premium .tb-threshold-grid {

  display: grid;

  gap: var(--tb-space-4, 16px);

  grid-template-columns: 1fr;

}

@media (min-width: 900px) {

  body.tb-workspace-premium .tb-threshold-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

body.tb-workspace-premium .tb-threshold-card__grid {

  display: flex;

  flex-direction: column;

  gap: var(--tb-space-4, 16px);

}

body.tb-workspace-premium .tb-threshold-card__readouts {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  padding: 12px;

  border-radius: 12px;

  background: var(--tb-surface-subtle, #f8fafc);

  border: 1px solid var(--tb-line, #e2e8f0);

}

@media (max-width: 480px) {

  body.tb-workspace-premium .tb-threshold-card__readouts {

    grid-template-columns: 1fr;

  }

}