/* ─────────────────────────────────────────────────────────────
   ISMS Portal – Finaris Financial Software GmbH
   Custom styles on top of Pico CSS v2
   ───────────────────────────────────────────────────────────── */

/* ── Layout ── */
:root {
  --isms-sidebar-width: 220px;
  --isms-header-h: 3.5rem;
  --radius: 6px;
  --color-kritisch: #d32f2f;
  --color-hoch:     #f57c00;
  --color-mittel:   #1976d2;
  --color-niedrig:  #388e3c;
  --color-neutral:  #616161;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 0 1.5rem;
  height: var(--isms-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo {
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--pico-color);
  white-space: nowrap;
}
.site-logo span { color: var(--pico-primary); }

.site-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
}

.site-nav a {
  padding: .35rem .75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--pico-muted-color);
  font-size: .9rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.site-nav a:hover,
.site-nav a.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
}
.user-menu details summary {
  cursor: pointer;
  list-style: none;
  padding: .3rem .6rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.user-menu details summary::-webkit-details-marker { display: none; }
.user-menu details[open] summary { background: var(--pico-card-background-color); }
.user-menu details ul {
  position: absolute;
  right: 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius);
  list-style: none;
  padding: .25rem;
  margin: 0;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 200;
}
.user-menu details ul li a {
  display: block;
  padding: .4rem .75rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--pico-color);
  font-size: .85rem;
}
.user-menu details ul li a:hover {
  background: var(--pico-primary-background);
}

.site-main {
  flex: 1;
  padding: 1.5rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ── Muted text ── */
.muted { color: var(--pico-muted-color); font-size: .85em; }

/* ── Alerts ── */
.success-alert {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  color: #2e7d32;
}
.error-alert {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  color: #c62828;
}

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: .15em .55em;
  border-radius: 4px;
  font-size: .75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge-red    { background: #ffcdd2; color: #b71c1c; }
.badge-orange { background: #ffe0b2; color: #bf360c; }
.badge-blue   { background: #bbdefb; color: #0d47a1; }
.badge-green  { background: #c8e6c9; color: #1b5e20; }
.badge-grey, .badge-gray { background: #eeeeee; color: #424242; }

/* ── Back link ── */
.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: .9rem;
}
.back-link:hover { color: var(--pico-primary); }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-header hgroup { margin: 0; }
.page-header h2 { margin: 0 0 .2rem; }

/* ── KPI Cards ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--pico-muted-border-color);
}
.kpi-card.kpi-red    { border-left-color: var(--color-kritisch); }
.kpi-card.kpi-orange { border-left-color: var(--color-hoch); }
.kpi-card.kpi-blue   { border-left-color: var(--color-mittel); }
.kpi-card.kpi-green  { border-left-color: var(--color-niedrig); }
.kpi-card .kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .25rem;
}
.kpi-card .kpi-label { font-size: .8rem; color: var(--pico-muted-color); }

/* ── Dashboard sections ── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 800px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
.dashboard-section {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.dashboard-section h3 { margin: 0 0 .75rem; font-size: .95rem; }

/* ── Risk bar chart ── */
.risk-bars { display: flex; flex-direction: column; gap: .4rem; }
.risk-bar-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.risk-bar-label { width: 70px; flex-shrink: 0; }
.risk-bar-track { flex: 1; background: var(--pico-muted-border-color); border-radius: 3px; height: 14px; overflow: hidden; }
.risk-bar-fill  { height: 100%; border-radius: 3px; transition: width .3s; }
.risk-bar-count { width: 24px; text-align: right; color: var(--pico-muted-color); }
.risk-bar-fill.kritisch { background: var(--color-kritisch); }
.risk-bar-fill.hoch     { background: var(--color-hoch); }
.risk-bar-fill.mittel   { background: var(--color-mittel); }
.risk-bar-fill.niedrig  { background: var(--color-niedrig); }

/* ── My tasks list ── */
.my-tasks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.task-item {
  background: var(--pico-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius);
  padding: .5rem .75rem;
}
.task-item-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .25rem;
  flex-wrap: wrap;
}
.task-item-header a { font-size: .9rem; text-decoration: none; color: var(--pico-color); }
.task-item-header a:hover { color: var(--pico-primary); }
.task-item-meta { display: flex; align-items: center; gap: .5rem; }
.source-ref { font-size: .75rem; color: var(--pico-muted-color); background: var(--pico-muted-border-color); padding: .1em .4em; border-radius: 3px; }

/* ── Status select (inline HTMX) ── */
.status-select {
  font-size: .78rem;
  padding: .15rem .4rem;
  border-radius: 4px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-background-color);
  cursor: pointer;
  width: auto;
  margin: 0;
}
.status-select.status-orange { border-color: #f57c00; color: #bf360c; }
.status-select.status-blue   { border-color: #1976d2; color: #0d47a1; }
.status-select.status-green  { border-color: #388e3c; color: #1b5e20; }

/* ── Quick links ── */
.quick-links { display: flex; flex-direction: column; gap: .4rem; }
.quick-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--pico-color);
  font-size: .9rem;
  transition: background .15s;
}
.quick-link:hover { background: var(--pico-primary-background); color: var(--pico-primary); }

/* ── Task list ── */
.table-wrapper { overflow-x: auto; }
table { margin: 0; }

.filter-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filter-bar select, .filter-bar input {
  width: auto;
  margin: 0;
  font-size: .85rem;
  padding: .3rem .6rem;
}
.filter-bar button {
  padding: .3rem .75rem;
  font-size: .85rem;
  margin: 0;
}

/* ── Forms grid (index) ── */
.forms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.form-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--pico-color);
  transition: border-color .2s, box-shadow .2s;
}
.form-card:hover {
  border-color: var(--pico-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.form-card .form-icon { font-size: 2rem; line-height: 1; }
.form-card h3 { margin: 0; font-size: 1rem; }
.form-card p  { margin: 0; font-size: .82rem; color: var(--pico-muted-color); flex: 1; }
.form-card span[role="button"] { text-align: center; font-size: .85rem; }

/* ── Document list ── */
.doc-tree { display: flex; flex-direction: column; gap: .75rem; }
details.doc-tree > details { margin-bottom: .5rem; }
.folder-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  cursor: pointer;
  user-select: none;
}
.folder-summary strong { font-size: .95rem; }
.doc-list { list-style: none; padding: 0 0 0 1.5rem; margin: .25rem 0 0; display: flex; flex-direction: column; gap: .2rem; }
.doc-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--pico-color);
  font-size: .9rem;
  transition: background .15s;
}
.doc-link:hover { background: var(--pico-primary-background); color: var(--pico-primary); }
.doc-id {
  font-size: .72rem;
  background: var(--pico-muted-border-color);
  padding: .1em .4em;
  border-radius: 3px;
  color: var(--pico-muted-color);
}
.search-snippet { display: block; padding-left: 1.5rem; color: var(--pico-muted-color); }

/* ── Document view ── */
.doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.doc-actions { display: flex; gap: .5rem; }
.doc-meta-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.doc-path code { font-size: .8rem; }

.md-content {
  line-height: 1.7;
}
.md-content h1 { font-size: 1.6rem; margin-top: 1.5rem; }
.md-content h2 { font-size: 1.3rem; margin-top: 1.5rem; border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: .25rem; }
.md-content h3 { font-size: 1.1rem; margin-top: 1.2rem; }
.md-content table { font-size: .88rem; }
.md-content pre { border-radius: var(--radius); }
.md-content blockquote { border-left: 3px solid var(--pico-primary); padding-left: 1rem; color: var(--pico-muted-color); }

/* ── Document editor ── */
.editor-wrapper { margin-bottom: .75rem; }
.md-editor {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: .85rem;
  line-height: 1.5;
  resize: vertical;
}
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ── Checklist (forms) ── */
.checklist { display: flex; flex-direction: column; gap: .35rem; }
.check-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .2rem 0;
  font-size: .9rem;
  cursor: pointer;
}
.check-item input[type="checkbox"] { margin: 0; width: auto; flex-shrink: 0; }

/* ── Form grid ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 1rem;
}

/* ── Submission meta ── */
.submission-meta { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ── Audit log ── */
.audit-log-list { list-style: none; padding: 0; margin: 0; font-size: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.audit-log-list li { display: flex; gap: .5rem; align-items: baseline; }
.audit-ts { color: var(--pico-muted-color); flex-shrink: 0; }
.audit-action { font-weight: 600; }

/* ── Responsive tweaks ── */
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .site-nav a { font-size: .8rem; padding: .3rem .5rem; }
}

/* ── HTMX loading indicator ── */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }