/* ================================================
   CLAN PLANNER – UI Overhaul
   Palette:
     Page BG:     #0b1120
     Section BG:  #0f1729
     Card:        #151f35
     Card urgent: #7a1515
     Card pay:    #7a1515
     Card event:  #1e2d4a
     Input:       #2a3650
     Btn primary: #1e2d4a
     Btn green:   #3d6b35
     Btn red:     #8b1a1a
     Btn grey:    #4a5568
     Text white:  #ffffff
     Text muted:  #7a8ba8
     Label:       #7a8ba8
================================================ */

/* ── Reset ───────────────────────────────────── */
.cp-wrap *, .cp-wrap *::before, .cp-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Wrapper ─────────────────────────────────── */
.cp-wrap {
    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
    background: #0b1120;
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    color: #fff;
    position: relative;
    overflow-x: hidden;
}

/* ── OLD HEADER — hidden in new UI ──────────────
   Keep the element so PHP doesn't break, just
   hide it visually.
─────────────────────────────────────────────── */
.cp-header { display: none; }

/* ── SUBHEADER (page title + burger) ────────── */
.cp-subheader {
    background: #0b1120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 14px;
    border-bottom: none;
}
.cp-page-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.cp-menu-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px;
}
/* 3-line hamburger drawn with CSS */
.cp-menu-btn::before,
.cp-menu-btn::after,
.cp-menu-btn span {
    content: '';
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    width: 100%;
}
/* Override: render as ≡ icon via text since PHP outputs ☰ */
.cp-menu-btn { font-size: 0; width: auto; flex-direction: row; }
.cp-menu-btn::before, .cp-menu-btn::after { display: none; }

/* Re-style the text hamburger character */
.cp-subheader .cp-menu-btn {
    font-size: 24px;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ── MENU OVERLAY ────────────────────────────── */
.cp-menu-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11,17,32,0.97);
    z-index: 9999;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 20px;
}
.cp-menu-overlay.open { display: flex; }

.cp-menu-close {
    position: absolute;
    top: 24px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}
.cp-menu-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 60px;
}
.cp-menu-heading {
    font-size: 13px;
    font-weight: 700;
    color: #7a8ba8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cp-menu-item {
    display: block;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #151f35;
    border-radius: 14px;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: background 0.15s;
}
.cp-menu-item:hover { background: #1e2d4a; color: #fff; }
.cp-menu-logout {
    color: #e05555;
    background: #1a1525;
}
.cp-menu-logout:hover { background: #2a1e2e; }

/* ── BODY ────────────────────────────────────── */
.cp-body { padding: 16px 20px 32px; }
.cp-login-wrap .cp-body { padding: 24px 24px; }

/* ── SECTION LABELS ──────────────────────────── */
.cp-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #7a8ba8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 4px;
}

/* ── SECTION TITLE (old .cp-section-title) ───── */
.cp-section-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ── TOP BUTTONS ─────────────────────────────── */
.cp-top-btns {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* ── BUTTONS ─────────────────────────────────── */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 30px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    text-decoration: none;
    transition: filter 0.15s;
    color: #fff;
    letter-spacing: 0.2px;
}
.cp-btn:hover  { filter: brightness(1.12); }
.cp-btn:active { filter: brightness(0.92); }

/* New default button — dark navy pill */
.cp-btn-green     { background: #3d6b35; }
.cp-btn-gold      { background: #1e2d4a; }
.cp-btn-red       { background: #8b1a1a; }
.cp-btn-dark      { background: #1e2d4a; opacity: 0.5; cursor: not-allowed; }
.cp-btn-grey-pill { background: #1e2d4a; }
.cp-btn-completed { background: #1e2d4a; }

/* Login-specific */
.cp-login-btns {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.cp-forgot {
    display: block;
    text-align: center;
    color: #7a8ba8;
    font-size: 14px;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    margin-top: 8px;
}

/* ── INPUTS ──────────────────────────────────── */
.cp-input {
    width: 100%;
    background: #2a3650;
    border: none;
    border-radius: 30px;
    padding: 16px 20px;
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 12px;
    outline: none;
    display: block;
    appearance: none;
    -webkit-appearance: none;
}
.cp-input::placeholder { color: #7a8ba8; }
.cp-select { background-image: none; cursor: pointer; }
.cp-input option { background: #1e2d4a; color: #fff; }
.cp-input-readonly { cursor: default; }
.cp-date-input { color: #ffffff; }
.cp-date-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* Error message */
.cp-error-msg {
    background: rgba(139,26,26,0.25);
    border: 1px solid #8b1a1a;
    color: #ff8080;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    text-align: center;
}

/* ── CARDS (legacy, kept for finance/diary) ─── */
.cp-card {
    background: #0f1729;
    border-radius: 16px;
    padding: 18px 16px;
    margin-bottom: 24px;
}
.cp-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #7a8ba8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.cp-card-btns {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.cp-cat-title {
    font-size: 12px;
    font-weight: 700;
    color: #7a8ba8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}
.cp-todo-heading {
    font-size: 12px;
    font-weight: 700;
    color: #7a8ba8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-left: 2px;
}
.cp-cat-card { margin-bottom: 14px; }

/* ── TASK / EVENT ROW LISTS ──────────────────── */
.cp-task-list { display: flex; flex-direction: column; gap: 10px; }

/* ── TASK ROW (new icon-based design) ────────── */
.cp-task-row-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}
.cp-task-row-wrap.swiped .cp-task-swipe-actions { transform: translateX(0); }
.cp-task-row-wrap.swiped .cp-task-row           { transform: translateX(-148px); }

.cp-task-swipe-actions {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.cp-btn-edit {
    background: #4a5568;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.cp-btn-delete-swipe {
    background: #8b1a1a;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cp-task-row {
    background: #151f35;
    border: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    transition: transform 0.25s ease;
    cursor: grab;
    user-select: none;
}
/* Urgent tasks get red/maroon background */
.cp-task-row.cp-urgent-row-style,
.cp-urgent-tasks-section .cp-task-row {
    background: #7a1515;
}
.cp-task-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
    line-height: 1.3;
}
.cp-task-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}
.cp-task-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: rgba(255,255,255,0.5);
}

/* Circular checkbox */
.cp-checkbox {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #3d6b35;
    transition: background 0.15s, border-color 0.15s;
}
.cp-checkbox:hover { border-color: rgba(255,255,255,0.6); }
.cp-checkbox-checked {
    background: #3d6b35;
    border-color: #3d6b35;
    color: #fff;
}

/* Completed rows */
.cp-completed-row {
    background: #151f35;
    border: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}
.cp-task-done { text-decoration: line-through; opacity: 0.5; }
.cp-no-tasks {
    color: #7a8ba8;
    text-align: center;
    padding: 14px;
    font-size: 14px;
}

/* ── MODALS ──────────────────────────────────── */
.cp-modal-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cp-modal {
    background: #151f35;
    border-radius: 20px;
    padding: 28px 24px;
    width: 100%;
    max-width: 380px;
}
.cp-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}
.cp-modal-btns { display: flex; gap: 12px; }

/* Checkbox toggles inside modals */
.cp-urgent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 14px;
    color: #c8d8e8;
    font-size: 15px;
}
.cp-checkbox-wrap {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cp-checkbox-wrap[data-checked="1"] {
    background: #3d6b35;
    border-color: #3d6b35;
}
.cp-checkbox-inner { width: 16px; height: 16px; border-radius: 3px; }
.cp-checkbox-wrap[data-checked="1"] .cp-checkbox-inner::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: block;
    text-align: center;
    line-height: 16px;
}

/* Payment confirm modal */
.cp-modal-light { background: #151f35; }
.cp-modal-title-dark { color: #ffffff !important; }
.cp-payment-confirm-text {
    text-align: center;
    color: #c8d8e8;
    font-size: 14px;
    margin: -8px 0 20px;
    line-height: 1.6;
}

/* Reset note */
.cp-reset-note {
    text-align: center;
    color: #4a5568;
    font-size: 12px;
    margin-top: 20px;
    padding-bottom: 20px;
}

/* Animations */
@keyframes cp-slide-out {
    to { opacity:0; transform:translateX(-100%); max-height:0; padding:0; margin:0; }
}
.cp-removing { animation: cp-slide-out 0.3s ease forwards; overflow: hidden; }

/* ── DASHBOARD SECTIONS (flat, no cards) ─────── */
.cp-dash-section { margin-bottom: 28px; }
.cp-dash-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #7a8ba8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cp-dash-btns {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

/* ── EVENT ROWS (diary) ──────────────────────── */
.cp-event-row-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}
.cp-event-row-wrap.swiped .cp-task-swipe-actions { transform: translateX(0); }
.cp-event-row-wrap.swiped .cp-event-row          { transform: translateX(-148px); }

.cp-event-row {
    background: #1e2d4a;
    border: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    transition: transform 0.25s ease;
    cursor: grab;
    user-select: none;
}
.cp-event-time-badge {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #c8d8e8;
    white-space: nowrap;
    flex-shrink: 0;
}
.cp-event-name { font-size: 15px; font-weight: 600; color: #fff; flex: 1; }

/* Diary card section */
.cp-diary-card .cp-event-row { border-color: transparent; }

/* ── PAYMENT ROWS ────────────────────────────── */
.cp-pay-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.cp-tag-red   { background: #8b1a1a; color: #fff; }
.cp-tag-grey  { background: #4a5568; color: #fff; }
.cp-tag-dark  { background: #1e2d4a; color: #fff; border: 1px solid #2d3f5e; }
.cp-tag-gold  { background: #4a3820; color: #d4a756; }
.cp-tag-green { background: #3d6b35; color: #fff; }

/* Audience tags */
.cp-tag-kids   { background: #3d6b35; color: #fff; }
.cp-tag-adults { background: #8b1a1a; color: #fff; }
.cp-tag-all    { background: #4a5568; color: #fff; }

.cp-pay-row-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}
.cp-pay-row-wrap.swiped .cp-task-swipe-actions { transform: translateX(0); }
.cp-pay-row-wrap.swiped .cp-pay-row            { transform: translateX(-110px); }

.cp-pay-row {
    background: #7a1515;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    transition: transform 0.25s ease;
    cursor: default;
}
.cp-pay-row.cp-swipeable { cursor: grab; }
.cp-pay-body {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cp-pay-amount {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    min-width: 80px;
}
.cp-pay-desc { font-size: 14px; color: rgba(255,255,255,0.7); flex: 1; }

/* Payment icon circle */
.cp-pay-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: rgba(255,255,255,0.6);
}

/* Monthly Summary */
.cp-summary-box {
    background: #151f35;
    border: none;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.cp-summary-box-total { border-color: transparent; margin-top: 4px; }
.cp-summary-tags { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cp-summary-amount { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.cp-summary-change {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}
.cp-change-red   { background: #8b1a1a; }
.cp-change-green { background: #3d6b35; }
.cp-all-pay-total {
    text-align: center;
    color: #7a8ba8;
    font-size: 14px;
    font-weight: 600;
    margin-top: 14px;
}
.cp-grand-total-card .cp-summary-box-total { margin-bottom: 0; }

/* ── EXPENSE ROW ─────────────────────────────── */
.cp-expense-row {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}
.cp-expense-row.swiped .cp-task-swipe-actions { transform: translateX(0); }
.cp-expense-row.swiped .cp-pay-row            { transform: translateX(-160px); }

/* ── DINNER ROWS ─────────────────────────────── */
.cp-dinner-row-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}
.cp-dinner-row-wrap.swiped .cp-task-swipe-actions { transform: translateX(0); }
.cp-dinner-row-wrap.swiped .cp-dinner-row         { transform: translateX(-148px); }

.cp-dinner-row {
    background: #151f35;
    border: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    transition: transform 0.25s ease;
    cursor: grab;
    user-select: none;
}
.cp-dinner-name  { font-size: 15px; font-weight: 600; color: #fff; flex: 1; }
.cp-dinner-sub   { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.cp-dinner-icon  {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: rgba(255,255,255,0.4); flex-shrink: 0;
}
.cp-dinner-day-card  { margin-bottom: 20px; }
.cp-dinner-day-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

/* Recipe R badge */
.cp-recipe-badge {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6);
    flex-shrink: 0;
}

/* ── SHOP ITEMS ──────────────────────────────── */
.cp-shop-item-wrap { margin-bottom: 10px; }
.cp-shop-item {
    background: #151f35;
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.25s ease, opacity 0.2s;
    cursor: grab;
    user-select: none;
}
.cp-shop-item.cp-shop-bought { opacity: 0.4; }
.cp-shop-item-name { font-size: 16px; font-weight: 600; color: #fff; margin-top: 4px; }
.cp-shop-item-name strong { margin-right: 6px; color: rgba(255,255,255,0.7); }

.cp-tag-fruit___veg { background: #3d6b35; color: #fff; }
.cp-tag-dairy       { background: #1e4080; color: #fff; }
.cp-tag-meat        { background: #8b1a1a; color: #fff; }
.cp-tag-cupboard    { background: #4a5568; color: #fff; }

.cp-shop-check-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #1e2d4a;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cp-shop-check-btn svg { width: 18px; height: 18px; stroke: rgba(255,255,255,0.4); }
.cp-shop-check-btn.cp-shop-checked { background: #3d6b35; }
.cp-shop-check-btn.cp-shop-checked svg { stroke: #fff; }

/* ── CALENDAR ────────────────────────────────── */
.cp-cal-header { text-align: center; margin-bottom: 14px; }
.cp-cal-month-label { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.cp-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 6px; }
.cp-cal-dow span { text-align: center; font-size: 12px; font-weight: 600; color: #7a8ba8; padding: 4px 0; }
.cp-cal-day {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #1e2d4a;
    color: #c8d8e8;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    transition: background 0.15s;
    user-select: none;
}
.cp-cal-day:hover  { background: #2a3f60; }
.cp-cal-day.cp-cal-today { background: #3d6b35; color: #fff; }
.cp-cal-day.cp-cal-empty { background: transparent; cursor: default; pointer-events: none; }
.cp-cal-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    position: absolute;
    bottom: 4px;
}
.cp-cal-nav { display: flex; justify-content: space-between; margin-top: 16px; padding: 0 8px; }
.cp-cal-nav-btn {
    background: #1e2d4a;
    border: none;
    border-radius: 50%;
    width: 40px; height: 40px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: filter 0.15s;
}
.cp-cal-nav-btn:hover { filter: brightness(1.2); }

/* Date pop-up items */
.cp-date-event-item {
    background: #1e2d4a;
    border: none;
    border-radius: 12px;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
}

/* ── CREATE MEAL ─────────────────────────────── */
.cp-btn-add-ingredient {
    background: #3d6b35;
    border: none;
    border-radius: 50%;
    width: 40px; height: 40px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter 0.15s;
}
.cp-btn-add-ingredient:hover { filter: brightness(1.15); }
.cp-ingredient-block { margin-bottom: 12px; }
.cp-ingredient-label { color: #7a8ba8; font-size: 13px; margin-bottom: 6px; font-weight: 600; }

/* Recipe ingredient list in modal */
.cp-recipe-ing-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #c8d8e8;
    font-size: 14px;
}
.cp-recipe-ing-qty { font-weight: 700; color: #fff; min-width: 30px; }

/* ── NEW EXPENSE MODAL split row ─────────────── */
#cpSplitRow { display: flex; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 480px) {
    .cp-wrap { max-width: 100%; }
}