/* Green Labs — GEB Service Log (geb-service) · github.com/ali-raiya/geb-service */
/* Tab navigation + row transition widgets — styles carried from the
   predecessor ERP's geb.css. */

#geb-tabs {
  background: var(--body-bg);
  border-bottom: 1px solid var(--hairline-color);
  padding: 0 40px;
}
#geb-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#geb-tabs .tab-row-main a {
  display: block;
  padding: 12px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--body-quiet-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
#geb-tabs .tab-row-main a:hover { color: var(--link-fg); }
#geb-tabs .tab-row-main a.active {
  color: var(--link-fg);
  border-bottom-color: var(--primary);
}
#geb-tabs .tab-row-sub {
  padding: 8px 0 10px;
  border-top: 1px solid var(--hairline-color);
  gap: 2px;
}
#geb-tabs .tab-row-sub a {
  display: block;
  padding: 5px 12px;
  font-size: 0.8125rem;
  color: var(--body-quiet-color);
  text-decoration: none;
  border-radius: 4px;
}
#geb-tabs .tab-row-sub a:hover {
  background: var(--darkened-bg);
  color: var(--link-fg);
}
#geb-tabs .tab-row-sub a.active {
  background: var(--selected-bg);
  color: var(--link-fg);
  font-weight: 600;
}
@media (max-width: 767px) {
  #geb-tabs { padding: 0 15px; }
}

/* Status is the select itself: its current value is the row's status, and
   the other options are the transitions legal from it. A row with nowhere
   to go gets a disabled select, so the column reads the same either way. */
.geb-transition, .geb-transition-done { display: flex; gap: 6px; align-items: center; }
.geb-transition-select {
  padding: 4px 6px;
  font-size: 0.8125rem;
  max-width: 190px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--body-bg);
  color: var(--body-fg);
}
.geb-transition-go {
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: var(--button-bg);
  color: var(--button-fg);
}
.geb-transition-go:hover { background: var(--button-hover-bg); }
.geb-transition-select:disabled {
  opacity: 1;
  color: var(--body-quiet-color);
  background: var(--darkened-bg);
  cursor: default;
}

/* The Change button appears only once the select differs from the current
   status. */
.geb-transition-go { display: none; }
.geb-transition-go.geb-visible { display: inline-block; }

.geb-action-btn {
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: var(--button-bg);
  color: var(--button-fg);
}
.geb-action-btn:hover { background: var(--button-hover-bg); }

/* ─────────────────────────────────────────────────────────────────
   Green Labs green, everywhere Django would put steel blue.

   Every accent in the admin resolves through these variables, so
   overriding the variables recolors links, buttons, headers,
   breadcrumbs, selected rows, object tools and the calendar widget
   without touching a single component rule. Django's own structure is
   mirrored exactly — :root/light, auto-inside-a-dark-media-query, and
   explicit dark — so the theme toggle keeps working in both directions.
   ───────────────────────────────────────────────────────────────── */

:root,
html[data-theme="light"] {
  --gl-green: #01A049;
  --gl-green-dark: #017537;
  --gl-green-darker: #015228;
  --gl-green-tint: #e4f6ec;

  --primary: var(--gl-green);
  --secondary: var(--gl-green-dark);
  --accent: var(--gl-green-tint);
  --primary-fg: #fff;

  --header-bg: var(--gl-green-dark);
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-link-color: #fff;

  --breadcrumbs-bg: var(--gl-green);
  --breadcrumbs-fg: #eafaf1;
  --breadcrumbs-link-fg: #fff;

  --link-fg: var(--gl-green-dark);
  --link-hover-color: var(--gl-green-darker);
  --link-selected-fg: var(--gl-green-darker);

  --button-bg: var(--gl-green);
  --button-hover-bg: var(--gl-green-dark);
  --default-button-bg: var(--gl-green-dark);
  --default-button-hover-bg: var(--gl-green-darker);

  --object-tools-bg: var(--gl-green-dark);
  --object-tools-hover-bg: var(--gl-green-darker);

  --selected-bg: var(--gl-green-tint);
  --selected-row: #d5f0e0;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --gl-green: #01A049;
    --gl-green-dark: #017537;
    --gl-green-tint: #16301f;

    --primary: #128a45;
    --secondary: #01A049;
    --accent: #35c877;

    --header-bg: #0d2f1b;
    --breadcrumbs-bg: #123c23;
    --breadcrumbs-fg: #bfe8cf;
    --breadcrumbs-link-fg: #eafaf1;

    --link-fg: #35c877;
    --link-hover-color: #5fd992;
    --link-selected-fg: #5fd992;

    --button-bg: #01A049;
    --button-hover-bg: #02b854;
    --default-button-bg: #017537;
    --default-button-hover-bg: #01A049;

    --object-tools-bg: #017537;
    --object-tools-hover-bg: #01A049;

    --selected-bg: var(--gl-green-tint);
    --selected-row: #1c3d27;
  }
}

html[data-theme="dark"] {
  --gl-green: #01A049;
  --gl-green-dark: #017537;
  --gl-green-tint: #16301f;

  --primary: #128a45;
  --secondary: #01A049;
  --accent: #35c877;

  --header-bg: #0d2f1b;
  --breadcrumbs-bg: #123c23;
  --breadcrumbs-fg: #bfe8cf;
  --breadcrumbs-link-fg: #eafaf1;

  --link-fg: #35c877;
  --link-hover-color: #5fd992;
  --link-selected-fg: #5fd992;

  --button-bg: #01A049;
  --button-hover-bg: #02b854;
  --default-button-bg: #017537;
  --default-button-hover-bg: #01A049;

  --object-tools-bg: #017537;
  --object-tools-hover-bg: #01A049;

  --selected-bg: var(--gl-green-tint);
  --selected-row: #1c3d27;
}

/* ── Header: who you are, then one menu ───────────────────────────── */
.geb-usertools { display: flex; align-items: center; gap: 10px; }
.geb-whoami { font-weight: 600; }
.geb-super {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 10px;
  background: rgba(255, 255, 255, .22); color: inherit;
}
.geb-menu { position: relative; }
.geb-menu > summary {
  cursor: pointer; list-style: none; padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px;
}
.geb-menu > summary::-webkit-details-marker { display: none; }
.geb-menu > summary::after { content: " ▾"; }
.geb-menu[open] > summary { background: rgba(255, 255, 255, .15); }
.geb-menu-items {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 100;
  min-width: 12rem; padding: 4px 0; text-align: left;
  background: var(--body-bg); color: var(--body-fg);
  border: 1px solid var(--hairline-color); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
/* #user-tools a is an ID selector and beats a class one, so the menu's
   links inherited the header's white and vanished on a white panel. */
#user-tools .geb-menu-items a,
#user-tools .geb-menu-items button {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px; font-size: .8rem; background: none; border: 0;
  color: var(--body-fg); cursor: pointer; text-decoration: none;
}
#user-tools .geb-menu-items a:hover,
#user-tools .geb-menu-items button:hover {
  background: var(--selected-bg); color: var(--link-fg);
}