/* E2C club portal — small overrides on top of Bootstrap 5 (RTL for he, LTR for ru). */

html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
}

/* Mobile rules from the plan: inputs >= 16px (no iOS zoom), touch targets >= 44px. */
.form-control, .form-select { font-size: 1rem; }
.btn, .nav-link, .form-control, .form-select { min-height: 44px; }
.btn-sm { min-height: 36px; }

.login-wrap { min-height: calc(100vh - 2rem); }

/* Sticky first column for wide attendance tables (used from M4). */
.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: var(--bs-body-bg);
  z-index: 1;
}

[dir="rtl"] .tabular { direction: ltr; unicode-bidi: embed; }


/* Attendance grid (M4) */
.grid-wrap { max-height: 75vh; }
.grid-table th, .grid-table td { white-space: nowrap; }
.grid-table .meeting-col { min-width: 4.5rem; }
.grid-table .grid-cell { cursor: pointer; min-width: 4.5rem; max-width: 9rem; }
.grid-table .grid-cell:hover { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.grid-table tbody tr:hover td { background-color: var(--bs-primary-bg-subtle); }
.grid-table tbody tr:hover td.sticky-col { background: var(--bs-primary-bg-subtle); font-weight: 600; }
.grid-table .note-text { max-width: 8.5rem; }
.grid-table thead th { position: sticky; top: 0; z-index: 3; }
.grid-table .sticky-col { position: sticky; background: var(--bs-body-bg); z-index: 2; }
.grid-table .sticky-1 { inset-inline-start: 0; min-width: 9rem; max-width: 12rem; white-space: normal; }
.grid-table .sticky-2 { inset-inline-start: 9rem; }
.grid-table thead .sticky-col { z-index: 4; background: var(--bs-tertiary-bg); }
.grid-table .upcoming-sep { width: 0.4rem; padding: 0; background: var(--bs-secondary-bg); }
.grid-table .upcoming { background: var(--bs-primary-bg-subtle); }
.cell-present { background: var(--bs-success-bg-subtle); }
.cell-short { background: var(--bs-warning-bg-subtle); }
.cell-note { background: var(--bs-info-bg-subtle); }
.src-zoom { color: #0b5cff; font-size: .7em; font-weight: 700; }
.min-w-0 { min-width: 0; } /* lets a flex child shrink below its content (Bootstrap has no such utility) */
.live-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: #adb5bd; flex: none; }
.live-connected .live-dot { background: var(--bs-success); box-shadow: 0 0 0 3px var(--bs-success-bg-subtle); }
.live-tablet .live-dot { background: var(--bs-success); opacity: .6; }
.live-waiting .live-dot { background: var(--bs-warning); }
.live-absent .live-dot { background: var(--bs-danger); }
.live-left .live-dot { background: #adb5bd; }
.live-left { color: var(--bs-secondary-color); }
.live-connected { background: var(--bs-success-bg-subtle); }
.live-banner { border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0; }
.live-banner.bg-success { animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.legend { border-radius: 3px; }
@media (min-width: 768px) {
  .offcanvas-md-end { top: 0; right: 0; left: auto; bottom: 0; width: 26rem; height: 100%; border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%); }
  [dir="rtl"] .offcanvas-md-end { right: auto; left: 0; border-left: 0; border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(-100%); }
  .offcanvas-md-end.show { transform: none; }
}

.grid-table td.name-risk { background: var(--bs-danger-bg-subtle) !important; }
.grid-table td.name-unknown { background: var(--bs-warning-bg-subtle) !important; }
.grid-table td.name-notlisted { background: var(--bs-secondary-bg) !important; }
.mobile-list .status-chip { width: 3.6rem; min-height: 3rem; border-radius: .5rem; padding: .3rem .2rem; border: 1px solid var(--bs-border-color); }
.mobile-list .row-present { background: color-mix(in srgb, var(--bs-success-bg-subtle) 45%, var(--bs-body-bg)); }
.mobile-list .btn-sm { min-width: 2.6rem; min-height: 2.6rem; }
.mobile-daynav { position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg); padding: .25rem 0; }
#gridCards.htmx-request .mobile-list { opacity: .5; transition: opacity .15s; }  /* day arrow: loading */
@media (max-width: 767.98px) { .stat-tile .fs-3 { font-size: 1.35rem !important; } .stat-tile .small { font-size: .72rem; line-height: 1.15; } }

.grid-table tfoot .totals-row td { position: sticky; bottom: 0; background: var(--bs-tertiary-bg); z-index: 2; border-top: 2px solid var(--bs-border-color); }
.grid-table tfoot .totals-row td.sticky-col { z-index: 4; }

/* clubs page: KPI strip and cards (owner design 2026-10-21) */
.kpi { padding: .85rem 1rem; border-radius: .9rem; border: 1px solid var(--kpi-border); background: var(--kpi-bg); color: var(--bs-body-color); }
.kpi-title { font-size: .9rem; font-weight: 600; color: var(--kpi-fg); }
.kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--kpi-fg); }
.kpi-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.kpi-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--kpi-icon-bg); color: var(--kpi-fg); }
.kpi-progress { height: 6px; margin-top: .6rem; background: var(--kpi-icon-bg); }
.kpi-progress .progress-bar { background: var(--kpi-fg); }
.kpi-blue { --kpi-bg: var(--bs-primary-bg-subtle); --kpi-border: var(--bs-primary-border-subtle); --kpi-fg: var(--bs-primary-text-emphasis); --kpi-icon-bg: rgba(var(--bs-primary-rgb), .15); }
.kpi-green { --kpi-bg: var(--bs-success-bg-subtle); --kpi-border: var(--bs-success-border-subtle); --kpi-fg: var(--bs-success-text-emphasis); --kpi-icon-bg: rgba(var(--bs-success-rgb), .15); }
.kpi-orange { --kpi-bg: var(--bs-warning-bg-subtle); --kpi-border: var(--bs-warning-border-subtle); --kpi-fg: #c2410c; --kpi-icon-bg: rgba(var(--bs-warning-rgb), .25); }
.kpi-red { --kpi-bg: var(--bs-danger-bg-subtle); --kpi-border: var(--bs-danger-border-subtle); --kpi-fg: var(--bs-danger-text-emphasis); --kpi-icon-bg: rgba(var(--bs-danger-rgb), .15); }
@media (max-width: 767.98px) { .kpi { padding: .65rem .75rem; } .kpi-value { font-size: 1.45rem; } .kpi-icon { width: 34px; height: 34px; } .kpi-icon svg { width: 18px; height: 18px; } }
.lang-pill { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 500; }
.card-progress { height: 6px; }
.project-name { font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; }

/* club page (owner design 2026-10-21) */
.club-stats .stat-cell { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border-inline-start: 1px solid var(--bs-border-color-translucent); }
.club-stats .row > .stat-cell:first-child { border-inline-start: 0; }
.stat-icon { width: 38px; height: 38px; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.si-red { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.si-green { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.si-blue { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.si-purple { background: #ede9fe; color: #6d28d9; }
.stat-title { font-size: .85rem; font-weight: 600; color: var(--bs-secondary-color); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat-sub { font-size: .78rem; color: var(--bs-secondary-color); }
.countdown-pill { background: #ede9fe; color: #6d28d9; font-weight: 600; }
@media (max-width: 767.98px) { .club-stats .stat-cell { padding: .7rem .75rem; border-top: 1px solid var(--bs-border-color-translucent); } .club-stats .stat-cell:nth-child(odd) { border-inline-start: 0; } .club-stats .stat-cell:nth-child(-n+2) { border-top: 0; } .stat-value { font-size: 1.4rem; } }
.toolbar-pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .2rem .6rem; margin: 0; background: var(--bs-body-bg); }
.toolbar-search { position: relative; min-width: 12rem; max-width: 22rem; }
.toolbar-search svg { position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.toolbar-search input { padding-inline-start: 2rem; }
.quick-filters .btn.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.grid-options { min-width: 16rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.av-0 { background: #dbeafe; color: #1d4ed8; } .av-1 { background: #ede9fe; color: #6d28d9; } .av-2 { background: #dcfce7; color: #15803d; }
.av-3 { background: #fce7f3; color: #be185d; } .av-4 { background: #fef3c7; color: #b45309; } .av-5 { background: #e0f2fe; color: #0369a1; }
.mark { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; vertical-align: middle; }
.mark-yes { background: #34c38f; } .mark-no { background: #f46a6a; }
.mark-before { color: var(--bs-secondary-color); width: auto; } .mark-future { color: var(--bs-secondary-color); width: auto; }
.cell-note-text { font-size: .72rem; line-height: 1.15; color: var(--bs-secondary-color); max-width: 7rem; margin: .15rem auto 0; }
.grid-table thead th { background: var(--bs-tertiary-bg); font-weight: 600; color: var(--bs-secondary-color); border-bottom-width: 1px; }
.grid-table .today-col { background: var(--bs-success-bg-subtle) !important; }
.grid-table td.upcoming { background: var(--bs-primary-bg-subtle); }
.grid-table .watch-col { width: 1.75rem; padding-inline: 0; }
.grid-table .stat-col { min-width: 4.5rem; }
.state-pill { font-weight: 600; padding: .35em .75em; }
.state-fine { background: #dcfce7; color: #15803d; } .state-watch { background: #fef3c7; color: #b45309; }
.state-new { background: #dbeafe; color: #1d4ed8; } .state-status { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.status-chip.chip-yes { background: var(--bs-success-bg-subtle); } .status-chip.chip-no { background: var(--bs-danger-bg-subtle); }
/* borderless inline select ("הצג: 12 מפגשים אחרונים"): room for the arrow on the end side */
.form-select.select-bare { border: 0; background-color: transparent; box-shadow: none; padding: 0 1.9rem 0 0; background-position: right .3rem center; }
[dir="rtl"] .form-select.select-bare { padding: 0 0 0 1.9rem; background-position: left .3rem center; }
/* tickets: how long a ticket is open (yellow after a day, red after 3 days) */
.age-yellow { background: #fef3c7; color: #92400e; font-weight: 600; border-radius: .35rem; padding: 0 .35rem; }
.age-red { background: #fee2e2; color: #b91c1c; font-weight: 700; border-radius: .35rem; padding: 0 .35rem; }

/* Content library ("תכנים", 2026-11-02) */
.content-thumb { aspect-ratio: 16 / 9; object-fit: cover; background: #083A50; }
.content-card:hover { box-shadow: var(--bs-box-shadow) !important; }
.content-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-stars { color: #e0a100; letter-spacing: 1px; }
.star-pick .btn { min-width: 56px; min-height: 44px; }
.meeting-content { max-width: 9rem; }

/* "שימוש בפורטל": one square per day, oldest on the left (the strip is dir=ltr) */
.usage-day { width: 12px; height: 12px; border-radius: 3px; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); }
.usage-day.sat { opacity: .5; }
.usage-day.used { background: var(--bs-success); border-color: var(--bs-success); opacity: 1; }