/* GILTOS v0.8.6 — Console layout alignment patch
   Purpose: make all Console/App workspace pages share the same left-aligned, task-first SaaS layout.
   Scope: only pages using .app-layout or .app-shell. */

:root {
  --console-bg: #f5f7fb;
  --console-surface: #ffffff;
  --console-border: #e5e6eb;
  --console-text: #1d2129;
  --console-muted: #4e5969;
  --console-subtle: #86909c;
  --console-primary: #1677ff;
  --console-primary-weak: #e8f3ff;
  --console-sidebar: 240px;
  --console-topbar: 64px;
  --console-radius: 14px;
  --console-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.giltos-console-page,
body:has(.app-layout),
body:has(.app-shell),
.app-page,
.giltos-app-body {
  margin: 0 !important;
  background: var(--console-bg) !important;
  color: var(--console-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  text-align: left !important;
}

.app-layout,
.app-shell {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: var(--console-sidebar) minmax(0, 1fr) !important;
  background: var(--console-bg) !important;
  align-items: stretch !important;
  text-align: left !important;
}

.app-layout > .sidebar,
.app-layout > .app-sidebar,
.app-shell > .sidebar,
.app-shell > .app-sidebar,
aside.sidebar.app-sidebar {
  width: var(--console-sidebar) !important;
  min-width: var(--console-sidebar) !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  align-self: start !important;
  background: #fff !important;
  border-right: 1px solid var(--console-border) !important;
  padding: 18px 14px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  z-index: 30 !important;
}

.main-content,
.app-main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--console-bg) !important;
  overflow-x: hidden !important;
  text-align: left !important;
}

.topbar,
.app-topbar {
  height: var(--console-topbar) !important;
  min-height: var(--console-topbar) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--console-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
  backdrop-filter: blur(8px) !important;
  text-align: left !important;
}

.topbar-left,
.app-topbar-left,
.workspace-info,
.topbar-right,
.user-area {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
}

.topbar-left,
.app-topbar-left,
.workspace-info {
  gap: 10px !important;
  flex: 0 0 auto !important;
  font-size: 14px !important;
  color: var(--console-muted) !important;
  white-space: nowrap !important;
}

.workspace-name,
.topbar-left strong,
.app-topbar-left strong {
  color: var(--console-text) !important;
  font-weight: 700 !important;
}

.topbar-search,
.app-search {
  flex: 1 1 auto !important;
  max-width: 480px !important;
  min-width: 220px !important;
  margin: 0 auto !important;
}

.topbar-search input,
.app-search {
  width: 100% !important;
  height: 36px !important;
  border: 1px solid var(--console-border) !important;
  background: #f7f8fa !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  color: var(--console-text) !important;
  outline: none !important;
}

.topbar-right,
.user-area {
  margin-left: auto !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

.dashboard-content,
.page-content,
.app-content,
.console-content {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 28px 32px 52px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.page-breadcrumb,
.breadcrumb {
  text-align: left !important;
  color: var(--console-subtle) !important;
  font-size: 13px !important;
  margin: 0 0 16px !important;
  display: block !important;
}

.dashboard-header,
.page-header,
.page-head {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  text-align: left !important;
  margin: 0 0 24px !important;
}

.dashboard-header > *,
.page-header > *,
.page-head > *,
.page-title,
.page-title *,
.dashboard-title,
.dashboard-title * {
  text-align: left !important;
}

.page-title h1,
.dashboard-title h1,
.page-header h1,
.dashboard-header h1,
.page-head h1,
.app-content h1,
.page-content h1,
.dashboard-content h1 {
  margin: 0 0 8px !important;
  color: var(--console-text) !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.page-title p,
.dashboard-title p,
.page-header p,
.dashboard-header p,
.page-head p,
.app-content h1 + p,
.page-content h1 + p,
.dashboard-content h1 + p {
  margin: 0 !important;
  color: var(--console-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 760px !important;
  text-align: left !important;
}

.page-actions,
.dashboard-actions,
.head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  text-align: left !important;
}

.card,
.section-card,
.report-card,
.project-card,
.task-card,
.risk-card,
.deliverable-card,
.template-card,
.workspace-card,
.flow-card,
.insight-card,
.case-card,
.stat-card,
.metric-card,
.kanban-col {
  background: var(--console-surface) !important;
  border: 1px solid var(--console-border) !important;
  border-radius: var(--console-radius) !important;
  box-shadow: var(--console-shadow) !important;
  text-align: left !important;
}

.card h2,
.section-card h2,
.card h3,
.section-card h3,
.report-card h3,
.project-card h3,
.task-card h3,
.risk-card h3,
.deliverable-card h3,
.template-card h3 {
  text-align: left !important;
  color: var(--console-text) !important;
}

.card p,
.section-card p,
.report-card p,
.project-card p,
.task-card p,
.risk-card p,
.deliverable-card p,
.template-card p,
.card li,
.section-card li {
  text-align: left !important;
  color: var(--console-muted) !important;
}

.grid,
.stats,
.two-col,
.three-col,
.four-col,
.cards-grid,
.metrics-grid,
.projects-grid,
.reports-grid,
.templates-grid,
.deliverables-grid {
  text-align: left !important;
}

/* Stats can show numbers prominently while keeping card metadata readable. */
.stat-card,
.metric-card,
.stats .card {
  text-align: left !important;
}

.stat-label,
.metric-label {
  text-align: left !important;
}

.stat-value,
.metric-value {
  text-align: left !important;
}

.table,
table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
}

th,
td {
  text-align: left !important;
  vertical-align: top !important;
}

.demo-notice,
.notice,
.alert,
.info-box {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.project-flow-bar {
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1px solid var(--console-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--console-shadow) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.project-flow-label {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--console-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.project-flow-scroll {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.project-flow-item {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f7f8fa !important;
  border: 1px solid #edf0f5 !important;
  color: var(--console-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.project-flow-item.current,
.project-flow-item.active {
  color: var(--console-primary) !important;
  background: var(--console-primary-weak) !important;
  border-color: rgba(22, 119, 255, 0.26) !important;
}

.project-flow-num {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.foot-cta,
.bottom-cta,
.next-step-card,
.demo-result-proof {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

.foot-cta h2,
.foot-cta p,
.bottom-cta h2,
.bottom-cta p,
.next-step-card h2,
.next-step-card p {
  text-align: left !important;
}

/* Normalize buttons without forcing page-level centered composition. */
.btn,
button,
.topbar-btn,
.logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Remove stale demo-path bars if legacy markup survives anywhere in App pages. */
.app-layout .demo-step-bar,
.app-shell .demo-step-bar,
.app-layout .giltos-stepbar,
.app-shell .giltos-stepbar {
  display: none !important;
}

/* Sidebar brand consistency */
.sidebar-brand a,
.brand-logo,
.sidebar .brand-logo,
.sidebar .sidebar-brand a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--console-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
}

.logo-mark,
.brand-mark {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: #eef5ff !important;
  border: 1px solid rgba(22,119,255,.18) !important;
  display: grid !important;
  place-items: center !important;
  color: var(--console-primary) !important;
  font-weight: 900 !important;
  overflow: hidden !important;
}

.brand-logo-img,
.sidebar-logo-img,
.logo-mark img,
.brand-mark img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: block !important;
}

.sidebar-menu,
.app-nav,
.app-task-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 22px !important;
}

.sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  color: var(--console-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  text-align: left !important;
}

.sidebar-item.active,
.sidebar-item:hover {
  color: var(--console-primary) !important;
  background: var(--console-primary-weak) !important;
}

.sidebar-divider {
  height: 1px !important;
  background: var(--console-border) !important;
  margin: 12px 0 !important;
}

@media (max-width: 1080px) {
  .app-layout,
  .app-shell {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
  .app-layout > .sidebar,
  .app-layout > .app-sidebar,
  .app-shell > .sidebar,
  .app-shell > .app-sidebar,
  aside.sidebar.app-sidebar {
    width: 72px !important;
    min-width: 72px !important;
    padding: 14px 10px !important;
  }
  .sidebar .brand-text,
  .sidebar-brand a span:not(.logo-mark):not(.brand-mark),
  .sidebar-item span:not(.icon) {
    display: none !important;
  }
  .sidebar-item { justify-content: center !important; padding: 10px !important; }
  .dashboard-content,
  .page-content,
  .app-content,
  .console-content {
    padding: 24px 22px 44px !important;
  }
}

@media (max-width: 760px) {
  .app-layout,
  .app-shell {
    display: block !important;
  }
  .app-layout > .sidebar,
  .app-layout > .app-sidebar,
  .app-shell > .sidebar,
  .app-shell > .app-sidebar,
  aside.sidebar.app-sidebar {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--console-border) !important;
  }
  .sidebar-menu,
  .app-nav,
  .app-task-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .sidebar-item span:not(.icon) {
    display: inline !important;
  }
  .topbar,
  .app-topbar {
    position: relative !important;
    height: auto !important;
    min-height: 60px !important;
    flex-wrap: wrap !important;
    padding: 12px 18px !important;
  }
  .topbar-search,
  .app-search {
    order: 3 !important;
    flex: 1 1 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .dashboard-content,
  .page-content,
  .app-content,
  .console-content {
    padding: 22px 16px 40px !important;
  }
  .dashboard-header,
  .page-header,
  .page-head {
    display: block !important;
  }
  .page-actions,
  .dashboard-actions,
  .head-actions {
    justify-content: flex-start !important;
    margin-top: 14px !important;
  }
}