/* ============================================================
   SURETY — Modern Redwood Theme Override  v2.0
   Oracle APEX 24.2 | Brand-Aligned Dark Redwood Aesthetic
   ============================================================
   CHANGELOG v2.0
   ─────────────────────────────────────────────────────────────
   • Interactive Grid — full overhaul: compact rows, frozen-col
     support, inline-edit focus ring, row-action micro-states,
     cell selection highlight, pagination pill bar
   • IR headers — kept deliberately slim (compact padding)
   • Region header — tightened vertical rhythm
   • Buttons — added :focus-visible ring, disabled state
   • Form fields — floating-label-ready structure
   • Cards region — subtle left-border accent on hover
   • Global — added container-query-ready wrapper token,
     reduced motion media query, print reset
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   1. ROOT VARIABLES
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── SURETY Brand Core ── */
  --brand-primary:       #1a0b5e;
  --brand-primary-light: #2d1a8f;
  --brand-primary-dark:  #0f0640;
  --brand-accent:        #4a2fb8;
  --brand-glow:          rgba(74, 47, 184, .25);
  --brand-glow-sm:       rgba(74, 47, 184, .15);

  /* ── Redwood Semantic Palette ── */
  --rw-success:    #1b875b;
  --rw-success-bg: #e8f5ec;
  --rw-warning:    #c5710b;
  --rw-warning-bg: #fef4e4;
  --rw-danger:     #c74634;
  --rw-danger-bg:  #fcecea;
  --rw-info:       #1b6cb5;
  --rw-info-bg:    #e6f0fa;

  /* ── Neutral Surface System ── */
  --surface-ground:  #f4f4f6;
  --surface-card:    #ffffff;
  --surface-overlay: #ffffff;
  --surface-raised:  #fafafb;
  --surface-border:  #e2e2e8;
  --surface-hover:   #eeeef3;
  --surface-active:  #e4e4ec;

  /* ── Typography Colors ── */
  --text-primary:   #1d1d21;
  --text-secondary: #585862;
  --text-tertiary:  #8a8a98;
  --text-inverse:   #ffffff;
  --text-brand:     var(--brand-primary);
  --text-disabled:  #b0b0be;

  /* ── Accent Metals ── */
  --accent-gold:    #d4a017;
  --accent-gold-bg: linear-gradient(90deg, var(--accent-gold) 0%, #e6b422 100%);

  /* ── Elevation (Redwood layered shadows) ── */
  --elevation-0:  none;
  --elevation-1:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elevation-2:  0 4px 12px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --elevation-3:  0 10px 30px rgba(0,0,0,.1),  0 2px 8px rgba(0,0,0,.04);

  /* ── Motion Tokens ── */
  --motion-ease:     cubic-bezier(.4, 0, .2, 1);
  --motion-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --motion-duration: .2s;
  --motion-slow:     .35s;

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill:  999px;

  /* ── Grid-Specific Tokens ── */
  --grid-row-height:        36px;
  --grid-header-height:     34px;
  --grid-cell-padding:      6px 10px;
  --grid-header-padding:    6px 10px;
  --grid-font-size:         13px;
  --grid-header-font-size:  12px;
  --grid-row-selected-bg:   rgba(74, 47, 184, .08);
  --grid-row-selected-border: var(--brand-accent);
  --grid-cell-focus-ring:   0 0 0 2px var(--brand-glow);
  --grid-frozen-shadow:     4px 0 8px -2px rgba(0,0,0,.08);

  /* ═══ APEX / Redwood Variable Overrides ═══ */
  --ut-nav-background-color:         var(--brand-primary-dark);
  --ut-nav-text-color:               #c5c1d9;
  --ut-nav-icon-color:               #8a83a8;
  --ut-nav-item-hover-background:    rgba(255,255,255,.08);
  --ut-nav-item-active-background:   var(--brand-accent);
  --ut-nav-item-active-text:         #ffffff;
  --ut-nav-border-color:             rgba(255,255,255,.08);
  --ut-nav-separator-color:          rgba(255,255,255,.06);

  /* Redwood Component Tokens */
  --a-button-background-color:       var(--brand-primary);
  --a-button-text-color:             var(--text-inverse);
  --ut-component-background-color:   var(--surface-card);
  --ut-component-text-default-color: var(--text-primary);
  --ut-component-border-color:       var(--surface-border);
  --ut-body-background-color:        var(--surface-ground);
}


/* ═══════════════════════════════════════════════════════════
   2. GLOBAL RESETS & BASE
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   3. NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.t-TreeNav,
.t-SideNav,
.rw-Sidebar,
.rw-Nav {
  background-color: var(--ut-nav-background-color);
  border-right: 1px solid var(--ut-nav-border-color);
  backdrop-filter: blur(12px);
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
.t-NavigationBar-item > a,
.rw-Nav-item > a {
  color: var(--ut-nav-text-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 2px 8px;
  transition: background var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease);
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content:hover,
.t-NavigationBar-item > a:hover,
.rw-Nav-item > a:hover {
  background-color: var(--ut-nav-item-hover-background);
  color: #ffffff;
}

.t-TreeNav .a-TreeView-node.is-selected > .a-TreeView-content,
.t-NavigationBar-item.is-active > a,
.rw-Nav-item.is-current > a {
  background-color: var(--ut-nav-item-active-background);
  color: var(--ut-nav-item-active-text) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(74, 47, 184, .35);
}

.t-TreeNav .a-TreeView-icon,
.fa.t-Icon,
.rw-Nav-icon {
  color: var(--ut-nav-icon-color);
  transition: color var(--motion-duration) var(--motion-ease);
}

.t-TreeNav .a-TreeView-node--topLevel + .a-TreeView-node--topLevel::before {
  border-top-color: var(--ut-nav-separator-color);
}

/* Pillar Navigation */
.rw-mode-nav--pillar .rw-Nav {
  background-color: var(--ut-nav-background-color);
}
.rw-Pillar-nav--item {
  color: var(--ut-nav-text-color);
  transition: all var(--motion-duration) var(--motion-ease);
}
.rw-Pillar-nav--item:hover {
  background-color: var(--ut-nav-item-hover-background);
}
.rw-Pillar-nav--item.is-active {
  background-color: var(--ut-nav-item-active-background);
  color: var(--ut-nav-item-active-text);
}


/* ═══════════════════════════════════════════════════════════
   4. REGIONS (Redwood Card Style)
   ═══════════════════════════════════════════════════════════ */
.t-Region {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow var(--motion-duration) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease);
}

.t-Region:hover {
  box-shadow: var(--elevation-2);
  border-color: rgba(26, 11, 94, .12);
}

/* Region Header — brand strip + gold underline (compact) */
.t-Region-header,
.t-Region--accent1 .t-Region-header {
  background: var(--brand-primary);
  color: var(--text-inverse);
  padding: 10px 18px;
  border-bottom: 2px solid var(--accent-gold);
  position: relative;
  overflow: hidden;
}

/* Shimmer on hover */
.t-Region-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s var(--motion-ease);
  pointer-events: none;
}
.t-Region-header:hover::after {
  transform: translateX(100%);
}

.t-Region-title {
  color: var(--text-inverse);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .3px;
}


/* ═══════════════════════════════════════════════════════════
   5. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════ */
.t-Form-label {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  margin-bottom: 6px;
  display: block;
}

.apex-item-text,
.apex-item-select,
.apex-item-textarea {
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color var(--motion-duration) var(--motion-ease),
              box-shadow var(--motion-duration) var(--motion-ease);
}

.apex-item-text:focus,
.apex-item-select:focus,
.apex-item-textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-glow);
  background: var(--surface-card);
}

/* Read-only fields */
.apex-item-text[readonly],
.apex-item-textarea[readonly] {
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: default;
  border-style: dashed;
}

/* Required Fields — warm amber indicator */
.apex-item-wrapper.is-required .apex-item-text,
.apex-item-wrapper.is-required select,
.apex-item-wrapper.is-required textarea,
.required {
  background-color: #fffcf5;
  border: 1.5px solid #edc667;
  border-left: 4px solid var(--rw-warning);
  transition: all var(--motion-duration) var(--motion-ease);
}

.apex-item-wrapper.is-required .apex-item-text:focus,
.apex-item-wrapper.is-required select:focus,
.apex-item-wrapper.is-required textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-glow);
  background: var(--surface-card);
}

.apex-item-wrapper.is-required label::after {
  content: " *";
  color: var(--rw-danger);
  font-weight: 700;
  font-size: 1.1em;
}

.t-Form-fieldContainer {
  margin-bottom: 20px;
  position: relative;
}

.t-Form-error {
  background: var(--rw-danger-bg);
  border-left: 4px solid var(--rw-danger);
  padding: 8px 14px;
  margin-top: 6px;
  color: #8b1a1a;
  font-size: 13px;
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
}


/* ═══════════════════════════════════════════════════════════
   6. BUTTONS (Redwood Style)
   ═══════════════════════════════════════════════════════════ */
.t-Button {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .2px;
  transition: all var(--motion-duration) var(--motion-ease);
  margin-right: 8px;
}

.t-Button--hot,
.t-Button--primary {
  background: var(--brand-primary);
  border: none;
  color: var(--text-inverse);
  padding: 10px 26px;
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
  position: relative;
  overflow: hidden;
}

.t-Button--hot::before,
.t-Button--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--motion-duration) var(--motion-ease);
}

.t-Button--hot:hover,
.t-Button--primary:hover {
  background: var(--brand-primary-dark);
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}
.t-Button--hot:hover::before,
.t-Button--primary:hover::before {
  opacity: 1;
}

.t-Button--hot:active,
.t-Button--primary:active {
  transform: translateY(0);
  box-shadow: var(--elevation-1);
}

/* Focus ring for keyboard navigation */
.t-Button:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Disabled state */
.t-Button:disabled,
.t-Button.is-disabled {
  opacity: .45;
  pointer-events: none;
  box-shadow: none;
}

/* NavBar Button */
.t-Button--navBar {
  transition: all var(--motion-duration) var(--motion-ease);
}
.t-Button--navBar:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
}
.t-Button--navBar .t-Button-label,
.t-NavTabs .t-Button-label {
  text-transform: none;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════
   7. TABLE & IR/CLASSIC REPORT HEADERS
      ── Identical to IG header (same tokens, sticky, slim) ──
   ═══════════════════════════════════════════════════════════ */

/* Sticky header row — IR */
.a-IRR-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Sticky header row — Classic Report */
.t-Report-report thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ── Shared header cell style (IR + Classic = IG identical) ── */
.a-IRR-header,
.t-Report-report th {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: var(--grid-header-font-size);       /* 12px — same as IG */
  padding: var(--grid-header-padding);            /* 6px 10px — same as IG */
  height: var(--grid-header-height);              /* 34px — same as IG */
  line-height: 1.3;
  letter-spacing: .3px;
  text-transform: capitalize;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 2px solid var(--accent-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: background var(--motion-duration) var(--motion-ease);
  user-select: none;
}

.a-IRR-header:last-child,
.t-Report-report th:last-child {
  border-right: none;
}

.a-IRR-header:hover,
.t-Report-report th:hover {
  background: var(--brand-primary-light);
}

/* Sort icon */
.a-IRR-header .a-IRR-sort-icon {
  color: var(--text-inverse);
  opacity: .8;
  font-size: 11px;
  margin-left: 4px;
}

.a-IRR-header:hover .a-IRR-sort-icon {
  opacity: 1;
}

/* ── IR Controls & Toolbar ── */
.a-IRR-controls,
.a-IRR-controlsContainer,
.a-Toolbar {
  background: var(--surface-card);
}

.a-IRR-controls .a-IRR-button,
.a-IRR-controls .a-Button,
.a-Toolbar-item .a-Button,
.a-IRR-controls a,
.a-IRR-controlsLabel,
.a-IRR-search .a-IRR-button--remove,
.a-IRR-sortWidget-button {
  color: var(--text-primary) !important;
}

.a-IRR-controls .a-IRR-button:hover,
.a-Toolbar-item .a-Button:hover {
  background: var(--surface-hover);
  color: var(--brand-primary) !important;
}

/* IR Search input */
.a-IRR-search-field {
  border: 1.5px solid var(--surface-border);
  color: var(--text-primary);
  background: var(--surface-card);
}


/* ═══════════════════════════════════════════════════════════
   8. TABLE ROWS (IR + Classic Report)
   ═══════════════════════════════════════════════════════════ */
.a-IRR-table tbody td,
.t-Report-report tbody td {
  font-size: var(--grid-font-size);           /* 13px */
  padding: var(--grid-cell-padding);          /* 6px 10px */
  height: var(--grid-header-height);          /* 34px */
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-IRR-table tbody tr,
.t-Report-report tbody tr {
  height: var(--grid-header-height);          /* 34px */
}




/* ═══════════════════════════════════════════════════════════
   9. INTERACTIVE GRID — FULL OVERHAUL
   ═══════════════════════════════════════════════════════════ */

/* ── 9a. Grid Container & Toolbar ── */
.a-IG {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-1);
}

.a-IG .a-Toolbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  padding: 4px 8px;
  min-height: 38px;
  gap: 4px;
}

/* Toolbar buttons — compact, branded hover */
.a-IG .a-Toolbar .a-Button,
.a-IG .a-Toolbar .a-Toolbar-item .a-Button {
  border-radius: var(--radius-xs);
  font-size: 12px;
  padding: 4px 8px;
  color: var(--text-secondary);
  transition: all var(--motion-duration) var(--motion-ease);
}

.a-IG .a-Toolbar .a-Button:hover {
  background: var(--surface-hover);
  color: var(--brand-primary);
}

.a-IG .a-Toolbar .a-Button.is-active,
.a-IG .a-Toolbar .a-Button.is-hot {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* Search field in IG toolbar */
.a-IG .a-Toolbar .a-IG-searchField,
.a-IG .a-Toolbar input[type="text"] {
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  padding: 4px 10px;
  background: var(--surface-card);
  transition: border-color var(--motion-duration) var(--motion-ease),
              box-shadow var(--motion-duration) var(--motion-ease);
}

.a-IG .a-Toolbar .a-IG-searchField:focus,
.a-IG .a-Toolbar input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: var(--grid-cell-focus-ring);
}

/* ── 9b. Grid Header — SLIM & sticky ── */
.a-GV-header,
.a-IG .a-GV-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brand-primary);
  box-shadow: 0 1px 0 var(--surface-border);
  color: var(--text-inverse);
}

.a-GV-header .a-GV-headerCell,
.a-GV-headerCell {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: var(--grid-header-font-size);
  padding: var(--grid-header-padding);
  height: var(--grid-header-height);
  line-height: 1.3;
  letter-spacing: .3px;
  text-transform: capitalize;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 2px solid var(--accent-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--motion-duration) var(--motion-ease);
  user-select: none;
}

.a-GV-headerCell:last-child {
  border-right: none;
}

.a-GV-headerCell:hover {
  background: var(--brand-primary-light);
}

/* Sort icon inside IG header */
.a-GV-headerCell .a-GV-headerIcon,
.a-GV-headerCell .a-Icon {
  color: var(--text-inverse);
  opacity: .8;
  font-size: 11px;
  margin-left: 4px;
}

.a-GV-headerCell:hover .a-GV-headerIcon,
.a-GV-headerCell:hover .a-Icon {
  opacity: 1;
}

/* Column resize handle */
.a-GV-headerCell .a-GV-columnSeparator {
  border-right: 2px solid rgba(255,255,255,.15);
  cursor: col-resize;
  transition: border-color var(--motion-duration) var(--motion-ease);
}

.a-GV-headerCell .a-GV-columnSeparator:hover {
  border-right-color: var(--accent-gold);
}

/* ── 9c. Grid Rows & Cells ── */
.a-GV-row,
.a-GV-table .a-GV-row {
  height: var(--grid-row-height);
  border-bottom: 1px solid var(--surface-border);
  transition: background var(--motion-duration) var(--motion-ease);
}

.a-GV-cell,
.a-GV-table .a-GV-cell {
  font-size: var(--grid-font-size);
  padding: var(--grid-cell-padding);
  color: var(--text-primary);
  border-right: 1px solid var(--surface-border);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--motion-duration) var(--motion-ease);
}

.a-GV-cell:last-child {
  border-right: none;
}

/* Zebra striping */
.a-GV-row:nth-child(even) {
  background: var(--surface-raised);
}

/* Row hover — left accent bar */
.a-GV-row:hover {
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--brand-accent);
}

.a-GV-row:hover .a-GV-cell {
  color: var(--text-primary);
}

/* ── 9d. Row Selection ── */
.a-GV-row.is-selected,
.a-GV-row.is-active {
  background: var(--grid-row-selected-bg) !important;
  box-shadow: inset 3px 0 0 var(--grid-row-selected-border);
}

.a-GV-row.is-selected .a-GV-cell {
  color: var(--brand-primary);
  font-weight: 500;
}

/* Row checkbox / selector column */
.a-GV-selHeader,
.a-GV-selCell {
  text-align: center;
  width: 38px;
  min-width: 38px;
}

.a-GV-selCell input[type="checkbox"] {
  accent-color: var(--brand-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Row number column */
.a-GV-rownum {
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
  min-width: 36px;
}

/* ── 9e. Cell Focus & Inline Edit ── */
.a-GV-cell:focus,
.a-GV-cell.is-focused {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-accent);
  background: rgba(74, 47, 184, .04);
  z-index: 2;
  position: relative;
}

/* Inline edit mode */
.a-GV-cell.is-active,
.a-GV-cell.is-edit {
  background: #fffef5;
  box-shadow: inset 0 0 0 2px var(--accent-gold);
  z-index: 3;
  position: relative;
}

.a-GV-cell.is-active input,
.a-GV-cell.is-active select,
.a-GV-cell.is-active textarea,
.a-GV-cell.is-edit input,
.a-GV-cell.is-edit select,
.a-GV-cell.is-edit textarea {
  font-size: var(--grid-font-size);
  padding: 2px 6px;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: var(--text-primary);
}

/* Changed/dirty cells indicator */
.a-GV-cell.is-changed,
.a-GV-cell.is-dirty {
  background: #fefff0;
  box-shadow: inset 2px 0 0 var(--rw-warning);
}

/* Error cell */
.a-GV-cell.has-error {
  background: var(--rw-danger-bg);
  box-shadow: inset 2px 0 0 var(--rw-danger);
}

/* ── 9f. Frozen Columns ── */
.a-GV-w-frozen .a-GV-table {
  box-shadow: var(--grid-frozen-shadow);
  z-index: 5;
  position: relative;
}

.a-GV-w-frozen .a-GV-headerCell {
  background: var(--brand-primary-dark);
}

.a-GV-w-frozen .a-GV-cell {
  background: var(--surface-card);
  border-right-color: var(--surface-border);
}

.a-GV-w-frozen .a-GV-row:nth-child(even) .a-GV-cell {
  background: var(--surface-raised);
}

.a-GV-w-frozen .a-GV-row:hover .a-GV-cell {
  background: var(--surface-hover);
}

/* ── 9g. Row Actions (hamburger menu) ── */
.a-GV-rowActions {
  text-align: center;
}

.a-GV-rowActionsBtn,
.a-GV-rowActions .a-Button {
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-size: 14px;
  transition: all var(--motion-duration) var(--motion-ease);
}

.a-GV-rowActionsBtn:hover,
.a-GV-rowActions .a-Button:hover {
  background: var(--surface-hover);
  color: var(--brand-primary);
}

/* ── 9h. Pagination ── */
.a-IG .a-GV-footer,
.a-IG .a-GV-pagination {
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.a-IG .a-GV-pageRange {
  color: var(--text-secondary);
  font-weight: 500;
}

.a-IG .a-GV-pageSelector .a-GV-pageButton,
.a-IG .a-GV-pagination .a-Button {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  transition: all var(--motion-duration) var(--motion-ease);
  cursor: pointer;
}

.a-IG .a-GV-pageSelector .a-GV-pageButton:hover,
.a-IG .a-GV-pagination .a-Button:hover {
  background: var(--surface-hover);
  color: var(--brand-primary);
  border-color: var(--brand-accent);
}

.a-IG .a-GV-pageSelector .a-GV-pageButton.is-active,
.a-IG .a-GV-pagination .a-Button.is-active {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
  font-weight: 600;
}

/* ── 9i. Grid in Edit Mode — status bar ── */
.a-IG-statusBar {
  background: var(--rw-info-bg);
  border-top: 1px solid rgba(27, 108, 181, .2);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--rw-info);
  font-weight: 500;
}

/* Add/insert row highlight */
.a-GV-row.is-inserted,
.a-GV-row.is-new {
  background: rgba(27, 135, 91, .06) !important;
  box-shadow: inset 3px 0 0 var(--rw-success);
}

/* Delete row strike-through */
.a-GV-row.is-deleted {
  opacity: .45;
  text-decoration: line-through;
  background: var(--rw-danger-bg);
  pointer-events: none;
}

/* ── 9j. Grid No-Data Message ── */
.a-GV-noDataMsg,
.a-IG .a-GV-w-scroll .a-GV-noDataMsg {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
  font-style: italic;
}

/* ── 9k. Column Header Menu / Column Actions ── */
.a-IG-columnHeaderMenu,
.a-GV-columnHeaderMenu {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  overflow: hidden;
}

.a-IG-columnHeaderMenu .a-Menu-item,
.a-GV-columnHeaderMenu .a-Menu-item {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-primary);
  transition: background var(--motion-duration) var(--motion-ease);
}

.a-IG-columnHeaderMenu .a-Menu-item:hover,
.a-GV-columnHeaderMenu .a-Menu-item:hover {
  background: var(--surface-hover);
  color: var(--brand-primary);
}

/* ── 9l. Grid Aggregation / Summary Row ── */
.a-GV-footer .a-GV-aggregateRow,
.a-GV-aggregateRow {
  background: var(--surface-raised);
  border-top: 2px solid var(--brand-primary);
  font-weight: 700;
  font-size: var(--grid-font-size);
  color: var(--brand-primary);
}

.a-GV-aggregateRow .a-GV-cell {
  padding: var(--grid-cell-padding);
  border-right: 1px solid var(--surface-border);
}


/* ═══════════════════════════════════════════════════════════
   10. ALERTS (Redwood-style)
   ═══════════════════════════════════════════════════════════ */
.t-Alert--success {
  background: var(--rw-success-bg);
  border-left: 4px solid var(--rw-success);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--elevation-1);
}

.t-Alert--danger {
  background: var(--rw-danger-bg);
  border-left: 4px solid var(--rw-danger);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--elevation-1);
}

.t-Alert--info {
  background: var(--rw-info-bg);
  border-left: 4px solid var(--rw-info);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--elevation-1);
}


/* ═══════════════════════════════════════════════════════════
   11. LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.t-Login-container {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-3) !important;
  overflow: hidden;
  position: relative;
}

.t-Login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent-gold-bg);
   background-color: transparent !important;
    box-shadow: none !important; /* optional: remove shadow */
    border: 1px solid #ccc;    /* optional: remove border */
    border-radius: 6px; 
}

.t-Login-logo {
  background: transparent !important;
  padding: 36px;
}


/* ═══════════════════════════════════════════════════════════
   12. LINK LIST & ACTIVE STATES
   ═══════════════════════════════════════════════════════════ */
.t-LinksList-item.is-active a,
.a-IRR-button--hot {
  background: var(--brand-primary);
  box-shadow: var(--elevation-1);
}


/* ═══════════════════════════════════════════════════════════
   13. BADGES & TAGS
   ═══════════════════════════════════════════════════════════ */
.badge-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════
   14. LANGUAGE SWITCH
   ═══════════════════════════════════════════════════════════ */
.lang-switch-wrapper {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1.5px solid var(--brand-accent);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--motion-duration) var(--motion-ease);
}
.lang-switch-wrapper:hover {
  box-shadow: var(--elevation-2);
}

.lang-switch-wrapper .t-Form-label {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--brand-primary) !important;
  letter-spacing: .4px;
}


/* ═══════════════════════════════════════════════════════════
   15. SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--surface-ground);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-accent);
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface-ground);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}

/* IG-specific thin scrollbar */
.a-GV-w-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.a-GV-w-scroll::-webkit-scrollbar-thumb {
  border-width: 1px;
}


/* ═══════════════════════════════════════════════════════════
   16. LOADING STATES
   ═══════════════════════════════════════════════════════════ */
@keyframes rw-spin {
  to { transform: rotate(360deg); }
}

.u-Processing {
  border: 3px solid rgba(26, 11, 94, .1);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: rw-spin .7s linear infinite;
}

.is-loading {
  opacity: .55;
  pointer-events: none;
  position: relative;
}
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(26, 11, 94, .1);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: rw-spin .7s linear infinite;
}


/* ═══════════════════════════════════════════════════════════
   17. ACCESSIBILITY FOCUS
   ═══════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════
   18. ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes rw-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: rw-fadeUp .4s var(--motion-ease) both;
}


/* ═══════════════════════════════════════════════════════════
   19. LOGO
   ═══════════════════════════════════════════════════════════ */
.logo-text {
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .5px;
}



/* ═══════════════════════════════════════════════════════════
   TABS REGION – Surety Identity
   ═══════════════════════════════════════════════════════════ */
:root {
  --surety-primary:        #1a1a5e;
  /*--surety-accent:         #e87722;*/
  --surety-accent:         #1a1a5e;
  --surety-accent-light:   rgba(232, 119, 34, .08);
  --surety-text-muted:     #9ca3af;
  --surety-text-hover:     #1a1a5e;
  /*  
  --ut-tabs-item-active-text-color:       var(--surety-primary);
  --ut-tabs-item-active-background-color: var(--surety-accent-light);
  --ut-tabs-item-active-highlight-color:  var(--surety-accent);
  */  
   --ut-tabs-item-active-text-color:       #ffffff;
  --ut-tabs-item-active-background-color: #1a1a5e;
  --ut-tabs-item-active-highlight-color:  #1a1a5e;
}

/* Active Tab 
.t-TabsRegion-items .t-TabsRegion-item.is-active a {
  color: var(--surety-primary) !important;
  border-bottom: 3px solid var(--surety-accent) !important;
  font-weight: 700 !important;
  background: var(--surety-accent-light) !important;
  border-radius: 6px 6px 0 0;
  padding: 12px 24px !important;
}*/


.t-TabsRegion-items .t-TabsRegion-item.is-active a {
  color: #ffffff !important;
  background: #1a1a5e !important;
  /*border-bottom: 3px solid var(--surety-accent) !important;*/
  font-weight: 700 !important;
  border-radius: 6px 6px 0 0;
  padding: 12px 24px !important;
}

/* Inactive Tabs */
.t-TabsRegion-items .t-TabsRegion-item:not(.is-active) a {
  color: var(--surety-text-muted) !important;
  padding: 12px 24px !important;
  transition: color .2s ease, background .2s ease;
}

.t-TabsRegion-items .t-TabsRegion-item:not(.is-active) a:hover {
  color: var(--surety-text-hover) !important;
  background: rgba(26, 26, 94, .04) !important;
  border-radius: 6px 6px 0 0;
}

/* Gap between master and tabs */
.t-TabsRegion {
  margin-top: 24px !important;
}

/* Tab → Region content gap */
.t-TabsRegion-region {
  margin-top: 12px !important;
  padding: 12px 16px !important;
}


/* ═══════════════════════════════════════════════════════════
   21. PRINT RESET
   ═══════════════════════════════════════════════════════════ */
@media print {
  .t-TreeNav,
  .t-SideNav,
  .rw-Sidebar,
  .rw-Nav,
  .a-Toolbar,
  .a-IG .a-GV-footer { display: none !important; }

  .t-Region,
  .a-IG { box-shadow: none !important; border: 1px solid #ccc; }

  .a-GV-headerCell {
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .a-GV-row:hover { box-shadow: none; }
}


/* ═══════════════════════════════════════════════════════════
   22. ATTACHMENT ICON (fa-paperclip) — IG & Report Rows
   ═══════════════════════════════════════════════════════════ */

/* ── Base paperclip icon in any grid/report cell ── */
.a-GV-cell .fa-paperclip,
.a-IRR-table td .fa-paperclip,
.t-Report-report td .fa-paperclip {
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--motion-duration) var(--motion-ease),
              transform var(--motion-duration) var(--motion-spring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
}

/* Hover — brand color + subtle lift */
.a-GV-cell .fa-paperclip:hover,
.a-IRR-table td .fa-paperclip:hover,
.t-Report-report td .fa-paperclip:hover {
  color: var(--brand-primary);
  background: var(--brand-glow-sm);
  transform: scale(1.15);
}

/* Active/pressed state */
.a-GV-cell .fa-paperclip:active,
.a-IRR-table td .fa-paperclip:active,
.t-Report-report td .fa-paperclip:active {
  transform: scale(.95);
  color: var(--brand-primary-dark);
}

/* ── "Has attachment" state — icon is visually prominent ── */
.a-GV-cell .fa-paperclip.has-attachment,
.a-IRR-table td .fa-paperclip.has-attachment,
.t-Report-report td .fa-paperclip.has-attachment,
.a-GV-cell.has-attachment .fa-paperclip,
.a-IRR-table td.has-attachment .fa-paperclip,
.t-Report-report td.has-attachment .fa-paperclip {
  color: var(--brand-accent);
  font-weight: 900;
}

/* ── "No attachment" state — dimmed, non-interactive look ── */
.a-GV-cell .fa-paperclip.no-attachment,
.a-IRR-table td .fa-paperclip.no-attachment,
.t-Report-report td .fa-paperclip.no-attachment,
.a-GV-cell.no-attachment .fa-paperclip,
.a-IRR-table td.no-attachment .fa-paperclip,
.t-Report-report td.no-attachment .fa-paperclip {
  color: var(--surface-border);
  opacity: .5;
  pointer-events: none;
}

/* ── Attachment column cell — center-aligned, slim ── */
td[headers*="ATTACHMENT"] .fa-paperclip,
td.attachment-col .fa-paperclip,
.a-GV-cell.attachment-col .fa-paperclip {
  display: flex;
  margin: 0 auto;
}

td[headers*="ATTACHMENT"],
td.attachment-col,
.a-GV-cell.attachment-col {
  text-align: center;
  width: 44px;
  min-width: 44px;
  max-width: 52px;
}

/* ── Paperclip inside IG header (column icon) ── */
.a-GV-headerCell .fa-paperclip {
  color: var(--text-inverse);
  font-size: 12px;
  opacity: .85;
}

/* ── Link-wrapped paperclip (clickable attachment) ── */
a .fa-paperclip,
.t-Report-report td a .fa-paperclip,
.a-IRR-table td a .fa-paperclip,
.a-GV-cell a .fa-paperclip {
  text-decoration: none;
  color: var(--brand-accent);
  transition: color var(--motion-duration) var(--motion-ease),
              transform var(--motion-duration) var(--motion-spring);
}

a:hover .fa-paperclip,
.t-Report-report td a:hover .fa-paperclip,
.a-IRR-table td a:hover .fa-paperclip,
.a-GV-cell a:hover .fa-paperclip {
  color: var(--brand-primary);
  transform: scale(1.15) rotate(-8deg);
}

/* ── Focus ring for keyboard accessibility ── */
a:focus-visible .fa-paperclip,
.a-GV-cell a:focus-visible .fa-paperclip {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}