/*
 * Daankia visual theme
 * Based on the user's Asana-inspired design specification.
 * DM Sans is loaded from Google Fonts with a system font fallback.
 */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
:root {
  color-scheme: light;
  --ms-charcoal: #0D0E10;
  --ms-charcoal-hover: #23282F;
  --ms-muted: #646F79;
  --ms-sky: #00B2FF;
  --ms-sky-soft: #C8EBFC;
  --ms-coral: #F06A6A;
  --ms-white: #FFFFFF;
  --ms-offwhite: #F5F4F3;
  --ms-border: #DBDBDB;
  --ms-ring: 0 0 0 3px rgb(0 178 255 / 11%);
  --ms-font: "DM Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { background: var(--ms-offwhite); }
html, body { font-family: var(--ms-font); color: var(--ms-charcoal); }
body { background: var(--ms-offwhite); font-size: 16px; line-height: 1.5; }
:where(button, input, select, textarea) { font-family: inherit; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ms-sky); outline-offset: 4px;
}
:where(button, input, select, textarea):disabled { opacity: .3; cursor: not-allowed; }
h1, h2 { color: var(--ms-charcoal); font-weight: 500; letter-spacing: -.025em; }
h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.14; }
h2 { font-size: 24px; line-height: 1.25; }
p { line-height: 1.6; }
.muted, .small, .workspace-label, .footer, .auth-foot { color: var(--ms-muted); }
.small { font-size: 13px; }
.eyebrow, .workspace-label {
  color: var(--ms-muted); font-size: 12px; font-weight: 500;
  letter-spacing: .09em;
}
.button, .button-primary, .button-outline, .button-small {
  border-radius: 100px; min-height: 44px; line-height: 1.2;
  padding: 10px 24px; font-size: 14px; font-weight: 500;
  box-shadow: none; transition: background .18s, color .18s, border-color .18s, opacity .18s;
}
.button-primary {
  background: var(--ms-charcoal); border: 1px solid var(--ms-charcoal);
  color: var(--ms-white);
}
.button-primary:hover { background: var(--ms-charcoal-hover); border-color: var(--ms-charcoal-hover); }
.button-outline {
  background: transparent; color: var(--ms-charcoal); border: 1px solid var(--ms-charcoal);
}
.button-outline:hover { background: rgb(13 14 16 / 5%); }
.button-danger { color: #AA3840; border-color: #B64D54; }
.button-danger:hover { background: rgb(240 106 106 / 10%); }
.text-action { color: var(--ms-charcoal); font-weight: 500; min-height: 40px; padding: 8px 12px; }
.text-action:hover { background: rgb(13 14 16 / 5%); }
.text-action.danger { color: #AD3C43; }
.panel, .mail-list, .message-card, .empty, .auth-card {
  background: var(--ms-white); border: 1px solid var(--ms-border);
  border-radius: 16px; box-shadow: none;
}
.panel-header, .list-heading, .mail-toolbar, .mail-entry,
.connected-row { border-color: var(--ms-border); }
.panel-header, .list-heading { padding: 20px 24px; font-size: 14px; }
.panel-header h2 { font-size: 20px; font-weight: 500; }
.empty { padding: 60px 24px; }
.empty-icon { background: var(--ms-offwhite); color: var(--ms-charcoal); }
.alert { border-radius: 8px; }
.alert.error { color: #95333A; background: #FFF1F1; border-color: #F2C0C0; }
.alert.success { color: #206B45; background: #ECF7F0; border-color: #C5E6D0; }
.count { background: #323438; color: #EFF0F0; }

/* Shell and sticky navigation */
.shell { grid-template-columns: 270px minmax(0, 1fr); background: var(--ms-offwhite); }
.sidebar {
  background: var(--ms-charcoal); color: #F5F5F5;
  padding: 28px 16px 20px;
}
.sidebar .brand { color: var(--ms-white); font-size: 22px; font-weight: 600; }
.brand-mark {
  background: var(--ms-white); color: var(--ms-charcoal);
  border-radius: 12px; box-shadow: none;
}
.sidebar-section-title { color: #969DA4; font-weight: 500; font-size: 11px; }
.nav a {
  min-height: 44px; border-radius: 8px; color: #C2C6CB;
  font-weight: 400; font-size: 14px; padding: 10px 14px;
}
.nav a:hover { color: #FFF; background: #23282F; }
.nav a.active { background: #23282F; color: #FFF; font-weight: 500; }
.nav a.active .nav-icon { color: var(--ms-sky); }
.account-nav a {
  border-radius: 8px; padding: 10px; min-height: 48px; color: #D1D3D6;
}
.account-nav a:hover, .account-nav a.account-active { background: #23282F; color: #FFF; }
.account-avatar { background: #2F353D; color: #FFF; border-radius: 8px; }
.account-nav .account-name { color: #F5F5F5; font-size: 13px; font-weight: 500; }
.account-nav .account-email { color: #A6AFB7; font-size: 12px; }
.account-nav .account-unread {
  background: var(--ms-sky-soft); color: #064E6D;
  border-radius: 100px; padding: 0 8px; height: 24px; min-width: 24px;
}
.account-nav .account-unread.is-zero,
.account-nav .account-unread.is-loading { background: #2C3035; color: #D3D5D9; }
.account-nav .add-nav { color: #8DE0FF; font-size: 13px; }
.sidebar-bottom { border-top: 1px solid #30343B; }
.signed-in, .signout { color: #B6BCC2; }
.signed-in strong { color: #FFF; font-weight: 500; }
.main { background: var(--ms-offwhite); min-width: 0; }
.topbar {
  height: 68px; background: var(--ms-white);
  border-bottom: 1px solid var(--ms-border); box-shadow: none;
  position: sticky; top: 0; z-index: 30;
}
.topbar-title { font-size: 16px; font-weight: 500; }
.topbar-avatar { background: var(--ms-charcoal); color: var(--ms-white); }
.content { max-width: 1440px; padding: 40px 48px 32px; }
.page-header { margin-bottom: 32px; }
.page-header h1 { font-weight: 400; }
.page-header p { font-size: 14px; }
.footer { margin-top: 48px; font-size: 13px; }

/* Mail folders and reader */
.mail-heading { background: var(--ms-white); }
.mail-heading strong { font-weight: 500; }
.mail-toolbar { background: #FCFCFB; padding: 16px 24px; }
.mail-toolbar input[type="search"], .mail-toolbar select {
  min-height: 44px; border: 1px solid #CFCFCF; border-radius: 4px;
  font-size: 14px; color: var(--ms-charcoal); background: var(--ms-white);
}
.mail-toolbar input[type="search"]:focus, .mail-toolbar select:focus {
  border-color: var(--ms-sky); box-shadow: var(--ms-ring);
}
.mail-toolbar input[type="checkbox"], .mail-entry .mail-checkbox { accent-color: var(--ms-charcoal); }
.select-all { font-size: 14px; color: var(--ms-muted); gap: 10px; }
.mail-entry { background: var(--ms-white); }
.mail-entry:hover { background: #F8F8F7; }
.mail-entry.unread { background: #F6FBFE; }
.mail-entry.unread:hover { background: #EDF8FE; }
.mail-entry .mail-row { padding-top: 18px; padding-bottom: 18px; }
.mail-avatar { color: var(--ms-charcoal); background: var(--ms-offwhite); border-radius: 50%; }
.mail-text strong { color: var(--ms-charcoal); font-weight: 500; font-size: 14px; }
.mail-text span { color: var(--ms-muted); font-size: 14px; }
.mail-entry.unread .mail-text strong, .mail-entry.unread .mail-subject {
  color: var(--ms-charcoal); font-weight: 600;
}
.unread-dot { background: var(--ms-sky); }
.mail-row time, .row-arrow { color: var(--ms-muted); }
.mail-operation-status { color: #206B45; font-size: 13px; }
.mail-operation-status.is-error { color: #B13742; }
.pager { font-size: 14px; color: var(--ms-muted); }
.message-card h2, .viewer-subject { font-weight: 500; }
.message-meta { border-color: var(--ms-border); }
.message-meta span { color: var(--ms-muted); }
.message-meta strong { color: var(--ms-charcoal); font-weight: 500; }
.viewer-actions, .viewer-mode-bar { gap: 12px; }
.viewer-mode-bar { border-color: var(--ms-border); }
.email-html-frame { border: 1px solid var(--ms-border); border-radius: 8px; }
.message-body { color: var(--ms-charcoal); font-size: 16px; line-height: 1.65; }
.mail-load-error { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }

/* Compose, account management, login, registration */
.form-card { padding: 32px; }
.compose-panel { max-width: 1100px; padding: 32px; }
.compose-topline { color: var(--ms-charcoal); border-color: var(--ms-border); }
.compose-topline strong { font-weight: 500; font-size: 20px; }
.compose-topline span { color: var(--ms-muted); }
.form-card label, .stack-lg label {
  color: var(--ms-charcoal); font-size: 14px; font-weight: 500;
  line-height: 1.5; gap: 8px;
}
.form-card input, .form-card select, .form-card textarea,
.stack-lg input {
  background: var(--ms-white); color: var(--ms-charcoal);
  border: 1px solid #CFCFCF; border-radius: 4px;
  padding: 12px 16px; min-height: 50px;
  font-size: 16px; font-weight: 400; box-shadow: none;
}
.form-card input:focus, .form-card select:focus,
.form-card textarea:focus, .stack-lg input:focus {
  border-color: var(--ms-sky); box-shadow: var(--ms-ring);
}
.form-card input::placeholder, .form-card textarea::placeholder,
.stack-lg input::placeholder { color: var(--ms-muted); opacity: 1; }
.form-card input:disabled, .form-card select:disabled { background: var(--ms-offwhite); }
.form-section-title { color: var(--ms-charcoal); border-color: var(--ms-border); }
.compose-panel textarea { min-height: 340px; font-size: 16px; line-height: 1.65; }
.compose-panel .form-actions { gap: 12px; margin-top: 8px; }
.connected-row:hover { background: #FAFAF9; }
.connected-details strong { font-size: 14px; color: var(--ms-charcoal); font-weight: 500; }
.connected-details span { color: var(--ms-muted); }
.auth-wrap { background: var(--ms-offwhite); }
.auth-card { max-width: 480px; padding: 48px; }
.auth-card .brand { color: var(--ms-charcoal); }
.auth-card .brand-mark { color: var(--ms-white); background: var(--ms-charcoal); }
.auth-card h1 { font-size: 36px; font-weight: 400; }
.auth-card .muted { color: var(--ms-muted); font-size: 16px; }
.auth-switch { font-size: 14px; color: var(--ms-muted); }
.auth-switch a { color: var(--ms-charcoal); text-decoration: underline; font-weight: 500; }
.auth-foot { color: var(--ms-muted); }

/* Feedback: skeleton rows remain visible while IMAP waits for the provider. */
.mail-loading { padding: 16px 24px 20px; }
.mail-loading-heading {
  display: flex; gap: 12px; align-items: center;
  margin: 0 0 12px; font-size: 14px; color: var(--ms-muted);
}
.mail-loading-heading strong { font-size: 14px; color: var(--ms-charcoal); font-weight: 500; }
.mail-loading-spinner {
  display: inline-block; flex: none; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid #B5E8FA;
  border-top-color: var(--ms-sky); animation: ms-spin .75s linear infinite;
}
.mail-skeleton-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; border-top: 1px solid #ECECEC; padding: 14px 4px;
}
.mail-skeleton-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.mail-skeleton-lines { display: grid; gap: 9px; flex: 1; min-width: 0; }
.mail-skeleton-subject { height: 12px; max-width: 72%; width: 100%; border-radius: 100px; }
.mail-skeleton-preview { height: 10px; max-width: 46%; width: 100%; border-radius: 100px; }
.mail-skeleton-date { width: 64px; height: 10px; border-radius: 100px; flex: none; }
.mail-skeleton-block {
  background: linear-gradient(110deg, #EFEFEF 8%, #FAFAFA 18%, #EFEFEF 33%);
  background-size: 210% 100%; animation: ms-skeleton-shimmer 1.5s ease-in-out infinite;
}
.message-loading { min-height: 350px; padding: 4px 0 16px; }
.message-loading .mail-loading-heading { margin-bottom: 28px; }
.message-loading .mail-skeleton-subject { max-width: 55%; height: 24px; }
.message-loading .mail-skeleton-preview { max-width: 36%; height: 12px; }
.message-loading-body { margin-top: 38px; display: grid; gap: 16px; }
.message-loading-body .mail-skeleton-block { height: 14px; width: 100%; border-radius: 100px; }
.message-loading-body .mail-skeleton-block:nth-child(2) { width: 89%; }
.message-loading-body .mail-skeleton-block:nth-child(3) { width: 94%; }
.message-loading-body .mail-skeleton-block:nth-child(4) { width: 66%; }
.ms-progress-track { background: #E3F5FD; }
.ms-progress-bar { background: var(--ms-sky); }
.ms-progress-toast { background: var(--ms-charcoal); color: var(--ms-white); border-radius: 12px; }
.ms-progress-spinner, .ms-inline-spinner { border-top-color: var(--ms-sky); }
@keyframes ms-skeleton-shimmer { from { background-position-x: 200%; } to { background-position-x: -200%; } }
@media (min-width: 691px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; min-height: 0; overflow-y: auto; }
}
@media (max-width: 1023px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .content { padding: 32px 24px; }
  .topbar { padding: 0 24px; }
}
@media (max-width: 690px) {
  .shell { display: block; }
  .sidebar { height: auto; min-height: 0; position: relative; padding: 18px 16px; }
  .sidebar-section-title, .accounts-heading { display: none; }
  .topbar { height: 68px; top: 0; position: sticky; padding: 0 16px; }
  .content { padding: 24px 16px; }
  .page-header { gap: 16px; flex-wrap: wrap; }
  .page-header h1, .auth-card h1 { font-size: 28px; }
  .button { padding: 10px 18px; }
  .button-small { min-height: 44px; }
  .form-card, .compose-panel { padding: 20px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 32px 24px; }
  .mail-loading { padding: 12px 16px; }
  .mail-skeleton-date { display: none; }
  .mail-toolbar { padding: 12px 16px; }
  .mail-entry .mail-row { padding: 16px 8px; }
  .message-card { padding: 20px 16px; }
  .message-loading { min-height: 260px; }
  .footer { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mail-loading-spinner, .mail-skeleton-block { animation: none; }
  :where(.button, .nav a, .mail-row) { transition: none; }
}
/* HTML messages use a content-measured frame, not a nested scroll panel. */
.email-html-frame {
  display: block;
  width: 100%;
  height: 120px;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--ms-border);
  border-radius: 8px;
}
.viewer-body { overflow: visible; }