/* assets/css/staff.css */

/* =========================================
   1. LAYOUT ENGINE (CSS GRID FIX)
   ========================================= */
#labs {
    /* This overrides Semantic UI's float/flex system with a strict Grid */
    display: grid !important; 
    grid-template-columns: 1fr 1fr; /* Exactly 2 columns */
    gap: 2em; /* Space between the cards */
    
    margin: 2em auto !important; 
    padding: 0 15px;
    max-width: 1200px;
}

/* Force the cards to fill their grid cells completely */
#labs .ui.card {
    width: 100% !important;
    margin: 0 !important;
    height: 100%;
}

/* MOBILE: Switch to 1 column on small screens */
@media only screen and (max-width: 768px) {
    #labs {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   2. INTERNAL CARD STYLING
   ========================================= */

.ui.card .content {
    height: auto;
}

.ui.card table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}

.ui.card td {
    vertical-align: top;
    padding: 5px;
}

[data-tooltip] {
    cursor: help;
    font-size: 1.2em;
    margin-right: 5px;
}

/* =========================================
   3. DARK MODE OVERRIDES
   ========================================= */

/* Page Background Fix */
html[data-theme-mode="dark"],
html[data-theme-mode="dark"] body,
html[data-theme-mode="dark"] #primer-spec-app-container {
    background-color: #0d1117 !important; 
    color: #c9d1d9 !important;             
}

/* Resize handle fix */
html[data-theme-mode="dark"] .primer-spec-sidebar-resize-handle {
    background-color: #30363d !important;
    border-color: #30363d !important;
}

/* Card Background Fix */
html[data-theme-mode="dark"] #labs .ui.card {
    background-color: #161b22 !important; 
    border: 1px solid #30363d !important; 
    box-shadow: none !important;
}

/* Text & Internal Elements Fix */
html[data-theme-mode="dark"] #labs .ui.card > .content,
html[data-theme-mode="dark"] #labs .ui.card .header,
html[data-theme-mode="dark"] #labs .ui.card .meta,
html[data-theme-mode="dark"] #labs .ui.card .description,
html[data-theme-mode="dark"] #labs .ui.card .summary,
html[data-theme-mode="dark"] #labs .ui.card table,
html[data-theme-mode="dark"] #labs .ui.card tr,
html[data-theme-mode="dark"] #labs .ui.card td {
    background-color: transparent !important;
    color: #c9d1d9 !important;
}

/* Icon Fix */
html[data-theme-mode="dark"] #labs .ui.card .icon {
    color: #8b949e !important;
}

/* assets/staff.css */
.popup-trigger {
    cursor: help; 
    margin-right: 5px; /* Keeps a little space between icons */
}