/*
 * EVplug Customer Portal — Shared stylesheet
 * Design system applied across all client area pages.
 * Loaded globally via navigation.php on every client portal request.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lexend:wght@100..900&family=Oxanium:wght@200..800&family=Saira+Stencil:ital,wght@0,100..900;1,100..900&family=Science+Gothic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Stencil:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lexend:wght@100..900&family=Oxanium:wght@200..800&family=Saira+Stencil:ital,wght@0,100..900;1,100..900&family=Science+Gothic:wght@100..900&display=swap');
/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --ev-bg:            #F4F6F2;
  --ev-surface:       #FFFFFF;
  --ev-surface-alt:   #EAF0E6;
  --ev-ink:           #16221D;
  --ev-ink-soft:      #5C6B62;
  --ev-ink-faint:     #8B968D;
  --ev-border:        #DEE6D9;
  --ev-border-strong: #C6D2C0;
  --ev-brand:         #7CB33C;
  --ev-brand-deep:    #4C7A22;
  --ev-brand-tint:    #EAF4DD;
  --ev-danger:        #D9573C;
  --ev-danger-tint:   #FBEAE5;
  --ev-lime:          #9CDD3A;
  --ev-info:          #3E6FE0;
  --ev-info-tint:     #E9EEFC;
  --ev-warn:          #DC9C33;
  --ev-warning:       #cf8205;
  --ev-warn-tint:     #FBF0DD;
  --ev-charge:        #0FA89A;
  --ev-charge-deep:    #0b8177;
  --ev-charge-tint:   #E1F5F2;
  --ev-radius:        10px;
  --ev-shadow:        0 1px 2px rgba(20,30,20,.04), 0 1px 1px rgba(20,30,20,.03);
  --ev-shadow-pop:    0 10px 24px rgba(20,30,20,.12), 0 2px 6px rgba(20,30,20,.06);
  
  --ev-mustartd:       #b48e05;


  --surface:#FFFFFF;
  --surface-alt:#EAF0E6;
  --ink:#16221D;
  --ink-soft:#5C6B62;
  --ink-faint:#8B968D;
  --border:#DEE6D9;
  --border-strong:#C6D2C0;
  --brand:#7CB33C;
  --brand-dark:#649d22;
  --brand-deep:#4C7A22;
  --brand-tint:#EAF4DD;
  --charge:#0FA89A;
  --charge-tint:#E1F5F2;
  --danger:#D9573C;
  --danger-tint:#FBEAE5;
  --info:#3E6FE0;
  --info-light:#4796d6;
  --info-tint:#E9EEFC;
  --warn:#DC9C33;
  --warn-tint:#FBF0DD;
  --blue:#3b32be;
  --blue-light:#5aa0c6;
  --default:#787879;
  --default-light:#A0A0A0;
  --default-dark:#16202E;
  --default-soft:#253f61;
  --purp-dark:#5e1b9d;
  --purp-light:#8d57c0;
  --teal-light:#14b8a6;
  --teal-dark:#0a726a;

  --bg-light:#e1f5f2bd;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,30,20,.04), 0 1px 1px rgba(20,30,20,.03);
  --shadow-pop:0 10px 24px rgba(20,30,20,.12), 0 2px 6px rgba(20,30,20,.06);
}


/* ============================================================
   PAGE BACKGROUND & LAYOUT
   ============================================================ */
body {
  background: var(--ev-bg) !important;
  color: var(--ev-ink);
  font-size: 14px;
  line-height: 1.55;
}

#wrapper,
#content { background: transparent; 

  font-family: 'Karla', sans-serif;
  font-weight: 500 ;
  /* font-family: 'Space Grotesk', sans-serif; */
}

.container {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 74px;
  padding-right: 74px;
}

/* suppress the old bootstrap page-wrapper margins that can look oversized */
#wrapper > #content > .container { padding-top: 15px; }


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  color: var(--ev-ink);
  font-weight: 600;
}

/* sub-section labels (used as "Projects summary", "Contract summary" etc.) */
h3.projects-summary-heading,
h3.contracts-summary-heading,
h3.tickets-summary-heading {
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--ev-ink);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

/* dashboard greeting */
#greeting {
  font-size: 20px;
  font-weight: 600;
  color: var(--ev-ink);
  margin-bottom: 18px;
}

/* separators */
hr { border-color: var(--ev-border); margin: 16px 0; }


/* ============================================================
   LINKS
   ============================================================ */
a:hover, a:focus, a:active { text-decoration: none; }

a.invoice-number,
a.td-contract-url,
.panel_s a.btn-link { color: var(--ev-brand-deep); }
a.invoice-number:hover,
a.td-contract-url:hover { color: var(--ev-brand); }

.view-account-statement {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-brand-deep);
}
.view-account-statement:hover { color: var(--ev-brand); }


/* ============================================================
   PANEL CARDS  (.panel_s)
   ============================================================ */
.panel_s {
  margin-bottom: 18px;
  background: none;
  border: none;
  box-shadow: none;
}

.panel_s .panel-body {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  padding: 22px 24px;
  box-shadow: var(--ev-shadow);
}

/* section header card (the title-only panel sitting above a content panel) */
.section-heading.panel_s .panel-body,
.section-heading > .col-md-8 > .panel_s .panel-body,
.section-heading > .col-md-12 > .panel_s .panel-body {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  padding: 14px 24px;
}
.section-heading + .panel_s .panel-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

/* section title text */
.section-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ev-ink);
  margin: 0;
}

/* panel-heading (used on open-ticket form) */
.panel_s > .panel-heading {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-bottom: none;
  border-radius: var(--ev-radius) var(--ev-radius) 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ev-ink-soft);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 12px 24px;
}
.panel_s > .panel-heading + .panel-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}


/* ============================================================
   TABLES
   ============================================================ */
.table { border-collapse: collapse; width: 100%; }

.table > thead > tr > th {
  font-size: 11px;
  font-weight: 700;
  color: var(--ev-ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 16px;
  border-top: none;
  border-bottom: 1px solid var(--ev-border);
  background: var(--ev-surface);
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 13px 16px;
  border-top: none;
  border-bottom: 1px solid var(--ev-border);
  font-size: 13.5px;
  vertical-align: middle;
  color: var(--ev-ink);
}

.table > tbody > tr:last-child > td { border-bottom: none; }
.table > tbody > tr:hover > td      { background: var(--ev-surface-alt); }

/* bordered variant */
.table.table-bordered > tbody > tr > td,
.table.table-bordered > thead > tr > th {
  border: 1px solid var(--ev-border);
}


/* ============================================================
   PROGRESS BARS  (invoice/estimate stats)
   ============================================================ */
.progress {
  height: 6px;
  border-radius: 4px;
  background: var(--ev-surface-alt);
  box-shadow: none;
  margin-top: 8px;
  margin-bottom: 0;
  overflow: hidden;
}
.progress-bar              { border-radius: 4px; box-shadow: none; }
.progress-bar-danger       { background-color: var(--ev-danger); }
.progress-bar-success      { background-color: var(--ev-brand); }
.progress-bar-warning      { background-color: var(--ev-warn); }
.progress-bar-info         { background-color: var(--ev-info); }


/* ============================================================
   INVOICE & ESTIMATE STATS STRIP
   ============================================================ */

/* wrapper: turn the bootstrap row into a bordered strip */
.invoice-quick-info.invoices-stats,
.estimates-stats {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 18px;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
  background: var(--ev-surface);
  box-shadow: var(--ev-shadow);
}

/* direct child columns of the stats strip */
.invoice-quick-info.invoices-stats > [class*="col-"],
.estimates-stats > [class*="col-"] {
  padding: 16px 20px;
  border-right: 1px solid var(--ev-border);
  float: none;
  display: inline-block;
  vertical-align: top;
}
.invoice-quick-info.invoices-stats > [class*="col-"]:last-child,
.estimates-stats > [class*="col-"]:last-child { border-right: none; }

/* stat label links & numbers */
.stats-status a h5,
.stats-status h5 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  margin: 0 0 2px;
}
.stats-status a:hover h5 { color: var(--ev-brand-deep); }
.stats-numbers {
  font-size: 13px;
  font-weight: 700;
  color: var(--ev-ink-faint);
  line-height: 1.4;
}


/* ============================================================
   STATUS LABELS / PILLS
   (Perfex uses Bootstrap .label-* classes generated by format_*_status())
   ============================================================ */
.label {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
  vertical-align: middle;
}
.label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.label-success { background: var(--ev-brand-tint);  color: var(--ev-brand-deep); }
.label-danger  { background: var(--ev-danger-tint); color: var(--ev-danger); }
.label-warning { background: var(--ev-warn-tint);   color: #9A6D1D; }
.label-info    { background: var(--ev-info-tint);   color: var(--ev-info); }
.label-default { background: var(--ev-surface-alt); color: var(--ev-ink-soft); }
.label-primary { background: var(--ev-charge-tint); color: var(--ev-charge); }

/* project status — these are generated with inline color, just keep the shape */
#content .label[style*="color"] {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  background: transparent;
  border: 1px solid currentColor;
}
#content .label[style*="color"]::before { display: none; }

/* signed / not signed text in contracts table */
.td-contract-is-signed  { color: var(--ev-brand-deep);  font-weight: 600; }
.td-contract-not-signed { color: var(--ev-ink-faint); }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.4;
}

.btn-default {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border-strong);
  color: var(--ev-ink);
  box-shadow: none;
}
.btn-default:hover, .btn-default:focus {
  background: var(--ev-surface-alt);
  border-color: var(--ev-border-strong);
  color: var(--ev-ink);
  box-shadow: none;
}

.btn-info, .new-ticket.btn-info {
  background: var(--ev-brand);
  border-color: var(--ev-brand);
  color: #fff;
  box-shadow: none;
}
.btn-info:hover, .btn-info:focus,
.new-ticket.btn-info:hover {
  background: var(--ev-brand-deep);
  border-color: var(--ev-brand-deep);
  color: #fff;
  box-shadow: none;
}

.btn-success {
  background: var(--ev-brand);
  border-color: var(--ev-brand);
  color: #fff;
  box-shadow: none;
}
.btn-success:hover, .btn-success:focus {
  background: var(--ev-brand-deep);
  border-color: var(--ev-brand-deep);
  color: #fff;
  box-shadow: none;
}

.btn-danger {
  background: var(--ev-danger);
  border-color: var(--ev-danger);
  color: #fff;
  box-shadow: none;
}
.btn-danger:hover, .btn-danger:focus {
  background: #b84330;
  border-color: #b84330;
  color: #fff;
  box-shadow: none;
}

.btn-primary {
  background: var(--ev-info);
  border-color: var(--ev-info);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus {
  background: #2f57b8;
  border-color: #2f57b8;
  color: #fff;
  box-shadow: none;
}


/* ============================================================
   TICKET LIST STATS
   ============================================================ */
.list-status.ticket-status a {
  display: block;
  text-align: center;
  padding: 14px 10px;
  border-radius: var(--ev-radius);
  border: 1px solid var(--ev-border);
  background: var(--ev-surface);
  transition: background .12s, border-color .12s, box-shadow .12s;
  text-decoration: none;
  margin-bottom: 12px;
}
.list-status.ticket-status a:hover {
  background: var(--ev-surface-alt);
  border-color: var(--ev-border-strong);
  box-shadow: var(--ev-shadow);
}
.list-status.ticket-status a.active {
  background: var(--ev-brand-tint);
  border-color: var(--ev-brand);
  box-shadow: 0 2px 8px rgba(124,179,60,.15);
}

.ticket-status-heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--ev-ink);
  line-height: 1;
  margin-bottom: 4px;
  font-family: inherit;
}
.list-status.ticket-status a.active .ticket-status-heading { color: var(--ev-brand-deep); }
.list-status.ticket-status a span[style*="color"] { font-size: 12px; font-weight: 600; }


/* ============================================================
   FORM CONTROLS
   ============================================================ */
#content select.form-control,
#content textarea.form-control,
#content input[type="text"].form-control,
#content input[type="password"].form-control,
#content input[type="email"].form-control,
#content input[type="number"].form-control,
#content input[type="tel"].form-control,
#content input[type="date"].form-control,
#content input[type="search"].form-control,
#content input[type="url"].form-control,
#content input[type="file"].form-control {
  border-color: var(--ev-border);
  border-radius: 8px;
  color: var(--ev-ink);
  background: var(--ev-surface);
}
#content select.form-control:focus,
#content textarea.form-control:focus,
#content input.form-control:focus {
  border-color: var(--ev-brand);
  box-shadow: 0 0 0 3px rgba(124,179,60,.12);
  outline: none;
}
#content .form-group label,
#content .control-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  margin-bottom: 5px;
}
#content .form-error,
#content .text-danger { color: var(--ev-danger); font-size: 12px; }


/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: 8px;
  border: none;
  font-size: 13.5px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.alert-success { background: var(--ev-brand-tint);  color: var(--ev-brand-deep); }
.alert-danger  { background: var(--ev-danger-tint); color: var(--ev-danger); }
.alert-warning { background: var(--ev-warn-tint);   color: #9A6D1D; }
.alert-info    { background: var(--ev-info-tint);   color: var(--ev-info); }


/* ============================================================
   DATATABLES OVERRIDES
   ============================================================ */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ev-border);
  border-radius: 8px;
  color: var(--ev-ink);
  background: var(--ev-surface);
  padding: 4px 10px;
  font-size: 12.5px;
  height: 32px;
  box-shadow: none;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 12.5px;
  color: var(--ev-ink-soft);
  font-weight: 500;
}
.dataTables_wrapper .dataTables_info {
  font-size: 12px;
  color: var(--ev-ink-faint);
  margin-top: 10px;
}
.dataTables_wrapper .dataTables_paginate { margin-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12.5px !important;
  padding: 4px 10px !important;
  border: 1px solid transparent !important;
  color: var(--ev-ink-soft) !important;
  background: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ev-surface-alt) !important;
  border-color: var(--ev-border) !important;
  color: var(--ev-ink) !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ev-brand) !important;
  border-color: var(--ev-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--ev-ink-faint) !important;
  background: none !important;
}

.tab-title{
  font-size:15px; font-weight:700;color: var(--surface);
  /* font-family: 'Saira Stencil', sans-serif; */
  font-family: "Lexend", sans-serif;

}

.tab-title:hover {
  color: var(--surface-alt);
  font-size:15px !important; font-weight:700 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--ev-surface);
  border-top: 1px solid var(--ev-border);
  color: var(--ev-ink-faint);
  font-size: 12.5px;
  margin-top: 0;
}



.btn-pcl-default{
    padding: 8px 15px;
    border-radius: 8px;
    /* border: 1px solid #81818155; */
    background: #d8d8d894;
    color: #363636;
}

.btn-pcl-default:hover{
  background: #c2c2c294;
  color: #363636;
}

.btn-pcl-info{
  padding: 8px 15px;
  border-radius: 8px;
  /* border: 1px solid #4b3586; */
  background: #F1ECFB;
  color: #4b3586;
}

.btn-pcl-info:hover{
  background: #d5c9ee;
  color: #4b3586;
}

.btn-pcl-primary:hover{
  /* border: 1px solid #193a6d55; */
  background: #6995d794;
  color: #0f2c58;
}

.btn-pcl-primary{
  padding: 8px 15px;
  border-radius: 8px;
  /* border: 1px solid #193a6d55; */
  background: #a8c9fa94;
  color: #0f2c58;
}

.btn-pcl-success{
  padding: 8px 15px;
  border-radius: 8px;
  /* border: 1px solid #086538f1; */
  background: #c8fae394;
  color: #074628f1;
}

.btn-pcl-success:hover{
  background: #7adeaf94;
  color: #074628f1;
}

.btn-pcl-warning{
  padding: 8px 15px;
  border-radius: 8px;
  /* border: 1px solid #a4800a; */
  background: #fcf6a794;
  color: #816403;
}

.btn-pcl-warning:hover{
  background: #e0da8294;
  color: #816403;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.client-profile-image-thumb {
  max-width: 80px;
  border-radius: 50%;
  border: 2px solid var(--ev-border);
}


/* ============================================================
   ANNOUNCEMENTS
   ============================================================ */
.announcement {
  font-size: 13.5px;
  color: var(--ev-ink);
}
.announcement small { color: var(--ev-ink-faint); }


/* ============================================================
   INTERVENTIONS PAGE  (ci-* classes)
   Originally defined inline in interventions.php — moved here.
   ============================================================ */
.ci-header {
  background: linear-gradient(135deg, #1e3a5f -40%, #0f6e56 100%);
  color: #fff;
  padding: 24px 28px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.ci-header h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: #fff; }
.ci-header p  { margin: 0; opacity: .75; font-size: 13px; }

.ci-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ci-stat-card {
  flex: 1 1 120px;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  box-shadow: var(--ev-shadow);
  padding: 16px 18px;
  text-align: center;
}
.ci-stat-num { font-size: 28px; font-weight: 800; color: var(--ev-ink); line-height: 1; }
.ci-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ev-ink-faint);
  letter-spacing: .05em;
  margin-top: 4px;
}

.ci-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.ci-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--ev-border);
  background: var(--ev-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  cursor: pointer;
  transition: background .2s;
}
.ci-refresh-btn:hover { background: var(--ev-surface-alt); }
.ci-refresh-btn.spinning .fa { animation: ci-spin .8s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }

.ci-cards { display: flex; flex-direction: column; gap: 14px; }
.ci-card {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: 12px;
  box-shadow: var(--ev-shadow);
  padding: 18px 22px;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s;
  border-left: 4px solid var(--ev-border);
  position: relative;
  overflow: hidden;
}
.ci-card:hover {
  box-shadow: var(--ev-shadow-pop);
  transform: translateY(-1px);
}
.ci-card.has-update::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 32px 32px 0;
  border-color: transparent var(--ev-danger) transparent transparent;
}

.ci-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ci-card-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ev-ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.ci-card-name { font-size: 15px; font-weight: 700; color: var(--ev-ink); }
.ci-status-badge {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.ci-card-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ci-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ev-ink-soft);
}
.ci-meta-item .fa { color: var(--ev-ink-faint); font-size: 11px; }

.ci-progress-track {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-bottom: 14px;
}
.ci-progress-step { flex: 1; height: 4px; border-radius: 2px; background: var(--ev-border); }
.ci-progress-step.done   { background: var(--ev-brand); }
.ci-progress-step.active { background: var(--ev-info); }
.ci-progress-step.closed { background: var(--ev-danger); }

.ci-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ci-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--ev-surface-alt);
  border: 1px solid var(--ev-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-brand-deep);
  text-decoration: none;
  transition: all .2s;
}
.ci-view-btn:hover {
  background: var(--ev-brand-tint);
  border-color: var(--ev-brand);
  color: var(--ev-brand-deep);
  text-decoration: none;
}
.ci-update-badge {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--ev-danger-tint);
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ev-danger);
}

.ci-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
}
.ci-empty i { font-size: 48px; color: var(--ev-border-strong); display: block; margin-bottom: 12px; }
.ci-empty p { color: var(--ev-ink-faint); font-size: 14px; margin: 0; }

/* Toast notifications */
.ci-toast-wrap {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ci-toast {
  background: var(--ev-surface);
  border-radius: 10px;
  box-shadow: var(--ev-shadow-pop);
  padding: 14px 18px;
  min-width: 260px;
  max-width: 340px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-left: 4px solid var(--ev-brand-deep);
  animation: ci-toast-in .3s ease;
}
@keyframes ci-toast-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ci-toast-body-title { font-size: 13px; font-weight: 700; color: var(--ev-ink); }
.ci-toast-body-msg   { font-size: 12px; color: var(--ev-ink-soft); margin-top: 2px; }
.ci-toast-close {
  margin-left: auto;
  color: var(--ev-ink-faint);
  cursor: pointer;
  font-size: 16px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}
.ci-toast-close:hover { color: var(--ev-ink); }

/* Detail modal */
#ci-detail-modal .modal-dialog  { max-width: 740px; }
#ci-detail-modal .modal-header  {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f6e56 100%);
  border-radius: 6px 6px 0 0;
  padding: 18px 22px;
}
#ci-detail-modal .modal-title   { color: #fff; font-size: 16px; font-weight: 700; margin: 0; }
#ci-detail-modal .modal-title small {
  font-size: 11px;
  font-weight: 400;
  opacity: .7;
  display: block;
  margin-bottom: 3px;
  color: #fff;
}
#ci-detail-modal .close         { color: #fff; opacity: .8; }
#ci-detail-modal .close:hover   { opacity: 1; }
#ci-detail-modal .nav-tabs { border-bottom: 2px solid var(--ev-border); margin-top: 16px; }
#ci-detail-modal .nav-tabs > li > a {
  color: var(--ev-ink-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
#ci-detail-modal .nav-tabs > li.active > a,
#ci-detail-modal .nav-tabs > li > a:hover {
  color: var(--ev-brand-deep);
  border-bottom-color: var(--ev-brand);
  background: none;
}

/* Info cards in modal */
.ci-info-card {
  background: var(--ev-bg);
  border: 1px solid var(--ev-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.ci-info-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ev-ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ci-info-val { font-size: 14px; font-weight: 600; color: var(--ev-ink); }

/* Status timeline */
.ci-timeline { display: flex; align-items: flex-start; margin: 18px 0 6px; }
.ci-tl-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.ci-tl-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% + 13px);
  right: calc(-50% + 13px);
  height: 2px;
  background: var(--ev-border);
  z-index: 0;
}
.ci-tl-step.done:not(:last-child)::after   { background: var(--ev-brand); }
.ci-tl-step.active:not(:last-child)::after { background: var(--ev-border); }
.ci-tl-step.closed::after                  { background: var(--ev-danger) !important; }
.ci-tl-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ev-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  z-index: 1;
  position: relative;
  flex-shrink: 0;
}
.ci-tl-step.done   .ci-tl-dot { background: var(--ev-brand);  color: #fff; }
.ci-tl-step.active .ci-tl-dot {
  background: var(--ev-info);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(62,111,224,.2);
}
.ci-tl-step.closed .ci-tl-dot { background: var(--ev-danger); color: #fff; }
.ci-tl-lbl {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ev-ink-faint);
  text-align: center;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
  max-width: 60px;
}
.ci-tl-step.done   .ci-tl-lbl { color: var(--ev-brand); }
.ci-tl-step.active .ci-tl-lbl { color: var(--ev-info); }
.ci-tl-step.closed .ci-tl-lbl { color: var(--ev-danger); }

/* Document card */
.ci-doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ev-brand-tint);
  border: 1px solid var(--ev-brand-deep);
  border-radius: 10px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--ev-ink);
  transition: box-shadow .2s;
  margin-bottom: 10px;
}
.ci-doc-card:hover {
  box-shadow: 0 4px 14px rgba(76,122,34,.15);
  color: var(--ev-ink);
  text-decoration: none;
}
.ci-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--ev-brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ci-doc-icon .fa { color: #fff; font-size: 16px; }
.ci-doc-label { font-size: 13px; font-weight: 700; color: var(--ev-brand-deep); }
.ci-doc-meta  { font-size: 12px; color: var(--ev-ink-soft); margin-top: 2px; }
.ci-doc-arrow { margin-left: auto; color: var(--ev-brand); font-size: 18px; }


.s-title{
  color: #16202E;
  font-weight: 800;
  font-size: 12px;
}

.cmp-name{
  color: #16202E;
  font-size: 17px;
  font-weight: 700;
}


/* Checklist bar */
.ci-ck-track {
  background: var(--ev-border);
  border-radius: 4px;
  height: 6px;
  margin-top: 8px;
}
.ci-ck-fill { height: 100%; border-radius: 4px; background: var(--ev-brand); transition: width .4s; }

/* Material & attachment items */
.ci-mat-item, .ci-att-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ev-bg);
  border: 1px solid var(--ev-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.ci-mat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ev-info-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ci-mat-icon .fa { color: var(--ev-info); font-size: 14px; }
.ci-mat-name { font-size: 13px; font-weight: 700; color: var(--ev-ink); }
.ci-mat-sub  { font-size: 12px; color: var(--ev-ink-soft); margin-top: 2px; }
.ci-att-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-att-sub { font-size: 11px; color: var(--ev-ink-faint); margin-top: 2px; }
.ci-att-dl {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ev-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ev-brand-deep);
  flex-shrink: 0;
}
.ci-att-dl:hover { background: var(--ev-brand); color: #fff; }

.ci-empty-tab {
  text-align: center;
  padding: 40px 20px;
  color: var(--ev-ink-faint);
}
.ci-empty-tab i { font-size: 32px; color: var(--ev-border-strong); display: block; margin-bottom: 8px; }


/* ============================================================
   NAVIGATION  (.evnav)
   Design: V2-dark — navy background, lime active pill, V3 profile chip.
   ============================================================ */
.evnav {
  position: sticky; top: 0; z-index: 1000;
  background: #16202E;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: inherit;
}
.evnav * { box-sizing: border-box; }
.evnav-row {
  display: flex; align-items: center; gap: 30px;
  padding: 0 28px; height: 60px;
  max-width: 1600px; margin: 0 auto;
}

.evnav-brand {
  display: flex; align-items: center;
  margin-right: 4px; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.1);
  padding-right: 20px;
}
.evnav-brand .navbar-brand { padding: 0; height: auto; line-height: 1; margin: 0; }
.evnav-brand .navbar-brand img { height: 34px; width: auto; }
.evnav-brand .navbar-brand.logo-text {
  font-size: 17px; font-weight: 700; color: #fff;
  text-decoration: none; letter-spacing: -.01em;
}

.evnav-main { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; }
.evnav-hamburger { display: none; }

.evnav-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 13px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: #B7C2CC;
  border: none; background: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.evnav-pill:hover { background: rgba(255,255,255,0.07); color: #fff; }
.evnav-pill.active { background: #9CDD3A; color: #16202E; font-weight: 600; }
.evnav-pill.evnav-open svg.evnav-chev { transform: rotate(180deg); }
.evnav-chev { width: 13px; height: 13px; flex-shrink: 0; transition: transform .15s; }

.evnav-pill-login {
  background: #9CDD3A; color: #16202E !important; border-radius: 6px;
  font-weight: 600; padding: 0 16px; margin-left: 6px;
}
.evnav-pill-login:hover { background: #7CB33C !important; color: #16202E !important; }

.evnav-dd-wrap { position: relative; }
.evnav-dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid #DEE6D9; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(20,30,20,.12), 0 2px 6px rgba(20,30,20,.06);
  min-width: 200px; padding: 6px;
  display: none; z-index: 1010;
}
.evnav-dd-panel.evnav-show { display: block; }
.evnav-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: #16221D;
  text-decoration: none; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; font-family: inherit;
  transition: background .1s;
}
.evnav-dd-item:hover, .evnav-dd-item.active { background: #EAF0E6; color: #16221D; }
.evnav-dd-item svg { width: 15px; height: 15px; color: #8B968D; flex-shrink: 0; }
.evnav-dd-sep { border-top: 1px solid #DEE6D9; margin: 5px 5px; }
.evnav-profile-top { padding: 8px 10px 10px; border-bottom: 1px solid #DEE6D9; margin-bottom: 5px; }
.evnav-profile-top .pn { font-size: 13px; font-weight: 600; color: #16221D; }
.evnav-profile-top .pe { font-size: 11.5px; color: #8B968D; margin-top: 1px; }
.evnav-profile-dd { right: 0; left: auto; min-width: 210px; }

.evnav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.evnav-icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  color: #B7C2CC; transition: background .12s, color .12s;
  cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.evnav-icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.evnav-icon-btn svg { width: 16px; height: 16px; }

/* Profile chip — V3 style */
.evnav-avatar-btn {
  display: flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 10px 0 4px; border-radius: 20px;
  border: none; background: rgba(255,255,255,0.05);
  cursor: pointer; font-family: inherit; transition: background .12s;
  position: relative;
}
.evnav-avatar-btn:hover { background: rgba(255,255,255,0.12); }
.evnav-avatar-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.evnav-avatar-initials {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #12B6A0, #0E8F80);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; flex-shrink: 0; letter-spacing: .01em;
}
.evnav-avatar-name { font-size: 12.5px; font-weight: 600; color: #fff; }
.evnav-avatar-btn .evnav-chev { color: rgba(255,255,255,0.45); }

.evnav-notif-wrap { position: relative; }
.evnav-badge {
  position: absolute; top: -4px; right: -4px;
  background: #D9573C; color: #fff; border-radius: 20px;
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  min-width: 16px; text-align: center; line-height: 14px;
  font-family: 'JetBrains Mono', monospace;
  pointer-events: none;
}

.evnav-subbar {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 7px 28px;
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: #8A96A2;
  max-width: 1600px; margin: 0 auto;
  box-sizing: border-box; width: 100%;
}
.evnav-subbar-label { color: #B7C2CC; font-weight: 500; }
.evnav-subbar-sep { margin: 0 2px; }

.evnav-mobile {
  display: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px;
  max-height: calc(100vh - 60px); overflow-y: auto;
  background: #fff;
}
.evnav-mobile.evnav-open { display: block; }
.evnav-mm-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border-radius: 8px; border: none; background: none;
  font-size: 14px; font-weight: 500; color: #16221D;
  text-align: left; cursor: pointer; text-decoration: none; font-family: inherit;
  transition: background .1s;
}
.evnav-mm-item:hover { background: #EAF0E6; }
.evnav-mm-item.active { background: #EAF4DD; color: #4C7A22; font-weight: 600; }
.evnav-mm-item svg { width: 17px; height: 17px; color: #8B968D; flex-shrink: 0; }
.evnav-mm-item .evnav-chev { margin-left: auto; width: 14px; height: 14px; color: #8B968D; }
.evnav-mm-item .evnav-badge-inline {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: #D9573C; color: #fff; border-radius: 20px; padding: 1px 6px;
}
.evnav-mm-sub { display: none; padding-left: 14px; }
.evnav-mm-sub.evnav-open { display: block; }
.evnav-mm-sub .evnav-mm-item { font-size: 13.5px; padding: 9px 14px; }
.evnav-mm-sep { border-top: 1px solid #DEE6D9; margin: 5px 6px; }
.evnav-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(15,22,15,.4); z-index: 999;
}
.evnav-backdrop.evnav-show { display: block; }
.customer-top-submenu { display: none !important; }

@media (max-width: 920px) {
  .evnav-main { display: none !important; }
  .evnav-hamburger {
    display: flex; width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    align-items: center; justify-content: center;
    cursor: pointer; color: #B7C2CC; flex-shrink: 0;
    font-family: inherit;
  }
  .evnav-hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .evnav-hamburger svg { width: 18px; height: 18px; }
  .evnav-row { padding: 0 16px; }
}
@media (max-width: 600px) {
  .evnav-row { height: 56px; padding: 0 12px; gap: 6px; }
  .evnav-avatar-name { display: none; }
  .evnav-avatar-btn { padding: 0 6px 0 4px; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .panel_s .panel-body { padding: 16px 14px; }

  .invoice-quick-info.invoices-stats,
  .estimates-stats { display: block; }
  .invoice-quick-info.invoices-stats > [class*="col-"],
  .estimates-stats > [class*="col-"] {
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ev-border);
    padding: 12px 16px;
    float: none;
  }
  .invoice-quick-info.invoices-stats > [class*="col-"]:last-child,
  .estimates-stats > [class*="col-"]:last-child { border-bottom: none; }

  .ci-card-top    { flex-direction: column; }
  .ci-stats       { gap: 8px; }
  .ci-stat-card   { flex: 1 1 calc(50% - 4px); }
  .ci-timeline    { overflow-x: auto; }
  .ci-tl-lbl      { max-width: 44px; font-size: 7.5px; }
  #ci-detail-modal .modal-dialog { margin: 10px; }
}

@media (max-width: 480px) {
  .ci-stats { flex-direction: column; }
  .ci-stat-card { flex: 1 1 100%; }
}

.greeting {
  margin-bottom: 12px;
}

.customers.customers_login  .evnav{
  /* margin-bottom: 20px; */
  display: none;
}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 14px;}
.section-title h3{font-size:15px;}
.section-title .link{font-size:12.5px;font-weight:600;color:var(--brand-deep);}

.sec-header{display:flex;align-items:baseline;justify-content:space-between;margin:0px 0 36px;}
.sec-header h4{font-size:13px;}
.sec-header .card-btn{font-size:12.5px;font-weight:600;
  color:var(--border);
  background:var(--default-dark);
}
.sec-header .card-btn:hover{
  color:var(--default-dark);
  background:var(--ev-lime);
}


.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow);}
.metric .num{font-size:26px;font-weight:700;line-height:1;}
.metric .lbl{font-size:12px;color:var(--ink-soft);margin-top:6px;font-weight:500;}
.metric.dot::before{content:'';display:block;width:8px;height:8px;border-radius:50%;margin-bottom:10px;background:var(--dotcolor,var(--ink-faint));}


.billing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:22px;}
.billing-stat .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.billing-stat .top .k{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.billing-stat .top .v{font-family:'JetBrains Mono';font-size:12px;color:var(--ink-faint);}

   
.charge-row{display:flex;align-items:center;gap:10px;}
.charge-bar{position:relative;flex:1;height:15px;border-radius:5px;background:var(--surface-alt);border:1px solid var(--border);}
.charge-bar::before{content:'';position:absolute;top:0;left:0;bottom:0;
  width:var(--pct,0%);border-radius:4px 0 0 4px;background-color:var(--fill,var(--brand));
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, transparent 2px 13px);transition:width .9s cubic-bezier(.4,0,.2,1);}
.charge-bar.full::before{border-radius:4px;}
.charge-bar::after{content:'';position:absolute;right:-4px;top:4px;width:3px;height:7px;background:var(--border-strong);border-radius:0 2px 2px 0;}
.charge-pct{font-size:12px;font-weight:500;color:var(--ink-soft);width:42px;text-align:right;flex-shrink:0;}

.card-projects{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--default-dark),var(--info));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-pad{padding:20px 22px;}
.card-title{
  font-family: "Lexend", sans-serif;font-weight: 700;
  color:#fff;font-size:18px;margin-bottom:4px;margin-top: 10px;
}
.card-desc{margin: 6px 0;color:var(--surface-alt) !important;}

.metric-grid.projects{margin-bottom:20px;}
.metric-grid.projects .metric{display:flex;gap:10px;align-items:center;}
.metric-grid.projects .metric a{display:flex;gap:10px;}
.metric-grid.projects .metric a{display:flex;gap:10px;}
.metric-grid.projects .metric.dot::before{margin-bottom:0;}
.metric-grid.projects .metric .num{font-size:20px;line-height:1;font-weight:600;margin-top:3px;}


.card-interventions{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--ev-charge-deep),var(--ev-charge));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
}
.card-invoices{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--teal-dark),var(--teal-light));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;justify-content: space-between;
}

.card-link{font-size:12.5px;font-weight:500;color:var(--ev-warn-tint); margin-top: 1%;}

.card-contracts{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--ev-charge-deep),var(--default-soft));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;justify-content: space-between;
}


.card-estimates{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--default-soft),var(--purp-light));;
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#083865;
  display:flex;
}

.card-my-clients{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--ev-charge),#37b9d8e6);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;
}

.card-proposals{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--ink),var(--default-soft));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;
}
.card-tickets{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--purp-dark),var(--purp-light));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;justify-content: space-between;
}

.card-btn{font-size:12.4px;font-weight:600;color:var(--ink);text-transform:uppercase;
  background:var(--bg-light);border-radius:8px;padding:6px 10px;
  align-items:center;display:flex;gap:6px;text-decoration:none;
}

.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.metric-grid.interventions-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}


.card-files{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--charge),var(--blue-light));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;justify-content: space-between;
}

.card-calendar{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--info),var(--ev-charge));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;justify-content: space-between;
}

.card-announcements{
  /* background:var(--info); */
  background:linear-gradient(135deg,var(--ev-charge),var(--ev-lime));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  border:none;padding:18px 20px;margin-bottom:20px;color:#fff;
  display:flex;justify-content: space-between;
}


.card-btn:hover{
  color:var(--surface);
  background:var(--default-dark);
}

small{
  color:var(--ink-soft) !important;
}

/* ============================================================
   FAQ FLOATING ACTION BUTTON
   ============================================================ */
.ci-faq-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #16202E;
  color: #9CDD3A;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(22,32,46,0.28), 0 1px 4px rgba(22,32,46,0.14);
  transition: background .15s, transform .15s, box-shadow .15s;
  z-index: 900;
  letter-spacing: .02em;
}
.ci-faq-fab:hover {
  background: #1e2e42;
  color: #9CDD3A;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(22,32,46,0.35);
  text-decoration: none;
}
.ci-faq-fab i { font-size: 16px; }

/* ============================================================
   TICKET PORTAL
   ============================================================ */

.evticket-wrap {
  --evt-navy: #16202E;
  --evt-lime: #9CDD3A;
  --evt-lime-dark: #6FA829;
  --evt-line: #E2E6E1;

  --evt-card: #FFFFFF;
  --evt-ink: #16202E;
  --evt-ink-soft: #5B6670;
  --evt-amber: #E8A23D;
  --evt-red: #E15B4E;
  font-family: 'Inter', sans-serif;
  color: var(--evt-ink);
  padding: 10px 0 40px;
}
.evticket-wrap * { box-sizing: border-box; }

.evt-charge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  background: var(--evt-navy);
  border-radius: 14px;
  padding: 14px 18px;
}
.evt-plug-icon { flex-shrink: 0; width: 34px; height: 34px; }
.evt-charge-meta { flex: 1; }
.evt-charge-label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #B7C2CC;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: .02em;
}
.evt-charge-label b { color: var(--evt-lime); font-weight: 700; }
.evt-charge-track { height: 8px; background: #2A3646; border-radius: 999px; overflow: hidden; }
.evt-charge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--evt-lime-dark), var(--evt-lime));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.evt-charge-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px);
  animation: evt-zap 1s linear infinite;
  opacity: 0;
  transition: opacity .3s;
}
.evt-charge-fill.charging::after { opacity: 1; }
@keyframes evt-zap { from { background-position: 0 0; } to { background-position: 24px 0; } }

.evt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
@media (max-width: 760px) { .evt-form-grid { grid-template-columns: 1fr; } }

.evt-card {
  background: var(--evt-card);
  border: 1px solid var(--evt-line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(22,32,46,0.04);
}
.evt-stack { display: flex; flex-direction: column; gap: 20px; }

.evt-field { display: flex; flex-direction: column; }
.evt-field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--evt-navy);
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.evt-req { color: var(--evt-lime-dark); margin-left: 2px; }
.evt-hint { font-weight: 400; color: var(--evt-ink-soft); margin-left: 6px; font-size: 12px; }

.evticket-wrap input[type=text],
.evticket-wrap textarea,
.evticket-wrap select {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--evt-ink);
  background: #FBFCFA;
  border: 1.5px solid var(--evt-line);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.evticket-wrap input[type=text]:focus,
.evticket-wrap textarea:focus,
.evticket-wrap select:focus {
  border-color: var(--evt-lime-dark);
  background: #fff;
  box-shadow: none;
}
.evticket-wrap input.evt-filled,
.evticket-wrap textarea.evt-filled,
.evticket-wrap select.evt-filled { border-color: #C9D6C2; background: #fff; }
.evticket-wrap textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.evticket-wrap select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6670' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
/* Bootstrap Select overrides the native <select> with a fixed 220px container — force full width */
.evticket-wrap .bootstrap-select { width: 100% !important; }

.evt-priority-set { display: flex; gap: 8px; }
.evt-chip {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border: 1.5px solid var(--evt-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--evt-ink-soft);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.evt-chip:hover { border-color: #C9D6C2; }
.evt-chip[data-level="low"].active  { background: #EEF6E7; border-color: #8FC15C; color: #4C7A22; }
.evt-chip[data-level="medium"].active { background: #FCF1E0; border-color: var(--evt-amber); color: #8A5A16; }
.evt-chip[data-level="high"].active { background: #FBEAE7; border-color: var(--evt-red); color: #A9382B; }
.evt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.evt-chip[data-level="low"] .evt-dot    { background: #8FC15C; }
.evt-chip[data-level="medium"] .evt-dot { background: var(--evt-amber); }
.evt-chip[data-level="high"] .evt-dot   { background: var(--evt-red); }

.evt-drop {
  border: 1.5px dashed #C9D0C6;
  border-radius: 12px;
  background: #FBFCFA;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.evt-drop:hover, .evt-drop.drag { border-color: var(--evt-lime-dark); background: #F4FAEC; }
.evt-drop svg { width: 26px; height: 26px; color: var(--evt-ink-soft); margin: 0 auto 8px; display: block; }
.evt-drop-main { font-size: 13.5px; font-weight: 600; color: var(--evt-navy); }
.evt-drop-main span { color: var(--evt-lime-dark); text-decoration: underline; }
.evt-drop-meta { font-size: 12px; color: var(--evt-ink-soft); margin-top: 4px; }

.evt-filelist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.evt-fileitem {
  display: flex; align-items: center; gap: 10px;
  background: #FBFCFA;
  border: 1px solid var(--evt-line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
}
.evt-fileitem svg { width: 16px; height: 16px; color: var(--evt-lime-dark); flex-shrink: 0; }
.evt-fname { flex: 1; color: var(--evt-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-fsize { color: var(--evt-ink-soft); font-size: 11.5px; }
.evt-rm { cursor: pointer; color: var(--evt-ink-soft); font-size: 18px; line-height: 1; padding: 2px 4px; }
.evt-rm:hover { color: var(--evt-red); }

.evt-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.evt-footnote { font-size: 12px; color: var(--evt-ink-soft); margin-right: auto; }

.evt-btn-primary {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  padding: 12px 24px;
  cursor: not-allowed;
  border: none;
  background: var(--evt-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .45;
  transition: transform .1s, box-shadow .15s, opacity .15s, background .15s;
}
.evt-btn-primary.ready { opacity: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(156,221,58,0.25); }
.evt-btn-primary.ready:hover { background: #1D2A3B; }
.evt-btn-primary:active { transform: scale(.98); }
.evt-btn-primary svg { width: 15px; height: 15px; }

@media (max-width: 600px) {
  .evt-card { padding: 20px 16px; }
  .evt-actions { flex-direction: column; align-items: stretch; }
  .evt-btn-primary { justify-content: center; }
}


/* ============================================================
   ACCOUNT SETTINGS PAGE  (.ev-settings)
   ============================================================ */
.ev-settings { padding-bottom: 60px; }

.evs-page-header {
  margin-bottom: 24px;
  padding: 22px 28px;
  border-radius: 12px;
  background: linear-gradient(120deg, #12213A 0%, #1C3B63 55%, #1D9E8F 130%);
  color: #fff;
}
.evs-page-header h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #fff; }
.evs-page-header p  { margin: 0; font-size: 13px; color: rgba(255,255,255,.75); }

.evs-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.evs-col { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 860px) { .evs-settings-grid { grid-template-columns: 1fr; } }

/* Base settings card */
.evs-card {
  background: #fff;
  border: 1px solid var(--ev-border);
  border-top: 4px solid var(--evs-accent, var(--ev-brand));
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--ev-shadow);
}

/* Color variants */
.evs-card--profile  { --evs-accent: #3B7FD9; --evs-accent-bg: #E4EFFC; --evs-accent-dk: #1F4E8C; }
.evs-card--security { --evs-accent: #9955D6; --evs-accent-bg: #F1E7FB; --evs-accent-dk: #5E2E8C; }
.evs-card--notif    { --evs-accent: #E0982A; --evs-accent-bg: #FCEFDA; --evs-accent-dk: #8C5A0F; }
.evs-card--company  { --evs-accent: #1D9E8F; --evs-accent-bg: #DFF4F1; --evs-accent-dk: #0F5F55; }

.evs-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.evs-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--evs-accent-bg, var(--ev-brand-tint));
  color: var(--evs-accent-dk, var(--ev-brand-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.evs-card-header h3 { margin:0; font-size: 15px; font-weight: 600; color: var(--ev-ink); }
.evs-card-body-desc { margin: 10px 0 20px; font-size: 13px; color: var(--ev-ink-soft); }

/* Avatar */
.evs-profile-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
@media (max-width: 640px) { .evs-profile-grid { grid-template-columns: 1fr; } }

.evs-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.evs-avatar-circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--evs-accent-bg, var(--ev-brand-tint));
  color: var(--evs-accent-dk, var(--ev-brand-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  border: 2px dashed var(--ev-border-strong);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .12s;
  text-decoration: none;
}
.evs-avatar-circle:hover { border-color: var(--evs-accent, var(--ev-brand)); }
.evs-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.evs-avatar-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ev-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ev-ink-soft);
  z-index: 1;
}
.evs-avatar-file   { display: none; }
.evs-avatar-hint   { font-size: 11.5px; color: var(--ev-ink-faint); text-align: center; }
.evs-avatar-remove { font-size: 11.5px; color: var(--ev-danger); text-align: center; display: block; }
.evs-avatar-remove:hover { color: #b84330; }

/* Field grids inside settings cards */
.evs-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.evs-field-grid label,
.evs-pass-grid  label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  margin-bottom: 5px;
}
.evs-field-grid label i { color: var(--evs-accent, var(--ev-ink-faint)); margin-right: 3px; font-size: 12px; }
@media (max-width: 640px) { .evs-field-grid { grid-template-columns: 1fr; } }

.evs-pass-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
@media (max-width: 640px) { .evs-pass-grid { grid-template-columns: 1fr; } }

.evs-pass-last { font-size: 12px; color: var(--ev-ink-faint); margin-bottom: 0; }

/* Notification grid + toggle */
.evs-notif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 4px;
}
@media (max-width: 640px) { .evs-notif-grid { grid-template-columns: 1fr; } }

.evs-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 4px;
  border-bottom: 1px solid var(--ev-border);
  cursor: pointer;
  font-weight: normal;
  margin: 0;
  transition: background .1s;
}
.evs-notif-row:hover { background: var(--evs-accent-bg, var(--ev-surface-alt)); }
.evs-notif-row span { font-size: 13.5px; color: var(--ev-ink); }

.evs-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--ev-border-strong);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  border: none;
  transition: background .15s;
}
.evs-switch:checked { background: var(--evs-accent, var(--ev-brand)); }
.evs-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.evs-switch:checked::after { transform: translateX(16px); }

/* Card footer + action button */
.evs-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  border-top: 1px solid var(--ev-border);
  padding-top: 16px;
}
.evs-btn {
  border: none;
  background: var(--evs-accent, var(--ev-brand));
  color: #fff;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter .12s, transform .08s;
}
.evs-btn:hover  { filter: brightness(.88); }
.evs-btn:active { transform: scale(.98); }

/* Company-specific wider field grid */
.evs-company-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  margin-bottom: 4px;
}
.evs-company-grid label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  margin-bottom: 5px;
}
.evs-company-grid label i { color: var(--evs-accent, var(--ev-ink-faint)); margin-right: 3px; font-size: 12px; }
@media (max-width: 640px) { .evs-company-grid { grid-template-columns: 1fr; } }

.evs-billing-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--ev-ink);
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ev-border);
}
.evs-billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  margin-bottom: 8px;
}
.evs-billing-grid h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  margin-bottom: 14px;
}
.evs-billing-grid label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-ink-soft);
  margin-bottom: 5px;
}
.evs-billing-grid .form-group { margin-bottom: 14px; }
@media (max-width: 640px) { .evs-billing-grid { grid-template-columns: 1fr; } }





/* =====================================================================
    Compose modals — clientEmailModal / whatsappModal
    Matches the admin "my_clients" .pcm-modal design system: centered
    dialog (Bootstrap 3 pseudo-element trick), gradient icon header,
    underline tabs, chip-styled recipient field.
    ===================================================================== */
.pcm-modal {
  text-align: center;
}
.pcm-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.pcm-modal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 900px;
  max-width: 94vw;
  margin: 30px auto;
}
.pcm-modal .modal-content {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(20, 20, 20, .18);
  overflow: hidden;
}
/* The markup puts .modal-lg (width:900px in Bootstrap) on .modal-content
    instead of .modal-dialog, so make it fill the (now 900px) dialog. */
.pcm-modal .modal-content.modal-lg {
  width: 100%;
}

/* --- Header --- */
.pcm-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 0.5px solid #e4e5e7;
  background: linear-gradient(135deg, #0F6E56 0%, #1D9E75 100%);
}
.pcem-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 0.5px solid #e4e5e7;
  background: linear-gradient(135deg, #0f3e6e 0%, #0e4c8b 100%);
}
.pcm-header-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 16px; background: #CECBF6; color: #26215C;
}
.pcem-header .pcem-header-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 16px; background: #f5f8ff; color: #0f3e6e; font: larger;
}
.pcm-modal--whatsapp .pcm-header-icon {
  background: #e5ffef; color: #0E5E33; font: larger;
}
.pcm-header-text { flex: 1; min-width: 0; }
.pcm-title { font-weight: 700; font-size: 15px; margin: 0; color: #f5f5f5; }
.pcm-subtitle {
  font-size: 12px; color: #cdcdcd; margin: 1px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcm-close {
  float: none !important; width: 28px; height: 28px; padding: 0;
  border-radius: 50%; flex-shrink: 0; border: none; background: none;
  color: #8a8f98 !important; text-shadow: none !important; opacity: 1 !important;
  display: flex; align-items: center; justify-content: center;
}
.pcm-close:hover { background: #f1efe8; color: #26221f; }

/* --- Tabs --- */
.pcm-tabs { border-bottom: 0.5px solid #e4e5e7 !important; padding: 0 20px; margin: 0 !important; }
.pcm-tabs > li { margin-bottom: -1px; }
.pcm-tabs > li > a {
  border: none !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; padding: 10px 4px !important; margin-right: 18px;
  font-size: 13px; color: #8a8f98 !important; background: none !important;
}
.pcm-tabs > li.active > a,
.pcm-tabs > li.active > a:hover,
.pcm-tabs > li.active > a:focus {
  border-bottom-color: #26215C !important; color: #26215C !important;
  font-weight: 500; background: none !important;
}
.pcm-modal--whatsapp .pcm-tabs > li.active > a,
.pcm-modal--whatsapp .pcm-tabs > li.active > a:hover,
.pcm-modal--whatsapp .pcm-tabs > li.active > a:focus {
  border-bottom-color: #0E5E33 !important; color: #0E5E33 !important;
}

/* --- Body --- */
.pcm-body { padding: 18px 20px; }
.pcm-body .form-group { margin-bottom: 14px; }
.pcm-body label.control-label { font-size: 13px; color: #5f6164; font-weight: 400; margin-bottom: 5px; }
.pcm-body .form-control { border-radius: 8px; }

/* Recipient field styled as a chip */
#clientEmailModal #to,
#whatsappModal #phone {
  background: #CECBF6; color: #26215C; border: none; border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 6px 14px; height: auto; box-shadow: none;
}
#whatsappModal #phone { background: #CBF3DB; color: #0E5E33; }

/* TinyMCE editor container */
.pcm-body .mce-tinymce {
  border: 1px solid #e4e5e7 !important; border-radius: 8px !important;
  box-shadow: none !important; overflow: hidden;
}
.pcm-body .mce-toolbar-grp { background: #F1EFE8 !important; border-bottom: 1px solid #e4e5e7 !important; }

/* --- Footer --- */
.pcm-footer {
  padding: 14px 20px !important; border-top: 0.5px solid #e4e5e7; background: #fafbfc;
  display: flex; justify-content: flex-end; gap: 8px;
}
.pcm-footer .btn-default {
  border-radius: 8px !important; font-size: 13px !important; border: 1px solid #e4e5e7 !important;
  background: #fff !important; color: #444441 !important; box-shadow: none !important;
}
.pcm-footer .btn-primary,
.pcm-footer .btn-success {
  border-radius: 8px !important; font-size: 13px !important; border: none !important;
  background: #085041 !important; color: #E1F5EE !important; box-shadow: none !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.pcm-footer .btn-primary:hover,
.pcm-footer .btn-success:hover { background: #0a6a56 !important; }

/* =====================================================================
    view_cl_estimate_modal / view_cl_invoice_modal / view_cl_shipping_modal
    Slide-in drawer from the LEFT (same CSS-transform technique as the
    admin "view_partner_modal" drawer — Bootstrap adds .in when shown,
    so .modal('show')/.modal('hide') keep working unchanged), header
    styled with this portal's brand gradient + evplug-portal.css tokens.
    ===================================================================== */
.cl-detail-modal .modal-dialog {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  margin: 0;
  width: min(820px, 100vw);
  max-width: 100vw;
  /* !important needed: Bootstrap's own .modal.fade .modal-dialog rule
      (transform: translate(0,-25%)) has 3-class specificity, beating
      our 2-class selector, which is what made this slide from the top. */
  transform: translateX(100%) !important;
  transition: transform .3s ease-out;
}
.cl-detail-modal.in .modal-dialog {
  transform: translateX(0) !important;
}
.cl-detail-modal .modal-content {
  height: 100%;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: var(--ev-surface, #fff);
  box-shadow: -6px 0 24px rgba(15, 23, 42, .15);
}
.cl-detail-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1D9E75 0%, #0F6E56 100%);
  border-bottom: none;
}
.cl-detail-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cl-detail-icon .fa { color: #fff; font-size: 16px; }
.cl-detail-header .modal-title {
  flex: 1; min-width: 0;
  color: #fff; font-weight: 600; font-size: 16px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-detail-header .close {
  float: none; margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff !important; text-shadow: none; opacity: .9;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: background .15s;
}
.cl-detail-header .close:hover { background: rgba(255,255,255,.28); opacity: 1; }
.cl-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
@media (max-width: 767px) {
  .cl-detail-modal .modal-dialog { width: 100vw; }
}

/* =====================================================================
   view_cl_estimate_modal / view_cl_invoice_modal header extras
   Light theme — same green-gradient header as the other cl-detail-modal
   instances (e.g. shipping), plus title/subtitle, a "linked invoice"
   pill, and a cream totals card with an emphasized Total TTC row.
   ===================================================================== */
.cl-detail-header-text { flex: 1; min-width: 0; }
.cl-detail-header-text .modal-title {
  color: #fff; font-weight: 700; font-size: 15px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-detail-subtitle {
  font-size: 12px; color: rgba(255,255,255,.7); margin: 2px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cl-detail-link-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: 20px;
  background: #fff; border: none;
  color: #0F6E56 !important; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0; text-decoration: none !important;
  transition: opacity .15s;
}
.cl-detail-link-badge:hover { opacity: .85; }
.cl-detail-link-badge .fa { font-size: 11px; }

.cl-detail-info-row {
  display: flex; justify-content: space-between; gap: 20px;
  margin-bottom: 16px; flex-wrap: wrap;
  font-size: 13px; color: #5f6164; line-height: 1.7;
}

.cl-detail-info {
  font-size: 13px; color: #545558; line-height: 1.7;
}

.cl-detail-info-title {
  font-size: 18px; color: #393a3b; line-height: 1.3;
}
/* Totals card */
.cl-detail-totals-card {
  background: #F1EFE8; border-radius: 12px; padding: 16px 18px; margin-top: 14px;
}
.cl-detail-totals-row {
  display: flex; justify-content: space-between; padding: 5px 0;
  font-size: 13px; color: #8a8272;
}
.cl-detail-totals-row.is-total {
  font-weight: 700; font-size: 15px; color: #1a1a1a;
  border-top: 1px solid rgba(0,0,0,.08); margin-top: 6px; padding-top: 12px;
}
.cl-detail-terms {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 14px; font-size: 12.5px; color: #5a5e64; line-height: 1.6;
}
.cl-detail-terms .fa { margin-top: 2px; flex-shrink: 0; color: #6b7280; }

.cl_estimates_table{
  font-size: 12px;
}
/* ===============================================================
    RIGHT-SIDE SLIDER — shared by the install estimate form and the
    read-only estimate/invoice/shipping/installation detail sliders.
    Styled to match the admin "intervention" modal design system
    (green gradient header, pill radios, soft-grey inputs).
    =============================================================== */
.ie-slider {
  position: fixed; top: 0; right: -820px; width: 820px; max-width: 94vw; height: 100%;
  z-index: 1051; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.15);
  display: flex; flex-direction: column; transition: right .3s cubic-bezier(.4,0,.2,1);
  font-family: inherit;
}
#install_estimate form { display: flex; flex-direction: column; height: 100%; min-height: 0; }



.ie-slider-header {
  background: linear-gradient(135deg, #1D9E75 0%, #0F6E56 100%);
  padding: 16px 22px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.ie-header-icon {
  width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ie-header-icon .fa { color: #fff; font-size: 16px; }
.ie-header-sub {
  font-size: 11px; color: rgba(255,255,255,.65); margin: 0 0 2px;
  letter-spacing: .06em; text-transform: uppercase;
}
.ie-header-title {
  font-size: 16px; font-weight: 600; color: #fff; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ie-close {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15);
  border: none; color: #fff; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 15px; transition: background .2s; flex-shrink: 0;
}
.ie-close:hover { background: rgba(255,255,255,.28); }

.ie-slider-body { flex: 1; overflow-y: auto; padding: 20px 22px 8px; }

#install_estimate .ie-section-label {
  font-size: 12px; color: #5e5e5e; text-transform: uppercase; 
      letter-spacing: .06em;
  font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid #f0f3f7;
      margin: 7px 0 4px;
  display: flex; align-items: center;
}

/* --- labels & inputs (same recipe as the intervention modal) --- */
#install_estimate .control-label,
#install_estimate .form-group > label {
  font-size: 11px; color: #718096; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; margin-bottom: 5px; display: block;
}
#install_estimate .form-control {
  border-radius: 6px; border: 0.5px solid #d1d9e0; background: #f8f9fb;
  color: #2d3748; font-size: 13px; height: 36px; box-shadow: none; transition: border-color .15s;
}
#install_estimate textarea.form-control { height: auto; }
#install_estimate .form-control:focus {
  border-color: #1D9E75; background: #fff; box-shadow: 0 0 0 3px rgba(29,158,117,.1);
}
#install_estimate .input-group-addon {
  border-radius: 6px; background: #eef0f3;margin-left:17px;
  border: 0.5px solid #d1d9e0; 
      font-size: 12px; font-weight: 600; color: #718096;
}
#install_estimate .bootstrap-select > .btn {
  border-radius: 6px !important; border: 0.5px solid #d1d9e0 !important;
  background: #f8f9fb !important; color: #2d3748 !important;
  font-size: 13px !important; height: 36px !important; padding: 6px 10px !important; box-shadow: none !important;
}
#install_estimate .bootstrap-select > .btn:focus,
#install_estimate .bootstrap-select.open > .btn {
  border-color: #1D9E75 !important; box-shadow: 0 0 0 3px rgba(29,158,117,.1) !important;
}

/* --- pill-style radios --- */
#install_estimate .ie-pill-row { display: flex; flex-wrap: wrap; gap: 0; }
#install_estimate .im-pill-radio { margin: 0 8px 8px 0 !important; padding: 0 !important; }
#install_estimate .im-pill-radio input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
#install_estimate .im-pill-radio label {
  display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important;
  padding: 8px 18px !important; font-size: 13px; font-weight: 500; color: #1B2330; background: #fff;
  border: 1px solid #E3E6EB; border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#install_estimate .im-pill-radio label::before,
#install_estimate .im-pill-radio label::after { display: none !important; content: none !important; }
#install_estimate .im-pill-radio label:hover { border-color: #b9c0cc; }
#install_estimate .im-pill-radio input[type="radio"]:checked + label {
  background: #1D9E75 !important; border-color: #1D9E75 !important; color: #fff !important; font-weight: 700;
}

/* --- footer --- */
#install_estimate .im-footer {
  padding: 14px 22px; border-top: 1px solid #e2e8f0; background: #f8f9fb;
  display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
}
#install_estimate .im-btn-close {
  padding: 8px 18px; border-radius: 7px; border: 0.5px solid #d1d9e0;
  background: #fff; color: #718096; font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s;
}
#install_estimate .im-btn-close:hover { background: #f0f3f7; }
#install_estimate .im-btn-save {
  padding: 8px 22px; border-radius: 7px; border: none;
  background: linear-gradient(135deg, #1D9E75, #0F6E56); color: #fff;
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 2px 10px rgba(15,110,86,.3); transition: opacity .15s;
}
#install_estimate .im-btn-save:hover { opacity: .9; color: #fff; }

@media (max-width: 767px) {
  .ie-slider { width: 100%; right: -110%; }
}