#customer-select {
    width: 100%;
  }

 .provider-carousel {
     scroll-snap-type: x mandatory;
     scrollbar-width: thin;
 }
 .provider-carousel::-webkit-scrollbar { height: 6px; }
 .provider-carousel::-webkit-scrollbar-thumb { background: #cfd6e1; border-radius: 3px; }

 .provider-pill {
     background: transparent;
     border: 0;
     padding: .25rem;
     cursor: pointer;
     scroll-snap-align: start;
 }
 .provider-pill .provider-avatar-wrap {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     padding: 3px;
     background: transparent;
     border: 3px solid transparent;
     transition: border-color .18s ease, transform .18s ease;
     box-sizing: content-box;
 }
 .provider-pill:hover .provider-avatar-wrap {
     border-color: rgba(13, 110, 253, 0.35);
     transform: translateY(-1px);
 }
 .provider-pill.is-selected .provider-avatar-wrap {
     border-color: #0d6efd;
     box-shadow: 0 0 0 .15rem rgba(13, 110, 253, 0.2);
 }
 .provider-pill.is-selected .provider-pill-name {
     color: #0d6efd;
     font-weight: 600;
 }
 .provider-pill-name {
     color: #495057;
     font-size: .8rem;
 }

 body
 {
     background-color: #f5f5f5;
     font-family: 'Roboto', sans-serif;
 }
 :root {
     --bs-primary: #0C99EF;
     --bs-link-color-rgb:black;


 }
.timespan{
margin-top:10px;
 }
 .navbar {
     box-shadow: var(--bs-box-shadow-sm) !important;
     font-weight: 400;
     background-color:white !important;
 }
 .card {
     box-shadow: var(--bs-box-shadow-sm) !important;
     padding:20px;
 }
 tr[data-customer-row]:hover {
     background-color: #f8f9fa; /* light gray */
 }

 .navbar .nav-link.active {
     font-weight: 700;
     color:030303;/* bold for active */
 }

 .nav-link
 {
     font-weight: 700;
     color:black;
 }



 .fc .fc-button {
     background-color: var(--bs-primary) !important;
     border-color: var(--bs-primary) !important;
     color: #fff !important;
     font-family: 'Roboto', sans-serif;
 }

 /*.fc .fc-button:hover {
     background-color: shade-color(var(--bs-primary), 80%) !important;
     border-color: shade-color(var(--bs-primary), 80%) !important;
 }*/

 .fc .fc-button:disabled {
     background-color: #ccc !important;
     border-color: #ccc !important;
     color: #666 !important;
 }

 .fcSelect
 {
     width: 268px;
     margin-top: 10px;
     margin-left: 0px !important;

     font-weight: 600;
     font-size: large;
     background: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>") no-repeat right #f5f5f5;
     -webkit-appearance: none;
     background-position-x: 240px;
 }

 .fcSelect option
 {
      background-color:efefef;
 }

 .timeline {
     position: relative;
     border-left: 2px solid var(--bs-border-color);
     padding-left: 1rem;
     margin-left: .75rem;
 }
 .timeline-item {
     position: relative;
     padding: 0.3rem;
 }
 .timeline-dot {
     position: absolute;
     left: -1.44rem;             /* adjust with your padding */
     top: 1.25rem;
     width: 10px; height: 10px;
     border-radius: 50%;
     z-index: 2;                  /* ensure it sits above the border */
     box-shadow: 0 0 0 2px #fff;  /* white ring to stand out */
 }
 .dot-green  { background: var(--bs-success); }
 .dot-red    { background: #dc3545; }   /* canceled */
 .dot-orange { background: #fd7e14; }   /* rescheduled */
 .dot-blue   { background: #0d6efd; }   /* planned */
 .timeline-section-title {
     font-weight: 600; color: var(--bs-secondary);
     margin: .5rem 0 .75rem 0;
 }
 .muted-line { color: var(--bs-secondary); }

 /* Make the pills tidy and consistent */
 .metric-pill small { opacity: .8; }
 .summary-pies .chart-wrap { min-height: 180px; } /* adjust 180–240px to taste */
 .summary .metric-pill .fs-5 { line-height: 1; }


 /* Optional: shrink legends slightly to fit */
 .hours-legend, .works-legend { font-size: .85rem; line-height: 1.1; }

 .ec-event-title {
     font-size: 0.75rem;          /* ~12px */
     line-height: 1.1;
     white-space: normal;         /* povol zalomenie */
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
 }

 /* Lepšie správanie v resourceTimeGridDay */
 .ec-timegrid-event .ec-event-title {
     font-size: 0.7rem;           /* ešte menší v stĺpcoch */
 }

 /* Voliteľné – zmenši padding eventu */
 .ec-event {
     padding: 2px 4px;
 }


 /* ===== Calendar container ===== */
 #calendar {
     background: #fff;
     border: 1px solid rgba(0,0,0,.08);
     border-radius: 8px;
     box-shadow: 0 10px 25px rgba(0,0,0,.06);
     overflow: hidden;
 }

 /* ===== Toolbar ===== */
 #calendar .ec-toolbar {
     padding: 10px 12px;
     border-bottom: 1px solid rgba(0,0,0,.06);
     background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.0));
 }

 #calendar .ec-toolbar-title {
     font-weight: 700;
     font-size: 1.05rem;
     letter-spacing: .2px;
 }

 /* Buttons */
 /* ===== Base = btn-primary (solid filled) ===== */
 #calendar .ec-button {
     border-radius: .375rem; /* bootstrap */
     padding: .375rem .75rem;
     font-weight: 600;
     font-size: .875rem;

     color: #fff;
     background-color: var(--bs-primary);

     border: 1px solid var(--bs-primary);

     transition:
     color .15s ease-in-out,
     background-color .15s ease-in-out,
     border-color .15s ease-in-out,
     box-shadow .15s ease-in-out;

     margin: 2px;
 }

 /* Hover = slightly darker shade of #0C99EF */
 #calendar .ec-button:hover {
     color: #fff;
     background-color: #0a82ca;
     border-color: #0a82ca;
     box-shadow: 0 0 0 .2rem rgba(12,153,239,.25);
 }
 /* Lunch break background */
 .ec-lunch-break {
     background: rgba(0, 0, 0, 0.06);
     pointer-events: none; /* neblokuje kliky */
     position: relative;
 }

 /* Text "Lunch break" v strede */
 .ec-lunch-break::after {
     content: "🍽 Lunch break";
     font-size: 0.7rem;
     opacity: 0.35;


     pointer-events: none;
 }
 /* Jemné označenie víkendov – celý stĺpec */
 #calendar .ec-sat
 {
     background-color: rgba(0, 0, 0, 0.1);
 }
 #calendar .ec-sun {
     background-color: rgba(0.2, 0, 0, 0.1);
 }

 /* Jemne aj v headeri (deň v týždni) */
 #calendar .ec-col-header-cell.ec-sat
 {
     background-color: rgba(0, 0, 0, 0.1);
 }
 #calendar .ec-col-header-cell.ec-sun {
     background-color: rgba(0.1, 0, 0, 0.1);
 }
 /* Active view = btn-primary */
 #calendar .ec-button.ec-active {
     color: #fff;
     background-color: var(--bs-primary);
     border-color: var(--bs-primary);
 }

 /* Active click (pressed) */
 #calendar .ec-button:active {
     color: #fff;
     background-color: #096db0; /* darker shade of #0C99EF */
     border-color: #0864a4;
 }

 /* Disabled */
 #calendar .ec-button.ec-disabled {
     color: rgba(12,153,239,.5);
     border-color: rgba(12,153,239,.5);
     background-color: transparent;
     box-shadow: none;
     cursor: not-allowed;
 }

 /* ===== Grid / headers ===== */
 #calendar .ec-header,
 #calendar .ec-resource-header {
     background: rgba(0,0,0,.015);
 }

 #calendar .ec-col-header-cell {
     font-weight: 700;
     font-size: .82rem;
     letter-spacing: .2px;
     color: rgba(0,0,0,.72);
     border-bottom: 1px solid rgba(0,0,0,.06);
 }

 #calendar .ec-timegrid-axis {
     color: rgba(0,0,0,.55);
     font-size: .80rem;
 }

 /* Softer grid lines */
 #calendar .ec-timegrid-slot {
     border-top: 1px solid rgba(0,0,0,.04);
 }
 #calendar .ec-timegrid-divider {
     border-top: 1px solid rgba(0,0,0,.08);
 }

 /* ===== Today highlight ===== */
 #calendar .ec-today {
     background: rgba(13,110,253,.05);
 }

 /* ===== Events ===== */
 #calendar .ec-event {
     border-radius: 6px;
     border: 1px solid rgba(0,0,0,.10);
     box-shadow: 0 6px 14px rgba(0,0,0,.08);
     overflow: hidden;
 }

 /* Title fit */
 #calendar .ec-event-title {
     font-size: .75rem;
     font-weight: 700;
     line-height: 1.15;
     white-space: normal;
     word-break: break-word;
 }

 /* Smaller time text (if shown by theme) */
 #calendar .ec-event-time {
     font-size: .72rem;
     opacity: .9;
 }

 /* Hover feedback — no transform (breaks position:fixed tooltip containment) */
 #calendar .ec-event:hover {
     box-shadow: 0 10px 22px rgba(0,0,0,.18);
 }

 /* Resize handle visibility */
 #calendar .ec-event-resizer {
     opacity: .85;
 }

 /* ===== Resource columns (provider day) ===== */
 #calendar .ec-resource-area {
     border-right: 1px solid rgba(0,0,0,.06);
 }

 #calendar .ec-resource-cell {
     font-weight: 700;
     font-size: .82rem;
     color: rgba(0,0,0,.75);
 }

 /* ===== Scrollbars (subtle) ===== */
 #calendar .ec-scroller::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
 #calendar .ec-scroller::-webkit-scrollbar-thumb {
     background: rgba(0,0,0,.12);
     border-radius: 6px;
 }
 #calendar .ec-scroller::-webkit-scrollbar-thumb:hover {
     background: rgba(0,0,0,.18);
 }

 #payResult {
     transition: opacity .25s ease;
 }

/* ── Calendar event hover tooltip ───────────────────────────────────────── */
#cal-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    width: 260px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: .65rem .85rem;
    font-size: .82rem;
    line-height: 1.45;
}
#cal-tooltip.visible { display: block; }
#cal-tooltip .tip-title {
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#cal-tooltip .tip-row {
    display: flex;
    gap: .4rem;
    margin-bottom: .18rem;
}
#cal-tooltip .tip-label {
    color: #6c757d;
    flex-shrink: 0;
    min-width: 60px;
}
#cal-tooltip .tip-val { font-weight: 500; }
#cal-tooltip .tip-notes {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid #f0f0f0;
    color: #495057;
    white-space: pre-wrap;
    word-break: break-word;
}