/*
  Global styles for TakeOff
  - Loads local font family: "Neue Faktum"
  - Normalizes base typography and page background
  - Provides shared components (top bar, cards, progress, avatars)
*/

/* Font family: Neue Faktum (local .woff2 files in /asset) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

html,
body,
button,
input,
select,
textarea {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}
body {
  background: #f8f9fa;
  --bs-link-color-rgb: 80, 80, 80;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700 !important;
}

:root {
  --bs-warning-rgb: 251, 195, 0 !important;
}

.bg-yellow {
  background-color: #ffda6e;
}
.bg-purple {
  background-color: #b29bc2;
}
.bg-dark {
  background-color: #333333;
}
.bg-light-blue {
  background-color: #f0f4ff;
}
.bg-light-green {
  background-color: #f8fff8;
}

.btn-primary {
  --bs-btn-bg: #f5f5f5;
  --bs-btn-color: #333333;
  --bs-btn-hover-bg: #eee;
  --bs-btn-hover-color: #333333;
  --bs-btn-active-bg: #ffda6e;
  --bs-btn-active-color: #333333;
  --bs-btn-border-color: #333333;
}
.btn-warning {
  --bs-btn-bg: #ffda6e;
  font-weight: 700;
}

.btn-success {
  --bs-btn-bg: #f8fff8;
}
.btn-danger {
  --bs-btn-bg: #efb5b5;
}
.btn {
  --bs-btn-disabled-color: rgba(30, 30, 30, 0.5);
  --bs-btn-disabled-border-color: rgba(30, 30, 30, 0.5);
  --bs-btn-hover-border-color: #ffda6e;
  --bs-btn-disabled-bg: rgba(30, 30, 30, 0.1);
  --bs-btn-hover-bg: #eee;
  --bs-btn-hover-color: #333333;
  --bs-btn-color: #333333;
  --bs-btn-hover-bg: #fefbf0;
  --bs-btn-active-bg: #ffda6e;
  --bs-btn-active-color: #333333;
  --bs-btn-border-color: #aaa;
  --bs-btn-disabled-opacity: 0.35;
  --bs-btn-font-size: 0.9rem;
  --bs-border-radius-sm: 0.375rem;
}
.btn-outline-primary {
  --bs-btn-active-border-color: #aaa;
}
.btn-secondary {
  --bs-btn-hover-bg: #fff3c8;
  --bs-btn-bg: #fff;
}
.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
}
.list-group {
  --bs-list-group-active-bg: #ffda6e;
  --bs-list-group-active-border-color: #ffda6e;
  --bs-list-group-active-color: #333333;
}

/* Elenco incarichi: pulsante completamento con hover verde esplicito */
.complete-task:not(:disabled):hover,
.complete-task:not(:disabled):focus-visible {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}
.dropdown-menu {
  --bs-dropdown-link-active-color: #333333;
  --bs-dropdown-link-active-bg: #ffda6e;
  --bs-dropdown-link-hover-bg: #ffda6e;
}

/* Takeoff navbar component */
.takeoff-navbar-card {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 0 0 25px 25px;
  border: 0 !important;
  background: #333333;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  overflow: visible;
}

.takeoff-navbar-card.takeoff-navbar-pending {
  background: #ffc107;
}

.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-title,
.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav > .dropdown > .btn,
.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav > .btn {
  color: #333333 !important;
}

.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav > .dropdown > .btn:hover,
.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav > .dropdown > .btn:focus-visible,
.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav > .btn:hover,
.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav > .btn:focus-visible,
.takeoff-navbar-card.takeoff-navbar-pending
  .takeoff-navbar-nav
  > .dropdown
  > .btn.show:not(:hover):not(:focus-visible) {
  color: #ffffff !important;
}

.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-logo {
  filter: invert(0) brightness(0.25);
}

.takeoff-navbar-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.takeoff-navbar-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.takeoff-navbar-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.takeoff-navbar-brand-image {
  height: 25px;
  width: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.takeoff-navbar-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.1;
  color: #f5f5f5;
}

.takeoff-navbar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.takeoff-navbar-nav::-webkit-scrollbar {
  display: none;
}

.takeoff-navbar-card .card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
  margin-bottom: 2px;
}

.takeoff-navbar-extra {
  flex: 0 0 320px;
  margin-left: 0.75rem;
  position: relative;
  z-index: 1;
}

.takeoff-navbar-header {
  grid-column: 1;
}

.takeoff-navbar-nav {
  grid-column: 2;
}

.takeoff-navbar-extra {
  grid-column: 3;
}

.takeoff-navbar-extra .selectize-control,
.takeoff-navbar-extra .selectize-control .selectize-input,
.takeoff-navbar-extra select,
.takeoff-navbar-extra .pending-task-select {
  width: 100%;
}

.takeoff-navbar-nav > .dropdown > .btn,
.takeoff-navbar-nav > .btn {
  min-width: auto;
  white-space: nowrap;
  border: 0 !important;
  background: transparent !important;
  color: #f5f5f5 !important;
  box-shadow: none !important;
  padding: 0.55rem 0.85rem;
}

.takeoff-navbar-nav > .dropdown > .btn:hover,
.takeoff-navbar-nav > .dropdown > .btn:focus-visible,
.takeoff-navbar-nav > .btn:hover,
.takeoff-navbar-nav > .btn:focus-visible {
  color: #ffda6e !important;
}

.takeoff-navbar-nav > .dropdown > .btn.show:not(:hover):not(:focus-visible) {
  background: transparent !important;
  color: #ffda6e !important;
}

.takeoff-navbar-nav .dropdown-menu {
  border: 0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  border-radius: 1rem;
  padding: 0.45rem;
  z-index: 1080;
}

/* Stored light-contrast navbar variant for future app dark mode. */
.takeoff-navbar-card.takeoff-navbar-theme-light {
  background: #eee;
}

.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-title,
.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-nav > .dropdown > .btn,
.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-nav > .btn {
  color: #333333 !important;
}

.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-nav > .dropdown > .btn:hover,
.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-nav > .dropdown > .btn:focus-visible,
.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-nav > .btn:hover,
.takeoff-navbar-card.takeoff-navbar-theme-light .takeoff-navbar-nav > .btn:focus-visible,
.takeoff-navbar-card.takeoff-navbar-theme-light
  .takeoff-navbar-nav
  > .dropdown
  > .btn.show:not(:hover):not(:focus-visible) {
  color: #000 !important;
}

/* Explicit dark class kept for compatibility with existing hosts. */
.takeoff-navbar-card.takeoff-navbar-theme-dark {
  background: #333333;
}

.takeoff-navbar-nav .dropdown-item,
.takeoff-navbar-nav .dropdown-header {
  white-space: nowrap;
  border-radius: 0.75rem;
}

.takeoff-navbar-nav .dropdown-item:hover,
.takeoff-navbar-nav .dropdown-item:focus-visible {
  color: #333333 !important;
}

.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav .dropdown-item:hover,
.takeoff-navbar-card.takeoff-navbar-pending .takeoff-navbar-nav .dropdown-item:focus-visible {
  color: #333333 !important;
}

.takeoff-navbar-nav .dropdown-item.takeoff-navbar-shortcut-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}

.takeoff-navbar-shortcut-badge {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0.3em 0.45em;
}

.takeoff-navbar-nav .dropdown-toggle::after {
  margin-left: 0.45rem;
}

.text-info {
  color: #a5a5a5 !important;
}
.alert-info {
  --bs-info-bg-subtle: #f6df8e;
  --bs-alert-border-color: #ffda6e;
}
.form-select:focus {
  box-shadow: 0 0 0 0.25rem #f6df8e;
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  outline: 0;
  box-shadow: 0 0 0 0.25rem #f6df8e;
}
:root {
  --bs-warning-rgb: 255, 153, 100;
  --bs-body-font-size: 0.9rem;
}

#taskStatusMessageSection {
  position: fixed;
  top: 60px;
  width: 800px;
  left: 50%;
  transform: translateX(-50%);
}
#taskStatusMessageSection div {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.w-60 {
  width: 60px;
}
.w-120 {
  width: 120px;
}
.w-0 {
  width: 0%;
}
.w-80 {
  width: 80%;
}

/* Top bar (navbar) */
.navbar {
  padding-left: 2rem;
  padding-right: 2rem;
}
.navbar .container-fluid {
  position: relative;
}
.navbar .title-centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* Card-like containers */
.col-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 1.25rem;
  height: 100%;
}

/* Progress styles (soft palette) */
.progress {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 40px;
  overflow: hidden;
}
.progress-big {
  height: 28px;
}
.progress + .progress {
  margin-top: 1rem;
}
.progress-bar {
  color: #303030;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width 0.6s ease,
    background-color 0.4s ease;
}
.pb-soft-gray {
  background: #e9ecef;
  color: #495057;
}
.pb-soft-green {
  background: #eeffee;
  color: #1d3b24;
}
.pb-soft-red {
  background: #fff2f2;
  color: red;
}
.pb-soft-orange {
  background: #f9d4a5;
  color: #5a3414;
}
.pb-soft-yellow {
  background: #f7ec9c;
  color: #5a4f14;
}

/* Avatars */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #6c757d;
}
/* Avatar wrapper used in templates */
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Variant: larger avatar in some dashboards */
.user-avatar .avatar {
  width: 48px;
  height: 48px;
}

/* Mini avatars (used in task lists) */
.avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  background: #dee2e6;
}
.avatar-mini-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dee2e6;
  font-weight: 600;
  color: #6c757d;
  font-size: 12px;
}

/* Badge */
.badge {
  --bs-badge-color: #505050;
  font-family: monospace;
  font-size: 10px;
  line-height: 12px;
  text-decoration: none;
}

/* Sections */
.cardMain {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 1.5rem 1.25rem;
}

/* Accordion body box (used in tracciamenti) */
/* .user-accordion-body { border: 1px solid #ddd; border-radius: 25px; margin-top: 20px; } */
.user-accordion {
  padding: 10px;
  border-radius: 0.75rem;
  transition: background-color 0.2s ease;
}
.user-accordion:hover {
  background-color: #fefbf0;
}
.accordion-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.accordion-toggle:focus {
  box-shadow: none;
}

/* Overdue task highlight: left red border */
.list-group-item.task-overdue {
  border-left: 5px solid red !important;
}
.kanban-card.task-overdue {
  border-left: 5px solid red !important;
}

/* Calendar */
.datepicker td {
  width: 40px;
  height: 30px;
}

/* Evidenzia sempre il giorno odierno nel datepicker, anche se è disabilitato */
.datepicker table tr td.day.today,
.datepicker table tr td.day.today.disabled,
.datepicker table tr td.day.today.disabled:hover {
  /* background-color: #ffe08a !important; */
  /* color: #2b3a55 !important; */
  border-radius: 4px;
  position: relative;
  background-image: none !important;
  background-color: #fefbf0;
}

.datepicker table tr td.day.today::after,
.datepicker table tr td.day.today.disabled::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid #ffda6e;
  border-radius: 4px;
  pointer-events: none;
}

/* Datepicker week highlight for selected board */
.datepicker table tr td.board-selected-week,
.datepicker table tr td.day.board-selected-week {
  background-color: #fff3b8;
}

.datepicker table tr td.highlighted {
  background-color: #fff3b8;
}

/* Giorno scadenza task evidenziato come "active" anche se disabilitato nel datepicker board */
.datepicker table tr td.day.task-due-active-day,
.datepicker table tr td.day.task-due-active-day.disabled,
.datepicker table tr td.day.task-due-active-day.disabled:hover {
  background-color: #e95741;
  background-image: none !important;
  color: #fff;
  border-radius: 4px;
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover,
.datepicker table tr td.day.board-monday-enabled:hover {
  background-color: #f9d4a5 !important;
  background-image: none !important;
}
.datepicker table tr td.active.disabled:hover {
  background-color: none;
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover:not(.disabled) {
  background-color: #f9d4a5;
}

.datepicker table tr td.day.board-monday-enabled {
  background-color: #ffefb0;
  color: #2b3a55;
  border-radius: 4px;
  font-weight: 600;
}

.datepicker table tr td.day:hover
/* Task card that has been aperta ed è ricaricabile */
.kanban-card.task-reloadable {
  background-color: #fff6f0;
}

/* Completed tasks appearance (incarico) */
.list-group-item.task-completed {
  background-color: #eeffee !important;
}

/* Month selector */
.month-label,
.week-label {
  min-width: 100px;
  font-weight: 600;
  font-size: 1.15rem;
  text-align: center;
}

/* Login page card */
.login-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 420px;
  margin: 10vh auto;
}

/* Tables (users page helpers) */
.col-avatar {
  min-width: 50px;
}
.col-id {
  width: 70px;
}
.col-reset {
  width: 70px;
}
.col-name {
  min-width: 200px;
}
.col-role {
  min-width: 160px;
}
/* Highlight for applied role permission in users page */
.role-select.role-applied {
  background-color: #fff9db;
}

/* Sticky filter row and toasts (users page) */
.filter-row {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
  padding: 0.5rem 0 0.75rem;
}
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
}

/* Filter toggle pressed state (shared across pages) */
#toggleIncompleteFilter[aria-pressed="true"] {
  /* keep outline border color from the outline class */
  color: #2b3a55 !important;
}

.form-check-input:checked {
  background-color: #ffda6e;
  border-color: #ffda6e;
}

.selectize-dropdown .selected {
  background-color: #ffda6e;
  color: #333333;
}
/* Clickable user progress */
.user-progress-toggle {
  cursor: pointer;
  user-select: none;
}
.user-progress-toggle:hover {
  border: 2px solid #f9d4a5;
}
.user-progress-toggle:focus {
  outline: none;
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: #ffda6e;
  --bs-nav-link-color: #505050;
  --bs-nav-link-hover-color: #000;
  --bs-nav-link-hover-color: #333333;
  --bs-nav-tabs-link-hover-border-color: #ffda6e;
}

/* Home: selector incarichi/attivita allineato al selettore settimane */
.user-board-tabs .user-board-tab {
  min-width: 80px;
}

.user-board-tabs .btn-check:focus + .user-board-tab,
.user-board-tabs .user-board-tab:focus {
  box-shadow: none;
}

.home-board-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  padding-top: 14px;
}

.home-board-loading-message {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 600;
  color: #2b3a55;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.board-caps-popover {
  position: absolute;
  z-index: 1090;
  width: min(530px, calc(100vw - 16px));
  overflow: visible;
}
.board-caps-popover.board-caps-popover--single {
  width: auto;
  max-width: calc(100vw - 16px);
}
.board-caps-popover.board-caps-popover--cols-2 {
  width: min(360px, calc(100vw - 16px));
}
.board-caps-popover.board-caps-popover--cols-3 {
  width: min(516px, calc(100vw - 16px));
}
.board-caps-popover.board-caps-popover--cols-4 {
  width: min(672px, calc(100vw - 16px));
}

.board-caps-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.board-caps-content--reversible {
  display: flex;
  flex-direction: column;
}

.board-caps-content--reversible > .board-caps-grid {
  order: 1;
}

.board-caps-content--reversible > .board-caps-popover-header {
  order: 2;
}

.board-caps-popover.board-caps-popover--bottom .board-caps-content--reversible > .board-caps-popover-header {
  order: 0;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.openTask.is-updating,
.link-task.is-updating {
  cursor: progress;
}

.board-caps-popover-week-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-caps-nav-btn {
  min-width: 30px;
  height: 28px;
  line-height: 1;
  padding: 0;
}

.board-caps-nav-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.board-caps-nav-row .board-caps-grid {
  flex: 1 1 auto;
}

.board-caps-nav-row .board-caps-nav-btn {
  align-self: center;
}

.board-caps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.board-caps-grid.board-caps-grid--single {
  grid-template-columns: minmax(220px, 1fr);
}
.board-caps-grid.board-caps-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.board-caps-grid.board-caps-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.board-caps-grid.board-caps-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.board-cap-cell {
  border: 1px solid #ececec;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}

.board-cap-cell.board-cap-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  text-align: center;
  color: #6c757d;
  font-size: 0.75rem;
}

.board-cap-user {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.board-cap-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: #f2f2f2;
  color: #444;
  flex: 0 0 18px;
}

.board-cap-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1.2;
}

.board-cap-metrics {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.board-cap-hours {
  font-size: 0.72rem;
  color: #5c6370;
}

.board-cap-completed {
  font-size: 0.72rem;
  color: #5c6370;
}

.form-check-input {
  margin-top: 0;
  min-height: auto;
}

.datepicker {
  padding: 6px;
}
.datepicker table tr td.active {
  background-image: none;
  color: inherit;
}