/* ==========================================================================
   Green Wave Environmental Co. - SFTPGo WebClient brand theme
   بوابة ملفات الموجة الخضراء
   --------------------------------------------------------------------------
   Loaded via the supported SFTPGo branding option: httpd.bindings[].branding
   .web_client.extra_css. No SFTPGo template or bundled asset is modified.

   Palette sampled directly from the supplied logo artwork:
     #6FB536  leaf green   (wave mark + English wordmark)
     #007E86  deep teal    (wave mark + Arabic wordmark)
     #0E3A3A  brand dark   (background of the supplied reversed-white sheet)

   Contrast (WCAG 2.1, measured):
     #FFFFFF on #0E3A3A = 12.46:1     white logo / headings
     #FFFFFF on #123F3D = 11.05:1     card text
     #0E3A3A on #6FB536 =  4.95:1     sign-in button label
     #A8C4C0 on #0E3A3A =  6.72:1     footer company line
     #8FA9A6 on #0E3A3A =  4.98:1     attribution
   The full-colour logo is intentionally NOT used on the dark surfaces: its
   teal wordmark measures only 2.57:1 there. The supplied reversed/white
   variant is used instead, exactly as the brand rules allow for dark surfaces.
   ========================================================================== */

:root {
    --gw-green: #6FB536;
    --gw-green-hi: #7EC344;
    --gw-teal: #007E86;
    --gw-dark: #0E3A3A;
    --gw-dark-deep: #0A2C2C;
    --gw-surface: #123F3D;
    --gw-field: #0B3130;
    --gw-text: #FFFFFF;
    --gw-muted: #A8C4C0;
    --gw-faint: #8FA9A6;
    --gw-line: rgba(255, 255, 255, 0.12);
    --gw-line-soft: rgba(255, 255, 255, 0.07);
    --gw-font: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma,
        "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   1. AUTH SURFACES  (login, 2FA, password reset, share login/upload/download,
      message pages - every page SFTPGo renders with <body class="app-blank">)
   ========================================================================== */

body.app-blank {
    background-color: var(--gw-dark) !important;
    font-family: var(--gw-font);
}

/* the centred login card */
body.app-blank .bg-body {
    background-color: var(--gw-surface) !important;
    border: 1px solid var(--gw-line);
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38) !important;
}

/* --- brand block: stack logo above heading, centred ---------------------- */
body.app-blank form .container .row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    --bs-gutter-x: 0;
}

body.app-blank form .container .row > [class^="col-"],
body.app-blank form .container .row > [class*=" col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
}

/* the shipped markup pins the logo to h-80px/h-md-90px/h-lg-100px, which would
   render this 6:1 horizontal lockup ~600px wide inside a 500px card. Constrain
   by width instead and let height follow, so proportions stay intact. */
body.app-blank img[alt="Logo"] {
    height: auto !important;
    width: min(310px, 80%);
    max-width: 100%;
    margin: 0 auto 4px;
    display: block;
}

/* login heading */
body.app-blank h1 {
    color: var(--gw-text) !important;
    font-family: var(--gw-font);
    font-size: clamp(1.18rem, 1rem + 1.1vw, 1.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    margin: 14px 0 0 !important;
    padding: 0 4px;
    direction: rtl;
    unicode-bidi: isolate;
    text-wrap: balance;
}

body.app-blank .container.mb-10 {
    margin-bottom: 2rem !important;
}

/* --- form fields -------------------------------------------------------- */
body.app-blank .form-control,
body.app-blank .form-control-solid {
    background-color: var(--gw-field) !important;
    border: 1px solid var(--gw-line) !important;
    color: var(--gw-text) !important;
    border-radius: 10px !important;
    height: 50px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app-blank .form-control::placeholder {
    color: var(--gw-faint) !important;
    opacity: 1;
}

body.app-blank .form-control:focus,
body.app-blank .form-control-solid:focus,
body.app-blank .form-control-solid:active {
    background-color: var(--gw-field) !important;
    border-color: var(--gw-green) !important;
    color: var(--gw-text) !important;
    box-shadow: 0 0 0 3px rgba(111, 181, 54, 0.22) !important;
}

/* autofill would otherwise repaint the field white */
body.app-blank input:-webkit-autofill,
body.app-blank input:-webkit-autofill:hover,
body.app-blank input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--gw-text);
    -webkit-box-shadow: 0 0 0 1000px var(--gw-field) inset;
    caret-color: var(--gw-text);
}

body.app-blank .fv-row {
    margin-bottom: 1.35rem !important;
}

/* the show/hide password eye */
body.app-blank [data-password-control] i,
body.app-blank [data-password-control] .ki-outline {
    color: var(--gw-faint) !important;
}

/* --- sign-in button ----------------------------------------------------- */
body.app-blank .btn-primary {
    background-color: var(--gw-green) !important;
    border: 1px solid var(--gw-green) !important;
    color: var(--gw-dark) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    height: 50px;
    letter-spacing: 0.2px;
    box-shadow: none !important;
}

body.app-blank .btn-primary:hover,
body.app-blank .btn-primary:focus,
body.app-blank .btn-primary:active {
    background-color: var(--gw-green-hi) !important;
    border-color: var(--gw-green-hi) !important;
    color: var(--gw-dark) !important;
}

body.app-blank .btn-primary:focus-visible {
    outline: 3px solid rgba(111, 181, 54, 0.45);
    outline-offset: 2px;
}

/* --- links, secondary text --------------------------------------------- */
body.app-blank .link-primary,
body.app-blank a {
    color: var(--gw-muted) !important;
    text-decoration: none;
}

body.app-blank .link-primary:hover,
body.app-blank a:hover {
    color: var(--gw-green) !important;
}

body.app-blank .text-gray-800,
body.app-blank .text-gray-700,
body.app-blank .text-gray-600 {
    color: var(--gw-muted) !important;
}

body.app-blank hr {
    border-color: var(--gw-line-soft) !important;
    opacity: 1;
}

/* language switcher */
body.app-blank .form-select,
body.app-blank .form-select-solid,
body.app-blank .select2-container--bootstrap5 .select2-selection {
    background-color: var(--gw-field) !important;
    border: 1px solid var(--gw-line) !important;
    color: var(--gw-muted) !important;
    border-radius: 8px !important;
}

body.app-blank .select2-container--bootstrap5 .select2-selection__rendered {
    color: var(--gw-muted) !important;
}

/* error banner stays legible on dark */
body.app-blank #errorMsg {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 193, 7, 0.55) !important;
}

body.app-blank #errorMsg .text-gray-800 {
    color: var(--gw-text) !important;
}

/* app loader spinner sits on the dark page before hydration */
body.app-blank #app_loader .text-muted {
    color: var(--gw-muted) !important;
}

/* ==========================================================================
   2. FOOTER: company line + required SFTPGo attribution
   --------------------------------------------------------------------------
   The attribution itself is a REAL anchor rendered by SFTPGo's supported
   branding fields (disclaimer_name + disclaimer_path), so it satisfies the
   AGPL NOTICE requirement to link to the Corresponding Source. Only the
   non-interactive company line is generated here.
   ========================================================================== */

body.app-blank form .d-flex.flex-stack {
    flex-direction: column;
    gap: 14px;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px solid var(--gw-line-soft);
    margin-top: 1.75rem !important;
    padding-top: 1.5rem !important;
    position: relative;
}

body.app-blank form .d-flex.flex-stack > .me-10 {
    margin-right: 0 !important;
    order: 3;
}

body.app-blank form .d-flex.flex-stack > .d-flex {
    order: 2;
    justify-content: center;
}

/* company line */
body.app-blank form .d-flex.flex-stack::before {
    content: "Green Wave Environmental Co.";
    order: 1;
    display: block;
    color: var(--gw-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
}

/* the attribution anchor */
body.app-blank form .d-flex.flex-stack a[target="_blank"] {
    color: var(--gw-faint) !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

body.app-blank form .d-flex.flex-stack a[target="_blank"]:hover {
    color: var(--gw-muted) !important;
    text-decoration: underline;
}

body.app-blank form .d-flex.flex-stack a[target="_blank"] span {
    font-size: 0.72rem !important;
}

/* ==========================================================================
   3. POST-LOGIN APPLICATION SHELL
   The file manager keeps its light content surface (a half-converted dark
   table/modal set would read as broken). The brand is carried by the sidebar
   header, accents and controls.
   ========================================================================== */

.app-sidebar {
    background-color: var(--gw-dark) !important;
    border-right: 1px solid var(--gw-line-soft);
}

.app-sidebar .app-sidebar-logo img[alt="Logo"] {
    height: 34px !important;
    width: auto !important;
    max-width: 190px;
}

/* Compact brand mark: SFTPGo binds BOTH the login heading and this sidebar
   label to the single Branding.ShortName value. ShortName is set to the full
   portal name so the login heading is literal DOM text; the sidebar shows the
   short display name. Remove this block to show the full name here instead. */
.app-sidebar .app-sidebar-logo .text-sidebar {
    font-size: 0 !important;
    line-height: 0 !important;
    padding-left: 12px !important;
}

.app-sidebar .app-sidebar-logo .text-sidebar::after {
    content: "الموجة الخضراء";
    display: inline-block;
    direction: rtl;
    unicode-bidi: isolate;
    font-family: var(--gw-font);
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--gw-text);
    white-space: nowrap;
}

.app-sidebar .menu .menu-link {
    color: var(--gw-muted) !important;
    border-radius: 8px;
}

.app-sidebar .menu .menu-link:hover,
.app-sidebar .menu .menu-item.here > .menu-link,
.app-sidebar .menu .menu-link.active {
    background-color: rgba(111, 181, 54, 0.16) !important;
    color: var(--gw-text) !important;
}

.app-sidebar .menu .menu-link .menu-icon i,
.app-sidebar .menu .menu-link .menu-icon .ki-outline {
    color: var(--gw-green) !important;
}

/* brand accents in the app */
.btn.btn-primary {
    background-color: var(--gw-green);
    border-color: var(--gw-green);
    color: var(--gw-dark);
    font-weight: 600;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--gw-green-hi) !important;
    border-color: var(--gw-green-hi) !important;
    color: var(--gw-dark) !important;
}

.text-primary {
    color: var(--gw-teal) !important;
}

a:not(.btn):not(.menu-link) {
    color: var(--gw-teal);
}

a:not(.btn):not(.menu-link):hover {
    color: var(--gw-green);
}

/* ==========================================================================
   4. RESPONSIVE - phone sizing (iPhone SE 375px through Pro Max 430px)
   ========================================================================== */

@media (max-width: 575.98px) {
    body.app-blank .d-flex.flex-center.flex-column.flex-column-fluid {
        padding: 1.5rem 1rem !important;
    }

    body.app-blank .bg-body {
        padding: 1.85rem 1.35rem !important;
        border-radius: 14px !important;
    }

    body.app-blank img[alt="Logo"] {
        width: min(250px, 88%);
    }

    body.app-blank h1 {
        font-size: 1.12rem !important;
        line-height: 1.7 !important;
    }

    body.app-blank .container.mb-10 {
        margin-bottom: 1.5rem !important;
    }

    body.app-blank .fv-row {
        margin-bottom: 1.1rem !important;
    }

    body.app-blank .form-control,
    body.app-blank .btn-primary {
        height: 48px;
        font-size: 0.97rem;
    }

    body.app-blank form .d-flex.flex-stack::before {
        font-size: 0.72rem;
    }
}

@media (max-width: 380px) {
    body.app-blank img[alt="Logo"] {
        width: 92%;
    }

    body.app-blank h1 {
        font-size: 1.04rem !important;
    }
}

/* honour reduced-motion; nothing here animates, but the bundled theme does */
@media (prefers-reduced-motion: reduce) {
    body.app-blank * {
        transition: none !important;
    }
}