/* Persian look for the operator panel. The font is served from our own static files (OFL-1.1). */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-family-primary: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
}

html, body, input, select, textarea, button, .button {
  font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
}

.bb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.bb-card { border: 1px solid var(--hairline-color); border-radius: 8px; padding: 14px 16px; background: var(--body-bg); }
.bb-card h2 { margin: 0 0 10px; font-size: 1rem; background: none; color: var(--body-fg); padding: 0; }
.bb-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.bb-card dt { color: var(--body-quiet-color); }
.bb-card dd { margin: 0; font-weight: 500; }

.bb-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; }
.bb-steps li { list-style: none; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hairline-color); color: var(--body-quiet-color); font-size: .85rem; }
.bb-steps li.done { background: var(--darkened-bg); color: var(--body-fg); }
.bb-steps li.current { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 700; }

.bb-action { border: 2px solid var(--primary); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.bb-action h2 { margin: 0 0 12px; font-size: 1.05rem; background: none; color: var(--body-fg); padding: 0; }
.bb-action form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 10px; }
.bb-action label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.bb-action input[type="text"], .bb-action input[type="number"], .bb-action select, .bb-action textarea { min-width: 220px; }
.bb-hint { color: var(--body-quiet-color); margin: 0 0 12px; }
.bb-danger { border-color: var(--error-fg); }
.bb-danger input[type="submit"] { background: var(--error-fg); }
.bb-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.bb-filter label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }