/*
  KAZEMARU — RESPONSIVE LAYOUT
  One clean responsive layer for desktop, tablet and phone.
  No fixed page widths, no horizontal scrolling, no elements
  positioned over the header.
*/

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
}

button, input, select, textarea {
  max-width: 100%;
  min-width: 0;
}

a, button, input, select, textarea, p, h1, h2, h3, h4, h5, h6,
span, strong, small, time {
  overflow-wrap: anywhere;
}

/* =========================================================
   DESKTOP HEADER
   ========================================================= */

.site-header {
  width: 100%;
  padding: 16px 20px !important;
}

.site-header .header-inner {
  position: relative;
  width: min(1240px, 100%) !important;
  min-width: 0 !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;

  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: flex-start !important;

  overflow: visible !important;
}

.site-header .logo {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 150px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header .desktop-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  overflow: hidden;
}

.site-header .desktop-nav a {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 9px 9px !important;
  font-size: 14px !important;
}

/* Anonymous switch: normal element in header, never absolute. */
.site-header .kioshi-global-tools {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  overflow: visible !important;
  z-index: 2 !important;
}

.site-header .kioshi-global-tool {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 210px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header #accountWidget {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 190px !important;
  margin: 0 !important;
}

.site-header .account-widget {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 190px !important;
}

.site-header .account-button {
  max-width: 190px;
}

.site-header .account-name {
  max-width: 90px !important;
}

/* Mobile-only account card is not part of desktop header. */
.mobile-account-slot {
  display: none;
}

/* =========================================================
   GLOBAL CONTENT SAFETY
   ========================================================= */

main, .site-footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.k-page,
.profile-page,
.suggestions-page,
.suggestions-container,
.collection-hero,
.collection-overview,
.collection-section,
.admin-page,
.admin-suggestions-page {
  min-width: 0;
  max-width: 100%;
}

.k-page {
  width: min(1120px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}

.k-page-hero > *,
.k-panel > *,
.k-item > *,
.k-form > *,
.k-toolbar > * {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   COLLECTION
   ========================================================= */

.collection-hero-inner,
.collection-overview-grid,
.collection-section {
  width: min(1120px, calc(100% - 40px));
  max-width: 1120px;
  margin-inline: auto;
}

.collection-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.collection-overview-card {
  min-width: 0;
}

.collection-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.collection-card {
  min-width: 0;
  max-width: 100%;
}

.collection-poster {
  min-width: 0;
  max-width: 100%;
}

.collection-poster img,
.collection-card img {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   SHARED LISTS / FORMS
   ========================================================= */

.k-list,
.k-item,
.k-form,
.k-toolbar,
.k-stats-grid,
.k-mini-stats {
  width: 100%;
  min-width: 0;
}

.k-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-toolbar {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.k-item {
  grid-template-columns: 76px minmax(0, 1fr) minmax(120px, auto);
}

.k-item-cover {
  flex: 0 0 auto;
  max-width: 100%;
}

.k-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-mini-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.table-wrap,
.data-table-wrap,
.admin-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   SUGGESTIONS
   ========================================================= */

.suggestions-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.suggestions-container {
  width: min(1120px, calc(100% - 40px)) !important;
  margin-inline: auto;
}

.suggestions-info {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.suggestion-source-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.suggestion-toolbar {
  grid-template-columns: minmax(0, 1fr) 190px 190px auto auto;
}

.suggestion-toolbar > *,
.suggestion-source-tabs > * {
  min-width: 0;
}

/* =========================================================
   SCHEDULE
   ========================================================= */

.schedule-public-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-public-card,
.schedule-public-item,
.schedule-public-copy,
.schedule-card-body,
.schedule-card-media {
  min-width: 0;
  max-width: 100%;
}

.schedule-public-item {
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
}

.schedule-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.schedule-modal-backdrop {
  padding: 20px;
}

.schedule-modal {
  width: min(760px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100dvh - 40px);
}

/* =========================================================
   ADMIN
   ========================================================= */

.admin-suggestion-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-suggestions-toolbar {
  grid-template-columns: minmax(0, 1fr) 190px 190px;
}

.admin-suggestion-card,
.admin-suggestion-item {
  min-width: 0;
  max-width: 100%;
}

.admin-schedule-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {
  .site-header .desktop-nav a {
    padding-inline: 6px !important;
    font-size: 13px !important;
  }

  .site-header .kioshi-global-tool {
    max-width: 180px !important;
    padding-inline: 9px !important;
  }

  .site-header .account-name {
    max-width: 65px !important;
  }

  .k-page,
  .suggestions-container,
  .collection-hero-inner,
  .collection-overview-grid,
  .collection-section {
    width: min(100% - 28px, 1000px) !important;
  }

  .k-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .k-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .collection-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suggestions-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .suggestion-source-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .suggestion-toolbar {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .schedule-public-grid {
    grid-template-columns: 1fr;
  }

  .admin-suggestion-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-suggestions-toolbar {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 800px) {
  .site-header {
    padding: 10px !important;
  }

  .site-header .header-inner {
    min-height: 56px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }

  /* On phones the header contains only logo + menu.
     The account name/avatar is moved into the opened menu. */
  .site-header .logo {
    max-width: 190px !important;
    font-size: 17px !important;
  }

  .site-header .desktop-nav,
  .site-header .kioshi-global-tools,
  .site-header #accountWidget {
    display: none !important;
  }

  .site-header .menu-button {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    pointer-events: auto;
  }

  .mobile-menu {
    width: min(360px, 92vw) !important;
    max-width: 92vw !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .mobile-menu-header {
    margin-bottom: 18px !important;
  }

  .mobile-account-slot {
    display: block;
    width: 100%;
    margin: 0 0 18px;
  }

  .mobile-account-card {
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(30,24,45,.94), rgba(12,11,17,.98));
  }

  .mobile-account-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 13px;
    background: rgba(255,255,255,.035);
  }

  .mobile-account-identity > div {
    min-width: 0;
  }

  .mobile-account-identity strong,
  .mobile-account-identity span {
    display: block;
    overflow-wrap: anywhere;
  }

  .mobile-account-identity strong {
    color: #fff;
    font-size: 15px;
  }

  .mobile-account-identity div span {
    margin-top: 3px;
    color: #90899b;
    font-size: 12px;
  }

  .mobile-account-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(141,76,255,.6);
  }

  .mobile-account-avatar-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg,#8d4cff,#19b5ff);
  }

  .mobile-account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 11px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: rgba(255,255,255,.82);
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
  }

  .mobile-account-link:hover {
    background: rgba(141,76,255,.12);
    color: #fff;
  }

  .mobile-account-icon {
    width: 22px;
    flex: 0 0 22px;
    text-align: center;
  }

  .mobile-admin-link {
    border: 1px solid rgba(155,78,255,.35);
    background: rgba(141,76,255,.08);
    color: #d1a7ff;
  }

  .mobile-logout-link {
    color: #ff7b91;
  }

  .mobile-account-login {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(155,78,255,.35);
    border-radius: 14px;
    background: linear-gradient(135deg,#7f2cff,#a83cff);
    color: #fff;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
  }

  .mobile-nav {
    width: 100%;
  }

  main,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .k-page {
    width: calc(100% - 20px) !important;
    padding-top: 92px !important;
    padding-bottom: 54px !important;
  }

  .k-page-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .k-page h1 {
    font-size: clamp(38px, 13vw, 58px) !important;
  }

  .k-hero-badge {
    width: 100%;
    min-width: 0;
  }

  .k-panel {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .k-panel-head {
    flex-wrap: wrap;
    align-items: flex-start !important;
  }

  .k-form {
    grid-template-columns: 1fr !important;
  }

  .k-form .wide {
    grid-column: auto !important;
  }

  .k-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .k-form-actions > * {
    width: 100%;
  }

  .k-toolbar {
    grid-template-columns: 1fr !important;
  }

  .k-toolbar > * {
    width: 100%;
  }

  .k-item {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 13px !important;
    align-items: start !important;
  }

  .k-item-cover {
    width: 78px !important;
    height: 112px !important;
  }

  .k-item-side {
    grid-column: 1 / -1 !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    text-align: left !important;
  }

  .k-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .k-mini-stats {
    grid-template-columns: 1fr !important;
  }

  /* ---------- collection ---------- */

  .collection-hero-inner,
  .collection-overview-grid,
  .collection-section {
    width: calc(100% - 20px) !important;
  }

  .collection-hero {
    padding-top: 92px !important;
    padding-bottom: 42px !important;
  }

  .collection-title {
    font-size: clamp(44px, 14vw, 70px) !important;
  }

  .collection-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .collection-overview-card {
    padding: 16px !important;
  }

  .collection-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .collection-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .collection-search,
  .collection-sort {
    width: 100% !important;
    min-width: 0 !important;
  }

  .collection-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  .collection-filter {
    max-width: 100%;
  }

  /* ---------- suggestions ---------- */

  .suggestions-page {
    padding: 92px 10px 54px !important;
  }

  .suggestions-container {
    width: 100% !important;
  }

  .suggestions-header h1 {
    font-size: clamp(44px, 14vw, 70px) !important;
  }

  .suggestions-info {
    grid-template-columns: 1fr !important;
  }

  .suggestion-form,
  .suggestions-list-section {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .suggestion-source-tabs {
    grid-template-columns: 1fr 1fr !important;
  }

  .suggestion-toolbar {
    grid-template-columns: 1fr !important;
  }

  .suggestion-toolbar > * {
    width: 100%;
    grid-column: auto !important;
  }

  /* ---------- schedule ---------- */

  .schedule-public-grid {
    grid-template-columns: 1fr !important;
  }

  .schedule-public-item {
    grid-template-columns: 1fr !important;
  }

  .schedule-hero-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .schedule-hero-actions > * {
    width: 100% !important;
  }

  .schedule-modal-backdrop {
    padding: 10px !important;
  }

  .schedule-modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  /* ---------- admin ---------- */

  .admin-suggestion-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-suggestions-toolbar {
    grid-template-columns: 1fr !important;
  }

  .admin-suggestions-toolbar > * {
    width: 100%;
  }

  .admin-schedule-row {
    grid-template-columns: 1fr !important;
  }

  /* ---------- profile ---------- */

  .profile-page {
    width: 100%;
    padding: 92px 10px 54px !important;
  }

  .profile-section {
    width: 100%;
    max-width: 100%;
  }

  .profile-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px !important;
    gap: 18px !important;
  }

  .profile-data-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-field-full {
    grid-column: auto !important;
  }

  .profile-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .profile-actions > * {
    width: 100% !important;
  }

  /* ---------- footer ---------- */

  .footer-inner {
    width: 100% !important;
    padding: 34px 16px !important;
    flex-direction: column;
    align-items: flex-start !important;
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {
  .site-header .logo {
    max-width: 170px !important;
    font-size: 16px !important;
  }

  .mobile-menu {
    width: 94vw !important;
    max-width: 94vw !important;
  }

  .k-page,
  .collection-hero-inner,
  .collection-overview-grid,
  .collection-section {
    width: calc(100% - 16px) !important;
  }

  .collection-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .k-stats-grid,
  .admin-suggestion-stats {
    grid-template-columns: 1fr !important;
  }

  .k-item {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  .k-item-cover {
    width: 68px !important;
    height: 98px !important;
  }

  .suggestion-source-tabs {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}