:root {
    --primary-dark: #353948;
    --primary-mid:  #353948;
    --row-hover:    #f0f4ff;
    --border:       #b0b8cc;
    --text-dark:    #353948;
    --text-body:    #333333;
    --link-color:   #353948;
    --badge-bg:     #e8ecf5;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f5f7fb;
    color: var(--text-body);
}

.page-wrapper {
    max-width: 100%;
    margin: 40px auto;
    padding: 0 40px;
}

.page-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-dark);
}

/* ── Table shell ── */
.trans-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,39,68,.08);
    border: 1px solid var(--border);
}

/* ── Header row ── */
.trans-table thead tr {
    background: var(--primary-dark);
    color: #fff;
}

.trans-table thead th {
    padding: 8px 14px;
    text-align: center;
    vertical-align: middle;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.15);
}

.trans-table thead th.col-num  { width: 50px;  text-align: center; }
.trans-table thead th.col-date { width: 110px; text-align: center; }
.trans-table thead th.col-link { width: 70px;  text-align: center; }

/* ── Category header rows ── */
.trans-table tr.category-row td {
    background: var(--primary-dark);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: 12px 18px;
    letter-spacing: .02em;
}

/* ── Data rows ── */
.trans-table tbody tr.data-row {
    transition: background .15s;
}


.trans-table tbody td {
    padding: 13px 18px;
    font-size: .875rem;
    color: var(--text-body);
    vertical-align: middle;
    border: 1px solid #b0b8cc !important;
}

.trans-table tbody td.col-num {
    text-align: center;
    font-weight: 600;
    color: #666;
    font-size: .82rem;
}

.trans-table tbody td.col-date {
    text-align: center;
    font-size: .82rem;
    color: #555;
    white-space: nowrap;
}

.trans-table tbody td.col-link {
    text-align: center;
}

/* ── "Үзэх" link badge ── */
.btn-view {
    display: inline-block;
    padding: 5px 14px;
    background: var(--badge-bg);
    color: var(--link-color);
    border-radius: 4px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .02em;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.btn-view:hover {
    background: #faaa18;
    color: #fff;
}

/* ── Empty link placeholder ── */
.no-link {
    color: #bbb;
    font-size: .8rem;
}

/* ── Clickable rows ── */
tr.data-row.has-url { cursor: pointer; }
tr.data-row.has-url:hover td { background: #f0f4ff; }

@media (max-width: 640px) {
    .page-wrapper { margin: 20px auto; padding: 0 14px; }

    .page-title { font-size: .95rem; margin-bottom: 16px; }

    .trans-table { width: 100%; }

    .trans-table thead th.col-link,
    .trans-table tbody td.col-link { display: none; }

    .trans-table thead th {
        padding: 7px 8px;
        font-size: .68rem;
        white-space: normal;
        word-break: keep-all;
    }

    .trans-table thead th.col-num { width: 32px; }

    .trans-table tr.category-row td {
        padding: 9px 10px;
        font-size: .8rem;
        word-break: keep-all;
    }

    .trans-table tbody td {
        padding: 9px 8px;
        font-size: .8rem;
        word-break: break-word;
    }

    .trans-table tbody td.col-num { width: 32px; }
}