/* ==========================================================================
   Sanimix admin - egységes narancs design (2026-09-11)
   Réteg a meglévő Inspinia/Bootstrap 3 sablon (style.css) fölött - semmit
   nem ír át abban, csak felülcímez. Kizárólag vizuális réteg: szín, forma,
   árnyék, tipográfia, átmenet. Funkciót/JS-t nem érint.
   Csak az !important-tel jelölt szín-jellegű tulajdonságok (background,
   border-color, box-shadow, color) írnak felül szándékosan magas
   specificitású skin-szabályokat - elrendezési tulajdonságot (width,
   padding, display, position) SOHA nem érint !important-tel.
   ========================================================================== */

:root {
	--sm-orange: #F68B1F;
	--sm-orange-dark: #D9740A;
	--sm-orange-darker: #B8620A;
	--sm-orange-tint: #FDEEDC;
	--sm-orange-tint-strong: #FBE0BF;

	--sm-ink: #2b2420;
	--sm-ink-light: #3a322c;
	--sm-ink-lighter: #4a4038;

	--sm-bg: #f7f5f2;
	--sm-card-bg: #ffffff;
	--sm-border: #ece6de;
	--sm-border-strong: #ddd3c6;

	--sm-text: #4c4640;
	--sm-text-muted: #8a8177;
	--sm-heading: #2b2420;

	--sm-shadow-sm: 0 1px 2px rgba(43, 36, 32, 0.06);
	--sm-shadow: 0 2px 10px rgba(43, 36, 32, 0.08);
	--sm-shadow-lg: 0 8px 24px rgba(43, 36, 32, 0.14);

	--sm-radius: 8px;
	--sm-radius-sm: 5px;
}

/* --------------------------------------------------------------------
   Alap / tipográfia
   -------------------------------------------------------------------- */

body {
	background: var(--sm-bg) !important;
	color: var(--sm-text);
}

.wrapper-inner {
	background: var(--sm-bg) !important;
	padding: 22px 28px 40px !important;
}

.page-wrapper {
	background: var(--sm-bg) !important;
}

body.skin5 .wrapper-inner h2 {
	color: var(--sm-heading) !important;
	font-weight: 700;
}

.breadcrumb {
	background: transparent;
	padding-left: 0;
	margin-bottom: 22px;
}

.breadcrumb h2 {
	font-weight: 700 !important;
	font-size: 22px;
	color: var(--sm-heading);
	margin: 0 0 6px !important;
}

.breadcrumb a {
	color: var(--sm-orange-dark);
}

.breadcrumb i {
	color: var(--sm-text-muted);
}

::selection {
	background: var(--sm-orange-tint-strong);
}

/* modern, vékony scrollbar - csak webkit alapú böngészőkben (Chrome/Edge) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: #d8cfc2;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--sm-orange);
}

/* --------------------------------------------------------------------
   Oldalsó navigáció (sidebar)
   -------------------------------------------------------------------- */

.navbar-static-left,
body.fixed-sidebar .navbar-static-left {
	background: var(--sm-ink) !important;
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.navbar-static-left .userbox {
	background-image: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-bottom: 18px;
	padding-top: 20px;
}

.userbox .userpicture {
	box-shadow: 0 0 0 3px var(--sm-orange);
}

.userbox .usertext h2 {
	color: #fff !important;
	font-weight: 600;
}

.userbox .usertext div {
	color: var(--sm-orange-tint) !important;
}

.userbox .usertext div:hover {
	color: var(--sm-orange) !important;
}

.userbox .user-profile-box {
	box-shadow: var(--sm-shadow-lg);
	border-top: 3px solid var(--sm-orange);
}

.nav > li > a {
	color: #c9beb2 !important;
	border-left: 4px solid transparent !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nav > li > a > i {
	color: #a89985;
	transition: color .15s ease;
	width: 20px;
	text-align: center;
}

body.skin5 .nav > li > a:hover,
.nav > li > a:hover {
	background-color: var(--sm-ink-light) !important;
	border-left: 4px solid var(--sm-orange) !important;
	color: #fff !important;
}

.nav > li > a:hover > i {
	color: var(--sm-orange);
}

.nav > li.active > a {
	background-color: var(--sm-ink-light) !important;
	border-left: 4px solid var(--sm-orange) !important;
	color: #fff !important;
}

.nav > li.active > a > i {
	color: var(--sm-orange);
}

body.skin5 .nav > li > .almenu,
.nav > li > .almenu {
	background-color: var(--sm-ink-light) !important;
	border-left: 4px solid var(--sm-orange-darker) !important;
}

.nav > li > .almenu a {
	color: #c9beb2 !important;
	transition: color .15s ease, padding-left .15s ease;
}

.nav > li > .almenu a:hover {
	color: #fff !important;
	padding-left: 4px;
}

.nav > li .menu-label {
	background-color: var(--sm-orange) !important;
	border-color: var(--sm-orange) !important;
}

body.min-menu .nav > li > .almenu,
body.min-menu-open .nav > li > .almenu {
	box-shadow: var(--sm-shadow-lg);
	border-radius: 0 var(--sm-radius-sm) var(--sm-radius-sm) 0;
}

.navbar-header .menubar button {
	background: var(--sm-orange) !important;
	border: 1px solid var(--sm-orange) !important;
	transition: background-color .15s ease;
}

.navbar-header .menubar:hover button,
.navbar-header .menubar button:hover {
	background: var(--sm-orange-dark) !important;
	border-color: var(--sm-orange-dark) !important;
}

/* --------------------------------------------------------------------
   Felső navbar / fejléc
   -------------------------------------------------------------------- */

.navbar-fixed-top, .navbar-static-top {
	background: #ffffff !important;
	border-bottom: 3px solid var(--sm-orange) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.navbar-top-links .wellcome {
	color: var(--sm-text);
}

.navbar-top-links li i {
	color: var(--sm-orange-dark);
}

.border-top {
	border-top: 3px solid var(--sm-orange) !important;
}

/* --------------------------------------------------------------------
   Gombok
   -------------------------------------------------------------------- */

.btn {
	border-radius: var(--sm-radius-sm);
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary,
body.skin5 .btn-primary,
.login-container .btn-primary,
.remind-password-container .btn-primary {
	background-color: var(--sm-orange) !important;
	border-color: var(--sm-orange) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
	background-color: var(--sm-orange-dark) !important;
	border-color: var(--sm-orange-dark) !important;
}

.btn-primary:active,
.btn-primary.active {
	background-color: var(--sm-orange-darker) !important;
	border-color: var(--sm-orange-darker) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn.focus,
.btn:focus {
	box-shadow: 0 0 0 3px var(--sm-orange-tint-strong);
	outline: none;
}

.btn-default {
	background-color: #fff;
	border-color: var(--sm-border-strong);
	color: var(--sm-text);
}

.btn-default:hover {
	background-color: var(--sm-bg);
	border-color: var(--sm-orange);
	color: var(--sm-orange-dark);
}

.btn-success:hover { filter: brightness(0.95); }
.btn-danger:hover { filter: brightness(0.95); }
.btn-info:hover { filter: brightness(0.95); }
.btn-warning:hover { filter: brightness(0.95); }

.listbtn {
	border-radius: var(--sm-radius-sm);
}

.button-box {
	background-color: var(--sm-bg) !important;
	border-top: 1px solid var(--sm-border);
}

/* --------------------------------------------------------------------
   Kártyák / panelek (form-content, szoveg-doboz)
   -------------------------------------------------------------------- */

.form-content {
	background-color: var(--sm-card-bg) !important;
	border: 1px solid var(--sm-border) !important;
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow);
	padding: 24px 26px;
	margin-bottom: 22px;
}

.form-group {
	margin-bottom: 18px;
}

.form-group label {
	margin-bottom: 6px;
	font-weight: 600 !important;
}

.tab-title {
	background-image: none !important;
	border-bottom: 2px solid var(--sm-border) !important;
	border-left: 4px solid var(--sm-orange);
	padding: 8px 0 10px 12px !important;
	margin: 0 0 18px 0 !important;
	font-size: 15px;
	font-weight: 700;
	color: var(--sm-heading);
}

.form-content-button-group {
	background: var(--sm-card-bg);
	padding: 4px;
}

.form-group-title {
	background-image: none !important;
	border-bottom: 2px solid var(--sm-border) !important;
	border-left: 4px solid var(--sm-orange);
	padding: 8px 0 10px 12px !important;
	margin: 0 0 18px 0 !important;
	font-size: 15px;
	font-weight: 700;
	color: var(--sm-heading);
	letter-spacing: .2px;
}

.form-content .form-group-title:first-child {
	margin-top: 0 !important;
}

.szoveg-doboz {
	background: var(--sm-card-bg) !important;
	border: 1px solid var(--sm-border) !important;
	border-top: 3px solid var(--sm-orange) !important;
	box-shadow: var(--sm-shadow);
}

.szoveg-doboz .title {
	color: var(--sm-heading);
	border-bottom: 1px solid var(--sm-border);
}

.szoveg-doboz .doboz-content {
	overflow-y: auto;
}

.k_stat_box {
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-sm);
	transition: box-shadow .15s ease, border-color .15s ease;
}

.k_stat_box:hover {
	border-color: var(--sm-orange);
	box-shadow: var(--sm-shadow-sm);
}

/* uj_termek.php és hasonló, sok szekciós oldalak - vizuálisan különálló
   kártyák szekciónként (lásd .form-section wrapper a sablonban) */
.form-section {
	background-color: var(--sm-card-bg);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow-sm);
	padding: 18px 20px;
	margin-bottom: 20px;
}

.form-section:last-child {
	margin-bottom: 0;
}

.form-section .form-group-title {
	margin: -18px -20px 18px -20px !important;
	padding: 14px 20px 14px 16px !important;
	background-color: var(--sm-orange-tint) !important;
	border-bottom: 1px solid var(--sm-border) !important;
	border-radius: var(--sm-radius) var(--sm-radius) 0 0;
}

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

.table-responsive {
	border: 1px solid var(--sm-border) !important;
	border-radius: var(--sm-radius-sm);
}

.dataTables_wrapper {
	background: var(--sm-card-bg) !important;
	border-radius: var(--sm-radius);
}

.dataTables_wrapper .col-sm-6 {
	background: var(--sm-ink) !important;
	color: #fff !important;
	border-radius: var(--sm-radius-sm);
}

.dataTables_wrapper .col-sm-6 label {
	color: #e8dfd3;
}

body.skin5 .dataTables_wrapper thead,
.dataTables_wrapper thead,
tfoot,
.dataTables_wrapper tfoot {
	background: var(--sm-orange-tint) !important;
	color: var(--sm-heading) !important;
}

.dataTables_wrapper th {
	border: 1px solid var(--sm-border) !important;
	color: var(--sm-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .3px;
	padding: 10px 12px !important;
}

.dataTables_wrapper td {
	border: 1px solid var(--sm-border) !important;
	padding: 9px 12px !important;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
	padding: 10px 20px 10px 12px !important;
}

.dataTables_wrapper .odd {
	background: #fff !important;
}

.dataTables_wrapper .even {
	background: #fbf9f6 !important;
}

.dataTables_wrapper tr:hover td {
	background-color: var(--sm-orange-tint) !important;
}

table.dataTable thead .sorting:hover,
table.dataTable thead .sorting_asc:hover,
table.dataTable thead .sorting_desc:hover {
	background-color: var(--sm-orange-tint-strong) !important;
}

body.skin5 .pagination > .active > a,
.pagination > .active > a,
.pagination > .active > span {
	background-color: var(--sm-orange) !important;
	border-color: var(--sm-orange) !important;
}

.pagination > li > a,
.pagination > li > span {
	color: var(--sm-orange-dark);
}

.pagination > li > a:hover {
	background-color: var(--sm-orange-tint);
	border-color: var(--sm-orange);
}

/* egyszerű (nem dataTables) összegző táblázatok, pl. rendeles-reszletek.php */
.table {
	background: var(--sm-card-bg);
}

.table > thead > tr > th {
	background: var(--sm-orange-tint);
	color: var(--sm-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .3px;
	border-bottom: 1px solid var(--sm-border) !important;
	padding: 10px 12px !important;
}

.table > tbody > tr > td,
table[width] > tbody > tr > td,
table[width] tr > td {
	border-top: 1px solid var(--sm-border) !important;
	padding: 9px 12px !important;
}

table[width] {
	width: 100% !important;
	border-collapse: collapse;
}

table[width] tr:first-child th {
	background: var(--sm-orange-tint);
	color: var(--sm-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .3px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--sm-border);
}

table[width] tr:last-child td {
	font-weight: 700;
	border-top: 2px solid var(--sm-orange);
}

.form-table {
	width: 100%;
	border-collapse: collapse;
}

.form-table thead th {
	background: var(--sm-orange-tint);
	color: var(--sm-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .3px;
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--sm-border);
}

.form-table tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--sm-border);
	vertical-align: middle;
}

.form-table tbody tr:hover td {
	background-color: var(--sm-orange-tint);
}

/* --------------------------------------------------------------------
   Fülek (nav-tabs) - pl. sajat_adatok, uj_felhasznalo
   -------------------------------------------------------------------- */

.nav-tabs > li > a {
	border-radius: var(--sm-radius-sm) var(--sm-radius-sm) 0 0;
}

.nav-tabs > li > a:hover {
	border-color: var(--sm-orange-tint-strong);
	background-color: var(--sm-orange-tint);
}

body.skin5 .nav-tabs > li.active > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background-color: var(--sm-orange) !important;
	border-color: var(--sm-orange) !important;
	color: #fff !important;
}

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

.form-control {
	border-color: var(--sm-border-strong);
	border-radius: var(--sm-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
	border-color: var(--sm-orange) !important;
	box-shadow: 0 0 0 3px var(--sm-orange-tint-strong) !important;
}

.form-group-help {
	color: var(--sm-orange-dark) !important;
}

/* csak-olvasható "címke: érték" sorok (pl. rendelés/vásárló részletező oldalak) */
.form-text {
	border-bottom: 1px solid var(--sm-border) !important;
	padding: 6px 0;
}

.form-text label {
	color: var(--sm-text-muted);
	font-weight: 600 !important;
}

.form-text .form-group-text {
	color: var(--sm-heading);
	font-weight: 500;
}

.form-group label {
	color: var(--sm-heading);
}

/* onoffswitch - modern pill kapcsolóvá alakítva (a régi BE/KI-szöveges
   verzió apró volt és a style.css egyik duplikált szabályában elgépelés is
   volt: "idth: 200%" a "width: 200%" helyett, emiatt élesen összement).
   A DOM/checkbox-logika változatlan, csak a megjelenés cserélve. */
.onoffswitch {
	width: 44px !important;
	height: 24px !important;
}

.onoffswitch-label {
	height: 24px !important;
	border: none !important;
	border-radius: 24px !important;
	background-color: #d8cfc2 !important;
	overflow: hidden;
	position: relative;
	transition: background-color .2s ease;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
	content: "" !important;
	width: 0 !important;
	padding: 0 !important;
}

.onoffswitch-switch {
	top: 3px !important;
	bottom: auto !important;
	left: 3px !important;
	right: auto !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(43, 36, 32, 0.35);
	transition: left .2s ease;
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: var(--sm-orange) !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	left: 23px !important;
}

/* --------------------------------------------------------------------
   Badge / label
   -------------------------------------------------------------------- */

.label-primary {
	background-color: var(--sm-orange) !important;
}

.menu-label {
	box-shadow: var(--sm-shadow-sm);
}

/* --------------------------------------------------------------------
   Bejelentkezés
   -------------------------------------------------------------------- */

.login-container, .remind-password-container {
	background: var(--sm-ink) !important;
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow-lg);
}

.login-logo {
	color: #fff;
}