/* Cisco Commerce pages under /integrations/cisco */

/* ── Logo tile ── */
.int-logo {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--sc-radius, 4px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f1f4f9;
    background: color-mix(in srgb, var(--int-brand, #3155A4) 14%, #fff);
}

.int-logo--lg {
    width: 56px;
    height: 56px;
}

.int-logo__mono {
    font-weight: 800;
    font-size: 18px;
    color: var(--int-brand, #3155A4);
}

/* ── Detail page ── */
.int-detail {
    max-width: 760px;
}

/* full width for wide data grids */
.int-detail--wide {
    max-width: none;
}

/* Fluent grids default to inline-grid; fill the card instead */
.int-detail--wide .fluent-data-grid,
.int-detail--wide fluent-data-grid,
.int-detail--wide [role="grid"] {
    display: grid !important;
    width: 100% !important;
}

/* stretch DataTable's shrink-wrapping wrappers */
.int-detail--wide .data-table-wrapper,
.int-detail--wide .data-table-wrapper .fluent-grid,
.int-detail--wide .data-table-wrapper .data-grid-wrapper {
    width: 100%;
}

/* same stretch for detail tables outside .int-detail--wide */
.cisco-lines .data-table-wrapper,
.cisco-lines .data-table-wrapper .fluent-grid,
.cisco-lines .data-table-wrapper .data-grid-wrapper {
    width: 100%;
}

/* clip the grid's negative gutter, which adds a phantom scrollbar */
.cisco-lines .data-table-wrapper {
    overflow-x: clip;
}

/* these pages filter in their own card, so DataTable's header row is empty */
.cisco-table-card .data-table-wrapper > .header-row,
.cisco-lines .data-table-wrapper > .header-row {
    display: none;
}

/* no empty search strip when a grid has no search box */
.cisco-lines .fluent-data-grid:not(:has(.header-search-bottom:not([aria-hidden="true"]))) .header-search-bottom,
.cisco-table-card .fluent-data-grid:not(:has(.header-search-bottom:not([aria-hidden="true"]))) .header-search-bottom {
    display: none;
}

.cisco-lines .fluent-data-grid:not(:has(.header-search-bottom:not([aria-hidden="true"]))) .header-search,
.cisco-table-card .fluent-data-grid:not(:has(.header-search-bottom:not([aria-hidden="true"]))) .header-search {
    min-height: 24px;
    padding-bottom: 0;
}

/* break amounts only between words, never mid-number */
.cisco-lines td.col-justify-end,
.cisco-table-card td.col-justify-end {
    word-break: normal;
    overflow-wrap: normal;
}

/* MultiLine gives every cell overflow:auto, which puts a scrollbar inside a row. */
.cisco-lines .fluent-data-grid td,
.cisco-table-card .fluent-data-grid td {
    overflow: hidden;
}

/* DataTable pins a 1000px min-width; let Cisco grids narrow */
.cisco-lines .fluent-data-grid,
.cisco-table-card .fluent-data-grid {
    min-width: 0 !important;
}

.cisco-lines th.column-header,
.cisco-table-card th.column-header {
    min-width: 4.5rem !important;
}

/* Cisco pages the catalog in 50s, so the page-size selector must stay hidden */
.cisco-fixed-page-size .pagination-footer-left {
    display: none;
}

.int-detail__back {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--brand-600, var(--accent-fill-rest));
    text-decoration: none;
}

.int-detail__back:hover {
    text-decoration: underline;
}

/* back link plus a right-aligned action; a third item in the head wraps the title */
.int-detail__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

/* the row owns the spacing; never shrink the link */
.int-detail__topbar .int-detail__back {
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* actions across from a MainHeading title; absolute so its rule spans the page */
.cisco-page-head {
    position: relative;
}

/* above MainHeading, which app.css lifts to z-index 1 */
.cisco-page-head__actions {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* below the heading once the title and buttons cannot share a line */
@media (max-width: 700px) {
    .cisco-page-head__actions {
        position: static;
        margin-bottom: 12px;
    }
}

.int-detail__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.int-detail__name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sc-ink, #212121);
}

.int-detail__panel {
    border: var(--sc-border, 1px solid #e0e0e0);
    border-radius: var(--sc-radius, 4px);
    padding: 18px;
    margin-bottom: 16px;
    background: #fff;
}

.int-detail__h2 {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sc-ink, #212121);
}

.cisco-side-by-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.cisco-align-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.cisco-align {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cisco-align th,
.cisco-align td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, rgba(127, 127, 127, 0.3));
}

.cisco-align th {
    font-weight: 600;
    white-space: nowrap;
}

.cisco-align .num {
    text-align: right;
    white-space: nowrap;
}

.cisco-align__split {
    border-left: 2px solid var(--neutral-stroke-rest, rgba(127, 127, 127, 0.5));
}

.cisco-align__gap {
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127, 127, 127, 0.14) 6px 12px);
}

.cisco-busy {
    position: relative;
    display: inline-block;
}

.cisco-busy--on .cisco-busy__label {
    visibility: hidden;
}

.cisco-busy__ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
}

.cisco-side-by-side__pane {
    min-width: 0;
}

@media (max-width: 1200px) {
    .cisco-side-by-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cisco-compare-error {
    padding: 12px 14px;
    border-radius: var(--sc-radius-sm, 4px);
    background: var(--sc-warn-bg, #fdf3e2);
    color: var(--sc-warn, #9a6700);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Import and refresh outcomes. The success banner is the link to the quote, so the whole panel is the
   target rather than a button inside it. */
.cisco-result-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 10px 14px;
    font-weight: 600;
    border-left: 4px solid var(--sc-ink-faint, #757575);
    background: var(--neutral-layer-2, #f5f5f5);
}

a.cisco-result-banner {
    cursor: pointer;
    text-decoration: none;
}

a.cisco-result-banner:hover,
a.cisco-result-banner:focus-visible {
    text-decoration: underline;
}

.cisco-result-banner__go {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 400;
}

.cisco-result-banner--success {
    border-left-color: var(--success, #107c10);
    background: rgba(16, 124, 16, 0.08);
    color: var(--success, #107c10);
}

.cisco-subline {
    display: block;
    font-size: 0.78rem;
    color: var(--sc-ink-faint, #757575);
}

.cisco-action-badge {
    display: inline-block;
    white-space: nowrap;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 0.7rem;
    background: var(--neutral-layer-3, #eee);
    color: var(--sc-ink-soft, #616161);
}