/* =========================================================
PROJECT: Walanda platform
FILE: base.css
PATH: /src/styles/base.css
MODULE: ui / design system
SCOPE: styling (global / component / page)
PURPOSE: handles reset, typography, forms, and base elements
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */
@import url("./variables.css");
@import url("./utilities.css");

/* =========================================================
SECTION: reset
DESCRIPTION: base resets and normalization
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Brand-green accent on EVERY native form control (selects, radios,
       checkboxes, range, progress). accent-color is an inherited property,
       so setting it once here cascades site-wide and replaces the
       browser-default blue selection highlight (e.g. the open <select>
       dropdown's selected option). */
    accent-color: var(--primary);
}

/* Brand-green text selection everywhere (was the browser-default blue). */
::selection {
    background: var(--primary);
    color: #fff;
}
::-moz-selection {
    background: var(--primary);
    color: #fff;
}

/* The highlighted (selected) option inside an OPEN native <select> popup —
   this is the blue bar Chrome paints by default; force it to brand green. */
option:checked,
option:hover {
    background-color: var(--primary);
    color: #fff;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
input,
select,
textarea {
    transition: all var(--transition-fast);
}


/* =========================================================
SECTION: layout
DESCRIPTION: global layout structure
========================================================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--font-base);
    background: var(--background);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

#site-header,
#site-footer {
    display: block;
}


/* =========================================================
SECTION: components
DESCRIPTION: reusable ui components (cards, buttons)
========================================================= */

.container {
    width: min(90%, var(--container-width));
    margin-inline: auto;
}

.section {
    padding: 80px 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius-md);
    padding: 12px 18px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-outline {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    background: var(--card);
}

.btn-secondary {
    background: var(--card);
    color: var(--text-dark);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--status-danger-fg);
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(0.92);
}

.btn-danger:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Shared card primitive. One concept = one class. Variants via
   modifiers — never invent .x-card / .y-card / .z-card duplicates. */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}

.card--compact {
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.card--interactive {
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

.card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

/* Sidebar "Need Help?" support card — one shared component used by every
   role workspace (learner, instructor, parent, trader, advertiser, …).
   One concept = one class; do NOT reintroduce per-role *-support-card
   duplicates. The trailing link is a plain <a class="btn btn-primary">
   that points at the public contact page. */
.support-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
}

.support-card:not(:first-child) {
    /* When it sits below a status card in the same sidebar-bottom. */
    margin-top: var(--space-md);
}

.support-card .help-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-sm);
    border-radius: 50%;
    background: var(--status-success-bg);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 18px;
}

.support-card h4 {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--text-dark);
}

.support-card p {
    margin: 0 0 var(--space-sm);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.support-card .btn {
    width: 100%;
}

/* Shared pill / status chip primitive. Use modifiers to colour. */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pill--success {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.pill--warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.pill--info {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.pill--danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.pill--muted {
    background: var(--background);
    color: var(--muted);
}

/* Smaller-button modifier for tight rows (table cells, navbar auth
   zone, etc.). Strictly a size override — colour/border/radius keep
   coming from the .btn / .btn-primary / .btn-outline base. */
.btn-compact {
    padding: 6px 14px;
    font-size: 0.85rem;
    min-height: 32px;
}

/* Shared form primitives. Any module that renders a form should reuse
   .form-grid + .form-field instead of redefining inputs. Use only
   design tokens — never hardcode colours or sizes here. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field label {
    color: var(--text-dark);
    font-size: 0.84rem;
    font-weight: 600;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field select {
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7C7C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.form-field select:has(option[value=""]:checked) {
    color: var(--muted);
}

.form-field textarea {
    min-height: 110px;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(31, 167, 138, 0.12);
}

.form-field-hint {
    font-size: 0.78rem;
    color: var(--muted);
}

.form-field-error {
    font-size: 0.8rem;
    color: var(--status-danger-fg);
}

.form-field input.is-invalid,
.form-field textarea.is-invalid,
.form-field select.is-invalid {
    border-color: var(--status-danger-fg);
}

.form-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-dark);
    font-size: 0.9rem;
}

.form-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* Shared inline status banner. Compose with --success / --warning / --danger /
   --info modifiers; default style is neutral. Used for form-level success or
   error feedback inside any module. */
.form-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-dark);
    font-size: 0.9rem;
}

.form-banner--success {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-color: transparent;
}

.form-banner--warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-color: transparent;
}

.form-banner--info {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-color: transparent;
}

.form-banner--danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border-color: transparent;
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
SECTION: pages
DESCRIPTION: page-specific styles
========================================================= */


/* =========================================================
SECTION: responsive
DESCRIPTION: media queries and breakpoints
========================================================= */

@media (max-width: 768px) {
    .section {
        padding: 64px 0;
    }
}

/* =========================================================
SECTION: kill-switch gate
DESCRIPTION: Hides any surface tagged with data-module="<slug>"
             when the super-admin has killed that module. The
             `data-modules-off` attribute on <html> is stamped at
             first paint by /api/feature-flags/boot.js (loaded
             synchronously from every public page's <head>), so
             these rules apply BEFORE the body parses — disabled
             modules never appear, not even for a frame.
             Slug list is the platform_modules.slug set; keep this
             in lockstep with backend/utils/featureFlags.js.
========================================================= */
html[data-modules-off~="lms"]         [data-module="lms"],
html[data-modules-off~="marketplace"] [data-module="marketplace"],
html[data-modules-off~="escrow"]      [data-module="escrow"],
html[data-modules-off~="institution"] [data-module="institution"],
html[data-modules-off~="bursaries"]   [data-module="bursaries"],
html[data-modules-off~="knowledge"]   [data-module="knowledge"],
html[data-modules-off~="live"]        [data-module="live"],
html[data-modules-off~="community"]   [data-module="community"] {
    display: none !important;
}
/* =========================================================
END OF FILE
FILE: base.css
PATH: /src/styles/base.css
MODULE: ui / design system
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */