/* ─── dashboard styles (v10.18) ──────────────────────────────────────── */
/* Light, focused stylesheet for mohdor.com/. Inherits no rules from the
   chat client's app.css — this file is loaded standalone on the dashboard. */

:root {
  --bg:      #0a0d0a;
  --fg:      #cfe8cf;
  --dim:     #6b8a6b;
  --accent:  #b0e6b0;
  --accent2: #4a6a4a;
  --brass:   #ffd070;
  --warn:    #e07a7a;
  --mono:    "Menlo", "Consolas", "Monaco", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
.dim { color: var(--dim); }
.hint { font-style: italic; font-size: 0.88em; }
.small { font-size: 0.82em; }
.ok-msg { color: var(--accent); }
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--brass); }
.dash-rule { text-align: center; color: var(--accent); margin: 14px 0 6px; letter-spacing: 0.1em; font-size: 0.9em; }
.section-rule {
  color: var(--dim);
  font-size: 0.82em;
  margin: 20px 0 8px;
  letter-spacing: 0.05em;
  border-top: 1px dashed var(--accent2);
  padding-top: 14px;
  text-align: center;
}

/* ─── login surface ──────────────────────────────────────────────── */
.dash-login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* v10.25: extend padding under iOS notch / dynamic island when in PWA mode */
  padding: calc(40px + env(safe-area-inset-top, 0px)) 20px calc(40px + env(safe-area-inset-bottom, 0px));
}
.dash-login-box {
  max-width: 480px;
  width: 100%;
}
.dash-login-banner { text-align: center; margin-bottom: 24px; }
.dash-login-form, #dash-login-form, #dash-request-form { display: flex; flex-direction: column; gap: 8px; }
.dash-login-form label, #dash-login-form label, #dash-request-form label {
  color: var(--dim);
  font-size: 0.82em;
  margin-bottom: -4px;
}
#dash-login-form input, #dash-request-form input, #dash-request-form textarea {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--fg);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.95em;
  border-radius: 2px;
}
#dash-login-form input:focus, #dash-request-form input:focus, #dash-request-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.dash-login-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.dash-auth-toggle { cursor: pointer; font-size: 0.88em; color: var(--dim); }
.dash-auth-toggle:hover { color: var(--accent); }
.dash-login-error { color: var(--warn); font-size: 0.88em; }
#dash-request-form .field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }

/* shared buttons */
.dash-btn {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--fg);
  padding: 7px 16px;
  font-family: var(--mono);
  font-size: 0.92em;
  cursor: pointer;
  border-radius: 2px;
}
.dash-btn:hover { background: rgba(176,230,176,0.1); border-color: var(--accent); color: var(--accent); }
.dash-btn:disabled { opacity: 0.5; cursor: wait; }
.dash-btn-primary {
  color: var(--accent);
  border-color: var(--accent);
}
.dash-btn-primary:hover { background: rgba(176,230,176,0.18); }

.dash-mini-btn {
  display: inline-block;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--accent2);
  color: var(--fg);
  font-size: 0.84em;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.dash-mini-btn:hover { background: rgba(176,230,176,0.1); border-color: var(--accent); color: var(--accent); }

/* ─── dashboard (authed) ─────────────────────────────────────────── */
.dash {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* v10.25: in iOS standalone (Add to Home Screen) PWA mode, the page
     starts at the very top of the viewport with the iOS status bar
     translucently overlaying it. Push the dashboard down so the top
     header is fully visible below the status bar. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--accent2);
  flex-wrap: wrap;
  gap: 8px;
}
.dash-greeting {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dash-handle {
  color: var(--accent);
  font-weight: bold;
  font-size: 1.05em;
}
.dash-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-link {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9em;
  padding: 4px 10px;
  border-radius: 2px;
}
.dash-link:hover { color: var(--accent); background: rgba(176,230,176,0.08); }

.dash-body-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .dash-body-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .dash-body-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* v10.32: size-class wrappers (assigned by renderDashboard based on
   widgets_layout). Replaces the older per-widget grid-column rules.
     compact = fits in 1 grid column always
     normal  = fits in 1 grid column (same as compact for now but a
               distinct option so we can tune density later)
     wide    = spans the whole row at every breakpoint */
.dash-card.dash-card-sz-compact { grid-column: span 1; }
.dash-card.dash-card-sz-normal  { grid-column: span 1; }
.dash-card.dash-card-sz-wide    { grid-column: 1 / -1; }

/* compact pulls in the padding a little and shrinks list/grid contents */
.dash-card-sz-compact {
  padding: 10px 12px;
}
.dash-card-sz-compact .dash-card-title { font-size: 0.78em; }
.dash-card-sz-compact .dash-mod-buttons { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.dash-card-sz-compact .dash-links-grid  { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.dash-card-sz-compact .dash-link-chip   { padding: 6px 8px; font-size: 0.85em; }
.dash-card-sz-compact .dash-link-chip-name { font-size: 0.82em; }
.dash-card-sz-compact .dash-room-list   { font-size: 0.92em; }
.dash-card-sz-compact .dash-roulette-text { font-size: 0.95em; }
.dash-card-sz-compact .dash-desk-top    { font-size: 0.92em; }

/* cards */
.dash-card {
  border: 1px solid var(--accent2);
  border-radius: 3px;
  padding: 12px 14px;
  background: rgba(176,230,176,0.02);
}
.dash-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-card-title {
  color: var(--accent);
  font-size: 0.86em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-card-action {
  cursor: pointer;
  color: var(--dim);
  font-size: 1.05em;
  padding: 0 4px;
}
.dash-card-action:hover { color: var(--accent); }

/* modules strip */
.dash-mod-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.dash-mod-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--accent2);
  border-radius: 3px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.1s, border-color 0.1s;
}
.dash-mod-btn:hover {
  background: rgba(176,230,176,0.1);
  border-color: var(--accent);
  color: var(--accent);
}
.dash-mod-icon { font-size: 1.6em; line-height: 1; }
.dash-mod-name { font-size: 0.88em; }

/* weather card */
.dash-card-weather { cursor: pointer; }
.dash-card-weather.not-configured { cursor: default; }
.dash-weather-main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.dash-weather-icon { font-size: 2.6em; line-height: 1; flex-shrink: 0; }
.dash-weather-info { flex: 1; min-width: 0; }
.dash-weather-temp {
  font-size: 2em;
  color: var(--accent);
  line-height: 1;
}
.dash-weather-temp .unit { font-size: 0.5em; color: var(--dim); margin-left: 2px; }
.dash-weather-desc {
  font-size: 0.92em;
  text-transform: capitalize;
  margin-top: 2px;
}
.dash-weather-meta { font-size: 0.78em; margin-top: 4px; word-break: break-word; }
.dash-weather-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* roulette card */
.dash-roulette-prompt {
  padding: 10px 0;
  margin-bottom: 8px;
}
.dash-roulette-text {
  font-size: 0.98em;
  color: var(--fg);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
  padding-left: 10px;
  border-left: 2px solid var(--brass);
}
.dash-roulette-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* rooms */
.dash-room-list { list-style: none; padding: 0; margin: 0; }
.dash-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(176,230,176,0.05);
  gap: 8px;
}
.dash-room-row.has-activity { background: rgba(255,208,112,0.04); }
.dash-room-row:last-child { border-bottom: none; }
.dash-room-link {
  flex: 1;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.94em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-room-link:hover { color: var(--accent); }
.dash-room-flags { display: flex; gap: 4px; flex-shrink: 0; }
.dash-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.76em;
}
.dash-badge-mention {
  background: rgba(255,208,112,0.16);
  color: var(--brass);
}
.dash-badge-unread {
  background: rgba(176,230,176,0.14);
  color: var(--accent);
}

/* command line at the bottom */
.dash-foot {
  border-top: 1px solid var(--accent2);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.3);
  position: sticky;
  bottom: 0;
  flex-wrap: wrap;
}
.dash-prompt {
  color: var(--accent);
  font-weight: bold;
  font-size: 1.05em;
}
#dash-cmd {
  flex: 1;
  min-width: 200px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent2);
  color: var(--fg);
  padding: 6px 4px;
  font-family: var(--mono);
  font-size: 0.95em;
  outline: none;
}
#dash-cmd:focus { border-bottom-color: var(--accent); }
.dash-cmd-hint {
  flex-basis: 100%;
  font-size: 0.8em;
  padding: 2px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dash-cmd-match { white-space: nowrap; }

/* lightbox */
.dash-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 16px;
  overflow-y: auto;
}
.dash-lightbox-inner {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 3px;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
}
.dash-lightbox-inner.dash-settings-lb { max-width: 700px; }
.dash-lightbox-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--accent2);
}
.dash-lightbox-h h3 {
  margin: 0;
  color: var(--accent);
  font-size: 1em;
}
.dash-lightbox-close {
  font-size: 1.5em;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dim);
}
.dash-lightbox-close:hover { color: var(--fg); background: rgba(176,230,176,0.1); }
.dash-lightbox-body {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}

/* weather detail content */
.dash-weather-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.dash-weather-detail-icon { font-size: 3.5em; line-height: 1; }
.dash-weather-detail-temp {
  font-size: 2.5em;
  color: var(--accent);
  line-height: 1;
}
.dash-weather-detail-temp .unit { font-size: 0.5em; color: var(--dim); }
.dash-weather-detail-h4 {
  color: var(--accent);
  font-size: 0.86em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 10px;
  border-bottom: 1px dashed var(--accent2);
  padding-bottom: 4px;
}
.dash-weather-forecast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}
.dash-forecast-day {
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--accent2);
  border-radius: 3px;
}
.dash-forecast-icon { font-size: 1.6em; line-height: 1.3; }
.dash-forecast-temp { color: var(--accent); font-size: 1.1em; }

/* settings lightbox */
.dash-set-section {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--accent2);
}
.dash-set-section:last-child {
  border-bottom: none;
}
.dash-set-section h4 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.92em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-cb {
  display: block;
  margin: 6px 0;
  cursor: pointer;
  user-select: none;
  font-size: 0.92em;
}
.dash-cb input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}
.dash-set-section .field {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-set-section .field label {
  color: var(--dim);
  font-size: 0.82em;
}
.dash-set-section .field input,
.dash-set-section .field select {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--fg);
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 0.92em;
  border-radius: 2px;
}
.dash-set-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* toasts */
.dash-toasts {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.dash-toast {
  background: rgba(10,15,10,0.95);
  border: 1px solid var(--accent);
  color: var(--fg);
  padding: 8px 14px;
  border-radius: 3px;
  font-size: 0.88em;
  max-width: 360px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s, transform 0.2s;
  white-space: pre-line;
}
.dash-toast.show { opacity: 1; transform: translateX(0); }

/* mobile tweaks */
@media (max-width: 480px) {
  .dash-head { padding: 8px 10px; }
  .dash-head-actions { gap: 6px; font-size: 0.85em; }
  .dash-body-grid { padding: 10px; gap: 10px; }
  .dash-card { padding: 10px 12px; }
  .dash-mod-buttons { grid-template-columns: repeat(3, 1fr); }
  .dash-mod-btn { padding: 8px 4px; }
  .dash-mod-icon { font-size: 1.4em; }
  .dash-mod-name { font-size: 0.78em; }
  .dash-weather-temp { font-size: 1.6em; }
  .dash-weather-icon { font-size: 2em; }
}

/* ─── v10.24: desk widget card ──────────────────────────────────── */
.dash-desk-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dash-desk-badge {
  display: inline-block;
  font-size: 0.78em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(176,230,176,0.1);
  color: var(--accent);
}
.dash-desk-badge.overdue { background: rgba(224,122,122,0.14); color: #e07a7a; }
.dash-desk-badge.today   { background: rgba(255,208,112,0.16); color: #ffd070; }
.dash-desk-badge.soon    { background: rgba(176,230,176,0.18); color: var(--accent); }
.dash-desk-badge.wip     { background: rgba(255,208,112,0.10); color: #ffd070; }
.dash-desk-badge.people  { background: rgba(176,230,176,0.1); color: var(--accent); }
.dash-desk-top {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.dash-desk-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 0.86em;
  cursor: pointer;
  border-radius: 2px;
}
.dash-desk-item:hover { background: rgba(176,230,176,0.05); }
.dash-desk-source { font-size: 0.85em; opacity: 0.7; }
.dash-desk-title { flex: 1; word-break: break-word; }
.dash-desk-due {
  font-size: 0.74em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(176,230,176,0.08);
  color: var(--dim);
  white-space: nowrap;
}

/* ─── v10.31: links favorites card on dashboard ────────────────────── */
/* (size + grid-column governed by the v10.32 size-class system) */
.dash-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.dash-link-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--accent2, #4a6a4a);
  border-radius: 3px;
  background: rgba(176,230,176,0.04);
  color: var(--fg, #cfe8cf);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
  min-width: 0;
}
.dash-link-chip:hover {
  border-color: var(--accent, #b0e6b0);
  background: rgba(176,230,176,0.1);
}
.dash-link-chip-icon {
  font-size: 1.05em;
  flex-shrink: 0;
}
.dash-link-chip-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.88em;
}

/* ─── v10.32: layout reorder + resize list (in settings dialog) ──── */
.dash-layout-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-layout-row {
  display: grid;
  grid-template-columns: 60px 1fr 140px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--accent2, #4a6a4a);
  border-radius: 3px;
  background: rgba(176,230,176,0.03);
}
.dash-layout-reorder {
  display: flex;
  gap: 4px;
}
.dash-layout-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--accent2);
  border-radius: 2px;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  font-size: 0.95em;
}
.dash-layout-arrow:hover {
  border-color: var(--accent);
  background: rgba(176,230,176,0.1);
}
.dash-layout-arrow.disabled {
  color: var(--dim);
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.dash-layout-name {
  color: var(--fg);
  font-size: 0.95em;
}
.dash-layout-size {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--fg);
  padding: 4px 6px;
  font-family: var(--mono, monospace);
  font-size: 0.85em;
  border-radius: 2px;
}
@media (max-width: 700px) {
  .dash-layout-row { grid-template-columns: 56px 1fr 110px; padding: 6px 8px; gap: 6px; }
  .dash-layout-name { font-size: 0.85em; }
  .dash-layout-size { font-size: 0.78em; }
}