/**
 * View Shell — buttons extension.
 *
 * MDB ships its own button palette and typography: --mdb-secondary is #b23cfd
 * (magenta) and every .btn is uppercase. Neither belongs to this design system —
 * design.md documents exactly two palettes (legacy #007bff, confined to the
 * .action-widget surface, and the modern #2563eb view-shell family) and sentence
 * case for every label except table headers and .stat .label.
 *
 * This file brings the shared button classes back in line, so pages keep using
 * `btn btn-primary btn-sm` / `btn btn-outline-secondary btn-sm` without inventing
 * per-feature button classes.
 *
 * Scope: .view-shell plus .view-shell-modal — a Bootstrap/MDB modal belonging to
 * a view-shell page. Such modals must be rendered OUTSIDE .view-shell (see
 * view-shell-modal.css, which overrides .view-shell .modal to position: relative),
 * so they need their own hook to inherit the same button look.
 *
 * Only global --mdm-* tokens are used: the --c-* set is scoped to .view-shell and
 * would not resolve inside a modal. The values are the documented equivalents.
 *
 * Legacy screens outside both scopes are left untouched. The .action-widget
 * surface keeps its documented legacy palette on its own classes and never uses
 * the shared .btn classes, so it is unaffected.
 */

/* Sentence case — the labels are written in sentence case, so stop shouting. */
.view-shell .btn,
.view-shell-modal .btn {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

/* Secondary action — neutral outline from the greys, not MDB magenta. */
.view-shell .btn-outline-secondary,
.view-shell-modal .btn-outline-secondary {
    border-color: var(--mdm-border);
    background-color: var(--mdm-surface);
    color: var(--mdm-text-mut);
    box-shadow: none;
}

.view-shell .btn-outline-secondary:hover,
.view-shell .btn-outline-secondary:focus,
.view-shell .btn-outline-secondary:active,
.view-shell-modal .btn-outline-secondary:hover,
.view-shell-modal .btn-outline-secondary:focus,
.view-shell-modal .btn-outline-secondary:active {
    border-color: var(--mdm-gray-300);
    /* Hover darkens the surface ~10-15%; no opacity tricks. */
    background-color: var(--mdm-gray-150);
    color: var(--mdm-text);
    box-shadow: none;
}

.view-shell .btn-outline-secondary:focus-visible,
.view-shell-modal .btn-outline-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mdm-accent-ring);
}

.view-shell .btn-outline-secondary:disabled,
.view-shell .btn-outline-secondary.disabled,
.view-shell-modal .btn-outline-secondary:disabled,
.view-shell-modal .btn-outline-secondary.disabled {
    border-color: var(--mdm-border);
    background-color: var(--mdm-surface);
    color: var(--mdm-text-soft);
    box-shadow: none;
}

/* The solid variant of the same neutral. Shared modals reached from view-shell
   pages still carry `btn btn-secondary` on their dismiss button, and left to
   MDB that button is magenta. */
.view-shell .btn-secondary,
.view-shell-modal .btn-secondary {
    border-color: var(--mdm-border);
    background-color: var(--mdm-gray-150);
    color: var(--mdm-text-mut);
    box-shadow: none;
}

.view-shell .btn-secondary:hover,
.view-shell .btn-secondary:focus,
.view-shell .btn-secondary:active,
.view-shell-modal .btn-secondary:hover,
.view-shell-modal .btn-secondary:focus,
.view-shell-modal .btn-secondary:active {
    border-color: var(--mdm-gray-300);
    background-color: var(--mdm-gray-200);
    color: var(--mdm-text);
    box-shadow: none;
}

.view-shell .btn-secondary:focus-visible,
.view-shell-modal .btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mdm-accent-ring);
}

/* Primary action — the view-shell accent, flat, no MDB drop shadow. */
.view-shell .btn-primary,
.view-shell-modal .btn-primary {
    background-color: var(--mdm-accent);
    border-color: var(--mdm-accent);
    box-shadow: none;
}

.view-shell .btn-primary:hover,
.view-shell .btn-primary:focus,
.view-shell .btn-primary:active,
.view-shell-modal .btn-primary:hover,
.view-shell-modal .btn-primary:focus,
.view-shell-modal .btn-primary:active {
    background-color: var(--mdm-accent-text);
    border-color: var(--mdm-accent-text);
    box-shadow: none;
}

.view-shell .btn-primary:focus-visible,
.view-shell-modal .btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mdm-accent-ring);
}

/* Primary action of the same weight as another one next to it — the two
   buttons attaching a sale and a handover document belong together, so the
   second one keeps the accent and drops the fill. */
.view-shell .btn-outline-primary,
.view-shell-modal .btn-outline-primary {
    border-color: var(--mdm-accent);
    background-color: var(--mdm-surface);
    color: var(--mdm-accent-text);
    box-shadow: none;
}

.view-shell .btn-outline-primary:hover,
.view-shell .btn-outline-primary:focus,
.view-shell .btn-outline-primary:active,
.view-shell-modal .btn-outline-primary:hover,
.view-shell-modal .btn-outline-primary:focus,
.view-shell-modal .btn-outline-primary:active {
    border-color: var(--mdm-accent-text);
    background-color: var(--mdm-primary-soft-2);
    color: var(--mdm-accent-text);
    box-shadow: none;
}

.view-shell .btn-outline-primary:focus-visible,
.view-shell-modal .btn-outline-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mdm-accent-ring);
}

/* Positive / destructive action — an action whose outcome is the point of the
   button (winning a deal, losing it) says so with its fill instead of hiding
   behind the accent. Both use the modern view-shell greens and reds, darkening
   on hover like every other button here. */
.view-shell .btn-success,
.view-shell-modal .btn-success {
    background-color: var(--mdm-success-2);
    border-color: var(--mdm-success-2);
    box-shadow: none;
}

.view-shell .btn-success:hover,
.view-shell .btn-success:focus,
.view-shell .btn-success:active,
.view-shell-modal .btn-success:hover,
.view-shell-modal .btn-success:focus,
.view-shell-modal .btn-success:active {
    background-color: var(--mdm-success-2-text);
    border-color: var(--mdm-success-2-text);
    box-shadow: none;
}

.view-shell .btn-danger,
.view-shell-modal .btn-danger {
    background-color: var(--mdm-danger-2);
    border-color: var(--mdm-danger-2);
    box-shadow: none;
}

.view-shell .btn-danger:hover,
.view-shell .btn-danger:focus,
.view-shell .btn-danger:active,
.view-shell-modal .btn-danger:hover,
.view-shell-modal .btn-danger:focus,
.view-shell-modal .btn-danger:active {
    background-color: var(--mdm-danger-2-text);
    border-color: var(--mdm-danger-2-text);
    box-shadow: none;
}

/* Warning action — approving a document with signatures still missing is a
   deliberate exception, so it must not look like an ordinary secondary action. */
.view-shell .btn-outline-warning,
.view-shell-modal .btn-outline-warning {
    border-color: var(--mdm-warning-2);
    background-color: var(--mdm-surface);
    color: var(--mdm-warning-text-3);
    box-shadow: none;
}

.view-shell .btn-outline-warning:hover,
.view-shell .btn-outline-warning:focus,
.view-shell .btn-outline-warning:active,
.view-shell-modal .btn-outline-warning:hover,
.view-shell-modal .btn-outline-warning:focus,
.view-shell-modal .btn-outline-warning:active {
    border-color: var(--mdm-warning-2);
    background-color: var(--mdm-warning-bg-2);
    color: var(--mdm-warning-text-2);
    box-shadow: none;
}

/* Danger action — destructive, and here it also resets other people's work. */
.view-shell .btn-outline-danger,
.view-shell-modal .btn-outline-danger {
    border-color: var(--mdm-danger-2);
    background-color: var(--mdm-surface);
    color: var(--mdm-danger-2-text);
    box-shadow: none;
}

.view-shell .btn-outline-danger:hover,
.view-shell .btn-outline-danger:focus,
.view-shell .btn-outline-danger:active,
.view-shell-modal .btn-outline-danger:hover,
.view-shell-modal .btn-outline-danger:focus,
.view-shell-modal .btn-outline-danger:active {
    border-color: var(--mdm-danger-2);
    background-color: var(--mdm-danger-2-bg);
    color: var(--mdm-danger-2-text);
    box-shadow: none;
}

/* Square icon-only action button inside a dialog — the .icon-btn view-shell
   primitive is scoped to .view-shell (view-shell.css), so a Bootstrap/MDB
   modal rendered outside it (the car sale brokerage prompt) needs the same
   look restored here, next to every other primitive this file brings back. */
.view-shell-modal .icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mdm-radius-md);
    background: transparent;
    border: 1px solid var(--mdm-border);
    color: var(--mdm-text-mut);
    cursor: pointer;
}

.view-shell-modal .icon-btn:hover {
    background: var(--mdm-gray-150);
}

.view-shell-modal .icon-btn.danger:hover {
    background: var(--mdm-danger-2-bg);
    color: var(--mdm-danger-2);
}