/* ==========================================================================
   Skill Green - Main Stylesheet (Combined)
   ==========================================================================
   Loads Redmine core CSS first, then applies theme overrides.
   ========================================================================== */

/* Load Redmine core CSS */
@import url('/stylesheets/application.css');

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Skill Green - CSS Custom Properties (Variables)
   ==========================================================================
   Centralized design tokens for the Skill Green theme.
   All visual values are defined here for consistency and easy customization.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Colors - Core Palette
     -------------------------------------------------------------------------- */

  /* Primary brand colors */
  --sg-color-primary: #138700;
  --sg-color-primary-dark: #026400;
  --sg-color-primary-light: #6be800;
  --sg-color-primary-hover: #0f6d00;

  /* Header and navigation gradient */
  --sg-gradient-nav-from: #026400;
  --sg-gradient-nav-to: #6be800;

  /* Background colors */
  --sg-bg-body: #F5F5F5;
  --sg-bg-white: #FFFFFF;
  --sg-bg-header: #212121;
  --sg-bg-sidebar: #FAFAFA;
  --sg-bg-hover: #F7FFF5;
  --sg-bg-input: #FFFFFF;
  --sg-bg-disabled: #F0F0F0;
  --sg-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text colors */
  --sg-text-primary: #212121;
  --sg-text-secondary: #616161;
  --sg-text-muted: #9E9E9E;
  --sg-text-inverse: #FFFFFF;
  --sg-text-link: #026400;
  --sg-text-link-hover: #138700;

  /* Border colors */
  --sg-border-default: #E5E5E5;
  --sg-border-light: #EEEEEE;
  --sg-border-input: #D0D0D0;
  --sg-border-focus: #138700;
  --sg-border-hover: #C0C0C0;

  /* --------------------------------------------------------------------------
     Status Colors
     -------------------------------------------------------------------------- */

  /* Status badges */
  --sg-status-new-bg: #E8F5E9;
  --sg-status-new-text: #2E7D32;
  --sg-status-in-progress-bg: #E3F2FD;
  --sg-status-in-progress-text: #1565C0;
  --sg-status-pending-bg: #FFF3E0;
  --sg-status-pending-text: #E65100;
  --sg-status-closed-bg: #F5F5F5;
  --sg-status-closed-text: #616161;
  --sg-status-blocked-bg: #FFEBEE;
  --sg-status-blocked-text: #C62828;

  /* Priority colors */
  --sg-priority-low: #78909C;
  --sg-priority-normal: #138700;
  --sg-priority-high: #E65100;
  --sg-priority-urgent: #C62828;

  /* Message/alert colors */
  --sg-msg-success-bg: #E8F5E9;
  --sg-msg-success-border: #4CAF50;
  --sg-msg-success-text: #2E7D32;
  --sg-msg-warning-bg: #FFF3E0;
  --sg-msg-warning-border: #FF9800;
  --sg-msg-warning-text: #E65100;
  --sg-msg-error-bg: #FFEBEE;
  --sg-msg-error-border: #F44336;
  --sg-msg-error-text: #C62828;
  --sg-msg-info-bg: #E3F2FD;
  --sg-msg-info-border: #2196F3;
  --sg-msg-info-text: #1565C0;

  /* --------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------- */

  /* Font families */
  --sg-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sg-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes */
  --sg-font-size-xs: 12px;
  --sg-font-size-sm: 13px;
  --sg-font-size-base: 14px;
  --sg-font-size-md: 15px;
  --sg-font-size-lg: 16px;
  --sg-font-size-xl: 20px;
  --sg-font-size-2xl: 24px;
  --sg-font-size-3xl: 30px;

  /* Font weights */
  --sg-font-weight-regular: 400;
  --sg-font-weight-medium: 500;
  --sg-font-weight-semibold: 600;
  --sg-font-weight-bold: 700;

  /* Line heights */
  --sg-line-height-tight: 1.3;
  --sg-line-height-base: 1.6;
  --sg-line-height-relaxed: 1.8;

  /* --------------------------------------------------------------------------
     Spacing Scale (4px base)
     -------------------------------------------------------------------------- */

  --sg-space-0: 0;
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 20px;
  --sg-space-6: 24px;
  --sg-space-8: 32px;
  --sg-space-10: 40px;
  --sg-space-12: 48px;
  --sg-space-16: 64px;

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */

  --sg-radius-sm: 4px;
  --sg-radius-md: 8px;
  --sg-radius-lg: 12px;
  --sg-radius-xl: 16px;
  --sg-radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */

  --sg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --sg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --sg-shadow-focus: 0 0 0 3px rgba(19, 135, 0, 0.15);

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */

  --sg-layout-max-width: 1700px;
  --sg-layout-padding-x: 24px;
  --sg-layout-padding-y: 24px;
  --sg-layout-sidebar-width: 260px;
  --sg-layout-header-height: 56px;
  --sg-layout-nav-height: 64px;

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */

  --sg-transition-fast: 150ms ease;
  --sg-transition-base: 200ms ease;
  --sg-transition-slow: 300ms ease;

  /* --------------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------------- */

  --sg-z-dropdown: 100;
  --sg-z-sticky: 200;
  --sg-z-fixed: 300;
  --sg-z-modal-backdrop: 400;
  --sg-z-modal: 500;
  --sg-z-toast: 600;
}
/* ==========================================================================
   Skill Green - Header Visual Styles
   ==========================================================================
   Redmine 5.1 layout structure:
     #wrapper > #top-menu > #header > #main(flex row-reverse) > #sidebar + #content > #footer
     #main-menu is position:absolute inside #header (only on project pages)
   
   RULE: ONLY change colors, fonts, shadows, border-radius.
         NEVER change: display, float, position, width, height, margin, padding,
                       flex, bottom, left, right, top, z-index.
   ========================================================================== */

/* Reset gradientes inline do Redmine default */
#top-menu,
#header,
#main-menu {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   #top-menu — barra superior escura
   -------------------------------------------------------------------------- */
#top-menu {
  background-color: var(--sg-bg-header) !important;
}

#top-menu a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: var(--sg-font-size-xs);
  border-radius: var(--sg-radius-sm);
}

#top-menu a:hover {
  color: #fff !important;
}

#top-menu #loggedas {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* --------------------------------------------------------------------------
   #header — barra de título do projeto
   -------------------------------------------------------------------------- */
#header {
  background-color: var(--sg-bg-header) !important;
}

#header h1 {
  font-size: var(--sg-font-size-xl);
  font-weight: var(--sg-font-weight-semibold);
  color: var(--sg-text-inverse) !important;
}

#header a {
  color: var(--sg-text-inverse) !important;
}

/* Quick search */
#header #quick-search label {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--sg-font-size-sm);
}

#header #q {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--sg-radius-md);
  color: #fff;
  font-size: var(--sg-font-size-sm);
}

#header #q::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#header #q:focus {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   #main-menu — barra de navegação com gradiente verde (apenas em projetos)
   -------------------------------------------------------------------------- */
#main-menu {
  background: linear-gradient(
    135deg,
    var(--sg-gradient-nav-from) 0%,
    var(--sg-gradient-nav-to) 100%
  ) !important;
}

#main-menu li a {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: var(--sg-font-size-sm);
  font-weight: var(--sg-font-weight-medium);
}

#main-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

#main-menu li a.selected,
#main-menu li a.selected:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  font-weight: var(--sg-font-weight-semibold);
}

#main-menu .menu-children {
  background-color: var(--sg-bg-white);
  border-color: var(--sg-border-default);
}

#main-menu .menu-children li a {
  color: var(--sg-text-primary) !important;
  background-color: var(--sg-bg-white) !important;
  font-weight: var(--sg-font-weight-regular);
}

#main-menu .menu-children li a:hover {
  background-color: var(--sg-bg-hover) !important;
  color: var(--sg-color-primary) !important;
}

/* --------------------------------------------------------------------------
   #wrapper / #sidebar — visual only
   -------------------------------------------------------------------------- */
#wrapper {
  background-color: var(--sg-bg-body);
}

#sidebar {
  background-color: var(--sg-bg-white);
  border-left: 1px solid var(--sg-border-default);
}

#sidebar h3 {
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-text-secondary);
}

#sidebar ul li a {
  color: var(--sg-text-secondary);
  border-left: 3px solid transparent;
  border-radius: 0;
}

#sidebar ul li a:hover {
  background-color: var(--sg-bg-hover);
  color: var(--sg-text-primary);
  text-decoration: none;
}

#sidebar ul li a.active,
#sidebar ul li.selected a {
  color: var(--sg-color-primary);
  border-left-color: var(--sg-color-primary);
  font-weight: var(--sg-font-weight-medium);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
#header h1 a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--sg-text-inverse) !important;
}

#header h1 a img {
  height: 40px;
  width: auto;
}

#header h1 {
  margin: 0;
  font-size: var(--sg-font-size-xl);
  font-weight: var(--sg-font-weight-semibold);
}
/* ==========================================================================
   Skill Green - Typography
   ==========================================================================
   Font loading and text color overrides only.
   NEVER change margin/padding on layout elements.
   ========================================================================== */

/* Font */

/* Body */
body {
  font-family: var(--sg-font-family);
  font-size: var(--sg-font-size-base);
  color: var(--sg-text-primary);
}

/* Headings - color/weight only */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sg-font-family);
  color: var(--sg-text-primary);
}

/* Links */
a {
  color: var(--sg-text-link);
  transition: color var(--sg-transition-fast);
}

a:hover {
  color: var(--sg-text-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--sg-color-primary);
  outline-offset: 2px;
  border-radius: var(--sg-radius-sm);
}

/* Code */
code {
  background-color: var(--sg-bg-sidebar);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-sm);
  color: var(--sg-text-primary);
}

pre {
  background-color: var(--sg-bg-sidebar);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-md);
}

pre code {
  background: none;
  border: none;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--sg-color-primary);
  background-color: var(--sg-bg-hover);
  color: var(--sg-text-secondary);
}

/* Sidebar headings */
#sidebar h3 {
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-text-secondary);
}

/* Tab labels */
.tabs a {
  font-weight: var(--sg-font-weight-medium);
}

/* Flash */
#flash_notice,
#flash_error,
#flash_warning {
  font-weight: var(--sg-font-weight-medium);
}

/* Issue subject */
#issue_subject,
.subject h3 {
  font-weight: var(--sg-font-weight-semibold);
}

/* Description */
.description {
  color: var(--sg-text-secondary);
}

/* Wiki */
.wiki {
  line-height: var(--sg-line-height-relaxed);
}

/* Text utilities */
.text-muted { color: var(--sg-text-muted) !important; }
.text-secondary { color: var(--sg-text-secondary) !important; }
.text-primary { color: var(--sg-color-primary) !important; }
.text-danger { color: var(--sg-priority-urgent) !important; }
.text-warning { color: var(--sg-priority-high) !important; }
.text-success { color: var(--sg-status-new-text) !important; }

/* ==========================================================================
   Skill Green - Layout
   ==========================================================================
   Conservative overrides. Only visual properties (colors, fonts, shadows).
   NEVER change layout properties (display, float, position, width, height).
   ========================================================================== */

body {
  background-color: var(--sg-bg-body);
  font-family: var(--sg-font-family);
}

/* Box / cards */
.box {
  background-color: var(--sg-bg-white);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-xs);
}

fieldset {
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-lg);
}

/* Flash messages */
#flash_notice {
  background-color: var(--sg-msg-success-bg);
  border: 1px solid var(--sg-msg-success-border);
  color: var(--sg-msg-success-text);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-3) var(--sg-space-4);
}

#flash_error {
  background-color: var(--sg-msg-error-bg);
  border: 1px solid var(--sg-msg-error-border);
  color: var(--sg-msg-error-text);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-3) var(--sg-space-4);
}

#flash_warning {
  background-color: var(--sg-msg-warning-bg);
  border: 1px solid var(--sg-msg-warning-border);
  color: var(--sg-msg-warning-text);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-3) var(--sg-space-4);
}

/* Error explanation */
.errorExplanation {
  background-color: var(--sg-msg-error-bg);
  border: 1px solid var(--sg-msg-error-border);
  color: var(--sg-msg-error-text);
  border-radius: var(--sg-radius-md);
}

/* Footer */
#footer {
  background-color: var(--sg-bg-white);
  border-top: 1px solid var(--sg-border-default);
  color: var(--sg-text-muted);
}

#footer a {
  color: var(--sg-text-secondary);
}

/* Tabs */
div.tabs {
  border-bottom: 2px solid var(--sg-border-default);
}

div.tabs a {
  color: var(--sg-text-secondary);
  font-weight: var(--sg-font-weight-medium);
}

div.tabs a:hover {
  color: var(--sg-text-primary);
  text-decoration: none;
}

div.tabs li.selected a,
div.tabs a.selected {
  color: var(--sg-color-primary);
  border-bottom-color: var(--sg-color-primary);
  font-weight: var(--sg-font-weight-semibold);
}

/* Thumbnail */
.thumbnail {
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-md);
}

/* Gravatar */
img.gravatar {
  border-radius: var(--sg-radius-full);
}

/* Private */
.private {
  opacity: 0.7;
}
/* ==========================================================================
   Skill Green - Navigation (non-header)
   ==========================================================================
   Sidebar internals, pagination, breadcrumb, context menu.
   Sidebar base styles are in header-layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination a,
.pagination span {
  border-radius: var(--sg-radius-md);
  border: 1px solid var(--sg-border-default);
}

.pagination a:hover {
  border-color: var(--sg-color-primary);
  color: var(--sg-color-primary);
  text-decoration: none;
}

.pagination span.current {
  background-color: var(--sg-color-primary);
  border-color: var(--sg-color-primary);
  color: var(--sg-text-inverse);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
  font-size: var(--sg-font-size-sm);
  color: var(--sg-text-muted);
}

.breadcrumb a {
  color: var(--sg-text-secondary);
}

.breadcrumb a:hover {
  color: var(--sg-color-primary);
}

.breadcrumb .separator {
  color: var(--sg-text-muted);
}

/* --------------------------------------------------------------------------
   Context Menu
   -------------------------------------------------------------------------- */

#context-menu {
  background-color: var(--sg-bg-white);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-md);
}

#context-menu ul li a:hover {
  background-color: var(--sg-bg-hover);
}
/* ==========================================================================
   Skill Green - Buttons
   ==========================================================================
   Visual overrides only (colors, borders, border-radius).
   Layout properties (display, height, width) are kept minimal.
   ========================================================================== */

/* Primary */
input[type="submit"],
.btn-primary {
  background-color: var(--sg-color-primary);
  border-color: var(--sg-color-primary);
  color: var(--sg-text-inverse);
}

input[type="submit"]:hover,
.btn-primary:hover {
  background-color: var(--sg-color-primary-dark);
  border-color: var(--sg-color-primary-dark);
}

input[type="submit"]:active,
.btn-primary:active {
  background-color: var(--sg-color-primary-hover);
}

/* Secondary */
.btn-secondary,
input[type="button"] {
  background-color: var(--sg-bg-white);
  border-color: var(--sg-border-default);
  color: var(--sg-text-primary);
}

.btn-secondary:hover,
input[type="button"]:hover {
  background-color: var(--sg-bg-sidebar);
  border-color: var(--sg-border-hover);
}

/* Ghost */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--sg-text-secondary);
}

.btn-ghost:hover {
  background-color: var(--sg-bg-hover);
  color: var(--sg-text-primary);
}

/* Danger */
.btn-danger {
  background-color: #fff;
  border-color: var(--sg-priority-urgent);
  color: var(--sg-priority-urgent);
}

.btn-danger:hover {
  background-color: var(--sg-priority-urgent);
  border-color: var(--sg-priority-urgent);
  color: var(--sg-text-inverse);
}

/* Link */
.btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--sg-text-link);
}

.btn-link:hover {
  color: var(--sg-text-link-hover);
  text-decoration: underline;
}

/* Focus */
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--sg-shadow-focus);
}

/* Disabled */
input[type="submit"]:disabled,
input[type="button"]:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Login */
#login-form input[type="submit"] {
  background-color: var(--sg-color-primary);
  border-color: var(--sg-color-primary);
  color: var(--sg-text-inverse);
  font-weight: var(--sg-font-weight-semibold);
}

#login-form input[type="submit"]:hover {
  background-color: var(--sg-color-primary-dark);
  border-color: var(--sg-color-primary-dark);
}
/* ==========================================================================
   Skill Green - Forms
   ==========================================================================
   Visual overrides only. Keep all layout properties intact.
   ========================================================================== */

/* Labels */
label {
  font-size: var(--sg-font-size-sm);
  font-weight: var(--sg-font-weight-medium);
  color: var(--sg-text-primary);
}

label.required::after {
  content: " *";
  color: var(--sg-priority-urgent);
}

/* Text inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  font-family: var(--sg-font-family);
  font-size: var(--sg-font-size-base);
  color: var(--sg-text-primary);
  background-color: var(--sg-bg-input);
  border: 1px solid var(--sg-border-input);
  border-radius: var(--sg-radius-md);
  transition: border-color var(--sg-transition-fast), box-shadow var(--sg-transition-fast);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="month"]:hover,
input[type="week"]:hover {
  border-color: var(--sg-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
  outline: none;
  border-color: var(--sg-border-focus);
  box-shadow: var(--sg-shadow-focus);
}

input::placeholder {
  color: var(--sg-text-muted);
}

/* Select */
select {
  font-family: var(--sg-font-family);
  font-size: var(--sg-font-size-base);
  color: var(--sg-text-primary);
  background-color: var(--sg-bg-input);
  border: 1px solid var(--sg-border-input);
  border-radius: var(--sg-radius-md);
  transition: border-color var(--sg-transition-fast), box-shadow var(--sg-transition-fast);
}

select:hover {
  border-color: var(--sg-border-hover);
}

select:focus {
  outline: none;
  border-color: var(--sg-border-focus);
  box-shadow: var(--sg-shadow-focus);
}

/* Textarea */
textarea {
  font-family: var(--sg-font-family);
  font-size: var(--sg-font-size-base);
  color: var(--sg-text-primary);
  background-color: var(--sg-bg-input);
  border: 1px solid var(--sg-border-input);
  border-radius: var(--sg-radius-md);
  transition: border-color var(--sg-transition-fast), box-shadow var(--sg-transition-fast);
  line-height: var(--sg-line-height-base);
}

textarea:hover {
  border-color: var(--sg-border-hover);
}

textarea:focus {
  outline: none;
  border-color: var(--sg-border-focus);
  box-shadow: var(--sg-shadow-focus);
}

textarea::placeholder {
  color: var(--sg-text-muted);
}

/* Checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sg-border-input);
  border-radius: var(--sg-radius-sm);
  background-color: var(--sg-bg-white);
  cursor: pointer;
  transition: all var(--sg-transition-fast);
  vertical-align: middle;
}

input[type="checkbox"]:hover {
  border-color: var(--sg-color-primary);
}

input[type="checkbox"]:checked {
  background-color: var(--sg-color-primary);
  border-color: var(--sg-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--sg-shadow-focus);
}

/* Radio */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sg-border-input);
  border-radius: 50%;
  background-color: var(--sg-bg-white);
  cursor: pointer;
  transition: all var(--sg-transition-fast);
  vertical-align: middle;
  position: relative;
}

input[type="radio"]:hover {
  border-color: var(--sg-color-primary);
}

input[type="radio"]:checked {
  border-color: var(--sg-color-primary);
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sg-color-primary);
}

input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--sg-shadow-focus);
}

/* Error */
.error {
  color: var(--sg-priority-urgent);
  font-size: var(--sg-font-size-sm);
}

.errorExplanation {
  background-color: var(--sg-msg-error-bg);
  border: 1px solid var(--sg-msg-error-border);
  color: var(--sg-msg-error-text);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-4);
  font-size: var(--sg-font-size-sm);
}

.errorExplanation h2 {
  font-size: var(--sg-font-size-base);
  font-weight: var(--sg-font-weight-semibold);
  margin-bottom: var(--sg-space-2);
}

/* Login form */
#login-form {
  background-color: var(--sg-bg-white);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-sm);
}

#login-form h2 {
  text-align: center;
}

/* Autocomplete */
.ui-autocomplete {
  background-color: var(--sg-bg-white);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-md);
}

.ui-menu-item-wrapper {
  font-size: var(--sg-font-size-sm);
}

.ui-state-active {
  background-color: var(--sg-bg-hover) !important;
  color: var(--sg-text-primary) !important;
}
/* ==========================================================================
   Skill Green - Tables
   ==========================================================================
   Visual overrides only. Keep all layout properties intact.
   ========================================================================== */

/* Header */
table thead th {
  background-color: #FAFAFA;
  font-weight: var(--sg-font-weight-semibold);
  font-size: var(--sg-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sg-text-secondary);
  border-bottom: 2px solid var(--sg-border-default);
}

/* Sortable columns */
table thead th a {
  color: var(--sg-text-secondary);
  font-weight: var(--sg-font-weight-semibold);
  font-size: var(--sg-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table thead th a:hover {
  color: var(--sg-color-primary);
  text-decoration: none;
}

/* Body rows */
table tbody tr:nth-child(even) {
  background-color: #FAFAFA;
}

table tbody tr:hover {
  background-color: var(--sg-bg-hover);
}

table tbody td {
  border-bottom: 1px solid var(--sg-border-light);
  color: var(--sg-text-primary);
  font-size: var(--sg-font-size-base);
}

/* Footer */
table tfoot td {
  border-top: 2px solid var(--sg-border-default);
  font-weight: var(--sg-font-weight-medium);
  color: var(--sg-text-secondary);
  font-size: var(--sg-font-size-sm);
  background-color: #FAFAFA;
}

/* Issue list */
tr.issue td.id {
  color: var(--sg-text-secondary);
  font-size: var(--sg-font-size-sm);
}

tr.issue td.subject a {
  font-weight: var(--sg-font-weight-medium);
  color: var(--sg-text-primary);
}

tr.issue td.subject a:hover {
  color: var(--sg-color-primary);
}

tr.issue td.assigned_to,
tr.issue td.updated_on {
  font-size: var(--sg-font-size-sm);
  color: var(--sg-text-secondary);
}

/* Project list */
tr.project td.name a {
  color: var(--sg-text-primary);
}

tr.project td.name a:hover {
  color: var(--sg-color-primary);
}

/* Time entries */
td.hours {
  font-weight: var(--sg-font-weight-semibold);
  font-family: var(--sg-font-family-mono);
  font-size: var(--sg-font-size-sm);
  color: var(--sg-color-primary);
}

/* Wiki table */
.wiki table {
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-md);
}

.wiki table thead th {
  background-color: #FAFAFA;
}

.wiki table td,
.wiki table th {
  border: 1px solid var(--sg-border-light);
}

/* Actions column */
td.buttons a {
  font-size: var(--sg-font-size-sm);
  color: var(--sg-text-secondary);
}

td.buttons a:hover {
  color: var(--sg-color-primary);
  text-decoration: none;
}

/* Summary/total rows */
tr.summary td {
  font-weight: var(--sg-font-weight-semibold);
  background-color: #FAFAFA;
}

tr.total td {
  font-weight: var(--sg-font-weight-bold);
  border-top: 2px solid var(--sg-border-default);
  background-color: #FAFAFA;
}

/* Query form */
#query_form table td {
  border: none;
}

/* List table */
table.list th {
  background-color: #FAFAFA;
}
/* ==========================================================================
   Skill Green - Badges & Status Indicators
   ==========================================================================
   Status badges, priority indicators, role badges, and all
   visual status representations. Modern pill-shaped design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Badge
   -------------------------------------------------------------------------- */

.badge,
span.badge,
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  line-height: 1.4;
  border-radius: var(--sg-radius-full);
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Status Badges
   -------------------------------------------------------------------------- */

/* New / Open */
.badge-new,
.badge-status-new,
.status-new {
  background-color: var(--sg-status-new-bg);
  color: var(--sg-status-new-text);
}

/* In Progress */
.badge-in-progress,
.badge-status-in-progress,
.status-in-progress {
  background-color: var(--sg-status-in-progress-bg);
  color: var(--sg-status-in-progress-text);
}

/* Pending / Feedback */
.badge-pending,
.badge-status-pending,
.status-pending,
.badge-feedback,
.status-feedback {
  background-color: var(--sg-status-pending-bg);
  color: var(--sg-status-pending-text);
}

/* Resolved */
.badge-resolved,
.badge-status-resolved,
.status-resolved {
  background-color: #E8F5E9;
  color: #2E7D32;
}

/* Closed */
.badge-closed,
.badge-status-closed,
.status-closed {
  background-color: var(--sg-status-closed-bg);
  color: var(--sg-status-closed-text);
}

/* Blocked / Rejected */
.badge-blocked,
.badge-status-blocked,
.status-blocked,
.badge-rejected,
.status-rejected {
  background-color: var(--sg-status-blocked-bg);
  color: var(--sg-status-blocked-text);
}

/* Assigned */
.badge-assigned,
.status-assigned {
  background-color: #E8EAF6;
  color: #283593;
}

/* Tested */
.badge-tested,
.status-tested {
  background-color: #F3E5F5;
  color: #6A1B9A;
}

/* Verified */
.badge-verified,
.status-verified {
  background-color: #E0F2F1;
  color: #00695C;
}

/* Confirmed */
.badge-confirmed,
.status-confirmed {
  background-color: #FFF8E1;
  color: #F57F17;
}

/* Ready */
.badge-ready,
.status-ready {
  background-color: #E0F7FA;
  color: #00838F;
}

/* ---------------------------------------------------------------------------
   Priority Badges
   -------------------------------------------------------------------------- */

.priority-lowest {
  color: var(--sg-priority-low);
}

.priority-low {
  color: var(--sg-priority-low);
}

.priority-normal {
  color: var(--sg-color-primary);
}

.priority-high {
  color: var(--sg-priority-high);
}

.priority-urgent {
  color: var(--sg-priority-urgent);
  font-weight: var(--sg-font-weight-semibold);
}

.priority-critical {
  color: var(--sg-priority-urgent);
  font-weight: var(--sg-font-weight-bold);
}

/* Priority with background */
.badge-priority-low {
  background-color: #ECEFF1;
  color: var(--sg-priority-low);
}

.badge-priority-normal {
  background-color: var(--sg-status-new-bg);
  color: var(--sg-color-primary);
}

.badge-priority-high {
  background-color: var(--sg-status-pending-bg);
  color: var(--sg-priority-high);
}

.badge-priority-urgent {
  background-color: var(--sg-status-blocked-bg);
  color: var(--sg-priority-urgent);
}

/* --------------------------------------------------------------------------
   Tracker Badges
   -------------------------------------------------------------------------- */

.tracker-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  border-radius: var(--sg-radius-sm);
  background-color: var(--sg-bg-sidebar);
  color: var(--sg-text-secondary);
  border: 1px solid var(--sg-border-light);
}

/* --------------------------------------------------------------------------
   Role Badges
   -------------------------------------------------------------------------- */

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  border-radius: var(--sg-radius-sm);
}

.role-admin {
  background-color: var(--sg-status-blocked-bg);
  color: var(--sg-status-blocked-text);
}

.role-manager {
  background-color: var(--sg-status-pending-bg);
  color: var(--sg-status-pending-text);
}

.role-developer {
  background-color: var(--sg-status-in-progress-bg);
  color: var(--sg-status-in-progress-text);
}

.role-reporter {
  background-color: var(--sg-status-new-bg);
  color: var(--sg-status-new-text);
}

.role-user {
  background-color: var(--sg-bg-sidebar);
  color: var(--sg-text-secondary);
}

/* --------------------------------------------------------------------------
   Activity / Type Badges
   -------------------------------------------------------------------------- */

.activity-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  border-radius: var(--sg-radius-sm);
}

/* --------------------------------------------------------------------------
   Tag Badges
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  background-color: var(--sg-bg-hover);
  color: var(--sg-text-secondary);
  border: 1px solid var(--sg-border-light);
  border-radius: var(--sg-radius-sm);
}

.tag:hover {
  background-color: var(--sg-bg-sidebar);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Count / Number Badges
   -------------------------------------------------------------------------- */

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sg-space-1);
  font-size: 11px;
  font-weight: var(--sg-font-weight-semibold);
  line-height: 1;
  background-color: var(--sg-bg-sidebar);
  color: var(--sg-text-secondary);
  border-radius: var(--sg-radius-full);
  border: 1px solid var(--sg-border-light);
}

/* Primary count */
.count-primary {
  background-color: var(--sg-color-primary);
  color: var(--sg-text-inverse);
  border-color: var(--sg-color-primary);
}

/* --------------------------------------------------------------------------
   Notification Badge
   -------------------------------------------------------------------------- */

.notification-badge {
  position: relative;
}

.notification-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--sg-priority-urgent);
  border-radius: 50%;
  border: 2px solid var(--sg-bg-white);
}

/* --------------------------------------------------------------------------
   Project Status
   -------------------------------------------------------------------------- */

.project-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  font-size: var(--sg-font-size-sm);
  font-weight: var(--sg-font-weight-medium);
}

.project-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sg-color-primary);
}

.project-status.archived::before {
  background-color: var(--sg-text-muted);
}

/* --------------------------------------------------------------------------
   Progress Bar
   -------------------------------------------------------------------------- */

.progress-bar {
  display: flex;
  height: 8px;
  background-color: var(--sg-bg-sidebar);
  border-radius: var(--sg-radius-full);
  overflow: hidden;
  border: 1px solid var(--sg-border-light);
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--sg-color-primary);
  border-radius: var(--sg-radius-full);
  transition: width var(--sg-transition-slow);
}

.progress-bar-fill.warning {
  background-color: var(--sg-priority-high);
}

.progress-bar-fill.danger {
  background-color: var(--sg-priority-urgent);
}

.progress-text {
  font-size: var(--sg-font-size-xs);
  color: var(--sg-text-muted);
  margin-top: var(--sg-space-1);
}

/* --------------------------------------------------------------------------
   Checklist / Todo Badges
   -------------------------------------------------------------------------- */

.todo-count {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  font-size: var(--sg-font-size-sm);
  color: var(--sg-text-secondary);
}

.todo-count .done {
  color: var(--sg-color-primary);
  font-weight: var(--sg-font-weight-semibold);
}

.todo-count .total {
  color: var(--sg-text-muted);
}

/* --------------------------------------------------------------------------
   Time Tracking Badge
   -------------------------------------------------------------------------- */

.time-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  font-family: var(--sg-font-family-mono);
  background-color: var(--sg-bg-hover);
  border-radius: var(--sg-radius-sm);
  color: var(--sg-text-secondary);
}

/* --------------------------------------------------------------------------
   Version Badge
   -------------------------------------------------------------------------- */

.version-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  background-color: var(--sg-status-in-progress-bg);
  color: var(--sg-status-in-progress-text);
  border-radius: var(--sg-radius-sm);
}

.version-badge.completed {
  background-color: var(--sg-status-new-bg);
  color: var(--sg-status-new-text);
}

/* --------------------------------------------------------------------------
   Custom Field Badges
   -------------------------------------------------------------------------- */

.cf-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sg-space-2);
  font-size: var(--sg-font-size-xs);
  font-weight: var(--sg-font-weight-medium);
  background-color: var(--sg-bg-hover);
  border: 1px solid var(--sg-border-light);
  border-radius: var(--sg-radius-sm);
  color: var(--sg-text-secondary);
}
/* ==========================================================================
   Skill Green - Cards
   ==========================================================================
   Visual overrides only. Keep all layout properties intact.
   ========================================================================== */

/* Base card */
.card,
.box {
  background-color: var(--sg-bg-white);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-xs);
  transition: box-shadow var(--sg-transition-fast);
}

.card:hover,
.box:hover {
  box-shadow: var(--sg-shadow-sm);
}

/* Card header */
.card-header {
  padding-bottom: var(--sg-space-4);
  margin-bottom: var(--sg-space-4);
  border-bottom: 1px solid var(--sg-border-light);
}

.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: var(--sg-font-size-lg);
  font-weight: var(--sg-font-weight-semibold);
  color: var(--sg-text-primary);
}

/* Card footer */
.card-footer {
  padding-top: var(--sg-space-4);
  margin-top: var(--sg-space-4);
  border-top: 1px solid var(--sg-border-light);
}

/* Info card */
.info-card {
  background-color: var(--sg-msg-info-bg);
  border: 1px solid var(--sg-msg-info-border);
  border-radius: var(--sg-radius-md);
}

.info-card p {
  color: var(--sg-msg-info-text);
}

/* Warning card */
.warning-card {
  background-color: var(--sg-msg-warning-bg);
  border: 1px solid var(--sg-msg-warning-border);
  border-radius: var(--sg-radius-md);
}

.warning-card p {
  color: var(--sg-msg-warning-text);
}

/* Error card */
.error-card {
  background-color: var(--sg-msg-error-bg);
  border: 1px solid var(--sg-msg-error-border);
  border-radius: var(--sg-radius-md);
}

.error-card p {
  color: var(--sg-msg-error-text);
}

/* Success card */
.success-card {
  background-color: var(--sg-msg-success-bg);
  border: 1px solid var(--sg-msg-success-border);
  border-radius: var(--sg-radius-md);
}

.success-card p {
  color: var(--sg-msg-success-text);
}

/* Attachment */
.attachment-card {
  background-color: var(--sg-bg-sidebar);
  border: 1px solid var(--sg-border-light);
  border-radius: var(--sg-radius-md);
}

.attachment-card:hover {
  background-color: var(--sg-bg-hover);
  border-color: var(--sg-border-hover);
}

.attachment-card .attachment-icon {
  background-color: var(--sg-bg-white);
  border-radius: var(--sg-radius-md);
}

.attachment-card .attachment-name {
  font-weight: var(--sg-font-weight-medium);
  color: var(--sg-text-primary);
}

.attachment-card .attachment-size {
  color: var(--sg-text-muted);
}

/* Member */
.member-card .member-name {
  font-weight: var(--sg-font-weight-medium);
  color: var(--sg-text-primary);
}

.member-card .member-role {
  color: var(--sg-text-muted);
}

/* Toast */
.toast {
  background-color: var(--sg-bg-white);
  border: 1px solid var(--sg-border-default);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-lg);
}

.toast.toast-success {
  border-left: 4px solid var(--sg-msg-success-border);
}

.toast.toast-error {
  border-left: 4px solid var(--sg-msg-error-border);
}

.toast.toast-warning {
  border-left: 4px solid var(--sg-msg-warning-border);
}

.toast.toast-info {
  border-left: 4px solid var(--sg-msg-info-border);
}

/* Settings */
.settings .box {
  border-radius: var(--sg-radius-lg);
}

.settings .box h3 {
  font-size: var(--sg-font-size-lg);
  font-weight: var(--sg-font-weight-semibold);
  border-bottom: 1px solid var(--sg-border-light);
  padding-bottom: var(--sg-space-3);
  margin-bottom: var(--sg-space-4);
}

/* Activity item */
.activity-card .activity-icon {
  background-color: var(--sg-bg-hover);
  border-radius: var(--sg-radius-full);
  color: var(--sg-text-secondary);
}

.activity-card .activity-text {
  color: var(--sg-text-primary);
}

.activity-card .activity-timestamp {
  color: var(--sg-text-muted);
}

/* Comment */
.comment-card .comment-author {
  font-weight: var(--sg-font-weight-semibold);
  color: var(--sg-text-primary);
}

.comment-card .comment-date {
  color: var(--sg-text-muted);
}

.comment-card .comment-body {
  color: var(--sg-text-primary);
}

/* Version */
.version-badge {
  background-color: var(--sg-status-in-progress-bg);
  color: var(--sg-status-in-progress-text);
  border-radius: var(--sg-radius-sm);
}

.version-badge.completed {
  background-color: var(--sg-status-new-bg);
  color: var(--sg-status-new-text);
}
/* ========================================================================
   Flyout Menu - Desktop: hidden
   ======================================================================== */
.mobile-toggle-button,
.flyout-menu {
  display: none;
}

/* ========================================================================
   Tabs Buttons - override blue to match theme
   ======================================================================== */
div.tabs-buttons {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

button.tab-left, button.tab-right {
  background-color: var(--sg-bg-sidebar) !important;
  border-color: var(--sg-border-default) !important;
  color: var(--sg-text-secondary) !important;
}

button.tab-left:hover, button.tab-right:hover {
  background-color: var(--sg-bg-hover) !important;
  border-color: var(--sg-border-hover) !important;
}

/* Plus/add button in tabs */
.tabs-buttons a,
.tabs-buttons button:not(.tab-left):not(.tab-right) {
  background-color: var(--sg-bg-sidebar) !important;
  border-color: var(--sg-border-default) !important;
  color: var(--sg-text-secondary) !important;
}

.tabs-buttons a:hover,
.tabs-buttons button:not(.tab-left):not(.tab-right):hover {
  background-color: var(--sg-bg-hover) !important;
  border-color: var(--sg-border-hover) !important;
  color: var(--sg-text-primary) !important;
}

/* New object link in menu */
#main-menu li a.new-object {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

#main-menu li a.new-object:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* ========================================================================
   Override ALL Redmine blue colors to match Skill Green theme
   ======================================================================== */

/* Links in content - change blue to green */
#content a {
  color: var(--sg-text-link) !important;
}

#content a:hover {
  color: var(--sg-text-link-hover) !important;
}

/* Contextual dropdown items hover */
.contextual .drdn-items>a:hover {
  color: var(--sg-color-primary) !important;
  border-color: var(--sg-border-default) !important;
  background-color: var(--sg-bg-hover) !important;
}

/* Project jump dropdown hover */
#project-jump .drdn-items>a:hover {
  background-color: var(--sg-color-primary) !important;
  color: #fff !important;
}

/* Wiki links - red "new" links */
div.wiki a.new {
  color: var(--sg-priority-urgent) !important;
}

/* Any remaining blue links */
a[href*="issues/new"],
a[href*="new_issue"],
.icon-add,
.icon-new {
  color: var(--sg-color-primary) !important;
}

/* Submit buttons - green primary */
input[type="submit"],
button[type="submit"] {
  background-color: var(--sg-color-primary) !important;
  border-color: var(--sg-color-primary-dark) !important;
  color: #fff !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--sg-color-primary-dark) !important;
}

/* Tab active state */
div.tabs li.selected a,
div.tabs a.selected {
  color: var(--sg-color-primary) !important;
  border-bottom-color: var(--sg-color-primary) !important;
}

/* Filter apply/clear icons */
.icon-checked,
.icon-reload {
  color: var(--sg-color-primary) !important;
}

/* Actions dropdown hover */
.drdn-items>a:hover {
  color: var(--sg-color-primary) !important;
  background-color: var(--sg-bg-hover) !important;
  border-color: var(--sg-border-default) !important;
  border-radius: var(--sg-radius-sm) !important;
}