/* ==========================================================================
   MPO Dashboard - custom styles
   Tailwind (via CDN) handles utilities; this file defines the colour tokens
   (light + dark) and the reusable component classes. Everything is prefixed
   with "mpo-" / "mpo_" to match the project convention. Plain CSS is used here
   because the Tailwind Play CDN does not process @apply in external files.
   ========================================================================== */

:root {
    --mpo-canvas:  #f5f5f7;
    --mpo-surface: #ffffff;
    --mpo-line:    #e5e5ea;
    --mpo-ink:     #1d1d1f;
    --mpo-sub:     #6e6e73;
    /* --mpo-primary is injected inline from settings in the layout <style>. */
    --mpo-primary: #0071e3;
    --mpo-primary-contrast: #ffffff;
}

.dark {
    --mpo-canvas:  #0b0b0c;
    --mpo-surface: #1c1c1e;
    --mpo-line:    #2c2c2e;
    --mpo-ink:     #f5f5f7;
    --mpo-sub:     #98989d;
}

html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* ----------------------------- Cards -------------------------------- */
.mpo-card {
    background: var(--mpo-surface);
    border: 1px solid var(--mpo-line);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
}
.dark .mpo-card { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* --------------------------- Buttons -------------------------------- */
.mpo-btn,
.mpo-btn-primary,
.mpo-btn-ghost,
.mpo-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    padding: .7rem 1.15rem;
    border-radius: .85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
    min-height: 44px;            /* touch-friendly target */
    text-decoration: none;
    white-space: nowrap;
}
.mpo-btn:active,
.mpo-btn-primary:active,
.mpo-btn-ghost:active,
.mpo-btn-danger:active { transform: scale(.97); }

.mpo-btn-primary { background: var(--mpo-primary); color: var(--mpo-primary-contrast); }
.mpo-btn-primary:hover { filter: brightness(.94); }

.mpo-btn-ghost { background: transparent; color: var(--mpo-ink); border-color: var(--mpo-line); }
.mpo-btn-ghost:hover { background: var(--mpo-canvas); }

.mpo-btn-danger { background: #ff3b30; color: #fff; }
.mpo-btn-danger:hover { filter: brightness(.94); }

.mpo-btn { background: var(--mpo-canvas); color: var(--mpo-ink); border-color: var(--mpo-line); }

.mpo-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    color: var(--mpo-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s ease;
}
.mpo-btn-icon:hover { background: var(--mpo-canvas); }

/* --------------------------- Forms ---------------------------------- */
.mpo-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--mpo-ink);
}
.mpo-input,
.mpo-select,
.mpo-textarea {
    width: 100%;
    background: var(--mpo-surface);
    color: var(--mpo-ink);
    border: 1px solid var(--mpo-line);
    border-radius: .85rem;
    padding: .8rem 1rem;
    font-size: 1rem;            /* >=16px stops iOS zoom-on-focus */
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 48px;
}
.mpo-textarea { min-height: 110px; resize: vertical; }
.mpo-input:focus,
.mpo-select:focus,
.mpo-textarea:focus {
    outline: none;
    border-color: var(--mpo-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mpo-primary) 18%, transparent);
}
.mpo-hint { font-size: .8rem; color: var(--mpo-sub); margin-top: .35rem; }

/* --------------------------- Badges --------------------------------- */
.mpo-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--mpo-line);
    color: var(--mpo-sub);
    background: var(--mpo-canvas);
}
.mpo-badge-success { color: #1c7c3c; background: rgba(48,209,88,.14); border-color: transparent; }
.mpo-badge-muted   { color: var(--mpo-sub); }
.mpo-badge-danger  { color: #c0271d; background: rgba(255,59,48,.14); border-color: transparent; }
.dark .mpo-badge-success { color: #4ade80; }
.dark .mpo-badge-danger  { color: #ff6b61; }

/* ------------------------- Sidebar nav ------------------------------ */
.mpo-nav-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .9rem;
    border-radius: .85rem;
    color: var(--mpo-sub);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.mpo-nav-link:hover { background: var(--mpo-canvas); color: var(--mpo-ink); }
.mpo-nav-link.is-active {
    background: color-mix(in srgb, var(--mpo-primary) 12%, transparent);
    color: var(--mpo-primary);
}

/* --------------------------- Toggle switch -------------------------- */
.mpo-switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.mpo-switch input { opacity: 0; width: 0; height: 0; }
.mpo-switch .mpo-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--mpo-line); border-radius: 999px; transition: background .2s ease;
}
.mpo-switch .mpo-slider::before {
    content: ""; position: absolute; height: 26px; width: 26px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.mpo-switch input:checked + .mpo-slider { background: var(--mpo-primary); }
.mpo-switch input:checked + .mpo-slider::before { transform: translateX(20px); }

/* -------------------- Responsive data tables ------------------------ */
/* On phones the .mpo-table rows collapse into stacked cards using the
   data-label attribute rendered in the views. */
@media (max-width: 767px) {
    .mpo-table thead { display: none; }
    .mpo-table, .mpo-table tbody, .mpo-table tr, .mpo-table td { display: block; width: 100%; }
    .mpo-table tr {
        background: var(--mpo-surface);
        border: 1px solid var(--mpo-line);
        border-radius: 1rem;
        padding: .4rem .25rem;
        margin-bottom: .85rem;
    }
    .mpo-table td {
        display: flex; justify-content: space-between; gap: 1rem;
        padding: .6rem .9rem; text-align: right; border: none;
    }
    .mpo-table td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--mpo-sub); text-align: left;
    }
    .mpo-table td[data-label=""]::before { content: ""; }
}

/* Drag & drop reordering (generic, used by [data-mpo-sortable] lists). */
[data-mpo-sortable] [data-id] { cursor: default; }
[data-mpo-sortable] [data-id].mpo-dragging { opacity: .5; }
.mpo-drag-handle { cursor: grab; touch-action: none; color: var(--mpo-sub); }
.mpo-drag-handle:active { cursor: grabbing; }