:root {
    --ac-primary: #006496;
    --ac-primary-dark: #004e76;
    --ac-secondary: #8296aa;
    --ac-accent: #e8f0f7;
    --ac-border: #dee2e6;
    /* Override Bootstrap/OneUI primary colour */
    --bs-primary: #006496;
    --bs-primary-rgb: 0, 100, 150;
    --bs-link-color: #006496;
    --bs-link-hover-color: #004e76;
}

/* Bootstrap 5 / OneUI colour overrides */
.bg-primary { background-color: var(--ac-primary) !important; }
.text-primary { color: var(--ac-primary) !important; }
.btn-primary {
    --bs-btn-bg: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-bg: var(--ac-primary-dark);
    --bs-btn-hover-border-color: var(--ac-primary-dark);
    --bs-btn-active-bg: var(--ac-primary-dark);
    --bs-btn-active-border-color: var(--ac-primary-dark);
    --bs-btn-focus-shadow-rgb: 0, 100, 150;
}
.btn-outline-primary {
    --bs-btn-color: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-bg: var(--ac-primary);
    --bs-btn-hover-border-color: var(--ac-primary);
    --bs-btn-active-bg: var(--ac-primary);
}

/* Fixed action bar (replaces FloatingActionPanel) */
.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--ac-border);
    z-index: 1030;
    padding: 0.5rem 1.875rem; /* match OneUI .content horizontal padding at >=768px */
}
@media (min-width: 992px) {
    /* Offset action bar to clear the OneUI sidebar (250px wide) */
    .action-bar { left: 250px; }
}
.action-bar-inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Section headings (standalone page titles, not inside blocks) */
.section-h1 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ac-primary);
    margin-bottom: 0.75rem;
}
.section-h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ac-primary);
    border-bottom: 1px solid var(--ac-accent);
    padding-bottom: 0.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Field layout — explicit 2-column grid so the label column is a
   fixed width on every row. Labels are right-aligned so they sit
   adjacent to their values with no awkward dead space, the way
   the legacy ADDCALC AdvisorPortal forms looked. Values land at
   the same x-position across the form. */
.field-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;        /* labels align with the value baseline */
    margin-bottom: 0.55rem;
}
.field-label {
    text-align: right;
    font-weight: 500;
    color: inherit;
}
.field-row > *:not(.field-label) {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* On very narrow containers (the 1/3-width Client Details card on
   the dashboard) stack label above value so the value gets the
   full width. Uses @container where supported. */
@supports (container-type: inline-size) {
    .block .block-content { container-type: inline-size; }
    @container (max-width: 320px) {
        .field-row { grid-template-columns: 1fr; }
        .field-row .field-label { padding-top: 0; }
    }
}

/* Form controls */
.form-control-sm-width { max-width: 320px; }
.form-control-wide { max-width: 640px; }
.readonly-field {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: var(--ac-border);
}

/* Native colour input */
.color-swatch {
    width: 44px;
    height: 36px;
    padding: 2px;
    border-radius: 4px;
    border: 1px solid var(--ac-border);
    cursor: pointer;
}

/* List-box button groups */
.listbox-actions { margin-top: 0.25rem; }

/* Culture dropdown in OneUI dark sidebar */
.navbar-culture-label { color: rgba(255,255,255,.85); font-size: 0.875rem; }
.navbar-culture-select {
    background-color: rgba(255,255,255,.15);
    color: #fff;
    border-color: rgba(255,255,255,.3);
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.navbar-culture-select option { background-color: var(--ac-primary); }

/* Section navigation row */
.section-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ac-border);
}

/* Scroll-to-top link */
.scroll-top { font-size: 0.875rem; }

/* Text size helpers */
.smallprint { font-size: 0.82rem; color: #6c757d; }
.tinyprint { font-size: 0.78rem; color: #6c757d; }

/* char-count readout */
.char-count {
    color: #d63384;
    font-size: 0.82rem;
    font-style: italic;
}

/* OneUI's default #dfe3ea form-field border is almost invisible on Chrome's
   sub-pixel rendering. Bump to Bootstrap's stronger #ced4da. */
.form-control, .form-select {
    border-color: #ced4da;
}
.form-control:hover, .form-select:hover {
    border-color: #adb5bd;
}

/* Drag-drop file uploader — replaces the browser's native "Choose File / No file chosen". */
.file-drop {
    position: relative;
    display: block;
    border: 1.5px dashed var(--ac-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    text-align: center;
    cursor: pointer;
    background: #fafbfc;
    transition: border-color .15s, background-color .15s;
    color: #6c757d;
    font-size: 0.86rem;
}
.file-drop:hover           { border-color: var(--ac-primary); background: #f4f8fb; color: #495057; }
.file-drop.is-dragging     { border-color: var(--ac-primary); background: #e8f0f7; color: #212529; }
.file-drop.has-file        { border-style: solid; border-color: var(--ac-primary); background: #fff; color: #212529; }
.file-drop input[type=file]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .file-drop-prompt { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.file-drop .file-drop-prompt i { color: var(--ac-primary); }
.file-drop .file-drop-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-weight: 500;
}
.file-drop .file-drop-clear {
    margin-left: 0.5rem;
    color: #6c757d;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.9rem;
}
.file-drop .file-drop-clear:hover { color: #d63384; }