/* ============================================================
   Ghar Junction — Admin Redesign (scoped)
   Matches gj-admin-*-redesign mockups (Bricolage Grotesque / Inter,
   ink #1D1D1B, red #C9102F). Everything is scoped under .gjr so it
   can coexist with the legacy Bootstrap 3 admin theme page-by-page.
   ============================================================ */

.gjr{
  --ink:#1D1D1B; --soft:#61605E; --paper:#FFFFFF; --bg:#F4F3F2; --line:#E7E5E3;
  --red:#C9102F; --red-dk:#A50D26; --red-tint:#FBE9ED;
  --black:#1D1D1B; --black-2:#2B2B29; --tint:#EDEDEC;
  --green:#1B7A3D; --green-tint:#E7F5EC; --amber:#B45309; --amber-tint:#FCF0DF;
  --blue:#1D4ED8; --blue-tint:#E7EDFC;
  --radius:14px;
  --sh:0 1px 2px rgba(29,29,27,.05),0 8px 24px rgba(29,29,27,.06);
  --sh2:0 2px 4px rgba(29,29,27,.08),0 18px 40px rgba(29,29,27,.13);
  --fd:"Bricolage Grotesque",sans-serif; --fb:"Inter",system-ui,sans-serif;

  font-family:var(--fb); font-size:14px; color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- CRITICAL: neutralise legacy .wrapper{display:inline-block} ----------
   The old admin theme makes .wrapper an inline-block, which sizes to its
   content and blows the whole page out when a child (status tabs, table)
   has a wide min-content. Forcing block restores normal viewport sizing. */
section.wrapper.gjr{display:block !important;width:auto !important;min-width:0 !important;max-width:100% !important;margin-top:0 !important;padding-top:95px !important}
.gjr .status-tabs,.gjr .tbl-wrap{max-width:100%}
.gjr a:hover{text-decoration:none}

.gjr *{box-sizing:border-box}
.gjr a{text-decoration:none;color:inherit}
.gjr :focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------- Page head ---------- */
.gjr .page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:6px 0 18px;flex-wrap:wrap}
.gjr .page-head h1{font-family:var(--fd);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0;color:var(--ink)}
.gjr .page-head p{color:var(--soft);font-size:13px;margin:3px 0 0}
.gjr .head-acts{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.gjr .gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;
  border-radius:10px;border:none;font-weight:700;font-size:13.5px;transition:all .18s;white-space:nowrap;
  cursor:pointer;font-family:var(--fb);line-height:1.2}
.gjr .gbtn i{font-size:13px}
.gjr .gbtn-red{background:var(--red);color:#fff;box-shadow:0 5px 14px rgba(201,16,47,.32)}
.gjr .gbtn-red:hover{background:var(--red-dk);color:#fff;transform:translateY(-1px)}
.gjr .gbtn-dark{background:var(--black);color:#fff}
.gjr .gbtn-dark:hover{background:#000;color:#fff}
.gjr .gbtn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.gjr .gbtn-ghost:hover{border-color:var(--red);color:var(--red)}

/* ---------- Card ---------- */
.gjr .gcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh);margin-bottom:18px}

/* ---------- Status tabs (two-tier: parents wrap, subs of active parent below) ---------- */
.gjr .status-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:13px 15px;border-bottom:1px solid var(--line)}
.gjr .status-tabs a{display:inline-flex;gap:7px;align-items:center;padding:7px 14px;border:1.5px solid var(--line);
  border-radius:999px;font-weight:700;font-size:12.5px;color:var(--soft);white-space:nowrap;transition:all .15s;flex:none}
.gjr .status-tabs a i{font-style:normal;font-size:11px;opacity:.75}
.gjr .status-tabs a:hover{border-color:var(--red);color:var(--red)}
.gjr .status-tabs a.on{background:var(--black);border-color:var(--black);color:#fff}
.gjr .status-tabs a.dim{opacity:.5}
.gjr .status-tabs a.dim:hover{opacity:1}
.gjr .status-tabs a.total{background:var(--red-tint);border-color:var(--red-tint);color:var(--red-dk)}
.gjr .status-tabs a.total.on{background:var(--red);border-color:var(--red);color:#fff}

.gjr .status-subtabs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:10px 15px;
  border-bottom:1px solid var(--line);background:#FAF9F8}
.gjr .status-subtabs .lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-right:3px}
.gjr .status-subtabs a{display:inline-flex;gap:6px;align-items:center;padding:5px 12px;border:1.5px dashed var(--line);
  border-radius:999px;font-weight:600;font-size:12px;color:var(--soft);white-space:nowrap;transition:all .15s;background:#fff;flex:none}
.gjr .status-subtabs a i{font-style:normal;font-size:10.5px;opacity:.75}
.gjr .status-subtabs a:hover{border-color:var(--red);color:var(--red)}
.gjr .status-subtabs a.on{background:var(--red);border-color:var(--red);color:#fff;border-style:solid}
.gjr .status-subtabs a.clear-sub{border:none;background:none;color:var(--soft);font-size:11.5px}
.gjr .status-subtabs a.clear-sub:hover{color:var(--red)}

/* ---------- Filters ---------- */
.gjr .fil-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;cursor:pointer;user-select:none}
.gjr .fil-head h3{font-family:var(--fd);font-weight:800;font-size:14.5px;margin:0;display:flex;align-items:center;gap:9px}
.gjr .fil-head h3 i{color:var(--red);font-size:14px}
.gjr .fil-head .chev{transition:transform .2s;color:var(--soft)}
.gjr .fil-body.closed{display:none}
.gjr .fil-head.collapsed .chev{transform:rotate(-90deg)}
.gjr .fil-count{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 9px}

.gjr .fil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 14px;padding:4px 16px 14px;border-top:1px solid var(--line)}
.gjr .fil-grid .fg{display:flex;flex-direction:column;gap:5px;min-width:0}
.gjr .fil-grid .fg.wide{grid-column:span 2}
.gjr .fil-grid label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin:8px 0 0}
.gjr .fil-grid input[type=text],
.gjr .fil-grid input[type=search],
.gjr .fil-grid select{
  width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#FAFAF9;
  font:inherit;font-size:13px;color:var(--ink);transition:all .18s;height:auto;box-shadow:none}
.gjr .fil-grid input:focus,.gjr .fil-grid select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);background:#fff}
.gjr .range{display:flex;align-items:center;gap:7px}
.gjr .range span{font-size:11px;color:var(--soft);font-weight:700;flex:none}
.gjr .fil-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:12px 16px;border-top:1px solid var(--line);background:#FAF9F8;border-radius:0 0 var(--radius) var(--radius);flex-wrap:wrap}
.gjr .fil-foot .clear{margin-right:auto;font-size:12.5px;font-weight:700;color:var(--soft)}
.gjr .fil-foot .clear:hover{color:var(--red)}

/* Active filter chips */
.gjr .chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px 12px}
.gjr .chips .chip{display:inline-flex;align-items:center;gap:6px;background:var(--tint);border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700;color:var(--ink)}
.gjr .chips .chip b{color:var(--soft);font-weight:600}

/* ---------- Table ---------- */
.gjr .tbl-wrap{overflow-x:auto;border-radius:0 0 var(--radius) var(--radius)}
.gjr table.gl-table{width:100%;border-collapse:collapse;font-size:13px;min-width:900px;margin:0}
.gjr .gl-table th{text-align:left;padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--soft);border-bottom:1.5px solid var(--line);background:#FAF9F8;white-space:nowrap}
.gjr .gl-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;background:transparent}
.gjr .gl-table tbody tr:hover td{background:#FAF6F7}
.gjr .gl-table td .nm{font-weight:700;font-size:13.5px}
.gjr .gl-table .sub{display:block;font-size:12px;color:var(--soft);margin-top:1px;word-break:break-word}
.gjr .gl-table .sub b{font-weight:700;color:var(--ink)}
.gjr .gl-table .cmt{display:block;font-size:12px;color:var(--soft);margin-top:5px;max-width:320px;background:#FAFAF9;border-left:3px solid var(--line);padding:5px 8px;border-radius:0 8px 8px 0}
.gjr .gl-table td.id-cell{color:var(--soft);font-weight:700}

/* Status pills */
.gjr .pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.gjr .p-new{background:var(--red-tint);color:var(--red)}
.gjr .p-fup{background:var(--amber-tint);color:var(--amber)}
.gjr .p-visit{background:var(--blue-tint);color:var(--blue)}
.gjr .p-conv{background:var(--green-tint);color:var(--green)}
.gjr .p-drop{background:var(--tint);color:var(--soft)}

/* Row actions */
.gjr .acts{display:flex;gap:6px;flex-wrap:nowrap}
.gjr .icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;transition:all .15s}
.gjr .icon-btn i{font-size:13px;color:var(--soft)}
.gjr .icon-btn:hover{border-color:var(--red)}
.gjr .icon-btn:hover i{color:var(--red)}
.gjr .icon-btn.wa:hover{border-color:#1FAF57}
.gjr .icon-btn.wa:hover i{color:#1FAF57}
.gjr .icon-btn.call{border-color:#CFE6D8;background:#F1FAF4}
.gjr .icon-btn.call i{color:#1B7A3D}
.gjr .icon-btn.call:hover{border-color:#1B7A3D}

/* Table footer / pagination */
.gjr .tfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;font-size:12.5px;color:var(--soft);flex-wrap:wrap;border-top:1px solid var(--line)}
.gjr .tfoot .pagination{margin:0;display:flex;gap:6px;border-radius:0;box-shadow:none}
.gjr .tfoot .pagination li a,
.gjr .tfoot .pagination li span{min-width:34px;height:34px;display:grid;place-items:center;border:1.5px solid var(--line)!important;
  border-radius:9px!important;font-weight:700;font-size:12.5px;color:var(--soft)!important;background:#fff!important;padding:0 8px;margin:0;float:none}
.gjr .tfoot .pagination li.active span{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
.gjr .tfoot .pagination li a:hover{border-color:var(--red)!important;color:var(--red)!important}
.gjr .tfoot .pagination li.disabled span{opacity:.45}

.gjr .empty{padding:44px 20px;text-align:center;color:var(--soft)}
.gjr .empty i{font-size:30px;color:var(--line);display:block;margin-bottom:10px}
.gjr .empty b{font-family:var(--fd);font-size:15.5px;color:var(--ink);display:block}

/* ---------- Responsive ---------- */
@media (max-width:1200px){ .gjr .fil-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){
  .gjr{overflow-x:hidden} /* clip any residual bleed on small screens */
  .gjr .fil-grid{grid-template-columns:repeat(2,1fr)}
  .gjr .fil-grid .fg.wide{grid-column:span 2}

  /* ---- table -> stacked cards (bulletproof block layout, no flex) ---- */
  .gjr .tbl-wrap{overflow:hidden;padding:12px 0 2px}
  .gjr .gl-table{min-width:0;width:100%;display:block}
  .gjr .gl-table thead{display:none}
  .gjr .gl-table tbody{display:block;width:100%}
  .gjr .gl-table tbody tr{display:block;width:auto;max-width:100%;border:1px solid var(--line);
    border-radius:12px;margin:0 12px 12px;background:#fff;overflow:hidden;box-shadow:var(--sh)}
  .gjr .gl-table tbody tr:hover td{background:transparent}
  .gjr .gl-table td{display:block;width:auto;max-width:100%;padding:9px 14px;
    border-bottom:1px dashed var(--line);overflow-wrap:anywhere;word-wrap:break-word;word-break:break-word;white-space:normal;overflow:hidden}
  .gjr .gl-table td *{max-width:100%}
  .gjr .gl-table td .sub,.gjr .gl-table td .cmt{white-space:normal;word-wrap:break-word}
  .gjr .gl-table td::before{content:attr(data-l);display:block;font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 3px}
  .gjr .gl-table td:last-child{border-bottom:0;background:#FAF9F8}
  .gjr .gl-table td .cmt{max-width:none}
  /* Id renders as a compact card header: "Lead #100" */
  .gjr .gl-table td.id-cell{background:#FAF9F8;border-bottom:1px solid var(--line);
    font-family:var(--fd);font-weight:800;font-size:13.5px;color:var(--ink);padding:8px 14px}
  .gjr .gl-table td.id-cell::before{content:"Lead #";display:inline;margin:0;font-size:12px;
    letter-spacing:.02em;text-transform:none;color:var(--soft)}
  .gjr .acts{gap:8px}
  .gjr .icon-btn{width:38px;height:38px}
}
@media (max-width:760px){
  .gjr input,.gjr select{font-size:16px!important} /* prevent iOS zoom */
  .gjr .fil-grid{grid-template-columns:1fr}
  .gjr .fil-grid .fg.wide{grid-column:auto}
  .gjr .page-head h1{font-size:21px}
  .gjr .head-acts{width:100%}
  .gjr .head-acts .gbtn{padding:9px 12px;font-size:12.5px;flex:1 1 auto;justify-content:center}
  .gjr .fil-foot{justify-content:stretch}
  .gjr .fil-foot .gbtn{flex:1 1 auto}
  .gjr .fil-foot .clear{flex:1 1 100%;margin:0 0 4px}
  .gjr .tfoot{justify-content:center}
  .gjr .range input{min-width:0;flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){ .gjr *{transition:none!important} }


/* ============================================================
   Lead Create/Edit wizard pages (jquery.steps restyle, CSS-only)
   ============================================================ */

/* Panels (Edit Lead / History / Communication Logs cards) */
.gjr section.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh);margin-bottom:18px;overflow:hidden}
.gjr .panel-heading{background:#FAF9F8 !important;border-bottom:1px solid var(--line);
  font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);
  padding:14px 18px;text-transform:capitalize}
.gjr .panel-heading .tools a{color:var(--soft)}
.gjr .panel-body{padding:18px}

/* Step pills (jquery.steps generates .steps > ul > li > a with .number) */
.gjr .wizard > .steps{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.gjr .wizard > .steps > ul{display:flex;flex-wrap:nowrap;gap:8px;padding:4px 2px 12px;margin:0;list-style:none}
.gjr .wizard > .steps > ul > li{width:auto !important;flex:none;float:none;margin:0}
.gjr .wizard > .steps > ul > li a,
.gjr .wizard > .steps > ul > li a:hover,
.gjr .wizard > .steps > ul > li a:active{
  display:flex;gap:9px;align-items:center;margin:0;padding:9px 16px;border-radius:999px;
  background:#fff;border:1.5px solid var(--line);color:var(--soft);
  font-weight:700;font-size:13px;text-decoration:none;transition:all .15s}
.gjr .wizard > .steps a .number{font-family:var(--fd);font-weight:800;font-size:11.5px;
  background:var(--tint);color:var(--soft);border-radius:999px;min-width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.gjr .wizard > .steps .done a,
.gjr .wizard > .steps .done a:hover,
.gjr .wizard > .steps .done a:active{background:var(--red-tint);border-color:var(--red-tint);color:var(--red-dk)}
.gjr .wizard > .steps .done a .number{background:#fff;color:var(--red)}
.gjr .wizard > .steps .current a,
.gjr .wizard > .steps .current a:hover,
.gjr .wizard > .steps .current a:active{background:var(--black);border-color:var(--black);color:#fff}
.gjr .wizard > .steps .current a .number{background:var(--red);color:#fff}
.gjr .wizard > .steps .disabled a,
.gjr .wizard > .steps .disabled a:hover{opacity:.5;cursor:default}

/* Form fields inside the wizard (overrides grey label bars from legacy style.css) */
.gjr .wizard > .content{background:transparent;border:none;border-radius:0}
.gjr .wizard > .content > .body label,
.gjr .form-horizontal .control-label{
  background:transparent !important;line-height:1.5 !important;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);text-align:left;padding-top:12px}
.gjr .control-label .red,.gjr label .red{color:var(--red);font-style:normal}
.gjr .form-control{
  padding:10px 13px;height:auto;border:1.5px solid var(--line);border-radius:10px;
  background:#FAFAF9;box-shadow:none;font-size:14px;color:var(--ink);transition:all .18s}
.gjr .form-control:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);background:#fff}
.gjr select.form-control{padding-right:30px}
.gjr textarea.form-control{min-height:90px}
.gjr .form-group{margin-bottom:4px}
.gjr .customdisable{opacity:.65}
.gjr #form-errors .alert,.gjr .errormessage{font-size:12.5px}

/* Wizard action buttons (Previous / Save and Continue / Finish) */
.gjr .wizard > .actions{padding:6px 0 2px}
.gjr .wizard > .actions > ul{display:flex;gap:10px;justify-content:flex-end;list-style:none;margin:0;padding:0}
.gjr .wizard > .actions > ul > li{float:none;margin:0}
.gjr .wizard > .actions a,
.gjr .wizard > .actions a:hover,
.gjr .wizard > .actions a:active{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;
  padding:11px 20px;border-radius:10px;border:none;font-weight:700;font-size:13.5px;
  background:var(--red);color:#fff;box-shadow:0 5px 14px rgba(201,16,47,.32);
  text-decoration:none;transition:all .18s}
.gjr .wizard > .actions a:hover{background:var(--red-dk);transform:translateY(-1px)}
.gjr .wizard > .actions a[href="#previous"],
.gjr .wizard > .actions a[href="#previous"]:hover{
  background:#fff;border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.gjr .wizard > .actions a[href="#previous"]:hover{border-color:var(--red);color:var(--red)}
.gjr .wizard > .actions .disabled a,
.gjr .wizard > .actions .disabled a:hover{background:var(--tint);color:var(--soft);box-shadow:none;transform:none;cursor:default;border:none}

/* History / Communication Logs tables */
.gjr table.gj-log{width:100%;border-collapse:collapse;font-size:13px;margin:0}
.gjr .gj-log th{text-align:left;padding:11px 14px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--soft);border-bottom:1.5px solid var(--line);background:#FAF9F8;white-space:nowrap}
.gjr .gj-log td{padding:12px 14px;border-bottom:1px solid var(--line);border-top:none;vertical-align:top}
.gjr .gj-log tbody tr:hover td{background:#FAF6F7}

/* ---- Wizard pages: mobile ---- */
@media (max-width:900px){
  .gjr .gj-log thead{display:none}
  .gjr table.gj-log,.gjr .gj-log tbody,.gjr .gj-log tbody tr,.gjr .gj-log td{display:block;width:auto;max-width:100%}
  .gjr .gj-log tbody tr{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;background:#fff;overflow:hidden}
  .gjr .gj-log td{border-bottom:1px dashed var(--line);padding:9px 14px;overflow-wrap:anywhere;word-wrap:break-word}
  .gjr .gj-log td:last-child{border-bottom:0}
  .gjr .gj-log td::before{content:attr(data-l);display:block;font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:2px}
}
@media (max-width:760px){
  .gjr .panel-body{padding:14px}
  .gjr .wizard > .actions > ul{justify-content:stretch}
  .gjr .wizard > .actions > ul > li{flex:1 1 auto}
  .gjr .wizard > .actions a{width:100%}
  .gjr .form-horizontal .control-label{padding-top:8px;padding-bottom:2px}
}


/* ============ Quick Add Lead modal ============ */
.gjr .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.gjr .qa-fg{display:flex;flex-direction:column;gap:5px;min-width:0}
.gjr .qa-fg.qa-full{grid-column:1/-1}
.gjr .qa-fg label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin:0;padding:0;background:transparent}
.gjr .qa-fg label em{color:var(--red);font-style:normal}
.gjr .qa-err{font-size:11.5px;color:var(--red);font-weight:600;min-height:0}
.gjr .qa-err:empty{display:none}
@media (max-width:600px){ .gjr .qa-grid{grid-template-columns:1fr} }


/* Save & Exit wizard action (first step) */
.gjr .wizard > .actions a[href="#saveexit"],
.gjr .wizard > .actions a[href="#saveexit"]:hover,
.gjr .wizard > .actions a[href="#saveexit"]:active{
  background:var(--black);color:#fff;box-shadow:none;border:none}
.gjr .wizard > .actions a[href="#saveexit"]:hover{background:#000;transform:translateY(-1px)}
@media (max-width:760px){ .gjr .wizard > .actions li.gj-saveexit{margin-right:0 !important} }


/* ============================================================
   Dashboard (admin/home) — stat cards, tables, chart panels
   ============================================================ */
.gjr .mini-stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh);padding:18px;margin-bottom:16px;position:relative;overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s}
.gjr .mini-stat::after{content:"";position:absolute;top:0;left:18px;width:38px;height:4px;
  background:var(--red);border-radius:0 0 4px 4px}
.gjr a:hover .mini-stat{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#F2CBD3}
.gjr .mini-stat-icon,
.gjr .mini-stat-icon.red-b{
  width:50px;height:50px;line-height:50px;font-size:19px;border-radius:13px;
  background:var(--red-tint) !important;color:var(--red) !important;float:right;margin:2px 0 0}
.gjr .mini-stat-info{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--soft);padding-top:0}
.gjr .mini-stat-info span{font-family:var(--fd);font-size:30px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1.15;margin-bottom:2px}

/* Dashboard/DataTables tables: modern header + rows, horizontal scroll on small screens
   (structure untouched — DataTables keeps working) */
.gjr .adv-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gjr .adv-table table.display,
.gjr .adv-table table.table{border:none;margin-bottom:8px}
.gjr .adv-table table.display th,
.gjr .adv-table table.table th{
  text-align:left;padding:11px 13px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soft);background:#FAF9F8 !important;
  border:none;border-bottom:1.5px solid var(--line)}
.gjr .adv-table table.display td,
.gjr .adv-table table.table td{
  padding:12px 13px;border:none;border-bottom:1px solid var(--line);
  vertical-align:top;background:transparent !important;font-size:13px}
.gjr .adv-table table.table-striped>tbody>tr:nth-of-type(odd)>td{background:transparent !important}
.gjr .adv-table tbody tr:hover td{background:#FAF6F7 !important}
.gjr .table-bordered,.gjr .table-bordered>thead>tr>th,
.gjr .table-bordered>tbody>tr>td{border-color:var(--line)}

/* DataTables chrome (search / length / pagination) */
.gjr .dataTables_filter input,.gjr .dataTables_length select{
  padding:7px 11px;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-size:13px;margin-left:6px}
.gjr .dataTables_filter input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.gjr .dataTables_paginate .paginate_enabled_next,.gjr .dataTables_paginate .paginate_enabled_previous,
.gjr .dataTables_paginate .paginate_disabled_next,.gjr .dataTables_paginate .paginate_disabled_previous,
.gjr .dataTables_paginate a{font-weight:700;color:var(--soft)}
.gjr .dataTables_paginate a:hover{color:var(--red)}
.gjr .dataTables_info{color:var(--soft);font-size:12.5px}

/* Stat card grid on smaller screens: 2-up instead of stacked */
@media (max-width:991px){
  .gjr a > .col-md-3,.gjr .col-md-3{width:50%;float:left}
  .gjr .mini-stat{padding:14px}
  .gjr .mini-stat-icon,.gjr .mini-stat-icon.red-b{width:40px;height:40px;line-height:40px;font-size:15px}
  .gjr .mini-stat-info span{font-size:24px}
}
@media (max-width:400px){
  .gjr .mini-stat-info{font-size:10px}
}


/* ============ Enquiries page ============ */
.gjr .status-tabs .stat-chip{display:inline-flex;gap:7px;align-items:center;padding:8px 15px;
  border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:12.5px;
  color:var(--ink);white-space:nowrap;flex:none;background:#fff}
.gjr .status-tabs .stat-chip i{font-style:normal;font-family:var(--fd);font-weight:800;color:var(--red)}
.gjr .status-tabs .stat-chip.total{background:var(--red-tint);border-color:var(--red-tint);color:var(--red-dk)}
.gjr .status-tabs .stat-chip.total i{color:var(--red-dk)}

/* Row states: duplicate / read */
.gjr .gl-table tbody tr.duplicate td:first-child{box-shadow:inset 4px 0 0 var(--red)}
.gjr .gl-table tbody tr.duplicate td{background:#FDF3F5}
.gjr .gl-table tbody tr.green td:first-child{box-shadow:inset 4px 0 0 var(--green)}
.gjr .gl-table tbody tr:hover td{background:#FAF6F7}
.gjr .dup-link{color:var(--red);font-weight:700}
.gjr .dup-link:hover{text-decoration:underline}

/* Inline filter validation errors */
.gjr .gj-ferr{font-size:11.5px;color:var(--red);font-weight:600}
.gjr .gj-ferr:empty{display:none}

@media (max-width:900px){
  .gjr .gl-table tbody tr.duplicate{border-left:4px solid var(--red)}
  .gjr .gl-table tbody tr.green{border-left:4px solid var(--green)}
  .gjr .gl-table tbody tr.duplicate td:first-child,
  .gjr .gl-table tbody tr.green td:first-child{box-shadow:none}
}


/* ============ Enquiry create/edit forms ============ */
.gjr .red.error,.gjr .error{font-size:11.5px;font-weight:600;color:var(--red);margin-top:4px;line-height:1.3}
.gjr .error:empty{display:none}
.gjr .btn-success{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;border:none;
  font-weight:700;font-size:13.5px;background:var(--red);color:#fff;
  box-shadow:0 5px 14px rgba(201,16,47,.32);transition:all .18s;text-shadow:none}
.gjr .btn-success:hover,.gjr .btn-success:focus,.gjr .btn-success:active{
  background:var(--red-dk);color:#fff;transform:translateY(-1px)}
.gjr .btn-default{border-radius:10px;border:1.5px solid var(--line);font-weight:700;padding:10px 18px}
.gjr .btn-default:hover{border-color:var(--red);color:var(--red)}


/* ============ Leads view switcher (All Leads | Follow-ups) ============ */
.gjr .view-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.gjr .view-tabs a{display:inline-flex;gap:8px;align-items:center;padding:10px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13px;color:var(--soft);transition:all .15s}
.gjr .view-tabs a:hover{border-color:var(--red);color:var(--red)}
.gjr .view-tabs a.on{background:var(--black);border-color:var(--black);color:#fff}
.gjr .view-tabs a .ct{font-style:normal;font-size:11px;background:var(--red);color:#fff;border-radius:999px;padding:1px 8px}
.gjr .view-tabs a:not(.on) .ct{background:var(--red-tint);color:var(--red-dk)}
.gjr .gj-mini-select{padding:9px 30px 9px 13px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;font-weight:600;font-size:13px;color:var(--ink)}

/* ============ Follow-ups tab card (radio-driven, no JS) ============ */
.gjr input.tabr{position:absolute;opacity:0;pointer-events:none}
.gjr .tabbar{display:flex;gap:2px;border-bottom:1.5px solid var(--line);padding:0 10px;overflow-x:auto;
  background:#FAF9F8;border-radius:var(--radius) var(--radius) 0 0}
.gjr .tabbar label{display:flex;gap:8px;align-items:center;padding:14px 16px;font-weight:700;font-size:13.5px;
  color:var(--soft);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s;margin:0}
.gjr .tabbar label .ct{font-style:normal;font-size:11px;background:var(--tint);border-radius:999px;padding:1px 8px}
.gjr .tabbar label .ct.od{background:var(--red-tint);color:var(--red-dk)}
.gjr .pane{display:none;padding:0}
.gjr #ftA:checked ~ .tabbar label[for=ftA],.gjr #ftB:checked ~ .tabbar label[for=ftB],
.gjr #ftC:checked ~ .tabbar label[for=ftC],.gjr #ftD:checked ~ .tabbar label[for=ftD]{
  color:var(--ink);border-bottom-color:var(--red)}
.gjr #ftA:checked ~ .panes #fpA,.gjr #ftB:checked ~ .panes #fpB,
.gjr #ftC:checked ~ .panes #fpC,.gjr #ftD:checked ~ .panes #fpD{display:block}
.gjr .fu-table .nm{display:block;font-weight:700;color:var(--ink)}
.gjr .fu-table .nm:hover{color:var(--red)}
.gjr .gj-od{color:var(--red)}
.gjr .cmt-line{max-width:340px;overflow-wrap:anywhere}
@media (max-width:900px){ .gjr .cmt-line{max-width:none} }


/* Dashboard: today's follow-ups banner */
.gjr .gj-fu-banner{display:flex;align-items:center;gap:14px;background:#FFF6E8;border:1.5px solid #F2D9AE;
  border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;color:var(--ink);transition:all .18s}
.gjr .gj-fu-banner:hover{border-color:#E5B96A;transform:translateY(-1px);box-shadow:var(--sh)}
.gjr .gj-fu-banner .ic{width:40px;height:40px;border-radius:11px;background:#F7B32B22;color:#B77800;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.gjr .gj-fu-banner .tx{flex:1;font-size:13.5px;line-height:1.45}
.gjr .gj-fu-banner .tx b{font-family:var(--fd);font-size:15px}
.gjr .gj-fu-banner .go{font-weight:800;font-size:13px;color:var(--red);white-space:nowrap}
@media (max-width:600px){ .gjr .gj-fu-banner{flex-wrap:wrap} .gjr .gj-fu-banner .go{width:100%;text-align:right} }


/* ============ Lead profile header (on edit page, UI-only) ============ */
.gjr .gj-lead-profile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh);padding:18px 20px;margin-bottom:18px}
.gjr .lp-back{font-size:12.5px;font-weight:700;color:var(--soft)}
.gjr .lp-back:hover{color:var(--red)}
.gjr .lp-main{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px;flex-wrap:wrap}
.gjr .lp-id h1{font-family:var(--fd);font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;display:inline}
.gjr .lp-id .pill{margin-left:10px;vertical-align:middle}
.gjr .lp-meta{display:block;margin-top:5px;font-size:12.5px;color:var(--soft);font-weight:600}
.gjr .lp-acts{display:flex;gap:8px;flex-wrap:wrap}
.gjr .lp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gjr .lp-chip{display:inline-flex;gap:7px;align-items:center;padding:6px 12px;border:1px solid var(--line);
  border-radius:9px;font-size:12.5px;color:var(--ink);background:#FAFAF9}
.gjr .lp-chip b{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--soft);text-transform:uppercase}
.gjr .lp-next{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 14px;border-radius:11px;
  background:#FFF6E8;border:1px solid #F2D9AE;font-size:13px;line-height:1.5}
.gjr .lp-next i{color:#B77800;margin-top:2px}
.gjr .lp-next.past{background:var(--red-tint);border-color:#F2CBD3}
.gjr .lp-next.past i{color:var(--red)}
@media (max-width:640px){
  .gjr .lp-acts{width:100%}
  .gjr .lp-acts .gbtn{flex:1;justify-content:center}
}

/* ============================================================
   GLOBAL CHROME (not .gjr-scoped) — sidebar, header brand, login.
   Applies on every admin page so the shell matches the redesign
   even on pages that have not adopted the .gjr content styles.
   ============================================================ */

/* ---------- Header / brand ---------- */
.header{background:#FFFFFF;border-bottom:1px solid #E7E5E3}
.fixed-top{box-shadow:0 1px 2px rgba(29,29,27,.04)}
.brand{
  background:#1D1D1B;
  border-right:1px solid #2B2B29;
  display:flex;
  align-items:center;
  padding-left:16px;
}
.brand a.logo{
  background:#fff;
  border-radius:12px;
  padding:6px 10px;
  position:static;
  float:none;
  display:block;
  line-height:0;
}
/* the blade sets width=120 — cap by height so the chip always fits the 80px bar */
.brand a.logo img{width:auto !important;max-height:50px;display:block}
.sidebar-toggle-box{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
}
.sidebar-toggle-box .fa-bars{color:#B9B9B7;font-size:19px}
.sidebar-toggle-box .fa-bars:hover{color:#fff}
.top-nav .username{color:#1D1D1B;font-weight:600;font-size:13px}
.top-nav ul.top-menu>li>a{border:1.5px solid #E7E5E3;background:#F4F3F2;padding:3px 12px 3px 3px}
.top-nav ul.top-menu>li>a:hover,.top-nav ul.top-menu>li>a:focus{border-color:#C9102F !important;background:#fff}
.top-nav .dropdown-menu.extended.logout{border:1px solid #E7E5E3;border-radius:12px;box-shadow:0 8px 24px rgba(29,29,27,.12);padding:6px}
.dropdown-menu.extended li a{border-radius:8px;font-weight:600;color:#1D1D1B !important}
.dropdown-menu.extended li a:hover{background:#FBE9ED !important;color:#C9102F !important}

/* ---------- Sidebar ---------- */
#sidebar{background:#1D1D1B}
ul.sidebar-menu{margin-top:92px;padding:0 10px 20px}
ul.sidebar-menu li a{
  border-radius:10px;margin-bottom:3px;padding:11px 13px;
  font-weight:600;font-size:13px;color:#B9B9B7;border-bottom:none;
}
ul.sidebar-menu li a span{font-size:13px}
ul.sidebar-menu li a i{color:#B9B9B7;opacity:.9}
ul.sidebar-menu li a:hover,ul.sidebar-menu li a:focus{background:#2B2B29;color:#fff}
ul.sidebar-menu li a:hover i,ul.sidebar-menu li a:focus i{color:#fff}
ul.sidebar-menu li a.active{background:#C9102F;color:#fff}
ul.sidebar-menu li a.active i{color:#fff}
#sidebar>ul>li>ul.sub,ul.sidebar-menu li ul.sub{background:transparent}
ul.sidebar-menu li ul.sub li a{background:transparent;color:#9C9C9A;font-size:12.5px;padding:8px 12px 8px 34px;border-radius:9px}
ul.sidebar-menu li ul.sub li a i{font-size:12px;color:#7A7A78}
ul.sidebar-menu li ul.sub li a:hover,ul.sidebar-menu li ul.sub li.active a{background:#2B2B29;color:#fff}
ul.sidebar-menu li a.subactive,ul.sidebar-menu li ul.sub li a.subactive{background:#C9102F;color:#fff !important}
ul.sidebar-menu li a.subactive i{color:#fff}
.dcjq-icon{filter:invert(.6)}
#sidebar::-webkit-scrollbar-thumb{background:#2B2B29}

/* ---------- Login page ---------- */
.login-body .form-signin{
  background:#fff;border-radius:18px;border-top:6px solid #C9102F;
  box-shadow:0 30px 80px rgba(0,0,0,.38);padding:28px 26px;
}
.form-signin h2.form-signin-heading{
  font-family:"Bricolage Grotesque",sans-serif;background:transparent;color:#1D1D1B;
  font-weight:800;text-align:center;border-radius:18px 18px 0 0;
}
.login-body .form-signin .form-control{border:1.5px solid #E7E5E3;border-radius:10px;background:#FAFAF9;box-shadow:none}
.login-body .form-signin .form-control:focus{border-color:#C9102F;box-shadow:0 0 0 3px #FBE9ED;background:#fff}
.form-signin .btn-login{
  font-family:"Bricolage Grotesque",sans-serif;background:#C9102F;border-color:#C9102F;color:#fff;border-radius:11px;
}
.form-signin .btn-login:hover{background:#A50D26}
.login-body .checkbox{color:#61605E}

/* ---------- Sidebar polish: clean sub-menu tree, calmer states ---------- */
/* sub-menu as an indented tree with a guide rail — no stacked slabs */
ul.sidebar-menu li ul.sub{
  margin:4px 8px 10px 24px !important;
  padding:0 0 0 10px !important;
  border-left:2px solid #2B2B29;
}
ul.sidebar-menu li ul.sub li{background:transparent !important;margin:0 !important;border:none !important}
#sidebar .sub-menu>.sub li a,
ul.sidebar-menu li ul.sub li a{
  height:auto;
  padding:8px 11px !important;
  font-size:12.5px;
  border-radius:8px;
  margin-bottom:1px;
}
ul.sidebar-menu li ul.sub li a:hover{background:#2B2B29;color:#fff}
/* active sub item: compact red pill */
ul.sidebar-menu li a.subactive,
ul.sidebar-menu li ul.sub li a.subactive{
  background:#C9102F;
  color:#fff !important;
  font-weight:700;
}
/* parent whose section is open/active: subtle dark + red icon (so only the
   actual current page shows the big red pill, not the whole chain) */
ul.sidebar-menu li.sub-menu>a.active{background:#2B2B29;color:#fff}
ul.sidebar-menu li.sub-menu>a.active i{color:#C9102F}
/* icon alignment rhythm */
ul.sidebar-menu li a i{width:18px;text-align:center}
/* nicescroll rail: match the dark theme (kills the teal line) */
.nicescroll-rails{background:transparent !important}
.nicescroll-rails>div{background:#3A3A38 !important;border:none !important}

/* sub-menu icons: always match the label colour (grey -> white on hover/active) */
#sidebar .sub-menu>.sub li a i,
ul.sidebar-menu li ul.sub li a i{color:inherit !important;opacity:.9}

/* active sub item on hover: legacy turns the bg light (#f1f2f7 !important) —
   flip text + icon to black there so the label stays readable */
ul.sidebar-menu li a.subactive:hover,
ul.sidebar-menu li ul.sub li a.subactive:hover,
#sidebar .sub-menu>.sub li a.subactive:hover{
  background:#f1f2f7 !important;
  color:#000 !important;
}
ul.sidebar-menu li a.subactive:hover i,
ul.sidebar-menu li ul.sub li a.subactive:hover i,
#sidebar .sub-menu>.sub li a.subactive:hover i{color:#000 !important;opacity:1}

/* bootstrap-reset colors .btn-success dark with !important — win it back inside .gjr */
.gjr .btn-success{background-color:#C9102F !important;border-color:#C9102F !important;color:#fff !important}
.gjr .btn-success:hover,.gjr .btn-success:focus,.gjr .btn-success:active{background-color:#A50D26 !important;border-color:#A50D26 !important;color:#fff !important}

/* ============================================================
   .gjr generic module support — legacy listing tables + DataTables
   chrome, so any module page wrapped in .gjr gets the clean look
   without markup changes (same pattern as the banner module).
   ============================================================ */
/* legacy bordered/striped tables -> gl-table look */
.gjr .adv-table table.display thead th,
.gjr table.display.table thead th,
.gjr .table>thead>tr>th{
  text-align:left;padding:12px 14px !important;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--soft);border:none !important;border-bottom:1.5px solid var(--line) !important;
  background:#FAF9F8 !important;vertical-align:middle;
}
.gjr .adv-table table.display tbody td,
.gjr table.display.table tbody td,
.gjr .table>tbody>tr>td{
  padding:12px 14px !important;border:none !important;border-bottom:1px solid var(--line) !important;
  vertical-align:top;line-height:1.55;
}
.gjr table.display.table,.gjr .adv-table .table-bordered{border:none !important}
.gjr .table-striped>tbody>tr:nth-of-type(odd)>td,
.gjr .table-striped>tbody>tr:nth-of-type(even)>td,
.gjr table.display tr.odd td,.gjr table.display tr.even td{background:#fff}
.gjr table.display tbody tr:hover td,
.gjr .table-striped>tbody>tr:hover>td{background:#FAF6F7 !important}
/* row action icons in legacy cells */
.gjr .table td a i.fa,.gjr table.display td a i.fa{
  color:var(--soft);font-size:13px;width:28px;height:28px;line-height:26px;text-align:center;
  border:1px solid var(--line);border-radius:8px;background:#fff;transition:all .15s;
  margin-bottom:2px;display:inline-block;padding:0;
}
.gjr .table td a:hover i.fa,.gjr table.display td a:hover i.fa{border-color:var(--red);color:var(--red)}
/* DataTables chrome (length / filter / info / pagination) */
.gjr .dataTables_wrapper{padding:6px 14px}
.gjr .dataTables_length select,.gjr .dataTables_filter input{
  border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:6px 10px;font-size:13px;margin:0 4px;
}
.gjr .dataTables_filter input:focus,.gjr .dataTables_length select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);
}
.gjr .dataTables_length,.gjr .dataTables_filter,.gjr .dataTables_info{color:var(--soft);font-size:12.5px}
/* pagination (bootstrap + DT) */
.gjr .pagination>li>a,.gjr .pagination>li>span{
  color:var(--soft);border:1.5px solid var(--line);font-weight:700;font-size:12.5px;
  margin:0 3px;border-radius:9px !important;min-width:34px;text-align:center;
}
.gjr .pagination>li>a:hover{border-color:var(--red);color:var(--red);background:#fff}
.gjr .pagination>.active>a,.gjr .pagination>.active>a:hover,.gjr .pagination>.active>span{
  background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;
}
.gjr .pagination>.disabled>a,.gjr .pagination>.disabled>a:hover{border-color:var(--line);color:#C9C8C6}
/* panel-heading extras used across modules (Add New buttons, totals) */
.gjr .panel-heading h3{display:inline-block;font-size:13px;font-weight:700;color:var(--soft);margin:0}
.gjr .panel-heading .addbuttonspan{float:right;display:flex;gap:8px;flex-wrap:wrap}
.gjr .panel-heading .addbuttonspan .btn{font-size:12.5px;padding:8px 15px}
/* generic bootstrap buttons inside gjr pages */
.gjr .btn{border-radius:10px;font-weight:700;transition:all .18s}
.gjr .btn-primary,.gjr .btn-info{background-color:var(--red) !important;border-color:var(--red) !important;color:#fff !important}
.gjr .btn-primary:hover,.gjr .btn-info:hover{background-color:var(--red-dk) !important;border-color:var(--red-dk) !important}
.gjr .btn-danger{background-color:var(--red) !important;border-color:var(--red) !important;color:#fff !important}
.gjr .btn-danger:hover{background-color:var(--red-dk) !important;border-color:var(--red-dk) !important}
.gjr .btn-default{background-color:#fff !important;border:1.5px solid var(--line) !important;color:var(--ink) !important}
.gjr .btn-default:hover{border-color:var(--red) !important;color:var(--red) !important}
/* alerts + labels */
.gjr .alert{border-radius:12px;border-width:1.5px;font-weight:600}
.gjr .alert-success{background:var(--green-tint);border-color:#BFE5CC;color:var(--green)}
.gjr .alert-danger{background:var(--red-tint);border-color:#F3C2CC;color:var(--red)}
.gjr .label{border-radius:999px;font-weight:700;font-size:11px;padding:4px 10px}
/* modals opened from gjr pages */
.gjr .modal-content{border-radius:16px;border:1px solid var(--line)}
.gjr .modal-header h4,.gjr .modal-title{font-family:var(--fd);font-weight:800}

/* jquery.steps paints wizard-body inputs #ccc with higher specificity — reclaim inside .gjr */
.gjr .wizard>.content>.body input.form-control,
.gjr .wizard>.content>.body select.form-control,
.gjr .wizard>.content>.body textarea.form-control{
  border:1.5px solid var(--line);border-radius:10px;background:#FAFAF9;
}
.gjr .wizard>.content>.body input.form-control:focus,
.gjr .wizard>.content>.body select.form-control:focus,
.gjr .wizard>.content>.body textarea.form-control:focus{
  border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);background:#fff;outline:none;
}

/* ============================================================
   .gjr module parity with the banner page — lift the panel title
   out of the card as a page head, kill DataTables' purple rows,
   tidy the DT toolbar. Markup untouched.
   ============================================================ */
/* panel becomes: big page title (heading) + white card (body) */
.gjr section.panel{background:transparent;border:none !important;box-shadow:none;margin-bottom:18px}
.gjr .panel-heading{
  background:transparent !important;
  border:none !important;
  font-family:var(--fd);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);
  padding:4px 0 16px !important;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.gjr .panel-heading .addbuttonspan{margin-left:auto;float:none;display:flex;gap:8px;flex-wrap:wrap}
.gjr .panel-heading .addbuttonspan .btn{font-size:13px;padding:10px 17px;box-shadow:0 5px 14px rgba(201,16,47,.32)}
.gjr .panel-heading h3{font-size:13px;color:var(--soft);font-weight:700}
.gjr .panel-heading .tools{margin-left:auto}
.gjr .panel-body{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--sh);
}
/* listing bodies hug the table edge-to-edge */
.gjr .panel-body:has(> .adv-table){padding:0}
.gjr .adv-table table{margin:0}
/* kill demo_table's lavender striping + sorting-column tints for good */
.gjr table.display tr.odd,.gjr table.display tr.even,
.gjr table.display tr.odd td,.gjr table.display tr.even td,
.gjr table.display td.sorting_1,.gjr table.display td.sorting_2,.gjr table.display td.sorting_3,
.gjr table.display tr.odd td.sorting_1,.gjr table.display tr.even td.sorting_1{background:#fff !important}
.gjr table.display tbody tr:hover td,
.gjr table.display tbody tr:hover td.sorting_1{background:#FAF6F7 !important}
/* DataTables toolbar spacing inside the card */
.gjr .dataTables_wrapper{padding:0}
.gjr .dataTables_length{padding:14px 16px 10px}
.gjr .dataTables_filter{padding:14px 16px 10px}
.gjr .dataTables_info{padding:12px 16px 14px;color:var(--soft)}
.gjr .dataTables_paginate{padding:8px 16px 14px}
.gjr .dataTables_paginate .paginate_button,
.gjr .dataTables_paginate .paginate_active{
  display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;margin:0 2px;
  border:1.5px solid var(--line);border-radius:9px;font-weight:700;font-size:12.5px;color:var(--soft);
  background:#fff;cursor:pointer;
}
.gjr .dataTables_paginate .paginate_button:hover{border-color:var(--red);color:var(--red);background:#fff}
.gjr .dataTables_paginate .paginate_active{background:var(--red);border-color:var(--red);color:#fff}

/* parity with banner module: bold primary (2nd) column like .nm, button size */
.gjr .adv-table table.display tbody td:nth-child(2),
.gjr table.display.table tbody td:nth-child(2){font-weight:700;font-size:13.5px}
.gjr .panel-heading .addbuttonspan .btn{font-size:13.5px}
/* darker, calmer DataTables labels */
.gjr .dataTables_length,.gjr .dataTables_length label,
.gjr .dataTables_filter,.gjr .dataTables_filter label,
.gjr .dataTables_info{font-size:12.5px;font-weight:600;color:var(--soft)}

/* Add New chip: neutralise legacy float/-8px offset so it sits on the title line */
.gjr .panel-heading .addbuttonspan{position:static !important;top:auto !important;float:none !important;margin-left:auto}
.gjr .panel-heading .addbuttonspan a{display:inline-block}

/* DataTables toolbar as a header band — same bg as the table header strip */
.gjr .dataTables_wrapper{display:flex;flex-wrap:wrap;align-items:center}
.gjr .dataTables_wrapper>*{min-width:0}
.gjr .dataTables_length{flex:1 1 auto;margin:0;background:#FAF9F8;padding:12px 16px;border-bottom:1.5px solid var(--line)}
.gjr .dataTables_filter{flex:0 1 auto;margin:0;background:#FAF9F8;padding:12px 16px;border-bottom:1.5px solid var(--line);text-align:right}
.gjr .dataTables_wrapper table{flex:1 1 100%;width:100% !important}
.gjr .dataTables_info{flex:1 1 auto;padding:12px 16px}
.gjr .dataTables_paginate{flex:0 1 auto;padding:8px 16px;text-align:right}
/* clip band corners to the card radius */
.gjr .panel-body:has(> .adv-table){padding:0;overflow:hidden}

/* toolbar band: let both halves grow so the strip always spans the card */
.gjr .dataTables_filter{flex:1 1 auto}

/* DT_bootstrap actually wraps controls in .row-fluid>.span6 — band the ROW, not the controls */
.gjr .dataTables_wrapper{display:block}
.gjr .dataTables_wrapper>.row-fluid{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0}
.gjr .dataTables_wrapper>.row-fluid .span6{flex:1 1 auto;width:auto;margin:0;min-width:0}
.gjr .dataTables_wrapper>.row-fluid:first-child{background:#FAF9F8;border-bottom:1.5px solid var(--line)}
.gjr .dataTables_length{background:transparent;border:none;padding:10px 16px}
.gjr .dataTables_filter{background:transparent;border:none;padding:10px 16px;text-align:right}
.gjr .dataTables_info{padding:12px 16px}
.gjr .dataTables_paginate{padding:8px 16px;text-align:right}

/* DT filter/length labels: keep text + field on one line */
.gjr .dataTables_filter label{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;white-space:nowrap;font-weight:600;color:var(--soft)}
.gjr .dataTables_filter input{width:min(240px,100%);margin:0}
.gjr .dataTables_length label{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap;font-weight:600;color:var(--soft)}
/* DT bootstrap-2 pagination (.paging_bootstrap > ul > li > a) -> chip pager */
.gjr .dataTables_paginate.paging_bootstrap{background:transparent;box-shadow:none;border:none;height:auto;margin:0}
.gjr .dataTables_paginate ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end;background:transparent;box-shadow:none;border:none}
.gjr .dataTables_paginate ul>li{display:inline-block;margin:0;float:none}
.gjr .dataTables_paginate ul>li>a{
  display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 12px;margin:0;
  border:1.5px solid var(--line);border-radius:9px !important;font-weight:700;font-size:12.5px;
  color:var(--soft);background:#fff;box-shadow:none;float:none;line-height:1;
}
.gjr .dataTables_paginate ul>li>a:hover{border-color:var(--red);color:var(--red);background:#fff;text-decoration:none}
.gjr .dataTables_paginate ul>li.active>a{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important}
.gjr .dataTables_paginate ul>li.disabled>a{opacity:.45;pointer-events:none}

/* style.css outranks the chip pager (3-class selectors) — final decisive pass */
.gjr .dataTables_paginate.paging_bootstrap.pagination{float:none;margin:0;padding:8px 16px}
.gjr .dataTables_paginate.paging_bootstrap.pagination li{
  float:none;display:inline-block;margin:0;
  border:none !important;border-radius:0;background:transparent;
}
.gjr .dataTables_paginate.paging_bootstrap.pagination li a{
  display:inline-flex !important;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 12px !important;line-height:1 !important;
  border:1.5px solid var(--line) !important;border-radius:9px !important;
  font-weight:700;font-size:12.5px;color:var(--soft) !important;background:#fff !important;
}
.gjr .dataTables_paginate.paging_bootstrap.pagination li:hover a{
  border-color:var(--red) !important;color:var(--red) !important;background:#fff !important;
}
.gjr .dataTables_paginate.paging_bootstrap.pagination li.active a,
.gjr .dataTables_paginate.paging_bootstrap.pagination li.active:hover a{
  background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;
}
.gjr .dataTables_paginate.paging_bootstrap.pagination li.disabled a{
  opacity:.45;pointer-events:none;color:var(--soft) !important;background:#fff !important;
}

/* bottom band: info left, pager flush right */
.gjr .dataTables_wrapper>.row-fluid>.span6:last-child{display:flex;justify-content:flex-end;align-items:center}
.gjr .dataTables_paginate.paging_bootstrap.pagination{margin-left:auto}

/* filter band: one tone darker than the table header so the zones read separately */
.gjr .dataTables_wrapper>.row-fluid:first-child{
  background:#EFEDEA;
  border-bottom:1.5px solid var(--line);
}
.gjr .dataTables_length select,.gjr .dataTables_filter input{background:#fff}

/* ============ Flash messages (common/message + errors) ============ */
@keyframes gjFlashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.gj-flash{
  display:flex;align-items:flex-start;gap:12px;
  background:#E7F5EC !important;border:1.5px solid #9ED8B4 !important;color:#14612F !important;
  border-radius:12px;padding:14px 16px;margin-bottom:18px;
  font-weight:600;font-size:13.5px;line-height:1.5;
  box-shadow:0 6px 18px rgba(27,122,61,.12);
  animation:gjFlashIn .3s ease;
  text-shadow:none;
}
.gj-flash .gj-flash-ic{font-size:19px;line-height:1.3;flex:none;color:#1B7A3D}
.gj-flash .gj-flash-msg{flex:1;min-width:0}
.gj-flash .gj-flash-msg strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;display:block;margin-bottom:2px}
.gj-flash .gj-flash-msg ul{margin:4px 0 0 16px;padding:0}
.gj-flash .gj-flash-close{
  flex:none;background:none;border:none;cursor:pointer;
  font-size:20px;line-height:1;color:inherit;opacity:.55;padding:0 2px;font-weight:700;
}
.gj-flash .gj-flash-close:hover{opacity:1}
/* error variant */
.gj-flash.gj-flash-err{
  background:#FBE9ED !important;border-color:#F0AFBB !important;color:#A50D26 !important;
  box-shadow:0 6px 18px rgba(201,16,47,.12);
}
.gj-flash.gj-flash-err .gj-flash-ic{color:#C9102F}

/* ============ File inputs: same look everywhere (with or without .form-control) ============ */
.gjr input[type="file"]{
  display:block;width:100%;max-width:560px;height:auto;
  padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;background:#FAFAF9;
  font-family:var(--fb);font-size:13px;color:var(--soft);line-height:1.6;
  transition:border-color .18s, box-shadow .18s;cursor:pointer;
}
.gjr input[type="file"]:hover{border-color:#D5D3D0}
.gjr input[type="file"]:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);background:#fff}
.gjr input[type="file"]::file-selector-button{
  border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:6px 14px;margin-right:12px;
  font-family:var(--fb);font-weight:700;font-size:12.5px;color:var(--ink);
  cursor:pointer;transition:all .15s;
}
.gjr input[type="file"]::file-selector-button:hover{border-color:var(--red);color:var(--red)}
/* legacy webkit prefix for older Chrome */
.gjr input[type="file"]::-webkit-file-upload-button{
  border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:6px 14px;margin-right:12px;
  font-family:var(--fb);font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer;
}

/* ============ Searchable select (duplicate of self-injected styles) ============ */
.gjr .ssel{position:relative;width:100%}
.gjr .ssel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:inherit;
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.gjr .ssel-pane{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1090;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);display:none;overflow:hidden}
.gjr .ssel.open .ssel-pane{display:block}

/* multi-line detail cells (Name: x / Email: y ...) must NOT be all-bold —
   only their <strong> labels. The 2nd-column bold is for simple name cells. */
.gjr .adv-table table.display tbody td:nth-child(2):has(br),
.gjr table.display.table tbody td:nth-child(2):has(br){font-weight:400;font-size:13px}
.gjr .adv-table table.display tbody td strong,
.gjr table.display.table tbody td strong{font-weight:700;color:var(--ink)}