#wrapper #frame .content .wrap {

height: 30vh;

margin-top: -76px;

}



#wrapper #frame #groupMessagesForm>div>div>div.mentions-input-box>textarea,

#wrapper #frame .content .message-input .wrap textarea {

overflow: auto;

border-radius: 0px 5px 0px 0px;

height: 120px !important;

}



#frame .content .message-input .wrap button {

margin-top: 68px;

}



#wrapper #frame .content .messages ul {

margin-bottom: 85px !important;

}

#wrapper table tr.task_overdue {

	background: #ffdadb;

}

/* ============================================================
   BridgeDash design (matched from dashboard.rockettakeoffs.com)
   Font: ui-sans-serif/system-ui, 14px base
   Text: hsl(25,5.3%,44.7%) muted / hsl(20,14.3%,4.1%) foreground
   Primary: hsl(207,90%,54%) | Background: white / hsl(60,4.8%,95.9%)
   ============================================================ */

body,
.sidebar,
#side-menu,
.navbar,
.dropdown-menu,
.btn,
input,
select,
textarea,
table {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

body {
    color: hsl(20, 14.3%, 4.1%);
}

/* --- Sidebar: white background, light border --- */
aside#menu.sidebar,
.sidebar {
    background: #ffffff !important;
    border-right: 1px solid hsl(20, 5.9%, 90%) !important;
}

/* --- Sidebar links: 14px muted gray, rounded --- */
.sidebar #side-menu li a {
    color: hsl(25, 5.3%, 34.7%) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 9px 12px !important;
    background: transparent !important;
}

.sidebar #side-menu li a i,
.sidebar #side-menu li a .menu-icon {
    color: hsl(25, 5.3%, 44.7%) !important;
}

/* --- Hover: subtle light gray --- */
.sidebar #side-menu li a:hover,
.sidebar #side-menu li a:focus {
    background: hsl(60, 4.8%, 95.9%) !important;
    color: hsl(24, 9.8%, 10%) !important;
}

/* --- Active item: blue text on light blue pill --- */
.sidebar #side-menu li.active > a,
.sidebar #side-menu li a.active {
    background: hsl(207, 90%, 96%) !important;
    color: hsl(207, 90%, 44%) !important;
    font-weight: 500 !important;
}

.sidebar #side-menu li.active > a i,
.sidebar #side-menu li a.active i {
    color: hsl(207, 90%, 50%) !important;
}

/* --- Submenu links --- */
.sidebar #side-menu ul.nav-second-level li a {
    color: hsl(25, 5.3%, 44.7%) !important;
    font-size: 13.5px !important;
}

/* --- Sidebar profile card text --- */
.sidebar .sidebar-user-profile a.profile,
.sidebar .sidebar-user-profile a.profile span {
    color: hsl(25, 5.3%, 34.7%) !important;
}

/* --- Page background: very light gray like the live app --- */
#wrapper #page-wrapper,
body.dashboard {
    background: hsl(60, 20%, 98%) !important;
}

/* --- Cards/panels: white with soft border, rounded --- */
#wrapper .panel_s .panel-body {
    border: 1px solid hsl(20, 5.9%, 90%);
    border-radius: 8px;
}

/* --- Top navbar: white, light border --- */
#wrapper .navbar-default {
    background: #ffffff !important;
    border-bottom: 1px solid hsl(20, 5.9%, 90%) !important;
}

#wrapper .navbar-default a,
#wrapper .navbar-default .nav > li > a {
    color: hsl(25, 5.3%, 34.7%) !important;
}

/* custom_style_admin module compatibility: keep BridgeDash colors */
.sidebar #side-menu li a.custom_style_admin-menu-links,
.sidebar #side-menu .custom_style_admin-menu li a {
    color: hsl(25, 5.3%, 34.7%) !important;
    font-size: 14px !important;
}

.sidebar #side-menu li a.custom_style_admin-menu-active-item,
.sidebar #side-menu li.active a.custom_style_admin-menu-active-item,
.sidebar #side-menu .custom_style_admin-menu-active-item-color {
    background: hsl(207, 90%, 96%) !important;
    color: hsl(207, 90%, 44%) !important;
}

/* [temporary hidden menu] Floating right-side chat window hidden -
   replaced by the Team Status panel in the left sidebar.
   To restore, delete this block. */
/* Hide ONLY the right-side member-list widget; keep .chatBoxWrap/.pusherChatBox
   conversation popups visible so chatting still works from the left sidebar. */
#mainChatId,
#prchat-header-wrapper,
#chat_status_top_icon {
    display: none !important;
}

/* [temporary hidden menu] Dashboard Options button and top search box hidden.
   To restore, delete this block. */
#dashboard-options,
.tw-group\/top-search {
    display: none !important;
}

/* [temporary hidden menu] Hidden: sidebar user profile card (dark name/email box),
   "Settings" link in the top profile dropdown, Quick Create (+) button. (Setup menu item restored per user request.)
   To restore, delete this block. */
.sidebar .sidebar-user-profile,
li.menu-item-settings,
a[href$="/admin/settings"],
li:has(> a[href$="/admin/settings"]),
li[title="Quick Create"] {
    display: none !important;
}

/* [temporary hidden menu] "Dash Options" (screen options) button + panel hidden.
   To restore, delete this block. */
.screen-options-btn,
.screen-options-area {
    display: none !important;
}

/* [temporary hidden menu] Top-bar mini buttons hidden: Share documents (newsfeed),
   Todo items, My Timesheets (timers clock), Notifications.
   To restore, delete this block. */
li.header-newsfeed,
li.header-todo,
li.header-timers,
li.header-notifications {
    display: none !important;
}

/* [temporary hidden menu] "My profile" (HR check-in/out) title button and the
   nearby status mini-icon hidden. To restore, delete this block. */
a.check_in_out_timesheet,
li:has(> a.check_in_out_timesheet),
#top_status-options,
li:has(#top_status-options),
li:has(> #prchat-header-wrapper) {
    display: none !important;
}

/* Top bar (caption): white background instead of dark blue rgb(41,81,118) */
#header,
#header nav {
    background: #ffffff !important;
    border-bottom: 1px solid hsl(20, 5.9%, 90%);
}

#header a.logo,
#header a.logo-text {
    color: hsl(24, 9.8%, 10%) !important;
}

#header .nav > li > a,
#header .icon a,
#header a.dropdown-toggle {
    color: hsl(25, 5.3%, 34.7%) !important;
}

/* ============================================================
   Global font: same system font stack as the sidebar menu
   ============================================================ */
#wrapper, #wrapper *:not(i):not(.fa):not([class*="fa-"]),
.modal, .modal *:not(i):not(.fa):not([class*="fa-"]),
.dropdown-menu, .panel_s, h1, h2, h3, h4, h5, h6, p, span, a, label, li, td, th {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Beautiful chat box: centered on the main area (BridgeDash style)
   ============================================================ */
#pusherChat .chatBoxWrap .pusherChatBox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    width: 440px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid hsl(20, 5.9%, 90%);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .25) !important;
    overflow: hidden;
    z-index: 10050;
    margin: 0 !important;
}

#pusherChat .pusherChatBox chathead.chat-head {
    background: hsl(207, 90%, 54%) !important;
    padding: 14px 18px !important;
    display: block;
    border-radius: 0;
    cursor: pointer;
}

#pusherChat .pusherChatBox chathead.chat-head .userName {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

#pusherChat .pusherChatBox .closeBox {
    top: 12px !important;
    z-index: 10;
}

#pusherChat .pusherChatBox .closeBox svg,
#pusherChat .pusherChatBox .user_view_selector svg {
    fill: #ffffff !important;
    opacity: .85;
}

#pusherChat .pusherChatBox .closeBox svg:hover,
#pusherChat .pusherChatBox .user_view_selector svg:hover {
    opacity: 1;
}

#pusherChat .pusherChatBox .logMsg {
    background: hsl(60, 20%, 98.5%) !important;
    height: 340px !important;
    max-height: 50vh;
    padding: 14px !important;
}

#pusherChat .pusherChatBox .logMsg .msgTxt p.friend {
    background: #ffffff !important;
    border: 1px solid hsl(20, 5.9%, 90%);
    color: hsl(24, 9.8%, 10%) !important;
    border-radius: 12px 12px 12px 4px !important;
    padding: 8px 12px !important;
}

#pusherChat .pusherChatBox .logMsg .msgTxt p.you {
    background: hsl(207, 90%, 54%) !important;
    color: #fff !important;
    border-radius: 12px 12px 4px 12px !important;
    padding: 8px 12px !important;
}

#pusherChat .pusherChatBox textarea.chatbox {
    width: 100% !important;
    border: none !important;
    border-top: 1px solid hsl(20, 5.9%, 90%) !important;
    padding: 12px 48px 12px 16px !important;
    font-size: 14px !important;
    background: #fff !important;
    resize: none;
}

#pusherChat .enterBtn svg,
#pusherChat .fileUpload svg {
    fill: hsl(207, 90%, 54%) !important;
}

/* [temporary hidden menu] Quick Create (+) — bootstrap tooltip moves the title
   attribute to data-original-title after init, so cover both. */
li[title="Quick Create"],
li[data-original-title="Quick Create"],
li.icon:has(> a[data-toggle="dropdown"] .fa-plus) {
    display: none !important;
}

/* Chat box: make inner parts fill the full 440px card (module CSS fixes them at ~285px) */
#pusherChat .pusherChatBox .slider,
#pusherChat .pusherChatBox .logMsg,
#pusherChat .pusherChatBox .logMsg .msgTxt,
#pusherChat .pusherChatBox form[name="pusherMessagesForm"],
#pusherChat .pusherChatBox form[name="pusherMessagesForm"] > div {
    width: 100% !important;
    max-width: 100% !important;
}

#pusherChat .pusherChatBox .msgTxt p.you,
#pusherChat .pusherChatBox .msgTxt p.friend {
    max-width: 75% !important;
    width: auto !important;
}

/* Collapse/expand buttons: force visible grey (were white on white bg) */
#header button.hide-menu,
.sidebar button.hide-menu,
button.hide-menu {
    color: hsl(25, 5.3%, 44.7%) !important;
    background: hsl(60, 4.8%, 95.9%) !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    border-radius: 8px !important;
}

button.hide-menu:hover {
    color: hsl(24, 9.8%, 10%) !important;
    background: hsl(20, 5.9%, 90%) !important;
}

button.hide-menu svg,
button.hide-menu i {
    color: inherit !important;
    fill: currentColor;
}

/* ============================================================
   Modern dashboard body (BridgeDash style): cards + calendar
   ============================================================ */

/* Widget cards */
.dashboard .panel_s,
.dashboard .widget .panel_s {
    border-radius: 14px !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
    overflow: hidden;
}

.dashboard .panel_s .panel-body {
    border-radius: 14px;
    border: none !important;
    padding: 20px !important;
}

.dashboard .panel_s .panel-heading,
.dashboard .hr-panel-heading-dashboard {
    background: #fff !important;
    border-bottom: 1px solid hsl(20, 5.9%, 90%) !important;
    font-weight: 600;
    color: hsl(24, 9.8%, 10%);
}

/* Widget titles */
.dashboard .panel_s .panel-body > h4,
.dashboard .panel-body .font-medium,
.dashboard .hr-panel-heading-dashboard {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: hsl(24, 9.8%, 10%) !important;
}

/* Calendar (FullCalendar) modernization */
.dashboard .fc {
    font-family: inherit;
}

.dashboard .fc th {
    background: hsl(60, 4.8%, 95.9%) !important;
    border-color: hsl(20, 5.9%, 90%) !important;
    padding: 8px 0 !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: hsl(25, 5.3%, 44.7%) !important;
}

.dashboard .fc td,
.dashboard .fc .fc-row,
.dashboard .fc-unthemed .fc-divider,
.dashboard .fc-unthemed .fc-content,
.dashboard .fc-unthemed .fc-popover {
    border-color: hsl(20, 5.9%, 90%) !important;
}

.dashboard .fc-unthemed td.fc-today {
    background: hsl(207, 90%, 96%) !important;
}

.dashboard .fc-day-number {
    font-size: 13px;
    color: hsl(25, 5.3%, 44.7%);
    padding: 6px 8px !important;
}

.dashboard .fc-event {
    border-radius: 6px !important;
    border: none !important;
    padding: 2px 7px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: hsl(207, 90%, 54%) !important;
    color: #fff !important;
    margin: 1px 3px !important;
}

.dashboard .fc-toolbar h2 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: hsl(24, 9.8%, 10%);
}

.dashboard .fc-button,
.dashboard .fc-state-default {
    background: #fff !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    box-shadow: none !important;
    color: hsl(25, 5.3%, 44.7%) !important;
    border-radius: 8px !important;
    height: 32px;
    padding: 0 12px;
    text-shadow: none !important;
}

.dashboard .fc-button:hover,
.dashboard .fc-state-active {
    background: hsl(60, 4.8%, 95.9%) !important;
    color: hsl(24, 9.8%, 10%) !important;
}

/* Finance overview / stat blocks */
.dashboard .top_stats_wrapper,
.dashboard .quick-stats {
    border-radius: 12px;
}

.dashboard hr {
    border-color: hsl(20, 5.9%, 90%);
}

/* Tables inside widgets */
.dashboard table.dataTable,
.dashboard .table {
    font-size: 13px;
}

.dashboard .table > thead > tr > th {
    border-bottom: 1px solid hsl(20, 5.9%, 90%) !important;
    color: hsl(25, 5.3%, 44.7%);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
}

.dashboard .table > tbody > tr > td {
    border-top: 1px solid hsl(20, 5.9%, 90%) !important;
    padding: 10px 8px !important;
}

/* Progress bars */
.dashboard .progress {
    height: 8px !important;
    border-radius: 999px !important;
    background: hsl(20, 5.9%, 92%) !important;
    box-shadow: none !important;
}

.dashboard .progress .progress-bar {
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* Widget drag handle less prominent */
.dashboard .widget-dragger {
    opacity: .35;
}

.dashboard .widget-dragger:hover {
    opacity: .8;
}

/* ============================================================
   Quick Statistics counters: modern stat cards
   ============================================================ */
#widget-top_stats .top_stats_wrapper {
    background: #fff;
    border: 1px solid hsl(20, 5.9%, 90%);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding: 18px 18px 20px !important;
    transition: box-shadow .15s ease;
}

#widget-top_stats .top_stats_wrapper:hover {
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .12);
}

/* icon in a tinted rounded chip */
#widget-top_stats .top_stats_wrapper svg {
    width: 38px !important;
    height: 38px !important;
    padding: 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

#widget-top_stats .quick-stats-invoices svg {
    color: #dc2626 !important;
    background: #fef2f2;
}

#widget-top_stats .quick-stats-leads svg {
    color: #16a34a !important;
    background: #f0fdf4;
}

#widget-top_stats .quick-stats-projects svg {
    color: #2563eb !important;
    background: #eff6ff;
}

#widget-top_stats .quick-stats-tasks svg {
    color: #9333ea !important;
    background: #faf5ff;
}

/* label */
#widget-top_stats .top_stats_wrapper .tw-font-medium {
    font-size: 13px;
    font-weight: 500 !important;
    color: hsl(25, 5.3%, 44.7%) !important;
}

/* the numbers */
#widget-top_stats .top_stats_wrapper .tw-font-semibold {
    font-size: 17px;
    font-weight: 700 !important;
    color: hsl(24, 9.8%, 10%) !important;
}

/* slim rounded progress */
#widget-top_stats .top_stats_wrapper .progress {
    height: 6px !important;
    border-radius: 999px !important;
    background: hsl(20, 5.9%, 93%) !important;
    box-shadow: none !important;
    margin-top: 14px !important;
}

#widget-top_stats .top_stats_wrapper .progress-bar {
    border-radius: 999px !important;
    box-shadow: none !important;
    min-width: 4px;
}

#widget-top_stats .progress-bar-danger { background: #dc2626 !important; }
#widget-top_stats .quick-stats-leads .progress-bar { background: #16a34a !important; }
#widget-top_stats .quick-stats-projects .progress-bar { background: #2563eb !important; }
#widget-top_stats .quick-stats-tasks .progress-bar { background: #9333ea !important; }

/* Chat box: caption (blue header) must span the full card width */
#pusherChat .pusherChatBox chathead,
#pusherChat .pusherChatBox chathead.chat-head {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ============================================================
   Modern look for all admin content pages (Projects, Tasks, ...)
   ============================================================ */

/* Cards / panels everywhere */
#wrapper .panel_s {
    border-radius: 14px !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
}

#wrapper .panel_s .panel-body {
    border: none !important;
    border-radius: 14px;
    padding: 20px !important;
}

/* Buttons */
#wrapper .btn {
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
    text-shadow: none !important;
}

#wrapper .btn-info,
#wrapper .btn-primary {
    background: hsl(207, 90%, 54%) !important;
    border-color: hsl(207, 90%, 54%) !important;
    color: #fff !important;
}

#wrapper .btn-info:hover,
#wrapper .btn-primary:hover {
    background: hsl(207, 90%, 48%) !important;
    border-color: hsl(207, 90%, 48%) !important;
}

#wrapper .btn-default {
    background: #fff !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    color: hsl(25, 5.3%, 34.7%) !important;
}

#wrapper .btn-default:hover {
    background: hsl(60, 4.8%, 95.9%) !important;
    color: hsl(24, 9.8%, 10%) !important;
}

/* Data tables */
#wrapper table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 13px;
}

#wrapper table.dataTable thead th {
    background: hsl(60, 4.8%, 97%) !important;
    border-bottom: 1px solid hsl(20, 5.9%, 90%) !important;
    color: hsl(25, 5.3%, 44.7%) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 10px !important;
}

#wrapper table.dataTable tbody td {
    border-top: 1px solid hsl(20, 5.9%, 92%) !important;
    padding: 12px 10px !important;
    vertical-align: middle;
}

#wrapper table.dataTable tbody tr:hover td {
    background: hsl(207, 90%, 98%) !important;
}

/* DataTables controls: search, length, pagination */
#wrapper .dataTables_filter input,
#wrapper .dataTables_length select,
#wrapper select.form-control,
#wrapper input.form-control {
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 13px;
}

#wrapper input.form-control:focus,
#wrapper select.form-control:focus,
#wrapper .dataTables_filter input:focus {
    border-color: hsl(207, 90%, 54%) !important;
    outline: none;
}

#wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: hsl(25, 5.3%, 44.7%) !important;
    margin: 0 2px;
}

#wrapper .dataTables_paginate .paginate_button:hover {
    background: hsl(60, 4.8%, 95.9%) !important;
    color: hsl(24, 9.8%, 10%) !important;
}

#wrapper .dataTables_paginate .paginate_button.current {
    background: hsl(207, 90%, 54%) !important;
    color: #fff !important;
    border-color: hsl(207, 90%, 54%) !important;
}

/* Tabs */
#wrapper .nav-tabs {
    border-bottom: 1px solid hsl(20, 5.9%, 90%);
}

#wrapper .nav-tabs > li > a {
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    color: hsl(25, 5.3%, 44.7%);
    font-weight: 500;
    font-size: 13px;
}

#wrapper .nav-tabs > li.active > a {
    color: hsl(207, 90%, 54%) !important;
    box-shadow: inset 0 -2px 0 hsl(207, 90%, 54%);
    background: transparent !important;
}

/* Labels / status pills */
#wrapper .label {
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

/* Page heading area */
#wrapper .tw-bg-neutral-100\/70,
#wrapper .panel-table-full {
    border-radius: 14px;
}

/* Modals */
.modal-content {
    border-radius: 14px !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, .3) !important;
}

.modal-header {
    border-bottom: 1px solid hsl(20, 5.9%, 90%) !important;
}

.modal-footer {
    border-top: 1px solid hsl(20, 5.9%, 90%) !important;
}

/* ============================================================
   Chat box: window buttons + message side flip
   ============================================================ */

/* My messages on the LEFT, other user's on the RIGHT */
#pusherChat .pusherChatBox .msgTxt .conversation_me,
#pusherChat .pusherChatBox .msgTxt .conversation_from {
    display: flex !important;
    width: 100% !important;
    float: none !important;
    margin: 4px 0 !important;
}

#pusherChat .pusherChatBox .msgTxt .conversation_me {
    justify-content: flex-start !important;
    text-align: left !important;
}

#pusherChat .pusherChatBox .msgTxt .conversation_from {
    justify-content: flex-end !important;
    text-align: right !important;
}

#pusherChat .pusherChatBox .msgTxt .conversation_me .message_container,
#pusherChat .pusherChatBox .msgTxt .conversation_from .message_container {
    float: none !important;
}

/* Swap the bubble "tail" corners to match the new sides */
#pusherChat .pusherChatBox .logMsg .msgTxt p.you {
    border-radius: 12px 12px 12px 4px !important;
}

#pusherChat .pusherChatBox .logMsg .msgTxt p.friend {
    border-radius: 12px 12px 4px 12px !important;
    text-align: left;
}

/* Hide the module's own corner icons; we add our own button row */
#pusherChat .pusherChatBox > .closeBox,
#pusherChat .pusherChatBox > .user_view_selector {
    display: none !important;
}

/* Mini window buttons in the blue header */
.rd-chat-btns {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 20;
}

.rd-chat-btns button {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.rd-chat-btns button:hover {
    background: rgba(255, 255, 255, .35);
}

.rd-chat-btns button svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

#pusherChat .pusherChatBox chathead.chat-head {
    position: relative;
    padding-right: 150px !important;
}

/* Minimized: small bar docked bottom-right */
#pusherChat .chatBoxWrap .pusherChatBox.rd-min {
    top: auto !important;
    left: auto !important;
    right: 24px !important;
    bottom: 12px !important;
    transform: none !important;
    width: 260px !important;
}

#pusherChat .pusherChatBox.rd-min .slider {
    display: none !important;
}

/* Maximized: large centered window */
#pusherChat .chatBoxWrap .pusherChatBox.rd-max {
    width: min(900px, 92vw) !important;
}

#pusherChat .pusherChatBox.rd-max .logMsg {
    height: 60vh !important;
    max-height: 60vh !important;
}

/* ============================================================
   Compact table rows + futuristic tag pills
   ============================================================ */

/* Less row height in data tables */
#wrapper table.dataTable tbody td {
    padding: 6px 10px !important;
    line-height: 1.35;
}

#wrapper table.dataTable thead th {
    padding: 8px 10px !important;
}

/* Futuristic highlighted tags */
#wrapper .label.label-tag {
    display: inline-flex !important;
    align-items: center;
    background: linear-gradient(135deg, hsl(207, 90%, 96%), hsl(224, 85%, 94%)) !important;
    color: hsl(212, 80%, 38%) !important;
    border: 1px solid hsl(207, 85%, 82%) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    margin: 1px 3px 1px 0;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(33, 118, 210, .12);
    text-shadow: none !important;
}

#wrapper .label.label-tag .tag {
    color: inherit !important;
}

#wrapper .label.label-tag:hover {
    background: linear-gradient(135deg, hsl(207, 90%, 92%), hsl(224, 85%, 90%)) !important;
    box-shadow: 0 2px 6px rgba(33, 118, 210, .25);
}

/* ============================================================
   Tasks page: modern summary cards + status labels
   ============================================================ */

/* Status summary buttons above the tasks table */
#wrapper .tw-grid > button.tw-bg-white {
    border-radius: 14px !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
    padding: 12px 16px !important;
    transition: box-shadow .15s ease, transform .15s ease;
}

#wrapper .tw-grid > button.tw-bg-white:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1) !important;
    transform: translateY(-1px);
    background: #fff !important;
}

#wrapper .tw-grid > button.tw-bg-white .tw-font-semibold {
    font-size: 20px;
    font-weight: 700;
    display: block;
    color: hsl(24, 9.8%, 10%);
}

/* Generic status labels (label-info/success/danger/warning/default) as pills */
#wrapper .label.label-info,
#wrapper .label.label-success,
#wrapper .label.label-danger,
#wrapper .label.label-warning,
#wrapper .label.label-default,
#wrapper .label.label-primary {
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#wrapper .label.label-info {
    background: hsl(207, 90%, 95%) !important;
    color: hsl(212, 80%, 38%) !important;
    border: 1px solid hsl(207, 85%, 84%);
}

#wrapper .label.label-success {
    background: hsl(142, 70%, 94%) !important;
    color: hsl(142, 65%, 28%) !important;
    border: 1px solid hsl(142, 55%, 78%);
}

#wrapper .label.label-danger {
    background: hsl(0, 85%, 96%) !important;
    color: hsl(0, 70%, 42%) !important;
    border: 1px solid hsl(0, 75%, 86%);
}

#wrapper .label.label-warning {
    background: hsl(38, 95%, 94%) !important;
    color: hsl(30, 80%, 34%) !important;
    border: 1px solid hsl(38, 85%, 78%);
}

#wrapper .label.label-default {
    background: hsl(60, 4.8%, 95.9%) !important;
    color: hsl(25, 5.3%, 34.7%) !important;
    border: 1px solid hsl(20, 5.9%, 88%);
}

#wrapper .label.label-primary {
    background: hsl(262, 80%, 96%) !important;
    color: hsl(262, 60%, 40%) !important;
    border: 1px solid hsl(262, 70%, 86%);
}

/* Priority / status text links inside task tables stay readable */
#wrapper table.dataTable tbody td a {
    font-weight: 500;
}

/* Chat avatars: initials circles instead of image links */
.rd-chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
    user-select: none;
}

#pusherChat .conversation_me .rd-chat-avatar {
    margin-right: 8px;
}

#pusherChat .conversation_from .rd-chat-avatar {
    margin-left: 8px;
    order: 2;
}

/* Logout mini button near Team ID: subtle round ghost icon, vertically centered
   to match the AE initials circle */
/* logout button lives INSIDE the profile li so flex centers it with the AE circle */
li.dropdown.header-profile-title {
    display: flex !important;
    align-items: center !important;
}

li.dropdown.header-profile-title a.rd-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    margin: 0 8px 0 2px;
    padding: 0;
    transition: background .15s ease;
    align-self: center;
}

li.dropdown.header-profile-title a.rd-logout-btn svg {
    width: 18px;
    height: 18px;
    fill: hsl(25, 5.3%, 44.7%);
    transition: fill .15s ease;
}

li.dropdown.header-profile-title a.rd-logout-btn:hover {
    background: hsl(0, 85%, 96%);
}

li.dropdown.header-profile-title a.rd-logout-btn:hover svg {
    fill: hsl(0, 70%, 48%);
}



/* Chat side-flip: neutralize module floats so flex alignment wins */
#pusherChat .pusherChatBox .msgTxt p.you,
body #pusherChat .pusherChatBox .msgTxt p.you {
    float: none !important;
    clear: none !important;
    display: inline-block !important;
    margin: 2px 0 0 0 !important;
}

#pusherChat .pusherChatBox .msgTxt p.friend,
#pusherChat .pusherChatBox .msgTxt .friend {
    float: none !important;
    clear: none !important;
    display: inline-block !important;
    margin: 2px 0 0 0 !important;
}

#pusherChat div.message_container,
body #pusherChat div.message_container {
    width: auto !important;
    max-width: 100%;
    clear: none !important;
    margin: 0 !important;
    float: none !important;
}

#pusherChat .conversation_me,
#pusherChat .conversation_from {
    padding: 0 !important;
    margin-top: 10px !important;
}

#pusherChat .myProfilePic,
#pusherChat .friendProfilePic,
#pusherChat .rd-chat-avatar {
    float: none !important;
    position: static !important;
}

/* keep delivered/seen icons tidy on the flipped layout */
#pusherChat .conversation_me .circle-unseen,
#pusherChat .conversation_me .fa-check-circle-o {
    align-self: flex-end;
    margin-left: 6px;
}

/* Mini initials avatars replacing profile images everywhere */
.rd-mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
    user-select: none;
    vertical-align: middle;
}

.rd-mini-avatar.pull-left {
    margin-right: 8px;
}

/* ============================================================
   Modern modal (dialog box) captions — applies to ALL modals
   ============================================================ */
.modal-header {
    background: #fff !important;
    border-bottom: 1px solid hsl(20, 5.9%, 90%) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 18px 24px !important;
    display: flex;
    align-items: center;
}

.modal-header .modal-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: hsl(24, 9.8%, 10%) !important;
    line-height: 1.3;
    margin: 0;
    flex: 1;
    text-shadow: none !important;
}

.modal-header .close {
    order: 2;
    margin-left: auto;
    opacity: .5;
    font-size: 22px;
    line-height: 1;
    text-shadow: none !important;
    float: none !important;
}

.modal-header .close:hover {
    opacity: .9;
}

/* Some Perfex modals put extra links/edit icons in the title area */
.modal-header .modal-title a,
.modal-header .edit-title {
    font-size: 13px;
    font-weight: 500;
}

.modal-body {
    padding: 20px 24px !important;
}

.modal-footer {
    padding: 14px 24px !important;
    background: hsl(60, 4.8%, 97.5%);
    border-radius: 0 0 14px 14px !important;
}

/* form labels inside modals: cleaner */
.modal .control-label {
    font-size: 12px;
    font-weight: 600;
    color: hsl(25, 5.3%, 34.7%);
    text-transform: none;
}

/* ============================================================
   Form controls audit: inputs, textareas, checkboxes, selects
   (applies everywhere, including dialogs/modals)
   ============================================================ */

/* Text inputs & textareas */
input.form-control,
textarea.form-control,
select.form-control,
.form-control {
    border: 1px solid hsl(20, 5.9%, 88%) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: hsl(24, 9.8%, 10%);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    border-color: hsl(207, 90%, 54%) !important;
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, .15) !important;
    outline: none !important;
}

textarea.form-control {
    min-height: 90px;
    line-height: 1.5;
}

/* Labels above fields */
label,
.control-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: hsl(25, 5.3%, 34.7%) !important;
    letter-spacing: .01em;
}

/* Checkboxes & radios: modern square/round with blue check
   (Perfex uses awesome-bootstrap-checkbox: label::before/::after) */
.checkbox label::before,
.radio label::before {
    border: 1.5px solid hsl(20, 5.9%, 80%) !important;
    background: #fff !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 0 !important;
    transition: background .12s ease, border-color .12s ease;
}

.checkbox label::before {
    border-radius: 5px !important;
}

.radio label::before {
    border-radius: 50% !important;
}

.checkbox input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="checkbox"]:checked + label::before {
    background: hsl(207, 90%, 54%) !important;
    border-color: hsl(207, 90%, 54%) !important;
}

.checkbox input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff !important;
    font-size: 11px;
    padding-top: 1px;
    padding-left: 1px;
}

.radio input[type="radio"]:checked + label::after,
.radio-primary input[type="radio"]:checked + label::after {
    background: hsl(207, 90%, 54%) !important;
    width: 10px !important;
    height: 10px !important;
    top: 4px !important;
    left: 4px !important;
}

/* Checkbox/radio captions: normal weight, dark, properly aligned */
.checkbox label,
.radio label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: hsl(24, 9.8%, 10%) !important;
    padding-left: 8px;
    line-height: 19px;
    vertical-align: middle;
}

/* Bare checkboxes/radios without the wrapper: modern accent color */
input[type="checkbox"],
input[type="radio"] {
    accent-color: hsl(207, 90%, 54%);
}

/* Comboboxes (bootstrap-select / selectpicker) */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn {
    border: 1px solid hsl(20, 5.9%, 88%) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: hsl(24, 9.8%, 10%) !important;
    text-shadow: none !important;
}

.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: hsl(207, 90%, 54%) !important;
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, .15) !important;
}

.bootstrap-select .dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .18) !important;
    font-size: 13px;
}

.bootstrap-select .dropdown-menu > li > a {
    border-radius: 6px;
    margin: 1px 4px;
    padding: 7px 12px;
}

.bootstrap-select .dropdown-menu > .selected > a,
.bootstrap-select .dropdown-menu > .active > a {
    background: hsl(207, 90%, 95%) !important;
    color: hsl(212, 80%, 38%) !important;
}

/* Datepickers and input groups */
.input-group-addon {
    border: 1px solid hsl(20, 5.9%, 88%) !important;
    border-radius: 8px 0 0 8px !important;
    background: hsl(60, 4.8%, 97%) !important;
    color: hsl(25, 5.3%, 44.7%) !important;
}

.input-group .form-control:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* TinyMCE / rich memo boxes: rounded frame */
.tox-tinymce,
.mce-tinymce,
.mce-panel {
    border: 1px solid hsl(20, 5.9%, 88%) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

/* Tags highlighted EVERYWHERE (not only inside #wrapper: modals too) */
.label.label-tag,
span.label-tag {
    display: inline-flex !important;
    align-items: center;
    background: linear-gradient(135deg, hsl(207, 90%, 96%), hsl(224, 85%, 94%)) !important;
    color: hsl(212, 80%, 38%) !important;
    border: 1px solid hsl(207, 85%, 82%) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    margin: 1px 3px 1px 0;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(33, 118, 210, .12);
    text-shadow: none !important;
}

.label.label-tag .tag {
    color: inherit !important;
}

/* Tag input fields (bootstrap-tagsinput) */
.bootstrap-tagsinput {
    border: 1px solid hsl(20, 5.9%, 88%) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 5px 8px;
}

.bootstrap-tagsinput .tag,
.bootstrap-tagsinput .label {
    background: linear-gradient(135deg, hsl(207, 90%, 94%), hsl(224, 85%, 92%)) !important;
    color: hsl(212, 80%, 38%) !important;
    border: 1px solid hsl(207, 85%, 80%) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    text-shadow: none !important;
}

/* ============================================================
   Project sub-menu tabs (Overview / Tasks / Milestones / ...):
   modern segmented pill bar
   ============================================================ */
.horizontal-tabs .nav-tabs.project-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    background: hsl(60, 4.8%, 95.9%);
    border: 1px solid hsl(20, 5.9%, 90%);
    border-radius: 12px;
    padding: 5px !important;
    margin: 6px 0 !important;
}

.horizontal-tabs .nav-tabs.project-tabs > li {
    float: none;
    margin: 0 !important;
}

.horizontal-tabs .nav-tabs.project-tabs > li > a {
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: hsl(25, 5.3%, 40%) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: none !important;
    transition: background .12s ease, color .12s ease;
}

.horizontal-tabs .nav-tabs.project-tabs > li > a .menu-icon {
    font-size: 14px;
    opacity: .75;
}

.horizontal-tabs .nav-tabs.project-tabs > li > a:hover {
    background: #fff !important;
    color: hsl(24, 9.8%, 10%) !important;
}

.horizontal-tabs .nav-tabs.project-tabs > li.active > a,
.horizontal-tabs .nav-tabs.project-tabs > li > a.active {
    background: #fff !important;
    color: hsl(207, 90%, 44%) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1) !important;
}

.horizontal-tabs .nav-tabs.project-tabs > li.active > a .menu-icon,
.horizontal-tabs .nav-tabs.project-tabs > li > a.active .menu-icon {
    opacity: 1;
    color: hsl(207, 90%, 50%);
}

/* scroll arrows of the scrollable tab strip */
.horizontal-scrollable-tabs .scroller {
    background: transparent;
    color: hsl(25, 5.3%, 44.7%);
    border: none;
}

.horizontal-scrollable-tabs .scroller:hover {
    color: hsl(207, 90%, 44%);
}

/* [Team ID ...] references highlighted as tag pills */
.rd-team-tag {
    display: inline-flex;
    align-items: center;
    background: hsl(207, 90%, 96%);
    color: hsl(207, 90%, 38%);
    border: 1px solid hsl(207, 85%, 88%);
    border-radius: 999px;
    padding: 1px 10px;
    margin: 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(33, 150, 243, .12);
}

/* Discussions: softer subject text (table links + detail heading) */
#wrapper .table-project-discussions td a:first-child {
    font-weight: 500 !important;
    color: hsl(24, 9.8%, 25%) !important;
    letter-spacing: 0;
}

#wrapper .table-project-discussions td a:first-child:hover {
    color: hsl(207, 90%, 44%) !important;
}

/* softer detail-view discussion title */
#project_discussions h3.tw-font-semibold,
.tab-content h3.tw-font-semibold.tw-text-lg {
    font-weight: 500 !important;
    color: hsl(25, 5.3%, 35%) !important;
}

/* ============================================================
   Futuristic task summary cards (status counters)
   ============================================================ */
#wrapper .tw-grid > button.tw-bg-white {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    border-radius: 14px !important;
    padding: 14px 16px 12px !important;
    background: linear-gradient(180deg, #fff 0%, hsl(210, 40%, 99%) 100%) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#wrapper .tw-grid > button.tw-bg-white::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--rd-status-color, hsl(207, 90%, 54%));
    opacity: .85;
}

#wrapper .tw-grid > button.tw-bg-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--rd-status-color, hsl(207, 90%, 54%)) 35%, transparent) !important;
    border-color: color-mix(in srgb, var(--rd-status-color, hsl(207, 90%, 54%)) 45%, hsl(20, 5.9%, 90%)) !important;
}

/* big count number */
#wrapper .tw-grid > button.tw-bg-white > .tw-font-semibold {
    display: block;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    color: hsl(24, 9.8%, 12%);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

/* status name: uppercase micro-label in status color */
#wrapper .tw-grid > button.tw-bg-white > span[style*="color"] {
    display: block;
    font-size: 10.5px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

/* "My Tasks: N" secondary line */
#wrapper .tw-grid > button.tw-bg-white > .tw-block {
    font-size: 11.5px !important;
    color: hsl(25, 5.3%, 50%) !important;
    border-top: 1px dashed hsl(20, 5.9%, 90%);
    padding-top: 5px;
    margin-top: 2px;
}

/* Page background behind modals/dialogs that extend past the form:
   force light background on the root elements (was dark navy) */
html,
body {
    background-color: #F7F8FA !important;
}

.modal-open .modal {
    background: transparent;
}

/* counters in project sub-menu tabs: soft rounded pills */
.horizontal-tabs .nav-tabs.project-tabs > li > a .badge {
    float: none !important;
    margin-left: 2px;
    background: hsl(207, 90%, 94%) !important;
    color: hsl(207, 90%, 38%) !important;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}

.horizontal-tabs .nav-tabs.project-tabs > li.active > a .badge {
    background: hsl(207, 90%, 54%) !important;
    color: #fff !important;
}

/* ============================================================
   Project progress (Overview tab) — clean, premium
   ============================================================ */
#wrapper p.project-info:has(+ .progress.progress-bar-mini) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: hsl(25, 5.3%, 44.7%) !important;
    margin-bottom: 8px !important;
}

#wrapper p.project-info:has(+ .progress.progress-bar-mini) > span {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: hsl(24, 9.8%, 15%) !important;
    font-variant-numeric: tabular-nums;
}

#wrapper .progress.progress-bar-mini {
    height: 6px !important;
    border-radius: 999px;
    background: hsl(20, 5.9%, 90%);
    box-shadow: none;
    overflow: hidden;
}

#wrapper .progress.progress-bar-mini .progress-bar {
    border-radius: 999px;
    background: hsl(207, 90%, 54%) !important;
    box-shadow: none;
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
/* Projects table: softer project-name link */
#wrapper .table-projects td a {
    font-weight: 500 !important;
    color: hsl(24, 9.8%, 25%) !important;
}

#wrapper .table-projects td a:hover {
    color: hsl(207, 90%, 44%) !important;
}

/* ============================================================
   Tags: highlight ALL tag renderings as blue badge pills
   (covers tagsinput widget items with the small "x" too)
   ============================================================ */
.bootstrap-tagsinput span.tag,
.bootstrap-tagsinput .tag.label,
.bootstrap-tagsinput .tag.label-info,
.tags-labels .label,
.project-overview-tags .tag,
.project-overview-tags span.label,
span.tag[data-role],
.tagsinput span.tag {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, hsl(207, 90%, 94%), hsl(224, 85%, 92%)) !important;
    color: hsl(212, 80%, 38%) !important;
    border: 1px solid hsl(207, 85%, 80%) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    margin: 2px 4px 2px 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-shadow: none !important;
    box-shadow: 0 1px 2px rgba(33, 118, 210, .12);
    line-height: 1.4 !important;
}

/* the small remove "x" inside tag pills */
.bootstrap-tagsinput .tag [data-role="remove"],
span.tag [data-role="remove"] {
    color: hsl(212, 60%, 55%) !important;
    margin-left: 4px;
    cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover,
span.tag [data-role="remove"]:hover {
    color: hsl(212, 80%, 35%) !important;
}

/* ============================================================
   Segmented circular project progress (Overview tab)
   ============================================================ */
.rd-circprog {
    position: relative;
    width: 170px;
    margin: 4px auto 14px;
    text-align: center;
    background: #fff;
}

.rd-circprog svg {
    display: block;
    margin: 0 auto;
}

.rd-circprog-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.rd-circprog-num {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(24, 9.8%, 15%);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.rd-circprog-label {
    font-size: 11px;
    font-weight: 500;
    color: hsl(25, 5.3%, 55%);
    text-transform: lowercase;
    letter-spacing: .02em;
    margin-top: 2px;
    max-width: 80px;
    line-height: 1.2;
}

.rd-circprog-shadow {
    width: 90px;
    height: 12px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, hsla(95, 60%, 55%, .35), transparent 70%);
    filter: blur(3px);
}

/* ============================================================
   Dashboard calendar — modern SaaS restyle (FullCalendar v5)
   ============================================================ */
.dashboard .fc {
    --fc-border-color: hsl(20, 5.9%, 92%);
    --fc-today-bg-color: hsl(207, 90%, 97%);
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: hsl(60, 4.8%, 97%);
    font-family: inherit;
}

/* rounded, soft container */
.dashboard .fc .fc-scrollgrid {
    border: 1px solid hsl(20, 5.9%, 92%) !important;
    border-radius: 14px;
    overflow: hidden;
}
.dashboard .fc .fc-scrollgrid-section > td {
    border: 0;
}

/* toolbar */
.dashboard .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 18px;
    gap: 10px;
    flex-wrap: wrap;
}
.dashboard .fc .fc-toolbar-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: hsl(24, 9.8%, 10%);
}
.dashboard .fc .fc-button {
    background: #fff !important;
    border: 1px solid hsl(20, 5.9%, 88%) !important;
    color: hsl(25, 5.3%, 40%) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    height: auto;
    text-transform: capitalize;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dashboard .fc .fc-button:hover {
    background: hsl(60, 4.8%, 96%) !important;
    color: hsl(24, 9.8%, 10%) !important;
}
.dashboard .fc .fc-button-active,
.dashboard .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: hsl(207, 90%, 54%) !important;
    border-color: hsl(207, 90%, 54%) !important;
    color: #fff !important;
}
.dashboard .fc .fc-button:focus {
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, .18) !important;
}
.dashboard .fc .fc-button-group {
    gap: 4px;
}
.dashboard .fc .fc-button-group .fc-button {
    border-radius: 10px !important;
}
.dashboard .fc .fc-prev-button,
.dashboard .fc .fc-next-button {
    padding: 6px 10px;
}

/* weekday header */
.dashboard .fc .fc-col-header-cell {
    background: hsl(60, 4.8%, 97.5%);
    border-color: hsl(20, 5.9%, 92%) !important;
}
.dashboard .fc .fc-col-header-cell-cushion {
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: hsl(25, 5.3%, 48%);
}

/* day cells */
.dashboard .fc .fc-daygrid-day {
    transition: background .15s ease;
}
.dashboard .fc .fc-daygrid-day:hover {
    background: hsl(60, 4.8%, 97.5%);
}
.dashboard .fc .fc-daygrid-day-number {
    font-size: 12.5px;
    font-weight: 500;
    color: hsl(25, 5.3%, 44.7%);
    padding: 7px 9px;
}
.dashboard .fc .fc-day-other .fc-daygrid-day-number {
    color: hsl(25, 5.3%, 70%);
}

/* today — rounded accent badge */
.dashboard .fc .fc-day-today {
    background: hsl(207, 90%, 97%) !important;
    box-shadow: inset 0 0 0 1.5px hsla(207, 90%, 54%, .45);
}
.dashboard .fc .fc-day-today .fc-daygrid-day-number {
    background: hsl(207, 90%, 54%);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    padding: 0 6px;
    margin: 5px;
    box-shadow: 0 2px 6px hsla(207, 90%, 54%, .4);
}

/* event cards */
.dashboard .fc .fc-daygrid-event,
.dashboard .fc .fc-event {
    border: none !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    margin: 2px 4px !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.35;
    background: hsl(207, 75%, 94%);
    color: hsl(212, 70%, 32%);
    border-left: 3px solid hsl(207, 90%, 54%) !important;
    box-shadow: 0 1px 2px rgba(15, 40, 80, .08);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.dashboard .fc .fc-daygrid-event:hover,
.dashboard .fc .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 40, 80, .16);
}
.dashboard .fc .fc-event .fc-event-title,
.dashboard .fc .fc-event .fc-event-main {
    color: inherit !important;
}
/* soften solid-colored events set inline by the app */
.dashboard .fc .fc-event[style*="background"] {
    color: #fff;
}

/* status color variants (soft palettes) */
.dashboard .fc .fc-event.rd-ev-green  { background: hsl(140, 55%, 93%); color: hsl(145, 60%, 26%); border-left-color: hsl(145, 60%, 42%) !important; }
.dashboard .fc .fc-event.rd-ev-yellow { background: hsl(48, 90%, 92%);  color: hsl(38, 70%, 30%);  border-left-color: hsl(45, 90%, 50%) !important; }
.dashboard .fc .fc-event.rd-ev-orange { background: hsl(28, 90%, 93%);  color: hsl(24, 75%, 34%);  border-left-color: hsl(28, 90%, 54%) !important; }
.dashboard .fc .fc-event.rd-ev-red    { background: hsl(0, 75%, 95%);   color: hsl(0, 65%, 38%);   border-left-color: hsl(0, 75%, 56%) !important; }
.dashboard .fc .fc-event.rd-ev-gray   { background: hsl(20, 6%, 94%);   color: hsl(25, 5%, 38%);   border-left-color: hsl(25, 5%, 60%) !important; }

/* "+N more" link */
.dashboard .fc .fc-daygrid-more-link {
    font-size: 11px;
    font-weight: 600;
    color: hsl(207, 90%, 44%);
    background: hsl(207, 90%, 96%);
    border-radius: 6px;
    padding: 1px 7px;
    margin: 1px 4px;
}

/* event popover (the "+more" panel) */
.dashboard .fc .fc-popover {
    border: 1px solid hsl(20, 5.9%, 90%) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 40, 80, .16) !important;
    overflow: hidden;
}
.dashboard .fc .fc-popover-header {
    background: hsl(60, 4.8%, 97%);
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
}

/* list view (if used) */
.dashboard .fc .fc-list {
    border: 1px solid hsl(20, 5.9%, 92%) !important;
    border-radius: 14px;
    overflow: hidden;
}
.dashboard .fc .fc-list-event:hover td {
    background: hsl(60, 4.8%, 97%);
}

/* ============================================================
   Calendar phase 2: status colors (beat inline event colors),
   progress rings, rich hover card
   ============================================================ */
.dashboard .fc .fc-event.rd-ev,
.fc .fc-event.rd-ev {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    margin: 2px 4px !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(15, 40, 80, .08);
    transition: transform .12s ease, box-shadow .12s ease;
    animation: rd-ev-in .25s ease both;
}
@keyframes rd-ev-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}
.fc .fc-event.rd-ev:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 40, 80, .16);
}
.fc .fc-event.rd-ev .fc-event-title,
.fc .fc-event.rd-ev .fc-event-main {
    color: inherit !important;
    font-weight: 500;
}

.fc .fc-event.rd-ev.rd-ev-green  { background: hsl(140, 55%, 93%) !important; color: hsl(145, 60%, 26%) !important; border-left: 3px solid hsl(145, 60%, 42%) !important; }
.fc .fc-event.rd-ev.rd-ev-blue   { background: hsl(207, 75%, 94%) !important; color: hsl(212, 70%, 32%) !important; border-left: 3px solid hsl(207, 90%, 54%) !important; }
.fc .fc-event.rd-ev.rd-ev-yellow { background: hsl(48, 90%, 92%) !important;  color: hsl(38, 70%, 30%) !important;  border-left: 3px solid hsl(45, 90%, 50%) !important; }
.fc .fc-event.rd-ev.rd-ev-orange { background: hsl(28, 90%, 93%) !important;  color: hsl(24, 75%, 34%) !important;  border-left: 3px solid hsl(28, 90%, 54%) !important; }
.fc .fc-event.rd-ev.rd-ev-red    { background: hsl(0, 75%, 95%) !important;   color: hsl(0, 65%, 38%) !important;   border-left: 3px solid hsl(0, 75%, 56%) !important; }
.fc .fc-event.rd-ev.rd-ev-gray   { background: hsl(20, 6%, 94%) !important;   color: hsl(25, 5%, 38%) !important;   border-left: 3px solid hsl(25, 5%, 60%) !important; }

/* mini progress ring inside project event cards */
.fc .fc-event .rd-mini-ring {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-block;
}

/* rich hover card */
.rd-hovercard {
    position: fixed;
    z-index: 99999;
    width: 260px;
    background: #fff;
    border: 1px solid hsl(20, 5.9%, 90%);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 40, 80, .18);
    padding: 14px 16px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
    font-size: 12px;
}
.rd-hovercard.rd-show { opacity: 1; transform: none; }
.rd-hovercard .rd-hc-title {
    font-size: 13px;
    font-weight: 600;
    color: hsl(24, 9.8%, 12%);
    line-height: 1.35;
    margin-bottom: 8px;
}
.rd-hovercard .rd-hc-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rd-hovercard .rd-hc-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rd-hovercard .rd-hc-meta {
    color: hsl(25, 5.3%, 50%);
    margin-top: 6px;
    line-height: 1.5;
}
.rd-hovercard .rd-hc-ring { width: 56px; height: 56px; flex: 0 0 auto; }
.rd-hovercard .rd-hc-perc {
    font-size: 17px;
    font-weight: 700;
    color: hsl(24, 9.8%, 15%);
}

/* ============================================================
   Premium polish pass — spacing, typography, shadows, hierarchy
   ============================================================ */

/* --- calendar container: breathe --- */
.dashboard .fc {
    --fc-border-color: hsl(20, 6%, 93.5%);
    --fc-today-bg-color: hsl(207, 90%, 97.5%);
}
.dashboard .fc .fc-scrollgrid {
    border-color: hsl(20, 6%, 93.5%) !important;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
}

/* --- toolbar: Apple-grade restraint --- */
.dashboard .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 22px;
}
.dashboard .fc .fc-toolbar-title {
    font-size: 22px !important;
    font-weight: 650 !important;
    letter-spacing: -.025em;
    color: hsl(24, 10%, 8%);
    font-feature-settings: "tnum";
}
.dashboard .fc .fc-button {
    border-color: hsl(20, 6%, 90%) !important;
    color: hsl(25, 5%, 35%) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 7px 14px;
    box-shadow: 0 1px 1.5px rgba(16, 24, 40, .05) !important;
}
.dashboard .fc .fc-button:hover {
    border-color: hsl(20, 6%, 84%) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08) !important;
}
.dashboard .fc .fc-button:active {
    transform: translateY(.5px);
}
.dashboard .fc .fc-button-active,
.dashboard .fc .fc-button-primary:not(:disabled).fc-button-active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08) !important;
}
.dashboard .fc .fc-prev-button .fc-icon,
.dashboard .fc .fc-next-button .fc-icon {
    font-size: 15px;
    vertical-align: -2px;
}

/* --- weekday header: quieter --- */
.dashboard .fc .fc-col-header-cell {
    background: transparent;
    border-bottom: 1px solid hsl(20, 6%, 92%) !important;
}
.dashboard .fc .fc-col-header-cell-cushion {
    padding: 12px 4px 10px;
    font-size: 10.5px;
    letter-spacing: .09em;
    color: hsl(25, 5%, 56%);
}

/* --- day cells: more air, subtler hover --- */
.dashboard .fc .fc-daygrid-day-frame {
    min-height: 96px;
    padding-bottom: 4px;
}
.dashboard .fc .fc-daygrid-day:hover {
    background: hsl(60, 5%, 98.2%);
}
.dashboard .fc .fc-daygrid-day-number {
    font-size: 12px;
    color: hsl(25, 5%, 52%);
    padding: 8px 10px 4px;
    font-feature-settings: "tnum";
}
.dashboard .fc .fc-day-other {
    background: hsl(60, 5%, 98.5%);
}
.dashboard .fc .fc-day-other .fc-daygrid-day-number {
    color: hsl(25, 5%, 76%);
}

/* --- today: precise, not loud --- */
.dashboard .fc .fc-day-today {
    box-shadow: inset 0 0 0 1px hsla(207, 90%, 54%, .35);
}
.dashboard .fc .fc-day-today .fc-daygrid-day-number {
    box-shadow: 0 1px 4px hsla(207, 90%, 54%, .3);
    margin: 6px;
}

/* --- event cards: crisper type, layered shadow --- */
.fc .fc-event.rd-ev {
    padding: 4px 9px !important;
    margin: 2.5px 5px !important;
    font-size: 11.5px !important;
    letter-spacing: .002em;
    box-shadow: 0 1px 1.5px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
    transition: transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s cubic-bezier(.22, 1, .36, 1);
}
.fc .fc-event.rd-ev:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 3px 6px rgba(16, 24, 40, .09), 0 8px 18px rgba(16, 24, 40, .07);
}
.fc .fc-event.rd-ev .fc-event-title {
    font-weight: 480;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- "+N more": quiet pill --- */
.dashboard .fc .fc-daygrid-more-link {
    color: hsl(25, 5%, 46%);
    background: hsl(20, 6%, 95.5%);
    font-weight: 500;
    letter-spacing: .01em;
}
.dashboard .fc .fc-daygrid-more-link:hover {
    background: hsl(207, 90%, 95%);
    color: hsl(207, 90%, 42%);
}

/* --- hover card: floating-glass refinement --- */
.rd-hovercard {
    width: 272px;
    border-color: hsl(20, 6%, 92%);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 24, 40, .12), 0 32px 64px rgba(16, 24, 40, .10);
    backdrop-filter: saturate(1.1);
    transition: opacity .18s cubic-bezier(.22, 1, .36, 1), transform .18s cubic-bezier(.22, 1, .36, 1);
}
.rd-hovercard .rd-hc-title {
    font-size: 13.5px;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}
.rd-hovercard .rd-hc-meta {
    font-size: 11.5px;
    margin-top: 8px;
    color: hsl(25, 5%, 54%);
}
.rd-hovercard .rd-hc-perc {
    font-size: 19px;
    letter-spacing: -.02em;
    font-feature-settings: "tnum";
}

/* --- overview progress ring: match polish --- */
.rd-circprog-num {
    letter-spacing: -.025em;
    font-feature-settings: "tnum";
}
.rd-circprog-label {
    letter-spacing: .03em;
}

/* --- global card polish on dashboard widgets --- */
.dashboard .panel_s {
    border: 1px solid hsl(20, 6%, 93%) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    transition: box-shadow .18s ease;
}
.dashboard .panel_s:hover {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .05) !important;
}
.dashboard .panel_s .panel-body {
    padding: 20px 22px;
}

/* widget headings */
.dashboard .panel_s .panel-body > .font-medium:first-child,
.dashboard .widget-title,
.dashboard .panel_s h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .015em;
    color: hsl(24, 10%, 16%);
}

/* buttons across dashboard: consistent radius + soft depth */
.dashboard .btn:not(.btn-link) {
    border-radius: 10px !important;
    box-shadow: 0 1px 1.5px rgba(16, 24, 40, .05);
}

/* scrollbars inside calendar area (webkit) */
.dashboard .fc ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dashboard .fc ::-webkit-scrollbar-thumb {
    background: hsl(20, 6%, 86%);
    border-radius: 999px;
}
.dashboard .fc ::-webkit-scrollbar-thumb:hover {
    background: hsl(20, 6%, 78%);
}

/* ============================================================
   SIGNATURE IDENTITY: "Tile Board" calendar
   Each day is a floating card on a soft canvas — the table
   grid disappears entirely.
   ============================================================ */

/* canvas behind the tiles */
.dashboard .fc .fc-scrollgrid,
.dashboard .fc .fc-scrollgrid td,
.dashboard .fc .fc-scrollgrid th,
.dashboard .fc .fc-daygrid-day,
.dashboard .fc .fc-col-header-cell {
    border: none !important;
}
.dashboard .fc .fc-scrollgrid {
    background: hsl(40, 8%, 96.5%);
    border-radius: 20px;
    padding: 10px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .03);
}

/* weekday header floats above the board */
.dashboard .fc .fc-col-header-cell {
    background: transparent !important;
}
.dashboard .fc .fc-col-header-cell-cushion {
    padding: 6px 4px 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    color: hsl(25, 5%, 58%);
}

/* each day = a floating tile */
.dashboard .fc .fc-daygrid-day {
    background: transparent !important;
    box-shadow: none !important;
}
.dashboard .fc .fc-daygrid-day-frame {
    background: #fff;
    border-radius: 14px;
    margin: 3.5px;
    min-height: 104px;
    border: 1px solid hsl(20, 6%, 93%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard .fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
    box-shadow: 0 3px 8px rgba(16, 24, 40, .08), 0 10px 24px rgba(16, 24, 40, .06);
    transform: translateY(-1px);
    border-color: hsl(20, 6%, 88%);
}
.dashboard .fc .fc-daygrid-day:hover {
    background: transparent !important;
}

/* off-month tiles recede into the canvas */
.dashboard .fc .fc-day-other {
    background: transparent !important;
}
.dashboard .fc .fc-day-other .fc-daygrid-day-frame {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.dashboard .fc .fc-day-other:hover .fc-daygrid-day-frame {
    transform: none;
    box-shadow: none;
}

/* weekends: whisper-tinted tiles */
.dashboard .fc .fc-day-sat:not(.fc-day-other) .fc-daygrid-day-frame,
.dashboard .fc .fc-day-sun:not(.fc-day-other) .fc-daygrid-day-frame {
    background: hsl(45, 25%, 98.6%);
}

/* today: the hero tile */
.dashboard .fc .fc-day-today {
    background: transparent !important;
    box-shadow: none !important;
}
.dashboard .fc .fc-day-today .fc-daygrid-day-frame {
    background: linear-gradient(180deg, hsl(207, 90%, 98.5%), #fff 55%);
    border: 1.5px solid hsla(207, 90%, 54%, .55);
    box-shadow: 0 2px 8px hsla(207, 90%, 54%, .12), 0 8px 22px hsla(207, 90%, 54%, .08);
}

/* day numbers: quiet, top-right, tabular */
.dashboard .fc .fc-daygrid-day-number {
    font-size: 11.5px;
    font-weight: 500;
    color: hsl(25, 5%, 56%);
    padding: 8px 10px 3px;
}
.dashboard .fc .fc-day-today .fc-daygrid-day-number {
    margin: 5px 6px;
}

/* events sit flush inside tiles */
.fc .fc-event.rd-ev {
    margin: 2px 6px !important;
    border-left-width: 0 !important;
    padding-left: 8px !important;
}
/* status dot replaces the left bar — cleaner inside tiles */
.fc .fc-event.rd-ev::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: .75;
}
.fc .fc-event.rd-ev.rd-proj::before {
    display: none; /* project cards already carry the mini ring */
}

/* "+N more" as a whisper row at tile bottom */
.dashboard .fc .fc-daygrid-more-link {
    display: block;
    margin: 1px 6px 4px;
    text-align: left;
    background: transparent;
    padding-left: 8px;
    font-size: 10.5px;
}

/* toolbar: editorial header — big title left, controls right */
.dashboard .fc .fc-toolbar.fc-header-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 2px;
}
.dashboard .fc .fc-toolbar-chunk:nth-child(2) {
    order: -1;
    margin-right: auto;
}
.dashboard .fc .fc-toolbar-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.03em;
}
/* nav arrows: round ghost buttons */
.dashboard .fc .fc-prev-button,
.dashboard .fc .fc-next-button {
    border-radius: 999px !important;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: hsl(25, 5%, 42%) !important;
}
.dashboard .fc .fc-prev-button:hover,
.dashboard .fc .fc-next-button:hover {
    background: hsl(20, 6%, 93%) !important;
}
.dashboard .fc .fc-today-button {
    border-radius: 999px !important;
    background: transparent !important;
    border-color: hsl(20, 6%, 88%) !important;
    box-shadow: none !important;
}
/* view switcher: segmented control */
.dashboard .fc .fc-button-group {
    background: hsl(20, 6%, 93.5%);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}
.dashboard .fc .fc-button-group .fc-button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 9px !important;
    padding: 5px 13px;
    color: hsl(25, 5%, 45%) !important;
}
.dashboard .fc .fc-button-group .fc-button-active {
    background: #fff !important;
    color: hsl(24, 10%, 10%) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 1px 4px rgba(16, 24, 40, .06) !important;
}

/* ============================================================
   Finance overview + quick stats: premium analytics cards
   ============================================================ */

/* the big white panel becomes a quiet canvas; columns become cards */
.dashboard .finance-summary > .panel_s {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.dashboard .finance-summary > .panel_s > .panel-body {
    padding: 0 !important;
}
.dashboard .finance-summary .home-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
}
.dashboard .finance-summary .home-summary > div[class*="col-"] {
    flex: 1 1 280px;
    width: auto;
    max-width: none;
    background: #fff;
    border: 1px solid hsl(20, 6%, 93%);
    border-radius: 16px;
    padding: 22px 24px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .18s ease, transform .18s ease;
}
.dashboard .finance-summary .home-summary > div[class*="col-"]:hover {
    box-shadow: 0 3px 8px rgba(16, 24, 40, .07), 0 12px 28px rgba(16, 24, 40, .05);
    transform: translateY(-1px);
}

/* section heading */
.dashboard .finance-summary .home-summary p.text-neutral-700 {
    margin-bottom: 18px !important;
}
.dashboard .finance-summary .home-summary p.text-neutral-700 .tw-font-medium {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: hsl(24, 10%, 12%);
}
.dashboard .finance-summary .home-summary p.text-neutral-700 svg {
    width: 18px;
    height: 18px;
    color: hsl(25, 5%, 55%);
}

/* KPI metric: number dominates */
.dashboard .rd-kpi-link {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    margin-bottom: 4px !important;
}
.dashboard .rd-kpi-num {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 10%);
    line-height: 1.15;
    font-feature-settings: "tnum";
    transition: color .15s ease;
}
.dashboard .rd-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: hsl(25, 5%, 52%);
    letter-spacing: .01em;
}
.dashboard .text-stats-wrapper.rd-fin-enh { margin-top: 14px; }
.dashboard .text-stats-wrapper.rd-fin-enh:hover .rd-kpi-num { color: hsl(207, 90%, 44%); }

/* percent + bar row */
.dashboard .rd-fin-progress {
    font-size: 11px;
    font-weight: 600;
    color: hsl(25, 5%, 55%) !important;
    font-feature-settings: "tnum";
}
.dashboard .rd-fin-progress .progress {
    height: 7px !important;
    border-radius: 999px !important;
    background: hsl(20, 6%, 93.5%) !important;
    box-shadow: none !important;
    margin-top: 4px;
    overflow: hidden;
}
.dashboard .rd-fin-progress .progress-bar {
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: width .9s cubic-bezier(.22, 1, .36, 1), filter .15s ease;
}
.dashboard .rd-fin-progress:hover .progress-bar { filter: brightness(1.08); }

/* semantic gradients */
.dashboard .rd-fin-green  .progress-bar { background: linear-gradient(90deg, hsl(145, 60%, 44%), hsl(160, 60%, 42%)) !important; }
.dashboard .rd-fin-blue   .progress-bar { background: linear-gradient(90deg, hsl(207, 90%, 54%), hsl(220, 85%, 58%)) !important; }
.dashboard .rd-fin-yellow .progress-bar { background: linear-gradient(90deg, hsl(45, 92%, 50%), hsl(38, 92%, 52%)) !important; }
.dashboard .rd-fin-orange .progress-bar { background: linear-gradient(90deg, hsl(28, 90%, 54%), hsl(20, 88%, 56%)) !important; }
.dashboard .rd-fin-red    .progress-bar { background: linear-gradient(90deg, hsl(0, 75%, 56%), hsl(350, 72%, 52%)) !important; }
.dashboard .rd-fin-gray   .progress-bar { background: linear-gradient(90deg, hsl(25, 5%, 62%), hsl(25, 5%, 55%)) !important; }

/* small semantic tick before each KPI number */
.dashboard .rd-fin-green  .rd-kpi-num::before,
.dashboard .rd-fin-blue   .rd-kpi-num::before,
.dashboard .rd-fin-yellow .rd-kpi-num::before,
.dashboard .rd-fin-orange .rd-kpi-num::before,
.dashboard .rd-fin-red    .rd-kpi-num::before,
.dashboard .rd-fin-gray   .rd-kpi-num::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: 2px;
}
.dashboard .rd-fin-green  .rd-kpi-num::before { background: hsl(145, 60%, 44%); }
.dashboard .rd-fin-blue   .rd-kpi-num::before { background: hsl(207, 90%, 54%); }
.dashboard .rd-fin-yellow .rd-kpi-num::before { background: hsl(45, 92%, 50%); }
.dashboard .rd-fin-orange .rd-kpi-num::before { background: hsl(28, 90%, 54%); }
.dashboard .rd-fin-red    .rd-kpi-num::before { background: hsl(0, 75%, 56%); }
.dashboard .rd-fin-gray   .rd-kpi-num::before { background: hsl(25, 5%, 60%); }

/* quick stats (bottom totals): premium KPI cards */
.dashboard .top_stats_wrapper {
    background: #fff;
    border: 1px solid hsl(20, 6%, 93%) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .18s ease, transform .18s ease;
}
.dashboard .top_stats_wrapper:hover {
    box-shadow: 0 3px 8px rgba(16, 24, 40, .07), 0 12px 28px rgba(16, 24, 40, .05);
    transform: translateY(-1px);
}
.dashboard .top_stats_wrapper svg {
    width: 18px !important;
    height: 18px !important;
    color: hsl(25, 5%, 55%) !important;
}
.dashboard .top_stats_wrapper .tw-font-semibold {
    font-size: 16px;
    letter-spacing: -.015em;
    color: hsl(24, 10%, 10%) !important;
    font-feature-settings: "tnum";
}
.dashboard .top_stats_wrapper .progress {
    height: 7px !important;
    border-radius: 999px !important;
    background: hsl(20, 6%, 93.5%) !important;
    box-shadow: none !important;
}
.dashboard .top_stats_wrapper .progress-bar {
    border-radius: 999px !important;
    box-shadow: none !important;
}
.dashboard .top_stats_wrapper .progress-bar.progress-bar-danger  { background: linear-gradient(90deg, hsl(0, 75%, 56%), hsl(350, 72%, 52%)) !important; }
.dashboard .top_stats_wrapper .progress-bar.progress-bar-warning { background: linear-gradient(90deg, hsl(45, 92%, 50%), hsl(38, 92%, 52%)) !important; }
.dashboard .top_stats_wrapper .progress-bar.progress-bar-success { background: linear-gradient(90deg, hsl(145, 60%, 44%), hsl(160, 60%, 42%)) !important; }
.dashboard .top_stats_wrapper .progress-bar.progress-bar-info,
.dashboard .top_stats_wrapper .progress-bar.progress-bar-default { background: linear-gradient(90deg, hsl(207, 90%, 54%), hsl(220, 85%, 58%)) !important; }

/* ============================================================
   Quick stats: executive KPI cards (custom composition)
   ============================================================ */
.rd-kpi2-hidden { display: none !important; }

.dashboard .top_stats_wrapper {
    padding: 20px 22px 18px !important;
    min-height: 172px;
}

.rd-kpi2 { display: flex; flex-direction: column; }

.rd-kpi2-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rd-kpi2-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(20, 6%, 95.5%);
}
.rd-kpi2-icon svg {
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
}
.rd-kpi2-ring { position: relative; display: inline-flex; }
.rd-kpi2-ringpct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 650;
    color: hsl(24, 10%, 20%);
    font-feature-settings: "tnum";
}
.rd-kpi2 .rd-seg-off { fill: hsl(20, 6%, 91%); }

.rd-kpi2-num {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: hsl(24, 10%, 8%);
    font-feature-settings: "tnum";
    animation: rd-kpi-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rd-kpi-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.rd-kpi2-title {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: hsl(24, 10%, 22%);
}
.rd-kpi2-ctx {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: hsl(25, 5%, 55%);
    font-feature-settings: "tnum";
}

/* category accents: icon chip, ring, and a hairline top glow */
.rd-acc-red     .rd-kpi2-icon { background: hsl(0, 75%, 96%); }
.rd-acc-red     .rd-kpi2-icon svg { color: hsl(0, 68%, 48%) !important; }
.rd-acc-red     .rd-seg-on { fill: hsl(0, 72%, 54%); }
.rd-acc-emerald .rd-kpi2-icon { background: hsl(152, 55%, 95%); }
.rd-acc-emerald .rd-kpi2-icon svg { color: hsl(152, 60%, 34%) !important; }
.rd-acc-emerald .rd-seg-on { fill: hsl(152, 58%, 42%); }
.rd-acc-blue    .rd-kpi2-icon { background: hsl(207, 85%, 95.5%); }
.rd-acc-blue    .rd-kpi2-icon svg { color: hsl(207, 85%, 44%) !important; }
.rd-acc-blue    .rd-seg-on { fill: hsl(207, 90%, 54%); }
.rd-acc-purple  .rd-kpi2-icon { background: hsl(262, 60%, 96%); }
.rd-acc-purple  .rd-kpi2-icon svg { color: hsl(262, 55%, 48%) !important; }
.rd-acc-purple  .rd-seg-on { fill: hsl(262, 60%, 56%); }

/* card hover: lift + ring brighten */
.dashboard .top_stats_wrapper:hover .rd-seg-on { filter: brightness(1.1); }
.dashboard .top_stats_wrapper:hover .rd-kpi2-icon { transform: scale(1.05); }
.rd-kpi2-icon { transition: transform .18s cubic-bezier(.22, 1, .36, 1); }

/* ============================================================
   Tasks table: premium workspace restyle (Linear/ClickUp feel)
   Scoped to .table-tasks / .table-my_tasks — functionality untouched
   ============================================================ */

/* kill the spreadsheet: no vertical lines, soft horizontal separators */
table.table-tasks,
table.table-my_tasks {
    border-collapse: separate !important;
    border-spacing: 0;
}
table.table-tasks > tbody > tr > td,
table.table-my_tasks > tbody > tr > td {
    border-top: none !important;
    border-bottom: 1px solid hsl(20, 6%, 94.5%) !important;
    padding: 16px 12px !important;
    vertical-align: middle !important;
    transition: background-color .15s ease;
}

/* header: light, airy, sticky */
table.table-tasks > thead > tr > th,
table.table-my_tasks > thead > tr > th {
    background: hsl(20, 12%, 98%) !important;
    border-bottom: 1px solid hsl(20, 6%, 92%) !important;
    border-top: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: hsl(25, 5%, 48%) !important;
    padding: 10px 12px !important;
    position: sticky;
    top: 0;
    z-index: 5;
}
table.table-tasks > thead > tr > th.sorting_asc,
table.table-tasks > thead > tr > th.sorting_desc,
table.table-my_tasks > thead > tr > th.sorting_asc,
table.table-my_tasks > thead > tr > th.sorting_desc {
    color: hsl(207, 90%, 40%) !important;
}

/* row hover: soft lift */
table.table-tasks > tbody > tr:hover > td,
table.table-my_tasks > tbody > tr:hover > td {
    background: hsl(20, 15%, 97.5%) !important;
}
table.table-tasks > tbody > tr,
table.table-my_tasks > tbody > tr {
    box-shadow: none;
    transition: box-shadow .15s ease;
}
table.table-tasks > tbody > tr:hover,
table.table-my_tasks > tbody > tr:hover {
    box-shadow: inset 3px 0 0 hsl(207, 90%, 54%);
}

/* task name is the hero */
.main-tasks-table-href-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    color: hsl(24, 10%, 12%) !important;
    transition: color .12s ease;
}
.main-tasks-table-href-name:hover { color: hsl(207, 90%, 44%) !important; }
.task-table-related {
    font-size: 12px !important;
    color: hsl(25, 5%, 52%) !important;
}

/* IDs + dates recede */
table.table-tasks > tbody > tr > td:nth-child(2),
table.table-tasks > tbody > tr > td:nth-child(2) a {
    font-size: 12px;
    color: hsl(25, 5%, 58%) !important;
    font-feature-settings: "tnum";
}
table.table-tasks > tbody > tr > td:nth-child(5),
table.table-tasks > tbody > tr > td:nth-child(6),
table.table-my_tasks > tbody > tr > td:nth-child(4),
table.table-my_tasks > tbody > tr > td:nth-child(5) {
    font-size: 12.5px;
    color: hsl(25, 5%, 50%);
    font-feature-settings: "tnum";
}

/* status pills: keep their semantic inline colors, refine the shape */
table.table-tasks .label[task-status-table],
table.table-my_tasks .label[task-status-table] {
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    display: inline-flex !important;
    align-items: center;
    line-height: 1.4 !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
table.table-tasks .label[task-status-table]:hover,
table.table-my_tasks .label[task-status-table]:hover {
    box-shadow: 0 2px 5px rgba(16, 24, 40, .1);
    transform: translateY(-1px);
}

/* priority: pill with a colored dot (uses its inline currentColor) */
a[id^="tableTaskPriority-"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 11px 4px 9px !important;
    border-radius: 999px;
    background: hsl(20, 8%, 96.5%);
    transition: background .15s ease;
}
a[id^="tableTaskPriority-"]:hover { background: hsl(20, 8%, 93.5%); }
a[id^="tableTaskPriority-"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

/* assignee avatars: overlapping stack with rings + hover pop */
table.table-tasks td .staff-profile-image-small,
table.table-my_tasks td .staff-profile-image-small {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    transition: transform .15s cubic-bezier(.22, 1, .36, 1);
    position: relative;
}
table.table-tasks td a + a .staff-profile-image-small,
table.table-my_tasks td a + a .staff-profile-image-small {
    margin-left: -9px;
}
table.table-tasks td a:hover .staff-profile-image-small,
table.table-my_tasks td a:hover .staff-profile-image-small {
    transform: translateY(-2px) scale(1.12);
    z-index: 3;
}

/* checkboxes: smooth */
table.table-tasks .checkbox input[type="checkbox"] + label::before,
table.table-my_tasks .checkbox input[type="checkbox"] + label::before {
    border-radius: 6px !important;
    border-color: hsl(20, 6%, 82%) !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
table.table-tasks .checkbox input[type="checkbox"]:checked + label::before,
table.table-my_tasks .checkbox input[type="checkbox"]:checked + label::before {
    background: hsl(207, 90%, 54%) !important;
    border-color: hsl(207, 90%, 54%) !important;
}

/* selection: calm, not harsh */
table.table-tasks > tbody > tr.selected > td,
table.table-my_tasks > tbody > tr.selected > td {
    background: hsl(207, 85%, 96.5%) !important;
}
table.table-tasks > tbody > tr.selected,
table.table-my_tasks > tbody > tr.selected {
    box-shadow: inset 3px 0 0 hsl(207, 90%, 54%);
}

/* row quick actions: fade in smoothly */
table.table-tasks .row-options,
table.table-my_tasks .row-options {
    opacity: 0;
    transition: opacity .15s ease;
    font-size: 12px;
    margin-top: 3px;
}
table.table-tasks tr:hover .row-options,
table.table-my_tasks tr:hover .row-options { opacity: 1; }

/* toolbar around the tasks table (search, length, pagination) */
.panel-body:has(.table-tasks) .dataTables_filter input[type="search"],
.panel-body:has(.table-my_tasks) .dataTables_filter input[type="search"] {
    border-radius: 10px !important;
    border: 1px solid hsl(20, 6%, 88%) !important;
    background: hsl(20, 12%, 98.5%);
    padding: 7px 12px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.panel-body:has(.table-tasks) .dataTables_filter input[type="search"]:focus,
.panel-body:has(.table-my_tasks) .dataTables_filter input[type="search"]:focus {
    background: #fff;
    border-color: hsl(207, 90%, 60%) !important;
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, .12) !important;
}
.panel-body:has(.table-tasks) .dataTables_length select,
.panel-body:has(.table-my_tasks) .dataTables_length select {
    border-radius: 8px !important;
    border: 1px solid hsl(20, 6%, 88%) !important;
    padding: 5px 8px !important;
}
.panel-body:has(.table-tasks) .pagination > li > a,
.panel-body:has(.table-my_tasks) .pagination > li > a {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: transparent !important;
    color: hsl(25, 5%, 40%);
}
.panel-body:has(.table-tasks) .pagination > li.active > a,
.panel-body:has(.table-my_tasks) .pagination > li.active > a {
    background: hsl(207, 90%, 54%) !important;
    color: #fff !important;
}

/* polished empty state */
table.table-tasks td.dataTables_empty,
table.table-my_tasks td.dataTables_empty {
    padding: 56px 20px !important;
    text-align: center;
    color: hsl(25, 5%, 55%);
    font-size: 13.5px;
    background: transparent !important;
}
table.table-tasks td.dataTables_empty::before,
table.table-my_tasks td.dataTables_empty::before {
    content: "✓";
    display: block;
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: hsl(152, 55%, 95%);
    color: hsl(152, 58%, 38%);
    font-size: 22px;
    font-weight: 700;
}

/* tags inside the tasks table stay compact */
table.table-tasks .tags-labels .label,
table.table-my_tasks .tags-labels .label {
    font-size: 10.5px !important;
    padding: 3px 9px !important;
}

/* ============================================================
   Projects page: KPI-style status counters (filter chips → widgets)
   ============================================================ */
.rd-pstats {
    gap: 10px !important;
    flex-wrap: wrap;
}
.rd-pstat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 92px;
    padding: 10px 14px 9px;
    background: #fff;
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: transform .16s cubic-bezier(.22, 1, .36, 1),
                box-shadow .16s ease, border-color .16s ease;
}
/* accent hairline along the top, in the status color */
.rd-pstat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rd-acc, hsl(207, 90%, 54%));
    opacity: .85;
}
.rd-pstat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--rd-acc, #999) 45%, hsl(20, 6%, 91%));
    box-shadow: 0 3px 8px rgba(16, 24, 40, .08),
                0 10px 24px color-mix(in srgb, var(--rd-acc, #999) 12%, transparent);
}
.rd-pstat:active { transform: translateY(0) scale(.98); }

.rd-pstat-num {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: hsl(24, 10%, 10%);
    font-feature-settings: "tnum";
}
.rd-pstat-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .015em;
    color: hsl(25, 5%, 48%);
    white-space: nowrap;
}
.rd-pstat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rd-acc, hsl(207, 90%, 54%));
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--rd-acc, #999) 18%, transparent);
    flex-shrink: 0;
}
.rd-pstat:hover .rd-pstat-num { color: var(--rd-acc, hsl(207, 90%, 44%)); }

/* mobile: counters flow as a wrapping row of compact cards */
@media (max-width: 767px) {
    .rd-pstats { flex-direction: row !important; }
    .rd-pstat { flex: 1 1 calc(50% - 10px); min-width: 0; }
}

/* the New Project button stays the single primary action */
#wrapper ._buttons .btn-primary {
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 4px 12px hsla(207, 90%, 44%, .25);
}
#wrapper ._buttons .btn-default {
    border-radius: 10px !important;
}

/* ============================================================
   Projects toolbar: 3-zone composition
   left action · centered status filters · right filters
   ============================================================ */
@media (min-width: 768px) {
    #wrapper ._buttons > div:has(.rd-pstats) {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }
    /* center zone: counters own the free space and center within it */
    #wrapper ._buttons .tw-hidden.md\:tw-block:has(.rd-pstats) {
        flex: 1 1 auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        justify-content: center;
        min-width: 0;
    }
    #wrapper ._buttons .rd-pstats {
        justify-content: center;
        margin: 0 !important;
    }
    /* right zone pins to the edge regardless of center width */
    #wrapper ._buttons > div:has(.rd-pstats) > .ltr\:tw-ml-auto {
        margin-left: 0 !important;
        flex-shrink: 0;
    }
    /* left zone: primary action group stays compact and distinct */
    #wrapper ._buttons > div:has(.rd-pstats) > .btn {
        flex-shrink: 0;
    }
}

/* ============================================================
   Project Overview: executive dashboard layout
   ============================================================ */

/* hero: ring + name + status + KPI tiles */
.rd-pov-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    background: #fff;
    border: 1px solid hsl(20, 6%, 92%);
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
    flex-wrap: wrap;
}
.rd-pov-hero-ring { flex-shrink: 0; }
.rd-pov-hero-ring .rd-circprog { margin: 0; }
.rd-pov-hero-main { flex: 1 1 340px; min-width: 0; }
.rd-pov-hero-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.rd-pov-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 10%);
}
.rd-pov-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    color: var(--rd-acc, hsl(207, 90%, 40%));
    background: color-mix(in srgb, var(--rd-acc, #999) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--rd-acc, #999) 30%, transparent);
}
.rd-pov-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rd-acc, hsl(207, 90%, 54%));
}

/* KPI tiles inside hero */
.rd-pov-kpis {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.rd-pov-kpi {
    flex: 1 1 150px;
    min-width: 140px;
    background: hsl(20, 12%, 98%);
    border: 1px solid hsl(20, 6%, 93%);
    border-radius: 14px;
    padding: 13px 15px 11px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow .16s ease, transform .16s ease;
}
.rd-pov-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(16, 24, 40, .07);
}
.rd-pov-kpi-num {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 10%);
    line-height: 1.15;
    font-feature-settings: "tnum";
}
.rd-pov-kpi-of {
    font-size: 12.5px;
    font-weight: 600;
    color: hsl(25, 5%, 55%);
}
.rd-pov-kpi-label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: hsl(25, 5%, 50%);
}
.rd-pov-kpi-bar { margin-top: 8px; }
.rd-pov-kpi-bar .progress {
    height: 6px !important;
    border-radius: 999px !important;
    background: hsl(20, 6%, 92%) !important;
    box-shadow: none !important;
}
.rd-pov-kpi-bar .progress-bar {
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.rd-pov-kpi-pct {
    position: absolute;
    top: 13px;
    right: 15px;
    font-size: 11px;
    font-weight: 600;
    color: hsl(25, 5%, 55%);
    font-feature-settings: "tnum";
}
.rd-pov-kpi-sub {
    margin-top: 8px;
    font-size: 11px;
    color: hsl(25, 5%, 55%);
}

/* main panel: quiet container, remove harsh divider */
.rd-pov-panel {
    border-radius: 18px !important;
    border: 1px solid hsl(20, 6%, 92%) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
.rd-pov-panel > .tw-absolute { display: none !important; }
.rd-pov-panel .panel-body { padding: 24px 26px !important; }

/* description list → tile mosaic instead of a long form */
.project-overview-left dl {
    gap: 10px !important;
}
.project-overview-left dl > div {
    background: hsl(20, 12%, 98%);
    border: 1px solid hsl(20, 6%, 93.5%);
    border-radius: 12px;
    padding: 10px 14px;
    transition: background .15s ease, border-color .15s ease;
}
.project-overview-left dl > div:hover {
    background: #fff;
    border-color: hsl(20, 6%, 88%);
}
.project-overview-left dl dt {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: hsl(25, 5%, 52%) !important;
}
.project-overview-left dl dd {
    margin-top: 3px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: hsl(24, 10%, 14%) !important;
    overflow-wrap: anywhere;
}
.project-overview-left dl dd a { color: hsl(207, 90%, 44%); }

/* section headings on the right column */
.project-overview-right h4 {
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: -.005em;
    color: hsl(24, 10%, 18%) !important;
}
.project-overview-right h4 i { color: hsl(25, 5%, 55%); }

/* right column info boxes become proper cards */
.project-overview-right .tw-border.tw-rounded-lg,
.project-overview-right .tw-border.tw-border-solid {
    border-radius: 14px !important;
    border-color: hsl(20, 6%, 92%) !important;
    padding: 16px 18px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* timesheets chart card */
.project-overview-right canvas { border-radius: 8px; }

/* Project health chip in the overview hero */
.rd-pov-health {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
}
.rd-pov-health i { font-size: 10.5px; }
.rd-health-ok {
    color: hsl(152, 60%, 30%);
    background: hsl(150, 55%, 96%);
    border: 1px solid hsl(150, 45%, 85%);
}
.rd-health-warn {
    color: hsl(30, 80%, 34%);
    background: hsl(38, 90%, 96%);
    border: 1px solid hsl(38, 75%, 84%);
}
.rd-health-done {
    color: hsl(210, 70%, 38%);
    background: hsl(210, 80%, 97%);
    border: 1px solid hsl(210, 60%, 87%);
}

/* ============================================================
   Project expenses: financial KPI cards
   ============================================================ */
.rd-exp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 1400px) {
    .rd-exp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rd-exp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid hsl(20, 6%, 92%);
    border-radius: 14px;
    padding: 13px 14px 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .16s ease, transform .16s ease;
    overflow: hidden;
}
.rd-exp-card::before {
    content: "";
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--rd-exp-acc);
    opacity: .7;
}
.rd-exp-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
}
.rd-exp-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 9px;
    color: var(--rd-exp-acc);
    background: var(--rd-exp-bg);
}
.rd-exp-num {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 10%);
    line-height: 1.2;
    font-feature-settings: "tnum";
    overflow-wrap: anywhere;
}
.rd-exp-label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: hsl(25, 5%, 50%);
}
.rd-exp-sub {
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--rd-exp-acc);
    opacity: .85;
    font-feature-settings: "tnum";
}
.rd-exp-zero .rd-exp-num { color: hsl(25, 5%, 60%); }
.rd-exp-zero .rd-exp-sub { color: hsl(25, 5%, 60%); }

.rd-exp-blue   { --rd-exp-acc: hsl(211, 80%, 46%); --rd-exp-bg: hsl(211, 85%, 96%); }
.rd-exp-orange { --rd-exp-acc: hsl(28, 85%, 46%);  --rd-exp-bg: hsl(32, 95%, 95%); }
.rd-exp-green  { --rd-exp-acc: hsl(152, 60%, 34%); --rd-exp-bg: hsl(150, 60%, 95%); }
.rd-exp-red    { --rd-exp-acc: hsl(2, 72%, 50%);   --rd-exp-bg: hsl(4, 90%, 96%); }

/* empty state */
.rd-exp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 26px 16px;
    background: hsl(20, 12%, 98%);
    border: 1px dashed hsl(20, 8%, 86%);
    border-radius: 14px;
}
.rd-exp-empty i {
    font-size: 18px;
    color: hsl(25, 5%, 65%);
    margin-bottom: 4px;
}
.rd-exp-empty span {
    font-size: 13px;
    font-weight: 600;
    color: hsl(24, 8%, 30%);
}
.rd-exp-empty small {
    font-size: 11.5px;
    color: hsl(25, 5%, 55%);
}

/* ============================================================
   Project health KPI widgets (Open Tasks / Days Left / tag cards)
   ============================================================ */
#wrapper .rd-kpi3 {
    background: #fff;
    border: 1px solid hsl(20, 6%, 92%);
    border-radius: 14px;
    padding: 14px 16px 13px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .16s ease, transform .16s ease;
}
#wrapper .rd-kpi3:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
}
.rd-kpi3-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.rd-kpi3-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    flex-shrink: 0;
    transition: transform .16s ease;
}
.rd-kpi3:hover .rd-kpi3-icon { transform: scale(1.07); }
.rd-kpi3-tasks .rd-kpi3-icon { color: hsl(211, 80%, 46%); background: hsl(211, 85%, 96%); }
.rd-kpi3-days  .rd-kpi3-icon { color: hsl(262, 60%, 50%); background: hsl(262, 70%, 96%); }
.rd-kpi3-tag   .rd-kpi3-icon { color: hsl(152, 60%, 34%); background: hsl(150, 60%, 95%); }
#wrapper .rd-kpi3-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.rd-kpi3-pill i { font-size: 9.5px; }
.rd-kpi3-pill-green { color: hsl(152, 60%, 30%); background: hsl(150, 55%, 95%); border: 1px solid hsl(150, 45%, 86%); }
.rd-kpi3-pill-blue  { color: hsl(211, 75%, 38%); background: hsl(211, 85%, 96%); border: 1px solid hsl(211, 70%, 88%); }
.rd-kpi3-pill-amber { color: hsl(30, 80%, 34%);  background: hsl(38, 90%, 95%);  border: 1px solid hsl(38, 75%, 84%); }
.rd-kpi3-pill-red   { color: hsl(2, 70%, 42%);   background: hsl(4, 90%, 96%);   border: 1px solid hsl(4, 75%, 88%); }
.rd-kpi3-pill-gray  { color: hsl(25, 5%, 45%);   background: hsl(20, 10%, 96%);  border: 1px solid hsl(20, 8%, 89%); }
#wrapper .rd-kpi3-num {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 10%);
    line-height: 1.15;
    font-feature-settings: "tnum";
}
.rd-kpi3-of {
    font-size: 14px;
    font-weight: 600;
    color: hsl(25, 5%, 55%);
}
#wrapper .rd-kpi3-label {
    margin: 1px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: hsl(25, 5%, 50%);
}
.rd-kpi3-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.rd-kpi3-bar .progress {
    flex: 1;
    height: 6px !important;
    border-radius: 999px !important;
    background: hsl(20, 6%, 92%) !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.rd-kpi3-bar .progress-bar {
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.rd-kpi3-pct {
    font-size: 11px;
    font-weight: 600;
    color: hsl(25, 5%, 55%);
    font-feature-settings: "tnum";
    flex-shrink: 0;
}

/* ============================================================
   Total Logged Hours — premium analytics card
   ============================================================ */
#wrapper .rd-th-card {
    background: #fff;
    border: 1px solid hsl(20, 6%, 92%);
    border-radius: 14px;
    padding: 16px 18px 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .16s ease;
}
#wrapper .rd-th-card:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .07); }
.rd-th-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.rd-th-title { display: flex; align-items: center; gap: 10px; }
.rd-th-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: hsl(211, 80%, 46%);
    background: hsl(211, 85%, 96%);
    flex-shrink: 0;
}
#wrapper .rd-th-h {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: hsl(24, 10%, 15%);
    line-height: 1.2;
}
.rd-th-period {
    font-size: 11px;
    color: hsl(25, 5%, 55%);
}
#wrapper .rd-th-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: hsl(25, 5%, 40%);
    background: hsl(20, 10%, 97%);
    border: 1px solid hsl(20, 8%, 90%);
    border-radius: 999px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
#wrapper .rd-th-range:hover {
    background: hsl(20, 10%, 94%);
    border-color: hsl(20, 8%, 84%);
    color: hsl(24, 10%, 20%);
}
.rd-th-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.rd-th-kpi {
    background: hsl(20, 12%, 97.5%);
    border: 1px solid hsl(20, 8%, 93%);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.rd-th-kpi-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(25, 5%, 55%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-th-kpi-val {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: hsl(24, 10%, 12%);
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.rd-th-kpi-sub {
    font-size: 10px;
    color: hsl(25, 5%, 58%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 12px;
}
.rd-th-canvas { position: relative; }
.rd-th-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 34px 16px;
    border: 1.5px dashed hsl(20, 8%, 88%);
    border-radius: 12px;
    background: hsl(20, 12%, 98%);
}
.rd-th-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: hsl(25, 5%, 55%);
    background: hsl(20, 8%, 93%);
    margin-bottom: 10px;
}
#wrapper .rd-th-empty-title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: hsl(24, 10%, 25%);
}
#wrapper .rd-th-empty-sub {
    margin: 0;
    font-size: 11.5px;
    color: hsl(25, 5%, 55%);
}
@media (max-width: 520px) {
    .rd-th-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   BridgeDash Project Health widget (Overview left column)
   ============================================================ */
#wrapper .rd-ph {
    background: linear-gradient(160deg, #fff 55%, hsl(211, 60%, 98%));
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    text-align: left;
    transition: box-shadow .16s ease;
}
#wrapper .rd-ph:hover { box-shadow: 0 5px 18px rgba(16, 24, 40, .08); }
.rd-ph-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.rd-ph-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: hsl(25, 5%, 45%);
}
.rd-ph-title i { color: hsl(211, 80%, 50%); font-size: 12px; }
#wrapper .rd-ph-health {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.rd-ph-health i { font-size: 10px; }
.rd-ph-health-green { color: hsl(152, 60%, 28%); background: hsl(150, 55%, 94%); border: 1px solid hsl(150, 45%, 84%); }
.rd-ph-health-amber { color: hsl(30, 80%, 32%); background: hsl(38, 90%, 94%); border: 1px solid hsl(38, 75%, 82%); }
.rd-ph-health-red   { color: hsl(2, 70%, 40%);  background: hsl(4, 90%, 95%);  border: 1px solid hsl(4, 75%, 86%); }
.rd-ph-main {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}
.rd-ph-ring { flex-shrink: 0; }
.rd-ph-ring .project-percent { font-size: 22px !important; font-weight: 700; }
.rd-ph-summary {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.rd-ph-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(25, 5%, 52%);
}
.rd-ph-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: hsl(24, 10%, 18%);
}
.rd-ph-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rd-ph-sc, hsl(211, 80%, 50%));
    box-shadow: 0 0 0 3px rgba(100, 120, 150, .15);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-ph-sc, hsl(211, 80%, 50%)) 18%, transparent);
    flex-shrink: 0;
}
.rd-ph-deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: hsl(25, 5%, 50%);
}
.rd-ph-deadline i { font-size: 10.5px; }
.rd-ph-deadline-late { color: hsl(2, 70%, 42%); }
.rd-ph-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.rd-ph-stat {
    background: hsla(0, 0%, 100%, .75);
    border: 1px solid hsl(20, 8%, 92%);
    border-radius: 10px;
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.rd-ph-stat-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(25, 5%, 55%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ph-stat-val {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: hsl(24, 10%, 12%);
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.rd-ph-stat-val small {
    font-size: 11.5px;
    font-weight: 600;
    color: hsl(25, 5%, 55%);
}
@media (max-width: 420px) {
    .rd-ph-main { flex-direction: column; align-items: flex-start; }
}

/* Project Health ring: center the % label (parent card is text-left, but
   .project-percent is absolutely positioned full-width and needs centered text) */
.rd-ph-ring .project-progress { text-align: center; }

/* ============================================================
   BridgeDash "Statistics by Project Status" donut widget
   ============================================================ */
.rd-ps-body { padding: 16px 18px !important; }
.rd-ps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.rd-ps-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: hsl(24, 10%, 15%);
}
.rd-ps-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(211, 85%, 96%), hsl(211, 75%, 91%));
    color: hsl(211, 80%, 45%);
    font-size: 13px;
    flex-shrink: 0;
}
.rd-ps-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.rd-ps-kpi {
    background: hsl(210, 30%, 98.5%);
    border: 1px solid hsl(20, 8%, 92%);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.rd-ps-kpi-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(25, 5%, 55%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ps-kpi-val {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 12%);
    font-feature-settings: "tnum";
}
.rd-ps-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}
.rd-ps-chart { position: relative; }
.rd-ps-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}
.rd-ps-center-val {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: hsl(24, 10%, 10%);
    line-height: 1.1;
    font-feature-settings: "tnum";
}
.rd-ps-center-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: hsl(25, 5%, 55%);
    margin-top: 3px;
}
.rd-ps-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
#wrapper a.rd-ps-row { text-decoration: none; }
.rd-ps-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .12s ease;
    cursor: pointer;
    min-width: 0;
}
.rd-ps-row:hover { background: hsl(210, 30%, 96.5%); }
.rd-ps-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rd-ps-row-name {
    font-size: 12.5px;
    font-weight: 500;
    color: hsl(24, 8%, 25%);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ps-row-count {
    font-size: 12.5px;
    font-weight: 700;
    color: hsl(24, 10%, 12%);
    font-feature-settings: "tnum";
}
.rd-ps-row-pct {
    font-size: 11px;
    font-weight: 600;
    color: hsl(25, 5%, 55%);
    background: hsl(20, 10%, 95%);
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 44px;
    text-align: center;
    font-feature-settings: "tnum";
}
.rd-ps-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: hsl(25, 5%, 60%);
    border: 1.5px dashed hsl(20, 8%, 88%);
    border-radius: 12px;
}
.rd-ps-empty i { font-size: 26px; }
.rd-ps-empty p { margin: 0; font-size: 13px; font-weight: 500; }
@media (max-width: 991px) {
    .rd-ps-main { grid-template-columns: 1fr; }
    .rd-ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Leads Overview donut widget (reuses .rd-ps-* system) */
.rd-ls-title-icon {
    background: linear-gradient(135deg, hsl(152, 60%, 95%), hsl(152, 50%, 89%));
    color: hsl(152, 60%, 34%);
}

/* Tickets Awaiting Reply widget (reuses .rd-ps-* system) */
.rd-tk-title-icon {
    background: linear-gradient(135deg, hsl(262, 70%, 96%), hsl(262, 60%, 91%));
    color: hsl(262, 60%, 48%);
}
.rd-tk-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
}
.rd-tk-divider::before,
.rd-tk-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: hsl(220, 15%, 91%);
}
.rd-tk-divider-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(220, 10%, 46%);
    white-space: nowrap;
}

/* Department workload health badges + compact KPI value */
.rd-tk-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.rd-tk-badge-high {
    background: hsl(0, 85%, 96%);
    color: hsl(0, 65%, 45%);
}
.rd-tk-badge-normal {
    background: hsl(152, 55%, 95%);
    color: hsl(152, 55%, 32%);
}
.rd-tk-badge-low {
    background: hsl(220, 15%, 95%);
    color: hsl(220, 10%, 48%);
}
.rd-tk-kpi-val-sm {
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Latest Project Activity — BridgeDash collaboration feed */
.rd-pa-title-icon {
    background: linear-gradient(135deg, hsl(38, 95%, 95%), hsl(38, 90%, 88%));
    color: hsl(30, 85%, 45%);
}
.rd-pa-feed {
    max-height: 480px;
    overflow-y: auto;
    padding: 2px 6px 6px 2px;
    scroll-behavior: smooth;
}
.rd-pa-feed::-webkit-scrollbar { width: 6px; }
.rd-pa-feed::-webkit-scrollbar-track { background: transparent; }
.rd-pa-feed::-webkit-scrollbar-thumb {
    background: hsl(220, 15%, 86%);
    border-radius: 999px;
}
.rd-pa-feed::-webkit-scrollbar-thumb:hover { background: hsl(220, 12%, 74%); }
.rd-pa-item {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 14px;
}
.rd-pa-item-grouped { padding-top: 0; }
.rd-pa-rail {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    display: flex;
    justify-content: center;
}
.rd-pa-rail::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: -14px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: hsl(220, 18%, 92%);
}
.rd-pa-item:last-child .rd-pa-rail::before { display: none; }
.rd-pa-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.rd-pa-icon-blue   { background: hsl(214, 90%, 95%); color: hsl(214, 80%, 45%); }
.rd-pa-icon-violet { background: hsl(262, 70%, 96%); color: hsl(262, 60%, 50%); }
.rd-pa-icon-cyan   { background: hsl(190, 80%, 94%); color: hsl(192, 75%, 35%); }
.rd-pa-icon-amber  { background: hsl(38, 95%, 93%);  color: hsl(30, 85%, 42%); }
.rd-pa-icon-green  { background: hsl(152, 55%, 94%); color: hsl(152, 55%, 32%); }
.rd-pa-icon-red    { background: hsl(0, 85%, 96%);   color: hsl(0, 65%, 48%); }
.rd-pa-icon-gray   { background: hsl(220, 15%, 94%); color: hsl(220, 10%, 46%); }
.rd-pa-card {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid hsl(220, 18%, 92%);
    border-radius: 12px;
    padding: 10px 12px;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.rd-pa-card:hover {
    border-color: hsl(220, 20%, 86%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.rd-pa-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
img.rd-pa-avatar,
.rd-pa-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.rd-pa-avatar-sys {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(220, 15%, 93%);
    color: hsl(220, 10%, 46%);
    font-size: 10px;
}
.rd-pa-who {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.rd-pa-name {
    font-size: 12.5px;
    font-weight: 600;
    color: hsl(222, 25%, 18%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.rd-pa-name:hover { color: hsl(214, 80%, 45%); }
.rd-pa-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: hsl(190, 80%, 94%);
    color: hsl(192, 75%, 35%);
    white-space: nowrap;
}
.rd-pa-pill {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rd-pa-time {
    font-size: 11px;
    color: hsl(220, 10%, 55%);
    white-space: nowrap;
    flex-shrink: 0;
}
.rd-pa-desc {
    margin: 6px 0 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: hsl(222, 15%, 30%);
}
.rd-pa-project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: hsl(220, 10%, 46%);
    background: hsl(220, 20%, 97%);
    border: 1px solid hsl(220, 18%, 92%);
    border-radius: 999px;
    padding: 3px 10px;
    max-width: 100%;
}
.rd-pa-project span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rd-pa-project:hover {
    color: hsl(214, 80%, 42%);
    border-color: hsl(214, 70%, 85%);
    background: hsl(214, 90%, 97%);
}
.rd-pa-extra {
    margin-top: 6px;
    font-size: 11.5px;
    color: hsl(220, 10%, 55%);
    border-left: 2px solid hsl(220, 18%, 90%);
    padding-left: 8px;
}

/* Payment Records — BridgeDash financial analytics widget */
.rd-pay-title-icon {
    background: linear-gradient(135deg, hsl(152, 60%, 95%), hsl(152, 55%, 88%));
    color: hsl(152, 60%, 30%);
}
.rd-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.rd-pay-controls {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.rd-pay-report-link {
    font-size: 12px;
    font-weight: 500;
    color: hsl(214, 80%, 45%);
}
.rd-pay-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: hsl(222, 20%, 30%);
    background: hsl(220, 20%, 97%);
    border: 1px solid hsl(220, 18%, 90%);
    border-radius: 999px;
    padding: 4px 12px;
}
.rd-pay-mode:hover {
    border-color: hsl(220, 20%, 84%);
    color: hsl(222, 25%, 18%);
}
.rd-pay-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: baseline;
}
.rd-pay-growth {
    font-size: 11.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
}
.rd-pay-up {
    background: hsl(152, 55%, 94%);
    color: hsl(152, 55%, 30%);
}
.rd-pay-down {
    background: hsl(0, 85%, 96%);
    color: hsl(0, 65%, 45%);
}

/* My To Do — BridgeDash productivity widget */
.rd-td-title-icon {
    background: linear-gradient(135deg, hsl(214, 90%, 95%), hsl(214, 85%, 90%));
    color: hsl(214, 80%, 45%);
}
.rd-td-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.rd-td-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.rd-td-link {
    font-size: 12px;
    font-weight: 500;
    color: hsl(220, 10%, 46%);
}
.rd-td-link:hover { color: hsl(214, 80%, 45%); }
.rd-td-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: hsl(214, 80%, 50%);
    border-radius: 999px;
    padding: 5px 13px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.rd-td-new:hover,
.rd-td-new:focus {
    color: #fff;
    background: hsl(214, 80%, 44%);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}
.rd-td-scroll {
    max-height: 460px;
    overflow-y: auto;
    padding: 2px 6px 6px 2px;
    scroll-behavior: smooth;
}
.rd-td-scroll::-webkit-scrollbar { width: 6px; }
.rd-td-scroll::-webkit-scrollbar-track { background: transparent; }
.rd-td-scroll::-webkit-scrollbar-thumb {
    background: hsl(220, 15%, 86%);
    border-radius: 999px;
}
.rd-td-scroll::-webkit-scrollbar-thumb:hover { background: hsl(220, 12%, 74%); }
.rd-td-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
}
.rd-td-section-mt { margin-top: 20px; }
.rd-td-section-icon { font-size: 13px; }
.rd-td-section-open { color: hsl(30, 85%, 50%); }
.rd-td-section-done { color: hsl(152, 55%, 40%); }
.rd-td-section-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(220, 10%, 40%);
}
.rd-td-count {
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: hsl(38, 95%, 92%);
    color: hsl(30, 85%, 40%);
}
.rd-td-count-done {
    background: hsl(152, 55%, 93%);
    color: hsl(152, 55%, 30%);
}
.rd-td-list { margin-bottom: 0; }
.rd-td-item { margin-bottom: 8px; }
.rd-td-card {
    background: #fff;
    border: 1px solid hsl(220, 18%, 92%);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 0 !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, opacity 0.3s ease;
}
.rd-td-card:hover {
    border-color: hsl(220, 20%, 86%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.rd-td-item-done .rd-td-card {
    background: hsl(220, 25%, 98.5%);
    opacity: 0.82;
}
.rd-td-item-done .rd-td-card:hover { opacity: 1; }
.rd-td-left {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding-right: 8px !important;
}
.rd-td-check { margin: 0; }
.rd-td-check input[type="checkbox"] + label::before {
    border-radius: 6px;
    border-color: hsl(220, 15%, 78%);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.rd-td-check input[type="checkbox"]:checked + label::before {
    background: hsl(152, 55%, 42%);
    border-color: hsl(152, 55%, 42%);
}
.rd-td-check input[type="checkbox"]:active + label::before { transform: scale(0.88); }
.rd-td-desc {
    font-size: 13px;
    line-height: 1.5;
    color: hsl(222, 20%, 22%);
    word-break: break-word;
}
.rd-td-item-done .rd-td-desc { color: hsl(220, 10%, 52%); }
.rd-td-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.rd-td-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: hsl(220, 10%, 55%);
}
.rd-td-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.rd-td-card:hover .rd-td-row-actions { opacity: 1; }
.rd-td-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 11px;
    color: hsl(220, 10%, 46%);
    background: hsl(220, 20%, 96%);
    transition: background 0.15s ease, color 0.15s ease;
}
.rd-td-btn:hover {
    color: hsl(214, 80%, 45%);
    background: hsl(214, 90%, 94%);
}
.rd-td-btn-danger:hover {
    color: hsl(0, 65%, 48%);
    background: hsl(0, 85%, 95%);
}
.rd-td-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px !important;
    text-align: center;
    border: 1px dashed hsl(220, 18%, 88%);
    border-radius: 12px;
    background: hsl(220, 25%, 98.5%);
}
.rd-td-empty.hide { display: none; }
.rd-td-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: hsl(38, 95%, 93%);
    color: hsl(30, 85%, 45%);
}
.rd-td-empty-icon-done {
    background: hsl(152, 55%, 93%);
    color: hsl(152, 55%, 35%);
}
.rd-td-empty-text {
    font-size: 12.5px;
    color: hsl(220, 10%, 50%);
}
.rd-td-empty-cta {
    font-size: 12.5px;
    font-weight: 600;
    color: hsl(214, 80%, 45%);
}
.rd-td-item .todo-dragger { margin-top: 2px; }

/* Financial Overview — BridgeDash executive cards */
.rd-fo-col {
    padding: 4px 6px 10px;
}
.rd-fo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.rd-fo-icon-inv {
    background: linear-gradient(135deg, hsl(214, 90%, 95%), hsl(214, 85%, 90%));
    color: hsl(214, 80%, 45%);
}
.rd-fo-icon-est {
    background: linear-gradient(135deg, hsl(262, 80%, 96%), hsl(262, 75%, 91%));
    color: hsl(262, 60%, 52%);
}
.rd-fo-icon-pro {
    background: linear-gradient(135deg, hsl(152, 60%, 95%), hsl(152, 55%, 88%));
    color: hsl(152, 60%, 30%);
}
.rd-fo-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.rd-fo-chip-green {
    background: hsl(152, 55%, 94%);
    color: hsl(152, 55%, 30%);
}
.rd-fo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    margin: 0 -10px 4px;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.rd-fo-row:hover {
    background: hsl(220, 25%, 97%);
    text-decoration: none;
}
.rd-fo-val {
    font-size: 19px;
    font-weight: 700;
    color: hsl(222, 30%, 16%);
    min-width: 34px;
    text-align: center;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.rd-fo-info {
    flex: 1;
    min-width: 0;
}
.rd-fo-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: hsl(220, 12%, 42%);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-fo-row:hover .rd-fo-label { color: hsl(222, 25%, 24%); }
.rd-fo-pct {
    font-size: 11.5px;
    font-weight: 600;
    color: hsl(220, 10%, 55%);
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rd-fo-track.progress {
    display: block;
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: hsl(220, 20%, 93%);
    box-shadow: none;
    overflow: hidden;
}
.rd-fo-fill {
    height: 100%;
    border-radius: 999px;
    box-shadow: none;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.rd-fo-tone-green .rd-fo-fill { background: linear-gradient(90deg, hsl(152, 55%, 46%), hsl(152, 60%, 38%)); }
.rd-fo-tone-blue .rd-fo-fill { background: linear-gradient(90deg, hsl(214, 85%, 58%), hsl(214, 80%, 48%)); }
.rd-fo-tone-amber .rd-fo-fill { background: linear-gradient(90deg, hsl(38, 92%, 55%), hsl(30, 88%, 48%)); }
.rd-fo-tone-red .rd-fo-fill { background: linear-gradient(90deg, hsl(0, 78%, 62%), hsl(0, 70%, 50%)); }
.rd-fo-tone-gray .rd-fo-fill { background: linear-gradient(90deg, hsl(220, 12%, 74%), hsl(220, 10%, 62%)); }
.rd-fo-tone-green .rd-fo-val { color: hsl(152, 55%, 28%); }
.rd-fo-tone-red .rd-fo-val { color: hsl(0, 65%, 42%); }
.rd-fo-tone-amber .rd-fo-val { color: hsl(30, 85%, 38%); }

/* Footer financial summary (invoices total) */
.rd-fo-totals .top_stats_wrapper {
    border-radius: 12px;
    border: 1px solid hsl(220, 18%, 92%);
    background: hsl(220, 25%, 98.5%);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rd-fo-totals .top_stats_wrapper:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

/* Commission — BridgeDash analytics widget */
.rd-cm-title-icon {
    background: linear-gradient(135deg, hsl(38, 95%, 94%), hsl(38, 92%, 88%));
    color: hsl(30, 85%, 42%);
}
.rd-cm-year {
    font-size: 12px;
    font-weight: 600;
    color: hsl(220, 10%, 50%);
    background: hsl(220, 20%, 96%);
    border: 1px solid hsl(220, 18%, 91%);
    border-radius: 999px;
    padding: 3px 11px;
}
.rd-cm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}
.rd-cm-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid hsl(220, 18%, 92%);
    border-radius: 12px;
    background: hsl(220, 25%, 98.5%);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rd-cm-kpi:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.rd-cm-kpi-primary {
    background: #fff;
    border-color: hsl(220, 20%, 88%);
}
.rd-cm-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 4px;
}
.rd-cm-ki-blue { background: hsl(214, 90%, 94%); color: hsl(214, 80%, 45%); }
.rd-cm-ki-green { background: hsl(152, 55%, 93%); color: hsl(152, 55%, 32%); }
.rd-cm-ki-purple { background: hsl(262, 80%, 95%); color: hsl(262, 60%, 52%); }
.rd-cm-ki-amber { background: hsl(38, 95%, 92%); color: hsl(30, 85%, 42%); }
.rd-cm-ki-teal { background: hsl(178, 60%, 92%); color: hsl(178, 55%, 30%); }
.rd-cm-kpi-value {
    font-size: 17px;
    font-weight: 700;
    color: hsl(222, 30%, 16%);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.rd-cm-kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: hsl(220, 10%, 50%);
    letter-spacing: 0.02em;
}
.rd-cm-growth {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 4px;
}
.rd-cm-up { background: hsl(152, 55%, 94%); color: hsl(152, 55%, 30%); }
.rd-cm-down { background: hsl(0, 85%, 96%); color: hsl(0, 65%, 45%); }
.rd-cm-chart-wrap {
    position: relative;
    height: 260px;
    margin-top: 6px;
}
.rd-cm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    text-align: center;
    border: 1px dashed hsl(220, 18%, 88%);
    border-radius: 12px;
    background: hsl(220, 25%, 98.5%);
    margin-top: 6px;
}
.rd-cm-empty.hide { display: none; }
.rd-cm-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: hsl(38, 95%, 93%);
    color: hsl(30, 85%, 45%);
}
.rd-cm-empty-title {
    font-size: 13.5px;
    font-weight: 600;
    color: hsl(222, 25%, 24%);
}
.rd-cm-empty-text {
    font-size: 12px;
    color: hsl(220, 10%, 52%);
    max-width: 340px;
}

/* Financial Summary KPI cards — invoices totals (dashboard + invoices pages) */
.rd-it-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.rd-it-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid hsl(220, 18%, 91%);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    animation: rd-it-in 0.5s ease both;
}
.rd-it-card:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}
@keyframes rd-it-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.rd-it-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 6px;
}
.rd-it-amount {
    font-size: 21px;
    font-weight: 700;
    color: hsl(222, 30%, 14%);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.rd-it-label {
    font-size: 12px;
    font-weight: 500;
    color: hsl(220, 10%, 48%);
}
.rd-it-share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: hsl(220, 10%, 55%);
    font-variant-numeric: tabular-nums;
}
.rd-it-share-track {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: hsl(220, 20%, 93%);
    overflow: hidden;
}
.rd-it-share-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.rd-it-tone-amber .rd-it-icon { background: hsl(38, 95%, 92%); color: hsl(30, 85%, 42%); }
.rd-it-tone-red .rd-it-icon { background: hsl(0, 85%, 95%); color: hsl(0, 65%, 48%); }
.rd-it-tone-green .rd-it-icon { background: hsl(152, 55%, 93%); color: hsl(152, 55%, 32%); }
.rd-it-tone-amber .rd-it-share-fill { background: linear-gradient(90deg, hsl(38, 92%, 55%), hsl(30, 88%, 48%)); }
.rd-it-tone-red .rd-it-share-fill { background: linear-gradient(90deg, hsl(0, 78%, 62%), hsl(0, 70%, 50%)); }
.rd-it-tone-green .rd-it-share-fill { background: linear-gradient(90deg, hsl(152, 55%, 46%), hsl(152, 60%, 38%)); }

/* year/currency selectors — integrated pill style */
.rd-it-controls .simple-bootstrap-select .btn {
    background: hsl(220, 20%, 97%) !important;
    border: 1px solid hsl(220, 18%, 90%) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    color: hsl(222, 20%, 30%) !important;
    padding-left: 12px !important;
    padding-right: 24px !important;
    box-shadow: none !important;
}
.rd-it-controls .simple-bootstrap-select .btn:hover {
    border-color: hsl(220, 20%, 82%) !important;
}

/* compact badge mode (invoices list pages) */
.rd-it-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid hsl(220, 18%, 90%);
    border-radius: 999px;
    font-size: 12.5px;
}
.rd-it-badge i { font-size: 11px; }
.rd-it-tone-amber.rd-it-badge i { color: hsl(30, 85%, 45%); }
.rd-it-tone-red.rd-it-badge i { color: hsl(0, 65%, 48%); }
.rd-it-tone-green.rd-it-badge i { color: hsl(152, 55%, 35%); }
.rd-it-badge-label { color: hsl(220, 10%, 46%); font-weight: 500; }
.rd-it-badge-amount { font-weight: 700; color: hsl(222, 30%, 16%); font-variant-numeric: tabular-nums; }

/* remove the old generic tile treatment now that cards are self-styled */
.rd-fo-totals .top_stats_wrapper { border: 0; background: transparent; box-shadow: none; }
.rd-fo-totals .top_stats_wrapper:hover { box-shadow: none; transform: none; }

/* Contracts Expiring Soon — BridgeDash renewal widget */
.rd-ce-title-icon {
    background: linear-gradient(135deg, hsl(262, 80%, 96%), hsl(262, 75%, 91%));
    color: hsl(262, 60%, 52%);
}
.rd-ce-link {
    font-size: 12px;
    font-weight: 500;
    color: hsl(220, 10%, 46%);
}
.rd-ce-link:hover { color: hsl(214, 80%, 45%); }
.rd-ce-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 14px 0 16px;
}
.rd-ce-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid hsl(220, 18%, 92%);
    border-radius: 12px;
    background: hsl(220, 25%, 98.5%);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rd-ce-kpi:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.rd-ce-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 4px;
}
.rd-ce-ki-green { background: hsl(152, 55%, 93%); color: hsl(152, 55%, 32%); }
.rd-ce-ki-amber { background: hsl(38, 95%, 92%); color: hsl(30, 85%, 42%); }
.rd-ce-ki-blue { background: hsl(214, 90%, 94%); color: hsl(214, 80%, 45%); }
.rd-ce-kpi-value {
    font-size: 19px;
    font-weight: 700;
    color: hsl(222, 30%, 16%);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.rd-ce-kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: hsl(220, 10%, 50%);
}
.rd-ce-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}
.rd-ce-list::-webkit-scrollbar { width: 6px; }
.rd-ce-list::-webkit-scrollbar-track { background: transparent; }
.rd-ce-list::-webkit-scrollbar-thumb { background: hsl(220, 15%, 86%); border-radius: 999px; }
.rd-ce-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid hsl(220, 18%, 92%);
    border-left-width: 3px;
    border-radius: 12px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rd-ce-card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.rd-ce-tone-red { border-left-color: hsl(0, 70%, 55%); }
.rd-ce-tone-orange { border-left-color: hsl(24, 90%, 52%); }
.rd-ce-tone-amber { border-left-color: hsl(38, 92%, 50%); }
.rd-ce-card-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.rd-ce-subject {
    font-size: 13px;
    font-weight: 600;
    color: hsl(222, 25%, 20%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ce-subject:hover { color: hsl(214, 80%, 45%); }
.rd-ce-client {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: hsl(220, 10%, 50%);
}
.rd-ce-client:hover { color: hsl(214, 80%, 45%); }
.rd-ce-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.rd-ce-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.rd-ce-tone-red .rd-ce-badge { background: hsl(0, 85%, 96%); color: hsl(0, 65%, 45%); }
.rd-ce-tone-orange .rd-ce-badge { background: hsl(24, 95%, 94%); color: hsl(24, 85%, 40%); }
.rd-ce-tone-amber .rd-ce-badge { background: hsl(38, 95%, 92%); color: hsl(30, 85%, 40%); }
.rd-ce-dates {
    font-size: 10.5px;
    color: hsl(220, 10%, 58%);
    font-variant-numeric: tabular-nums;
}
.rd-ce-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 16px;
    text-align: center;
    border: 1px dashed hsl(220, 18%, 88%);
    border-radius: 12px;
    background: hsl(220, 25%, 98.5%);
    animation: rd-it-in 0.5s ease both;
}
.rd-ce-empty-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: hsl(152, 55%, 93%);
    color: hsl(152, 55%, 32%);
}
.rd-ce-empty-title {
    font-size: 13.5px;
    font-weight: 600;
    color: hsl(222, 25%, 24%);
}
.rd-ce-empty-text {
    font-size: 12px;
    color: hsl(220, 10%, 52%);
    max-width: 360px;
}

/* ============================================================
   Projects table — premium PM workspace restyle
   Scoped to table.table-projects; functionality untouched
   ============================================================ */
table.table-projects {
    border-collapse: separate !important;
    border-spacing: 0;
}
table.table-projects > tbody > tr > td {
    padding: 14px 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 94%) !important;
    vertical-align: middle !important;
    font-size: 12.5px;
    color: hsl(220, 10%, 40%);
    transition: background 0.15s ease;
}
table.table-projects > thead > tr > th {
    background: hsl(220, 25%, 98%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 92%) !important;
    padding: 10px 12px !important;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(220, 10%, 50%);
}
table.table-projects > tbody > tr:hover > td {
    background: hsl(214, 60%, 98.4%) !important;
}
table.table-projects > tbody > tr.task_overdue > td:first-child {
    box-shadow: inset 3px 0 0 hsl(0, 72%, 58%);
}
/* # column quiet */
table.table-projects > tbody > tr > td:first-child a {
    font-size: 11.5px !important;
    color: hsl(220, 10%, 60%) !important;
    font-variant-numeric: tabular-nums;
}
/* hero project name */
table.table-projects .rd-pj-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600 !important;
    color: hsl(222, 28%, 18%) !important;
    line-height: 1.35;
}
table.table-projects .rd-pj-name:hover { color: hsl(214, 80%, 45%) !important; }
table.table-projects .rd-pj-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: hsl(220, 10%, 52%);
}
table.table-projects .rd-pj-sub i { font-size: 10px; margin-right: 2px; }
table.table-projects .rd-pj-id { color: hsl(220, 10%, 65%); font-variant-numeric: tabular-nums; }
/* deadline cell + urgency badges */
table.table-projects .rd-pj-deadline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
table.table-projects .rd-pj-due {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
}
table.table-projects .rd-pj-due-red { background: hsl(0, 85%, 96%); color: hsl(0, 65%, 45%); }
table.table-projects .rd-pj-due-amber { background: hsl(38, 95%, 92%); color: hsl(30, 85%, 40%); }
/* status pills: soften vendor inline styles */
table.table-projects td .label[class*="project-status-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}
table.table-projects td .label[class*="project-status-"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
/* discussion / activity buttons as soft icon chips */
table.table-projects td .btn-sm {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid hsl(220, 18%, 91%);
    background: #fff;
    color: hsl(220, 10%, 48%) !important;
    margin: 1px 2px;
    transition: all 0.15s ease;
}
table.table-projects td .btn-sm:hover {
    background: hsl(214, 90%, 96%);
    border-color: hsl(214, 70%, 85%);
    color: hsl(214, 80%, 45%) !important;
}
/* tags inside projects table: compact wrap */
table.table-projects td .label-tag {
    margin: 1px 3px 1px 0 !important;
}
/* toolbar: search, length, export row */
.projects .dataTables_wrapper .dataTables_filter input,
.projects .dataTables_wrapper .dataTables_length select {
    border: 1px solid hsl(220, 18%, 90%) !important;
    border-radius: 10px !important;
    background: hsl(220, 25%, 98.5%) !important;
    box-shadow: none !important;
    font-size: 12.5px;
    padding: 6px 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.projects .dataTables_wrapper .dataTables_filter input:focus {
    background: #fff !important;
    border-color: hsl(214, 80%, 70%) !important;
    outline: 0;
}
/* pagination pills */
.projects .dataTables_wrapper .pagination > li > a {
    border: 1px solid hsl(220, 18%, 92%) !important;
    color: hsl(220, 10%, 45%) !important;
    margin: 0 2px;
    border-radius: 8px !important;
    font-size: 12px;
    transition: all 0.15s ease;
}
.projects .dataTables_wrapper .pagination > li.active > a {
    background: hsl(214, 80%, 50%) !important;
    border-color: hsl(214, 80%, 50%) !important;
    color: #fff !important;
}
.projects .dataTables_wrapper .pagination > li > a:hover {
    background: hsl(220, 25%, 96%) !important;
}
/* panel container: rounded card look */
.projects .panel_s {
    border-radius: 14px;
    border: 1px solid hsl(220, 18%, 92%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

/* ============================================================
   My Workspace widget — personal command center
   ============================================================ */
.rd-ws-title-icon {
    background: linear-gradient(135deg, hsl(214, 90%, 95%), hsl(214, 85%, 90%));
    color: hsl(214, 80%, 45%);
}
.rd-ws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.rd-ws-kpis {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rd-ws-kpi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid hsl(220, 18%, 91%);
    background: hsl(220, 25%, 98.5%);
    font-size: 11.5px;
    color: hsl(220, 10%, 48%);
}
.rd-ws-kpi b {
    font-weight: 700;
    color: hsl(222, 30%, 16%);
    font-variant-numeric: tabular-nums;
}
.rd-ws-kpi i { font-size: 10.5px; }
.rd-ws-kpi-amber { background: hsl(38, 95%, 95%); border-color: hsl(38, 80%, 85%); color: hsl(30, 70%, 38%); }
.rd-ws-kpi-amber b { color: hsl(30, 85%, 32%); }
.rd-ws-kpi-red { background: hsl(0, 85%, 97%); border-color: hsl(0, 70%, 88%); color: hsl(0, 55%, 45%); }
.rd-ws-kpi-red b { color: hsl(0, 65%, 40%); }
.rd-ws-kpi-blue { background: hsl(214, 90%, 97%); border-color: hsl(214, 70%, 88%); color: hsl(214, 55%, 45%); }
.rd-ws-kpi-blue b { color: hsl(214, 80%, 40%); }

/* segmented pill navigation */
.rd-ws .horizontal-tabs { padding: 0; }
.rd-ws .nav-tabs.rd-ws-nav {
    display: inline-flex;
    gap: 4px;
    border-bottom: 0 !important;
    background: hsl(220, 20%, 96.5%);
    border-radius: 12px;
    padding: 4px;
}
.rd-ws .rd-ws-nav > li { float: none; margin: 0; }
.rd-ws .rd-ws-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0 !important;
    border-radius: 9px !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    font-size: 12.5px;
    font-weight: 500;
    color: hsl(220, 10%, 44%) !important;
    background: transparent !important;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.rd-ws .rd-ws-nav > li > a:hover {
    color: hsl(222, 28%, 18%) !important;
    background: hsl(220, 20%, 92%) !important;
}
.rd-ws .rd-ws-nav > li.active > a {
    background: #fff !important;
    color: hsl(222, 28%, 14%) !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}
.rd-ws .rd-ws-nav > li > a .menu-icon {
    font-size: 12px;
    color: hsl(220, 10%, 55%);
}
.rd-ws .rd-ws-nav > li.active > a .menu-icon { color: hsl(214, 80%, 48%); }
.rd-ws-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: hsl(220, 15%, 88%);
    color: hsl(220, 15%, 34%);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.rd-ws .rd-ws-nav > li.active > a .rd-ws-count {
    background: hsl(214, 90%, 93%);
    color: hsl(214, 80%, 40%);
}
.rd-ws-count-amber {
    background: hsl(38, 95%, 88%) !important;
    color: hsl(30, 85%, 34%) !important;
}
/* tab content transition */
.rd-ws .tab-content > .tab-pane.active {
    animation: rd-it-in 0.35s ease both;
}
/* view-all as quiet action link */
.rd-ws-viewall {
    font-size: 12px;
    font-weight: 500;
    color: hsl(220, 10%, 48%) !important;
}
.rd-ws-viewall:hover { color: hsl(214, 80%, 45%) !important; }
.rd-ws-viewall i { font-size: 10px; margin-left: 3px; transition: transform 0.15s ease; }
.rd-ws-viewall:hover i { transform: translateX(2px); }
/* hide legacy scroller arrows (pill nav wraps/scrolls naturally) */
.rd-ws .scroller { display: none !important; }
.rd-ws .horizontal-scrollable-tabs .horizontal-tabs { overflow-x: auto; }

/* My Workspace fix: neutralize the vendor full-width-tab negative margins
   that pulled the pill nav up over the widget header */
.rd-ws .panel-full-width-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.rd-ws .panel-full-width-tabs .nav.rd-ws-nav {
    margin-top: 0 !important;
    padding-left: 4px;
    padding-right: 4px;
}

/* --- Setup submenu (#setup-menu): match main sidebar design --- */
#setup-menu-wrapper #setup-menu li a {
    color: hsl(25, 5.3%, 34.7%) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 9px 12px !important;
    background: transparent !important;
}

#setup-menu-wrapper #setup-menu li a i,
#setup-menu-wrapper #setup-menu li a .menu-icon {
    color: hsl(25, 5.3%, 44.7%) !important;
}

#setup-menu-wrapper #setup-menu li a:hover,
#setup-menu-wrapper #setup-menu li a:focus {
    background: hsl(60, 4.8%, 95.9%) !important;
    color: hsl(24, 9.8%, 10%) !important;
}

#setup-menu-wrapper #setup-menu li.active > a,
#setup-menu-wrapper #setup-menu li a.active {
    background: hsl(207, 90%, 96%) !important;
    color: hsl(207, 90%, 44%) !important;
    font-weight: 500 !important;
}

#setup-menu-wrapper #setup-menu li.active > a i,
#setup-menu-wrapper #setup-menu li a.active i {
    color: hsl(207, 90%, 50%) !important;
}

/* Nested second-level items inside setup menu */
#setup-menu-wrapper #setup-menu ul.nav-second-level li a {
    color: hsl(25, 5.3%, 44.7%) !important;
    font-size: 13.5px !important;
}

/* --- Roles & Permissions modern redesign (rd-perm / rd-role) --- */
.rd-perm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 14px;
    flex-wrap: wrap;
}
.rd-perm-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}
.rd-perm-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(25, 5.3%, 55%);
    font-size: 13px;
}
.rd-perm-search input {
    width: 100%;
    height: 38px;
    padding: 8px 12px 8px 34px;
    border: 1px solid hsl(20, 5.9%, 88%);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
.rd-perm-search input:focus {
    outline: none;
    border-color: hsl(207, 90%, 60%);
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.12);
}
.rd-perm-btn {
    background: #fff;
    border: 1px solid hsl(20, 5.9%, 88%);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    color: hsl(25, 5.3%, 34.7%);
    transition: background .15s;
}
.rd-perm-btn:hover { background: hsl(60, 4.8%, 95.9%); }

/* Cards grid: keep table.roles for JS compatibility, restyle as grid */
table.rd-perm-grid { display: block; border: 0 !important; background: transparent; }
table.rd-perm-grid .rd-perm-hidden-head { display: none; }
table.rd-perm-grid > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}
tr.rd-perm-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid hsl(20, 5.9%, 90%);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}
td.rd-perm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid hsl(20, 5.9%, 93%) !important;
    background: hsl(60, 9%, 98%);
    cursor: pointer;
    user-select: none;
}
.rd-perm-card-title {
    font-size: 14px;
    font-weight: 600;
    color: hsl(24, 9.8%, 14%);
}
.rd-perm-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rd-perm-select-all {
    background: transparent;
    border: 0;
    color: hsl(207, 90%, 44%);
    font-size: 12.5px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 6px;
}
.rd-perm-select-all:hover { background: hsl(207, 90%, 96%); }
.rd-perm-toggle {
    background: transparent;
    border: 0;
    color: hsl(25, 5.3%, 55%);
    padding: 4px 6px;
    border-radius: 6px;
}
.rd-perm-toggle i { transition: transform .18s ease; font-size: 12px; }
tr.rd-perm-card.rd-collapsed .rd-perm-toggle i { transform: rotate(-90deg); }
td.rd-perm-card-body {
    display: block;
    padding: 12px 14px !important;
    border: 0 !important;
}
tr.rd-perm-card.rd-collapsed td.rd-perm-card-body { display: none; }
.rd-perm-item-wrap { margin-left: 0 !important; }
.rd-perm-item { margin: 0 0 4px !important; padding: 5px 6px; border-radius: 6px; }
.rd-perm-item:hover { background: hsl(60, 4.8%, 96.5%); }
.rd-perm-item label { font-size: 13.5px; color: hsl(25, 5.3%, 30%); }
.rd-perm-empty {
    padding: 26px;
    text-align: center;
    color: hsl(25, 5.3%, 50%);
    font-size: 14px;
    background: #fff;
    border: 1px dashed hsl(20, 5.9%, 87%);
    border-radius: 12px;
    margin-top: 10px;
}

/* Blue info banner (replaces yellow warning) */
.rd-info-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: hsl(207, 90%, 97%);
    border: 1px solid hsl(207, 80%, 88%);
    border-radius: 10px;
    padding: 13px 15px;
    margin: 6px 0 14px;
}
.rd-info-banner-icon { color: hsl(207, 90%, 48%); font-size: 16px; margin-top: 2px; }
.rd-info-banner-text { color: hsl(212, 40%, 25%); font-size: 13.5px; line-height: 1.5; }
.rd-info-banner-check { margin: 8px 0 0 !important; }
.rd-info-banner-check label { font-weight: 500; color: hsl(212, 40%, 25%); }

/* Role page layout */
.rd-role-page .rd-role-info .panel-body { padding: 18px 20px; }
.rd-role-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.rd-role-actions-bottom { margin: 14px 0 30px; }

/* --- Roles & Permissions polish pass (Apple-inspired) --- */
tr.rd-perm-card {
    border-radius: 14px;
    border-color: hsl(20, 6%, 91%);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    transition: box-shadow .2s ease, transform .2s ease;
}
tr.rd-perm-card:hover {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}
td.rd-perm-card-head {
    padding: 14px 16px !important;
    background: #fff;
    border-bottom: 1px solid hsl(20, 6%, 94%) !important;
}
tr.rd-perm-card.rd-collapsed td.rd-perm-card-head { border-bottom-color: transparent !important; }
.rd-perm-head-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rd-perm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: hsl(210, 30%, 96.5%);
    color: hsl(215, 25%, 40%);
    font-size: 13.5px;
}
.rd-perm-card-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: hsl(222, 15%, 16%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
td.rd-perm-card-body { padding: 10px 12px 12px !important; }

/* Custom checkbox rows: full-row click target, aligned, animated */
.rd-perm .rd-perm-item-wrap { margin: 0 !important; }
.rd-perm .rd-perm-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px !important;
    padding: 8px 10px;
    border-radius: 9px;
    transition: background .15s ease;
}
.rd-perm .rd-perm-item:hover { background: hsl(210, 20%, 97%); }
.rd-perm .rd-perm-item input.capability {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0 !important;
    border: 1.5px solid hsl(20, 6%, 78%);
    border-radius: 5.5px;
    background: #fff;
    position: static !important;
    opacity: 1 !important;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px 11px;
}
.rd-perm .rd-perm-item input.capability:hover:not(:disabled) {
    border-color: hsl(207, 90%, 54%);
}
.rd-perm .rd-perm-item input.capability:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.18);
}
.rd-perm .rd-perm-item input.capability:checked {
    background-color: hsl(207, 90%, 48%);
    border-color: hsl(207, 90%, 48%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7l4.5-5.4'/%3E%3C/svg%3E");
}
.rd-perm .rd-perm-item input.capability:disabled {
    opacity: .45 !important;
    cursor: not-allowed;
}
.rd-perm .rd-perm-item label {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 450;
    color: hsl(222, 12%, 28%);
    cursor: pointer;
    line-height: 1.45;
}
.rd-perm .rd-perm-item label::before,
.rd-perm .rd-perm-item label::after { display: none !important; content: none !important; }
.rd-perm .rd-perm-item .fa-circle-question { color: hsl(20, 6%, 65%); font-size: 12.5px; }

/* Header buttons refinement */
.rd-perm-select-all { font-size: 12px; padding: 4px 8px; white-space: nowrap; }
.rd-perm-toggle i { color: hsl(20, 6%, 60%); }
.rd-perm-toolbar { margin-top: 20px; }
.rd-perm-search input { border-radius: 10px; height: 40px; }
.rd-perm-btn { border-radius: 10px; padding: 8px 15px; }
table.rd-perm-grid > tbody { gap: 16px; }

/* --- Staff Members Using This Role panel (premium card list) --- */
.rd-staff-panel {
    background: #fff;
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
}
.rd-staff-panel-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 2px 12px;
    border-bottom: 1px solid hsl(20, 6%, 94%);
    margin-bottom: 12px;
}
.rd-staff-panel-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: hsl(222, 15%, 16%);
    line-height: 1.3;
}
.rd-staff-panel-count {
    font-size: 12px;
    color: hsl(20, 6%, 55%);
    margin-top: 1px;
}
.rd-staff-search {
    position: relative;
    margin-bottom: 10px;
}
.rd-staff-search .fa-magnifying-glass {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: hsl(20, 6%, 60%);
    pointer-events: none;
}
.rd-staff-search input {
    width: 100%;
    height: 38px;
    border: 1px solid hsl(20, 6%, 88%);
    border-radius: 10px;
    padding: 0 12px 0 34px;
    font-size: 13px;
    color: hsl(222, 12%, 22%);
    background: hsl(210, 20%, 98.5%);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.rd-staff-search input:focus {
    outline: none;
    background: #fff;
    border-color: hsl(207, 90%, 60%);
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.14);
}
.rd-staff-list { display: flex; flex-direction: column; gap: 4px; }
.rd-staff-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease;
}
.rd-staff-item:hover { background: hsl(210, 20%, 97%); }
.rd-staff-item:hover .rd-staff-chevron { opacity: 1; transform: translateX(0); }
.rd-staff-avatar { flex: 0 0 auto; display: inline-flex; }
.rd-staff-avatar img.staff-profile-image-small {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(16, 24, 40, 0.12);
}
.rd-staff-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-staff-name {
    font-size: 13.5px;
    font-weight: 600;
    color: hsl(222, 15%, 18%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-staff-item:hover .rd-staff-name { color: hsl(207, 90%, 42%); }
.rd-staff-sub { display: flex; align-items: center; gap: 6px; }
.rd-staff-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: hsl(215, 20%, 45%);
    background: hsl(210, 30%, 96%);
    border-radius: 6px;
    padding: 1.5px 7px;
}
.rd-staff-badge i { font-size: 10px; }
.rd-staff-chevron {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: hsl(20, 6%, 65%);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .15s ease, transform .15s ease;
}
.rd-staff-empty {
    text-align: center;
    padding: 22px 10px;
    color: hsl(20, 6%, 55%);
    font-size: 13px;
}
.rd-staff-empty i { display: block; font-size: 22px; margin-bottom: 6px; color: hsl(20, 6%, 72%); }
.rd-staff-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid hsl(20, 6%, 94%);
}
.rd-staff-pager:empty { display: none; }
.rd-staff-pager-btn {
    width: 30px;
    height: 30px;
    border: 1px solid hsl(20, 6%, 88%);
    border-radius: 9px;
    background: #fff;
    color: hsl(222, 12%, 30%);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rd-staff-pager-btn:hover:not(:disabled) {
    background: hsl(210, 20%, 97%);
    border-color: hsl(20, 6%, 80%);
}
.rd-staff-pager-btn:disabled { opacity: .4; cursor: default; }
.rd-staff-pager-info { font-size: 12px; font-weight: 500; color: hsl(20, 6%, 45%); }

/* --- Staff Members management page (premium redesign) --- */
.rd-staffm { max-width: 1180px; }
.rd-staffm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 16px;
}
.rd-staffm-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: hsl(222, 15%, 14%);
}
.rd-staffm-title i { color: hsl(215, 25%, 45%); font-size: 16px; }
.rd-staffm-subtitle { font-size: 12.5px; color: hsl(20, 6%, 55%); margin-top: 2px; }
.rd-staffm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rd-staffm-search { flex: 1 1 240px; max-width: 340px; margin-bottom: 0; }
.rd-staffm-select {
    height: 38px;
    border: 1px solid hsl(20, 6%, 88%);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: hsl(222, 12%, 25%);
    padding: 0 10px;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.rd-staffm-select:focus {
    outline: none;
    border-color: hsl(207, 90%, 60%);
    box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.14);
}
.rd-staffm-bulkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: hsl(210, 40%, 97%);
    border: 1px solid hsl(210, 40%, 90%);
    border-radius: 12px;
    padding: 8px 14px;
    margin-bottom: 12px;
}
.rd-staffm-bulk-count { font-size: 13px; font-weight: 600; color: hsl(215, 30%, 30%); margin-right: 6px; }
.rd-staffm-list { display: flex; flex-direction: column; gap: 8px; }
.rd-staffm-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.rd-staffm-row:hover {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
    border-color: hsl(20, 6%, 86%);
}
.rd-staffm-check {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    border: 1.5px solid hsl(20, 6%, 78%);
    border-radius: 5.5px;
    background: #fff center / 11px 11px no-repeat;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}
.rd-staffm-check:checked {
    background-color: hsl(207, 90%, 48%);
    border-color: hsl(207, 90%, 48%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7l4.5-5.4'/%3E%3C/svg%3E");
}
.rd-staffm-check:disabled { opacity: .35; cursor: not-allowed; }
.rd-staffm-main { flex: 1 1 auto; min-width: 0; }
.rd-staffm-nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-staffm-nameline .rd-staff-name { font-size: 14.5px; }
.rd-staffm-adminbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: hsl(262, 50%, 45%);
    background: hsl(262, 60%, 96.5%);
    border-radius: 6px;
    padding: 1.5px 7px;
}
.rd-staffm-metaline {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.rd-staffm-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: hsl(20, 6%, 48%);
    min-width: 0;
}
.rd-staffm-meta i { font-size: 11.5px; color: hsl(20, 6%, 62%); }
.rd-staffm-meta a { color: hsl(20, 6%, 48%); }
.rd-staffm-meta a:hover { color: hsl(207, 90%, 42%); }
.rd-staffm-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.rd-staffm-statuspill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.rd-staffm-statuspill.is-on { color: hsl(150, 60%, 28%); background: hsl(150, 55%, 95%); }
.rd-staffm-statuspill.is-off { color: hsl(20, 6%, 46%); background: hsl(20, 6%, 94%); }
.rd-staffm-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd-staffm-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-left: 6px;
    border-left: 1px solid hsl(20, 6%, 93%);
}
.rd-staffm-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: hsl(222, 12%, 40%);
    font-size: 13px;
    transition: background .15s ease, color .15s ease;
}
.rd-staffm-iconbtn:hover { background: hsl(210, 20%, 95.5%); color: hsl(207, 90%, 42%); }
.rd-staffm-iconbtn-danger:hover { background: hsl(0, 70%, 96.5%); color: hsl(0, 65%, 48%); }
@media (max-width: 991px) {
    .rd-staffm-row { flex-wrap: wrap; }
    .rd-staffm-main { flex-basis: 100%; order: 3; }
    .rd-staffm-status { margin-left: auto; }
}

/* --- Roles Management page (premium cards + stats) --- */
.rd-roles { max-width: 1180px; }
.rd-roles-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.rd-roles-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.rd-roles-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: hsl(210, 30%, 96.5%);
    color: hsl(215, 25%, 40%);
    font-size: 15px;
}
.rd-roles-stat-value {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(222, 15%, 14%);
    line-height: 1.15;
}
.rd-roles-stat-label { font-size: 12px; color: hsl(20, 6%, 55%); margin-top: 1px; }
.rd-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
.rd-role-card {
    background: #fff;
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 15px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rd-role-card:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.09);
    border-color: hsl(20, 6%, 85%);
    transform: translateY(-1px);
}
.rd-role-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.rd-role-card-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; font-size: 16px; }
.rd-role-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .18s ease; }
.rd-role-card:hover .rd-role-card-actions,
.rd-role-card:focus-within .rd-role-card-actions { opacity: 1; }
.rd-role-card-name {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: hsl(222, 15%, 15%) !important;
    text-decoration: none !important;
    line-height: 1.35;
}
.rd-role-card-name:hover { color: hsl(207, 90%, 42%) !important; }
.rd-role-card-meta { display: flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
    .rd-roles-grid { grid-template-columns: 1fr; }
    .rd-role-card-actions { opacity: 1; }
}

/* --- Bright Apple-style atmosphere (background, depth, breathing room) --- */
/* Brighter, fresher page background with a very subtle top-light gradient */
html,
body,
#wrapper,
#wrapper .content {
    background: #F7F8FA !important;
}
body {
    background-image: linear-gradient(180deg, #FAFBFD 0%, #F5F6F9 380px, #F5F6F9 100%) !important;
    background-attachment: fixed !important;
}
#wrapper .content { background: transparent !important; }

/* Cards float gently: white surfaces, soft borders, airy shadows */
#wrapper .panel_s {
    background: #ffffff;
    border: 1px solid hsla(220, 15%, 20%, 0.07) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 6px rgba(16, 24, 40, 0.03) !important;
}
tr.rd-perm-card,
.rd-staffm-row,
.rd-role-card,
.rd-roles-stat,
.rd-staff-panel {
    border-color: hsla(220, 15%, 20%, 0.07) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.035) !important;
}
tr.rd-perm-card:hover,
.rd-staffm-row:hover,
.rd-role-card:hover {
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 10px 24px rgba(16, 24, 40, 0.08) !important;
}

/* More breathing room across the redesigned pages */
.rd-staffm-header { margin: 10px 0 24px; }
.rd-roles-stats { gap: 16px; margin-bottom: 24px; }
.rd-staffm-toolbar { gap: 12px; margin-bottom: 20px; }
.rd-roles-grid { gap: 18px; }
.rd-staffm-list { gap: 10px; }
.rd-roles-stat { padding: 18px 20px; }
.rd-role-card { padding: 20px 18px; }
.rd-staffm-row { padding: 15px 18px; }
table.rd-perm-grid > tbody { gap: 18px; }
#wrapper .content { padding-top: 24px; }

/* Crisper secondary text + toolbar surfaces on bright bg */
.rd-staffm-select,
.rd-staff-search input { background: #fff; }
.rd-staffm-subtitle,
.rd-roles-stat-label { color: hsl(220, 9%, 56%); }

/* Top navbar: clean white with hairline border to match */
#header, .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid hsla(220, 15%, 20%, 0.07) !important;
    box-shadow: none !important;
}

/* --- Customers list page (premium restyle, rd-custm) ---
   Server-side DataTables ajax kept intact; shell + rows restyled. */
.rd-custm { max-width: 1280px; }
.rd-custm-sublink { font-size: 12.5px; color: hsl(207, 90%, 42%); }
.rd-custm-sublink:hover { color: hsl(207, 90%, 34%); }
.rd-custm-headactions { display: flex; align-items: center; gap: 8px; }
.rd-custm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.rd-custm-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid hsl(20, 6%, 91%);
    border-radius: 14px;
    padding: 13px 15px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.rd-custm-icon-green { background: hsl(150, 55%, 95%); color: hsl(150, 60%, 30%); }
.rd-custm-icon-red { background: hsl(0, 70%, 96.5%); color: hsl(0, 60%, 48%); }
.rd-custm-icon-blue { background: hsl(207, 85%, 95.5%); color: hsl(207, 80%, 42%); }
.rd-custm-icon-violet { background: hsl(262, 60%, 96.5%); color: hsl(262, 50%, 48%); }
.rd-custm-stat .rd-roles-stat-label .text-has-action { color: inherit; border-bottom: 1px dashed hsl(20, 6%, 70%); }

/* panel as rounded card */
.rd-custm .panel_s {
    border-radius: 14px;
    border: 1px solid hsl(220, 18%, 92%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

/* table core: card-like rows */
.rd-custm table.table-clients {
    border-collapse: separate !important;
    border-spacing: 0;
}
.rd-custm table.table-clients > thead > tr > th {
    background: hsl(220, 25%, 98%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 92%) !important;
    padding: 10px 12px !important;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(220, 10%, 50%);
}
.rd-custm table.table-clients > tbody > tr > td {
    padding: 13px 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 94%) !important;
    vertical-align: middle !important;
    font-size: 12.5px;
    color: hsl(220, 10%, 40%);
    transition: background 0.15s ease;
}
.rd-custm table.table-clients > tbody > tr:hover > td {
    background: hsl(214, 60%, 98.4%) !important;
}
.rd-custm table.table-clients > tbody > tr.secondary > td { opacity: .62; }
/* userid column quiet */
.rd-custm table.table-clients > tbody > tr > td:nth-child(2) {
    font-size: 11.5px;
    color: hsl(220, 10%, 60%);
    font-variant-numeric: tabular-nums;
}

/* custom checkboxes (mass select) */
.rd-custm table.table-clients .checkbox { margin: 0; }
.rd-custm table.table-clients .checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: static;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid hsl(20, 6%, 78%);
    border-radius: 5.5px;
    background: #fff center / 11px 11px no-repeat;
    cursor: pointer;
    opacity: 1;
    transition: background .16s ease, border-color .16s ease;
}
.rd-custm table.table-clients .checkbox input[type="checkbox"]:checked {
    background-color: hsl(207, 90%, 48%);
    border-color: hsl(207, 90%, 48%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7l4.5-5.4'/%3E%3C/svg%3E");
}
.rd-custm table.table-clients .checkbox label { display: none; }

/* company cell: avatar chip + name + hover options */
.rd-custm-cell { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.rd-custm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    background: hsl(207, 85%, 95.5%);
    color: hsl(207, 80%, 40%);
    font-size: 14px;
    font-weight: 700;
}
.rd-custm-avatar-person { background: hsl(20, 8%, 94.5%); color: hsl(20, 6%, 46%); font-size: 13px; }
.rd-custm-cellmain { min-width: 0; }
.rd-custm-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600 !important;
    color: hsl(222, 28%, 18%) !important;
    line-height: 1.35;
}
.rd-custm-name:hover { color: hsl(207, 90%, 42%) !important; }
.rd-custm-cellmain .row-options { margin-top: 1px; font-size: 11.5px; }

/* meta chips (email / phone) */
.rd-custm-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: hsl(20, 6%, 48%);
    min-width: 0;
}
.rd-custm-meta i { font-size: 11px; color: hsl(20, 6%, 62%); }
.rd-custm-meta a { color: hsl(20, 6%, 48%); }
.rd-custm-meta a:hover { color: hsl(207, 90%, 42%); }

/* soft badges: membership + groups */
.rd-custm-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: hsl(215, 30%, 36%);
    background: hsl(210, 30%, 96%);
    border: 1px solid hsl(210, 25%, 91%);
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.5;
}
.rd-custm-badge-group { margin: 1px 3px 1px 0; }
.rd-custm-badge-group:hover { background: hsl(207, 85%, 94%); border-color: hsl(207, 70%, 86%); color: hsl(207, 85%, 36%); }

/* status pill + switch */
.rd-custm-status { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rd-custm-statuspill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2.5px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.rd-custm-statuspill.is-on { color: hsl(150, 60%, 28%); background: hsl(150, 55%, 95%); }
.rd-custm-statuspill.is-off { color: hsl(20, 6%, 46%); background: hsl(20, 6%, 94%); }
.rd-custm-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd-custm-status .onoffswitch { margin: 0; }

/* DataTables toolbar: rounded search / length / export */
.rd-custm .dataTables_wrapper .dataTables_filter input,
.rd-custm .dataTables_wrapper .dataTables_length select {
    border: 1px solid hsl(220, 18%, 90%) !important;
    border-radius: 10px !important;
    background: hsl(220, 25%, 98.5%) !important;
    box-shadow: none !important;
    font-size: 12.5px;
    padding: 6px 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rd-custm .dataTables_wrapper .dataTables_filter input:focus {
    background: #fff !important;
    border-color: hsl(207, 80%, 70%) !important;
    outline: 0;
}
.rd-custm .dataTables_wrapper .dt-buttons .btn,
.rd-custm .dataTables_wrapper .table-btn {
    border-radius: 10px !important;
}

/* pagination pills */
.rd-custm .dataTables_wrapper .pagination > li > a {
    border: 1px solid hsl(220, 18%, 92%) !important;
    color: hsl(220, 10%, 45%) !important;
    margin: 0 2px;
    border-radius: 8px !important;
    font-size: 12px;
    transition: all 0.15s ease;
}
.rd-custm .dataTables_wrapper .pagination > li.active > a {
    background: hsl(207, 90%, 48%) !important;
    border-color: hsl(207, 90%, 48%) !important;
    color: #fff !important;
}
.rd-custm .dataTables_wrapper .pagination > li > a:hover {
    background: hsl(220, 25%, 96%) !important;
}
@media (max-width: 767px) {
    .rd-custm-stats { grid-template-columns: repeat(2, 1fr); }
}

/* --- Customer Contacts page (rd-custm, mirrors .table-clients styles) --- */
.rd-custm table.table-all-contacts {
    border-collapse: separate !important;
    border-spacing: 0;
}
.rd-custm table.table-all-contacts > thead > tr > th {
    background: hsl(220, 25%, 98%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 92%) !important;
    padding: 10px 12px !important;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(220, 10%, 50%);
}
.rd-custm table.table-all-contacts > tbody > tr > td {
    padding: 13px 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 94%) !important;
    vertical-align: middle !important;
    font-size: 12.5px;
    color: hsl(220, 10%, 40%);
    transition: background 0.15s ease;
}
.rd-custm table.table-all-contacts > tbody > tr:hover > td {
    background: hsl(214, 60%, 98.4%) !important;
}
.rd-custm table.table-all-contacts > tbody > tr.secondary > td { opacity: .62; }

/* contact avatar chip built from the profile image */
.rd-custm-avatar-img { overflow: hidden; padding: 0; background: hsl(20, 8%, 94.5%); }
.rd-custm-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* --- Customer Groups page (rd-custm, mirrors .table-clients styles) --- */
.rd-grp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.rd-custm table.table-customer-groups {
    border-collapse: separate !important;
    border-spacing: 0;
}
.rd-custm table.table-customer-groups > thead > tr > th {
    background: hsl(220, 25%, 98%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 92%) !important;
    padding: 10px 12px !important;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(220, 10%, 50%);
}
.rd-custm table.table-customer-groups > tbody > tr > td {
    padding: 13px 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid hsl(220, 18%, 94%) !important;
    vertical-align: middle !important;
    font-size: 12.5px;
    color: hsl(220, 10%, 40%);
    transition: background 0.15s ease;
}
.rd-custm table.table-customer-groups > tbody > tr:hover > td {
    background: hsl(214, 60%, 98.4%) !important;
}
.rd-grp-avatar { background: hsl(207, 85%, 95.5%); color: hsl(207, 80%, 42%); }
.rd-grp-actionbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid hsl(20, 5.9%, 90%);
    background: #fff;
    color: hsl(20, 6%, 50%) !important;
    font-size: 12.5px;
    transition: all 0.15s ease;
}
.rd-grp-actionbtn:hover {
    border-color: hsl(207, 70%, 86%);
    background: hsl(207, 85%, 97%);
    color: hsl(207, 85%, 40%) !important;
}
.rd-grp-actionbtn-danger:hover {
    border-color: hsl(0, 60%, 88%);
    background: hsl(0, 70%, 97.5%);
    color: hsl(0, 60%, 46%) !important;
}
.rd-grp-avatar::before { content: attr(data-initial); }

/* --- Staff Performance Settings: modern list table --- */
.rd-sps-table {
    background: #fff;
    border: 1px solid hsla(220, 15%, 20%, 0.07);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 6px rgba(16, 24, 40, 0.03);
    overflow: hidden;
}
.rd-sps-thead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    background: hsl(210, 25%, 98%);
    border-bottom: 1px solid hsl(20, 6%, 93%);
    position: sticky;
    top: 0;
    z-index: 2;
}
.rd-sps-th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(220, 9%, 52%);
    flex: 1 1 auto;
}
.rd-sps-col-num { flex: 0 0 44px; }
.rd-sps-col-actions { flex: 0 0 92px; text-align: right; }
.rd-sps-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid hsl(20, 6%, 95.5%);
    transition: background .15s ease;
}
.rd-sps-row:last-child { border-bottom: none; }
.rd-sps-row:nth-child(even) { background: hsl(210, 25%, 99.2%); }
.rd-sps-row:hover { background: hsl(210, 25%, 97%); }
.rd-sps-num {
    flex: 0 0 44px;
    font-size: 12.5px;
    font-weight: 500;
    color: hsl(220, 9%, 60%);
}
.rd-sps-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 550;
    color: hsl(222, 15%, 18%);
}
.rd-sps-name-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: hsl(210, 30%, 96.5%);
    color: hsl(215, 25%, 45%);
    font-size: 12px;
}
.rd-sps-actions {
    flex: 0 0 92px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    opacity: .55;
    transition: opacity .15s ease;
}
.rd-sps-row:hover .rd-sps-actions { opacity: 1; }
.rd-sps-refresh { width: 38px; height: 38px; border-radius: 10px; }
.rd-sps .rd-staff-pager { border-top: none; margin-top: 14px; padding-top: 0; }

/* --- [temporary hidden menu] Setup menu whitelist: show only Staff,
   Staff Performance Settings, Roles, Customers > Groups. Others hidden, not deleted. --- */
#setup-menu > li { display: none !important; }
#setup-menu > li.menu-item-staff,
#setup-menu > li.menu-item-staff_performance_settings,
#setup-menu > li.menu-item-roles,
#setup-menu > li.menu-item-customers { display: block !important; }
/* Inside Customers, keep only the Groups child */
#setup-menu li.menu-item-customers .nav-second-level > li { display: none !important; }
#setup-menu li.menu-item-customers .nav-second-level > li.sub-menu-item-customer-groups { display: block !important; }

/* --- Team Performance executive dashboard (.rd-tp-*) --- */
.rd-tp-page { padding-top: 8px; }
.rd-tp-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.rd-tp-title { font-size: 21px; font-weight: 700; color: hsl(220,15%,16%); margin: 0 0 2px; letter-spacing: -0.02em; }
.rd-tp-title i { color: hsl(207,90%,54%); margin-right: 6px; }
.rd-tp-subtitle { color: hsl(220,9%,55%); font-size: 13px; margin: 0; }
.rd-tp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-tp-search-wrap, .rd-tp-date-wrap { position: relative; }
.rd-tp-search-wrap i, .rd-tp-date-wrap i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: hsl(220,9%,60%); font-size: 12px; pointer-events: none; }
.rd-tp-input { height: 36px; border: 1px solid hsla(220,15%,20%,0.12); border-radius: 10px; background: #fff; padding: 0 12px 0 30px; font-size: 13px; color: hsl(220,15%,20%); outline: none; transition: border-color .15s, box-shadow .15s; width: 150px; }
.rd-tp-search-wrap .rd-tp-input { width: 180px; }
.rd-tp-input:focus { border-color: hsl(207,90%,54%); box-shadow: 0 0 0 3px hsla(207,90%,54%,0.12); }
.rd-tp-select { height: 36px; border: 1px solid hsla(220,15%,20%,0.12); border-radius: 10px; background: #fff; padding: 0 28px 0 12px; font-size: 13px; color: hsl(220,15%,20%); outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23697386' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.rd-tp-refresh { height: 36px; width: 36px; border: 1px solid hsla(220,15%,20%,0.12); border-radius: 10px; background: #fff; color: hsl(220,9%,45%); cursor: pointer; transition: all .15s; }
.rd-tp-refresh:hover { color: hsl(207,90%,54%); border-color: hsl(207,90%,54%); }
.rd-tp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.rd-tp-sum-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid hsla(220,15%,20%,0.07); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 2px hsla(220,15%,20%,0.04), 0 8px 24px -12px hsla(220,15%,20%,0.10); }
.rd-tp-sum-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.rd-tp-ic-blue { background: hsla(207,90%,54%,0.12); color: hsl(207,90%,44%); }
.rd-tp-ic-green { background: hsla(145,60%,45%,0.12); color: hsl(145,60%,34%); }
.rd-tp-ic-purple { background: hsla(262,60%,55%,0.12); color: hsl(262,60%,48%); }
.rd-tp-sum-value { font-size: 19px; font-weight: 700; color: hsl(220,15%,16%); letter-spacing: -0.02em; line-height: 1.2; }
.rd-tp-sum-label { font-size: 12px; color: hsl(220,9%,55%); }
.rd-tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 16px; }
.rd-tp-card { background: #fff; border: 1px solid hsla(220,15%,20%,0.07); border-radius: 18px; padding: 20px; box-shadow: 0 1px 2px hsla(220,15%,20%,0.04), 0 8px 24px -12px hsla(220,15%,20%,0.10); transition: box-shadow .2s, transform .2s, border-color .2s; }
.rd-tp-card:hover { transform: translateY(-2px); border-color: hsla(207,90%,54%,0.25); box-shadow: 0 2px 4px hsla(220,15%,20%,0.05), 0 16px 36px -14px hsla(220,15%,20%,0.16); }
.rd-tp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.rd-tp-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rd-tp-team-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, hsl(207,90%,54%), hsl(224,76%,48%)); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-tp-team-name { font-size: 15px; font-weight: 650; color: hsl(220,15%,16%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tp-team-sub { font-size: 11px; color: hsl(220,9%,60%); text-transform: uppercase; letter-spacing: 0.04em; }
.rd-tp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rd-tp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.rd-tp-badge-pts { font-weight: 500; opacity: .75; }
.rd-tp-badge-green { background: hsla(145,60%,45%,0.13); color: hsl(145,65%,28%); }
.rd-tp-badge-blue { background: hsla(207,90%,54%,0.12); color: hsl(210,80%,38%); }
.rd-tp-badge-yellow { background: hsla(44,92%,52%,0.16); color: hsl(38,80%,32%); }
.rd-tp-badge-orange { background: hsla(24,92%,54%,0.14); color: hsl(24,85%,36%); }
.rd-tp-badge-red { background: hsla(0,75%,54%,0.12); color: hsl(0,68%,42%); }
.rd-tp-badge-gray { background: hsla(220,15%,20%,0.07); color: hsl(220,9%,48%); }
.rd-tp-card-hero { display: flex; align-items: center; gap: 18px; padding: 14px; background: hsl(216,33%,98%); border: 1px solid hsla(220,15%,20%,0.05); border-radius: 14px; margin-bottom: 16px; }
.rd-tp-ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.rd-tp-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.rd-tp-ring-bg { fill: none; stroke: hsla(220,15%,20%,0.08); stroke-width: 6; }
.rd-tp-ring-fg { fill: none; stroke: hsl(207,90%,54%); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.rd-tp-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: hsl(220,15%,16%); }
.rd-tp-hero-title { font-size: 13px; font-weight: 650; color: hsl(220,15%,20%); margin-bottom: 2px; }
.rd-tp-hero-title i { color: hsl(207,90%,54%); margin-right: 4px; }
.rd-tp-hero-sub { font-size: 12px; color: hsl(220,9%,55%); margin-bottom: 8px; }
.rd-tp-budget { font-size: 12.5px; font-weight: 600; color: hsl(220,15%,25%); }
.rd-tp-budget i { color: hsl(145,60%,38%); margin-right: 4px; }
.rd-tp-metrics { display: grid; grid-template-columns: 1fr; gap: 4px; }
.rd-tp-metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; transition: background .15s; }
.rd-tp-metric:hover { background: hsl(216,33%,97%); }
.rd-tp-metric-label { font-size: 13px; color: hsl(220,9%,42%); display: inline-flex; align-items: center; gap: 8px; }
.rd-tp-metric-label i { width: 16px; text-align: center; color: hsl(220,9%,58%); font-size: 12px; }
.rd-tp-metric-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: hsl(207,90%,44%); }
.rd-tp-metric-link:hover { text-decoration: none; }
.rd-tp-empty { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed hsla(220,15%,20%,0.15); border-radius: 18px; color: hsl(220,9%,55%); }
.rd-tp-empty i { font-size: 34px; margin-bottom: 10px; opacity: .5; display: block; }
@media (max-width: 560px) { .rd-tp-grid { grid-template-columns: 1fr; } .rd-tp-toolbar { width: 100%; } }

/* --- Timesheets productivity dashboard (.rd-ts-*) --- */
.rd-ts-page { padding-top: 8px; }
.rd-ts-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.rd-ts-title { font-size: 21px; font-weight: 700; color: hsl(220,15%,16%); margin: 0 0 2px; letter-spacing: -0.02em; }
.rd-ts-title i { color: hsl(207,90%,54%); margin-right: 6px; }
.rd-ts-subtitle { color: hsl(220,9%,55%); font-size: 13px; margin: 0; }
.rd-ts-switch { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px; background: hsl(207,90%,54%); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, box-shadow .15s; box-shadow: 0 1px 2px hsla(207,90%,40%,0.3); }
.rd-ts-switch:hover, .rd-ts-switch:focus { background: hsl(207,90%,47%); color: #fff; text-decoration: none; }
.rd-ts-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rd-ts-kpi { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid hsla(220,15%,20%,0.07); border-radius: 16px; padding: 15px 17px; box-shadow: 0 1px 2px hsla(220,15%,20%,0.04), 0 8px 24px -12px hsla(220,15%,20%,0.10); }
.rd-ts-kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.rd-ts-ic-blue { background: hsla(207,90%,54%,0.12); color: hsl(207,90%,44%); }
.rd-ts-ic-green { background: hsla(145,60%,45%,0.12); color: hsl(145,60%,34%); }
.rd-ts-ic-purple { background: hsla(262,60%,55%,0.12); color: hsl(262,60%,48%); }
.rd-ts-ic-orange { background: hsla(24,92%,54%,0.13); color: hsl(24,85%,42%); }
.rd-ts-kpi-val { font-size: 18px; font-weight: 700; color: hsl(220,15%,16%); letter-spacing: -0.02em; line-height: 1.2; }
.rd-ts-kpi-sub { font-size: 12px; color: hsl(220,9%,55%); }
.rd-ts-chart-card, .rd-ts-filter-card, .rd-ts-table-card { background: #fff; border: 1px solid hsla(220,15%,20%,0.07); border-radius: 16px; box-shadow: 0 1px 2px hsla(220,15%,20%,0.04), 0 8px 24px -12px hsla(220,15%,20%,0.10); margin-bottom: 16px; }
.rd-ts-chart-card { padding: 18px 20px; }
.rd-ts-card-title { font-size: 13px; font-weight: 650; color: hsl(220,15%,25%); margin-bottom: 12px; }
.rd-ts-card-title i { color: hsl(207,90%,54%); margin-right: 6px; }
.rd-ts-chart-wrap { position: relative; height: 210px; }
.rd-ts-chart-wrap canvas { max-height: 210px; }
.rd-ts-filter-card { padding: 16px 20px; }
.rd-ts-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.rd-ts-filter-item label { display: block; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(220,9%,55%); margin-bottom: 6px; }
.rd-ts-filter-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 1px; }
.rd-ts-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 10px; border: 1px solid hsla(220,15%,20%,0.12); background: #fff; color: hsl(220,9%,40%); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; }
.rd-ts-btn:hover, .rd-ts-btn:focus { border-color: hsl(207,90%,54%); color: hsl(207,90%,44%); text-decoration: none; }
.rd-ts-btn-primary { background: hsl(207,90%,54%); border-color: hsl(207,90%,54%); color: #fff; }
.rd-ts-btn-primary:hover, .rd-ts-btn-primary:focus { background: hsl(207,90%,47%); color: #fff; }
.rd-ts-groupby { margin-top: 10px; }
.rd-ts-table-card { padding: 8px 20px 16px; overflow-x: auto; }
.rd-ts-table-card table.table-timesheets-report { margin-top: 8px; }
.rd-ts-table-card table.dataTable thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(220,9%,52%); font-weight: 650; border-bottom: 1px solid hsla(220,15%,20%,0.09) !important; padding: 12px 12px; background: #fff; }
.rd-ts-table-card table.dataTable tbody td { padding: 13px 12px; font-size: 13.5px; color: hsl(220,15%,25%); border-top: 1px solid hsla(220,15%,20%,0.05); vertical-align: middle; }
.rd-ts-table-card table.dataTable tbody tr:nth-child(even) td { background: hsla(216,33%,97%,0.55); }
.rd-ts-table-card table.dataTable tbody tr:hover td { background: hsla(207,90%,54%,0.05); }
.rd-ts-table-card tfoot td { font-size: 12.5px; color: hsl(220,15%,25%); padding: 12px; border-top: 2px solid hsla(220,15%,20%,0.09); }
.rd-ts-profile { display: inline-flex; align-items: center; gap: 10px; }
.rd-ts-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, hsl(207,90%,54%), hsl(224,76%,48%)); color: #fff; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-ts-profile-txt { display: inline-flex; flex-direction: column; line-height: 1.3; }
.rd-ts-profile-name { font-weight: 650; color: hsl(220,15%,18%); font-size: 13.5px; white-space: nowrap; }
.rd-ts-profile-team { font-size: 11.5px; color: hsl(220,9%,55%); }
@media (max-width: 640px) { .rd-ts-filter-grid { grid-template-columns: 1fr; } }

/* --- Project Filter dashboard (.rd-pf-*) --- */
.rd-pf-page { padding-top: 8px; }
.rd-pf-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.rd-pf-title { font-size: 21px; font-weight: 700; color: hsl(220,15%,16%); margin: 0 0 2px; letter-spacing: -0.02em; }
.rd-pf-title i { color: hsl(207,90%,54%); margin-right: 6px; }
.rd-pf-subtitle { color: hsl(220,9%,55%); font-size: 13px; margin: 0; }
.rd-pf-header-actions { display: flex; gap: 8px; align-items: center; }
.rd-pf-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 10px; border: 1px solid hsla(220,15%,20%,0.12); background: #fff; color: hsl(220,9%,40%); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; white-space: nowrap; }
.rd-pf-btn:hover, .rd-pf-btn:focus { border-color: hsl(207,90%,54%); color: hsl(207,90%,44%); text-decoration: none; }
.rd-pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rd-pf-kpi { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid hsla(220,15%,20%,0.07); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 2px hsla(220,15%,20%,0.04), 0 8px 24px -12px hsla(220,15%,20%,0.10); }
.rd-pf-kpi-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.rd-pf-ic-blue { background: hsla(207,90%,54%,0.12); color: hsl(207,90%,44%); }
.rd-pf-ic-green { background: hsla(145,60%,45%,0.12); color: hsl(145,60%,34%); }
.rd-pf-ic-purple { background: hsla(262,60%,55%,0.12); color: hsl(262,60%,48%); }
.rd-pf-ic-orange { background: hsla(24,92%,54%,0.13); color: hsl(24,85%,42%); }
.rd-pf-ic-slate { background: hsla(220,15%,45%,0.10); color: hsl(220,12%,40%); }
.rd-pf-kpi-val { font-size: 17px; font-weight: 700; color: hsl(220,15%,16%); letter-spacing: -0.02em; line-height: 1.2; }
.rd-pf-kpi-sub { font-size: 12px; color: hsl(220,9%,55%); }
.rd-pf-filter-card, .rd-pf-table-card { background: #fff; border: 1px solid hsla(220,15%,20%,0.07); border-radius: 16px; box-shadow: 0 1px 2px hsla(220,15%,20%,0.04), 0 8px 24px -12px hsla(220,15%,20%,0.10); margin-bottom: 16px; }
.rd-pf-filter-card { padding: 16px 20px; }
.rd-pf-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; align-items: end; }
.rd-pf-filter-item label { display: block; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(220,9%,55%); margin-bottom: 6px; }
.rd-pf-filter-actions { display: flex; align-items: center; padding-bottom: 1px; }
.rd-pf-table-card { padding: 10px 20px 18px; }
.rd-pf-table-card table.dataTable { border-collapse: separate !important; }
.rd-pf-table-card table.dataTable thead th { position: sticky; top: 0; z-index: 2; background: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(220,9%,52%); font-weight: 650; border-bottom: 1px solid hsla(220,15%,20%,0.09) !important; padding: 12px 10px; }
.rd-pf-table-card table.dataTable tbody td { padding: 12px 10px; font-size: 13.5px; color: hsl(220,15%,25%); border-top: 1px solid hsla(220,15%,20%,0.05); vertical-align: middle; }
.rd-pf-table-card table.dataTable tbody tr:not(.rd-pf-child-row) { cursor: pointer; }
.rd-pf-table-card table.dataTable tbody tr:nth-child(even):not(.rd-pf-child-row) td { background: hsla(216,33%,97%,0.55); }
.rd-pf-table-card table.dataTable tbody tr:hover:not(.rd-pf-child-row) td { background: hsla(207,90%,54%,0.05); }
.rd-pf-table-card table.dataTable tbody tr.rd-pf-expanded td { background: hsla(207,90%,54%,0.07); }
.rd-pf-table-card table.dataTable tbody td a { font-weight: 650; color: hsl(214,84%,42%); }
.rd-pf-table-card .label.project-status-1, .rd-pf-table-card .label.project-status-2, .rd-pf-table-card .label.project-status-3, .rd-pf-table-card .label.project-status-4, .rd-pf-table-card .label.project-status-5 { border-radius: 999px !important; padding: 4px 12px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em; display: inline-block; }
.rd-pf-child-cell { padding: 0 !important; }
.rd-pf-child { background: hsl(216,33%,98%); border-left: 3px solid hsl(207,90%,54%); padding: 14px 18px; }
.rd-pf-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; }
.rd-pf-detail-label { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(220,9%,55%); margin-bottom: 2px; }
.rd-pf-detail-val { font-size: 13px; color: hsl(220,15%,22%); word-break: break-word; white-space: pre-line; }
.rd-pf-detail-empty { font-size: 13px; color: hsl(220,9%,55%); }
.rd-pf-cols-dd { position: relative; }
.rd-pf-cols-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; background: #fff; border: 1px solid hsla(220,15%,20%,0.10); border-radius: 12px; box-shadow: 0 12px 32px -8px hsla(220,15%,20%,0.25); padding: 10px 6px; min-width: 240px; max-height: 340px; overflow-y: auto; }
.rd-pf-cols-menu.open { display: block; }
.rd-pf-cols-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; margin: 0; font-size: 13px; font-weight: 500; color: hsl(220,15%,25%); border-radius: 8px; cursor: pointer; }
.rd-pf-cols-item:hover { background: hsla(207,90%,54%,0.07); }
.rd-pf-cols-item input { margin: 0; }
@media (max-width: 640px) { .rd-pf-filter-grid { grid-template-columns: 1fr; } }

/* --- Modern loading spinner (replaces the three blinking squares .dt-loader) --- */
@keyframes rd-spin { to { transform: rotate(360deg); } }
.dt-loader:not(:required) {
    animation: rd-spin 0.7s linear infinite !important;
    background: transparent !important;
    border: 3px solid hsla(207,90%,54%,0.15);
    border-top-color: hsl(207,90%,54%);
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 -20px !important;
    left: 50% !important;
    top: 50% !important;
    text-indent: -9999px;
    box-shadow: 0 0 0 8px hsla(0,0%,100%,0.6);
}
.dt-loader:not(:required)::before,
.dt-loader:not(:required)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* --- Ontime Report (project_report) redesign --- */
.rd-or-page { padding-top: 8px; }
.rd-or-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.rd-or-title { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: #1a1d21; }
.rd-or-title i { color: hsl(207,90%,54%); margin-right: 8px; font-size: 18px; }
.rd-or-subtitle { margin: 0; color: #8a919c; font-size: 13px; }
.rd-or-header-actions { display: flex; gap: 8px; align-items: center; }
.rd-or-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #e3e8ee; color: #3c4257; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: all .15s ease; }
.rd-or-btn:hover, .rd-or-btn:focus { background: hsl(207,90%,97%); border-color: hsl(207,90%,80%); color: hsl(207,90%,44%); text-decoration: none; }
.rd-or-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rd-or-kpi { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #eef0f3; border-radius: 16px; padding: 18px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.rd-or-kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.rd-or-ic-green { background: #e8f7ee; color: #1f9d55; }
.rd-or-ic-orange { background: #fff3e6; color: #e8830c; }
.rd-or-ic-blue { background: hsl(207,90%,95%); color: hsl(207,90%,44%); }
.rd-or-kpi-body { flex: 1; min-width: 0; }
.rd-or-kpi-val { font-size: 22px; font-weight: 700; color: #1a1d21; line-height: 1.1; }
.rd-or-kpi-total { font-size: 14px; font-weight: 600; color: #9aa1ab; }
.rd-or-kpi-sub { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a919c; margin: 4px 0 8px; }
.rd-or-bar { height: 6px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.rd-or-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.rd-or-fill-green { background: #2fbf71; }
.rd-or-fill-orange { background: #f5a623; }
.rd-or-fill-blue { background: hsl(207,90%,54%); }
.rd-or-kpi-pct { margin-top: 6px; font-size: 12px; font-weight: 600; color: #6b7280; }
.rd-or-filter-card { background: #fff; border: 1px solid #eef0f3; border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.rd-or-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.rd-or-filter-item label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a919c; margin-bottom: 5px; }
.rd-or-filter-item .form-control, .rd-or-filter-item .btn-group .btn { border-radius: 10px; }
.rd-or-filter-actions { display: flex; justify-content: flex-end; }
.rd-or-table-card { background: #fff; border: 1px solid #eef0f3; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.rd-or-table-card table.dataTable thead th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a919c; border-bottom: 1px solid #eef0f3 !important; }
.rd-or-table-card table.dataTable tbody td { vertical-align: middle; font-size: 13px; }
.rd-or-table-card table.dataTable tbody tr:hover { background: hsl(207,90%,98%); cursor: pointer; }
.rd-or-table-card table.dataTable tbody tr.rd-or-expanded { background: hsl(207,90%,97%); }
.rd-or-cols-dd { position: relative; }
.rd-or-cols-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 300; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: 10px 6px; min-width: 240px; max-height: 340px; overflow-y: auto; }
.rd-or-cols-menu.open { display: block; }
.rd-or-cols-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0; font-size: 13px; font-weight: 500; color: #3c4257; border-radius: 8px; cursor: pointer; }
.rd-or-cols-item:hover { background: hsl(207,90%,97%); }
.rd-or-cols-item input { margin: 0; }
.rd-or-child-cell { background: #fafbfc !important; padding: 0 !important; }
.rd-or-child { padding: 14px 18px; }
.rd-or-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rd-or-detail-label { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9aa1ab; margin-bottom: 2px; }
.rd-or-detail-val { font-size: 13px; color: #2c3038; word-break: break-word; }
.rd-or-detail-empty { color: #9aa1ab; font-size: 13px; }

/* ===== Staff Performance redesign (.rd-spf-*) ===== */
.rd-spf-page .panel_s { box-shadow: none; }
.rd-spf-header { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 0 18px; }
.rd-spf-title { font-size: 22px; font-weight: 700; color: #1a1f36; margin: 0 0 4px; }
.rd-spf-subtitle { font-size: 13px; color: #697386; margin: 0; }
.rd-spf-filtercard { background: #fff; border: 1px solid #e6e8f0; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(16,24,40,.05); margin-bottom: 16px; }
.rd-spf-filtergrid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.rd-spf-field { min-width: 180px; }
.rd-spf-field-staff { min-width: 260px; }
.rd-spf-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #697386; margin-bottom: 6px; }
.rd-spf-filtercard .form-control, .rd-spf-filtercard .btn.dropdown-toggle { border-radius: 10px !important; border-color: #e6e8f0; box-shadow: none; }
.rd-spf-tablecard { background: #fff; border: 1px solid #e6e8f0; border-radius: 16px; padding: 14px 18px 18px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.rd-spf-tablecard table.dataTable { border-collapse: separate !important; border-spacing: 0; }
.rd-spf-tablecard table.dataTable thead th { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: #697386 !important; background: #f8f9fc !important; border-bottom: 1px solid #e6e8f0 !important; padding: 10px 12px !important; position: sticky; top: 0; z-index: 2; }
.rd-spf-tablecard table.dataTable tbody td { padding: 12px !important; vertical-align: middle; border-top: 1px solid #f0f1f5 !important; border-bottom: 0 !important; font-size: 13px; color: #3c4257; text-align: center; }
.rd-spf-tablecard table.dataTable tbody td:nth-child(2) { text-align: left; font-weight: 600; color: #1a1f36; }
.rd-spf-tablecard table.dataTable tbody tr:hover td { background: hsl(207,90%,97%) !important; }
.rd-spf-tablecard img[src*="custom_rto/uploads"] { display: none !important; }
.rd-spf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.rd-spf-pill b { font-weight: 700; margin-left: 2px; }
.rd-spf-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.rd-spf-g-green  { background: #e8f7ee; color: #1c7c43; }
.rd-spf-g-blue   { background: hsl(207,90%,95%); color: hsl(207,90%,40%); }
.rd-spf-g-teal   { background: #e6f6f6; color: #0e7c7b; }
.rd-spf-g-orange { background: #fff4e5; color: #b25e09; }
.rd-spf-g-red    { background: #fdecec; color: #c0392b; }
.rd-spf-g-gray   { background: #f1f2f6; color: #5a6172; }
.rd-spf-empty { color: #c1c6d0 !important; }
a.rd-spf-link { text-decoration: none; }
a.rd-spf-link .rd-spf-pill { box-shadow: 0 0 0 1px rgba(16,24,40,.06); cursor: pointer; }
a.rd-spf-link:hover .rd-spf-pill { box-shadow: 0 0 0 2px hsla(207,90%,54%,.35); }

/* ===== Leads report redesign (.rd-lr-*) ===== */
.rd-lr-page { padding-top: 8px; }
.rd-lr-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.rd-lr-title { font-size: 21px; font-weight: 700; color: #1a1f36; margin: 0 0 4px; letter-spacing: -0.02em; }
.rd-lr-title i { color: hsl(207,90%,54%); margin-right: 6px; }
.rd-lr-subtitle { font-size: 13px; color: #697386; margin: 0; max-width: 640px; }
.rd-lr-switch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: hsl(207,90%,54%); color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important; box-shadow: 0 2px 6px hsla(207,90%,54%,.35); }
.rd-lr-switch:hover { background: hsl(207,90%,48%); }
.rd-lr-card { background: #fff; border: 1px solid #e6e8f0; border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.05); margin-bottom: 20px; overflow: hidden; }
.rd-lr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f0f1f5; }
.rd-lr-card-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #697386; }
.rd-lr-card-body { padding: 18px; }
.rd-lr-month .bootstrap-select > .btn.dropdown-toggle { border-radius: 10px !important; border-color: #e6e8f0; box-shadow: none; }

/* Roles page: colored icon-chip tones */
.rd-role-tone-amber  { background: #fef3c7 !important; color: #b45309 !important; }
.rd-role-tone-sky    { background: #e0f2fe !important; color: #0369a1 !important; }
.rd-role-tone-indigo { background: #e0e7ff !important; color: #4338ca !important; }
.rd-role-tone-slate  { background: #e2e8f0 !important; color: #475569 !important; }
.rd-role-tone-orange { background: #ffedd5 !important; color: #c2410c !important; }
.rd-role-tone-teal   { background: #ccfbf1 !important; color: #0f766e !important; }
.rd-role-tone-violet { background: #ede9fe !important; color: #6d28d9 !important; }
.rd-role-tone-rose   { background: #ffe4e6 !important; color: #be123c !important; }
.rd-role-tone-green  { background: #dcfce7 !important; color: #15803d !important; }
.rd-role-tone-cyan   { background: #cffafe !important; color: #0e7490 !important; }
.rd-role-tone-blue   { background: #dbeafe !important; color: #1d4ed8 !important; }
.rd-role-tone-pink   { background: #fce7f3 !important; color: #be185d !important; }

/* --- [temporary hidden menu] Setup submenu (moved into main sidebar) whitelist:
   same rules as the old #setup-menu — show only Staff, Staff Performance Settings,
   Roles, Customers > Groups. Others hidden (moved, not deleted). --- */
#rd-setup-submenu > li { display: none !important; }
#rd-setup-submenu > li.menu-item-staff,
#rd-setup-submenu > li.menu-item-staff_performance_settings,
#rd-setup-submenu > li.menu-item-roles,
#rd-setup-submenu > li.menu-item-customers { display: block !important; }
#rd-setup-submenu li.menu-item-customers .nav-third-level > li { display: none !important; }
#rd-setup-submenu li.menu-item-customers .nav-third-level > li.sub-menu-item-customer-groups { display: block !important; }
/* [temporary hidden menu] old separate Setup sidebar hidden (items moved into main sidebar) */
#setup-menu-wrapper { display: none !important; }
/* Third-level indent/styling for the moved Setup children */
#rd-setup-submenu .nav-third-level > li > a { padding-left: 52px !important; font-size: 13px; }
#rd-setup-submenu > li > a { display: flex; align-items: center; gap: 8px; }
#rd-setup-submenu > li > a .fa.arrow { margin-left: auto; }

/* Setup submenu: keep text readable in active/expanded state (theme turns active
   menu anchors white, which is invisible on the light submenu background) */
#rd-setup-submenu > li > a,
#rd-setup-submenu > li > a .sub-menu-text,
#rd-setup-submenu > li > a .menu-icon,
#rd-setup-submenu .nav-third-level > li > a,
#rd-setup-submenu .nav-third-level > li > a .sub-menu-text {
    color: hsl(220,15%,25%) !important;
}
#rd-setup-submenu > li.active > a,
#rd-setup-submenu > li > a[aria-expanded="true"],
#rd-setup-submenu > li > a:hover, #rd-setup-submenu > li > a:focus,
#rd-setup-submenu .nav-third-level > li.active > a,
#rd-setup-submenu .nav-third-level > li > a:hover,
#rd-setup-submenu .nav-third-level > li > a:focus {
    color: hsl(207,90%,44%) !important;
}
#rd-setup-submenu > li.active > a .sub-menu-text,
#rd-setup-submenu > li > a[aria-expanded="true"] .sub-menu-text,
#rd-setup-submenu > li > a:hover .sub-menu-text,
#rd-setup-submenu > li.active > a .menu-icon,
#rd-setup-submenu > li > a[aria-expanded="true"] .menu-icon,
#rd-setup-submenu .nav-third-level > li.active > a .sub-menu-text,
#rd-setup-submenu .nav-third-level > li > a:hover .sub-menu-text {
    color: inherit !important;
}