/**
 * Rules — inner-tab strip + per-category editors.
 * Class prefix: gl-rules-  (scoped so governance.css outer-tab rules unaffected).
 */

.gl-rules-inner-tabs.nav-tabs {
    margin: 0 0 0.25rem;
    border-bottom-width: 1px;
}

.gl-rules-inner-tabs .nav-link {
    font-size: 0.9rem;
    padding: 0.35rem 0.85rem;
}

/* Override shared-accounts.css `.tab-pane { padding: 25px }` for rules panes. */
.gl-rules-inner-content > .tab-pane {
    padding: 0;
}

#updateAccountAccessRulesPane {
    margin: 0 !important;
    padding: 0 !important;
}
/* Org page: 25px outer padding matches Govern Limits' indent. */
.gl-org-mgmt #orgAccessRulesPane {
    margin: 0 !important;
    padding: 0 25px !important;
}
/* Org page only: extra 1rem indent on toolbar + form mounts to align with Govern Limits' inner container. */
.gl-org-mgmt #orgAccessRulesPane .gl-actionbar,
.gl-org-mgmt #orgAccessRulesPane .gl-rules-rate__mount,
.gl-org-mgmt #orgAccessRulesPane .gl-rules-time__mount,
.gl-org-mgmt #orgAccessRulesPane .gl-rules-geo__mount,
.gl-org-mgmt #orgAccessRulesPane .gl-rules-ip__mount {
    padding-left: 1rem;
    padding-right: 1rem;
}
.gl-org-mgmt #orgAccessRulesPane > .gl-rules-inner-tabs,
#updateAccountAccessRulesPane > .gl-rules-inner-tabs {
    margin-top: 0 !important;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0 !important;
}
.gl-org-mgmt #orgAccessRulesPane > .gl-rules-inner-content,
#updateAccountAccessRulesPane > .gl-rules-inner-content {
    padding: 0;
}


/* Per-editor top-of-pane spacing. */
#orgAccessRulesPane .howto-panel,
#updateAccountAccessRulesPane .howto-panel {
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
}
#orgAccessRulesPane .gl-actionbar {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}
#updateAccountAccessRulesPane .gl-actionbar {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

.gl-actionbar--modal {
    margin-bottom: 0.25rem !important;
}

/* Save Access Rules toolbar — flush within #orgAccessRulesPane's 25px padding. */
.gl-access-rules-save-toolbar {
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0 0.75rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
}

/* Dirty-state indicator dot on tab buttons. */
.gl-tab-dirty::after {
    content: '\2022';    /* bullet • */
    color: #f0ad4e;
    margin-left: 0.4rem;
    font-size: 1.2em;
    line-height: 0;
    vertical-align: middle;
}

/* Modal-level "Unsaved changes" pill in the Update Account modal header. */
.gl-modal-dirty-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    margin-left: 0.75rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    vertical-align: middle;
}
.gl-modal-dirty-pill--dirty {
    background-color: #f0ad4e;
    color: #fff;
}
.gl-modal-dirty-pill--clean {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}
.gl-modal-dirty-pill--errors {
    background-color: #dc3545;
    color: #fff;
}

/* General-tab Revert area — kill pane padding so Revert sits flush under the tab strip. */
#updateAccountGeneralPane {
    margin: 0 !important;
    padding: 0 !important;
}
.gl-modal-tab-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: -0.75rem 0 0;  /* cancel outer tabs' mb-3 */
}
.gl-modal-tab-actionbar [data-role="status"] {
    line-height: 1.4;
    margin: 0;
}
#updateAccountGeneralPane > .gl-actionbar__sep {
    margin: 0.25rem 0;
}

/* Modal action bar — vertical stack: [feedback] <hr> [dropdowns]. */
.gl-actionbar--modal {
    display: block;
}
.gl-actionbar--modal .gl-actionbar__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 0.25rem;
}
.gl-actionbar__sep,
.gl-actionbar--modal .gl-actionbar__sep {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 0.5rem 0;
    opacity: 1;
}
.gl-actionbar--modal .gl-actionbar__feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
/* Override Bootstrap ms-auto !important on the status span. */
.gl-actionbar--modal .gl-actionbar__feedback > * {
    margin: 0 !important;
    align-self: center;
}
.gl-actionbar--modal .gl-actionbar__feedback [data-role="status"] {
    line-height: 1.4;
}

/* Per-inner-tab error count badge. */
.gl-rules-tab-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    vertical-align: middle;
}

/* ============================================================
   Rate rule category editor
   ============================================================ */

.gl-rules-rate {
    padding: 0;
}

/* Flat section — no card chrome; header gets a thin bottom-border. */
.gl-rules-rate__group {
    padding: 0;
    margin-bottom: 0.75rem;
    background: transparent;
    border: none;
}

.gl-rules-rate__group-heading {
    margin: 0 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gl-color-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.gl-rules-rate__group-error {
    margin-bottom: 0.5rem;
}

.gl-rules-rate__rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gl-rules-rate__row {
    padding: 0.25rem 0;
}

.gl-rules-rate__label {
    min-width: 110px;
    font-size: 0.875rem;
    color: #495057;
}

.gl-rules-rate__input-wrap {
    max-width: 280px;
}

.gl-rules-rate__input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.15);
}

.gl-rules-rate__mount {
    padding: 0;
}

/* ============================================================
   Time rule category editor
   ============================================================ */

.gl-rules-time__list {
    padding: 0;
    margin-bottom: 0.75rem;
    background: transparent;
    border: none;
}

.gl-rules-time__list-heading {
    margin: 0 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gl-color-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.gl-rules-time__list-error {
    margin-bottom: 0.5rem;
}

/* List items — full-width rows, clearer than chips for multi-field entries. */
.gl-rules-time__items {
    min-height: 1rem;
}

.gl-rules-time__item {
    padding: 0.5rem 0.6rem 0.5rem 0.75rem;
    background: #f8fbff;
    border: 1px solid #d8e6f7;
    border-left: 3px solid #1976d2;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    color: #0d47a1;
}

.gl-rules-time__item.is-invalid {
    background: #fdecea;
    color: #b71c1c;
    border-color: #f5c6cb;
    border-left-color: #c62828;
}

.gl-rules-time__item-summary {
    line-height: 1.3;
}

.gl-rules-time__item-actions .btn-link {
    color: inherit;
    text-decoration: none;
}

.gl-rules-time__item-actions .btn-link:hover {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 0.2rem;
}

.gl-rules-time__item-x.btn-link {
    color: #c62828;
}

.gl-rules-time__add-btn {
    margin-top: 0.25rem;
}

/* ============================================================
   Combobox — generic always-openable filtered dropdown.
   Used by TimeEntryModal (timezone picker) + geo country picker.
   ============================================================ */
.gl-combo {
    position: relative;
}

.gl-combo__arrow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1.75rem;
    border: none;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
}

.gl-combo__arrow:hover { color: #495057; }

.gl-combo__input {
    padding-right: 1.75rem;   /* leave room for the arrow */
}

.gl-combo__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--gl-color-border, #ced4da);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    z-index: 1080;   /* above bootstrap modal content */
}

.gl-combo__option {
    padding: 0.25rem 0.6rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.gl-combo__option:hover,
.gl-combo__option.is-active {
    background: #e7f1ff;
}

.gl-combo__empty {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
}

/* ============================================================
   TimeEntryModal
   ============================================================ */
.gl-time-modal__field { margin-bottom: 1rem; }

.gl-time-modal__days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gl-time-modal__day {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: #f8f9fa;
    border: 1px solid var(--gl-color-border, #ced4da);
    border-radius: 0.25rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
}

.gl-time-modal__day:has(input:checked) {
    background: #e7f1ff;
    border-color: #bbdefb;
    color: #0d47a1;
}

.gl-time-modal__times { margin-bottom: 1rem; }

/* ============================================================
   Geo rule category editor
   ============================================================ */

.gl-rules-geo__list {
    padding: 0;
    margin-bottom: 0.75rem;
    background: transparent;
    border: none;
}

.gl-rules-geo__list-heading {
    margin: 0 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gl-color-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.gl-rules-geo__list-error,
.gl-rules-geo__cross-error {
    margin-bottom: 0.5rem;
}

.gl-rules-geo__picker-input {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

.gl-rules-geo__chips {
    min-height: 1.5rem;
}

/* Baby blue chip (sky-100 background, sky-700 text, sky-300 border). Override
   Bootstrap's bg-light + text-dark + border with !important since those are
   applied via class on the chip element from the form handler. */
.gl-rules-geo__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    background-color: #e0f2fe !important;  /* sky-100 */
    color: #0c4a6e !important;             /* sky-900 */
    border-color: #7dd3fc !important;      /* sky-300 */
}

.gl-rules-geo__chip.is-invalid {
    border-color: #dc3545 !important;
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

.gl-rules-geo__chip-x {
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    margin-left: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gl-rules-geo__chip-x:hover,
.gl-rules-geo__chip-x:focus-visible {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.12);
    outline: none;
}

/* ============================================================
   IP rule category editor
   ============================================================ */

.gl-rules-ip__list {
    padding: 0;
    margin-bottom: 0.75rem;
    background: transparent;
    border: none;
}

.gl-rules-ip__list-heading {
    margin: 0 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gl-color-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.gl-rules-ip__list-error,
.gl-rules-ip__cross-error {
    margin-bottom: 0.5rem;
}

.gl-rules-ip__picker-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.85rem;
}

.gl-rules-ip__chips {
    min-height: 1.5rem;
}

/* Baby blue chip — same palette as geo for visual consistency. */
.gl-rules-ip__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 500;
    background-color: #e0f2fe !important;
    color: #0c4a6e !important;
    border-color: #7dd3fc !important;
}

.gl-rules-ip__chip.is-invalid {
    border-color: #dc3545 !important;
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

.gl-rules-ip__chip-x {
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    margin-left: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gl-rules-ip__chip-x:hover,
.gl-rules-ip__chip-x:focus-visible {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.12);
    outline: none;
}