/* v28 · Blanes Smart Session · estilos do módulo
   Cor primária: verde Smart Session (#047857) · diferencia do Checkpoint navy.
   Componentes prefixados `.ss-` · isolam do resto da plataforma. */

/* === Page wrap padrão · igual a páginas do Checkpoint mas com tom SS ============ */
.app-container.teams-layout .ss-page { padding: 24px 32px; max-width: 1280px; }

.app-container.teams-layout .ss-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 16px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 18px;
}
.app-container.teams-layout .ss-title {
  font-size: 22px; font-weight: 600; color: #242424;
  margin: 0; letter-spacing: -.2px;
}
.app-container.teams-layout .ss-sub { font-size: 13px; color: #707070; margin: 4px 0 0; }

/* === Cards SS · mesma estética dos cards Checkpoint, com leve toque verde ====== */
.app-container.teams-layout .ss-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 14px;
}
.app-container.teams-layout .ss-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.app-container.teams-layout .ss-card-label {
  font-size: 11px; font-weight: 600; color: #707070;
  text-transform: uppercase; letter-spacing: .04em;
}
.app-container.teams-layout .ss-card-badge {
  font-size: 12.5px; font-weight: 700;
  color: #047857;
  background: rgba(4,120,87,.10);
  border: 1px solid rgba(4,120,87,.20);
  padding: 3px 10px; border-radius: 999px;
}
.app-container.teams-layout .ss-card-badge.is-overtime {
  color: #835900; background: #fff4ce; border-color: #ffd966;
}
.app-container.teams-layout .ss-card-foot { font-size: 12.5px; color: #707070; margin-top: 10px; }
.app-container.teams-layout .ss-card-foot a { color: #047857; font-weight: 600; }

/* === Botão de PUNCH (ponto) · grande, verde, central no dashboard =============== */
.app-container.teams-layout .ss-punch-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: #047857;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(4,120,87,.25);
  transition: all .15s ease;
}
.app-container.teams-layout .ss-punch-btn:hover { background: #035d44; box-shadow: 0 3px 10px rgba(4,120,87,.35); }
.app-container.teams-layout .ss-punch-btn:disabled { opacity: .55; cursor: progress; }
.app-container.teams-layout .ss-punch-icon { font-size: 18px; }
.app-container.teams-layout .ss-punch-label { font-size: 15px; }
.app-container.teams-layout .ss-punch-time {
  font-size: 11px; opacity: .85; font-weight: 400;
  background: rgba(255,255,255,.15);
  padding: 2px 8px; border-radius: 4px;
}

.app-container.teams-layout .ss-day-done {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #dff6dd; color: #0e700e;
  border: 1px solid #c6e8c4;
  border-radius: 8px;
}
.app-container.teams-layout .ss-day-done-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0e700e; color: #fff; border-radius: 50%;
  font-weight: 700;
}
.app-container.teams-layout .ss-day-done-title { font-weight: 600; font-size: 13px; }
.app-container.teams-layout .ss-day-done-sub   { font-size: 11.5px; color: #557; }

/* === Alerts (Outlook style) =================================================== */
.app-container.teams-layout .ss-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.app-container.teams-layout .ss-alert {
  display: flex; gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  border-left: 3px solid;
}
.app-container.teams-layout .ss-alert-info    { background: #f0f9ff; color: #1e40af; border-left-color: #2B6394; }
.app-container.teams-layout .ss-alert-warning { background: #fff4ce; color: #835900; border-left-color: #c47e00; }
.app-container.teams-layout .ss-alert-icon  { font-size: 18px; line-height: 1; }
.app-container.teams-layout .ss-alert-title { font-weight: 600; margin-bottom: 2px; }
.app-container.teams-layout .ss-alert-text  { font-size: 12.5px; }

/* === Dashboard grid · Jornada e Banco lado-a-lado · Timeline full-width ======= */
.app-container.teams-layout .ss-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "jornada banco"
    "timeline timeline";
  gap: 14px;
}
.app-container.teams-layout .ss-card-jornada  { grid-area: jornada; }
.app-container.teams-layout .ss-card-timeline { grid-area: timeline; }
.app-container.teams-layout .ss-card-banco    { grid-area: banco; }
@media (max-width: 700px) {
  .app-container.teams-layout .ss-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "jornada" "banco" "timeline";
  }
}

/* === Barra de progresso da jornada ============================================= */
.app-container.teams-layout .ss-progress {
  position: relative;
  height: 10px;
  background: #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  margin: 14px 0 8px;
}
.app-container.teams-layout .ss-progress-large { height: 18px; border-radius: 9px; margin: 18px 0 12px; }
.app-container.teams-layout .ss-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #047857, #10b981);
  border-radius: inherit;
  transition: width .3s ease;
}
.app-container.teams-layout .ss-progress-overtime {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, #c47e00, #c47e00 4px, #835900 4px, #835900 8px);
  border-radius: 0 inherit inherit 0;
}
.app-container.teams-layout .ss-progress-marks { position: absolute; inset: 0; pointer-events: none; }
.app-container.teams-layout .ss-progress-mark {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: rgba(255,255,255,.6);
}

/* === Lista de batidas (dashboard) ============================================== */
.app-container.teams-layout .ss-punches { list-style: none; padding: 0; margin: 0; }
.app-container.teams-layout .ss-punch-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f3f3;
  font-size: 13px;
}
.app-container.teams-layout .ss-punch-item:last-child { border-bottom: none; }
.app-container.teams-layout .ss-punch-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #707070;
}
.app-container.teams-layout .ss-punch-check_in    { background: #047857; }
.app-container.teams-layout .ss-punch-check_out   { background: #a4262c; }
.app-container.teams-layout .ss-punch-break_start { background: #c47e00; }
.app-container.teams-layout .ss-punch-break_end   { background: #6CA5D5; }
.app-container.teams-layout .ss-punch-type { color: #242424; }
.app-container.teams-layout .ss-punch-hour { font-weight: 700; color: #047857; }

/* === Saldo banco de horas no dashboard ========================================= */
.app-container.teams-layout .ss-balance {
  font-size: 32px; font-weight: 700;
  margin: 12px 0 4px;
}
.app-container.teams-layout .ss-balance.is-positive { color: #047857; }
.app-container.teams-layout .ss-balance.is-negative { color: #a4262c; }

/* === Página · Registro de Ponto ================================================ */
.app-container.teams-layout .ss-page-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.app-container.teams-layout .ss-btn {
  padding: 8px 14px;
  background: #fff; color: #242424;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .12s ease;
}
.app-container.teams-layout .ss-btn:hover { background: #f5f5f5; border-color: #707070; }
.app-container.teams-layout .ss-btn-primary {
  background: var(--product-accent, #047857); color: #fff;
  border-color: var(--product-accent, #047857);
}
.app-container.teams-layout .ss-btn-primary:hover {
  background: color-mix(in srgb, var(--product-accent, #047857) 85%, black);
}
.app-container.teams-layout .ss-btn-danger { color: #a4262c; border-color: #f2bcc3; background: #fff; }
.app-container.teams-layout .ss-btn-danger:hover { background: #fde7e9; }

.app-container.teams-layout .ss-sap-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #dff6dd; color: #0e700e;
  border: 1px solid #c6e8c4;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.app-container.teams-layout .ss-sap-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #0e700e;
}
.app-container.teams-layout .ss-sap-online .ss-sap-dot {
  animation: ss-pulse 2s ease-in-out infinite;
}
@keyframes ss-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .4; }
}

.app-container.teams-layout .ss-day-card { padding: 14px 18px; }
.app-container.teams-layout .ss-day-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 8px;
}
.app-container.teams-layout .ss-day-meta { font-size: 11.5px; color: #707070; }

.app-container.teams-layout .ss-punch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.app-container.teams-layout .ss-punch-table th {
  text-align: left; padding: 8px 12px;
  color: #707070; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #ebebeb;
}
.app-container.teams-layout .ss-punch-table td {
  padding: 8px 12px; border-bottom: 1px solid #f3f3f3;
}
.app-container.teams-layout .ss-source {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #fafafa; border: 1px solid #ebebeb;
  color: #707070;
}
.app-container.teams-layout .ss-source-web              { background: rgba(43,99,148,.08); color: #2B6394; border-color: rgba(43,99,148,.20); }
.app-container.teams-layout .ss-source-mobile           { background: rgba(108,70,193,.08); color: #6B46C1; border-color: rgba(108,70,193,.20); }
.app-container.teams-layout .ss-source-desktop_agent    { background: rgba(4,120,87,.08); color: #047857; border-color: rgba(4,120,87,.20); }
.app-container.teams-layout .ss-source-biometric_terminal { background: rgba(190,24,93,.08); color: #BE185D; border-color: rgba(190,24,93,.20); }
.app-container.teams-layout .ss-utc {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 11px; color: #707070;
}

/* === Página · Jornada do dia ==================================================== */
.app-container.teams-layout .ss-jornada-hero { text-align: center; padding: 16px 0 8px; }
.app-container.teams-layout .ss-jornada-big  { font-size: 48px; font-weight: 700; color: #047857; line-height: 1; }
.app-container.teams-layout .ss-jornada-small{ font-size: 14px; color: #707070; margin-top: 4px; }

.app-container.teams-layout .ss-jornada-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.app-container.teams-layout .ss-stat {
  text-align: center;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 6px;
}
.app-container.teams-layout .ss-stat-label { font-size: 11px; color: #707070; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.app-container.teams-layout .ss-stat-value { font-size: 20px; font-weight: 700; color: #242424; }
.app-container.teams-layout .ss-stat-value.is-overtime { color: #835900; }

.app-container.teams-layout .ss-timeline { padding: 8px 0; }
.app-container.teams-layout .ss-tl-track {
  position: relative;
  height: 50px;
  background: linear-gradient(to right, #fafafa, #fff, #fafafa);
  border-radius: 25px;
  border: 1px solid #ebebeb;
}
.app-container.teams-layout .ss-tl-hour {
  position: absolute; top: 100%; transform: translate(-50%, 4px);
  font-size: 10px; color: #b0b0b0;
}
.app-container.teams-layout .ss-tl-event {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: help;
}
.app-container.teams-layout .ss-tl-event-time {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; color: #242424;
  margin-top: 18px;
  white-space: nowrap;
}
.app-container.teams-layout .ss-tl-check_in   { background: #047857; }
.app-container.teams-layout .ss-tl-check_out  { background: #a4262c; }
.app-container.teams-layout .ss-tl-break_start{ background: #c47e00; }
.app-container.teams-layout .ss-tl-break_end  { background: #6CA5D5; }

.app-container.teams-layout .ss-tl-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 28px;
  font-size: 11px; color: #707070;
}
.app-container.teams-layout .ss-tl-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.app-container.teams-layout .ss-tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

/* === Página · Banco de Horas =================================================== */
.app-container.teams-layout .ss-balance-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .app-container.teams-layout .ss-balance-hero { grid-template-columns: 1fr; } }

.app-container.teams-layout .ss-balance-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  text-align: center;
}
.app-container.teams-layout .ss-balance-card.is-positive { border-left: 4px solid #047857; }
.app-container.teams-layout .ss-balance-card.is-negative { border-left: 4px solid #a4262c; }
.app-container.teams-layout .ss-balance-label { font-size: 12px; color: #707070; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.app-container.teams-layout .ss-balance-value { font-size: 48px; font-weight: 700; line-height: 1; }
.app-container.teams-layout .ss-balance-card.is-positive .ss-balance-value { color: #047857; }
.app-container.teams-layout .ss-balance-card.is-negative .ss-balance-value { color: #a4262c; }
.app-container.teams-layout .ss-balance-sub   { font-size: 12px; color: #707070; margin-top: 6px; }

.app-container.teams-layout .ss-balance-meter {
  padding: 24px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
}
.app-container.teams-layout .ss-meter-track {
  position: relative;
  height: 16px;
  background: #ebebeb;
  border-radius: 8px;
  margin: 30px 0 12px;
  overflow: visible;
}
.app-container.teams-layout .ss-meter-zero {
  position: absolute; left: 50%; top: -4px; bottom: -4px;
  width: 2px; background: #707070; transform: translateX(-50%);
}
.app-container.teams-layout .ss-meter-fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: 8px;
}
.app-container.teams-layout .ss-meter-fill.is-positive { background: linear-gradient(90deg, #10b981, #047857); }
.app-container.teams-layout .ss-meter-fill.is-negative { background: linear-gradient(90deg, #a4262c, #f2bcc3); }
.app-container.teams-layout .ss-meter-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #707070;
}

.app-container.teams-layout .ss-delta { font-weight: 600; }
.app-container.teams-layout .ss-delta.is-positive { color: #047857; }
.app-container.teams-layout .ss-delta.is-negative { color: #a4262c; }

/* === Página · Extensão de Jornada · forms ====================================== */
.app-container.teams-layout .ss-form { display: flex; flex-direction: column; gap: 12px; }
.app-container.teams-layout .ss-form-row { display: flex; flex-direction: column; gap: 6px; }
.app-container.teams-layout .ss-form-row label { font-size: 13px; color: #242424; font-weight: 500; }

/* === Página · Liberação · listas ============================================== */
.app-container.teams-layout .ss-released-list { list-style: none; padding: 0; margin: 0; }
.app-container.teams-layout .ss-released-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid #f3f3f3;
}
.app-container.teams-layout .ss-released-item:last-child { border-bottom: none; }
.app-container.teams-layout .ss-released-machine { font-weight: 600; color: #242424; }
.app-container.teams-layout .ss-released-user    { color: #707070; }
.app-container.teams-layout .ss-released-time    { color: #707070; font-size: 11.5px; text-align: right; }

/* === Página · Relatórios · tabs + KPIs + chart =============================== */
.app-container.teams-layout .ss-tabs { display: inline-flex; gap: 4px; }
.app-container.teams-layout .ss-tab {
  padding: 6px 14px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  font-size: 12.5px; font-weight: 500;
  color: #242424;
  cursor: pointer;
  transition: all .12s ease;
}
.app-container.teams-layout .ss-tab:hover { background: #fff; }
.app-container.teams-layout .ss-tab.is-active {
  background: var(--product-accent, #047857); color: #fff;
  border-color: var(--product-accent, #047857);
}

.app-container.teams-layout .ss-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .app-container.teams-layout .ss-kpi-row { grid-template-columns: 1fr; } }
.app-container.teams-layout .ss-kpi {
  padding: 16px 18px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  border-left: 3px solid #047857;
}
.app-container.teams-layout .ss-kpi-label { font-size: 11px; color: #707070; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.app-container.teams-layout .ss-kpi-value { font-size: 28px; font-weight: 700; color: #242424; line-height: 1.05; }
.app-container.teams-layout .ss-kpi-value.is-positive { color: #047857; }
.app-container.teams-layout .ss-kpi-sub   { font-size: 11px; color: #707070; margin-top: 4px; }

.app-container.teams-layout .ss-chart {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  height: 220px;
  padding: 12px 0;
}
.app-container.teams-layout .ss-chart-col {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  height: 100%;
}
.app-container.teams-layout .ss-chart-stack {
  flex: 1;
  width: 70%;
  display: flex; flex-direction: column-reverse;
  justify-content: flex-start;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.app-container.teams-layout .ss-chart-bar       { background: linear-gradient(180deg, #10b981, #047857); width: 100%; }
.app-container.teams-layout .ss-chart-bar-extra { background: #c47e00; width: 100%; opacity: .85; }
.app-container.teams-layout .ss-chart-label {
  font-size: 11px; color: #707070;
  margin-top: 6px;
}

.app-container.teams-layout .ss-empty { color: #707070; font-style: italic; padding: 20px; text-align: center; }
.app-container.teams-layout .ss-empty-card {
  padding: 28px;
  background: #fafafa;
  border: 1px dashed #ebebeb;
  border-radius: 6px;
  color: #707070;
  text-align: center;
}

/* === Integration chips · header do Dashboard ================================ */
.app-container.teams-layout .ss-integration-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.app-container.teams-layout .ss-integration-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  color: #707070;
}
.app-container.teams-layout .ss-integration-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #c1c1c1;
}
.app-container.teams-layout .ss-integration-chip.is-online {
  color: #0f6b3e; background: #ebf8f0; border-color: #b7e4c8;
}
.app-container.teams-layout .ss-integration-chip.is-online .ss-integration-dot { background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
.app-container.teams-layout .ss-integration-chip.is-degraded {
  color: #835900; background: #fff4ce; border-color: #ffd966;
}
.app-container.teams-layout .ss-integration-chip.is-degraded .ss-integration-dot { background: #c47e00; }
.app-container.teams-layout .ss-integration-chip.is-offline {
  color: #a4262c; background: #fde7e9; border-color: #f2bcc3;
}
.app-container.teams-layout .ss-integration-chip.is-offline .ss-integration-dot { background: #a4262c; }
.app-container.teams-layout .ss-integration-chip.is-loading .ss-integration-dot { animation: ss-pulse 1.2s infinite; }
@keyframes ss-pulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* === Timeline 6h → 22h · linha do tempo do dia ============================== */
.app-container.teams-layout .ss-timeline { padding: 10px 4px 8px; }
.app-container.teams-layout .ss-tl-track {
  position: relative;
  height: 64px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 8px;
}
.app-container.teams-layout .ss-tl-span {
  position: absolute; top: 6px; bottom: 6px;
  background: color-mix(in srgb, var(--product-accent, #047857) 22%, white);
  border-radius: 3px;
}
.app-container.teams-layout .ss-tl-span.ss-tl-break {
  background: repeating-linear-gradient(45deg, #fef3c7 0 6px, #fde68a 6px 12px);
  top: 10px; bottom: 10px;
  border-radius: 2px;
}
.app-container.teams-layout .ss-tl-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #d1d1d1;
  cursor: help;
  z-index: 2;
}
.app-container.teams-layout .ss-tl-dot.ss-punch-check_in    { background: #16a34a; }
.app-container.teams-layout .ss-tl-dot.ss-punch-check_out   { background: #a4262c; }
.app-container.teams-layout .ss-tl-dot.ss-punch-break_start { background: #c47e00; }
.app-container.teams-layout .ss-tl-dot.ss-punch-break_end   { background: #2563eb; }
.app-container.teams-layout .ss-tl-dot-label {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: #424242; white-space: nowrap;
  background: #fff; padding: 1px 5px; border-radius: 3px; border: 1px solid #ebebeb;
}
.app-container.teams-layout .ss-tl-ruler {
  position: relative; height: 16px; margin-top: 8px;
}
.app-container.teams-layout .ss-tl-tick {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-size: 11px; color: #707070;
}

/* === Páginas com filosofia Checkpoint · tabs scope + section ================ */
.app-container.teams-layout .ss-tabs-row {
  display: flex; justify-content: flex-start; align-items: center;
  margin-bottom: 12px;
}
.app-container.teams-layout .ss-tabs-mini .ss-tab {
  padding: 4px 10px; font-size: 11.5px;
}
.app-container.teams-layout .ss-section-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 12px;
}
.app-container.teams-layout .ss-section-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 500;
  color: #707070;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.app-container.teams-layout .ss-section-tab:hover { color: #242424; }
.app-container.teams-layout .ss-section-tab.is-active {
  color: var(--product-accent, #047857);
  border-bottom-color: var(--product-accent, #047857);
  font-weight: 600;
}

/* === Nova Solicitação · grid de tipos ======================================= */
.app-container.teams-layout .ss-type-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px; margin-bottom: 16px;
}
.app-container.teams-layout .ss-type-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all .12s ease;
}
.app-container.teams-layout .ss-type-card:hover:not(.is-disabled) {
  border-color: var(--product-accent, #047857);
  background: color-mix(in srgb, var(--product-accent, #047857) 6%, white);
}
.app-container.teams-layout .ss-type-card.is-active {
  border-color: var(--product-accent, #047857);
  background: color-mix(in srgb, var(--product-accent, #047857) 6%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--product-accent, #047857) 18%, transparent);
}
.app-container.teams-layout .ss-type-card.is-disabled {
  opacity: .55; cursor: not-allowed;
}
.app-container.teams-layout .ss-type-icon { font-size: 22px; margin-bottom: 8px; }
.app-container.teams-layout .ss-type-name { font-size: 13.5px; font-weight: 600; color: #242424; }
.app-container.teams-layout .ss-type-sub  { font-size: 11.5px; color: #707070; margin-top: 2px; }

/* === Pendências · estado aguardando (não-acionável) ========================= */
.app-container.teams-layout .pend-card-status {
  font-size: 11.5px; color: #707070; font-style: italic;
  padding: 6px 12px;
}

/* === Badges status extras (canceled) ======================================== */
.app-container.teams-layout .badge-canceled { background: #f3f4f6; color: #707070; }

/* === Conformidade / Mobilidade / Regras (regras de negócio portadas) ========= */
.app-container.teams-layout .ss-card-loading { padding: 24px; color: #6b7280; }
.app-container.teams-layout .ss-status { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px; border: 1px solid #e5e7eb; background: #f9fafb; margin: 8px 0 18px; }
.app-container.teams-layout .ss-status-dot { width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; }
.app-container.teams-layout .ss-status-sub { margin-left: auto; color: #6b7280; font-size: 13px; }
.app-container.teams-layout .ss-status.is-ok { background: #ecfdf5; border-color: #a7f3d0; } .app-container.teams-layout .ss-status.is-ok .ss-status-dot { background: #10b981; }
.app-container.teams-layout .ss-status.is-warn { background: #fffbeb; border-color: #fde68a; } .app-container.teams-layout .ss-status.is-warn .ss-status-dot { background: #f59e0b; }
.app-container.teams-layout .ss-status.is-danger { background: #fef2f2; border-color: #fecaca; } .app-container.teams-layout .ss-status.is-danger .ss-status-dot { background: #ef4444; }
.app-container.teams-layout .ss-alert-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.app-container.teams-layout .ss-alert-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; }
.app-container.teams-layout .ss-alert-row.ss-tone-ok { border-left: 3px solid #10b981; }
.app-container.teams-layout .ss-alert-row.ss-tone-warn { border-left: 3px solid #f59e0b; }
.app-container.teams-layout .ss-alert-row.ss-tone-danger { border-left: 3px solid #ef4444; }
.app-container.teams-layout .ss-alert-row.ss-tone-info { border-left: 3px solid #3b82f6; }
.app-container.teams-layout .ss-pill { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #4b5563; background: #f3f4f6; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.app-container.teams-layout .ss-alert-text { flex: 1; color: #374151; font-size: 14px; }
.app-container.teams-layout .ss-badge-block { font-size: 11px; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 6px; padding: 2px 8px; }
.app-container.teams-layout .ss-subtitle { font-size: 15px; font-weight: 600; color: #374151; margin: 22px 0 10px; }
.app-container.teams-layout .ss-form-fb { margin-top: 10px; font-size: 13px; color: #4b5563; min-height: 18px; }
.app-container.teams-layout .ss-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.app-container.teams-layout .ss-rule-row { align-items: center; gap: 12px; }
.app-container.teams-layout .ss-rule-base { color: #9ca3af; font-size: 12px; }
/* Regras do tenant · grade de campos (rótulo + valor + base legal), responsiva e arejada. */
.app-container.teams-layout .ss-rules-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; margin-top: 4px;
}
.app-container.teams-layout .ss-rule-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-container.teams-layout .ss-rule-label { font-size: 13px; font-weight: 600; color: #374151; }
.app-container.teams-layout .ss-rule-cell .form-control {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
}
.app-container.teams-layout .ss-rule-cell .form-control:focus { outline: none; border-color: var(--product-accent, #2B6394); }
.app-container.teams-layout .ss-rule-cell--check { justify-content: flex-start; padding-top: 2px; }
.app-container.teams-layout .ss-rule-cell--check .ss-check { font-weight: 600; color: #374151; }
.app-container.teams-layout .ss-rules-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

/* Liberações de jornada (travas de acesso) — cards limpos (era tudo inline). */
.app-container.teams-layout .ss-locks-wrap { margin-top: 8px; }
.app-container.teams-layout .ss-locks-title { font-size: 1.05rem; font-weight: 600; color: #374151; margin: 22px 0 10px; }
.app-container.teams-layout .ss-lock {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  border: 1px solid #f3c9cd; background: #fffafa; border-radius: 12px; padding: 12px 14px; margin: 8px 0;
}
.app-container.teams-layout .ss-lock-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #c0392b; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.app-container.teams-layout .ss-lock-body { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.app-container.teams-layout .ss-lock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.app-container.teams-layout .ss-lock-name { font-size: 14px; color: #111827; }
.app-container.teams-layout .ss-lock-time { color: #94a3b8; font-size: 12px; white-space: nowrap; }
.app-container.teams-layout .ss-lock-station { font-size: 13px; color: #475569; }
.app-container.teams-layout .ss-lock-reason { font-size: 13px; color: #c0392b; font-style: italic; }
.app-container.teams-layout .ss-lock-release {
  padding: 8px 16px; border: 0; background: #1e7e34; color: #fff; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: 13px; flex-shrink: 0; transition: background .15s;
}
.app-container.teams-layout .ss-lock-release:hover { background: #166528; }
.app-container.teams-layout .ss-lock-release:disabled { background: #9ca3af; cursor: default; }
.app-container.teams-layout .ss-lock-empty { color: #64748b; font-size: 14px; margin: 6px 2px; }
@media (max-width: 480px) {
  .app-container.teams-layout .ss-lock-release { width: 100%; }   /* botão full abaixo em telas estreitas */
}
.app-container.teams-layout .ss-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.app-container.teams-layout .ss-table th { text-align: left; color: #6b7280; font-weight: 600; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; }
.app-container.teams-layout .ss-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: #374151; }

/* === Confrontação dispositivo × ponto ===================================== */
.app-container.teams-layout .ss-page-head { margin-bottom: 14px; }
.app-container.teams-layout .ss-filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.app-container.teams-layout .ss-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.app-container.teams-layout .ss-field input { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; }
.app-container.teams-layout .ss-source-note { font-size: 12px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.app-container.teams-layout .ss-loading, .app-container.teams-layout .ss-empty { padding: 16px; color: #64748b; font-size: 13px; }
.app-container.teams-layout .ss-flag { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 8px; margin: 1px; }
.app-container.teams-layout .ss-flag-warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.app-container.teams-layout .ss-flag-ok { background: rgba(4,120,87,.08); color: #065f46; border: 1px solid rgba(4,120,87,.2); }

/* === Nova solicitação / Extensão · campos de form ========================== */
/* Par de datas (início → até) alinhado; o 2º some via .is-hidden no contexto não-período. */
.app-container.teams-layout .date-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-container.teams-layout .date-pair .form-control { width: auto; }
.app-container.teams-layout .ss-ctx-tabs { margin-top: 6px; }
.app-container.teams-layout .ss-select-sm { max-width: 200px; }
.app-container.teams-layout .ss-select-md { max-width: 260px; }
.app-container.teams-layout .ss-fb { margin-top: 12px; }
/* Cartão de pré-visualização (estado da estação do colaborador escolhido). */
.app-container.teams-layout .ss-preview-card { margin-top: 8px; padding: 14px 16px; background: #fafafa; }
.app-container.teams-layout .ss-preview-slot { text-align: center; padding: 14px; }

/* === Mobilidade por exceção · grade do formulário ========================== */
/* Linhas de campos em grade igual (rótulo acima, input 100%), ação alinhada ao fim. */
.app-container.teams-layout .ss-mex-form .ss-form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-items: end;
}
.app-container.teams-layout .ss-mex-form .ss-form-row > label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.app-container.teams-layout .ss-mex-form .ss-form-row > label .form-control { width: 100%; box-sizing: border-box; }
.app-container.teams-layout .ss-mex-form .ss-form-row > label.ss-check { flex-direction: row; align-items: center; }
.app-container.teams-layout .ss-mex-form .ss-form-row > .ss-btn { align-self: end; white-space: nowrap; }