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;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  flex: 0 0 auto;
}

.icon-btn svg {
  width: 14px;
  height: 14px;
}

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

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* App shell: WordPress-style collapsible/expandable left sidebar */

body {
  margin-bottom: 0;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.app-sidebar {
  --app-sidebar-width: 240px;
  --app-sidebar-width-collapsed: 64px;
  width: var(--app-sidebar-width);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #1d2327;
  color: #c3c4c7;
  transition: width 0.15s ease-in-out;
}

.app-sidebar__brand {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-sidebar__brand .app-nav__link {
  font-weight: 600;
  font-size: 1.1rem;
}

.app-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.app-sidebar__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 0;
}

.app-nav, .app-nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav__row {
  display: flex;
  align-items: stretch;
}

.app-nav__link, .app-nav__link--button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  padding: 0.6rem 0.9rem;
  color: #c3c4c7;
  text-decoration: none;
  border-left: 3px solid transparent;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font: inherit;
}

.app-nav__link:hover, .app-nav__link--button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.app-nav__link.is-active {
  color: #fff;
  background: rgba(79, 148, 212, 0.15);
  border-left-color: #4f94d4;
}

.app-nav__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.app-nav__icon svg {
  width: 100%;
  height: 100%;
}

.app-nav__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-nav__caret {
  flex: 0 0 auto;
  width: 2.25rem;
  background: none;
  border: none;
  color: #c3c4c7;
  cursor: pointer;
}

.app-nav__caret svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease-in-out;
}

.app-nav__item.is-open > .app-nav__row .app-nav__caret svg {
  transform: rotate(180deg);
}

.app-nav__sublist {
  display: none;
  background: rgba(0, 0, 0, 0.15);
}

.app-nav__item.is-open > .app-nav__sublist {
  display: block;
}

.app-nav__sublist a {
  display: block;
  padding: 0.45rem 0.9rem 0.45rem 2.65rem;
  color: #c3c4c7;
  text-decoration: none;
  font-size: 0.9rem;
}

.app-nav__sublist a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* Collapsed state: icon-only rail (persisted via localStorage on <html>) */

html.sidebar-collapsed .app-sidebar {
  width: var(--app-sidebar-width-collapsed);
}

html.sidebar-collapsed .app-nav__label,
html.sidebar-collapsed .app-nav__caret,
html.sidebar-collapsed .app-nav__item .app-nav__sublist {
  display: none !important;
}

html.sidebar-collapsed .app-sidebar__collapse-icon svg {
  transform: rotate(180deg);
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  background: #f0f0f1;
}

.app-content {
  max-width: 1400px;
  padding: 1.5rem;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1d2327 0%, #2c3338 45%, #1d2327 100%);
  padding: 1.5rem;
}

.auth-content {
  width: 100%;
  max-width: 480px;
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 2.25rem 2rem;
}

.auth-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.auth-card__brand-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1d2327;
  color: #fff;
}

.auth-card__brand-icon svg {
  width: 24px;
  height: 24px;
}

.auth-card__brand-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d2327;
}

.auth-card h1 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1d2327;
  margin-bottom: 1.25rem;
  text-align: center;
}

.auth-card .form-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: #50575e;
}

.auth-card .btn-primary {
  width: 100%;
  padding: 0.55rem;
  font-weight: 500;
}

.auth-card__footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
}

.auth-card__footer a {
  color: #4f94d4;
  text-decoration: none;
}

.auth-card__footer a:hover {
  text-decoration: underline;
}

.auth-card .alert {
  font-size: 0.9rem;
}

/* Tree explorer (shared by Sections and Media) */

.tree-explorer {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  min-height: 80vh;
}

.tree-explorer__tree {
  flex: 0 0 320px;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  padding: 0.75rem;
  overflow-y: auto;
}

.tree-explorer__detail {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.tree-root, .tree-node__children {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.tree-node__children {
  padding-left: 1.15rem;
  display: none;
}

.tree-node.is-open > .tree-node__children {
  display: block;
}

.tree-node.is-hidden {
  display: none;
}

.tree-node__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 3px;
}

.tree-node.is-selected > .tree-node__row {
  background: rgba(34, 113, 177, 0.1);
}

.tree-node__toggle {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: #50575e;
  cursor: pointer;
}

.tree-node__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease-in-out;
}

.tree-node.is-open > .tree-node__row > .tree-node__toggle svg {
  transform: rotate(90deg);
}

.tree-node__toggle--spacer {
  cursor: default;
}

.tree-node__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem;
  color: #1d2327;
  text-decoration: none;
  border-radius: 3px;
  min-width: 0;
}

.tree-node__link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.tree-node__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-node__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.tree-node__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.tree-node__badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #50575e;
  background: #f0f0f1;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}

/* Media library */

.media-browser {
  position: relative;
  min-height: 100%;
  border-radius: 4px;
  transition: outline-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  outline: 2px dashed transparent;
  outline-offset: 4px;
}

.media-browser.is-dragover {
  outline-color: #4f94d4;
  background: rgba(79, 148, 212, 0.05);
}

.media-browser__folders {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.media-browser__folders a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: #f0f0f1;
  border-radius: 4px;
  text-decoration: none;
  color: #1d2327;
}

.media-browser__folders a:hover {
  background: #e0e0e1;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.media-grid__item {
  position: relative;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}

.media-grid__item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.media-grid__thumbnail-link {
  display: block;
}

.media-grid__filetype {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: #8c8f94;
}

.media-grid__filetype--pdf { background: #c0341d; }
.media-grid__filetype--doc { background: #2271b1; }
.media-grid__filetype--xls { background: #1e7b34; }
.media-grid__filetype--ppt { background: #d3742f; }
.media-grid__filetype--zip { background: #6c4ab6; }
.media-grid__filetype--txt { background: #50575e; }
.media-grid__filetype--generic { background: #8c8f94; }

.media-grid__caption {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-grid__delete {
  line-height: 1;
  padding: 0.1rem 0.4rem;
}

.media-grid__actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  gap: 0.25rem;
}

.media-grid__actions .media-grid__open-folder {
  position: static;
  background: none;
  padding: 0;
}

.media-grid__folder-path {
  display: block;
  color: #757575;
}

.media-grid__open-folder {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
}

/* Media grid view modes (large is the default, no attribute needed) */

html[data-media-view="medium"] .media-grid {
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
}

html[data-media-view="medium"] .media-grid__item img {
  height: 70px;
}

html[data-media-view="medium"] .media-grid__filetype {
  height: 70px;
  font-size: 0.65rem;
}

html[data-media-view="small"] .media-grid {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 0.35rem;
}

html[data-media-view="small"] .media-grid__item img {
  height: 40px;
}

html[data-media-view="small"] .media-grid__filetype {
  height: 40px;
  font-size: 0.5rem;
}

html[data-media-view="small"] .media-grid__caption {
  display: none;
}

html[data-media-view="small"] .media-grid__actions {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

html[data-media-view="small"] .media-grid__item:hover .media-grid__actions,
html[data-media-view="small"] .media-grid__item:focus-within .media-grid__actions {
  opacity: 1;
}

html[data-media-view="list"] .media-grid {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

html[data-media-view="list"] .media-grid__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-bottom: 1px solid #f0f0f1;
  border-radius: 0;
  padding: 0.3rem 0.4rem;
}

html[data-media-view="list"] .media-grid__item img {
  display: none;
}

html[data-media-view="list"] .media-grid__filetype {
  display: none;
}

html[data-media-view="list"] .media-grid__caption {
  flex: 1 1 auto;
  padding: 0;
  white-space: normal;
}

html[data-media-view="list"] .media-grid__actions {
  position: static;
  margin-left: auto;
}

/* Pagination bar (reusable Pagination view component) */

.pagination-bar a.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Per-page "what can you do here" blurb (_PageDescription.cshtml), reused by every main list page.
   Collapsed/expanded state is remembered per page via localStorage (see site.js). */

.page-description {
  margin-bottom: 1rem;
}

.page-description__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 0.35rem;
  color: #6c757d;
  font-size: 0.85rem;
  cursor: pointer;
}

.page-description__toggle:hover {
  color: #495057;
}

.page-description__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease-in-out;
}

.page-description__toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.page-description__body p {
  max-width: 60rem;
  color: #495057;
  margin-bottom: 0;
}

/* Shared AJAX-loaded editor offcanvas (#appEditOffcanvas), reused by any list view via
   data-offcanvas-url/data-offcanvas-title triggers */

#appEditOffcanvas {
  --bs-offcanvas-width: min(600px, 92vw);
}