/* =========================================================
   DANAKU 8.1 — UX STABILIZATION LAYER
   Shared interaction, focus, hitbox and widescreen polish.
========================================================= */

:root {
    --dk-control-height: 44px;
    --dk-control-radius: 12px;
    --dk-control-focus: 0 0 0 3px rgba(245,197,74,.09);
}

html,
body {
    overflow-x: clip;
}

button,
a,
input,
select,
textarea,
[role="button"],
[role="combobox"] {
    -webkit-tap-highlight-color: transparent;
}

button,
a[href],
[role="button"],
[role="combobox"],
.dk-select-trigger,
.sidebar-action,
.settings-tab,
.goal-card,
.wallet-card {
    cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea {
    cursor: text;
}

input[type="date"],
input[type="color"],
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
}

:where(button, a[href], input, textarea, select, [role="button"], [role="combobox"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--dk-gold) 72%, transparent);
    outline-offset: 2px;
}

:where(.detail-input, .goal-field input, .wallet-field input, .settings-field input):focus-visible,
.dk-select-trigger:focus-visible {
    outline: 0;
    box-shadow: var(--dk-control-focus);
}

.detail-field,
.goal-field,
.wallet-field,
.settings-field,
.goal-allocation-form label {
    cursor: default;
}

.detail-field > span,
.goal-field > span,
.wallet-field > span,
.settings-field > span,
.detail-field > small,
.goal-field > small,
.wallet-field > small,
.settings-field > small {
    cursor: default;
    user-select: none;
}

.detail-input,
.goal-field input,
.goal-field select,
.wallet-field input,
.wallet-field select,
.settings-field input,
.dk-select-trigger {
    min-height: var(--dk-control-height);
    box-sizing: border-box;
    border-radius: var(--dk-control-radius);
}

.dk-select-shell.is-full,
.detail-field > .dk-select-shell,
.goal-field > .dk-select-shell,
.wallet-field > .dk-select-shell,
.settings-field > .dk-select-shell {
    width: 100%;
    min-width: 0;
    display: flex;
}

.dk-select-shell.is-full > .dk-select-trigger,
.detail-field > .dk-select-shell > .dk-select-trigger,
.goal-field > .dk-select-shell > .dk-select-trigger,
.wallet-field > .dk-select-shell > .dk-select-trigger,
.settings-field > .dk-select-shell > .dk-select-trigger {
    width: 100%;
    min-width: 0;
}

.dk-select-value,
.wallet-card strong,
.goal-card-name strong,
.detail-item-info strong {
    min-width: 0;
}

/* Keep button labels stable while asynchronous actions run. */
:where(.save-button, .wallet-primary-button, .goal-primary-button, .primary-settings-button, .funding-form-primary, .funding-transfer-submit) {
    white-space: nowrap;
    min-width: max-content;
}

/* Modals must preserve safe breathing room on every desktop height. */
:where(.goal-editor-card, .wallet-editor-card, .wallet-manager-card, .funding-modal, .account-modal-card, .report-modal-card) {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* 2K / 100% scaling baseline: use the extra canvas without making text tiny. */
@media (min-width: 2200px) and (min-height: 1200px) {
    :root {
        --dk-readable-xs: 11px;
        --dk-readable-sm: 12px;
        --dk-readable-md: 13px;
    }

    .wallets-canvas,
    .detail-canvas {
        width: min(100%, 1980px);
        padding-left: 34px;
        padding-right: 34px;
    }

    .goals-canvas,
    .goal-detail-canvas {
        width: min(100%, 1840px);
        padding-left: 34px;
        padding-right: 34px;
    }

    .profile-settings-canvas {
        width: min(1240px, 100%);
    }

    .settings-card,
    .goals-panel,
    .goal-detail-panel,
    .wallets-panel,
    .detail-transactions,
    .transaction-form-panel {
        border-radius: 21px;
    }
}

/* 1080p desktop stays compact enough to avoid unnecessary scrolling. */
@media (min-width: 1200px) and (max-height: 900px) {
    .goal-editor-card,
    .wallet-editor-card,
    .wallet-manager-card {
        max-height: calc(100vh - 24px);
    }

    .goal-modal-overlay,
    .wallet-modal-overlay,
    .funding-overlay {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (max-width: 720px) {
    :root {
        --dk-control-height: 46px;
    }

    :where(.save-button, .wallet-primary-button, .goal-primary-button, .primary-settings-button, .funding-form-primary, .funding-transfer-submit) {
        min-width: 0;
        width: 100%;
    }
}