/* Local compositional component layer. State classes used by JavaScript
   remain intentionally separate from these visual classes. */

/* Layout primitives */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-6); }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.cluster-between { justify-content: space-between; }
.grid { display: grid; gap: var(--space-4); }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.45fr); gap: var(--space-6); }
.separator { width: 100%; height: 1px; background: var(--border); }

.page { min-width: 0; min-height: 0; color: var(--foreground); }
.page-container { width: min(100%, var(--content-max-width)); margin-inline: auto; padding: var(--space-6); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-heading { min-width: 0; }
.page-title { color: var(--foreground); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: -0.02em; }
.page-description { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

/* Cards */
.card {
    color: var(--card-foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-interactive { transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.card-interactive:hover { background: var(--surface-2); border-color: var(--border-strong); }
.card-interactive:active { transform: translateY(1px); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.card-content { padding: var(--space-5); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.card-title { color: var(--foreground); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.3; }
.card-description { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); }

/* Buttons */
.button {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--secondary-foreground);
    background: var(--secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.button:hover { background: var(--secondary-hover); }
.button:active { transform: translateY(1px); }
.button-primary { color: var(--primary-foreground); background: var(--primary); }
.button-primary:hover { background: var(--primary-hover); }
.button-primary:active { background: var(--primary-active); }
.button-secondary { color: var(--secondary-foreground); background: var(--secondary); }
.button-outline { color: var(--foreground); background: transparent; border-color: var(--border); }
.button-outline:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.button-ghost { color: var(--muted-foreground); background: transparent; }
.button-ghost:hover { color: var(--foreground); background: var(--surface-hover); }
.button-destructive { color: var(--destructive-foreground); background: var(--destructive); }
.button-destructive:hover { background: var(--destructive-hover); }
.button-icon { width: var(--control-height); padding: 0; }
.button-sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); font-size: var(--text-xs); }
.button-lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { color: var(--foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field-description { color: var(--muted-foreground); font-size: var(--text-xs); }
.input,
.select,
.textarea {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--foreground);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.textarea { min-height: 6rem; padding-block: var(--space-3); resize: vertical; }
.input::placeholder,
.textarea::placeholder { color: var(--muted-foreground); }
.input:focus,
.select:focus,
.textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }

/* Segmented controls and tabs */
.tabs { min-width: 0; }
.tab-list { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); }
.tab-trigger { min-height: var(--control-height-sm); padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; }
.tab-trigger:hover { color: var(--foreground); background: var(--surface-hover); }
.tab-trigger[aria-selected="true"],
.tab-trigger.active { color: var(--foreground); background: var(--surface-3); }

/* Feedback and metadata */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.375rem; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-2); color: var(--secondary-foreground); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.badge-primary { border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary-muted-foreground); }
.badge-success { border-color: var(--success-border); background: var(--success-soft); color: var(--success-muted-foreground); }
.badge-warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-muted-foreground); }
.badge-destructive { border-color: var(--destructive-border); background: var(--destructive-soft); color: var(--destructive-muted-foreground); }

.alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.alert-title { color: var(--foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.alert-description { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); }

.empty-state,
.loading-state,
.error-state { display: flex; min-height: 12rem; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8); text-align: center; color: var(--muted-foreground); }
.empty-state h3,
.loading-state h3,
.error-state h3 { color: var(--foreground); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.error-state { color: var(--destructive-muted-foreground); }

.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-3); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: translateX(-100%); animation: skeleton-sweep 1.6s ease-in-out infinite; }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

.progress { height: 0.375rem; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-3); }
.progress-bar { height: 100%; border-radius: inherit; background: var(--primary); transition: width var(--duration-normal) var(--ease-standard); }

/* Navigation and overlays */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); }
.breadcrumb-item,
.breadcrumb-current,
.breadcrumb-separator { flex: 0 0 auto; white-space: nowrap; }
.app-toolbar { min-height: var(--toolbar-height); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface-1); }
.toolbar-group { display: flex; align-items: center; gap: var(--space-1); }
.toolbar-spacer { flex: 1; }

.dialog-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: var(--space-4); background: var(--modal-overlay); }
.dialog { width: min(100%, 32rem); max-height: min(42rem, calc(100dvh - 2rem)); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-md); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border); }
.dialog-title { color: var(--foreground); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.dialog-description { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-sm); }
.dialog-content { padding: var(--space-5); }
.dialog-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }

@media (max-width: 768px) {
    .page-container { padding: var(--space-4); }
    .page-header { flex-direction: column; }
    .page-actions { width: 100%; }
    .split-layout { grid-template-columns: 1fr; }
    .button { min-height: 2.75rem; }
    .button-icon { width: 2.75rem; }
    .dialog-overlay { padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left)); }
}

/* Small shared presentation helpers used by generated application markup. */
.nav-inline-icon {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: var(--space-2);
    vertical-align: middle;
}

.nav-group-title-spaced { margin-top: var(--space-4); }
.pdf-info-grow { flex: 1; min-width: 0; }
.is-complete { text-decoration: line-through; opacity: 0.7; }
.resource-status { font-weight: var(--weight-semibold); }
.resource-status-complete { color: var(--success); }
.resource-status-featured { color: var(--primary); }
.viewer-loading-state,
.viewer-error-state { margin-top: var(--space-8); }