/* iida Mail 1.3 — familiar mailbox workflow, unmistakably Foundation branded */
:root {
  --brand-navy:#071f43;
  --brand-blue:#1f5eff;
  --brand-green:#13b66b;
  --brand-orange:#ff8a16;
  --brand-purple:#7a35e8;
  --ink:#202124;
  --muted:#5f6368;
  --muted-2:#80868b;
  --line:#e2e7ed;
  --line-strong:#d3dae3;
  --surface:#fff;
  --surface-raised:#fff;
  --canvas:#f6f8fc;
  --canvas-strong:#edf2f8;
  --blue:#1f5eff;
  --blue-hover:#174bd1;
  --blue-soft:#e7efff;
  --green:#13a561;
  --green-soft:#e7f7ef;
  --orange:#e8780c;
  --orange-soft:#fff2e3;
  --red:#c5221f;
  --red-soft:#fce8e6;
  --purple:#7437d4;
  --purple-soft:#f0e9ff;
  --sidebar:256px;
  --topbar:68px;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(27,43,65,.08),0 2px 8px rgba(27,43,65,.05);
  --shadow:0 12px 40px rgba(23,38,61,.18),0 2px 8px rgba(23,38,61,.1);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
}

html[data-theme="dark"] {
  --brand-navy:#e7efff;
  --ink:#e8eaed;
  --muted:#bdc1c6;
  --muted-2:#9aa0a6;
  --line:#35404f;
  --line-strong:#465365;
  --surface:#17202d;
  --surface-raised:#202b3a;
  --canvas:#101720;
  --canvas-strong:#242f3f;
  --blue:#84a9ff;
  --blue-hover:#a6c0ff;
  --blue-soft:#263d68;
  --green:#5bd69a;
  --green-soft:#183e30;
  --orange:#ffb15f;
  --orange-soft:#49331d;
  --red:#ff8b85;
  --red-soft:#4b2826;
  --purple:#b69aff;
  --purple-soft:#362c53;
}

body { background:var(--canvas); color:var(--ink); font-size:14px; }
.ui-icon { width:20px; height:20px; stroke-width:1.9; }
.icon-button { width:40px; height:40px; padding:0; border-radius:50%; display:inline-grid; place-items:center; }
.icon-button:hover { background:color-mix(in srgb,var(--ink) 8%,transparent); }

/* Global application chrome */
.app-shell {
  height:100%;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  grid-template-rows:var(--topbar) minmax(0,1fr);
  grid-template-areas:"header header" "sidebar workspace";
  transition:grid-template-columns .2s ease;
}
.topbar {
  grid-area:header;
  min-width:0;
  height:var(--topbar);
  padding:8px 18px 8px 8px;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(260px,720px) minmax(190px,1fr);
  align-items:center;
  gap:18px;
  background:var(--canvas);
  border:0;
  transition:grid-template-columns .2s ease;
}
.topbar-brand { min-width:0; display:flex; align-items:center; gap:5px; }
.menu-control { flex:none; color:var(--muted); }
.mail-brand { min-width:0; display:flex; align-items:center; gap:9px; }
.mail-brand img { width:157px; height:48px; object-fit:contain; }
.mail-brand .brand-dark { display:none; }
html[data-theme="dark"] .mail-brand .brand-light { display:none; }
html[data-theme="dark"] .mail-brand .brand-dark { display:block; }
.mail-brand>span { margin-left:-5px; color:var(--muted); font-size:20px; font-weight:400; letter-spacing:-.02em; }
.search-wrap {
  width:100%; height:48px; border:1px solid transparent; background:var(--canvas-strong); border-radius:24px;
  padding:0 10px 0 17px; gap:12px; box-shadow:none; transition:background .15s,box-shadow .15s,border-color .15s;
}
.search-wrap:focus-within { background:var(--surface); border-color:var(--line); box-shadow:0 1px 3px rgba(30,45,65,.12),0 4px 12px rgba(30,45,65,.07); }
.search-wrap input { font-size:15px; }
.search-wrap kbd { margin-right:4px; background:var(--surface); }
.topbar-actions { min-width:0; display:flex; justify-content:flex-end; align-items:center; gap:4px; }
.connection-status { margin-right:8px; font-size:12px; }
.top-account { width:40px; height:40px; margin-left:3px; padding:3px; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.top-account:hover { background:color-mix(in srgb,var(--ink) 9%,transparent); }
.top-account .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }

/* Navigation mirrors the familiar mail pattern while using Foundation colors */
.sidebar {
  grid-area:sidebar;
  min-width:0;
  padding:8px 12px 12px 0;
  background:var(--canvas);
  color:var(--ink);
  overflow-x:hidden;
}
.mobile-sidebar-brand { display:none; }
.compose-button {
  width:164px; height:56px; margin:0 0 13px 8px; padding:0 20px;
  display:flex; align-items:center; justify-content:flex-start; gap:13px;
  border:1px solid color-mix(in srgb,var(--brand-blue) 13%,var(--line)); border-radius:17px;
  background:linear-gradient(135deg,#fff 25%,#f4f7ff); color:var(--brand-navy); font-size:14px; font-weight:650;
  box-shadow:0 1px 2px rgba(30,45,65,.12),0 3px 10px rgba(30,45,65,.08); transition:box-shadow .18s,transform .18s,width .2s;
}
html[data-theme="dark"] .compose-button { background:linear-gradient(135deg,var(--surface-raised),var(--blue-soft)); color:var(--ink); }
.compose-button:hover { transform:translateY(-1px); box-shadow:0 2px 5px rgba(30,45,65,.16),0 7px 18px rgba(30,45,65,.11); }
.compose-button .ui-icon { color:var(--brand-blue); width:23px; height:23px; }
.compose-button span { margin:0; font-size:14px; white-space:nowrap; }
.sidebar nav { gap:1px; }
.sidebar nav button,.sidebar-bottom>button {
  width:calc(100% - 8px); height:34px; padding:0 16px 0 25px; gap:16px;
  border-radius:0 18px 18px 0; color:var(--ink); font-size:13px;
}
.sidebar nav button:hover,.sidebar-bottom>button:hover { background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink); }
.sidebar nav button.active { background:var(--blue-soft); color:color-mix(in srgb,var(--blue) 72%,var(--brand-navy)); font-weight:700; }
.sidebar nav button.active .ui-icon { color:var(--brand-blue); }
.sidebar nav button span,.sidebar-bottom>button span { width:auto; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav button b { background:transparent; color:inherit; font-size:12px; }
.nav-label { margin:12px 0 5px; padding:0 25px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.07em; }
.nav-label-spaced { margin-top:15px; }
.sidebar-section { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }
.sidebar-section-title { padding:0 17px 5px 25px; color:var(--muted); }
.sidebar-section-title button { color:var(--muted); }
.sidebar-section-title button:hover { background:color-mix(in srgb,var(--ink) 8%,transparent); color:var(--ink); }
.sidebar-section nav:empty:after { color:var(--muted-2); padding-left:25px; }
.sidebar-bottom { margin-top:auto; }
.sidebar-bottom>button b { background:var(--blue-soft); color:var(--blue); }
.account-chip { margin:10px 10px 0 16px; padding:13px 4px 0; border-top:1px solid var(--line); grid-template-columns:36px 1fr 34px; }
.account-chip .avatar { width:36px; height:36px; border-radius:50%; }
.account-chip small { color:var(--muted); }

.workspace { grid-area:workspace; min-width:0; height:100%; padding:0 12px 12px 0; display:block; }
.mail-layout { height:100%; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); background:var(--surface); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.message-list-panel { min-width:0; border:0; grid-template-rows:auto auto auto minmax(0,1fr) auto; }
.panel-heading { min-height:78px; padding:15px 18px 11px; }
.panel-heading>div:first-child { display:flex; align-items:baseline; gap:12px; min-width:0; }
.panel-heading .eyebrow-label { display:none; }
.panel-heading h2 { font-size:22px; font-weight:500; letter-spacing:-.015em; }
.folder-description { margin:0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.heading-actions { gap:7px; }
.heading-actions select { height:36px; max-width:210px; border:0; background:var(--canvas); border-radius:18px; padding:0 32px 0 13px; }
.refresh-control { color:var(--muted); }
.category-tabs { display:flex; height:52px; gap:0; padding:0; border-bottom:1px solid var(--line); }
.category-tabs button {
  min-width:128px; height:52px; padding:0 18px; justify-content:flex-start; gap:10px; border-radius:0;
  position:relative; font-size:13px; font-weight:600;
}
.category-tabs button:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); }
.category-tabs button.active { background:transparent; color:var(--blue); }
.category-tabs button.active:after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--blue); }
.category-tabs button i { width:9px; height:9px; }
.category-tabs button b { margin-left:auto; background:var(--canvas); }
.bulk-toolbar { height:48px; grid-template-columns:auto 1fr repeat(4,38px); padding:0 17px; background:var(--blue-soft); }

/* Desktop rows use Gmail's quick scanning rhythm: sender, subject, preview, time */
.message-list { padding:0; background:var(--surface); }
body .message-item {
  width:100%; min-height:46px; padding:0 13px!important; gap:8px!important;
  grid-template-columns:28px 30px minmax(0,1fr) 84px!important;
  border-radius:0; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 58%,var(--surface));
  transition:box-shadow .12s,background .12s; transform:none!important;
}
.message-item.unread { background:var(--surface); }
.message-item.unread:before { display:none; }
.message-item:hover,.message-item.active { z-index:2; background:var(--surface); box-shadow:0 1px 5px rgba(30,45,65,.2); }
.message-item .sender-avatar { display:none; }
.select-message { opacity:.38; }
.message-item:hover .select-message,.select-message:has(input:checked) { opacity:1; }
.select-message input { width:16px; height:16px; }
.star-button { color:var(--muted-2); width:30px; height:32px; display:grid; place-items:center; }
.star-button:hover { background:var(--canvas-strong); }
.star-button.is-starred { color:var(--brand-orange); }
.message-open {
  height:45px; display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); align-items:center; gap:12px;
}
.message-row { min-width:0; }
.message-row strong { font-size:13px; font-weight:500; }
.message-item.unread .message-row strong,.message-item.unread .message-subject { font-weight:700; }
.message-summary { min-width:0; display:flex; align-items:center; gap:5px; overflow:hidden; white-space:nowrap; }
.message-subject { flex:none; max-width:45%; margin:0; font-size:13px; font-weight:500; }
.message-preview { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:13px; }
.message-preview:before { content:"— "; }
.label-strip { height:auto; margin:0 0 0 4px; flex:none; }
.mini-label,.nudge-chip { line-height:18px; }
.message-meta { justify-self:end; align-self:center!important; margin:0!important; padding-right:4px; color:var(--muted); font-size:11px; font-weight:600; }
.row-actions { display:none; position:absolute; right:9px; top:5px; height:36px; align-items:center; padding-left:16px; background:linear-gradient(90deg,transparent,var(--surface) 18%); }
.message-item:hover .row-actions,.message-item:focus-within .row-actions { display:flex; }
.row-action { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.row-action:hover { color:var(--ink); background:var(--canvas-strong); }
.row-action .ui-icon { width:18px; height:18px; }
.message-item:hover .message-meta,.message-item:focus-within .message-meta { opacity:0; }
.pagination { min-height:42px; padding:6px 18px; justify-content:flex-end; gap:18px; }
.pagination>span:first-child { margin-right:auto; }

/* A conversation replaces the list, matching the familiar Back-to-Inbox flow */
.reader { display:none; min-width:0; padding:0; background:var(--surface); }
.mail-layout.reader-active .message-list-panel { display:none; }
.mail-layout.reader-active .reader { display:block; }
.reader-card { max-width:none; min-height:100%; margin:0; border:0; border-radius:0; box-shadow:none; }
.reader-toolbar { top:0; min-height:56px; padding:8px 18px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,transparent); }
.reader-toolbar .icon-button { width:36px; height:36px; }
.message-header { max-width:1080px; margin:0 auto; padding:28px 48px 22px; }
.message-title-line h1,.message-header h1 { margin:0 0 24px; font-size:24px; font-weight:500; }
.sender-line .sender-avatar { border-radius:50%; }
.message-body { max-width:1080px; min-height:280px; margin:0 auto; padding:30px 48px 46px; border-top:0; font-size:14px; }
.attachments,.calendar-card,.quick-replies,.reader-footer { max-width:984px; margin-left:auto; margin-right:auto; }
.reader-footer { padding-bottom:40px; }
.reader-welcome { display:none; }

/* Compose stays available while browsing, like a modern desktop mail client */
.compose-dialog {
  position:fixed; inset:auto 24px 0 auto; width:min(680px,calc(100% - 32px)); max-height:calc(100vh - 84px); margin:0;
  border-radius:12px 12px 0 0; box-shadow:0 8px 35px rgba(17,31,51,.32); overflow:hidden;
}
.compose-dialog::backdrop { background:transparent; backdrop-filter:none; pointer-events:none; }
.compose-dialog>form { max-height:calc(100vh - 84px); }
.compose-dialog form>header { height:42px; min-height:42px; padding:0 10px 0 15px; color:#e8eefc; background:var(--brand-navy); border:0; }
.compose-dialog header .compose-icon { display:none; }
.compose-dialog header strong { color:#f5f8ff; font-size:13px; }
.compose-dialog header small { color:#bac7dc; }
.compose-dialog header .icon-button { width:30px; height:30px; color:#d6dfef; border-radius:5px; }
.compose-dialog header .icon-button:hover { background:rgba(255,255,255,.12); }
.compose-fields { padding:0 16px; }
.compose-fields label { min-height:40px; grid-template-columns:48px 1fr auto; }
.subject-input { padding:13px 0; font-size:14px; }
.format-toolbar { order:2; }
.compose-body[contenteditable] { min-height:260px; max-height:42vh; padding:14px 0; }
.compose-dialog footer { min-height:58px; padding:9px 13px; }
.send-button { order:-1; min-width:92px; border-radius:18px; }
.compose-dialog footer .send-button { margin-left:0; margin-right:4px; }
.send-button .ui-icon { display:none; }
.compose-dialog.minimized { inset:auto 24px 0 auto; width:300px; }

/* Supporting surfaces */
.modal,.wide-modal,.mini-modal { border-radius:14px; }
.modal-card>header { min-height:64px; }
.workspace-tabs { top:64px; }
.button { border-radius:18px; }
.button.primary { background:var(--brand-blue); }
.toast-region { top:auto; right:auto; left:24px; bottom:22px; }
.toast { min-width:280px; border-radius:5px; background:#323232; }

/* Collapsed rail */
.app-shell.nav-collapsed { grid-template-columns:72px minmax(0,1fr); }
.app-shell.nav-collapsed .topbar { grid-template-columns:256px minmax(260px,720px) minmax(190px,1fr); }
.app-shell.nav-collapsed .sidebar { padding-right:0; }
.app-shell.nav-collapsed .compose-button { width:52px; padding:0; justify-content:center; border-radius:16px; }
.app-shell.nav-collapsed .compose-button span,
.app-shell.nav-collapsed .sidebar nav button span,
.app-shell.nav-collapsed .sidebar nav button b,
.app-shell.nav-collapsed .sidebar-bottom>button span,
.app-shell.nav-collapsed .sidebar-bottom>button b,
.app-shell.nav-collapsed .nav-label,
.app-shell.nav-collapsed .sidebar-section,
.app-shell.nav-collapsed .account-chip div,
.app-shell.nav-collapsed .account-chip button { display:none; }
.app-shell.nav-collapsed .sidebar nav button,.app-shell.nav-collapsed .sidebar-bottom>button { width:48px; padding:0; justify-content:center; border-radius:0 18px 18px 0; }
.app-shell.nav-collapsed .account-chip { margin:10px 0 0 14px; padding:13px 0 0; display:block; border:0; }

@media(max-width:1100px) {
  .topbar { grid-template-columns:230px minmax(240px,1fr) auto; gap:10px; }
  .mail-brand img { width:145px; }
  .connection-status span { display:none; }
  .category-tabs button { min-width:0; flex:1; justify-content:center; }
  .message-open { grid-template-columns:minmax(110px,160px) minmax(0,1fr); }
  .folder-description { display:none; }
}

@media(max-width:780px) {
  :root { --topbar:64px; }
  body { overflow:hidden; }
  .app-shell,.app-shell.nav-collapsed { display:grid; grid-template-columns:1fr; grid-template-rows:var(--topbar) minmax(0,1fr); grid-template-areas:"header" "workspace"; }
  .topbar,.app-shell.nav-collapsed .topbar { grid-template-columns:44px minmax(0,1fr) auto; gap:5px; padding:7px 9px 7px 7px; }
  .topbar-brand { display:contents; }
  .mail-brand { display:none; }
  .search-wrap { height:44px; padding-left:13px; gap:8px; }
  .search-wrap kbd,.search-wrap #search-help { display:none; }
  .topbar-actions { gap:0; }
  .topbar-actions .theme-control,.topbar-actions .connection-status { display:none; }
  .top-account { width:38px; height:38px; }
  .top-account .avatar { width:32px; height:32px; }
  .sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:min(300px,88vw); padding:10px 12px 14px 0; transform:translateX(-105%); box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .mobile-sidebar-brand { height:54px; margin:0 4px 12px 14px; padding:0; display:flex; }
  .mobile-sidebar-brand img { width:176px; max-height:50px; }
  .compose-button { width:164px!important; padding:0 20px!important; justify-content:flex-start!important; }
  .compose-button span,.sidebar nav button span,.sidebar nav button b,.sidebar-bottom>button span,.sidebar-bottom>button b,.nav-label,.sidebar-section,.account-chip div,.account-chip button { display:initial!important; }
  .sidebar nav button,.sidebar-bottom>button { width:calc(100% - 8px)!important; padding:0 16px 0 25px!important; justify-content:flex-start!important; }
  .account-chip { display:grid!important; margin:10px 10px 0 16px!important; padding:13px 4px 0!important; border-top:1px solid var(--line)!important; }
  .workspace { height:100%; padding:0; }
  .mail-layout { border-radius:0; box-shadow:none; }
  .message-list-panel { height:100%; }
  .panel-heading { min-height:66px; padding:11px 13px 8px; }
  .panel-heading h2 { font-size:20px; }
  .heading-actions select { max-width:135px; }
  .category-tabs { height:48px; overflow-x:auto; }
  .category-tabs button { flex:0 0 auto; min-width:70px; height:48px; padding:0 8px; gap:6px; font-size:10px; }
  body .category-tabs button span { display:inline; }
  body .message-item { min-height:68px; padding:7px 9px!important; grid-template-columns:20px 26px 38px minmax(0,1fr) auto!important; gap:7px!important; }
  .message-item .sender-avatar { display:grid; width:38px; height:38px; border-radius:50%; }
  .message-open { height:54px; display:block; min-width:0; }
  .message-row strong { font-size:13px; }
  .message-summary { display:block; }
  .message-subject { display:block; max-width:none; margin:3px 0 2px; }
  .message-preview { display:block; max-width:58vw; }
  .message-preview:before { display:none; }
  .label-strip { display:none; }
  .message-meta { align-self:start!important; padding-top:4px; }
  .row-actions { display:none!important; }
  .message-item:hover .message-meta,.message-item:focus-within .message-meta { opacity:1; }
  .reader { position:static; inset:auto; height:100%; padding:0; }
  .reader-toolbar { overflow-x:auto; }
  .message-header,.message-body { padding-left:20px; padding-right:20px; }
  .message-body { min-height:220px; }
  .compose-dialog { inset:0; width:100%; height:100%; max-height:100%; border-radius:0; }
  .compose-dialog>form { height:100%; max-height:100%; }
  .compose-dialog form>header { height:54px; min-height:54px; }
  .compose-body[contenteditable] { min-height:calc(100vh - 330px); max-height:none; }
  .compose-dialog.minimized { inset:auto 10px 0 auto; width:calc(100% - 20px); height:auto; border-radius:12px 12px 0 0; }
  .toast-region { left:12px; right:12px; bottom:12px; }
  .toast { min-width:0; max-width:none; }
}

@media(prefers-reduced-motion:reduce) {
  .app-shell,.topbar,.compose-button { transition:none; }
}