/* KohaSupport Account Shell — shared premium layout for all account pages.
 * Copyright (C) 2026 KohaSupport LLC. All Rights Reserved.
 *
 * Layout tokens (set per-family in each pack's opac.css):
 *   --ks-account-primary:      #8B1626  (heading/accent colour)
 *   --ks-account-sidebar-bg:   #f8f5f0  (sidebar background)
 *   --ks-account-heading-font: 'EB Garamond', Georgia, serif
 *   --ks-account-body-font:    'Source Serif 4', Georgia, serif
 *   --ks-account-accent:       #1a1a2e  (secondary accent)
 */

/* ── Reset & base ───────────────────────────────────────────────────── */
.ks-account-shell {
  display: flex;
  min-height: calc(100vh - 200px);
  font-family: var(--ks-account-body-font, Georgia, serif);
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.ks-account-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ks-account-sidebar-bg, #f8f5f0);
  border-right: 1px solid rgba(0,0,0,.08);
  padding: 2rem 1.25rem 2rem;
  box-sizing: border-box;
}

.ks-account-sidebar__welcome {
  font-family: var(--ks-account-heading-font, Georgia, serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ks-account-primary, #8B1626);
  margin-bottom: 0.25rem;
}

.ks-account-sidebar__patron {
  font-size: 0.875rem;
  color: #555;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.ks-account-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.ks-account-nav__item {
  margin: 0;
}

.ks-account-nav__link {
  display: block;
  padding: 0.45rem 0.5rem;
  font-size: 0.875rem;
  color: #444;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ks-account-nav__link:hover,
.ks-account-nav__link:focus {
  background: rgba(0,0,0,.06);
  color: var(--ks-account-primary, #8B1626);
  text-decoration: none;
}

.ks-account-nav__link--active {
  background: var(--ks-account-primary, #8B1626);
  color: #fff !important;
  font-weight: 600;
}

.ks-account-nav__divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,.1);
  margin: 0.75rem 0;
}

.ks-account-sidebar__signout {
  display: block;
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  color: #888;
  text-decoration: none;
}

.ks-account-sidebar__signout:hover {
  color: var(--ks-account-primary, #8B1626);
}

/* ── Main content area ──────────────────────────────────────────────── */
.ks-account-content {
  flex: 1;
  padding: 2rem 2.5rem;
  min-width: 0;
}

.ks-account-content h1,
.ks-account-content h2 {
  font-family: var(--ks-account-heading-font, Georgia, serif);
  color: var(--ks-account-primary, #8B1626);
  margin-top: 0;
}

.ks-account-section {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.ks-account-section__title {
  font-family: var(--ks-account-heading-font, Georgia, serif);
  font-size: 1.1rem;
  color: var(--ks-account-accent, #1a1a2e);
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ks-account-primary, #8B1626);
}

/* Override Koha's raw Bootstrap tables within account shell */
.ks-account-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ks-account-content table th {
  font-family: var(--ks-account-heading-font, Georgia, serif);
  font-weight: 700;
  color: var(--ks-account-accent, #1a1a2e);
  border-bottom: 2px solid var(--ks-account-primary, #8B1626);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.ks-account-content table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: top;
}

.ks-account-content table tr:last-child td {
  border-bottom: none;
}

/* ── Mobile: sidebar collapses to horizontal nav strip ─────────────── */
@media (max-width: 767px) {
  .ks-account-shell {
    flex-direction: column;
  }

  .ks-account-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 1rem;
  }

  .ks-account-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .ks-account-nav__item {
    flex-shrink: 0;
  }

  .ks-account-nav__link {
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
  }

  .ks-account-sidebar__welcome,
  .ks-account-sidebar__patron {
    display: none;
  }

  .ks-account-content {
    padding: 1.25rem 1rem;
  }
}

/* ── Koha native column normalization (all themes, all account pages) ────────
 * Koha renders account pages as Bootstrap-style columns:
 *   .col.col-lg-2     = sidebar (opac-user: #pat_info; others: #navigation)
 *   .col-md-12.col-lg-10 = content
 * These rules ensure a consistent sidebar/content split regardless of which
 * Bootstrap version (or none) the theme loads.
 * Per-theme fonts and colors are applied by each theme's own opac.css.
 * ────────────────────────────────────────────────────────────────────────── */

/* Ensure the outer row wraps correctly on all stock-template account pages. */
#userdetails .row,
#userdetails > .row {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

/* opac-user.pl — Koha uses #userresults > .row as the column wrapper. */
body#opac-user #userresults .row,
body#opac-user #userresults {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

@media (min-width: 992px) {
  /* Sidebar: col-lg-2 = 2/12 = 16.667% — covers #pat_info (opac-user) and
   * #navigation (opac-readingrecord, opac-account, opac-reserve, etc.) */
  #userdetails .col.col-lg-2,
  #userdetails .col-lg-2 {
    flex: 0 0 16.6667% !important;
    max-width: 16.6667% !important;
    width: 16.6667% !important;
    min-width: 0;
  }

  /* Content: col-lg-10 = 10/12 = 83.333% */
  #userdetails .col-md-12.col-lg-10,
  #userdetails .col-lg-10 {
    flex: 0 0 83.3333% !important;
    max-width: 83.3333% !important;
    width: 83.3333% !important;
    min-width: 0 !important;
  }

  /* opac-user.pl uses its own named elements — keep 12rem sidebar for that page. */
  body#opac-user #pat_info.col.col-lg-2,
  body#opac-user #pat_info.col-lg-2 {
    flex: 0 0 12rem !important;
    max-width: 12rem !important;
    width: 12rem !important;
    min-width: 0;
  }

  body#opac-user #opac-user.col-md-12.col-lg-10,
  body#opac-user #main-column.col-md-12.col-lg-10,
  body#opac-user #opac-user.col-lg-10,
  body#opac-user #main-column.col-lg-10 {
    flex: 1 1 0 !important;
    max-width: calc(100% - 12rem) !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 991.98px) {
  /* Stack columns on tablet/mobile */
  #userdetails .col.col-lg-2,
  #userdetails .col-lg-2,
  #userdetails .col-md-12.col-lg-10,
  #userdetails .col-lg-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body#opac-user #pat_info,
  body#opac-user #opac-user,
  body#opac-user #main-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}