/*
 Modern Sidebar (clean, animated)
 - Unified variable system (prefix --sp-)
 - Zero vertical shift collapse
 - Hover / active micro-interactions
 - Header + footer hidden when collapsed (including peek)
 - RTL aware via logical props + fallbacks
*/

:root, :root[data-sidebar-theme="light"] {
	--sp-sidebar-width: 250px;
	--sp-sidebar-collapsed-width: 64px;
	--sp-sidebar-top-offset: 45px;

	/* Base defaults (overridden by global palette below) */
	--sp-sidebar-bg: #ffffff;
	--sp-sidebar-border: #e5e7eb;
	--sp-sidebar-color: #374151;
	--sp-sidebar-color-muted: #6b7280;
	--sp-sidebar-accent: #1d4ed8; /* fallback */
	--sp-sidebar-hover-bg: #eff6ff; /* fallback */
	--sp-sidebar-active-bg: #dbeafe; /* fallback */
	--sp-accent-gradient: linear-gradient(135deg,#1d4ed8,#2563eb 55%,#3b82f6);
	--sp-hover-gradient: linear-gradient(135deg,#f0f7ff,#eaf6ff);
	--sp-sidebar-section-icon-bg: #f9fafb;

	/* Effects */
	--sp-sidebar-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px -6px rgba(0,0,0,.12);
	--sp-focus-ring: 0 0 0 2px var(--sp-sidebar-active-bg), 0 0 0 4px rgba(29,78,216,.35);
	--sp-active-ring: 0 0 0 1px #1d4ed8,0 0 0 4px rgba(29,78,216,.25);

	/* Sizing & spacing */
	--sp-sidebar-font-size: 0.92rem;
	--sp-section-gap: 0.75rem;
	--sp-item-pad-y: .45rem;
	--sp-item-pad-x: .65rem;
	--sp-header-pad: .45rem .6rem .4rem;

	/* Motion */
	--sp-transition: 230ms cubic-bezier(.4,0,.2,1);
	--sp-scale-spring: 340ms cubic-bezier(.34,1.56,.64,1);
}

:root[data-sidebar-theme="dark"] {
	--sp-sidebar-bg: #111827;
	--sp-sidebar-border: #1f2937;
	--sp-sidebar-color: #d1d5db;
	--sp-sidebar-color-muted: #9ca3af;
	--sp-sidebar-accent: var(--primary-color, #60a5fa);
	--sp-sidebar-hover-bg: rgba(52,152,219,0.18);
	--sp-sidebar-active-bg: rgba(52,152,219,0.30);
	--sp-hover-gradient: linear-gradient(135deg,#1f2937,#1e2939);
	--sp-sidebar-shadow: 0 2px 14px -2px rgba(0,0,0,.65);
}

/* Integrate with global primary palette (common-styles.css) */
:root {
	--sp-sidebar-accent: var(--primary-color, #3498db);
	--sp-sidebar-hover-bg: rgba(52,152,219,0.10);
	--sp-sidebar-active-bg: rgba(52,152,219,0.15); /* lightened for better readability */
	--sp-sidebar-active-outline: rgba(52,152,219,0.40);
	--sp-accent-gradient: linear-gradient(135deg,var(--primary-color,#3498db),var(--primary-dark,#2980b9) 55%,var(--primary-darker,#1a5276));
	--sp-hover-gradient: linear-gradient(135deg, rgba(52,152,219,0.08), rgba(52,152,219,0.14));
	--sp-focus-ring: 0 0 0 2px rgba(52,152,219,.45), 0 0 0 4px rgba(41,128,185,.30);
	--sp-active-ring: 0 0 0 1px var(--primary-color,#3498db),0 0 0 4px rgba(52,152,219,.28);
}

/* Base shell */
 .sidebar {
	position: fixed;
	top: var(--sp-sidebar-top-offset);
	inset-inline-start: 0;
	width: var(--sp-sidebar-width);
	height: calc(100vh - var(--sp-sidebar-top-offset));
	background: var(--sp-sidebar-bg);
	color: var(--sp-sidebar-color);
	font-size: var(--sp-sidebar-font-size);
	display: flex;
	flex-direction: column;
	padding: .55rem .75rem .75rem;
	border-inline-end: 1px solid var(--sp-sidebar-border);
	box-shadow: var(--sp-sidebar-shadow);
	z-index: 1000;
	overflow-y: auto;
	scrollbar-gutter: stable;
	transition: width var(--sp-transition), box-shadow var(--sp-transition), background-color var(--sp-transition);
	background-image: none; /* pure white */
}
html[dir="rtl"] .sidebar { inset-inline-start: auto; inset-inline-end: 0; border-inline-start: 1px solid var(--sp-sidebar-border); border-inline-end: none; }
/* Explicit class-based RTL fallback (when page dir may not be set early) */
.sidebar.sidebar-rtl { left:auto !important; right:0 !important; inset-inline-start:auto; inset-inline-end:0; border-inline-start:1px solid var(--sp-sidebar-border); border-inline-end:none; }
.sidebar.sidebar-rtl ~ .main-content { margin-left:0 !important; margin-right:var(--sp-sidebar-width); }
html.sidebar-collapsed .sidebar.sidebar-rtl ~ .main-content { margin-right:var(--sp-sidebar-collapsed-width); }


/* Scrollbar (branded) */
.sidebar::-webkit-scrollbar { width: 12px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sp-sidebar-accent); border: 3px solid var(--sp-sidebar-bg); border-radius: 24px; transition: background .25s ease, border-color .25s ease; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--primary-dark, var(--sp-sidebar-accent)); }
.sidebar { scrollbar-width: thin; scrollbar-color: var(--sp-sidebar-accent) transparent; }
.sidebar:not(.sidebar-ready) { transition: none !important; }

/* Header */
.sidebar-header { position: sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding: var(--sp-header-pad); background: linear-gradient(var(--sp-sidebar-bg) 80%,rgba(0,0,0,0)); z-index:2; }
.sidebar-header-title { font-size:.95rem; font-weight:600; letter-spacing:.5px; margin:0; background:linear-gradient(90deg,var(--sp-sidebar-color-muted),var(--sp-sidebar-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sidebar-toggle-btn { background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:.48rem .6rem; font-size:.75rem; color:#4b5563; display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; line-height:1; transition: background var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-scale-spring); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.sidebar-toggle-btn:hover { color:var(--sp-sidebar-accent); border-color:#94a3b8; background:#f8fafc; }
.sidebar-toggle-btn:active { transform:scale(.92); }
.sidebar-toggle-btn:focus-visible { outline:none; box-shadow: var(--sp-focus-ring); }

/* Sections */
.sidebar-section { display:flex; flex-direction:column; }
.sidebar-section + .sidebar-section { margin-top: var(--sp-section-gap); }
.sidebar-section-header { display:flex; align-items:center; gap:.55rem; padding:0 .55rem .5rem; min-height:1.55rem; user-select:none; }
.sidebar-section-title { margin:0; font-size:.63rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sp-sidebar-color-muted); opacity:.85; text-wrap: nowrap; text-overflow: ellipsis; white-space: nowrap;}
.section-icon { width:1.15rem; text-align:center; font-size:.95rem; opacity:.9; transition: color var(--sp-transition), background var(--sp-transition); }

/* Nav list */
.sidebar-nav { list-style:none; margin:0; padding:0; }
.sidebar-link { --gap:.75rem; display:flex; flex-direction:row-reverse; align-items:center; gap:var(--gap); padding: var(--sp-item-pad-y) var(--sp-item-pad-x); border-radius:14px; color:var(--sp-sidebar-color); text-decoration:none; font-weight:500; line-height:1.1; position:relative; isolation:isolate; overflow:hidden; outline:none; }
.sidebar-link:before { content:""; position:absolute; inset:0; background:var(--sp-hover-gradient); opacity:0; transition:opacity var(--sp-transition); }
.sidebar-link:hover:before { opacity:1; }
.sidebar-link:hover { color:var(--sp-sidebar-accent); }
.sidebar-link:hover .sidebar-link-label { color:var(--sp-sidebar-accent); }
.sidebar-link:focus-visible { box-shadow: var(--sp-active-ring); }
.sidebar-link.active { color:var(--sp-sidebar-accent); font-weight:500; box-shadow: inset 0 0 0 1px var(--sp-sidebar-active-outline); }
.sidebar-link.active:before { opacity:1; background:var(--sp-sidebar-active-bg); }
/* Removed vertical accent bar for active links per request */
/* .sidebar-link.active:after { } */
html[dir="rtl"] .sidebar-link.active:after { display:none; }
.sidebar-icon { width:1.25rem; text-align:center; font-size:1rem; opacity:.92; transition: transform var(--sp-scale-spring), opacity var(--sp-transition), color var(--sp-transition); }
.sidebar-link:hover .sidebar-icon { opacity:1; color:var(--sp-sidebar-accent); transform:scale(1.06); }
.sidebar-link:active .sidebar-icon { transform:scale(.84); }
.sidebar-link.active .sidebar-icon { transform:scale(1.08); color:var(--sp-sidebar-accent); }
.sidebar-link-label { flex:1; min-width:0; }

/* Stacked composite icon - in common styles*/
/* .icon-stack { position:relative; width:1.25rem; height:1.05rem; display:inline-flex; align-items:center; justify-content:center; }
.icon-stack .icon-base { font-size:1rem; }
.icon-stack .icon-overlay { position:absolute; bottom:-2px; inset-inline-end:-2px; font-size:.55rem; background:var(--sp-sidebar-bg); border-radius:50%; line-height:1; padding:1px; box-shadow:0 0 0 1px var(--sp-sidebar-bg); }
html[dir="rtl"] .icon-stack .icon-overlay { inset-inline-end:auto; inset-inline-start:-2px; } */

/* Separator */
.sidebar-section-separator { height:1px; margin: 0px; border:0; background:linear-gradient(90deg,transparent,var(--sp-sidebar-border) 25%,var(--sp-sidebar-border) 75%,transparent); }

/* Footer */
.sidebar-footer { display: none; margin-top:auto; padding:.65rem .55rem .55rem; font-size:.64rem; border-top:1px solid var(--sp-sidebar-border); color:var(--sp-sidebar-color-muted); text-align:center; line-height:1.2; }

/* Collapsed */
.sidebar.is-collapsed,
html.sidebar-collapsed .sidebar { width:var(--sp-sidebar-collapsed-width); }
.sidebar.is-collapsed .sidebar-header,
html.sidebar-collapsed .sidebar .sidebar-header,
.sidebar.is-collapsed .sidebar-footer,
html.sidebar-collapsed .sidebar .sidebar-footer { display:none; }
/* .sidebar.is-collapsed,
html.sidebar-collapsed .sidebar { } reserve space for floating toggle */
.sidebar.is-collapsed .sidebar-link,
html.sidebar-collapsed .sidebar .sidebar-link { justify-content:center; gap:0; padding: var(--sp-item-pad-y) .55rem; }
.sidebar.is-collapsed .sidebar-link-label,
html.sidebar-collapsed .sidebar .sidebar-link-label { position:absolute; left:-1000rem; top:auto; }
html[dir="rtl"] .sidebar.is-collapsed .sidebar-link-label,
html.sidebar-collapsed[dir="rtl"] .sidebar .sidebar-link-label { right:-1000rem; left:auto; }
.sidebar.is-collapsed .sidebar-section-header,
html.sidebar-collapsed .sidebar .sidebar-section-header { justify-content:center; padding:0 .25rem .55rem; }
.sidebar.is-collapsed .sidebar-section-title,
html.sidebar-collapsed .sidebar .sidebar-section-title { position:absolute; left:-1000rem; }
html[dir="rtl"] .sidebar.is-collapsed .sidebar-section-title,
html.sidebar-collapsed[dir="rtl"] .sidebar .sidebar-section-title { right:-1000rem; left:auto; }
/* Collapsed section icon refined: fixed square prevents background shift */
.sidebar.is-collapsed .section-icon,
html.sidebar-collapsed .sidebar .section-icon { background:var(--sp-sidebar-section-icon-bg); border:1px solid var(--sp-sidebar-border); border-radius:9px; width:38px; height:38px; padding:5px; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.05); }

/* Floating toggle (always visible) */
.sidebar-toggle-floating { position:absolute; top:.45rem; inset-inline-end:.55rem; z-index:1200; display:block; }
.sidebar-toggle-floating .sidebar-toggle-btn { padding:.45rem .55rem; pointer-events:auto; width: max-content;}

/* Prevent overlay from blocking floating toggle */
.sidebar-toggle-floating { pointer-events:none; }
.sidebar-toggle-floating .sidebar-toggle-btn { pointer-events:auto; }

/* Ensure text sits above gradient overlay */
.sidebar-link-label { position:relative; z-index:1; }

/* Force RTL fallback class (added via script if needed) */
html.sidebar-force-rtl #appSidebar { right:0 !important; left:auto !important; }

/* Peek (hover enlarge) */
.sidebar.is-collapsed.is-peek,
html.sidebar-collapsed .sidebar.is-peek { width:var(--sp-sidebar-width); }
.sidebar.is-collapsed.is-peek .sidebar-link,
html.sidebar-collapsed .sidebar.is-peek .sidebar-link { justify-content:flex-start; gap:var(--gap); }
.sidebar.is-collapsed.is-peek .sidebar-link-label,
html.sidebar-collapsed .sidebar.is-peek .sidebar-link-label { position:static; }
.sidebar.is-collapsed.is-peek .sidebar-section-header,
html.sidebar-collapsed .sidebar.is-peek .sidebar-section-header { justify-content:flex-start; }
.sidebar.is-collapsed.is-peek .sidebar-section-title,
html.sidebar-collapsed .sidebar.is-peek .sidebar-section-title { position:static; }
.sidebar.is-collapsed.is-peek .section-icon,
html.sidebar-collapsed .sidebar.is-peek .section-icon { background:none; border:0; padding:0; font-size:1rem; box-shadow:none; }
/* Keep header/footer hidden even when peeking (explicit) */
.sidebar.is-collapsed.is-peek .sidebar-header,
html.sidebar-collapsed .sidebar.is-peek .sidebar-header,
.sidebar.is-collapsed.is-peek .sidebar-footer,
html.sidebar-collapsed .sidebar.is-peek .sidebar-footer { display:none; }

/* RTL specifics */
/* Text first then icon (row-reverse) for all locales */
html[dir="rtl"] .sidebar-link { flex-direction:row-reverse; }
html[dir="rtl"] .sidebar-section-header { flex-direction:row-reverse; }
/* RTL: right-align section headers & link labels */
html[dir="rtl"] .sidebar-section-header { justify-content:flex-end; }
html[dir="rtl"] .sidebar-section-header .sidebar-section-title { text-align:right; }
html[dir="rtl"] .sidebar-link-label { text-align:right; }
html[dir="rtl"] .sidebar.is-collapsed.is-peek .sidebar-section-header { justify-content:flex-end; }

.sidebar.is-collapsed.is-peek .sidebar-toggle-floating { visibility: visible !important; }
.sidebar.is-collapsed .sidebar-toggle-floating { visibility: hidden !important; }

.sidebar-link-label { text-wrap: nowrap !important; text-overflow: ellipsis !important;}

/* Content offset */
@media (min-width:768px) {
	.main-content { transition:margin var(--sp-transition); }
	html:not([dir="rtl"]) .main-content { margin-left: var(--sp-sidebar-width); }
	html[dir="rtl"] .main-content { margin-right: var(--sp-sidebar-width); }
	html.sidebar-collapsed:not([dir="rtl"]) .main-content { margin-left: var(--sp-sidebar-collapsed-width); }
	html.sidebar-collapsed[dir="rtl"] .main-content { margin-right: var(--sp-sidebar-collapsed-width); margin-left:0; }
	/* Fallback when using sidebar-rtl class without html dir attribute */
	.sidebar.sidebar-rtl ~ .main-content { margin-left:0; margin-right:var(--sp-sidebar-width); }
	html.sidebar-collapsed .sidebar.sidebar-rtl ~ .main-content { margin-right:var(--sp-sidebar-collapsed-width); }
}

/* Mobile drawer behavior (<768px) */
@media (max-width:767.98px) {
	.sidebar { 
		transform: translateX(-105%);
		inset-inline-start:0;
		width: 78%;
		max-width: 300px;
		top: var(--sp-sidebar-top-offset);
		height: calc(100vh - var(--sp-sidebar-top-offset));
		transition: transform var(--sp-transition), box-shadow var(--sp-transition);
		border-inline-end: 1px solid var(--sp-sidebar-border);
	}
	html[dir="rtl"] .sidebar { transform: translateX(105%); }
	.sidebar.mobile-open { transform: translateX(0); box-shadow: 0 4px 24px -4px rgba(0,0,0,.25); }
	html[dir="rtl"] .sidebar.mobile-open { transform: translateX(0); }
	.sidebar-toggle-floating { display:none; }
	.sidebar.is-collapsed { width: var(--sp-sidebar-width); padding-top:.75rem; }
	.main-content { margin:0 !important; }
	html.sidebar-collapsed .main-content { margin:0 !important; }
	body.no-scroll { overflow:hidden; }
	.sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index:999; }
	.sidebar-backdrop[hidden] { display:none; }
	.sidebar-mobile-trigger { position:fixed; top: .55rem; inset-inline-start:.55rem; z-index:1100; background:#ffffff; border:1px solid #d1d5db; border-radius:8px; padding:.5rem .55rem; display:inline-flex; flex-direction:column; gap:4px; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.08); }
	html[dir="rtl"] .sidebar-mobile-trigger { inset-inline-start:auto; inset-inline-end:.55rem; }
	.sidebar-mobile-trigger .bar { width:20px; height:2px; background:#374151; border-radius:1px; transition: transform var(--sp-transition), opacity var(--sp-transition); }
	.sidebar.mobile-open ~ .sidebar-mobile-trigger .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.sidebar.mobile-open ~ .sidebar-mobile-trigger .bar:nth-child(2) { opacity:0; }
	.sidebar.mobile-open ~ .sidebar-mobile-trigger .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .sidebar, .sidebar * { transition:none !important; } }

/* Print */
@media print { .sidebar, .sidebar-toggle-btn { display:none !important; } }