/* ==========================================================
   EVM (External Video Manager) Public Styles
   - Scoped to .evm wrapper so we don't affect the NIH theme
   ========================================================== */

/* ---------- Layout container ---------- */
/* Centers EVM content, limits width, adds side padding */
.evm{
    max-width:900px;
    margin:20px auto;
    padding:0 12px;
}

/* Card container used across pages (login, upload, browse, detail) */
.evm-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:18px;
}

/* Muted helper text (subtle instructions, metadata, timestamps) */
.evm-muted{
    opacity:.7;
    font-size:.95em;
}

/* ---------- Alerts (success/error messages) ---------- */
/* Generic alert box */
.evm-alert{
    padding:10px 12px;
    border-radius:10px;
    margin:10px 0;
}

/* Error styling */
.evm-alert.evm-error{
    background:#ffe8e8;
    border:1px solid #ffb7b7;
}

/* Success styling */
.evm-alert.evm-success{
    background:#e8ffef;
    border:1px solid #b7ffd0;
}

/* Utility: hide elements (used for alerts + reply boxes) */
.evm-hidden{
    display:none;
}

/* ---------- Forms / inputs ---------- */
/* Make EVM form fields behave consistently under the NIH theme */
.evm .evm-form input[type="text"],
.evm .evm-form input[type="email"],
.evm .evm-form input[type="password"],
.evm .evm-form textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

/* Optional: keep file input from stretching weirdly in some themes */
.evm .evm-form input[type="file"]{
    max-width:100%;
}

/* Two-column field rows (Name / Email) */
.evm-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

/* Mobile: stack two-column fields */
@media (max-width:640px){
    .evm-two{
        grid-template-columns:1fr;
    }
}

/* ---------- Browse grid (public videos listing) ---------- */
/* Responsive grid for video tiles */
.evm-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:12px;
    margin-top:12px;
}

/* Individual video tile */
.evm-tile{
    border:1px solid #eee;
    border-radius:12px;
    padding:12px;
}

/* Video title in tile */
.evm-tile-title{
    font-weight:700;
    margin-bottom:4px;
}

/* Date/metadata line in tile */
.evm-tile-meta{
    opacity:.7;
    font-size:.9em;
    margin-bottom:8px;
}

/* Pagination area */
.evm-pagination{
    margin-top:14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* Pagination links */
.evm-page-link,
.evm-page-current{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #ddd;
    text-decoration:none;
}

/* Current page indicator */
.evm-page-current{
    font-weight:700;
}

/* ---------- Comments (detail page) ---------- */
/* Reset list styles + spacing for threaded comments */
.evm-comment-level{
    list-style:none;
    margin:10px 0 0 0;
    padding-left:0;
}

/* Individual comment box */
.evm-comment{
    border:1px solid #eee;
    border-radius:12px;
    padding:10px;
    margin-top:10px;
}

/* Indentation for nested replies */
.evm-depth-1 .evm-comment{ margin-left:18px; }
.evm-depth-2 .evm-comment{ margin-left:36px; }
.evm-depth-3 .evm-comment{ margin-left:54px; }

/* Reply link row */
.evm-comment-actions{
    margin-top:6px;
}

/* Reply form container under a comment */
.evm-reply-box{
    margin-top:10px;
}

/* ---------- Tables (My Videos list) ---------- */
/* Improve table readability without fighting theme too hard */
.evm table.widefat{
    margin-top:8px;
}

/* ==========================================================
   Button Overrides (EVM-only)
   - NIH theme buttons are dark blue; we want light gray here
   - Scoped under .evm so this does NOT affect global theme UI
   ========================================================== */

/* Base EVM buttons (anchors and button elements) */
.evm .button,
.evm a.button{
    background:#f2f2f2;
    color:#333;
    border:1px solid #ccc;
    box-shadow:none;
    text-shadow:none;
}

/* Primary buttons (Upload, Submit for review, Log in, etc.) */
.evm .button-primary{
    background:#e6e6e6;
    color:#222;
    border:1px solid #bbb;
}

/* Small buttons (View, Back to Browse, Reply, etc.) */
.evm .button-small{
    background:#f5f5f5;
    color:#333;
    border:1px solid #ccc;
}

/* Hover/focus states (keep it subtle) */
.evm .button:hover,
.evm .button-primary:hover,
.evm a.button:hover{
    background:#dcdcdc;
    color:#111;
    border-color:#aaa;
}

/* Disabled buttons */
.evm .button:disabled,
.evm .button-primary:disabled{
    background:#eee;
    color:#888;
    border-color:#ddd;
}