:root{
  /* Fluent / M365-ish palette */
  --bg:#f3f2f1;
  --card:#ffffff;
  --text:#201f1e;
  --muted:#605e5c;
  --border:#edebe9;
  --border2:#e1dfdd;
  --danger:#a4262c;
  --accent:#0078d4;
  --accent2:#106ebe;
  --radius:14px;
  --radius-sm:12px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background:var(--bg);
  margin:0;
  color:var(--text);
}

/* Link defaults (Fluent-like) */
a{color:var(--accent2);}
a:hover{color:var(--accent);}


/* Auth (login) */
.page-auth{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
  background:
    radial-gradient(900px 520px at 20% 12%, #ffffff 0%, var(--bg) 45%, #eef2ff 100%);
}
.page-auth .auth-card{
  width:min(420px, 100%);
  box-shadow:0 22px 70px rgba(17,24,39,.10);
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(6px);
}
.page-auth .auth-card h2{
  margin:0 0 8px 0;
  text-align:center;
}

.page-auth .auth-card form{margin-top:6px;}
.page-auth .auth-card .btn{width:100%; margin-top:12px;}

.wrap{max-width:1200px; margin:24px auto; padding:0 16px;}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
}
.top h1,.top h2{margin:0; font-size:20px; font-weight:700;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.err{
  background:#ffe7e7;
  border:1px solid #ffb3b3;
  padding:10px;
  border-radius:var(--radius-sm);
  margin:12px 0 0 0;
}

.ok{
  background:#dcfce7;
  border:1px solid #86efac;
  padding:10px;
  border-radius:var(--radius-sm);
  margin:12px 0 0 0;
  color:#166534;
}

/* Forms */
label{display:block; margin-top:10px; font-size:14px;}
input,select,textarea{
  width:100%;
  padding:10px;
  margin-top:6px;
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:14px;
}

/* Checkboxes / radios (override global width:100% for inputs) */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  padding:0;
  margin-top:0;
}
label.checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(0,120,212,.25);
  border-color:rgba(0,120,212,.65);
}
textarea{min-height:80px; resize:vertical;}

.row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

/* Dashboard menu */
.menu{display:flex; flex-direction:column; gap:10px; margin-top:14px; max-width:760px; margin-left:auto; margin-right:auto;}
.menu .card{padding:9px 10px;}
.menu-item{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.menu-text{font-weight:700; font-size:14px;}
.menu-muted{color:var(--muted); font-size:12px;}
@media (max-width: 780px){
  .row,.grid{grid-template-columns:1fr;}
  .top{flex-direction:column; align-items:flex-start;}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid var(--border2);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
}
.btn:hover{filter:brightness(.98);}
.btn:active{transform:translateY(1px);}

.btn-primary{
  background:linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%);
  border-color:var(--accent2);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.btn-primary:hover{filter:brightness(1.05);}
.btn:focus-visible{
  outline:3px solid rgba(0,120,212,.35);
  outline-offset:2px;
}
.btn-secondary{
  background:#fff;
  border-color:var(--border2);
  color:var(--text);
}

.btn-warning{
  background:#fff;
  border-color:#fdba74;
  color:#9a3412;
}
.btn-danger{
  background:#fff;
  border-color:#ffb3b3;
  color:var(--danger);
}

.btn-warning{
  background:#fff;
  border-color:#fdba74;
  color:#9a3412;
}
.btn-sm{padding:7px 10px; border-radius:10px; font-size:13px;}
.btn-xs{padding:6px 9px; border-radius:10px; font-size:12px;}


.actions{white-space:nowrap;}
.actions .btn{margin-right:8px;}
.actions form{display:inline; margin:0;}
.actions form:last-child .btn{margin-right:0;}

/* Bank transactions: keep action controls inside the last column (no clipping) */
.bank-tx-table td.actions{padding-right:16px;}
.bank-tx-table .actions-flex{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bank-tx-table .actions-flex form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  margin:0;
}
.bank-tx-table .actions-flex .btn{margin:0; flex:0 0 auto;}
.bank-tx-table .actions-flex select{
  height:30px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:0 8px;
  width:180px;
  max-width:200px;
  min-width:120px;
  flex:1 1 120px;
}

/* Give the actions column a bit more room on narrower tables */
.bank-tx-table td.actions{min-width:240px;}
@media (max-width: 1100px){
  .bank-tx-table td.actions{min-width:210px;}
  .bank-tx-table .actions-flex select{width:150px; max-width:170px;}
}

/* Actions as compact 2-column grid (used in invoice list) */
.actions-grid{
  display:grid;
  grid-template-columns:repeat(2, max-content);
  gap:6px 8px;
  align-items:start;
  justify-content:start;
}
.actions-grid .btn{margin:0; white-space:nowrap;}
.actions-grid form{margin:0;}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  margin-top:14px;
}
th,td{
  padding:10px;
  border-bottom:1px solid #eee;
  text-align:left;
  font-size:14px;
}
th{background:#fafafa; font-weight:600;}
tbody tr:last-child td{border-bottom:none;}

/* Bank account cell (client list) */
.bank-acc{max-width:240px; word-break:break-all;}

/* Zebra rows + hover (better readability for long invoice lists) */
.table-zebra tbody tr:nth-child(even){background:#faf9f8;}
.table-zebra tbody tr:hover{background:#f3f9ff;}

/* Filter bar */
.filters{
  margin-top:14px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.filter-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.filter-label{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.filter-select{
  width:auto;
  min-width:260px;
}

/* Supplier assets preview */
.assetBox{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  background:#fff;
}
.assetLabel{font-weight:700; margin:0 0 6px 0;}
.assetImg{
  max-width:240px;
  max-height:140px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:#fff;
}
.assetBtnForm{margin-top:8px;}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.badge-ok{background:#dcfce7; border:1px solid #86efac; color:#166534;}
.badge-bad{background:#fee2e2; border:1px solid #fecaca; color:#991b1b;}
.badge-warn{background:#ffedd5; border:1px solid #fdba74; color:#9a3412;}
.actions .badge{margin-right:8px;}

/* --- Faktury: helper třídy pro přehledný seznam --- */
.badge-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

.nowrap{ white-space:nowrap; }
.text-end{ text-align:right; }
.muted{ opacity:.75; }

details > summary{ cursor:pointer; }
pre.email-body{
  white-space:pre-wrap;
  background:#fafafa;
  border:1px solid #eee;
  padding:10px;
  border-radius:12px;
  margin:8px 0 0 0;
  font-size:13px;
}

details summary{cursor:pointer;}
pre.email-body{
  margin:8px 0 0 0;
  padding:10px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
  white-space:pre-wrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

table td{ vertical-align:middle; }