/* ==========================================================================
   AS Solutions — webmail app
   ========================================================================== */

.wm-body{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* ---------- language switcher ---------- */
.wm-lang-select{
  background: transparent;
  border:1px solid var(--hairline);
  color: var(--ink-dim);
  font-family:'Inter',sans-serif;
  font-size:12px;
  padding:7px 10px;
  outline:none;
  cursor:pointer;
}
.wm-lang-select:hover, .wm-lang-select:focus{ border-color: var(--gold); color: var(--ink); }
.wm-lang-select option{ background: var(--bg-alt); color: var(--ink); }
.wm-lang-bar{ display:flex; justify-content:flex-end; padding: 20px clamp(20px, 5vw, 40px) 0; }

/* ---------- login ---------- */
.wm-login-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.wm-login-card{
  width:100%;
  max-width:360px;
  border:1px solid var(--hairline-soft);
  padding:40px 36px;
}
.wm-login-card h1{
  font-size:28px;
  margin-bottom:28px;
}
.wm-login-btn{
  width:100%;
  justify-content:center;
  margin-top:6px;
}
.wm-error{
  font-size:13px;
  color:#c17a5f;
  margin-top:14px;
  min-height:1em;
}

/* shared field style (mirrors contact.html) */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:9px; }
.field input, .field textarea{
  width:100%; background:transparent; border:1px solid var(--hairline);
  color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; padding:10px 12px; outline:none;
  transition: border-color .3s ease; resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--gold); }

/* ---------- header ---------- */
.wm-header{
  display:flex; align-items:center; gap:20px;
  padding: 14px clamp(20px, 4vw, 40px);
  border-bottom:1px solid var(--hairline-soft);
  background: var(--bg-alt);
}
.wm-menu-btn{
  display:none; flex-shrink:0; background:none; border:none; color:var(--ink);
  width:34px; height:34px; padding:0; cursor:pointer; align-items:center; justify-content:center;
}
.wm-menu-btn svg{ width:22px; height:22px; }
.wm-brand{ font-size:14px; color:var(--ink); display:flex; gap:10px; align-items:baseline; white-space:nowrap; }
.wm-search-wrap{ flex:1; max-width:420px; }
.wm-search{
  width:100%; background:transparent; border:1px solid var(--hairline);
  color:var(--ink); font-family:'Inter',sans-serif; font-size:13.5px; padding:9px 14px; outline:none;
  transition: border-color .3s ease;
}
.wm-search:focus{ border-color:var(--gold); }
.wm-search::placeholder{ color:var(--ink-faint); }
.wm-header-actions{ display:flex; gap:10px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.wm-btn-sm{ padding:9px 16px; font-size:11.5px; }

/* ---------- layout ---------- */
.wm-folders-backdrop{ display:none; }

.wm-main{
  flex:1;
  display:grid;
  grid-template-columns: 160px 320px 1fr;
  min-height:0;
}
@media (max-width:1100px){
  .wm-main{ grid-template-columns: 140px 280px 1fr; }
}
@media (max-width:900px){
  .wm-header{ flex-wrap:wrap; row-gap:10px; padding-top:12px; padding-bottom:12px; }
  .wm-search-wrap{ order:3; flex-basis:100%; max-width:none; }
  .wm-header-actions{ margin-left:auto; }
  .wm-menu-btn{ display:flex; }

  .wm-main{ grid-template-columns: 1fr; }

  .wm-folders{
    position:fixed; top:0; left:0; bottom:0; width:280px; max-width:82vw;
    z-index:95; background:var(--bg); transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:10px 0 30px rgba(0,0,0,.45);
  }
  .wm-folders.open{ transform:translateX(0); }
  .wm-folders-backdrop.open{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90;
  }

  .wm-reader{ display:none; }
  .wm-reader.wm-reader-active{ display:block; }
  .wm-main:has(.wm-reader.wm-reader-active) .wm-list{ display:none; }
}
@media (max-width:420px){
  .wm-header-actions{ gap:6px; }
  .wm-btn-sm{ padding:8px 11px; font-size:10.5px; }
}

/* ---------- folder nav ---------- */
.wm-folders{
  border-right:1px solid var(--hairline-soft);
  padding: 18px 0;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.wm-accounts{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.wm-account-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  width:100%; text-align:left; background:none; border:none; border-left:2px solid transparent;
  color: var(--ink-faint); font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:.02em;
  padding:10px 20px; cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
  word-break:break-all;
}
.wm-account-item:hover{ color: var(--ink-dim); background: var(--hairline-soft); }
.wm-account-item.active{ color: var(--gold); border-left-color: var(--gold); }
.wm-account-remove{
  flex-shrink:0; background:none; border:none; color:var(--ink-faint); font-size:14px;
  cursor:pointer; padding:0 2px; line-height:1;
}
.wm-account-remove:hover{ color:#c17a5f; }
.wm-add-gmail-btn{
  width:calc(100% - 40px); margin: 6px 20px 16px;
  background:none; border:1px dashed var(--hairline); color:var(--ink-dim);
  font-family:'Inter',sans-serif; font-size:11.5px; padding:9px 10px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.wm-add-gmail-btn:hover{ border-color:var(--gold); color:var(--gold); }
.wm-folder-list{
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--hairline-soft); padding-top:10px;
}
.wm-folder-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; background:none; border:none; border-left:2px solid transparent;
  color: var(--ink-dim); font-family:'Inter',sans-serif; font-size:13px;
  padding:11px 20px; cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wm-folder-item:hover{ color: var(--ink); background: var(--hairline-soft); }
.wm-folder-item.active{ color: var(--ink); border-left-color: var(--gold); background: var(--gold-soft); }
.wm-unread-badge{
  background: var(--gold); color:#14120e; font-size:10.5px; font-weight:600;
  border-radius:10px; padding:1px 7px; line-height:1.5;
}

.wm-list{
  border-right:1px solid var(--hairline-soft);
  overflow-y:auto;
}
.wm-empty{
  padding:28px 24px;
  color:var(--ink-dim);
  font-size:13.5px;
}

.wm-msg-item{
  display:flex; align-items:flex-start; gap:10px;
  width:100%;
  text-align:left;
  padding:16px 20px;
  border-bottom:1px solid var(--hairline-soft);
  background:none; border-left:2px solid transparent;
  cursor:pointer;
  color:var(--ink);
  transition: background .2s ease, border-color .2s ease;
}
.wm-msg-item:hover{ background: var(--hairline-soft); }
.wm-msg-item.active{ border-left-color: var(--gold); background: var(--gold-soft); }
.wm-msg-avatar{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background: var(--hairline-soft); color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; text-transform:uppercase;
  font-family:'Inter',sans-serif;
}
.wm-msg-body{ flex:1; min-width:0; }
.wm-msg-item .wm-msg-from{
  font-size:13.5px; font-weight:500;
  display:flex; justify-content:space-between; gap:10px;
}
.wm-msg-item.unread .wm-msg-from{ color:var(--ink); font-weight:600; }
.wm-msg-item:not(.unread) .wm-msg-from{ color:var(--ink-dim); font-weight:500; }
.wm-msg-item .wm-msg-date{ font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.wm-msg-item .wm-msg-subject{
  font-size:13px; color:var(--ink-dim); margin-top:5px;
  display:flex; align-items:center; gap:6px;
}
.wm-msg-item.unread .wm-msg-subject{ color:var(--ink); }
.wm-star-dot{ color: var(--gold); font-size:12px; flex-shrink:0; }
.wm-load-more{
  display:block; width:100%; text-align:center; padding:14px;
  background:none; border:none; color:var(--ink-dim); font-size:12.5px;
  cursor:pointer; letter-spacing:.04em; text-transform:uppercase;
}
.wm-load-more:hover{ color:var(--gold); }

/* ---------- reader ---------- */
.wm-reader{
  overflow-y:auto;
  padding: clamp(20px, 4vw, 40px);
}
.wm-reader-header{ margin-bottom:22px; }
.wm-reader-header h2{ font-size:22px; margin-bottom:10px; }
.wm-reader-meta{ font-size:13px; color:var(--ink-dim); line-height:1.8; }
.wm-reader-actions{ display:flex; gap:10px; margin:20px 0 0; flex-wrap:wrap; }
.wm-reader-body{ margin-top:26px; }
.wm-reader-body iframe{
  width:100%; min-height:320px; border:none; background:var(--ink); border-radius:2px;
}
.wm-reader-body pre{
  white-space:pre-wrap; word-wrap:break-word;
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.7; color:var(--ink);
}
.wm-attachments{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--hairline-soft);
  font-size:12.5px; color:var(--ink-dim);
}
.wm-attachments h5{ margin:0 0 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
.wm-attachment-link{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--hairline); padding:7px 12px; margin:0 8px 8px 0;
  color:var(--ink); font-size:12.5px; cursor:pointer; background:none;
  transition:border-color .2s ease, color .2s ease;
}
.wm-attachment-link:hover{ border-color:var(--gold); color:var(--gold); }
.wm-back-btn{ display:none; margin-bottom:18px; }
@media (max-width:900px){ .wm-back-btn{ display:inline-flex; } }

/* ---------- compose modal ---------- */
.wm-modal-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.wm-modal-backdrop.open{ display:flex; }
.wm-modal{
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  background: var(--bg-alt); border:1px solid var(--hairline-soft);
  padding:32px;
}
.wm-modal h3{ font-size:20px; margin-bottom:22px; }
.wm-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }

.wm-modal-wide{ max-width:820px; max-height:85vh; overflow-y:auto; }
@media (max-width:480px){
  .wm-modal, .wm-modal-wide{ padding:24px 20px; }
}
.wm-modal-wide h4{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin:28px 0 14px; font-weight:500; }
.wm-modal-wide h4:first-of-type{ margin-top:0; }
.wm-section-head{ display:flex; align-items:center; justify-content:space-between; margin:28px 0 14px; }
.wm-section-head h4{ margin:0; }
.wm-section-head:first-of-type{ margin-top:0; }
.wm-table-wrap{ overflow-x:auto; border:1px solid var(--hairline-soft); }
.wm-table{ width:100%; border-collapse:collapse; font-size:13px; }
.wm-table th, .wm-table td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--hairline-soft); white-space:nowrap; }
.wm-table th{ color:var(--ink-dim); font-weight:500; font-size:11px; letter-spacing:.05em; text-transform:uppercase; background:var(--bg-alt); }
.wm-table tbody tr:last-child td{ border-bottom:none; }
.wm-table td{ color:var(--ink); }
.wm-result-success{ color:#8fae7a; }
.wm-result-failed{ color:#c17a5f; }
.wm-table .wm-btn-sm{ padding:6px 12px; font-size:10.5px; }
.wm-table td:last-child{ white-space:normal; display:flex; gap:6px; flex-wrap:wrap; }

.wm-modal-sub{ font-size:12.5px; color:var(--ink-dim); margin:-14px 0 20px; }

/* ---------- admin client-feed viewer ---------- */
.wm-feed-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:10px; }
.wm-feed-post{ border:1px solid var(--hairline-soft); padding:16px; }
.wm-feed-post-meta{ font-size:11.5px; color:var(--ink-faint); margin-bottom:10px; }
.wm-feed-post-text{ font-size:13.5px; line-height:1.6; color:var(--ink); margin-bottom:10px; white-space:pre-wrap; }
.wm-feed-post-image{ margin-bottom:10px; }
.wm-feed-post-image img{ max-width:100%; display:block; }
.wm-feed-comments{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.wm-feed-comment{ font-size:12.5px; color:var(--ink-dim); }
.wm-feed-comment-author{ font-weight:600; color:var(--ink); }
.wm-feed-comment-author.is-admin{ color:var(--gold); }
.wm-feed-comment-form{ display:flex; gap:8px; margin-bottom:12px; }
.wm-feed-comment-form input{
  flex:1; background:transparent; border:1px solid var(--hairline);
  color:var(--ink); font-family:'Inter',sans-serif; font-size:12.5px; padding:7px 10px; outline:none;
}
.wm-feed-comment-form input:focus{ border-color:var(--gold); }