/* Google Fonts – Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* Paleta – Material Design (niebieski + teal) */
:root{
  --primary: #1565C0;
  --primary-dark: #0D47A1;
  --primary-light: #42A5F5;
  --accent: #00897B;
  --accent-light: #4DB6AC;

  --surface: #FFFFFF;
  --bg: #ECEFF1;
  --text: #212121;
  --muted: #616161;
  --border: #CFD8DC;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);

  --blue: #1565C0;
  --green: #2E7D32;
  --red: #C62828;
  --gray: #546E7A;
  --card: var(--surface);
}

*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: 'Roboto', sans-serif;
  color: var(--text);
  background: var(--bg);
}

.container{
  max-width: 1150px;
  margin: 24px auto;
  padding: 0 16px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 18px;
}

h1,h2,h3{ margin:0; }
h1{ font-size: 22px; font-weight: 700; }
h2{ font-size: 18px; font-weight: 700; }
h3{ font-size: 16px; font-weight: 700; }

.small{ color: var(--muted); font-size: 13px; line-height: 1.35; }

.row{ display:flex; gap:14px; align-items:center; }
.field{ display:flex; flex-direction:column; gap:6px; width:100%; }
label{ font-size: 12px; color: var(--muted); font-weight: 500; }

input, textarea{
  width:100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline:none;
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(21,101,192,0.2);
}
textarea{ min-height: 96px; resize: vertical; }

.btn{
  border:0;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ filter: brightness(0.95); }
.btnBlue{ background: var(--primary); color:#fff; }
.btnBlue:hover{ box-shadow: 0 2px 8px rgba(21,101,192,0.35); }
.btnGreen{ background: var(--green); color:#fff; }
.btnGreen:hover{ box-shadow: 0 2px 8px rgba(46,125,50,0.35); }
.btnDanger{ background: var(--red); color:#fff; }
.btnGhost{ background: #ECEFF1; color: var(--text); border:1px solid var(--border); }
.btnDisabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }

.info{
  border-radius: 4px;
  padding: 12px;
  border:1px solid var(--border);
  background: #FAFAFA;
  font-size: 14px;
}
.info.success{ background: #E8F5E9; border-color: #A5D6A7; color: #1B5E20; }
.info.warn{ background: #FFF8E1; border-color: #FFE082; color: #F57F17; }
.info.alert{ background: #FFEBEE; border-color: #EF9A9A; color: #B71C1C; }

hr{ border:0; border-top:1px solid var(--border); margin: 16px 0; }

.table{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th, .table td{
  border-bottom:1px solid var(--border);
  padding: 8px 6px;
  text-align:left;
  vertical-align: top;
}
.table th{ color: var(--muted); font-weight: 700; }

.badge{
  padding: 4px 10px;
  border-radius: 8px;
  background: #ECEFF1;
  border: none;
  font-weight: 500;
  font-size: 12px;
}
.badgePaid{ background: #E8F5E9; color: #1B5E20; }
.badgePending{ background: #FFF8E1; color: #F57F17; }

.mono{ font-family: 'Roboto Mono', ui-monospace, monospace; }