body {
    font-family: Arial, sans-serif;
    max-width: 1100px;
    margin: auto;
    padding: 15px;
}

nav {
    margin-bottom: 15px;
}

nav a {
    margin-right: 15px;
    text-decoration: none;
    font-weight: bold;
}

.statusbar {
    margin-top: 10px;
    margin-bottom: 10px;
}

.station-dot {
    display: inline-block;
    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #000;

    margin-right: 6px;
    vertical-align: middle;
}

input,
select,
textarea,
button {

    box-sizing:border-box;
}

button {
    width:auto;
}

.form-row {

    display:flex;
    flex-direction:column;

    gap:5px;
}

.form-row label {
    display: block;
    margin-bottom: -2px;
    font-weight: bold;
}
.inline-row {
    display: flex;
    gap: 20px;
    align-items: end;
}

.inline-row .form-row {
    width: auto;
    margin-bottom: 0;
}

.inline-row input {
    width: auto;
}
.data-table {
    width:100%;
    border-collapse:collapse;
}

.data-table th,
.data-table td {
    padding:8px;
    border:1px solid #ddd;
}

.form-label {

    font-weight:600;
    color:#444;
    margin-top: 6px;
    display: block;
padding-left:5px;
}

.form-input,
.form-textarea{

    width:100%;

    max-width:500px;

    padding:8px 5px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:14px;
}


.form-select{

    width:100%;

    max-width:500px;

    padding:8px 2px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:14px;
}
.log-grid .form-input,
.log-grid .form-select{

    width:100%;

    max-width:none;
}

.color-dot {
    display:inline-block !important;
    width:16px !important;
    height:16px !important;
    line-height:16px !important;
    text-align:center !important;
    border-radius:50% !important;
    border:1px solid black !important;
}

.color-picker {
    width:18px !important;
    height:18px !important;
    padding:0 !important;
    margin:0 !important;
    border:none;
    border-radius:50%;
    overflow:hidden;
    cursor:pointer;
    vertical-align:middle;
}

.inline-form {
    display:inline;
    margin:0;
    padding:0;
}

.inline-form input {
    margin:0 !important;
}

.input-error {
    background:#ffd6d6;
}

.data-table td,
.data-table th {
    padding:6px;
}

.log-grid {
    display:grid;
    gap:12px;
}

.log-row-1 {
    grid-template-columns:
        2.4fr   /* Callsign + QRZ */
        1.1fr   /* Freq */
        0.8fr   /* Band */
        0.8fr   /* Mode */
        0.35fr  /* CAT */
        0.40fr  /* RST RX */
        0.40fr  /* RST TX */
        2.35fr; /* Plaats */
}

.log-row-2 {
    grid-template-columns:
        1.9fr   /* naam */
        1.1fr   /* grid */
        1.85fr   /* afstand */
        4.15fr;  /* organisatie */
}

.log-row-3 {
    grid-template-columns:
        0.8fr /* datum */
        0.8fr   /* time on */
        0.8fr   /* time off */
        0.7fr /* qsl */
        1.5fr /* qsl via */
        0.5fr   /* rayon */
        1.5fr;  /* leeg */
}

.log-row-4 {
    grid-template-columns:
        1fr
        1fr;
}

.log-row-1 .form-input,
.log-row-2 .form-input,
.log-row-3 .form-input,
.log-row-1 .form-select,
.log-row-2 .form-select,
.log-row-3 .form-select {
    max-width:none;
}

@media (max-width:900px) {

    .log-row-1,
    .log-row-2,
    .log-row-3 {
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media (max-width:600px) {

    .log-row-1,
    .log-row-2,
    .log-row-3 {
        grid-template-columns:
            1fr;
    }
}

.log-row-3 .form-checkbox{

    width:20px;

    height:20px;

    margin-top:8px;
}

/* Mobiele invoervelden */
@media (max-width: 768px) {

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px;
        padding: 12px;
    }

    .btn {
        min-height: 48px;
        font-size: 16px;
    }

    .filter-bar{

        display:grid;

        grid-template-columns:1fr;

        gap:8px;
    }

    .filter-bar select,
    .filter-bar input[type=text],
    .filter-bar button{

        width:100%;
    }

    .filter-export{

        margin-top:10px;
    }
}

.log-row-1 .form-label {
    white-space: nowrap;
}

.alert-success {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.alert-warning {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.alert-danger {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.btn-secondary {
    background: #666;
    color: #fff;
}

.btn-secondary:hover{

    background:#555;
}

.btn-danger {
    background: #cc0000;
    color: white;
}

.btn{

    padding:10px 18px;

    border:none;

    border-radius:5px;

    cursor:pointer;

    font-weight:600;
}

.btn-primary{

    background:#0069d9;

    color:#fff;
}

.btn-primary:hover{

    background:#0058b5;
}

#cat-read {
    width: 50px;
    padding: 10px;
}

#cat-read.cat-ok{

    background:#28a745;
    border-color:#28a745;
    color:#fff;

}

#cat-read.cat-error{

    background:#dc3545;
    border-color:#dc3545;
    color:#fff;

}

#rst_rx,
#rst_tx {
    max-width: 50px;
}

@media (max-width: 768px) {

    #rst_rx,
    #rst_tx,
    #cat-read {

        max-width: none;
        width: 100%;

    }

}

#frequency {
    max-width: 120px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    min-width: 1100px;   /* of wat nodig is */
    white-space: nowrap;
}

/* ---------- Filterbalk ---------- */

.filter-bar{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;

    margin-bottom:20px;
}

.filter-bar label{

    font-weight:600;

}

.filter-bar select,
.filter-bar input[type=text]{

    padding:8px 10px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:14px;
}

.filter-bar input[type=text]{

    min-width:220px;
}

.filter-bar button{

    padding:8px 14px;
}

.filter-export{

    width:100%;
}

.button-bar{

    display:flex;

    gap:10px;

    margin-top:20px;
}

@media (max-width:768px){

    .button-bar{

        flex-direction:column;
    }

    .button-bar .btn{

        width:100%;
    }

}

.btn-danger{

    background:#dc3545;

    color:#fff;

    border:1px solid #dc3545;

    padding:10px 18px;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;
}

.btn-danger:hover{

    background:#bb2d3b;

    border-color:#b02a37;
}

@media (max-width:768px){

    .log-grid{

        width:100%;

        overflow:hidden;
    }

    .form-row{

        min-width:0;
    }

    .form-input,
    .form-select,
    .form-textarea{

        width:100%;

        max-width:none;

        min-width:0;
    }

    input[type="date"],
    input[type="time"]{

        width:100%;

        min-width:0;
    }

}

input[type="date"],
input[type="time"]{
    -webkit-appearance: none;
    appearance: none;
}

#cat-indicator{

    display:inline-block;

    width:12px;

    height:12px;

    border-radius:50%;

    margin-left:10px;

    background:#dc3545;

    vertical-align:middle;

}