commit 6a00481221c7569ee693737f1637b888b9292b6d
Author: Stephan Yelle <syelle@noreply.localhost>
Date:   Wed Nov 26 17:50:04 2025 -0500

    Add samy.css

diff --git a/samy.css b/samy.css
new file mode 100644
index 0000000..8567d8b
--- /dev/null
+++ b/samy.css
@@ -0,0 +1,244 @@
+:root {
+  /* Cool Palette */
+  --background-color: rgba(18, 18, 18, 1);
+  --border-color: rgba(255,127,0,0.25);
+  /* Neutral Colors */
+  --white-color: rgba(255,255,255);
+  --gray-color: rgba(102,102,102);
+  --dark-gray-color: rgba(51,51,51);
+  --light-gray-color: rgba(187,187,187);
+  /* Sidebar Button Colors */
+  --btn-sidebar-light-gray: rgba(68,68,68);
+  --btn-sidebar-blue: rgba(30,144,255,1);
+  --btn-hover: rgba(0,86,179,1);
+  --btn-hover-scale: 1.05;
+  /* Button Colors */
+  --btn-success: rgba(40,167,69);
+  --btn-success-disabled: rgba(108,117,125);
+  --btn-danger: rgba(220,53,69);
+
+  /* Monkey + status panel settings */
+  --monkey-size: 160px;     /* size of SAMY */
+  --monkey-bottom: 135px;   /* how high from bottom of sidebar */
+  --status-gap: 20px;       /* space between status box and monkey */
+  --status-height: 140px;   /* max height of status box */
+}
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--background-color);
+  color: var(--white-color);
+  height: 100%;
+  overflow: hidden;
+}
+
+.logo-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  padding: 20px;
+}
+
+.logo-container img {
+  max-width: 300px;
+  height: auto;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: var(--gray-color);
+  margin-top: 0.5em;
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 200px;
+  background: var(--background-color);
+  padding: 10px;
+  position: relative;
+  padding-bottom: calc(var(--monkey-bottom) + var(--monkey-size) + var(--status-gap) + 10px);
+}
+
+/* Status panel above monkey */
+#status-box {
+  position: absolute;
+  left: 10px;
+  bottom: calc(var(--monkey-bottom) + var(--monkey-size) + var(--status-gap));
+  width: calc(100% - 20px);
+  max-height: var(--status-height);
+  overflow-y: auto;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.06);
+  font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol',system-ui,sans-serif;
+  font-size: 12px;
+  line-height: 1.35;
+  z-index: 1;
+}
+
+/* SAMY bottom-left */
+.sidebar::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  bottom: var(--monkey-bottom);
+  width: var(--monkey-size);
+  height: var(--monkey-size);
+  background-image: url("https://git.svstools.com/syelle/Logo/raw/branch/main/SAMY.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  opacity: 0.95;
+  pointer-events: none;
+}
+
+.sidebar button {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 10px;
+  color: var(--white-color);
+  background: var(--btn-sidebar-light-gray);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.sidebar button.active {
+  background: var(--btn-sidebar-blue);
+}
+
+.sidebar button:hover {
+  background: var(--btn-hover);
+  transform: scale(var(--btn-hover-scale));
+}
+
+.content {
+  position: relative;
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  max-height: calc(100vh - 50px);
+}
+
+/* Floating buttons (Exit / Run) */
+.fixed-buttons {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  gap: 10px;
+  z-index: 1000;
+}
+
+.exit-button,
+.run-button {
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  color: var(--white-color);
+}
+
+.exit-button {
+  background-color: var(--btn-danger);
+}
+
+.run-button {
+  background-color: var(--btn-success);
+}
+
+/* Tabs */
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Columns & checkboxes */
+.columns-container {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.column {
+  flex: 1;
+  max-width: 45%;
+  border: 2px solid var(--border-color);
+  border-radius: 8px;
+  padding: 10px;
+  background-color: var(--dark-gray-color);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+/* Inputs / buttons in password & dropdown areas */
+#PasswordContainer,
+#dattoRmmContainer {
+  margin-top: 1em;
+}
+
+#PasswordContainer input,
+#PasswordContainer button,
+#dattoRmmContainer select {
+  background-color: var(--dark-gray-color);
+  color: var(--white-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 8px;
+  font-size: 14px;
+}
+
+#PasswordContainer input {
+  width: 40%;
+  max-width: 200px;
+}
+
+#PasswordContainer button,
+.go-button {
+  background-color: var(--btn-sidebar-blue);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#PasswordContainer button:hover,
+.go-button:hover {
+  background-color: var(--btn-hover);
+}
+
+/* Tag line */
+.tagline {
+  font-size: 1.2rem;
+  color: var(--light-gray-color);
+  font-weight: bold;
+  text-align: center;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+  }
+}