/* =========================[ VIEW GRID ]========================= */

/*
ViewGrid is a layout system designed for displaying
read-only information in view pages.

Supports two usage styles:

1) Simple vertical layout (legacy)
   view-row

2) Structured grid layout
   view-grid-row
   view-grid-col col-*

Both styles are compatible and can coexist.
*/


/* =========================
   MAIN CONTAINER
========================= */

.view-grid{
    padding:16px;
    font-size:small;
}


/* =========================
   LEGACY MODE (view-row)
========================= */

.view-row{
    display:grid;
    grid-template-columns:max-content 1fr;
    column-gap:18px;
    row-gap:4px;
    padding:8px 0;
}

.view-row + .view-row{
    border-top:1px solid var(--color-gray-light);
}


/* =========================
   GRID ROW (NEW SYSTEM)
========================= */

.view-grid-row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-6px;
    margin-right:-6px;
}

.view-grid-row + .view-grid-row{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--color-gray-light);
}


/* =========================
   GRID COLUMN
========================= */

.view-grid-col{
    padding-left:6px;
    padding-right:6px;
    margin-bottom:10px;

    display:flex;
    flex-direction:column;
    gap:4px;
}


/* =========================
   COLUMN SYSTEM (12 GRID)
========================= */

.view-grid-col.col-12{flex:0 0 100%;}
.view-grid-col.col-11{flex:0 0 91.6667%;}
.view-grid-col.col-10{flex:0 0 83.3333%;}
.view-grid-col.col-9{flex:0 0 75%;}
.view-grid-col.col-8{flex:0 0 66.6667%;}
.view-grid-col.col-7{flex:0 0 58.3333%;}
.view-grid-col.col-6{flex:0 0 50%;}
.view-grid-col.col-5{flex:0 0 41.6667%;}
.view-grid-col.col-4{flex:0 0 33.3333%;}
.view-grid-col.col-3{flex:0 0 25%;}
.view-grid-col.col-2{flex:0 0 16.6667%;}
.view-grid-col.col-1{flex:0 0 8.3333%;}


/* =========================
   LABEL
========================= */

.view-label{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--color-gray-medium);
}


/* =========================
   VALUE
========================= */

.view-value{
    font-size:14px;
    font-weight:500;
    color:var(--color-dark);
}


/* =========================
   SUBTITLE
========================= */

.view-subtitle,
.view-subtitle-indent{

    width:100%;

    font-weight:600;
    font-size:12px;

    text-transform:uppercase;
    letter-spacing:.04em;

    color:var(--color-gray-dark);

    margin:16px 0 8px 0;

    border:none;
}


/* align subtitle with columns */

.view-grid > .view-subtitle,
.view-grid > .view-subtitle-indent{
    padding-left:6px;
    padding-right:6px;
}


/* icon */

.view-subtitle-indent i{
    margin-right:6px;
    color:var(--color-gray-medium);
}

.view-value-currency{
    font-variant-numeric: tabular-nums;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .view-grid-col{
        flex:0 0 100% !important;
    }

    .view-row{
        grid-template-columns:120px 1fr;
    }

}


/* ========================================================================== */
/*                              DOCUMENTATION                                 */
/* ========================================================================== */

/*
VIEW GRID

A layout system designed to display read-only data
inside "View" pages.

Fields are displayed in the format:

    Label | Value


------------------------------------------------------------------

.view-grid

Main container for view layout.

Features:

- Flexible layout
- Supports multiple columns
- Uses a 12 column width system


Example:

<div class="view-grid">
    ...
</div>


------------------------------------------------------------------

.view-row

Represents one field inside the grid.

Required structure:

.view-row
   ├── .view-label
   └── .view-value


Example:

<div class="view-row">
    <div class="view-label">Customer</div>
    <div class="view-value">John Doe</div>
</div>


------------------------------------------------------------------

COLUMN SYSTEM

Fields can be arranged side-by-side using col-*.

Example:

<div class="view-grid">

    <div class="view-grid-row">

        <div class="view-grid-col col-4">
            <div class="view-label">ID</div>
            <div class="view-value">1</div>
        </div>

        <div class="view-grid-col col-4">
            <div class="view-label">Company</div>
            <div class="view-value">FEX</div>
        </div>

        <div class="view-grid-col col-4">
            <div class="view-label">Plan</div>
            <div class="view-value">Professional</div>
        </div>

    </div>

</div>


Column sizes:

col-12 = 100%
col-6  = 50%
col-4  = 33%
col-3  = 25%


------------------------------------------------------------------

.view-label

Displays the field name.


Example:

<div class="view-label">Email</div>


------------------------------------------------------------------

.view-value

Displays the field value.

Usually filled dynamically using JavaScript.


Example:

<div id="ds_email" class="view-value"></div>


------------------------------------------------------------------

.view-subtitle

Creates a section divider.


Example:

<div class="view-subtitle">
    Payment Information
</div>


------------------------------------------------------------------

.view-subtitle-indent

Indented subtitle used for secondary sections.


Example:

<div class="view-subtitle-indent">
    <i class="fa-solid fa-plug"></i>
    Gateway Data
</div>


NOTES

- Designed for read-only pages
- Compatible with FEX cards
- Allows mixed layouts (vertical + columns)
*/