Reworked admin style

templates/admin/schedule_new.html

@@ -5,10 +5,15 @@
 
 {% block content %}
 <div class="page-head">
-    <h1>{{ t.schedule_new_title }}</h1>
+    <h1>{{ t.schedule_title }}</h1>
 </div>
 
-<div class="form-card">
+<section class="admin-section">
+<header class="admin-section-head">
+    <span class="admin-section-icon" aria-hidden="true">📅</span>
+    <div><h2>{{ t.schedule_new_title }}</h2></div>
+</header>
+<div class="admin-section-body">
 <form method="post" action="/admin/schedule/create" id="visitForm">
 
     <!-- Client -->
@@ -94,85 +99,7 @@
 
 </form>
 </div>
-
-<style>
-/* Time row */
-.time-row { display:flex; align-items:center; gap:0.5rem; }
-.time-block { display:flex; flex-direction:column; flex:1; }
-.time-lbl { font-size:0.75rem; color:#888; margin-bottom:0.2rem; }
-.time-sep { font-size:1.2rem; color:#aaa; padding-top:1.2rem; }
-
-/* Calendar toolbar */
-.cal-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
-
-
-/* Calendar container */
-.sched-cal { background:#fafafa; border:1px solid #eee; border-radius:10px; overflow:hidden; }
-
-.cal-nav { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0.75rem; background:#fff; border-bottom:1px solid #eee; }
-.cal-nav button { background:none; border:none; font-size:1.1rem; cursor:pointer; color:#6c63ff; padding:0.2rem 0.5rem; border-radius:4px; }
-.cal-nav button:hover { background:#f0eeff; }
-.cal-nav span { font-weight:700; font-size:1rem; color:#333; }
-
-.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
-
-.cal-wday { text-align:center; font-size:0.72rem; font-weight:700; color:#aaa; padding:0.4rem 0; background:#fafafa; }
-.cal-wday.is-weekend { color:#f0a0a0; }
-
-.cal-day { text-align:center; padding:0.55rem 0.2rem; font-size:0.9rem; cursor:pointer; color:#333; border-radius:0; transition:background 0.1s; position:relative; user-select:none; -webkit-user-select:none; }
-.cal-day:hover { background:#f0eeff; }
-.cal-day.is-empty { cursor:default; }
-.cal-day.is-empty:hover { background:none; }
-.cal-day.is-today { font-weight:700; color:#6c63ff; }
-.cal-day.is-selected { background:#6c63ff !important; color:#fff !important; border-radius:0; }
-.cal-day.is-range-start { background:#a89cff !important; color:#fff !important; }
-.cal-day.is-past { color:#ccc; }
-
-/* Selected days list */
-.day-row { display:flex; align-items:center; gap:0.4rem; padding:0.45rem 0; border-bottom:1px solid #f5f5f5; }
-.day-row:last-child { border-bottom:none; }
-.day-date { font-weight:600; font-size:0.85rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.day-times { display:flex; align-items:center; gap:0.25rem; flex-shrink:0; }
-.day-times .time-sep { color:#bbb; font-size:0.8rem; }
-.day-rm { background:none; border:none; color:#ccc; cursor:pointer; font-size:1rem; padding:0.15rem 0.25rem; flex-shrink:0; line-height:1; }
-.day-rm:hover { color:#e55; }
-
-/* Time badge */
-.time-badge-wrap {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: #ede9ff;
-    color: #5b52d6;
-    border: 1.5px solid #c4beff;
-    border-radius: 20px;
-    padding: 0.15rem 0.5rem;
-    font-size: 0.78rem;
-    font-weight: 700;
-    cursor: pointer;
-    min-width: 3.6rem;
-    white-space: nowrap;
-}
-.time-badge-wrap:focus-within {
-    border-color: #6c63ff;
-    background: #f0eeff;
-}
-.time-badge-label { pointer-events: none; z-index: 1; }
-.time-badge-input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    font-size: 16px; /* prevent iOS zoom */
-}
-</style>
+</section>
 
 <script>
 (function() {