/* Komori Vet Clinic — admin theme (cream / pink / teal) */
:root {
    --vet-cream: #fdf6f0;
    --vet-pink-soft: #fce4ec;
    --vet-pink: #f4a5b8;
    --vet-pink-deep: #e8879e;
    --vet-teal: #4db6ac;
    --vet-teal-dark: #3a9a91;
    --vet-teal-soft: #e0f2f1;
    --vet-ink: #3d3a4a;
    --vet-muted: #7a7585;
    --vet-surface: #ffffff;
    --vet-border: #f0e4dc;
    --vet-font: 'M PLUS Rounded 1c', 'Noto Sans JP', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--vet-font);
    background: var(--vet-cream);
    color: var(--vet-ink);
    line-height: 1.55;
}

a { color: var(--vet-teal-dark); text-decoration: none; }
a:hover { color: var(--vet-pink-deep); }

/* login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 30%, var(--vet-pink-soft) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--vet-teal-soft) 0%, transparent 45%),
        var(--vet-cream);
}

.login-card {
    background: var(--vet-surface);
    border: 2px solid var(--vet-pink-soft);
    border-radius: 20px;
    padding: 32px;
    width: 380px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(61, 58, 74, 0.1);
}

.login-card h1 { font-size: 18px; font-weight: 800; color: var(--vet-teal-dark); }

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.login-card input {
    font: inherit;
    padding: 10px 12px;
    border: 2px solid var(--vet-border);
    border-radius: 12px;
    background: var(--vet-cream);
}

.login-card input:focus {
    outline: none;
    border-color: var(--vet-teal);
    background: #fff;
}

.back { font-size: 13px; text-align: center; font-weight: 600; }

/* admin shell */
.adm-top {
    background: var(--vet-surface);
    border-bottom: 2px solid var(--vet-pink-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(244, 165, 184, 0.12);
}

.adm-top strong { font-weight: 800; color: var(--vet-teal-dark); }

.adm-top-r {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.adm-top-r .lo { color: var(--vet-pink-deep); }

.adm-badge {
    background: var(--vet-teal-soft);
    color: var(--vet-teal-dark);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.adm-main {
    max-width: 960px;
    margin: 24px auto;
    padding: 0 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.adm-card {
    background: var(--vet-surface);
    border: 2px solid var(--vet-pink-soft);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 6px 24px rgba(61, 58, 74, 0.06);
}

.adm-card h2 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--vet-teal-dark);
}

.adm-form { display: flex; flex-direction: column; gap: 14px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.adm-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.adm-form input,
.adm-form textarea {
    font: inherit;
    padding: 9px 11px;
    border: 2px solid var(--vet-border);
    border-radius: 10px;
    background: var(--vet-cream);
}

.adm-form input:focus,
.adm-form textarea:focus {
    outline: none;
    border-color: var(--vet-teal);
    background: #fff;
}

.adm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
    background: var(--vet-teal);
    color: #fff;
    border: 0;
    padding: 10px 20px;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn:hover { background: var(--vet-teal-dark); }

.btn.ghost {
    background: var(--vet-pink-soft);
    color: var(--vet-pink-deep);
    display: inline-flex;
    align-items: center;
}

.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.adm-table th,
.adm-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--vet-border);
}

.adm-table th {
    font-size: 11px;
    color: var(--vet-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}

.row-act { display: flex; gap: 12px; align-items: center; }
.row-act form { display: inline; }

.link-del {
    background: none;
    border: 0;
    color: var(--vet-pink-deep);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
}

.notice {
    padding: 11px 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.notice.ok {
    background: var(--vet-teal-soft);
    color: var(--vet-teal-dark);
    border: 1px solid var(--vet-teal);
}

.notice.err {
    background: var(--vet-pink-soft);
    color: var(--vet-pink-deep);
    border: 1px solid var(--vet-pink);
}

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

@media (max-width: 640px) {
    .grid2 { grid-template-columns: 1fr; }
    .adm-top { flex-direction: column; gap: 10px; align-items: flex-start; }
}