/**
 * Cactus brand palette on top of Vuexy core.css.
 *
 * Το core.css είναι token-driven, οπότε το rebranding γίνεται σε δύο βήματα:
 *  1. Light: το :root block νικά τα tokens του core στο cascade (ίδια
 *     specificity, μεταγενέστερο αρχείο).
 *  2. Dark: το core ξαναορίζει ΟΛΑ τα tokens σε [data-bs-theme=dark] (μωβ
 *     primary #7367f0, μωβ-navy επιφάνειες #25293c/#2f3349). Χωρίς δικό μας
 *     dark block, το :root παραπάνω «κέρδιζε» μισά tokens και έδινε υβρίδιο:
 *     σκούρο πράσινο link σε σκούρο φόντο, mint subtle πάνω σε charcoal.
 *     Το html[data-bs-theme=dark] block (specificity 0,1,1) νικά και τα δύο.
 *
 * Brand: πράσινο του κάκτου #2b8167 → #47d7ac. Το dark δεν είναι αντιστροφή:
 * παίρνει φωτεινότερο primary (το #2b8167 χάνεται σε σκούρο φόντο) και
 * green-charcoal επιφάνειες αντί για το μωβ-navy του Vuexy.
 */
:root,
[data-bs-theme='light'] {
  --bs-primary: #2b8167;
  --bs-primary-rgb: 43, 129, 103;
  --bs-primary-bg-subtle: #eaf6f1;
  --bs-primary-border-subtle: #bfe3d5;
  --bs-primary-text-emphasis: #1f5e4b;
  --bs-link-color: #2b8167;
  --bs-link-color-rgb: 43, 129, 103;
  --bs-link-hover-color: #236a55;
  --bs-link-hover-color-rgb: 35, 106, 85;
  /* Οι επιφάνειες του Vuexy είναι μωβ-γκρι (#f8f7fa)· εδώ γέρνουν διακριτικά
     προς το πράσινο ώστε και το light να «μυρίζει» brand χωρίς να φωνάζει. */
  --bs-body-bg: #f5f8f7;
  --bs-body-bg-rgb: 245, 248, 247;
  --bs-border-color: #e2e8e5;
}

html[data-bs-theme='dark'] {
  /* Accent: φωτεινότερος κάκτος για σκούρο φόντο */
  --bs-primary: #3db392;
  --bs-primary-rgb: 61, 179, 146;
  --bs-primary-bg-subtle: #21382f;
  --bs-primary-border-subtle: #2e5747;
  --bs-primary-text-emphasis: #8fdcc2;
  --bs-primary-contrast: #0e1815;
  --bs-link-color: #5ec9a7;
  --bs-link-color-rgb: 94, 201, 167;
  --bs-link-hover-color: #7cd6ba;
  --bs-link-hover-color-rgb: 124, 214, 186;

  /* Green-charcoal επιφάνειες στη θέση του μωβ-navy */
  --bs-body-bg: #1e2422;
  --bs-body-bg-rgb: 30, 36, 34;
  --bs-paper-bg: #262e2b;
  --bs-paper-bg-rgb: 38, 46, 43;
  --bs-body-color: #b4c2bc;
  --bs-body-color-rgb: 180, 194, 188;
  --bs-heading-color: #dae5e0;
  --bs-secondary-color: #82938c;
  --bs-secondary-color-rgb: 130, 147, 140;
  --bs-border-color: #3a453f;
  --bs-secondary-bg: #35413b;
  --bs-secondary-bg-rgb: 53, 65, 59;
  --bs-tertiary-bg: #2d3733;
  --bs-tertiary-bg-rgb: 45, 55, 51;
  --bs-base-color: #dfeae5;
  --bs-base-color-rgb: 223, 234, 229;
  --bs-secondary-bg-subtle: #37453e;

  /* Η γκρι κλίμακα του Vuexy dark είναι μωβ-tinted (#3a3d53...) και τη
     χρησιμοποιούν δευτερεύοντα UI (select2 hover, dividers, muted κείμενα).
     Μεταφέρεται στην ίδια πράσινη-charcoal οικογένεια, τόνο προς τόνο. */
  --bs-gray-25: #2f3b36;
  --bs-gray-50: #35423c;
  --bs-gray-75: #384540;
  --bs-gray-100: #4b5d55;
  --bs-gray-200: #3f4d46;
  --bs-gray-300: #5b6e66;
  --bs-gray-400: #6d8078;
  --bs-gray-500: #8ba299;
  --bs-gray-600: #93a89f;
  --bs-gray-700: #a5b8af;
  --bs-gray-800: #b7c9c0;
  --bs-gray-900: #cfe0d8;

  /* Το sidebar/menu του Vuexy hardcode-άρει #2f3349 στο dark — ακολουθεί
     την ίδια green-charcoal οικογένεια, ένα σκαλί πιο σκούρο από τα cards. */
  --bs-menu-bg: #222927;
  --bs-menu-bg-rgb: 34, 41, 39;
  --bs-menu-color: #c0cec8;
  --bs-menu-color-rgb: 192, 206, 200;
  --bs-menu-hover-color: #dae5e0;
  --bs-menu-sub-active-color: #dae5e0;
  --bs-menu-horizontal-active-bg: #21382f;
}

/* Dark: τα components με compiled τιμές light (outline/label κουμπιά, focus)
   παίρνουν τον φωτεινό accent — το #2b8167 ως ΚΕΙΜΕΝΟ χάνεται στο σκούρο. */
html[data-bs-theme='dark'] .btn-outline-primary {
  --bs-btn-color: #5ec9a7;
  --bs-btn-border-color: #3db392;
  --bs-btn-hover-bg: #3db392;
  --bs-btn-hover-border-color: #3db392;
  --bs-btn-hover-color: #0e1815;
  --bs-btn-active-bg: #3db392;
  --bs-btn-active-color: #0e1815;
}
html[data-bs-theme='dark'] .btn-primary {
  /* το hover σκουραίνει στο light· στο dark φωτίζει, αλλιώς «σβήνει» */
  --bs-btn-hover-bg: #35997a;
  --bs-btn-hover-border-color: #35997a;
  --bs-btn-active-bg: #3db392;
  --bs-btn-active-border-color: #3db392;
}
html[data-bs-theme='dark'] .btn-label-primary {
  background: #21382f !important;
  color: #8fdcc2 !important;
}
html[data-bs-theme='dark'] .form-control:focus,
html[data-bs-theme='dark'] .form-select:focus {
  border-color: #3db392;
}

.btn-primary {
  --bs-btn-bg: #2b8167;
  --bs-btn-border-color: #2b8167;
  --bs-btn-hover-bg: #236a55;
  --bs-btn-hover-border-color: #236a55;
  --bs-btn-focus-shadow-rgb: 43, 129, 103;
  --bs-btn-active-bg: #1f5e4b;
  --bs-btn-active-border-color: #1f5e4b;
  --bs-btn-disabled-bg: #2b8167;
  --bs-btn-disabled-border-color: #2b8167;
}

.btn-outline-primary {
  --bs-btn-color: #2b8167;
  --bs-btn-border-color: #2b8167;
  --bs-btn-hover-bg: #2b8167;
  --bs-btn-hover-border-color: #2b8167;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #2b8167;
  --bs-btn-active-border-color: #2b8167;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 43, 129, 103;
}

.btn-label-primary {
  background: #eaf6f1 !important;
  color: #2b8167 !important;
  border-color: transparent;
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: #2b8167;
  border-color: #2b8167;
}

.form-control:focus,
.form-select:focus {
  border-color: #2b8167;
}

.page-item.active .page-link {
  background-color: #2b8167;
  border-color: #2b8167;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #2b8167;
}

/* Cactus gradient accent (welcome card header, email header mirrors this) */
.bg-gradient-cactus {
  background: linear-gradient(135deg, #2b8167 0%, #47d7ac 100%) !important;
  color: #fff;
}

/* Progress bars pick the accent gradient */
.progress-bar.bg-cactus {
  background: linear-gradient(90deg, #2b8167, #47d7ac);
}

/* Flush list-groups inside cards: align rows with the card's 1.5rem inset
   (Vuexy list-group-item x-padding is 1.25rem, which misaligns with card headers) */
.card > .list-group-flush .list-group-item {
  padding: 0.75rem 1.5rem;
}
.card > .list-group-flush:last-child .list-group-item:last-child {
  padding-bottom: 1.25rem;
}

/* 2026-08-13: ένα κλικ μικρότερη τυπογραφία παντού (αίτημα Dimitris) —
   όλα τα Vuexy μεγέθη είναι σε rem, οπότε κλιμακώνονται αναλογικά. */
html { font-size: 14px; }

/* 2026-08-13: μικρότερα headings (αίτημα Dimitris).
   Το core.css δίνει ΣΤΑΘΕΡΑ line-heights (h2: 3.5rem κ.λπ.) κομμένα για τα
   αρχικά μεγάλα μεγέθη — με τα μικρότερα fonts άφηναν τεράστια κενά γύρω
   από κάθε τίτλο, γι' αυτό επανέρχονται σε αναλογικό 1.4. */
h1, .h1 { font-size: 1.45rem; line-height: 1.4; }
h2, .h2 { font-size: 1.22rem; line-height: 1.4; }
h3, .h3 { font-size: 1.08rem; line-height: 1.4; }
h4, .h4 { font-size: .98rem; line-height: 1.4; }
h5, .h5 { font-size: .9rem; line-height: 1.4; }
h6, .h6 { line-height: 1.4; }
.card .card-header .card-title { margin-bottom: 0; }

/* DataTables export buttons: πάντα κρυφά — τα widgets έχουν δικά τους trigger icons
   (τα κρύβει το @section('style') των widgets, που όμως δεν περνάει σε κάθε layout) */
.button-ex { display: none !important; }
/* ============================================================================
   DataTables: ΕΝΑΣ δείκτης φόρτωσης
   ---------------------------------------------------------------------------
   Το DataTables αποδίδει το δικό του `.dt-processing` (με class `card` στο BS5
   integration, δηλαδή λευκό κουτί) και μέσα του μπαίνει το custom
   `sProcessing` των widgets — ένα `fa-spinner fa-3x`. Αποτέλεσμα: κουτί +
   τεράστιος κύκλος, δύο πράγματα να κοιτάς. Ούτε η προηγούμενη λύση
   (`display: none` στο container) ήταν σωστή: εξαφάνιζε κάθε ένδειξη.

   Εδώ μένει ένας διακριτικός δείκτης: μικρό pill πάνω από τον πίνακα, με τον
   spinner σε λογικό μέγεθος. Δεν χρειάζεται αλλαγή στα ~70 widgets.
   ========================================================================= */
.dt-processing,
.dataTables_processing {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 5; margin: 0 !important;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: auto !important; min-width: 0; height: auto;
  padding: .5rem .9rem;
  background: var(--bs-paper-bg, #fff) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 2rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
  font-size: .8125rem; color: var(--bs-secondary-color);
}
/* Ο custom spinner των widgets σε μέγεθος ετικέτας, όχι 3x */
.dt-processing .fa-spinner,
.dataTables_processing .fa-spinner {
  font-size: 1rem !important; line-height: 1; margin: 0;
}
.dt-processing .fa-spinner::after,
.dataTables_processing .fa-spinner::after { content: none; }
/* ΕΔΩ ήταν οι «δύο loaders»: το DataTables 2 προσθέτει ΠΑΝΤΑ τα δικά του
   κινούμενα dots (ένα <div> χωρίς class με 4 παιδιά) και ΔΙΠΛΑ τους μπαίνει
   το custom `sProcessing` των widgets. Όταν υπάρχει custom spinner, τα dots
   περισσεύουν. */
.dt-processing:has(.fa-spinner) > div:not([class]),
.dt-processing:has(.spinner-border) > div:not([class]) { display: none; }

.dt-container { position: relative; }
/* BS3 input-group-btn leftovers: ευθυγράμμιση σε BS5 input-group */
.input-group-btn, span.input-group-btn { display: flex; align-items: stretch; }
.input-group-btn .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ProUI "widget" tiles → Vuexy.
   ΠΡΟΣΟΧΗ: η ίδια κλάση .widget-simple εξυπηρετεί ΔΥΟ διαφορετικά πράγματα —
   (α) πλακίδια ενέργειας μέσα σε <a> (Νέα Πώληση, Τηλέφωνο): ετικέτα + εικονίδιο
       σε μία οριζόντια γραμμή·
   (β) πλακίδια στατιστικών (Ενεργές, Κερδισμένες): εικονίδιο + αριθμός + ετικέτα
       σε κατακόρυφη στοίβα.
   Ένα κοινό flex rule τα έσπαγε και τα δύο, γι' αυτό διαχωρίζονται ρητά. */
a.widget, .widget.widget-hover-effect1, .widget.widget-hover-effect2 {
  display: block; text-decoration: none; color: inherit;
}
/* ΠΡΟΣΟΧΗ: --bs-body-bg είναι το φόντο ΤΗΣ ΣΕΛΙΔΑΣ (γκριζωπό), όχι των cards.
   Με αυτό το πλακίδιο χανόταν μέσα στη σελίδα· τα «σηκωμένα» στοιχεία θέλουν
   --bs-paper-bg, το ίδιο λευκό που έχουν τα cards. */
.widget-simple {
  padding: .8rem 1rem; border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-paper-bg, #fff);
  transition: box-shadow .15s ease, border-color .15s ease; margin-bottom: 1rem;
}
.widget:hover .widget-simple {
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); border-color: var(--bs-primary);
}

/* (α) Πλακίδιο ενέργειας */
a.widget .widget-simple {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
a.widget .widget-simple .fa-3x {
  font-size: 1.25rem !important; color: var(--bs-primary); float: none !important; order: 2;
}
a.widget .widget-simple h4.widget-content { margin: 0; font-size: .9375rem; font-weight: 600; }

/* (β) Πλακίδιο στατιστικού */
.widget-simple.text-center { display: block; text-align: center; }
.widget-simple.text-center .icon {
  line-height: 1 !important; font-size: 1.25rem !important;
  color: var(--bs-secondary-color); margin-bottom: .35rem;
}
.widget-simple.text-center h3.widget-content {
  margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3;
}
.widget-simple.text-center h3.widget-content small {
  display: block; font-size: .6875rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bs-secondary-color); margin-top: .15rem;
}
/* Τα ProUI themed-color-* δεν υπάρχουν στο BS5· δίνουν τόνο μόνο στο εικονίδιο */
.themed-color-fire    .icon { color: var(--bs-danger); }
.themed-color-success .icon { color: var(--bs-success); }
.themed-color-modern  .icon { color: var(--bs-primary); }
.themed-color-warning .icon { color: var(--bs-warning); }

/* ProUI widget-extra headers (ticket single κ.ά.) */
.widget-extra, .widget-extra-full { padding: .35rem 0; }
h5.widget-content-light { margin: 0 0 .25rem; color: var(--bs-secondary-color); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }

/* ============================================================================
   2026-08-13 — Enterprise UI pass (αίτημα Dimitris: «εργαλείο που δουλεύουμε
   όλη μέρα»). Ο στόχος είναι πυκνότητα ΧΩΡΙΣ στοίβαγμα: σταθερό ρυθμό κενών,
   ήσυχους τίτλους, και πίνακες που σαρώνονται με το μάτι.

   Ένα inset (--cactus-inset) διέπει card-header, card-body και κελιά πίνακα,
   ώστε όλες οι στήλες να ευθυγραμμίζονται κάθετα σε όλη τη σελίδα.
   ========================================================================= */
:root {
  --cactus-inset: 1.25rem;   /* οριζόντιο padding cards & πινάκων */
  --cactus-gap: 1.25rem;     /* κάθετο κενό ανάμεσα σε cards */
}

/* --- 1. Κενά ανάμεσα στα cards -------------------------------------------
   Το core.css αφήνει .card { margin-bottom: 0 } στα grid columns, οπότε τα
   widgets ακουμπούσαν το ένα το άλλο. Στοχεύουμε ΜΟΝΟ cards που είναι άμεσα
   παιδιά στήλης/στήλης-περιεχομένου, ώστε να μην πειραχτούν τα nested. */
[class*="col-"] > .card,
[class*="col-"] > .widget,
.container-fluid > .card,
.container-fluid > .row + .card {
  margin-bottom: var(--cactus-gap);
}
[class*="col-"] > .card:last-child { margin-bottom: var(--cactus-gap); }
/* Οι σειρές να αναπνέουν κι αυτές */
.content-wrapper .row { row-gap: 0; }

/* --- 2. Cards: ήσυχη κεφαλίδα, σταθερό inset ---------------------------- */
.card > .card-header {
  padding: .85rem var(--cactus-inset) .7rem;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  min-height: 0;
}
/* order: τα legacy templates γράφουν συχνά τα κουμπιά ΠΡΙΝ τον τίτλο (float-end
   στο BS3), οπότε η σειρά στο flex ορίζεται ρητά αντί να ακολουθεί το DOM. */
.card > .card-header > h1, .card > .card-header > h2,
.card > .card-header > h3, .card > .card-header > h4,
.card > .card-header > .card-title, .card > .card-header > .block-title {
  font-size: .9375rem; font-weight: 600; line-height: 1.3; margin: 0;
  letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; order: 1;
}
/* Το εικονίδιο του τίτλου ήσυχο, όχι δεύτερο accent */
.card > .card-header > h1 > .fa, .card > .card-header > h2 > .fa,
.card > .card-header > h3 > .fa, .card > .card-header > h4 > .fa {
  color: var(--bs-secondary-color); margin-right: .4rem; font-size: .9em;
}
/* Actions δεξιά, χωρίς float hacks του ProUI */
.card > .card-header > .block-options,
.card > .card-header > .float-end,
.card > .card-header > .btn,
.card > .card-header > .btn-group,
.card > .card-header > .badge {
  float: none !important; margin-left: auto; display: flex;
  align-items: center; gap: .375rem; flex: 0 0 auto; order: 2;
}
/* Όταν υπάρχουν πολλά action blocks, μόνο το πρώτο σπρώχνει προς τα δεξιά */
.card > .card-header > [class*="float-end"] ~ [class*="float-end"],
.card > .card-header > .block-options ~ .block-options { margin-left: 0; }
.card > .card-body { padding: var(--cactus-inset); }
.card > .card-header + .card-body { padding-top: 1rem; }
.card > .block-content { padding: 1rem var(--cactus-inset) var(--cactus-inset); }

/* Tabs μέσα σε card-header: μοιράζονται τη γραμμή με τα actions και κάθονται
   στο border. order:1 ώστε να προηγούνται των κουμπιών ακόμη κι όταν το
   template τα γράφει μετά. */
.card > .card-header > .nav-tabs {
  flex: 1 1 auto; min-width: 0; border-bottom: 0; order: 1;
  margin: .35rem -.25rem -.7rem; align-self: flex-end;
}
.card > .card-header > .nav-tabs .nav-link { padding: .5rem .85rem; font-size: .875rem; }

/* --- 3. Πίνακες: σαρώσιμοι --------------------------------------------- */
.card .table { margin-bottom: 0; }
.card .table > :not(caption) > * > * { padding: .5rem .75rem; }
/* Ευθυγράμμιση πρώτης/τελευταίας στήλης με το inset του card */
.card .table > :not(caption) > * > *:first-child { padding-left: var(--cactus-inset); }
.card .table > :not(caption) > * > *:last-child  { padding-right: var(--cactus-inset); }

/* Κεφαλίδες: μικρές, ήσυχες, ξεκάθαρα «ετικέτες» και όχι δεδομένα */
.card .table > thead > tr > th,
.card table.dataTable > thead > tr > th {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bs-secondary-color);
  background: transparent; white-space: nowrap;
  border-bottom: 1px solid var(--bs-border-color); vertical-align: middle;
}
.card .table > tbody > tr > td { vertical-align: middle; font-size: .875rem; }
/* Ήπιες γραμμές: υπογράμμιση αντί για πλέγμα ή έντονο zebra */
.card .table.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.card .table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
.card .table > tbody > tr { border-bottom: 1px solid var(--bs-border-color); }
.card .table > tbody > tr:last-child { border-bottom: 0; }
.card .table > tbody > tr:hover > * { background-color: var(--bs-tertiary-bg); }
/* Αριθμοί σε στοίχιση: ίδιο πλάτος ψηφίων για κάθετη σάρωση */
.card .table td, .card .table th { font-variant-numeric: tabular-nums; }

/* Πίνακες που ξεχειλίζουν κυλούν μέσα στο card, ποτέ η σελίδα */
.card .table-responsive, .card .dt-container { overflow-x: auto; }

/* DataTables chrome (αναζήτηση/σελιδοποίηση/πληροφορία): δευτερεύον βάρος */
.dt-container .dt-layout-row { padding: 0 var(--cactus-inset); }
.dt-container .dt-info, .dt-container .dataTables_info {
  font-size: .8125rem; color: var(--bs-secondary-color); padding-top: .75rem;
}
.dt-container .pagination { margin-bottom: .25rem; }
.dt-container .page-link { padding: .25rem .55rem; font-size: .8125rem; }
/* Τα search inputs των φίλτρων μικρότερα */
.dt-container thead input.form-control { padding: .25rem .5rem; font-size: .8125rem; }

/* --- 4. Breadcrumb: legacy BS3 <ul><li> χωρίς breadcrumb-item ------------
   Χωρίς αυτό τα κομμάτια κολλούσαν μεταξύ τους («ΠελάτηςCactus»). */
.breadcrumb { font-size: .8125rem; margin-bottom: 1rem; padding: 0; background: transparent; }
.breadcrumb > li { display: flex; align-items: center; color: var(--bs-secondary-color); }
.breadcrumb > li + li::before {
  content: "/"; padding: 0 .5rem; color: var(--bs-secondary-color); opacity: .55;
}
.breadcrumb > li > a { color: var(--bs-secondary-color); text-decoration: none; }
.breadcrumb > li > a:hover { color: var(--bs-primary); text-decoration: underline; }
.breadcrumb > li:last-child { color: var(--bs-heading-color); font-weight: 500; }

/* --- 5. Επικεφαλίδα σελίδας: τίτλος + ενέργειες σε μία ήσυχη ζώνη ------- */
.content-wrapper h1.page-heading,
.content-wrapper > .container-fluid > h1:first-of-type { font-size: 1.35rem; margin-bottom: .25rem; }

/* --- 6. Κουμπιά: ένα μέγεθος πιο συμπαγή σε πυκνές περιοχές ------------- */
.card-header .btn-sm, .card-header .btn { padding: .28rem .65rem; font-size: .8125rem; }
.card-header .btn .fa { font-size: .85em; }

/* --- 7. Badges/labels: ευανάγνωστα σε μικρό μέγεθος -------------------- */
.card .badge { font-weight: 500; font-size: .75rem; padding: .3em .55em; }

/* --- 8. Widget Σημειώσεων: σταθερή κεφαλίδα + λίστα που κυλάει ----------- */
.cactus-notes { display: flex; flex-direction: column; max-height: 26rem; }
.cactus-notes > .card-header { flex: 0 0 auto; }
/* order 3: κάτω από τον τίτλο (order 1) και τα actions (order 2) */
.cactus-notes-search { flex: 1 1 100%; margin-top: .5rem; order: 3; }
.cactus-notes-list { flex: 1 1 auto; overflow-y: auto; margin: 0; }
.cactus-note {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem var(--cactus-inset);
  border-bottom: 1px solid var(--bs-border-color);
}
.cactus-note:last-child { border-bottom: 0; }
.cactus-note:hover { background: var(--bs-tertiary-bg); }
.cactus-note-author {
  flex: 0 0 3.75rem; display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none; color: var(--bs-secondary-color);
}
.cactus-note-name { font-size: .6875rem; line-height: 1.25; margin-top: .2rem; }
.cactus-note-date { font-size: .625rem; opacity: .75; }
.cactus-note-body { flex: 1 1 auto; min-width: 0; font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.cactus-note-body p:last-child { margin-bottom: 0; }
/* Το κουμπί διαγραφής εμφανίζεται στο hover — δεν διεκδικεί προσοχή συνέχεια */
.cactus-note-delete { flex: 0 0 auto; opacity: 0; transition: opacity .12s ease; }
.cactus-note:hover .cactus-note-delete, .cactus-note-delete:focus-visible { opacity: 1; }

/* --- 9. Επικεφαλίδα σελίδας (κοινό pattern σε όλες τις σελίδες) ----------
   Τίτλος + υπότιτλος αριστερά, ενέργειες/κατάσταση δεξιά, ένα κενό από κάτω. */
.ticket-page-header {
  display: flex; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: var(--cactus-gap);
}
.ticket-page-title { flex: 1 1 20rem; min-width: 0; }
.ticket-page-title h1 {
  font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: .5rem;
}
.ticket-page-title h1 .fa { color: var(--bs-secondary-color); font-size: .9em; }
.ticket-page-sub { font-size: .8125rem; color: var(--bs-secondary-color); }
.ticket-page-status { flex: 0 0 16rem; max-width: 100%; }
.ticket-page-status .select2-container { width: 100% !important; }

/* --- 10. Συμβατότητα με ονόματα χρωμάτων/κλάσεων του Bootstrap 3 ----------
   Τα enums και δεκάδες legacy views παράγουν ακόμη `default` ως χρώμα και
   `label label-*` ως chip. Χωρίς αυτά τα aliases οι καταστάσεις εμφανίζονταν
   ως άχρωμο κείμενο (π.χ. «Κλειστό», «Μέτρια» σε λίστες). */
.bg-label-default { background-color: var(--bs-secondary-bg) !important; color: var(--bs-secondary-color) !important; }
.text-default { color: var(--bs-body-color) !important; }
.bg-default { background-color: var(--bs-secondary-bg) !important; }

/* BS3 .label -> BS5 badge, στη soft παλέτα (βλ. ενότητα 11) */
.label {
  display: inline-block; padding: .3em .55em; font-size: .75rem; font-weight: 500;
  line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline;
  border-radius: var(--bs-border-radius);
}
a.label { text-decoration: none; }

/* ============================================================================
   11. Badges: μία soft παλέτα σε όλο το CRM
   ---------------------------------------------------------------------------
   Το Vuexy χτίζει τα chips του με `bg-label-*` — απαλό tint φόντο και έγχρωμο
   κείμενο. Ο νεότερος κώδικας το ακολουθεί ήδη (~70 σημεία), ο legacy όμως
   γράφει συμπαγή `bg-*` (~53 σημεία), οπότε η ίδια κατάσταση έδειχνε αλλιώς
   ανά σελίδα και τα έντονα χρώματα διεκδικούσαν το βλέμμα πάνω από τα δεδομένα.
   Εδώ τα συμπαγή αποκτούν την ίδια soft όψη ώστε το UI να μιλά μία γλώσσα.

   Όποιο badge πρέπει όντως να φωνάξει (μετρητές ειδοποιήσεων) παίρνει
   `.badge-solid` ή ζει μέσα στο navbar, όπου διατηρείται συμπαγές.
   ========================================================================= */
.badge, .label {
  --cactus-badge-tint: 86%;   /* πόσο φόντο μένει στο μείγμα */
  --cactus-badge-ink: 62%;    /* πόσο χρώμα μένει στο κείμενο */
  font-weight: 500;
  letter-spacing: .01em;
}

/* Το καθαρό brand χρώμα πάνω σε tint του εαυτού του δίνει contrast ~1.8:1 —
   αδιάβαστο σε 12px. Το κείμενο σκουραίνει λοιπόν κατά ένα σταθερό ποσοστό
   προς το μαύρο: κρατά την ταυτότητα του χρώματος και φτάνει ~4.5:1. */
.badge.bg-primary:not(.badge-solid),   .label-primary {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--cactus-badge-tint), var(--bs-primary)) !important;
  color: color-mix(in sRGB, var(--bs-primary) var(--cactus-badge-ink), #000) !important;
}
.badge.bg-success:not(.badge-solid),   .label-success {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--cactus-badge-tint), var(--bs-success)) !important;
  color: color-mix(in sRGB, var(--bs-success) var(--cactus-badge-ink), #000) !important;
}
.badge.bg-danger:not(.badge-solid),    .label-danger {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--cactus-badge-tint), var(--bs-danger)) !important;
  color: color-mix(in sRGB, var(--bs-danger) var(--cactus-badge-ink), #000) !important;
}
.badge.bg-warning:not(.badge-solid),   .label-warning {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--cactus-badge-tint), var(--bs-warning)) !important;
  /* το κίτρινο ξεκινά πολύ φωτεινό, οπότε θέλει περισσότερο σκούρυνσμα */
  color: color-mix(in sRGB, var(--bs-warning) 48%, #000) !important;
}
.badge.bg-info:not(.badge-solid),      .label-info {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--cactus-badge-tint), var(--bs-info)) !important;
  color: color-mix(in sRGB, var(--bs-info) 58%, #000) !important;
}
/* Ουδέτερο: το --bs-secondary-color είναι πολύ ανοιχτό πάνω στο ίδιο του
   το φόντο (1.8:1), γι' αυτό το κείμενο παίρνει το χρώμα σώματος. */
.badge.bg-secondary:not(.badge-solid), .label-default, .badge.bg-default,
.badge:not([class*="bg-"]) {
  background-color: var(--bs-secondary-bg) !important;
  color: color-mix(in sRGB, var(--bs-body-color) 78%, #000) !important;
}
.badge.bg-dark:not(.badge-solid) {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-heading-color) !important;
}

/* Τα ίδια τα `bg-label-*` του Vuexy έχουν contrast ~1.8:1 (μετρημένο σε
   «Κλειστό», «Μέτρια»). Ο νεότερος κώδικας τα χρησιμοποιεί ήδη σε ~70 σημεία,
   οπότε σκουραίνει και το δικό τους κείμενο με τον ίδιο κανόνα — έτσι όλα τα
   chips, όποια κλάση κι αν γράφει το markup, διαβάζονται το ίδιο. */
.badge.bg-label-primary { color: color-mix(in sRGB, var(--bs-primary) var(--cactus-badge-ink), #000) !important; }
.badge.bg-label-success { color: color-mix(in sRGB, var(--bs-success) var(--cactus-badge-ink), #000) !important; }
.badge.bg-label-danger  { color: color-mix(in sRGB, var(--bs-danger)  var(--cactus-badge-ink), #000) !important; }
.badge.bg-label-warning { color: color-mix(in sRGB, var(--bs-warning) 48%, #000) !important; }
.badge.bg-label-info    { color: color-mix(in sRGB, var(--bs-info)    58%, #000) !important; }
.badge.bg-label-secondary,
.badge.bg-label-default {
  background-color: var(--bs-secondary-bg) !important;
  color: color-mix(in sRGB, var(--bs-body-color) 78%, #000) !important;
}

/* Clickable badges: υπαινιγμός ότι πατιούνται */
a > .badge, a.badge { text-decoration: none; transition: filter .12s ease; }
a:hover > .badge, a.badge:hover { filter: brightness(.96); }

/* Μετρητές ειδοποιήσεων: συμπαγείς — εδώ ΘΕΛΟΥΜΕ να τραβούν το βλέμμα.
   Το καθαρό --bs-danger με λευκό κείμενο μένει στο 3.28:1, οπότε σκουραίνει
   λίγο ώστε ο αριθμός να διαβάζεται (4.7:1) χωρίς να χάσει την έντασή του. */
.layout-navbar .badge.bg-danger,
.badge-solid.bg-danger {
  background-color: color-mix(in sRGB, var(--bs-danger) 82%, #000) !important;
  color: #fff !important;
}
.layout-navbar .badge.bg-primary,
.badge-solid.bg-primary { background-color: var(--bs-primary) !important; color: #fff !important; }

/* ============================================================================
   12. Καθολική αναζήτηση
   ---------------------------------------------------------------------------
   Το προηγούμενο dropdown ισοπέδωνε τα ομαδοποιημένα αποτελέσματα του API σε
   μια λίστα όπου κάθε γραμμή ξεκινούσε με αμετάφραστο slug badge («client»,
   «ticket»). Εδώ οι ομάδες επανέρχονται με τις ελληνικές ετικέτες τους, ο
   τύπος γίνεται εικονίδιο, και όλη η λίστα δουλεύει με το πληκτρολόγιο.
   ========================================================================= */
/* Σε desktop η μπάρα πιάνει όσο χώρο υπάρχει — είναι το κύριο εργαλείο
   πλοήγησης της εφαρμογής, όχι διακοσμητικό πεδίο στη γωνία. */
.cactus-search { position: relative; width: 100%; max-width: 46rem; }
@media (min-width: 1400px) { .cactus-search { max-width: 56rem; } }

/* Το group είχε χάσει το δεξί του περίγραμμα: το form-control είχε
   border-right:0 και το input-group-text δίπλα του δεν έβαζε δικό του. */
.cactus-search-input {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-paper-bg, #fff);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cactus-search-input:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15);
}
.cactus-search-input > .form-control,
.cactus-search-input > .input-group-text {
  border: 0; background: transparent; box-shadow: none;
}
.cactus-search-input > .form-control:focus { box-shadow: none; }

/* Το «/» φαίνεται μόνο σε ηρεμία· μόλις γράψεις γίνεται κουμπί καθαρισμού */
.cactus-search-hint { padding-right: .75rem; }
.cactus-search-hint kbd {
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  border-radius: .25rem; padding: .1rem .35rem; font-size: .7rem; line-height: 1.4;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.cactus-search-clear { border: 0; background: transparent; color: var(--bs-secondary-color); display: none; }
.cactus-search-clear:hover { color: var(--bs-body-color); }
.cactus-search.has-value .cactus-search-hint { display: none; }
.cactus-search.has-value .cactus-search-clear { display: flex; }

/* --- Το πάνελ αποτελεσμάτων --- */
.cactus-search-results {
  display: none; position: absolute; top: calc(100% + .375rem); left: 0; right: 0;
  z-index: 1080; max-height: 26rem; overflow-y: auto;
  background: var(--bs-paper-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12);
}
.cactus-search-results.is-open { display: block; }
.cactus-search-results.is-loading { min-height: 4.5rem; }
.cactus-search-results.is-loading::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
  animation: cactus-search-scan 1s linear infinite;
}
@keyframes cactus-search-scan {
  0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cactus-search-results.is-loading::after { animation: none; opacity: .6; }
}

/* Κεφαλίδα ομάδας: μένει ορατή όσο κυλάς μέσα στην ομάδα της */
.cactus-search-group {
  position: sticky; top: 0; z-index: 1;
  padding: .5rem 1rem .3rem;
  background: var(--bs-paper-bg, var(--bs-body-bg));
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.cactus-search-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1rem; text-decoration: none; color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.cactus-search-item:last-of-type { border-bottom: 0; }
.cactus-search-item > .icon-base {
  flex: 0 0 1.75rem; height: 1.75rem; display: grid; place-items: center;
  background: var(--bs-tertiary-bg); border-radius: .375rem;
  color: var(--bs-secondary-color); font-size: .9rem;
}
/* Ένα highlight state για ποντίκι ΚΑΙ πληκτρολόγιο — ποτέ δύο ταυτόχρονα */
.cactus-search-item.is-active { background: var(--bs-primary-bg-subtle); color: var(--bs-body-color); }
.cactus-search-item.is-active > .icon-base { background: var(--bs-primary); color: #fff; }

.cactus-search-text { min-width: 0; display: flex; flex-direction: column; }
.cactus-search-title { font-size: .875rem; font-weight: 500; }
.cactus-search-meta {
  font-size: .75rem; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cactus-search-item mark {
  background: transparent; padding: 0; color: var(--bs-primary); font-weight: 600;
}

.cactus-search-empty {
  padding: 1.5rem 1rem; text-align: center; color: var(--bs-secondary-color); font-size: .875rem;
}
/* Τα εικονίδια του Vuexy είναι inline-flex με δικό τους μέγεθος, οπότε το
   κεντράρισμα θέλει ρητό margin αντί για text-align του γονέα. */
.cactus-search-empty .icon-base {
  display: block; width: 1.75rem; height: 1.75rem; margin: 0 auto .5rem;
  font-size: 1.5rem; opacity: .5;
}

.cactus-search-footer {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem 1rem; border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg); font-size: .75rem;
  position: sticky; bottom: 0;
}
.cactus-search-footer a { font-weight: 500; text-decoration: none; }
.cactus-search-keys { color: var(--bs-secondary-color); }
.cactus-search-keys kbd {
  background: var(--bs-paper-bg, var(--bs-body-bg)); color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color); border-radius: .2rem;
  padding: 0 .25rem; margin: 0 .1rem; font-size: .7rem;
}
/* Σε μικρές οθόνες τα πλήκτρα δεν έχουν νόημα */
@media (max-width: 767.98px) {
  .cactus-search-keys, .cactus-search-hint { display: none; }
  .cactus-search-results { max-height: 20rem; }
}

/* ============================================================================
   13. Widgets που κυλούν
   ---------------------------------------------------------------------------
   Τα ProUI widgets έβαζαν `overflow: scroll; height: Xpx` στο ίδιο το card και
   κολλούσαν την κεφαλίδα με `position: sticky; top: -1.6em` — ένα hack που
   τραβούσε την κεφαλίδα προς τα πάνω και την έκοβε (γι' αυτό «χαλούσαν» τα
   headings σε tickets, εισπράξεις, ιστορικό επικοινωνίας κ.λπ.).

   Εδώ η δουλειά γίνεται με flex: η κεφαλίδα μένει στη θέση της, κυλά μόνο το
   περιεχόμενο, και το ύψος ρυθμίζεται ανά widget με --cactus-scroll-h.
   ========================================================================= */
.cactus-scroll-card {
  display: flex; flex-direction: column;
  max-height: var(--cactus-scroll-h, 26rem);
}
.cactus-scroll-card > .card-header {
  flex: 0 0 auto; position: static; top: auto; height: auto;
}
.cactus-scroll-card > :not(.card-header) { min-height: 0; }
.cactus-scroll-card > :not(.card-header):last-child {
  flex: 1 1 auto; overflow-y: auto;
}
/* Κεφαλίδες πινάκων μένουν ορατές όσο κυλά το περιεχόμενο */
.cactus-scroll-card thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bs-paper-bg, var(--bs-body-bg));
}

/* --- 14. Αριθμοί-κλειδιά στην κεφαλίδα widget ----------------------------
   Ποσά όπως «τιμολογημένα / οφειλή» έμπαιναν ως χρωματιστά badges χωρίς
   ετικέτα, οπότε δεν ήξερες τι διαβάζεις. Εδώ παίρνουν ετικέτα και τη θέση
   που τους αναλογεί: η ουσία του widget, δίπλα στον τίτλο. */
.widget-figures {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  flex: 1 1 100%; order: 2; margin-top: .15rem;
}
.widget-figure { display: flex; flex-direction: column; }
.widget-figure-label {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color); line-height: 1.4;
}
.widget-figure-value {
  font-size: 1.05rem; font-weight: 600; line-height: 1.25;
  font-variant-numeric: tabular-nums; color: var(--bs-heading-color);
}
/* Τα tabs πέφτουν κάτω από τους αριθμούς */
.card-header > .nav-tabs { order: 3; }

/* ============================================================================
   15. Ορφανές στήλες από τη μετατροπή BS3 → BS5
   ---------------------------------------------------------------------------
   Στο BS3 το `.form-group` ΗΤΑΝ row, οπότε `<label class="col-md-3">` +
   `<div class="col-md-9">` έδιναν οριζόντια φόρμα. Ο μετατροπέας το έκανε
   `.mb-3`, που δεν είναι row — άρα η στήλη κρατά το 75% και αφήνει ένα νεκρό
   25% δεξιά (το «περίεργο κενό» σε δημιουργία επαφής και σε ~22 άλλες φόρμες).

   Οι φόρμες μας είναι πλέον κάθετες (label πάνω, πεδίο κάτω), οπότε οι στήλες
   που ΔΕΝ ζουν μέσα σε row γίνονται πλήρους πλάτους. Τα πραγματικά rows
   (`.row > .col-*`) δεν αγγίζονται.
   ========================================================================= */
.mb-3:not(.row) > [class*="col-md-"],
.mb-3:not(.row) > [class*="col-sm-"],
.mb-3:not(.row) > [class*="col-lg-"],
.form-group:not(.row) > [class*="col-md-"] {
  flex: 0 0 100%; max-width: 100%; width: 100%;
  padding-left: 0; padding-right: 0; margin-left: 0;
}
/* Το label πάνω από το πεδίο, όχι σε δική του στήλη */
.mb-3:not(.row) > label[class*="col-"] {
  width: auto; max-width: none; flex: none;
  padding-left: 0; padding-right: 0; text-align: left; display: block;
}
/* Τα offsets της οριζόντιας φόρμας δεν έχουν νόημα πια */
.mb-3:not(.row) > [class*="col-md-offset-"],
.mb-3:not(.row) > [class*="offset-md-"] { margin-left: 0; }

/* ============================================================================
   16. Rows χωρίς padded γονέα
   ---------------------------------------------------------------------------
   Το .row του Bootstrap έχει αρνητικά οριζόντια margins και υποθέτει γονέα με
   padding (.card-body, .container). Τα legacy widgets το βάζουν κατευθείαν
   μέσα στο .card, οπότε ξεχειλίζει 24px δεξιά-αριστερά — γι' αυτό «έφευγαν»
   τα πλαίσια στις ευκαιρίες πώλησης και σε άλλα widgets.
   ========================================================================= */
.card > .row,
.card > .block-content > .row,
.tab-pane > .row:first-child {
  margin-left: 0; margin-right: 0;
  padding-left: var(--cactus-inset); padding-right: var(--cactus-inset);
}
.card > .row > [class*="col-"],
.card > .block-content > .row > [class*="col-"] {
  padding-left: .5rem; padding-right: .5rem;
}
/* ProUI υπολείμματα που κουβαλούν δικά τους padding */
.block-top, .block-content-mini-padding { padding-left: 0; padding-right: 0; }

/* ============================================================================
   17. DataTables μέσα σε cards
   ---------------------------------------------------------------------------
   Το DataTables 2 τυλίγει τον πίνακα σε `.dt-container` με flex rows. Καμία
   από αυτές δεν κόβει το πλάτος, οπότε ένας φαρδύς πίνακας (ιστορικό
   επικοινωνίας, κλήσεις, emails) έσπρωχνε το card και τη σελίδα οριζόντια.
   Εδώ ο πίνακας κυλά μέσα στο δικό του πλαίσιο και το card μένει σταθερό.
   ========================================================================= */
.card .dt-container { max-width: 100%; }
.card .dt-container > .row,
.card .dt-container > .dt-layout-row { margin-left: 0; margin-right: 0; }
.card .dt-container > .row > [class*="col-"],
.card .dt-container > .dt-layout-row > [class*="col-"],
.card .dt-container .d-md-flex { min-width: 0; }
/* Η γραμμή που περιέχει τον πίνακα κυλά· οι γραμμές ελέγχων όχι */
.card .dt-container .dt-layout-table,
.card .dt-container > .row:has(> * > table),
.card .dt-container > div:has(> table) {
  overflow-x: auto; max-width: 100%;
}
.card .dt-container table.dataTable { margin-bottom: 0; }

/* Τα φίλτρα/σελιδοποίηση του DataTables στο inset του card */
.card .dt-container > .row:first-child,
.card .dt-container > .row:last-child { padding: .5rem var(--cactus-inset); }

/* --- 18. Avatar stack (ιδέα #11) ----------------------------------------
   Οι ανατεθειμένοι έμπαιναν ως τρία badges + «...», που έκρυβε ποιοι είναι.
   Η στοίβα χωράει όλη την ομάδα και δείχνει το όνομα στο hover. */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack-item {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--bs-paper-bg, #fff); margin-left: -.5rem;
  background: var(--bs-tertiary-bg); text-decoration: none;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: transform .12s ease, z-index 0s;
}
.avatar-stack-item:first-child { margin-left: 0; }
.avatar-stack-item:hover { transform: translateY(-2px) scale(1.08); z-index: 2; }
.avatar-stack-item img { width: 100%; height: 100%; object-fit: cover; }
.avatar-stack-initials {
  font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); line-height: 1;
}

/* Το ημερολόγιο ζει στο <body> ώστε να μην το κόβει κανένα scroll container —
   άρα θέλει z-index πάνω από το modal. ΠΡΟΣΟΧΗ: στο Vuexy το modal είναι στο
   1090 (όχι στο 1055 του σκέτου Bootstrap) και το backdrop στο 1089 — με 1070
   το ημερολόγιο άνοιγε ΠΙΣΩ από το backdrop και «δεν εμφάνιζε κάτι». */
.flatpickr-calendar { z-index: 1095 !important; }

/* Το flatpickr βασίζεται στο animation `fpFadeInDown` για να ανέβει από
   opacity 0 σε 1. Όταν το animation δεν προχωρά (μετρήθηκε κολλημένο στο
   currentTime 0), το ημερολόγιο μένει αόρατο αν και ανοιχτό — «δεν εμφανίζει
   κάτι». Ένας date picker δεν κερδίζει τίποτα από fade 300ms: εμφανίζεται
   ακαριαία και δεν εξαρτάται από τον animation clock. */
.flatpickr-calendar.animate.open,
.flatpickr-calendar.open {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================================
   19. Ίσα ύψη σε διπλανά widgets + αναπνοή κάτω από τους πίνακες
   ---------------------------------------------------------------------------
   Έσοδα/Εισπράξεις και τα πλακίδια ευκαιριών κάθονταν δίπλα-δίπλα με
   διαφορετικά ύψη, που έδινε ακανόνιστο ρυθμό στη σελίδα. Σε μια στήλη grid
   το card γεμίζει το ύψος της σειράς του.
   ========================================================================= */
.row > [class*="col-"] > .card.h-row,
.row.row-equal > [class*="col-"] { display: flex; }
.row.row-equal > [class*="col-"] > .card { flex: 1 1 auto; }

/* Τα stat tiles μιας σειράς στο ίδιο ύψος, ό,τι κι αν λέει η ετικέτα τους */
.row > [class*="col-"] > .widget,
.row > [class*="col-"] > .widget > .widget-simple { height: 100%; }
.widget-simple.text-center {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 5.5rem;
}

/* Η σελιδοποίηση/πληροφορία του DataTables ακουμπούσε το κάτω άκρο του card.
   Το padding μπαίνει στο ίδιο το container: το τελευταίο παιδί είναι συχνά ένα
   άδειο <div class="clear"> από το legacy `dom` config, οπότε το :last-child
   δεν έπιανε τίποτα. */
.card .dt-container,
.card .dataTables_wrapper { padding-bottom: .75rem; }
.card .dt-container > .clear { display: none; }

/* Γραμμή ενεργειών στο κάτω μέρος κάθε tab pane: ίδια θέση και βάρος σε όλα
   τα tabs, αντί για κουμπιά που αιωρούνται με διαφορετικά χρώματα ανά καρτέλα */
.tab-actions {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
  padding-top: .85rem; margin-top: .85rem;
  border-top: 1px solid var(--bs-border-color);
}
.tab-pane > .block-content > .tab-actions:first-child { border-top: 0; margin-top: 0; }

/* Πίνακες με σύνολο: η γραμμή αθροίσματος κολλά στο κάτω μέρος του scroll
   container, όπως η κεφαλίδα κολλά στο πάνω. */
.cactus-scroll-card tfoot th {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--bs-tertiary-bg);
  border-top: 1px solid var(--bs-border-color);
  font-weight: 600;
}

/* --- 20. Σύνοψη πελάτη (ιδέα #9) ----------------------------------------
   Μια λωρίδα με τα βασικά νούμερα στην κορυφή της καρτέλας, ώστε να μη
   χρειάζεται κύλιση σε πέντε widgets για να απαντηθεί «πώς πάει αυτός». */
.client-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background: var(--bs-paper-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  margin-bottom: var(--cactus-gap); overflow: hidden;
}
.client-summary-item {
  padding: .7rem var(--cactus-inset);
  border-right: 1px solid var(--bs-border-color);
  display: flex; flex-direction: column; gap: .1rem;
  text-decoration: none; color: inherit;
}
.client-summary-item:last-child { border-right: 0; }
a.client-summary-item:hover { background: var(--bs-tertiary-bg); }
.client-summary-label {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color);
}
.client-summary-value {
  font-size: 1.15rem; font-weight: 600; line-height: 1.25;
  font-variant-numeric: tabular-nums; color: var(--bs-heading-color);
}

/* Τα ενεργά συμβόλαια ως chips μέσα στο κουτί σύνοψης, στη θέση όπου τα
   υπόλοιπα κουτιά έχουν αριθμό — ίδιο ύψος γραμμής, χωρίς να πηδά το grid. */
.client-summary-chips {
  display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
  min-height: 1.45rem; padding-top: .15rem;
}
.client-summary-chips .badge { font-size: .6875rem; }

/* ============================================================================
   21. Κεφαλίδα με αριθμούς + tabs (Έσοδα, Εισπράξεις)
   ---------------------------------------------------------------------------
   Τρεις σειρές (τίτλος / αριθμοί / tabs) έτρωγαν το μισό card πριν φανεί ένα
   δεδομένο — και ο τίτλος επαναλάμβανε ό,τι έλεγαν ήδη τα tabs. Έμειναν δύο:
   οι αριθμοί με την ενέργεια στην πρώτη, τα tabs στη δεύτερη.
   ========================================================================= */
.card > .card-header-figures {
  padding-top: .75rem; padding-bottom: 0; row-gap: 0; align-items: flex-start;
}
.card > .card-header-figures > .widget-figures {
  order: 1; flex: 1 1 auto; margin: 0; gap: 1.5rem;
}
.card > .card-header-figures > .block-options {
  order: 2; margin-left: auto; align-self: center;
}
.card > .card-header-figures > .nav-tabs {
  order: 3; flex: 1 1 100%; margin: .6rem calc(var(--cactus-inset) * -1) 0;
  padding: 0 var(--cactus-inset); border-bottom: 0;
}
.card > .card-header-figures > .nav-tabs .nav-link {
  padding: .4rem .7rem; font-size: .8125rem;
}
/* Οι αριθμοί εδώ είναι ο τίτλος του widget, οπότε σηκώνουν λίγο περισσότερο βάρος */
.card-header-figures .widget-figure-value { font-size: 1.2rem; }

/* Πλακίδια ενέργειας: κενό από το card που ακολουθεί (Νέα Πώληση / Τηλέφωνο) */
.row > [class*="col-"] > a.widget { display: block; margin-bottom: var(--cactus-gap); }
a.widget .widget-simple { margin-bottom: 0; }

/* Τα κουμπιά μιας ομάδας ενεργειών στο ίδιο ύψος, ό,τι κι αν περιέχουν */
.card-header .block-options > .btn,
.card-header .block-options > .btn-group > .btn { line-height: 1.5; }

/* `help-card` είναι το BS3 `help-block` περασμένο από τον μετατροπέα (block→card).
   Στο BS5 η αντίστοιχη κλάση είναι `form-text`. */
.help-card {
  display: block; margin-top: .25rem;
  font-size: .8125rem; color: var(--bs-secondary-color);
}

/* ============================================================================
   22. Υποσέλιδο πινάκων (πληροφορία + σελιδοποίηση)
   ---------------------------------------------------------------------------
   Το «Showing 1 to 4 of 4 entries» και τα κουμπιά σελίδων ακουμπούσαν το κάτω
   άκρο του card χωρίς κενό. Παίρνουν το inset του card και μια ήπια γραμμή
   που τα ξεχωρίζει από τα δεδομένα.
   ========================================================================= */
.card .dt-container .dt-info,
.card .dt-container .dataTables_info,
.card .dataTables_wrapper .dataTables_info {
  padding: .35rem 0; font-size: .8125rem; color: var(--bs-secondary-color);
}
.card .dt-container .dt-layout-row:last-of-type,
.card .dt-container > .row:last-of-type,
.card .dataTables_wrapper > .row:last-child {
  padding: .75rem var(--cactus-inset) .25rem;
  margin-top: .25rem;
  border-top: 1px solid var(--bs-border-color);
  align-items: center;
}
.card .dt-container .pagination { margin: 0; }

/* ============================================================================
   23. Επιλογή θέματος (light / dark / system)
   ========================================================================= */
.theme-switcher { padding: .35rem 1rem .5rem; }
.theme-switcher-label {
  display: block; font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .35rem;
}
.theme-option.active {
  background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}

/* --- Dark theme: οι δικές μας επιφάνειες ---------------------------------
   Το core.css του Vuexy επαναορίζει τα --bs-* στο dark, οπότε ό,τι χτίσαμε με
   μεταβλητές ακολουθεί μόνο του. Εδώ διορθώνονται μόνο τα σημεία όπου
   γράψαμε σταθερό χρώμα ή που το legacy markup φέρνει δικό του. */
[data-bs-theme="dark"] {
  --cactus-badge-tint: 78%;   /* πιο σκούρο φόντο θέλει λιγότερο tint */
  --cactus-badge-ink: 100%;   /* το κείμενο δεν σκουραίνει — φωτίζει */
}
[data-bs-theme="dark"] .badge.bg-primary:not(.badge-solid),
[data-bs-theme="dark"] .badge.bg-label-primary, [data-bs-theme="dark"] .label-primary {
  color: color-mix(in sRGB, var(--bs-primary) 70%, #fff) !important;
}
[data-bs-theme="dark"] .badge.bg-success:not(.badge-solid),
[data-bs-theme="dark"] .badge.bg-label-success, [data-bs-theme="dark"] .label-success {
  color: color-mix(in sRGB, var(--bs-success) 70%, #fff) !important;
}
[data-bs-theme="dark"] .badge.bg-danger:not(.badge-solid),
[data-bs-theme="dark"] .badge.bg-label-danger, [data-bs-theme="dark"] .label-danger {
  color: color-mix(in sRGB, var(--bs-danger) 75%, #fff) !important;
}
[data-bs-theme="dark"] .badge.bg-warning:not(.badge-solid),
[data-bs-theme="dark"] .badge.bg-label-warning, [data-bs-theme="dark"] .label-warning {
  color: color-mix(in sRGB, var(--bs-warning) 80%, #fff) !important;
}
[data-bs-theme="dark"] .badge.bg-info:not(.badge-solid),
[data-bs-theme="dark"] .badge.bg-label-info, [data-bs-theme="dark"] .label-info {
  color: color-mix(in sRGB, var(--bs-info) 80%, #fff) !important;
}
/* Το --bs-body-color στο dark είναι πολύ κοντά στο --bs-secondary-bg (1.95:1
   μετρημένο), οπότε το ουδέτερο badge θέλει ρητά ανοιχτό κείμενο. */
[data-bs-theme="dark"] .badge.bg-secondary:not(.badge-solid),
[data-bs-theme="dark"] .badge.bg-label-secondary, [data-bs-theme="dark"] .label-default,
[data-bs-theme="dark"] .badge.bg-default,
[data-bs-theme="dark"] .badge:not([class*="bg-"]) {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 78%, #fff) !important;
  color: color-mix(in sRGB, var(--bs-body-color) 45%, #fff) !important;
}

/* Ο μετρητής ειδοποιήσεων μένει ΣΥΜΠΑΓΗΣ και στο dark: οι παραπάνω κανόνες
   τον έπιαναν (δεν φέρει .badge-solid) και τον έκαναν 1.84:1. */
[data-bs-theme="dark"] .layout-navbar .badge.bg-danger,
[data-bs-theme="dark"] .badge-solid.bg-danger {
  /* ίδιο σκούρυνσμα με το light, ώστε το λευκό νούμερο να περνά contrast */
  background-color: color-mix(in sRGB, var(--bs-danger) 82%, #000) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .layout-navbar .badge.bg-primary,
[data-bs-theme="dark"] .badge-solid.bg-primary {
  background-color: var(--bs-primary) !important; color: #fff !important;
}

/* Σταθερά #fff fallbacks: στο dark θα ήταν λευκά κουτιά σε σκούρα σελίδα */
[data-bs-theme="dark"] .widget-simple,
[data-bs-theme="dark"] .client-summary,
[data-bs-theme="dark"] .cactus-search-input,
[data-bs-theme="dark"] .quill-onclick,
[data-bs-theme="dark"] .cactus-search-results,
[data-bs-theme="dark"] .cactus-search-group,
[data-bs-theme="dark"] .cactus-scroll-card thead th,
[data-bs-theme="dark"] .dt-processing,
[data-bs-theme="dark"] .info-table,
[data-bs-theme="dark"] .ticket-stats {
  background-color: var(--bs-paper-bg) !important;
}
[data-bs-theme="dark"] .avatar-stack-item { border-color: var(--bs-paper-bg); }

/* Το legacy markup γράφει alert-success/-danger με ανοιχτά χρώματα */
[data-bs-theme="dark"] .alert-success {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 82%, var(--bs-success));
  border-color: transparent; color: color-mix(in sRGB, var(--bs-success) 75%, #fff);
}
[data-bs-theme="dark"] .alert-danger {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 82%, var(--bs-danger));
  border-color: transparent; color: color-mix(in sRGB, var(--bs-danger) 78%, #fff);
}
/* Ο editor και το ημερολόγιο έχουν δικό τους λευκό */
[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--bs-body-color); }
[data-bs-theme="dark"] .ql-snow .ql-fill { fill: var(--bs-body-color); }
[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--bs-paper-bg); color: var(--bs-body-color);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .flatpickr-day { color: var(--bs-body-color); }
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-weekdays { background: transparent; color: var(--bs-body-color); }

/* Το runtime-injected btn-close πηγαίνει δεξιά, ακόμη κι όταν το legacy
   modal-header έχει text-center ή δικά του floats */
.modal-header > .btn-close { margin-left: auto; align-self: flex-start; }
.modal-header.text-center { text-align: left; display: flex; align-items: center; }

/* Λογότυπο ανά θέμα: αποδίδονται και οι δύο εκδόσεις και το CSS δείχνει τη
   σωστή βάσει του ζωντανού data-bs-theme — έτσι η εναλλαγή θέματος από τον
   switcher αλλάζει το λογότυπο αμέσως, χωρίς reload. */
.app-brand-logo-dark { display: none; }
[data-bs-theme="dark"] .app-brand-logo-light { display: none; }
[data-bs-theme="dark"] .app-brand-logo-dark { display: inline-block; }

/* ============================================================================
   24. Running timer στο navbar
   ---------------------------------------------------------------------------
   Ένα pill που διαβάζεται με μια ματιά: κουκκίδα κατάστασης → χρόνος →
   πού δουλεύεις → ενέργειες. Παλλόμενη κουκκίδα μόνο όσο μετράει.
   ========================================================================= */
.cactus-timer-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .3rem .45rem .3rem .8rem;
  background: var(--bs-paper-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 2rem;
  box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .06);
  max-width: 26rem;
}
.cactus-timer-dot {
  width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--bs-secondary-color);
}
.cactus-timer-pill.is-running .cactus-timer-dot {
  background: var(--bs-success);
  animation: cactus-timer-pulse 1.6s ease-in-out infinite;
}
.cactus-timer-pill.is-paused .cactus-timer-dot { background: var(--bs-warning); }
@keyframes cactus-timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), .45); }
  50%      { box-shadow: 0 0 0 .3rem rgba(var(--bs-success-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cactus-timer-pill.is-running .cactus-timer-dot { animation: none; }
}
.cactus-timer-time {
  font-weight: 600; font-size: .875rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--bs-heading-color);
}
.cactus-timer-pill.is-paused .cactus-timer-time { color: var(--bs-secondary-color); }
.cactus-timer-target {
  font-size: .8125rem; color: var(--bs-secondary-color); text-decoration: none;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cactus-timer-target:hover { color: var(--bs-primary); text-decoration: underline; }
.cactus-timer-actions { display: inline-flex; gap: .15rem; margin-left: .1rem; }
.cactus-timer-btn {
  padding: .3rem .45rem; line-height: 1; border: 0; border-radius: 50%;
  background: transparent; color: var(--bs-secondary-color);
}
.cactus-timer-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-heading-color); }
.cactus-timer-btn-stop:hover { background: var(--bs-danger); color: #fff; }

/* Το panel της φόρμας έναρξης */
.cactus-timer-menu { width: 21rem; }
.cactus-timer-menu .form-group,
.cactus-timer-menu .mb-3 { margin-bottom: .85rem; }
.cactus-timer-menu label { font-size: .8125rem; margin-bottom: .25rem; display: block; }
.cactus-timer-menu #start-timer-btn { width: 100%; }
/* Σε κινητό το όνομα του ticket στο pill θυσιάζεται πρώτο */
@media (max-width: 767.98px) {
  .cactus-timer-target { display: none; }
  .cactus-timer-pill { max-width: none; }
}

/* ============================================================================
   25. Δευτερεύουσες στήλες πινάκων (ιδέα #13)
   ---------------------------------------------------------------------------
   Σε στενές οθόνες/στήλες, ένας πίνακας 13 στηλών σημαίνει ατελείωτο
   οριζόντιο scroll. Οι στήλες που δεν απαντούν την κύρια ερώτηση του πίνακα
   παίρνουν `col-secondary` (μέσω DataTables className: th+td μαζί) και
   εμφανίζονται μόνο όταν υπάρχει χώρος.
   ========================================================================= */
@media (max-width: 1399.98px) {
  .card th.col-secondary,
  .card td.col-secondary { display: none; }
}

/* ============================================================================
   26. Ειδοποιήσεις navbar + σελίδα ιστορικού (ιδέα #6)
   ---------------------------------------------------------------------------
   Per-type icons σε bg-label κύκλους, unread κουκκίδα, και διακριτικό
   background στα αδιάβαστα — ίδια γλώσσα σε dropdown και ιστορικό.
   ========================================================================= */
.nav-notification-unread { background: color-mix(in srgb, var(--bs-primary) 6%, transparent); }
.nav-notification-item:hover { background: var(--bs-gray-100); }
.nav-notification-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bs-primary);
}
html[data-bs-theme='dark'] .nav-notification-item:hover { background: var(--bs-gray-100); }

/* DataTables export buttons: διακριτικά outline αντί για συμπαγή γκρι μπάρα */
div.dt-buttons .btn {
  background: transparent;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  padding: .35rem .85rem;
}
div.dt-buttons .btn:hover,
div.dt-buttons .btn.enabled {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Tasks του ticket: το deadline δεν κόβεται και οι ενέργειες μένουν σε μία γραμμή */
#ticket-tasks-table .ticket-task-deadline input { min-width: 7.25rem; }

/* ============================================================================
   27. Kanban (κοινό — projects status/members/milestones + tickets tab)
   ---------------------------------------------------------------------------
   Οι στήλες παίρνουν το χρώμα τους από το --kanban-accent (inline, κρατά τη
   σημασιολογία της παλιάς παλέτας) αλλά ως απαλό tint + accent γραμμή, όχι
   συμπαγές ProUI header. Οι κάρτες: paper, λεπτό αριστερό accent ανά
   προτεραιότητα, hover lift, grab cursor.
   ========================================================================= */
.cactus-kanban {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .25rem .25rem .75rem;
  align-items: flex-start;
}
.cactus-kanban-col {
  --kanban-accent: var(--bs-secondary);
  flex: 0 0 272px;
  min-width: 272px;
  background: var(--bs-gray-100);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
}
.cactus-kanban-col-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .75rem;
  border-radius: .5rem .5rem 0 0;
  background: color-mix(in srgb, var(--kanban-accent) 14%, var(--bs-paper-bg));
  border-bottom: 2px solid color-mix(in srgb, var(--kanban-accent) 70%, transparent);
  cursor: grab;
}
.cactus-kanban-col-title {
  flex: 1;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--kanban-accent) 55%, var(--bs-body-color));
}
.cactus-kanban-count {
  font-size: .6875rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kanban-accent) 22%, var(--bs-paper-bg));
  color: color-mix(in srgb, var(--kanban-accent) 62%, #000);
  white-space: nowrap;
}
html[data-bs-theme='dark'] .cactus-kanban-count {
  color: color-mix(in srgb, var(--kanban-accent) 45%, #fff);
}
.cactus-kanban-cards {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  min-height: 14rem;
  max-height: 65vh;
  scrollbar-width: thin;
}
.cactus-kanban-empty {
  text-align: center;
  font-size: .75rem;
  color: var(--bs-secondary-color);
  padding: 1.5rem .5rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .4rem;
}
.cactus-kanban-card {
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--bs-border-color);
  border-radius: .4rem;
  padding: .55rem .7rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .12s ease, transform .12s ease;
}
.cactus-kanban-card:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .09);
  transform: translateY(-1px);
}
.cactus-kanban-card:active { cursor: grabbing; }
.cactus-kanban-card.high { border-left-color: var(--bs-danger); }
.cactus-kanban-card.medium { border-left-color: var(--bs-secondary); }
.cactus-kanban-card.low { border-left-color: var(--bs-success); }
.cactus-kanban-card-title {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bs-body-color);
  margin-bottom: .15rem;
}
.cactus-kanban-card-title:hover { color: var(--bs-primary); }
.cactus-kanban-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
  font-size: .71875rem;
  color: var(--bs-secondary-color);
}
.cactus-kanban-meta .fa { font-size: .65rem; }
/* SortableJS states */
.cactus-kanban-card.sortable-ghost {
  opacity: .45;
  border: 1px dashed var(--bs-primary);
}
.cactus-kanban-col.dragging-column { opacity: .6; }

/* ============================================================================
   28. Project tabs (καρτέλα project)
   ---------------------------------------------------------------------------
   Underline tabs πάνω σε μία βάση-γραμμή: πιο «δεμένα» από σκόρπια pills,
   με καθαρό κενό icon-κειμένου και ορατό active. Σε στενές οθόνες η γραμμή
   σκρολάρει οριζόντια αντί να τσακίζει.
   ========================================================================= */
.cactus-project-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .25rem;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}
.cactus-project-tabs::-webkit-scrollbar { display: none; }
.cactus-project-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  padding: .55rem .9rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}
.cactus-project-tabs .nav-link .fa {
  font-size: .8em;
  opacity: .8;
}
.cactus-project-tabs .nav-link:hover {
  color: var(--bs-body-color);
  border-bottom-color: var(--bs-border-color);
}
.cactus-project-tabs .nav-link.active {
  color: var(--bs-primary);
  background: transparent;
  border-bottom-color: var(--bs-primary);
}
.cactus-project-tabs .nav-link.active .fa { opacity: 1; }

/* Kanban card actions: διακριτικά ghost icons, ορατά μόνο στο hover */
.cactus-kanban-card { position: relative; }
.cactus-kanban-card-actions {
  position: absolute;
  top: .35rem;
  right: .45rem;
  display: flex;
  gap: .35rem;
  opacity: 0;
  transition: opacity .12s ease;
}
.cactus-kanban-card:hover .cactus-kanban-card-actions { opacity: 1; }
.cactus-kanban-card-actions a {
  color: var(--bs-secondary-color);
  font-size: .75rem;
  padding: .15rem .25rem;
  border-radius: .25rem;
  background: var(--bs-paper-bg);
}
.cactus-kanban-card-actions a:hover {
  color: var(--bs-primary);
  background: var(--bs-gray-100);
}

/* ============================================================================
   29. Compact toast (cactusToast helper)
   ---------------------------------------------------------------------------
   Δικό μας minimal toast: πάνω δεξιά κάτω από το navbar, μικρός χρωματιστός
   δίσκος-icon, μία γραμμή κειμένου, slide-in. Χωρίς SweetAlert internals.
   ========================================================================= */
#cactus-toast-stack {
  position: fixed;
  top: 4.75rem;
  right: 1rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
  pointer-events: none;
}
.cactus-toast-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 22rem;
  padding: .55rem .85rem;
  border-radius: .5rem;
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bs-heading-color);
  opacity: 0;
  transform: translateX(.75rem);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
.cactus-toast-item.show {
  opacity: 1;
  transform: translateX(0);
}
.cactus-toast-icon {
  width: 1.4rem;
  height: 1.4rem;
  min-width: 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .7rem;
}
.cactus-toast-success .cactus-toast-icon { background: var(--bs-success); }
.cactus-toast-error .cactus-toast-icon { background: var(--bs-danger); }
.cactus-toast-warning .cactus-toast-icon { background: var(--bs-warning); }
.cactus-toast-info .cactus-toast-icon { background: var(--bs-info); }

/* ============================================================================
   30. Auth σελίδες (login / register / password reset)
   ---------------------------------------------------------------------------
   Κεντραρισμένη κάρτα σε ήρεμο φόντο, theme-aware λογότυπο (ίδιες classes
   με το sidebar), λιτή φόρμα. Χωρίς το ProUI full-bg φωτογραφικό backdrop.
   ========================================================================= */
.cactus-auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bs-body-bg);
}
.cactus-auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
  padding: 2rem;
}
.cactus-auth-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}
.cactus-auth-brand img {
  max-height: 52px;
  width: auto;
}
.cactus-auth-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--bs-heading-color);
  margin-bottom: .25rem;
}
.cactus-auth-sub {
  text-align: center;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  margin-bottom: 1.5rem;
}
.cactus-auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}
.cactus-auth-divider::before,
.cactus-auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--bs-border-color);
}

/* ============================================================================
   31. Sidebar sub-items με δικό τους icon
   ---------------------------------------------------------------------------
   Το Vuexy βάζει bullet (::before) σε κάθε sub-item· όσα έχουν ΚΑΙ δικό
   τους icon έδειχναν δύο «κύκλους». Όταν υπάρχει .menu-icon, το bullet
   κρύβεται και μένει μόνο το icon.
   ========================================================================= */
.menu .menu-sub > .menu-item > .menu-link:has(.menu-icon)::before {
  display: none;
}
.menu .menu-sub > .menu-item > .menu-link .menu-icon {
  font-size: .95em;
  margin-inline-end: .5rem;
  margin-inline-start: -1.15rem;
}

/* ============================================================================
   32. Impersonation bar (view as)
   ---------------------------------------------------------------------------
   Λεπτή, αδιαμφισβήτητη λωρίδα στην κορυφή όσο βλέπουμε ως άλλος χρήστης —
   με την έξοδο πάντα δίπλα στο μήνυμα.
   ========================================================================= */
.cactus-impersonation-bar {
  position: sticky;
  top: 0;
  z-index: 1085;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .4rem 1rem;
  background: #b36b35;
  color: #fff;
  font-size: .8125rem;
  line-height: 1.4;
}
.cactus-impersonation-text .fa { margin-inline-end: .35rem; }
.cactus-impersonation-sub { opacity: .82; }
.cactus-impersonation-exit {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: .25rem;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .6rem;
}
.cactus-impersonation-exit:hover { background: #fff; color: #8a4f22; }

/* Password toggle στα auth πεδία: το «μάτι» μέσα στο input, χωρίς να
   μετακινεί το κείμενο του κωδικού. */
.cactus-password-field { position: relative; }
.cactus-password-field input { padding-inline-end: 2.5rem; }
.cactus-password-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: .1rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--bs-secondary-color);
  padding: .35rem .6rem;
  line-height: 1;
}
.cactus-password-toggle:hover { color: var(--bs-primary); }