﻿/* Shared form styling for both scaffolded MVC pages and TourFlow views. */
.tf-content .form-horizontal {
    padding: 24px;
    background: var(--theme-inset,#fff);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-lg);
    box-shadow: var(--tf-shadow-sm);
    margin-bottom: 20px;
}

.tf-content .form-group {
    margin-bottom: 16px;
}

.tf-content .control-label, .tf-content .form-label {
    color: var(--tf-text-2);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.tf-content .form-control, .tf-content .form-select {
    min-height: 38px;
    border-color: var(--tf-border);
    border-radius: var(--tf-radius-sm);
    font-size: 13px;
    color: var(--tf-text-1);
}

    .tf-content .form-control:focus, .tf-content .form-select:focus {
        border-color: var(--tf-indigo);
        box-shadow: 0 0 0 3px rgb(79 70 229 / 10%);
    }

.tf-content .btn-primary {
    --bs-btn-bg: var(--tf-indigo);
    --bs-btn-border-color: var(--tf-indigo);
    --bs-btn-hover-bg: var(--tf-indigo-dark);
    --bs-btn-hover-border-color: var(--tf-indigo-dark);
    --bs-btn-active-bg: var(--tf-indigo-dark);
    --bs-btn-active-border-color: var(--tf-indigo-dark);
}

.tf-content .btn {
    border-radius: var(--tf-radius-sm);
    font-size: 13px;
}

.input-validation-error {
    border-color: var(--tf-red) !important;
}

.field-validation-error, .validation-summary-errors {
    color: var(--tf-red);
}

.field-validation-valid, .validation-summary-valid {
    display: none;
}

.tf-content .dl-horizontal dt {
    color: var(--tf-text-3);
    overflow-wrap: anywhere;
}

.tf-content .dl-horizontal dd {
    overflow-wrap: anywhere;
    margin-bottom: 12px;
}

:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--tf-indigo);
    outline-offset: 3px;
}

.tf-main, .tf-content {
    min-width: 0;
}

.tf-sb-link, .tf-sb-sub .tf-sb-link {
    color: #a8b5c9;
}

.tf-sb-section-label {
    color: #94a3b8;
}

textarea.tf-input {
    height: auto;
    min-height: 90px;
    padding-block: 10px;
}

[dir="rtl"] .tf-sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--tf-navy-3);
}

[dir="rtl"] .tf-main {
    margin-left: 0;
    margin-right: var(--tf-sidebar-w);
}

[dir="rtl"] .tf-sidebar.collapsed ~ .tf-main {
    margin-left: 0;
    margin-right: var(--tf-sidebar-collapsed);
}

[dir="rtl"] .tf-sb-chevron, [dir="rtl"] .tf-sb-link .tf-sb-badge {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .tf-sb-sub .tf-sb-link {
    padding-left: 14px;
    padding-right: 42px;
}

[dir="rtl"] .tf-select {
    background-position: left 12px center;
    padding-right: 12px;
    padding-left: 32px;
}

@media (min-width: 768px) {
    .form-horizontal .form-group {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
    }

    .form-horizontal .control-label {
        padding-block: 9px;
        padding-inline-end: 16px;
    }

    .form-horizontal .col-md-offset-2 {
        margin-inline-start: 16.666667%;
    }

    .dl-horizontal {
        display: grid;
        grid-template-columns: minmax(140px, 1fr) 3fr;
        gap: 8px 20px;
    }
}

@media (max-width: 991px) {
    #sidebarCollapseToggle {
        display: none;
    }

    [dir="rtl"] .tf-sidebar {
        transform: translateX(100%);
    }

        [dir="rtl"] .tf-sidebar.open {
            transform: translateX(0);
        }

        [dir="rtl"] .tf-main, [dir="rtl"] .tf-sidebar.collapsed ~ .tf-main {
            margin-right: 0;
        }
}

@media (max-width: 576px) {
    .tf-content .form-horizontal {
        padding: 16px;
    }

        .tf-content .form-horizontal .form-group > div {
            width: 100%;
        }
}

/* Reflow entry forms using the available card width on tablets/phones. */
@media (max-width:1366px), (pointer:coarse) {
    .tf-content form .tf-form-layout { grid-template-columns:minmax(0,1fr)!important; }
    .tf-content form :is(.tf-form-col-main,.tf-form-col-side,.tf-field) { min-width:0; }
    .tf-content form :is(.tf-grid-2,.tf-grid-3,.tf-grid-4,.tf-grid-5,.tf-grid-6) { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important; }
    .tf-content form :is(input,select,textarea):is(.tf-input,.tf-select,.form-control,.form-select,.tf-select-search):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]) {
        width:100%!important;max-width:100%!important;min-width:0;font-size:16px!important;line-height:1.5!important;min-height:44px;box-sizing:border-box;
    }
    .tf-content form :is(input,select):is(.tf-input,.tf-select,.form-control,.form-select,.tf-select-search):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([multiple]):not([size]) { height:44px!important;padding-block:8px!important; }
    .tf-content form .input-group > :is(.form-control,.tf-input,.form-select,.tf-select) { width:1%!important;flex:1 1 auto; }
}
@media (max-width:1024px), (pointer:coarse) {
    .tf-content form .row > [class*="col-"]:has(:is(.form-control,.form-select,.tf-input,.tf-select)) { flex:1 1 240px;min-width:min(100%,240px);max-width:100%; }
    .tf-content .form-horizontal .form-group > :is(.control-label,[class*="col-"]) { width:100%;max-width:100%;flex-basis:100%; }
    .tf-content .form-horizontal .col-md-offset-2 { margin-inline-start:0; }
}
@media (prefers-reduced-motion: reduce) {
    .tf-sidebar, .tf-main, .tf-sb-sub {
        transition: none;
    }

    .tf-status-dot {
        animation: none;
    }
}
