/*
 * default skin
 * @skin-type light
 */

body {
  /* Color palette */
  --color-primary: #04a;
  --color-primary-light: #07f;
  --color-primary-dark: #038;
  --color-primary-darker: #027;
  --color-primary-bright: #37c;
  --color-primary-bright-alt: #039;

  --color-bg-body: #f5f5f5;
  --color-bg-surface: #fff;
  --color-bg-input: #04a;
  --color-bg-disabled: #ccc;
  --color-bg-table-header: #f8f9fa;
  --color-bg-table-even: #f9f9f9;
  --color-bg-progress: #e9ecef;
  --color-bg-progress-bar: #007bff;

  --color-text-primary: #333;
  --color-text-primary-light: #eee;
  --color-text-heading: #222;
  --color-text-popup: #222;
  --color-text-popup-hover: #111;

  --color-border: #ddd;
  --color-border-input: #ccc;
  --color-border-focus: #07f;

  --color-scrollbar-thumb: #04a;
  --color-scrollbar-track: #fff;

  --color-table-row-selected: #58f3;
  --color-table-row-hover: #58f2;

  --color-shadow-focus: rgba(0, 123, 255, 0.3);

  /* Gradient color stops */
  --color-gradient-button-start: #039;
  --color-gradient-button-end: #04a;
  --color-gradient-button-hover-start: #027;
  --color-gradient-button-hover-end: #038;

  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1em;
  background-color: var(--color-bg-body);
  color: var(--color-text-primary);

  /* Dialog system CSS variables */
  --dialog-overlay-bg: rgba(0, 0, 0, 0.5);
  --dialog-bg: #fff;
  --dialog-text: #333;
  --dialog-border: #ddd;
  --dialog-border-radius: 8px;
  --dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  color: var(--color-text-heading);
}

hr {
  border-top: 1px solid var(--color-border);
  margin: 1.5em 0;
}

fieldset, legend {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

input, select, button, textarea {
  background-color: var(--color-bg-input);
  color: var(--color-text-primary-light);
  border: 1px solid var(--color-border-input);
  border-radius: 5px;
}
input:focus, select:focus, button:focus, textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 5px var(--color-shadow-focus);
}
button:disabled {
  background-color: var(--color-bg-disabled);
}
select, button,
input[type="submit"],
input[type="reset"] {
  background-color: var(--color-primary-bright);
  background-image: linear-gradient(to bottom,
    var(--color-gradient-button-start),
    var(--color-gradient-button-end));
}
select:hover, button:hover {
  background-image: linear-gradient(to bottom,
    var(--color-gradient-button-hover-start),
    var(--color-gradient-button-hover-end));
}

.menu {
  background-color: var(--color-primary);
  border-radius: 0.5em;
  padding: 0.5em 0;
}
.menu ul li a {
  color: var(--color-text-primary-light);
}

table {
  background-color: var(--color-bg-surface);
  margin: .5em 0;
}
th, td {
  padding: .5em;
  border: 1px solid var(--color-border);
}
th {
  background-color: var(--color-bg-table-header);
  color: var(--color-text-primary);
}
table.simple {
  line-height: 1.2em;
}

.progress-bar {
  background-color: var(--color-bg-progress);
  border-radius: 0.5em;
}
.progress-bar .progress {
  background-color: var(--color-bg-progress-bar);
}

.widget.fullscreen,
.leaflet-container {
  background: var(--color-bg-surface) !important;
}

.tooltip, .popup {
  border-color: var(--color-border);
  color: var(--color-text-popup);
}

.tooltip {
  background-color: var(--color-primary);
  color: var(--color-text-primary-light);
}