/* ============================================================================
   dialogs.css  -  modal chrome shared by both themes: record sheet, settings,
   update notification. Falls back gracefully in the legacy theme (the modern
   CSS custom properties are undefined there, so each rule supplies a fallback).
   ========================================================================== */

/* ---- record sheet (modern only) ---- */
.recmodal { width: 900px; max-width: 94vw; border-radius: 16px; overflow: hidden; background: var(--surface, #fff); }
.recmodal .rm-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 16px 22px; position: relative; border-bottom: 1px solid var(--border, #e7eaf0); }
.recmodal .rm-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.recmodal .rm-headtxt { flex: 1; }
.recmodal .rm-head .h { font: 700 17px var(--mfont, "Segoe UI"); color: var(--text, #0f172a); }
.recmodal .rm-head .s { font-size: 12.5px; color: var(--label, #64748b); margin-top: 3px; }
.recmodal .rm-close { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--label, #64748b); }
.recmodal .rm-close:hover { background: var(--bg, #f1f5f9); }
.recmodal .rm-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; background: var(--bg, #f6f7fb); }
.recmodal .rm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border, #e7eaf0); }
.recmodal .rm-actions .note { flex: 1; color: var(--label, #64748b); font: italic 11.5px var(--mfont, "Segoe UI"); }

/* ---- settings dialog ---- */
.setdlg { width: 500px; max-width: 94vw; background: #fff; color: #0f172a; border-radius: 14px; overflow: hidden; font: 13px var(--mfont, "Segoe UI"); }
.setdlg .sd-title { background: var(--accent); color: #fff; padding: 12px 18px; font: 700 15px var(--mfont, "Segoe UI"); }
.setdlg .sd-body { padding: 16px 18px; max-height: 64vh; overflow: auto; }
.setdlg label.sl { display: block; color: #334155; font-weight: 600; font-size: 12px; margin: 14px 0 5px; }
.setdlg .sd-body > label.sl:first-child { margin-top: 0; }
.setdlg input[type=text], .setdlg select { width: 100%; height: 34px; border: 1px solid #d7dce5; border-radius: 8px; padding: 4px 10px; font: 13px var(--mfont, "Segoe UI"); background: #fff; color: #0f172a; }
.setdlg .iconrow { display: flex; gap: 8px; } .setdlg .iconrow input { flex: 1; } .setdlg .iconrow button { width: 84px; }
.setdlg .chk { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.setdlg .chk.indent { margin-left: 22px; }
.setdlg .updtab { margin: 10px 0 0 22px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #475569; }
.setdlg .updtab select { width: 260px; height: 32px; }
.setdlg .note { color: #94a3b8; margin-top: 16px; font-size: 12px; }
.setdlg .sd-btns { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid #eef1f6; }
.setdlg .iconrow button, .setdlg .sd-btns button { height: 36px; border-radius: 8px; border: 1px solid #d7dce5; background: #fff; color: #334155; font: 600 13px var(--mfont, "Segoe UI"); cursor: pointer; padding: 0 14px; }
.setdlg .sd-btns button { min-width: 88px; }
.setdlg .sd-btns button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.setdlg button:hover { filter: brightness(.97); }

/* ---- update notification ---- */
.upddlg { width: 480px; max-width: 94vw; border-radius: 14px; overflow: hidden; background: var(--surface, #fff); }
.upddlg .ud-head { background: var(--accent); color: #fff; padding: 16px 22px; }
.upddlg .ud-head .h { font: 700 20px var(--mfont, "Segoe UI"); }
.upddlg .ud-head .v { font-size: 12.5px; color: #eef0ff; margin-top: 5px; opacity: .95; }
.upddlg .ud-body { padding: 18px 22px 14px; color: var(--text, #1e1e1e); background: var(--surface, #fff); }
.upddlg .ud-body .line { font-size: 13px; }
.upddlg .ud-body .whats { font: 700 13px var(--mfont, "Segoe UI"); margin: 14px 0 7px; }
.upddlg .ud-notes { height: 188px; width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--bg, #f8fafc); color: var(--text, #1e1e1e); font: 12px var(--mfont, "Segoe UI"); padding: 10px; resize: none; white-space: pre; overflow: auto; }
.upddlg .ud-sub { font-size: 11.5px; color: var(--label, #94a3b8); margin: 10px 0 0; }
.upddlg .ud-btns { display: flex; gap: 10px; padding: 14px 22px 18px; }
.upddlg .ud-btns button { height: 38px; border-radius: 9px; cursor: pointer; font: 600 13px var(--mfont, "Segoe UI"); padding: 0 16px; }
.upddlg .ud-btns .now { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.upddlg .ud-btns .later, .upddlg .ud-btns .cancel { background: var(--surface, #fff); color: var(--text, #334155); border: 1px solid var(--border, #d7dce5); }
.upddlg .ud-btns button:hover { filter: brightness(.97); }