/*
   KinderNest.kids watercolor UI theme
   Source inspiration: uploaded watercolor cards, ink frames, and KinderNest.kids banner.
   Intent: warm, hand-made, trustworthy, child-centered, and beta-safe.
*/

:root {
    --kn-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --kn-ink: #111111;
    --kn-ink-soft: #2f2f2f;
    --kn-paper: #fffdfa;
    --kn-paper-warm: #fff7f2;
    --kn-paper-cool: #f7fbff;

    --kn-red: #fc6573;
    --kn-red-soft: #ffd8dc;
    --kn-red-deep: #b32b26;
    --kn-blue: #719fe6;
    --kn-blue-soft: #d5e3f9;
    --kn-blue-deep: #43546b;
    --kn-green: #b2d28a;
    --kn-green-soft: #e6f2d3;
    --kn-green-deep: #5f7d42;
    --kn-yellow: #fce658;
    --kn-yellow-soft: #fff6bd;
    --kn-orange: #fba13d;
    --kn-orange-soft: #ffe0b2;
    --kn-purple: #aa7dce;
    --kn-purple-soft: #ead9f4;
    --kn-purple-deep: #563f69;

    --kn-bg: #fff8f7;
    --kn-surface: rgba(255, 253, 250, 0.96);
    --kn-surface-strong: #ffffff;
    --kn-text: #111111;
    --kn-text-muted: #46505f;
    --kn-text-subtle: #667085;
    --kn-border: rgba(17, 17, 17, 0.58);
    --kn-border-soft: rgba(17, 17, 17, 0.18);

    --kn-accent: var(--kn-red);
    --kn-accent-soft: var(--kn-red-soft);
    --kn-accent-deep: var(--kn-red-deep);

    --kn-radius-sm: 0.75rem;
    --kn-radius-md: 1rem;
    --kn-radius-lg: 1.35rem;
    --kn-radius-xl: 1.8rem;

    --kn-shadow-sketch: 5px 5px 0 rgba(17, 17, 17, 0.10);
    --kn-shadow-soft: 0 16px 36px rgba(17, 17, 17, 0.08);
    --kn-ring: 0 0 0 4px color-mix(in srgb, var(--portal-accent, var(--kn-accent)) 24%, transparent);

    --kn-watercolor-red: radial-gradient(circle at 12% 18%, rgba(252, 101, 115, 0.34), transparent 24rem), radial-gradient(circle at 88% 4%, rgba(179, 43, 38, 0.20), transparent 18rem), radial-gradient(circle at 8% 92%, rgba(252, 101, 115, 0.24), transparent 16rem);
    --kn-watercolor-blue: radial-gradient(circle at 18% 16%, rgba(113, 159, 230, 0.32), transparent 25rem), radial-gradient(circle at 86% 8%, rgba(67, 84, 107, 0.13), transparent 18rem), radial-gradient(circle at 12% 88%, rgba(113, 159, 230, 0.22), transparent 16rem);
    --kn-watercolor-purple: radial-gradient(circle at 18% 14%, rgba(170, 125, 206, 0.30), transparent 24rem), radial-gradient(circle at 88% 6%, rgba(86, 63, 105, 0.16), transparent 18rem), radial-gradient(circle at 10% 90%, rgba(170, 125, 206, 0.21), transparent 15rem);
    --kn-watercolor-multi: radial-gradient(circle at 9% 14%, rgba(252, 101, 115, 0.23), transparent 19rem), radial-gradient(circle at 34% 3%, rgba(252, 230, 88, 0.24), transparent 18rem), radial-gradient(circle at 68% 12%, rgba(178, 210, 138, 0.22), transparent 19rem), radial-gradient(circle at 92% 2%, rgba(170, 125, 206, 0.18), transparent 17rem), radial-gradient(circle at 80% 92%, rgba(113, 159, 230, 0.18), transparent 18rem);
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
    color: var(--kn-text);
    font-family: var(--kn-font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    line-height: 1.5;
    background-color: var(--kn-paper);
    background-image: var(--kn-watercolor-multi);
    background-attachment: fixed;
}

a {
    color: var(--kn-blue-deep);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--kn-red-deep);
}

button,
a,
input,
select,
textarea {
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--kn-ring);
}

button:disabled,
.portal-action-link[aria-disabled="true"],
.action-link-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* Portal shell: ink frame + watercolor panels */
.portal-shell {
    background: var(--kn-paper) !important;
    border: 3px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-xl) !important;
    box-shadow: var(--kn-shadow-sketch), var(--kn-shadow-soft) !important;
}

.portal-sidebar {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    color: var(--kn-ink) !important;
    background-color: color-mix(in srgb, var(--portal-accent-soft, var(--kn-red-soft)) 72%, #ffffff) !important;
    background-image: radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 32%, transparent), transparent 14rem), radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 24%, transparent), transparent 13rem), radial-gradient(circle at 20% 88%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 18%, transparent), transparent 12rem) !important;
    border-right: 3px solid var(--kn-ink);
}

.portal-brand {
    border: 3px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-lg) !important;
    background-color: var(--kn-paper) !important;
    background-image: radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 34%, transparent), transparent 12rem), radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 22%, transparent), transparent 11rem), linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.58)) !important;
    box-shadow: var(--kn-shadow-sketch);
}

.portal-brand-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.46)) !important;
}

.portal-eyebrow,
.portal-topbar-eyebrow {
    color: var(--kn-red-deep) !important;
    font-weight: 950 !important;
    letter-spacing: 0.12em !important;
}

.portal-title,
.portal-topbar h2 {
    color: var(--kn-ink) !important;
    letter-spacing: -0.045em;
}

.portal-summary,
.portal-topbar-summary,
.muted,
.stack-snippet,
.info-card p,
.detail-list dd {
    color: var(--kn-text-muted) !important;
}

.portal-nav {
    padding-right: 0.1rem;
}

.portal-nav-item {
    min-height: 2.85rem !important;
    color: var(--kn-ink) !important;
    border: 2px solid transparent;
    border-radius: var(--kn-radius-md) !important;
    background: rgba(255, 255, 255, 0.26);
}

.portal-nav-item:hover,
.portal-nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: var(--kn-ink);
    transform: rotate(-0.25deg) translateX(2px) !important;
}

.portal-nav-item.active {
    background: var(--kn-paper) !important;
    border-color: var(--kn-ink);
    box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.12);
}

.portal-sidecard {
    border: 2px solid var(--kn-ink) !important;
    background: rgba(255, 255, 255, 0.70) !important;
    color: var(--kn-ink) !important;
    box-shadow: var(--kn-shadow-sketch);
}

.portal-sidecard-title,
.portal-sidecard-meta,
.portal-sidecard-name {
    color: var(--kn-ink) !important;
}

.portal-main {
    min-width: 0;
    background-color: var(--kn-paper) !important;
    background-image: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 11%, transparent), transparent 18rem), radial-gradient(circle at 4% 88%, rgba(113, 159, 230, 0.10), transparent 18rem) !important;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 253, 250, 0.92) !important;
    border-bottom: 3px solid var(--kn-ink) !important;
    backdrop-filter: blur(8px);
}

.portal-content {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.portal-topbar-actions {
    justify-content: flex-end;
}

/* Buttons: black ink edge, watercolor fill */
.portal-action-link,
.action-link,
.action-link-button,
.portal-secondary-link,
.portal-signout {
    border-radius: 999px !important;
    min-height: 2.6rem;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
}

.portal-action-link,
.action-link,
.action-link-button,
.portal-secondary-link {
    border: 2px solid var(--kn-ink) !important;
    background: var(--kn-paper) !important;
    color: var(--kn-ink) !important;
    box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.10);
}

.portal-action-link:hover,
.action-link:hover,
.action-link-button:hover,
.portal-secondary-link:hover {
    background: color-mix(in srgb, var(--portal-accent-soft, var(--kn-red-soft)) 72%, #ffffff) !important;
    color: var(--kn-ink) !important;
    transform: rotate(-0.3deg) translateY(-1px);
}

.portal-action-link-solid,
.action-link-button.primary,
.portal-signout {
    border: 2px solid var(--kn-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--portal-accent, var(--kn-red)) 86%, #ffffff), color-mix(in srgb, var(--portal-accent, var(--kn-red)) 68%, #ffffff)) !important;
    color: var(--kn-ink) !important;
    box-shadow: 4px 4px 0 rgba(17, 17, 17, 0.14);
}

.portal-action-link-solid:hover,
.action-link-button.primary:hover,
.portal-signout:hover {
    transform: rotate(0.25deg) translateY(-1px);
    box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.16);
}

/* Cards and work areas: poster-card feel */
.stack-card,
.info-card,
.metric-card,
.attendance-form-card,
.attendance-child-card,
.verification-upload-card,
.identity-review-card,
.kn-mn-form-note,
.kn-dialog-card,
.beta-feedback-drawer-panel {
    border: 2px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-lg) !important;
    background: var(--kn-surface) !important;
    box-shadow: var(--kn-shadow-sketch), var(--kn-shadow-soft) !important;
}

.stack-card:hover,
.info-card:hover,
.metric-card:hover,
.attendance-child-card:hover {
    transform: translateY(-1px);
}

.info-card:nth-of-type(6n+1),
.metric-card:nth-of-type(6n+1) {
    background-image: radial-gradient(circle at 94% 8%, rgba(252, 101, 115, 0.16), transparent 8rem) !important;
}

.info-card:nth-of-type(6n+2),
.metric-card:nth-of-type(6n+2) {
    background-image: radial-gradient(circle at 94% 8%, rgba(113, 159, 230, 0.18), transparent 8rem) !important;
}

.info-card:nth-of-type(6n+3),
.metric-card:nth-of-type(6n+3) {
    background-image: radial-gradient(circle at 94% 8%, rgba(178, 210, 138, 0.20), transparent 8rem) !important;
}

.info-card:nth-of-type(6n+4),
.metric-card:nth-of-type(6n+4) {
    background-image: radial-gradient(circle at 94% 8%, rgba(252, 230, 88, 0.22), transparent 8rem) !important;
}

.info-card:nth-of-type(6n+5),
.metric-card:nth-of-type(6n+5) {
    background-image: radial-gradient(circle at 94% 8%, rgba(170, 125, 206, 0.18), transparent 8rem) !important;
}

.info-card:nth-of-type(6n+6),
.metric-card:nth-of-type(6n+6) {
    background-image: radial-gradient(circle at 94% 8%, rgba(251, 161, 61, 0.18), transparent 8rem) !important;
}

.page-grid,
.stack-list,
.timeline-list,
.attendance-entry-panel,
.kn-enrollment-form,
.kn-mn-admission-form {
    gap: 1.1rem !important;
}

.page-grid-four,
.metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.page-grid-three,
.tiles-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Forms: paper inputs with strong focus */
.form-control,
.beta-feedback-input,
.beta-feedback-textarea,
.quick-attendance-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    border: 2px solid rgba(17, 17, 17, 0.42) !important;
    border-radius: var(--kn-radius-sm) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--kn-text) !important;
}

.form-control:focus,
.beta-feedback-input:focus,
.beta-feedback-textarea:focus,
.quick-attendance-select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
    border-color: var(--kn-ink) !important;
    box-shadow: var(--kn-ring), 3px 3px 0 rgba(17, 17, 17, 0.10) !important;
    outline: none !important;
}

label,
.form-field,
.attendance-field,
.kn-pdf-field,
.kn-mn-field,
.beta-feedback-field {
    color: var(--kn-text) !important;
}

.validation-message,
.invalid {
    color: var(--kn-red-deep) !important;
}

.invalid:not([type="checkbox"]) {
    border-color: var(--kn-red-deep) !important;
    outline: none !important;
}

/* Tables: ledger paper with ink frame */
.table-wrap {
    border: 2px solid var(--kn-ink);
    border-radius: var(--kn-radius-lg);
    background: var(--kn-paper);
    box-shadow: var(--kn-shadow-sketch), var(--kn-shadow-soft);
}

.data-table,
.rate-card-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.data-table th,
.rate-card-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--portal-accent-soft, var(--kn-red-soft)) 50%, #ffffff) !important;
    color: var(--kn-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--kn-ink) !important;
}

.data-table td,
.rate-card-table td {
    color: var(--kn-text-muted);
    border-bottom-color: rgba(17, 17, 17, 0.13) !important;
}

.data-table tbody tr:hover,
.rate-card-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.72);
}

.kn-action-column {
    white-space: nowrap;
}

/* Status treatments from the image palette */
.attendance-child-status.info,
.attendance-entry-pill.info {
    background: var(--kn-blue-soft) !important;
    color: var(--kn-blue-deep) !important;
}

.attendance-child-status.success,
.attendance-entry-pill.success,
.beta-feedback-status.success {
    background: var(--kn-green-soft) !important;
    color: var(--kn-green-deep) !important;
}

.kn-dialog-warning,
.beta-feedback-status.failure {
    background: #fff0f1 !important;
    color: var(--kn-red-deep) !important;
    border-color: var(--kn-red-deep) !important;
}

.beta-feedback-handle {
    border: 2px solid var(--kn-ink) !important;
    background: linear-gradient(180deg, var(--kn-red), var(--kn-red-soft)) !important;
    color: var(--kn-ink) !important;
    box-shadow: var(--kn-shadow-sketch) !important;
}

.beta-feedback-handle.dirty {
    background: linear-gradient(180deg, var(--kn-orange), var(--kn-orange-soft)) !important;
}

.beta-feedback-handle.submitted {
    background: linear-gradient(180deg, var(--kn-green), var(--kn-green-soft)) !important;
}

/* Site areas outside the portal shell */
main,
section,
article {
    min-width: 0;
}

.hero,
.landing-hero,
.marketing-hero {
    background-color: var(--kn-paper) !important;
    background-image: var(--kn-watercolor-multi) !important;
    border: 3px solid var(--kn-ink) !important;
    border-radius: var(--kn-radius-xl) !important;
    box-shadow: var(--kn-shadow-sketch), var(--kn-shadow-soft) !important;
}

/* Portal-specific accent correction */
.portal-shell[style*="#b32b26"],
.portal-shell[style*="#fc6573"] {
    --kn-accent: var(--kn-red);
    --kn-accent-soft: var(--kn-red-soft);
    --kn-accent-deep: var(--kn-red-deep);
}

.portal-shell[style*="#719fe6"],
.portal-shell[style*="#43546b"] {
    --kn-accent: var(--kn-blue);
    --kn-accent-soft: var(--kn-blue-soft);
    --kn-accent-deep: var(--kn-blue-deep);
}

.portal-shell[style*="#aa7dce"],
.portal-shell[style*="#563f69"] {
    --kn-accent: var(--kn-purple);
    --kn-accent-soft: var(--kn-purple-soft);
    --kn-accent-deep: var(--kn-purple-deep);
}

/* Responsive cleanup */
@media (max-width: 1100px) {
    .portal-shell {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        min-height: 100vh !important;
    }

    .portal-sidebar {
        max-height: none;
        border-right: 0;
        border-bottom: 3px solid var(--kn-ink);
    }

    .portal-brand {
        min-height: 140px !important;
    }

    .portal-brand-overlay {
        min-height: 140px !important;
    }

    .portal-nav {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .portal-sidecard-actions,
    .portal-topbar-actions,
    .kn-pdf-submit-row,
    .kn-mn-submit-row,
    .beta-feedback-actions,
    .kn-dialog-actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 720px) {
    body {
        background-image: radial-gradient(circle at 10% 5%, rgba(252, 101, 115, 0.18), transparent 14rem), radial-gradient(circle at 88% 2%, rgba(113, 159, 230, 0.16), transparent 14rem) !important;
    }

    .portal-content,
    .portal-topbar {
        padding: 1rem !important;
    }

    .portal-topbar h2 {
        font-size: clamp(1.45rem, 8vw, 2rem) !important;
    }

    .portal-topbar-actions,
    .form-actions,
    .kn-dialog-actions,
    .beta-feedback-actions,
    .portal-sidecard-actions {
        width: 100%;
    }

    .portal-action-link,
    .portal-action-link-solid,
    .action-link,
    .action-link-button,
    .portal-topbar-actions > * {
        width: 100%;
    }

    .stack-row,
    .attendance-entry-header,
    .beta-feedback-panel-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .detail-list div,
    .beta-feedback-context div {
        grid-template-columns: 1fr !important;
    }

    .table-wrap {
        border-radius: var(--kn-radius-md);
    }
}