/* members-directory/public/css/md-public.css */

:root {
    --mdp-primary:  #5E0936;
    --mdp-accent:   #e8a020;
    --mdp-bg:       #FFFFED;
    --mdp-card:     #ffffff;
    --mdp-border:   #dde3ed;
    --mdp-text:     #490628;
    --mdp-muted:    #6c7a8d;
    --mdp-radius:   8px;
    --mdp-shadow:   0 2px 12px rgba(94,9,54,.10);
}

.md-directory-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mdp-text);
    font-size: 14px;
}

/* ── Filter bar ──────────────────────────────────────────────────── */
.md-filters {
    background: var(--mdp-card);
    border: 1px solid var(--mdp-border);
    border-radius: var(--mdp-radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.md-filters select,
.md-filters input[type="search"] {
    height: 36px;
    padding: 0 11px;
    border: 1.5px solid var(--mdp-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--mdp-text);
    background: var(--mdp-bg);
    outline: none;
    transition: border-color .15s;
    min-width: 130px;
}
.md-filters select:focus,
.md-filters input[type="search"]:focus { border-color: var(--mdp-primary); background: #fff; }
.md-filter-search { flex: 1; min-width: 120px; border-left: none !important; }

.md-filter-submit-btn {
    height: 36px;
    padding: 0 16px;
    background: var(--mdp-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s;
}
.md-filter-submit-btn:hover { filter: brightness(.88); }

.md-filter-clear-btn {
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1.5px solid var(--mdp-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mdp-muted);
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.md-filter-clear-btn:hover { border-color: var(--mdp-primary); color: var(--mdp-primary); }

/* ── Status bar ──────────────────────────────────────────────────── */
.md-filter-status-bar {
    font-size: 12px;
    color: var(--mdp-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.md-pager-info { color: var(--mdp-muted); }

/* ── Table wrapper ───────────────────────────────────────────────── */
.md-tbl-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--mdp-radius);
    box-shadow: var(--mdp-shadow);
    border: 1px solid var(--mdp-border);
    background: var(--mdp-card);
}

/* ── Table ───────────────────────────────────────────────────────── */
.md-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}

/* Header */
.md-tbl thead tr {
    background: var(--mdp-primary);
}
.md-tbl thead th {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    padding: 12px 14px;
    white-space: nowrap;
    text-align: left;
    border-right: 1px solid rgba(255,255,255,.12);
}
.md-tbl thead th:last-child { border-right: none; }

/* Cells */
.md-tbl tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mdp-border);
    border-right: 1px solid var(--mdp-border);
    vertical-align: middle;
    color: var(--mdp-text);
}
.md-tbl tbody td:last-child { border-right: none; }
.md-tbl tbody tr:last-child td { border-bottom: none; }
.md-tbl tbody tr:hover { background: #fdf6f9; }

/* ── Column widths ───────────────────────────────────────────────── */
.md-th-serial, .md-tc-serial { width: 42px; text-align: center; font-weight: 700; color: var(--mdp-primary); }
.md-th-mid, .md-tc-mid { min-width: 80px; font-size: 13px; font-weight: bold; font-family: monospace; color: var(--mdp-muted); }
.md-th-sal, .md-tc-sal { width: 46px; font-size: 13px; font-weight: bold; color: var(--mdp-muted); white-space: nowrap; }
.md-th-name,   .md-tc-name   { min-width: 160px; }
.md-th-post,   .md-tc-post   { min-width: 140px; }
.md-th-addr,   .md-tc-addr-icon { width: 60px; text-align: center; }
.md-th-city,   .md-tc-city   { min-width: 90px; }
.md-th-state,  .md-tc-state  { min-width: 80px; }
.md-th-pin,    .md-tc-pin    { width: 70px; font-family: monospace; font-size: 12px; }
.md-th-phone,  .md-tc-phone  { min-width: 120px; }

/* ── Row accents by level ────────────────────────────────────────── */
.md-row-desig                   { border-left: 4px solid transparent; }
.md-row-desig[data-level="0"]   { border-left-color: #5E0936; background: #fdf8fa; }
.md-row-desig[data-level="1"]   { border-left-color: #8B1A4A; }
.md-row-desig[data-level="2"]   { border-left-color: #C45080; }
.md-row-plain                   { border-left: 4px solid transparent; }

/* ── Name ────────────────────────────────────────────────────────── */
.md-tbl-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--mdp-text);
    display: block;
}

/* ── Designation / Post ──────────────────────────────────────────── */
.md-tbl-desig {
    font-size: 13px;    
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    display: block;
}
.md-desig-current  { color: var(--mdp-accent); }
.md-desig-past     { color: var(--mdp-muted); }
.md-desig-expelled { color: #c0392b; }

.md-no-val { color: var(--mdp-border); font-size: 13px; }

/* ── Address info button ─────────────────────────────────────────── */
.md-addr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--mdp-border);
    background: var(--mdp-bg);
    color: var(--mdp-primary);
    cursor: pointer;
    transition: all .15s;
    padding: 0;
}
.md-addr-btn:hover {
    background: var(--mdp-primary);
    border-color: var(--mdp-primary);
    color: #fff;
}

/* ── Address popup ───────────────────────────────────────────────── */
.md-addr-popup {
    display: none;
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    min-width: 180px;
}
.md-addr-popup.is-open { display: block; }
.md-addr-popup-inner {
    background: #fff;
    border: 1px solid var(--mdp-border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 14px 16px 12px;
    position: relative;
}
/* Small triangle arrow */
.md-addr-popup-inner::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid var(--mdp-border);
    border-top: 1px solid var(--mdp-border);
    transform: rotate(45deg);
}
.md-addr-popup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--mdp-muted);
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}
.md-addr-popup-close:hover { color: var(--mdp-primary); }
.md-addr-popup-text {
    font-size: 13px;
    color: var(--mdp-text);
    line-height: 1.6;
    padding-right: 16px;
}

/* ── Phone link ──────────────────────────────────────────────────── */
.md-phone-link {
    color: var(--mdp-text);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}
.md-phone-link:hover { color: var(--mdp-primary); text-decoration: underline; }

/* ── Empty state ─────────────────────────────────────────────────── */
.md-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--mdp-muted);
}
.md-empty svg { margin-bottom: 16px; opacity: .35; }
.md-empty p   { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.md-empty span { font-size: 13px; }

/* ── Pagination ──────────────────────────────────────────────────── */
.md-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 4px 0 8px;
}
.md-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1.5px solid var(--mdp-border);
    background: var(--mdp-card);
    color: var(--mdp-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    line-height: 1;
    font-family: inherit;
}
.md-pager-btn:hover:not([aria-disabled="true"]) {
    background: var(--mdp-primary);
    border-color: var(--mdp-primary);
    color: #fff;
}
.md-pager-btn.active {
    background: var(--mdp-primary);
    border-color: var(--mdp-primary);
    color: #fff;
    cursor: default;
}
.md-pager-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.md-pager-ellipsis {
    display: inline-flex;
    align-items: center;
    height: 36px;
    color: var(--mdp-muted);
    font-size: 14px;
    padding: 0 4px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .md-th-state, .md-tc-state { display: none; }
}
@media (max-width: 540px) {
    .md-th-pin, .md-tc-pin { display: none; }
    .md-filters { flex-direction: column; }
    .md-filters select,
    .md-filters input[type="search"] { width: 100%; min-width: unset; }
}

/* ── Phone reveal ────────────────────────────────────────────────── */
.md-phone-reveal {
    display: block;
    font-family: monospace;
    font-size: 13px;
    color: var(--mdp-muted);
    cursor: pointer;
    border-bottom: 1px dashed var(--mdp-border);
    letter-spacing: .5px;
    user-select: none;
    white-space: nowrap;
    margin-bottom: 2px;
}
.md-phone-reveal:hover {
    color: var(--mdp-primary);
    border-bottom-color: var(--mdp-primary);
}
.md-phone-reveal[data-revealed="1"] {
    color: var(--mdp-text);
    border-bottom-style: solid;
    border-bottom-color: var(--mdp-primary);
}

/* Separate mobile and landline with a line break */
.md-phone-landline,
.md-phone-ll {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--mdp-muted);
    text-decoration: none;
    margin-top: 2px;
    font-family: monospace;
}
.md-phone-landline:hover { color: var(--mdp-primary); }

/* Each mobile span on its own line */
.md-phone-reveal {
    display: block;
    margin-bottom: 2px;
}

/* Column header hint text */
.md-th-hint {
    display: block;
    font-size: 9px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .75;
    margin-top: 2px;
}
.md-tbl * {font: size 14px!important; font-weight: 700!important;}