/* =====================================================================
   modal.css — Branch detail modal, settings modal, context menu
   ===================================================================== */

.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(16, 31, 51, 0.45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--sp-6);
  animation: fade-in var(--t-base) var(--ease);
}
.modal-overlay.is-closing { animation: fade-out var(--t-base) var(--ease) forwards; }

.modal {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(860px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modal-pop var(--t-slow) var(--ease-out);
}
.modal.modal-sm { width: min(480px, 100%); }
.modal.modal-wide { width: min(1120px, 100%); }

/* ---- Deployed Sites modal ---- */
.sites-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--text-faint);
}
.sites-search input {
  flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); color: var(--text-default);
  background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sites-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.sites-search .sites-count { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }

.sites-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.site-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--cat, var(--color-primary));
  border-radius: var(--radius);
  background: #fff;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.site-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.site-card-head { display: flex; align-items: center; gap: var(--sp-2); }
.site-cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--cat, var(--color-primary));
  text-transform: uppercase; letter-spacing: 0.03em;
}
.site-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--color-primary)); }
.site-open {
  margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 6px; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast);
}
.site-open:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.site-host {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-primary);
  text-decoration: none; word-break: break-all;
}
.site-host:hover { text-decoration: underline; }
.site-url { font-size: var(--fs-xs); color: var(--text-faint); word-break: break-all; }
.site-branch {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-default);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 3px 8px; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.site-branch:hover { border-color: var(--color-primary); color: var(--color-primary); }
.site-branch svg { width: 12px; height: 12px; }
.site-commit {
  font-size: var(--fs-sm); color: var(--text-default); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.site-foot {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
  padding-top: var(--sp-2); border-top: 1px dashed var(--color-border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.site-foot .site-author { font-weight: var(--fw-medium); color: var(--text-default); }
.site-foot .site-time { margin-left: auto; white-space: nowrap; }
.modal-overlay.is-closing .modal { animation: modal-pop-out var(--t-base) var(--ease) forwards; }

/* ---- Modal header ---- */
.modal-header {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #fff, #fbfcfe);
}
.modal-header .mh-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.modal-title-wrap { flex: 1; min-width: 0; }
.modal-title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong);
  word-break: break-word; line-height: 1.25;
}
.modal-subtitle { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 6px; }
.modal-close {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0;
  font-size: 22px; line-height: 1; transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---- Modal body ---- */
.modal-body { overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }

/* Tabs */
.modal-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--color-border); padding: 0 var(--sp-6); background: #fff; }
.modal-tab {
  padding: var(--sp-3) var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--text-muted); border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.modal-tab:hover { color: var(--text-strong); }
.modal-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; flex-direction: column; gap: var(--sp-4); }
.tab-panel.is-active { display: flex; animation: fade-in var(--t-base) var(--ease); }

/* Info grid */
.info-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.info-item { padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.info-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.info-value { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); margin-top: 2px; word-break: break-word; }

.modal-section-title {
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong);
  text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: var(--sp-2);
}
.modal-section-title .count-pill {
  font-size: var(--fs-xs); background: var(--color-primary-soft); color: var(--color-primary);
  padding: 1px 8px; border-radius: var(--radius-pill);
}

/* Commit timeline / graph */
.commit-timeline { display: flex; flex-direction: column; }
.commit-node { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-3); position: relative; }
.commit-node:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 26px; bottom: -2px; width: 2px; background: var(--color-border);
}
.commit-graph-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center; background: #fff;
  border: 2px solid var(--color-primary); color: var(--color-primary);
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-bold);
}
.commit-graph-dot.verified { border-color: var(--color-success); color: var(--color-success); }
.commit-detail { flex: 1; min-width: 0; }
.commit-detail .cd-msg { font-size: var(--fs-md); color: var(--text-strong); font-weight: var(--fw-medium); }
.commit-detail .cd-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* List rows (commits, MRs, sites) */
.list-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.list-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-size: var(--fs-md); color: var(--text-strong); font-weight: var(--fw-medium); }
.list-row .lr-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 1px; }
.list-row .lr-time { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }

/* Contributors */
.contributor-stack { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.contributor { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px 4px 4px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; }
.contributor .c-count { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); }

/* Modal footer actions */
.modal-footer {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  transition: all var(--t-fast); border: 1px solid transparent;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn-ghost { background: #fff; border-color: var(--color-border); color: var(--text-default); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn.copied { background: var(--color-success); color: #fff; border-color: var(--color-success); }

/* ---- Settings form ---- */
.settings-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.settings-field label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.settings-field input {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--fs-md); color: var(--text-default); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.settings-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.settings-field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.settings-row { display: flex; gap: var(--sp-3); }
.settings-row > * { flex: 1; }

/* Context menu */
.context-menu {
  position: fixed; z-index: var(--z-context);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: var(--sp-1); min-width: 200px;
  animation: drop-in var(--t-fast) var(--ease-out);
}
.context-menu button {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-md); color: var(--text-default); transition: background var(--t-fast);
}
.context-menu button svg { width: 14px; height: 14px; color: var(--text-muted); }
.context-menu button:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.context-menu button:hover svg { color: var(--color-primary); }
.context-menu .ctx-sep { height: 1px; background: var(--color-border); margin: var(--sp-1) 0; }