/* ============================================
   SGO Mail — Gmail-like Theme for Elastic Skin
   ============================================ */

:root {
  --main-color: #1a73e8;
  --main-color-hover: #1765cc;
  --main-color-light: #e8f0fe;
  --sidebar-bg: #f6f8fc;
  --sidebar-hover: #d3e3fd;
  --sidebar-active: #c2dbff;
  --toolbar-bg: #ffffff;
  --body-bg: #f6f8fc;
  --border-color: #e0e0e0;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --compose-btn: #1a73e8;
  --compose-btn-hover: #1765cc;
  --unread-color: #202124;
  --read-color: #5f6368;
  --star-color: #f4b400;
  --danger-color: #d93025;
  --success-color: #188038;
  --header-height: 64px;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-md: 0 1px 3px 1px rgba(60,64,67,.15), 0 1px 2px 0 rgba(60,64,67,.3);
}

/* === GLOBAL === */
body {
  background: var(--body-bg) !important;
  font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text-primary) !important;
}

/* === TOP TOOLBAR / HEADER === */
#layout > .header,
.header.toolbar,
#taskmenu {
  background: var(--toolbar-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

/* Logo area */
.header a.logo {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* === TASK MENU (top nav) === */
#taskmenu a {
  color: var(--text-secondary) !important;
  border-radius: var(--radius) !important;
  transition: background 0.2s ease !important;
}

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

#taskmenu a.selected,
#taskmenu a:active {
  background: var(--sidebar-active) !important;
  color: var(--main-color) !important;
}

/* === SIDEBAR / FOLDER LIST === */
#layout-sidebar,
.sidebar,
#mailboxlist-container {
  background: var(--sidebar-bg) !important;
  border-right: none !important;
}

/* Compose button — big round blue like Gmail */
a.button.compose,
a.compose {
  background: var(--compose-btn) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  padding: 14px 24px 14px 18px !important;
  margin: 8px 16px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  transition: box-shadow 0.2s, background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

a.button.compose:hover,
a.compose:hover {
  background: var(--compose-btn-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Folder list items */
#mailboxlist li a,
.folderlist li a {
  color: var(--text-primary) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 4px 16px 4px 24px !important;
  margin-right: 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: background 0.15s ease !important;
}

#mailboxlist li a:hover,
.folderlist li a:hover {
  background: var(--sidebar-hover) !important;
}

#mailboxlist li.selected > a,
.folderlist li.selected > a,
#mailboxlist li a.focused,
.folderlist li a.focused {
  background: var(--sidebar-active) !important;
  color: var(--main-color) !important;
  font-weight: 500 !important;
}

/* Unread count badge */
#mailboxlist .unreadcount,
.folderlist .unreadcount {
  color: var(--main-color) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* === MESSAGE LIST === */
#messagelist,
.messagelist,
#layout-content {
  background: var(--toolbar-bg) !important;
}

/* Messages table */
#messagelist tr {
  border-bottom: 1px solid #f1f3f4 !important;
  transition: box-shadow 0.15s ease !important;
  cursor: pointer !important;
}

#messagelist tr:hover {
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
              0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15) !important;
  z-index: 1 !important;
  position: relative !important;
}

#messagelist tr.selected {
  background: var(--main-color-light) !important;
}

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

#messagelist tr:not(.unread) td {
  color: var(--read-color) !important;
}

/* Star / flag */
#messagelist td.flag span.flagged {
  color: var(--star-color) !important;
}

/* Subject column */
#messagelist td.subject a {
  font-size: 14px !important;
}

/* Date column */
#messagelist td.date {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}

/* === TOOLBAR (message actions) === */
.toolbar,
.toolbar.menu,
#message-header .toolbar {
  background: var(--toolbar-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.toolbar a,
.toolbar button {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}

.toolbar a:hover,
.toolbar button:hover {
  background: var(--main-color-light) !important;
  color: var(--main-color) !important;
}

/* === BUTTONS === */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].mainaction {
  background: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: none !important;
  padding: 8px 24px !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: var(--main-color-hover) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-secondary,
button.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  color: var(--main-color) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}

.btn-secondary:hover {
  background: var(--main-color-light) !important;
  border-color: var(--main-color-light) !important;
}

/* Delete / danger */
.btn-danger,
a.btn-danger {
  background: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
}

/* === SEARCH BAR === */
.searchbar,
#searchbar,
.searchbox,
#quicksearchbar {
  background: #eaf1fb !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  max-width: 720px !important;
  padding: 4px 8px !important;
}

.searchbar:focus-within,
#quicksearchbar:focus-within {
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

.searchbar input,
#quicksearchbar input {
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
}

/* === MESSAGE VIEW === */
#message-header {
  background: var(--toolbar-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 16px 20px !important;
}

#message-header .subject {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
}

.message-part,
#messagebody {
  padding: 16px 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* === COMPOSE === */
#compose-content,
#composebody {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
}

/* Send button */
.toolbar a.send,
.formbuttons .btn.send,
button.send {
  background: var(--main-color) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
}

/* === LOGIN PAGE === */
#login-form {
  background: #fff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 32px 40px !important;
  max-width: 448px !important;
  margin: 0 auto !important;
}

#login-form .input-group input,
#login-form input[type="text"],
#login-form input[type="password"] {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  background: #fff !important;
  transition: border-color 0.2s !important;
}

#login-form input:focus {
  border-color: var(--main-color) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.2) !important;
}

#login-form .button.mainaction,
#login-form input[type="submit"] {
  background: var(--main-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

#login-form .button.mainaction:hover,
#login-form input[type="submit"]:hover {
  background: var(--main-color-hover) !important;
}

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

/* Login title */
#login-form .brand,
#login-form h1 {
  color: var(--text-primary) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

/* === CONTACTS === */
.contactlist tr:hover,
.contactlist li:hover {
  background: var(--main-color-light) !important;
}

.contactlist tr.selected,
.contactlist li.selected {
  background: var(--sidebar-active) !important;
}

/* === SETTINGS === */
.listing tr:hover {
  background: var(--main-color-light) !important;
}

.listing tr.selected {
  background: var(--sidebar-active) !important;
}

/* === SCROLLBAR (webkit) === */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-thumb {
  background: #dadce0 !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #bdc1c6 !important;
}

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

/* === CHECKBOXES === */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked + label::before {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
}

/* === POPUPS / DIALOGS === */
.popupmenu,
.popup,
.ui-dialog {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  border: none !important;
}

/* === NOTIFICATIONS / ALERTS === */
.ui.alert,
#messagestack div {
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
}

#messagestack .notice {
  background: #e6f4ea !important;
  color: var(--success-color) !important;
  border: none !important;
}

#messagestack .error {
  background: #fce8e6 !important;
  color: var(--danger-color) !important;
  border: none !important;
}

#messagestack .warning {
  background: #fef7e0 !important;
  color: #ea8600 !important;
  border: none !important;
}

/* === RESPONSIVE TWEAKS === */
@media (max-width: 768px) {
  #login-form {
    padding: 24px 20px !important;
    margin: 16px !important;
  }
  
  a.button.compose,
  a.compose {
    border-radius: 50% !important;
    padding: 16px !important;
    width: 56px !important;
    height: 56px !important;
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 100 !important;
    justify-content: center !important;
  }
}

/* === Google Fonts import === */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');