/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */



 /* DEFAULT: all pages = white */
    html,
    body {
        background-color: #ffffff !important;
        color: #111827;
    }

    /* Make sure containers don’t re-introduce background */
    #mainContent,
    .wrapper-body,
    .page-copy,
    .content-wrapper,
    .page-wrapper {
        background: transparent !important;
    }

    /* HOME ONLY: dark background (body gets .home-page class) */
    
    /* body.home-page {
        background-color: #020918 !important;   
        
        color: #f5f5f5;
    }
     
    */
/* =========================================================
   FONT SYSTEM — ADOBE FONTS
   Proxima Nova (Headings), Acumin Pro (Body)
   ========================================================= */

:root {
  --font-headline: "proxima-nova", "Proxima Nova", sans-serif;
  --font-body: "acumin-pro", "Acumin Pro", sans-serif;
}

/* Smooth rendering */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body text */
body {
  font-family: var(--font-body) !important;
  line-height: 1.65;
  font-weight: 400;
  color: #f1f1f1;
}

/* General headings & UI labels (but NOT icons) */
h1, h2, h3, h4, h5, h6,
.navbar .nav-link,
.btn,
button,
.hero-title {
  font-family: var(--font-headline) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ffffff;
}

/* Content-block typography (page sections / CMS content) */
.sectionBlockLayout p,
.sectionBlockLayout li,
.sectionBlockLayout span,
.sectionBlockLayout a {
  font-family: var(--font-body), sans-serif;
}

.sectionBlockLayout h1,
.sectionBlockLayout h2,
.sectionBlockLayout h3,
.sectionBlockLayout h4,
.sectionBlockLayout h5,
.sectionBlockLayout h6 {
  font-family: var(--font-headline), sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Make sure lists use Acumin */
ul, ol {
    font-family: "acumin-pro", "Acumin Pro", sans-serif;
}

/* Buttons (text part) */
.btn,
button,
.pcf-button {
    font-family: "proxima-nova", "Proxima Nova", sans-serif;
    font-weight: 600;
}

/* Optional — smaller text & labels */
small,
label,
.form-label {
  font-family: var(--font-body) !important;
  opacity: 0.95;
}

/* Improve readability of service lists */
.services-section ul li,
.services-list li {
    color: #1A1A1A !important;  /* deep charcoal for readability */
    opacity: 1 !important;      /* remove fade-out effect */
    font-family: var(--font-body) !important;
    font-size: 1.06rem;
    line-height: 1.55;
    margin-bottom: 4px;
}

/* FIX POWER PAGES WASHED-OUT HEADINGS */
.sectionBlockLayout h1,
.sectionBlockLayout h2,
.sectionBlockLayout h3 {
    opacity: 1 !important;
    color: #1A1A1A !important; /* deep neutral for readability */
}

/* If your headings should use Coral */
.sectionBlockLayout h2.service-heading,
h2.service-heading {
    color: var(--af-coral, #FF6F61) !important;
}

/* =========================================================
   PROTECT ICON FONTS (NO MORE BROKEN SQUARES)
   ========================================================= */

/* Font Awesome icons – search, upload arrow, etc. */
.fa,
.fa::before,
span.fa,
div.fa {
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 4", sans-serif !important;
    font-style: normal !important;
    font-weight: 900 !important; /* safe for FA5 solid */
}

/* Fluent / Fabric icons used by modern Power Pages */
.ms-Icon-root,
[class^="ms-Icon--"],
[class*=" ms-Icon--"] {
    font-family: "FabricMDL2Icons", "Segoe MDL2 Assets", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
}

/* Make lookup & upload icons a nice dark grey */
.btn .fa-search,
.btn .fa-arrow-up {
    color: #111827 !important;
}

/* =========================================================
   SWIFT EVIDENCE DESCRIPTION (FORM)
   ========================================================= */

/* Make SWIFT Evidence Description textarea taller */
#olex_swiftevidencedescription {
    min-height: 200px !important;  /* adjust height */
    resize: vertical;              /* allow user to resize */
    font-size: 14px;               /* optional: bigger text */
    line-height: 1.4;              /* better readability */
}

/* SWIFT Evidence Description – READ-ONLY: let it grow, no inner scrollbar */
.entity-form [data-name="olex_swiftevidencedescription"] .value,
.entity-form [data-name="olex_swiftevidencedescription"] .readonly-textarea,
.entity-form [data-name="olex_swiftevidencedescription"] .static-text {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;   /* remove the little scroll bar */
}

/* SWIFT Evidence Description – EDITABLE: make the textarea tall */
.entity-form [data-name="olex_swiftevidencedescription"] textarea,
.entity-form [data-name="olex_swiftevidencedescription"] textarea.form-control {
  height: 600px !important;       /* adjust to taste */
  min-height: 600px !important;
  max-height: none !important;
  resize: vertical !important;     /* allow user to drag taller */
}

/* Narrow the notes area a little and separate items */
.entity-form .notes,
.entity-form .timeline { margin-top: .5rem; }

.entity-form .timeline .note,
.entity-form .note {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}

/* Hide noisy meta (author/time) — keep if you need it */
.entity-form .note .createdon,
.entity-form .note .created-by,
.entity-form .note .user,
.entity-form .note time { display: none; }

/* Make attached file links look like chips */
.entity-form .note .attachment a {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #f3f4f6;
  text-decoration: none;
  margin-right: 6px;
}

/* Make the 'Add note' button look primary */
.entity-form .add-note,
.entity-form button.addNote {
  background: #2563eb;       /* brand color */
  color: #fff;
  border-color: #2563eb;
  border-radius: 10px;
  padding: 8px 14px;
}

/* Card styling for each note row */
.entity-form li.note,
.entity-form .note,
.entity-form .timeline li,
.entity-form .annotations li {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  list-style: none !important;
}

/* Shrink/hide meta noise if you want a clean look */
.entity-form .note .createdon,
.entity-form .note .created-by,
.entity-form .note time,
.entity-form .note .user {
  display: none !important;
}

/* Attachment chips */
.entity-form .note a[href*="/download"],
.entity-form .note .attachment a,
.entity-form .note a[download] {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  background: #f3f4f6 !important;
  text-decoration: none !important;
  margin-right: 6px !important;
}

/* Make the “Add note” button more prominent */
.entity-form .btn:has(> span:matches( Add note )) {
  background:#2563eb !important;
  color:#fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
}

/* ===== Modal polish ===== */
.modal-dialog { max-width: 980px; }
.modal-content{
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  border:0;
}
.modal-header,
.modal-footer{ border:0; }

/* ===== Container & typography ===== */
.portal-card{
  background:#fff;
  border:1px solid #e6e9f2;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(14,30,37,.06);
  padding:18px 18px;
  margin-bottom:18px;
}
.portal-card + .portal-card{ margin-top:14px; }

.portal-card__title{
  font-size:1.07rem;
  font-weight:700;
  color:#0a2b57;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px 0;
}
.portal-card__title .icon{ width:18px; height:18px; display:inline-block; }

/* ===== Form block ===== */
.entity-form{
  background:#f9fbff;
  border:1px solid #e6e9f2;
  border-radius:12px;
  padding:16px;
}
.entity-form .section-title,
.entity-form h3{
  font-size:1rem;
  font-weight:600;
  color:#0a2b57;
  border-bottom:2px solid #edf0f7;
  padding-bottom:6px;
  margin-bottom:12px;
}

/* Reduce weird gaps */
.entity-form .control,
.entity-form .form-group{ margin-bottom:12px; }

/* Labels/inputs */
.entity-form label{
  font-weight:600;
  color:#1e2a3a;
}
.entity-form input[type=text],
.entity-form select,
.entity-form textarea{
  border-radius:10px !important;
  border:1px solid #d8deea !important;
  padding:.6rem .8rem !important;
  background:#fff !important;
}
.entity-form textarea{ min-height:110px; }

/* ===== Notes wall ===== */
.notesWall,
#notesWallContainer{
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:14px;
}
.notesWall .noNotes,
#notesWallContainer .noNotes{
  background:#fff7d6;
  color:#7a5b00;
  border:1px solid #f1e2a6;
  border-radius:8px;
  padding:10px 12px;
}

/* Single note item */
.note,
.annotation{
  border:1px solid #e6e9f2;
  border-radius:10px;
  padding:12px;
  margin-bottom:10px;
  background:#ffffff;
}
.note .header,
.annotation .header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
  font-weight:600; color:#0a2b57;
}
.note .body,
.annotation .body{ color:#24324a; }

/* Add note button */
.btn-add-note,
.notesWall .btn,
.addNote{
  background:#0a2b57 !important;
  color:#fff !important;
  border-radius:10px !important;
  border:0 !important;
  padding:.5rem .9rem !important;
}
.btn-add-note:hover{ filter:brightness(1.15); }

/* ===== Attachment area (native Notes Attachments) ===== */
#notesWallAttachment,
.attach-file,
.file-attach-zone{
  border:2px dashed #cbd5e1;
  border-radius:12px;
  background:#fbfdff;
  padding:16px;
  text-align:center;
  transition:border-color .25s ease;
}
#notesWallAttachment:hover,
.attach-file:hover,
.file-attach-zone:hover{
  border-color:#0a2b57;
}

/* File chips */
.alf-file{
  display:flex; align-items:center; gap:10px;
  border:1px solid #e6e9f2; border-radius:10px;
  padding:8px 10px; background:#fff; margin-bottom:8px;
}
.alf-file__icon{ width:18px; height:18px; }
.alf-file__name{ font-weight:600; color:#1f2a44; }
.alf-file__meta{ font-size:.85rem; color:#5c6b82; }

/* ===== Submit button area ===== */
.alignment-footer{
  display:flex; justify-content:flex-end; gap:10px; margin-top:6px;
}
button[type=submit].btn-primary{
  background:#0f5bd2; border:0; border-radius:10px; padding:.55rem 1rem;
}
button[type=submit].btn-primary:hover{ filter:brightness(1.08); }

/* ===== Small helpers ===== */
.mt-8{ margin-top:8px !important; }
.mt-12{ margin-top:12px !important; }

/* Make the dialog a bit wider (optional) */
.modal-dialog { max-width: 1200px !important; }

/* Give more room to the text column inside each note */
.notes .row { display: flex !important; flex-wrap: nowrap !important; }
.notes .col-md-3.metadata { flex: 0 0 20% !important; max-width: 20% !important; float: none !important; }
.notes .col-md-9.content  { flex: 1 1 80% !important; max-width: 80% !important; width: 80% !important; float: none !important; }

/* Ensure content uses all space and wraps nicely */
.notes .content { width: 100% !important; white-space: normal !important; word-break: break-word !important; }
.notes textarea { width: 100% !important; min-height: 220px !important; }

/* =========================================================
   FLUENT GRID / DETAILS LIST – WHITE TABLE ON DARK PAGE
   ========================================================= */

/* Outer viewport + list host */
.ms-Viewport,
.ms-DetailsList {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Header row */
.ms-DetailsHeader,
.ms-DetailsHeader-cell {
    background-color: #f9fafb !important;
    color: #111827 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Data rows */
.ms-DetailsRow {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Hover / selected styles */
.ms-DetailsRow:hover {
    background-color: #f3f4f6 !important;
}
.ms-DetailsRow.is-selected {
    background-color: #e5f0ff !important;
}

/* Cells */
.ms-DetailsRow-cell {
    color: #111827 !important;
    font-size: 0.95rem;
}

/* Ensure the modern pages-grid is visible and wide */
pages-grid[list-id="PortalActiveEvidenceUploads"] {
  display: block !important;
  min-height: 420px !important; /* adjust to taste */
  width: 100% !important;
}

/* Widen the containing column so the grid has room */
.row.sectionBlockLayout > .container {
    max-width: 1200px !important;
    width: 100% !important;
}

/* =========================================================
   FLUENT SEARCH BOX – WHITE PILL, VISIBLE ICONS
   ========================================================= */

.ms-SearchBox {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 9999px !important;
    padding-inline: 6px;
}

/* Input text */
.ms-SearchBox-field {
    background-color: #ffffff !important;
    color: #111827 !important;
    font-size: 0.95rem;
}

/* Placeholder */
.ms-SearchBox-field::placeholder {
    color: #9ca3af !important;
}

/* Magnifying-glass icon */
.ms-SearchBox-icon,
.ms-SearchBox-icon i,
.ms-SearchBox-icon .ms-Icon {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Clear (X) icon */
.ms-SearchBox-clearButton .ms-Icon {
    color: #9ca3af !important;
}

/* Make sure the search button background is transparent */
.ms-SearchBox button,
.ms-SearchBox .ms-Button {
    background-color: transparent !important;
    border: 0 !important;
}

/* Evidence list SearchBox specifically */
.sectionBlockLayout .ms-SearchBox input.ms-SearchBox-field {
    background-color: #ffffff !important;
    color: #111827 !important;
}

.sectionBlockLayout .ms-SearchBox i[data-icon-name="Search"],
.sectionBlockLayout .ms-SearchBox .ms-SearchBox-iconContainer .ms-Icon {
    color: #6b7280 !important;   /* visible grey */
    opacity: 1 !important;
}

/* =========================================================
   NAVBAR SCROLL EFFECT
   ========================================================= */

.navbar {
    transition: background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}

/* Shrink effect */
.navbar-scrolled {
    background-color: rgba(16, 32, 64, .92); /* deepened blue */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* =================================================================
   RESTORE ALL FLUENT (Fabric) ICONS IN COMMAND BAR + GRID HEADERS
   ================================================================= */

/* Ensure correct font for Fluent icons */
.ms-Icon,
.ms-Icon::before,
.ms-Icon-root,
[class^="ms-Icon--"],
[class*=" ms-Icon--"] {
    font-family: "FabricMDL2Icons", "Segoe MDL2 Assets" !important;
    font-style: normal !important;
    font-weight: normal !important;
    speak: none !important;
}

/* Explicit restore for Command Bar (Create, view menu, overflow, etc.) */
.ms-CommandBar i,
.ms-CommandBar .ms-Icon,
.ms-CommandBar .ms-Icon-root {
    font-family: "FabricMDL2Icons", "Segoe MDL2 Assets" !important;
    color: #e5e7eb !important;  /* light grey on dark background */
    opacity: 1 !important;
}

/* Create button icon (+) */
.ms-CommandBar .ms-Icon--Add {
    color: #ffffff !important;
}

/* Hamburger next to PortalActiveEvidenceUploads */
.ms-CommandBar .ms-Icon--GlobalNavButton {
    color: #e5e7eb !important;
    opacity: 0.9 !important;
}

/* Overflow (···) button */
.ms-CommandBar .ms-Icon--More {
    color: #e5e7eb !important;
}

/* Column sort arrows */
.ms-DetailsHeader .ms-Icon--ChevronDown,
.ms-DetailsHeader .ms-Icon--ChevronUp,
.ms-DetailsHeader .ms-Icon--SortDown,
.ms-DetailsHeader .ms-Icon--SortUp {
    font-family: "FabricMDL2Icons", "Segoe MDL2 Assets" !important;
    color: #374151 !important; /* dark grey */
    opacity: 1 !important;
}

/* Restore ellipsis menu (···) inside rows */
.ms-DetailsRow .ms-Icon--More {
    font-family: "FabricMDL2Icons", "Segoe MDL2 Assets" !important;
    color: #6b7280 !important;
}


/* HOME PAGE ONLY (theme-dark) — gradient background */
body.theme-dark {
    background: linear-gradient(
        to bottom,
        #FF6F61 0%,    /* Sunset Coral */
        #021734 100%  /* Deep Blue */
    ) !important;
    background-attachment: fixed !important;
    color: #f5f5f5 !important;
}

/* Make sure containers don't override the gradient */
body.theme-dark #mainContent,
body.theme-dark .wrapper-body,
body.theme-dark .page-copy,
body.theme-dark .content-wrapper,
body.theme-dark .page-wrapper {
    background: transparent !important;
}