/**
 * E-Nurse Academy — LearnDash Groups Plus restyle ("Clinical Intelligence" blue theme)
 *
 * VISUAL ONLY. Nothing about the markup, classes, or JavaScript behaviour of
 * LearnDash Groups Plus is changed — this only re-skins and re-flows the
 * existing elements so the /school-group/ pages match the reference layout
 * (elabacademy.org/my-group): compact #0058be buttons that flow HORIZONTALLY
 * instead of stacking as big vertical blocks, a clean white table, and tidy
 * spacing.  All rules are scoped to `.groups_plus_container`.
 *
 * Note: the plugin wraps each action button in a block-level <p> (with <br>
 * inside), which is what forces the vertical stacking. We neutralise those
 * wrappers and lay the buttons out in flex rows.
 */

.groups_plus_container {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: #191c1e;
}

/* -------------------------------------------------------------------------
   Header / stats bar
   ------------------------------------------------------------------------- */
.groups_plus_container .groups_plus_admin_header,
.groups_plus_container .groups_plus_header {
    background: #ffffff;
    border: 1px solid #e0e3e5;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 9, 39, 0.04);
    gap: 16px;
}

.groups_plus_container .groups_plus_licenses,
.groups_plus_container .learndash-groups-plus-user-licenses {
    color: #45464e;
    font-size: 15px;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Buttons — elab-matched blue (#00a2e8), compact, lighter/smaller text
   so they flow inline and are easy on the eye.
   ------------------------------------------------------------------------- */
.groups_plus_container .btn_groups_plus,
.groups_plus_container a.btn_groups_plus,
.groups_plus_container input.btn_groups_plus,
.groups_plus_container button.btn_groups_plus,
.groups_plus_container .btn_groups_plus_black {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    background: #00a2e8 !important;
    color: #ffffff !important;
    border: 1px solid #00a2e8 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Kill the forced line-breaks the plugin puts inside the buttons */
.groups_plus_container .btn_groups_plus br {
    display: none !important;
}

.groups_plus_container .btn_groups_plus:hover,
.groups_plus_container a.btn_groups_plus:hover,
.groups_plus_container .btn_groups_plus_black:hover {
    background: #0090cf !important;
    border-color: #0090cf !important;
    color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   Button layout — neutralise the <p> wrappers so buttons flow in rows
   ------------------------------------------------------------------------- */

/* Wrappers inside flex rows: let the inner <a> become the flex item itself */
.groups_plus_container .manage-buttons p,
.groups_plus_container .text-right p,
.groups_plus_container .form-action p {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Drop the empty <p> the plugin inserts between buttons (it steals row space) */
.groups_plus_container .manage-buttons p:empty,
.groups_plus_container .text-right p:empty {
    display: none !important;
}

/* Manage Teams cell (organization view) — centered, 2-per-row.
   min-width widens the column enough for two buttons to sit together
   (matching the reference layout: Team Members + Team Leaders, then Courses). */
.groups_plus_container .manage-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    min-width: 250px;
    max-width: 300px;
    margin: 0 auto;
}

/* Team card actions (Add Team Member / Import List / Email Team) — inline row */
.groups_plus_container .text-right,
.groups_plus_container .form-action.text-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

/* -------------------------------------------------------------------------
   Data tables (teams, members, leaders)
   ------------------------------------------------------------------------- */
.groups_plus_container .groups_plus_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 8px 0 24px;
    background: #ffffff;
    border: 1px solid #e0e3e5;
    border-radius: 12px;
    overflow: hidden;
}

.groups_plus_container .groups_plus_table th {
    background: #f2f4f6;
    color: #45464e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    padding: 14px 20px;
    border-bottom: 1px solid #e0e3e5;
}

.groups_plus_container .groups_plus_table td {
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
    font-size: 15px;
    color: #191c1e;
}

.groups_plus_container .groups_plus_table tr:last-child td {
    border-bottom: none;
}

.groups_plus_container .groups_plus_table tbody tr:hover td,
.groups_plus_container .groups_plus_table tr:hover td {
    background: #f7f9fb;
}

/* Team name cell — tame the oversized bold heading (renders as an <h5>) */
.groups_plus_container .groups_plus_table td:first-child {
    font-size: 18px;
    font-weight: 600;
    color: #0f1a38;
}

.groups_plus_container .groups_plus_table td h1,
.groups_plus_container .groups_plus_table td h2,
.groups_plus_container .groups_plus_table td h3,
.groups_plus_container .groups_plus_table td h4,
.groups_plus_container .groups_plus_table td h5,
.groups_plus_container .groups_plus_table td h6 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #0f1a38 !important;
}

/* Numeric "Team Member Total" column — centered */
.groups_plus_container .groups_plus_table th:nth-child(2),
.groups_plus_container .groups_plus_table td:nth-child(2) {
    text-align: center;
    font-weight: 600;
    color: #0f1a38;
}

/* Action cell in member/leader tables (Edit / Change Password) — inline row.
   The <td> is kept as a table cell (so column widths stay correct); only the
   <p> wrappers are made inline so the buttons sit side by side. */
.groups_plus_container .groups_plus_table td:last-child {
    text-align: center;
}
.groups_plus_container .groups_plus_table td p {
    display: inline-flex !important;
    margin: 4px !important;
    padding: 0 !important;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   "Add New Team Member — Single Entry" modal
   The plugin lays First Name / Last Name / Username / Email in one row of
   .col.grid_1_of_4 columns, but its float grid drops First Name below the
   others. Force that row into a clean, top-aligned flex row so all four
   fields line up. (Scoped to .groups-plus-modal so it only touches this modal.)
   ------------------------------------------------------------------------- */
/* The plugin sets `.form-group { display:flex; flex-direction:column }`, which
   (with its float grid) is what drops First Name below the others. We must
   explicitly force this row back to a horizontal, top-aligned flex row. */
.groups-plus-modal .div-new-team-member > .form-group.section:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
}

.groups-plus-modal .div-new-team-member > .form-group.section:first-child > .col {
    flex: 1 1 180px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 160px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.groups-plus-modal .div-new-team-member input[type="text"],
.groups-plus-modal .div-new-team-member .form_password {
    width: 100% !important;
    box-sizing: border-box !important;
}