/* ===================== DARK.CSS ===================== */
:root {
    /* TEXT COLORS */
    --text-primary: #eee;
    --text-secondary: #ddd;
    --text-accent: #ae5555;

    /* BACKGROUND COLORS */
    --bg-main: #3E3C3C;
    --bg-alt: #4E4949;
    --bg-light: #676767;
    --bg-hover: #9e5d5d;
    --bg-post: rgb(70, 57, 57);
    --bg-post-opacity: rgba(70, 57, 57, 0.5);
    --shadow-color: #232323;

    /* BUTTON COLORS */
    --button-bg: #6a6a6a;
    --button-hover: #7a6565;
    --button-active: #7a6565;

    /* INPUT COLORS */
    --input-bg: #3E3C3C;
    --input-bg-readonly: #4a4444;
    --input-text: #eee;
    --input-border: #848484;
    --input-placeholder: #999;

    /* ADDITIONAL */
    --border-grey-800: #848484;

    /* INFO BOX VARIABLES */
    --info-bg: #2d2d2d;
    --info-border: #555555;
    --info-color: #dddddd;
    --check-color: rgb(95, 155, 177); 


    --text-block-color: #eeeeee;

    /* Button specific variables */
    --badge-bg: #ffffff;
    --badge-text: #000000;
    --notification-bg: #ff4444;
    --notification-text: #ffffff;
    --lock-filter: brightness(0.9);

    /* SELECT COLORS */
    --select-bg: #3E3C3C;
    --select-bg-readonly: #4a4444;
    --select-text: #eee;
    --select-border: #848484;
    --select-option-bg: #3E3C3C;
    --select-option-hover: #564343;
    --select-option-selected: #4d3d3d;
    --select-placeholder: #999;

    /* MESSAGE COLORS */
    --message-error-bg: #c23d3d;      /* Dark red background */
    --message-error-text: #ffffff;     /* Light red text */
    --message-error-border: #b14545;    /* Border color */
    
    --message-success-bg: #528352;     /* Dark green background */
    --message-success-text: #ffffff;    /* Light green text */
    --message-success-border: #2d6b2d;  /* Border color */
    
    --message-warning-bg: #8B6B2C;      /* Dark yellow/orange background */
    --message-warning-text: #ffffff;     /* Light yellow text */
    --message-warning-border: #b18b45;   /* Border color */
    
    --message-shadow: rgba(0, 0, 0, 0.3);

    /* TEXTAREA COLORS */
    --textarea-bg: #3E3C3C;
    --textarea-bg-readonly: #4a4444;
    --textarea-text: #eee;
    --textarea-border: #848484;
    --textarea-placeholder: #999;
    --textarea-focus-outline: #1eff00;

    /* TABLE COLORS */
    --table-label: #929292;        /* Light gray for labels */
    --table-value: #ffffff;         /* White for values */
    --table-active: #14db1b;        /* Green for active status */
    --table-inactive: #ff6b6b;       /* Red for inactive status */
    --table-border: #444444;         /* Border color if needed */

    /* PROGRESS BAR COLORS */
    --progress-bar-bg: #2d2d2d;           /* Dark background for the bar container */
    --progress-used: #3b82f6;              /* Blue for used space (kept as is) */
    --progress-free: #5a5a5a;              /* Gray for free space */

    /* CHECKBOX COLORS */
    --checkbox-label: #eee;                 /* Label text color */
    --checkbox-bg: #3E3C3C;                  /* Background of unchecked box */
    --checkbox-border: #848484;               /* Border of unchecked box */
    --checkbox-checked-bg: #4d3d3d;           /* Background when checked */
    --checkbox-checked-border: #1ada01;       /* Border when checked */
    --checkbox-checkmark: #1ada01;            /* Checkmark color */
    --checkbox-hover-bg: #564343;             /* Hover background */

        /* TERMS TEXT COLORS */
    --terms-text: #d8d8d8;          /* Light gray for dark theme */
    --terms-container-bg: transparent; /* Optional background */

    /* Admin search result card */
    --admin-card-bg: #3f3b3b;
    --admin-card-text: #fff;
    --admin-card-label: #ccc;
    --admin-card-value: #fff;
    --admin-card-row2-text: #ccc;
    --admin-card-ip: #beff81;
    --admin-image-placeholder-bg: #444;
    --empty-message: #aaa;

    /* Search result page */
    --search-empty-message: #aaa;
    --search-user-info: #fff;

        /* Messages page */
    --messages-container-bg: rgb(81, 81, 81);
    --sender-bubble-bg: rgb(81, 114, 151);
    --receiver-bubble-bg: rgb(88, 148, 102);
    --bubble-text-color: white;
    --message-timestamp: rgb(184, 184, 184);
    --avatar-fallback-bg: rgb(39, 101, 105);
    --avatar-fallback-text: white;
    --message-empty-text: grey;

    /* Message list (conversations) */
    --conv-item-bg: rgb(86, 86, 86);
    --conv-avatar-bg: rgb(103, 116, 128);
    --conv-avatar-text: white;
    --conv-name: rgb(212, 212, 212);
    --conv-date: rgb(176, 176, 176);
    --conv-count: rgb(188, 188, 188);
    --conv-empty: rgb(160, 160, 160);
    --unread-badge-bg: red;
    --unread-badge-text: white;

        /* Favourites page */
    --fav-user-info: #fff;
    --fav-empty-text: rgb(160,160,160);

        /* Block list page */
    --blocklist-user-info: #fff;
    --blocklist-empty: #fff;

        /* Opponent profile page */
    --opp-label: rgb(146,146,146);
    --opp-value: #fff;
    --opp-desc-bg: #484343;
    --opp-desc-text: #eee;

        /* Admin approval page */
    --admin-item-bg: #000000;
    --admin-type-color: #e84848;
    --admin-overlay-bg: rgba(30,30,30,0.9);
    --admin-empty-message: rgb(160,160,160);
    --admin-label-bg: #8B2C2C; /* dark red background for user_id label */

    --follower-user-info: #fff;
    --follower-empty-message: rgb(160,160,160);

    --warning-no-image-bg: #ccc;
    --warning-no-image-text: #555;
    --warning-overlay-text: white;
    --warning-timestamp: #ccc;
    --warning-empty: #666;
}


/* Override the utility class to use the variable */
.bg-red-700 {
    background-color: var(--admin-label-bg) !important;
}


.theme-admin-card {
    background-color: var(--admin-card-bg);
    border-radius: 5px;
    padding: 10px;
}

.theme-admin-row1 {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.theme-admin-image-wrapper {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: relative;
}

.theme-admin-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.theme-admin-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--admin-image-placeholder-bg);
    border-radius: 5px;
}

.theme-admin-image-button {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.theme-admin-info {
    font-family: Consolas, monospace;
    color: var(--admin-card-text);
    font-size: 12px;
    width: 100%;
}

.theme-admin-name {
    font-weight: bold;
}

.theme-admin-email {
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: break-word;
}

.theme-admin-stats {
    width: 100%;
}

.theme-admin-stat-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.theme-admin-stat-label {
    color: var(--admin-card-label);
}

.theme-admin-stat-value {
    color: var(--admin-card-value);
}

.theme-admin-row2 {
    font-family: Consolas, monospace;
    margin-top: 10px;
    font-size: 12px;
    color: var(--admin-card-row2-text);
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.theme-admin-row2-left {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 1;
    margin-right: 16px;
}

.theme-admin-row2-right {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 0;
}

.theme-admin-ip {
    color: var(--admin-card-ip);
}

.theme-empty-message {
    color: var(--admin-card-label);
    text-align: center;
}



/* Payment page - only what we added */
.theme-payment-history {
    background-color: #222;
    color: #eee;
}

.theme-payment-table {
    background-color: #333;
    color: #eee;
}

.theme-status-paid {
    color: rgb(48,186,48);
    font-weight: bold;
}

.theme-status-pending {
    color: orange;
    font-weight: bold;
}

.theme-status-cancelled {
    color: red;
    font-weight: bold;
}

.theme-status-expired {
    color: red;
    font-weight: bold;
}

.theme-status-active {
    color: rgb(48,186,48);
    font-weight: bold;
}

.theme-status-unknown {
    color: #eee;
}

.theme-empty-message {
    color: #aaa;
}

.theme-text-primary {
    color: #eee;  /* For reminder text */
}




.theme-terms-text {
    color: var(--terms-text);
}

/* If you want to style links inside terms */
.theme-terms-text a {
    color: var(--text-accent);
    text-decoration: underline;
}

.theme-terms-text a:hover {
    color: var(--text-accent);
    opacity: 0.8;
}


/* Checkbox label text */
.theme-checkbox-label {
    color: var(--checkbox-label);
}

/* Custom checkmark – adapts the existing .checkmark styles */
.theme-checkmark {
    background-color: var(--checkbox-bg);
    border: 1px solid var(--checkbox-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover state */
.container:hover input ~ .theme-checkmark {
    background-color: var(--checkbox-hover-bg);
}

/* Checked state */
.container input:checked ~ .theme-checkmark {
    background-color: var(--checkbox-checked-bg);
    border-color: var(--checkbox-checked-border);
}

/* Checkmark indicator (the tick) – using existing pseudo-element */
.container .theme-checkmark:after {
    border-color: var(--checkbox-checkmark);
}




/* Progress Bar Container */
.theme-progress-bar {
    background-color: var(--progress-bar-bg);
    width: 100%;
    height: 5px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

/* Used space segment */
.theme-progress-used {
    background-color: var(--progress-used);
    height: 100%;
    transition: width 0.3s ease;
}

/* Free space segment */
.theme-progress-free {
    background-color: var(--progress-free);
    height: 100%;
    transition: width 0.3s ease;
}


/* ===================== DARK.CSS - Add these styles ===================== */

/* Posts page specific styles */
.theme-text-secondary {
    color: var(--text-secondary, #ddd);
}

.theme-quota-bar {
    background-color: var(--bg-light);
}

.theme-posts-container {
    color: var(--text-primary);
}

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

.theme-post-description {
    color: var(--text-secondary);
}

.theme-post-date {
    color: var(--text-secondary);
    opacity: 0.8;
}

.theme-empty-message {
    color: var(--text-secondary);
    opacity: 0.6;
}

.theme-delete-button {
    transition: background-color 0.3s ease;
}

.theme-delete-button:hover {
    background-color: var(--bg-hover) !important;
}

/* ==================================================== */
/* TABLE STYLES - Updated to match white.css structure */
/* ==================================================== */
.theme-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    color: var(--table-value);
}

.theme-table td {

}

.theme-table-label {
    color: var(--table-label) !important;
    font-size: 10px;
}

.theme-table-value {
    color: var(--table-value) !important;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
}

.theme-table-active {
    color: var(--table-active) !important;
    font-weight: bold;
}

.theme-table-inactive {
    color: var(--table-inactive) !important;
}

/* Keep existing brake-word functionality */
.brake-word {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==================================================== */
/* TEXTAREA STYLES - Updated to match white.css structure */
/* ==================================================== */
.theme-textarea {
    border: none;    
    display: block;
    width: 100%;
    min-height: 1.5em;
    padding: 10px;
    /* border: 1px solid var(--textarea-border); */
    outline: none;
    border-radius: 5px;
    font-family: Verdana, sans-serif;
    color: var(--textarea-text);
    background-color: var(--textarea-bg);
    box-sizing: border-box;
    overflow: hidden;
    resize: none;
}

.theme-textarea:focus {
    /* box-shadow: 0 0 0 2px var(--textarea-focus-outline); */
}

.theme-textarea::placeholder {
    color: var(--textarea-placeholder);
}

.theme-textarea-readonly,
.theme-textarea[readonly] {

}

.theme-textarea-readonly:focus,
.theme-textarea[readonly]:focus {
    box-shadow: none;
}

/* Auto-grow functionality */
.theme-textarea.auto-grow {
    overflow-y: hidden;
}

/* Style for the label */
.theme-text-secondary {
    color: var(--text-secondary, #ddd);
}

/* Responsive adjustments */
@media (max-width: 550px) {
    .theme-textarea {
        font-size: 16px;
        padding: 12px 10px;
    }
}

/* ==================================================== */
/* MESSAGE STYLES - Updated to match white.css structure */
/* ==================================================== */
.theme-message {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px var(--message-shadow);
}

.theme-message-text {
    color: inherit;
    font-weight: 500;
    line-height: 1.4;
}

/* Error State */
.theme-message.theme-error {
    background-color: var(--message-error-bg);
    border-color: var(--message-error-border);
}

.theme-message.theme-error .theme-message-text {
    color: var(--message-error-text);
}

/* Success State */
.theme-message.theme-success {
    background-color: var(--message-success-bg);
    border-color: var(--message-success-border);
}

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

/* Warning State */
.theme-message.theme-warning {
    background-color: var(--message-warning-bg);
    border-color: var(--message-warning-border);
}

.theme-message.theme-warning .theme-message-text {
    color: var(--message-warning-text);
}

/* Animation for messages */
.theme-message {
    animation: slideIn 0.3s ease;
}

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

/* For multiple messages, add some spacing */
.theme-message + .theme-message {
    margin-top: 8px;
}

/* ==================================================== */
/* SELECT STYLES - Updated to match white.css structure */
/* ==================================================== */
.theme-select {
    background-color: var(--select-bg);
    color: var(--select-text);
    /* border: 1px solid var(--select-border); */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23eeeeee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
}

.theme-select:focus {
    /* outline: 2px solid var(--text-accent); */
    border-color: transparent;
}

.theme-select option {
    background-color: var(--select-option-bg);
    color: var(--select-text);
    padding: 10px;
}

.theme-select option:hover,
.theme-select option:focus {
    background-color: var(--select-option-hover);
}

.theme-select option:checked {
    background-color: var(--select-option-selected);
    color: var(--text-primary);
    font-weight: bold;
}

.theme-select-readonly,
.theme-select[readonly],
.theme-select:disabled {
    background-color: var(--select-bg-readonly) !important;
    cursor: not-allowed;
    opacity: 0.8;
    pointer-events: none;
}

/* For readonly state, also style the dropdown arrow */
.theme-select-readonly {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Style for the placeholder option */
.theme-select option[value="null"] {
    color: var(--select-placeholder);
}

/* ==================================================== */
/* INPUT STYLES - Updated to match white.css structure */
/* ==================================================== */
.theme-input {
    background-color: var(--input-bg);
    color: var(--input-text);
    /* border: 1px solid var(--input-border); */
    /* transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; */
}

.theme-input:focus {
    /* outline: 2px solid var(--text-accent);
    border-color: transparent; */
}

.theme-input::placeholder {
    color: var(--input-placeholder);
}

.theme-input-readonly,
.theme-input[readonly] {

}

/* ==================================================== */
/* TEXT STYLES */
/* ==================================================== */
.text-block {
    color: var(--text-block-color);
}

/* BODY & HTML */
html, body {
    background-color: var(--bg-main);
    background-image: url(images/stripe.png);
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
    font-family: Verdana;
    font-size: 14px;
}

/* BUTTON STYLES */
button {
    background-color: var(--button-bg);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
}

button:hover { background-color: var(--button-hover); color: #fff; }
button:active { background-color: var(--button-active); color: #ddd; }

/* SELECT INPUTS (legacy) */
select.my-select[readonly], select.my-select:disabled { background-color: #4a4444; }

/* BACKGROUND COLOR CLASSES */
.bg-grey-100 { background-color: var(--bg-main); }
.bg-grey-150 { background-color: #4a4444; }
.bg-grey-200 { background-color: var(--bg-alt); }
.bg-grey-800 { background-color: var(--bg-light); }
.bg-grey-900 { background-color: #848484; }
.bg-grey-800:hover,
.bg-grey-900:hover { background-color: var(--bg-hover); }

.border-grey-800 { 
    border: 1px solid var(--border-grey-800); 
}

/* POST STYLES */
.post-background-color { background-color: var(--bg-post); color: var(--text-secondary); }
.post-background-color-opacity { background-color: var(--bg-post-opacity); color: var(--text-secondary); }

/* COMMENT TEXT */
.comment-text { color: var(--text-primary); }
.comment-date { color: #999; }
.comment-depth { color: #aaa; }

/* SHADOWS */
.box-shadow { box-shadow: var(--shadow-color) 0px 20px 30px -10px; }

/* ==================================================== */
/* THEME TOGGLE BUTTON */
/* ==================================================== */
.theme-toggle button {
    background-color: var(--button-bg);
    color: var(--text-primary);
    padding: 8px 20px;
    font-size: 14px;
    border: 1px solid var(--border-grey-800);
    min-width: 160px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.theme-toggle button:hover {
    background-color: var(--button-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.theme-toggle button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Button theme styles */
.theme-button {
    background-color: var(--button-bg, #4d3d3d);
    color: var(--text-primary, #eee);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.theme-button:hover {
    background-color: var(--button-hover, #564343);
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.theme-button:active {
    background-color: var(--button-active, #333);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.theme-button-text {
    color: inherit;
}

/* Badge styles */
.button-badge-left {
    background-color: var(--badge-bg, #ffffff) !important;
    color: var(--badge-text, #000000) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.button-badge-right {
    background-color: var(--notification-bg, #ff4444) !important;
    color: var(--notification-text, #ffffff) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Lock icon */
.button-lock {
    filter: var(--lock-filter, brightness(0.9));
}

/* Disabled state */
.theme-button:disabled,
.theme-button[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-alt, #4E4949);
}

/* INFO BOX STYLES (added to match white.css) */
.theme-sensitive .info-box {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-color);
}

.theme-sensitive .info-box span[style*="color: var(--check-color)"] {
    color: var(--check-color) !important;
}

/* TEXT COLOR UTILITIES (added to match white.css) */
.txt-white { color: var(--text-primary); }
.txt-grey-800 { color: var(--text-secondary); }
.txt-grey-950 { color: #999; }
.txt-red-900 { color: #ff6b6b; }
.txt-green-900 { color: #4CAF50; }