/* =========================================================
   LEGACY CSS (UNCHANGED)
   ========================================================= */
.content-position {
    position: absolute;
    top: 61px;
    left: 0;
    width: 100%;
}
body {
    background-image: url("https://chat.autoparthotline.com/usercontent/new-background-01.jpg");
    background-color: #4463a2 !important;
    /* background-image:  linear-gradient(to right, #b3b3ff, #000000); */
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}
div.p-dialog {
    background-color: #e7e8ec;
    opacity: 1 !important;
}
body .ui-widget-overlay {
    background-color: rgba(77, 74, 74, 0.9);
    /* opacity: 0.7;
    filter: alpha(opacity=70);*/
}

.container-bkgnd {
    background-color: #ffffff;
    padding: 5px;
}
.border-msg-left {
    border-radius: 10px 0px 0px 10px;
}
.border-message-center {
    margin: 10px;
}

.header-constraint {
    width: 300px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room-data-display {
    margin: 0px 5px 0px 5px;
}
.user-results-container, .friends-list-popup, .notification-popup {
    max-height: 300px;
    overflow-y: auto;
}
.full-sz {
    font-size: 1rem;
}
body .ui-button.bn-group {
    margin: 2px 2px;
}
.aligned-no-results {
    display: flex;
    justify-content: center;
    align-items: center;
}
.results-max-heights {
    max-height: 300px;
    overflow-y: auto;
}
div.form-group input, div > span.p-calendar, div > input.form-control {
    display: block;
    width: 100% !important;
    padding: .375rem .75rem;
}
div > span.p-calendar {
    padding: 0px;
}
div.form-group, .pad-around {
    padding: 10px;
}
div.form-group .external-space {
    padding: 0px !important;
}
.logo {
    width: 15%;
    height: auto;
}
.b {
    font-weight: bold;
}
.u {
    text-decoration: underline;
}
.yard-info {
    padding-left: 5px;
}
.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 50%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.badge-only {
    line-height: 0.5;
}
.badge-warning {
    color: #212529;
    background-color: #ffc107;
}
.badge-danger  {
    color: #fff;
    background-color: #dc3545;
}
.badge-info    {
    color: #fff;
    background-color: #17a2b8;
}
.badge-success {
    color: #fff;
    background-color: #28a745;
}
.badge-dark    {
    color: #fff;
    background-color: #343a40;
}
.badge-offline {
    color: #fff;
    background-color: #6c757d;
}

.rm-tag, .user-msg-tag {
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
}
div > button.p-button, .rnd-div {
    border-radius: 5px;
}
.btn-primary {
    background-color: #2c4167 !important;
}
.btn-block {
    display: block;
    width: 100%;
    margin: 2px 0px 2px 0px !important;
}
div input.p-colorpicker-preview {
    width: 1rem;
    height: 1rem;
    margin-left: 10px !important;
}
button.p-button-rounded > span.pi {
    color: black !important;
}
.p-button-warning > span.p-button-label {
    color: black;
}
i.pi, .sm-font {
    font-size: 0.75rem;
}
span.p-button-label, span.p-button-icon {
    color:white;
}
div.p-dropdown {
    width: 100%;
    color: black;
}
div > label.txt, .m-l {
    margin-left: 5px;
}
.m-b {
    margin-bottom: 5px;
}
.m-l-r {
    margin: 0px 5px 0px 5px;
}
.m-5 {
    margin: 5px;
}
.p-5 {
    padding: 5px;
}

div.p-panel > div.p-panel-header {
    background: white;
    border-top-left-radius: 20px;
}
div.form-group-antares > textarea.p-inputtextarea, div.ta > textarea.p-inputtextarea {
    display: block;
    width: 100% !important;
    padding: .375rem .75rem;
    resize: none;
}
.p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text {
    background-color: #D32F2F !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
    border-color: #2c4167 !important;
    background: #2c4167 !important;
    color: #ffffff !important;
}
.p-checkbox .p-checkbox-box.p-highlight {
    border-color: #2c4167 !important;
    background: #2c4167 !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
    border-color: #2c4167 !important;
}
.p-button-success {
    background: green !important;
}
.pv-header-txt {
    padding-left: 10px;
}
div.wait > div.p-dialog-header  {
    display:none;
    background-color: transparent;
}
div.p-dialog-header {
    border-bottom: 1px solid black !important;
}
div.wait  {
    background-color: transparent !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
}
div.wait {
    background: none !important;
    padding: 0px !important ;
}
.p-dialog-content {
    overflow: hidden !important;
    padding: 0px !important;
}

div.pv-or {
    width: 95%;
    height: 400px;
    background-color: #2c4167;
}
.p-accordion-header-link {
    padding: 10px !important;
    background-color: #2c4167 !important;
    color: white !important;
}
div > div.p-accordion-content {
    padding:0px !important;
    margin: 0px !important;
}
div.pv-or > div.p-dialog-header {
    padding: 5px !important;
    background-color: #2c4167;
    color: white;
}

.f-w-short {
    padding: 8px 16px;
    white-space: nowrap;
    width: auto;
}
.f-w {
    width: 100%;
}

body .ui-button.bn-color {
    background-color: #2c4167;
    border: 0;
    color:white;
}
.d-flex {
    display: flex;
}
.d-il {
    display: inline;
}
.flex-wrap {
    flex-direction: column;
    flex-wrap: wrap;
}
.f-wrap {
    flex-flow: column wrap;
}
.f-1 {
    flex: 1;
}
.a-i-c {
    align-items: center;
}
.j-c-c {
    justify-content: center;
}

.content {
    margin: 10px;
    border: 1px solid rgba(0,0,0,.125);
}
.card-body {
    padding: 0px;
}
.c {
    text-align: center;
}

div.staff-card, div.card-header {
    background-color: #4D4D4D;
    color: white;
    border-radius: .25rem;
    border: 2px solid black;
}
.lg-icon {
    font-size: 2rem !important;
}
.titles-xl {
    font-size: 1.75rem !important;
}
.titles {
    font-size: 1.5rem !important;
}
.standard-txt {
    font-size: 1.0rem !important;
}
.wnd-background {
    background-color: #2c4167;
}
.wnd-text {
    color: white;
}
.avatar-primary {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid black;
}
.no-flags-txt {
    margin: 10px 0px 10px 0px;
}
.no-flag-border {
    border-left: 10px solid;
}
.no-flag-border-color {
    border-color: #2c4167;
}

.yellow-curve-card {
    border-left: 10px solid yellow;
}
.blue-curve-card {
    border-left: 10px solid #2c4167;
}
.green-curve-card {
    border-left: 10px solid #00b300;
}

.curve-card {
    margin: 10px;
    margin-bottom: 10px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

.curve-card-title {
    font-size: 1.5rem;
}
.curve-card-text  {
    font-size: 1.25rem;
}

.card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    background: #ffffff;
    padding: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Contained Item Standards */
.contained-item-border {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: 10px solid red;
    margin: 10px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
}
.contained-item-content {
    padding: 10px 10px 10px 0px;
    text-align: left;
}
.contained-item-bkgnd {
    background-color: white;
}

.scale-img {
    height: 100%;
    width: 100%;
}
.btn-primary {
    background-color: #2c4167 !important;
    border-color: #2c4167;
}
.ttl-text {
    line-height: 1;
    color: white;
    text-align: right;
    margin: 5px;
}
body, .main-body {
    background-color: #2c4167 !important;
}
.ml-b {
    background-image: linear-gradient(to bottom right, #FFFFFF, #000000);
}
ul.mnu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li a:hover:not(.active) {
    background-color: #2c4167 ;
}

.active {
    background-color: #2c4167 ;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 5px 15px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.card {
    padding: 5px !important;
}
h1 {
    text-align: center;
    font-size: 2em !important;
}
h4 {
    margin: 15px;
}
p  {
    margin: 15px;
}

.yellow-curve-card {
    border-left: 10px solid yellow;
    margin: 10px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

.red-curve-card {
    border-left: 10px solid red;
    margin: 10px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

.a-curve-card {
    border-left: 10px solid #2c4167;
    margin: 10px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

.ajax-status {
    width:32px;
    height:32px;
    position:fixed;
    right:7px;
    bottom:7px
}

.incoming {
    color: #35ae47;
}

li.mnu {
    float: left;
}

.b {
    font-weight: bold;
}

.i {
    font-style: italic;
}

.card.login-panel-left {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.s-border {
    border: 2px solid black;
}

.center {
    width: 60%;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    height: auto;
}

.header-menu {
    height: auto;
    background-color: #333;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.d {
    height: 100%;
}

.wb {
    background-color: white;
}

.c {
    text-align: center;
}

.main-logo {
    height: 150px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.sep {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    width: 80%;
    margin: 0 auto;
}
.c {
    text-align: center;
}

.chat-link {
    font-size: 1.5em;
    color: white !important;
}

.chat-lnk:link, .chat-lnk {
    color:white !important;
}
.chat-lnk:visited {
    color:white !important;
}
.chat-lnk:hover   {
    color:white !important;
}
.chat-lnk:active  {
    color:white !important;
}

.chat-link#a {
    font-size: 1.5em;
}

.button-row {
}
.button-row button {
    margin-right: 10px;
    margin-bottom: 5px;
}
.button-row button:last-child {
    margin-right: 0;
    margin-bottom: 0;
}

.section-format {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}
.section-format .two-col-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.25rem;
    width: 90%;
}
.section-format .three-col-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1.25rem;
    width: 90%;
}
.section-format .inner-wrapper {
    width: 100%;
    max-width: 900px;
}
.section-format .form-row {
    display: flex;
    flex-direction: column;
}
.section-format .form-row label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    font-weight: 600;
}
.section-format input,
.section-format select,
.section-format textarea {
    padding: 6px 8px;
    font-size: 0.9rem;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.section-format textarea {
    height: 70px;
    resize: vertical;
}
.section-format .full-width {
    grid-column: span 2;
    width: 90%;
}
.section-format .small-field {
    grid-column: span 1;
    width: 20%;
}
.section-format input,
.section-format select,
.section-format textarea {
    border-radius: 20px;
}

@media only screen and (max-width: 600px) {
    .center {
        width: 100%;
        margin: 0 auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .main-logo {
        height: 100px;
        width: auto;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    li a {
        padding: 5px;
    }
}

@media only screen and (min-width: 641px)  {
    .main-logo {
        height: 150px;
        width: auto;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .center {
        width: 100%;
        margin: 0 auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (min-width: 992px) {
    .center {
        width: 60%;
        margin: 0 auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .center {
        width: 100%;
        margin: 0 auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
}

@media (max-height: 420px) {
    div.p-tabview-panels, div.p-accordion-content {
        max-height: 900px;
        overflow-y: auto;
    }
}

@media only screen and (min-width: 320px) {
    .logo {
        width: 100%;
        height: auto;
    }
    div.p-dialog {
        min-width: 350px;
        max-width: 350px;
    }
    .list-container-constraints {
        width: 80%;
    }
    .chat-container-width {
        width: 80%;
    }
    .box-dlg-width {
        width: 100%;
    }
}

@media only screen and (min-width: 768px)   {
    .item-width {
        width: 75%;
    }
    .logo {
        width: 50%;
        height: auto;
    }
    div.p-dialog {
        min-width: 600px;
        max-width: 600px;
        margin: 1.75rem auto;
    }
    .list-container-constraints {
        width: 40%;
    }
    .chat-container-width {
        width: 60%;
    }
    .box-dlg-width {
        width: 30%;
    }
}

@media only screen and (min-width: 1025px) and (min-height: 540px) {
    .item-width {
        width: 75%;
    }
    .logo {
        width: 15%;
        height: auto;
    }
    div.p-dialog {
        min-width: 600px;
        max-width: 600px;
        margin: 1.75rem auto;
    }
    .list-container-constraints {
        width: 20%;
    }
    .chat-container-width {
        width: 80%;
    }
    .box-dlg-width {
        width: 30%;
    }
}
@media only screen and (min-width: 1025px) {
    .item-width {
        width: 75%;
    }
    .logo {
        width: 15%;
        height: auto;
    }
    div.p-dialog {
        min-width: 600px;
        max-width: 600px;
        margin: 1.75rem auto;
    }
    .list-container-constraints {
        width: 20%;
    }
    .chat-container-width {
        width: 80%;
    }
    .box-dlg-width {
        width: 30%;
    }
}

@media (max-width: 650px) {
    .section-format .two-col-fields {
        grid-template-columns: 1fr;
    }
    .section-format .three-col-fields {
        grid-template-columns: 1fr;
    }
    .section-format .full-width {
        grid-column: span 1;
    }
    .section-format .small-field {
        grid-column: span 1;
        width: 90%;
    }
}

@media (max-width: 650px) {
    .f-w-short {
        width: 100% !important;
        max-width: none;
        display: block;
        text-align: center;
    }
}

/* =========================================================
   NEW TEMPLATE STYLES (SCOPED to .aph-skin to avoid conflicts)
   ========================================================= */

/*
  IMPORTANT:
  Wrap any “new template” pages/sections like this:

  <div class="aph-skin">
     <cc:heroHeader .../>
     <div class="aph-card">...</div>
  </div>

  This prevents collisions with legacy global selectors like:
  .card, h1, p, body colors, etc.
*/

.aph-skin {
    /* Local theme tokens (do NOT affect global site) */
    --aph-bg: #0d0f13;
    --aph-surface: #11141a;
    --aph-card: #1a1e25;
    --aph-card-highlight: #232832;
    --aph-border: rgba(255, 255, 255, 0.08);
    --aph-text: #e8ecf3;
    --aph-muted: #a8b1c0;
    --aph-accent: #15aaff;
    --aph-accent-2: #70f0ff;

    color: var(--aph-text);
}

/* optional light mode for JUST the new template sections */
@media (prefers-color-scheme: light) {
    .aph-skin {
        --aph-bg: #f2f5fa;
        --aph-surface: #ffffff;
        --aph-card: #f8fafc;
        --aph-card-highlight: #f0f3f7;
        --aph-border: rgba(0, 0, 0, 0.08);
        --aph-text: #10131a;
        --aph-muted: #505a6e;
        --aph-accent: #006de4;
        --aph-accent-2: #2bb8ff;
    }
}

/* Page wrapper used in updated XHTML */
.aph-skin .aph-page {
}

/* HERO (Composite uses .hero*) */
.aph-skin .hero {
    position: relative;
    width: 100%;
    padding: 10px 20px 72px;
    background: var(--aph-surface);
    border-bottom: 0px;
    overflow: hidden;
    border-radius: 18px;
    color: var(--aph-text);
}

.aph-skin .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 78ch;
}

.aph-skin .hero-badge {
    color: black;
    border: 1px solid var(--aph-border);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    display: inline-block;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.aph-skin .hero-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    margin: 14px 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-align: left; /* prevents legacy h1 center from winning */
}

.aph-skin .tagline {
    color: var(--aph-muted);
    font-style: italic;
    margin: 0;
    line-height: 1.55;
    font-size: 14px;
}

/* Avoid legacy p margin inside new template sections */
.aph-skin p {
    margin: 0;
}

.aph-skin a {
    color: var(--aph-accent);
    text-decoration: none;
}

.aph-skin ul > a {
    color: #ffffff;
    text-decoration: none;
}

.aph-skin a:hover {
    text-decoration: underline;
}

.aph-skin .hero-art .car-line {
    position: absolute;
    right: -20px;
    bottom: -4px;
    width: 60%;
    color: black;
    pointer-events: none;
    z-index: 0;
}

/* If you still have some pages using .aph-hero */
.aph-skin .aph-hero {
    position: relative;
    width: 100%;
    padding: 40px 18px 52px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    margin-bottom: 14px;
    color: var(--aph-text);
}
.aph-skin .aph-hero-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(112,240,255,0.95);
    font-weight: 700;
}
.aph-skin .aph-hero-title {
    margin: 12px 0 6px;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.aph-skin .aph-hero-tagline {
    margin: 0;
    color: rgba(232,236,243,0.82);
    font-style: italic;
    max-width: 70ch;
    line-height: 1.55;
    font-size: 14px;
}
.aph-skin .aph-hero-art .aph-car-line {
    position: absolute;
    right: -20px;
    bottom: -6px;
    width: 62%;
    color: rgba(112,240,255,0.95);
    pointer-events: none;
}

/* Cards (scoped) */
.aph-skin .aph-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 16px;
    margin: 12px 0;
    transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
    color: var(--aph-text);
}

.aph-skin .aph-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(21,170,255,0.22);
    box-shadow: 0 14px 36px rgba(21,170,255,0.10);
}

.aph-skin .aph-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.aph-skin .aph-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.aph-skin .aph-card-text {
    margin: 0;
    line-height: 1.6;
}

.aph-skin .aph-card-accent {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
        rgba(255,255,255,0.04);
}

/* Callout */
.aph-skin .aph-callout {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
}
.aph-skin .aph-callout-title {
    font-weight: 800;
    margin-bottom: 6px;
}
.aph-skin .aph-callout-text {
    margin: 0 0 8px;
    line-height: 1.6;
}
.aph-skin .aph-callout-text:last-child {
    margin-bottom: 0;
}

/* Grids */
.aph-skin .aph-form {
    width: 100%;
}

.aph-skin .aph-grid {
    display: grid;
    gap: 12px;
}

.aph-skin .aph-grid-1 {
    grid-template-columns: 1fr;
}
.aph-skin .aph-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aph-skin .aph-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .aph-skin .aph-grid-2,
    .aph-skin .aph-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Helpers */
.aph-skin .aph-field.full-width {
    grid-column: 1 / -1;
}
.aph-skin .aph-field.aph-small  {
    max-width: 360px;
}

.aph-skin .aph-divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 14px 0;
}

.aph-skin .aph-subhead {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 6px;
}

/* Muted */
.aph-skin .aph-muted {
    color: var(--aph-text-muted) !important;
}

.aph-skin .aph-mt {
}

/* Actions */
.aph-skin .aph-actions {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}

.aph-skin .aph-btn-primary {
    font-weight: 800;
    border-radius: 12px;
    padding: 10px 16px;
}

/* =========================================================
   APH “New Template” Cards (DROP-IN)
   Scope: ONLY affects elements inside .aph-skin
   ========================================================= */
/* =========================================================
   APH THEME CONTRACT (fix Mac/Windows drift)
   ========================================================= */

/* Light mode defaults (safe on any OS) */
:root {
    --aph-bg: #ffffff;
    --aph-surface: rgba(255, 255, 255, 0.92);
    --aph-surface-border: rgba(17, 24, 39, 0.10);
    --aph-text: #111827;
    --aph-text-muted: rgba(17, 24, 39, 0.70);

    --aph-accent: #15aaff;

    /* menu */
    --aph-menu-bg: rgba(0, 0, 0, 0.78);
    --aph-menu-text: #ffffff;
}

/* If you WANT dark mode, this makes it correct everywhere 
@media (prefers-color-scheme: dark) {
    :root {
        --aph-bg: #0d0f13;
        --aph-surface: rgba(17, 20, 26, 0.92);
        --aph-surface-border: rgba(255, 255, 255, 0.10);
        --aph-text: #e8ecf3;
        --aph-text-muted: rgba(232, 236, 243, 0.70);

        --aph-menu-bg: rgba(0, 0, 0, 0.78);
        --aph-menu-text: #ffffff;
    }
}*/

/* Force the actual page containers to use the theme.
   This is the KEY part that prevents "light surface + light text". */
.aph-skin,
.aph-skin .aph-page,
.aph-skin .main-content {
    color: var(--aph-text);
}

/* If legacy css forces white backgrounds, override inside aph-skin */
.aph-skin .main-content {
    background: var(--aph-surface) !important;
    border: 1px solid var(--aph-surface-border) !important;
}



/* Always define the critical text var so you never hit the fallback */
:root {
    --aph-text: #111827; /* default to dark text */
}

/* If you support dark mode, override it explicitly */
@media (prefers-color-scheme: dark) {
    :root {
        --aph-text: #e5e7eb;
    }
}

/* Base card */
.aph-skin .aph-card {
    background: var(--aph-surface);
    border: 1px solid var(--aph-surface-border);
    border-radius: 16px;
    padding: 16px;
    margin: 12px 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    color: var(--aph-text);
}

/* Hover */
.aph-skin .aph-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(21, 170, 255, 0.22);
    box-shadow: 0 14px 36px rgba(21, 170, 255, 0.10);
}

/* Card header row (icon + title, etc.) */
.aph-skin .aph-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Card title */
.aph-skin .aph-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}


/* Card body text */
.aph-skin .aph-card-text {
    margin: 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--aph-text);
    opacity: 0.95;
}

/* “Accent” card variant */
.aph-skin .aph-card.aph-card-accent,
.aph-skin .aph-card-accent {
    background:
        linear-gradient(180deg, rgba(21, 170, 255, 0.10), transparent),
        var(--aph-surface);
}


/* Links inside cards */
.aph-skin .aph-card a {
    color: var(--aph-accent, #15aaff);
    text-decoration: none;
}
.aph-skin .aph-card a:hover {
    text-decoration: underline;
}

/* Optional: nice spacing for multiple paragraphs inside cards */
.aph-skin .aph-card p {
    margin: 0;
}
.aph-skin .aph-card p + p {
    margin-top: 10px;
}

/* Optional: list styling inside cards */
.aph-skin .aph-card ul,
.aph-skin .aph-card ol {
    margin: 8px 0 0;
    padding-left: 18px;
}
.aph-skin .aph-card li {
    margin: 4px 0;
}


/* Hero responsiveness */
@media (max-width: 700px) {
    .aph-skin .hero {
        padding: 10px 16px 56px;
    }

    .aph-skin .hero-art .car-line {
        width: 92%;
        right: -40px;
        opacity: 0.75;
    }

    .aph-skin .aph-hero {
        padding: 34px 16px 46px;
    }

    .aph-skin .aph-hero-art .aph-car-line {
        width: 92%;
        right: -40px;
        opacity: 0.75;
    }
}

/* menu links */
.aph-skin ul.mnu > li.mnu > a,
.aph-skin ul.mnu > li > a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block;
}

/* hover shading across the whole rectangle */
.aph-skin ul.mnu > li.mnu > a:hover,
.aph-skin ul.mnu > li > a:hover {
    background-color: #111 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* active tab */
.aph-skin ul.mnu > li.mnu > a.active,
.aph-skin ul.mnu > li > a.active {
    background-color: #2c4167 !important;
    color: #ffffff !important;
}

/* Make commandLink look like a button inside cards */
.aph-skin .aph-menu-safe-link,
.aph-menu-safe-link {
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-block;
}

/* ===== Professional disclaimer header layout ===== */
.aph-card-head-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Tighten small subtitle under title */
.aph-tight {
    margin-top: 4px;
}

/* Make the commandLink look like a button */
.aph-btn-link {
    display: inline-block;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    color: #ffffff !important;
    font-weight: 800;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
}
.aph-btn-link:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(21,170,255,0.22);
    box-shadow: 0 10px 24px rgba(21,170,255,0.10);
}

/* Warning callout variant */
.aph-callout.aph-callout-warning {
    border: 1px solid rgba(255, 193, 7, 0.25);
    background: rgba(255, 193, 7, 0.08);
}

/* ===== Confirm dialog styling ===== */
.aph-confirm-dialog .p-dialog-header {
    background: rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.aph-confirm-dialog .p-dialog-content {
    padding: 16px !important;
}
.aph-confirm-yes {
    border-radius: 12px !important;
    font-weight: 800 !important;
}
.aph-confirm-no {
    border-radius: 12px !important;
    font-weight: 700 !important;
    opacity: 0.9;
}

/* =========================================================
   HARD LOCK: Disable OS dark-mode influence
   ========================================================= */

/* Tell the browser we only support light. This stops UA dark adjustments
   for form controls, scrollbars, etc. */
html {
    color-scheme: light !important;
}

/* Neutralize prefers-color-scheme: dark overrides by forcing our variables
   to light values at the skin boundary. */
.aph-skin {
    --aph-bg: #ffffff !important;
    --aph-surface: rgba(255, 255, 255, 0.92) !important;
    --aph-surface-border: rgba(17, 24, 39, 0.10) !important;
    --aph-text: #111827 !important;
    --aph-text-muted: rgba(17, 24, 39, 0.70) !important;

    --aph-accent: #15aaff !important;

    --aph-menu-bg: rgba(0, 0, 0, 0.78) !important;
    --aph-menu-text: #ffffff !important;
}

.aph-skin {
    background-image: url("https://chat.autoparthotline.com/usercontent/new-background-01.jpg") !important;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Ensure the main containers actually use the locked variables */
.aph-skin,
.aph-skin .aph-page,
.aph-skin .main-content,
.aph-skin .aph-card,
.aph-skin .card {
    background: var(--aph-surface) !important;
    border-color: var(--aph-surface-border) !important;
    color: var(--aph-text) !important;
}