/* ==========================================================================
   SITE.CSS (global)
   Sections:
   1) Design tokens (CSS variables)
   2) Base / HTML / Body
   3) Utilities
   4) Buttons (global look & palette)
   5) Form controls (checkbox/radio)
   6) Generic cards (minimal global)
   7) Language switcher
   8) Tree view (svg.hugo)
   9) AUTH PAGES (Login / Register)
   10) APP HEADER / NAVBAR
   11) APP FOOTER
   12) APP CARD LAYOUT
   13) FORM PAGES (Create Tree, etc.)
   14) PERSON EDITOR – PHOTO DROPZONE
   ========================================================================== */

/*** 1) DESIGN TOKENS ***/
:root {
    --default-button-bg: #d9d9d9;
    --default-border-color: #C5C6C7;
    --default-text-color: white;
    --default-text-button-color: black;
    --default-button-i-color: white;
    --default-button-clr-hover: #FFF;
    --default-button-bg-hover: #A09A91;
    --default-button-focus: #BAB0A1;
    --default-button-box-shadow: #777;
    --default-button-bgr-disabled: #D3D3D3;
    --default-button-clr-disabled: #888;
    --default-button-active: #999589;
    --default-card-hover: #808080;
    --default-card-bg: #f0f0f0;
    --default-form-check-input-focus: #d9d9d9;
    /* brand accent frequently used in your app */
    --brand-accent: #CBC1AE;
}

/*** 2) BASE ***/
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 0px;
}

/*** 3) UTILITIES ***/
.short-button {
    width: auto;
}

.button-gap {
    margin-right: 10px;
}

/*** 4) BUTTONS ***/
button {
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: var(--default-text-color);
    padding: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s, color .3s;
    border-radius: 5px;
}

    button i {
        font-size: 18px;
        color: var(--default-button-i-color);
    }

    button:hover {
        background-color: var(--default-button-bg-hover);
        color: var(--default-button-clr-hover);
    }

    button:focus {
        outline: none;
        box-shadow: 0 0 5px 2px var(--default-button-box-shadow);
        background-color: var(--default-button-focus);
    }

    button:disabled {
        background-color: var(--default-button-bgr-disabled);
        color: var(--default-button-clr-disabled);
        cursor: not-allowed;
    }

    button:active {
        background-color: var(--default-button-active);
        color: var(--default-button-i-color);
    }

.btn-default {
    background-color: var(--brand-accent);
    color: #000;
}

    .btn-default:hover {
        background-color: #A09A91;
        color: var(--default-button-i-color);
    }

.btn-primary {
    background-color: #007BFF;
    color: var(--default-button-i-color);
}

    .btn-primary:hover {
        background-color: #0056b3;
    }

/*** 5) FORM CONTROLS ***/
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}

    .form-check .form-check-input {
        float: left;
        margin-left: -1.5em;
    }

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: var(--default-button-i-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--default-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

    .form-check-input[type=checkbox] {
        border-radius: .25em;
    }

    .form-check-input[type=radio] {
        border-radius: 50%;
    }

    .form-check-input:active {
        filter: brightness(90%);
    }

    .form-check-input:focus {
        border-color: var(--default-form-check-input-focus);
        outline: 0;
        box-shadow: 0 0 1px 1px var(--default-form-check-input-focus);
    }

    .form-check-input:checked {
        background-color: var(--default-button-bg);
        border-color: var(--default-button-bg);
    }

        .form-check-input:checked[type=checkbox] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
        }

        .form-check-input:checked[type=radio] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
        }

    .form-check-input[type=checkbox]:indeterminate {
        background-color: var(--default-button-bg);
        border-color: var(--default-button-bg);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    }

    .form-check-input:disabled {
        pointer-events: none;
        filter: none;
        opacity: .5;
    }

        .form-check-input[disabled] ~ .form-check-label,
        .form-check-input:disabled ~ .form-check-label {
            opacity: .5;
        }

/*** 6) GENERIC CARDS (global minimal; page specifics live in index.css) ***/
.card {
    width: 20em;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .card:hover {
        box-shadow: 1px 9px 40px -12px var(--default-card-hover);
    }

.card-front {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-img-top {
    width: 100%;
    height: 400px;
    object-fit: scale-down;
}

/*** 7) LANGUAGE SWITCHER ***/
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

    .language-switcher .fi {
        font-size: 1.275rem;
        line-height: 1;
        border: 1px solid #ccc;
        background-color: #f8f8f8;
        border-radius: 0;
    }

    /* Make the header toggle clean */
    .language-switcher .nav-link {
        padding: 0;
        font-size: 0.9rem;
    }

        .language-switcher .nav-link .fi {
            /* no box around flag in the header, just the icon */
            border: none;
            background-color: transparent;
        }

    /* In the dropdown menu, keep the boxed flags for clarity */
    .language-switcher .dropdown-menu .fi {
        border: 1px solid #ccc;
        background-color: #f8f8f8;
    }

/*** 8) TREE VIEW (Hugo template) ***/
svg.hugo .node.male > rect {
    fill: var(--default-button-clr-disabled);
}

svg.hugo .node.female > rect {
    fill: var(--default-border-color);
}

/*** 9) AUTH PAGES (Login / Register) ***/
.auth-page {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: #f5f5f5;
}

@media (min-width: 768px) {
    .auth-page {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
    padding: 24px 28px 28px;
    border: 1px solid rgba(0, 0, 0, .04);
}

/* Header area */
.auth-app-label {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    margin-bottom: 4px;
}

.auth-card-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #222;
}

.auth-card-subtitle {
    font-size: .95rem;
    color: #666;
    margin-bottom: 18px;
}

/* Form styling inside card */
.auth-form .form-label {
    font-weight: 500;
    color: #333;
}

.auth-card .form-control {
    border-radius: 8px;
    border-color: var(--default-border-color);
    padding: 0.55rem 0.75rem;
}

    .auth-card .form-control:focus {
        border-color: var(--brand-accent);
        box-shadow: 0 0 0 0.15rem rgba(203, 193, 174, .35);
    }

/* Show password row */
.auth-show-password {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    color: #555;
    margin-top: 4px;
    margin-bottom: 4px;
}

    .auth-show-password .form-check-input {
        margin-top: 0;
    }

/* Error box */
.auth-error {
    margin-top: 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    font-size: .9rem;
}

/* Actions / button + switch link */
.auth-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Override global button shape just for auth buttons */
button.auth-btn {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    background-color: var(--brand-accent);
    color: #000;
}

    button.auth-btn:hover {
        background-color: var(--default-button-bg-hover);
        color: #fff;
    }

    button.auth-btn:focus {
        box-shadow: 0 0 0 0.15rem var(--default-button-box-shadow);
    }

.auth-switch-text {
    font-size: .9rem;
    text-align: center;
    color: #555;
    margin: 0;
}

.auth-switch-link {
    font-weight: 500;
    color: var(--brand-accent);
    text-decoration: none;
}

    .auth-switch-link:hover {
        text-decoration: underline;
    }

/*** 10) APP HEADER / NAVBAR ***/
.app-header {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    background: linear-gradient(to right, #ffffff, #f9f7f4);
}

.app-navbar {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    padding-top: .4rem;
    padding-bottom: .4rem;
}

/* Brand block */
.app-brand {
    padding: 0;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    color: #000;
    margin-right: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
}

.brand-subtitle {
    font-size: .8rem;
    color: #777;
}

/* Tree toolbar section */
.app-tree-toolbar {
    gap: 0.4rem;
}

.tree-select {
    min-width: 180px;
    max-width: 240px;
}

/* Make tree buttons look like tiny icon chips instead of big squares */
.nav-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

/* Right side spacing on header */
.app-header-right {
    min-width: 0;
}

    .app-header-right .nav-link {
        padding-left: .6rem;
        padding-right: .6rem;
        font-size: .9rem;
    }

/* On very small screens, center things a bit */
@media (max-width: 576px) {
    .brand-subtitle {
        display: none;
    }

    .tree-select {
        max-width: 100%;
    }

    .app-header-right {
        margin-top: .4rem;
    }
}

/*** 11) APP FOOTER ***/
.app-footer {
    margin-top: 40px;
    padding: 20px 0 30px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(to right, #ffffff, #f9f7f4);
}

.footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Brand row */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    color: #000;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
}

/* Meta row */
.footer-meta {
    font-size: .9rem;
    color: #777;
}

/* Links */
.footer-links {
    margin-top: 2px;
}

.footer-link {
    color: var(--brand-accent);
    text-decoration: none;
    font-size: .9rem;
}

    .footer-link:hover {
        text-decoration: underline;
    }

/* Responsive tweaks */
@media (max-width: 500px) {
    .footer-inner {
        text-align: center;
    }
}

/*** 12) APP CARD LAYOUT ***/
/* Add more breathing room below the header */
.app-header + main,
.app-header + div,
.app-header + section {
    margin-top: 28px; /* tweak 24–32px if you want */
}

/* Move main content slightly left */
.container {
    padding-left: 8px !important;
    padding-right: 12px !important;
}

/* Let main itself not add extra bottom gap */
main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Footer closer to content, but not glued */
.app-footer {
    margin-top: 12px;
    padding: 16px 0 20px;
}

/* Cancel Bootstrap's negative row margins for the card grid */
#cardsContainer.row {
    margin-left: -60px;
    margin-right: 30px;
}

/*** 13) FORM PAGES (Create Tree, etc.) ***/
.form-page {
    max-width: 720px;
    margin: 32px auto 0;
    padding-bottom: 16px;
}

.form-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
    padding: 24px 28px 28px;
}

/* Header inside card */
.form-card-header {
    margin-bottom: 18px;
}

.form-card-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    margin-bottom: 4px;
}

.form-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
}

.form-card-subtitle {
    font-size: .95rem;
    color: #666;
    margin-bottom: 14px;
}

/* Form body */
.form-card-body .form-label {
    font-weight: 500;
    color: #333;
}

.form-card-body .form-control {
    border-radius: 8px;
    border-color: var(--default-border-color);
    padding: 0.55rem 0.75rem;
}

    .form-card-body .form-control:focus {
        border-color: var(--brand-accent);
        box-shadow: 0 0 0 0.15rem rgba(203, 193, 174, .35);
    }

/* Actions row */
.form-card-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Primary button: brand accent, like auth button */
button.form-primary-btn {
    min-width: 120px;
    height: 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .95rem;
    background-color: var(--brand-accent);
    color: #000;
}

    button.form-primary-btn:hover {
        background-color: var(--default-button-bg-hover);
        color: #fff;
    }

    button.form-primary-btn:focus {
        box-shadow: 0 0 0 0.15rem var(--default-button-box-shadow);
    }

/* Secondary button: neutral gray */
button.form-secondary-btn {
    min-width: 120px;
    height: 40px;
    border-radius: 8px;
    font-weight: 500;
    font-size: .95rem;
    background-color: #6c757d;
    color: #fff;
}

    button.form-secondary-btn:hover {
        background-color: #555b61;
    }

/* PERSON CREATE PAGE (Home/Create) */
.person-create-page {
    min-height: calc(100vh - 140px); /* header+footer space */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    background: #f5f5f5;
}

.person-card {
    width: 100%;
    max-width: 860px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    padding: 24px 28px 28px;
    border: 1px solid rgba(0, 0, 0, .04);
}

/* header area */
.person-card-app-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    margin-bottom: 4px;
}

.person-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #222;
}

.person-card-subtitle {
    font-size: .95rem;
    color: #666;
    margin-bottom: 16px;
}

/* actions row */
.person-form-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.person-submit-btn {
    min-width: 160px;
}

.person-cancel-link {
    font-size: .95rem;
}

/*** 14) PERSON EDITOR – PHOTO DROPZONE ***/
.photo-dropzone {
    position: relative;
    border: 2px dashed rgba(0,0,0,0.15);
    border-radius: 10px;
    padding: 16px;
    background: #faf9f7;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    margin-top: 4px;
}

.photo-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none; /* allow clicks to pass through to the input */
}

.photo-dropzone-icon {
    font-size: 1.8rem;
    margin-bottom: 4px;
    color: var(--brand-accent);
}

.photo-dropzone-text {
    font-size: .9rem;
    color: #555;
}

.photo-dropzone-hint {
    font-size: .8rem;
    color: #999;
    margin-top: 2px;
}

/* Invisible real <input type="file"> */
.photo-dropzone .photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Hover + dragover visual state */
.photo-dropzone:hover,
.photo-dropzone.is-dragover {
    border-color: var(--brand-accent);
    background: #f4efe7;
    box-shadow: 0 0 0 2px rgba(203,193,174,0.25);
}

.photo-dropzone-preview {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

    .photo-dropzone-preview img {
        max-height: 160px;
        border-radius: 8px;
    }

/* INLINE GENDER RADIO BUTTONS */
.gender-inline .form-check-input {
    margin-right: 4px;
}

.gender-inline label {
    margin-right: 15px;
    cursor: pointer;
}

.name-display-wrapper {
    border-left: 1px solid rgba(0,0,0,0.08);
    padding-left: 12px;
}