/* ==========================================================
   Design tokens
   ========================================================== */
:root {
    --app-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --app-bg: #f7f4ee;
    --app-surface: #ffffff;
    --app-border: #ebe4d6;
    --app-text: #292B28;
    --app-muted: #6B6D67;
    --app-dark: #292B28;
    --app-primary: #173F35;
    --app-primary-hover: #1F5245;
    --app-gold: #D6B779;
    --app-gold-soft: #F4EBD6;
    --app-ivory: #F6F0E5;
    --app-primary-soft: #E8EFEC;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --app-topbar-h: 60px;
}

body {
    font-family: var(--app-font);
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 500;
    font-size: .875rem;
    padding: .5rem .9rem;
}

.btn-sm {
    font-size: .8rem;
    padding: .3rem .6rem;
}

.btn-primary {
    color: #fff;
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(23, 63, 53, .25);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    opacity: .65;
}

.btn-light {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.btn-light:hover {
    background: #f3f4f6;
    border-color: #d9dde5;
}

/* Square icon button used for row actions */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: .8rem;
}

.btn-icon:hover {
    background: var(--app-primary-soft);
    border-color: #c9d9d2;
    color: var(--app-primary);
}

.btn-icon.btn-icon-danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* ==========================================================
   Forms
   ========================================================== */
.form-control,
.form-select {
    border-radius: var(--app-radius-sm);
    border-color: #d9dde5;
    font-size: .9rem;
    padding: .5rem .75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #1F5245;
    box-shadow: 0 0 0 .2rem rgba(23, 63, 53, .15);
}

.form-group > label {
    font-size: .8rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: .35rem;
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--app-radius-sm);
    border-color: #d9dde5;
    min-height: calc(1.5em + 1rem + 2px);
    font-size: .9rem;
}

/* ==========================================================
   Top bar
   ========================================================== */
.app-topbar {
    min-height: var(--app-topbar-h);
    display: flex;
    align-items: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .12);
    z-index: 1030;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: #fff;
}

.app-brand:hover {
    color: #fff;
}

/* ==========================================================
   App shell
   ========================================================== */
.app-shell {
    background: var(--app-bg);
    flex: 1 0 auto;
}

#main-content {
    min-width: 0;
}

/* ==========================================================
   Sidebar
   ========================================================== */
.sidebar {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

.sidebar > .position-sticky {
    top: var(--app-topbar-h);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--app-radius);
    background: var(--app-bg);
    margin-bottom: 1rem;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
}

.sidebar-user-meta {
    font-size: .75rem;
    color: var(--app-muted);
}

.sidebar-section-title {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin: 1.25rem 0 .4rem .75rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .75rem;
    border-radius: var(--app-radius-sm);
    color: #4b5563;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s, color .15s;
}

.sidebar-item i {
    width: 18px;
    text-align: center;
    color: #9ca3af;
    transition: color .15s;
}

.sidebar-item:hover {
    background: #f3f4f6;
    color: var(--app-dark);
}

.sidebar-item:hover i {
    color: var(--app-dark);
}

.sidebar-item-selected,
.sidebar-item-selected:hover {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.sidebar-item-selected i,
.sidebar-item-selected:hover i {
    color: var(--app-primary);
}

/* ==========================================================
   Avatars
   ========================================================== */
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    object-fit: cover;
    overflow: hidden;
}

.avatar-dark {
    background: var(--app-dark);
    color: #fff;
}

/* ==========================================================
   Page header
   ========================================================== */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header .breadcrumb {
    font-size: .8rem;
    margin-bottom: .35rem;
}

.page-header .breadcrumb a {
    color: var(--app-muted);
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--app-dark);
}

.page-subtitle {
    color: var(--app-muted);
    font-size: .9rem;
    margin: .25rem 0 0;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.page-actions .btn {
    margin-bottom: 0 !important;
}

/* ==========================================================
   Cards
   ========================================================== */
.app-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    background: var(--app-surface);
}

.app-card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--app-border);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.app-card > .card-header:first-child {
    border-radius: var(--app-radius) var(--app-radius) 0 0;
}

.app-card > .card-body {
    padding: 1.25rem;
}

.app-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--app-dark);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-card-title .count-badge {
    font-size: .75rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 999px;
    padding: .15rem .55rem;
}

.collapse-toggle .fa-chevron-down {
    transition: transform .2s;
}

.collapse-toggle.collapsed .fa-chevron-down {
    transform: rotate(-90deg);
}

/* Table toolbar links (CSV, Print...) */
.table-tools {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.table-tools .report-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 500;
    padding: .35rem .7rem;
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: #374151;
}

.table-tools .report-button:hover {
    background: #f3f4f6;
}

/* ==========================================================
   Data table
   ========================================================== */
.table-modern {
    margin-bottom: 0;
    font-size: .875rem;
}

.table-modern > thead > tr > th {
    background: #f9fafb;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    border-top: 0;
    white-space: nowrap;
}

.table-modern > tbody > tr > td {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid #f1f3f7;
    vertical-align: middle;
}

.table-modern > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table-modern > tbody > tr {
    transition: background-color .12s;
}

.table-modern > tbody > tr:hover {
    background: #fafbfd;
}

.table-modern .cell-primary {
    font-weight: 600;
    color: var(--app-dark);
}

.table-modern .cell-muted {
    color: var(--app-muted);
}

.table-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}

.table-actions > div,
.table-actions form {
    display: inline-flex !important;
    gap: .35rem;
    margin: 0;
}

/* Soft status pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 500;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
}

.pill-blue { background: #eff6ff; color: #1d4ed8; }
.pill-pink { background: #fdf2f8; color: #be185d; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--app-muted);
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #9ca3af;
    margin-bottom: .75rem;
}

.empty-state-title {
    font-weight: 600;
    color: var(--app-dark);
    margin-bottom: .25rem;
}

/* Table card footer */
.table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--app-border);
    font-size: .8rem;
    color: var(--app-muted);
}

.table-footer nav > .d-flex,
.table-footer .pagination {
    margin-bottom: 0;
}

.pagination .page-link {
    border-radius: var(--app-radius-sm) !important;
    margin: 0 2px;
    border-color: var(--app-border);
    color: #374151;
    font-size: .8rem;
}

.pagination .page-item.active .page-link {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

/* Alerts */
.alert {
    border-radius: var(--app-radius);
    border-width: 1px;
    font-size: .9rem;
}

/* Modals */
.modal-content {
    border: 0;
    border-radius: var(--app-radius);
    box-shadow: 0 20px 40px rgba(16, 24, 40, .18);
}

/* App footer (signed-in layout) */
.app-footer {
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: .8rem;
}

.min-w-0 {
    min-width: 0;
}

/* Bootstrap 5.0 draws a 2px currentColor line between thead and tbody */
.table-modern > :not(:first-child) {
    border-top: 0;
}

.sidebar-user-name {
    overflow-wrap: break-word;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .sidebar-user .avatar {
        display: none;
    }
}

/* ==========================================================
   Auth pages
   ========================================================== */
.fw-500 {
    font-weight: 500;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(23, 63, 53, .10), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(214, 183, 121, .14), transparent 40%),
        var(--app-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
    padding: 2.25rem 2rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--app-dark);
    margin-bottom: 1.5rem;
}

.auth-brand img {
    width: 40px;
    height: 40px;
}

.auth-brand:hover {
    color: var(--app-dark);
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--app-dark);
    margin-bottom: .35rem;
}

.auth-subtitle {
    color: var(--app-muted);
    font-size: .9rem;
    margin: 0;
}

.auth-card .form-label {
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
}

.auth-input {
    position: relative;
}

.auth-input > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: .9rem;
    pointer-events: none;
}

.auth-input .form-control {
    padding: .65rem .9rem .65rem 2.5rem;
}

.auth-input .form-control.is-invalid {
    background-image: none;
}

.auth-input-toggle {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #9ca3af;
    padding: .35rem .5rem;
    border-radius: 6px;
}

.auth-input-toggle:hover {
    color: var(--app-dark);
}

.auth-input:has(.auth-input-toggle) .form-control {
    padding-right: 2.75rem;
}

.auth-submit {
    font-size: .95rem;
    padding: .7rem 1rem;
}

.auth-back {
    margin-top: 1.5rem;
    font-size: .85rem;
    color: var(--app-muted);
}

.auth-back:hover {
    color: var(--app-dark);
}

/* ==========================================================
   Loomora admin components
   ========================================================== */
.fw-600 { font-weight: 600; }
.bg-soft { background: var(--app-ivory); }

.app-brand .brand-word {
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: .2em;
    font-size: 1.3rem;
    font-weight: 600;
}

.thumb {
    width: 44px;
    height: 55px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--app-ivory);
    flex-shrink: 0;
}
.thumb-sm { width: 34px; height: 42px; }

.pill-green { background: #e3f1e9; color: #23704a; }
.pill-amber { background: var(--app-gold-soft); color: #8a6a2c; }
.pill-red { background: #f8e6e1; color: #b4432f; }
.pill-violet { background: #eeeafb; color: #5b45b0; }
.pill-gold { background: var(--app-gold); color: var(--app-dark); }
.pill-blue { background: #e7eff8; color: #2a5d8f; }

.sidebar-badge {
    margin-left: auto;
    background: var(--app-gold);
    color: var(--app-dark);
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .5rem;
}
.sidebar-item-selected .sidebar-badge { background: var(--app-primary); color: #fff; }

.stat-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--app-shadow);
    color: var(--app-text);
    height: 100%;
    transition: transform .15s, box-shadow .15s;
}
a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23, 63, 53, .08); color: var(--app-text); }
.stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--app-primary);
    color: var(--app-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.stat-icon-gold { background: var(--app-gold-soft); color: #8a6a2c; }
.stat-icon-red { background: #f8e6e1; color: #b4432f; }
.stat-icon-blue { background: #e7eff8; color: #2a5d8f; }
.stat-label { font-size: .78rem; color: var(--app-muted); font-weight: 500; }
.stat-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.stat-meta { font-size: .75rem; color: var(--app-muted); }

.form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
    background: linear-gradient(to top, var(--app-bg) 70%, rgba(247, 244, 238, 0));
    z-index: 5;
}

.img-preview {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--app-radius-sm);
    background: var(--app-ivory);
    display: block;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .75rem;
}
.image-tile {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    overflow: hidden;
    background: #fff;
}
.image-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--app-ivory); }
.image-tile-actions { display: flex; justify-content: space-between; padding: .4rem .5rem; gap: .25rem; }
.image-tile-actions label { display: inline-flex; gap: .25rem; align-items: center; cursor: pointer; }

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    border: 2px dashed #d9cfbb;
    border-radius: var(--app-radius);
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    background: #fbf8f2;
    transition: all .2s;
    margin: 0;
    font-size: .9rem;
}
.dropzone > i { font-size: 1.6rem; color: #a9894d; }
.dropzone:hover, .dropzone.is-dragging { border-color: var(--app-primary); background: var(--app-primary-soft); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.variant-table > thead > tr > th { padding: .6rem .5rem; }
.variant-table > tbody > tr > td { padding: .5rem; }

.status-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.status-tab {
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: .85rem;
    font-weight: 500;
}
.status-tab span { color: var(--app-muted); margin-left: .25rem; font-size: .78rem; }
.status-tab:hover { border-color: var(--app-primary); color: var(--app-primary); }
.status-tab.active { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.status-tab.active span { color: var(--app-gold); }

.row-link { cursor: pointer; }

.mini-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid #f3eee4;
    font-size: .88rem;
}
.mini-list li:last-child { border-bottom: 0; }
.mini-list a { color: var(--app-text); }
.rank {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--app-gold-soft);
    color: #8a6a2c;
    font-size: .75rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

.summary-line { display: flex; justify-content: space-between; font-size: .9rem; color: var(--app-muted); padding: .2rem 0; }
.summary-line span:last-child { color: var(--app-text); }
.summary-total { font-size: 1.05rem; font-weight: 700; color: var(--app-text); border-top: 1px solid var(--app-border); margin-top: .4rem; padding-top: .6rem; }

.slip-preview img { width: 100%; border-radius: var(--app-radius-sm); border: 1px solid var(--app-border); }
.activity-list li { padding: .6rem 1.25rem; border-bottom: 1px solid #f3eee4; }
.activity-list li:last-child { border-bottom: 0; }

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #f3eee4;
}
.toggle-row .form-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }

.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.choice { position: relative; margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 500;
    padding: .75rem .5rem;
    border: 1.5px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    height: 100%;
}
.choice span i { font-size: 1.1rem; color: var(--app-muted); }
.choice input:checked + span { border-color: var(--app-primary); background: var(--app-primary-soft); color: var(--app-primary); }
.choice input:checked + span i { color: var(--app-primary); }

.breadcrumb-item a { color: var(--app-muted); }

.auth-brand .brand-word { color: var(--app-primary); }
.auth-page { background-color: #F6F0E5; }