/**
 * Governance components — shared styles
 * Class prefix: gl-  (Govern Limits)
 *
 * Kept intentionally minimal; relies on Bootstrap 5 utility classes where
 * possible. Colors use CSS custom properties so the portal theme can
 * override them at app level.
 */

:root {
    --gl-color-border: #dee2e6;
    --gl-color-bg-muted: #f8f9fa;
}

/* ---------------------------- EndpointLimitsEditor -------------------------- */

.gl-ep-editor {
    border: 1px dashed var(--gl-color-border);
    border-radius: 0.375rem;
    padding: 0.75rem;
    background: var(--gl-color-bg-muted);
}
.gl-ep-editor--disabled {
    background: #f1f3f5;
}
/* Endpoint name column needs a min-width so friendly labels stay on one line. */
.gl-ep-editor__table th:first-child,
.gl-ep-editor__table td.gl-ep-editor__name {
    min-width: 180px;
}
/* Trailing clear-button cell has a fixed compact width. */
.gl-ep-editor__table td.gl-ep-editor__action-cell {
    width: 48px;
}

/* --------------------------- ConfirmChangeModal ----------------------------- */

/* When stacked on top of another modal (e.g. unsaved-changes prompt over the
   Time Entry modal), bump z-index above Bootstrap's default 1055 so clicks
   land on the confirm dialog instead of the underlying modal. */
.gl-confirm-modal {
    z-index: 1090;
}

.gl-confirm-modal__items {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
    font-size: 0.9rem;
    max-height: 200px;
    overflow-y: auto;
}

/* Override Bootstrap's bg-warning to a calmer amber. !important required
   because Bootstrap's own .bg-warning rule uses !important. */
.gl-confirm-modal .modal-header.bg-warning {
    background-color: #fdf3d8 !important;
    color: #6b4e00 !important;
    border-bottom: 1px solid #f1d877;
}
.gl-confirm-modal .modal-header.bg-warning .modal-title,
.gl-confirm-modal .modal-header.bg-warning .modal-title i {
    color: #6b4e00;
}
.gl-confirm-modal .modal-header.bg-warning .btn-close {
    /* Bootstrap's white close-icon on amber is invisible — switch to dark. */
    filter: none;
}

/* --------------------------- Flat-table layout ------------------------------ */

/* Each section is a <details> with a <summary> heading.
   The sections (category-level, api_calls_by_endpoint,
   api_fails_by_endpoint) are all collapsible, open by default. */
.gl-table__section {
    margin-bottom: 1rem;
}

.gl-table__section + .gl-table__section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--gl-color-border);
}

/* <summary> acts as the section heading. Show a chevron to hint at
   collapse/expand, bigger click target. */
.gl-table__section-heading {
    list-style: none;                /* hide default disclosure triangle */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gl-color-border);
    font-weight: 600;
    font-size: 0.95rem;
    color: #495057;
    user-select: none;
}
.gl-table__section-heading::-webkit-details-marker { display: none; }
.gl-table__section-heading::before {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    color: #6c757d;
    margin-right: 0.5rem;
    transition: transform 0.15s ease;
}
.gl-table__section:not([open]) > .gl-table__section-heading::before {
    transform: rotate(-90deg);
}
.gl-table__section-heading:hover {
    background: var(--gl-color-bg-muted);
}
/* Muted monospace subtitle (e.g. "15s · 1min · 2min") next to per-endpoint
   section titles — tells admins the window durations in one glance. */
.gl-table__section-subtitle {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    margin-left: 0.5rem;
}
.gl-table__section-subtitle::before {
    content: '\00b7';
    margin-right: 0.5rem;
    color: #adb5bd;
}
/* Bolded "system default" prefix needs a darker color too — otherwise it
   inherits the subtitle's #6c757d gray and bold-on-gray is too subtle to
   notice at 0.75rem monospace. */
.gl-table__section-subtitle > strong {
    color: #343a40;
    font-weight: 700;
}
/* The per-endpoint intro paragraph is the explanation of the fallback chain;
   the whole thing reads as one emphasized sentence so customers see it at a
   glance. Overrides Bootstrap's `text-muted` gray. */
.gl-ep-editor__intro {
    color: #343a40 !important;
    font-weight: 600;
}

/* The "How to use" panel styles now live in main.css as the shared
   `.howto-panel` component (renamed from `.gl-howto`) so other pages
   can reuse it. See `.howto-panel*` rules in assets/css/main.css. */

/* --------------------------- Update-Account modal layout -------------------- */

/* All rules in this block are scoped by an ID selector so they outrank
   Bootstrap's class-only defaults on specificity alone — no !important
   needed. */

/* Zero the top padding on the Update Account modal-body so the tab nav
   sits flush against the modal header (Bootstrap default is 1rem all around). */
#updateAccountModal .modal-body {
    padding-top: 0;
}
/* Also trim the modal-header's bottom padding so there's no gap between the
   header title/close button row and the tab nav below. */
#updateAccountModal .modal-header {
    padding-bottom: 0.5rem;
}

/* Drop modal-body's default 1rem top padding so the sticky tab strip below
   pins flush against the header — otherwise content scrolls through the
   16px gap above the pinned strip (visible bleed between header and tabs). */
#ownershipUpdateAccountModal .modal-body {
    padding-top: 0;
}

/* Small breathing room above the inline-error banner when shown — the
   modal-body padding-top:0 above otherwise puts the banner flush against
   the purple header. */
#ownershipUpdateAccountModal #updateModalErrorContainer {
    margin-top: 3px;
}

/* Modal's tab-nav → Govern Limits content gap: snap to zero.
   Also pin to the top of the scrollable modal-body so the General / Govern
   Limits tabs stay visible while the user scrolls dense content (e.g. the
   18 per-endpoint rows). */
#updateAccountModalTabs.nav-tabs {
    margin-bottom: 0;
    border-bottom-width: 1px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    /* Subtle shadow so scrolling content doesn't appear to slide through
       the pinned tab strip. */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Govern Limits tab pane: rely on Bootstrap's .modal-body 1rem L/R padding. */
#updateAccountGovernLimitsPane {
    margin: 0;
    padding: 0;
}
#updateAccountGovernLimitsMount,
#governLimitsContainer {
    margin: 0;
    padding: 0;
}

/* --------------------------- Org Management page layout -------------------- */

/* Zero horizontal padding on the .white-background-container so the
   How-to-use blue panel sits flush with the container edges. Children
   (tab nav, descriptions, govern-limits table host) add their own L/R
   padding below where visual indent is wanted. Scoped to .gl-org-mgmt
   so other pages that use .white-background-container keep their padding. */
.white-background-container.gl-org-mgmt {
    padding: 0.75rem 0;
}
.gl-org-mgmt > #orgManagementTabs.nav-tabs {
    margin: 0 1rem;
    padding: 0;
    border-bottom-width: 1px;
}
.gl-org-mgmt > .tab-content {
    padding-top: 0;
    margin-top: 0;
}
.gl-org-mgmt #orgSubscriptionPane {
    padding: 0 1rem;
}
.gl-org-mgmt #orgGeneralPane {
    padding: 0 1rem;
}
.gl-org-mgmt__subtitle {
    margin: 6px 0 8px;
}
/* Govern-limits table host needs its own L/R padding on the org page since
   there's no modal-body to provide it. Class+ID specificity (1,1,0) beats
   the plain `#governLimitsContainer` rule (1,0,0) above — no !important. */
.gl-org-mgmt #governLimitsContainer {
    padding: 0 1rem;
}

/* --------------------------- Clear-row button ------------------------------- */

.gl-categories-table__clear-cell {
    text-align: center;
    width: 36px;
}
.gl-categories-table__clear {
    color: #6c757d;
    text-decoration: none;
}
.gl-categories-table__clear:hover:not(:disabled) {
    color: #dc3545;
}
.gl-categories-table__clear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Category-level flat table (5 top-level PeriodThresholds rows). */
.gl-categories-table {
    margin-bottom: 0;
}

.gl-categories-table th {
    font-size: 0.82rem;
    /* Match the endpoint table's Bootstrap-default th weight/color so the
       two tables look consistent when viewed side-by-side. */
    font-weight: 700;
    color: #212529;
    background: var(--gl-color-bg-muted);
    border-bottom: 1px solid var(--gl-color-border);
    white-space: nowrap;
}

.gl-categories-table td {
    vertical-align: middle;
}

.gl-categories-table__name {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.875rem;
    white-space: nowrap;
}
/* Sub-line showing the per-metric window durations (short · medium · long). */
/* Per-input footer line: "5s · permitted 200 if empty" — sits directly under
   each PERIOD column's input so admins see the window duration and the system
   fallback value at the exact point where they're deciding to override.
   The number itself is bolded (via <strong>) so the eye lands on it first. */
.gl-categories-table__field-meta {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    margin-top: 4px;
    color: #6c757d;
    letter-spacing: 0.02em;
}
.gl-categories-table__field-meta > strong {
    color: #343a40;
    font-weight: 700;
}

.gl-categories-table tr.is-invalid {
    background: rgba(220, 53, 69, 0.05);
}

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

/* Mirror the category-level invalid styling on the per-endpoint editor, so
   validation errors are equally visible in both sections. */
.gl-ep-editor__table tr.is-invalid {
    background: rgba(220, 53, 69, 0.05);
}
.gl-ep-editor__input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.15);
}

/* --------------------------- Info popover icon ------------------------------ */

.gl-info {
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    border: none;
    background: transparent;
}

.gl-info:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 2px;
}

.gl-info i {
    font-size: 0.85rem;
}

/* --------------------------- Modal action bar -------------------------------
   The modal action bar (Resolve strategy + status) used to render as a gray
   pill that visually "boxed in" the controls. Govern Limits and Access Rules
   should both look like the controls sit inline with the rest of the form —
   no extra container chrome — for a tighter, more professional layout. */
.gl-actionbar--modal {
    padding: 0.25rem 0;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--gl-color-border);
}