/* ================================================================
   PastePanel Webmail — Theme Override
   Loads after: bootstrap.min.css → elastic/styles.css → this file
   Self-hosted Inter font. No CDN.
   ================================================================ */

/* ── Local Inter Font ──────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --pp-font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-bg:    #f6f8fc;
  --pp-w:     #ffffff;
  --pp-s1:    #f1f3f4;
  --pp-s2:    #e8eaed;
  --pp-s3:    #dadce0;
  --pp-bd:    #e2e8f0;
  --pp-bd2:   #c7d0dd;
  --pp-t0:    #202124;
  --pp-t1:    #3c4043;
  --pp-t2:    #5f6368;
  --pp-t3:    #80868b;
  --pp-t4:    #adb5bd;
  --pp-p:     #1a73e8;
  --pp-ph:    #1557b0;
  --pp-pl:    #e8f0fe;
  --pp-pa:    rgba(26,115,232,.12);
  --pp-red:   #d93025;
  --pp-rl:    #fce8e6;
  --pp-grn:   #188038;
  --pp-grl:   #e6f4ea;
  --pp-amb:   #f29900;
  --pp-hp:    56px;
  --pp-r:     6px;
  --pp-r2:    8px;
  --pp-r3:    12px;
  --pp-sh1:   0 1px 3px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.1);
  --pp-sh2:   0 4px 16px rgba(60,64,67,.2);
  --pp-sh3:   0 8px 28px rgba(60,64,67,.22);
}

/* ── Base ──────────────────────────────────────────────────────── */
html, body {
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased !important;
  background: var(--pp-bg) !important;
  color: var(--pp-t0) !important;
}

a { color: var(--pp-p) !important; }
a:hover { color: var(--pp-ph) !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pp-s2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--pp-bd2); }

/* ================================================================
   LAYOUT SHELL
   ================================================================ */
#layout { background: var(--pp-bg) !important; }

/* All panel headers */
#layout > div > .header {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  color: var(--pp-t0) !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: var(--pp-hp) !important;
  min-height: var(--pp-hp) !important;
  line-height: var(--pp-hp) !important;
}

#layout > div > .header .header-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pp-t0) !important;
}

#layout > div > .header a.button,
#layout > div > .header button {
  color: var(--pp-t2) !important;
  border-radius: var(--pp-r) !important;
}
#layout > div > .header a.button:hover,
#layout > div > .header button:hover {
  background: var(--pp-s1) !important;
  color: var(--pp-t0) !important;
}

#layout > div > .footer {
  background: var(--pp-w) !important;
  border-top: 1px solid var(--pp-bd) !important;
  color: var(--pp-t3) !important;
  font-family: var(--pp-font) !important;
}

/* ================================================================
   TASK MENU — Left icon navigation rail
   ================================================================ */

/* Outer wrapper — override elastic's dark #2f3a3f */
#layout-menu {
  background: var(--pp-w) !important;
}

/* Logo header area */
#layout-menu .popover-header {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
/* Hide elastic's default logo image */
#layout-menu .popover-header #logo,
#layout-menu .popover-header img {
  display: none !important;
}
/* Show actual site brand logo */
#layout-menu .popover-header::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  background-image: url('../images/brand-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Mobile: close button needs dark color on white bg */
html.layout-phone #layout-menu .popover-header {
  background: var(--pp-w) !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
}
html.layout-phone #layout-menu .popover-header a.button {
  color: var(--pp-t2) !important;
}

/* Inner taskmenu */
#taskmenu {
  background: var(--pp-w) !important;
}

/* Override elastic's white icon color — all taskmenu links at 481px+ */
@media screen and (min-width: 481px) {
  #taskmenu a,
  #taskmenu a.button {
    color: var(--pp-t2) !important;
    border-radius: var(--pp-r2) !important;
    margin: 2px 4px !important;
  }
  #taskmenu a.selected,
  #taskmenu a.button.selected {
    background: var(--pp-pl) !important;
    color: var(--pp-p) !important;
  }
  #taskmenu a:hover,
  #taskmenu a.button:hover {
    background: var(--pp-s1) !important;
    color: var(--pp-t0) !important;
  }
  #taskmenu a.selected:hover,
  #taskmenu a.button.selected:hover {
    background: var(--pp-pl) !important;
    color: var(--pp-p) !important;
  }
  /* Compose button — primary blue pill */
  #taskmenu .action-buttons a,
  #taskmenu .action-buttons a.button {
    background: var(--pp-p) !important;
    color: #fff !important;
    border-radius: var(--pp-r2) !important;
    margin: 8px 6px !important;
  }
  #taskmenu .action-buttons a:hover,
  #taskmenu .action-buttons a.button:hover {
    background: var(--pp-ph) !important;
    color: #fff !important;
  }
  /* Logout — red tint */
  #taskmenu a.logout,
  #taskmenu a.button.logout {
    color: var(--pp-red) !important;
  }
  #taskmenu a.logout:hover,
  #taskmenu a.button.logout:hover {
    background: var(--pp-rl) !important;
    color: var(--pp-red) !important;
  }
  /* Special-buttons container (About + Logout) at bottom */
  #taskmenu .special-buttons {
    background: var(--pp-w) !important;
    border-top: 1px solid var(--pp-bd) !important;
  }
}

/* Mobile taskmenu (<=480px) — light theme */
@media screen and (max-width: 480px) {
  #taskmenu a,
  #taskmenu a.button {
    color: var(--pp-t1) !important;
    border-bottom: 1px solid var(--pp-bd) !important;
  }
  #taskmenu a.selected,
  #taskmenu a.button.selected {
    color: var(--pp-p) !important;
    background: var(--pp-pl) !important;
  }
  #taskmenu a:hover,
  #taskmenu a.button:hover {
    background: var(--pp-s1) !important;
    color: var(--pp-t0) !important;
  }
  #taskmenu .action-buttons a,
  #taskmenu .action-buttons a.button {
    background: var(--pp-p) !important;
    color: #fff !important;
    border-radius: var(--pp-r2) !important;
  }
  #taskmenu a.logout { color: var(--pp-red) !important; }
}

/* ================================================================
   SIDEBAR — folder list
   ================================================================ */
#layout-sidebar {
  background: var(--pp-w) !important;
  border-right: 1px solid var(--pp-bd) !important;
}

.folderlist { padding: 8px !important; }
.folderlist li { margin: 1px 0 !important; }

.folderlist li a {
  display: flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 0 999px 999px 0 !important;
  margin-right: 6px !important;
  color: var(--pp-t1) !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: background .1s;
}
.folderlist li a:hover { background: var(--pp-s1) !important; color: var(--pp-t0) !important; text-decoration: none !important; }
.folderlist li.selected > a, .folderlist li.focused > a {
  background: var(--pp-pl) !important;
  color: var(--pp-p) !important;
  font-weight: 600 !important;
}

.folderlist li .unread {
  margin-left: auto !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--pp-t0) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.folderlist li.selected .unread { color: var(--pp-p) !important; }

/* Quota */
.quota-widget { padding: 8px 12px !important; }
.quota-widget .bar { background: var(--pp-s2) !important; border-radius: 99px !important; height: 4px !important; overflow: hidden !important; }
.quota-widget .bar div { background: var(--pp-p) !important; border-radius: 99px !important; }
.quota-widget .count { font-size: 11px !important; color: var(--pp-t3) !important; font-family: var(--pp-font) !important; }

/* ================================================================
   MESSAGE LIST
   ================================================================ */
#layout-list {
  background: var(--pp-w) !important;
  border-right: 1px solid var(--pp-bd) !important;
}

.messagelist { background: var(--pp-w) !important; border-collapse: collapse !important; }

.messagelist th {
  background: var(--pp-s1) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  color: var(--pp-t3) !important;
  font-family: var(--pp-font) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  height: 32px !important;
  padding: 0 10px !important;
}

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

.messagelist tr td {
  background: var(--pp-w) !important;
  color: var(--pp-t2) !important;
  height: 48px !important;
  padding: 0 10px !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

.messagelist tr:hover td { background: var(--pp-s1) !important; color: var(--pp-t0) !important; }
.messagelist tr.selected td, .messagelist tr.focused td { background: var(--pp-pl) !important; }
.messagelist tr.unread td { color: var(--pp-t0) !important; }
.messagelist tr.unread td.from, .messagelist tr.unread td.subject { font-weight: 700 !important; }
.messagelist td.date { color: var(--pp-t3) !important; font-size: 12px !important; }
.messagelist tr.deleted td { opacity: .4 !important; text-decoration: line-through !important; }
.messagelist span.flagged:before { color: var(--pp-amb) !important; }

/* ================================================================
   TOOLBAR
   ================================================================ */
.toolbar, .menu.toolbar {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
}

.toolbar a.button, .toolbar button.btn, .menu.toolbar a.button {
  color: var(--pp-t2) !important;
  border-radius: var(--pp-r) !important;
  font-family: var(--pp-font) !important;
  font-size: 13px !important;
}
.toolbar a.button:hover, .toolbar button.btn:hover { background: var(--pp-s1) !important; color: var(--pp-t0) !important; text-decoration: none !important; }
.toolbar a.button.disabled, .toolbar button:disabled { opacity: .3 !important; }
.toolbar a.button.reply, .toolbar a.button.forward { color: var(--pp-p) !important; }
.toolbar a.button.delete { color: var(--pp-red) !important; }

/* ================================================================
   SEARCH BAR
   ================================================================ */
.searchbar {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  padding: 8px 10px !important;
}

.searchbar form {
  display: flex !important;
  align-items: center !important;
  background: var(--pp-s1) !important;
  border: 1.5px solid transparent !important;
  border-radius: 24px !important;
  padding: 0 12px !important;
  height: 36px !important;
}
.searchbar form:focus-within {
  border-color: var(--pp-p) !important;
  background: var(--pp-w) !important;
  box-shadow: 0 0 0 3px var(--pp-pa) !important;
}
.searchbar form input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--pp-t0) !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  flex: 1 !important;
  padding: 0 4px !important;
  outline: none !important;
}
.searchbar form input::placeholder { color: var(--pp-t4) !important; }

/* ================================================================
   MESSAGE VIEW
   ================================================================ */
#layout-content { background: var(--pp-bg) !important; }

#message-header {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  padding: 20px 28px 16px !important;
}
#message-header > .subject {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--pp-t0) !important;
  margin-bottom: 12px !important;
  font-family: var(--pp-font) !important;
}
#message-header .addresses span.name { color: var(--pp-t0) !important; font-weight: 500 !important; }
#message-header .addresses span.email, #message-header .addresses a.email { color: var(--pp-t2) !important; }
#message-header .header-links a { color: var(--pp-t3) !important; border-radius: var(--pp-r) !important; }
#message-header .header-links a:hover { background: var(--pp-s1) !important; color: var(--pp-t0) !important; text-decoration: none !important; }

#message-objects, .message-part {
  background: var(--pp-w) !important;
  color: var(--pp-t0) !important;
  padding: 24px 28px !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ================================================================
   COMPOSE — Gmail clean style
   Keep Bootstrap grid intact, only override colors + spacing
   ================================================================ */

/* White background for compose content area */
.task-compose #layout-content,
#layout-content.listbox.selected { background: var(--pp-w) !important; }

#compose-content {
  background: var(--pp-w) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Compose form head (wraps headers + body) */
#compose-content .formcontent.scroller {
  background: var(--pp-w) !important;
  overflow: auto !important;
}

/* ── Header fields section ─────────────────────────────────────── */
#compose-headers {
  background: var(--pp-w) !important;
  border-bottom: 2px solid var(--pp-bd) !important;
  padding: 0 !important;
}

.compose-headers { padding: 0 !important; background: var(--pp-w) !important; }

/* Each field row — override bootstrap row margins */
.compose-headers .form-group.row {
  margin: 0 !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  min-height: 48px !important;
  align-items: center !important;
  background: var(--pp-w) !important;
  flex-wrap: nowrap !important;
}
.compose-headers .form-group.row:last-child { border-bottom: none !important; }

/* Field labels: From / To / Cc / Subject */
.compose-headers .col-2.col-form-label,
.compose-headers label.col-form-label,
.compose-headers .col-form-label {
  flex: 0 0 52px !important;
  max-width: 52px !important;
  width: 52px !important;
  padding: 0 8px 0 0 !important;
  color: var(--pp-t3) !important;
  font-family: var(--pp-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Field input column */
.compose-headers .col-10 {
  flex: 1 !important;
  max-width: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Input-group inside compose */
.compose-headers .input-group {
  flex-wrap: nowrap !important;
  align-items: center !important;
  border: none !important;
  background: transparent !important;
}

/* Text inputs inside compose header */
.compose-headers .form-control,
.compose-headers input[type=text],
.compose-headers input[type=email] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--pp-t0) !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  padding: 8px 4px !important;
  height: auto !important;
  min-height: 36px !important;
}
.compose-headers .form-control:focus,
.compose-headers input[type=text]:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Recipient token tags (tagedit plugin) */
.tagedit-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 36px !important;
  flex: 1 !important;
}

.tagedit-list li { list-style: none !important; }

.tagedit-list li.tagedit-listelement-old {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--pp-pl) !important;
  border: 1px solid rgba(26,115,232,.28) !important;
  border-radius: 999px !important;
  color: var(--pp-p) !important;
  font-family: var(--pp-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
}

.tagedit-list li.tagedit-listelement-old a.tagedit-close {
  color: var(--pp-t2) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.tagedit-list li.tagedit-listelement-old a.tagedit-close:hover { color: var(--pp-red) !important; }

.tagedit-list li.tagedit-listelement-new input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--pp-t0) !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  min-width: 100px !important;
  padding: 0 4px !important;
}

/* Input-group-append icons (+CC, add contact) */
.compose-headers .input-group-append { display: flex !important; align-items: center !important; }
.compose-headers .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--pp-t3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--pp-font) !important;
  padding: 0 6px !important;
  cursor: pointer !important;
}
.compose-headers .input-group-text:hover { color: var(--pp-p) !important; }

/* Subject row — bigger font */
#compose_subject .form-control,
#compose-subject {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--pp-t0) !important;
  font-family: var(--pp-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 8px 4px !important;
  height: auto !important;
}
#compose_subject .form-control:focus,
#compose-subject:focus { box-shadow: none !important; border: none !important; outline: none !important; }

/* ── Compose body ──────────────────────────────────────────────── */
#composebodycontainer {
  padding: 0 24px 12px !important;
  background: var(--pp-w) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

#composebody, #composebody.form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--pp-t0) !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  padding: 14px 0 !important;
  resize: none !important;
  min-height: 240px !important;
  width: 100% !important;
  flex: 1 !important;
}
#composebody:focus { box-shadow: none !important; outline: none !important; border: none !important; }

/* ── Compose bottom bar — Send button ──────────────────────────── */
.formcontainer .formbuttons,
#compose-content .formbuttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: var(--pp-w) !important;
  border-top: 1px solid var(--pp-bd) !important;
  margin: 0 !important;
}

/* SEND BUTTON */
.formcontainer .formbuttons .btn.btn-primary,
#compose-content .formbuttons .btn.btn-primary,
.formcontainer .formbuttons button.btn-primary {
  background: var(--pp-p) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 28px !important;
  height: 36px !important;
  line-height: 36px !important;
  box-shadow: var(--pp-sh1) !important;
  cursor: pointer !important;
  transition: background .12s, box-shadow .12s;
}
.formcontainer .formbuttons .btn.btn-primary:hover,
#compose-content .formbuttons .btn.btn-primary:hover {
  background: var(--pp-ph) !important;
  box-shadow: var(--pp-sh2) !important;
}

/* ── Compose toolbar ───────────────────────────────────────────── */
#messagetoolbar {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
}
#messagetoolbar a.button, #messagetoolbar button.btn {
  color: var(--pp-t2) !important;
  border-radius: var(--pp-r) !important;
  font-family: var(--pp-font) !important;
  font-size: 13px !important;
}
#messagetoolbar a.button:hover, #messagetoolbar button.btn:hover {
  background: var(--pp-s1) !important;
  color: var(--pp-t0) !important;
  text-decoration: none !important;
}
#messagetoolbar .spacer { flex: 1 !important; }

/* ── Compose sidebar ───────────────────────────────────────────── */
#layout-sidebar.sidebar-right {
  background: var(--pp-s1) !important;
  border-left: 1px solid var(--pp-bd) !important;
  border-right: none !important;
}

#compose-attachments .upload-form { padding: 14px !important; }
#compose-attachments .upload-form button.attach {
  width: 100% !important;
  background: var(--pp-w) !important;
  border: 1.5px dashed var(--pp-bd2) !important;
  color: var(--pp-t1) !important;
  border-radius: var(--pp-r2) !important;
  padding: 10px 14px !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
#compose-attachments .upload-form button.attach:hover {
  background: var(--pp-pl) !important;
  border-color: var(--pp-p) !important;
  color: var(--pp-p) !important;
}

.attachmentslist { list-style: none !important; padding: 0 12px !important; margin: 0 !important; }
.attachmentslist li {
  background: var(--pp-w) !important;
  border: 1px solid var(--pp-bd) !important;
  border-radius: var(--pp-r) !important;
  color: var(--pp-t1) !important;
  margin: 4px 0 !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-family: var(--pp-font) !important;
}
.attachmentslist li a.delete { color: var(--pp-red) !important; }

/* ================================================================
   GENERAL FORM CONTROLS (settings, dialogs, etc.)
   Bootstrap overrides with our palette
   ================================================================ */
.form-control {
  font-family: var(--pp-font) !important;
  font-size: 14px !important;
  color: var(--pp-t0) !important;
  background: var(--pp-w) !important;
  border: 1.5px solid var(--pp-bd) !important;
  border-radius: var(--pp-r) !important;
}
.form-control:focus {
  border-color: var(--pp-p) !important;
  box-shadow: 0 0 0 3px var(--pp-pa) !important;
  background: var(--pp-w) !important;
  color: var(--pp-t0) !important;
}
.form-control::placeholder { color: var(--pp-t4) !important; }

.input-group-text {
  background: var(--pp-s1) !important;
  border-color: var(--pp-bd) !important;
  color: var(--pp-t2) !important;
  font-family: var(--pp-font) !important;
}

select.form-control, select.custom-select {
  background: var(--pp-w) !important;
  color: var(--pp-t0) !important;
  border-color: var(--pp-bd) !important;
  font-family: var(--pp-font) !important;
}

label { font-family: var(--pp-font) !important; color: var(--pp-t1) !important; }

.col-form-label {
  color: var(--pp-t2) !important;
  font-family: var(--pp-font) !important;
  font-weight: 500 !important;
}

input[type=checkbox], input[type=radio] { accent-color: var(--pp-p) !important; }
input::placeholder, textarea::placeholder { color: var(--pp-t4) !important; }

/* ================================================================
   BUTTONS (Bootstrap 4 overrides)
   ================================================================ */
.btn {
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: var(--pp-r) !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
}
.btn-primary {
  background-color: var(--pp-p) !important;
  border-color: var(--pp-p) !important;
  color: #fff !important;
  box-shadow: var(--pp-sh1) !important;
}
.btn-primary:hover { background-color: var(--pp-ph) !important; border-color: var(--pp-ph) !important; box-shadow: var(--pp-sh2) !important; }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 3px var(--pp-pa) !important; }

.btn-secondary {
  background-color: var(--pp-w) !important;
  border-color: var(--pp-bd) !important;
  color: var(--pp-t1) !important;
  box-shadow: var(--pp-sh1) !important;
}
.btn-secondary:hover { background-color: var(--pp-s1) !important; border-color: var(--pp-bd2) !important; }

.btn-danger { background-color: var(--pp-red) !important; border-color: var(--pp-red) !important; }

.btn-link { color: var(--pp-p) !important; font-family: var(--pp-font) !important; }
.btn-link:hover { color: var(--pp-ph) !important; }

/* Roundcube a.button styles */
a.button.mainaction {
  background: var(--pp-p) !important;
  border: 1px solid var(--pp-p) !important;
  color: #fff !important;
  border-radius: var(--pp-r) !important;
  font-weight: 500 !important;
  font-family: var(--pp-font) !important;
}
a.button.mainaction:hover { background: var(--pp-ph) !important; text-decoration: none !important; }

a.button.cancel {
  background: var(--pp-w) !important;
  border: 1px solid var(--pp-bd) !important;
  color: var(--pp-t1) !important;
  border-radius: var(--pp-r) !important;
  font-family: var(--pp-font) !important;
}

/* Compose new */
.floating-action-buttons a.button {
  background: var(--pp-p) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 16px rgba(26,115,232,.4) !important;
  font-family: var(--pp-font) !important;
  font-weight: 600 !important;
}
.floating-action-buttons a.button:hover { background: var(--pp-ph) !important; text-decoration: none !important; }

/* ================================================================
   ALERTS
   ================================================================ */
.ui.alert {
  border-radius: var(--pp-r2) !important;
  font-family: var(--pp-font) !important;
  font-size: 13.5px !important;
  box-shadow: var(--pp-sh3) !important;
  border-left: 4px solid !important;
}
.ui.alert.info, .ui.alert.alert-info { background: #e8f0fe !important; border-color: var(--pp-p) !important; color: var(--pp-ph) !important; }
.ui.alert.confirmation, .ui.alert.alert-success { background: var(--pp-grl) !important; border-color: var(--pp-grn) !important; color: #145c2e !important; }
.ui.alert.error, .ui.alert.alert-danger { background: var(--pp-rl) !important; border-color: var(--pp-red) !important; color: #b3261e !important; }
.ui.alert.warning, .ui.alert.alert-warning { background: #fef7e0 !important; border-color: var(--pp-amb) !important; color: #7d5700 !important; }

/* ================================================================
   DIALOGS / MODALS
   ================================================================ */
.ui-dialog {
  background: var(--pp-w) !important;
  border: none !important;
  border-radius: var(--pp-r3) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.2) !important;
  overflow: hidden !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--pp-w) !important;
  border-bottom: 1px solid var(--pp-bd) !important;
  font-family: var(--pp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pp-t0) !important;
  padding: 16px 20px !important;
}
.ui-dialog .ui-dialog-titlebar-close { color: var(--pp-t3) !important; border-radius: var(--pp-r) !important; }
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--pp-s1) !important; color: var(--pp-t0) !important; }
.ui-dialog .ui-dialog-content { background: var(--pp-w) !important; color: var(--pp-t1) !important; font-family: var(--pp-font) !important; padding: 20px 24px !important; }
.ui-dialog .ui-dialog-buttonpane { background: var(--pp-s1) !important; border-top: 1px solid var(--pp-bd) !important; padding: 12px 20px !important; }
.ui-widget-overlay { background: rgba(32,33,36,.45) !important; }

/* ================================================================
   MENUS / DROPDOWNS
   ================================================================ */
.popover, ul.popupmenu, div.popupmenu {
  background: var(--pp-w) !important;
  border: none !important;
  border-radius: var(--pp-r2) !important;
  box-shadow: 0 8px 28px rgba(60,64,67,.22) !important;
  padding: 6px !important;
}

.menu li a, ul.popupmenu li a {
  color: var(--pp-t1) !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-family: var(--pp-font) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background .08s;
}
.menu li a:hover, ul.popupmenu li a:hover { background: var(--pp-s1) !important; color: var(--pp-t0) !important; text-decoration: none !important; }
.menu li.separator, ul.popupmenu li.separator { border-top: 1px solid var(--pp-bd) !important; margin: 4px 0 !important; }

/* ================================================================
   PAGE NAVIGATION
   ================================================================ */
.pagenav {
  background: var(--pp-w) !important;
  border-top: 1px solid var(--pp-bd) !important;
  padding: 6px 12px !important;
}
.pagenav a, .pagenav button { color: var(--pp-t3) !important; border-radius: var(--pp-r) !important; font-family: var(--pp-font) !important; }
.pagenav a:hover, .pagenav button:hover { background: var(--pp-s1) !important; color: var(--pp-t0) !important; text-decoration: none !important; }
.pagenav .pagenav-text { color: var(--pp-t3) !important; font-size: 12.5px !important; font-family: var(--pp-font) !important; }

/* ================================================================
   SETTINGS
   ================================================================ */
.settingsnav .listing li a { color: var(--pp-t1) !important; border-radius: var(--pp-r) !important; font-family: var(--pp-font) !important; }
.settingsnav .listing li.selected a, .settingsnav .listing li a:hover { background: var(--pp-pl) !important; color: var(--pp-p) !important; text-decoration: none !important; }

table.table th { background: var(--pp-s1) !important; color: var(--pp-t3) !important; border-color: var(--pp-bd) !important; font-family: var(--pp-font) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
table.table td { color: var(--pp-t1) !important; border-color: var(--pp-bd) !important; font-family: var(--pp-font) !important; }
table.table tr:hover td { background: var(--pp-s1) !important; }
table.table tr.selected td { background: var(--pp-pl) !important; }

/* Address book */
.contactlist td { color: var(--pp-t2) !important; border-color: var(--pp-bd) !important; }
.contactlist tr:hover td { background: var(--pp-s1) !important; }
.contactlist tr.selected td { background: var(--pp-pl) !important; }
#directorylist li a { color: var(--pp-t1) !important; }
#directorylist li.selected a, #directorylist li a:hover { background: var(--pp-pl) !important; color: var(--pp-p) !important; }

/* ================================================================
   MISC
   ================================================================ */
.badge, span.badge {
  background: var(--pp-p) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  font-family: var(--pp-font) !important;
}
fieldset { border: 1px solid var(--pp-bd) !important; border-radius: var(--pp-r2) !important; }
fieldset legend { color: var(--pp-t2) !important; font-family: var(--pp-font) !important; }
#userinfo, .header .userinfo { color: var(--pp-t2) !important; font-size: 12px !important; font-family: var(--pp-font) !important; }

/* PropForm (settings tables) */
.propform td.title label { color: var(--pp-t2) !important; font-family: var(--pp-font) !important; font-weight: 500 !important; }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
body.task-login {
  background: #eef2ff !important;
  min-height: 100vh !important;
}
body.task-login #layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  position: static !important;
  background: transparent !important;
}
body.task-login #layout-content,
body.task-login #layout-content.selected {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  padding: 40px 16px !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
  text-align: left !important;
  flex: unset !important;
}
.pp-login-card {
  width: 100% !important;
  max-width: 420px !important;
  background: var(--pp-w) !important;
  border: 1px solid var(--pp-bd) !important;
  border-radius: var(--pp-r3) !important;
  padding: 40px 36px 36px !important;
  box-shadow: 0 8px 40px rgba(60,64,67,.18) !important;
}
.pp-login-logo { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 32px !important; }
.pp-login-logoimg { width: 44px !important; height: 44px !important; border-radius: 10px !important; object-fit: contain !important; flex-shrink: 0 !important; }
.pp-login-brand { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.pp-login-name { font-size: 18px !important; font-weight: 700 !important; color: var(--pp-t0) !important; letter-spacing: -0.4px !important; font-family: var(--pp-font) !important; }
.pp-login-sub { font-size: 11px !important; color: var(--pp-t3) !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; font-family: var(--pp-font) !important; }

body.task-login #login-form { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; position: static !important; top: auto !important; width: 100% !important; max-width: none !important; }
body.task-login #login-form table, body.task-login #login-form tbody { display: block !important; width: 100% !important; }
body.task-login #login-form tr { display: block !important; margin-bottom: 18px !important; }
body.task-login #login-form td { display: block !important; width: 100% !important; padding: 0 !important; border: none !important; }
body.task-login #login-form td.title { margin-bottom: 6px !important; }
body.task-login #login-form td.title label { display: block !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--pp-t2) !important; font-family: var(--pp-font) !important; margin: 0 0 6px !important; }

body.task-login #login-form td.input input,
body.task-login #login-form td.input input.form-control {
  display: block !important; width: 100% !important; height: 46px !important;
  padding: 0 14px !important; font-size: 14px !important; font-family: var(--pp-font) !important;
  background: var(--pp-w) !important; border: 1.5px solid var(--pp-bd) !important;
  border-radius: var(--pp-r2) !important; color: var(--pp-t0) !important;
  box-sizing: border-box !important;
}
body.task-login #login-form td.input input:focus,
body.task-login #login-form td.input input.form-control:focus {
  border-color: var(--pp-p) !important;
  box-shadow: 0 0 0 3px var(--pp-pa) !important;
  outline: none !important;
}
body.task-login p.formbuttons { margin: 24px 0 0 !important; padding: 0 !important; }
body.task-login #rcmloginsubmit,
body.task-login #login-form button.button.mainaction {
  display: block !important; width: 100% !important; height: 46px !important;
  background: var(--pp-p) !important; border: none !important; border-radius: var(--pp-r2) !important;
  color: #fff !important; font-family: var(--pp-font) !important; font-size: 15px !important;
  font-weight: 600 !important; cursor: pointer !important; box-shadow: var(--pp-sh1) !important;
  transition: background .15s, box-shadow .15s;
}
body.task-login #rcmloginsubmit:hover,
body.task-login #login-form button.button.mainaction:hover { background: var(--pp-ph) !important; box-shadow: var(--pp-sh2) !important; }
body.task-login #login-footer { color: var(--pp-t3) !important; font-size: 12px !important; text-align: center !important; margin-top: 24px !important; padding-top: 18px !important; border-top: 1px solid var(--pp-bd) !important; font-family: var(--pp-font) !important; }
body.task-login #logo { display: none !important; }

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
  #taskmenu, #layout-sidebar, .toolbar, .pagenav { display: none !important; }
}