/*
 * Kyoka page styling.
 *
 * Bootstrap's own look (grey card headers, drop shadows, pill badges, blue
 * outline buttons) is replaced with Kyoka's: white panels on a warm grey page,
 * hairlines instead of borders, quiet type, near-black actions, and red kept
 * as an accent rather than a background.
 *
 * Loaded once from base.html and scoped to body.ky-pages, so the residents
 * portal (which has its own base template and is meant to look like the
 * building, not like Kyoka) is untouched, and the whole thing can be turned
 * off by removing one class.
 *
 * Section editors and the Safety Case Report carry their own stylesheets for
 * what is specific to them; this is the shared ground underneath.
 */

/* ===== Panels ===== */
body.ky-pages .card {
  border: 0;
  border-radius: 10px;
  background: var(--ky-surface, #ffffff);
  box-shadow: none !important;
  margin-bottom: 1.5rem;
}
body.ky-pages .card > .card-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ky-border, #e4dfda);
  padding: 1.5rem 1.75rem 0.9rem;
  font-weight: 600;
  font-size: 1rem;
}
body.ky-pages .card > .card-header h1,
body.ky-pages .card > .card-header h2,
body.ky-pages .card > .card-header h3,
body.ky-pages .card > .card-header h4,
body.ky-pages .card > .card-header h5,
body.ky-pages .card > .card-header h6 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
body.ky-pages .card > .card-body { padding: 1.5rem 1.75rem; }
body.ky-pages .card > .card-footer {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ky-border, #e4dfda);
  padding: 1.1rem 1.75rem;
}

/* ===== Notices ===== */
body.ky-pages .alert {
  background: rgba(26, 24, 23, 0.03);
  border: 0;
  border-left: 3px solid var(--ky-border, #e4dfda);
  border-radius: 0 6px 6px 0;
  padding: 0.8rem 1rem;
  color: var(--ky-text, #1a1a1a);
  font-size: 0.9rem;
}
body.ky-pages .alert-warning,
body.ky-pages .alert-danger {
  background: rgba(230, 0, 0, 0.05);
  border-left-color: var(--ky-accent, #e60000);
}
body.ky-pages .alert-heading { font-size: 0.95rem; font-weight: 600; }
body.ky-pages .alert a:not(.btn) { color: inherit; font-weight: 600; }

/* ===== Actions ===== */
body.ky-pages .btn {
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: 0.875rem;
}
body.ky-pages .btn-primary,
body.ky-pages .btn-dark,
body.ky-pages .btn-success {
  background: var(--ky-btn, #1a1a1a);
  border-color: var(--ky-btn, #1a1a1a);
  color: var(--ky-on-btn, #ffffff);
}
body.ky-pages .btn-primary:hover,
body.ky-pages .btn-dark:hover,
body.ky-pages .btn-success:hover,
body.ky-pages .btn-primary:focus,
body.ky-pages .btn-dark:focus,
body.ky-pages .btn-success:focus {
  background: var(--ky-btn-hover, #000000);
  border-color: var(--ky-btn-hover, #000000);
  color: var(--ky-on-btn, #ffffff);
}
body.ky-pages .btn-outline-primary,
body.ky-pages .btn-outline-secondary,
body.ky-pages .btn-outline-dark,
body.ky-pages .btn-secondary {
  background: transparent;
  border-color: var(--ky-border, #e4dfda);
  color: var(--ky-text, #1a1a1a);
}
body.ky-pages .btn-outline-primary:hover,
body.ky-pages .btn-outline-secondary:hover,
body.ky-pages .btn-outline-dark:hover,
body.ky-pages .btn-secondary:hover {
  background: transparent;
  border-color: var(--ky-text, #1a1a1a);
  color: var(--ky-text, #1a1a1a);
}
/* Destructive actions keep their warning, as an outline rather than a block. */
body.ky-pages .btn-danger,
body.ky-pages .btn-outline-danger {
  background: transparent;
  border-color: var(--ky-accent, #e60000);
  color: var(--ky-accent, #e60000);
}
body.ky-pages .btn-danger:hover,
body.ky-pages .btn-outline-danger:hover {
  background: var(--ky-accent, #e60000);
  border-color: var(--ky-accent, #e60000);
  color: #ffffff;
}

/* ===== Badges: words, not coloured pills ===== */
body.ky-pages .badge {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ky-muted, #6f6a67);
}
body.ky-pages .badge.bg-danger,
body.ky-pages .badge.bg-warning,
body.ky-pages .badge.text-bg-danger,
body.ky-pages .badge.text-bg-warning { color: var(--ky-accent, #e60000); }
body.ky-pages .badge.bg-success,
body.ky-pages .badge.bg-primary,
body.ky-pages .badge.bg-dark,
body.ky-pages .badge.text-bg-success,
body.ky-pages .badge.text-bg-primary { color: var(--ky-text, #1a1a1a); }
/* A count bubble is a shape, not a word: the unread badge on the bell stays
   a filled pill so it still reads as a count. */
body.ky-pages .badge.rounded-pill {
  background: var(--ky-accent, #e60000) !important;
  color: #ffffff;
  border-radius: 999px;
  padding: 0.25em 0.5em;
  font-size: 0.7rem;
  line-height: 1;
}

/* ===== Tables: hairlines and quiet headings ===== */
body.ky-pages .table { border-color: var(--ky-border, #e4dfda); }
body.ky-pages .table > :not(caption) > * > * {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: var(--ky-border, #e4dfda);
}
body.ky-pages .table > thead th,
body.ky-pages .table > thead td {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--ky-muted, #6f6a67);
  border-bottom: 1px solid var(--ky-border, #e4dfda);
}
body.ky-pages .table > tbody > tr > td { padding-top: 0.7rem; padding-bottom: 0.7rem; }

/* ===== Forms ===== */
body.ky-pages .form-control,
body.ky-pages .form-select {
  border-color: var(--ky-border, #e4dfda);
  border-radius: 6px;
}
body.ky-pages .form-control:focus,
body.ky-pages .form-select:focus {
  border-color: var(--ky-text, #1a1a1a);
  box-shadow: none;
}
body.ky-pages .form-label { font-weight: 600; font-size: 0.9rem; }
body.ky-pages .form-text { color: var(--ky-muted, #6f6a67); }

/* ===== Page furniture ===== */
body.ky-pages .breadcrumb { font-size: 0.875rem; }
body.ky-pages .bg-light { background: transparent !important; }
body.ky-pages .list-group-item { border-color: var(--ky-border, #e4dfda); }
body.ky-pages .nav-tabs { border-bottom-color: var(--ky-border, #e4dfda); }
body.ky-pages .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ky-muted, #6f6a67);
  font-weight: 600;
}
body.ky-pages .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--ky-text, #1a1a1a);
  border-bottom-color: var(--ky-accent, #e60000);
}

/* ===== Type =====
   Bootstrap's headings and bold text are heavier than Kyoka's. One weight for
   emphasis, 600, so a page reads as a document rather than as shouting. */
body.ky-pages h1, body.ky-pages h2, body.ky-pages h3,
body.ky-pages h4, body.ky-pages h5, body.ky-pages h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.ky-pages h1 { font-size: 1.75rem; }
body.ky-pages h2 { font-size: 1.375rem; }
body.ky-pages h3 { font-size: 1.1875rem; }
body.ky-pages h4, body.ky-pages h5, body.ky-pages h6 { font-size: 1rem; }
body.ky-pages strong, body.ky-pages b, body.ky-pages .fw-bold { font-weight: 600; }
body.ky-pages th { font-weight: 600; }

/* ===== Page heading =====
   The pattern the Safety Case Report uses: a small red label for context, the
   page name once, and a quiet line underneath. */
.ky-page-head { margin-bottom: 1.5rem; }
.ky-page-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ky-accent, #e60000); margin-bottom: 0.25rem;
}
.ky-page-title { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0; }
.ky-page-sub { color: var(--ky-muted, #6f6a67); font-size: 0.9rem; margin: 0.35rem 0 0; }
.ky-page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.ky-page-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ===== Header =====
   The residents portal and managing agent header (residents/css/portal.css):
   a dark band, the white Kyoka logo and a red rule underneath, with the same
   heights and weights, so every part of Kyoka opens the same way. */
body.ky-pages .ky-nav {
  min-height: 82px;
  padding: 0.65rem 0;
  /* Important because theme-kyoka-v1.css paints every .navbar with the
     surface colour using !important; this selector is more specific, so it
     wins once it is important too. */
  background: #2a2a2a !important;
  border-bottom: 5px solid var(--ky-accent, #e60000) !important;
}
body.ky-pages .ky-nav-brand { padding: 0; margin-right: 1.75rem; }
body.ky-pages .ky-nav-brand img { display: block; width: 130px; height: auto; }

body.ky-pages .ky-nav .nav-link {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid transparent;
}
body.ky-pages .ky-nav .nav-link:hover,
body.ky-pages .ky-nav .nav-link:focus-visible { color: #ffffff; }
body.ky-pages .ky-nav .nav-link.active {
  color: #ffffff;
  border-bottom-color: var(--ky-accent, #e60000);
}

/* Controls on the dark band: outlines in white, as the portal header does. */
body.ky-pages .ky-nav .btn-outline-secondary {
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
}
body.ky-pages .ky-nav .btn-outline-secondary:hover,
body.ky-pages .ky-nav .btn-outline-secondary:focus-visible,
body.ky-pages .ky-nav .btn-outline-secondary.show {
  color: #ffffff;
  border-color: #ffffff;
  background: transparent;
}
body.ky-pages .ky-nav .dropdown-toggle .badge { color: #ffffff; }
body.ky-pages .ky-nav .badge.rounded-pill { border: 2px solid #2a2a2a; }
body.ky-pages .ky-nav :is(a, button):focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: none; }
body.ky-pages .ky-nav .navbar-toggler { border-color: rgba(255, 255, 255, 0.28); }

@media (max-width: 767.98px) {
  body.ky-pages .ky-nav { min-height: 70px; }
  body.ky-pages .ky-nav-brand img { width: 112px; }
  body.ky-pages .ky-nav .nav-link { border-bottom: 0; border-left: 2px solid transparent; }
  body.ky-pages .ky-nav .nav-link.active { border-left-color: var(--ky-accent, #e60000); }
}