/* asset/css/style.css */

/* Base */
:root{
  --app-bg:#f7f7fb;
  --card-bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
}

html, body{
  height: 100%;
}

body{
  background: var(--app-bg);
  color: var(--text);
}

/* Layout helpers */
.app-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px;
}

.app-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.app-muted{
  color: var(--muted);
}

/* Navbar (optional) */
.app-navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  text-decoration:none;
  color: var(--text);
}

.app-brand img{
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.app-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Forms */
.app-form label{
  font-weight: 600;
}

.app-form .form-text{
  color: var(--muted);
}

/* Utilities */
.app-divider{
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* Table tweaks */
.table thead th{
  white-space: nowrap;
}

/* Alerts auto-hide helper (see script.js) */
[data-autohide="true"]{
  transition: opacity .25s ease, transform .25s ease;
}
[data-autohide="true"].is-hiding{
  opacity: 0;
  transform: translateY(-6px);
}