/* Subscription Renewal command centre */
.hms-sr-buckets .btn {
    margin-right: 4px;
}

.hms-sr-badge {
    display: inline-block;
    min-width: 42px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
}

.hms-sr-badge-danger {
    background: #f8d7da;
    color: #842029;
}

.hms-sr-badge-warning {
    background: #fff3cd;
    color: #664d03;
}

.hms-sr-badge-notice {
    background: #cfe2ff;
    color: #084298;
    font-size: 20px;
}

.hms-sr-badge-ok {
    background: #d1e7dd;
    color: #0f5132;
}

.hms-sr-badge-muted {
    background: #e9ecef;
    color: #495057;
}

/* ---- Subscription detail modal ---- */

/* The portal theme prefixes every .modal-header with its own FontAwesome glyph
   (theme-override.css: .modal-header:before, content "\f0ca"), which lands right
   next to this modal's own fa-ticket icon. Centre the header row so both glyphs
   sit on the same line as the title, and give the theme glyph the same 8px
   rhythm the .modal-title flex gap already uses — the header then has one
   spacing value instead of the theme's 0.3rem plus a utility margin. */
.hms-sr-modal .modal-header {
    align-items: center;
}

    .hms-sr-modal .modal-header:before {
        margin-right: 8px;
    }

/* Icons inside the title are spaced by this gap alone — no mr-* utility on them,
   or the spacing doubles up. */
.hms-sr-modal .modal-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hms-sr-modal-subtitle {
    color: #6c757d;
    font-size: 13px;
    font-weight: 400;
}

/* Hero strip */
.hms-sr-hero {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hms-sr-hero-tile {
    flex: 1 1 0;
    min-width: 120px;
    border: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}

.hms-sr-hero-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.hms-sr-hero-label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: 4px;
}

.hms-sr-hero-ok {
    background: #f2fbf6;
    border-color: #badbcc;
}

    .hms-sr-hero-ok .hms-sr-hero-value {
        color: #0f5132;
    }

.hms-sr-hero-warning {
    background: #fffbeb;
    border-color: #ffe69c;
}

    .hms-sr-hero-warning .hms-sr-hero-value {
        color: #997404;
    }

.hms-sr-hero-danger {
    background: #fdf0f1;
    border-color: #f5c2c7;
}

    .hms-sr-hero-danger .hms-sr-hero-value {
        color: #b02a37;
    }

/* Info cards */
.hms-sr-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 14px 16px;
    height: 100%;
    background: #fff;
}

.hms-sr-card-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: 10px;
}

.hms-sr-field {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed #f1f3f5;
    font-size: 13px;
}

    .hms-sr-field:last-child {
        border-bottom: none;
    }

.hms-sr-field-label {
    color: #6c757d;
    white-space: nowrap;
}

.hms-sr-field-value {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* Renewal progress steps */
.hms-sr-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hms-sr-step {
    flex: 1 1 0;
    min-width: 130px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfbfc;
    opacity: .75;
}

    .hms-sr-step.done {
        opacity: 1;
        border-color: #9ec5fe;
        background: #f2f7ff;
    }

    .hms-sr-step.danger.done {
        border-color: #f5c2c7;
        background: #fdf0f1;
    }

    .hms-sr-step.success.done {
        border-color: #badbcc;
        background: #f2fbf6;
    }

.hms-sr-step-icon {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 4px;
}

.hms-sr-step.done .hms-sr-step-icon {
    color: #084298;
}

.hms-sr-step.danger.done .hms-sr-step-icon {
    color: #b02a37;
}

.hms-sr-step.success.done .hms-sr-step-icon {
    color: #0f5132;
}

.hms-sr-step-title {
    font-size: 12px;
    font-weight: 700;
}

.hms-sr-step-time {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

/* Status / priority tags (tickets table + detail modal) */
.hms-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Status colors */
.hms-st-open {
    background: #e9ecef;
    color: #495057;
}

.hms-st-inprogress {
    background: #cfe2ff;
    color: #084298;
}

.hms-st-reminded {
    background: #f7d6e6;
    color: #ab296a;
}

.hms-st-escalated {
    background: #e2d9f3;
    color: #59359a;
}

.hms-st-completed {
    background: #d2f4ea;
    color: #0c6e5d;
}

.hms-st-closed {
    background: #d1e7dd;
    color: #0f5132;
}

/* Priority colors */
.hms-pr-low {
    background: #e9ecef;
    color: #495057;
}

.hms-pr-medium {
    background: #cfe2ff;
    color: #084298;
}

.hms-pr-high {
    background: #ffe5d0;
    color: #984c0c;
}

.hms-pr-critical {
    background: #f8d7da;
    color: #842029;
}

/* Selects rendered as colored tags (detail modal hero strip). The color pair
   comes from the hms-st-* / hms-pr-* class bound to the current value. */
select.form-control.hms-tag-select {
    font-weight: 600;
    border-radius: 8px;
    border-color: rgba(0, 0, 0, .1);
}

    /* Keep the dropdown list readable regardless of the select's tag color. */
    select.form-control.hms-tag-select option {
        background: #fff;
        color: #212529;
        font-weight: 400;
    }

/* Activity log */
.hms-sr-log-scroll {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.hms-sr-log {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .hms-sr-log li {
        display: flex;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px dashed #f1f3f5;
    }

        .hms-sr-log li:last-child {
            border-bottom: none;
        }

.hms-sr-log-icon {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hms-sr-log-content {
    flex: 1;
}

.hms-sr-log-time {
    color: #6c757d;
    margin-left: 8px;
    font-size: 12px;
}

.hms-sr-log-type {
    font-weight: 600;
}

.hms-sr-log-user {
    color: #495057;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

    .hms-sr-log-user .fa {
        font-size: 11px;
        color: #6c757d;
    }

.hms-sr-log-message {
    font-size: 13px;
    color: #495057;
    margin-top: 2px;
}

/* ----- Merged Customer Success command centre (page tabs) -----
   The tabs reuse the platform Workflow Manager markup (.nav-tabs.nav-style-pill),
   so they inherit the portal theme; only the icon spacing is set here. */

.hms-cs-tabs .nav-tabs .nav-link .fa {
    margin-right: 6px;
}

.hms-cs-tab-content {
    min-height: 320px;
}

/* ----- Auto Execute tab ----- */

.hms-cs-pipeline-badge {
    margin-right: 4px;
    font-weight: 600;
}

/* Enable / Enable Failure Notification checkboxes of the auto execute modal.
   The cron editor above them ends with .cron-explanation-text, so the group keeps a
   clear gap from it and the two checkboxes are spaced evenly. */
.hms-cs-auto-execute-checks {
    margin-top: 18px;
    margin-bottom: 6px;
}

.hms-cs-auto-execute-check {
    margin-bottom: 10px;
}

    .hms-cs-auto-execute-check:last-child {
        margin-bottom: 0;
    }

    .hms-cs-auto-execute-check .custom-control-label {
        cursor: pointer;
        padding-left: 4px;
    }

/* One "select a ticket pipeline" row of the auto execute modal. */
.hms-cs-auto-execute-pipeline {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

/* ----- Auto Execute run logs modal -----
   The expanded body of one run: what the schedule did, then the execution of every Ticket
   Pipeline it started. The 14px rhythm is the same the section cards use. */

.hms-cs-run-log-detail {
    padding: 14px;
    background: #fbfbfc;
}

.hms-cs-run-log-section + .hms-cs-run-log-section {
    margin-top: 14px;
}

.hms-cs-run-log-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.hms-cs-run-log-pre {
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8f9fa;
    font-size: 12px;
    padding: 12px;
}

.hms-cs-run-log-message {
    max-width: 420px;
    word-break: break-word;
}

.hms-cs-auto-execute-remove {
    flex: 0 0 auto;
    margin-bottom: 1px;
}

/* ----- Workflow detail execution logs (Tabulator) -----
   A Tabulator cell is one ellipsised line; the Message column carries a run message with
   its error underneath, so that column keeps wrapping. The expanded execution log is
   appended below the cells of its own row and reuses the run log body above. */

.hms-cs-run-log-message-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.tabulator-row .hms-cs-run-log-detail {
    border-top: 1px solid #ddd;
}

/* ----- Section card layout -----
   One uniform gap between every section card, horizontally and vertically.
   14px is the Glem Task Board spacing standard (.kanban-board gap in board.css),
   so the detail views read the same as the board columns. */

.hms-cs-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hms-cs-section-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch; /* side-by-side cards share equal height */
}

.hms-cs-section-col {
    display: flex;
    flex: 1 1 0;
    min-width: 320px;
}

    .hms-cs-section-col > .hms-sr-card {
        flex: 1 1 auto;
    }

.hms-sr-ai-description {
    white-space: pre-wrap;
    line-height: 1.5;
    color: #495057;
}