/* Uygulamanın sade, mobil öncelikli ortak görünüm kuralları. */

:root {
    --color-bg: #f3f6f8;
    --color-surface: #ffffff;
    --color-text: #182229;
    --color-muted: #64717a;
    --color-primary: #18715b;
    --color-primary-dark: #125946;
    --color-border: #d9e1e5;
    --color-error-bg: #fff0f0;
    --color-error: #a32626;
    --color-info-bg: #eef7ff;
    --color-info: #245a80;
    --color-success-bg: #edf9f2;
    --color-success: #17633f;
    --color-closed-bg: #f3f4f5;
    --color-request-one: #18715b;
    --color-request-one-soft: #dff3ec;
    --color-request-two: #3f63b5;
    --color-request-two-soft: #e4eafe;
    --color-disabled: #e7ebed;
    --color-quota-bg: #e2e5e7;
    --color-quota-stripe: #c8ced1;
    --color-quota-text: #68747a;
    --color-leave-bg: #eee7f8;
    --color-leave-stripe: #cbb9e4;
    --color-leave-text: #5c4777;
    --admin-heat-empty: #dff3e5;
    --admin-heat-low: #a9ddb5;
    --admin-heat-medium: #f3dc74;
    --admin-heat-high: #eea04b;
    --admin-heat-very-high: #d95b52;
    --admin-heat-dark-text: #25312a;
    --admin-heat-light-text: #ffffff;
    --radius: 14px;
    --shadow: 0 14px 38px rgba(28, 46, 56, 0.09);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

h1,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.5rem;
    font-size: clamp(1.55rem, 5vw, 2.1rem);
    line-height: 1.2;
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 1rem;
}

.auth-card,
.calendar-card,
.admin-card {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.auth-card {
    max-width: 430px;
    padding: clamp(1.4rem, 5vw, 2.25rem);
}

.eyebrow {
    margin-bottom: 0.35rem;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.muted {
    color: var(--color-muted);
}

.login-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

label {
    font-weight: 700;
}

input,
button,
.button-link {
    min-height: 48px;
    border-radius: 10px;
    font: inherit;
}

input {
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 0.75rem 0.9rem;
    background: #fff;
    color: var(--color-text);
}

input:focus {
    outline: 3px solid rgba(24, 113, 91, 0.18);
    border-color: var(--color-primary);
}

button,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0.72rem 1rem;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font-weight: 750;
    text-decoration: none;
}

button:hover,
.button-link:hover {
    background: var(--color-primary-dark);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.button-secondary {
    min-height: 42px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
}

.button-secondary:hover {
    background: #f7f9fa;
}

.button-danger {
    background: var(--color-error);
    color: #fff;
}

.button-danger:hover:not(:disabled) {
    background: #7f1d1d;
}

.alert {
    margin: 1rem 0;
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    font-size: 0.94rem;
}

.alert-error {
    border: 1px solid #f0caca;
    background: var(--color-error-bg);
    color: var(--color-error);
}

.alert-info {
    border: 1px solid #cde2f2;
    background: var(--color-info-bg);
    color: var(--color-info);
}

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

.alert-closed {
    border: 1px solid var(--color-border);
    background: var(--color-closed-bg);
    color: var(--color-muted);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem max(1rem, calc((100vw - 1040px) / 2));
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}

.site-header .eyebrow {
    margin-bottom: 0;
}

.page-shell {
    width: min(1040px, calc(100% - 2rem));
    margin: 1.5rem auto;
}

.calendar-card,
.admin-card {
    padding: clamp(1rem, 4vw, 2rem);
}

.summary-card {
    width: 100%;
    padding: clamp(1rem, 4vw, 1.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.status-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    background: #edf1f3;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.status-open {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-closed {
    background: var(--color-closed-bg);
    color: var(--color-muted);
}

.calendar-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 1rem;
}

.request-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.request-tab {
    justify-content: flex-start;
    gap: 0.65rem;
    min-width: 0;
    border: 2px solid var(--color-border);
    padding: 0.7rem 0.8rem;
    background: #fff;
    color: var(--color-text);
    text-align: left;
}

.request-tab:hover:not(:disabled) {
    border-color: #9aabae;
    background: #f8fafb;
}

.request-tab.is-active:first-child {
    border-color: var(--color-request-one);
    background: var(--color-request-one-soft);
}

.request-tab.is-active:not(:first-child) {
    border-color: var(--color-request-two);
    background: var(--color-request-two-soft);
}

.request-tab small,
.request-tab strong {
    display: block;
}

.request-tab small {
    margin-top: 0.1rem;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.request-dot {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

.request-dot-one {
    background: var(--color-request-one);
}

.request-dot-two {
    background: var(--color-request-two);
}

.selection-hint {
    min-height: 2.8rem;
    margin: 0.85rem 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.calendar-weekdays {
    margin: 1.25rem 0 0.4rem;
    color: var(--color-muted);
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    font-weight: 750;
    text-align: center;
}

.calendar-day {
    width: 100%;
    min-height: clamp(48px, 11vw, 66px);
    border: 1px solid var(--color-border);
    padding: 0;
    background: #fff;
    color: var(--color-text);
    font-weight: 750;
}

.calendar-day:disabled {
    cursor: not-allowed;
    opacity: 1;
    background: var(--color-disabled);
    color: #879298;
}

.calendar-day.is-quota-full,
.calendar-day.is-quota-full:hover {
    border-color: #c6cdd0;
    background: repeating-linear-gradient(
        135deg,
        var(--color-quota-bg) 0,
        var(--color-quota-bg) 7px,
        var(--color-quota-stripe) 7px,
        var(--color-quota-stripe) 11px
    );
    color: var(--color-quota-text);
}

.calendar-day.is-leave-closed:not(.is-quota-full),
.calendar-day.is-leave-closed:not(.is-quota-full):hover {
    border-color: #c7b7dc;
    background: repeating-linear-gradient(
        45deg,
        var(--color-leave-bg) 0,
        var(--color-leave-bg) 7px,
        var(--color-leave-stripe) 7px,
        var(--color-leave-stripe) 11px
    );
    color: var(--color-leave-text);
}

.calendar-day.is-quota-full.is-leave-closed,
.calendar-day.is-quota-full.is-leave-closed:hover {
    border-color: #a99eaa;
    background: repeating-linear-gradient(
        135deg,
        var(--color-quota-stripe) 0,
        var(--color-quota-stripe) 6px,
        var(--color-leave-stripe) 6px,
        var(--color-leave-stripe) 12px
    );
    color: #554e58;
}

.calendar-day:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: #f1f8f6;
    color: var(--color-text);
}

.calendar-day.is-request-one,
.calendar-day.is-request-one:hover {
    border-color: var(--color-request-one);
    background: var(--color-request-one);
    color: #fff;
}

.calendar-day.is-request-two,
.calendar-day.is-request-two:hover {
    border-color: var(--color-request-two);
    background: var(--color-request-two);
    color: #fff;
}

.calendar-day.is-request-both,
.calendar-day.is-request-both:hover {
    border-color: var(--color-request-one);
    background: linear-gradient(135deg, var(--color-request-one) 0 50%, var(--color-request-two) 50% 100%);
    color: #fff;
}

.calendar-day-empty {
    border-color: transparent;
    background: transparent;
}

.calendar-day-empty:hover {
    border-color: transparent;
    background: transparent;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-one {
    background: var(--color-request-one);
}

.legend-available {
    border: 1px solid var(--color-border);
    background: #fff;
}

.legend-two {
    background: var(--color-request-two);
}

.legend-disabled {
    background: var(--color-disabled);
    border: 1px solid #cbd2d5;
}

.legend-quota {
    border: 1px solid #c6cdd0;
    background: repeating-linear-gradient(
        135deg,
        var(--color-quota-bg) 0,
        var(--color-quota-bg) 4px,
        var(--color-quota-stripe) 4px,
        var(--color-quota-stripe) 7px
    );
}

.legend-leave {
    border: 1px solid #c7b7dc;
    background: repeating-linear-gradient(
        45deg,
        var(--color-leave-bg) 0,
        var(--color-leave-bg) 4px,
        var(--color-leave-stripe) 4px,
        var(--color-leave-stripe) 7px
    );
}

.summary-card h2 {
    margin: 0;
    font-size: 1.35rem;
}

.summary-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.request-summary {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-left-width: 5px;
    border-radius: 10px;
    padding: 0.85rem;
}

.request-summary + .request-summary {
    margin-top: 0.75rem;
}

.request-summary-one {
    border-left-color: var(--color-request-one);
}

.request-summary-two {
    border-left-color: var(--color-request-two);
}

.request-summary strong,
.request-summary [data-summary-value] {
    display: block;
}

.request-summary [data-summary-value] {
    margin-top: 0.2rem;
    color: var(--color-muted);
}

.summary-actions {
    display: flex;
    gap: 0.75rem;
}

.text-button {
    min-width: 44px;
    min-height: 44px;
    border-radius: 0;
    padding: 0.55rem 0.2rem;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.83rem;
}

.text-button:hover:not(:disabled) {
    background: transparent;
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.text-danger {
    color: var(--color-error);
}

.save-note {
    margin: 1rem 0 0.7rem;
    color: var(--color-muted);
    font-size: 0.83rem;
}

.save-button {
    width: 100%;
}

@media (max-width: 520px) {
    .section-heading {
        display: block;
    }

    .status-badge {
        display: inline-block;
        margin-top: 0.35rem;
    }

    .site-header {
        align-items: flex-start;
    }
}

@media (max-width: 840px) {
    .calendar-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .page-shell {
        width: min(100% - 1rem, 1040px);
        margin-top: 0.75rem;
    }

    .calendar-card,
    .summary-card {
        border-radius: 11px;
        padding: 0.8rem;
    }

    .request-tab {
        padding: 0.6rem;
    }

    .calendar-grid {
        gap: 0.22rem;
    }
}

/* Yönetici aylık özet, istek listesi ve toplu tablo bileşenleri. */
.admin-section-nav {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    padding: 0.45rem;
    background: #fff;
    scrollbar-width: thin;
}

.admin-section-nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 750;
    text-decoration: none;
}

.admin-section-nav a:hover {
    background: var(--color-request-one-soft);
    color: var(--color-primary-dark);
}

.monthly-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.monthly-summary-card {
    display: grid;
    gap: 0.2rem;
    min-height: 94px;
    align-content: center;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    padding: 0.8rem;
    background: #f8fafb;
}

.monthly-summary-card span {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.monthly-summary-card strong {
    font-size: 1.65rem;
    line-height: 1;
}

.monthly-summary-card.summary-pending {
    border-color: #e6cf8b;
    background: #fff9e6;
}

.monthly-summary-card.summary-fulfilled {
    border-color: #bfe3cd;
    background: var(--color-success-bg);
}

.monthly-summary-card.summary-unfulfilled {
    border-color: #efc6c3;
    background: #fff2f1;
}

.monthly-completion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 1px solid #e6cf8b;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #fff9e6;
    color: #73580a;
}

.monthly-completion.is-complete {
    border-color: #bfe3cd;
    background: var(--color-success-bg);
    color: var(--color-success);
}

.missing-people {
    margin-top: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #fff;
}

.missing-people summary {
    cursor: pointer;
    font-weight: 750;
}

.missing-people ul {
    columns: 3 180px;
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
}

.missing-people p {
    margin: 0.65rem 0 0;
}

.request-list-panel {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    padding: 0.9rem;
    background: #f8fafb;
}

.subsection-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.subsection-heading h3 {
    margin: 0;
}

.subsection-heading p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}

.compact-filter-form {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    gap: 0.3rem 0.5rem;
}

.compact-filter-form label {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.compact-filter-form select,
.overview-filter-form select,
.table-result-form select {
    min-height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    background: #fff;
    color: var(--color-text);
    font: inherit;
}

.compact-filter-form button {
    min-height: 42px;
}

.monthly-request-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.monthly-request-list article {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(130px, auto) minmax(110px, auto) minmax(105px, auto);
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 0.65rem 0.75rem;
    background: #fff;
}

.monthly-request-list article > div {
    display: grid;
}

.monthly-request-list small,
.monthly-overview-table small {
    display: block;
    color: var(--color-muted);
    font-size: 0.74rem;
}

.result-status {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 750;
}

.result-pending {
    background: #fff2c7;
    color: #715400;
}

.result-fulfilled {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.result-unfulfilled {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.overview-filter-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.overview-filter-form label {
    display: grid;
    gap: 0.3rem;
    min-width: 190px;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.overview-filter-form button {
    min-height: 42px;
}

.monthly-table-wrap {
    margin-top: 0.8rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 11px;
}

.monthly-overview-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.86rem;
}

.monthly-overview-table th,
.monthly-overview-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 0.7rem;
    text-align: left;
    vertical-align: middle;
}

.monthly-overview-table thead th {
    position: sticky;
    top: 0;
    background: #edf2f4;
    color: #45535b;
    white-space: nowrap;
}

.monthly-overview-table tbody tr:last-child > * {
    border-bottom: 0;
}

.monthly-overview-table tbody tr:hover {
    background: #f8fafb;
}

.monthly-overview-table tbody th {
    min-width: 170px;
}

.monthly-overview-table tbody th small {
    color: var(--color-error);
}

.table-request {
    display: block;
    border-left: 4px solid var(--color-request-two);
    padding-left: 0.45rem;
    font-size: 1rem;
}

.table-request.priority-very_important {
    border-left-color: var(--color-request-one);
}

.request-empty {
    color: #95a0a6;
    text-align: center !important;
}

.table-result-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.table-result-form select {
    min-width: 128px;
}

.table-result-form button {
    min-height: 42px;
    padding-inline: 0.7rem;
}

.table-empty {
    padding: 1.2rem !important;
    color: var(--color-muted);
    text-align: center !important;
}

@media (max-width: 720px) {
    .monthly-completion,
    .subsection-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .monthly-completion .button-link {
        width: 100%;
    }

    .monthly-summary-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .monthly-summary-card {
        min-height: 84px;
        padding: 0.6rem;
    }

    .monthly-summary-card strong {
        font-size: 1.4rem;
    }

    .compact-filter-form {
        grid-template-columns: 1fr auto;
    }

    .monthly-request-list article {
        grid-template-columns: 1fr auto;
    }

    .overview-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .overview-filter-form label,
    .overview-filter-form button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .monthly-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .monthly-request-list article {
        grid-template-columns: 1fr;
    }

    .compact-filter-form {
        grid-template-columns: 1fr;
    }

    .compact-filter-form label {
        grid-column: auto;
    }

    .compact-filter-form button,
    .compact-filter-form select {
        width: 100%;
    }
}

/* Yönetici paneli: kullanıcı takviminden ayrı yoğunluk, detay ve yönetim bileşenleri. */
.admin-page .site-header {
    padding-inline: max(1rem, calc((100vw - 1240px) / 2));
}

.admin-shell {
    width: min(1240px, calc(100% - 2rem));
}

.admin-shell > * + * {
    margin-top: 1rem;
}

.admin-section {
    padding: clamp(1rem, 2.5vw, 1.6rem);
}

.admin-section h2,
.day-detail-dialog h2,
.day-person-card h3 {
    margin: 0;
}

.admin-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.admin-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, auto));
    align-items: end;
    gap: 0.65rem;
}

.admin-filter-field {
    display: grid;
    gap: 0.35rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-filter-form input,
.admin-filter-form select,
.result-form select {
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    background: #fff;
    color: var(--color-text);
    font: inherit;
}

.heatmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin: 1.2rem 0 0.8rem;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.heatmap-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.heatmap-legend i {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: 5px;
}

.admin-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 0.55rem;
}

.admin-day {
    display: flex;
    min-height: 116px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.15rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    padding: 0.75rem;
    text-align: left;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.45);
}

.admin-day:hover:not(:disabled) {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.admin-day strong {
    font-size: 1.35rem;
    line-height: 1;
}

.admin-day-total {
    margin-top: auto;
    font-weight: 750;
}

.admin-day small {
    font-size: 0.74rem;
}

.admin-heat-empty {
    background: var(--admin-heat-empty);
    color: var(--admin-heat-dark-text);
}

.admin-heat-low {
    background: var(--admin-heat-low);
    color: var(--admin-heat-dark-text);
}

.admin-heat-medium {
    background: var(--admin-heat-medium);
    color: var(--admin-heat-dark-text);
}

.admin-heat-high {
    background: var(--admin-heat-high);
    color: #452604;
}

.admin-heat-very-high {
    background: var(--admin-heat-very-high);
    color: var(--admin-heat-light-text);
}

.person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.person-card,
.day-person-card {
    border: 1px solid var(--color-border);
    border-radius: 11px;
    padding: 0.9rem;
    background: #fff;
}

.person-card.is-inactive {
    background: #f2f3f4;
    color: var(--color-muted);
}

.person-card-heading,
.user-list-row,
.dialog-heading,
.detail-request,
.result-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.person-card-heading span,
.user-list-row small {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.person-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
    margin: 0.85rem 0;
}

.person-stats div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid #edf0f2;
}

.person-stats dt {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.person-stats dd {
    margin: 0;
    font-weight: 750;
}

.first-request {
    margin: 0.8rem 0 0;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: var(--color-info-bg);
    color: var(--color-info);
    font-size: 0.85rem;
}

.person-last {
    margin: 0.15rem 0;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.admin-add-user {
    max-width: 700px;
    margin-top: 1rem;
}

.admin-add-user > label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.admin-add-user > div {
    display: flex;
    gap: 0.55rem;
}

.user-list {
    margin-top: 1.2rem;
    border-top: 1px solid var(--color-border);
}

.user-list-row {
    min-height: 66px;
    border-bottom: 1px solid var(--color-border);
    padding: 0.55rem 0;
}

.user-list-row > span {
    display: grid;
}

.user-list-row button {
    min-height: 40px;
}

.day-detail-dialog {
    width: min(760px, calc(100% - 1.2rem));
    max-height: min(86vh, 850px);
    border: 0;
    border-radius: 14px;
    padding: clamp(1rem, 3vw, 1.5rem);
    box-shadow: 0 24px 70px rgba(15, 27, 35, 0.27);
}

.day-detail-dialog::backdrop {
    background: rgba(14, 25, 31, 0.58);
}

.dialog-heading {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}

.dialog-heading p {
    margin-bottom: 0.2rem;
}

.dialog-close {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    background: #eef1f2;
    color: var(--color-text);
    font-size: 1.5rem;
}

.day-person-card {
    margin-top: 0.75rem;
}

.detail-history {
    margin: 0.45rem 0 0.75rem;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.detail-history .first-request {
    display: block;
    margin: 0;
}

.detail-request {
    align-items: flex-end;
    margin-top: 0.5rem;
    border-left: 4px solid var(--color-request-two);
    border-radius: 8px;
    padding: 0.65rem;
    background: #f7f8fa;
}

.detail-request.priority-very_important {
    border-left-color: var(--color-request-one);
}

.detail-request > div:first-child {
    display: grid;
}

.detail-request span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.result-form label {
    display: grid;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.result-form button {
    min-height: 42px;
}

.empty-detail {
    margin: 1rem 0 0;
    color: var(--color-muted);
}

.auth-footer {
    margin: 1rem 0 0;
    text-align: center;
}

@media (max-width: 720px) {
    .admin-toolbar,
    .detail-request {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-filter-form {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .admin-filter-form button {
        grid-column: 1 / -1;
    }

    .admin-heatmap {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-day {
        min-height: 106px;
        padding: 0.6rem;
    }

    .result-form {
        align-items: end;
    }
}

@media (max-width: 420px) {
    .admin-shell {
        width: min(100% - 0.7rem, 1240px);
    }

    .admin-section {
        padding: 0.75rem;
    }

    .admin-heatmap {
        gap: 0.35rem;
    }

    .admin-day {
        min-height: 100px;
        border-radius: 8px;
        padding: 0.48rem;
    }

    .admin-day strong {
        font-size: 1.1rem;
    }

    .admin-day small {
        font-size: 0.65rem;
    }

    .admin-add-user > div,
    .user-list-row {
        align-items: stretch;
        flex-direction: column;
    }

    .user-list-row form,
    .user-list-row button {
        width: 100%;
    }
}

/* Ay ayarları, kontrollü silme ve yıllık izin planlama bileşenleri. */
.month-switcher {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1rem;
}

.settings-note {
    margin: 0.9rem 0 0;
}

.month-settings-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.month-settings-form label,
.annual-leave-form > label {
    display: grid;
    gap: 0.35rem;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.month-settings-form input,
.annual-leave-form select,
.user-edit-form input {
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    background: #fff;
    color: var(--color-text);
    font: inherit;
}

.reset-settings-form {
    margin-top: 0.75rem;
}

.danger-zone-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 1px solid #efc6c3;
    border-radius: 10px;
    padding: 0.75rem;
    background: var(--color-error-bg);
}

.danger-zone-form label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-error);
    font-size: 0.82rem;
}

.danger-zone-form input[type="checkbox"] {
    width: 22px;
    min-height: 22px;
}

.request-admin-actions,
.user-row-actions,
.user-edit-form,
.annual-leave-row-actions,
.annual-leave-form-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.request-admin-actions {
    align-items: stretch;
    flex-direction: column;
}

.request-admin-actions .text-button {
    min-height: 36px;
    padding-block: 0.2rem;
}

.user-list-row {
    align-items: flex-start;
}

.user-row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-edit-form input {
    width: min(260px, 42vw);
}

.annual-leave-form {
    margin-top: 1rem;
}

.annual-leave-form > label {
    max-width: 460px;
}

.annual-leave-calendar {
    margin-top: 0.35rem;
}

.annual-leave-day.is-annual-leave-selected,
.annual-leave-day.is-annual-leave-selected:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.leave-live-summary {
    margin-top: 0.8rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
    background: var(--color-success-bg);
    color: var(--color-success);
    font-weight: 750;
}

.annual-leave-form-actions {
    margin-top: 0.75rem;
}

.annual-leave-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.annual-leave-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(210px, auto) auto auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem;
    background: #fff;
}

.annual-leave-row > div:first-child {
    display: grid;
}

.annual-leave-row small {
    color: var(--color-error);
}

@media (max-width: 820px) {
    .danger-zone-form,
    .annual-leave-row {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .user-list-row,
    .user-row-actions,
    .user-edit-form {
        align-items: stretch;
        flex-direction: column;
    }

    .user-row-actions,
    .user-edit-form,
    .user-edit-form input,
    .user-row-actions form,
    .user-row-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .month-switcher,
    .annual-leave-form-actions,
    .annual-leave-row-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .month-switcher a,
    .annual-leave-form-actions button,
    .annual-leave-row-actions form,
    .annual-leave-row-actions button {
        width: 100%;
    }
}