/*
 * QazStack Layout Utilities
 * Container, grid, flex helpers, spacing.
 */

/* ─── Container ─── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--fluid {
    max-width: none;
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

/* ─── Grid ─── */

.grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

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

.grid--compact { gap: var(--space-md); }
.grid--loose { gap: var(--space-xl); }

@media (max-width: 768px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Flex Utilities ─── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-start { align-items: flex-start; }
.flex-end { justify-content: flex-end; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ─── Section Spacing ─── */

.section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.section--sm {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* ─── Dashboard Layout ─── */

.layout-dashboard {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: calc(100vh - var(--header-height));
}

.layout-dashboard__sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: var(--space-lg);
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.layout-dashboard__main {
    padding: var(--space-xl);
    min-width: 0;
}

@media (max-width: 1024px) {
    .layout-dashboard {
        grid-template-columns: 1fr;
    }
    .layout-dashboard__sidebar {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: var(--z-overlay);
    }
    .layout-dashboard__sidebar.open {
        display: block;
    }
}

/* ─── Page Header ─── */

.page-header {
    margin-bottom: var(--space-xl);
}

.page-header__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-xs);
}

.page-header__subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
}

.page-header__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* ─── Visibility ─── */

.hidden { display: none !important; }

@media (max-width: 768px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}

/* ─── Text Utilities ─── */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }
.text-bold { font-weight: var(--font-bold); }
.text-semibold { font-weight: var(--font-semibold); }

/* ─── Margin / Padding helpers ─── */

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ─── Transition Utilities (v2 addition) ─── */

.transition-fast {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--transition-fast);
    transition-timing-function: ease;
}

.transition {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--transition);
    transition-timing-function: ease;
}

.transition-slow {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--transition-slow);
    transition-timing-function: ease;
}

.transition-none {
    transition: none !important;
}

/* Transform utilities */
.scale-on-hover:hover {
    transform: scale(1.02);
}

.lift-on-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ─── Additional Spacing ─── */

.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

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

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

/* ─── Width utilities ─── */

.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }

/* ─── Position utilities ─── */

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
.fixed { position: fixed; }

/* ─── Overflow ─── */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── Border utilities ─── */

.border { border: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-none { border: none; }
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ─── Cursor ─── */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; opacity: 0.6; }

/* ─── Aspect ratio ─── */

.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }

/* ─── Truncation ─── */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}