/**
 * Configuration Creator Module - Styles
 * @package     Configuration Creator
 * @version     1.0.11
 * @copyright   Copyright (C) 2026. All rights reserved.
 * @license     GNU General Public License version 2 or later
 *
 * v1.0.11 — Fix: heading still looked visibly thinner than
 * mod-ipv6calc-advanced even with font-weight:800 !important. Root
 * cause was the typeface itself — the outer Joomla template injects
 * its own heading font-family with higher priority than an
 * un-!important font-family, so h4/h5 in this module were rendering
 * in the template's (lighter-looking) heading font instead of the
 * system font stack. font-family is now forced with !important on
 * the same selectors as the weight/colour fix.
 *
 * v1.0.10 — Fix: heading font-weight was being silently reset by
 * outer template CSS (the !important on colour alone wasn't enough
 * to keep the headings bold). font-weight, font-size, letter-spacing
 * and margin on the card-header h4/h5 and section-divider h5 are now
 * all !important, matching the bold weight used throughout
 * mod-ipv6calc-advanced.
 *
 * v1.0.9 — Fix: card-header heading colour now forced to the same
 * near-black tone used by mod-ipv6calc-advanced (#1c2533) with a
 * stronger, bullet-proof selector (id-attribute + element match)
 * so no outer template CSS can override it back to white/blue.
 *
 * v1.0.8 — Visual alignment with the mod-ipv6calc-advanced design
 * system: neutral grey card headers (no blue accent square), system
 * font stack, soft-tint alerts with left accent strip, shared radii
 * and shadow values. No markup, JS or PHP logic was touched for
 * this redesign — only the rules below changed.
 */

.mod-configcreator {
    --cc-primary: #2957aa;
    --cc-primary-dark: #1f4382;
    --cc-primary-soft: rgba(41, 87, 170, 0.08);
    --cc-bg-surface: #ffffff;
    --cc-bg-surface-raised: #f4f6fa;
    --cc-border: #e1e6ed;
    --cc-text: #1c2533;
    --cc-text-dim: #69748a;
    --cc-ok: #1ea672;
    --cc-warn: #d18a1c;
    --cc-danger: #d6453d;
    --cc-neutral: #98a2b3;
    --cc-radius: 12px;
    --cc-font-body: -apple-system, 'Segoe UI', Roboto, system-ui, Helvetica, Arial, sans-serif;

    font-family: var(--cc-font-body);
    color: var(--cc-text);
    -webkit-font-smoothing: antialiased;
    padding: 20px 0;
}

.mod-configcreator * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.mod-configcreator .bg-primary {
    background-color: var(--cc-primary) !important;
}

.mod-configcreator .btn-primary {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
}

.mod-configcreator .btn-primary:hover,
.mod-configcreator .btn-primary:focus,
.mod-configcreator .btn-primary:active {
    background-color: var(--cc-primary-dark);
    border-color: var(--cc-primary-dark);
}

.mod-configcreator .btn-secondary {
    background-color: var(--cc-bg-surface);
    border: 1px solid var(--cc-border);
    color: var(--cc-text-dim);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-weight: 600;
    box-shadow: none;
}

.mod-configcreator .btn-secondary:hover,
.mod-configcreator .btn-secondary:focus,
.mod-configcreator .btn-secondary:active {
    background-color: var(--cc-primary-soft);
    border-color: var(--cc-primary);
    color: var(--cc-primary);
}

.mod-configcreator .btn-lg {
    padding: 0.65rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
}

/* Copy to Clipboard Button - dark ghost, same proportions as the
   other action buttons */
.mod-configcreator #copy-btn.btn-dark {
    background-color: var(--cc-text);
    border-color: var(--cc-text);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mod-configcreator #copy-btn.btn-dark:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */

.mod-configcreator .card {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    margin-bottom: 20px;
    background: var(--cc-bg-surface);
}

/* Grey card-header, no blue accent square — matches the
   ipv6calc-advanced header treatment. The bg-primary / bg-success
   utility classes already present in the markup are neutralised
   here on purpose so the HTML/PHP stays untouched. */
.mod-configcreator .card-header {
    border-radius: var(--cc-radius) var(--cc-radius) 0 0 !important;
    padding: 1.1rem 1.4rem;
    background-color: var(--cc-bg-surface-raised);
    border-bottom: 1px solid var(--cc-border);
    color: var(--cc-text);
}

.mod-configcreator .card-header.bg-primary,
.mod-configcreator .card-header.bg-success {
    background-color: var(--cc-bg-surface-raised) !important;
}

.mod-configcreator .card-header.text-white,
.mod-configcreator .card-header h4,
.mod-configcreator .card-header h5,
.mod-configcreator[id^="mod-configcreator-"] .card-header.text-white,
.mod-configcreator[id^="mod-configcreator-"] .card-header h4,
.mod-configcreator[id^="mod-configcreator-"] .card-header h5,
.mod-configcreator[id^="mod-configcreator-"] .card-header h4 strong,
.mod-configcreator[id^="mod-configcreator-"] .card-header h5 strong {
    color: #1c2533 !important;
    margin: 0 !important;
    font-family: var(--cc-font-body) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.01em !important;
}

.mod-configcreator .card-body {
    padding: 1.6rem;
    background: var(--cc-bg-surface);
}

/* ---------------------------------------------------------------
   Section dividers inside the form
   --------------------------------------------------------------- */

.mod-configcreator hr {
    border-top: 1px solid var(--cc-border);
    opacity: 1;
}

.mod-configcreator h5,
.mod-configcreator[id^="mod-configcreator-"] h5 {
    color: var(--cc-text) !important;
    font-family: var(--cc-font-body) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------------
   Form styling
   --------------------------------------------------------------- */

.mod-configcreator .form-label {
    font-weight: 600;
    color: var(--cc-text);
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
}

.mod-configcreator .form-label.required {
    position: relative;
}

.mod-configcreator .form-control,
.mod-configcreator .form-select {
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.9rem;
    font-family: var(--cc-font-body);
    background: var(--cc-bg-surface);
    color: var(--cc-text);
    height: 44px;
}

.mod-configcreator .form-control:focus,
.mod-configcreator .form-select:focus {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px var(--cc-primary-soft);
    background: var(--cc-bg-surface);
}

.mod-configcreator .form-control.is-invalid,
.mod-configcreator .form-select.is-invalid {
    border-color: var(--cc-danger);
}

.mod-configcreator .invalid-feedback {
    font-size: 0.78rem;
    margin-top: 0.35rem;
    color: var(--cc-danger);
}

.mod-configcreator .text-danger {
    color: var(--cc-danger) !important;
}

/* ---------------------------------------------------------------
   Output section
   --------------------------------------------------------------- */

.mod-configcreator #output-section {
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mod-configcreator .output-code {
    background-color: var(--cc-bg-surface-raised);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    padding: 1.1rem 1.4rem;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 600px;
    overflow-y: auto;
    margin: 0;
    color: var(--cc-text);
}

/* ---------------------------------------------------------------
   Alerts — soft tint + left accent strip instead of solid
   pastel blocks, in line with the ipv6calc alert pattern.
   --------------------------------------------------------------- */

.mod-configcreator .bg-success {
    background-color: var(--cc-ok) !important;
}

.mod-configcreator .alert {
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--cc-border);
    border-left: 4px solid var(--cc-neutral);
    animation: slideDown 0.3s ease-out;
}

.mod-configcreator .alert-success {
    background-color: var(--cc-bg-surface-raised);
    border-left-color: var(--cc-ok);
    color: var(--cc-text);
}

.mod-configcreator .alert-danger {
    background-color: var(--cc-bg-surface-raised);
    border-left-color: var(--cc-danger);
    color: var(--cc-text);
}

.mod-configcreator .alert-dismissible .btn-close {
    padding: 0.75rem 1rem;
}

/* ---------------------------------------------------------------
   Loading spinner
   --------------------------------------------------------------- */

.mod-configcreator .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: var(--cc-primary);
}

/* ---------------------------------------------------------------
   Shadow utilities
   --------------------------------------------------------------- */

.mod-configcreator .shadow-sm {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

.mod-configcreator a:focus-visible,
.mod-configcreator button:focus-visible,
.mod-configcreator input:focus-visible,
.mod-configcreator select:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mod-configcreator #output-section,
    .mod-configcreator .alert {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------
   Custom scrollbar for output
   --------------------------------------------------------------- */

.mod-configcreator .output-code::-webkit-scrollbar {
    width: 8px;
}

.mod-configcreator .output-code::-webkit-scrollbar-track {
    background: var(--cc-bg-surface-raised);
    border-radius: 4px;
}

.mod-configcreator .output-code::-webkit-scrollbar-thumb {
    background: var(--cc-border);
    border-radius: 4px;
}

.mod-configcreator .output-code::-webkit-scrollbar-thumb:hover {
    background: var(--cc-text-dim);
}

/* ---------------------------------------------------------------
   Responsive Design
   --------------------------------------------------------------- */

@media (max-width: 768px) {
    .mod-configcreator .card-body {
        padding: 1.25rem;
    }

    .mod-configcreator .btn-lg {
        width: 100%;
        margin-bottom: 10px;
    }

    .mod-configcreator .btn-lg.me-2 {
        margin-right: 0 !important;
    }
}