/* Material Design theme for xCRUD - built on Material Design Lite (MDL). */

.xcrud {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* jQuery UI's own minWidth dialog option is a no-op when width is 'auto'
   (set in ui_modal() in xcrud.js) - a short 2-3 field form otherwise opens
   noticeably narrower than feels proportionate next to the full-width grid
   behind it. Enforce it here instead. */
.ui-dialog {
    min-width: 50vw;
    box-sizing: border-box;
}

/* MDL resets bare h1/h2 to its own "display" heading scale (h2 renders at
   45px by default) - fine for a real Material app's hero heading, way too
   large for a repeated table/section name inside a widget. */
.xcrud h1,
.xcrud h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 12px 0;
}

.xcrud-top-actions .mdl-button {
    margin: 0 4px 4px 0;
}

/* Refresh/Print/Export sit inside their own .btn-group div (a leftover
   Bootstrap 3 grouping wrapper material.css never defines pull-right/
   btn-group for), while Add is a separate element straight after it - two
   block-level siblings, so Add always dropped to its own line underneath
   regardless of how much horizontal room was actually free. Make the whole
   row flex and let .btn-group's children join it directly instead of
   nesting a second block inside it. */
.xcrud-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.xcrud-top-actions .btn-group {
    display: contents;
}

.xcrud-top-actions .clearfix {
    display: none;
}

/* MDL's default button size (min-width 64px, 36px tall, uppercase label) is
   sized for a page's primary actions, not a row of 2-3 buttons repeated in
   every grid row - at default size the Actions column alone was wide enough
   to push the grid past the available width and force everything into a
   near-permanent horizontal scroll. Shrink just the in-grid action buttons. */
td.xcrud-actions {
    padding-left: 4px;
    padding-right: 4px;
}

td.xcrud-actions .mdl-button {
    min-width: 0;
    height: 26px;
    line-height: 24px;
    padding: 0 6px;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
    margin: 1px;
}

/* MDL ships button/table/tab chrome but no form-field component this
   renderer's plain <input>/<select>/<textarea> markup can use directly (MDL's
   real text-field needs a wrapping mdl-textfield + floating label the field
   renderer doesn't build) - this gives inputs clean, consistent styling
   instead of rendering completely bare. */
.xcrud-mdl-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-top: 4px;
    border: none;
    border-bottom: 2px solid #9e9e9e;
    background: transparent;
    border-radius: 2px 2px 0 0;
    font-family: inherit;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.xcrud-mdl-input:hover {
    border-bottom-color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.02);
}

.xcrud-mdl-input:focus {
    outline: none;
    border-bottom-color: #3f51b5;
    background: rgba(63, 81, 181, 0.04);
}

.xcrud-mdl-checkbox {
    width: 18px;
    height: 18px;
}

.xcrud-mdl-inline-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Add/edit forms render these as <div>s; View mode reuses the exact same
   class names on a <table>/<tr>/<td> instead (render_fields_list() is
   called with a 'table' tag for view mode). Without the div qualifier
   these rules also landed on the table version, forcing display:grid onto
   a <table> and display:flex onto its <tr>s - that broke normal table
   layout entirely and made every label/value pair render on top of each
   other. Scope to the div-based form layout only; see further down for the
   table-based view-mode styling. */
/* auto-fit with a plain minmax(220px, 1fr) packs in as many 220px+ columns
   as the container is wide enough for - on a wide modal (now at least 50vw,
   see .ui-dialog above) or the full, unconstrained create/edit page, that
   was routinely 4 columns of cramped fields side by side. Capping each
   column's minimum to half the container width (minus half the gap) means
   a third column would have to be narrower than that minimum, so the grid
   can never fit more than 2 - collapses to 1 column on narrow containers,
   same as before. */
div.xcrud-mdl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(50% - 10px)), 1fr));
    gap: 4px 20px;
}

div.xcrud-mdl-cell {
    display: flex;
    flex-direction: column;
}

.xcrud-mdl-group-label {
    grid-column: 1 / -1;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
    margin: 10px 0 4px;
}

.xcrud-mdl-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.54);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.15s ease;
}

/* Ties the label's color to its field the way a real MDL floating label
   would, without needing the DOM restructuring + JS that a genuine
   floating label needs (label after the input, wrapped in mdl-textfield,
   is-focused/is-dirty classes toggled on focus/blur). */
div.xcrud-mdl-cell:focus-within .xcrud-mdl-label {
    color: #3f51b5;
}

/* View mode's table version of the layout above (see the div/table split
   note further up) - plain two-column rows, label then value. */
table.xcrud-mdl-grid {
    width: 100%;
    border-collapse: collapse;
}

table.xcrud-mdl-grid tr.xcrud-mdl-cell td {
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    text-align: left;
}

table.xcrud-mdl-grid tr.xcrud-mdl-cell td.xcrud-mdl-label {
    width: 200px;
    white-space: nowrap;
    padding-right: 16px;
}

.xcrud-mdl-image {
    max-width: 100%;
    border-radius: 2px;
}

.xcrud-mdl-button-group {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.xcrud-mdl-pagination {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.xcrud-mdl-pagination-item {
    display: inline-flex;
}

.xcrud-mdl-pagination-active .xcrud-action {
    background: #3f51b5;
    color: #fff;
    border-radius: 50%;
}

/* Form/detail-view tabs (Order Info / Order Details / Customers, etc).
   The .ini reuses real MDL tab-component class names (mdl-tabs__tab-bar,
   mdl-tabs__tab, is-active), but this renderer's markup is a plain
   <ul><li><a> header plus separate .tab-content/.tab-pane panels - not the
   flat <a> children under a .mdl-tabs wrapper that MDL's own tab CSS
   requires - so none of MDL's real tab styling ever applied. Tabs rendered
   as a bare bullet-separated list of links. This styles that actual markup
   directly instead of depending on MDL's component structure. */
.xcrud-tabs-ui .mdl-tabs__tab-bar {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid #e0e0e0;
}

.xcrud-tabs-ui .mdl-tabs__tab-bar li {
    list-style: none;
    margin: 0;
}

.xcrud-tabs-ui .mdl-tabs__tab {
    display: inline-block;
    padding: 12px 16px;
    color: rgba(0, 0, 0, .54);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.xcrud-tabs-ui .mdl-tabs__tab:hover {
    color: rgba(0, 0, 0, .87);
}

/* "is-active" is set server-side (PHP) only on the tab that's active at
   initial render and never updated afterwards - jQuery UI Tabs (see below)
   doesn't know about it and manages its own ui-tabs-active/ui-state-active
   classes on the <li> instead, correctly moving them on every click. Key
   the underline off that real, live state instead so it actually follows
   the active tab; is-active stays as a same-look fallback for the very
   first render, before jQuery UI has initialized. */
.xcrud-tabs-ui .mdl-tabs__tab-bar li.ui-tabs-active .mdl-tabs__tab,
.xcrud-tabs-ui .mdl-tabs__tab.is-active {
    color: #3f51b5;
    border-bottom-color: #3f51b5;
}

/* Tab switching is powered by the real jQuery UI Tabs widget (see
   init_tabs() in xcrud.js), which is also used to skin the tab strip a
   generic light-gray/blue button-box style of its own (jquery-ui.min.css's
   .ui-state-default/.ui-state-active) - that's what was painting a solid
   filled-blue box behind the active tab and a gray box behind the rest,
   fighting with the Material-style underline tabs above. Strip jQuery UI's
   own visual skin here (but keep its structural classes, which the widget
   needs for interactivity) so only the Material styling shows. */
.xcrud-tabs-ui .ui-tabs-nav,
.xcrud-tabs-ui .ui-tabs-nav li,
.xcrud-tabs-ui .ui-state-default,
.xcrud-tabs-ui .ui-state-active,
.xcrud-tabs-ui .ui-state-hover {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-weight: inherit;
}

.xcrud-tabs-ui .tab-content.ui-widget-content,
.xcrud-tabs-ui .tab-pane.ui-widget-content {
    background: transparent;
    border: 0;
}

/* per-column instant filter row (see header_filters()) */
.xcrud-header-filters-row th,
.xcrud-header-filters-row td {
    padding: 4px 8px !important;
    background: #fafafa;
}

.xcrud-header-filter-cell input.xcrud-header-filterdata,
.xcrud-header-filter-cell select.xcrud-header-filterdata {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

/* side-panel edit mode grid widths (theme has no Bootstrap grid loaded) */
.xcrud-list-container.overflow-hidden {
    overflow: hidden;
}
@media (min-width: 768px) {
    .xcrud-list-container.col-sm-6 {
        width: 50%;
        float: left;
        box-sizing: border-box;
    }
    .xcrud-list-container.col-sm-12 {
        width: 100%;
    }
    .edit_side_panel.col-sm-5 {
        width: 41.66667%;
        float: left;
        box-sizing: border-box;
        padding-left: 15px;
    }
}