/* ============================================================
   GymBro — App-like UI skin (global, reusable)
   Plain CSS, no build step. Loaded via <link> in admin layout.
   Namespace: .gb-*  (no leaking into Metronic internals)
   ============================================================ */

:root {
    --gb-accent: #3e97ff;
    --gb-accent-soft: #eef6ff;
    --gb-line: #eef0f6;
    --gb-muted: #a1a5b7;
    --gb-ink: #181c32;
    --gb-soft: #fafbff;
    --gb-green: #17c653;
    --gb-green-soft: #e8fff3;
    --gb-danger: #f8285a;
    --gb-danger-soft: #fff0f3;
    --gb-radius: 16px;
}

/* iOS safe area helper — add to a fixed bottom bar */
.gb-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Allow flex children to shrink so long text truncates instead of overflowing */
.min-w-0 { min-width: 0; }

/* ---------- Black/white primary buttons (Maxi Vieyra badge style) ----------
   The dark chip look becomes the primary action color across the app. */
:root {
    --gb-dark: #1b1b29;
    --gb-dark-hover: #2b2b3c;
}
.btn-primary,
.gb-logbtn {
    background-color: var(--gb-dark) !important;
    border-color: var(--gb-dark) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.gb-logbtn:hover, .gb-logbtn:focus, .gb-logbtn:active {
    background-color: var(--gb-dark-hover) !important;
    border-color: var(--gb-dark-hover) !important;
    color: #fff !important;
}
/* Icons inside dark/colored buttons must always be visible (inherit text color) */
.btn-primary i, .gb-logbtn i,
.btn-dark i, .btn-success i, .btn-danger i, .btn-warning i { color: inherit !important; }
/* The accent used by the searchable-select selected option, etc. */
.gb-session { --gb-accent: var(--gb-dark); }

/* ---------- Better mobile space usage ----------
   Metronic's content container wastes horizontal room on phones.
   Tighten padding and let cards breathe edge-to-edge on small screens. */
@media (max-width: 767.98px) {
    .app-content .app-container,
    #kt_app_content_container { padding-left: 12px !important; padding-right: 12px !important; }
    .app-content .card .card-body { padding-left: 14px; padding-right: 14px; }
    /* Trim the big gutters between stacked cards so more content fits above the fold */
    .gb-session .row.g-4 { --bs-gutter-y: .85rem; }
}

/* ---------- Tabs (horizontal scroll pills) ---------- */
.gb-tabs {
    display: flex; gap: 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 6px;
}
.gb-tab {
    flex-shrink: 0; border: none; background: #fff; color: var(--gb-ink);
    border-radius: 12px; padding: 9px 13px; font-weight: 600; font-size: .9rem;
    box-shadow: 0 2px 8px rgba(24,28,50,.04);
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.gb-tab.active { background: var(--gb-accent); color: #fff; }
.gb-tab .gb-tab-b {
    font-size: .72rem; background: rgba(0,0,0,.07);
    border-radius: 999px; padding: 1px 7px; font-weight: 700;
}
.gb-tab.active .gb-tab-b { background: rgba(255,255,255,.25); }

/* ---------- Set rows (rounded blocks, big numbers) ---------- */
.gb-sethead {
    display: grid; gap: 8px; align-items: center; color: var(--gb-muted);
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 0 6px 6px;
}
.gb-setrow {
    display: grid; gap: 8px; align-items: center; padding: 10px 6px;
    border-radius: 12px; margin-bottom: 5px;
    background: var(--gb-soft); border: 1px solid var(--gb-line);
}
.gb-setrow.gb-better { background: rgba(80, 205, 137, .14); border-color: rgba(80, 205, 137, .4); }
.gb-setrow.gb-worse  { background: rgba(241, 65, 108, .12); border-color: rgba(241, 65, 108, .35); }
.gb-cols   { grid-template-columns: 30px minmax(48px,.8fr) 1fr 1fr 72px; }
.gb-cols-p { grid-template-columns: 30px 56px minmax(48px,.8fr) 1fr 1fr 72px; }
.gb-setnum { font-weight: 800; font-size: 1.1rem; text-align: center; color: var(--gb-ink); }
.gb-prev   { color: var(--gb-muted); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gb-val    { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.gb-val .gb-u { font-size: .72rem; color: var(--gb-muted); font-weight: 600; margin-left: 2px; }
.gb-setact { display: flex; gap: 4px; justify-content: flex-end; }
.gb-ico {
    border: none; background: #eef0f6; color: #7e8299; width: 32px; height: 32px;
    border-radius: 9px; font-size: .9rem; display: grid; place-items: center; flex-shrink: 0;
}
.gb-ico.gb-del { background: var(--gb-danger-soft); color: var(--gb-danger); }
.gb-ico.gb-ok  { background: var(--gb-green-soft); color: var(--gb-green); }
.gb-cell {
    width: 100%; text-align: center; font-weight: 700; font-size: 1rem; padding: 8px 4px;
    border: 1px solid var(--gb-line); border-radius: 9px; background: #fff; font-family: inherit;
}

/* ---------- Add-set zone (big inputs) ---------- */
.gb-addzone { display: flex; gap: 10px; align-items: flex-end; }
.gb-addzone .gb-f { flex: 1; }
.gb-addzone .gb-f label {
    font-size: .7rem; color: var(--gb-muted); font-weight: 700;
    display: block; margin-bottom: 4px;
}
.gb-addzone .gb-f input {
    width: 100%; text-align: center; font-size: 1.25rem; font-weight: 800;
    padding: 11px; border: 1px solid var(--gb-line); border-radius: 11px; font-family: inherit;
}
.gb-logbtn {
    background: var(--gb-accent); color: #fff; border: none; border-radius: 12px;
    padding: 0 18px; height: 52px; font-weight: 700; font-size: 1rem; flex-shrink: 0;
}

/* ---------- Stat cards (dashboard) ---------- */
.gb-stat {
    border-radius: var(--gb-radius); padding: 14px 10px; text-align: center;
    border: 1px solid var(--gb-line);
}
.gb-stat .gb-stat-v { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.gb-stat .gb-stat-l { font-size: .72rem; font-weight: 600; color: var(--gb-muted); margin-top: 2px; }
.gb-stat.gb-stat-primary { background: var(--gb-accent-soft); }
.gb-stat.gb-stat-primary .gb-stat-v { color: var(--gb-accent); }
.gb-stat.gb-stat-success { background: var(--gb-green-soft); }
.gb-stat.gb-stat-success .gb-stat-v { color: var(--gb-green); }
.gb-stat.gb-stat-warning { background: #fff7e6; }
.gb-stat.gb-stat-warning .gb-stat-v { color: #f6c000; }

/* ---------- Searchable select (Select2 replacement) ---------- */
.gb-select { position: relative; width: 100%; }
.gb-select-control {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: #fff; border: 1px solid var(--gb-line); border-radius: 11px;
    padding: 10px 12px; font-size: .95rem; color: var(--gb-ink); cursor: pointer;
    font-family: inherit; text-align: left;
}
.gb-select-control:focus { outline: none; border-color: var(--gb-accent); }
.gb-select-control.gb-open { border-color: var(--gb-accent); box-shadow: 0 0 0 3px var(--gb-accent-soft); }
.gb-select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-select-value.gb-placeholder { color: var(--gb-muted); }
.gb-select-caret { color: var(--gb-muted); flex-shrink: 0; transition: transform .15s; }
.gb-select-control.gb-open .gb-select-caret { transform: rotate(180deg); }
.gb-select-clear {
    border: none; background: transparent; color: var(--gb-muted);
    font-size: 1rem; line-height: 1; padding: 0 2px; flex-shrink: 0;
}

.gb-select-panel {
    position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--gb-line); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(24,28,50,.12); overflow: hidden;
}
.gb-select-search-wrap { padding: 8px; border-bottom: 1px solid var(--gb-line); }
.gb-select-search {
    width: 100%; border: 1px solid var(--gb-line); border-radius: 9px;
    padding: 8px 10px; font-size: .9rem; font-family: inherit;
}
.gb-select-search:focus { outline: none; border-color: var(--gb-accent); }
.gb-select-options { max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gb-select-opt {
    padding: 10px 12px; font-size: .92rem; cursor: pointer; color: var(--gb-ink);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gb-select-opt:hover, .gb-select-opt.gb-active { background: var(--gb-accent-soft); }
.gb-select-opt.gb-selected { font-weight: 700; color: var(--gb-accent); }
.gb-select-empty { padding: 14px 12px; text-align: center; color: var(--gb-muted); font-size: .88rem; }

/* ---------- Searchable select (darte's select2-like, qb-ss) ---------- */
[x-cloak] { display: none !important; }
.qb-ss-trigger { cursor: pointer; user-select: none; overflow: hidden; }
.qb-ss-trigger:focus,
.qb-ss-trigger.qb-ss-open { border-color: #b5b5c3; box-shadow: 0 0 0 .25rem rgba(0,0,0,.03); outline: none; }
.qb-ss-label { line-height: 1.4; }
.qb-ss-clear { opacity: 0; transition: opacity .12s; margin-right: .35rem; font-size: 1rem; line-height: 1; cursor: pointer; }
.qb-ss-trigger:hover .qb-ss-clear { opacity: .6; }
.qb-ss-clear:hover { opacity: 1 !important; color: var(--bs-danger) !important; }
.qb-ss-drop {
    z-index: 1080; background: #fff; border: 1px solid #e1e3ea; border-radius: .425rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12); display: flex; flex-direction: column; overflow: hidden;
}
.qb-ss-search { padding: .5rem; border-bottom: 1px solid #f1f1f4; }
.qb-ss-results { overflow-y: auto; padding: .25rem 0; flex: 1 1 auto; }
.qb-ss-group {
    padding: .35rem .9rem .2rem; font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; color: #99a1b7;
}
.qb-ss-option { padding: .45rem .9rem; font-size: .85rem; color: #4b5675; cursor: pointer; }
.qb-ss-option:hover { background: #f4f4f6; color: #1e2129; }
.qb-ss-option.is-selected { background: var(--bs-primary); color: #fff; }
.qb-ss-option.is-selected:hover { background: var(--bs-primary); color: #fff; }
.qb-ss-empty { padding: .6rem .9rem; font-size: .85rem; color: #99a1b7; text-align: center; }

/* Calendario: día seleccionado + puntitos de suplementos */
.cursor-pointer { cursor: pointer; }
/* Día seleccionado: realce fuerte y visible sobre cualquier fondo (incluido el verde).
   Borde marcado + anillo + leve escala → se nota igual en celular que en PC. */
.gb-cal-selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gb-dark);
    position: relative;
    z-index: 2;
    transform: scale(1.04);
    transition: transform .08s ease;
}
/* Los puntitos van superpuestos abajo (position:absolute) → NO empujan la altura de la celda */
.gb-cal-dots {
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 3px; line-height: 0; padding: 0 3px;
    pointer-events: none;
}
.gb-cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.gb-cal-dot-on-green { box-shadow: 0 0 0 1px rgba(255,255,255,.6); }