/**
 * Office (admin) arayüzü bileşenleri — tokens.css + app.css üzerine.
 * Kontrast kuralı: koyu zemin → --color-text-on-dark*, açık zemin → on-light*.
 */

@layer components {
    /* ---- Header ---- */
    .office-header {
        background: var(--color-primary-900);
        position: sticky;
        top: 0;
        z-index: var(--z-header);
        box-shadow: var(--shadow-sm);
    }

    .office-header__inner {
        max-width: 90rem;
        margin-inline: auto;
        padding-inline: var(--space-4);
        min-height: 3.5rem;
        display: flex;
        align-items: center;
        gap: var(--space-6);
    }

    .office-nav {
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .office-nav a {
        color: var(--color-text-on-dark-muted); /* koyu zemin → açık metin */
        text-decoration: none;
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-medium);
        padding-block: var(--space-2);
    }

    .office-nav a:hover {
        color: var(--color-text-on-dark);
    }

    .office-header__account {
        margin-inline-start: auto;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .office-header__email {
        color: var(--color-text-on-dark-muted);
        font-size: var(--font-size-100);
    }

    .office-header__logout {
        display: inline;
    }

    .office-main {
        padding-block: var(--space-6);
        background: var(--color-neutral-050);
        flex: 1;
    }

    .office-container {
        max-width: 90rem;
        margin-inline: auto;
        padding-inline: var(--space-4);
    }

    .page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        margin-block-end: var(--space-5);
        flex-wrap: wrap;
    }

    .page-title {
        font-size: var(--font-size-500);
        color: var(--color-primary-900); /* açık zemin → koyu metin */
        margin-block-end: var(--space-4);
    }

    .page-head .page-title {
        margin-block-end: 0;
    }

    /* ---- Panel & stat ---- */
    .panel {
        background: var(--color-white);
        border: 1px solid var(--color-neutral-100);
        border-radius: var(--radius-md);
        padding: var(--space-5);
        margin-block-end: var(--space-5);
        overflow-x: auto;
    }

    .panel--narrow {
        max-width: 34rem;
    }

    .panel__title {
        font-size: var(--font-size-400);
        margin-block-end: var(--space-4);
    }

    .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        gap: var(--space-4);
        margin-block-end: var(--space-5);
    }

    .stat-card {
        background: var(--color-white);
        border: 1px solid var(--color-neutral-100);
        border-radius: var(--radius-md);
        padding: var(--space-5);
    }

    .stat-card__value {
        font-size: var(--font-size-600);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary-800);
    }

    .stat-card__label {
        color: var(--color-text-on-light-muted);
        font-size: var(--font-size-200);
    }

    /* ---- Tablo ---- */
    .table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--font-size-200);
    }

    .table th {
        text-align: left;
        color: var(--color-text-on-light-muted);
        font-weight: var(--font-weight-medium);
        border-block-end: 2px solid var(--color-neutral-100);
        padding: var(--space-2) var(--space-3);
        white-space: nowrap;
    }

    .table td {
        border-block-end: 1px solid var(--color-neutral-100);
        padding: var(--space-3);
        vertical-align: top;
        color: var(--color-text-on-light);
    }

    .table__actions {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .inline-form {
        display: inline;
    }

    .summary-json {
        font-size: var(--font-size-100);
        word-break: break-all;
    }

    /* ---- Butonlar ---- */
    .btn {
        display: inline-block;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
        cursor: pointer;
        line-height: var(--line-height-base);
    }

    .btn--primary {
        background: var(--color-primary-700);
        color: var(--color-text-on-dark); /* koyu buton → açık metin */
    }

    .btn--primary:hover {
        background: var(--color-primary-800);
        color: var(--color-text-on-dark);
    }

    .btn--ghost {
        background: transparent;
        color: var(--color-primary-700); /* açık zemin üstünde koyu metin */
        border-color: var(--color-neutral-300);
    }

    .btn--ghost:hover {
        border-color: var(--color-primary-600);
        color: var(--color-primary-800);
    }

    .btn--ghost-dark {
        background: transparent;
        color: var(--color-text-on-dark-muted); /* koyu header üstünde açık metin */
        border-color: var(--color-primary-600);
    }

    .btn--ghost-dark:hover {
        color: var(--color-text-on-dark);
        border-color: var(--color-primary-500);
    }

    .btn--danger {
        background: transparent;
        color: var(--color-danger);
        border-color: var(--color-danger);
    }

    .btn--danger:hover {
        background: var(--color-danger);
        color: var(--color-white);
    }

    .btn--sm {
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-100);
    }

    .btn--block {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ---- Form ---- */
    .form-field {
        margin-block-end: var(--space-4);
        border: 0;
        padding: 0;
    }

    .form-field label,
    .form-field legend {
        display: block;
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-light);
        margin-block-end: var(--space-2);
    }

    .form-field input[type="text"],
    .form-field input[type="email"],
    .form-field input[type="password"],
    .filter-bar select {
        width: 100%;
        max-width: 28rem;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-sm);
        background: var(--color-white);
        color: var(--color-text-on-light); /* açık zemin → koyu metin */
        font-size: var(--font-size-300);
    }

    .form-field input:focus-visible,
    .filter-bar select:focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 1px;
        border-color: var(--color-primary-600);
    }

    .checkbox {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-200);
        color: var(--color-text-on-light);
        padding-block: var(--space-1);
    }

    .form-hint {
        color: var(--color-text-on-light-muted);
        font-size: var(--font-size-100);
        margin-block-end: var(--space-4);
    }

    .filter-bar {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-block-end: var(--space-4);
        flex-wrap: wrap;
    }

    .filter-bar label {
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-medium);
    }

    .filter-bar select {
        width: auto;
    }

    /* ---- Uyarılar / rozetler ---- */
    .alert {
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-4);
        margin-block-end: var(--space-4);
        font-size: var(--font-size-200);
    }

    .alert--error {
        background: #fbeaea;
        color: var(--color-danger); /* açık kırmızı zemin → koyu kırmızı metin */
        border: 1px solid #eac6c6;
    }

    .alert--success {
        background: #e8f3ec;
        color: var(--color-success);
        border: 1px solid #c4dfcf;
    }

    .badge {
        display: inline-block;
        background: var(--color-primary-050);
        color: var(--color-primary-800); /* açık zemin → koyu metin */
        border-radius: var(--radius-sm);
        padding: 0 var(--space-2);
        font-size: var(--font-size-100);
        margin-inline-end: var(--space-1);
        white-space: nowrap;
    }

    .badge--active {
        background: #e8f3ec;
        color: var(--color-success);
    }

    .badge--disabled,
    .badge--locked {
        background: #fbeaea;
        color: var(--color-danger);
    }

    .pagination {
        display: flex;
        gap: var(--space-4);
        align-items: center;
        margin-block-start: var(--space-4);
        font-size: var(--font-size-200);
    }

    .text-muted {
        color: var(--color-text-on-light-muted);
    }

    .password-reveal {
        background: var(--color-neutral-050);
        border: 1px dashed var(--color-neutral-300);
        border-radius: var(--radius-sm);
        padding: var(--space-4);
        font-size: var(--font-size-400);
        text-align: center;
        user-select: all;
    }

    /* ---- Login sayfası ---- */
    .office-auth {
        min-height: 100dvh;
        display: grid;
        place-items: center;
        background: linear-gradient(160deg, var(--color-primary-900), var(--color-primary-700));
        font-family: var(--font-sans);
        margin: 0;
    }

    .office-auth__wrap {
        width: min(24rem, calc(100vw - 2 * var(--space-4)));
    }

    .auth-card {
        background: var(--color-white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: var(--space-6);
    }

    .auth-card__brand {
        color: var(--color-text-on-light-muted); /* beyaz kart → koyu metin */
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-bold);
        margin-block-end: var(--space-2);
    }

    .auth-card__brand span {
        color: var(--color-accent-600);
    }

    .auth-card__title {
        font-size: var(--font-size-500);
        color: var(--color-primary-900);
        margin-block-end: var(--space-4);
    }
}