/* Components */
/* Certificate & generic ajax tables */
.bpajaxtable {
  width: 100%;
  table-layout: fixed;
  font-size: var(--font-size-sm); /* bump to base size for readability */
  border-collapse: collapse;
}
.bpajaxtable th,
.bpajaxtable td {
  padding: 2px 10px; /* increased vertical rhythm */
  border: none; /* Remove heavy grid lines */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.35; /* slightly relaxed for readability */
}
/* Header styling & row separators */
.bpajaxtable thead th {
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
}

/* Certificate list pages: let columns size to content.
   We keep horizontal scroll via #certificatelistpage overflow-x:auto (in style.css). */
#certificatelistpage .bpajaxtable {
  table-layout: auto;
  /* Allow the table to grow wider than the viewport when needed,
     while still keeping at least full width so percent-based col widths work. */
  width: max-content;
  min-width: 100%;
}

/* Remove legacy header bottom lines for unified look */
#priceTable td.header,
.statustable thead th,
.legendtable thead th {
  border-bottom: none !important;
}
*/ .bpajaxtable tbody tr:hover {
  background: var(--color-neutral-200);
}

/* Truncation wrapper (JS injects .cell-truncate) */
.cell-truncate {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* On small screens allow table cells to wrap instead of forcing ellipsis
   This reduces awkward '...' truncation when space is constrained. */
@media (max-width: 900px) {
  .bpajaxtable th,
  .bpajaxtable td,
  .table-modern td,
  .table-modern th {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
  .cell-truncate {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}


/* Partner mode table (replaces temporary diagnostic inline styles) */
#region Unified modern table styling
/* Generic modern table class */
.table-modern {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.table-modern th {
  background: var(--color-table-header-bg);
  text-align: left;
  padding: 8px 12px;
  color: var(--color-table-header-text);
}
.table-modern td {
  padding: 6px 10px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-modern tbody tr:hover {
  background: var(--color-neutral-200);
}

/* Apply modern styling to legacy tables without changing markup */
#priceTable,
.domainPriceTable,
table.orgOrderTable,
.multiDomainTable,
#certStatusOverview table.statustable,
#certStatusOverview table.legendtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.dealPriceTable {
 width: 55%;
}

#priceTable th,
.domainPriceTable th,
.dealPriceTable th,
table.orgOrderTable th,
.multiDomainTable th,
#certStatusOverview table.statustable th,
#certStatusOverview table.legendtable th,
#partnerlist th {
  background: var(--color-table-header-bg);
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  color: var(--color-table-header-text);
}
#priceTable td,
.domainPriceTable td,
.dealPriceTable td,
table.orgOrderTable td,
.multiDomainTable td,
#certStatusOverview table.statustable td,
#certStatusOverview table.legendtable td {
  padding: 1px 5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#priceTable tbody tr + tr td,
.domainPriceTable tbody tr + tr td,
.dealPriceTable tbody tr + tr td,
table.orgOrderTable tbody tr + tr td,
.multiDomainTable tbody tr + tr td,
#certStatusOverview table.statustable tbody tr + tr td,

/* #endregion Unified modern table styling */
#partnerModeSelectTable,
.partner-mode-table {
  font-size: var(--font-size-sm);
  border: none;
  background: var(--color-neutral-100);
}
#partnerModeSelectTable td,
.partner-mode-table td {
  padding: 0 5px;
  line-height: 1.4;
}
#partnerModeSelectTable tbody tr + tr td,
.partner-mode-table tbody tr + tr td {
  border-top: 1px solid var(--color-neutral-200);
}
#partnerModeSelectTable tbody tr:hover,
.partner-mode-table tbody tr:hover {
  background: var(--color-neutral-200);
}

#partnerModeSelectTable .modeTriggerLink,
#partnerModeSelectTable .modeTrigger {
  cursor: pointer;
}
#partnerModeSelectTable .modeTriggerLink {
  display: block;
  padding: 0.4rem 0.6rem 0.45rem;
  line-height: 1.3;
  border-radius: var(--radius-sm);
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#partnerModeSelectTable .modeTriggerLink:hover,
#partnerModeSelectTable .modeTriggerLink:focus {
  background: var(--color-neutral-200);
  outline: none;
}
#partnerModeSelectTable .modeTriggerLink:focus-visible {
  box-shadow: 0 0 0 2px var(--color-neutral-100), 0 0 0 4px var(--color-accent);
}
#partnerModeSelectTable tbody tr {
  transition: background-color 0.15s ease;
}

#partnerModeSelectTable tbody tr:focus-within {
  background: var(--color-neutral-250);
}

/* Accent bar on hover/focus for whole row */
#partnerModeSelectTable tbody tr:hover td:first-child::before,
#partnerModeSelectTable tbody tr:focus-within td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent);
  border-radius: 0 4px 4px 0;
}
#partnerModeSelectTable td:first-child {
  position: relative;
}

/* Responsive: stack rows on small screens */
@media (max-width: 600px) {
  #partnerModeSelectTable,
  #partnerModeSelectTable tbody,
  #partnerModeSelectTable tr {
    display: block;
  }
  #partnerModeSelectTable td {
    display: block;
    width: 100%;
  }
  #partnerModeSelectTable td:first-child {
    width: 100%;
    text-align: left;
    margin-bottom: var(--space-1);
  }
  /* No separate mobile font scaling needed currently */
}

/* Ensure radios inside .slightlyBiggerFont keep intended size and alignment
   (fixes cases where body-level rules or legacy CSS affect form controls) */
.slightlyBiggerFont input[type="radio"],
.slightlyBiggerFont input[type="checkbox"] {
  transform: none !important;
  width: auto !important;
  height: auto !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* Page-scoped adjustment: ensure tables under the org info page
   use identical widths without touching other `.crsInput` tables. */
#orgInfoEditPage table.crsInput {
  max-width: 460px;
  table-layout: fixed; /* stable column sizes */
  border-collapse: collapse;
}

#orgInfoEditPage table.crsInput td,
#orgInfoEditPage table.crsInput th {
  padding: 2px;
  vertical-align: middle;
}

/* Page-specific inputs sizing for org info page */
#orgInfoEditPage input#orgName,
#orgInfoEditPage input#orgNr,
#orgInfoEditPage input#orgAddress1,
#orgInfoEditPage input#orgAddress2 {
  width: 317px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Show a visible plus sign inside the small prefix inputs on org-info page.
   We position a pseudo-element over the left side of the small input so the
   plus appears visually inside the control while the underlying input value
   remains the country code. This is scoped to #orgInfoEditPage to avoid
   affecting other pages. */
#orgInfoEditPage .prefixWrap {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
#orgInfoEditPage .prefixWrap input.prefix {
  padding-left: 22px !important; /* enforce space so digits never overlap the + */
  box-sizing: border-box;
    padding-left: 28px !important; /* extra space for background plus */
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='12' font-family='Arial' fill='%23333'>+</text></svg>");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 12px 12px;
}

/* Generic prefixWrap rules for pages that include phone inputs via include_phones.jsp
   This enables the visible '+' glyph on pages like role creation/edit forms while
   allowing #orgInfoEditPage to override sizes and spacing where needed. */
.prefixWrap {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.prefixWrap input.prefix {
  padding-left: 22px !important; /* defensive: ensure padding even if other CSS overrides */
  box-sizing: border-box;
    padding-left: 28px !important; /* extra space for background plus */
    box-sizing: border-box;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='12' font-family='Arial' fill='%23333'>+</text></svg>");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 12px 12px;
}
/* removed ::before pseudo-element: we use background-image plus instead */

/* Make the phone input following the prefix slightly wider on org-info page */
/* Target the input element explicitly and increase specificity; use !important
   to override inline or stronger rules if necessary. Display as inline-block to
   ensure width applies consistently. */
#orgInfoEditPage .prefixWrap + input.phone,
#orgInfoEditPage .prefixWrap + input.defaultText.phone,
#orgInfoEditPage .prefixWrap + .defaultText.phone {
  display: inline-block;
  width: 226px !important; /* a bit wider than default */
  box-sizing: border-box !important;
}

/* choose_org_partner page: keep the "opprett ny" controls inline and
   allow the surrounding container to expand instead of letting inputs
   drop below or be clipped. This is scoped by selecting the partner
   list table's sibling action block so it won't affect unrelated pages. */
/* Stronger rule to override legacy styles that float the action block.
   Use a page-scoped, high-specificity selector and !important where
   necessary so the flex layout wins. */
table#partnerlist ~ div#tableAction, table#partnerlist ~ #tableAction {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  float: none !important;
  clear: both;
  width: 100%;
  overflow: visible;
}
table#partnerlist ~ #tableAction #countryInput,
table#partnerlist ~ #tableAction #tableInput {
  /* Do not force display here ? these are hidden by default (see style.css)
     and shown via JS (fadeIn). Keep positioning rules but allow the
     initial hidden state to remain until user clicks "opprett ny". */
  position: relative;
  top: 0;
  vertical-align: middle;
}
table#partnerlist ~ #tableAction #tableInput input[type="text"],
table#partnerlist ~ #tableAction #countryInput select {
  vertical-align: middle;
}
table#partnerlist ~ #tableAction #waitMsg {
  position: relative !important;
  top: 0 !important;
  margin-left: 8px;
  /* Let the inline style (display:none) control visibility until JS calls show().
     When shown, it will naturally become a block element. */
  width: 100% !important;
  order: 3;                     /* place after the inline controls in flex order */
  margin-top: 8px;             /* small gap above the message */
}

/* When a pager is present on the partner list page, keep it on the same
   horizontal line as the action controls. We place the pager to the right
   and allow the action block to take available space on the left. */
table#partnerlist + div#pager,
table#partnerlist ~ div#pager {
  margin-top: 6px;
  align-self: center;
  order: 2; /* ensure pager sits after action controls in flex ordering if placed adjacent */
}

/* If the pager follows the tableAction in the DOM, ensure they share the same row */
table#partnerlist ~ #tableAction + div#pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* push pager to the right */
}

/* Make pager's internal table compact and not force line-breaks */
div#pager table.noBorder { border-collapse: collapse; }
div#pager .pagesize { vertical-align: middle; }

/* If pager is included inside the action area, ensure it's placed on the right */
#tableAction div#pager {
  margin-left: auto !important;
  align-self: center !important;
  order: 2;
  display: flex !important;
  align-items: center !important;
}

/* Ensure loader image inside the partner action wait message is inline
   The global `img { display: block }` rule forces images to stack; here we
   specifically make the loader image inline and vertically centered. */
table#partnerlist ~ #tableAction #waitMsg img,
#tableAction #waitMsg img {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 18px !important;
  height: auto !important;
  margin-right: 8px !important;
}