/* punck-tracker — modern dark theme
 * A class- és id-nevek visszafelé kompatibilisek a régi stílussal,
 * így minden meglévő template változtatás nélkül átveszi az új kinézetet.
 */

:root {
	--bg-deep:        #050505;
	--bg-base:        #0c0c0c;
	--bg-surface:     #141414;
	--bg-elevated:    #1c1c1c;
	--bg-hover:       #242424;
	--bg-input:       #181818;
	--bg-input-focus: #1f1f1f;

	--border-faint:   #1f1f1f;
	--border-base:    #2a2a2a;
	--border-strong:  #3a3a3a;

	--text-primary:   #ebebeb;
	--text-secondary: #b5b5b5;
	--text-muted:     #7a7a7a;
	--text-faint:     #555555;

	--accent:         #d97706;
	--accent-hover:   #f59e0b;
	--accent-soft:    rgba(217, 119, 6, 0.15);

	--success:        #22c55e;
	--info:           #38bdf8;
	--warning:        #facc15;
	--danger:         #ef4444;

	--radius-sm: 4px;
	--radius:    6px;
	--radius-lg: 10px;

	--shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
	--shadow:    0 4px 16px rgba(0,0,0,0.55);
	--shadow-lg: 0 12px 36px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; }

body {
	font-family: "Inter", "Segoe UI", "Tahoma", "Arial", "Helvetica", "sans-serif";
	font-size: 13px;
	line-height: 1.5;
	background-color: var(--bg-deep);
	background-image: none;
	color: var(--text-primary);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div#body {
	min-height: 100vh;
}

div#logo {
	border: 1px solid var(--border-base);
	border-bottom: none;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	width: 1350px;
	height: 450px;
	display: block;
	margin: 0 auto;
	background-image: url(logo.png);
	background-color: var(--bg-base);
	background-position: center;
	background-repeat: no-repeat;
}

div#menujobb { float: right; }

::placeholder                  { color: var(--text-muted); font-style: normal; opacity: 1; }
::-webkit-input-placeholder    { color: var(--text-muted); font-style: normal; }
:-ms-input-placeholder         { color: var(--text-muted); font-style: normal; }
::-moz-placeholder             { color: var(--text-muted); font-style: normal; opacity: 1; }

/* ---------------- Táblázatok ---------------- */

table {
	border-collapse: separate;
	border-spacing: 0;
	border: none !important;
}

table.main, table.mainouter {
	background: var(--bg-surface);
}

table.footer {
	background: var(--bg-base);
	border: 1px solid var(--border-base);
	border-top: none;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	margin-bottom: 16px;
}

table.bottom { background: transparent; }

td {
	border: 1px solid var(--border-faint);
	padding: 6px 8px;
}

td.embedded,
.filmajanlo-fejlec,
.tlistak-fejlec {
	background: linear-gradient(180deg, #1d1d1d 0%, #161616 100%);
	border: 1px solid var(--border-base);
	border-bottom: 2px solid var(--accent);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	margin: 0 auto;
	text-align: center;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-primary);
	font-weight: 600;
	padding: 10px 12px;
}

.filmajanlo-fejlec,
.tlistak-fejlec {
	max-width: 1310px;
	box-sizing: border-box;
	margin: 12px auto 0;
}

td.bottom { border: none; }

td.heading { font-weight: 600; color: var(--text-primary); }

td.text {
	text-align: left;
	background: var(--bg-base);
	border: 1px solid var(--border-faint);
	border-top: none;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	padding: 12px 14px;
}

td.tabla {
	width: 1274px;
	height: 12px;
	display: block;
	margin: 0 auto;
	padding-bottom: 5px;
	border: none;
	text-align: left;
}

td.comment {
	padding: 12pt;
	font-size: 13px;
	text-align: left;
	background: var(--bg-base);
}

td.colhead {
	font-weight: 600;
	color: var(--text-primary);
	background: linear-gradient(180deg, #1a1a1a 0%, #131313 100%);
	border-bottom: 1px solid var(--border-strong);
	padding: 8px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

td.rowhead {
	font-weight: 600;
	text-align: right;
	vertical-align: top;
	color: var(--text-secondary);
	background: var(--bg-base);
}

td.rowhead2 {
	padding: 6px 10px;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 13px;
	border: 1px solid var(--border-base);
}

td.title  { font-size: 16px; font-weight: 700; }

td.navigation {
	font-weight: 700;
	font-size: 16px;
	border: none;
}

td.clear {
	padding: 0;
	border: 0;
	background: transparent;
}

/* ---------------- Egyéb alap ---------------- */

hr {
	border: none;
	height: 1px;
	background: var(--border-base);
	margin: 14px 0;
}

p        { font-size: 13px; }
p.sub    { margin-bottom: 4pt; }

h1 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 12px 0 8px; }
h2 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 10px 0 6px; }

form { margin: 0; }

.sublink {
	font-style: italic;
	font-size: 13px;
	font-weight: normal;
	color: var(--text-secondary);
}

font.gray {
	color: var(--text-muted);
	text-decoration: none;
}

/* ---------------- Linkek ---------------- */

a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

a.index    { font-weight: 700; color: var(--text-primary); }
a.index:hover { color: var(--accent-hover); }

a.biglink  { font-weight: 700; font-size: 16px; }

a.altlink:link, a.altlink:visited {
	font-weight: 700;
	color: var(--success);
	text-decoration: none;
}
a.altlink:hover { color: var(--accent-hover); text-decoration: none; }

a.altlink_blue:link, a.altlink_blue:visited {
	font-weight: 700;
	color: var(--info);
	text-decoration: none;
}
a.altlink_blue:hover { color: var(--accent-hover); text-decoration: underline; }

a.altlink_green:link, a.altlink_green:visited {
	font-weight: 700;
	color: var(--success);
	text-decoration: none;
}
a.altlink_green:hover { text-decoration: underline; }

/* ---------------- Hangsúly + szövegszínek ---------------- */

.important { font-weight: 700; font-size: 14px; }
.red       { color: var(--danger); }
.yellow    { color: var(--warning); }
.green     { color: var(--success); }

/* ---------------- Form mezők ---------------- */

input, select, textarea {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	background: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border-base);
	border-radius: var(--radius-sm);
	padding: 7px 10px;
	outline: none;
	resize: none;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

select option { background: var(--bg-elevated); color: var(--text-primary); }

input:hover, select:hover, textarea:hover {
	border-color: var(--border-strong);
}

input:focus, select:focus, textarea:focus {
	background: var(--bg-input-focus);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="checkbox"], input[type="radio"] {
	width: auto;
	accent-color: var(--accent);
}

input[type="submit"], input[type="button"], input[type="reset"], button {
	cursor: pointer;
	background: linear-gradient(180deg, #262626 0%, #1a1a1a 100%);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	font-weight: 600;
	padding: 7px 16px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button:hover {
	background: linear-gradient(180deg, var(--accent) 0%, #b45f04 100%);
	border-color: var(--accent);
	color: #ffffff;
}
input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, button:active {
	transform: translateY(1px);
}

.btn {
	width: auto;
	height: auto;
	min-height: 30px;
}

/* ---------------- Apró helperek ---------------- */

.small { font-size: 11px; }
.big   { font-size: 16px; }

li { margin-top: 4px; margin-bottom: 4px; }
ul { margin-left: 16pt; margin-top: 0; margin-bottom: 0; }

img.border {
	border: 1px solid var(--border-base);
	border-radius: var(--radius-sm);
}

/* ---------------- Régi resize wrappers (admin/oldal-szerkesztő) ---------------- */

.isResizable, .yResizable {
	background: var(--bg-elevated);
	padding: 8px;
	font-size: 5em;
	box-shadow: var(--shadow);
	border: 1px solid var(--border-base);
	border-radius: var(--radius);
	overflow: hidden;
	resize: both;
	max-width: 960px;
	max-height: 720px;
}
.isResizable { width: 450px;  height: 263px; min-width: 450px; min-height: 263px; }
.yResizable  { width: 500px;  height: 280px; min-width: 500px; min-height: 280px; }

.y    { position: relative; width: 99%; height: 99%; }
.left { position: absolute; left: 5px; bottom: 5px; }

/* ---------------- Főmenü cellák ---------------- */

td.menu {
	border: 1px solid var(--border-base);
	background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 600;
	width: 100px !important;
	height: 33px;
	padding: 0;
	cursor: pointer;
	letter-spacing: 0.3px;
	text-align: center;
	vertical-align: middle;
	transition: background 0.15s ease, color 0.15s ease;
}
td.menu:hover {
	background: linear-gradient(180deg, var(--accent) 0%, #b45f04 100%);
	color: #ffffff;
	border-color: var(--accent);
}

td.menu-bal  { border-top-left-radius:  var(--radius); }
td.menu-jobb { border-top-right-radius: var(--radius); }

.menu2 { color: var(--text-primary); }

a.menu2 {
	font-size: 14px;
	color: var(--accent);
	text-shadow: none;
	margin-top: 0;
}
a.menu2:focus { color: var(--accent-hover); padding-top: 2px; }

/* ---------------- Scrollbar (Webkit + Firefox) ---------------- */

* {
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) var(--bg-base);
}
*::-webkit-scrollbar              { width: 10px; height: 10px; }
*::-webkit-scrollbar-track        { background: var(--bg-base); }
*::-webkit-scrollbar-thumb        { background: var(--border-strong); border-radius: var(--radius-sm); }
*::-webkit-scrollbar-thumb:hover  { background: var(--accent); }

/* ---------------- Régi (egyedi) osztályok kompatibilitás ---------------- */

.input_color { background: var(--bg-input); color: var(--text-primary); }
.password    { letter-spacing: 1px; }

/* Hagyományos "stat", "info", "err" boxok */
.info {
	background: rgba(56, 189, 248, 0.07);
	border: 1px solid rgba(56, 189, 248, 0.35);
	color: var(--info);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
}
.err {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.4);
	color: var(--danger);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
}

/* Bootstrap-szerű kártya wrapperek néhány új template-ből */
.card {
	background: var(--bg-elevated);
	border: 1px solid var(--border-base);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	margin-bottom: 12px;
}
.card-header {
	background: linear-gradient(180deg, #1d1d1d 0%, #161616 100%);
	border-bottom: 1px solid var(--border-base);
	padding: 10px 14px;
	font-weight: 600;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}
.card-body  { padding: 12px 14px; }

/* Bootstrap-szerű form helper a néhány template-ben */
.form-control, .form-control-sm, .form-control-file {
	display: inline-block;
	width: auto;
	max-width: 100%;
	background: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border-base);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-group { margin-bottom: 10px; }

.btn-primary {
	background: linear-gradient(180deg, var(--accent) 0%, #b45f04 100%);
	border-color: var(--accent);
	color: #ffffff;
}
.btn-primary:hover {
	background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
	border-color: var(--accent-hover);
}
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Néhány kontextusban használt általános osztály */
.bold   { font-weight: 700; }
.float  { float: left; }
.preview, .nfo, .hdr {
	background: var(--bg-base);
	border: 1px solid var(--border-faint);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
}

.box {
	background: var(--bg-elevated);
	border: 1px solid var(--border-base);
	border-radius: var(--radius);
	padding: 10px 12px;
}

/* Statisztika sorok (főoldali kis box) */
.stat-line   { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.stat-label  { color: var(--text-secondary); }
.stat-value  { color: var(--text-primary); font-weight: 600; }