:root {
    --mm-bg: #f4f5f7;
    --mm-sidebar: #1f2430;
    --mm-sidebar-active: #2e3547;
    --mm-accent: #b8942f;
}

body.mm-admin {
    background: var(--mm-bg);
    font-size: 0.92rem;
}

.mm-shell { display: flex; min-height: 100vh; }

.mm-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--mm-sidebar);
    color: #cfd4de;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 0 0 1rem;
}

.mm-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    background: var(--mm-sidebar);
    z-index: 2;
}
.mm-brand img { height: 34px; width: 34px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }

.mm-nav { padding: 0.5rem; display: flex; flex-direction: column; gap: 2px; }
.mm-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: #cfd4de;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-size: 0.9rem;
}
.mm-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.mm-link.active { background: var(--mm-sidebar-active); color: #fff; }
.mm-link .mm-chev { font-size: 0.75rem; transition: transform 0.15s; }
.mm-link[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }
.mm-sublink {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem 0.45rem 2.1rem;
    border-radius: 8px;
    color: #aab1c2;
    text-decoration: none;
    font-size: 0.87rem;
}
.mm-sublink:hover { background: rgba(255,255,255,0.07); color: #fff; }
.mm-sublink.active { background: var(--mm-sidebar-active); color: #fff; }

.mm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.mm-topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0.6rem 1rem; position: sticky; top: 0; z-index: 10; }
.mm-content { padding: 1.5rem; flex: 1 0 auto; width: 100%; }
.mm-footer { padding: 0.75rem; color: #6c757d; font-size: 0.85rem; flex-shrink: 0; background: transparent; }

.mm-card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-radius: 12px; }
.mm-card .card-header { background: #fff; font-weight: 600; border-bottom: 1px solid #eef0f3; }
.mm-card .card-body { padding: 1.25rem; }

.mm-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }

table.dataTable { width: 100% !important; }
.mm-card .table-responsive { padding: 0.25rem; }
.mm-card table.table { margin-bottom: 0; }
.mm-card table.table th, .mm-card table.table td { padding: 0.65rem 0.75rem; vertical-align: middle; }

/* Multi-select (native tag UI) */
.mm-ms { position: relative; }
.mm-ms-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0.4rem 0.6rem; border: 1px solid #cfd4da; border-radius: 10px; background: #fff; cursor: text; transition: border-color 0.15s, box-shadow 0.15s; }
.mm-ms-box:hover { border-color: #9aa1ab; }
.mm-ms-box:focus-within, .mm-ms-box.open { border-color: #0d6efd; box-shadow: 0 0 0 0.22rem rgba(13,110,253,0.18); }
.mm-ms-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mm-ms-empty { color: #8a8f98; font-size: 0.85rem; }
.mm-ms-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: #2f6fed; border: 1px solid #2f6fed; color: #fff; border-radius: 8px; padding: 0.3rem 0.35rem 0.3rem 0.65rem; font-size: 0.85rem; font-weight: 600; line-height: 1.2; box-shadow: 0 1px 2px rgba(47,111,237,0.35); }
.mm-ms-tag .mm-ms-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 6px; background: rgba(255,255,255,0.25); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; }
.mm-ms-tag .mm-ms-x:hover { background: rgba(255,255,255,0.45); }
.mm-ms-field { border: 0; outline: 0; flex: 1; min-width: 160px; padding: 0.3rem 0.2rem; font-size: 0.9rem; background: transparent; }
.mm-ms-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1050; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid #d7dbe0; border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,0.18); padding: 0.3rem; display: none; }
.mm-ms-menu.open { display: block; }
.mm-ms-opt { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; color: #23272f; }
.mm-ms-opt:hover, .mm-ms-opt.is-active { background: #eef4ff; }
.mm-ms-opt.is-selected { background: #e7f0ff; font-weight: 600; }
.mm-ms-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #b9c2cc; color: #2f6fed; font-size: 0.8rem; flex-shrink: 0; background: #fff; }
.mm-ms-opt.is-selected .mm-ms-check { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.mm-ms-none { color: #8a8f98; cursor: default; }

/* legacy fallback (unused) */
.mm-tagbox, .mm-tagbox-list { display: none; }

.mm-stat {
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-align: center;
}
.mm-stat h2 { margin: 0; font-size: 1.6rem; }
.mm-stat p { margin: 0; color: #6c757d; }

.mm-login-page {
    background: linear-gradient(135deg, #1f2430 0%, #3a2f10 50%, #b8942f 100%);
    min-height: 100vh;
}
.mm-login-card { border: 0; border-radius: 16px; }

.form-group .required::after, .form-label.required::after { content: " *"; color: #dc3545; }

table.dataTable { width: 100% !important; }

/* Space between table and pagination (Laravel links + DataTables) */
.mm-card ul.pagination { margin-top: 1rem; margin-bottom: 0; }
.mm-card nav[role="navigation"] { margin-top: 1rem; }
.dataTables_wrapper .dt-layout-row:last-child { margin-top: 0.75rem; }
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dt-paging { padding-top: 0.25rem; }

@media (max-width: 991px) {
    .mm-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    body.mm-nav-open .mm-sidebar { transform: none; }
}