/**
 * Layout Styles & Utilities
 * Grid, flexbox, positioning utilities
 */

/* === Flexbox Utilities === */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* === Grid Utilities === */
.grid {
  display: grid;
}

.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);
}

/* === Container === */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.container-sm {
  max-width: 540px;
}

.container-md {
  max-width: 720px;
}

.container-lg {
  max-width: 960px;
}

.container-xl {
  max-width: 1140px;
}

/* === App Layout === */
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

/* === View System === */
.view {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.view.active {
  display: flex;
}

.view-header {
  width: 100%;
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--primary-color);
}

.view-content {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.view-footer {
  width: 100%;
  padding: var(--spacing-md);
  border-top: 1px solid var(--primary-color);
  background-color: var(--surface-color);
}

/* === Padding Utilities === */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

/* === Margin Utilities === */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* === Display Utilities === */
.hidden { display: none !important; }
.visible { display: block !important; }

.invisible { visibility: hidden; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }

/* === Text Alignment === */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* === Sizing === */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-full { min-height: 100%; }
.max-w-full { max-width: 100%; }

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

/* === Position === */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }