/* -----------------------------------------------------------------------
   PIA admin UI - grouped header nav + the property page layout.

   This lives in a real stylesheet loaded from <head> rather than in a
   <style> tag inside the page. Vue mounts on #app and its template
   compiler strips <style> elements found inside the mount element, so
   any CSS written into a blade body is silently thrown away.
   ----------------------------------------------------------------------- */

    /* --- grouped admin nav --- */
    #admin-nav { padding: 0 14px !important; min-height: 52px; flex-wrap: nowrap; }
    #admin-nav #main-brand { color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap;
        padding-right: 18px; margin-right: 0; }
    #admin-nav-ul { min-width: 0 !important; flex-wrap: nowrap; }
    #admin-nav-ul > .nav-item > .nav-link { color: rgba(255,255,255,.86); font-size: 13.5px;
        padding: 15px 13px; white-space: nowrap; border-bottom: 3px solid transparent; }
    #admin-nav-ul > .nav-item > .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
    #admin-nav-ul > .nav-item > .nav-link.active-page { color: #fff; border-bottom-color: #00ccda; font-weight: 500; }
    #admin-nav-ul .pia-caret { font-size: 9px; opacity: .7; margin-left: 5px; }

    #admin-nav-ul .pia-group { position: relative; }
    #admin-nav-ul .pia-group > .pia-drop { display: none; position: absolute; top: 100%; left: 0;
        background: #fff; min-width: 234px; padding: 6px 0; z-index: 1200;
        border-radius: 0 0 8px 8px; box-shadow: 0 10px 26px rgba(11,29,54,.22); }
    #admin-nav-ul .pia-group:hover > .pia-drop, #admin-nav-ul .pia-group:focus-within > .pia-drop { display: block; }
    #admin-nav-ul .pia-drop a { display: flex; justify-content: space-between; align-items: center;
        gap: 12px; padding: 8px 16px; color: #28313d !important; font-size: 13.5px; text-decoration: none; }
    #admin-nav-ul .pia-drop a:hover, #admin-nav-ul .pia-drop a:focus { background: #f2f6fa; color: #003e6c !important; }
    #admin-nav-ul .pia-drop a.is-here { color: #003e6c !important; font-weight: 600; background: #f2f6fa; }
    #admin-nav-ul .pia-drop .n { background: #e8462d; color: #fff; border-radius: 9px;
        padding: 0 6px; font-size: 11px; font-weight: 600; }

    #message-calls-div { flex-wrap: nowrap; align-items: center; }
    #message-calls-div .pia-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px;
        padding: 0 11px; border-radius: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
        background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.18);
        text-decoration: none; margin-left: 8px; }
    #message-calls-div .pia-chip:hover { background: rgba(255,255,255,.22); text-decoration: none; }
    #admin-nav .pia-logout { color: rgba(255,255,255,.8) !important; font-size: 12.5px;
        margin-left: 12px; white-space: nowrap; text-decoration: none; }
    #admin-nav .pia-logout:hover { color: #fff !important; }

    /* below lg the navbar collapses; let the groups stack rather than overlap */
    @media (max-width: 991.98px) {
        #admin-nav { flex-wrap: wrap; }
        #admin-nav-ul { flex-wrap: wrap; }
        #admin-nav-ul .pia-group > .pia-drop { position: static; box-shadow: none; background: transparent; }
        #admin-nav-ul .pia-drop a { color: rgba(255,255,255,.85) !important; padding-left: 30px; }
        #admin-nav-ul .pia-drop a:hover { background: rgba(255,255,255,.08); color: #fff !important; }
    }

        /* ------------------------------------------------------------------
           Property page layout.

           The overlapping was caused by .marketed-property-info, which took the
           whole appraisal block out of the flow at 90vw so it sat on top of the
           right hand column. The block now runs full width in normal flow, so
           the rule is neutralised here and the columns cannot collide.
           ------------------------------------------------------------------ */
        #property-view .marketed-property-info { position: static !important; width: auto !important; }
        /* one section per row, so both editors get the full width rather than
           half of a narrow column */
        #property-view .card-columns { column-count: 1 !important; -webkit-column-count: 1 !important;
            -moz-column-count: 1 !important; }
        #property-view .card-columns > .card { break-inside: avoid; }
        /* the Save button used to be fixed over the content */
        /* the Save toolbar is the first element in PropertyComponent, so pin it to the
           top of the details card as a toolbar rather than floating it over the page */
        #property-view .property-btn-toolbar-bottom { position: sticky !important; top: 92px; bottom: auto !important;
            right: auto !important; left: auto !important; z-index: 850; background: #fff;
            border-bottom: 1px solid #e3e8ee; margin: -20px -22px 20px; padding: 10px 22px !important;
            border-radius: 9px 9px 0 0; display: flex; justify-content: flex-end; }
        #property-view .property-btn-toolbar-bottom .btn-toolbar { padding: 0 !important; }

        #property-view { background: #f4f6f9; font-weight: 400; color: #2b3440; margin: 0; padding: 18px 0 40px; }
        #property-view .pia-wrap { max-width: 1560px; margin: 0 auto; padding: 0 22px; }
        #property-view .pia-card { background: #fff; border: 1px solid #e3e8ee; border-radius: 9px;
            padding: 20px 22px; box-shadow: 0 1px 2px rgba(16,34,56,.05); }
        #property-view .pia-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
        #property-view .pia-head h1 { font-size: 25px; font-weight: 600; color: #14294f; margin: 0 0 4px; line-height: 1.25; }
        #property-view .pia-head .sub { font-size: 14.5px; color: #003e6c; margin: 0; }
        #property-view .pia-head .who { font-size: 12.5px; color: #79879a; margin: 5px 0 0; }
        #property-view .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
            letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
            background: #eef2f7; color: #42536b; vertical-align: middle; }
        #property-view .pill.live { background: #e4f8ea; color: #1c7a3e; }
        #property-view .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #25a35a; }
        #property-view .pia-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
        #property-view .pia-acts .btn, #property-view .pia-acts > a { margin: 0 !important; }
        #property-view .meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; padding-top: 14px;
            border-top: 1px solid #e3e8ee; align-items: center; }
        #property-view .meta .m { display: inline-flex; align-items: center; gap: 7px; background: #f5f8fb;
            border: 1px solid #e3e8ee; border-radius: 6px; padding: 6px 11px; font-size: 12.5px; color: #48586d; }
        #property-view .meta .m b { color: #14294f; font-weight: 600; }
        #property-view .meta .m .off { color: #a2394a; font-weight: 600; }
        #property-view .meta .m .on { color: #1c7a3e; font-weight: 600; }
        #property-view .meta .m .btn { height: 26px; line-height: 14px; font-size: 11.5px; padding: 5px 9px; }

        #property-view .pia-stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
        @media (max-width: 1360px) { #property-view .pia-stats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
        @media (max-width: 700px)  { #property-view .pia-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
        #property-view .stat { background: #fff; border: 1px solid #e3e8ee; border-radius: 9px; padding: 13px 15px;
            box-shadow: 0 1px 2px rgba(16,34,56,.05); }
        #property-view .stat .k { font-size: 11.5px; color: #79879a; text-transform: uppercase; letter-spacing: .04em;
            margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #property-view .stat .v { font-size: 23px; font-weight: 600; color: #14294f; margin: 0; line-height: 1.1; }
        #property-view .stat .s { font-size: 11.5px; color: #79879a; margin: 3px 0 0; }
        #property-view .stat.hi { background: #003e6c; border-color: #003e6c; }
        #property-view .stat.hi .k { color: rgba(255,255,255,.72); }
        #property-view .stat.hi .v { color: #fff; }
        #property-view .stat.hi .s { color: rgba(255,255,255,.6); }

        #property-view .pia-secnav { position: sticky; top: 52px; z-index: 700; background: rgba(244,246,249,.94);
            margin: 18px 0 0; padding: 9px 0; border-bottom: 1px solid #e3e8ee; display: flex; gap: 6px; flex-wrap: wrap; }
        #property-view .pia-secnav a { font-size: 13px; color: #4c5c72; text-decoration: none; padding: 6px 13px;
            border-radius: 20px; border: 1px solid transparent; }
        #property-view .pia-secnav a:hover { background: #fff; border-color: #e3e8ee; color: #003e6c; text-decoration: none; }

        #property-view section { margin-top: 18px; scroll-margin-top: 150px; }
        #property-view .sh { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
        #property-view .sh h2 { font-size: 20px; font-weight: 700; color: #14294f; margin: 0; letter-spacing: -.01em; }
        #property-view .sh .line { flex: 1; height: 1px; background: #e3e8ee; }
        #property-view .grid-media { display: grid; grid-template-columns: 5fr 7fr; gap: 18px; align-items: stretch; }
    #property-view .media-left { display: flex; flex-direction: column; gap: 18px; }
    #property-view .media-left > .pia-card:first-child { flex: 1; display: flex; flex-direction: column; }
    #property-view .media-left #googleMap { flex: 1; min-height: 300px; }
        #property-view .grid-engage { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; align-items: start; }
        @media (max-width: 1100px) { #property-view .grid-media, #property-view .grid-engage { grid-template-columns: 1fr; } }
        #property-view #googleMap { height: 330px; border-radius: 6px; }
        /* PropertyViews / PropertyFavourites wrap an h3 and a button inside a <label>;
           make that behave like a normal section heading row */
        #property-view .engage-block > label { display: flex !important; align-items: center; width: 100%; margin-bottom: 10px; }
        #property-view .engage-block > label h3 { font-size: 15px; font-weight: 600; color: #14294f; margin: 0; }
        #property-view .engage-block > label .btn { margin-left: auto !important; }
        #property-view .engage-list { max-height: 420px; overflow-y: auto; padding-right: 4px; }
        #property-view h3 { font-size: 15px; font-weight: 600; color: #14294f; }

    /* the dropzone thumbnails render at their natural size and were spilling
       out of the images card; keep them inside it */
    #property-view #edit-temp-holder { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; margin-bottom: 0; }
    #property-view #edit-temp-holder > li { list-style: none; }
    #property-view .dz-preview img { max-width: 110px; height: auto; }
    #property-view .dz-preview .dz-details { max-width: 110px; }

/* -----------------------------------------------------------------------
   Audience & marketing - PropertyReach now carries its own classes and
   styles (see PropertyReach.vue), so nothing is overridden from here any
   more. Only the section spacing lives at this level.
   ----------------------------------------------------------------------- */
#property-view #s-audience .pr-root { margin-top: 2px; }

/* tighter engagement cards */
#property-view #s-engage .engage-list { max-height: 380px; }

/* section jump bar - a little more presence */
#property-view .pia-secnav a { font-size: 13.5px; font-weight: 500; }
#property-view .pia-secnav a:first-child { color: #003e6c; }

/* details card: the appraisal fields now come from ViewPropertyHeaderComponent's
   own styles, so only the surrounding spacing lives here */
#property-view #s-details .pia-card > div > .row + .row { margin-top: 0; }
#property-view #s-details form + div, #property-view #s-details .mt-4.pt-4 { padding-top: 8px !important; }
#property-view #s-details .marketed-property-info { margin-top: 4px; }

/* details card: PropertyComponent wraps its form in .mt-4.pt-4 (48px) directly
   under the sticky Save bar, which read as a gap rather than breathing room */
#property-view #s-details .mt-4.pt-4 { margin-top: 0 !important; padding-top: 0 !important; }
#property-view #s-details .property-btn-toolbar-bottom { margin-bottom: 14px; }
#property-view #s-details form .form-row + .form-group,
#property-view #s-details form .form-group + .form-group { margin-bottom: 12px; }

/* =========================================================================
   Customers list
   ========================================================================= */
#cx.cx-page{background:#f4f6f9;font-weight:400;color:#2b3440;padding:18px 0 40px;margin:0}
#cx .cx-wrap{max-width:1660px;margin:0 auto;padding:0 22px}

#cx .cx-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
#cx .cx-head h1{font-size:26px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.02em}
#cx .cx-head .tot{font-size:13px;color:#79879a;margin:6px 0 0}
#cx .cx-tools{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#cx .cx-search{position:relative;margin:0}
#cx .cx-search input{height:40px;width:300px;border:1px solid #dbe3ec;border-radius:8px;padding:0 34px 0 36px;
  font-size:13.5px;background:#fff;color:#2b3440}
#cx .cx-search input:focus{outline:0;border-color:#003e6c;box-shadow:0 0 0 3px rgba(0,62,108,.10)}
#cx .cx-search .mag{position:absolute;left:13px;top:12px;color:#9aa8b8;font-size:13px}
#cx .cx-search .clr{position:absolute;right:12px;top:9px;color:#9aa8b8;text-decoration:none;font-size:16px}
#cx .seg{display:flex;background:#e9eef4;border-radius:8px;padding:3px}
#cx .seg a{padding:7px 15px;border-radius:6px;font-size:13px;color:#4c5c72;text-decoration:none;font-weight:500}
#cx .seg a.on{background:#fff;color:#14294f;box-shadow:0 1px 2px rgba(16,34,56,.12)}

#cx .cx-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media(max-width:1250px){#cx .cx-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
#cx .cx-stat{background:#fff;border:1px solid #e3e8ee;border-radius:10px;padding:13px 16px;box-shadow:0 1px 2px rgba(16,34,56,.05)}
#cx .cx-stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#79879a;margin:0}
#cx .cx-stat .v{font-size:23px;font-weight:600;color:#14294f;margin:6px 0 0;font-variant-numeric:tabular-nums;line-height:1.1}
#cx .cx-stat .s{font-size:11.5px;color:#9aa8b8;margin:3px 0 0}
#cx .cx-stat.hi{background:#003e6c;border-color:#003e6c}
#cx .cx-stat.hi .k{color:rgba(255,255,255,.72)}#cx .cx-stat.hi .v{color:#fff}#cx .cx-stat.hi .s{color:rgba(255,255,255,.62)}

#cx .cx-card{background:#fff;border:1px solid #e3e8ee;border-radius:12px;box-shadow:0 1px 2px rgba(16,34,56,.05);overflow:visible}
#cx .cx-scroll{overflow-x:auto;border-radius:12px 12px 0 0}
#cx table.cx{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;margin:0}
#cx table.cx thead th{background:#f7f9fc;border-bottom:1px solid #e3e8ee;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:#79879a;padding:12px 14px;text-align:left;white-space:nowrap}
#cx table.cx thead th.r{text-align:right}
#cx table.cx thead th.ra{text-align:right}
#cx table.cx .th-sub{font-weight:400;text-transform:none;letter-spacing:0}
#cx table.cx .srt{cursor:pointer;color:#b9c4d1;margin-left:2px}
#cx table.cx .srt:hover{color:#003e6c}
#cx table.cx tbody td{border-bottom:1px solid #eef1f5;padding:11px 12px;vertical-align:middle;background:#fff}
/* the actions stay pinned to the right edge so they are reachable without
   scrolling the table sideways on a narrower screen */
#cx table.cx th.ra,#cx table.cx td.c-act{position:sticky;right:0;z-index:4;
  box-shadow:-8px 0 12px -8px rgba(16,34,56,.16)}
#cx table.cx th.ra{background:#f7f9fc}
#cx table.cx tbody tr:hover td.c-act{background:#f8fbfd}
#cx table.cx tbody tr:hover td{background:#f8fbfd}
#cx table.cx tbody tr:last-child td{border-bottom:0}
#cx .c-who{min-width:260px}
#cx td.c-who{display:flex;align-items:center;gap:0}
#cx .av{display:inline-flex;flex:0 0 34px;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;margin-right:11px;vertical-align:middle;background:#e8eef6;color:#22406b}
#cx .who{display:flex;flex-direction:column;min-width:0;max-width:230px}
#cx .nm{font-weight:600;color:#14294f;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cx .nm:hover{color:#003e6c;text-decoration:underline}
#cx .em{font-size:12px;color:#8a97a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cx .c-num{text-align:right;font-variant-numeric:tabular-nums;width:78px}
#cx .nn{font-weight:600;color:#14294f}#cx .n0{color:#c3ccd7}
#cx .c-tel{font-variant-numeric:tabular-nums;color:#48586d;white-space:nowrap}
#cx .c-date{white-space:nowrap;color:#48586d;font-size:12.5px;font-variant-numeric:tabular-nums;line-height:1.45}
#cx .c-date .mt{display:block;font-size:11px;color:#9aa8b8;margin-left:14px}
#cx .c-date .none{color:#b9c4d1}
#cx .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
#cx .dot.hot{background:#25a35a}#cx .dot.warm{background:#e0a038}
#cx .dot.cold{background:#c95a4a}#cx .dot.never{background:#cfd7e0}
#cx .chip{display:inline-block;font-size:11.5px;font-weight:600;color:#22406b;background:#eaf0f7;
  border:1px solid #dce5f0;border-radius:20px;padding:2px 10px}
#cx .c-stat{white-space:nowrap}
#cx .pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  border-radius:20px;padding:3px 9px;margin-right:5px}
#cx .pill.ok{background:#e4f8ea;color:#1c7a3e}#cx .pill.off{background:#eef1f5;color:#7a8697}
#cx .pill.warn{background:#fdf0e2;color:#95601a}

#cx .c-act{white-space:nowrap;text-align:right}
#cx .icons{display:inline-flex;gap:4px;margin-right:8px;vertical-align:middle}
#cx .ib{display:inline-flex;width:30px;height:30px;border-radius:7px;align-items:center;justify-content:center;
  border:1px solid #dbe3ec;background:#fff;color:#5b6b80;text-decoration:none;font-size:12px;cursor:pointer;padding:0}
#cx .ib:hover{color:#fff;text-decoration:none}
#cx .ib.chat:hover{background:#17a2b8;border-color:#17a2b8}
#cx .ib.call:hover{background:#9333ea;border-color:#9333ea}
#cx .ib.mail:hover{background:#003e6c;border-color:#003e6c}
#cx .ib.bell:hover{background:#f0ad4e;border-color:#f0ad4e;color:#3d2a06}
#cx .btn-view{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:7px;
  background:#003e6c;color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;vertical-align:middle}
#cx .btn-view:hover{background:#14294f;color:#fff;text-decoration:none}
#cx .more{position:relative;display:inline-block;margin-left:4px;vertical-align:middle}
#cx .more .menu{display:none;position:absolute;right:0;top:34px;background:#fff;border:1px solid #e3e8ee;
  border-radius:9px;box-shadow:0 12px 28px rgba(11,29,54,.18);min-width:190px;padding:6px;z-index:60;text-align:left}
#cx .more:hover .menu{display:block}
#cx .more .menu > a,#cx .more .menu .btn{display:block;width:100%;padding:8px 12px;font-size:13px;color:#28313d;
  text-decoration:none;background:none;border:0;text-align:left;border-radius:6px;margin:0;height:auto;line-height:1.4}
#cx .more .menu > a:hover,#cx .more .menu .btn:hover{background:#f2f6fa;color:#003e6c}

#cx .cx-foot{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid #eef1f5;
  background:#fbfcfe;border-radius:0 0 12px 12px}
#cx .cx-foot .info{font-size:12.5px;color:#79879a}
#cx .cx-foot .pg{margin-left:auto}
#cx .cx-foot .pagination{margin:0}
#cx .cx-foot .page-link{border-radius:7px!important;margin:0 2px;border:1px solid #dbe3ec;color:#4c5c72;font-size:12.5px}
#cx .cx-foot .page-item.active .page-link{background:#003e6c;border-color:#003e6c;color:#fff}
/* fit the table to the page: stack the status pills and stop the sort arrows
   from padding the three numeric columns out to ~150px each */
#cx table.cx th.r{width:88px}
#cx table.cx th.r .srt{display:inline-block}
#cx .c-stat{width:158px;white-space:normal}
#cx .c-stat .pill{display:block;margin:0 0 3px;text-align:center}
#cx .c-stat .pill:last-child{margin-bottom:0}
#cx table.cx th:nth-child(5){width:120px}
#cx table.cx th:nth-child(6){width:74px}
/* last 77px: the sort arrows and header text were setting the minimum width of
   the three numeric columns */
#cx table.cx thead th{padding:12px 10px;font-size:10.5px}
#cx table.cx .srt{font-size:9px;margin:0;line-height:1}
#cx table.cx .srt + .srt{margin-left:1px}
#cx .c-who{min-width:240px}
#cx .who{max-width:210px}
#cx table.cx th:nth-child(5){width:112px}

/* =========================================================================
   Customer profile header (sits above the existing customer page)
   ========================================================================= */
#cp{background:#f4f6f9;font-weight:400;color:#2b3440;margin:0 0 24px;padding:18px 0 26px;
    border-bottom:1px solid #e3e8ee}
#cp .cp-wrap{max-width:1560px;margin:0 auto;padding:0 22px}
#cp .crumb{font-size:12.5px;color:#8a97a8;margin-bottom:12px}
#cp .crumb a{color:#4c5c72;text-decoration:none}#cp .crumb a:hover{color:#003e6c}
#cp .cp-card{background:#fff;border:1px solid #e3e8ee;border-radius:12px;box-shadow:0 1px 2px rgba(16,34,56,.05)}
#cp .cp-pad{padding:20px 22px}
#cp .cp-sh{display:flex;align-items:center;gap:14px;margin:24px 0 13px}
#cp .cp-sh h2{font-size:20px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.02em}
#cp .cp-sh .line{flex:1;height:1px;background:#e3e8ee}

#cp .hero{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
#cp .av{width:66px;height:66px;border-radius:16px;background:#e8eef6;color:#22406b;display:flex;
  align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:none}
#cp .idy{min-width:260px}
#cp .hero h1{font-size:25px;font-weight:700;color:#14294f;margin:0 0 5px;letter-spacing:-.02em}
#cp .contact{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#4c5c72;margin-bottom:9px}
#cp .contact a{color:#003e6c;text-decoration:none}#cp .contact a:hover{text-decoration:underline}
#cp .pills{display:flex;gap:6px;flex-wrap:wrap}
#cp .pill{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:3px 10px}
#cp .pill.ok{background:#e4f8ea;color:#1c7a3e}#cp .pill.warn{background:#fdf0e2;color:#95601a}
#cp .pill.off{background:#eef1f5;color:#7a8697}#cp .pill.info{background:#eaf0f7;color:#22406b}
#cp .pill.bad{background:#fdeceb;color:#a63428}
#cp .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
#cp .ab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:8px;
  font-size:13px;font-weight:600;color:#fff!important;text-decoration:none;border:0;
  box-shadow:0 2px 8px rgba(16,34,56,.16)}
#cp .ab:hover{text-decoration:none;filter:brightness(1.07)}
#cp .ab.chat{background:#17a2b8}#cp .ab.call{background:#9333ea}
#cp .ab.mail{background:#003e6c}#cp .ab.bell{background:#f0ad4e;color:#3d2a06!important}

#cp .cp-stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:16px}
@media(max-width:1500px){#cp .cp-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){#cp .cp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#cp .cp-dots{color:#c3ccd7;letter-spacing:2px}
#cp .cp-stat{background:#fff;border:1px solid #e3e8ee;border-radius:10px;padding:13px 16px;box-shadow:0 1px 2px rgba(16,34,56,.05)}
#cp .cp-stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#79879a;margin:0}
#cp .cp-stat .v{font-size:23px;font-weight:600;color:#14294f;margin:6px 0 0;font-variant-numeric:tabular-nums;line-height:1.15}
#cp .cp-stat .s{font-size:11.5px;color:#9aa8b8;margin:3px 0 0}
#cp .cp-stat.hi{background:#003e6c;border-color:#003e6c}
#cp .cp-stat.hi .k{color:rgba(255,255,255,.72)}#cp .cp-stat.hi .v{color:#fff}#cp .cp-stat.hi .s{color:rgba(255,255,255,.62)}
#cp .cp-stat.alert{background:#fff6f5;border-color:#f3ccc6}#cp .cp-stat.alert .v{color:#a63428}#cp .cp-stat.alert .s{color:#b4685e}

#cp .insight{background:linear-gradient(180deg,#0d2440,#14294f);color:#fff;border-radius:12px;padding:22px 24px}
#cp .insight h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#7fe3ec;margin:0 0 12px;font-weight:700}
#cp .insight .lead{font-size:16.5px;line-height:1.6;margin:0 0 14px;font-weight:500;color:#fff}
#cp .insight .lead b{color:#7fe3ec;font-weight:700}
#cp .insight ul{margin:0;padding-left:18px}
#cp .insight li{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.86);margin-bottom:5px}
#cp .insight li b{color:#fff}
#cp .insight .src{font-size:11.5px;color:rgba(255,255,255,.5);margin:14px 0 0;
  border-top:1px solid rgba(255,255,255,.14);padding-top:11px}

#cp .plan .step{display:grid;grid-template-columns:34px 1fr auto;gap:14px;padding:15px 22px;
  border-bottom:1px solid #f2f5f8;align-items:center}
#cp .plan .step:last-child{border-bottom:0}
#cp .plan .num{width:28px;height:28px;border-radius:9px;background:#eaf0f7;color:#22406b;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px}
#cp .plan h4{font-size:14px;font-weight:600;color:#14294f;margin:0 0 3px}
#cp .plan p{font-size:13px;color:#5b6b80;margin:0;line-height:1.55}
#cp .b{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;font-size:13px;
  font-weight:500;text-decoration:none;white-space:nowrap}
#cp .b-ghost{background:#fff;color:#42536b;border:1px solid #cfd8e3}
#cp .b-ghost:hover{border-color:#003e6c;color:#003e6c;text-decoration:none}

#cp .gap-card{border-color:#f0d9b8;background:#fffdf8}
#cp .gaprow{display:grid;grid-template-columns:190px 1fr;gap:14px;padding:11px 22px;
  border-bottom:1px solid #f7eddc;font-size:13px}
#cp .gaprow:last-child{border-bottom:0}
#cp .gaprow .w{font-weight:600;color:#7a5a1c}
#cp .gaprow .d{color:#6b5a3e;line-height:1.5}

/* =========================================================================
   Customer page, lower half. Restyles the existing markup - the fields,
   the questionnaire table, the analytics and the tabs - to match the rest
   of the admin. Note this page also pulls Bootstrap 4.4.1 from a CDN inside
   the body, which is why several rules here need to be specific.
   ========================================================================= */
#cust-info{width:auto!important;max-width:1560px;margin:0 auto!important;padding:0 22px 40px;
  font-weight:400;color:#2b3440}
#cust-info > .row{display:grid!important;grid-template-columns:minmax(0,2.9fr) minmax(0,1fr);
  gap:20px;margin:0;justify-content:stretch!important}
@media(max-width:1150px){#cust-info > .row{grid-template-columns:1fr}}
#cust-info .cu-main,#cust-info .cu-side{min-width:0;max-width:none;padding:0;margin:0}

#cust-info .cu-card{background:#fff;border:1px solid #e3e8ee;border-radius:12px;
  box-shadow:0 1px 2px rgba(16,34,56,.05);padding:20px 22px;margin-bottom:18px}
#cust-info .cu-h{margin:-20px -22px 18px;padding:15px 22px;border-bottom:1px solid #eef1f5}
#cust-info .cu-h h3{font-size:16px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.01em}
#cust-info .cu-h .cu-sub{font-size:12.5px;color:#8a97a8;display:block;margin-top:4px}
#cust-info .cu-empty{font-size:13px;color:#9aa8b8;margin:0}

/* read-only detail fields read as data, not as empty form inputs */
#cust-info form .form-group{margin-bottom:14px}
#cust-info form > .form-group,
#cust-info .cu-card > .form-group{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:14px;align-items:center;margin-bottom:10px}
#cust-info form > .form-group label,
#cust-info .cu-card > .form-group label{margin:0;font-size:13px;color:#5b6b80;font-weight:500}
#cust-info .form-control.custom-form-control{height:38px;border:1px solid #e3e8ee;border-radius:8px;
  background:#f8fafc!important;font-size:13.5px;color:#14294f;box-shadow:none}
#cust-info .form-control.custom-form-control:disabled{color:#14294f;opacity:1}

/* tick box grids */
#cust-info .label-text{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:#79879a;font-weight:700;display:block;margin:20px 0 10px}
#cust-info .form-check .label-text{text-transform:none;letter-spacing:0;font-size:13.5px;
  color:#3c4a5d;font-weight:400;margin:0;display:inline}
#cust-info .form-check{padding:4px 8px 4px 26px;border-radius:6px;margin-bottom:0}
#cust-info .form-check:hover{background:#f5f8fb}
#cust-info .form-check-input{accent-color:#003e6c;width:14px;height:14px;margin-top:4px}

/* questionnaire */
#cust-info .table.table-bordered{border:0;margin:0;font-size:13.5px}
#cust-info .table.table-bordered thead th{background:#f7f9fc;border:0;border-bottom:1px solid #e3e8ee;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#79879a;font-weight:700;padding:11px 14px}
#cust-info .table.table-bordered td{border:0;border-bottom:1px solid #eef1f5;padding:11px 14px;vertical-align:middle;color:#3c4a5d}
#cust-info .table.table-hover tbody tr:hover td{background:#f8fbfd}
#cust-info .table .badge.badge-primary{background:#eaf0f7!important;color:#22406b!important;
  border:1px solid #dce5f0;border-radius:20px;font-weight:600;font-size:12.5px!important;padding:5px 12px!important}
#cust-info .cu-card > .card,#cust-info .cu-card .card{border:0;box-shadow:none;background:transparent}
#cust-info .cu-card .card-body{padding:0}
#cust-info .table-responsive{margin:0}

/* tabs */
#cust-info .cu-tabs{padding:0;overflow:hidden}
#cust-info #customerTabs{border-bottom:1px solid #e3e8ee!important;margin:0;padding:0 10px;background:#f7f9fc}
#cust-info #customerTabs .nav-link{font-size:13.5px!important;padding:13px 18px!important;color:#5b6b80!important;
  border-bottom:3px solid transparent!important;background:transparent!important}
#cust-info #customerTabs .nav-link:hover{color:#003e6c!important;background:transparent!important;
  border-bottom-color:#cfd8e3!important}
#cust-info #customerTabs .nav-link.active{color:#14294f!important;font-weight:700!important;
  border-bottom-color:#00ccda!important;background:#fff!important}
#cust-info .tab-content{border:0!important;padding:20px 22px!important;min-height:220px}
#cust-info .tab-content h3{font-size:15px;font-weight:700;color:#14294f;margin-bottom:14px}
/* editable fields on the customer form read as editable, not greyed out */
#cust-info .form-control.custom-form-control:not(:disabled){background:#fff!important}
#cust-info .form-control.custom-form-control:not(:disabled):focus{border-color:#003e6c;
  box-shadow:0 0 0 3px rgba(0,62,108,.10);outline:0}
/* the side rail keeps pace with the main column */
#cust-info .cu-side .cu-card{padding:20px 22px}
#cust-info .cu-side .card{border:1px solid #e3e8ee;border-radius:10px;box-shadow:none}
/* the tabs hold wide tables (call logs, email analytics), so let them use the
   whole card and scroll rather than squeezing the columns */
#cust-info .cu-tabs .tab-content{overflow-x:auto}
#cust-info .cu-tabs .table{font-size:13px}
/* a gap row that is no longer a gap */
#cp .gaprow.ok{background:#f4fbf6}
#cp .gaprow.ok .w{color:#1c7a3e}
#cp .gaprow.ok .d{color:#3f6b4d}

/* =========================================================================
   Property lists (drafted / on market / off market / sold / 3rd party).
   Scoped to .pl-page and .pl-head so the shared property-card partial keeps
   its existing look everywhere else it is used (the customer page rail and
   the customer facing preview modal).
   ========================================================================= */
.pl-head{background:#f4f6f9;padding:18px 0 0;font-weight:400;color:#2b3440}
.pl-head .pl-wrap{max-width:1660px;margin:0 auto;padding:0 22px}
.pl-head .pl-top{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.pl-head h1{font-size:26px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.02em}
.pl-head .tot{font-size:13px;color:#79879a;margin:6px 0 0}
.pl-head .pl-tools{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pl-head .pl-search{position:relative;margin:0}
.pl-head .pl-search input{height:40px;width:290px;border:1px solid #dbe3ec;border-radius:8px;
  padding:0 14px 0 36px;font-size:13.5px;background:#fff;color:#2b3440}
.pl-head .pl-search input:focus{outline:0;border-color:#003e6c;box-shadow:0 0 0 3px rgba(0,62,108,.10)}
.pl-head .pl-search .mag{position:absolute;left:13px;top:12px;color:#9aa8b8;font-size:13px}
.pl-head .pl-new{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;
  background:#00ccda;color:#04303a!important;font-size:13.5px;font-weight:600;text-decoration:none}
.pl-head .pl-new:hover{filter:brightness(1.06);text-decoration:none;color:#04303a!important}

/* the pipeline doubles as the navigation between the five lists */
.pl-head .pl-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding-bottom:18px}
@media(max-width:900px){.pl-head .pl-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-head .pl-stage{display:block;background:#fff;border:1px solid #e3e8ee;border-radius:10px;
  padding:12px 16px;text-decoration:none;box-shadow:0 1px 2px rgba(16,34,56,.05)}
.pl-head .pl-stage:hover{border-color:#b9cbe0;text-decoration:none}
.pl-head .pl-stage .k{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#79879a}
.pl-head .pl-stage .v{display:block;font-size:22px;font-weight:600;color:#14294f;margin-top:5px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.pl-head .pl-stage.on{background:#003e6c;border-color:#003e6c}
.pl-head .pl-stage.on .k{color:rgba(255,255,255,.72)}
.pl-head .pl-stage.on .v{color:#fff}

/* the grid of property cards */
#bg.pl-page{background:#f4f6f9!important;padding-bottom:40px}
.pl-page .property-card-holder{max-width:1660px;margin:0 auto;padding:0 22px;width:auto}
.pl-page .property-card-holder > .row{display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin:0;padding-top:4px!important}
.pl-page .property-card-holder > .row > div{max-width:none!important;flex:none!important;
  width:auto!important;padding:0!important;margin:0!important;display:flex;flex-direction:column}
.pl-page .card{border:1px solid #e3e8ee!important;border-radius:12px!important;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,34,56,.05);background:#fff;text-align:left!important;flex:1}
.pl-page .card:hover{box-shadow:0 6px 18px rgba(16,34,56,.10);border-color:#cfdae7!important}
.pl-page .card-img-top{height:180px;background-size:cover;background-position:center;border-radius:0}
.pl-page .card-header{position:absolute;top:10px;left:10px;right:auto;z-index:2;border:0!important;
  border-radius:20px!important;padding:4px 11px!important;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;background:rgba(0,62,108,.92)!important;color:#fff!important;
  /* the old design centred this with margin-left:-130px, which threw it off
     the card once it was positioned from the left */
  margin:0!important;width:auto!important;max-width:calc(100% - 20px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important}
.pl-page .sold-property-card-header{background:rgba(28,122,62,.94)!important}
.pl-page .main-card-body{padding:15px 16px 16px!important}
.pl-page #property-card-title{font-size:14.5px!important;font-weight:600!important;color:#14294f!important;
  margin:0 0 6px!important;line-height:1.35}
.pl-page #property-card-postcode{font-size:12.5px!important;color:#8a97a8!important;margin:0 0 12px!important}
.pl-page .prop-capital-fields,.pl-page .prop-roi-fields{max-width:none!important;flex:none!important;
  width:auto!important;padding:0!important}
.pl-page .main-card-body .row{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 8px!important}
.pl-page .prop-capital-fields p,.pl-page .prop-roi-fields p{margin:0!important}
.pl-page .prop-capital-fields p:first-child,.pl-page .roi-label-paragraph{font-size:10.5px!important;
  text-transform:uppercase;letter-spacing:.04em;color:#9aa8b8!important;font-weight:600}
.pl-page .value-paragraph{font-size:14px!important;font-weight:600!important;color:#14294f!important;
  font-variant-numeric:tabular-nums;margin-top:2px!important}
.pl-page #view-property-button{display:block;margin:10px 0 0!important;height:36px;line-height:36px;
  border-radius:8px;background:#003e6c;color:#fff!important;font-size:13px;font-weight:600;
  text-align:center;padding:0!important;text-decoration:none}
.pl-page #view-property-button:hover{background:#14294f;color:#fff!important;text-decoration:none}
.pl-page .card-text{font-size:12px;color:#9aa8b8;margin:8px 0 0}
.pl-page .pagination{justify-content:center;margin:26px 0 0}
.pl-page .page-link{border-radius:7px!important;margin:0 2px;border:1px solid #dbe3ec;color:#4c5c72;font-size:12.5px}
.pl-page .page-item.active .page-link{background:#003e6c;border-color:#003e6c;color:#fff}

/* =========================================================================
   Messages (admin chat). The page is one Vue component; these rules restyle
   it in place and are scoped to #messages so nothing else is affected.
   ========================================================================= */
#messages{--nav:52px}
/* the sidebar and the thread sit under the restored admin nav */
#messages .admin-nav-col{top:var(--nav)!important;height:calc(100vh - var(--nav))!important;
  width:320px!important;background-image:none!important;background:#fff!important;
  border-right:1px solid #e3e8ee;padding:0!important;overflow:hidden!important;display:block}
#messages #admin-chat-main-row{padding-left:320px!important;padding-top:var(--nav);min-height:100vh;
  background:#eef2f7;background-image:radial-gradient(circle at 1px 1px,rgba(20,41,79,.055) 1px,transparent 0);
  background-size:22px 22px}
#messages #admin-chat-container{background:transparent!important;overflow:visible!important;
  padding:18px 22px 22px!important;max-width:1140px;margin:0 auto}

/* sidebar head: logo strip out, search in */
#messages #side-nav-brand-row{padding:0;text-align:left!important}
#messages #side-nav-brand{display:none}
#messages .convo-list{width:100%!important;margin:0!important;padding:0}
#messages .search-input{height:38px;border:1px solid #dbe3ec!important;border-radius:8px;
  background:#fff!important;color:#2b3440!important;font-size:13.5px;margin:14px 16px 0!important;
  width:calc(100% - 32px)!important}
#messages .search-input::placeholder{color:#9aa8b8!important;opacity:1}
#messages .search-input:focus{outline:0;border-color:#003e6c!important;box-shadow:0 0 0 3px rgba(0,62,108,.10)}
#messages .message-search-results-box{margin:0 16px;border:1px solid #e3e8ee;border-radius:8px}

/* inbox / unread tabs */
#messages .convo-tabs{display:flex;gap:4px;background:#eef2f7;border-radius:8px;padding:3px;margin:14px 16px 10px}
#messages .convo-tabs .btn{flex:1;height:32px;border-radius:6px;font-size:13px;font-weight:600;
  color:#4c5c72!important;background:transparent!important;border:0;padding:0;line-height:32px}
#messages .convo-tabs .btn.active{background:#fff!important;color:#14294f!important;
  box-shadow:0 1px 2px rgba(16,34,56,.12)}

/* the two broadcast buttons are destructive-ish, so make them quiet */
#messages .load-more-btn{height:32px;line-height:32px;padding:0 14px;border-radius:7px;font-size:12.5px;
  font-weight:600;background:#fff!important;color:#42536b!important;border:1px solid #cfd8e3!important}
#messages .load-more-btn:hover{border-color:#003e6c!important;color:#003e6c!important}
#messages .py-2.d-flex.justify-content-center{padding:0 16px 6px!important}
#messages .py-2.d-flex.justify-content-center .load-more-btn{width:100%}

/* conversation rows */
#messages .message-notification-area{height:auto!important;max-height:calc(100vh - var(--nav) - 250px);
  overflow-y:auto;padding:0 8px}
#messages .convo-div{border-bottom:0!important;border-radius:8px;margin:0 0 2px;padding:9px 12px!important;
  width:auto!important;color:#2b3440!important;display:flex!important;align-items:center}
#messages .convo-div:hover{background:#f2f6fa}
#messages .side-link{color:#14294f!important;font-size:13.5px;font-weight:500;text-decoration:none;
  max-width:none!important;flex:1!important;padding:0!important;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
#messages .side-link:hover{color:#003e6c!important}
#messages .convo-label{color:#79879a!important;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;margin:14px 16px 4px!important}
#messages .close-message-span{color:#9aa8b8;margin-left:16px;cursor:pointer}

/* thread */
#messages .receiver-name{font-size:17px!important;font-weight:700;color:#14294f!important;
  background:#fff;border-bottom:1px solid #e3e8ee;padding:14px 22px!important;margin:0!important;
  border-radius:0}
#messages #admin-chat-container > a{text-decoration:none;display:block;position:sticky;top:var(--nav);z-index:20}
#messages #admin-messages-div{min-height:0!important;max-height:calc(100vh - var(--nav) - 330px)!important;
  overflow-y:auto!important;padding:18px 22px!important;width:auto!important}

/* bubbles size to their content instead of a fixed col-5 */
#messages .messages{max-width:min(640px,72%)!important;flex:0 1 auto!important;
  width:fit-content!important;min-width:0!important;
  padding:11px 15px!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(16,34,56,.06);
  height:auto!important}
#messages #sent-message{background:#003e6c!important;border-bottom-right-radius:4px!important}
#messages #received-message{background:#fff!important;border:1px solid #e3e8ee;
  border-bottom-left-radius:4px!important}
#messages .message-content{font-size:13.5px!important;line-height:1.55;margin:0;padding:0;
  background:transparent;border:0;white-space:pre-wrap}
#messages .sent-message{color:#fff!important}
#messages .received-message{color:#2b3440!important}
#messages .row.justify-content-end{margin-right:0!important}
#messages .row.justify-content-start{margin-left:0!important}
/* keep the timestamp and property link under their own bubble - the sent
   variant carries ml-auto, the received one mr-auto */
#messages .message-details{margin:4px 0 16px!important;width:min(640px,72%);max-width:min(640px,72%)}
#messages .message-details.ml-auto{margin-left:auto!important;margin-right:0!important}
#messages .message-details.mr-auto{margin-right:auto!important;margin-left:0!important}
#messages .message-details small{font-size:11.5px;color:#9aa8b8}
#messages .message-details .col-5{max-width:none;flex:1;padding:0 2px}

/* composer */
#messages #chat-form,#messages #admin-chat-container > div > div > .pl-5{padding:0 22px!important}
#messages #chat-form{background:#fff;border-top:1px solid #e3e8ee;padding:14px 22px!important}
#messages .msg-text-area{border:1px solid #dbe3ec!important;border-radius:9px;font-size:13.5px;
  padding:11px 13px;min-height:96px;resize:vertical}
#messages .msg-text-area:focus{outline:0;border-color:#003e6c!important;box-shadow:0 0 0 3px rgba(0,62,108,.10)}
#messages .msg-toolbar{margin:10px 0 0!important;align-items:center}
#messages .attachment-btn{font-size:12.5px;color:#4c5c72!important;text-decoration:none}
#messages .attachment-btn:hover{color:#003e6c!important}
#messages #admin-send-message-button{height:38px;padding:0 22px;border-radius:8px;background:#00ccda!important;
  color:#04303a!important;font-weight:700;font-size:13.5px;border:0}
#messages #admin-send-message-button:disabled{opacity:.55}
#messages select.form-control{height:38px;border:1px solid #dbe3ec;border-radius:8px;font-size:13.5px;
  margin:14px 0 0}

/* --- messages: chat header bar, avatars, empty state --- */
#messages .chat-topbar{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #e3e8ee;
  border-radius:12px 12px 0 0;border-bottom:0;padding:13px 18px;position:sticky;top:var(--nav);z-index:20}
#messages .chat-av{width:40px;height:40px;border-radius:12px;background:#e8eef6;color:#22406b;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
#messages .chat-who{display:flex;flex-direction:column;min-width:0}
#messages .chat-name{font-size:16px;font-weight:700;color:#14294f!important;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#messages .chat-name:hover{color:#003e6c!important;text-decoration:underline}
#messages .chat-sub{font-size:12px;color:#8a97a8}
#messages .chat-actions{margin-left:auto;position:relative}
#messages .chat-actions-btn{height:36px;padding:0 15px;border-radius:8px;border:1px solid #cfd8e3;
  background:#fff;color:#42536b;font-size:13px;font-weight:600;cursor:pointer}
#messages .chat-actions-btn:hover{border-color:#003e6c;color:#003e6c}
#messages .chat-actions-btn .caret{font-size:10px;opacity:.7;margin-left:5px}
#messages .chat-actions-menu{position:absolute;right:0;top:42px;background:#fff;border:1px solid #e3e8ee;
  border-radius:10px;box-shadow:0 14px 32px rgba(11,29,54,.20);min-width:262px;padding:6px;z-index:60}
#messages .chat-actions-menu a{display:block;padding:9px 12px;border-radius:7px;text-decoration:none}
#messages .chat-actions-menu a:hover{background:#f2f6fa}
#messages .chat-actions-menu strong{display:block;font-size:13.5px;color:#14294f;font-weight:600}
#messages .chat-actions-menu small{display:block;font-size:11.5px;color:#8a97a8;margin-top:1px}
#messages .chat-flash{background:#e4f8ea;color:#1c7a3e;border:1px solid #bfe8cd;border-radius:9px;
  padding:9px 14px;font-size:13px;font-weight:600;margin:10px 0 0}

/* the thread and composer read as one sheet under the header bar */
/* the header bar, the thread and the composer are three siblings; give them a
   shared card so they read as one sheet rather than three floating boxes */
#messages .chat-parent{background:#fff;border-left:1px solid #e3e8ee;border-right:1px solid #e3e8ee;
  border-radius:0;overflow:hidden}
#messages #admin-messages-div{background:#f8fafc!important;border-bottom:1px solid #eef1f5}
#messages #admin-chat-container > div:last-child{background:#fff;border:1px solid #e3e8ee;border-top:0;
  border-radius:0 0 12px 12px;box-shadow:0 1px 3px rgba(16,34,56,.07);padding-bottom:2px}
#messages #admin-chat-container > div:last-child > .pl-5{padding:14px 18px 0!important}
#messages #chat-form{border-top:0!important;padding:12px 18px 16px!important;background:transparent}
#messages select.form-control{margin:0}

/* conversation rows with an initials avatar */
#messages .side-link{display:flex!important;align-items:center;gap:10px}
#messages .convo-av{width:30px;height:30px;border-radius:50%;background:#eef2f7;color:#42536b;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
#messages .convo-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#messages .convo-div:hover .convo-av{background:#003e6c;color:#fff}

/* empty state instead of a blank sheet */
#messages .chat-empty{padding:64px 22px;text-align:center}
#messages .chat-empty-mark{font-size:40px;color:#c8d4e2;line-height:1}
#messages .chat-empty h4{font-size:16px;font-weight:700;color:#14294f;margin:14px 0 5px}
#messages .chat-empty p{font-size:13.5px;color:#8a97a8;margin:0}

/* sidebar gets a title so it is not just a floating search box */
#messages .convo-list:before{content:"Messages";display:block;font-size:15px;font-weight:700;
  color:#14294f;padding:14px 16px 0}
/* --- messages: follow up tab, presets and due markers --- */
#messages .convo-tabs .btn{position:relative}
#messages .fu-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:9px;background:#e8462d;color:#fff;font-size:10.5px;font-weight:700;margin-left:5px}
#messages .chat-actions-sep{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#9aa8b8;
  font-weight:700;padding:10px 12px 5px;border-top:1px solid #eef1f5;margin-top:5px}
#messages .fu-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 10px}
#messages .fu-presets button{height:32px;border-radius:7px;border:1px solid #cfd8e3;background:#fff;
  color:#42536b;font-size:12.5px;font-weight:600;cursor:pointer}
#messages .fu-presets button:hover{border-color:#003e6c;color:#003e6c;background:#f2f6fa}
#messages .convo-name{display:flex;flex-direction:column;line-height:1.3}
#messages .fu-when{font-size:11px;color:#8a97a8;font-weight:500}
#messages .fu-when.fu-over{color:#c0392b;font-weight:700}
#messages .fu-done{margin-left:auto;height:26px;padding:0 10px;border-radius:6px;border:1px solid #cfd8e3;
  background:#fff;color:#42536b;font-size:11.5px;font-weight:600;cursor:pointer;flex:none}
#messages .fu-done:hover{background:#003e6c;border-color:#003e6c;color:#fff}
#messages .convo-tabs{flex-wrap:wrap}
#messages .convo-tabs .btn{min-width:0;padding:0 8px!important;font-size:12.5px}

/* =========================================================================
   Reserve list (/customers/upcomingcalls) — the page behind the nav chip
   ========================================================================= */
#bg.rl-page{background:#f4f6f9!important;padding:18px 0 40px;font-weight:400;color:#2b3440}
#bg.rl-page .rl-wrap{max-width:1660px;margin:0 auto;padding:0 22px;width:auto}

#bg.rl-page .rl-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
#bg.rl-page .rl-head h1{font-size:26px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.02em}
#bg.rl-page .rl-sub{font-size:13px;color:#79879a;margin:6px 0 0}
#bg.rl-page .rl-tools{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#bg.rl-page .rl-filter .dropdown-toggle{display:inline-flex;align-items:center;height:40px;padding:0 15px;
  border:1px solid #dbe3ec;border-radius:8px;background:#fff;color:#42536b;font-size:13.5px;
  font-weight:600;text-decoration:none}
#bg.rl-page .rl-filter .dropdown-toggle:hover{border-color:#003e6c;color:#003e6c}
#bg.rl-page .rl-filter .dropdown-menu{border:1px solid #e3e8ee;border-radius:10px;
  box-shadow:0 12px 28px rgba(11,29,54,.18);padding:6px}
#bg.rl-page .rl-filter .dropdown-item{border-radius:6px;padding:7px 10px}
#bg.rl-page .rl-search{position:relative;margin:0}
#bg.rl-page .rl-search input{height:40px;width:280px;border:1px solid #dbe3ec;border-radius:8px;
  padding:0 30px 0 36px;font-size:13.5px;background:#fff;color:#2b3440}
#bg.rl-page .rl-search input:focus{outline:0;border-color:#003e6c;box-shadow:0 0 0 3px rgba(0,62,108,.10)}
#bg.rl-page .rl-search .mag{position:absolute;left:13px;top:12px;color:#9aa8b8;font-size:13px}
#bg.rl-page .rl-search .clr{position:absolute;right:11px;top:8px;color:#9aa8b8;text-decoration:none;font-size:17px}

/* one card per reserved property */
#bg.rl-page .reserve-list-header{background:#003e6c!important;border-radius:11px 11px 0 0;
  padding:13px 18px!important;margin:18px 0 0;border:0}
#bg.rl-page .reserve-list-header.is-sold{background:#7a2f28!important}
#bg.rl-page .rl-prop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#bg.rl-page .rl-prop-who{display:flex;flex-direction:column;min-width:0;flex:1}
#bg.rl-page .reserved-property-link{color:#fff!important;font-size:15px;font-weight:700;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bg.rl-page .reserved-property-link:hover{text-decoration:underline}
#bg.rl-page .rl-prop-sub{font-size:12.5px;color:rgba(255,255,255,.72)}
#bg.rl-page .rl-count{background:rgba(255,255,255,.16);color:#fff;border-radius:20px;padding:3px 11px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
#bg.rl-page .rl-sold{background:#fff;color:#7a2f28;border-radius:20px;padding:3px 11px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#bg.rl-page .rl-lights{flex:none}

/* the customers under each property */
#bg.rl-page #reserved-customers-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid #e3e8ee;border-top:0;border-radius:0 0 11px 11px;overflow:hidden;margin:0 0 6px;font-size:13.5px}
#bg.rl-page #reserved-customers-table thead th{background:#f7f9fc;border-bottom:1px solid #e3e8ee!important;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#79879a;
  padding:11px 14px!important;text-align:left;white-space:nowrap}
#bg.rl-page #reserved-customers-table tbody tr{background:#fff!important;border-bottom:0!important}
#bg.rl-page #reserved-customers-table tbody td{border-bottom:1px solid #eef1f5;padding:10px 14px;
  vertical-align:middle;max-width:none!important;overflow:visible!important;position:static}
#bg.rl-page #reserved-customers-table tbody tr:hover td{background:#f8fbfd}
#bg.rl-page .reserved-customer-data-col,#bg.rl-page .email-col{padding-left:14px!important;width:auto}
#bg.rl-page #reserved-customers-table a[href^="/customer/view"]{color:#14294f;font-weight:600;text-decoration:none}
#bg.rl-page #reserved-customers-table a[href^="/customer/view"]:hover{color:#003e6c;text-decoration:underline}
#bg.rl-page #reserved-customers-table a[href^="mailto"]{color:#4c5c72;text-decoration:none}

/* the CRM toggles become compact chips instead of five full size buttons */
#bg.rl-page .rl-crm{width:auto!important;min-width:420px}
#bg.rl-page .rl-crm .btn{height:28px;padding:0 10px!important;border-radius:20px;font-size:11.5px;
  font-weight:600;margin:2px 3px 2px 0!important;line-height:26px;border-width:1px}
#bg.rl-page .rl-crm .btn-outline-info{color:#5b6b80!important;border-color:#cfd8e3!important;background:#fff!important}
#bg.rl-page .rl-crm .btn-outline-info:hover{border-color:#003e6c!important;color:#003e6c!important}
#bg.rl-page .rl-crm .btn-info{background:#e4f8ea!important;border-color:#bfe8cd!important;color:#1c7a3e!important}
#bg.rl-page .rl-crm .btn i{margin-right:4px}
#bg.rl-page .upcoming-calls-sale-button{height:30px;padding:0 14px;border-radius:7px;background:#00ccda;
  color:#04303a;font-weight:700;font-size:12.5px;line-height:30px}
#bg.rl-page .pagination{justify-content:center;margin:24px 0 0}
#bg.rl-page .page-link{border-radius:7px!important;margin:0 2px;border:1px solid #dbe3ec;color:#4c5c72;font-size:12.5px}

/* --- embedded Google Sheet pages (reservations sheet, deals sheet) --- */
.sheet-page{background:#f4f6f9;padding:18px 0 30px;font-weight:400;color:#2b3440;min-height:calc(100vh - 60px)}
.sheet-page .sheet-wrap{max-width:1660px;margin:0 auto;padding:0 22px}
.sheet-page .sheet-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.sheet-page .sheet-head h1{font-size:26px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.02em}
.sheet-page .sheet-head .sub{font-size:13px;color:#79879a;margin:6px 0 0}
.sheet-page .sheet-open{margin-left:auto;display:inline-flex;align-items:center;height:40px;padding:0 16px;
  border-radius:8px;background:#fff;border:1px solid #cfd8e3;color:#42536b!important;font-size:13.5px;
  font-weight:600;text-decoration:none}
.sheet-page .sheet-open:hover{border-color:#003e6c;color:#003e6c!important;text-decoration:none}
.sheet-page .sheet-frame{background:#fff;border:1px solid #e3e8ee;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,34,56,.07)}
.sheet-page .sheet-frame iframe{display:block;width:100%;height:calc(100vh - 210px);min-height:520px;border:0}
/* .reserve-list-header already exists in all.css as
   { background:#003e6c; color:#fff; max-width:90% } - that max-width is what
   pulled the property bar out of line with the table under it */
#bg.rl-page .reserve-list-header{max-width:none!important;width:auto!important}
/* every point of contact on a reservation row */
#bg.rl-page .rl-contact{white-space:nowrap;width:1%}
#bg.rl-page .cb{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;
  justify-content:center;margin-right:5px;color:#fff!important;text-decoration:none;font-size:13px;
  position:relative;box-shadow:0 1px 3px rgba(16,34,56,.18)}
#bg.rl-page .cb:hover{filter:brightness(1.08);text-decoration:none}
#bg.rl-page .cb.chat{background:#17a2b8}
#bg.rl-page .cb.mail{background:#003e6c}
#bg.rl-page .cb.call{background:#9333ea}
#bg.rl-page .cb.sms{background:#e0872a}
#bg.rl-page .cb.push{background:#1c7a3e}
/* greyed out where we simply cannot reach them that way */
#bg.rl-page .cb.off{background:#eef1f5!important;color:#b3bdc9!important;box-shadow:none;cursor:not-allowed}
#bg.rl-page .cb.off:hover{filter:none}
#bg.rl-page .cb .dot{position:absolute;right:-2px;top:-2px;width:9px;height:9px;border-radius:50%;
  background:#c0392b;border:2px solid #fff}
/* Every property is its own table, so each one was sizing its columns to its
   own content and no two groups lined up. Fixed layout with explicit widths
   makes every group share one grid. */
#bg.rl-page #reserved-customers-table{table-layout:fixed}
#bg.rl-page #reserved-customers-table th:nth-child(1),
#bg.rl-page #reserved-customers-table td:nth-child(1){width:190px}
#bg.rl-page #reserved-customers-table th:nth-child(2),
#bg.rl-page #reserved-customers-table td:nth-child(2){width:118px}
#bg.rl-page #reserved-customers-table th:nth-child(3),
#bg.rl-page #reserved-customers-table td:nth-child(3){width:250px}
#bg.rl-page #reserved-customers-table th:nth-child(4),
#bg.rl-page #reserved-customers-table td:nth-child(4){width:150px}
#bg.rl-page #reserved-customers-table th:nth-child(5),
#bg.rl-page #reserved-customers-table td:nth-child(5){width:200px}
#bg.rl-page #reserved-customers-table th:nth-child(6),
#bg.rl-page #reserved-customers-table td:nth-child(6){width:auto}
#bg.rl-page #reserved-customers-table th:nth-child(7),
#bg.rl-page #reserved-customers-table td:nth-child(7){width:120px;text-align:right}
/* long emails must not push the grid out */
#bg.rl-page #reserved-customers-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bg.rl-page .rl-contact,#bg.rl-page .rl-crm{white-space:nowrap;overflow:visible!important}
#bg.rl-page #reserved-customers-table td:nth-child(3) a{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#bg.rl-page .rl-crm{min-width:0}
/* deals sheet: the draft pipeline figures above the embed */
.sheet-page .sheet-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
@media(max-width:900px){.sheet-page .sheet-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sheet-page .s-stat{background:#fff;border:1px solid #e3e8ee;border-radius:10px;padding:13px 16px;
  box-shadow:0 1px 2px rgba(16,34,56,.05)}
.sheet-page .s-stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#79879a;margin:0}
.sheet-page .s-stat .v{font-size:23px;font-weight:600;color:#14294f;margin:6px 0 0;
  font-variant-numeric:tabular-nums;line-height:1.15}
.sheet-page .s-stat .s{font-size:11.5px;color:#9aa8b8;margin:3px 0 0}
.sheet-page .s-stat.hi{background:#003e6c;border-color:#003e6c}
.sheet-page .s-stat.hi .k{color:rgba(255,255,255,.72)}
.sheet-page .s-stat.hi .v{color:#fff}
.sheet-page .s-stat.hi .s{color:rgba(255,255,255,.62)}
.sheet-page .s-stat.alert{background:#fff6f5;border-color:#f3ccc6}
.sheet-page .s-stat.alert .v{color:#a63428}
.sheet-page .s-stat.alert .s{color:#b4685e}
.sheet-page .sheet-note{font-size:12.5px;color:#79879a;margin:0 0 14px;line-height:1.55;max-width:900px}
.sheet-page .sheet-frame iframe{height:calc(100vh - 360px);min-height:460px}

/* =========================================================================
   Deals inbox — the native version of the deals sheet
   ========================================================================= */
#di.di-page{background:#f4f6f9;padding:18px 0 40px;font-weight:400;color:#2b3440}
#di .di-wrap{max-width:1660px;margin:0 auto;padding:0 22px}
#di .di-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px}
#di .di-head h1{font-size:26px;font-weight:700;color:#14294f;margin:0;letter-spacing:-.02em}
#di .di-head .tot{font-size:13px;color:#79879a;margin:6px 0 0}
#di .di-tools{margin-left:auto}
#di .di-sheet{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;
  background:#fff;border:1px solid #cfd8e3;color:#42536b!important;font-size:13.5px;font-weight:600;text-decoration:none}
#di .di-sheet:hover{border-color:#003e6c;color:#003e6c!important;text-decoration:none}

#di .di-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:900px){#di .di-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#di .di-stat{background:#fff;border:1px solid #e3e8ee;border-radius:10px;padding:13px 16px;box-shadow:0 1px 2px rgba(16,34,56,.05)}
#di .di-stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#79879a;margin:0}
#di .di-stat .v{font-size:23px;font-weight:600;color:#14294f;margin:6px 0 0;font-variant-numeric:tabular-nums;line-height:1.15}
#di .di-stat .s{font-size:11.5px;color:#9aa8b8;margin:3px 0 0}
#di .di-stat.hi{background:#003e6c;border-color:#003e6c}
#di .di-stat.hi .k{color:rgba(255,255,255,.72)}#di .di-stat.hi .v{color:#fff}#di .di-stat.hi .s{color:rgba(255,255,255,.62)}
#di .di-stat.alert{background:#fff6f5;border-color:#f3ccc6}#di .di-stat.alert .v{color:#a63428}#di .di-stat.alert .s{color:#b4685e}

#di .di-tabs{display:flex;gap:4px;background:#e9eef4;border-radius:9px;padding:3px;margin-bottom:12px;flex-wrap:wrap}
#di .di-tabs a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:7px;font-size:13px;
  color:#4c5c72!important;text-decoration:none;font-weight:500}
#di .di-tabs a:hover{background:rgba(255,255,255,.6);text-decoration:none}
#di .di-tabs a.on{background:#fff;color:#14294f!important;font-weight:700;box-shadow:0 1px 2px rgba(16,34,56,.12)}
#di .di-tabs .c{font-size:11.5px;color:#79879a;font-variant-numeric:tabular-nums}
#di .di-tabs a.on .c{color:#003e6c}

#di .di-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
#di .f-search{position:relative}
#di .f-search input{height:40px;width:330px;border:1px solid #dbe3ec;border-radius:8px;padding:0 14px 0 36px;
  font-size:13.5px;background:#fff;color:#2b3440}
#di .f-search input:focus{outline:0;border-color:#003e6c;box-shadow:0 0 0 3px rgba(0,62,108,.10)}
#di .f-search .mag{position:absolute;left:13px;top:12px;color:#9aa8b8;font-size:13px}
#di .di-filters select{height:40px;border:1px solid #dbe3ec;border-radius:8px;font-size:13.5px;padding:0 10px;background:#fff;color:#42536b}
#di .f-go{height:40px;padding:0 18px;border-radius:8px;background:#003e6c;color:#fff;border:0;font-size:13.5px;font-weight:600}
#di .f-clear{font-size:13px;color:#79879a;text-decoration:none}
#di .f-clear:hover{color:#003e6c}

#di .di-card{background:#fff;border:1px solid #e3e8ee;border-radius:12px;box-shadow:0 1px 2px rgba(16,34,56,.05)}
#di .di-scroll{overflow-x:auto;border-radius:12px 12px 0 0}
#di table.di{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;margin:0;table-layout:fixed}
#di table.di thead th{background:#f7f9fc;border-bottom:1px solid #e3e8ee;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:#79879a;padding:12px 12px;text-align:left;white-space:nowrap}
#di table.di thead th.r,#di table.di td.c-num{text-align:right}
#di table.di thead th.ra,#di table.di td.c-act{text-align:right}
#di table.di tbody td{border-bottom:1px solid #eef1f5;padding:11px 12px;vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#di table.di tbody tr:hover td{background:#f8fbfd}
#di table.di tbody tr:last-child td{border-bottom:0}
#di table.di th:nth-child(1),#di table.di td:nth-child(1){width:110px}
#di table.di th:nth-child(2),#di table.di td:nth-child(2){width:280px}
#di table.di th:nth-child(3),#di table.di td:nth-child(3){width:88px}
#di table.di th:nth-child(4),#di table.di td:nth-child(4){width:110px}
#di table.di th:nth-child(5),#di table.di td:nth-child(5){width:150px}
#di table.di th:nth-child(6),#di table.di td:nth-child(6){width:110px}
#di table.di th:nth-child(7),#di table.di td:nth-child(7){width:120px}
#di table.di th:nth-child(8),#di table.di td:nth-child(8){width:80px}
#di table.di th:nth-child(9),#di table.di td:nth-child(9){width:auto}
#di table.di th:nth-child(10),#di table.di td:nth-child(10){width:150px}
#di table.di th:nth-child(11),#di table.di td:nth-child(11){width:90px}
/* Plain selectable number - the ID gets copied out into GDrive folder names,
   so it is deliberately not a link. */
#di .c-id{font-variant-numeric:tabular-nums;color:#48586d;font-size:13px;user-select:all}
#di .c-date{color:#48586d;font-size:12.5px;font-variant-numeric:tabular-nums}
#di .c-date .mt{display:block;font-size:11px;color:#9aa8b8}
#di .c-prop{display:flex;flex-direction:column;min-width:0}
#di .c-prop .nm{font-weight:600;color:#14294f;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#di .c-prop .nm:hover{color:#003e6c;text-decoration:underline}
#di .c-prop .em{font-size:12px;color:#8a97a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#di .c-num{font-variant-numeric:tabular-nums;font-weight:600;color:#14294f}
#di .c-addr{color:#48586d;font-size:12.5px}
#di .c-src a{color:#003e6c;text-decoration:none;font-size:12.5px}
#di .c-src a:hover{text-decoration:underline}
#di .c-src .mt{display:block;font-size:11px;color:#9aa8b8}
#di .c-src .none{color:#c3ccd7}
#di .chip{display:inline-block;font-size:11px;font-weight:600;color:#22406b;background:#eaf0f7;
  border:1px solid #dce5f0;border-radius:20px;padding:2px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#di .st{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  border-radius:20px;padding:3px 9px;white-space:nowrap}
#di .st-1{background:#eef1f5;color:#5b6b80}
#di .st-11{background:#e8eef6;color:#22406b}
#di .st-2{background:#e4f8ea;color:#1c7a3e}
#di .st-4{background:#fdf0e2;color:#95601a}
#di .st-3{background:#eae6f5;color:#4b3b78}
#di .btn-view{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:7px;background:#003e6c;
  color:#fff!important;font-size:12.5px;font-weight:600;text-decoration:none}
#di .btn-view:hover{background:#14294f;text-decoration:none}
#di .di-empty{text-align:center;color:#9aa8b8;padding:40px 0!important;white-space:normal!important}
#di .di-foot{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid #eef1f5;
  background:#fbfcfe;border-radius:0 0 12px 12px}
#di .di-foot .info{font-size:12.5px;color:#79879a}
#di .di-foot .pg{margin-left:auto}
#di .di-foot .pagination{margin:0}
#di .di-foot .page-link{border-radius:7px!important;margin:0 2px;border:1px solid #dbe3ec;color:#4c5c72;font-size:12.5px}
#di .di-foot .page-item.active .page-link{background:#003e6c;border-color:#003e6c;color:#fff}
#di .di-note{font-size:12.5px;color:#79879a;margin:14px 0 0;line-height:1.55;max-width:900px}

/* =======================================================================
   Admin header restyle - brand navy + turquoise.            2026-08-30

   Appended rather than edited into the block above, for two reasons: the
   bar's old colour is set with !important in the Mix-compiled all.css
   (which must not be hand-edited), and other sessions edit this file, so a
   self-contained block at the end is the safest thing to add and the
   easiest to remove.

   pia-admin.css is the last stylesheet in <head>, so these win on order;
   !important appears only where it has to beat all.css.
   ======================================================================= */

#admin-nav {
    background-color: #14294f !important;
    border-bottom: 3px solid #21ced9;
    min-height: 58px;
    padding: 0 20px !important;
    align-items: center;
}

/* Brand: the official logo, white on navy, replacing the old text wordmark. */
#admin-nav #main-brand {
    display: flex;
    align-items: center;
    padding: 0 26px 0 0;
    margin: 0;
    flex-shrink: 0;
}

#admin-nav #main-brand img {
    height: 38px;
    width: auto;
    display: block;
}

/* Top-level links: flat, roomy, no underline rule. */
#admin-nav-ul > .nav-item > .nav-link {
    color: rgba(232, 239, 250, .72);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .002em;
    padding: 8px 14px;
    margin: 0 1px;
    border-bottom: none;
    border-radius: 5px;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

#admin-nav-ul > .nav-item > .nav-link:hover,
#admin-nav-ul > .nav-item > .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* Current page: a turquoise pill rather than the old underline. */
#admin-nav-ul > .nav-item > .nav-link.active-page {
    color: #21ced9;
    background: rgba(33, 206, 217, .16);
    border-bottom: none;
    font-weight: 600;
}

#admin-nav-ul > .nav-item > .nav-link.active-page:hover {
    background: rgba(33, 206, 217, .22);
    color: #21ced9;
}

#admin-nav-ul .pia-caret {
    font-size: 8.5px;
    opacity: .55;
    margin-left: 6px;
}

/* Dropdowns keep their white panel; only the trim is brought into line. */
#admin-nav-ul .pia-group > .pia-drop {
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 30px rgba(11, 29, 54, .28);
    margin-top: 3px;
}

#admin-nav-ul .pia-drop a:hover,
#admin-nav-ul .pia-drop a:focus {
    background: #eef7f9;
    color: #14294f !important;
}

#admin-nav-ul .pia-drop a.is-here {
    color: #14294f !important;
    background: #eef7f9;
    box-shadow: inset 3px 0 0 #21ced9;
}

/* Right-hand cluster: counter, Messages, who you are, logout. */
#message-calls-div .pia-chip {
    background: rgba(255, 255, 255, .1);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
}

#message-calls-div .pia-chip:hover {
    background: rgba(255, 255, 255, .18);
}

#admin-nav .pia-who {
    color: rgba(232, 239, 250, .58);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    white-space: nowrap;
    margin-left: 18px;
    align-self: center;
}

#admin-nav .pia-logout {
    color: rgba(232, 239, 250, .58) !important;
    font-size: 12.5px;
    margin-left: 16px;
}

#admin-nav .pia-logout:hover {
    color: #fff !important;
}

/* Narrow screens: the collapsed menu keeps the same palette. */
@media (max-width: 1199px) {
    #admin-nav { padding: 0 12px !important; }
    #admin-nav #main-brand { padding-right: 14px; }
    #admin-nav #main-brand img { height: 32px; }
    #admin-nav-ul > .nav-item > .nav-link { padding: 8px 10px; font-size: 13.5px; }
    #admin-nav .pia-who { display: none; }
}

@media (max-width: 991px) {
    #admin-nav-ul .pia-drop a.is-here { box-shadow: none; }
}

/* =========================================================================
   Podcasts — its own page. Deliberately does NOT touch the shared
   media.* components, which Articles and Adverts still render through.
   ========================================================================= */
#pod.pod-page{background:#f4f6f9;padding:18px 0 44px;font-weight:400;color:#2b3440}
#pod .pod-wrap{max-width:1400px;margin:0 auto;padding:0 22px}
#pod .pod-h1{font-size:26px;font-weight:700;color:#14294f;margin:6px 0 2px}
#pod .pod-sub{color:#79879a;font-size:13.5px;margin:0 0 18px}

#pod .pod-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
#pod .pod-card{background:#fff;border:1px solid #e3e9f0;border-radius:10px;padding:15px 17px}
#pod .pod-card.is-dark{background:#14294f;border-color:#14294f}
#pod .pod-card .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8a97a8;font-weight:600}
#pod .pod-card.is-dark .lbl{color:#9fb3d1}
#pod .pod-card .val{font-size:27px;font-weight:700;color:#14294f;margin:5px 0 3px;font-variant-numeric:tabular-nums}
#pod .pod-card.is-dark .val{color:#fff}
#pod .pod-card .mt{font-size:11.5px;color:#9aa8b8}
#pod .pod-card.is-dark .mt{color:#8fa6c8}
#pod .pod-card.is-warn{border-color:#f0c97a;background:#fffaf0}
#pod .pod-card.is-warn .val{color:#a86b12}
#pod .pod-card.is-warn .mt{color:#b07d28}

#pod .pod-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff6f6;
  border:1px solid #f2c9c9;border-radius:9px;padding:11px 15px;margin-bottom:16px;
  font-size:13px;color:#93313a}
#pod .pod-banner b{font-weight:600}
#pod .pod-banner a{color:#93313a;font-weight:600;text-decoration:underline}

#pod .pod-bar{display:flex;gap:10px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
#pod .pod-bar input[type=search]{height:40px;width:330px;border:1px solid #dbe3ec;border-radius:8px;
  padding:0 14px;font-size:13.5px;font-family:inherit}
#pod .pod-bar select{height:40px;border:1px solid #dbe3ec;border-radius:8px;padding:0 12px;
  font-size:13.5px;font-family:inherit;background:#fff;color:#2b3440}
#pod .pod-btn{height:40px;border:0;border-radius:8px;background:#003e6c;color:#fff!important;
  font-size:13.5px;font-weight:600;padding:0 18px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;font-family:inherit}
#pod .pod-btn.is-upload{background:#21CED9;color:#0b2b3d!important;margin-left:auto}
#pod .pod-clear{font-size:13px;color:#79879a;text-decoration:underline}
#pod .pod-notice{font-size:12px;color:#79879a;margin:0 0 16px;text-align:right}

#pod .pod-list{background:#fff;border:1px solid #e3e9f0;border-radius:11px;overflow:hidden}
#pod .pod-head,#pod .pod-row{display:grid;grid-template-columns:74px 1fr 105px 190px 92px;gap:14px;align-items:center}
#pod .pod-head{padding:11px 16px;background:#f7f9fc;border-bottom:1px solid #e7edf4;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#8a97a8;font-weight:600}
#pod .pod-head .ra{text-align:right}
#pod .pod-row{padding:13px 16px;border-bottom:1px solid #eef2f7}
#pod .pod-row:last-child{border-bottom:0}
#pod .pod-row:hover{background:#fbfcfe}
#pod .pod-row.is-broken{background:#fffaf9}
#pod .pod-art{width:74px;height:74px;border-radius:8px;border:1px solid #e3e9f0;
  background:#e9eef5 center/cover no-repeat}
#pod .pod-art.is-none{display:flex;align-items:center;justify-content:center;font-size:10px;
  color:#a9b6c5;text-align:center;line-height:1.3}
#pod .pod-main{min-width:0}
#pod .pod-top{display:flex;align-items:center;gap:9px;margin-bottom:3px;flex-wrap:wrap}
#pod .pod-ep{background:#eef3f9;color:#3f5878;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
#pod .pod-ep.is-none{background:#f2f4f7;color:#a9b6c5}
#pod .pod-title{font-weight:600;color:#14294f;text-decoration:none;font-size:14.5px}
#pod .pod-title:hover{color:#003e6c;text-decoration:underline}
#pod .pod-warn{background:#fdeaea;color:#b23b45;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:5px}
#pod .pod-desc{font-size:12.5px;color:#79879a;line-height:1.5;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#pod .pod-audio{margin-top:9px;width:100%;max-width:460px;height:34px;display:block}
#pod .pod-date{font-size:12.5px;color:#48586d;font-variant-numeric:tabular-nums;white-space:nowrap}
#pod .pod-act{display:flex;justify-content:flex-end}
#pod .pod-edit{border:1px solid #dbe3ec;background:#fff;color:#4c5c72;font-size:12.5px;font-weight:600;
  border-radius:7px;padding:7px 15px;text-decoration:none}
#pod .pod-edit:hover{border-color:#003e6c;color:#003e6c;text-decoration:none}
#pod .pod-empty{padding:40px 16px;text-align:center;color:#8a97a8;font-size:13.5px}

#pod .pod-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;
  font-size:12.5px;color:#79879a}
#pod .pod-foot .pagination{margin:0}
#pod .pod-foot .page-link{border-radius:7px!important;margin:0 2px;border:1px solid #dbe3ec;
  color:#4c5c72;font-size:12.5px}
#pod .pod-foot .page-item.active .page-link{background:#003e6c;border-color:#003e6c;color:#fff}

#pod .pod-reach{font-size:12px;line-height:1.5}
#pod .pod-reach .rc{color:#14294f;font-weight:600}
#pod .pod-reach .rc .n{font-variant-numeric:tabular-nums}
#pod .pod-reach .rb{color:#8a97a8;display:flex;flex-direction:column;gap:1px;margin-top:2px}
#pod .pod-reach .rb .hl{color:#0b6b78;font-weight:600}
#pod .pod-none{font-size:12px;color:#b9c4d1}

@media (max-width:1100px){
  #pod .pod-stats{grid-template-columns:repeat(2,1fr)}
  #pod .pod-head,#pod .pod-row{grid-template-columns:60px 1fr 96px}
  #pod .pod-reach{display:none}
  #pod .pod-head div:nth-child(4),#pod .pod-act{grid-column:3;justify-content:flex-start}
  #pod .pod-art{width:60px;height:60px}
}
