/**
 * Dark Mode Styles for AI Coaching Plugin
 * Status: NEW - Complete dark mode implementation
 */

/* ==========================================================================
   Dark Mode Variables
   ========================================================================== */




:root {
    /* Light Mode Colors (Default) */
    --isen-bg-primary: #ffffff;
    --isen-text-light: #adb5bd;
    --isen-border: #dee2e6;
    --isen-accent: #007bff;
    --isen-accent-hover: #0056b3;
    --isen-success: #46b450;
    --isen-warning: #ffc107;
    --isen-error: rgb(255,0,102);
    --isen-info: #17a2b8;
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --isen-bg-primary: #1a1a1a;
    --isen-text-light: #808080;
    --isen-border: #404040;
    --isen-accent: #4dabf7;
    --isen-accent-hover: #74c0fc;
    --isen-success: #51cf66;
    --isen-warning: #ffd43b;
    --isen-error: #ff6b6b;
    --isen-info: #74c0fc;
}

/* Global dark mode styles */
[data-theme="dark"] {
    /*
    background-color: var(--isen-bg-primary) !important;
    color: #ffffff !important;
    */
}

[data-theme="dark"] body {
    background-color: var(--isen-bg-primary) !important;
    color: #ffffff !important;
}



[data-theme="dark"] .isen-user-auth-component {
    /*background-color: var(--isen-bg-primary);*/
    color: #ffffff;
}

[data-theme="dark"] .isen-dropdown-toggle {
}

[data-theme="dark"] .isen-dropdown-menu {
    background-color: var(--isen-bg-primary);
}

[data-theme="dark"] .isen-dropdown-item {
    color: #ffffff;
}

[data-theme="dark"] .isen-dropdown-item:hover {
    background-color: var(--isen-border);
}




[data-theme="dark"] .isen-theme-toggle * {
    /*color: #454545 !important;*/
}

[data-theme="dark"] .isen-plan-card {
    background: #222223;
    /*box-shadow: 0 10px 25px #000011;*/
}
[data-theme="dark"] input:-internal-autofill-selected {
    background-color: var(--isen-bg-primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .isen-plan-header *,
[data-theme="dark"] .isen-plan-price {
    /*color: #455454 !important;*/
}


[data-theme="dark"] .isen-chat-input-area::before {
    /*background-color: rgba(168,213,142,1.0);
    background-color: rgba(53,182,98,1.00);*/
}

[data-theme="dark"] .isen-input-area {
    /*background-color: var(--isen-accent);*/
    background-color: rgba(53,182,98,1.00);
    padding: 15px;
}

[data-theme="dark"] .isen-input-container textarea {
    background-color: transparent;
    color: darkslategray;
}

[data-theme="dark"] .isen-input-container textarea::placeholder {
    color: darkslategray;
}
/* ==========================================================================
   Dark Mode Toggle Button
   ========================================================================== */

.isen-dark-mode-toggle {
    background: #aaa;
    border-radius: 50px;
    padding: 0;
    margin: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /*min-width: 50px;
    height: 50px;*/
    width: 16px;
    height: 16px;
    border: none;
}

.isen-dark-mode-toggle:hover {
    border-color: var(--isen-accent);*/
}

.isen-dark-mode-toggle:active {
    /*transform: translateY(0);*/
}

.isen-dark-mode-toggle .dot {
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: block;
}

.isen-dark-mode-toggle .light-dot {
    background-color: #000000;
    display: block;
}

.isen-dark-mode-toggle .dark-dot {
    background-color: #ffffff;
    display: none;
}

[data-theme="dark"] .isen-dark-mode-toggle .light-dot {
    display: none;
}

[data-theme="dark"] .isen-dark-mode-toggle .dark-dot {
    display: block;
}

/* ==========================================================================
   Global Dark Mode Styles
   ========================================================================== */

[data-theme="dark"] {
    /*background-color: var(--isen-bg-primary);*/
}

[data-theme="dark"] * {
    /*border-color: var(--isen-border);*/
}

/* ==========================================================================
   Chat Interface Dark Mode
   ========================================================================== */

[data-theme="dark"] .isen-chat-container {
    /*background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);*/
}

[data-theme="dark"] .isen-chat-messages {
    /*background-color: var(--isen-bg-primary);*/
}

[data-theme="dark"] .isen-message {
    /*background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);*/
}

[data-theme="dark"] .isen-message.user {
    /*background-color: var(--isen-accent);*/
    color: white;
}

[data-theme="dark"] .isen-message.assistant {
    /*background-color: var(--isen-bg-primary);
}

[data-theme="dark"] .isen-chat-input {
    /*background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .isen-chat-input:focus {
    /*border-color: var(--isen-accent);
    box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2);*/
}

[data-theme="dark"] .isen-chat-send {
    /*background-color: var(--isen-accent);*/
    color: white;
}

[data-theme="dark"] .isen-chat-send:hover {
    /*background-color: var(--isen-accent-hover);*/
}

/* ==========================================================================
   Admin Interface Dark Mode
   ========================================================================== */

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

[data-theme="dark"] .isen-admin-container {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .isen-admin-card {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .isen-admin-card:hover {
}

[data-theme="dark"] .wp-list-table {
    background-color: var(--isen-bg-primary);
}

[data-theme="dark"] .wp-list-table th {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .wp-list-table td {
    border-color: var(--isen-border);
}

[data-theme="dark"] .wp-list-table tr:hover {
    background-color: var(--isen-bg-primary);
}

[data-theme="dark"] .form-table th {
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] text,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    /*
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
    */
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type=".isen-plan-priceword"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    /*border-color: var(--isen-accent);
}

[data-theme="dark"] .button {
    background-color: var(--isen-bg-primary);
    /*border-color: var(--isen-border);*/
}

[data-theme="dark"] .button:hover {
    background-color: var(--isen-accent);
    /*border-color: var(--isen-accent);*/
    color: white;
}

[data-theme="dark"] .button-primary {
    background-color: var(--isen-accent);
    border-color: var(--isen-accent);
    color: white;
}

[data-theme="dark"] .button-primary:hover {
    background-color: var(--isen-accent-hover);
    border-color: var(--isen-accent-hover);
}

/* ==========================================================================
   Payment Interface Dark Mode
   ========================================================================== */

[data-theme="dark"] .isen-payment-modal {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .isen-payment-form {
    background-color: var(--isen-bg-primary);
}

[data-theme="dark"] .isen-subscription-plan {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .isen-subscription-plan:hover {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-accent);
}

/* ==========================================================================
   Notices and Alerts Dark Mode
   ========================================================================== */

[data-theme="dark"] .notice {
    background-color: var(--isen-bg-primary);
    border-color: var(--isen-border);
}

[data-theme="dark"] .notice-success {
    background-color: rgba(81, 207, 102, 0.1);
    border-color: var(--isen-success);
    color: var(--isen-success);
}

[data-theme="dark"] .notice-error {
    background-color: rgba(255, 107, 107, 0.1);
    border-color: var(--isen-error);
    color: var(--isen-error);
}

[data-theme="dark"] .notice-warning {
    background-color: rgba(255, 212, 59, 0.1);
    border-color: var(--isen-warning);
    color: var(--isen-warning);
}

[data-theme="dark"] .notice-info {
    background-color: rgba(116, 192, 252, 0.1);
    border-color: var(--isen-info);
    color: var(--isen-info);
}

/* ==========================================================================
   Animations and Transitions
   ========================================================================== */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .isen-dark-mode-toggle {
        top: 10px;
        right: 10px;
        min-width: 45px;
        height: 45px;
        padding: 10px;
    }
    
    .isen-dark-mode-toggle .icon {
        font-size: 18px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.isen-dark-mode-toggle:focus {
    /*outline: 2px solid var(--isen-accent);
    outline-offset: 2px;*/
}

[data-theme="dark"] .isen-dark-mode-toggle:focus {
    /*outline-color: var(--isen-accent);*/
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .isen-dark-mode-toggle {
        display: none;
    }
    
    [data-theme="dark"] {
        background-color: white !important;
        color: black !important;
    }
}