/* ============================================================
   Ham Callsign Logger v3.7.0 – frontend styles
   ============================================================ */

.hcl-app { max-width: 760px; margin: 0 auto; font-family: inherit; font-size: 14px; }

/* ── Session bar ─────────────────────────────────────────── */
.hcl-session-bar {
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: #1e3a5f;
    color: #fff;
}
.hcl-session-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: flex-end;
}
.hcl-sess-label {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,255,255,.8);
}
.hcl-sess-input {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 5px;
    color: #fff;
    padding: .3rem .5rem;
    font-size: .85rem;
    min-width: 160px;
}
.hcl-sess-input option { background: #1e3a5f; color: #fff; }
.hcl-sess-input:focus  { outline: none; border-color: rgba(255,255,255,.7); }
.hcl-btn-start {
    background: #fff;
    color: #1e3a5f;
    border: none;
    border-radius: 5px;
    padding: .32rem 1rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    align-self: flex-end;
}
.hcl-session-status {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    color: rgba(255,255,255,.9);
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(255,255,255,.15);
}
.hcl-sess-active-badge {
    background: rgba(56,161,105,.25);
    color: #68d391;
    border: 1px solid rgba(56,161,105,.4);
    border-radius: 20px;
    padding: .08rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
}

/* ── Text block ──────────────────────────────────────────── */
.hcl-text-block {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.hcl-app .hcl-text-block-content p { display: block !important; margin: 0 0 1em !important; }
.hcl-app .hcl-text-block-content p:last-child { margin-bottom: 0 !important; }
.hcl-app .hcl-text-block-content ul,
.hcl-app .hcl-text-block-content ol { display: block !important; margin: .25rem 0 1em 1.5rem !important; padding: 0 !important; }
.hcl-app .hcl-text-block-content li  { display: list-item !important; margin-bottom: .25rem !important; }
.hcl-app .hcl-text-block-content strong,
.hcl-app .hcl-text-block-content b   { font-weight: 700 !important; }
.hcl-app .hcl-text-block-content em,
.hcl-app .hcl-text-block-content i   { font-style: italic !important; }
.hcl-app .hcl-text-block-content a   { color: inherit; text-decoration: underline; }
.hcl-app .hcl-text-block-content br  { display: block !important; }
.hcl-btn-proceed {
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 5px;
    padding: .35rem 1rem;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    display: inline-block;
    margin-top: .75rem;
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* ── Group input table ───────────────────────────────────── */
.hcl-group-table-wrap {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    margin-bottom: 1rem;
    transition: opacity .3s, max-height .3s;
    max-height: 600px;
}
.hcl-group-table--collapsed { opacity: 0; max-height: 0; overflow: hidden; }
.hcl-group-table-header {
    background: #2d5282;
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .45rem 1rem;
}
.hcl-group-grid { display: grid; gap: .45rem; padding: .65rem .65rem .4rem; }
.hcl-group-input {
    width: 100%;
    border: 2px solid #dde3ec;
    border-radius: 6px;
    padding: .35rem .55rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #1e3a5f;
    text-transform: uppercase;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.hcl-group-input:focus        { border-color: #1e3a5f; }
.hcl-group-input--done        { background: #f0fff4; border-color: #68d391; color: #276749; }
.hcl-group-input::placeholder { color: #b0bec5; font-weight: 400; font-size: .8rem; letter-spacing: .01em; }

/* ── Group footer (Skip button row) ─────────────────────── */
.hcl-group-footer {
    display: flex;
    justify-content: flex-end;
    padding: .35rem .65rem .55rem;
    border-top: 1px solid #edf2f7;
}
.hcl-btn-skip {
    background: transparent;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    color: #718096;
    font-size: .75rem;
    font-weight: 600;
    padding: .22rem .65rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
    letter-spacing: .03em;
}
.hcl-btn-skip:hover { background: #edf2f7; border-color: #a0aec0; color: #2d3748; }

/* ── Script area ─────────────────────────────────────────── */
#hcl-script-area { display: flex; flex-direction: column; }

/* ── Tile ────────────────────────────────────────────────── */
.hcl-tile {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
    margin-bottom: .65rem;
}
.hcl-tile-header {
    background: #1e3a5f;
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .35rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.75rem;
}
.hcl-tile-label { flex: 1; }
.hcl-btn-clear {
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: .7rem;
    width: 1.3rem; height: 1.3rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; flex-shrink: 0;
    transition: background .15s;
    line-height: 1;
}
.hcl-btn-clear:hover { background: rgba(229,62,62,.6); }
.hcl-tile-body {
    padding: .5rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* ── Card ────────────────────────────────────────────────── */
.hcl-card {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
    background: #f7fafc;
}
.hcl-card-inner {
    padding: .4rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.hcl-info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .12rem .3rem;
    font-size: .82rem;
    font-family: inherit;
    line-height: 1.5;
}
.hcl-cs-link {
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: #c53030;
    letter-spacing: .04em;
    text-decoration: none;
}
.hcl-cs-link:hover { text-decoration: underline; }
.hcl-sep { color: #cbd5e0; font-size: .7rem; }
.hcl-card-name { font-weight: 700 !important; color: #000 !important; font-size: .82rem; }
.hcl-city-display { display: inline; }
.hcl-city-val     { color: #4a5568; font-style: italic; font-size: .78rem; }
.hcl-nickname-display { display: flex; align-items: center; gap: .18rem; }
.hcl-nickname-val     { color: #6b46c1; font-style: italic; font-weight: 600; }
.hcl-card-class-wrap { color: #4a5568; font-size: .82rem; }
.hcl-gridsq-wrap { display: none !important; }
.hcl-valid-badge    { font-size: .82rem; font-weight: 600; }
.hcl-badge-valid    { color: #38a169; }
.hcl-badge-expired  { color: #e53e3e; }

/* ── Editable fields ─────────────────────────────────────── */
.hcl-card-fields {
    border-top: 1px solid #e2e8f0;
    padding-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.hcl-field-row--inline { display: flex; gap: .5rem; }
.hcl-field-row--inline .hcl-label:first-child { flex: 3; }
.hcl-field-row--inline .hcl-label:last-child  { flex: 2; }
.hcl-label {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .76rem;
    font-weight: 600;
    color: #4a5568;
}
.hcl-label-title { display: flex; align-items: baseline; gap: .3rem; line-height: 1.4; }
.hcl-optional { font-weight: 400; color: #a0aec0; font-size: .72rem; }
.hcl-label input,
.hcl-label textarea {
    border: 1px solid #dde3ec;
    border-radius: 4px;
    padding: .22rem .4rem;
    font-size: .82rem;
    color: #2d3748;
    background: #fff;
    resize: vertical;
    font-family: inherit;
    transition: border-color .15s;
    box-sizing: border-box;
    width: 100%;
}
.hcl-label input:focus,
.hcl-label textarea:focus    { outline: none; border-color: #1e3a5f; }
.hcl-label input:disabled,
.hcl-label textarea:disabled { background: #f0f4f8; color: #718096; cursor: default; }

/* ── Actions ─────────────────────────────────────────────── */
.hcl-card-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    border-top: 1px solid #e2e8f0;
    padding-top: .38rem;
}
.hcl-btn {
    padding: .25rem .8rem;
    border: none;
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.hcl-btn-log  { background: #1e3a5f; color: #fff; }
.hcl-btn-edit { background: #e2e8f0; color: #2d3748; }
.hcl-btn-edit:hover { filter: brightness(1.05); }
.hcl-save-status { font-size: .73rem; font-weight: 600; }
.hcl-status-ok  { color: #38a169; }
.hcl-status-err { color: #e53e3e; }

/* ── Expired overlay ─────────────────────────────────────── */
.hcl-expired-overlay {
    position: absolute; inset: 0; background: rgba(229,62,62,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 900; color: #c53030; letter-spacing: .12em;
    pointer-events: none; border: 2px solid #fc8181; border-radius: 7px;
}

/* ── Messages ────────────────────────────────────────────── */
.hcl-message   { font-size: .75rem; min-height: .9rem; }
.hcl-msg-error { color: #e53e3e; font-weight: 600; }
.hcl-msg-info  { color: #718096; font-style: italic; }

/* ── Close Net bar ───────────────────────────────────────── */
.hcl-close-bar {
    background: #fff;
    border: 2px solid #1e3a5f;
    border-radius: 10px;
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    position: sticky;
    bottom: 1rem;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.hcl-close-bar--complete { border-color: #38a169; background: #f0fff4; }
.hcl-btn-close {
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .45rem 1.25rem;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.hcl-close-status { font-size: .84rem; font-weight: 600; }

/* ── Login gate ──────────────────────────────────────────── */
.hcl-notice {
    padding: 1rem;
    background: #ebf8ff;
    border-left: 4px solid #3182ce;
    border-radius: 4px;
    color: #2b6cb0;
}

/* ============================================================
   CALLSIGN STATS SHORTCODE  [callsign_stats]
   ============================================================ */
.hcl-stats-wrap {
    max-width: 860px;
    margin: 0 auto;
    font-family: inherit;
    font-size: 14px;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.hcl-stats-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: .85rem 1rem;
    background: #f6f7f7;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    margin-bottom: .75rem;
}
.hcl-stats-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: .25rem;
    letter-spacing: .03em;
}
.hcl-stats-search {
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    padding: .38rem .6rem;
    font-size: .9rem;
    width: 190px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.hcl-stats-search:focus { border-color: #1e3a5f; }
.hcl-stats-sort {
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    padding: .38rem .55rem;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    background: #fff;
    cursor: pointer;
    min-width: 200px;
}
.hcl-stats-btn-csv {
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    padding: .4rem 1rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    transition: filter .15s;
    align-self: flex-end;
    background: #e2e8f0;
    color: #2d3748;
}
.hcl-stats-btn-csv:hover { filter: brightness(1.08); }

/* ── Pagination bar ──────────────────────────────────────── */
.hcl-stats-pagination { margin: .5rem 0; }

.hcl-stats-pg-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .4rem .1rem;
}
.hcl-stats-pg-info {
    font-size: .82rem;
    color: #4a5568;
}
.hcl-stats-pg-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.hcl-stats-pg-btn {
    background: #fff;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    color: #2d3748;
    font-size: .8rem;
    font-weight: 600;
    padding: .22rem .58rem;
    cursor: pointer;
    min-width: 2rem;
    text-align: center;
    transition: background-color .12s, border-color .12s, color .12s;
    line-height: 1.4;
}
.hcl-stats-pg-btn:hover {
    background: #edf2f7;
    border-color: #a0aec0;
}
.hcl-stats-pg-btn.hcl-stats-pg-active {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #fff;
    cursor: default;
}

/* ── Table ───────────────────────────────────────────────── */
.hcl-stats-table-wrap {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dde3ec;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.hcl-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.hcl-stats-table thead tr {
    background: #c53030;
}
.hcl-stats-table thead th {
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .7rem 1rem;
    text-align: left;
    border: none;
}
.hcl-stats-table tbody tr {
    border-bottom: 1px solid #edf2f7;
    transition: background .12s;
}
.hcl-stats-table tbody tr:last-child { border-bottom: none; }
.hcl-stats-table tbody tr:nth-child(even) { background: #f7fafc; }
.hcl-stats-table tbody tr:hover { background: #ebf8ff; }
.hcl-stats-table td {
    padding: .65rem 1rem;
    vertical-align: top;
    color: #2d3748;
}

/* Callsign cell */
.hcl-stats-call {
    font-weight: 700;
    font-size: .92rem;
    color: #1e3a5f;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Name cell */
.hcl-stats-name {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .85rem;
    color: #2d3748;
}

/* Count cell */
.hcl-stats-count {
    font-weight: 700;
    font-size: .95rem;
    color: #1e3a5f;
    text-align: center;
    white-space: nowrap;
}

/* Dates cell */
.hcl-stats-dates {
    font-size: .8rem;
    color: #4a5568;
    line-height: 1.6;
}
.hcl-stats-sep {
    margin: 0 .3rem;
    color: #cbd5e0;
    font-size: .7rem;
}
.hcl-stats-more-btn {
    background: none;
    border: none;
    color: #3182ce;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: .25rem;
    text-decoration: none;
    transition: color .12s;
}
.hcl-stats-more-btn:hover { color: #2b6cb0; text-decoration: underline; }
.hcl-stats-more-dates { font-size: .8rem; color: #4a5568; }