*{box-sizing:border-box}

:root{
  --dark:#30353a;
  --mid:#555e65;
  --light:#eef0f2;
  --green:#42754a;
  --red:#a34242;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Segoe UI",Arial,sans-serif;
  color:#25292d;
  background:#f4f5f6;
}

.site-header{
  min-height:110px;
  padding:14px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,#25292d,#565e64,#7a8186);
  color:white;
  border-bottom:4px solid #ccc;
}

.brand{display:flex;align-items:center;gap:20px}

.logo{
  width:165px;
  height:80px;
  object-fit:contain;
  background:
  padding:3px;
  border-radius:5px;
}

.site-header h1{margin:0;font-size:28px;text-transform:uppercase}
.subtitle{font-size:18px;margin-top:3px}
.current-date{font-size:14px;color:#ddd;margin-top:6px}

.main-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:10px;
  background:#e2e5e7;
  border-bottom:1px solid #ccc;
}

.main-nav a{
  padding:10px 20px;
  border-radius:5px;
  color:#333;
  font-weight:650;
  text-decoration:none;
}

.main-nav a:hover{background:#ccd1d4}
.main-nav a.active{background:#505960;color:white}

.page-container{
  width:min(1450px,calc(100% - 30px));
  margin:24px auto 50px;
}

button{
  border:0;
  border-radius:5px;
  padding:10px 16px;
  color:white;
  background:#56616a;
  font-weight:650;
  cursor:pointer;
}

button:hover{filter:brightness(.86)}
.success-btn{background:var(--green)}
.danger-btn{background:var(--red)}
.secondary-btn{background:#888}

.small-btn{
  padding:6px 9px;
  margin:2px;
  font-size:12px;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:18px 0;
}

.saldo-panel,
.report-section,
.inventory-card{
  background:white;
  border:1px solid #ddd;
  border-radius:9px;
  padding:20px;
  box-shadow:0 2px 9px rgba(0,0,0,.06);
}

.saldo-panel{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:15px;
}

.saldo-panel label{
  display:block;
  font-weight:650;
  margin-bottom:6px;
}

.saldo-panel input{
  width:190px;
  padding:10px;
  border:1px solid #aaa;
  border-radius:5px;
  font-size:17px;
}

.table-wrapper{
  width:100%;
  overflow-x:auto;
  border-radius:7px;
}

table{
  width:100%;
  border-collapse:collapse;
  background:white;
}

th{
  background:#515a61;
  color:white;
  padding:9px;
  border:1px solid #687078;
}

td{
  padding:9px;
  border:1px solid #d6dade;
  text-align:center;
}

tbody tr:nth-child(even){background:#f7f8f8}
tbody tr:hover{background:#edf0f2}

tfoot td{
  background:#e1e5e7;
  font-weight:bold;
}

.saldo-row td{font-size:18px}
.income{color:#287039}
.expense{color:#9c3b3b}
.actions-cell{white-space:nowrap}

.inventory-card{
  width:min(720px,100%);
  margin:auto;
}

.inventory-card h2{text-align:center}

.inventory-count{
  width:90px;
  padding:7px;
  text-align:center;
  border:1px solid #aaa;
  border-radius:4px;
}

.save-status{
  min-height:26px;
  padding-top:9px;
  color:#47704c;
}

.report-section{margin-bottom:24px}

.empty-state{
  padding:25px;
  text-align:center;
  color:#777;
  background:#f6f7f7;
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.6);
}

.modal-content{
  position:relative;
  width:min(520px,100%);
  padding:26px;
  background:white;
  border-radius:9px;
}

.modal-content label{
  display:block;
  margin:13px 0;
  font-weight:600;
}

.modal-content input{
  width:100%;
  padding:10px;
  margin-top:5px;
  border:1px solid #aaa;
  border-radius:5px;
}

.modal-close{
  position:absolute;
  top:5px;
  right:8px;
  background:transparent;
  color:#555;
  font-size:24px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
}

.password-screen{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:linear-gradient(135deg,#252a2e,#555e64,#858b90);
}

.password-box{
  width:min(430px,100%);
  padding:32px;
  text-align:center;
  background:white;
  border-radius:12px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}

.password-logo{
  width:260px;
  max-width:95%;
  max-height:140px;
  object-fit:contain;
}

.password-box input{
  width:100%;
  padding:12px;
  margin:15px 0 10px;
  border:1px solid #aaa;
  border-radius:5px;
  text-align:center;
  font-size:17px;
}

.password-box button{width:100%}

.error-message{
  min-height:23px;
  margin-top:10px;
  color:#a33b3b;
  font-weight:600;
}

@media(max-width:760px){
  .site-header{padding:12px 14px}
  .logo{width:105px;height:62px}
  .site-header h1{font-size:19px}
  .main-nav{flex-wrap:wrap}
  .main-nav a{padding:8px 11px;font-size:13px}
  .page-container{width:calc(100% - 14px)}
  th,td{font-size:12px;padding:6px}
}