/* Monday-style theme for the whole CRM (admin + login). Restyle only: same markup, names and behaviour.
   Loaded after style.css / tailwind. Look: white work area, light sidebar, flat bordered cards, 4px-radius buttons,
   colour-coded status pills, left status bars on rows. Light theme; dark theme comes with the React pieces. */
:root {
  --m-bg: #fff; --m-page: #f6f7fb; --m-surface: #fff; --m-hover: #f5f6f8; --m-sel: #cce5ff; --m-line: #d0d4e4; --m-line-soft: #e6e9ef;
  --m-fg: #323338; --m-muted: #676879;
  --m-brand: #0073ea; --m-brand-hover: #0060b9; --m-brand-soft: #e5f4ff;
  --m-done: #00c875; --m-work: #fdab3d; --m-stuck: #e2445c; --m-blue: #579bfc; --m-purple: #a25ddc; --m-grey: #c4c4c4;
  --m-done-soft: #d9f7e8; --m-work-soft: #fff1dc; --m-stuck-soft: #fbe0e5;
  --m-r: 4px; --m-r-lg: 8px; --m-shadow: 0 4px 6px -2px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.3);
  --m-ease: background-color .1s, border-color .1s, color .1s, box-shadow .1s;
}
body, body.login_admin { background-color: var(--m-bg) !important; color: var(--m-fg); }
#wrapper, #wrapper .content { background-color: var(--m-bg); }
a { color: var(--m-brand); }
a:hover, a:focus { color: var(--m-brand-hover); }

/* ---- header: white, thin line, rounded grey search ---- */
#header { background: var(--m-bg); border-bottom: 1px solid var(--m-line-soft); box-shadow: none; }
#header li > a.active { background: var(--m-hover); border-radius: var(--m-r); }
.navbar-nav > li > a { color: var(--m-muted); }
.navbar-nav > li > a:hover { color: var(--m-fg); background: var(--m-hover); border-radius: var(--m-r); }
#top_search, #top_search_button input, #header .form-control { background: var(--m-hover); border: 1px solid transparent; border-radius: 20px; }

/* ---- sidebar: light panel, selected item = pale blue, blue edge ---- */
.sidebar { background: var(--m-bg); border-right: 1px solid var(--m-line-soft); }
.sidebar li a { color: var(--m-fg); font-weight: 400; border-radius: var(--m-r); }
.sidebar li a i.menu-icon { opacity: 1; color: var(--m-muted); }
.sidebar li.active > a, .sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus { background: var(--m-hover); color: var(--m-fg); border-radius: var(--m-r); }
.sidebar li.active > a { background: var(--m-sel); color: var(--m-fg); box-shadow: none; font-weight: 500; }
.sidebar li.active > a .menu-icon, .sidebar .nav > li > a:hover .menu-icon, .sidebar .nav > li > a:focus .menu-icon { color: var(--m-brand); }
.sidebar li .nav-second-level li a { color: var(--m-muted); }
.sidebar li .nav-second-level li.active a { background-color: var(--m-sel); color: var(--m-fg) !important; }
.sidebar li .nav-second-level li.active a .menu-icon { color: var(--m-brand); }
.sidebar li .nav-second-level a:hover .menu-icon, .sidebar li .nav-second-level a:focus .menu-icon { color: var(--m-brand); }
.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover, .sidebar .nav > li .nav-second-level > li:not(.active) > a:focus { background-color: var(--m-hover); color: var(--m-fg); }
.sidebar .arrow, .sidebar .fa.arrow:before { color: var(--m-muted); }
.sidebar li a.logo-text, .sidebar li a.logo-text:hover, .sidebar li a.logo-text:focus, .sidebar li a.logo-text:active { color: var(--m-fg); font-weight: 700; background: none; }

/* ---- cards / panels: flat, 1px border, 8px radius ---- */
.panel_s { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); box-shadow: none; }
.panel_s .panel-heading { background: var(--m-bg); border-bottom: 1px solid var(--m-line-soft); border-radius: var(--m-r-lg) var(--m-r-lg) 0 0; }
.modal-content { border: 0; border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); }
.dropdown-menu { border: 1px solid var(--m-line-soft); border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); }
.dropdown-menu > li > a:hover { background: var(--m-hover); }
.login_admin .tw-shadow, .authentication-form-wrapper .tw-rounded-lg { border: 1px solid var(--m-line); border-radius: var(--m-r-lg) !important; box-shadow: none !important; }

/* ---- buttons: 4px radius, solid blue primary ---- */
.btn { border-radius: var(--m-r); font-weight: 500; transition: var(--m-ease); }
.btn-primary, .btn-primary:focus { background-color: var(--m-brand); border-color: var(--m-brand); color: #fff; }
.btn-primary:hover, .btn-primary:active { background-color: var(--m-brand-hover); border-color: var(--m-brand-hover); }
.btn-default { background: var(--m-bg); border-color: var(--m-line); color: var(--m-fg); }
.btn-default:hover, .btn-default:focus { background: var(--m-hover); border-color: var(--m-line); color: var(--m-fg); }
.btn-success { background: var(--m-done); border-color: var(--m-done); }
.btn-danger { background: var(--m-stuck); border-color: var(--m-stuck); }
.btn-warning { background: var(--m-work); border-color: var(--m-work); color: #fff; }
.btn-icon { border-radius: var(--m-r); }

/* ---- fields ---- */
.form-control, .bootstrap-select > .dropdown-toggle { border-radius: var(--m-r); border: 1px solid var(--m-line); box-shadow: none; transition: var(--m-ease); color: var(--m-fg); }
.form-control:hover { border-color: #9d9faa; }
.form-control:focus { border-color: var(--m-brand); box-shadow: 0 0 0 1px var(--m-brand); }

/* ---- tables: quiet header, 1px dividers, hover grey, left status bar ---- */
table.dataTable thead th, .table > thead > tr > th { background: var(--m-bg); color: var(--m-muted); font-size: 13px; font-weight: 400; text-align: left; border-bottom: 1px solid var(--m-line); }
table.dataTable tbody td, .table > tbody > tr > td { padding-block: 10px; border-top: 1px solid var(--m-line-soft); vertical-align: middle; }
table.dataTable.no-footer { border-bottom: 0; }
.table-hover > tbody > tr:hover > td, table.dataTable tbody tr:hover > td { background: var(--m-hover); }
table.dataTable tbody tr > td:first-child { box-shadow: inset 4px 0 0 var(--m-grey); }
table.dataTable tbody tr:has(.onoffswitch-checkbox:checked) > td:first-child { box-shadow: inset 4px 0 0 var(--m-done); }
table.dataTable tbody tr:has(.onoffswitch-checkbox:not(:checked)) > td:first-child { box-shadow: inset 4px 0 0 var(--m-stuck); }
table.dataTable tbody tr:has(.onoffswitch-checkbox:not(:checked)) > td { color: var(--m-muted); }
.dataTables_filter input { border: 1px solid var(--m-line); border-radius: var(--m-r); background: var(--m-bg); }

/* ---- status pills: Monday-style solid colours ---- */
.label { border-radius: var(--m-r); padding: 4px 10px; font-weight: 500; color: #fff; }
.label-success { background: var(--m-done); }
.label-danger { background: var(--m-stuck); }
.label-warning { background: var(--m-work); }
.label-info, .label-primary { background: var(--m-blue); }
.label-default { background: var(--m-grey); }
.customer-group-list, .tags-labels .label, .label-tag { background: var(--m-brand-soft); color: var(--m-brand); }
.text-success { color: #037f4c !important; } .text-danger { color: var(--m-stuck) !important; } .text-warning { color: #b87b00 !important; }

/* ---- tabs: underline style ---- */
.nav-tabs { border-bottom: 1px solid var(--m-line-soft); }
.nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--m-muted); font-weight: 400; background: none; }
.nav-tabs > li > a:hover { background: var(--m-hover); border-bottom-color: var(--m-line); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--m-fg); border: 0; border-bottom: 2px solid var(--m-brand); background: none; }

/* ---- kanban (tasks, leads, projects) ---- */
.kan-ban-col { background: var(--m-page); border-radius: var(--m-r-lg); }
.kan-ban-body .panel_s, .kan-ban-content .panel_s, .task-kanban-card { border: 1px solid var(--m-line-soft); border-radius: var(--m-r-lg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---- titles / misc ---- */
h1, h2, h3, h4, .page-title { color: var(--m-fg); font-weight: 600; }
hr { border-top-color: var(--m-line-soft); }
.progress { border-radius: 99px; background: var(--m-line-soft); box-shadow: none; }
.progress-bar { background-color: var(--m-brand); }
.alert { border-radius: var(--m-r-lg); }
.pagination > li > a, .pagination > li > span { border-radius: var(--m-r); }
.pagination > .active > a { background: var(--m-brand); border-color: var(--m-brand); }


/* ================= visual upgrade (checked against screenshots of the running app) ================= */
/* brand block: white, bold name with a blue mark, thin line */
#side-menu > li:first-child { background: var(--m-bg) !important; border-bottom: 1px solid var(--m-line-soft); }
#side-menu #logo a.logo-text { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.01em; color: var(--m-fg); }
#side-menu #logo a.logo-text::before { content: ""; width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, var(--m-brand) 0 33%, var(--m-done) 33% 66%, var(--m-work) 66% 100%); }
/* sidebar icons: calm grey, blue when active */
#side-menu li a .menu-icon, #side-menu li a i { color: #9a9cad !important; font-size: 15px; }
#side-menu li.active > a .menu-icon, #side-menu li a:hover .menu-icon { color: var(--m-brand) !important; }
#side-menu li a { padding: 9px 12px; margin-top: 2px; font-size: 14px; }
.sidebar { padding-inline: 8px; }

/* header: clean search, square quick-create */
#top_search { box-shadow: none !important; background: none; }
#search_input { background: var(--m-page) !important; border-radius: 20px !important; transition: var(--m-ease); }
#search_input:focus { background: var(--m-bg) !important; box-shadow: 0 0 0 1px var(--m-brand) !important; }
#header .tw-bg-primary-600, #header .quick-create-btn, #header .btn-primary { background: var(--m-brand) !important; border-radius: var(--m-r) !important; }
#header .tw-bg-primary-600:hover { background: var(--m-brand-hover) !important; }

/* dashboard quick stats: white cards with a colour-coded top edge, like Monday dashboard widgets */
[class*="quick-stats-"] .top_stats_wrapper { background: var(--m-bg); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); border-top: 4px solid var(--m-blue); padding: 14px 16px; box-shadow: none; }
.quick-stats-invoices .top_stats_wrapper { border-top-color: var(--m-blue); }
.quick-stats-leads .top_stats_wrapper { border-top-color: var(--m-done); }
.quick-stats-projects .top_stats_wrapper { border-top-color: var(--m-work); }
.quick-stats-tasks .top_stats_wrapper { border-top-color: var(--m-purple); }
[class*="quick-stats-"] .top_stats_wrapper svg { color: var(--m-muted); }
[class*="quick-stats-"] .top_stats_wrapper .tw-font-medium { font-weight: 500; }
[class*="quick-stats-"] .top_stats_wrapper .progress { height: 6px; margin-top: 10px; }

/* progress / status bars in Monday colours */
.progress-bar-success { background-color: var(--m-done); } .progress-bar-danger { background-color: var(--m-stuck); }
.progress-bar-warning { background-color: var(--m-work); } .progress-bar-info { background-color: var(--m-blue); }
.progress-bar-default, .progress-bar-secondary { background-color: var(--m-grey); }

/* widgets on the dashboard / customer summary: bordered cards, comfortable titles */
.panel_s > .panel-body { padding: 20px 22px; }
.panel_s h4, .widget-title { font-size: 17px; font-weight: 600; color: var(--m-fg); }
.panel_s h4 svg { color: var(--m-brand); }
.panel_s .tw-text-neutral-500 { color: var(--m-muted) !important; }

/* page action bar buttons: Monday-size */
.btn { padding: 7px 14px; font-size: 14px; line-height: 20px; }
.btn-xs, .btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-primary .fa, .btn-primary svg { margin-right: 4px; }

/* dev-mode banner: soft, not shouting */
.alert-warning { background: var(--m-work-soft); border: 1px solid #ffd9a3; color: #6b4a00; }
.alert-success { background: var(--m-done-soft); border: 1px solid #a8ebc9; color: #05603a; }
.alert-danger { background: var(--m-stuck-soft); border: 1px solid #f5b7c2; color: #8a1f33; }
.alert-info { background: var(--m-brand-soft); border: 1px solid #b6dcff; color: #0b4a8f; }


/* ---- round 2 (from screenshots) ---- */
table.dataTable tbody td.dataTables_empty { box-shadow: none !important; color: var(--m-muted); padding: 28px 12px; text-align: center; }
.panel_s .panel-body .tw-font-semibold.tw-text-lg, .panel_s h4 { font-size: 16px; }
/* summary strips (Customers / Tasks / Leads summary): big numbers, readable labels */
.panel_s .tw-divide-x > div, .panel_s .tw-divide-x > li { padding-block: 4px; }
.panel_s .tw-divide-x .tw-font-semibold, .panel_s .tw-divide-x span.tw-text-lg { font-size: 22px; font-weight: 600; color: var(--m-fg); }
[class*="text-success"], .tw-text-success-700 { color: #037f4c; }
.tw-text-info-600, .text-info { color: #0073ea !important; }
.tw-text-warning-600 { color: #b87b00 !important; }
/* table toolbar (length, export, bulk): quiet */
.dt-buttons .btn, .dataTables_length select { border-radius: var(--m-r); font-size: 13px; }
/* login: soft page, brand mark, card */
body.login_admin { background: linear-gradient(180deg, var(--m-brand-soft), var(--m-bg) 320px) !important; }
body.login_admin .company-logo a, body.login_admin .company-logo { font-size: 22px; font-weight: 700; color: var(--m-fg); display: flex; justify-content: center; align-items: center; gap: 10px; }
body.login_admin .company-logo a::before { content: ""; width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--m-brand) 0 33%, var(--m-done) 33% 66%, var(--m-work) 66% 100%); }
body.login_admin h1 { font-size: 26px; font-weight: 700; }
body.login_admin .btn-primary { padding-block: 10px; font-size: 15px; }
body.login_admin .authentication-form-wrapper .tw-rounded-lg { background: var(--m-bg); box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; border: 1px solid var(--m-line-soft); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
body.login_admin { min-height: 100vh; background-attachment: fixed; }

/* ================= spacing pass: one consistent 16px rhythm, no dead space ================= */
.content { padding: 20px 24px; }
.panel_s { margin-bottom: 16px; }
.panel_s > .panel-body { padding: 16px 20px; }
.panel_s .panel-heading { padding: 12px 20px; }
.alert { margin-bottom: 16px; padding: 12px 16px; }
.alert p { margin: 0 0 4px; } .alert p:last-child { margin-bottom: 0; }
.alert h4, .alert .bold:first-child { margin: 0 0 4px; }
.row._buttons { margin-bottom: 12px !important; }
.panel_s.tw-mt-2, .panel_s.sm\:tw-mt-4 { margin-top: 12px !important; }
.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.row { margin-left: -8px; margin-right: -8px; }
.mbot15 { margin-bottom: 12px; } .mbot20 { margin-bottom: 16px; } .mtop15 { margin-top: 12px; } .mtop20 { margin-top: 16px; }
hr { margin: 12px 0; }
.form-group { margin-bottom: 12px; }
/* dashboard widgets: tighter stack */
.widget { margin-bottom: 0; }
[class*="quick-stats-"] { margin-bottom: 8px !important; }
[class*="quick-stats-"] .top_stats_wrapper { padding: 12px 16px; }
/* table cells and toolbars */
table.dataTable tbody td, .table > tbody > tr > td { padding-block: 8px; }
table.dataTable thead th, .table > thead > tr > th { padding-block: 8px; }
.dataTables_wrapper .row, .dt-buttons { margin-bottom: 8px; }
.dataTables_info, .dataTables_paginate { padding-top: 8px; }
.modal-body { padding: 16px 20px; } .modal-header { padding: 14px 20px; } .modal-footer { padding: 12px 20px; }

.alert + .row, .alert + div > .row:first-child { margin-top: 0; }
#wrapper .content > .row > [class*="col-"] > .alert { margin-top: 0; }

/* ================= bright background + calendar + fixed sidebar ================= */
#wrapper { background: linear-gradient(180deg, #e8f3ff 0, #f1ecff 420px, #f6f7fb 900px) fixed; min-height: 100vh; }
#wrapper .content { background: transparent; }
.panel_s { background: #fff; box-shadow: 0 2px 8px rgba(50,51,56,.06); }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; }
body.page-small .sidebar, .mobile .sidebar { position: absolute; }
#header { position: sticky; top: 0; }

/* calendar: Monday-blue buttons and coloured events instead of dark navy / grey */
.fc .fc-button, .fc .fc-button-primary, .fc-button-group > .fc-button { background: #fff !important; border: 1px solid var(--m-line) !important; color: var(--m-fg) !important; box-shadow: none !important; text-transform: none; font-weight: 500; }
.fc .fc-button:hover { background: var(--m-hover) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--m-brand) !important; border-color: var(--m-brand) !important; color: #fff !important; }
.fc .fc-toolbar-title { font-size: 20px; font-weight: 600; }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--m-muted); text-decoration: none; }
.fc .fc-daygrid-day.fc-day-today { background: var(--m-brand-soft) !important; }
.fc-event, .fc-daygrid-event { border: 0 !important; border-radius: 4px !important; background: var(--m-blue); color: #fff; padding: 1px 6px; font-weight: 500; }
.fc-daygrid-dot-event .fc-event-title { font-weight: 600; }

/* brighter backdrop + colour line under the top of the header */
#wrapper { background: linear-gradient(180deg, #d4e9ff 0, #e4dcff 360px, #eef1fb 820px, #f6f7fb 1200px) fixed; }
#header { box-shadow: inset 0 3px 0 0 transparent; background-image: linear-gradient(90deg, #0073ea, #00c875 35%, #fdab3d 65%, #a25ddc); background-size: 100% 3px; background-repeat: no-repeat; background-color: #fff; }

/* ================= premium polish, phase 1: dashboard tables, banners, notifications ================= */
:root { --m-row-pad: 10px; }

/* My Tasks / My Projects tabs: no clipped columns, one scroll area, calm rows */
.home-activity .tab-content { height: auto; max-height: 480px; overflow: auto; padding-right: 0; }
.home-activity .table-responsive { overflow-x: auto; border: 0; margin-bottom: 0; }
.table-tasks, .table-projects { width: 100%; }
.table-tasks th, .table-tasks td, .table-projects th, .table-projects td { white-space: nowrap; }
/* the title column takes all the free width and is cut after two lines (full title on hover, see custom.js) */
.table-tasks td:nth-child(2), .table-tasks th:nth-child(2) { width: 100%; max-width: 0; min-width: 260px; white-space: normal; }
.table-tasks .main-tasks-table-href-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  color: var(--m-fg); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;
}
.table-tasks .main-tasks-table-href-name:hover { color: var(--m-brand); }
/* overdue rows: a thin red bar and red date instead of a pink row */
table.dataTable tbody tr.danger > td, .table > tbody > tr.danger > td { background: transparent; }
table.dataTable tbody tr.danger > td:first-child { box-shadow: inset 4px 0 0 var(--m-stuck); }
table.dataTable tbody tr.danger:hover > td { background: var(--m-hover); }
table.dataTable tbody tr.info > td, table.dataTable tbody tr.warning > td { background: transparent; }

/* dashboard report tables (staff tickets, project status, ...): the name column stays on one line */
.widget table.dataTable { width: 100% !important; }
.widget table.dataTable th, .widget table.dataTable td { white-space: nowrap; }
.widget table.dataTable td:first-child, .widget table.dataTable th:first-child { min-width: 220px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.widget table.dataTable td:first-child a { color: var(--m-fg); font-weight: 500; }
.widget table.dataTable td:first-child a:hover { color: var(--m-brand); }
.widget .table-responsive { overflow-x: auto; }

/* any table cell that holds a long title or name: stay tidy */
.table td .text-truncate-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* cron / system notices: compact, calm, one block */
.alert-warning { padding: 10px 14px; font-size: 13px; line-height: 1.5; display: block; }
.alert-warning h4, .alert-warning .bold:first-child, .alert-warning strong:first-child { display: inline; font-size: 13px; font-weight: 600; margin: 0 6px 0 0; }
.alert-warning p { display: inline; margin: 0; }
.alert-warning::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #b87b00; margin-right: 8px; }

/* notifications panel: two-line text, quiet time, clear unread state */
.notifications-wrapper .dropdown-menu { width: 420px; max-width: 94vw; padding: 0; overflow: hidden; }
.notifications-wrapper .notification-box { padding: 12px 40px 12px 14px !important; }
.notifications-wrapper .notification-box .notification-title,
.notifications-wrapper .notification-box > .media-body > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.4; }
.notifications-wrapper .notification-handler { border-radius: 0; }
.notifications-wrapper .unread-notification { background: var(--m-brand-soft); }
.notifications-wrapper .notification-handler:hover { background: var(--m-hover); }
.notifications-wrapper .divider { margin: 0; }
.notifications-wrapper .not-mark-as-read-inline { position: absolute; right: 14px; top: 14px; }

/* a missing logo image: show the firm name, not a broken icon */
img.img-responsive[src*="uploads/company"], #logo img, .company-logo img { font-size: 16px; font-weight: 700; color: var(--m-fg); }

/* premium polish, phase 1b: force task-title wrapping (beats nowrap rules) */
.home-activity .table-tasks tbody td:nth-child(2),
.home-activity .table-tasks tbody td:nth-child(2) a.main-tasks-table-href-name{white-space:normal !important}
.home-activity .table-tasks th:first-child,
.home-activity .table-tasks td:first-child{width:72px;min-width:0}
.home-activity .table-tasks a.main-tasks-table-href-name{display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal !important}

/* ================= calm palette (replaces the bright backdrop): soft grey page, slate sidebar, muted blue ================= */
:root {
  --m-bg: #fbfbfd; --m-page: #eef0f4; --m-surface: #fbfbfd; --m-hover: #eceff4; --m-sel: #dbe4f3;
  --m-line: #d6dbe4; --m-line-soft: #e4e8ee;
  --m-fg: #1f2937; --m-muted: #64748b;
  --m-brand: #2f5bb7; --m-brand-hover: #244a98; --m-brand-soft: #e6ecf7;
  --m-done: #3f9d78; --m-work: #d79a3a; --m-stuck: #c8505f; --m-blue: #5b84c4; --m-purple: #8a6cb5; --m-grey: #aab2bf;
  --m-done-soft: #e3f2ec; --m-work-soft: #f8efde; --m-stuck-soft: #f6e4e7;
  --m-shadow: 0 4px 12px -4px rgba(15,23,42,.18), 0 0 1px rgba(15,23,42,.25);
}
body, body.login_admin { background-color: var(--m-page) !important; }
#wrapper { background: var(--m-page); }
#wrapper .content { background: transparent; }
.panel_s { background: var(--m-surface); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.panel_s .panel-heading { background: var(--m-surface); }
body.login_admin { background: linear-gradient(180deg, #e4e9f2, var(--m-page) 360px) !important; }

/* header: off-white with one fine slate line (no rainbow strip) */
#header { background: var(--m-bg); background-image: none; border-bottom: 1px solid var(--m-line); }
#search_input { background: var(--m-page) !important; }

/* sidebar: firm slate */
.sidebar { background: #1e293b; border-right: 0; }
#side-menu > li:first-child { background: #1e293b !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar li a, .sidebar li .nav-second-level li a { color: #cbd5e1; }
.sidebar li a i.menu-icon, .sidebar .arrow, .sidebar .fa.arrow:before { color: #94a3b8; }
.sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus,
.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover, .sidebar .nav > li .nav-second-level > li:not(.active) > a:focus { background: rgba(255,255,255,.07); color: #fff; }
.sidebar li.active > a, .sidebar li .nav-second-level li.active a { background: rgba(255,255,255,.10); color: #fff !important; box-shadow: inset 3px 0 0 #6d8fd6; }
.sidebar li.active > a .menu-icon, .sidebar .nav > li > a:hover .menu-icon, .sidebar .nav > li > a:focus .menu-icon,
.sidebar li .nav-second-level li.active a .menu-icon, .sidebar li .nav-second-level a:hover .menu-icon { color: #9db6e8; }
.sidebar li a.logo-text, .sidebar li a.logo-text:hover, .sidebar li a.logo-text:focus { color: #fff; }
.sidebar #setup-menu-wrapper, .sidebar .nav-second-level { background: transparent; }

/* tables / calendar / stat cards on the calmer palette */
table.dataTable thead th, .table > thead > tr > th { background: #f3f5f9; }
.fc .fc-button, .fc .fc-button-primary, .fc-button-group > .fc-button { background: var(--m-bg) !important; }
.fc-event, .fc-daygrid-event { background: #5b6b86; }
.fc .fc-daygrid-day.fc-day-today { background: #e9eef8 !important; }
[class*="quick-stats-"] .top_stats_wrapper { background: var(--m-surface); border-top-color: var(--m-blue); }
.btn-default { background: var(--m-surface); }
.btn-warning { color: #fff; }

/* status text colours: same meaning, less neon */
.text-success, .text-success a { color: #2f7d5f !important; }
.text-danger, .text-danger a { color: #b4434f !important; }
.text-warning, .text-warning a { color: #a8741f !important; }
.text-info, .text-info a { color: #3d6ab0 !important; }
.text-muted { color: var(--m-muted) !important; }
.bg-success, .progress-bar-success { background-color: var(--m-done) !important; }
#header { background-color: var(--m-bg); }

/* ================= layout system v2: ONE spacing scale for the whole app =================
   4 / 8 / 12 / 16 / 24 px. Page padding 24, card padding 20x24, gaps between blocks 16, between fields 16,
   controls 36px high, table cells 12x16, tabs 12x16, modal 16/24. Everything below overrides the older per-page tweaks. */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --ctl-h: 36px; }

/* page + cards */
#wrapper .content, .content { padding: var(--sp-5); }
.content > .row > [class*="col-"] > .panel_s:last-child, .panel_s:last-child { margin-bottom: 0; }
.panel_s { margin-bottom: var(--sp-4); }
.panel_s > .panel-body, .panel_s .panel-body { padding: 20px var(--sp-5); }
.panel_s > .panel-heading { padding: var(--sp-4) var(--sp-5); }
.panel_s > .panel-footer, .panel_s .panel-footer { padding: var(--sp-3) var(--sp-5); }
.panel_s .panel-body > .row:last-child, .panel_s .panel-body > .form-group:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5 { margin-top: 0; margin-bottom: var(--sp-3); }
.panel_s h4, .panel_s .tw-text-lg { margin-bottom: var(--sp-3); }
.no-margin, .panel_s .no-margin { margin: 0 !important; }
.content > .row, .content > div > .row { margin-left: calc(var(--sp-2) * -1); margin-right: calc(var(--sp-2) * -1); }
.row > [class*="col-"] { padding-left: var(--sp-2); padding-right: var(--sp-2); }

/* the old helper classes map onto the scale (all pages use them) */
.mtop5 { margin-top: var(--sp-1) !important; } .mbot5 { margin-bottom: var(--sp-1) !important; }
.mtop10 { margin-top: var(--sp-2) !important; } .mbot10 { margin-bottom: var(--sp-2) !important; }
.mtop15, .mtop20 { margin-top: var(--sp-4) !important; } .mbot15, .mbot20 { margin-bottom: var(--sp-4) !important; }
.mtop25, .mtop30 { margin-top: var(--sp-5) !important; } .mbot25, .mbot30 { margin-bottom: var(--sp-5) !important; }
.mleft5 { margin-left: var(--sp-1) !important; } .mleft10, .mleft15 { margin-left: var(--sp-2) !important; }
.mright5 { margin-right: var(--sp-1) !important; } .mright10, .mright15 { margin-right: var(--sp-2) !important; }
.padding-15, .padding-20 { padding: var(--sp-4) !important; }
hr, hr.hr-10, hr.hr-15 { margin: var(--sp-4) 0; }
hr.hr-panel-heading, hr.hr-panel-separator { margin: var(--sp-4) calc(var(--sp-5) * -1); }

/* page action row (buttons above a list) */
._buttons, .row._buttons { margin-bottom: var(--sp-4) !important; }
._buttons .btn, ._buttons .btn-group, ._buttons .dropdown { margin-right: var(--sp-2); margin-bottom: 0; }
._buttons .btn:last-child { margin-right: 0; }
.btn-group > .btn { margin-right: 0; }
.panel_s > .panel-body > .clearfix + hr, .panel_s .tw-flex.tw-items-center { gap: var(--sp-2); }

/* forms: 16px between fields, 6px label gap, 36px controls */
.form-group { margin-bottom: var(--sp-4); }
.form-group > label, label.control-label, .control-label { margin-bottom: 6px; font-weight: 500; }
.form-control, .input-group .form-control, .form-group .bootstrap-select > .dropdown-toggle, .input-group-addon, .input-group-btn > .btn { min-height: var(--ctl-h); height: var(--ctl-h); padding-top: 6px; padding-bottom: 6px; line-height: 22px; }
textarea.form-control { height: auto; min-height: 80px; padding: var(--sp-2) var(--sp-3); }
.form-control { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.input-group-addon { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.btn { min-height: var(--ctl-h); padding: 7px var(--sp-4); }
.btn-xs, .btn-sm, .btn-icon.btn-xs { min-height: 28px; padding: 3px var(--sp-3); }
.checkbox, .radio { margin-top: 0; margin-bottom: var(--sp-2); }
.radio-inline, .checkbox-inline { margin-right: var(--sp-4); }
.help-block, .form-text { margin-top: var(--sp-1); margin-bottom: 0; }
.bootstrap-select .dropdown-menu > li > a { padding: var(--sp-2) var(--sp-3); }
.bootstrap-select .bs-searchbox { padding: var(--sp-2); }

/* tables: same cell size everywhere */
table.dataTable thead th, .table > thead > tr > th { padding: var(--sp-3); }
table.dataTable tbody td, .table > tbody > tr > td { padding: var(--sp-3); }
table.dataTable tbody td.dataTables_empty { padding: var(--sp-5) var(--sp-4); }
.dataTables_wrapper .row:first-child, .dataTables_wrapper > .row { margin-bottom: var(--sp-3); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dt-buttons, .dataTables_wrapper .dataTables_filter { margin-bottom: var(--sp-3); }
.dataTables_wrapper .dataTables_info { padding-top: var(--sp-4); }
.dataTables_wrapper .dataTables_paginate { padding-top: var(--sp-3); }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
.table { margin-bottom: var(--sp-4); }

/* tabs */
.nav-tabs { margin-bottom: var(--sp-4); }
.nav-tabs > li > a { padding: var(--sp-3) var(--sp-4); margin-right: var(--sp-1); }
.tab-content > .tab-pane { padding-top: 0; }
.nav-pills > li > a { padding: var(--sp-2) var(--sp-3); }

/* modals + dropdowns */
.modal-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--m-line-soft); }
.modal-body { padding: var(--sp-5); }
.modal-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--m-line-soft); display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.modal-footer .btn { margin: 0; }
.modal-title { margin: 0; font-size: 18px; }
.dropdown-menu { padding: var(--sp-1) 0; }
.dropdown-menu > li > a { padding: var(--sp-2) var(--sp-4); }
.list-group-item { padding: var(--sp-3) var(--sp-4); }
.label { padding: 4px var(--sp-2); }
.alert { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); }

/* header + sidebar rhythm */
#header { padding-inline: var(--sp-4); }
#side-menu li a { padding: 9px var(--sp-3); margin-top: 2px; }
#side-menu li .nav-second-level li a { padding: var(--sp-2) var(--sp-3) var(--sp-2) 40px; }
.sidebar { padding-inline: var(--sp-2); }

/* settings + two-column pages: columns line up with the card top */
.content > .row > .col-md-3 > h4, .content > .row > .col-md-9 > h4, .content > .row > [class*="col-"] > h4:first-child { margin-top: 0; margin-bottom: var(--sp-3); }
.settings-form .form-group, #settings-form .form-group { margin-bottom: var(--sp-4); }
#settings-form .form-group + hr, .panel-body > hr { margin: var(--sp-4) 0; }

/* focus + disabled states (keyboard friendly, consistent everywhere) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }
.btn[disabled], .btn.disabled, .form-control[disabled], .form-control[readonly] { opacity: .65; cursor: not-allowed; }
html { scroll-padding-top: 72px; }

/* small screens: tighter page padding, buttons wrap, tables scroll inside their card */
@media (max-width: 767px) {
  #wrapper .content, .content { padding: var(--sp-4) var(--sp-3); }
  .panel_s > .panel-body, .panel_s .panel-body { padding: var(--sp-4); }
  .modal-body { padding: var(--sp-4); }
  .table-responsive, .dataTables_wrapper { overflow-x: auto; }
}

/* long titles (tasks, projects, tickets, proposals...) wrap inside a sensible column instead of stretching the table past its card */
table.dataTable tbody td:has(> a[href*="/tasks/view/"]), table.dataTable tbody td:has(> a[href*="/projects/view/"]), table.dataTable tbody td:has(> a[href*="/tickets/ticket/"]),
table.dataTable tbody td:has(> a[href*="/proposals/list_proposals/"]), table.dataTable tbody td:has(> a[href*="/leads/index/"]), table.dataTable tbody td:has(> a[href*="/contracts/contract/"]) {
  white-space: normal; min-width: 240px; max-width: 520px; overflow-wrap: anywhere; line-height: 1.4;
}
.table-responsive { border: 0; margin-bottom: 0; }

/* CR-001 grouped task notifications: readable text that wraps, never cut off */
.notification-title .tna-item, .notification-box-all .tna-item, .notification-title .tna-more, .notification-box-all .tna-more { display: block; margin-top: 2px; }
.tna-quote { display: block; margin-top: 2px; }
.tna-text { display: inline; white-space: normal; overflow-wrap: anywhere; color: var(--m-fg); font-style: italic; }
.tna-more { color: var(--m-muted); font-size: 12px; }
.notification-box, .notification-box-all .description { white-space: normal; overflow-wrap: anywhere; }
#notifications-pager .btn { min-width: 36px; }
/* the bell clamps every notification to 2 lines; a grouped task line lists its items, so it may use the room it needs */
.notifications-wrapper .notification-box > .media-body > :first-child:has(.tna), .notifications-wrapper .notification-box > .media-body > :first-child:has(.tna-quote) { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }

/* ---- Automate module (IP docketing) ---- */
.aut-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:14px;border-bottom:1px solid #e5e7eb;padding-bottom:8px}
.aut-nav a:not(.btn){padding:6px 12px;border-radius:6px;color:#374151;font-weight:500}
.aut-nav a:not(.btn).active{background:#fdecec;color:#b4151b}
.aut-nav .btn{margin-left:auto}
.aut-tile{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px 14px;margin-bottom:14px;color:#4b5563}
.aut-tile .aut-num{display:block;font-size:26px;font-weight:700;color:#111827;line-height:1.1}
.aut-tile.warn{border-color:#f0b74a;background:#fffaf0}.aut-tile.bad{border-color:#e05a5a;background:#fff4f4}
.aut-stage{display:inline-block;min-width:20px;text-align:center;border-radius:50%;background:#b4151b;color:#fff;font-size:11px;line-height:20px}
.aut-due{padding:8px 0;border-bottom:1px solid #f1f1f1}.aut-due.soon a{color:#9a6200}.aut-due.late a{color:#b4151b}
.aut-bar{display:flex;margin-top:14px;overflow-x:auto}
.aut-bar div{flex:1;min-width:110px;text-align:center;padding:8px 4px;border:1px solid #e5e7eb;border-left:0;background:#f9fafb;color:#6b7280;font-size:12px}
.aut-bar div:first-child{border-left:1px solid #e5e7eb;border-radius:6px 0 0 6px}.aut-bar div:last-child{border-radius:0 6px 6px 0}
.aut-bar .done{background:#e5f4ea;color:#1e7a46}.aut-bar .now{background:#b4151b;color:#fff;font-weight:600}
.aut-tl{border-left:2px solid #e5e7eb;margin-left:6px;padding-left:16px}.aut-tl>div{position:relative;padding-bottom:12px}
.aut-tl>div::before{content:"";position:absolute;left:-23px;top:5px;width:10px;height:10px;border-radius:50%;background:#1e7a46}
.aut-log{padding:5px 0;border-bottom:1px solid #f3f3f3}
.aut-inline{display:flex;gap:4px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.aut-date{width:140px!important;display:inline-block!important}.aut-num-in{width:80px!important}
.aut-cal{width:100%;table-layout:fixed;border-collapse:collapse;min-width:640px}
.aut-cal th{text-align:center;padding:6px;color:#6b7280;font-size:12px}
.aut-cal td{height:96px;vertical-align:top;border:1px solid #e5e7eb;padding:4px 6px;background:#fff}
.aut-cal td.off{background:#f9fafb}.aut-cal td.today{box-shadow:inset 0 0 0 2px #b4151b}
.aut-cal .dn{color:#9ca3af;font-size:12px}
.aut-cal .ev{display:block;margin-top:3px;font-size:11px;line-height:1.25;padding:2px 5px;border-radius:4px;background:#e2ebf8;color:#1f4f9a;overflow:hidden;text-overflow:ellipsis}
.aut-cal .ev.confirmed{background:#e5f4ea;color:#1e7a46}.aut-cal .ev.proposed{background:#fbeed0;color:#9a6200}.aut-cal .ev.done{background:#eee;color:#666}

/* Automate: spacing pass */
.aut-nav{margin-bottom:20px;padding-bottom:12px}
.aut-nav a:not(.btn){padding:8px 14px}
.panel_s .panel-body table.table>tbody>tr>td,.panel_s .panel-body table.table>thead>tr>th{padding:14px 14px;vertical-align:top}
.panel_s .panel-body table.table>thead>tr>th{padding-top:10px;padding-bottom:10px}
.aut-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.aut-head form{margin:0}
.aut-actions{min-width:250px;width:260px}
.aut-act{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin:0}
.aut-act-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.aut-act-row .aut-date{width:150px!important;height:30px}
.aut-act .btn-xs{padding:5px 10px;font-size:12px;line-height:1.3}
.aut-tl>div{padding-bottom:16px}
.aut-log{padding:9px 0}
.aut-reasons{padding-left:18px}.aut-reasons li{margin-bottom:6px}
.aut-steps li{margin-bottom:8px}
.content .panel_s{margin-bottom:20px}
.content .panel_s .panel-body{padding:22px 24px}
.aut-tile{padding:16px 18px}
.content .panel_s .panel-body hr.hr-10{margin:12px 0 18px}
.aut-main{min-width:240px}
.aut-basis{margin-top:5px;font-size:12px;line-height:1.45;color:#6b7280}
.aut-due-cell{white-space:nowrap;font-weight:500}
.panel_s .panel-body table.table td.aut-due-cell{padding-right:18px}
.aut-stage-form{display:inline-block;margin:0}
.content textarea[readonly]{background:#f9fafb;color:#374151;opacity:1;cursor:text}

/* Chat */
.chat2 { display: flex; height: calc(100vh - 170px); min-height: 420px; }
.chat2-side { width: 300px; border-right: 1px solid #e4e5e7; display: flex; flex-direction: column; flex-shrink: 0; }
.chat2-search { padding: 10px; }
.chat2-tabs { display: flex; border-bottom: 1px solid #e4e5e7; }
.chat2-tabs a { flex: 1; text-align: center; padding: 8px 4px; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; }
.chat2-tabs a.active { color: #0f172a; border-bottom-color: #2563eb; font-weight: 600; }
.chat2-list { flex: 1; overflow-y: auto; }
.chat2-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #0f172a; text-decoration: none; border-bottom: 1px solid #f1f5f9; }
.chat2-item:hover, .chat2-item.active { background: #f1f5f9; text-decoration: none; }
.chat2-av { width: 36px; height: 36px; border-radius: 50%; background: #dbe4f3; color: #1e3a8a; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat2-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat2-who small { color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat2-newgroup { padding: 10px; border-top: 1px solid #e4e5e7; }
.chat2-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat2-head { padding: 12px 16px; border-bottom: 1px solid #e4e5e7; }
.chat2-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; background: #f8fafc; }
.chat2-row { display: flex; margin-bottom: 8px; }
.chat2-row.mine { justify-content: flex-end; }
.chat2-bub { max-width: 70%; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #e4e5e7; word-wrap: break-word; overflow-wrap: anywhere; }
.chat2-row.mine .chat2-bub { background: #dbeafe; border-color: #bfd4f6; }
.chat2-sender { font-weight: 600; font-size: 12px; color: #1e3a8a; margin-bottom: 2px; }
.chat2-time { font-size: 11px; color: #64748b; margin-top: 3px; text-align: right; }
.chat2-send { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e4e5e7; }
.chat2-send textarea { resize: none; }
.chat2-members { max-height: 240px; overflow-y: auto; }