/* ========== RADZEN THEME OVERRIDES - MODERN DESIGN ========== */

/* ========== CSS CUSTOM PROPERTIES (ROOT VARIABLES) ========== */
:root {
    /* ========== PRIMARY COLOR PALETTE — Emerald Green ========== */
    /* Sports-native green: evokes fields, energy, and growth */
    --rz-primary: #16a34a !important;
    --rz-primary-darker: #15803d !important;
    --rz-primary-lighter: #dcfce7 !important;
    --rz-primary-light: #86efac !important;
    --sqv-primary-rgb: 22, 163, 74;

    /* Force Light Theme Colors - Override Radzen Theme */
    --rz-sidebar-background: #ffffff !important;
    --rz-sidebar-color: #374151 !important;
    --rz-navigation-item-hover-background: #f3f4f6 !important;
    --rz-navigation-item-active-background: #dcfce7 !important;
    --rz-navigation-item-active-color: #15803d !important;

    /* Panel Menu - CRITICAL FIX */
    --rz-panel-menu-background-color: #ffffff !important;
    --rz-panel-menu-item-background-color: #ffffff !important;
    --rz-panel-menu-item-color: #374151 !important;
    --rz-panel-menu-item-hover-background-color: #f3f4f6 !important;
    --rz-panel-menu-item-hover-color: #374151 !important;
    --rz-panel-menu-item-active-background-color: #dcfce7 !important;
    --rz-panel-menu-item-active-color: #15803d !important;

    /* 2nd level (sub-menu) items - override dark default */
    --rz-panel-menu-item-2nd-level-background-color: #ffffff !important;
    --rz-panel-menu-item-2nd-level-color: #374151 !important;
    --rz-panel-menu-item-2nd-level-hover-background-color: #f3f4f6 !important;
    --rz-panel-menu-item-2nd-level-hover-color: #374151 !important;

    /* Remove borders from panel menu items */
    --rz-panel-menu-item-border: none !important;
    --rz-panel-menu-item-border-width: 0 !important;

    --rz-header-background: #ffffff !important;
    --rz-header-border: #e5e7eb !important;

    --rz-body-background: #f9fafb !important;

    --rz-base-background-color: #ffffff !important;
    --rz-base-100: #f9fafb !important;
    --rz-base-200: #f3f4f6 !important;
    --rz-base-300: #e5e7eb !important;

    --rz-text-color: #1f2937 !important;
    --rz-text-secondary-color: #6b7280 !important;

    --rz-border-color: #e5e7eb !important;

    /* Border Radius Scale */
    --rz-border-radius: 8px !important;
    --rz-border-radius-0: 0px !important;
    --rz-border-radius-1: 2px !important;
    --rz-border-radius-2: 4px !important;
    --rz-border-radius-3: 6px !important;
    --rz-border-radius-4: 8px !important;
    --rz-border-radius-5: 10px !important;
    --rz-border-radius-6: 12px !important;
    --rz-border-radius-7: 14px !important;
    --rz-border-radius-8: 16px !important;
    --rz-border-radius-9: 20px !important;
    --rz-border-radius-10: 24px !important;

    /* Semantic Aliases */
    --rz-border-radius-sm: 4px !important;
    --rz-border-radius-md: 8px !important;
    --rz-border-radius-lg: 12px !important;
    --rz-border-radius-xl: 16px !important;

    /* Typography */
    --rz-font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;

    /* === Sqvadra design-system extensions === */
    --sqv-brand-blue: #1E88E5;
    --sqv-brand-red: #E53935;
    --sqv-brand-gradient: linear-gradient(135deg, #1E88E5 0%, #E53935 100%);

    --sqv-badge-attending: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --sqv-badge-not-attending: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
    --sqv-badge-maybe: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);

    --rarity-common: #6c757d;
    --rarity-rare: #0dcaf0;
    --rarity-epic: #ffc107;
    --rarity-legendary: #dc3545;
    --medal-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --medal-silver: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    --medal-bronze: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);

    --sqv-shadow-focus: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

/* ========== GLOBAL ROUNDED CORNERS ========== */

/* Cards */
.rz-card {
    border-radius: var(--rz-border-radius-lg, 12px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rz-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Panels */
.rz-panel {
    border-radius: var(--rz-border-radius-lg, 12px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* ========== DATAGRID & TABLES ========== */

.rz-datatable,
.rz-grid {
    border-radius: var(--rz-border-radius-lg, 12px) !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.rz-datatable-table,
.rz-grid-table {
    border-radius: var(--rz-border-radius-lg, 12px) !important;
}

/* Grid filter row */
.rz-datatable-filter-row input,
.rz-grid-filter input {
    border-radius: var(--rz-border-radius, 8px) !important;
}

/* Grid header */
.rz-datatable-header,
.rz-grid-header {
    border-top-left-radius: var(--rz-border-radius-lg, 12px) !important;
    border-top-right-radius: var(--rz-border-radius-lg, 12px) !important;
}

/* Column filter dropdown */
.rz-column-filter-menu {
    border-radius: var(--rz-border-radius, 8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Dialogs */
.rz-dialog {
    border-radius: var(--rz-border-radius-lg, 12px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Dropdowns */
.rz-dropdown {
    border-radius: var(--rz-border-radius, 8px) !important;
}

.rz-dropdown-panel {
    border-radius: var(--rz-border-radius, 8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* ========== FORM ELEMENTS - ROUNDED CORNERS - ULTRA AGGRESSIVE ========== */

/* Text inputs - ALL variants */
.rz-textbox,
.rz-textbox input,
.rz-inputtext,
.rz-numeric,
.rz-numeric input,
.rz-datepicker-input,
.rz-timepicker-input,
.rz-textarea,
.rz-password,
.rz-password input,
input.rz-inputtext,
input.rz-textbox,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
textarea.rz-textarea,
select,
select.rz-dropdown {
    border-radius: var(--rz-border-radius) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state */
.rz-textbox:focus,
.rz-numeric:focus,
.rz-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--rz-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--sqv-primary-rgb, 22, 163, 74), 0.12) !important;
    outline: none !important;
}

/* Checkboxes and Radio buttons */
.rz-checkbox,
.rz-radiobutton,
input[type="checkbox"],
input[type="radio"] {
    border-radius: 4px !important;
}

input[type="radio"],
.rz-radiobutton {
    border-radius: 50% !important;
}

/* File inputs */
input[type="file"] {
    border-radius: var(--rz-border-radius, 8px) !important;
}

/* Select dropdowns - ALL variants */
.rz-dropdown,
.rz-dropdown > *,
.rz-multiselect,
.rz-multiselect > *,
.rz-listbox,
.rz-dropdown-label-container,
.rz-selectbar,
.rz-selectbar .rz-button,
select.rz-dropdown,
.rz-dropdown-trigger {
    border-radius: var(--rz-border-radius) !important;
}

/* Dropdown panels and menus - ALL variants */
.rz-dropdown-panel,
.rz-dropdown-items,
.rz-dropdown-items-wrapper,
.rz-multiselect-panel,
.rz-multiselect-items,
.rz-menu,
.rz-menubar,
.rz-contextmenu,
.rz-tieredmenu,
.rz-splitbutton-menubutton + .rz-menu,
.rz-dropdown-menu {
    border-radius: var(--rz-border-radius) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Autocomplete */
.rz-autocomplete,
.rz-autocomplete-input {
    border-radius: var(--rz-border-radius, 8px) !important;
}

.rz-autocomplete-panel {
    border-radius: var(--rz-border-radius, 8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* ========== BUTTONS (ALL VARIANTS) - ULTRA AGGRESSIVE ========== */

/* Base button styles */
.rz-button,
button.rz-button,
a.rz-button,
.rz-splitbutton button,
.rz-splitbutton-menubutton,
.rz-fileupload-choose,
.rz-selectbar .rz-button,
.rz-scheduler-nav .rz-button,
.rz-toolbar .rz-button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-radius: var(--rz-border-radius) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Button hover effects */
.rz-button:hover:not(:disabled),
button.rz-button:hover:not(:disabled),
.rz-splitbutton-menubutton:hover,
.rz-fileupload-choose:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pagination buttons - ALL variants */
.rz-paginator button,
.rz-paginator .rz-button,
.rz-paginator .rz-paginator-page,
.rz-paginator .rz-paginator-pages .rz-paginator-page,
.rz-paginator-first,
.rz-paginator-prev,
.rz-paginator-next,
.rz-paginator-last,
.rz-paginator-current,
button.rz-paginator-first,
button.rz-paginator-prev,
button.rz-paginator-next,
button.rz-paginator-last {
    border-radius: var(--rz-border-radius) !important;
    transition: all 0.2s ease;
}

/* Grid action buttons - ALL variants */
.rz-grid button,
.rz-grid-table button,
.rz-datatable button,
.rz-cell-data button,
.rz-grid-cell button,
table button,
td button,
th button {
    border-radius: var(--rz-border-radius) !important;
}

/* Button groups */
.rz-button-group .rz-button:first-child,
.rz-buttongroup .rz-button:first-child {
    border-top-left-radius: var(--rz-border-radius) !important;
    border-bottom-left-radius: var(--rz-border-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rz-button-group .rz-button:last-child,
.rz-buttongroup .rz-button:last-child {
    border-top-right-radius: var(--rz-border-radius) !important;
    border-bottom-right-radius: var(--rz-border-radius) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.rz-button-group .rz-button:not(:first-child):not(:last-child),
.rz-buttongroup .rz-button:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* ── Scheduler view buttons (Month/Week/Day): separate, not joined ─── */
/* Radzen renders view tabs in .rz-scheduler-nav-views with .rz-button.rz-primary.
   Override Radzen's scheduler variables to use brand green instead of default blue. */
.rz-scheduler-nav-views {
    gap: 6px !important;
    --rz-scheduler-view-button-background-color: #f0fdf4;
    --rz-scheduler-view-button-color: #15803d;
    --rz-scheduler-view-button-border: 1px solid #86efac;
    --rz-scheduler-view-selected-background-color: #16a34a;
    --rz-scheduler-view-selected-border-color: #15803d;
    --rz-scheduler-view-selected-color: #ffffff;
}

.rz-scheduler-nav-views .rz-button.rz-primary,
.rz-scheduler-nav-views .rz-button.rz-primary:first-child,
.rz-scheduler-nav-views .rz-button.rz-primary:last-child {
    border-radius: var(--rz-border-radius) !important;
    border-inline-end: var(--rz-scheduler-view-button-border) !important;
}

/* Prev/Next buttons also have joined look - separate them too */
.rz-scheduler-nav-prev-next {
    gap: 6px !important;
}

.rz-scheduler-nav-prev-next .rz-button,
.rz-scheduler-nav-prev-next .rz-button.rz-prev,
.rz-scheduler-nav-prev-next .rz-button.rz-next {
    border-radius: var(--rz-border-radius) !important;
}

/* Toggle button */
.rz-togglebutton,
.rz-selectbutton .rz-button {
    border-radius: var(--rz-border-radius) !important;
}

/* Icon-only buttons */
.rz-button-icon-only {
    border-radius: var(--rz-border-radius) !important;
}

/* Numeric spinner buttons */
.rz-numeric .rz-numeric-button,
.rz-spinner-button {
    border-radius: var(--rz-border-radius-2) !important;
}

/* ========== HEADER IMPROVEMENTS ========== */

.rz-header {
    background: white !important;
    border-bottom: 1px solid var(--rz-border-color, #e5e7eb) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    padding: 0.75rem 1.5rem !important;
    height: 64px;
    display: flex;
    align-items: center;
}

/* Header branding */
.rz-header .rz-stack {
    height: 100%;
}

/* Sidebar Toggle - specifično stiliziran */
.rz-header .rz-sidebar-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--rz-text-color) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-header .rz-sidebar-toggle:hover {
    background: var(--rz-base-200, #f3f4f6) !important;
    transform: none !important;
}

/* ========== SIDEBAR IMPROVEMENTS ========== */

/* Force light sidebar background - very specific to override Radzen themes */
.rz-sidebar,
aside.rz-sidebar,
.rz-layout-sidebar,
.rz-sidebar-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

/* Panel menu items - force light colors */
.rz-sidebar .rz-navigation-item,
.rz-sidebar .rz-panel-menu-item,
.rz-sidebar .rz-panelmenu-panel,
.rz-sidebar .rz-panelmenu-content,
.rz-panel-menu .rz-panel-menu-item,
.rz-panel-menu .rz-navigation-item-wrapper {
    border-radius: var(--rz-border-radius, 8px) !important;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
    color: #374151 !important; /* Dark text on light background */
    border: none !important; /* Remove any borders */
}

.rz-sidebar .rz-navigation-item:hover,
.rz-sidebar .rz-panel-menu-item:hover,
.rz-panel-menu .rz-panel-menu-item:hover,
.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background: #f3f4f6 !important;
    color: #374151 !important; /* Keep text color same on hover */
    /* Removed transform: translateX(2px) to prevent horizontal scroll */
}

/* Keep icon color same on hover */
.rz-sidebar .rz-navigation-item:hover .rz-navigation-item-icon,
.rz-sidebar .rz-panel-menu-item:hover .rz-navigation-item-icon,
.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
    color: #374151 !important;
}

.rz-sidebar .rz-navigation-item-active,
.rz-sidebar .rz-panel-menu-item-active,
.rz-panel-menu .rz-panel-menu-item.rz-state-active {
    background: #dcfce7 !important;
    color: #15803d !important;
    font-weight: 600;
    border-left: 3px solid #16a34a !important;
    padding-left: calc(0.75rem - 3px) !important;
}

/* ========== SUB-MENU (children) BACKGROUND FIX ========== */

/* Override the specific Radzen rule that sets dark 2nd-level background */
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: #ffffff !important;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: #f3f4f6 !important;
}

/* Force white background on expanded sub-menu containers */
.rz-panel-menu .rz-navigation-item-children,
.rz-sidebar .rz-navigation-item-children,
.rz-panel-menu ul ul,
.rz-sidebar ul ul {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Sub-items: indent and keep white background */
.rz-panel-menu .rz-navigation-item-children .rz-panel-menu-item,
.rz-panel-menu .rz-navigation-item-children .rz-navigation-item,
.rz-panel-menu .rz-navigation-item-children .rz-navigation-item-wrapper {
    background: #ffffff !important;
    padding-left: 0.75rem !important;
    border-left: 2px solid #e5e7eb !important;
    margin-left: 0.5rem !important;
    border-radius: 0 var(--rz-border-radius, 8px) var(--rz-border-radius, 8px) 0 !important;
}

/* Hover on sub-items */
.rz-panel-menu .rz-navigation-item-children .rz-panel-menu-item:hover,
.rz-panel-menu .rz-navigation-item-children .rz-navigation-item-wrapper:hover {
    background: #f3f4f6 !important;
    border-left-color: #16a34a !important;
}

/* Active sub-item */
.rz-panel-menu .rz-navigation-item-children .rz-panel-menu-item.rz-state-active,
.rz-panel-menu .rz-navigation-item-children .rz-navigation-item-active {
    background: #dcfce7 !important;
    border-left-color: #16a34a !important;
    color: #15803d !important;
    font-weight: 600;
}

/* ========== BODY IMPROVEMENTS ========== */

.rz-body {
    background: var(--rz-base-200, #f9fafb) !important;
}

/* ========== BREADCRUMBS ========== */

.rz-breadcrumb {
    background: transparent !important;
    padding: 0 0 1.5rem 0 !important;
    margin-bottom: 0 !important;
}

.rz-breadcrumb-item {
    color: var(--rz-text-secondary-color, #6b7280) !important;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.rz-breadcrumb-item:hover {
    color: var(--rz-primary) !important;
}

.rz-breadcrumb-item:last-child {
    color: var(--rz-text-color) !important;
    font-weight: 600;
}

/* ========== BADGES ========== */

.rz-badge {
    border-radius: var(--rz-border-radius, 8px) !important;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
}

/* ========== ALERTS ========== */

.rz-alert {
    border-radius: var(--rz-border-radius, 8px) !important;
    border-left-width: 4px !important;
}

/* ========== PAGINATOR ========== */

.rz-paginator {
    border-radius: 0 0 var(--rz-border-radius-lg, 12px) var(--rz-border-radius-lg, 12px) !important;
    background: var(--rz-base-100, #ffffff) !important;
    padding: 0.75rem 1rem !important;
}

.rz-paginator-page,
.rz-paginator-element {
    border-radius: var(--rz-border-radius, 8px) !important;
    margin: 0 0.25rem;
    transition: all 0.2s ease;
}

.rz-paginator-page:hover,
.rz-paginator-element:hover {
    background: var(--rz-base-200, #f3f4f6) !important;
}

/* Page size dropdown in paginator */
.rz-paginator .rz-dropdown {
    border-radius: var(--rz-border-radius, 8px) !important;
}

/* ========== TABS ========== */

.rz-tabview-nav {
    border-bottom: 2px solid var(--rz-border-color, #e5e7eb) !important;
}

.rz-tabview-nav li {
    border-radius: var(--rz-border-radius, 8px) var(--rz-border-radius, 8px) 0 0 !important;
    transition: all 0.2s ease;
}

.rz-tabview-nav .rz-tabview-selected {
    background-color: white !important;
    border-top: 2px solid var(--rz-primary) !important;
    font-weight: 600;
}

/* ========== OTHER FORM COMPONENTS ========== */

/* Slider */
.rz-slider {
    border-radius: 4px !important;
}

.rz-slider-handle {
    border-radius: 50% !important;
}

/* Rating */
.rz-rating-item {
    transition: all 0.2s ease;
}

/* Color picker */
.rz-colorpicker,
.rz-colorpicker-preview {
    border-radius: var(--rz-border-radius, 8px) !important;
}

.rz-colorpicker-panel {
    border-radius: var(--rz-border-radius, 8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Chips */
.rz-chips,
.rz-chips-input {
    border-radius: var(--rz-border-radius, 8px) !important;
}

.rz-chip {
    border-radius: var(--rz-border-radius, 8px) !important;
}

/* Menu items */
.rz-menu-item,
.rz-menuitem-link {
    border-radius: var(--rz-border-radius, 8px) !important;
    margin: 2px 4px;
    transition: all 0.2s ease;
}

.rz-menu-item:hover,
.rz-menuitem-link:hover {
    background: var(--rz-base-200, #f3f4f6) !important;
}

/* ========== HEADER ICON BUTTONS (Notification & Language only) ========== */

/* Notification Bell - ikona i link dobivaju okrugli hover */
.notification-bell .rz-button,
.notification-bell button,
.notification-bell a,
.notification-bell .rz-link {
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.notification-bell .rz-button:hover,
.notification-bell button:hover,
.notification-bell a:hover,
.notification-bell .rz-link:hover {
    background: var(--rz-base-200, #f3f4f6) !important;
}

/* Language Switcher - samo ikona dobiva okrugli hover */
.language-switcher .rz-button,
.language-switcher button {
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.language-switcher .rz-button:hover,
.language-switcher button:hover {
    background: var(--rz-base-200, #f3f4f6) !important;
}

/* UserMenu - ostaje default styling, bez kružnog hover-a */
/* Ne diramo .rz-profile-menu jer se odnosi na cijeli dropdown */

/* ========== HEADER DROPDOWN MENUS (Language & User) ========== */

/* Remove border and shadow from profile menus in header */
ul.rz-profile-menu.language-switcher,
ul.rz-profile-menu.user-menu {
    border-inline-start: none !important;
    box-shadow: none !important;
}

/* ========== LOGO/BRANDING ========== */

.app-logo {
    transition: transform 0.2s ease;
}

.app-logo:hover {
    transform: scale(1.05);
}

/* ========== DASHBOARD STATS CARDS ========== */

.stats-card {
    background: linear-gradient(135deg, var(--rz-primary-lighter, #dcfce7) 0%, white 100%);
    border-left: 4px solid var(--rz-primary);
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ========== SCROLLBAR STYLING ========== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--rz-base-100, #f9fafb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--rz-base-400, #d1d5db);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rz-base-500, #9ca3af);
}

/* ========== ANIMATIONS ========== */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rz-card,
.rz-panel {
    animation: slideIn 0.3s ease-out;
}

/* ========== PAGE HEADERS ========== */

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rz-border-color, #e5e7eb);
}

.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--rz-text-color);
    margin: 0 0 0.5rem 0;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, #6b7280);
    margin: 0;
}

/* ========== SECTION HEADERS ========== */

.section-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

/* ========== RESPONSIVE GRID COLUMN VISIBILITY ========== */
/*
 * CSS-first: kolone se sakrivaju media queryom PRIJE prvog JS painta.
 * Na RadzenDataGridColumn:
 *   desktop kolone:  HeaderCssClass="sqv-dc" CssClass="sqv-dc"
 *   mobilna kartica: HeaderCssClass="sqv-mc" CssClass="sqv-mc"
 */
.sqv-mc { display: none !important; }

@media (max-width: 768px) {
    .sqv-dc { display: none !important; }
    .sqv-mc { display: table-cell !important; }
}

/* sqv-rg: responsive grid wrapper — fixes table-layout when desktop columns are CSS-hidden.
 * Radzen's <colgroup> reserves column widths even when cells are display:none.
 * table-layout:auto ignores <col> widths and redistributes space to visible cells only.
 * Applied only on mobile so desktop column widths remain intact.
 *
 * Actual Radzen DOM classes (verified from HTML):
 *   table element:    .rz-grid-table
 *   scroll wrapper:   .rz-data-grid-data
 */
@media (max-width: 768px) {
    /* Convert table to block layout — avoids table-layout intrinsic width calculation
     * where all <col> widths (e.g. 60+60+200+400+100+150+150 = 1120px) inflate the
     * table beyond its container even when desktop columns are display:none.
     * With display:block, table/tbody/tr behave as normal block elements and always
     * respect their parent's width without overflow. */
    .sqv-rg .rz-grid-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .sqv-rg .rz-grid-table colgroup {
        display: none !important;
    }
    .sqv-rg .rz-grid-table tbody {
        display: block !important;
        width: 100% !important;
    }
    .sqv-rg .rz-grid-table tr {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid var(--rz-border-disabled-color);
    }
    /* Mobile card column fills full block width */
    .sqv-rg .sqv-mc {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Defense-in-depth: also clip the scroll wrapper */
    .sqv-rg .rz-data-grid-data {
        overflow-x: hidden !important;
    }
    /* Hide column header row on mobile — card layout is self-explanatory */
    .sqv-rg thead {
        display: none !important;
    }
    /* Remove outer RadzenCard visual styling when it wraps a sqv-rg grid —
     * row borders provide enough separation; double border looks bad on mobile. */
    .rz-card:has(.sqv-rg) {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* ========== MOBILE OPTIMIZATIONS ========== */
/* Conservative - only iOS zoom prevention */

@media (max-width: 768px) {
    /* Prevent iOS zoom on input focus */
    .rz-textbox input,
    .rz-numeric input,
    .rz-dropdown,
    .rz-multiselect {
        font-size: 16px !important;
    }
}

/* ========== UTILITY CLASSES ========== */

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.shadow-md {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.shadow-lg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.rounded {
    border-radius: var(--rz-border-radius, 8px) !important;
}

.rounded-lg {
    border-radius: var(--rz-border-radius-lg, 12px) !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

/* Color Utilities */
.text-muted {
    color: var(--rz-text-secondary-color, #6b7280) !important;
}

.text-primary {
    color: var(--rz-primary) !important;
}

.bg-light {
    background-color: var(--rz-base-100, #f9fafb) !important;
}

/* Spacing Utilities */
.gap-sm {
    gap: 0.5rem !important;
}

.gap-md {
    gap: 1rem !important;
}

.gap-lg {
    gap: 1.5rem !important;
}