:root {
  /* Brand colors — aus dem vorhandenen Kommentar übernommen */
  --tm-primary:        #198754;
  --tm-primary-dark:   #105233;
  --tm-surface-mid:    #bef3db;   /* PrimaryMiddleLight */
  --tm-surface-light:  #e9fbf3;   /* PrimaryLight */
  --tm-page-bg:        #F8F8F8;

  /* Border radius — einheitliche Skala */
  --tm-radius-sm:      6px;
  --tm-radius-md:      8px;
  --tm-radius-lg:      12px;
  --tm-radius-xl:      16px;

  /* Spacing */
  --tm-space-xs:       4px;
  --tm-space-sm:       8px;
  --tm-space-md:       16px;
  --tm-space-lg:       24px;
  --tm-space-xl:       32px;

  /* Layout */
  --tm-sidebar-width:  300px;
  --tm-navbar-height:  64px;

  /* ── treecloud design tokens ── */
  --font-serif:        'Source Serif 4', Georgia, serif;
  --font-mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;
  --tc-pad:            clamp(1.25rem, 4vw, 2rem);
  --tc-max-w:          1100px;

  /* Ink / on-dark colors */
  --ink:               #1a1814;
  --ink-soft:          #4a473e;
  --ink-mute:          #807a6a;
  --on-deep-strong:    #ede6d0;
  --on-deep-soft:      rgba(237, 230, 208, 0.66);

  /* Forest palette */
  --forest-50:         #f0fdf6;
  --forest-100:        #dcfce9;
  --forest-200:        #bef3db;
  --forest-300:        #86efbc;
  --forest-400:        #4ade8a;
  --forest-500:        #1d9e75;
  --forest-600:        #198754;
  --forest-700:        #156b43;
  --forest-800:        #105233;
  --forest-900:        #0a3521;
  --forest-950:        #051a10;

  /* Stone palette */
  --stone-50:          #fafaf9;
  --stone-100:         #f5f5f4;
  --stone-200:         #e7e5e4;
  --stone-300:         #d6d3d1;
  --stone-400:         #a8a29e;
  --stone-500:         #78716c;
  --stone-600:         #57534e;
  --stone-700:         #44403c;
  --stone-900:         #1c1917;

  /* Landing page radii (larger scale than app) */
  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-lg:         16px;
  --radius-xl:         24px;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
    font-family: "Inter", sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body:not(.tc-landing) *:not(.fa-solid):not(.fa):not(.e-icons) {
    font-family: "Inter";
}

body {
    margin-bottom: 60px;
    background-color: var(--tm-page-bg);
    color: #050505;
}

.e-bigger {
    font-size: 1rem;
}

.main-content {
    margin-left: var(--tm-sidebar-width);
    margin-top: calc(var(--tm-navbar-height) + var(--tm-space-sm));
    padding: 0 var(--tm-space-lg) var(--tm-space-xl);
    overflow-y: auto;
    height: calc(100vh - var(--tm-navbar-height));
}

/*Button*/
.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none;
}

/*Hyperlink*/
.no-a-decoration, .no-a-decoration:hover {
    text-decoration: none;
    color: inherit;
}

/*Grid*/
.e-grid {
    border: 0;
    border-radius: var(--tm-radius-md);
}

    .e-grid .e-gridcontent, .e-grid .e-table {
        background-color: var(--tm-surface-light);
    }

    .e-grid .e-gridheader {
        border-top-left-radius: var(--tm-radius-md);
        border-top-right-radius: var(--tm-radius-md);
        padding: 10px;
        background-color: var(--tm-surface-mid);
    }

        .e-grid .e-gridheader .e-headercell {
            background-color: var(--tm-surface-mid);
        }

    .e-grid .e-gridpager {
        background-color: var(--tm-surface-light);
    }

    .e-grid .e-pagercontainer {
        border: none;
        background-color: var(--tm-surface-light);
    }

    .e-grid .e-content table {
        padding: 0px 10px;
    }

.e-pagercontainer .e-icons {
    background-color: var(--tm-surface-light);
    border: none !important;
}

.e-pager .e-numericitem {
    color: #adb5bd;
    background-color: var(--tm-surface-light);
    padding: 15px !important;
}

    .e-pager .e-numericitem:not(.e-currentitem) {
        border: none !important;
    }

    .e-pager .e-numericitem:hover {
        color: #fff;
    }

    .e-pager .e-numericitem.e-currentitem {
        color: #fff;
        border: none !important;
        background-color: #31373d;
    }

.e-pager div.e-icons:not(.e-disable) {
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

.e-grid .e-pager {
    padding: 10px;
    border-bottom-left-radius: var(--tm-radius-md);
    border-bottom-right-radius: var(--tm-radius-md);
}

/* Widget */
.widget {
    border-radius: var(--tm-radius-lg);
    background-color: var(--tm-surface-light);
    border: .5px solid var(--tm-surface-mid);
}

    .widget.summary > div:first-child {
        background-color: var(--tm-surface-mid);
        padding: var(--tm-space-md);
        border-top-left-radius: var(--tm-radius-lg);
        border-bottom-left-radius: var(--tm-radius-lg);
    }

        .widget.summary > div:first-child i {
            font-weight: bold;
        }

    .widget.chart {
        padding: var(--tm-space-sm);
    }


/* image carousel */
.default-carousel-section .carousel-sample {
    margin: 0 auto 2em;
    max-width: 1000px;
    height: 620px;
}

.default-carousel .e-carousel-items .e-carousel-item .img-container {
    height: 100%;
}

.default-carousel .e-carousel-items .e-carousel-item .img-caption {
    bottom: 4em;
    color: #fff;
    font-size: 16pt;
    height: 2em;
    position: relative;
    padding: 0.3em 1em;
    text-align: center;
    width: 100%;
}

.e-carousel-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carousel-img {
    max-width: 1000px;
    max-height: 600px;
    vertical-align: middle;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled),
.e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled),
.e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
    background-color: var(--tm-primary);
}

.e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
    border-color: #AAAAAA;
    background-color: #AAAAAA;
}

.e-carousel .e-carousel-indicators.e-default .e-indicator-bar.e-active .e-indicator div {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

/* Page header pattern */
.tm-page-header {
  padding-bottom: var(--tm-space-md);
  margin-bottom: var(--tm-space-md);
  border-bottom: .5px solid var(--tm-surface-mid);
}

.tm-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tm-primary-dark);
  margin: 0;
}

.tm-breadcrumb {
  font-size: .75rem;
  color: #888;
  margin-bottom: var(--tm-space-xs);
}

/* KPI card */
.tm-kpi-card {
  background-color: var(--tm-surface-light);
  border: .5px solid var(--tm-surface-mid);
  border-radius: var(--tm-radius-md);
  padding: var(--tm-space-md);
}

.tm-kpi-card .tm-kpi-label {
  font-size: .75rem;
  color: #666;
  margin-bottom: var(--tm-space-xs);
}

.tm-kpi-card .tm-kpi-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tm-primary-dark);
  line-height: 1.2;
}

/* Info panel */
.tm-info-panel {
  border: .5px solid var(--tm-surface-mid);
  border-radius: var(--tm-radius-lg);
  overflow: hidden;
}

.tm-info-panel-header {
  background: var(--tm-surface-light);
  padding: var(--tm-space-sm) var(--tm-space-md);
  font-weight: 600;
  font-size: .85rem;
  color: var(--tm-primary-dark);
  border-bottom: .5px solid var(--tm-surface-mid);
}

.tm-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tm-space-sm) var(--tm-space-md);
  border-bottom: .5px solid rgba(0, 0, 0, .05);
  font-size: .8rem;
}

.tm-info-row:last-child {
  border-bottom: none;
}

.tm-info-row .label {
  color: #777;
}

.tm-info-row .value {
  font-weight: 500;
}