/* ==== Brand variables ==== */
:root {
  --brand-bg: #1e374d;
  --brand-panel: #1a2f44;
  --brand-soft: #152734;
  --brand-text: #94fdf8;
  --brand-accent: #94fdf8;
  --brand-accent-weak: rgba(148,253,248,0.12);
  --brand-border: rgba(148,253,248,0.12);
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,0.45);
  --focus-ring: 0 0 0 3px rgba(148,253,248,0.3);
  --font-stack: "Aptos", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-button-text: #0b2330;
}

/* ==== Global ==== */
html, body, #app, .application {
  background: linear-gradient(180deg, var(--brand-bg), var(--brand-soft)) !important;
  color: var(--brand-text) !important;
  font-family: var(--font-stack) !important;
}

p, span, label, strong, b, h1, h2, h3, h4, h5, h6, .text-primary, .text-secondary {
  color: var(--brand-text) !important;
}

/* Links */
a {
  color: var(--brand-accent) !important;
  text-decoration: none;
}
a:hover {
  color: #dffefe !important;
  text-decoration: underline;
}

/* ==== Forms & Inputs ==== */
input, select, textarea {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--radius) !important;
  color: var(--brand-text) !important;
  padding: 8px 10px !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(148,253,248,0.6) !important;
}
label {
  color: var(--brand-text) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-color: var(--brand-accent) !important;
}

/* Fix for search bar and overlapping icon */
.search-form input[type="search"] {
  padding-left: 36px !important;
}
.search-form .search__icon {
  color: var(--brand-muted) !important;
  left: 12px !important;
}

/* Fix for the selector background and icons in the column header */
.column-header {
  background: var(--brand-panel) !important;
}
.column-header .select-menu__button {
  background: var(--brand-accent) !important;
  border-color: transparent !important;
  color: var(--brand-button-text) !important;
}
.column-header .select-menu__button .fa-caret-down {
  color: var(--brand-button-text) !important;
}

/* ==== Mobile Menu Fix (Final Attempt) ==== */
/* Targeting the main application container and the tabs bar to ensure the rule is as specific as possible */
.application .tabs-bar, .application .tabs-bar.tabs-bar {
  background-color: var(--brand-panel) !important;
  border-top: 1px solid var(--brand-border) !important;
}
.application .tabs-bar__item a, .application .tabs-bar__item a i {
  color: var(--brand-muted) !important;
  background-color: var(--brand-panel) !important;
}
.application .tabs-bar__item--active a, .application .tabs-bar__item--active a i {
  color: var(--brand-accent) !important;
  background-color: var(--brand-panel) !important;
}

/* ==== Buttons ==== */
button, .btn, input[type="submit"], .button {
  background: var(--brand-accent) !important;
  color: var(--brand-button-text) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 8px 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background 0.15s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover, .button:hover {
  background: #cffffd !important;
  color: var(--brand-button-text) !important;
}

/* Specific fix for text and icons inside buttons (e.g. "Public", "Post", etc.) */
button span, button i, .btn span, .btn i, .button span, .button i {
  color: var(--brand-button-text) !important;
}

/* Secondary/outline buttons */
.button-secondary {
  background: none !important;
  border: 1px solid var(--brand-accent) !important;
  color: var(--brand-accent) !important;
}
.button-secondary:hover {
  background: var(--brand-accent) !important;
  color: var(--brand-button-text) !important;
}
.button-secondary span, .button-secondary i {
  color: var(--brand-accent) !important;
}
.button-secondary:hover span, .button-secondary:hover i {
  color: var(--brand-button-text) !important;
}

/* Specific: Create Account / Sign In forms */
.form-actions button, .actions button, .actions .btn {
  background: var(--brand-accent) !important;
  color: var(--brand-button-text) !important;
}
.form-actions button:hover, .actions button:hover {
  background: #cffffd !important;
  color: var(--brand-button-text) !important;
}

/* Signup progress text */
.wizard__step-current, .wizard__progress-text {
  color: var(--brand-text) !important;
}

/* Character counter (the "500" in your image) */
.character-counter {
  color: var(--brand-muted) !important;
}

/* ==== Panels & Cards ==== */
.card, .panel, .column, .modal {
  background: linear-gradient(180deg, var(--brand-panel), rgba(0,0,0,0.05)) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--radius) !important;
  color: var(--brand-text) !important;
}

/* Status & Timeline */
.status__content, .note__content {
  color: var(--brand-text) !important;
}
.status__content a {
  color: var(--brand-accent) !important;
}

/* Muted text */
small, .meta, .hint, .text-muted {
  color: var(--brand-muted) !important;
}