/* ========================================================================
   SLMDGridV3.css -- DGridV3 grid component styles
   Independent from V1/V2 DGrid (SLMDGrid.css). Prefix: slm-dgridv3-*
   ======================================================================== */

/* -- Root wrapper -- */
.slm-dgridv3-root {
    max-width: 1200px;
}

/* -- Toolbars -- */
.slm-dgridv3-toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.slm-dgridv3-toolbar-adv {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--slm-color-surface, #fafbfc) 92%, var(--slm-color-accent, #2563eb) 8%);
    border: 1px solid var(--slm-color-border, #d1d5db);
    border-radius: 6px;
}

/* -- Toolbar separator (vertical divider between button groups) -- */
.slm-dgridv3-separator {
    display: inline-block;
    width: 3px;
    height: 1.4rem;
    margin: 0 4px;
    background: var(--slm-color-separator, #888888);
    border-radius: 1px;
    flex-shrink: 0;
}

/* -- Table -- */
.slm-dgridv3-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    color: var(--slm-color-text-primary, #1a1a1a);
}

/* -- Column headers -- */
.slm-dgridv3-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--slm-label-font-size, 0.8rem);
    color: var(--slm-label-color, #8B0000);
    padding: 5px 8px;
    border-bottom: 2px solid var(--slm-color-border, #d1d5db);
    text-align: left;
    vertical-align: bottom;
}

.slm-dgridv3-th:hover {
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 8%, transparent 92%);
}

.slm-dgridv3-th--sorted {
    color: var(--slm-color-accent, #2563eb);
}

.slm-dgridv3-th--actions {
    width: 1%;
    white-space: nowrap;
    font-weight: 400;
    font-size: var(--slm-label-font-size, 0.8rem);
    color: var(--slm-color-accent, #2563eb);
    cursor: default;
}

.slm-dgridv3-th__label-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.slm-dgridv3-sort-indicator {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7em;
    color: var(--slm-color-text-muted, #6b6f73);
    vertical-align: middle;
}

/* -- Filter row -- */
.slm-dgridv3-filter-row td {
    padding: 2px 4px;
}

.slm-dgridv3-filter-input {
    width: 100%;
    min-width: 60px;
    padding: 0.1rem 0.25rem;
    border: 1px solid var(--slm-field-wrapper-border, #d1d5db);
    border-radius: 4px;
    background: transparent;
    font-size: var(--slm-label-font-size, 0.8rem);
    font-weight: 400;
    color: var(--slm-color-text-primary, #1a1a1a);
    outline: none;
    box-sizing: border-box;
}

.slm-dgridv3-filter-input::placeholder {
    color: var(--slm-color-text-muted, #6b6f73);
    font-weight: 400;
}

.slm-dgridv3-filter-input:focus {
    border-color: var(--slm-color-accent, #2563eb);
}

/* -- Data rows -- */
.slm-dgridv3-row {
    cursor: pointer;
}

.slm-dgridv3-row:hover {
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 4%, transparent 96%);
}

.slm-dgridv3-row--selected {
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 10%, transparent 90%);
}

.slm-dgridv3-row--selected:hover {
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 14%, transparent 86%);
}

.slm-dgridv3-row--editing {
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 6%, transparent 94%);
    outline: 1px solid var(--slm-color-accent, #2563eb);
}

.slm-dgridv3-row--deleted {
    opacity: 0.55;
    text-decoration: line-through;
}

/* -- Data cells -- */
.slm-dgridv3-td {
    padding: 5px 8px;
    font-size: 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--slm-color-border, #d1d5db) 50%, transparent 50%);
    vertical-align: middle;
}

/* -- Actions cell -- */
.slm-dgridv3-actions {
    white-space: nowrap;
    width: 1%;
    padding: 3px 6px;
}

.slm-dgridv3-actions__row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

/* -- Status bar (muted text below toolbar) -- */
.slm-dgridv3-status {
    font-size: 0.8rem;
    color: var(--slm-color-text-muted, #6b6f73);
    padding: 2px 0;
}

/* -- Template mode badge -- */
.slm-dgridv3-template-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 15%, transparent 85%);
    color: var(--slm-color-accent, #2563eb);
    border: 1px solid var(--slm-color-accent, #2563eb);
}

/* -- History strip (inline expansion below selected row) -- */
.slm-dgridv3-history-strip {
    background: var(--slm-dialog-surface, #fafbfc);
    border: 1px solid var(--slm-color-border, #d1d5db);
    border-radius: 0 0 6px 6px;
    padding: 8px 12px;
}

.slm-dgridv3-history-strip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.slm-dgridv3-history-strip__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slm-color-text-primary, #1a1a1a);
    margin: 0;
}

.slm-dgridv3-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.slm-dgridv3-history-table th {
    font-size: var(--slm-label-font-size, 0.8rem);
    font-weight: 600;
    color: var(--slm-label-color, #8B0000);
    padding: 3px 6px;
    border-bottom: 1px solid var(--slm-color-border, #d1d5db);
    text-align: left;
}

.slm-dgridv3-history-table td {
    padding: 3px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--slm-color-border, #d1d5db) 30%, transparent 70%);
}

.slm-dgridv3-history-table__muted {
    font-size: 0.8rem;
    color: var(--slm-color-text-muted, #6b6f73);
    white-space: nowrap;
}

.slm-dgridv3-history-row > td {
    padding: 0;
    border-bottom: none;
}

/* -- Context menu overlay -- */
.slm-dgridv3-ctx-menu {
    background: var(--slm-dialog-surface, #fff);
    border: 1px solid var(--slm-dialog-border, #cfd1d4);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    padding: 6px 0;
    min-width: 200px;
}

.slm-dgridv3-ctx-menu__item {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    font-size: 0.9rem;
    color: var(--slm-color-text-primary, #1a1a1a);
    cursor: pointer;
}

.slm-dgridv3-ctx-menu__item:hover {
    background: color-mix(in srgb, var(--slm-color-accent, #2563eb) 8%, transparent 92%);
}

.slm-dgridv3-ctx-menu__item:disabled {
    opacity: 0.45;
    cursor: default;
}

.slm-dgridv3-ctx-menu__check {
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
}

.slm-dgridv3-ctx-menu__separator {
    border-top: 1px solid var(--slm-color-border, #e7e9ec);
    margin: 6px 0;
}

/* -- Empty / loading / error states -- */
.slm-dgridv3-empty {
    color: var(--slm-color-text-muted, #6b6f73);
    font-style: italic;
    font-size: 0.9rem;
    padding: 8px 0;
}

.slm-dgridv3-error {
    color: #7a1b1b;
    white-space: pre-wrap;
    font-size: 0.9rem;
    padding: 8px 0;
    border: 1px solid #d4a0a0;
    border-radius: 6px;
    background: #fdf0f0;
    padding: 8px 12px;
}

/* -- Paging group -- */
.slm-dgridv3-paging {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
    align-items: center;
}

.slm-dgridv3-paging__indicator {
    font-size: 0.85rem;
    color: var(--slm-color-text-muted, #6b6f73);
    white-space: nowrap;
}

.slm-dgridv3-paging__label {
    font-size: 0.8rem;
    color: var(--slm-color-text-muted, #6b6f73);
    white-space: nowrap;
    margin-left: 0.25rem;
}

.slm-dgridv3-paging .slm-v3-field--number {
    flex: 0 0 auto;
}