/* ══════════════════════════════════════════════════════════════════
   Webmail Dark Theme for Roundcube Elastic
   Color scheme: GitHub-dark inspired (#0d1117 base)
   ══════════════════════════════════════════════════════════════════ */

:root {
    --bg:           #0d1117;
    --bg2:          #161b22;
    --bg3:          #1c2330;
    --bg4:          #21262d;
    --border:       #30363d;
    --border2:      #3d444d;
    --text:         #e6edf3;
    --text2:        #8b949e;
    --text3:        #6e7681;
    --accent:       #238636;
    --accent-blue:  #1f6feb;
    --accent-teal:  #0d9488;
    --accent-hover: #2ea043;
    --red:          #da3633;
    --orange:       #d29922;
    --purple:       #8957e5;
    --radius:       6px;
    --radius-lg:    10px;
}

/* ── Global ───────────────────────────────────────────────── */
html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
}

* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── Layout Panels ────────────────────────────────────────── */
#layout > div,
#layout-sidebar,
#layout-list,
#layout-content,
.layout > div,
.content.only,
.formcontainer,
.contentbox {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

/* ── Headers / Footers ────────────────────────────────────── */
.header, .footer,
#layout > div > .header,
#layout > div > .footer,
.searchbar {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}

/* ── Task Menu (top bar) ──────────────────────────────────── */
#taskmenu {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}

#taskmenu a {
    color: var(--text2) !important;
    opacity: 1 !important;
}

#taskmenu a:hover {
    color: var(--text) !important;
    background: var(--bg4) !important;
}

#taskmenu a.selected,
#taskmenu a.button-selected {
    color: var(--accent-teal) !important;
}

#taskmenu a.selected::after,
#taskmenu a.button-selected::after {
    background: var(--accent-teal) !important;
}

/* Product name */
.minmodetoggle::before,
#logo {
    color: var(--accent-teal) !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */
#layout-sidebar {
    background: var(--bg2) !important;
    border-right: 1px solid var(--border) !important;
}

#layout-sidebar .header {
    background: var(--bg2) !important;
}

/* Compose button */
#layout-sidebar .header a.compose,
a.button.compose {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

a.button.compose:hover {
    background: var(--accent-hover) !important;
}

/* Folder list */
#mailboxlist li > a,
.treelist li > a,
.listing li > a {
    color: var(--text2) !important;
    border-radius: var(--radius) !important;
    border-left: none !important;
}

#mailboxlist li > a:hover,
.treelist li > a:hover,
.listing li > a:hover {
    background: var(--bg4) !important;
    color: var(--text) !important;
}

#mailboxlist li.selected > a,
.treelist li.selected > a,
.listing li.selected > a {
    background: var(--bg4) !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--accent-teal) !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

/* Unread count */
.unreadcount {
    background: var(--accent-blue) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    padding: 0 5px !important;
}

/* Mailbox list section labels */
.boxtitle,
.listing li.mailbox.root > a {
    color: var(--text3) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 600 !important;
}

/* ── Message List ─────────────────────────────────────────── */
#layout-list {
    border-right: 1px solid var(--border) !important;
}

.messagelist {
    background: var(--bg) !important;
}

.messagelist tr {
    border-bottom: 1px solid var(--border) !important;
}

.messagelist tr td {
    color: var(--text2) !important;
    border-color: var(--border) !important;
    padding: 10px 8px !important;
}

.messagelist tr:hover td {
    background: var(--bg2) !important;
}

.messagelist tr.selected td,
.messagelist tr.focused td {
    background: var(--bg3) !important;
    border-left: 3px solid var(--accent-teal) !important;
}

/* Unread messages */
.messagelist tr.unread td {
    color: var(--text) !important;
    font-weight: 600 !important;
}

.messagelist tr.unread td.subject span.subject a {
    color: var(--text) !important;
    font-weight: 600 !important;
}

.messagelist td.subject span.subject a {
    color: var(--text2) !important;
}

/* Thread header */
.messagelist thead td,
.messagelist thead th {
    background: var(--bg2) !important;
    color: var(--text3) !important;
    border-color: var(--border) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Message list toolbar */
#messagetoolbar,
#messagelistfooter {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}

/* ── Message Content ──────────────────────────────────────── */
#layout-content {
    background: var(--bg) !important;
}

.message-header,
#message-header {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-lg) !important;
    margin: 12px 16px !important;
    padding: 14px 16px !important;
}

.message-header .subject {
    color: var(--text) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.message-header .header-title {
    color: var(--text3) !important;
    font-size: 12px !important;
}

.message-header .header-content {
    color: var(--text2) !important;
}

#messagecontframe,
.messagepart,
#messagebody {
    background: var(--bg) !important;
}

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar,
.toolbar.menu,
#messagetoolbar {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}

.toolbar a,
.toolbar button,
.toolbar .button,
#messagetoolbar a {
    color: var(--text2) !important;
    border-color: var(--border) !important;
    background: var(--bg3) !important;
    border-radius: var(--radius) !important;
    margin: 2px 2px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

.toolbar a:hover,
.toolbar button:hover,
#messagetoolbar a:hover {
    background: var(--bg4) !important;
    color: var(--text) !important;
    border-color: var(--border2) !important;
}

.toolbar a.selected,
.toolbar a.pressed {
    color: var(--accent-teal) !important;
    background: rgba(13,148,136,0.15) !important;
}

/* Reply button - primary style */
.toolbar a.reply,
.toolbar a.reply-all {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: #fff !important;
}

.toolbar a.reply:hover,
.toolbar a.reply-all:hover {
    background: #388bfd !important;
}

/* Delete button - danger style */
.toolbar a.delete:hover {
    background: rgba(218,54,51,0.15) !important;
    color: #ff7b72 !important;
    border-color: rgba(218,54,51,0.3) !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary,
a.btn-primary,
button.btn-primary,
input.mainaction,
.formbuttons .mainaction {
    background: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
}

.btn-primary:hover,
a.btn-primary:hover {
    background: #0f766e !important;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
a.button:not(.compose):not(.btn-primary) {
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    color: var(--text2) !important;
    border-radius: var(--radius) !important;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    background: var(--bg4) !important;
    color: var(--text) !important;
    border-color: var(--border2) !important;
}

/* ── Inputs ───────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select,
.custom-select,
.form-control {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(31,111,235,0.15) !important;
    background: var(--bg3) !important;
}

.input-group-text {
    background: var(--bg3) !important;
    border-color: var(--border) !important;
    color: var(--text2) !important;
}

/* ── Search Bar ───────────────────────────────────────────── */
#quicksearchbar,
.searchbar {
    background: var(--bg2) !important;
}

#quicksearchbar input,
.searchbar input {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    color: var(--text) !important;
}

#quicksearchbar input:focus {
    border-color: var(--accent-blue) !important;
    background: var(--bg3) !important;
}

/* ── Dialogs & Popups ─────────────────────────────────────── */
.ui-dialog,
.ui-dialog .ui-dialog-content,
.popupmenu,
.popup,
.modal-content {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.ui-widget-overlay,
.modal-backdrop {
    background: rgba(0,0,0,0.7) !important;
}

.popupmenu ul li a,
.popup ul li a {
    color: var(--text2) !important;
}

.popupmenu ul li a:hover,
.popup ul li a:hover {
    background: var(--bg4) !important;
    color: var(--accent-teal) !important;
}

/* ── Login Page ───────────────────────────────────────────── */
.task-login #layout {
    background: var(--bg) !important;
}

.task-login #layout-content,
.task-login .content {
    background: var(--bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#login-form {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    max-width: 420px !important;
}

#login-form .input-group {
    border-color: var(--border) !important;
    background: var(--bg) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
}

#login-form .input-group input {
    border: none !important;
    background: var(--bg) !important;
}

#login-form .input-group .input-group-text {
    background: var(--bg) !important;
    border: none !important;
    color: var(--text3) !important;
}

#login-form #rcmloginsubmit,
#login-form .mainaction {
    background: var(--accent-teal) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
}

#login-form #rcmloginsubmit:hover {
    background: #0f766e !important;
}

/* ── Compose ──────────────────────────────────────────────── */
#composebody,
.html-editor iframe,
.mce-content-body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

#compose-attachments {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}

.compose-header-table td {
    border-color: var(--border) !important;
}

/* TinyMCE editor */
.mce-toolbar,
.mce-statusbar,
.mce-menubar,
.tox .tox-toolbar,
.tox .tox-menubar,
.tox .tox-statusbar {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}

.tox .tox-tbtn {
    color: var(--text2) !important;
}

.tox .tox-tbtn:hover {
    background: var(--bg4) !important;
    color: var(--text) !important;
}

/* ── Tables ───────────────────────────────────────────────── */
table.records-table,
table.propform {
    border-color: var(--border) !important;
}

table.records-table tr {
    border-color: var(--border) !important;
}

table.records-table tr:hover td {
    background: var(--bg2) !important;
}

table.records-table td,
table.propform td {
    color: var(--text2) !important;
    border-color: var(--border) !important;
}

table.records-table thead td,
table.records-table thead th {
    background: var(--bg2) !important;
    color: var(--text3) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
}

/* ── Misc ─────────────────────────────────────────────────── */
.scroller,
.boxcontent,
.listbox .scroller {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

.quota-info .bar {
    background: var(--bg4) !important;
}

.quota-info .value {
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue)) !important;
}

hr {
    border-color: var(--border) !important;
}

a {
    color: var(--accent-teal) !important;
}

a:hover {
    color: #5eead4 !important;
}

/* Flagged/starred */
.messagelist .flag.flagged span {
    color: var(--orange) !important;
}

/* Attachment icon */
.messagelist .attachment span {
    color: var(--text3) !important;
}

/* Selection checkbox */
.listing input[type="checkbox"],
.messagelist input[type="checkbox"] {
    accent-color: var(--accent-teal) !important;
}

/* Settings pages */
.preferences-headers td,
.preferences-headers th {
    border-color: var(--border) !important;
}

fieldset {
    border-color: var(--border) !important;
}

fieldset legend {
    color: var(--text2) !important;
}

/* Notification / alerts */
.ui.alert,
.notice {
    background: var(--bg3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.ui.alert.error,
.notice.error {
    background: rgba(218,54,51,0.15) !important;
    border-color: rgba(218,54,51,0.3) !important;
    color: #ff7b72 !important;
}

.ui.alert.confirmation,
.notice.confirmation {
    background: rgba(35,134,54,0.15) !important;
    border-color: rgba(35,134,54,0.3) !important;
    color: #7ee787 !important;
}

.ui.alert.warning,
.notice.warning {
    background: rgba(210,153,34,0.1) !important;
    border-color: rgba(210,153,34,0.3) !important;
    color: #e3b341 !important;
}

/* Responsive sidebar overlay */
@media screen and (max-width: 768px) {
    #layout > div {
        background: var(--bg) !important;
    }
    
    #layout-sidebar {
        background: var(--bg2) !important;
    }
}

/* Loading spinner */
.loading::after {
    border-color: var(--border) !important;
    border-top-color: var(--accent-teal) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Webmail Dark Theme — Calendar Plugin
   DO NOT override layout/sizing — let Roundcube elastic handle it.
   Only override colors and dark-mode styling.
   ══════════════════════════════════════════════════════════════════ */

/* ── Calendar list sidebar ────────────────────────────────── */
#calendarslist li,
#calendarslist .calendar {
    color: var(--text2);
}
#calendarslist li:hover,
#calendarslist .calendar:hover {
    background: var(--bg4);
    color: var(--text);
}
#calendarslist li.selected,
#calendarslist .calendar.selected {
    background: var(--bg3);
}
#calendars-content {
    background: var(--bg2);
}

/* ── FullCalendar table / grid colors ─────────────────────── */
.fc { background: var(--bg); color: var(--text); }
.fc table { border-color: var(--border); }
.fc th { border-color: var(--border); background: var(--bg2); color: var(--text2); }
.fc td { border-color: var(--border); }
.fc-widget-header { background: var(--bg2); border-color: var(--border); }
.fc-widget-content { border-color: var(--border); }

/* Day header row */
.fc-day-header {
    background: var(--bg2);
    color: var(--text2);
    font-weight: 600;
    font-size: 12px;
    padding: 8px 2px;
}

/* Time axis */
.fc-axis { color: var(--text3); font-size: 11px; }

/* Today */
.fc-today { background: rgba(13,148,136,0.06); }
td.fc-today { background: rgba(13,148,136,0.06); }

/* Now indicator */
.fc-now-indicator { border-color: var(--red); }

/* ── Events ───────────────────────────────────────────────── */
.fc-event {
    border-radius: 4px;
    border: none;
    font-size: 12px;
    padding: 2px 5px;
}
.fc-event .fc-title { color: #fff; }
.fc-event .fc-time { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ── Toolbar / FullCalendar buttons ───────────────────────── */
.fc-button {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: var(--radius);
}
.fc-button:hover { background: var(--bg4); color: var(--text); }
.fc-button.fc-state-active,
.fc-state-active {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: #fff;
}
.fc-state-disabled { opacity: 0.4; }

/* Hide FullCalendar built-in toolbar — elastic provides its own */
.fc-toolbar.fc-header-toolbar { display: none; }

/* ── Event edit / show dialogs ────────────────────────────── */
#eventedit, #eventshow {
    background: var(--bg2);
    color: var(--text);
    border-color: var(--border);
}
#eventedit label { color: var(--text2); }

.fc-popover {
    background: var(--bg2);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border-radius: var(--radius-lg);
}
.fc-popover .fc-header { background: var(--bg3); color: var(--text); }

/* ── Datepicker (mini calendar in sidebar) ────────────────── */
.ui-datepicker { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.ui-datepicker .ui-datepicker-header { background: var(--bg2); border-color: var(--border); color: var(--text); }
.ui-datepicker .ui-datepicker-title { color: var(--text); }
.ui-datepicker th { color: var(--text3); }
.ui-datepicker td a, .ui-datepicker td span { color: var(--text2); background: transparent; }
.ui-datepicker td a:hover { background: var(--bg4); color: var(--text); border-radius: var(--radius); }
.ui-datepicker .ui-datepicker-today a { background: rgba(13,148,136,0.15); color: var(--accent-teal); border-radius: var(--radius); font-weight: 600; }
.ui-datepicker .ui-state-active { background: var(--accent-teal); color: #fff; border-radius: var(--radius); }

/* ── Agenda / list view ───────────────────────────────────── */
.fc-list-view, .fc-list-table { background: var(--bg); border-color: var(--border); }
.fc-list-heading td { background: var(--bg2); color: var(--text2); font-weight: 600; }
.fc-list-item td { color: var(--text); border-color: var(--border); }
.fc-list-item:hover td { background: var(--bg2); }

/* ── Calendar event tabs ──────────────────────────────────── */
#eventtabs a { color: var(--text2); }
#eventtabs a.active { color: var(--accent-teal); border-bottom: 2px solid var(--accent-teal); }

/* ── Color picker ─────────────────────────────────────────── */
.minicolors-panel { background: var(--bg2); border: 1px solid var(--border); }

/* ── Watermark override ───────────────────────────────────── */
.task-mail #layout-content, .task-addressbook #layout-content, .task-settings #layout-content { background: var(--bg); }

/* ── FordServer Logo ──────────────────────────────────────── */
#logo { max-height: 36px; width: auto; object-fit: contain; padding: 4px 8px; }
.task-login #logo { max-height: 80px; max-width: 320px; width: auto; object-fit: contain; display: block; margin: 0 auto 24px; }
.minmodetoggle::before { content: "" !important; }

@media print {
    .fc, .fc-view { background: #fff; color: #000; }
    .fc th, .fc td { border-color: #ccc; }
}