* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #111;
    color: #eee;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    min-height: 100vh;
}


.page {
    width: 100%;
    padding: 16px;
}


.layout {
    max-width: 1200px;
    margin: 0 auto;

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

    gap: 16px;
}


.card {
    background: #1b1b1b;
    border: 1px solid #3a3a3a;
    border-radius: 10px;

    padding: 14px;

    min-width: 0;
}


.card h2 {
    margin: 0 0 12px 0;

    font-size: 1.1rem;
    font-weight: 600;
}


.search {
    width: 100%;

    padding: 9px 10px;

    background: #111;
    color: #eee;

    border: 1px solid #555;
    border-radius: 7px;

    font: inherit;

    margin-bottom: 12px;
}


.search:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: #888;
}


.table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #333;
    border-radius: 7px;
}


table {
    width: 100%;

    border-collapse: collapse;

    font-size: 0.95rem;
}


th,
td {
    padding: 9px 10px;

    text-align: left;

    border-bottom: 1px solid #333;

    white-space: nowrap;
}


th {
    background: #242424;

    font-weight: 600;
}


tbody tr {
    cursor: pointer;
}


tbody tr:hover {
    background: #292929;
}


tbody tr.selected {
    background: #383838;
}


tbody tr:last-child td {
    border-bottom: none;
}


.buttons {
    display: flex;

    gap: 8px;

    margin-top: 12px;
}


button {
    font: inherit;

    border: 1px solid #555;

    background: #292929;

    color: #eee;

    border-radius: 7px;

    padding: 8px 14px;

    cursor: pointer;
}


button:hover {
    background: #383838;
}


button:focus-visible {
    outline: 2px solid #aaa;
    outline-offset: 2px;
}


button:disabled {
    opacity: 0.45;
    cursor: default;
}


button.danger {
    border-color: #744;
}


button.danger:hover {
    background: #492828;
}


.details-empty {
    color: #999;

    padding: 20px 4px;
}


.detail-row {
    margin-bottom: 14px;
}


.detail-label {
    color: #999;

    font-size: 0.85rem;

    margin-bottom: 4px;
}


.detail-value {
    min-height: 20px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


.copy-row {
    display: flex;

    align-items: center;

    gap: 8px;
}


.copy-row .detail-value {
    flex: 1;
}


.copy-row button {
    padding: 5px 10px;

    font-size: 0.85rem;
}


.separator {
    height: 1px;

    background: #333;

    margin: 18px 0;
}


.notes {
    white-space: pre-wrap;

    overflow-wrap: anywhere;

    line-height: 1.5;

    min-height: 40px;
}


.hint {
    margin-top: 20px;

    color: #777;

    font-size: 0.85rem;
}


/* ------------------------------------------------------------
   MODAL
   ------------------------------------------------------------ */

.modal-backdrop {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.7);
}


.modal-backdrop.open {
    display: flex;
}


.modal {
    width: 100%;

    max-width: 520px;

    background: #1b1b1b;

    border: 1px solid #444;

    border-radius: 10px;

    padding: 18px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


.modal h3 {
    margin: 0 0 16px 0;

    font-size: 1.1rem;
}


.form-group {
    margin-bottom: 13px;
}


.form-group label {
    display: block;

    margin-bottom: 5px;

    color: #bbb;

    font-size: 0.9rem;
}


.form-group input,
.form-group textarea {
    width: 100%;

    padding: 9px 10px;

    background: #111;

    color: #eee;

    border: 1px solid #555;

    border-radius: 7px;

    font: inherit;
}


.form-group textarea {
    min-height: 110px;

    resize: vertical;
}


.modal-buttons {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 18px;
}


.modal-buttons button:last-child {
    background: #383838;

    border-color: #777;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 800px) {

    .layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .page {
        padding: 8px;
    }


    .card {
        padding: 12px;
    }


    th,
    td {
        padding: 8px;
    }


    .buttons {
        flex-wrap: wrap;
    }


    .buttons button {
        flex: 1;
    }

}