/**
 * @file
 * tabs.css — Local tasks tabs, design modern.
 *
 * Paleta:
 *   Navy   #0a4f8c   (header gradient start)
 *   Blue   #1569b0   (header gradient end)
 *   Cyan   #00b4d8   (accent activ)
 *
 * Design:
 *   Primary   → underline-indicator (GitHub / Linear style)
 *   Secondary → pill / chip cu gradient cyan activ
 */

/* ================================================================
   Wrapper block
   ================================================================ */
#block-mecat-local-tasks,
.block-local-tasks-block {

  padding: 0;
  width: 100%;
}

/* ================================================================
   nav.tabs — container + CSS custom properties
   ================================================================ */
nav.tabs {
  --t-navy:     #0a4f8c;
  --t-blue:     #1569b0;
  --t-cyan:     #00b4d8;
  --t-cyan-dk:  #0096b7;
  --t-border:   #d8e5f2;
  --t-muted:    #5a7a9a;
  --t-hover-bg: rgba(10, 79, 140, .05);
  width: 100%;
  margin: 0;
  padding: 0;
}

nav.tabs > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* ================================================================
   PRIMARY TABS — underline indicator
   ================================================================ */
ul.tabs.primary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--t-border);
  box-sizing: border-box;
}

ul.tabs.primary li {
  margin: 0;
  padding: 0;
}

ul.tabs.primary li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px 10px;
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
  color: var(--t-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

ul.tabs.primary li a:hover,
ul.tabs.primary li a:focus {
  color: var(--t-navy);
  background: var(--t-hover-bg);
  border-radius: 6px 6px 0 0;
  border-bottom-color: var(--t-border);
  outline: none;
}

/* Activ */
ul.tabs.primary li.is-active a,
ul.tabs.primary li a.is-active,
ul.tabs.primary li a[aria-current="page"] {
  color: var(--t-navy);
  font-weight: 700;
  border-bottom-color: var(--t-cyan);
  background: transparent;
  cursor: default;
}

ul.tabs.primary li.is-active a:hover,
ul.tabs.primary li a.is-active:hover {
  background: var(--t-hover-bg);
  border-radius: 6px 6px 0 0;
}

/* Delete — danger */
ul.tabs.primary li a[href*="delete"] {
  color: #c0392b;
}
ul.tabs.primary li a[href*="delete"]:hover {
  color: #a52a1f;
  background: rgba(192, 57, 43, .06);
  border-radius: 6px 6px 0 0;
  border-bottom-color: #c0392b;
}

/* ================================================================
   SECONDARY TABS — pill / chip style
   ================================================================ */
ul.tabs.secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--t-border);
  box-sizing: border-box;
}

ul.tabs.secondary li {
  margin: 0;
  padding: 0;
}

ul.tabs.secondary li a {
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--t-navy);
  background: transparent;
  border: 1.5px solid var(--t-border);
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

ul.tabs.secondary li a:hover,
ul.tabs.secondary li a:focus {
  color: var(--t-blue);
  background: rgba(10, 79, 140, .06);
  border-color: var(--t-blue);
  outline: none;
}

/* Activ */
ul.tabs.secondary li.is-active a,
ul.tabs.secondary li a.is-active,
ul.tabs.secondary li a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, var(--t-cyan) 0%, var(--t-cyan-dk) 100%);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 180, 216, .38);
  cursor: default;
}

ul.tabs.secondary li.is-active a:hover,
ul.tabs.secondary li a.is-active:hover {
  background: linear-gradient(135deg, var(--t-cyan-dk) 0%, #007a93 100%);
  box-shadow: 0 3px 14px rgba(0, 180, 216, .44);
}

/* ================================================================
   RESPONSIVE — tabletă (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {
  ul.tabs.primary li a {
    padding: 10px 15px 9px;
    font-size: .82rem;
  }
  ul.tabs.secondary li a {
    padding: 4px 13px;
    font-size: .76rem;
  }
}

/* ================================================================
   RESPONSIVE — mobil (≤ 480px) — scroll orizontal
   ================================================================ */
@media (max-width: 480px) {
  nav.tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--t-cyan) #e8eef5;
  }
  nav.tabs::-webkit-scrollbar        { height: 3px; }
  nav.tabs::-webkit-scrollbar-track  { background: #e8eef5; }
  nav.tabs::-webkit-scrollbar-thumb  { background: var(--t-cyan); border-radius: 2px; }

  ul.tabs.primary,
  ul.tabs.secondary {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }

  ul.tabs.primary li a {
    padding: 9px 13px 8px;
    font-size: .78rem;
  }
  ul.tabs.secondary li a {
    padding: 4px 12px;
    font-size: .74rem;
  }
}