/* ============================================
   CONTACTS PAGE - Google Contacts Style
   Override elastic-base for addressbook task
   ============================================ */

/* ===========================================
   HEADERS - Shrink from 58px to 42px
   =========================================== */
body.task-addressbook #layout > div > .header {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  line-height: 42px !important;
  padding: 0 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.task-addressbook #layout > div > .header a.button:before {
  height: 42px !important;
  line-height: 42px !important;
  font-size: 1.1rem !important;
}

body.task-addressbook #layout > div > .header .header-title {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Toolbar inside headers */
body.task-addressbook .menu.toolbar li,
body.task-addressbook .menu.toolbar a {
  height: 42px !important;
}

body.task-addressbook .menu.toolbar a {
  padding: 0 4px !important;
  min-width: 32px !important;
  max-width: 40px !important;
}

body.task-addressbook .menu.toolbar a:before {
  height: 1.25rem !important;
  line-height: 42px !important;
  font-size: 15px !important;
}

body.task-addressbook .menu.toolbar .dropbutton a.dropdown:before {
  line-height: 42px !important;
}

body.task-addressbook .menu.toolbar > .spacer {
  width: 2px !important;
}

/* ===========================================
   SEARCH BAR - Compact, Google style
   =========================================== */
body.task-addressbook #layout-list .searchbar,
body.task-addressbook #layout-list .searchbar.menu {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 36px !important;
  padding: 2px 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid #dadce0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

body.task-addressbook #layout-list .searchbar form {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
}

body.task-addressbook #layout-list .searchbar form:before {
  height: 30px !important;
  line-height: 30px !important;
  font-size: 13px !important;
  color: #5f6368 !important;
}

body.task-addressbook #layout-list .searchbar input {
  height: 28px !important;
  line-height: 28px !important;
  font-size: 13px !important;
  padding: 0 6px !important;
  border: none !important;
  background: transparent !important;
}

body.task-addressbook #layout-list .searchbar a {
  height: 30px !important;
}

body.task-addressbook #layout-list .searchbar a:before {
  height: 30px !important;
  line-height: 30px !important;
  font-size: 13px !important;
}

/* Search options panel - compact when shown */
body.task-addressbook #searchmenu {
  padding: 6px 12px 8px !important;
  border-bottom: 1px solid #dadce0 !important;
  background: #f8f9fa !important;
}

body.task-addressbook #searchmenu .formcontent {
  padding: 0 !important;
}

body.task-addressbook #searchmenu .proplist {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.task-addressbook #searchmenu .proplist li {
  line-height: 1.5rem !important;
  margin-bottom: 0 !important;
}

body.task-addressbook #searchmenu .proplist li label {
  font-size: 12px !important;
  color: #5f6368 !important;
  line-height: 1.5rem !important;
}

body.task-addressbook #searchmenu .formbuttons {
  margin-top: 4px !important;
  padding: 0 !important;
}

body.task-addressbook #searchmenu .formbuttons button {
  height: 26px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  line-height: 26px !important;
  border-radius: 13px !important;
}

/* ===========================================
   SIDEBAR - Directory/Groups list
   =========================================== */
body.task-addressbook #layout-sidebar {
  min-width: 180px !important;
  max-width: 200px !important;
  flex: 2 !important;
}

body.task-addressbook #layout-sidebar > .header {
  border-bottom: 1px solid #dadce0 !important;
}

body.task-addressbook #layout-sidebar .header .header-title {
  text-align: left !important;
  padding-left: 8px !important;
}

body.task-addressbook #layout-sidebar .scroller {
  padding: 4px 0 !important;
}

/* Directory list items */
body.task-addressbook #directorylist li > a,
body.task-addressbook #layout-sidebar .treelist li > a,
body.task-addressbook #savedsearchlist li > a {
  line-height: 32px !important;
  font-size: 13px !important;
  padding: 0 12px 0 12px !important;
}

body.task-addressbook #layout-sidebar .listing li {
  border-color: transparent !important;
  line-height: 32px !important;
}

body.task-addressbook #layout-sidebar .listing li a:before {
  margin-right: 8px !important;
  font-size: 14px !important;
}

/* Selected directory - Google-style pill */
body.task-addressbook #layout-sidebar .listing li.selected > a,
body.task-addressbook #layout-sidebar .treelist li.selected > a,
body.task-addressbook #layout-sidebar .treelist li.selected > div > a {
  background-color: #d3e3fd !important;
  color: #0b57d0 !important;
  border-radius: 0 16px 16px 0 !important;
  font-weight: 500 !important;
  border-left: 0 !important;
}

/* ===========================================
   CONTACT LIST - Clean rows
   =========================================== */
body.task-addressbook #layout-list {
  min-width: 260px !important;
  flex: 3 !important;
}

body.task-addressbook #layout-list > .header {
  border-bottom: none !important;
}

/* Contact rows */
body.task-addressbook #contacts-table.listing td,
body.task-addressbook .contactlist td {
  line-height: 40px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}

body.task-addressbook #contacts-table.listing tr,
body.task-addressbook .contactlist tr {
  border-bottom: 1px solid #f1f3f4 !important;
}

body.task-addressbook #contacts-table.listing td:before,
body.task-addressbook .contactlist td:before {
  margin-right: 8px !important;
  color: #5f6368 !important;
  font-size: 14px !important;
}

body.task-addressbook .contactlist td.name {
  font-weight: 500 !important;
}

body.task-addressbook .contactlist span.email {
  color: #5f6368 !important;
  font-size: 12px !important;
  font-style: normal !important;
}

/* Hover and selected states */
body.task-addressbook #contacts-table.listing tr:hover td {
  background-color: #f5f7f9 !important;
}

body.task-addressbook #contacts-table.listing tr.selected td {
  background-color: #d3e3fd !important;
  color: #202124 !important;
}

/* ===========================================
   CONTACT DETAIL PANE (right side)
   =========================================== */
body.task-addressbook #layout-content {
  background: #fff !important;
}

body.task-addressbook #layout-content > .header {
  border-bottom: 1px solid #dadce0 !important;
}

/* Toolbar - compact */
body.task-addressbook #addressbooktoolbar a {
  height: 42px !important;
  min-width: 32px !important;
  max-width: 40px !important;
  padding: 0 6px !important;
}

body.task-addressbook #addressbooktoolbar a:before {
  height: 42px !important;
  line-height: 42px !important;
  font-size: 15px !important;
}

body.task-addressbook #addressbooktoolbar a .inner {
  display: none !important;
}

/* ===========================================
   CONTACT DETAIL VIEW (in iframe)
   contact.html template
   =========================================== */

/* Header area - centered card style */
.contact-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px 16px 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e8eaed !important;
}

.contact-header .contact-photo {
  min-width: auto !important;
  margin: 0 !important;
}

#contactpic {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto 10px !important;
  background: #e8eaed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#contactpic img {
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Contact name */
#contacthead {
  margin-left: 0 !important;
  margin-top: 0 !important;
  text-align: center !important;
}

#contacthead .names {
  margin-bottom: 2px !important;
}

#contacthead .names span.namefield {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #202124 !important;
  line-height: 1.3 !important;
}

#contacthead.readonly .source.row {
  font-size: 12px !important;
  color: #5f6368 !important;
  margin-bottom: 0 !important;
}

/* Properties */
.formcontent {
  padding: 0 !important;
}

.propform.grouped {
  width: 100% !important;
}

.propform.grouped fieldset {
  border: none !important;
  border-bottom: 1px solid #f1f3f4 !important;
  padding: 8px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.propform.grouped legend {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: #5f6368 !important;
  margin-bottom: 2px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid #e8eaed !important;
}

.propform.grouped .row.input-group {
  margin-bottom: 1px !important;
  padding: 2px 0 !important;
}

.propform.grouped .row.input-group:last-child {
  margin-bottom: 4px !important;
}

.propform.grouped .row.input-group > :first-child {
  min-width: 5rem !important;
}

.propform.grouped .row.input-group > :first-child label {
  font-size: 12px !important;
  color: #5f6368 !important;
}

.propform.grouped .form-control-plaintext {
  font-size: 14px !important;
  color: #202124 !important;
  padding: 2px 0 !important;
  line-height: 1.5 !important;
}

/* Email links - blue */
.propform a {
  color: #1a73e8 !important;
  text-decoration: none !important;
}

.propform a:hover {
  text-decoration: underline !important;
}

/* Edit button */
.formbuttons {
  padding: 12px 20px !important;
  text-align: center !important;
}

.formbuttons .btn {
  border-radius: 18px !important;
  padding: 6px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ===========================================
   PAGE NAVIGATION - Compact footer
   =========================================== */
body.task-addressbook #layout-list > .footer,
body.task-addressbook .menu.pagenav {
  height: 30px !important;
  min-height: 30px !important;
  line-height: 30px !important;
}

body.task-addressbook .menu.pagenav {
  font-size: 11px !important;
}

body.task-addressbook .menu.pagenav a {
  height: 30px !important;
}

body.task-addressbook .menu.pagenav a:before {
  line-height: 30px !important;
}

/* ===========================================
   DARK MODE
   =========================================== */

/* Headers */
html.dark-mode body.task-addressbook #layout > div > .header {
  border-color: #3c4043 !important;
}

/* Search */
html.dark-mode body.task-addressbook #layout-list .searchbar,
html.dark-mode body.task-addressbook #layout-list .searchbar.menu {
  border-bottom-color: #3c4043 !important;
}

html.dark-mode body.task-addressbook #layout-list .searchbar form:before {
  color: #9aa0a6 !important;
}

html.dark-mode body.task-addressbook #searchmenu {
  background: #292a2d !important;
  border-color: #3c4043 !important;
}

html.dark-mode body.task-addressbook #searchmenu .proplist li label {
  color: #9aa0a6 !important;
}

/* Sidebar */
html.dark-mode body.task-addressbook #layout-sidebar > .header {
  border-color: #3c4043 !important;
}

html.dark-mode body.task-addressbook #layout-sidebar .header .header-title {
  color: #e8eaed !important;
}

html.dark-mode body.task-addressbook #layout-sidebar .listing li.selected > a,
html.dark-mode body.task-addressbook #layout-sidebar .treelist li.selected > a,
html.dark-mode body.task-addressbook #layout-sidebar .treelist li.selected > div > a {
  background-color: #004a77 !important;
  color: #8ab4f8 !important;
}

/* Contact list */
html.dark-mode body.task-addressbook #contacts-table.listing tr {
  border-color: #3c4043 !important;
}

html.dark-mode body.task-addressbook #contacts-table.listing td:before {
  color: #9aa0a6 !important;
}

html.dark-mode body.task-addressbook .contactlist span.email {
  color: #9aa0a6 !important;
}

html.dark-mode body.task-addressbook #contacts-table.listing tr:hover td {
  background-color: #2d2e30 !important;
}

html.dark-mode body.task-addressbook #contacts-table.listing tr.selected td {
  background-color: #004a77 !important;
  color: #e8eaed !important;
}

/* Contact detail pane */
html.dark-mode body.task-addressbook #layout-content {
  background: #202124 !important;
}

html.dark-mode body.task-addressbook #layout-content > .header {
  border-color: #3c4043 !important;
}

/* Footer */
html.dark-mode body.task-addressbook #layout-list > .footer {
  border-color: #3c4043 !important;
}

/* Contact detail (iframe) dark mode */
html.dark-mode .contact-header {
  border-color: #3c4043 !important;
}

html.dark-mode #contactpic {
  background: #3c4043 !important;
}

html.dark-mode #contacthead .names span.namefield {
  color: #e8eaed !important;
}

html.dark-mode #contacthead.readonly .source.row {
  color: #9aa0a6 !important;
}

html.dark-mode .propform.grouped fieldset {
  border-color: #3c4043 !important;
}

html.dark-mode .propform.grouped legend {
  color: #9aa0a6 !important;
  border-color: #3c4043 !important;
}

html.dark-mode .propform.grouped .row.input-group > :first-child label {
  color: #9aa0a6 !important;
}

html.dark-mode .propform.grouped .form-control-plaintext {
  color: #e8eaed !important;
}

html.dark-mode .propform a {
  color: #8ab4f8 !important;
}