/* Safaricom DevHub Theme - World Class Cinematic Dark UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Force dark theme globally overriding any user preference or light mode OS */
html[data-theme],
html,
:root,
body {
  /* SAFAICOM GREEN IDENTITY */
  --saf-green: #00A651;
  --saf-red: #ED1C24;
  --saf-green-light: #00d165;
  --saf-gradient: linear-gradient(135deg, var(--saf-green), var(--saf-green-light));

  --color-primary: var(--saf-green) !important;
  --color-primary-light-1: #00b356 !important;
  --color-primary-light-2: #00c25e !important;
  --color-primary-light-3: var(--saf-green-light) !important;
  --color-primary-light-4: #00e06d !important;
  --color-primary-light-5: #00ff7b !important;
  --color-primary-light-6: #1aff88 !important;
  --color-primary-dark-1: #00994a !important;
  --color-primary-dark-2: #008a43 !important;
  --color-primary-dark-3: #007c3c !important;
  --color-primary-dark-4: #006e35 !important;

  /* GLOBAL FONT COLORS */
  --color-text-dark: #ffffff !important;
  --color-text: #e2e8f0 !important;
  --color-text-light-1: #cbd5e1 !important;
  --color-text-light-2: #94a3b8 !important;
  --color-text-light-3: #64748b !important;
  --color-text-placeholders: #475569 !important;

  /* LINKS */
  --color-link: var(--saf-green) !important;
  --color-link-hover: #00d165 !important;

  /* STRUCTURAL BACKGROUNDS */
  --bg-base: #06090e;
  --bg-surface: #10151c;
  --bg-surface-elevated: #161d27;
  --bg-navbar: rgba(6, 9, 14, 0.85);

  --color-body: var(--bg-base) !important;
  --color-box-header: var(--bg-surface) !important;
  --color-box-body: var(--bg-surface-elevated) !important;
  --color-secondary-bg: var(--bg-surface) !important;

  /* BORDERS */
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* CARDS & RADIUS */
  --border-radius: 8px;
  --border-radius-large: 12px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html[data-theme] body,
body {
  background-color: var(--bg-base) !important;
  color: var(--color-text) !important;
}

/* ========================================= */
/* GLASSMORPHIC TOP NAVBAR & Z-INDEX FIX     */
/* ========================================= */
.ui.menu.navbar {
  background: var(--bg-navbar) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle) !important;
  position: relative;
  z-index: 9999 !important;
}

.ui.menu.navbar .item {
  color: var(--color-text-light-1) !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

.ui.menu.navbar .item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
}

/* Fix Dropdown Overlaps */
.ui.dropdown .menu {
  z-index: 10000 !important;
  background-color: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
  border-radius: var(--border-radius) !important;
}

.ui.dropdown .menu>.item {
  color: var(--color-text) !important;
}

.ui.dropdown .menu>.item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
}

/* ========================================= */
/* BEAUTIFUL BUTTONS (GLOW AND HOVER)        */
/* ========================================= */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--saf-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 4px 14px 0 rgba(0, 166, 81, 0.25) !important;
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgba(0, 166, 81, 0.4) !important;
  background: linear-gradient(135deg, #00b356, #00e06d) !important;
}

.ui.basic.button {
  color: var(--color-text) !important;
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
}

.ui.basic.button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ========================================= */
/* GITLAB STYLE LAYOUTS (PULLS/ISSUES/REPOS) */
/* ========================================= */

.flex-container-nav .ui.secondary.vertical.menu,
.ui.secondary.vertical.menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--border-radius-large) !important;
  padding: 0.5rem !important;
}

.flex-container-nav .ui.secondary.vertical.menu .item,
.ui.secondary.vertical.menu .item {
  color: var(--color-text-light-1) !important;
  border-radius: var(--border-radius) !important;
  transition: all 0.2s ease;
  margin-bottom: 2px !important;
}

.flex-container-nav .ui.secondary.vertical.menu .active.item,
.ui.secondary.vertical.menu .active.item {
  background: var(--color-primary-alpha-10) !important;
  color: var(--saf-green) !important;
  font-weight: 600 !important;
}

.flex-container-nav .ui.secondary.vertical.menu .item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* List Headers (Dashboards) */
.list-header {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0 !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  align-items: center !important;
}

/* List Items (GitLab Borderless Rows) */
.issue.list,
.repository.list {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-top: none !important;
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large) !important;
  padding: 0 !important;
}

.issue.list .item,
.repository.list .item {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 1.25rem 1.5rem !important;
  background: transparent !important;
  transition: background-color 0.2s ease;
}

.issue.list .item:last-child,
.repository.list .item:last-child {
  border-bottom: none !important;
}

.issue.list .item:hover,
.repository.list .item:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Typography for Lists */
.issue.list .title,
.repository.list .name {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}

/* Milestone Cards */
.milestone-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--border-radius-large) !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
  transition: border-color 0.3s ease;
}

.milestone-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Base Repository UI Boxes */
.ui.segment:not(.attached),
.repository.view,
.box {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--border-radius-large) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Headers and Tab Menus */
.ui.tabular.menu {
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
}

.ui.tabular.menu .item {
  color: var(--color-text-light-2);
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease;
  margin-bottom: -1px;
  padding: 0.75rem 1rem !important;
  white-space: nowrap !important;
}

.ui.tabular.menu .active.item {
  border-bottom-color: var(--saf-green) !important;
  color: #fff !important;
  background: transparent !important;
}

.ui.tabular.menu .item:hover {
  color: #fff;
}

/* ========================================= */
/* CINEMATIC INPUTS                          */
/* ========================================= */
.ui.input>input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form textarea,
.ui.selection.dropdown {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #fff !important;
  border-radius: var(--border-radius) !important;
  transition: all 0.3s ease !important;
}

.ui.input>input:focus,
.ui.form input[type="text"]:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
  border-color: var(--saf-green) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15) !important;
}

/* ========================================= */
/* RESPONSIVE DASHBOARD SIDEBAR              */
/* ========================================= */

.devhub-sidebar {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  padding-right: 1.5rem !important;
}

#dashboard-repo-list {
  width: 100% !important;
}

@media (max-width: 767.98px) {
  .devhub-sidebar {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 1.5rem !important;
  }
}