/* Final presentation layer. Loaded after page-local legacy styles. */
:root {
    --control-radius: 7px;
    --surface-radius: 9px;
}

body {
    font-size: 16px;
    line-height: 1.6;
}

.brand-copy strong { font-size: 17px; }
.brand-copy small { font-size: 10px; letter-spacing: .10em; }
.top-nav-link { font-size: 15px; border-radius: 7px; }
.top-nav-link i { font-size: 16px; }
.icon-button { width: 38px; height: 38px; border-radius: 7px; }
.user-avatar { width: 32px; height: 32px; font-size: 13px; }
.page-titlebar .text-muted { font-size: 15px; }

.card-custom,
.form-panel,
.board-device-panel,
.form-section,
.login-layout,
.error-panel,
.modal-content { border-radius: var(--surface-radius)!important; }
.form-control,
.form-select,
.form-control-custom,
.input-group-custom .input-group-text { border-radius: var(--control-radius)!important; }
.btn,
.btn-primary-custom,
.btn-success-custom,
.btn-warning-custom,
.btn-danger-custom,
.btn-secondary-custom,
.btn-login {
    min-height: 42px;
    border-radius: var(--control-radius)!important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}
.btn i { display: inline-block; font-size: .95em; }
.btn-sm-custom {
    display: inline-grid;
    min-width: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0 9px;
    border-radius: 6px!important;
    font-size: 14px;
}
.btn-group > .btn-sm-custom:not(:first-child) { margin-left: 3px; border-radius: 6px!important; }
.btn-group > .btn-sm-custom:first-child { border-radius: 6px!important; }
.btn-primary-custom:hover,
.btn-success-custom:hover { box-shadow: 0 12px 22px color-mix(in srgb, var(--blue) 23%, transparent); }

.form-label { font-size: 15px; }
.form-text { font-size: 14px; }
.table-custom th,
.log-table thead th {
    padding: 15px 16px;
    color: var(--ink-soft)!important;
    font-size: 14px!important;
    font-weight: 700!important;
    letter-spacing: .025em;
}
.table-custom td,
.log-table tbody td {
    padding: 15px 16px;
    color: var(--ink-soft);
    font-size: 15px!important;
    font-weight: 450;
}
.table-custom tbody td:first-child,
.log-table tbody td:first-child { color: var(--ink); font-weight: 550; }
.table-custom code,
code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 13px!important;
    font-weight: 600;
    letter-spacing: .01em;
}
.table-custom .text-muted,
.log-table .text-muted,
.table-custom small,
.log-table small { color: var(--ink-faint)!important; font-weight: 450; }
.card-header-custom strong,
.table-context strong { color: var(--ink-soft); font-weight: 600; }
.card-header-custom {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}
.badge,
.project-tag,
.project-more-btn,
.detail-project-tag,
.badge-project,
.soc-tag {
    border-radius: 6px!important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
}
.card-header-custom .badge.bg-light {
    padding: 4px 8px;
    color: var(--ink-soft)!important;
    font-weight: 600;
}
.ownership-badge { border-radius: 999px!important; font-weight: 600; }

/* Page-local components: normalize their typography and semantic surfaces. */
.soc-tag {
    padding: 4px 10px;
    color: var(--ink)!important;
    background: var(--surface-muted)!important;
    font-size: 13px!important;
}
.project-count { color: var(--ink-faint)!important; font-size: 13px!important; }
.project-count strong { color: var(--blue)!important; }
.project-header i { font-size: 13px!important; }
.project-tag,
.detail-project-tag,
.badge-project,
.project-grid-item {
    padding: 4px 10px;
    color: var(--blue)!important;
    background: var(--blue-soft)!important;
    border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent)!important;
    font-size: 13px!important;
}
.project-more-btn {
    padding: 4px 10px;
    color: var(--ink-soft)!important;
    background: var(--surface-muted)!important;
    border: 1px dashed var(--line-strong)!important;
    font-size: 13px!important;
}
.project-more-btn:hover,
.detail-project-tag:hover,
.detail-project-tag.active {
    color: #fff!important;
    background: var(--blue-strong)!important;
    border-color: var(--blue-strong)!important;
}
.ownership-badge { padding: 4px 11px; font-size: 13px!important; }
.ownership-self { color: var(--green)!important; background: var(--green-soft)!important; border-color: color-mix(in srgb, var(--green) 30%, transparent)!important; }
.ownership-other { color: var(--amber)!important; background: var(--amber-soft)!important; border-color: color-mix(in srgb, var(--amber) 30%, transparent)!important; }

.info-label { font-size: 13px!important; }
.info-label i { font-size: 13px!important; }
.info-value,
.info-text { font-size: 15px!important; }
.info-value { min-height: 42px; border-radius: 7px!important; }
.info-copy-btn { border-radius: 6px!important; font-size: 13px!important; }
.detail-project-section { border-radius: 8px!important; }
.detail-project-header { font-size: 15px!important; }
.kv-list { font-size: 14px!important; }
.kv-label,
.kv-value,
.kv-old,
.kv-new { font-size: 13px!important; }

/* Compact period selection for the statistics toolbar. */
.period-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.period-picker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}
.period-picker-label i { color: var(--blue); }
.period-picker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.period-picker-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 11px;
    color: var(--ink-soft)!important;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.period-picker-option:hover {
    color: var(--blue-strong)!important;
    background: color-mix(in srgb, var(--blue-soft) 68%, transparent);
}
.period-picker-option.is-active {
    color: #fff!important;
    background: var(--blue-strong);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--blue-strong) 24%, transparent);
}
.period-range-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    color: var(--ink)!important;
    background: var(--surface)!important;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}
.period-range-trigger:hover { color: var(--blue-strong)!important; border-color: var(--blue); }

/* Log detail keeps a stable reading column instead of centering a narrow block at the far edge. */
.log-table { table-layout: fixed; min-width: 1120px; }
.log-table .col-detail { padding: 14px 18px!important; text-align: left!important; }
.log-table .detail-content {
    display: block;
    width: min(100%, 420px);
    min-width: 0;
    margin: 0;
    text-align: left;
}
.log-table .detail-header { margin-bottom: 7px; text-align: left; }
.log-table .kv-item,
.log-table .kv-compare { align-items: flex-start; white-space: normal; }
.log-table .kv-value,
.log-table .kv-old,
.log-table .kv-new {
    min-width: 0;
    overflow-wrap: anywhere;
}
.log-table .col-serial code {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dark theme: rich dark surfaces with enough text contrast for dense tables. */
html[data-theme="dark"] {
    --canvas: #0c1320;
    --surface: #131d2b;
    --surface-raised: #192534;
    --surface-muted: #223142;
    --ink: #eef4f8;
    --ink-soft: #bfccda;
    --ink-faint: #91a2b6;
    --line: #304356;
    --line-strong: #486077;
    --blue: #43d1c5;
    --blue-strong: #20b8ae;
    --blue-soft: #133f3d;
    --green: #72daa0;
    --green-soft: #173e2b;
    --amber: #f1b36f;
    --amber-soft: #49331f;
    --red: #f39191;
    --red-soft: #4b282d;
    --violet: #afa3f5;
    --shadow-sm: 0 12px 28px rgba(0, 0, 0, .22);
    --shadow-md: 0 24px 52px rgba(0, 0, 0, .34);
}
html[data-theme="dark"],
html[data-theme="dark"] body { background: var(--canvas); }
html[data-theme="dark"] body:not(.login-page):not(.error-page) {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(32, 184, 174, .13), transparent 28%),
        radial-gradient(circle at 92% 5%, rgba(175, 163, 245, .10), transparent 24%),
        var(--canvas);
}
html[data-theme="dark"] body:not(.login-page):not(.error-page)::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: '';
    background-image:
        linear-gradient(rgba(185, 204, 219, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(185, 204, 219, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
html[data-theme="dark"] .app-header {
    border-bottom-color: rgba(72, 96, 119, .72);
    background: rgba(12, 19, 32, .82);
    backdrop-filter: blur(20px);
}
html[data-theme="dark"] .top-nav-link:hover,
html[data-theme="dark"] .top-nav-link.active { color: var(--blue)!important; background: rgba(67, 209, 197, .12); }
html[data-theme="dark"] .icon-button:hover { color: var(--blue); background: rgba(67, 209, 197, .10); border-color: rgba(67, 209, 197, .18); }
html[data-theme="dark"] .card-custom,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .board-device-panel,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .toolbar-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .login-layout,
html[data-theme="dark"] .error-panel {
    background: rgba(19, 29, 43, .94)!important;
    border-color: var(--line)!important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control-custom { background: #101a27!important; }
html[data-theme="dark"] .input-group-custom .input-group-text,
html[data-theme="dark"] .bg-light { background: var(--surface-muted)!important; }
html[data-theme="dark"] .table-custom,
html[data-theme="dark"] .log-table { color: var(--ink)!important; background: var(--surface)!important; }
html[data-theme="dark"] .table-custom thead,
html[data-theme="dark"] .table-custom thead th,
html[data-theme="dark"] .log-table thead th,
html[data-theme="dark"] .card-header-custom,
html[data-theme="dark"] .project-modal .modal-header {
    color: #c7d5e2!important;
    background: #1a2938!important;
    border-color: var(--line)!important;
}
html[data-theme="dark"] .table-custom td,
html[data-theme="dark"] .log-table tbody td { color: var(--ink-soft)!important; border-bottom-color: var(--line)!important; }
html[data-theme="dark"] .table-custom tbody td:first-child,
html[data-theme="dark"] .log-table tbody td:first-child { color: var(--ink)!important; }
html[data-theme="dark"] .table-custom tbody tr:hover,
html[data-theme="dark"] .log-table tbody tr:hover { background: rgba(67, 209, 197, .075)!important; }
html[data-theme="dark"] .table-custom code,
html[data-theme="dark"] code { color: #d9f7ee!important; background: #233344!important; }
html[data-theme="dark"] .info-value { color: var(--ink)!important; background: #182534!important; border-color: var(--line)!important; }
html[data-theme="dark"] .info-value:hover { background: #1d2c3c!important; border-color: var(--line-strong)!important; }
html[data-theme="dark"] .info-value-remark { color: var(--amber)!important; background: var(--amber-soft)!important; border-color: color-mix(in srgb, var(--amber) 40%, transparent)!important; }
html[data-theme="dark"] .detail-project-section { background: linear-gradient(135deg, #182534, #172639)!important; border-color: var(--line)!important; }
html[data-theme="dark"] .detail-project-header { color: var(--ink)!important; border-bottom-color: var(--line)!important; }
html[data-theme="dark"] .kv-value { color: var(--ink)!important; background: #223142!important; }
html[data-theme="dark"] .kv-old { color: var(--red)!important; background: var(--red-soft)!important; }
html[data-theme="dark"] .kv-new { color: var(--green)!important; background: var(--green-soft)!important; }
html[data-theme="dark"] .btn-secondary-custom { color: var(--ink)!important; background: #1b2a39!important; border-color: var(--line-strong)!important; }
html[data-theme="dark"] .btn-secondary-custom:hover { background: #243546!important; }
html[data-theme="dark"] .period-picker-options { background: #152231; border-color: var(--line); }
html[data-theme="dark"] .period-range-trigger { background: #152231!important; border-color: var(--line-strong); }

@media (max-width: 820px) {
    .table-custom th,
    .log-table thead th { padding: 13px 14px; }
    .table-custom td,
    .log-table tbody td { padding: 13px 14px; }
}

@media (max-width: 520px) {
    .brand-copy strong { font-size: 16px; }
    .page-titlebar .text-muted { font-size: 14px; }
    .btn { font-size: 14px; }
}