/**
 * Global Member Directory — Public base styles.
 *
 * Frontend design system. Everything else extends this file.
 * Uses CSS custom properties emitted by GMD_Organization.
 *
 * @package GlobalMemberDirectory
 */

/* =========================================================================
 * 1. TOKENS
 * ====================================================================== */

.gmd-directory,
.gmd-profile,
.gmd-registration,
.gmd-relation,
.gmd-organization,
.gmd-member-card,
.gmd-modal-overlay,
.gmd-filter-bar,
.gmd-members {
    --gmd-primary:      #1e3a8a;
    --gmd-primary-rgb:  30, 58, 138;
    --gmd-secondary:    #17306d;
    --gmd-accent:       #5a78c8;
    --gmd-text:         #111827;
    --gmd-text-muted:   #6b7280;
    --gmd-bg:           #ffffff;
    --gmd-bg-alt:       #f9fafb;
    --gmd-border:       #e5e7eb;
    --gmd-border-strong:#d1d5db;
    --gmd-success:      #00a32a;
    --gmd-warning:      #dba617;
    --gmd-danger:       #d63638;
    --gmd-info:         #2271b1;
    --gmd-radius:       8px;
    --gmd-radius-lg:    14px;
    --gmd-shadow:       0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    --gmd-shadow-lg:    0 12px 32px rgba(0,0,0,.1);
    --gmd-gap:          24px;
    --gmd-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, sans-serif;
}

.gmd-directory *,
.gmd-profile *,
.gmd-registration *,
.gmd-relation *,
.gmd-organization *,
.gmd-member-card *,
.gmd-filter-bar *,
.gmd-members * {
    box-sizing: border-box;
}

.gmd-directory,
.gmd-profile,
.gmd-registration,
.gmd-relation,
.gmd-organization {
    font-family: var(--gmd-font);
    color: var(--gmd-text);
    font-size: 15px;
    line-height: 1.55;
}

/* =========================================================================
 * 2. LAYOUT PRIMITIVES
 * ====================================================================== */

.gmd-grid {
    display: grid;
    gap: 16px;
}

.gmd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gmd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gmd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 782px) {
    .gmd-grid--3,
    .gmd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .gmd-grid--2,
    .gmd-grid--3,
    .gmd-grid--4 { grid-template-columns: 1fr; }
}

/* =========================================================================
 * 3. BUTTONS
 * ====================================================================== */

.gmd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--gmd-radius);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    background: var(--gmd-bg-alt);
    color: var(--gmd-text);
    border-color: var(--gmd-border);
    white-space: nowrap;
}

.gmd-btn:hover,
.gmd-btn:focus {
    background: #eef0f1;
    border-color: var(--gmd-border-strong);
    outline: none;
}

.gmd-btn:active { transform: translateY(1px); }

.gmd-btn--primary {
    background: var(--gmd-primary);
    color: #fff;
    border-color: var(--gmd-primary);
}

.gmd-btn--primary:hover,
.gmd-btn--primary:focus {
    background: var(--gmd-secondary);
    border-color: var(--gmd-secondary);
    color: #fff;
}

.gmd-btn--ghost {
    background: transparent;
    color: var(--gmd-primary);
    border-color: var(--gmd-border-strong);
}

.gmd-btn--ghost:hover,
.gmd-btn--ghost:focus {
    background: rgba(var(--gmd-primary-rgb), .06);
    border-color: var(--gmd-primary);
    color: var(--gmd-primary);
}

.gmd-btn--danger {
    background: var(--gmd-danger);
    color: #fff;
    border-color: var(--gmd-danger);
}

.gmd-btn--danger:hover,
.gmd-btn--danger:focus {
    background: #b32d2e;
    border-color: #b32d2e;
    color: #fff;
}

.gmd-btn--sm { padding: 6px 12px; font-size: 13px; }
.gmd-btn--lg { padding: 12px 24px; font-size: 15px; }

.gmd-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

.gmd-btn[disabled],
.gmd-btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================================
 * 4. CARDS
 * ====================================================================== */

.gmd-card {
    background: var(--gmd-bg);
    border: 1px solid var(--gmd-border);
    border-radius: var(--gmd-radius-lg);
    box-shadow: var(--gmd-shadow);
    overflow: hidden;
}

.gmd-card__header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--gmd-border);
}

.gmd-card__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--gmd-text);
}

.gmd-card__action {
    font-size: 13px;
    color: var(--gmd-primary);
    text-decoration: none;
}

.gmd-card__action:hover { text-decoration: underline; }

/* =========================================================================
 * 5. BADGES
 * ====================================================================== */

.gmd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    background: var(--gmd-bg-alt);
    color: var(--gmd-text-muted);
    border: 1px solid var(--gmd-border);
    white-space: nowrap;
    vertical-align: middle;
}

.gmd-badge--info      { background: rgba(34,113,177,.1); color: #1a527a; border-color: rgba(34,113,177,.25); }
.gmd-badge--success   { background: rgba(0,163,42,.1);   color: #007017; border-color: rgba(0,163,42,.25); }
.gmd-badge--warning   { background: rgba(219,166,23,.12); color: #8a6512; border-color: rgba(219,166,23,.3); }
.gmd-badge--danger    { background: rgba(214,54,56,.1);   color: #a02223; border-color: rgba(214,54,56,.25); }
.gmd-badge--muted     { background: var(--gmd-bg-alt);    color: var(--gmd-text-muted); }

.gmd-badge--forum     { background: rgba(var(--gmd-primary-rgb), .1); color: var(--gmd-primary); border-color: rgba(var(--gmd-primary-rgb), .25); }
.gmd-badge--committee { background: rgba(139,92,246,.12); color: #6d28d9; border-color: rgba(139,92,246,.3); }

/* =========================================================================
 * 6. FLAGS
 * ====================================================================== */

.gmd-flag {
    display: inline-block;
    height: 14px;
    width: auto;
    vertical-align: -2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

.gmd-flag--lg {
    height: 20px;
    vertical-align: -4px;
}

/* =========================================================================
 * 7. FORM CONTROLS
 * ====================================================================== */

.gmd-field {
    margin-bottom: 18px;
}

.gmd-field-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--gmd-text);
}

.gmd-field--full { grid-column: 1 / -1; }

.gmd-required {
    color: var(--gmd-danger);
    margin-left: 3px;
}

.gmd-optional {
    color: var(--gmd-text-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 6px;
}

.gmd-field-help {
    display: block;
    color: var(--gmd-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 6px;
}

.gmd-input,
.gmd-select,
.gmd-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--gmd-border-strong);
    border-radius: var(--gmd-radius);
    background: var(--gmd-bg);
    color: var(--gmd-text);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.gmd-input:focus,
.gmd-select:focus,
.gmd-textarea:focus {
    outline: none;
    border-color: var(--gmd-primary);
    box-shadow: 0 0 0 3px rgba(var(--gmd-primary-rgb), .16);
}

.gmd-input.is-error,
.gmd-select.is-error,
.gmd-textarea.is-error {
    border-color: var(--gmd-danger);
    box-shadow: 0 0 0 3px rgba(214,54,56,.16);
}

.gmd-textarea {
    min-height: 100px;
    resize: vertical;
}

.gmd-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* =========================================================================
 * 8. EMPTY STATES
 * ====================================================================== */

.gmd-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--gmd-bg-alt);
    border: 1px dashed var(--gmd-border-strong);
    border-radius: var(--gmd-radius-lg);
    color: var(--gmd-text-muted);
}

.gmd-empty .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--gmd-primary);
    opacity: .5;
    margin: 0 auto 12px;
    display: block;
}

.gmd-empty strong {
    display: block;
    color: var(--gmd-text);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.gmd-empty p { margin: 0; font-size: 14px; }

.gmd-empty--sm { padding: 28px 18px; }

/* =========================================================================
 * 9. NOTICES
 * ====================================================================== */

.gmd-notice {
    padding: 16px 20px;
    border-radius: var(--gmd-radius-lg);
    margin-bottom: 20px;
    border-left: 4px solid var(--gmd-info);
    background: rgba(34,113,177,.06);
    color: var(--gmd-text);
}

.gmd-notice strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.gmd-notice p { margin: 6px 0 0; }

.gmd-notice--warning {
    border-left-color: var(--gmd-warning);
    background: rgba(219,166,23,.08);
}

.gmd-notice--error,
.gmd-notice--danger {
    border-left-color: var(--gmd-danger);
    background: rgba(214,54,56,.06);
}

.gmd-notice--success {
    border-left-color: var(--gmd-success);
    background: rgba(0,163,42,.06);
}

/* =========================================================================
 * 10. TOASTS
 * ====================================================================== */

#gmd-toasts-frontend {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
    pointer-events: none;
}

.gmd-toast {
    pointer-events: auto;
    padding: 12px 16px;
    background: #1d2327;
    color: #fff;
    border-radius: var(--gmd-radius);
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    animation: gmd-toast-in .2s ease-out;
}

.gmd-toast--success { background: var(--gmd-success); }
.gmd-toast--error   { background: var(--gmd-danger); }
.gmd-toast--warning { background: var(--gmd-warning); color: #1d2327; }

.gmd-toast.is-leaving {
    animation: gmd-toast-out .2s ease-in forwards;
}

@keyframes gmd-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes gmd-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}

/* =========================================================================
 * 11. SPINNER
 * ====================================================================== */

.gmd-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gmd-spin .7s linear infinite;
    vertical-align: -3px;
}

@keyframes gmd-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================================
 * 12. UTILITIES
 * ====================================================================== */

.gmd-text-muted   { color: var(--gmd-text-muted); }
.gmd-text-sm      { font-size: 13px; }
.gmd-text-xs      { font-size: 12px; }
.gmd-nowrap       { white-space: nowrap; }
.gmd-hidden       { display: none !important; }
.gmd-mt-0  { margin-top: 0 !important; }
.gmd-mt-8  { margin-top: 8px !important; }
.gmd-mt-16 { margin-top: 16px !important; }
.gmd-mb-0  { margin-bottom: 0 !important; }
.gmd-mb-8  { margin-bottom: 8px !important; }
.gmd-mb-16 { margin-bottom: 16px !important; }

/* =========================================================================
 * 13. SCREEN READER ONLY
 * ====================================================================== */

.gmd-sr-only,
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}