/* ====== Värit ja mitat ====== */
:root{
  --fn-bg: #181a1b;
  --fn-text: beige;
  --fn-shadow-text: #000;
  --fn-logo-small: url('img/logo_rgb3.gif');
  --fn-logo-strip: url('img/logo_rgb_tausta17.gif');
  --fn-header-height: 151px;
  --header-h: 151px;
  --toolbar-h: 56px;
  --alerts-top: calc(var(--header-h) + var(--toolbar-h));
  --fn-badge: url('img/badge-full.png');
  --fn-badge-size: 760px;
  --fn-badge-opacity: .98;
  --fn-surface: #101821;
  --fn-surface-strong: #0f1721;
  --fn-surface-soft: #1e262f;
  --fn-border: #2b3644;
  --fn-border-soft: rgba(110, 132, 156, .24);
  --fn-text-main: #e6e6e6;
  --fn-control-text: #cfe8ff;
  --fn-muted: #93a4b7;
  --fn-shadow: 0 18px 58px rgba(0,0,0,.40);
  --fn-glass-inner: inset 0 1px 0 rgba(255,255,255,.045);
  --fn-backdrop-filter: none;
  --fn-toolbar-bg: #101316;
  --fn-toolbar-border: rgba(110,132,156,.22);
  --fn-invoice-tile-bg: #fff;
  --fn-invoice-tile-text: #111;
  --fn-invoice-tile-border: rgba(255,165,0,.85);
}

body[data-fn-theme='solid'] {
  --fn-surface: #101821;
  --fn-surface-strong: #0f1721;
  --fn-surface-soft: #1e262f;
  --fn-border: #2b3644;
  --fn-border-soft: rgba(110, 132, 156, .24);
  --fn-shadow: 0 18px 58px rgba(0,0,0,.40);
  --fn-backdrop-filter: none;
  --fn-toolbar-bg: #101316;
  --fn-invoice-tile-bg: #fff;
  --fn-invoice-tile-text: #111;
  --fn-invoice-tile-border: rgba(255,165,0,.85);
}

body[data-fn-theme='glass'] {
  --fn-surface: linear-gradient(180deg, rgba(18, 25, 34, .64), rgba(8, 12, 17, .50));
  --fn-surface-strong: rgba(15, 23, 33, .82);
  --fn-surface-soft: rgba(30, 38, 47, .72);
  --fn-border: rgba(110, 132, 156, .30);
  --fn-border-soft: rgba(110, 132, 156, .26);
  --fn-shadow: 0 18px 60px rgba(0,0,0,.44);
  --fn-backdrop-filter: blur(14px) saturate(1.15);
  --fn-toolbar-bg: rgba(15, 20, 26, .84);
  --fn-invoice-tile-bg: rgba(255,255,255,.86);
  --fn-invoice-tile-text: #111;
  --fn-invoice-tile-border: rgba(255,165,0,.72);
}

body[data-fn-theme='transparent'] {
  --fn-surface: rgba(8, 12, 17, .24);
  --fn-surface-strong: rgba(15, 23, 33, .34);
  --fn-surface-soft: rgba(30, 38, 47, .34);
  --fn-border: rgba(110, 132, 156, .18);
  --fn-border-soft: rgba(110, 132, 156, .16);
  --fn-shadow: 0 12px 34px rgba(0,0,0,.20);
  --fn-backdrop-filter: none;
  --fn-toolbar-bg: rgba(12, 15, 18, .38);
  --fn-invoice-tile-bg: rgba(255,255,255,.34);
  --fn-invoice-tile-text: #f3f7fb;
  --fn-invoice-tile-border: rgba(255,165,0,.44);
}

@font-face{
  font-family: Hack;
  src: url(fonts/Hack-Regular.ttf);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background-color:var(--fn-bg) !important;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  background-size:var(--fn-badge-size);
  color:var(--fn-text-main);
  margin:0;
  padding:calc(75px + var(--toolbar-h)) 0 0;
  font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

body.hero::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--fn-badge);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--fn-badge-size);
  opacity: var(--fn-badge-opacity);
  filter:
    drop-shadow(0 0 8px rgba(255, 196, 64, .30))
    drop-shadow(0 0 18px rgba(213, 138, 17, .30))
    drop-shadow(0 0 36px rgba(213, 138, 17, .22))
    drop-shadow(0 0 60px rgba(255, 196, 64, .12));
}

/* ====== Header + logoalue ====== */
.fn-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  min-height:calc(75px + var(--toolbar-h));
  background:transparent;
  border-bottom:0;
}

.fn-logo-wrap{
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  width:100%;
  height:var(--fn-header-height);
  padding:15px;
  margin:0;
  color:beige;
  font-family:Hack,"Courier New",Impact;
  text-shadow:2px 2px 3px black;
  font-size:20pt;
  pointer-events:none;
}

.logo,
#logo{
  position:absolute;
  left:0;
  top:0;
  box-sizing:border-box;
  margin:0;
}

.logo{
  z-index:28;
  width:300px;
  height:150px;
  padding:18px 15px 15px 7px;
  pointer-events:none;
  background-image:var(--fn-logo-small);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  color:white;
  font-family:"Courier New",monospace;
  text-shadow:2px 2px 3px var(--fn-shadow-text);
  font-size:16pt;
}

.logo .version{ margin-top:70px; }

.logo b{
  list-style-type:none;
  font-size:8pt;
  color:red;
  margin:0;
  padding:0;
  vertical-align:text-top;
  font-family:Hack,"Courier New",Impact;
  text-shadow:2px 2px 3px black;
}

#logo{
  z-index:29;
  display:block;
  height:var(--fn-header-height);
  width:100%;
  padding:18px 0 0 15px;
  pointer-events:auto;
  background-image:var(--fn-logo-strip);
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--fn-text);
  font-family:Hack,"Courier New",Impact;
  text-decoration:none;
  text-shadow:2px 2px 3px var(--fn-shadow-text);
  font-size:20pt;
  line-height:1.2;
}
#logo:hover{ color:#fff; text-decoration:none; }
#logo b{ animation: blinker 1.5s step-end infinite; }
@keyframes blinker { 50% { opacity:0; } }

.fn-header-spacer{
  position:relative;
  z-index:1;
  height:75px;
  pointer-events:none;
}

/* ====== Toolbar ====== */
.toolbar{
  position:relative;
  z-index:31;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  background:none;
  padding:10px 20px; min-height:var(--toolbar-h);
}
.toolbar button,.filelabel span,.fn-theme-control--toolbar select{
  background:var(--fn-surface-soft);color:var(--fn-control-text);border:1px solid var(--fn-border);
  border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600
}
.toolbar button:hover,.filelabel span:hover,.fn-theme-control--toolbar select:hover{filter:brightness(1.08)}
.fn-theme-control--toolbar{display:inline-flex;align-items:center}
.fn-theme-control--toolbar label{display:none}
.fn-theme-control--toolbar select{height:36px}
#btn-export{position:relative}
#btn-export.is-dirty{
  border-color:#8f5a16;
  box-shadow:0 0 0 1px rgba(255,138,0,.18);
}
#btn-export.is-dirty::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff8a00;
  box-shadow:0 0 0 2px #1e262f;
}

.filelabel span{display:inline-block;cursor:pointer}
.toolbar-menu{position:relative}
.toolbar-menu-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:170px;
  background:var(--fn-surface-strong);
  border:1px solid var(--fn-border);
  border-radius:10px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:var(--fn-shadow);
  backdrop-filter:var(--fn-backdrop-filter);
  -webkit-backdrop-filter:var(--fn-backdrop-filter);
  z-index:120;
}
.toolbar-menu-panel[aria-hidden="true"]{display:none}
.toolbar-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:#cfe8ff;
  padding:4px 6px;
  border-radius:6px;
  cursor:pointer;
  font-size:.9rem;
}
.toolbar-menu-item:hover{background:var(--fn-surface-soft)}
.toolbar-menu-item input{margin:0; accent-color:#2b7cff; cursor:pointer}
#year-filter{min-width:140px}

/* ====== Sticky alerts headerin alle ====== */
.alerts{ top:var(--alerts-top); z-index:90; margin:75px 0 0 0; }
.alert{padding:10px 12px;border-left:4px solid #ff5c5c;background:#2b1a1a;color:#ffcccc;margin:8px 0;border-radius:6px;position:relative}
.alert.warn{border-left-color:#ffba3a;background:#3b2e17;color:#ffe6bf}
.alert .closebtn{position:absolute; right:8px; top:6px; background:none; border:none; color:inherit; font-weight:700; cursor:pointer}

/* ====== Layout ====== */
.container{max-width:1200px;margin:0 auto;padding:0 20px 60px}
.grid-wrap,.list-wrap{margin-top:24px}

/* ====== Korttiruudukko ====== */
.grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:16px;justify-items:stretch;margin-top:16px}
@media (max-width:1200px){.grid{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

.tile{background:none;border:none;padding:0;box-shadow:none;min-height:auto}
.tile .pill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--fn-invoice-tile-bg);color:var(--fn-invoice-tile-text);border-radius:18px;padding:18px 26px;min-height:90px;
  border:4px solid var(--fn-invoice-tile-border);
  box-shadow:0 4px 0 rgba(0,0,0,0.35),0 0 0 4px rgba(0,0,0,0.2) inset;
  font-weight:700;font-size:1.4rem;text-transform:lowercase
}
.tile .pill .datebadge{font-size:.9rem;font-weight:700;padding:4px 10px;border-radius:10px;background:#e6e6e6}
.tile .pill .datebadge.ok{background:#d6f8d3}
.tile .pill .datebadge.bad{background:#ffd6d6}
.tile .pill .datebadge.warn{background:#fff0c2}

/* ====== Listat ====== */
.list{background:var(--fn-surface);border:1px solid var(--fn-border-soft);border-radius:12px;padding:8px;box-shadow:var(--fn-shadow);backdrop-filter:var(--fn-backdrop-filter);-webkit-backdrop-filter:var(--fn-backdrop-filter)}
.rowline{display:grid;grid-template-columns:140px 1fr 120px 120px 40px;gap:10px;padding:10px;align-items:center;border-bottom:1px dashed #2a3848}
.rowline.company-row{grid-template-columns:140px 1fr 120px 120px 120px 40px}
.rowline.company-header{grid-template-columns:140px 1fr 120px 120px 120px 40px;padding-top:4px;padding-bottom:8px;border-bottom:1px solid #2a3848;color:#ffb3b3;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.rowline:last-child{border-bottom:none}
.rowline.clickable{cursor:pointer}
.rowline.highlight{background:#1b2430;box-shadow:inset 0 0 0 2px #2b7cff}
.company-sort-cell{display:flex;align-items:center;min-width:0}
.company-sort-cell.align-left{justify-content:flex-start}
.company-sort-cell.align-right{justify-content:flex-end}
.company-sort-spacer{min-height:1px}
.company-sort-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:0;
  border:none;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  white-space:nowrap;
}
.company-sort-btn.align-left{justify-content:flex-start}
.company-sort-btn:hover{color:#ffd1d1}
.company-sort-btn.is-active{color:#ffe6e6}
.company-sort-icon{
  flex:0 0 auto;
  font-size:1rem;
  line-height:1;
}
.company-sort-btn:not(.is-active) .company-sort-icon{opacity:.68}

.badge{padding:2px 8px;border-radius:999px;font-size:.85rem;border:1px solid #263140;background:#1b222b}
.badge.overdue{background:#3b1a1a;color:#ffb3b3;border-color:#5a2b2b}
.badge.soon{background:#2f250f;color:#ffd88a;border-color:#5a4a2b}

/* ====== Muokkaa-ikonin tyyli ====== */
.btn-edit{ background:#1a232c; color:#cfe8ff; border:1px solid #2b3644; border-radius:8px; padding:6px 8px; cursor:pointer }
.btn-edit:hover{ background:#223040 }
.btn-edit .icon{ font-size:14px; line-height:1 }

/* ====== Modaalit ====== */
.modal[aria-hidden="true"]{display:none}
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:200}
.dialog{width:min(980px,96vw);background:var(--fn-surface-strong);border:1px solid var(--fn-border);border-radius:14px;padding:14px;box-shadow:var(--fn-shadow);backdrop-filter:var(--fn-backdrop-filter);-webkit-backdrop-filter:var(--fn-backdrop-filter)}
.dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dialog .close{background:none;color:#e6e6e6;border:none;font-size:20px;cursor:pointer}

form .row{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px;margin-bottom:10px}
form label{display:flex;flex-direction:column;gap:6px;font-size:.95rem}
input,select,textarea{background:#0a1016;color:#e6e6e6;border:1px solid var(--fn-border);border-radius:8px;padding:8px}
textarea{min-height:100px;width:100%}
form footer{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
button[type="submit"],#btn-parse-add,#btn-generate-add-barcode,#btn-generate-edit-barcode,.filelabel span{background:#1e262f;color:#cfe8ff;border:1px solid #2b3644;border-radius:8px;padding:8px 12px;cursor:pointer; font-size: 14px; font-weight: 700;}
#btn-generate-add-barcode:disabled,
#btn-generate-edit-barcode:disabled{
  background:#151b22;
  color:#93a4b7;
  border-color:#384554;
  cursor:not-allowed;
  opacity:.7;
  filter:saturate(.7);
}
#btn-delete, #btn-reset {background:#2a1b1b;color:#ffb3b3;border:1px solid #5a2b2b;border-radius:8px;padding:8px 12px;margin-right: auto; font-weight: 700;}

.company-select-wrap,
.iban-picker,
.bank-inline-group{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:8px;
  width:100%;
}
.company-select-wrap select,
.iban-picker-trigger,
.bank-inline-group select,
.bank-inline-group .bank-manual-input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
}
.btn-plus{
  flex:0 0 40px;
  width:40px;
  padding:0;
  border:1px solid #2b3644;
  border-radius:8px;
  background:#1e262f;
  color:#cfe8ff;
  cursor:pointer;
  font-size:1.1rem;
  font-weight:700;
}
.btn-plus:hover{background:#253140}
.bank-inline-group .bank-manual-input{
  background:#0a1016;
  color:#e6e6e6;
  border:1px solid #2b3644;
  border-radius:8px;
  padding:8px;
}
.iban-picker-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#0a1016;
  color:#e6e6e6;
  border:1px solid #2b3644;
  border-radius:8px;
  padding:8px;
  cursor:pointer;
  text-align:left;
}
.iban-picker.is-empty .iban-picker-text{color:#93a4b7}
.iban-picker-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.iban-picker-caret{
  flex:0 0 auto;
  color:#93a4b7;
  font-size:.85rem;
}
.iban-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:48px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  background:#0f1721;
  border:1px solid #2b3644;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:240;
}
.iban-dropdown[aria-hidden="true"]{display:none}
.iban-dropdown-empty{
  color:#93a4b7;
  font-size:.85rem;
  padding:6px 8px;
}
.iban-dropdown-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.iban-dropdown-option{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:8px 10px;
  border:none;
  border-radius:8px;
  background:#111a24;
  color:#cfe8ff;
  cursor:pointer;
  text-align:left;
}
.iban-dropdown-option:hover{background:#1a2532}
.iban-dropdown-option.is-current{
  box-shadow:inset 0 0 0 1px #2b7cff;
  background:#172232;
}
.iban-default-badge{
  flex:0 0 auto;
  align-self:flex-start;
  padding:2px 8px;
  border-radius:999px;
  background:#2f250f;
  color:#ffd88a;
  font-size:.75rem;
  font-weight:700;
}
.iban-dropdown-delete{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #5a2b2b;
  border-radius:8px;
  background:#2a1b1b;
  color:#ffb3b3;
  cursor:pointer;
}
.iban-dropdown-delete:hover{filter:brightness(1.05)}

/* Yhteinen "pääpainike" -tyyli */
.btn-primary{
  background:#1e262f;
  color:#cfe8ff;
  border:1px solid #2b3644;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}
.btn-primary:hover{ background:#253140; }

/* (valinnainen) Vaarallinen/toissijainen, esim. Poista/Tyhjennä */
.btn-danger{
  background:#2a1b1b;
  color:#ffb3b3;
  border:1px solid #5a2b2b;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}
.btn-danger:hover{ filter:brightness(1.05); }

/* 1) Rajoita modaalin dialogin korkeus ja tee siitä flex-sarake */
.dialog{
  max-height: 92vh;           /* ei karkaa näytön ulkopuolelle */
  display: flex;
  flex-direction: column;
}

/* 2) Tee yrityksen laskulistasta (modal-company) rullaava alue */
#company-invoices{
  overflow: auto;             /* sisäinen scroll */
  flex: 1 1 auto;             /* täyttää käytettävän tilan headerin alla */
  min-height: 200px;          /* mukava klikkauspinta myös lyhyillä listoilla */
  padding-right: 6px;         /* pieni tila, ettei skrollipalkki peitä sisältöä */
}

@media (max-width:900px){
  form .row{grid-template-columns:repeat(2,minmax(180px,1fr))}
}

@media (max-width:700px){
  .rowline{grid-template-columns:1fr}
  .rowline.company-row,.rowline.company-header{
    grid-template-columns:140px minmax(220px,1fr) 120px 120px 120px 40px;
    min-width:760px;
  }
  .rowline.company-header{display:grid}
  .company-modal-list{min-width:760px}
  .btn-edit{justify-self:end}
  form footer{flex-wrap:wrap}
  .iban-dropdown{right:48px}
}

/* (valinn.) Estä taustan skrollaus kun modaali auki: lisää bodylle .modal-open JS:llä */
/* body.modal-open{ overflow: hidden; } */