/* components.css — buttons, forms, tables, badges, cards, notices */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font:inherit; font-weight:700;
  line-height:1; cursor:pointer; user-select:none; padding:.62rem 1.1rem; border-radius:var(--radius);
  border:1px solid transparent; background:var(--color-surface-2); color:var(--color-heading);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);}
.btn:hover{text-decoration:none; box-shadow:var(--shadow);} .btn:active{transform:translateY(1px);}
.btn--primary{background:var(--color-primary); color:var(--color-on-primary);}
.btn--primary:hover{background:var(--color-primary-hover);}
.btn--subtle{background:transparent; border-color:var(--color-border); color:var(--color-heading);}
.btn--subtle:hover{background:var(--color-surface-2);}
.btn--danger{background:var(--btn-danger-bg); color:var(--btn-danger-fg);}
.btn--sm{padding:.38rem .7rem; font-size:.9rem;}
.field{position:relative; margin-bottom:1rem;}
.field__label{display:block; font-weight:600; color:var(--color-heading); margin-bottom:.3rem; font-size:.95rem;}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=password],input[type=tel],select,textarea{
  width:100%; font:inherit; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:.55rem .7rem; transition:border-color var(--t-fast), box-shadow var(--t-fast);}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--focus-ring);}
textarea{min-height:5rem; resize:vertical;}
.check{display:flex; align-items:center; gap:.5rem; font-weight:500;} .check input{width:auto;}
.form-grid{display:grid; grid-template-columns:1fr; gap:0 1.25rem;}
@media (min-width:720px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.form-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem;}
fieldset{border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1rem 1.1rem; margin:0 0 1.25rem; background:var(--color-surface);}
legend{font-weight:700; color:var(--color-heading); padding:0 .4rem;}
.table-wrap{overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow);}
.table{width:100%; border-collapse:collapse; font-size:.94rem;}
.table th,.table td{padding:.55rem .7rem; text-align:left; border-bottom:1px solid var(--color-border); white-space:nowrap;}
.table thead th{position:sticky; top:0; background:var(--color-surface-2); color:var(--color-heading); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;}
.table tbody tr:nth-child(even){background:var(--color-surface-2);}
.table td.num,.table th.num{text-align:right; font-variant-numeric:tabular-nums;}
.table--sticky th:first-child,.table--sticky td:first-child{position:sticky; left:0; background:var(--color-surface); box-shadow:1px 0 0 var(--color-border);}
.table--sticky tbody tr:nth-child(even) td:first-child{background:var(--color-surface-2);}
.badge{display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:999px; font-size:.78rem; font-weight:700; line-height:1.6; background:var(--color-surface-2); color:var(--color-muted);}
.badge--draft{background:var(--color-surface-2); color:var(--color-muted);}
.badge--final,.badge--submitted{background:var(--info-bg); color:var(--info);}
.badge--approved{background:var(--ok-bg); color:var(--ok);}
.badge--rejected{background:var(--danger-bg); color:var(--danger);}
.badge--flagged{background:var(--warn-bg); color:var(--warn);}
.card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.25rem;}
.notice{border:1px solid var(--color-border); border-left-width:4px; border-radius:var(--radius); padding:.7rem .9rem; margin-bottom:1rem; background:var(--color-surface);}
.notice--error{border-left-color:var(--danger); background:var(--danger-bg); color:var(--danger);}
.notice--ok{border-left-color:var(--ok); background:var(--ok-bg); color:var(--ok);}
.notice--info{border-left-color:var(--info); background:var(--info-bg); color:var(--info);}