.proposal-block-card {
  transition: box-shadow 0.15s ease;
  border: 1px solid #e2e8f0;
}

.proposal-block-card:hover {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
  border-color: #bfdbfe;
}

.block-drag-handle {
  opacity: 0.35;
  transition: opacity 0.15s;
  user-select: none;
}

.proposal-block:hover .block-drag-handle {
  opacity: 0.75;
}

.sortable-drag {
  opacity: 1 !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18) !important;
}

.sortable-ghost {
  opacity: 0.4;
  background: #eff6ff !important;
}

.sortable-chosen {
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}

.proposal-text-content p:last-child {
  margin-bottom: 0;
}

/* Public proposal view */
.proposal-text p {
  line-height: 1.7;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 :host,:root,[data-bs-theme=light] {
    --tblr-secondary-rgb: 108,122,145;
 }

/* Prevent Tabler's .breadcrumb a colour/underline rules from overriding button styles */
.breadcrumb a.btn,
.breadcrumb a.btn:hover,
.breadcrumb a.btn:focus {
  color: inherit;
  text-decoration: none;
}

.dropdown-menu {
    --tblr-dropdown-zindex: 1000;
    --tblr-dropdown-min-width: 11rem;
    --tblr-dropdown-padding-x: 0;
    --tblr-dropdown-padding-y: 0.25rem;
    --tblr-dropdown-spacer: 1px;
    --tblr-dropdown-font-size: 0.875rem;
    --tblr-dropdown-color: var(--tblr-body-color);
    --tblr-dropdown-bg: var(--tblr-bg-surface);
    --tblr-dropdown-border-color: var(--tblr-border-color-translucent);
    --tblr-dropdown-border-radius: var(--tblr-border-radius);
    --tblr-dropdown-border-width: var(--tblr-border-width);
    --tblr-dropdown-inner-border-radius: calc(var(--tblr-border-radius) - var(--tblr-border-width));
    --tblr-dropdown-divider-bg: var(--tblr-border-color-translucent);
    --tblr-dropdown-divider-margin-y: var(--tblr-spacer);
    --tblr-dropdown-box-shadow: var(--tblr-box-shadow-dropdown);
    --tblr-dropdown-link-color: inherit;
    --tblr-dropdown-link-hover-color: inherit;
    --tblr-dropdown-link-hover-bg: rgba(var(--tblr-secondary-rgb), 0.08);
    --tblr-dropdown-link-active-color: var(--tblr-primary);
    --tblr-dropdown-link-active-bg: var(--tblr-active-bg);
    --tblr-dropdown-link-disabled-color: var(--tblr-tertiary-color);
    --tblr-dropdown-item-padding-x: 0.75rem;
    --tblr-dropdown-item-padding-y: 0.5rem;
    --tblr-dropdown-header-color: #49566c;
    --tblr-dropdown-header-padding-x: 0.75rem;
    --tblr-dropdown-header-padding-y: 0.25rem;
    position: absolute;
    z-index: var(--tblr-dropdown-zindex);
    display: none;
    min-width: var(--tblr-dropdown-min-width);
    padding: var(--tblr-dropdown-padding-y) var(--tblr-dropdown-padding-x);
    margin: 0;
    font-size: var(--tblr-dropdown-font-size);
    color: var(--tblr-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--tblr-dropdown-bg);
    background-clip: padding-box;
    border: var(--tblr-dropdown-border-width) solid var(--tblr-dropdown-border-color);
    border-radius: var(--tblr-dropdown-border-radius);
    box-shadow: var(--tblr-dropdown-box-shadow)
}

.dropdown-item:focus,.dropdown-item:hover {
    color: var(--tblr-dropdown-link-hover-color);
    text-decoration: none;
    background-color: var(--tblr-dropdown-link-hover-bg)
}

.schedule {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow-x: scroll;
    max-width: 1500px;
}

.schedule table {
    width: 100%;
    border-collapse: collapse;
}

.schedule th,
.schedule td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

.schedule th {
    background-color: #f2f2f2;
}

.schedule td {
    background-color: #fff;
}

.schedule td:hover {
    background-color: #f2f2f2;
}

td.schWeekend {
    background-color: rgb(221, 221, 221);
}

td.schWFH {
    background-color: rgb(221, 221, 221);
}

td.schProjects {
    background-color: rgb(221, 221, 221);
}

td.schAnnualLeave {
    background-color: rgb(221, 221, 221);
}

td.schOnsite {
    background-color: rgb(221, 221, 221);
}

td.schApprenticeship {
    background-color: rgb(221, 221, 221);
}

td.schExam {
    background-color: rgb(221, 221, 221);
}

td.schCover {
    background-color: rgb(221, 221, 221);
}

td.schTraining {
    background-color: rgb(221, 221, 221);
}

td.schEmergencyCall {
    background-color: rgb(221, 221, 221);
}

td.schSickLeave {
    background-color: rgb(221, 221, 221);
}
/* Admin sidebar: a card while it's the collapsed menu on a phone, and a panel
   with only a right-hand border beside the page from lg up. */
.admin-sidebar {
    background-color: var(--tblr-bg-surface);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}

@media (min-width: 992px) {
    .admin-sidebar {
        border-width: 0 var(--tblr-border-width) 0 0;
        border-radius: 0;
    }
}

/* The customer page's tabs: tighter on a phone, so all five fit across without
   scrolling; they still scroll sideways on anything narrower. */
@media (max-width: 575.98px) {
    .customer-tabs .nav-link {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

/* Contract Exclusions: "Remove exclusions" shows over a cell only on hover or
   keyboard focus, so it doesn't crowd a long table. It stays up while the
   request runs (Turbo marks the form aria-busy) even if the pointer moves off. */
.exclusion-cell { position: relative; }
.exclusion-cell .exclusion-remove {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.exclusion-cell:hover .exclusion-remove,
.exclusion-cell:focus-within .exclusion-remove,
.exclusion-cell .exclusion-remove[aria-busy="true"] {
  opacity: 1;
  pointer-events: auto;
}