/* ═══════════════════════════════════════════════════════════════
   TRELMIRO DESIGN TOKENS
   Reusable za ceo sajt (tracker, tema, landing).
   Kad definišemo vizuelni identitet — menjamo SAMO vrednosti ovde.
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* Boje — Trelmiro brend knjiga (jul 2026) */
	--tm-bg:            #12100D;  /* pozadina */
	--tm-surface:       #1C1A16;  /* kartice */
	--tm-surface-2:     #26231e;  /* sekundarne površine, ghost dugmad */
	--tm-border:        #2b2822;
	--tm-border-input:  #34302a;
	--tm-text:          #ece9e4;
	--tm-text-muted:    #969188;
	--tm-primary:       #3DBB7C;  /* glavni akcenat */
	--tm-primary-hover: #2E9E66;
	--tm-primary-text:  #0C1F15;  /* tekst na zelenoj UVEK taman (i na hover) */
	--tm-link:          #4FC3E8;  /* grafikoni / linkovi */
	--tm-success:       #5BD98A;  /* deficit */
	--tm-success-bg:    #14291c;
	--tm-warning:       #E8A54F;  /* suficit */
	--tm-danger:        #E86B5B;  /* upozorenje / greške */
	--tm-danger-bg:     #2e1815;

	/* Tipografija — Space Grotesk (naslovi), Inter (telo/UI) */
	--tm-font:          'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tm-font-heading:  'Space Grotesk', var(--tm-font);
	--tm-fs-sm:   13px;
	--tm-fs-base: 14px;
	--tm-fs-md:   15px;
	--tm-fs-lg:   18px;
	--tm-fs-xl:   19px;

	/* Oblik i razmaci */
	--tm-radius:      14px;  /* kartice */
	--tm-radius-sm:   10px;  /* dugmad, tabovi */
	--tm-radius-xs:   8px;   /* inputi */
	--tm-space:       12px;
	--tm-space-lg:    16px;
}

/* ═══ APP LAYOUT ═══ */
.trelmiro-app{max-width:560px;margin:0 auto;padding:var(--tm-space);font-family:var(--tm-font);color:var(--tm-text);background:var(--tm-bg);border-radius:var(--tm-radius)}
.trelmiro-app *{box-sizing:border-box}
.t-card{background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-radius);padding:var(--tm-space-lg);margin-bottom:var(--tm-space)}
.t-center{text-align:center}
.t-muted{color:var(--tm-text-muted);font-size:var(--tm-fs-sm)}
.t-title{font-size:var(--tm-fs-lg);font-weight:700;margin:0 0 4px;font-family:var(--tm-font-heading)}
.t-h{font-size:var(--tm-fs-md);font-weight:600;margin:0 0 10px;font-family:var(--tm-font-heading)}

/* ═══ TABS ═══ */
.t-tabs{display:flex;gap:6px;margin-bottom:14px}
.t-tab{flex:1;padding:10px 4px;text-align:center;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-radius-sm);color:var(--tm-text-muted);font-size:var(--tm-fs-sm);cursor:pointer;user-select:none}
.t-tab.active{background:var(--tm-primary);border-color:var(--tm-primary);color:var(--tm-primary-text);font-weight:600}

/* ═══ BALANCE ═══ */
.t-balance{display:flex;justify-content:space-between;gap:8px}
.t-balance div{flex:1;text-align:center}
.t-balance b{display:block;font-size:var(--tm-fs-xl)}
.t-pos{color:var(--tm-warning)}   /* suficit — narandžasta po brend knjizi */
.t-neg{color:var(--tm-success)}   /* deficit — zelena */

/* ═══ BUTTONS & INPUTS ═══ */
.t-btn{display:inline-block;background:var(--tm-primary);color:var(--tm-primary-text) !important;border:none;border-radius:var(--tm-radius-sm);padding:11px 18px;font-size:var(--tm-fs-base);font-weight:600;cursor:pointer;text-decoration:none !important}
.t-btn:hover{background:var(--tm-primary-hover);color:var(--tm-primary-text) !important}
.t-btn:disabled{opacity:.5}
.t-btn-ghost{background:var(--tm-surface-2);color:var(--tm-text) !important;border:1px solid var(--tm-border-input)}
.t-btn-ghost:hover{background:var(--tm-border-input);color:var(--tm-text) !important}
.t-btn-full{width:100%;text-align:center}
/* font-family se NE nasleđuje na form elementima — bez ovoga textarea uzima
   podrazumevani (monospace) font, metrika se ne poklapa i tekst deluje kao da
   iskače iz okvira. */
.trelmiro-app input,.trelmiro-app select,.trelmiro-app textarea{background:var(--tm-bg);border:1px solid var(--tm-border-input);border-radius:var(--tm-radius-xs);color:var(--tm-text);padding:9px 10px;font-size:var(--tm-fs-base);font-family:inherit;line-height:1.5;width:100%}
.trelmiro-app textarea{resize:vertical;min-height:4.5rem;overflow-wrap:break-word}
/* Dug placeholder se prelama u više redova nego što polje ima; bez ovoga
   tekst vizuelno beži iz okvira. Placeholder držati kratkim + ovo kao mreža. */
.trelmiro-app textarea::placeholder{white-space:pre-wrap;overflow:hidden}
.t-row{display:flex;gap:8px;margin-bottom:8px}
.t-row>*{flex:1}

/* ═══ EXERCISE BLOCK ═══ */
.t-ex{border-top:1px solid var(--tm-surface-2);padding-top:var(--tm-space);margin-top:var(--tm-space)}
.t-ex:first-child{border-top:none;margin-top:0;padding-top:0}

/* ═══ Čitljivost liste vežbi ═══
   Testeri su prijavili da ne znaju dokle su stigli u treningu. Rešenje:
   naizmenična pozadina + jasnija linija, trake idu do ivica kartice
   (negativna margina = padding kartice).
   nth-of-type, NE nth-child: između vežbi stoje naslovi "Zagrevanje" i
   "Glavni deo" (<p>), koje bi nth-child brojao i pokvario naizmeničnost. */
#tr-exercises .t-ex{
	border-top:1px solid var(--tm-border-input);
	margin-top:0;
	margin-inline:calc(var(--tm-space-lg) * -1);
	padding:var(--tm-space) var(--tm-space-lg);
}
#tr-exercises .t-ex:nth-of-type(even){background:var(--tm-surface-2)}
#tr-exercises .t-h + .t-ex{border-top:none}
.t-ex-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.t-ex-name{font-weight:600;font-size:var(--tm-fs-md)}
.t-video{color:var(--tm-link);font-size:0.75rem /* 12px */;text-decoration:none}
.t-set{display:grid;grid-template-columns:34px 1fr 1fr 30px;gap:8px;margin-bottom:6px;align-items:center}
.t-set span{color:var(--tm-text-muted);font-size:var(--tm-fs-sm);text-align:center}
.t-set-x{color:var(--tm-danger);background:none;border:none;cursor:pointer;font-size:0.9375rem /* 15px */;padding:0;width:auto !important}
.t-add-set{background:none;border:1px dashed var(--tm-border-input);border-radius:var(--tm-radius-xs);color:var(--tm-text-muted);font-size:var(--tm-fs-sm);cursor:pointer;padding:7px;width:100%;margin-top:2px}

/* ═══ MEALS ═══ */
.t-meal{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--tm-surface-2)}
.t-meal:first-of-type{border-top:none}
.t-meal input[type=checkbox]{width:20px;height:20px;accent-color:var(--tm-primary);flex:none}
.t-meal .m-name{flex:1}
.t-meal .m-kcal{color:var(--tm-text-muted);font-size:var(--tm-fs-sm);flex:none}

/* ═══ HISTORY / LOGS ═══ */
.t-log{border-top:1px solid var(--tm-surface-2);padding:10px 0}
.t-log:first-child{border-top:none}
.t-log-head{display:flex;justify-content:space-between;font-weight:600}
.t-log-sets{color:var(--tm-text-muted);font-size:var(--tm-fs-sm);margin-top:4px}
.t-del{color:var(--tm-danger);background:none;border:none;cursor:pointer;font-size:var(--tm-fs-sm);padding:0}

/* ═══ MESSAGES & FORMS ═══ */
.t-msg{padding:10px;border-radius:var(--tm-radius-xs);margin-bottom:10px;font-size:var(--tm-fs-base);display:none}
.t-msg.ok{display:block;background:var(--tm-success-bg);color:var(--tm-success)}
.t-msg.err{display:block;background:var(--tm-danger-bg);color:var(--tm-danger)}
label.t-lbl{display:block;font-size:var(--tm-fs-sm);color:var(--tm-text-muted);margin:10px 0 4px}

/* ═══ DATE CONTROL ═══ */
.t-datewrap{position:relative;margin-bottom:10px}
.t-date-btn{display:inline-flex;align-items:center;gap:8px;background:var(--tm-bg);border:1px solid var(--tm-border-input);border-radius:var(--tm-radius-xs);color:var(--tm-text);padding:9px 12px;font-size:var(--tm-fs-base);cursor:pointer;width:100%;justify-content:flex-start}
.t-date-btn svg{color:var(--tm-primary);flex:none}
.t-date-hidden{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}

/* ═══ VIDEO MODAL ═══ */
.t-video{background:none;border:1px solid var(--tm-border-input);border-radius:var(--tm-radius-xs);color:var(--tm-link);font-size:0.75rem /* 12px */;cursor:pointer;padding:4px 10px;width:auto}
.t-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px}
.t-modal-box{position:relative;width:100%;max-width:720px}
.t-modal-video{position:relative;padding-top:56.25%;background:#000;border-radius:var(--tm-radius);overflow:hidden;border:1px solid var(--tm-border)}
.t-modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t-modal-x{position:absolute;top:-38px;right:0;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:50%;width:32px;height:32px;color:var(--tm-text);cursor:pointer;font-size:0.875rem /* 14px */}

/* Pravilno / nepravilno ispod videa (Faza: forma vežbe).
   Dve kolone na desktopu, jedna ispod druge na telefonu. */
.t-forma{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;
	background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-radius);
	padding:16px;max-height:38vh;overflow-y:auto}
.t-forma-list{list-style:none;margin:0;padding:0}
.t-forma-list li{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;
	font-size:var(--tm-fs-sm);line-height:1.45;color:var(--tm-text)}
.t-forma-list li:last-child{margin-bottom:0}
.t-forma-mark{flex:0 0 auto;font-weight:700;line-height:1.45}
.t-forma-ok .t-forma-mark{color:var(--tm-primary)}
.t-forma-bad .t-forma-mark{color:var(--tm-danger)}
@media(max-width:520px){
	.t-forma{grid-template-columns:1fr;gap:14px}
}

/* ═══ FULL-PAGE LAYOUT ═══ */
body.trelmiro-fullpage{background:var(--tm-bg);font-family:var(--tm-font)}
.t-topbar{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:0 auto;padding:16px 12px 4px}
.t-logo{font-family:var(--tm-font-heading);font-weight:700;font-size:1.125rem /* 18px */;color:var(--tm-primary)}
.t-topbar nav a{color:var(--tm-text-muted);text-decoration:none;font-size:var(--tm-fs-sm);margin-left:16px}
.t-topbar nav a:hover{color:var(--tm-text)}
.t-main{min-height:calc(100vh - 60px)}
body.trelmiro-fullpage .trelmiro-app{background:transparent;border-radius:0}

/* ═══ STATISTIKA — KALENDAR ═══ */
.t-cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.t-cal-head div{text-align:center;color:var(--tm-text-muted);font-size:0.6875rem /* 11px */}
.t-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.t-cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--tm-radius-xs);background:var(--tm-bg);border:1px solid var(--tm-border);font-size:0.75rem /* 12px */;gap:1px}
.t-cal-day small{font-size:0.5625rem /* 9px */;line-height:1}
.t-cal-day.deficit{border-color:var(--tm-success);color:var(--tm-success)}
.t-cal-day.suficit{border-color:var(--tm-warning);color:var(--tm-warning)}
.t-cal-day.today{outline:2px solid var(--tm-primary);outline-offset:-1px}

/* ═══ AUTOCOMPLETE ═══ */
.t-ac-list{display:none;position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--tm-surface);border:1px solid var(--tm-border-input);border-radius:var(--tm-radius-xs);max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.t-ac-item{padding:9px 12px;cursor:pointer;font-size:var(--tm-fs-base);color:var(--tm-text)}
.t-ac-item:hover{background:var(--tm-surface-2);color:var(--tm-primary)}

/* ═══ RESPONSIVE FIX — mali ekrani i uvećani fontovi ═══ */
.trelmiro-app *, .trelmiro-app *::before, .trelmiro-app *::after{box-sizing:border-box}
body.trelmiro-fullpage{overflow-x:hidden}
.trelmiro-app{min-width:0;overflow-x:clip}
.t-card{min-width:0;max-width:100%}
.t-card input,.t-card select,.t-card textarea,.t-card button{max-width:100%;min-width:0}
.t-row{flex-wrap:wrap}
.t-row>*{min-width:0}

/* Tabovi: horizontalni scroll umesto overflow-a */
.t-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.t-tabs::-webkit-scrollbar{display:none}
.t-tab{flex:none;white-space:nowrap}

/* Header bilans: fluidne veličine, bez lomljenja layouta */
.t-balance{display:flex;gap:8px;align-items:flex-start}
.t-balance>div{flex:1 1 0;min-width:0;text-align:center}
.t-balance b{font-size:clamp(17px,5.5vw,26px);word-break:normal}
.t-balance span{font-size:clamp(10px,2.9vw,12px);line-height:1.25;display:block}
.t-title{font-size:clamp(19px,5.5vw,24px);overflow-wrap:anywhere}
.t-h{overflow-wrap:anywhere}

/* Serije: red ne sme preko ivice */
.t-set{flex-wrap:nowrap}
.t-set input{width:100%;min-width:0}

/* ═══ RESPONSIVE FIX — mali ekrani i povećani fontovi ═══ */
/* PAŽNJA: ovde je ranije stajalo max-width:100%, što je (ista specifičnost,
   kasnije pravilo) gazilo max-width:560px sa vrha fajla — pa se aplikacija
   na desktopu razvlačila preko cele širine, dok je .t-topbar ostajao na 560px.
   min() čuva oba cilja: kolona nikad šira od 560px, a na uskom ekranu nikad
   šira od viewporta. */
.trelmiro-app{max-width:min(560px,100%);overflow-x:clip;box-sizing:border-box}
.trelmiro-app *{min-width:0}
.t-tabs{display:flex;flex-wrap:wrap;gap:6px}
.t-tab{flex:1 1 auto;text-align:center;white-space:nowrap}
.t-balance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.t-balance > div{min-width:0}
.t-balance span{display:block;font-size:0.6875rem /* 11px */;line-height:1.35;overflow-wrap:break-word}
.t-title{overflow-wrap:break-word}
@media (max-width: 480px){
	.trelmiro-app{padding:10px}
	.t-card{padding:14px}
	.t-title{font-size:1.25rem /* 20px */}
	.t-balance b{font-size:1.1875rem /* 19px */}
	.t-tab{padding:8px 8px;font-size:0.8125rem /* 13px */}
	.t-row{flex-wrap:wrap}
	.t-row > *{flex:1 1 120px}
}

/* ═══ STICKY HEADER + TABOVI ═══ */
.t-sticky{position:sticky;top:0;z-index:40;background:var(--tm-bg);padding-bottom:6px;transition:padding .2s}
.t-sticky .t-head-card{transition:padding .2s;margin-bottom:10px}
.t-sticky .t-title{transition:font-size .2s,margin .2s}
.t-sticky.is-compact .t-head-card{padding:8px 14px;margin-bottom:6px}
.t-sticky.is-compact .t-title{font-size:0.875rem /* 14px */;margin:0 0 4px}
.t-sticky.is-compact .t-balance b{font-size:1.0625rem /* 17px */}
.t-sticky.is-compact .t-balance span{font-size:0.625rem /* 10px */}
.t-sticky.is-compact .t-tabs{gap:4px}
.t-sticky.is-compact .t-tab{padding:6px 8px;font-size:0.75rem /* 12px */}

/* ═══ STRELICA "IMA JOŠ SADRŽAJA" ═══ */
#t-scroll-arrow{display:none;position:fixed;bottom:16px;right:16px;z-index:60;width:44px;height:44px;border-radius:50%;border:0;background:var(--tm-primary);color:var(--tm-primary-text,#0C1F15);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45);animation:t-bounce 1.6s infinite}
#t-scroll-arrow:hover{background:var(--tm-primary-hover,#2E9E66)}
@keyframes t-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ═══ VIDEO DUGME — upadljivije, brend plava ═══ */
.t-video{background:var(--tm-link)!important;color:#0C1F15!important;border:0!important;padding:7px 14px!important;border-radius:8px!important;font-weight:600!important;font-size:0.8125rem /* 13px */!important;line-height:1!important;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.t-video:hover{filter:brightness(1.12)}

/* ═══ NAPOMENA U BALANSU ═══ */
.t-bal-note{display:block;font-style:normal;font-size:0.5625rem /* 9px */;line-height:1.3;color:var(--tm-text-muted);opacity:.8;margin-top:2px}
.t-sticky.is-compact .t-bal-note{display:none}

/* ═══ MODAL — PRAVNI DOKUMENTI ═══ */
.t-modal-doc{background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-radius);max-height:80vh;overflow-y:auto;padding:22px}
.t-modal-doc h1,.t-modal-doc h2,.t-modal-doc h3{color:var(--tm-text);font-family:'Space Grotesk',sans-serif}
.t-modal-doc p,.t-modal-doc li{color:var(--tm-text-muted);line-height:1.6}
.t-legal-row{display:flex;gap:10px;margin:14px 0 4px}
.t-legal-row button{background:none;border:0;padding:0;color:var(--tm-link);cursor:pointer;text-decoration:underline;font-size:0.8125rem /* 13px */}
.t-consent{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;cursor:pointer}
.t-consent input{width:20px;height:20px;flex:none;accent-color:var(--tm-primary);margin-top:1px}
.t-consent span{font-size:0.8125rem /* 13px */;color:var(--tm-text-muted);line-height:1.5}

/* ─── Dani vežbanja / uzrast — pill checkboxovi (upitnik + onboarding) ─── */
.t-dani { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.t-dani label { cursor: pointer; position: relative; }
.t-dani input { position: absolute; opacity: 0; pointer-events: none; }
.t-dani span {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--tm-border-input);
	border-radius: 999px;
	color: var(--tm-text-muted);
	font-size: 0.8125rem;
	user-select: none;
	transition: background .15s, color .15s, border-color .15s;
}
.t-dani input:checked + span {
	background: var(--tm-primary);
	border-color: var(--tm-primary);
	color: var(--tm-primary-text);
	font-weight: 600;
}
.t-dani input:focus-visible + span { outline: 2px solid var(--tm-link); outline-offset: 2px; }

/* ─── Zamena vežbe ─── */
.t-ex-act{display:flex;gap:8px;align-items:center;flex-shrink:0}
.t-swap{background:transparent;border:1px solid var(--tm-border-input);border-radius:6px;color:var(--tm-text-muted);font-size:0.75rem;padding:4px 10px;cursor:pointer;font-family:inherit}
.t-swap:hover{border-color:var(--tm-primary);color:var(--tm-primary)}
.t-alt-pick:hover{border-color:var(--tm-primary)}

/* ─── Tajmer za vežbe na vreme ─── */
.t-timer{background:transparent;border:1px solid var(--tm-border-input);border-radius:6px;color:var(--tm-text-muted);font-size:0.75rem;padding:6px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.t-timer:hover{border-color:var(--tm-primary);color:var(--tm-primary)}

/* ─── Članarina — traka za obnovu (Faza 5) ───
   Van .t-sticky (nije "zalepljena"): pri vrhu app-a, ne blokira skrol
   ni ostatak app-a, korisnik je može sam skloniti (t-sub-banner-x). */
.t-sub-banner{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	background:var(--tm-surface-2);border:1px solid var(--tm-border-input);
	border-radius:var(--tm-radius-sm);padding:10px 12px;margin-bottom:var(--tm-space);
	font-size:var(--tm-fs-sm);color:var(--tm-text)
}
.t-sub-banner-warn{background:var(--tm-danger-bg);border-color:var(--tm-danger);color:var(--tm-danger)}
.t-sub-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.t-sub-banner-btn{
	background:var(--tm-primary);color:var(--tm-primary-text) !important;border:none;
	border-radius:var(--tm-radius-xs);padding:6px 12px;font-size:var(--tm-fs-sm);
	font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap
}
.t-sub-banner-btn:hover{background:var(--tm-primary-hover)}
.t-sub-banner-x{
	background:transparent;border:none;color:inherit;opacity:.7;cursor:pointer;
	font-size:var(--tm-fs-base);line-height:1;padding:2px 4px
}
.t-sub-banner-x:hover{opacity:1}

/* Modal (openModal) se kači na <body>, van .trelmiro-app — bez ovoga
   inputi/textarea unutra ostaju nestilizovani (belo na tamnoj pozadini). */
.t-modal-doc input,.t-modal-doc select,.t-modal-doc textarea{
	background:var(--tm-bg);border:1px solid var(--tm-border-input);border-radius:var(--tm-radius-xs);
	color:var(--tm-text);padding:9px 10px;font-size:var(--tm-fs-base);font-family:inherit;
	line-height:1.5;width:100%;box-sizing:border-box
}
.t-modal-doc textarea{resize:vertical;min-height:3.5rem}
.t-modal-doc label{display:block;color:var(--tm-text);font-size:var(--tm-fs-sm)}

/* Zagrevna serija — vizuelno odvojena da klijent ne pokušava da je "pobedi". */
.t-warm-tag{
	display:inline-block;margin-left:4px;padding:1px 5px;border-radius:3px;
	background:var(--tm-warning, #E8A54F);color:var(--tm-primary-text, #0C1F15);
	font-size:0.625rem;font-weight:700;font-style:normal;vertical-align:middle
}
.t-set.is-warm input{opacity:.75}