/*
 * My Clinic — Roundcube Elastic Skin Theme
 * Correct selectors for Roundcube 1.5+ Elastic skin
 */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --mc-purple-darkest: #2c1640;
  --mc-purple-dark:    #472557;
  --mc-purple:         #582e6b;
  --mc-purple-mid:     #6d3d83;
  --mc-purple-soft:    #9b6eb5;
  --mc-purple-pale:    #d5b8e6;
  --mc-purple-tint:    #f4edf7;
  --mc-gold-deep:      #b9730c;
  --mc-gold:           #c08329;
  --mc-gold-mid:       #d19f48;
  --mc-gold-light:     #e8c278;
  --mc-gold-pale:      #f1ddb5;
  --mc-gold-ghost:     #faf4e8;
  --mc-white:          #ffffff;
  --mc-text:           #1e0e2b;
}

/* ============================================================
   ELASTIC SKIN — HEADER / APP BAR
   ============================================================ */
#layout > #header,
#header {
  background-color: var(--mc-purple) !important;
  border-bottom: 2px solid var(--mc-gold) !important;
}

/* Logo / product name */
#header .logo {
  color: var(--mc-gold-pale) !important;
}

/* Top toolbar icons (settings, logout) */
#header .buttons a,
#header a.button,
#header button {
  color: rgba(255,255,255,0.85) !important;
}

#header .buttons a:hover,
#header button:hover {
  color: var(--mc-gold-pale) !important;
  background-color: var(--mc-purple-mid) !important;
}

/* ============================================================
   ELASTIC — LEFT SIDEBAR (task switcher)
   ============================================================ */
#layout #sidebar,
#taskmenu {
  background-color: var(--mc-purple-darkest) !important;
  border-right: 1px solid var(--mc-purple-dark) !important;
}

/* Task menu icons (Mail, Contacts, Calendar, Settings) */
#taskmenu a {
  color: rgba(255,255,255,0.70) !important;
  border-left: 3px solid transparent !important;
}

#taskmenu a:hover {
  background-color: var(--mc-purple-dark) !important;
  color: var(--mc-white) !important;
  border-left-color: var(--mc-gold-mid) !important;
}

#taskmenu a.selected,
#taskmenu a.active {
  background-color: var(--mc-purple) !important;
  color: var(--mc-gold-pale) !important;
  border-left-color: var(--mc-gold) !important;
}

#taskmenu a span.inner {
  color: inherit !important;
}

/* ============================================================
   ELASTIC — FOLDER LIST PANEL
   ============================================================ */
#layout #folderlist-box,
#layout #folderslist,
.folderlist-box {
  background-color: var(--mc-purple-dark) !important;
}

#folderlist-title,
.folderlist-title {
  background-color: var(--mc-purple-darkest) !important;
  color: var(--mc-gold-pale) !important;
  border-bottom: 1px solid var(--mc-purple-mid) !important;
}

/* Folder list items */
#mailboxlist li a,
#mailboxlist .mailbox a,
ul#mailboxlist a {
  color: rgba(255,255,255,0.75) !important;
}

#mailboxlist li a:hover,
#mailboxlist .mailbox a:hover {
  background-color: var(--mc-purple) !important;
  color: var(--mc-white) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.focused > a,
#mailboxlist .mailbox.selected > a {
  background-color: var(--mc-purple-mid) !important;
  color: var(--mc-gold-pale) !important;
  border-left: 3px solid var(--mc-gold) !important;
}

/* Unread count badge */
#mailboxlist .unreadcount,
.unreadcount {
  background-color: var(--mc-gold) !important;
  color: var(--mc-purple-darkest) !important;
  border-radius: 10px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* Search box inside folder panel */
#mailsearchform input,
#foldersearch input {
  border-color: var(--mc-purple-mid) !important;
  background-color: var(--mc-purple-darkest) !important;
  color: var(--mc-white) !important;
}

#mailsearchform input::placeholder,
#foldersearch input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* ============================================================
   ELASTIC — TOOLBAR (message actions)
   ============================================================ */
#layout #toolbar,
.toolbar {
  background-color: var(--mc-purple) !important;
  border-bottom: 1px solid var(--mc-purple-mid) !important;
}

.toolbar a.button,
.toolbar button,
.toolbar .button {
  color: rgba(255,255,255,0.88) !important;
}

.toolbar a.button:hover,
.toolbar button:hover,
.toolbar .button:hover {
  background-color: var(--mc-purple-mid) !important;
  color: var(--mc-gold-pale) !important;
}

.toolbar a.button.selected,
.toolbar a.button.active,
.toolbar button.active {
  color: var(--mc-gold-pale) !important;
}

/* Compose button — make it gold */
.toolbar a.compose,
.toolbar button.compose,
#compose-button {
  background-color: var(--mc-gold) !important;
  color: var(--mc-purple-darkest) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

.toolbar a.compose:hover,
#compose-button:hover {
  background-color: var(--mc-gold-mid) !important;
}

/* ============================================================
   ELASTIC — MESSAGE LIST
   ============================================================ */
#messagelist,
#layout #messagelist,
.messagelist {
  background-color: var(--mc-white) !important;
}

/* List header row */
#messagelist thead th,
.messagelist thead th {
  background-color: var(--mc-purple-tint) !important;
  color: var(--mc-purple-dark) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid var(--mc-purple-pale) !important;
}

/* Message rows */
#messagelist tbody tr,
.messagelist tbody tr {
  border-bottom: 1px solid var(--mc-purple-tint) !important;
}

#messagelist tbody tr:hover,
.messagelist tbody tr:hover {
  background-color: var(--mc-purple-tint) !important;
}

#messagelist tbody tr.selected,
.messagelist tbody tr.selected {
  background-color: #e8d5f5 !important;
  outline: none !important;
}

/* Unread messages */
#messagelist tbody tr.unread td,
.messagelist tbody tr.unread td {
  font-weight: 700 !important;
  color: var(--mc-purple-dark) !important;
}

/* Focused row */
#messagelist tbody tr.focused,
.messagelist tbody tr.focused {
  background-color: #e0c8f0 !important;
}

/* ============================================================
   ELASTIC — MESSAGE VIEW / PREVIEW PANE
   ============================================================ */
#messagecontframe,
#messagecontent {
  background-color: var(--mc-white) !important;
}

/* Message header (From, Subject, Date) */
.message-header,
#message-header {
  background-color: var(--mc-gold-ghost) !important;
  border-bottom: 2px solid var(--mc-gold-pale) !important;
  padding: 14px 18px !important;
}

.message-header .subject,
#message-header .subject,
h2.subject {
  color: var(--mc-purple) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.message-header .headers td.header-title,
#message-header .header-title {
  color: var(--mc-purple-soft) !important;
  font-weight: 600 !important;
}

.message-header .headers td.header-value a,
#message-header .header-value a {
  color: var(--mc-gold-deep) !important;
}

/* Message body */
#messagebody,
.message-body {
  background-color: var(--mc-white) !important;
}

/* ============================================================
   ELASTIC — COMPOSE WINDOW
   ============================================================ */
#compose-content,
#compose #compose-subject {
  background-color: var(--mc-white) !important;
}

#compose .compose-header,
#compose .headers-row {
  background-color: var(--mc-gold-ghost) !important;
  border-bottom: 1px solid var(--mc-gold-pale) !important;
}

/* Header field labels (To:, Cc:, Subject:) */
#compose label,
#compose .compose-header label {
  color: var(--mc-purple-soft) !important;
  font-weight: 600 !important;
}

/* ============================================================
   ELASTIC — ALL INPUT FIELDS
   ============================================================ */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=url],
textarea,
select {
  border: 1px solid var(--mc-purple-pale) !important;
  border-radius: 5px !important;
  color: var(--mc-text) !important;
  background-color: var(--mc-white) !important;
  transition: border-color .15s, box-shadow .15s;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  border-color: var(--mc-purple) !important;
  box-shadow: 0 0 0 3px rgba(88,46,107,0.15) !important;
  outline: none !important;
}

/* ============================================================
   ELASTIC — BUTTONS
   ============================================================ */
/* Primary action (Send, Save) */
.btn.btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary {
  background-color: var(--mc-purple) !important;
  border-color: var(--mc-purple-dark) !important;
  color: var(--mc-white) !important;
}

.btn.btn-primary:hover,
button.btn-primary:hover {
  background-color: var(--mc-purple-mid) !important;
  border-color: var(--mc-purple-mid) !important;
}

/* Secondary */
.btn.btn-secondary,
button.btn-secondary {
  border-color: var(--mc-purple-pale) !important;
  color: var(--mc-purple) !important;
}

.btn.btn-secondary:hover {
  background-color: var(--mc-purple-tint) !important;
}

/* Danger (Delete) */
.btn.btn-danger,
button.btn-danger {
  background-color: #c0392b !important;
  border-color: #a93226 !important;
}

/* ============================================================
   ELASTIC — LINKS
   ============================================================ */
a {
  color: var(--mc-purple) !important;
}

a:hover {
  color: var(--mc-gold-deep) !important;
}

/* ============================================================
   ELASTIC — DROPDOWN MENUS
   ============================================================ */
.popupmenu,
ul.popupmenu,
.dropdown-menu {
  background-color: var(--mc-purple-darkest) !important;
  border: 1px solid var(--mc-purple-mid) !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 24px rgba(44,22,64,0.5) !important;
}

.popupmenu a,
ul.popupmenu li a,
.dropdown-menu a {
  color: rgba(255,255,255,0.82) !important;
  padding: 8px 18px !important;
}

.popupmenu a:hover,
ul.popupmenu li a:hover,
.dropdown-menu a:hover {
  background-color: var(--mc-purple) !important;
  color: var(--mc-gold-pale) !important;
  text-decoration: none !important;
}

.popupmenu li.separator,
ul.popupmenu li.separator {
  border-top: 1px solid var(--mc-purple-mid) !important;
}

/* ============================================================
   ELASTIC — SEARCH BAR (top of message list)
   ============================================================ */
#searchbar,
#search-bar,
.searchbar {
  background-color: var(--mc-purple) !important;
  border-bottom: 1px solid var(--mc-purple-mid) !important;
}

#searchbar input,
.searchbar input,
#quicksearchbar input {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 20px !important;
  color: var(--mc-white) !important;
  padding: 5px 14px !important;
}

#searchbar input::placeholder,
.searchbar input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

/* ============================================================
   ELASTIC — NOTIFICATIONS / ALERTS
   ============================================================ */
#notifications .notification,
.notification {
  border-radius: 6px !important;
}

#notifications .notification.notice,
.notification.notice {
  background-color: var(--mc-purple-tint) !important;
  border-left: 4px solid var(--mc-purple) !important;
  color: var(--mc-purple-dark) !important;
}

#notifications .notification.confirmation,
.notification.confirmation {
  background-color: var(--mc-gold-ghost) !important;
  border-left: 4px solid var(--mc-gold) !important;
  color: var(--mc-gold-deep) !important;
}

#notifications .notification.error,
.notification.error {
  border-left: 4px solid #c0392b !important;
}

/* ============================================================
   ELASTIC — DIALOGS / MODALS
   ============================================================ */
.ui-dialog {
  border: 1px solid var(--mc-purple-pale) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 50px rgba(44,22,64,0.4) !important;
  overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
  background-color: var(--mc-purple) !important;
  border-bottom: 2px solid var(--mc-gold) !important;
  color: var(--mc-gold-pale) !important;
  padding: 12px 16px !important;
}

.ui-dialog .ui-dialog-title {
  color: var(--mc-gold-pale) !important;
  font-weight: 700 !important;
}

.ui-dialog .ui-dialog-titlebar-close {
  color: var(--mc-gold-light) !important;
}

/* ============================================================
   ELASTIC — CONTACTS
   ============================================================ */
#contacts-table tr:hover,
.contact-list tr:hover {
  background-color: var(--mc-purple-tint) !important;
}

#contacts-table tr.selected,
.contact-list tr.selected {
  background-color: #e8d5f5 !important;
}

/* ============================================================
   ELASTIC — SETTINGS SECTIONS
   ============================================================ */
#settings-sections li a,
.settings-sections li a {
  color: rgba(255,255,255,0.75) !important;
}

#settings-sections li a:hover,
.settings-sections li a:hover {
  background-color: var(--mc-purple) !important;
  color: var(--mc-white) !important;
}

#settings-sections li.selected a,
.settings-sections li.selected a {
  background-color: var(--mc-purple-mid) !important;
  color: var(--mc-gold-pale) !important;
  border-left: 3px solid var(--mc-gold) !important;
}

/* ============================================================
   ELASTIC — STATUS / LOADING
   ============================================================ */
#loading-status,
.loading-status {
  color: var(--mc-purple-soft) !important;
}

/* Spinner / throbber */
.spinner {
  border-top-color: var(--mc-purple) !important;
  border-right-color: var(--mc-gold) !important;
}

/* ============================================================
   ELASTIC — SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mc-purple-tint); }
::-webkit-scrollbar-thumb {
  background-color: var(--mc-purple-pale);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--mc-purple-soft);
}

/* ============================================================
   ELASTIC — ATTACHMENT CHIPS
   ============================================================ */
.attachment-name,
.attachments .attachment {
  background-color: var(--mc-gold-ghost) !important;
  border: 1px solid var(--mc-gold-pale) !important;
  border-radius: 4px !important;
  color: var(--mc-gold-deep) !important;
}

/* ============================================================
   ELASTIC — RESPONSIVE / MOBILE
   ============================================================ */
@media (max-width: 768px) {
  #layout #sidebar,
  #taskmenu {
    background-color: var(--mc-purple-darkest) !important;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #header, #sidebar, .toolbar, #taskmenu { display: none !important; }
  body { background: white !important; color: black !important; }
}