/*
 * enterprise.css — Kirchhoff enterprise ERP presentation layer.
 *
 * Purpose: replace the rounded/floating dashboard aesthetic with a dense,
 * record-oriented office UI inspired by mature ERP systems. Kirchhoff keeps
 * its own branding and information architecture; this file standardizes the
 * visual behavior across existing and future modules.
 */

:root {
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-pill: 2px;
  --shadow-card: none;
  --topbar-h: 44px;
  --sidebar-w: 226px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --space-4: 14px;
  --space-5: 18px;
  --erp-header: #243746;
  --erp-header-strong: #1c2b36;
  --erp-tab: #e8edf1;
  --erp-tab-active: #ffffff;
  --erp-section-head: #edf1f4;
  --erp-table-head: #eef2f5;
  --erp-grid-line: #d5dbe0;
  --erp-link: #1261a0;
}

:root[data-theme="light"] {
  --bg-app: #f1f3f5;
  --bg-sidebar: #f7f8f9;
  --bg-topbar: var(--erp-header);
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-hover: #f4f7f9;
  --bg-inset: #ffffff;
  --border-subtle: #dfe4e8;
  --border-default: #c9d0d6;
  --border-strong: #9faab3;
  --text-primary: #20272d;
  --text-secondary: #58636d;
  --text-tertiary: #7a858e;
  --shadow-pop: 0 6px 20px rgba(31,45,56,.22);
  --sidebar-border: #cfd6dc;
  --sidebar-text: #27323a;
  --sidebar-text-muted: #77838c;
  --sidebar-text-label: #5d6972;
  --sidebar-text-item: #35434d;
  --sidebar-text-item-hover: #18242c;
  --sidebar-hover-bg: #e9eef2;
  --sidebar-footer-hover-bg: #e9eef2;
  --sidebar-count-bg: #dde5eb;
  --sidebar-count-text: #46545f;
  color-scheme: light;
}

/* Dark remains supported, but it uses the same square, dense ERP geometry. */
:root[data-theme="dark"] {
  --erp-header: #1c2730;
  --erp-header-strong: #141d24;
  --erp-tab: #222e37;
  --erp-tab-active: #2b3944;
  --erp-section-head: #1b242c;
  --erp-table-head: #192128;
  --erp-grid-line: rgba(255,255,255,.11);
}

body { line-height: 1.35; }
a { color: var(--erp-link); }

/* ---------- Shell / global navigation ---------- */
.kd-topbar {
  background: var(--erp-header);
  border-bottom: 0;
  color: #fff;
  padding: 0 14px;
  gap: 10px;
}
.kd-topbar-title h1 { color: #fff; font-size: 15px; font-weight: 600; }
.kd-topbar-search {
  margin-left: 14px;
  max-width: 520px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 1px;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.75);
}
.kd-topbar-search:hover { border-color: rgba(255,255,255,.5); }
.kd-topbar-search kbd { background: rgba(0,0,0,.18); color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.16); }
.kd-topbar .kd-btn:not(.kd-btn-primary), .kd-topbar .kd-collapse-btn {
  background: transparent;
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.86);
}
.kd-topbar .kd-btn:not(.kd-btn-primary):hover, .kd-topbar .kd-collapse-btn:hover { background: rgba(255,255,255,.1); color:#fff; }

.kd-enterprise-centers {
  height: 34px;
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--erp-tab);
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  padding-left: 10px;
}
.kd-enterprise-center-tab {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.kd-enterprise-center-tab:hover { background: rgba(255,255,255,.42); color: var(--text-primary); }
.kd-enterprise-center-tab.active {
  background: var(--erp-tab-active);
  color: var(--text-primary);
  border-left-color: var(--border-default);
  border-right-color: var(--border-default);
  box-shadow: inset 0 2px 0 var(--accent);
}
.kd-enterprise-center-spacer { flex:1; min-width:20px; }
.kd-enterprise-role {
  display:flex; align-items:center; gap:7px; padding:0 12px;
  border-left:1px solid var(--border-default); color:var(--text-secondary); white-space:nowrap; font-size:11px;
}
.kd-enterprise-role b { color:var(--text-primary); font-weight:600; }

.kd-sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--sidebar-border); }
.kd-sidebar-brand { height: 48px; padding: 9px 12px; border-bottom:1px solid var(--sidebar-border); }
.kd-sidebar-brand .kd-mark {
  width: 25px; height: 25px; border-radius: 1px; box-shadow:none;
  background: var(--warning); color:#1f2326;
}
.kd-brand-name { font-weight: 650 !important; }
.kd-nav { padding: 8px 0; }
.kd-nav-section { margin-bottom: 9px; }
.kd-nav-label { padding: 7px 12px 3px; font-size: 9.5px; letter-spacing:.08em; }
.kd-nav-item {
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 0;
  gap: 8px;
  font-size: 12px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.kd-nav-item:hover { background: var(--sidebar-hover-bg); }
.kd-nav-item.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-top-color: var(--sidebar-border);
  border-bottom-color: var(--sidebar-border);
}
.kd-nav-item.active::before { left: 0; top:0; bottom:0; width:3px; border-radius:0; }
.kd-nav-item svg { width:15px; height:15px; }
.kd-nav-item .kd-nav-count { border-radius:1px; padding:0 5px; }
.kd-sidebar-footer { padding:8px 10px; }
.kd-sidebar-footer .kd-avatar { border-radius:1px; }

/* ---------- Work area ---------- */
.kd-content { padding: 14px 16px 20px; }
.kd-page { max-width: 1680px; gap: 14px; }
.kd-page-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 10px 12px;
  align-items: center;
}
.kd-page-header h2 { font-size: 18px; font-weight: 600; }
.kd-page-header p { font-size: 12px; margin-top:2px; max-width:90ch; }
.kd-page-actions { gap: 6px; }
.kd-grid { gap: 10px; }

/* ---------- Portlets / records ---------- */
.kd-card {
  border: 1px solid var(--border-default);
  border-radius: 1px;
  box-shadow: none;
}
.kd-card-pad { padding: 11px 12px; }
.kd-card-header {
  min-height: 34px;
  padding: 7px 10px;
  gap: 8px;
  background: var(--erp-section-head);
  border-bottom: 1px solid var(--border-default);
}
.kd-card-header h3 { font-size: 12.5px; font-weight: 650; text-transform:none; }
.kd-card-header .kd-muted { font-size:11px; }
.kd-card-body { padding: 10px 12px; }
.kd-card-body-tight { padding:0; }

.kd-stat, .kd-stat-card {
  min-height: 72px;
  padding: 9px 11px;
  border-radius:1px;
  box-shadow:none;
  border:1px solid var(--border-default);
  background:var(--bg-surface);
}
.kd-stat-card .kd-stat-label, .kd-stat .kd-stat-label { font-size:10.5px; font-weight:600; text-transform:none; }
.kd-stat-card .kd-stat-value, .kd-stat .kd-stat-value { font-size:21px; font-weight:650; }
.kd-stat-foot { font-size:10.5px; }
.kd-stat-delta, .kd-badge { border-radius:1px !important; }
.kd-badge { padding:2px 6px; font-size:9.5px; }

/* ---------- Tables: dense ERP grid ---------- */
.kd-table-wrap { border-radius:1px; border-color:var(--border-default); overflow:auto; }
.kd-table { font-size:12px; }
.kd-table thead th {
  background: var(--erp-table-head);
  color:var(--text-secondary);
  font-size:9.5px;
  letter-spacing:.035em;
  padding:6px 8px;
  border-bottom:1px solid var(--border-strong);
  border-right:1px solid var(--erp-grid-line);
}
.kd-table tbody td {
  padding:6px 8px;
  border-bottom:1px solid var(--erp-grid-line);
  border-right:1px solid var(--erp-grid-line);
}
.kd-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-surface) 96%, var(--text-primary) 4%); }
.kd-table tbody tr.kd-row-clickable:hover td { background:var(--bg-surface-hover); }

/* ---------- Controls ---------- */
.kd-btn { height:29px; padding:0 10px; border-radius:1px; font-size:12px; font-weight:600; }
.kd-btn-sm { height:24px; padding:0 7px; font-size:11px; }
.kd-btn-lg { height:34px; }
.kd-input, .kd-select, .kd-textarea { height:29px; border-radius:1px; padding:0 8px; font-size:12px; background:var(--bg-surface); }
.kd-textarea { min-height:66px; padding:7px 8px; }
.kd-field { gap:3px; }
.kd-field label { font-size:11px; font-weight:600; }
.kd-input:focus, .kd-select:focus, .kd-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.kd-tabs { gap:0; background:var(--erp-section-head); border:1px solid var(--border-default); padding-left:4px; }
.kd-tab { padding:7px 10px; margin:0; border-right:1px solid var(--border-default); border-bottom:2px solid transparent; font-size:11.5px; }
.kd-tab.active { background:var(--bg-surface); border-bottom-color:var(--accent); }

/* ---------- Popovers / modal windows ---------- */
.kd-modal, .kd-palette-box, .kd-toast, .kd-kanban-col, .kd-kanban-card {
  border-radius:2px;
}
.kd-modal-header, .kd-modal-footer { background:var(--erp-section-head); }
.kd-kanban { gap:8px; }
.kd-kanban-col { border-radius:1px; background:var(--bg-surface); }
.kd-kanban-card { border-radius:1px; box-shadow:none; }

/* ---------- ERP helpers for new pages ---------- */
.kd-erp-worklist { border:1px solid var(--border-default); background:var(--bg-surface); }
.kd-erp-worklist-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px; padding:6px 9px; background:var(--erp-section-head); border-bottom:1px solid var(--border-default); }
.kd-erp-worklist-head h3 { font-size:12.5px; font-weight:650; }
.kd-erp-toolbar { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.kd-erp-record-header { display:grid; grid-template-columns:minmax(200px,1fr) auto; gap:12px; align-items:center; padding:9px 11px; border:1px solid var(--border-default); background:var(--bg-surface); }
.kd-erp-record-title { font-size:18px; font-weight:600; }
.kd-erp-record-meta { display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; color:var(--text-secondary); font-size:11px; }
.kd-erp-subtabs { display:flex; border:1px solid var(--border-default); background:var(--erp-section-head); overflow-x:auto; }
.kd-erp-subtab { padding:7px 11px; border-right:1px solid var(--border-default); font-size:11.5px; cursor:pointer; white-space:nowrap; }
.kd-erp-subtab.active { background:var(--bg-surface); box-shadow:inset 0 -2px 0 var(--accent); font-weight:600; }

@media (max-width: 900px) {
  .kd-enterprise-role { display:none; }
  .kd-enterprise-center-tab { padding:0 9px; }
}