/* ============================================
   ThePapare Live Template - Custom Styles
   ============================================ */

/* Variables */
:root {
    --papare-primary-red: #BF202E;
    --papare-primary-green: #008938;
    --papare-primary-blue: #0E30DF;
    --papare-primary-purple: #7C3AED;
    --papare-primary-yellow: #F2B700;
    --papare-primary-ash: #B6B4B4;
    --papare-primary-black: #151517;
    --papare-background: #EDEEF0;
    --papare-font-color: #151517;
    --papare-ash-font: #626262;
}

/* Global Styles */
body {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #fff;
    color: var(--papare-font-color);
}

a, .red-text {
    color: var(--papare-primary-red);
}

a:hover {
    color: var(--papare-primary-red);
    text-decoration: underline;
}

p {
    line-height: 1.6;
    color: var(--papare-font-color);
}

/* Typography */
.papare-light {
    font-weight: 300;
}

.papare-regular {
    font-weight: 400;
}

.papare-medium {
    font-weight: 500;
}

.papare-bold {
    font-weight: 700;
}

.papare-title {
    font-size: 1.75rem;
}

.papare-subtitle {
    font-size: 1.5rem;
}

.papare-subcontent {
    font-size: 1rem;
}

/* Background Colors */
.ash-bg {
    background: #EDEEF0;
}

.white-bg {
    background: #ffffff;
}

.papare-primary {
    background-color: var(--papare-primary-green);
}

.papare-danger {
    background-color: var(--papare-primary-red);
}

.papare-warning {
    background-color: var(--papare-primary-yellow);
}

.papare-success {
    background-color: var(--papare-primary-green);
}

/* Font Colors */
.papare-color-prime-red {
    color: var(--papare-primary-red);
}

.papare-color-prime-green {
    color: var(--papare-primary-green);
}

.papare-color-secondary-green {
    color: #006230;
}

.papare-color-prime-blue {
    color: var(--papare-primary-blue);
}

.papare-color-prime-yellow {
    color: var(--papare-primary-yellow);
}

.papare-color-prime-ash {
    color: var(--papare-ash-font);
}

/* Navbar Styles - Minimalistic */
.navbar {
    padding: 0;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .navbar {
        padding: 0 20px;
    }
}

.navbar-brand {
    padding: 12px 0;
}

.navbar-brand img {
    width: 50px;
    height: auto;
}

.navbar-toggler {
    font-size: 1.25rem;
    color: var(--papare-font-color);
    border: 1px solid #e8e8e8;
    padding: 8px 12px;
}

.navbar-dark .navbar-toggler {
    color: var(--papare-font-color);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--papare-font-color);
    font-weight: 500;
    font-size: 15px;
}

.navbar .nav-item.active .nav-link {
    color: var(--papare-primary-red);
    border-bottom: 2px solid var(--papare-primary-red);
}

.navbar .nav-item .nav-link {
    padding: 20px 16px;
    transition: color 0.2s ease;
}

.navbar .nav-item .nav-link:hover {
    color: var(--papare-primary-red);
}

/* Search in Navbar - Minimalistic */
.nav-search input {
    font-size: 14px;
    height: 36px;
    border-radius: 4px;
    width: 200px;
    border: 1px solid #e8e8e8;
    background-color: #f8f9fa;
    padding: 8px 12px;
    text-align: left;
    transition: all 0.2s ease;
}

.nav-search input::placeholder {
    color: #999;
}

.nav-search input:focus {
    background-color: #fff;
    border-color: var(--papare-primary-red);
    outline: none;
}

/* Match Card Styles */
.match-card {
    margin-bottom: 1.5rem;
}

.match-card .match-image-header {
    padding: 0;
    border-bottom: 0;
}

@media (min-width: 768px) {
    .match-card .match-image-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
    }
}

.match-card .main-title {
    font-size: 1.75rem;
}

.match-card .main-title a {
    color: var(--papare-font-color);
    text-decoration: none;
}

.match-card .main-title a:hover {
    color: var(--papare-primary-red);
}

.match-card .date-text {
    font-size: 1.75rem;
    color: var(--papare-primary-red);
    font-weight: 500;
}

.match-card .detail {
    margin-bottom: 10px;
}

.match-card .detail-type {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--papare-primary-red);
}

.match-card .detail-label {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--papare-ash-font);
}

.match-card .detail-title {
    font-size: 1.5rem;
    font-weight: 500;
}

.match-card img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.match-card .card-img-top {
    border-radius: 2px !important;
}

.match-card .price-text {
    font-size: 1rem;
    color: var(--papare-font-color);
}

.match-card .price-details {
    font-size: 1.75rem;
    margin: 0;
    padding-top: 0.25rem;
}

/* Inner Description */
.inner-description {
    margin-bottom: 1.5rem;
}

.inner-description .name {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--papare-font-color);
}

/* Footer Styles - Minimalistic */
.footer-bar {
    background-color: #f8f9fa;
    padding: 40px 0;
    color: #666;
    border-top: 1px solid #e8e8e8;
}

.footer-bar h4 {
    color: var(--papare-font-color);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px;
}

.footer-bar p {
    color: #666;
    font-size: 14px;
}

.footer-bar a {
    color: var(--papare-primary-red);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bar a:hover {
    color: #a01a26;
}

.footer-bar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-bar ul li {
    margin-bottom: 10px;
}

.footer-text-wrap {
    font-size: 14px;
    line-height: 1.8;
}

.footer-email-wrap {
    margin-top: 15px;
}

.copyrights-bar {
    background-color: #ffffff;
    color: #999;
    font-size: 13px;
    padding: 20px 0;
    border-top: 1px solid #e8e8e8;
}

.copyrights-bar ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.copyrights-bar li {
    display: inline-block;
    margin-right: 15px;
}

.copyrights-bar a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.copyrights-bar a:hover {
    color: var(--papare-primary-red);
}

/* Additional Button Group Styles */
.action-buttons .btn {
    font-size: 13px;
    padding: 9px 18px;
}

.action-buttons .btn i {
    margin-right: 6px;
    font-size: 13px;
}

/* Placeholder Styles */
.banner-placeholder,
.ad-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 4px;
    color: #6c757d;
    min-height: 100px;
}

.banner-placeholder p,
.ad-placeholder p {
    color: #6c757d;
    margin: 0;
}

/* Card Styles - Minimalistic */
.card {
    border: 1px solid #e8e8e8;
    box-shadow: none;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 500;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e8e8e8;
}

/* Badge Styles - Flat */
.badge-dark {
    background-color: #343a40;
    color: #fff;
}

.badge {
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 3px;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .match-card .main-title {
        font-size: 1.5rem;
    }

    .match-card .date-text {
        font-size: 1.5rem;
    }

    .match-card .detail-label {
        font-size: 1rem;
    }

    .match-card .detail-title {
        font-size: 1.25rem;
    }
}

/* Utility Classes */
.mt-5 {
    margin-top: 3rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-md-auto {
    margin-left: auto;
}

@media (min-width: 768px) {
    .ml-md-auto {
        margin-left: auto;
    }
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

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

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

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

@media (min-width: 768px) {
    .text-md-right {
        text-align: right;
    }
}

@media (min-width: 768px) {
    .mt-md-0 {
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) {
    .mt-5.mt-md-0 {
        margin-top: 0 !important;
    }
}

/* Image Responsive */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Flex Utilities */
.d-flex {
    display: flex !important;
}

.flex-md-row {
    flex-direction: row;
}

@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row;
    }
}

.flex-column {
    flex-direction: column !important;
}

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

/* Link Styles */
a {
    transition: color 0.2s ease;
}

/* Container Adjustments */
.container {
    max-width: 1200px;
}

/* Sticky Top */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Alert Styles - Minimalistic */
.alert {
    border-radius: 4px;
    margin-bottom: 1rem;
    border-width: 1px;
}

.alert-success {
    background-color: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

.alert-danger {
    background-color: #ffebee;
    border-color: #ffcdd2;
    color: #c62828;
}

.alert-info {
    background-color: #e3f2fd;
    border-color: #bbdefb;
    color: #1565c0;
}

/* User Dropdown - Minimalistic */
.navbar-nav .dropdown-toggle::after {
    margin-left: 8px;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.user-dropdown {
    min-width: 280px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin-top: 8px;
}

.user-dropdown .dropdown-header {
    padding: 16px 20px;
    background-color: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.user-dropdown .dropdown-header strong {
    color: #333;
    font-size: 15px;
    font-weight: 600;
}

.user-dropdown .dropdown-header small {
    color: #999;
    font-size: 13px;
}

.user-dropdown .dropdown-item {
    padding: 12px 20px;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s ease;
}

.user-dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--papare-primary-red);
}

.user-dropdown .dropdown-item i {
    margin-right: 10px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.user-dropdown .dropdown-divider {
    margin: 0;
    border-top: 1px solid #e8e8e8;
}

.logout-dropdown-item {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--papare-primary-red);
}

.logout-dropdown-item:hover {
    background-color: #fff5f5;
    color: var(--papare-primary-red);
}

/* Footer Support Email */
.footer-support-email {
    color: #dd3333;
}

/* Dashboard Styles - Minimalistic */
.dashboard-welcome-alert {
    background-color: #f8f9fa;
    border-left: 3px solid var(--papare-primary-red);
    border-radius: 4px;
}

.dashboard-stat-card-red {
    border-left: 3px solid var(--papare-primary-red);
}

.dashboard-stat-card-green {
    border-left: 3px solid var(--papare-primary-green);
}

.dashboard-stat-card-blue {
    border-left: 3px solid var(--papare-primary-blue);
}

.dashboard-stat-card-purple {
    border-left: 3px solid var(--papare-primary-purple);
}

.dashboard-stat-icon {
    font-size: 48px;
    opacity: 0.3;
}

.dashboard-stat-icon-red {
    color: var(--papare-primary-red);
}

.dashboard-stat-icon-green {
    color: var(--papare-primary-green);
}

.dashboard-stat-icon-blue {
    color: var(--papare-primary-blue);
}

.dashboard-stat-icon-purple {
    color: var(--papare-primary-purple);
}

.dashboard-action-btn {
    padding: 20px;
}

.dashboard-action-icon {
    font-size: 32px;
}

.dashboard-user-table td.label-col {
    width: 150px;
}

.dashboard-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--papare-primary-red), #a01a26);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.dashboard-avatar-icon {
    font-size: 64px;
    color: white;
}

.btn-outline-danger {
    border: 1px solid #ffcdd2;
    color: #c62828;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.btn-outline-danger:hover {
    background-color: #ffebee;
    border-color: #ef9a9a;
    color: #b71c1c;
}

.btn-outline-primary {
    border: 1px solid #bbdefb;
    color: #1976d2;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
}

.btn-outline-secondary {
    border: 1px solid #e0e0e0;
    color: #757575;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.btn-outline-secondary:hover {
    background-color: #f5f5f5;
    border-color: #bdbdbd;
    color: #424242;
}

/* Login Page Styles */
.login-page-body {
    background: linear-gradient(135deg, #151517 0%, #313131 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    max-width: 480px;
    width: 100%;
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

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

.login-header {
    background: linear-gradient(135deg, var(--papare-primary-red) 0%, #a01a26 100%);
    padding: 40px 30px;
    text-align: center;
    color: white;
}

.login-header img {
    width: 120px;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
}

.login-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.login-header p {
    font-size: 0.95rem;
    margin: 10px 0 0 0;
    opacity: 0.95;
    color: white;
}

.login-body {
    padding: 40px 30px;
}

.login-body .form-group label {
    font-weight: 500;
    color: var(--papare-font-color);
    margin-bottom: 8px;
}

.login-body .form-control {
    height: 48px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.login-body .form-control:focus {
    border-color: var(--papare-primary-red);
    box-shadow: 0 0 0 0.2rem rgba(191, 32, 46, 0.15);
}

.login-body .form-control.is-invalid {
    border-color: #dc3545;
}

.login-body .form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.input-group-icon {
    position: relative;
}

.input-group-icon .mdi {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #626262;
    font-size: 20px;
    z-index: 10;
}

.input-group-icon .form-control {
    padding-left: 48px;
}

.btn-login {
    height: 48px;
    background: linear-gradient(135deg, var(--papare-primary-red) 0%, #a01a26 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(191, 32, 46, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(191, 32, 46, 0.4);
    background: linear-gradient(135deg, #a01a26 0%, var(--papare-primary-red) 100%);
}

.btn-login:active {
    transform: translateY(0);
}

.login-body .custom-checkbox .custom-control-label {
    color: var(--papare-ash-font);
    font-size: 0.9rem;
}

.login-body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--papare-primary-red);
    border-color: var(--papare-primary-red);
}

.login-body .alert {
    border-radius: 8px;
    border: none;
    padding: 12px 16px;
    margin-bottom: 20px;
    animation: slideDown 0.4s ease-out;
}

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

.login-body .alert-danger {
    background-color: #ffe6e6;
    color: #d32f2f;
}

.login-body .alert-success {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.login-body .invalid-feedback {
    font-size: 0.85rem;
    margin-top: 6px;
}

.staff-notice {
    text-align: center;
    padding: 15px;
    background-color: #fff3cd;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--papare-primary-yellow);
}

.staff-notice .mdi {
    color: var(--papare-primary-yellow);
    font-size: 24px;
    margin-bottom: 8px;
}

.staff-notice p {
    margin: 0;
    color: #856404;
    font-size: 0.9rem;
    line-height: 1.5;
}

.login-divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.login-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
}

.login-divider span {
    background: white;
    padding: 0 15px;
    position: relative;
    color: var(--papare-ash-font);
    font-size: 0.85rem;
}

.login-footer {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    color: var(--papare-ash-font);
    font-size: 0.85rem;
}

.login-footer a {
    color: var(--papare-primary-red);
    text-decoration: none;
    font-weight: 500;
}

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

.login-info-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.login-info-link {
    color: #BF202E;
    font-weight: 500;
}

/* Loading spinner */
.btn-login.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-login.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text-hidden {
    opacity: 0;
}

/* Responsive - Login Page */
@media (max-width: 576px) {
    .login-container {
        padding: 15px;
    }

    .login-header {
        padding: 30px 20px;
    }

    .login-header h1 {
        font-size: 1.5rem;
    }

    .login-body {
        padding: 30px 20px;
    }
}

/* ============================================
   User Management Module Styles
   ============================================ */

/* Page Headers - Minimalistic */
.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.page-header p {
    color: #999;
    margin-bottom: 0;
    font-size: 14px;
}

.page-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.page-header-actions h1 {
    font-size: 1.75rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.page-header-actions p {
    color: #999;
    margin-bottom: 0;
    font-size: 14px;
}

.page-header-actions .btn {
    font-size: 13px;
    padding: 8px 16px;
}

.page-header-actions .btn i {
    font-size: 13px;
    margin-right: 6px;
}

/* Admin Panel Cards - Minimalistic */
.admin-panel-container {
    padding: 50px 0;
}

.admin-card {
    background: white;
    border-radius: 4px;
    padding: 30px;
    border: 1px solid #e8e8e8;
    transition: border-color 0.2s ease;
    height: 100%;
}

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

.admin-card-icon {
    font-size: 48px;
    color: var(--papare-primary-red);
    margin-bottom: 20px;
}

.admin-card-content h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.admin-card-content p {
    color: var(--papare-ash-font);
    margin-bottom: 20px;
    min-height: 48px;
}

/* Core Pages - Minimalistic with Consistent Padding */
.user-management-container,
.user-details-container,
.user-form-container,
.password-change-container,
.admin-panel-container,
.container {
    padding: 50px 0;
}

.user-management-container .page-header-actions,
.user-details-container .page-header-actions {
    margin-bottom: 50px;
}

.users-table-container {
    background: white;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    margin-bottom: 50px;
}

.users-table-container table {
    margin-bottom: 0;
}

.users-table-container thead {
    background-color: #fafafa;
}

.users-table-container thead th {
    border-bottom: 1px solid #e8e8e8;
    font-weight: 400;
    color: #666;
    padding: 16px;
    font-size: 13px;
}

.users-table-container tbody td {
    padding: 16px;
    vertical-align: middle;
    color: #333;
    font-size: 14px;
}

.user-disabled {
    background-color: #fafafa;
}

.user-disabled td {
    color: #999 !important;
}

/* Empty State - Minimalistic */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
}

.empty-state i {
    font-size: 64px;
    color: var(--papare-primary-ash);
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--papare-ash-font);
    margin-bottom: 25px;
}

/* Form Cards - Minimalistic */
.user-form-container,
.password-change-container {
    padding: 50px 0;
    max-width: 800px;
    margin: 0 auto;
}

.form-card {
    background: white;
    border-radius: 4px;
    padding: 40px;
    border: 1px solid #e8e8e8;
}

.form-card .form-group {
    margin-bottom: 25px;
}

.form-card label {
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.form-card .form-control,
.form-card .form-control-file {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-card select.form-control {
    height: 40px;
}

/* Global select dropdown height */
select.form-control {
    height: 40px;
}

.form-card .form-control:focus {
    border-color: var(--papare-primary-red);
    box-shadow: none;
    outline: none;
}

.form-card .form-control.is-invalid {
    border-color: #dc3545;
}

.form-card .invalid-feedback {
    font-size: 0.875rem;
    margin-top: 6px;
}

.form-card .form-text {
    font-size: 0.875rem;
    color: var(--papare-ash-font);
    margin-top: 6px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    justify-content: flex-end;
}

.form-actions .btn {
    font-size: 13px;
    padding: 9px 20px;
}

.form-actions .btn i {
    margin-right: 6px;
    font-size: 13px;
}

/* User Details - Minimalistic */
.user-details-container {
    padding: 50px 0;
}

.info-card {
    background: white;
    border-radius: 4px;
    padding: 30px;
    border: 1px solid #e8e8e8;
    margin-bottom: 20px;
}

.info-card h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8e8e8;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f8f9fa;
}

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

.info-label {
    font-weight: 400;
    color: #666;
}

.info-value {
    color: var(--papare-ash-font);
}

.actions-card {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 30px;
    border: 1px solid #e8e8e8;
}

.actions-card h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.info-card {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 30px;
    border: 1px solid #e8e8e8;
    margin-bottom: 20px;
}

.info-card h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.info-card .card-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.share-link-box {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.share-link-box input {
    font-family: monospace;
    font-size: 0.875rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

.action-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.preset-card {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    border: 1px solid #e8e8e8;
}

.preset-card h5 {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

/* Password Change - Minimalistic */
.password-change-card {
    background: white;
    border-radius: 4px;
    padding: 40px;
    border: 1px solid #e8e8e8;
    max-width: 600px;
    margin: 0 auto;
}

.password-change-header {
    text-align: center;
    margin-bottom: 30px;
}

.password-change-header i {
    font-size: 48px;
    color: var(--papare-primary-red);
    margin-bottom: 15px;
}

.password-change-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--papare-font-color);
    margin-bottom: 10px;
}

.password-change-header p {
    color: var(--papare-ash-font);
    margin-bottom: 0;
}

.password-requirements {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid #e8e8e8;
}

.password-requirements h6 {
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.password-requirements ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.password-requirements li {
    color: var(--papare-ash-font);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Email Template Styles */
.email-container {
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Rubik', Arial, sans-serif;
}

.email-header {
    background: linear-gradient(135deg, var(--papare-primary-red) 0%, #a01a26 100%);
    padding: 40px 30px;
    text-align: center;
}

.email-header h1 {
    color: white;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.email-body {
    background: white;
    padding: 40px 30px;
}

.email-body p {
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.credentials-box {
    background: #f8f9fa;
    border-left: 4px solid var(--papare-primary-red);
    padding: 20px;
    margin: 25px 0;
    border-radius: 4px;
}

.credentials-box p {
    margin: 10px 0;
}

.credentials-box code {
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--papare-primary-red);
    font-weight: 600;
}

.button-container {
    text-align: center;
    margin: 30px 0;
}

.button {
    display: inline-block;
    background: linear-gradient(135deg, var(--papare-primary-red) 0%, #a01a26 100%);
    color: white;
    padding: 14px 32px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(191, 32, 46, 0.3);
}

.email-footer {
    background: #f8f9fa;
    padding: 30px;
    text-align: center;
}

.email-footer p {
    margin: 5px 0;
    color: var(--papare-ash-font);
    font-size: 0.875rem;
}

/* Pagination - Minimal Flat Design */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 4px;
    gap: 3px;
}

.page-item.active .page-link {
    background-color: #333;
    border-color: #333;
    color: white;
    font-weight: 500;
}

.page-item.disabled .page-link {
    background-color: white;
    border-color: transparent;
    color: #bdbdbd;
    cursor: not-allowed;
}

.page-link {
    color: #666;
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s ease;
    min-width: 36px;
    text-align: center;
}

.page-link:hover {
    color: #333;
    background-color: #f8f9fa;
    border-color: #d0d0d0;
}

.page-item.active .page-link:hover {
    background-color: #424242;
    border-color: #424242;
    color: white;
}

/* Responsive - User Management */
@media (max-width: 768px) {
    .page-header-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-card {
        padding: 30px 20px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .users-table-container {
        overflow-x: auto;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
    }

    .info-row {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 576px) {
    .user-form-container,
    .password-change-container {
        padding: 15px;
    }

    .password-change-card {
        padding: 30px 20px;
    }

    .email-header,
    .email-body {
        padding: 30px 20px;
    }
}

/* ============================================
   DataTables Modern Styling Enhancements
   ============================================ */

/* DataTables Wrapper - Minimalistic */
.dataTables_wrapper {
    padding: 20px;
}

/* Search Input */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 8px 14px;
    margin-left: 10px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    min-width: 250px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--papare-primary-red);
    outline: none;
    box-shadow: none;
}

/* Length Select */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 6px 30px 6px 12px;
    margin: 0 10px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background-position: right 10px center;
    height: 40px;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--papare-primary-red);
    outline: none;
    box-shadow: none;
}

/* DataTables Info */
.dataTables_wrapper .dataTables_info {
    padding: 15px 0;
    color: var(--papare-ash-font);
    font-size: 14px;
    font-weight: 500;
}

/* Pagination - Minimal Flat Design */
.dataTables_wrapper .dataTables_paginate {
    padding: 15px 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 3px;
    border-radius: 4px;
    border: 1px solid #333;
    background: #333;
    color: white !important;
    font-weight: 400;
    transition: all 0.2s ease;
    font-size: 13px;
    min-width: 36px;
    text-align: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #424242;
    color: white !important;
    border-color: #424242;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #555;
    color: white !important;
    border-color: #555;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #666;
    border-color: #666;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background: #fff;
    color: #bdbdbd !important;
    border-color: #e8e8e8;
    cursor: not-allowed;
    opacity: 1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.last {
    font-weight: 400;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 6px 8px;
    color: #999;
}

/* DataTables Buttons - Flat */
.dt-buttons {
    margin-bottom: 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dt-button {
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-weight: 400 !important;
    transition: opacity 0.2s ease !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.dt-button:hover {
    opacity: 0.9 !important;
}

.dt-button:active {
    opacity: 1 !important;
}

/* Table Responsive */
.dataTables_wrapper .table-responsive {
    border-radius: 4px;
    overflow: hidden;
}

/* Processing Indicator */
.dataTables_wrapper .dataTables_processing {
    background-color: var(--papare-primary-red);
    color: white;
    border-radius: 4px;
    padding: 15px 30px;
}

/* Empty Table */
.dataTables_wrapper .dataTables_empty {
    padding: 40px 20px;
    color: var(--papare-ash-font);
    font-size: 16px;
}

/* Responsive Tables */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--papare-primary-red);
    border-color: var(--papare-primary-red);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    background-color: var(--papare-primary-green);
    border-color: var(--papare-primary-green);
}

/* Child Row Styling */
table.dataTable tbody tr.child {
    background-color: #f8f9fa;
}

table.dataTable tbody tr.child ul.dtr-details {
    padding: 15px 20px;
}

table.dataTable tbody tr.child ul.dtr-details > li {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

/* Sorting Icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

table.dataTable thead .sorting:hover:after,
table.dataTable thead .sorting_asc:hover:after,
table.dataTable thead .sorting_desc:hover:after {
    opacity: 1;
}

/* ============================================
   Table Styling - Minimalistic
   ============================================ */

.users-table-container table thead th {
    background-color: #f8f9fa;
    font-weight: 400;
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0;
    color: #666;
    padding: 14px 15px;
    border-bottom: 1px solid #e8e8e8;
}

.users-table-container table tbody tr {
    transition: background-color 0.2s ease;
}

.users-table-container table tbody tr:hover {
    background-color: #f8f9fa;
}

.user-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-name-cell strong {
    font-weight: 400;
}

/* Badge Flat Design - Minimalistic Colors */
.badge {
    padding: 5px 10px;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0;
    border-radius: 3px;
}

.badge-danger {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.badge-info {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.badge-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.badge-warning {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.badge-secondary {
    background-color: #f5f5f5;
    color: #757575;
    border: 1px solid #e0e0e0;
}

/* Button Flat Design - Minimal */
.btn {
    border-radius: 4px;
    font-weight: 400;
    padding: 9px 18px;
    transition: all 0.2s ease;
    border: 1px solid;
    font-size: 13px;
    letter-spacing: 0;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}

.btn-primary {
    background-color: #ffffff;
    color: #1976d2;
    border-color: #e3f2fd;
}

.btn-primary:hover {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.btn-success {
    background-color: #ffffff;
    color: #2e7d32;
    border-color: #e8f5e9;
}

.btn-success:hover {
    background-color: #e8f5e9;
    color: #1b5e20;
    border-color: #c8e6c9;
}

.btn-info {
    background-color: #ffffff;
    color: #1565c0;
    border-color: #e3f2fd;
}

.btn-info:hover {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-color: #bbdefb;
}

.btn-warning {
    background-color: #ffffff;
    color: #e65100;
    border-color: #fff3e0;
}

.btn-warning:hover {
    background-color: #fff3e0;
    color: #bf360c;
    border-color: #ffe0b2;
}

.btn-secondary {
    background-color: #ffffff;
    color: #757575;
    border-color: #e8e8e8;
}

.btn-secondary:hover {
    background-color: #f5f5f5;
    color: #424242;
    border-color: #d0d0d0;
}

.btn-danger {
    background-color: #ffffff;
    color: #c62828;
    border-color: #ffebee;
}

.btn-danger:hover {
    background-color: #ffebee;
    color: #b71c1c;
    border-color: #ffcdd2;
}

/* Button Group - Minimalistic */
.btn-group {
    display: inline-flex;
    gap: 4px;
}

.btn-group .btn {
    border-radius: 4px;
    margin: 0;
    padding: 6px 10px;
    font-size: 12px;
    min-width: auto;
}

.btn-group .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

/* Table Action Buttons - Extra Minimal */
.users-table-container .btn-group .btn-sm {
    padding: 4px 8px;
    border: 1px solid #e8e8e8;
    background-color: #ffffff;
    color: #666;
    position: relative;
}

.users-table-container .btn-group .btn-sm:hover {
    background-color: #f8f9fa;
    color: #333;
    border-color: #d0d0d0;
}

.users-table-container .btn-group .btn-info {
    border-color: #e3f2fd;
    background-color: #e3f2fd;
    color: #1565c0;
}

.users-table-container .btn-group .btn-info:hover {
    background-color: #bbdefb;
    border-color: #90caf9;
}

.users-table-container .btn-group .btn-primary {
    border-color: #e3f2fd;
    background-color: #e3f2fd;
    color: #1976d2;
}

.users-table-container .btn-group .btn-primary:hover {
    background-color: #bbdefb;
    border-color: #90caf9;
}

.users-table-container .btn-group .btn-warning {
    border-color: #fff3e0;
    background-color: #fff3e0;
    color: #e65100;
}

.users-table-container .btn-group .btn-warning:hover {
    background-color: #ffe0b2;
    border-color: #ffcc80;
}

.users-table-container .btn-group .btn-success {
    border-color: #e8f5e9;
    background-color: #e8f5e9;
    color: #2e7d32;
}

.users-table-container .btn-group .btn-success:hover {
    background-color: #c8e6c9;
    border-color: #a5d6a7;
}

.users-table-container .btn-group .btn-secondary {
    border-color: #f5f5f5;
    background-color: #f5f5f5;
    color: #757575;
}

.users-table-container .btn-group .btn-secondary:hover {
    background-color: #e0e0e0;
    border-color: #bdbdbd;
}

/* Custom Tooltips for Action Buttons */
.users-table-container .btn-group .btn-sm[title]:hover::after,
.users-table-container .btn-group .btn-sm[title]:hover::before,
.users-table-container .btn-sm[title]:hover::after,
.users-table-container .btn-sm[title]:hover::before {
    opacity: 1;
    visibility: visible;
}

.users-table-container .btn-group .btn-sm[title]::after,
.users-table-container .btn-sm[title]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
    font-weight: 400;
}

.users-table-container .btn-group .btn-sm[title]::before,
.users-table-container .btn-sm[title]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border: 4px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

/* Ensure standalone buttons have position relative for tooltips */
.users-table-container .btn-sm {
    position: relative;
}

/* Card Flat Design */
.card {
    transition: none;
    border: 1px solid #e8e8e8;
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Scrollbar - Minimalistic */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8f9fa;
}

::-webkit-scrollbar-thumb {
    background: #dee2e6;
    transition: background 0.2s ease;
}

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

/* Focus Styles - Minimalistic */
*:focus {
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--papare-primary-red);
    box-shadow: none;
}

/* Responsive DataTables */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter input {
        min-width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }
    
    .dataTables_wrapper .dataTables_length {
        margin-bottom: 15px;
    }
    
    .dt-buttons {
        justify-content: center;
    }
    
    .dt-button {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* ============================================
   EVENT MANAGEMENT STYLES
   ============================================ */

/* Events Calendar Container */
.events-calendar-container,
.event-form-container,
.event-details-container {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Calendar Card */
.calendar-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 30px;
}

/* FullCalendar Customization */
.fc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.fc .fc-toolbar-title {
    font-size: 1.75rem;
    color: #1a1a1a;
}

.fc .fc-button {
    background-color: transparent;
    border: 1px solid #dee2e6;
    color: #495057;
    text-transform: capitalize;
    padding: 8px 16px;
    border-radius: 6px;
}

.fc .fc-button:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #1a1a1a;
}

.fc .fc-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #dc0032;
    border-color: #dc0032;
    color: #fff;
}

.fc .fc-button-primary:not(:disabled).fc-button-active:hover {
    background-color: #b3002a;
    border-color: #b3002a;
    color: #fff;
}

.fc-event {
    border-radius: 4px;
    padding: 4px 8px;
    border-left: 3px solid #dc0032;
    background-color: #dc0032;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fc-event:hover {
    background-color: #b3002a;
    color: #fff;
    transform: translateY(-1px);
}

.fc-daygrid-event-dot {
    border-color: #fff;
}

/* Event Details Modal */
.event-details-modal .detail-group {
    margin-bottom: 20px;
}

.event-details-modal .detail-group:last-child {
    margin-bottom: 0;
}

.event-details-modal label {
    color: #495057;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.event-details-modal label i {
    margin-right: 8px;
    color: #dc0032;
    width: 20px;
}

.event-details-modal p {
    color: #1a1a1a;
    margin-bottom: 0;
    padding-left: 28px;
}

.event-details-modal ul {
    padding-left: 28px;
    list-style: none;
}

.event-details-modal ul li {
    padding: 4px 0;
    color: #1a1a1a;
}

.event-details-modal ul li::before {
    content: "•";
    color: #dc0032;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Event Form */
.event-form-container .form-card {
    background: #fff;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 30px;
}

.form-section {
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title {
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.photographers-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.custom-control-label {
    color: #495057;
    cursor: pointer;
}

.custom-control-input:checked ~ .custom-control-label {
    color: #dc0032;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e9ecef;
}

/* Event Details Page */
.details-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.details-card .card-title {
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
}

.detail-row {
    display: flex;
    padding: 18px 0;
    border-bottom: 1px solid #f8f9fa;
}

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

.detail-label {
    flex: 0 0 200px;
    color: #495057;
    display: flex;
    align-items: center;
}

.detail-label i {
    margin-right: 10px;
    color: #dc0032;
    width: 20px;
}

.detail-value {
    flex: 1;
    color: #1a1a1a;
}

/* Event Detail Item */
.event-detail-item {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f8f9fa;
}

.event-detail-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.event-detail-item strong {
    display: flex;
    align-items: center;
    color: #495057;
    margin-bottom: 10px;
    font-size: 1rem;
}

.event-detail-item strong i {
    margin-right: 10px;
    width: 20px;
}

.event-detail-item p {
    color: #1a1a1a;
    margin-bottom: 0;
    margin-left: 30px;
    font-size: 1.1rem;
}

/* Photographers List (for event details) */
.photographers-list {
    list-style: none;
    padding-left: 0;
    margin-left: 30px;
    margin-bottom: 0;
}

.photographers-list li {
    padding: 8px 0;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Photographers List Detail */
.photographers-list-detail {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.photographer-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.photographer-item:hover {
    background-color: #e9ecef;
}

.photographer-avatar {
    flex: 0 0 45px;
    height: 45px;
    background: linear-gradient(135deg, #dc0032 0%, #b3002a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.photographer-avatar i {
    font-size: 24px;
    color: #fff;
}

.photographer-info {
    display: flex;
    flex-direction: column;
}

.photographer-info > div {
    color: #1a1a1a;
    margin-bottom: 4px;
}

.photographer-info small {
    font-size: 0.875rem;
}

/* Events List */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.event-item:hover {
    background-color: #e9ecef;
}

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

.event-info i {
    color: #dc0032;
    font-size: 1.25rem;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border: none;
    border-radius: 8px;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 100%;
}

.quick-action-btn:hover {
    background-color: #e9ecef;
    color: #1a1a1a;
    text-decoration: none;
}

.quick-action-btn.text-danger:hover {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.quick-action-btn i {
    margin-right: 10px;
    width: 20px;
}

/* Empty State Small */
.empty-state-small {
    text-align: center;
    padding: 40px 20px;
}

.empty-state-small i {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 15px;
}

.empty-state-small p {
    color: #6c757d;
    margin-bottom: 15px;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 12px;
}

/* Required Field Indicator */
label.required::after {
    content: " *";
    color: #dc0032;
}

/* Select2 Customization for Events */
.select2-photographers + .select2-container {
    margin-top: 0;
}

.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

/* Site-wide multiple selection styling */
.select2-container .select2-selection--multiple {
    min-height: 40px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 4px !important;
}

/* Select2 single selection height - Site-wide */
.select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    display: flex !important;
    align-items: center !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    top: 1px !important;
    right: 1px !important;
}

/* Bootstrap4 theme specific overrides */
.select2-container--bootstrap4 .select2-selection--single {
    height: 40px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: #dc0032;
    border-color: #dc0032;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    margin-right: 8px;
    font-size: 16px;
    background-color: transparent;
    border: none;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
    opacity: 0.8;
    background-color: transparent;
    border: none;
}

.select2-container--bootstrap4 .select2-search--inline .select2-search__field {
    padding: 8px;
    font-size: 14px;
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #dc0032;
    color: #fff;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple {
    border-color: #dc0032;
    box-shadow: 0 0 0 0.2rem rgba(220, 0, 50, 0.25);
}

.select2-container--bootstrap4 .select2-dropdown {
    border-color: #e8e8e8;
    border-radius: 4px;
}

/* Site-wide dropdown styling */
.select2-container .select2-dropdown {
    border-color: #e8e8e8 !important;
    border-radius: 4px !important;
}

.select2-container--bootstrap4 .select2-results__option {
    padding: 10px 12px;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background-color: #f8f9fa;
    color: #1a1a1a;
}

/* Responsive Design for Events */
@media (max-width: 768px) {
    .events-calendar-container,
    .event-form-container,
    .event-details-container {
        padding: 20px;
    }

    .calendar-card {
        padding: 20px;
    }

    .fc .fc-toolbar {
        flex-direction: column;
        gap: 15px;
    }

    .fc .fc-toolbar-title {
        font-size: 1.5rem;
    }

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

    .detail-row {
        flex-direction: column;
        gap: 8px;
    }

    .detail-label {
        flex: none;
    }

    .header-actions {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn {
        width: 100%;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ============================================
   EVENT MANAGEMENT STYLES
   ============================================ */

/* Event Management Container */
.event-management-container,
.event-form-container,
.event-details-container {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Events Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

/* Event Card */
.event-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    transition: all 0.2s ease;
}

.event-card:hover {
    border-color: var(--papare-primary-red);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.event-card-header {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #f8f9fa;
}

.event-card-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.event-placeholder i {
    font-size: 64px;
    color: #dee2e6;
}

.event-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-card-body {
    padding: 20px;
}

.event-card-body h4 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.event-card-event-name {
    font-size: 0.875rem;
    color: var(--papare-primary-red);
    margin-bottom: 10px;
}

.event-card-event-name i {
    margin-right: 6px;
}

.event-description {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 15px;
    border-top: 1px solid #f8f9fa;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #666;
}

.meta-item i {
    color: var(--papare-primary-red);
}

.event-facebook-pages {
    margin-top: 12px;
    padding: 10px;
    background: #e3f2fd;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #1565c0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-facebook-pages i {
    font-size: 16px;
}

.event-card-footer {
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e8e8e8;
    display: flex;
    gap: 8px;
}

.event-card-footer .btn {
    flex: 1;
}

.event-card-footer .delete-form {
    flex: 1;
    margin: 0;
}

.event-card-footer .delete-form .btn {
    width: 100%;
}

/* Event Form Specific */
.event-form-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Event Details */
.event-details-container .details-card {
    margin-bottom: 24px;
}

/* Event Stats */
.event-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 16px;
}

.stat-icon {
    flex: 0 0 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--papare-primary-red) 0%, #a01a26 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i {
    font-size: 24px;
    color: #fff;
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: #333;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
}

/* Shared Links List */
.shared-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shared-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    gap: 12px;
    margin-bottom: 10px;
    border-left: 3px solid var(--papare-primary-red);
}

.shared-link-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.shared-link-title {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
}

.shared-link-title i {
    color: var(--papare-primary-red);
    margin-right: 6px;
}

.shared-link-meta {
    font-size: 0.875rem;
}

.shared-link-meta i {
    margin-right: 4px;
    color: #666;
}

.shared-link-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.shared-link-actions .btn {
    padding: 4px 8px;
    font-size: 0.875rem;
}

.shared-link-actions form {
    margin: 0;
}

/* Facebook Pages List */
.facebook-pages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.facebook-page-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #e3f2fd;
    border-radius: 6px;
    gap: 12px;
    color: #1565c0;
}

.facebook-page-item i {
    font-size: 1.5rem;
}

.facebook-page-item span {
    font-weight: 500;
}

/* Events List Container - Photographer View */
.events-list-container {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.event-detail-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #666;
}

.event-detail-info i {
    color: var(--papare-primary-red);
}

.event-stats-row {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.stat-item-small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #666;
}

.stat-item-small i {
    color: var(--papare-primary-red);
}

.event-card-actions {
    margin-top: 20px;
}

/* Card Title with Actions */
.card-title-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title-actions .card-title {
    margin-bottom: 0;
}

/* Modal Customizations */
.modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.modal-header {
    background: linear-gradient(135deg, var(--papare-primary-red) 0%, #a01824 100%);
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: none;
}

.modal-header .close {
    color: white;
    opacity: 0.8;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-title {
    font-weight: 600;
}

.custom-file-label::after {
    background: var(--papare-primary-red);
    color: white;
    border-color: var(--papare-primary-red);
}

/* Responsive - Event Management */
@media (max-width: 768px) {
    .event-management-container,
    .event-form-container,
    .event-details-container,
    .events-list-container {
        padding: 20px;
    }

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

    .event-meta {
        flex-direction: column;
        gap: 10px;
    }

    .event-card-footer {
        flex-direction: column;
    }

    .event-card-footer .btn,
    .event-card-footer .delete-form {
        width: 100%;
    }

    .event-stats {
        gap: 12px;
    }

    .stat-item {
        padding: 12px;
    }

    .stat-icon {
        flex: 0 0 40px;
        height: 40px;
    }

    .stat-icon i {
        font-size: 20px;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .event-stats-row {
        flex-direction: column;
        gap: 8px;
    }

    .card-title-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .card-title-actions .btn {
        width: 100%;
    }
}

/* ================================
   Photo Management Styles
   ================================ */

.photo-management-container {
    padding: 30px;
}

/* Photo Tabs */
.photo-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e5e7eb;
}

.photo-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-bottom: -2px;
}

.photo-tab:hover {
    color: #B8001E;
    background: #fef2f4;
}

.photo-tab.active {
    color: #B8001E;
    border-bottom-color: #B8001E;
    background: transparent;
}

.photo-tab i {
    font-size: 18px;
}

.photo-tab .tab-count {
    background: #e5e7eb;
    color: #6b7280;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.photo-tab.active .tab-count {
    background: #fef2f4;
    color: #B8001E;
}

/* Tab Content */
.tab-content-container {
    position: relative;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

/* Loading Spinner */
.loading-spinner {
    display: none;
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner.active {
    display: block;
}

.loading-spinner i {
    font-size: 48px;
    color: #B8001E;
    margin-bottom: 15px;
}

.loading-spinner p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

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

/* Tab Info Banner */
.tab-info-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.tab-info-banner.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.tab-info-banner i {
    font-size: 24px;
    color: #3b82f6;
    margin-top: 2px;
}

.tab-info-banner.success i {
    color: #22c55e;
}

.tab-info-banner h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 5px 0;
}

.tab-info-banner p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Photo Badges */
.photo-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px;
}

.photo-badge.published {
    background: #22c55e;
}

.photo-badge.featured-image {
    background: #21759b;
    color: white;
    top: 40px;
}

.photo-badge i {
    font-size: 12px;
}

/* Upload Section */
.upload-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-bottom: 0;
}

.upload-section.active {
    max-height: 600px;
    margin-bottom: 30px;
}

.upload-zone {
    border: 3px dashed #d1d5db;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.upload-zone:hover {
    border-color: #B8001E;
    background: #fff;
}

.upload-zone.drag-over {
    border-color: #B8001E;
    background: #fef2f4;
    transform: scale(1.02);
}

.upload-zone-content i {
    font-size: 48px;
    color: #B8001E;
    margin-bottom: 15px;
}

.upload-zone-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.upload-zone-content p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 10px;
}

.upload-zone-content small {
    font-size: 14px;
}

.file-input-hidden {
    display: none;
}

/* Upload Progress */
.upload-progress-container {
    display: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

.upload-progress-container.active {
    display: block;
}

.upload-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.upload-progress-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.upload-progress-text {
    text-align: center;
    margin-top: 10px;
    color: #6b7280;
    font-size: 14px;
}

/* Optimization Progress Alert */
.optimization-progress-alert {
    display: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

.optimization-progress-alert.active {
    display: block;
}

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

.optimization-progress-content {
    color: #fff;
}

.optimization-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.optimization-progress-header h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.optimization-status {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.optimization-status.success {
    background: #10b981;
}

.optimization-progress-text {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
}

.optimization-progress-alert .progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.optimization-progress-alert .progress-bar {
    background: #fff;
}

/* Photo Grid Image Optimization */
.photo-thumbnail img {
    /* Hint browser to optimize memory */
    image-rendering: auto;
    content-visibility: auto;
    contain: layout style paint;
    /* Prevent accidental image decode on scroll */
    will-change: auto;
}

/* Photo Status Badges */
.photo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

.optimized-badge {
    background: rgba(16, 185, 129, 0.95);
    color: #fff;
}

.needs-optimization-badge {
    background: rgba(245, 158, 11, 0.95);
    color: #fff;
}

.progress {
    height: 24px;
    border-radius: 12px;
    background: #e5e7eb;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, #B8001E 0%, #d11539 100%);
    transition: width 0.3s ease;
}

/* Photo Controls */
.photo-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.photo-controls-left,
.photo-controls-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.photo-count {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.photo-count i {
    margin-right: 5px;
    color: #B8001E;
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.photo-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.photo-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.photo-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.photo-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #B8001E;
}

.photo-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background: #f3f4f6;
    cursor: pointer;
}

.photo-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-thumbnail:hover .photo-overlay {
    opacity: 1;
}

.photo-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.photo-action-btn:hover {
    transform: scale(1.1);
}

.photo-info {
    padding: 12px;
}

.photo-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-info small {
    font-size: 12px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
}

.empty-state i {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
}

.empty-state p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 20px;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-image-container {
    max-width: 90%;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image-container img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-info {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 15px 30px;
    border-radius: 8px;
    text-align: center;
}

.lightbox-info h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .photo-management-container {
        padding: 15px;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .photo-controls {
        flex-direction: column;
        gap: 15px;
    }

    .photo-controls-left,
    .photo-controls-right {
        width: 100%;
        justify-content: space-between;
    }

    .upload-zone {
        padding: 40px 15px;
    }

    .upload-zone-content i {
        font-size: 36px;
    }

    .upload-zone-content h3 {
        font-size: 20px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .lightbox-prev {
        left: 15px;
    }

    .lightbox-next {
        right: 15px;
    }

    .lightbox-close {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .header-actions {
        flex-direction: column;
        gap: 10px;
    }

    .header-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Share Management Styles
   ============================================ */

.shares-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

.shares-table-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: 20px;
}

.shares-table {
    width: 100%;
    border-collapse: collapse;
}

.shares-table thead {
    background-color: #f8f9fa;
}

.shares-table th {
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shares-table td {
    padding: 18px 20px;
    border-top: 1px solid #e9ecef;
    vertical-align: middle;
}

.shares-table tbody tr:hover {
    background-color: #f8f9fa;
}

.share-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.share-title-cell i {
    color: #6c757d;
}

.share-type-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.date-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-cell small {
    color: #6c757d;
    font-size: 12px;
}

.stat-number {
    font-weight: 600;
    color: var(--papare-primary-blue);
}

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

.copy-link-btn {
    transition: all 0.2s;
}

/* Share Link Container */
.share-link-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 20px;
}

.share-link-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.share-link-input {
    flex: 1;
    font-family: monospace;
    font-size: 14px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 12px 15px;
}

.share-link-actions {
    display: flex;
    gap: 10px;
}

/* Share Create Form */
.share-create-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

.form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 30px;
}

.download-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 20px;
}

.event-preview-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.preview-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

.preview-item i {
    font-size: 24px;
    color: var(--papare-primary-blue);
}

.preview-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-value {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

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

.feature-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.feature-list i {
    color: var(--papare-primary-green);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.stat-item-large {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e9ecef;
}

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

/* Public Viewer Styles */
.public-viewer-body {
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-viewer-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.public-viewer-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px 0;
    margin-bottom: 30px;
}

.public-viewer-header .header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.public-viewer-header .brand-logo {
    height: 40px;
}

.public-viewer-header .header-title h1 {
    margin: 0;
    font-size: 24px;
    color: #212529;
}

.public-viewer-header .header-title p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

.viewer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 50px;
    width: 100%;
}

.viewer-controls {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selection-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.selected-count {
    margin-left: auto;
    font-weight: 600;
    color: var(--papare-primary-blue);
}

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

.photo-grid-selectable .photo-item {
    position: relative;
}

.photo-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.photo-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.photo-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.photo-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 0;
    position: absolute;
}

.photo-checkbox label {
    display: block;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.photo-checkbox input[type="checkbox"]:checked + label {
    background: var(--papare-primary-blue);
    border-color: var(--papare-primary-blue);
}

.photo-checkbox input[type="checkbox"]:checked + label::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.photo-thumbnail {
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
}

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

.download-section {
    margin-top: 40px;
}

.download-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.download-card h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #212529;
}

.download-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.download-buttons .btn {
    flex: 1;
}

/* Password Page Styles */
.password-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.password-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 450px;
    width: 100%;
}

.password-header {
    text-align: center;
    margin-bottom: 30px;
}

.password-header .brand-logo {
    height: 50px;
    margin-bottom: 20px;
}

.password-header h1 {
    font-size: 24px;
    margin: 10px 0;
    color: #212529;
}

.password-header p {
    color: #6c757d;
    margin: 0;
}

.password-body {
    margin-bottom: 20px;
}

.password-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

/* Expired Page Styles */
.expired-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.expired-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 50px;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.expired-icon {
    font-size: 72px;
    color: #dc3545;
    margin-bottom: 20px;
}

.expired-card h1 {
    font-size: 28px;
    color: #212529;
    margin-bottom: 15px;
}

.expired-card p {
    color: #6c757d;
    font-size: 16px;
    margin-bottom: 10px;
}

/* Public Footer */
.public-footer {
    background: #212529;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: auto;
}

.public-footer p {
    margin: 0;
    color: #adb5bd;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
}

#lightboxCaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.lightbox-content,
#lightboxCaption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* Responsive Adjustments for Share Features */
@media (max-width: 768px) {
    .shares-table {
        display: block;
        overflow-x: auto;
    }

    .download-buttons {
        flex-direction: column;
    }

    .selection-controls {
        flex-wrap: wrap;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .password-card,
    .expired-card {
        padding: 30px 20px;
    }

    .share-link-container {
        flex-direction: column;
    }
}

/* Download Progress Modal */
.download-progress-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}

.download-progress-content {
    background-color: #fff;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

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

.download-progress-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.download-progress-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
}

.download-progress-header i {
    color: #2196F3;
    margin-right: 10px;
}

.download-progress-body {
    padding: 30px;
}

.download-progress-message {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.progress-bar-container {
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2196F3 0%, #1976D2 100%);
    border-radius: 15px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 50px 50px;
    animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

.progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
}

.progress-text span {
    font-weight: 600;
}

.download-status {
    text-align: center;
    padding: 15px;
    color: #2196F3;
    font-weight: 500;
}

.download-status i {
    margin-right: 8px;
}

.download-actions {
    text-align: center;
    padding: 15px 0;
}

.download-actions .btn {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
}

.download-error {
    background-color: #ffebee;
    border: 1px solid #ef5350;
    border-radius: 8px;
    padding: 15px;
    color: #c62828;
    text-align: center;
}

.download-error i {
    margin-right: 8px;
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    .download-progress-content {
        width: 95%;
    }

    .download-progress-header {
        padding: 15px;
    }

    .download-progress-header h3 {
        font-size: 1.2rem;
    }

    .download-progress-body {
        padding: 20px;
    }
}

/* ============================================
   Events List View Styles
   ============================================ */

/* Events Container */
.events-container {
    padding: 20px;
}

/* Tab Navigation */
.events-tabs {
    margin-bottom: 0;
    border-bottom: 2px solid #dee2e6;
}

.events-tabs .nav-item {
    margin-bottom: -2px;
}

.events-tabs .nav-link {
    color: #626262;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.events-tabs .nav-link:hover {
    color: var(--papare-primary-red);
    border-bottom-color: var(--papare-primary-red);
    background-color: transparent;
}

.events-tabs .nav-link.active {
    color: var(--papare-primary-red);
    border-bottom: 2px solid var(--papare-primary-red);
    background-color: transparent;
}

.events-tabs .nav-link i {
    margin-right: 8px;
}

/* Tab Content */
.events-tab-content {
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    display: block;
}

.events-tab-content .tab-pane {
    min-height: 400px;
}

/* Calendar Card */
.calendar-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

/* Events Filters Panel */
.events-filters-panel {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.events-filters-panel .form-group {
    margin-bottom: 15px;
}

.events-filters-panel label {
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.events-filters-panel .form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.events-filters-panel .form-control:focus {
    border-color: var(--papare-primary-red);
    box-shadow: 0 0 0 0.2rem rgba(191, 32, 46, 0.15);
}

.events-filters-panel .btn {
    margin-right: 10px;
}

/* Events Table Container */
.events-table-container {
    background: #fff;
    border-radius: 8px;
}

/* DataTables Custom Styling */
#events-table {
    width: 100% !important;
}

#events-table thead th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding: 12px;
    font-size: 0.9rem;
}

#events-table tbody td {
    padding: 12px;
    vertical-align: middle;
    font-size: 0.9rem;
}

#events-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* DataTables Wrapper Styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_length select {
    padding: 5px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin: 0 5px;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 5px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-left: 5px;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 15px;
    font-size: 0.9rem;
    color: #666;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 15px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 12px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #333 !important;
    transition: all 0.3s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--papare-primary-red) !important;
    color: #fff !important;
    border-color: var(--papare-primary-red) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--papare-primary-red) !important;
    color: #fff !important;
    border-color: var(--papare-primary-red) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Event Details Modal */
.event-details-modal .detail-group {
    margin-bottom: 20px;
}

.event-details-modal .detail-group:last-child {
    margin-bottom: 0;
}

.event-details-modal .detail-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.event-details-modal .detail-group label i {
    margin-right: 8px;
    color: var(--papare-primary-red);
}

.event-details-modal .detail-group p {
    margin-bottom: 0;
    color: #666;
}

.event-details-modal .detail-group ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.event-details-modal .detail-group ul li {
    color: #666;
    margin-bottom: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .events-container {
        padding: 10px;
    }

    .events-tabs .nav-link {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .events-tab-content {
        padding: 15px;
    }

    .events-filters-panel {
        padding: 15px;
    }

    .events-filters-panel .col-md-3,
    .events-filters-panel .col-md-9,
    .events-filters-panel .col-md-12 {
        margin-bottom: 10px;
    }

    .events-filters-panel .btn {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }

    .events-table-container {
        padding: 10px;
        overflow-x: auto;
    }

    #events-table {
        font-size: 0.8rem;
    }

    #events-table thead th,
    #events-table tbody td {
        padding: 8px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-bottom: 10px;
    }
}

/* Tournament Styles */
.tournaments-container {
    padding: 20px;
}

.tournaments-table-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tournaments-filters-panel {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.tournaments-filters-panel .form-group {
    margin-bottom: 15px;
}

.tournaments-filters-panel label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 5px;
}

.tournaments-filters-panel .btn {
    margin-right: 10px;
}

#tournaments-table {
    width: 100%;
}

#tournaments-table thead th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
}

#tournaments-table tbody tr {
    transition: background-color 0.2s ease;
}

#tournaments-table tbody tr:hover {
    background-color: #f8f9fa;
}

.tournament-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tournament-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.tournament-card-header {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tournament-card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.tournament-card-header .badge {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
}

.tournament-card-body {
    padding: 20px;
    flex-grow: 1;
}

.tournament-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.tournament-dates i {
    color: #667eea;
}

.tournament-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.tournament-card-footer {
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 8px;
}

.tournament-card-footer .btn {
    flex: 1;
}

.tournament-details-container {
    padding: 20px;
}

.tournament-form-container {
    padding: 20px;
}

.card-title-with-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title-with-badge .card-title {
    margin: 0;
}

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

.event-item-tournament {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.event-item-tournament .event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.event-item-tournament .event-header h6 {
    margin: 0;
    font-size: 1.1rem;
}

.event-item-tournament .event-header h6 a {
    color: #333;
    text-decoration: none;
}

.event-item-tournament .event-header h6 a:hover {
    color: #667eea;
}

.event-item-tournament .event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #666;
}

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

.event-item-tournament .event-meta i {
    color: #667eea;
}

.events-list-compact {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
    font-size: 0.9rem;
}

.events-list-compact strong {
    color: #333;
    margin-right: 10px;
}

.event-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #667eea;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.event-link:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    text-decoration: none;
}

.event-link i {
    font-size: 0.85rem;
}

/* Calendar Container Styles (existing) */
.events-calendar-container {
    padding: 20px;
}

/* Photo Selection for Sharing Styles */
.share-create-container {
    padding: 20px;
}

.card-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.card-header-with-actions .card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.selection-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.selection-controls .badge {
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 500;
}

.photo-grid-selectable {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.photo-grid-selectable .photo-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #f8f9fa;
}

.photo-grid-selectable .photo-item:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.photo-grid-selectable .photo-item.selected,
.photo-grid-selectable .photo-item:has(.photo-select-checkbox:checked) {
    border-color: #667eea;
    background: #f0f3ff;
}

.photo-grid-selectable .photo-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.photo-grid-selectable .photo-checkbox input[type="checkbox"] {
    display: none;
}

.photo-grid-selectable .photo-checkbox label {
    display: block;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.photo-grid-selectable .photo-checkbox label:hover {
    border-color: #667eea;
    background: #f0f3ff;
}

.photo-grid-selectable .photo-checkbox input[type="checkbox"]:checked + label {
    background: #667eea;
    border-color: #667eea;
}

.photo-grid-selectable .photo-checkbox input[type="checkbox"]:checked + label::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
}

.photo-grid-selectable .photo-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.photo-grid-selectable .photo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-grid-selectable .photo-info {
    padding: 10px;
    background: white;
}

.photo-grid-selectable .photo-title {
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #dee2e6;
}

.empty-state h3 {
    margin-bottom: 10px;
    color: #495057;
}

.empty-state p {
    margin-bottom: 0;
    font-size: 1rem;
}

.form-card {
    background: white;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.event-preview-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-item i {
    font-size: 1.5rem;
    color: #667eea;
    width: 30px;
    text-align: center;
}

.preview-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.preview-value {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

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

.feature-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #495057;
}

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

.feature-list li i {
    color: #667eea;
    font-size: 1rem;
}

.download-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
}

.quick-action-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.quick-action-btn i {
    font-size: 1.1rem;
}

.quick-action-btn.text-danger:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Photo Search and Pagination Styles */
.photo-search-bar {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

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

.search-input-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.search-input-wrapper .form-control {
    padding-left: 38px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.search-input-wrapper .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.photos-per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.photos-per-page-selector label {
    margin: 0;
    font-size: 0.9rem;
    color: #495057;
}

.photos-per-page-selector .form-control-sm {
    width: 80px;
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.pagination-info {
    font-size: 0.9rem;
    color: #6c757d;
}

.pagination-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pagination-btn {
    min-width: 40px;
    padding: 6px 12px;
    font-size: 0.875rem;
}

.pagination-ellipsis {
    padding: 0 8px;
    color: #6c757d;
}

.no-results-message {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.no-results-message i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #dee2e6;
}

.no-results-message p {
    margin: 0;
    font-size: 1rem;
}

.loading-state {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.loading-state .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 20px;
}

.loading-state p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .photo-grid-selectable {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    
    .card-header-with-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .selection-controls {
        width: 100%;
        justify-content: space-between;
    }

    .photo-search-bar {
        flex-direction: column;
        gap: 10px;
    }

    .photos-per-page-selector {
        width: 100%;
        justify-content: space-between;
    }

    .pagination-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

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