/* ═══════════════════════════════
   BUTTONS
   KMK Munai Design System
   Red / White / Black
   ═══════════════════════════════ */

/* ── Primary: red — main submit action ── */
.btn_submit {
    display: flex;
    height: 48px;
    padding: 0 var(--space-lg, 24px);
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
    color: var(--color-brand-white, #fff);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-md, 15px);
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--radius-control, 12px);
    border: none;
    background: var(--color-brand-red, #CC2020);
    box-shadow: 0 2px 8px rgba(204, 32, 32, 0.3);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    margin-top: 8px;
    margin-bottom: 8px;
}

.btn_submit:hover   { background: var(--color-brand-red-dark, #A81818); box-shadow: var(--shadow-cta-hover); }
.btn_submit:active  { transform: scale(0.98); }
.btn_submit:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18)); }

/* ── Segmented control — Все / Мои / Принятые, wraps the filter
   buttons in a single track instead of separate floating buttons ── */
.segmented {
    display: inline-flex;
    width: 100%;
    padding: 4px;
    gap: 2px;
    background: var(--color-surface-page, #FAFAFA);
    border: 1px solid var(--color-border, #E4E4E7);
    border-radius: var(--radius-full, 999px);
}

.task_but,
.history_but,
.dark_blue_btn,
.to_read_notification_btn {
    flex: 1;
    height: 36px;
    padding: 0 var(--space-sm, 8px);
    border-radius: var(--radius-full, 999px);
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #52525B);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s), box-shadow var(--dur-fast, 0.15s);
}

.task_but:hover,
.history_but:hover,
.dark_blue_btn:hover,
.to_read_notification_btn:hover {
    color: var(--color-text-primary, #18181B);
}

.task_but:active,
.history_but:active,
.dark_blue_btn:active,
.to_read_notification_btn:active,
.to_accept_task_btn:active,
.to_execute_task_btn:active,
.btn_action:active,
.edit-btn:active {
    transform: scale(0.96);
}

.task_but:focus-visible,
.history_but:focus-visible,
.dark_blue_btn:focus-visible,
.to_read_notification_btn:focus-visible,
.to_accept_task_btn:focus-visible,
.to_execute_task_btn:focus-visible,
.btn_action:focus-visible,
.edit-btn:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18));
}

/* Active segment reads as a raised "thumb" within the track, not a
   solid-fill button — the standard segmented-control convention. */
.task_but.selected,
.task_but.active,
.history_but.active,
.dark_blue_btn.selected,
.dark_blue_btn.active {
    background: var(--color-surface-card, #fff);
    color: var(--color-text-primary, #18181B);
    font-weight: var(--fw-semibold, 600);
    box-shadow: var(--shadow-card);
}

/* ── Accept task: outline black ── */
.to_accept_task_btn {
    height: 38px;
    padding: 0 var(--space-md, 16px);
    border-radius: var(--radius-small, 8px);
    border: 1.5px solid var(--color-brand-black, #111);
    background: var(--color-brand-white, #fff);
    color: var(--color-brand-black, #111);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
}

.to_accept_task_btn:hover {
    background: var(--color-brand-black, #111);
    color: var(--color-brand-white, #fff);
}

/* ── Execute task: red filled ── */
.to_execute_task_btn {
    height: 38px;
    padding: 0 var(--space-md, 16px);
    border-radius: var(--radius-small, 8px);
    border: none;
    background: var(--color-brand-red, #CC2020);
    color: var(--color-brand-white, #fff);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
}

.to_execute_task_btn:hover { background: var(--color-brand-red-dark, #A81818); }

/* ── Quick action chips (ПРС, Замер, etc.) ──
   Each tap inserts a canned phrase into the note — there's no
   persistent "selected" state to track, so the closest honest
   equivalent of an "active" chip state is the tap/press moment
   itself: a light-red fill + red text confirms the insert. */
.button-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 8px);
    width: 100%;
}

.btn_action {
    height: 36px;
    padding: 0 var(--space-12, 12px);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    font-size: var(--font-size-xs, 12px);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-weight: var(--fw-medium, 500);
    color: var(--color-text-primary, #18181B);
    background: var(--color-surface-card, #fff);
    border: 1px solid var(--color-border, #E4E4E7);
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: background var(--dur-fast, 0.15s), border-color var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
    flex-grow: 0;
}

.btn_action:hover {
    background: var(--color-gray-100, #F4F4F5);
    border-color: var(--color-border-strong, #D4D4D8);
}

.btn_action:active {
    background: var(--color-brand-red-light, #FFF0F0);
    border-color: var(--color-brand-red-light, #FFF0F0);
    color: var(--color-brand-red, #CC2020);
}

/* ── Edit button (history cards) ── */
.edit-btn {
    height: 34px;
    padding: 0 var(--space-md, 16px);
    border-radius: var(--radius-small, 8px);
    border: 1.5px solid var(--color-border, #E2E2E2);
    background: var(--color-brand-white, #fff);
    color: var(--color-text-secondary, #777);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast, 0.15s), border-color var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
}

.edit-btn:hover {
    border-color: var(--color-brand-black, #111);
    color: var(--color-brand-black, #111);
}

/* ── Delete button ── */
.delete-btn {
    background: var(--color-brand-red-light, #FFF0F0);
    border-color: var(--color-brand-red, #CC2020);
    color: var(--color-brand-red, #CC2020);
}

.delete-btn:hover {
    background: var(--color-brand-red, #CC2020);
    color: var(--color-brand-white, #fff);
}

/* ── History action button frame ── */
.history_btn_frame {
    text-align: center;
}

/* ── Pagination ── */
.task_btn,
.history_btn {
    background: transparent;
    border: none;
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-md, 15px);
    font-weight: 600;
    color: var(--color-text-secondary, #777);
    cursor: pointer;
    padding: 8px 8px;
    border-radius: var(--radius-xs, 6px);
    transition: color var(--dur-fast, 0.15s), opacity var(--dur-fast, 0.15s);
}

.task_btn:hover,
.history_btn:hover {
    color: var(--color-brand-black, #111);
}

.task_btn:active,
.history_btn:active {
    opacity: 0.6;
}

.task_btn:focus-visible,
.history_btn:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18));
}