/* ==========================================================================
   layout.css — App shell, sidebar, header, content, footer
   ========================================================================== */

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

/* --------------------------------------------------------------- SIDEBAR */
.app-sidebar {
  width: var(--app-sidebar-width);
  flex: 0 0 var(--app-sidebar-width);
  background: var(--app-sidebar-bg);
  border-right: 1px solid var(--app-sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1045;
  transition: width var(--app-transition-normal), transform var(--app-transition-normal);
}

.sidebar-brand {
  height: var(--app-header-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: 0 1rem;
  border-bottom: 1px solid var(--app-sidebar-border);
  flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: .625rem; min-width: 0; color: var(--app-sidebar-text-strong); }
.brand-mark {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--app-radius-md);
  background: var(--app-primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-weight: 650; font-size: .9375rem; color: var(--app-sidebar-text-strong); }
.brand-meta { font-size: .6875rem; color: var(--app-sidebar-muted); text-transform: uppercase; letter-spacing: .06em; }

.sidebar-workspace { padding: .75rem .75rem .25rem; flex: 0 0 auto; }
.workspace-switcher {
  width: 100%; display: flex; align-items: center; gap: .625rem;
  background: var(--app-surface-muted); border: 1px solid var(--app-sidebar-border);
  border-radius: var(--app-radius-md); padding: .5rem .625rem; color: var(--app-sidebar-text);
  transition: background var(--app-transition-fast), border-color var(--app-transition-fast);
}
.workspace-switcher:hover { background: var(--app-sidebar-hover); border-color: var(--app-border-strong); }
.workspace-avatar {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--app-radius-sm);
  background: var(--app-purple-soft); color: var(--app-purple);
  display: grid; place-items: center; font-size: .6875rem; font-weight: 700;
}
.workspace-info { display: flex; flex-direction: column; text-align: start; min-width: 0; }
.workspace-name { font-size: .8125rem; font-weight: 600; color: var(--app-sidebar-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-plan { font-size: .6875rem; color: var(--app-sidebar-muted); }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: .5rem .75rem 1rem; }
.nav-section { margin-top: .875rem; }
.nav-section:first-child { margin-top: .25rem; }
.nav-section-title {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--app-sidebar-muted); padding: .375rem .625rem; margin: 0;
}
.app-nav .nav-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: var(--app-radius-md);
  color: var(--app-sidebar-text); font-size: .8438rem; font-weight: 500;
  transition: background var(--app-transition-fast), color var(--app-transition-fast);
  position: relative;
}
.app-nav .nav-link:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-text-strong); }
.app-nav .nav-link.active { background: var(--app-sidebar-active-bg); color: var(--app-sidebar-active-text); font-weight: 600; }
.app-nav .nav-link > i:first-child { font-size: 1rem; width: 20px; text-align: center; flex: 0 0 20px; opacity: .9; }
.app-nav .nav-link .nav-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-caret { font-size: .75rem; transition: transform var(--app-transition-fast); opacity: .6; }
.app-nav .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }
[dir="rtl"] .app-nav .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(-90deg); }
.nav-badge {
  font-size: .6875rem; font-weight: 600; padding: .05rem .4rem; border-radius: var(--app-radius-pill);
  background: var(--app-primary-soft); color: var(--app-primary);
}
.nav-badge-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.nav-sub { list-style: none; margin: .125rem 0 .25rem; padding-inline-start: 1.9rem; }
.nav-sub .nav-link { padding: .375rem .625rem; font-size: .8125rem; }
.nav-sub .nav-link::before {
  content: ""; position: absolute; inset-inline-start: -.75rem; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--app-border-strong); transform: translateY(-50%);
}
.nav-sub .nav-link.active::before { background: var(--app-primary); }

.sidebar-footer { flex: 0 0 auto; padding: .75rem; border-top: 1px solid var(--app-sidebar-border); }
.usage-card { background: var(--app-surface-muted); border: 1px solid var(--app-sidebar-border); border-radius: var(--app-radius-md); padding: .75rem; }
.usage-head { display: flex; justify-content: space-between; align-items: center; }
.usage-title { font-size: .8125rem; font-weight: 600; }
.usage-value { font-size: .75rem; color: var(--app-text-muted); }
.usage-progress { height: 5px; margin: .5rem 0 .375rem; background: var(--app-border); }
.usage-progress .progress-bar { background: var(--app-primary); }
.usage-hint { font-size: .6875rem; color: var(--app-text-muted); margin-bottom: .625rem; }
.btn-outline-light-subtle { border: 1px solid var(--app-border-strong); color: var(--app-text); background: var(--app-surface); }
.btn-outline-light-subtle:hover { background: var(--app-sidebar-hover); color: var(--app-text); }

/* Collapsed sidebar (icon rail) */
[data-sidebar="collapsed"] .app-sidebar { width: var(--app-sidebar-collapsed-width); flex-basis: var(--app-sidebar-collapsed-width); }
[data-sidebar="collapsed"] .brand-text,
[data-sidebar="collapsed"] .workspace-info,
[data-sidebar="collapsed"] .workspace-switcher .bi-chevron-expand,
[data-sidebar="collapsed"] .nav-section-title,
[data-sidebar="collapsed"] .nav-text,
[data-sidebar="collapsed"] .nav-caret,
[data-sidebar="collapsed"] .nav-badge,
[data-sidebar="collapsed"] .sidebar-footer { display: none; }
[data-sidebar="collapsed"] .app-nav .nav-link { justify-content: center; padding: .625rem; }
[data-sidebar="collapsed"] .nav-sub { display: none !important; }
[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: 0 .5rem; }
[data-sidebar="collapsed"] .nav-section { border-top: 1px solid var(--app-sidebar-border); padding-top: .5rem; margin-top: .5rem; }
[data-sidebar="collapsed"] .app-main { margin-inline-start: var(--app-sidebar-collapsed-width); }
[data-sidebar="collapsed"] .workspace-switcher { justify-content: center; padding: .5rem; }

/* ------------------------------------------------------------------ MAIN */
.app-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  margin-inline-start: var(--app-sidebar-width);
  transition: margin var(--app-transition-normal);
}

.app-header {
  height: var(--app-header-height);
  display: flex; align-items: center; gap: .625rem;
  padding: 0 var(--app-page-padding);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  position: sticky; top: 0; z-index: 1030;
}
[data-header="static"] .app-header { position: relative; }

.btn-icon {
  width: 36px; height: 36px; border-radius: var(--app-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--app-text-muted);
  font-size: 1.0625rem; position: relative; transition: all var(--app-transition-fast);
}
.btn-icon:hover { background: var(--app-surface-hover); color: var(--app-text); }
.indicator-dot {
  position: absolute; top: 7px; inset-inline-end: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--app-danger); border: 2px solid var(--app-surface);
}
.indicator-count {
  position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--app-radius-pill); background: var(--app-danger);
  color: #fff; font-size: .625rem; font-weight: 700; line-height: 16px;
}

.header-breadcrumb { min-width: 0; }
.header-breadcrumb .breadcrumb { margin: 0; font-size: var(--app-fs-sm); }
.header-breadcrumb .breadcrumb-item a { color: var(--app-text-muted); }
.header-breadcrumb .breadcrumb-item a:hover { color: var(--app-primary); }
.header-breadcrumb .breadcrumb-item.active { color: var(--app-text); font-weight: 500; }

.header-search {
  margin-inline-start: auto; display: none; align-items: center; gap: .5rem;
  width: min(340px, 30vw); padding: .4375rem .75rem;
  background: var(--app-surface-muted); border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md); color: var(--app-text-muted); font-size: var(--app-fs-sm);
  transition: border-color var(--app-transition-fast), background var(--app-transition-fast);
}
.header-search:hover { border-color: var(--app-border-strong); background: var(--app-surface); }
.header-search span { flex: 1 1 auto; text-align: start; }
.header-search kbd, .command-foot kbd, .command-input kbd {
  background: var(--app-surface); border: 1px solid var(--app-border); border-bottom-width: 2px;
  border-radius: 4px; color: var(--app-text-muted); font-size: .6875rem; padding: 0 .3rem; font-family: var(--app-font);
}
@media (min-width: 992px) { .header-search { display: flex; } }

.header-actions { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
@media (min-width: 992px) { .header-actions { margin-inline-start: .75rem; } }
.quick-create { display: inline-flex; align-items: center; gap: .375rem; font-weight: 500; }

.user-menu-trigger {
  display: flex; align-items: center; gap: .5rem; background: transparent;
  border: 1px solid transparent; border-radius: var(--app-radius-md); padding: .25rem .375rem;
  color: var(--app-text); transition: background var(--app-transition-fast);
}
.user-menu-trigger:hover { background: var(--app-surface-hover); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: start; }
.user-name { font-size: .8125rem; font-weight: 600; }
.user-role { font-size: .6875rem; color: var(--app-text-muted); }

/* --------------------------------------------------------------- CONTENT */
.app-content { flex: 1 1 auto; padding: var(--app-page-padding); }
[data-content="boxed"] .app-content,
[data-content="boxed"] .app-footer { max-width: var(--app-content-max); margin-inline: auto; width: 100%; }

.app-footer {
  border-top: 1px solid var(--app-border); background: var(--app-surface);
  padding: .875rem var(--app-page-padding);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: var(--app-fs-sm); color: var(--app-text-muted);
}
.footer-links { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.footer-links a { color: var(--app-text-muted); }
.footer-links a:hover { color: var(--app-primary); }

/* Blank layout (auth, errors, maintenance) */
.app-blank { min-height: 100vh; background: var(--app-body-bg); }
body.layout-blank .app-shell { display: none; }

/* ------------------------------------------------------------ RESPONSIVE */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(15, 28, 51, .45);
  z-index: 1040; opacity: 0; transition: opacity var(--app-transition-normal);
}
.sidebar-backdrop.show { opacity: 1; }

@media (max-width: 1199.98px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--app-shadow-lg); }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  body[data-sidebar-mobile="open"] .app-sidebar { transform: translateX(0); }
  .app-main, [data-sidebar="collapsed"] .app-main { margin-inline-start: 0; }
  [data-sidebar="collapsed"] .app-sidebar { width: var(--app-sidebar-width); }
  [data-sidebar="collapsed"] .brand-text, [data-sidebar="collapsed"] .workspace-info,
  [data-sidebar="collapsed"] .nav-section-title, [data-sidebar="collapsed"] .nav-text,
  [data-sidebar="collapsed"] .nav-caret, [data-sidebar="collapsed"] .nav-badge,
  [data-sidebar="collapsed"] .sidebar-footer { display: revert; }
  [data-sidebar="collapsed"] .app-nav .nav-link { justify-content: flex-start; padding: .5rem .625rem; }
}

@media (max-width: 767.98px) {
  :root { --app-page-padding: 1rem; }
  .app-footer { flex-direction: column; align-items: flex-start; }
}

/* Collapsed-rail tooltips are provided by Bootstrap tooltips (see layout.js) */
.page-loader {
  position: fixed; inset: 0; background: rgba(255, 255, 255, .6); backdrop-filter: blur(1px);
  display: grid; place-items: center; z-index: 1060;
}