/* MLIPE custom styles — Foundation 6 defaults used for everything else */

/* ===========================================================================
 * Site theme ("Style A"): a blue full-width top bar, shared with the published
 * ontology document (see ontology-doc.css, which mirrors these tokens) so the
 * platform and its published resources read as one site. Foundation handles
 * layout/components; this only re-skins the chrome and accents.
 * ======================================================================== */
:root {
  --c-primary:       #1779ba;   /* Foundation primary */
  --c-primary-hover: #126195;
  --c-rule:          #d8dde2;
  --c-code-bg:       #f5f7fa;
}

/* Top bar: blue, full window width, with flat inline links (no dropdowns) —
 * matching the published ontology document's chrome (ccx-topbar). */
.top-bar,
.top-bar ul {
  background-color: var(--c-primary);
}
.top-bar { padding: 0 1.5rem; }
.top-bar .menu a,
.top-bar .menu-text {
  color: #fff;
  padding: 0 0.7em;
  line-height: 2.9rem;
}
.top-bar .menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.top-bar .menu-text,
.top-bar .menu-text a {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.top-bar .menu-text a { padding: 0; }
.top-bar .menu-text a:hover { background: transparent; text-decoration: underline; }

/* Logout posts a form, so it is a button — render it like the other links. */
.top-bar .top-bar-logout {
  color: #fff;
  margin: 0;
  padding: 0 0.7em;
  line-height: 2.9rem;
  height: 2.9rem;
}
.top-bar .top-bar-logout:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* SPARQL update editor */
.update-editor { display: flex; flex-direction: column; gap: 0.5rem; }
.update-editor textarea {
    width: 100%; font-family: monospace; font-size: 0.9rem;
    padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; resize: vertical;
}
.update-result { margin-top: 0.3rem; padding: 0.4rem; border-radius: 4px; }
.update-result.success { color: #186a3b; background: #d5f5e3; }
.update-result.error { color: #922; background: #fde8e8; }

/* Dataset list */
.dataset-list { list-style: none; margin-left: 0; }
.dataset-list li { padding: 0.5rem 0; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; }

/* Inline forms and danger buttons */
.inline-form { display: inline; }
.btn-small-danger {
    font-size: 0.75rem; padding: 0.1rem 0.4rem; background: transparent; color: #c00;
    border: 1px solid #c00; border-radius: 3px; cursor: pointer; margin-left: 0.5rem;
}
.btn-small-danger:hover { background: #c00; color: #fff; }

/* Admin dashboard cards */
.admin-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-card {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1rem 1.5rem; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; min-width: 140px; color: #222; text-decoration: none;
}
a.admin-card:hover { border-color: #1779ba; text-decoration: none; }
.admin-card strong { font-size: 1.1rem; }

/* File actions */
.actions-cell { white-space: nowrap; }
.actions-cell a { margin-right: 0.5rem; }

/* Upload form */
.upload-form { max-width: 480px; }

/* ACM-style paper cards */
.paper-card {
    padding: 1rem 0; border-bottom: 1px solid #e0e0e0;
}
.paper-card:last-child { border-bottom: none; }
.paper-card h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.paper-card h2 a { color: #1779ba; }
.paper-card h2 a:hover { text-decoration: underline; }
.paper-actions {
    margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem;
}

/* ===========================================================================
 * Dark mode — follows the OS setting (prefers-color-scheme), matching the
 * published ontology document (ontology-doc.css) so the whole platform flips
 * together. Foundation 6 is light-only, so this re-skins its surfaces; the
 * palette mirrors ontology-doc.css. The blue top bar is intentionally kept in
 * both modes.
 * ======================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:            #161a1f;
    --c-fg:            #e6ebf0;
    --c-muted:         #98a2ad;
    --c-rule:          #2a3038;
    --c-link:          #6cb7f0;
    --c-link-hover:    #9ed1f7;
    --c-code-bg:       #1d242c;
    --c-code-fg:       #d6dde4;
  }

  html, body { background-color: var(--c-bg); color: var(--c-fg); }
  h1, h2, h3, h4, h5, h6 { color: var(--c-fg); }
  p, li, dt, dd, label, .lead { color: var(--c-fg); }
  a { color: var(--c-link); }
  a:hover { color: var(--c-link-hover); }
  hr { border-bottom-color: var(--c-rule); }
  .secondary-color, [class*="secondary-color"] { color: var(--c-muted) !important; }

  /* Tables */
  table thead, table tbody, table tfoot {
    border-color: var(--c-rule);
    background-color: var(--c-bg);
    color: var(--c-fg);
  }
  table thead { background-color: var(--c-code-bg); color: var(--c-fg); }
  table tbody tr:nth-child(even) { background-color: var(--c-code-bg); }
  thead tr:hover, tbody tr:hover { background-color: var(--c-code-bg); }
  th, td { color: var(--c-fg); }

  /* Code */
  code {
    background-color: var(--c-code-bg);
    border-color: var(--c-rule);
    color: var(--c-code-fg);
  }

  /* Form controls */
  [type="text"], [type="password"], [type="email"], [type="search"],
  [type="url"], [type="number"], textarea, select {
    background-color: var(--c-code-bg);
    border-color: var(--c-rule);
    color: var(--c-fg);
    box-shadow: none;
  }
  ::placeholder { color: var(--c-muted); }

  /* Callouts */
  .callout {
    background-color: var(--c-code-bg);
    border-color: var(--c-rule);
    color: var(--c-fg);
  }
  .callout.primary { background-color: #142537; border-color: #2c4a6b; }
  .callout.success { background-color: #14271a; border-color: #2c5230; }
  .callout.warning { background-color: #2c2114; border-color: #5a4520; }
  .callout.alert   { background-color: #2c1717; border-color: #5a2c2c; }

  /* Cards & custom surfaces */
  .card { background: var(--c-code-bg); border-color: var(--c-rule); color: var(--c-fg); }
  .admin-card { background: var(--c-code-bg); border-color: var(--c-rule); color: var(--c-fg); }
  .dataset-list li { border-bottom-color: var(--c-rule); }
  .paper-card { border-bottom-color: var(--c-rule); }
  .paper-card h2 a { color: var(--c-link); }
  .update-editor textarea { border-color: var(--c-rule); }

  /* Semantic result banners keep their meaning but darken to fit. */
  .update-result.success { color: #7ee2a8; background: #14271a; }
  .update-result.error   { color: #f4a6a6; background: #2c1717; }
}