@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=IM+Fell+English:ital@0;1&display=swap');

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 6px;
  background-image: url('/images/parchment-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* The direct-child wrapper around <main> on pages using _Layout.cshtml - grows to
   fill any leftover viewport height so .footer sits pinned to the bottom on short
   pages (e.g. Tosta Dielňa - História opráv with few/no records), same as it
   naturally does on the home page, instead of trailing right after the content. */
body > .container-fluid {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.4rem 0;
  margin-top: 4rem;
  text-align: center;
  color: #000;
}
/* --- Tosta Portal: animated home tiles --- */
.home-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.home-header__welcome {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Parchment backdrop behind the home page tile grid. */
.home-tiles-backdrop {
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 0 60px rgba(35, 22, 10, 0.35), 0 2px 10px rgba(0, 0, 0, 0.15);
}

.tile-card {
  opacity: 0;
  transform: translateY(16px);
  animation: tileFadeInUp 0.5s ease forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.18) !important;
  /* Fixed height so every tile matches regardless of how much title/description text
     it carries or which row it lands in - h-100 alone only equalizes cards within the
     same flex row line, not across the whole grid. */
  height: 230px !important;
}

.tile-col:nth-child(1) .tile-card { animation-delay: 0.05s; }
.tile-col:nth-child(2) .tile-card { animation-delay: 0.15s; }
.tile-col:nth-child(3) .tile-card { animation-delay: 0.25s; }
.tile-col:nth-child(4) .tile-card { animation-delay: 0.35s; }
.tile-col:nth-child(5) .tile-card { animation-delay: 0.45s; }

.tile-card:hover,
.tile-card:focus-within {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3) !important;
  z-index: 3;
}

.tile-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tile-accent, #258cfb);
  color: #fff;
  margin-bottom: 0.75rem;
  transition: transform 0.35s ease;
}

.tile-icon-wrap svg {
  width: 24px;
  height: 24px;
}

.tile-icon-wrap img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.tile-card .card-title {
  font-size: 1.75rem;
}

.tile-card:hover .tile-icon-wrap,
.tile-card:focus-within .tile-icon-wrap {
  transform: scale(1.15) rotate(-8deg);
}

.tile-card-sm .card-title {
  font-size: 0.85rem;
}

.tile-icon-wrap-sm {
  width: 36px;
  height: 36px;
}

.tile-icon-wrap-sm svg {
  width: 18px;
  height: 18px;
}

.tile-icon-wrap-sm img {
  width: 18px;
  height: 18px;
}

/* Photo-backed tile (e.g. Tosta Sklad) - a background image set via the --tile-bg-image
   custom property, dimmed under a dark scrim for text contrast and animated brighter/zoomed
   on hover so it reads as alive rather than a flat photo. */
.tile-card--photo {
  overflow: hidden;
}
.tile-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(12, 9, 4, 0.65), rgba(12, 9, 4, 0.65)), var(--tile-bg-image);
  background-size: cover;
  background-position: center;
  filter: brightness(1.05);
  transform: scale(1);
  transition: filter 0.35s ease, transform 0.35s ease;
  z-index: 0;
}
.tile-card--photo:hover::before,
.tile-card--photo:focus-within::before {
  filter: brightness(var(--tile-hover-brightness, 1.5));
  transform: scale(1.06);
}
.tile-card--photo .card-body {
  position: relative;
  z-index: 1;
}
.tile-card--photo .card-title {
  color: #fff;
}
.tile-card--photo .card-text {
  color: #fff;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.35s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-card--photo:hover .card-text,
.tile-card--photo:focus-within .card-text {
  opacity: 1;
}

/* Large "Pripravujeme" label shown centered over a tile's photo while hovering, for the
   modules that aren't built out yet (Kostymérňa, Vystúpenia, Kalendár). */
.tile-coming-soon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.5rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.35s ease;
}
.tile-coming-soon-overlay span {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.tile-card--coming-soon:hover .tile-coming-soon-overlay,
.tile-card--coming-soon:focus-within .tile-coming-soon-overlay {
  opacity: 1;
}


@keyframes tileFadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .tile-card:hover,
  .tile-card:focus-within {
    transform: none;
  }
  .tile-card:hover .tile-icon-wrap,
  .tile-card:focus-within .tile-icon-wrap {
    transform: none;
  }
  .tile-card--photo:hover::before,
  .tile-card--photo:focus-within::before {
    filter: brightness(1.05);
    transform: none;
  }
  .tile-card--photo .card-text {
    transition: none;
  }
  .tile-coming-soon-overlay {
    transition: none;
  }
}

.navbar-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Top bar: same parchment texture as the rest of the portal, darkened underneath so
   the light nav text/icons (navbar-dark) still read clearly against it. */
.navbar-parchment {
  background-image: linear-gradient(rgba(15, 11, 6, 0.82), rgba(15, 11, 6, 0.82)), url('/images/parchment-bg.jpg');
  background-size: cover;
  background-position: center;
}

.navbar-brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.navbar-brand {
  font-size: 1.6rem;
}

/* Nav dropdown lists (Opravy, Zápožičky, Nastavenia, user menu): a warm parchment
   tone close to the portal's overall background instead of stark Bootstrap white,
   but still a shade different from the page's own parchment texture so the menu
   clearly stands out as a popover. --navbar-dropdown-bg is reused below for the
   logged-in user badge so both read as the same surface. */
:root {
  --navbar-dropdown-bg: #ddc98f;
}
.navbar .dropdown-menu {
  background-color: var(--navbar-dropdown-bg);
  border-color: rgba(169, 124, 31, 0.45);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: #cdb676;
}
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background-color: #a97c1f;
  color: #f7f0da;
}
.navbar .dropdown-header {
  color: #4a3220;
}
.navbar .dropdown-divider {
  border-top-color: rgba(169, 124, 31, 0.35);
}

/* Logged-in user badge (top-right corner) - same surface color as the dropdown
   menus above, instead of Bootstrap's plain white bg-light. */
.navbar-user-badge {
  background-color: var(--navbar-dropdown-bg) !important;
  color: #2b2015 !important;
}

/* Every plain Bootstrap .card across the app (forms, details pages, história zápožičiek
   entries, etc.) - the whole portal uses this warm parchment/gold palette now, so a stark
   white card reads as broken. Page-specific themes (e.g. .sklad-theme .card) define their
   own more specific override further down and take precedence over this. */
.card {
  background-color: var(--navbar-dropdown-bg);
  border-color: rgba(169, 124, 31, 0.4);
}

/* Informational "alert-info" banners (e.g. "not yet implemented" placeholders) - use the
   same gold-tan background as the nav dropdown / menu list instead of Bootstrap's default blue. */
.alert-info {
  background-color: var(--navbar-dropdown-bg);
  border-color: rgba(169, 124, 31, 0.4);
  color: #4a3220;
}

/* Category management pages (Sprava kategorii - Tosta Sklad and Kostymerna): a compact
   framed panel instead of a full-width plain white card + bare table, using the same
   warm gold tone as the nav dropdown menus/user badge above for the panel background. */
.category-manage-panel {
  max-width: 640px;
  background-color: var(--navbar-dropdown-bg);
  border: 2px solid rgba(169, 124, 31, 0.5);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(43, 32, 21, 0.25);
  padding: 1.25rem;
}
.category-manage-add {
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(169, 124, 31, 0.35);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.category-manage-table {
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(169, 124, 31, 0.4);
}
.category-manage-table thead th {
  background-color: #4a3220;
  color: #d9b25c;
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.category-manage-table td,
.category-manage-table th {
  border-color: rgba(74, 50, 32, 0.25);
}

/* Osoby a obsadenie (Program roles/casting) table - a compact variant of the category
   management table: tighter row padding, smaller font, and capped input/select widths so
   the table doesn't stretch edge-to-edge with only a few short fields per row. */
.program-roles-table {
  max-width: 900px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(169, 124, 31, 0.4);
  font-size: 0.875rem;
}
.program-roles-table thead th {
  background-color: #4a3220;
  color: #d9b25c;
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.program-roles-table td,
.program-roles-table th {
  border-color: rgba(74, 50, 32, 0.25);
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
}
.program-roles-table td:first-child {
  width: 200px;
}
.program-roles-table td:nth-child(2),
.program-roles-table td:nth-child(3) {
  width: 220px;
}

/* Add-role form below the table - capped to the same width as .program-roles-table
   above it so the Rola/Herec/Alternácia inputs line up with the table's columns
   instead of stretching to the full card width. */
.program-roles-add {
  max-width: 900px;
}

/* Osoby a obsadenie card background - just a bit wider than the 900px table/
   add-form it contains, rather than stretching to the full grid column. */
.program-roles-card {
  max-width: 948px;
}

/* Vedúcko/CoVedúcko ownership card and the "Späť na zoznam programov" row above the
   tabs - capped to the same width as the tab bar's widest card (.program-roles-card),
   instead of stretching across the full page. */
.program-tabs-width {
  max-width: 948px;
}

/* "Tvorca popisu programu:" / "Asistent tvorcu popisu programu:" labels on the ownership card - black, bold and a bit
   larger than body text, instead of the default muted small label. */
.program-ownership-label {
  color: #000;
  font-weight: 700;
  font-size: 1.05rem;
}
.program-roles-table select,
.program-roles-table input {
  font-size: 0.8125rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* Material table on the Program details page - same compact treatment as
   .program-roles-table, and matched to the same 900px width. */
.program-material-table {
  max-width: 900px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(169, 124, 31, 0.4);
  font-size: 0.875rem;
}
.program-material-table thead th {
  background-color: #4a3220;
  color: #d9b25c;
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.program-material-table td,
.program-material-table th {
  border-color: rgba(74, 50, 32, 0.25);
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
}
.program-material-table td:first-child {
  width: 44px;
}
.program-material-table td:nth-child(3) {
  width: 110px;
}
.program-material-table td:nth-child(4) {
  width: 90px;
}
.program-material-table td:nth-child(5) {
  width: 96px;
}
.program-material-table td:nth-child(6) {
  width: 56px;
}
.program-material-table td:last-child {
  width: 48px;
}

/* Add-material form below the table - capped to the same width as
   .program-material-table above it, mirroring .program-roles-add. */
.program-material-add {
  max-width: 900px;
}

/* Materiál/Kostýmy card background - matched to the same width as .program-roles-card
   (Osoby a obsadenie) so all three tabs render at a consistent width. */
.program-material-card {
  max-width: 948px;
}

/* Status badges for Material list items - a standalone counterpart of the .sklad-theme
   .sklad-badge-* set (Programy pages aren't wrapped in .sklad-theme), same palette. */
.program-badge {
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 0.7rem;
}
.program-badge-active {
  background-color: #3c5a34;
  color: #eee7c8;
}
.program-badge-inactive {
  background-color: #7a6a52;
  color: #f2e6c9;
}
.program-badge-broken {
  background-color: #6e2020;
  color: #f2e6c9;
}
.program-badge-lost {
  background-color: #2e1f14;
  color: #d9b25c;
}
.program-badge-borrowed {
  background-color: #a97c1f;
  color: #2e1f14;
}
.program-badge-vyradene {
  background-color: #3a3a3a;
  color: #d9d0b8;
}
.program-badge-rezervovane {
  background-color: #2f5a6e;
  color: #eee7c8;
}

/* Compact "Pridať materiál" form - capped widths instead of stretching across the card. */
.program-material-add select,
.program-material-add input {
  font-size: 0.8125rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* Program page section tabs (Osoby a obsadenie / Materiál / Kostymy) - inactive tabs get the
   same white background/dark text an active Bootstrap tab normally has, so all tabs look
   uniform at rest; the active tab instead gets a distinct brown highlight. */
#programSectionTabs .nav-link {
  background: radial-gradient(circle, #ffffff 0%, #ffffff 55%, #dcdcdc 100%);
  color: #212529;
  border-top-color: #000;
  border-left-color: #000;
  border-right-color: #000;
  border-bottom-color: #dee2e6;
}
#programSectionTabs .nav-link:hover,
#programSectionTabs .nav-link:focus {
  color: #212529;
  border-top-color: #000;
  border-left-color: #000;
  border-right-color: #000;
  border-bottom-color: #dee2e6;
}
#programSectionTabs .nav-link.active {
  background: radial-gradient(circle, #6b4a30 0%, #4a3220 55%, #33220f 100%);
  color: #fff;
  font-weight: 700;
  border-top-color: #000;
  border-left-color: #000;
  border-right-color: #000;
  border-bottom-color: #33220f;
}

/* "Detail" list buttons (Tosta Sklad / Kostymérňa) - shown as a larger eye symbol instead
   of text. */
.btn-detail-eye {
  font-size: 1.9rem;
  line-height: 1;
  padding: 0.15rem 0.7rem;
}

/* Správa programov list table - same compact fancy-framed treatment as the roles/material
   tables, capped so it doesn't stretch edge-to-edge for only 6 short columns. */
.program-list-table {
  max-width: 900px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(169, 124, 31, 0.4);
  font-size: 0.875rem;
}
.program-list-table thead th {
  background-color: #4a3220;
  color: #d9b25c;
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.program-list-table td,
.program-list-table th {
  border-color: rgba(74, 50, 32, 0.25);
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
}
.program-list-table td:nth-child(4),
.program-list-table td:nth-child(5) {
  width: 70px;
}
.program-list-table td:last-child {
  width: 100px;
}

/* "Pridať kategóriu" button on the category management pages - a warm brown instead of
   the default Bootstrap blue, matching the app's wood/parchment palette. */
.btn-category-add {
  background-color: #6b4423;
  border-color: #4a3220;
  color: #fff;
}
.btn-category-add:hover,
.btn-category-add:focus {
  background-color: #5a3a1e;
  border-color: #3a2a18;
  color: #fff;
}

/* Small round "home" icon-button used next to the header action buttons on the
   Remeselná dielňa / Krajčírska dielňa pages, using the uploaded golden home icon. */
.home-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-icon-btn img {
  width: 40px;
  height: 40px;
  transition: transform 0.15s ease;
}
.home-icon-btn:hover img,
.home-icon-btn:focus img {
  transform: scale(1.08);
}

/* Small round "delete" icon-button used on the category management pages, replacing the
   plain Bootstrap "Odstrániť" button with the uploaded red trash-can icon. */
.icon-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}
.icon-btn-delete img {
  width: 40px;
  height: 40px;
  transition: transform 0.15s ease;
}
.icon-btn-delete:hover img,
.icon-btn-delete:focus img {
  transform: scale(1.1);
}

/* Program name "Zmeň" icon-button, matching .icon-btn-delete's treatment. */
.icon-btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}
.icon-btn-edit img {
  width: 28px;
  height: 28px;
  transition: transform 0.15s ease;
}
.icon-btn-edit:hover img,
.icon-btn-edit:focus img {
  transform: scale(1.1);
}

/* Larger variant of .icon-btn-edit for prominent Upraviť actions (item details, category
   and user management rows), sized to match .icon-btn-delete's 40px so edit/delete icons
   pair up visually. */
.icon-btn-edit-lg img {
  width: 40px;
  height: 40px;
}

/* --- Tosta Sklad: medieval / historical theme --- */

/* Login page shell: vertically centers the login window between the (removed) header
   and a slim footer strip, instead of the login window just sitting at the top. */
.login-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 0;
}
.login-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 2rem 0;
}
.login-footer {
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.4rem 0;
  text-align: center;
  flex-shrink: 0;
  color: #000;
}

/* --- Login page: "Chartered Grant" illuminated-manuscript charter theme --- */
.login-charter {
  --charter-gold: #a97c1f;
  --charter-gold-light: #d9b25c;
  --charter-ink: #2b2015;
  --charter-rubric: #6e2020;
  position: relative;
  background-image: url('/images/parchment-bg.jpg');
  background-size: cover;
  background-position: center;
  border: 2px solid var(--charter-gold);
  border-radius: 4px;
  padding: 2.25rem 1.75rem 1.75rem;
  box-shadow: 0 20px 44px -20px rgba(34, 29, 22, 0.5), 0 2px 10px rgba(34, 29, 22, 0.35);
  /* .login-main's row/col grid has no max-width (container-fluid), so on a wide desktop
     screen col-lg-4 alone still stretches this card awkwardly wide - cap and center it. */
  max-width: 480px;
  margin: 0 auto;
}
.login-charter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 250, 230, 0.3), transparent 60%),
    linear-gradient(rgba(43, 32, 21, 0.05), rgba(43, 32, 21, 0.14));
  pointer-events: none;
}
.login-charter::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px double var(--charter-gold);
  pointer-events: none;
}
.login-charter__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  color: var(--charter-gold);
}
.login-charter__corner--tl { top: 6px; left: 6px; }
.login-charter__corner--tr { top: 6px; right: 6px; transform: scaleX(-1); }
.login-charter__corner--bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.login-charter__corner--br { bottom: 6px; right: 6px; transform: scale(-1); }

.login-charter__crest {
  position: relative;
  display: block;
  width: 96px;
  margin: 0 auto 0.5rem;
  mix-blend-mode: multiply;
}
.login-charter__title {
  position: relative;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--charter-ink);
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}
.login-charter__title::first-letter {
  font-size: 1.5em;
  color: var(--charter-gold);
  -webkit-text-stroke: 0.4px var(--charter-ink);
}
.login-charter__rule {
  position: relative;
  width: 62%;
  height: 10px;
  margin: 0 auto 1.5rem;
  background:
    radial-gradient(circle, var(--charter-rubric) 0 3px, transparent 3.5px) center / 12px 100% no-repeat,
    linear-gradient(var(--charter-gold), var(--charter-gold)) left 50% / calc(50% - 8px) 1.5px no-repeat,
    linear-gradient(var(--charter-gold), var(--charter-gold)) right 50% / calc(50% - 8px) 1.5px no-repeat;
}
.login-charter form {
  position: relative;
}
.login-charter .form-label {
  /* Georgia only (not "IM Fell English") - that revival typeface is missing proper
     lowercase glyphs for Slovak/Czech diacritics like z with a caron, rendering them
     as capitals (e.g. "Pouzivatelske" showed a capital Z-caron mid-word). */
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--charter-ink);
}
.login-charter .form-control {
  background-color: #fbf6e8;
  border: 1px solid var(--charter-gold-light);
  color: var(--charter-ink);
}
.login-charter .form-control:focus {
  border-color: var(--charter-gold);
  box-shadow: 0 0 0 0.2rem rgba(169, 124, 31, 0.25);
}
.login-charter .form-check-label {
  /* Same reasoning as .login-charter .form-label above. */
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--charter-ink);
}
/* "Zabudol som heslo" link (Pages/Account/Login.cshtml) - same font as the "Heslo" label
   above it (.login-charter .form-label), so it doesn't read as the browser's default
   sans-serif in a page that's otherwise entirely styled serif/italic. */
.login-charter-forgot-link {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.8rem;
  font-weight: 400;
}
.login-charter__submit {
  background: linear-gradient(180deg, var(--charter-gold-light), var(--charter-gold));
  border: 1px solid var(--charter-ink);
  color: var(--charter-ink);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.login-charter__submit:hover {
  background: linear-gradient(180deg, var(--charter-gold), var(--charter-gold-light));
  color: var(--charter-ink);
}

.sklad-theme {
  --sklad-parchment: #f2e6c9;
  --sklad-parchment-dark: #e6d3a3;
  --sklad-wood: #4a3220;
  --sklad-wood-dark: #2e1f14;
  --sklad-gold: #a97c1f;
  --sklad-gold-light: #d9b25c;
  --sklad-wine: #6e2020;
  --sklad-forest: #3c5a34;
  --sklad-slate: #2f5a6e;
  --sklad-ink: #2b2015;

  background:
    radial-gradient(circle at 15% 10%, rgba(255, 250, 230, 0.55), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(120, 80, 30, 0.15), transparent 55%),
    linear-gradient(var(--sklad-parchment), var(--sklad-parchment-dark));
  border: 1px solid var(--sklad-gold);
  border-radius: 10px;
  box-shadow: inset 0 0 0 4px rgba(74, 50, 32, 0.15), 0 3px 10px rgba(43, 32, 21, 0.25);
  padding: 1.25rem 1.25rem 1.5rem;
  color: var(--sklad-ink);
}

.sklad-theme .sklad-title {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  padding-bottom: 0.35rem;
  border-bottom: 3px double var(--sklad-gold);
}

.sklad-theme .btn-sklad-primary {
  background: linear-gradient(180deg, var(--sklad-gold-light), var(--sklad-gold));
  border: 1px solid var(--sklad-wood);
  color: var(--sklad-wood-dark);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sklad-theme .btn-sklad-primary:hover {
  background: linear-gradient(180deg, var(--sklad-gold), var(--sklad-gold-light));
  color: var(--sklad-wood-dark);
}

.sklad-theme .sklad-filter-bar {
  background: rgba(255, 250, 235, 0.55);
  border: 1px solid var(--sklad-gold-light);
  border-radius: 8px;
  padding: 0.85rem 0.85rem 0.6rem;
}

.sklad-theme .form-control,
.sklad-theme .form-select {
  background-color: #fbf6e8;
  border: 1px solid var(--sklad-gold-light);
  color: var(--sklad-ink);
}
.sklad-theme .form-control:focus,
.sklad-theme .form-select:focus {
  border-color: var(--sklad-gold);
  box-shadow: 0 0 0 0.2rem rgba(169, 124, 31, 0.25);
}

.sklad-theme .btn-outline-secondary {
  border-color: var(--sklad-wood);
  color: var(--sklad-wood-dark);
}
.sklad-theme .btn-outline-secondary:hover {
  background-color: var(--sklad-wood);
  border-color: var(--sklad-wood);
  color: var(--sklad-parchment);
}

.sklad-theme .table {
  background-color: transparent;
  border: 1px solid var(--sklad-gold-light);
}
.sklad-theme .table thead th {
  background-color: var(--sklad-wood);
  color: var(--sklad-gold-light);
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-color: var(--sklad-wood-dark);
  vertical-align: middle;
}
.sklad-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(230, 211, 163, 0.45);
  color: var(--sklad-ink);
}
.sklad-theme .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: rgba(251, 246, 232, 0.6);
  color: var(--sklad-ink);
}
.sklad-theme .table-hover > tbody > tr:hover > * {
  background-color: rgba(169, 124, 31, 0.22);
}
.sklad-theme .table td,
.sklad-theme .table th {
  border-color: rgba(74, 50, 32, 0.25);
}

.sklad-theme .card {
  background: rgba(251, 246, 232, 0.75);
  border: 1px solid var(--sklad-gold-light);
}

/* Heraldic status badges */
.sklad-theme .sklad-badge {
  font-family: "Cinzel", "Georgia", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.sklad-theme .sklad-badge-active {
  background-color: var(--sklad-forest);
  color: #eee7c8;
}
.sklad-theme .sklad-badge-inactive {
  background-color: #7a6a52;
  color: #f2e6c9;
}
.sklad-theme .sklad-badge-broken {
  background-color: var(--sklad-wine);
  color: #f2e6c9;
}
.sklad-theme .sklad-badge-lost {
  background-color: var(--sklad-wood-dark);
  color: var(--sklad-gold-light);
}
.sklad-theme .sklad-badge-borrowed {
  background-color: var(--sklad-gold);
  color: var(--sklad-wood-dark);
}
.sklad-theme .sklad-badge-vyradene {
  background-color: #3a3a3a;
  color: #d9d0b8;
}
.sklad-theme .sklad-badge-rezervovane {
  background-color: var(--sklad-slate);
  color: #eee7c8;
}

.sklad-theme .modal-content {
  background-color: var(--sklad-parchment);
  border: 1px solid var(--sklad-gold);
}
.sklad-theme .modal-header {
  background-color: var(--sklad-wood);
  color: var(--sklad-gold-light);
  border-bottom: 1px solid var(--sklad-gold);
}
.sklad-theme .modal-title {
  font-family: "Cinzel", "Georgia", serif;
}

/* --- Readability: grey text on parchment -> white; links -> bold black --- */
.text-on-parchment {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
a {
  color: #000;
  font-weight: 700;
}

/* --- Readability: outline buttons need a solid backing on the parchment,
   and plain page-title headers should be white to stay legible. --- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-danger {
  background-color: #fff;
}

h1.h3,
h1.h4 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Top navbar: each menu item is a rectangular box that highlights on hover/focus,
   with its label centered both horizontally and vertically inside it. --- */
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  line-height: 1.2;
  transition: background-color 0.15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.show {
  background-color: rgba(255, 255, 255, 0.18);
}
.navbar-nav .nav-link.nav-link-notif-active,
.navbar-nav .nav-link.nav-link-notif-active:hover,
.navbar-nav .nav-link.nav-link-notif-active:focus {
  color: #ff5c5c;
}
.nav-gear-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Bugs and Ideas (ladybug) navbar icon - a bit larger than the other nav icons so it
   reads clearly at a glance. */
.nav-bug-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Flash-highlight for a Program Materiál/Kostýmy row landed on via the Veducko
   stock-shortage notification link (Pages/Shared/_Layout.cshtml) - fades out on its own. */
.program-row-highlight {
  animation: programRowHighlightFade 3s ease-out;
}
@keyframes programRowHighlightFade {
  0% { background-color: rgba(220, 53, 69, 0.35); }
  100% { background-color: transparent; }
}

/* --- Kalendár vystúpení (Pages/Kalendar/Index.cshtml) --- */
.kalendar-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Fancy shared panel treatment (month grid / DayContainer / Programs module) - a parchment-
   toned gradient behind a double gold border, matching the sklad-theme card language used
   elsewhere (modals, filter bars). Overrides the plain Bootstrap "card shadow-sm" look. */
.kalendar-month,
.kalendar-day-container,
.kalendar-programs {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 250, 230, 0.5), transparent 45%),
    linear-gradient(180deg, #fbf6e8, #f2e6c9);
  border: 3px double var(--sklad-gold, #a97c1f);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px rgba(74, 50, 32, 0.08), 0 3px 10px rgba(43, 32, 21, 0.22);
  color: var(--sklad-ink, #2b2015);
}

.kalendar-month {
  flex: 0 0 210px;
  padding: 0.6rem;
}
.kalendar-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 3px double var(--sklad-gold, #a97c1f);
}
.kalendar-month-title {
  text-align: center;
}
.kalendar-year {
  font-size: 0.8rem;
  font-weight: 600;
}
.kalendar-month-name {
  font-size: 1rem;
  font-family: "Cinzel", "Georgia", serif;
}
.kalendar-nav-arrow {
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  text-decoration: none;
  border-radius: 6px;
  color: inherit;
  border: 1px solid transparent;
}
.kalendar-nav-arrow:hover {
  background-color: rgba(169, 124, 31, 0.15);
  border-color: var(--sklad-gold, #a97c1f);
}

.kalendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.kalendar-grid th {
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 0.2rem;
  opacity: 0.75;
}
.kalendar-cell {
  text-align: center;
  padding: 1px;
  height: 27px;
  border-radius: 5px;
}
.kalendar-cell a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 0.75rem;
  border: 1px solid rgba(74, 50, 32, 0.15);
}
.kalendar-cell a:hover {
  background-color: rgba(169, 124, 31, 0.15);
}
.kalendar-cell--blank {
  background: transparent;
}
.kalendar-cell--blank a {
  border-color: transparent;
}
.kalendar-cell--today a {
  border: 2px solid var(--sklad-gold, #a97c1f);
}
/* At least one program scheduled that day - green fill + bold number. */
.kalendar-cell--has-entries a {
  background-color: #3c5a34;
  border-color: #2c4226;
  color: #fff;
  font-weight: 700;
}
.kalendar-cell--has-entries a:hover {
  background-color: #48693e;
}
.kalendar-cell--selected a {
  background-color: var(--sklad-gold, #a97c1f);
  border-color: var(--sklad-wood, #4a3220);
  color: #fff;
  font-weight: 700;
}

.kalendar-day-container {
  flex: 0 0 640px;
  padding: 1rem;
}
.kalendar-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px double var(--sklad-gold, #a97c1f);
}
.kalendar-day-header-text {
  font-family: "Cinzel", "Georgia", serif;
}
.kalendar-day-of-week {
  font-weight: 700;
  font-size: 1.05rem;
}
.kalendar-day-date {
  font-size: 0.85rem;
  opacity: 0.85;
}
.kalendar-add-vystupenie-form {
  flex-shrink: 0;
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.kalendar-vystupenie-name-input {
  width: 150px;
}
.kalendar-vystupenie-days-select {
  width: 84px;
  flex-shrink: 0;
}
.kalendar-btn-add-vystupenie {
  background: linear-gradient(180deg, var(--sklad-gold-light, #d9b25c), var(--sklad-gold, #a97c1f));
  border: 1px solid var(--sklad-wood, #4a3220);
  color: var(--sklad-wood-dark, #2e1f14);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.kalendar-btn-add-vystupenie:hover {
  background: linear-gradient(180deg, var(--sklad-gold, #a97c1f), var(--sklad-gold-light, #d9b25c));
}

.kalendar-no-vystupenie {
  padding: 1rem;
  text-align: center;
}

.kalendar-vystupenia-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.kalendar-vystupenie-box {
  flex: 1 1 0;
  min-width: 0;
  border: 2px solid var(--sklad-gold, #a97c1f);
  border-radius: 8px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.kalendar-vystupenie-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.kalendar-vystupenie-label {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: "Cinzel", "Georgia", serif;
  color: var(--sklad-wood-dark, #2e1f14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kalendar-vystupenie-remove-form {
  flex-shrink: 0;
  line-height: 1;
}
.kalendar-vystupenie-remove {
  background: none;
  border: 1px solid var(--sklad-wine, #6e2020);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  color: var(--sklad-wine, #6e2020);
  font-size: 0.9rem;
  cursor: pointer;
}
.kalendar-vystupenie-remove:hover {
  background-color: var(--sklad-wine, #6e2020);
  color: #fff;
}
/* CSS grid, not a flex column of independent rows: every half-hour label/drop-target sits at
   its own explicit grid-row, and a placed tile is given "grid-row: start / span N" (N from
   IndexModel.ComputeSlotsSpan) so a program over 30 minutes visually stretches across and fills
   its full N-slot block on the time grid, rather than just growing its own starting row. */
.kalendar-day-slots {
  display: grid;
  /* grid-template-columns is set inline per Vystúpenie box (48px + one 1fr sub-column per
     concurrent Program - see VystupenieView.MaxConcurrent) since it varies per day/Vystúpenie. */
  grid-auto-rows: minmax(30px, auto);
  border-top: 1px solid rgba(74, 50, 32, 0.2);
}
.kalendar-slot-label {
  grid-column: 1;
  font-size: 0.72rem;
  opacity: 0.75;
  padding: 2px 6px 0 0;
  text-align: right;
  border-bottom: 1px solid rgba(74, 50, 32, 0.15);
}
.kalendar-slot-drop {
  border-bottom: 1px solid rgba(74, 50, 32, 0.15);
  transition: background-color 0.1s ease;
}
.kalendar-slot-drop--over {
  background-color: rgba(169, 124, 31, 0.2);
}

.kalendar-placed-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 7px;
  margin: 1px 2px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--sklad-gold-light, #d9b25c), var(--sklad-gold, #a97c1f));
  border: 1px solid var(--sklad-wood, #4a3220);
  color: var(--sklad-wood-dark, #2e1f14);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(43, 32, 21, 0.25);
  box-sizing: border-box;
  overflow: hidden;
}
.kalendar-placed-tile-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
}
/* Typ programu = Hry only: no line-clamp/truncation. .kalendar-day-slots rows are
   grid-auto-rows: minmax(30px, auto), and a Hry block usually spans several of them (its own
   "Počet hodín"), so there's normally room to grow the row(s) to fit the full name instead of
   cutting it short with an ellipsis - a plain Program keeps the 2-line clamp above. */
.kalendar-placed-tile--hry {
  overflow: visible;
}
.kalendar-placed-tile--hry .kalendar-placed-tile-name {
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
}
.kalendar-placed-tile-remove {
  background: none;
  border: none;
  color: var(--sklad-wood-dark, #2e1f14);
  opacity: 0.75;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.kalendar-placed-tile-remove:hover {
  opacity: 1;
}

.kalendar-programs {
  flex: 1 1 260px;
  max-width: 420px;
  padding: 1rem;
}
.kalendar-programs-header {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px double var(--sklad-gold, #a97c1f);
}
.kalendar-programs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
}
.kalendar-program-tile {
  flex: 0 0 calc(50% - 4px);
  box-sizing: border-box;
  padding: 8px 6px;
  border-radius: 6px;
  background-color: #fbf6e8;
  border: 1px solid var(--sklad-gold-light, #d9b25c);
  text-align: center;
  font-size: 0.82rem;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px rgba(43, 32, 21, 0.12);
}
.kalendar-program-tile:hover {
  border-color: var(--sklad-gold, #a97c1f);
  box-shadow: 0 2px 4px rgba(43, 32, 21, 0.2);
}

@media (max-width: 700px) {
  .kalendar-layout {
    flex-direction: column;
  }
  .kalendar-month,
  .kalendar-day-container,
  .kalendar-programs {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .kalendar-vystupenia-row {
    flex-direction: column;
  }
}

/* Printer icon next to a Vystúpenie's name (Kalendar/Index) - links to Kalendar/Checklist. */
.kalendar-vystupenie-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sklad-wood-dark, #2e1f14);
  opacity: 0.75;
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
}
.kalendar-vystupenie-print:hover {
  opacity: 1;
  background-color: rgba(169, 124, 31, 0.15);
}

/* --- Print-ready checklist (Pages/Kalendar/Checklist.cshtml) --- */
.checklist-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
/* Tlačiť / Poslať PDF na e-mail icon buttons, side by side (Pages/Kalendar/Checklist.cshtml). */
.checklist-toolbar-actions {
  display: flex;
  gap: 0.5rem;
}
.checklist-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(180deg, var(--sklad-gold-light, #d9b25c), var(--sklad-gold, #a97c1f));
  border: 1px solid var(--sklad-wood, #4a3220);
  border-radius: 4px;
  color: var(--sklad-wood-dark, #2e1f14);
  cursor: pointer;
}
.checklist-icon-btn:hover {
  background: linear-gradient(180deg, var(--sklad-gold, #a97c1f), var(--sklad-gold-light, #d9b25c));
}
.checklist-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.9rem 1.1rem;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 250, 230, 0.5), transparent 45%),
    linear-gradient(180deg, #fbf6e8, #f2e6c9);
  border: 3px double var(--sklad-gold, #a97c1f);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px rgba(74, 50, 32, 0.08), 0 3px 10px rgba(43, 32, 21, 0.22);
  color: var(--sklad-ink, #2b2015);
}
.checklist-header {
  text-align: center;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px double var(--sklad-gold, #a97c1f);
}
.checklist-title {
  font-family: "Cinzel", "Georgia", serif;
  font-size: 1.2rem;
  margin: 0;
}
.checklist-date {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.15rem;
}
.checklist-programs {
  font-size: 0.68rem;
  opacity: 0.75;
  font-style: italic;
  margin-top: 0.15rem;
}
.checklist-section-title {
  font-family: "Cinzel", "Georgia", serif;
  font-size: 0.95rem;
  margin: 0.7rem 0 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(74, 50, 32, 0.25);
}
.checklist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.checklist-table th {
  text-align: left;
  font-weight: 600;
  padding: 0.2rem 0.35rem;
  border-bottom: 2px solid rgba(74, 50, 32, 0.35);
}
.checklist-table td {
  padding: 0.2rem 0.35rem;
  border-bottom: 1px solid rgba(74, 50, 32, 0.15);
}
.checklist-col-programs {
  width: 9rem;
}
.checklist-row-programs {
  font-size: 0.6rem;
  opacity: 0.7;
  font-style: italic;
  line-height: 1.2;
}
.checklist-table tbody tr:last-child td {
  border-bottom: none;
}
.checklist-col-pocet {
  text-align: right;
  width: 3.5rem;
}
.checklist-col-check {
  width: 1.5rem;
  text-align: center;
}
.checklist-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--sklad-wood, #4a3220);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.checklist-checkbox:checked {
  background: var(--sklad-gold, #a97c1f);
}

@media print {
  .navbar,
  .footer,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff !important;
  }
  .checklist-page {
    max-width: 100%;
    box-shadow: none;
    border-width: 1px;
  }
}