/* ============================================================
   Khối tròn xoay — @dohoangtumath
   Chỉ chứa phần riêng của công cụ này.
   Nút, ô nhập, thanh trượt, công tắc… lấy từ components.css.
   ============================================================ */

@import url('../../shared/components.css');

/* ── Khối điều khiển ─────────────────────────────────────── */
.panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.panel__row .panel__title { margin: 0; }

.slider-row__label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* ── Cận tích phân ───────────────────────────────────────── */
.bounds-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
    gap: var(--sp-3);
}

/* ── Bảng chọn màu ───────────────────────────────────────── */
.color-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* ── Danh sách hàm (do app.js sinh ra) ───────────────────── */
.func-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.func-list:empty { display: none; }

.func-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
}

.func-item-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

/* Hàng trên: ô màu — ô nhập hàm — nút xoá */
.func-item-row.top-row > .color-pickers { flex: none; padding-top: 0; }

.func-item .input-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1;
    min-width: 0;
}

/* Ô nhập trong danh sách hàm không có nhãn riêng — thừa hưởng .input */
.func-item input[type="text"] {
    min-height: 44px;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-data);
    font-size: var(--step--1);
    color: var(--text);
    background: var(--surface-raised);
    border: var(--rule-width) solid var(--border-control);
    border-radius: var(--radius-sm);
}

.func-item input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
    outline: none;
}

.func-item input[type="color"] {
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 3px;
    background: var(--surface-raised);
    border: var(--rule-width) solid var(--border-control);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.func-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.func-item input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

.latex-mini {
    min-height: 1.2em;
    padding-inline: var(--sp-1);
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow-x: auto;
}

.latex-mini:empty { display: none; }

.btn-remove {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: transparent;
    border: var(--rule-width) solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}

.btn-remove:hover {
    color: var(--danger);
    background: var(--danger-wash);
}

/* Hàng dưới: khoảng xác định */
.func-item-row.range-row {
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--step--1);
    color: var(--text-muted);
}

.func-item-row.range-row input {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--step-0);
}

/* ±∞ là giá trị mặc định có ý nghĩa, không phải gợi ý mờ nhạt.
   Font đều vẽ ký hiệu vô cực quá mảnh nên đổi sang font chữ thường,
   phóng to và bỏ độ mờ mặc định của trình duyệt. */
.func-item-row.range-row input::placeholder {
    font-family: var(--font-body);
    font-size: 1.15em;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 1;
}

/* Ô nhập báo sai — app.js gắn class .error */
.func-item input.error,
.input.error {
    border-color: var(--danger);
    background: var(--danger-wash);
}

/* ── Kết quả: đáp số ký hiệu nằm trên, số thập phân nằm dưới ─ */
.readout__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.readout__exact {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    font-style: italic;
    color: var(--accent);
    line-height: 1.2;
}

/* Có đáp số chính xác rồi thì số thập phân lùi xuống hàng phụ */
.readout__stack:has(.readout__exact:not([hidden])) .readout__value {
    font-size: var(--step--1);
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Hộp báo lỗi ─────────────────────────────────────────── */
.error-overlay {
    position: absolute;
    top: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: min(28rem, calc(100% - var(--sp-8)));
}

.error-overlay .error-content {
    box-shadow: var(--shadow-lift);
}

/* Icon và tiêu đề màu cảnh báo — đây là tín hiệu, không cần thêm dải màu */
.error-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--danger);
}

.error-head svg { flex: none; }

.error-overlay #error-message {
    margin: 0;
    font-size: var(--step--1);
    color: var(--text);
}

/* ── Màn hẹp ─────────────────────────────────────────────── */
@media (max-width: 60rem) {
    .bounds-row { grid-template-columns: auto 1fr; }
}