/* Central controls and forms: legacy class names are intentionally retained. */
/* ---------- Butonlar ---------- */
.chrome-btn-primary,
.chrome-btn-accent,
.chrome-btn-outline,
.chrome-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-component-title);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard),
                opacity var(--motion-fast) var(--ease-standard);
    user-select: none;
}
.chrome-btn-primary:active,
.chrome-btn-accent:active,
.chrome-btn-outline:active { transform: translateY(1px); }

.chrome-btn-primary, .chrome-btn-accent {
    background: var(--action-primary);
    color: var(--action-primary-text);
    border: 1px solid transparent;
}
.chrome-btn-primary:hover, .chrome-btn-accent:hover { opacity: 0.92; }
.chrome-btn-primary:disabled, .chrome-btn-accent:disabled { opacity: 0.5; }

.chrome-btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}
.chrome-btn-outline:hover { background: var(--bg-hover); border-color: var(--text-disabled); }
.chrome-btn-outline:disabled { color: var(--text-disabled); }

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--fs-secondary);
    font-weight: 500;
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn-refresh:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-refresh .spin { animation: spin 900ms linear infinite; }

.icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.icon-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-action-btn.small { width: 32px; height: 32px; }

/* Sosyal giriş */
.chrome-social-btn {
    height: var(--control-height-lg);
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-weight: 500;
}
.chrome-social-btn:hover { background: var(--bg-hover); }
.chrome-social-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Girdiler ---------- */
.input-field { position: relative; }

.input-field input,
.form-group-field input,
.form-group-field select,
.form-group-field textarea {
    width: 100%;
    min-height: var(--input-height);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-app);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--fs-body);
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.form-group-field textarea { min-height: 84px; resize: vertical; line-height: var(--lh-normal); }

.input-field input:focus,
.form-group-field input:focus,
.form-group-field select:focus,
.form-group-field textarea:focus {
    outline: none;
    border-color: var(--border-strong);
    background: var(--bg-elevated);
    box-shadow: var(--focus-ring);
}

.input-field input::placeholder,
.form-group-field input::placeholder,
.form-group-field textarea::placeholder { color: var(--text-disabled); }

.input-field .prefix-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.input-field input { padding-left: 42px; }

.form-group-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.form-group-field > label {
    font-size: var(--fs-metadata);
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.form-input-wrapper > .icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-muted);
    pointer-events: none;
}
.form-input-wrapper input, .form-input-wrapper select { padding-left: 38px; }

/* Arama alanı */
.search-input-field {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--space-3) 0;
}
.search-input-field .icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-muted);
    pointer-events: none;
}
.search-input-field input {
    width: 100%;
    min-height: var(--control-height-lg);
    padding: 0 var(--space-3) 0 38px;
    background: var(--bg-app);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--fs-body);
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.search-input-field input:focus { outline: none; border-color: var(--border-strong); box-shadow: var(--focus-ring); }

/* Chip onay kutuları */
.chips-checkbox-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--fs-metadata);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}


.chip-checkbox:hover { background: var(--bg-hover); color: var(--text-primary); }
.chip-checkbox:has(input:checked) { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); }
.chip-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.chip-checkbox.disabled { opacity: 0.5; pointer-events: none; }

/* Destructive account deletion needs an unmistakable, visible consent box.
   Chip checkboxes intentionally hide their native input; do not use that style here. */
.account-deletion-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    line-height: var(--lh-normal);
    cursor: pointer;
}
.account-deletion-consent input[type="checkbox"] {
    position: static;
    opacity: 1;
    pointer-events: auto;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 2px 0 0;
}
.account-deletion-consent:has(input:checked) {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.account-deletion-consent:has(input:focus-visible) {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}


input[type="checkbox"]{appearance:none;width:16px;height:16px;min-height:16px;padding:0;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-app);flex-shrink:0;display:inline-grid;place-content:center;cursor:pointer}
input[type="checkbox"]:checked{background:var(--action-primary);border-color:var(--action-primary)}
input[type="checkbox"]:checked::after{content:'';width:7px;height:4px;border:solid var(--action-primary-text);border-width:0 0 2px 2px;transform:rotate(-45deg)}
input[type="checkbox"]:focus-visible{box-shadow:var(--focus-ring)}

/* Consistent keyboard, touch, active and disabled states across controls. */
:where(button, a, label, .filter-chip, .chip-checkbox, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
}
:is(.chrome-btn-primary,.chrome-btn-accent,.chrome-btn-outline,.chrome-social-btn,.btn-refresh,.icon-action-btn,.icon-btn,.topbar-select-btn,.filter-chip) {
    transition: background-color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                opacity var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}
:is(.btn-refresh,.icon-action-btn,.icon-btn,.topbar-select-btn,.filter-chip):active:not(:disabled) { transform: translateY(1px); }
:is(.chrome-btn-primary,.chrome-btn-accent,.chrome-btn-outline,.chrome-social-btn,.btn-refresh,.icon-action-btn,.icon-btn,.topbar-select-btn,.filter-chip):focus-visible,
:where(.chip-checkbox,.chat-task-toggle):has(input:focus-visible) { outline: 2px solid var(--action-primary); outline-offset: 3px; }
:is(button,.filter-chip):disabled, :is(button,.filter-chip)[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none; }
:is(.input-field input,.form-group-field input,.form-group-field select,.form-group-field textarea,.search-input-field input):not([type="checkbox"]) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-sans);
}
:where(.form-group-field,.input-field,.search-input-field):has([aria-invalid="true"]) :is(input,textarea,select) {
    border-color: var(--status-error);
}
:where(.form-group-field,.input-field,.search-input-field) [role="alert"] {
    color: var(--status-error); font-size: var(--fs-metadata); line-height: var(--lh-normal);
}
input[type="checkbox"] {
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
input[type="checkbox"]::after {
    content: ''; width: 7px; height: 4px;
    border: solid var(--action-primary-text); border-width: 0 0 2px 2px;
    opacity: 0; transform: rotate(-45deg) scale(.6);
    transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
:where(label):has(> input[type="checkbox"]) { cursor: pointer; }
:where(label):has(> input[type="checkbox"]:disabled) { cursor: not-allowed; opacity: .55; }
:where(input[type="checkbox"][role="switch"]) { width: 32px; border-radius: var(--radius-full); display: inline-flex; align-items: center; padding: 2px; }
:where(input[type="checkbox"][role="switch"])::after {
    border: 0; width: 12px; height: 12px; background: var(--text-primary);
    border-radius: 50%; opacity: 1; transform: translateX(0);
}
:where(input[type="checkbox"][role="switch"]:checked)::after { background: var(--action-primary-text); transform: translateX(14px); }
.button-pending { min-width: var(--control-height); cursor: progress; }
.button-pending:disabled { opacity: .75; }
@media (prefers-reduced-motion: reduce) {
    input[type="checkbox"], input[type="checkbox"]::after { transition: none; }
}

/* Loading, success and failure affordances remain dimensionally stable. */
:where(button).button-pending { cursor: progress; }
:where(button)[data-state="success"] { border-color: var(--status-success); }
:where(button)[data-state="error"] { border-color: var(--status-error); }

input[type="checkbox"][role="switch"]:checked::after {
    transform: translateX(14px); border: 0; background: var(--action-primary-text);
}


/* Extended shared form and action states: applies to all console modules. */
:is(.chrome-btn-primary,.chrome-btn-accent,.chrome-btn-outline,.chrome-social-btn,.btn-refresh,.icon-action-btn,.icon-btn,.menu-item,.dock-btn,.filter-chip) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
:is(.chrome-btn-primary,.chrome-btn-accent,.chrome-btn-outline,.btn-refresh,.icon-action-btn,.icon-btn,.menu-item,.dock-btn,.filter-chip):focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}
:where(.panel-card,.vx-drawer,.vx-modal) :is(input:not([type="checkbox"]),select,textarea) {
    max-width:100%; min-width:0; box-sizing:border-box;
    accent-color:var(--action-primary);
}
:where(.panel-card,.vx-drawer,.vx-modal) :is(input,select,textarea):disabled {
    cursor:not-allowed;
    opacity:.62;
}
:where(.panel-card,.vx-drawer,.vx-modal) :is(input,select,textarea)[aria-invalid="true"] {
    border-color:var(--status-error);
    box-shadow:0 0 0 1px var(--status-error);
}
:where(.panel-card,.vx-drawer,.vx-modal) :is(label,legend) {
    line-height:var(--lh-normal);
}
:is(.chrome-btn-primary,.chrome-btn-accent,.chrome-btn-outline,.btn-refresh,.icon-action-btn,.icon-btn,.menu-item,.dock-btn)[aria-expanded="true"] {
    background:var(--bg-elevated);
    border-color:var(--border-strong);
}
:is(.chrome-btn-primary,.chrome-btn-accent,.chrome-btn-outline,.btn-refresh,.icon-action-btn,.icon-btn,.menu-item,.dock-btn)[aria-busy="true"] {
    cursor:progress;
}
:is(.menu-item,.icon-btn,.icon-action-btn):disabled { pointer-events:none; opacity:.46; transform:none; }
:where(input[type="checkbox"]):disabled { opacity:.45; cursor:not-allowed; }
:where(input[type="checkbox"]):active:not(:disabled) { transform:scale(.92); }
@media (prefers-reduced-motion:reduce) {
    :where(input[type="checkbox"]):active:not(:disabled) { transform:none; }
}

/* Canonical pending icon sweep. Dimensions and icon markup remain unchanged. */
.button-pending svg,.button-pending img,.button-pending [data-icon]{mask-image:linear-gradient(110deg,#0008 35%,#000 50%,#0008 65%);mask-size:250% 100%;animation:iconSweep 820ms ease-in-out infinite}
.button-pending:not(:has(svg,img,[data-icon])){animation:iconSweep 820ms ease-in-out infinite}
@keyframes iconSweep{from{mask-position:150% 0;opacity:.75}50%{opacity:1}to{mask-position:-50% 0;opacity:.75}}
@media(prefers-reduced-motion:reduce){
    .button-pending svg,.button-pending img,.button-pending [data-icon],
    .button-pending:not(:has(svg,img,[data-icon])) { animation:none; }
}

/* Form-state ownership (65–69): search, ordinary inputs, chips, switches,
   pending triggers, and keyboard focus share the same tokens. */
:where(.panel-card,.vx-modal,.vx-drawer,.vx-popover) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,textarea
) {
    min-width:0; max-width:100%; box-sizing:border-box;
    border-radius:var(--radius-sm);
    font-family:var(--font-sans);
}
:where(.panel-card,.vx-modal,.vx-drawer) :is(input,select,textarea)[aria-invalid="true"] {
    border-color:var(--status-error);
}
.chip-checkbox:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.chip-checkbox:has(input:focus-visible) { outline:2px solid var(--action-primary); outline-offset:2px; }
.chip-checkbox:has(input:checked) { border-color:var(--border-strong); background:var(--bg-elevated); }
input[type="checkbox"][role="switch"] {
    width:32px; min-height:18px; padding:2px; border-radius:var(--radius-full);
    display:inline-flex; align-items:center; accent-color:var(--action-primary);
}
input[type="checkbox"][role="switch"]::after {
    content:''; width:12px; height:12px; border:0; border-radius:50%;
    opacity:1; background:var(--text-primary); transform:translateX(0);
    transition:transform var(--motion-fast) var(--ease-standard),
               background-color var(--motion-fast) var(--ease-standard);
}
input[type="checkbox"][role="switch"]:checked::after {
    border:0; opacity:1; background:var(--action-primary-text);
    transform:translateX(14px);
}
:where(button[aria-expanded="true"],button[data-ui-active="true"]) {
    transition:background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
}
:is(button[aria-busy="true"],button[data-state="loading"]) { cursor:progress; }
@media (prefers-reduced-motion:reduce) {
    input[type="checkbox"][role="switch"]::after { transition:none; }
}

/* Team editor — identity-backed multi-select, shared across light/dark modes. */
.stars-selected{display:flex;flex-wrap:wrap;gap:8px;min-height:34px;margin:8px 0}
.stars-person-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 12px;
    border:1px solid var(--border-subtle);background:var(--bg-elevated);
    border-radius:var(--radius-full);color:var(--text-primary);font-size:var(--fs-secondary)}
.stars-person-chip button{width:28px;height:28px;min-height:28px;min-width:28px;
    color:inherit;background:transparent;border:0;border-radius:50%;cursor:pointer;font-size:18px}
.stars-person-chip button:is(:hover,:focus-visible){background:var(--bg-hover)}
.stars-search-results{display:grid;gap:6px;max-height:min(240px,35dvh);overflow:auto;margin-top:8px}
.stars-person-result{display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:8px;min-height:44px;padding:10px 12px;cursor:pointer;
    background:var(--bg-elevated);border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);color:var(--text-primary);text-align:start}
.stars-person-result:is(:hover,:focus-visible){background:var(--bg-hover)}

/* Text-entry focus uses the existing border, with no outer ring or layout shift.
   Keep button, checkbox and switch keyboard indicators independent. */
html body :is(input,select,textarea,[contenteditable="true"]):not(
    [type="checkbox"],[type="radio"],[type="file"],[type="button"],
    [type="submit"],[type="reset"],[type="range"],[type="color"]
) {
    transition: border-color var(--motion-normal) var(--ease-standard),
                background-color var(--motion-normal) var(--ease-standard);
}
html body :is(input,select,textarea,[contenteditable="true"]):not(
    [type="checkbox"],[type="radio"],[type="file"],[type="button"],
    [type="submit"],[type="reset"],[type="range"],[type="color"]
):is(:focus,:focus-visible) {
    outline:none;
    box-shadow:none;
    border-color:var(--border-strong);
    border-color:color-mix(in srgb,var(--text-primary) 28%,transparent);
}
html body :is(input,select,textarea,[contenteditable="true"]):not(
    [type="checkbox"],[type="radio"],[type="file"],[type="button"],
    [type="submit"],[type="reset"],[type="range"],[type="color"]
):is([aria-invalid="true"],.has-error *):is(:focus,:focus-visible) {
    border-color:var(--status-error);
}
@media(prefers-reduced-motion:reduce) {
    html body :is(input,select,textarea,[contenteditable="true"]):not(
        [type="checkbox"],[type="radio"],[type="file"],[type="button"],
        [type="submit"],[type="reset"],[type="range"],[type="color"]
    ) {transition:none;}
}
.stars-person-result small{color:var(--text-secondary);overflow-wrap:anywhere}