/* static/css/worker.css */
/* Worker-only UI overrides (loaded only in templates/worker/_base.html) */

/* =======================================================
   HEADER / TOPBAR
   ======================================================= */

.worker-topbar{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}

.worker-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.worker-brand img{
  height:40px;
  width:auto;
  display:block;
}

.worker-userbox{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.worker-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e5e7eb;
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  overflow:hidden;
  flex:0 0 36px;
}

.worker-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.worker-avatar-initials{
  font-size:14px;
  font-weight:700;
}

.worker-username{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-size:14px;
  font-weight:600;
  max-width: calc(100% - 220px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}

.worker-logout-btn{
  background:#ef4444;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:6px 10px;
  font-size:14px;
  cursor:pointer;
}

.worker-logout-btn:hover{
  background:#dc2626;
}

@media (max-width: 520px){
  .worker-topbar{ padding:6px 10px; }
  .worker-brand img{ height:34px; }
  .worker-avatar{ width:32px; height:32px; flex:0 0 32px; }
  .worker-logout-btn{ padding:6px 8px; font-size:13px; }
  .worker-username{ max-width: calc(100% - 170px); }
}

/* =======================================================
   LAYOUT HELPERS
   ======================================================= */

.worker-wrap{
  max-width: 720px;
  margin: 0 auto;
}

.worker-tiles.worker-tiles-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 0;
}

@media (max-width: 520px){
  .worker-tiles.worker-tiles-2{
    grid-template-columns: 1fr;
  }
}

/* =======================================================
   WALLET – TEXT / TOOLBAR
   ======================================================= */

.worker-wallet-hint{
  font-size: 13px;
}

.worker-wallet-toolbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.worker-wallet-toolbar-left{
  min-width: 0;
}

.worker-wallet-month{
  flex: 0 0 auto;
}

.worker-wallet-month input[type="month"]{
  min-width: 160px;
}

@media (max-width: 640px){
  .worker-wallet-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .worker-wallet-month input[type="month"]{
    width: 100%;
    min-width: 0;
  }
}

/* =======================================================
   WALLET – NEW PURCHASE FORM (mobile-first)
   ======================================================= */

.worker-wallet-new{
  margin-top: 16px;
}

.worker-wallet-new-title{
  font-weight: 600;
  margin-bottom: 8px;
}

.worker-wallet-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.worker-wallet-form .span-2{
  grid-column: span 2;
}

@media (max-width: 640px){
  .worker-wallet-form{
    grid-template-columns: 1fr;
  }
  .worker-wallet-form .span-2{
    grid-column: span 1;
  }
}

.worker-wallet-form label{
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.worker-wallet-form input[type="text"],
.worker-wallet-form input[type="number"],
.worker-wallet-form select{
  width: 100%;
}

/* =======================================================
   UPLOAD – unified (worker look)
   ======================================================= */

/* Primary class (use this in templates) */
.worker-upload{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:8px;
  border:2px dashed #0066cc;
  background:#e6f2ff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  text-align:center;
}

.worker-upload:hover{
  background:#d6e8ff;
}

.worker-upload input[type="file"]{
  width:100%;
}

/* Compatibility alias (if some templates still use old class) */
.upload-doc-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:8px;
  border:2px dashed #0066cc;
  background:#e6f2ff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  text-align:center;
}

.upload-doc-button:hover{
  background:#d6e8ff;
}

.worker-file{
  width: 100%;
}

/* =======================================================
   WALLET – TRANSACTIONS TABLE
   ======================================================= */

.worker-wallet-tablewrap{
  margin-top: 12px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.worker-wallet-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px; /* horizontal scroll on mobile */
}

.worker-wallet-table th,
.worker-wallet-table td{
  padding: 10px 8px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}

.worker-wallet-table th{
  text-align: left;
  background: #f7f7f9;
  font-weight: 700;
  font-size: 13px;
}

.worker-wallet-table td.amount{
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.worker-wallet-table td.actions{
  text-align: right;
  white-space: nowrap;
}

/* receipt cell layout */
.worker-wallet-doc{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.worker-wallet-doc a{
  text-decoration: underline;
}

/* inline forms in table */
.worker-inline-form{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.worker-inline-form .btn{
  white-space: nowrap;
}

/* small file input in rows */
.worker-row-file{
  max-width: 220px;
}

/* =======================================================
   WALLET – STATUS COLORS FOR ROWS (unified)
   ======================================================= */

/* Primary (prefer these) */
.worker-tx-in td{
  background:#eaf9ee;
  color:#1f7a35;
}

.worker-tx-out td{
  background:#fdeaea;
  color:#9b1c1c;
}

.worker-tx-in td.amount,
.worker-tx-out td.amount{
  font-weight:800;
}

/* Compatibility (if templates still use tx-in/tx-out) */
.tx-in td{
  background:#eaf9ee;
  color:#1f7a35;
}

.tx-out td{
  background:#fdeaea;
  color:#9b1c1c;
}

/* If some legacy code expects 4th column emphasized */
.tx-in td:nth-child(4),
.tx-out td:nth-child(4){
  font-weight:bold;
}

/* =======================================================
   WALLET – MOBILE TABLE HELPERS
   ======================================================= */

.col-hide-mobile{
  display:table-cell;
}

@media (max-width: 768px){
  #cash-tx-table th.col-hide-mobile,
  #cash-tx-table td.col-hide-mobile{
    display:none !important;
  }

  #cash-tx-table td{
    padding:6px 4px;
    font-size:13px;
  }

  #cash-tx-table tbody tr.tx-row{
    cursor:pointer;
  }
}

/* =======================================================
   MODAL – detail transakce
   ======================================================= */

.tx-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.tx-modal-backdrop.show{
  display:flex;
}

.tx-modal{
  background:#fff;
  border-radius:10px;
  padding:16px 18px;
  max-width:420px;
  width:92%;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.tx-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.tx-modal-title{
  font-size:16px;
  font-weight:600;
}

.tx-modal-close{
  border:none;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.tx-modal-body{
  font-size:14px;
  margin-bottom:12px;
}

.tx-modal-body dl{
  margin:0;
}

.tx-modal-body dt{
  font-weight:600;
  margin-top:6px;
}

.tx-modal-body dd{
  margin:0;
  margin-left:0;
}

.tx-modal-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  gap:8px;
  flex-wrap:wrap;
}

.tx-modal-footer .btn{
  width:auto;
}

@media (max-width:480px){
  .tx-modal-footer{
    flex-direction:column;
    align-items:stretch;
  }

  .tx-modal-footer .btn{
    width:100%;
    text-align:center;
  }
}

/* =======================================================
   BALANCES – cards on mobile
   ======================================================= */

.balances-row .card{
  min-width:220px;
}

@media (max-width:768px){
  .balances-row{
    gap:8px;
  }

  .balances-row .card{
    flex:1 1 calc(50% - 8px);
    padding:10px 12px;
  }

  .balances-row .card .card-title{
    font-size:14px;
  }

  .balances-row .card .card-value{
    font-size:22px;
  }
}

/* =======================================================
   SMALL HELPERS
   ======================================================= */

.worker-muted{
  color:#6b7280;
}

.worker-mt-12{ margin-top:12px; }
.worker-mt-16{ margin-top:16px; }
.worker-mb-8{ margin-bottom:8px; }

.hidden{
  display:none !important;
}

/* =======================================================
   APP safe area (Android wrapper injects --app-safe-top/bottom)
   ======================================================= */
:root{
  --app-safe-top: 0px;
  --app-safe-bottom: 0px;
}

/* Header: jen malá rezerva, ne celý status bar */
.worker-topbar{
  padding:8px 12px;
}


/* Obsah má dole rezervu (gesture bar) */
.page-container{
  padding-bottom: 12px;
}