/* Estilos mejorados y profesionales para el panel */
:root{
	--brand: #0d6efd;
	--muted: #6c757d;
	--surface: #ffffff;
	--bg: #f4f6fb;
}
html,body{height:100%;}
body { background:var(--bg); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#222; }

.container h1{ font-weight:600; letter-spacing: -0.5px; }
.card { box-shadow: 0 6px 18px rgba(22,28,45,0.06); border: none; border-radius: .6rem; background: var(--surface); }
.card-header { background: linear-gradient(90deg, rgba(13,110,253,0.06), rgba(13,110,253,0.02)); border-bottom: none; font-weight:600; }

/* Table styling */
.table thead th { border: 0; background: transparent; color: #444; font-weight:600; }
.table tbody td { vertical-align: middle; }
.table-striped>tbody>tr:nth-of-type(odd){ background: rgba(13,110,253,0.02); }
.table-hover>tbody>tr:hover{ background: rgba(13,110,253,0.04); }
.table-responsive { overflow: hidden; }

.badge-slug { background: #eef4ff; color: var(--brand); border:1px solid rgba(13,110,253,0.08); font-weight:600; }

/* Buttons */
.btn-primary, .btn-success { border-radius: .45rem; box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.btn-outline-primary { border-radius: .45rem; }

/* Pagination */
.pagination { justify-content: center; }
.page-link { border-radius: .35rem; }

/* Modal tweaks */
.modal-content { border-radius: .6rem; }

/* Header area */
.panel-header { display:flex; align-items:center; gap:16px; }
.panel-header .logo-placeholder{ width:48px; height:48px; background:linear-gradient(135deg,#e9f0ff,#f7fbff); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--brand); font-weight:700; }

/* Sidebar layout */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 260px;
	background: var(--surface);
	border-right: 1px solid rgba(0,0,0,0.04);
	padding: 1.25rem 0.75rem;
	box-shadow: 0 6px 24px rgba(22,28,45,0.06);
	transition: width 240ms ease, transform 240ms ease;
	z-index: 1050;
}
.sidebar .sidebar-brand { font-weight:700; font-size:1rem; }
.sidebar .sidebar-title { font-size:0.95rem; color:var(--brand); }
.sidebar-menu { margin-top:1.25rem; padding-left:0; }
.sidebar-item { margin: 0.25rem 0; }
.sidebar-link { display:block; padding:10px 12px; color:#333; border-radius:8px; text-decoration:none; }
.sidebar-link:hover, .sidebar-item.active .sidebar-link { background: rgba(13,110,253,0.06); color: var(--brand); }

.content-wrapper { transition: margin-left 240ms ease; margin-left: 0; }

/* Desktop layout: apply left margin only on larger screens */
@media (min-width: 769px) {
	.content-wrapper { margin-left: 260px; }
	/* Collapsed state on desktop only */
	#app-wrapper.collapsed .sidebar { width: 80px; }
	#app-wrapper.collapsed .content-wrapper { margin-left: 80px; }
	#app-wrapper.collapsed .sidebar .sidebar-title { display:none; }
	#app-wrapper.collapsed .sidebar .sidebar-link { display:flex; align-items:center; justify-content:center; padding:10px 0; }
}

/* Icon placeholder inside links */
.icon-placeholder { display:inline-flex; width:36px; height:36px; border-radius:8px; background: linear-gradient(135deg,#eef6ff,#f9fbff); margin-right:8px; vertical-align:middle; align-items:center; justify-content:center; }
.icon-placeholder svg { width:18px; height:18px; color:var(--brand); display:block; }
.sidebar-link .label { vertical-align:middle; }

/* When collapsed: hide logo and labels, center the icon placeholder */
#app-wrapper.collapsed .sidebar .logo-img { display:none; }
#app-wrapper.collapsed .sidebar .label { display:none; }
#app-wrapper.collapsed .sidebar .icon-placeholder { margin: 0 auto; display:inline-flex; align-items:center; justify-content:center; }

/* Responsive: hide sidebar by default on small screens */
@media (max-width: 768px) {
	.sidebar {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		transform: translateX(-100%);
		width: 260px;
		z-index: 2000;
	}
	#app-wrapper.collapsed .sidebar { transform: translateX(0); }
	.content-wrapper { margin-left: 0; }

	/* Backdrop when sidebar open on mobile */
	.sidebar-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.35);
		z-index: 1990;
		opacity: 0;
		transition: opacity 180ms ease;
	}
	.sidebar-backdrop.show { opacity: 1; }

	/* prevent body scroll when sidebar open */
	body.no-scroll { overflow: hidden; }
}


/* Logo image */
.logo-img {
	width:80px;
	height:80px;
	object-fit:contain;
	border-radius:10px;
	background:#fff;
	padding:8px;
	box-shadow: 0 4px 18px rgba(22,28,45,0.10);
	border: 1px solid rgba(0,0,0,0.04);
	flex-shrink: 0;
	display: block;
}

@media (max-width: 992px) {
	.logo-img { width:64px; height:64px; padding:6px; border-radius:8px; }
}

@media (max-width: 768px) {
	.logo-img { width:56px; height:56px; padding:5px; border-radius:8px; }
}

@media (max-width: 576px) {
	.logo-img { width:40px; height:40px; padding:4px; border-radius:6px; }
}

/* Small product page logo next to back button */
.product-logo { width:56px; height:56px; object-fit:contain; border-radius:8px; background:#fff; padding:6px; box-shadow: 0 4px 12px rgba(22,28,45,0.06); border:1px solid rgba(0,0,0,0.04); }

@media (max-width: 576px) {
	.product-logo { width:40px; height:40px; padding:4px; }
}


/* Small text helpers */
.text-muted-small{ color:var(--muted); font-size:0.9rem; }

@media (max-width:767px){
	.panel-header { flex-direction:column; align-items:flex-start; }
}

/* Responsive table: convert rows to cards on small screens */
@media (max-width: 768px) {
	.table thead { display: none; }
	.table tbody, .table tr, .table td { display: block; width: 100%; }
	.table tr { margin-bottom: 1rem; border-radius: .5rem; background: var(--surface); padding: .75rem; box-shadow: 0 6px 18px rgba(22,28,45,0.04); }
	.table td { padding: .35rem .5rem; border: 0; display: flex; justify-content: space-between; align-items: center; }
	.table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); margin-right: .5rem; flex: 0 0 40%; }
	.table td:nth-child(4)::before { flex-basis: 50%; }
	.table td .btn { white-space: nowrap; }
	.action-buttons { display:flex; gap:8px; }
	.action-buttons .btn { flex: 1 1 auto; }

	/* Modal full screen on mobile */
	.modal-dialog { max-width: 95%; margin: 1.5rem auto; }
}