/* ---------------------------------------------------------------------------
 * SimpleCRM overrides on top of the ECPortal stack
 * (Bootstrap 3.3.5 + AdminLTE 2.x + skin-blue)
 * Keep this file SMALL — tweaks only, not a full theme.
 * --------------------------------------------------------------------------- */

/* Pull the EC color palette in for status/badge styling */
:root {
  --ec-primary:        #17A2B8;
  --ec-primary-blue:   #2196F3;
  --ec-dark:           #343A40;
  --ec-success:        #28A745;
  --ec-warning:        #FFC107;
  --ec-danger:         #DC3545;
}

/* ---------- Scrolling: undo any AdminLTE viewport locking ----------
   AdminLTE's "fixed" mode adds overflow:hidden to html/body and routes
   scroll to .content-wrapper. We don't use fixed mode any more, so make
   sure nothing else (older AdminLTE rules, stale state) blocks scroll. */
html, body { height: auto !important; overflow-y: auto !important; }
.wrapper { min-height: 100vh; height: auto; overflow: visible; }
.content-wrapper { min-height: 0; height: auto; overflow: visible; }

/* Keep the header pinned to the top while content scrolls — sticky, not fixed,
   so AdminLTE's fixed-mode CSS hooks don't kick in. */
.main-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: 50px;
}
.main-header .logo,
.main-header .navbar {
  min-height: 50px;
  height: 50px;
}
.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
  height: 50px;
  align-items: center;
  justify-content: center;
}
.main-header .logo .logo-lg { display: flex; gap: 7px; padding: 0 8px; }
/* The C mark is square; the wordmark is a ~6:1 vector. Give each its height and let the width
   follow, or the wordmark squashes. */
.main-header .brand-mark {
  height: 30px;
  width: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}
.main-header .brand-wordmark {
  height: 15px;
  width: auto;
  flex: 0 0 auto;
}
.main-header .brand-suffix {
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  opacity: .92;
  white-space: nowrap;
}
.main-header .logo-mini .brand-mark { height: 30px; width: 30px; margin: 10px auto; display: block; }
/* Header colour is set in the EyesClear-palette section below (navy). This block only fixes the
   sticky-header sizing; the AdminLTE default fill here would be overridden anyway. */
.main-header .navbar-btn {
  height: 50px;
  margin: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-sidebar { position: fixed; top: 50px; bottom: 0; overflow-y: auto; }

/* Page-title bars removed — not needed, and they slid under the sticky header.
   Hidden globally so every page's content starts cleanly below the banner. */
.content-header { display: none; }

/* Detail pages keep their identity and primary actions visible without bringing
   back the old generic AdminLTE title bar on every screen. */
.record-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 15px 4px;
}
.record-heading { min-width: 0; }
.record-heading h1 {
  margin: 3px 0 2px;
  font-size: 25px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.record-heading h1 .label,
.record-heading h1 .status { vertical-align: middle; }
.record-back { display: inline-block; font-size: 12px; font-weight: 600; }
.record-meta { color: #6C757D; font-size: 13px; }
.record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.record-actions form { margin: 0; }
.email-record-header { align-items: center; }

.contact-client-picker { display: flex; gap: 6px; }
#reply-modal .reply-prompt { min-height: 96px !important; }

/* Slightly more breathing room in tables */
.table > thead > tr > th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6C757D;
  background: #F8F9FA;
  border-bottom: 2px solid #DEE2E6 !important;
}
.table > tbody > tr > td { vertical-align: middle; }
.table-hover > tbody > tr:hover { background: #F1F5F9; }

/* Client status badges — colored pills */
.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.status-live { background: #DCFCE7; color: #14532D; }
.status-hot  { background: #FEE2E2; color: #7F1D1D; }
.status-warm { background: #FEF3C7; color: #78350F; }
.status-cold { background: #E2E8F0; color: #334155; }

/* AI / Claude card — soft purple gradient */
.ai-card {
  background: linear-gradient(135deg, #FAF5FF 0%, #FDF2F8 100%);
  border: 1px solid #E9D5FF;
  border-radius: 6px;
  padding: 18px 22px;
  margin-bottom: 15px;
}
.ai-card .ai-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C3AED;
  margin-bottom: 10px;
}
.ai-card .ai-label::before { content: "✦"; font-size: 14px; color: #A78BFA; }
.markdown { font-size: 14px; line-height: 1.65; color: #212529; }
.markdown h1, .markdown h2, .markdown h3 { margin: 16px 0 8px; font-weight: 600; }
.markdown h1 { font-size: 18px; }
.markdown h2 { font-size: 15px; color: #6D28D9; }
.markdown h3 { font-size: 14px; }
.markdown h1:first-child, .markdown h2:first-child, .markdown h3:first-child { margin-top: 0; }
.markdown p { margin: 0 0 10px; }
.markdown ul, .markdown ol { margin: 0 0 10px; padding-left: 22px; }
.markdown li { margin-bottom: 4px; }
.markdown strong { font-weight: 600; }
.markdown code { background: rgba(124,58,237,0.10); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
.markdown blockquote { border-left: 3px solid #A78BFA; padding-left: 12px; margin: 10px 0; color: #6B7280; }

/* Activity timeline (lives in a .box-body) */
.timeline-feed { display: flex; flex-direction: column; }
.activity {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #E2E8F0;
}
.activity:last-child { border-bottom: none; }
.activity .icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.activity .icon.note     { background: #6B7280; }
.activity .icon.call     { background: #10B981; }
.activity .icon.meeting  { background: #8B5CF6; }
.activity .icon.task     { background: #F59E0B; }
.activity .icon.email    { background: #2563EB; }
.activity .icon.linkedin { background: #0A66C2; }   /* LinkedIn brand blue */
.activity .icon.whatsapp { background: #25D366; }   /* WhatsApp brand green */
.activity .icon.other    { background: #94A3B8; }
.activity .head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.activity .title { font-weight: 600; font-size: 13px; }
.activity .when  { font-size: 11px; color: #6C757D; white-space: nowrap; }
.activity .text  { font-size: 13px; margin-top: 4px; white-space: pre-wrap; word-wrap: break-word; }

/* Quick-log composer */
.composer { background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.composer .type-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.composer .type-tabs label {
  cursor: pointer; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: #fff; border: 1px solid #DEE2E6; color: #6C757D; transition: all 0.12s ease;
  margin: 0;
}
.composer .type-tabs input { display: none; }
.composer .type-tabs input:checked + span {
  background: var(--ec-primary-blue); color: #fff; padding: 4px 12px; border-radius: 20px; margin: -4px -12px;
}
.composer textarea { width: 100%; resize: vertical; min-height: 64px; }
.composer .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 8px; }

/* Drag-drop upload zone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 28px 20px; border: 2px dashed #CBD5E1; border-radius: 8px;
  background: #FAFBFC; text-align: center; cursor: pointer; transition: all 0.15s ease; margin-bottom: 10px;
}
.dropzone:hover { border-color: var(--ec-primary-blue); background: #F0F7FF; }
.dropzone.dragover { border-color: var(--ec-primary-blue); background: #DBEAFE; border-style: solid; }
.dropzone.has-file { border-color: var(--ec-success); background: #F0FDF4; border-style: solid; }
.dropzone input[type="file"] { display: none; }
.dropzone .dz-icon { font-size: 32px; color: #94A3B8; line-height: 1; }
.dropzone.has-file .dz-icon { color: var(--ec-success); }
.dropzone .dz-title { font-size: 14px; font-weight: 600; }
.dropzone .dz-hint { font-size: 12px; color: #6C757D; }
.dropzone .dz-filename { font-size: 13px; font-weight: 600; color: #065F46; margin-top: 4px; word-break: break-all; }

/* Stat tiles for import result */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat { background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: 6px; padding: 12px; text-align: center; }
.stat .n { font-size: 22px; font-weight: 700; color: var(--ec-primary-blue); }
.stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #6C757D; margin-top: 4px; }

/* Tweaks for the AdminLTE box that look amateur out of the box */
.box {
  border-top: 3px solid var(--ec-primary);
}
.box.box-primary { border-top-color: var(--ec-primary-blue); }
.box.box-success { border-top-color: var(--ec-success); }
.box-header.with-border { border-bottom: 1px solid #F4F4F4; }
.box-title { font-size: 16px; font-weight: 500; }
.box-body { padding: 15px; }

/* Make DataTables filter row inputs look like the rest */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border-radius: 4px; }

/* Per-column filter row inside DataTables */
table.dataTable thead .col-filter input,
table.dataTable thead .col-filter select {
  width: 100%; padding: 4px 6px; font-size: 12px; border: 1px solid #DEE2E6; border-radius: 4px;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
table.dataTable thead .col-filter th { padding: 4px 8px; cursor: default; background: #fff; }
table.dataTable thead .col-filter th::before,
table.dataTable thead .col-filter th::after { display: none !important; }

/* Sortable header indicators — clearer */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 22px !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  font-size: 11px;
  opacity: 0.4;
}
table.dataTable thead th.sorting::after      { content: "\f0dc"; }
table.dataTable thead th.sorting_asc::after  { content: "\f0de"; opacity: 1; color: var(--ec-primary-blue); }
table.dataTable thead th.sorting_desc::after { content: "\f0dd"; opacity: 1; color: var(--ec-primary-blue); }

/* Select2 sizing to match Bootstrap inputs */
.select2-container--default .select2-selection--single { height: 34px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }

/* Fix the AdminLTE sidebar-toggle hover state so it doesn't go washed out */
/* sidebar-toggle hover is set in the EyesClear-palette section (subtle white lift on navy). */

/* Tabs / buttons in the timeline don't accidentally inherit AdminLTE's blue link color */
.activity a, .activity a:hover { color: #2563EB; }

/* Small visual rhythm on edit/delete actions in tables */
.row-actions .btn { margin-right: 2px; }
.row-actions form { display: inline; }

/* DataTables detail/child rows (e.g. the Follow-ups inline "Log activity" form) */
tr.dt-detail-row > td { background: #FAFBFC; padding: 10px 12px; }
tr.dt-detail-open > td { border-bottom: 0; }
tr.dt-detail-row .form-inline .form-control { margin: 2px 4px 2px 0; }

/* ---------------------------------------------------------------------------
   New-mail notifier toasts (built by initMailNotifier() in ec-app.js)
   --------------------------------------------------------------------------- */
#ec-toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 12000;
  display: flex;
  flex-direction: column-reverse;   /* newest toast on top of the stack */
  gap: 10px;
  max-width: 360px;
}
.ec-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-left: 4px solid var(--ec-primary, #17A2B8);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.ec-toast.show { opacity: 1; transform: translateX(0); }
.ec-toast-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: var(--ec-primary, #17A2B8);
  color: #fff;
  font-size: 15px;
}
.ec-toast-body { flex: 1 1 auto; min-width: 0; }
.ec-toast-title {
  font-weight: 600;
  color: #212529;
  margin-bottom: 2px;
}
.ec-toast-sub {
  color: #6C757D;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ec-toast-close {
  flex: 0 0 auto;
  color: #ADB5BD;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  margin-left: 4px;
}
.ec-toast-close:hover { color: #6C757D; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Mobile / small-screen refinements (≤ 767px)
   AdminLTE 2 + Bootstrap 3 are only partly responsive; these keep tables,
   box headers, modals and the AI filter usable on phones.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

  html, body, .content-wrapper { overflow-x: hidden !important; }

  /* Off-canvas sidebar: our base override (.main-sidebar position:fixed) breaks
     AdminLTE's mobile slide, so drive it explicitly off the body.sidebar-open
     class that AdminLTE's hamburger toggles. */
  .main-sidebar {
    width: 230px !important;
    transform: translate(-100%, 0) !important;   /* hidden by default */
    transition: transform .3s ease-in-out;
    z-index: 1030 !important;                     /* overlay above content */
  }
  body.ec-nav-open .main-sidebar { transform: translate(0, 0) !important; }   /* slide in */
  .content-wrapper { margin-left: 0 !important; }
  /* Dim the page while the menu is open (tap content to close — handled in ec-app.js) */
  body.ec-nav-open .content-wrapper::before {
    content: ""; position: fixed; top: 100px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4); z-index: 1020; pointer-events: auto;
  }

  /* Tighter outer padding so content isn't cramped edge-to-edge */
  .content        { padding: 8px; }
  .content-header { padding: 10px 8px 0; }
  .content-header > h1 { font-size: 20px; }
  .box-body       { padding: 12px; }

  /* Plain (non-DataTable) tables: scroll sideways instead of breaking layout.
     DataTables live inside .dataTables_wrapper, so they're unaffected here. */
  .box-body > .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive { border: 0; margin-bottom: 0; }

  /* DataTables: stack the length + search controls full-width instead of
     squeezing them side-by-side */
  .dataTables_wrapper .col-sm-6 { width: 100%; }
  .dataTables_filter, .dataTables_length { float: none; text-align: left; }
  .dataTables_filter input { width: 100%; }

  /* Box header tools (buttons) drop under the title rather than overlapping it */
  .box-header .box-tools.pull-right {
    position: static;
    float: none;
    display: block;
    margin-top: 8px;
  }

  /* Keep the shell to one compact row on phones. */
  .main-header { display: flex; height: 50px; }
  .main-header .logo {
    width: 150px;
    flex: 0 0 150px;
    font-size: 18px;
    line-height: 50px;
  }
  .main-header .navbar {
    width: calc(100% - 150px);
    min-height: 50px;
    margin-left: 0;
  }
  .main-header .sidebar-toggle { padding: 15px 12px; }
  .main-header .navbar-custom-menu { float: right; }
  .main-header .navbar-btn {
    width: 48px;
    height: 50px;
    margin: 0;
    padding: 0 !important;
    font-size: 16px;
  }
  .ec-account-email, .ec-account-role { display: none; }
  .main-sidebar { top: 50px; }
  body.ec-nav-open .content-wrapper::before { top: 50px; }

  .record-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px 4px;
  }
  .record-heading h1 { font-size: 21px; }
  .record-actions { justify-content: flex-start; }
  .record-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  /* Modals (e.g. the reply composer) use the full phone width */
  .modal-dialog { width: auto; margin: 10px; }
  #reply-modal .reply-prompt { min-height: 88px !important; }

  /* Action-column buttons are comfortable touch targets. */
  .row-actions .btn, .btn-row .btn, .row-actions button {
    min-width: 44px;
    min-height: 44px;
    margin-bottom: 4px;
  }

  .contact-client-picker { flex-direction: column; }
  .contact-client-picker > .btn { align-self: flex-start; min-height: 44px; }

  /* Mobile DataTables become complete labelled cards. This intentionally
     overrides Responsive's dtr-hidden cells so actions and context are never
     silently removed on a phone. */
  .dataTables_wrapper table.ec-datatable,
  .dataTables_wrapper table.ec-datatable tbody,
  .dataTables_wrapper table.ec-datatable tr,
  .dataTables_wrapper table.ec-datatable td {
    display: block;
    width: 100% !important;
  }
  .dataTables_wrapper table.ec-datatable thead { display: none; }
  .dataTables_wrapper table.ec-datatable tbody tr {
    margin: 10px 0;
    border: 1px solid #DEE2E6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .dataTables_wrapper table.ec-datatable tbody td,
  .dataTables_wrapper table.ec-datatable tbody td.dtr-hidden {
    display: grid !important;
    grid-template-columns: minmax(84px, 30%) 1fr;
    gap: 10px;
    align-items: start;
    min-height: 40px;
    padding: 9px 10px !important;
    border-top: 1px solid #F0F2F4;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .dataTables_wrapper table.ec-datatable tbody td:first-child { border-top: 0; }
  .dataTables_wrapper table.ec-datatable tbody td::before {
    content: attr(data-label);
    color: #6C757D;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .dataTables_wrapper table.ec-datatable tbody td.row-actions {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .dataTables_wrapper table.ec-datatable tbody td.row-actions::before {
    flex: 0 0 84px;
  }
  .dataTables_wrapper table.ec-datatable tbody td.dataTables_empty {
    display: block !important;
  }

  /* The home AI-filter row: each Select2 gets its own line with spacing */
  #ai-filter-form .row > [class*="col-"] { margin-bottom: 10px; }
}

/* ===========================================================================
   ECAISupport — ECPortal palette
   The vendored AdminLTE skin-blue is #3C8DBC. ECPortal uses teal #17A2B8 as the
   brand colour and charcoal #343A40 for the sidebar, so re-skin here rather than
   fork the vendored _all-skins.min.css (which would have to be re-patched on
   every AdminLTE bump).
   Ref: CLAUDE.md "UI Design System".
   =========================================================================== */
:root {
  --ec-primary:        #17A2B8;   /* brand teal — active nav, links, primary actions, accents */
  --ec-primary-blue:   #2196F3;   /* search buttons / primary CTAs */
  --ec-accent-blue:    #007BFF;   /* links */
  --ec-dark:           #343A40;   /* sidebar */
  /* EyesClear brand navy, from the logo wordmark (#15204b–#23395B) and the theme's --primary-blue.
     Used for the header, so the white wordmark sits on the brand's own dark blue instead of a flat
     bright teal. Teal stays the accent — navy + teal is the logo's own pairing (#15204b + #029d91). */
  --ec-navy:           #23395B;
  --ec-navy-dark:      #1a2c47;
  --ec-navy-darker:    #142238;
  --ec-gray:           #6C757D;
  --ec-gray-light:     #ADB5BD;
  --ec-gray-lighter:   #DEE2E6;
  --ec-gray-lightest:  #F8F9FA;
  --ec-text:           #212529;
  --ec-success:        #28A745;
  --ec-warning:        #FFC107;
  --ec-danger:         #DC3545;
  --ec-info:           #17A2B8;
}

/* ---------- Header: EyesClear navy ---------- */
/* A gentle top-to-bottom gradient rather than a flat fill — depth without gloss, which is what
   keeps a dark bar from looking amateur. A hairline teal accent along the bottom ties the header to
   the rest of the palette. */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar {
  background-color: var(--ec-navy);
  background-image: linear-gradient(180deg, var(--ec-navy) 0%, var(--ec-navy-dark) 100%);
}
.skin-blue .main-header {
  border-bottom: 2px solid var(--ec-primary);
}
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover {
  background-color: rgba(255, 255, 255, 0.08);   /* subtle lift on the dark bar, not a colour jump */
}
.main-header .logo b { font-weight: 700; }

/* ---------- Sidebar: ECPortal charcoal ---------- */
/* ---------- Sidebar: EyesClear navy, one shell with the header ----------
   Charcoal next to a navy header read as two unrelated darks. The sidebar is now a deeper navy
   from the same family (a shade below the header), so header + sidebar form one cohesive dark
   shell. Menu text is lightened for contrast on the darker ground. */
.skin-blue .main-sidebar,
.skin-blue .wrapper,
.skin-blue .left-side { background-color: var(--ec-navy-dark); }
.skin-blue .sidebar-menu > li > a {
  color: #C6D0E0;                          /* light blue-grey — readable on navy */
  border-left: 3px solid transparent;
  font-size: 15px;
}
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
  color: #fff;
  background: var(--ec-navy);              /* a step lighter than the sidebar — a gentle lift */
  border-left-color: var(--ec-primary);    /* teal active marker */
}
.skin-blue .sidebar-menu > li.header {
  color: #8DA0BD;                          /* muted blue-grey section label */
  background: var(--ec-navy-dark);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.skin-blue .sidebar-menu > li > a > .fa {
  color: #7E93B4;
  width: 22px;
  font-size: 15px;
}
.skin-blue .sidebar-menu > li:hover > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .fa { color: var(--ec-primary); }

/* ---------- Boxes / buttons on the EC palette ---------- */
.box { border-top-color: var(--ec-primary); }
.box.box-primary { border-top-color: var(--ec-primary-blue); }
.box.box-info { border-top-color: var(--ec-primary); }
.btn-primary {
  background-color: var(--ec-primary-blue);
  border-color: var(--ec-primary-blue);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #1976D2;
  border-color: #1976D2;
}
.btn-info { background-color: var(--ec-primary); border-color: var(--ec-primary); }
.btn-info:hover, .btn-info:focus { background-color: #138496; border-color: #138496; }
a { color: var(--ec-accent-blue); }
.label-primary { background-color: var(--ec-primary-blue); }
.label-info { background-color: var(--ec-primary); }

/* ---------- Assistant chat ---------- */
/* Overrides the purple .ai-card inherited from SimpleCRM: this suite is teal. */
.ai-card {
  background: linear-gradient(135deg, #F0FBFD 0%, #F8F9FA 100%);
  border: 1px solid #B8E6EE;
}
.ai-card .ai-label { color: #0F7684; }
.ai-card .ai-label::before { color: var(--ec-primary); }
.markdown h2 { color: #0F7684; }
.markdown code { background: rgba(23, 162, 184, 0.12); }
.markdown blockquote { border-left-color: var(--ec-primary); }
.markdown pre {
  background: #2C3136;
  color: #F8F9FA;
  padding: 12px 14px;
  border-radius: 4px;
  overflow-x: auto;                        /* long docker/kubectl lines scroll, not wrap */
}
.markdown pre code { background: none; color: inherit; padding: 0; }

.chat-log { display: flex; flex-direction: column; gap: 14px; }
.chat-turn { display: flex; flex-direction: column; gap: 8px; }
.chat-q {
  align-self: flex-end;
  max-width: 78%;
  background: var(--ec-primary);
  color: #fff;
  padding: 9px 14px;
  border-radius: 14px 14px 2px 14px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-a {
  align-self: flex-start;
  max-width: 92%;
  background: #fff;
  border: 1px solid var(--ec-gray-lighter);
  border-left: 3px solid var(--ec-primary);
  padding: 12px 16px;
  border-radius: 4px;
  width: 100%;
}
.chat-a.chat-error { border-left-color: var(--ec-danger); background: #FEF2F2; }
.chat-empty { text-align: center; color: var(--ec-gray); padding: 30px 20px; }
.chat-empty .fa { font-size: 40px; color: var(--ec-gray-lighter); margin-bottom: 10px; }

/* Typing indicator while the assistant is thinking */
.chat-thinking { display: flex; align-items: center; gap: 8px; color: var(--ec-gray); font-size: 13px; }
.chat-thinking .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ec-primary);
  animation: ec-pulse 1.2s infinite ease-in-out;
}
.chat-thinking .dot:nth-child(2) { animation-delay: .15s; }
.chat-thinking .dot:nth-child(3) { animation-delay: .3s; }
@keyframes ec-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Registry token / command display ---------- */
.token-command {
  background: #2C3136;
  color: #F8F9FA;
  padding: 12px 14px;
  border-radius: 4px;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
}
.token-secret {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Guided processes — the checklist the platform drives the client through
   --------------------------------------------------------------------------- */
.proc-card {
  background: #fff;
  border: 1px solid var(--ec-gray-lighter);
  border-top: 3px solid var(--ec-primary);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.proc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proc-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.proc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ec-primary); color: #fff; font-size: 11px; font-weight: 700;
}
.proc-count { font-size: 12px; color: var(--ec-gray); white-space: nowrap; }
.proc-desc { font-size: 12.5px; color: var(--ec-gray); margin: 6px 0 10px 30px; }
.proc-bar { height: 4px; background: var(--ec-gray-lighter); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.proc-bar-fill { height: 100%; background: var(--ec-primary); transition: width .3s ease; }
.proc-bar-fill.done { background: var(--ec-success); }

.step-list { list-style: none; margin: 0; padding: 0; }
.step-row { border-bottom: 1px solid #F0F2F4; }
.step-row:last-child { border-bottom: none; }
.step-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; color: var(--ec-text); text-decoration: none;
}
.step-link:hover { background: var(--ec-gray-lightest); color: var(--ec-text); text-decoration: none; }
.step-link.step-current { background: #F0FBFD; font-weight: 600; }

.step-tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; border: 1px solid var(--ec-gray-lighter); color: var(--ec-gray-light);
}
.step-tick.tick-DONE        { background: var(--ec-success); border-color: var(--ec-success); color: #fff; }
.step-tick.tick-SKIPPED     { background: var(--ec-gray-light); border-color: var(--ec-gray-light); color: #fff; }
.step-tick.tick-BLOCKED     { background: var(--ec-danger); border-color: var(--ec-danger); color: #fff; }
.step-tick.tick-IN_PROGRESS { background: var(--ec-warning); border-color: var(--ec-warning); color: #fff; }

.step-body { flex: 1 1 auto; min-width: 0; }
.step-title { display: block; font-size: 13.5px; }
.step-meta { display: block; font-size: 11px; color: var(--ec-gray); margin-top: 1px; }
.step-meta > span { margin-right: 8px; }
.step-go { flex: 0 0 auto; color: var(--ec-gray-light); display: flex; align-items: center; gap: 8px; }
.step-next {
  background: var(--ec-primary); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .05em;
}
.step-list-compact .step-link { padding: 6px 12px; }
.step-list-compact .step-title { font-size: 12.5px; }

/* Long-lead items are the ones that quietly set the critical path — make them visible. */
.badge-lead {
  background: #FEF3C7; color: #78350F; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em;
}
.badge-opt {
  background: var(--ec-gray-lightest); color: var(--ec-gray); font-size: 10px;
  padding: 1px 6px; border-radius: 8px;
}

/* Responsibility / discipline — colour comes inline from the enum so one place owns the palette. */
.disc-badge {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 1px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .03em;
  vertical-align: middle;
}
.disc-mine {
  background: #E8F6F8; color: #0F6674; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em;
}
/* A step the signed-in user is responsible for — nudge it forward without shouting. */
.step-mine { background: #F3FAFB; }
.step-mine .step-title { font-weight: 600; }

/* ===== Must-do vs optional ===== */
/* Sidebar sub-headers that split the Activities tree into required / optional. */
.nav-subhead {
  padding: 8px 15px 3px 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8795AD; pointer-events: none;
}
/* "required" pill on a must-do overview card. */
.badge-required {
  background: var(--ec-primary, #17A2B8); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em;
  margin-left: auto;
}
/* Section headings on the overview. */
.ov-section-head {
  font-size: 15px; font-weight: 700; color: var(--ec-navy, #23395B);
  margin: 4px 0 12px 3px; padding-bottom: 6px; border-bottom: 2px solid var(--ec-primary, #17A2B8);
  display: inline-block;
}
.ov-section-head small { font-weight: 400; color: var(--ec-gray, #6C757D); font-size: 12px; margin-left: 8px; }
.ov-section-optional { border-bottom-color: var(--ec-gray-lighter, #DEE2E6); margin-top: 26px; }
.ov-section-head .fa { color: var(--ec-primary, #17A2B8); margin-right: 4px; }
.ov-section-optional .fa { color: var(--ec-gray, #6C757D); }
/* Must-do cards read a touch stronger than optional ones. */
.overview-card.core { border-left: 4px solid var(--ec-primary, #17A2B8); }
/* Purpose banner on the landing. */
.purpose-banner {
  background: #E8F6F8; border: 1px solid #B8E3E9; border-radius: 6px;
  padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: #14525C;
}
.purpose-banner .fa { color: var(--ec-primary, #17A2B8); margin-right: 6px; }
/* Arrow cue nudging the user toward the Activities menu in the sidebar. */
.activities-pointer {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ec-navy, #23395B);
}
.activities-pointer .fa {
  color: var(--ec-primary, #17A2B8); font-size: 20px;
  animation: ec-nudge-left 1.2s ease-in-out infinite;
}
@keyframes ec-nudge-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

/* ===== Step outcome (the tangible output) ===== */
/* Prominent box on the step page. */
.outcome-box {
  background: #FFF8E6; border: 1px solid #F3E0A6; border-left: 4px solid #E0A800;
  border-radius: 6px; padding: 11px 14px; margin: 0 0 12px; font-size: 13.5px;
  line-height: 1.5; color: #6b4e00;
}
.outcome-box .fa { color: #E0A800; margin-right: 6px; }
.outcome-box .outcome-label { font-weight: 700; margin-right: 4px; }
.outcome-box.outcome-done {
  background: #E9F7EE; border-color: #B7E1C4; border-left-color: #28A745; color: #1c6b34;
}
.outcome-box.outcome-done .fa { color: #28A745; }
/* Subtle one-liner in step lists (activity + must-do flow). */
.step-outcome {
  display: block; font-size: 11.5px; color: #8a6d00; margin: 2px 0 1px; line-height: 1.35;
}
.step-outcome .fa { font-size: 9px; margin-right: 4px; opacity: .8; }

/* Readiness confirmation gate on the step page. */
.readiness-box {
  background: #FFF8E6; border: 1px solid #F3E0A6; border-left: 4px solid #E0A800;
  border-radius: 6px; padding: 12px 14px; margin: 0 0 12px;
}
.readiness-box.readiness-done { background: #E9F7EE; border-color: #B7E1C4; border-left-color: #28A745; }

/* AI helper panel: the chat lives in the narrow side column now, so keep it bounded and scrollable. */
.step-help .chat-log { max-height: 420px; overflow-y: auto; }
.step-help .chat-q { font-size: 12.5px; }
.step-help .chat-a .markdown { font-size: 13px; }

/* values.yaml reference block — the templated structure, scrollable. */
.values-ref {
  font-size: 11.5px; line-height: 1.5; max-height: 360px; overflow: auto;
  background: #1a2c47; color: #e6edf6; border: 0; border-radius: 6px; padding: 12px 14px;
  white-space: pre; tab-size: 2;
}

/* ===== Getting-started landing ===== */
.howto-list { padding-left: 20px; margin: 0; }
.howto-list li { font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; padding-left: 4px; }
.howto-role { margin: 6px 0 0; font-size: 13px; color: var(--ec-gray); }

/* ===== Must-do flow: focus card + connected-ellipse stepper ===== */
.focus-card {
  position: relative; border: 1px solid #B8E3E9; background: #F2FBFC; border-radius: 8px;
  padding: 14px 16px 14px 18px; margin: 0 0 18px; border-left: 5px solid var(--ec-primary, #17A2B8);
}
.focus-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-primary, #17A2B8); margin-bottom: 4px;
}
.focus-title { font-size: 18px; font-weight: 700; color: var(--ec-navy, #23395B); margin-bottom: 6px; }
.focus-outcome { font-size: 13px; color: #6b4e00; margin-bottom: 8px; }
.focus-outcome .fa { color: #E0A800; margin-right: 5px; }
.focus-outcome span:nth-of-type(1) { font-weight: 700; }
.focus-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ec-gray); margin-bottom: 12px; }
.focus-open { font-weight: 600; }
.focus-card.focus-done {
  background: #E9F7EE; border-color: #B7E1C4; border-left-color: #28A745; color: #1c6b34;
  font-size: 15px; font-weight: 600;
}
.focus-card.focus-done .fa { color: #28A745; margin-right: 8px; }

/* The stepper: large ellipse nodes joined by arrows, wrapping across rows. */
.flow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 2px; padding: 4px 2px; }
.flow-step {
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
  width: 118px; padding: 2px; text-align: center;
}
.flow-step:hover { text-decoration: none; }
.flow-node {
  width: 60px; height: 46px; border-radius: 50%;   /* ellipse */
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; border: 2px solid; transition: transform .12s ease;
}
.flow-step:hover .flow-node { transform: scale(1.06); }
.flow-label { font-size: 11.5px; line-height: 1.3; margin-top: 6px; color: var(--ec-navy, #23395B); }
.flow-arrow { align-self: center; color: #C6D0E0; font-size: 16px; margin-top: 14px; }
/* States */
.flow-step.is-done   .flow-node { background: #28A745; border-color: #28A745; color: #fff; }
.flow-step.is-done   .flow-label { color: var(--ec-gray, #6C757D); }
.flow-step.is-todo   .flow-node { background: #fff; border-color: #C6D0E0; color: #8795AD; }
.flow-step.is-todo   .flow-label { color: var(--ec-gray, #6C757D); }
.flow-step.is-current .flow-node {
  background: var(--ec-primary, #17A2B8); border-color: var(--ec-primary, #17A2B8); color: #fff;
  box-shadow: 0 0 0 0 rgba(23,162,184,.5); animation: ec-pulse 1.6s infinite;
}
.flow-step.is-current .flow-label { color: var(--ec-primary, #17A2B8); font-weight: 700; }
@keyframes ec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(23,162,184,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(23,162,184,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,162,184,0); }
}
@media (max-width: 767px) {
  .flow-step { width: 30%; }
  .flow-arrow { display: none; }
}

@media (max-width: 767px) {
  .proc-desc { margin-left: 0; }
  .proc-head { flex-wrap: wrap; }
  .step-meta { white-space: normal; }
}

/* Step attachments — the signed NDA and friends */
.attach-list { list-style: none; margin: 0 0 12px; padding: 0; }
.attach-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; border-bottom: 1px solid #F0F2F4; font-size: 12px;
}
.attach-list li:last-child { border-bottom: none; }
.attach-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attach-name .fa { color: var(--ec-primary); }
.attach-meta { flex: 0 0 auto; color: var(--ec-gray); font-size: 11px; }
.attach-list form { margin: 0; flex: 0 0 auto; }
.attach-del { color: var(--ec-gray-light); padding: 0 2px; }
.attach-del:hover { color: var(--ec-danger); }

/* Language switcher in the header */
.ec-lang > a { color: #fff; padding: 15px 10px; display: block; }
.ec-lang > a:hover, .ec-lang.open > a { background: rgba(0,0,0,.1); color: #fff; }
.ec-lang-code { text-transform: uppercase; font-size: 12px; font-weight: 600; margin-left: 4px; }
.ec-lang .dropdown-menu { min-width: 160px; padding: 4px 0; }
.ec-lang .dropdown-menu form { margin: 0; }
.ec-lang-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 6px 16px; border: 0; background: none; text-align: left;
  font-size: 13px; color: var(--ec-text);
}
.ec-lang-item:hover { background: var(--ec-gray-lightest); }
.ec-lang-item.active { font-weight: 600; color: var(--ec-primary); }
@media (max-width: 767px) { .ec-lang-code { display: none; } }

/* ---------------------------------------------------------------------------
   Font scale — bumped up across the board.
   AdminLTE's base is 14px and much of this app was set at 11–13px, which read
   as cramped. Base goes to 15px and the components people actually read are
   lifted a step. Kept as a dedicated block so the scale is tunable in one place.
   --------------------------------------------------------------------------- */
body, .content-wrapper, .form-control { font-size: 15px; }

/* Boxes / headings */
.box-title { font-size: 17px; }
.record-heading h1 { font-size: 26px; }
.record-meta { font-size: 14px; }

/* Tables */
.table > thead > tr > th { font-size: 13px; }
.table > tbody > tr > td { font-size: 14px; }

/* Forms & buttons */
.form-control { font-size: 15px; }
.btn { font-size: 14px; }
.btn-sm, .btn-xs { font-size: 13px; }
.help-block { font-size: 13px !important; }
label { font-size: 14px; }

/* Assistant chat + rendered markdown */
.markdown { font-size: 15px; line-height: 1.7; }
.markdown h1 { font-size: 20px; }
.markdown h2 { font-size: 17px; }
.markdown h3 { font-size: 15px; }
.markdown code { font-size: 13.5px; }
.chat-q { font-size: 15px; }

/* Guided processes */
.proc-title { font-size: 18px; }
.proc-desc { font-size: 14px; }
.proc-count { font-size: 13px; }
.step-title { font-size: 15px; }
.step-meta { font-size: 12.5px; }
.step-list-compact .step-title { font-size: 14px; }

/* Header account + language */
.ec-account-email { font-size: 14px; }
.ec-lang-code { font-size: 13px; }

/* Login */
.login-box-msg { font-size: 15px; }

/* ---------------------------------------------------------------------------
   Activities: sidebar treeview + compact overview grid
   --------------------------------------------------------------------------- */
/* Treeview submenu on the navy sidebar */
.skin-blue .sidebar-menu .treeview-menu { background: var(--ec-navy-darker); padding: 2px 0; }
.skin-blue .sidebar-menu .treeview-menu > li > a {
  color: #AEBCD2; font-size: 14px; padding: 7px 5px 7px 42px;
}
.skin-blue .sidebar-menu .treeview-menu > li > a > .fa { font-size: 12px; }
.skin-blue .sidebar-menu .treeview-menu > li:hover > a,
.skin-blue .sidebar-menu .treeview-menu > li.active > a { color: #fff; background: var(--ec-navy); }
.skin-blue .sidebar-menu .treeview-menu > li.active > a { border-left: 3px solid var(--ec-primary); padding-left: 39px; }
.nav-draft {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,193,7,.22); color: #FFD866; padding: 1px 5px; border-radius: 8px; margin-left: 6px;
}

/* Overview: one compact card per activity, in a responsive grid */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.overview-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ec-gray-lighter);
  border-top: 3px solid var(--ec-primary);
  border-radius: 5px;
  padding: 14px 16px;
  color: var(--ec-text);
  text-decoration: none;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.overview-card:hover {
  color: var(--ec-text); text-decoration: none;
  box-shadow: 0 4px 14px rgba(35,57,91,.12);
  transform: translateY(-1px);
  border-color: var(--ec-primary);
}
.ov-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ov-name { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.ov-bar { height: 6px; background: var(--ec-gray-lighter); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.ov-bar-fill { height: 100%; background: var(--ec-primary); border-radius: 3px; transition: width .3s ease; }
.ov-bar-fill.done { background: var(--ec-success); }
.ov-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ec-gray); }
.ov-count strong { color: var(--ec-text); font-size: 15px; }
.ov-next { font-size: 12.5px; color: var(--ec-gray); overflow: hidden; text-overflow: ellipsis; }
.ov-next span:last-child { color: var(--ec-text); }