/* Tuemailv final targeted purple theme */

:root {
    --tuemailv-purple: #dd46ff;
    --tuemailv-purple-hover: #ef8cff;
    --tuemailv-purple-soft: rgba(221, 70, 255, 0.28);
}

/* 1. Folder/list yang sedang aktif saja, contoh Inbox/Sent selected */
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li.selected > span,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing tbody tr.selected td {
    background-color: var(--tuemailv-purple-soft) !important;
    color: #ffffff !important;
}

/* 2. Hover folder saja, contoh saat mouse diarahkan ke Sent */
html.dark-mode .folderlist li.mailbox > a:hover,
html.dark-mode .folderlist li.mailbox > span:hover,
html.dark-mode .listing li > a:hover {
    background-color: var(--tuemailv-purple-soft) !important;
    color: #ffffff !important;
}

/* 3. Notification kanan bawah */
html.dark-mode #messagestack .alert-info,
html.dark-mode .notice.content.ui.alert.alert-info,
html.dark-mode #messagestack div.notice,
html.dark-mode #messagestack div.confirmation {
    background-color: var(--tuemailv-purple) !important;
    border-color: var(--tuemailv-purple) !important;
    color: #ffffff !important;
}

html.dark-mode #messagestack .alert-info *,
html.dark-mode .notice.content.ui.alert.alert-info *,
html.dark-mode #messagestack div.notice *,
html.dark-mode #messagestack div.confirmation * {
    color: #ffffff !important;
}

/* 4. Border/focus input seperti username, password, search */
html.dark-mode .form-control:focus,
html.dark-mode .form-control:focus:not(.is-invalid),
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .custom-file-label:focus:not(.is-invalid) {
    color: #ffffff !important;
    border-color: var(--tuemailv-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 70, 255, 0.35) !important;
    outline: none !important;
}

/* 5. Tombol MASUK di halaman login saja */
#login-form .btn-primary,
#login-form button[type="submit"],
#login-form input[type="submit"],
html.dark-mode #login-form .btn-primary,
html.dark-mode #login-form button[type="submit"],
html.dark-mode #login-form input[type="submit"] {
    background-color: var(--tuemailv-purple) !important;
    border-color: var(--tuemailv-purple) !important;
    color: #ffffff !important;
}


html.dark-mode #taskmenu .action-buttons a {
color: #d55bfa !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a, html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
    color: #d55bfa;
}

html.dark-mode {
    scrollbar-color: #d55bfa #5c4d66;
}

html.dark-mode .btn-primary {
    background-color: #92009d;
    color: #e2e8e9;
}

.btn-primary {
    color: #fff;
    background: #d937ff;
    border-color: #c837ff;
}

.btn-primary:hover {
    color: #fff;
    background: #d937ff;
    border-color: #c837ff;
}

.btn-primary:focus {
    background: #1eb6ff;
    border-color: #c837ff;
    box-shadow: 0 0 0 .2rem rgb(191 55 255 / 53%);
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgb(191 55 255 / 53%);
}

html.dark-mode .btn-primary:hover:not(:disabled) {
    background-color: #f350ff;
}

html.dark-mode .btn-primary:hover {
    background-color: #f350ff;
}

/* 4. Border/focus input seperti username, password, search */
html.dark-mode .form-control:focus,
html.dark-mode .form-control:focus:not(.is-invalid),
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .custom-file-label:focus:not(.is-invalid) {
    color: #ffffff !important;
    border-color: var(--tuemailv-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 70, 255, 0.35) !important;
    outline: none !important;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
    background: #f350ff;
    border-color: #c837ff;
}

div.tox.focused {
    border-color: #d137ff !important;
    box-shadow: 0 0 0 .2rem rgb(145 55 255 / 25%) !important;
}

html.dark-mode .custom-file-label:not(.is-invalid), html.dark-mode .form-control:not(.is-invalid) {
    border-color: #927c9c;
}

/* Compose To/Cc/Bcc focus - clean purple border */
html.dark-mode .recipient-input.focus,
html.dark-mode .input-group.recipient-input.focus,
html.dark-mode ul.form-control.recipient-input.focus {
    border: 1px solid #dd46ff !important;
    border-color: #dd46ff !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #21292c !important;
}

/* Inner input di To/Cc/Bcc jangan bikin kotak ungu sendiri */
html.dark-mode .recipient-input.focus input,
html.dark-mode .recipient-input.focus textarea,
html.dark-mode .recipient-input.focus .form-control,
html.dark-mode .input-group.recipient-input.focus input,
html.dark-mode .input-group.recipient-input.focus textarea {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    color: #e2e9e9 !important;
}

/* Tombol icon di kanan field To */
html.dark-mode .recipient-input.focus + .input-group-append,
html.dark-mode .recipient-input.focus ~ .input-group-append,
html.dark-mode .input-group:has(.recipient-input.focus) .input-group-append,
html.dark-mode .input-group:has(.recipient-input.focus) .btn {
    border-color: #dd46ff !important;

}

/* Subject/body/search focus tetap seperti gambar 3 */
html.dark-mode .form-control:focus,
html.dark-mode input.form-control:focus,
html.dark-mode textarea.form-control:focus,
html.dark-mode select.form-control:focus {
    color: #ffffff !important;
    border-color: #dd46ff !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 70, 255, 0.35) !important;
    outline: none !important;
}

/* Safe focus only for real form inputs */
html.dark-mode input.form-control:focus,
html.dark-mode textarea.form-control:focus,
html.dark-mode select.form-control:focus,
html.dark-mode .custom-file-label:focus:not(.is-invalid) {
    color: #ffffff !important;
    border-color: #dd46ff !important;
    box-shadow: 0 0 0 0.12rem rgba(221, 70, 255, 0.25) !important;
    outline: none !important;
}

/* Compose To/Cc/Bcc focus only */
html.dark-mode .recipient-input.focus {
    border-color: #dd46ff !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before {
    background-color: #9d009a;
}

.custom-switch .custom-control-input:checked~.custom-control-label::before {
    border-color: #da37ff;
    background-color: #9d009a;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
}

.custom-switch .custom-control-input:focus~.custom-control-label:before {
    box-shadow: 0 0 0 .2rem rgb(182 55 255 / 25%);
}

html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before {
    background-color: #9d009a;
}

.custom-switch .custom-control-input:checked~.custom-control-label::before {
    border-color: #da37ff;
    background-color: #9d009a;
}

.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #c400ff;
}

html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before {
    background-color: #9d009a;
}

a {
    color: #d55bfa;
}

a:hover {
    color: #e695ff;
}


/* Hide light/dark mode toggle button */
#taskmenu a.theme,
#taskmenu .theme,
#layout-menu a.theme,
#layout-menu .theme {
    display: none !important;
}

html.dark-mode #logo {
    opacity: 1;
}