/* =====================================================
   Avuz Conecta — Roundcube UI overrides
   Primary: #2bb5e3  Accent: #d2e314  BG: #f0f4f8
   ===================================================== */

/* ── Logo ─────────────────────────────────────────── */
img#logo {
  content: url('/skins/avuz/images/icon.png');
  max-height: 36px;
  width: auto;
}

/* ── Page background ──────────────────────────────── */
body {
  background-color: #f0f4f8;
}

/* ── Task menu (left icon rail) ───────────────────── */
#layout-menu,
#taskmenu,
#taskmenu .special-buttons {
  background-color: #2f3a3f !important;
}

#layout-menu {
  border-radius: 0 16px 16px 0;
  overflow: hidden;
}

#taskmenu {
  padding: 8px 4px;
  height: 100% !important;
  position: relative !important;
}

#taskmenu a {
  color: rgba(255,255,255,0.7) !important;
  border-radius: 12px !important;
  margin: 2px 4px !important;
  font-size: 0.75rem !important;
  min-width: unset !important;
  max-width: unset !important;
  width: calc(100% - 8px) !important;
}

#taskmenu a:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

#taskmenu a.selected {
  background-color: rgba(43,181,227,0.25) !important;
  color: #2bb5e3 !important;
}

#taskmenu .special-buttons a {
  font-size: 0.75rem !important;
  padding: 0.45rem !important;
}

#taskmenu a.compose {
  background-color: #d2e314 !important;
  color: #333 !important;
  border-radius: 12px !important;
}

#taskmenu a.compose:hover {
  background-color: #bccf10 !important;
}

#taskmenu a.logout,
#taskmenu a.logout:hover {
  color: rgba(255,255,255,0.7) !important;
}

#taskmenu a.logout:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* ── Three-panel card layout ──────────────────────── */
#layout {
  gap: 8px !important;
  padding: 8px 8px 8px 0 !important;
  background-color: #f0f4f8 !important;
  align-items: stretch !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
  background: #fff !important;
  border: none !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
  overflow: hidden !important;
}

/* Issue 3: inner message body wrapper must not have its own border-radius */
#layout-content .message-content,
#layout-content .rcmBody,
#layout-content .message-partheader,
#layout-content > .content,
#layout-content > .scroller {
  border-radius: 0 !important;
  background: #fff !important;
}

/* Remove hard panel separators */
#layout-sidebar {
  border-right: none !important;
}

#layout-list {
  border-right: none !important;
}

/* ── Panel headers ────────────────────────────────── */
#layout > div > .header {
  background-color: #fff !important;
  border-bottom: 1px solid #eef1f5 !important;
}

/* ── Search bar ───────────────────────────────────── */
.searchbar {
  background-color: #f6f8fb !important;
  border-bottom: 1px solid #eef1f5 !important;
}

.searchbar input {
  border-radius: 20px !important;
  background: #eef1f5 !important;
  border: none !important;
  padding: 4px 12px !important;
}

.searchbar input:focus {
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(43,181,227,0.2) !important;
  border: none !important;
}

/* ── Folder list ──────────────────────────────────── */
.folderlist li > a,
.treelist li > a {
  border-radius: 8px !important;
  margin: 1px 6px !important;
  padding-left: 10px !important;
}

.folderlist li > a:hover,
.treelist li > a:hover {
  background-color: rgba(43,181,227,0.08) !important;
}

.folderlist li.selected > a,
.treelist li.selected > a,
.folderlist li.focused > a,
.treelist li.focused > a {
  background-color: rgba(43,181,227,0.14) !important;
  color: #1a9bc5 !important;
}

.unreadcount {
  background-color: #2bb5e3 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
  min-width: 18px !important;
}

/* ── Message list ─────────────────────────────────── */
.messagelist tbody tr td {
  border-bottom: 1px solid #f4f6f9 !important;
}

.messagelist tbody tr:hover td {
  background-color: rgba(43,181,227,0.05) !important;
}

.messagelist tbody tr.selected td {
  background-color: rgba(43,181,227,0.10) !important;
}

.messagelist tbody tr.focused td {
  background-color: rgba(43,181,227,0.14) !important;
  border-left: 3px solid #2bb5e3 !important;
}

.messagelist .unread .subject a,
table.listing .unread span.subject {
  color: #1a9bc5 !important;
  font-weight: 600 !important;
}

/* ── Links ────────────────────────────────────────── */
a, a:hover {
  color: #2bb5e3;
}

/* ── Input focus ──────────────────────────────────── */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #2bb5e3 !important;
  box-shadow: 0 0 0 0.2rem rgba(43,181,227,0.25) !important;
}

input.form-control,
textarea.form-control,
select.form-control {
  border-radius: 8px !important;
}

/* Recipient input (Para/To, Cc, Bcc) */
.recipient-input {
  border-radius: 8px 0 0 8px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Input-group: remove corners adjacent to prepend/append buttons */
.input-group > input.form-control,
.input-group > .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Restore right rounding when there's no append */
.input-group > input.form-control:last-child,
.input-group > .form-control:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Restore left rounding when there's no prepend */
.input-group > input.form-control:first-child,
.input-group > .form-control:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.input-group-prepend .input-group-text,
.input-group-prepend .btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-append .input-group-text,
.input-group-append .btn,
.input-group-append button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ── Primary buttons ──────────────────────────────── */
.button.mainaction,
.button.submit,
a.button.mainaction {
  background-color: #2bb5e3 !important;
  border-color: #2bb5e3 !important;
  color: #fff !important;
  border-radius: 50px !important;
}

.button.mainaction:hover,
.button.submit:hover {
  background-color: #1f9fcb !important;
  border-color: #1f9fcb !important;
}

/* ── Login submit button (lime accent) ───────────── */
#rcmloginsubmit {
  background-color: #d2e314 !important;
  border-color: #d2e314 !important;
  color: #333 !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  width: 100% !important;
  padding: 10px !important;
  font-size: 1rem !important;
}

#rcmloginsubmit:hover {
  background-color: #bccf10 !important;
  border-color: #bccf10 !important;
}

/* ── Login form card ──────────────────────────────── */
#login-form {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(43,181,227,0.12) !important;
  padding: 32px !important;
}

/* ── Popover menus ────────────────────────────────── */
.popover,
.dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
  border: 1px solid #eef1f5 !important;
}

.popover .menu a:hover,
.dropdown-item:hover {
  background-color: rgba(43,181,227,0.08) !important;
  color: #1a9bc5 !important;
}

/* Issue 5: jQueryUI option dialogs */
.ui-dialog {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  border: none !important;
}

.ui-dialog .ui-dialog-titlebar {
  border-radius: 0 !important;
}

.ui-dialog .ui-dialog-buttonpane {
  border-radius: 0 !important;
}

/* Issue 4: hide the light/dark theme toggle (dark mode disabled in skin meta) and About button */
#taskmenu a.darkmode,
#taskmenu a.theme,
#taskmenu a.about {
  display: none !important;
}

/* Fix gap caused by special-buttons being position:absolute — make it flow inline */
#taskmenu .special-buttons {
  position: static !important;
}


/* ── Toolbar ──────────────────────────────────────── */
.toolbar .button:hover,
.toolbar a:hover {
  background-color: rgba(43,181,227,0.08) !important;
  border-radius: 8px !important;
  color: #2bb5e3 !important;
}

/* ── Checkboxes ───────────────────────────────────── */
input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
  background-color: #2bb5e3 !important;
  border-color: #2bb5e3 !important;
}

/* ── Quota bar ────────────────────────────────────── */
.quota-value,
.progressbar .bar {
  background-color: #2bb5e3 !important;
}

/* =====================================================
   Login page — ConectaMail mockup
   Single white card wrapping logo + form on a grey page.
   All rules .task-login-scoped so the in-app UI is untouched.
   ===================================================== */

.task-login body {
  background-color: #f1f1f1 !important;
}

/* Center the card on the grey page */
.task-login #layout {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  background-color: #f1f1f1 !important;
}

/* The single white card — wraps logo + form */
.task-login #layout-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 380px !important;
  background: #fff !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06) !important;
  padding: 48px 40px !important;
  text-align: center !important;
  overflow: visible !important;
}

/* ConectaMail wordmark logo, inside the card top */
.task-login img#logo {
  content: url('/skins/avuz/images/login-logo.png') !important;
  position: static !important;
  top: auto !important;
  display: block !important;
  margin: 0 auto 32px !important;
  max-height: none !important;
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
}

/* Form is transparent and full width inside the card */
.task-login #login-form {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 18px !important;
}

/* Flatten the table layout into a stacked column */
.task-login #login-form table,
.task-login #login-form tbody,
.task-login #login-form tr,
.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

.task-login #login-form .formbuttons {
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

.task-login #login-form td.title {
  display: none !important;
}

.task-login #login-form tr {
  margin-bottom: 16px !important;
}

/* Mockup fields are plain pills — hide the leading user/lock icons */
.task-login #login-form .input-group-prepend,
.task-login #login-form .input-group-text {
  display: none !important;
}

.task-login #login-form .input-group {
  display: block !important;
}

/* Light grey pill inputs */
.task-login #rcmloginuser,
.task-login #rcmloginpwd {
  background-color: #ededed !important;
  border: none !important;
  border-radius: 22px !important;
  padding: 8px 18px !important;
  height: auto !important;
  width: 100% !important;
  box-shadow: none !important;
  color: #333 !important;
}

.task-login #rcmloginuser:focus,
.task-login #rcmloginpwd:focus {
  background-color: #e8e8e8 !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

/* Black submit pill (overrides the lime accent for login) */
.task-login #rcmloginsubmit {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  width: 100% !important;
  padding: 14px 0 !important;
}

.task-login #rcmloginsubmit:hover {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

/* Hide the footer (product name line) */
.task-login #login-footer {
  display: none !important;
}

/* ── Password-change loading overlay ──────────────── */
.avuz-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.avuz-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 36px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.avuz-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ededed;
  border-top-color: #2bb5e3;
  border-radius: 50%;
  animation: avuz-spin 0.8s linear infinite;
}

.avuz-loading-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

@keyframes avuz-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Scrollbars ───────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(43,181,227,0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #2bb5e3;
}