/* ==========================================================================
   MaCloud brand overlay for the FOSSBilling client area (huraga theme)
   --------------------------------------------------------------------------
   Carries the macloud.uk design language into the billing client area so the
   storefront and the client area read as one product rather than two.

   Palette, radii, shadow and fonts are copied verbatim from
   C:\domain\assets\css\style.css (:root) - the storefront is the source of
   truth. If a brand colour changes there, change it here too; they are
   deliberately duplicated rather than shared because the two sites are
   separate IIS applications with no common asset root.

   Lives in public/branding/ ON PURPOSE. themes/huraga/assets/build/ is
   esbuild output with content-hashed filenames and is wiped on every rebuild,
   so a file dropped there would silently disappear. public/ is served
   directly by IIS and survives theme rebuilds.

   Loaded from themes/huraga/html/layout_default.html.twig, immediately after
   huraga.css so these declarations win without needing !important.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* --- macloud.uk tokens, prefixed to avoid colliding with huraga's own --- */
    --mc-bg:        #070b16;
    --mc-bg2:       #0b1120;
    --mc-surface:   #0f172a;
    --mc-surface2:  #131c33;
    --mc-line:      rgba(148, 163, 184, .16);
    --mc-line2:     rgba(148, 163, 184, .28);
    --mc-txt:       #e8edf7;
    --mc-muted:     #94a3b8;
    --mc-dim:       #64748b;
    --mc-brand:     #38bdf8;
    --mc-brand2:    #a78bfa;
    --mc-ok:        #34d399;
    --mc-gold:      #fbbf24;
    --mc-danger:    #f87171;

    --mc-radius:    18px;
    --mc-radius-sm: 12px;
    --mc-shadow:    0 24px 60px -20px rgba(0, 0, 0, .75);

    --mc-ff:        'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mc-ff-ar:     'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* Typography applies in both colour schemes; only colour is theme-dependent. */
body {
    font-family: var(--mc-ff);
    letter-spacing: -0.011em;
}

/* macloud.uk serves Arabic with Cairo. Match that so an Arabic-locale client
   area doesn't fall back to a generic system face mid-journey. */
html[lang^="ar"] body,
html[dir="rtl"] body {
    font-family: var(--mc-ff-ar);
}

h1, h2, h3, h4, h5, h6,
.card-title {
    font-weight: 700;
    letter-spacing: -0.021em;
}

/* ==========================================================================
   Dark scheme - the storefront's native look, and huraga's current default.
   ========================================================================== */
[data-bs-theme="dark"] {
    --bs-body-bg:            var(--mc-bg2);
    --bs-body-color:         var(--mc-txt);
    --bs-emphasis-color:     #ffffff;
    --bs-secondary-color:    var(--mc-muted);
    --bs-tertiary-color:     var(--mc-dim);

    --bs-body-bg-rgb:        11, 17, 32;
    --bs-body-color-rgb:     232, 237, 247;

    --bs-secondary-bg:       var(--mc-surface);
    --bs-tertiary-bg:        var(--mc-surface2);

    --bs-border-color:       var(--mc-line);
    --bs-border-color-translucent: var(--mc-line);

    --bs-primary:            var(--mc-brand);
    --bs-primary-rgb:        56, 189, 248;
    --bs-link-color:         var(--mc-brand);
    --bs-link-hover-color:   #7dd3fc;
    --bs-link-color-rgb:     56, 189, 248;

    --bs-success:            var(--mc-ok);
    --bs-warning:            var(--mc-gold);
    --bs-danger:             var(--mc-danger);

    --bs-border-radius:      var(--mc-radius-sm);
    --bs-border-radius-lg:   var(--mc-radius);
}

/* The storefront sits on a near-black base with panels lifted above it.
   Reproduce that depth rather than a single flat fill. */
[data-bs-theme="dark"] body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(56, 189, 248, .07), transparent 60%),
        radial-gradient(900px 500px at 100% 0%,  rgba(167, 139, 250, .06), transparent 55%),
        var(--mc-bg);
    background-attachment: fixed;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
}

[data-bs-theme="dark"] .card {
    box-shadow: var(--mc-shadow);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: transparent;
    border-color: var(--mc-line);
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .navbar-expand-lg {
    background-color: rgba(15, 23, 42, .72);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--mc-line);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg:          transparent;
    --bs-table-color:       var(--mc-txt);
    --bs-table-border-color: var(--mc-line);
    --bs-table-hover-bg:    rgba(56, 189, 248, .06);
    --bs-table-striped-bg:  rgba(148, 163, 184, .045);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--mc-bg2);
    border-color: var(--mc-line2);
    color: var(--mc-txt);
    border-radius: var(--mc-radius-sm);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--mc-bg2);
    border-color: var(--mc-brand);
    box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .2);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--mc-dim);
}

/* ==========================================================================
   Shared component treatment (both schemes)
   ========================================================================== */

/* The storefront's primary CTA is a cyan-to-violet sweep. Reused here so a
   client recognises the same button they clicked on the way in. */
.btn-primary {
    --bs-btn-bg:            var(--mc-brand);
    --bs-btn-border-color:  var(--mc-brand);
    --bs-btn-color:         #04121d;
    --bs-btn-hover-bg:      #7dd3fc;
    --bs-btn-hover-border-color: #7dd3fc;
    --bs-btn-hover-color:   #04121d;
    --bs-btn-active-bg:     #0ea5e9;
    --bs-btn-active-border-color: #0ea5e9;
    background-image: linear-gradient(135deg, var(--mc-brand) 0%, var(--mc-brand2) 100%);
    border: 0;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-image: linear-gradient(135deg, #7dd3fc 0%, #c4b5fd 100%);
}

.btn {
    border-radius: var(--mc-radius-sm);
    font-weight: 600;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Keyboard focus must stay visible against the dark base - the default
   Bootstrap ring is too low-contrast on #070b16. */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--mc-brand);
    outline-offset: 2px;
}

/* Footer signature: quieter than body copy, matching the storefront's
   de-emphasised legal line. */
footer,
.footer {
    color: var(--mc-muted);
    border-top: 1px solid var(--mc-line);
}

footer a,
.footer a {
    color: var(--mc-muted);
    text-decoration: none;
}

footer a:hover,
.footer a:hover {
    color: var(--mc-brand);
    text-decoration: underline;
}

/* Respect a user's reduced-motion preference - the storefront does the same. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}