:root{
	--bg:#0f1310; /* very dark */
	--panel:#172016; /* dark olive */
	--accent:#6b8b3b; /* army green */
	--muted:#9aa08a;
	--text:#e6efe0;
}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; padding:0; background:var(--bg); color:var(--text)}
header{background:linear-gradient(180deg,#0b0f0d, #142114); color:var(--text);}
a{color:var(--accent)}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.site-header{background:linear-gradient(180deg,#07100b,#142114); }
.header-logo{height:40px; width:auto}
.partner-logo{height:28px; width:auto; opacity:0.95}
.subheader{color:var(--muted); padding:6px 0 10px 0}
.header-center a{color:var(--muted); margin:0 6px}

.top-strip{background:linear-gradient(180deg,#0b0f0d, #142114)}
.mid-strip{background:var(--bg)}
.author-line{color:#fff; padding:10px 0; font-size:0.9rem; background:transparent}
.admin-links{padding-bottom:8px}
.nav-button{background:transparent; color:var(--muted); padding:6px 10px; border-radius:6px; margin:0 6px; cursor:pointer; border:1px solid rgba(255,255,255,0.02)}
.nav-button:hover{opacity:0.95}
.tiles{max-width:880px; margin:0 auto; padding:0}
.tile{display:block; width:100%; background:var(--panel); padding:18px; border-radius:10px; text-decoration:none; color:var(--text); box-shadow:0 6px 0 rgba(0,0,0,0.18); border:1px solid rgba(0,0,0,0.18); font-size:1.05rem}
.tile + .tile{margin-top:12px}
.tile:hover{transform:translateY(-2px); box-shadow:0 8px 0 rgba(0,0,0,0.22); color:var(--accent)}
/* admin page: make tiles full-width with consistent padding and forms inline */
.admin-groups .tile, .tiles .tile{ padding:14px; border-radius:8px }
.admin-groups .tile form, .tiles .tile form{ align-items:center }
.admin-groups .tile input[type="date"], .admin-groups .tile select{ margin-left:6px }
.admin-groups .tile .form-control{ min-width:220px }
.admin-groups { max-width:880px; margin:0 auto; }
.admin-groups .tile { margin-bottom:12px }

/* unlock tile appearance */
.tiles .tile input[ name="password" ], .tiles .tile input[name="password"]{ max-width:320px }

/* admin header spacing */
.container > h2{ margin-top:10px; margin-bottom:18px }

/* make small labels inside tiles white (Hasło etc) */
.admin-groups .tile label, .admin-groups .tile .small { color:var(--text) }

/* remove trainings count display (hide) */
.admin-groups .tile .small.text-muted{ display:none }

/* align group tile content on single row */
.admin-groups .tile .group-name{ color:var(--text); font-weight:700; margin-right:12px }
.admin-groups .tile .group-info{ margin:0 }

/* place group name on the left and controls on the right */
.admin-groups .tile { display:flex; align-items:center }
.admin-groups .tile .tile-left { flex: 0 0 auto; color:var(--text); font-weight:700; margin-right:18px }
.admin-groups .tile .group-controls { margin-left:auto; display:flex; gap:12px; align-items:center }
.admin-groups .tile .group-controls form { margin:0 }

/* smaller inputs in admin rows to keep a compact look */
.admin-groups .tile .form-control-sm { min-width:160px }

/* small variant for compact icon buttons */
.btn-sm{ padding:6px 8px; font-size:0.85rem; border-radius:8px }
.admin-groups .tile .group-controls { gap:8px }
.comments-list{overflow:auto; max-height:56vh}
.col-md-4 h3{color:var(--accent)}
.comment{background:rgba(255,255,255,0.03); padding:10px; margin-bottom:8px; border-radius:6px; border:1px solid rgba(255,255,255,0.03)}
.meta{font-size:0.85em; color:var(--muted)}
.poll-result{margin-top:8px; background:rgba(255,255,255,0.03); height:18px; position:relative; border-radius:4px}
.poll-result .bar{background:var(--accent); height:100%; width:0}
.poll-result .label{position:absolute; left:8px; top:-22px; color:var(--muted)}
.btn-primary{background:var(--accent); border-color:var(--accent)}
.btn-secondary{background:#2b362a; border-color:#2b362a}
.btn-danger{background:#6a2118; border-color:#6a2118}
.form-control{background:#0f150f; color:var(--text); border-color:rgba(255,255,255,0.04)}
.form-control:focus{box-shadow:none; border-color:var(--accent)}
.btn-military{background:linear-gradient(180deg,var(--accent), #556b2f); color:var(--text); border:1px solid rgba(0,0,0,0.4); box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15); padding:8px 12px}
.btn-military-outline{background:transparent; color:var(--accent); border:1px solid rgba(107,139,59,0.25); padding:7px 11px}
.input-military{background:linear-gradient(180deg,#0b120a,#0f150f); border:1px solid rgba(255,255,255,0.04); color:var(--text); padding:8px}

/* responsive: mobile-first layout tweaks */
@media (max-width:767px){
	.comments-list{max-height:40vh}
	.col-12{margin-bottom:16px}
}
@media (min-width:768px){
	.comments-list{max-height:56vh}
}
.clickable{cursor:pointer; display:inline-block; text-align:center}
.btn-lg{padding:12px 18px; border-radius:10px; font-weight:600}
.btn-military{border-radius:10px}
.btn-danger{border-radius:10px}
.group-info{white-space:nowrap; align-items:center}
.group-info input{display:inline-block}
.group-info label{margin-right:6px}

/* Ensure columns are side-by-side on wider screens even without Bootstrap
	 and stack on mobile (mobile-first). */
.row{display:flex; flex-wrap:wrap; gap:20px}
.col-12{width:100%}
@media(min-width:768px){
	.col-md-4{width:calc(33.333% - 13.333px)}
	.col-md-4.d-flex{flex-direction:column}
}

/* make textarea match column background */
.input-military, textarea.input-military{background:transparent; border-radius:8px; border:1px solid rgba(255,255,255,0.04); padding:10px; color:var(--text); min-height:44px}
.comments-list .comment{background:rgba(255,255,255,0.02)}

/* column panel: slightly lighter green background that covers title, comments, textarea and add button */
.column-panel{background:linear-gradient(180deg, rgba(107,139,59,0.06), rgba(20,30,10,0.02)); border-radius:8px}
.column-panel h3{color:var(--accent); margin:0 0 8px 0}

/* training title and info box */
.training-title{ color:var(--accent); font-weight:700; }
.btn-back{ padding:6px 12px; font-size:0.95rem; border-radius:8px }
.btn-back:hover{ opacity:0.95 }
.btn-back, .btn-back:link, .btn-back:visited { text-decoration:none; }

/* small helper */
.text-center{ text-align:center }
.training-title .training-date{ color:var(--muted); font-weight:400; margin-left:8px }
.training-info{ background: linear-gradient(180deg, rgba(107,139,59,0.06), rgba(20,30,10,0.02)); border-radius:10px; padding:14px 18px; margin:12px auto 18px; max-width:880px }
.training-info h4{ margin:0 0 8px 0; color:var(--accent) }
.training-info p{ margin:0; color:var(--text); grid-row: 2; grid-column: 1 / -1;}

/* Ensure info box uses grid layout (force override of d-flex if present) */
/* Use a single 'content' area so the descriptive text can be either direct children (h4/p)
	or wrapped inside a div; this avoids layout break on desktop when markup differs. */
.info-with-image{ display: grid !important; grid-template-columns: 96px 1fr; grid-template-areas: "img content"; gap:12px; align-items:center }
.info-image{ grid-area: img; width:96px; height:auto; border-radius:6px; flex-shrink:0 }
.info-with-image > div, .info-with-image > p { grid-area: content; grid-row: 2; grid-column: 1 / -1; }
/* Mobile: place image left of the green title, paragraph below spanning full width */
@media(max-width:767px){
	.info-with-image{ display:grid; grid-template-columns: 96px 1fr; grid-template-areas: "img content"; gap:12px; align-items:center }
	.info-image{ grid-area: img; width:96px; margin:0 }
	/* ensure both direct children and wrapped divs place their text into the content cell */
	.info-with-image > div, .info-with-image > h4, .info-with-image > p { grid-area: content }
	.info-with-image > div > h4, .info-with-image > h4{ margin:0 }
	.info-with-image > div > p, .info-with-image > p{ margin-top:8px; grid-row: 2; grid-column: 1 / -1; }
}

/* move the back button under the title on mobile to give more horizontal room for the title */
@media(max-width:767px){
  .page-header{ display:flex; flex-direction:column; align-items:flex-start; gap:8px }
  /* Ensure the title stays first and the back button is placed after it.
	  Support two DOM shapes: a) wrapper div containing the link, b) link is direct child. */
  .page-header > h2{ order:1 }
	/* align the back button to the left on training page as in selection list */
	.page-header > a.btn-back, .page-header > div:first-child{ order:2; align-self:flex-start }
  .page-header > div:last-child{ order:3 }
  .page-header .btn-back{ align-self:flex-start; margin-top:0 }
}

/* simple alert look matching theme */
.alert{ padding:10px 14px; border-radius:8px; background:rgba(255,255,255,0.04); color:var(--text); border:1px solid rgba(255,255,255,0.03) }
.alert-info{ background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.02); }
.alert-success{ background:linear-gradient(180deg, rgba(107,139,59,0.08), rgba(20,30,10,0.02)); border-color:rgba(107,139,59,0.08); }

/* comment layout */
.comment{background:rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.06); border-radius:6px}
.comment .comment-date{position:absolute; left:12px; top:8px; color:#fff; font-size:0.8rem}
.comment .like-btn{position:absolute; right:12px; top:8px; background:transparent; border:1px solid rgba(107,139,59,0.4); padding:4px 8px; border-radius:6px; color:var(--accent);}
.comment .like-btn .plus{font-weight:700; margin-right:6px}
.comment .likes{font-weight:700; color:var(--accent)}
.comment .comment-text{padding-top:28px}
/* liked state */
.comment .like-btn.liked{ background:rgba(107,139,59,0.18); border-color:rgba(107,139,59,0.55); color:var(--text); }

/* semicircular gauge */
.gauge{ justify-content:center; position:relative; }
.gauge-inner{ position:relative; width:180px; height:90px; z-index:3; margin:0 auto; }
.gauge-arc{ width:100%; height:140%; border-radius:999px; background: linear-gradient(90deg, rgba(178,34,34,0.95) 0%, rgba(237,201,72,0.95) 50%, rgba(34,197,94,0.95) 100%); box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25); z-index:1; }
.gauge-pointer{ position:absolute; left:50%; bottom:35px; width:8px; height:80px; z-index:40; transform-origin: bottom center; border-radius:3px; }
.gauge-pointer{ position:absolute; left:50%; bottom:35px; width:8px; height:80px; z-index:40; transform-origin: bottom center; border-radius:3px; transform: translateX(-50%) rotate(0deg); animation: pointer-wobble 0.5s ease-in-out infinite; }
.gauge-center{ position:absolute; left:50%; bottom: 60px; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: #fff; padding:6px 10px; border-radius:14px; font-weight:700; z-index:45; }

.gauge-pointer::before{
	content: '';
	position:absolute;
	left:50%;
	bottom:10px;
	width:6px;
	height:80px;
	background:var(--text);
	border-radius:3px;
	transform-origin: bottom center;
	transform: rotate(var(--deg, -90deg));
	transition: transform 420ms cubic-bezier(.2,.9,.2,1);
}
@keyframes pointer-wobble{
	0%{ transform: translateX(-50%) rotate(-1deg); }
	50%{ transform: translateX(-50%) rotate(1deg); }
	100%{ transform: translateX(-50%) rotate(-1deg); }
}

/* clip the arc so it doesn't overflow into columns */
.gauge-clip{ overflow:hidden; border-radius:110px 110px 0 0; }
.gauge-inner{ height:100px; }
.gauge-arc{ height:180%; }
.gauge-labels{ width:180px; display:flex; justify-content:space-between; margin:8px auto 0 }
.gauge-label{ color:var(--muted); font-size:0.9rem }
.gauge-label.center{ position:relative; left:0 }

/* make vote buttons a bit wider and balanced */
.btn-military{ padding:10px 18px; min-width:96px; display:inline-block }
.btn-military-outline{ padding:10px 18px; min-width:96px; display:inline-block }

/* red danger variant for 'Nie' kept same shape but red */
.btn-military-danger{ background:linear-gradient(180deg,#a33a2b,#7b241b); color:#fff; border:1px solid rgba(0,0,0,0.3); box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15); padding:10px 18px; min-width:96px; border-radius:10px }

/* footer/admin area */
.site-footer{ background:transparent; margin-top:30px }
.footer-admin{ background:transparent; border-top:1px solid rgba(255,255,255,0.02); padding-top:18px }
.footer-admin .nav-button{ color:var(--muted); border:1px solid rgba(255,255,255,0.02); padding:8px 12px; margin:0 8px }
.footer-admin .nav-button:hover{ opacity:0.95 }

/* --- Surveys (horizontal bars) --- */
.survey-option .bar {
	--pct: 0;
	position: relative;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.06);
	height: 34px;
	border-radius: 8px;
	overflow: hidden;
	z-index: 1; /* keep below the controls */
}
.survey-option .bar.thin { height: 10px; border-radius: 6px; }
.survey-option .bar-inner {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: calc(var(--pct) * 1%);
	background: linear-gradient(90deg, var(--accent), #6fe7a1);
}
.survey-option .bar-label {
	position: absolute;
	left: 10px; top: 50%; transform: translateY(-50%);
	color: var(--text);
	font-weight: 600;
}
.survey-option .option-row .option-text { color: var(--text); }
.survey-option .option-row .option-pct { min-width: 38px; text-align: right; }
.survey-option .option-row { position: relative; z-index: 2; }
.survey-option button.btn-military.btn-sm { white-space: nowrap; }

/* --- Readability tweaks: brighter placeholders and percents --- */
/* Placeholders in inputs/textareas (e.g., Dodaj plus/minus/uwagę/odpowiedź) */
.input-military::placeholder,
textarea.input-military::placeholder,
.form-control::placeholder{
	color: rgba(230,239,224,0.85); /* lighter than --muted, close to --text */
}
/* Survey option percentage on the right */
.survey-option .option-row .option-pct{
	color: rgba(230,239,224,0.92);
	font-weight: 600;
}
/* Training gauge tick labels (0% / 50% / 100%) */
.gauge-label{
	color: rgba(230,239,224,0.85);
}
/* Poll result label above the bar */
.poll-result .label{
	color: rgba(230,239,224,0.85);
}