/* ═══════════════════════════════════════════════════════════════
   UTILITIES - Terminal Theme
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   INFO BOXES & HELP TEXT
   ═══════════════════════════════════════════════════════════════ */

.info-box {
    background: rgba(0, 255, 65, 0.05);
    border-left: 2px solid rgba(0, 255, 65, 0.3);
    padding: 1rem;
    margin: 1rem 0;
}

.help-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.help-text-sm {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════════════════════ */

.divider-dashed {
    border-color: #33FF33;
    border-style: dashed;
    margin: 1.5rem 0;
}

.divider-solid {
    border-color: rgba(0, 255, 65, 0.3);
    border-style: solid;
    margin: 1.5rem 0;
}

/* Border utilities */
.border-top {
    border-top: 1px solid rgba(0, 255, 65, 0.2);
}

.border-bottom {
    border-bottom: 1px solid rgba(0, 255, 65, 0.2);
}

.border-left {
    border-left: 1px solid rgba(0, 255, 65, 0.2);
}

.border-right {
    border-right: 1px solid rgba(0, 255, 65, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CONTAINER UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Standard container (replaces home-container) */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Wide container (replaces dashboard-container) */
.container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Narrow container */
.container-narrow {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Fluid container (no max-width, just centering) */
.container-fluid {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Extra-wide container (for galleries with many items) */
.container-xl {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Medium container (for detail pages) */
.container-md {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Auto-fit grids with various min widths */
.grid-auto-fit-150 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.grid-auto-fit-200 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.grid-auto-fit-250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.grid-auto-fit-300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

/* Fixed column grids */
.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Image/thumbnail grids (fixed size, auto-fill) */
.grid-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 1rem;
    justify-content: center;
}

.grid-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Responsive: collapse to single column on mobile */
@media (max-width: 768px) {

    .grid-2-col,
    .grid-3-col,
    .grid-4-col {
        grid-template-columns: 1fr;
    }

    .grid-images {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .grid-albums {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INFO CARD COMPONENT
   ═══════════════════════════════════════════════════════════════ */

/* Base info card (replaces user-info-card, security-card, etc.) */
.info-card {
    background: rgba(0, 255, 65, 0.03);
    border: 1px solid rgba(0, 255, 65, 0.3);
    padding: 1.25rem;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Dark variant (replaces album-info-panel) */
.info-card-dark {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 255, 65, 0.3);
    padding: 1.5rem;
}

/* Panel variant (replaces resource-panel, network-card, metric-card) */
.info-card-panel {
    background: #0a0e0a;
    border: 2px solid rgba(0, 255, 65, 0.4);
    padding: 1rem;
    box-shadow:
        0 0 15px rgba(0, 255, 65, 0.1),
        inset 0 0 20px rgba(0, 255, 65, 0.03);
}

/* Hover effects */
.info-card:hover,
.info-card-dark:hover {
    background: rgba(0, 255, 65, 0.08);
    border-color: rgba(0, 255, 65, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
}

.info-card-panel:hover {
    border-color: rgba(0, 255, 65, 0.6);
    box-shadow:
        0 0 20px rgba(0, 255, 65, 0.15),
        inset 0 0 25px rgba(0, 255, 65, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */

/* Standard section header (replaces section-header, section-title, info-title) */
.section-header {
    color: var(--phosphor-green);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 255, 65, 0.3);
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

/* Large section header */
.section-header-lg {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Small section header */
.section-header-sm {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 65, 0.3);
}

/* Centered section header */
.section-header-center {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   STAT DISPLAY UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Stats row container */
.stats-row {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 255, 65, 0.2);
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-value {
    color: var(--phosphor-green);
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Responsive stats */
@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GRID SYSTEM - Bootstrap Grid Replacement
   ═══════════════════════════════════════════════════════════════ */

.grid {
    display: grid;
    gap: var(--gap-md);
    width: 100%;
}

.grid-1 {
    grid-template-columns: 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-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Flexbox Row System */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    width: 100%;
}

/* Column System */
.col {
    flex: 1;
    min-width: 0;
}

.col-auto {
    flex: 0 0 auto;
}

.col-1 {
    flex: 0 0 calc(8.333% - var(--gap-md));
}

.col-2 {
    flex: 0 0 calc(16.666% - var(--gap-md));
}

.col-3 {
    flex: 0 0 calc(25% - var(--gap-md));
}

.col-4 {
    flex: 0 0 calc(33.333% - var(--gap-md));
}

.col-5 {
    flex: 0 0 calc(41.666% - var(--gap-md));
}

.col-6 {
    flex: 0 0 calc(50% - var(--gap-md));
}

.col-7 {
    flex: 0 0 calc(58.333% - var(--gap-md));
}

.col-8 {
    flex: 0 0 calc(66.666% - var(--gap-md));
}

.col-9 {
    flex: 0 0 calc(75% - var(--gap-md));
}

.col-10 {
    flex: 0 0 calc(83.333% - var(--gap-md));
}

.col-11 {
    flex: 0 0 calc(91.666% - var(--gap-md));
}

.col-12 {
    flex: 0 0 calc(100% - var(--gap-md));
}

/* Medium screens (768px+) */
@media (min-width: 768px) {
    .col-md-1 {
        flex: 0 0 calc(8.333% - var(--gap-md));
    }

    .col-md-2 {
        flex: 0 0 calc(16.666% - var(--gap-md));
    }

    .col-md-3 {
        flex: 0 0 calc(25% - var(--gap-md));
    }

    .col-md-4 {
        flex: 0 0 calc(33.333% - var(--gap-md));
    }

    .col-md-5 {
        flex: 0 0 calc(41.666% - var(--gap-md));
    }

    .col-md-6 {
        flex: 0 0 calc(50% - var(--gap-md));
    }

    .col-md-7 {
        flex: 0 0 calc(58.333% - var(--gap-md));
    }

    .col-md-8 {
        flex: 0 0 calc(66.666% - var(--gap-md));
    }

    .col-md-9 {
        flex: 0 0 calc(75% - var(--gap-md));
    }

    .col-md-10 {
        flex: 0 0 calc(83.333% - var(--gap-md));
    }

    .col-md-11 {
        flex: 0 0 calc(91.666% - var(--gap-md));
    }

    .col-md-12 {
        flex: 0 0 calc(100% - var(--gap-md));
    }
}

/* Large screens (1024px+) */
@media (min-width: 1024px) {
    .col-lg-1 {
        flex: 0 0 calc(8.333% - var(--gap-md));
    }

    .col-lg-2 {
        flex: 0 0 calc(16.666% - var(--gap-md));
    }

    .col-lg-3 {
        flex: 0 0 calc(25% - var(--gap-md));
    }

    .col-lg-4 {
        flex: 0 0 calc(33.333% - var(--gap-md));
    }

    .col-lg-5 {
        flex: 0 0 calc(41.666% - var(--gap-md));
    }

    .col-lg-6 {
        flex: 0 0 calc(50% - var(--gap-md));
    }

    .col-lg-7 {
        flex: 0 0 calc(58.333% - var(--gap-md));
    }

    .col-lg-8 {
        flex: 0 0 calc(66.666% - var(--gap-md));
    }

    .col-lg-9 {
        flex: 0 0 calc(75% - var(--gap-md));
    }

    .col-lg-10 {
        flex: 0 0 calc(83.333% - var(--gap-md));
    }

    .col-lg-11 {
        flex: 0 0 calc(91.666% - var(--gap-md));
    }

    .col-lg-12 {
        flex: 0 0 calc(100% - var(--gap-md));
    }
}

/* Responsive Grid */
@media (max-width: 768px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-6 {
        grid-template-columns: 1fr;
    }

    .row {
        flex-direction: column;
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FLEXBOX UTILITIES
   ═══════════════════════════════════════════════════════════════ */

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

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

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

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

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.flex-1 {
    flex: 1;
}

.flex-auto {
    flex: auto;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

/* Gap utilities */
.gap-xs {
    gap: var(--gap-xs);
}

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

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

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

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

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE SPACING UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Margin utilities */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--spacing-xs);
}

.m-2 {
    margin: var(--spacing-sm);
}

.m-3 {
    margin: var(--spacing-md);
}

.m-4 {
    margin: var(--spacing-lg);
}

.m-5 {
    margin: var(--spacing-xl);
}

.m-auto {
    margin: auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--spacing-xs);
}

.mt-3 {
    margin-top: var(--spacing-md);
}

.mt-4 {
    margin-top: var(--spacing-lg);
}

.mt-5 {
    margin-top: var(--spacing-xl);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--spacing-xs);
}

.mb-3 {
    margin-bottom: var(--spacing-md);
}

.mb-4 {
    margin-bottom: var(--spacing-lg);
}

.mb-5 {
    margin-bottom: var(--spacing-xl);
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: var(--spacing-xs);
}

.ml-2 {
    margin-left: var(--spacing-sm);
}

.ml-3 {
    margin-left: var(--spacing-md);
}

.ml-4 {
    margin-left: var(--spacing-lg);
}

.ml-5 {
    margin-left: var(--spacing-xl);
}

.ml-auto {
    margin-left: auto;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: var(--spacing-xs);
}

.mr-2 {
    margin-right: var(--spacing-sm);
}

.mr-3 {
    margin-right: var(--spacing-md);
}

.mr-4 {
    margin-right: var(--spacing-lg);
}

.mr-5 {
    margin-right: var(--spacing-xl);
}

.mr-auto {
    margin-right: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Padding utilities */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--spacing-xs);
}

.p-2 {
    padding: var(--spacing-sm);
}

.p-3 {
    padding: var(--spacing-md);
}

.p-4 {
    padding: var(--spacing-lg);
}

.p-5 {
    padding: var(--spacing-xl);
}

.pt-0 {
    padding-top: 0;
}

.pt-2 {
    padding-top: var(--spacing-sm);
}

.pt-3 {
    padding-top: var(--spacing-md);
}

.pt-4 {
    padding-top: var(--spacing-lg);
}

.pt-5 {
    padding-top: var(--spacing-xl);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-2 {
    padding-bottom: var(--spacing-sm);
}

.pb-3 {
    padding-bottom: var(--spacing-md);
}

.pb-4 {
    padding-bottom: var(--spacing-lg);
}

.pb-5 {
    padding-bottom: var(--spacing-xl);
}

.pl-0 {
    padding-left: 0;
}

.pl-1 {
    padding-left: var(--spacing-xs);
}

.pl-2 {
    padding-left: var(--spacing-sm);
}

.pl-3 {
    padding-left: var(--spacing-md);
}

.pl-4 {
    padding-left: var(--spacing-lg);
}

.pl-5 {
    padding-left: var(--spacing-xl);
}

.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: var(--spacing-xs);
}

.pr-2 {
    padding-right: var(--spacing-sm);
}

.pr-3 {
    padding-right: var(--spacing-md);
}

.pr-4 {
    padding-right: var(--spacing-lg);
}

.pr-5 {
    padding-right: var(--spacing-xl);
}

/* ═══════════════════════════════════════════════════════════════
   WIDTH & HEIGHT UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

.h-auto {
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT ALIGNMENT UTILITIES
   ═══════════════════════════════════════════════════════════════ */

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

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

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

/* ═══════════════════════════════════════════════════════════════
   TEXT COLOR UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.text-dim {
    color: var(--text-dim);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-primary {
    color: var(--phosphor-green);
}

/* ═══════════════════════════════════════════════════════════════
   DISPLAY UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

/* ═══════════════════════════════════════════════════════════════
   INTERACTION UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Disable pointer events (e.g. image links during bulk-select mode) */
.no-pointer-events {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY SIZE UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* 0.8rem — footnotes, fine-print */
.text-xs {
    font-size: 0.8rem;
}