/* Make It Plant Based — Nutrition Table Styles
 * Loaded ONLY on pages using the shortcode
 */

.ndt-app {
    --green-dark:   #2d5a27;
    --green-mid:    #4a8c3f;
    --green-light:  #7aba6d;
    --green-pale:   #e8f5e3;
    --green-xpale:  #f4faf2;
    --ink:          #1c2b1a;
    --ink-light:    #6b8264;
    --border:       #cde0c5;
    --white:        #ffffff;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 2px 16px rgba(45,90,39,0.10);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

/* ── Controls panel ── */
.ndt-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    align-items: end;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}
.ndt-control-group { display: flex; flex-direction: column; gap: 6px; }
.ndt-control-group label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-light);
}
.ndt-control-group.ndt-full { grid-column: 1 / -1; }

/* ── Inputs & selects ── */
.ndt-select-wrap { position: relative; }
.ndt-select-wrap::after {
    content: '▼'; position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); color: var(--green-mid);
    pointer-events: none; font-size: 10px;
}
.ndt-app select,
.ndt-app input[type=text] {
    appearance: none; width: 100%; padding: 10px 40px 10px 14px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--green-xpale); font-family: inherit;
    font-size: 14px; color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s; outline: none; cursor: pointer;
}
.ndt-app input[type=text] { padding-right: 14px; }
.ndt-app select:focus, .ndt-app input:focus {
    border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(74,140,63,0.15);
}

/* ── Sort toggle ── */
.ndt-toggle {
    display: flex; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; background: var(--green-xpale);
}
.ndt-toggle-btn {
    flex: 1; padding: 10px 16px; background: transparent; border: none;
    cursor: pointer; font-family: inherit; font-size: 13px;
    font-weight: 500; color: var(--ink-light); transition: background 0.2s, color 0.2s;
}
.ndt-toggle-btn.active { background: var(--green-dark); color: var(--white); }
.ndt-toggle-btn:not(.active):hover { background: var(--green-pale); color: var(--ink); }

/* ── Active filters display ── */
.ndt-active-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px; padding-left: 2px;
}
.ndt-filter-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--green-pale); border: 1.5px solid var(--border);
    color: var(--green-dark); border-radius: 99px;
    padding: 4px 10px 4px 12px; font-size: 12px; font-weight: 500;
}
.ndt-filter-tag button {
    background: none; border: none; cursor: pointer;
    color: var(--ink-light); font-size: 14px; line-height: 1;
    padding: 0; transition: color 0.15s;
}
.ndt-filter-tag button:hover { color: #c0392b; }

/* ── Meta ── */
.ndt-meta { font-size: 13px; color: var(--ink-light); margin-bottom: 12px; padding-left: 4px; }
.ndt-meta strong { color: var(--ink); }

/* ── Table wrapper ── */
.ndt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow);
}

/* ── Table ── */
.ndt-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 14px; }
.ndt-table thead tr { background: var(--green-dark); color: var(--white); }
.ndt-table thead th {
    padding: 14px 16px; text-align: left; font-weight: 600;
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: normal; word-break: break-word; line-height: 1.35;
}
.ndt-table thead th.ndt-rank { width: 40px; text-align: center; white-space: nowrap; }
.ndt-table thead th.ndt-th-value { text-align: right; min-width: 80px; max-width: 100px; }
.ndt-table thead th.ndt-th-bar { min-width: 100px; }

.ndt-table tbody tr { border-bottom: 1px solid var(--green-pale); transition: background 0.15s; }
.ndt-table tbody tr:last-child { border-bottom: none; }
.ndt-table tbody tr:hover { background: var(--green-xpale); }
.ndt-table tbody tr:nth-child(1) { background: linear-gradient(90deg, #fffdf0, #fff); }
.ndt-table tbody tr:nth-child(2) { background: linear-gradient(90deg, #f9f9f5, #fff); }
.ndt-table tbody tr:nth-child(3) { background: linear-gradient(90deg, #f5f5f5, #fff); }

.ndt-table td { padding: 12px 16px; vertical-align: middle; }

td.ndt-rank {
    text-align: center; font-weight: 700; font-size: 13px;
    color: var(--ink-light); width: 40px; white-space: nowrap;
}
.ndt-table tbody tr:nth-child(1) td.ndt-rank { color: #c5960a; font-size: 16px; }
.ndt-table tbody tr:nth-child(2) td.ndt-rank { color: #8a8a8a; font-size: 15px; }
.ndt-table tbody tr:nth-child(3) td.ndt-rank { color: #9a6b3e; font-size: 14px; }

.ndt-ingredient span { font-weight: 500; color: var(--ink); }

.ndt-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    background: var(--green-pale); color: var(--green-dark);
    font-size: 12px; font-weight: 500;
    white-space: normal; word-break: break-word; line-height: 1.4;
}

.ndt-bar-cell { min-width: 100px; }
.ndt-bar { background: var(--green-pale); border-radius: 99px; height: 8px; overflow: hidden; }
.ndt-bar-fill {
    height: 100%; width: var(--bar-pct, 0%);
    background: linear-gradient(90deg, var(--green-mid), var(--green-light));
    border-radius: 99px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.ndt-table tbody tr:nth-child(1) .ndt-bar-fill { background: linear-gradient(90deg, #c5960a, #f0c030); }
.ndt-table tbody tr:nth-child(2) .ndt-bar-fill { background: linear-gradient(90deg, #8a8a8a, #b0b0b0); }
.ndt-table tbody tr:nth-child(3) .ndt-bar-fill { background: linear-gradient(90deg, #9a6b3e, #c89060); }

.ndt-value {
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--green-dark); white-space: nowrap; text-align: right;
}
.ndt-unit { font-size: 11px; font-weight: 400; color: var(--ink-light); margin-left: 2px; }

/* ── Loading / empty / error ── */
.ndt-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 60px 20px; color: var(--ink-light); font-size: 14px;
}
.ndt-spinner {
    width: 22px; height: 22px; border: 3px solid var(--green-pale);
    border-top-color: var(--green-mid); border-radius: 50%;
    animation: ndt-spin 0.7s linear infinite;
}
@keyframes ndt-spin { to { transform: rotate(360deg); } }
.ndt-empty-state { text-align: center; padding: 64px 20px; color: var(--ink-light); }
.ndt-leaf { font-size: 42px; display: block; margin-bottom: 12px; }
.ndt-empty-state p { font-size: 15px; margin: 0; }
.ndt-error { text-align: center; padding: 32px; color: #c0392b; font-size: 14px; }

/* ── Pagination ── */
.ndt-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.ndt-pagination button {
    padding: 8px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--white); color: var(--ink); font-family: inherit;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.ndt-pagination button:hover { background: var(--green-pale); border-color: var(--green-mid); }
.ndt-pagination button.active { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }

/* ── Tablet ── */
@media (max-width: 768px) {
    .ndt-controls { grid-template-columns: 1fr; padding: 18px 20px; gap: 14px; }
    .ndt-control-group.ndt-full { grid-column: 1; }
    .ndt-table { font-size: 13px; }
    .ndt-table thead th, .ndt-table td { padding: 10px 12px; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .ndt-app { padding: 0 10px 32px; }
    .ndt-controls { padding: 14px 16px; gap: 12px; }

    /* Hide bar column on mobile — too narrow */
    .ndt-bar-cell, .ndt-table thead th.ndt-th-bar { display: none; }

    /* Hide category column on mobile to save space */
    .ndt-category, .ndt-table thead th.ndt-th-cat { display: none; }

    .ndt-table { font-size: 12px; }
    .ndt-table thead th { padding: 9px 10px; font-size: 11px; }
    .ndt-table td { padding: 10px 10px; }

    td.ndt-rank { width: 28px; font-size: 12px; padding: 10px 6px; }
    .ndt-table tbody tr:nth-child(1) td.ndt-rank { font-size: 13px; }

    .ndt-value { font-size: 13px; }
    .ndt-unit { font-size: 10px; }

    .ndt-badge { font-size: 11px; padding: 2px 8px; }
    .ndt-pagination button { padding: 7px 10px; font-size: 12px; }
    .ndt-meta { font-size: 12px; }
}

/* ── Data source attribution ── */
.mipb-data-source {
    margin-top: 1rem;
    font-size: 12px;
    color: #999;
    text-align: right;
}
.mipb-source-label { font-weight: 600; color: #888; }
.mipb-data-source a {
    color: #4a8c3f;
    text-decoration: none;
}
.mipb-data-source a:hover { text-decoration: underline; }