/* ═══════════════════════════════════════════════════
   HostPanel Premium Light Theme for Roundcube
   Font: Inter | Color: Indigo/Violet palette
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --hp-bg:        #F0F4FF;
  --hp-white:     #FFFFFF;
  --hp-sidebar:   #FFFFFF;
  --hp-border:    #E8ECFF;
  --hp-border2:   #E2E8F0;
  --hp-primary:   #6366F1;
  --hp-primary2:  #8B5CF6;
  --hp-text:      #0F172A;
  --hp-text2:     #334155;
  --hp-muted:     #64748B;
  --hp-muted2:    #94A3B8;
  --hp-hover:     #F5F3FF;
  --hp-active:    #EEF2FF;
  --hp-success:   #10B981;
  --hp-warning:   #F59E0B;
  --hp-danger:    #EF4444;
  --hp-shadow:    0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(99,102,241,0.08);
  --hp-shadow-lg: 0 8px 24px rgba(0,0,0,0.09), 0 12px 40px rgba(99,102,241,0.12);
}

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Base ── */
body, html {
  background: var(--hp-bg) !important;
  color: var(--hp-text) !important;
}

/* ── Layout containers ── */
#layout { background: var(--hp-bg) !important; }

#layout #sidebar, .app-sidebar {
  background: var(--hp-sidebar) !important;
  border-right: 1px solid var(--hp-border) !important;
  box-shadow: 2px 0 8px rgba(99,102,241,0.06) !important;
}

#layout #content, .app-content {
  background: var(--hp-bg) !important;
}

/* ── Header / Taskbar ── */
#header, .taskbar, #task-menu, #header-title {
  background: var(--hp-white) !important;
  border-bottom: 1px solid var(--hp-border) !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.06) !important;
  color: var(--hp-text) !important;
}
#header a, #header .button, .taskbar a, #task-menu a,
#header-title a, #task-menu li a {
  color: var(--hp-muted) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}
#header a:hover, .taskbar a:hover, #task-menu li a:hover {
  color: var(--hp-primary) !important;
  background: var(--hp-hover) !important;
}
#task-menu li.selected a, #task-menu li a.selected,
#header a.selected, .taskbar a.selected {
  color: var(--hp-primary) !important;
  background: var(--hp-active) !important;
  font-weight: 600 !important;
}

/* ── Toolbar ── */
.toolbar, #toolbar, #message-header .toolbar {
  background: var(--hp-white) !important;
  border-bottom: 1px solid var(--hp-border2) !important;
  padding: 6px 8px !important;
}
.toolbar .button, .toolbar a.button, #toolbar .button {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border2) !important;
  color: var(--hp-text2) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease !important;
}
.toolbar .button:hover, .toolbar a.button:hover, #toolbar .button:hover {
  background: var(--hp-hover) !important;
  color: var(--hp-primary) !important;
  border-color: rgba(99,102,241,0.3) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.15) !important;
}
.toolbar .button.primary, a.button.mainaction {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}
.toolbar .button.primary:hover, a.button.mainaction:hover {
  background: linear-gradient(135deg, #818CF8, #A78BFA) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.4) !important;
}

/* ── Message List ── */
#messagelist, .listing, .treelist {
  background: transparent !important;
}
#messagelist thead th {
  background: var(--hp-white) !important;
  color: var(--hp-muted) !important;
  border-bottom: 2px solid var(--hp-border) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
}
#messagelist tbody tr {
  background: var(--hp-white) !important;
  border-bottom: 1px solid var(--hp-border2) !important;
  transition: background 0.12s ease !important;
}
#messagelist tbody tr:hover td {
  background: var(--hp-hover) !important;
}
#messagelist tbody tr.selected td {
  background: var(--hp-active) !important;
  color: var(--hp-primary) !important;
}
#messagelist tbody tr.unread td { font-weight: 600 !important; }
#messagelist tbody tr.unread td.subject { color: var(--hp-text) !important; }
#messagelist tbody tr td { color: var(--hp-text2) !important; padding: 10px 12px !important; }

/* ── Folder list / treelist ── */
.folderlist, .treelist {
  background: transparent !important;
}
.folderlist li a, .treelist li a {
  color: var(--hp-text2) !important;
  border-radius: 8px !important;
  margin: 1px 6px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  transition: all 0.12s ease !important;
  display: flex !important;
  align-items: center !important;
}
.folderlist li a:hover, .treelist li a:hover {
  background: var(--hp-hover) !important;
  color: var(--hp-primary) !important;
}
.folderlist li.selected a, .treelist li.selected a,
.folderlist li.focused a {
  background: var(--hp-active) !important;
  color: var(--hp-primary) !important;
  font-weight: 600 !important;
  border-left: 2px solid var(--hp-primary) !important;
}
.unreadcount {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: #fff !important;
  border-radius: 99px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ── Message view ── */
#message-content, .message-part, .mail-message, #messagecontent {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border2) !important;
  border-radius: 14px !important;
  box-shadow: var(--hp-shadow) !important;
  padding: 24px !important;
  color: var(--hp-text) !important;
}
#message-header, .message-header {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border2) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--hp-shadow) !important;
}
.message-header .subject { color: var(--hp-text) !important; font-weight: 700 !important; font-size: 18px !important; }
.message-header .header-title { color: var(--hp-muted) !important; font-size: 12px !important; }
.message-header .header-value { color: var(--hp-text2) !important; font-size: 13px !important; }

/* ── Compose ── */
#compose-content, .compose-body, #compose {
  background: var(--hp-bg) !important;
}
#compose table.headers-table {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border2) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: var(--hp-shadow) !important;
  margin-bottom: 12px !important;
}
#compose table.headers-table td.title {
  color: var(--hp-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  width: 90px !important;
}
#compose table.headers-table input,
#compose .input-group input, #compose input[type=text] {
  background: #F8FAFF !important;
  border: 1px solid var(--hp-border2) !important;
  color: var(--hp-text) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.15s !important;
}
#compose table.headers-table input:focus {
  border-color: var(--hp-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline: none !important;
}
#compose .mce-container, .mce-edit-area, .mce-content-body {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border2) !important;
  border-radius: 12px !important;
}

/* ── All inputs / forms ── */
input[type=text], input[type=email], input[type=password],
input[type=search], textarea, select {
  background: #F8FAFF !important;
  border: 1px solid var(--hp-border2) !important;
  color: var(--hp-text) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--hp-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline: none !important;
  background: #fff !important;
}
::placeholder { color: var(--hp-muted2) !important; }
select option { background: var(--hp-white) !important; color: var(--hp-text) !important; }

/* ── Buttons (global) ── */
.btn, button, input[type=submit], input[type=button] {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}
.btn-primary, .ui-button-primary {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}
.btn-primary:hover { background: linear-gradient(135deg, #818CF8, #A78BFA) !important; }
.btn-default, .btn-secondary {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border2) !important;
  color: var(--hp-text2) !important;
}
.btn-default:hover {
  background: var(--hp-hover) !important;
  border-color: rgba(99,102,241,0.3) !important;
  color: var(--hp-primary) !important;
}

/* ── LOGIN PAGE ── */
#login-form, .login-content > div {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(99,102,241,0.12), 0 4px 20px rgba(0,0,0,0.08) !important;
  padding: 36px !important;
  position: relative !important;
  overflow: hidden !important;
}
#login-form::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #6366F1, #8B5CF6, #06B6D4) !important;
}
#login-form #logo, .login-header {
  text-align: center !important;
  margin-bottom: 24px !important;
}
#login-form label {
  color: var(--hp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  margin-bottom: 6px !important;
}
#login-form input[type=text], #login-form input[type=password] {
  background: #F8FAFF !important;
  border: 1.5px solid var(--hp-border2) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#login-form input[type=text]:focus, #login-form input[type=password]:focus {
  border-color: var(--hp-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  background: #fff !important;
}
#login-form input[type=submit], #login-form .mainaction {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.35) !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
}
#login-form input[type=submit]:hover {
  background: linear-gradient(135deg, #818CF8, #A78BFA) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.45) !important;
  transform: translateY(-1px) !important;
}
.login-content { background: var(--hp-bg) !important; }

/* ── Dialogs & Popups ── */
.ui-dialog, .popupmenu, .dropdown-menu {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 4px 16px rgba(99,102,241,0.08) !important;
  color: var(--hp-text) !important;
  overflow: hidden !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: #F8FAFF !important;
  border-bottom: 1px solid var(--hp-border) !important;
  color: var(--hp-text) !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
}
.ui-dialog .ui-dialog-buttonpane {
  background: #F8FAFF !important;
  border-top: 1px solid var(--hp-border) !important;
  padding: 12px 18px !important;
}
.popupmenu li a, .dropdown-menu li a {
  color: var(--hp-text2) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
  transition: all 0.12s !important;
}
.popupmenu li a:hover, .dropdown-menu li a:hover {
  background: var(--hp-hover) !important;
  color: var(--hp-primary) !important;
}

/* ── Contact list ── */
.listing li a {
  color: var(--hp-text2) !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  transition: background 0.12s !important;
}
.listing li.selected a, .listing li a:hover {
  background: var(--hp-hover) !important;
  color: var(--hp-primary) !important;
}

/* ── Progress / quota ── */
.quota-info .bar {
  background: #E8ECFF !important;
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden !important;
}
.quota-info .bar span {
  background: linear-gradient(90deg, #6366F1, #8B5CF6) !important;
  border-radius: 99px !important;
  display: block !important;
  height: 100% !important;
}

/* ── Status / alerts ── */
.notice, .alert-info    { background: #EFF6FF !important; border-left: 3px solid #3B82F6 !important; color: #1E40AF !important; border-radius: 8px !important; }
.warning, .alert-warning { background: #FFFBEB !important; border-left: 3px solid #F59E0B !important; color: #92400E !important; border-radius: 8px !important; }
.error, .alert-danger    { background: #FFF1F2 !important; border-left: 3px solid #EF4444 !important; color: #991B1B !important; border-radius: 8px !important; }
.confirmation, .alert-success { background: #ECFDF5 !important; border-left: 3px solid #10B981 !important; color: #064E3B !important; border-radius: 8px !important; }

/* ── Attachment pills ── */
.attachment, .attachments a {
  background: #F0F4FF !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 8px !important;
  color: var(--hp-text2) !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  transition: all 0.12s !important;
}
.attachment:hover, .attachments a:hover {
  background: var(--hp-hover) !important;
  color: var(--hp-primary) !important;
  border-color: rgba(99,102,241,0.3) !important;
}

/* ── Separators ── */
hr, .separator { border-color: var(--hp-border2) !important; }

/* ── Badges / tags ── */
.label, .badge {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
}
.label-primary, .badge-primary { background: #EEF2FF !important; color: var(--hp-primary) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #F0F4FF; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.55); }

/* ── Folder icon colors ── */
.folderlist li.inbox > a::before    { color: #6366F1 !important; }
.folderlist li.sent > a::before     { color: #06B6D4 !important; }
.folderlist li.trash > a::before    { color: #EF4444 !important; }
.folderlist li.junk > a::before     { color: #F59E0B !important; }
.folderlist li.drafts > a::before   { color: #8B5CF6 !important; }
.folderlist li.archive > a::before  { color: #10B981 !important; }

/* ── Selection highlight ── */
::selection { background: rgba(99,102,241,0.15) !important; color: var(--hp-primary) !important; }


/* ── Far-left task menu (elastic #taskmenu) — fix: was left with elastic's
      default dark #2f3a3f bg + white text (unreadable). Force light theme. ── */
#layout-menu,
#taskmenu,
#taskmenu.menu.toolbar {
  background: var(--hp-sidebar) !important;
  border-right: 1px solid var(--hp-border) !important;
  box-shadow: 2px 0 8px rgba(99,102,241,0.06) !important;
}
#layout-menu .popover-header { background: var(--hp-sidebar) !important; }
#taskmenu a,
#taskmenu a span.inner,
#taskmenu .special-buttons a span.inner {
  color: var(--hp-muted) !important;
  background: transparent !important;
}
#taskmenu a:hover,
#taskmenu a:focus {
  color: var(--hp-primary) !important;
  background: var(--hp-hover) !important;
}
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu a.selected:focus {
  color: var(--hp-primary) !important;
  background: var(--hp-active) !important;
}
#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover,
#taskmenu .action-buttons a span.inner { color: var(--hp-primary) !important; }
#taskmenu .special-buttons a { color: var(--hp-muted) !important; }
#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.logout span.inner { color: var(--hp-danger) !important; }


/* ═══════════════════════════════════════════════════
   ROOT FIX 2026-06-05 — webmail compose "yazı yazılmıyor" + left colour clash
   Root cause: elastic auto-enabled dark-mode (OS prefers-color-scheme: dark,
   no colorMode cookie). `html.dark-mode .form-control:focus` forced near-white
   text while this light theme set the focus background to #fff -> you typed but
   saw nothing; and ~339 dark-mode rules clashed with the forced-light left bar.
   Primary fix lives in templates/includes/layout.html (force-remove dark-mode).
   The rules below keep typing readable and the left column consistent even if
   dark-mode is ever re-enabled at runtime (defence in depth).
═══════════════════════════════════════════════════ */
input, textarea, select, .form-control,
input:focus, textarea:focus, select:focus, .form-control:focus,
#composebody, #composebody:focus {
  color: var(--hp-text) !important;
  -webkit-text-fill-color: var(--hp-text) !important;
  caret-color: var(--hp-primary) !important;
}
::placeholder {
  color: var(--hp-muted2) !important;
  -webkit-text-fill-color: var(--hp-muted2) !important;
}
/* Left column: repaint the bottom special-buttons strip (elastic leaves it
   #2f3a3f) and block any dark-mode repaint of the structural menu. */
#taskmenu, #taskmenu .special-buttons, #taskmenu .action-buttons,
#layout-menu, #layout-menu .popover-header,
html.dark-mode #taskmenu, html.dark-mode #layout-menu,
html.dark-mode #taskmenu .special-buttons {
  background-color: var(--hp-sidebar) !important;
}


/* ── ROOT FIX 2026-06-05 (compose "açıklama"/body not typeable) ──
   The plain-text message body is the #composebody textarea. Guarantee it is
   interactive, opaque, dark-on-white with a visible caret, and tall enough that
   the whole visible body area IS the textarea (not dead space below a collapsed
   box — a layout regression that makes clicks miss the field). ── */
#composebody,
textarea#composebody.form-control,
textarea#composebody.form-control:focus {
  pointer-events: auto !important;
  user-select: text !important;
  opacity: 1 !important;
  color: var(--hp-text) !important;
  -webkit-text-fill-color: var(--hp-text) !important;
  caret-color: var(--hp-primary) !important;
  background: #fff !important;
  color-scheme: light !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  min-height: 50vh !important;
  resize: vertical !important;
}

/* ── ROOT FIX 2026-06-05 (HTML compose body invisible text) ──
   HTML compose uses TinyMCE inside an iframe, while plain-text compose uses
   #composebody. Keep both editor shells dark-on-white and make the caret
   visible even when Elastic dark-mode classes or TinyMCE defaults are present. */
#compose .tox,
#compose .tox .tox-edit-area,
#compose .tox .tox-edit-area__iframe,
#compose .html-editor,
#compose .mce-edit-area,
#compose .mce-content-body,
.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
  background: #fff !important;
  color: var(--hp-text) !important;
}

#compose iframe,
iframe#composebody_ifr {
  background: #fff !important;
  color-scheme: light !important;
}

body.task-mail.action-compose textarea,
body.task-mail.action-compose textarea:focus,
body.task-mail.action-compose .tox-edit-area iframe {
  color: var(--hp-text) !important;
  -webkit-text-fill-color: var(--hp-text) !important;
  background-color: #fff !important;
  caret-color: var(--hp-primary) !important;
}