/**
 * IFINSTA Layout System
 *
 * Reusable layout patterns and container utilities.
 * Provides consistent spacing, containers, and surface patterns.
 * Updated with unified design tokens v1.0
 */

@import url("variables.311d96caf375.css");

/* ==========================================================================
   CONTAINERS
   Centered content containers with max-width
   ========================================================================== */
.ifinsta-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ifinsta-space-4);
    padding-right: var(--ifinsta-space-4);
}

.ifinsta-container--xs { max-width: 20rem; }
.ifinsta-container--sm { max-width: 24rem; }
.ifinsta-container--md { max-width: 28rem; }
.ifinsta-container--lg { max-width: 32rem; }
.ifinsta-container--xl { max-width: 36rem; }
.ifinsta-container--2xl { max-width: 42rem; }
.ifinsta-container--3xl { max-width: 48rem; }
.ifinsta-container--4xl { max-width: 56rem; }
.ifinsta-container--5xl { max-width: 64rem; }
.ifinsta-container--6xl { max-width: 72rem; }
.ifinsta-container--7xl { max-width: var(--ifinsta-content-max-width); }
.ifinsta-container--full { max-width: 100%; }
.ifinsta-container--screen { max-width: 100vw; }

/* Fluid container (full width with padding) */
.ifinsta-container--fluid {
    max-width: none;
}

/* ==========================================================================
   SURFACE / PANEL PATTERNS
   Common background/border/radius pattern using unified design tokens
   ========================================================================== */
.ifinsta-surface {
    background: var(--ifinsta-surface-1);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
}

.ifinsta-surface--rounded-none { border-radius: 0; }
.ifinsta-surface--rounded-sm { border-radius: var(--ifinsta-radius-sm); }
.ifinsta-surface--rounded { border-radius: var(--ifinsta-radius-md); }
.ifinsta-surface--rounded-lg { border-radius: var(--ifinsta-radius-lg); }
.ifinsta-surface--rounded-xl { border-radius: var(--ifinsta-radius-xl); }
.ifinsta-surface--rounded-full { border-radius: 9999px; }

/* Shadow variants */
.ifinsta-surface--shadow-none { box-shadow: none; }
.ifinsta-surface--shadow-sm { box-shadow: var(--ifinsta-shadow-sm); }
.ifinsta-surface--shadow-md { box-shadow: var(--ifinsta-shadow-md); }
.ifinsta-surface--shadow-lg { box-shadow: var(--ifinsta-shadow-lg); }
.ifinsta-surface--shadow-xl { box-shadow: var(--ifinsta-shadow-xl); }

/* Padding variants using unified spacing tokens */
.ifinsta-surface--p-0 { padding: 0; }
.ifinsta-surface--p-2 { padding: var(--ifinsta-space-2); }
.ifinsta-surface--p-3 { padding: var(--ifinsta-space-3); }
.ifinsta-surface--p-4 { padding: var(--ifinsta-space-4); }
.ifinsta-surface--p-5 { padding: var(--ifinsta-space-6); }
.ifinsta-surface--p-6 { padding: var(--ifinsta-space-6); }
.ifinsta-surface--p-8 { padding: var(--ifinsta-space-6); }
.ifinsta-surface--p-10 { padding: var(--ifinsta-space-6); }
.ifinsta-surface--p-12 { padding: var(--ifinsta-space-8); }

/* Interactive surface (hover effects) with smooth transitions */
.ifinsta-surface--interactive {
    cursor: pointer;
    transition: all 180ms ease-in-out;
}

.ifinsta-surface--interactive:hover {
    border-color: var(--ifinsta-primary);
    box-shadow: var(--ifinsta-shadow-md);
    transform: translateY(-2px);
}

/* Color accent variants using semantic tokens */
.ifinsta-surface--primary { border-color: var(--ifinsta-primary); }
.ifinsta-surface--success { border-color: var(--ifinsta-success); }
.ifinsta-surface--warning { border-color: var(--ifinsta-warning); }
.ifinsta-surface--danger { border-color: var(--ifinsta-danger); }

/* ==========================================================================
   SECTIONS
   Vertical spacing for page sections using unified spacing tokens
   ========================================================================== */
.ifinsta-section {
    padding-top: var(--ifinsta-space-6);
    padding-bottom: var(--ifinsta-space-6);
}

.ifinsta-section--xs { padding-top: var(--ifinsta-space-2); padding-bottom: var(--ifinsta-space-2); }
.ifinsta-section--sm { padding-top: var(--ifinsta-space-4); padding-bottom: var(--ifinsta-space-4); }
.ifinsta-section--md { padding-top: var(--ifinsta-space-6); padding-bottom: var(--ifinsta-space-6); }
.ifinsta-section--lg { padding-top: var(--ifinsta-space-8); padding-bottom: var(--ifinsta-space-8); }
.ifinsta-section--xl { padding-top: var(--ifinsta-space-8); padding-bottom: var(--ifinsta-space-8); }
.ifinsta-section--2xl { padding-top: var(--ifinsta-space-8); padding-bottom: var(--ifinsta-space-8); }

/* Section with top border using unified border color */
.ifinsta-section--bordered {
    border-top: 1px solid var(--ifinsta-border);
}

/* ==========================================================================
   PAGE LAYOUT - A+ Grade Responsive
   Common page-level layout patterns using unified design tokens
   ========================================================================== */

/* App container - root layout element */
.ifinsta-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    font-family: var(--ifinsta-font-family);
}

/* Page container with sidebar layout */
.ifinsta-page {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.ifinsta-page__sidebar {
    width: var(--ifinsta-sidebar-width, 240px);
    flex-shrink: 0;
    background: var(--ifinsta-surface-1);
    border-inline-end: 1px solid var(--ifinsta-border);
    transition: width 180ms ease-in-out;
}

.ifinsta-page__content {
    flex: 1;
    padding: var(--ifinsta-space-4);
    overflow-x: auto;
    /* Dynamic margin based on sidebar */
    margin-inline-start: calc(var(--ifinsta-sidebar-visible, 1) * var(--ifinsta-sidebar-width, 240px) * var(--ifinsta-dir-multiplier, 1));
    transition: margin-inline-start 180ms ease-in-out;
}

/* Page header layout */
.ifinsta-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
    margin-bottom: var(--ifinsta-space-3);
    padding-bottom: var(--ifinsta-space-2);
    border-bottom: 1px solid var(--ifinsta-border);
}

.ifinsta-page-header__title {
    font-size: var(--ifinsta-h3);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
    margin: 0;
    font-family: var(--ifinsta-font-family);
    line-height: 1.2;
}

.ifinsta-page-header__subtitle {
    font-size: var(--ifinsta-body-sm);
    color: var(--ifinsta-text-muted);
    margin: var(--ifinsta-space-0-5) 0 0;
    font-family: var(--ifinsta-font-family);
    line-height: 1.3;
}

.ifinsta-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    margin-left: auto;
}

/* ==========================================================================
   CONTENT LAYOUTS
   Common content arrangement patterns using unified spacing tokens
   ========================================================================== */

/* Stack - vertical spacing between children */
.ifinsta-stack {
    display: flex;
    flex-direction: column;
}

.ifinsta-stack--1 > * + * { margin-top: var(--ifinsta-space-1); }
.ifinsta-stack--2 > * + * { margin-top: var(--ifinsta-space-2); }
.ifinsta-stack--3 > * + * { margin-top: var(--ifinsta-space-3); }
.ifinsta-stack--4 > * + * { margin-top: var(--ifinsta-space-4); }
.ifinsta-stack--6 > * + * { margin-top: var(--ifinsta-space-6); }
.ifinsta-stack--8 > * + * { margin-top: var(--ifinsta-space-8); }

/* Row - horizontal spacing between children */
.ifinsta-row {
    display: flex;
    align-items: center;
}

.ifinsta-row--1 > * + * { margin-left: var(--ifinsta-space-1); }
.ifinsta-row--2 > * + * { margin-left: var(--ifinsta-space-2); }
.ifinsta-row--3 > * + * { margin-left: var(--ifinsta-space-3); }
.ifinsta-row--4 > * + * { margin-left: var(--ifinsta-space-4); }
.ifinsta-row--6 > * + * { margin-left: var(--ifinsta-space-6); }

/* Cluster - wrapping flex layout */
.ifinsta-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

.ifinsta-cluster--2 { gap: var(--ifinsta-space-2); }
.ifinsta-cluster--4 { gap: var(--ifinsta-space-4); }
.ifinsta-cluster--justify-end { justify-content: flex-end; }
.ifinsta-cluster--justify-center { justify-content: center; }
.ifinsta-cluster--justify-between { justify-content: space-between; }

/* Split - push items to edges */
.ifinsta-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-4);
}

.ifinsta-split__left,
.ifinsta-split__right {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

/* Center - center content */
.ifinsta-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Sidebar - fixed-width sidebar with flexible content using unified tokens */
.ifinsta-sidebar-layout {
    display: flex;
    gap: var(--ifinsta-space-4);
}

.ifinsta-sidebar-layout__sidebar {
    width: var(--ifinsta-sidebar-width);
    flex-shrink: 0;
}

.ifinsta-sidebar-layout__main {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   HEADER LAYOUT
   Fixed header using unified header height token
   ========================================================================== */
.ifinsta-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ifinsta-header-height);
    background: var(--ifinsta-surface-1);
    border-bottom: 1px solid var(--ifinsta-border);
    z-index: var(--ifinsta-z-sticky);
    display: flex;
    align-items: center;
    padding: 0 var(--ifinsta-space-4);
}

.ifinsta-header__content {
    max-width: var(--ifinsta-content-max-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Main content with header offset */
.ifinsta-main {
    margin-top: var(--ifinsta-header-height);
    min-height: calc(100vh - var(--ifinsta-header-height));
}

/* ==========================================================================
   VISUALLY HIDDEN / SCREEN READER
   ========================================================================== */
.ifinsta-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS - A+ Grade
   Using unified breakpoint tokens
   ========================================================================== */

/* Small mobile: 360px - 639px */
@media (max-width: 639px) {
    :root {
        --ifinsta-header-icon-size: var(--ifinsta-icon-sm);
    }
    
    .ifinsta-container {
        padding-inline: var(--ifinsta-space-3);
    }

    .ifinsta-page__sidebar {
        display: none;
    }

    .ifinsta-page__content {
        padding: var(--ifinsta-space-3);
        margin-inline-start: 0;
    }

    .ifinsta-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ifinsta-page-header__actions {
        margin-inline-start: 0;
        width: 100%;
    }

    .ifinsta-sidebar-layout {
        flex-direction: column;
    }

    .ifinsta-sidebar-layout__sidebar {
        width: 100%;
    }
}

/* Mobile landscape: 640px - 767px */
@media (min-width: 640px) and (max-width: 767px) {
    :root {
        --ifinsta-header-icon-size: var(--ifinsta-icon-md);
    }
    
    .ifinsta-container {
        padding-inline: var(--ifinsta-space-3);
    }
    
    .ifinsta-page__content {
        padding: var(--ifinsta-space-3);
    }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --ifinsta-header-icon-size: var(--ifinsta-icon-md);
    }
    
    .ifinsta-container {
        padding-inline: var(--ifinsta-space-4);
    }
    
    .ifinsta-page__content {
        padding: var(--ifinsta-space-4);
    }
}

/* Laptop: 1024px - 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --ifinsta-header-icon-size: var(--ifinsta-icon-md);
    }
    
    .ifinsta-container {
        padding-inline: var(--ifinsta-space-4);
    }
}

/* Desktop: 1280px - 1535px */
@media (min-width: 1280px) and (max-width: 1535px) {
    :root {
        --ifinsta-header-icon-size: var(--ifinsta-icon-lg);
    }
    
    .ifinsta-container {
        padding-inline: var(--ifinsta-space-5);
    }
}

/* Large screens: 1536px+ */
@media (min-width: 1536px) {
    :root {
        --ifinsta-header-icon-size: var(--ifinsta-icon-lg);
    }
    
    .ifinsta-container {
        padding-inline: var(--ifinsta-space-6);
    }
}