/* =====================================================================
SEACONTACT 2026 — "Bridge" design system
Global shell reskin. Loads AFTER bootstrap.min.css and content-main*.css
so its rules win the cascade. Replaces the layout grid with CSS Grid and
refreshes shared Bootstrap-3 components (buttons, panels, alerts, forms).
Light + dark themes via [data-theme] on .
--------------------------------------------------------------------- */
/* ----------------------------- Fonts ------------------------------- */
/* Loaded via in layout head; declared here as the stack. */
/* --------------------------- Design tokens ------------------------- */
:root{
--sc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--sc-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
/* brand */
--sc-blue: #1668C9; /* SEACONTACT blue (primary) */
--sc-blue-strong: #1259b0;
--sc-blue-ink: #0B1F3A; /* deep navy */
--sc-blue-soft: #EAF2FC;
--sc-red: #E0313D; /* CONTACT accent */
--sc-green: #1aa168; /* online / success */
--sc-amber: #C77317;
/* neutrals (light) */
--sc-bg: #F4F6F9;
--sc-surface: #FFFFFF;
--sc-surface-2: #F1F4F8;
--sc-border: #E6EAEF;
--sc-border-2: #E9ECF1;
--sc-ink: #15202B;
--sc-ink-2: #2b3640;
--sc-muted: #6b7480;
--sc-faint: #9aa3ad;
/* shape + depth */
--sc-radius: 14px;
--sc-radius-sm: 9px;
--sc-radius-pill: 22px;
--sc-shadow-sm: 0 1px 2px rgba(15,30,50,.06);
--sc-shadow: 0 1px 3px rgba(15,30,50,.08), 0 6px 18px -12px rgba(15,30,50,.18);
--sc-shadow-lg: 0 18px 48px -24px rgba(15,30,50,.40);
--sc-topbar-h: 60px;
--sc-rail-left: 230px;
--sc-rail-right: 116px;
--sc-maxw: 1380px;
}
:root[data-theme="dark"]{
--sc-blue: #4a93e3;
--sc-blue-strong: #3d8ee0;
--sc-blue-ink: #0a1622;
--sc-blue-soft: rgba(74,147,227,.14);
--sc-red: #FF4D5B;
--sc-green: #25b984;
--sc-bg: #0E1116;
--sc-surface: #13171C;
--sc-surface-2: #161B21;
--sc-border: #20262E;
--sc-border-2: #242A32;
--sc-ink: #E7ECF2;
--sc-ink-2: #C4CCD6;
--sc-muted: #9aa3ad;
--sc-faint: #6b7480;
--sc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--sc-shadow: 0 1px 3px rgba(0,0,0,.45), 0 8px 22px -14px rgba(0,0,0,.6);
--sc-shadow-lg: 0 20px 60px -26px rgba(0,0,0,.7);
}
/* ----------------------------- Base -------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body.sc-body{
margin:0;
background:var(--sc-bg);
color:var(--sc-ink);
font-family:var(--sc-font);
font-size:14px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.sc-body *{ box-sizing:border-box; }
.sc-body a{ color:var(--sc-blue); text-decoration:none; }
.sc-body a:hover{ color:var(--sc-blue-strong); text-decoration:none; }
.sc-body img{ max-width:100%; }
.sc-body h1,.sc-body h2,.sc-body h3,.sc-body h4,.sc-body h5,.sc-body h6{
font-family:var(--sc-font); color:var(--sc-ink); font-weight:700; letter-spacing:-.01em;
}
.sc-mono{ font-family:var(--sc-mono); }
::selection{ background:var(--sc-blue); color:#fff; }
/* hide legacy 2012 chrome that the new shell replaces */
#bg-bg, #top-bg{ display:none !important; }
/* ============================ APP SHELL ============================ */
.sc-app{
max-width:var(--sc-maxw);
margin:0 auto;
padding:0 18px 64px;
}
/* ----------------------------- Topbar ------------------------------ */
.sc-topbar{
position:sticky; top:0; z-index:120;
background:color-mix(in srgb, var(--sc-surface) 86%, transparent);
-webkit-backdrop-filter:saturate(180%) blur(12px);
backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--sc-border);
margin:0 -18px 18px;
padding:0 18px;
}
.sc-topbar__inner{
max-width:var(--sc-maxw); margin:0 auto;
height:var(--sc-topbar-h);
display:flex; align-items:center; gap:20px;
}
.sc-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sc-brand__badge{
width:34px; height:34px; border-radius:9px; background:#fff;
border:1px solid var(--sc-border); box-shadow:var(--sc-shadow-sm);
display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.sc-brand__badge img{ height:28px; width:auto; display:block; }
.sc-brand__word{ font-size:19px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; color:var(--sc-ink); }
.sc-brand__word b{ color:var(--sc-blue); font-weight:800; }
.sc-brand__word i{ color:var(--sc-red); font-style:normal; }
.sc-search{
flex:1 1 auto; max-width:420px;
display:flex; align-items:center; gap:9px;
background:var(--sc-surface-2); border:1px solid var(--sc-border);
border-radius:var(--sc-radius-sm); height:38px; padding:0 13px;
color:var(--sc-faint);
}
.sc-search input{
border:0; background:transparent; outline:0; width:100%;
font:inherit; color:var(--sc-ink); font-size:13.5px;
}
.sc-search input::placeholder{ color:var(--sc-faint); }
.sc-topbar__actions{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; }
.sc-iconbtn{
position:relative; width:38px; height:38px; border-radius:10px;
display:inline-flex; align-items:center; justify-content:center;
color:var(--sc-muted); background:transparent; border:0; cursor:pointer;
font-size:18px; line-height:1; transition:background .15s, color .15s;
}
.sc-iconbtn:hover{ background:var(--sc-surface-2); color:var(--sc-ink); }
.sc-badge-dot{
position:absolute; top:7px; right:7px; min-width:8px; height:8px; padding:0 3px;
border-radius:6px; background:var(--sc-red); border:1.5px solid var(--sc-surface);
}
.sc-badge-count{
position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px;
border-radius:8px; background:var(--sc-red); color:#fff; font-size:10px; font-weight:700;
display:flex; align-items:center; justify-content:center; border:1.5px solid var(--sc-surface);
font-family:var(--sc-mono);
}
.sc-lang{ display:inline-flex; gap:8px; align-items:center; }
.sc-lang a{ opacity:.65; line-height:0; }
.sc-lang a:hover{ opacity:1; }
.sc-avatar-btn{ width:34px; height:34px; border-radius:50%; overflow:hidden; border:2px solid var(--sc-border); display:inline-block; }
.sc-avatar-btn img{ width:100%; height:100%; object-fit:cover; }
/* theme toggle */
.sc-theme-toggle{ width:38px; height:38px; }
.sc-theme-toggle .sc-sun{ display:none; }
.sc-theme-toggle .sc-moon{ display:inline; }
:root[data-theme="dark"] .sc-theme-toggle .sc-sun{ display:inline; }
:root[data-theme="dark"] .sc-theme-toggle .sc-moon{ display:none; }
/* guest auth buttons in topbar */
.sc-auth-actions{ display:flex; gap:8px; align-items:center; }
/* --------------------------- Layout grid --------------------------- */
.sc-layout{
display:grid;
grid-template-columns:var(--sc-rail-left) minmax(0,1fr) var(--sc-rail-right);
gap:18px;
align-items:start;
}
.sc-rail{ display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--sc-topbar-h) + 18px); }
.sc-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
/* ----------------------------- Cards ------------------------------- */
.sc-card{
background:var(--sc-surface);
border:1px solid var(--sc-border-2);
border-radius:var(--sc-radius);
box-shadow:var(--sc-shadow-sm);
}
.sc-card--pad{ padding:16px; }
.sc-card__title{ font-size:13px; font-weight:700; color:var(--sc-ink); margin:0 0 11px; display:flex; align-items:center; gap:7px; }
.sc-card__title .sc-count{ font-family:var(--sc-mono); color:var(--sc-green); font-size:11.5px; }
/* --------------------------- Left menu ----------------------------- */
.sc-menu{ list-style:none; margin:0; padding:6px; background:var(--sc-surface); border:1px solid var(--sc-border-2); border-radius:var(--sc-radius); }
.sc-menu li{ list-style:none; }
.sc-menu li > a{
display:flex; align-items:center; gap:11px;
padding:9px 11px; border-radius:var(--sc-radius-sm);
color:var(--sc-muted); font-size:13.5px; font-weight:600;
transition:background .14s, color .14s;
}
.sc-menu li > a:hover{ background:var(--sc-surface-2); color:var(--sc-ink); }
.sc-menu li.active > a, .sc-menu li > a.active{ background:var(--sc-blue-soft); color:var(--sc-blue); }
.sc-menu li > a [class^="pe-"], .sc-menu li > a [class^="fa"],
.sc-menu li > a [class^="glyphicon"], .sc-menu li > a [class^="linea"],
.sc-menu li > a [class^="li_"]{ font-size:17px; width:20px; text-align:center; flex-shrink:0; }
/* notification counters injected by Zend navigation */
.sc-menu .badge, .sc-menu .label{
margin-left:auto; background:var(--sc-red); color:#fff; border-radius:10px;
font-family:var(--sc-mono); font-size:10.5px; padding:1px 7px;
}
/* online lists (friends / seamans / companies) */
.sc-online-list{ display:flex; flex-direction:column; gap:11px; }
.sc-online-item{ display:flex; align-items:center; gap:9px; }
.sc-online-item .sc-ava{ position:relative; flex-shrink:0; }
.sc-online-item .sc-ava img,
.sc-online-item .sc-ava > span{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; }
.sc-online-item .sc-ava::after{
content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px;
border-radius:50%; background:var(--sc-green); border:2px solid var(--sc-surface);
}
.sc-online-item .sc-meta{ font-size:12.5px; min-width:0; }
.sc-online-item .sc-meta b{ font-weight:600; color:var(--sc-ink); display:block; }
.sc-online-item .sc-meta small{ color:var(--sc-faint); font-size:11px; }
.sc-block-foot{ margin-top:10px; font-size:12px; }
/* widgets / partners blocks in rail */
.sc-widget{ background:var(--sc-surface); border:1px solid var(--sc-border-2); border-radius:var(--sc-radius); padding:14px; }
.sc-widget h5{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--sc-faint); margin:0 0 10px; }
/* ----------------------- Main content header ----------------------- */
.sc-usernav{ }
.sc-context{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 2px 0; }
.sc-context .sc-context__name{ font-weight:700; font-size:15px; color:var(--sc-ink); }
.sc-context .user-section-bc, .sc-context .my-address{ color:var(--sc-faint); font-size:12.5px; font-family:var(--sc-mono); }
.sc-breadcrumb{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:2px 2px 10px; border-bottom:1px solid var(--sc-border); margin-bottom:4px;
}
.sc-breadcrumb h4{ margin:0; font-size:18px; font-weight:700; }
.sc-breadcrumb .breadcrumb{ background:none; padding:0; margin:0; }
/* the slot where Zend injects each view */
.sc-content{ min-width:0; }
/* ----------------------------- Footer ------------------------------ */
.sc-footer{
margin-top:34px; padding-top:22px; border-top:1px solid var(--sc-border);
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
color:var(--sc-faint); font-size:12.5px;
}
.sc-footer__links{ display:flex; gap:18px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.sc-footer__links a{ color:var(--sc-muted); }
.sc-footer__brand{ font-family:var(--sc-mono); letter-spacing:.04em; }
/* ============ Bootstrap-3 component refresh (shared by views) ====== */
.sc-body .btn{
border-radius:var(--sc-radius-sm); font-weight:600; border:1px solid transparent;
padding:7px 15px; transition:filter .14s, background .14s, box-shadow .14s; box-shadow:none;
}
.sc-body .btn-xs{ padding:3px 9px; border-radius:7px; }
.sc-body .btn-sm{ padding:5px 12px; }
.sc-body .btn:active{ box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.sc-body .btn-primary,.sc-body .btn-info{ background:var(--sc-blue); border-color:var(--sc-blue); color:#fff; }
.sc-body .btn-primary:hover,.sc-body .btn-info:hover,
.sc-body .btn-primary:focus,.sc-body .btn-info:focus{ background:var(--sc-blue-strong); border-color:var(--sc-blue-strong); color:#fff; }
.sc-body .btn-success{ background:var(--sc-green); border-color:var(--sc-green); color:#fff; }
.sc-body .btn-success:hover{ filter:brightness(.95); color:#fff; }
.sc-body .btn-danger{ background:var(--sc-red); border-color:var(--sc-red); color:#fff; }
.sc-body .btn-default{ background:var(--sc-surface); border-color:var(--sc-border); color:var(--sc-ink-2); }
.sc-body .btn-default:hover{ background:var(--sc-surface-2); border-color:var(--sc-border); color:var(--sc-ink); }
.sc-body .btn-link{ color:var(--sc-blue); }
/* panels / wells / the legacy .drop-shadow card */
.sc-body .panel,.sc-body .well,.sc-body .drop-shadow,.sc-body .item-block{
background:var(--sc-surface); border:1px solid var(--sc-border-2);
border-radius:var(--sc-radius); box-shadow:var(--sc-shadow-sm); color:var(--sc-ink);
}
.sc-body .panel-heading{ background:var(--sc-surface-2); border-bottom:1px solid var(--sc-border); border-radius:var(--sc-radius) var(--sc-radius) 0 0; }
.sc-body hr{ border-top:1px solid var(--sc-border); }
/* alerts */
.sc-body .alert{ border-radius:var(--sc-radius); border:1px solid var(--sc-border); }
.sc-body .alert-warning{ background:#FFF7E8; border-color:#F6E2B8; color:#7a5413; }
.sc-body .alert-info{ background:var(--sc-blue-soft); border-color:#cfe2f8; color:var(--sc-blue-strong); }
.sc-body .alert-success{ background:#E7F6EE; border-color:#c6ebd5; color:#0f7a4d; }
:root[data-theme="dark"] .sc-body .alert-warning{ background:rgba(214,158,46,.12); border-color:rgba(214,158,46,.35); color:#e8c074; }
:root[data-theme="dark"] .sc-body .alert-info{ background:var(--sc-blue-soft); border-color:rgba(74,147,227,.3); color:#9ecbf5; }
:root[data-theme="dark"] .sc-body .alert-success{ background:rgba(37,185,132,.12); border-color:rgba(37,185,132,.32); color:#7ad9b4; }
/* progress (profile rating) */
.sc-body .progress{ background:var(--sc-surface-2); border-radius:6px; height:8px; box-shadow:none; overflow:hidden; }
.sc-body .progress-bar{ background:linear-gradient(90deg,var(--sc-blue),var(--sc-blue-strong)); font-size:0; }
/* nav-pills / nav-tabs used inside views */
.sc-body .nav-tabs{ border-bottom:1px solid var(--sc-border); }
.sc-body .nav-tabs > li > a{ border:0; color:var(--sc-muted); font-weight:600; border-radius:0; }
.sc-body .nav-tabs > li.active > a,.sc-body .nav-tabs > li.active > a:hover{
background:transparent; color:var(--sc-blue); border:0; border-bottom:2px solid var(--sc-blue);
}
.sc-body .nav-pills.nav-justified > li > a,.sc-body .nav-pills > li > a{ border-radius:var(--sc-radius-sm); color:var(--sc-muted); font-weight:600; }
.sc-body .nav-pills > li.active > a,.sc-body .nav-pills > li.active > a:hover{ background:var(--sc-blue); color:#fff; }
/* in-view tab/pill nav: reset list chrome so it works with or without bootstrap */
.sc-usernav .nav{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.sc-usernav .nav > li{ flex:1 1 auto; float:none; text-align:center; }
.sc-usernav .nav > li > a{ display:block; }
/* forms */
.sc-body .form-control{
border-radius:var(--sc-radius-sm); border:1px solid var(--sc-border);
background:var(--sc-surface); color:var(--sc-ink); box-shadow:none; height:38px; width:100%;
}
.sc-body textarea.form-control{ height:auto; }
.sc-body .form-control:focus{ border-color:var(--sc-blue); box-shadow:0 0 0 3px var(--sc-blue-soft); }
.sc-body .form-control::placeholder{ color:var(--sc-faint); }
/* chosen (jQuery select) minimal alignment */
.sc-body .chosen-container-single .chosen-single{
border-radius:var(--sc-radius-sm); border:1px solid var(--sc-border);
background:var(--sc-surface); color:var(--sc-ink); height:38px; line-height:36px; box-shadow:none;
}
/* tables */
.sc-body .table{ color:var(--sc-ink); }
.sc-body .table > thead > tr > th{ border-bottom:1px solid var(--sc-border); color:var(--sc-muted); font-weight:600; }
.sc-body .table > tbody > tr > td,.sc-body .table > tbody > tr > th{ border-top:1px solid var(--sc-border); }
/* modals */
.sc-body .modal-content{ background:var(--sc-surface); color:var(--sc-ink); border-radius:var(--sc-radius); border:1px solid var(--sc-border); }
.sc-body .modal-header,.sc-body .modal-footer{ border-color:var(--sc-border); }
/* text helpers used across views */
.sc-body .text-info{ color:var(--sc-blue) !important; }
.sc-body .text-muted{ color:var(--sc-muted) !important; }
.sc-body .text-danger{ color:var(--sc-red) !important; }
.sc-body .text-success{ color:var(--sc-green) !important; }
.sc-body .text-blue{ color:var(--sc-blue) !important; }
/* scrollbar */
.sc-body ::-webkit-scrollbar{ width:11px; height:11px; }
.sc-body ::-webkit-scrollbar-thumb{ background:var(--sc-border); border-radius:8px; border:3px solid var(--sc-bg); }
.sc-body ::-webkit-scrollbar-thumb:hover{ background:var(--sc-faint); }
/* =========================== Responsive =========================== */
.sc-menu-toggle{ display:none; }
@media (max-width: 1100px){
:root{ --sc-rail-right:0px; }
.sc-layout{ grid-template-columns:var(--sc-rail-left) minmax(0,1fr); }
.sc-rail--right{ display:none; }
}
@media (max-width: 860px){
.sc-app{ padding:0 12px 80px; }
.sc-topbar{ margin:0 -12px 14px; padding:0 12px; }
.sc-layout{ grid-template-columns:1fr; }
.sc-rail{ position:static; }
/* left rail collapses behind a toggle */
.sc-rail--left{ display:none; }
.sc-rail--left.is-open{ display:flex; }
.sc-menu-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:10px; border:1px solid var(--sc-border);
background:var(--sc-surface); color:var(--sc-ink); cursor:pointer; font-size:18px;
}
.sc-brand__word{ font-size:17px; }
.sc-search{ display:none; }
.sc-footer{ justify-content:center; text-align:center; }
}
@media (max-width: 520px){
.sc-topbar__actions{ gap:8px; }
.sc-iconbtn{ width:34px; height:34px; }
}
/* ---- nav robustness: style whatever the Zend partial emits ---- */
.sc-navblock > ul,
.sc-navblock ul.left-menu-items,
.sc-navblock ul.nav{
list-style:none; margin:0; padding:6px;
background:var(--sc-surface); border:1px solid var(--sc-border-2); border-radius:var(--sc-radius);
}
.sc-navblock li{ list-style:none; float:none; }
.sc-navblock li > a{
display:flex; align-items:center; gap:11px;
padding:9px 11px; border-radius:var(--sc-radius-sm);
color:var(--sc-muted); font-size:13.5px; font-weight:600; line-height:1.3;
transition:background .14s, color .14s; background:transparent;
}
.sc-navblock li > a:hover,.sc-navblock li > a:focus{ background:var(--sc-surface-2); color:var(--sc-ink); }
.sc-navblock li.active > a,.sc-navblock li > a.active{ background:var(--sc-blue-soft); color:var(--sc-blue); }
.sc-navblock li > a [class^="pe-"],.sc-navblock li > a [class*=" pe-"],
.sc-navblock li > a [class^="fa"],.sc-navblock li > a [class^="glyphicon"],
.sc-navblock li > a [class^="linea"],.sc-navblock li > a [class^="li_"],
.sc-navblock li > a [class^="icon"]{ font-size:17px; min-width:20px; text-align:center; flex-shrink:0; }
.sc-navblock .badge,.sc-navblock .label{
margin-left:auto; background:var(--sc-red); color:#fff; border-radius:10px;
font-family:var(--sc-mono); font-size:10.5px; padding:1px 7px; font-weight:700;
}
/* right rail: icon-only compact menu */
.sc-rail--right .sc-navblock li > a{ flex-direction:column; gap:5px; text-align:center; font-size:10.5px; padding:10px 6px; }
.sc-rail--right .sc-navblock li > a [class^="pe-"],
.sc-rail--right .sc-navblock li > a [class^="fa"],
.sc-rail--right .sc-navblock li > a [class^="glyphicon"]{ font-size:20px; }
/* =====================================================================
HOME FEED (Phase 2) — my/index/index.phtml + feed/composer partials
===================================================================== */
.sc-feed{ display:block; }
.sc-feed-grid{
display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:16px; align-items:start;
}
.sc-feed-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.sc-feed-side{ position:sticky; top:calc(var(--sc-topbar-h) + 18px); }
/* ---- "Update your CV" alert ---- */
.sc-cv-alert{ }
.sc-cv-alert__title{ text-align:center; font-size:16px; margin:0 0 8px; }
.sc-cv-alert__list{ margin:6px 0 10px; padding-left:18px; font-size:13px; }
.sc-cv-alert__list li{ padding:3px 0; }
.sc-cv-alert__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; border-top:1px solid rgba(0,0,0,.06); padding-top:8px; }
/* ---- new connections ---- */
.sc-connections__list{ display:flex; flex-wrap:wrap; gap:10px; }
.sc-connections__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--sc-border); }
.sc-connections__hint{ font-size:12.5px; color:var(--sc-muted); }
/* ---- wall tabs ---- */
.sc-wall-tabs{ padding:6px 8px !important; }
.sc-wall-tabs .nav-tabs{ border-bottom:0; }
.sc-wall-empty h5{ color:var(--sc-muted); margin:0 0 14px; }
/* ---- composer (logbook-form) ---- */
.sc-feed-main .logbook-form{
background:var(--sc-surface); border:1px solid var(--sc-border-2);
border-radius:var(--sc-radius); box-shadow:var(--sc-shadow-sm);
padding:14px !important; margin:0 !important;
}
.sc-feed-main .logbook-form .logbook-text textarea{ min-height:84px; resize:vertical; }
.sc-feed-main .logbook-form .logbook-submit{ padding-top:8px; }
.sc-feed-main .logbook-form .input-group-addon{ background:var(--sc-surface-2); border-color:var(--sc-border); color:var(--sc-muted); border-radius:var(--sc-radius-sm) 0 0 var(--sc-radius-sm); }
/* ---- profile sidebar card ---- */
.sc-profile-card{ overflow:hidden; }
.sc-profile-card__head{ padding:20px 18px 16px; text-align:center; border-bottom:1px solid var(--sc-border); }
.sc-profile-avatar{ position:relative; width:104px; height:104px; margin:0 auto 12px; }
.sc-profile-avatar img{ width:104px; height:104px; border-radius:50%; object-fit:cover; border:3px solid var(--sc-surface); box-shadow:0 0 0 1px var(--sc-border), var(--sc-shadow); }
.sc-profile-avatar__upload{
position:absolute; right:2px; bottom:2px; width:32px; height:32px; border-radius:50%;
background:var(--sc-blue); color:#fff; border:2px solid var(--sc-surface); cursor:pointer;
display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:var(--sc-shadow);
}
.sc-profile-card__name{ font-weight:700; font-size:17px; color:var(--sc-ink); }
.sc-profile-card__url{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; margin-top:4px; font-family:var(--sc-mono); }
.sc-profile-card__section{ padding:14px 18px; border-bottom:1px solid var(--sc-border); }
.sc-profile-card__section:last-child{ border-bottom:0; }
.sc-profile-card__label{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--sc-faint); margin-bottom:9px; display:block; }
.sc-profile-card__label--link{ display:flex; align-items:center; justify-content:space-between; }
.sc-rating-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sc-rating-list li > a{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--sc-ink-2); padding:5px 8px; border-radius:8px; }
.sc-rating-list li > a:hover{ background:var(--sc-surface-2); }
.sc-rating-list li > a [class^="li_"],.sc-rating-list li > a [class^="glyphicon"],.sc-rating-list li > a [class^="linea"]{ color:var(--sc-blue); width:18px; text-align:center; }
.sc-rating-list__pts{ margin-left:auto; color:var(--sc-red); font-weight:700; font-family:var(--sc-mono); font-size:11.5px; }
/* CV file block */
.sc-cv-file{ display:flex; align-items:center; gap:12px; }
.sc-cv-file__badge .li_note{ font-size:40px; color:var(--sc-blue); }
.sc-cv-file__meta{ font-size:12.5px; }
.sc-cv-file__actions{ display:flex; align-items:center; gap:8px; margin-top:7px; }
.sc-profile-dl{ margin:8px 0 0; }
.sc-profile-dl dt{ font-size:11px; color:var(--sc-faint); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:8px; }
.sc-profile-dl dt:first-child{ margin-top:0; }
.sc-profile-dl dd{ font-size:13px; color:var(--sc-ink-2); margin:1px 0 0; }
.sc-profile-dl address{ margin:0; font-size:13px; }
.sc-profile-social{ font-size:12.5px; margin-bottom:9px; display:flex; align-items:center; gap:7px; }
.sc-connect-btn{ margin-bottom:8px; text-align:left; }
.sc-connect-btn:last-child{ margin-bottom:0; }
/* ---- feed items (logbook-item / news-list) styled in place ---- */
.sc-feed-main .news-entry{ margin:0; }
.sc-feed-main .news-entry .social-labels{ display:none; } /* legacy left share rail — hidden, share lives in the card */
.sc-feed-main .news-entry .block-content{ width:100%; float:none; padding:0; }
.sc-feed-main .news-entry .block-content > .row{ margin:0; }
.sc-feed-main .news-entry .drop-shadow{ padding:14px 16px; }
.sc-feed-main .news-entry .data-avatar{ width:auto; float:none; padding:0; }
.sc-feed-main .news-entry .data-text{ font-size:13.5px; color:var(--sc-ink-2); line-height:1.55; padding-top:6px; }
.sc-feed-main .news-entry .data-text img{ border-radius:10px; }
.sc-feed-main .news-entry .tags{ width:auto; float:none; margin-left:0; padding-top:8px; }
.sc-feed-main .news-entry .activity-block{ width:100%; float:none; padding:10px 0 0; margin-top:10px; border-top:1px solid var(--sc-border); }
.sc-feed-main .news-entry .counters_block,.sc-feed-main .news-entry .counters{ display:flex; align-items:center; gap:16px; }
/* postponed publications accordion */
.sc-feed-main .panel-group .panel-title a{ color:var(--sc-blue); }
/* ---- feed responsive ---- */
@media (max-width: 980px){
.sc-feed-grid{ grid-template-columns:1fr; }
.sc-feed-side{ position:static; order:-1; } /* profile card on top when stacked */
}
/* =====================================================================
APP-WIDE COVERAGE (Phase 3) — reskins every main-layout page that
reuses the shared partials, without rewriting each view:
profile, vacancies, questions, news, seamans/companies DB, cv, etc.
All rules scoped to .sc-content so rails/topbar are untouched.
===================================================================== */
/* ---- two-column push/pull layout (.section-content) → grid ---- */
.sc-content .section-content{
display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:16px; align-items:start; margin:0;
}
.sc-content .section-content > .user-info,
.sc-content .section-content > .user-content{ float:none; left:auto; right:auto; width:auto; padding:0; }
.sc-content .section-content > .user-info{ order:2; }
.sc-content .section-content > .user-content{ order:1; min-width:0; }
.sc-content .section-content > .user-info.pt,
.sc-content .section-content > .user-info.mt{ margin:0; }
/* sidebar profile block on public pages (.item-block.drop-shadow) */
.sc-content .user-info > h5{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--sc-faint); margin:0 0 8px; }
.sc-content .user-info .item-block{ padding:16px; }
.sc-content .user-avatar-big{ text-align:center; position:relative; margin-bottom:12px; }
.sc-content .user-avatar-big img{ width:128px; height:128px; border-radius:50%; object-fit:cover; border:3px solid var(--sc-surface); box-shadow:0 0 0 1px var(--sc-border), var(--sc-shadow); }
.sc-content .user-avatar-big .online_status{ position:absolute; bottom:6px; right:calc(50% - 64px); font-size:14px; }
.sc-content .online_status.online, .sc-content .fa-circle.online{ color:var(--sc-green); }
.sc-content .online_status.offline, .sc-content .fa-circle.offline{ color:var(--sc-faint); }
.sc-content .user-info dl{ margin:10px 0 0; }
.sc-content .user-info dt{ font-size:11px; color:var(--sc-faint); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:8px; }
.sc-content .user-info dt:first-child{ margin-top:0; }
.sc-content .user-info dd{ font-size:13px; color:var(--sc-ink-2); margin:1px 0 0; }
.sc-content .user-info address{ margin:0; font-size:13px; font-style:normal; }
/* ---- connections / "worked together" ---- */
.sc-content .new-connections{ background:var(--sc-surface); border:1px solid var(--sc-border-2); border-radius:var(--sc-radius); box-shadow:var(--sc-shadow-sm); padding:14px; margin:0 0 14px; }
.sc-content .connections-list{ display:flex; flex-wrap:wrap; gap:10px; margin:0; }
/* ---- list wrapper ---- */
.sc-content .data-list{ margin:0; }
.sc-content > h5,.sc-content .user-content > h5{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--sc-faint); margin:16px 0 8px; }
/* ---- feed/list items: vacancies, questions, logbook, news ---- */
.sc-content .news-entry{ display:flex; gap:0; margin:0 0 14px; }
.sc-content .news-entry .social-labels{ display:none; } /* legacy left share rail */
.sc-content .news-entry .data-type{ display:none; } /* legacy right badge rail */
.sc-content .news-entry .block-content,
.sc-content .news-entry > [class*="col-md-"]{ width:100%; float:none; padding:0; }
.sc-content .news-entry .block-content > .row,
.sc-content .news-entry .drop-shadow > .row{ margin:0; }
.sc-content .news-entry .drop-shadow{ width:100%; float:none; padding:16px; }
.sc-content .news-entry .drop-shadow > .row > [class*="col-md-"]{ float:none; width:auto; padding:0; }
/* avatar inside an item */
.sc-content .news-entry .data-avatar{ width:auto !important; float:none; padding:0; margin-bottom:10px; }
.sc-content .news-entry .data-avatar a{ display:flex; align-items:center; gap:11px; color:var(--sc-ink); }
.sc-content .news-entry .data-avatar img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--sc-border); }
.sc-content .news-entry .data-avatar h3{ font-size:14px; font-weight:700; margin:0; }
.sc-content .news-entry h3{ font-size:17px; font-weight:700; margin:0 0 6px; }
.sc-content .news-entry h3 a,.sc-content .news-entry a h3{ color:var(--sc-ink); }
.sc-content .news-entry .data-text{ font-size:13.5px; color:var(--sc-ink-2); line-height:1.55; }
.sc-content .news-entry .data-text img{ border-radius:10px; max-width:100%; }
.sc-content .news-entry .data-pics{ margin-top:10px; }
/* vacancy spec list */
.sc-content .news-entry ul.list-unstyled li{ font-size:12.5px; padding:2px 0; color:var(--sc-ink-2); }
.sc-content .news-entry ul.list-unstyled .text-blue{ font-weight:700; font-size:11px; letter-spacing:.03em; }
.sc-content .company_contacts label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.sc-content .company_contacts .fa-ul{ margin-left:18px; }
.sc-content .company_contacts .fa-ul li{ font-size:12.5px; padding:2px 0; }
/* counters (views / subscribers) */
.sc-content .counters_block h5,.sc-content .counters_block{ color:var(--sc-faint); font-size:12.5px; display:flex; align-items:center; gap:8px; justify-content:flex-end; }
/* tags */
.sc-content .tags{ display:flex; flex-wrap:wrap; gap:7px; float:none; width:auto; padding-top:6px; }
.sc-content .tags a{ display:inline-block; background:var(--sc-surface-2); border:1px solid var(--sc-border); border-radius:20px; padding:3px 11px; font-size:11.5px; color:var(--sc-muted); }
.sc-content .tags a:hover{ background:var(--sc-blue-soft); color:var(--sc-blue); border-color:transparent; }
/* per-item action row + activity */
.sc-content .news-entry .data-actions{ padding-top:8px; }
.sc-content .news-entry .activity-block{ width:100%; float:none; padding:10px 0 0; margin-top:10px; border-top:1px solid var(--sc-border); }
.sc-content .news-entry .read_more_link{ font-weight:600; font-size:12.5px; }
/* ---- vertical filters (.v_filters) ---- */
.sc-content .v_filters{ list-style:none; margin:0 0 14px; padding:6px; background:var(--sc-surface); border:1px solid var(--sc-border-2); border-radius:var(--sc-radius); display:flex; flex-direction:column; gap:2px; }
.sc-content .v_filters > li{ float:none; }
.sc-content .v_filters > li > a{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:var(--sc-radius-sm); color:var(--sc-muted); font-size:13px; font-weight:600; }
.sc-content .v_filters > li > a:hover{ background:var(--sc-surface-2); color:var(--sc-ink); }
.sc-content .v_filters > li.active > a{ background:var(--sc-blue-soft); color:var(--sc-blue); }
.sc-content .v_filters .label{ margin-left:auto; background:var(--sc-surface-2); color:var(--sc-muted); border-radius:10px; font-family:var(--sc-mono); font-weight:600; font-size:10.5px; padding:2px 7px; }
.sc-content .v_filters .label-info{ background:var(--sc-blue-soft); color:var(--sc-blue); }
.sc-content .v_filters > li.active .label{ background:rgba(255,255,255,.6); }
/* horizontal filter chips */
.sc-content .h_filters,.sc-content .horiz_filters{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 14px; list-style:none; }
.sc-content .h_filters > li > a{ display:inline-block; padding:6px 13px; border-radius:20px; background:var(--sc-surface); border:1px solid var(--sc-border); color:var(--sc-muted); font-size:12.5px; font-weight:600; }
.sc-content .h_filters > li.active > a{ background:var(--sc-blue); color:#fff; border-color:var(--sc-blue); }
/* ---- pagination ---- */
.sc-content .pagination{ display:inline-flex; flex-wrap:wrap; gap:4px; margin:8px 0; padding:0; }
.sc-content .pagination > li{ display:inline-block; }
.sc-content .pagination > li > a,
.sc-content .pagination > li > span{
display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px;
border-radius:var(--sc-radius-sm); border:1px solid var(--sc-border); background:var(--sc-surface);
color:var(--sc-ink-2); font-weight:600; font-size:13px; font-family:var(--sc-mono);
}
.sc-content .pagination > li > a:hover{ background:var(--sc-surface-2); border-color:var(--sc-faint); color:var(--sc-ink); }
.sc-content .pagination > li > span > b.bg-info,
.sc-content .pagination .bg-info{ background:var(--sc-blue) !important; color:#fff !important; padding:0; border-radius:0; }
.sc-content [data-name="custom_pagination"] .bg-info{ background:transparent !important; color:var(--sc-blue) !important; font-weight:700; }
/* ---- generic blockquote / well used as CTA ---- */
.sc-content blockquote{ border-left:3px solid var(--sc-blue); background:var(--sc-surface-2); border-radius:0 var(--sc-radius-sm) var(--sc-radius-sm) 0; padding:10px 14px; margin:0 0 12px; }
/* ---- form pages (CV, vacancy add, settings, ask question…) ---- */
.sc-content .form-horizontal .control-label{ color:var(--sc-ink-2); font-weight:600; }
.sc-content .input-group-addon{ background:var(--sc-surface-2); border-color:var(--sc-border); color:var(--sc-muted); }
.sc-content fieldset{ border:0; padding:0; margin:0; }
.sc-content legend{ font-size:16px; font-weight:700; color:var(--sc-ink); border-bottom:1px solid var(--sc-border); padding-bottom:8px; margin-bottom:14px; }
/* ---- avatars / online dots in any list ---- */
.sc-content .online_user_list_item,.sc-content .partners-list-item{ display:flex; align-items:center; gap:9px; }
/* ---- responsive: collapse the push/pull 2-col ---- */
@media (max-width: 980px){
.sc-content .section-content{ grid-template-columns:1fr; }
.sc-content .section-content > .user-info{ order:-1; }
}
/* =====================================================================
AUTH / LANDING coverage (Phase 4 starter) — login, registration,
password reset. Renders inside the landing layout (body.sc-landing).
The marketing homepage hero keeps its existing landing CSS.
===================================================================== */
body.sc-landing{ background:var(--sc-bg); }
.sc-landing #main-content{ min-height:60vh; }
.sc-landing .auth_page{ display:block; }
.sc-landing .auth_page .headerLine{ background:radial-gradient(120% 140% at 85% -10%, #143b63 0%, #0d2438 55%, #0a1b2b 100%); padding:0; }
.sc-landing .auth_page > .headerLine > .container{ min-height:72vh; display:flex; align-items:center; justify-content:center; padding:48px 16px; }
.sc-landing .auth_page .headerLine .row{ width:100%; max-width:440px; margin:0; }
.sc-landing .auth_page h3{ color:#fff; text-align:center; font-size:26px; font-weight:800; letter-spacing:-.01em; margin:0 0 18px; }
.sc-landing .auth_page .fr{ float:none !important; }
.sc-landing .auth_page .fr > div[style]{ display:block !important; }
.sc-landing .auth_page .form-horizontal{
background:var(--sc-surface); border:1px solid var(--sc-border-2);
border-radius:18px; box-shadow:var(--sc-shadow-lg); padding:26px 24px;
}
.sc-landing .auth_page .form-horizontal .form-group{ margin:0 0 12px; }
.sc-landing .auth_page .form-horizontal .col-md-8,
.sc-landing .auth_page .form-horizontal .col-md-4,
.sc-landing .auth_page .form-horizontal .col-md-12,
.sc-landing .auth_page .form-horizontal .col-md-6{ width:100%; float:none; padding:0; }
.sc-landing .auth_page .form-control{ height:42px; font-size:14px; margin-bottom:10px; }
.sc-landing .auth_page .subS,.sc-landing .auth_page button[type="submit"],.sc-landing .auth_page input[type="submit"]{
background:var(--sc-blue); border-color:var(--sc-blue); color:#fff; height:44px; font-weight:700; width:100%; border-radius:var(--sc-radius-sm);
}
.sc-landing .auth_page .system-messages{ color:var(--sc-red); font-size:13px; text-align:center; margin:6px 0; }
.sc-landing .auth_page .help-block{ display:block; margin-top:14px; padding:14px; border-radius:var(--sc-radius); background:var(--sc-surface-2)!important; text-align:center; }
.sc-landing .auth_page .help-block h5 a{ color:var(--sc-blue); font-weight:700; }
.sc-landing .auth_page .auth-social-links a,.sc-landing .auth_page .auth-links a{ color:var(--sc-blue); }
/* generic error / 404 page */
.sc-content .error-page,.sc-content .error{ text-align:center; padding:48px 16px; }
.sc-content .error-page h1{ font-size:72px; font-weight:800; color:var(--sc-blue); margin:0; }
/* =====================================================================
Phase 3b — coverage addendum
Closes gaps found in the coverage audit so the DB/table + list pages
(seamansdb, companiesdb, settings, messages, contacts) read as Bridge
too, not just the card-style feed pages. Token-based, conservative.
--------------------------------------------------------------------- */
/* seamansdb wrapper (renders a card-or-table layout switch) */
.sc-content .section-cvs{ margin:0; }
.sc-content .section-cvs > .table-responsive,
.sc-content .section-cvs > .row{ margin:0; }
/* DB list tables (seamansdb/companiesdb table mode, settings, admin-style
tables rendered in the main layout) → seat them on a defined surface with
a quiet uppercase header and row hover, instead of a bare bootstrap table */
.sc-content .table{ background:var(--sc-surface); border:1px solid var(--sc-border); }
.sc-content .table > thead > tr > th{
background:var(--sc-surface-2); text-transform:uppercase; font-size:11px;
letter-spacing:.04em; color:var(--sc-muted); font-weight:700;
}
.sc-content .table > tbody > tr:hover > td{ background:var(--sc-surface-2); }
.sc-content .table img{ border-radius:8px; }
/* sortable column headers (custom_sorting) used in DB/admin tables */
.sc-content .custom_sorting,
.sc-content .custom_sorting a,
.sc-content th a{ color:var(--sc-muted); font-weight:700; }
.sc-content .custom_sorting a:hover,
.sc-content th a:hover{ color:var(--sc-blue); text-decoration:none; }
/* messages / contacts list bodies (no .news-entry/.section-content hook) →
give each row a surface card so the list looks intentional */
.sc-content .container-fluid{ padding-left:0; padding-right:0; }
.sc-content .data-list > li,
.sc-content .data-list .data-list-item,
.sc-content .dialogs-list > li,
.sc-content .messages-list > li{
background:var(--sc-surface); border:1px solid var(--sc-border-2);
border-radius:var(--sc-radius-sm); box-shadow:var(--sc-shadow-sm);
padding:12px 14px; margin:0 0 10px; list-style:none;
}
/* =====================================================================
Phase 3c — feed / action-bar / share-icon / button / type polish
Fixes reported inconsistencies: mixed feed-item widths & highlights,
detached square action bars, oversized social-share icons, uneven
button sizes, and inconsistent text. Scoped to .sc-content so it only
touches main-column content. Targets the REAL legacy markup:
.news-entry(.logbook|question|vacancy|answer-entry) > .block-content
> .drop-shadow card; .activity-block / .data-actions / .counters_block;
.activity-social pe-so-* icons.
--------------------------------------------------------------------- */
/* 1. ONE identical card for every post type (kill per-type width/highlight) */
.sc-content .news-entry,
.sc-content .news-entry.logbook-entry,
.sc-content .news-entry.question-entry,
.sc-content .news-entry.vacancy-entry,
.sc-content .news-entry.answer-entry{
display:block; width:100%; margin:0 0 16px; padding:0;
background:transparent; border:0; box-shadow:none;
}
.sc-content .news-entry .social-labels,
.sc-content .news-entry .pe-social.social-labels,
.sc-content .news-entry .data-type{ display:none !important; } /* legacy left/right rails */
.sc-content .news-entry > [class*="col-md-"],
.sc-content .news-entry .block-content{ width:100% !important; float:none; padding:0; margin:0; }
.sc-content .news-entry .block-content > .row{ margin:0; }
.sc-content .news-entry .drop-shadow{
width:100% !important; float:none; margin:0; padding:0;
background:var(--sc-surface); border:1px solid var(--sc-border);
border-radius:var(--sc-radius); box-shadow:var(--sc-shadow-sm);
}
.sc-content .news-entry .drop-shadow > .row{ margin:0; }
.sc-content .news-entry .drop-shadow > .row > [class*="col-md-"]{ width:100% !important; float:none; padding:0; }
/* card sections: consistent padding */
.sc-content .news-entry .data-avatar{
width:100% !important; float:none; padding:14px 16px 4px; margin:0; text-align:left !important;
}
.sc-content .news-entry .data-avatar img{ width:42px !important; height:42px !important; border-radius:50%; object-fit:cover; }
.sc-content .news-entry .data-avatar > span[style*="inline-block"]{ display:inline-flex !important; align-items:center; gap:10px; vertical-align:middle; }
.sc-content .news-entry .data-avatar h5{ margin:0; font-size:14px; line-height:1.2; }
.sc-content .news-entry .data-avatar h5 small{ font-size:14px; color:var(--sc-ink); }
.sc-content .news-entry .data-avatar h5 small b{ font-weight:600; }
.sc-content .news-entry .data-text{ padding:6px 16px 14px; font-size:14px; color:var(--sc-ink-2); line-height:1.6; }
.sc-content .news-entry .data-text img{ max-width:100%; height:auto; border-radius:10px; }
.sc-content .news-entry .tags{ width:100% !important; float:none; padding:0 16px 12px; margin:0; }
.sc-content .news-entry .counters_block{ font-size:12px; color:var(--sc-faint); font-weight:500; }
/* 2. action bar visually attached to the card bottom (no gap, soft separator) */
.sc-content .news-entry .activity-block,
.sc-content .news-entry .data-actions{
width:100% !important; float:none; margin:0; padding:8px 12px;
border-top:1px solid var(--sc-border); background:var(--sc-surface-2);
border-radius:0 0 var(--sc-radius) var(--sc-radius);
display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}
.sc-content .news-entry .activity-block > .row{
display:flex; align-items:center; flex-wrap:wrap; gap:6px; width:100%; margin:0;
}
.sc-content .news-entry .activity-block [class*="col-md-"],
.sc-content .news-entry .activity-block [class*="col-xs-"],
.sc-content .news-entry .data-actions [class*="col-md-"]{ width:auto !important; float:none; padding:0; margin:0; }
.sc-content .news-entry .activity-block .time{ color:var(--sc-faint); font-size:12px; font-family:var(--sc-mono); margin-right:auto !important; }
.sc-content .news-entry .activity-social{ margin:0; display:inline-flex; }
.sc-content .news-entry .activity-block .labels-button{ min-height:0; }
/* 3. shrink the oversized pe-icon-social share buttons (logbook/news) */
.sc-content .activity-block [class^="pe-so-"],
.sc-content .activity-block [class*=" pe-so-"],
.sc-content .news-entry .share i[class*="pe-"]{
font-size:16px !important; width:30px; height:30px; line-height:30px !important;
border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:var(--sc-surface); border:1px solid var(--sc-border); color:var(--sc-muted) !important;
}
.sc-content .activity-block .pe-1x{ font-size:16px !important; }
.sc-content .activity-block [class^="pe-so-"]:hover,
.sc-content .activity-block [class*=" pe-so-"]:hover{ color:var(--sc-blue) !important; border-color:var(--sc-blue); }
/* action buttons inside the bar */
.sc-content .news-entry .activity-block .btn,
.sc-content .news-entry .data-actions .btn{ padding:3px 10px; font-size:12.5px; border-radius:var(--sc-radius-sm); }
/* 4. button family: one comfortable size on list/DB pages (seamansdb etc.) */
.sc-content .btn-responsive,
.sc-content .btn-xs.btn-responsive,
.sc-content .btn-sm.btn-responsive,
.sc-content td .btn-xs,
.sc-content td .btn-sm{ padding:5px 11px !important; font-size:12.5px !important; border-radius:var(--sc-radius-sm); line-height:1.4; }
.sc-content .btn-group{ display:inline-flex; }
.sc-content .btn-group > .btn{ border-radius:0; }
.sc-content .btn-group > .btn:first-child{ border-radius:var(--sc-radius-sm) 0 0 var(--sc-radius-sm); }
.sc-content .btn-group > .btn:last-child{ border-radius:0 var(--sc-radius-sm) var(--sc-radius-sm) 0; }
/* 5. type normalization: stop the tiny demotions reading as a different font */
.sc-content h5 small,.sc-content h4 small{ font-size:.9em; color:inherit; font-weight:inherit; }
/* honor OS preference only when user hasn't chosen (handled in JS) */