/* css/style.css
   Zielony motyw dla projektu MIX Portal
   Wklej/zmień ten plik w katalogu css/ i odśwież stronę.
*/

/* Import fontu */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --green-900: #064e3b; /* ciemna baza */
  --green-800: #0b6b4a;
  --green-700: #0f7c57;
  --green-600: #14986a;
  --green-500: #23c06c; /* primary */
  --green-400: #6ddf9a;
  --green-300: #bff3d3;
  --muted: #6b7280;
  --card-bg: #f7fff9;
  --glass: rgba(255,255,255,0.6);
}

/* Global */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #f1fbf6 0%, #e8f8ee 100%);
  color: #063f2b;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.navbar {
  background: linear-gradient(90deg, var(--green-900), var(--green-700));
  box-shadow: 0 4px 18px rgba(10, 30, 20, 0.08);
}
.navbar .navbar-brand { font-weight:700; color: #fff !important; letter-spacing:0.4px; }
.navbar .btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,0.18);
  background: transparent;
  transition: all .18s ease;
}
.navbar .btn-outline-light:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

/* Container / headings */
.container h2, .card-title, h3, h4, h5 {
  color: var(--green-900);
}
.card {
  border: none;
  background: linear-gradient(180deg, var(--card-bg), #fff);
  box-shadow: 0 6px 22px rgba(7,54,35,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.card .card-body { padding: 20px; }

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, var(--green-600), var(--green-500));
  border: 0;
  box-shadow: 0 6px 18px rgba(35,192,108,0.12);
  color: #053623;
  font-weight: 600;
  border-radius: 8px;
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
}
.btn-secondary {
  background: transparent;
  border: 1px solid rgba(6,63,43,0.08);
  color: var(--green-900);
}

/* Links */
a { color: var(--green-700); }
a:hover { color: var(--green-900); text-decoration: none; }

/* Forms */
.form-control {
  border-radius: 8px;
  border: 1px solid rgba(6,63,43,0.08);
  padding: 10px 12px;
  box-shadow: none;
  background: linear-gradient(180deg, #fff, #fbfffc);
}
.form-label { color: var(--muted); font-weight:600; }

/* Tabs */
.nav-tabs .nav-link {
  color: var(--green-700);
  border: none;
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
}
.nav-tabs .nav-link.active {
  background: linear-gradient(90deg, var(--green-500), var(--green-600));
  color: #04291a;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.03);
}

/* Channel boxes (mixer) */
.channel {
  background: linear-gradient(180deg, #ffffff, #f4fff8);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(6,63,43,0.06);
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

/* Piano keys */
.piano { user-select:none; display:flex; align-items:flex-end; gap:2px; padding:8px; background: linear-gradient(180deg,#f7fff9, #f0fff5); border-radius:10px; border:1px solid rgba(6,63,43,0.04); }
.key {
  display:inline-flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  width:46px;
  height:160px;
  border-radius:6px;
  border:1px solid rgba(6,63,43,0.06);
  background: linear-gradient(180deg, #ffffff, var(--green-300));
  box-shadow: 0 6px 12px rgba(6,63,43,0.04);
  color: var(--green-900);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s;
}
.key.black {
  width:34px;
  height:110px;
  margin-left:-18px;
  margin-right:-18px;
  z-index:2;
  background: linear-gradient(180deg, var(--green-900), var(--green-700));
  color: #fff;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(3,30,20,0.12);
}
.key.active { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(6,63,43,0.12); }

/* File lists */
.file-list { font-size:0.9rem; color:var(--muted); margin-top:6px; }

/* Small helpers */
.small-muted { color:var(--muted); font-size:0.9rem; }

/* Footer / misc */
footer { text-align:center; padding:24px 0; color:var(--muted); }

/* Responsive tweaks */
@media (max-width:767px) {
  .key { width:30px; height:110px; }
  .key.black { width:22px; height:72px; margin-left:-10px; margin-right:-10px; }
}