/* ===========================================================================
   lab/tables.css — the list/grid + its toolbar. Two styles.
   You said you'll usually use .list.light even on a dark page, so both skins
   are here and you pick per-block: <table class="list light"> anywhere.
   =========================================================================== */

/* ---- toolbar (sits above a list) ----------------------------------------- */
.toolbar              { display: flex; gap: 10px; align-items: center;
                        margin-bottom: 12px; flex-wrap: wrap; }

/* search box — a text field, so WHITE + black text (FIXED), both styles ----- */
.toolbar .search      { background: #ffffff; color: #1a1a1a; font-weight: 500;
                        height: 32px; padding: 0 10px; border-radius: 6px;
                        border: 1px solid #999999;
                        box-shadow: inset 0 0 5px rgba(0,0,0,0.16);
                        font-family: inherit; font-size: 14px; outline: none;
                        min-width: 200px; }

/* =========================================================================
   (B) STANDALONE / TOOLBAR SELECT — FOLLOWS the style colours.
       Dark grey on a dark page, white on a light page. Custom arrow per style.
   ========================================================================= */
.select               { height: 32px; padding: 0 30px 0 10px; border-radius: 6px;
                        font-family: inherit; font-size: 14px; font-weight: 500;
                        outline: none; cursor: pointer;
                        appearance: none; -webkit-appearance: none;
                        background-repeat: no-repeat;
                        background-position: right 10px center; }
.select.dark          { background-color: #3a3a3a; color: #e0e0e0; border: 1px solid #555;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cfcfcf' stroke-width='1.5'/%3E%3C/svg%3E"); }
.select.light         { background-color: #ffffff; color: #1a1a1a; border: 1px solid #aaaaaa;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E"); }

/* ---- the list table ------------------------------------------------------ */
.list                 { width: 100%; border-collapse: collapse;
                        border-radius: 8px; overflow: hidden; font-size: 14px; }
.list th, .list td    { text-align: left; padding: 9px 12px; }
.list th              { font-weight: 600; font-size: 12px; text-transform: uppercase;
                        letter-spacing: .4px; }
.list td .btn         { height: 26px; min-width: 56px; font-size: 12px; }

/* ---- DARK grid ----------------------------------------------------------- */
.list.dark            { background: #2e2e2e; color: #e0e0e0; }
.list.dark th         { background: #383838; color: #cfcfcf; border-bottom: 1px solid #5e5e5e; }
.list.dark td         { border-bottom: 1px solid #4d4d4d; }   /* lighter = more contrast on dark */
.list.dark tr:hover td{ background: #343434; }

/* ---- LIGHT grid ---------------------------------------------------------- */
.list.light           { background: #ffffff; color: #2a2a2a; border: 1px solid #cfcfcf; }
.list.light th        { background: #ececec; color: #444444; border-bottom: 1px solid #9e9e9e; }
.list.light td        { border-bottom: 1px solid #bcbcbc; }
.list.light tr:hover td{ background: #f4f4f4; }

/* ---- semantic status text (themed for legibility) ------------------------ */
.list.dark  .ok { color: #5fd06a; } .list.dark  .warn { color: #ffb454; } .list.dark  .bad { color: #ff5a5a; }
.list.light .ok { color: #2f8a36; } .list.light .warn { color: #b9700b; } .list.light .bad { color: #c62f2f; }