/* CSS stilovi za Klub HUB aplikaciju - Prodajni Mindset 2025 */

/* CSS varijable za moderni dizajn 2025 - Dark Mode (default) */
:root {
    /* Osnovne boje */
    --primary-color: #C70000;
    --white: #FFFFFF;
    --dark-bg: #181818;
    --accent: #FF00006B;
    --primary-hover: #a00000;
    --primary-rgb: 199, 0, 0;
    --gradient-primary: linear-gradient(135deg, #c70000, #a00000);
    --gradient-secondary: linear-gradient(135deg, #d60000, #8f0000);
    
    /* Dark mode varijable */
    --background-dark: var(--dark-bg);
    --background-secondary: #1a1a1a;
    --background-light: #2a2a2a;
    --background-card: rgba(26, 26, 26, 0.9);
    --background-glass: rgba(255, 255, 255, 0.05);
    
    /* Tekst */
    --text-primary: var(--white);
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --text-accent: #f0f0f0;
    --text-color: var(--text-primary);
    
    /* Status boje */
    --success-color: #28a745;
    --success-light: rgba(40, 167, 69, 0.1);
    --warning-color: #ffc107;
    --warning-light: rgba(255, 193, 7, 0.1);
    --error-color: var(--primary-color);
    --error-light: rgba(199, 0, 0, 0.1);
    --info-color: #17a2b8;
    --info-light: rgba(23, 162, 184, 0.1);
    
    /* Efekti */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --box-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --transition: all 0.3s ease;
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    --card-bg: var(--background-card);
    --input-bg: var(--background-light);
    --border-color: var(--glass-border);
    --dashboard-image-overlay-start: rgba(17, 17, 17, 0.92);
    --dashboard-image-overlay-end: rgba(17, 17, 17, 0.72);
    --dashboard-article-overlay-start: rgba(17, 17, 17, 0.86);
    --dashboard-article-overlay-end: rgba(17, 17, 17, 0.62);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
}

/* Light Mode varijable */
[data-theme="light"] {
    --background-dark: var(--white);
    --background-secondary: #f8f9fa;
    --background-light: #e9ecef;
    --background-card: rgba(255, 255, 255, 0.9);
    --background-glass: rgba(24, 24, 24, 0.05);
    
    --text-primary: var(--dark-bg);
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-accent: #343a40;
    --text-color: var(--text-primary);
    
    --glass-bg: rgba(24, 24, 24, 0.05);
    --glass-border: rgba(24, 24, 24, 0.1);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --card-bg: var(--background-card);
    --input-bg: var(--background-light);
    --border-color: var(--glass-border);
    --dashboard-image-overlay-start: rgba(255, 255, 255, 0.44);
    --dashboard-image-overlay-end: rgba(255, 255, 255, 0.24);
    --dashboard-article-overlay-start: rgba(255, 255, 255, 0.62);
    --dashboard-article-overlay-end: rgba(255, 255, 255, 0.42);
    
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Light theme dashboard overlays: keep text readable on bright image overlays */
[data-theme="light"] .dashboard .main-content .events-list .event-date {
    color: #111 !important;
}

[data-theme="light"] .dashboard .main-content .events-list .event-title,
[data-theme="light"] .dashboard .main-content .events-list .event-organizer,
[data-theme="light"] .dashboard .main-content .events-list .event-time,
[data-theme="light"] .dashboard .main-content .articles-content-list .content-item-title a,
[data-theme="light"] .dashboard .main-content .articles-content-list .content-item-meta {
    color: #111 !important;
}

.dashboard .main-content .articles-content-list {
    gap: 10px;
}

.dashboard .main-content .article-highlight-item {
    border-radius: 10px;
    padding: 14px 14px;
    min-height: 112px;
    display: flex;
    align-items: flex-end;
    border: 1px solid var(--glass-border);
}

.dashboard .main-content .article-highlight-content {
    width: 100%;
}

.dashboard .main-content .article-highlight-item .content-item-title {
    margin-bottom: 6px;
    font-size: 1.08rem;
    line-height: 1.25;
}

.dashboard .main-content .article-highlight-item .content-item-title a {
    text-decoration: none;
    font-weight: 700;
}

.dashboard .main-content .article-highlight-item .content-item-meta {
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* Reset i osnovni stilovi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--background-dark);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: auto;
    position: relative;
}

.main-content {
    overflow-x: auto;
}

/* Globalna pravila za naslove (poboljšana čitljivost u light temi) */
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
}

/* Moderni scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Moderni sidebar */
.sidebar {
    background: var(--background-secondary);
    border-right: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    z-index: 1000;
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.sidebar-fab {
	position: fixed;
	left: 12px;
	top: 80px;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--background-secondary);
	border: 1px solid var(--glass-border);
	color: var(--text-primary);
	cursor: pointer;
	box-shadow: var(--box-shadow);
	transition: var(--transition);
}

.sidebar-fab:hover {
	background: var(--primary-color);
	color: var(--white);
	border-color: var(--primary-color);
}

.sidebar-inline-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 var(--spacing-md);
	margin-right: var(--spacing-md);
	background: var(--background-light);
	color: var(--text-primary);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
}

.sidebar-inline-toggle:hover {
	background: var(--primary-color);
	color: var(--white);
	border-color: var(--primary-color);
}

.sidebar .sidebar-controls .btn {
	height: 28px;
	padding: 0 var(--spacing-md);
	font-size: 0.85rem;
}

.sidebar-logo {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--glass-border);
}

.sidebar-logo h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.sidebar-logo p {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Moderna navigacija */
.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    position: relative;
    font-weight: 500;
}

.nav-link.nav-home {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.mobile-nav .nav-link.nav-home {
    padding: 0.55rem 1.25rem;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    transition: var(--transition);
    z-index: -1;
}

.nav-link:hover::before {
    left: 0;
}

.nav-link:hover {
    background: var(--background-light);
    color: var(--text-primary);
    transform: translateX(4px);
}

.nav-link.active {
    background: var(--primary-color);
    color: var(--white);
    transform: translateX(4px);
    box-shadow: none;
    border-right: none;
}

.nav-link.active::before,
.nav-link.active::after {
    display: none;
}

.grid-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 1rem;
    min-height: 120px;
    text-align: center;
    transition: var(--transition);
}

.grid-link i {
    font-size: 1.5rem;
}

.nav-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* Moderni header */
.header {
    background: var(--background-secondary);
    border-bottom: 1px solid var(--glass-border);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-left: 280px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-lg);
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--glass-shadow);
}

.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.benefits-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-lg);
}

.benefits-header .page-title {
    margin: 0 0 6px;
    font-size: 2rem;
    color: var(--text-primary);
}

.benefits-header .page-subtitle {
    margin: 0;
    color: var(--text-secondary);
}

.benefits-filters {
    margin-bottom: var(--spacing-lg);
}

.benefits-filter-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.benefits-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.benefits-filter-item input,
.benefits-filter-item select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--background-light);
    color: var(--text-primary);
}

.benefits-filter-item.checkbox {
    display: flex;
    align-items: center;
}

.benefits-filter-item.checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.benefits-filter-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.benefit-card {
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: var(--glass-shadow);
}

.benefit-card-header {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    align-items: center;
}

.benefit-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0.2rem 0;
}

.benefit-logo img {
    max-height: 42px;
    max-width: 160px;
    object-fit: contain;
}

.benefit-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.benefit-type {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.benefit-partner {
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.benefit-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.benefit-discount {
    background: var(--background-light);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.benefit-code {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.benefit-code code {
    background: var(--background-secondary);
    padding: 0.35rem 0.6rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
}

.benefit-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.benefit-meta .meta-label {
    font-weight: 600;
    margin-right: 4px;
}

.benefit-terms summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.benefit-terms p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.benefit-actions {
    margin-top: auto;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

.badge-card {
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    box-shadow: var(--glass-shadow);
}

.badge-icon {
    font-size: 2rem;
}

.badge-info h4 {
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.badge-info p {
    margin: 0 0 8px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.badge-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.project-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.project-meta {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.project-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--background-light);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.project-status.open {
    background: var(--success-light);
    color: var(--success-color);
    border-color: rgba(40, 167, 69, 0.35);
}

.project-status.closed {
    background: var(--error-light);
    color: var(--error-color);
    border-color: rgba(199, 0, 0, 0.35);
}

.project-description {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md);
}

.project-tag {
    display: inline-flex;
    align-items: center;
    background: var(--background-light);
    border-radius: var(--border-radius-sm);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.project-section {
    margin-bottom: var(--spacing-sm);
}

.project-section p {
    margin: 6px 0 0;
    color: var(--text-secondary);
}

.project-owner-note {
    background: var(--background-secondary);
    border: 1px dashed var(--glass-border);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 0.8rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.project-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.project-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    align-items: end;
}

.project-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.project-list li:last-child {
    border-bottom: none;
}

.dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.draggable-block {
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.draggable-block.dragging {
    opacity: 0.65;
    border: 1px dashed var(--border-color);
}

.layout-handle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--background-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: grab;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.layout-handle:active {
    cursor: grabbing;
}

.layout-handle-icon {
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.layout-handle:hover .layout-handle-icon {
    opacity: 1;
}

.block-pair {
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.content-item-title {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.content-item-title a {
    color: var(--text-primary);
}

.content-item-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.content-item-meta--truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-feedback {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    background: var(--background-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--glass-shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 1100;
    pointer-events: none;
}

.layout-feedback.show {
    opacity: 1;
    transform: translateY(0);
}

.layout-feedback--error {
    border-color: var(--error-color);
    color: var(--error-color);
}

/* Globalna tražilica */
.global-search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.global-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: var(--background-light);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.global-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(199, 0, 0, 0.1);
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

/* Autocomplete prijedlozi */
.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.selected {
    background: var(--background-light);
}

.suggestion-item i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.suggestion-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.suggestion-type {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    background: var(--background-secondary);
    border-radius: 4px;
}

/* Kompaktni header kada je sidebar skriven */
body.sidebar-hidden .header {
	padding: var(--spacing-md) var(--spacing-lg);
	grid-template-columns: auto 1fr auto;
}

body.sidebar-hidden .header-left h1 {
	font-size: 1.6rem;
}

body.sidebar-hidden .header-center {
	max-width: 500px;
}

body.sidebar-hidden .header-right {
	height: 40px;
}

body.sidebar-hidden .header-right .btn {
	height: 36px;
	padding: 0 12px;
	font-size: 0.8rem;
}

body.sidebar-hidden .header-right .theme-toggle {
	width: 45px;
	height: 36px;
}

body.sidebar-hidden .user-menu {
	height: 36px;
	min-width: 140px;
	padding: 6px 12px;
}

body.sidebar-hidden .user-avatar {
	width: 28px;
	height: 28px;
	font-size: 0.7rem;
}

.sidebar-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 var(--spacing-md);
	margin-right: var(--spacing-md);
	background: var(--background-light);
	color: var(--text-primary);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
}

.sidebar-toggle-btn:hover {
	background: var(--primary-color);
	color: var(--white);
	border-color: var(--primary-color);
}

.header-left h1 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    height: 50px; /* Fiksna visina za konzistentnost */
}

/* Moderni user menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
	padding: 8px 12px;
    background: var(--background-glass);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
	height: 44px; /* Fiksna visina */
	min-width: 180px; /* Minimalna širina */
}

.user-menu:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0; /* Ne smanjuj se */
    overflow: hidden; /* Sakrij dio slike koji prelazi */
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Opća pravila za sve avatar slike - ograničavanje veličine */
.user-avatar img,
.user-avatar-small img,
.message-avatar img,
.profile-avatar img,
.post-avatar img,
.comment-avatar img,
.author-avatar img,
[class*="avatar"] img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50%;
    display: block;
}

/* Specifična pravila za profile-avatar - ograniči na 120px */
.profile-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
}

.profile-avatar img {
    max-width: 120px !important;
    max-height: 120px !important;
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 50%;
    display: block;
}

/* Osiguraj da avatar kontejneri imaju overflow hidden */
.user-avatar,
.user-avatar-small,
.message-avatar,
.post-avatar,
.comment-avatar,
.author-avatar,
[class*="avatar"] {
    overflow: hidden;
}

.user-info {
    display: flex;
    flex-direction: column;
	gap: 0; /* Bez dodatnog proreda između naslova i uloge */
    min-width: 0; /* Omogući text truncation */
    overflow: hidden;
}

.user-info h3 {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0; /* Ukloni vanjski margine */
	line-height: 1.1; /* Zbijeniji naslov */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
	margin: 0; /* Ukloni vanjske margine za kompaktnost */
	line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header button standardization */
.header-right .btn {
    height: 44px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 2px solid var(--glass-border);
    background: var(--background-light);
    color: var(--text-primary);
    border-radius: var(--border-radius);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0; /* Sprečava smanjivanje */
    min-width: fit-content; /* Osigurava da se sadržaj prikaže */
}

.header-right .btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
    transform: none; /* Ukloni transform efekte */
}

.header-right .btn-secondary {
    border-color: var(--glass-border);
    background: var(--background-light);
    color: var(--text-primary);
}

.header-right .btn-secondary:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
}

/* Theme toggle u header-right kontekstu */
.header-right .theme-toggle {
    background: var(--toggle-track);
    border: 1px solid var(--toggle-border);
    border-radius: 999px;
    width: 38px;
    height: 22px;
    padding: 1px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-right .theme-toggle:hover {
    border-color: #999999;
}

.header-right .theme-toggle-slider {
    width: 18px;
    height: 18px;
    background: var(--toggle-slider);
    border-radius: 999px;
    position: relative;
    transition: var(--transition);
    transform: translateX(0);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .header-right .theme-toggle {
    background: var(--toggle-track);
    border-color: var(--toggle-border);
}

[data-theme="light"] .header-right .theme-toggle:hover {
    border-color: #666666;
}

[data-theme="light"] .header-right .theme-toggle-slider {
    background: var(--toggle-slider);
    transform: translateX(16px);
}

.header-right .theme-toggle-icon {
    color: var(--toggle-icon);
    font-size: 11px;
}

[data-theme="light"] .header-right .theme-toggle-icon {
    color: var(--toggle-icon);
}

/* Ukloni hover efekte koji uzrokuju jumping */
.header-right .user-menu:hover {
    transform: none;
    box-shadow: var(--box-shadow);
}

/* Globalni reset za sve button hover efekte u header */
.header-right .btn:hover,
.header-right .theme-toggle:hover {
    transform: none;
}

/* Moderni main content */
.main-content {
    margin-left: 280px;
    padding: var(--spacing-xl);
    background: var(--background-dark);
    position: relative;
}

/* Collapsible sidebar layout */
body.sidebar-collapsed .sidebar {
	width: 72px;
	padding: var(--spacing-lg) var(--spacing-md);
}

body.sidebar-collapsed .header,
body.sidebar-collapsed .main-content {
	margin-left: 72px;
}

/* Sakrij detalje u kolapsiranom stanju radi maksimalnog prostora */
body.sidebar-collapsed .sidebar-logo p {
	display: none;
}

body.sidebar-collapsed .nav-menu {
	display: none;
}

/* Smanji logo u kolapsiranom izborniku */
body.sidebar-collapsed .logo-img {
	width: 48px;
}

/* Skroz skriveni sidebar */
body.sidebar-hidden .sidebar {
	transform: translateX(-100%);
}

body.sidebar-hidden .header,
body.sidebar-hidden .main-content {
	margin-left: 0;
}

body.sidebar-hidden .sidebar-fab {
	display: flex;
}

/* Admin-only preklop u sidebaru */
.admin-menu { display: none; }
body.sidebar-admin-only .nav-main { display: none; }
body.sidebar-admin-only .admin-menu { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.nav-admin-link .nav-link {
	font-weight: 700;
}

/* Moderni card dizajn */
.card {
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--glass-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: var(--transition);
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Moderni button dizajn */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    background: var(--background-light);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    transition: var(--transition);
    z-index: -1;
}

.btn:hover::before {
    left: 0;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
    border: none;
}

.btn-primary:hover {
    background: #a00000;
}

.btn-secondary {
    background: var(--background-light);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.btn-success {
    background: var(--success-color);
    color: var(--white);
    border: none;
}

.btn-warning {
    background: var(--warning-color);
    color: var(--dark-bg);
    border: none;
}

.btn-danger {
    background: var(--primary-color);
    color: var(--white);
    border: none;
}

.btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8rem;
}

.btn-lg {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: 1rem;
}

/* Moderni form dizajn */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* Moderni grid sistem */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-1 {
    grid-template-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Moderni status badges */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-aktivno {
    background: var(--success-light);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-na-cekanju {
    background: var(--warning-light);
    color: var(--warning-color);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-isteklo {
    background: var(--error-light);
    color: var(--error-color);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-suspendirano {
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Moderni alert dizajn */
.alert {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.alert-success {
    background: var(--success-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.alert-error {
    background: var(--error-light);
    border-color: var(--error-color);
    color: var(--error-color);
}

.alert-warning {
    background: var(--warning-light);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.alert-info {
    background: var(--info-light);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* Moderni table dizajn */
.table-container {
    width: 100%;
    overflow-x: auto;
}

.column-toggle-control {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
    position: relative;
}

.column-toggle-btn {
    border: 1px solid var(--glass-border);
    background: var(--background-light);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.column-toggle-menu {
    position: absolute;
    top: 2.1rem;
    right: 0;
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    background: var(--background-card);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    padding: 0.5rem;
    display: none;
    z-index: 30;
}

.column-toggle-menu.open {
    display: block;
}

.column-toggle-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 0.25rem 0.1rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background-glass);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.table th,
.table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

.table th {
    background: var(--background-secondary);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.table tr:hover {
    background: var(--background-glass);
}

.table tr:last-child td {
    border-bottom: none;
}

/* Moderni modal dizajn */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--background-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--box-shadow-lg);
    transform: scale(0.9);
    transition: var(--transition);
    position: relative;
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.modal-title {
    margin: 0;
    line-height: 1.25;
}

.modal-header .modal-close,
.modal-header .close {
    margin-left: auto;
    flex: 0 0 auto;
}

.modal-content > .modal-close,
.modal-content > .close {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* Prošireni modal stilovi */
.modal-large {
    width: 90vw;
    max-width: 800px;
    max-height: 90vh;
}

.modal-extra-large {
    width: 95vw;
    max-width: 1000px;
    max-height: 95vh;
}

/* Theme toggle - osnovni stilovi (za stranice koje nemaju header-right) */
.theme-toggle {
    --toggle-track: #2a2a2a;
    --toggle-border: #3a3a3a;
    --toggle-slider: #1a1a1a;
    --toggle-icon: #ffffff;
    background: var(--toggle-track);
    border: 1px solid var(--toggle-border);
    border-radius: 999px;
    width: 38px;
    height: 22px;
    padding: 1px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.theme-toggle:hover {
    border-color: #999999;
}

.theme-toggle-slider {
    width: 18px;
    height: 18px;
    background: var(--toggle-slider);
    border-radius: 999px;
    position: relative;
    transition: var(--transition);
    transform: translateX(0);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .theme-toggle {
    --toggle-track: #e9e9e9;
    --toggle-border: #d5d5d5;
    --toggle-slider: #ffffff;
    --toggle-icon: #111111;
    background: var(--toggle-track);
    border-color: var(--toggle-border);
}

[data-theme="light"] .theme-toggle:hover {
    border-color: #666666;
}

[data-theme="light"] .theme-toggle-slider {
    background: var(--toggle-slider);
    transform: translateX(16px);
}

.theme-toggle-icon {
    color: var(--toggle-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .theme-toggle-icon {
    color: var(--toggle-icon);
}

.theme-toggle-svg {
    width: 13px;
    height: 13px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle-svg--fill {
    fill: currentColor;
    stroke: none;
}

/* Moderni pricing packages stilovi */
.pricing-packages {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-glass);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--primary-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.price-package {
    display: inline-block;
    background: var(--gradient-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.price-package:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-glow);
}

/* Event description content styling */
.description-content {
    line-height: 1.7;
    color: var(--text-secondary);
}

.description-content p {
    margin-bottom: var(--spacing-sm);
}

.description-content p:last-child {
    margin-bottom: 0;
}

/* Event stats improvements */
.event-stats {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.event-stats .stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--background-glass);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
}

/* Events grid improvements */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.event-admin-card {
    background: var(--background-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.event-admin-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.event-admin-card:hover::before {
    transform: scaleX(1);
}

.event-admin-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow-lg);
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
}

.event-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1.4;
    flex: 1;
    margin-right: var(--spacing-md);
    font-weight: 700;
}

.event-status {
    flex-shrink: 0;
}

.event-details p {
    margin: var(--spacing-sm) 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.event-description {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--background-secondary);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--secondary-color);
}

.event-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--glass-border);
}

/* Moderni filter tabs */
.filter-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.filter-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.filter-tab:hover,
.filter-tab.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-glow);
}

/* Moderni search input */
.search-input {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Responsive dizajn */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content,
    .header {
        margin-left: 0;
    }
    
    .events-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Mobilni hamburger meni */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    background: var(--background-secondary);
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.mobile-menu-toggle:hover {
    background: var(--background-light);
    border-color: var(--primary-color);
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    overflow-y: auto;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: var(--background-secondary);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--glass-border);
    background: var(--background-dark);
}

.mobile-menu-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.mobile-menu-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.mobile-menu-close:hover {
    background: var(--background-light);
}

.mobile-menu-search {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-menu-theme {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-menu-theme label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.mobile-menu-admin-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-menu-admin-toggle label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-admin-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.5rem 1rem;
    background: var(--background-light);
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-admin-toggle:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-admin-toggle .admin-toggle-icon {
    font-size: 1rem;
}

body.sidebar-admin-only .btn-admin-toggle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.mobile-menu-sidebar {
    padding: var(--spacing-md);
    flex: 1;
    overflow-y: auto;
}

.mobile-nav {
    width: 100%;
}

.mobile-nav .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav .nav-item {
    margin: 0;
}

.mobile-nav .nav-link {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    margin-bottom: var(--spacing-xs);
}

.mobile-nav .nav-link:hover,
.mobile-nav .nav-link.active {
    background: var(--background-light);
    color: var(--primary-color);
}

.mobile-nav .nav-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    margin-bottom: var(--spacing-xs);
}

.mobile-nav .nav-group-title:hover {
    background: var(--background-light);
}

.mobile-nav .nav-group-title .nav-toggle {
    transition: transform 0.3s ease;
}

.mobile-nav .nav-group.collapsed .nav-group-title .nav-toggle {
    transform: rotate(-90deg);
}

.mobile-nav .nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: var(--spacing-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.mobile-nav .nav-group:not(.collapsed) .nav-submenu {
    max-height: 1000px;
    opacity: 1;
}

.mobile-nav .nav-group.collapsed .nav-submenu {
    max-height: 0;
    opacity: 0;
}

.mobile-nav .nav-submenu .nav-link {
    padding-left: var(--spacing-lg);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .sidebar {
        display: none !important;
    }
    
    .main-content {
        padding: var(--spacing-md);
        margin-left: 0 !important;
    }
    
    .header {
        padding: var(--spacing-md);
        margin-left: 0;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        position: relative;
    }
    
    .header-left {
        display: none;
    }
    
    .header-center {
        display: none;
    }
    
    .header-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .header-right .user-menu {
        flex: 1;
        min-width: 0;
    }
    
    .header-right .user-info h3 {
        font-size: 0.9rem;
    }
    
    .header-right .user-info p {
        font-size: 0.75rem;
    }
    
    .header-right .theme-toggle {
        display: none;
    }
    
    .header-left h1 {
        font-size: 1.5rem;
    }
    
    /* Osiguraj da se main-content prikazuje bez margine na mobilnim uređajima */
    body:not(.sidebar-hidden) .main-content {
        margin-left: 0 !important;
    }
    
    body.sidebar-hidden .main-content {
        margin-left: 0 !important;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .event-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .event-actions {
        flex-direction: column;
    }
    
    .event-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .pricing-packages {
        font-size: 0.85rem;
    }
    
    .price-package {
        font-size: 0.8rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .theme-toggle {
        width: 45px;
        height: 24px;
    }
    
    .theme-toggle-slider {
        width: 18px;
        height: 18px;
    }
    
    [data-theme="light"] .theme-toggle-slider {
        transform: translateX(21px);
    }
    
    /* Header responsive adjustments */
    .header {
        padding: var(--spacing-md) var(--spacing-lg);
        margin-left: 0; /* Reset margin for mobile */
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .header-center {
        order: -1;
        max-width: 100%;
    }
    
    .header-right {
        gap: var(--spacing-sm);
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .header-right .btn {
        height: 36px;
        padding: 0 12px;
        font-size: 0.8rem;
    }
    
    .header-right .theme-toggle {
        width: 45px;
        height: 36px;
    }
    
    .user-menu {
        height: 36px;
        min-width: 120px;
        padding: 6px 8px;
    }
    
    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    
    .user-info h3 {
        font-size: 0.8rem;
    }
    
    .user-info p {
        font-size: 0.7rem;
    }
    
    /* Login theme toggle responsive */
    .login-theme-toggle {
        top: 15px;
        right: 15px;
    }
}

/* Animacije */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.card,
.event-admin-card {
    animation: fadeInUp 0.6s ease-out;
}

.nav-link {
    animation: slideInLeft 0.4s ease-out;
}

.btn:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background: #a00000;
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.nav-link:hover {
    background: var(--background-light);
    color: var(--text-primary);
}

.card:hover {
    border-color: var(--primary-color);
}

.stat-card:hover {
    border-color: var(--primary-color);
}

.event-card:hover {
    border-color: var(--primary-color);
}

.event-admin-card:hover {
    border-color: var(--primary-color);
}

.quick-link:hover {
    border-color: var(--primary-color);
}

.metric-card:hover {
    border-color: var(--primary-color);
}

/* Loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--glass-border);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
.btn:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.nav-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --background-dark: #000000;
        --background-secondary: #1a1a1a;
        --background-light: #333333;
        --border-color: #666666;
    }
}

/* Dashboard specific styles */
.stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: var(--transition);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-lg);
}

.stat-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--white);
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

/* Events list styles */
.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.event-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-glass);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.event-item:hover {
    transform: translateX(4px);
    box-shadow: var(--box-shadow);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--gradient-secondary);
    border-radius: var(--border-radius-sm);
    color: white;
    flex-shrink: 0;
}

.event-day {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.event-month {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-details {
    flex: 1;
}

.event-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.event-organizer,
.event-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.event-actions {
    flex-shrink: 0;
}

/* Notifications list styles */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.notification-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-glass);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.notification-item.unread {
    border-left: 3px solid var(--primary-color);
    background: rgba(229, 0, 0, 0.07);
}

.notification-item:hover {
    transform: translateX(4px);
    box-shadow: var(--box-shadow);
}

.notification-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.notification-author,
.notification-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.notification-status {
    flex-shrink: 0;
}

.notifications-list .notification-status .status-badge {
    color: var(--primary-color);
    border: 1px solid rgba(229, 0, 0, 0.35);
    background: rgba(229, 0, 0, 0.1);
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.waiting {
    background: var(--warning-light);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.status-badge.past {
    background: var(--error-light);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

/* Quick links styles */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--background-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    text-align: center;
}

.quick-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color);
}

.quick-link-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--white);
}

.quick-link-text {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Empty state styles */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.empty-state-message {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Header welcome message */
.header-left p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: var(--spacing-xs) 0 0 0;
}

/* Responsive adjustments for dashboard */
@media (max-width: 768px) {
    .stat-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .event-item,
    .notification-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .event-date,
    .notification-icon {
        align-self: center;
    }
    
    .quick-links {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-link {
        padding: var(--spacing-md);
    }
    
    .quick-link-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}

/* Blog-style Event Cards */
.events-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.event-blog-card {
    background: var(--background-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    cursor: pointer;
}

.event-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-lg);
    border-color: var(--primary-color);
}

.event-blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.event-blog-card:hover::before {
    transform: scaleX(1);
}

/* Event Card Image Section */
.event-card-image {
    position: relative;
    height: 200px;
    background: var(--background-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.event-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    opacity: 0.1;
    z-index: 1;
}

/* Event Image */
.event-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.event-category-badge {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--background-card);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Event Header Badges - novi layout */
.event-header-badges {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 2;
}

.event-price-badge {
    background: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    min-width: 80px;
}

.event-date-badge {
    background: var(--background-card);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    text-align: center;
    min-width: 60px;
}

.event-date-day {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.event-date-month {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Event Card Content */
.event-card-content {
    padding: var(--spacing-xl);
}

.event-card-header {
    margin-bottom: var(--spacing-lg);
}

.event-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.3;
}

.event-meta {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.event-organizer,
.event-time {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.event-meta .icon {
    font-size: 1rem;
}

/* Event Card Excerpt */
.event-card-excerpt {
    margin-bottom: var(--spacing-lg);
}

.event-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
}

.event-details-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.event-detail {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.event-detail .icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Event Card Footer */
.event-card-footer {
    border-top: 1px solid var(--glass-border);
    padding-top: var(--spacing-lg);
}

.event-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.waiting {
    background: var(--warning-light);
    color: var(--warning-color);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-badge.past {
    background: var(--error-light);
    color: var(--error-color);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Button Outline Style */
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-outline:hover {
    background: var(--background-glass);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Event Modal Styles */
.event-modal-content {
    max-width: 100%;
}

.event-modal-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--glass-border);
}

.event-modal-category {
    display: inline-block;
    background: var(--gradient-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-md);
}

.event-modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
}

.event-modal-meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.event-modal-organizer,
.event-modal-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 1rem;
    color: var(--text-secondary);
}

.event-modal-body {
    margin-bottom: var(--spacing-xl);
}

.event-modal-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.event-modal-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.event-modal-details .event-detail {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--background-glass);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
}

.event-modal-details .event-detail .icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* Pricing Packages Modal */
.pricing-packages-modal {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--glass-border);
}

.pricing-packages-modal h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.pricing-package-card {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    transition: var(--transition);
}

.pricing-package-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color);
}

.pricing-package-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.package-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.pricing-package-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.event-modal-footer {
    border-top: 1px solid var(--glass-border);
    padding-top: var(--spacing-lg);
}

.event-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--error-color);
    font-size: 1.1rem;
}

/* Responsive adjustments for blog cards */
@media (max-width: 1024px) {
    .events-blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .events-blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .event-card-content {
        padding: var(--spacing-lg);
    }
    
    .event-card-title {
        font-size: 1.2rem;
    }
    
    .event-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .event-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .event-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .event-modal-title {
        font-size: 1.5rem;
    }
    
    .event-modal-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .event-modal-details {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .event-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .event-modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Admin Event Card Specific Styles */
.admin-event-card {
    border: 2px solid var(--glass-border);
}

.admin-event-card:hover {
    border-color: var(--primary-color);
}

.event-status-badge {
    background: var(--background-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    min-width: 80px;
}

.event-status-badge .status {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* Admin specific event details */
.admin-event-card .event-details-grid {
    margin-top: var(--spacing-md);
}

.admin-event-card .event-detail {
    background: var(--background-glass);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
}

/* Admin event actions */
.admin-event-card .event-actions {
    justify-content: flex-start;
    gap: var(--spacing-sm);
}

.admin-event-card .event-actions .btn {
    flex: 1;
    min-width: 0;
}

/* Responsive adjustments for admin cards */
@media (max-width: 768px) {
    .admin-event-card .event-actions {
        flex-direction: column;
    }
    
    .admin-event-card .event-actions .btn {
        width: 100%;
    }
    
    .event-header-badges {
        position: relative;
        top: auto;
        right: auto;
        margin-top: var(--spacing-sm);
        flex-direction: row;
        justify-content: space-between;
    }
} 

/* Login stranica stilovi */
.login-page {
    min-height: 100vh;
    background: var(--background-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Gradient pozadina za tamnu temu */
.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #0f0f0f 50%, #1a1a1a 75%, #0a0a0a 100%);
    z-index: 0;
}

/* Crveni gradient overlay za tamnu temu */
.login-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(199, 0, 0, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(199, 0, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 20%, rgba(199, 0, 0, 0.08) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

/* Za svjetlu temu - jednostavnija pozadina */
[data-theme="light"] .login-page::before {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 25%, #f8f9fa 50%, #ffffff 75%, #f8f9fa 100%);
}

[data-theme="light"] .login-page::after {
    background: radial-gradient(circle at 20% 50%, rgba(199, 0, 0, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(199, 0, 0, 0.03) 0%, transparent 50%);
}

.login-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    width: 100%;
    background: var(--background-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(199, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: var(--spacing-md) auto;
}

/* Dodatni glow efekt za tamnu temu */
[data-theme="dark"] .login-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 
                0 0 40px rgba(199, 0, 0, 0.1),
                0 0 0 1px rgba(199, 0, 0, 0.15);
}

[data-theme="light"] .login-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(199, 0, 0, 0.1);
}

/* Login theme toggle positioning */
.login-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.login-theme-toggle .theme-toggle {
    box-shadow: var(--box-shadow);
    transform: scale(0.9);
}

.login-left {
    background: var(--background-secondary);
    padding: var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Gradient overlay za lijevu stranu na tamnoj temi */
.login-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(199, 0, 0, 0.15) 0%, rgba(199, 0, 0, 0.05) 50%, transparent 100%);
    z-index: 0;
}

[data-theme="light"] .login-left::before {
    background: linear-gradient(135deg, rgba(199, 0, 0, 0.05) 0%, rgba(199, 0, 0, 0.02) 50%, transparent 100%);
}

.logo {
    position: relative;
    z-index: 1;
    margin-bottom: var(--spacing-xl);
}

.login-page .logo {
    text-align: center;
}

.login-page .logo .logo-img {
    width: 220px;
    display: block;
    margin: 0 auto var(--spacing-md);
}

.logo h1 {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: -1px;
}

.logo .tagline {
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.4;
}

.benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits li {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.benefits li::before {
    content: '✓';
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}

body.login-page .benefits li::before {
    content: none;
}

body.login-page .benefits li {
    gap: 0;
}

.login-right {
    padding: var(--spacing-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-card);
}

.login-form-container {
    width: 100%;
    max-width: 400px;
}

.login-form-container h3 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
    text-align: center;
}

.login-form-container > p {
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-xl) 0;
    font-size: 1rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.login-page:not(.register-page):not(.forgot-password-page) .login-form {
    gap: var(--spacing-sm);
}

.login-page:not(.register-page):not(.forgot-password-page) .login-form .form-group {
    margin-bottom: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input {
    padding: var(--spacing-md);
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    background: var(--background-light);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
}

.login-page:not(.register-page):not(.forgot-password-page) .form-group input {
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 2.6rem;
}

.password-toggle-btn {
    position: absolute;
    right: 0.65rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    padding: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.password-toggle-btn svg {
    width: 1.1rem;
    height: 1.1rem;
}

.form-group small {
    font-size: 0.8rem;
    margin-top: var(--spacing-xs);
    color: var(--text-muted);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--background-secondary);
}

.btn-full {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
    margin-top: var(--spacing-md);
}

.login-footer {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.login-footer p {
    color: var(--text-secondary);
    margin: var(--spacing-sm) 0;
    font-size: 0.9rem;
}

.login-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.login-footer a:hover {
    color: #a00000;
    text-decoration: underline;
}

/* Alert stilovi */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    position: relative;
}

.alert-error {
    background: var(--error-light);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

.alert-success {
    background: var(--success-light);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

/* Specifični stilovi za register i forgot-password stranice */
body.register-page .login-page,
body.forgot-password-page .login-page {
    align-items: flex-start;
    padding: var(--spacing-md);
    overflow-y: auto;
    overflow-x: hidden;
}

body.register-page .login-container,
body.forgot-password-page .login-container {
    margin: var(--spacing-md) 0;
    max-height: calc(100vh - 2 * var(--spacing-md));
    align-self: flex-start;
}

body.register-page .login-left,
body.forgot-password-page .login-left {
    padding: var(--spacing-xl);
    justify-content: flex-start;
    overflow-y: auto;
    max-height: calc(100vh - 2 * var(--spacing-md));
}

body.register-page .login-right,
body.forgot-password-page .login-right {
    padding: var(--spacing-md) var(--spacing-lg);
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 2 * var(--spacing-md));
}

body.register-page .login-form-container,
body.forgot-password-page .login-form-container {
    padding: var(--spacing-md) 0;
}

body.register-page .login-form-container h3,
body.forgot-password-page .login-form-container h3 {
    font-size: 1.6rem;
    margin: 0 0 var(--spacing-xs) 0;
}

body.register-page .login-form-container > p,
body.forgot-password-page .login-form-container > p {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 0.9rem;
}

body.register-page .login-form,
body.forgot-password-page .login-form {
    gap: var(--spacing-sm);
}

body.register-page .form-group,
body.forgot-password-page .form-group {
    gap: 0.25rem;
    margin-bottom: 0;
}

body.register-page .form-group label,
body.forgot-password-page .form-group label {
    font-size: 0.85rem;
    margin-bottom: 0;
}

body.register-page .form-group input,
body.forgot-password-page .form-group input {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    min-height: 38px;
}

body.register-page .btn-full,
body.forgot-password-page .btn-full {
    padding: 0.6rem var(--spacing-md);
    font-size: 0.95rem;
    margin-top: var(--spacing-sm);
}

body.register-page .login-footer,
body.forgot-password-page .login-footer {
    margin-top: var(--spacing-md);
}

/* Registracija: koristi normalni scroll stranice da submit gumb uvijek ostane dostupan */
body.register-page .login-container {
    max-height: none;
}

body.register-page .login-left,
body.register-page .login-right {
    max-height: none;
    overflow: visible;
}

/* Specifični stilovi samo za forgot-password stranicu */
body.forgot-password-page .login-container {
    max-width: 600px !important;
    grid-template-columns: 1fr;
    margin: var(--spacing-lg) auto;
}

body.forgot-password-page .login-left {
    display: none;
}

body.forgot-password-page .login-right {
    width: 100%;
    padding: var(--spacing-2xl) var(--spacing-xl);
    align-items: center;
    justify-content: center;
    min-height: auto;
}

body.forgot-password-page .login-form-container {
    max-width: 100%;
    width: 100%;
}

body.forgot-password-page .login-form-container h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

body.forgot-password-page .login-form-container > p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
    color: var(--text-secondary);
}

body.forgot-password-page .login-form {
    gap: var(--spacing-lg);
}

body.forgot-password-page .form-group {
    gap: var(--spacing-sm);
}

body.forgot-password-page .form-group label {
    font-size: 0.9rem;
}

body.forgot-password-page .form-group input {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    min-height: 44px;
}

body.forgot-password-page .btn-full {
    padding: 0.85rem var(--spacing-lg);
    font-size: 1rem;
    margin-top: var(--spacing-md);
    font-weight: 600;
}

body.forgot-password-page .login-footer {
    margin-top: var(--spacing-lg);
}

body.forgot-password-page .login-footer a {
    font-size: 0.9rem;
}

/* Responsive dizajn za login */
@media (max-width: 768px) {
    .login-page {
        overflow-y: auto;
        overflow-x: hidden;
        padding: var(--spacing-md);
        align-items: flex-start;
    }
    
    .login-container {
        grid-template-columns: 1fr;
        max-width: 100%;
        width: 100%;
        margin: 0;
        max-height: none;
    }
    
    /* Sakrij lijevu stranu s opisom na mobilnim uređajima */
    .login-left {
        display: none;
    }
    
    .login-right {
        padding: var(--spacing-xl);
        width: 100%;
        align-items: center;
        justify-content: center;
        min-height: auto;
    }
    
    .login-form-container {
        max-width: 100%;
        width: 100%;
    }
    
    body.register-page .login-right,
    body.forgot-password-page .login-right {
        padding: var(--spacing-md);
        max-height: none;
    }
    
    body.register-page .login-form-container,
    body.forgot-password-page .login-form-container {
        padding: var(--spacing-sm) 0;
    }
}

@media (max-width: 480px) {
    .login-page {
        padding: var(--spacing-sm);
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .login-container {
        max-width: 100%;
        border-radius: var(--border-radius);
    }
    
    .login-left {
        display: none;
    }
    
    .login-right {
        padding: var(--spacing-lg);
        width: 100%;
    }
    
    .login-form-container h3 {
        font-size: 1.4rem;
    }
    
    .login-form-container > p {
        font-size: 0.85rem;
    }

    .form-group input {
        padding: 0.6rem 0.75rem;
        font-size: 0.95rem;
    }

    .btn-full {
        padding: 0.7rem var(--spacing-md);
        font-size: 0.95rem;
    }
    
    body.register-page .login-right,
    body.forgot-password-page .login-right {
        padding: var(--spacing-md);
    }
}

/* Popravak za Safari - gumbovi */
.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Popravak za Safari - input polja */
input, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Vrati nativni izgled za checkbox da ne nestane zbog globalnog reset-a */
input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Popravak za Safari - forme */
form {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Popravak za Safari - hover efekti */
@media (hover: hover) {
    .btn:hover {
        background: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
    }
    
    .nav-link:hover {
        background: var(--background-light);
        color: var(--text-primary);
    }
    
    .card:hover {
        border-color: var(--primary-color);
    }
}

/* Fallback za touch uređaje */
@media (hover: none) {
    .btn:active {
        background: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
    }
    
    .nav-link:active {
        background: var(--background-light);
        color: var(--text-primary);
    }
    
    .card:active {
        border-color: var(--primary-color);
    }
} 



/* Theme transition animacija */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme feedback */
.theme-feedback {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--background-card);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--glass-border);
    font-size: 14px;
    font-weight: 500;
    z-index: 1001;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    max-width: 250px;
}

.theme-feedback.show {
    opacity: 1;
    transform: translateX(0);
} 

.close, .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.close:hover, .modal-close:hover {
    color: var(--error-color);
    background: var(--error-light);
} 

/* Quill editor baseline */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--glass-border);
}

.ql-toolbar.ql-snow {
    background: var(--background-secondary);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.ql-container.ql-snow {
    background: var(--input-bg);
    color: var(--text-primary);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    min-height: 180px;
}

.ql-editor {
    min-height: 180px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.ql-snow .ql-stroke {
    stroke: var(--text-primary);
}

.ql-snow .ql-fill {
    fill: var(--text-primary);
}

.ql-snow .ql-picker {
    color: var(--text-primary);
}

.ql-snow .ql-tooltip {
    z-index: 11050;
}

/* Grid layout za forme */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Poboljšani form stilovi */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    background: var(--background-light);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--background-secondary);
    box-shadow: 0 0 0 3px rgba(199, 0, 0, 0.1);
}

.form-group small {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Responsive grid */
@media (max-width: 768px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    .modal-large,
    .modal-extra-large {
        width: 95vw;
        max-width: none;
    }
} 

/* Logo stilovi */
.logo-img {
    width: 168px;
    height: auto;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.sidebar-logo {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 20px;
}

.sidebar-logo p {
    margin: 10px 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
} 

/* ==========================================
   NEW HIERARCHICAL NAVIGATION STYLES
   ========================================== */

/* Override existing nav styles for hierarchical structure */
.nav-group {
    margin-bottom: 20px;
}

.nav-group-title {
    padding: 12px 16px 8px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--background-light);
    margin-bottom: 8px;
}

.nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0 0 0 16px;
}

.nav-submenu .nav-item {
    margin-bottom: 1px;
}

.nav-submenu .nav-link {
    padding: 8px 16px 8px 20px;
    font-size: 0.85rem;
    font-weight: 400;
}

.nav-submenu .nav-link::before {
    left: 8px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    height: auto;
    border-radius: 2px;
    background: rgba(199, 0, 0, 0.7);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.nav-submenu .nav-link:hover::before,
.nav-submenu .nav-link.active::before {
    left: 8px;
    opacity: 1;
}

.nav-submenu .nav-link.active::before {
    display: block;
}

.nav-admin-link {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--background-light);
}

.nav-admin-link .nav-link {
    background: var(--secondary-color);
    color: white;
    font-weight: 500;
}

.nav-admin-link .nav-link:hover {
    background: var(--secondary-color-dark);
    color: white;
}

.nav-frontend-link {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--background-light);
}

.nav-frontend-link .nav-link {
    background: var(--primary-color);
    color: white;
    font-weight: 500;
}

.nav-frontend-link .nav-link:hover {
    background: var(--primary-color-dark);
    color: white;
}

/* Collapsible Navigation */
.nav-group-title.collapsible {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: var(--transition);
}

.nav-group-title.collapsible:hover {
    color: var(--primary-color);
}

.nav-toggle {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.nav-group.collapsed .nav-toggle {
    transform: rotate(-90deg);
}

.nav-group.collapsed .nav-submenu {
    display: none;
}

.nav-submenu {
    transition: all 0.3s ease;
}

/* Page Header for special pages */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--background-glass);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
}

.page-header h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header .btn {
    margin: 0;
}

/* Analytics Page Styling */
.analytics-container {
    padding: 20px;
}

.ga-integration {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.time-range-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 20px;
}

.time-range-selector select {
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-primary);
}

.export-buttons {
    display: flex;
    gap: 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
}

.metric-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.grid {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.chart-container {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 20px;
}

.chart-container h3 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.chart-canvas {
    height: 300px !important;
    width: 100% !important;
}

.engagement-list {
    max-height: 400px;
    overflow-y: auto;
}

.engagement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--background-light);
}

.engagement-item:last-child {
    border-bottom: none;
}

.engagement-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
}

.content-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--background-light);
}

.content-item:last-child {
    border-bottom: none;
}

.content-type {
    display: inline-block;
    padding: 4px 8px;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--background-light);
}

.activity-item:last-child {
    border-bottom: none;
}

/* Responsive za analytics */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .time-range-selector {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .export-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* Admin Table Styling */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    margin-top: 15px;
}

.admin-table thead {
    background: var(--background-secondary);
}

.admin-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--glass-border);
}

.admin-table td {
    padding: 15px 12px;
    border-bottom: 1px solid var(--background-light);
    vertical-align: middle;
}

.admin-table tr:hover {
    background: var(--background-light);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

/* User Info Cell Styling */
.user-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-small {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.user-info-cell > div:last-child {
    min-width: 0;
    overflow: hidden;
}

.user-info-cell strong {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info-cell small {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Badges in table */
.admin-table .status {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Modern SVG Icons for Dashboard */
.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    margin-bottom: 15px;
    color: white;
}

.stat-icon svg {
    width: 28px;
    height: 28px;
    color: white !important;
}

/* Ensure icons are always visible with background */
[data-theme="light"] .stat-icon {
    background: linear-gradient(135deg, var(--primary-color), #ff4444);
}

[data-theme="dark"] .stat-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* Card Title SVG Icons */
.card-title svg {
    margin-right: 8px;
    vertical-align: middle;
    color: var(--primary-color);
}

/* Empty State Icons */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-state-icon svg {
    color: var(--text-muted);
}

/* Notification Icons */
.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--background-light);
    margin-right: 12px;
    flex-shrink: 0;
}

.notification-icon svg {
    color: var(--text-secondary);
}

.notification-item.unread .notification-icon {
    background: var(--primary-color);
}

.notification-item.unread .notification-icon svg {
    color: white;
}

/* Quick Links Icons */
.quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    margin-bottom: 12px;
    flex-shrink: 0;
}

.quick-link-icon svg {
    width: 24px;
    height: 24px;
    color: white !important;
}

/* Ensure quick-link icons are always visible with background */
[data-theme="light"] .quick-link-icon {
    background: linear-gradient(135deg, var(--primary-color), #ff4444);
}

[data-theme="dark"] .quick-link-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* ===== COFFEE CHAT STYLES ===== */

.coffee-chat-container {
    display: grid;
    grid-template-columns: 280px 1fr 250px;
    height: calc(100vh - 140px);
    gap: 20px;
    max-width: 100%;
}

/* Chat Sidebar - Left */
.chat-sidebar {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-sidebar-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.chat-rooms-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    border: 1px solid transparent;
}

.chat-room-item:hover {
    background: var(--background-secondary);
    border-color: var(--primary-color);
}

.chat-room-item.active {
    background: var(--primary-color);
    color: white;
}

.room-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.room-icon {
    width: 36px;
    height: 36px;
    background: var(--background-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.chat-room-item.active .room-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.room-details h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.room-details p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.7;
}

.room-type {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Main Chat Area */
.chat-main {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-room-info h2 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.chat-room-info p {
    margin: 0;
    opacity: 0.7;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    display: flex;
    gap: 12px;
    max-width: 80%;
}

.message.own-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.message-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.message-time {
    font-size: 0.75rem;
    opacity: 0.6;
}

.message-text {
    background: #d37878;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    color: white;
    border: 1px solid #d37878;
}

/* Poruke drugih korisnika - neutralna boja */
.message:not(.own-message) .message-text {
    background: #d37878;
    color: white;
}

/* Vlastite poruke - siva boja */
.message.own-message .message-text {
    background: #505050;
    color: white;
    border-color: #505050;
}

/* Tema-specifične boje za poruke - koristimo konzistentnu boju */
[data-theme="light"] .message:not(.own-message) .message-text,
[data-theme="dark"] .message:not(.own-message) .message-text {
    background: #d37878;
    color: white;
    border-color: #d37878;
}

/* Chat Input */
.chat-input-container {
    padding: 20px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.message-form {
    position: relative;
}

.message-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 15px;
    background: var(--background-secondary);
    border-radius: 25px;
    border: 2px solid transparent;
    transition: var(--transition);
}

.message-input-wrapper:focus-within {
    border-color: var(--primary-color);
}

.emoji-btn, .send-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.emoji-btn:hover, .send-btn:hover {
    color: var(--primary-color);
    background: rgba(199, 0, 0, 0.1);
}

#message-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: none;
    min-height: 20px;
    max-height: 120px;
    outline: none;
    line-height: 1.4;
}

#message-input::placeholder {
    color: var(--text-secondary);
}

.emoji-picker-container {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1000;
    margin-bottom: 10px;
}

/* Online Users Sidebar - Right */
.online-users-sidebar {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.online-users-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.online-users-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.online-users-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    transition: var(--transition);
    cursor: pointer;
}

.online-user-item:hover {
    background: var(--background-secondary);
}

.user-avatar-small {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.user-avatar-small img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.online-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #4CAF50;
    border: 2px solid var(--background-primary);
    border-radius: 50%;
}

.user-details h4 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.user-details p {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: capitalize;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .coffee-chat-container {
        grid-template-columns: 250px 1fr 220px;
    }
}

@media (max-width: 992px) {
    .coffee-chat-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: calc(100vh - 120px);
    }
    
    .chat-sidebar, .online-users-sidebar {
        max-height: 200px;
    }
    
    .chat-main {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .coffee-chat-container {
        gap: 15px;
        height: calc(100vh - 100px);
    }
    
    .message {
        max-width: 90%;
    }
    
    .chat-header {
        padding: 15px;
    }
    
    .chat-messages {
        padding: 15px;
    }
    
    .chat-input-container {
        padding: 15px;
    }
}

/* ===== CALENDAR STYLES ===== */

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
}

.calendar-nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.current-month {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 150px;
    text-align: center;
}

.view-toggle {
    display: flex;
    gap: 5px;
    background: var(--background-secondary);
    border-radius: var(--border-radius);
    padding: 3px;
}

.view-toggle .btn {
    margin: 0;
    padding: 6px 11px;
    font-size: 0.82rem;
    border-radius: calc(var(--border-radius) - 3px);
}

.view-toggle .btn.active {
    background: var(--primary-color);
    color: white;
}

.calendar-container {
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.calendar-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--background-secondary);
    border-bottom: 1px solid var(--glass-border);
}

.calendar-day-header {
    padding: 9px 6px;
    text-align: center;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-primary);
    border-right: 1px solid var(--glass-border);
}

.calendar-day-header:last-child {
    border-right: none;
}

.calendar-body {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-rows: minmax(72px, auto);
    width: 100%;
}

.calendar-day {
    min-height: 72px;
    border-right: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    padding: 5px 6px;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    background: var(--background-primary);
}

.calendar-day:last-child {
    border-right: none;
}

.calendar-day:hover:not(.empty) {
    background: var(--background-secondary);
}

.calendar-day.empty {
    background: var(--background-glass);
    opacity: 0.3;
    cursor: default;
}

.calendar-day.today {
    background: rgba(199, 0, 0, 0.1);
    border: 2px solid var(--primary-color);
}

.calendar-day.has-events {
    background: rgba(199, 0, 0, 0.05);
}

.calendar-day .day-number {
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.calendar-day.today .day-number {
    color: var(--primary-color);
    font-weight: 700;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.calendar-day .day-event {
    background: var(--primary-color);
    color: white !important;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 0.62rem;
    cursor: pointer;
    transition: var(--transition);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    column-gap: 4px;
    line-height: 1.1;
}

.calendar-day .day-event:hover {
    background: var(--secondary-color);
    transform: translateY(-1px);
}

/* Ukloni hover efekt na light temi */
[data-theme="light"] .calendar-day .day-event:hover {
    background: var(--primary-color) !important;
    transform: none !important;
}

.calendar-day .day-event .event-time {
    font-weight: 600;
    opacity: 0.9;
    color: white !important;
    font-size: 0.58rem;
    white-space: nowrap;
}

.calendar-day .day-event .event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white !important;
    font-size: 0.6rem;
}

.calendar-day .day-event-more {
    color: var(--text-secondary);
    font-size: 0.58rem;
    text-align: center;
    padding: 1px;
    font-style: italic;
}

/* Event Modal Styles */
.event-modal-header {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.event-modal-header h2 {
    margin: 0 0 10px 0;
    color: var(--text-primary);
}

/* Light theme modal fixes */
[data-theme="light"] .modal-content {
    background: white !important;
    color: #333 !important;
}

[data-theme="light"] .event-modal-header h2 {
    color: #333 !important;
}

[data-theme="light"] .event-detail {
    color: #333 !important;
}

[data-theme="light"] .event-detail strong {
    color: #333 !important;
}

[data-theme="light"] .event-description p {
    color: #333 !important;
}

[data-theme="light"] .event-modal-header {
    border-bottom-color: #ddd !important;
}

[data-theme="light"] .event-detail {
    border-bottom-color: #ddd !important;
}

[data-theme="light"] .event-modal-actions {
    border-top-color: #ddd !important;
}

[data-theme="light"] .event-description {
    background: #f8f9fa !important;
    color: #333 !important;
}

.event-category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary-color);
    color: white;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.event-modal-body {
    margin-bottom: 25px;
}

.event-details {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.event-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-border);
}

.event-detail strong {
    min-width: 100px;
    color: var(--text-primary);
}

.event-description {
    background: var(--background-secondary);
    padding: 15px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.event-description p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

.event-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border);
}

/* Responsive Calendar */
@media (max-width: 992px) {
    .calendar-nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .calendar-nav-left {
        justify-content: center;
    }
    
    .calendar-day {
        min-height: 64px;
    }
    
    .current-month {
        font-size: 1.3rem;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .calendar-day {
        min-height: 58px;
        padding: 4px;
    }
    
    .day-number {
        font-size: 0.9rem;
    }
    
    .calendar-day .day-event {
        font-size: 0.64rem;
        padding: 1px 3px;
    }
    
    .calendar-nav {
        padding: 10px 15px;
    }
    
    .calendar-nav-left {
        gap: 10px;
    }
    
    .current-month {
        font-size: 1.1rem;
    }
    
    .view-toggle .btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}

/* Hover effect for quick links */
.quick-link:hover .quick-link-icon {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(199, 0, 0, 0.3);
}

/* ===== ALL EVENTS MODERN STYLES ===== */

.events-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-item {
    display: flex;
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    min-height: 180px;
}

.event-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(199, 0, 0, 0.15);
}

.event-image-container {
    width: 280px;
    height: 180px;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-image-placeholder {
    color: white;
    font-size: 3rem;
    opacity: 0.7;
}

.event-category-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-date-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.event-date-day {
    font-size: 1.2rem;
}

.event-date-month {
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 2px;
}

.event-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-header {
    margin-bottom: 15px;
}

.event-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.event-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.event-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-meta-icon {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.event-description {
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 15px;
    flex: 1;
}

.event-details-row {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.event-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.event-detail-icon {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.event-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.event-status-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-status-badge.registered {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.event-status-badge.waiting {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
}

.event-status-badge.ended {
    background: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
}

.event-price-tag {
    background: var(--primary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
}

.event-actions-buttons {
    display: flex;
    gap: 8px;
}

/* Responsive Events */
@media (max-width: 992px) {
    .event-item {
        flex-direction: column;
        min-height: auto;
    }
    
    .event-image-container {
        width: 100%;
        height: 200px;
    }
    
    .event-details-row {
        gap: 15px;
    }
    
    .event-meta-row {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .event-content {
        padding: 15px;
    }
    
    .event-title {
        font-size: 1.2rem;
    }
    
    .event-meta-row,
    .event-details-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .event-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .event-actions-buttons {
        justify-content: center;
    }
}

/* ===== WEEK VIEW STYLES ===== */

.week-view {
    display: flex;
    flex-direction: column;
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
    min-height: 520px;
}

.week-header {
    display: grid !important;
    grid-template-columns: 80px repeat(7, 1fr);
    background: var(--background-secondary);
    border-bottom: 1px solid var(--glass-border);
    width: 100%;
    min-height: 50px;
}

.week-time-column {
    background: var(--background-secondary);
    border-right: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.week-day-header {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid var(--glass-border);
    background: var(--background-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

.week-day-header.today {
    background: var(--primary-color);
    color: white;
}

.week-day-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.week-day-header.today .week-day-name {
    color: white;
}

.week-day-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.week-day-header.today .week-day-number {
    color: white;
}

.week-body {
    display: grid !important;
    grid-template-columns: 80px repeat(7, 1fr);
    max-height: 520px;
    overflow-y: auto;
    flex: 1;
    width: 100%;
}

.week-body .week-time-column {
    display: flex;
    flex-direction: column;
}

.time-slot {
    height: 52px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.week-day-column {
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    background: var(--background-light);
    min-height: 100%;
}

.week-hour-slot {
    height: 52px;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    padding: 2px;
}

.week-event {
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    padding: 4px 6px;
    margin: 1px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
    line-height: 1.2;
}

.week-event:hover {
    background: var(--secondary-color);
    transform: translateY(-1px);
}

.week-event-time {
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.week-event-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.week-event-location {
    font-size: 0.7rem;
    opacity: 0.9;
}

/* ===== DAY VIEW STYLES ===== */

.day-view {
    display: flex;
    flex-direction: column;
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
    min-height: 520px;
}

.day-header {
    display: grid !important;
    grid-template-columns: 80px 1fr;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--glass-border);
    width: 100%;
    min-height: 50px;
}

.day-time-column {
    background: var(--background-secondary);
    border-right: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.day-main-header {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-date-header {
    text-align: center;
}

.day-view .day-date-header.today {
    color: var(--primary-color);
}

.day-view .day-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.day-view .day-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.day-view .day-date-header.today .day-number {
    color: var(--primary-color);
}

.day-body {
    display: grid !important;
    grid-template-columns: 80px 1fr;
    max-height: 520px;
    overflow-y: auto;
    flex: 1;
    width: 100%;
}

.day-body .day-time-column {
    display: flex;
    flex-direction: column;
}

.day-main-column {
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    background: var(--background-light);
    min-height: 100%;
}

.day-hour-slot {
    height: 52px;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    padding: 4px 8px;
}

.day-view .day-event {
    background: var(--background-glass);
    border: 1px solid var(--primary-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 2px 0;
    cursor: pointer;
    transition: var(--transition);
}

.day-view .day-event:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 0, 0, 0.2);
}

.day-view .day-event-time {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.day-view .day-event:hover .day-event-time {
    color: white;
}

.day-view .day-event-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.day-view .day-event:hover .day-event-title {
    color: white;
}

.day-view .day-event-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.day-view .day-event-location,
.day-view .day-event-organizer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.day-view .day-event:hover .day-event-location,
.day-view .day-event:hover .day-event-organizer {
    color: rgba(255, 255, 255, 0.9);
}

.day-view .day-event-location svg,
.day-view .day-event-organizer svg {
    color: var(--primary-color);
}

.day-view .day-event:hover .day-event-location svg,
.day-view .day-event:hover .day-event-organizer svg {
    color: white;
}

.day-view .day-event-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.day-view .day-event:hover .day-event-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive Week and Day Views */
@media (max-width: 992px) {
    .week-header,
    .week-body {
        grid-template-columns: 60px repeat(7, 1fr);
    }
    
    .week-time-column,
    .day-time-column {
        width: 60px;
        font-size: 0.8rem;
    }
    
    .week-event {
        font-size: 0.7rem;
        padding: 2px 4px;
    }
    
    .day-view .day-event {
        padding: 6px 8px;
    }
    
    .day-view .day-event-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .week-view,
    .day-view {
        margin: 0 -10px;
    }
    
    .week-header,
    .week-body {
        grid-template-columns: 50px repeat(7, 1fr);
    }
    
    .day-header,
    .day-body {
        grid-template-columns: 50px 1fr;
    }
    
    .week-day-header {
        padding: 10px 5px;
    }
    
    .week-day-name {
        font-size: 0.8rem;
    }
    
    .week-day-number {
        font-size: 1rem;
    }
    
    .day-main-header {
        padding: 10px 15px;
    }
    
    .day-name {
        font-size: 1rem;
    }
    
    .day-number {
        font-size: 1.5rem;
    }
    
    .time-slot {
        height: 50px;
        font-size: 0.7rem;
    }
    
    .week-hour-slot,
    .day-hour-slot {
        height: 50px;
    }
}

/* Quick links container */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    padding: 20px 15px;
    border-radius: var(--border-radius);
    background: var(--background-glass);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.quick-link:hover {
    border-color: var(--primary-color);
    background: var(--background-secondary);
    transform: translateY(-2px);
}

.quick-link-text {
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .quick-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .quick-link {
        padding: 15px 10px;
    }
    
    .quick-link-icon {
        width: 40px;
        height: 40px;
    }
    
    .quick-link-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Action buttons in table */
.admin-table .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    margin: 0 2px;
}

.admin-table .btn-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .admin-table th,
    .admin-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
    
    .user-info-cell {
        gap: 8px;
    }
    
    .user-avatar-small {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .admin-table .btn-group {
        flex-direction: column;
    }
    
    .admin-table .btn {
        width: 100%;
        margin: 1px 0;
    }
}

/* Enhanced sidebar for better hierarchy display */
.sidebar {
    overflow-y: auto;
    max-height: 100vh;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: var(--background-light);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 2px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ===== GLOBAL ACTION BAR (flat) ===== */
.action-bar,
.admin-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-sm);
	flex-wrap: nowrap;
}

.action-btn,
.admin-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--glass-border);
	color: var(--text-secondary);
	transition: var(--transition);
	text-decoration: none;
}

.action-btn i,
.admin-actions .btn i {
	font-size: 16px;
	line-height: 1;
}

.action-btn:hover,
.admin-actions .btn:hover {
	background: var(--background-light);
	color: var(--text-primary);
	transform: none;
	box-shadow: none;
}

.action-btn,
.admin-actions .btn {
	/* Ukloni sve animacije/efekte koji mogu uzrokovati skakanje */
	transition: none;
}

/* Ukloni globalne pseudo-efekte s .btn u kontekstu akcija */
.admin-actions .btn::before {
	content: none !important;
}

.action-btn.primary,
.admin-actions .btn-primary {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.action-btn.primary:hover,
.admin-actions .btn-primary:hover {
	background: var(--primary-color);
	color: #fff;
}

.action-btn.success,
.admin-actions .btn-success {
	border-color: var(--success-color);
	color: var(--success-color);
}

.action-btn.success:hover,
.admin-actions .btn-success:hover {
	background: var(--success-color);
	color: #fff;
}

.action-btn.danger,
.admin-actions .btn-danger {
	border-color: var(--error-color);
	color: var(--error-color);
}

.action-btn.danger:hover,
.admin-actions .btn-danger:hover {
	background: var(--error-color);
	color: #fff;
}

.table .actions,
.admin-events-table .actions {
	text-align: right;
	white-space: nowrap;
}

/* Avoid hover overlap when buttons are wrapped in forms */
.admin-actions form,
.action-bar form {
	display: contents;
}

/* Themed form controls (global) */
.form-control {
	background: var(--background-glass);
	border: 1px solid var(--glass-border);
	color: var(--text-primary);
	padding: 10px 12px;
	border-radius: var(--border-radius-sm);
	transition: var(--transition);
	height: 38px;
	outline: none;
}

.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(199, 0, 0, 0.1);
	background: var(--background-secondary);
}

.form-control::placeholder {
	color: var(--text-secondary);
	opacity: 0.8;
}

/* Checkbox list selection highlight (tags/categories) */
.checkbox-list .form-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid transparent;
}

.checkbox-list .form-checkbox.selected {
	background: var(--background-secondary);
	border-color: var(--glass-border);
}

/* Reusable tabs (global styles) */
.editor-tabs {
	max-width: 1200px;
	margin: 0 auto;
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	background: var(--background-secondary);
	padding: 12px;
}
.tab-header {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--glass-border);
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.tab-btn {
	padding: 10px 14px;
	border: 1px solid var(--glass-border);
	background: var(--background-secondary);
	color: var(--text-primary);
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	transition: none;
	font-weight: 600;
}
.tab-btn.active {
	background: var(--background-card);
	border-bottom-color: transparent;
}
.tab-pane {
	display: none !important;
	background: var(--background-card);
	border: 1px solid var(--glass-border);
	border-radius: 0 12px 12px 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tab-pane.active { display: block !important; }

/* Chips (selected tags) */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 16px;
	background: var(--background-secondary);
	border: 1px solid var(--glass-border);
	color: var(--text-primary);
	font-size: 0.85rem;
}
.chip button {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 0.9rem;
	line-height: 1;
	padding: 0;
}
.chip button:hover {
	color: var(--error-color);
}/* ============================================
   MOBILNI RESPONSIVE STILOVI
   Optimizacija za sve stranice na mobilnim uređajima
   ============================================ */

@media (max-width: 768px) {
    /* Osnovni layout prilagodbe */
    .main-content {
        padding: var(--spacing-md) !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Cards - kompaktniji prikaz */
    .card {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        border-radius: var(--border-radius);
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    /* Grid sistemi - jedna kolona na mobilnim */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }
    
    /* Buttons - veći za lakše klikanje */
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        min-height: 44px;
        width: 100%;
        justify-content: center;
    }
    
    .btn-sm {
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
        min-height: 40px;
    }
    
    .btn-lg {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        min-height: 48px;
    }
    
    /* Forme - puna širina */
    .form-group {
        margin-bottom: var(--spacing-md);
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem;
        font-size: 1rem;
        min-height: 44px;
    }
    
    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }
    
    /* Tables - scroll horizontalno ili stack */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.85rem;
        min-width: 600px;
    }
    
    .table th,
    .table td {
        padding: var(--spacing-sm);
        white-space: nowrap;
    }
    
    /* Modals - puna širina na mobilnim */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: var(--spacing-md) auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-large,
    .modal-extra-large {
        width: 95vw !important;
        max-width: 95vw !important;
    }
    
    /* Event cards */
    .event-card,
    .admin-event-card {
        flex-direction: column;
    }
    
    .event-card-content {
        padding: var(--spacing-md);
    }
    
    .event-card-title {
        font-size: 1.2rem;
    }
    
    .event-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .event-actions .btn {
        width: 100%;
    }
    
    /* Blog cards */
    .post-card {
        flex-direction: column !important;
    }
    
    .post-image {
        width: 100% !important;
        min-width: 100% !important;
        height: 200px;
        object-fit: cover;
    }
    
    .post-content {
        padding: var(--spacing-md);
    }
    
    /* Marketplace listings */
    .marketplace-listing {
        flex-direction: column;
        padding: var(--spacing-md);
    }
    
    .marketplace-listing-image {
        width: 100%;
        height: 200px;
        margin-bottom: var(--spacing-md);
    }
    
    /* Forum posts */
    .forum-post {
        grid-template-columns: 1fr !important;
        padding: var(--spacing-md);
    }
    
    .forum-post-author {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--glass-border);
    }
    
    /* Profile page */
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .profile-avatar {
        margin: 0 auto;
    }
    
    .profile-info {
        width: 100%;
    }
    
    /* Dashboard stats */
    .stat-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }
    
    .stat-icon {
        margin: 0 auto var(--spacing-sm);
    }
    
    /* Admin tables */
    .admin-table {
        font-size: 0.8rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: var(--spacing-xs);
    }
    
    .admin-actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .admin-actions .btn {
        width: 100%;
        min-width: auto;
    }
    
    /* Action bars */
    .action-bar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Filter sections */
    .filter-section {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .filter-tabs {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .filter-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }
    
    /* Search forms */
    .search-form {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .search-form select,
    .search-form input {
        width: 100%;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-xs);
    }
    
    .pagination a,
    .pagination span {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }
    
    /* User menu u headeru */
    .user-menu {
        min-width: auto;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .user-info h3 {
        font-size: 0.85rem;
    }
    
    .user-info p {
        font-size: 0.75rem;
    }
    
    /* Comment sections */
    .comment {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    /* Message threads */
    .message-thread {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .message-header {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    /* Group cards */
    .group-card {
        padding: var(--spacing-md);
    }
    
    .group-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* Calendar */
    .calendar-grid {
        grid-template-columns: 1fr;
    }
    
    .calendar-day {
        min-height: 60px;
        padding: var(--spacing-xs);
    }
    
    /* Tabs */
    .tab-header {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .tab-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
        flex: 1;
        min-width: 0;
    }
    
    /* Editor tabs */
    .editor-tabs {
        padding: var(--spacing-sm);
    }
    
    /* Tag chips */
    .tag-chip {
        font-size: 0.8rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* Breadcrumbs */
    .breadcrumbs {
        flex-wrap: wrap;
        font-size: 0.85rem;
        margin-bottom: var(--spacing-md);
    }
    
    /* Alert messages */
    .alert {
        padding: var(--spacing-md);
        font-size: 0.9rem;
    }
    
    /* Status badges */
    .status {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* Centriranje teksta gdje je potrebno */
    .text-center-mobile {
        text-align: center;
    }
    
    /* Skrivanje elemenata koji nisu potrebni na mobilnim */
    .hide-mobile {
        display: none !important;
    }
    
    /* Prikaz elemenata samo na mobilnim */
    .show-mobile {
        display: block !important;
    }
    
    /* Spacing optimizacije */
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    h4 {
        font-size: 1rem;
    }
    
    /* List optimizacije */
    ul, ol {
        padding-left: var(--spacing-lg);
    }
    
    /* Image optimizacije */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Flex optimizacije */
    .flex-row-mobile {
        flex-direction: column;
    }
    
    .flex-center-mobile {
        justify-content: center;
        align-items: center;
    }
}

/* Još manji ekrani (≤ 480px) */
@media (max-width: 480px) {
    .main-content {
        padding: var(--spacing-sm) !important;
    }
    
    .card {
        padding: var(--spacing-sm);
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
    }
    
    .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    
    h1 {
        font-size: 1.3rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    h3 {
        font-size: 1rem;
    }
}

/* Dodatni responsive stilovi za specifične komponente */
@media (max-width: 768px) {
    /* Dashboard content overview */
    .content-overview {
        grid-template-columns: 1fr !important;
    }
    
    .content-section {
        margin-bottom: var(--spacing-md);
    }
    
    /* Featured articles */
    .featured-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Blog post list */
    .posts-list {
        grid-template-columns: 1fr !important;
    }
    
    /* Marketplace sidebar */
    .marketplace-sidebar {
        order: -1;
        margin-bottom: var(--spacing-md);
    }
    
    /* Marketplace listing layout */
    .listing-content-grid {
        grid-template-columns: 1fr !important;
    }
    
    .listing-image-container {
        order: -1;
        margin-bottom: var(--spacing-md);
    }
    
    /* Forum category list */
    .forum-categories {
        grid-template-columns: 1fr !important;
    }
    
    /* Group list */
    .groups-list {
        grid-template-columns: 1fr !important;
    }
    
    /* Event grid */
    .events-grid {
        grid-template-columns: 1fr !important;
    }

    /* Projects grid */
    .project-grid {
        grid-template-columns: 1fr !important;
    }

    .project-filter-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Calendar view */
    .calendar-container {
        overflow-x: auto;
    }
    
    /* Admin dashboard stats */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Action buttons u admin stranicama */
    .action-bar {
        flex-wrap: wrap;
    }
    
    /* Search and filter bar */
    .search-filter-bar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* User profile grid */
    .profile-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Message list */
    .messages-list {
        grid-template-columns: 1fr !important;
    }
    
    /* Comment form */
    .comment-form {
        padding: var(--spacing-md);
    }
    
    /* CKEditor container */
    .ck-editor {
        width: 100% !important;
    }
    
    /* Tab navigation */
    .tab-navigation {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    /* Tag input */
    .tag-input-container {
        flex-direction: column;
    }
    
    /* Image upload area */
    .image-upload-area {
        min-height: 150px;
    }
    
    /* Media library grid */
    .media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Centriranje teksta na mobilnim */
    .text-center,
    .text-center-mobile {
        text-align: center;
    }
    
    /* Full width na mobilnim */
    .full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Stack elements vertically */
    .stack-mobile {
        flex-direction: column !important;
    }
    
    /* Remove margins on mobile */
    .no-margin-mobile {
        margin: 0 !important;
    }
    
    /* Smaller padding on mobile */
    .compact-mobile {
        padding: var(--spacing-sm) !important;
    }
}

/* Global compact sizing (main content only) */
.main-content {
    font-size: 15px;
}

.main-content .page-title {
    font-size: 1.7rem;
}

.main-content .page-subtitle,
.main-content p,
.main-content .text-muted {
    font-size: 0.92rem;
}

.main-content .card {
    padding: var(--spacing-md);
}

.main-content .card-header {
    padding-bottom: var(--spacing-sm);
}

.main-content .card-title {
    font-size: 1.15rem;
}

.main-content .btn {
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
}

.main-content .btn-sm {
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
}

.main-content .btn-lg {
    padding: 0.85rem 1.25rem;
    font-size: 0.98rem;
}

.main-content .form-group input,
.main-content .form-group textarea,
.main-content .form-group select,
.main-content .form-control {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}

.main-content .table th,
.main-content .table td,
.main-content .admin-table th,
.main-content .admin-table td {
    padding: 10px 12px;
    font-size: 0.88rem;
}

.main-content .badge,
.main-content .status,
.main-content .project-status,
.main-content .benefit-pill {
    font-size: 0.7rem;
}

/* Module normalization: tabs, filters, search forms and list rhythm */
.main-content .page-tabs,
.main-content .form-tabs,
.main-content .filter-tabs,
.main-content .tab-header {
    gap: 8px;
    margin-bottom: 12px;
}

.main-content .page-tab-btn,
.main-content .form-tab-btn,
.main-content .filter-tab,
.main-content .tab-btn {
    min-height: 36px;
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 8px;
}

.main-content .search-form {
    gap: 8px;
}

.main-content .search-form .form-group {
    margin-bottom: 0;
    gap: 6px;
}

.main-content .search-form .form-group label {
    margin-bottom: 0;
    font-size: 0.82rem;
}

.main-content .search-form input,
.main-content .search-form select,
.main-content .search-form .form-control {
    min-height: 38px;
    padding: 0.55rem 0.72rem;
    font-size: 0.9rem;
}

.main-content .search-form .btn-group {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-content .search-form .btn,
.main-content .search-form .btn-sm {
    min-height: 38px;
    padding: 0.55rem 0.8rem;
}

.main-content .events-container,
.main-content .listings-list,
.main-content .grid.grid-1 {
    gap: 10px;
}

.main-content .event-item,
.main-content .listing-row,
.main-content .member-card {
    border-radius: 10px;
}

/* Button stability and contrast fixes */
.btn::before {
    display: none !important;
}

.btn,
.btn:hover,
.btn:focus-visible {
    transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.btn:hover {
    box-shadow: var(--box-shadow-sm);
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.btn[style*="background: white"]:hover,
.btn[style*="background:white"]:hover,
.btn[style*="background-color: white"]:hover,
.btn[style*="background-color:white"]:hover,
.btn[style*="background:#fff"]:hover,
.btn[style*="background-color:#fff"]:hover {
    color: var(--primary-color) !important;
}

/* Final normalization pass: compact and consistent module rhythm */
.main-content .card {
    border-radius: 10px;
    padding: 12px;
}

.main-content .card-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.main-content .card-title {
    font-size: 1.08rem;
    line-height: 1.3;
}

.main-content .form-group {
    margin-bottom: 10px;
}

.main-content .form-group label {
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.main-content .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.main-content .tab-content,
.main-content .tabs-content {
    margin-top: 8px;
}

.main-content .tab-pane,
.main-content .tab-panel {
    padding-top: 6px;
}

/* Unified Quill density across modules */
.main-content .ql-toolbar.ql-snow {
    padding: 4px 6px;
}

.main-content .ql-snow .ql-picker,
.main-content .ql-snow .ql-picker-label,
.main-content .ql-snow .ql-picker-item,
.main-content .ql-snow .ql-picker.ql-font,
.main-content .ql-snow .ql-picker.ql-size {
    font-size: 0.84rem;
}

.main-content .ql-container.ql-snow {
    font-size: 0.92rem;
}

/* Compact event list blocks */
.main-content .events-container {
    margin-top: 8px;
    gap: 8px;
}

.main-content .event-item .event-content {
    padding: 10px;
    gap: 0;
}

.main-content .event-item .event-header {
    margin-bottom: 6px;
}

.main-content .event-item .event-description {
    margin-bottom: 6px;
    line-height: 1.3;
}

.main-content .event-item .event-details-row {
    margin-bottom: 6px;
    gap: 6px;
}

.main-content .event-item .event-actions {
    padding-top: 6px;
}

/* Forum list compactness */
.main-content .forum-topic,
.main-content .forum-post,
.main-content .forum-category {
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .main-content .card {
        padding: 10px;
    }

    .main-content .form-actions {
        gap: 6px;
    }

    .main-content .event-item .event-content {
        padding: 8px;
    }
}

/* Cross-module normalization for admin + frontend */
.main-content {
    --ui-gap-xs: 4px;
    --ui-gap-sm: 8px;
    --ui-gap-md: 12px;
    --ui-gap-lg: 16px;
}

.main-content .page-header {
    margin-bottom: var(--ui-gap-md) !important;
}

.main-content .page-title {
    font-size: 1.5rem !important;
    line-height: 1.25;
    margin-bottom: var(--ui-gap-xs);
}

.main-content .page-subtitle {
    font-size: 0.88rem !important;
    opacity: 0.9;
}

.main-content .stats-grid,
.main-content .dashboard-stats {
    gap: var(--ui-gap-sm) !important;
    margin-bottom: var(--ui-gap-md) !important;
}

.main-content .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
}

.main-content .stat-card .stat-number {
    font-size: 1.18rem !important;
}

.main-content .stat-card .stat-label {
    font-size: 0.78rem !important;
}

.main-content .filters-section,
.main-content .search-section,
.main-content .admin-filters,
.main-content .admin-members-search,
.main-content .admin-events-search,
.main-content .admin-benefits-filter {
    gap: var(--ui-gap-sm) !important;
    margin-bottom: var(--ui-gap-md) !important;
}

.main-content .filter-buttons,
.main-content .admin-benefits-actions,
.main-content .admin-actions,
.main-content .modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px !important;
}

.main-content .table-responsive {
    margin-top: var(--ui-gap-sm);
}

.main-content .admin-table th,
.main-content .admin-table td,
.main-content .admin-events-table th,
.main-content .admin-events-table td,
.main-content .admin-benefits-table th,
.main-content .admin-benefits-table td {
    padding: 8px 10px !important;
    font-size: 0.84rem !important;
    line-height: 1.35;
}

.main-content .admin-table .actions,
.main-content .admin-events-table .actions {
    width: 1%;
    white-space: nowrap;
}

.main-content .admin-actions .btn,
.main-content .admin-benefits-actions .btn,
.main-content .action-btn {
    min-height: 32px !important;
    padding: 0.38rem 0.56rem !important;
    font-size: 0.78rem !important;
}

.main-content .pagination {
    margin-top: var(--ui-gap-md) !important;
    gap: 6px !important;
}

.main-content .pagination-info {
    font-size: 0.82rem;
}

.main-content .empty-state {
    padding: 14px 12px !important;
}

.main-content .empty-state-title {
    font-size: 1rem !important;
}

.main-content .empty-state-message {
    font-size: 0.86rem !important;
}

.main-content .modal-content {
    padding: 12px !important;
}

.main-content .modal-content h3,
.main-content .modal-content .modal-title {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
}

.main-content .form-grid {
    gap: 10px !important;
}

/* Better rhythm for long admin forms */
.main-content .admin-benefits-form .form-group,
.main-content .add-member-form .form-group,
.main-content .edit-member-form .form-group {
    margin-bottom: 8px !important;
}

/* Dashboard events/notifications consistency */
.dashboard .main-content .events-list {
    gap: 8px;
}

.dashboard .main-content .events-list .event-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transform: none !important;
    min-height: 0 !important;
}

.dashboard .main-content .events-list .event-item:hover {
    transform: none !important;
}

.dashboard .main-content .events-list .event-date {
    width: 40px;
    height: 40px;
}

.dashboard .main-content .events-list .event-day {
    font-size: 1rem;
}

.dashboard .main-content .events-list .event-month {
    font-size: 0.6rem;
}

.dashboard .main-content .events-list .event-details {
    min-width: 0;
}

.dashboard .main-content .events-list .event-title {
    margin: 0 0 3px 0;
    color: var(--text-primary) !important;
    font-size: 0.92rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard .main-content .events-list .event-organizer,
.dashboard .main-content .events-list .event-time {
    margin: 0;
    color: var(--text-secondary) !important;
    font-size: 0.78rem;
    line-height: 1.24;
}

.dashboard .main-content .events-list .event-actions {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dashboard .main-content .events-list .event-actions .btn {
    min-height: 30px;
    padding: 0.32rem 0.56rem;
    font-size: 0.74rem;
}

.dashboard .main-content .notifications-list {
    gap: 8px;
}

.dashboard .main-content .block-pair .card .notification-item {
    padding: 10px;
}

/* Pixel pass: admin/members */
.main-content .admin-members-search {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: end;
}

.main-content .admin-members-search .form-group {
    margin-bottom: 0 !important;
}

.main-content .admin-members-search .btn,
.main-content .admin-members-search .btn-sm {
    min-height: 36px;
}

/* Pixel pass: admin/all-events */
.main-content .filters-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.main-content .filters-section .filter-buttons {
    gap: 6px !important;
}

.main-content .filters-section .search-form {
    gap: 6px;
    margin-bottom: 0;
}

/* Pixel pass: admin/blog-posts */
.main-content .blog-admin-header,
.main-content .lms-admin-header {
    margin-bottom: 12px;
    gap: 10px;
}

.main-content .blog-filters {
    margin-bottom: 12px;
}

.main-content .blog-filters .filter-row {
    gap: 8px;
    align-items: end;
}

.main-content .blog-filters .filter-group label {
    font-size: 0.8rem;
    margin-bottom: 3px;
}

.main-content .blog-filters .filter-input {
    min-height: 36px;
    padding: 0.5rem 0.7rem;
    font-size: 0.86rem;
}

.main-content .posts-table .post-title a {
    font-size: 0.92rem;
    line-height: 1.3;
}

.main-content .posts-table .post-excerpt,
.main-content .posts-table .post-meta,
.main-content .posts-table .post-stats {
    font-size: 0.78rem;
}

/* Pixel pass: admin/benefits */
.main-content .benefits-admin-grid {
    gap: 10px !important;
}

.main-content .admin-benefits-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.main-content .admin-benefits-filter .admin-benefits-actions {
    grid-column: 1 / -1;
}

.main-content .admin-benefits-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.main-content .admin-benefits-form .btn {
    justify-self: start;
}

/* Pixel pass: admin/lms-courses */
.main-content .courses-table {
    border-radius: 10px;
    overflow: auto;
}

.main-content .courses-table table th,
.main-content .courses-table table td {
    padding: 8px 10px;
    font-size: 0.84rem;
}

.main-content .courses-table .course-title a {
    font-size: 0.92rem;
    line-height: 1.3;
}

.main-content .courses-table .course-meta,
.main-content .courses-table .course-stats {
    font-size: 0.78rem;
}

.main-content .courses-table .course-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.main-content .courses-table .course-actions .btn-sm {
    min-height: 32px;
    padding: 0.34rem 0.52rem;
}

@media (max-width: 1100px) {
    .main-content .admin-members-search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main-content .filters-section {
        grid-template-columns: 1fr;
    }

    .main-content .admin-benefits-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard .main-content .events-list .event-item {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .dashboard .main-content .events-list .event-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .main-content .admin-members-search,
    .main-content .admin-benefits-filter {
        grid-template-columns: 1fr;
    }

    .main-content .admin-benefits-form {
        grid-template-columns: 1fr;
    }
}

/* Admin actions hamburger menu (all admin modules) */
.main-content .admin-actions-enhanced {
    display: flex;
    justify-content: flex-end;
}

.main-content .admin-actions-dropdown {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.main-content .admin-actions-toggle {
    min-height: 32px !important;
    min-width: 32px;
    padding: 0.34rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.main-content .admin-actions-toggle .admin-action-text {
    font-size: 0.76rem;
    font-weight: 600;
}

.main-content .admin-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--box-shadow-lg);
    padding: 6px;
    display: none;
    z-index: 1200;
}

.main-content .admin-actions-dropdown.open .admin-actions-menu {
    display: block;
}

.main-content .admin-actions-dropdown.drop-up .admin-actions-menu {
    top: auto;
    bottom: calc(100% + 6px);
}

.main-content .admin-actions-menu .admin-action-entry {
    width: 100%;
    margin: 0;
    display: block !important;
}

.main-content .admin-actions-menu .admin-action-entry + .admin-action-entry {
    margin-top: 4px;
}

.main-content .admin-actions-menu .admin-action-control,
.main-content .admin-actions-menu .admin-action-entry .btn,
.main-content .admin-actions-menu .admin-action-entry a,
.main-content .admin-actions-menu .admin-action-entry button {
    width: 100%;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 34px !important;
    padding: 0.4rem 0.58rem !important;
    text-align: left;
    border-radius: 8px;
    font-size: 0.8rem !important;
    text-decoration: none;
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.main-content .admin-actions-menu .admin-action-entry .btn::before {
    display: none !important;
}

.main-content .admin-actions-menu .admin-action-entry .btn:hover,
.main-content .admin-actions-menu .admin-action-entry a:hover,
.main-content .admin-actions-menu .admin-action-entry button:hover,
.main-content .admin-actions-menu .admin-action-entry .btn:focus-visible,
.main-content .admin-actions-menu .admin-action-entry a:focus-visible,
.main-content .admin-actions-menu .admin-action-entry button:focus-visible {
    background: var(--background-light) !important;
    color: var(--text-primary) !important;
}

/* Force unified look for all button variants inside action dropdown */
.main-content .admin-actions-menu .admin-action-entry .btn-primary,
.main-content .admin-actions-menu .admin-action-entry .btn-success,
.main-content .admin-actions-menu .admin-action-entry .btn-warning,
.main-content .admin-actions-menu .admin-action-entry .btn-danger,
.main-content .admin-actions-menu .admin-action-entry .btn-secondary,
.main-content .admin-actions-menu .admin-action-entry .btn-outline {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 0 !important;
}

.main-content .admin-actions-menu .admin-action-entry i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    justify-self: center;
}

.main-content .admin-actions-menu .admin-action-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}