/* ==========================================================================
   Employee portal (my.comnexgroup.com). Colours / buttons / forms / chips come from admin.css (tokens --th-*);
   this file is the app shell and the mobile building blocks.
   Phone first (app-like): compact sticky header, 2-up tiles, list rows instead of tables, accordions,
   5-tab bar with an active pill. ≥ 992px: sidebar on the left, wider content.
   ========================================================================== */

body.my { background: var(--th-bg); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
body.my { --my-gutter: 16px; --my-radius: 12px; --my-tab-h: 64px; }
.my .card { border-radius: var(--my-radius); }

/* ---- sidebar (desktop, shadcn Sidebar: header / groups / footer) ---- */
.my-side {
  position: fixed; inset: 0 auto 0 0; z-index: 1030; width: 16rem;
  display: none; flex-direction: column; padding: 8px; background: var(--th-sidebar);
}
/* Brand = the Comnex logo of the admin sidebar (logo-dark.png, 20px high) + a small "employee portal" tag */
.my-side-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 8px; border-radius: 8px; color: inherit; text-decoration: none; line-height: 1.25; }
.my-side-head:hover { background: var(--th-sidebar-accent); }
.my-side-logo { display: block; width: auto; height: 20px; }
.my-side-tag { font-size: .75rem; font-weight: 500; color: var(--th-sidebar-muted); }
.my-side-body { flex: 1; overflow-y: auto; margin-top: 8px; }
.my-side-group { padding: 8px 0; }
.my-side-label { height: 32px; display: flex; align-items: center; padding: 0 8px; font-size: .75rem; font-weight: 500; color: var(--th-sidebar-muted); }
.my-nav-link {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; margin-bottom: 1px;
  border-radius: 6px; color: var(--th-sidebar-fg); text-decoration: none; font-size: .875rem; white-space: nowrap; overflow: hidden;
}
.my-nav-link .icon { width: 16px; height: 16px; flex: none; }
.my-nav-link:hover { background: var(--th-sidebar-accent); color: var(--th-sidebar-accent-fg); }
.my-nav-link.active { background: var(--th-sidebar-accent); color: var(--th-sidebar-accent-fg); font-weight: 500; }
.my-account { display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 8px; }
.my-account:hover { background: var(--th-sidebar-accent); }
.my-account-user { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; flex: 1; min-width: 0; line-height: 1.25; }
.my-account form { margin: 0; }
.my-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--th-muted-fg); }
.my-icon-btn:hover { background: var(--th-card); color: var(--th-fg); }

/* inset panel (desktop): header with breadcrumb */
.my-inset-head { display: none; }
.my-crumbs { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--th-muted-fg); min-width: 0; }
.my-crumbs li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.my-crumbs li + li::before { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .6; -webkit-mask: url("../icons/chevron-right.svg") center / contain no-repeat; mask: url("../icons/chevron-right.svg") center / contain no-repeat; }
.my-crumbs a { color: inherit; text-decoration: none; }
.my-crumbs a:hover { color: var(--th-fg); }
.my-crumbs li[aria-current] { color: var(--th-fg); overflow: hidden; text-overflow: ellipsis; }

/* ---- main ---- */
.my-main { min-height: 100vh; padding-bottom: calc(var(--my-tab-h) + 16px + env(safe-area-inset-bottom)); }
.my-top {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px; padding: 0 var(--my-gutter); padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--th-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.my-top.is-scrolled { border-bottom-color: var(--th-border); }
.my-top-brand img { height: 18px; width: auto; display: block; }
.my-top-me { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.my-top-me .user-avatar { width: 32px; height: 32px; font-size: 12px; }
.my-container { max-width: 60rem; margin: 0 auto; padding: 8px var(--my-gutter) 24px; }

/* page header: title + subtitle; actions on their own row on phones */
.my .page-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 4px 0 16px; }
.my .page-title { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; margin: 0; }
.my .page-subtitle { margin: 4px 0 0; color: var(--th-muted-fg); font-size: .875rem; line-height: 1.45; }
.my .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.my-back { display: inline-flex; align-items: center; gap: 2px; height: 32px; margin: 0 0 4px -6px; padding: 0 6px; border-radius: 8px;
  color: var(--th-muted-fg); text-decoration: none; font-size: .875rem; font-weight: 500; }
.my-back:hover, .my-back:active { background: var(--th-secondary); color: var(--th-fg); }

/* ---- bottom tab bar (phone) ---- */
.my-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--my-tab-h) + env(safe-area-inset-bottom)); padding: 6px 4px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--th-card) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--th-border);
}
.my-tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 2px;
  color: var(--th-muted-fg); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: -.01em;
}
.my-tabbar a > span:first-child { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background .15s; }
.my-tabbar a .icon { width: 20px; height: 20px; }
.my-tabbar a.active { color: var(--th-fg); font-weight: 600; }
.my-tabbar a.active > span:first-child { background: var(--th-secondary); }
.my-tabbar a:active > span:first-child { background: var(--th-accent); }

@media (min-width: 992px) {
  body.my { background: var(--th-sidebar); }
  .my-side { display: flex; }
  .my-main { margin-left: 16rem; padding: 8px 8px 8px 0; min-height: 100vh; }
  .my-top, .my-tabbar { display: none; }
  .my-inset { min-height: calc(100vh - 16px); background: var(--th-bg); border: 1px solid var(--th-border); border-radius: 12px; box-shadow: var(--th-shadow-sm); }
  .my-inset-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--th-border); }
  .my-inset-head .my-lang { margin: 0; }
  .my-container { max-width: 80rem; padding: 28px 32px 48px; }
  .my .page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin: 0 0 24px; }
  .my .page-title { font-size: 1.625rem; }
  .my-back { margin-top: -8px; }
}

/* ---- hero (home) ---- */
.my-hero { margin: 4px 0 16px; }
.my-hero-date { font-size: .8125rem; color: var(--th-muted-fg); text-transform: capitalize; }
.my-hero h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 2px 0 0; }

/* ---- 2-up tiles ---- */
.my-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.my-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border-radius: var(--my-radius);
  background: var(--th-card); border: 1px solid var(--th-border); color: inherit; text-decoration: none;
}
a.my-tile:active { background: var(--th-accent); }
.my-tile-label { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--th-muted-fg); }
.my-tile-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-tile-value small { font-size: .8125rem; font-weight: 500; color: var(--th-muted-fg); letter-spacing: 0; }
.my-tile-hint { font-size: .75rem; color: var(--th-muted-fg); line-height: 1.35; }
.my-tile-hint.is-danger { color: var(--th-danger-fg); }
.my-tile.is-wide { grid-column: 1 / -1; }

/* ---- lists ---- */
.my-list { display: flex; flex-direction: column; background: var(--th-card); border: 1px solid var(--th-border); border-radius: var(--my-radius); overflow: hidden; }
.my-item { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; color: inherit; text-decoration: none; }
.my-item + .my-item { border-top: 1px solid var(--th-border); }
a.my-item:hover { background: var(--th-accent); }
a.my-item:active { background: var(--th-secondary); }
.my-item > .icon.i-chevron-right { width: 16px; height: 16px; opacity: .45; }
.my-item-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--th-secondary); color: var(--th-fg); }
.my-item-icon .icon { width: 18px; height: 18px; }
.my-item .user-avatar { width: 36px; height: 36px; flex: none; }
.my-item-body { flex: 1; min-width: 0; }
.my-item-title { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-item-meta { display: block; color: var(--th-muted-fg); font-size: .8125rem; line-height: 1.4; margin-top: 1px; }
.my-item-end { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.my-item-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.my-item.is-danger .my-item-icon { background: var(--th-danger-bg); color: var(--th-danger-fg); }
.my-item.is-done .my-item-title { color: var(--th-muted-fg); font-weight: 500; }
.my-item.is-done .my-item-icon { color: var(--th-muted-fg); }
.my-section-title { display: flex; align-items: center; justify-content: space-between; margin: 24px 2px 8px; font-size: .75rem; font-weight: 600; color: var(--th-muted-fg); text-transform: uppercase; letter-spacing: .05em; }
.my-section-title:first-child { margin-top: 0; }
.my-section-title a { text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 500; text-decoration: none; }

/* key / value rows (profile) */
.my-kv { display: flex; flex-direction: column; }
.my-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 14px; font-size: .875rem; }
.my-kv > div + div { border-top: 1px solid var(--th-border); }
.my-kv dt { font-weight: 400; color: var(--th-muted-fg); flex: none; }
.my-kv dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

/* accordion (details) */
.my-acc { border-top: 1px solid var(--th-border); }
.my-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; list-style: none; cursor: pointer; font-weight: 500; font-size: .875rem; }
.my-acc > summary::-webkit-details-marker { display: none; }
.my-acc > summary::after { content: ""; width: 16px; height: 16px; background: currentColor; opacity: .45; -webkit-mask: url("../icons/chevron-bottom.svg") center / contain no-repeat; mask: url("../icons/chevron-bottom.svg") center / contain no-repeat; transition: transform .2s; }
.my-acc[open] > summary::after { transform: rotate(180deg); }
.my-acc > .my-acc-body { padding: 0 14px 14px; }

/* month switcher ‹ 11/2026 › */
.my-month { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--th-border); border-radius: 999px; background: var(--th-card); }
.my-month a { display: grid; place-items: center; width: 36px; height: 34px; color: var(--th-fg); border-radius: 999px; }
.my-month a:active, .my-month a:hover { background: var(--th-secondary); }
.my-month a.is-disabled { opacity: .3; pointer-events: none; }
.my-month span { min-width: 76px; text-align: center; font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; }

/* pill buttons row */
.my-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--th-border); border-radius: 999px;
  background: var(--th-card); color: var(--th-fg); text-decoration: none; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.my-chip:active, .my-chip:hover { background: var(--th-secondary); }
.my-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--my-gutter) * -1); padding: 0 var(--my-gutter) 2px; }
.my-chips::-webkit-scrollbar { display: none; }

/* cards: tighter on phones */
.my .card-header { padding: 12px 14px; min-height: 0; font-size: .9375rem; }
.my .card-body { padding: 14px; }
@media (min-width: 576px) { .my .card-body { padding: 18px; } .my .card-header { padding: 14px 18px; } }

.my-progress { height: 6px; border-radius: 999px; background: var(--th-secondary); overflow: hidden; }
.my-progress > span { display: block; height: 100%; background: var(--th-primary); border-radius: inherit; }

.my-stat { display: flex; align-items: baseline; gap: .5rem; }
.my-stat b { font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }

/* bars (6 months / 12 months) */
.my-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 7.5rem; }
.my-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: .6875rem; color: var(--th-muted-fg); }
.my-bar i { display: block; width: 100%; max-width: 2.25rem; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--th-primary); }
.my-bar.is-empty i { background: var(--th-secondary); }
.my-bar b { color: var(--th-fg); font-weight: 600; font-size: .75rem; }

.my-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--my-radius); overflow: hidden; background: #000; }
.my-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.my-prose { line-height: 1.65; overflow-wrap: anywhere; }
.my-prose img { max-width: 100%; height: auto; }
.my-prose > :last-child { margin-bottom: 0; }

.my-quiz-q { padding: 1rem 0; }
.my-quiz-q + .my-quiz-q { border-top: 1px solid var(--th-border); }
.my-quiz-q .form-check { padding: 10px 12px 10px 2.25rem; margin: 6px 0; border: 1px solid var(--th-border); border-radius: 10px; }

/* forms: bigger touch targets, no iOS zoom */
@media (max-width: 991.98px) {
  .my .form-control, .my .form-select { min-height: 44px; font-size: 16px; }
  .my .btn { min-height: 40px; }
  .my-cta .btn, .my-cta { width: 100%; }
}

/* login */
.my-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.my-login-card { width: 100%; max-width: 24rem; }
.my-login-card .my-brand-lg { display: block; height: 22px; margin: 0 auto 1.5rem; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 44px; }
.btn-google svg { width: 18px; height: 18px; }
.my-item .my-lang { margin: 0; }
.my-item.btn, button.my-item { font: inherit; }

/* ---- page body in 2 columns (main + aside) from 1200px; on phones the aside follows with its own spacing ---- */
.my-split { display: grid; gap: 0 24px; grid-template-columns: minmax(0, 1fr); }
.my-split > aside > .my-section-title:first-child { margin-top: 24px; }

/* ---- desktop overrides: kept LAST so they win over the base rules above ---- */
@media (min-width: 992px) {
  .my-hero { margin: 0 0 24px; }
  .my-hero h1 { font-size: 1.75rem; }
  .my-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
  .my-back { display: none; }
  .my-tile { padding: 18px 20px; gap: 8px; }
  .my-tile-value { font-size: 1.75rem; }
  .my-tile.is-wide { grid-column: span 2; }
  .my-item { min-height: 56px; padding: 10px 16px; }
}
@media (min-width: 1200px) {
  .my-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .my-split > aside > .my-section-title:first-child { margin-top: 0; }
}