/* =========================================================
 * UI Polish Overlay  v3  (2026-07-03)
 * Modern admin look on top of AdminLTE (skin-blue class kept
 * as selector hook; all colors overridden here).
 * Theme: Milky #FFFDF1 + Mantis #59C749. No layout/workflow change.
 * ========================================================= */

:root {
    --pmt-primary:        #59C749;
    --pmt-primary-dark:   #43a936;
    --pmt-primary-light:  #74d566;
    --pmt-primary-soft:   #e6f7e2;
    --pmt-bg:             #FFFDF1;
    --pmt-card-bg:        #ffffff;
    --pmt-text:           #1f2a1e;
    --pmt-text-soft:      #6b7466;
    --pmt-border:         #e6e4d6;
    --pmt-shadow-sm:      0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
    --pmt-shadow-md:      0 4px 12px rgba(15, 23, 42, .06);
    --pmt-shadow-lg:      0 10px 30px rgba(15, 23, 42, .08);
    --pmt-radius:         6px;
}

/* ---------- Base ---------- */
html, body {
    background-color: var(--pmt-bg) !important;
}
body, .content-wrapper, .main-footer, .right-side {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--pmt-text) !important;
    font-size: 14px;
    letter-spacing: 0.1px;
}
.content-wrapper { background-color: var(--pmt-bg) !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit !important;
    color: var(--pmt-text);
    font-weight: 600;
}

/* ---------- Top header ---------- */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
    background-color: var(--pmt-primary) !important;
    border-bottom: none !important;
    transition: background-color .2s ease;
}
.skin-blue .main-header .logo:hover {
    background-color: var(--pmt-primary-dark) !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--pmt-primary-dark) !important;
}
.main-header .logo {
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ---------- Sidebar (light) ----------
 * Light milky sidebar with green accents, so the sidebar and page form one
 * continuous light surface. A right border + soft shadow keep it separated
 * from the content area now that they share a background tone. */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: var(--pmt-card-bg) !important;
    border-right: 1px solid var(--pmt-border);
    box-shadow: var(--pmt-shadow-sm);
}
/* Sidebar scrolls independently: the menu is long enough to overflow.
 * AdminLTE draws .main-sidebar position:absolute, so it scrolled away with
 * the page and a long open section pushed the rest of the menu off screen.
 * Pinned to the window instead, with the menu scrolling inside its own box
 * under the 50px top bar.
 *
 * Not in collapsed (sidebar-mini) mode: there the icons' hover fly-out
 * hangs outside the sidebar, and overflow:auto would clip it. */
.skin-blue .main-sidebar .sidebar {
    padding-bottom: 24px;
}
body.skin-blue:not(.sidebar-collapse) .main-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}
body.skin-blue:not(.sidebar-collapse) .main-sidebar .sidebar {
    /* !important because AdminLTE's Layout.fixSidebar() writes an inline
       height:auto onto .sidebar on load, on resize and on every section
       opened or closed - which let the box grow to the whole menu's height,
       past the bottom of the window, so the end of it could not be reached. */
    height: calc(100vh - 50px) !important;
    /* scroll, not auto: the bar stays in sight so people can see the menu
       goes on below, instead of it appearing only once a section is open. */
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Firefox only. Chrome 121+ honours these too, and once either is set it
   IGNORES every ::-webkit-scrollbar rule below - which is what left the
   menu with a pale, arrowless hairline nobody could see. */
@supports (-moz-appearance: none) {
    body.skin-blue:not(.sidebar-collapse) .main-sidebar .sidebar {
        scrollbar-width: auto;
        scrollbar-color: #a3ab97 #efeee2;
    }
}
/* On a phone AdminLTE stacks the logo above the navbar: 100px of top bar. */
@media (max-width: 767px) {
    body.skin-blue:not(.sidebar-collapse) .main-sidebar .sidebar {
        height: calc(100vh - 100px) !important;
    }
}

.skin-blue .sidebar-menu > li > a {
    /* right padding reserves room for .pull-right-container, which AdminLTE
       positions absolutely - without it a long label runs underneath the
       chevron (e.g. "PM - Followup / Loginotplist"). */
    padding: 11px 34px 11px 18px;
    position: relative;
    color: var(--pmt-text) !important;
    border-left: 3px solid transparent;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, border-left-color .15s ease;
}
.skin-blue .sidebar-menu > li > a > .pull-right-container {
    right: 12px;
}
.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > i {
    width: 20px;
    text-align: center;
    margin-right: 6px;
    color: var(--pmt-text-soft);
    transition: color .15s ease;
}
.skin-blue .sidebar-menu > li:hover > a {
    background-color: var(--pmt-primary-soft) !important;
    color: var(--pmt-primary-dark) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    background-color: var(--pmt-primary-soft) !important;
    color: var(--pmt-primary-dark) !important;
    border-left-color: var(--pmt-primary) !important;
    font-weight: 600;
}
.skin-blue .sidebar-menu > li:hover > a > i,
.skin-blue .sidebar-menu > li.active > a > i,
.skin-blue .sidebar-menu > li.menu-open > a > i {
    color: var(--pmt-primary-dark) !important;
}
/* Chevron rotates when a treeview is open */
.skin-blue .sidebar-menu .treeview > a .fa-angle-left {
    transition: transform .2s ease;
}
.skin-blue .sidebar-menu .treeview.menu-open > a .fa-angle-left {
    transform: rotate(-90deg);
}

.skin-blue .sidebar-menu > li.header {
    background-color: transparent !important;
    color: var(--pmt-text-soft) !important;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    padding: 10px 18px 6px;     /* was 18px on top - the search box above now sets the gap */
}

/* ---- Submenus ---- */
.skin-blue .treeview-menu {
    background-color: #faf9f0 !important;
    border-left: 3px solid var(--pmt-primary-soft);
}
.skin-blue .treeview-menu > li > a {
    color: var(--pmt-text-soft) !important;
    padding: 8px 5px 8px 42px;
    font-size: 13.5px;
    transition: color .15s ease, background-color .15s ease;
}
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
    color: var(--pmt-primary-dark) !important;
    background-color: var(--pmt-primary-soft) !important;
}

/* ---- Nested submenus: main menu -> group -> item ----
 * Long menus are split one level deeper, so the group row reads as a heading
 * and its children step further in. Without this the two levels land on the
 * same indent and the hierarchy is invisible. */
.skin-blue .treeview-menu .treeview > a {
    color: var(--pmt-text) !important;
    font-weight: 600;
}
.skin-blue .treeview-menu .treeview.menu-open > a,
.skin-blue .treeview-menu .treeview > a:hover {
    color: var(--pmt-primary-dark) !important;
}
.skin-blue .treeview-menu .treeview-menu {
    background-color: #f4f2e6 !important;
    border-left: none;
}
/* Belt-and-braces for the overlap: AdminLTE sets overflow:visible on an open
 * treeview, so any leftover inline height from an animation would let nested
 * items paint over the menus below. Forcing auto keeps every level in flow. */
.skin-blue .sidebar-menu .treeview-menu {
    height: auto !important;
}
.skin-blue .treeview-menu .treeview-menu > li > a {
    padding-left: 62px;
    font-size: 13px;
}

/* ---- Long labels must not overlap the chevron ----
 * Submenu group rows carry a chevron too, so they need the same clearance. */
.skin-blue .treeview-menu > li > a {
    position: relative;
    padding-right: 30px;
}
.skin-blue .treeview-menu .treeview > a > .pull-right-container {
    right: 10px;
}
/* Wrap rather than overflow. Scoped to the expanded sidebar: in collapsed
 * (sidebar-mini) mode AdminLTE depends on nowrap for its hover fly-out. */
body.skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a,
body.skin-blue:not(.sidebar-collapse) .treeview-menu > li > a {
    white-space: normal;
    line-height: 1.35;
}
/* THE ICON GETS ITS OWN COLUMN, and the label gets the rest.
 *
 * The label is an inline-block, and an inline-block cannot straddle two
 * lines: one too wide to sit BESIDE the icon dropped whole to the next line
 * and left the icon stranded on its own above it. "PM - Received Interest"
 * was the single label long enough to do it, which is why it looked like a
 * one-off rather than a layout that could not hold.
 *
 * Capping the label's width does not fix it - a narrower box that still does
 * not fit in what is left of the line drops just the same - and flex on the
 * anchor is out, because the chevron beside these labels is floated and
 * position:relative with left:180px !important, and flex ignores float.
 *
 * So the icon comes out of the flow and sits in the padding. The label then
 * has the full content width to wrap inside, and both lines of a two-line
 * label align with each other instead of one of them starting under the
 * icon. Nothing here depends on how long a label is, so the next long one
 * needs no thought.
 */
body.skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a {
    padding-left: 44px;
}
body.skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a > .fa,
body.skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a > i {
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -9px;
    margin-right: 0;
}
body.skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a > span:first-of-type {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* ---- User panel ---- */
.skin-blue .user-panel {
    /* compact (12 Oct 2026): the menu search sits right under it, no line between */
    padding: 8px 12px 6px;
}
.skin-blue .user-panel > .image > img { width: 38px; max-width: 38px; height: 38px; }
.skin-blue .user-panel > .info { padding: 4px 5px 4px 12px; line-height: 30px; }
.skin-blue .user-panel > .info > p { margin: 0; }
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
    color: var(--pmt-text) !important;
    font-weight: 600;
    text-shadow: none !important;
}

/* ---- The menu's scrollbar: visible, with up / down arrows ----
 * Wide enough to grab, a thumb dark enough to see on the cream sidebar, and
 * an arrow button at each end that steps the menu up or down. */
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar { width: 12px; }
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-track {
    background: #efeee2;
    border-left: 1px solid #e2e0d0;
}
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background-color: #a3ab97;
    border-radius: 6px;
    border: 2px solid #efeee2;
}
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--pmt-primary, #4caf50);
}
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-button:single-button {
    display: block;
    height: 16px;
    background-color: #e2e0d0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-button:single-button:hover {
    background-color: #cfd0bd;
}
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1 L7.5 6.5 H0.5 Z' fill='%23555'/%3E%3C/svg%3E");
}
.skin-blue .main-sidebar .sidebar::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 L7.5 1.5 H0.5 Z' fill='%23555'/%3E%3C/svg%3E");
}

/* ---------- Page header / breadcrumbs ---------- */
.content-header {
    padding: 20px 20px 0 !important;
}
.content-header > h1 {
    color: var(--pmt-text);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 4px;
}
.content-header > h1 small {
    color: var(--pmt-text-soft);
    font-size: 13px;
}
.breadcrumb {
    background: transparent;
    padding: 0 0 12px;
    margin: 0;
    font-size: 12.5px;
    color: var(--pmt-text-soft);
}
.breadcrumb > li > a {
    color: var(--pmt-primary);
}

/* ---------- Boxes / Cards ---------- */
.box {
    background: var(--pmt-card-bg);
    border: 1px solid var(--pmt-border);
    border-top: 1px solid var(--pmt-border);
    border-radius: var(--pmt-radius);
    box-shadow: var(--pmt-shadow-sm);
    margin-bottom: 18px;
}
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
    border-top: 3px solid var(--pmt-primary);
}
.box.box-success { border-top-color: #10b981; }
.box.box-warning { border-top-color: #f59e0b; }
.box.box-danger  { border-top-color: #ef4444; }
.box.box-info    { border-top-color: #06b6d4; }

.box-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--pmt-border);
}
.box-header .box-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
}
.box-body { padding: 18px; }
.box-footer {
    background: #f8fafc;
    border-top: 1px solid var(--pmt-border);
    border-bottom-left-radius: var(--pmt-radius);
    border-bottom-right-radius: var(--pmt-radius);
    padding: 12px 18px;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--pmt-radius);
    font-weight: 500;
    padding: 7px 16px;
    font-size: 13.5px;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    border-width: 1px;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background-color: var(--pmt-primary);
    border-color: var(--pmt-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--pmt-primary-dark);
    border-color: var(--pmt-primary-dark);
    color: #fff;
}
.btn-success { background-color: #10b981; border-color: #10b981; }
.btn-success:hover { background-color: #059669; border-color: #059669; }
.btn-danger  { background-color: #ef4444; border-color: #ef4444; }
.btn-danger:hover { background-color: #dc2626; border-color: #dc2626; }
.btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-warning:hover { background-color: #d97706; border-color: #d97706; color: #fff; }
.btn-info    { background-color: #06b6d4; border-color: #06b6d4; }
.btn-default {
    background-color: #fff;
    border-color: var(--pmt-border);
    color: var(--pmt-text);
}
.btn-default:hover {
    background-color: #f5f4e8;
    border-color: #d4d2c2;
}
.btn:focus, .btn.active.focus, .btn.focus {
    box-shadow: 0 0 0 3px rgba(89, 199, 73, .3);
    outline: none;
}

/* ---------- Tables ---------- */
.table {
    background: #fff;
    border-radius: var(--pmt-radius);
    overflow: hidden;
}
.table > thead > tr > th {
    background-color: #faf9ef;
    color: var(--pmt-text);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--pmt-border);
    padding: 12px 14px;
    vertical-align: middle;
}
.table > tbody > tr > td {
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
    vertical-align: middle;
    color: var(--pmt-text);
}
.table > tbody > tr:hover > td {
    background-color: #f2faee !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfaf0;
}

/* ---------- Form controls ---------- */
.form-control {
    border-radius: var(--pmt-radius);
    border-color: var(--pmt-border);
    box-shadow: none;
    padding: 7px 12px;
    font-size: 13.5px;
    color: var(--pmt-text);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    height: 36px;
}
.form-control:focus {
    border-color: var(--pmt-primary);
    box-shadow: 0 0 0 3px rgba(89, 199, 73, .25);
}
label {
    font-weight: 500;
    color: var(--pmt-text);
    font-size: 13px;
    margin-bottom: 4px;
}
.input-group-addon {
    background-color: #faf9ef;
    border-color: var(--pmt-border);
    color: var(--pmt-text-soft);
}

/* ---------- Modals ---------- */
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: var(--pmt-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--pmt-border);
    padding: 16px 20px;
}
.modal-header .modal-title {
    font-weight: 600;
    color: var(--pmt-text);
}
.modal-footer {
    border-top: 1px solid var(--pmt-border);
    padding: 14px 20px;
}
.modal-backdrop.in { opacity: .45; }

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--pmt-radius);
    border: 1px solid transparent;
    padding: 12px 16px;
    font-size: 13.5px;
}
.alert-success { background-color: #ecfdf5; border-color: #bbf7d0; color: #065f46; }
.alert-info    { background-color: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.alert-warning { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger  { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    color: var(--pmt-primary);
    border-color: var(--pmt-border);
    border-radius: 4px;
    margin: 0 2px;
    padding: 6px 12px;
}
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--pmt-primary);
    border-color: var(--pmt-primary);
    color: #fff;
}
.pagination > li > a:hover {
    background-color: var(--pmt-primary-soft);
    border-color: var(--pmt-primary-soft);
    color: var(--pmt-primary-dark);
}

/* ---------- Labels / badges ---------- */
.label, .badge {
    font-weight: 500;
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 12px;
    letter-spacing: 0.2px;
}
.label-primary, .badge-primary { background-color: var(--pmt-primary); }
.label-success, .badge-success { background-color: #10b981; }
.label-danger,  .badge-danger  { background-color: #ef4444; }
.label-warning, .badge-warning { background-color: #f59e0b; }
.label-info,    .badge-info    { background-color: #06b6d4; }

/* ---------- Footer ---------- */
.main-footer {
    background-color: #fff;
    border-top: 1px solid var(--pmt-border);
    color: var(--pmt-text-soft);
    font-size: 12.5px;
    padding: 12px 20px;
}

/* ---------- Helpers ---------- */
.text-blue { color: var(--pmt-primary) !important; }
.bg-blue   { background-color: var(--pmt-primary) !important; color: #fff; }

/* ---------- Login / loading ---------- */
.login-box, .login-page .login-box-body {
    border-radius: 8px;
    box-shadow: var(--pmt-shadow-lg);
    border: 1px solid var(--pmt-border);
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd0bd; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #a3ab97; }
::-webkit-scrollbar-track { background: #f3f2e5; }

/* ---------- Tooltip ---------- */
.tooltip-inner {
    background-color: var(--pmt-text);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--pmt-text); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--pmt-text); }

/* ---------- Member list cards (specific to this app) ---------- */
.box .info-box, .small-box {
    border-radius: var(--pmt-radius);
    box-shadow: var(--pmt-shadow-sm);
}
.small-box { transition: transform .15s ease, box-shadow .15s ease; }
.small-box:hover { transform: translateY(-2px); box-shadow: var(--pmt-shadow-md); }

/* ---------- Spacing tweaks ---------- */
.content { padding: 16px 20px; }
.row > [class*="col-"] { margin-bottom: 0; }

/* =========================================================
 * Overall Followup List — ending a follow-up
 *
 * Close and Reschedule sit next to Edit in the action cell, so the three
 * need to read as three separate things at a glance rather than as one
 * run-on link. Close is the destructive-looking one of the three because
 * it is the one that takes the row off the list.
 * ========================================================= */

.afl-actions a {
    display: inline-block;
    margin: 0 4px;
    white-space: nowrap;
    font-size: 13px;
}
.afl-actions a + a { border-left: 1px solid var(--pmt-border); padding-left: 10px; }
.afl-actions .afl-close-link { color: #c0392b; }
.afl-actions .afl-close-link:hover { color: #922b21; }

/* The row being worked, beside the dialog heading. */
.afl-who {
    font-size: 14px;
    font-weight: 400;
    color: var(--pmt-text-soft);
    margin-left: 8px;
}

/* Four endings as buttons rather than a dropdown: this is the one control
   on the page that finishes a lead, and which one was picked should be
   readable without opening anything. */
.afl-outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.afl-outcomes .afl-outcome {
    flex: 1 1 45%;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--pmt-radius);
    border: 1px solid var(--pmt-border);
    background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.afl-outcomes .afl-outcome i { width: 18px; color: var(--pmt-text-soft); }
.afl-outcomes .afl-outcome:hover { border-color: var(--pmt-primary); background: var(--pmt-primary-soft); }
.afl-outcomes .afl-outcome.active {
    border-color: var(--pmt-primary-dark);
    background: var(--pmt-primary-soft);
    box-shadow: inset 0 0 0 1px var(--pmt-primary-dark);
    font-weight: 600;
}
.afl-outcomes .afl-outcome.active i { color: var(--pmt-primary-dark); }

/* Same idea for the day, where the common answers are a handful of
   intervals and the date box is the way out of them. */
.afl-whens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.afl-whens .afl-when { border-radius: 14px; padding: 4px 12px; }
.afl-whens .afl-when.active {
    background: var(--pmt-primary);
    border-color: var(--pmt-primary-dark);
    color: #fff;
}

/* How a closed row ended, in the Closed table. */
.afl-outcome-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    background: #eceff1;
    color: #55606a;
}
.afl-out-paid           { background: #e6f7e2; color: #2f7d20; }
.afl-out-not-interested { background: #fdecea; color: #a5352a; }
.afl-out-fake           { background: #fdf1dd; color: #96650f; }
.afl-out-closed         { background: #eceff1; color: #55606a; }

/* The per-type hint under the follow-up dialogs, and the number being worked
   beside their headings. Both classes have been in the shared modal markup
   since it was extracted, with no rule behind them — the hint read as another
   line of body text rather than as a note about the row. */
.fu-note {
    color: var(--pmt-text-soft);
    font-size: 13px;
    line-height: 1.5;
    margin: 2px 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--pmt-border);
}
.fu-note:empty { display: none; }
.fu-mobile {
    font-size: 14px;
    font-weight: 400;
    color: var(--pmt-text-soft);
    margin-left: 8px;
}

/* Who already holds the follow-up the dialog was opened on. Empty on the
   pages that only ever create one, and an empty box is no box. */
.fu-owner {
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    border-radius: var(--pmt-radius);
    color: #8a6d3b;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
    padding: 8px 12px;
}
.fu-owner:empty { display: none; }

/* =========================================================
 * The reason picker — a text box with a list behind it
 *
 * Replaces the <datalist> the follow-up dialogs, the Close dialog and the
 * Calling Panel all used. A datalist only ever offers the options MATCHING
 * what is already typed, so a reason picked for one follow-up type filtered
 * out every reason belonging to the next one: the list came up empty on the
 * second change, on a type with five things to say. This one always shows
 * what the chosen type offers. See js/followupmodal.js.
 * ========================================================= */
.pmt-combo { position: relative; }
.pmt-combo > input { padding-right: 30px; }
.pmt-combo-caret {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 28px;
    line-height: 32px;
    text-align: center;
    color: #8a9199;
    cursor: pointer;
    border-radius: 0 var(--pmt-radius) var(--pmt-radius) 0;
}
.pmt-combo-caret:hover { color: var(--pmt-primary); background: #f2f5f7; }
.pmt-combo.open .pmt-combo-caret i { transform: rotate(180deg); }
.pmt-combo-list {
    display: none;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 230px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--pmt-border);
    border-radius: var(--pmt-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.pmt-combo.open .pmt-combo-list { display: block; }
.pmt-combo-opt {
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
}
.pmt-combo-opt + .pmt-combo-opt { border-top: 1px solid #f0f2f4; }
.pmt-combo-opt:hover,
.pmt-combo-opt.on { background: #eaf3f9; color: #1b5e7e; }

/* =========================================================
 * Mobile numbers, everywhere on the panel
 *
 * js/followupquick.js turns every cell holding nothing but a number into one
 * of these, then colours it by whether the number has a follow-up:
 *
 *   red   - nobody has worked this number
 *   green - a follow-up row exists for it
 *
 * Colour rather than a badge, because a column of fifty numbers is where
 * this has to be read: an icon repeated fifty times is noise, while a column
 * of red with four green in it can be scanned in one look. Numbers still
 * being asked about carry neither class and stay the surrounding text
 * colour - see the note on pmq-new in followupquick.js for why they must not
 * start red.
 *
 * The dotted underline, and only the underline, marks the ones that open the
 * follow-up dialog. Hover therefore moves the UNDERLINE and leaves the text
 * colour alone: colour is carrying meaning here, and a hover that repainted
 * it blue would erase the answer at the moment of pointing at it.
 * ========================================================= */
.pmq-num {
    color: inherit;
    border-bottom: 1px dotted #9fb0bd;
    text-decoration: none;
    cursor: pointer;
}
.pmq-num:hover,
.pmq-num:focus {
    border-bottom-color: currentColor;
    text-decoration: none;
}
/* Drawn for roles without the Followup List permission: same colour, but it
   is a <span> that opens nothing, so nothing about it should invite a click. */
.pmq-num.pmq-flat {
    border-bottom: 0;
    cursor: inherit;
}
/* Answered: no follow-up on this number. */
.pmq-num.pmq-new { color: #c0392b; }
/* Answered: this number has one. */
.pmq-num.pmq-has {
    color: #2f7d20;
    font-weight: 600;
}
.pmq-num.pmq-new:hover,
.pmq-num.pmq-new:focus { color: #c0392b; }
.pmq-num.pmq-has:hover,
.pmq-num.pmq-has:focus { color: #2f7d20; }

/* =========================================================
 * Claim history — what has already been asked for
 *
 * Replaces the claim boxes that used to sit on the work pages. Claiming
 * happens on Settlement; these pages report on it.
 * ========================================================= */
.ch-dash { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ch-tile {
    flex: 1 1 180px; background: #fff; border: 1px solid var(--pmt-border);
    border-left: 3px solid var(--pmt-primary); border-radius: var(--pmt-radius);
    padding: 10px 14px;
}
.ch-tile .ch-k { color: var(--pmt-text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ch-tile .ch-v { font-size: 19px; font-weight: 700; margin-top: 2px; }
.ch-table { font-size: 13px; }
.ch-table td, .ch-table th { vertical-align: middle !important; }
.ch-table .ch-parts { font-size: 12px; color: var(--pmt-text-soft); }
.ch-table .ch-amt { color: var(--pmt-text); font-weight: 600; }
.ch-table .ch-sub { font-size: 11px; color: var(--pmt-text-soft); margin-top: 2px; }

/* Claimed money on the A1/A2 sheet reads quieter than claimable: one is a
   record, the other a number to act on. */
.a1-detail-done td { opacity: .8; }

/* Points column on the Free Users sheet, matching the Business Sheet. */
.fu-sheet td.p, .fu-sheet th:nth-child(10) { text-align: right; }
tr.fu-total td { font-weight: 700; border-top: 2px solid var(--pmt-border); background: #fafaf5; }

/* A1/A2 sheet, now a day at a time. The day heading has to read as an outer
   band or the two shift bands under it look like siblings of it. */
.a1-sheet tr.a1-day td {
    background: var(--pmt-primary-soft);
    border-top: 2px solid var(--pmt-primary);
    font-weight: 700; letter-spacing: .02em; color: var(--pmt-primary-dark);
}
.a1-sheet tr.a1-daytot td { background: #f2f4ef; font-weight: 700; }

/* Incentive column on the Other Leads list, right-aligned like every other
   money column in the panel. */
td.ol-inc { text-align: right; white-space: nowrap; font-weight: 600; }
.ol-inc-tot { color: var(--pmt-primary-dark); }

/* A1/A2 shown side by side rather than as bands. The two shift columns are
   tinted so the eye reads them as one pair feeding the total beside them. */
.a1-sheet th.a1-shiftcol, .a1-sheet td.a1-shiftcol { background: #f7f9f4; }
.a1-sheet th.a1-shiftcol small { font-weight: 400; color: #8a9199; font-size: 10px; }
.a1-sheet .a1-out { font-size: 10px; color: #96650f; white-space: nowrap; }

/* Other Leads filter bar. One wrapping line of controls instead of a 6-column
   grid that pushed the buttons onto a row of their own.
   align-items is START, not END: with END the shorter items were pulled down
   and their selects clipped against the box. */
.ol-filterbox .box-body { padding: 12px 14px; }
.ol-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.ol-filters .ol-f { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 132px; }
.ol-filters .ol-f > label {
    margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--pmt-text-soft); line-height: 1.4;
}
/* One height for every control on the bar. A select left to size itself
   against a smaller input class is what was cutting its text in half. */
.ol-filters .form-control {
    height: 34px; line-height: 1.4; padding: 6px 10px; font-size: 13px;
}
.ol-filters .ol-f-go { flex-direction: row; gap: 6px; min-width: 0; padding-top: 19px; }
.ol-filters .ol-f-go .btn { height: 34px; }
.ol-filters .ol-active {
    display: flex; align-items: center; gap: 5px; margin: 0; padding-top: 27px;
    font-weight: 400; font-size: 12px; color: var(--pmt-text-soft); white-space: nowrap;
}
.ol-filters .ol-active input { margin: 0; }

/* Bootstrap 3 only gives .table-responsive a scrollbar below a breakpoint, so
   on a desktop a wide table pushed the whole PAGE sideways instead of
   scrolling inside its own box. */
.content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The three status buttons stacked two-and-one and forced a 210px column.
   On one line they need far less, and the row stops being three deep. */
td .ol-status { display: inline-flex; flex-wrap: nowrap; }
td .ol-status .btn { white-space: nowrap; }

/* A decided lead. Reads as a stated fact rather than a control you failed to
   click - the buttons were the whole reason it looked changeable. */
.ol-locked { font-size: 12px; padding: 5px 10px; display: inline-block; cursor: default; }

/* Which shift an outcome came from, under the figure itself. Two more columns
   per metric would have taken this table past a dozen. */
.a1-sheet .a1-split {
    font-size: 10px; color: var(--pmt-text-soft); font-weight: 400;
    margin-top: 2px; white-space: nowrap;
}

/* A number captured twice. Says so, rather than showing a bare Rs 0.00 that
   reads as a pricing bug. */
.ol-dupe {
    font-size: 11px; font-weight: 600; color: #96650f;
    background: #fdf1dd; border-radius: 10px; padding: 2px 8px; white-space: nowrap;
}

/* Settlement: what the balance is made of. */
.st-src td, .st-src th { vertical-align: middle !important; font-size: 13px; }
.st-src .st-src-nil td { color: #b3b8ae; }
.st-src .st-src-tot td { font-weight: 700; border-top: 2px solid var(--pmt-border); background: #fafaf5; }

/* One row per shift. The tag beside the name is what tells the two apart, so
   it has to read at a glance without shouting over the name. */
.a1-sheet .a1-shifttag {
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: #eceff1; color: #55606a; border-radius: 3px;
    padding: 1px 6px; margin-left: 6px;
}
.a1-sheet .a1-shiftrow td { color: var(--pmt-text); }
.a1-sheet tr.a1-sub td { background: #f7f9f4; font-weight: 600; }

/* A1/A2 sheet: separate or together. The shift rows fold into the day-total
   line they feed, so a fortnight reads as one line per person per day until
   somebody asks a total how it got there. The control sits on the total
   because that is the row still standing once the halves are hidden. */
.a1-sheet a.a1-tog {
    float: left; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: #55606a; background: #eceff1; border-radius: 3px;
    padding: 1px 7px; text-decoration: none; white-space: nowrap;
}
.a1-sheet a.a1-tog:hover, .a1-sheet a.a1-tog:focus {
    background: #dfe4e7; color: var(--pmt-primary-dark); text-decoration: none;
}
.a1-sheet a.a1-tog.open { background: var(--pmt-primary-soft); color: var(--pmt-primary-dark); }
.a1-sheet a.a1-tog i { margin-right: 4px; }
/* The whole-sheet pair, on the box header beside the row count. */
.a1-viewtoggle { margin-top: -2px; }
.a1-viewtoggle .btn.active {
    background: var(--pmt-primary-soft); border-color: var(--pmt-primary);
    color: var(--pmt-primary-dark); box-shadow: none;
}

/* The Point System rate card, moved off the Calling Panel and onto Points
   Overview. Condensed the same way it was there — it is reference sitting
   under a report, not the report. */
.po-rules-box table { font-size: 12px; }
.po-rules-box th { font-weight: 600; color: var(--pmt-text-soft); border-top: 0 !important; }
.po-rules-box td, .po-rules-box th { padding: 4px 6px !important; }
.po-rules-box td i { color: var(--pmt-text-soft); font-style: italic; }

/* ---------- Sidebar menu search (js/menuSearch.js, layouts/main.php) ----------
 * A box above the menu that finds any page in it. Sticky: .sidebar is the box
 * the menu scrolls in, so the search stays in sight while the menu scrolls.
 * Hidden with the sidebar folded to icons (no room for it there). */
.pm-msearch {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 4px 12px;          /* even top and bottom: the icons inside are centred at 50% */
    background: var(--pmt-card-bg);
    transition: box-shadow .15s ease, padding .15s ease;
}
/* scrolled under it (menuSearch.js): a soft shadow instead of a line */
.pm-msearch.stuck { padding: 8px 12px; box-shadow: 0 3px 8px -4px rgba(15, 23, 42, .18); }
.pm-msearch > .fa-search {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pmt-text-soft);
    font-size: 13px;
    pointer-events: none;
}
.pm-msearch input {
    width: 100%;
    height: 34px;
    padding: 0 58px 0 35px;
    border: 1px solid var(--pmt-border);
    border-radius: 18px;
    background: #fafaf4;
    color: var(--pmt-text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pm-msearch input::placeholder { color: #9aa294; }
.pm-msearch input:focus {
    border-color: var(--pmt-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(89, 199, 73, .18);
}
.pm-msearch-key {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 7px;
    border: 1px solid var(--pmt-border);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    color: var(--pmt-text-soft);
    font-size: 11px;
    font-family: inherit;
    pointer-events: none;
}
.pm-msearch input:focus ~ .pm-msearch-key,
.pm-msearch-x:not([hidden]) ~ .pm-msearch-key { display: none; }
.pm-msearch-x {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pmt-text-soft);
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}
.pm-msearch-x:hover, .pm-msearch-x:focus { background: var(--pmt-primary-soft); color: var(--pmt-text); outline: none; }
.pm-msearch-x[hidden] { display: none; }
.pm-msearch-list {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% - 6px);
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--pmt-border);
    border-radius: 10px;
    box-shadow: var(--pmt-shadow-lg);
}
.pm-msearch-list[hidden] { display: none; }
.pm-msearch-list a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--pmt-text) !important;
    text-decoration: none !important;
}
.pm-msearch-list a > .fa { flex: 0 0 16px; margin-top: 3px; color: var(--pmt-primary-dark); text-align: center; }
.pm-msearch-list a.hi { background: var(--pmt-primary-soft); }
.pm-msearch-list .t { flex: 1 1 auto; min-width: 0; }
.pm-msearch-list .t b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.35; }
.pm-msearch-list .t mark { padding: 0; background: none; color: var(--pmt-primary-dark); font-weight: 700; }
.pm-msearch-list .p { display: block; margin-top: 1px; color: var(--pmt-text-soft); font-size: 11.5px; line-height: 1.35; }
.pm-msearch-list .x { flex: 0 0 auto; margin-top: 4px; font-size: 11px; color: var(--pmt-text-soft); }
.pm-msearch-list .now {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--pmt-primary-soft);
    color: var(--pmt-primary-dark);
    font-size: 10.5px;
    font-weight: 600;
}
.pm-msearch-list .none { padding: 10px; color: var(--pmt-text-soft); font-size: 13px; }
body.sidebar-collapse .pm-msearch { display: none; }
@media (max-width: 767px) {
    body.sidebar-collapse .pm-msearch { display: block; }   /* a phone's sidebar slides in whole */
}