/* ---- Profile pictures ----
   One set of sizes for every place a person is shown, so an avatar in a table
   matches the one in the topbar. Always square and always cropped rather than
   squashed: uploads arrive in every aspect ratio there is. */

.user-avatar {
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
}

.user-avatar-xs {
    width: 24px;
    height: 24px;
}

.user-avatar-sm {
    width: 32px;
    height: 32px;
}

.user-avatar-md {
    width: 40px;
    height: 40px;
}

.user-avatar-lg {
    width: 56px;
    height: 56px;
}

.user-avatar-xl {
    width: 132px;
    height: 132px;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .16);
}

/* Bootstrap has no min-width utility, and a flex child that will not shrink
   below its content is what makes a long name push a row sideways. */
.min-w-0 {
    min-width: 0;
}

/* ---- Pagination under a JSON-driven table ----
   Every table that pages in SQL rather than in the browser wears this: a
   count on the left, the page controls on the right. Stated once here so
   Configuration and Reports cannot drift apart; `.config-pagination` is the
   name Configuration's markup already uses. */

.table-pagination,
.config-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.table-pagination-summary,
.config-pagination-summary {
    font-size: 0.82rem;
    color: #64748b;
}


/* ---- Buttons: outlined, never filled ----
   Bootstrap 5.3 builds every button out of `--bs-btn-*` custom properties, so
   the whole site's button style is a matter of restating those once here
   rather than editing markup page by page. Loaded after Bootstrap in every
   layout, so these win.

   The rule for each variant: the colour it used to be filled with becomes its
   border and its text, the fill becomes nothing, and hovering washes that same
   colour in behind the text at low opacity. A translucent tint rather than an
   opaque one so a button reads the same on a white card, a pale panel or the
   blue hero. Only `.btn-link` is left alone - it is a link wearing a button's
   class, and it never had a fill to lose. */

.btn-primary,
.btn-outline-primary,
.btn-secondary,
.btn-outline-secondary,
.btn-success,
.btn-outline-success,
.btn-danger,
.btn-outline-danger,
.btn-warning,
.btn-outline-warning,
.btn-info,
.btn-outline-info,
.btn-light,
.btn-outline-light,
.btn-dark,
.btn-outline-dark {
    --bs-btn-color: var(--ui-btn-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ui-btn-line);

    --bs-btn-hover-color: var(--ui-btn-ink);
    --bs-btn-hover-bg: rgba(var(--ui-btn-rgb), .12);
    --bs-btn-hover-border-color: var(--ui-btn-line);

    --bs-btn-active-color: var(--ui-btn-ink);
    --bs-btn-active-bg: rgba(var(--ui-btn-rgb), .22);
    --bs-btn-active-border-color: var(--ui-btn-line);
    --bs-btn-active-shadow: none;

    --bs-btn-focus-shadow-rgb: var(--ui-btn-rgb);

    /* One greyed-out look for every variant. A disabled danger button that
       kept its red would still read as "press me"; the point of the state is
       that it stops looking like any of them. */
    --bs-btn-disabled-color: #8a94a6;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ced4da;
}

.btn-primary,
.btn-outline-primary {
    --ui-btn-ink: #0d6efd;
    --ui-btn-line: #0d6efd;
    --ui-btn-rgb: 13, 110, 253;
}

.btn-secondary,
.btn-outline-secondary {
    --ui-btn-ink: #6c757d;
    --ui-btn-line: #6c757d;
    --ui-btn-rgb: 108, 117, 125;
}

.btn-success,
.btn-outline-success {
    --ui-btn-ink: #198754;
    --ui-btn-line: #198754;
    --ui-btn-rgb: 25, 135, 84;
}

.btn-danger,
.btn-outline-danger {
    --ui-btn-ink: #dc3545;
    --ui-btn-line: #dc3545;
    --ui-btn-rgb: 220, 53, 69;
}

/* Warning and info kept their hue for the border, but their fill colour was
   only ever legible under white text. As a label on white it needs the darker
   end of the same hue to stay readable. */
.btn-warning,
.btn-outline-warning {
    --ui-btn-ink: #997404;
    --ui-btn-line: #ffc107;
    --ui-btn-rgb: 255, 193, 7;
}

.btn-info,
.btn-outline-info {
    --ui-btn-ink: #087990;
    --ui-btn-line: #0dcaf0;
    --ui-btn-rgb: 13, 202, 240;
}

/* The light button was near-white already: its own colour as a border would
   be invisible on the white it sits on, so the border steps one shade down
   and the wash keeps the pale grey the button used to be filled with. */
.btn-light,
.btn-outline-light {
    --ui-btn-ink: #212529;
    --ui-btn-line: #ced4da;
    --ui-btn-rgb: 173, 181, 189;
}

.btn-dark,
.btn-outline-dark {
    --ui-btn-ink: #212529;
    --ui-btn-line: #212529;
    --ui-btn-rgb: 33, 37, 41;
}

/* ------------------------------------------------------------------
   The shared confirmation dialog (x-confirm-dialog).

   One rule, for the block that carries the consequence rather than the
   question. It is set apart because in a browser confirm() the two ran
   together in one grey paragraph, and the consequence - who comes off a
   project, what stops being editable - is the half worth reading twice.
   ------------------------------------------------------------------ */

.app-confirm-detail {
    padding: .65rem .8rem;
    border-radius: .45rem;
    border-left: 3px solid #e0a800;
    background: #fff8e6;
    color: #7a5510;
    font-size: .86rem;
}

/* ---- Technician links ----
   A technician's name that opens their details on the Technicians page. Reads
   as the name it replaces until it is pointed at, so a table full of them does
   not turn into a wall of blue. See components/technician-link.blade.php. */

.technician-link {
    color: inherit;
    text-decoration: none;
}

/* A name drawn as a button (it opens a dialog rather than a page) reads as
   text. A chip keeps the padding, border and background its own class sets. */
button.technician-link {
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

button.technician-link:not(.schedule-tech-chip) {
    padding: 0;
    border: 0;
    background: none;
}

.technician-link:hover,
.technician-link:focus-visible {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Task holder flag ----
   Under a task's technician when they are no longer assigned to the project
   for all of its dates. See components/task-holder-flag.blade.php. */

.task-holder-flag {
    display: block;
    margin-top: .15rem;
    color: #b42318;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.task-holder-flag .bi {
    font-size: .7rem;
    margin-right: .15rem;
}