/* ============================================
   CUTE PERSONALITY
   ============================================

   Overrides personality tokens to give the site
   a soft, bouncy, playful feel.

   Changes: bigger radius, spring easing, glass,
   bouncy hover, icon bubbles, cute animations.

   This file ONLY overrides --ds-p-* personality
   tokens and adds component-level enhancements.
   It inherits colors, shadows, and typography
   from _variables.css — never hardcodes them.

   To switch personality, swap this file in base.html
   or remove it entirely for the professional default.

   ============================================ */

/* ============================================
   1. PERSONALITY TOKEN OVERRIDES
   ============================================ */

:root {
    /* --- Radius: extra round --- */
    --ds-p-radius-card: var(--ds-radius-xl);        /* 20px */
    --ds-p-radius-btn: var(--ds-radius-full);        /* 50px pill */
    --ds-p-radius-input: 14px;
    --ds-p-radius-modal: var(--ds-radius-2xl);       /* 24px */
    --ds-p-radius-badge: var(--ds-radius-full);      /* 50px pill */
    --ds-p-radius-dropdown: var(--ds-radius-lg);     /* 16px */
    --ds-p-radius-alert: var(--ds-radius-lg);        /* 16px */
    --ds-p-radius-toast: var(--ds-radius-xl);        /* 20px */

    /* --- Shadows: inherit refined base, enhance hover --- */
    --ds-p-shadow-card: var(--ds-shadow-sm);
    --ds-p-shadow-hover: var(--ds-shadow-xl);

    /* --- Transitions: bouncy spring --- */
    --ds-p-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ds-p-duration: 0.35s;

    /* --- Hover: lift + slight scale --- */
    --ds-p-hover-lift: -4px;
    --ds-p-hover-scale: 1.006;

    /* --- Glass: frosted --- */
    --ds-p-glass-blur: 20px;
    --ds-p-glass-saturate: 1.8;

    /* --- Icon styling --- */
    --ds-p-icon-bg: rgba(var(--ds-accent-rgb), 0.1);
    --ds-p-icon-radius: 12px;
    --ds-p-icon-size: 36px;

    /* --- Override design-system accent colors --- */
    --ds-color-accent: #3B82C4;
    --ds-color-accent-hover: #2B6699;
    --ds-color-accent-light: #6BABDE;
    --ds-accent-rgb: 59, 130, 196;
}


/* ============================================
   2. ANIMATIONS (can't be tokens)
   ============================================ */

@keyframes iconWobble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    75% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes iconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes dropdownPop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastPop {
    0% { opacity: 0; transform: translateY(-24px) scale(0.9); }
    60% { opacity: 1; transform: translateY(4px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================
   3. NAVBAR — FROSTED GLASS
   ============================================ */

.navbar,
nav.navbar,
#navigation {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--ds-p-glass-blur)) saturate(var(--ds-p-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ds-p-glass-blur)) saturate(var(--ds-p-glass-saturate));
    box-shadow: var(--ds-shadow-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Logo bounce on hover */
.navbar-brand,
.cf-nav-logo {
    transition: transform 0.4s var(--ds-p-ease);
}

.navbar-brand:hover,
.cf-nav-logo:hover {
    transform: scale(1.08) rotate(-3deg);
}

/* Nav links: full styling (must be unlayered to beat Bootstrap's a:link color) */
/* Using higher specificity selectors to ensure navbar styles apply across all pages */
#navigation .nav-tab-modern,
#navigation .nav-link,
.navbar .nav-tab-modern,
.navbar .nav-link,
.nav-link,
.nav-tab-modern {
    color: var(--ds-color-text-tertiary) !important;
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: var(--ds-space-2) var(--ds-space-4);
    border-radius: var(--ds-radius-full);
    transition: all 0.3s var(--ds-p-ease);
}

#navigation .nav-tab-modern:hover,
#navigation .nav-link:hover,
.navbar .nav-tab-modern:hover,
.navbar .nav-link:hover,
.nav-link:hover,
.nav-tab-modern:hover {
    color: var(--ds-color-text-primary) !important;
    background: rgba(0, 0, 0, 0.03);
    text-decoration: none !important;
}

#navigation .nav-tab-modern.active,
#navigation .nav-link.active,
.navbar .nav-tab-modern.active,
.navbar .nav-link.active,
.nav-link.active,
.nav-tab-modern.active {
    color: var(--ds-color-text-primary) !important;
    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-sm);
    text-decoration: none !important;
}

/* Navbar icons inherit text color */
#navigation .nav-tab-modern i,
#navigation .nav-link i,
.navbar .nav-tab-modern i,
.navbar .nav-link i {
    color: inherit !important;
}

/* "+ New" pill shape */
.quick-add-dropdown .quick-add-btn,
.quick-add-dropdown .btn {
    border-radius: var(--ds-radius-full);
}


/* ============================================
   4. CARDS — BIG ROUND + SPRING HOVER
   ============================================ */

.card::before,
.theme-card::before,
.card-modern::before,
.ui-card::before {
    display: none;
    content: none;
}

.card,
.ui-card,
.theme-card,
.card-modern,
.feature-card {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
}

.card:hover,
.ui-card:hover,
.theme-card:hover,
.feature-card:hover {
    transform: translateY(var(--ds-p-hover-lift)) scale(var(--ds-p-hover-scale));
    box-shadow: var(--ds-p-shadow-hover);
}

.card-body,
.card-header,
.card-footer {
    background: transparent;
}


/* ============================================
   5. BUTTONS — PILLS + BOUNCE
   ============================================ */

.btn,
.ui-btn,
.btn-modern,
button.btn,
a.btn {
    border-radius: var(--ds-p-radius-btn);
    transition: all var(--ds-p-duration) var(--ds-p-ease);
}

.btn:hover,
.ui-btn:hover,
a.btn:hover {
    transform: translateY(-2px) scale(1.03);
}

.btn:active,
.ui-btn:active,
a.btn:active {
    transform: translateY(0) scale(0.96);
    transition: transform 0.1s ease;
}

.btn-sm { border-radius: var(--ds-p-radius-btn); }
.btn-lg { border-radius: var(--ds-p-radius-btn); }

/* Close buttons — keep circular, not pill */
.btn-close { border-radius: 50%; }

/* ============================================
   5b. INPUTS — ROUNDED
   ============================================ */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea {
    border-radius: var(--ds-p-radius-input);
    transition: all 0.3s ease;
}


/* ============================================
   6. MODALS — FROSTED GLASS
   ============================================ */

.modal-content {
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--ds-shadow-xl);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
}

.modal-backdrop.show {
    opacity: 0.25;
    backdrop-filter: blur(4px);
}


/* ============================================
   7. DROPDOWNS — FLOATING GLASS + POP-IN
   ============================================ */

.dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--ds-shadow-lg);
    padding: 8px;
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    animation: dropdownPop 0.25s var(--ds-p-ease);
}

.dropdown-item {
    border-radius: 10px;
    padding: 10px 16px;
}


/* ============================================
   7b. EVENT CARDS — ROUNDED + LIFT
   ============================================ */

.event-card {
    border-radius: var(--ds-radius-lg);
    transition: all 0.4s var(--ds-p-ease);
}

.event-card:hover {
    transform: translateY(-3px) scale(1.01);
}


/* ============================================
   7c. CONNECTION CARDS — ROUNDED + LIFT
   ============================================ */

.connection-card {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
}

.connection-card.clickable:hover {
    transform: translateY(var(--ds-p-hover-lift)) scale(1.01);
}


/* ============================================
   7d. PENDING EVENTS — ROUNDED
   ============================================ */

.pending-event-card {
    border-radius: 14px;
    transition: all 0.25s ease;
}


/* ============================================
   7e. BADGES — FULL PILLS
   ============================================ */

.badge {
    border-radius: var(--ds-p-radius-badge);
}


/* ============================================
   7f. ALERTS — ROUNDED
   ============================================ */

.alert {
    border-radius: var(--ds-p-radius-alert);
}


/* ============================================
   8. TOASTS — FROSTED + POP-IN
   ============================================ */

.toast,
.modern-toast {
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    animation: toastPop 0.5s var(--ds-p-ease);
}


/* ============================================
   9. OFFCANVAS — ROUND + GLASS
   ============================================ */

.offcanvas {
    border-radius: var(--ds-radius-2xl) 0 0 var(--ds-radius-2xl);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}


/* ============================================
   10. SCROLLBAR — THIN + ROUNDED
   ============================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 10px; }


/* ============================================
   11. PROGRESS BARS — PILLS
   ============================================ */

.progress { border-radius: var(--ds-radius-full); height: 8px; }
.progress-bar { border-radius: var(--ds-radius-full); }


/* ============================================
   12. TYPOGRAPHY — TIGHTER APPLE FEEL
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}


/* ============================================
   13. TABS — PILL STYLE
   ============================================ */

.nav-tabs .nav-link,
.nav-pills .nav-link {
    border-radius: var(--ds-radius-full);
    transition: all 0.3s var(--ds-p-ease);
}


/* ============================================
   14. TABLES — SOFT CORNERS
   ============================================ */

.table {
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}

.table thead th:first-child { border-top-left-radius: var(--ds-radius-lg); }
.table thead th:last-child { border-top-right-radius: var(--ds-radius-lg); }


/* ============================================
   15. TOOLTIPS / POPOVERS
   ============================================ */

.tooltip-inner { border-radius: var(--ds-radius-md); }
.popover { border-radius: var(--ds-radius-lg); }


/* ============================================
   16. SEARCH — PILL
   ============================================ */

.search-input,
.search-container input,
input[type="search"] {
    border-radius: var(--ds-radius-full);
}


/* ============================================
   17. LIST GROUPS — ROUNDED
   ============================================ */

.list-group-item {
    border-radius: var(--ds-radius-md);
    transition: background 0.2s ease;
}


/* ============================================
   18. SMOOTH SCROLL
   ============================================ */

html { scroll-behavior: smooth; }


/* ============================================
   19. CUTE ICONS
   ============================================

   Soft backgrounds, wobble animations,
   rounded containers for all icons.
   ============================================ */

/* All icons: smooth transitions */
.fas, .far, .fab, .fa,
.bi, [class^="bi-"],
i.fas, i.far, i.fab, i.fa, i.bi {
    transition: all 0.3s var(--ds-p-ease);
}

/* Nav icons: wobble on hover */
.nav-link:hover i,
.nav-link:hover .fas,
.nav-link:hover .far,
.nav-link:hover .bi,
.nav-tab-modern:hover i,
.mobile-nav-link:hover i {
    animation: iconWobble 0.5s ease;
    transform: scale(1.15);
}

/* Page title icons: rounded bubble */
.page-header-standard .page-title i,
.page-title i,
.section-header i,
h1 i, h2 i, h3 i, h4 i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-p-icon-radius);
    background: rgba(var(--ds-accent-rgb), 0.12);
    color: var(--ds-color-accent);
    padding: 8px;
    font-size: 1.1em;
}

/* Card header icons: soft bubble */
.card-header i,
.card-title i,
.card-modern .card-header i {
    width: var(--ds-p-icon-size);
    height: var(--ds-p-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-p-icon-radius);
    background: rgba(var(--ds-accent-rgb), 0.08);
    padding: 6px;
    margin-right: 4px;
}

.card:hover .card-header i,
.card:hover .card-title i {
    animation: iconBounce 0.6s ease;
}

/* Button icons: bounce */
.btn:hover i,
.btn:hover .fas,
.btn:hover .far,
.btn:hover .bi {
    transform: scale(1.15);
}

.btn:active i,
.btn:active .fas,
.btn:active .far,
.btn:active .bi {
    transform: scale(0.9);
}

/* Feature icons (landing): big bouncy */
.feature-icon {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
}

.feature-card:hover .feature-icon,
.feature-icon:hover {
    transform: scale(1.1) rotate(-5deg);
}

.feature-icon i,
.feature-icon .bi {
    font-size: 1.8rem;
    transition: all 0.4s var(--ds-p-ease);
}

.feature-card:hover .feature-icon i,
.feature-card:hover .feature-icon .bi {
    transform: scale(1.2) rotate(-5deg);
}

/* Step numbers (landing) */
.step-number {
    transition: all 0.3s var(--ds-p-ease);
}

.step-number:hover {
    transform: scale(1.15);
}

/* Status icons: pop */
.fa-check-circle:hover,
.bi-check-circle-fill:hover {
    animation: iconPop 0.4s ease;
}

/* Dropdown item icons: mini-bubble */
.dropdown-item i,
.dropdown-item .fas,
.dropdown-item .far,
.dropdown-item .bi {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--ds-accent-rgb), 0.06);
    font-size: 0.85em;
    margin-right: 4px;
    transition: all 0.3s var(--ds-p-ease);
}

.dropdown-item:hover i,
.dropdown-item:hover .fas,
.dropdown-item:hover .far,
.dropdown-item:hover .bi {
    background: rgba(var(--ds-accent-rgb), 0.12);
    transform: scale(1.1);
}

/* Settings card icons */
.settings-card i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-p-icon-radius);
    background: var(--ds-p-icon-bg);
    font-size: 1.1em;
    transition: all 0.4s var(--ds-p-ease);
}

.settings-card:hover i {
    transform: scale(1.15) rotate(-5deg);
    background: rgba(var(--ds-accent-rgb), 0.18);
}

/* Settings buttons */
.settings-button i,
.settings-button .fas,
.settings-button .bi {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-p-icon-radius);
    background: var(--ds-p-icon-bg);
    font-size: 1.1em;
    transition: all 0.4s var(--ds-p-ease);
}

.settings-button:hover i,
.settings-button:hover .fas,
.settings-button:hover .bi {
    transform: scale(1.15) rotate(-5deg);
    background: rgba(var(--ds-accent-rgb), 0.15);
}

/* Connection card icons */
.connection-card i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--ds-accent-rgb), 0.08);
    font-size: 1.2em;
    transition: all 0.4s var(--ds-p-ease);
}

.connection-card:hover i {
    transform: scale(1.15) rotate(-5deg);
}

/* Stat card icons */
.stat-card i,
.stat-value i,
.stat-icon i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-p-icon-bg);
    font-size: 1.3em;
    transition: all 0.4s var(--ds-p-ease);
}

.stat-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Event card icons */
.event-card:hover i,
.event-card:hover .fas,
.event-card:hover .far {
    transform: scale(1.12);
}

/* Notification bell: wiggle */
.btn-notifications:hover i,
.btn-notifications:hover .fa-bell {
    animation: iconWobble 0.5s ease;
}

/* AI icons: fun bounce */
.fa-robot:hover,
.fa-magic:hover,
.calendar-ai-badge:hover i {
    animation: iconWobble 0.6s ease;
    transform: scale(1.15);
}

/* Quick Add "+": spin */
.quick-add-btn:hover i,
.quick-add-btn:hover .fa-plus {
    transform: rotate(90deg) scale(1.2);
}

/* Mobile menu icons */
.mobile-menu-item i,
.mobile-menu-item .fas,
.mobile-menu-item .bi {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-p-icon-radius);
    background: rgba(var(--ds-accent-rgb), 0.06);
    transition: all 0.3s var(--ds-p-ease);
}

.mobile-menu-item:hover i {
    background: rgba(var(--ds-accent-rgb), 0.12);
    transform: scale(1.1) rotate(-3deg);
}

/* Floating chat button */
.floating-chat-btn:hover i {
    transform: scale(1.2) rotate(-10deg);
}

/* Loading spinner: smooth */
.fa-spinner.fa-spin,
.fa-circle-notch.fa-spin {
    animation: fa-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Workflow step icons */
.step-icon:hover i,
.workflow-step:hover i {
    transform: scale(1.15);
}

/* Empty state icons: float */
.empty-state i,
.no-events i,
.text-center.py-5 i {
    font-size: 3rem;
    opacity: 0.5;
    animation: iconBounce 2s ease-in-out infinite;
}

/* Notification badge: bouncy */
.notification-badge,
.badge-notification {
    border-radius: var(--ds-radius-full);
    animation: iconPop 0.3s ease;
}

/* Template icon (workflows) */
.template-icon {
    border-radius: 14px;
    background: rgba(var(--ds-accent-rgb), 0.08);
    transition: all 0.4s var(--ds-p-ease);
}

.template-icon:hover {
    transform: scale(1.1) rotate(-5deg);
}


/* ============================================
   20. DASHBOARD HOME — EXTRA TOUCHES
   ============================================ */

.home-greeting {
    letter-spacing: -0.03em;
}

.home-stat-card {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
    border: 1.5px solid rgba(var(--ds-accent-rgb), 0.15);
}

.home-stat-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--ds-shadow-xl);
    border-color: rgba(var(--ds-accent-rgb), 0.3);
}

.home-stat-card:hover .home-stat-value {
    transform: scale(1.1);
}

.home-stat-value {
    transition: all 0.3s var(--ds-p-ease);
}

/* Stat icon bubbles */
.home-stat-label i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ds-p-icon-bg);
    padding: 4px;
    margin-right: 6px;
    transition: all 0.3s var(--ds-p-ease);
}

.home-stat-card:hover .home-stat-label i {
    animation: iconWobble 0.5s ease;
    background: rgba(var(--ds-accent-rgb), 0.18);
}

/* Panels */
.home-panel {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
    border: 1.5px solid rgba(var(--ds-accent-rgb), 0.12);
    overflow: hidden;
}

.home-panel:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-lg);
}

.home-panel-header {
    border-radius: var(--ds-p-radius-card) var(--ds-p-radius-card) 0 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.home-panel-title i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ds-p-icon-bg);
    padding: 5px;
    transition: all 0.3s var(--ds-p-ease);
}

.home-panel:hover .home-panel-title i {
    animation: iconWobble 0.5s ease;
}

.home-panel-link {
    border-radius: var(--ds-radius-full);
    padding: 4px 12px;
    transition: all 0.25s var(--ds-p-ease);
}

.home-panel-link:hover {
    background: rgba(var(--ds-accent-rgb), 0.08);
    transform: translateX(3px);
}

.home-add-btn {
    border-radius: var(--ds-radius-full);
    transition: all 0.35s var(--ds-p-ease);
}

.home-add-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--ds-shadow-md);
}

.home-add-btn i {
    transition: all 0.3s var(--ds-p-ease);
}

.home-add-btn:hover i {
    transform: scale(1.2) rotate(-5deg);
}

.home-event-item {
    border-radius: var(--ds-radius-md);
    transition: all 0.25s ease;
}

.home-event-item:hover {
    background: rgba(var(--ds-accent-rgb), 0.04);
    transform: translateX(4px);
}

.home-day-header {
    letter-spacing: 0.05em;
}


/* ============================================
   21. SETTINGS — BORDER + GRID
   ============================================ */

.settings-card {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
    border: 1.5px solid rgba(var(--ds-accent-rgb), 0.12);
}

.settings-card:hover {
    transform: translateY(var(--ds-p-hover-lift)) scale(1.01);
    box-shadow: var(--ds-shadow-lg);
    border-color: rgba(var(--ds-accent-rgb), 0.25);
}

.settings-button,
.settings-section {
    border-radius: var(--ds-radius-lg);
    transition: all 0.3s var(--ds-p-ease);
}

.settings-button:hover {
    transform: translateY(-2px) scale(1.01);
}

.settings-grid {
    gap: 1rem;
}


/* ============================================
   22. PROPERTIES PAGE
   ============================================ */

.prop-list-page { border-radius: var(--ds-p-radius-card); }
.prop-toolbar { border-radius: var(--ds-radius-lg); }
.prop-search { border-radius: var(--ds-radius-full); }
.prop-table { border-radius: var(--ds-radius-lg); overflow: hidden; }

.property-row {
    transition: all 0.25s ease;
}

.property-row:hover {
    background: rgba(var(--ds-accent-rgb), 0.04);
    transform: translateX(2px);
}

.prop-icon {
    border-radius: var(--ds-p-icon-radius);
    background: rgba(var(--ds-accent-rgb), 0.08);
}

.prop-action-btn {
    border-radius: var(--ds-radius-full);
    transition: all 0.3s var(--ds-p-ease);
}

.prop-action-btn:hover { transform: scale(1.1); }

.prop-filter-panel { border-radius: var(--ds-radius-lg); }
.prop-filter-select { border-radius: var(--ds-radius-md); }
.prop-bulk-bar { border-radius: var(--ds-radius-full); }
.prop-bulk-btn { border-radius: var(--ds-radius-full); }
.prop-bulk-badge { border-radius: var(--ds-radius-full); }
.prop-pagination .btn { border-radius: var(--ds-radius-full); }
.prop-empty { border-radius: var(--ds-p-radius-card); }


/* ============================================
   23. WORKFLOWS PAGE
   ============================================ */

.workflow-manager { border-radius: var(--ds-p-radius-card); }
.wf-panel { border-radius: var(--ds-p-radius-card); transition: all 0.3s ease; }
.template-badge { border-radius: var(--ds-radius-full); }
.template-actions .btn { border-radius: var(--ds-radius-full); }
.search-box { border-radius: var(--ds-radius-full); }


/* ============================================
   24. DOCUMENTS PAGE
   ============================================ */

.docs-page { border-radius: var(--ds-p-radius-card); }
.docs-input, .docs-select { border-radius: 14px; }

.docs-dropzone {
    border-radius: var(--ds-p-radius-card);
    transition: all 0.4s var(--ds-p-ease);
}

.docs-dropzone:hover {
    transform: scale(1.01);
    box-shadow: var(--ds-shadow-md);
}

.summary-chip {
    border-radius: var(--ds-radius-full);
    transition: all 0.3s var(--ds-p-ease);
}

.summary-chip:hover {
    transform: translateY(-2px) scale(1.05);
}

.doc-summary { border-radius: var(--ds-radius-lg); }
.doc-header { border-radius: var(--ds-radius-md); }


/* ============================================
   25. CALENDAR PAGE
   ============================================ */

/* Calendar-specific event cards */
.calendar-event-card {
    border-radius: var(--ds-radius-lg);
    transition: all 0.35s var(--ds-p-ease);
}

.calendar-event-card:hover {
    transform: translateY(-3px) scale(1.01);
}

/* AI section */
.calendar-ai-section {
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border-radius: var(--ds-radius-2xl);
}

.calendar-ai-badge { border-radius: var(--ds-radius-full); }
.calendar-ai-input-row input { border-radius: var(--ds-radius-full); }
.btn-ai-schedule { border-radius: var(--ds-radius-full); }

.calendar-suggestion-chip {
    border-radius: var(--ds-radius-full);
    transition: all 0.3s var(--ds-p-ease);
}

.calendar-suggestion-chip:hover {
    transform: translateY(-3px) scale(1.05);
}

/* Section counts */
.section-count { border-radius: var(--ds-radius-full); }

/* Pending events */
.pending-events-container { border-radius: var(--ds-p-radius-card); }


/* ============================================
   26. PAGE CONTENT WRAPPER — CUTE ENHANCEMENTS
   ============================================
   Inherits base styles from _page-header.css,
   only adds cute-specific radius enhancement.
   ============================================ */

.page-content-wrapper {
    border-radius: var(--ds-radius-md);
}

/* Page header action buttons: pill shape */
.page-header-standard .page-actions .btn {
    border-radius: var(--ds-radius-full);
}

/* Unified primary button color in page headers */
.page-header-standard .page-actions .btn-primary,
.page-header-standard .page-actions .wf-btn-primary {
    background: var(--ds-color-accent);
    border-color: var(--ds-color-accent);
    color: var(--ds-color-text-inverse);
}

.page-header-standard .page-actions .btn-primary:hover,
.page-header-standard .page-actions .wf-btn-primary:hover {
    background: var(--ds-color-accent-hover);
    border-color: var(--ds-color-accent-hover);
}

/* Legacy wf-page-* styles */
.wf-page-header { border-radius: var(--ds-p-radius-card); }
.wf-page-title { letter-spacing: -0.03em; }
.wf-page-actions .btn { border-radius: var(--ds-radius-full); }


/* ============================================
   27. LANDING PAGE — HERO + CTA
   ============================================ */

.hero-section .btn,
.cta-section .btn {
    border-radius: var(--ds-radius-full);
    padding-left: 2rem;
    padding-right: 2rem;
}


/* ============================================
   28. PAGE CONTAINER
   ============================================ */

.page-container { border-radius: var(--ds-p-radius-card); }
.home-page-container { border-radius: var(--ds-radius-2xl); }


/* ============================================
   REDUCED MOTION — Respect user preference
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* end cute personality */