/* Modern UI for Perfex CRM 3.4.0 (Admin Area)
   Brand palette based on ZENDO24 logo: gold + graphite
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



:root {
  --brand: #FEC200 !important;
  /* Yellow */
  --brand-hover: #e5ac00 !important;
  --text: #374151;
  /* Gray-700 */
  --text-dark: #111827;
  /* Gray-900 */
  --muted: #9CA3AF;
  /* Gray-400 */
  --bg: #f4f7f6;
  /* Architect BG */
  --card: #FFFFFF;
  --line: #E5E7EB;
  /* Gray-200 */
  --primary: #111827;
  /* Dark text for primary accents */
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --ring: 0 0 0 4px rgba(254, 194, 0, 0.3);
}



body.admin {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
    background: var(--zendo-bg) !important;
    -webkit-font-smoothing: antialiased;
}

/* Apply font to text elements - EXCLUDE icons! */
.admin h1, .admin h2, .admin h3, .admin h4, .admin h5, .admin h6,
.admin p, .admin span:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="icon"]):not(.menu-icon),
.admin div:not(.fa):not([class*="fa-"]):not(.glyphicon),
.admin a:not(.fa):not([class*="fa-"]):not(.glyphicon),
.admin button, .admin input, .admin select, .admin textarea,
.admin label, .admin th, .admin td,
.admin .btn, .admin .form-control, .admin .panel-title,
.admin .control-label, .admin .nav-tabs > li > a,
.admin .dropdown-menu > li > a,
.admin .alert, .admin .badge, .admin .label,
.admin .modal-title, .admin .modal-body,
.admin .table, .admin .list-group-item {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

a {
  color: #d9a300;
  /* Darker yellow for text links */
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: #111;
}

/* Background */
body,
.content {
  background: var(--bg) !important;
  color: var(--text) !important;
}

#header {
  background: #fff;
  display: block;
  height: 55px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 99;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}

/* Topbar / Header */
/* Topbar / Header */
/* Topbar / Header */

#header .navbar-nav>li>a,
#header .navbar-nav>li>a>i,
#header .navbar-nav>li>a>svg,
#header .navbar-toggle,
#header .mobile-menu-toggle i {
  color: #111827 !important;
  /* Black Icons/Text */
}

#header .navbar-nav>li>a:hover,
#header .navbar-nav>li>a:hover>i,
#header .navbar-nav>li>a:hover>svg {
  color: rgba(17, 24, 39, 0.7) !important;
  background-color: #f3f4f6 !important;
}

/* Specific fix for top search icon if it's not inside an 'a' tag */
#top_search_button button,
#top_search_button i {
  color: #111827 !important;
}

/* General Header Button SVGs */
#header button svg,
#header button i {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

/* Ensure profile link text is white if visible */
#header .header-my-profile a {
  color: #111827 !important;
}

/* Sidebar */
/* Sidebar - The Navigation Rail */
.sidebar,
#side-menu,
#setup-menu,
.aside {
  background: #fff !important;
  border-right: none !important;
  /* Remove border for cleaner look */
  box-shadow: 1px 0 20px rgba(0, 0, 0, 0.02);
  /* Subtle separation shadow */
}

#side-menu li {
  margin: 4px 12px;
  /* Gutters for floating effect */
}

#side-menu li a,
#setup-menu li a {
  color: #4B5563 !important;
  /* Gray-600 */
  font-weight: 600;
  border-radius: 12px;
  /* Softer pill */
  padding: 12px 16px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

#side-menu li a:hover,
#setup-menu li a:hover {
  background: #F3F4F6 !important;
  /* Light Gray Hover */
  color: #111827 !important;
  transform: translateX(4px);
  /* Subtle shift */
}

#side-menu li.active>a,
#setup-menu li.active>a,
.menu-item-sales.active>a {
  background: #FEC200 !important;
  /* Brand Yellow */
  color: #111827 !important;
  /* Dark text for contrast */
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(254, 194, 0, 0.4);
  /* Glow effect */
  border-radius: 12px;
}

#side-menu li.active>a>i,
#setup-menu li.active>a>i,
.menu-item-sales.active>a>i {
  color: #111827 !important;
  /* Dark Icon */
}

#side-menu li.active>a:before {
  display: none !important;
}

.sidebar {
  
}

/* User Profile in Sidebar - Card Style */
.sidebar-user-profile .dropdown-toggle {
  border: none !important;
  background: #F9FAFB !important;
  box-shadow: none !important;
  margin: 0 12px;
  width: auto !important;
}

/* User Profile in Sidebar */
.admin-logo-image {
  filter: none !important;
  /* Ensure logo colors are accurate */
}



/* Cards / Panels */
.panel,
.card,
.widget,
.stats-box,
.dashboard-stat,
.widget-panel,
.panel_s,
.panel-body,
.card-body {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.panel,
.panel_s {
  background: var(--card) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 24px !important;
}

.panel .panel-heading,
.panel_s .panel-heading,
.panel_s .panel-heading-bg {
  /*background: transparent !important;*/
  border-bottom: 1px solid var(--line) !important;
  padding: 20px 24px !important;
}

.panel .panel-heading h4,
.panel_s .panel-heading h4 {
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  font-size: 1.1rem;
  margin: 0;
}

/* Dashboard spacing */
.content {
  padding: 32px !important;
}

/* Alerts (e.g., CRON warning) – softer */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.alert-danger,
.alert-warning,
.alert-info,
.alert-success {
  background: #fff !important;
}

.alert-danger {
  border-left: 6px solid #ef4444 !important;
}

.alert-warning {
  border-left: 6px solid #f59e0b !important;
}

.alert-info {
  border-left: 6px solid var(--primary) !important;
}

.alert-success {
  border-left: 6px solid #22c55e !important;
}

.bg-warning {
  background-color: #fec201;
  color:#000;
}

/* Tables – modern list look */
/* Tables - The Data Grid */
.table {
  background: transparent !important;
  border-collapse: separate;
  border-spacing: 0 4px;
  /* Row separation */
}

.table>thead>tr>th {
  border-bottom: none !important;
  /*color: #9CA3AF !important;*/
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 12px 24px !important;
  background: transparent;
}

.table>tbody>tr {
  background: #fff;
  transition: all 0.2s ease;
  /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);*/
  /* Subtle row card effect */
  /* Rounded rows if possible, usually requires td:first-child radius */
}

/* Hack to round row corners if display properties allow */
.table>tbody>tr>td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.table>tbody>tr>td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.table>tbody>tr>td {
  padding: 16px 24px !important;
  vertical-align: middle !important;
  color: #374151;
  /* Gray-700 */
  font-size: 0.9rem;
  border-top: 1px solid transparent !important;
  /* Remove top borders */
  border-bottom: 1px solid transparent !important;
}

.table>tbody>tr:hover {
  background: #FDFDEA !important;
  /* Very subtle yellow tint */
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;
}

/* Zebra Striping */
.table>tbody>tr:nth-child(even) {
  background-color: #F9FAFB;
  /* Gray-50 */
}

/* -------------------- */
/* koniec card*/

/* Inputs */
.form-control,
select.form-control,
.selectpicker,
.bootstrap-select .dropdown-toggle {
  border-radius: 12px;
  box-shadow: none !important;
}

.form-control:focus,
select.form-control:focus,
.bootstrap-select .dropdown-toggle:focus {
  border-color: rgba(79, 70, 229, .45) !important;
  box-shadow: var(--ring) !important;
}

.form-control {
  height: auto;
}

/* -------------------- */
/* koniec inputs*/

/* Buttons – pill SaaS */
/* Buttons – pill SaaS with Pop/Shadow */
.btn {
  background: var(--brand) !important;
  /* Default to Yellow */
  color: #111 !important;
  /* Black text */
  border-radius: 999px;
  font-weight: 600 !important;
  padding: 8px 24px;
  font-size: 1rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  /*margin: 0px 0px 10px 0px;*/
}

.btn:hover {
  background: #000 !important;
  /* Black bg on hover */
  color: #fff !important;
  /* White text on hover */
  
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Specific button overrides */
#btn-voice,
#btn-send {
  border-radius: 999px;
  padding: 8px 24px;
}

#btn-export-csv {
  ine-height: inherit;
    padding: 5px 13px 5px 13px;
    margin-top: -7px;
}

/* Button Groups */
.dt-buttons.btn-group>.btn,
.btn-group>.btn {
  border-radius: 0 !important;
}

.dt-buttons.btn-group>.btn:first-child,
.btn-group>.btn:first-child {
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
}

.dt-buttons.btn-group>.btn:last-child,
.btn-group>.btn:last-child {
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
}

.btn,
.btn-group>.btn {
  line-height: 1.1;
}

/*szukaj plus*/
.tw-text-white {
  background: #343434;
}

.tw-group:hover .group-hover\:\!tw-bg-primary-700 {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(254, 195, 0, 0.512) !important;
}

/* Primary & Hover States */
.btn-default {
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--text-dark) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-default:hover {
  background: #f9fafb !important;
  color: #000 !important;
  border-color: #d1d5db !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: var(--brand) !important;
  /* Yellow */
  color: #111 !important;
  /* Black text */
  border: 1px solid var(--brand) !important;
  box-shadow: 0 4px 14px 0 rgba(254, 194, 0, 0.39);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #000 !important;
  /* Black bg */
  color: #fff !important;
  /* White text */
  border-color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23);
}

.btn-success {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
}

.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

/*ai assistant*/
.qa-btn:hover {
  background: #efb202 !important;
}

.history-item:hover {
  background: #efb202 !important;
}

/* Focus ring (niebieska poświata) wokół przycisków */
.btn:focus,
.btn:focus-visible,
.btn-primary:focus,
.btn-warning:focus,
.btn-info:focus,
.btn-success:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(239, 178, 2, 0.55) !important;
  /* #efb202 */
}

/* -------------------- */
/* koniec buttons*/

/* Global Modals - The Focused Overlay */
.modal-content {
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.modal-header {
  background: #fff !important;
  border-bottom: 1px solid #F3F4F6 !important;
  padding: 24px 32px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  font-size: 1.25rem !important;
}

.modal-title {
  font-weight: 700 !important;
  color: #111827 !important;
  font-size: 1.25rem !important;
}

.modal-body {
  padding: 32px !important;
  color: #374151;
}

.modal-footer {
  background: #F9FAFB !important;
  border-top: none !important;
  padding: 20px 32px !important;
}

/* Modal Backdrop */
.modal-backdrop.in {
  opacity: 0.7 !important;
  background: rgba(17, 24, 39, 0.6) !important;
  /* Darker, sleek backdrop */
  backdrop-filter: blur(4px);
  /* Modern blur effect */
}

/* Badges / Labels */
.badge,
.label {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 4px 10px;
  font-size: 0.75rem;
  border: 1px solid transparent;
  /* Ensure consistent box model */
}

.badge.badge-primary,
.label.label-primary {
  background: rgba(254, 194, 0, 0.15) !important;
  color: #854d0e !important;
  border: 1px solid #854d0e !important;
}

.label-info,
.badge-info {
  background: rgba(254, 194, 0, .18) !important;
  color: #7A5A00 !important;
  border: 1px solid #7A5A00 !important;
}

.label-success,
.badge-success {
  background: #e0f2f1 !important;
  color: #0d9488 !important;
  border: 1px solid #2dd4bf !important;
}

.label-warning,
.badge-warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fbbf24 !important;
}

.label-danger,
.badge-danger {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border: 1px solid #f87171 !important;
}

.label-default,
.badge-default {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}

.progress {
  border-radius: 999px !important;
  background: #EEF2FF !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-bar-mini,
.progress.progress-bar-mini {
  height: 12px !important;
}

.progress-bar {
  border-radius: 999px !important;
}

/*badge chata sidebar*/
.badge {
  padding: 3px 7px;
}

/*badge klienci*/
body #menu .liveClients {
  background-color: #898989 !important;
  border: none;
}

/*badge users*/
body #menu .liveUsers {
  background-color: #f1bb00 !important;
  border: none;
}

/* -------------------- */
/* koniec badges*/

/* Dropdown menus */
.dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.alert-info {
  color: #252525;
}

/* -------------------- */
/* koniec dropdown menus*/

/* Titles */
h1,
h2,
h3,
h4 {
  letter-spacing: -0.01em;
}

hr {
  border-top: 1px solid var(--line) !important;
}

.widget,
.widget-panel {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
}

#top_search input {
  border-radius: 999px !important;
}

/*ai assistant*/
.qa h6 {
  color: #4c4c5b !important;
}

/*Inne*/
/*tekst i kolory w powiadomieniach*/
.tw-text-right {
  text-align: center;
}

.dropdown-menu>li>a {
  color: #1a1a1a;
}

.notification-wrapper .unread-notification {
  color: #1a1a1a;
  background: rgba(254, 194, 0, .18);
}

.notification-wrapper .unread-notification:hover {
  color: #1a1a1a;
  background: rgba(254, 195, 0, 0.366);
}

.notification-wrapper .unread-notification .notification-date {
  font-weight: 700 !important;
  color: #000 !important;
}

.notification-wrapper .notification-date {
  font-weight: 700 !important;
  color: #000 !important;
}

/*to do sekcja*/
.tw-bg-warning-400 {
  --tw-bg-opacity: 1;
  background-color: #f1bb00 !important;
}

.bg-info {
  background-color: #7e7e7e;
}

.qa-section-header i {
  color: #efb202 !important;
}

.qa-section {
  padding: 5px 8px !important;
}

/* -------------------- */
/* koniec titles*/

/*zadania*/

a[task-status-table] {
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 999px !important;
}

/* ZABLOKOWANE */
a[task-status-table="1"] {
  color: #000 !important;
  border: 1px solid #000 !important;
  background: rgba(75, 75, 75, .16) !important;
  border-radius: 45px !important;
}


/* DO ZROBIENIA */
a[task-status-table="4"] {
  color: rgba(106, 107, 255) !important;
  border-color: rgba(106, 107, 255) !important;
  background: rgba(106, 107, 255, .16) !important;
  border-radius: 45px;
}

/* UKOŃCZONE */
a[task-status-table="3"] {
  color: rgba(39, 182, 111) !important;
  border-color: rgba(55, 195, 126) !important;
  background: rgba(55, 195, 126, 0.16) !important;
  border-radius: 45px;
}

/* DO ROZLICZENIA (złoto) */
a[task-status-table="2"] {
  color: #efb202 !important;
  border-color: #efb202 !important;
  background: rgba(239, 178, 2, .12) !important;
  border-radius: 45px;
}

/* ROZLICZONE (money bronze) */
a[task-status-table="5"] {
  color: #8b5e34 !important;
  border-color: #8b5e34 !important;
  background: rgba(139, 94, 52, .12) !important;
  border-radius: 45px;
}

/*kafelki na gorze*/
/* ===== KAFELKI STATUSÓW – wersja bez :has() (działa wszędzie) ===== */

/* bazowy wygląd */
.tw-grid>button {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  border: 1px solid rgba(209, 213, 219, .9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.tw-grid>button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10) !important;
}

/* lewy pasek */
.tw-grid>button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: transparent;
}

/* tytuł statusu = span z inline style */
.tw-grid>button span[style] {
  font-weight: 600 !important;
}



/*tabela hover*/
.table>tbody>tr:hover {
  background: rgb(229, 211, 70, 0.11) !important;
}

/* ===== STATUS BADGE W TABELI – mapowanie na Twoje FINALNE kolory ===== */

/* (opcjonalnie) spójny look badge */
.table.tasks-overview .label[style] {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* ZABLOKOWANE (było #64748b) -> czarne + szare tło */
.table.tasks-overview .label[style*="color:#64748b"] {
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  background: #f3f4f6 !important;
}

/* DO ZROBIENIA (było #3b82f6) -> rgba(106,107,255) */
.table.tasks-overview .label[style*="color:#3b82f6"] {
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
}

/* UKOŃCZONE (było #0284c7) -> zielone (39/182/111 + border 55/195/126) */
.table.tasks-overview .label[style*="color:#0284c7"] {
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  background: #f0fdf4 !important;
}

/* DO ROZLICZENIA (było #84cc16) -> złoto #efb202 */
.table.tasks-overview .label[style*="color:#84cc16"] {
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  background: #fffbeb !important;
}

/* ROZLICZONE (było #22c55e) -> money bronze #8b5e34 */
.table.tasks-overview .label[style*="color:#22c55e"] {
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  background: #fff7ed !important;
}

/*alert opoznienia*/
/* Pasek po lewej stronie wiersza (jak w starej wersji) */
#tasks tbody tr.has-border-left {
  position: relative;
}

#tasks tbody tr.has-border-left:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-left: 3px solid transparent;
  pointer-events: none;
}

/* PRZETERMINOWANE */
#tasks tbody tr.has-border-left.row-border-danger:after {
  border-left-color: #ef4444;
}

/* (opcjonalnie) termin dzisiaj */
#tasks tbody tr.has-border-left.row-border-warning:after {
  border-left-color: #f59e0b;
}

/*priorytety*/
/* ===== PRIORYTETY – pill badge look (dropdown + zwykły span) ===== */

/* wspólny wygląd (dropdown / span) */
#tasks td a[id^="tableTaskPriority-"],
#tasks td span.inline-block[style*="color:"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: .75rem;
  border: 1px solid transparent !important;
  text-decoration: none !important;
}

/* ikonka chevron w dropdown */
#tasks td a[id^="tableTaskPriority-"] i.chevron {
  opacity: .7;
}

/* NISKI (u Ciebie #777) -> grafit */
#tasks td a[id^="tableTaskPriority-"][style*="color:#777"],
#tasks td span.inline-block[style*="color:#777"] {
  color: #111827 !important;
  border-color: rgba(17, 24, 39, .18) !important;
  background: rgba(17, 24, 39, .06) !important;
}

/* ŚREDNI (często #03a9f4) -> niebieski spokojny */
#tasks td a[id^="tableTaskPriority-"][style*="color:#03a9f4"],
#tasks td span.inline-block[style*="color:#03a9f4"] {
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, .25) !important;
  background: rgba(37, 99, 235, .06) !important;
}

/* WYSOKI (u Ciebie #ff6f00) -> pomarańcz */
#tasks td a[id^="tableTaskPriority-"][style*="color:#ff6f00"],
#tasks td span.inline-block[style*="color:#ff6f00"] {
  color: #c2410c !important;
  border-color: rgba(194, 65, 12, .28) !important;
  background: rgba(194, 65, 12, .06) !important;
}

/* PILNE (u Ciebie #fc2d42) -> czerwony */
#tasks td a[id^="tableTaskPriority-"][style*="color:#fc2d42"],
#tasks td span.inline-block[style*="color:#fc2d42"] {
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, .28) !important;
  background: rgba(220, 38, 38, .06) !important;
}

/* hover dla dropdown priorytetu */
#tasks td a[id^="tableTaskPriority-"]:hover {
  filter: brightness(.97);
}

#tasks td a[id^="tableTaskPriority-"]::before,
#tasks td span.inline-block[style*="color:"]::before {
  content: "●";
  font-size: 10px;
  line-height: 1;
  margin-right: 6px;
  opacity: .9;
}

/*kanban*/
/* Kontener kanbanu */
#kan-ban-tab {
  overflow: auto;
}

/* Układ kolumn (Perfex często trzyma to na floatach – prostujemy) */
#kan-ban {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* ODSTĘP między kolumnami (zmniejszony) */
  padding: 8px 10px 14px;
}

/* Kolumna */
#kan-ban>ul.kan-ban-col {
  float: none !important;
  margin: 0 !important;
  width: 320px;
  /* możesz zmienić (np. 300-360) */
}

/* Wrapper kolumny (usuń białe ramki i cienie) */
#kan-ban .kan-ban-col-wrapper>.border-right.panel_s {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  /* żeby nagłówek i tło były równe */
  background: transparent !important;
  /* kolor nadajemy per status niżej */
}

/* Nagłówek kolumny */
#kan-ban .panel-heading {
  border: 0 !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Licznik “x Zadania” w nagłówku */
#kan-ban .panel-heading .tw-text-sm {
  opacity: .95;
  font-weight: 700;
}

/* Content wrapper (bez białych ramek, tło ma być jak nagłówek -> tło jest na .panel_s) */
#kan-ban .kan-ban-content-wrapper {
  border: 0 !important;
  /*background: transparent !important;*/
  padding: 10px !important;
}

/* Lista zadań w kolumnie */
#kan-ban ul.status.tasks-status {
  margin: 0 !important;
  padding: 0 !important;
}

/* KARTA zadania (panel-body wewnątrz li.task) */
#kan-ban li.task .panel-body {
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin: 0 0 10px 0 !important;
  background: rgba(255, 255, 255, .92) !important;
  /* czytelne na mocnym tle */
  box-shadow: 0 10px 24px rgba(0, 0, 0, .1) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Hover karty */
#kan-ban li.task:hover .panel-body {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24) !important;
}

/* Tytuł zadania */
#kan-ban .task-name a.tw-font-medium,
#kan-ban .task-name a {
  color: #111 !important;
}

/* Podtytuł / powiązanie projektu */
#kan-ban .task-name a.task-table-related,
#kan-ban .task-name a.tw-text-neutral-600 {
  color: rgba(17, 17, 17, .72) !important;
}

/* Ikonki meta (komentarze/załączniki/checklista) */
#kan-ban .panel-body .tw-text-neutral-500,
#kan-ban .panel-body .tw-text-neutral-600 {
  color: rgba(17, 17, 17, .65) !important;
}

/* Avatar ring – delikatniej */
#kan-ban .panel-body img.tw-ring-white {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* “Wczytaj więcej” jako button na kolorowym tle */
#kan-ban .kanban-load-more>a.btn {
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* “Brak zadań” */
#kan-ban .kanban-empty h4 {
  color: rgba(255, 255, 255, .92) !important;
}

/* =========================================================
   KOLORY KOLUMN (zgodne z mapowaniem statusów) */

/* 1 — ZABLOKOWANE */
#kan-ban .tasks-kanban[data-col-status-id="1"] .border-right.panel_s {
  background: rgba(75, 75, 75, .16) !important;
}

#kan-ban .tasks-kanban[data-col-status-id="1"] .panel-heading {
  background: rgba(75, 75, 75, .16) !important;
  color: #000 !important;
}

/* 4 — DO ZROBIENIA (ciemne granatowo-fioletowe jak prosisz) */
#kan-ban .tasks-kanban[data-col-status-id="4"] .border-right.panel_s {
  background: rgba(106, 107, 255, .16) !important;
}

#kan-ban .tasks-kanban[data-col-status-id="4"] .panel-heading {
  background: rgba(106, 107, 255, .16) !important;
  color: rgba(106, 107, 255) !important;
}

/* 3 — UKOŃCZONE */
#kan-ban .tasks-kanban[data-col-status-id="3"] .border-right.panel_s {
  background: rgba(55, 195, 126, .16) !important;
}

#kan-ban .tasks-kanban[data-col-status-id="3"] .panel-heading {
  background: rgba(55, 195, 126, .16) !important;
  color: rgba(39, 182, 111) !important;
}

/* 2 — DO ROZLICZENIA (złoto) */
#kan-ban .tasks-kanban[data-col-status-id="2"] .border-right.panel_s {
  background: rgba(239, 178, 2, .12) !important;
}

#kan-ban .tasks-kanban[data-col-status-id="2"] .panel-heading {
  background: rgba(239, 178, 2, .12) !important;
  color: #efb202 !important;
}

/* Na złotym “Wczytaj więcej” lepiej w ciemnym */
#kan-ban .tasks-kanban[data-col-status-id="2"] .kanban-load-more>a.btn {
  color: #111 !important;
}

/* 5 — ROZLICZONE */
#kan-ban .tasks-kanban[data-col-status-id="5"] .border-right.panel_s {
  background: rgba(139, 94, 52, .12) !important;
}

#kan-ban .tasks-kanban[data-col-status-id="5"] .panel-heading {
  background: rgba(139, 94, 52, .12) !important;
  color: #8b5e34 !important;
}

#kan-ban .kan-ban-content-wrapper,
#kan-ban .kan-ban-content {
  /*background: transparent !important;*/
}

/* ================================
   KANBAN – Wczytaj więcej (FIX)
   zawsze czytelny + zawsze ten sam
================================ */

/* trafiamy dokładnie w ten przycisk DataTables/Kanban */
#kan-ban li.kanban-load-more>a.btn,
#kan-ban li.kanban-load-more>a.btn.btn-default,
#kan-ban li.kanban-load-more>a.btn.disabled,
#kan-ban li.kanban-load-more>a.btn[disabled] {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
  /* nadal nieklikalny */
  cursor: default !important;

  /* WYGLĄD – zawsze jasny, niezależnie od kolumny */
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .55) !important;

  border-radius: 16px !important;
  padding: 12px 14px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-align: center !important;

  /* KLUCZ: zawsze czytelny kolor tekstu */
  color: rgba(0, 0, 0, .78) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65) !important;
}

/* na wszelki wypadek – jeśli tekst jest wewnątrz span itp. */
#kan-ban li.kanban-load-more>a.btn *,
#kan-ban li.kanban-load-more>a.btn span {
  color: rgba(0, 0, 0, .78) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65) !important;
  opacity: 1 !important;
}

/* jeśli gdzieś masz globalnie .btn{ margin-top:-4px; } – tu to psuje “centrowanie” */
#kan-ban li.kanban-load-more>a.btn {
  margin-top: 0 !important;
}

/* ================================
   KANBAN – SEARCH (Szukaj) – HARD OVERRIDE
================================ */

/* trafiamy w dokładny wrapper z Twojego HTML */
.kan-ban-tab [app-field-wrapper="search"] input#search[type="search"].form-control,
#kan-ban-tab [app-field-wrapper="search"] input#search[type="search"].form-control,
#kan-ban-tab input#search[type="search"].form-control,
input#search[type="search"].form-control[data-name="search"] {
  height: 38px !important;
  line-height: 44px !important;
  border-radius: 999px !important;
  margin-top: -4px;
  border: 1px solid rgba(17, 24, 39, .22) !important;
  background: rgba(255, 255, 255, .95) !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #111827 !important;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important;
}

/* placeholder */
.kan-ban-tab [app-field-wrapper="search"] input#search[type="search"].form-control::placeholder,
#kan-ban-tab input#search[type="search"].form-control::placeholder {
  color: rgba(17, 24, 39, .45) !important;
  font-weight: 600 !important;
}

/* hover */
.kan-ban-tab [app-field-wrapper="search"] input#search[type="search"].form-control:hover,
#kan-ban-tab input#search[type="search"].form-control:hover {
  border-color: rgba(17, 24, 39, .30) !important;
}

/* focus – złoty ring */
.kan-ban-tab [app-field-wrapper="search"] input#search[type="search"].form-control:focus,
#kan-ban-tab input#search[type="search"].form-control:focus {
  outline: none !important;
  border-color: rgba(239, 178, 2, .75) !important;
  /* #efb202 */
  box-shadow: 0 0 0 4px rgba(239, 178, 2, .24), 0 10px 22px rgba(0, 0, 0, .08) !important;
  background: #fff !important;
}

/* ================================
   KANBAN – "Brak zadań" (empty state)
================================ */

/* wyłącz systemowe szare tło */
#kan-ban .kanban-empty {
  background: transparent !important;
  margin: 24px 0 !important;
  padding: 0 !important;
}

/* karta empty */
#kan-ban .kanban-empty h4 {
  background: rgba(255, 255, 255, .85) !important;
  border-radius: 18px !important;
  padding: 28px 20px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;

  font-weight: 600 !important;
  font-size: 16px !important;
  color: #111827 !important;
  text-align: center !important;
}

/* ikona */
#kan-ban .kanban-empty i {
  font-size: 26px !important;
  color: #efb202 !important;
  /* Twój brand */
  margin-bottom: 10px;
  display: inline-block;
}

/* żeby nie była półprzezroczysta przez sortable */
#kan-ban .kanban-empty,
#kan-ban .kanban-empty * {
  opacity: 1 !important;
  filter: none !important;
}

/* =========================
   KANBAN – TERMINY ZADAŃ
   czerwony = przeterminowane
   pomarańczowy = kończy się dziś
========================= */

/* PRZETERMINOWANE */
#kan-ban .tasks-status>li.task.overdue-task>.panel-body {
  border: 2px solid rgba(239, 68, 68, .9) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .35) !important;
}

/* KOŃCZY SIĘ DZIŚ */
#kan-ban .tasks-status>li.task.due-today-custom>.panel-body {
  border: 2px solid rgba(245, 158, 11, .95) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .35) !important;
}

/* -------------------- */
/* koniec zadania*/


/*poprawa przycisków*/
/* ===== TOOLBAR TABEL (ilość | export | szukaj) ===== */
#tasks_wrapper .dataTables_length select,
#tasks_wrapper .dt-buttons .btn,
#tasks_wrapper .dataTables_filter input,
#tasks_wrapper .dataTables_filter .input-group-addon {
  height: 38px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#tasks_wrapper .bootstrap-select .dropdown-toggle {
  height: 38px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#tasks_wrapper .dataTables_filter .form-control {
  height: 38px !important;
  line-height: 36px !important;
}

#tasks_wrapper .row>.col-md-7,
#tasks_wrapper .row>.col-md-5 {
  display: flex;
  align-items: center;
}

/* ===== Wypchnij SZUKAJ do prawej w toolbarze ===== */
#tasks_wrapper .row>.col-md-5 {
  margin-left: auto !important;
  justify-content: flex-end;
}

#tasks_wrapper .dataTables_filter {
  margin-left: auto;
}

/* DataTables: dropdown ilości rekordów (ten po lewej) — wyrównanie wysokości */
#tasks_wrapper #tasks_length select.form-control.input-sm,
#tasks_wrapper .dataTables_length select.form-control.input-sm {
  height: 37px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid #eaeff5;
  /* usuń bootstrapowe "sm" wrażenie */
  font-size: 14px !important;
}

/* Usuń dziwne marginesy/paddingi z labela wokół selecta (często psują baseline) */
#tasks_wrapper #tasks_length label,
#tasks_wrapper .dataTables_length label {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Upewnij się, że sam wrapper nie ma mniejszej wysokości */
#tasks_wrapper #tasks_length,
#tasks_wrapper .dataTables_length {
  display: flex !important;
  align-items: center !important;
}

/* ================================
   DataTables – dropdown "ilość" ma być takiej samej wysokości jak przyciski
   (globalnie, dla wszystkich tabel)
================================ */

/* 1) SELECT (ilość rekordów) – wymuszenie wysokości mimo input-sm */
.dataTables_wrapper .dataTables_length select.form-control.input-sm {
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  margin-bottom: -10px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  -webkit-appearance: menulist !important;
  /* żeby przeglądarka nie robiła swoich cudów */
}

/* 2) Label i wrapper – żeby select nie "siadał" baseline’em */
.dataTables_wrapper .dataTables_length label {
  margin-top: -2px !important;
  display: flex !important;
  align-items: center !important;
}

/* 3) Wyrównanie elementów w wierszu toolbara (lewa/prawa kolumna) */
.dataTables_wrapper>.row>[class*="col-"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 4) (opcjonalnie) spójna wysokość przycisku eksportu w DataTables */
.dataTables_wrapper .dt-buttons .btn.btn-sm {
  height: 38px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* DataTables – SZUKAJ zawsze po prawej stronie */
.dataTables_wrapper>.row>.col-md-6:last-child,
.dataTables_wrapper>.row>.col-md-5,
.dataTables_wrapper>.row>.col-md-4 {
  margin-left: auto !important;
  justify-content: flex-start !important;
}

/* a sam search bez dziwnych marginesów */
.dataTables_wrapper .dataTables_filter {
  margin-left: auto !important;
}

/* DataTables – SEARCH: naprawa "rozjechania" input-group */
.dataTables_wrapper .dataTables_filter .input-group {
  height: 38px !important;
}

.dataTables_wrapper .dataTables_filter .input-group-addon,
.dataTables_wrapper .dataTables_filter .input-group input.form-control {
  height: 38px !important;
  line-height: 36px !important;
  vertical-align: middle !important;
}

/* Addon (lupa) – NIE flex, bo psuje table-cell w bootstrapie */
.dataTables_wrapper .dataTables_filter .input-group-addon {
  padding: 0 12px !important;
  border-radius: 999px 0 0 999px !important;
  width: 48px;
  /* stabilna szerokość lupy */
  text-align: center !important;
}

/* Input */
.dataTables_wrapper .dataTables_filter .input-group input.form-control {
  padding: 0 14px !important;
  border-radius: 0 999px 999px 0 !important;
  box-sizing: border-box !important;
}

/* Ikona w addon – wycentruj w pionie bez flex */
.dataTables_wrapper .dataTables_filter .input-group-addon .fa,
.dataTables_wrapper .dataTables_filter .input-group-addon span.fa {
  line-height: 36px !important;
  display: inline-block !important;
}

.sm\:tw-w-\[350px\] {
  width: 900px !important;
}

.screen-options-btn {
  background: var(--brand) !important;
  color: #fff !important;
  /* Ensure no border interferes */
  border-radius: 0px 0px 15px 15px;
  /* Consistency with other buttons */
}

/* ========================================= */
/* DASHBOARD REDESIGN: THE ARCHITECT'S COMMAND */
/* ========================================= */

/* 1. The "Pulse" Top Stats - Redesigned to match "Kafelki" / Tiles */
.top_stats_wrapper {
  position: relative;
  overflow: auto;
  border-radius: 12px !important;
  border: 1px solid rgba(209, 213, 219, 0.9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  background: #fff;
  padding: 24px !important;
  margin-bottom: 24px;
}

.top_stats_wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10) !important;
}

/* Left Bar for all stats */
.top_stats_wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: transparent;
  display: block !important;
}

/* --- Specific Status Themes --- */

/* 1. Invoices / Danger -> Use Red Theme (Matches "Overdue" / Danger) */
.top_stats_wrapper.stats-danger {
  background: #fef2f2 !important;
  /* Red-50 */
  border-color: #fee2e2 !important;
  /* Red-200 */
}

.top_stats_wrapper.stats-danger::before {
  background: #ef4444 !important;
  /* Red-500 */
}

/* Recolor icon and label */
.top_stats_wrapper.stats-danger .text-neutral-600,
.top_stats_wrapper.stats-danger svg {
  color: #991b1b !important;
  /* Red-800 */
}

.top_stats_wrapper.stats-danger .tw-font-semibold {
  color: #7f1d1d !important;
  /* Red-900 */
}

/* 2. Leads / Success -> Use Green Theme (Matches "Completed") */
.top_stats_wrapper.stats-success {
  background: #f0fdf4 !important;
  /* Green-50 */
  border-color: #dcfce7 !important;
  /* Green-200 */
}

.top_stats_wrapper.stats-success::before {
  background: #22c55e !important;
  /* Green-500 */
}

.top_stats_wrapper.stats-success .text-neutral-600,
.top_stats_wrapper.stats-success svg {
  color: #166534 !important;
  /* Green-800 */
}

.top_stats_wrapper.stats-success .tw-font-semibold {
  color: #14532d !important;
  /* Green-900 */
}

/* 3. Tasks / Default -> Use Gray Theme (Matches "Blocked" or "Tasks") */
.top_stats_wrapper.stats-default {
  background: #f3f4f6 !important;
  /* Gray-100 */
  border-color: #e5e7eb !important;
  /* Gray-200 */
}

.top_stats_wrapper.stats-default::before {
  background: #4b5563 !important;
  /* Gray-600 */
}

.top_stats_wrapper.stats-default .text-neutral-600,
.top_stats_wrapper.stats-default svg {
  color: #1f2937 !important;
  /* Gray-800 */
}

.top_stats_wrapper.stats-default .tw-font-semibold {
  color: #111827 !important;
  /* Gray-900 */
}

/* 4. Warning / Yellow */
.top_stats_wrapper.stats-warning {
  background: #fffbeb !important;
  /* Yellow-50 */
  border-color: #fde68a !important;
  /* Yellow-200 */
}

.top_stats_wrapper.stats-warning::before {
  background: #f59e0b !important;
  /* Yellow-500 */
}

.top_stats_wrapper.stats-warning .text-neutral-600,
.top_stats_wrapper.stats-warning svg {
  color: #b45309 !important;
  /* Yellow-800 */
}

.top_stats_wrapper.stats-warning .tw-font-semibold {
  color: #78350f !important;
  /* Yellow-900 */
}

.top_stats_wrapper.stats-warning .progress-bar {
  background-color: #f59e0b !important;
}

/* 5. Info / Blue */
.top_stats_wrapper.stats-info {
  background: #eff6ff !important;
  /* Blue-50 */
  border-color: #bfdbfe !important;
  /* Blue-200 */
}

.top_stats_wrapper.stats-info::before {
  background: #3b82f6 !important;
  /* Blue-500 */
}

.top_stats_wrapper.stats-info .text-neutral-600,
.top_stats_wrapper.stats-info svg {
  color: #1e40af !important;
  /* Blue-800 */
}

.top_stats_wrapper.stats-info .tw-font-semibold {
  color: #1e3a8a !important;
  /* Blue-900 */
}

.top_stats_wrapper.stats-info .progress-bar {
  background-color: #3b82f6 !important;
}

/* 4. Projects / Dynamic - Pastel Look */
.top_stats_wrapper.stats-projects {
  background-color: var(--dynamic-color, #3b82f6) !important;
  z-index: 0;
}

/* White overlay to create pastel tint */
.top_stats_wrapper.stats-projects::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.92;
  z-index: -1;
}

.top_stats_wrapper.stats-projects::before {
  background-color: var(--dynamic-color) !important;
  background: var(--dynamic-color) !important;
  z-index: 2;
}

/* Dynamic Colors for Text & Icons */
.top_stats_wrapper.stats-projects .text-neutral-500,
.top_stats_wrapper.stats-projects .text-neutral-600,
.top_stats_wrapper.stats-projects svg {
  color: var(--dynamic-color, #3b82f6) !important;
  filter: brightness(0.7);
}

.top_stats_wrapper.stats-projects .tw-font-semibold {
  color: var(--dynamic-color, #3b82f6) !important;
  filter: brightness(0.6);
}

/* Progress Bar */
.top_stats_wrapper.stats-projects .progress-bar {
  background-color: var(--dynamic-color) !important;
}

/* Typography adjustments inside stats */
.top_stats_wrapper .text-muted {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem !important;
  font-weight: 600;
  color: #6B7280 !important;
}

.top_stats_wrapper .tw-font-semibold {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* Progress Bars Theme Matching */
.top_stats_wrapper.stats-danger .progress-bar {
  background-color: #ef4444 !important;
}

.top_stats_wrapper.stats-success .progress-bar {
  background-color: #22c55e !important;
}

.top_stats_wrapper.stats-default .progress-bar {
  background-color: #4b5563 !important;
}

.top_stats_wrapper.stats-projects .progress-bar {
  background-color: var(--dynamic-color) !important;
}

.top_stats_wrapper .progress {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Fix: Remove white background for Top Stats Widget */
.widget.top-stats-widget {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Fix: Balance Padding Top/Bottom for Content */
#wrapper .content {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* 2. The "Canvas" Widget Containers */
.widget,
.panel_s {
  background: #ffffff !important;
  border: 1px !important;
  border-radius: 15px !important;
  box-shadow: 0 0px 0px #fff !important;
  margin-bottom: 30px !important;
}

.panel_s1 {
  border: 1px !important;
  border-radius: 15px !important;
  box-shadow: 0 0px 10px #e3e3e2e3 !important;
  margin-bottom: 30px !important;
}

.panel_s .panel-heading {
  /*background: transparent !important;*/
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  /*padding: 24px 30px !important;*/
  border-radius:15px 15px 0px 0px;
}

.panel_s .panel-heading .panel-title,
.panel_s .panel-heading h4 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #9CA3AF !important;
  /* Muted Header */
}

.panel_s .panel-body {
  /*padding: 30px !important;*/
}


.tw-font-semibold,
.bold {
  font-weight: 600 !important;
}

.tw-font-medium {
  font-weight: 500 !important;
}

/* 4. Canvas Elements (Lists & Tables) */
/* Todo List Items */
.todo-item {
  padding: 12px 0;
  border-bottom: 1px dashed #E5E7EB;
}

.todo-item .checkbox label {
  font-weight: 500;
  color: #374151;
}

/* 5. Custom Legend Pills */
.chart-legend li {
  display: inline-block;
  padding: 4px 12px;
  background: #F3F4F6;
  border-radius: 20px;
  margin-right: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4B5563;
}

/* User Data Panel Specifics */
.panel_s.user-data .nav-tabs {
  border-bottom: 2px solid #F3F4F6;
}

.panel_s.user-data .nav-tabs>li>a {
  border: none !important;
  background: transparent !important;
  color: #9CA3AF !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 15px 20px !important;
}

.panel_s.user-data .nav-tabs>li.active>a {
  color: #111827 !important;
  border-bottom: 2px solid #FEC200 !important;
  /* Yellow Active Line */
}

/* Revert User Data Panel text override if present */
.panel_s.user-data .panel-heading,
.panel_s.user-data table {
  color: inherit !important;
}

/* Remove Background overrides from tables */
.table>tbody>tr:hover {
  background-color: #FAFAFA !important;
  /* Clean hover */
  transform: scale(1);
  /* disable scale on tables to avoid blur */
}



/* On-Off Switch Styling */
.onoffswitch-label {
  border: 2px solid var(--brand) !important;
}

.onoffswitch-switch {
  background: #fff !important;
  /* Handle remains white */
  border: 2px solid var(--brand) !important;
}

.onoffswitch-checkbox:checked+.onoffswitch-label {
  background-color: var(--brand) !important;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  border-color: #fff !important;
  /* When checked, handle border matches checked bg or just white? 
       Usually the switch inside becomes white and the background fills with brand color. 
    */
}

/* Radio Buttons */
.radio-primary input[type="radio"]:checked+label::before,
.radio-primary input[type="radio"]:checked+label::after,
.radio-inline input[type="radio"]:checked+label::before,
.radio-inline input[type="radio"]:checked+label::after,
.radio input[type="radio"]:checked+label::before,
.radio input[type="radio"]:checked+label::after {
  border-color: var(--brand) !important;
}

.radio-primary input[type="radio"]:checked+label::after,
.radio-inline input[type="radio"]:checked+label::after,
.radio input[type="radio"]:checked+label::after {
  background-color: var(--brand) !important;
  /* Yellow dot */
}

/* Ensure focus rings match */
.radio-primary input[type="radio"]:focus+label::before,
.radio-inline input[type="radio"]:focus+label::before,
.radio input[type="radio"]:focus+label::before {
  border-color: var(--brand) !important;
}

#pusherChat .chat-footer {
  background-color: var(--brand) !important;
}

/* Generic Input Radio Styling */
input[type="radio"] {
  accent-color: var(--brand) !important;
}

input[type="radio"]:checked {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  /* For browsers where accent-color isn't enough or custom styled */
}



.tw-font-medium {
  color: rgb(0, 0, 0);
}

/* Customer Top Stats (Clients List) */
.customer-top-stats>div {
  background: #ffd600 !important;
  /* Brand Yellow */
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
  color: #451a03 !important;
  /* Dark Text */
}

/* Override utility text colors inside customer stats for contrast */
.customer-top-stats>div span[class*="text-"] {
  color: #451a03 !important;
}

/* ========================================= */
/* LOGIN PAGE SPLIT REDESIGN via Modern UI */
/* ========================================= */

body.login_admin,
body.customers {
  background: #fff !important;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
}

.login-split-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  font-family: 'Inter', sans-serif;
}

/* --- Left Side (Branding) --- */
.login-left {
  width: 50%;
  /* Gradient Yellow/Gold */
  background: linear-gradient(135deg, #FEC200 0%, #e5ac00 100%);
  color: #111827;
  /* Dark Gray Text for contrast on Yellow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 4rem;
  overflow: hidden;
}

/* Decorative Circles */
.login-left::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60vw;
  height: 60vw;
  background: rgba(255, 255, 255, 0.15);
  /* Subtle white overlay */
  border-radius: 50%;
  z-index: 1;
}

.login-left::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -20%;
  width: 50vw;
  height: 50vw;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: 1;
}

.login-left-content {
  z-index: 2;
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.login-logo img {
  max-width: 180px;
  margin: 0 auto 2rem;
  /* Remove invert filter so logo stays natural (assuming dark logo) or force dark if needed */
  filter: none;
}

.login-welcome-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.1;
  color: #000 !important;
  /* Black text */
}

.login-welcome-text {
  font-size: 1.2rem;
  opacity: 0.8;
  margin-bottom: 3rem;
  line-height: 1.6;
  color: #111827;
  /* Dark text */
}

/* --- Right Side (Form) --- */
.login-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  background: #fff;
  position: relative;
}

.login-right-content {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-header {
  margin-bottom: 3rem;
}

.login-title {
  font-size: 2.5rem;
  color: #111827 !important;
  /* Dark text */
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  color: #9ca3af;
  font-size: 0.95rem;
}

/* Inputs */
.login-split-layout .form-group {
  margin-bottom: 1.5rem;
}

.login-split-layout .modern-input {
  background-color: rgba(254, 194, 0, 0.08) !important;
  /* Pale Yellow */
  border: 1px solid transparent !important;
  border-radius: 50px !important;
  padding: 24px 28px !important;
  height: auto !important;
  font-size: 1rem;
  color: #111827 !important;
  box-shadow: none !important;
}

.login-split-layout .modern-input::placeholder {
  color: #b45309;
  /* Darker Gold/Brown */
  opacity: 0.6;
}

.login-split-layout .modern-input:focus {
  background-color: #fff !important;
  border-color: #FEC200 !important;
  /* Brand Yellow */
  box-shadow: 0 0 0 4px rgba(254, 194, 0, 0.2) !important;
}

/* Optimized View All Button in User Data Widget */
.panel_s.user-data .tab-pane>a.full-width {
  padding: 8px 15px !important;
  font-size: 0.9rem !important;
  margin-bottom: 12px !important;
  border-radius: 8px !important;
  text-align: center;
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-weight: 500 !important;
}

.panel_s.user-data .tab-pane>a.full-width:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Links */
.forgot-password-link {
  font-size: 0.85rem;
  color: #6b7280 !important;
  font-weight: 500;
}

.forgot-password-link:hover {
  color: #e5ac00 !important;
  /* Darker Yellow */
  text-decoration: underline;
}

/* Submit Button */
.login-split-layout .modern-login-btn {
  background: #FEC200 !important;
  /* Brand Yellow */
  color: #000 !important;
  border: none !important;
  border-radius: 50px !important;
  width: auto;
  min-width: 180px;
  margin: 1.5rem auto 0;
  padding: 14px 40px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  box-shadow: 0 10px 20px -5px rgba(254, 194, 0, 0.4) !important;
}

.login-split-layout .modern-login-btn:hover {
  background: #e5ac00 !important;
  /* Darker Yellow */
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -5px rgba(254, 194, 0, 0.5) !important;
}

/* Clean up core styles */
.login-split-layout .company-logo {
  display: none;
  /* Hide default logo div if it appears */
}

/* Responsive */
@media (max-width: 991px) {
  .login-split-layout {
    flex-direction: column;
  }

  .login-left {
    width: 100%;
    padding: 3rem 1.5rem;
    min-height: 350px;
    order: -1;
  }

  .login-welcome-title {
    font-size: 2.5rem;
  }

  .login-right {
    width: 100%;
    padding: 3rem 1.5rem;
    order: 1;
    /* Form after branding */
  }
}

.tw-text-xl {
  font-size: 1.25rem !important;
  line-height: 2.75rem !important;
}


.project-status-2 {
  color: rgb(37, 99, 235)!important;
  border: 1px solid rgb(37, 99, 235)!important;
  background-color: rgba(37,99,235,.08) !important;
}

.user_sound_icon {
  color: #db9107;
}

/*kalendarz*/

.fc-toolbar-chunk {
  gap: 10px;
  padding-right: 0px!important;
}

.fc-toolbar-chunk {
  border-radius: 15px;
}

.ai-msg.assistant .avatar {
  background: black;
}



/* Forced Zebra Striping - Darker Shade for alternate rows */
.table>tbody>tr:nth-of-type(odd) {
  background-color: #cecece23 !important;
}

.table>tbody>tr:nth-of-type(even) {
  background-color: #ffffff !important;
  /* White */
}

.table>tbody>tr:hover {
  background-color: #f3f4f6 !important;
  /* Gray-100 on hover */
}

.input-group {
  --tw-shadow: 0 0px 0px 0 rgba(0, 0, 0, .05);
}

.bootstrap-select .dropdown-toggle .filter-option {
  /*height: 105%;*/
  top: 1px;
  position: relative;
}

/* Align FullCalendar Toolbar */
.fc-header-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 15px;
  align-items: center !important;
}

.fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: 150px;
  padding-right: 49px;
}

.fc-toolbar-title {
  font-size: 1.5em !important;
  margin: 0 !important;
  white-space: nowrap;
}

.tw-truncate {
  overflow: hidden;
  /* white-space: nowrap; */
}

.qa-btn {
  margin: 2px;
  line-height: .5rem;
  border-radius: 8px;
  transition: all 0.2s;
}

/* ===== KAFELKI STATUSÓW ZADAŃ - SPÓJNA KOLORYSTYKA ===== */

/* Bazowy styl kafelków */
.tw-grid > button[type="button"] {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  border: 1px solid rgba(209,213,219,.9) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  padding: 12px 16px !important;
}

.tw-grid > button[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}

/* Lewy pasek kolorowy */
.tw-grid > button[type="button"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: transparent;
  border-radius: 12px 0 0 12px;
}

/* ===== 1) ZABLOKOWANE - czarne/grafitowe ===== */
.tw-grid > button:has(span[style*="color: rgb(100, 116, 139)"]) {
  background: rgba(75,75,75,.08) !important;
  border-color: rgba(75,75,75,.25) !important;
}
.tw-grid > button:has(span[style*="color: rgb(100, 116, 139)"])::before {
  background: #000 !important;
}
.tw-grid > button:has(span[style*="color: rgb(100, 116, 139)"]) span[style*="color"] {
  color: #000 !important;
}
.tw-grid > button:has(span[style*="color: rgb(100, 116, 139)"]) .tw-font-semibold {
  color: #000 !important;
}

/* ===== 2) DO ZROBIENIA - fioletowo-niebieski ===== */
.tw-grid > button:has(span[style*="color: rgb(59, 130, 246)"]) {
  background: rgba(106,107,255,.1) !important;
  border-color: rgba(106,107,255,.3) !important;
}
.tw-grid > button:has(span[style*="color: rgb(59, 130, 246)"])::before {
  background: rgba(106,107,255) !important;
}
.tw-grid > button:has(span[style*="color: rgb(59, 130, 246)"]) span[style*="color"] {
  color: rgba(106,107,255) !important;
}
.tw-grid > button:has(span[style*="color: rgb(59, 130, 246)"]) .tw-font-semibold {
  color: rgba(106,107,255) !important;
}

/* ===== 3) UKOŃCZONE - zielony ===== */
.tw-grid > button:has(span[style*="color: rgb(2, 132, 199)"]) {
  background: rgba(55,195,126,.1) !important;
  border-color: rgba(55,195,126,.3) !important;
}
.tw-grid > button:has(span[style*="color: rgb(2, 132, 199)"])::before {
  background: rgba(39,182,111) !important;
}
.tw-grid > button:has(span[style*="color: rgb(2, 132, 199)"]) span[style*="color"] {
  color: rgba(39,182,111) !important;
}
.tw-grid > button:has(span[style*="color: rgb(2, 132, 199)"]) .tw-font-semibold {
  color: rgba(39,182,111) !important;
}

/* ===== 4) DO ROZLICZENIA - złoty (brand) ===== */
.tw-grid > button:has(span[style*="color: rgb(132, 204, 22)"]) {
  background: rgba(239,178,2,.1) !important;
  border-color: rgba(239,178,2,.35) !important;
}
.tw-grid > button:has(span[style*="color: rgb(132, 204, 22)"])::before {
  background: #efb202 !important;
}
.tw-grid > button:has(span[style*="color: rgb(132, 204, 22)"]) span[style*="color"] {
  color: #efb202 !important;
}
.tw-grid > button:has(span[style*="color: rgb(132, 204, 22)"]) .tw-font-semibold {
  color: #efb202 !important;
}

/* ===== 5) ROZLICZONE - brązowy (money bronze) ===== */
.tw-grid > button:has(span[style*="color: rgb(34, 197, 94)"]) {
  background: rgba(139,94,52,.08) !important;
  border-color: rgba(139,94,52,.25) !important;
}
.tw-grid > button:has(span[style*="color: rgb(34, 197, 94)"])::before {
  background: #8b5e34 !important;
}
.tw-grid > button:has(span[style*="color: rgb(34, 197, 94)"]) span[style*="color"] {
  color: #8b5e34 !important;
}
.tw-grid > button:has(span[style*="color: rgb(34, 197, 94)"]) .tw-font-semibold {
  color: #8b5e34 !important;
}

/* ===== DROPDOWN STATUSÓW W TABELI (te pill-badge przy zadaniach) ===== */

/* Jeśli masz też dropdowny statusów które wymagają tej samej kolorystyki */
a[task-status-table] {
  border-radius: 45px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .15s ease !important;
}

/* Kropka przed tekstem 
a[task-status-table]::before {
  content: "●";
  font-size: 8px;
  opacity: 0.85;
}*/

/* ===== FILTRY STATUSÓW PROJEKTÓW - KAFELKI ===== */

/* Bazowy styl filtrów */
._filters a[href="#"],
._filters a.tw-bg-transparent {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  transition: all .15s ease !important;
  border: 1px solid rgba(209,213,219,.9) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

._filters a[href="#"]:hover,
._filters a.tw-bg-transparent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

/* Lewy pasek kolorowy */
._filters a[href="#"]::before,
._filters a.tw-bg-transparent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 12px 0 0 12px;
}

/* ===== 1) NIEROZPOCZĘTY - grafitowy/czarny ===== */
._filters a:has(.project-status-\#475569),
._filters a:has(span[style*="color: rgb(71, 85, 105)"]) {
  background: rgba(75,75,75,.08) !important;
  border-color: rgba(75,75,75,.2) !important;
}
._filters a:has(.project-status-\#475569)::before,
._filters a:has(span[style*="color: rgb(71, 85, 105)"])::before {
  background: #000 !important;
}
._filters a:has(.project-status-\#475569) span[style*="color"],
._filters a:has(span[style*="color: rgb(71, 85, 105)"]) span[style*="color"] {
  color: #000 !important;
}
._filters a:has(.project-status-\#475569) .tw-font-semibold,
._filters a:has(span[style*="color: rgb(71, 85, 105)"]) .tw-font-semibold {
  color: #000 !important;
}

/* ===== 2) W TRAKCIE - niebieski (brand) ===== */
._filters a:has(.project-status-\#2563eb),
._filters a:has(span[style*="color: rgb(37, 99, 235)"]) {
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.25) !important;
}
._filters a:has(.project-status-\#2563eb)::before,
._filters a:has(span[style*="color: rgb(37, 99, 235)"])::before {
  background: #2563eb !important;
}
._filters a:has(.project-status-\#2563eb) span[style*="color"],
._filters a:has(span[style*="color: rgb(37, 99, 235)"]) span[style*="color"] {
  color: #2563eb !important;
}
._filters a:has(.project-status-\#2563eb) .tw-font-semibold,
._filters a:has(span[style*="color: rgb(37, 99, 235)"]) .tw-font-semibold {
  color: #2563eb !important;
}

/* ===== 3) WSTRZYMANY - pomarańczowy ===== */
._filters a:has(.project-status-\#f97316),
._filters a:has(span[style*="color: rgb(249, 115, 22)"]) {
  background: rgba(249,115,22,.08) !important;
  border-color: rgba(249,115,22,.25) !important;
}
._filters a:has(.project-status-\#f97316)::before,
._filters a:has(span[style*="color: rgb(249, 115, 22)"])::before {
  background: #f97316 !important;
}
._filters a:has(.project-status-\#f97316) span[style*="color"],
._filters a:has(span[style*="color: rgb(249, 115, 22)"]) span[style*="color"] {
  color: #f97316 !important;
}
._filters a:has(.project-status-\#f97316) .tw-font-semibold,
._filters a:has(span[style*="color: rgb(249, 115, 22)"]) .tw-font-semibold {
  color: #f97316 !important;
}

/* ===== 4) ANULOWANY - szary ===== */
._filters a:has(.project-status-\#94a3b8),
._filters a:has(span[style*="color: rgb(148, 163, 184)"]) {
  background: rgba(148,163,184,.1) !important;
  border-color: rgba(148,163,184,.3) !important;
}
._filters a:has(.project-status-\#94a3b8)::before,
._filters a:has(span[style*="color: rgb(148, 163, 184)"])::before {
  background: #64748b !important;
}
._filters a:has(.project-status-\#94a3b8) span[style*="color"],
._filters a:has(span[style*="color: rgb(148, 163, 184)"]) span[style*="color"] {
  color: #64748b !important;
}
._filters a:has(.project-status-\#94a3b8) .tw-font-semibold,
._filters a:has(span[style*="color: rgb(148, 163, 184)"]) .tw-font-semibold {
  color: #64748b !important;
}

/* ===== 5) ZAKOŃCZONY - zielony ===== */
._filters a:has(.project-status-\#16a34a),
._filters a:has(span[style*="color: rgb(22, 163, 74)"]) {
  background: rgba(55,195,126,.1) !important;
  border-color: rgba(55,195,126,.3) !important;
}
._filters a:has(.project-status-\#16a34a)::before,
._filters a:has(span[style*="color: rgb(22, 163, 74)"])::before {
  background: rgba(39,182,111) !important;
}
._filters a:has(.project-status-\#16a34a) span[style*="color"],
._filters a:has(span[style*="color: rgb(22, 163, 74)"]) span[style*="color"] {
  color: rgba(39,182,111) !important;
}
._filters a:has(.project-status-\#16a34a) .tw-font-semibold,
._filters a:has(span[style*="color: rgb(22, 163, 74)"]) .tw-font-semibold {
  color: rgba(39,182,111) !important;
}


/* ===== KAFELKI KLIENTÓW ===== */

/* Bazowy styl kafelków klientów */
.tw-grid > div.tw-border-neutral-300\/80 {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  transition: all .15s ease !important;
  border: 1px solid rgba(209,213,219,.9) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

.tw-grid > div.tw-border-neutral-300\/80:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

/* Lewy pasek kolorowy */
.tw-grid > div.tw-border-neutral-300\/80::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 12px 0 0 12px;
  background: #d1d5db;
}

/* ===== 1) WSZYSTKICH KLIENTÓW - grafitowy ===== */
.tw-grid > div:has(.text-dark) {
  background: rgba(75,75,75,.04) !important;
  border-color: rgba(75,75,75,.15) !important;
}
.tw-grid > div:has(.text-dark)::before {
  background: #4b4b4b !important;
}
.tw-grid > div:has(.text-dark) .tw-font-semibold {
  color: #1a1a1a !important;
}
.tw-grid > div:has(.text-dark) .text-dark {
  color: #1a1a1a !important;
  font-weight: 500 !important;
}

/* ===== 2) AKTYWNI KLIENCI - zielony ===== */
.tw-grid > div:has(.text-success:not(.text-danger)) {
  background: rgba(55,195,126,.06) !important;
  border-color: rgba(55,195,126,.25) !important;
}
.tw-grid > div:has(.text-success:not(.text-danger))::before {
  background: rgba(39,182,111) !important;
}
.tw-grid > div:has(.text-success) .tw-font-semibold {
  color: rgba(39,182,111) !important;
}
.tw-grid > div:has(.text-success) .text-success {
  color: rgba(39,182,111) !important;
  font-weight: 500 !important;
}

/* ===== 3) NIEAKTYWNI KLIENCI - czerwony ===== */
.tw-grid > div:has(.text-danger) {
  background: rgba(239,68,68,.05) !important;
  border-color: rgba(239,68,68,.2) !important;
}
.tw-grid > div:has(.text-danger)::before {
  background: #ef4444 !important;
}
.tw-grid > div:has(.text-danger) .tw-font-semibold {
  color: #ef4444 !important;
}
.tw-grid > div:has(.text-danger) .text-danger {
  color: #ef4444 !important;
  font-weight: 500 !important;
}

/* ===== 4) AKTYWNE KONTAKTY - niebieski/info ===== */
.tw-grid > div:has(.text-info) {
  background: rgba(37,99,235,.05) !important;
  border-color: rgba(37,99,235,.2) !important;
}
.tw-grid > div:has(.text-info)::before {
  background: #2563eb !important;
}
.tw-grid > div:has(.text-info) .tw-font-semibold {
  color: #2563eb !important;
}
.tw-grid > div:has(.text-info) .text-info {
  color: #2563eb !important;
  font-weight: 500 !important;
}

/* ===== 5) KLIENCI ZALOGOWANI DZIŚ - złoty (brand) ===== */
.tw-grid > div:has(.text-muted[data-toggle="tooltip"]) {
  background: rgba(239,178,2,.06) !important;
  border-color: rgba(239,178,2,.25) !important;
}
.tw-grid > div:has(.text-muted[data-toggle="tooltip"])::before {
  background: #efb202 !important;
}
.tw-grid > div:has(.text-muted[data-toggle="tooltip"]) .tw-font-semibold {
  color: #efb202 !important;
}
.tw-grid > div:has(.text-muted[data-toggle="tooltip"]) .text-muted {
  color: #b8860b !important;
  font-weight: 500 !important;
}

/* ===== DODATKOWE - ikony w kafelkach (opcjonalne) ===== */
.tw-grid > div.tw-border-neutral-300\/80 .tw-font-semibold {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ===== AGGRESSIVE FIX - USUNIĘCIE BIAŁEGO TŁA POD QUICK STATS ===== */

/* Wyłącz wszystkie ::before i ::after w widget-top_stats */
#widget-top_stats *::before,
#widget-top_stats *::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background: transparent !important;
}

/* Przywróć tylko te ::before które są potrzebne (np. w progress barach) */
#widget-top_stats .progress-bar::before,
#widget-top_stats .progress-bar::after {
  display: block !important;
}

/* Upewnij się że wrapper nie ma dziwnego tła */
#widget-top_stats,
#widget-top_stats .widget-dragger,
#widget-top_stats > .row,
#widget-top_stats .row > div,
#widget-top_stats [class*="col-"] {
  background: transparent !important;
}

/* Sam kafelek */
#widget-top_stats .top_stats_wrapper {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

/* ===== RÓWNA WYSOKOŚĆ KAFELKÓW QUICK STATS ===== */

/* Kontener - flex z wyrównaniem stretch */
#widget-top_stats > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Kolumny - też flex żeby rozciągnąć dzieci */
#widget-top_stats [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}

/* Sam kafelek - flex-grow żeby wypełnić całą wysokość */
#widget-top_stats .top_stats_wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 100px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

/* Progress bar zawsze na dole */
#widget-top_stats .progress.progress-bar-mini {
  margin-top: auto !important;
}

#kan-ban .popover, .milestone-column .popover {
      width: 340px;
    top: 55px !important;
    left: 0px !important;
    max-width: 320px;
    text-align: center;
}

/*pozyskania*/
/* ===== POZYSKANIA (LEADS) - KAFELKI STATUSÓW - STYL SPÓJNY Z KLIENTAMI ===== */

/* Bazowy styl kafelków */
.tw-grid button[type="button"]:has(span[style*="color:"]) {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: all .15s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  /*background: #fff !important;*/
  border: 1px solid rgba(209,213,219,.9) !important;
}

.tw-grid button[type="button"]:has(span[style*="color:"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

/* Resetuj box-shadow trick - używamy tylko border-left */
.tw-grid button[type="button"]:has(span[style*="color:"]) {
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

/* Badge "Utracone szanse" */
.tw-grid .label-danger,
span.label.label-danger[data-toggle="tooltip"] {
  border-radius: 45px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: rgba(239,68,68,.08) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239,68,68,.25) !important;
}

/* ===== POZYSKANIA - KANBAN ===== */

/* Kontener kanban */
#kan-ban {
  display: flex !important;
  gap: 16px !important;
  padding: 16px !important;
}

/* Kolumna kanban */
#kan-ban > ul.kan-ban-col {
  min-width: 320px !important;
  max-width: 360px !important;
}

/* Wrapper kolumny */
#kan-ban .kan-ban-col-wrapper > .border-right.panel_s {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}

/* Nagłówek kolumny */
#kan-ban .panel-heading[style*="background"] {
  border-radius: 16px 16px 0 0 !important;
  padding: 14px 16px !important;
  border: none !important;
  font-weight: 600 !important;
  color: #fff !important;
}

#kan-ban .panel-heading .heading {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #fff !important;
}

#kan-ban .panel-heading small {
  opacity: 0.9 !important;
  color: #fff !important;
}

#kan-ban .panel-heading i {
  color: #fff !important;
}

#kan-ban .panel-heading a {
  color: #fff !important;
}

/* Content wrapper - tło bazowane na kolorze nagłówka */
#kan-ban .kan-ban-content-wrapper {
  padding: 12px !important;
}

#kan-ban .kan-ban-content {
  background: transparent !important;
}

/* ===== KARTY LEADÓW W KANBANIE ===== */

#kan-ban li.lead-kan-ban .panel-body.lead-body {
  border-radius: 14px !important;
  margin: 0 0 12px 0 !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  transition: all .15s ease !important;
}

#kan-ban li.lead-kan-ban:hover .panel-body.lead-body {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  border-color: rgba(239,178,2,.4) !important;
}

/* Nazwa leada */
#kan-ban .lead-name a.tw-font-medium {
  font-weight: 600 !important;
  color: #111827 !important;
  font-size: 14px !important;
}

#kan-ban .lead-name a.tw-font-medium:hover {
  color: #efb202 !important;
}

/* Avatar */
#kan-ban .lead-name .staff-profile-image-xs {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.1) !important;
}

/* Informacje o leadzie */
#kan-ban .lead-body p.tw-text-sm {
  color: #6B7280 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}

#kan-ban .lead-body .text-dark {
  color: #374151 !important;
}

#kan-ban .lead-body .bold {
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Ikony (notatki, załączniki) */
#kan-ban .lead-body .text-muted i {
  color: #9CA3AF !important;
}

/* Przycisk expand */
#kan-ban .kan-ban-expand-top {
  color: #9CA3AF !important;
  transition: color .15s ease !important;
}

#kan-ban .kan-ban-expand-top:hover {
  color: #efb202 !important;
}

/* Rozwinięte szczegóły */
#kan-ban [id^="kan-ban-expand-"] {
  background: #f9fafb !important;
  border-radius: 10px !important;
  margin-top: 12px !important;
  padding: 12px !important;
}

#kan-ban .lead-field-heading {
  color: #9CA3AF !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
}

/* Wczytaj więcej */
#kan-ban .kanban-load-more > a.btn {
  border-radius: 12px !important;
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: 12px !important;
  margin-top: 8px !important;
}

#kan-ban .kanban-load-more > a.btn:hover {
  background: #fff !important;
  border-color: #efb202 !important;
  color: #efb202 !important;
}

/* Brak leadów */
#kan-ban .kanban-empty h4 {
  background: rgba(255,255,255,.9) !important;
  border-radius: 14px !important;
  padding: 32px 20px !important;
  color: #6B7280 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.04) !important;
}

#kan-ban .kanban-empty i {
  color: #efb202 !important;
  font-size: 28px !important;
  margin-bottom: 12px !important;
}

/*kafelki poprawa*/
/* ===== WYCENY - KAFELKI STATUSÓW - FIX ===== */

/* Reset białego tła */
.tw-grid > button.tw-bg-white:has(span.text-default),
.tw-grid > button.tw-bg-white:has(span.text-info),
.tw-grid > button.tw-bg-white:has(span.text-warning),
.tw-grid > button.tw-bg-white:has(span.text-danger),
.tw-grid > button.tw-bg-white:has(span.text-success) {
  /*background: transparent !important;*/
}

/* ===== 1) WERSJA ROBOCZA - text-default (szary) ===== */
.tw-grid > button:has(span.text-default) {
  background: rgba(107, 114, 128, 0.08) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  border-left: 5px solid rgb(107, 114, 128) !important;
}
.tw-grid > button:has(span.text-default) .tw-font-semibold {
  color: rgb(107, 114, 128) !important;
}

/* ===== 2) WYSŁANE - text-info (niebieski) ===== */
.tw-grid > button:has(span.text-info) {
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-left: 5px solid rgb(59, 130, 246) !important;
}
.tw-grid > button:has(span.text-info) .tw-font-semibold {
  color: rgb(59, 130, 246) !important;
}

/* ===== 3) WYGASŁA - text-warning (pomarańczowy) ===== */
.tw-grid > button:has(span.text-warning) {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-left: 5px solid rgb(245, 158, 11) !important;
}
.tw-grid > button:has(span.text-warning) .tw-font-semibold {
  color: rgb(245, 158, 11) !important;
}

/* ===== 4) ODRZUCONE - text-danger (czerwony) ===== */
.tw-grid > button:has(span.text-danger) {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-left: 5px solid rgb(239, 68, 68) !important;
}
.tw-grid > button:has(span.text-danger) .tw-font-semibold {
  color: rgb(239, 68, 68) !important;
}

/* ===== 5) ZAAKCEPTOWANE - text-success (zielony) ===== */
.tw-grid > button:has(span.text-success) {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-left: 5px solid rgb(34, 197, 94) !important;
}
.tw-grid > button:has(span.text-success) .tw-font-semibold {
  color: rgb(34, 197, 94) !important;
}

.tw-overflow-x-auto {
  padding-top: 10px;
}

div.dataTables_wrapper div.dataTables_info {
  margin-top:12px;
}

/* Comment ID */
.comment-id {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.comment-id:hover {
    color: #FEC200;
}

.tc-content blockquote,
.comment-content blockquote {
    border-left: 3px solid #FEC200;
    background: #fef9e7;
    padding: 10px 14px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    color: #565656;
    font-style: italic;
}

/*komnentarze data kolor*/
.tw-text-sm {
  color: #000;
}

.highlight-bg {
    background: #fffded;
    border: 1px solid #fffded;
}

/* ============================================
   Lightbox Enhanced Toolbar
   ============================================ */

/* Toolbar container */
.lb-toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 12px;
    border-radius: 8px;
}

.lb-toolbar a {
    color: #fff;
    font-size: 18px;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.lb-toolbar a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #FEC200;
}

.lb-toolbar a i {
    font-size: 16px;
}

/* Adjust lightbox for toolbar */
.lightbox .lb-image {
    margin-top: 50px;
}

#project_view_name .bootstrap-select button[data-id=project_top] {
    height: auto;
    padding-top: 5px;
    padding-left: 15px;
    padding-bottom: 5px;
}

.project-overview-right {
  padding: 20px;
  border-radius: 16px;
}