/*
 * ============================================================
 * KALIDAYA
 * Custom Grav Theme based on Quark 2
 * ============================================================
 */

:root {

    --kal-bg: #0b0f14;

    --kal-bg-soft: #111821;

    --kal-panel: #151d27;

    --kal-panel-hover: #1b2633;

    --kal-border: #273444;

    --kal-text: #eaf2f8;

    --kal-muted: #94a7b8;

    --kal-accent: #7c5cff;

    --kal-cyan: #35d0ff;

    --kal-green: #39d98a;

    --kal-red: #ff5d68;

    --kal-orange: #ffb454;
}


/*
 * ============================================================
 * GLOBAL
 * ============================================================
 */

html,
body {

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(53, 208, 255, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 10%,
            rgba(124, 92, 255, 0.08),
            transparent 30%
        ),
        var(--kal-bg);

    color: var(--kal-text);
}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.35),
            transparent 70%
        );

    z-index: -1;
}


/*
 * ============================================================
 * QUARK CONTENT
 * ============================================================
 */

body,
#body-wrapper,
.page-wrapper,
main {

    background-color:
        var(--kal-bg) !important;
}


main .container,
#body-wrapper .container {

    background:
        transparent !important;
}


main section,
main article,
.content-padding,
.page-content {

    background:
        var(--kal-panel) !important;

    color:
        var(--kal-text) !important;
}


main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li,
main em,
main strong {

    color:
        var(--kal-text) !important;
}


main hr {

    border-color:
        var(--kal-border) !important;
}


main a {

    color:
        var(--kal-cyan);
}


main a:hover {

    color:
        #7ee6ff;
}


/*
 * ============================================================
 * HEADER
 * ============================================================
 */

header,
.navbar,
#header {

    background:
        rgba(11, 15, 20, 0.92);

    border-bottom:
        1px solid var(--kal-border);

    backdrop-filter:
        blur(12px);
}


header a,
.navbar a,
#header a {

    color:
        var(--kal-text);
}


header a:hover,
.navbar a:hover,
#header a:hover {

    color:
        var(--kal-cyan);
}


/*
 * ============================================================
 * BRAND
 * ============================================================
 */

.kalidaya-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    text-decoration:
        none;

    color:
        var(--kal-text);

    font-weight:
        800;

    letter-spacing:
        0.18em;
}


.kalidaya-brand:hover {

    color:
        var(--kal-cyan);
}


.kalidaya-brand-icon {

    font-size:
        1.25rem;

    line-height:
        1;

    color:
        var(--kal-cyan);

    text-shadow:
        0 0 14px
        rgba(53, 208, 255, 0.55);
}


.kalidaya-brand-text {

    font-size:
        1rem;

    line-height:
        1;
}


/*
 * ============================================================
 * TYPOGRAPHY
 * ============================================================
 */

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
        var(--kal-text);
}


p,
li {

    color:
        var(--kal-text);
}


a {

    color:
        var(--kal-cyan);
}


a:hover {

    color:
        #7ee6ff;
}


hr {

    border-color:
        var(--kal-border);
}


/*
 * ============================================================
 * HOME
 * ============================================================
 */

.kal-home {

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        3rem 1.5rem 4rem;
}


.kal-hero {

    margin-bottom:
        2.5rem;
}


.kal-kicker {

    color:
        var(--kal-cyan);

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        0.24em;

    margin-bottom:
        0.8rem;
}


.kal-hero h1 {

    font-size:
        clamp(
            2rem,
            4vw,
            2.6rem
        );

    margin:
        0 0 1rem;

    line-height:
        1;
}


.kal-hero p {

    max-width:
        720px;

    color:
        var(--kal-muted) !important;

    font-size:
        1.1rem;
}


/*
 * ============================================================
 * HOME GRID
 * ============================================================
 */

.kal-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.25rem;
}


.kal-card {

    position:
        relative;

    display:
        block;

    min-height:
        260px;

    padding:
        1.5rem;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            transparent
        ),
        var(--kal-panel);

    border:
        1px solid
        var(--kal-border);

    border-radius:
        16px;

    text-decoration:
        none;

    color:
        var(--kal-text);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


a.kal-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(
            53,
            208,
            255,
            0.55
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                53,
                208,
                255,
                0.05
            ),
            transparent
        ),
        var(--kal-panel-hover);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.28);
}


.kal-card-icon {

    font-size:
        2rem;

    margin-bottom:
        1.25rem;
}


.kal-card h2 {

    margin:
        0 0 0.75rem;

    font-size:
        1.35rem;
}


.kal-card p {

    color:
        var(--kal-muted) !important;

    line-height:
        1.55;
}


.kal-card-link {

    position:
        absolute;

    left:
        1.5rem;

    bottom:
        1.5rem;

    color:
        var(--kal-cyan);

    font-weight:
        700;
}


.kal-card-muted {

    position:
        absolute;

    left:
        1.5rem;

    bottom:
        1.5rem;

    color:
        var(--kal-muted);

    font-size:
        0.9rem;
}


/*
 * ============================================================
 * STATUS DOTS
 * ============================================================
 */

.kal-card-status {

    position:
        absolute;

    top:
        1.25rem;

    right:
        1.25rem;

    display:
        flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        var(--kal-green);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.kal-dot {

    display:
        inline-block;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--kal-green);

    box-shadow:
        0 0 12px
        rgba(
            57,
            217,
            138,
            0.8
        );
}


.kal-dot-small {

    width:
        7px;

    height:
        7px;
}


/*
 * ============================================================
 * HOME FOOTER
 * ============================================================
 */

.kal-footer-hint {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        1.75rem;

    padding:
        0 0.25rem;

    color:
        var(--kal-muted);

    font-size:
        0.78rem;

    letter-spacing:
        0.08em;
}


.kal-locator {

    color:
        var(--kal-muted);
}


.kal-azeroth {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        var(--kal-muted) !important;

    text-decoration:
        none;

    opacity:
        0.45;

    transition:
        opacity 0.2s ease,
        color 0.2s ease,
        text-shadow 0.2s ease;
}


.kal-azeroth:hover {

    opacity:
        1;
}


/*
 * Loading
 */

.kal-azeroth.kal-status-loading
.kal-dot {

    background:
        var(--kal-orange);

    box-shadow:
        0 0 10px
        rgba(
            255,
            180,
            84,
            0.7
        );
}


/*
 * Online
 */

.kal-azeroth.kal-status-online {

    color:
        var(--kal-green) !important;
}


.kal-azeroth.kal-status-online
.kal-dot {

    background:
        var(--kal-green);

    box-shadow:
        0 0 12px
        rgba(
            57,
            217,
            138,
            0.8
        );
}


/*
 * Offline
 */

.kal-azeroth.kal-status-offline {

    color:
        var(--kal-red) !important;
}


.kal-azeroth.kal-status-offline
.kal-dot {

    background:
        var(--kal-red);

    box-shadow:
        0 0 12px
        rgba(
            255,
            93,
            104,
            0.7
        );
}


/*
 * ============================================================
 * AZEROTH PAGE
 * ============================================================
 */

.azeroth-page {

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        3rem 1.5rem 4rem;
}


.azeroth-header {

    margin-bottom:
        2.5rem;
}


.azeroth-kicker {

    color:
        var(--kal-muted);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    margin-bottom:
        0.75rem;
}


.azeroth-header h1 {

    margin:
        0 0 0.75rem;

    font-size:
        clamp(
            2.1rem,
            4vw,
            2.8rem
        );
}


.azeroth-header p {

    color:
        var(--kal-muted) !important;

    font-size:
        1.1rem;
}


/*
 * Status panel
 */

.azeroth-status-panel {

    background:
        var(--kal-bg-soft);

    border:
        1px solid
        var(--kal-border);

    border-radius:
        16px;

    overflow:
        hidden;

    margin-bottom:
        2rem;
}


.azeroth-status-title {

    padding:
        1rem 1.25rem;

    border-bottom:
        1px solid
        var(--kal-border);

    color:
        var(--kal-text);

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.azeroth-status-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        1rem;

    padding:
        1rem 1.25rem;

    border-bottom:
        1px solid
        rgba(
            39,
            52,
            68,
            0.65
        );
}


.azeroth-status-row:last-child {

    border-bottom:
        0;
}


.azeroth-state {

    font-size:
        0.82rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.azeroth-state.loading {

    color:
        var(--kal-orange);
}


.azeroth-state.online {

    color:
        var(--kal-green);

    text-shadow:
        0 0 10px
        rgba(
            57,
            217,
            138,
            0.25
        );
}


.azeroth-state.offline {

    color:
        var(--kal-red);

    text-shadow:
        0 0 10px
        rgba(
            255,
            93,
            104,
            0.2
        );
}



/*
 * ============================================================
 * AZEROTH ACCESS
 * ============================================================
 */

.azeroth-access {
    margin-top: 2rem;
}

.azeroth-section-title {
    display: inline-block;
    margin: 0 0 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--kal-cyan);
    color: var(--kal-text);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.azeroth-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid var(--kal-border);
    border-radius: 14px;
    background: var(--kal-border);
}

.azeroth-access-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 76px;
    padding: 1rem 1.15rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), transparent),
        var(--kal-bg-soft);
}

.azeroth-access-label {
    color: var(--kal-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.azeroth-access-value {
    color: var(--kal-text);
    font-size: 0.98rem;
    font-weight: 700;
}

.azeroth-realm-config {
    overflow: hidden;
    margin-top: 1.25rem;
    border: 1px solid var(--kal-border);
    border-radius: 14px;
    background: var(--kal-bg-soft);
}

.azeroth-realm-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--kal-border);
}

.azeroth-copy-button {
    min-width: auto;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(53, 208, 255, 0.45);
    border-radius: 8px;
    background: rgba(53, 208, 255, 0.06);
    box-shadow: none;
    color: var(--kal-cyan);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.azeroth-copy-button:hover {
    border-color: var(--kal-cyan);
    background: rgba(53, 208, 255, 0.12);
    color: #7ee6ff;
    filter: none;
}

.azeroth-code {
    padding: 1rem;
    background: #0c1219;
}

.azeroth-code code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kal-green);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow-x: auto;
}

.azeroth-access-note {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--kal-border);
    border-radius: 12px;
    background: rgba(53, 208, 255, 0.025);
    color: var(--kal-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/*
 * Azeroth info
 */

.azeroth-info {

    margin-top:
        2rem;
}


.azeroth-info p {

    color:
        var(--kal-muted) !important;
}


/*
 * Azeroth footer
 */

.azeroth-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        3rem;

    padding-top:
        1.25rem;

    border-top:
        1px solid
        var(--kal-border);

    color:
        var(--kal-muted);

    font-size:
        0.8rem;
}


/*
 * ============================================================
 * FOOTER
 * ============================================================
 */

footer,
#footer,
.footer {
    display: none !important;
}

/* No bright strip below the custom pages */
html,
body,
#body-wrapper,
.page-wrapper {
    min-height: 100%;
    background-color: var(--kal-bg) !important;
}


/*
 * ============================================================
 * SCROLLBAR
 * ============================================================
 */

* {

    scrollbar-color:
        var(--kal-border)
        var(--kal-bg);
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media
(max-width: 760px) {

    .kal-grid {

        grid-template-columns:
            1fr;
    }


    .kal-home,
    .azeroth-page {

        padding:
            2rem 1rem 3rem;
    }


    .kal-card {

        min-height:
            220px;
    }


    .kalidaya-brand-text {

        font-size:
            0.9rem;

        letter-spacing:
            0.12em;
    }


    .azeroth-status-row {

        align-items:
            flex-start;
    }



    .azeroth-access-grid {
        grid-template-columns: 1fr;
    }

    .azeroth-realm-config-header {
        align-items: flex-start;
    }

    .azeroth-footer {

        flex-direction:
            column;
    }
}


/*
 * ============================================================
 * AZEROTH REGISTRATION
 * ============================================================
 */

.azeroth-register {
    margin-top: 2rem;
}

.azeroth-register-intro {
    max-width: 680px;
    margin: 0 0 1.25rem;
    color: var(--kal-muted) !important;
    font-size: 0.9rem;
    line-height: 1.6;
}

.azeroth-register-form {
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid var(--kal-border);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(53, 208, 255, 0.025),
            transparent
        ),
        var(--kal-bg-soft);
}

.azeroth-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.azeroth-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.azeroth-form-field-wide {
    grid-column: 1 / -1;
}

.azeroth-form-field label {
    color: var(--kal-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.azeroth-form-field label span {
    margin-left: 0.3rem;
    color: var(--kal-muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.azeroth-form-field input {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--kal-border);
    border-radius: 9px;
    outline: none;
    background: #0c1219;
    color: var(--kal-text);
    font: inherit;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.azeroth-form-field input:hover {
    border-color: #3a4c60;
}

.azeroth-form-field input:focus {
    border-color: var(--kal-cyan);
    background: #0d151e;
    box-shadow:
        0 0 0 3px
        rgba(53, 208, 255, 0.08);
}

.azeroth-form-field input::placeholder {
    color: var(--kal-muted);
}

.azeroth-form-hint {
    color: var(--kal-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.azeroth-register-message {
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--kal-border);
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.5;
}

.azeroth-register-message.success {
    border-color:
        rgba(57, 217, 138, 0.4);
    background:
        rgba(57, 217, 138, 0.06);
    color: var(--kal-green);
}

.azeroth-register-message.error {
    border-color:
        rgba(255, 93, 104, 0.4);
    background:
        rgba(255, 93, 104, 0.06);
    color: var(--kal-red);
}

.azeroth-register-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.azeroth-register-button {
    min-width: 170px;
    padding: 0.7rem 1rem;
    border: 1px solid
        rgba(53, 208, 255, 0.55);
    border-radius: 9px;
    background:
        rgba(53, 208, 255, 0.08);
    box-shadow: none;
    color: var(--kal-cyan);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.azeroth-register-button:hover {
    border-color: var(--kal-cyan);
    background:
        rgba(53, 208, 255, 0.14);
    color: #7ee6ff;
    filter: none;
}

.azeroth-register-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.azeroth-register-security {
    color: var(--kal-muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}


/*
 * Registration mobile
 */

@media (max-width: 760px) {

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

    .azeroth-form-field-wide {
        grid-column: auto;
    }

    .azeroth-register-form {
        padding: 1rem;
    }

    .azeroth-register-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .azeroth-register-button {
        width: 100%;
    }
}

/*
 * ============================================================
 * KALIDAYA FOOTER OVERRIDE
 * ============================================================
 */

#footer.kalidaya-footer {
    display: block !important;
}

/*
 * ============================================================
 * KALIDAYA FOOTER – DARK THEME
 * ============================================================
 */

html body #footer.kalidaya-footer {
    display: block !important;
    background: #0a0f14 !important;
    background-color: #0a0f14 !important;
    border-top: 1px solid #263646 !important;
    color: #8da8c2 !important;
}

html body #footer.kalidaya-footer .kalidaya-footer-inner {
    background: transparent !important;
}

html body #footer.kalidaya-footer .kalidaya-footer-brand {
    color: #e9f2fa !important;
}

html body #footer.kalidaya-footer .kalidaya-footer-links {
    color: #8da8c2 !important;
}

html body #footer.kalidaya-footer a {
    color: #8da8c2 !important;
}

html body #footer.kalidaya-footer a:hover {
    color: #35d0ff !important;
}

html body #footer.kalidaya-footer .kalidaya-footer-dot {
    background: #35d0ff !important;
}


/*
 * ============================================================
 * AMATEURFUNK
 * ============================================================
 */

.kal-funk {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.kal-funk-hero {
    margin-bottom: 2.5rem;
}

.kal-funk-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1;
}

.kal-funk-hero p {
    max-width: 720px;
    color: var(--kal-muted) !important;
    font-size: 1.1rem;
}

.kal-funk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.kal-funk-projects {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 16px;
}

.kal-funk-projects h2 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

.kal-funk-project-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--kal-border);
}

.kal-funk-project-row:first-of-type {
    border-top: 0;
}

.kal-funk-project-row strong {
    color: var(--kal-green);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kal-funk-project-row .kal-funk-project-planned {
    color: var(--kal-orange);
}

.kal-funk-footer {
    color: var(--kal-muted);
}

@media (max-width: 760px) {

    .kal-funk-grid {
        grid-template-columns: 1fr;
    }

    .kal-funk {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/*
 * ============================================================
 * APRS
 * ============================================================
 */

.kal-aprs {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.kal-aprs-hero {
    margin-bottom: 2rem;
}

.kal-aprs-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1;
}

.kal-aprs-hero p {
    max-width: 760px;
    color: var(--kal-muted) !important;
    font-size: 1.05rem;
}

.kal-aprs-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: var(--kal-green);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.kal-aprs-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kal-aprs-stat {
    padding: 1.25rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 16px;
}

.kal-aprs-stat-value {
    display: block;
    color: #e9f2fa;
    font-size: 1.8rem;
    font-weight: 700;
}

.kal-aprs-stat-label {
    display: block;
    margin-top: 0.35rem;
    color: var(--kal-muted);
    font-size: 0.85rem;
}

.kal-aprs-panel {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 16px;
}

.kal-aprs-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kal-aprs-panel-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.kal-aprs-frequency {
    color: var(--kal-green);
    font-family: monospace;
    font-size: 0.9rem;
}

#aprs-map {
    height: 520px;
    overflow: hidden;
    border-radius: 12px;
}

.kal-aprs-table-wrap {
    overflow-x: auto;
}

.kal-aprs-table {
    width: 100%;
    border-collapse: collapse;
}

.kal-aprs-table th,
.kal-aprs-table td {
    padding: 0.8rem 0.65rem;
    border-top: 1px solid var(--kal-border);
    text-align: left;
    vertical-align: top;
}

.kal-aprs-table th {
    color: var(--kal-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kal-aprs-table td {
    font-size: 0.9rem;
}

.kal-aprs-path {
    min-width: 190px;
    font-family: monospace;
    font-size: 0.8rem !important;
}

.kal-aprs-direct {
    color: var(--kal-green);
    font-weight: 700;
}

.kal-aprs-loading {
    padding: 2rem !important;
    color: var(--kal-muted);
    text-align: center !important;
}

.kal-aprs-info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.kal-aprs-info > div {
    display: flex;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 14px;
}

.kal-aprs-info > div > span {
    font-size: 1.4rem;
}

.kal-aprs-info strong {
    display: block;
    font-size: 0.9rem;
}

.kal-aprs-info p {
    margin: 0.2rem 0 0;
    color: var(--kal-muted) !important;
    font-size: 0.82rem;
}


@media (max-width: 900px) {

    .kal-aprs-stats,
    .kal-aprs-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .kal-aprs {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .kal-aprs-stats,
    .kal-aprs-info {
        grid-template-columns: 1fr;
    }

    #aprs-map {
        height: 400px;
    }

}

/* APRS Statistik-Icons */

.kal-aprs-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kal-aprs-stat-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(53, 208, 255, 0.08);
    color: #35d0ff;
}

.kal-aprs-stat-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kal-aprs-stat:nth-child(2) .kal-aprs-stat-icon {
    color: #2fe0c2;
    background: rgba(47, 224, 194, 0.08);
}

.kal-aprs-stat:nth-child(3) .kal-aprs-stat-icon {
    color: #9a72ff;
    background: rgba(154, 114, 255, 0.09);
}

.kal-aprs-stat:nth-child(4) .kal-aprs-stat-icon {
    color: #ffb629;
    background: rgba(255, 182, 41, 0.09);
}

/* APRS Statistik Zusatzinformationen */

.kal-aprs-stat-detail {
    display: block;
    margin-top: 0.35rem;
    color: var(--kal-muted);
    font-size: 0.74rem;
    line-height: 1.2;
}

#aprs-direct-source {
    color: #9a72ff;
    font-family: monospace;
    font-weight: 600;
}

#aprs-station-source {
    color: #ffb629;
    font-family: monospace;
    font-weight: 600;
}


/*
 * ============================================================
 * APRS - TOP DIREKTEMPFÄNGE
 * ============================================================
 */

.kal-aprs-top-direct {
    display: flex;
    flex-direction: column;
}

.kal-aprs-top-direct-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--kal-border);
}

.kal-aprs-top-direct-row:first-child {
    border-top: 0;
}

.kal-aprs-top-direct-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #704cff;
    border-radius: 50%;
    color: #9a72ff;
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 700;
}

.kal-aprs-top-direct-station {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.kal-aprs-top-direct-station strong {
    color: var(--kal-text);
    font-family: monospace;
    font-size: 1rem;
}

.kal-aprs-top-direct-station span {
    color: var(--kal-muted);
    font-size: 0.75rem;
}

.kal-aprs-top-direct-distance {
    color: #9a72ff;
    font-family: monospace;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.kal-aprs-top-direct-empty {
    padding: 1rem 0;
    color: var(--kal-muted);
    font-size: 0.85rem;
}

@media (max-width: 600px) {

    .kal-aprs-top-direct-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 0.7rem;
    }

    .kal-aprs-top-direct-distance {
        font-size: 0.9rem;
    }
}


/*
 * ============================================================
 * APRS - DARK PACKET TABLE
 * ============================================================
 */

.kal-aprs-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--kal-border);
    background: #111a24;
}

.kal-aprs-table {
    width: 100%;
    border-collapse: collapse;
    background: #111a24 !important;
    color: #dce8f3 !important;
}

.kal-aprs-table thead,
.kal-aprs-table thead tr,
.kal-aprs-table thead th {
    background: #111a24 !important;
}

.kal-aprs-table th {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid #2a3948;
    color: #8da8c2 !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.kal-aprs-table tbody,
.kal-aprs-table tbody tr,
.kal-aprs-table tbody td {
    background: #111a24 !important;
}

.kal-aprs-table td {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid #263646;
    color: #dce8f3 !important;
    vertical-align: top;
    font-size: 0.82rem;
}

.kal-aprs-table tbody tr:last-child td {
    border-bottom: 0;
}

.kal-aprs-table tbody tr:hover td {
    background: #162331 !important;
}

.kal-aprs-table td:first-child strong {
    color: #a879ff !important;
    font-family: monospace;
    font-weight: 700;
}

.kal-aprs-table .kal-aprs-direct {
    color: #25e68a !important;
    font-weight: 700;
}

.kal-aprs-table .kal-aprs-path {
    color: #b8c9d8 !important;
    font-family: monospace;
    font-size: 0.75rem;
    white-space: nowrap;
}

.kal-aprs-loading {
    color: #8da8c2 !important;
    text-align: center;
}

@media (max-width: 760px) {

    .kal-aprs-table {
        min-width: 850px;
    }

}


/*
 * ============================================================
 * APRS - ALLZEIT REKORDE
 * ============================================================
 */

.kal-aprs-records {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.kal-aprs-record {
    padding: 1.2rem;
    background: #111a24;
    border: 1px solid var(--kal-border);
    border-radius: 14px;
}

.kal-aprs-record-type {
    color: var(--kal-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kal-aprs-record-value {
    margin-top: 0.45rem;
    color: #e9f2fa;
    font-family: monospace;
    font-size: 1.8rem;
    font-weight: 700;
}

.kal-aprs-record-source {
    margin-top: 0.25rem;
    color: #9a72ff;
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
}

.kal-aprs-record:nth-child(2) .kal-aprs-record-source {
    color: #ffb629;
}

.kal-aprs-record-time {
    margin-top: 0.45rem;
    color: var(--kal-muted);
    font-size: 0.76rem;
}

@media (max-width: 700px) {
    .kal-aprs-records {
        grid-template-columns: 1fr;
    }
}


/*
 * ============================================================
 * AIS
 * ============================================================
 */

.kal-ais {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.kal-ais-hero {
    margin-bottom: 2rem;
}

.kal-ais-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1;
}

.kal-ais-hero p {
    max-width: 760px;
    color: var(--kal-muted) !important;
    font-size: 1.05rem;
}

.kal-ais-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.kal-ais-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kal-ais-stat {
    padding: 1.25rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 14px;
}

.kal-ais-stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
}

.kal-ais-stat-label {
    display: block;
    margin-top: .25rem;
    color: var(--kal-muted);
    font-size: .78rem;
}

.kal-ais-panel {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 16px;
}

.kal-ais-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kal-ais-panel-head h2 {
    margin: .2rem 0 0;
    font-size: 1.25rem;
}

.kal-ais-frequency {
    color: var(--kal-muted);
    font-family: monospace;
    font-size: .8rem;
}

#ais-map {
    height: 560px;
    border-radius: 12px;
    overflow: hidden;
}

.kal-ais-table-wrap {
    overflow-x: auto;
}

.kal-ais-table {
    width: 100%;
    border-collapse: collapse;
}

.kal-ais-table th,
.kal-ais-table td {
    padding: .8rem .65rem;
    text-align: left;
    border-top: 1px solid var(--kal-border);
}

.kal-ais-table thead th {
    border-top: 0;
    color: var(--kal-muted);
    font-size: .75rem;
}

.kal-ais-mmsi {
    color: #a879ff;
    font-family: monospace;
}

.kal-ais-loading {
    color: var(--kal-muted);
    text-align: center !important;
}

.kal-ais-info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.kal-ais-info > div {
    display: flex;
    gap: .8rem;
    padding: 1rem;
    background: var(--kal-panel);
    border: 1px solid var(--kal-border);
    border-radius: 14px;
}

.kal-ais-info p {
    margin: .2rem 0 0;
    color: var(--kal-muted) !important;
    font-size: .8rem;
}

.kal-ais-station-icon,
.kal-ais-ship-icon {
    background: transparent;
    border: 0;
}

.kal-ais-station {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: #111a24;
    border: 1px solid #35d0ff;
    border-radius: 50%;
}

.kal-ais-ship {
    position: relative;
    width: 18px;
    height: 26px;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.65));
}

.kal-ais-ship-body {
    position: absolute;
    left: 4px;
    top: 3px;
    width: 10px;
    height: 19px;
    background: #35d0ff;
    border: 2px solid #e9f2fa;
    border-radius: 5px 5px 7px 7px;
    box-sizing: border-box;
}

.kal-ais-ship-bow {
    position: absolute;
    left: 4px;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid #35d0ff;
}

@media(max-width:800px) {

    .kal-ais-stats,
    .kal-ais-info {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    #ais-map {
        height: 430px;
    }

}

@media(max-width:560px) {

    .kal-ais-stats,
    .kal-ais-info {
        grid-template-columns: 1fr;
    }

    .kal-ais {
        padding-left: 1rem;
        padding-right: 1rem;
    }

}


/*
 * ============================================================
 * KALIDAYA HOME - AIS
 * ============================================================
 */

.kal-ais-home {
    display: block;
    position: relative;
    margin-top: 18px;
    text-decoration: none;
}

.kal-ais-home p {
    max-width: 760px;
}


/*
 * ============================================================
 * NAVIGATION - ACTIVE STATE
 * ============================================================
 */

#header .dropmenu a.active,
#header .dropmenu a.active:hover {
    background: transparent !important;
    color: var(--kal-cyan) !important;
    font-weight: 600;
    box-shadow: none !important;
}

/* Leaflet Popup-Titel auf hellem Popup-Hintergrund lesbar machen */
main .leaflet-popup-content strong {
    color: #111111 !important;
    font-weight: 700;
}