/* Shared minimal styling for the auth pages — kept self-contained so the existing
   layout/design system doesn't need to know about them. */
.v-auth-card {
    max-width: 420px;
    margin: 5rem auto;
    padding: var(--space-6);
    /* TASARIM SISTEMINE HIZALANDI (2026-09-19). Sapmalar olculdu:
         yaricap 14px sabit  -> --card-radius (uc temada da ayni olcek)
         zemin --surface-container = SAYFA ZEMININ TONU; "No-Line" kuralinda
           ayrimi duzlem kaymasi tasir, iki yuzey esitse kart GORUNMEZ olur
           -> --surface-container-lowest (kanonik .section-card ile ayni)
         DURAGAN golge -> DESIGN.md golgeyi yalniz :hover / modal icin kabul
           eder; kart tek merkezi yuzey oldugu icin ambient golge KALIYOR ama
           token uzerinden (--shadow-ambient), ham rgba ile degil. */
    border-radius: var(--card-radius);
    /* --surface-elevated ve --text-muted HİÇBİR TEMADA TANIMLI DEĞİL
       (ölçüldü 2026-09-10: 0/3 tema). Yedek değerler her zaman devreye
       giriyordu, yani auth sayfaları temayı HİÇ izlemiyordu: dark temada
       beyaz kart, üstünde --on-surface açık gri metin = 1.29, okunmuyor.
       Tanımlı token'lara bağlandı: kart zemininde --on-surface 11.82 /
       17.10 / 13.99, sönük metin --on-surface-variant 8.92 / 7.97 / 9.62. */
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    box-shadow: var(--shadow-ambient);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
}
.v-auth-card h1 { margin: 0 0 var(--space-5); font-size: var(--font-size-3xl); font-family: var(--font-headline); }
.v-auth-card .field { margin-bottom: 0.9rem; }
.v-auth-card label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--on-surface-variant); }
/* Girdi kanonik `.vtextfield` olculerini izler: 44px hedef (WCAG 2.5.5),
   token yaricap, ve kenarlik yerine hayalet cerceve — girdi KART
   DUZLEMINDE kalir, kuyu tonuna gomulmez. */
.v-auth-card input,
.v-auth-card .field input,
.v-auth-card input[type=text],
.v-auth-card input[type=email],
.v-auth-card input[type=password] {
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    border: none;
    box-shadow: inset 0 0 0 1px var(--ghost-border);
    background: transparent;
    color: var(--on-surface);
    border-radius: var(--input-radius);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    box-sizing: border-box;
    transition: box-shadow var(--transition-btn), background var(--transition-btn);
}
.v-auth-card input:focus-visible {
    outline: none;
    background: var(--surface-container-high);
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--surface),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}
.v-auth-card button {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem var(--space-4);
    border: 0;
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--font-size-md);
    letter-spacing: 0.02em;
    margin-top: var(--space-2);
    transition: background var(--transition-btn), box-shadow var(--transition-btn);
}
.v-auth-card button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--surface),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}
.v-auth-card button.primary { background: var(--primary); color: var(--on-primary); }
.v-auth-card button.primary:disabled { opacity: 0.6; cursor: not-allowed; }
/* Ham `#111827` / `#fff` KALDIRILDI: temadan bagimsizdi. Ikincil eylem
   kanonik `--surface-container-highest` uzerinde duruyor. */
.v-auth-card button.passkey {
    background: var(--surface-container-highest);
    color: var(--on-surface);
    box-shadow: inset 0 0 0 1px var(--ghost-border);
}
.v-auth-card .divider { text-align: center; margin: 1.25rem 0; color: var(--on-surface-variant); position: relative; }
.v-auth-card .divider::before,
.v-auth-card .divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--outline-variant); }
.v-auth-card .divider::before { left: 0; }
.v-auth-card .divider::after  { right: 0; }
.v-auth-card .error   { color: var(--state-error-text-on-fill); font-size: 0.85rem; margin: 0.5rem 0; }
.v-auth-card .success { color: var(--state-success-text-on-fill); font-size: 0.85rem; margin: 0.5rem 0; }
.v-auth-card .alt { text-align: center; font-size: 0.85rem; margin-top: 1rem; color: var(--on-surface-variant); }
/* Secret + kopyala yan yana: anahtar uzun, düğme daralmamalı. */
.v-auth-card .totp-secret-row {
    display: flex; align-items: center; gap: var(--space-2);
}
.v-auth-card .totp-secret-row .totp-secret { flex: 1 1 auto; margin: 0; }

.v-auth-card .totp-secret {
    /* Ham `#f3f4f6` KALDIRILDI (2026-09-19): temadan bağımsızdı ve karanlık
       temada açık gri kutu üstüne açık metin bırakıyordu. Kuyu tonu tokeni
       zaten var ve üç temada da çözülüyor. */
    background: var(--surface-container-high);
    color: var(--on-surface);
    padding: 0.6rem; border-radius: var(--btn-radius); font-size: 0.9rem;
    word-break: break-all; user-select: all;
}

/* Admin pages — minimal scaffolding; refined later under design system */
.v-admin-page { max-width: 1200px; margin: 24px auto; padding: 24px; }
.v-admin-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
/* Girdi ve rozet yaricapi TOKEN'dan gelir: sabit piksel uc temada da ayni
   olcegi kacirir ve paket degisince guncellenmez. */
.v-admin-search {
    padding: 0.5rem 0.75rem; min-width: 240px;
    min-height: 44px;
    border-radius: var(--input-radius);
    border: none; box-shadow: inset 0 0 0 1px var(--ghost-border);
    background: transparent; color: inherit;
}
.v-admin-meta { color: var(--on-surface-variant); font-size: 13px; margin-bottom: 8px; }
.v-admin-toolbar { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.v-admin-table { width: 100%; border-collapse: collapse; }
.v-admin-table th, .v-admin-table td { text-align: left; padding: var(--space-2) 12px; border-bottom: 1px solid var(--ghost-border); }
.v-admin-table tr.v-row-fail { background: rgba(var(--state-error-rgb), 0.06); }
.v-admin-dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 16px 0; }
.v-admin-dl dt { color: var(--on-surface-variant); }
.v-role { padding: 2px 8px; border-radius: var(--chip-radius); font-size: var(--font-size-sm); background: rgba(var(--primary-rgb), 0.15); }
.v-role-admin, .v-role-owner { background: rgba(var(--secondary-rgb), 0.2); }
.v-status { padding: 2px 8px; border-radius: var(--chip-radius); font-size: var(--font-size-sm); }
.v-status-active { background: rgba(var(--state-success-rgb), 0.15); }
.v-status-locked { background: rgba(var(--state-error-rgb), 0.15); }
.v-link { color: var(--primary); margin-right: 12px; text-decoration: none; }
.v-link:hover { text-decoration: underline; }
.v-danger { background: rgba(var(--state-error-rgb), 0.15); color: var(--state-error-text-on-fill); }
.v-auth-info { color: var(--primary); margin-top: 12px; }