/* ═══��════════════════════════════��══════════════════════
   Praetorax Mail — iCloud-inspired Design
   Light + Dark mode support
   ═══��═══════════════════════════════════════════════════ */

/* ─── Reset ─── */
* { transition: none !important; }
a, button, .btn, .toolbar a, #taskmenu a, .listing tbody tr {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════ */
body {
  background: #F5F5F7 !important;
  color: #1D1D1F !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Noto Sans Arabic', 'Helvetica Neue', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

#taskmenu { background: #FFFFFF !important; border-right: 1px solid #E5E5EA !important; }
#taskmenu a { color: #86868B !important; border-radius: 10px !important; margin: 2px 6px !important; }
#taskmenu a:hover { color: #1D1D1F !important; background: #F5F5F7 !important; }
#taskmenu a.selected { color: #007AFF !important; background: rgba(0,122,255,0.08) !important; }
#taskmenu a.logout:hover { color: #FF3B30 !important; background: rgba(255,59,48,0.06) !important; }

#layout > div > .header { background: #FFFFFF !important; border-bottom: 1px solid #E5E5EA !important; color: #1D1D1F !important; }
#layout > div > .footer { background: #FFFFFF !important; border-top: 1px solid #E5E5EA !important; color: #86868B !important; }
#layout-sidebar { background: #FAFAFA !important; border-right: 1px solid #E5E5EA !important; }
#layout-list { background: #FFFFFF !important; border-right: 1px solid #E5E5EA !important; }
#layout-content { background: #FFFFFF !important; }

#mailboxlist li a, #folderlist-content li a, .treelist li a { color: #1D1D1F !important; border-radius: 8px !important; margin: 1px 8px !important; }
#mailboxlist li a:hover, #folderlist-content li a:hover { background: #F5F5F7 !important; }
#mailboxlist li.selected > a, #folderlist-content li.selected > a { background: rgba(0,122,255,0.1) !important; color: #007AFF !important; font-weight: 500 !important; }
.unreadcount { background: #007AFF !important; color: #FFF !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 10px !important; min-width: 20px !important; padding: 1px 6px !important; }

.listing tbody tr { border-bottom: 1px solid #F2F2F7 !important; }
.listing tbody tr:hover { background: #F5F5F7 !important; }
.listing tbody tr.selected, .listing tbody tr.focused { background: rgba(0,122,255,0.08) !important; }
.listing tbody tr.selected td, .listing tbody tr.focused td { color: #007AFF !important; }
.listing tbody tr.selected td .subject span, .listing tbody tr.focused td .subject span { color: #007AFF !important; font-weight: 600 !important; }
.listing tbody tr.selected td .fromto, .listing tbody tr.focused td .fromto { color: #1D1D1F !important; }
.listing tbody tr.selected td .date, .listing tbody tr.focused td .date { color: #86868B !important; }
.listing tbody tr.unread td { font-weight: 600 !important; }

.toolbar { background: #FFFFFF !important; border-bottom: 1px solid #E5E5EA !important; }
.toolbar a.button { color: #007AFF !important; border-radius: 8px !important; }
.toolbar a.button:hover { background: rgba(0,122,255,0.08) !important; }
.toolbar a.button.disabled { color: #C7C7CC !important; }
.toolbar a.button.delete:hover { color: #FF3B30 !important; background: rgba(255,59,48,0.06) !important; }

.btn-primary, a.button.create, .formbuttons .mainaction { background: #007AFF !important; border: none !important; color: #FFF !important; border-radius: 8px !important; font-weight: 500 !important; }
.btn-primary:hover, a.button.create:hover, .formbuttons .mainaction:hover { background: #0066D6 !important; }
.btn-secondary, .btn-default { background: #FFFFFF !important; border: 1px solid #D1D1D6 !important; color: #1D1D1F !important; border-radius: 8px !important; }
.btn-secondary:hover, .btn-default:hover { background: #F5F5F7 !important; }

.searchbar input, #quicksearchbar input { background: #F2F2F7 !important; border: none !important; color: #1D1D1F !important; border-radius: 10px !important; }
.searchbar input:focus, #quicksearchbar input:focus { background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(0,122,255,0.2) !important; }
.searchbar input::placeholder { color: #86868B !important; }

input.form-control, select.form-control, textarea.form-control, .custom-select { background: #FFFFFF !important; border: 1px solid #D1D1D6 !important; color: #1D1D1F !important; border-radius: 8px !important; }
input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: #007AFF !important; box-shadow: 0 0 0 3px rgba(0,122,255,0.15) !important; }

.message-part { background: #FFFFFF !important; }
#message-header { background: #FFFFFF !important; border-bottom: 1px solid #F2F2F7 !important; }
#message-header .header-title { color: #1D1D1F !important; font-weight: 600 !important; }

.popupmenu, .popup, .popover { background: #FFFFFF !important; border: 1px solid #E5E5EA !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important; }
.ui-dialog { border-radius: 14px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important; border: 1px solid #E5E5EA !important; }
.ui-dialog .ui-dialog-titlebar { background: #FFFFFF !important; border-bottom: 1px solid #F2F2F7 !important; color: #1D1D1F !important; }
.ui-dialog .ui-dialog-content { background: #FFFFFF !important; color: #1D1D1F !important; }

::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: #C7C7CC !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: #86868B !important; }

a { color: #007AFF !important; text-decoration: none !important; }
a:hover { color: #0066D6 !important; }

.nav-tabs .nav-link { color: #86868B !important; border: none !important; }
.nav-tabs .nav-link.active { color: #007AFF !important; border-bottom: 2px solid #007AFF !important; }

#login-form { border-radius: 16px !important; box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important; border: 1px solid #E5E5EA !important; max-width: 400px !important; }
#login-form .box-inner { background: #FFFFFF !important; padding: 32px !important; }
#login-form input { background: #F2F2F7 !important; border: none !important; border-radius: 10px !important; padding: 12px 16px !important; color: #1D1D1F !important; }
#login-form input:focus { background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(0,122,255,0.2) !important; }
#login-form #rcmloginsubmit { background: #007AFF !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; width: 100% !important; color: #FFF !important; padding: 12px !important; }
#login-form #rcmloginsubmit:hover { background: #0066D6 !important; }
#login-form label { color: #86868B !important; }

/* ═══════════════════════���═══════════════════════════════
   DARK MODE
   ═════════��══════════════════════��══════════════════════ */
html.dark-mode body {
  background: #1C1C1E !important;
  color: #F5F5F7 !important;
}

html.dark-mode #taskmenu { background: #2C2C2E !important; border-right-color: #38383A !important; }
html.dark-mode #taskmenu a { color: #98989D !important; }
html.dark-mode #taskmenu a:hover { color: #F5F5F7 !important; background: #3A3A3C !important; }
html.dark-mode #taskmenu a.selected { color: #0A84FF !important; background: rgba(10,132,255,0.12) !important; }
html.dark-mode #taskmenu a.logout:hover { color: #FF453A !important; background: rgba(255,69,58,0.1) !important; }

html.dark-mode #layout > div > .header { background: #2C2C2E !important; border-bottom-color: #38383A !important; color: #F5F5F7 !important; }
html.dark-mode #layout > div > .footer { background: #2C2C2E !important; border-top-color: #38383A !important; color: #98989D !important; }
html.dark-mode #layout-sidebar { background: #1C1C1E !important; border-right-color: #38383A !important; }
html.dark-mode #layout-list { background: #2C2C2E !important; border-right-color: #38383A !important; }
html.dark-mode #layout-content { background: #1C1C1E !important; }

html.dark-mode #mailboxlist li a, html.dark-mode #folderlist-content li a, html.dark-mode .treelist li a { color: #F5F5F7 !important; }
html.dark-mode #mailboxlist li a:hover, html.dark-mode #folderlist-content li a:hover { background: #3A3A3C !important; }
html.dark-mode #mailboxlist li.selected > a, html.dark-mode #folderlist-content li.selected > a { background: rgba(10,132,255,0.15) !important; color: #0A84FF !important; }
html.dark-mode .unreadcount { background: #0A84FF !important; }

html.dark-mode .listing tbody tr { border-bottom-color: #38383A !important; }
html.dark-mode .listing tbody tr:hover { background: #3A3A3C !important; }
html.dark-mode .listing tbody tr.selected, html.dark-mode .listing tbody tr.focused { background: rgba(10,132,255,0.12) !important; }
html.dark-mode .listing tbody tr.selected td, html.dark-mode .listing tbody tr.focused td { color: #0A84FF !important; }
html.dark-mode .listing tbody tr.selected td .subject span { color: #0A84FF !important; }
html.dark-mode .listing tbody tr.selected td .fromto { color: #F5F5F7 !important; }
html.dark-mode .listing tbody tr.selected td .date { color: #98989D !important; }
html.dark-mode .listing tbody tr td { color: #F5F5F7 !important; }
html.dark-mode .listing tbody tr .fromto, html.dark-mode .listing tbody tr .date { color: #98989D !important; }

html.dark-mode .toolbar { background: #2C2C2E !important; border-bottom-color: #38383A !important; }
html.dark-mode .toolbar a.button { color: #0A84FF !important; }
html.dark-mode .toolbar a.button:hover { background: rgba(10,132,255,0.12) !important; }
html.dark-mode .toolbar a.button.disabled { color: #48484A !important; }
html.dark-mode .toolbar a.button.delete:hover { color: #FF453A !important; background: rgba(255,69,58,0.1) !important; }

html.dark-mode .btn-primary, html.dark-mode a.button.create, html.dark-mode .formbuttons .mainaction { background: #0A84FF !important; color: #FFF !important; }
html.dark-mode .btn-primary:hover, html.dark-mode a.button.create:hover { background: #0070E0 !important; }
html.dark-mode .btn-secondary, html.dark-mode .btn-default { background: #3A3A3C !important; border-color: #48484A !important; color: #F5F5F7 !important; }
html.dark-mode .btn-secondary:hover { background: #48484A !important; }

html.dark-mode .searchbar input, html.dark-mode #quicksearchbar input { background: #3A3A3C !important; color: #F5F5F7 !important; }
html.dark-mode .searchbar input:focus { background: #2C2C2E !important; box-shadow: 0 0 0 3px rgba(10,132,255,0.25) !important; }
html.dark-mode .searchbar input::placeholder { color: #636366 !important; }

html.dark-mode input.form-control, html.dark-mode select.form-control, html.dark-mode textarea.form-control, html.dark-mode .custom-select { background: #3A3A3C !important; border-color: #48484A !important; color: #F5F5F7 !important; }
html.dark-mode input.form-control:focus, html.dark-mode select.form-control:focus, html.dark-mode textarea.form-control:focus { border-color: #0A84FF !important; box-shadow: 0 0 0 3px rgba(10,132,255,0.2) !important; }

html.dark-mode .message-part { background: #1C1C1E !important; color: #F5F5F7 !important; }
html.dark-mode #message-header { background: #2C2C2E !important; border-bottom-color: #38383A !important; }
html.dark-mode #message-header .header-title { color: #F5F5F7 !important; }
html.dark-mode #message-header .header { color: #98989D !important; }

html.dark-mode .compose-content textarea, html.dark-mode .compose-content .mce-content-body { background: #1C1C1E !important; color: #F5F5F7 !important; }

html.dark-mode .popupmenu, html.dark-mode .popup, html.dark-mode .popover { background: #2C2C2E !important; border-color: #48484A !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; }
html.dark-mode .ui-dialog { box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important; border-color: #48484A !important; }
html.dark-mode .ui-dialog .ui-dialog-titlebar { background: #2C2C2E !important; border-bottom-color: #38383A !important; color: #F5F5F7 !important; }
html.dark-mode .ui-dialog .ui-dialog-content { background: #1C1C1E !important; color: #F5F5F7 !important; }

html.dark-mode ::-webkit-scrollbar-thumb { background: #48484A !important; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #636366 !important; }

html.dark-mode a { color: #0A84FF !important; }
html.dark-mode a:hover { color: #409CFF !important; }

html.dark-mode .nav-tabs .nav-link { color: #98989D !important; }
html.dark-mode .nav-tabs .nav-link.active { color: #0A84FF !important; border-bottom-color: #0A84FF !important; }

html.dark-mode #login-form { border-color: #48484A !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; }
html.dark-mode #login-form .box-inner { background: #2C2C2E !important; }
html.dark-mode #login-form input { background: #3A3A3C !important; color: #F5F5F7 !important; }
html.dark-mode #login-form input:focus { background: #2C2C2E !important; box-shadow: 0 0 0 3px rgba(10,132,255,0.25) !important; }
html.dark-mode #login-form #rcmloginsubmit { background: #0A84FF !important; }
html.dark-mode #login-form #rcmloginsubmit:hover { background: #0070E0 !important; }
html.dark-mode #login-form label { color: #98989D !important; }
html.dark-mode body { background: #1C1C1E !important; }

html.dark-mode .listing.iconized tr td.section::before, html.dark-mode .listing.iconized li a::before { color: #0A84FF !important; }
html.dark-mode input[type="checkbox"]:checked + label::before { background-color: #0A84FF !important; border-color: #0A84FF !important; }