/* ============================================================
   ScotsLearn Mail — Custom Theme
   Primary: #2563eb  |  Navy: #1e3a5f  |  Light: #eff6ff
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ================================================================
   GLOBAL BASE
   ================================================================ */
html, body {
  background-color: #f1f5f9 !important;
  background: #f1f5f9 !important;
  color: #1e3a5f !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

a { color: #2563eb !important; text-decoration: none !important; }
a:hover { color: #1d4ed8 !important; }
hr, .separator { border: none !important; border-top: 1px solid #e2e8f0 !important; }

/* ================================================================
   SCROLLBARS
   ================================================================ */
* { scrollbar-color: #bfdbfe #f1f5f9 !important; scrollbar-width: thin !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9 !important; }
::-webkit-scrollbar-thumb { background: #bfdbfe !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #93c5fd !important; }

/* ================================================================
   LAYOUT PANELS
   ================================================================ */
#layout, #layout > div,
#layout-sidebar, #layout-list, #layout-content,
.app-content {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ================================================================
   TASK MENU / LEFT ICON STRIP
   ================================================================ */
#taskmenu, ul#taskmenu,
#layout-menu {
  background: #1e3a5f !important;
  background-color: #1e3a5f !important;
  border-right: 1px solid #1a3354 !important;
}

#taskmenu a,
#layout-menu a {
  color: #93b4d4 !important;
  font-family: 'Inter', sans-serif !important;
  border-left: 2px solid transparent !important;
  transition: all 0.15s ease !important;
}

#taskmenu a:hover, #taskmenu a.selected, #taskmenu a.active,
#layout-menu a:hover, #layout-menu a.selected, #layout-menu a.active {
  background: rgba(37,99,235,0.2) !important;
  background-color: rgba(37,99,235,0.2) !important;
  color: #ffffff !important;
  border-left-color: #3b82f6 !important;
}

#taskmenu .action-buttons a { color: #93b4d4 !important; }
#taskmenu .action-buttons a:hover { color: #ffffff !important; background: rgba(37,99,235,0.2) !important; }

/* ================================================================
   HEADER BARS
   ================================================================ */
#header,
#layout > div > .header,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header,
#layout > div > .footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-color: #e2e8f0 !important;
  color: #1e3a5f !important;
}

#layout > div > .header a.button,
#layout > div > .footer a.button {
  color: #64748b !important;
}

#layout-menu .popover-header,
#layout-menu .special-buttons {
  background: #1e3a5f !important;
  background-color: #1e3a5f !important;
}

#layout-menu .special-buttons a:not(:focus) {
  background: #1a3354 !important;
}

/* ================================================================
   TOOLBAR
   ================================================================ */
.toolbar, #toolbar, .toolbar-menu,
.menu.toolbar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.toolbar a, .toolbar button, .toolbar .inner,
.menu.toolbar a {
  color: #64748b !important;
  font-family: 'Inter', sans-serif !important;
}

.toolbar a:hover, .toolbar button:hover,
.menu.toolbar a:not(.disabled):hover,
.menu.toolbar .dropbutton:not(.disabled):hover {
  background: #eff6ff !important;
  background-color: #eff6ff !important;
  color: #2563eb !important;
}

.menu.toolbar a.selected {
  color: #2563eb !important;
  background: transparent !important;
}

.menu.toolbar .dropbutton a.dropdown:hover {
  background-color: #eff6ff !important;
}

/* ================================================================
   SEARCH BAR
   ================================================================ */
.searchbar {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.searchbar form::before,
.searchbar a { color: #94a3b8 !important; }
.searchbar input { color: #1e3a5f !important; background: transparent !important; }

/* ================================================================
   FOLDER / SIDEBAR LISTING
   ================================================================ */
.folder-list, #mailboxlist,
#layout-sidebar .scroller {
  background: #f8fafc !important;
}

.listing tbody td,
.listing tbody td a,
.listing li a,
#mailboxlist li a, .folder-list li a {
  color: #475569 !important;
  font-family: 'Inter', sans-serif !important;
  border-left: 2px solid transparent !important;
}

.listing li ul,
.listing tbody td,
.listing li {
  border-color: #f1f5f9 !important;
}

/* Selected / active folder */
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td,
#mailboxlist li.selected > a,
#mailboxlist li.active > a {
  background: #eff6ff !important;
  background-color: #eff6ff !important;
  color: #2563eb !important;
  border-left-color: #2563eb !important;
}

.listing li.selected ul,
.listing li.selected ul div.treetoggle {
  background-color: #f8fafc !important;
  color: #475569 !important;
}

/* Hover */
.popupmenu .listing li > a:not(.disabled):hover,
.header a.button.icon:not(.disabled):focus,
.header a.button.icon:not(.disabled):hover,
.menu a:not(.disabled):focus,
.menu a:not(.disabled):hover,
#mailboxlist li a:hover {
  background: #eff6ff !important;
  background-color: #eff6ff !important;
  color: #2563eb !important;
  border-left-color: #2563eb !important;
}

#mailboxlist li.unread > a { color: #1e3a5f !important; font-weight: 600 !important; }

.listing li.droptarget > a,
.listing tr.droptarget > td {
  background-color: #dbeafe !important;
}

/* ================================================================
   UNREAD BADGE
   ================================================================ */
.unread-count, span.unread, .badge,
.folderlist li.mailbox .unreadcount {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* ================================================================
   MESSAGE LIST
   ================================================================ */
#layout-list .scroller, .message-list, #messagelist,
table.listing tbody, .listing tbody,
.messagelist {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1e3a5f !important;
}

table.listing tr, .listing tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

table.listing thead th, .listing thead th {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

table.listing tr td, .listing tr td { color: #1e3a5f !important; background: transparent !important; }
table.listing tr:hover td, .listing tr:hover td { background: #f8fafc !important; }

table.listing tr.selected td, .listing tr.selected td,
table.listing tr.focused td {
  background: #eff6ff !important;
  color: #1e3a5f !important;
}

.messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
.messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
.messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto {
  color: #94a3b8 !important;
}

.messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before {
  color: #2563eb !important;
}

.messagelist span.flagged::before { color: #f59e0b !important; }

/* ================================================================
   MESSAGE READING PANE
   ================================================================ */
#message-content, .message-content, .rcmContent {
  background: #ffffff !important;
  color: #1e3a5f !important;
}

#message-header, .message-part .headers-table {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 16px 20px !important;
}

#message-header .subject {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: #1e3a5f !important;
}

.message-part .headers-table th {
  color: #94a3b8 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* ================================================================
   COMPOSE
   ================================================================ */
#compose-content, #compose, .compose-header {
  background: #ffffff !important;
  color: #1e3a5f !important;
}

.compose-header .header-row { border-bottom: 1px solid #e2e8f0 !important; }

.compose-header .header-row label {
  color: #94a3b8 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* ================================================================
   FORMS & INPUTS
   ================================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select,
.form-control {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e3a5f !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
}

input:focus, textarea:focus,
.form-control:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
  outline: none !important;
  color: #1e3a5f !important;
}

input::placeholder, textarea::placeholder { color: #cbd5e1 !important; opacity: 1 !important; }
.input-group-text { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #94a3b8 !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn, button, a.button, .toolbar a.button, .toolbar button {
  font-family: 'Inter', sans-serif !important;
  border-radius: 6px !important;
}

.btn-primary, a.button.primary, button.primary {
  background: #2563eb !important;
  background-color: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.btn-primary:hover, a.button.primary:hover {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 16px rgba(37,99,235,0.3) !important;
}

.btn-secondary, a.button.secondary, button.secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.btn-secondary:hover, a.button.secondary:hover {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-color: #bfdbfe !important;
  color: #1e3a5f !important;
}

.btn-danger {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #ef4444 !important;
}
.btn-danger:hover {
  background-color: #fee2e2 !important;
}

.floating-action-buttons a.button {
  background: #2563eb !important;
  background-color: #2563eb !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.35) !important;
}

.floating-action-buttons a.button:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 6px 28px rgba(37,99,235,0.5) !important;
}

/* ================================================================
   POPUPS / DROPDOWNS / DIALOGS
   ================================================================ */
.popover, .dropdown-menu, .ui-dialog, .popover-body, .menu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  border-radius: 10px !important;
  color: #1e3a5f !important;
}

.popover-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e3a5f !important;
}

.dropdown-item, .menu li a, .menu a {
  color: #475569 !important;
  border-radius: 5px !important;
}

.dropdown-item:hover, .menu li a:hover, .menu a:hover,
.menu li.selected a, .menu a.selected {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e3a5f !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.ui-dialog .ui-dialog-content { background: #ffffff !important; color: #1e3a5f !important; }
.ui-dialog .ui-dialog-buttonpane { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; }

/* ================================================================
   ALERTS / TOASTS
   ================================================================ */
#messagestack div {
  background-color: #ffffff !important;
  color: #1e3a5f !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
#messagestack .alert-danger {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
#messagestack .alert-success {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #16a34a !important;
}
#messagestack .alert-warning {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #d97706 !important;
}
.alert-danger, .notice.error {
  background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #dc2626 !important;
}
.alert-success, .notice.confirmation {
  background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; color: #16a34a !important;
}
.alert-warning, .notice.warning {
  background: #fffbeb !important; border: 1px solid #fde68a !important; color: #d97706 !important;
}

/* ================================================================
   ATTACHMENTS
   ================================================================ */
.attachmentslist {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
}
.attachmentslist a,
.attachmentslist li .attachment-name { color: #1e3a5f !important; }
.attachmentslist li .attachment-size { color: #94a3b8 !important; }

/* ================================================================
   MISC
   ================================================================ */
.header, .footer { border-color: #e2e8f0 !important; }
#logo { opacity: 1 !important; }
.iframe-loader { background-color: rgba(241,245,249,0.9) !important; }
.iframe-loader .spinner-border {
  color: #2563eb !important;
  border-color: #2563eb rgba(37,99,235,0.2) rgba(37,99,235,0.2) rgba(37,99,235,0.2) !important;
}

/* ================================================================
   ████  LOGIN PAGE  ████
   ================================================================ */
body.task-login {
  background-color: #eff6ff !important;
  background: #eff6ff !important;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px),
    radial-gradient(ellipse 600px 500px at 50% 35%, rgba(59,130,246,0.12) 0%, transparent 70%) !important;
  background-size: 50px 50px, 50px 50px, 100% 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

body.task-login #layout,
body.task-login #layout > div {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 100vh !important;
}

body.task-login #layout-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 16px !important;
  padding: 48px 44px !important;
  width: 420px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: auto !important;
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.04),
    0 24px 64px rgba(30,58,95,0.12),
    0 0 80px rgba(59,130,246,0.08) !important;
  flex: none !important;
  position: relative !important;
}

/* Blue top accent line */
body.task-login #layout-content::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #2563eb, transparent) !important;
  border-radius: 0 0 3px 3px !important;
}

/* Logo */
body.task-login #logo {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  margin: 0 auto 8px !important;
  border-radius: 16px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: drop-shadow(0 4px 12px rgba(37,99,235,0.25)) !important;
}

/* "Sign In" heading */
body.task-login #login-form::before {
  content: 'Sign in to ScotsLearn Mail' !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #1e3a5f !important;
  margin: 14px 0 28px !important;
}

/* Login form */
body.task-login #login-form table { width: 100% !important; border-collapse: collapse !important; }
body.task-login #login-form table tr { background: transparent !important; border: none !important; }
body.task-login #login-form table td.title { display: none !important; }
body.task-login #login-form table td.input { padding-bottom: 12px !important; }

/* Login inputs */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"],
body.task-login #login-form .form-control {
  width: 100% !important;
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #1e3a5f !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 12px 16px !important;
  height: 46px !important;
  box-shadow: none !important;
}

body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus,
body.task-login #login-form .form-control:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* Login button */
body.task-login #rcmloginsubmit,
body.task-login #login-form button.mainaction,
body.task-login #login-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  background-color: #2563eb !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.3) !important;
  margin-top: 4px !important;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #login-form button.mainaction:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 28px rgba(37,99,235,0.45) !important;
}

/* Footer */
body.task-login #login-footer {
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: #cbd5e1 !important;
  margin-top: 24px !important;
}
body.task-login #login-footer a { color: #cbd5e1 !important; }