/* Reusable "framed box" used for grouped form controls */
.box {
    border: 1px solid rgba(148,163,184,.35);
    border-radius: .5rem;
    padding: .75rem;
    background: rgba(30,41,59,.35);
}

    /* Title inside .box */
    .box h4 {
        font-size: .85rem;
        color: #e5e7eb;
        margin: 0 0 .35rem 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    /* Labels styling consistency */
    .box label {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

/* Strict 3-column grid (used in Create page forms) */
.form-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

    .form-3col .field {
        min-width: 0;
    }

    .form-3col .span-3 {
        grid-column: 1 / -1;
    }

/* 4-column filters row (From, To, Level, Source all in one line) */
.filters-4col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    align-items: end;
}

/* Card container for tables or big sections */
.card {
    border: 1px solid rgba(71,85,105,.5);
    border-radius: 1rem;
    background: rgba(51,65,85,.8);
    color: #e2e8f0;
    box-shadow: 0 6px 24px -10px rgba(2,6,23,.25);
}

/* Utility to span full row inside grids */
.grid-span-full {
    grid-column: 1 / -1;
}

/* Shared input look (used for text, date, number, select) */
.input-like,
.box input[type="text"],
.box input[type="number"],
.box input[type="date"],
.box input[type="password"],
.box select,
.box textarea {
    width: 100%;
    border-radius: .5rem;
    border: 1px solid rgba(100,116,139,.5);
    background: rgba(30,41,59,.4);
    color: #e5e7eb;
    padding: .5rem .75rem;
}

    /* Focus ring for inputs (brand color highlight) */
    .input-like:focus,
    .box input:focus,
    .box select:focus,
    .box textarea:focus {
        outline: none;
        border-color: var(--brand, #2563eb);
        box-shadow: 0 0 0 1px var(--brand, #2563eb);
    }

/* Small note under fields */
.form-note {
    font-size: 11px;
    color: #94a3b8;
}