/* ==========================================================================
   Empovio — Dashboard Preview System
   One shared visual language for every product preview on the page: the hero,
   the module explorer, the AI layer, the industry tabs and the ROI screen.
   Everything here renders real KPIs, real tables, real charts and real status
   indicators — never placeholder boxes (Part O).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Browser frame
   -------------------------------------------------------------------------- */

.app-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-modal);
  background-color: var(--n-0);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  /* Preview chrome is deliberately smaller than page typography. */
  font-size: 13px;
  line-height: 1.45;
  /* The preview adapts to the space it is given, not to the viewport — the
     same markup has to read well in the narrow hero column and in the wide
     module explorer. */
  container-type: inline-size;
}

.app-frame__chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  height: 40px;
  padding-inline: var(--sp-16);
  background-color: var(--n-50);
  border-bottom: 1px solid var(--border);
}

.app-frame__dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.app-frame__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--n-300);
}

.app-frame__url {
  flex: 1;
  max-width: 320px;
  margin-inline: auto;
  height: 24px;
  border-radius: var(--r-pill);
  background-color: var(--n-0);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.app-frame__url svg {
  color: var(--success-600);
}

.app-frame__body {
  background-color: var(--n-50);
}

/* --------------------------------------------------------------------------
   Application shell: sidebar + main column
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 420px;
}

.app--compact {
  grid-template-columns: 64px 1fr;
}

.app-sidebar {
  background-color: var(--n-0);
  border-right: 1px solid var(--border);
  padding: var(--sp-16) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 0 var(--sp-8);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.app-sidebar__workspace {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--n-25);
}

.app-sidebar__workspace-name {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar__label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-disabled);
  padding-inline: var(--sp-8);
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 7px var(--sp-8);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.app-nav__item svg {
  flex: none;
  color: var(--n-400);
}

.app-nav__item.is-active {
  background-color: var(--primary-50);
  color: var(--primary-700);
  font-weight: var(--fw-semibold);
}

.app-nav__item.is-active svg {
  color: var(--primary-600);
}

.app-nav__count {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Top navigation inside the preview
   -------------------------------------------------------------------------- */

.app-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  height: 52px;
  padding-inline: var(--sp-16);
  background-color: var(--n-0);
  border-bottom: 1px solid var(--border);
}

.app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.app-breadcrumb strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.app-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 30px;
  min-width: 180px;
  padding-inline: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--n-50);
  font-size: 11px;
  color: var(--text-disabled);
  white-space: nowrap;
  overflow: hidden;
}

.app-search svg {
  color: var(--n-400);
  flex: none;
}

.app-search kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  background-color: var(--n-0);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--n-500);
}

.app-topbar__icon {
  position: relative;
  display: flex;
}

.app-topbar__dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--danger-500);
  border: 1px solid var(--n-0);
}

/* --------------------------------------------------------------------------
   Preview content area
   -------------------------------------------------------------------------- */

.app-content {
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  background-color: var(--n-50);
  flex: 1;
  min-width: 0;
}

.app-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

.app-page-head__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.app-page-head__desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.app-page-head__actions {
  display: flex;
  gap: 6px;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding-inline: var(--sp-8);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background-color: var(--n-0);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
  flex: none;
}

.app-btn--primary {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--n-0);
}

/* Grid helpers */
.app-grid {
  display: grid;
  gap: var(--sp-12);
}
.app-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.app-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.app-grid--main {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Preview cards
   -------------------------------------------------------------------------- */

.d-card {
  background-color: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
}

.d-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.d-card__title {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.d-card__meta {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* KPI tile inside a preview */
.d-kpi__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.d-kpi__label svg {
  color: var(--n-400);
}

.d-kpi__value {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.d-kpi__value small {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
}

.d-kpi__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.d-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
}
.d-trend--up {
  color: var(--success-700);
}
.d-trend--down {
  color: var(--danger-700);
}
.d-trend--flat {
  color: var(--text-tertiary);
}

/* Chart styling lives in charts.css — it is shared with the authenticated
   dashboard, so it must not be duplicated here. */

/* --------------------------------------------------------------------------
   Preview lists and tables
   -------------------------------------------------------------------------- */

.d-list {
  display: flex;
  flex-direction: column;
}

.d-list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-block: 7px;
  border-bottom: 1px solid var(--n-100);
  min-width: 0;
}

.d-list__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.d-list__row:first-child {
  padding-top: 0;
}

.d-list__body {
  min-width: 0;
  flex: 1;
}

.d-list__name {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d-list__meta {
  font-size: 10px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d-list__value {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  flex: none;
}

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

.d-table th {
  text-align: left;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-disabled);
  padding: 0 var(--sp-8) 6px 0;
  border-bottom: 1px solid var(--border);
}

.d-table td {
  font-size: 11px;
  padding: 7px var(--sp-8) 7px 0;
  border-bottom: 1px solid var(--n-100);
  color: var(--text-secondary);
  white-space: nowrap;
}

.d-table tr:last-child td {
  border-bottom: 0;
}

.d-table td:first-child {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.d-table__employee {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Compact badge for previews */
.d-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}

.d-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}

.d-badge--plain::before {
  display: none;
}

.d-badge--success {
  background-color: var(--success-50);
  color: var(--success-700);
  border-color: var(--success-100);
}
.d-badge--warning {
  background-color: var(--warning-50);
  color: var(--warning-700);
  border-color: var(--warning-100);
}
.d-badge--danger {
  background-color: var(--danger-50);
  color: var(--danger-700);
  border-color: var(--danger-100);
}
.d-badge--info {
  background-color: var(--info-50);
  color: var(--info-700);
  border-color: var(--info-100);
}
.d-badge--neutral {
  background-color: var(--n-100);
  color: var(--n-700);
  border-color: var(--n-200);
}
.d-badge--ai {
  background-color: var(--ai-50);
  color: var(--ai-700);
  border-color: var(--ai-100);
}

/* --------------------------------------------------------------------------
   AI insight card — the only place purple is used
   -------------------------------------------------------------------------- */

.d-ai {
  border: 1px solid var(--ai-100);
  background-color: var(--ai-25);
  border-radius: var(--r-card);
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.d-ai__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--ai-700);
}

.d-ai__title {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.d-ai__text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: var(--lh-snug);
}

.d-ai__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.d-ai__actions .app-btn--ai {
  background-color: var(--ai-600);
  border-color: var(--ai-600);
  color: var(--n-0);
}

/* Explainability rows: Observation → Reason → Action → Impact */
.d-explain {
  display: grid;
  gap: 6px;
}

.d-explain__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-8);
  font-size: 11px;
  line-height: var(--lh-snug);
}

.d-explain__key {
  color: var(--ai-700);
  font-weight: var(--fw-semibold);
}

.d-explain__val {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Quick actions
   -------------------------------------------------------------------------- */

.d-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.d-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--n-25);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  min-width: 0;
}

.d-action svg {
  color: var(--n-500);
  flex: none;
}

.d-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Segmented meter (attendance split)
   The .d-meter base lives in charts.css — it is shared with the authenticated
   dashboard. Only the homepage-specific widths stay here.
   -------------------------------------------------------------------------- */

/* Status colours shared by the meter segments and the chart legend. */
.is-present {
  background-color: var(--success-500);
}
.is-late {
  background-color: var(--warning-500);
}
.is-leave {
  background-color: var(--info-500);
}
.is-absent {
  background-color: var(--danger-500);
}

/* Today's attendance split, matching the KPI row above it. */
.d-meter--today .is-present {
  width: 94.9%;
}
.d-meter--today .is-late {
  width: 3%;
}
.d-meter--today .is-leave {
  width: 1.9%;
}
.d-meter--today .is-absent {
  width: 0.2%;
}

/* --------------------------------------------------------------------------
   Small preview variants
   -------------------------------------------------------------------------- */

/* Brand mark scaled down for the preview sidebar. */
.brand__mark--xs {
  width: 22px;
  height: 22px;
}

/* A KPI whose value is a status badge rather than a number. */
.d-kpi__value--badge {
  font-size: 16px;
  padding-top: 4px;
}

/* A KPI whose value is a short phrase rather than a number. */
.d-kpi__value--text {
  font-size: 15px;
}

/* Stacked column inside a preview grid cell. */
.app-stack {
  display: grid;
  gap: var(--sp-12);
  align-content: start;
}

/* --------------------------------------------------------------------------
   Skeleton loading state for lazily mounted previews
   -------------------------------------------------------------------------- */

.skeleton {
  border: 1px solid var(--border);
  border-radius: var(--r-modal);
  background-color: var(--n-0);
  padding: var(--sp-24);
  display: grid;
  gap: var(--sp-12);
  box-shadow: var(--shadow-1);
}

.skeleton__bar {
  height: 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--n-100) 25%,
    var(--n-150) 37%,
    var(--n-100) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton__block {
  height: 120px;
  border-radius: var(--r-card);
  background: linear-gradient(
    90deg,
    var(--n-100) 25%,
    var(--n-150) 37%,
    var(--n-100) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* --------------------------------------------------------------------------
   Container-driven density
   The hero preview sits in a narrow column while the module explorer gets a
   wide one. These rules react to the frame's own width, so the same preview
   markup stays readable in both places instead of cramming four KPI cards
   into 460px.
   -------------------------------------------------------------------------- */

@container (max-width: 780px) {
  .app {
    grid-template-columns: 160px 1fr;
  }

  .app-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-grid--main {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-search {
    display: none;
  }

  .app-page-head__desc {
    display: none;
  }
}

@container (max-width: 560px) {
  .app {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    display: none;
  }

  .app-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Responsive: simplify previews on smaller screens (Part N)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .app {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    display: none;
  }

  .app-grid--main {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .app-frame {
    font-size: 12px;
  }

  .app-frame__url {
    display: none;
  }

  .app-search {
    display: none;
  }

  .app-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d-actions {
    grid-template-columns: 1fr;
  }

  /* Wide preview tables scroll inside their own card, never the page. */
  .d-scroll {
    overflow-x: auto;
  }

  .d-scroll .d-table {
    min-width: 420px;
  }
}