/* ui_kits/dashboard/kit.css — Overslash dashboard visual kit */
@import url("./colors_and_type.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--text-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* === layout === */
.ovs-app { display: flex; min-height: 100vh; }
.ovs-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ovs-page { flex: 1; padding: 24px 32px; overflow: auto; max-width: 1400px; width: 100%; }
.ovs-page-narrow { max-width: 1100px; }

.ovs-page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.ovs-page-title { font: var(--text-h1); margin: 0; color: var(--color-text-heading); }
.ovs-page-sub { font: var(--text-body-sm); color: var(--color-text-muted); margin-top: 2px; }

/* === sidebar === */
.ovs-sidebar {
  width: 240px; flex: none; background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  transition: width 0.15s ease;
  position: sticky; top: 0; height: 100vh;
}
.ovs-sidebar.is-collapsed { width: 64px; }
.ovs-sidebar-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.ovs-logo { display: flex; align-items: baseline; gap: 1px; font-weight: 700; font-size: 20px; color: var(--color-text-heading); letter-spacing: -0.01em;}
.ovs-logo-slash {
  font-family: var(--font-mono);
  font-weight: 800; font-size: 22px;
  color: var(--color-primary);
  display: inline-block; transform: skewX(-12deg);
}
.ovs-nav { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.ovs-nav-section {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 16px 12px 6px;
}
.ovs-nav-sep { height: 1px; background: var(--color-border-subtle); margin: 10px 8px; }
.ovs-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 0; background: transparent;
  color: var(--color-text-secondary); border-radius: 8px;
  font: var(--text-label); cursor: pointer; text-align: left;
  transition: background 0.1s;
}
.ovs-sidebar.is-collapsed .ovs-nav-item { justify-content: center; padding: 10px 0; }
.ovs-nav-item:hover { background: rgba(0,0,0,0.04); color: var(--color-text); }
.ovs-nav-item.is-active { background: var(--color-primary-subtle); color: var(--color-primary); font-weight: 500; }
.ovs-nav-glyph { font-size: 16px; line-height: 1; width: 20px; text-align: center; }
.ovs-nav-label { flex: 1; }
.ovs-nav-badge {
  background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 500;
  padding: 1px 6px; border-radius: 9999px; min-width: 18px; text-align: center;
}
.ovs-sidebar-foot { padding: 12px 8px; border-top: 1px solid var(--color-border-subtle); }
.ovs-collapse {
  width: 100%; padding: 8px 12px; background: transparent; border: 0;
  color: var(--color-text-muted); font: var(--text-label); cursor: pointer; text-align: left;
  border-radius: 8px; display: flex; align-items: center;
}
.ovs-sidebar.is-collapsed .ovs-collapse { justify-content: center; }
.ovs-collapse:hover { background: rgba(0,0,0,0.04); color: var(--color-text); }

/* === topbar === */
.ovs-topbar {
  height: 56px; border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; flex: none; gap: 16px;
}
.ovs-topbar-title { font: var(--text-h3); margin: 0; color: var(--color-text-heading); }
.ovs-breadcrumb { display: flex; align-items: center; gap: 8px; font: var(--text-label); color: var(--color-text-muted); }
.ovs-breadcrumb .is-current { color: var(--color-text); font-weight: 500; }
.ovs-breadcrumb-sep { color: var(--color-text-subtle); }
.ovs-topbar-right { display: flex; align-items: center; gap: 10px; }
.ovs-topbar-search {
  display: flex; align-items: center; gap: 8px;
  width: 360px; height: 34px; padding: 0 10px;
  background: var(--color-sidebar); border: 1px solid var(--color-border);
  border-radius: 8px;
}
.ovs-topbar-search input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 13px; color: var(--color-text); }
.ovs-topbar-search input::placeholder { color: var(--color-text-muted); }
.ovs-search-icon {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--color-text-muted); position: relative; flex: none;
}
.ovs-search-icon::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 1.5px;
  background: var(--color-text-muted); transform: rotate(45deg);
}
.ovs-kbd {
  font: var(--text-code); font-size: 11px; color: var(--color-text-muted);
  padding: 2px 6px; border: 1px solid var(--color-border); border-radius: 4px;
  background: var(--color-bg);
}
.ovs-icon-btn {
  width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: 8px; cursor: pointer; position: relative;
  color: var(--color-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.ovs-icon-btn:hover { background: rgba(0,0,0,0.04); color: var(--color-text); }
.ovs-dot-indicator {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  background: var(--color-danger); border-radius: 50%; border: 2px solid var(--color-bg);
}
.ovs-user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border-radius: 9999px; cursor: pointer;
}
.ovs-user-chip:hover { background: rgba(0,0,0,0.04); }
.ovs-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary);
  color: #fff; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ovs-user-name { font: var(--text-label); color: var(--color-text); }
.ovs-user-caret { color: var(--color-text-muted); font-size: 10px; }

/* === primitives === */
.ovs-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font: var(--text-label); transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.ovs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ovs-btn-md { padding: 8px 14px; font-size: 13px; }
.ovs-btn-sm { padding: 5px 10px; font-size: 12px; }
.ovs-btn-lg { padding: 10px 18px; font-size: 14px; }
.ovs-btn-primary { background: var(--color-primary); color: #fff; }
.ovs-btn-primary:hover { background: var(--primary-600); }
.ovs-btn-primary:active { background: var(--primary-700); }
.ovs-btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.ovs-btn-secondary:hover { background: var(--color-sidebar); }
.ovs-btn-danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.ovs-btn-danger:hover { background: rgba(230,56,54,0.06); }
.ovs-btn-ghost { background: transparent; color: var(--color-text-secondary); }
.ovs-btn-ghost:hover { background: rgba(0,0,0,0.04); color: var(--color-text); }
.ovs-btn-success { background: var(--color-success); color: #fff; }
.ovs-btn-success:hover { background: #1a9858; }

.ovs-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500;
  line-height: 1.4;
}
.ovs-badge-neutral { background: var(--neutral-100); color: var(--color-text-secondary); }
.ovs-badge-success { background: rgba(33,184,107,0.12); color: #1a9858; }
.ovs-badge-warning { background: rgba(235,176,31,0.12); color: #a16207; }
.ovs-badge-error { background: rgba(229,56,54,0.12); color: #c62a28; }
.ovs-badge-orange { background: rgba(235,140,38,0.12); color: #b35900; }
.ovs-badge-primary { background: rgba(99,89,217,0.12); color: var(--color-primary); }

.ovs-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text); }
.ovs-status-indicator { width: 8px; height: 8px; border-radius: 50%; }
.ovs-status-active .ovs-status-indicator { background: var(--color-success); }
.ovs-status-idle .ovs-status-indicator { background: var(--neutral-400); }
.ovs-status-error .ovs-status-indicator { background: var(--color-danger); }
.ovs-status-pending .ovs-status-indicator { background: var(--color-warning); }

.ovs-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 500; line-height: 1.5;
}
.ovs-pill-primary { background: var(--color-primary-bg); color: var(--color-primary); font-family: var(--font-mono); font-size: 11px;}
.ovs-pill-neutral { background: var(--neutral-100); color: var(--color-text-secondary); }

.ovs-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.ovs-mono {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-primary);
  background: var(--color-primary-bg); padding: 1px 5px; border-radius: 3px;
}
.ovs-divider { height: 1px; background: var(--color-border); margin: 16px 0; }

/* === tables === */
.ovs-table { width: 100%; border-collapse: collapse; font: var(--text-body); }
.ovs-table th {
  text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--color-border);
  background: var(--color-sidebar);
}
.ovs-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
.ovs-table tr:hover td { background: var(--color-sidebar); }
.ovs-table tr:last-child td { border-bottom: 0; }

/* === agent tree === */
.ovs-tree-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.ovs-tree-row:hover { background: var(--color-sidebar); }
.ovs-tree-row.is-selected { background: var(--color-primary-bg); }
.ovs-tree-caret { width: 16px; color: var(--color-text-muted); font-size: 10px; flex: none; }
.ovs-tree-indent { display: inline-block; width: 20px; flex: none; }
.ovs-agent-name { font-weight: 500; color: var(--color-text); }
.ovs-agent-meta { font: var(--text-body-sm); color: var(--color-text-muted); }

/* === details panel === */
.ovs-detail-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--color-border); }
.ovs-detail-title { font: var(--text-h2); margin: 0; color: var(--color-text-heading); }
.ovs-detail-sub { font: var(--text-body-sm); color: var(--color-text-muted); margin-top: 4px; }
.ovs-detail-section { padding: 20px 24px; border-bottom: 1px solid var(--color-border-subtle); }
.ovs-detail-section h3 { font: var(--text-h3); font-size: 14px; margin: 0 0 12px; color: var(--color-text-heading); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 11px; color: var(--color-text-muted);}
.ovs-kv { display: grid; grid-template-columns: 140px 1fr; row-gap: 10px; font-size: 13px; }
.ovs-kv dt { color: var(--color-text-muted); font-weight: 400; }
.ovs-kv dd { margin: 0; color: var(--color-text); }

/* === rule list === */
.ovs-rule { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--color-border-subtle); }
.ovs-rule:last-child { border-bottom: 0; }
.ovs-rule-scope { display: flex; align-items: center; gap: 8px; }

/* === approval card === */
.ovs-approval {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ovs-approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ovs-approval-title { font: var(--text-label); color: var(--color-text-heading); font-weight: 600; }
.ovs-approval-key { font-family: var(--font-mono); font-size: 12px; color: var(--color-primary); }
.ovs-approval-meta { font: var(--text-body-sm); color: var(--color-text-muted); display: flex; gap: 10px; align-items: center; }
.ovs-approval-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

/* === standalone card === */
.ovs-standalone-bg { min-height: 100vh; background: var(--color-sidebar); display: flex; align-items: center; justify-content: center; padding: 40px 20px;}
.ovs-standalone-card { width: 480px; max-width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.ovs-standalone-head { display: flex; flex-direction: column; gap: 4px; }

/* === audit === */
.ovs-audit-row { display: grid; grid-template-columns: 64px 180px 1fr 140px 28px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px;}
.ovs-audit-row:hover { background: var(--color-sidebar); }
.ovs-audit-time { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 12px; }
.ovs-audit-desc { color: var(--color-text); }

/* === service card === */
.ovs-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ovs-svc-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.1s;
  cursor: pointer;
}
.ovs-svc-card:hover { border-color: var(--color-primary); }
.ovs-svc-head { display: flex; align-items: center; gap: 10px; }
.ovs-svc-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--color-sidebar); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-text-secondary); }
.ovs-svc-title { font: var(--text-label); color: var(--color-text-heading); font-weight: 600; }
.ovs-svc-desc { font: var(--text-body-sm); color: var(--color-text-muted); flex: 1; }
.ovs-svc-foot { display: flex; justify-content: space-between; align-items: center; }

/* === search bar === */
.ovs-searchbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); flex-wrap: wrap;
}
.ovs-searchbar:focus-within { border-color: var(--color-primary); outline: 2px solid var(--color-primary-bg); outline-offset: -1px; }
.ovs-searchchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 8px; background: var(--color-primary-bg); color: var(--color-primary);
  border-radius: 4px; font-size: 12px; font-weight: 500;
}
.ovs-searchchip .x { color: var(--color-text-muted); font-size: 10px; cursor: pointer; }
.ovs-searchbar input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 13px; min-width: 120px; }

/* === tabs === */
.ovs-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); }
.ovs-tab {
  padding: 10px 14px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--color-text-secondary); font: var(--text-label); cursor: pointer; transition: all 0.1s;
  margin-bottom: -1px;
}
.ovs-tab:hover { color: var(--color-text); }
.ovs-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }

/* === toasts === */
.ovs-toast-zone { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.ovs-toast {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  font: var(--text-label); animation: ovs-toast-in 0.15s ease;
}
.ovs-toast .dot { width: 8px; height: 8px; border-radius: 50%; }
.ovs-toast.success { border-color: rgba(33,184,107,0.3); }
.ovs-toast.success .dot { background: var(--color-success); }
.ovs-toast.error { border-color: rgba(229,56,54,0.3); }
.ovs-toast.error .dot { background: var(--color-danger); }
@keyframes ovs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* === modal === */
.ovs-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 80; }
.ovs-modal {
  background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-xl);
  width: 460px; max-width: 92vw; display: flex; flex-direction: column;
}
.ovs-modal-head { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.ovs-modal-title { font: var(--text-h3); margin: 0; color: var(--color-text-heading); }
.ovs-modal-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.ovs-modal-foot { padding: 16px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }

/* === form fields === */
.ovs-field { display: flex; flex-direction: column; gap: 6px; }
.ovs-field label { font: var(--text-label); color: var(--color-text); }
.ovs-field input, .ovs-field select, .ovs-field textarea {
  padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 14px; background: var(--color-surface); color: var(--color-text);
}
.ovs-field input:focus, .ovs-field select:focus {
  outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary);
}
.ovs-field .hint { font: var(--text-body-sm); color: var(--color-text-muted); }
.ovs-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer;}
.ovs-check input { accent-color: var(--color-primary); }