/* Component re-theme on top of Bootstrap 4 + Minaati style.css.
   Loaded last; reads tokens.css. Page markup stays as it is. */

body, .app-shell {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-family: var(--font); font-weight: 600; }
p, li, td, th, label, span, div { font-family: inherit; }
a { color: var(--sky); }
a:hover { color: var(--sky-deep); }
small, .small { color: inherit; }
hr { border-top-color: var(--line); }
code, pre, kbd { font-family: var(--mono); }
::selection { background: var(--sky-soft); }
.text-muted { color: var(--ink-3) !important; }
.text-dark { color: var(--ink) !important; }
.text-primary { color: var(--sky) !important; }
.text-success { color: var(--green-text) !important; }
.text-danger { color: var(--red-text) !important; }
.text-warning { color: var(--amber-text) !important; }
.text-info { color: var(--info-text) !important; }
.bg-primary { background-color: var(--sky) !important; }
.bg-light { background-color: var(--bg) !important; }
.bg-white { background-color: var(--card) !important; }
.border-primary { border-color: var(--sky) !important; }
.bg-primary-rgba { background-color: var(--sky-tint) !important; }
.bg-success-rgba { background-color: var(--green-soft) !important; }
.bg-danger-rgba { background-color: var(--red-soft) !important; }
.bg-warning-rgba { background-color: var(--amber-soft) !important; }
.bg-info-rgba { background-color: var(--info-soft) !important; }
.bg-light-rgba, .bg-white-rgba { background-color: var(--line-soft) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--line) !important; }

/* cards */
.card {
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.card .card { box-shadow: none; }
.card.shadow, .card.shadow-sm, .shadow { box-shadow: var(--shadow-sm) !important; }
.card-header {
  background: var(--card-head);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  color: var(--ink);
}
.card-header:first-child { border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; padding: 14px 16px; }
.card-header.bg-primary-rgba, .card-header.bg-dark-rgba, .card-header.bg-primary, .card-header.bg-light, .card-header.bg-secondary, .card-header.bg-transparent { background: var(--card-head) !important; color: var(--ink) !important; }
.card.bg-light, .card.bg-secondary, .card.bg-primary-rgba, .card-body.bg-primary-rgba, .card-body.bg-light, .card-body.bg-dark-rgba { background: var(--card) !important; color: var(--ink-2) !important; }
.card.bg-primary .card-header, .card.bg-danger .card-header, .card.bg-info .card-header, .card.bg-success .card-header { background: transparent !important; color: #fff !important; }
.card-header.bg-dark-rgba *, .card-header.bg-primary * { color: inherit; }
.card-header .card-title, .card-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.card-header .card-title.text-primary, .card-header h5.text-primary { color: var(--ink) !important; }
.card-body { padding: 16px; color: var(--ink-2); }
.card-footer { background: transparent; border-top: 1px solid var(--line-soft); }
.card.border-primary, .card.border-success, .card.border-danger, .card.border-warning, .card.border-info { border-width: 1px; }
.card.bg-info, .card.bg-success, .card.bg-danger, .card.bg-primary { border: 0; }
.card.bg-info { background: var(--info) !important; }
.card.bg-success { background: var(--green) !important; }
.card.bg-danger { background: var(--red) !important; }
.card .card-header.border-white { border-bottom-color: rgba(255, 255, 255, .25) !important; }

/* buttons */
.btn {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  line-height: 1.4;
  box-shadow: none !important;
  font-family: var(--font);
  transition: background-color .1s, border-color .1s, color .1s;
}
.btn:focus { box-shadow: none !important; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--sky-rgb), .2) !important; }
.btn-sm, .btn-group-sm > .btn { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn-lg { padding: 10px 18px; font-size: 14px; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  background: var(--sky); border-color: var(--sky); color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--sky); border-color: var(--sky); opacity: .5; }
.btn-primary-rgba, .btn-light-rgba { background: var(--sky-soft); border-color: transparent; color: var(--sky-deep); }
.btn-primary-rgba:hover { background: var(--sky); color: #fff; }
.btn-outline-primary { border-color: var(--line); color: var(--ink-2); background: var(--card); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--hover); border-color: var(--line); color: var(--ink); }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-default {
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-light:hover, .btn-default:hover,
.btn-secondary:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle, .show > .btn-secondary.dropdown-toggle {
  background: var(--hover); border-color: var(--line); color: var(--ink);
}
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); }
.btn-success { background: var(--sky); border-color: var(--sky); color: #fff; }
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.btn-outline-success { border-color: var(--line); color: var(--ink-2); background: var(--card); }
.btn-outline-success:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--card); border: 1px solid var(--line); color: var(--red-text); }
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background: var(--red-soft); border-color: var(--red-soft); color: var(--red-text); }
.btn-danger.btn-round, .btn-danger[aria-label], .modal-footer .btn-danger, .btn-danger.btn-block { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger.btn-round:hover, .modal-footer .btn-danger:hover, .btn-danger.btn-block:hover { filter: brightness(.95); color: #fff; }
.btn-outline-danger { border-color: var(--line); color: var(--red-text); background: var(--card); }
.btn-outline-danger:hover { background: var(--red-soft); border-color: var(--red-soft); color: var(--red-text); }
.btn-warning, .btn-outline-warning { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.btn-warning:hover, .btn-outline-warning:hover, .btn-warning:not(:disabled):not(.disabled):active { background: var(--hover); border-color: var(--line); color: var(--ink); }
.btn-info, .btn-outline-info { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.btn-info:hover, .btn-outline-info:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.btn-link { color: var(--sky); }
.btn-round { border-radius: 50%; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-round.font-18 { font-size: 15px; }
.btn-rounded { border-radius: var(--r-pill); }
.btn-block { display: block; width: 100%; }
.button-list .btn { margin: 0 2px 4px 0; }
.dropdown-toggle::after { margin-left: 6px; }

/* forms */
.form-control, .custom-select, .form-control-sm, select.form-control {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--font);
  height: calc(1.5em + .75rem + 4px);
  box-shadow: none;
}
textarea.form-control { height: auto; }
.form-control-sm { height: calc(1.5em + .5rem + 2px); font-size: 12.5px; border-radius: 6px; }
.form-control:focus, .custom-select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(var(--sky-rgb), .15) !important; background: var(--card); color: var(--ink); }
.form-control::placeholder { color: var(--ink-4); }
.form-control:disabled, .form-control[readonly] { background: var(--bg); color: var(--ink-3); }
label, .col-form-label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.form-text { color: var(--ink-3); }
.input-group-text { background: var(--bg); border-color: var(--line); color: var(--ink-3); border-radius: 8px; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--sky); border-color: var(--sky); }
.custom-control-label::before { border-color: var(--line); background: var(--card); }
.custom-switch .custom-control-label::after { background: var(--ink-4); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background: #fff; }
.form-check-input { accent-color: var(--sky); }
input[type=checkbox], input[type=radio] { accent-color: var(--sky); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; height: auto; align-self: stretch; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; height: auto; align-self: stretch; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.input-group-append .btn { border-color: var(--line); background: var(--bg); color: var(--ink-3); }

/* tables */
.table { color: var(--ink); background: transparent; font-size: 13.5px; margin-bottom: 0; }
.table th, .table td { border-top: 1px solid var(--line-soft); padding: 11px 12px; vertical-align: middle; }
.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  background: transparent;
  white-space: nowrap;
}
.table-hover tbody tr:hover { background: var(--sky-tint); color: var(--ink); }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-bordered { border: 1px solid var(--line); border-radius: 8px; }
.table-bordered th, .table-bordered td { border: 1px solid var(--line-soft); }
.table-bordered thead th { background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink-3); }
.table td, .table td .text-muted, .table td span:not(.badge) { color: var(--ink-2); }
.table td b, .table td strong { color: var(--ink); }
.table td a { color: var(--ink); font-weight: 500; }
.table td a:hover { color: var(--sky); }
.table td .fa-pencil, .table td .ri-pencil-line, .table td .ri-edit-line { color: var(--ink-4); margin-left: 4px; }
.table td .fa-trash, .table td .ri-delete-bin-line { color: var(--ink-4); margin-left: 4px; }
.table td .fa-trash:hover, .table td .fa-pencil:hover { color: var(--red); }
.table .thead-light th { background: var(--bg); color: var(--ink-3); border-color: var(--line); }
.table-responsive { border-radius: var(--r); }
.card > .table-responsive, .card > .table { border-radius: var(--r); overflow: hidden; }

/* badges + pills */
.badge {
  font-weight: 500;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  vertical-align: middle;
}
.badge-primary { background: var(--sky-soft); color: var(--sky-deep); }
.badge-secondary, .badge-light { background: var(--line-soft); color: var(--ink-2); }
.badge-success { background: var(--green-soft); color: var(--green-text); }
.badge-danger { background: var(--red-soft); color: var(--red-text); }
.app-dot.badge-danger, .app-flyout .badge-danger, .dropdown-item .badge-danger { background: var(--red); color: #fff; }
.badge-warning { background: var(--amber-soft); color: var(--amber-text); }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-dark { background: var(--ink); color: var(--bg); }
.badge-pill { border-radius: var(--r-pill); }

/* alerts */
.alert { border-radius: 8px; border: 1px solid transparent; font-size: 13px; padding: 10px 14px; }
.alert-primary { background: var(--sky-tint); border-color: var(--sky-soft); color: var(--ink-2); }
.alert-secondary, .alert-light { background: var(--line-soft); border-color: var(--line); color: var(--ink-2); }
.alert-dark { background: var(--line-soft); border-color: var(--line); color: var(--ink); }
.alert-success { background: var(--green-soft); border-color: transparent; color: var(--green-text); }
.alert-danger { background: var(--red-soft); border-color: transparent; color: var(--red-text); }
.alert-warning { background: var(--amber-soft); border-color: transparent; color: var(--amber-text); }
.alert-info { background: var(--info-soft); border-color: transparent; color: var(--info-text); }

/* dropdowns */
.dropdown-menu {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 6px;
  font-size: 13px;
  color: var(--ink);
  min-width: 180px;
}
.dropdown-item { color: var(--ink-2); border-radius: var(--r-sm); padding: 7px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hover); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--sky-soft); color: var(--sky-deep); }
.dropdown-item i { margin-right: 8px; color: var(--ink-3); }
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--red-text) !important; }
.dropdown-divider { border-top: 1px solid var(--line-soft); margin: 5px 0; }
.dropdown-header { color: var(--ink-4); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 6px 10px 4px; }

/* modals */
.modal-content { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); color: var(--ink); overflow: hidden; }
.modal-header { background: var(--card-head) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 14px 18px; align-items: center; }
.modal-header .close { color: var(--ink-3) !important; opacity: 1; margin: -8px -8px -8px auto; padding: 8px 12px; }
.modal-header .close:hover { color: var(--ink) !important; }
.modal-title, .modal-header h4, .modal-header h5 { font-size: 15px; font-weight: 600; color: var(--ink) !important; margin: 0; }
.modal-body { padding: 18px; color: var(--ink-2); }
.modal-footer { border-top: 1px solid var(--line); background: var(--card-head); padding: 12px 18px; }
.modal-backdrop { background: var(--ink); }
.modal-backdrop.show { opacity: .45; }
.close { color: var(--ink-3); text-shadow: none; opacity: 1; font-weight: 400; }
.close:hover { color: var(--ink); }

/* tabs */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs .nav-link, .nav-tabs.custom-tab-line .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 12px;
  margin-bottom: -1px;
  background: transparent;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav-tabs .nav-link.active, .nav-tabs.custom-tab-line .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--ink);
  border-bottom-color: var(--sky);
  background: transparent;
}
.nav-pills .nav-link { color: var(--ink-2); border-radius: 8px; font-size: 13px; font-weight: 500; padding: 6px 12px; }
.nav-pills .nav-link:hover { background: var(--hover); color: var(--ink); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ink) !important; color: var(--bg) !important; }

/* list groups, pagination, progress, tooltips */
.list-group-item { background: var(--card); border-color: var(--line-soft); color: var(--ink-2); }
.list-group-item.active { background: var(--sky-soft); border-color: var(--sky-soft); color: var(--sky-deep); }
.page-link { color: var(--ink-2); border-color: var(--line); background: var(--card); }
.page-link:hover { background: var(--hover); color: var(--ink); border-color: var(--line); }
.page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.page-item.disabled .page-link { background: var(--card); color: var(--ink-4); border-color: var(--line); }
.progress { background: var(--line-soft); border-radius: var(--r-pill); }
.progress-bar { background: var(--sky); }
.tooltip-inner { background: var(--ink); color: var(--bg); font-family: var(--font); font-size: 12px; border-radius: 6px; }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before { border-top-color: var(--ink); }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before { border-bottom-color: var(--ink); }
.bs-tooltip-left .arrow::before { border-left-color: var(--ink); }
.bs-tooltip-right .arrow::before { border-right-color: var(--ink); }
.popover { background: var(--card); border-color: var(--line); border-radius: var(--r); box-shadow: var(--shadow-md); color: var(--ink); font-family: var(--font); }
.popover-header { background: var(--bg); border-bottom-color: var(--line-soft); color: var(--ink); }
.popover-body { color: var(--ink-2); }
.spinner-border.text-primary { color: var(--sky) !important; }

/* Minaati helpers that pages rely on */
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; min-width: 0; }
.font-12 { font-size: 12px; } .font-13 { font-size: 13px; } .font-14 { font-size: 14px; } .font-16 { font-size: 16px; } .font-18 { font-size: 18px; }
.m-b-30 { margin-bottom: 16px !important; }
.m-t-15 { margin-top: 15px; }
.accordion .card { border: 1px solid var(--line); margin-bottom: 8px; }
.accordion .card-header .btn-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.switchery { border-color: var(--line) !important; box-shadow: var(--line) 0 0 0 0 inset !important; background: var(--line) !important; }
.switchery > small { box-shadow: var(--shadow-sm); }
.scrollable-menu { border: 1px solid var(--line) !important; border-radius: var(--r); background: var(--card); }

/* page-specific legacy classes from theme.css */
.contact-top-info { color: var(--ink); font-size: 18px; font-weight: 600; text-transform: none; height: auto; }
.contact-top-info-meta { color: var(--ink-3); font-size: 13px; font-weight: 400; margin-left: 12px; }
.contact-top-info-divider { color: var(--ink-4); }
.contact-top-info-company { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-top-info-company:hover { color: var(--sky); }
.funnel-topbar-metrics { color: var(--ink); font-size: 13px !important; font-weight: 500 !important; }
.add-trigger-link { color: var(--sky); }
.status-color-dot { border-color: var(--line); }

/* scrollbars: keep the OS overlay behaviour, only tint the thumb */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* dark-mode fallbacks for markup with hard-coded Bootstrap utilities */
html.theme-dark .bg-white, html.theme-dark .bg-light { background-color: var(--card) !important; }
html.theme-dark .text-dark { color: var(--ink) !important; }
html.theme-dark .text-black-50, html.theme-dark .text-secondary { color: var(--ink-3) !important; }
html.theme-dark .border-light { border-color: var(--line) !important; }
html.theme-dark img.img-fluid.invert-dark { filter: invert(1); }
html.theme-dark input, html.theme-dark select, html.theme-dark textarea { background: var(--card); color: var(--ink); border-color: var(--line); }

/* ---------- list tables (contacts, companies, tasks) ---------- */
.app-count { margin-left: 8px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.app-table-card { overflow: hidden; }
.app-table { margin: 0; }
.app-table th, .app-table td { border: 0; border-top: 1px solid var(--line-soft); padding: 10px 14px; vertical-align: middle; }
.app-table thead th { border-top: 0; border-bottom: 1px solid var(--line); background: var(--card-head); color: var(--ink-3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.app-table tbody tr:hover td { background: var(--sky-tint); }
.app-table .app-table-check { width: 36px; padding-right: 0; }
.app-table input[type=checkbox] { width: 15px; height: 15px; vertical-align: middle; accent-color: var(--sky); }
.app-who { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; text-decoration: none; font-weight: 500; }
.app-who:hover { text-decoration: none; }
.app-who:hover b { color: var(--sky); }
.app-who-text { display: flex; flex-direction: column; min-width: 0; }
.app-who-text b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-who-text small { color: var(--ink-3); font-size: 12px; }
.app-avatar-sq { width: 30px; height: 30px; border-radius: 8px; background: var(--sky-soft); color: var(--sky-deep); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.app-mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.app-sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; flex: none; }
.app-muted { color: var(--ink-3) !important; }
.app-muted a { color: var(--ink-2); }
.app-muted a:hover { color: var(--sky); }
.app-empty { text-align: center; color: var(--ink-3); padding: 28px 14px !important; }
.app-pager { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-soft); font-size: 12px; }
.app-pager .pagination { gap: 2px; }
.app-pager .page-link { padding: 3px 8px; font-size: 12px; border-radius: 6px; border: 1px solid var(--line); }

/* column picker (shell.js builds it for .app-table[data-colkey]) */
.app-colpick .dropdown-menu { min-width: 200px; padding: 6px; }
.app-colpick label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0; border-radius: 6px; font-size: 13px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.app-colpick label:hover { background: var(--hover); }
.app-colpick label.fixed { color: var(--ink-4); cursor: default; }
.app-table .app-col-hidden { display: none; }

/* ---------- activity timeline (activity/includes/_activity_row.html) ---------- */
.act-feed { display: flex; flex-direction: column; }
.act-day { font-size: 11px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .4px; padding: 12px 0 4px; }
.act-day:first-child { padding-top: 4px; }
.act-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.act-row:last-child { border-bottom: 0; }
.act-ic { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 17px; margin-top: 0; background: var(--line); color: var(--ink-2); text-decoration: none; transition: transform .1s, filter .1s; }
a.act-ic:hover { transform: scale(1.06); filter: brightness(1.08); text-decoration: none; }
.act-ic.sky { background: var(--sky); color: #fff; }
.act-ic.green { background: var(--green); color: #fff; }
.act-ic.red { background: var(--red); color: #fff; }
.act-ic.amber { background: var(--amber); color: #fff; }
.act-ic.violet { background: var(--violet); color: #fff; }
.act-ic.neutral { background: var(--line); color: var(--ink-2); }
.act-body { flex: 1; min-width: 0; }
.act-line { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.act-line b { font-weight: 600; color: var(--ink); }
.act-line a { color: var(--ink); font-weight: 500; }
.act-line a:hover { color: var(--sky); }
.act-mono { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.act-time { margin-left: auto; font-size: 11.5px; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 8px; }
.act-detail { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; max-width: 640px; }
.act-detail.green { background: var(--green-soft); border-color: transparent; color: var(--green-text); }
.act-detail.red { background: var(--red-soft); border-color: transparent; color: var(--red-text); }
.act-detail .act-k { color: var(--ink-3); }
.act-detail.act-audio { padding: 4px; background: transparent; border: 0; }
.act-detail audio { width: 100%; max-width: 420px; height: 32px; }
.act-edit { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--sky); cursor: pointer; }
.act-edit:hover { text-decoration: underline; }
.act-empty { color: var(--ink-3); font-size: 13px; padding: 10px 0; }
.act-page { max-width: 860px; margin: 0 auto; }
.act-page .act-detail { max-width: none; }
.act-page .act-row { padding: 11px 0; }