/**
 * The redesigned portal shell (Claude Design mockups, /home/portail/design):
 * dark sidebar on the left, page header (breadcrumb, title, subtitle,
 * actions), and Gin's chrome toned down to the mockups' look.
 *
 * Everything is scoped to body.ak-ui, which akabia_gin_preprocess_html()
 * only sets when the sidebar replaces Gin's toolbar. Tokens: akabia_portal
 * css/tokens.css.
 */

/* ------------------------------------------------------------------ */
/* Page frame                                                           */
/* ------------------------------------------------------------------ */

body.ak-ui {
  --gin-font: var(--ak-font);
  --gin-color-primary: var(--ak-accent);
  --gin-bg-app: var(--ak-bg);
  --gin-toolbar-height: 0px;
  --gin-toolbar-y-offset: 0px;
  --gin-toolbar-x-offset: 0px;
  --drupal-displace-offset-top: 0px;
  --drupal-displace-offset-left: 0px;
  margin: 0;
  padding: 0 !important;
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font);
  -webkit-font-smoothing: antialiased;
}

.ak-shell {
  display: grid;
  grid-template-columns: var(--ak-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.ak-shell__main {
  min-width: 0;
  padding-bottom: 120px;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                              */
/* ------------------------------------------------------------------ */

.ak-sidebar {
  position: sticky;
  top: 0;
  /* Exactly the screen's height, padding included (100vh plus padding
     overflowed by 36px and cut the user block off). */
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  background: var(--ak-side-bg);
  color: oklch(0.9 0.01 265);
  font-family: var(--ak-font);
  z-index: 20;
}

.ak-sidebar a {
  color: inherit;
  text-decoration: none;
}

.ak-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 22px;
}

.ak-sidebar__logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ak-accent-on-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.ak-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ak-sidebar__brand-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.ak-sidebar__brand-sub {
  color: var(--ak-side-sub);
  font-size: 11.5px;
}

/* With the AKABIA logo: logo on top, "Supervision / Parc Drupal" under
   it, and more air before the navigation. */
.ak-sidebar__brand.has-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 10px 26px;
}

.ak-sidebar__logo-img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
}

.ak-sidebar__brand.has-logo .ak-sidebar__brand-text {
  gap: 2px;
}

.ak-sidebar__brand.has-logo .ak-sidebar__brand-name {
  font-size: 15px;
  letter-spacing: -.005em;
}

.ak-sidebar__brand.has-logo .ak-sidebar__brand-sub {
  font-size: 12px;
}

.ak-sidebar__nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* On a short screen only the links scroll, discreetly; the brand and
     the user block stay in place. */
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--ak-side-border) transparent;
  scrollbar-width: thin;
}

.ak-sidebar__section {
  padding: 14px 10px 6px;
  color: var(--ak-side-label);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ak-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ak-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 2px;
  padding: 8px 10px;
  border-radius: var(--ak-radius-control);
  color: var(--ak-side-ink) !important;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
}

.ak-sidebar__link:hover,
.ak-sidebar__link:focus-visible {
  background: var(--ak-side-hover);
  color: #fff !important;
}

.ak-sidebar__link.is-active {
  background: var(--ak-side-active);
  color: #fff !important;
  font-weight: 500;
}

.ak-sidebar__link:focus-visible,
.ak-sidebar__brand:focus-visible,
.ak-sidebar__logout:focus-visible,
.ak-sidebar__user-name:focus-visible {
  outline: 2px solid var(--ak-accent-on-dark);
  outline-offset: 1px;
}

/* Inside the scrolling link list, an outside outline would be clipped. */
.ak-sidebar__nav :focus-visible {
  outline-offset: -2px;
}

.ak-sidebar__count {
  padding: 1px 7px;
  border-radius: 10px;
  color: oklch(0.85 0.02 265);
  font-family: var(--ak-font-mono);
  font-size: 11px;
}

.ak-sidebar__count.is-highlighted {
  background: var(--ak-accent-on-dark);
  color: #fff;
}

.ak-sidebar__admin,
.ak-sidebar__admin > summary {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
}

.ak-sidebar__admin > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.ak-sidebar__admin > summary::-webkit-details-marker {
  display: none;
}

.ak-sidebar__admin > summary::after {
  content: '▸';
  font-size: 10px;
  transition: transform .15s ease;
}

.ak-sidebar__admin[open] > summary::after {
  transform: rotate(90deg);
}

.ak-sidebar__admin > summary:hover {
  color: #fff;
}

.ak-sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--ak-side-border);
}

.ak-sidebar__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ak-side-avatar);
  font-size: 12px;
  font-weight: 600;
}

.ak-sidebar__user-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.ak-sidebar__user-name {
  overflow: hidden;
  color: #fff !important;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ak-sidebar__user-meta {
  color: oklch(0.65 0.02 265);
  font-size: 11.5px;
}

.ak-sidebar__logout {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ak-radius-control);
  color: var(--ak-side-label) !important;
}

.ak-sidebar__logout:hover {
  background: var(--ak-side-hover);
  color: #fff !important;
}

/* Narrow screens: the sidebar becomes a top band. */
@media (max-width: 900px) {
  .ak-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .ak-sidebar {
    position: static;
    height: auto;
    overflow: visible;
    padding: 12px;
  }

  .ak-sidebar__nav {
    overflow: visible;
  }

  .ak-sidebar__brand,
  .ak-sidebar__brand.has-logo {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 4px 10px 10px;
  }

  .ak-sidebar__nav {
    flex-flow: row wrap;
    gap: 2px 4px;
  }

  .ak-sidebar__section {
    display: none;
  }

  .ak-sidebar__list {
    display: contents;
  }

  .ak-sidebar__link {
    width: auto;
    margin: 0;
  }

  .ak-sidebar__admin {
    width: 100%;
  }

  .ak-sidebar__admin > summary.ak-sidebar__section {
    display: flex;
  }

  .ak-sidebar__user {
    margin-top: 8px;
  }
}

/* ------------------------------------------------------------------ */
/* Gin chrome: page header                                              */
/* ------------------------------------------------------------------ */

body.ak-ui .layout-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 32px;
}

/* Breadcrumb row: "Supervision / État du parc". */
body.ak-ui .gin-secondary-toolbar {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 26px 32px 0;
  border: 0;
  background: none;
}

body.ak-ui .gin-breadcrumb-wrapper {
  margin: 0;
  padding: 0;
}

body.ak-ui .gin-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ak-ui .gin-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--ak-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Gin's selectors here are four classes deep: match them to win. */
body.ak-ui .gin-breadcrumb .gin-breadcrumb__item.gin-breadcrumb__item + .gin-breadcrumb__item::before {
  content: '/';
  width: auto;
  height: auto;
  margin: 0 6px;
  padding: 0;
  border: 0;
  color: var(--ak-muted);
  font-size: 12.5px;
  opacity: 1;
}

body.ak-ui .gin-breadcrumb__link,
body.ak-ui .gin-breadcrumb__text {
  padding: 0;
  color: var(--ak-muted) !important;
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
}

body.ak-ui .gin-breadcrumb .gin-breadcrumb__item .gin-breadcrumb__link::before,
body.ak-ui .gin-breadcrumb .gin-breadcrumb__item .gin-breadcrumb__link::after {
  display: none;
}

body.ak-ui .gin-breadcrumb .gin-breadcrumb__item .gin-breadcrumb__link,
body.ak-ui .gin-breadcrumb .gin-breadcrumb__item .gin-breadcrumb__text {
  padding: 0;
  line-height: 1.4;
}

body.ak-ui .gin-breadcrumb__link:hover {
  color: var(--ak-ink) !important;
  text-decoration: underline;
}

/* Title row: title + subtitle on the left, action buttons on the right. */
body.ak-ui .region-sticky {
  padding: 4px 0 20px;
  background: var(--ak-bg);
  box-shadow: none;
}

body.ak-ui .region-sticky.region-sticky--is-sticky,
body.ak-ui .region-sticky--is-sticky {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ak-divider) !important;
  background: color-mix(in oklch, var(--ak-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}

body.ak-ui .sticky-shadow {
  display: none;
}

body.ak-ui .region-sticky__items__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
}

body.ak-ui .block-page-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-end;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

body.ak-ui .page-title,
body.ak-ui .region-sticky__items .block-page-title-block .page-title {
  align-self: flex-start;
  margin: 0;
  color: var(--ak-ink);
  font-family: var(--ak-font);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

body.ak-ui .ak-page-subtitle {
  margin: 0;
  color: oklch(0.5 0.02 265);
  font-size: 13px;
}

body.ak-ui .shortcut-action {
  display: none;
}

body.ak-ui .local-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

body.ak-ui .local-actions__item {
  margin: 0;
}

body.ak-ui .content-header:empty,
body.ak-ui .content-header .layout-container:empty {
  display: none;
}

body.ak-ui main.page-content {
  padding-top: 0;
}

/* ------------------------------------------------------------------ */
/* Gin chrome: buttons                                                  */
/* ------------------------------------------------------------------ */

body.ak-ui .button,
body.ak-ui .local-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  height: auto;
  margin: 0;
  padding: 0 14px;
  /* Gin sets its button borders with !important. */
  border: 1px solid var(--ak-field-border) !important;
  border-radius: var(--ak-radius-field);
  background: var(--ak-surface);
  background-image: none;
  box-shadow: none;
  color: var(--ak-ink);
  font-family: var(--ak-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: none;
}

body.ak-ui .button:hover {
  background: oklch(0.97 0.005 265);
  color: var(--ak-ink);
  text-decoration: none;
}

body.ak-ui .button--primary,
body.ak-ui .local-actions .button--primary:not(.ak-action--secondary) {
  border-color: var(--ak-accent) !important;
  background: var(--ak-accent);
  background-image: none;
  color: #fff;
}

body.ak-ui .button--primary:hover,
body.ak-ui .local-actions .button--primary:not(.ak-action--secondary):hover {
  border-color: var(--ak-accent-hover) !important;
  background: var(--ak-accent-hover);
  color: #fff;
}

body.ak-ui .local-actions .button.ak-action--secondary {
  border-color: var(--ak-field-border) !important;
  background: var(--ak-surface);
  color: var(--ak-ink);
}

body.ak-ui .local-actions .button.ak-action--secondary:hover {
  background: oklch(0.97 0.005 265);
}

body.ak-ui .button:focus-visible {
  outline: 2px solid var(--ak-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Gin's icon-in-front "+" on action buttons: the labels carry their own. */
body.ak-ui .local-actions .button--action::before {
  display: none;
}

body.ak-ui .button--danger {
  border-color: oklch(0.55 0.19 25) !important;
  background: oklch(0.55 0.19 25);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Dialogs: the delete confirmation and the other portal modals         */
/* ------------------------------------------------------------------ */

body.ak-ui .ui-dialog {
  overflow: hidden;
  border: 0;
  border-radius: var(--ak-radius-card);
  box-shadow: var(--ak-shadow-modal);
  font-family: var(--ak-font);
}

body.ak-ui .ui-widget-overlay {
  background: oklch(0.2 0.03 265 / 0.35);
  opacity: 1;
}

body.ak-ui .ui-dialog .ui-dialog-titlebar {
  padding: 18px 22px 6px;
  border: 0;
  background: var(--ak-surface);
}

/* Gin paints the close icon white for its dark title bar; ours is white:
   paint it like the other muted controls. !important: Gin's icon rules
   carry an ID's specificity. */
body.ak-ui .ui-dialog .ui-dialog-titlebar-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--ak-radius-control);
  background: none;
  box-shadow: none;
}

body.ak-ui .ui-dialog .ui-dialog-titlebar-close .ui-icon {
  background-color: var(--ak-text-2) !important;
}

body.ak-ui .ui-dialog .ui-dialog-titlebar-close:is(:hover, :focus-visible) {
  background: oklch(0.96 0.01 265);
}

body.ak-ui .ui-dialog .ui-dialog-titlebar-close:is(:hover, :focus-visible) .ui-icon {
  background-color: var(--ak-ink) !important;
}

body.ak-ui .ui-dialog .ui-dialog-titlebar-close:focus-visible {
  outline: 2px solid var(--ak-accent);
  outline-offset: 1px;
}

body.ak-ui .ui-dialog .ui-dialog-title {
  color: var(--ak-ink);
  font-size: 16px;
  font-weight: 600;
}

body.ak-ui .ui-dialog .ui-dialog-content {
  padding: 8px 22px 16px;
  color: oklch(0.42 0.02 265);
  font-size: 13.5px;
  line-height: 1.5;
}

body.ak-ui .ui-dialog .ui-dialog-buttonpane {
  margin: 0;
  padding: 0 22px 22px;
  border: 0;
  background: var(--ak-surface);
}

body.ak-ui .ui-dialog .ui-dialog-buttonset {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
}

/* ------------------------------------------------------------------ */
/* Phones: tighter side margins, so the content gets the width          */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  /* Gin adds its own 16px side margin on small screens: drop it. */
  body.ak-ui .layout-container {
    margin-inline: 0 !important;
    padding-inline: 12px;
  }

  body.ak-ui .gin-secondary-toolbar {
    padding: 16px 12px 0;
  }

  body.ak-ui .region-sticky {
    padding-bottom: 14px;
  }

  body.ak-ui .page-title {
    font-size: 21px;
  }
}

/* External sidebar links (opened in a new tab). */
.ak-sidebar__external {
  color: var(--ak-side-label);
  font-size: 12px;
}

.ak-sidebar__link:hover .ak-sidebar__external {
  color: #fff;
}