/* Kaiser Quarry Studios — Roundcube Branding v3
   "We Carve Stories From Stone." */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --kqs-basalt: #1a1820;
  --kqs-obsidian: #141218;
  --kqs-slate: #222028;
  --kqs-marble: #e8e4ec;
  --kqs-iron-ochre: #c4943a;
  --kqs-iron-ochre-hover: #d4a44a;
  --kqs-slate-blue: #5b7aa6;
  --kqs-text-secondary: #9e98a6;
  --kqs-text-muted: #6b6572;
  --kqs-border: rgba(255, 255, 255, 0.06);
}

/* ═══ NUCLEAR DARK — every surface ═══ */
html, body,
#layout, #layout-content, #layout-list, #layout-sidebar,
.content, .scroller, .listbox,
#mailview-right, #messagecontframe, #messagebody,
.formcontent, table, thead, tbody, tr, td, th,
.table-widget, .propform, .preferences-table,
.ui-widget-content, .ui-dialog,
.popupmenu, .popover, .dropdown-menu,
.footer, #countcontrols {
  background-color: var(--kqs-obsidian) !important;
  color: var(--kqs-marble) !important;
}

/* Sidebar */
#layout-sidebar, #layout-sidebar .scroller, #taskmenu {
  background-color: var(--kqs-basalt) !important;
}

/* Toolbar — clean basalt, no weird tint */
.header, #layout > .header, .toolbar,
#layout-list > .header, #layout-content > .header,
.menu-wrapper, #taskmenu, #messagelist-header {
  background-color: var(--kqs-basalt) !important;
  border-bottom: 1px solid var(--kqs-border) !important;
}

/* ═══ LOGIN PAGE ═══ */
body.task-login #layout {
  background: var(--kqs-obsidian) !important;
  background-image: radial-gradient(ellipse at 50% 30%, rgba(196, 148, 58, 0.06) 0%, transparent 60%) !important;
}

body.task-login #login-form {
  background: var(--kqs-slate) !important;
  border: 1px solid var(--kqs-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Login logo — HUGE golden */
body.task-login #logo {
  width: 320px !important;
  height: 320px !important;
  max-width: 320px !important;
  max-height: 320px !important;
  margin-bottom: 40px !important;
}

/* App logo (sidebar, small) */
#taskmenu #logo {
  width: 24px !important;
  height: 24px !important;
}

/* ═══ PASSWORD FIELD ═══ */
input[type="password"].form-control,
input[type="password"] {
  font-size: 10px !important;
  letter-spacing: 2px !important;
}

/* ═══ INPUTS ═══ */
.form-control, input[type="text"], input[type="password"],
textarea, select {
  background: var(--kqs-obsidian) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--kqs-marble) !important;
  border-radius: 8px !important;
}

.form-control:focus, input:focus, textarea:focus {
  border-color: var(--kqs-iron-ochre) !important;
  box-shadow: 0 0 0 2px rgba(196, 148, 58, 0.15) !important;
}

/* ═══ BUTTONS ═══ */
.btn-primary, .button.mainaction, input[type="submit"] {
  background: var(--kqs-iron-ochre) !important;
  border-color: var(--kqs-iron-ochre) !important;
  color: var(--kqs-obsidian) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.btn-primary:hover, .button.mainaction:hover {
  background: var(--kqs-iron-ochre-hover) !important;
  box-shadow: 0 0 16px rgba(196, 148, 58, 0.3) !important;
}

/* ═══ MAIL LIST ═══ */
.messagelist tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.messagelist tr:hover { background: var(--kqs-slate) !important; }
.messagelist tr.selected { background: rgba(196, 148, 58, 0.08) !important; }
.messagelist tr.unread td.subject span {
  color: var(--kqs-marble) !important;
  font-weight: 600 !important;
}

/* ═══ FOLDER LIST ═══ */
.folderlist li a, .treelist li a {
  color: var(--kqs-text-secondary) !important;
  border-radius: 6px !important;
}
.folderlist li a:hover, .treelist li a:hover {
  background: var(--kqs-slate) !important;
  color: var(--kqs-marble) !important;
}
.folderlist li.selected > a, .treelist li.selected > a {
  background: rgba(196, 148, 58, 0.1) !important;
  color: var(--kqs-iron-ochre) !important;
}

/* ═══ LINKS ═══ */
a { color: var(--kqs-slate-blue) !important; }
a:hover { color: #7b9ac6 !important; }

/* ═══ ICONS ═══ */
.menu a::before, #taskmenu a::before,
.folderlist li a::before, .treelist li a::before {
  filter: invert(0.7) !important;
}

/* ═══ SCROLLBARS ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--kqs-obsidian); }
::-webkit-scrollbar-thumb { background: var(--kqs-text-muted); border-radius: 3px; }

/* ═══ MISC ═══ */
.searchbar input { background: var(--kqs-slate) !important; }
#login-footer, .formlinks { opacity: 0.4; }
::selection { background: rgba(196, 148, 58, 0.3) !important; }
.splitter { background: var(--kqs-border) !important; }
.username { color: var(--kqs-text-secondary) !important; }

/* ═══ LEFT RAIL / TASKMENU — override Elastic hardcoded light colors ═══ */
#taskmenu a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--kqs-text-secondary) !important;
}

#taskmenu a:hover {
  color: var(--kqs-marble) !important;
  background: var(--kqs-slate) !important;
}

#taskmenu a.selected {
  color: var(--kqs-iron-ochre) !important;
  background: rgba(196, 148, 58, 0.08) !important;
}

#layout-menu, #layout-menu .popover-header {
  background: var(--kqs-basalt) !important;
  border-right: 1px solid var(--kqs-border) !important;
}

/* Sidebar separator between folders and special buttons */
#taskmenu span.special-buttons {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Splitters between panels */
.splitter, .column-splitter {
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
}

/* Header separator lines */
#layout-sidebar .header,
#layout-list .header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Footer / quota bar area */
#layout-sidebar .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ═══ OVERRIDE ELASTIC DARK MODE (html.dark-mode) — their rules fight ours ═══ */
html.dark-mode #layout-content,
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode .popup .listbox .footer {
  background-color: var(--kqs-obsidian) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode #layout-menu {
  background: var(--kqs-basalt) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 0 !important;
}

html.dark-mode #layout-menu .popover-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}

html.dark-mode #taskmenu a {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--kqs-text-secondary) !important;
}

html.dark-mode #taskmenu a:hover {
  color: var(--kqs-marble) !important;
  background: var(--kqs-slate) !important;
}

/* ═══ SPECIAL BUTTONS (Dark mode, About, Logout) ═══ */
#taskmenu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#taskmenu .special-buttons a,
html.dark-mode #layout-menu .special-buttons a,
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background: transparent !important;
  color: var(--kqs-text-muted) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#taskmenu .special-buttons a:hover,
html.dark-mode #layout-menu .special-buttons a:hover {
  color: var(--kqs-marble) !important;
  background: var(--kqs-slate) !important;
}

/* ═══ SIDEBAR BORDER ═══ */
#layout-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  background-color: var(--kqs-basalt) !important;
}

/* ═══ LINK COLOR STRATEGY — subjects readable, links subtle ═══ */
/* Reset: don't make EVERYTHING blue */
a { color: inherit !important; }

/* Only actual action links get slate-blue */
#login-footer a,
.formlinks a,
.message-part a,
.messagebody a,
#message-header a,
.toolbar a span.inner,
.footer a {
  color: var(--kqs-slate-blue) !important;
}

/* Mail subject in list — iron-ochre for unread, marble for read */
.messagelist td.subject a {
  color: var(--kqs-text-secondary) !important;
}

.messagelist tr.unread td.subject a {
  color: var(--kqs-marble) !important;
}

/* Folder names */
.folderlist li a,
.treelist li a {
  color: var(--kqs-text-secondary) !important;
}

/* ═══ LISTING BORDERS — the actual folder list separators ═══ */
.listing li,
.listing tbody td,
.listing li:last-child,
html.dark-mode .listing li,
html.dark-mode .listing li ul,
html.dark-mode .listing tbody td {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

.listing li ul {
  border-top-color: rgba(255, 255, 255, 0.04) !important;
}

/* Focus indicator — subtle iron-ochre instead of bright blue */
html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child {
  border-left-color: var(--kqs-iron-ochre) !important;
}

/* Recent folder — no bright blue */
.folderlist li.mailbox.recent > a {
  color: var(--kqs-iron-ochre) !important;
}

/* Unread count badge */
.folderlist li.mailbox .unreadcount {
  background: var(--kqs-iron-ochre) !important;
  color: var(--kqs-obsidian) !important;
}

/* Toolbar text (Select, Threads, Options, Refresh) */
.toolbar a, .toolbar a span.inner,
.menu a span.inner {
  color: var(--kqs-text-secondary) !important;
}

.toolbar a:hover, .toolbar a:hover span.inner {
  color: var(--kqs-marble) !important;
}

/* ═══ SEARCHBAR ═══ */
.searchbar,
html.dark-mode .searchbar {
  background-color: var(--kqs-slate) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.searchbar input,
html.dark-mode .searchbar input {
  color: var(--kqs-marble) !important;
  background: transparent !important;
}

.searchbar form:before,
.searchbar a,
html.dark-mode .searchbar form:before,
html.dark-mode .searchbar a {
  color: var(--kqs-text-muted) !important;
}

/* ═══ NUCLEAR: ALL remaining #f1f3f4 / #d4dbde borders ═══ */
*:not(#kqs-ignore) {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Restore specific borders that need to be invisible */
.listing li > a,
html:not(.touch) .listing tbody tr > td:first-child {
  border-left-color: transparent !important;
}

/* Box shadows — kill bright ones */
.tooltip, .ui-dialog, .popupmenu, .popover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Vertical splitter between panels */
#layout-sidebar {
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

#layout-list {
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}