/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  --brand-teal: #0f766e;
  --brand-teal-dark: #0b4f4a;
  --brand-blue: #0b3b5a;
  --brand-gold: #d7a642;
  --brand-paper: #f8fafc;
  --brand-ink: #102033;
}

body.app-shell {
  color: var(--brand-ink);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), transparent 38%),
    linear-gradient(315deg, rgba(215, 166, 66, 0.08), transparent 28%),
    #f6f8fb;
}

.app-sidebar {
  background:
    linear-gradient(180deg, #0b3b5a 0%, #0b4f4a 58%, #08342f 100%);
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.12);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  color: rgba(226, 232, 240, 0.86);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.app-nav-link:hover,
.app-nav-link.is-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.app-nav-link.is-active {
  box-shadow: inset 3px 0 0 var(--brand-gold);
}

.app-topbar {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  backdrop-filter: blur(14px);
}

.bg-gold {
  background-color: var(--brand-gold);
}

main .bg-white {
  background-color: rgba(255, 255, 255, 0.96);
}

main .rounded-xl {
  border-radius: 0.625rem;
}

main .border-slate-200 {
  border-color: rgba(148, 163, 184, 0.32);
}

a.bg-blue-700,
button.bg-blue-700,
input[type="submit"].bg-blue-700 {
  background-color: var(--brand-teal);
}

a.bg-blue-700:hover,
button.bg-blue-700:hover,
input[type="submit"].bg-blue-700:hover {
  background-color: var(--brand-teal-dark);
}