/* assets/app-milli.css — tuned for Milligram + Roboto + black icons */

/* Typography: force Roboto stack app-wide */
html, body, button, input, select, textarea {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #0f172a;
}

/* Layout */
.app-shell{ display:flex; min-height:100vh; }
.side{ width:260px; border-right:1px solid #e6e8eb; padding:1rem; background:#fff; position:sticky; top:0; height:100vh; overflow:auto; }
.brand{ font-weight:700; font-size:1.05rem; margin-bottom:.5rem; }
.content{ flex:1; padding:1rem; }

/* Menu */
.menu{ display:flex; flex-direction:column; gap:.25rem; }
.menu a{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:.6rem;
  color:#111827; border:1px solid transparent; text-decoration:none;
}
.menu a:hover{ background:#f6f7f9; text-decoration:none; }
.menu a.active{ background:#eef2ff; border-color:#c7d2fe; }
.menu .section{
  margin:.9rem .4rem .3rem; font-size:.72rem; color:#64748b; letter-spacing:.02em; text-transform:uppercase;
}
.ico{
  font-size:1.05rem; line-height:1; color:#111827; width:1.2rem; display:inline-flex; align-items:center; justify-content:center;
}
.menu a span{ line-height:1; }

/* Cards */
.card{ background:#fff; border:1px solid #e6e8eb; border-radius:.8rem; padding:1rem; margin-bottom:1rem; }

/* Grid helpers */
.row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.col{ flex:1 1 260px; min-width:240px; }

/* Tables */
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid #e6e8eb; padding:.55rem .6rem; text-align:left; vertical-align:middle; }
th{ font-size:.78rem; color:#475569; letter-spacing:.02em; text-transform:uppercase; }
tbody tr:hover{ background:#fafafa; }

/* Buttons (compact) */
button.button, button, .button{ padding:.4rem .7rem; line-height:1.2; }
.button-outline{ background:#fff; border:1px solid #e6e8eb; }

/* Forms */
label{font-size:.8rem; color:#374151}
input, select, textarea{ margin-bottom:.5rem; font-size:.95rem; }
input[type="date"]{ line-height:1.2; }

/* DEV borders */
.dev-borders .card,.dev-borders .row,.dev-borders .col,.dev-borders table,
.dev-borders th,.dev-borders td,.dev-borders input,.dev-borders select,
.dev-borders textarea,.dev-borders button,.dev-borders .menu a,.dev-borders .content {
  outline:1px dashed #60a5fa; outline-offset:2px;
}