/* Client portal 2.0 (docs/notes/v2.md "Client portal"): the same calmer design as the team portal 2.0. Everything here
   applies only under <html data-ui="v2">; the first lines keep the classic design exactly as it was. */
.v2i, .v2-only, .tabbar { display: none; }

[data-ui="v2"] {
  --brand: #0d9488; --brand-ink: #0f766e; --brand-soft: #e6f5f3;
  --bg: #f6f8f8; --surface: #ffffff; --surface-2: #f3f6f6; --line: #e3e8e9; --line-2: #edf1f1;
  --ink: #0f1a1f; --ink-2: #48565d; --ink-3: #7a878d;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 26, 31, .05), 0 2px 8px rgba(15, 26, 31, .05);
  --shadow-lg: 0 12px 40px rgba(15, 26, 31, .16), 0 2px 6px rgba(15, 26, 31, .06);
}
@media (prefers-color-scheme: dark) {
  [data-ui="v2"] {
    --brand: #14b8a6; --brand-ink: #5eead4; --brand-soft: #0f2e2c;
    --bg: #0a1114; --surface: #10191d; --surface-2: #162226; --line: #213036; --line-2: #1a272c;
    --ink: #e5eef0; --ink-2: #a6b4b9; --ink-3: #75858b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .25); --shadow-lg: 0 14px 44px rgba(0, 0, 0, .55);
  }
}
[data-ui="v2"] .v2i { display: inline-block; flex: none; }
[data-ui="v2"] .v2-only { display: inline-flex; align-items: center; }

/* Shell: a frosted top bar; the menu as pills with icons */
[data-ui="v2"] .top { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: var(--line-2); }
[data-ui="v2"] .nav { gap: 2px; padding: 0 14px 8px; }
[data-ui="v2"] .nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border-bottom: 0; font-size: 13.5px; }
[data-ui="v2"] .nav a:hover { background: var(--surface-2); }
[data-ui="v2"] .nav a.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
[data-ui="v2"] .nav a .v2i { opacity: .8; }

/* Content */
[data-ui="v2"] .main { padding-top: 28px; }
[data-ui="v2"] .hello h1 { font-size: 28px; letter-spacing: -.02em; }
[data-ui="v2"] .card { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
[data-ui="v2"] a.card { transition: border-color .15s, transform .15s, box-shadow .15s; }
[data-ui="v2"] a.card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; }
[data-ui="v2"] .kpi .label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
[data-ui="v2"] .kpi .label .v2i { color: var(--brand-ink); }
[data-ui="v2"] .kpi .val { font-variant-numeric: tabular-nums; }
[data-ui="v2"] .btn { border-radius: 10px; }
[data-ui="v2"] .btn.primary { background: var(--brand-ink); border-color: var(--brand-ink); }
[data-ui="v2"] .btn.primary:hover { background: var(--brand); }
[data-ui="v2"] .chip { border-radius: 99px; }
[data-ui="v2"] .card.waiting { border-color: #f59e0b; box-shadow: inset 4px 0 0 #f59e0b, var(--shadow); }
[data-ui="v2"] .row-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); justify-content: center; flex: none; }
[data-ui="v2"] .list > a:hover { text-decoration: none; }
[data-ui="v2"] .list > a:hover b { color: var(--brand-ink); }

/* Phones: a tab bar at the bottom with the main pages and More; the top menu goes. */
@media (max-width: 760px) {
  [data-ui="v2"] .nav { display: none; }
  [data-ui="v2"] .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  [data-ui="v2"] .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-around;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  [data-ui="v2"] .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--ink-3);
    font: inherit; font-size: 11px; font-weight: 500; border-radius: 12px; min-width: 0; cursor: pointer; text-decoration: none; }
  [data-ui="v2"] .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-ui="v2"] .tab.on { color: var(--brand-ink); }
  [data-ui="v2"] .tab.on .ico { background: var(--brand-soft); border-radius: 10px; padding: 3px 12px; box-sizing: content-box; }
  [data-ui="v2"] .tab:hover { text-decoration: none; }
  [data-ui="v2"] .tabsheet-veil { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 30; display: flex; align-items: flex-end; }
  [data-ui="v2"] .tabsheet { width: 100%; background: var(--surface); border-radius: 18px 18px 0 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; animation: sheet-up .18s ease; }
  [data-ui="v2"] .tabsheet-i { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 12px; color: var(--ink-2); font-size: 12.5px; text-align: center; text-decoration: none; }
  [data-ui="v2"] .tabsheet-i.on { background: var(--brand-soft); color: var(--brand-ink); }
  [data-ui="v2"] .tabsheet-i:hover { background: var(--surface-2); text-decoration: none; }
  [data-ui="v2"] .hello h1 { font-size: 24px; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-color-scheme: dark) {
  [data-ui="v2"] .btn.primary { background: #2dd4bf; border-color: #2dd4bf; color: #042f2b; }
  [data-ui="v2"] .btn.primary:hover { background: #5eead4; }
  [data-ui="v2"] .tabsheet-veil { background: rgba(0, 0, 0, .6); }
}