/*
 * Notary Dr Clara Farrugia Grixti — Client Portal shared theme.
 *
 * Loaded after each page's own <style>. Re-declares the same CSS variables
 * with the logo-derived bronze/charcoal palette and re-skins the shared
 * .header / .logout-btn / form / button visual language so every logged-in
 * page (dashboard, kyc form, upload, messages) feels like one product.
 */

/* Page transitions with a logo-only flash between pages.
   Three phases per navigation:
     1. Leaving:  card / dashboard content fades to 0 (0.4s)
                  watermark goes from opacity 0.5 to opacity 1 (0.4s)
                  body holds in this state for 0.4s — only the bright logo
                  visible, while the new page is loading.
     2. Browser navigates to the new URL (~50–300ms).
     3. Arriving: content stays at 0 for ~0.5s while watermark holds at 1
                  ("logo flash" continues across the navigation), then
                  watermark fades back to 0.5 and content fades up to 1.
   Net visible logo-only window: ~1 second, give or take browser load time.
   portal_transitions.js orchestrates the leaving phase by intercepting
   form submits and intra-portal link clicks. */

/* ---- ARRIVING (default, runs on every page load) ---- */
@keyframes portal-content-arrive {
    0%   { opacity: 0; }
    55%  { opacity: 0; }   /* hold invisible while the watermark glows */
    100% { opacity: 1; }
}

@keyframes portal-watermark-arrive {
    0%   { opacity: 1; }
    55%  { opacity: 1; }   /* watermark prominent during the logo flash */
    100% { opacity: 0.5; }
}

body > *:not(script):not(style):not(link):not(noscript) {
    animation: portal-content-arrive 1.1s ease-out;
}

body::before {
    animation: portal-watermark-arrive 1.1s ease-out;
}

/* ---- LEAVING (added by portal_transitions.js when navigating away) ---- */
@keyframes portal-content-leave {
    to { opacity: 0; }
}
@keyframes portal-watermark-leave {
    to { opacity: 1; }
}

body.portal-leaving > *:not(script):not(style):not(link):not(noscript) {
    animation: portal-content-leave 0.4s ease-out forwards;
}
body.portal-leaving::before {
    animation: portal-watermark-leave 0.4s ease-out forwards;
}

/* ---- Reduced motion: skip everything ---- */
@media (prefers-reduced-motion: reduce) {
    body > *:not(script):not(style):not(link):not(noscript),
    body::before,
    body.portal-leaving > *:not(script):not(style):not(link):not(noscript),
    body.portal-leaving::before {
        animation: none !important;
    }
}

:root {
    --primary:        #2d3142 !important;
    --primary-dark:   #1f2433 !important;
    --primary-soft:   #3a3f54 !important;
    --accent:         #b08c5f !important;
    --accent-dark:    #8a6b42 !important;
    --accent-soft:    #d9c4a4 !important;
    --bg:             #faf7f2 !important;
    --card:           #ffffff !important;
    --card-border:    #ece6dc !important;
    --text:           #1f2433 !important;
    --text-muted:     #6b7280 !important;
    --text-faint:     #9ca0aa !important;
    --border:         #ece6dc !important;
    --error:          #b3261e !important;
    --success:        #2f7d4d !important;
    --warning:        #b07b18 !important;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--bg) !important;
    color: var(--text) !important;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
}

/* Full-page logo watermark — sits above the bg colour but behind every
   content layer. opacity 0.5 per spec. Use background-size: contain so the
   logo keeps its aspect ratio at any viewport size. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('/static/portal_logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(80vw, 900px) auto;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* Hide the small in-header logo that some pages embed — the watermark
   replaces it. */
.brand-logo-wrap,
.header-logo {
    display: none !important;
}

/* Make sure all content containers float above the watermark. */
.top-bar,
.main,
.portal-footer,
.header,
header.header,
.container,
.login-container {
    position: relative;
    z-index: 1;
}

/* Re-skin the legacy .header used on KYC/upload/messages pages */
.header {
    background: var(--primary) !important;
    border-bottom: 3px solid var(--accent);
    padding: 18px 24px !important;
}
.header h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px !important;
    font-weight: 600;
    letter-spacing: 0.4px;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.header h1 a {
    color: inherit !important;
    text-decoration: none;
}

/* Inline logo inside .header h1 — JS adds an <img> with this class. */
.header-logo {
    height: 36px;
    width: auto;
    max-width: 160px;
    background: rgba(255,255,255,0.95);
    padding: 4px 8px;
    border-radius: 6px;
    object-fit: contain;
    display: inline-block;
}

.logout-btn,
.back-btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.18s !important;
}
.logout-btn:hover, .back-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.5) !important;
}

/* Buttons */
.btn-primary, button[type="submit"]:not(.btn-secondary) {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    transition: background 0.18s !important;
}
.btn-primary:hover, button[type="submit"]:not(.btn-secondary):hover {
    background: var(--accent-dark) !important;
}
.btn-secondary {
    background: #fff !important;
    color: var(--primary) !important;
    border: 1px solid var(--card-border) !important;
}
.btn-secondary:hover {
    border-color: var(--accent) !important;
    color: var(--accent-dark) !important;
}

/* Form controls — soften the focus ring to brand color */
input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(176,140,95,0.15) !important;
}

/* Links inside body content */
a:not(.logout-btn):not(.back-btn):not(.btn-primary):not(.btn-secondary):not(.action-btn) {
    color: var(--accent-dark);
}

/* Card surfaces */
.card, .file-card, .container, .form-section {
    border-color: var(--card-border) !important;
}