/* ================================================================
   ITUM ERP — LAYOUT
   App shell, grid system, spacing, responsive
   ================================================================ */

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hide scrollbars globally */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--surface-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ── App Shell ───────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--gradient-sidebar);
  border-left: 1px solid var(--border-primary);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--duration-slow) var(--ease-out);
}

.app-main {
  flex: 1;
  margin-right: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin var(--duration-slow) var(--ease-out);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: var(--surface-header);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-3);
}

.app-content {
  flex: 1;
  padding: var(--page-padding-y) var(--page-padding-x);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}

/* ── Grid System ─────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Flex Utilities ──────────────────────────────────────────── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1; }
.flex-none      { flex: none; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start     { align-self: flex-start; }
.self-center    { align-self: center; }
.self-end       { align-self: flex-end; }

/* ── Gap ─────────────────────────────────────────────────────── */
.gap-1   { gap: var(--space-1); }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }

/* ── Display ─────────────────────────────────────────────────── */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.hidden       { display: none; }

/* ── Width / Height ──────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ── Overflow ────────────────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }

/* ── Spacing Utilities ───────────────────────────────────────── */
.m-0  { margin: 0; }
.m-2  { margin: var(--space-2); }
.m-4  { margin: var(--space-4); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-inline: auto; }

.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }

/* ── Position ────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* ── Container ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ── Section ─────────────────────────────────────────────────── */
.section {
  margin-bottom: var(--space-8);
}
.section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-4);
}

/* ── Page Layout ─────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.page-header-content {
  flex: 1;
  min-width: 0;
}
.page-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-gray-200) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border-secondary);
  border: none;
  margin: var(--space-6) 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  :root {
    --page-padding-x: var(--space-5);
  }
}

@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(100%);
    box-shadow: var(--shadow-2xl);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-main {
    margin-right: 0;
  }
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: 1fr;
  }
  :root {
    --page-padding-x: var(--space-4);
    --page-padding-y: var(--space-4);
    --header-height: 56px;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  :root {
    --page-padding-x: var(--space-3);
  }
}