/* ============================================================================
MMS ServiceTimesheet — design refresh overlay
Marine Maintenance Service Design System · generated from the design system,
written against the real selectors in wwwroot/Content/styles.
Drop-in stylesheet. Loads LAST, overrides only appearance, changes no markup
and no behaviour. Remove the one to roll back completely.
Install: see README.md in this folder.
PHASE 1 (this file, always active) — surfaces, corners, shadows, type,
focus, motion, tables, buttons, forms, status labels, print.
PHASE 2 (opt-in, add class="mms-shell" to ) — converts the 175px
horizontal tab strip into a 240px left sidebar.
========================================================================= */
:root{
/* Neutral ramp — seeded from the app's own #f7f7f7 / #ececec */
--mms-n-0:#ffffff;
--mms-n-25:#FAFBFC;
--mms-n-50:#F5F7F9;
--mms-n-100:#EDF0F3;
--mms-n-200:#E1E6EB;
--mms-n-300:#CBD3DA;
--mms-n-400:#A3AEB8;
--mms-n-500:#7A8794;
--mms-n-600:#5A6774;
--mms-n-700:#3E4A56;
--mms-n-800:#2A343E;
--mms-n-900:#18202A;
/* Brand — unchanged hues, tints derived */
--mms-blue:#004C99; /* @theme-color */
--mms-blue-dark:#003469; /* @theme-dark */
--mms-blue-25:#F4F8FD;
--mms-blue-50:#EEF4FB;
--mms-blue-100:#D9E7F6;
--mms-red:#E73029; /* @theme-secondary */
--mms-red-50:#FDF0EF;
/* Status surfaces */
--mms-success-bg:#F0F7ED;
--mms-success-fg:#3c763d;
--mms-warning-bg:#FDF4E7;
--mms-warning-fg:#8a5a12;
--mms-danger-bg:#F9EBEB;
--mms-danger-fg:#a94442;
--mms-radius:4px;
--mms-radius-card:6px;
--mms-radius-overlay:8px;
--mms-shadow-1:0 1px 2px rgba(24,32,42,.06),0 1px 3px rgba(24,32,42,.06);
--mms-shadow-2:0 2px 4px rgba(24,32,42,.05),0 4px 12px rgba(24,32,42,.08);
--mms-shadow-3:0 8px 24px rgba(24,32,42,.12),0 2px 6px rgba(24,32,42,.06);
--mms-ring:0 0 0 3px rgba(0,76,153,.16);
--mms-ease:cubic-bezier(.2,.8,.3,1);
--mms-t:160ms var(--mms-ease);
--mms-topbar:56px;
--mms-sidebar:240px;
--mms-label:11px;
--mms-tracking:.06em;
}
/* ── Base ─────────────────────────────────────────────────────────────── */
body{color:var(--mms-n-700)}
a{color:var(--mms-blue);transition:color var(--mms-t)}
a:hover{color:var(--mms-red)}
h1,h2,h3,h4,h5,h6{color:var(--mms-n-900)}
::selection{background:var(--mms-blue-100)}
/* Chrome links are controls, not prose — never underlined */
#page #header a,#primary-navigation a,.page-heading nav a,.panel-buttons a,
.data-grid .tools a,.data-grid .dataTables_paginate .paginate_button,
.list-group-item,.dashboard-tile,.nav-tabs li a,.breadcrumb a{text-decoration:none}
/* Tabular figures wherever numbers align in a column */
.data-grid table td,.table.table-theme td,.report-statistics .stat,
.header-statistics .stat,.dataTables_info{font-variant-numeric:tabular-nums}
/* ── Shell: page, header, body ─────────────────────────────────────────── */
#page{background-color:var(--mms-n-50)}
#page #header{
height:var(--mms-topbar);line-height:var(--mms-topbar);
background-color:var(--mms-n-0);
border-bottom:1px solid var(--mms-n-200);
transition:all 200ms var(--mms-ease);
}
#page #header a{color:var(--mms-n-600)}
#page #header a:hover{color:var(--mms-blue)}
#page #header h1{
color:var(--mms-n-900);font-size:15px;font-weight:500;
line-height:var(--mms-topbar);margin-left:60px;
}
#page #header h1 img{width:38px;top:8px}
#page #header #nav-toggle{color:var(--mms-n-600);font-size:20px}
#page #header #page-title{color:var(--mms-n-900);font-size:20px;line-height:var(--mms-topbar)}
#page #header nav > ul > li:last-child{border-left:1px solid var(--mms-n-200)}
#page #header nav > ul > li > a{padding:0 12px}
#page #header nav > ul > li > a i{font-size:18px}
#page #header #user-nav a .username{color:var(--mms-n-900);font-weight:500}
#page #header .dropdown-menu li a{color:var(--mms-n-700)}
#page #body{top:var(--mms-topbar)}
/* Test-environment banner keeps its meaning, loses the 5px slab */
.test-env #header{border-top:3px solid #005593 !important}
.test-env span.color-highlight{color:var(--mms-red);font-size:12px;font-weight:500}
/* Off-canvas drawer — slimmer active marker */
#mobile-navigation{background-color:var(--mms-n-900)}
#mobile-navigation ul li{border-left:3px solid transparent;margin:4px 0}
#mobile-navigation ul li.active{border-left:3px solid var(--mms-blue);background:rgba(255,255,255,.04)}
#mobile-navigation ul li a{transition:color var(--mms-t)}
/* ── Primary navigation (horizontal, phase 1) ──────────────────────────── */
#page #body nav #primary-navigation{background-color:transparent;padding:10px 15px 0}
#page #body nav #primary-navigation > li{
width:auto;min-width:120px;font-size:13px;line-height:38px;
border:none !important;background:transparent !important;
margin-right:4px;border-radius:var(--mms-radius) var(--mms-radius) 0 0;
transition:background var(--mms-t);
}
#page #body nav #primary-navigation > li a{
color:var(--mms-n-600);padding:0 14px;border-radius:var(--mms-radius);
transition:color var(--mms-t),background var(--mms-t);
}
#page #body nav #primary-navigation > li:hover{background:var(--mms-n-100) !important}
#page #body nav #primary-navigation > li.active{background:var(--mms-n-0) !important;box-shadow:inset 0 -2px 0 0 var(--mms-blue)}
#page #body nav #primary-navigation > li.active a{color:var(--mms-blue);font-weight:500}
/* ── Page heading ─────────────────────────────────────────────────────── */
#page #body .page-heading{border-bottom:1px solid var(--mms-n-200)}
#page #body .page-heading h1{line-height:60px;font-size:20px;font-weight:500;padding:0 15px 0 0}
#page #body .page-heading nav ul li{font-size:13px;padding:6px 0;margin-right:12px}
#page #body .page-heading nav ul li a{color:var(--mms-n-500);width:auto;min-width:88px;padding:6px 10px;border-radius:var(--mms-radius);transition:var(--mms-t)}
#page #body .page-heading nav ul li a:hover{color:var(--mms-n-900);background:var(--mms-n-50)}
#page #body .page-heading nav ul li.active a{color:var(--mms-blue);background:var(--mms-blue-50)}
.page-heading-list{line-height:60px}
.header-statistics .stat-title,.header-statistics .stat{line-height:60px}
.header-statistics .stat{font-size:26px;color:var(--mms-n-900);font-weight:300}
.header-statistics .stat-title{color:var(--mms-n-500)}
/* ── Panels → cards ───────────────────────────────────────────────────── */
.panel.panel-theme{
box-shadow:var(--mms-shadow-1) !important;
border:1px solid var(--mms-n-200);
border-radius:var(--mms-radius-card);
margin-bottom:16px;
}
.panel.panel-theme > .panel-heading{
padding:12px 16px;border-radius:var(--mms-radius-card) var(--mms-radius-card) 0 0;
border-bottom:1px solid var(--mms-n-200);background:var(--mms-n-0);
}
.panel.panel-theme > .panel-heading .panel-title{font-size:14px;font-weight:500;color:var(--mms-n-900)}
.panel.panel-theme > .panel-heading .panel-buttons a{color:var(--mms-n-500);font-size:15px;transition:color var(--mms-t)}
.panel.panel-theme > .panel-heading .panel-buttons a:hover{color:var(--mms-blue)}
.panel.panel-theme > .panel-body{padding:16px;box-shadow:none}
.panel.panel-theme.panel-table .panel-heading{
background-color:var(--mms-n-50);padding:10px 16px;
font-size:var(--mms-label);letter-spacing:var(--mms-tracking);
font-weight:500;color:var(--mms-n-500);line-height:1.4;
}
.panel.panel-theme.panel-table .panel-body{padding:12px 16px}
/* ── Tables ───────────────────────────────────────────────────────────── */
.table.table-theme thead th{
font-size:var(--mms-label);letter-spacing:var(--mms-tracking);font-weight:500;
color:var(--mms-n-500);border-bottom:1px solid var(--mms-n-200);
}
.table.table-theme tr th,.table.table-theme tr td{border-bottom:1px solid var(--mms-n-200);padding:10px 8px}
.table.table-theme tbody{font-size:13px;color:var(--mms-n-700)}
.table.table-theme tbody tr{transition:background var(--mms-t)}
.table.table-theme tbody tr:hover:not(.active) td{background-color:var(--mms-n-50)}
.table.table-theme tbody tr.active td{background-color:var(--mms-blue-50);color:var(--mms-n-900)}
.table.table-theme tbody tr i{font-size:15px}
/* ── Data grid (DataTables) ───────────────────────────────────────────── */
/* Heads below are nowrap, so the grid owns the horizontal overflow. With
DataTables scrollX enabled the inner .dataTables_scrollBody scrolls instead
and nothing overflows here, so this is inert in that case. */
.data-grid{overflow-x:auto}
.data-grid .top,.data-grid .bottom{min-width:100%}
.data-grid .top{
background-color:var(--mms-n-0);
border-bottom:1px solid var(--mms-n-200);
padding:8px 12px;
}
.data-grid .title{
font-size:var(--mms-label);letter-spacing:var(--mms-tracking);
font-weight:500;color:var(--mms-n-500);line-height:30px;
}
.data-grid .dataTables_info{font-size:12px;font-weight:400;color:var(--mms-n-500);line-height:30px}
.data-grid .tools a{
background-color:var(--mms-n-0);color:var(--mms-n-700);
border:1px solid var(--mms-n-300) !important;border-radius:var(--mms-radius);
padding:5px 10px;font-size:12px;transition:var(--mms-t);
}
.data-grid .tools a:hover{background-color:var(--mms-n-50);border-color:var(--mms-n-400) !important;color:var(--mms-blue)}
.data-grid .dataTables_filter input{
border:1px solid var(--mms-n-300);border-radius:var(--mms-radius);
padding:5px 8px;transition:var(--mms-t);
}
.data-grid .dataTables_filter input:focus{border-color:var(--mms-blue);box-shadow:var(--mms-ring)}
.data-grid .dataTables_paginate .paginate_button{
border:1px solid var(--mms-n-200) !important;border-radius:var(--mms-radius);
padding:5px 10px;font-size:12px;margin-left:2px;transition:var(--mms-t);
}
.data-grid .dataTables_paginate .paginate_button:hover{background:var(--mms-n-50);color:var(--mms-blue) !important}
.data-grid .dataTables_paginate .paginate_button.current,
.data-grid .dataTables_paginate .paginate_button.current:hover{background:var(--mms-blue);color:#fff !important;border-color:var(--mms-blue) !important}
.data-grid .dataTables_scrollHead,.data-grid .dataTables_scrollBody{border-bottom:1px solid var(--mms-n-200) !important}
.data-grid table{color:var(--mms-n-700)}
.data-grid table thead tr th{
font-size:var(--mms-label);letter-spacing:var(--mms-tracking);font-weight:500;
color:var(--mms-n-500);background:var(--mms-n-50);white-space:nowrap;
}
.data-grid table thead tr th.sorting_asc,.data-grid table thead tr th.sorting_desc{color:var(--mms-blue)}
.data-grid table tr th,.data-grid table tr td{padding:9px 12px;border-bottom:1px solid var(--mms-n-200)}
.data-grid table tbody tr{transition:background var(--mms-t)}
/* the signature row marker: 5px → 3px, same behaviour */
.data-grid table tbody tr td:first-child{border-left:3px solid transparent}
.data-grid table tbody tr.selected td,.data-grid table tbody tr:hover td{background-color:var(--mms-n-50)}
.data-grid table tbody tr.selected td{background-color:var(--mms-blue-50)}
.data-grid table tbody tr.selected td:first-child,
.data-grid table tbody tr:hover td:first-child{border-left:3px solid var(--mms-blue)}
.data-grid table tbody tr td input,.data-grid table tbody tr td select{
border:1px solid var(--mms-n-300);border-radius:var(--mms-radius);padding:4px 8px;transition:var(--mms-t);
}
.data-grid table tbody tr td input:focus,.data-grid table tbody tr td select:focus{
border:1px solid var(--mms-blue);box-shadow:var(--mms-ring);
}
.data-grid .dataTables_processing{border:1px solid var(--mms-n-200);border-radius:var(--mms-radius-card);box-shadow:var(--mms-shadow-2);color:var(--mms-n-700);font-size:14px}
.data-grid .loading-overlay{background-color:rgba(255,255,255,.7)}
.data-grid .loading-overlay i{color:var(--mms-n-400)}
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{border-radius:var(--mms-radius);transition:var(--mms-t)}
.btn:active{transform:translateY(1px)}
.btn-default{background-color:var(--mms-n-0);border-color:var(--mms-n-300);color:var(--mms-n-700)}
.btn-default:hover,.btn-default:focus{background-color:var(--mms-n-50);border-color:var(--mms-n-400);color:var(--mms-n-900)}
.btn-primary:focus,.btn-primary.focus{box-shadow:var(--mms-ring)}
.btn-secondary{border-radius:var(--mms-radius)}
.btn-xs{border-radius:var(--mms-radius)}
/* ── Forms ────────────────────────────────────────────────────────────── */
.form-control{
border-radius:var(--mms-radius);border-color:var(--mms-n-300);
color:var(--mms-n-900);transition:var(--mms-t);
}
.form-control:focus{
border-color:var(--mms-blue);
box-shadow:var(--mms-ring);-webkit-box-shadow:var(--mms-ring);
}
.form-control::placeholder{color:var(--mms-n-400)}
.form-horizontal label,.control-label{
color:var(--mms-n-600);font-weight:500;font-size:12px;
}
.form.form-fieldset fieldset > legend{
color:var(--mms-n-900) !important;font-size:14px;font-weight:500;
border-bottom:1px solid var(--mms-n-200);padding-bottom:6px;
}
fieldset legend{color:var(--mms-n-900);font-size:14px;font-weight:500}
.input-group .input-group-addon{
border-radius:var(--mms-radius);border-color:var(--mms-n-300);
background-color:var(--mms-n-50);color:var(--mms-n-600);
}
.note-editor{border:1px solid var(--mms-n-300) !important;border-radius:var(--mms-radius)}
textarea.summernote.form-control{border:1px solid var(--mms-n-300)}
/* ── Labels → status pills ────────────────────────────────────────────── */
.label{
border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500;
letter-spacing:0;line-height:1.6;white-space:nowrap;
}
.label.label-sm{font-size:10px;padding:2px 7px}
.label.label-lg{font-size:12px;padding:3px 10px}
.label.label-theme,.label.label-primary{background-color:var(--mms-blue-50);color:var(--mms-blue-dark)}
.label.label-success{background-color:var(--mms-success-bg);color:var(--mms-success-fg)}
.label.label-warning{background-color:var(--mms-warning-bg);color:var(--mms-warning-fg)}
.label.label-danger{background-color:var(--mms-danger-bg);color:var(--mms-danger-fg)}
.label.label-info{background-color:var(--mms-blue-50);color:var(--mms-blue-dark)}
.label.label-default{background-color:var(--mms-n-100);color:var(--mms-n-600)}
.badge{border-radius:999px;font-weight:500}
.badge.badge-primary{background-color:var(--mms-blue)}
/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert{border-radius:var(--mms-radius-card);font-size:13px}
.alert-success{background-color:var(--mms-success-bg);border-color:#DCEBD4;color:var(--mms-success-fg)}
.alert-danger{background-color:var(--mms-danger-bg);border-color:#F1D6D5;color:var(--mms-danger-fg)}
.alert-warning{background-color:var(--mms-warning-bg);border-color:#F3E2C6;color:var(--mms-warning-fg)}
.alert-info{background-color:var(--mms-blue-50);border-color:var(--mms-blue-100);color:var(--mms-blue-dark)}
/* ── Overlays: dropdowns, modals ──────────────────────────────────────── */
.dropdown .dropdown-menu{
border-radius:var(--mms-radius-overlay);border:1px solid var(--mms-n-200);
box-shadow:var(--mms-shadow-3);padding:4px;
}
.dropdown .dropdown-menu li a{border-radius:var(--mms-radius);padding:6px 10px;transition:var(--mms-t)}
.dropdown .dropdown-menu li a:hover,.dropdown .dropdown-menu li a:focus,.dropdown .dropdown-menu li a:active{
background-color:var(--mms-n-50) !important;color:var(--mms-n-900) !important;
}
.dropdown .dropdown-menu li form input[type="submit"]{border-radius:var(--mms-radius)}
.dropdown .dropdown-menu li form input[type="submit"]:hover{background-color:var(--mms-n-50) !important;color:var(--mms-n-900) !important}
.modal-content{border-radius:var(--mms-radius-overlay);border:1px solid var(--mms-n-200);box-shadow:var(--mms-shadow-3)}
.modal-header{border-bottom:1px solid var(--mms-n-200)}
.modal-footer{border-top:1px solid var(--mms-n-200)}
/* ── Progress ─────────────────────────────────────────────────────────── */
.progress{border-radius:999px;background-color:var(--mms-n-200);overflow:hidden}
.progress .progress-bar{border-radius:999px}
.progress .progress-bar-primary{background-color:var(--mms-blue)}
/* ── Lists, tabs, breadcrumb ──────────────────────────────────────────── */
.list-group .list-group-item{border-radius:0;border-color:var(--mms-n-200);padding:8px 16px}
.list-group .list-group-item:first-child{border-radius:var(--mms-radius-card) var(--mms-radius-card) 0 0}
.list-group .list-group-item:last-child{border-radius:0 0 var(--mms-radius-card) var(--mms-radius-card)}
.list-group-item:hover,.list-group-item:focus{background-color:var(--mms-n-50)}
.nav-tabs{border-bottom:1px solid var(--mms-n-200)}
.nav-tabs li a{border-radius:var(--mms-radius) var(--mms-radius) 0 0;color:var(--mms-n-600);transition:var(--mms-t)}
.nav-tabs li.active a{color:var(--mms-blue);font-weight:500}
.breadcrumb{font-size:12px;color:var(--mms-n-500);padding:8px 0}
/* ── Statistics, dashboard tiles ──────────────────────────────────────── */
.report-statistics li{
border:1px solid var(--mms-n-200);border-radius:var(--mms-radius-card);
background:var(--mms-n-0);box-shadow:var(--mms-shadow-1);padding:16px;margin-bottom:12px;
text-align:left;transition:var(--mms-t);
}
.report-statistics li .stat{font-size:28px;font-weight:300;color:var(--mms-n-900);display:block}
.report-statistics li:first-child .stat{color:var(--mms-blue)}
.report-statistics li .stat-title{
color:var(--mms-n-500);font-style:normal;font-size:var(--mms-label);
letter-spacing:var(--mms-tracking);text-transform:uppercase;font-weight:500;display:block;
}
.dashboard-tile{
border:1px solid var(--mms-n-200) !important;border-radius:var(--mms-radius-card);
background:var(--mms-n-0);box-shadow:var(--mms-shadow-1);
height:auto;min-height:150px;padding:24px 20px;font-size:15px;font-weight:500;
color:var(--mms-n-900);transition:var(--mms-t);
}
.dashboard-tile:hover{box-shadow:var(--mms-shadow-2);transform:translateY(-1px);color:var(--mms-blue)}
.dashboard-tile > i{color:var(--mms-blue);margin-bottom:14px}
.dashboard-count h3{font-size:26px;font-weight:300;color:var(--mms-n-900)}
.dashboard-count h5{font-size:var(--mms-label);letter-spacing:var(--mms-tracking);text-transform:uppercase;color:var(--mms-n-500);font-weight:500}
/* ── Cards, timeline, observations ────────────────────────────────────── */
.card{border-radius:var(--mms-radius-card)}
.card.hovercard{border:1px solid var(--mms-n-200);box-shadow:var(--mms-shadow-1)}
.list-timeline .timeline-item .timeline-item-content .timeline-item-header:before{
width:11px;height:11px;border:2px solid var(--mms-n-0);left:-27px;top:6px;
box-shadow:0 0 0 1px var(--mms-n-200);
}
.list-timeline .timeline-item:before{width:2px;background:var(--mms-n-200);left:18px}
.list-observations article.observation{
border:1px solid var(--mms-n-200);border-radius:var(--mms-radius-card);
margin-bottom:8px;transition:var(--mms-t);
}
.list-observations article.observation:hover{border:1px solid var(--mms-blue);box-shadow:var(--mms-shadow-1)}
.list-observations article.observation .comments article.comment{background-color:var(--mms-n-50);border-radius:var(--mms-radius)}
.table-observations .observation{border-top:1px solid var(--mms-n-200)}
.table-observations .observation:hover{background-color:var(--mms-n-50)}
.profile-image span{background-color:rgba(24,32,42,.72)}
/* ── Media browser / file tiles ───────────────────────────────────────── */
.file,.mediabrowser .file{border-radius:var(--mms-radius-card)}
/* ── Upload dropzone ──────────────────────────────────────────────────── */
#file-modal .file-upload-form{border:2px dashed var(--mms-n-300);border-radius:var(--mms-radius-card);transition:var(--mms-t)}
#file-modal .file-upload-form.dragging{border-color:var(--mms-blue);background:var(--mms-blue-25)}
#file-modal .file-upload-form .placeholders{color:var(--mms-n-500);font-size:15px}
#file-modal .file-upload-form .file-upload .uploadprogress .progress{border-radius:999px;background-color:var(--mms-n-200)}
/* ── Login ────────────────────────────────────────────────────────────────
Views/Account/Login.cshtml links login.css from inside the view, so that
sheet loads AFTER this one. These selectors match or exceed its specificity
on the properties they touch; everything else is left to login.css. */
#login-page{font-size:13px}
#login-feed{background-color:var(--mms-n-900)}
#login-form .login-content .login-header .logo img{width:auto;min-width:0;max-width:200px}
#login-form .login-content .login-body{padding:24px 0}
#login-form .login-content .login-body .form-control{
font-size:14px;height:40px;border-radius:var(--mms-radius);
border-color:var(--mms-n-300);color:var(--mms-n-900);
}
#login-form .login-content .login-body .form-control:focus{border-color:var(--mms-blue);box-shadow:var(--mms-ring)}
#login-form .login-content .login-body .form-group{margin-bottom:14px}
#login-form .login-content .login-body .btn-primary{height:42px;font-size:14px;border-radius:var(--mms-radius)}
#login-form .login-content .login-body .text-danger{font-size:12px}
#login-feed .feed-caption{color:var(--mms-n-200);padding:22px 60px}
#login-feed .feed-caption h1{font-size:22px;font-weight:500}
/* ── Print ────────────────────────────────────────────────────────────── */
div.a4{box-shadow:0 1px 3px rgba(24,32,42,.1),0 12px 32px rgba(24,32,42,.12)}
#report-result{
background-color:var(--mms-n-0);border:1px solid var(--mms-n-200);
border-radius:var(--mms-radius-card);box-shadow:var(--mms-shadow-2);
}
.sticky-footer .tombrok-footer{border-bottom:4px solid #ee1d23}
@media print{
div.a4{box-shadow:none !important}
}
/* ============================================================================
PHASE 2 — sidebar shell. Opt in with .
Converts #primary-navigation (the 175px-per-item tab strip) into a 240px
left sidebar. Pure CSS: no Razor change, no JS. Below 992px it falls back
to the app's own off-canvas drawer, exactly as today.
========================================================================= */
@media(min-width:992px){
body.mms-shell #page #header{left:var(--mms-sidebar);width:auto;right:0}
body.mms-shell #page #header h1{margin-left:0;padding-left:16px}
body.mms-shell #page #header h1 img{display:none}
body.mms-shell #page #body{left:var(--mms-sidebar);width:auto;right:0}
body.mms-shell #page #body nav #primary-navigation{
position:fixed;top:0;left:0;bottom:0;width:var(--mms-sidebar);z-index:20;
background-color:var(--mms-n-0);border-right:1px solid var(--mms-n-200);
padding:calc(var(--mms-topbar) + 12px) 8px 12px;margin:0;overflow-y:auto;
}
body.mms-shell #page #body nav #primary-navigation > li{
display:block;width:auto;min-width:0;line-height:36px;margin:0 0 2px;
border-radius:var(--mms-radius);text-align:left;
box-shadow:none !important;
}
body.mms-shell #page #body nav #primary-navigation > li a{
display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:var(--mms-radius);
}
body.mms-shell #page #body nav #primary-navigation > li a i{
display:inline-block;width:16px;text-align:center;font-size:14px;color:var(--mms-n-400);
}
body.mms-shell #page #body nav #primary-navigation > li.active{
background:var(--mms-blue-50) !important;box-shadow:inset 3px 0 0 0 var(--mms-blue) !important;
}
body.mms-shell #page #body nav #primary-navigation > li.active a i{color:var(--mms-blue)}
body.mms-shell #page #body nav #primary-navigation #config-nav{float:none}
/* the brand mark sits above the nav, inside the sidebar */
body.mms-shell #page #body nav #primary-navigation:before{
content:"";position:fixed;top:0;left:0;width:var(--mms-sidebar);height:var(--mms-topbar);
background:var(--mms-n-0) url(/Content/images/logo.png) 16px center no-repeat;
background-size:auto 26px;border-right:1px solid var(--mms-n-200);
border-bottom:1px solid var(--mms-n-200);z-index:21;
}
body.mms-shell.nav-active #page,body.mms-shell.nav-active #page #header{left:0}
}
/* ============================================================================
PHASE 3 — account block in the sidebar, and the page footer.
The account menu, logout and version moved out of the top bar and the footer
into the sidebar (see _Navigation); what remains of the footer is the Capteur
mark, on white.
========================================================================= */
/* --- footer ---------------------------------------------------------------
The page is a normal document: html/body carry the height, #page holds the
header and #body. Making #page a column flexbox at full viewport height and
letting #body grow is what pins the footer to the bottom on a short page,
rather than leaving it floating under the content. */
html{height:100%}
body{min-height:100vh}
#page{display:flex;flex-direction:column;min-height:100vh}
#page #body{display:flex;flex-direction:column;flex:1 0 auto}
#page #body .sticky-footer{margin-top:auto}
/* White, per the brand mark it now carries. The red rule is the one piece of
the old blue bar kept, as the accent at the foot of the page. */
.sticky-footer .tombrok-footer{
background:var(--mms-n-0);
color:inherit;
height:auto;
padding:10px 24px;
border-top:1px solid var(--mms-n-200);
border-bottom:4px solid #ee1d23;
display:flex;
align-items:center;
}
.sticky-footer .tombrok-footer img{max-height:30px;width:auto;height:auto}
/* --- sidebar account block ------------------------------------------------
Bottom of the sidebar, in reading order: Logout, Accountmanagement, then the
signed-in account. The name is the link to My account, so there is no
separate item for it. */
@media(min-width:992px){
/* A column so the spacer's auto margin can push the account block down. */
body.mms-shell #page #body nav #primary-navigation{display:flex;flex-direction:column}
body.mms-shell #page #body nav #primary-navigation > li.nav-spacer{
margin-top:auto;min-height:12px;line-height:0;
}
body.mms-shell #page #body nav #primary-navigation > li.nav-version{
border-top:1px solid var(--mms-n-200);
}
/* The account row has to out-rank the sidebar rules above it: those set
"> li{display:block}" and "> li a{padding:0 12px}" at three ids and a
class, so the same prefix is repeated here rather than relying on the
shorter selectors further down, which lose and leave logout stacked
under the name. */
body.mms-shell #page #body nav #primary-navigation > li.nav-user{
display:flex;align-items:center;gap:4px;line-height:normal;padding-right:8px;
}
body.mms-shell #page #body nav #primary-navigation > li.nav-user .nav-account{
flex:1 1 auto;min-width:0;padding:8px 12px;
}
body.mms-shell #page #body nav #primary-navigation > li.nav-user .nav-logout{
flex:0 0 auto;width:32px;height:32px;padding:0;justify-content:center;
}
}
/* Holds the account row clear of the menu above it. Nothing sits between the
two now, so this margin is the whole distance to the account name; the
sidebar list is a flexbox, where margins do not collapse. The view sets its
own value inline, which wins over this default. */
#primary-navigation > li.nav-accountmanagement{margin-bottom:96px}
/* Also applies in the mobile drawer, where the sidebar rules above do not.
The row holds two links: the account, which takes the space, and logout
pinned to its right. */
#primary-navigation > li.nav-user{
display:flex;align-items:center;gap:4px;line-height:normal;padding-right:8px;
}
#primary-navigation > li.nav-user .nav-account{
display:flex;align-items:center;gap:10px;padding:8px 12px;
flex:1 1 auto;min-width:0;
color:var(--mms-n-700);font-weight:600;text-decoration:none;
}
#primary-navigation > li.nav-user .nav-account:hover{color:var(--mms-blue)}
#primary-navigation > li.nav-user .nav-logout{
display:flex;align-items:center;justify-content:center;
flex:0 0 auto;width:32px;height:32px;
border-radius:var(--mms-radius);color:var(--mms-n-500);
text-decoration:none;transition:var(--mms-t);
}
#primary-navigation > li.nav-user .nav-logout:hover{
background:var(--mms-red-50);color:var(--mms-red);
}
#primary-navigation > li.nav-user .nav-logout i{font-size:14px;line-height:1}
#primary-navigation > li.nav-user .nav-avatar{
width:28px;height:28px;flex:0 0 28px;border-radius:50%;object-fit:cover;
border:1px solid var(--mms-n-200);background:var(--mms-n-50);
}
/* The name is the one item here of unbounded length; keep it on its line. */
#primary-navigation > li.nav-user .nav-username{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#primary-navigation > li.nav-version{
box-sizing:border-box;height:24px;line-height:23px;padding:0 12px;margin:0;
font-size:11px;color:var(--mms-n-500);
}
/* ============================================================================
PHASE 4 — DataTables pager.
The Bootstrap 5 integration renders
around , so the earlier .paginate_button rules were
decorating the list item while Bootstrap decorated the link inside it: two
borders, two paddings, two radii, and the buttons welded into a strip by
Bootstrap's -1px joining margin. The list item goes back to being a plain
wrapper, the link becomes the button, and the buttons are separate.
========================================================================= */
.data-grid .dataTables_paginate{margin:0;padding:0}
.data-grid .dataTables_paginate ul.pagination{
display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
gap:10px;margin:0;padding:0;
}
/* Undo the earlier list-item styling, including the joining margin. */
.data-grid .dataTables_paginate .paginate_button.page-item{
border:0 !important;background:none !important;padding:0;margin:0;border-radius:0;
}
.data-grid .dataTables_paginate .page-item .page-link{
display:flex;align-items:center;justify-content:center;
min-width:32px;height:32px;padding:0 10px;margin:0;
border:1px solid var(--mms-n-200);border-radius:var(--mms-radius);
background:var(--mms-n-0);color:var(--mms-n-600);
font-size:12px;font-variant-numeric:tabular-nums;line-height:1;
box-shadow:none;transition:var(--mms-t);
}
.data-grid .dataTables_paginate .page-item .page-link:hover{
background:var(--mms-n-50);border-color:var(--mms-n-300);color:var(--mms-blue);
}
.data-grid .dataTables_paginate .page-item .page-link:focus{box-shadow:none}
.data-grid .dataTables_paginate .page-item .page-link:focus-visible{
outline:2px solid var(--mms-blue);outline-offset:2px;
}
.data-grid .dataTables_paginate .page-item.active .page-link,
.data-grid .dataTables_paginate .page-item.active .page-link:hover{
background:var(--mms-blue);border-color:var(--mms-blue);color:var(--mms-n-0);
font-weight:600;
}
/* Muted rather than hidden, so the control keeps its shape at either end. */
.data-grid .dataTables_paginate .page-item.disabled .page-link{
background:var(--mms-n-0);border-color:var(--mms-n-100);color:var(--mms-n-300);
cursor:default;pointer-events:none;
}
/* first/previous/next/last carry an icon rather than a label - datatable.js
swaps their text for one on every draw. */
.data-grid .dataTables_paginate .page-item .page-link i{font-size:11px;line-height:1}
/* The row count sits beside the pager; keep them on one baseline. */
.data-grid .dataTables_info{font-size:12px;color:var(--mms-n-500);padding:0}
/* ============================================================================
PHASE 5 — status dot.
Used by the project grid's Invoiced column, which renders a dot instead of
the words Yes and No. Green and red alone would leave the two states
indistinguishable to the most common form of colour blindness, so the shape
differs as well: invoiced is filled, not invoiced is a ring.
========================================================================= */
.data-grid .status-dot{
display:inline-block;width:10px;height:10px;border-radius:50%;
vertical-align:middle;box-sizing:border-box;
}
.data-grid .status-dot-no{background:#1E874B;border:1px solid #1E874B}
.data-grid .status-dot-yes {
background: var(--mms-red);
border: 2px solid var(--mms-red)
}