/* ============================================================
   MR Commerce — Attendance Workforce Dashboard
   Wave 10 | Founder UX Upgrade
   Style: Stripe + Linear + Apple — calm, white, soft shadows
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Tokens now bridge from --mr-* via workforce-suite.css
     Only keeping values not covered by the bridge */
  --att-blue:       var(--mr-primary,       #2563eb);
  --att-blue-light: var(--mr-primary-subtle,#eff6ff);
  --att-blue-dark:  var(--mr-primary-hover, #1d4ed8);
  --att-green:      var(--mr-success,       #16a34a);
  --att-red:        var(--mr-danger,        #dc2626);
  --att-amber:      var(--mr-warning,       #d97706);
  --att-purple:     var(--mr-primary,       #2563eb); /* remapped — purple banned */
  --att-teal:       var(--mr-primary,       #2563eb); /* remapped *

  --att-bg:         #f8fafc;
  --att-surface:    #ffffff;
  --att-border:     #e2e8f0;
  --att-border-md:  #cbd5e1;

  --att-text:       #0f172a;
  --att-muted:      #64748b;
  --att-faint:      #94a3b8;

  --att-radius-sm:  8px;
  --att-radius:     12px;
  --att-radius-lg:  16px;

  --att-shadow-xs:  0 1px 2px rgba(15,23,42,.05);
  --att-shadow-sm:  0 1px 3px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.06);
  --att-shadow-md:  0 4px 16px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06);
  --att-shadow-lg:  0 8px 32px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06);

  --att-transition: all .18s cubic-bezier(.4,0,.2,1);
}

/* ── Dashboard shell ─────────────────────────────────────── */
.att-workforce-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--att-bg);
  min-height: 100%;
}

/* ── Tab navigation ──────────────────────────────────────── */
.att-dashboard-header {
  display: flex;
  align-items: flex-end;
  gap: 0;
  background: var(--att-surface);
  border-bottom: 1px solid var(--att-border);
  box-shadow: var(--att-shadow-xs);
  position: sticky;
  top: 0;
  z-index: 100;
}

.att-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.att-tab-btn {
  padding: .75rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--att-muted);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: var(--att-transition);
  min-width: 44px;
  min-height: 44px;
}
.att-tab-btn:hover { color: var(--att-blue); background: var(--att-blue-light); }
.att-tab-btn--active {
  color: var(--att-blue);
  border-bottom-color: var(--att-blue);
  font-weight: 600;
}
.att-tab-panel { padding: 1.25rem 1.5rem; }
.att-tab-panel[hidden] { display: none; }

.att-dashboard-actions {
  display: flex;
  align-items: center;
  padding: 0 .75rem .25rem;
}
.att-inbox-trigger { font-size: .85rem; position: relative; }

/* ── Overview header (#13) ───────────────────────────────── */
.att-ov-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.att-ov-header-left { display: flex; flex-direction: column; gap: .15rem; }
.att-ov-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--att-text);
  margin: 0;
  letter-spacing: -.02em;
}
.att-ov-subtitle { font-size: .825rem; color: var(--att-muted); }
.att-ov-header-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.att-ov-sync {
  font-size: .78rem;
  color: var(--att-faint);
  white-space: nowrap;
}

/* ── #14 Quick Actions ───────────────────────────────────── */
.att-quick-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.att-qa-btn {
  font-size: .8rem;
  padding: .4rem .85rem;
  border-radius: var(--att-radius-sm);
  border: 1px solid var(--att-border);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--att-transition);
  min-height: 34px;
}

/* ── Attendance % hero badge ─────────────────────────────── */
.att-ov-pct-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .75rem;
}
.att-ov-pct-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--att-blue-light);
  border: 1px solid #bfdbfe;
  border-radius: var(--att-radius);
  padding: .5rem 1.25rem;
  min-width: 100px;
}
.att-ov-pct-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--att-blue);
  line-height: 1;
}
.att-ov-pct-lbl { font-size: .72rem; color: var(--att-muted); margin-top: .15rem; }

/* ── #1 Action Center ────────────────────────────────────── */
.att-action-center {
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  box-shadow: var(--att-shadow-sm);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.att-action-center--clear {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
}
.att-ac-clear-icon { font-size: 1.1rem; }
.att-ac-clear-text { font-size: .875rem; color: var(--att-green); font-weight: 500; }

.att-ac-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--att-border);
  background: var(--mr-warning-subtle);
}
.att-ac-title { font-size: .875rem; font-weight: 600; color: #92400e; }
.att-ac-badge {
  background: var(--att-amber);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
}
.att-ac-list { display: flex; flex-direction: column; }
.att-ac-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border: none;
  border-bottom: 1px solid var(--att-border);
  background: var(--att-surface);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: var(--att-transition);
}
.att-ac-item:last-child { border-bottom: none; }
.att-ac-item:hover { background: #fafbff; }
.att-ac-item-icon  { font-size: 1rem; flex-shrink: 0; }
.att-ac-item-label { flex: 1; font-size: .875rem; font-weight: 500; color: var(--att-text); }
.att-ac-item-count {
  font-size: .875rem;
  font-weight: 700;
  color: var(--att-muted);
  min-width: 24px;
  text-align: right;
}
.att-ac-item-arrow { color: var(--att-faint); font-size: 1.1rem; margin-left: .25rem; }

/* ── #2 KPI Cards with trend ─────────────────────────────── */
.att-status-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: .75rem;
}
.att-flag-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1.25rem;
}
.att-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem .75rem .85rem;
  border-radius: var(--att-radius);
  cursor: pointer;
  background: var(--card-bg, #f5f5f5);
  color: var(--card-text, #333);
  border: 1px solid transparent;
  box-shadow: var(--att-shadow-xs);
  transition: var(--att-transition);
  min-height: 90px;
  position: relative;
  gap: .2rem;
}
.att-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--att-shadow-sm);
  border-color: currentColor;
}
.att-kpi-card:focus-visible {
  outline: 2px solid var(--att-blue);
  outline-offset: 2px;
}
.att-kpi-icon  { font-size: .9rem; line-height: 1; }
.att-kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.att-kpi-label { font-size: .75rem; font-weight: 500; opacity: .8; }
.att-flag-icon { font-size: 1.2rem; }

/* Trend indicator */
.att-kpi-trend {
  font-size: .7rem;
  font-weight: 600;
  margin-top: .15rem;
  padding: .1rem .35rem;
  border-radius: 99px;
  white-space: nowrap;
}
.att-kpi-trend--up   { background: rgba(22,163,74,.12); color: var(--att-green); }
.att-kpi-trend--down { background: rgba(220,38,38,.10); color: var(--att-red); }
.att-kpi-trend--flat { background: rgba(100,116,139,.1); color: var(--att-muted); }

/* ── #3 Department Summary ────────────────────────────────── */
.att-dept-summary {
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--att-shadow-xs);
  margin-top: 1.25rem;
}
.att-dept-summary-title {
  font-size: .825rem;
  font-weight: 600;
  color: var(--att-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .85rem;
}
.att-dept-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--att-border);
}
.att-dept-row:last-child { border-bottom: none; }
.att-dept-name  { font-size: .875rem; font-weight: 500; color: var(--att-text); min-width: 80px; flex-shrink: 0; }
.att-dept-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--att-border);
  border-radius: 99px;
  overflow: hidden;
}
.att-dept-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.att-dept-pct   { font-size: .8rem; font-weight: 700; color: var(--att-text); min-width: 38px; text-align: right; }
.att-dept-ratio { font-size: .75rem; color: var(--att-muted); min-width: 50px; text-align: right; }

/* ── #4 Sticky Toolbar ───────────────────────────────────── */
.att-dl-sticky-toolbar {
  position: sticky;
  top: 56px; /* below tab nav */
  z-index: 90;
  background: var(--att-surface);
  border-bottom: 1px solid var(--att-border);
  transition: box-shadow .18s;
}
.att-dl-sticky-toolbar.att-sticky-stuck {
  box-shadow: 0 4px 16px rgba(15,23,42,.08);
}

/* ── Filters bar ─────────────────────────────────────────── */
.att-dl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
  padding: .65rem 0;
}
.att-filter-group { display: flex; flex-direction: column; gap: .2rem; }
.att-filter-label { font-size: .72rem; color: var(--att-muted); font-weight: 500; }
.att-filter-group input,
.att-filter-group select {
  padding: .4rem .65rem;
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius-sm);
  font-size: .85rem;
  min-height: 36px;
  background: var(--att-surface);
  color: var(--att-text);
  transition: border-color .15s, box-shadow .15s;
}
.att-filter-group input:focus,
.att-filter-group select:focus {
  outline: none;
  border-color: var(--att-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.att-filter-search input { min-width: 210px; }
.att-filter-actions { display: flex; gap: .4rem; align-items: flex-end; padding-bottom: 0; }

/* ── Buttons ─────────────────────────────────────────────── */
.att-btn {
  padding: .42rem .95rem;
  border-radius: var(--att-radius-sm);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 36px;
  min-width: 44px;
  transition: var(--att-transition);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.att-btn-primary {
  background: var(--att-blue);
  color: #fff;
  border-color: var(--att-blue);
}
.att-btn-primary:hover { background: var(--att-blue-dark); border-color: var(--att-blue-dark); }
.att-btn-secondary {
  background: var(--att-surface);
  color: var(--att-text);
  border-color: var(--att-border-md);
}
.att-btn-secondary:hover { background: var(--mr-card-hover); }
.att-btn-ghost {
  background: transparent;
  color: var(--att-muted);
  border-color: var(--att-border);
}
.att-btn-ghost:hover { background: var(--mr-card-hover); color: var(--att-text); }
.att-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.att-btn:focus-visible { outline: 2px solid var(--att-blue); outline-offset: 2px; }

/* ── Table ───────────────────────────────────────────────── */
.att-dl-wrap { display: flex; flex-direction: column; gap: 0; }
.att-owner-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  box-shadow: var(--att-shadow-xs);
  margin-top: .75rem;
}
.att-owner-table { width: 100%; border-collapse: collapse; }
.att-owner-table th {
  background: var(--mr-bg);
  font-weight: 600;
  font-size: .78rem;
  color: var(--att-muted);
  padding: .6rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--att-border);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.att-owner-table td {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--att-border);
  font-size: .875rem;
  vertical-align: middle;
  color: var(--att-text);
}
.att-owner-table tr:last-child td { border-bottom: none; }
.att-log-row:hover td { background: var(--mr-bg); }
.att-row-locked { opacity: .7; }

/* ── #5 Employee cell (avatar + name + dept) ─────────────── */
.att-emp-cell {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-align: left;
}
.att-emp-cell:hover .att-emp-name { color: var(--att-blue); }
.att-emp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--mr-text-secondary);
  flex-shrink: 0;
  border: 1px solid rgba(71,85,105,.15);
}
.att-emp-info { display: flex; flex-direction: column; gap: .05rem; }
.att-emp-name { font-size: .875rem; font-weight: 500; color: var(--att-text); transition: color .15s; }
.att-emp-dept { font-size: .72rem; color: var(--att-muted); }

/* Legacy name button (keep for backwards compat) */
.att-name-btn {
  background: none;
  border: none;
  color: var(--att-blue);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.att-name-btn:hover { color: var(--att-blue-dark); }

.att-col-time  { white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-col-hours { font-variant-numeric: tabular-nums; font-weight: 500; }
.att-col-actions { width: 40px; text-align: center; }

/* Status + flag badges */
.att-status-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.att-flag-chip {
  display: inline-flex;
  align-items: center;
  padding: .15rem .45rem;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 500;
  margin-left: 3px;
}
.att-lock-badge { font-size: .85rem; margin-left: 4px; cursor: help; }

/* Action button */
.att-action-btn {
  background: none;
  border: 1px solid var(--att-border);
  border-radius: 6px;
  padding: .2rem .55rem;
  cursor: pointer;
  font-size: 1.05rem;
  min-width: 32px;
  min-height: 32px;
  color: var(--att-muted);
  transition: var(--att-transition);
}
.att-action-btn:hover { background: var(--mr-card-hover); border-color: var(--att-border-md); }

/* Action menu */
.att-action-menu {
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius-sm);
  box-shadow: var(--att-shadow-md);
  min-width: 155px;
  overflow: hidden;
}
.att-menu-item {
  display: block;
  width: 100%;
  padding: .55rem 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  color: var(--att-text);
  transition: background .12s;
}
.att-menu-item:hover { background: var(--mr-card-hover); }
.att-act-danger { color: var(--att-red) !important; }
.att-act-danger:hover { background: var(--mr-danger-subtle) !important; }

/* ── Pagination ──────────────────────────────────────────── */
.att-pagination {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--att-border);
}
.att-page-info    { font-size: .8rem; color: var(--att-muted); }
.att-page-btns    { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.att-page-current { font-size: .8rem; color: var(--att-muted); }

/* ── Modals ──────────────────────────────────────────────── */
.att-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--mr-overlay-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  padding: 1rem;
  backdrop-filter: blur(2px);
}
.att-modal {
  background: var(--att-surface);
  border-radius: var(--att-radius-lg);
  box-shadow: var(--att-shadow-lg);
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  border: 1px solid var(--att-border);
}
.att-modal-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--att-border);
}
.att-modal-title   { font-size: 1rem; font-weight: 700; margin: 0; flex: 1; color: var(--att-text); }
.att-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--att-muted);
  padding: .25rem;
  border-radius: 6px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--att-transition);
}
.att-modal-close:hover { background: var(--mr-card-hover); color: var(--att-text); }
.att-modal-body   { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.att-modal-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--att-border);
}

/* ── Bulk Mark ───────────────────────────────────────────── */
.att-bulk-modal { max-width: 640px; }
.att-bulk-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; padding: .5rem 0; }
.att-bulk-list-wrap { margin-top: 1rem; }
.att-bulk-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid var(--att-border);
}
.att-bulk-select-all { display: flex; align-items: center; gap: .4rem; font-size: .875rem; cursor: pointer; }
.att-bulk-count { font-size: .8rem; color: var(--att-muted); }
.att-bulk-employee-list { max-height: 320px; overflow-y: auto; margin-top: .5rem; }
.att-bulk-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .25rem;
  border-bottom: 1px solid var(--att-border);
  transition: background .12s;
}
.att-bulk-row:last-child { border-bottom: none; }
.att-bulk-row:hover { background: var(--mr-bg); }
.att-bulk-row-check { display: flex; align-items: center; gap: .4rem; flex: 1; font-size: .875rem; cursor: pointer; }
.att-bulk-emp-name  { flex: 1; }
.att-bulk-override {
  padding: .3rem .5rem;
  border: 1px solid var(--att-border);
  border-radius: 6px;
  font-size: .8rem;
  min-height: 32px;
  background: var(--att-surface);
}
.att-bulk-result { flex: 1; font-size: .85rem; }
.att-result-success { color: var(--att-green); }
.att-result-error   { color: var(--att-red); }

/* #8 Preview overlay */
.att-preview-overlay {
  position: fixed;
  inset: 0;
  background: var(--mr-overlay-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 1rem;
  backdrop-filter: blur(2px);
}
.att-preview-box {
  background: var(--att-surface);
  border-radius: var(--att-radius-lg);
  box-shadow: var(--att-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--att-border);
}
.att-preview-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--att-border);
}
.att-preview-date { font-size: .8rem; color: var(--att-muted); margin-left: auto; }
.att-preview-body { flex: 1; overflow-y: auto; padding: .75rem 1.1rem; }
.att-preview-group { margin-bottom: .75rem; }
.att-preview-status { display: block; font-weight: 600; font-size: .875rem; color: var(--att-text); margin-bottom: .25rem; }
.att-preview-names  { font-size: .8rem; color: var(--att-muted); line-height: 1.5; }
.att-preview-footer { display: flex; gap: .5rem; justify-content: flex-end; padding: .75rem 1.1rem; border-top: 1px solid var(--att-border); }

/* ── #6 Employee Profile panel ───────────────────────────── */
.att-profile-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 400px;
  max-width: 100%;
  height: 100vh;
  background: var(--att-surface);
  border-left: 1px solid var(--att-border);
  box-shadow: var(--att-shadow-lg);
  z-index: 8500;
  display: flex;
  flex-direction: column;
  transition: right .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.att-profile-panel--open { right: 0; }
.att-profile-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--att-border);
  background: var(--mr-bg);
}
.att-profile-title { font-size: .95rem; font-weight: 700; margin: 0; flex: 1; color: var(--att-text); }
.att-profile-body  { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; }
.att-profile-section { margin-bottom: 1.25rem; }
.att-profile-section-title {
  font-size: .72rem;
  font-weight: 600;
  color: var(--att-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .65rem;
}

/* Employee header with avatar */
.att-profile-emp-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 0 1rem;
  border-bottom: 1px solid var(--att-border);
  margin-bottom: 1rem;
}
.att-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--att-blue-light);
  color: var(--att-blue);
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #bfdbfe;
}
.att-profile-emp-info  { display: flex; flex-direction: column; gap: .1rem; }
.att-profile-emp-name  { font-size: 1rem; font-weight: 700; color: var(--att-text); }
.att-profile-emp-dept  { font-size: .78rem; color: var(--att-muted); }

/* Today grid */
.att-profile-today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.att-profile-time-item {
  text-align: center;
  background: var(--mr-bg);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius-sm);
  padding: .6rem .25rem;
}
.att-time-label { display: block; font-size: .7rem; color: var(--att-muted); margin-bottom: .2rem; }
.att-time-value { display: block; font-size: 1rem; font-weight: 600; color: var(--att-text); font-variant-numeric: tabular-nums; }

/* #6 Mini analytics */
.att-mini-analytics { display: flex; flex-direction: column; gap: .75rem; }
.att-pbar-wrap { display: flex; flex-direction: column; gap: .3rem; }
.att-pbar-row  { display: flex; align-items: center; justify-content: space-between; }
.att-pbar-label { font-size: .8rem; font-weight: 500; color: var(--att-text); }
.att-pbar-pct   { font-size: .875rem; font-weight: 700; color: var(--att-blue); }
.att-pbar-track {
  height: 8px;
  background: var(--att-border);
  border-radius: 99px;
  overflow: hidden;
}
.att-pbar-fill  { height: 100%; border-radius: 99px; transition: width .5s ease; }
.att-mini-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
}
.att-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--mr-bg);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius-sm);
  padding: .5rem .25rem;
}
.att-ms-val   { font-size: 1rem; font-weight: 700; color: var(--att-text); }
.att-ms-lbl   { font-size: .65rem; color: var(--att-muted); margin-top: .1rem; }
.att-ms-warn .att-ms-val { color: var(--att-amber); }

/* Streaks */
.att-streak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.att-streak-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .75rem .5rem;
  background: var(--mr-bg);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius-sm);
}
.att-streak-current { background: var(--att-blue-light); border-color: #bfdbfe; }
.att-streak-val     { font-size: 1.1rem; font-weight: 700; color: var(--att-text); }
.att-streak-current .att-streak-val { color: var(--att-blue); }
.att-streak-lbl     { font-size: .72rem; color: var(--att-muted); margin-top: .15rem; }

/* Stats grid */
.att-profile-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.att-stat-item {
  text-align: center;
  padding: .5rem;
  background: var(--mr-bg);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius-sm);
}
.att-stat-value { display: block; font-size: 1rem; font-weight: 700; color: var(--att-text); }
.att-stat-label { display: block; font-size: .7rem; color: var(--att-muted); margin-top: .1rem; }
.att-stat--highlight .att-stat-value { color: var(--att-blue); }
.att-profile-actions { padding-top: .5rem; }
.att-profile-history-btn { width: 100%; }

/* ── #7 Calendar ─────────────────────────────────────────── */
.att-cal-wrap  { display: flex; flex-direction: column; gap: .85rem; }
.att-cal-nav   {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.att-cal-title { font-size: 1rem; font-weight: 700; margin: 0; flex: 1; color: var(--att-text); }

/* Legend */
.att-cal-legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.att-leg-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--att-muted);
  white-space: nowrap;
}
.att-leg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.att-leg-present  { background: var(--mr-success,  #16a34a); }
.att-leg-absent   { background: var(--mr-danger,   #dc2626); }
.att-leg-late     { background: var(--mr-warning,  #d97706); }
.att-leg-leave    { background: var(--mr-warning,  #d97706); } /* was purple — remapped */

.att-leg-holiday  { background: var(--mr-status-holiday); }

/* Calendar grid */
.att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.att-cal-header-row .att-cal-day-header {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--att-muted);
  padding: .35rem 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.att-cal-cell {
  min-height: 62px;
  border-radius: var(--att-radius-sm);
  padding: .35rem .4rem;
  cursor: pointer;
  border: 1px solid var(--att-border);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  transition: box-shadow .15s, border-color .15s;
  background: var(--att-surface);
}
.att-cal-cell:hover { box-shadow: var(--att-shadow-sm); border-color: var(--att-border-md); }
.att-cal-empty   { background: transparent; border-color: transparent; cursor: default; }
.att-cal-no-data { background: var(--mr-bg); }
.att-cal-green   { background: var(--mr-status-present); border-color: var(--mr-status-present-border); }
.att-cal-yellow  { background: var(--mr-status-late); border-color: var(--mr-status-late-border); }
.att-cal-red     { background: var(--mr-status-absent); border-color: var(--mr-status-absent-border); }

.att-cal-day-num { font-size: .75rem; font-weight: 600; color: var(--att-muted); }
.att-cal-cell-content { display: flex; flex-direction: column; gap: 2px; }
.att-cal-count   { font-size: .68rem; font-weight: 600; }
.att-cal-present { color: var(--att-green); }
.att-cal-absent  { color: var(--att-red); }

.att-cal-status-dot   { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.att-cal-dot-present  { background: var(--mr-success,  #16a34a); }
.att-cal-dot-absent   { background: var(--mr-danger,   #dc2626); }
.att-cal-dot-on_leave { background: var(--mr-warning,  #d97706); }
.att-cal-dot-half_day { background: var(--mr-warning,  #d97706); } /* was orange — remapped */
.att-cal-dot-holiday  { background: var(--mr-status-holiday); } /* T-07: restores correct teal — was incorrectly remapped to primary */

/* Date detail */
.att-cal-detail {
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  padding: .9rem 1rem;
  min-height: 60px;
  box-shadow: var(--att-shadow-xs);
}
.att-cal-detail-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.att-cal-detail-total  { font-size: .8rem; color: var(--att-muted); margin-left: .25rem; }
.att-cal-detail-close  { margin-left: auto; }
.att-cal-status-group  { margin-bottom: .75rem; }
.att-cal-group-title   { font-size: .8rem; font-weight: 600; margin: 0 0 .35rem; }
.att-cal-group-present { color: var(--att-green); }
.att-cal-group-absent  { color: var(--att-red); }
.att-cal-group-on_leave { color: var(--att-amber); }
.att-cal-emp-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .3rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .875rem;
  color: var(--att-blue);
  transition: background .12s;
}
.att-cal-emp-btn:hover { background: var(--att-blue-light); }
.att-cal-detail-empty  { color: var(--att-muted); font-size: .875rem; }
.att-cal-staff-present  { border-color: var(--mr-success,  #16a34a); }
.att-cal-staff-absent   { border-color: var(--mr-danger,   #dc2626); }
.att-cal-staff-on_leave { border-color: var(--mr-warning,  #d97706); }

/* ── #9 Reports ──────────────────────────────────────────── */
.att-reports-wrap   { display: flex; flex-direction: column; gap: 1.25rem; }
.att-reports-filters,
.att-bulk-controls  { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; padding: .5rem 0; }

.att-rpt-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
}
.att-rpt-metric {
  text-align: center;
  padding: .85rem .5rem;
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  box-shadow: var(--att-shadow-xs);
}
.att-rpt-metric-value { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.att-rpt-metric-label { display: block; font-size: .72rem; color: var(--att-muted); margin-top: .25rem; }
.att-rpt-metric--primary .att-rpt-metric-value { color: var(--att-blue); }
.att-rpt-metric--warning .att-rpt-metric-value { color: var(--att-amber); }
.att-rpt-metric--danger  .att-rpt-metric-value { color: var(--att-red); }

.att-rpt-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.att-chart-card {
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  padding: 1rem;
  box-shadow: var(--att-shadow-xs);
}
.att-chart-card--wide { grid-column: 1 / -1; }
.att-chart-title { font-size: .82rem; font-weight: 600; margin: 0 0 .65rem; color: var(--att-text); text-transform: uppercase; letter-spacing: .04em; }
.att-chart-empty { color: var(--att-muted); font-size: .82rem; text-align: center; padding: .75rem; }
.att-bar-chart   { overflow: visible; }

/* Horizontal bars (#9) */
.att-hbar-wrap { display: flex; flex-direction: column; gap: .55rem; }
.att-hbar-row  { display: flex; align-items: center; gap: .6rem; }
.att-hbar-label { font-size: .8rem; font-weight: 500; color: var(--att-text); min-width: 72px; flex-shrink: 0; }
.att-hbar-track { flex: 1; height: 8px; background: var(--att-border); border-radius: 99px; overflow: hidden; }
.att-hbar-fill  { height: 100%; border-radius: 99px; transition: width .5s ease; }
.att-hbar-pct   { font-size: .78rem; font-weight: 700; color: var(--att-text); min-width: 36px; text-align: right; }

/* Stacked chart (#9) */
.att-stacked-section { background: var(--att-surface); border: 1px solid var(--att-border); border-radius: var(--att-radius); padding: 1rem; box-shadow: var(--att-shadow-xs); }
.att-stacked-legend  { display: flex; gap: 1rem; margin-bottom: .65rem; flex-wrap: wrap; }
.att-sl-item {
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 99px;
}
.att-sl-present { background: var(--mr-success-subtle, #f0fdf4); color: var(--att-green); }
.att-sl-leave   { background: var(--mr-warning-subtle, #fffbeb); color: var(--mr-warning, #d97706); } /* was purple */
.att-sl-absent  { background: var(--mr-danger-subtle,  #fff1f2); color: var(--att-red); }
.att-stacked-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.att-stacked-col   { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: 1; }
.att-stacked-bar   { width: 100%; flex: 1; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 4px; }
.att-stack-present { background: var(--mr-success, #16a34a); }
.att-stack-leave   { background: var(--mr-warning, #d97706); } /* was purple */
.att-stack-absent  { background: var(--mr-danger,  #dc2626); }
.att-stacked-lbl   { font-size: .68rem; color: var(--att-muted); white-space: nowrap; }

/* Department breakdown table */
.att-rpt-section-title  { font-size: .9rem; font-weight: 600; margin: 0 0 .6rem; color: var(--att-text); }
.att-rpt-dept-table-wrap { overflow-x: auto; }
.att-rpt-dept-table th,
.att-rpt-dept-table td   { font-size: .82rem; }

/* ── #11 Skeleton loaders ────────────────────────────────── */
@keyframes att-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.att-skeleton-pulse {
  animation: att-pulse 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: att-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--att-radius-sm);
}
@keyframes att-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Skeleton shapes */
.att-skeleton-grid  { display: grid; grid-template-columns: repeat(5,1fr); gap: .75rem; }
.att-skeleton-card  { height: 90px; border-radius: var(--att-radius); }
.att-skeleton-table { height: 280px; border-radius: var(--att-radius); }
.att-skeleton-profile  { height: 380px; border-radius: var(--att-radius); }
.att-skeleton-calendar { height: 260px; border-radius: var(--att-radius); }
.att-skeleton-reports  { height: 300px; border-radius: var(--att-radius); }

/* Overview skeleton */
.att-ov-skeleton        { display: flex; flex-direction: column; gap: 1rem; }
.att-ov-skel-header     { height: 48px; border-radius: var(--att-radius); max-width: 320px; }
.att-ov-skel-cards      { grid-template-columns: repeat(5,1fr); }
.att-ov-skel-dept       { height: 160px; border-radius: var(--att-radius); }

/* ── #10 Designed Empty States ───────────────────────────── */
.att-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--att-muted);
  gap: .75rem;
}
.att-empty-state-icon { font-size: 2.5rem; line-height: 1; }
.att-empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--att-text);
  margin: 0;
}
.att-empty-state-desc {
  font-size: .875rem;
  color: var(--att-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}
.att-empty-state-action { margin-top: .25rem; }

/* Error state */
.att-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  gap: .65rem;
}
.att-error-icon  { font-size: 2rem; }
.att-error-state p { color: var(--att-red); font-size: .9rem; margin: 0; }
.att-loading-hint,
.att-error-hint,
.att-empty-hint  { font-size: .85rem; color: var(--att-muted); padding: .5rem; text-align: center; }

/* ── #12 Toast Notifications ─────────────────────────────── */
#att-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  max-width: 360px;
  width: calc(100% - 2rem);
}
.att-toast {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  box-shadow: var(--att-shadow-md);
  padding: .75rem 1rem;
  pointer-events: all;
  transform: translateX(110%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s;
}
.att-toast--visible  { transform: translateX(0); opacity: 1; }
.att-toast--hiding   { transform: translateX(110%); opacity: 0; }
.att-toast-icon { font-size: 1rem; flex-shrink: 0; }
.att-toast-msg  { flex: 1; font-size: .875rem; color: var(--att-text); font-weight: 500; }
.att-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--att-muted);
  padding: 0 .1rem;
  flex-shrink: 0;
  line-height: 1;
}
.att-toast-close:hover { color: var(--att-text); }
.att-toast--success { border-left: 3px solid var(--att-green); }
.att-toast--error   { border-left: 3px solid var(--att-red);   }
.att-toast--info    { border-left: 3px solid var(--att-blue);  }
.att-toast--warning { border-left: 3px solid var(--att-amber); }

/* ── Wave 10 additions — misc ────────────────────────────── */

/* Error boundary */
.att-error-boundary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  background: var(--mr-warning-subtle);
  border: 1px solid #fde68a;
  border-radius: var(--att-radius);
}
.att-eb-icon    { font-size: 1.5rem; flex-shrink: 0; }
.att-eb-content { flex: 1; }
.att-eb-title   { font-weight: 600; font-size: .9rem; margin: 0 0 .2rem; color: #92400e; }
.att-eb-detail  { font-size: .8rem; color: #666; margin: 0; }
.att-eb-retry   { flex-shrink: 0; }

/* Edit modal */
.att-edit-hint { font-size: .78rem; color: var(--att-muted); margin-top: .5rem; }

/* History modal */
.att-history-modal  { max-width: 620px; }
.att-history-body   { max-height: 60vh; overflow-y: auto; }
.att-history-entry  { border-bottom: 1px solid var(--att-border); padding: .75rem 0; }
.att-history-entry:last-child { border-bottom: none; }
.att-history-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.att-history-op     { font-weight: 600; font-size: .875rem; }
.att-history-time   { font-size: .78rem; color: var(--att-muted); margin-left: auto; }
.att-history-actor  { font-size: .78rem; color: var(--att-faint); }
.att-history-reason { font-size: .8rem; color: #555; margin: .25rem 0; font-style: italic; }
.att-diff-table     { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: .35rem; }
.att-diff-table th  { font-size: .72rem; color: var(--att-muted); font-weight: 500; padding: .2rem .4rem; text-align: left; }
.att-diff-table td  { padding: .2rem .4rem; }
.att-diff-field     { font-weight: 500; color: var(--att-text); }
.att-diff-before    { color: var(--att-red); }
.att-diff-after     { color: var(--att-green); }
.att-diff-arrow     { color: var(--att-muted); }
.att-diff-null      { color: var(--att-faint); }

/* Corrections Inbox */
.att-inbox-panel   { width: 440px; }
.att-inbox-item    { border: 1px solid var(--att-border); border-radius: var(--att-radius-sm); padding: .75rem; margin-bottom: .75rem; background: var(--att-surface); }
.att-inbox-header  { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
.att-inbox-type    { font-size: .78rem; font-weight: 600; }
.att-inbox-emp     { font-weight: 600; font-size: .875rem; }
.att-inbox-date    { font-size: .78rem; color: var(--att-muted); margin-left: auto; }
.att-inbox-reason  { font-size: .82rem; color: #444; margin: .25rem 0; font-style: italic; }
.att-inbox-requested { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .78rem; color: #555; margin: .25rem 0; }
.att-inbox-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.att-inbox-submitted { font-size: .72rem; color: var(--att-faint); margin: .25rem 0 0; }
.att-inbox-done    { text-align: center; padding: .5rem; color: var(--att-green); font-weight: 500; }

/* a11y live region */
#att-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── #15 Mobile-first cards ──────────────────────────────── */
.att-mobile-card {
  display: none; /* shown only on mobile */
  background: var(--att-surface);
  border: 1px solid var(--att-border);
  border-radius: var(--att-radius);
  padding: .85rem 1rem;
  box-shadow: var(--att-shadow-xs);
  gap: .6rem;
  flex-direction: column;
}
.att-mc-header { display: flex; align-items: center; gap: .65rem; }
.att-mc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--mr-text-secondary);
  flex-shrink: 0;
  border: 1px solid rgba(71,85,105,.15);
}
.att-mc-info   { display: flex; flex-direction: column; gap: .05rem; flex: 1; }
.att-mc-name   { font-size: .9rem; font-weight: 600; color: var(--att-text); }
.att-mc-dept   { font-size: .72rem; color: var(--att-muted); }
.att-mc-status { display: flex; align-items: center; gap: .4rem; }
.att-mc-times  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  background: var(--mr-bg);
  border-radius: var(--att-radius-sm);
  padding: .55rem .65rem;
}
.att-mc-time-item { display: flex; flex-direction: column; align-items: center; }
.att-mct-lbl { font-size: .65rem; color: var(--att-muted); }
.att-mct-val { font-size: .85rem; font-weight: 600; color: var(--att-text); font-variant-numeric: tabular-nums; }
.att-mc-footer { display: flex; align-items: center; justify-content: space-between; }
.att-mc-flags  { display: flex; gap: .3rem; flex-wrap: wrap; }
.att-mc-action-btn {
  background: none;
  border: 1px solid var(--att-border);
  border-radius: 6px;
  padding: .25rem .55rem;
  cursor: pointer;
  font-size: .95rem;
  color: var(--att-muted);
}

/* ── Responsive breakpoints ──────────────────────────────── */

/* Large desktop: 5-col KPI stays */
@media (max-width: 1279px) {
  .att-status-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */
@media (max-width: 1024px) {
  .att-tab-panel { padding: 1rem; }
  .att-rpt-charts-grid { grid-template-columns: repeat(2, 1fr); }
  .att-ov-header { flex-direction: column; align-items: flex-start; }
  .att-ov-header-right { width: 100%; justify-content: flex-end; }
}

/* Mobile */
@media (max-width: 767px) {
  .att-tab-panel { padding: .75rem .75rem; }
  .att-tab-btn   { padding: .6rem .75rem; font-size: .8rem; }

  .att-status-grid { grid-template-columns: repeat(2, 1fr); }
  .att-flag-grid   { grid-template-columns: repeat(3, 1fr); }

  /* Sticky toolbar */
  .att-dl-sticky-toolbar { top: 0; }
  .att-dl-filters        { flex-direction: column; gap: .4rem; }
  .att-filter-search input { min-width: 100%; }
  .att-filter-group { width: 100%; }
  .att-filter-group input,
  .att-filter-group select { width: 100%; }
  .att-filter-actions { width: 100%; justify-content: flex-end; }

  /* #15 Mobile: hide table, show cards */
  .att-owner-table-wrap { display: none; }
  .att-mobile-cards-wrap { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
  .att-mobile-card { display: flex; }

  /* Profile panel full width */
  .att-profile-panel { width: 100%; right: -100%; }

  /* Calendar */
  .att-cal-grid  { gap: 2px; }
  .att-cal-cell  { min-height: 44px; padding: .25rem; }
  .att-cal-legend { display: none; } /* too small — hide legend on mobile */

  /* Reports */
  .att-rpt-charts-grid { grid-template-columns: 1fr; }
  .att-chart-card--wide { grid-column: 1; }

  /* Quick actions stack */
  .att-quick-actions { gap: .35rem; }
  .att-qa-btn { font-size: .75rem; padding: .35rem .65rem; }

  /* Action Center */
  .att-ov-pct-row { justify-content: flex-start; }

  /* Toast full width on mobile */
  #att-toast-container { left: .5rem; right: .5rem; max-width: none; width: auto; top: .5rem; }
}

/* Very small screens */
@media (max-width: 400px) {
  .att-status-grid { grid-template-columns: 1fr 1fr; }
  .att-kpi-value   { font-size: 1.5rem; }
  .att-mini-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* Print */
@media print {
  .att-dashboard-header,
  .att-dl-sticky-toolbar,
  .att-pagination,
  .att-quick-actions,
  .att-action-btn,
  #att-toast-container { display: none !important; }
  .att-tab-panel[hidden] { display: block !important; }
  .att-owner-table-wrap { overflow: visible; box-shadow: none; border: none; }
  .att-workforce-dashboard { background: #fff; }
}