:root {
    --portal-shell-min-width: 0px;
    --portal-shell-max-width: 1200px;
    --portal-content-min-width: 0px;
    --portal-shell-width: min(100%, var(--portal-shell-max-width));
    --portal-page-gutter: 0px;
    /* Font sizes are rounded to whole pixels: fractional vw-derived sizes
       rasterize unevenly on Windows and make same-size text look mixed. */
    --portal-base-font-size: clamp(12px, round(0.95vw, 1px), 13px);
    --portal-table-font-size: clamp(11px, round(0.85vw, 1px), 12px);
    --portal-table-header-font-size: clamp(12px, round(0.95vw, 1px), 13px);
    --portal-table-cell-padding: clamp(3px, 0.35vw, 5px);
    /* DataSIM Blacks palette (Warm Grey 4/8) — light tints for muted UI */
    --portal-warm-grey-8: #706357; /* PMS Warm Grey 8 R112 G99 B87 */
    --portal-warm-grey-4: #b0a696; /* PMS Warm Grey 4 R176 G166 B150 */
    --portal-warm-grey-panel: #f9f8f7; /* ~8% Warm Grey 4 on white */
    --portal-warm-grey-header: #f1efeb; /* ~18% Warm Grey 4 on white */
    --portal-warm-grey-border: #e3e0da; /* ~35% Warm Grey 4 on white */
    /* Tabs + table headers (Chrome-tuned 2026-08-08) */
    --portal-chrome-header-bg: #7D7472;
    --portal-chrome-header-line: transparent;
    --portal-chrome-header-text: #ffffff;
    --portal-chrome-accent: #005A8C;
    --portal-chrome-danger: #cc3333; /* red accent (progress / alerts) */
    --portal-chrome-dark: #7D7472; /* legacy alias → header fill */
}

html {
    min-height: 100%;
    overscroll-behavior-y: none;
    overflow-x: hidden;
    /* Keep the vertical scrollbar gutter reserved so the centered shell does
       not shift sideways when page content grows past the viewport. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
    /* Browser-like scale (not font-size): 90% of the previous portal size. */
    zoom: 0.9;
}

body {
    background-color: #ffffff;
    overflow-x: hidden;
}

body {
    font-size: var(--portal-base-font-size);
}

#container_window_main,
#container_menu_top,
#container_window_padding_1,
#container_window_padding_2 {
    width: 100%;
    min-width: var(--portal-shell-min-width);
    max-width: 100%;
    box-sizing: border-box;
}

#container_page {
    width: var(--portal-shell-width);
    min-width: var(--portal-shell-min-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: calc(100vh / 0.9);
    display: flex;
    flex-direction: column;
}

#sticky,
.sticky-wrapper {
    position: relative;
    background-color: transparent;
    z-index: 100;
    overflow: visible;
}

/*
 * jquery.sticky sets #sticky to position:fixed without a width. Under html zoom,
 * that shrink-to-fit width collapses (~1200px → ~990px) and the appbar utility
 * (margin-left:auto) slides left. Keep the pinned bar on the centered shell.
 */
.sticky-wrapper.is-sticky > #sticky {
    width: var(--portal-shell-width);
    max-width: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#sticky::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    right: 0;
    width: auto;
    background-color: #330066;
    box-shadow: 0 0 0 100vmax #330066;
    clip-path: inset(0 -100vmax);
    z-index: -1;
}

#container_banner,
#container_window_menu {
    position: relative;
    background-color: transparent;
    z-index: 0;
    margin: 0;
}

#container_banner {
    height: auto;
    min-height: 50px;
    overflow: visible;
    background-color: #330066;
    background-image: none;
}

.portal-appbar-row {
    --portal-appbar-row-min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--portal-appbar-row-min-height);
    box-sizing: border-box;
    /* Containing block for login progress overlay. */
    position: relative;
    /* Left pad 0 so the logo lines up with page content (tabs/tables). */
    padding: 4px 10px 4px 0;
}

/* Burger sits left of the logo; hidden until compact nav (<=899px). */
.portal-nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.portal-nav-burger:hover,
.portal-nav-burger:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.portal-nav-burger-lines,
.portal-nav-burger-lines::before,
.portal-nav-burger-lines::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.portal-nav-burger-lines {
    position: relative;
}

.portal-nav-burger-lines::before,
.portal-nav-burger-lines::after {
    content: "";
    position: absolute;
    left: 0;
}

.portal-nav-burger-lines::before {
    top: -6px;
}

.portal-nav-burger-lines::after {
    top: 6px;
}

.portal-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: auto;
    float: none;
    padding: 0 4px 0 0;
}

#menu_top_left {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

.portal-logo {
    display: block;
    width: auto;
    height: 20px;
    max-width: 128px;
}

#container_window_menu {
    flex: 0 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    overflow: visible;
    /* Optical: wordmark sits slightly low in the logo asset box. */
    transform: translateY(2px);
}

.portal-top-nav-primary,
#menu_table.portal-top-nav-primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    background-color: transparent !important;
    border: 0;
}

/* Wide layout: panel is transparent to flex so links + SIM sit in one row. */
.portal-top-nav-panel {
    display: contents;
}

.portal-top-nav-links {
    display: contents;
}

.portal-sim-slot-inline {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.portal-sim-slot-drawer {
    display: none;
}

.portal-top-nav-primary .menu_div,
.portal-top-nav-primary .menu_div_selected,
.portal-top-nav-primary .window_menu_div {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 3px;
    box-sizing: border-box;
}

.portal-top-nav-primary .window_menu_link,
.portal-top-nav-primary .menu_div a,
.portal-top-nav-primary .menu_div_selected a {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    line-height: 1.2;
    font-size: 13px;
}

#sim_menu_cell {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 24px;
    margin-left: 2px;
    padding: 0;
    border-radius: 3px;
    background-color: #000000;
    overflow: visible;
}

.sim-view-history-menu-holder {
    display: inline-flex;
    align-items: center;
    position: static;
    width: auto;
    max-width: none;
}

#sim_menu_div {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0;
    width: auto;
    max-width: none;
    white-space: nowrap;
}

#sim_menu_div .sim-menu-iccid,
#sim_menu_div .sim_menu_link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Keep arrow padding fixed: #sim_menu_cell:hover .sim_menu_link otherwise
   overrides toggle padding and shifts the glyph on rollover. */
#sim_menu_div .sim-view-history-toggle,
#sim_menu_div .sim-view-history-toggle:hover,
#sim_menu_div .sim-view-history-toggle:active,
#sim_menu_div .sim-view-history-toggle:visited,
#sim_menu_cell:hover .sim-view-history-toggle,
#sim_menu_cell.sim_menu_cell_selected .sim-view-history-toggle,
#sim_menu_cell.sim_menu_cell_selected:hover .sim-view-history-toggle {
    position: static;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    justify-content: center;
    padding: 0 !important;
    margin: 0;
}

/* Centered under the sticky header, outside the SIM cell so hover cannot
   reflow the ICCID/arrow layout. */
#sticky > #simViewHistory,
#simViewHistory {
    position: absolute;
    left: 50%;
    right: auto;
    top: 100%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: min(780px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    margin: 2px 0 0;
    z-index: 5000;
    background-color: white;
    overflow-x: auto;
}

/* Default: flex gap between nav and utility (compressed once the menu is in). */
#menu_loader.portal-appbar-progress,
.portal-appbar-progress {
    display: block;
    flex: 1 1 auto;
    align-self: center;
    position: relative;
    z-index: 1;
    min-width: 24px;
    height: 2px;
    margin: 0 8px;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* Login only: full-width strip behind the nav. Pin to the single-row appbar
   bottom (not bottom:0 of a growing row) so Y stays put when the menu mounts. */
#menu_loader.portal-appbar-progress.is-login-overlay,
.portal-appbar-progress.is-login-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--portal-appbar-row-min-height, 50px) - 2px);
    bottom: auto;
    z-index: 2;
    flex: 0 0 auto;
    align-self: auto;
    width: auto;
    min-width: 0;
    margin: 0;
}

.portal-appbar-row > .portal-brand,
.portal-appbar-row > #portal-nav-burger,
.portal-appbar-row > #container_window_menu,
.portal-appbar-row > .portal-appbar-utility {
    position: relative;
    z-index: 3;
}

#menu_loader.portal-appbar-progress.is-active,
.portal-appbar-progress.is-active {
    opacity: 1;
}

#menu_loader.portal-appbar-progress.is-fading,
.portal-appbar-progress.is-fading {
    opacity: 0;
}

.portal-appbar-progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    background-color: #cc3333;
    border-radius: 0;
    transition: width 0.2s ease-out;
}

#menu_loader.portal-appbar-progress.is-complete .portal-appbar-progress-bar,
.portal-appbar-progress.is-complete .portal-appbar-progress-bar {
    transition: width 0.18s ease-out;
}

#pinned_account_code {
    display: inline-flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
    color: #ffffff;
    font-weight: bold;
}

.portal-appbar-utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    /* Keep account/user/logout level with the nudged primary nav. */
    transform: translateY(2px);
}

#menu_top_right,
#logouticon {
    display: inline-flex;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
    padding: 0 !important;
    vertical-align: middle;
}

#logouticon {
    padding-right: 2px !important;
}

#container_window_account_history,
#container_window_main {
    position: relative;
    z-index: 1;
}

.portal-banner-warning-hidden {
    display: none;
}

.portal-banner-warning-visible {
    display: block;
    text-align: center;
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: white;
    font-size: 10px;
    background-color: red;
}

#container_window_main {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 0;
}

#container_menu_top {
    left: 50%;
    transform: translateX(-50%);
    width: var(--portal-shell-width);
}

#container_window_account_history {
    width: 100%;
    min-width: var(--portal-shell-min-width);
    max-width: 100%;
}

.simpage,
#simsearch-bulksearch,
#accountsearch-box,
.content-holder,
.footer-holder,
.applet-header-table,
.applet-header-text {
    margin-left: 0 !important;
    width: 100%;
}

#container_windows > div[id$="_window"],
.portal-window {
    width: 100% !important;
    min-width: var(--portal-shell-min-width);
    max-width: 100%;
    clear: both;
}

.portal-table,
.portal-content-table,
.portal-simdetail-table,
.portal-simtab-table,
.portal-search-form,
.portal-search-errors,
.portal-toolbar,
.portal-detail-table,
.simpage {
    width: 100% !important;
    min-width: var(--portal-content-min-width);
    margin-left: 0;
}

.portal-simdetail-table,
.portal-simtab-table,
.portal-detail-table {
    margin-left: 0;
}

.portal-simdetail-tabs,
.portal-simdetail-tabholder {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Kill legacy .simtabtable td padding that gapped tabs from the table. */
    padding: 0 !important;
    vertical-align: top;
}

.portal-simdetail-tabholder {
    padding: 0 !important;
}

/* Soft busy while another SIM tab is loading: fade content, keep tab bar clickable.
   Wait cursor must stay on the holder (not pointer-events:none on the holder itself),
   matching #simsearch-list.simsearch-results-busy — otherwise the hourglass never shows. */
#simdetail-tabholder.simdetail-tab-busy {
    cursor: wait;
}

#simdetail-tabholder.simdetail-tab-busy > * {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    cursor: wait;
}

/* SIM detail tabs: fit + More, then right-side select ≤419px */
.portal-sim-tabs {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    line-height: normal;
}

.portal-sim-tabs-bar {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    gap: 0;
}

.portal-sim-tabs-primary {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    /* Must stay visible: overflow:hidden clips [data-tip] bubbles (top:-35px).
       Overflowed tabs are hidden via .portal-sim-tab-overflow (display:none). */
    overflow: visible;
}

.portal-sim-tabs-primary > span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.portal-sim-tabs-primary > span.portal-sim-tab-overflow {
    display: none !important;
}

.portal-sim-tabs-more-wrap {
    position: relative;
    flex: 0 0 auto;
    margin-left: 2px;
}

.portal-sim-tabs-more-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #000;
    font: inherit;
    font-weight: bold;
    padding: 3px 6px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

.portal-sim-tabs-more-btn:hover,
.portal-sim-tabs-more-btn:focus-visible {
    text-decoration: underline;
    outline: none;
}

.portal-sim-tabs-more-panel {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 40;
    min-width: 10rem;
    max-width: min(18rem, 80vw);
    max-height: min(60vh, 22rem);
    overflow: auto;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
}

.portal-sim-tabs-more-item {
    display: block;
    padding: 6px 12px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.portal-sim-tabs-more-item:hover,
.portal-sim-tabs-more-item:focus-visible {
    background: #f0f0f0;
    outline: none;
}

.portal-sim-tabs-more-item.is-active {
    background: #000;
    color: #fff;
}

/* Hidden unless select mode — never let a bare display rule override [hidden]. */
.portal-sim-tabs-select,
.portal-sim-tabs-select[hidden],
.portal-sim-tabs:not([data-mode="select"]) .portal-sim-tabs-select {
    display: none !important;
}

.portal-sim-tabs[data-mode="select"] {
    /* Stay in the visible viewport while the shell is wider than the window. */
    position: sticky;
    left: 0;
    justify-content: flex-end;
    align-items: center;
    min-height: 0;
    padding: 0 8px 0 0;
    box-sizing: border-box;
    z-index: 2;
    background: #fff;
}

.portal-sim-tabs[data-mode="select"] .portal-sim-tabs-bar {
    display: none;
}

.portal-sim-tabs[data-mode="select"] .portal-sim-tabs-select:not([hidden]) {
    display: inline-block !important;
    margin: 0 0 0 auto;
    max-width: min(100%, 14rem);
    min-width: 8rem;
    width: auto;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    padding: 2px 6px;
    border: 1px solid #999;
    background: #fff;
    color: #000;
    vertical-align: middle;
}

.portal-sim-tabs-more-panel[hidden] {
    display: none !important;
}

/* SIM detail: keep legacy readability while containing the route to the shell. */
#simcard_window {
    max-width: 100%;
}

/* Keep spacing collapsed even while the tab body is the Loading placeholder.
   Tabs with .table-header temporarily force this via :has(); without a header
   the browser default ~2px spacing insets the SIM block (~4–5px shrink / ~2–3px drop). */
table.simpage {
    min-width: 0 !important;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.portal-simdetail-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-simdetail-table > tbody > tr > td[colspan] {
    min-width: 0;
    max-width: 100%;
}

.portal-simdetail-table .portal-detail-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
}

.portal-simdetail-tabholder .portal-simtab-table,
.portal-simdetail-tabholder .simtabtable,
#simcard_window .portal-simtab-table,
#simcard_window .simtabtable {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-simdetail-tabholder .simtabtable [class*="portal-min-col-"],
#simcard_window .simtabtable [class*="portal-min-col-"] {
    min-width: 0 !important;
    width: auto;
}

/* SIM Tags: read-only list + Manage tags editor (AWS-style). */
.portal-sim-tags-panel {
    max-width: none;
    width: 100%;
}

.portal-sim-tags-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 8px;
}

.portal-sim-tags-heading {
    font-size: 13px;
    font-weight: bold;
    color: #222;
}

.portal-sim-tags-help,
.portal-sim-tags-limit,
.portal-sim-tags-confirm {
    margin: 0 0 10px;
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

.portal-sim-tags-confirm {
    color: #4c0066;
    font-weight: bold;
}

.portal-sim-tags-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
}

.portal-sim-tags-table col.portal-sim-tags-name-col,
.portal-sim-tags-table td.portal-sim-tags-name-col {
    width: 220px;
    min-width: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.portal-sim-tags-table col.portal-sim-tags-value-col,
.portal-sim-tags-table td.portal-sim-tags-value-col {
    width: auto;
    min-width: 0;
    vertical-align: middle;
}

.portal-sim-tags-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.portal-sim-tags-value-field {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 1px dashed #999;
}

.portal-sim-tags-value-row button {
    flex: 0 0 auto;
}

.portal-sim-tags-table input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.portal-sim-tags-value-field input {
    width: 100%;
    border-bottom: 0;
}

.portal-sim-tags-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0 4px;
}

.portal-sim-tags-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.portal-tag-slots-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portal-tag-slots-head,
.portal-tag-slots-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 4.5rem auto 4.75rem;
    align-items: center;
    column-gap: 0.45rem;
    min-height: 26px;
}

.portal-tag-slots-head {
    font-size: 10px;
    font-weight: 600;
    color: #555;
}

.portal-tag-slots-num {
    font-size: 11px;
    color: #555;
    text-align: right;
    white-space: nowrap;
    padding-right: 0.15rem;
}

.portal-tag-slots-count {
    text-align: right;
    font-size: 11px;
    color: #333;
    white-space: nowrap;
}

.portal-tag-slots-arrows {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    min-width: 2.5rem;
}

.portal-tag-slots-arrow {
    min-width: 1.35rem !important;
    padding: 0 0.2rem;
    font-size: 9px;
    line-height: 1.2;
}

.portal-tag-slots-row input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.portal-tag-slots-row > button,
.portal-tag-slots-remove-slot {
    justify-self: end;
    min-height: 24px;
    min-width: 4.75rem;
    box-sizing: border-box;
}

.portal-tag-slots-checking {
    text-align: center;
    padding: 28px 12px;
    color: #555;
}

.portal-tag-slots-add {
    margin-top: 0.45rem;
}

/* Maru CDR usage history: fixed column widths (host-gated markup only). */
.portal-cdr-history-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-cdr-history-table td {
    box-sizing: border-box;
    min-width: 0 !important;
    padding: 2px 6px;
    vertical-align: top;
}

.portal-cdr-history-table .portal-cdr-col-start,
.portal-cdr-history-table col.portal-cdr-col-start { width: 10%; }
.portal-cdr-history-table .portal-cdr-col-bearer,
.portal-cdr-history-table col.portal-cdr-col-bearer { width: 6%; }
.portal-cdr-history-table .portal-cdr-col-direction,
.portal-cdr-history-table col.portal-cdr-col-direction { width: 5%; }
.portal-cdr-history-table .portal-cdr-col-direction { text-align: center; }
.portal-cdr-history-table .portal-cdr-col-description,
.portal-cdr-history-table col.portal-cdr-col-description { width: 13%; }
.portal-cdr-history-table .portal-cdr-col-mccmnc,
.portal-cdr-history-table col.portal-cdr-col-mccmnc { width: 5%; }
.portal-cdr-history-table .portal-cdr-col-country,
.portal-cdr-history-table col.portal-cdr-col-country { width: 7%; }
.portal-cdr-history-table .portal-cdr-col-network,
.portal-cdr-history-table col.portal-cdr-col-network { width: 10%; }
/* Used/Billed headers each span amount+unit; body uses the four cols below. */
.portal-cdr-history-table .portal-cdr-col-used,
.portal-cdr-history-table .portal-cdr-col-billed { text-align: center; }
.portal-cdr-history-table .portal-cdr-col-used-amount,
.portal-cdr-history-table col.portal-cdr-col-used-amount,
.portal-cdr-history-table .portal-cdr-col-billed-amount,
.portal-cdr-history-table col.portal-cdr-col-billed-amount { width: 4%; }
.portal-cdr-history-table .portal-cdr-col-used-amount,
.portal-cdr-history-table .portal-cdr-col-billed-amount { text-align: right; }
.portal-cdr-history-table .portal-cdr-col-used-unit,
.portal-cdr-history-table col.portal-cdr-col-used-unit,
.portal-cdr-history-table .portal-cdr-col-billed-unit,
.portal-cdr-history-table col.portal-cdr-col-billed-unit { width: 3%; }
.portal-cdr-history-table .portal-cdr-col-used-unit,
.portal-cdr-history-table .portal-cdr-col-billed-unit { text-align: left; }
.portal-cdr-history-table .portal-cdr-col-outcome,
.portal-cdr-history-table col.portal-cdr-col-outcome { width: 8%; }
.portal-cdr-history-table .portal-cdr-col-status,
.portal-cdr-history-table col.portal-cdr-col-status { width: 10%; }
.portal-cdr-history-table .portal-cdr-col-sms-updated,
.portal-cdr-history-table col.portal-cdr-col-sms-updated { width: 8%; }

.portal-cdr-history-table .portal-cdr-col-start,
.portal-cdr-history-table .portal-cdr-col-status,
.portal-cdr-history-table .portal-cdr-col-bearer,
.portal-cdr-history-table .portal-cdr-col-direction,
.portal-cdr-history-table .portal-cdr-col-mccmnc,
.portal-cdr-history-table .portal-cdr-col-country,
.portal-cdr-history-table .portal-cdr-col-used-amount,
.portal-cdr-history-table .portal-cdr-col-used-unit,
.portal-cdr-history-table .portal-cdr-col-billed-amount,
.portal-cdr-history-table .portal-cdr-col-billed-unit,
.portal-cdr-history-table .portal-cdr-col-sms-updated {
    white-space: nowrap;
}

.portal-cdr-history-table .portal-cdr-col-description,
.portal-cdr-history-table .portal-cdr-col-network,
.portal-cdr-history-table .portal-cdr-col-outcome {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.portal-sms-history-table {
    table-layout: fixed;
    width: 100%;
}

.portal-sms-history-table td {
    box-sizing: border-box;
}

.portal-sms-date-column {
    width: 11%;
}

.portal-sms-direction-column {
    width: 5%;
}

.portal-sms-user-column {
    width: 6%;
}

.portal-sms-route-column {
    width: 6%;
    text-align: center;
}

.portal-sms-cost-column {
    width: 7%;
    text-align: center;
}

.portal-sms-encoding-column {
    width: 6%;
}

.portal-sms-message-column {
    width: 42%;
}

.portal-sms-status-column {
    width: 17%;
}

.portal-sms-date,
.portal-sms-direction,
.portal-sms-route,
.portal-sms-cost,
.portal-sms-encoding,
.portal-sms-date-column,
.portal-sms-direction-column,
.portal-sms-route-column,
.portal-sms-cost-column,
.portal-sms-encoding-column {
    white-space: nowrap;
}

.portal-sms-direction,
.portal-sms-route,
.portal-sms-cost {
    text-align: center;
}

.portal-sms-compose-cost-group {
    margin-left: 4px;
    align-items: center;
}

.portal-sms-compose-cost {
    color: #555;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.portal-sms-status span {
    display: block;
    max-width: 100%;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-sms-message-content {
    display: block;
    max-width: 100%;
    max-height: 104px;
    line-height: 1.45;
    white-space: normal;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    background-color: white;
}

.portal-sms-date,
.portal-sms-direction,
.portal-sms-user,
.portal-sms-encoding,
.portal-sms-status {
    white-space: nowrap;
}

.portal-sms-user span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-sms-compose {
    margin-top: 12px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.portal-sms-compose-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 8px;
}

.portal-sms-compose-group,
.portal-sms-compose-from {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.portal-sms-compose-label {
    font-size: 11px;
    font-weight: bold;
    color: #555;
    margin-right: 4px;
}

.portal-sms-compose-from-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.portal-sms-compose-from-text {
    font-size: 12px;
    font-weight: bold;
}

.portal-sms-compose-from-hint {
    font-size: 10px;
    color: #666;
}

.portal-sms-compose-from-input,
.portal-sms-compose-from-select {
    font-size: 11px;
    min-width: 140px;
    max-width: 220px;
    height: 24px;
    box-sizing: border-box;
}

.portal-sms-compose-message-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
}

.portal-sms-compose-message {
    flex: 1 1 auto;
    width: 100%;
    min-width: 220px;
    min-height: 28px;
    max-height: 160px;
    height: 28px;
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.35;
    padding: 4px 6px;
}

.portal-sms-compose-message.portal-sms-compose-message-binary,
.portal-sms-compose[data-sms-mode="binary"] .portal-sms-compose-message {
    white-space: nowrap;
    overflow-x: auto;
    max-height: 28px;
}

.portal-sms-compose-send,
.portal-sms-emoji-toggle {
    flex: 0 0 auto;
    box-sizing: border-box;
    margin-top: 1px;
    min-height: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 26px;
    vertical-align: top;
}

.portal-sms-compose-send {
    width: 78px;
}

.portal-sms-emoji-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.portal-sms-emoji-toggle {
    min-width: 54px;
}

.portal-sms-emoji-popover {
    /* Open upward so the absolute palette stays inside #container_window_main
       in-flow bounds. Opening downward past Notes grows that scrollport
       (overflow-x:hidden forces overflow-y:auto) and shows a SIM-area scrollbar. */
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    top: auto;
    z-index: 40;
    width: 220px;
    max-width: 80vw;
    padding: 6px;
    border: 1px solid #999;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.portal-sms-emoji-popover[hidden] {
    display: none;
}

.portal-sms-emoji-option {
    min-width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    background: #fff;
    border: 1px solid #ddd;
}

.portal-sms-emoji-option:hover,
.portal-sms-emoji-option:focus {
    border-color: #000;
    background: #f5f5f5;
}

.portal-sms-compose-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 6px;
    font-size: 11px;
}

.portal-sms-compose-note {
    color: #666;
}

.portal-sms-compose-error {
    font-size: 12px;
    color: #b00020;
}

/* Muted reference panels (Item|Description notes + DataFlow helpers + DNS text)
   Uses DataSIM Warm Grey 4/8 tints from the brand Blacks palette. */
.portal-reference-panel {
    display: block;
    background: var(--portal-warm-grey-panel);
    border-top: 1px solid var(--portal-warm-grey-border);
    padding: 10px 12px;
    margin-top: 20px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

.portal-reference-panel-title {
    font-size: 11px;
    font-weight: bold;
    color: var(--portal-warm-grey-8);
    margin: 0 0 6px;
}

.portal-reference-notes-wrap {
    margin-top: 10px;
}

.portal-reference-notes-item-table {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    table-layout: fixed;
    background: transparent;
}

.portal-reference-notes-item-table .portal-reference-item-col {
    width: 90px;
    white-space: nowrap;
}

.portal-port-scan-notes-table {
    table-layout: fixed;
    width: 100% !important;
}

.portal-port-scan-notes-table col.portal-port-scan-result-col,
.portal-port-scan-notes-table .portal-port-scan-result-col,
.portal-port-scan-notes-table td:first-child {
    width: 120px;
    max-width: 120px;
    white-space: nowrap;
}

.portal-sms-notes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.portal-sms-notes-col {
    flex: 1 1 calc(50% - 6px);
    min-width: 280px;
}

.portal-sms-notes-table .portal-sms-notes-label-col {
    width: 80px;
    white-space: nowrap;
}

.portal-reference-notes-text {
    font-size: 11px;
    line-height: 1.4;
    color: #333;
}

.portal-reference-helpers {
    margin-top: 10px;
}

/* DataFlow helpers: TCP Flag grows for Description; stats/action share remaining width */
.portal-reference-helpers-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
}

.portal-reference-helpers-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 420px;
    min-width: 0;
}

.portal-reference-helpers .simtabtable {
    background: transparent;
    min-width: 0 !important;
    max-width: none !important;
}

.portal-reference-panel .simtabtable td {
    color: var(--portal-warm-grey-8);
    background: transparent;
}

.portal-reference-panel .table-header,
.portal-reference-panel .table-header td {
    background-color: var(--portal-warm-grey-header) !important;
    color: var(--portal-warm-grey-8) !important;
    font-weight: bold;
    border-bottom: 1px solid var(--portal-warm-grey-border);
}

.portal-dataflow-pagesize {
    margin-top: 10px;
    margin-bottom: 0;
}

.portal-usage-summary-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-usage-summary-table .portal-usage-col-bearer { width: 8%; }
.portal-usage-summary-table .portal-usage-col-direction { width: 7%; }
.portal-usage-summary-table .portal-usage-col-outcome { width: 10%; }
.portal-usage-summary-table .portal-usage-col-view { width: 8%; }
.portal-usage-summary-table .portal-usage-col-month { width: 6%; }
.portal-usage-summary-table .portal-usage-col-event { width: 14%; }
.portal-usage-summary-table .portal-usage-col-updated { width: 15%; }

.portal-usage-summary-table .portal-usage-ip-expand {
    background: transparent;
    border: 0;
    color: #4c0066;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
    text-decoration: underline;
}

.portal-usage-summary-table .portal-usage-network-row td {
    background: var(--portal-warm-grey-panel);
    color: var(--portal-warm-grey-8);
}

.portal-apn-active-session-banner {
    background: var(--portal-chrome-danger) !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

.portal-usage-summary-table td,
.portal-usage-summary-table th,
.portal-usage-summary-table .table-header {
    box-sizing: border-box;
    font-size: 11px;
    line-height: 14px;
    min-width: 0 !important;
    overflow-wrap: normal;
    padding: 2px 3px;
    white-space: nowrap;
}

/* Label columns may still wrap; month/usage/timestamp values must stay on one line. */
.portal-usage-summary-table td:nth-child(-n+4),
.portal-usage-summary-table th:nth-child(-n+4),
.portal-usage-summary-table .table-header td:nth-child(-n+4) {
    white-space: normal;
    overflow-wrap: anywhere;
}

.customerlist,
.userlist,
.addaccount,
.tariffsummarylist,
.simlist,
.simlist_header,
.pagedtable-no-offset,
.searcheslist,
.reportslist,
.simwildcardsearchtable,
.userdetailtable,
.bulkoptions,
.columndisplay,
.accountsearch-box-header,
.simsearcherrors,
.content-holder,
.footer-holder,
.applet-header-table,
.applet-header-text,
.table-list-default {
    margin-left: 0;
    width: 100%;
    min-width: var(--portal-content-min-width);
    max-width: none;
}

.customerlist,
.userlist,
.addaccount,
.tariffsummarylist,
.simlist,
.simlist_header,
.pagedtable-no-offset,
.searcheslist,
.reportslist,
.simwildcardsearchtable,
.userdetailtable,
.table-list-default {
    border-collapse: collapse;
}

.simtabtable {
    width: 100% !important;
    min-width: var(--portal-content-min-width);
}

.simtabtable[width] {
    width: 100% !important;
}

/* DataFlow helper tables: TCP Flag Description needs ~460px table; stats/action fill rest */
.portal-simdetail-tabholder .portal-reference-helpers .portal-reference-tcp-table,
#simcard_window .portal-reference-helpers .portal-reference-tcp-table,
.portal-reference-helpers .portal-reference-tcp-table {
    width: 460px !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 460px;
    table-layout: fixed;
}

.portal-reference-tcp-table .portal-reference-tcp-flag-col {
    width: 70px;
    white-space: nowrap;
}

.portal-simdetail-tabholder .portal-reference-helpers .portal-reference-stats-table,
.portal-simdetail-tabholder .portal-reference-helpers .portal-reference-action-table,
#simcard_window .portal-reference-helpers .portal-reference-stats-table,
#simcard_window .portal-reference-helpers .portal-reference-action-table,
.portal-reference-helpers .portal-reference-stats-table,
.portal-reference-helpers .portal-reference-action-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: fixed;
}

.portal-reference-stats-table .portal-reference-stats-label {
    width: 45%;
    white-space: nowrap;
}

.portal-reference-stats-table .portal-reference-stats-value {
    width: 30%;
    white-space: nowrap;
}

.portal-reference-stats-table .portal-reference-stats-age {
    width: 25%;
    text-align: right;
    white-space: nowrap;
}

.portal-reference-action-table .portal-reference-action-col {
    width: 80px;
    white-space: nowrap;
}

.portal-simdetail-tabholder > .portal-reference-panel,
#simdetail-tabholder > .portal-reference-panel {
    width: 100% !important;
    max-width: none !important;
}

#simViewHistory .sim-view-history-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 780px;
    table-layout: fixed;
}

#simViewHistory .sim-view-history-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-table-fill,
.portal-table-fill > tbody,
.portal-table-fill > tbody > tr,
.portal-table-fill > tbody > tr > td {
    width: 100%;
}

.reportslist .portal-reports-num {
    text-align: right;
}

.customerlist td,
.userlist td,
.addaccount td,
.tariffsummarylist td,
.simlist td,
.simlist_header td,
.pagedtable-no-offset td,
.searcheslist td,
.reportslist td,
.simwildcardsearchtable td,
.userdetailtable td,
.table-list-default td {
    font-size: var(--portal-table-font-size);
    padding: var(--portal-table-cell-padding);
}

/* Search results: slightly tighter cell padding on wide screens (max 4px). */
.simlist td,
.simlist_header td {
    padding: clamp(3px, 0.3vw, 4px);
}

.simlist td a,
.simlist_header td a {
    font-size: inherit;
}

#simsearch-list {
    max-width: 100%;
    overflow-x: hidden;
}

/* Soft busy while a newer tab/page/sort load is in flight: fade the old table,
   block row/page clicks, keep the view tab bar clickable. */
#simsearch-list.simsearch-results-busy {
    cursor: wait;
}

#simsearch-list.simsearch-results-busy > .simlist,
#simsearch-list.simsearch-results-busy > #actions,
#simsearch-list.simsearch-results-busy > #bulktag-form {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

#simsearch-list.simsearch-results-busy > .simlist_header {
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
}

#simsearch-list .simsearch-progress {
    max-width: 420px;
    margin: 28px auto;
    padding: 8px 12px;
    text-align: left;
}

#simsearch-list .simsearch-loading {
    max-width: 420px;
    margin: 28px auto;
    padding: 8px 12px;
    text-align: center;
    font-size: 13px;
    color: #555;
    line-height: 1.35;
}

#simsearch-list .simsearch-progress-pct {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

#simsearch-list .simsearch-progress-track {
    height: 8px;
    background: #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

#simsearch-list .simsearch-progress-bar {
    height: 100%;
    background: #4c0066;
    border-radius: 4px;
    transition: width 0.25s ease;
}

#simsearch-list .simsearch-progress-msg {
    font-size: 13px;
    color: #555;
    line-height: 1.35;
}

#simsearch-list .simlist,
#simsearch-list .simlist_header {
    table-layout: fixed;
    min-width: 0;
    max-width: 100%;
}

#simsearch-list .simlist .simlist-refresh-note {
    text-align: center;
    width: 34%;
    font-size: 10px;
    line-height: 1.2;
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

#simsearch-list .simlist_header td {
    width: auto !important;
}

#simsearch-list .simlist td,
#simsearch-list .simlist_header td {
    box-sizing: border-box;
}

#simsearch-list .simlist [class*="portal-min-col-"] {
    min-width: 0 !important;
}

/* Shared search-results column model:
   - no-truncate: size to content / natural fit; never ellipsis
   - may-truncate: share leftover width equally; ellipsis only when tight
   Widths are assigned by layoutSimlistTableColumns() in simsearch.js. */
#simsearch-list .simlist .portal-simlist-no-truncate {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

#simsearch-list .simlist .portal-simlist-no-truncate > div,
#simsearch-list .simlist .portal-simlist-no-truncate a {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
    width: auto;
}

/* Account may wrap long codes without ellipsis. */
#simsearch-list .simlist .portal-simlist-account-cell,
#simsearch-list .simlist .portal-simlist-cell-account {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

#simsearch-list .simlist .portal-simlist-account-cell > div,
#simsearch-list .simlist .portal-simlist-cell-account > div {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#simsearch-list .simlist .portal-simlist-may-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#simsearch-list .simlist .portal-simlist-may-truncate .portal-truncate,
#simsearch-list .simlist .portal-simlist-may-truncate > div {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#simsearch-list .simlist .portal-simlist-tariff-cell .portal-truncate {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* APN Usage Limit bar — shared (Search Results + SIM Settings usage card)
   Scale width is 100cqw of the track (not the outer bar) so clip % lines up
   with green 0–80%, amber 80–100%, red 100–125% of limit. */
.portal-apn-limit-bar {
    width: 140px;
    max-width: 140px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.portal-apn-limit-bar.portal-apn-limit-bar-wide {
    width: 100%;
    max-width: none;
    margin: 0;
}

.portal-apn-limit-bar-track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: #ece7f0;
    overflow: hidden;
    position: relative;
    container-type: inline-size;
    container-name: apn-bar;
    box-sizing: border-box;
}

#simsearch-list .portal-apn-limit-bar {
    width: 140px;
    max-width: 140px;
}

#simsearch-list .portal-apn-limit-bar-track {
    width: 100%;
}

.portal-apn-limit-bar-clip {
    height: 100%;
    overflow: hidden;
    border-radius: 999px 0 0 999px;
    position: relative;
    z-index: 1;
}

.portal-apn-limit-bar-scale {
    display: flex;
    width: 100cqw;
    height: 100%;
    flex-direction: row;
    align-items: stretch;
}

@supports not (width: 100cqw) {
    .portal-apn-limit-bar-scale {
        width: 140px;
    }

    .portal-apn-limit-bar-wide .portal-apn-limit-bar-scale {
        width: 100%;
    }
}

.portal-apn-limit-seg {
    display: block;
    height: 100%;
}

.portal-apn-limit-green {
    flex: 0 0 64%;
    background: #2fa582;
}

.portal-apn-limit-amber {
    flex: 0 0 16%;
    background: #ffba00;
}

.portal-apn-limit-red {
    flex: 0 0 20%;
    background: #e60000;
}

.portal-apn-limit-threshold-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #ffffff;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.portal-apn-limit-bundle-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    background: #555555;
    z-index: 3;
    pointer-events: none;
}

.portal-apn-limit-bar-labels {
    position: relative;
    display: block;
    height: 12px;
    margin-top: 4px;
    font-size: 9px;
    color: #888888;
    line-height: 1.2;
}

.portal-apn-limit-label-0,
.portal-apn-limit-label-80,
.portal-apn-limit-label-100,
.portal-apn-limit-label-bundle {
    position: absolute;
    top: 0;
    margin: 0;
    white-space: nowrap;
    color: #888888;
    font-weight: normal;
}

.portal-apn-limit-label-0 {
    left: 0;
}

.portal-apn-limit-label-bundle {
    transform: translateX(-50%);
}

.portal-apn-limit-label-80 {
    left: 64%;
    transform: translateX(-50%);
}

.portal-apn-limit-label-100 {
    left: 80%;
    transform: translateX(-50%);
}

/* Brand chrome — tabs + table headers (no hairline) */
.ttab-selected,
span.ttab-selected,
ul.tab-list li a.selected,
.portal-sim-tabs .ttab-selected,
.portal-sim-tabs .ttab-selected > a {
    background: var(--portal-chrome-header-bg) !important;
    background-color: var(--portal-chrome-header-bg) !important;
    color: var(--portal-chrome-header-text) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    padding: 3px 6px !important;
}

.ttab-selected,
.ttab-selected *,
span.ttab-selected,
span.ttab-selected *,
ul.tab-list li a.selected,
ul.tab-list li a.selected * {
    color: var(--portal-chrome-header-text) !important;
    -webkit-text-fill-color: var(--portal-chrome-header-text) !important;
}

.ttab-unselected,
span.ttab-unselected,
ul.tab-list li a {
    padding: 3px 6px !important;
}

.portal-sim-tabs,
.portal-sim-tabs-bar,
.portal-sim-tabs-primary,
.portal-simdetail-tabs {
    margin-bottom: 0;
    padding-bottom: 0;
}

table:has(.table-header),
table:has(tr.table-header) {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

tr.table-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

tr.table-header > td,
tr.table-header > th,
td.table-header,
th.table-header,
.table-header:is(td, th),
.simtabtable .table-header:is(td, th),
.portal-usage-summary-table .table-header:is(td, th),
#simdetail-tabholder .table-header:is(td, th),
td.table-header:first-child,
td.table-header:last-child,
th.table-header:first-child,
th.table-header:last-child,
tr.table-header > td:first-child,
tr.table-header > td:last-child {
    background: var(--portal-chrome-header-bg) !important;
    background-color: var(--portal-chrome-header-bg) !important;
    color: var(--portal-chrome-header-text) !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
}

tr.table-header > td *,
tr.table-header > th *,
td.table-header *,
th.table-header * {
    color: var(--portal-chrome-header-text) !important;
    -webkit-text-fill-color: var(--portal-chrome-header-text) !important;
}

/* SIM Settings — locked Chrome layout */
.portal-sim-settings-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px 18px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 12px;
    margin-bottom: 14px;
}

.portal-sim-settings-main {
    flex: 1 1 0;
    min-width: 0;
}

.portal-simdetail-table > tbody > tr:first-child > td {
    padding-top: 6px;
}

.portal-simdetail-tabs {
    padding-top: 4px;
}

.portal-sim-settings-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: repeat(6, 27px);
    column-gap: 18px;
    row-gap: 0;
    width: 100%;
    align-items: stretch;
    --sim-settings-mid-label: 5em;
}

.portal-sim-settings-col:nth-child(1) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: 1 / span 6;
    column-gap: 10px;
    min-width: 0;
}

.portal-sim-settings-col:nth-child(2) {
    display: grid;
    grid-template-columns: var(--sim-settings-mid-label) minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: 1 / span 5;
    column-gap: 10px;
    min-width: 0;
}

.portal-sim-settings-col:nth-child(3) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: 1 / span 5;
    column-gap: 10px;
    min-width: 0;
}

.portal-sim-settings-tariff-span {
    grid-column: 2 / -1;
    grid-row: 6;
    display: grid;
    grid-template-columns: var(--sim-settings-mid-label) minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-width: 0;
}

.portal-sim-settings-tariff-span .portal-sim-settings-label,
.portal-sim-settings-tariff-span .portal-sim-settings-value {
    height: 100%;
    display: flex;
    align-items: center;
}

.portal-sim-settings-tariff-span .portal-sim-settings-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.portal-sim-settings-col-title {
    display: none;
}

.portal-sim-settings-row {
    display: contents;
}

.portal-sim-settings-label,
.portal-sim-settings-value {
    min-height: 0;
    height: 100%;
    padding: 0;
    border-bottom: 1px solid #f0eeea;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.portal-sim-settings-label {
    flex: none;
    min-width: 0;
    max-width: none;
    color: #888888;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
}

.portal-sim-settings-value {
    min-width: 0;
    font-size: 11px;
    font-weight: bold;
    color: #222222;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-sim-settings-value > * {
    min-width: 0;
}

.portal-sim-settings-value.portal-sim-settings-iccid-hero {
    grid-column: 1 / -1;
    grid-row: span 2;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #111111;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: none;
    margin: 2px 0 6px 0;
    padding: 6px 8px;
    border-radius: 4px;
    background: #F2F6F8;
    color: #123A5C;
    -webkit-text-fill-color: #123A5C;
    border: none;
    box-shadow: inset 0 0 0 0.15px #123A5C;
}

.portal-sim-settings-value.portal-sim-settings-iccid-hero,
.portal-sim-settings-value.portal-sim-settings-iccid-hero * {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #123A5C;
    -webkit-text-fill-color: #123A5C;
}

.portal-sim-settings-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
}

.portal-sim-settings-pill-status {
    min-width: 76px;
    background: #EFEDF1;
    color: #6B6472;
    -webkit-text-fill-color: #6B6472;
}

.portal-sim-settings-pill-status.is-active {
    background: #005A8C;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.portal-sim-settings-pill-status.is-inactive,
.portal-sim-settings-pill-status.is-barred {
    background: #EFEDF1;
    color: #6B6472;
    -webkit-text-fill-color: #6B6472;
}

.portal-sim-settings-usage {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
    min-width: 300px;
    border: 1px solid #e3e0da;
    background: #ffffff;
    padding: 6px 14px;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.portal-sim-settings-usage [id^="simdetail-usage-card-body-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.portal-sim-usage-badges {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px 0;
    min-height: 0;
    box-sizing: border-box;
}

.portal-sim-usage-badge {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef5fb;
    color: #1a4a7a;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}

.portal-sim-usage-badge.is-blocked {
    background: #fdecea;
    color: #b00020;
}

.portal-sim-usage-badge.is-disabled {
    background: #888888;
    color: #ffffff;
}

.portal-sim-usage-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    margin-bottom: 2px;
    flex: 0 0 auto;
    position: relative;
}

.portal-sim-usage-metric {
    flex: none;
    min-width: 0;
}

.portal-sim-usage-metric-label {
    display: block;
    font-size: 8px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0;
    line-height: 11px;
}

.portal-sim-usage-metric-value {
    font-size: 11px;
    font-weight: bold;
    color: #222222;
    line-height: 13px;
}

.portal-sim-usage-metric-limit .portal-sim-usage-metric-value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.portal-sim-usage-limit-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.portal-sim-usage-limit-btn {
    font: inherit;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 2px 5px;
    border: 1px solid #999;
    background: #f5f5f5;
    color: #4c0066;
    cursor: pointer;
}

.portal-sim-usage-limit-btn:hover {
    background: #ebe0f0;
}

.portal-sim-usage-bar-block {
    margin-top: 2px;
    flex: 0 0 auto;
    display: block;
}

.portal-sim-usage-bar-block .portal-apn-limit-bar {
    width: 100%;
}

.portal-sim-usage-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1px;
    font-size: 10px;
    color: #666666;
}

/* APN limit % sits level with Used This Month, right side; bar is full width below */
.portal-sim-usage-metrics > .portal-sim-usage-bar-pct {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    font-weight: bold;
    color: #000000;
    -webkit-text-fill-color: #000000;
    white-space: nowrap;
    line-height: 14px;
    display: block;
}

.portal-sim-usage-bar-pct {
    font-weight: bold;
    color: #000000;
}

.portal-sim-usage-bar-pct.is-over {
    color: #000000;
}

.portal-sim-usage-bar-pct a {
    color: #4c0066;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.portal-sim-usage-bar-pct a:hover {
    text-decoration: underline;
}

/* Usage Score tip sits below — above is clipped by #container_window_main overflow.
   Right-align: the % is at the far right of the usage card. */
.portal-sim-usage-bar-pct a.tip-below[data-tip]:after {
    top: 20px;
    left: auto;
    right: 0;
}

.portal-sim-usage-bar-pct a.tip-below[data-tip]:before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #CC0033;
    border-left-color: transparent;
    top: 10px;
    left: auto;
    right: 8px;
}

/* Provisioning confirm strip */
#prov-confirm-table {
    width: 100% !important;
    background: #FFD9B3 !important;
    background-color: #FFD9B3 !important;
}

#prov-confirm-text {
    width: 100% !important;
    font-size: 11px !important;
    line-height: 14px !important;
    text-align: left !important;
}

#prov-confirm-button-cell,
#prov-confirm-table tr > td:last-child {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: right !important;
    vertical-align: middle !important;
}

#prov-confirm-table button {
    float: none !important;
    display: inline-block !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

#prov-confirm-table button:first-child {
    margin-left: 0 !important;
}

/* Option row label indent */
#simoptionstable tr:not(:has(.table-header)) > td:first-child,
#tarifftable tr:not(:has(.table-header)) > td:first-child,
#simoptionstable td.portal-detail-value-long:not(.table-header),
#tarifftable td.portal-detail-value-long:not(.table-header) {
    padding-left: 10px !important;
}

.portal-sim-settings-usage .portal-apn-limit-bar-track {
    height: 12px;
}

.portal-sim-settings-usage .portal-apn-limit-bar-labels {
    margin-top: 1px;
    height: 10px;
    font-size: 8px;
}

.portal-sim-usage-note {
    margin-top: 8px;
    font-size: 10px;
    color: #888888;
    font-style: italic;
}

.portal-sim-usage-empty {
    font-size: 11px;
    color: #888888;
    font-style: italic;
}

/* Identities: beat .simtabtable 100% width so values sit just right of labels. */
.portal-simdetail-tabholder .portal-sim-identities-table.simtabtable,
.portal-sim-identities-table.simtabtable,
.portal-sim-identities-table {
    display: inline-table !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto !important;
}

.portal-simdetail-tabholder .portal-sim-identities-table td,
.portal-sim-identities-table td {
    padding: 3px 0 !important;
    font-size: 11px;
    line-height: 16px;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: left !important;
}

.portal-sim-identities-table .portal-detail-label {
    color: #888888;
    width: 1% !important;
    padding-right: 12px !important;
}

.portal-sim-identities-table .portal-detail-value {
    font-weight: bold;
    color: #222222;
    width: auto !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    .portal-sim-settings-usage {
        flex: 1 1 100%;
        width: auto;
        max-width: none;
    }

    .portal-sim-settings-cols {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .portal-sim-settings-col:nth-child(1),
    .portal-sim-settings-col:nth-child(2),
    .portal-sim-settings-col:nth-child(3) {
        display: block;
        grid-row: auto;
    }

    .portal-sim-settings-tariff-span {
        grid-column: auto;
        grid-row: auto;
        display: flex;
        gap: 8px;
    }

    .portal-sim-settings-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        min-height: 18px;
        padding: 2px 0;
        border-bottom: 1px solid #f0eeea;
    }

    .portal-sim-settings-label,
    .portal-sim-settings-value {
        height: auto;
        border-bottom: none;
        display: block;
    }

    .portal-sim-settings-value.portal-sim-settings-iccid-hero {
        grid-row: auto;
        margin-bottom: 8px;
    }

    .portal-sim-settings-label {
        min-width: 110px;
    }
}

#simsearch-list .simlist .portal-simlist-profile-cell,
#simsearch-list .simlist .portal-simlist-cell-profile {
    text-align: left;
}

#account-search-result-table {
    max-width: 100%;
    overflow-x: hidden;
}

#account-search-result-table .portal-account-list {
    table-layout: fixed;
    min-width: 0;
    max-width: 100%;
}

#account-search-result-table .portal-account-list [class*="portal-min-col-"] {
    min-width: 0 !important;
}

#account-search-result-table .portal-account-list td {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#account-search-result-table .portal-account-code-col { width: 8%; }
#account-search-result-table .portal-account-name-col { width: 28%; }
#account-search-result-table .portal-account-count-col { width: 8%; }
#account-search-result-table .portal-account-parent-col { width: 8%; }
#account-search-result-table .portal-account-subaccounts-col { width: 8%; }

#account-search-result-table .portal-account-count-cell,
#account-search-result-table .portal-account-parent-cell,
#account-search-result-table .portal-account-subaccounts-cell {
    padding-right: 8px !important;
}

#account-search-result-table .portal-account-name-cell a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tariffsummary_window .tariffsummarylist {
    table-layout: fixed;
    min-width: 0;
    max-width: 100%;
}

/* Match tariff table width so the Excel export sits on the table's right edge. */
#tariffsummary_window .tariffsummary-simbase-footer {
    width: 100%;
    max-width: 100%;
    margin: 17px 0 0;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: right;
}

#tariffsummary_window .tariffsummary-simbase-footer td {
    border: none;
    padding: 0;
    text-align: right;
}

#tariffsummary_window .tariffsummarylist td {
    box-sizing: border-box;
}

#tariffsummary_window .tariffsummarylist [class*="portal-min-col-"] {
    min-width: 0 !important;
}

#tariffsummary_window .tariffsummarylist td:nth-child(1) { width: 13%; }
#tariffsummary_window .tariffsummarylist td:nth-child(2) { width: 6%; }
#tariffsummary_window .tariffsummarylist td:nth-child(3) { width: 33%; }
#tariffsummary_window .tariffsummarylist td:nth-child(4),
#tariffsummary_window .tariffsummarylist td:nth-child(5),
#tariffsummary_window .tariffsummarylist td:nth-child(6),
#tariffsummary_window .tariffsummarylist td:nth-child(7),
#tariffsummary_window .tariffsummarylist td:nth-child(8) { width: 7%; }
#tariffsummary_window .tariffsummarylist td:nth-child(9) {
    overflow: visible;
    white-space: nowrap;
    width: 13%;
}

#tariffsummary_window .tariffsummarylist td:nth-child(3) a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customerlist th,
.userlist th,
.addaccount th,
.tariffsummarylist th,
.simlist th,
.simlist_header th,
.pagedtable-no-offset th,
.searcheslist th,
.reportslist th,
.simwildcardsearchtable th,
.userdetailtable th,
.table-list-default th {
    font-size: var(--portal-table-header-font-size);
    padding: var(--portal-table-cell-padding);
}

/* Search results: match body cell padding (max 4px on wide screens). */
.simlist th,
.simlist_header th {
    padding: clamp(3px, 0.3vw, 4px);
}

.portal-field-value,
.portal-detail-value {
    font-weight: bold;
    min-width: 110px;
    overflow-wrap: anywhere;
}

.portal-detail-label {
    min-width: 82px;
    background-color: white;
    color: black;
}

.portal-detail-value-ip {
    white-space: nowrap;
    overflow-wrap: normal;
}

.portal-detail-value-long {
    white-space: normal;
    overflow-wrap: anywhere;
}

.portal-simdetail-table .portal-sim-settings-table {
    table-layout: auto;
    width: 100% !important;
    min-width: 0 !important;
}

.portal-simdetail-table .portal-sim-settings-table td,
.portal-simdetail-table .portal-sim-settings-table .portal-detail-label,
.portal-simdetail-table .portal-sim-settings-table .portal-detail-value {
    box-sizing: border-box;
}

.portal-simdetail-table .portal-sim-settings-table .portal-detail-label {
    min-width: 82px;
    white-space: nowrap;
}

.portal-simdetail-table .portal-sim-settings-table .portal-detail-value {
    min-width: 110px;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.portal-simdetail-table .portal-sim-settings-table .portal-detail-value-long {
    white-space: normal;
    overflow-wrap: anywhere;
}

.portal-min-col-30 { min-width: 30px; }
.portal-min-col-40 { min-width: 40px; }
.portal-min-col-50 { min-width: 50px; }
.portal-min-col-60 { min-width: 60px; }
.portal-min-col-65 { min-width: 65px; }
.portal-min-col-70 { min-width: 70px; }
.portal-min-col-75 { min-width: 75px; }
.portal-min-col-80 { min-width: 80px; }
.portal-min-col-82 { min-width: 82px; }
.portal-min-col-85 { min-width: 85px; }
.portal-min-col-90 { min-width: 90px; }
.portal-min-col-95 { min-width: 95px; }
.portal-min-col-100 { min-width: 100px; }
.portal-min-col-110 { min-width: 110px; }
.portal-min-col-115 { min-width: 115px; }
.portal-min-col-120 { min-width: 120px; }
.portal-min-col-125 { min-width: 125px; }
.portal-min-col-128 { min-width: 128px; }
.portal-min-col-130 { min-width: 130px; }
.portal-min-col-145 { min-width: 145px; }
.portal-min-col-150 { min-width: 150px; }
.portal-min-col-160 { min-width: 160px; }
.portal-min-col-170 { min-width: 170px; }
.portal-min-col-190 { min-width: 190px; }
.portal-min-col-245 { min-width: 245px; }
.portal-min-col-250 { min-width: 250px; }
.portal-min-col-300 { min-width: 300px; }
.portal-min-col-350 { min-width: 350px; }
.portal-min-col-365 { min-width: 365px; }
.portal-min-col-397 { min-width: 397px; }
.portal-search-third {
    width: 33.33%;
    vertical-align: top;
    padding-right: 8px;
    box-sizing: border-box;
}
.portal-search-third-input {
    min-width: 0;
    width: calc(100% - 60px);
    max-width: calc(100% - 60px);
}
.portal-min-col-419 { min-width: 419px; }
.portal-min-col-460 { min-width: 460px; }
.portal-min-col-530 { min-width: 530px; }
.portal-min-col-800 { min-width: 800px; }
.portal-min-col-880 { min-width: 880px; }

.portal-fill-col {
    width: 100%;
}

.portal-search-main-input,
.portal-search-side-input {
    box-sizing: border-box;
    max-width: calc(100% - 60px);
}

.portal-search-main-input {
    width: calc(100% - 60px);
}

.portal-search-side-input {
    width: calc(100% - 60px);
}

.portal-truncate {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Modern login card (no title header) */
.portal-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: clamp(260px, calc(100vh - 170px), 520px);
    box-sizing: border-box;
    padding: 24px 16px;
}

.portal-login-center {
    width: 100%;
    max-width: 360px;
    transform: scale(0.9);
    transform-origin: center center;
}

.portal-login-card {
    background: #ffffff;
    border: 1px solid var(--portal-warm-grey-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(51, 0, 102, 0.08);
    padding: 28px 24px 24px;
    box-sizing: border-box;
}

.portal-login-field {
    display: block;
    margin: 0 0 14px;
}

.portal-login-label {
    display: block;
    margin: 0 0 6px;
    color: #333333;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.portal-login-card input[type="email"],
.portal-login-card input[type="text"],
.portal-login-card input[type="password"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid var(--portal-warm-grey-border);
    border-radius: 4px;
    background: #ffffff;
    color: #222222;
    font-size: 13px;
    line-height: 1.35;
    outline: none;
}

.portal-login-card input[type="email"]:focus,
.portal-login-card input[type="text"]:focus,
.portal-login-card input[type="password"]:focus {
    border-color: #330066;
    box-shadow: 0 0 0 2px rgba(51, 0, 102, 0.15);
}

.portal-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 18px;
    color: #444444;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}

.portal-login-remember input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #330066;
    cursor: pointer;
}

.portal-login-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.portal-login-forget:empty {
    display: none;
}

.portal-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

.portal-login-btn-primary {
    background: #330066;
    border-color: #330066;
    color: #ffffff;
}

.portal-login-btn-primary:hover {
    background: #4c0066;
    border-color: #4c0066;
}

.portal-login-btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 0, 102, 0.25);
}

.portal-login-btn-secondary {
    background: #ffffff;
    border-color: var(--portal-warm-grey-border);
    color: #333333;
    font-weight: 500;
}

.portal-login-btn-secondary:hover {
    background: var(--portal-warm-grey-panel);
    border-color: var(--portal-warm-grey-4);
}

.portal-login-btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(112, 99, 87, 0.2);
}

.portal-login-notice {
    margin-top: 14px;
    color: #555555;
    font-size: 12px;
    font-style: italic;
    text-align: left;
    line-height: 1.4;
}

.portal-login-notice:empty,
.portal-login-notice:has(#login-logout-reason:empty) {
    display: none;
}

.portal-login-status-title {
    margin: 0 0 12px;
    color: #330066;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.portal-login-status-body {
    margin: 0 0 18px;
    color: #444444;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.portal-login-status-body p {
    margin: 10px 0 0;
}

.portal-login-status-help {
    margin: 16px 0 0;
    color: #666666;
    font-size: 12px;
    line-height: 1.4;
}

.portal-login-waiting-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 32px 24px;
}

@media (min-width: 1400px) {
    html {
        /* Was 1.2; keep that relative size at 90% → 1.08 */
        zoom: 1.08;
    }

    #container_page {
        min-height: calc(100vh / 1.08);
    }
}

@media (max-width: 1199px) {
    #container_page {
        min-width: var(--portal-shell-min-width);
        width: 100%;
    }

    .portal-appbar-row {
        padding-left: 0;
        padding-right: 8px;
        gap: 6px;
    }

    .portal-brand {
        max-width: none;
        padding-left: 0;
    }

    #menu_top_right {
        font-size: 10px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Compact nav: burger left of logo; primary links in panel. SIM stays on bar. */
@media (max-width: 899px) {
    .portal-nav-burger {
        display: inline-flex;
    }

    .portal-appbar-row {
        padding-left: 4px;
        gap: 6px;
    }

    .portal-top-nav-panel {
        display: none;
        position: fixed;
        left: 0;
        top: 50px;
        z-index: 6100;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(280px, calc(100vw - 12px));
        max-height: calc(100vh - 56px);
        overflow: auto;
        padding: 8px 0;
        margin: 0;
        background: #330066;
        border: 1px solid #220044;
        border-top: 0;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        box-sizing: border-box;
    }

    /* When open, JS mounts the panel on body and sets left to the burger. */
    body.portal-nav-open .portal-top-nav-panel {
        display: flex;
    }

    .portal-top-nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .portal-top-nav-primary .menu_div,
    .portal-top-nav-primary .menu_div_selected,
    .portal-top-nav-primary .window_menu_div {
        width: 100%;
        min-height: 34px;
        padding: 6px 10px;
        box-sizing: border-box;
    }

    .portal-top-nav-primary .window_menu_link,
    .portal-top-nav-primary .menu_div a,
    .portal-top-nav-primary .menu_div_selected a {
        width: 100%;
        font-size: 14px;
    }

    .portal-sim-slot-inline {
        display: inline-flex;
    }

    .portal-sim-slot-drawer {
        display: none;
        width: 100%;
        padding: 8px 8px 0;
        box-sizing: border-box;
    }
}

/* Very narrow: SIM chip also folds into the burger panel (JS reparents the cell). */
@media (max-width: 639px) {
    .portal-sim-slot-inline {
        display: none !important;
    }

    .portal-sim-slot-drawer {
        display: block;
    }

    .portal-sim-slot-drawer #sim_menu_cell {
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }

    .portal-sim-slot-drawer #sim_menu_div {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-height: 500px) {
    #container_window_main {
        min-height: 0;
        height: auto !important;
    }

    .portal-login {
        min-height: clamp(180px, calc(100vh - 150px), 320px);
        padding: 16px 12px;
    }

    #container_footer {
        margin-top: 8px;
        height: 28px;
    }
}

/* Portal reload dialog — layout mirrors APS aps-inline-confirm (fixed flex center). */
body.portal-reload-open {
    overflow: hidden;
}

.portal-reload-overlay {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(28, 28, 28, 0.45);
}

.portal-reload-dialog {
    width: min(28rem, 100%);
    padding: 1rem 1.1rem 0.9rem;
    background: #fff;
    border: 1px solid #999;
    border-left: 3px solid #330066;
    border-radius: 2px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    font-family: tahoma, Arial, sans-serif;
    color: #2c2c2c;
}

.portal-reload-msg {
    margin: 0 0 0.85rem;
    font-size: 13px;
    line-height: 1.4;
}

.portal-reload-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.portal-reload-yes {
    font-size: 12px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    background: #330066;
    color: #fff;
    border: 1px solid #220044;
}

/* Shared portal dialog shell (reuse for focused actions). */
body.portal-dialog-open {
    overflow: hidden;
}

.portal-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(28, 28, 28, 0.45);
}

.portal-dialog {
    width: min(26rem, 96vw);
    max-height: min(90vh, 44rem);
    overflow: auto;
    padding: 0.85rem 0.75rem 0.5rem;
    background: #fff;
    border: 1px solid #999;
    border-left: 3px solid #330066;
    border-radius: 2px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    font-family: tahoma, Arial, sans-serif;
    color: #2c2c2c;
    box-sizing: border-box;
}

.portal-dialog--lg {
    width: min(28rem, 96vw);
}

.portal-dialog--xl {
    width: min(36rem, 96vw);
}

.portal-dialog-title {
    margin: 0 0 0.55rem;
    font-size: 12px;
    font-weight: 600;
    color: #330066;
    line-height: 1.25;
}

.portal-dialog-body {
    margin: 0 0 0.25rem;
    font-size: 11px;
    line-height: 1.3;
}

.portal-dialog-confirm-text {
    margin: 0.15rem 0 0.35rem;
    font-size: 12px;
    line-height: 1.4;
    color: #2c2c2c;
}

.portal-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0;
    padding-top: 0;
}

.portal-dialog-notes {
    margin: 0.55rem -0.75rem -0.5rem;
}

.portal-dialog-notes .portal-reference-panel {
    margin-top: 0;
}

.portal-dialog-btn {
    font-size: 11px;
    padding: 0.22rem 0.55rem;
    cursor: pointer;
    border: 1px solid #999;
    background: #f5f5f5;
    color: #333;
}

.portal-dialog-btn:hover:not(:disabled) {
    background: #ebe0f0;
}

.portal-dialog-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.portal-dialog-btn-primary {
    background: #330066;
    color: #fff;
    border-color: #220044;
}

.portal-dialog-btn-primary:hover:not(:disabled) {
    background: #4c0080;
}

.portal-dialog-btn-primary:disabled {
    background: #ccc;
    color: #666;
    border-color: #bbb;
    opacity: 1;
}

/* Shared warning / error strips for PortalDialog bodies. */
.portal-dialog-warnings,
.portal-apn-limit-dialog-warnings {
    box-sizing: border-box;
    min-height: 2.05rem;
    margin: 0.35rem 0;
    padding: 0;
}

.portal-dialog-warn,
.portal-apn-limit-dialog-warn {
    margin: 0;
    padding: 0.2rem 0.35rem;
    box-sizing: border-box;
    background: #fff6e8;
    border: 1px solid #e0b46a;
    border-left: 3px solid #c47a00;
    color: #5a3a00;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
}

.portal-dialog-error,
.portal-apn-limit-dialog-error {
    margin: 0.2rem 0 0;
    color: #b00020;
    font-size: 10px;
    font-weight: 400;
}

.portal-dialog-error[hidden],
.portal-apn-limit-dialog-error[hidden] {
    display: none !important;
}

.portal-apn-limit-dialog-warnings {
    height: 2.05rem;
    overflow: hidden;
}

.portal-apn-limit-dialog-warn {
    height: 100%;
}

/* APN limit dialog (compact; slider beside unit). */
.portal-apn-limit-dialog-editor {
    margin: 0;
}

.portal-apn-limit-dialog-edit-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 0.35rem;
    min-height: 1.5rem;
}

.portal-apn-limit-dialog-lab {
    font-size: 10px;
    font-weight: 400;
    color: #555;
    line-height: 1.2;
}

.portal-apn-limit-dialog-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    width: 100%;
}

.portal-apn-limit-dialog-input {
    flex: 0 0 auto;
    width: 2.75rem;
    font: inherit;
    font-size: 10px;
    font-weight: 400;
    text-align: right;
    padding: 0.08rem 0.18rem;
    height: 1.35rem;
    border: 1px solid #999;
    box-sizing: border-box;
}

.portal-apn-limit-dialog-unit {
    flex: 0 0 auto;
    font: inherit;
    font-size: 10px;
    font-weight: 400;
    padding: 0.08rem 0.12rem;
    height: 1.35rem;
    border: 1px solid #999;
    box-sizing: border-box;
}

.portal-apn-limit-dialog-slider {
    flex: 1 1 auto;
    min-width: 8rem;
    width: auto;
    margin: 0;
    accent-color: #330066;
}

/* Record-count report download pills (CDR / DataFlow / DNS) */
.portal-report-dl-row {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    vertical-align: middle;
}

.portal-report-dl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    min-width: 4.75rem;
    min-height: 22px;
    text-decoration: none;
    border: 1px solid #c9c3d4;
    border-radius: 3px;
    padding: 3px 6px;
    background: #fff;
    font: 700 11px/1 "FS Albert Web", calibri, tahoma, Arial, sans-serif;
    letter-spacing: 0.02em;
    color: #330066;
    cursor: pointer;
}

.portal-report-dl:hover {
    background: #f4f0fa;
    border-color: #7a0f8e;
    color: #330066;
    text-decoration: none;
}

.portal-report-dl:focus {
    outline: 2px solid #7a0f8e;
    outline-offset: 1px;
}

.portal-report-dl img {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
}

.portal-report-dl.is-working {
    min-width: 6.75rem;
    background: #faf8fc;
    border-color: #e2dee8;
    color: #7a6b8a;
    pointer-events: none;
    cursor: default;
}

.portal-report-dl .portal-report-dl-pct {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.portal-report-dl.is-ready {
    background: #f1f9f4;
    border-color: #1D6F42;
    color: #1D6F42;
    animation: portal-report-dl-glow 1.6s ease-in-out infinite;
}

.portal-report-dl.is-ready:hover {
    background: #e8f5ec;
    border-color: #1D6F42;
    color: #1D6F42;
}

.portal-report-dl.is-disabled {
    background: #faf8fc;
    border-color: #e2dee8;
    color: #7a6b8a;
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.portal-report-dl .portal-report-dl-dot {
    animation: portal-report-dl-dots 1.2s infinite;
}

.portal-report-dl .portal-report-dl-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.portal-report-dl .portal-report-dl-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.portal-report-dl-note {
    font-size: 11px;
    color: #555;
    margin-left: 4px;
}

@keyframes portal-report-dl-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29, 111, 66, 0); }
    50% { box-shadow: 0 0 0 3px rgba(29, 111, 66, 0.18); }
}

@keyframes portal-report-dl-dots {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-report-dl.is-ready {
        animation: none;
    }

    .portal-report-dl .portal-report-dl-dot {
        animation: none;
    }
}

/* Search Results Actions → Reports panel (XLSX rows) */
.rp-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding: 10px 0;
    flex: 1;
}

.rp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.rp-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 74px;
    box-sizing: border-box;
    padding: 3px 6px;
    border: 1px solid #c9c3d4;
    border-radius: 3px;
    background: #fff;
    text-decoration: none;
    font: 700 11px "FS Albert Web", Figtree, Roboto, sans-serif;
    letter-spacing: 0.02em;
    color: #330066;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.rp-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex: none;
}

.rp-btn:hover {
    background: #f4f0fa;
    border-color: #7a0f8e;
    color: #330066;
    text-decoration: none;
}

.rp-btn:focus-visible {
    outline: 2px solid #7a0f8e;
    outline-offset: 1px;
}

.rp-btn.is-working {
    background: #faf8fc;
    border-color: #e2dee8;
    pointer-events: none;
    cursor: default;
}

.rp-btn.is-ready {
    background: #f1f9f4;
    border-color: #1D6F42;
    color: #1D6F42;
    animation: rp-glow 1.6s ease-in-out infinite;
}

.rp-btn.is-ready:hover {
    background: #e8f5ec;
    border-color: #1D6F42;
    color: #1D6F42;
}

.rp-btn.is-locked {
    background: #f4f2f6;
    border-color: #d8d3de;
    color: #8b8194;
    cursor: default;
    pointer-events: none;
}

.rp-name {
    font: 400 11px "FS Albert Web", Figtree, Roboto, sans-serif;
    color: #3d3548;
}

.rp-name.is-muted {
    color: #8b8194;
}

.rp-row-views {
    align-items: center;
}

.rp-views {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    flex: 1;
}

.rp-views-label {
    font: 400 11px "FS Albert Web", Figtree, Roboto, sans-serif;
    color: #3d3548;
    line-height: 1.2;
    white-space: nowrap;
    flex: none;
}

.rp-views-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

.rp-view-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font: 400 11px "FS Albert Web", Figtree, Roboto, sans-serif;
    color: #3d3548;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.rp-view-opt.is-muted {
    color: #8b8194;
    cursor: default;
}

.rp-view-opt input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #330066;
    cursor: pointer;
}

.rp-view-opt.is-muted input[type="checkbox"] {
    cursor: default;
}

@keyframes rp-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29, 111, 66, 0); }
    50% { box-shadow: 0 0 0 3px rgba(29, 111, 66, 0.18); }
}

@keyframes rp-rows {
    0% { transform: translateY(6px); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-7px); opacity: 0; }
}

@keyframes rp-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2.5px); }
}

@keyframes rp-pop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.rp-r1 { animation: rp-rows 0.9s linear infinite; }
.rp-r2 { animation: rp-rows 0.9s linear infinite 0.45s; }
.rp-bob { animation: rp-bob 1.1s ease-in-out infinite; }
.rp-pop { animation: rp-pop 0.35s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .rp-btn.is-ready { animation: none; }
    .rp-r1, .rp-r2, .rp-bob, .rp-pop { animation: none; }
}