/* style.css */
main{padding:20px;max-width:1200px;margin:0 auto}
h2{margin-top:0}

/* Horní lišta */
.filter-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px;flex-wrap:wrap}

/* Export dropdown */
.export-dropdown{position:relative;display:inline-block;margin-right:10px;height:30px}
.export-menu{display:none;position:absolute;top:110%;left:0;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:180px;z-index:1000}
.export-option{padding:10px 14px;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s;border-radius:4px}
.export-option:active{transform:scale(.98)}
.export-menu.show{display:block}

/* Ovládací tlačítka */
.filter-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-left:auto}

/* Panel s filtry */
.filter-box-container{width:100%;box-sizing:border-box;border-radius:18px;padding:16px;margin:0 auto 20px auto;display:none}
.filter-box{display:grid;grid-template-columns:1fr;gap:16px;width:100%}

.filter-choice-section{display:grid;gap:11px;min-width:0;padding:14px;border-radius:16px;align-content:start;border:1px solid #00000000}
.filter-choice-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding-bottom:9px;border-bottom:1px solid #00000000}
.filter-choice-head label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-choice-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:12px;padding:3px 9px;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1}

.filter-box label,.filter-choice-head label,.filter-note-label label{font-weight:300;font-size:15px}
.filter-box input{width:100%;min-height:38px;padding:7px 4px;border-radius:10px;font-size:.9rem;box-sizing:border-box}
.filter-range-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin: 0 -5px 0 -15px;width: stretch;}
.filter-range-separator{font-weight:600;line-height:1;text-align:center;padding-left: 8px;}

.filter-native-select{position:absolute;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.filter-choice-list{display:flow;flex-wrap:wrap;align-items:flex-start;gap:0;width:100%;max-height:190px;overflow-y:auto;padding:2px 4px 2px 0}
.filter-choice-empty{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:10px;font-size:.86rem}
.filter-quick-row{display:flex;flex-wrap:wrap;gap:0;margin-top:2px}
.filter-quick-row .default-button{flex:1 1 auto;min-width:96px}

.filter-note-line{display:grid;gap:7px;min-width:0;width:100%;padding:14px;border-radius:16px;border:1px solid #00000000;box-sizing:border-box}
.filter-note-input{display:flex;align-items:center;gap:10px;width:100%}
.filter-note-input input{flex:1;width:100%;min-height:38px;padding:7px 10px;border-radius:10px;font-size:.9rem;box-sizing:border-box}
.record-count{margin-top:10px;font-size:.95rem;text-align:center}

@media (min-width:900px){.filter-box{grid-template-columns:repeat(4,minmax(0,1fr))}.filter-note-line{grid-column:1/-1}}
@media (max-width:700px){
  .filter-bar{align-items:stretch}
  .filter-controls{width:100%;align-items:stretch;margin-left:0}
  #toggleFilter,.view-mode-buttons .default-button{width:100%}
  .filter-box-container{padding:12px;border-radius:14px}
  .filter-choice-section,.filter-note-line{padding:12px;border-radius:14px}
  .filter-choice-head{gap:8px}
  .filter-choice-list{max-height:230px}
  .filter-choice-list .default-button{flex:1 1 calc(50% - 7px)}
  #filterContainer > div[style]{flex-direction:column}
}
@media (max-width:420px){.filter-choice-list .default-button{flex-basis:100%}}

/* Hlavičky skupin */
.date-header{
  top:82px;z-index:5;font-weight:600;padding:3px 14px;border-radius:6px;margin-top:10px;
  font-size:1.05rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;
  transition:background .2s,box-shadow .2s;gap:10px
}
.date-arrow{font-size:1rem;transition:transform .3s ease}
.date-header.open .date-arrow{transform:rotate(90deg)}
.date-text{flex:1}
.date-total{font-size:1rem;font-weight:600;margin-left:auto}
.header-title{display:block;font-weight:600;font-size:1.05rem}
.header-subtitle{display:block;font-size:.9rem;margin-top:2px;font-style:italic;font-weight:normal}

.transaction-group{overflow:hidden;transition:max-height .4s ease;position:relative}

.transaction-box{border-radius:8px;padding:5px 14px;margin-top:-1px;display:block;cursor: pointer;transition:all .3s ease}
.transaction-box.has-attachment{padding-right:14px}

.tran-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.2fr) minmax(140px,.8fr) minmax(140px,.8fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "left mid right"
    "left mid right"
    "left note date";
  gap:6px 14px;
  align-items:start;
}

.tran-date{
  grid-area:date;
  text-align:right;
  font-size:.85rem;
  font-weight: 500;
  opacity:.75;
  white-space:nowrap;
  align-self:end;
}

/* na úzkém ukazuj DD.MM */
.tran-date .date-long{display:none}
.tran-date .date-short{display:inline}

.tran-left{grid-area:left;display:flex;flex-direction:column;gap:4px;min-width:0}
.tran-cat,.tran-sub,.tran-det{font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis}
.tran-sub,.tran-det{font-weight:500;font-size:.95rem}

.tran-mid{grid-area:mid;font-size:.95rem;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: right;max-width: 100px;}
.tran-right{grid-area:right;text-align:right;align-self:center;white-space:nowrap}
.amount{font-weight:700}
.amount.income{color:green}
.amount.expense{color:#a32222}

.tran-note{grid-area:note;font-style:italic;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (min-width:900px){
  .tran-grid{
    grid-template-rows:auto;
    grid-template-areas:"date left note mid right";
    grid-template-columns:90px 250px 1fr 100px 120px;
    align-items:center;
    column-gap:14px;
  }
  
  .tran-date{
    text-align:left;
    font-size:.9rem;
    opacity:.8;
    align-self:center;
  }
  
  /* na širokém ukazuj DD.MM.RRRR */
  .tran-date .date-short{display:none}
  .tran-date .date-long{display:inline}

  .tran-left{flex-direction:row;gap:10px;align-items:center;min-width:0}


  .tran-cat,.tran-sub,.tran-det,.tran-note,.tran-mid{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0
  }

  .tran-mid{max-width:100px}

  .tran-right{
    text-align:right;
    justify-self:stretch; 
    white-space:nowrap;
  }
}

@media (max-width:610px){
  .tran-grid{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "left mid right"
      "left mid right"
      "left note date"; /* datum pod částkou v pravém sloupci */
    gap:6px 10px;
  }

  .tran-cat,.tran-sub,.tran-det,.tran-note,.tran-mid{font-size: 0.8rem;}

  .tran-note{white-space:normal}

  .tran-date{
    justify-self:end;
    align-self:end;
    text-align:right;
  }
}

.delete-box{
    text-align: center;
    padding: 5px 0px 0px;
    border: solid 1px;
    border-top: none;
    border-radius: 0px 0px 20px 20px;
    margin-bottom: 10px;
	margin-top: -5px;
}

.del-confirm-actions{
  display:flex;
  justify-content:center;
  gap:10px;
}
.del-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Souhrn */
.summary-box{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-radius:8px;padding:0 10px;margin-top:-1px;font-size:.9rem;text-align:center
}
.summary-item{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:4px 2px}
.summary-item:not(:last-child)::after{content:"";position:absolute;top:15%;right:0;height:70%;width:1px}
.summary-item strong{margin-bottom:2px}

#infiniteLoader{text-align:center;font-size:.95rem;padding:10px 0;display:none}

/* Scroll top */
#scrollTopBtn{
  position:fixed;bottom:25px;right:25px;z-index:999;width:48px;height:48px;border-radius:50%;
  font-size:24px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:translateY(30px);transition:all .5s ease
}
#scrollTopBtn.visible{opacity:1;transform:translateY(0)}
#scrollTopBtn:hover{transform:translateY(-4px)}

/* Modal přílohy */
#attachmentModal{
  display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,.4);justify-content:center;align-items:center
}
#attachmentModal .modal-content{
  position:relative;border-radius:10px;padding:25px 35px;box-shadow:0 4px 12px rgba(0,0,0,.2);
  text-align:center;max-width:400px
}
#attachmentModal h3{margin-top:0}
#attachmentModal input[type="file"]{margin:15px 0}
#attachmentModal .close{position:absolute;right:20px;top:15px;font-size:1.5rem;cursor:pointer}
#attachmentModal button.upload-btn{background-color:#4a90e2;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}
#attachmentModal button.upload-btn:disabled{cursor:not-allowed;opacity:.7}
#fileInfo{margin-top:8px;font-weight:bold}
#uploadStatus{transition:opacity .3s ease}

#filterUserSection[style*="display:none"]{display:none!important}


.transaction-author {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.15;
}

.filter-sort-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.filter-sort-button {
  width: 26px;
  height: 24px;
  min-width: 26px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
}