Desgin überarbeitet

Client/Modules/SZUAbsolventenverein.Module.PremiumArea/ApplicationList.razor

@@ -8,7 +8,7 @@
 
 @if (Oqtane.Security.UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin) || Oqtane.Security.UserSecurity.IsAuthorized(PageState.User, "Premium Member"))
 {
-    <h3>Ingenieur-Anträge</h3>
+    <h3 class="pa-section-title">Ingenieur-Anträge</h3>
 
     @if (_applications == null)
     {
@@ -16,8 +16,8 @@
     }
     else if (_applications.Count == 0)
     {
-        <div class="alert alert-warning">
-            Keine Anträge gefunden.
+        <div class="pa-alert pa-alert-warning">
+            ⚠ Keine Anträge gefunden.
         </div>
     }
     else
@@ -26,45 +26,44 @@
             @foreach (var app in _applications)
             {
                 <div class="col-md-4 mb-3">
-                    <div class="card h-100">
-                        <div class="card-body">
+                    <div class="pa-app-card">
+                        <div class="pa-app-card-body">
                             <div class="d-flex justify-content-between align-items-start">
-                                <h5 class="card-title mb-0">@(string.IsNullOrEmpty(app.Title) ? "Ingenieur-Antrag" : app.Title)</h5>
+                                <div class="pa-app-card-title">@(string.IsNullOrEmpty(app.Title) ? "Ingenieur-Antrag" : app.Title)</div>
                                 @if (Oqtane.Security.UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
                                 {
                                     @if (_confirmDeleteId == app.ApplicationId)
                                     {
-                                        <div class="d-flex gap-1">
-                                            <button class="btn btn-danger btn-sm" @onclick="@(() => DeleteApp(app))" title="Bestätigen">
+                                        <div class="pa-d-flex pa-gap-2">
+                                            <button class="pa-btn pa-btn-danger pa-btn-sm" @onclick="@(() => DeleteApp(app))" title="Bestätigen">
                                                 <span class="oi oi-check"></span>
                                             </button>
-                                            <button class="btn btn-secondary btn-sm" @onclick="@(() => _confirmDeleteId = -1)" title="Abbrechen">
+                                            <button class="pa-btn pa-btn-secondary pa-btn-sm" @onclick="@(() => _confirmDeleteId = -1)" title="Abbrechen">
                                                 <span class="oi oi-x"></span>
                                             </button>
                                         </div>
                                     }
                                     else
                                     {
-                                        <button class="btn btn-outline-danger btn-sm" @onclick="@(() => _confirmDeleteId = app.ApplicationId)" title="Antrag löschen">
+                                        <button class="pa-btn pa-btn-outline-danger pa-btn-sm" @onclick="@(() => _confirmDeleteId = app.ApplicationId)" title="Antrag löschen">
                                             <span class="oi oi-trash"></span>
                                         </button>
                                     }
                                 }
                             </div>
-                            <h6 class="card-subtitle mb-2 text-muted mt-1">von @GetUserName(app.UserId)</h6>
+                            <div class="pa-app-card-author">von @GetUserName(app.UserId)</div>
                             @if (!string.IsNullOrEmpty(app.ShortDescription))
                             {
-                                <p class="card-text">@app.ShortDescription</p>
+                                <div class="pa-app-card-desc">@app.ShortDescription</div>
                             }
-                            <p class="card-text text-muted">
-                                <small>
-                                    <strong>Datum:</strong> @(app.ApprovedOn?.ToShortDateString() ?? app.CreatedOn.ToShortDateString())
-                                </small>
-                            </p>
-                            <div class="d-flex gap-2">
-                                <button class="btn btn-primary btn-sm" @onclick="@(async () => ShowDetail(app))">PDF ansehen</button>
-                                <a href="@(PageState.Alias.Path == "" ? "" : "/" + PageState.Alias.Path)/api/file/download/@(app.FileId)/attach" target="_blank" class="btn btn-outline-secondary btn-sm">Herunterladen</a>
-                                <button class="btn btn-outline-danger btn-sm" @onclick="@(() => InitReport(app))">Melden</button>
+                            <div class="pa-app-card-meta">
+                                <span class="oi oi-calendar"></span>
+                                <span>@(app.ApprovedOn?.ToShortDateString() ?? app.CreatedOn.ToShortDateString())</span>
+                            </div>
+                            <div class="pa-app-card-actions">
+                                <button class="pa-btn pa-btn-primary pa-btn-sm" @onclick="@(async () => ShowDetail(app))">PDF ansehen</button>
+                                <a href="@(PageState.Alias.Path == "" ? "" : "/" + PageState.Alias.Path)/api/file/download/@(app.FileId)/attach" target="_blank" class="pa-btn pa-btn-outline-secondary pa-btn-sm">Herunterladen</a>
+                                <button class="pa-btn pa-btn-outline-danger pa-btn-sm" @onclick="@(() => InitReport(app))">Melden</button>
                             </div>
                         </div>
                     </div>
@@ -75,8 +74,8 @@
 }
 else
 {
-    <div class="alert alert-warning">
-        Sie müssen Premium Kunde sein um diese Funktion zu nutzen.
+    <div class="pa-alert pa-alert-warning">
+        ⚠ Sie müssen Premium Kunde sein um diese Funktion zu nutzen.
     </div>
 }
 
@@ -84,18 +83,18 @@ else
 {
     <div class="modal d-block" tabindex="-1">
         <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
+            <div class="modal-content pa-modal-content">
+                <div class="modal-header pa-modal-header">
                     <h5 class="modal-title">Antrags-PDF</h5>
                     <button type="button" class="btn-close" @onclick="@(() => _selectedApp = null)"></button>
                 </div>
-                <div class="modal-body p-0">
+                <div class="modal-body pa-modal-body" style="padding: 0 !important;">
                     <div style="min-height: 600px; height: 75vh;">
                         <iframe src="@(PageState.Alias.Path == "" ? "" : "/" + PageState.Alias.Path)/api/file/download/@(_selectedApp.FileId)" style="width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
                     </div>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @onclick="@(() => _selectedApp = null)">Schließen</button>
+                <div class="modal-footer pa-modal-footer">
+                    <button type="button" class="pa-btn pa-btn-secondary" @onclick="@(() => _selectedApp = null)">Schließen</button>
                 </div>
             </div>
         </div>
@@ -107,18 +106,18 @@ else
 {
     <div class="modal d-block" tabindex="-1">
         <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
+            <div class="modal-content pa-modal-content">
+                <div class="modal-header pa-modal-header">
                     <h5 class="modal-title">Antrag melden</h5>
                     <button type="button" class="btn-close" @onclick="@(() => _reportApp = null)"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body pa-modal-body">
                     <p>Bitte geben Sie einen Grund an, warum Sie diesen Antrag melden (von @GetUserName(_reportApp.UserId)).</p>
-                    <textarea class="form-control" rows="3" @bind="_reportReason" placeholder="Grund..."></textarea>
+                    <textarea class="pa-form-control" rows="3" style="width: 100%;" @bind="_reportReason" placeholder="Grund..."></textarea>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @onclick="@(() => _reportApp = null)">Abbrechen</button>
-                    <button type="button" class="btn btn-danger" @onclick="SubmitReport">Meldung absenden</button>
+                <div class="modal-footer pa-modal-footer">
+                    <button type="button" class="pa-btn pa-btn-secondary" @onclick="@(() => _reportApp = null)">Abbrechen</button>
+                    <button type="button" class="pa-btn pa-btn-danger" @onclick="SubmitReport">Meldung absenden</button>
                 </div>
             </div>
         </div>
@@ -129,6 +128,11 @@ else
 @code {
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.View;
 
+    public override List<Resource> Resources => new List<Resource>()
+    {
+        new Stylesheet("_content/SZUAbsolventenverein.Module.PremiumArea/Module.css")
+    };
+
     private List<EngineerApplication> _applications;
     private EngineerApplication _selectedApp;
     private EngineerApplication _reportApp;

Client/Modules/SZUAbsolventenverein.Module.PremiumArea/Apply.razor

@@ -9,17 +9,17 @@
 
 <div class="row">
     <div class="col-md-12">
-        <h3>@Localizer["Ingenieur Antrag"]</h3>
+        <h3 class="pa-section-title">@Localizer["Ingenieur Antrag"]</h3>
         @if (!string.IsNullOrEmpty(_message))
         {
-            <div class="alert alert-info">@_message</div>
+            <div class="pa-alert pa-alert-info">@_message</div>
         }
     </div>
 </div>
 
 @if (_showForm)
 {
-    <div class="card p-3">
+    <div class="pa-card"><div class="pa-card-body">
         <p>Bitte laden Sie Ihren Ingenieur-Antrag als PDF-Datei hoch.</p>
 
         <div class="mb-3">
@@ -41,23 +41,23 @@
 
         <FileManager OnSelectFile="@OnSelectFile" ShowProgress="true" ShowSuccess="true"/>
 
-        <div class="mt-2">
-            <button class="btn btn-primary" @onclick="SubmitApplication" disabled="@(_existingApp?.FileId == 0)">
+        <div class="pa-d-flex pa-gap-2 pa-mt-3">
+            <button class="pa-btn pa-btn-primary" @onclick="SubmitApplication" disabled="@(_existingApp?.FileId == 0)">
                 @(_existingApp.ApplicationId > 0 ? "Antrag aktualisieren" : "Antrag hochladen")
             </button>
-            <button class="btn btn-secondary" @onclick="Cancel">Abbrechen</button>
+            <button class="pa-btn pa-btn-secondary" @onclick="Cancel">Abbrechen</button>
         </div>
-    </div>
+    </div></div>
 }
 else
 {
     @if (_existingApp.FileId > 0)
     {
-        <div class="card">
-            <div class="card-header">Ihr Antrag</div>
-            <div class="card-body">
+        <div class="pa-card">
+            <div class="pa-card-header">Ihr Antrag</div>
+            <div class="pa-card-body">
                 <p>
-                    <strong>Status:</strong> <span class="badge bg-success">Veröffentlicht</span>
+                    <strong>Status:</strong> <span class="pa-badge pa-badge-success">✓ Veröffentlicht</span>
                 </p>
                 @if (!string.IsNullOrEmpty(_existingApp.Title))
                 {
@@ -74,16 +74,16 @@ else
                 <p>
                     <strong>Datum:</strong> @_existingApp.CreatedOn.ToShortDateString()
                 </p>
-                <div class="d-flex gap-2">
-                    <button class="btn btn-primary" @onclick="EditApp">Antrag aktualisieren</button>
+                <div class="pa-d-flex pa-gap-2 pa-flex-wrap">
+                    <button class="pa-btn pa-btn-primary" @onclick="EditApp">Antrag aktualisieren</button>
                     @if (!_confirmDelete)
                     {
-                        <button class="btn btn-outline-danger" @onclick="() => _confirmDelete = true">Antrag löschen</button>
+                        <button class="pa-btn pa-btn-outline-danger" @onclick="() => _confirmDelete = true">Antrag löschen</button>
                     }
                     else
                     {
-                        <button class="btn btn-danger" @onclick="DeleteApp">Wirklich löschen?</button>
-                        <button class="btn btn-secondary" @onclick="() => _confirmDelete = false">Abbrechen</button>
+                        <button class="pa-btn pa-btn-danger" @onclick="DeleteApp">Wirklich löschen?</button>
+                        <button class="pa-btn pa-btn-secondary" @onclick="() => _confirmDelete = false">Abbrechen</button>
                     }
                 </div>
             </div>
@@ -94,6 +94,11 @@ else
 @code {
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.View;
 
+    public override List<Resource> Resources => new List<Resource>()
+    {
+        new Stylesheet("_content/SZUAbsolventenverein.Module.PremiumArea/Module.css")
+    };
+
     private EngineerApplication _existingApp = new EngineerApplication();
     private bool _showForm = true;
     private bool _confirmDelete = false;

Client/Modules/SZUAbsolventenverein.Module.PremiumArea/Edit.razor

@@ -17,8 +17,10 @@
             </div>
         </div>
     </div>
-    <button type="button" class="btn btn-success" @onclick="Save">@Localizer["Save"]</button>
-    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@Localizer["Cancel"]</NavLink>
+    <div class="pa-d-flex pa-gap-2 pa-mt-3">
+        <button type="button" class="pa-btn pa-btn-success" @onclick="Save">@Localizer["Save"]</button>
+        <NavLink class="pa-btn pa-btn-secondary" href="@NavigateUrl()">@Localizer["Cancel"]</NavLink>
+    </div>
     <br /><br />
     @if (PageState.Action == "Edit")
     {

Client/Modules/SZUAbsolventenverein.Module.PremiumArea/Index.razor

@@ -9,10 +9,40 @@
 @inject NavigationManager NavigationManager
 @inject IStringLocalizer<Index> Localizer
 
-<div class="mb-3">
-    <ActionLink Action="Apply" Text="Ingenieur Antrag hochladen"/>
-    <ActionLink Action="UserSearch" Text="Mitglieder finden"/>
-    <ActionLink Action="ApplicationList" Text="Alle Ingenieur-Anträge"/>
+<div class="premium-area-wrapper">
+    <div class="premium-area-header">
+        <h2>Premium Bereich</h2>
+        <p>Verwalten Sie Ihre Ingenieur-Anträge und vernetzen Sie sich mit anderen Mitgliedern.</p>
+    </div>
+
+    <div class="pa-nav-grid">
+        <a class="pa-nav-card pa-nav-card--apply" href="@EditUrl("Apply")">
+            <div class="pa-nav-icon">
+                <span class="oi oi-cloud-upload"></span>
+            </div>
+            <div class="pa-nav-title">Ingenieur Antrag</div>
+            <div class="pa-nav-desc">Laden Sie Ihren Ingenieur-Antrag hoch und verwalten Sie Ihre Einreichungen.</div>
+            <div class="pa-nav-arrow">Jetzt starten →</div>
+        </a>
+
+        <a class="pa-nav-card pa-nav-card--search" href="@EditUrl("UserSearch")">
+            <div class="pa-nav-icon">
+                <span class="oi oi-people"></span>
+            </div>
+            <div class="pa-nav-title">Mitglieder finden</div>
+            <div class="pa-nav-desc">Suchen Sie nach anderen Mitgliedern und treten Sie in Kontakt.</div>
+            <div class="pa-nav-arrow">Suche starten →</div>
+        </a>
+
+        <a class="pa-nav-card pa-nav-card--list" href="@EditUrl("ApplicationList")">
+            <div class="pa-nav-icon">
+                <span class="oi oi-list-rich"></span>
+            </div>
+            <div class="pa-nav-title">Alle Anträge</div>
+            <div class="pa-nav-desc">Durchsuchen Sie alle veröffentlichten Ingenieur-Anträge der Community.</div>
+            <div class="pa-nav-arrow">Anträge ansehen →</div>
+        </a>
+    </div>
 </div>
 
 @code {

Client/Modules/SZUAbsolventenverein.Module.PremiumArea/UserSearch.razor

@@ -7,11 +7,11 @@
 
 @if (Oqtane.Security.UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin) || Oqtane.Security.UserSecurity.IsAuthorized(PageState.User, "Premium Member"))
 {
-    <h3>Mitglieder Suche</h3>
+    <h3 class="pa-section-title">Mitglieder Suche</h3>
 
-    <div class="input-group mb-3">
-        <input type="text" class="form-control" placeholder="Mitglieder suchen (min 3 Zeichen)..." @bind="_query" @onkeyup="@(e => { if (e.Key == "Enter") Search(); })" />
-        <button class="btn btn-primary" @onclick="Search">Suchen</button>
+    <div class="pa-search-group pa-mb-3">
+        <input type="text" placeholder="Mitglieder suchen (min 3 Zeichen)..." @bind="_query" @onkeyup="@(e => { if (e.Key == "Enter") Search(); })" />
+        <button @onclick="Search">Suchen</button>
     </div>
 
     @if (_searchResults != null)
@@ -22,35 +22,38 @@
         }
         else
         {
-            <ul class="list-group">
+            <div>
                 @foreach (var user in _searchResults)
                 {
-                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <div class="pa-user-item">
                         <span>
-                            <strong>@user.DisplayName</strong> <small class="text-muted">(@user.Username)</small>
+                            <span class="pa-user-name">@user.DisplayName</span>
+                            <span class="pa-user-username">(@user.Username)</span>
                         </span>
-                        <button class="btn btn-sm btn-outline-info" @onclick="@(() => InitContact(user))">Kontaktieren</button>
-                    </li>
+                        <button class="pa-btn pa-btn-outline-info pa-btn-sm" @onclick="@(() => InitContact(user))">Kontaktieren</button>
+                    </div>
                 }
-            </ul>
+            </div>
         }
     }
 
     @if (_selectedUser != null)
     {
-        <div class="card mt-4">
-            <div class="card-header">Nachricht an: @_selectedUser.DisplayName</div>
-            <div class="card-body">
-                <div class="mb-3">
-                    <label>Nachricht</label>
-                    <textarea class="form-control" rows="3" @bind="_messageBody"></textarea>
+        <div class="pa-card pa-mt-4">
+            <div class="pa-card-header">Nachricht an: @_selectedUser.DisplayName</div>
+            <div class="pa-card-body">
+                <div class="pa-mb-3">
+                    <label class="pa-form-label">Nachricht</label>
+                    <textarea class="pa-form-control" rows="3" style="width: 100%;" @bind="_messageBody"></textarea>
+                </div>
+                <div class="pa-d-flex pa-gap-2">
+                    <button class="pa-btn pa-btn-primary" @onclick="Send">Nachricht senden</button>
+                    <button class="pa-btn pa-btn-secondary" @onclick="@(() => _selectedUser = null)">Abbrechen</button>
                 </div>
-                <button class="btn btn-primary" @onclick="Send">Nachricht senden</button>
-                <button class="btn btn-secondary" @onclick="@(() => _selectedUser = null)">Abbrechen</button>
 
                 @if (!string.IsNullOrEmpty(_statusMsg))
                 {
-                    <div class="alert alert-info mt-2">@_statusMsg</div>
+                    <div class="pa-alert pa-alert-success pa-mt-3">@_statusMsg</div>
                 }
             </div>
         </div>
@@ -58,14 +61,19 @@
 }
 else
 {
-    <div class="alert alert-warning">
-        Sie müssen Premium Kunde sein um diese Funktion zu nutzen.
+    <div class="pa-alert pa-alert-warning">
+        ⚠ Sie müssen Premium Kunde sein um diese Funktion zu nutzen.
     </div>
 }
 
 @code {
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.View;
 
+    public override List<Resource> Resources => new List<Resource>()
+    {
+        new Stylesheet("_content/SZUAbsolventenverein.Module.PremiumArea/Module.css")
+    };
+
     private string _query;
     private List<User> _searchResults;
     private User _selectedUser;

Server/wwwroot/Module.css

@@ -1 +1,657 @@
-/* Module Custom Styles */
+/* ============================================
+   Premium Area Module – Custom Styles
+   Modern, vibrant design for Oqtane Module
+   ============================================ */
+
+/* ── CSS Custom Properties ── */
+:root {
+    --pa-primary: #6366f1;
+    --pa-primary-hover: #4f46e5;
+    --pa-primary-light: rgba(99, 102, 241, 0.10);
+    --pa-secondary: #8b5cf6;
+    --pa-secondary-hover: #7c3aed;
+    --pa-accent: #06b6d4;
+    --pa-accent-hover: #0891b2;
+    --pa-success: #10b981;
+    --pa-success-hover: #059669;
+    --pa-danger: #ef4444;
+    --pa-danger-hover: #dc2626;
+    --pa-warning: #f59e0b;
+    --pa-text: #1e293b;
+    --pa-text-muted: #64748b;
+    --pa-bg: #f8fafc;
+    --pa-card-bg: #ffffff;
+    --pa-border: #e2e8f0;
+    --pa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --pa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
+    --pa-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
+    --pa-radius: 12px;
+    --pa-radius-lg: 16px;
+    --pa-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Premium Area Container ── */
+.premium-area-wrapper {
+    padding: 24px 0;
+}
+
+.premium-area-header {
+    text-align: center;
+    margin-bottom: 36px;
+}
+
+.premium-area-header h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--pa-text);
+    margin-bottom: 8px;
+    letter-spacing: -0.5px;
+}
+
+.premium-area-header p {
+    font-size: 1.1rem;
+    color: var(--pa-text-muted);
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+/* ── Navigation Cards (Index Page) ── */
+.pa-nav-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.pa-nav-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: var(--pa-card-bg);
+    border: 1px solid var(--pa-border);
+    border-radius: var(--pa-radius-lg);
+    padding: 40px 28px 36px;
+    text-decoration: none !important;
+    color: var(--pa-text) !important;
+    box-shadow: var(--pa-shadow-sm);
+    transition: var(--pa-transition);
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.pa-nav-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    border-radius: var(--pa-radius-lg) var(--pa-radius-lg) 0 0;
+    transition: var(--pa-transition);
+}
+
+.pa-nav-card:hover {
+    transform: translateY(-6px);
+    box-shadow: var(--pa-shadow-lg);
+    border-color: transparent;
+    text-decoration: none !important;
+}
+
+.pa-nav-card--apply::before {
+    background: linear-gradient(135deg, var(--pa-primary), var(--pa-secondary));
+}
+.pa-nav-card--apply:hover {
+    border-color: var(--pa-primary);
+}
+
+.pa-nav-card--search::before {
+    background: linear-gradient(135deg, var(--pa-accent), #2dd4bf);
+}
+.pa-nav-card--search:hover {
+    border-color: var(--pa-accent);
+}
+
+.pa-nav-card--list::before {
+    background: linear-gradient(135deg, var(--pa-success), #34d399);
+}
+.pa-nav-card--list:hover {
+    border-color: var(--pa-success);
+}
+
+.pa-nav-card:hover::before {
+    height: 6px;
+}
+
+.pa-nav-icon {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    font-size: 28px;
+    transition: var(--pa-transition);
+}
+
+.pa-nav-card--apply .pa-nav-icon {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
+    color: var(--pa-primary);
+}
+.pa-nav-card--apply:hover .pa-nav-icon {
+    background: linear-gradient(135deg, var(--pa-primary), var(--pa-secondary));
+    color: #fff;
+    transform: scale(1.1);
+}
+
+.pa-nav-card--search .pa-nav-icon {
+    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(45, 212, 191, 0.12));
+    color: var(--pa-accent);
+}
+.pa-nav-card--search:hover .pa-nav-icon {
+    background: linear-gradient(135deg, var(--pa-accent), #2dd4bf);
+    color: #fff;
+    transform: scale(1.1);
+}
+
+.pa-nav-card--list .pa-nav-icon {
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 211, 153, 0.12));
+    color: var(--pa-success);
+}
+.pa-nav-card--list:hover .pa-nav-icon {
+    background: linear-gradient(135deg, var(--pa-success), #34d399);
+    color: #fff;
+    transform: scale(1.1);
+}
+
+.pa-nav-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--pa-text);
+}
+
+.pa-nav-desc {
+    font-size: 0.95rem;
+    color: var(--pa-text-muted);
+    line-height: 1.5;
+    margin-bottom: 20px;
+}
+
+.pa-nav-arrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--pa-text-muted);
+    transition: var(--pa-transition);
+}
+
+.pa-nav-card--apply .pa-nav-arrow { color: var(--pa-primary); }
+.pa-nav-card--search .pa-nav-arrow { color: var(--pa-accent); }
+.pa-nav-card--list .pa-nav-arrow { color: var(--pa-success); }
+
+.pa-nav-card:hover .pa-nav-arrow {
+    transform: translateX(4px);
+}
+
+/* ── Premium Buttons (replaces default Bootstrap blue) ── */
+.pa-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    padding: 12px 24px;
+    border-radius: 10px;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: var(--pa-transition);
+    text-decoration: none !important;
+    line-height: 1.4;
+    letter-spacing: 0.2px;
+}
+
+.pa-btn:focus-visible {
+    outline: 2px solid var(--pa-primary);
+    outline-offset: 2px;
+}
+
+/* Primary Button – Gradient */
+.pa-btn-primary {
+    background: linear-gradient(135deg, var(--pa-primary), var(--pa-secondary));
+    color: #fff !important;
+    border-color: transparent;
+    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
+}
+.pa-btn-primary:hover {
+    background: linear-gradient(135deg, var(--pa-primary-hover), var(--pa-secondary-hover));
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
+    color: #fff !important;
+}
+.pa-btn-primary:active {
+    transform: translateY(0);
+}
+
+/* Secondary Button – Ghost */
+.pa-btn-secondary {
+    background: transparent;
+    color: var(--pa-text-muted) !important;
+    border-color: var(--pa-border);
+}
+.pa-btn-secondary:hover {
+    background: var(--pa-bg);
+    color: var(--pa-text) !important;
+    border-color: #cbd5e1;
+    transform: translateY(-1px);
+}
+
+/* Success Button */
+.pa-btn-success {
+    background: linear-gradient(135deg, var(--pa-success), #34d399);
+    color: #fff !important;
+    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
+}
+.pa-btn-success:hover {
+    background: linear-gradient(135deg, var(--pa-success-hover), #10b981);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
+    color: #fff !important;
+}
+
+/* Danger Button */
+.pa-btn-danger {
+    background: linear-gradient(135deg, var(--pa-danger), #f87171);
+    color: #fff !important;
+    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.30);
+}
+.pa-btn-danger:hover {
+    background: linear-gradient(135deg, var(--pa-danger-hover), var(--pa-danger));
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.40);
+    color: #fff !important;
+}
+
+/* Outline Variants */
+.pa-btn-outline-danger {
+    background: transparent;
+    color: var(--pa-danger) !important;
+    border-color: var(--pa-danger);
+}
+.pa-btn-outline-danger:hover {
+    background: rgba(239, 68, 68, 0.08);
+    transform: translateY(-1px);
+}
+
+.pa-btn-outline-info {
+    background: transparent;
+    color: var(--pa-accent) !important;
+    border-color: var(--pa-accent);
+}
+.pa-btn-outline-info:hover {
+    background: rgba(6, 182, 212, 0.08);
+    transform: translateY(-1px);
+}
+
+.pa-btn-outline-secondary {
+    background: transparent;
+    color: var(--pa-text-muted) !important;
+    border-color: var(--pa-border);
+}
+.pa-btn-outline-secondary:hover {
+    background: var(--pa-bg);
+    color: var(--pa-text) !important;
+    border-color: #cbd5e1;
+    transform: translateY(-1px);
+}
+
+/* Button Sizes */
+.pa-btn-sm {
+    font-size: 0.85rem;
+    padding: 8px 16px;
+    border-radius: 8px;
+}
+
+.pa-btn-lg {
+    font-size: 1.1rem;
+    padding: 16px 32px;
+    border-radius: 12px;
+}
+
+/* ── Premium Cards ── */
+.pa-card {
+    background: var(--pa-card-bg);
+    border: 1px solid var(--pa-border);
+    border-radius: var(--pa-radius-lg);
+    box-shadow: var(--pa-shadow-sm);
+    overflow: hidden;
+    transition: var(--pa-transition);
+}
+
+.pa-card:hover {
+    box-shadow: var(--pa-shadow-md);
+}
+
+.pa-card-header {
+    padding: 16px 24px;
+    background: linear-gradient(135deg, var(--pa-primary-light), rgba(139, 92, 246, 0.06));
+    border-bottom: 1px solid var(--pa-border);
+    font-weight: 700;
+    font-size: 1.05rem;
+    color: var(--pa-text);
+}
+
+.pa-card-body {
+    padding: 24px;
+}
+
+/* ── Application Cards (ApplicationList) ── */
+.pa-app-card {
+    background: var(--pa-card-bg);
+    border: 1px solid var(--pa-border);
+    border-radius: var(--pa-radius-lg);
+    box-shadow: var(--pa-shadow-sm);
+    transition: var(--pa-transition);
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.pa-app-card:hover {
+    box-shadow: var(--pa-shadow-md);
+    transform: translateY(-3px);
+}
+
+.pa-app-card-body {
+    padding: 24px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.pa-app-card-title {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--pa-text);
+    margin-bottom: 4px;
+}
+
+.pa-app-card-author {
+    font-size: 0.9rem;
+    color: var(--pa-text-muted);
+    margin-bottom: 12px;
+}
+
+.pa-app-card-desc {
+    font-size: 0.95rem;
+    color: var(--pa-text);
+    line-height: 1.6;
+    margin-bottom: 12px;
+    flex: 1;
+}
+
+.pa-app-card-meta {
+    font-size: 0.82rem;
+    color: var(--pa-text-muted);
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.pa-app-card-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+/* ── Status Badges ── */
+.pa-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+}
+
+.pa-badge-success {
+    background: rgba(16, 185, 129, 0.12);
+    color: var(--pa-success);
+}
+
+.pa-badge-warning {
+    background: rgba(245, 158, 11, 0.12);
+    color: var(--pa-warning);
+}
+
+.pa-badge-danger {
+    background: rgba(239, 68, 68, 0.12);
+    color: var(--pa-danger);
+}
+
+/* ── Form Inputs (Premium Styling) ── */
+.pa-form-control {
+    border: 2px solid var(--pa-border);
+    border-radius: 10px;
+    padding: 12px 16px;
+    font-size: 0.95rem;
+    transition: var(--pa-transition);
+    color: var(--pa-text);
+    background: var(--pa-card-bg);
+}
+
+.pa-form-control:focus {
+    border-color: var(--pa-primary);
+    box-shadow: 0 0 0 3px var(--pa-primary-light);
+    outline: none;
+}
+
+.pa-form-label {
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: var(--pa-text);
+    margin-bottom: 6px;
+}
+
+/* ── Search Input Group ── */
+.pa-search-group {
+    display: flex;
+    gap: 0;
+    border-radius: var(--pa-radius);
+    overflow: hidden;
+    box-shadow: var(--pa-shadow-sm);
+    border: 2px solid var(--pa-border);
+    transition: var(--pa-transition);
+}
+
+.pa-search-group:focus-within {
+    border-color: var(--pa-primary);
+    box-shadow: 0 0 0 3px var(--pa-primary-light);
+}
+
+.pa-search-group input {
+    flex: 1;
+    border: none;
+    padding: 14px 18px;
+    font-size: 1rem;
+    outline: none;
+    background: var(--pa-card-bg);
+    color: var(--pa-text);
+}
+
+.pa-search-group button {
+    border: none;
+    padding: 14px 28px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    background: linear-gradient(135deg, var(--pa-primary), var(--pa-secondary));
+    color: #fff;
+    cursor: pointer;
+    transition: var(--pa-transition);
+}
+
+.pa-search-group button:hover {
+    background: linear-gradient(135deg, var(--pa-primary-hover), var(--pa-secondary-hover));
+}
+
+/* ── User List Items ── */
+.pa-user-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    background: var(--pa-card-bg);
+    border: 1px solid var(--pa-border);
+    border-radius: var(--pa-radius);
+    margin-bottom: 8px;
+    transition: var(--pa-transition);
+}
+
+.pa-user-item:hover {
+    box-shadow: var(--pa-shadow-sm);
+    border-color: #cbd5e1;
+}
+
+.pa-user-name {
+    font-weight: 600;
+    color: var(--pa-text);
+    font-size: 1rem;
+}
+
+.pa-user-username {
+    font-size: 0.85rem;
+    color: var(--pa-text-muted);
+    margin-left: 8px;
+}
+
+/* ── Section Headers ── */
+.pa-section-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--pa-text);
+    margin-bottom: 24px;
+    position: relative;
+    padding-bottom: 12px;
+}
+
+.pa-section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 48px;
+    height: 4px;
+    background: linear-gradient(135deg, var(--pa-primary), var(--pa-secondary));
+    border-radius: 2px;
+}
+
+/* ── Alerts (Premium) ── */
+.pa-alert {
+    padding: 16px 20px;
+    border-radius: var(--pa-radius);
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.pa-alert-info {
+    background: rgba(99, 102, 241, 0.08);
+    color: var(--pa-primary);
+    border: 1px solid rgba(99, 102, 241, 0.20);
+}
+
+.pa-alert-warning {
+    background: rgba(245, 158, 11, 0.08);
+    color: #b45309;
+    border: 1px solid rgba(245, 158, 11, 0.20);
+}
+
+.pa-alert-success {
+    background: rgba(16, 185, 129, 0.08);
+    color: var(--pa-success);
+    border: 1px solid rgba(16, 185, 129, 0.20);
+}
+
+/* ── Modals (Premium overlay) ── */
+.pa-modal-content {
+    border-radius: var(--pa-radius-lg) !important;
+    border: none !important;
+    box-shadow: var(--pa-shadow-lg) !important;
+    overflow: hidden;
+}
+
+.pa-modal-header {
+    padding: 20px 24px !important;
+    background: linear-gradient(135deg, var(--pa-primary-light), rgba(139, 92, 246, 0.06));
+    border-bottom: 1px solid var(--pa-border) !important;
+}
+
+.pa-modal-header h5 {
+    font-weight: 700;
+    color: var(--pa-text);
+}
+
+.pa-modal-body {
+    padding: 24px !important;
+}
+
+.pa-modal-footer {
+    padding: 16px 24px !important;
+    border-top: 1px solid var(--pa-border) !important;
+    gap: 8px;
+    display: flex;
+}
+
+/* ── Utility ── */
+.pa-gap-2 { gap: 8px; }
+.pa-gap-3 { gap: 12px; }
+.pa-mt-2 { margin-top: 8px; }
+.pa-mt-3 { margin-top: 16px; }
+.pa-mt-4 { margin-top: 24px; }
+.pa-mb-3 { margin-bottom: 16px; }
+.pa-d-flex { display: flex; }
+.pa-flex-wrap { flex-wrap: wrap; }
+
+/* ── Animations ── */
+@keyframes pa-fadeIn {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.pa-nav-card {
+    animation: pa-fadeIn 0.5s ease-out both;
+}
+.pa-nav-card:nth-child(1) { animation-delay: 0.05s; }
+.pa-nav-card:nth-child(2) { animation-delay: 0.15s; }
+.pa-nav-card:nth-child(3) { animation-delay: 0.25s; }
+
+.pa-app-card {
+    animation: pa-fadeIn 0.4s ease-out both;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+    .pa-nav-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .pa-nav-card {
+        padding: 28px 20px;
+    }
+
+    .pa-nav-icon {
+        width: 56px;
+        height: 56px;
+        font-size: 22px;
+    }
+}