/* =============================================================================
   Obizworks-HR — Custom dropdown shared styles (cs-wrap / cs-trigger / cs-panel)
   -----------------------------------------------------------------------------
   Replaces native <select> with a dark-theme-friendly dropdown.
   Background: Chrome on Windows ignores CSS for the native <option> popup
   and renders white-on-white, making the dark UI unreadable. This pattern
   was originally shipped inline in admin_audit_log.php (F-3.1), then
   admin_users.php (Phase G), and now reused in recruiter_crr.php + jobs.php
   (Phase H-lite) — rule-of-three extraction.

   Pair with /assets/cs-dropdown.js for behavior.
   ============================================================================= */

.cs-wrap { position: relative; }

.cs-trigger {
    padding: 8px 32px 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 160px;
    text-align: left;
    cursor: pointer;
    position: relative;
    width: 100%;
}

/* In form contexts (larger forms), bump padding + radius + font size */
.form-row .cs-trigger {
    padding: 11px 32px 11px 14px;
    border-radius: 10px;
    font-size: 0.95rem;
    min-width: 100%;
}

.cs-trigger:after {
    content: "\25BE";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.cs-trigger:hover { border-color: rgba(255, 255, 255, 0.2); }
.cs-trigger:disabled { opacity: 0.5; cursor: not-allowed; }

.cs-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #0c0e16;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cs-option {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cs-option:last-child { border-bottom: none; }
.cs-option:hover { background: rgba(249, 115, 22, 0.16); color: var(--accent); }
.cs-option.selected { background: rgba(249, 115, 22, 0.08); color: var(--accent); }
.cs-option.placeholder { color: var(--text-muted); }
.cs-option .meta { color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }