/* ---------------------------------------------------------------------------
   Safety Data Sheets — the in-grid controls.

   The standalone SDS pages (hub, customer file, share, mapping) carry their own
   styles inline because they render with Layout = "". This file is for the parts
   that live inside the normal CRM chrome: the Download / Open buttons and the
   status chips on the Chemical Library grid.

   Everything is scoped under .slick-cell and pins display with !important,
   because the theme sets `display: flex` on anchors inside a grid cell. Without
   that the two buttons become block-level and each one stretches to the full
   cell width, which is exactly how the first version of this looked wrong.

   Sizes are pinned too. A grid row is about 30px tall; a control that renders at
   its natural height ends up 30px itself and the row looks bloated. 22px leaves
   the row breathing.

   Colours fall back to literals because upgear-brand.css comes from the same
   bundle and a tenant with a rewritten base path should still get buttons rather
   than unstyled links.
   --------------------------------------------------------------------------- */

.slick-cell .sds-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.slick-cell a.sds-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--ug-line, #EAE7F5);
    background: var(--ug-white, #fff);
    color: var(--ug-grey-700, #4A465C);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

.slick-cell a.sds-btn:hover {
    border-color: var(--ug-v-400, #7B68EE);
    background: var(--ug-v-50, #F3F1FD);
    color: var(--ug-v-700, #3D22B0);
    text-decoration: none;
}

.slick-cell a.sds-btn i {
    font-size: 10.5px;
    opacity: .9;
}

.slick-cell a.sds-btn.sds-btn-primary {
    background: var(--ug-v-500, #6647F0);
    border-color: var(--ug-v-500, #6647F0);
    color: #fff;
}

.slick-cell a.sds-btn.sds-btn-primary:hover {
    background: var(--ug-v-600, #4A2FC9);
    border-color: var(--ug-v-600, #4A2FC9);
    color: #fff;
}

/* Icon only. Two text buttons do not fit a grid cell without truncating, and a
   truncated "Op" is worse than an icon with a tooltip. */
.slick-cell a.sds-btn.sds-btn-icon {
    padding: 4px 7px;
}

.slick-cell a.sds-btn.sds-btn-icon i {
    font-size: 11.5px;
}

/* Status chips. Deliberately not Bootstrap badges: those are 10px uppercase
   pills that read as decoration, and these states are things a user acts on. */
.slick-cell .sds-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 4px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.slick-cell .sds-chip i {
    font-size: 10px;
}

/* No sheet on file. Phrased as the action, not the absence, because this cell is
   the whole reason somebody opens this screen a second time. */
.slick-cell .sds-chip-missing {
    background: #FCEDEC;
    color: var(--ug-overdue, #C2352A);
    border: 1px dashed #F0BAB5;
}

.slick-cell .sds-chip-upgear {
    background: var(--ug-v-50, #F3F1FD);
    color: var(--ug-v-700, #3D22B0);
}

.slick-cell .sds-chip-yours {
    background: var(--ug-sunken, #F0EEF9);
    color: var(--ug-grey-500, #6C6784);
}