/* ==========================================================================
   com_mintservices Frontend Styles
   MintRV Service & Maintenance Tracker — User-Facing
   Brand: #134c5c (header), #083c49 (dark), #21b9a7 (accent)
   ========================================================================== */

:root {
    --ms-primary: #134c5c;
    --ms-dark: #083c49;
    --ms-accent: #21b9a7;
    --ms-accent-hover: #1aa393;
    --ms-accent-light: #e6f9f6;
    --ms-accent-bg: #f0faf8;
    --ms-green: #28a745;
    --ms-green-light: #d1fae5;
    --ms-amber: #f59e0b;
    --ms-amber-light: #fef3c7;
    --ms-red: #dc3545;
    --ms-red-light: #fee2e2;
    --ms-gray-50: #f8f9fa;
    --ms-gray-100: #f1f3f5;
    --ms-gray-200: #e9ecef;
    --ms-gray-300: #dee2e6;
    --ms-gray-400: #adb5bd;
    --ms-gray-500: #868e96;
    --ms-gray-600: #6c757d;
    --ms-gray-700: #495057;
    --ms-gray-800: #343a40;
    --ms-gray-900: #212529;
    --ms-white: #ffffff;
    --ms-radius: 8px;
    --ms-radius-sm: 4px;
    --ms-radius-lg: 12px;
    --ms-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --ms-shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --ms-shadow-lg: 0 8px 24px rgba(0,0,0,.1);
    --ms-transition: all .2s ease;
    --ms-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* ===== Reset / Base ===== */
.mintservices-browse,
.mintservices-detail,
.mintservices-dashboard,
.mintservices-create,
.mintservices-recurring,
.mintservices-services,
.mintservices-service,
.mintservices-directory,
.mintservices-dircategory,
.mintservices-edit,
.mintservices-print {
    font-family: var(--ms-font);
    color: var(--ms-gray-800);
    line-height: 1.5;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== Header ===== */
.ms-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.ms-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ms-primary);
    margin: 0 0 4px;
}
.ms-header h1 i { color: var(--ms-accent); margin-right: 6px; }
.ms-header p { color: var(--ms-gray-600); margin: 0; font-size: 14px; }

.ms-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ===== Breadcrumb ===== */
.ms-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ms-gray-500);
    margin-bottom: 8px;
}
.ms-breadcrumb a { color: var(--ms-accent); text-decoration: none; }
.ms-breadcrumb a:hover { text-decoration: underline; }
.ms-bc-sep { font-size: 10px; }

/* ===== Buttons ===== */
.ms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--ms-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--ms-transition);
    white-space: nowrap;
    line-height: 1.4;
}
.ms-btn-primary { background: var(--ms-accent); color: #fff; border-color: var(--ms-accent); }
.ms-btn-primary:hover { background: var(--ms-accent-hover); color: #fff; text-decoration: none; }

.ms-btn-outline { background: transparent; color: var(--ms-primary); border-color: var(--ms-gray-300); }
.ms-btn-outline:hover { background: var(--ms-gray-50); border-color: var(--ms-primary); color: var(--ms-primary); text-decoration: none; }

.ms-btn-amazon { background: #ff9900; color: #111; border-color: #e88c00; }
.ms-btn-amazon:hover { background: #ffad33; color: #111; text-decoration: none; }

.ms-btn-block { display: flex; width: 100%; justify-content: center; }
.ms-btn-sm { padding: 4px 10px; font-size: 12px; }
.ms-btn-lg { padding: 12px 24px; font-size: 16px; }
.ms-btn-icon { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--ms-gray-400); transition: color .15s; }
.ms-btn-icon:hover { color: var(--ms-gray-800); }
.ms-btn-text { background: none; border: none; cursor: pointer; padding: 4px 8px; color: var(--ms-gray-600); font-size: 13px; transition: color .15s; }
.ms-btn-text:hover { color: var(--ms-primary); }

/* ===== Inputs ===== */
.ms-input, .ms-select, .ms-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ms-gray-300);
    border-radius: var(--ms-radius-sm);
    font-size: 14px;
    font-family: var(--ms-font);
    color: var(--ms-gray-800);
    background: var(--ms-white);
    transition: border-color .15s;
}
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
    outline: none;
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px rgba(33,185,167,.12);
}
.ms-input-sm { padding: 5px 10px; font-size: 13px; }
.ms-textarea { resize: vertical; }
.ms-label { display: block; font-size: 13px; font-weight: 600; color: var(--ms-gray-700); margin-bottom: 4px; }
.ms-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* ===== Badges & Tags ===== */
.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.ms-badge.biz { background: #6f42c1; }
.ms-badge-biz { background: var(--ms-accent-light); color: var(--ms-primary); font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.ms-badge-official { background: var(--ms-green-light); color: #065f46; font-size: 11px; padding: 1px 6px; border-radius: 4px; }

.ms-diff-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.ms-diff-tag.beginner, .ms-diff-badge.green { background: var(--ms-green-light); color: #065f46; }
.ms-diff-tag.intermediate, .ms-diff-badge.amber { background: var(--ms-amber-light); color: #92400e; }
.ms-diff-tag.advanced, .ms-diff-badge.red { background: var(--ms-red-light); color: #991b1b; }

.ms-diff-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ms-diff-dot.beginner { background: var(--ms-green); }
.ms-diff-dot.intermediate { background: var(--ms-amber); }
.ms-diff-dot.advanced { background: var(--ms-red); }

.ms-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--ms-gray-100);
    color: var(--ms-gray-700);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ms-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.ms-status.scheduled { background: #dbeafe; color: #1e40af; }
.ms-status.in-progress, .ms-status.in_progress { background: var(--ms-amber-light); color: #92400e; }
.ms-status.completed { background: var(--ms-green-light); color: #065f46; }
.ms-status.cancelled { background: var(--ms-gray-100); color: var(--ms-gray-600); }
.ms-status.active { background: var(--ms-green-light); color: #065f46; }
.ms-status.paused { background: var(--ms-amber-light); color: #92400e; }

/* ===== Pill Groups (filter toggles) ===== */
.ms-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-pill {
    padding: 4px 12px;
    border: 1px solid var(--ms-gray-300);
    border-radius: 20px;
    background: var(--ms-white);
    font-size: 12px;
    font-weight: 500;
    color: var(--ms-gray-700);
    cursor: pointer;
    transition: var(--ms-transition);
}
.ms-pill:hover { border-color: var(--ms-accent); color: var(--ms-primary); }
.ms-pill.active { background: var(--ms-accent); color: #fff; border-color: var(--ms-accent); }

/* ===== Alerts ===== */
.ms-alert {
    padding: 12px 16px;
    border-radius: var(--ms-radius);
    font-size: 14px;
    margin-bottom: 16px;
}
.ms-alert-warn { background: var(--ms-amber-light); color: #92400e; border: 1px solid #fcd34d; }
.ms-alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ===== Progress Bars ===== */
.ms-progress {
    height: 8px;
    background: var(--ms-gray-200);
    border-radius: 4px;
    overflow: hidden;
}
.ms-progress.lg { height: 12px; }
.ms-progress-fill {
    height: 100%;
    background: var(--ms-accent);
    border-radius: 4px;
    transition: width .4s ease;
}
.ms-progress-fill.complete { background: var(--ms-green); }

/* ===== Empty States ===== */
.ms-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ms-gray-500);
}
.ms-empty i { color: var(--ms-gray-300); margin-bottom: 12px; }
.ms-empty h3 { font-size: 18px; color: var(--ms-gray-700); margin: 8px 0; }
.ms-empty p { margin-bottom: 16px; }

.ms-loading { text-align: center; padding: 32px; color: var(--ms-gray-500); font-size: 14px; }
.ms-loading i { margin-right: 6px; }

/* ===== Tables ===== */
.ms-table-wrap { overflow-x: auto; }
.ms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ms-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--ms-gray-600);
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 2px solid var(--ms-gray-200);
    background: var(--ms-gray-50);
    white-space: nowrap;
}
.ms-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ms-gray-200);
    vertical-align: middle;
}
.ms-table tr:hover td { background: var(--ms-accent-bg); }
.ms-table a { color: var(--ms-primary); text-decoration: none; }
.ms-table a:hover { text-decoration: underline; }
.ms-row-danger td { background: var(--ms-red-light) !important; }
.ms-row-warn td { background: var(--ms-amber-light) !important; }

/* ===== Sidebar Card ===== */
.ms-sidebar-card {
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--ms-shadow);
}
.ms-sidebar-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-gray-800);
    margin: 0 0 12px;
}
.ms-sidebar-card .ms-btn { margin-bottom: 8px; }

/* ===== Avatar ===== */
.ms-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ms-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.ms-avatar.biz { background: #6f42c1; }
.ms-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ms-gray-300);
    color: var(--ms-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.ms-avatar-sm.xs { width: 24px; height: 24px; font-size: 11px; }

/* ===== Rating Stars ===== */
.ms-rating-inline { color: var(--ms-amber); }
.ms-rating-inline .fa-star { font-size: 12px; }

/* ========================================================================
   DASHBOARD VIEW
   ======================================================================== */
.ms-dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.ms-dash-stat {
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--ms-shadow);
}
.ms-dash-stat-value { font-size: 28px; font-weight: 700; color: var(--ms-primary); }
.ms-dash-stat-label { font-size: 12px; color: var(--ms-gray-600); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

.ms-dash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.ms-dash-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    text-decoration: none;
    color: var(--ms-gray-800);
    box-shadow: var(--ms-shadow);
    transition: var(--ms-transition);
}
.ms-dash-action:hover {
    border-color: var(--ms-accent);
    box-shadow: var(--ms-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--ms-primary);
}
.ms-dash-action i {
    font-size: 20px;
    color: var(--ms-accent);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-accent-light);
    border-radius: 10px;
    flex-shrink: 0;
}
.ms-dash-action strong { font-size: 14px; display: block; }
.ms-dash-action span { font-size: 12px; color: var(--ms-gray-600); }

.ms-dash-section { margin-bottom: 24px; }
.ms-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ms-gray-800);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ms-section-title .ms-count {
    background: var(--ms-gray-100);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--ms-gray-600);
    font-weight: 500;
}

/* ========================================================================
   BROWSE VIEW
   ======================================================================== */
.ms-browse-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar */
.ms-sidebar { position: sticky; top: 80px; }
.ms-sidebar-search { margin-bottom: 16px; }
.ms-sidebar-section { margin-bottom: 20px; }
.ms-sidebar-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--ms-gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.ms-filter-group { margin-bottom: 12px; }
.ms-filter-label { font-size: 12px; font-weight: 600; color: var(--ms-gray-600); margin-bottom: 4px; display: block; }

/* Category Tree */
.ms-cat-tree a { text-decoration: none; }
.ms-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--ms-radius-sm);
    color: var(--ms-gray-700);
    font-size: 13px;
    transition: var(--ms-transition);
    text-decoration: none;
}
.ms-cat-item:hover { background: var(--ms-gray-100); color: var(--ms-primary); text-decoration: none; }
.ms-cat-item.active { background: var(--ms-accent-light); color: var(--ms-primary); font-weight: 600; }
.ms-cat-item i { width: 16px; text-align: center; font-size: 12px; color: var(--ms-accent); }
.ms-cat-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--ms-gray-400);
    background: var(--ms-gray-100);
    padding: 0 6px;
    border-radius: 8px;
}
.ms-cat-group { margin-bottom: 2px; }
.ms-cat-group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ms-gray-500);
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 10px 10px 4px;
}
.ms-cat-parent { font-weight: 500; }
.ms-cat-children {
    display: none;
    padding-left: 20px;
}
.ms-cat-children.expanded { display: block; }
.ms-cat-child { font-size: 12px; padding: 4px 10px; }

/* Results Bar */
.ms-results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ms-gray-200);
}
.ms-results-count { font-size: 13px; color: var(--ms-gray-600); }
.ms-sort-group { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ms-gray-600); }
.ms-sort-group .ms-select { width: auto; padding: 4px 10px; font-size: 13px; }

/* Template Grid */
.ms-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ms-template-card {
    display: flex;
    flex-direction: column;
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    padding: 16px;
    text-decoration: none;
    color: var(--ms-gray-800);
    box-shadow: var(--ms-shadow);
    transition: var(--ms-transition);
}
.ms-template-card:hover {
    border-color: var(--ms-accent);
    box-shadow: var(--ms-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--ms-gray-800);
}

.ms-tpl-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.ms-tpl-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.ms-tpl-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; color: var(--ms-primary); }

.ms-tpl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--ms-gray-600);
    margin-bottom: 6px;
}
.ms-tpl-meta i { color: var(--ms-accent); width: 14px; }
.ms-tpl-meta .ms-rating { color: var(--ms-amber); }

.ms-tpl-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--ms-gray-100);
    font-size: 12px;
}
.ms-tpl-rv { font-size: 11px; color: var(--ms-gray-500); margin-top: 6px; }
.ms-tpl-rv i { color: var(--ms-accent); }
.ms-creator { display: flex; align-items: center; gap: 4px; color: var(--ms-gray-600); }

/* Load More */
.ms-load-more { text-align: center; padding: 24px 0; }

/* ========================================================================
   DETAIL VIEW
   ======================================================================== */
.ms-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.ms-detail-main { min-width: 0; }
.ms-detail-sidebar { position: sticky; top: 80px; }

/* Detail Header */
.ms-detail-header {
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--ms-shadow);
}
.ms-detail-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.ms-detail-header h1 { font-size: 22px; font-weight: 700; color: var(--ms-primary); margin: 0; }
.ms-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--ms-gray-600);
    margin-bottom: 8px;
}
.ms-detail-meta i { color: var(--ms-accent); }
.ms-detail-desc { font-size: 14px; color: var(--ms-gray-700); margin-top: 10px; }
.ms-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.ms-linked-rv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ms-accent-bg);
    border: 1px solid var(--ms-accent);
    border-radius: var(--ms-radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
}
.ms-linked-rv i { color: var(--ms-accent); }

/* Checklist (detail view — read-only) */
.ms-checklist-section { margin-bottom: 24px; }
.ms-checklist { margin-top: 12px; }

.ms-checklist-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ms-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.ms-step-content h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--ms-gray-800); }
.ms-step-notes { font-size: 13px; color: var(--ms-gray-600); margin: 0 0 6px; }
.ms-step-product {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 0;
}
.ms-step-product i { color: #ff9900; }
.ms-step-product a { color: var(--ms-primary); text-decoration: none; }
.ms-step-product a:hover { text-decoration: underline; }
.ms-product-price { color: var(--ms-green); font-weight: 600; }

/* Interactive Checklist (service view) */
.ms-service-checklist { margin-bottom: 24px; }

.ms-service-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius-sm);
    margin-bottom: 6px;
    background: var(--ms-white);
    transition: var(--ms-transition);
}
.ms-service-item:hover { border-color: var(--ms-accent); }
.ms-service-item.completed { background: var(--ms-gray-50); opacity: .75; }
.ms-service-item.completed .ms-item-title { text-decoration: line-through; color: var(--ms-gray-500); }

.ms-check-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--ms-gray-300);
    padding: 0;
    transition: color .15s;
    flex-shrink: 0;
}
.ms-check-btn:hover { color: var(--ms-accent); }
.ms-service-item.completed .ms-check-btn { color: var(--ms-green); }

.ms-item-content { flex: 1; min-width: 0; }
.ms-item-title { font-size: 14px; font-weight: 500; color: var(--ms-gray-800); }
.ms-item-notes { font-size: 12px; color: var(--ms-gray-500); margin: 4px 0 0; }

/* Service Header */
.ms-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ms-service-progress-lg { min-width: 200px; }

.ms-complete-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ms-green-light);
    color: #065f46;
    border-radius: var(--ms-radius);
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
}

/* ===== Parts Sidebar ===== */
.ms-parts-list { margin-bottom: 12px; }
.ms-part-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-part-info { flex: 1; min-width: 0; }
.ms-part-title { font-size: 13px; color: var(--ms-primary); text-decoration: none; display: block; }
.ms-part-title:hover { text-decoration: underline; }
.ms-part-price { font-size: 13px; font-weight: 600; color: var(--ms-green); white-space: nowrap; margin-left: 8px; }
.ms-parts-total {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 2px solid var(--ms-gray-200);
    font-size: 14px;
}

/* ===== Stats ===== */
.ms-stat-list { }
.ms-stat-row-sm {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-stat-row-sm span { color: var(--ms-gray-600); }
.ms-stat-row-sm strong { color: var(--ms-gray-800); }

/* ===== Creator Card ===== */
.ms-creator-card .ms-creator-info {
    display: flex;
    gap: 12px;
    align-items: center;
}
.ms-creator-link {
    color: var(--ms-primary);
    text-decoration: none;
    transition: var(--ms-transition);
}
.ms-creator-link:hover {
    color: var(--ms-accent);
}

/* ===== Reviews ===== */
.ms-reviews-section { margin-bottom: 24px; }

.ms-rating-summary {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 16px 0;
    margin-bottom: 16px;
}
.ms-rating-big { text-align: center; min-width: 80px; }
.ms-rating-num { font-size: 36px; font-weight: 700; color: var(--ms-gray-800); line-height: 1; }
.ms-rating-stars { color: var(--ms-amber); margin: 4px 0; }
.ms-rating-bars { flex: 1; }
.ms-rating-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--ms-gray-600); }
.ms-rating-bar { flex: 1; height: 8px; background: var(--ms-gray-200); border-radius: 4px; overflow: hidden; }
.ms-rating-bar-fill { height: 100%; background: var(--ms-amber); border-radius: 4px; }

.ms-review-form { padding: 16px 0; }
.ms-star-select i { font-size: 24px; color: var(--ms-gray-300); cursor: pointer; transition: color .1s; }
.ms-star-select i:hover, .ms-star-select i.active { color: var(--ms-amber); }

.ms-review-card {
    padding: 14px 0;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-review-header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ms-review-stars { color: var(--ms-amber); font-size: 12px; }
.ms-review-title { font-size: 14px; font-weight: 600; margin: 4px 0; }
.ms-review-actions { margin-top: 6px; }

/* ===== Comments ===== */
.ms-comments-section { margin-bottom: 24px; }

.ms-comment {
    padding: 14px 0;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-comment-header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ms-comment-body { font-size: 14px; color: var(--ms-gray-700); margin-bottom: 6px; }
.ms-comment-actions { display: flex; gap: 12px; }
.ms-comment-replies { padding-left: 24px; border-left: 2px solid var(--ms-gray-200); margin-top: 8px; }
.ms-reply { padding: 8px 0; border-bottom: none; }
.ms-reply-form { padding: 8px 0; display: flex; gap: 8px; align-items: flex-start; }
.ms-reply-form .ms-textarea { flex: 1; }

.ms-add-comment { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; }
.ms-add-comment .ms-textarea { flex: 1; }

/* ===== Version History ===== */
.ms-version-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-version-num { font-weight: 600; color: var(--ms-primary); font-size: 13px; margin-right: 8px; }

/* ===== Freq Tags ===== */
.ms-freq-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ms-accent-light);
    color: var(--ms-primary);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* ========================================================================
   CREATE VIEW
   ======================================================================== */
.ms-create-form .ms-form-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}
.ms-form-main { min-width: 0; }
.ms-form-sidebar { position: sticky; top: 80px; }

.ms-form-group { margin-bottom: 16px; }
.ms-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.ms-form-section {
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    padding: 16px;
    margin-bottom: 16px;
}
.ms-form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ms-form-section-header h3 { font-size: 16px; font-weight: 600; margin: 0; }

.ms-create-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: var(--ms-gray-50);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius-sm);
    margin-bottom: 8px;
}
.ms-item-drag { cursor: grab; color: var(--ms-gray-400); padding-top: 6px; }
.ms-item-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ms-text-danger { color: var(--ms-red); }

.ms-assigned-label {
    font-size: 13px;
    color: var(--ms-gray-600);
    margin-top: 6px;
}
.ms-assign-btns { display: flex; gap: 6px; }

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */
.ms-mb-1 { margin-bottom: 4px; }
.ms-mb-2 { margin-bottom: 8px; }
.ms-mb-3 { margin-bottom: 16px; }
.ms-mt-1 { margin-top: 4px; }
.ms-text-sm { font-size: 13px; }
.ms-text-xs { font-size: 11px; }
.ms-text-muted { color: var(--ms-gray-500); }
.ms-text-danger { color: var(--ms-red); }
.ms-text-warn { color: var(--ms-amber); }
.ms-text-green { color: var(--ms-green); }
.ms-section { margin-bottom: 24px; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 992px) {
    .ms-browse-layout { grid-template-columns: 1fr; }
    .ms-sidebar { position: static; }
    .ms-detail-layout { grid-template-columns: 1fr; }
    .ms-detail-sidebar { position: static; }
    .ms-create-form .ms-form-grid { grid-template-columns: 1fr; }
    .ms-form-sidebar { position: static; }
}

@media (max-width: 768px) {
    .ms-header { flex-direction: column; }
    .ms-dash-stats { grid-template-columns: repeat(2, 1fr); }
    .ms-dash-actions { grid-template-columns: 1fr; }
    .ms-template-grid { grid-template-columns: 1fr; }
    .ms-form-row { grid-template-columns: 1fr; }
    .ms-service-header { flex-direction: column; }
    .ms-rating-summary { flex-direction: column; }
}

@media (max-width: 480px) {
    .ms-dash-stats { grid-template-columns: 1fr; }
    .ms-detail-meta { flex-direction: column; gap: 4px; }
}

/* ===== Additional Classes (v1.0.6) ===== */
.ms-header-left { flex: 1; min-width: 0; }
.ms-main { min-width: 0; }
.ms-source-filters { display: flex; flex-direction: column; gap: 6px; }
.ms-source-filters .ms-check { padding: 4px 0; }
.ms-parts-card { margin-bottom: 16px; }
.ms-creator-stats { display: flex; gap: 16px; font-size: 12px; color: var(--ms-gray-600); margin-top: 8px; }
.ms-comment-list, .ms-review-list, .ms-version-list { margin-top: 12px; }
.ms-tpl-desc { font-size: 13px; color: var(--ms-gray-600); margin: 0 0 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-tpl-author, .ms-tpl-items, .ms-tpl-time, .ms-tpl-cost, .ms-tpl-rating, .ms-tpl-uses { /* JS-populated spans, no special styling */ }

/* ===== Dashboard Stat accent colors ===== */
.ms-dash-stat:first-child { border-top: 3px solid var(--ms-accent); }
.ms-dash-stat:nth-child(2) { border-top: 3px solid var(--ms-green); }
.ms-dash-stat:nth-child(3) { border-top: 3px solid var(--ms-amber); }
.ms-dash-stat:nth-child(4) { border-top: 3px solid var(--ms-primary); }

/* ===== Category Tree Toggle ===== */
.ms-cat-parent { cursor: pointer; }
.ms-cat-parent::before {
    content: '›';
    display: inline-block;
    width: 12px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ms-gray-400);
    transition: transform .2s;
    text-align: center;
    flex-shrink: 0;
}
.ms-cat-parent.expanded::before { transform: rotate(90deg); }
.ms-cat-children { display: none; padding-left: 22px; }
.ms-cat-children.expanded { display: block; }

/* ===== Modal ===== */
.ms-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ms-modal {
    background: var(--ms-white);
    border-radius: var(--ms-radius-lg);
    box-shadow: var(--ms-shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.ms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ms-gray-200);
}
.ms-modal-header h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--ms-primary); }
.ms-modal-body { padding: 12px 20px 20px; overflow-y: auto; }

/* Garage Picker Items */
.ms-garage-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--ms-transition);
}
.ms-garage-item:hover {
    border-color: var(--ms-accent);
    background: var(--ms-accent-bg);
    box-shadow: var(--ms-shadow);
}
.ms-garage-item.active-item {
    border-color: var(--ms-accent);
    background: var(--ms-accent-light);
}
.ms-garage-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ms-accent-light);
    color: var(--ms-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ms-garage-info { flex: 1; min-width: 0; }
.ms-garage-info strong { font-size: 14px; color: var(--ms-gray-800); display: block; }
.ms-garage-info span { font-size: 12px; color: var(--ms-gray-500); }
.ms-garage-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--ms-accent);
    color: #fff;
    white-space: nowrap;
}
.ms-garage-empty {
    text-align: center;
    padding: 24px;
    color: var(--ms-gray-500);
}
.ms-garage-empty i { font-size: 32px; color: var(--ms-gray-300); margin-bottom: 8px; display: block; }

/* Assigned vehicle/RV display */
.ms-assigned-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ms-accent-bg);
    border: 1px solid var(--ms-accent);
    border-radius: var(--ms-radius-sm);
    font-size: 13px;
    color: var(--ms-primary);
}
.ms-assigned-display i { color: var(--ms-accent); }

/* ===== Print View — Redesigned ===== */
.mintservices-print { max-width: 820px; margin: 0 auto; font-family: var(--ms-font); }

/* Print toolbar (hidden on print) */
.ms-print-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ms-gray-50); border: 1px solid var(--ms-gray-200); border-radius: var(--ms-radius);
    padding: 12px 20px; margin-bottom: 24px; font-size: 14px; color: var(--ms-gray-700);
}
.ms-print-toolbar-info { display: flex; align-items: center; gap: 10px; }
.ms-print-toolbar-actions { display: flex; gap: 8px; }

/* Print page container */
.ms-print-page {
    background: var(--ms-white); border: 1px solid var(--ms-gray-200); border-radius: var(--ms-radius);
    padding: 32px 40px; box-shadow: var(--ms-shadow); font-size: 11px;
}

/* Header: logo + QR */
.ms-print-hdr {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 12px; border-bottom: 2px solid var(--ms-primary); margin-bottom: 14px;
}
.ms-print-logo-block { display: flex; flex-direction: column; gap: 2px; }
.ms-print-logo-img { height: 32px; width: auto; max-width: 140px; max-height: 32px; }
.ms-print-tagline { font-size: 10px; color: var(--ms-gray-500); }
.ms-print-qr { text-align: center; }
.ms-print-qr img { border: 1px solid var(--ms-gray-200); border-radius: 4px; }
.ms-print-qr small { display: block; font-size: 8px; color: var(--ms-gray-400); margin-top: 3px; line-height: 1.3; }

/* Title block */
.ms-print-title-block { margin-bottom: 12px; }
.ms-print-title-block h1 { font-size: 17px; color: var(--ms-gray-900); margin: 0 0 6px; }
.ms-print-meta-lines { font-size: 10px; line-height: 1.6; color: var(--ms-gray-600); }
.ms-print-verified { display: inline-block; background: var(--ms-accent-light); color: var(--ms-accent); font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }

/* Checklist */
.ms-print-checklist { margin: 14px 0; }
.ms-print-checklist h3 { font-size: 13px; color: var(--ms-primary); border-bottom: 1px solid var(--ms-gray-200); padding-bottom: 5px; margin: 0 0 10px; }
.ms-print-check-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ms-gray-100); align-items: flex-start; }
.ms-print-cb { width: 14px; height: 14px; border: 1.5px solid var(--ms-gray-400); border-radius: 2px; flex-shrink: 0; margin-top: 1px; font-size: 10px; text-align: center; line-height: 12px; }
.ms-print-ct { flex: 1; font-size: 11px; line-height: 1.4; }
.ms-print-ct strong { color: var(--ms-gray-700); }
.ms-print-notes { font-style: italic; color: var(--ms-gray-500); font-size: 10px; margin-top: 2px; }
.ms-print-product { color: var(--ms-accent); font-size: 10px; margin-top: 2px; }

/* Parts shopping list */
.ms-print-parts { margin: 14px 0; }
.ms-print-parts h3 { font-size: 13px; color: var(--ms-primary); border-bottom: 1px solid var(--ms-gray-200); padding-bottom: 5px; margin: 0 0 10px; }
.ms-print-part-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 11px; border-bottom: 1px solid var(--ms-gray-50); }
.ms-print-part-total { font-weight: 700; color: var(--ms-primary); border-top: 2px solid var(--ms-gray-300); border-bottom: none; padding-top: 6px; margin-top: 4px; }

/* Notes area */
.ms-print-notes-area { margin: 16px 0; }
.ms-print-notes-area h3 { font-size: 13px; color: var(--ms-primary); margin: 0 0 10px; }
.ms-print-note-line { border-bottom: 1px solid var(--ms-gray-200); height: 22px; }

/* Footer */
.ms-print-footer {
    display: flex; justify-content: space-between; margin-top: 16px; padding-top: 10px;
    border-top: 2px solid var(--ms-primary); font-size: 9px; color: var(--ms-gray-500); line-height: 1.5;
}

/* Print media query */
@media print {
    /* Hide everything that's not the print page */
    .no-print, .ms-print-toolbar { display: none !important; }
    
    /* Hide all site chrome */
    nav, header, footer, .ms-breadcrumb { display: none !important; }
    #towbar, .towbar, [class*="towbar"] { display: none !important; }
    #sp-header, #sp-top-bar, #sp-bottom, #sp-footer { display: none !important; }
    .sp-megamenu-wrapper { display: none !important; }
    
    /* Make body/html clean */
    html, body { 
        margin: 0 !important; 
        padding: 0 !important; 
        background: white !important;
    }
    
    /* Print page styling - NO absolute positioning */
    .mintservices-print { 
        max-width: 100%; 
        padding: 0; 
        margin: 0;
        width: 100%;
    }
    .ms-print-page { 
        border: none; 
        box-shadow: none; 
        padding: 10mm 15mm;
        margin: 0;
    }
    .ms-print-check-item { page-break-inside: avoid; }
    .ms-print-parts { page-break-inside: avoid; }
    
    /* Smaller logo for print */
    .ms-print-logo-img { 
        height: 28px !important; 
        width: auto !important; 
        max-width: 120px !important;
    }
}

/* ===== Create View: Vehicle Type Pills ===== */
.ms-vt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-vt-pills .ms-pill { padding: 8px 18px; font-size: 14px; font-weight: 500; }
.ms-vt-pills .ms-pill i { margin-right: 6px; }

/* ===== Create View: Searchable Category Select ===== */
.ms-search-select { position: relative; }
.ms-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ms-search-icon {
    position: absolute;
    left: 12px;
    color: var(--ms-gray-400);
    font-size: 13px;
    pointer-events: none;
}
.ms-search-input-wrap .ms-input {
    padding-left: 34px;
    padding-right: 34px;
}
.ms-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--ms-gray-400);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
}
.ms-search-clear:hover { color: var(--ms-gray-700); background: var(--ms-gray-100); }

.ms-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--ms-gray-200);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 320px;
    overflow-y: auto;
}

/* Category options */
.ms-cat-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ms-gray-700);
    border-bottom: 1px solid var(--ms-gray-50);
    transition: background 0.1s;
}
.ms-cat-option:last-child { border-bottom: none; }
.ms-cat-option:hover, .ms-cat-option.highlighted {
    background: var(--ms-accent-light);
    color: var(--ms-primary);
}
.ms-cat-option i {
    width: 18px;
    text-align: center;
    color: var(--ms-accent);
    margin-right: 6px;
    font-size: 13px;
}

/* Parent category headers in dropdown */
.ms-cat-parent-opt {
    background: var(--ms-gray-50);
    font-weight: 600;
    color: var(--ms-primary);
    font-size: 13px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-cat-parent-opt:hover {
    background: var(--ms-accent-light);
}

/* Subcategory indentation */
.ms-cat-sub {
    padding-left: 38px;
    font-size: 13px;
}

/* Empty state */
.ms-cat-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--ms-gray-400);
    font-size: 13px;
}

/* Search highlight */
.ms-search-dropdown mark {
    background: rgba(33, 185, 167, 0.2);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ========================================================================
   TABLE ICON BUTTONS (services list, dashboard active services)
   ======================================================================== */
.ms-tbl-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--ms-radius-sm);
    color: var(--ms-gray-500); font-size: 13px; transition: var(--ms-transition);
    text-decoration: none;
}
.ms-tbl-icon-btn:hover { color: var(--ms-accent); background: var(--ms-accent-light); }

/* ========================================================================
   CHECKBOX LABEL (create/edit template sharing)
   ======================================================================== */
.ms-checkbox-label {
    display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ms-gray-700);
    cursor: pointer; user-select: none;
}
.ms-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ms-accent); flex-shrink: 0; }

/* ========================================================================
   DIRECTORY LANDING PAGE
   ======================================================================== */

/* Hero */
.ms-dir-hero {
    background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-dark) 100%);
    color: var(--ms-white); border-radius: var(--ms-radius-lg); padding: 40px 36px 32px;
    margin-bottom: 24px; text-align: center;
}
.ms-dir-hero h1 { font-size: 26px; margin: 0 0 8px; font-weight: 700; }
.ms-dir-hero h1 i { margin-right: 10px; opacity: .85; }
.ms-dir-hero > p { font-size: 15px; opacity: .85; margin: 0 auto 24px; max-width: 640px; line-height: 1.5; }
.ms-dir-hero-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.ms-dir-hero-stat { text-align: center; }
.ms-dir-hero-num { font-size: 28px; font-weight: 700; }
.ms-dir-hero-label { font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* Search */
.ms-dir-search { margin-bottom: 28px; }
.ms-dir-search-inner {
    display: flex; align-items: center; gap: 10px; background: var(--ms-white);
    border: 1px solid var(--ms-gray-300); border-radius: var(--ms-radius); padding: 12px 16px;
    box-shadow: var(--ms-shadow); transition: var(--ms-transition);
}
.ms-dir-search-inner:focus-within { border-color: var(--ms-accent); box-shadow: 0 0 0 3px rgba(33,185,167,.15); }
.ms-dir-search-inner i { color: var(--ms-gray-400); font-size: 15px; flex-shrink: 0; }
.ms-dir-search-inner input {
    flex: 1; border: none; outline: none; font-size: 15px; background: transparent;
    font-family: var(--ms-font); color: var(--ms-gray-800);
}
.ms-dir-search-inner input::placeholder { color: var(--ms-gray-400); }

/* Vehicle Type Sections */
.ms-dir-vt-section { margin-bottom: 36px; }
.ms-dir-vt-header { margin-bottom: 16px; }
.ms-dir-vt-header h2 { font-size: 20px; color: var(--ms-primary); margin: 0; font-weight: 700; }
.ms-dir-vt-header h2 i { margin-right: 8px; color: var(--ms-accent); }
.ms-dir-vt-count { font-size: 14px; font-weight: 400; color: var(--ms-gray-500); }

/* Category Card Grid */
.ms-dir-cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.ms-dir-cat-card {
    display: block; background: var(--ms-white); border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius); padding: 20px; text-decoration: none; color: inherit;
    transition: var(--ms-transition);
}
.ms-dir-cat-card:hover { border-color: var(--ms-accent); box-shadow: var(--ms-shadow-md); transform: translateY(-2px); }
.ms-dir-cat-icon {
    width: 40px; height: 40px; border-radius: var(--ms-radius); background: var(--ms-accent-light);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
    color: var(--ms-accent); font-size: 18px;
}
.ms-dir-cat-card h3 { font-size: 16px; color: var(--ms-gray-900); margin: 0 0 6px; font-weight: 600; }
.ms-dir-cat-desc { font-size: 13px; color: var(--ms-gray-500); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-dir-cat-meta { display: flex; gap: 12px; font-size: 12px; color: var(--ms-gray-500); margin-bottom: 10px; }
.ms-dir-cat-meta strong { color: var(--ms-gray-700); }
.ms-dir-cat-subs { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-dir-cat-sub-tag {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px;
    background: var(--ms-gray-100); color: var(--ms-gray-600);
}

/* ========================================================================
   DIRECTORY CATEGORY / SUBCATEGORY PAGE
   ======================================================================== */

/* Category Hero */
.ms-cat-hero {
    display: flex; gap: 20px; align-items: flex-start;
    background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-dark) 100%);
    color: var(--ms-white); border-radius: var(--ms-radius-lg); padding: 28px 32px; margin-bottom: 20px;
}
.ms-cat-hero-icon {
    width: 56px; height: 56px; border-radius: var(--ms-radius); background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.ms-cat-hero-info { flex: 1; }
.ms-cat-hero-info h1 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
.ms-cat-hero-info p { font-size: 14px; opacity: .85; margin: 0 0 12px; line-height: 1.5; }
.ms-cat-hero-stats { display: flex; gap: 20px; font-size: 13px; opacity: .9; }
.ms-cat-stat { display: flex; align-items: center; gap: 5px; }
.ms-cat-stat i { font-size: 12px; opacity: .7; }
.ms-cat-stat strong { font-weight: 600; }

/* Subcategory Pills */
.ms-subcat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ms-subcat-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border: 1px solid var(--ms-gray-200); border-radius: 20px; font-size: 13px; font-weight: 500;
    color: var(--ms-gray-600); background: var(--ms-white); text-decoration: none;
    transition: var(--ms-transition);
}
.ms-subcat-pill:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.ms-subcat-pill.active { background: var(--ms-accent); color: var(--ms-white); border-color: var(--ms-accent); }
.ms-subcat-count { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.06); }
.ms-subcat-pill.active .ms-subcat-count { background: rgba(255,255,255,.25); }

/* Filter/Sort Bar */
.ms-dir-filter-bar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 12px; margin-bottom: 16px; padding: 12px 0; border-bottom: 1px solid var(--ms-gray-200);
}
.ms-dir-filter-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ms-dir-filter-right { display: flex; gap: 8px; }
.ms-dir-result-count { font-size: 14px; font-weight: 600; color: var(--ms-gray-800); }
.ms-dir-result-count span { font-weight: 400; color: var(--ms-gray-500); }
.ms-dir-filter-pills { display: flex; gap: 4px; }
.ms-dir-fpill {
    padding: 4px 12px; border-radius: 14px; font-size: 12px; font-weight: 500;
    color: var(--ms-gray-600); background: var(--ms-gray-100); text-decoration: none;
    transition: var(--ms-transition);
}
.ms-dir-fpill:hover { background: var(--ms-gray-200); color: var(--ms-gray-800); }
.ms-dir-fpill.active { background: var(--ms-primary); color: var(--ms-white); }
.ms-dir-select {
    padding: 6px 12px; border: 1px solid var(--ms-gray-200); border-radius: var(--ms-radius-sm);
    font-size: 13px; color: var(--ms-gray-700); background: var(--ms-white);
    font-family: var(--ms-font); cursor: pointer;
}
.ms-dir-select:focus { border-color: var(--ms-accent); outline: none; }

/* Template Table */
.ms-dir-tpl-table { margin-bottom: 20px; }
.ms-dir-tpl-name a { font-weight: 600; color: var(--ms-primary); text-decoration: none; }
.ms-dir-tpl-name a:hover { color: var(--ms-accent); text-decoration: underline; }
.ms-dir-tpl-sub { display: block; font-size: 12px; color: var(--ms-gray-500); margin-top: 2px; }

/* Creator cell */
.ms-dir-creator { display: flex; align-items: center; gap: 8px; }
.ms-dir-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--ms-gray-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--ms-gray-600); flex-shrink: 0;
}
.ms-dir-avatar.business { background: var(--ms-accent-light); color: var(--ms-accent); }
.ms-dir-creator-info { font-size: 13px; line-height: 1.3; }
.ms-dir-cname { display: block; font-weight: 500; color: var(--ms-gray-800); }
.ms-dir-ctag { display: block; font-size: 10px; color: var(--ms-accent); font-weight: 600; }

/* Difficulty tags */
.ms-diff-tag {
    display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600;
    text-transform: capitalize;
}
.ms-diff-tag.beginner { background: var(--ms-green-light); color: var(--ms-green); }
.ms-diff-tag.intermediate { background: var(--ms-amber-light); color: var(--ms-amber); }
.ms-diff-tag.advanced { background: var(--ms-red-light); color: var(--ms-red); }

/* Rating in table */
.ms-dir-rating { display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.ms-dir-rating i { color: #f59e0b; font-size: 12px; }
.ms-dir-rating-num { font-weight: 600; color: var(--ms-gray-800); }
.ms-dir-rating-cnt { color: var(--ms-gray-400); font-size: 11px; }

/* Action icons in table */
.ms-dir-actions { display: flex; gap: 4px; }
.ms-dir-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--ms-radius-sm);
    color: var(--ms-gray-500); font-size: 13px; text-decoration: none;
    transition: var(--ms-transition);
}
.ms-dir-icon-btn:hover { color: var(--ms-accent); background: var(--ms-accent-light); }

/* Pagination */
.ms-dir-pagination {
    display: flex; align-items: center; justify-content: center; gap: 4px; margin: 20px 0; font-size: 14px;
}
.ms-dir-pagination a, .ms-dir-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--ms-radius-sm);
    text-decoration: none; color: var(--ms-gray-600); transition: var(--ms-transition);
}
.ms-dir-pagination a:hover { background: var(--ms-gray-100); color: var(--ms-primary); }
.ms-dir-pagination a.active { background: var(--ms-primary); color: var(--ms-white); font-weight: 600; }
.ms-dir-pag-disabled { color: var(--ms-gray-300) !important; cursor: default; }
.ms-dir-pag-info { margin-left: 12px; font-size: 12px; color: var(--ms-gray-400); }

/* ========================================================================
   SEO CONTENT BLOCK
   ======================================================================== */
.ms-seo-content {
    margin-top: 36px; padding: 28px; background: var(--ms-gray-50); border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius-lg);
}
.ms-seo-content h2 { font-size: 18px; color: var(--ms-primary); margin: 0 0 10px; }
.ms-seo-content h2:not(:first-child) { margin-top: 20px; }
.ms-seo-content p { font-size: 14px; color: var(--ms-gray-600); line-height: 1.7; margin: 0 0 12px; }
.ms-seo-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-seo-links a {
    display: inline-block; padding: 5px 14px; border-radius: 16px; font-size: 13px;
    background: var(--ms-white); border: 1px solid var(--ms-gray-200); color: var(--ms-primary);
    text-decoration: none; transition: var(--ms-transition);
}
.ms-seo-links a:hover { border-color: var(--ms-accent); color: var(--ms-accent); background: var(--ms-accent-light); }

/* ========================================================================
   RESPONSIVE — DIRECTORY & PRINT
   ======================================================================== */

/* ===== Service Products (form & display) ===== */
.ms-create-product {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e4edf0;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color 0.2s;
}
.ms-create-product:hover { border-color: var(--ms-accent); }
.ms-product-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ms-product-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ms-service-products { margin-top: 24px; }
.ms-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.ms-product-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e4edf0;
    border-radius: 8px;
    background: #fff;
}
.ms-product-card:hover { border-color: var(--ms-accent); }
.ms-product-info { flex: 1; min-width: 0; }
.ms-product-name {
    font-weight: 600;
    color: var(--ms-primary);
    font-size: 14px;
    margin-bottom: 2px;
}
.ms-product-brand { font-size: 12px; }
.ms-product-price {
    font-weight: 700;
    color: var(--ms-accent);
    font-size: 15px;
    margin-top: 4px;
}
.ms-btn-accent {
    background: var(--ms-accent);
    color: #fff;
    border: none;
    white-space: nowrap;
}
.ms-btn-accent:hover { opacity: 0.9; }

@media (max-width: 768px) {
    .ms-dir-hero { padding: 28px 20px 24px; }
    .ms-dir-hero h1 { font-size: 20px; }
    .ms-dir-hero-stats { gap: 16px; }
    .ms-dir-hero-num { font-size: 22px; }
    .ms-dir-cat-grid { grid-template-columns: 1fr; }
    .ms-cat-hero { flex-direction: column; padding: 20px; }
    .ms-cat-hero-stats { flex-wrap: wrap; gap: 12px; }
    .ms-dir-filter-bar { flex-direction: column; align-items: flex-start; }
    .ms-dir-filter-right { width: 100%; }
    .ms-dir-filter-right select { flex: 1; }
    .ms-dir-tpl-table { overflow-x: auto; }
    .ms-print-page { padding: 20px; }
    .ms-print-hdr { flex-direction: column; gap: 12px; }
    .ms-print-footer { flex-direction: column; gap: 8px; }
    .ms-seo-content { padding: 20px; }
    .ms-products-grid { grid-template-columns: 1fr; }
    .ms-product-row { flex-direction: column; }
    .ms-product-row input[style*="width:100px"] { width: 100% !important; }
}

/* ================================================================
   v1.1.0 - Pillar Hero, Tags, YouTube Embed, Checkbox Grid
   ================================================================ */

/* Two-Pillar Hero */
.ms-pillar-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.ms-pillar-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    color: #fff;
}
.ms-pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    color: #fff;
    text-decoration: none;
}
.ms-pillar-card.ms-pillar-trip {
    background: linear-gradient(135deg, #21b9a7, #17a593);
}
.ms-pillar-card.ms-pillar-maint {
    background: linear-gradient(135deg, #134c5c, #0d3844);
}
.ms-pillar-card.active {
    box-shadow: 0 0 0 3px #21b9a7, 0 6px 20px rgba(0,0,0,.15);
    transform: translateY(-2px);
}
.ms-pillar-card .ms-pillar-icon {
    font-size: 28px;
    opacity: .85;
    flex-shrink: 0;
}
.ms-pillar-card h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.ms-pillar-card p {
    margin: 0;
    font-size: 13px;
    opacity: .85;
    color: #fff;
}
.ms-pillar-card .ms-pillar-count {
    font-size: 12px;
    opacity: .7;
    margin-top: 4px;
}

/* Activity / RV Class Tag Pills */
.ms-tag-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0;
}
.ms-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #dde1e6;
    background: #f8f9fa;
    color: #555;
    transition: all .15s;
    text-decoration: none;
}
.ms-tag-pill:hover,
.ms-tag-pill.active {
    background: #134c5c;
    color: #fff;
    border-color: #134c5c;
    text-decoration: none;
}
.ms-tag-pill i {
    font-size: 11px;
}

/* Detail page filter tags */
.ms-detail-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.ms-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}
.ms-filter-tag.rv-class {
    background: #e8f4f8;
    color: #134c5c;
}
.ms-filter-tag.activity {
    background: #edf7f5;
    color: #17a593;
}
.ms-filter-tag i {
    font-size: 10px;
}

/* YouTube Embed */
.ms-youtube-embed {
    margin: 16px 0 20px;
}
.ms-youtube-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.ms-youtube-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Checkbox Grid (create/edit forms) */
.ms-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 16px;
}
.ms-checkbox-grid .ms-checkbox-label {
    font-size: 13px;
}

/* Browse tag pills in card view */
.ms-browse-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.ms-browse-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f0f0f0;
    color: #666;
}

/* Responsive additions for v1.1.0 */
@media (max-width: 768px) {
    .ms-pillar-hero { grid-template-columns: 1fr; }
    .ms-pillar-card { padding: 16px; }
    .ms-pillar-card .ms-pillar-icon { font-size: 22px; }
    .ms-pillar-card h2 { font-size: 16px; }
    .ms-checkbox-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   v1.1.1 - Schedule/Recurring, Item Action Reminders
   ================================================================ */

/* Recurring options in schedule sidebar */
.ms-recurring-row,
.ms-reminder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--ms-text);
}
.ms-recurring-row .ms-input,
.ms-recurring-row .ms-select,
.ms-reminder-row .ms-input {
    padding: 4px 8px;
    font-size: 13px;
    height: auto;
}
.ms-schedule-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 12px 0;
}
.ms-reminder-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 6px;
}
.ms-reminder-badge i {
    font-size: 10px;
}

/* Item row — split notes + action */
.ms-item-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ms-item-detail-row .ms-item-notes {
    flex: 1;
    min-width: 0;
}
.ms-item-action-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
    padding: 4px;
    border-radius: 4px;
    transition: color .15s;
}
.ms-item-action-label:hover {
    color: #f59e0b;
}
.ms-item-action-label input[type="checkbox"] {
    display: none;
}
.ms-item-action-label.active,
.ms-item-action-label:has(input:checked) {
    color: #f59e0b;
}
.ms-item-action-label .fa-bell {
    font-size: 14px;
}
.ms-item-reminder {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ms-item-reminder .ms-input-xs {
    padding: 2px 6px;
    font-size: 12px;
    height: auto;
    width: 48px;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}
.ms-item-reminder .ms-text-xs {
    font-size: 11px;
    color: #6b7280;
}

/* Print view — show reminder badge */
.ms-print .ms-item-reminder-note {
    font-size: 11px;
    color: #b45309;
    font-style: italic;
}

/* Responsive: stack item detail row on small screens */
@media (max-width: 600px) {
    .ms-item-detail-row {
        flex-wrap: wrap;
    }
    .ms-item-detail-row .ms-item-notes {
        flex-basis: 100%;
    }
}

/* ================================================================
   v1.1.5 - Dashboard Enhancements
   ================================================================ */

/* Section header with title + action */
.ms-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ms-section-header .ms-section-title { margin-bottom: 0; }

/* Table text utilities */
.ms-text-center { text-align: center; }

/* Stat badges (for uses, reviews, comments) */
.ms-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--ms-accent-light);
    color: var(--ms-primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.ms-stat-badge i { font-size: 10px; }

/* Additional moderation states */
.ms-status.pending {
    background: var(--ms-amber-light);
    color: #92400e;
}
.ms-status.draft {
    background: var(--ms-gray-100);
    color: var(--ms-gray-600);
}
.ms-status.rejected {
    background: var(--ms-red-light);
    color: #991b1b;
}

/* ================================================================
   v1.1.5 - Two-Column Checklist + Products Layout
   ================================================================ */

/* Container grid for checklist (left) + products (right) */
.ms-checklist-products-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    margin-bottom: 32px;
    align-items: start;
}

.ms-checklist-column {
    min-width: 0;
}

.ms-products-column {
    position: sticky;
    top: 20px;
}

/* Products list card */
.ms-products-list-card {
    background: var(--ms-white);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    padding: 16px;
}

.ms-products-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.ms-product-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ms-gray-100);
}
.ms-product-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ms-product-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--ms-radius-sm);
    overflow: hidden;
    background: var(--ms-gray-50);
}
.ms-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ms-product-info {
    flex: 1;
    min-width: 0;
}
.ms-product-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-primary);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 2px;
}
.ms-product-title:hover {
    text-decoration: underline;
    color: var(--ms-accent);
}
.ms-product-title-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-gray-800);
    line-height: 1.3;
    margin-bottom: 2px;
}
.ms-product-brand {
    display: block;
    font-size: 11px;
    color: var(--ms-gray-500);
}
.ms-product-cat {
    display: inline-block;
    font-size: 10px;
    color: var(--ms-gray-500);
    background: var(--ms-gray-100);
    padding: 1px 6px;
    border-radius: 10px;
    margin-top: 3px;
}

.ms-product-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.ms-product-action .ms-product-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ms-gray-800);
}

.ms-products-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 2px solid var(--ms-gray-200);
    margin-bottom: 12px;
}
.ms-products-total span {
    font-size: 14px;
    color: var(--ms-gray-600);
}
.ms-products-total strong {
    font-size: 18px;
    color: var(--ms-primary);
}

/* Empty products state */
.ms-products-empty {
    text-align: center;
    padding: 32px 20px;
    background: var(--ms-gray-50);
    border: 1px dashed var(--ms-gray-300);
    border-radius: var(--ms-radius);
}
.ms-products-empty i {
    font-size: 32px;
    color: var(--ms-gray-300);
    margin-bottom: 8px;
}
.ms-products-empty p {
    color: var(--ms-gray-500);
    font-size: 13px;
    margin: 0 0 12px;
}

/* Text center utility */
.ms-text-center { text-align: center; }

/* Responsive: stack on mobile */
@media (max-width: 900px) {
    .ms-checklist-products-grid {
        grid-template-columns: 1fr;
    }
    .ms-products-column {
        position: static;
        order: -1; /* Show products first on mobile */
    }
}

@media (max-width: 600px) {
    .ms-product-item {
        flex-wrap: wrap;
    }
    .ms-product-action {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        margin-top: 8px;
    }
}

/* ==========================================================================
   v1.4.0: Section Headers, Featured Images, Section Dividers
   ========================================================================== */

/* Section headers within checklists */
.ms-checklist-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 16px 0 6px;
    background: var(--ms-accent-bg);
    border-left: 3px solid var(--ms-accent);
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--ms-primary);
}
.ms-checklist-section-header:first-child {
    margin-top: 0;
}
.ms-checklist-section-header i {
    color: var(--ms-accent);
    font-size: 13px;
}
.ms-section-count {
    margin-left: auto;
    background: var(--ms-accent-light);
    color: var(--ms-primary);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.ms-checklist-item.ms-section-grouped {
    margin-left: 12px;
    border-left: 2px solid var(--ms-gray-200);
    padding-left: 12px;
}

/* Featured image */
.ms-featured-image {
    margin: 0 0 20px;
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ms-gray-200);
}
.ms-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 400px;
    object-fit: cover;
}

/* Create view: section dividers */
.ms-create-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 12px 0 4px;
    background: var(--ms-accent-bg);
    border: 1px dashed var(--ms-accent);
    border-radius: var(--ms-radius-sm);
}
.ms-create-section .ms-section-name-input {
    flex: 1;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    color: var(--ms-primary);
    padding: 4px 8px;
    outline: none;
}
.ms-create-section .ms-section-name-input::placeholder {
    color: var(--ms-gray-500);
    font-weight: 400;
}
.ms-create-section .ms-section-name-input:focus {
    background: var(--ms-white);
    border-radius: var(--ms-radius-sm);
}

/* Browse card featured image */
.ms-tpl-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--ms-radius) var(--ms-radius) 0 0;
    margin: -12px -16px 12px;
    width: calc(100% + 32px);
}

/* ================================================================
   v1.4.1 - Section Blocks & Inline Reminder
   ================================================================ */

/* Section Block Container */
.ms-section-block {
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .15s;
}
.ms-section-block:hover { border-color: #b0ddd7; }

/* Section Title Bar */
.ms-section-title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ms-accent-bg);
    border-bottom: 2px solid var(--ms-accent);
}
.ms-section-title-bar .ms-section-icon { color: var(--ms-accent); font-size: 14px; flex-shrink: 0; }
.ms-section-title-bar .ms-section-name-input {
    flex: 0 1 auto;
    min-width: 80px;
    max-width: 200px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--ms-primary);
    padding: 2px 4px;
    outline: none;
}
.ms-section-title-bar .ms-section-name-input::placeholder { color: var(--ms-gray-400); font-weight: 400; }
.ms-section-title-bar .ms-section-name-input:focus { background: var(--ms-white); border-radius: 3px; box-shadow: 0 0 0 2px rgba(33,185,167,.2); }
.ms-section-item-count { font-size: 11px; color: var(--ms-gray-500); white-space: nowrap; }
.ms-section-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ms-section-remove { background: none; border: none; color: var(--ms-gray-400); cursor: pointer; padding: 4px; font-size: 14px; transition: color .15s; }
.ms-section-remove:hover { color: var(--ms-red); }
.ms-section-body { padding: 10px 12px 6px; }
.ms-btn-xs { padding: 3px 8px; font-size: 11px; }

/* Ghost button for Add Another Section */
.ms-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: transparent;
    color: var(--ms-gray-500);
    border: 1px dashed var(--ms-gray-300);
    border-radius: var(--ms-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ms-font);
    cursor: pointer;
    transition: all .15s;
}
.ms-btn-ghost:hover { border-color: var(--ms-accent); color: var(--ms-accent); background: var(--ms-accent-bg); }

/* Item Title Row — title + inline reminder on same line */
.ms-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ms-item-title-row .ms-input { flex: 1; min-width: 0; }

/* Inline Reminder Toggle */
.ms-item-reminder-inline {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    white-space: nowrap;
}
.ms-reminder-check {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: var(--ms-gray-100);
    border: 1px solid var(--ms-gray-200);
    border-radius: var(--ms-radius-sm);
    cursor: pointer;
    transition: all .15s;
    font-size: 12px;
    font-weight: 600;
    color: var(--ms-gray-500);
}
.ms-reminder-check:hover { border-color: var(--ms-amber); color: #b45309; }
.ms-reminder-check.active {
    background: #fef3c7;
    border-color: var(--ms-amber);
    color: #b45309;
    border-radius: var(--ms-radius-sm) 0 0 var(--ms-radius-sm);
}
.ms-reminder-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--ms-amber); cursor: pointer; }
.ms-reminder-check .fa-bell { font-size: 12px; color: var(--ms-amber); }
.ms-reminder-check span { font-size: 12px; }

/* Reminder days — slides in to the right when active */
.ms-reminder-days {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: #fef3c7;
    border: 1px solid var(--ms-amber);
    border-left: none;
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
    font-size: 12px;
    color: #92400e;
}
.ms-reminder-days.show { display: flex; }
.ms-reminder-days input[type="number"] {
    width: 36px;
    padding: 2px 4px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #fbbf24;
    border-radius: 3px;
    background: #fff;
    font-family: var(--ms-font);
    color: #92400e;
}
.ms-reminder-days input[type="number"]:focus { outline: none; border-color: var(--ms-amber); }

/* Full width notes on row 2 */
.ms-item-notes-full { width: 100%; }

/* Responsive */
@media (max-width: 600px) {
    .ms-item-title-row { flex-wrap: wrap; }
    .ms-item-reminder-inline { width: 100%; }
    .ms-reminder-check { flex: 1; justify-content: center; }
    .ms-section-title-bar { flex-wrap: wrap; gap: 6px; }
    .ms-section-right { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   v1.4.2 — Edit page reorganization + Service view shopping list
   ========================================================================== */

/* Edit page: Vehicle/RV assign row side by side */
.ms-edit-assign-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}

/* Edit page: Category + Difficulty + Status in one row */
.ms-edit-meta-row {
    display: flex;
    gap: 14px;
    align-items: flex-end;
}

/* Sidebar actions (save/cancel at top) */
.ms-sidebar-actions {
    margin-bottom: 12px;
}

/* Checkbox grid column layout for sidebar */
.ms-checkbox-grid-col {
    flex-direction: column;
    gap: 5px;
}

/* Assigned label compact styling */
.ms-assigned-label {
    font-size: 13px;
    padding: 6px 10px;
    background: var(--ms-accent-light, #e6f9f6);
    border-radius: var(--ms-radius-sm, 4px);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
}

/* =====================================================================
   Service View: Two-column grid (checklist + shopping list)
   ===================================================================== */
.ms-service-view-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 20px;
    align-items: start;
}
.ms-service-view-grid.ms-no-shopping {
    grid-template-columns: 1fr;
}

/* Checklist card */
.ms-service-checklist-card {
    background: var(--ms-white, #fff);
    border: 1px solid var(--ms-gray-200, #e9ecef);
    border-radius: var(--ms-radius, 8px);
    overflow: hidden;
}
.ms-checklist-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ms-gray-200, #e9ecef);
}
.ms-checklist-card-header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ms-primary);
    margin: 0;
}

/* Items with inline content (title + reminder on same line) */
.ms-item-content-inline {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Inline reminder tag (compact pill) */
.ms-item-reminder-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.4;
}
.ms-item-reminder-tag i {
    font-size: 9px;
}

/* =====================================================================
   Shopping List (right column — compact)
   ===================================================================== */
.ms-shopping-list-card {
    background: var(--ms-white, #fff);
    border: 1px solid var(--ms-gray-200, #e9ecef);
    border-radius: var(--ms-radius, 8px);
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.ms-shopping-list-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ms-gray-200, #e9ecef);
    font-size: 14px;
    font-weight: 700;
    color: var(--ms-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ms-shopping-list-header i {
    color: var(--ms-accent);
    font-size: 13px;
}

.ms-shopping-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--ms-gray-100, #f1f3f5);
    font-size: 13px;
    transition: background .1s;
}
.ms-shopping-item:last-child { border-bottom: none; }
.ms-shopping-item:hover { background: var(--ms-gray-50, #f8f9fa); }

/* Square checkbox */
.ms-shopping-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.ms-shopping-checkbox {
    display: none;
}
.ms-shopping-box {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ms-gray-300, #dee2e6);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    position: relative;
}
.ms-shopping-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    opacity: 0;
    transition: opacity .1s;
}
.ms-shopping-checkbox:checked + .ms-shopping-box {
    background: var(--ms-accent);
    border-color: var(--ms-accent);
}
.ms-shopping-checkbox:checked + .ms-shopping-box::after {
    opacity: 1;
}

.ms-shopping-name {
    flex: 1;
    color: var(--ms-gray-800, #343a40);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.ms-shopping-name-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ms-primary, #134c5c);
    text-decoration: none;
    transition: color .15s;
}
a.ms-shopping-name-link:hover {
    color: var(--ms-accent, #21b9a7);
    text-decoration: underline;
}
.ms-shopping-ext-icon {
    font-size: 10px;
    opacity: .45;
    margin-left: 4px;
    vertical-align: middle;
}
a.ms-shopping-name-link:hover .ms-shopping-ext-icon {
    opacity: .8;
}
.ms-shopping-item.checked .ms-shopping-name,
.ms-shopping-item.checked a.ms-shopping-name-link {
    text-decoration: line-through;
    color: var(--ms-gray-400, #adb5bd);
}

.ms-shopping-link {
    color: var(--ms-accent);
    font-size: 14px;
    flex-shrink: 0;
    text-decoration: none;
    opacity: .7;
    transition: opacity .15s;
}
.ms-shopping-link:hover { opacity: 1; }

/* =====================================================================
   Responsive overrides for v1.4.2 additions
   ===================================================================== */
@media (max-width: 900px) {
    .ms-edit-assign-row { grid-template-columns: 1fr; }
    .ms-edit-meta-row { flex-direction: column; }
    .ms-service-view-grid { grid-template-columns: 1fr; }
    .ms-shopping-list-card { position: static; }
}
@media (max-width: 480px) {
    .ms-edit-assign-row { grid-template-columns: 1fr; }
}

/* ================================================
   SERVICE VIEW — SECTION CARDS (v1.4.3)
   ================================================ */
.ms-section-card {
    margin-bottom: 10px;
}
.ms-section-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f0faf8 0%, #f8fffe 100%);
    border-bottom: 1px solid var(--ms-gray-200, #e9ecef);
    font-size: 14px;
    font-weight: 700;
    color: var(--ms-primary, #134c5c);
}
.ms-section-card-header i {
    color: var(--ms-accent, #21b9a7);
    font-size: 13px;
}
.ms-section-card-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ms-gray-500, #6c757d);
    background: var(--ms-gray-100, #f1f3f5);
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: auto;
}

/* Compact service items (less padding, smaller icons) */
.ms-service-item-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-bottom: 1px solid var(--ms-gray-100, #f1f3f5);
    background: var(--ms-white, #fff);
    transition: background .15s;
}
.ms-service-item-compact:last-child {
    border-bottom: none;
}
.ms-service-item-compact:hover {
    background: #fafffe;
}
.ms-service-item-compact.completed {
    background: var(--ms-gray-50, #f8f9fa);
    opacity: .7;
}
.ms-service-item-compact.completed .ms-item-title-sm {
    text-decoration: line-through;
    color: var(--ms-gray-500, #6c757d);
}

/* Compact check button */
.ms-check-btn-sm {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--ms-gray-300, #dee2e6);
    padding: 0;
    transition: color .15s;
    flex-shrink: 0;
    line-height: 1;
}
.ms-check-btn-sm:hover { color: var(--ms-accent, #21b9a7); }
.ms-service-item-compact.completed .ms-check-btn-sm { color: var(--ms-green, #38b000); }

/* Compact item title */
.ms-item-title-sm {
    font-size: 13px;
    font-weight: 500;
    color: var(--ms-gray-800, #212529);
}

/* ===== Browse Sidebar Filter Panels (v1.5.4) ===== */
.ms-filter-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ms-filter-panel-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    color: var(--ms-primary, #134c5c);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ms-filter-panel-header i {
    color: var(--ms-accent, #21b9a7);
    font-size: 13px;
    width: 16px;
    text-align: center;
}
.ms-filter-panel-body {
    padding: 12px 14px;
}
.ms-filter-panel-body-flush {
    padding: 0;
}
.ms-filter-panel-body-flush .ms-cat-tree {
    padding: 4px 0;
}
.ms-search-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-search-input:focus {
    outline: none;
    border-color: var(--ms-accent, #21b9a7);
    box-shadow: 0 0 0 3px rgba(33, 185, 167, 0.12);
}
.ms-filter-panel .ms-pill-group {
    gap: 5px;
}
.ms-filter-panel .ms-pill {
    font-size: 12px;
    padding: 5px 10px;
}
/* Loading row in table */
.ms-loading-row td {
    text-align: center;
    padding: 40px 16px;
    color: #94a3b8;
    font-size: 14px;
}

/* ===== v1.6.0 — Popular Checklists grid on directory ===== */
.ms-dir-top-section {
    margin-top: 32px;
}
.ms-dir-top-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 12px;
}
.ms-dir-top-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ms-gray-200);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.ms-dir-top-card:hover {
    border-color: var(--ms-accent);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    text-decoration: none;
    color: inherit;
}
.ms-dir-top-img {
    height: 120px;
    overflow: hidden;
    background: var(--ms-accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-dir-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ms-dir-top-img-placeholder i {
    font-size: 32px;
    color: var(--ms-accent);
    opacity: .5;
}
.ms-dir-top-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ms-dir-top-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ms-accent);
    font-weight: 600;
    margin-bottom: 4px;
}
.ms-dir-top-body h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ms-gray-800);
    margin: 0 0 8px;
    line-height: 1.3;
}
.ms-dir-top-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ms-gray-500);
}
.ms-dir-top-meta .ms-diff-tag {
    font-size: 10px;
    padding: 1px 6px;
}

@media (max-width: 992px) {
    .ms-dir-top-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ms-dir-top-grid { grid-template-columns: 1fr; }
}

/* Mobile action bar — hidden on desktop */
.ms-mobile-actions {
    display: none;
}

/* Checklist items — white card style for better contrast */
.ms-checklist-item {
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid var(--ms-gray-200);
    border-bottom: 1px solid var(--ms-gray-200);
}
.ms-checklist-item:last-child {
    margin-bottom: 0;
}

/* Bolder section headers */
.ms-checklist-section-header {
    background: var(--ms-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    border-left: none;
    border-radius: 8px;
    margin: 18px 0 8px;
}
.ms-checklist-section-header:first-child {
    margin-top: 0;
}
.ms-checklist-section-header i {
    color: var(--ms-accent);
}
.ms-section-count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* Grouped items indent with white background */
.ms-checklist-item.ms-section-grouped {
    margin-left: 0;
    border-left: 3px solid var(--ms-accent);
    padding-left: 14px;
}

/* ===== Mobile: ≤992px ===== */
@media (max-width: 992px) {
    /* Show mobile actions */
    .ms-mobile-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 14px 0 16px;
        padding: 12px 0;
        border-top: 1px solid var(--ms-gray-200);
        border-bottom: 1px solid var(--ms-gray-200);
    }
    .ms-mobile-actions .ms-btn {
        flex: 1;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 10px;
    }
    /* Hide sidebar action card on mobile (duplicate) */
    .ms-detail-sidebar .ms-sidebar-card:first-child {
        display: none;
    }
    /* Smaller h1 on tablet/mobile */
    .ms-detail-header h1 {
        font-size: 18px;
        line-height: 1.3;
    }
}

/* ===== Mobile: ≤480px ===== */
@media (max-width: 480px) {
    .ms-detail-header h1 {
        font-size: 16px;
    }
    .ms-mobile-actions .ms-btn {
        font-size: 11px;
        padding: 7px 6px;
    }
}