:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --bg-color: #f8f9fa;
    --panel-bg: #ffffff;
    --border-color: #dee2e6;
    --text-color: #212529;
    --light-text: #6c757d;
}

/* --- Base styles are identical to the homepage --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f9fafb; color: #374151; line-height: 1.6;}
        ul { list-style: none; }
        
        /* --- Page Layout --- */
        .page-container { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 0.1rem; padding-right: 0.1rem;}
        
        /* --- Header & Navigation --- */
        .main-header { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            flex-wrap: wrap; /* Allows menu to drop to the next line on mobile */
            padding: 1.5rem 0; 
            border-bottom: 2px solid #d1d5db;
        }
        .main-header a { color: inherit; text-decoration: none; }
        .site-title { font-size: 1.5rem; font-weight: 700; color: #111827; }
        .menu-toggle-input { display: none; }
        .hamburger-menu { cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; width: 2rem; height: 1.75rem; z-index: 50; }
        .hamburger-menu .bar { height: 3px; width: 100%; background-color: #111827; border-radius: 10px; }

        /* Main Nav Menu: Collapsible on mobile, no animation */
        .nav-menu {
            display: none; /* Hidden by default */
            width: 100%;
            margin-top: 1.5rem;
        }
        .menu-toggle-input:checked ~ .nav-menu { display: block; } /* Show when toggled */

        .nav-menu ul { display: flex; flex-direction: column; font-size: 1.125rem; }
        .nav-menu li:not(:last-child) { margin-bottom: 1rem; }
        .nav-menu a { font-weight: 500; color: #374151; transition: color 0.2s; padding: 0.25rem 0; }
        .nav-menu a:hover { color: #2563eb; }
        
        /* Style for the active main menu item */
        .nav-menu .active-link { color: #2563eb; font-weight: 700; }

        /* --- Horizontal Sub-menu with Hamburger on Mobile --- */
        .sub-menu-nav {
            width: 100%;
            padding: 1rem 0;
            border-bottom: 2px solid #d1d5db;
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
        }

        /* Title for the sub-menu section, visible on mobile */
        .sub-menu-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #111827;
        }

        /* Hamburger for the sub-menu, visible only on mobile */
        .submenu-hamburger {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 1.8rem;
            height: 1.5rem;
        }
        .submenu-hamburger .bar {
            height: 2px;
            width: 100%;
            background-color: #374151;
            border-radius: 10px;
        }

        /* Sub-menu list: Hidden on mobile by default */
        .sub-menu-nav ul {
            display: none;
            flex-direction: column;
            width: 100%;
            margin-top: 1rem;
            gap: 0.5rem;
        }

        /* Show the sub-menu list when its toggle is checked */
        #submenu-toggle:checked ~ ul {
            display: flex;
        }
        
        .sub-menu-nav a {
            padding: 0.5rem 0;
            font-weight: 500;
            color: #4b5563; /* gray-600 */
            transition: color 0.2s;
            text-decoration: none;
            /* border-bottom: 2px solid transparent; */
        }
        
        .sub-menu-nav a:hover {
            color: #111827; /* gray-900 */
        }

        .sub-menu-nav .active-sub-link {
            font-weight: 600;
            color: #2563eb; /* blue-600 */
        }

        /* --- Main Content Area --- */
        .main-content {
            width: 100%;
            padding-bottom: 3rem;
        }
        .main-article h1 {font-size: 1.8rem; font-weight: 600; margin-bottom: 0.6rem; color: #111827; }
        .main-article h2 {font-size: 1.6rem; font-weight: 600; margin-bottom: 0.5rem; color: #111827; }
        .main-article h3 {font-size: 1.4rem; font-weight: 600; margin-bottom: 0.4rem; color: #111827; }
        .main-article h4 {font-size: 1.2rem; font-weight: 600; margin-bottom: 0.2rem; color: #111827; }
        .main-article p {margin-bottom: 1.0rem; }
        .main-article p.breadcrumb {margin-bottom:0.5rem;font-size:1.2rem;font-weight:500;}
        p.breadcrumb a {text-decoration: none}
        p.breadcrumb a:hover {text-decoration: underline}

        /* --- Footer (identical) --- */
        .main-footer { text-align: center; padding: 2rem 0; border-top: 2px solid #d1d5db; /* More pronounced divider */ }
        .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
        .social-links a { transition: opacity 0.2s ease-in-out; }
        .social-links a:hover { opacity: 0.8; }
        .social-links svg { width: 1.5rem; height: 1.5rem; }
        .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
        .footer-links a { color: #4b5563; font-weight: 500; transition: color 0.2s; }
        .footer-links a:hover { color: #111827; }
        .copyright { font-size: 0.875rem; color: #6b7280; }
        .main-footer a { color: inherit; text-decoration: none; }

        /* --- Responsive Styles (Desktop) --- */
        @media (min-width: 768px) {
            .page-container { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 0.2rem; padding-right: 0.2rem; }

            .hamburger-menu { display: none; }

            /* Desktop main nav */
            .nav-menu { 
                display: flex;
                width: auto;
                margin-top: 0;
            }
            .nav-menu > ul { flex-direction: row; font-size: 1rem; gap: 2rem; align-items: center; }
            .nav-menu li:not(:last-child) { margin-bottom: 0; }

            /* On desktop, hide the sub-menu hamburger and title */
            .sub-menu-title,
            .submenu-hamburger {
                display: none;
            }

            /* On desktop, show the sub-menu as a horizontal list */
            .sub-menu-nav {
                justify-content: flex-start;
            }
            .sub-menu-nav ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: auto;
                margin-top: 0;
                gap: 2rem;
            }
            .sub-menu-nav a {
                padding-bottom: 0.75rem; /* Space for the active border */
            }
            .sub-menu-nav .active-sub-link {
                border-bottom-color: #2563eb;
            }
        }

        .chart-container {
            width: 100%;
            max-width: 800px;
            height: 400px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
.default_form  {
      max-width: 600px;
      background: #e6e6e6;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

.default_form     .form-group {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
    }

.default_form    label {
      margin-bottom: 5px;
      font-weight: bold;
    }

.default_form    input, select, textarea, button {
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: auto;
    }

.default_form    small {
      margin-top: 0px;
      color: #555;
      font-size: 0.875rem;
    }

.submit-button {
    color: #ffffff; /* text-white */
    background-color: #007bff;
    width:auto;
    min-width:9em;
    white-space: nowrap;
}
.submit-button:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}
.submit-button[name="cancel"] {
    background-color: #6B7280;
}
.submit-button[name="cancel"]:hover {
    background-color: #4B5563;
}
.submit-button[name="delete"],
.submit-button[name="confirm"] {
    background-color: #E63946; /* red */
}
.submit-button[name="delete"]:hover,
.submit-button[name="confirm"]:hover {
    background-color: #C81D25; /* more red */
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(66, 153, 225, 0.5); /* focus:ring-blue-500 */
}

.default_form_error {font-weight:bold; color:red;}
.default_form_comment {padding-left:0.8em;}

small img.icon {height:16px;width:auto;vertical-align:middle;}
.tslist img {height:24px;width:auto;vertical-align:middle;}
.tslist td {padding-right:1em;}
.tslist th {text-align:left;border-bottom:1px solid black}
.tslist a {text-decoration: none}
.tslist a:hover {text-decoration: underline}
.tsvalues td:nth-child(2) {text-align:right}
.tsvalues th:nth-child(2) {text-align:center}

.btn { display: inline-block; padding: 8px 12px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; text-align: center; font-size: 1rem; }
.btn:hover { opacity: 0.9; }
.btn.btn-primary { background-color: var(--primary-color); }
.btn.btn-secondary { background-color: var(--secondary-color); }
.btn.btn-danger { background-color: #dc3545; }
.btn.btn-success { background-color: var(--success-color); }
.btn.btn-small { padding: 5px 10px; font-size: 0.9rem; }


  .button-link {
    display: inline-block;
    padding: 5px 12px;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    /* font-family: sans-serif; /* Or your preferred font */
    font-size: 1rem;
    /* font-weight: bold; */
  }
.button-link:hover {  background-color: #1d4ed8; }

.btn-link-style {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #0000ee; 
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    outline: inherit;
    vertical-align: middle;
    transition: color 0.2s ease;
}
.btn-link-style:hover {
    text-decoration: underline;
    color: #c4041b; /* Approximate hex color of your SVG filter */
}
.btn-link-style:active {
    color: #ee0000; /* Standard browser 'active' red */
}
.btn-link-style img {
    display: block;
}
.action-link {
    transition: color 0.2s ease;
}
.action_icon:hover,
.action_link:hover .action_icon {
    filter: invert(18%) sepia(82%) saturate(3649%) hue-rotate(211deg) brightness(93%) contrast(106%);
}
.delete_icon:hover {
  filter: invert(18%) sepia(91%) saturate(2311%) hue-rotate(346deg) brightness(91%) contrast(90%);
}
.btn-link-style:hover .delete_icon {
    filter: invert(18%) sepia(91%) saturate(2311%) hue-rotate(346deg) brightness(91%) contrast(90%);
}

/* pagination */
  .dt-controls {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start; /* Neatly aligned to the left */
      align-items: center;
      gap: 20px; /* Gives enough breathing room between elements */
      margin: 15px 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 0.9em;
      color: #333;
  }
  .dt-info {
      color: #333;
  }
  .dt-pagination {
      display: flex;
      margin: 0;
      padding: 0;
      list-style: none;
      white-space: nowrap;
  }
  .dt-pagination a, .dt-pagination strong, .dt-pagination span {
      box-sizing: border-box;
      display: inline-block;
      min-width: 1.0em;
      padding: 0.5em 0.5em;
      margin-left: 2px;
      text-align: center;
      text-decoration: none !important;
      cursor: pointer;
      color: #333 !important;
      border: 1px solid transparent;
      border-radius: 2px;
  }
  .dt-pagination > :first-child {
      margin-left: 0.5em;
  }
  .dt-pagination a:hover:not(.dt-disabled) {
      border: 1px solid #111;
      background-color: #f9f9f9;
      background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  }
  .dt-pagination strong.dt-active {
      border: 1px solid #979797;
      background-color: #eee;
      background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
      font-weight: normal;
  }
  .dt-pagination a.dt-disabled {
      color: #666 !important;
      cursor: default;
  }
  .dt-pagination span.dt-ellipsis {
      cursor: default;
  }
  
  /* Flexbox Grid for Dynamic Columns */
  .ts-grid-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap; /* Forces columns to stay on one row */
      justify-content: flex-start; /* Keeps columns neatly aligned to the left */
      gap: 8px; 
      align-items: flex-start;
      margin-top: 15px;
      width: 100%;
      overflow-x: auto; /* Fallback to allow horizontal scrolling on tiny screens */
  }
  .ts-grid-column {
      flex: 0 0 auto; /* Never stretch to fill space, keep natural table width */
  }
  .ts-grid-column table.tslist {
      margin-top: 0;
      width: max-content; /* Guarantee the table respects its contents without stretching */
  }
  .ts-grid-column th,
  .ts-grid-column td {
      white-space: nowrap; /* Prevents timestamps and values from breaking to new lines */
      padding-left: 5px; 
      padding-right: 5px;
  }
  .ts-grid-column td form {
      display: inline-block; /* Ensures delete action stays beside edit action */
      margin: 0;
  }
  .ts-grid-column:not(:first-child) {
      border-left: 1px solid #d1d5db; /* Clean vertical divider */
      padding-left: 8px; /* Matched to flex gap */
  }

  /* Mobile responsive layout fixes */
  @media screen and (max-width: 767px) {
      .dt-controls {
          flex-direction: column;
          align-items: flex-start; /* Left justified */
          text-align: left;
          gap: 10px; /* Reduced space between rows */
      }
      .dt-pagination {
          justify-content: flex-start; /* Ensure buttons start from the left */
          flex-wrap: wrap; /* Allows wrapping if screen is extremely narrow */
          margin-left: -1em; /* Optically align the Previous text by offsetting its internal 1em padding */
      }
  }


.doc-content {max-width:50em; margin:0 auto; padding:0.2em}
.doc-content blockquote {margin-left:1em; font-style:italic;}

article ul {list-style:revert;}
article li {margin-left:30px;}

a.no_und {text-decoration: none}
a.no_und:hover {text-decoration: underline}

.formula-error-pre {
    font-family: monospace;
    font-size: 1rem;
    width: 30em;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-x: auto;
    margin-top: 4px;
    margin-bottom: 0.8em;
}
.formula-error-highlight {
    color: red;
    font-weight: bold;
    background: #fff3a3;
    padding: 0 0.2em; /* Ensures that zero-width error spans are visible. */
}