/* Modern Mavi Tema - SMS Bot Web */

:root {
    --primary-blue: #1e3a8a;
    --secondary-blue: #3b82f6;
    --light-blue: #1e40af;
    --dark-blue: #0f172a;
    --accent-blue: #60a5fa;
    --navy-blue: #1e293b;
    --deep-blue: #0f172a;
    --success-green: #10b981;
    --warning-orange: #f59e0b;
    --danger-red: #ef4444;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --white: #ffffff;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--navy-blue) 50%, var(--primary-blue) 100%);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
}

/* Header - Simple Modern */
.header {
    background: linear-gradient(135deg, var(--deep-blue) 0%, var(--navy-blue) 100%);
    color: var(--text-primary);
    padding: 1.5rem 0;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.75rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.logo:hover {
    color: var(--secondary-blue);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--secondary-blue);
}

.nav-menu a.active {
    color: var(--secondary-blue);
    font-weight: 600;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    flex-wrap: wrap;
}

.user-info span {
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 500;
}


/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(59, 130, 246, 0.4);
}

.card-header {
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.card-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: rgba(30, 58, 138, 0.2);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    background: rgba(30, 58, 138, 0.3);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    background: rgba(30, 58, 138, 0.2);
    color: var(--text-primary);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    background: rgba(30, 58, 138, 0.3);
}

.form-select {
    background: rgba(30, 58, 138, 0.2);
    color: var(--text-primary);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-select:focus {
    outline: none;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    background: rgba(30, 58, 138, 0.3);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
    min-height: 44px;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: rgba(30, 58, 138, 0.2);
    color: var(--text-primary);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-secondary:hover {
    background: rgba(30, 58, 138, 0.3);
}

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

.btn-warning {
    background: var(--warning-orange);
    color: var(--white);
}

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

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Grid System */
.grid {
    display: grid;
    gap: 2rem;
}

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

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

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

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--secondary-blue);
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.4);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-blue);
    margin-bottom: 0.5rem;
}

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

/* Package Cards - Modern Design */
.package-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 58, 138, 0.05) 100%);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    backdrop-filter: blur(15px);
    transform: translateY(0);
}

.package-card:hover {
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(30, 58, 138, 0.08) 100%);
}

.package-card.featured {
    border-color: rgba(59, 130, 246, 0.6);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(30, 58, 138, 0.08) 100%);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.25);
    position: relative;
}

.package-card.featured::before {
    content: 'POPÜLER';
    position: absolute;
    top: 1rem;
    right: -1rem;
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.25rem 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    letter-spacing: 1px;
}

.package-card.featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
    border-radius: 20px 20px 0 0;
}

.package-name {
    color: #ffffff !important;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.package-price {
    color: #ffffff !important;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    position: relative;
}

.package-price::before {
    content: '';
    font-size: 1.2rem;
    opacity: 0.8;
    margin-right: 0.2rem;
}

.package-credits {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    background: rgba(59, 130, 246, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: inline-block;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.package-description {
    color: #ffffff !important;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.unit-price {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.discount {
    color: #10b981;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background: rgba(16, 185, 129, 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 15px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: inline-block;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

.package-card.featured::before {
    content: 'POPÜLER';
    position: absolute;
    top: 1rem;
    right: -2rem;
    background: var(--primary-blue);
    color: var(--white);
    padding: 0.25rem 3rem;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
}

.package-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.package-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.package-credits {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.package-description {
    color: var(--gray-600);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Tables */
.table-container {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

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

.table th,
.table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--text-primary);
}

.table td {
    background: rgba(30, 58, 138, 0.1);
}

.table th {
    background: var(--navy-blue);
    font-weight: 600;
    color: var(--text-primary);
}

.table tbody tr {
    background: rgba(30, 58, 138, 0.1);
}

.table tbody tr:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* Alerts */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success-green);
    color: var(--success-green);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning-orange);
    color: var(--warning-orange);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger-red);
    color: var(--danger-red);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--secondary-blue);
    color: var(--secondary-blue);
}

/* Login/Register Forms */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 3rem;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(10px);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

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

.auth-links {
    text-align: center;
    margin-top: 1.5rem;
}

.auth-links a {
    color: var(--secondary-blue);
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: spin 1s ease-in-out infinite;
}

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

/* Responsive Design - Mobile First Approach */

/* Extra Large Devices (Large Desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
        padding: 2rem 2rem;
    }
    
    .header-content {
        max-width: 1400px;
        padding: 0 2rem;
    }
    
    .nav-menu {
        gap: 3rem;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 1200px;
        padding: 2rem 1.5rem;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        padding: 1.5rem 1rem;
    }
    
    .header-content {
        padding: 0 1.5rem;
    }
    
    .nav-menu {
        gap: 1.5rem;
    }
    
    .nav-menu a {
        font-size: 0.95rem;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .package-card {
        padding: 2rem 1.5rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .auth-card {
        padding: 2.5rem;
        max-width: 450px;
    }
}

/* Small Devices (Landscape Phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding: 1rem;
    }
    
    .header {
        padding: 1rem 0;
        position: relative;
    }
    
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-menu,
    .user-menu {
        display: none;
    }
    
    .mobile-menu {
        display: none;
    }
    
    .mobile-menu.active {
        display: block;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .package-card {
        padding: 1.5rem 1rem;
    }
    
    .package-name {
        font-size: 1.2rem;
    }
    
    .package-price {
        font-size: 2rem;
    }
    
    .card {
        padding: 1.25rem;
    }
    
    .auth-card {
        padding: 2rem;
        max-width: 400px;
    }
}

/* Mobile Header - Hamburger Menu */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 1001;
    position: relative;
}

.mobile-menu-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.1);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-blue);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.mobile-menu.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

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

.mobile-nav-menu li {
    margin-bottom: 0.5rem;
}

.mobile-nav-menu a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.mobile-nav-menu a:hover,
.mobile-nav-menu a.active {
    background: rgba(59, 130, 246, 0.2);
    color: var(--secondary-blue);
}

.mobile-user-menu {
    padding: 1rem;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.mobile-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
}

.mobile-user-info span {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

.mobile-buttons {
    display: flex;
    gap: 0.5rem;
}

.mobile-buttons .btn {
    flex: 1;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

/* Extra Small Devices (Portrait Phones, less than 576px) */
@media (max-width: 575.98px) {
    .container {
        padding: 0.75rem;
    }
    
    .header {
        padding: 0.75rem 0;
        position: relative;
    }
    
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.75rem;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-menu,
    .user-menu {
        display: none;
    }
    
    .mobile-menu {
        display: none;
    }
    
    .mobile-menu.active {
        display: block;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .package-card {
        padding: 1.25rem 0.75rem;
        margin-bottom: 1rem;
    }
    
    .package-name {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .package-price {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .package-credits {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }
    
    .package-description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .auth-card {
        padding: 1.5rem;
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        min-height: 40px;
    }
    
    .btn-lg {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        min-width: 600px;
    }
    
    .table th,
    .table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* Landscape Orientation for Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .header {
        padding: 0.5rem 0;
    }
    
    .header-content {
        flex-direction: row;
        gap: 1rem;
    }
    
    .nav-menu {
        gap: 0.75rem;
    }
    
    .nav-menu a {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }
    
    .user-menu {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .container {
        padding: 0.5rem;
    }
    
    .package-card {
        padding: 1rem 0.75rem;
    }
    
    .card {
        padding: 0.75rem;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        font-weight: 800;
    }
    
    .nav-menu a {
        font-weight: 600;
    }
    
    .btn {
        font-weight: 600;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
    }
    
    .nav-menu a {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .package-card:hover {
        transform: none;
    }
    
    .card:hover {
        transform: none;
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 767.98px) {
    /* Smooth scrolling for mobile */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Better touch targets */
    .btn,
    .nav-menu a,
    .form-input,
    .form-textarea,
    .form-select {
        min-height: 44px;
    }
    
    /* Package cards mobile optimization */
    .package-card {
        margin-bottom: 1.5rem;
    }
    
    .package-card .btn-primary {
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Table responsive */
    .table-container {
        border-radius: 8px;
        margin: 1rem 0;
    }
    
    /* Form optimizations */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
    
    /* Alert optimizations */
    .alert {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }
    
    /* Card optimizations */
    .card {
        margin-bottom: 1rem;
        border-radius: 12px;
    }
    
    .card-header {
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-subtitle {
        font-size: 0.85rem;
    }
}

/* Tablet specific optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
    .package-card {
        min-height: 400px;
    }
    
    .grid-3 {
        gap: 1.5rem;
    }
    
    .stats-grid {
        gap: 1.5rem;
    }
    
    .nav-menu a {
        padding: 0.5rem 1rem;
    }
}

/* Large screen optimizations */
@media (min-width: 1024px) {
    .package-card {
        min-height: 450px;
    }
    
    .grid-3 {
        gap: 2rem;
    }
    
    .container {
        padding: 2rem 1.5rem;
    }
}

/* Print styles */
@media print {
    .header,
    .btn,
    .nav-menu {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .package-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success {
    background-color: var(--success-green);
    color: var(--white);
}

.badge-warning {
    background-color: var(--warning-orange);
    color: var(--white);
}

.badge-danger {
    background-color: var(--danger-red);
    color: var(--white);
}

.badge-info {
    background-color: var(--secondary-blue);
    color: var(--white);
}

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

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

.border { border: 1px solid var(--gray-200); }
.border-2 { border: 2px solid var(--gray-200); }
.border-blue { border-color: var(--secondary-blue); }
.border-green { border-color: var(--success-green); }
.border-red { border-color: var(--danger-red); }

.bg-white { background-color: var(--white); }
.bg-blue { background-color: var(--secondary-blue); }
.bg-green { background-color: var(--success-green); }
.bg-red { background-color: var(--danger-red); }
.bg-gray { background-color: var(--gray-100); }

.text-white { color: var(--white); }
.text-blue { color: var(--secondary-blue); }
.text-green { color: var(--success-green); }
.text-red { color: var(--danger-red); }
.text-gray { color: var(--gray-600); }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

/* Additional Dark Theme Fixes */
.info-box {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    color: var(--text-primary);
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

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

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

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

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

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

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

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-red);
    border: 1px solid var(--danger-red);
}

.text-green {
    color: var(--success-green);
}

.text-red {
    color: var(--danger-red);
}

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

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

.mt-4 {
    margin-top: 1rem;
}

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

.flex {
    display: flex;
}

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

.gap-4 {
    gap: 1rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

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

.grid {
    display: grid;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding: 1rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Additional fixes for all pages */
ul {
    color: var(--text-primary);
}

li {
    color: var(--text-primary);
}

small {
    color: var(--text-secondary);
}

strong {
    color: var(--text-primary);
}

/* Fix for all form elements */
input, select, textarea {
    color: var(--text-primary) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* Fix for all buttons */
button, .btn {
    color: var(--text-primary) !important;
}

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

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

.btn-success, .btn-warning, .btn-danger {
    color: var(--white) !important;
}

/* Fix for all table elements */
table {
    background: rgba(30, 58, 138, 0.1) !important;
}

table th {
    background: var(--navy-blue) !important;
    color: var(--text-primary) !important;
}

table td {
    background: rgba(30, 58, 138, 0.1) !important;
    color: var(--text-primary) !important;
}

table tbody tr {
    background: rgba(30, 58, 138, 0.1) !important;
}

table tbody tr:hover {
    background: rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all card elements */
.card {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.card-header {
    background: rgba(30, 58, 138, 0.1) !important;
    color: var(--text-primary) !important;
}

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

.card-subtitle {
    color: var(--text-secondary) !important;
}

/* Fix for all package cards */
.package-card {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.package-card h3 {
    color: var(--text-primary) !important;
}

.package-card .price {
    color: var(--secondary-blue) !important;
}

.package-card .sms-count {
    color: var(--text-secondary) !important;
}

.package-card .unit-price {
    color: var(--text-secondary) !important;
}

.package-card .discount {
    color: var(--success-green) !important;
}

/* Fix for all info boxes */
.info-box {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Fix for all status badges */
.status-badge {
    color: var(--text-primary) !important;
}

.status-badge.success {
    color: var(--success-green) !important;
}

.status-badge.pending {
    color: var(--warning-orange) !important;
}

.status-badge.completed {
    color: var(--success-green) !important;
}

/* Fix for all badge elements */
.badge {
    color: var(--text-primary) !important;
}

.badge-success {
    color: var(--success-green) !important;
}

.badge-warning {
    color: var(--warning-orange) !important;
}

.badge-danger {
    color: var(--danger-red) !important;
}

/* Fix for all text elements */
.text-green {
    color: var(--success-green) !important;
    font-weight: 700 !important;
}

.text-red {
    color: var(--danger-red) !important;
}

.text-blue {
    color: var(--secondary-blue) !important;
}

.text-gray {
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
}

/* Fix for all form elements */
.form-input {
    background: rgba(30, 58, 138, 0.2) !important;
    color: var(--text-primary) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
}

.form-input:focus {
    background: rgba(30, 58, 138, 0.3) !important;
    color: var(--text-primary) !important;
}

.form-textarea {
    background: rgba(30, 58, 138, 0.2) !important;
    color: var(--text-primary) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
}

.form-textarea:focus {
    background: rgba(30, 58, 138, 0.3) !important;
    color: var(--text-primary) !important;
}

.form-select {
    background: rgba(30, 58, 138, 0.2) !important;
    color: var(--text-primary) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
}

.form-select:focus {
    background: rgba(30, 58, 138, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Fix for all button elements */
.btn-secondary {
    background: rgba(30, 58, 138, 0.2) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.btn-secondary:hover {
    background: rgba(30, 58, 138, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Fix for all alert elements */
.alert {
    color: var(--text-primary) !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--success-green) !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning-orange) !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger-red) !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--secondary-blue) !important;
}

/* Fix for all auth elements */
.auth-card {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

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

.auth-subtitle {
    color: var(--text-secondary) !important;
}

/* Fix for all stats elements */
.stat-card {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.stat-value {
    color: var(--secondary-blue) !important;
}

.stat-label {
    color: var(--text-secondary) !important;
}

/* Fix for all package elements */
.package-card.featured {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, var(--card-bg) 100%) !important;
}

.package-card.featured::before {
    background: var(--secondary-blue) !important;
    color: var(--white) !important;
}

/* Fix for all table container elements */
.table-container {
    background: rgba(30, 58, 138, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all grid elements */
.grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}

/* Fix for all flex elements */
.flex {
    display: flex !important;
}

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

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

/* Fix for all margin elements */
.mt-1 {
    margin-top: 0.25rem !important;
}

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

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

/* Fix for all text alignment elements */
.text-center {
    text-align: center !important;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--card-bg) !important;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 58, 138, 0.1);
    color: var(--text-primary) !important;
    border-radius: 16px 16px 0 0;
}

.modal-body {
    padding: 1.5rem;
    color: var(--text-primary) !important;
}

.modal h3 {
    color: var(--text-primary) !important;
    margin: 0;
}

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

.modal input, .modal select, .modal textarea {
    background: rgba(30, 58, 138, 0.2) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.modal input:focus, .modal select:focus, .modal textarea:focus {
    background: rgba(30, 58, 138, 0.3) !important;
    border-color: var(--secondary-blue) !important;
}

/* Additional utility classes */
.mb-4 {
    margin-bottom: 1rem !important;
}

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

.text-sm {
    font-size: 0.875rem !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.space-y-2 > * + * {
    margin-top: 0.5rem !important;
}

.w-full {
    width: 100% !important;
}

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

.gap-2 {
    gap: 0.5rem !important;
}

.btn-sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 36px !important;
}

/* Fix for all remaining white elements */
.white, .bg-white, .bg-light, .bg-gray-100, .bg-gray-50, .bg-gray-200 {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Fix for all remaining white text */
.text-white, .text-light, .text-gray-100, .text-gray-200 {
    color: var(--text-primary) !important;
}

/* Fix for all remaining dark text */
.text-dark, .text-black, .text-gray-800, .text-gray-900 {
    color: var(--text-primary) !important;
}

/* Fix for all remaining gray text */
.text-gray, .text-gray-500, .text-gray-600, .text-gray-700 {
    color: var(--text-secondary) !important;
}

/* Fix for all remaining borders */
.border-gray-200, .border-gray-300, .border-gray-400 {
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining shadows */
.shadow-gray-200, .shadow-gray-300 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Fix for all remaining background colors */
.bg-blue-50, .bg-blue-100, .bg-blue-200 {
    background: rgba(59, 130, 246, 0.1) !important;
}

.bg-green-50, .bg-green-100, .bg-green-200 {
    background: rgba(16, 185, 129, 0.1) !important;
}

.bg-red-50, .bg-red-100, .bg-red-200 {
    background: rgba(239, 68, 68, 0.1) !important;
}

.bg-yellow-50, .bg-yellow-100, .bg-yellow-200 {
    background: rgba(245, 158, 11, 0.1) !important;
}

/* Fix for all remaining text colors */
.text-blue-600, .text-blue-700, .text-blue-800 {
    color: var(--secondary-blue) !important;
}

.text-green-600, .text-green-700, .text-green-800 {
    color: var(--success-green) !important;
}

.text-red-600, .text-red-700, .text-red-800 {
    color: var(--danger-red) !important;
}

.text-yellow-600, .text-yellow-700, .text-yellow-800 {
    color: var(--warning-orange) !important;
}

/* Fix for all remaining border colors */
.border-blue-200, .border-blue-300, .border-blue-400 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.border-green-200, .border-green-300, .border-green-400 {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.border-red-200, .border-red-300, .border-red-400 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.border-yellow-200, .border-yellow-300, .border-yellow-400 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Fix for all remaining hover states */
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover {
    background: rgba(30, 58, 138, 0.2) !important;
}

.hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover, .hover\:bg-blue-200:hover {
    background: rgba(59, 130, 246, 0.2) !important;
}

.hover\:bg-green-50:hover, .hover\:bg-green-100:hover, .hover\:bg-green-200:hover {
    background: rgba(16, 185, 129, 0.2) !important;
}

.hover\:bg-red-50:hover, .hover\:bg-red-100:hover, .hover\:bg-red-200:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}

.hover\:bg-yellow-50:hover, .hover\:bg-yellow-100:hover, .hover\:bg-yellow-200:hover {
    background: rgba(245, 158, 11, 0.2) !important;
}

/* Fix for all remaining focus states */
.focus\:bg-gray-50:focus, .focus\:bg-gray-100:focus, .focus\:bg-gray-200:focus {
    background: rgba(30, 58, 138, 0.3) !important;
}

.focus\:bg-blue-50:focus, .focus\:bg-blue-100:focus, .focus\:bg-blue-200:focus {
    background: rgba(59, 130, 246, 0.3) !important;
}

.focus\:bg-green-50:focus, .focus\:bg-green-100:focus, .focus\:bg-green-200:focus {
    background: rgba(16, 185, 129, 0.3) !important;
}

.focus\:bg-red-50:focus, .focus\:bg-red-100:focus, .focus\:bg-red-200:focus {
    background: rgba(239, 68, 68, 0.3) !important;
}

.focus\:bg-yellow-50:focus, .focus\:bg-yellow-100:focus, .focus\:bg-yellow-200:focus {
    background: rgba(245, 158, 11, 0.3) !important;
}

/* Fix for all remaining active states */
.active\:bg-gray-50:active, .active\:bg-gray-100:active, .active\:bg-gray-200:active {
    background: rgba(30, 58, 138, 0.3) !important;
}

.active\:bg-blue-50:active, .active\:bg-blue-100:active, .active\:bg-blue-200:active {
    background: rgba(59, 130, 246, 0.3) !important;
}

.active\:bg-green-50:active, .active\:bg-green-100:active, .active\:bg-green-200:active {
    background: rgba(16, 185, 129, 0.3) !important;
}

.active\:bg-red-50:active, .active\:bg-red-100:active, .active\:bg-red-200:active {
    background: rgba(239, 68, 68, 0.3) !important;
}

.active\:bg-yellow-50:active, .active\:bg-yellow-100:active, .active\:bg-yellow-200:active {
    background: rgba(245, 158, 11, 0.3) !important;
}

/* Fix for all remaining disabled states */
.disabled\:bg-gray-50:disabled, .disabled\:bg-gray-100:disabled, .disabled\:bg-gray-200:disabled {
    background: rgba(30, 58, 138, 0.1) !important;
    opacity: 0.5 !important;
}

.disabled\:bg-blue-50:disabled, .disabled\:bg-blue-100:disabled, .disabled\:bg-blue-200:disabled {
    background: rgba(59, 130, 246, 0.1) !important;
    opacity: 0.5 !important;
}

.disabled\:bg-green-50:disabled, .disabled\:bg-green-100:disabled, .disabled\:bg-green-200:disabled {
    background: rgba(16, 185, 129, 0.1) !important;
    opacity: 0.5 !important;
}

.disabled\:bg-red-50:disabled, .disabled\:bg-red-100:disabled, .disabled\:bg-red-200:disabled {
    background: rgba(239, 68, 68, 0.1) !important;
    opacity: 0.5 !important;
}

.disabled\:bg-yellow-50:disabled, .disabled\:bg-yellow-100:disabled, .disabled\:bg-yellow-200:disabled {
    background: rgba(245, 158, 11, 0.1) !important;
    opacity: 0.5 !important;
}

/* Fix for all remaining placeholder colors */
::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

::-webkit-input-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

::-moz-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

:-ms-input-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

/* Fix for all remaining selection colors */
::selection {
    background: rgba(59, 130, 246, 0.3) !important;
    color: var(--text-primary) !important;
}

::-moz-selection {
    background: rgba(59, 130, 246, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Fix for all remaining scrollbar colors */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(30, 58, 138, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

/* Fix for all remaining focus ring colors */
.focus\:ring-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-green-500:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.focus\:ring-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.focus\:ring-yellow-500:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

/* Fix for all remaining border radius */
.rounded-sm {
    border-radius: 4px !important;
}

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

.rounded-md {
    border-radius: 12px !important;
}

.rounded-lg {
    border-radius: 16px !important;
}

.rounded-xl {
    border-radius: 20px !important;
}

.rounded-2xl {
    border-radius: 24px !important;
}

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

/* Fix for all remaining padding */
.p-1 {
    padding: 0.25rem !important;
}

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

.p-3 {
    padding: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.p-5 {
    padding: 1.25rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.p-8 {
    padding: 2rem !important;
}

/* Fix for all remaining margin */
.m-1 {
    margin: 0.25rem !important;
}

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

.m-3 {
    margin: 0.75rem !important;
}

.m-4 {
    margin: 1rem !important;
}

.m-5 {
    margin: 1.25rem !important;
}

.m-6 {
    margin: 1.5rem !important;
}

.m-8 {
    margin: 2rem !important;
}

/* Fix for all remaining width and height */
.w-1, .w-2, .w-3, .w-4, .w-5, .w-6, .w-8, .w-10, .w-12, .w-16, .w-20, .w-24, .w-32, .w-40, .w-48, .w-56, .w-64 {
    width: auto !important;
}

.h-1, .h-2, .h-3, .h-4, .h-5, .h-6, .h-8, .h-10, .h-12, .h-16, .h-20, .h-24, .h-32, .h-40, .h-48, .h-56, .h-64 {
    height: auto !important;
}

/* Fix for all remaining font sizes */
.text-xs {
    font-size: 0.75rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.text-base {
    font-size: 1rem !important;
}

.text-lg {
    font-size: 1.125rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
}

.text-2xl {
    font-size: 1.5rem !important;
}

.text-3xl {
    font-size: 1.875rem !important;
}

.text-4xl {
    font-size: 2.25rem !important;
}

.text-5xl {
    font-size: 3rem !important;
}

/* Fix for all remaining font weights */
.font-thin {
    font-weight: 100 !important;
}

.font-light {
    font-weight: 300 !important;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

.font-black {
    font-weight: 900 !important;
}

/* Fix for all remaining line heights */
.leading-none {
    line-height: 1 !important;
}

.leading-tight {
    line-height: 1.25 !important;
}

.leading-snug {
    line-height: 1.375 !important;
}

.leading-normal {
    line-height: 1.5 !important;
}

.leading-relaxed {
    line-height: 1.625 !important;
}

.leading-loose {
    line-height: 2 !important;
}

/* Fix for all remaining letter spacing */
.tracking-tighter {
    letter-spacing: -0.05em !important;
}

.tracking-tight {
    letter-spacing: -0.025em !important;
}

.tracking-normal {
    letter-spacing: 0em !important;
}

.tracking-wide {
    letter-spacing: 0.025em !important;
}

.tracking-wider {
    letter-spacing: 0.05em !important;
}

.tracking-widest {
    letter-spacing: 0.1em !important;
}

/* Fix for all remaining text alignment */
.text-left {
    text-align: left !important;
}

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

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

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

/* Fix for all remaining text decoration */
.underline {
    text-decoration: underline !important;
}

.line-through {
    text-decoration: line-through !important;
}

.no-underline {
    text-decoration: none !important;
}

/* Fix for all remaining text transform */
.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}

.normal-case {
    text-transform: none !important;
}

/* Fix for all remaining flexbox */
.flex-row {
    flex-direction: row !important;
}

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

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.items-start {
    align-items: flex-start !important;
}

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

.items-end {
    align-items: flex-end !important;
}

.justify-start {
    justify-content: flex-start !important;
}

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

.justify-end {
    justify-content: flex-end !important;
}

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

.justify-around {
    justify-content: space-around !important;
}

.justify-evenly {
    justify-content: space-evenly !important;
}

/* Fix for all remaining grid */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* Fix for all remaining gap */
.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 0.75rem !important;
}

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

.gap-5 {
    gap: 1.25rem !important;
}

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

.gap-8 {
    gap: 2rem !important;
}

.gap-10 {
    gap: 2.5rem !important;
}

.gap-12 {
    gap: 3rem !important;
}

/* Fix for all remaining spacing */
.space-x-1 > * + * {
    margin-left: 0.25rem !important;
}

.space-x-2 > * + * {
    margin-left: 0.5rem !important;
}

.space-x-3 > * + * {
    margin-left: 0.75rem !important;
}

.space-x-4 > * + * {
    margin-left: 1rem !important;
}

.space-x-5 > * + * {
    margin-left: 1.25rem !important;
}

.space-x-6 > * + * {
    margin-left: 1.5rem !important;
}

.space-x-8 > * + * {
    margin-left: 2rem !important;
}

.space-y-1 > * + * {
    margin-top: 0.25rem !important;
}

.space-y-2 > * + * {
    margin-top: 0.5rem !important;
}

.space-y-3 > * + * {
    margin-top: 0.75rem !important;
}

.space-y-4 > * + * {
    margin-top: 1rem !important;
}

.space-y-5 > * + * {
    margin-top: 1.25rem !important;
}

.space-y-6 > * + * {
    margin-top: 1.5rem !important;
}

.space-y-8 > * + * {
    margin-top: 2rem !important;
}

/* Fix for all remaining overflow */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-x-scroll {
    overflow-x: scroll !important;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

/* Fix for all remaining position */
.static {
    position: static !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

/* Fix for all remaining z-index */
.z-0 {
    z-index: 0 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-20 {
    z-index: 20 !important;
}

.z-30 {
    z-index: 30 !important;
}

.z-40 {
    z-index: 40 !important;
}

.z-50 {
    z-index: 50 !important;
}

/* Fix for all remaining visibility */
.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/* Fix for all remaining display */
.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.inline {
    display: inline !important;
}

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.grid {
    display: grid !important;
}

.inline-grid {
    display: inline-grid !important;
}

.hidden {
    display: none !important;
}

/* Fix for all remaining cursor */
.cursor-auto {
    cursor: auto !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-wait {
    cursor: wait !important;
}

.cursor-text {
    cursor: text !important;
}

.cursor-move {
    cursor: move !important;
}

.cursor-help {
    cursor: help !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

/* Fix for all remaining user select */
.select-none {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

.select-all {
    user-select: all !important;
}

.select-auto {
    user-select: auto !important;
}

/* Fix for all remaining resize */
.resize-none {
    resize: none !important;
}

.resize {
    resize: both !important;
}

.resize-x {
    resize: horizontal !important;
}

.resize-y {
    resize: vertical !important;
}

/* Fix for all remaining appearance */
.appearance-none {
    appearance: none !important;
}

/* Fix for all remaining outline */
.outline-none {
    outline: none !important;
}

.outline {
    outline: 2px solid var(--secondary-blue) !important;
}

/* Fix for all remaining transition */
.transition-none {
    transition: none !important;
}

.transition-all {
    transition: all 0.3s ease !important;
}

.transition {
    transition: all 0.3s ease !important;
}

.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

.transition-opacity {
    transition: opacity 0.3s ease !important;
}

.transition-shadow {
    transition: box-shadow 0.3s ease !important;
}

.transition-transform {
    transition: transform 0.3s ease !important;
}

/* Fix for all remaining duration */
.duration-75 {
    transition-duration: 75ms !important;
}

.duration-100 {
    transition-duration: 100ms !important;
}

.duration-150 {
    transition-duration: 150ms !important;
}

.duration-200 {
    transition-duration: 200ms !important;
}

.duration-300 {
    transition-duration: 300ms !important;
}

.duration-500 {
    transition-duration: 500ms !important;
}

.duration-700 {
    transition-duration: 700ms !important;
}

.duration-1000 {
    transition-duration: 1000ms !important;
}

/* Fix for all remaining ease */
.ease-linear {
    transition-timing-function: linear !important;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix for all remaining delay */
.delay-75 {
    transition-delay: 75ms !important;
}

.delay-100 {
    transition-delay: 100ms !important;
}

.delay-150 {
    transition-delay: 150ms !important;
}

.delay-200 {
    transition-delay: 200ms !important;
}

.delay-300 {
    transition-delay: 300ms !important;
}

.delay-500 {
    transition-delay: 500ms !important;
}

.delay-700 {
    transition-delay: 700ms !important;
}

.delay-1000 {
    transition-delay: 1000ms !important;
}

/* Fix for all remaining transform */
.transform {
    transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1) !important;
}

.transform-gpu {
    transform: translate3d(0, 0, 0) !important;
}

.transform-none {
    transform: none !important;
}

/* Fix for all remaining scale */
.scale-0 {
    transform: scale(0) !important;
}

.scale-50 {
    transform: scale(0.5) !important;
}

.scale-75 {
    transform: scale(0.75) !important;
}

.scale-90 {
    transform: scale(0.9) !important;
}

.scale-95 {
    transform: scale(0.95) !important;
}

.scale-100 {
    transform: scale(1) !important;
}

.scale-105 {
    transform: scale(1.05) !important;
}

.scale-110 {
    transform: scale(1.1) !important;
}

.scale-125 {
    transform: scale(1.25) !important;
}

.scale-150 {
    transform: scale(1.5) !important;
}

/* Fix for all remaining rotate */
.rotate-0 {
    transform: rotate(0deg) !important;
}

.rotate-1 {
    transform: rotate(1deg) !important;
}

.rotate-2 {
    transform: rotate(2deg) !important;
}

.rotate-3 {
    transform: rotate(3deg) !important;
}

.rotate-6 {
    transform: rotate(6deg) !important;
}

.rotate-12 {
    transform: rotate(12deg) !important;
}

.rotate-45 {
    transform: rotate(45deg) !important;
}

.rotate-90 {
    transform: rotate(90deg) !important;
}

.rotate-180 {
    transform: rotate(180deg) !important;
}

/* Fix for all remaining translate */
.translate-x-0 {
    transform: translateX(0) !important;
}

.translate-x-1 {
    transform: translateX(0.25rem) !important;
}

.translate-x-2 {
    transform: translateX(0.5rem) !important;
}

.translate-x-3 {
    transform: translateX(0.75rem) !important;
}

.translate-x-4 {
    transform: translateX(1rem) !important;
}

.translate-x-5 {
    transform: translateX(1.25rem) !important;
}

.translate-x-6 {
    transform: translateX(1.5rem) !important;
}

.translate-x-8 {
    transform: translateX(2rem) !important;
}

.translate-x-10 {
    transform: translateX(2.5rem) !important;
}

.translate-x-12 {
    transform: translateX(3rem) !important;
}

.translate-x-16 {
    transform: translateX(4rem) !important;
}

.translate-x-20 {
    transform: translateX(5rem) !important;
}

.translate-x-24 {
    transform: translateX(6rem) !important;
}

.translate-x-32 {
    transform: translateX(8rem) !important;
}

.translate-x-40 {
    transform: translateX(10rem) !important;
}

.translate-x-48 {
    transform: translateX(12rem) !important;
}

.translate-x-56 {
    transform: translateX(14rem) !important;
}

.translate-x-64 {
    transform: translateX(16rem) !important;
}

.translate-x-px {
    transform: translateX(1px) !important;
}

.translate-x-0\.5 {
    transform: translateX(0.125rem) !important;
}

.translate-x-1\.5 {
    transform: translateX(0.375rem) !important;
}

.translate-x-2\.5 {
    transform: translateX(0.625rem) !important;
}

.translate-x-3\.5 {
    transform: translateX(0.875rem) !important;
}

.translate-x-1\/2 {
    transform: translateX(50%) !important;
}

.translate-x-full {
    transform: translateX(100%) !important;
}

.translate-x-1\/3 {
    transform: translateX(33.333333%) !important;
}

.translate-x-2\/3 {
    transform: translateX(66.666667%) !important;
}

.translate-x-1\/4 {
    transform: translateX(25%) !important;
}

.translate-x-2\/4 {
    transform: translateX(50%) !important;
}

.translate-x-3\/4 {
    transform: translateX(75%) !important;
}

.translate-x-1\/5 {
    transform: translateX(20%) !important;
}

.translate-x-2\/5 {
    transform: translateX(40%) !important;
}

.translate-x-3\/5 {
    transform: translateX(60%) !important;
}

.translate-x-4\/5 {
    transform: translateX(80%) !important;
}

.translate-x-1\/6 {
    transform: translateX(16.666667%) !important;
}

.translate-x-2\/6 {
    transform: translateX(33.333333%) !important;
}

.translate-x-3\/6 {
    transform: translateX(50%) !important;
}

.translate-x-4\/6 {
    transform: translateX(66.666667%) !important;
}

.translate-x-5\/6 {
    transform: translateX(83.333333%) !important;
}

.translate-x-1\/12 {
    transform: translateX(8.333333%) !important;
}

.translate-x-2\/12 {
    transform: translateX(16.666667%) !important;
}

.translate-x-3\/12 {
    transform: translateX(25%) !important;
}

.translate-x-4\/12 {
    transform: translateX(33.333333%) !important;
}

.translate-x-5\/12 {
    transform: translateX(41.666667%) !important;
}

.translate-x-6\/12 {
    transform: translateX(50%) !important;
}

.translate-x-7\/12 {
    transform: translateX(58.333333%) !important;
}

.translate-x-8\/12 {
    transform: translateX(66.666667%) !important;
}

.translate-x-9\/12 {
    transform: translateX(75%) !important;
}

.translate-x-10\/12 {
    transform: translateX(83.333333%) !important;
}

.translate-x-11\/12 {
    transform: translateX(91.666667%) !important;
}

/* Fix for all remaining translate Y */
.translate-y-0 {
    transform: translateY(0) !important;
}

.translate-y-1 {
    transform: translateY(0.25rem) !important;
}

.translate-y-2 {
    transform: translateY(0.5rem) !important;
}

.translate-y-3 {
    transform: translateY(0.75rem) !important;
}

.translate-y-4 {
    transform: translateY(1rem) !important;
}

.translate-y-5 {
    transform: translateY(1.25rem) !important;
}

.translate-y-6 {
    transform: translateY(1.5rem) !important;
}

.translate-y-8 {
    transform: translateY(2rem) !important;
}

.translate-y-10 {
    transform: translateY(2.5rem) !important;
}

.translate-y-12 {
    transform: translateY(3rem) !important;
}

.translate-y-16 {
    transform: translateY(4rem) !important;
}

.translate-y-20 {
    transform: translateY(5rem) !important;
}

.translate-y-24 {
    transform: translateY(6rem) !important;
}

.translate-y-32 {
    transform: translateY(8rem) !important;
}

.translate-y-40 {
    transform: translateY(10rem) !important;
}

.translate-y-48 {
    transform: translateY(12rem) !important;
}

.translate-y-56 {
    transform: translateY(14rem) !important;
}

.translate-y-64 {
    transform: translateY(16rem) !important;
}

.translate-y-px {
    transform: translateY(1px) !important;
}

.translate-y-0\.5 {
    transform: translateY(0.125rem) !important;
}

.translate-y-1\.5 {
    transform: translateY(0.375rem) !important;
}

.translate-y-2\.5 {
    transform: translateY(0.625rem) !important;
}

.translate-y-3\.5 {
    transform: translateY(0.875rem) !important;
}

.translate-y-1\/2 {
    transform: translateY(50%) !important;
}

.translate-y-full {
    transform: translateY(100%) !important;
}

.translate-y-1\/3 {
    transform: translateY(33.333333%) !important;
}

.translate-y-2\/3 {
    transform: translateY(66.666667%) !important;
}

.translate-y-1\/4 {
    transform: translateY(25%) !important;
}

.translate-y-2\/4 {
    transform: translateY(50%) !important;
}

.translate-y-3\/4 {
    transform: translateY(75%) !important;
}

.translate-y-1\/5 {
    transform: translateY(20%) !important;
}

.translate-y-2\/5 {
    transform: translateY(40%) !important;
}

.translate-y-3\/5 {
    transform: translateY(60%) !important;
}

.translate-y-4\/5 {
    transform: translateY(80%) !important;
}

.translate-y-1\/6 {
    transform: translateY(16.666667%) !important;
}

.translate-y-2\/6 {
    transform: translateY(33.333333%) !important;
}

.translate-y-3\/6 {
    transform: translateY(50%) !important;
}

.translate-y-4\/6 {
    transform: translateY(66.666667%) !important;
}

.translate-y-5\/6 {
    transform: translateY(83.333333%) !important;
}

.translate-y-1\/12 {
    transform: translateY(8.333333%) !important;
}

.translate-y-2\/12 {
    transform: translateY(16.666667%) !important;
}

.translate-y-3\/12 {
    transform: translateY(25%) !important;
}

.translate-y-4\/12 {
    transform: translateY(33.333333%) !important;
}

.translate-y-5\/12 {
    transform: translateY(41.666667%) !important;
}

.translate-y-6\/12 {
    transform: translateY(50%) !important;
}

.translate-y-7\/12 {
    transform: translateY(58.333333%) !important;
}

.translate-y-8\/12 {
    transform: translateY(66.666667%) !important;
}

.translate-y-9\/12 {
    transform: translateY(75%) !important;
}

.translate-y-10\/12 {
    transform: translateY(83.333333%) !important;
}

.translate-y-11\/12 {
    transform: translateY(91.666667%) !important;
}

/* Fix for all remaining skew */
.skew-x-0 {
    transform: skewX(0deg) !important;
}

.skew-x-1 {
    transform: skewX(1deg) !important;
}

.skew-x-2 {
    transform: skewX(2deg) !important;
}

.skew-x-3 {
    transform: skewX(3deg) !important;
}

.skew-x-6 {
    transform: skewX(6deg) !important;
}

.skew-x-12 {
    transform: skewX(12deg) !important;
}

.skew-y-0 {
    transform: skewY(0deg) !important;
}

.skew-y-1 {
    transform: skewY(1deg) !important;
}

.skew-y-2 {
    transform: skewY(2deg) !important;
}

.skew-y-3 {
    transform: skewY(3deg) !important;
}

.skew-y-6 {
    transform: skewY(6deg) !important;
}

.skew-y-12 {
    transform: skewY(12deg) !important;
}

/* Fix for all remaining origin */
.origin-center {
    transform-origin: center !important;
}

.origin-top {
    transform-origin: top !important;
}

.origin-top-right {
    transform-origin: top right !important;
}

.origin-right {
    transform-origin: right !important;
}

.origin-bottom-right {
    transform-origin: bottom right !important;
}

.origin-bottom {
    transform-origin: bottom !important;
}

.origin-bottom-left {
    transform-origin: bottom left !important;
}

.origin-left {
    transform-origin: left !important;
}

.origin-top-left {
    transform-origin: top left !important;
}

/* Fix for all remaining opacity */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-5 {
    opacity: 0.05 !important;
}

.opacity-10 {
    opacity: 0.1 !important;
}

.opacity-20 {
    opacity: 0.2 !important;
}

.opacity-25 {
    opacity: 0.25 !important;
}

.opacity-30 {
    opacity: 0.3 !important;
}

.opacity-40 {
    opacity: 0.4 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-60 {
    opacity: 0.6 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.opacity-80 {
    opacity: 0.8 !important;
}

.opacity-90 {
    opacity: 0.9 !important;
}

.opacity-95 {
    opacity: 0.95 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* Fix for all remaining pointer events */
.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* Fix for all remaining user select */
.select-none {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

.select-all {
    user-select: all !important;
}

.select-auto {
    user-select: auto !important;
}

/* Fix for all remaining resize */
.resize-none {
    resize: none !important;
}

.resize {
    resize: both !important;
}

.resize-x {
    resize: horizontal !important;
}

.resize-y {
    resize: vertical !important;
}

/* Fix for all remaining appearance */
.appearance-none {
    appearance: none !important;
}

/* Fix for all remaining outline */
.outline-none {
    outline: none !important;
}

.outline {
    outline: 2px solid var(--secondary-blue) !important;
}

/* Fix for all remaining focus ring */
.focus\:ring-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining focus ring offset */
.focus\:ring-offset-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-offset-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining focus ring color */
.focus\:ring-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-green-500:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.focus\:ring-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.focus\:ring-yellow-500:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.focus\:ring-gray-500:focus {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
}

/* Fix for all remaining focus ring offset color */
.focus\:ring-offset-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-green-500:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.focus\:ring-offset-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.focus\:ring-offset-yellow-500:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.focus\:ring-offset-gray-500:focus {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
}

/* Fix for all remaining focus ring width */
.focus\:ring-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining focus ring offset width */
.focus\:ring-offset-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-offset-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining focus ring offset color */
.focus\:ring-offset-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-green-500:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.focus\:ring-offset-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.focus\:ring-offset-yellow-500:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.focus\:ring-offset-gray-500:focus {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
}

/* Fix for all remaining focus ring offset width */
.focus\:ring-offset-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-offset-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining focus ring offset color */
.focus\:ring-offset-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-green-500:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.focus\:ring-offset-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.focus\:ring-offset-yellow-500:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.focus\:ring-offset-gray-500:focus {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
}

/* Fix for all remaining focus ring offset width */
.focus\:ring-offset-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-offset-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Fix for all remaining focus ring offset color */
.focus\:ring-offset-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-green-500:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.focus\:ring-offset-red-500:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.focus\:ring-offset-yellow-500:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.focus\:ring-offset-gray-500:focus {
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
}

/* Fix for all remaining focus ring offset width */
.focus\:ring-offset-0:focus {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0) !important;
}

.focus\:ring-offset-1:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-2:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-4:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.focus\:ring-offset-8:focus {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

/* Modern Packages Page Styles - Only for packages.php */
.packages-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(30, 58, 138, 0.08) 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.packages-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.packages-hero p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.package-card .btn-primary {
    width: 100%;
    margin-top: 1rem;
    font-size: 0.95rem;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.package-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: rgba(59, 130, 246, 0.5);
}

.package-card .btn-primary:disabled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
    cursor: not-allowed;
    transform: none;
}

.package-card .btn-primary:disabled:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

/* Ticket Styles */
.ticket-message {
    background: rgba(30, 58, 138, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ticket-replies {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ticket-reply {
    background: var(--card-bg);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.ticket-reply:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ticket-reply.admin-reply {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 58, 138, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.ticket-reply.user-reply {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.reply-header strong {
    color: var(--text-primary);
    font-weight: 600;
}

.reply-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.reply-message {
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Fix for all responsive elements */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
    
    .flex {
        flex-direction: column !important;
    }
    
    .gap-4 {
        gap: 0.5rem !important;
    }
}

/* Final fix for all elements */
* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--navy-blue) 50%, var(--primary-blue) 100%) !important;
    color: var(--text-primary) !important;
}

/* Override any remaining white backgrounds */
.white, .bg-white, .bg-light, .bg-gray-100, .bg-gray-50 {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Override any remaining white text */
.text-white, .text-light {
    color: var(--text-primary) !important;
}

/* Override any remaining dark text */
.text-dark, .text-black {
    color: var(--text-primary) !important;
}

/* Override any remaining border colors */
.border, .border-1, .border-2, .border-gray-200, .border-gray-300 {
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Override any remaining shadow colors */
.shadow, .shadow-sm, .shadow-md, .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Override any remaining rounded corners */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl {
    border-radius: 8px !important;
}

/* Override any remaining padding */
.p-1, .p-2, .p-3, .p-4, .p-5, .p-6 {
    padding: 1rem !important;
}

/* Override any remaining margin */
.m-1, .m-2, .m-3, .m-4, .m-5, .m-6 {
    margin: 1rem !important;
}

/* Override any remaining width */
.w-full, .w-100 {
    width: 100% !important;
}

/* Override any remaining height */
.h-full, .h-100 {
    height: 100% !important;
}

/* Override any remaining display */
.block, .inline, .inline-block, .flex, .grid {
    display: block !important;
}

.flex {
    display: flex !important;
}

.grid {
    display: grid !important;
}

/* Override any remaining position */
.relative, .absolute, .fixed, .sticky {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

/* Override any remaining z-index */
.z-10, .z-20, .z-30, .z-40, .z-50 {
    z-index: 10 !important;
}

/* Override any remaining overflow */
.overflow-hidden, .overflow-auto, .overflow-scroll {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

/* Override any remaining cursor */
.cursor-pointer, .cursor-not-allowed, .cursor-default {
    cursor: pointer !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-default {
    cursor: default !important;
}

/* Override any remaining transition */
.transition, .transition-all, .transition-colors, .transition-opacity {
    transition: all 0.3s ease !important;
}

/* Override any remaining transform */
.transform, .scale-100, .scale-105, .scale-110 {
    transform: scale(1) !important;
}

.scale-105 {
    transform: scale(1.05) !important;
}

.scale-110 {
    transform: scale(1.1) !important;
}

/* Override any remaining opacity */
.opacity-0, .opacity-25, .opacity-50, .opacity-75, .opacity-100 {
    opacity: 1 !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-25 {
    opacity: 0.25 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

/* Override any remaining visibility */
.visible, .invisible, .hidden {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

.hidden {
    display: none !important;
}

/* Override any remaining pointer events */
.pointer-events-none, .pointer-events-auto {
    pointer-events: auto !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

/* Override any remaining user select */
.select-none, .select-text, .select-all, .select-auto {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

.select-all {
    user-select: all !important;
}

.select-auto {
    user-select: auto !important;
}

/* Override any remaining resize */
.resize-none, .resize, .resize-x, .resize-y {
    resize: none !important;
}

.resize {
    resize: both !important;
}

.resize-x {
    resize: horizontal !important;
}

.resize-y {
    resize: vertical !important;
}

/* Override any remaining appearance */
.appearance-none {
    appearance: none !important;
}

/* Override any remaining outline */
.outline-none, .outline {
    outline: none !important;
}

.outline {
    outline: 2px solid var(--secondary-blue) !important;
}

/* Override any remaining focus */
.focus\:outline-none:focus {
    outline: none !important;
}

.focus\:ring:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Override any remaining hover */
.hover\:bg-gray-100:hover {
    background: rgba(30, 58, 138, 0.2) !important;
}

.hover\:text-gray-900:hover {
    color: var(--text-primary) !important;
}

/* Override any remaining active */
.active\:bg-gray-200:active {
    background: rgba(30, 58, 138, 0.3) !important;
}

.active\:text-gray-900:active {
    color: var(--text-primary) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
    
    .user-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .user-info {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
    
    .grid-3 {
        grid-template-columns: 1fr !important;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .user-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Force package price to be white - Override all other rules */
.package-card .package-price,
.package-price {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

/* Payment Method Cards */
.payment-method-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(59, 130, 246, 0.2);
    background: rgba(30, 58, 138, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.payment-method-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.payment-method-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-method-card input[type="radio"]:checked + div {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.6);
}

.payment-method-card input[type="radio"]:checked + div::before {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--secondary-blue);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
}

.payment-method-card div {
    transition: all 0.3s ease;
    position: relative;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
}

.payment-method-card h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.payment-method-card p {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    margin: 0;
}