/**
 * HedgerPro shared base UI primitives.
 *
 * Generic, reusable styles for standalone pages, all scoped under #app so they
 * never leak onto the shared header (#hp-ext-header), the page frame, or an auth
 * gate that sits outside the app root.
 *
 * Load AFTER lib/theme.css (for the tokens) and BEFORE the page's own stylesheet
 * (so a page can override these primitives in its own #app block):
 *   <link rel="stylesheet" href="/lib/theme.css" />
 *   <link rel="stylesheet" href="/lib/page-frame.css" />
 *   <link rel="stylesheet" href="/lib/ui.css" />
 *   <link rel="stylesheet" href="./css/style.css" />
 */

#app {
    font-family: var(--font);
    color: var(--black);
}

/* Force the brand font only on form controls, which don't inherit font-family
   by default. Everything else (div/span/p/headings/tables) already inherits it
   from #app. Crucially we must NOT target span/div here: doing so beats Font
   Awesome's `.fa` class (this rule has an #app id) and would render icon glyphs
   in the text font (blank boxes). Icons inside form controls still win via .fa. */
#app :is(input, select, textarea, button, optgroup) {
    font-family: var(--font);
}

/* ---- Inline notices (error / success) ----------------------------------- */
#app .error-message {
    display: none; /* shown when Vue adds the .show class */
    background-color: #ffebee;
    color: #c62828;
    padding: 10px 15px;
    border-radius: var(--radius);
    margin-bottom: 15px;
    border-left: 4px solid #c62828;
}

#app .error-message.show {
    display: block;
}

#app .settings-message {
    display: none;
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 10px 15px;
    border-radius: var(--radius);
    margin-bottom: 15px;
    border-left: 4px solid #2e7d32;
}

#app .settings-message.show {
    display: block;
}