[FEATURE] Custom Theme (Part II)

src/main/resources/META-INF/resources/styles.css

@@ -15,10 +15,69 @@
   --aura-background-color-light: var(--dialect-bg);
   --aura-orange: var(--dialect-primary);
   --aura-yellow: var(--dialect-secondary);
+
+  /* Flush, square app-layout content (no floating rounded card) */
+  --aura-app-layout-inset: 0px;
+  --aura-app-layout-radius: 0px;
+
+  /* Minimal (near-square) control + overlay corners, overriding Aura's rounded defaults */
+  --vaadin-radius-s: 1px;
+  --vaadin-radius-m: 2px;
+  --vaadin-radius-l: 2px;
+
+  /* Sidebar defaults to width: auto (shrink-to-content) — force a real column width */
+  --vaadin-app-layout-drawer-width: 260px;
+}
+
+/* Readonly/disabled fields: Aura's default cue is a dashed border, which reads
+   as "incomplete" rather than "not editable". Use a solid muted border + tinted
+   background instead (readonly: field-like but flat; disabled: same border, faded text). */
+[readonly]::part(input-field) {
+  border-style: solid;
+  border-color: var(--dialect-border);
+  background: var(--dialect-bg);
+}
+
+[readonly]:focus-within::part(input-field) {
+  outline-style: solid;
+}
+
+[disabled]::part(input-field) {
+  border-style: solid;
+  border-color: var(--dialect-border);
+}
+
+[readonly]::part(checkbox),
+[readonly]::part(radio-button) {
+  border-style: solid;
+}
+
+/* Top bar: solid white, opaque, divider + soft shadow below.
+   Separates it from the sidebar/content instead of blending into one surface. */
+vaadin-app-layout::part(navbar) {
+  background: var(--dialect-surface);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border-bottom: 1px solid var(--dialect-border);
+  box-shadow: 0 1px 3px rgba(20, 23, 31, 0.05);
+}
+
+/* Sidebar: solid white, right divider separates it from the canvas */
+vaadin-app-layout::part(drawer) {
+  background: var(--dialect-surface);
+  border-inline-end: 1px solid var(--dialect-border);
+}
+
+/* Canvas: gray, so white chrome and white cards both read against it */
+vaadin-app-layout::part(content) {
+  background: var(--dialect-bg);
+  border: none;
 }
 
 .dialect-title {
   font-weight: 600;
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
   color: var(--dialect-ink);
 }
 
@@ -40,4 +99,4 @@
   font-weight: 600;
   color: var(--dialect-ink);
   margin: 0 0 12px 0;
-}
+}