@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #142b4a;
  --navy-2: #1c3b62;
  --ink: #182b43;
  --muted: #7b899b;
  --line: #e8edf3;
  --bg: #f6f8fb;
  --white: #fff;
  --blue: #2f6fed;
  --blue-soft: #edf3ff;
  --green: #18855b;
  --green-soft: #e8f7ef;
  --gold: #d99a20;
  --gold-soft: #fff5df;
  --coral: #d85c55;
  --coral-soft: #fff0ef;
  --violet: #7966d9;
  --violet-soft: #f1efff;
  --radius: 15px
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px
}

button,
input,
select {
  font: inherit
}

button {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

.app-shell {
  min-height: 100vh
}

.sidebar {
  width: 258px;
  background: var(--navy);
  color: #fff;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  padding: 27px 17px 17px;
  z-index: 20
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 9px 32px
}

.brand-mark {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  font: 800 22px Manrope;
  position: relative
}

.brand-mark span {
  color: var(--gold);
  font-size: 12px;
  position: absolute;
  right: 5px;
  top: 3px
}

.brand strong {
  display: block;
  font: 800 17px Manrope;
  letter-spacing: -.5px
}

.brand small {
  display: block;
  color: #a8b9cf;
  font-size: 8px;
  letter-spacing: 1.2px;
  margin-top: 3px
}

.workspace-label {
  color: #8da3be;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 0 12px 12px
}

.nav-list {
  display: grid;
  gap: 5px
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  color: #c5d1e1;
  padding: 12px 13px;
  border-radius: 10px;
  text-align: left;
  font-weight: 500;
  transition: .18s
}

.nav-item:hover {
  background: #ffffff12;
  color: #fff
}

.nav-item.active {
  background: #ffffff18;
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 #e4a833
}

.nav-icon {
  font-size: 17px;
  width: 19px;
  text-align: center
}

.nav-count {
  margin-left: auto;
  border-radius: 20px;
  background: #345276;
  color: #fff;
  padding: 2px 7px;
  font-size: 10px
}

.sidebar-bottom {
  margin-top: auto
}

.help-card {
  background: #203e61;
  border: 1px solid #355477;
  border-radius: 12px;
  padding: 15px;
  margin: 18px 2px 20px
}

.help-symbol {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  background: #315479;
  border-radius: 8px;
  margin-bottom: 11px;
  font-weight: 700
}

.help-card strong {
  font-size: 12px
}

.help-card p {
  font-size: 11px;
  color: #bdcad9;
  line-height: 1.55;
  margin: 7px 0 12px
}

.text-button {
  background: none;
  border: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 0
}

.help-card .text-button {
  color: #f2c25f
}

.text-button span {
  padding-left: 5px
}

.store-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d3dfed;
  padding: 12px 10px;
  font-size: 12px;
  border-bottom: 1px solid #ffffff20
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 5px 2px
}

.avatar,
.top-avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #f1d8ac;
  color: #694c23;
  font-weight: 800;
  font-size: 11px
}

.profile-copy {
  min-width: 0;
  flex: 1
}

.profile-copy strong,
.profile-copy small {
  display: block;
  white-space: nowrap
}

.profile-copy strong {
  font-size: 11px
}

.profile-copy small {
  font-size: 9px;
  color: #a9bad0;
  margin-top: 4px
}

.icon-button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 17px;
  padding: 7px;
  border-radius: 8px
}

.icon-button:hover {
  background: #edf2f8;
  color: var(--ink)
}

.main-area {
  margin-left: 258px;
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

.topbar {
  height: 72px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  position: sticky;
  top: 0;
  z-index: 10
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8b97a8;
  font-size: 12px
}

.breadcrumb strong {
  color: var(--ink);
  font-weight: 700
}

.crumb-sep {
  color: #c6ced8
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 19px
}

.today-label {
  font-size: 11px;
  color: #7e8da0
}

.notification-button {
  position: relative;
  font-size: 21px;
  color: #63758c;
  cursor: pointer;
}

.notification-button:hover {
  color: #0f172a;
}

.notification-button i {
  position: absolute;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: #dc2626;
  color: #ffffff;
  border-radius: 10px;
  right: 2px;
  top: 2px;
  border: 1.5px solid #fff;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.top-avatar {
  width: 32px;
  height: 32px;
  background: var(--navy);
  color: #fff
}

.mobile-menu {
  display: none
}

.page-content {
  padding: 31px 36px 36px;
  flex: 1;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px
}

.eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #8392a6;
  margin: 0 0 9px
}

.page-heading h1 {
  font: 800 26px Manrope;
  margin: 0;
  letter-spacing: -.9px
}

.wave {
  font-size: 20px;
  color: var(--gold)
}

.page-subtitle {
  color: #7c8a9b;
  font-size: 12px;
  margin: 8px 0 0
}

.heading-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}

.button {
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: .16s
}

.button-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 8px #2f6fed20
}

.button-primary:hover {
  background: #205bd1;
  transform: translateY(-1px)
}

.button-secondary {
  background: #fff;
  color: #40536d;
  border-color: #dfe6ef
}

.button-secondary:hover {
  background: #f7f9fc;
  border-color: #bfcbd9
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 20px
}

.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 19px;
  min-width: 0
}

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #68788d;
  font-size: 11px;
  font-weight: 600
}

.stat-icon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0
}

.stat-icon.blue,
.quick-icon.blue {
  background: var(--blue-soft);
  color: var(--blue)
}

.stat-icon.violet,
.quick-icon.violet {
  background: var(--violet-soft);
  color: var(--violet)
}

.stat-icon.gold,
.quick-icon.gold {
  background: var(--gold-soft);
  color: #c48a18
}

.stat-icon.coral {
  background: var(--coral-soft);
  color: var(--coral)
}

.stat-icon.green {
  background: var(--green-soft);
  color: var(--green)
}

.stat-value {
  font: 800 24px Manrope;
  letter-spacing: -.9px;
  margin: 15px 0 10px;
  white-space: nowrap
}

.stat-value small {
  font: 600 10px 'DM Sans';
  letter-spacing: 0;
  color: #8793a3
}

.stat-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #8b97a7
}

.trend {
  color: var(--green);
  font-weight: 700
}

.neutral-trend {
  color: #64748b
}

.warning-trend {
  color: #bd8418;
  font-weight: 700
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(270px, 1fr);
  gap: 18px;
  margin-bottom: 18px
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 21px 21px 0;
  min-width: 0
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px
}

.panel-heading h2 {
  font: 800 15px Manrope;
  margin: 0;
  letter-spacing: -.3px
}

.panel-heading p {
  color: #8793a3;
  font-size: 11px;
  margin: 6px 0 0
}

.table-wrap {
  width: 100%;
  overflow-x: auto
}

table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap
}

th {
  text-align: left;
  color: #91a0b1;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: 8px;
  font-weight: 800;
  padding: 0 12px 12px
}

td {
  padding: 14px 12px;
  border-top: 1px solid #edf1f5;
  font-size: 10px;
  color: #58697f
}

td:first-child,
th:first-child {
  padding-left: 0
}

td:last-child,
th:last-child {
  padding-right: 0
}

td strong {
  font-size: 11px;
  color: #2c3e55;
  font-weight: 700
}

td small {
  display: block;
  font-size: 9px;
  color: #8e9bad;
  margin-top: 5px
}

.course-cell,
.person-cell {
  display: flex;
  align-items: center;
  gap: 10px
}

.course-thumb {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 18px;
  flex-shrink: 0
}

.amber {
  background: #fff0d6;
  color: #b77a11
}

.blue {
  background: #e9f2ff;
  color: #3977cf
}

.rose {
  background: #ffebee;
  color: #c35f75
}

.muted-inline {
  display: inline;
  color: #9aa5b3;
  font-size: 9px
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap
}

.status-green {
  background: var(--green-soft);
  color: #168153
}

.status-blue {
  background: #edf3ff;
  color: #376ed0
}

.status-orange {
  background: #fff5df;
  color: #ad7a17
}

.status-red {
  background: #fff0ef;
  color: #c84c46
}

.status-gray {
  background: #f0f3f7;
  color: #6e7c8d
}

.status-purple {
  background: #f3e8ff;
  color: #7e22ce
}

.status-gold {
  background: #fdf8e6;
  color: #946c00
}

.dots {
  border: 0;
  background: transparent;
  color: #8190a3;
  letter-spacing: 1px;
  padding: 6px
}

.panel-footer {
  border-top: 1px solid #edf1f5;
  margin-top: 5px;
  padding: 12px 0
}

.muted {
  font-size: 9px;
  color: #9aa5b3
}

.quick-panel {
  padding-bottom: 12px
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-top: 1px solid #edf1f5;
  padding: 14px 0
}

.quick-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 17px;
  flex-shrink: 0
}

.quick-action>span:nth-child(2) {
  flex: 1
}

.quick-action strong,
.quick-action small {
  display: block
}

.quick-action strong {
  font-size: 11px;
  color: #34465e
}

.quick-action small {
  font-size: 9px;
  color: #8a97a7;
  margin-top: 5px
}

.quick-action>b {
  font-size: 16px;
  color: #a6b1bf
}

.quick-action:hover strong {
  color: var(--blue)
}

.activity-panel {
  padding-bottom: 8px
}

.activity-list {
  margin-top: -3px
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #edf1f5;
  min-width: 0
}

.activity-dot {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0
}

.green-dot {
  background: var(--green-soft);
  color: var(--green)
}

.blue-dot {
  background: var(--blue-soft);
  color: var(--blue)
}

.gold-dot {
  background: var(--gold-soft);
  color: #bb861b
}

.activity-item>div {
  flex: 1;
  min-width: 0
}

.activity-item strong,
.activity-item small {
  display: block
}

.activity-item strong {
  font-size: 10px;
  color: #34465d
}

.activity-item small {
  font-size: 9px;
  color: #8a97a7;
  margin-top: 5px
}

.activity-item time {
  font-size: 9px;
  color: #9aa5b3;
  white-space: nowrap
}

.amount {
  font-size: 10px;
  color: #42546a;
  min-width: 95px;
  text-align: right
}

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 36px;
  border-top: 1px solid var(--line);
  color: #9aa5b3;
  font-size: 9px;
  background: #fff
}

.view {
  display: none
}

.view.active {
  display: block
}

.view>.panel {
  padding-bottom: 22px
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px
}

.training-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden
}

.training-banner {
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 40px
}

.training-banner span {
  position: absolute;
  bottom: 12px;
  left: 15px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.4px
}

.banner-amber {
  background: #fff0d6;
  color: #bd8219
}

.banner-blue {
  background: #eaf2ff;
  color: #4278c8
}

.banner-rose {
  background: #ffebef;
  color: #c35e75
}

.training-body {
  padding: 16px
}

.training-body h3 {
  font: 800 14px Manrope;
  margin: 12px 0 7px
}

.training-body p {
  font-size: 10px;
  line-height: 1.6;
  color: #7d8a9b;
  min-height: 34px
}

.training-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #7d8a9b;
  padding: 12px 0;
  border-top: 1px solid #edf1f5;
  margin: 12px 0
}

.full-width {
  width: 100%
}

.filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 17px
}

.search-input,
select,
.manual-search input {
  height: 38px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: #44556a;
  outline: none;
  font-size: 11px
}

.search-input {
  min-width: 220px;
  flex: 1
}

.search-input:focus,
select:focus,
.manual-search input:focus {
  border-color: #7ca4f7;
  box-shadow: 0 0 0 3px #2f6fed12
}

.person-avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0
}

.avatar-1 {
  background: #f9e6d2;
  color: #9d642c
}

.avatar-2 {
  background: #e6e1ff;
  color: #6d5dc2
}

.avatar-3 {
  background: #d9f2e5;
  color: #22845b
}

.table-note {
  font-size: 10px;
  color: #909dad;
  margin: 17px 0 0
}

.info-note {
  background: #f4f8ff;
  border: 1px solid #e0eaff;
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 10px;
  line-height: 1.6;
  color: #5f7190;
  margin-top: 18px
}

.info-note strong {
  color: #2e4f82
}

.compact-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.presence-grid {
  align-items: stretch
}

.scanner-box {
  text-align: center;
  padding: 12px 10px 25px
}

.scan-frame {
  width: 155px;
  height: 155px;
  border: 1px solid #e3eaf4;
  border-radius: 17px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  position: relative;
  background: #f8faff;
  overflow: hidden
}

.qr-illustration {
  width: 82px;
  height: 82px;
  border: 8px dotted #2f6fed;
  color: #2f6fed;
  display: grid;
  place-items: center;
  border-radius: 5px;
  line-height: 1
}

.qr-illustration span {
  font-size: 40px
}

.qr-illustration small {
  position: absolute;
  font-size: 8px;
  font-weight: 800;
  background: #f8faff;
  padding: 2px 5px
}

.corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #2f6fed;
  border-style: solid
}

.tl {
  top: 10px;
  left: 10px;
  border-width: 3px 0 0 3px
}

.tr {
  top: 10px;
  right: 10px;
  border-width: 3px 3px 0 0
}

.bl {
  bottom: 10px;
  left: 10px;
  border-width: 0 0 3px 3px
}

.br {
  bottom: 10px;
  right: 10px;
  border-width: 0 3px 3px 0
}

.scan-line {
  height: 2px;
  background: #2f6fed;
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  box-shadow: 0 0 8px #2f6fed88
}

.scanner-box h3 {
  font: 800 14px Manrope;
  margin: 0 0 8px
}

.scanner-box p {
  font-size: 10px;
  line-height: 1.6;
  color: #8a97a7;
  max-width: 340px;
  margin: 0 auto 17px
}

.manual-search {
  display: flex;
  gap: 8px;
  max-width: 370px;
  margin: 0 auto
}

.manual-search input {
  min-width: 0;
  flex: 1
}

.lookup-result {
  max-width: 370px;
  text-align: left;
  margin: 14px auto 0;
  padding: 13px;
  background: #f1fbf5;
  border: 1px solid #d4f0df;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.6;
  color: #286749
}

.hidden {
  display: none !important
}

.rule-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.rule-list li {
  display: flex;
  gap: 11px;
  padding: 14px 0;
  border-top: 1px solid #edf1f5
}

.rule-check {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.rule-list strong,
.rule-list small {
  display: block
}

.rule-list strong {
  font-size: 11px
}

.rule-list small {
  font-size: 10px;
  line-height: 1.5;
  color: #8a97a7;
  margin-top: 5px
}

.certificate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(270px, 1fr);
  gap: 25px;
  padding-bottom: 23px;
  border-bottom: 1px solid #edf1f5
}

.certificate-preview {
  border: 1px solid #e5e9ef;
  background: #f6f8fb;
  border-radius: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px
}

.certificate-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: contain
}

.certificate-info {
  padding: 8px 0
}

.certificate-info h3 {
  font: 800 19px Manrope;
  margin: 14px 0 9px
}

.certificate-info>p {
  font-size: 11px;
  line-height: 1.7;
  color: #7e8c9e
}

.certificate-fields {
  display: grid;
  gap: 0;
  margin: 17px 0
}

.certificate-fields>div {
  padding: 10px 0;
  border-top: 1px solid #edf1f5
}

.certificate-fields small,
.certificate-fields strong {
  display: block
}

.certificate-fields small {
  font-size: 9px;
  color: #8a97a7;
  margin-bottom: 5px
}

.certificate-fields strong {
  font-size: 11px
}

.certificate-info .button {
  margin-top: 15px
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #0c1d34a6;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50
}

.modal {
  width: min(100%, 510px);
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 70px #0c1d3433;
  max-height: 90vh;
  overflow: auto
}

.modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px
}

.modal-heading h2 {
  font: 800 21px Manrope;
  margin: 0
}

.modal-heading .icon-button {
  font-size: 25px;
  color: #728198
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.form-field {
  display: grid;
  gap: 7px
}

.form-field.full {
  grid-column: 1/-1
}

.form-field label {
  font-size: 10px;
  font-weight: 700;
  color: #53657b
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  padding: 11px;
  background: #fff;
  outline: none;
  font-size: 11px
}

.form-field input:focus,
.form-field select:focus {
  border-color: #7ca4f7
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 23px
}

.modal-copy {
  font-size: 12px;
  line-height: 1.7;
  color: #718096
}

.link-box {
  padding: 12px;
  background: #f5f8fc;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
  word-break: break-all;
  font-size: 11px;
  color: #385981;
  margin: 13px 0
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  background: #183453;
  color: #fff;
  padding: 13px 17px;
  border-radius: 10px;
  box-shadow: 0 10px 30px #10233d2b;
  font-size: 12px;
  max-width: calc(100vw - 44px)
}

@media(max-width:1200px) {
  .page-content {
    padding: 27px 24px
  }

  .topbar {
    padding: 0 24px
  }

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

  .content-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr)
  }

  .stat-value {
    font-size: 22px
  }

  .activity-item {
    flex-wrap: wrap
  }

  .activity-item time {
    margin-left: 40px
  }

  .amount {
    margin-left: auto
  }
}

@media(max-width:950px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s;
    box-shadow: 10px 0 40px #142b4a20
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .main-area {
    margin-left: 0
  }

  .mobile-menu {
    display: block;
    margin-right: 9px
  }

  .topbar {
    justify-content: flex-start;
    gap: 8px
  }

  .breadcrumb {
    flex: 1
  }

  .today-label {
    display: none
  }

  .content-grid {
    grid-template-columns: 1fr
  }

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

  .certificate-layout {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:620px) {
  .topbar {
    height: 60px;
    padding: 0 15px
  }

  .page-content {
    padding: 23px 14px
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .page-heading h1 {
    font-size: 23px
  }

  .heading-actions {
    width: 100%
  }

  .heading-actions .button {
    flex: 1
  }

  .stats-grid {
    gap: 10px
  }

  .stat-card {
    padding: 14px
  }

  .stat-top {
    font-size: 10px;
    align-items: flex-start
  }

  .stat-icon {
    width: 29px;
    height: 29px
  }

  .stat-value {
    font-size: 20px;
    margin: 13px 0 9px;
    white-space: normal
  }

  .stat-value small {
    display: block;
    margin-top: 3px
  }

  .stat-foot {
    font-size: 9px
  }

  .panel {
    padding: 17px 14px 0
  }

  .panel-heading {
    align-items: flex-start
  }

  .panel-heading h2 {
    font-size: 14px
  }

  .panel-heading p {
    max-width: 260px;
    line-height: 1.5
  }

  .panel-heading>.button {
    font-size: 10px;
    padding: 9px
  }

  .content-grid {
    gap: 13px
  }

  .cards-grid {
    grid-template-columns: 1fr
  }

  .filter-row {
    flex-direction: column
  }

  .search-input {
    min-width: 0;
    width: 100%;
    flex: auto
  }

  .filter-row select {
    height: 38px
  }

  .compact-stats {
    grid-template-columns: 1fr
  }

  .certificate-layout {
    grid-template-columns: 1fr
  }

  .certificate-preview {
    min-height: 0
  }

  .certificate-preview img {
    max-height: none
  }

  .activity-item time {
    margin-left: 40px
  }

  .amount {
    min-width: auto
  }

  .app-footer {
    padding: 14px;
    flex-direction: column
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .form-field.full {
    grid-column: auto
  }

  .modal {
    padding: 18px
  }

  .manual-search {
    flex-direction: column
  }

  .manual-search .button {
    width: 100%
  }

  .breadcrumb {
    font-size: 11px
  }

  .top-actions {
    gap: 8px
  }

  .profile-copy small {
    font-size: 8px
  }
}

/* ============================================================
   AUTHENTIFICATION FORMATRICE & SÉCURITÉ STYLE GOOGLE
   ============================================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, #1c3b62 0%, #0d1e35 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.auth-card {
  width: min(100%, 460px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(10, 25, 48, 0.45);
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: fadeIn 0.25s ease-out;
}

.auth-header {
  text-align: center;
  margin-bottom: 22px;
}

.auth-header .brand-mark {
  margin: 0 auto 12px;
}

.auth-header h1 {
  font: 800 22px 'Manrope', sans-serif;
  color: #142b4a;
  margin: 0 0 6px;
}

.auth-header p {
  color: #6c7c93;
  font-size: 13px;
  margin: 0;
}

.attempts-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
  transition: all 0.2s ease;
}

.attempts-badge.ok {
  background: #e8f7ef;
  color: #18855b;
  border: 1px solid #c2ecd5;
}

.attempts-badge.warn {
  background: #fff5df;
  color: #b47a0b;
  border: 1px solid #f9df9e;
}

.attempts-badge.danger {
  background: #fff0ef;
  color: #d85c55;
  border: 1px solid #f8cbc7;
}

/* Style Alerte de Sécurité Google */
.google-alert-box {
  background: #fff;
  border: 2px solid #ea4335;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 35px rgba(234, 67, 53, 0.15);
}

.google-alert-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.google-shield-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fce8e6;
  color: #d93025;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.google-alert-title {
  font: 800 16px 'Manrope', sans-serif;
  color: #202124;
  margin: 0;
}

.google-alert-subtitle {
  font-size: 12px;
  color: #5f6368;
  margin-top: 2px;
}

.google-incident-details {
  background: #f8f9fa;
  border: 1px solid #dadce0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 12px;
  display: grid;
  gap: 6px;
}

.google-incident-row {
  display: flex;
  justify-content: space-between;
}

.google-incident-row span {
  color: #5f6368;
}

.google-incident-row strong {
  color: #202124;
}

.google-prompt-title {
  font: 700 14px 'Manrope', sans-serif;
  color: #202124;
  margin: 16px 0 8px;
  text-align: center;
}

/* Liens distincts */
.share-links-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}

.share-link-card {
  background: #f8faff;
  border: 1px solid #d9e5f7;
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s;
}

.share-link-card:hover {
  border-color: #2f6fed;
}

.share-link-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.share-link-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}

.share-link-badge.reg {
  background: #e8f0fe;
  color: #1a73e8;
}

.share-link-badge.solde {
  background: #fef7e0;
  color: #b06000;
}

.share-link-desc {
  font-size: 12px;
  color: #5f6368;
  margin-bottom: 10px;
}

.share-link-url-box {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 12px;
  color: #182b43;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#syncStatusBadge {
  transition: all 0.25s ease;
  user-select: none;
}

#syncStatusBadge:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@keyframes livePulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.97); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

.status-green#syncStatusBadge {
  animation: livePulse 3s infinite ease-in-out;
}

/* ============================================================
   STYLES DU CENTRE DE PRÉSENCE & ÉMARGEMENT EN DIRECT
   ============================================================ */
.live-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #10B981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: dotPulse 1.8s infinite;
}

@keyframes dotPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.active-filter {
  background: #1F4FB8 !important;
  color: #FFF !important;
  border-color: #1F4FB8 !important;
  font-weight: 700 !important;
}

@keyframes rowFlashGreen {
  0% { background-color: #D1FAE5; }
  100% { background-color: transparent; }
}

@keyframes rowFlashBlue {
  0% { background-color: #DBEAFE; }
  100% { background-color: transparent; }
}

.row-flash-green {
  animation: rowFlashGreen 3s ease-out;
}

.row-flash-blue {
  animation: rowFlashBlue 3s ease-out;
}

/* Impression optimisée pour la feuille d'émargement et l'affiche QR */
@media print {
  body {
    background: #FFF !important;
    color: #000 !important;
  }
  .sidebar, .topbar, .heading-actions, .filter-row, .panel-footer, .button, .icon-button, #presenceFilterTabs, #presenceSessionSelect, #presenceLiveBadge {
    display: none !important;
  }
  .app-shell, .main-area, .page-content, .panel, .table-wrap {
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
  }
  #view-presences {
    display: block !important;
  }
  .view:not(#view-presences) {
    display: none !important;
  }
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11pt !important;
  }
  th, td {
    border: 1px solid #CBD5E1 !important;
    padding: 8px 10px !important;
  }
  .printable-qr-poster {
    border: 2px solid #000 !important;
    box-shadow: none !important;
    margin: 40px auto !important;
    max-width: 600px !important;
  }
}