/* Global Theme Toggle Styles */

:root {
    /* Dark mode colors */
    --dark-bg-primary: #1B1B2E;
    --dark-bg-secondary: #16213E;
    --dark-text-primary: #FFFFFF;
    --dark-text-secondary: #A3AED0;
    --dark-border: #2D3748;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: #F4F7FE;
    border: 1px solid #E0E5F2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(67, 24, 255, 0.1);
}

.theme-toggle-btn:hover {
    background-color: #4318FF;
    border-color: #4318FF;
    box-shadow: 0 4px 12px rgba(67, 24, 255, 0.2);
    transform: translateY(-2px);
}

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

.theme-icon {
    font-size: 20px;
    color: #2B3674;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover .theme-icon {
    color: #FFFFFF;
}

.theme-icon-light {
    display: block;
}

.theme-icon-dark {
    display: none;
}

/* Dark Mode Styles */
[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .theme-toggle-btn {
    background-color: #2B3674;
    border-color: #868CFF;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: #4318FF;
}

[data-theme="dark"] .theme-icon {
    color: #FFFFFF;
}

/* Dashboard Layout Theme Toggle Position - In Header */
.theme-toggle-btn-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.theme-toggle-btn-header:hover {
    background-color: #F7F9FC !important;
    transform: none !important;
}

.theme-toggle-btn-header .theme-icon {
    color: #1B2559 !important;
}

[data-theme="dark"] .theme-toggle-btn-header {
    background-color: transparent !important;
    border-color: #2D3748 !important;
}

[data-theme="dark"] .theme-toggle-btn-header:hover {
    background-color: #16213E !important;
}

[data-theme="dark"] .theme-toggle-btn-header .theme-icon {
    color: #FFFFFF !important;
}

/* Auth Layout Theme Toggle Position */
.auth-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Dark Mode Global Styles */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Dark Mode for Dashboard */
[data-theme="dark"] .bg-white {
    background-color: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .bg-horizon-bg {
    background-color: var(--dark-bg-primary) !important;
}

[data-theme="dark"] .text-horizon-text-dark {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .text-horizon-text-light {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .border-horizon-border {
    border-color: var(--dark-border) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--dark-text-secondary) !important;
}

/* Dark Mode for Auth Pages */
[data-theme="dark"] .auth-form-section {
    background-color: var(--dark-bg-primary) !important;
}

[data-theme="dark"] .signin-title,
[data-theme="dark"] .signup-title {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .signin-subtitle,
[data-theme="dark"] .signup-subtitle {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .form-input {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .form-input:focus {
    background-color: var(--dark-bg-secondary) !important;
    border-color: #4318FF !important;
}

[data-theme="dark"] .checkbox-text {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .signin-signup-link,
[data-theme="dark"] .signup-signin-link {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .signin-copyright,
[data-theme="dark"] .signup-copyright {
    color: var(--dark-text-secondary) !important;
}

/* Dark Mode for Sidebar */
[data-theme="dark"] aside {
    background-color: #16213E !important;
    border-color: #2D3748 !important;
}

[data-theme="dark"] .nav-item,
[data-theme="dark"] .nav-item-submenu {
    color: #A3AED0 !important;
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item-submenu:hover {
    background-color: #1B1B2E !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .nav-item-submenu.active {
    background-color: rgba(67, 24, 255, 0.2) !important;
    color: #FFFFFF !important;
}

/* Dark Mode for Header */
[data-theme="dark"] header {
    background-color: #16213E !important;
    border-color: #2D3748 !important;
}

[data-theme="dark"] header input {
    background-color: #1B1B2E !important;
    border-color: #2D3748 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] header input::placeholder {
    color: #A3AED0 !important;
}

[data-theme="dark"] header button {
    background-color: #16213E !important;
    border-color: #2D3748 !important;
}

[data-theme="dark"] header button:hover {
    background-color: #1B1B2E !important;
}

/* Dark Mode for Main Content */
[data-theme="dark"] main {
    background-color: #1B1B2E !important;
}

/* Dark Mode for Cards */
[data-theme="dark"] .bg-white {
    background-color: #16213E !important;
}

/* Dark Mode for Text in Cards */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #FFFFFF !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div {
    color: inherit;
}

/* Dark Mode for Links */
[data-theme="dark"] a {
    color: #868CFF !important;
}

[data-theme="dark"] a:hover {
    color: #A78BFA !important;
}

/* Dark Mode for Tables */
[data-theme="dark"] table {
    color: #FFFFFF !important;
}

[data-theme="dark"] table thead {
    background-color: #1B1B2E !important;
}

[data-theme="dark"] table tbody tr {
    background-color: #16213E !important;
}

[data-theme="dark"] table tbody tr:hover {
    background-color: #1B1B2E !important;
}

/* Dark Mode for Dropdowns and Selects */
[data-theme="dark"] select {
    background-color: #16213E !important;
    border-color: #2D3748 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] select option {
    background-color: #16213E !important;
    color: #FFFFFF !important;
}