﻿/*Static app.css*/

/* Selection dialogs share compact rows without shrinking their search controls. */
.eat-selection-dialog .rz-grid-table > tbody > tr > td {
    padding: .3rem .65rem !important;
}
.eat-selection-dialog .rz-grid-table > tbody > tr > td .eat-batch-button.rz-button {
    min-height: 32px;
    height: 32px;
    padding: .25rem .65rem;
}
.eat-selection-dialog .rz-grid-table .eat-batch-button .rz-button-icon { font-size: 17px; }
.eat-picker-footer { display: flex; justify-content: flex-end; flex-shrink: 0; }

/* Selected values read like fields; blue is reserved for the search affordance. */
.eat-student-control .eat-batch-button.rz-button {
    --eat-button-text: #c3c9d2;
    --eat-button-hover: rgba(255, 255, 255, .06);
}
.eat-student-control .eat-selection-main.rz-button,
.eat-student-control #chooseStudent.rz-button {
    border-color: var(--rz-base-500) !important;
    color: var(--rz-text-color) !important;
    font-weight: 400;
}
.eat-student-control .eat-selection-main .rz-button-box,
.eat-student-control #chooseStudent .rz-button-box {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}
.eat-student-control .eat-selection-main.rz-button:not(:disabled) .rz-button-icon,
.eat-student-control #chooseStudent.rz-button:not(:disabled) .rz-button-icon {
    color: #64d2ff !important;
}

/* Native content sizing includes existing feedback, typing and pasted paragraphs.
   Browsers without field-sizing retain the eight-row, manually resizable editor. */
textarea.eat-feedback-editor {
    /* Match the Common Mistakes grid rather than the smaller input default. */
    font-size: var(--rz-grid-cell-font-size, 1rem);
    box-sizing: border-box;
    width: 100%;
    line-height: 1.5;
    padding: .75rem;
    min-height: calc(12em + 1.5rem + 2px);
    max-height: max(calc(12em + 1.5rem + 2px), 50vh);
    field-sizing: content;
    resize: vertical;
    overflow-y: auto;
}

/* Multi-score feedback needs separation from its action row. */
textarea.eat-feedback-editor.mb-3 + .eat-action-row {
    margin-top: 18px;
}

/* Batch actions share dimensions and states; colour identifies their purpose. */
.eat-batch-button.rz-button {
    --eat-button-hover: rgba(100, 210, 255, .12);
    --eat-button-text: #64d2ff;
    min-height: 42px;
    padding: .625rem 1rem;
    border: 1px solid var(--eat-button-text) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--eat-button-text) !important;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: none !important;
    transition: background-color .15s ease;
}
.eat-batch-button-save.rz-button { --eat-button-hover: rgba(48, 209, 88, .15); --eat-button-text: #30d158; }
.eat-batch-button-close.rz-button { --eat-button-hover: rgba(255, 159, 10, .12); --eat-button-text: #ffb340; }
.eat-batch-button-delete.rz-button { --eat-button-hover: rgba(255, 69, 58, .12); --eat-button-text: #ff453a; }
.eat-batch-button-cancel.rz-button { --eat-button-hover: rgba(255, 255, 255, .06); --eat-button-text: #c3c9d2; }
.eat-batch-button.rz-button .rz-button-text,
.eat-batch-button.rz-button .rz-button-icon { color: inherit !important; }
.eat-batch-button.rz-button .rz-button-icon { font-size: 20px; }
.eat-batch-button.rz-button:not(:disabled):not(.rz-state-disabled):hover { background: var(--eat-button-hover) !important; }
.eat-batch-button.rz-button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.eat-batch-button.rz-button:disabled,
.eat-batch-button.rz-button.rz-state-disabled {
    background: transparent !important;
    border-color: #606773 !important;
    color: #8e96a3 !important;
    opacity: 1;
    cursor: not-allowed;
}
.eat-batch-dialog-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; }
@media (max-width: 600px) {
    .eat-batch-dialog-actions { flex-direction: column; align-items: stretch; }
}

.eat-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.eat-action-row .rz-button:not(.eat-batch-button),
.eat-rubric-inline-action.rz-button {
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.eat-action-save.rz-button {
    background: transparent !important;
    border: 1px solid #30d158 !important;
    color: #30d158 !important;
    box-shadow: 0 0 15px rgba(48, 209, 88, 0.2) !important;
}

.eat-action-save.rz-button:hover {
    background: rgba(48, 209, 88, 0.15) !important;
    box-shadow: 0 0 25px rgba(48, 209, 88, 0.35) !important;
}

.eat-action-add.rz-button {
    background: transparent !important;
    border: 1px solid rgba(100, 210, 255, 0.65) !important;
    color: #64d2ff !important;
    box-shadow: 0 0 12px rgba(100, 210, 255, 0.12) !important;
}

.eat-action-add.rz-button:hover {
    background: rgba(100, 210, 255, 0.12) !important;
    border-color: #64d2ff !important;
}

.eat-action-secondary.rz-button {
    background: transparent !important;
    border: 1px solid rgba(100, 210, 255, 0.38) !important;
    color: rgba(180, 230, 255, 0.82) !important;
    box-shadow: none !important;
}

.eat-action-secondary.rz-button:hover {
    background: rgba(100, 210, 255, 0.08) !important;
    border-color: rgba(100, 210, 255, 0.7) !important;
    color: #d8f4ff !important;
}

.eat-action-test.rz-button {
    background: transparent !important;
    border: 1px solid rgba(255, 159, 10, 0.7) !important;
    color: #ffb340 !important;
    box-shadow: 0 0 12px rgba(255, 159, 10, 0.12) !important;
}

.eat-action-test.rz-button:hover {
    background: rgba(255, 159, 10, 0.12) !important;
    border-color: #ff9f0a !important;
}

.eat-action-muted.rz-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
}

.eat-action-muted.rz-button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.eat-action-danger.rz-button {
    background: transparent !important;
    border: 1px solid #ff453a !important;
    color: #ff6b62 !important;
    box-shadow: none !important;
}

.eat-action-danger.rz-button:hover {
    background: rgba(255, 69, 58, 0.15) !important;
    color: #ff8a83 !important;
}
