/* ==========================================================================
   OORKANAKU Village Governance ERP - Main Layout
   Sidebar + Navbar + Content + Footer
   ========================================================================== */

/* ── Base Wrapper ── */
.ok-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ── Sidebar Container ── */
.ok-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--ok-sidebar-width);
  height: 100vh;
  z-index: var(--z-sidebar);
  transition: width var(--ok-transition-slow), transform var(--ok-transition-slow);
}

/* ── Main Content Wrapper ── */
.ok-main {
  flex: 1;
  margin-left: var(--ok-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--ok-transition-slow);
}

/* ── Top Navbar ── */
.ok-navbar {
  position: sticky;
  top: 0;
  height: var(--ok-navbar-height);
  z-index: var(--z-navbar);
  display: flex;
  align-items: center;
  padding: 0 var(--ok-space-6);
  gap: var(--ok-space-4);
  border-bottom: 1px solid var(--ok-border-secondary);
  background: var(--ok-bg-navbar);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Navbar Sections ── */
.ok-navbar-left {
  display: flex;
  align-items: center;
  gap: var(--ok-space-3);
  min-width: 0;
}

.ok-navbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ok-navbar-right {
  display: flex;
  align-items: center;
  gap: var(--ok-space-2);
}

/* ── Breadcrumb Area ── */
.ok-breadcrumb-bar {
  display: flex;
  align-items: center;
  padding: var(--ok-space-2) var(--ok-space-6);
  background: var(--ok-bg-primary);
  border-bottom: 1px solid var(--ok-border-secondary);
  min-height: var(--ok-breadcrumb-height);
}

/* ── Content Area ── */
.ok-content {
  flex: 1;
  padding: var(--ok-space-6);
  background: var(--ok-bg-secondary);
}

.ok-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ok-space-6);
  gap: var(--ok-space-4);
  flex-wrap: wrap;
}

.ok-content-header h1,
.ok-content-header h2,
.ok-content-header h3 {
  color: var(--ok-text-primary);
  margin: 0;
}

.ok-content-title {
  font-size: var(--ok-text-2xl);
  font-weight: var(--ok-font-bold);
  color: var(--ok-text-primary);
  line-height: var(--ok-leading-tight);
}

.ok-content-subtitle {
  font-size: var(--ok-text-sm);
  color: var(--ok-text-tertiary);
  margin-top: var(--ok-space-1);
}

/* ── Footer ── */
.ok-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ok-space-3) var(--ok-space-6);
  background: var(--ok-bg-primary);
  border-top: 1px solid var(--ok-border-secondary);
  min-height: var(--ok-footer-height);
  font-size: var(--ok-text-sm);
  color: var(--ok-text-tertiary);
}

.ok-footer a {
  color: var(--ok-text-link);
  text-decoration: none;
  transition: color var(--ok-transition-fast);
}

.ok-footer a:hover {
  color: var(--ok-text-link-hover);
}

/* ── Grid Layouts ── */
.ok-grid {
  display: grid;
  gap: var(--ok-space-6);
}

.ok-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ok-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ok-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ok-grid-5 { grid-template-columns: repeat(5, 1fr); }
.ok-grid-6 { grid-template-columns: repeat(6, 1fr); }

.ok-grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ok-grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ok-grid-dense {
  grid-auto-flow: dense;
}

/* ── Dashboard Grid Presets ── */
.ok-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ok-space-6);
}

.ok-dashboard-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ok-space-6);
}

.ok-dashboard-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ok-space-6);
}

.ok-dashboard-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ok-space-6);
}

/* ── Boxed Layout ── */
.ok-wrapper.boxed-layout .ok-main {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--ok-shadow-lg);
}

.ok-wrapper.boxed-layout .ok-sidebar {
  left: 50%;
  transform: translateX(-50%);
  margin-left: -700px;
}

.ok-wrapper.boxed-layout .ok-navbar {
  border-left: 1px solid var(--ok-border-secondary);
  border-right: 1px solid var(--ok-border-secondary);
}

/* ── RTL Support ── */
[dir="rtl"] .ok-wrapper {
  flex-direction: row-reverse;
}

[dir="rtl"] .ok-sidebar {
  left: auto;
  right: 0;
}

[dir="rtl"] .ok-main {
  margin-left: 0;
  margin-right: var(--ok-sidebar-width);
}

[dir="rtl"] .ok-footer {
  text-align: right;
}

/* ── Sidebar Collapsed State ── */
.ok-wrapper.sidebar-collapsed .ok-sidebar {
  width: var(--ok-sidebar-mini-width);
}

.ok-wrapper.sidebar-collapsed .ok-main {
  margin-left: var(--ok-sidebar-mini-width);
}

/* ── Sidebar Hidden (Mobile) ── */
.ok-wrapper.sidebar-hidden .ok-sidebar {
  transform: translateX(-100%);
}

.ok-wrapper.sidebar-hidden .ok-main {
  margin-left: 0;
}

/* ── Mobile Overlay ── */
.ok-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ok-bg-overlay);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  transition: opacity var(--ok-transition-base);
}

.ok-wrapper:not(.sidebar-hidden) .ok-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ── Page Container ── */
.ok-page {
  padding: var(--ok-space-6);
}

.ok-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ok-space-6);
}

/* ── Container Sizes ── */
.ok-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--ok-space-6);
}

.ok-container-sm { max-width: 640px; }
.ok-container-md { max-width: 768px; }
.ok-container-lg { max-width: 1024px; }
.ok-container-xl { max-width: 1280px; }

/* ── Section Spacing ── */
.ok-section {
  margin-bottom: var(--ok-space-8);
}

.ok-section-title {
  font-size: var(--ok-text-lg);
  font-weight: var(--ok-font-semibold);
  color: var(--ok-text-primary);
  margin-bottom: var(--ok-space-4);
  padding-bottom: var(--ok-space-3);
  border-bottom: 1px solid var(--ok-border-secondary);
}

/* ── Divider with Text ── */
.ok-divider {
  display: flex;
  align-items: center;
  gap: var(--ok-space-4);
  color: var(--ok-text-muted);
  font-size: var(--ok-text-sm);
}

.ok-divider::before,
.ok-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ok-border-secondary);
}

/* ── Page Loading Overlay ── */
.ok-page-loader {
  position: fixed;
  inset: 0;
  background: var(--ok-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ok-transition-base), visibility var(--ok-transition-base);
}

.ok-page-loader.active {
  opacity: 1;
  visibility: visible;
}

/* ── Scroll to Top Button ── */
.ok-scroll-top {
  position: fixed;
  bottom: var(--ok-space-8);
  right: var(--ok-space-8);
  width: 44px;
  height: 44px;
  border-radius: var(--ok-radius-full);
  background: var(--ok-saffron);
  color: var(--ok-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ok-shadow-lg);
  z-index: var(--z-raised);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--ok-transition-base);
}

.ok-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ok-scroll-top:hover {
  background: var(--ok-saffron-hover);
  transform: translateY(-2px);
  box-shadow: var(--ok-shadow-glow);
}

.ok-scroll-top:active {
  transform: translateY(0);
}