ha_permissions/ui/index.css

@import "./login/index.css";
@import "./adminCreate/index.css";
@import "./dashboard/index.css";

/*
Background layers

--bg-base: #14171c — app background
--bg-surface: #1c2027 — cards/panels
--bg-surface-raised: #262b34 — modals, dropdowns, hover states
--bg-inset: #0e1014 — sunken elements (input fields, code blocks)

Text

--text-primary: #eef1f5
--text-secondary: #9aa3af
--text-tertiary: #5c6470

Accent (interactive/brand)

--accent: #4f9cf9 — primary actions, active toggles, links
--accent-hover: #6bacfa
--accent-muted: #2a3b52 — subtle backgrounds for selected/active rows

Borders

--border-subtle: #2a2f38
--border-strong: #3a4049
Semantic / device-state colors

These matter a lot for a HA UI since you're constantly showing on/off, alerts, and sensor readings:

--state-on: #f5b942 — entity "on" (warm amber reads well as "light is on," avoids clashing with accent blue)
--state-off: #4a5058 — entity "off" (neutral gray, not red — off isn't an error)
--success: #4caf7d — armed, locked, connected, healthy
--warning: #e8a33d — low battery, unavailable-but-not-critical
--danger: #e5484d — alarm triggered, offline, critical sensor
--info: #4f9cf9 — same as accent, reuse for info badges
*/

:root {
  /* Backgrounds */
  --bg-base: #14171c;
  --bg-surface: #1c2027;
  --bg-surface-raised: #262b34;
  --bg-inset: #0e1014;

  /* Text */
  --text-primary: #eef1f5;
  --text-secondary: #9aa3af;
  --text-tertiary: #5c6470;

  /* Accent */
  --accent: #4f9cf9;
  --accent-hover: #6bacfa;
  --accent-muted: #2a3b52;

  /* Borders */
  --border-subtle: #2a2f38;
  --border-strong: #3a4049;

  /* Semantic / device state */
  --state-on: #f5b942;
  --state-off: #4a5058;
  --success: #4caf7d;
  --warning: #e8a33d;
  --danger: #e5484d;
  --info: #4f9cf9;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    height: 100%;
    width: 100%;
}

body{
    background: var(--bg-base);
    color: var(--text-primary);
}

#notifier{
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    max-width: min(420px, calc(100% - 48px));
    background: var(--bg-surface-raised);
    border-left: 4px solid var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 14px 18px;
}

#notifier.success{
    border-left-color: var(--success);
}

#notifier.warning{
    border-left-color: var(--warning);
}

#notifier.error{
    border-left-color: var(--danger);
}

#notifierMessage{
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
}