/* Vklass V2 components showcase.
   Inherits base component styling from ../../../Shared/css/themes/vklassv2.css. */

/* Page header */
.components-showcase {
    display: grid;
    gap: 20px;
}

.components-showcase__intro {
    color: var(--v2-text-muted, #64748b);
    margin: 6px 0 0;
}

/* Knappar */
.component-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.btn.btn-danger {
    border-color: var(--v2-danger, #c53030);
    background: var(--v2-danger, #c53030);
    color: #fff;
}

.btn:disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Formular */
.components-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.components-form-field {
    display: grid;
    gap: 6px;
}

.components-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.components-choice {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.components-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

.components-search .form-control {
    border: 0;
    flex: 1;
    padding-left: 0;
}

/* Tabell */
.components-table-wrap {
    overflow-x: auto;
}

/* Badges/status */
.components-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Kort */
.components-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Alert/notis */
.components-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Tabs */
.components-tabs-panel {
    padding: 14px 0 0;
    color: var(--v2-text-muted, #64748b);
}

/* Modal-preview */
.components-modal-preview {
    max-width: 520px;
    padding: 18px;
}

.components-modal-preview h3 {
    margin: 0 0 8px;
}

.components-modal-preview p {
    margin: 0 0 16px;
    color: var(--v2-text-muted, #64748b);
}

/* Rollspecifika showcase-sidor */
.role-showcase h2,
.role-showcase h3 {
    margin-top: 0;
}

.role-card-grid,
.role-message-grid,
.admin-kpi-grid,
.admin-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.role-summary-card .card__body,
.child-card .card__body {
    display: grid;
    gap: 10px;
}

.role-metric,
.admin-kpi-value {
    color: var(--v2-primary, #0b74de);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.role-card-meta,
.admin-showcase-intro,
.admin-eyebrow {
    color: var(--v2-text-muted, #64748b);
    margin: 0;
}

.role-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-week-plan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.role-week-plan article,
.role-message-card,
.admin-status-card {
    border: 1px solid var(--v2-border, #d8dee8);
    border-radius: var(--v2-radius-lg, 6px);
    background: var(--v2-surface, #fff);
    padding: 16px;
}

.role-day,
.admin-kpi-label {
    color: var(--v2-text-muted, #64748b);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.role-list {
    display: grid;
    gap: 12px;
}

.role-list-item {
    align-items: flex-start;
    border: 1px solid var(--v2-border, #d8dee8);
    border-radius: var(--v2-radius-lg, 6px);
    display: grid;
    gap: 12px;
    grid-template-columns: auto 1fr auto;
    padding: 14px;
}

.role-list-item .material-icons {
    color: var(--v2-primary, #0b74de);
}

.role-list-item p,
.role-message-card p,
.admin-status-card p,
.role-summary-card p,
.child-card p {
    color: var(--v2-text-muted, #64748b);
    margin: 0;
}

.admin-role-showcase {
    display: grid;
    gap: 18px;
}

.admin-showcase-header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-button {
    background: var(--v2-surface, #fff);
    border: 1px solid var(--v2-border-strong, #c5cedb);
    border-radius: var(--v2-radius, 4px);
    color: var(--v2-text, #1f2937);
    cursor: pointer;
    font: inherit;
    padding: 8px 14px;
}

.admin-button--primary {
    background: var(--v2-primary, #0b74de);
    border-color: var(--v2-primary, #0b74de);
    color: #fff;
}

.admin-kpi-card,
.admin-status-card {
    display: grid;
    gap: 10px;
}

.admin-deviation-table {
    min-width: 760px;
}

@media (max-width: 700px) {
    .role-list-item,
    .admin-showcase-header {
        display: grid;
        grid-template-columns: 1fr;
    }
}