/**
 * layout.css
 * Page shell / frame layout rules extracted from main.css.
 * Covers: topbar, sidebar, toolbar, main content area, content sections,
 * and their responsive variants.
 */

/* ── Container ── */

.container {
  padding-inline: var(--pico-spacing);
  max-width: 100%;
}

/* ── Topbar ── */

section.topbar {
  display: flex;
  width: 100%;
  background: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  height: var(--pico-topbar-height);
  align-items: center;
  justify-content: space-between;
  padding: var(--pico-spacing);
  margin: 0;
  z-index: 999;
  border-bottom: 1px solid var(--pico-form-element-border-color);
}

section.topbar details {
  margin: 0;
}

.topbar_toolbar {
  display: flex;
  align-items: center;
  gap: calc(var(--pico-spacing) / 2);
}

.topbar_toolbar details.dropdown summary::after {
  display: none;
}

.topbar_toolbar details.dropdown summary+ul,
.login_header details.dropdown summary+ul,
.card_header details.dropdown summary+ul {
  left: unset;
  right: 0;
}

.topbar_toolbar [role="button"] {
  padding: 5px 10px;
  background: var(--pico-secondary-background-button-bar);
  border-color: var(--pico-border-color-button-bar);
  color: #1b1f27;
}

.topbar_toolbar li.level_1 i {
  width: 12px;
}

.topbar_account_icon {
  display: none;
}

.topbar_toolbar li.level_1 a {
  display: flex !important;
  align-items: center;
  gap: 13px;
}

#mobile-menu li.level_1.spacer {
  display: none;
}

details#mobile-menu {
  display: none;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: var(--hb-font-size-sm);
  line-height: 1;
  text-align: center;
}

/* ── Sidebar ── */

.sidebar {
  width: var(--pico-sidebar-width);
  height: calc(100% - var(--pico-topbar-height));
  position: fixed;
  left: 0;
  top: var(--pico-topbar-height);
  background: var(--pico-background-color-nav);
  padding: var(--pico-spacing);
  border-right: 1px solid var(--pico-form-element-border-color);
  padding-left: 0;
  overflow-y: auto;
}

.sidebar nav li {
  width: 100%;
  padding: 0;
  position: relative;
}

.sidebar li.level_1 a {
  display: flex;
  align-items: center;
  gap: calc(var(--pico-spacing) / 1.5);
  line-height: 1;
  padding: 10px;
  margin: 0;
  color: var(--pico-color-nav);
  padding-left: var(--pico-spacing);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

li.level_1.active_tree a {
  background: var(--pico-active-tree);
  color: var(--pico-primary);
  position: relative;
}

.sidebar li.level_1:not(.spacer) a:hover {
  background: var(--pico-active-tree);
  color: var(--pico-primary);
  position: relative;
}

.sidebar li.level_1:not(.spacer) a:hover:before {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  background: var(--pico-primary);
  left: 0;
  top: 0;
}

li.level_1.active_tree a:before {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  background: var(--pico-primary);
  left: 0;
  top: 0;
}

.sidebar nav ul {
  flex-direction: column;
  align-items: baseline;
  width: 100%;
  margin-left: 0;
}

.sidebar li.level_1 a i {
  font-size: var(--hb-font-size-base);
  aspect-ratio: 1;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

li.level_1.spacer {
  margin-top: 20px;
}

li.level_1.spacer a {
  font-size: var(--hb-font-size-sm);
  font-weight: 500;
  padding-block-end: 5px !important;
  color: var(--pico-color-nav-secondary);
}

.sidebar li.level_1.levels:after {
  width: 7px;
  height: 7px;
  transition: 0.5s;
  transform: rotate(225deg);
  position: absolute;
  cursor: pointer;
  background: transparent !important;
  border-top: 1px solid var(--pico-contrast);
  border-left: 1px solid var(--pico-contrast);
  content: "";
  top: 13px;
  right: 0px;
}

.sidebar li.level_1.levels:hover:after {
  transform: rotate(45deg);
  top: 13px;
}

.sidebar ul.level_2 {
  position: relative;
  padding-left: 10px;
  border-left: 1px solid var(--pico-primary);
  margin-left: 15px;
  display: none;
}

.sidebar li.level_1.levels:hover ul.level_2 {
  display: block;
}

.sidebar li.level_2 {
  margin: 0;
  padding: 0;
}

/* ── Toolbar ── */

.left_toolbar {
  display: flex;
  gap: var(--pico-spacing);
  align-items: center;
}

.toolbar label {
  margin: 0;
}

.toolbar {
  position: fixed;
  top: var(--pico-topbar-height);
  right: 0;
  width: calc(100% - var(--pico-sidebar-width));
  z-index: 998;
  background-color: #f9f9f9a9;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  padding: var(--pico-spacing);
  padding-inline: 0;
}

.inline_toolbar {
    display: flex;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.toolbar>.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pico-spacing);
}

.toolbar details.dropdown {
  margin-bottom: 0;
}

/* ── Main Content + Footer ── */

.main_content,
footer {
  width: calc(100% - var(--pico-sidebar-width));
  float: right;
  padding-top: var(--pico-topbar-height);
}

/* ── Content Areas ── */

section.cardform_content,
section.listform_content {
  padding-block-start: var(--pico-topbar-height);
}

/* ── Titlebar ── */

.titlebar>div {
  display: flex;
  align-items: center;
  gap: var(--pico-spacing);
}

.titlebar>div:last-child:not(:first-child) {
  align-self: flex-end;
}

.titlebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block: var(--pico-spacing);
  margin-block-start: var(--pico-spacing);
}

.titlebar h1 {
  margin: 0;
}

.titlebar hgroup h1 {
  margin-bottom: 5px !important;
}

/* ── Responsive: Large screens ── */

@media (min-width: 1736px) {
  .container {
    max-width: 1620px;
  }
}

/* ── Responsive: Small screens (576px) ── */

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding-right: var(--pico-spacing);
    padding-left: var(--pico-spacing);
  }
}

/* ── Responsive: Tablet (1024px) — sidebar collapse ── */

@media (max-width: 1024px) {
  details#mobile-menu {
    display: block;
  }

  section.sidebar {
    display: none;
  }

  .main_content,
  footer,
  .toolbar {
    width: 100%;
    float: none;
  }
}

/* ── Responsive: Mobile (768px) — toolbar repositioning ── */

@media (max-width: 768px) {
  .left_toolbar {
    flex-wrap: wrap;
  }

  .toolbar>.container {
    padding-top: var(--pico-spacing);
  }

  section.topbar .logo {
    margin-right: calc(var(--pico-spacing) / 2);
  }

  .topbar_toolbar {
    gap: calc(var(--pico-spacing) / 2);
    border-left: 1px solid #d0d0d0;
    padding-left: var(--pico-spacing);
  }

  .topbar_account_name {
    display: none;
  }

  .topbar_account_icon {
    display: inline;
  }

  .titlebar {
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    gap: var(--pico-spacing);
  }

  .toolbar {
    position: relative;
    top: unset;
    right: unset;
    padding: 0;
  }

  section.cardform_content,
  section.listform_content {
    padding-block-start: 0;
  }
}