Rock Foundations

// Rock RMS v18 Primary Brand
@color-primary:      #1E6EBF;
@color-primary-dark: #155499;
@color-primary-light: #EBF4FF;
@color-primary-soft:  #DBEAFE;

// Semantic — Success
@color-success-strong: #15803D;
@color-success-soft:   #DCFCE7;

// Semantic — Danger
@color-danger-strong: #B91C1C;
@color-danger-soft:   #FEE2E2;

// Typography tokens
font-family: @font-family-base;     // Inter — all UI text
font-family: @font-family-display;  // Merriweather — headings, giving widget

font-size: @font-size-base;         // 14px — body
font-size: @font-size-md;           // 16px — card titles
font-size: @font-size-xl;           // 22px — section headings

font-weight: @font-weight-normal;   // 400
font-weight: @font-weight-semibold; // 600 — headings
font-weight: @font-weight-bold;     // 700 — stats, CTAs

line-height: @line-height-base;     // 1.5 — body text
line-height: @line-height-tight;    // 1.25 — headings

// Rock Foundations Spacing Scale
padding: @spacing-medium;         // 16px
gap: @spacing-small;              // 8px
margin-bottom: @spacing-xlarge;   // 32px

// Apply shadows via Less variables
box-shadow: @shadow-xs;   // Topbar, subtle borders
box-shadow: @shadow-sm;   // Cards, default state
box-shadow: @shadow-md;   // Cards on hover
box-shadow: @shadow-lg;   // Dropdowns, panels
box-shadow: @shadow-xl;   // Modals, overlays

// Apply radius tokens via Less variables
border-radius: @rounded-xsmall;  // 3px  — buttons (sm), tags
border-radius: @rounded-small;   // 5px  — inputs, buttons (default)
border-radius: @rounded-medium;  // 8px  — cards, panels, modals
border-radius: @rounded-large;   // 12px — action icons, media cards
border-radius: @rounded-xlarge;  // 16px — feature cards
border-radius: @rounded-full;    // 9999px — avatars, badges, pills

<!-- Button variants -->
<button class="rf-btn rf-btn-primary">Primary</button>
<button class="rf-btn rf-btn-secondary">Secondary</button>
<button class="rf-btn rf-btn-success">Success</button>
<button class="rf-btn rf-btn-danger">Danger</button>
<button class="rf-btn rf-btn-ghost">Ghost</button>

<!-- Sizes: add .rf-btn-sm or .rf-btn-lg -->
<button class="rf-btn rf-btn-primary rf-btn-lg">Large</button>

<!-- Loading state -->
<button class="rf-btn rf-btn-primary rf-btn-loading" aria-busy="true">Save</button>

<!-- Icon only -->
<button class="rf-btn rf-btn-ghost rf-btn-icon-only" aria-label="Edit">
  <i class="fa-solid fa-pen-to-square"></i>
</button>

<!-- Text Input with label and helper -->
<div class="rf-form-group">
  <label class="rf-label" for="my-input">Full Name</label>
  <input class="rf-input" id="my-input" type="text" placeholder="Enter name">
  <div class="rf-field-help">Helper text below</div>
</div>

<!-- Error state -->
<input class="rf-input rf-input-error" aria-invalid="true"
       aria-describedby="err-msg">
<div class="rf-field-error" id="err-msg">Error message</div>

<!-- Toggle Switch -->
<label class="rf-toggle-wrapper">
  <input type="checkbox">
  <div class="rf-toggle"></div>
  <span class="rf-toggle-label">Email Opt-In</span>
</label>

<!-- Filled badge -->
<span class="rf-badge rf-badge-primary">Primary</span>
<span class="rf-badge rf-badge-success">Success</span>

<!-- Soft (pale) badge -->
<span class="rf-badge rf-badge-warning-soft">Pending Review</span>

<!-- Status badge with dot -->
<span class="rf-status-badge rf-status-active">
  <span class="rf-status-dot"></span>Active
</span>

<!-- Removable tag — JS handles removal on × click -->
<span class="rf-tag">
  Worship Team
  <button class="rf-tag-remove" aria-label="Remove">×</button>
</span>

<!-- Counter badge overlapping a button -->
<div class="rf-badge-counter-wrapper">
  <button class="rf-btn rf-btn-ghost rf-btn-icon-only" aria-label="Notifications">
    <i class="fa-solid fa-bell"></i>
  </button>
  <span class="rf-badge-counter">3</span>
</div>

<div class="rf-alert rf-alert-success" role="alert">
  <i class="rf-alert-icon fa-solid fa-circle-check"></i>
  <div class="rf-alert-body">
    <div class="rf-alert-title">Success Title</div>
    <p class="rf-alert-text">Details about what happened.</p>
  </div>
  <button class="rf-alert-dismiss" aria-label="Dismiss">×</button>
</div>

<!-- Avatar with initials — sizes: xs sm md lg xl xxl -->
<div class="rf-avatar rf-avatar-md rf-avatar-blue">SM</div>

<!-- Color variants: blue green amber red teal purple pink indigo -->
<div class="rf-avatar rf-avatar-md rf-avatar-purple">JT</div>

<!-- Icon avatar -->
<div class="rf-avatar rf-avatar-md rf-avatar-green">
  <i class="fa-solid fa-user"></i>
</div>

<!-- Avatar with status dot -->
<div class="rf-avatar-wrapper rf-avatar-md-wrap">
  <div class="rf-avatar rf-avatar-md rf-avatar-blue">SM</div>
  <div class="rf-avatar-status rf-status-online"></div>
</div>

<!-- Overlapping group -->
<div class="rf-avatar-group">
  <div class="rf-avatar rf-avatar-md rf-avatar-blue">SM</div>
  <div class="rf-avatar rf-avatar-md rf-avatar-green">JT</div>
  <div class="rf-avatar-group-more">+3 more</div>
</div>

<!-- Basic card with header / body / footer -->
<div class="rf-card">
  <div class="rf-card-header">
    <div class="rf-card-title">Card Title</div>
  </div>
  <div class="rf-card-body">Card content goes here.</div>
  <div class="rf-card-footer">
    <button class="rf-btn rf-btn-primary rf-btn-sm">Action</button>
  </div>
</div>

<!-- Clickable card with hover lift -->
<div class="rf-card rf-card-clickable">...</div>

<!-- Stat card -->
<div class="rf-card-stat">
  <div class="rf-card-stat-number">1,247</div>
  <div class="rf-card-stat-label">Weekend Attendance</div>
  <span class="rf-card-stat-trend rf-trend-up">
    <i class="fa-solid fa-arrow-trend-up"></i> +8%
  </span>
</div>

<!-- Default collapsible panel (JS toggles .is-open) -->
<div class="rf-panel">
  <div class="rf-panel-header" role="button" aria-expanded="true">
    <h3 class="rf-panel-title">Panel Title</h3>
    <i class="rf-panel-toggle-icon fa-solid fa-chevron-down"></i>
  </div>
  <div class="rf-panel-body is-open">
    Panel body content here.
  </div>
</div>

<!-- Colour variants: rf-panel-primary / success / warning / danger -->
<div class="rf-panel rf-panel-primary">...</div>

<table class="rf-table rf-table-hover rf-table-striped" aria-label="Group members">
  <thead>
    <tr>
      <th class="rf-col-check"><input type="checkbox" class="rf-table-select-all"></th>
      <th class="rf-sortable">Name <i class="fas fa-sort rf-sort-icon"></i></th>
      <th class="rf-sortable">Role <i class="fas fa-sort rf-sort-icon"></i></th>
      <th class="rf-sortable">Status <i class="fas fa-sort rf-sort-icon"></i></th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rf-col-check"><input type="checkbox" class="rf-table-row-check"></td>
      <td>Sarah Mitchell</td>
      <td>Group Leader</td>
      <td><span class="rf-status-badge rf-status-active">Active</span></td>
      <td>
        <div class="rf-table-actions">
          <button class="rf-table-action-btn" aria-label="View"><i class="fa-solid fa-eye"></i></button>
          <button class="rf-table-action-btn" aria-label="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
          <button class="rf-table-action-btn rf-action-delete" aria-label="Delete"><i class="fa-solid fa-trash-can"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<!-- Pagination -->
<div class="rf-pagination">
  <div class="rf-pagination-info">Showing 1–5 of 7 results</div>
  <div class="rf-pagination-controls">
    <button class="rf-page-btn" data-action="prev"><i class="fa-solid fa-chevron-left"></i></button>
    <button class="rf-page-btn rf-page-active" data-page="1">1</button>
    <button class="rf-page-btn" data-page="2">2</button>
    <button class="rf-page-btn" data-action="next"><i class="fa-solid fa-chevron-right"></i></button>
  </div>
</div>

<!-- Breadcrumbs -->
<nav aria-label="Breadcrumb">
  <ol class="rf-breadcrumb">
    <li><a href="#">Home</a> <span class="rf-breadcrumb-sep" aria-hidden="true">›</span></li>
    <li><a href="#">Components</a> <span class="rf-breadcrumb-sep" aria-hidden="true">›</span></li>
    <li class="rf-breadcrumb-current" aria-current="page">Buttons</li>
  </ol>
</nav>

<!-- Tabs (vanilla JS) -->
<div class="rf-tabs" role="tabpanel">
  <div class="rf-tab-list" role="tablist">
    <button class="rf-tab-btn" role="tab" aria-selected="true">Overview</button>
    <button class="rf-tab-btn" role="tab" aria-selected="false">Members</button>
  </div>
  <div class="rf-tab-content-area">
    <div class="rf-tab-pane">Overview content</div>
    <div class="rf-tab-pane">Members content</div>
  </div>
</div>

<!-- Pills -->
<div class="rf-pills" role="group" aria-label="Filter options">
  <button class="rf-pill rf-pill-active">All Members</button>
  <button class="rf-pill">Active</button>
  <button class="rf-pill">Inactive</button>
</div>

<div class="rf-member-card" tabindex="0" role="article" aria-label="Sarah Mitchell, Worship Team Lead">
  <div class="rf-member-card-status">
    <span class="rf-status-badge rf-status-active">Connected</span>
  </div>
  <div class="rf-member-card-avatar-area">
    <div class="rf-avatar-wrapper rf-avatar-lg-wrap">
      <div class="rf-avatar rf-avatar-lg rf-avatar-blue">SM</div>
      <div class="rf-avatar-status rf-status-online"></div>
    </div>
  </div>
  <div class="rf-member-card-name">Sarah Mitchell</div>
  <div class="rf-member-card-role">Worship Team Lead</div>
  <div class="rf-member-card-stats">
    <span><strong>47</strong> Groups</span>
    <span class="rf-stat-sep">·</span>
    <span><strong>12</strong> Events</span>
  </div>
  <div class="rf-member-card-actions">
    <button class="rf-btn rf-btn-ghost rf-btn-sm">Message</button>
    <button class="rf-btn rf-btn-primary rf-btn-sm">+ Group</button>
  </div>
</div>

<div class="rf-group-card">
  <div class="rf-group-card-header">
    <div class="rf-group-icon"><i class="fa-solid fa-users"></i></div>
    <div class="rf-group-title-area">
      <div class="rf-group-name">Young Adults — Wednesday</div>
      <span class="rf-badge rf-badge-primary-soft">Small Group</span>
    </div>
  </div>
  <div class="rf-group-leader-row">
    <div class="rf-avatar rf-avatar-sm rf-avatar-green">JT</div>
    <span>Led by <strong>Pastor James Torres</strong></span>
  </div>
  <ul class="rf-group-info-list">
    <li><i class="fa-solid fa-calendar-days"></i> Wednesdays at 7:00 PM</li>
    <li><i class="fa-solid fa-location-dot"></i> Main Campus — Room 214</li>
    <li><i class="fa-solid fa-users"></i> 14 / 20 Members</li>
  </ul>
  <div class="rf-group-capacity">
    <div class="rf-group-capacity-label"><span>Capacity</span><strong>14 / 20</strong></div>
    <div class="rf-progress"><div class="rf-progress-bar" style="width:70%;"></div></div>
  </div>
  <button class="rf-btn rf-btn-primary rf-w-full">Join Group</button>
</div>

<div class="rf-event-block">
  <div class="rf-event-banner">
    <div class="rf-event-banner-overlay"></div>
    <div class="rf-event-banner-icon"><i class="fa-solid fa-church"></i></div>
  </div>
  <div class="rf-event-body">
    <h3 class="rf-event-name">Easter Sunday Celebration</h3>
    <ul class="rf-event-meta-list">
      <li><i class="fa-solid fa-calendar-days"></i> Sunday, April 20, 2025</li>
      <li><i class="fa-solid fa-clock"></i> 9:00 AM &amp; 11:00 AM Services</li>
      <li><i class="fa-solid fa-location-dot"></i> Main Auditorium</li>
    </ul>
    <div class="rf-event-capacity">
      <div class="rf-progress"><div class="rf-progress-bar" style="width:62%;"></div></div>
    </div>
    <button class="rf-btn rf-btn-primary rf-w-full rf-btn-lg">Register Now</button>
  </div>
</div>

<div class="rf-giving-widget">
  <div class="rf-giving-title">Give to Life Change</div>

  <div class="rf-giving-amounts">
    <button class="rf-amount-btn" data-amount="25">$25</button>
    <button class="rf-amount-btn rf-amount-active" data-amount="50">$50</button>
    <button class="rf-amount-btn" data-amount="100">$100</button>
    <button class="rf-amount-btn" data-amount="" data-custom="true">Custom</button>
  </div>

  <div class="rf-giving-fund rf-form-group">
    <label class="rf-label" for="giving-fund">Give To</label>
    <select class="rf-select" id="giving-fund">
      <option>General Fund</option>
      <option>Missions</option>
    </select>
  </div>

  <div class="rf-freq-tabs" role="group" aria-label="Gift frequency">
    <button class="rf-freq-tab rf-freq-active">One-Time</button>
    <button class="rf-freq-tab">Weekly</button>
    <button class="rf-freq-tab">Monthly</button>
  </div>

  <button class="rf-btn rf-btn-primary rf-w-full rf-btn-lg">
    <i class="fa-solid fa-lock"></i> Give Now
  </button>
</div>

<div class="rf-prayer-card">
  <div class="rf-prayer-header">
    <div class="rf-prayer-author-info">
      <div class="rf-avatar rf-avatar-sm rf-avatar-teal">MR</div>
      <div>
        <div class="rf-prayer-author-name">Marcus Rivera</div>
        <div class="rf-prayer-time">2 hours ago</div>
      </div>
    </div>
  </div>
  <div class="rf-prayer-body">
    <p class="rf-prayer-text" id="prayer-text-1">Prayer request text here...</p>
    <button class="rf-prayer-read-more" aria-expanded="false" aria-controls="prayer-text-1">Read more</button>
  </div>
  <div class="rf-prayer-tags">
    <span class="rf-badge rf-badge-info-soft">Health</span>
    <span class="rf-badge rf-badge-warning-soft">Family</span>
  </div>
  <!-- Vue prayer counter mounts here -->
  <div id="vue-prayer-counter"></div>
</div>

<div class="rf-stat-grid">
  <div class="rf-stat-card">
    <div class="rf-stat-card-header">
      <div class="rf-stat-icon rf-stat-icon-blue"><i class="fa-solid fa-users"></i></div>
      <span class="rf-stat-trend rf-trend-up"><i class="fa-solid fa-arrow-trend-up"></i> +8%</span>
    </div>
    <div class="rf-stat-number">1,247</div>
    <div class="rf-stat-label">Weekend Attendance</div>
    <div class="rf-stat-footer">
      <span>vs last week</span>
      <div class="rf-stat-sparkline">
        <svg width="60" height="28" viewBox="0 0 60 28" fill="none">
          <polyline points="0,22 8,18 16,20 24,14 32,16 40,10 48,8 60,4"
            stroke="#1E6EBF" stroke-width="1.5" fill="none"/>
        </svg>
      </div>
    </div>
  </div>
  <!-- Repeat for each KPI: rf-stat-icon-green, purple, orange -->
</div>

<div class="rf-checkin-badge">
  <div class="rf-checkin-header">
    <span class="rf-checkin-church-name">Rock Church</span>
    <i class="rf-checkin-header-icon fa-solid fa-shield-halved"></i>
  </div>
  <div class="rf-checkin-body">
    <div class="rf-checkin-code">4721</div>
    <div class="rf-checkin-child-name">Emma Johnson</div>
    <div class="rf-checkin-service">9:00 AM Service — Room K3</div>
    <div class="rf-checkin-allergies">
      <span class="rf-badge rf-badge-danger">
        <i class="fa-solid fa-triangle-exclamation"></i> Nut Allergy
      </span>
    </div>
  </div>
  <div class="rf-checkin-barcode" role="img" aria-label="Security barcode"></div>
  <button class="rf-btn rf-btn-primary rf-w-full rf-btn-sm">
    <i class="fa-solid fa-print"></i> Print Badge
  </button>
</div>

<div class="rf-volunteer-table">
  <div class="rf-volunteer-table-header">
    <span>Volunteer</span>
    <span>Role</span>
    <span>Service</span>
    <span>Status</span>
    <span>Actions</span>
  </div>
  <div class="rf-volunteer-row">
    <div class="rf-vol-person">
      <div class="rf-avatar rf-avatar-sm rf-avatar-blue">SM</div>
      <span class="rf-vol-name">Sarah Mitchell</span>
    </div>
    <div class="rf-vol-role"><span class="rf-badge rf-badge-primary-soft">Worship</span></div>
    <div class="rf-vol-time">9:00 AM</div>
    <div class="rf-vol-status">
      <span class="rf-status-badge rf-status-active">Confirmed</span>
    </div>
    <div class="rf-vol-actions">
      <button class="rf-vol-action-btn rf-vol-confirm" aria-label="Confirm"><i class="fa-solid fa-check"></i></button>
      <button class="rf-vol-action-btn rf-vol-decline" aria-label="Decline"><i class="fa-solid fa-xmark"></i></button>
      <button class="rf-vol-action-btn rf-vol-message" aria-label="Message"><i class="fa-regular fa-comment"></i></button>
    </div>
  </div>
</div>

<!-- Modal trigger (Vue) -->
<button class="rf-btn rf-btn-primary" @click="openModal('md')">
  Open Modal
</button>

<!-- Modal structure -->
<div class="rf-modal-backdrop" role="dialog" aria-modal="true">
  <div class="rf-modal-box rf-modal-md">
    <div class="rf-modal-header">
      <h3 class="rf-modal-title">Modal Title</h3>
      <button class="rf-modal-close" aria-label="Close">×</button>
    </div>
    <div class="rf-modal-body">Content here</div>
    <div class="rf-modal-footer">
      <button class="rf-btn rf-btn-ghost">Cancel</button>
      <button class="rf-btn rf-btn-primary">Confirm</button>
    </div>
  </div>
</div>

<!-- Trigger a toast from Vue -->
<button class="rf-btn rf-btn-success" @click="addToast('success', 'Saved!', 'Changes saved successfully.')">
  Success Toast
</button>

<!-- Toast container (Vue renders here) -->
<div class="rf-toast-container" aria-live="polite" role="status">
  <transition-group name="rf-toast">
    <div v-for="toast in toasts" :key="toast.id"
      class="rf-toast" :class="'rf-toast-' + toast.type" role="alert">
      <div class="rf-toast-content">
        <strong>{{ toast.title }}</strong>
        <span>{{ toast.message }}</span>
      </div>
      <div class="rf-toast-progress"></div>
    </div>
  </transition-group>
</div>

<!-- Dropdown trigger (Vue) -->
<div class="rf-dropdown-wrapper">
  <button class="rf-btn rf-btn-ghost"
    aria-haspopup="true"
    :aria-expanded="isOpen.toString()"
    @click="toggle">
    Actions <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div v-if="isOpen" class="rf-dropdown-menu" role="menu">
    <button class="rf-dropdown-item" role="menuitem">
      <i class="fa-solid fa-pen-to-square"></i> Edit
    </button>
    <button class="rf-dropdown-item" role="menuitem">
      <i class="fa-solid fa-copy"></i> Duplicate
    </button>
    <div class="rf-dropdown-divider"></div>
    <button class="rf-dropdown-item rf-dropdown-item-danger" role="menuitem">
      <i class="fa-solid fa-trash-can"></i> Delete
    </button>
  </div>
</div>

<!-- Vue Tabs -->
<div class="rf-vue-tabs">
  <div class="rf-vue-tab-list" role="tablist">
    <button class="rf-vue-tab-btn active"
      :aria-selected="activeTab === 'overview'"
      @click="setTab('overview')">
      Overview
    </button>
  </div>
  <div class="rf-vue-tab-content">
    <div v-if="activeTab === 'overview'">
      <!-- Tab content -->
    </div>
  </div>
</div>