/**
 * Traylinx Documentation Components
 * Rich interactive components inspired by Mintlify
 */

/* ============================
   0. GLOBAL OVERRIDES
   ============================ */

/* Hide all horizontal rules */
.md-typeset hr {
    display: none !important;
}

/* ============================
   0.1 ICON COLOR UTILITIES
   For colored icons in tables and content
   ============================ */


.text-success,
.md-typeset .text-success {
    color: #16a34a !important;
}

.text-error,
.md-typeset .text-error {
    color: #dc2626 !important;
}

.text-warning,
.md-typeset .text-warning {
    color: #ca8a04 !important;
}

.text-primary,
.md-typeset .text-primary {
    color: var(--md-primary-fg-color, #8800ff) !important;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .text-success {
    color: #4ade80 !important;
}

[data-md-color-scheme="slate"] .text-error {
    color: #f87171 !important;
}

[data-md-color-scheme="slate"] .text-warning {
    color: #fbbf24 !important;
}

/* ============================
   1. STEPS COMPONENT
   Visual step-by-step guides with connected timeline
   Usage: Use <ol class="steps"> in your markdown
   ============================ */

.steps,
ol.steps {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 2rem 0 !important;
    counter-reset: step-counter;
}

.steps>li,
ol.steps>li {
    position: relative;
    padding-left: 3rem !important;
    padding-bottom: 1.5rem;
    margin-bottom: 0 !important;
    counter-increment: step-counter;
}

/* Step number circle */
.steps>li::before,
ol.steps>li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--md-primary-fg-color, #8800ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    z-index: 2;
}

/* Connecting line between steps */
.steps>li::after,
ol.steps>li::after {
    content: "";
    position: absolute;
    left: calc(1rem - 1px);
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: var(--md-primary-fg-color--light, #a64dff);
    opacity: 0.3;
}

/* Remove line from last step */
.steps>li:last-child::after,
ol.steps>li:last-child::after {
    display: none;
}

/* Step title (if using <strong> or <b> as first element) */
.steps>li>strong:first-child,
.steps>li>b:first-child,
ol.steps>li>strong:first-child,
ol.steps>li>b:first-child {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--md-default-fg-color);
}

/* ============================
   2. CARD GROUP COMPONENT
   Grid layout for landing pages
   Usage: <div class="card-group cols-2">...</div>
   ============================ */

.card-group {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.card-group.cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card-group.cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card-group.cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Individual card styling */
.card-group>.card,
.card-group>a {
    display: block;
    padding: 1.25rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    background: var(--md-default-bg-color);
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.2s ease;
}

.card-group>.card:hover,
.card-group>a:hover {
    border-color: var(--md-primary-fg-color);
    box-shadow: 0 4px 12px rgba(136, 0, 255, 0.1);
    transform: translateY(-2px);
}

.card-group .card-title,
.card-group h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0 !important;
    color: var(--md-default-fg-color);
}

.card-group .card-description,
.card-group p {
    font-size: 0.875rem;
    margin: 0 !important;
    color: var(--md-default-fg-color--light);
}

/* Card icon */
.card-group .card-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    display: block;
    line-height: 1;
}

/* Card icon when rendered as paragraph by markdown */
.card-group .card-icon p {
    margin: 0 !important;
    font-size: inherit;
    line-height: inherit;
}

/* Card title as div */
.card-group .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0 !important;
    color: var(--md-default-fg-color);
}

/* Card description as div */
.card-group .card-description {
    font-size: 0.875rem;
    margin: 0 !important;
    color: var(--md-default-fg-color--light);
}


/* ============================
   3. FRAME COMPONENT
   Bordered image container
   Usage: <div class="frame">![image](path)</div>
   ============================ */

.frame {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    padding: 0.25rem;
    margin: 1rem 0;
    background: var(--md-default-bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.frame img {
    border-radius: 2px;
    width: 100%;
    display: block;
}

/* ============================
   4. CALLOUT ENHANCEMENTS
   Improved admonition styling
   ============================ */

/* Tip callout */
.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-left-color: var(--md-primary-fg-color) !important;
}

.md-typeset .admonition.tip>.admonition-title,
.md-typeset details.tip>summary {
    background-color: rgba(136, 0, 255, 0.1) !important;
}

.md-typeset .admonition.tip>.admonition-title::before,
.md-typeset details.tip>summary::before {
    background-color: var(--md-primary-fg-color) !important;
}

/* ============================
   5. CONTENT BADGES
   For marking content type (Tutorial, How-To, Reference)
   Usage: <span class="badge badge-tutorial">Tutorial</span>
   ============================ */

.badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 9999px;
    margin-right: 0.5rem;
}

.badge-tutorial {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.badge-howto {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.badge-reference {
    background: rgba(136, 0, 255, 0.15);
    color: #8800ff;
}

.badge-explanation {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

/* Dark mode badge adjustments */
[data-md-color-scheme="slate"] .badge-tutorial {
    color: #4ade80;
}

[data-md-color-scheme="slate"] .badge-howto {
    color: #60a5fa;
}

[data-md-color-scheme="slate"] .badge-reference {
    color: #a855f7;
}

[data-md-color-scheme="slate"] .badge-explanation {
    color: #fbbf24;
}

/* ============================
   6. FULL-WIDTH TABLES
   Make tables span the full content width
   ============================ */

.md-typeset__scrollwrap {
    margin: 1rem 0;
}

.md-typeset__table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
}

.md-typeset__table table {
    width: 100% !important;
    display: table !important;
    table-layout: auto;
}

.md-typeset table:not([class]) {
    width: 100%;
    display: table;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
    padding: 0.75rem 1rem;
}

/* ============================
   7. PAGE FEEDBACK WIDGET (SIDEBAR)
   Compact version for right sidebar/TOC area
   ============================ */

.page-feedback.sidebar-feedback {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.sidebar-feedback .feedback-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sidebar-feedback .feedback-question {
    font-size: 0.7rem;
    color: var(--md-default-fg-color--light);
    white-space: nowrap;
}

.sidebar-feedback .feedback-buttons {
    display: flex;
    gap: 0.25rem;
}

.sidebar-feedback .feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color--light);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-feedback .feedback-btn:hover {
    border-color: var(--md-primary-fg-color);
    color: var(--md-primary-fg-color);
}

.sidebar-feedback .feedback-btn.feedback-yes:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: #16a34a;
    color: #16a34a;
}

.sidebar-feedback .feedback-btn.feedback-no:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
    color: #dc2626;
}

.sidebar-feedback .feedback-thanks {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    color: #16a34a;
}

.sidebar-feedback .feedback-thanks svg {
    stroke: #16a34a;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .sidebar-feedback .feedback-btn.feedback-yes:hover {
    color: #4ade80;
    border-color: #4ade80;
}

[data-md-color-scheme="slate"] .sidebar-feedback .feedback-btn.feedback-no:hover {
    color: #f87171;
    border-color: #f87171;
}

[data-md-color-scheme="slate"] .sidebar-feedback .feedback-thanks {
    color: #4ade80;
}

[data-md-color-scheme="slate"] .sidebar-feedback .feedback-thanks svg {
    stroke: #4ade80;
}

/* Content fallback (for pages without TOC) */
.page-feedback.content-feedback {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.content-feedback .feedback-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.content-feedback .feedback-question {
    font-size: 0.8rem;
    color: var(--md-default-fg-color--light);
}

.content-feedback .feedback-buttons {
    display: flex;
    gap: 0.5rem;
}

.content-feedback .feedback-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color--light);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.content-feedback .feedback-btn:hover {
    border-color: var(--md-primary-fg-color);
    color: var(--md-primary-fg-color);
}

.content-feedback .feedback-btn.feedback-yes:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: #16a34a;
    color: #16a34a;
}

.content-feedback .feedback-btn.feedback-no:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
    color: #dc2626;
}

.content-feedback .feedback-thanks {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: #16a34a;
}

.content-feedback .feedback-thanks svg {
    stroke: #16a34a;
}

/* Dark mode for content fallback */
[data-md-color-scheme="slate"] .content-feedback .feedback-btn.feedback-yes:hover {
    color: #4ade80;
    border-color: #4ade80;
}

[data-md-color-scheme="slate"] .content-feedback .feedback-btn.feedback-no:hover {
    color: #f87171;
    border-color: #f87171;
}

[data-md-color-scheme="slate"] .content-feedback .feedback-thanks {
    color: #4ade80;
}

/* ============================
   8. FEATURE GRID (VALUE PILLARS)
   Premium glassmorphic feature cards
   ============================ */

.feature-grid {
    display: grid !important;
    gap: 1.5rem !important;
    margin: 2.5rem 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.feature-card {
    background: transparent;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    padding: 1.75rem;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--md-primary-fg-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(136, 0, 255, 0.1);
}

.feature-icon {
    font-size: 2.5rem !important;
    line-height: 1;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--md-default-fg-color) !important;
}

.feature-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--md-default-fg-color);
}

.feature-text {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--md-default-fg-color--light);
    margin: 0 !important;
}

/* Dark mode - keep transparent */
[data-md-color-scheme="slate"] .feature-card {
    background: transparent;
    border-color: var(--md-default-fg-color--lightest);
}

/* ============================
   9. JOURNEY GRID (USER PATHS)
   Unified with feature-card styling
   ============================ */

.journey-grid {
    display: grid !important;
    gap: 1.5rem !important;
    margin: 2.5rem 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
}

@media screen and (max-width: 900px) {
    .journey-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }
}

.journey-card {
    background: transparent;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    padding: 1.75rem;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    transition: all 0.3s ease;
    min-height: 180px;
}

.journey-card:hover {
    border-color: var(--md-primary-fg-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(136, 0, 255, 0.1);
}

[data-md-color-scheme="slate"] .journey-card {
    background: transparent;
    border-color: var(--md-default-fg-color--lightest);
}

.journey-icon {
    font-size: 2rem !important;
    line-height: 1;
    display: block;
    color: var(--md-default-fg-color) !important;
    margin-bottom: 0.5rem;
}

.journey-card strong {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 0.25rem;
}

.journey-card p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: var(--md-default-fg-color--light);
    margin: 0 0 0.5rem 0 !important;
    flex-grow: 1;
}

.journey-cta,
.journey-card a.journey-cta {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--md-primary-fg-color) !important;
    text-decoration: none !important;
    margin-top: auto;
}

.journey-cta:hover {
    text-decoration: underline !important;
}

/* ============================
   10. UNIFIED CARD GRID
   For hub cards and ecosystem links
   ============================ */

.card-grid {
    display: grid !important;
    gap: 1.5rem !important;
    margin: 2.5rem 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
}

.card-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media screen and (max-width: 1100px) {
    .card-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }

    .card-grid.cols-4 {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

.hub-card {
    background: transparent;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
    padding: 1.75rem;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    transition: all 0.3s ease;
    min-height: 140px;
}

.hub-card:hover {
    border-color: var(--md-primary-fg-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(136, 0, 255, 0.1);
}

[data-md-color-scheme="slate"] .hub-card {
    background: transparent;
    border-color: var(--md-default-fg-color--lightest);
}

.hub-icon {
    font-size: 1.75rem !important;
    line-height: 1;
    display: block;
    color: var(--md-default-fg-color) !important;
    margin-bottom: 0.5rem;
}

.hub-card strong,
.hub-card strong a {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--md-default-fg-color) !important;
    text-decoration: none !important;
    display: block;
    margin-bottom: 0.25rem;
}

.hub-card strong a:hover {
    text-decoration: underline !important;
}

.hub-card p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: var(--md-default-fg-color--light);
    margin: 0 !important;
}

/* ============================
   11. ICON STYLING UTILITIES
   ============================ */

.feature-icon .twemoji,
.journey-icon .twemoji,
.hub-icon .twemoji {
    width: 2rem;
    height: 2rem;
    fill: currentColor !important;
}

.feature-icon .twemoji {
    width: 2.5rem;
    height: 2.5rem;
}

/* Hide empty paragraphs from markdown parser */
.feature-card p:empty,
.journey-card p:empty,
.hub-card p:empty {
    display: none !important;
}