/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: rgba(0, 0, 0, 0.87);
    padding: 0 16px 16px 16px;
    max-width: 1920px;
    margin: 0 auto;
    font-family: var(--font-primary);
}

/* Color Variables - Complete Palette */
:root {
    /* Primary Colors */
    --primary-main: #fa0d1b;
    --primary-dark: #c80a16;
    --primary-light: #fa0d1b;

    /* Secondary Colors */
    --secondary-main: #f9fcff;
    --secondary-dark: #e0e3f3;
    --secondary-tertiary: #aae152;

    /* Error Colors */
    --error-main: #f44336;

    /* Text Colors */
    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.5);
    --text-tertiary: rgba(0, 0, 0, 0.32);

    /* Background Colors */
    --background-default: #ffffff;
    --background-paper: #f7f7f7;
    --background-auth: #f5f5f5;

    /* Common Colors */
    --white: #ffffff;
    --black: #000000;

    /* Action Colors */
    --action-active: #0000008a;
    --action-hover: #00000008;
    --action-selected: #00000014;
    --action-disabled: #00000042;
    --action-disabled-background: #0000001f;
    --action-focus: #0000001f;

    --surface: #f7f7f7;

    --status-active: #45a635;
    --status-not-active: #f44336;
    --status-grade: #efa631;
    --status-snippet-text: #897336;
    --status-snippet-background: #f3ede0;
    --status-pending: #c80a16;
    --status-approved: #81c34e;
    --status-in-work: #5c8ce6;
    --status-completed: #0000008a;

    --cancel-main: #eaeaea;

    --text-field-border: #00000029;
    --text-field-fill: #0000000a;

    --divider: #00000029;

    --bgHover: #1f1f1f08;

    --input-bg: #1f1f1f08;
    --input-border: #1f1f1f33;
    --input-placeholder: #1f1f1f7a;

    /* Additional color variables for consistency */
    --text-dark: #333333;
    --text-medium: #666666;
    --text-light-gray: #999999;
    --background-light-gray: #f8f9fa;
    --overlay-main: rgba(0, 0, 0, 0.1);
    --border-light: #e0e0e0;
    --background-light: #f5f5f5;
    --error-dark: #d32f2f;

    /* Font Variables */
    --font-primary: "Roboto", sans-serif;
    --font-secondary: "Inter", sans-serif;
    --font-tight: "Inter Tight", sans-serif;

    /* Typography Variables */
    /* Headlines */
    --headline-1-font-family: "Inter Tight", sans-serif;
    --headline-1-font-weight: 500;
    --headline-1-font-size: 34px;
    --headline-1-line-height: 40px;
    --headline-1-letter-spacing: 0.25px;

    --headline-2-font-family: "Inter", sans-serif;
    --headline-2-font-weight: 500;
    --headline-2-font-size: 24px;
    --headline-2-line-height: 32px;
    --headline-2-letter-spacing: 0px;

    --headline-3-font-family: "Inter", sans-serif;
    --headline-3-font-weight: 500;
    --headline-3-font-size: 20px;
    --headline-3-line-height: 24px;
    --headline-3-letter-spacing: 0.15px;

    /* Subtitles */
    --subtitle-1-font-family: "Inter", sans-serif;
    --subtitle-1-font-weight: 500;
    --subtitle-1-font-size: 16px;
    --subtitle-1-line-height: 24px;
    --subtitle-1-letter-spacing: 0.15px;

    --subtitle-2-font-family: "Inter", sans-serif;
    --subtitle-2-font-weight: 500;
    --subtitle-2-font-size: 14px;
    --subtitle-2-line-height: 20px;
    --subtitle-2-letter-spacing: 0.1px;

    /* Body Text */
    --body-1-font-family: "Inter", sans-serif;
    --body-1-font-weight: 400;
    --body-1-font-size: 16px;
    --body-1-line-height: 24px;
    --body-1-letter-spacing: 0.15px;

    --body-2-font-family: "Inter", sans-serif;
    --body-2-font-weight: 400;
    --body-2-font-size: 14px;
    --body-2-line-height: 20px;
    --body-2-letter-spacing: 0.15px;

    /* Caption */
    --caption-font-family: "Inter", sans-serif;
    --caption-font-weight: 400;
    --caption-font-size: 12px;
    --caption-line-height: 16px;
    --caption-letter-spacing: 0.4px;

    /* Buttons */
    --button-large-font-family: "Inter", sans-serif;
    --button-large-font-weight: 500;
    --button-large-font-size: 18px;
    --button-large-line-height: 26px;
    --button-large-letter-spacing: 0.46px;

    --button-medium-font-family: "Inter", sans-serif;
    --button-medium-font-weight: 500;
    --button-medium-font-size: 16px;
    --button-medium-line-height: 24px;
    --button-medium-letter-spacing: 0.46px;

    --button-small-font-family: "Inter Tight", sans-serif;
    --button-small-font-weight: 500;
    --button-small-font-size: 14px;
    --button-small-line-height: 20px;
    --button-small-letter-spacing: 0.46px;

    /* Input Labels */
    --input-label-font-family: "Inter", sans-serif;
    --input-label-font-weight: 400;
    --input-label-font-size: 12px;
    --input-label-line-height: 12px;
    --input-label-letter-spacing: 0.15px;

    --input-helper-font-family: "Inter", sans-serif;
    --input-helper-font-weight: 400;
    --input-helper-font-size: 12px;
    --input-helper-line-height: 20px;
    --input-helper-letter-spacing: 0.4px;

    /* Spacing Variables */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;

    /* Border Radius Variables */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
}

/* Typography Classes */
.headline-1 {
    font-family: var(--headline-1-font-family);
    font-weight: var(--headline-1-font-weight);
    font-size: var(--headline-1-font-size);
    line-height: var(--headline-1-line-height);
    letter-spacing: var(--headline-1-letter-spacing);
}

.headline-2 {
    font-family: var(--headline-2-font-family);
    font-weight: var(--headline-2-font-weight);
    font-size: var(--headline-2-font-size);
    line-height: var(--headline-2-line-height);
    letter-spacing: var(--headline-2-letter-spacing);
}

.headline-3 {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-font-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
}

.subtitle-1 {
    font-family: var(--subtitle-1-font-family);
    font-weight: var(--subtitle-1-font-weight);
    font-size: var(--subtitle-1-font-size);
    line-height: var(--subtitle-1-line-height);
    letter-spacing: var(--subtitle-1-letter-spacing);
}

.subtitle-2 {
    font-family: var(--subtitle-2-font-family);
    font-weight: var(--subtitle-2-font-weight);
    font-size: var(--subtitle-2-font-size);
    line-height: var(--subtitle-2-line-height);
    letter-spacing: var(--subtitle-2-letter-spacing);
}

.body-1 {
    font-family: var(--body-1-font-family);
    font-weight: var(--body-1-font-weight);
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height);
    letter-spacing: var(--body-1-letter-spacing);
}

.body-2 {
    font-family: var(--body-2-font-family);
    font-weight: var(--body-2-font-weight);
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    letter-spacing: var(--body-2-letter-spacing);
}

.caption {
    font-family: var(--caption-font-family);
    font-weight: var(--caption-font-weight);
    font-size: var(--caption-font-size);
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
}

.button-large {
    font-family: var(--button-large-font-family);
    font-weight: var(--button-large-font-weight);
    font-size: var(--button-large-font-size);
    line-height: var(--button-large-line-height);
    letter-spacing: var(--button-large-letter-spacing);
}

.button-medium {
    font-family: var(--button-medium-font-family);
    font-weight: var(--button-medium-font-weight);
    font-size: var(--button-medium-font-size);
    line-height: var(--button-medium-line-height);
    letter-spacing: var(--button-medium-letter-spacing);
}

.button-small {
    font-family: var(--button-small-font-family);
    font-weight: var(--button-small-font-weight);
    font-size: var(--button-small-font-size);
    line-height: var(--button-small-line-height);
    letter-spacing: var(--button-small-letter-spacing);
}

.input-label {
    font-family: var(--input-label-font-family);
    font-weight: var(--input-label-font-weight);
    font-size: var(--input-label-font-size);
    line-height: var(--input-label-line-height);
    letter-spacing: var(--input-label-letter-spacing);
}

.input-helper {
    font-family: var(--input-helper-font-family);
    font-weight: var(--input-helper-font-weight);
    font-size: var(--input-helper-font-size);
    line-height: var(--input-helper-line-height);
    letter-spacing: var(--input-helper-letter-spacing);
}

/* Utility Classes */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

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

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

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

.gap-xl {
    gap: var(--spacing-xl);
}

.gap-2xl {
    gap: var(--spacing-2xl);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.transition {
    transition: all 0.2s ease;
}

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

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Card Component */
.card {
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

/* Button Base */

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--text-primary);
}

h1 {
    font-family: var(--headline-1-font-family);
    font-weight: var(--headline-1-font-weight);
    font-size: var(--headline-1-font-size);
    line-height: var(--headline-1-line-height);
    letter-spacing: var(--headline-1-letter-spacing);
}

h2 {
    font-family: var(--headline-2-font-family);
    font-weight: var(--headline-2-font-weight);
    font-size: var(--headline-2-font-size);
    line-height: var(--headline-2-line-height);
    letter-spacing: var(--headline-2-letter-spacing);
}

h3 {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-font-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
}

h6 {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-font-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
}

.subtitle1 {
    font-family: var(--subtitle-1-font-family);
    font-weight: var(--subtitle-1-font-weight);
    font-size: var(--subtitle-1-font-size);
    line-height: var(--subtitle-1-line-height);
    letter-spacing: var(--subtitle-1-letter-spacing);
}

.subtitle2 {
    font-family: var(--subtitle-2-font-family);
    font-weight: var(--subtitle-2-font-weight);
    font-size: var(--subtitle-2-font-size);
    line-height: var(--subtitle-2-line-height);
    letter-spacing: var(--subtitle-2-letter-spacing);
}

.body1 {
    font-family: var(--body-1-font-family);
    font-weight: var(--body-1-font-weight);
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height);
    letter-spacing: var(--body-1-letter-spacing);
}

.body2 {
    font-family: var(--body-2-font-family);
    font-weight: var(--body-2-font-weight);
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    letter-spacing: var(--body-2-letter-spacing);
}

.caption {
    font-family: var(--caption-font-family);
    font-weight: var(--caption-font-weight);
    font-size: var(--caption-font-size);
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
}

.buttonLarge {
    font-family: var(--button-large-font-family);
    font-weight: var(--button-large-font-weight);
    font-size: var(--button-large-font-size);
    line-height: var(--button-large-line-height);
    letter-spacing: var(--button-large-letter-spacing);
}

.buttonMedium {
    font-family: var(--button-medium-font-family);
    font-weight: var(--button-medium-font-weight);
    font-size: var(--button-medium-font-size);
    line-height: var(--button-medium-line-height);
    letter-spacing: var(--button-medium-letter-spacing);
}

.buttonSmall {
    font-family: var(--button-small-font-family);
    font-weight: var(--button-small-font-weight);
    font-size: var(--button-small-font-size);
    line-height: var(--button-small-line-height);
    letter-spacing: var(--button-small-letter-spacing);
}

/* Header Styles */
.header {
    background-color: var(--background-default);
}

.header-container {
    max-width: 1920px;
    margin: 0 auto;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    min-height: 74px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo-container {
    cursor: pointer;
}

.logo-image {
    width: 66px;
    object-fit: contain;
}

.header-title {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-font-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
    color: var(--text-primary);
}

.profile-button,
.logout-button {
    width: 32px;
    height: 32px;
    background-color: var(--surface);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    color: var(--text-secondary);
}

.profile-button:hover,
.logout-button:hover {
    background-color: var(--action-hover);
    color: var(--text-primary);
}

.profile-button .icon {
    width: 16px;
    height: 16px;
    opacity: 0.38;
}

.logout-button svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Main Layout */
.app-layout {
    display: flex;
    background-color: var(--background-default);
}

/* Sidebar Styles */
.sidebar {
    width: 260px;
    min-height: calc(100vh - 100px);
    background-color: var(--surface);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    margin: 0 var(--spacing-lg) 0 0;
    height: 100%;
}

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

.nav-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-xs) 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
}

.nav-item:hover {
    background-color: var(--action-hover);
}

.nav-item.active {
    background-color: var(--primary-main);
    color: var(--white);
}

.nav-icon {
    margin-right: var(--spacing-lg);
    width: 28px;
    height: 28px;
    flex: 0;
}

.nav-icon .icon {
    width: 24px;
    height: 24px;
    color: var(--action-disabled);
}

.nav-item.active .icon {
    color: var(--white);
}

.nav-text {
    font-family: var(--subtitle-1-font-family);
    font-weight: var(--subtitle-1-font-weight);
    font-size: var(--subtitle-1-font-size);
    line-height: var(--subtitle-1-line-height);
    letter-spacing: var(--subtitle-1-letter-spacing);
}

.nav-divider {
    height: 1px;
    background-color: var(--divider);
    margin: var(--spacing-2xl) 0;
}

.logout-item:hover {
    background-color: var(--action-hover);
}

/* Main Content */
.app-content {
    flex: 1;
    background-color: var(--surface);
    padding: var(--spacing-3xl);
}

.search-filter-section {
    display: flex;
    flex: 1;
}

.page-content {
    max-width: 100%;
    flex: 1;
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    background-color: var(--surface);
}

.main-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Welcome Section */
.welcome-section {
    margin-bottom: var(--spacing-4xl);
}

.welcome-title {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-font-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
    color: var(--text-primary);
}

/* Stats Container */
.stats-container {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-4xl);
    flex-wrap: wrap;
    justify-content: center;
}

.stat-card {
    width: 225px;
    height: 100px;
    position: relative;
    overflow: hidden;
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    padding: 7px var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-card.selected {
    background-color: var(--action-selected);
}

.stat-content {
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-count {
    color: var(--primary-main);
    margin: 0;
    font-size: 34px;
    line-height: 40px;
    letter-spacing: 0.25px;
    font-weight: 400;
}

.stat-title {
    color: var(--text-primary);
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    margin-top: auto;
}

.stat-icon {
    position: absolute;
    top: 5px;
    right: -30px;
    z-index: 1;
}

.stat-icon .icon-large {
    width: 90px;
    height: 90px;
    opacity: 0.04;
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.content-card {
    background-color: var(--background-default);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.content-card-full {
    grid-column: 1 / -1;
}

.content-header .icon {
    width: 24px;
    height: 24px;
    color: var(--text-primary);
}

/* SVG Icon Styles */
.icon {
    width: 24px;
    height: 24px;
    fill: transparent;
    stroke: transparent;
}

.icon-large {
    width: 90px;
    height: 90px;
    fill: transparent;
    stroke: transparent;
}

.icon-small {
    width: 16px;
    height: 16px;
    fill: transparent;
    stroke: transparent;
    stroke-width: 1px;
}

/* SVG Sprite Usage */
svg.icon {
    display: inline-block;
    vertical-align: middle;
}

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

.content-description {
    color: var(--text-secondary);
    margin-bottom: 22.4px;
}

/* Requests List */
.requests-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.request-item {
    background-color: var(--secondary-main);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.request-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.request-title {
    color: var(--text-primary);
    margin: 0;
}

.request-subtitle-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.request-subtitle {
    color: var(--text-secondary);
}

.request-date {
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-left {
        gap: 16px;
    }

    .logo-image {
        width: 50px;
    }

    .sidebar {
        width: 100%;
        min-height: auto;
        border-radius: 0;
        padding: 0 var(--spacing-md);
    }

    .app-layout {
        flex-direction: column;
    }

    .app-content {
        margin-left: 0;
        margin-top: 16px;
        padding: 20px;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nav-item {
        padding: 12px 16px;
    }
}

@media (max-width: 576px) {
    .header-content {
        padding: 8px 0;
        min-height: 60px;
    }

    .logo-image {
        width: 40px;
    }

    .sidebar {
        padding: 0 8px;
    }

    .nav-item {
        padding: 8px 12px;
    }

    .main-container {
        padding: 16px;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .content-card {
        padding: 16px;
    }
}

.section-header {
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.section-subtitle {
    color: var(--text-tertiary);
    margin: 0;
}

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

.form-row {
    display: flex;
    gap: var(--spacing-2xl);
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-field-large {
    flex: 1.4;
}

.form-field-small {
    flex: 0.6;
}

.form-label {
    font-family: var(--subtitle-2-font-family);
    font-weight: var(--subtitle-2-font-weight);
    font-size: var(--subtitle-2-font-size);
    line-height: var(--subtitle-2-line-height);
    letter-spacing: var(--subtitle-2-letter-spacing);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-align: left;
}

.form-input {
    width: 100%;
    padding: 15px var(--spacing-md);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    font-family: var(--body-1-font-family);
    font-weight: var(--body-1-font-weight);
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height);
    letter-spacing: var(--body-1-letter-spacing);
    background-color: var(--background-paper);
    color: var(--text-primary);
    transition: var(--transition);
    box-sizing: border-box;
}

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

.form-input:disabled {
    color: var(--action-disabled);
    cursor: not-allowed;
    border-color: var(--divider);
}

.form-input::placeholder {
    color: var(--text-tertiary);
}

/* Custom Calendar Styles */
.custom-calendar {
    position: relative;
    display: inline-block;
    width: 100%;
}

.calendar-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.calendar-input:hover {
    border-color: var(--primary-main);
}

.calendar-input:focus {
    outline: none;
    border-color: var(--primary-main);
    box-shadow: 0 0 0 2px rgba(250, 13, 27, 0.1);
}

.calendar-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 20px;
    display: none;
    margin-top: 4px;
    min-width: 320px;
    display: none;
    max-width: 328px;
}

.month-dropdown {
    display: flex;
    align-items: center;
}

.year-dropdown {
    display: flex;
    align-items: center;
}

.calendar-popup.show {
    display: block;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.calendar-nav-btn:hover {
    background-color: var(--background-light);
}

.calendar-month-year {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day-header {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 4px;
}

.calendar-day {
    text-align: center;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.calendar-day:hover {
    background-color: var(--background-light);
}

.calendar-day.selected {
    background-color: var(--primary-main);
    color: white;
}

.calendar-day.empty {
    cursor: default;
    opacity: 0;
}

.calendar-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    color: var(--primary-main);
}

.calendar-nav-btn:hover {
    background-color: var(--background-light);
}

.calendar-month-year {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.calendar-dropdown {
    background: none;
    border: none;
    color: var(--primary-main);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.calendar-dropdown:hover {
    background-color: var(--background-light);
}

.calendar-dropdown-icon {
    margin-left: 4px;
    vertical-align: middle;
    align-items: center;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-weekday {
    text-align: center;
    color: var(--text-secondary);
    padding: 8px 4px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.calendar-day:hover {
    background-color: var(--background-light);
}

.calendar-day.selected {
    background-color: var(--primary-main);
    color: white;
}

.calendar-day.other-month {
    color: var(--text-tertiary);
}

.calendar-day.today {
    color: var(--primary-main);
}

.calendar-day.today.selected {
    color: white;
}

.calendar-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    gap: 16px;
}

.calendar-btn {
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    flex: 1;
    height: 32px;
}

.calendar-btn-cancel {
    background: white;
    color: var(--primary-main);
    border: 1px solid var(--primary-main);
}

.calendar-btn-cancel:hover {
    background-color: var(--background-light);
}

.calendar-btn-apply {
    background: var(--primary-main);
    color: white;
}

.calendar-btn-apply:hover {
    background: var(--primary-dark);
}

/* Month/Year Selection Modal */
.month-year-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.month-year-modal.show {
    display: flex;
}

.month-year-content {
    background: var(--background-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    min-width: 320px;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}

.month-year-title {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-font-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
}

.month-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md);
    text-align: center;
    font-family: var(--subtitle-2-font-family);
    font-weight: var(--subtitle-2-font-weight);
    font-size: var(--subtitle-2-font-size);
    line-height: var(--subtitle-2-line-height);
    letter-spacing: var(--subtitle-2-letter-spacing);
    height: 36px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.month-item:hover {
    background-color: var(--background-light);
}

.month-item.selected {
    background-color: var(--primary-main);
    color: white;
}

.year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
    max-height: 200px;
    overflow-y: auto;
}

.year-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: var(--subtitle-2-font-family);
    font-weight: var(--subtitle-2-font-weight);
    font-size: var(--subtitle-2-font-size);
    line-height: var(--subtitle-2-line-height);
    letter-spacing: var(--subtitle-2-letter-spacing);
    height: 36px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.year-item:hover {
    background-color: var(--background-light);
}

.year-item.selected {
    background-color: var(--primary-main);
    color: white;
}

.month-year-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.month-year-btn {
    flex: 1;
    border-radius: var(--radius-md);
    font-family: var(--button-small-font-family);
    font-weight: var(--button-small-font-weight);
    font-size: var(--button-small-font-size);
    line-height: var(--button-small-line-height);
    letter-spacing: var(--button-small-letter-spacing);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    height: 32px;
}

.month-year-btn-cancel {
    background: var(--white);
    color: var(--primary-main);
    border: 1px solid var(--primary-main);
}

.month-year-btn-cancel:hover {
    background-color: var(--background-light);
}

.month-year-btn-apply {
    background: var(--primary-main);
    color: var(--white);
}

.month-year-btn-apply:hover {
    background: var(--primary-dark);
}

/* Date input specific styles */
.form-input[type="date"] {
    position: relative;
    padding-right: 40px; /* Space for calendar icon */
}

.form-input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M21.75 3C23.5449 3 25 4.45507 25 6.25V21.75C25 23.5449 23.5449 25 21.75 25H6.25C4.45507 25 3 23.5449 3 21.75V6.25C3 4.45507 4.45507 3 6.25 3H21.75ZM23.5 9.503H4.5V21.75C4.5 22.7165 5.2835 23.5 6.25 23.5H21.75C22.7165 23.5 23.5 22.7165 23.5 21.75V9.503ZM8.74878 17.5014C9.43913 17.5014 9.99878 18.0611 9.99878 18.7514C9.99878 19.4418 9.43913 20.0014 8.74878 20.0014C8.05842 20.0014 7.49878 19.4418 7.49878 18.7514C7.49878 18.0611 8.05842 17.5014 8.74878 17.5014ZM14.0033 17.5014C14.6936 17.5014 15.2533 18.0611 15.2533 18.7514C15.2533 19.4418 14.6936 20.0014 14.0033 20.0014C13.3129 20.0014 12.7533 19.4418 12.7533 18.7514C12.7533 18.0611 13.3129 17.5014 14.0033 17.5014ZM8.74878 12.5014C9.43913 12.5014 9.99878 13.0611 9.99878 13.7514C9.99878 14.4418 9.43913 15.0014 8.74878 15.0014C8.05842 15.0014 7.49878 14.4418 7.49878 13.7514C7.49878 13.0611 8.05842 12.5014 8.74878 12.5014ZM14.0033 12.5014C14.6936 12.5014 15.2533 13.0611 15.2533 13.7514C15.2533 14.4418 14.6936 15.0014 14.0033 15.0014C13.3129 15.0014 12.7533 14.4418 12.7533 13.7514C12.7533 13.0611 13.3129 12.5014 14.0033 12.5014ZM19.2577 12.5014C19.9481 12.5014 20.5077 13.0611 20.5077 13.7514C20.5077 14.4418 19.9481 15.0014 19.2577 15.0014C18.5674 15.0014 18.0077 14.4418 18.0077 13.7514C18.0077 13.0611 18.5674 12.5014 19.2577 12.5014ZM21.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V8.003H23.5V6.25C23.5 5.2835 22.7165 4.5 21.75 4.5Z' fill='%23000000DE'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Firefox date input */
.form-input[type="date"]::-moz-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M21.75 3C23.5449 3 25 4.45507 25 6.25V21.75C25 23.5449 23.5449 25 21.75 25H6.25C4.45507 25 3 23.5449 3 21.75V6.25C3 4.45507 4.45507 3 6.25 3H21.75ZM23.5 9.503H4.5V21.75C4.5 22.7165 5.2835 23.5 6.25 23.5H21.75C22.7165 23.5 23.5 22.7165 23.5 21.75V9.503ZM8.74878 17.5014C9.43913 17.5014 9.99878 18.0611 9.99878 18.7514C9.99878 19.4418 9.43913 20.0014 8.74878 20.0014C8.05842 20.0014 7.49878 19.4418 7.49878 18.7514C7.49878 18.0611 8.05842 17.5014 8.74878 17.5014ZM14.0033 17.5014C14.6936 17.5014 15.2533 18.0611 15.2533 18.7514C15.2533 19.4418 14.6936 20.0014 14.0033 20.0014C13.3129 20.0014 12.7533 19.4418 12.7533 18.7514C12.7533 18.0611 13.3129 17.5014 14.0033 17.5014ZM8.74878 12.5014C9.43913 12.5014 9.99878 13.0611 9.99878 13.7514C9.99878 14.4418 9.43913 15.0014 8.74878 15.0014C8.05842 15.0014 7.49878 14.4418 7.49878 13.7514C7.49878 13.0611 8.05842 12.5014 8.74878 12.5014ZM14.0033 12.5014C14.6936 12.5014 15.2533 13.0611 15.2533 13.7514C15.2533 14.4418 14.6936 15.0014 14.0033 15.0014C13.3129 15.0014 12.7533 14.4418 12.7533 13.7514C12.7533 13.0611 13.3129 12.5014 14.0033 12.5014ZM19.2577 12.5014C19.9481 12.5014 20.5077 13.0611 20.5077 13.7514C20.5077 14.4418 19.9481 15.0014 19.2577 15.0014C18.5674 15.0014 18.0077 14.4418 18.0077 13.7514C18.0077 13.0611 18.5674 12.5014 19.2577 12.5014ZM21.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V8.003H23.5V6.25C23.5 5.2835 22.7165 4.5 21.75 4.5Z' fill='%23000000DE'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.form-input[type="date"]::-moz-calendar-picker-indicator:hover {
    opacity: 1;
}

.form-input.error {
    border-color: var(--error-main);
}

.form-error {
    font-family: var(--input-helper-font-family);
    font-weight: var(--input-helper-font-weight);
    font-size: var(--input-helper-font-size);
    line-height: var(--input-helper-line-height);
    letter-spacing: var(--input-helper-letter-spacing);
    color: var(--error-main);
    margin-top: var(--spacing-xs);
    min-height: var(--spacing-lg);
    text-align: left;
}

.form-error:not(:empty) {
    margin-bottom: var(--spacing-lg);
}

.btn-loader {
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--button-large-font-family);
    font-weight: var(--button-large-font-weight);
    font-size: var(--button-large-font-size);
    line-height: var(--button-large-line-height);
    letter-spacing: var(--button-large-letter-spacing);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    height: 48px;
    padding: var(--spacing-md) var(--spacing-2xl);
}

.btn-small {
    padding: 0 22px;
    font-family: var(--button-small-font-family);
    font-weight: var(--button-small-font-weight);
    font-size: var(--button-small-font-size);
    line-height: var(--button-small-line-height);
    letter-spacing: var(--button-small-letter-spacing);
    height: 40px;
}

.btn-full-width {
    width: 100%;
}

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

.btn-primary svg {
    color: var(--white);
}

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

.btn-primary:active {
    background-color: var(--primary-dark);
}

.btn-secondary {
    background-color: transparent;
    color: var(--secondary-main);
}

.btn-secondary:hover {
    background-color: rgba(156, 39, 176, 0.04);
}

.btn-secondary:active {
    background-color: rgba(156, 39, 176, 0.08);
}

.btn-tertiary {
    background-color: var(--cancel-main);
    color: var(--text-primary);
}

.btn-tertiary:hover {
    background-color: var(--action-hover);
}

.btn-tertiary:active {
    background-color: var(--action-active);
}

.btn-danger {
    background-color: var(--error-main);
    color: var(--white);
}

.btn-danger:hover {
    background-color: var(--error-dark);
}

.btn-danger:active {
    background-color: var(--error-dark);
}

.btn:disabled {
    background-color: var(--action-disabled-background);
    color: var(--action-disabled);
    cursor: not-allowed;
    transform: none;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
}

.modal-container {
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.modal-content {
    padding: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2xl) var(--spacing-2xl) 0 var(--spacing-2xl);
}

.modal-title {
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background-color: var(--action-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-2xl);
}

.modal-description {
    color: var(--text-secondary);
    margin: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-2xl) 0 var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
}

.modal-footer .btn {
    min-width: 100px;
}

/* Success Modal Styles */
.success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.success-modal-container {
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 90%;
    margin: var(--spacing-xl);
    animation: modalSlideIn 0.3s ease-out;
}

.success-modal-content {
    padding: var(--spacing-4xl) var(--spacing-3xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
}

.success-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-title {
    color: var(--text-primary);
    margin: 0;
}

.success-description {
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal Responsive Design */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        margin: 16px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .success-modal-container {
        width: 95%;
        margin: 16px;
    }

    .success-modal-content {
        padding: 32px 24px;
        gap: 20px;
    }
}

/* Login Page Styles */

.login-body {
    margin: 0 auto;
    padding: 0;
    background-color: var(--background-default);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    box-sizing: border-box;
}

.login-card {
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 800px;
    text-align: center;
    position: relative;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 42px;
}

.login-logo {
    width: 180px;
    height: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-md);
}

.login-title {
    color: var(--text-primary);
    margin: 0;
}

.login-form {
    width: 100%;
}

.login-info {
    margin-top: 16px;
    text-align: left;
}

.info-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 24px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row-full {
    grid-template-columns: 1fr;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 42px;
}

.info-label {
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.info-value {
    color: var(--text-primary);
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.info-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-text {
    color: var(--text-secondary);
    margin: 0;
}

.help-section {
    margin-left: 28px;
}

.help-text {
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

/* Loading state */
.btn.loading .btn-text {
    opacity: 0.7;
}

.btn.loading .btn-loader {
    display: block;
}

/* Error state */
.form-field.has-error .form-input {
    border-color: var(--error-main);
}

.form-field.has-error .form-label {
    color: var(--error-main);
}

/* Responsive Design for Login */
@media (max-width: 480px) {
    .login-container {
        padding: 16px;
    }

    .login-card {
        padding: 20px;
    }

    .login-logo {
        width: 120px;
        height: auto;
    }

    .form-input {
        padding: 14px 12px;
    }

    .btn {
        padding: 14px 24px;
    }
}

/* Events Page Styles */

/* Title Section */
.page-title-section {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-bottom: var(--spacing-3xl);
}

.page-title {
    margin-bottom: var(--spacing-lg);
}

.events-title {
    margin-bottom: var(--spacing-2xl);
}

.page-subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.filter-dropdown {
    position: relative;
}

/* Custom Dropdown Styles */
.custom-dropdown {
    position: relative;
    min-width: 180px;
}

.dropdown-button {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
    height: 40px;
}

.dropdown-button:hover {
    border-color: var(--text-light-gray);
}

.dropdown-button:focus {
    outline: none;
}

.dropdown-text {
    flex: 1;
    text-align: left;
}

.dropdown-arrow {
    color: var(--text-medium);
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    margin-top: var(--spacing-md);
    overflow-y: auto;
    padding: var(--spacing-md);
}

.custom-dropdown.open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.dropdown-option:hover {
    background-color: var(--background-light-gray);
}

.dropdown-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    margin-right: var(--spacing-md);
    position: relative;
    transition: var(--transition);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-custom svg {
    width: 16px;
    height: 16px;
}

.dropdown-option
    input[type="checkbox"]:checked
    + .checkbox-custom
    svg:first-child {
    display: block;
}

.dropdown-option
    input[type="checkbox"]:not(:checked)
    + .checkbox-custom
    svg:first-child {
    display: none;
}

.dropdown-option
    input[type="checkbox"]:checked
    + .checkbox-custom
    svg:last-child {
    display: none;
}

.dropdown-option
    input[type="checkbox"]:not(:checked)
    + .checkbox-custom
    svg:last-child {
    display: block;
}

.option-text {
    color: var(--text-dark);
    flex: 1;
}

.btn-create-event {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-lg) !important;
}

.btn-create-event svg {
    stroke-width: 1px;
    height: 20px;
    width: 20px;
}

/* Statistics Cards */
.stats-container {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-start;
    flex: 1;
}

.event-stat-card {
    background: var(--background-default);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    width: 207px;
    position: relative;
}

.event-stat-icon {
    position: absolute;
    fill: var(--text-tertiary);
    top: 50%;
    transform: translateY(-50%);
    right: var(--spacing-sm);
}

.event-stat-card svg {
    height: 43px !important;
    width: 43px !important;
    stroke: transparent !important;
    color: var(--action-hover) !important;
    fill: var(--action-hover) !important;
    stroke-width: 4px !important;
}

.stat-number {
    margin-bottom: var(--spacing-xs);
    color: var(--primary-main);
}

.stat-label {
    color: var(--text-medium);
}

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

.event-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.event-status-badge {
    position: absolute;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    color: var(--white);
}

.event-status-badge.pending {
    background: var(--status-grade);
}

.event-status-badge.confirmed {
    background: var(--status-active);
}

.event-status-badge.approved {
    background: var(--status-active);
}

.event-status-badge.completed {
    background: var(--status-completed);
}

.event-status-badge.in_progress {
    background: var(--status-active);
}

.event-status-badge.rejected {
    background: var(--status-not-active);
}

.event-status-badge.new {
    background: var(--action-disabled);
    color: var(--text-secondary);
}

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

.event-title {
    margin: 0 0 var(--spacing-sm) 0;
}

.event-subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-3xl);
}

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

.event-detail-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    color: var(--text-secondary);
    gap: var(--spacing-sm);
}

.event-detail-icon {
    color: var(--text-secondary);
}

.event-budget-section {
    display: flex;
    border-top: 1px solid var(--divider);
    padding-top: var(--spacing-xl);
}

.event-budget-request {
    flex: 0.3;
}

.event-budget-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.event-budget-label {
    color: var(--text-medium);
    margin-bottom: var(--spacing-xs);
}

.event-comment-section {
    flex: 1;
}

.event-comment-text {
    margin: 0;
    padding: 6px var(--spacing-md);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    font-family: var(--body-2-font-family);
    font-size: var(--body-2-font-size);
    font-weight: var(--body-2-font-weight);
    line-height: 16px;
    color: var(--text-primary);
    background-color: var(--input-bg);
    overflow: hidden;
    min-height: 78px; /* 4 строки */
    max-height: 78px; /* 4 строки */
    min-height: 85px; /* 4 строки */
    max-height: 85px; /* 4 строки */
    transition: max-height 0.3s ease;
    box-sizing: border-box;
}

.event-comment-title {
    font-family: var(--body-2-font-family);
    font-size: var(--body-2-font-size);
    font-weight: var(--body-2-font-weight);
    line-height: 16px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.event-comment-content {
    font-family: var(--body-2-font-family);
    font-size: var(--body-2-font-size);
    font-weight: var(--body-2-font-weight);
    line-height: 16px;
    color: var(--text-primary);
    word-break: break-word;
}

.event-comment-section.expanded .event-comment-text {
    max-height: none;
    min-height: auto;
    min-height: 85px;
}

.event-show-more {
    text-decoration: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 14px;
}

/* Responsive Design for Events */
@media (max-width: 768px) {
    .page-title-section {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .page-actions {
        justify-content: space-between;
    }

    .stats-container {
        flex-direction: column;
    }

    .page-content {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .btn-create-event {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .event-card {
        padding: var(--spacing-lg);
    }

    .event-stat-card {
        padding: var(--spacing-lg);
    }
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-xl) 0;
}

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

.pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--primary-main);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-button:hover {
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

.pagination-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-page:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--secondary-main);
    text-decoration: none;
}

.pagination-page.active {
    background: var(--secondary-main);
    color: var(--primary-main);
}

.pagination-page.active:hover {
    text-decoration: none;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* Responsive Design for Pagination */
@media (max-width: 768px) {
    .pagination-container {
        margin-top: var(--spacing-2xl);
        padding: var(--spacing-lg) 0;
    }

    .pagination {
        gap: var(--spacing-xs);
    }

    .pagination-button,
    .pagination-page {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .pagination-page {
        padding: 0 var(--spacing-xs);
        font-size: 13px;
    }

    .pagination-ellipsis {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pagination-pages {
        gap: 2px;
    }

    .pagination-button,
    .pagination-page {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .pagination-page {
        font-size: 12px;
    }

    .pagination-ellipsis {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* Event Detail Page Styles */

.event-info {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-2xl);
    gap: var(--spacing-2xl);
}

.event-form-row {
    display: flex;
    gap: var(--spacing-2xl);
}

.event-form-row.two-columns .event-form-field {
    flex: 1;
}

.event-form-row.full-width .event-form-field {
    flex: 1;
}

.event-form-row.unequal .event-form-field:first-child {
    flex: 3;
}

.event-form-row.unequal .event-form-field:last-child {
    flex: 1;
}

.event-form-comment {
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    border: 1px solid var(--divider);
    padding: var(--spacing-sm) var(--spacing-md);
    grid-column: span 12 / span 12;
    grid-row-start: 8;
    min-height: 92px;
}

.event-form-field {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--divider);
}

.field-label {
    color: var(--text-secondary);
}

.field-value {
    padding: var(--spacing-lg);
}

.event-form-comment .field-value {
    padding: 0;
    word-break: break-word;
}

.form-value.budget-value {
    color: var(--primary-main);
}

/* Responsive Design for Event Detail */
@media (max-width: 768px) {
    .event-info {
        gap: var(--spacing-lg);
        margin-top: var(--spacing-lg);
    }

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

    .event-form-row.two-columns .event-form-field,
    .event-form-row.unequal .event-form-field {
        flex: none;
    }

    .field-label {
        margin-bottom: var(--spacing-xs);
    }

    .field-value {
        padding: var(--spacing-md);
    }

    .event-form-comment {
        padding: var(--spacing-md);
        min-height: 80px;
    }

    /* Заголовок страницы */
    h2 {
        margin-bottom: var(--spacing-xl);
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .event-info {
        gap: var(--spacing-md);
        margin-top: var(--spacing-md);
    }

    .event-form-row {
        gap: var(--spacing-md);
    }

    .field-label {
        margin-bottom: var(--spacing-xs);
    }

    .field-value {
        padding: var(--spacing-sm);
    }

    .event-form-comment {
        padding: var(--spacing-sm);
        min-height: 70px;
    }

    h2 {
        margin-bottom: var(--spacing-lg);
    }
}

/* Event Create Form Styles */
.event-create-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-sm);
}

.form-header {
    margin-bottom: var(--spacing-3xl);
}

.form-subtitle {
    color: var(--text-secondary);
    margin-top: var(--spacing-2xl);
}

.event-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.select-wrapper {
    position: relative;
}

.form-select {
    appearance: none;
    padding-right: var(--spacing-4xl);
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
    stroke-width: 0.2px;
    transition: transform 0.2s ease;
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
}

.file-upload-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.file-input {
    display: none;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    background-color: var(--white);
    height: 56px;
}

.file-upload-label:hover {
    border-color: var(--divider);
}

.file-upload-text {
    color: var(--text-secondary);
}

.file-upload-icon {
    color: var(--text-secondary);
}

.file-document-icon {
    width: 48px;
    height: 48px;
}

.file-attach-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.file-preview {
    display: none; /* Hidden by default, shown when file is uploaded */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.file-upload-text {
    position: absolute;
    left: var(--spacing-md);
    color: var(--text-tertiary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
    padding-top: 0;
}

.file-upload-label {
    display: flex;
    justify-content: space-between;
}

/* Responsive Design for Event Create Form */
@media (max-width: 768px) {
    .event-create-card {
        padding: var(--spacing-xl);
    }

    .event-create-form {
        gap: var(--spacing-lg);
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .form-textarea {
        min-height: 70px;
    }

    .form-actions {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-top: var(--spacing-2xl);
        padding-top: var(--spacing-xl);
    }
}

@media (max-width: 480px) {
    .event-create-card {
        padding: var(--spacing-lg);
    }

    .event-create-form {
        gap: var(--spacing-md);
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: var(--spacing-sm) var(--spacing-sm);
    }

    .form-textarea {
        min-height: 60px;
    }
}

/* White background for event-create form inputs */
.event-create-card .form-input,
.event-create-card select,
.event-create-card textarea {
    background-color: var(--white) !important;
}

.event-create-section .form-input,
.event-create-section select,
.event-create-section textarea {
    background-color: var(--white) !important;
}

/* Custom Select Styles */
.custom-select {
    position: relative;
    width: 100%;
}

.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    height: 55px;
    background-color: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: var(--transition);
}

.select-trigger:hover {
    border-color: var(--text-secondary);
}

.select-value {
    color: var(--text-primary);
}

.custom-select.open .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.select-dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-md));
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.custom-select.open .select-dropdown {
    display: block;
}

.select-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.select-option:hover {
    background-color: var(--background-default);
}

.select-option::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(31, 31, 31, 0.24);
    border-radius: 50%;
    transition: var(--transition);
    flex-shrink: 0;
}

.select-option::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: var(--transition);
    flex-shrink: 0;
    position: absolute;
    left: 19.7px;
}

.select-option.selected::before {
    border-color: var(--primary-main);
    background-color: var(--white);
}

.select-option.selected::after {
    background-color: var(--primary-main);
}

.option-text {
    color: var(--text-primary);
}

.souvenirs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3xl);
}

.souvenirs-title-section {
    flex: 1;
}

.souvenirs-subtitle {
    color: var(--text-tertiary);
    margin-top: var(--spacing-lg);
}

.search-filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    gap: var(--spacing-lg);
}

.search-wrapper {
    position: relative;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    fill: transparent;
    stroke: transparent;
    width: 16px;
    height: 16px;
}

.search-input {
    width: 100%;
    padding: 11px var(--spacing-lg) 11px 36px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    background-color: var(--white);
    transition: var(--transition);
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-input:focus {
    outline: none;
}

.search-input:hover {
    outline: none;
    border: 1px solid var(--text-secondary);
}

.filter-wrapper {
    position: relative;
    min-width: 200px;
}

.products-grid {
    gap: var(--spacing-2xl);
    column-count: 2;
}

.product-card {
    display: flex;
    background: var(--white);
    align-items: center;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: var(--spacing-xl) 15px;
    margin-bottom: var(--spacing-2xl);
}

.product-card.selected .cart-item-controls {
    display: flex;
    align-self: flex-end;
    color: var(--primary-main);
    background-color: var(--text-field-fill);
    border-radius: var(--radius-md);
}

.product-card.selected .cart-item-controls svg {
    color: var(--primary-main);
}

.product-card.selected .quantity-value {
    color: var(--primary-main);
    background-color: var(--secondary-main);
    border-radius: var(--radius-xs);
}

.product-card.selected .btn {
    display: none;
}

.product-image {
    min-width: 100px;
    min-height: 90px;
    max-width: 147px;
    max-height: 115px;
    display: flex;
    border-radius: var(--radius-xl);
    flex: 1;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
}

.product-info {
    padding: 0 0 0 var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex: 1;
}

.product-info svg {
    stroke-width: 1px;
    color: var(--white);
    height: 20px;
    width: 20px;
}

.product-description {
    color: var(--text-secondary);
    flex: 1;
}

.product-card .btn {
    max-width: 130px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg);
    align-self: end;
}

/* Responsive Design for Souvenirs */
@media (max-width: 768px) {
    .souvenirs-container {
        padding: var(--spacing-lg);
    }

    .souvenirs-header {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .search-filter-section {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .search-wrapper {
        max-width: none;
    }

    .filter-wrapper {
        min-width: auto;
    }

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

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-info {
        padding: var(--spacing-lg);
    }
}

/* Requests Page Styles */

.requests-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.applications-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.application-card {
    background: var(--white);
    position: relative;
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
}

.application-card {
    cursor: pointer;
}

.event-stat-card.selected {
    background-color: var(--action-selected);
}

.event-stat-card {
    cursor: pointer;
}

/* Create Request Page Styles */

.request-contact-info {
    background-color: var(--background-default);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
}

.order-summary {
    margin-bottom: var(--spacing-2xl);
}

.order-summary-text {
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

.cart-items-container {
    background: var(--background-default);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-3xl);
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-3xl);
    background: var(--secondary-main);
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--radius-md);
}

.cart-item-info {
    flex: 1;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition);
}

.quantity-btn svg {
    stroke-width: 1px;
}

.quantity-value {
    color: var(--text-primary);
    min-width: 40px;
    text-align: center;
    background: var(--background-default);
    border-radius: 4px;
    outline: unset;
    border: 1px solid transparent;
    width: 40px;
}

.btn {
    padding: var(--spacing-md) var(--spacing-2xl);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

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

.btn-secondary:hover {
    background: var(--background-light);
}

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

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-clear {
    color: var(--primary-main);
    background: var(--white);
}

.btn-clear:hover {
    color: var(--primary-dark);
    background: var(--background-light);
}

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

.application-title-section {
    flex: 1;
}

.application-title {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.application-subtitle {
    margin-top: var(--spacing-sm);
    color: var(--text-tertiary);
}

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

.application-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--divider);
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.detail-item svg {
    stroke: transparent;
    fill: transparent;
    color: var(--text-tertiary);
    stroke-width: 2px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.application-order {
    margin-bottom: var(--spacing-xl);
}

.order-title {
    margin-bottom: var(--spacing-lg);
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-3xl);
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.item-name {
    color: var(--text-primary);
}

.item-quantity {
    color: var(--text-secondary);
}

.application-comment {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 92px;
}

.comment-content {
    color: var(--text-primary);
}

.comment-title {
    color: var(--input-placeholder);
    margin-bottom: var(--spacing-xs);
}

/* Responsive Design for Requests */
@media (max-width: 768px) {
    .application-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .application-details {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .application-card {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .search-wrapper {
        max-width: 100%;
    }

    .order-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* Knowledge Base Styles */
.knowledge-layout {
    display: flex;
    gap: var(--spacing-3xl);
    height: 100%;
}

.knowledge-sidebar {
    width: 300px;
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    height: fit-content;
}

.filter-section-container {
    display: flex;
    gap: var(--spacing-xs);
}

.categories-title {
    margin: 0 0 var(--spacing-2xl) 0;
}

.category-section {
    margin-bottom: var(--spacing-3xl);
}

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

.category-title {
    margin: 0 0 var(--spacing-lg) 0;
}

.category-item {
    display: flex;
    align-items: center;
    padding: 3px 0;
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
}

.category-item .meta-separator {
    padding: 0 var(--spacing-sm);
}

.category-item:hover {
    background-color: var(--action-hover);
}

.category-count {
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    min-width: 24px;
    text-align: right;
    flex: 1;
}

.knowledge-content {
    flex: 1;
}

.content-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

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

.content-subtitle {
    color: var(--text-tertiary);
    margin-top: 16px;
}

.materials-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-height: 100%;
    overflow-y: auto;
}

.material-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-xl);
    padding: 30px var(--spacing-xl);
    background-color: var(--background-default);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    gap: var(--spacing-lg);
    cursor: pointer;
}

.material-content {
    flex: 1;
}

.material-title {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.material-description {
    color: var(--text-secondary);
    margin: 0 12px 24px 0;
}

.material-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

.material-meta-icon {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.material-meta-icon svg {
    height: 12px;
    width: 12px;
}

.meta-item {
    color: var(--text-tertiary);
}

.meta-separator {
    color: var(--text-tertiary);
    margin: 0 var(--spacing-xs);
}

.btn-download {
    padding: var(--spacing-sm) var(--spacing-lg);
    height: 36px;
    min-width: 100px;
    flex-shrink: 0;
}

/* Responsive Design for Knowledge Base */
@media (max-width: 1024px) {
    .knowledge-layout {
        flex-direction: column;
        gap: var(--spacing-2xl);
    }

    .knowledge-sidebar {
        width: 100%;
        order: 2;
    }

    .knowledge-content {
        order: 1;
    }
}

@media (max-width: 768px) {
    .knowledge-sidebar,
    .knowledge-content {
        padding: var(--spacing-lg);
    }

    .search-filter-section {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .filter-wrapper {
        width: 100%;
        min-width: auto;
    }

    .material-item {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .btn-download {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .knowledge-sidebar,
    .knowledge-content {
        padding: var(--spacing-md);
    }
}

/* Knowledge Detail Page Styles */
.material-detail-container {
    background-color: var(--background-default);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    max-width: 100%;
}

.material-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
}

.material-title-section {
    flex: 1;
}

.material-title {
    margin: 0 0 var(--spacing-md) 0;
}

.material-detail-description {
    color: var(--text-secondary);
}

.btn-download-large {
    padding: 0px var(--spacing-xs);
    height: 30px;
    min-width: 80px;
    flex-shrink: 0;
    background-color: var(--primary-dark);
}

.material-info {
    margin-bottom: var(--spacing-4xl);
}

.material-meta-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
}

.file-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: space-between;
    background-color: var(--secondary-main);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
}

.file-details-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--primary-main);
    border-radius: var(--radius-md);
}

.file-type-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
        hue-rotate(0deg) brightness(100%) contrast(100%);
}

.file-info {
    display: flex;
    flex-direction: column;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    flex: 1;
}

.file-type {
    color: var(--text-primary);
}

.file-size {
    color: var(--text-secondary);
}

.video-preview-section {
    margin-top: var(--spacing-3xl);
}

.preview-title {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-2xl) 0;
}

.video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xl);
}

.video-thumbnail {
    position: relative;
    width: 208px;
    height: 138px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--background-paper);
    cursor: pointer;
    transition: var(--transition);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design for Knowledge Detail */
@media (max-width: 768px) {
    .material-detail-container {
        padding: var(--spacing-2xl);
    }

    .material-header {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .btn-download-large {
        min-width: 120px;
    }

    .material-info {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: flex-start;
    }

    .file-details {
        align-self: flex-start;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .video-thumbnail {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .material-detail-container {
        padding: var(--spacing-lg);
    }

    .btn-download-large {
        padding: var(--spacing-sm) var(--spacing-xl);
        height: 40px;
    }

    .material-info {
        margin-bottom: var(--spacing-2xl);
    }

    .file-details {
        padding: var(--spacing-sm) var(--spacing-md);
        flex-direction: column;
        align-items: flex-start;
    }

    .video-thumbnail {
        height: 160px;
    }

    .play-button {
        width: 50px;
        height: 50px;
    }

    .play-button svg {
        width: 20px;
        height: 20px;
    }
}

/* Image Preview Section Styles */
.image-preview-section {
    margin-top: var(--spacing-3xl);
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xl);
}

.image-preview-item {
    flex: 0 0 auto;
}

.image-thumbnail {
    position: relative;
    width: 208px;
    height: 138px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--background-paper);
    cursor: pointer;
    transition: var(--transition);
}

/* Responsive Design for Image Preview */
@media (max-width: 768px) {
    .image-grid {
        gap: var(--spacing-lg);
    }

    .image-thumbnail {
        width: 180px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .image-grid {
        gap: var(--spacing-md);
    }

    .image-thumbnail {
        width: 160px;
        height: 106px;
    }
}

/* Presentation Preview Section Styles */
.presentation-preview-section {
    margin-top: var(--spacing-3xl);
}

.presentation-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xl);
}

.presentation-preview-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: relative;
    overflow: hidden;
}

.presentation-thumbnail {
    position: relative;
    width: 208px;
    height: 138px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--background-paper);
    cursor: pointer;
    transition: var(--transition);
    border: 4px solid var(--primary-main);
}

.presentation-filename {
    color: var(--background-default);
    text-align: center;
    margin-top: var(--spacing-sm);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    text-align: left;
    background-color: var(--primary-main);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Responsive Design for Presentation Preview */
@media (max-width: 768px) {
    .presentation-grid {
        gap: var(--spacing-lg);
    }

    .presentation-thumbnail {
        width: 180px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .presentation-grid {
        gap: var(--spacing-md);
    }

    .presentation-thumbnail {
        width: 160px;
        height: 106px;
    }
}

/* Certificate Page Styles */
.certificate-content {
    padding: var(--spacing-2xl);
}

.certificate-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4xl);
    padding: 0 var(--spacing-xl);
}

.certificate-title-section {
    flex: 1;
}

.certificate-title {
    margin: 0 0 var(--spacing-lg) 0;
}

.certificate-subtitle {
    color: var(--text-secondary);
}

.certificate-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 var(--spacing-xl);
    background: var(--white);
    flex: 0;
    max-width: 320px;
    width: 100%;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.certificate-image-container {
    padding: var(--spacing-xl);
    max-width: 320px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.certificate-image {
    width: 100%;
    height: auto;
    aspect-ratio: 0.72;
}

.certificate-info {
    text-align: left;
}

.certificate-info-title {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 12px;
}

.certificate-date {
    color: var(--text-tertiary);
    font-size: 12px;
}

/* Certificate Responsive Design */
@media (max-width: 768px) {
    .certificate-content {
        padding: var(--spacing-lg);
    }

    .certificate-header {
        flex-direction: column;
        gap: var(--spacing-xl);
        align-items: stretch;
    }
}

.certificate-image-container {
    padding: var(--spacing-md);
}

.certificate-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.certificate-card {
    padding: var(--spacing-lg);
}

.certificate-card-actions {
    flex-direction: column;
}

@media (max-width: 480px) {
    .certificate-image-container {
        padding: var(--spacing-sm);
    }
}

/* Profile Page Styles */
.profile-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
}

.profile-title {
    color: var(--text-primary);
    margin: 0;
}

.profile-subtitle {
    color: var(--text-tertiary);
    margin: var(--spacing-xs) 0 0 0;
}

.profile-section {
    background-color: var(--background-default);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-2xl);
}

.profile-header-actions {
    flex-shrink: 0;
}

.profile-section .section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0;
}

.section-header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    color: var(--text-primary);
    margin: 0;
}

.section-subtitle {
    color: var(--text-tertiary);
    margin: var(--spacing-xs) 0 0 0;
}

@media (max-width: 768px) {
    .profile-header {
        gap: var(--spacing-lg);
    }

    .info-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .info-row-full {
        grid-template-columns: 1fr;
    }

    .info-item {
        padding-bottom: 12px;
    }
}

@media (max-width: 480px) {
    /* Mobile optimizations */
    .profile-container {
        padding: var(--spacing-md);
    }

    .profile-section {
        margin-bottom: var(--spacing-lg);
    }

    .section-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .card-actions {
        width: 100%;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Reduce padding for mobile */
    .info-row {
        padding: 12px 0;
        gap: 12px;
    }

    .info-item {
        padding-bottom: 8px;
    }

    /* Adjust typography for mobile */
    .info-label {
        font-size: 13px;
        line-height: 18px;
    }

    .info-value {
        font-size: 15px;
        line-height: 22px;
    }
}

.input-document {
    color: var(--primary-main);
}

.breadcrumbs {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary) !important;
    font-size: var(--font-size-sm);
}

.breadcrumbs a {
    color: var(--text-secondary);
}

.calendar-icon {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    color: var(--text-tertiary);
}

.company-form {
    background-color: var(--white);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
}

.user-form {
    background-color: var(--white);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
}

.event-detail-item-approve {
    color: var(--error-main);
    flex: 1;
    text-align: right;
}

.hidden {
    display: none;
}

.modal-container:has(.event-modal) {
    width: 380px;
}

.event-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 162px;
    justify-content: space-between;
    align-items: center;
}

.event-modal .modal-close {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    border-radius: 50%;
}

.event-modal .modal-footer {
    width: 100%;
    margin-top: 34px;
    margin-bottom: 20px;
}

.event-modal .modal-title {
    margin-top: 44px;
}

.event-modal .modal-footer .btn {
    width: 100%;
}

.profile-message-error {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f44336;
    color: white;
}

.requests-status-badge {
    position: relative;
    top: 0;
    right: 0;
    text-align: center;
    white-space: nowrap;
}

.mail-link {
    color: var(--text-primary);
    text-decoration: none;
}

.header-help {
    margin-left: auto;
    margin-right: 24px;
}

.profile-info-card .info-item {
    flex-direction: column;
    align-items: start;
    margin-bottom: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}