/* /assets/app.css (TAM DOSYA) */
:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;
  --gap:12px;
  --radius:12px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin: 10px 0 12px 0;
}
.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.nav a{
  display:inline-block;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius: var(--radius);
  text-decoration:none;
  color:var(--text);
  background:#fff;
}
.btn{
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius: var(--radius);
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  display:inline-block;
}
.btn-primary{ border-color:#111; }
.title{
  margin:0;
  font-size:22px;
  font-weight:800;
}
.meta{
  color:var(--muted);
  font-size:13px;
  margin:8px 0 0 0;
}
.msg-ok{
  padding:10px;
  background:#e9ffe9;
  border:1px solid #b7f0b7;
  border-radius: var(--radius);
  margin:12px 0;
}
.msg-err{
  padding:10px;
  background:#ffe9e9;
  border:1px solid #f0b7b7;
  border-radius: var(--radius);
  margin:12px 0;
}
.notice{
  border:1px solid #f0c36d;
  background:#fff7e6;
  padding:10px;
  border-radius: var(--radius);
  margin:12px 0;
}
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.full{ grid-column: 1 / -1; }
label{
  font-weight:700;
  font-size:13px;
}
input, select, textarea{
  width:100%;
  padding:10px;
  border:1px solid #d7d7d7;
  border-radius: var(--radius);
  font-size:14px;
  background:#fff;
}
textarea{
  min-height: 160px;
  resize: vertical;
}
.actions{
  display:flex;
  justify-content:flex-end;
  gap: var(--gap);
  margin-top: 12px;
}
.badge{
  display:inline-block;
  border:1px solid #ddd;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  margin-left:6px;
  color:#444;
  background:#fff;
}
.hint{
  font-size:12px;
  color:var(--muted);
}
/* KPI cards */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap: var(--gap);
  margin-top: 12px;
}
.kpi-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.kpi-title{ margin:0 0 10px 0; font-weight:800; }
.kpi-count{ font-size:32px; font-weight:900; line-height:1; margin:0; }
.kpi-link{ display:inline-block; margin-top:8px; }

/* Tables (desktop) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width: 720px;
}
th,td{
  border-bottom:1px solid #eee;
  padding:10px;
  text-align:left;
  font-size:14px;
  vertical-align:top;
}
th{ font-weight:800; background:#fafafa; }
.small{ color:var(--muted); font-size:12px; }

/* Mobile cards (mobile) */
.cards{ display:none; }
.card-item{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
  background:#fff;
  margin-bottom:10px;
}
.card-item h4{ margin:0 0 8px 0; font-size:15px; font-weight:800; }
.card-item .kv{ margin:4px 0; font-size:13px; color:var(--muted); }
.card-item .kv b{ color:var(--text); }
.card-item .actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  justify-content:flex-start;
  flex-wrap:wrap;
}

@media (max-width: 720px){
  .container{ padding:10px; }
  .grid{ grid-template-columns: 1fr; }
  .actions{ justify-content:stretch; }
  .btn, .btn-primary{ width:100%; text-align:center; }
  textarea{ min-height: 180px; }
  .table-wrap{ display:none; }
  .cards{ display:block; }
}