/* =======================================================
   ProperApp Core — Components
   Opinionated UI primitives (dashboard-equivalent)
   Themeable via CSS variables
   ======================================================= */

/* -------------------------------------------------------
   Surfaces
   ------------------------------------------------------- */

/* App background already handled by base */


/* Section container */
.pa-section {
    background: var(--pa-color-surface);
    border-radius: var(--pa-radius);
    padding: calc(var(--pa-spacing) * 1.25);
}

/* -------------------------------------------------------
   Sidebar
   ------------------------------------------------------- */

.pa-sidebar {
    background: var(--pa-color-surface);
    border-right: 1px solid var(--pa-color-border);
    padding: calc(var(--pa-spacing) * 1.2);

    font-family: var(--pa-font-family);
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--pa-color-text);

}

/* Branding */
.pa-sidebar-header {
    margin-bottom: calc(var(--pa-spacing) * 2);
}

.pa-sidebar-logo {
    height: 40px;
    object-fit: contain;
}

/* Nav */
.pa-sidebar-nav {
    gap: calc(var(--pa-spacing) * 0.8);
    flex: 1 1 auto;
}

.pa-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: calc(var(--pa-spacing) * 0.45);
    border-radius: var(--pa-radius);
    color: var(--pa-color-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.pa-sidebar-link:hover {
    background: rgba(0,0,0,0.04);
}

.pa-sidebar-link.pa-active {
    background: rgba(0,0,0,0.06);
    font-weight: 600;
}

/* -------------------------------------------------------
   Headings
   ------------------------------------------------------- */

.pa-heading-lg {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: calc(var(--pa-spacing) * 1.25);
}

.pa-heading-md {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: calc(var(--pa-spacing) * 0.75);
}

.pa-heading-sm {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pa-color-muted);
    margin-bottom: calc(var(--pa-spacing) * 0.5);
}

/* -------------------------------------------------------
   Buttons
   ------------------------------------------------------- */

.pa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    padding: calc(var(--pa-spacing) * 0.6) calc(var(--pa-spacing) * 1.1);
    border-radius: var(--pa-radius);
    font-size: 0.9rem;
    font-weight: 600;

    background: var(--pa-color-primary);
    color: #ffffff;

    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;

    border: 1px solid transparent;
}

.pa-button:hover {
    background: var(--pa-color-secondary);
}

.pa-button.secondary {
    background: rgba(0,0,0,0.05);
    color: var(--pa-color-text);
    border-color: var(--pa-color-border);
}

.pa-button.secondary:hover {
    background: rgba(0,0,0,0.08);
}

/* -------------------------------------------------------
   Forms
   ------------------------------------------------------- */

.pa-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pa-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pa-color-muted);
}

.pa-input,
.pa-select,
.pa-textarea {
    padding: calc(var(--pa-spacing) * 0.55);
    border-radius: var(--pa-radius);
    border: 1px solid var(--pa-color-border);
    background: #ffffff;
    font-size: 0.9rem;
}

.pa-input:focus,
.pa-select:focus,
.pa-textarea:focus {
    outline: none;
    border-color: var(--pa-color-primary);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

/* -------------------------------------------------------
   Tables / Lists
   ------------------------------------------------------- */

.pa-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pa-spacing) * 0.75);
}


.pa-list-item {
    padding: calc(var(--pa-spacing) * 0.75);
    border-radius: var(--pa-radius);
    background: rgba(0,0,0,0.02);
}

/* -------------------------------------------------------
   Checklist (global)
   ------------------------------------------------------- */

.pa-checklist {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pa-spacing) * 0.75);
}

.pa-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;
    border-radius: var(--pa-radius-md);

    background: var(--pa-color-surface);
    border: 1px solid rgba(0,0,0,0.06);

    cursor: pointer;

    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition:
        box-shadow 0.18s ease,
        transform 0.15s ease,
        border-color 0.15s ease;
}

.pa-checklist-item:hover {
    box-shadow:
        0 10px 28px rgba(0,0,0,0.08),
        0 2px 6px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

/* Checkbox */
.pa-checklist-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;
    margin-top: 3px;

    border-radius: 5px;
    border: 1.5px solid var(--pa-color-border);
    background: #fff;

    position: relative;
    flex-shrink: 0;
}

.pa-checklist-item input[type="checkbox"]:checked {
    background: var(--pa-color-primary);
    border-color: var(--pa-color-primary);
}

.pa-checklist-item input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10.8L3.2 8l-.93.93L6 12.67 14 4.67l-.93-.94z'/%3E%3C/svg%3E")
        center / 70% no-repeat;
}

/* Completed state — text crossed out */
.pa-checklist-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: var(--pa-color-muted);
}

/* -------------------------------------------------------
   Modals
   ------------------------------------------------------- */

.pa-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.pa-modal-inner {
    position: relative;
    background: var(--pa-color-surface);
    border-radius: var(--pa-radius-lg);
    width: 100%;
    max-width: 520px;
    padding: calc(var(--pa-spacing) * 1.5);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 1;
}

/* -------------------------------------------------------
   Utility helpers
   ------------------------------------------------------- */

.pa-muted {
    color: var(--pa-color-muted);
    font-size: 0.85rem;
}

/* -------------------------------------------------------
   Sidebar footer / user controls
   ------------------------------------------------------- */

/* -------------------------------------------------------
   Sidebar Upsell (Creator monetisation)
   ------------------------------------------------------- */

.pa-sidebar-upsell {
    margin-bottom: 30px;
    padding: calc(var(--pa-spacing) * 1.25);
    border-radius: calc(var(--pa-radius) * 1.5);

    background: linear-gradient(
        135deg,
        var(--pa-color-secondary),
        var(--pa-color-primary)
    );

    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.pa-sidebar-upsell p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: calc(var(--pa-spacing) * 0.75);
    opacity: 0.9;
}

.pa-sidebar-upsell a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}

.pa-sidebar-upsell a:hover {
    text-decoration: underline;
}

.pa-sidebar-footer {
    padding-top: calc(var(--pa-spacing) * 1.5);
    display: flex;
    flex-direction: column;
    gap: calc(var(--pa-spacing));
}

/* Profile row */
.pa-sidebar-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Settings icon */
.pa-settings {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pa-color-muted);
    width: 1.25rem;
    height: 1.25rem;
}

/* Notifications button */
.pa-notifications {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pa-color-muted);
}


/* Profile row */
.pa-user-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Avatar */
.pa-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--pa-color-border);
}

/* Notifications */
.pa-notifications {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pa-color-muted);
}

.pa-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--pa-color-primary);
    color: #fff;
    font-size: 0.65rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

/* Logout button */
.pa-logout {
    width: 100%;
    margin-top: calc(var(--pa-spacing));
}

.pa-logout.pa-button {
    justify-content: center;
}

/* Global build container — applies to ALL builds */
.pa-card {
    padding: calc(var(--pa-spacing) * 2.25);
    margin-bottom: calc(var(--pa-spacing) * 2);

    background: var(--pa-color-surface);
    border-radius: var(--pa-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Optional constrained card width */
.pa-build--narrow {
    max-width: 720px;
}

/* Build body vertical rhythm for forms and checklists */
.pa-build-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pa-spacing) * 0.75);
}

/* Global build footer */
.pa-build-footer {
    margin-top: var(--pa-spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--pa-spacing) * 0.75);
}


/* =======================================================
   Build — Habit Tracker
   App Runtime + Dashboard Preview
   (Matches renderer output exactly)
   ======================================================= */



/* Header */
#properapp-user-app .pa-build-habit-tracker .pa-build-header {
    margin-bottom: var(--pa-spacing-sm);
}

/* Title + description */
#properapp-user-app .pa-build-habit-tracker .properapp-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 4px;
}

#properapp-user-app .pa-build-habit-tracker .properapp-description {
    font-size: 0.9rem;
    color: var(--pa-color-muted);
}

/* Body stack */
#properapp-user-app .pa-build-habit-tracker .pa-build-body {
    display: flex;
    flex-direction: column;
    gap: var(--pa-spacing-sm);
    margin-top: var(--pa-spacing-sm);
}

/* Item wrapper */
#properapp-user-app .pa-build-habit-tracker .pa-build-item {
    margin: 0;
}

/* Habit row */
#properapp-user-app .pa-build-habit-tracker label.pa-habit {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;
    border-radius: var(--pa-radius-md);

    background: var(--pa-color-surface);
    border: 1px solid rgba(0,0,0,0.06);

    cursor: pointer;

    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition:
        box-shadow 0.18s ease,
        transform 0.15s ease,
        border-color 0.15s ease;
}

#properapp-user-app .pa-build-habit-tracker label.pa-habit:hover {
    box-shadow:
        0 10px 28px rgba(0,0,0,0.08),
        0 2px 6px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

/* Checkbox */
#properapp-user-app .pa-build-habit-tracker label.pa-habit input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;
    margin-top: 3px;

    border-radius: 5px;
    border: 1.5px solid var(--pa-color-border);
    background: #fff;

    position: relative;
    flex-shrink: 0;
}

#properapp-user-app .pa-build-habit-tracker label.pa-habit input[type="checkbox"]:checked {
    background: var(--pa-color-primary);
    border-color: var(--pa-color-primary);
}

#properapp-user-app .pa-build-habit-tracker label.pa-habit input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10.8L3.2 8l-.93.93L6 12.67 14 4.67l-.93-.94z'/%3E%3C/svg%3E")
        center / 70% no-repeat;
}

/* Label text */
#properapp-user-app .pa-build-habit-tracker label.pa-habit span {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--pa-color-text);
}

/* Completed state */
#properapp-user-app
.pa-build-habit-tracker
label.pa-habit
input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: var(--pa-color-muted);
}