feat: improved admin UI styles and layout

- Max-width 860px on editor card
- Two-column row for ServiceName/Key/Language fields
- Gradient card header, proper shadow, grey footer
- Footer buttons right-aligned
- Smaller uppercase table headers, better typography
- Overhauled admin.css with CSS variables and cleaner rules

Ref: IT-628

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

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

@@ -21,42 +21,42 @@
         </div>
     }
 
-    <div class="mb-4">
+    <div class="row g-3 mb-3">
+        <div class="col-md-5">
             <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="col-md-5">
-    <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="col-md-2">
-    <div class="mb-4">
+            <label asp-for="LanguageCode" class="form-label fw-semibold">Language</label>
-        <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>
 
-    <div class="mb-4">
+    <div class="mb-3">
         <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-4">
+    <div class="mb-3">
         <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-4">
+    <div class="mb-3">
         <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-4">
+    <div class="mb-3">
         <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>

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

@@ -1,17 +1,16 @@
 @{
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
-<div class="card shadow-sm">
+<div class="editor-wrapper">
-    <div class="card-header bg-primary text-white">
+    <div class="card editor-card">
-        <h5 class="mb-0 editor-card-header">
+        <div class="card-header editor-card-header-bar">
-            <i class="bi bi-pencil-square"></i>
+            <i class="bi bi-pencil-square me-2"></i>@ViewData["EditorTitle"]
-            @ViewData["EditorTitle"]
-        </h5>
         </div>
-    <div class="card-body">
+        <div class="card-body editor-card-body">
             @RenderBody()
         </div>
-    <div class="card-footer d-flex gap-2">
+        <div class="card-footer editor-card-footer">
             @RenderSection("FormActions", required: false)
         </div>
+    </div>
 </div>

HrynCo.NotificationService.Web/wwwroot/css/admin.css

@@ -4,34 +4,37 @@
 
 :root {
     --sidebar-bg: #1a1d23;
-    --sidebar-width: 220px;
     --sidebar-active: #0d6efd;
-    --sidebar-muted: #6c757d;
+    --sidebar-muted: #8a929e;
-    --navbar-border: rgba(255, 255, 255, 0.08);
+    --content-bg: #f0f2f5;
+    --card-shadow: 0 2px 8px rgba(0,0,0,.10), 0 0 1px rgba(0,0,0,.08);
 }
 
 /* ── Body ─────────────────────────────────────────────── */
 body {
-    background-color: #f0f2f5;
+    background-color: var(--content-bg);
+    font-size: .9rem;
 }
 
 /* ── Navbar ───────────────────────────────────────────── */
 .admin-navbar {
-    border-bottom: 1px solid var(--navbar-border);
+    border-bottom: 1px solid rgba(255,255,255,.07);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
+    box-shadow: 0 2px 6px rgba(0,0,0,.4);
+    height: 52px;
 }
 
 .admin-navbar .navbar-brand {
-    font-size: 1rem;
+    font-size: .95rem;
+    font-weight: 700;
     letter-spacing: .02em;
 }
 
 /* ── Sidebar ──────────────────────────────────────────── */
 .sidebar {
-    min-height: calc(100vh - 56px);
+    min-height: calc(100vh - 52px);
     background-color: var(--sidebar-bg);
-    padding-top: 1.25rem;
+    border-right: 1px solid rgba(255,255,255,.05);
-    border-right: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 1.25rem 0 1rem;
 }
 
 .sidebar-section-label {
@@ -40,45 +43,39 @@ body {
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--sidebar-muted);
-    padding: .5rem 1rem .25rem;
+    padding: .25rem 1.25rem .5rem;
-    margin-bottom: .1rem;
 }
 
 .sidebar .nav-link {
     color: #adb5bd;
-    border-radius: .375rem;
+    border-radius: 0 .375rem .375rem 0;
-    margin-bottom: .2rem;
+    margin: .1rem .75rem .1rem 0;
-    padding: .5rem .75rem;
+    padding: .5rem 1rem;
-    font-size: .875rem;
+    font-size: .85rem;
     display: flex;
     align-items: center;
-    gap: .5rem;
+    gap: .6rem;
     border-left: 3px solid transparent;
-    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
+    transition: background .15s, color .15s, border-color .15s;
 }
 
 .sidebar .nav-link:hover {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.07);
+    background-color: rgba(255,255,255,.06);
-    border-left-color: rgba(255, 255, 255, 0.2);
+    border-left-color: rgba(255,255,255,.2);
 }
 
 .sidebar .nav-link.active {
     color: #fff;
-    background-color: rgba(13, 110, 253, 0.18);
+    background-color: rgba(13,110,253,.2);
     border-left-color: var(--sidebar-active);
     font-weight: 600;
 }
 
-.sidebar .nav-link .bi {
+.sidebar .nav-link .bi { font-size: .95rem; flex-shrink: 0; }
-    font-size: 1rem;
-    flex-shrink: 0;
-}
 
 /* ── Main content ─────────────────────────────────────── */
-.main-content {
+.main-content { padding: 1.75rem 2rem; }
-    padding: 1.5rem 2rem;
-}
 
 /* ── Page header ──────────────────────────────────────── */
 .page-header {
@@ -87,76 +84,79 @@ body {
     align-items: center;
     padding-bottom: .875rem;
     margin-bottom: 1.5rem;
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
 }
 
 .page-header h2 {
     margin: 0;
-    font-size: 1.4rem;
+    font-size: 1.25rem;
     font-weight: 700;
     color: #212529;
     display: flex;
     align-items: center;
-    gap: .5rem;
+    gap: .45rem;
 }
 
-/* ── Table ────────────────────────────────────────────── */
+/* ── Table card ───────────────────────────────────────── */
 .table-card {
+    border: none;
     border-radius: .5rem;
+    box-shadow: var(--card-shadow);
     overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
 }
 
-.table tbody tr td {
+.table { font-size: .875rem; }
-    vertical-align: middle;
+.table tbody tr td { vertical-align: middle; }
-}
+.table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
 
 /* ── Empty state ──────────────────────────────────────── */
 .empty-state {
     text-align: center;
-    padding: 3rem 2rem;
+    padding: 3.5rem 2rem;
     color: var(--sidebar-muted);
 }
+.empty-state .bi { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; }
+.empty-state p { font-size: .9rem; margin-bottom: 0; }
 
-.empty-state .bi {
+/* ── Editor wrapper — constrains width ───────────────── */
-    font-size: 3rem;
+.editor-wrapper {
-    opacity: .4;
+    max-width: 860px;
-    display: block;
-    margin-bottom: 1rem;
-}
-
-.empty-state p {
-    font-size: .95rem;
-    margin-bottom: 0;
 }
 
 /* ── Editor card ──────────────────────────────────────── */
-.editor-card-header {
+.editor-card {
+    border: none;
+    border-radius: .5rem;
+    box-shadow: var(--card-shadow);
+}
+
+.editor-card-header-bar {
+    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
+    color: #fff;
+    font-size: .9rem;
+    font-weight: 600;
+    padding: .75rem 1.25rem;
+    border-bottom: none;
     display: flex;
     align-items: center;
-    gap: .5rem;
+    border-radius: .5rem .5rem 0 0 !important;
 }
 
-.editor-card-header .bi {
+.editor-card-body { padding: 1.5rem 1.5rem 1rem; }
-    font-size: 1.1rem;
-    opacity: .85;
-}
 
-/* ── Form fields ──────────────────────────────────────── */
+.editor-card-footer {
-.form-control[readonly] {
     background-color: #f8f9fa;
-    border-color: #dee2e6;
+    border-top: 1px solid #e9ecef;
-    color: #6c757d;
+    padding: .875rem 1.5rem;
-    cursor: not-allowed;
+    display: flex;
+    justify-content: flex-end;
+    gap: .5rem;
+    border-radius: 0 0 .5rem .5rem !important;
 }
 
-textarea.form-control {
+/* ── Form-section divider ─────────────────────────────── */
-    resize: vertical;
-}
-
-/* ── Section divider inside editor card ──────────────── */
 .form-section-title {
-    font-size: .7rem;
+    font-size: .68rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
@@ -165,3 +165,15 @@ textarea.form-control {
     margin-bottom: 1rem;
     border-bottom: 1px solid #dee2e6;
 }
+
+/* ── Form fields ──────────────────────────────────────── */
+.form-label { font-size: .82rem; margin-bottom: .3rem; }
+
+.form-control[readonly] {
+    background-color: #f4f5f7;
+    border-color: #e2e5e9;
+    color: #6c757d;
+    cursor: not-allowed;
+}
+
+textarea.form-control { resize: vertical; }