/* Styles for Pluggerboxfamilytree */
/* Modernized with CSS Variables, Grid, and Flexbox */

:root {
    --jt-bg-color: #ffffff;
    --jt-text-color: #333333;
    --jt-text-muted: #666666;
    --jt-border-color: #cccccc;
    --jt-border-light: #f3f3f3;
    --jt-primary-color: #444444;       /* Headers, active elements */
    --jt-secondary-color: #A6A6A6;     /* Inactive tabs, borders */
    --jt-highlight-bg: #ffffcc;
    --jt-hover-bg: #f0f0f0;
    --jt-accent-color: #EB8207;        /* Stars, highlights */
    --jt-link-color: #000000;
    --jt-link-hover: #555555;
    --jt-shadow: 0 4px 6px rgba(0,0,0,0.1);
    --jt-radius: 8px;
    --jt-input-bg: #ffffff;
    --jt-input-border: #cccccc;
    --jt-panel-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --jt-bg-color: #1e1e1e;
        --jt-text-color: #e0e0e0;
        --jt-text-muted: #aaaaaa;
        --jt-border-color: #444444;
        --jt-border-light: #333333;
        --jt-primary-color: #ffffff;
        --jt-secondary-color: #666666;
        --jt-highlight-bg: #444400; /* Darker highlight */
        --jt-hover-bg: #333333;
        --jt-accent-color: #ffaa00;
        --jt-link-color: #8da2c0;
        --jt-link-hover: #a0b3d1;
        --jt-shadow: 0 4px 6px rgba(0,0,0,0.5);
        --jt-input-bg: #2d2d2d;
        --jt-input-border: #555555;
        --jt-panel-bg: #252525;
    }
}

/* General Layout */
#jt-content, #jt-form {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font stack */
    color: var(--jt-text-color);
    background-color: var(--jt-bg-color);
}

#bd.contentpane {
    background: transparent;
}

.jt-clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* Flexbox Forms & Labels */
.jt-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}

.jt-label {
    flex: 0 0 11em;
    font-weight: bold;
}

.jt-iconlabel {
    flex: 0 0 40px;
    text-align: center;
}

.jt-valuelabel {
    flex: 1;
}

/* Grid for Columns */
.jt-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns by default */
    gap: 20px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .jt-grid-row {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .jt-person-info, .jt-picture {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
}

.jt-left-col-label, .jt-right-col-label, .jt-detail-col-label {
    /* Legacy fallback replaced by grid/flex usage in views, preserving classes for compatibility */
    float: none;
    width: auto;
}

/* Card Styling for Sections */
.jt-card {
    background-color: var(--jt-panel-bg);
    border: 1px solid var(--jt-border-light);
    border-radius: var(--jt-radius);
    padding: 15px;
    box-shadow: var(--jt-shadow);
    margin-bottom: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Index Page */
.jt-index-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.jt-index-left {
    grid-column: 1;
}
.jt-index-right {
    grid-column: 2;
}

div.jt-index-size {
    min-height: 250px;
    padding-top: 10px;
}

/* Pagination */
.list-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    padding: 10px 0;
}

.list-footer ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.list-footer li {
    display: inline-block;
}


/* Tabs - Modernized */
#jt-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 2px solid var(--jt-primary-color);
    margin-bottom: 20px;
}

.jt-tab-active, .jt-tab-inactive {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: var(--jt-radius) var(--jt-radius) 0 0;
    background-color: var(--jt-hover-bg);
    border: 1px solid var(--jt-border-color);
    border-bottom: none;
    transition: background-color 0.2s;
    float: none; /* Override legacy */
    width: auto; /* Override legacy */
}

.jt-tab-active {
    background-color: var(--jt-primary-color);
    color: #ffffff; /* Always white on active primary */
    font-weight: bold;
}

.jt-tab-inactive:hover {
    background-color: var(--jt-border-color);
}

.jt-tablabel-active, .jt-tablabel-inactive {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

/* Specific Content - Person View */
.jt-person-container {
    display: flex;
    flex-wrap: wrap; /* Allow stacking */
    gap: 20px;
    background-color: var(--jt-panel-bg);
    padding: 20px;
    border-radius: var(--jt-radius);
    box-shadow: var(--jt-shadow);
}

.jt-person-info {
    flex: 2; /* Takes up 2/3 space */
    width: auto; /* Override float width */
    float: none;
}

.jt-picture {
    flex: 1; /* Takes up 1/3 space */
    width: auto; /* Override float width */
    float: none;
    text-align: center;
}

.jt-picture img {
    max-width: 100%;
    border-radius: var(--jt-radius);
    box-shadow: var(--jt-shadow);
}

.jt-picture-title {
    font-size: 0.9em;
    font-style: italic;
    color: var(--jt-text-muted);
    margin-top: 5px;
}

/* Logs */
.jt-log-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 2fr 2fr;
    gap: 10px;
    padding: 5px;
    border-bottom: 1px solid var(--jt-border-light);
}

.jt-loglabel-datetime, .jt-loglabel-application, .jt-loglabel-description, 
.jt-loglabel-changeobject, .jt-loglabel-user {
    width: auto;
    float: none;
}

/* Forms */
fieldset.pluggerboxfamilytreeform {
    border: 1px solid var(--jt-border-color);
    padding: 20px;
    border-radius: var(--jt-radius);
    background-color: var(--jt-panel-bg);
}

fieldset.pluggerboxfamilytreeform legend {
    color: var(--jt-primary-color);
    font-weight: bold;
    padding: 0 10px;
}

input, textarea, select {
    background-color: var(--jt-input-bg);
    border: 1px solid var(--jt-input-border);
    color: var(--jt-text-color);
    padding: 8px;
    border-radius: 4px;
}

/* Tables */
.jt-table-entry1 td, .jt-table-entry3 td, .jt-table-entry5 td {
    background-color: var(--jt-bg-color);
    border-bottom: 1px solid var(--jt-border-light);
    padding: 10px;
}

.jt-table-entry2 td, .jt-table-entry4 td {
    background-color: var(--jt-hover-bg); /* Zebra striping */
    border-bottom: 1px solid var(--jt-border-light);
    padding: 10px;
}

/* Interactive Elements */
a.jt-button-closed, a.jt-button-up-open, a.jt-button-down-open {
    display: inline-block;
    padding: 5px 10px 5px 25px;
    border-radius: 15px;
    border: 1px solid var(--jt-border-color);
    background-color: var(--jt-bg-color);
    color: var(--jt-text-color);
    transition: all 0.2s;
}

a.jt-button-closed:hover, a.jt-button-up-open:hover, a.jt-button-down-open:hover {
    background-color: var(--jt-hover-bg);
    text-decoration: none;
}

/* Admin/Edit Links */
.jt-edit a {
    color: #e74c3c; /* Red for actions */
    font-weight: bold;
}

/* Utilities */
.jt-hide { display: none; }
.jt-show { display: inline-block; }
.jt-show-block { display: block; margin-top: 15px; }

/* Ancestor Chart */
.jt-ancestor-node {
    border: 1px solid var(--jt-border-color);
    background-color: var(--jt-highlight-bg);
    padding: 5px;
    border-radius: 4px;
    text-align: center;
}

/* Interactive Map Container */
#jtmap-person, #jtmap-relations {
    width: 100% !important; /* Force full width in container */
    height: 300px;
    border-radius: var(--jt-radius);
    border: 1px solid var(--jt-border-color);
    overflow: hidden;
}