/* =====================================================
   site.css - Global Styles for DjSoft
   =====================================================
   Description:
     Global stylesheet for the DjSoft application.
     Defines the corporate color palette, base styles,
     Bootstrap overrides and custom components.

   Corporate color palette:
     - Accent  : #97233F (dark red)
     - Cream           : #ffeedd (main text on dark backgrounds)
     - Black           : #000000 (application background)

   Structure:
     1. Custom color variables   → Global CSS variables (:root)
     2. Base element styles      → html, body, hr, label, a
     3. Bootstrap overrides      → Containers, borders, shadows
     4. Button styles            → .btn-primary and states
     5. Form styles              → inputs, .form-control, placeholders
     6. Navigation styles        → .navbar, .nav-item, language dropdown
     7. Main content             → .body-content (main scroll area)
     8. Card styles              → .card and variants
     9. Objectives styles        → .objective-bullet, .objectives-list
    10. Section spacing          → Padding adjustment on section.py-5
    11. Footer styles            → .fixed-bottom and its children
    12. Loading screen           → #loading-screen, .loader-circle, @keyframes spin
    13. Alert styles             → .message-container, .alert-djsoft-*, btn-close filters, #loading spinner
    14. Media queries            → Responsive and prefers-reduced-motion
   ===================================================== */

/* ===== 1. Custom CSS variables =====
   Global design variables accessible via var(--name).
   Centralizes the color palette for easier maintenance.
   - --djsoft-accent      : Primary brand color (dark red #97233F)
   - --link               : Link color (#0076b6)
   - --djsoft-cream       : Text color on dark backgrounds (#ffeedd)
   - --black              : Main background color (#000000)
   - --muted-border       : Color for subtle borders (#e5e5e5)
   - --accent             : Accent color for UI elements (#1b6ec2)
   - --accent-600         : Darker variant of the accent (#1861ac)
   - --focus-ring         : Accessible focus ring color (#258cfb)
   - --input-border       : Form field border color (#241773)
   - --input-bg           : Form field background color (#ffffff)
   ===== */
:root {
    --djsoft-accent: #97233F;
    --link: #0076b6;
    --djsoft-cream: #ffeedd;
    --black: #000000;
    --muted-border: #e5e5e5;
    --accent: #1b6ec2;
    --accent-600: #1861ac;
    --focus-ring: #258cfb;
    --input-border: #241773;
    --input-bg: #ffffff;
}

/* ===== 2. Base element styles =====
   Base styles applied to native HTML elements.
   - html     : Base font size 14px; occupies at least the full screen height.
   - html/body: Height 100%, overflow hidden to avoid double scroll with .body-content.
   - body     : Black background, cream text, bottom margin to leave room for the fixed footer.
   - hr       : Divider using cream color.
   - label    : Bold block element with bottom spacing.
   - a        : No underline, corporate link color.
   - a:hover/focus: Switches to cream color with no underline.
   ===== */
html {
    font-size: 14px;
    min-height: 100%;
    position: relative;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--black);
    color: var(--djsoft-cream);
    margin-bottom: 60px;
    padding-bottom: 20px;
}

hr {
    border-top: 1px solid var(--djsoft-cream);
}

label {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--djsoft-cream);
    text-decoration: none;
}

/* ===== 3. Bootstrap component overrides =====
   Overrides Bootstrap's default container behavior to remove
   lateral padding and force full width.
   .border-bottom / .border-top : Use --muted-border instead of Bootstrap's default gray.
   .box-shadow                  : Subtle shadow for element elevation.
   ===== */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}

.border-bottom { border-bottom: 1px solid var(--muted-border); }
.border-top    { border-top: 1px solid var(--muted-border); }
.box-shadow    { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

/* ===== 4. Button styles =====
   Bootstrap button customization using the corporate palette.
   - :focus / :active:focus : Double focus ring (accessibility) using --djsoft-cream and --focus-ring.
   - .btn-primary           : Primary accent background, cream border and text.
   - .btn-primary:disabled  : Degrades to secondary accent when disabled.
   - .btn-primary:hover/focus/active : Switches to secondary accent keeping cream border.
   ===== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--djsoft-cream), 0 0 0 0.25rem var(--focus-ring);
}

.btn-primary {
    background-color: var(--djsoft-accent);
    border-color: var(--djsoft-cream);
    color: var(--djsoft-cream);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary:disabled {
    background-color: var(--djsoft-accent-500);
    border-color: var(--djsoft-accent-500);
    color: var(--djsoft-cream);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--djsoft-cream);
    border-color: var(--djsoft-accent);
    color: var(--djsoft-accent);
}

/* ===== 5. Form styles =====
   Styles for native form fields and Bootstrap classes.

   Native elements (input, select, textarea):
     - White background, --input-border border, 4px border radius.
     - Subtle inner shadow; fixed height of 34px.
     - Smooth transition on border and shadow on interaction.

   .form-control (Bootstrap):
     - Full width, 38px height, 14px font size.
     - On focus: keeps --input-border border, adds outer glow.
     - Disabled/readonly: not-allowed cursor, background unchanged.

   Placeholders (cross-browser compatibility):
     - Supports -moz-, -ms- and -webkit- prefixes.
     - In .form-floating: placeholder aligned to start on focus
       and to end at rest (standard floating behavior).

   textarea.form-control: auto height instead of fixed.
   ===== */
input,
select,
textarea {
    background-color: var(--djsoft-cream);
    background-image: none;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: var(--djsoft-accent);
    font-size: inherit;
    height: 34px;
    line-height: 1.42857143;
    padding: 6px 12px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control {
    display: block;
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: var(--djsoft-accent);
    background-color: var(--djsoft-cream);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
    border-color: var(--input-border);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(229,229,229,.6);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: var(--djsoft-cream);
}

.form-control:-moz-placeholder             { color: var(--djsoft-accent); }
.form-control::-moz-placeholder            { color: var(--djsoft-accent); }
.form-control:-ms-input-placeholder        { color: var(--djsoft-accent); }
.form-control::-webkit-input-placeholder   { color: var(--djsoft-accent); }

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

textarea.form-control { height: auto; }

/* ===== 6. Navigation styles =====
   Main navigation bar with a fixed height of 50px.

   .navbar:
     - Horizontal flex layout, --djsoft-accent background, no padding.
     - Fixed height for consistent alignment with the footer.

   .navbar-brand:
     - App logo/name; 50px height, no extra padding.

   .navbar-nav / .nav-item:
     - Horizontal row; each item occupies exactly 120px fixed width.

   .navbar-nav .nav-link:
     - Centered, cream color, smooth background and color transition.
     - Hover/focus: color inversion (cream background, accent text).
     - Active/show: keeps accent background with cream text.

   Language dropdown (.nav-item.dropdown):
     - Relative position to anchor the dropdown menu.
     - Link aligns to the left with space for the arrow (::after).
     - Dropdown menu: same color as navbar, no borders or radius,
       fixed width 120px, items with 50px height.
     - Item hover: color inversion.
     - [data-bs-popper]: removes Bootstrap popper top margin.

   Images and gap:
     - No right margin on flag images inside nav/dropdown.
     - 6px gap between icon and text in nav-link and dropdown-item.
   ===== */
.navbar {
    align-items: center;
    background-color: var(--djsoft-accent);
    display: flex;
    flex-wrap: wrap;
    height: 50px;
    justify-content: space-between;
    padding: 0;
    position: relative;
}

.navbar .container {
    height: 50px;
}

.navbar .navbar-brand {
    display: inline-block;
    font-size: 1.25rem;
    height: 50px;
    line-height: inherit;
    margin-right: 1rem;
    padding: 0;
    white-space: nowrap;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    height: 50px;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

.navbar-nav .nav-link {
    color: var(--djsoft-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    padding: 0 10px;
    text-align: center;
    background-color: transparent;
    transition: background-color 0.2s, color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    background-color: var(--djsoft-cream);
    color: var(--djsoft-accent);
    text-decoration: none;
}

.navbar-nav .show > .nav-link,
.navbar-nav .active > .nav-link,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.active {
    background-color: var(--djsoft-accent);
    color: var(--djsoft-cream);
}

/* Language selection dropdown:
   Positions the dropdown menu relative to the parent item.
   The arrow (::after) is placed at the far right of the link. */
.navbar .nav-item.dropdown {
    position: relative;
}

.navbar .nav-item.dropdown .nav-link {
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 20px;
}

.navbar .nav-item.dropdown .nav-link::after {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.navbar .dropdown-menu {
    background-color: var(--djsoft-accent);
    border: 0;
    border-radius: 0;
    font-size: 14px;
    margin: 0;
    min-width: 120px;
    width: 120px;
    padding: 0;
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--djsoft-cream);
    display: flex;
    align-items: center;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
}

.navbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--djsoft-cream);
    color: var(--djsoft-accent);
    text-decoration: none;
}

.navbar .dropdown-menu[data-bs-popper] {
    margin-top: 0;
}

.navbar .nav-link img,
.navbar .dropdown-item img {
    margin-right: 0;
}

.navbar-nav .nav-link,
.navbar .dropdown-item {
    gap: 6px;
}

/* ===== 7. Main content =====
   .body-content: Main content area with independent vertical scroll.
   - Calculated height: viewport minus navbar (50px) and footer (50px) = 120px total.
   - margin-top: 15px to compensate for the fixed navbar (50px) plus a minimal visual gap.
   - overflow-y: auto to enable inner scroll without affecting the body.
   - 15px lateral padding for separation from the screen edge.
   ===== */
.body-content {
    height: calc(100vh - 120px);
    overflow-y: auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 15px;
}

/* ===== 8. Card styles =====
   Cards with corporate aesthetics on an accent background.
   - Cream border, 8px radius, cream text color.
   - Hover: elevation with translateY(-4px) and semi-transparent red shadow.
   - .card-title  : Explicit cream color.
   - .card-text   : Opacity 0.9, line-height 1.4, justified text.
   - .card-icon   : Large icon (1.8rem) for visual headings.
   ===== */
.card {
    background-color: var(--djsoft-accent);
    border: 1px solid var(--djsoft-cream);
    border-radius: 8px;
    color: var(--djsoft-cream);
    transition: transform 0.2s, box-shadow 0.2s;
    will-change: transform;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(151, 35, 63, 0.4);
}

.card-title {
    color: var(--djsoft-cream);
}

.card-text {
    color: var(--djsoft-cream);
    opacity: 0.9;
    line-height: 1.4;
    text-align: justify;
}

.card-icon {
    font-size: 1.8rem;
    line-height: 1.4;
}

/* ===== 9. Objectives styles =====
   Styles for the objectives/highlighted items list section.
   - .objective-bullet        : Custom cream bullet, bold, 1.2rem size,
                                minimum width 24px for uniform alignment.
   - .objectives-list li span:last-child : Objective text in cream, justified,
                                line-height 1.4 for readability.
   ===== */
.objective-bullet {
    color: var(--djsoft-cream);
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 24px;
    line-height: 1.4;
}

.objectives-list li span:last-child {
    color: var(--djsoft-cream);
    line-height: 1.4;
    text-align: justify;
}

/* ===== 10. Section spacing =====
   Reduces the vertical padding of Bootstrap sections (.py-5)
   from its default value (3rem) to 1rem for a more compact design
   suited to the application's fixed height layout.
   ===== */
section.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ===== 11. Footer styles =====
   Fixed footer at the bottom of the screen.
   - .fixed-bottom          : 50px bar with accent background, fixed position,
                              z-index 1030 (same level as Bootstrap's navbar).
   - .fixed-bottom .container: Vertically centered flex to align content.
   - .fixed-bottom .row     : Full width with vertical alignment.
   - .col-md-6.text-end     : No right padding to align icons to the edge.
   - .fixed-bottom .bi      : Bootstrap Icons at 1.4rem in cream color,
                              left margin and smooth color/position transition.
   - .fixed-bottom .bi:hover: Switches to secondary accent and moves up 2px (visual feedback).
   ===== */
.fixed-bottom {
    background-color: var(--djsoft-accent);
    border-color: var(--djsoft-accent-500);
    border-width: 0 0 1px;
    bottom: 0;
    color: var(--djsoft-cream);
    height: 50px;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1030;
}

.fixed-bottom .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.fixed-bottom .row {
    width: 100%;
    align-items: center;
}

.fixed-bottom .col-md-6.text-end {
    padding-right: 0 !important;
}

.fixed-bottom .bi {
    font-size: 1.4rem;
    color: var(--djsoft-cream);
    margin-left: 10px;
    transition: color 0.2s, transform 0.2s;
    will-change: transform;
}

.fixed-bottom .bi:hover {
    color: var(--djsoft-accent-500);
    transform: translateY(-2px);
}

/* ===== 12. Loading screen =====
   Overlay screen displayed on top of the entire application during initialization.

   @keyframes spin:
     Continuous rotation from 0° to 360° used by .loader-circle.

   .loader-circle:
     Animated spinner circle (60x60px).
     Semi-transparent border with the top portion in --accent color.
     Spin animation of 1 second in an infinite loop.

   #loading-screen:
     Fixed overlay covering the entire screen with semi-transparent white background (0.9).
     z-index 9999 to sit above any other element.
     Opacity transition of 0.5s when appearing.

   #loading-screen.loading-hidden:
     Hidden state: opacity 0, visibility hidden, pointer-events none.
     Transition of 0.25s (faster when hiding than when showing).
   ===== */
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-circle {
    border: 8px solid rgba(243, 243, 243, 0.35);
    border-top: 8px solid var(--accent);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: inline-block;
    animation: spin 1s linear infinite;
    will-change: transform;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    opacity: 1;
    pointer-events: auto;
}

#loading-screen.loading-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* ===== 13. Alert styles =====
   Feedback components using the DjSoft corporate palette.

   .message-container:
     - Wrapper for inline messages with a light cream-yellow background (#fffdd0),
       0.5rem padding and 0.375rem border radius for a subtle rounded appearance.

   Alert overrides (.alert-djsoft-success / .alert-djsoft-danger):
     - .alert-djsoft-success : Cream background, black text, cream border.
       Used for positive feedback (operations completed successfully).
     - .alert-djsoft-danger  : Accent (dark red) background, cream text, accent border.
       Used for errors or destructive action confirmations.

   Close button contrast (.btn-close):
     - .alert-djsoft-success .btn-close : filter invert(0) — dark X icon on cream background.
     - .alert-djsoft-danger  .btn-close : filter invert(1) — white X icon on dark red background.
     Ensures the close button is always legible regardless of alert type.

   Inline loading spinner (#loading::before):
     - Pseudo-element inserted before the #loading alert text.
     - Renders a 1em × 1em circular spinner with an accent-colored border,
       transparent top edge and the shared @keyframes spin animation (0.75s).
     - vertical-align: middle aligns the spinner with the adjacent text.
   ===== */
.message-container {
    background-color: #fffdd0;
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.alert-djsoft-success {
    background-color: var(--djsoft-cream);
    color: var(--black);
    border-color: var(--djsoft-cream);
}

.alert-djsoft-danger {
    background-color: var(--djsoft-accent);
    color: var(--djsoft-cream);
    border-color: var(--djsoft-accent);
}

.alert-djsoft-success .btn-close {
    filter: invert(0); /* dark X on cream background */
}

.alert-djsoft-danger .btn-close {
    filter: invert(1); /* white X on dark red background */
}

#loading::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    border: 2px solid var(--djsoft-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    vertical-align: middle;
    will-change: transform;
}