/* ==========================================================================
   My Travel Planner — Kanban Itinerary Board Styles
   ========================================================================== */

/* ── Board layout ────────────────────────────────────────────────────────── */

.mtp-board-section {
    display:        flex;
    flex-direction: column;
    height:         100%;
    min-height:     0;
    background:     var(--mtp-bg, #fff);
}

/* ── Board toolbar ───────────────────────────────────────────────────────── */

.mtp-board-toolbar {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 14px;
    background:    var(--mtp-bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
    flex-wrap:     wrap;
}

.mtp-board-trip-name {
    font-size:   14px;
    font-weight: 600;
    color:       var(--mtp-text, #1a1a1a);
    margin-right: auto;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    max-width:    200px;
}

.mtp-board-toolbar-actions {
    display: flex;
    gap:     6px;
    align-items: center;
}

.mtp-toolbar-btn {
    padding:       5px 10px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text-muted, #6b7280);
    font-size:     12px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           4px;
    transition:    all 0.15s ease;
    font-family:   var(--mtp-font, sans-serif);
    white-space:   nowrap;
}

.mtp-toolbar-btn:hover {
    background:   var(--mtp-bg-tertiary, #f0f0f0);
    color:        var(--mtp-text, #1a1a1a);
    border-color: var(--mtp-text-muted, #6b7280);
}

.mtp-toolbar-btn.mtp-active {
    background:   var(--mtp-primary, #2563eb);
    color:        #fff;
    border-color: var(--mtp-primary, #2563eb);
}

/* ── Scroll wrapper ──────────────────────────────────────────────────────── */

.mtp-board-scroll {
    flex:          1;
    overflow-x:    auto;
    overflow-y:    hidden;
    padding:       12px 14px;
    min-height:    0;
}

.mtp-board-columns {
    display:     flex;
    gap:         12px;
    height:      100%;
    align-items: flex-start;
    min-width:   max-content;
}

/* ── Day column ──────────────────────────────────────────────────────────── */

.mtp-day-column {
    width:          240px;
    flex-shrink:    0;
    display:        flex;
    flex-direction: column;
    background:     var(--mtp-bg-secondary, #f8f9fa);
    border:         1px solid var(--mtp-border, #e0e0e0);
    border-radius:  10px;
    overflow:       hidden;
    max-height:     calc(100vh - 260px);
    min-height:     120px;
}

.mtp-day-column.mtp-drag-over {
    border-color: var(--mtp-primary, #2563eb);
    box-shadow:   0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Unscheduled column has slightly different style */
.mtp-day-column--unscheduled {
    border-style:  dashed;
    opacity:       0.85;
}

/* ── Column header ───────────────────────────────────────────────────────── */

.mtp-column-header {
    padding:       10px 12px 8px;
    flex-shrink:   0;
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
}

.mtp-column-header-top {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.mtp-column-day-label {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--mtp-text-muted, #6b7280);
}

.mtp-column-date {
    font-size:  11px;
    color:      var(--mtp-text-muted, #6b7280);
}

.mtp-column-title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--mtp-text, #1a1a1a);
    margin-top:  3px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* ── Cards container ─────────────────────────────────────────────────────── */

.mtp-cards-container {
    flex:       1;
    overflow-y: auto;
    padding:    8px;
    display:    flex;
    flex-direction: column;
    gap:        6px;
    min-height: 40px;
}

.mtp-cards-container.mtp-drag-over-cards {
    background:    rgba(37, 99, 235, 0.04);
    border-radius: 6px;
}

/* ── Activity card ───────────────────────────────────────────────────────── */

.mtp-activity-card {
    background:    var(--mtp-bg, #fff);
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 8px;
    padding:       9px 10px;
    cursor:        grab;
    transition:    box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    position:      relative;
    user-select:   none;
}

.mtp-activity-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: var(--mtp-primary, #2563eb);
}

.mtp-activity-card:active,
.mtp-activity-card.mtp-dragging {
    cursor:     grabbing;
    opacity:    0.5;
    transform:  scale(0.98);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.mtp-activity-card.mtp-drag-placeholder {
    background:    var(--mtp-bg-tertiary, #f0f0f0);
    border:        2px dashed var(--mtp-primary, #2563eb);
    opacity:       0.4;
    min-height:    56px;
}

/* ── Card header row ─────────────────────────────────────────────────────── */

.mtp-card-header {
    display:     flex;
    align-items: flex-start;
    gap:         7px;
}

.mtp-card-icon {
    font-size:  16px;
    flex-shrink: 0;
    margin-top:  1px;
    line-height: 1;
}

.mtp-card-main {
    flex:      1;
    min-width: 0;
}

.mtp-card-name {
    font-size:     13px;
    font-weight:   600;
    color:         var(--mtp-text, #1a1a1a);
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.mtp-card-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px;
    margin-top: 4px;
    align-items: center;
}

/* Time slot */
.mtp-card-time {
    font-size: 11px;
    color:     var(--mtp-text-muted, #6b7280);
}

/* Cost */
.mtp-card-cost {
    font-size:     11px;
    color:         var(--mtp-text-muted, #6b7280);
    font-weight:   500;
}

/* ── Booking status badge ────────────────────────────────────────────────── */

.mtp-booking-badge {
    font-size:     10px;
    font-weight:   600;
    padding:       1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mtp-booking-badge--required    { background: #fef2f2; color: #dc2626; }
.mtp-booking-badge--recommended { background: #fffbeb; color: #d97706; }
.mtp-booking-badge--walk_in     { background: #f0fdf4; color: #16a34a; }

/* ── Star rating ─────────────────────────────────────────────────────────── */

.mtp-card-stars {
    font-size:   11px;
    color:       #f59e0b;
    line-height: 1;
}

/* ── Place link indicator ────────────────────────────────────────────────── */

.mtp-card-place-indicator {
    font-size: 10px;
    color:     var(--mtp-accent, #0ea5e9);
    cursor:    pointer;
    text-decoration: underline;
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
    max-width:  100%;
    display:    block;
    margin-top: 3px;
}

/* ── Backup count badge ──────────────────────────────────────────────────── */

.mtp-card-backup-badge {
    font-size:     10px;
    color:         var(--mtp-text-muted, #6b7280);
    background:    var(--mtp-bg-tertiary, #f0f0f0);
    border-radius: 3px;
    padding:       1px 4px;
}

/* ── Card expand panel ───────────────────────────────────────────────────── */

.mtp-card-detail {
    margin-top:  8px;
    padding-top: 8px;
    border-top:  1px solid var(--mtp-border, #e0e0e0);
    font-size:   12px;
    color:       var(--mtp-text, #1a1a1a);
    display:     none;
}

.mtp-activity-card.mtp-expanded .mtp-card-detail {
    display: block;
}

.mtp-card-detail-row {
    margin-bottom: 5px;
    line-height:   1.5;
}

.mtp-card-detail-label {
    font-weight: 600;
    color:       var(--mtp-text-muted, #6b7280);
    margin-right: 4px;
}

.mtp-card-backup-list {
    margin: 4px 0 0 0;
    padding: 0;
    list-style: none;
}

.mtp-card-backup-list li {
    font-size:   11px;
    color:       var(--mtp-text-muted, #6b7280);
    padding:     1px 0;
}

.mtp-card-backup-list li::before {
    content: "→ ";
    color: var(--mtp-accent, #0ea5e9);
}

.mtp-card-actions {
    display:        flex;
    gap:            6px;
    margin-top:     8px;
    justify-content: flex-end;
}

.mtp-card-action-btn {
    padding:       3px 8px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 4px;
    font-size:     11px;
    cursor:        pointer;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text-muted, #6b7280);
    font-family:   var(--mtp-font, sans-serif);
    transition:    all 0.15s ease;
}

.mtp-card-action-btn:hover  { background: var(--mtp-bg-tertiary, #f0f0f0); color: var(--mtp-text, #1a1a1a); }
.mtp-card-action-btn--delete { color: var(--mtp-error, #ef4444); }
.mtp-card-action-btn--delete:hover { background: #fef2f2; border-color: var(--mtp-error, #ef4444); }

/* ── Column footer (daily totals) ────────────────────────────────────────── */

.mtp-column-footer {
    padding:       8px 12px;
    border-top:    1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    background:    var(--mtp-bg-secondary, #f8f9fa);
}

.mtp-daily-total {
    font-size:  11px;
    color:      var(--mtp-text-muted, #6b7280);
    font-weight: 500;
}

.mtp-add-card-btn {
    font-size:     12px;
    color:         var(--mtp-primary, #2563eb);
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       2px 4px;
    border-radius: 4px;
    transition:    background 0.15s ease;
    font-family:   var(--mtp-font, sans-serif);
    display:       flex;
    align-items:   center;
    gap:           3px;
}

.mtp-add-card-btn:hover { background: var(--mtp-bg-tertiary, #f0f0f0); }

/* ── Quick-add form ──────────────────────────────────────────────────────── */

.mtp-quick-add-form {
    padding:    8px;
    background: var(--mtp-bg, #fff);
    border:     1px solid var(--mtp-primary, #2563eb);
    border-radius: 8px;
    display:    none;
}

.mtp-quick-add-form.mtp-visible { display: block; }

.mtp-quick-add-input {
    width:         100%;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 5px;
    padding:       6px 8px;
    font-size:     12px;
    font-family:   var(--mtp-font, sans-serif);
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
    outline:       none;
    margin-bottom: 6px;
}

.mtp-quick-add-input:focus { border-color: var(--mtp-primary, #2563eb); }

.mtp-quick-add-category {
    width:         100%;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 5px;
    padding:       5px 8px;
    font-size:     12px;
    font-family:   var(--mtp-font, sans-serif);
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
    margin-bottom: 6px;
    cursor:        pointer;
}

.mtp-quick-add-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             6px;
}

.mtp-quick-add-cancel {
    font-size:     11px;
    color:         var(--mtp-text-muted, #6b7280);
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       3px 6px;
    border-radius: 4px;
    font-family:   var(--mtp-font, sans-serif);
}

.mtp-quick-add-save {
    font-size:     11px;
    color:         #fff;
    background:    var(--mtp-primary, #2563eb);
    border:        none;
    cursor:        pointer;
    padding:       4px 10px;
    border-radius: 4px;
    font-family:   var(--mtp-font, sans-serif);
    font-weight:   600;
}

/* ── List view ───────────────────────────────────────────────────────────── */

.mtp-board-list-view {
    padding: 0 14px 14px;
    overflow-y: auto;
    flex: 1;
}

.mtp-list-day-section {
    margin-bottom: 16px;
}

.mtp-list-day-header {
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--mtp-text-muted, #6b7280);
    padding:        6px 0 4px;
    border-bottom:  1px solid var(--mtp-border, #e0e0e0);
    margin-bottom:  6px;
    display:        flex;
    justify-content: space-between;
}

.mtp-list-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 10px;
    background:    var(--mtp-bg-secondary, #f8f9fa);
    border-radius: 7px;
    margin-bottom: 4px;
    font-size:     13px;
}

.mtp-list-item-icon { font-size: 15px; flex-shrink: 0; }
.mtp-list-item-name { font-weight: 600; flex: 1; color: var(--mtp-text, #1a1a1a); }
.mtp-list-item-time { font-size: 11px; color: var(--mtp-text-muted, #6b7280); }
.mtp-list-item-cost { font-size: 11px; color: var(--mtp-text-muted, #6b7280); }

/* ── Trip manager ────────────────────────────────────────────────────────── */

.mtp-trip-manager {
    padding:       12px 14px;
    background:    var(--mtp-bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
}

.mtp-trip-select-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.mtp-trip-select {
    flex:          1;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    padding:       6px 10px;
    font-size:     13px;
    font-family:   var(--mtp-font, sans-serif);
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
    cursor:        pointer;
}

.mtp-new-trip-btn {
    padding:       6px 12px;
    background:    var(--mtp-primary, #2563eb);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    font-family:   var(--mtp-font, sans-serif);
    white-space:   nowrap;
    transition:    background 0.15s ease;
}

.mtp-new-trip-btn:hover { background: var(--mtp-primary-hover, #1d4ed8); }

/* ── New trip form ───────────────────────────────────────────────────────── */

.mtp-new-trip-form {
    margin-top:    10px;
    display:       none;
    flex-direction: column;
    gap:           8px;
}

.mtp-new-trip-form.mtp-visible { display: flex; }

.mtp-trip-form-row {
    display: flex;
    gap:     8px;
}

.mtp-trip-form-input,
.mtp-trip-form-select {
    flex:          1;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    padding:       7px 10px;
    font-size:     13px;
    font-family:   var(--mtp-font, sans-serif);
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
    outline:       none;
    transition:    border-color 0.15s ease;
}

.mtp-trip-form-input:focus,
.mtp-trip-form-select:focus { border-color: var(--mtp-primary, #2563eb); }

.mtp-trip-form-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             8px;
}

.mtp-trip-form-cancel {
    padding:       6px 12px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    font-size:     12px;
    cursor:        pointer;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text-muted, #6b7280);
    font-family:   var(--mtp-font, sans-serif);
}

.mtp-trip-form-save {
    padding:       6px 14px;
    background:    var(--mtp-primary, #2563eb);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    font-family:   var(--mtp-font, sans-serif);
    transition:    background 0.15s ease;
}

.mtp-trip-form-save:hover { background: var(--mtp-primary-hover, #1d4ed8); }

/* ── Empty board state ───────────────────────────────────────────────────── */

.mtp-board-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex:            1;
    padding:         32px 16px;
    text-align:      center;
    color:           var(--mtp-text-muted, #6b7280);
}

.mtp-board-empty-icon { font-size: 40px; margin-bottom: 12px; }
.mtp-board-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--mtp-text, #1a1a1a); }
.mtp-board-empty-text  { font-size: 13px; line-height: 1.5; max-width: 300px; }

/* ── Two-panel widget layout ─────────────────────────────────────────────── */

.mtp-planner-widget.mtp-two-panel {
    display:      grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows:    auto 1fr;
    min-height:   600px;
    max-width:    100%;
}

.mtp-two-panel .mtp-widget-header {
    grid-column: 1 / -1;
}

.mtp-two-panel .mtp-chat-panel {
    display:        flex;
    flex-direction: column;
    border-right:   1px solid var(--mtp-border, #e0e0e0);
    min-height:     0;
    overflow:       hidden;
}

.mtp-two-panel .mtp-board-panel {
    display:        flex;
    flex-direction: column;
    min-height:     0;
    overflow:       hidden;
}

/* Mobile: stacked with tabs */
@media (max-width: 720px) {
    .mtp-planner-widget.mtp-two-panel {
        grid-template-columns: 1fr;
        grid-template-rows:    auto auto 1fr;
    }

    .mtp-two-panel .mtp-chat-panel  { display: none; }
    .mtp-two-panel .mtp-board-panel { display: flex; }

    .mtp-two-panel .mtp-chat-panel.mtp-panel-active  { display: flex; }
    .mtp-two-panel .mtp-board-panel.mtp-panel-active { display: flex; }
    .mtp-two-panel .mtp-board-panel:not(.mtp-panel-active) { display: none; }

    .mtp-panel-tabs {
        grid-column: 1 / -1;
        display:     flex;
        border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    }

    .mtp-panel-tab {
        flex:        1;
        padding:     9px;
        background:  var(--mtp-bg-secondary, #f8f9fa);
        border:      none;
        font-size:   13px;
        font-weight: 600;
        cursor:      pointer;
        color:       var(--mtp-text-muted, #6b7280);
        font-family: var(--mtp-font, sans-serif);
        transition:  all 0.15s ease;
        border-bottom: 2px solid transparent;
    }

    .mtp-panel-tab.mtp-active {
        color:         var(--mtp-primary, #2563eb);
        background:    var(--mtp-bg, #fff);
        border-bottom-color: var(--mtp-primary, #2563eb);
    }
}

@media (min-width: 721px) {
    .mtp-panel-tabs { display: none; }
    .mtp-two-panel .mtp-chat-panel  { display: flex; }
    .mtp-two-panel .mtp-board-panel { display: flex; }
}

/* ── Day column category color accents ──────────────────────────────────── */
/* Left border stripe on each card matches category color */

.mtp-activity-card { border-left: 3px solid transparent; }
.mtp-cat-restaurant  { border-left-color: #f97316; }
.mtp-cat-bar         { border-left-color: #8b5cf6; }
.mtp-cat-cafe        { border-left-color: #92400e; }
.mtp-cat-hotel,
.mtp-cat-hostel      { border-left-color: #3b82f6; }
.mtp-cat-activity,
.mtp-cat-attraction,
.mtp-cat-museum,
.mtp-cat-market      { border-left-color: #10b981; }
.mtp-cat-dive,
.mtp-cat-snorkel     { border-left-color: #0891b2; }
.mtp-cat-campground,
.mtp-cat-unique_stay { border-left-color: #92400e; }
.mtp-cat-flight      { border-left-color: #7c3aed; }
.mtp-cat-transport,
.mtp-cat-car,
.mtp-cat-train,
.mtp-cat-ferry,
.mtp-cat-bus,
.mtp-cat-bike,
.mtp-cat-walk,
.mtp-cat-motorcycle,
.mtp-cat-cruise      { border-left-color: #9ca3af; }
.mtp-cat-park,
.mtp-cat-beach       { border-left-color: #16a34a; }
.mtp-cat-free_time   { border-left-color: #fbbf24; }

/* ==========================================================================
   Board Tabs (Itinerary / Map / Packing / Expenses)
   ========================================================================== */

.mtp-board-tabs {
    display:       flex;
    gap:           2px;
    padding:       8px 12px 0;
    background:    var(--mtp-bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
    overflow-x:    auto;
    scrollbar-width: none;
}
.mtp-board-tabs::-webkit-scrollbar { display: none; }

.mtp-board-tab {
    padding:          6px 14px;
    border:           1px solid transparent;
    border-bottom:    none;
    border-radius:    8px 8px 0 0;
    background:       transparent;
    color:            var(--mtp-text-muted, #6b7280);
    font-size:        13px;
    font-weight:      500;
    cursor:           pointer;
    white-space:      nowrap;
    transition:       background 0.15s, color 0.15s;
}
.mtp-board-tab:hover {
    background: var(--mtp-bg-tertiary, #f0f0f0);
    color:      var(--mtp-text, #1a1a1a);
}
.mtp-board-tab--active,
.mtp-board-tab[aria-selected="true"] {
    background:   var(--mtp-bg, #fff);
    color:        var(--mtp-primary, #2563eb);
    border-color: var(--mtp-border, #e0e0e0);
    font-weight:  600;
    position:     relative;
}
/* Hide the bottom border so tab merges with panel */
.mtp-board-tab--active::after,
.mtp-board-tab[aria-selected="true"]::after {
    content:    '';
    position:   absolute;
    bottom:     -1px;
    left:       0;
    right:      0;
    height:     2px;
    background: var(--mtp-bg, #fff);
}

.mtp-board-tab-panels {
    flex:       1 1 0;
    min-height: 0;
    overflow:   hidden;
    position:   relative;
}

.mtp-board-tab-panel {
    display:    none;
    height:     100%;
    overflow-y: auto;
}
.mtp-board-tab-panel--active {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Packing List Panel
   ========================================================================== */

.mtp-packing-panel {
    display:        flex;
    flex-direction: column;
    height:         100%;
    padding:        0;
}

.mtp-packing-toolbar {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     10px 14px;
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink: 0;
    flex-wrap:   wrap;
}
.mtp-packing-toolbar label {
    font-size:   13px;
    font-weight: 500;
    color:       var(--mtp-text-muted, #6b7280);
}
.mtp-packing-toolbar select {
    font-size:     13px;
    padding:       4px 8px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
}

.mtp-packing-lists {
    flex:       1 1 0;
    overflow-y: auto;
    padding:    12px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.mtp-packing-list-card {
    background:    var(--mtp-bg, #fff);
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: var(--mtp-radius-sm, 8px);
    overflow:      hidden;
    transition:    box-shadow 0.15s;
}
.mtp-packing-list-card--active {
    border-color: var(--mtp-primary, #2563eb);
    box-shadow:   0 0 0 2px rgba(37,99,235,0.15);
}

.mtp-packing-list-header {
    display:      flex;
    align-items:  center;
    gap:          8px;
    padding:      10px 12px;
    background:   var(--mtp-bg-secondary, #f8f9fa);
    cursor:       pointer;
    user-select:  none;
}
.mtp-packing-list-name {
    flex:        1 1 0;
    font-size:   14px;
    font-weight: 600;
    color:       var(--mtp-text, #1a1a1a);
}
.mtp-packing-list-progress-text {
    font-size:  12px;
    color:      var(--mtp-text-muted, #6b7280);
}
.mtp-packing-list-toggle {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--mtp-text-muted, #6b7280);
    padding:       2px 6px;
    border-radius: 4px;
    font-size:     14px;
}
.mtp-packing-list-delete {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--mtp-error, #ef4444);
    padding:       2px 6px;
    border-radius: 4px;
    font-size:     14px;
    opacity:       0.6;
    transition:    opacity 0.15s;
}
.mtp-packing-list-delete:hover { opacity: 1; }

.mtp-packing-progress-bar-wrap {
    height:        4px;
    background:    var(--mtp-bg-tertiary, #f0f0f0);
    border-radius: 2px;
    overflow:      hidden;
    margin:        0 12px 8px;
}
.mtp-packing-progress-bar {
    height:        100%;
    background:    var(--mtp-success, #10b981);
    border-radius: 2px;
    transition:    width 0.3s ease;
}

.mtp-packing-items {
    list-style: none;
    margin:     0;
    padding:    4px 0 8px;
}
.mtp-packing-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 12px;
    transition:  opacity 0.2s;
}
.mtp-packing-item.mtp-removing { opacity: 0.4; pointer-events: none; }
.mtp-packing-item--checked .mtp-packing-item-name {
    text-decoration: line-through;
    color:           var(--mtp-text-muted, #6b7280);
}
.mtp-packing-item-check { cursor: pointer; }
.mtp-packing-item-name {
    flex:      1 1 0;
    font-size: 13px;
    color:     var(--mtp-text, #1a1a1a);
}
.mtp-packing-item-qty {
    font-size:  11px;
    color:      var(--mtp-text-muted, #6b7280);
    background: var(--mtp-bg-tertiary, #f0f0f0);
    padding:    1px 5px;
    border-radius: 10px;
}
.mtp-packing-item-delete {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--mtp-error, #ef4444);
    font-size:     14px;
    padding:       2px 4px;
    opacity:       0;
    transition:    opacity 0.15s;
}
.mtp-packing-item:hover .mtp-packing-item-delete { opacity: 0.6; }
.mtp-packing-item:hover .mtp-packing-item-delete:hover { opacity: 1; }

.mtp-packing-add-item-local {
    padding:       6px 12px 10px;
    border-top:    1px solid var(--mtp-border, #e0e0e0);
}

.mtp-packing-add-item {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 14px;
    border-top:    1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
}
.mtp-packing-add-item input[type="text"] {
    flex:          1 1 0;
    padding:       6px 10px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    font-size:     13px;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
}
.mtp-packing-add-item input[type="number"] {
    width:         54px;
    padding:       6px 8px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    font-size:     13px;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
}

.mtp-packing-empty,
.mtp-packing-loading {
    text-align:  center;
    padding:     40px 20px;
    color:       var(--mtp-text-muted, #6b7280);
    font-size:   14px;
}

/* ==========================================================================
   Expense Tracker Panel
   ========================================================================== */

.mtp-expense-panel {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

.mtp-expense-summary {
    display:       flex;
    gap:           16px;
    padding:       12px 14px;
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
    flex-wrap:     wrap;
}
.mtp-expense-summary-item {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.mtp-expense-summary-label {
    font-size:  11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:      var(--mtp-text-muted, #6b7280);
    font-weight: 600;
}
.mtp-expense-summary-value {
    font-size:   20px;
    font-weight: 700;
    color:       var(--mtp-text, #1a1a1a);
}
.mtp-expense-summary-value.mtp-expense-over { color: var(--mtp-error, #ef4444); }

.mtp-budget-progress-wrap {
    padding:    0 14px 10px;
    flex-shrink: 0;
}
.mtp-budget-progress-track {
    height:        6px;
    background:    var(--mtp-bg-tertiary, #f0f0f0);
    border-radius: 3px;
    overflow:      hidden;
}
.mtp-budget-progress-bar {
    height:        100%;
    background:    var(--mtp-success, #10b981);
    border-radius: 3px;
    transition:    width 0.3s ease;
}
.mtp-budget-progress-bar--over { background: var(--mtp-error, #ef4444); }

.mtp-expense-toolbar {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 14px;
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink: 0;
    flex-wrap:   wrap;
}
.mtp-expense-toolbar select {
    font-size:     13px;
    padding:       4px 8px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
}

.mtp-expense-form-row {
    padding:       10px 14px;
    background:    var(--mtp-bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink:   0;
}
.mtp-expense-form-grid {
    display:               grid;
    grid-template-columns: 1fr 90px 80px;
    gap:                   6px;
    margin-bottom:         6px;
}
.mtp-expense-form-grid2 {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   6px;
}
.mtp-expense-form-row input,
.mtp-expense-form-row select {
    padding:       6px 10px;
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: 6px;
    font-size:     13px;
    background:    var(--mtp-bg, #fff);
    color:         var(--mtp-text, #1a1a1a);
    width:         100%;
    box-sizing:    border-box;
}
.mtp-expense-form-actions {
    display:     flex;
    gap:         6px;
    margin-top:  6px;
    justify-content: flex-end;
}

.mtp-expense-list {
    flex:       1 1 0;
    overflow-y: auto;
    padding:    8px 14px;
    display:    flex;
    flex-direction: column;
    gap:        4px;
}

.mtp-expense-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 10px;
    background:    var(--mtp-bg, #fff);
    border:        1px solid var(--mtp-border, #e0e0e0);
    border-radius: var(--mtp-radius-xs, 4px);
    font-size:     13px;
    transition:    opacity 0.2s;
}
.mtp-expense-row.mtp-removing { opacity: 0.4; pointer-events: none; }
.mtp-expense-row-icon { font-size: 18px; flex-shrink: 0; }
.mtp-expense-row-main { flex: 1 1 0; min-width: 0; }
.mtp-expense-row-desc {
    font-weight:   500;
    color:         var(--mtp-text, #1a1a1a);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.mtp-expense-row-meta {
    font-size: 11px;
    color:     var(--mtp-text-muted, #6b7280);
    margin-top: 1px;
}
.mtp-expense-row-cat {
    font-size:     11px;
    background:    var(--mtp-bg-tertiary, #f0f0f0);
    padding:       2px 6px;
    border-radius: 10px;
    color:         var(--mtp-text-muted, #6b7280);
    white-space:   nowrap;
}
.mtp-expense-row-split {
    font-size: 11px;
    color:     var(--mtp-accent, #0ea5e9);
}
.mtp-expense-row-amount {
    font-weight: 600;
    color:       var(--mtp-text, #1a1a1a);
    white-space: nowrap;
}
.mtp-expense-row-delete {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--mtp-error, #ef4444);
    font-size:  14px;
    padding:    2px 4px;
    opacity:    0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.mtp-expense-row:hover .mtp-expense-row-delete { opacity: 0.6; }
.mtp-expense-row:hover .mtp-expense-row-delete:hover { opacity: 1; }

/* Breakdown chart */
.mtp-expense-breakdown {
    padding:    10px 14px;
    border-top: 1px solid var(--mtp-border, #e0e0e0);
    flex-shrink: 0;
}
.mtp-expense-breakdown-title {
    font-size:   12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:       var(--mtp-text-muted, #6b7280);
    margin-bottom: 8px;
}
.mtp-expense-cat-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 5px;
    font-size:   12px;
}
.mtp-expense-cat-icon { font-size: 14px; flex-shrink: 0; }
.mtp-expense-cat-label {
    width:      80px;
    flex-shrink: 0;
    color:      var(--mtp-text-muted, #6b7280);
    overflow:   hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mtp-expense-cat-bar-wrap {
    flex:          1 1 0;
    height:        8px;
    background:    var(--mtp-bg-tertiary, #f0f0f0);
    border-radius: 4px;
    overflow:      hidden;
}
.mtp-expense-cat-bar {
    height:        100%;
    background:    var(--mtp-primary, #2563eb);
    border-radius: 4px;
    transition:    width 0.3s ease;
}
.mtp-expense-cat-amount {
    width:       60px;
    text-align:  right;
    font-weight: 600;
    color:       var(--mtp-text, #1a1a1a);
    flex-shrink: 0;
}

.mtp-expense-empty,
.mtp-expense-loading {
    text-align:  center;
    padding:     40px 20px;
    color:       var(--mtp-text-muted, #6b7280);
    font-size:   14px;
}