feat: polished admin UI styles + email channels admin CRUD

- Extract inline styles to wwwroot/css/admin.css
- Bootstrap Icons for nav and buttons
- Styled page headers, table, empty state, readonly fields
- Email Channels admin: list, create, edit, delete
- GetAllEmailChannelsQuery + handler
- AdminChannelsController with full CRUD
- form id + form= attribute pattern for EditorLayout footer buttons

Ref: IT-628

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

HrynCo.NotificationService.Web/Views/AdminChannels/Edit.cshtml

@@ -0,0 +1,141 @@
+@using HrynCo.NotificationService.DAL.Abstract.Providers
+@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
+@model EmailChannelEditViewModel
+@{
+    Layout = "~/Views/Shared/_EditorLayout.cshtml";
+    ViewData["Title"] = Model.PageTitle;
+    ViewData["EditorTitle"] = Model.PageTitle;
+}
+
+<form id="channelForm" asp-action="Save" asp-controller="AdminChannels" method="post">
+    @Html.AntiForgeryToken()
+    <input asp-for="Id" type="hidden" />
+
+    @if (!ViewData.ModelState.IsValid)
+    {
+        <div class="alert alert-danger mb-3">
+            @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
+            {
+                <div>@error.ErrorMessage</div>
+            }
+        </div>
+    }
+
+    @* Channel Settings section *@
+    <div class="form-section-title"><i class="bi bi-sliders me-1"></i> Channel Settings</div>
+
+    <div class="mb-4">
+        <label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
+        <input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
+        <span asp-validation-for="ServiceName" class="text-danger small"></span>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-4">
+            <label asp-for="Priority" class="form-label fw-semibold">Priority</label>
+            <input asp-for="Priority" class="form-control" type="number" min="1" />
+            <span asp-validation-for="Priority" class="text-danger small"></span>
+        </div>
+        <div class="col-md-4">
+            <label asp-for="EmailChannelType" class="form-label fw-semibold">Channel Type</label>
+            <select asp-for="EmailChannelType" class="form-select"
+                    asp-items="Html.GetEnumSelectList<EmailChannelType>()">
+            </select>
+        </div>
+        <div class="col-md-4 d-flex align-items-end">
+            <div class="form-check mb-2">
+                <input asp-for="IsActive" class="form-check-input" type="checkbox" />
+                <label asp-for="IsActive" class="form-check-label fw-semibold">Active</label>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-4">
+            <label asp-for="DailyLimit" class="form-label fw-semibold">Daily Limit</label>
+            <input asp-for="DailyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
+            <span asp-validation-for="DailyLimit" class="text-danger small"></span>
+        </div>
+        <div class="col-md-4">
+            <label asp-for="MonthlyLimit" class="form-label fw-semibold">Monthly Limit</label>
+            <input asp-for="MonthlyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
+            <span asp-validation-for="MonthlyLimit" class="text-danger small"></span>
+        </div>
+        <div class="col-md-4">
+            <label asp-for="WarnThresholdPercent" class="form-label fw-semibold">Warn Threshold (%)</label>
+            <input asp-for="WarnThresholdPercent" class="form-control" type="number" min="1" max="100" />
+            <span asp-validation-for="WarnThresholdPercent" class="text-danger small"></span>
+        </div>
+    </div>
+
+    @* SMTP Settings section *@
+    <div class="form-section-title mt-4"><i class="bi bi-envelope-at me-1"></i> SMTP Settings</div>
+
+    <div class="row mb-4">
+        <div class="col-md-9">
+            <label asp-for="Host" class="form-label fw-semibold">Host</label>
+            <input asp-for="Host" class="form-control" placeholder="smtp.example.com" />
+            <span asp-validation-for="Host" class="text-danger small"></span>
+        </div>
+        <div class="col-md-3">
+            <label asp-for="Port" class="form-label fw-semibold">Port</label>
+            <input asp-for="Port" class="form-control" type="number" min="1" max="65535" />
+            <span asp-validation-for="Port" class="text-danger small"></span>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <label asp-for="Username" class="form-label fw-semibold">Username</label>
+            <input asp-for="Username" class="form-control" autocomplete="off" />
+            <span asp-validation-for="Username" class="text-danger small"></span>
+        </div>
+        <div class="col-md-6">
+            <label asp-for="Password" class="form-label fw-semibold">Password</label>
+            <input asp-for="Password" class="form-control" type="password" autocomplete="new-password" />
+            <span asp-validation-for="Password" class="text-danger small"></span>
+        </div>
+    </div>
+
+    <div class="mb-4">
+        <div class="form-check">
+            <input asp-for="UseSsl" class="form-check-input" type="checkbox" />
+            <label asp-for="UseSsl" class="form-check-label fw-semibold">Use SSL/TLS</label>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <label asp-for="FromEmail" class="form-label fw-semibold">From Email</label>
+            <input asp-for="FromEmail" class="form-control" type="email" placeholder="noreply@example.com" />
+            <span asp-validation-for="FromEmail" class="text-danger small"></span>
+        </div>
+        <div class="col-md-6">
+            <label asp-for="FromName" class="form-label fw-semibold">From Name</label>
+            <input asp-for="FromName" class="form-control" placeholder="My Service" />
+            <span asp-validation-for="FromName" class="text-danger small"></span>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <label asp-for="AppDisplayName" class="form-label fw-semibold">App Display Name</label>
+            <input asp-for="AppDisplayName" class="form-control" />
+            <span asp-validation-for="AppDisplayName" class="text-danger small"></span>
+        </div>
+        <div class="col-md-6">
+            <label asp-for="AppBaseUrl" class="form-label fw-semibold">App Base URL</label>
+            <input asp-for="AppBaseUrl" class="form-control" placeholder="https://example.com" />
+            <span asp-validation-for="AppBaseUrl" class="text-danger small"></span>
+        </div>
+    </div>
+
+    @section FormActions {
+        <button type="submit" form="channelForm" class="btn btn-primary">
+            <i class="bi bi-floppy me-1"></i> Save
+        </button>
+        <a href="/admin/channels" class="btn btn-secondary">
+            <i class="bi bi-x-lg me-1"></i> Cancel
+        </a>
+    }
+</form>

HrynCo.NotificationService.Web/Views/AdminChannels/Index.cshtml

@@ -0,0 +1,93 @@
+@using HrynCo.NotificationService.DAL.Abstract.Providers
+@model IReadOnlyList<EmailChannel>
+@{
+    ViewData["Title"] = "Email Channels";
+}
+
+<div class="page-header">
+    <h2><i class="bi bi-broadcast"></i> Email Channels</h2>
+    <a href="/admin/channels/create" class="btn btn-primary btn-sm">
+        <i class="bi bi-plus-lg me-1"></i> Create New Channel
+    </a>
+</div>
+
+@if (!ViewData.ModelState.IsValid)
+{
+    <div class="alert alert-danger">
+        @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
+        {
+            <div>@error.ErrorMessage</div>
+        }
+    </div>
+}
+
+@if (Model is null || Model.Count == 0)
+{
+    <div class="card shadow-sm table-card">
+        <div class="empty-state">
+            <i class="bi bi-broadcast"></i>
+            <p class="mt-2 mb-0">No email channels found.</p>
+            <a href="/admin/channels/create" class="btn btn-primary btn-sm mt-3">
+                <i class="bi bi-plus-lg me-1"></i> Create First Channel
+            </a>
+        </div>
+    </div>
+}
+else
+{
+    <div class="card shadow-sm table-card">
+        <div class="table-responsive">
+            <table class="table table-hover table-sm mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>Service Name</th>
+                        <th>Type</th>
+                        <th>Priority</th>
+                        <th>Status</th>
+                        <th>Daily Limit</th>
+                        <th>Monthly Limit</th>
+                        <th class="text-end">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var c in Model)
+                    {
+                        <tr>
+                            <td>@c.ServiceName</td>
+                            <td>@c.EmailChannelType</td>
+                            <td>@c.Priority</td>
+                            <td>
+                                @if (c.IsActive)
+                                {
+                                    <span class="badge bg-success">Active</span>
+                                }
+                                else
+                                {
+                                    <span class="badge bg-secondary text-muted">Inactive</span>
+                                }
+                            </td>
+                            <td>@(c.DailyLimit.HasValue ? c.DailyLimit.ToString() : "—")</td>
+                            <td>@(c.MonthlyLimit.HasValue ? c.MonthlyLimit.ToString() : "—")</td>
+                            <td class="text-end">
+                                <a href="/admin/channels/@c.Id"
+                                   class="btn btn-sm btn-outline-primary me-1">
+                                    <i class="bi bi-pencil"></i> Edit
+                                </a>
+                                <form method="post"
+                                      action="/admin/channels/@c.Id/delete"
+                                      class="d-inline">
+                                    @Html.AntiForgeryToken()
+                                    <button type="submit"
+                                            class="btn btn-sm btn-outline-danger"
+                                            onclick="return confirm('Delete this channel?')">
+                                        <i class="bi bi-trash"></i> Delete
+                                    </button>
+                                </form>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    </div>
+}

HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml

@@ -21,42 +21,42 @@
         </div>
     }
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
         <input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
         <span asp-validation-for="ServiceName" class="text-danger small"></span>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="Key" class="form-label fw-semibold">Key</label>
         <input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
         <span asp-validation-for="Key" class="text-danger small"></span>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="LanguageCode" class="form-label fw-semibold">Language Code</label>
         <input asp-for="LanguageCode" class="form-control" readonly="@(!Model.IsNew)" />
         <span asp-validation-for="LanguageCode" class="text-danger small"></span>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="Subject" class="form-label fw-semibold">Subject</label>
         <input asp-for="Subject" class="form-control" />
         <span asp-validation-for="Subject" class="text-danger small"></span>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="HtmlBody" class="form-label fw-semibold">HTML Body</label>
         <textarea asp-for="HtmlBody" class="form-control font-monospace" rows="10"></textarea>
         <span asp-validation-for="HtmlBody" class="text-danger small"></span>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="TextBody" class="form-label fw-semibold">Text Body</label>
         <textarea asp-for="TextBody" class="form-control font-monospace" rows="5"></textarea>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-4">
         <label asp-for="VariablesJson" class="form-label fw-semibold">Variables (JSON)</label>
         <textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"
                   placeholder='[{"name":"UserName","required":true}]'></textarea>
@@ -65,7 +65,11 @@
     </div>
 
     @section FormActions {
-        <button type="submit" form="templateForm" class="btn btn-primary">💾 Save</button>
-        <a href="/admin/templates" class="btn btn-secondary">✖ Cancel</a>
+        <button type="submit" form="templateForm" class="btn btn-primary">
+            <i class="bi bi-floppy me-1"></i> Save
+        </button>
+        <a href="/admin/templates" class="btn btn-secondary">
+            <i class="bi bi-x-lg me-1"></i> Cancel
+        </a>
     }
 </form>

HrynCo.NotificationService.Web/Views/AdminTemplates/Index.cshtml

@@ -4,9 +4,11 @@
     ViewData["Title"] = "Email Templates";
 }
 
-<div class="d-flex justify-content-between align-items-center mb-4">
-    <h2 class="mb-0">📋 Email Templates</h2>
-    <a href="/admin/templates/create" class="btn btn-primary">+ Create New Template</a>
+<div class="page-header">
+    <h2><i class="bi bi-envelope-paper"></i> Email Templates</h2>
+    <a href="/admin/templates/create" class="btn btn-primary btn-sm">
+        <i class="bi bi-plus-lg me-1"></i> Create New Template
+    </a>
 </div>
 
 @if (!ViewData.ModelState.IsValid)
@@ -21,13 +23,21 @@
 
 @if (Model is null || Model.Count == 0)
 {
-    <div class="alert alert-info">No email templates found.</div>
+    <div class="card shadow-sm table-card">
+        <div class="empty-state">
+            <i class="bi bi-envelope-paper"></i>
+            <p class="mt-2 mb-0">No email templates found.</p>
+            <a href="/admin/templates/create" class="btn btn-primary btn-sm mt-3">
+                <i class="bi bi-plus-lg me-1"></i> Create First Template
+            </a>
+        </div>
+    </div>
 }
 else
 {
-    <div class="card shadow-sm">
+    <div class="card shadow-sm table-card">
         <div class="table-responsive">
-            <table class="table table-hover mb-0">
+            <table class="table table-hover table-sm mb-0">
                 <thead class="table-dark">
                     <tr>
                         <th>Service Name</th>
@@ -47,7 +57,9 @@ else
                             <td>@t.Subject</td>
                             <td class="text-end">
                                 <a href="/admin/templates/@t.ServiceName/@t.Key/@t.LanguageCode"
-                                   class="btn btn-sm btn-outline-primary me-1">✏️ Edit</a>
+                                   class="btn btn-sm btn-outline-primary me-1">
+                                    <i class="bi bi-pencil"></i> Edit
+                                </a>
                                 <form method="post"
                                       action="/admin/templates/@t.ServiceName/@t.Key/@t.LanguageCode/delete"
                                       class="d-inline">
@@ -55,7 +67,7 @@ else
                                     <button type="submit"
                                             class="btn btn-sm btn-outline-danger"
                                             onclick="return confirm('Delete this template?')">
-                                        🗑️ Delete
+                                        <i class="bi bi-trash"></i> Delete
                                     </button>
                                 </form>
                             </td>

HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml

@@ -3,7 +3,10 @@
 }
 <div class="card shadow-sm">
     <div class="card-header bg-primary text-white">
-        <h5 class="mb-0">@ViewData["EditorTitle"]</h5>
+        <h5 class="mb-0 editor-card-header">
+            <i class="bi bi-pencil-square"></i>
+            @ViewData["EditorTitle"]
+        </h5>
     </div>
     <div class="card-body">
         @RenderBody()

HrynCo.NotificationService.Web/Views/Shared/_Layout.cshtml

@@ -13,32 +13,30 @@
           rel="stylesheet"
           integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
           crossorigin="anonymous" />
-    <style>
-        body { background-color: #f8f9fa; }
-        .sidebar { min-height: calc(100vh - 56px); background-color: #212529; padding-top: 1rem; }
-        .sidebar .nav-link { color: #adb5bd; border-radius: .375rem; margin-bottom: .25rem; }
-        .sidebar .nav-link:hover { color: #fff; background-color: #343a40; }
-        .sidebar .nav-link.active { color: #fff; background-color: #0d6efd; }
-        .main-content { padding: 2rem; }
-    </style>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+          rel="stylesheet" />
+    <link href="/css/admin.css" rel="stylesheet" />
 </head>
 <body>
-    <nav class="navbar navbar-dark bg-dark px-3">
-        <a class="navbar-brand fw-bold" href="/">📧 Notification Service</a>
+    <nav class="navbar navbar-dark bg-dark px-3 admin-navbar">
+        <a class="navbar-brand fw-bold" href="/">
+            <i class="bi bi-bell-fill me-1"></i> Notification Service
+        </a>
     </nav>
 
     <div class="container-fluid">
         <div class="row">
             <nav class="col-md-2 d-none d-md-block sidebar py-3">
+                <div class="sidebar-section-label">Management</div>
                 <ul class="nav flex-column px-2">
                     <li class="nav-item">
                         <a class="nav-link @(isTemplates ? "active" : "")" href="/admin/templates">
-                            📋 Email Templates
+                            <i class="bi bi-envelope-paper"></i> Email Templates
                         </a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link @(isChannels ? "active" : "")" href="/admin/channels">
-                            📡 Email Channels
+                            <i class="bi bi-broadcast"></i> Email Channels
                         </a>
                     </li>
                 </ul>