/**
 * Pico.css Customization for Alius Admin
 * Structural rules and component extensions
 *
 * Color/typography/spacing tokens are defined in /css/tokens/design-tokens.css
 * This file contains only layout, grid, and component-specific rules.
 */

/* === Body Grid Layout === */
body {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}

.app-main {
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.container {
    flex: 1;
}

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

/* === Container Adjustments for Admin Layout === */
nav.container,
main.container,
.container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
}

nav.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
}

main.container {
    padding-top: 0;
    padding-bottom: 2rem;
}

/* === Material Symbols Icons === */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

/* Button with icon spacing */
button .material-symbols-outlined,
a[role="button"] .material-symbols-outlined {
    margin-right: 0.5rem;
}

/* Icon-only buttons */
button .material-symbols-outlined:only-child,
a[role="button"] .material-symbols-outlined:only-child {
    margin-right: 0;
}

/* === Button variants moved to /css/components/buttons.css === */

/* === Masthead === */
.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
    border-bottom: var(--hairline) solid var(--border-default);
    position: sticky;
    top: 0;
    background-color: var(--surface-panel);
    z-index: 100;
}

/* Mobile Toggle */
.sidebar-mobile-toggle {
    display: none;
    padding: var(--space-xs);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 120ms var(--ease);
}

.sidebar-mobile-toggle:hover {
    color: var(--text-primary);
}

@media (max-width: 899px) {
    .sidebar-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Context / Breadcrumbs */
.masthead-context {
    flex: 1;
}

/* User Menu */
.masthead-user {
    flex-shrink: 0;
}

/* === Form Enhancements === */
/* Inline form groups (search + button) */
fieldset[role="group"] {
    display: flex;
    gap: 0;
}

fieldset[role="group"] > input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

fieldset[role="group"] > button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

/* === Toolbar Layout === */
.toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: var(--pico-block-spacing-vertical);
    align-items: flex-start;
}

.toolbar > form {
    flex: 1;
    margin-bottom: 0;
}

.toolbar > button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

.toolbar > .btn-primary {
    margin-left: auto;
}

/* === Article/Card Enhancements === */
article {
    background-color: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    box-shadow: var(--pico-card-box-shadow);
}

article header {
    margin-bottom: var(--pico-spacing);
    padding-bottom: var(--pico-spacing);
    border-bottom: 2px solid var(--pico-muted-border-color);
}

article header hgroup {
    margin-bottom: 0;
}

article header hgroup h2 {
    margin-bottom: 0.25rem;
}

article header hgroup p {
    color: var(--pico-muted-color);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* === Table Responsive Figure === */
article > figure,
main figure,
figure {
    margin: 0;
    max-height: none !important;
    overflow: visible !important; /* Let content flow naturally */
}

figure table {
    margin: 0;
}

/* === Responsive Grid System === */
/* Pico classless doesn't include grid, so we add it here */
.grid,
.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    gap: var(--pico-spacing);
    margin-bottom: var(--pico-block-spacing-vertical);
}

/* Default grid: Fully responsive */
.grid {
    grid-template-columns: 1fr; /* Mobile: 1 column */
}

/* Tablet: 2 columns (≥ 576px) */
@media (min-width: 576px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns (≥ 1024px) */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Grid variant: 2 columns */
.grid-2 {
    grid-template-columns: 1fr; /* Mobile: stack */
}

@media (min-width: 576px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Grid variant: 3 columns */
.grid-3 {
    grid-template-columns: 1fr; /* Mobile: stack */
}

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

@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Grid variant: 4 columns */
.grid-4 {
    grid-template-columns: 1fr; /* Mobile: stack */
}

@media (min-width: 576px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === Utility Classes (Minimal) === */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.hidden {
    display: none !important;
}

/* === Loading States === */
.htmx-request {
    opacity: 0.7;
    pointer-events: none;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}