/*
  Gunmetal look (Jeff, Nov 7): dark graphite, almost black, with a brushed-metal grain on the bars; neutral grays everywhere else;
  green only for actions and good news. Mockup: "B2. Gunmetal" in the look-and-feel artifact. Palette: docs/design/LOOK_AND_FEEL.md.

  On the test site and the real site (since Nov 9). The layouts link this file and add the `look-metal` class to <body>
  (ApplicationHelper#preview_look). Jeff chose this over the navy version (look_navy.css, kept for now) on Nov 7.
*/

/* 1. Neutral grays. Tailwind's slate scale is blue-gray; every slate-* class in the app reads from these variables,
      so swapping them here recolors the whole app at once. */
.look-metal {
  --color-slate-50:  #f6f7f8;
  --color-slate-100: #eceeef;
  --color-slate-200: #dee0e3;
  --color-slate-300: #c6c9cd;
  --color-slate-400: #9a9ea4;
  --color-slate-500: #6b7076;
  --color-slate-600: #565b61;
  --color-slate-700: #3d4146;
  --color-slate-800: #26292d;
  --color-slate-900: #16181b;

  --jas-navy: #1f2124;          /* graphite: header, dark surfaces (the old variable name is kept so every rule that reads it follows) */
  --jas-navy-2: #2b2e32;
  --jas-text: #16181b;
  --jas-page: #f3f4f5;
  --jas-line: #dee0e3;
  --jas-muted: #565b61;
  --jas-metal-text: #ffffff;
  --jas-metal-soft-text: #cdd0d4;

  /* The grain: horizontal streaks (stretched noise), tiled. Light flecks only, so it works on any dark base. */
  --jas-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.87 0 0 0 0 0.9 0.9 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  /* The bars wear a real brushed-metal picture, charcoal gray (Jeff, Nov 8: chose it from three, "A"). It tiles sideways without a seam. */
  --jas-metal: url("/look-metal-charcoal.jpg");
  --jas-metal-size: 1600px 240px;
  /* Buttons on the metal bars are SOLID, a clear step lighter than the bar, with a visible edge (Jeff, Nov 8: not transparent, more distinct). */
  --jas-btn: #50545a;
  --jas-btn-hover: #62666d;
  --jas-btn-edge: #7b8087;
}

/* 2. Metal bars: the top bar and the phone bar. The green rule under/over them stays. */
.look-metal .jas-header,
.look-metal .jas-tabbar {
  background: var(--jas-metal);
  background-size: var(--jas-metal-size);
  background-color: #26282b;
  background-repeat: repeat-x;
}
.look-metal .jas-header { border-bottom-color: var(--jas-bright); box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.18); }
.look-metal .jas-tabbar { border-top-color: var(--jas-bright); }
.look-metal .jas-header__label { color: var(--jas-metal-soft-text); border-left-color: #5a5e64; }
.look-metal .jas-header__user { color: var(--jas-metal-soft-text); }
.look-metal .jas-tabbar a { color: var(--jas-metal-soft-text); }
.look-metal .jas-tabbar--round a { background: var(--jas-btn); color: #fff; box-shadow: inset 0 0 0 1px var(--jas-btn-edge), 0 1px 2px rgba(0,0,0,.55); }
.look-metal .jas-tabbar--round a[aria-current="page"] { background: var(--jas-green); }
/* The microphone (Daily log) is the big green action button; the round-button rule above must not paint over it. */
.look-metal .jas-tabbar--round .jas-tabbar__mic { background: var(--jas-green); border-color: #17181b; box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.22); }

/* The JAPP logo is a brushed-silver picture. It must never be squeezed when the top row is crowded: it keeps its shape and the row makes room. */
.look-metal .jas-header__brand { flex: 0 0 auto; }
.look-metal .jas-header__brand img { flex: none; width: auto; max-width: none; height: 38px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
@media (min-width: 768px) { .look-metal .jas-header__brand img { height: 40px; } }

/* Top row: each area is its own dark pill button with a thin light edge; the one you are in is a raised silver plate with dark words.
   One line each, all the same height (Jeff, Nov 7: the buttons did not look right, "EF Bids" and "My Stuff" were wrapping to two lines). */
.look-metal .jas-header__inner { gap: 12px; }
.look-metal .jas-header__nav { gap: 4px; flex-wrap: nowrap; align-items: center; flex: 0 1 auto; min-width: 0; padding: 3px 0; margin: -3px 0;
  overflow-x: auto; scrollbar-width: none; } /* on a narrow computer window the buttons scroll sideways instead of overlapping the search box */
.look-metal .jas-header__nav::-webkit-scrollbar { display: none; }
.look-metal .jas-header__nav a { box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; height: 36px; padding: 0 10px; font-size: 14px; line-height: 1; border-radius: 9px;
  color: #fff; background: var(--jas-btn); border: 1px solid var(--jas-btn-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.55); }
.look-metal .jas-header__nav a:hover { color: #fff; background: var(--jas-btn-hover); border-color: #a0a5ab; }
.look-metal .jas-header__nav a[aria-current="page"] { color: #16181b; font-weight: 700; border-color: #f4f5f6;
  background: linear-gradient(180deg, #fbfbfc 0%, #dfe1e4 55%, #c9ccd0 100%); box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 #fff; }
.look-metal .jas-header__nav .jas-badge { margin-left: 2px; }
/* The search box (Jeff, Nov 7: "maybe we should move that search bar"). It was squeezing the top row, so it is now a round magnifier button at
   the right end. Tap it and the box opens over the buttons, wide enough to read; tap away and it folds back. Same box, same typeahead list. */
.look-metal .jas-header__inner { position: relative; }
.look-metal .jas-switcher { flex: 0 0 auto; }
.look-metal .jas-switcher input { box-sizing: border-box; width: 36px; height: 36px; padding: 0; border-radius: 9999px; cursor: pointer; color: transparent; caret-color: transparent;
  background: var(--jas-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px var(--jas-btn-edge), 0 1px 2px rgba(0,0,0,.55); transition: none; }
.look-metal .jas-switcher input::placeholder { color: transparent; }
.look-metal .jas-switcher input::-webkit-search-decoration, .look-metal .jas-switcher input::-webkit-search-cancel-button { display: none; }
.look-metal .jas-switcher:hover input { background-color: var(--jas-btn-hover); }
.look-metal .jas-switcher:focus-within { position: absolute; z-index: 50; top: 50%; right: 190px; transform: translateY(-50%); width: min(28rem, 55vw); }
.look-metal .jas-switcher:focus-within input { width: 100%; padding: 0 14px; border-radius: 10px; cursor: text; color: #fff; caret-color: auto; background-image: none; background-color: #0f1012;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 2px var(--jas-bright), 0 8px 24px rgba(0,0,0,.45); }
.look-metal .jas-switcher:focus-within input::placeholder { color: #9a9ea4; }
.look-metal .jas-switcher:focus-within .typeahead-list { left: 0; right: 0; width: auto; }
/* Your name is the My Stuff button: a pill like the others, a silver plate when you are in My Stuff. */
.look-metal .jas-header__user a[aria-current="page"] { color: #16181b; font-weight: 700; border-color: #f4f5f6;
  background: linear-gradient(180deg, #fbfbfc 0%, #dfe1e4 55%, #c9ccd0 100%); box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 #fff; }
/* Phones and small windows: the search is a magnifier in the top corner (next to Help and the language switch) and opens across the whole header. */
@media (max-width: 1023px) {
  .look-metal .jas-switcher--corner { display: block !important; flex: none; }
  .look-metal .jas-switcher--corner:focus-within { position: fixed; z-index: 80; top: 10px; left: 10px; right: 10px; transform: none; width: auto; }
  .look-metal .jas-switcher--corner:focus-within input { height: 44px; font-size: 16px; }
}
.look-metal .jas-header__user a, .look-metal .jas-header__user button { box-sizing: border-box; height: 36px; display: inline-flex; align-items: center; background: var(--jas-btn); border: 1px solid var(--jas-btn-edge); }
.look-metal .jas-header__user a:hover, .look-metal .jas-header__user button:hover { background: var(--jas-btn-hover); }
.look-metal .jas-help-icon { background: var(--jas-btn); box-shadow: 0 0 0 1px var(--jas-btn-edge); }
@media (max-width: 767px) {
  .look-metal .jas-header__nav { flex: 0 0 auto; overflow: visible; padding: 0; margin: 0; } /* on a phone the whole row (buttons, name) scrolls together */
  .look-metal .jas-header__nav a { height: 34px; padding: 0 11px; }
}

/* 3. Table headers that stay put while a table scrolls (budget, bills and others): the same metal, white words.
      Each cell paints its own strip, so the grain is kept light here (no wide sheen). */
.look-metal .sticky-under-header th {
  background: var(--jas-grain),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0, rgba(0,0,0,.2) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px),
    linear-gradient(180deg, #3b3e43 0%, #2b2e32 100%);
  background-size: 400px 120px, auto, auto, auto;
  background-color: #2b2e32;
  color: #fff;
  box-shadow: 0 2px 0 #0e0f11;
  padding-left: .5rem; padding-right: .5rem;
}
.look-metal .sticky-under-header th a { color: #9fe0a8; }

/* 4. Second row: real browser-style TABS. A slightly darker strip, recessed tabs with rounded tops, and the current tab raised, joined to
      the page below it, with a green top edge. */
.look-metal .jas-subnav { background: #e1e3e6; border-bottom: 0; }
.look-metal .jas-subnav__inner { gap: 3px; padding: 4px 12px 0; box-shadow: inset 0 -1px 0 var(--jas-line); }
.look-metal .jas-subnav a { padding: 4px 14px 3px; font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--jas-muted); background: #d0d3d7; border: 1px solid #bfc3c8; border-bottom: 0;
  border-radius: 8px 8px 0 0; border-top: 2px solid transparent; }
.look-metal .jas-subnav a:hover { color: #16181b; background: #dadcdf; }
.look-metal .jas-subnav a[aria-current="page"] { color: #16181b; font-weight: 700; background: var(--jas-page); border-color: var(--jas-line); border-top-color: #2e9b3e; border-bottom: 0; padding-bottom: 4px; }

/* 5. Typeahead and other floating lists: neutral borders. */
.look-metal .typeahead-list { border-color: var(--jas-line); color: #16181b; }
@media (pointer: coarse) { .look-metal .jas-subnav a { padding-top: 7px; padding-bottom: 6px; } .look-metal .jas-subnav a[aria-current="page"] { padding-bottom: 7px; } } /* a finger needs a little more height than a mouse */