/* Base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:22px}
.card{background:var(--card);border:1px solid var(--b);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 6px 20px rgba(2,6,23,.06)}

.brand{font-weight:900;display:flex;gap:10px;align-items:center}
.brand img{height:40px;border-radius:8px}

/* Form controls */
input,select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--b);background:#fff;color:var(--txt)}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,77,189,.18)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Flash messages */
.flash-ok{background:rgba(31,77,189,.10);color:#0b3aa2;padding:10px;border-radius:10px;border:1px solid rgba(31,77,189,.28)}
.flash-error{background:rgba(225,29,72,.10);color:#991b1b;padding:10px;border-radius:10px;border:1px solid rgba(225,29,72,.28)}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px}
.badge.new{background:rgba(31,77,189,.12);color:var(--blue)}
.badge.pushed{background:rgba(34,197,94,.12);color:#16a34a}
.badge.used{background:rgba(251,146,60,.12);color:#ea580c}
.badge.disabled{background:#e5e7eb;color:#6b7280}

/* Topbar jadi lebih simple (opsional, tetap pakai latar putih & aksen halus) */
.topbar{
  background:linear-gradient(90deg, rgba(31,77,189,.06), rgba(225,29,72,.06));
  border:1px solid var(--line, var(--b, #e5e7eb));
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow, 0 6px 20px rgba(2,6,23,.06));
}

.form-actions{ margin-top:14px; }

.table.t-center th,
.table.t-center td{
text-align: center !important;}