/* ------------------------------------------------------------------
   Replacements for former Telerik (RadControls) presentational widgets.
   Plain HTML/CSS/JS components used across the site:
     - .rr-tabstrip / .rr-multipage  (was RadTabStrip / RadMultiPage)
     - .rr-leftnav                   (was RadPanelBar)
     - .rr-modal                     (was RadWindow / RadWindowManager)
   Prefix "rr-" = rad replacement.
   ------------------------------------------------------------------ */

/* ---- Tab strip -------------------------------------------------- */
.rr-tabstrip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}
.rr-tabstrip .rr-tab {
    padding: 8px 16px;
    cursor: pointer;
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 2px;
    color: #333;
    text-decoration: none;
    display: inline-block;
}
.rr-tabstrip .rr-tab.active {
    background: #fff;
    font-weight: bold;
}
.rr-tabstrip .rr-tab[hidden] { display: none; }

/* Contact Us server-side tabs (former RadTabStrip; styled by .TabStripContact
   in global.css). Make the LinkButton fill the tab and drop link decoration,
   and reproduce the former Telerik hover class via :hover.

   The list shrinks to its widest tab and the labels are right aligned. Both
   came from Telerik's own skin stylesheet, which was served out of the
   assembly via WebResource.axd and left with it:
     .RadTabStripVertical         -> display: inline-block  (shrink to fit)
     .RadTabStripVertical .rtsLink -> text-align: right
   Restated here so the list matches production. */
.TabStripContactList { display: inline-block; }
.TabStripContact a.rr-tab-link { display: block; color: inherit; text-decoration: none; cursor: pointer; text-align: right; }
.TabStripContact:hover { background: rgba(255, 255, 255, 0.75); color: #15389e; }

/* ---- Multi page ------------------------------------------------- */
.rr-multipage .rr-pageview { display: none; }
.rr-multipage .rr-pageview.active { display: block; }

/* ---- Left navigation menu (former RadPanelBar) ------------------ */
.rr-leftnav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 168px;
}
.rr-leftnav li { margin: 0; padding: 0; }
.rr-leftnav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border-bottom: 1px solid #d9d9d9;
    color: #333;
}
.rr-leftnav li a:hover,
.rr-leftnav li a.selected {
    background: #eaeaea;
    font-weight: bold;
}

/* ---- Async loading indicator (former RadAjaxLoadingPanel) ------- */
.rr-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: #333;
    font-weight: bold;
}
.rr-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid #ccc;
    border-top-color: #15389e;
    border-radius: 50%;
    animation: rr-spin 0.8s linear infinite;
}
@keyframes rr-spin { to { transform: rotate(360deg); } }

/* ---- Results grid (former RadGrid) ------------------------------ */
.rr-grid {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
}
.rr-grid th,
.rr-grid td {
    padding: 6px 10px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}
.rr-grid th {
    background: #f2f2f2;
    border-bottom: 2px solid #ccc;
}
.rr-grid th a { color: #333; text-decoration: none; }
.rr-grid th a:hover { text-decoration: underline; }
.rr-grid tr:hover td { background: #f7f7f7; }
.rr-grid .rr-grid-pager td { background: #fafafa; border-top: 1px solid #ccc; }
.rr-grid .rr-grid-pager a,
.rr-grid .rr-grid-pager span { padding: 2px 6px; }

/* ---- Modal dialog (former RadWindow / RadWindowManager) --------- */
.rr-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
.rr-modal-overlay.open { display: block; }
.rr-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    max-width: 95%;
    max-height: 95%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rr-modal-title {
    padding: 10px 14px;
    font-weight: bold;
    background: #f2f2f2;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rr-modal-close {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #666;
}
.rr-modal-body { flex: 1 1 auto; overflow: auto; }
.rr-modal-body iframe { border: 0; width: 100%; height: 100%; display: block; }
.rr-modal-message { padding: 18px 16px; }
.rr-modal-buttons {
    padding: 10px 14px;
    text-align: right;
    border-top: 1px solid #eee;
}
.rr-modal-buttons button {
    padding: 6px 18px;
    cursor: pointer;
}