mithril-materialized 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/index.css

@@ -1,4 +1,144 @@
-@charset "UTF-8";
+:root {
+  --mm-primary-color: #26a69a;
+  --mm-primary-color-light: #80cbc4;
+  --mm-primary-color-dark: #00695c;
+  --mm-secondary-color: #ff6f00;
+  --mm-secondary-color-light: #ffa726;
+  --mm-secondary-color-dark: #ef6c00;
+  --mm-background-color: #ffffff;
+  --mm-surface-color: #ffffff;
+  --mm-card-background: #ffffff;
+  --mm-text-primary: rgba(0, 0, 0, 0.87);
+  --mm-text-secondary: rgba(0, 0, 0, 0.6);
+  --mm-text-disabled: rgba(0, 0, 0, 0.38);
+  --mm-text-hint: rgba(0, 0, 0, 0.38);
+  --mm-border-color: rgba(0, 0, 0, 0.12);
+  --mm-divider-color: rgba(0, 0, 0, 0.12);
+  --mm-input-background: #ffffff;
+  --mm-input-border: rgba(0, 0, 0, 0.42);
+  --mm-input-border-focus: var(--mm-primary-color);
+  --mm-input-text: var(--mm-text-primary);
+  --mm-button-background: var(--mm-primary-color);
+  --mm-button-text: #ffffff;
+  --mm-button-flat-text: var(--mm-primary-color);
+  --mm-nav-background: var(--mm-primary-color);
+  --mm-nav-text: #ffffff;
+  --mm-nav-active-text: #ffffff;
+  --mm-modal-background: #ffffff;
+  --mm-overlay-background: rgba(0, 0, 0, 0.5);
+  --mm-shadow-color: rgba(0, 0, 0, 0.16);
+  --mm-chip-bg: #e4e4e4;
+  --mm-chip-text: var(--mm-text-secondary);
+  --mm-dropdown-hover: #eee;
+  --mm-dropdown-focus: #ddd;
+  --mm-dropdown-selected: #e3f2fd;
+  --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
+  --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
+  --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
+  --mm-switch-checked-track: rgba(38, 166, 154, 0.3);
+  --mm-switch-checked-thumb: #26a69a;
+  --mm-switch-unchecked-track: rgba(0, 0, 0, 0.6);
+  --mm-switch-unchecked-thumb: #f5f5f5;
+  --mm-switch-disabled-track: rgba(0, 0, 0, 0.12);
+  --mm-switch-disabled-thumb: #bdbdbd;
+}
+
+body {
+  background-color: var(--mm-background-color);
+  color: var(--mm-text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container, .main {
+  color: var(--mm-text-primary);
+}
+
+[data-theme=dark] {
+  --mm-primary-color: #80cbc4;
+  --mm-primary-color-light: #b2dfdb;
+  --mm-primary-color-dark: #4db6ac;
+  --mm-secondary-color: #ffa726;
+  --mm-secondary-color-light: #ffcc02;
+  --mm-secondary-color-dark: #ff8f00;
+  --mm-background-color: #121212;
+  --mm-surface-color: #1e1e1e;
+  --mm-card-background: #2d2d2d;
+  --mm-text-primary: rgba(255, 255, 255, 0.87);
+  --mm-text-secondary: rgba(255, 255, 255, 0.6);
+  --mm-text-disabled: rgba(255, 255, 255, 0.38);
+  --mm-text-hint: rgba(255, 255, 255, 0.38);
+  --mm-border-color: rgba(255, 255, 255, 0.12);
+  --mm-divider-color: rgba(255, 255, 255, 0.12);
+  --mm-input-background: #2d2d2d;
+  --mm-input-border: rgba(255, 255, 255, 0.42);
+  --mm-input-border-focus: var(--mm-primary-color);
+  --mm-input-text: var(--mm-text-primary);
+  --mm-button-background: var(--mm-primary-color);
+  --mm-button-text: #000000;
+  --mm-button-flat-text: var(--mm-primary-color);
+  --mm-nav-background: #1e1e1e;
+  --mm-nav-text: #ffffff;
+  --mm-nav-active-text: #000000;
+  --mm-modal-background: #2d2d2d;
+  --mm-overlay-background: rgba(0, 0, 0, 0.8);
+  --mm-shadow-color: rgba(0, 0, 0, 0.5);
+  --mm-shadow-umbra: rgba(0, 0, 0, 0.5);
+  --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
+  --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
+  --mm-chip-bg: #424242;
+  --mm-chip-text: var(--mm-text-secondary);
+  --mm-dropdown-hover: #444;
+  --mm-dropdown-focus: #555;
+  --mm-dropdown-selected: #1e3a8a;
+  --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
+  --mm-switch-checked-thumb: #80cbc4;
+  --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
+  --mm-switch-unchecked-thumb: #616161;
+  --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
+  --mm-switch-disabled-thumb: #424242;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --mm-primary-color: #80cbc4;
+    --mm-primary-color-light: #b2dfdb;
+    --mm-primary-color-dark: #4db6ac;
+    --mm-secondary-color: #ffa726;
+    --mm-secondary-color-light: #ffcc02;
+    --mm-secondary-color-dark: #ff8f00;
+    --mm-background-color: #121212;
+    --mm-surface-color: #1e1e1e;
+    --mm-card-background: #2d2d2d;
+    --mm-text-primary: rgba(255, 255, 255, 0.87);
+    --mm-text-secondary: rgba(255, 255, 255, 0.6);
+    --mm-text-disabled: rgba(255, 255, 255, 0.38);
+    --mm-text-hint: rgba(255, 255, 255, 0.38);
+    --mm-border-color: rgba(255, 255, 255, 0.12);
+    --mm-divider-color: rgba(255, 255, 255, 0.12);
+    --mm-input-background: #2d2d2d;
+    --mm-input-border: rgba(255, 255, 255, 0.42);
+    --mm-input-border-focus: var(--mm-primary-color);
+    --mm-input-text: var(--mm-text-primary);
+    --mm-button-background: var(--mm-primary-color);
+    --mm-button-text: #000000;
+    --mm-button-flat-text: var(--mm-primary-color);
+    --mm-nav-background: #1e1e1e;
+    --mm-nav-text: #ffffff;
+    --mm-nav-active-text: #000000;
+    --mm-modal-background: #2d2d2d;
+    --mm-overlay-background: rgba(0, 0, 0, 0.8);
+    --mm-shadow-color: rgba(0, 0, 0, 0.5);
+    --mm-shadow-umbra: rgba(0, 0, 0, 0.5);
+    --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
+    --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
+    --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
+    --mm-switch-checked-thumb: #80cbc4;
+    --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
+    --mm-switch-unchecked-thumb: #616161;
+    --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
+    --mm-switch-disabled-thumb: #424242;
+  }
+}
 .materialize-red {
   background-color: #e51c23 !important;
 }
@@ -2976,17 +3116,18 @@ td, th {
 }
 .collection {
   margin: 0.5rem 0 1rem 0;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--mm-border-color, #e0e0e0);
   border-radius: 2px;
   overflow: hidden;
   position: relative;
 }
 .collection .collection-item {
-  background-color: #fff;
+  background-color: var(--mm-surface-color, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   line-height: 1.5rem;
   padding: 10px 20px;
   margin: 0;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
 }
 .collection .collection-item.avatar {
   min-height: 84px;
@@ -3040,8 +3181,9 @@ td, th {
   background-color: #ddd;
 }
 .collection.with-header .collection-header {
-  background-color: #fff;
-  border-bottom: 1px solid #e0e0e0;
+  background-color: var(--mm-surface-color, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
   padding: 10px 20px;
 }
 .collection.with-header .collection-item {
@@ -4042,8 +4184,8 @@ table span.badge {
 }
 
 nav {
-  color: #fff;
-  background-color: #ee6e73;
+  color: var(--mm-nav-text, #fff);
+  background-color: var(--mm-nav-background, #ee6e73);
   width: 100%;
   height: 56px;
   line-height: 56px;
@@ -4060,7 +4202,7 @@ nav.nav-extended .nav-content {
   line-height: normal;
 }
 nav a {
-  color: #fff;
+  color: var(--mm-nav-text, #fff);
 }
 nav i,
 nav [class^=mdi-], nav [class*=mdi-],
@@ -4142,7 +4284,13 @@ nav ul li {
   padding: 0;
 }
 nav ul li.active {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--mm-primary-color-light, rgba(0, 0, 0, 0.1));
+}
+nav ul li.active a {
+  color: var(--mm-nav-active-text, #fff);
+}
+nav ul li.active i, nav ul li.active .material-icons {
+  color: var(--mm-nav-active-text, #fff);
 }
 nav ul a {
   transition: background-color 0.3s;
@@ -4193,7 +4341,7 @@ nav .input-field label i {
   transition: color 0.3s;
 }
 nav .input-field label.active i {
-  color: #fff;
+  color: var(--mm-nav-text, #fff);
 }
 
 .navbar-fixed {
@@ -4655,7 +4803,8 @@ small {
   overflow-y: hidden;
   height: 48px;
   width: 100%;
-  background-color: #fff;
+  background-color: var(--mm-background-color, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   margin: 0 auto;
   white-space: nowrap;
 }
@@ -4690,7 +4839,7 @@ small {
   text-transform: uppercase;
 }
 .tabs .tab a {
-  color: rgba(238, 110, 115, 0.7);
+  color: var(--mm-text-secondary, rgba(238, 110, 115, 0.7));
   display: block;
   width: 100%;
   height: 100%;
@@ -4706,10 +4855,10 @@ small {
 }
 .tabs .tab a:hover, .tabs .tab a.active {
   background-color: transparent;
-  color: #ee6e73;
+  color: var(--mm-primary-color, #ee6e73);
 }
 .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
-  color: rgba(238, 110, 115, 0.4);
+  color: var(--mm-text-disabled, rgba(238, 110, 115, 0.4));
   cursor: default;
 }
 .tabs .indicator {
@@ -5034,7 +5183,7 @@ button.btn-floating {
 .btn-flat {
   box-shadow: none;
   background-color: transparent;
-  color: #343434;
+  color: var(--mm-button-flat-text, #343434);
   cursor: pointer;
   transition: background-color 0.2s;
 }
@@ -5042,11 +5191,11 @@ button.btn-floating {
   box-shadow: none;
 }
 .btn-flat:focus {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.1));
 }
 .btn-flat.disabled, .btn-flat.btn-flat[disabled] {
   background-color: transparent !important;
-  color: rgb(178.5, 178.5, 178.5) !important;
+  color: var(--mm-text-disabled, rgb(178.5, 178.5, 178.5)) !important;
   cursor: default;
 }
 
@@ -5074,7 +5223,7 @@ button.btn-floating {
 }
 
 .dropdown-content {
-  background-color: #fff;
+  background-color: var(--mm-surface-color, #fff);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -5091,7 +5240,7 @@ button.btn-floating {
 }
 .dropdown-content li {
   clear: both;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   cursor: pointer;
   min-height: 50px;
   line-height: 1.5rem;
@@ -5099,7 +5248,7 @@ button.btn-floating {
   text-align: left;
 }
 .dropdown-content li:hover, .dropdown-content li.active {
-  background-color: #eee;
+  background-color: var(--mm-dropdown-hover, #eee);
 }
 .dropdown-content li:focus {
   outline: none;
@@ -5110,7 +5259,7 @@ button.btn-floating {
 }
 .dropdown-content li > a, .dropdown-content li > span {
   font-size: 16px;
-  color: #26a69a;
+  color: var(--mm-text-primary, #26a69a);
   display: block;
   line-height: 22px;
   padding: 14px 16px;
@@ -5129,7 +5278,7 @@ button.btn-floating {
 }
 
 body.keyboard-focused .dropdown-content li:focus {
-  background-color: rgb(217.6, 217.6, 217.6);
+  background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
 }
 
 .input-field.col .dropdown-content [type=checkbox] + label {
@@ -5254,7 +5403,8 @@ body.keyboard-focused .dropdown-content li:focus {
   position: fixed;
   left: 0;
   right: 0;
-  background-color: #fafafa;
+  background-color: var(--mm-modal-background, #fafafa);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   padding: 0;
   max-height: 70%;
   width: 55%;
@@ -5276,13 +5426,15 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 .modal .modal-content {
   padding: 24px;
+  background-color: var(--mm-modal-background, #fafafa);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 .modal .modal-close {
   cursor: pointer;
 }
 .modal .modal-footer {
   border-radius: 0 0 2px 2px;
-  background-color: #fafafa;
+  background-color: var(--mm-modal-background, #fafafa);
   padding: 4px 6px;
   height: 56px;
   width: 100%;
@@ -5334,9 +5486,9 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .collapsible {
-  border-top: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-  border-left: 1px solid #ddd;
+  border-top: 1px solid var(--mm-border-color, #ddd);
+  border-right: 1px solid var(--mm-border-color, #ddd);
+  border-left: 1px solid var(--mm-border-color, #ddd);
   margin: 0.5rem 0 1rem 0;
 }
 
@@ -5346,8 +5498,7 @@ body.keyboard-focused .dropdown-content li:focus {
   -webkit-tap-highlight-color: transparent;
   line-height: 1.5;
   padding: 1rem;
-  background-color: #fff;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--mm-border-color, #ddd);
 }
 .collapsible-header:focus {
   outline: 0;
@@ -5361,12 +5512,12 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: #eee;
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
 
 .collapsible-body {
   display: none;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--mm-border-color, #ddd);
   box-sizing: border-box;
   padding: 2rem;
 }
@@ -5399,7 +5550,8 @@ body.keyboard-focused .dropdown-content li:focus {
 .sidenav .collapsible-body,
 .sidenav.sidenav-fixed .collapsible-body {
   border: 0;
-  background-color: #fff;
+  background-color: var(--mm-surface-color, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 .sidenav .collapsible-body li a,
 .sidenav.sidenav-fixed .collapsible-body li a {
@@ -5425,18 +5577,18 @@ body.keyboard-focused .dropdown-content li:focus {
   height: 32px;
   font-size: 13px;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
   line-height: 32px;
   padding: 0 12px;
   border-radius: 16px;
-  background-color: #e4e4e4;
+  background-color: var(--mm-chip-bg, #e4e4e4);
   margin-bottom: 5px;
   margin-right: 5px;
 }
 .chip:focus {
   outline: none;
-  background-color: #26a69a;
-  color: #fff;
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
 }
 .chip > img {
   float: left;
@@ -5455,7 +5607,7 @@ body.keyboard-focused .dropdown-content li:focus {
 
 .chips {
   border: none;
-  border-bottom: 1px solid #9e9e9e;
+  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
   box-shadow: none;
   margin: 0 0 8px 0;
   min-height: 45px;
@@ -5463,8 +5615,8 @@ body.keyboard-focused .dropdown-content li:focus {
   transition: all 0.3s;
 }
 .chips.focus {
-  border-bottom: 1px solid #26a69a;
-  box-shadow: 0 1px 0 0 #26a69a;
+  border-bottom: 1px solid var(--mm-primary-color, #26a69a);
+  box-shadow: 0 1px 0 0 var(--mm-primary-color, #26a69a);
 }
 .chips:hover {
   cursor: text;
@@ -5472,7 +5624,7 @@ body.keyboard-focused .dropdown-content li:focus {
 .chips .input {
   background: none;
   border: 0;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.6));
   display: inline-block;
   font-size: 16px;
   height: 3rem;
@@ -5546,10 +5698,10 @@ body.keyboard-focused .dropdown-content li:focus {
    ========================================================================== */
 /* Style Placeholders */
 ::-moz-placeholder {
-  color: #d1d1d1;
+  color: var(--mm-text-hint, #d1d1d1);
 }
 ::placeholder {
-  color: #d1d1d1;
+  color: var(--mm-text-hint, #d1d1d1);
 }
 
 /* Text inputs */
@@ -5568,7 +5720,7 @@ input[type=search]:not(.browser-default),
 textarea.materialize-textarea {
   background-color: transparent;
   border: none;
-  border-bottom: 1px solid #9e9e9e;
+  border-bottom: 1px solid var(--mm-input-border, 1px solid #9e9e9e);
   border-radius: 0;
   outline: none;
   height: 3rem;
@@ -5579,6 +5731,7 @@ textarea.materialize-textarea {
   box-shadow: none;
   box-sizing: content-box;
   transition: box-shadow 0.3s, border 0.3s;
+  color: var(--mm-input-text, inherit);
 }
 input:not([type]):not(.browser-default):disabled, input:not([type]):not(.browser-default)[readonly=readonly],
 input[type=text]:not(.browser-default):disabled,
@@ -5605,8 +5758,8 @@ input[type=search]:not(.browser-default):disabled,
 input[type=search]:not(.browser-default)[readonly=readonly],
 textarea.materialize-textarea:disabled,
 textarea.materialize-textarea[readonly=readonly] {
-  color: rgba(0, 0, 0, 0.42);
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
+  border-bottom: 1px dotted var(--mm-input-border, 1px dotted rgba(0, 0, 0, 0.42));
 }
 input:not([type]):not(.browser-default):disabled + label, input:not([type]):not(.browser-default)[readonly=readonly] + label,
 input[type=text]:not(.browser-default):disabled + label,
@@ -5633,7 +5786,7 @@ input[type=search]:not(.browser-default):disabled + label,
 input[type=search]:not(.browser-default)[readonly=readonly] + label,
 textarea.materialize-textarea:disabled + label,
 textarea.materialize-textarea[readonly=readonly] + label {
-  color: rgba(0, 0, 0, 0.42);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 input:not([type]):not(.browser-default):focus:not([readonly]),
 input[type=text]:not(.browser-default):focus:not([readonly]),
@@ -5648,8 +5801,8 @@ input[type=tel]:not(.browser-default):focus:not([readonly]),
 input[type=number]:not(.browser-default):focus:not([readonly]),
 input[type=search]:not(.browser-default):focus:not([readonly]),
 textarea.materialize-textarea:focus:not([readonly]) {
-  border-bottom: 1px solid #26a69a;
-  box-shadow: 0 1px 0 0 #26a69a;
+  border-bottom: 1px solid var(--mm-input-border-focus, #26a69a);
+  box-shadow: 0 1px 0 0 var(--mm-input-border-focus, #26a69a);
 }
 input:not([type]):not(.browser-default):focus:not([readonly]) + label,
 input[type=text]:not(.browser-default):focus:not([readonly]) + label,
@@ -5664,7 +5817,7 @@ input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
 input[type=number]:not(.browser-default):focus:not([readonly]) + label,
 input[type=search]:not(.browser-default):focus:not([readonly]) + label,
 textarea.materialize-textarea:focus:not([readonly]) + label {
-  color: #26a69a;
+  color: var(--mm-input-border-focus, #26a69a);
 }
 input:not([type]):not(.browser-default):focus.valid ~ label,
 input[type=text]:not(.browser-default):focus.valid ~ label,
@@ -5711,6 +5864,93 @@ input[type=search]:not(.browser-default).validate + label,
 textarea.materialize-textarea.validate + label {
   width: 100%;
 }
+input:not([type]):not(.browser-default):-webkit-autofill, input:not([type]):not(.browser-default):-webkit-autofill:hover, input:not([type]):not(.browser-default):-webkit-autofill:focus, input:not([type]):not(.browser-default):-webkit-autofill:active,
+input[type=text]:not(.browser-default):-webkit-autofill,
+input[type=text]:not(.browser-default):-webkit-autofill:hover,
+input[type=text]:not(.browser-default):-webkit-autofill:focus,
+input[type=text]:not(.browser-default):-webkit-autofill:active,
+input[type=password]:not(.browser-default):-webkit-autofill,
+input[type=password]:not(.browser-default):-webkit-autofill:hover,
+input[type=password]:not(.browser-default):-webkit-autofill:focus,
+input[type=password]:not(.browser-default):-webkit-autofill:active,
+input[type=email]:not(.browser-default):-webkit-autofill,
+input[type=email]:not(.browser-default):-webkit-autofill:hover,
+input[type=email]:not(.browser-default):-webkit-autofill:focus,
+input[type=email]:not(.browser-default):-webkit-autofill:active,
+input[type=url]:not(.browser-default):-webkit-autofill,
+input[type=url]:not(.browser-default):-webkit-autofill:hover,
+input[type=url]:not(.browser-default):-webkit-autofill:focus,
+input[type=url]:not(.browser-default):-webkit-autofill:active,
+input[type=time]:not(.browser-default):-webkit-autofill,
+input[type=time]:not(.browser-default):-webkit-autofill:hover,
+input[type=time]:not(.browser-default):-webkit-autofill:focus,
+input[type=time]:not(.browser-default):-webkit-autofill:active,
+input[type=date]:not(.browser-default):-webkit-autofill,
+input[type=date]:not(.browser-default):-webkit-autofill:hover,
+input[type=date]:not(.browser-default):-webkit-autofill:focus,
+input[type=date]:not(.browser-default):-webkit-autofill:active,
+input[type=datetime]:not(.browser-default):-webkit-autofill,
+input[type=datetime]:not(.browser-default):-webkit-autofill:hover,
+input[type=datetime]:not(.browser-default):-webkit-autofill:focus,
+input[type=datetime]:not(.browser-default):-webkit-autofill:active,
+input[type=datetime-local]:not(.browser-default):-webkit-autofill,
+input[type=datetime-local]:not(.browser-default):-webkit-autofill:hover,
+input[type=datetime-local]:not(.browser-default):-webkit-autofill:focus,
+input[type=datetime-local]:not(.browser-default):-webkit-autofill:active,
+input[type=tel]:not(.browser-default):-webkit-autofill,
+input[type=tel]:not(.browser-default):-webkit-autofill:hover,
+input[type=tel]:not(.browser-default):-webkit-autofill:focus,
+input[type=tel]:not(.browser-default):-webkit-autofill:active,
+input[type=number]:not(.browser-default):-webkit-autofill,
+input[type=number]:not(.browser-default):-webkit-autofill:hover,
+input[type=number]:not(.browser-default):-webkit-autofill:focus,
+input[type=number]:not(.browser-default):-webkit-autofill:active,
+input[type=search]:not(.browser-default):-webkit-autofill,
+input[type=search]:not(.browser-default):-webkit-autofill:hover,
+input[type=search]:not(.browser-default):-webkit-autofill:focus,
+input[type=search]:not(.browser-default):-webkit-autofill:active,
+textarea.materialize-textarea:-webkit-autofill,
+textarea.materialize-textarea:-webkit-autofill:hover,
+textarea.materialize-textarea:-webkit-autofill:focus,
+textarea.materialize-textarea:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px var(--mm-input-background, transparent) inset !important;
+  -webkit-text-fill-color: var(--mm-input-text, inherit) !important;
+  background-color: transparent !important;
+  color: var(--mm-input-text, inherit) !important;
+  -webkit-transition: background-color 5000s ease-in-out 0s;
+  transition: background-color 5000s ease-in-out 0s;
+}
+input:not([type]):not(.browser-default):-ms-input-placeholder,
+input[type=text]:not(.browser-default):-ms-input-placeholder,
+input[type=password]:not(.browser-default):-ms-input-placeholder,
+input[type=email]:not(.browser-default):-ms-input-placeholder,
+input[type=url]:not(.browser-default):-ms-input-placeholder,
+input[type=time]:not(.browser-default):-ms-input-placeholder,
+input[type=date]:not(.browser-default):-ms-input-placeholder,
+input[type=datetime]:not(.browser-default):-ms-input-placeholder,
+input[type=datetime-local]:not(.browser-default):-ms-input-placeholder,
+input[type=tel]:not(.browser-default):-ms-input-placeholder,
+input[type=number]:not(.browser-default):-ms-input-placeholder,
+input[type=search]:not(.browser-default):-ms-input-placeholder,
+textarea.materialize-textarea:-ms-input-placeholder {
+  color: var(--mm-text-hint, #d1d1d1) !important;
+}
+input:not([type]):not(.browser-default)::-ms-input-placeholder,
+input[type=text]:not(.browser-default)::-ms-input-placeholder,
+input[type=password]:not(.browser-default)::-ms-input-placeholder,
+input[type=email]:not(.browser-default)::-ms-input-placeholder,
+input[type=url]:not(.browser-default)::-ms-input-placeholder,
+input[type=time]:not(.browser-default)::-ms-input-placeholder,
+input[type=date]:not(.browser-default)::-ms-input-placeholder,
+input[type=datetime]:not(.browser-default)::-ms-input-placeholder,
+input[type=datetime-local]:not(.browser-default)::-ms-input-placeholder,
+input[type=tel]:not(.browser-default)::-ms-input-placeholder,
+input[type=number]:not(.browser-default)::-ms-input-placeholder,
+input[type=search]:not(.browser-default)::-ms-input-placeholder,
+textarea.materialize-textarea::-ms-input-placeholder {
+  color: var(--mm-text-hint, #d1d1d1) !important;
+}
+
 /* Validation Sass Placeholders */
 .select-wrapper.valid > input.select-dropdown, input:not([type]):not(.browser-default).valid, input:not([type]):not(.browser-default):focus.valid,
 input[type=text]:not(.browser-default).valid,
@@ -5952,7 +6192,7 @@ textarea.materialize-textarea + label:after {
   min-height: 18px;
   display: block;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
 .input-field .helper-text::after {
   opacity: 1;
@@ -6014,13 +6254,13 @@ textarea.materialize-textarea + label:after {
   box-shadow: none;
 }
 .input-field input[type=search]:focus:not(.browser-default) {
-  background-color: #fff;
+  background-color: var(--mm-input-background, #fff);
   border: 0;
   box-shadow: none;
-  color: #444;
+  color: var(--mm-input-text, #444);
 }
 .input-field input[type=search]:focus:not(.browser-default) + label i, .input-field input[type=search]:focus:not(.browser-default) ~ .mdi-navigation-close, .input-field input[type=search]:focus:not(.browser-default) ~ .material-icons {
-  color: #444;
+  color: var(--mm-input-text, #444);
 }
 .input-field input[type=search] + .label-icon {
   transform: none;
@@ -6126,7 +6366,7 @@ textarea.materialize-textarea {
 
 [type=radio]:not(:checked) + span:before,
 [type=radio]:not(:checked) + span:after {
-  border: 2px solid #5a5a5a;
+  border: 2px solid var(--mm-text-secondary, #5a5a5a);
 }
 
 [type=radio]:not(:checked) + span:after {
@@ -6141,12 +6381,12 @@ textarea.materialize-textarea {
 [type=radio]:checked + span:after,
 [type=radio].with-gap:checked + span:before,
 [type=radio].with-gap:checked + span:after {
-  border: 2px solid #26a69a;
+  border: 2px solid var(--mm-primary-color, #26a69a);
 }
 
 [type=radio]:checked + span:after,
 [type=radio].with-gap:checked + span:after {
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color, #26a69a);
 }
 
 [type=radio]:checked + span:after {
@@ -6165,32 +6405,32 @@ textarea.materialize-textarea {
 
 /* Disabled Radio With gap */
 [type=radio].with-gap:disabled:checked + span:before {
-  border: 2px solid rgba(0, 0, 0, 0.42);
+  border: 2px solid var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
 [type=radio].with-gap:disabled:checked + span:after {
   border: none;
-  background-color: rgba(0, 0, 0, 0.42);
+  background-color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
 /* Disabled style */
 [type=radio]:disabled:not(:checked) + span:before,
 [type=radio]:disabled:checked + span:before {
   background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.42);
+  border-color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
 [type=radio]:disabled + span {
-  color: rgba(0, 0, 0, 0.42);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
 [type=radio]:disabled:not(:checked) + span:before {
-  border-color: rgba(0, 0, 0, 0.42);
+  border-color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
 [type=radio]:disabled:checked + span:after {
-  background-color: rgba(0, 0, 0, 0.42);
-  border-color: #949494;
+  background-color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
+  border-color: var(--mm-text-disabled, #949494);
 }
 
 /* Checkboxes
@@ -6379,13 +6619,13 @@ textarea.materialize-textarea {
   height: 0;
 }
 .switch label input[type=checkbox]:checked + .lever {
-  background-color: rgb(132.0625, 199.4375, 193.12109375);
+  background-color: var(--mm-switch-checked-track, rgb(132.0625, 199.4375, 193.12109375));
 }
 .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
   left: 18px;
 }
 .switch label input[type=checkbox]:checked + .lever:after {
-  background-color: #26a69a;
+  background-color: var(--mm-switch-checked-thumb, #26a69a);
 }
 
 .switch label .lever {
@@ -6394,7 +6634,7 @@ textarea.materialize-textarea {
   position: relative;
   width: 36px;
   height: 14px;
-  background-color: rgba(0, 0, 0, 0.38);
+  background-color: var(--mm-switch-unchecked-track, rgba(0, 0, 0, 0.38));
   border-radius: 15px;
   margin-right: 10px;
   transition: background 0.3s ease;
@@ -6416,7 +6656,7 @@ textarea.materialize-textarea {
   background-color: rgba(38, 166, 154, 0.15);
 }
 .switch label .lever:after {
-  background-color: #F1F1F1;
+  background-color: var(--mm-switch-unchecked-thumb, #F1F1F1);
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 
@@ -6434,12 +6674,12 @@ input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
 
 .switch input[type=checkbox][disabled] + .lever {
   cursor: default;
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: var(--mm-switch-disabled-track, rgba(0, 0, 0, 0.12));
 }
 
 .switch label input[type=checkbox][disabled] + .lever:after,
 .switch label input[type=checkbox][disabled]:checked + .lever:after {
-  background-color: #949494;
+  background-color: var(--mm-switch-disabled-thumb, #949494);
 }
 
 /* Select Field
@@ -6498,7 +6738,7 @@ select {
   bottom: 0;
   margin: auto 0;
   z-index: 0;
-  fill: rgba(0, 0, 0, 0.87);
+  fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 .select-wrapper + label {
   position: absolute;
@@ -6540,19 +6780,19 @@ select:disabled {
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
   background-color: transparent;
 }
 
 body.keyboard-focused .select-dropdown.dropdown-content li:focus {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
 .select-dropdown.dropdown-content li:hover {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
 .select-dropdown.dropdown-content li.selected {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
 }
 
 .prefix ~ .select-wrapper {
@@ -6573,13 +6813,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 }
 
 .select-dropdown li.optgroup {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--mm-border-color, #eee);
 }
 .select-dropdown li.optgroup.selected > span {
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
 }
 .select-dropdown li.optgroup > span {
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
 }
 .select-dropdown li.optgroup ~ li.optgroup-option {
   padding-left: 1rem;
@@ -6846,6 +7086,105 @@ label {
   border-left: 2px solid #ee6e73;
 }
 
+.sidenav-container {
+  position: relative;
+  z-index: 997;
+}
+
+.sidenav-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--mm-overlay-background, rgba(0, 0, 0, 0.5));
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 998;
+  cursor: pointer;
+}
+.sidenav-backdrop.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.sidenav-link {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  cursor: pointer;
+  min-height: 48px;
+}
+.sidenav-link:hover:not(.disabled) {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  text-decoration: none;
+}
+.sidenav-link.active {
+  background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+  color: var(--mm-primary-color, #26a69a);
+}
+.sidenav-link.active .sidenav-icon {
+  color: var(--mm-primary-color, #26a69a);
+}
+.sidenav-link.disabled {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+  cursor: not-allowed;
+}
+.sidenav-link.disabled .sidenav-icon {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+}
+
+.sidenav-icon {
+  margin-right: 1rem;
+  font-size: 1.5rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  flex-shrink: 0;
+}
+
+.sidenav-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidenav-divider {
+  height: 1px;
+  background: var(--mm-divider-color, rgba(0, 0, 0, 0.12));
+  margin: 0.5rem 0;
+}
+
+.sidenav-subheader {
+  padding: 1rem 1rem 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+}
+
+.sidenav-content {
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .sidenav {
   position: fixed;
   width: 300px;
@@ -6857,12 +7196,37 @@ label {
   height: calc(100% + 60px);
   height: -moz-calc(100%);
   padding-bottom: 60px;
-  background-color: #fff;
+  background-color: var(--mm-surface-color, #fff);
   z-index: 999;
   overflow-y: auto;
   will-change: transform;
   backface-visibility: hidden;
   transform: translateX(-105%);
+  transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
+}
+.sidenav.sidenav-left {
+  left: 0;
+}
+.sidenav.sidenav-right {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
+.sidenav.sidenav-overlay {
+  position: fixed;
+}
+.sidenav.sidenav-push {
+  position: relative;
+  box-shadow: var(--mm-border-color, rgba(0, 0, 0, 0.12)) 1px 0 0 0;
+}
+.sidenav.closed.sidenav-left {
+  transform: translateX(-100%);
+}
+.sidenav.closed.sidenav-right {
+  transform: translateX(100%);
+}
+.sidenav.open {
+  transform: translateX(0);
 }
 .sidenav.right-aligned {
   right: 0;
@@ -6881,7 +7245,7 @@ label {
   background-color: rgba(0, 0, 0, 0.05);
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   display: block;
   font-size: 14px;
   font-weight: 500;
@@ -6890,7 +7254,7 @@ label {
   padding: 0 32px;
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > [class^=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) li > a > [class*=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
   float: left;
@@ -6898,7 +7262,7 @@ label {
   line-height: 48px;
   margin: 0 32px 0 0;
   width: 24px;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
 .sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
   margin: 10px 32px;
@@ -6909,10 +7273,14 @@ label {
 .sidenav .subheader {
   cursor: initial;
   pointer-events: none;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
   font-size: 14px;
   font-weight: 500;
   line-height: 48px;
+  padding: 0 32px;
+  height: 48px;
+  display: flex;
+  align-items: center;
 }
 .sidenav .subheader:hover {
   background-color: transparent;
@@ -7013,11 +7381,18 @@ label {
   top: 0;
   left: 0;
   right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0;
-  height: 120vh;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--mm-overlay-background, rgba(0, 0, 0, 0.5));
   z-index: 997;
   display: none;
+  transition: opacity 0.3s ease;
+}
+
+.sidenav-overlay {
+  pointer-events: auto;
 }
 
 /*
@@ -7618,6 +7993,8 @@ label {
   flex-direction: column;
   padding: 0;
   overflow: visible;
+  background-color: var(--mm-surface-color, #ffffff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
 
 .datepicker-controls {
@@ -7652,17 +8029,17 @@ label {
   cursor: pointer;
   width: 16px;
   height: 16px;
-  fill: rgba(0, 0, 0, 0.54);
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
 .datepicker-controls .select-wrapper .dropdown-content {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
-  background-color: white;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  background-color: var(--mm-surface-color, white);
+  box-shadow: 0 4px 20px var(--mm-shadow-color, rgba(0, 0, 0, 0.3));
   z-index: 20000;
-  border: 1px solid #ddd;
+  border: 1px solid var(--mm-border-color, #ddd);
   border-radius: 2px;
   display: block;
   opacity: 1;
@@ -7674,10 +8051,10 @@ label {
   transition: background-color 0.2s;
 }
 .datepicker-controls .select-wrapper .dropdown-content .dropdown-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--mm-border-color, #f5f5f5);
 }
 .datepicker-controls .select-wrapper .dropdown-content .dropdown-item.selected {
-  background-color: #f5f5f5;
+  background-color: var(--mm-border-color, #f5f5f5);
 }
 .datepicker-controls .select-year input {
   width: 50px;
@@ -7734,6 +8111,9 @@ label {
   font-size: 1rem;
   margin: 0 auto;
 }
+.datepicker-table.with-week-numbers {
+  width: 310px;
+}
 .datepicker-table thead {
   border-bottom: none;
 }
@@ -7741,28 +8121,47 @@ label {
   padding: 10px 5px;
   text-align: center;
 }
+.datepicker-table th.datepicker-week-header {
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  font-size: 0.8rem;
+  font-weight: 600;
+  width: 30px;
+  padding: 10px 2px;
+}
 .datepicker-table tr {
   border: none;
 }
 .datepicker-table abbr {
   text-decoration: none;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
 .datepicker-table td {
   border-radius: 50%;
   padding: 0;
 }
 .datepicker-table td.is-today {
-  color: #26a69a;
+  color: var(--mm-primary-color, #26a69a);
 }
 .datepicker-table td.is-selected {
-  background-color: #26a69a;
-  color: #fff;
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
 }
 .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
   pointer-events: none;
 }
+.datepicker-table td.datepicker-week-number {
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 0;
+  width: 30px;
+  padding: 5px 2px;
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.02));
+  border-right: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
 
 .datepicker-day-button {
   background-color: transparent;
@@ -7775,9 +8174,6 @@ label {
   cursor: pointer;
   color: inherit;
 }
-.datepicker-day-button:focus {
-  background-color: #eee;
-}
 
 /* Footer */
 .datepicker-footer {
@@ -7816,6 +8212,9 @@ label {
   .datepicker-footer {
     width: 320px;
   }
+  .datepicker-table.with-week-numbers {
+    width: 350px;
+  }
   .datepicker-day-button {
     line-height: 44px;
   }
@@ -7850,7 +8249,7 @@ label {
   gap: 8px;
   margin-top: 8px;
   padding: 12px;
-  background-color: #f5f5f5;
+  background-color: var(--mm-border-color, #f5f5f5);
   border-radius: 4px;
   font-size: 14px;
 }
@@ -7863,106 +8262,1023 @@ label {
   width: 50px;
   text-align: center;
   padding: 4px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--mm-border-color, #ccc);
   border-radius: 4px;
 }
 .inline-time-controls .time-controls-12h select {
   padding: 4px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--mm-border-color, #ccc);
   border-radius: 4px;
   margin-left: 4px;
 }
 .inline-time-controls input[type=time] {
   font-size: 16px;
   padding: 4px 8px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--mm-border-color, #ccc);
   border-radius: 4px;
   min-width: 120px;
 }
 .inline-time-controls .btn-flat {
   padding: 4px 8px;
   font-size: 11px;
-  background-color: #e0e0e0;
+  background-color: var(--mm-border-color, #e0e0e0);
   border-radius: 4px;
   min-width: auto;
 }
 
+/* Timepicker Containers */
 .timepicker-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  max-width: 325px;
+  max-height: none;
+}
+
+.timepicker-container.modal-content {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
+  flex-direction: column;
+  padding: 0;
 }
-.timepicker-modal .timepicker-content {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  min-width: 320px;
-  max-width: 400px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+.text-primary {
+  color: rgb(255, 255, 255);
 }
-.timepicker-modal .timepicker-content .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+  flex: 1 auto;
+  background-color: #26a69a;
+  padding: 10px;
+  font-weight: 300;
 }
-.timepicker-modal .timepicker-content .modal-header h5 {
-  margin: 0;
+
+.timepicker-text-container {
+  font-size: 4rem;
+  font-weight: bold;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.timepicker-modal .timepicker-content .modal-header .btn-flat {
-  padding: 4px 8px;
-  font-size: 11px;
-  min-width: auto;
+
+.timepicker-span-hours,
+.timepicker-span-minutes,
+.timepicker-span-am-pm div {
+  cursor: pointer;
 }
-.timepicker-modal .timepicker-content .modal-header .btn-flat i.material-icons {
-  font-size: 14px;
-  margin-right: 4px;
+
+.timepicker-span-hours {
+  margin-right: 3px;
 }
-.timepicker-modal .timepicker-content .time-display {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: 24px;
-  font-size: 2.5rem;
-  font-weight: 300;
+
+.timepicker-span-minutes {
+  margin-left: 3px;
 }
-.timepicker-modal .timepicker-content .time-display input[type=number] {
-  width: 80px;
-  text-align: center;
-  font-size: 2.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 8px;
+
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  font-weight: 400;
 }
-.timepicker-modal .timepicker-content .time-display .ampm-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  flex: 2.5 auto;
 }
-.timepicker-modal .timepicker-content .time-display .ampm-selector button {
-  min-width: 60px;
-  padding: 4px 8px;
+
+.timepicker-plate {
+  background-color: #eee;
+  border-radius: 50%;
+  width: 270px;
+  height: 270px;
+  overflow: visible;
+  position: relative;
+  margin: auto;
+  margin-top: 25px;
+  margin-bottom: 5px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.timepicker-modal .timepicker-content .timepicker-actions {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 24px;
+
+.timepicker-canvas,
+.timepicker-dial {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
-.timepicker-modal .timepicker-content .timepicker-actions > div {
-  display: flex;
-  gap: 8px;
+
+.timepicker-minutes {
+  visibility: hidden;
 }
-.timepicker-modal .timepicker-content .timepicker-actions .btn-flat {
-  padding: 0 20px;
+
+.timepicker-tick {
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.87);
+  line-height: 40px;
+  text-align: center;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  cursor: pointer;
+  font-size: 15px;
+}
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+  background-color: rgba(38, 166, 154, 0.25);
+}
+
+.timepicker-dial {
+  transition: transform 350ms, opacity 350ms;
+}
+
+.timepicker-dial-out {
+  opacity: 0;
+}
+.timepicker-dial-out.timepicker-hours {
+  transform: scale(1.1, 1.1);
+}
+.timepicker-dial-out.timepicker-minutes {
+  transform: scale(0.8, 0.8);
+}
+
+.timepicker-canvas {
+  transition: opacity 175ms;
+}
+.timepicker-canvas line {
+  stroke: #26a69a;
+  stroke-width: 4;
+  stroke-linecap: round;
+}
+
+.timepicker-canvas-out {
+  opacity: 0.25;
+}
+
+.timepicker-canvas-bearing {
+  stroke: none;
+  fill: #26a69a;
+}
+
+.timepicker-canvas-bg {
+  stroke: none;
+  fill: #26a69a;
+}
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timepicker-clear {
+  color: #F44336;
+}
+
+.timepicker-close {
+  color: #26a69a;
+}
+
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
+/* Media Queries */
+@media only screen and (min-width : 601px) {
+  .timepicker-modal {
+    max-width: 600px;
+  }
+  .timepicker-container.modal-content {
+    flex-direction: row;
+  }
+  .timepicker-text-container {
+    top: 32%;
+  }
+  .timepicker-display-am-pm {
+    position: relative;
+    right: auto;
+    bottom: auto;
+    text-align: center;
+    margin-top: 1.2rem;
+  }
+}
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.theme-switcher .theme-switcher-label {
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+}
+.theme-switcher .theme-switcher-buttons {
+  display: flex;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 0.875rem;
+  border-radius: 0;
+  min-width: auto;
+  height: auto;
+  line-height: 1;
+  text-transform: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
+.theme-switcher .theme-switcher-buttons .btn-flat.active {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+}
+.theme-switcher .theme-switcher-buttons .btn-flat.active:hover {
+  background: var(--mm-primary-color-dark, #00695c);
+}
+.theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
+  font-size: 1rem;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat span {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.theme-toggle {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.theme-toggle:hover {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+  border-color: var(--mm-primary-color, #26a69a);
+}
+.theme-toggle .material-icons {
+  font-size: 1.25rem;
+}
+
+nav .theme-toggle {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: 64px;
+  height: 64px;
+}
+nav .theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+}
+nav .theme-toggle:focus {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 600px) {
+  .theme-switcher .theme-switcher-buttons .btn-flat {
+    padding: 0.5rem;
+  }
+  .theme-switcher .theme-switcher-buttons .btn-flat span {
+    display: none;
+  }
+}
+.file-upload-container {
+  margin-bottom: 1rem;
+}
+
+.file-upload-area {
+  border: 2px dashed var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--mm-input-background, #ffffff);
+}
+.file-upload-area:hover:not(.disabled) {
+  border-color: var(--mm-primary-color, #26a69a);
+  background: var(--mm-surface-color, #f5f5f5);
+}
+.file-upload-area.drag-over {
+  border-color: var(--mm-primary-color, #26a69a);
+  background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+  transform: scale(1.02);
+}
+.file-upload-area.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.file-upload-area.error {
+  border-color: #f44336;
+}
+.file-upload-area.has-files {
+  padding: 1rem;
+}
+
+.file-upload-content .file-upload-icon {
+  font-size: 3rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin-bottom: 0.5rem;
+}
+.file-upload-content .file-upload-label {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  margin: 0.5rem 0;
+}
+.file-upload-content .file-upload-helper {
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin: 0.25rem 0;
+}
+.file-upload-content .file-upload-types {
+  font-size: 0.75rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  margin: 0.25rem 0 0 0;
+  font-style: italic;
+}
+
+.file-upload-error {
+  color: #f44336;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  text-align: left;
+}
+
+.file-upload-list {
+  margin-top: 1rem;
+}
+.file-upload-list h6 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
+
+.file-upload-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+}
+.file-upload-item:hover {
+  background: var(--mm-card-background, #f5f5f5);
+}
+.file-upload-item .file-preview {
+  flex-shrink: 0;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.file-upload-item .file-preview img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.file-upload-item .file-info {
+  flex: 1;
+  min-width: 0;
+}
+.file-upload-item .file-info .file-name {
+  font-weight: 500;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  margin-bottom: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-upload-item .file-info .file-details {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+}
+.file-upload-item .file-info .file-progress {
+  margin-top: 0.5rem;
+}
+.file-upload-item .file-info .file-progress .progress {
+  height: 0.25rem;
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+.file-upload-item .file-info .file-progress .progress .determinate {
+  background-color: var(--mm-primary-color, #26a69a);
+  height: 100%;
+  transition: width 0.3s ease;
+}
+.file-upload-item .file-info .file-error {
+  color: #f44336;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+.file-upload-item .file-remove {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.file-upload-item .file-remove:hover {
+  background: rgba(244, 67, 54, 0.1);
+  color: #f44336;
+}
+.file-upload-item .file-remove .material-icons {
+  font-size: 1.25rem;
+}
+
+@media (max-width: 600px) {
+  .file-upload-area {
+    padding: 1.5rem 1rem;
+  }
+  .file-upload-area .file-upload-content .file-upload-icon {
+    font-size: 2.5rem;
+  }
+  .file-upload-area .file-upload-content .file-upload-label {
+    font-size: 1rem;
+  }
+  .file-upload-item {
+    gap: 0.75rem;
+    padding: 0.5rem;
+  }
+  .file-upload-item .file-preview {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .file-upload-item .file-info .file-details {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+[data-theme=dark] .file-upload-area.drag-over {
+  background: var(--mm-primary-color-dark, rgba(38, 166, 154, 0.2));
+}
+
+.breadcrumb {
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+}
+.breadcrumb .breadcrumb-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.breadcrumb-item.active .breadcrumb-text {
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  font-weight: 500;
+}
+.breadcrumb-item.disabled .breadcrumb-text {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+  cursor: not-allowed;
+}
+.breadcrumb-item.breadcrumb-ellipsis .breadcrumb-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 400;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.breadcrumb-link {
+  display: flex;
+  align-items: center;
+  color: var(--mm-primary-color, #26a69a);
+  text-decoration: none;
+  transition: color 0.2s ease;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.breadcrumb-link:hover {
+  color: var(--mm-primary-color-dark, #00695c);
+  text-decoration: underline;
+  background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+}
+.breadcrumb-link:focus {
+  outline: 2px solid var(--mm-primary-color, #26a69a);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.breadcrumb-text {
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  font-weight: 400;
+  line-height: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+.breadcrumb-icon {
+  font-size: 1.125rem;
+  width: 18px;
+  height: 18px;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.breadcrumb-separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  height: 18px;
+}
+.breadcrumb-separator .material-icons {
+  font-size: 1.125rem;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+}
+
+.breadcrumb.compact {
+  padding: 0.25rem 0;
+  margin-bottom: 0.5rem;
+}
+.breadcrumb.compact .breadcrumb-item {
+  font-size: 0.75rem;
+}
+.breadcrumb.compact .breadcrumb-icon {
+  font-size: 0.875rem;
+  width: 14px;
+  height: 14px;
+}
+.breadcrumb.compact .breadcrumb-separator .material-icons {
+  font-size: 0.875rem;
+  width: 14px;
+  height: 14px;
+}
+
+.breadcrumb.large {
+  padding: 0.75rem 0;
+  margin-bottom: 1.5rem;
+}
+.breadcrumb.large .breadcrumb-item {
+  font-size: 1rem;
+}
+.breadcrumb.large .breadcrumb-icon {
+  font-size: 1.125rem;
+  width: 18px;
+  height: 18px;
+}
+.breadcrumb.large .breadcrumb-separator .material-icons {
+  font-size: 1.125rem;
+  width: 18px;
+  height: 18px;
+}
+
+@media (max-width: 600px) {
+  .breadcrumb .breadcrumb-list {
+    gap: 0.125rem;
+  }
+  .breadcrumb .breadcrumb-item {
+    font-size: 0.75rem;
+  }
+  .breadcrumb .breadcrumb-text {
+    max-width: 120px;
+  }
+  .breadcrumb .breadcrumb-icon {
+    font-size: 0.875rem;
+    width: 14px;
+    height: 14px;
+    margin-right: 0.125rem;
+  }
+  .breadcrumb .breadcrumb-separator .material-icons {
+    font-size: 0.875rem;
+    width: 14px;
+    height: 14px;
+  }
+}
+[data-theme=dark] .breadcrumb-link {
+  color: var(--mm-primary-color, #80cbc4);
+}
+[data-theme=dark] .breadcrumb-link:hover {
+  color: var(--mm-primary-color-light, #b2dfdb);
+}
+
+.breadcrumb.slash-separator .breadcrumb-separator {
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+.breadcrumb.slash-separator .breadcrumb-separator .material-icons {
+  display: none;
+}
+.breadcrumb.slash-separator .breadcrumb-separator::before {
+  content: "/";
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.breadcrumb.dot-separator .breadcrumb-separator .material-icons {
+  display: none;
+}
+.breadcrumb.dot-separator .breadcrumb-separator::before {
+  content: "•";
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 1rem;
+}
+
+.breadcrumb:not([aria-label]) {
+  aria-label: "Breadcrumb navigation";
+}
+
+.breadcrumb-link[aria-current=page] {
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  text-decoration: none;
+  font-weight: 500;
+}
+.breadcrumb-link[aria-current=page]:hover {
+  text-decoration: none;
+}
+
+.wizard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.wizard.horizontal .wizard-steps {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  position: relative;
+}
+.wizard.horizontal .wizard-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex: 1;
+  position: relative;
+}
+.wizard.horizontal .wizard-step:not(:last-child) {
+  margin-right: 2rem;
+}
+.wizard.horizontal .wizard-step-content {
+  margin-top: 0.75rem;
+  max-width: 200px;
+}
+.wizard.horizontal .wizard-step-connector {
+  position: absolute;
+  top: 20px;
+  left: calc(50% + 20px);
+  width: calc(100% - 40px);
+  height: 2px;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  z-index: 1;
+}
+.wizard.vertical .wizard-steps {
+  display: flex;
+  flex-direction: column;
+}
+.wizard.vertical .wizard-step {
+  display: flex;
+  align-items: flex-start;
+  text-align: left;
+  position: relative;
+  padding-bottom: 2rem;
+}
+.wizard.vertical .wizard-step:last-child {
+  padding-bottom: 0;
+}
+.wizard.vertical .wizard-step-content {
+  margin-left: 1rem;
+  flex: 1;
+}
+.wizard.vertical .wizard-step-connector {
+  position: absolute;
+  top: 40px;
+  left: 19px;
+  bottom: -2rem;
+  width: 2px;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  z-index: 1;
+}
+
+.wizard-header {
+  margin-bottom: 2rem;
+}
+
+.wizard-step {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.wizard-step.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.wizard-step:hover:not(.disabled) .wizard-step-indicator {
+  box-shadow: 0 0 0 8px var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+}
+
+.wizard-step-indicator {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 2;
+}
+.wizard-step-indicator .material-icons {
+  font-size: 1.25rem;
+}
+.wizard-step-indicator .wizard-step-number {
+  font-weight: 600;
+}
+
+.wizard-step.active .wizard-step-indicator {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+}
+.wizard-step.active .wizard-step-title {
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  font-weight: 600;
+}
+
+.wizard-step.completed .wizard-step-indicator {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+}
+.wizard-step.completed .wizard-step-connector {
+  background: var(--mm-primary-color, #26a69a);
+}
+
+.wizard-step.error .wizard-step-indicator {
+  background: #f44336;
+  color: #ffffff;
+}
+.wizard-step.error .wizard-step-title {
+  color: #f44336;
+}
+
+.wizard-step-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin-bottom: 0.25rem;
+  line-height: 1.3;
+}
+
+.wizard-step-subtitle {
+  font-size: 0.75rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
+.wizard-step-optional {
+  font-size: 0.625rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wizard-body {
+  flex: 1;
+  margin-bottom: 2rem;
+}
+.wizard-body .input-field {
+  margin-bottom: 1.5rem;
+}
+.wizard-body .input-field input, .wizard-body .input-field textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+.wizard-body .input-field label {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  transition: all 0.3s ease;
+}
+.wizard-body .input-field label.active {
+  color: var(--mm-primary-color, #26a69a);
+  transform: translateY(-14px) scale(0.8);
+}
+.wizard-body .row {
+  margin-bottom: 0;
+}
+.wizard-body .row .col {
+  padding: 0 0.75rem;
+}
+.wizard-body .row .col:first-child {
+  padding-left: 0;
+}
+.wizard-body .row .col:last-child {
+  padding-right: 0;
+}
+
+.wizard-step-panel {
+  animation: wizard-slide-in 0.3s ease;
+}
+
+@keyframes wizard-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.wizard-footer {
+  border-top: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  padding-top: 1.5rem;
+}
+
+.wizard-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+.wizard-navigation .wizard-btn-previous,
+.wizard-navigation .wizard-btn-skip {
+  margin-right: auto;
+}
+.wizard-navigation .wizard-btn-next,
+.wizard-navigation .wizard-btn-complete {
+  margin-left: auto;
+}
+.wizard-navigation .wizard-btn-next .material-icons,
+.wizard-navigation .wizard-btn-complete .material-icons {
+  margin-right: 0.5rem;
+  animation: wizard-loading 1s infinite linear;
+}
+
+@keyframes wizard-loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.wizard.compact .wizard-step-indicator {
+  width: 32px;
+  height: 32px;
+  font-size: 0.75rem;
+}
+.wizard.compact .wizard-step-indicator .material-icons {
+  font-size: 1rem;
+}
+.wizard.compact .wizard-step-title {
+  font-size: 0.75rem;
+}
+.wizard.compact .wizard-step-subtitle {
+  font-size: 0.625rem;
+}
+.wizard.compact .wizard-header {
+  margin-bottom: 1.5rem;
+}
+.wizard.compact.horizontal .wizard-step-connector {
+  top: 16px;
+}
+.wizard.compact.vertical .wizard-step-connector {
+  top: 32px;
+  left: 15px;
+}
+
+.wizard.large .wizard-step-indicator {
+  width: 48px;
+  height: 48px;
+  font-size: 1rem;
+}
+.wizard.large .wizard-step-indicator .material-icons {
+  font-size: 1.5rem;
+}
+.wizard.large .wizard-step-title {
+  font-size: 1rem;
+}
+.wizard.large .wizard-step-subtitle {
+  font-size: 0.875rem;
+}
+.wizard.large .wizard-header {
+  margin-bottom: 2.5rem;
+}
+.wizard.large.horizontal .wizard-step-connector {
+  top: 24px;
+}
+.wizard.large.vertical .wizard-step-connector {
+  top: 48px;
+  left: 23px;
+}
+
+@media (max-width: 768px) {
+  .wizard.horizontal .wizard-steps {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .wizard.horizontal .wizard-step {
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    margin-right: 0;
+    margin-bottom: 1rem;
+  }
+  .wizard.horizontal .wizard-step:last-child {
+    margin-bottom: 0;
+  }
+  .wizard.horizontal .wizard-step-content {
+    margin-top: 0;
+    margin-left: 1rem;
+    max-width: none;
+  }
+  .wizard.horizontal .wizard-step-connector {
+    display: none;
+  }
+}
+[data-theme=dark] .wizard-step.error .wizard-step-title {
+  color: #f48fb1;
+}
+[data-theme=dark] .wizard-step.error .wizard-step-indicator {
+  background: #f48fb1;
+  color: #000000;
+}
+[data-theme=dark] .wizard-footer {
+  border-color: var(--mm-border-color, rgba(255, 255, 255, 0.12));
+}
+
+.wizard-step:focus {
+  outline: 2px solid var(--mm-primary-color, #26a69a);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.wizard-step[aria-disabled=true] {
+  pointer-events: none;
 }
 
-/* Legacy styles kept for applications using old Materialize TimePicker */
+.wizard-step-indicator[aria-current=step] {
+  box-shadow: 0 0 0 4px var(--mm-primary-color-light, rgba(38, 166, 154, 0.2));
+}