.content {
  margin-top: 50px;
}

.ui.container.content {
  width: auto !important;
  max-width: none !important;
  margin-left: 1.5em !important;
  margin-right: 1.5em !important;
}

button.supercompact {
  padding: 5px !important;
}

.overflow {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0;
  line-height: 1;
}

/* Dark theme transitions */
body, .ui.menu, .ui.container, .ui.table, .ui.segment, .ui.form input,
.ui.form select, .ui.dropdown, .ui.button {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* ===== DARK THEME ===== */
body[data-theme="dark"] {
  background-color: #1a1a1a;
  color: #ececec;
}

/* Navigation */
body[data-theme="dark"] .ui.inverted.menu {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333;
}

/* Headings */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] .header {
  color: #f5f5f5;
}

/* Tables */
body[data-theme="dark"] .ui.table {
  background: #242424;
  color: #ececec;
  border-color: #333;
}
body[data-theme="dark"] .ui.table thead th {
  background: #2c2c2c;
  color: #f5f5f5;
  border-color: #333;
}
body[data-theme="dark"] .ui.table td {
  border-color: #333;
  color: #ddd;
}
body[data-theme="dark"] .ui.table tr:hover td {
  background: rgba(255,255,255,0.04) !important;
}
body[data-theme="dark"] .ui.striped.table tbody tr:nth-child(2n) {
  background: rgba(255,255,255,0.02);
}

/* Positive rows */
body[data-theme="dark"] .ui.table tr.positive {
  background: rgba(40, 160, 70, 0.12) !important;
}
body[data-theme="dark"] .ui.table tr.positive td {
  color: #ddd;
}
body[data-theme="dark"] .ui.table tr.positive:hover td {
  background: rgba(40, 160, 70, 0.20) !important;
}

/* Negative rows */
body[data-theme="dark"] .ui.table tr.negative {
  background: rgba(220, 50, 50, 0.10) !important;
}
body[data-theme="dark"] .ui.table tr.negative td {
  color: #ddd;
}
body[data-theme="dark"] .ui.table tr.negative:hover td {
  background: rgba(220, 50, 50, 0.18) !important;
}

/* Links */
body[data-theme="dark"] a {
  color: #6cb8f0;
}
body[data-theme="dark"] a:hover {
  color: #90ccf8;
}
body[data-theme="dark"] .ui.table a {
  color: #6cb8f0;
}
body[data-theme="dark"] .ui.table tr.positive a,
body[data-theme="dark"] .ui.table tr.negative a {
  color: #6cb8f0;
}
body[data-theme="dark"] .ui.inverted.menu a.item {
  color: rgba(255,255,255,0.9);
}

/* Forms */
body[data-theme="dark"] .ui.form input[type="text"],
body[data-theme="dark"] .ui.form input[type="password"],
body[data-theme="dark"] .ui.form input[type="email"],
body[data-theme="dark"] .ui.form input[type="number"],
body[data-theme="dark"] .ui.form input[type="date"],
body[data-theme="dark"] .ui.form select,
body[data-theme="dark"] .ui.input input,
body[data-theme="dark"] .ui.icon.input input {
  background: #2a2a2a;
  color: #ececec;
  border-color: #444;
}
body[data-theme="dark"] .ui.form input:focus,
body[data-theme="dark"] .ui.input input:focus {
  background: #2a2a2a;
  color: #f5f5f5;
  border-color: #5aa8e0;
}
body[data-theme="dark"] .ui.form .field > label,
body[data-theme="dark"] .ui.form label {
  color: #ececec !important;
}

/* Dropdowns */
body[data-theme="dark"] .ui.dropdown,
body[data-theme="dark"] .ui.selection.dropdown {
  background: #2a2a2a;
  color: #ececec;
  border-color: #444;
}
body[data-theme="dark"] .ui.dropdown .menu {
  background: #2c2c2c;
  border-color: #444;
}
body[data-theme="dark"] .ui.dropdown .menu > .item {
  color: #ddd;
  border-color: #333;
}
body[data-theme="dark"] .ui.dropdown .menu > .item:hover {
  background: #383838;
  color: #f5f5f5;
}
body[data-theme="dark"] .ui.dropdown .menu > .item.active {
  background: #3a3a3a;
  color: #f5f5f5;
}
body[data-theme="dark"] .ui.dropdown .text {
  color: #ececec;
}

/* Buttons */
body[data-theme="dark"] .ui.button,
body[data-theme="dark"] .ui.basic.button {
  background: #383838;
  color: #ececec;
  border-color: #444;
}
body[data-theme="dark"] .ui.button:hover,
body[data-theme="dark"] .ui.basic.button:hover {
  background: #484848;
  color: #fff;
}
body[data-theme="dark"] .ui.primary.button {
  background: #2185d0;
  color: #fff;
}
body[data-theme="dark"] .ui.primary.button:hover {
  background: #1a7ac4;
}
body[data-theme="dark"] .ui.teal.button {
  background: #00b5ad;
  color: #fff;
}
body[data-theme="dark"] .ui.red.button {
  background: #db2828;
  color: #fff;
}

/* Segments */
body[data-theme="dark"] .ui.segment,
body[data-theme="dark"] .ui.stacked.segment {
  background: #242424;
  color: #ececec;
  border-color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Messages */
body[data-theme="dark"] .ui.message {
  background: #2c2c2c;
  color: #ececec;
  border-color: #444;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body[data-theme="dark"] .ui.warning.message {
  background: #3a3520;
  color: #f0d870;
  border-color: #5a4a20;
}

/* Grid (auth page) */
body[data-theme="dark"] .ui.grid {
  color: #ececec;
}

/* Icons in inputs */
body[data-theme="dark"] .ui.icon.input > i.icon {
  color: #999;
}

/* General text */
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] div,
body[data-theme="dark"] label {
  color: #ececec;
}

/* Modals */
body[data-theme="dark"] .ui.modal {
  background: #242424;
}
body[data-theme="dark"] .ui.modal > .header {
  background: #1e1e1e;
  color: #f5f5f5;
  border-bottom: 1px solid #444;
}
body[data-theme="dark"] .ui.modal > .content {
  background: #242424;
  color: #ececec;
}
body[data-theme="dark"] .ui.modal > .actions {
  background: #1e1e1e;
  border-top: 1px solid #444;
}
body[data-theme="dark"] .ui.modal .ui.form input[type="text"],
body[data-theme="dark"] .ui.modal .ui.form input[type="email"],
body[data-theme="dark"] .ui.modal .ui.form input[type="number"] {
  background: #2a2a2a;
  color: #ececec;
  border-color: #444;
}
body[data-theme="dark"] .ui.modal .ui.form input:focus {
  background: #2a2a2a;
  color: #f5f5f5;
  border-color: #5aa8e0;
}
body[data-theme="dark"] .ui.modal .ui.form label {
  color: #ececec !important;
}
body[data-theme="dark"] .ui.dimmer {
  background: rgba(0, 0, 0, 0.7);
}

/* Login page */
body[data-theme="dark"] .ui.stacked.segment::after {
  background: #1e1e1e;
  border-color: #333;
}
body[data-theme="dark"] .ui.left.icon.input input::placeholder {
  color: #777;
}
body[data-theme="dark"] .ui.teal.header .content {
  color: #f5f5f5;
}