/* ============================================================
   NTTECO STANDARD UI SYSTEM (ntteco-std.css)
   SECTION 1 — GLOBAL RESET + ROOT WRAPPER + TOP-GAP FIX
   ------------------------------------------------------------
   - All classes are prefixed with: ntteco-std-
   - No element selectors are used
   - Original classes removed
   - Root wrapper defines global typography + background
   - Safe for gradual migration
   ============================================================ */


/* ------------------------------------------------------------
   GLOBAL RESET (namespaced)
   ------------------------------------------------------------ */

.ntteco-std-reset * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ntteco-std-reset {
    width: 100%;
    height: 100%;
}


/* ------------------------------------------------------------
   ROOT WRAPPER — GLOBAL TYPOGRAPHY + BACKGROUND
   ------------------------------------------------------------
   Apply once at the top of your app:

       <div class="ntteco-std-root ntteco-std-reset">
           ...
       </div>

   This establishes:
   - global font family
   - global line-height
   - global text color
   - global background
   - a governed UI boundary
   ------------------------------------------------------------ */

.ntteco-std-root {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #ffffff;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* ------------------------------------------------------------
   TOP-GAP FIX (DevExpress + NTTECO header)
   ------------------------------------------------------------
   Removes the unwanted space above "< Back to Home".
   ------------------------------------------------------------ */

.ntteco-app .dxbl-content {
    padding-top: 0 !important;
}

.ntteco-std-nav-buttons-container {
    margin: 0 !important;
    padding: 0 !important;
}

#div-ntteco-body {
    margin-top: 0 !important;
}


/* ============================================================
   NTTECO STANDARD UI SYSTEM (ntteco-std.css)
   SECTION 2 — LAYOUT SYSTEM
   ------------------------------------------------------------
   This section defines the structural layout primitives:
   - layout root
   - layout body (sidebar + content)
   - page body (hero + content)
   - centered content containers
   - topbar
   - sidebar
   All classes are prefixed with: ntteco-std-
   ============================================================ */


/* ------------------------------------------------------------
   LAYOUT ROOT
   ------------------------------------------------------------
   The outermost layout container inside ntteco-std-root.
   Controls vertical stacking of topbar + body + footer.
   ------------------------------------------------------------ */

.ntteco-std-layout-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}


/* ------------------------------------------------------------
   LAYOUT BODY
   ------------------------------------------------------------
   Horizontal container for:
   - left sidebar
   - right page body
   ------------------------------------------------------------ */

.ntteco-std-layout-body {
    display: flex;
    flex: 1;
    width: 100%;
}


/* ------------------------------------------------------------
   PAGE BODY
   ------------------------------------------------------------
   Vertical stack for:
   - hero (optional)
   - page content sections
   ------------------------------------------------------------ */

.ntteco-std-page-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* ------------------------------------------------------------
   PAGE CONTENT (800px centered)
   ------------------------------------------------------------
   The standard NTTECO content width.
   Use for all narrative, documentation, and product pages.
   ------------------------------------------------------------ */

.ntteco-std-page-content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}


/* ------------------------------------------------------------
   CONTENT AREA (flex container)
   ------------------------------------------------------------
   Used when you want a centered content block inside a
   full-width region.
   ------------------------------------------------------------ */

.ntteco-std-content {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.ntteco-std-content-inner {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}


/* ------------------------------------------------------------
   HERO SECTION (full width)
   ------------------------------------------------------------
   Used for marketing, product intros, and high-level messaging.
   ------------------------------------------------------------ */

.ntteco-std-hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem 2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ntteco-std-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}


/* ------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------
   Standard NTTECO top navigation bar.
   ------------------------------------------------------------ */

.ntteco-std-topbar {
    width: 100%;
    height: 50px;
    min-height: 50px;
    background: #e6dbca;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.ntteco-std-topbar-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ntteco-std-hamburger {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.ntteco-std-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ntteco-std-topbar-logo {
    height: 15px;
}

.ntteco-std-topbar-home {
    text-decoration: none;
    color: #3d5a40;
    font-weight: 500;
}

    .ntteco-std-topbar-home:hover {
        text-decoration: underline;
    }

.ntteco-std-topbar-logo-link {
    display: flex;
    align-items: center;
}

.ntteco-std-topbar-separator {
    width: 1px;
    height: 18px;
    background-color: rgba(0,0,0,0.15);
    margin: 0 0.75rem;
}

.ntteco-std-topbar-link {
    text-decoration: none;
    color: #3d5a40;
    font-weight: 500;
}

    .ntteco-std-topbar-link:hover {
        text-decoration: underline;
    }


/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------
   Left navigation panel.
   ------------------------------------------------------------ */

.ntteco-std-sidebar {
    width: 240px;
    background: #f7f7f7;
    border-right: 1px solid #e5e5e5;
    padding: 1rem;
}

.ntteco-std-sidebar-collapsed {
    width: 64px;
}


/* ------------------------------------------------------------
   NAV GROUPS (inside sidebar)
   ------------------------------------------------------------ */

.ntteco-std-nav-group {
    margin-top: 1rem;
}

.ntteco-std-nav-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c46a1a;
    padding: 0.25rem 0.1rem;
}

.ntteco-std-nav-sub {
    padding-left: 0.1rem;
}

/* ============================================================
   NTTECO STANDARD UI SYSTEM (ntteco-std.css)
   SECTION 3 — TYPOGRAPHY SYSTEM
   ------------------------------------------------------------
   This section defines:
   - heading variants
   - paragraph styles
   - text sizes
   - text weights
   - text colors
   - spacing utilities
   All classes are prefixed with: ntteco-std-
   ============================================================ */


/* ------------------------------------------------------------
   HEADING VARIANTS (semantic + expressive)
   ------------------------------------------------------------
   These are NOT tied to <h1>, <h2>, etc.
   You apply them explicitly:
       <h1 class="ntteco-std-h-xl ntteco-std-h-semibold">
------------------------------------------------------------ */

/* XL — Hero / Section Titles */
.ntteco-std-h-xl {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* L — Major Headings */
.ntteco-std-h-l {
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 0.85rem;
}

/* M — Standard Headings */
.ntteco-std-h-m {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

/* S — Subheadings */
.ntteco-std-h-s {
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: 0.65rem;
}

/* XS — Minor Labels */
.ntteco-std-h-xs {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}


/* ------------------------------------------------------------
   HEADING WEIGHTS
   ------------------------------------------------------------ */

.ntteco-std-h-light {
    font-weight: 300;
}

.ntteco-std-h-regular {
    font-weight: 400;
}

.ntteco-std-h-medium {
    font-weight: 500;
}

.ntteco-std-h-semibold {
    font-weight: 600;
}

.ntteco-std-h-bold {
    font-weight: 700;
}


/* ------------------------------------------------------------
   PARAGRAPH SYSTEM
   ------------------------------------------------------------
   These define the core reading experience.
------------------------------------------------------------ */

.ntteco-std-p {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.ntteco-std-p-tight {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.ntteco-std-p-loose {
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.ntteco-std-p-small {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

.ntteco-std-p-large {
    font-size: 1.15rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}


/* ------------------------------------------------------------
   TEXT SIZE UTILITIES
   ------------------------------------------------------------ */

.ntteco-std-text-xs {
    font-size: 0.75rem;
}

.ntteco-std-text-sm {
    font-size: 0.875rem;
}

.ntteco-std-text-md {
    font-size: 1rem;
}

.ntteco-std-text-lg {
    font-size: 1.125rem;
}

.ntteco-std-text-xl {
    font-size: 1.25rem;
}

.ntteco-std-text-2xl {
    font-size: 1.5rem;
}

.ntteco-std-text-3xl {
    font-size: 1.875rem;
}

.ntteco-std-text-4xl {
    font-size: 2.25rem;
}


/* ------------------------------------------------------------
   TEXT WEIGHT UTILITIES
   ------------------------------------------------------------ */

.ntteco-std-weight-light {
    font-weight: 300;
}

.ntteco-std-weight-normal {
    font-weight: 400;
}

.ntteco-std-weight-medium {
    font-weight: 500;
}

.ntteco-std-weight-semibold {
    font-weight: 600;
}

.ntteco-std-weight-bold {
    font-weight: 700;
}


/* ------------------------------------------------------------
   TEXT COLOR UTILITIES
   ------------------------------------------------------------ */

.ntteco-std-text-default {
    color: #222;
}

.ntteco-std-text-muted {
    color: #666;
}

.ntteco-std-text-soft {
    color: #888;
}

.ntteco-std-text-accent {
    color: #c46a1a;
}

.ntteco-std-text-success {
    color: #2e7d32;
}

.ntteco-std-text-danger {
    color: #c62828;
}

.ntteco-std-text-info {
    color: #1565c0;
}


/* ------------------------------------------------------------
   LINK STYLES
   ------------------------------------------------------------ */

.ntteco-std-link {
    color: #3d5a40;
    text-decoration: none;
    font-weight: 500;
}

    .ntteco-std-link:hover {
        text-decoration: underline;
    }


/* ------------------------------------------------------------
   SPACING UTILITIES (vertical rhythm)
   ------------------------------------------------------------ */

.ntteco-std-mt-0 {
    margin-top: 0;
}

.ntteco-std-mt-1 {
    margin-top: 0.25rem;
}

.ntteco-std-mt-2 {
    margin-top: 0.5rem;
}

.ntteco-std-mt-3 {
    margin-top: 0.75rem;
}

.ntteco-std-mt-4 {
    margin-top: 1rem;
}

.ntteco-std-mt-5 {
    margin-top: 1.25rem;
}

.ntteco-std-mt-6 {
    margin-top: 1.5rem;
}

.ntteco-std-mb-0 {
    margin-bottom: 0;
}

.ntteco-std-mb-1 {
    margin-bottom: 0.25rem;
}

.ntteco-std-mb-2 {
    margin-bottom: 0.5rem;
}

.ntteco-std-mb-3 {
    margin-bottom: 0.75rem;
}

.ntteco-std-mb-4 {
    margin-bottom: 1rem;
}

.ntteco-std-mb-5 {
    margin-bottom: 1.25rem;
}

.ntteco-std-mb-6 {
    margin-bottom: 1.5rem;
}


/* ------------------------------------------------------------
   BULLETS + LISTS
   ------------------------------------------------------------ */

.ntteco-std-ul {
    margin: 1rem 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

    .ntteco-std-ul li {
        margin-bottom: 0.5rem;
    }

.ntteco-std-ul-tight li {
    margin-bottom: 0.25rem;
}

.ntteco-std-ol {
    margin: 1rem 0;
    padding-left: 1.25rem;
    list-style-type: decimal;
}

    .ntteco-std-ol li {
        margin-bottom: 0.5rem;
    }

/* ============================================================
   NTTECO STANDARD UI SYSTEM (ntteco-std.css)
   SECTION 4 — COMPONENTS
   ------------------------------------------------------------
   This section defines reusable NTTECO components:
   - hero blocks
   - footers
   - comparison tables
   - bullet systems
   - callouts
   - public-phase band
   - nav elements
   All classes are prefixed with: ntteco-std-
   ============================================================ */


/* ------------------------------------------------------------
   HERO BLOCKS
   ------------------------------------------------------------ */

.ntteco-std-hero {
    width: 100%;
    padding: 4rem 2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ntteco-std-hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

.ntteco-std-hero-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ntteco-std-hero-subtitle {
    font-size: 1.25rem;
    color: #555;
    max-width: 700px;
    line-height: 1.6;
}


/* ------------------------------------------------------------
   FOOTER VARIANTS
   ------------------------------------------------------------ */

.ntteco-std-footer-a {
    width: 100%;
    padding: 2rem 1rem;
    background: #f7f7f7;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

.ntteco-std-footer-b {
    width: 100%;
    padding: 2rem 1rem;
    background: #ffffff;
    border-top: 1px solid #ddd;
    text-align: left;
    font-size: 0.95rem;
    color: #444;
}


/* ------------------------------------------------------------
   COMPARISON TABLES
   ------------------------------------------------------------ */

.ntteco-std-comparison-section {
    margin: 2rem 0;
}

.ntteco-std-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

    .ntteco-std-comparison-table th {
        background: #f0f0f0;
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        border-bottom: 1px solid #ddd;
    }

    .ntteco-std-comparison-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #eee;
        vertical-align: top;
    }

.ntteco-std-comparison-table-row-alt {
    background: #fafafa;
}

.ntteco-std-comparison-bullet {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    position: relative;
}

    .ntteco-std-comparison-bullet::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #c46a1a;
        font-weight: 600;
    }


/* ------------------------------------------------------------
   BULLET SYSTEM (GENERAL)
   ------------------------------------------------------------ */

.ntteco-std-bullet {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    position: relative;
}

    .ntteco-std-bullet::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #3d5a40;
        font-weight: 600;
    }

.ntteco-std-bullet-accent::before {
    color: #c46a1a;
}

.ntteco-std-bullet-tight {
    margin-bottom: 0.25rem;
}


/* ------------------------------------------------------------
   CALLOUTS / HIGHLIGHT BLOCKS
   ------------------------------------------------------------ */

.ntteco-std-callout {
    padding: 1rem 1.25rem;
    border-left: 4px solid #3d5a40;
    background: #f9f9f9;
    margin: 1.5rem 0;
}

.ntteco-std-callout-accent {
    border-left-color: #c46a1a;
}

.ntteco-std-callout-info {
    border-left-color: #1565c0;
}

.ntteco-std-callout-danger {
    border-left-color: #c62828;
}


/* ------------------------------------------------------------
   PUBLIC-PHASE BAND
   ------------------------------------------------------------ */

.ntteco-std-phase-band {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff7e6;
    border-bottom: 1px solid #f0d9b5;
    color: #8a4b0f;
    font-size: 0.9rem;
    text-align: center;
}

.ntteco-std-phase-band-strong {
    background: #ffe8c2;
    border-bottom-color: #e0b27a;
    font-weight: 600;
}


/* ------------------------------------------------------------
   NAV ELEMENTS (used inside sidebar or topbar)
   ------------------------------------------------------------ */

.ntteco-std-nav-item {
    display: block;
    padding: 0.5rem 0.25rem;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
}

    .ntteco-std-nav-item:hover {
        text-decoration: underline;
    }

.ntteco-std-nav-item-active {
    font-weight: 600;
    color: #c46a1a;
}

.ntteco-std-nav-group {
    margin-top: 1rem;
}

.ntteco-std-nav-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c46a1a;
    padding: 0.25rem 0.1rem;
}

.ntteco-std-nav-sub {
    padding-left: 0.1rem;
}

/* ============================================================
   NTTECO STANDARD UI SYSTEM (ntteco-std.css)
   SECTION 5 — UTILITIES
   ------------------------------------------------------------
   This section defines:
   - spacing utilities
   - alignment utilities
   - display utilities
   - layout helpers
   - thin-line separators
   - accent wrappers
   All classes are prefixed with: ntteco-std-
   ============================================================ */


/* ------------------------------------------------------------
   SPACING UTILITIES (padding)
   ------------------------------------------------------------ */

.ntteco-std-pt-0 {
    padding-top: 0;
}

.ntteco-std-pt-1 {
    padding-top: 0.25rem;
}

.ntteco-std-pt-2 {
    padding-top: 0.5rem;
}

.ntteco-std-pt-3 {
    padding-top: 0.75rem;
}

.ntteco-std-pt-4 {
    padding-top: 1rem;
}

.ntteco-std-pb-0 {
    padding-bottom: 0;
}

.ntteco-std-pb-1 {
    padding-bottom: 0.25rem;
}

.ntteco-std-pb-2 {
    padding-bottom: 0.5rem;
}

.ntteco-std-pb-3 {
    padding-bottom: 0.75rem;
}

.ntteco-std-pb-4 {
    padding-bottom: 1rem;
}

.ntteco-std-pl-0 {
    padding-left: 0;
}

.ntteco-std-pl-1 {
    padding-left: 0.25rem;
}

.ntteco-std-pl-2 {
    padding-left: 0.5rem;
}

.ntteco-std-pl-3 {
    padding-left: 0.75rem;
}

.ntteco-std-pl-4 {
    padding-left: 1rem;
}

.ntteco-std-pr-0 {
    padding-right: 0;
}

.ntteco-std-pr-1 {
    padding-right: 0.25rem;
}

.ntteco-std-pr-2 {
    padding-right: 0.5rem;
}

.ntteco-std-pr-3 {
    padding-right: 0.75rem;
}

.ntteco-std-pr-4 {
    padding-right: 1rem;
}


/* ------------------------------------------------------------
   ALIGNMENT UTILITIES
   ------------------------------------------------------------ */

.ntteco-std-text-left {
    text-align: left;
}

.ntteco-std-text-center {
    text-align: center;
}

.ntteco-std-text-right {
    text-align: right;
}

.ntteco-std-flex-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ntteco-std-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ntteco-std-flex-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/* ------------------------------------------------------------
   DISPLAY UTILITIES
   ------------------------------------------------------------ */

.ntteco-std-block {
    display: block;
}

.ntteco-std-inline {
    display: inline;
}

.ntteco-std-inline-block {
    display: inline-block;
}

.ntteco-std-flex {
    display: flex;
}

.ntteco-std-inline-flex {
    display: inline-flex;
}

.ntteco-std-hidden {
    display: none;
}


/* ------------------------------------------------------------
   FLEX HELPERS
   ------------------------------------------------------------ */

.ntteco-std-flex-col {
    display: flex;
    flex-direction: column;
}

.ntteco-std-flex-row {
    display: flex;
    flex-direction: row;
}

.ntteco-std-flex-1 {
    flex: 1;
}

.ntteco-std-flex-2 {
    flex: 2;
}

.ntteco-std-gap-1 {
    gap: 0.25rem;
}

.ntteco-std-gap-2 {
    gap: 0.5rem;
}

.ntteco-std-gap-3 {
    gap: 0.75rem;
}

.ntteco-std-gap-4 {
    gap: 1rem;
}


/* ------------------------------------------------------------
   WIDTH UTILITIES
   ------------------------------------------------------------ */

.ntteco-std-w-100 {
    width: 100%;
}

.ntteco-std-w-75 {
    width: 75%;
}

.ntteco-std-w-50 {
    width: 50%;
}

.ntteco-std-w-33 {
    width: 33.333%;
}

.ntteco-std-w-25 {
    width: 25%;
}


/* ------------------------------------------------------------
   THIN-LINE SYSTEM (horizontal separators)
   ------------------------------------------------------------ */

.ntteco-std-thinline {
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    margin: 1.5rem 0;
}

.ntteco-std-thinline-light {
    background: #f0f0f0;
}

.ntteco-std-thinline-strong {
    background: #ccc;
}


/* ------------------------------------------------------------
   ACCENT WRAPPERS
   ------------------------------------------------------------ */

.ntteco-std-accent-box {
    padding: 1rem;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    border-radius: 4px;
}

.ntteco-std-accent-box-strong {
    border-color: #c46a1a;
    background: #fff7e6;
}

.ntteco-std-accent-box-soft {
    border-color: #ddd;
    background: #fdfdfd;
}


/* ------------------------------------------------------------
   LAYOUT HELPERS
   ------------------------------------------------------------ */

.ntteco-std-center-block {
    margin-left: auto;
    margin-right: auto;
}

.ntteco-std-max-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.ntteco-std-max-1200 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.ntteco-std-section {
    padding: 2rem 1rem;
}

.ntteco-std-section-tight {
    padding: 1.25rem 1rem;
}

.ntteco-std-section-loose {
    padding: 3rem 1rem;
}