* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary       : #8b1a6b;
    --primary-hover : #b5006e;
    --primary-soft  : #f5e6f0;
    --bg            : #f4f5f7;
    --surface       : #ffffff;
    --text          : #1a1a2e;
    --text-muted    : #6b7280;
    --border        : #e5e7eb;
    --sidebar-bg    : #1e0a16;
    --sidebar-text  : #d8bfd8;
    --sidebar-width : 240px;
    --topbar-height : 64px;
    --radius        : 10px;
}

body {
    font-family: 'Inter', sans-serif;
    background : var(--bg);
    color      : var(--text);
    height     : 100vh;
    overflow   : hidden;
}

.hidden { display: none !important; }

/* ===================== LOGIN ===================== */
#loginView {
    height          : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : linear-gradient(135deg, #1e0a16, #4a1040);
}

.login-box {
    background    : white;
    border-radius : 16px;
    padding       : 2.5rem;
    width         : 100%;
    max-width     : 400px;
    box-shadow    : 0 24px 60px rgba(0,0,0,0.35);
}

.login-logo {
    text-align    : center;
    margin-bottom : 2rem;
}

.login-logo i {
    font-size     : 2.2rem;
    color         : var(--primary);
    display       : block;
    margin-bottom : 0.5rem;
}

.login-logo h1 {
    font-size   : 1.5rem;
    font-weight : 700;
    color       : var(--text);
}

.login-logo p {
    font-size : 0.82rem;
    color     : var(--text-muted);
}

/* ===================== LAYOUT ===================== */
#dashboardView {
    display  : flex;
    height   : 100vh;
    overflow : hidden;
}

/* ===================== SIDEBAR DRAWER ===================== */
.sidebar {
    width          : var(--sidebar-width);
    min-width      : var(--sidebar-width);
    height         : 100vh;
    background     : var(--sidebar-bg);
    display        : flex;
    flex-direction : column;
    overflow-y     : auto;
    overflow-x     : hidden;
    flex-shrink    : 0;
    margin-left    : calc(-1 * var(--sidebar-width));
    transition     : margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.open { margin-left: 0; }

.sidebar-brand {
    display     : flex;
    align-items : center;
    gap         : 0.75rem;
    padding     : 1.25rem 1rem 1.25rem 1.25rem;
    border-bottom : 1px solid rgba(255,255,255,0.07);
    color       : white;
    font-size   : 1rem;
    font-weight : 700;
    letter-spacing: 0.3px;
}

.sidebar-brand i { color: var(--primary-hover); font-size: 1.1rem; }


.sidebar-nav {
    flex    : 1;
    padding : 1rem 0.75rem;
    display : flex;
    flex-direction : column;
    gap     : 0.2rem;
}

.nav-item {
    display         : flex;
    align-items     : center;
    gap             : 0.75rem;
    padding         : 0.7rem 1rem;
    border-radius   : 8px;
    color           : #e2c8de !important;
    text-decoration : none !important;
    font-size       : 0.875rem;
    font-weight     : 400;
    transition      : background 0.18s, color 0.18s;
}

.nav-item i { width: 16px; text-align: center; font-size: 0.85rem; }

.nav-item:hover  { background: rgba(255,255,255,0.1); color: #ffffff !important; }
.nav-item.active { background: var(--primary); color: #ffffff !important; font-weight: 500; }

.sidebar-footer {
    padding       : 1rem;
    border-top    : 1px solid rgba(255,255,255,0.07);
    display       : flex;
    align-items   : center;
    gap           : 0.5rem;
}

.sidebar-user {
    flex        : 1;
    display     : flex;
    align-items : center;
    gap         : 0.65rem;
    min-width   : 0;
}

.user-avatar {
    width           : 34px;
    height          : 34px;
    border-radius   : 50%;
    background      : var(--primary);
    color           : white;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-weight     : 600;
    font-size       : 0.8rem;
    flex-shrink     : 0;
}

.user-info { min-width: 0; }

.user-name {
    font-size      : 0.78rem;
    color          : white;
    font-weight    : 500;
    overflow       : hidden;
    text-overflow  : ellipsis;
    white-space    : nowrap;
}

.logout-btn {
    background    : none;
    border        : none;
    color         : var(--sidebar-text);
    cursor        : pointer;
    padding       : 0.4rem;
    border-radius : 6px;
    font-size     : 0.875rem;
    transition    : color 0.18s, background 0.18s;
    flex-shrink   : 0;
}

.logout-btn:hover { color: white; background: rgba(255,255,255,0.1); }

/* ===================== MAIN ===================== */
.main-wrapper {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    width          : 100%;
}

.topbar {
    height          : var(--topbar-height);
    background      : white;
    border-bottom   : 1px solid var(--border);
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0 1.5rem;
    flex-shrink     : 0;
    gap             : 1rem;
}

.topbar-left {
    display     : flex;
    align-items : center;
    gap         : 0.85rem;
    min-width   : 0;
}

.topbar h2 { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }

.topbar-actions { display: flex; gap: 0.75rem; margin-left: auto; }

.drawer-toggle {
    background    : none;
    border        : none;
    font-size     : 1.1rem;
    color         : var(--text-muted);
    cursor        : pointer;
    padding       : 0.4rem 0.5rem;
    border-radius : 7px;
    transition    : background 0.18s, color 0.18s;
    flex-shrink   : 0;
    line-height   : 1;
}

.drawer-toggle:hover { background: var(--primary-soft); color: var(--primary); }

.content-area {
    flex       : 1;
    overflow-y : auto;
    padding    : 1.5rem;
}

/* ===================== STAT CARDS ===================== */
.stats-grid {
    display        : flex;
    flex-wrap      : nowrap;
    gap            : 1.25rem;
    margin-bottom  : 1.75rem;
    overflow-x     : auto;
    padding-bottom : 0.25rem;
}

.stats-grid .stat-card { flex: 1; min-width: 150px; }

.stats-compact { gap: 1rem; }

.stat-card {
    background    : white;
    border-radius : 16px;
    padding       : 1.75rem 1.5rem;
    display       : flex;
    flex-direction: column;
    gap           : 1rem;
    box-shadow    : 0 2px 12px rgba(0,0,0,0.07);
    border        : 1px solid var(--border);
    transition    : transform 0.18s, box-shadow 0.18s;
}

.stat-card:hover {
    transform  : translateY(-3px);
    box-shadow : 0 8px 24px rgba(0,0,0,0.1);
}

.stat-icon {
    width           : 52px;
    height          : 52px;
    border-radius   : 14px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    font-size       : 1.3rem;
}

.stat-info { display: flex; flex-direction: column; gap: 0.25rem; }

.stat-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.3px; }
.stat-value { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--text); }

/* ===================== WEDDING CARDS ===================== */
.weddings-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(270px, 1fr));
    gap                   : 1rem;
}

.wedding-card {
    background    : white;
    border-radius : var(--radius);
    padding       : 1.1rem 1.25rem;
    box-shadow    : 0 1px 3px rgba(0,0,0,0.06);
    border        : 1px solid var(--border);
    transition    : box-shadow 0.2s;
}

.wedding-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.wedding-card-header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 0.75rem;
}

.card-actions { display: flex; gap: 0.25rem; }

.wedding-card-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.4rem; }

.wedding-card-meta {
    font-size   : 0.8rem;
    color       : var(--text-muted);
    margin-bottom: 0.2rem;
    display     : flex;
    align-items : center;
    gap         : 0.4rem;
}

/* ===================== SECTION CARDS ===================== */
.section-card {
    background    : white;
    border-radius : var(--radius);
    padding       : 1.25rem;
    margin-bottom : 1.25rem;
    box-shadow    : 0 1px 3px rgba(0,0,0,0.06);
    border        : 1px solid var(--border);
}

.section-header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 1rem;
}

.section-title { font-size: 0.95rem; font-weight: 600; }
.section-count { font-size: 0.78rem; color: var(--text-muted); }

.info-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
    gap                   : 0.75rem;
}

.info-item { display: flex; flex-direction: column; gap: 0.2rem; }
.info-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.info-value { font-size: 0.875rem; font-weight: 500; }

/* ===================== TABLES ===================== */
.table-wrapper { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; }

.data-table th {
    text-align     : left;
    padding        : 0.65rem 1rem;
    font-size      : 0.7rem;
    font-weight    : 600;
    color          : var(--text-muted);
    text-transform : uppercase;
    letter-spacing : 0.5px;
    border-bottom  : 1px solid var(--border);
    background     : #fafafa;
    white-space    : nowrap;
}

.data-table td {
    padding         : 0.85rem 1rem;
    border-bottom   : 1px solid var(--border);
    vertical-align  : middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafafa; }
.data-table tr.clickable { cursor: pointer; }

.group-label {
    font-size     : 0.78rem;
    font-weight   : 600;
    color         : var(--text);
    margin-bottom : 0.2rem;
}

.group-id-tag {
    font-size     : 0.65rem;
    color         : var(--text-muted);
    font-family   : monospace;
    margin-top    : 0.2rem;
    display       : block;
    letter-spacing: 0.5px;
}

.names-list { display: flex; flex-direction: column; gap: 0.25rem; }
.names-list span { font-size: 0.82rem; }

.name-with-status {
    display     : flex;
    align-items : center;
    gap         : 0.4rem;
}

.status-icon {
    margin-right : 0.35rem;
    font-size    : 0.75rem;
}

.email-cell {
    max-width      : 220px;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}

.name-yes     { color: #43a047; font-size: 0.78rem; }
.name-no      { color: #e53935; font-size: 0.78rem; }
.name-pending { color: #f57c00; font-size: 0.78rem; }

/* ===================== BADGES ===================== */
.code-tag {
    background    : var(--primary-soft);
    color         : var(--primary);
    padding       : 0.2rem 0.55rem;
    border-radius : 5px;
    font-size     : 0.72rem;
    font-weight   : 700;
    letter-spacing: 1px;
}

.code-tag-lg { font-size: 0.82rem; padding: 0.3rem 0.7rem; }

.status-badge {
    padding       : 0.22rem 0.6rem;
    border-radius : 999px;
    font-size     : 0.7rem;
    font-weight   : 600;
    text-transform: capitalize;
    white-space   : nowrap;
}

.status-pending   { background: #fff3e0; color: #e65100; }
.status-attending { background: #e8f5e9; color: #2e7d32; }
.status-declined  { background: #fce4ec; color: #c62828; }
.status-partial   { background: #e3f2fd; color: #1565c0; }

.role-badge {
    font-size      : 0.65rem;
    font-weight    : 700;
    padding        : 0.18rem 0.45rem;
    border-radius  : 4px;
    text-transform : uppercase;
    letter-spacing : 0.4px;
    display        : inline-block;
}

.role-superadmin { background: #f3e5f5; color: #6a1b9a; }
.role-admin      { background: #e8eaf6; color: #283593; }
.role-organizer  { background: #e0f7fa; color: #006064; }

/* ===================== BUTTONS ===================== */
.btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 0.45rem;
    padding         : 0.55rem 1.1rem;
    border-radius   : 7px;
    font-size       : 0.855rem;
    font-weight     : 500;
    cursor          : pointer;
    border          : none;
    transition      : all 0.18s;
    font-family     : inherit;
    text-decoration : none;
    white-space     : nowrap;
}

.btn-primary          { background: var(--primary); color: white; }
.btn-primary:hover    { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-outline          { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover    { border-color: var(--primary); color: var(--primary); }

.btn-danger           { background: #e53935; color: white; border: none; }
.btn-danger:hover     { background: #c62828; }
.btn-danger:disabled  { opacity: 0.6; cursor: not-allowed; }

.btn-full { width: 100%; justify-content: center; }
.btn-sm   { padding: 0.38rem 0.8rem; font-size: 0.78rem; }
.mt-1     { margin-top: 0.65rem; }

.icon-btn {
    background    : none;
    border        : 1px solid var(--border);
    border-radius : 6px;
    padding       : 0.32rem 0.55rem;
    cursor        : pointer;
    color         : var(--text-muted);
    font-size     : 0.78rem;
    transition    : all 0.18s;
}

.icon-btn:hover        { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.icon-btn.danger:hover { background: #fce4ec; border-color: #e53935; color: #e53935; }

/* ===================== FORMS ===================== */
.form-group { margin-bottom: 1rem; }

.form-group label {
    display       : block;
    font-size     : 0.8rem;
    font-weight   : 500;
    margin-bottom : 0.35rem;
    color         : var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width         : 100%;
    padding       : 0.6rem 0.85rem;
    border        : 1.5px solid var(--border);
    border-radius : 7px;
    font-size     : 0.855rem;
    font-family   : inherit;
    color         : var(--text);
    background    : white;
    transition    : border-color 0.18s;
}

.form-group input:focus,
.form-group select:focus { outline: none; border-color: var(--primary); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.input-disabled { background: #f5f5f5 !important; color: var(--text-muted) !important; cursor: not-allowed; }

.req { color: #e53935; }

.member-row { margin-bottom: 0.6rem; }

.member-input-wrap {
    position    : relative;
    display     : flex;
    align-items : center;
}

.member-input-icon {
    position  : absolute;
    left      : 0.85rem;
    color     : var(--text-muted);
    font-size : 0.78rem;
    pointer-events: none;
}

.member-row .member-name {
    width         : 100%;
    padding-left  : 2.2rem !important;
    padding-right : 2.5rem !important;
}

.member-remove {
    position      : absolute;
    right         : 0.6rem;
    background    : none;
    border        : none;
    color         : #ccc;
    cursor        : pointer;
    font-size     : 0.85rem;
    padding       : 0.2rem 0.3rem;
    border-radius : 4px;
    transition    : color 0.18s, background 0.18s;
    line-height   : 1;
}

.member-remove:hover { color: #e53935; background: #fce4ec; }

.checkbox-list {
    display        : flex;
    flex-direction : column;
    gap            : 0.45rem;
    max-height     : 160px;
    overflow-y     : auto;
    padding        : 0.5rem 0.6rem;
    border         : 1.5px solid var(--border);
    border-radius  : 7px;
}

.checkbox-label {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    font-size   : 0.82rem;
    cursor      : pointer;
}

.checkbox-label input[type="checkbox"] { width: auto; accent-color: var(--primary); }

/* ===================== MODAL ===================== */
.modal-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,0.5);
    z-index         : 1000;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 1rem;
    backdrop-filter : blur(4px);
}

.modal-box {
    background    : white;
    border-radius : 14px;
    width         : 100%;
    max-width     : 480px;
    max-height    : 90vh;
    overflow-y    : auto;
    padding       : 2rem;
    position      : relative;
    box-shadow    : 0 20px 60px rgba(0,0,0,0.22);
}

.modal-box.wide { max-width: 680px; }

.modal-title    { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.25rem; }
.modal-subtitle { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.75rem; }

.modal-close {
    position      : absolute;
    top           : 0.9rem;
    right         : 1rem;
    background    : none;
    border        : none;
    font-size     : 1.5rem;
    color         : var(--text-muted);
    cursor        : pointer;
    line-height   : 1;
    border-radius : 4px;
    padding       : 0.2rem 0.35rem;
    transition    : color 0.18s;
}

.modal-close:hover { color: var(--text); }

.modal-actions {
    display         : flex;
    justify-content : flex-end;
    gap             : 0.65rem;
    margin-top      : 1.25rem;
    padding-top     : 1rem;
    border-top      : 1px solid var(--border);
}

/* ===================== DROPDOWN ===================== */
.dropdown-wrap {
    position : relative;
    display  : inline-block;
}

.dropdown-menu {
    display       : none;
    position      : absolute;
    top           : calc(100% + 6px);
    right         : 0;
    background    : white;
    border        : 1px solid var(--border);
    border-radius : 10px;
    box-shadow    : 0 8px 24px rgba(0,0,0,0.12);
    min-width     : 220px;
    z-index       : 100;
    overflow      : hidden;
}

.dropdown-menu.open { display: block; }

.dropdown-item {
    display     : flex;
    align-items : center;
    gap         : 0.75rem;
    width       : 100%;
    padding     : 0.85rem 1rem;
    background  : none;
    border      : none;
    cursor      : pointer;
    text-align  : left;
    font-family : inherit;
    transition  : background 0.15s;
}

.dropdown-item:hover { background: var(--primary-soft); }

.dropdown-item i {
    font-size       : 1rem;
    color           : var(--primary);
    width           : 20px;
    text-align      : center;
    flex-shrink     : 0;
}

.dropdown-item p {
    font-size   : 0.875rem;
    font-weight : 500;
    color       : var(--text);
    margin      : 0;
}

.dropdown-item span {
    font-size : 0.72rem;
    color     : var(--text-muted);
}

.dropdown-item + .dropdown-item {
    border-top : 1px solid var(--border);
}

.dropdown-modal-item {
    display     : flex;
    align-items : center;
    gap         : 0.85rem;
    width       : 100%;
    padding     : 1rem;
    background  : var(--bg);
    border      : 1.5px solid var(--border);
    border-radius: 10px;
    cursor      : pointer;
    text-align  : left;
    font-family : inherit;
    transition  : border-color 0.18s, background 0.18s;
}

.dropdown-modal-item:hover { border-color: var(--primary); background: var(--primary-soft); }

.dropdown-modal-item i {
    font-size       : 1.2rem;
    color           : var(--primary);
    width           : 24px;
    text-align      : center;
    flex-shrink     : 0;
}

.dropdown-modal-item p    { font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 0 0 0.1rem; }
.dropdown-modal-item span { font-size: 0.75rem; color: var(--text-muted); }

/* ===================== WEDDING INFO BANNER ===================== */
.wedding-info-banner {
    background    : linear-gradient(135deg, #1e0a16 0%, #6b1a55 100%);
    border-radius : 20px;
    padding       : 1.75rem 2rem;
    display       : flex;
    justify-content: space-between;
    align-items   : center;
    gap           : 1.5rem;
    margin-bottom : 1.5rem;
    color         : white;
    flex-wrap     : wrap;
    box-shadow    : 0 8px 32px rgba(107,26,85,0.35);
    position      : relative;
    overflow      : hidden;
}

.wedding-info-banner::before {
    content       : '♥';
    position      : absolute;
    right         : 180px;
    top           : 50%;
    transform     : translateY(-50%);
    font-size     : 8rem;
    color         : rgba(255,255,255,0.04);
    pointer-events: none;
    line-height   : 1;
}

.wedding-info-left {
    display     : flex;
    align-items : center;
    gap         : 1.25rem;
}

.wib-icon {
    font-size       : 1.5rem;
    color           : #f0c070;
    width           : 56px;
    height          : 56px;
    background      : rgba(255,255,255,0.12);
    border          : 1.5px solid rgba(255,255,255,0.15);
    border-radius   : 16px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
}

.wib-couple {
    font-size     : 1.6rem;
    font-weight   : 700;
    margin-bottom : 0.4rem;
    letter-spacing: -0.3px;
}

.wib-meta {
    font-size   : 0.82rem;
    color       : rgba(255,255,255,0.6);
    display     : flex;
    gap         : 0.6rem;
    align-items : center;
    flex-wrap   : wrap;
}

.wib-meta i { font-size: 0.75rem; }

.wib-right   { text-align: right; flex-shrink: 0; }
.wib-label   { font-size: 0.65rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; }

.wib-right .code-tag {
    background    : rgba(255,255,255,0.15);
    color         : white;
    font-size     : 1rem;
    padding       : 0.35rem 0.9rem;
    letter-spacing: 2px;
    border        : 1px solid rgba(255,255,255,0.2);
}

.wib-days {
    font-size   : 0.78rem;
    color       : #f0c070;
    margin-top  : 0.5rem;
    font-weight : 600;
    letter-spacing: 0.3px;
}

/* ===================== TWO COLUMN GRID ===================== */
.two-col-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1.25rem;
    margin-bottom         : 1.25rem;
}

@media (max-width: 768px) { .two-col-grid { grid-template-columns: 1fr; } }

/* ===================== NAME PILLS ===================== */
.name-pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.name-pill {
    padding       : 0.3rem 0.75rem;
    border-radius : 999px;
    font-size     : 0.8rem;
    font-weight   : 500;
}

.pending-pill  { background: #fff3e0; color: #e65100; }
.declined-pill { background: #fce4ec; color: #c62828; }
.attending-pill{ background: #e8f5e9; color: #2e7d32; }

.list-empty { font-size: 0.82rem; color: var(--text-muted); padding: 0.5rem 0; }

/* ===================== ACTIVITY FEED ===================== */
.activity-list { display: flex; flex-direction: column; gap: 0.75rem; }

.activity-item {
    display     : flex;
    align-items : center;
    gap         : 0.75rem;
    padding     : 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child { border-bottom: none; }

.activity-avatar {
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    background      : var(--primary-soft);
    color           : var(--primary);
    font-weight     : 700;
    font-size       : 0.85rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
}

.activity-name { font-size: 0.855rem; font-weight: 500; color: var(--text); }
.activity-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.1rem; }

/* ===================== PROGRESS BAR ===================== */
.progress-bar-wrap { margin-top: 0.5rem; }

.progress-bar {
    height        : 14px;
    background    : #f0f0f0;
    border-radius : 999px;
    overflow      : hidden;
    display       : flex;
    margin-bottom : 0.75rem;
}

.progress-segment {
    height     : 100%;
    transition : width 0.5s ease;
}

.progress-segment.attending { background: #43a047; }
.progress-segment.declined  { background: #e53935; }

.progress-legend {
    display    : flex;
    gap        : 1.25rem;
    flex-wrap  : wrap;
    font-size  : 0.78rem;
    color      : var(--text-muted);
}

.legend-dot {
    display       : inline-block;
    width         : 10px;
    height        : 10px;
    border-radius : 50%;
    margin-right  : 0.3rem;
    vertical-align: middle;
}

.legend-dot.attending { background: #43a047; }
.legend-dot.declined  { background: #e53935; }
.legend-dot.pending   { background: #e0e0e0; }

/* ===================== QR CODE ===================== */
.qr-box {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding         : 1rem;
    background      : white;
    border           : 1.5px solid var(--border);
    border-radius   : 14px;
    margin-bottom   : 1rem;
    box-shadow      : 0 2px 12px rgba(0,0,0,0.06);
}

.qr-img { width: 220px; height: 220px; display: block; border-radius: 6px; }

.qr-code-label {
    font-size     : 1rem;
    margin-bottom : 0.3rem;
    color         : var(--text);
}

.qr-url-label {
    font-size     : 0.72rem;
    color         : var(--text-muted);
    word-break    : break-all;
    margin-bottom : 1rem;
}

/* ===================== GUEST TABLE TOOLBAR ===================== */
.guest-table-toolbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1rem;
    margin-bottom   : 1rem;
    flex-wrap       : wrap;
}

.toolbar-right {
    display     : flex;
    align-items : center;
    gap         : 0.65rem;
    flex-wrap   : wrap;
}

.filter-select {
    padding       : 0.6rem 0.85rem;
    border        : 1.5px solid var(--border);
    border-radius : 999px;
    font-size     : 0.82rem;
    font-family   : inherit;
    color         : var(--text);
    background    : var(--bg);
    cursor        : pointer;
    outline       : none;
    transition    : border-color 0.18s;
}

.filter-select:focus { border-color: var(--primary); }

.search-wrap {
    position    : relative;
    flex        : 1;
    max-width   : 360px;
}

.search-icon {
    position    : absolute;
    left        : 0.9rem;
    top         : 50%;
    transform   : translateY(-50%);
    color       : var(--text-muted);
    font-size   : 0.82rem;
    pointer-events: none;
}

.search-input {
    width         : 100%;
    padding       : 0.65rem 1rem 0.65rem 2.4rem;
    border        : 1.5px solid var(--border);
    border-radius : 999px;
    font-size     : 0.875rem;
    font-family   : inherit;
    color         : var(--text);
    background    : var(--bg);
    transition    : border-color 0.18s, box-shadow 0.18s;
    outline       : none;
}

.search-input:focus {
    border-color : var(--primary);
    background   : white;
    box-shadow   : 0 0 0 3px rgba(139,26,107,0.08);
}

.search-input::placeholder { color: #bbb; }

/* ===================== MISC ===================== */
.loading {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 0.65rem;
    padding         : 3rem;
    color           : var(--text-muted);
    font-size       : 0.875rem;
}

.empty-state {
    text-align : center;
    padding    : 3rem;
    color      : var(--text-muted);
}

.empty-state i    { font-size: 2.2rem; margin-bottom: 0.65rem; display: block; opacity: 0.35; }
.empty-subtitle   { font-size: 0.78rem; margin-top: 0.35rem; }

/* ===================== VIEW GUEST MODAL (new) ===================== */
.vg-summary {
    display       : flex;
    gap           : 0.75rem;
    margin-bottom : 1.25rem;
}

.vg-pill {
    display       : flex;
    align-items   : center;
    gap           : 0.5rem;
    padding       : 0.5rem 1rem;
    border-radius : 999px;
    font-size     : 0.82rem;
    font-weight   : 600;
}

.attending-bg { background: #e8f5e9; color: #2e7d32; }
.declined-bg  { background: #fce4ec; color: #c62828; }

.vg-two-col {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;
    margin-bottom         : 1.25rem;
}

.vg-group { display: flex; flex-direction: column; gap: 0.5rem; }

.vg-empty { font-size: 0.8rem; color: var(--text-muted); padding: 0.25rem 0; }

.vg-group-label {
    font-size     : 0.75rem;
    font-weight   : 600;
    margin-bottom : 0.5rem;
    display       : flex;
    align-items   : center;
    gap           : 0.4rem;
}

.attending-label { color: #2e7d32; }
.declined-label  { color: #c62828; }

.vg-member-grid {
    display        : flex;
    flex-direction : column;
    gap            : 0.5rem;
}

.vg-member-card {
    display       : flex;
    align-items   : center;
    gap           : 0.65rem;
    padding       : 0.8rem 1rem;
    border-radius : 10px;
    border        : 1.5px solid var(--border);
    background    : #fafafa;
}

.vg-yes { border-color: #a5d6a7; background: #f1f8f1; }
.vg-no  { border-color: #ef9a9a; background: #fdf1f1; }
.vg-pending { border-color: #ffe082; background: #fffde7; }

.vg-status-icon { font-size: 1rem; flex-shrink: 0; }
.vg-yes .vg-status-icon { color: #43a047; }
.vg-no  .vg-status-icon { color: #e53935; }
.vg-pending .vg-status-icon { color: #f57c00; }

.vg-member-name {
    font-size   : 0.82rem;
    font-weight : 500;
    flex        : 1;
    color       : var(--text);
}

.vg-badge {
    font-size     : 0.68rem;
    font-weight   : 600;
    padding       : 0.18rem 0.5rem;
    border-radius : 999px;
    white-space   : nowrap;
    flex-shrink   : 0;
}

.vg-info-row {
    display       : flex;
    gap           : 0;
    border        : 1.5px solid var(--border);
    border-radius : 10px;
    overflow      : hidden;
    margin-bottom : 1.25rem;
}

.vg-info-item {
    flex        : 1;
    display     : flex;
    align-items : flex-start;
    gap         : 0.6rem;
    padding     : 0.85rem 1rem;
    border-right: 1.5px solid var(--border);
}

.vg-info-item:last-child { border-right: none; }

.vg-info-icon { color: var(--primary); font-size: 0.85rem; margin-top: 0.15rem; flex-shrink: 0; }

.vg-info-label {
    font-size      : 0.65rem;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 0.4px;
    color          : var(--text-muted);
    margin-bottom  : 0.2rem;
}

.vg-info-value {
    font-size      : 0.82rem;
    color          : var(--text);
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}

.vg-pending-state {
    text-align    : center;
    padding       : 1rem 0;
    margin-bottom : 1rem;
    color         : var(--text-muted);
}

.vg-pending-state i { font-size: 2rem; margin-bottom: 0.5rem; color: #f57c00; display: block; }
.vg-pending-state p { font-size: 0.9rem; }

.yes-tag     { background: #e8f5e9; color: #2e7d32; }
.no-tag      { background: #fce4ec; color: #c62828; }
.pending-tag { background: #fff3e0; color: #e65100; }

/* ===================== ERROR ===================== */
/* ===================== TABLE SETUP ===================== */
.tables-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(340px, 1fr));
    gap                   : 1.25rem;
    margin-bottom         : 1.25rem;
}

.table-card {
    background    : white;
    border-radius : var(--radius);
    border        : 1px solid var(--border);
    padding       : 1.25rem;
    box-shadow    : 0 2px 8px rgba(0,0,0,0.06);
    display       : flex;
    flex-direction: column;
    gap           : 0.75rem;
    transition    : box-shadow 0.2s, transform 0.2s;
}

.table-card:hover {
    box-shadow : 0 6px 20px rgba(0,0,0,0.1);
    transform  : translateY(-2px);
}

.table-card-top {
    position    : relative;
    text-align  : center;
    padding-top : 0.25rem;
    margin-bottom: 0.75rem;
}

.table-card-actions {
    position : absolute;
    top      : 0;
    right    : 0;
    display  : flex;
    gap      : 0.25rem;
}

.table-name {
    font-size     : 1.05rem;
    font-weight   : 700;
    color         : var(--text);
    display       : flex;
    align-items   : center;
    justify-content: center;
    gap           : 0.45rem;
    margin-bottom : 0.2rem;
}

.table-name i { color: var(--primary); font-size: 0.9rem; }

.table-meta {
    font-size : 0.72rem;
    color     : var(--text-muted);
}

.table-inner-header {
    display        : flex;
    align-items    : center;
    gap            : 0.5rem;
    padding        : 0.35rem 0.5rem;
    border-bottom  : 1px solid var(--border);
    font-size      : 0.65rem;
    font-weight    : 600;
    color          : var(--text-muted);
    text-transform : uppercase;
    letter-spacing : 0.4px;
}

.table-inner-header span:first-child  { flex: 1; min-width: 0; }
.table-inner-header span:nth-child(2) { width: 90px; flex-shrink: 0; }
.table-inner-header span:nth-child(3) { white-space: nowrap; }
.table-inner-header span:last-child   { width: 24px; flex-shrink: 0; }

.table-guest-row {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    padding     : 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.table-guest-row:last-child { border-bottom: none; }

.table-guest-name {
    flex          : 1;
    min-width     : 0;
    font-size     : 0.82rem;
    color         : var(--text);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.table-guest-dietary {
    width         : 90px;
    flex-shrink   : 0;
    font-size     : 0.76rem;
    font-weight   : 600;
    color         : var(--text);
    text-align    : center;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.table-guest-list {
    display        : flex;
    flex-direction : column;
    gap            : 0.35rem;
    min-height     : 60px;
    border         : 1.5px dashed var(--border);
    border-radius  : 8px;
    padding        : 0.6rem 0.75rem;
    background     : #fafafa;
}

.table-guest-row {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
}

.table-seat-num {
    font-size       : 0.68rem;
    font-weight     : 700;
    color           : white;
    background      : var(--primary);
    width           : 18px;
    height          : 18px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
}


.table-empty-msg {
    font-size   : 0.78rem;
    color       : #bbb;
    text-align  : center;
    padding     : 0.5rem 0;
    display     : flex;
    align-items : center;
    justify-content: center;
    gap         : 0.4rem;
}

.table-full-msg {
    font-size   : 0.75rem;
    color       : #999;
    text-align  : center;
    margin-top  : 0.25rem;
}

.icon-btn-xs {
    background    : none;
    border        : none;
    cursor        : pointer;
    color         : #ccc;
    font-size     : 0.72rem;
    padding       : 0.15rem 0.3rem;
    border-radius : 4px;
    line-height   : 1;
    transition    : color 0.15s, background 0.15s;
    flex-shrink   : 0;
}

.icon-btn-xs:hover { color: #e53935; background: #fce4ec; }

/* Assign Guest Modal */
.assign-guest-list {
    max-height : 320px;
    overflow-y : auto;
    border     : 1.5px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.assign-guest-item {
    display     : flex;
    align-items : center;
    gap         : 0.65rem;
    padding     : 0.75rem 1rem;
    cursor      : pointer;
    border-bottom: 1px solid var(--border);
    transition  : background 0.15s;
}

.assign-guest-item:last-child { border-bottom: none; }
.assign-guest-item:hover      { background: var(--primary-soft); }

.assign-guest-item input[type="checkbox"] {
    width        : auto;
    accent-color : var(--primary);
    flex-shrink  : 0;
    cursor       : pointer;
}

.assign-guest-name { font-size: 0.875rem; color: var(--text); }

/* ===================== CONFIRM MODAL ===================== */
.confirm-modal {
    text-align : center;
    padding    : 0.5rem 0;
}

.confirm-icon {
    width           : 60px;
    height          : 60px;
    border-radius   : 50%;
    background      : #fff3e0;
    color           : #f57c00;
    font-size       : 1.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin          : 0 auto 1.25rem;
}

.confirm-message {
    font-size     : 0.9rem;
    color         : var(--text-muted);
    line-height   : 1.55;
    margin-bottom : 0.25rem;
}

/* ===================== ERROR ===================== */
.error-msg {
    background    : #fce4ec;
    color         : #c62828;
    padding       : 0.65rem 0.875rem;
    border-radius : 7px;
    font-size     : 0.82rem;
    margin-top    : 0.5rem;
}

.error-state { text-align: center; padding: 2rem; color: #e53935; font-size: 0.875rem; }

/* ===================== TOAST ===================== */
.toast {
    position      : fixed;
    bottom        : 1.5rem;
    right         : 1.5rem;
    background    : #1a1a2e;
    color         : white;
    padding       : 0.75rem 1.25rem;
    border-radius : 10px;
    font-size     : 0.875rem;
    font-weight   : 500;
    opacity       : 0;
    transform     : translateY(10px);
    transition    : opacity 0.25s, transform 0.25s;
    z-index       : 9999;
    pointer-events: none;
    max-width     : 320px;
    box-shadow    : 0 4px 20px rgba(0,0,0,0.2);
}
.toast-show    { opacity: 1; transform: translateY(0); }
.toast-success { background: #1b5e20; }
.toast-error   { background: #b71c1c; }

/* ===================== SIDEBAR BACKDROP ===================== */
.sidebar-backdrop {
    display    : none;
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.45);
    z-index    : 199;
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.visible { display: block; }

/* ===================== RESPONSIVE ===================== */

/* Tablet + mobile: sidebar as overlay using transform (iOS Safari safe) */
@media (max-width: 900px) {
    .sidebar {
        position    : fixed;
        top         : 0;
        left        : 0;
        z-index     : 200;
        height      : 100vh;
        margin-left : 0 !important;
        transform   : translateX(-100%);
        transition  : transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.open {
        transform : translateX(0);
    }
    .main-wrapper {
        width    : 100%;
        min-width: 0;
    }
    .stats-grid {
        display               : grid;
        grid-template-columns : 1fr 1fr;
        overflow-x            : initial;
    }
    .stats-grid .stat-card { flex: initial; min-width: initial; }
    .two-col-grid           { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 640px) {
    .login-box { margin: 1rem; padding: 2rem 1.5rem; border-radius: 12px; }

    .content-area { padding: 0.85rem; }

    /* Topbar — wrap actions below title on small screens */
    .topbar {
        height      : auto;
        min-height  : var(--topbar-height);
        flex-wrap   : wrap;
        padding     : 0.6rem 0.85rem;
        gap         : 0.4rem 0.75rem;
        align-items : center;
    }
    .topbar h2           { font-size: 0.9rem; }
    .topbar-actions      { flex-wrap: wrap; gap: 0.35rem; }
    .topbar-actions .btn { font-size: 0.75rem; padding: 0.4rem 0.65rem; }

    /* Stat cards */
    .stat-card  { padding: 1rem; gap: 0.65rem; border-radius: 12px; }
    .stat-icon  { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; }
    .stat-value { font-size: 1.8rem; }
    .stat-label { font-size: 0.72rem; }

    /* Wedding banner */
    .wedding-info-banner         { flex-direction: column; align-items: flex-start; padding: 1.25rem; gap: 0.85rem; }
    .wedding-info-banner::before { display: none; }
    .wib-couple                  { font-size: 1.15rem; }
    .wib-right                   { text-align: left; width: 100%; }
    .wib-meta                    { font-size: 0.75rem; }

    /* Cards & sections */
    .section-card   { padding: 1rem; }
    .section-header { flex-wrap: wrap; gap: 0.35rem; }
    .weddings-grid  { grid-template-columns: 1fr; }

    /* Forms */
    .form-row { grid-template-columns: 1fr; gap: 0; }

    /* Guest table toolbar */
    .guest-table-toolbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .toolbar-right       { flex-direction: column; gap: 0.5rem; }
    .filter-select       { width: 100%; box-sizing: border-box; }
    .search-wrap         { max-width: 100%; }

    /* Modals */
    .modal-overlay { padding: 0.5rem; }
    .modal-box     { padding: 1.25rem; max-height: 96vh; border-radius: 14px; }
    .modal-actions { flex-wrap: wrap; }

    /* View guest modal */
    .vg-two-col  { grid-template-columns: 1fr; }
    .vg-info-row { flex-direction: column; }
    .vg-info-item { border-right: none; border-bottom: 1.5px solid var(--border); }
    .vg-info-item:last-child { border-bottom: none; }

    /* Toast */
    .toast { left: 0.85rem; right: 0.85rem; max-width: none; bottom: 1rem; text-align: center; }
}

/* Small phones */
@media (max-width: 420px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-value { font-size: 2rem; }
    .topbar h2  { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}