/* ============================================
   DESIGN TOKENS - CSS CUSTOM PROPERTIES
   ============================================
   Centralized color palette and spacing values.
   Update these values to change the entire theme.
   ============================================ */

:root {
    /* Primary Brand Colors */
    --xialab-primary: #3B82F6;
    --xialab-primary-dark: #1a4f7a;
    --xialab-primary-light: #60A5FA;

    /* Background Colors */
    --xialab-bg-dark: #273951;
    --xialab-bg-darker: #1f2d40;
    --xialab-bg-overlay: rgba(1, 56, 104, 0.75);
    --xialab-bg-overlay-light: rgba(1, 56, 104, 0.6);

    /* Surface Colors */
    --xialab-surface-border: #304562;

    /* Text Colors */
    --xialab-text-primary: #ffffff;
    --xialab-text-secondary: #ecf0f1;
    --xialab-text-muted: #7f8c8d;
    --xialab-text-highlight: darksalmon;
    --xialab-text-accent: wheat;

    /* Status Colors */
    --xialab-success: #22c55e;
    --xialab-warning: #f39c12;
    --xialab-error: #ef4444;
    --xialab-info: #3B82F6;

    /* Spacing Scale */
    --xialab-space-xs: 4px;
    --xialab-space-sm: 8px;
    --xialab-space-md: 16px;
    --xialab-space-lg: 24px;
    --xialab-space-xl: 32px;
    --xialab-space-2xl: 48px;

    /* Border Radius */
    --xialab-radius-sm: 4px;
    --xialab-radius-md: 6px;
    --xialab-radius-lg: 8px;
    --xialab-radius-full: 50%;

    /* Font Sizes */
    --xialab-font-xs: 11px;
    --xialab-font-sm: 12px;
    --xialab-font-base: 13px;
    --xialab-font-md: 14px;
    --xialab-font-lg: 16px;
    --xialab-font-xl: 18px;
    --xialab-font-2xl: 24px;

    /* Shadows */
    --xialab-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --xialab-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
    --xialab-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --xialab-transition-fast: 0.15s ease;
    --xialab-transition-normal: 0.2s ease;
    --xialab-transition-slow: 0.3s ease;
}

/* ============================================
   FLEX UTILITIES
   ============================================ */

flex {
    display: flex;
    align-items:stretch;
    overflow: auto;
}

flex-item > flex {
    position: absolute;
    width: 100%;
    height: 100%;
}

flex.h {
    -ms-flex-direction: row;
    flex-direction: row;
}

flex.v {
    -ms-flex-direction: column;
    flex-direction: column;
}

flex-item {
    display: flex;
    position: relative;
    overflow: auto;
}

flex > flex-resizer {
    -ms-flex: 0 0 3px;
    flex: 0 0 3px;
    background: orange;
}

flex.h > flex-resizer {
    cursor: ew-resize;
}

flex.v > flex-resizer {
    cursor: ns-resize;
}

body {
    margin: 0px;
    padding: 0;
    min-height: 100vh;
    font-size: 13px;
    font-family: Arial, Helvetica, Geneva;
}

.ui-growl {
    top: 80px !important;
    /*
    top: auto !important;
    bottom: 50px !important;
    */
}

.my-content-panel {
    padding: 25px 20px 15px 60px;
    line-height: 23px;
    width:90%;
}

.wf-content-panel {
    padding: 5px 10px 10px 10px;
    line-height: 23px;
    width:100%;
}

.layout-menu .menu-separator {
    margin: 0.8rem 0 !important;
}

body .ui-panelgrid .ui-panelgrid-cell {
    background:inherit !important;
    color:inherit !important;
}

.myPanelGrid{
    padding: 5px;
    font-size: 13px;
    text-align: left;
    line-height: 23px;
}

.btnBig:hover {
    background-color: #D28670 !important;
}

body .ui-datatable thead th{
    background:inherit !important;
    border:1px solid var(--surface-400) !important;
    color:inherit !important;
}

body .ui-datatable .ui-datatable-scrollable-header, body .ui-datatable .ui-datatable-scrollable-footer{
    background:inherit !important;
    border:1px solid var(--surface-400) !important;
    color:var(--surface-800) !important;
}

body .ui-paginator{
    background:inherit !important;
    color:var(--surface-800) !important;
}

body .ui-datatable .ui-paginator.ui-paginator-bottom {
    background:inherit !important;
    color:var(--surface-800) !important;
    border:1px solid var(--surface-400) !important;
    border-width: 0 1px 1px 1px;
}

body .ui-datatable .ui-datatable-data>tr{
    background:inherit;
    color:var(--surface-800);
}

body .ui-datatable .ui-datatable-data>tr>td{
    border:1px solid var(--surface-400) !important;
}

body .ui-datatable .ui-datatable-data > tr > td {
    padding: 0.5rem 0.5rem  !important;
}

body .ui-datatable .ui-datatable-footer {
    background:inherit !important;
    color:var(--surface-800) !important;
    border:1px solid var(--surface-400) !important;
    border-width: 0 1px 1px 1px;
}

.layout-content-wrapper {
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("#{resource['diamond-layout:images/xialab_ai.jpg']}");
}

.diamond-icon {
    background-image: url("#{resource['diamond-layout/images/diamond.png']}") !important;
    background-repeat: no-repeat;
    /* Adjust width, height, and other properties as needed */
    width: 16px;
    height: 16px;
    display: inline-block; /* Ensure the icon is displayed correctly */
}

body .ui-tabs .ui-tabs-nav{
    background:inherit !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header{
    background:inherit !important;
    color:inherit !important;
}

body .ui-tabs .ui-tabs-panels{
    background:#1f2d40 !important;
    color:inherit !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
    color:inherit !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    color:inherit !important;
}

body .ui-accordion .ui-accordion-header {
    background:inherit !important;
    color:inherit !important;
    font-size: 14px !important;
}

body .ui-panel .ui-panel-titlebar {
    background:var(--surface-200);
    color:inherit;
}

body .ui-panel .ui-panel-content {
    background:inherit;
    color:inherit;
}

body .ui-datatable .ui-datatable-header {
    background:inherit;
    color:inherit;
}

.ui-menu .ui-menu-parent .ui-menu-child {
    margin-left:4px;
    margin-right: 20px;
}

.ui-picklist .ui-picklist-list{
    height:330px;
    width: 360px;
    line-height:16px;
}

.ui-widget {
    font-size: 13px !important;
}

.panelColumns td {
    vertical-align: top;
}

.panelColumns2 td {
    vertical-align: bottom;
    padding-right: 5px;
}

.helpTip{
    width: 600px;
    line-height: 1.6em;
    background: #ffe7bd;
    padding-left: 10px
}

.btnBckg {
    border-radius: 50% !important;
    width: 160px;
    height: 160px;
    font-size: 18px;
    color: #2779aa !important;
    font-weight: bold;
    border:solid thin #95B8E7;
}

.btnBckg:hover {
    color: darkblue !important;
    border:solid medium salmon !important;
}

.btnBckg:focus {
    outline:none;
}

.btnBckg1 {
    border-radius: 50% !important;
    width: 222px;
    height: 222px;
    background: rgba(255,255,255,0.25) !important;
    border:solid transparent !important;
}

.btnBckg1:hover {
    border:solid medium salmon !important;
}
.btnBckg1:focus {
    outline:none !important;
}

.ui-inputfield{
    font-size: 13px !important;
}

.ui-menuitem .ui-menuitem-link{
    padding:  0.5rem 0.8rem !important;
}

hr.style-one {
    border: 0;
    height: 1px;
    background: #4472c4;
    background-image: -webkit-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    background-image: -moz-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    background-image: -ms-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    background-image: -o-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    margin-top: 8px;
    margin-bottom: 12px;
}

hr.myhr {
    border: 0;
    height: 1px;
    background: #4472c4;
    background-image: -webkit-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    background-image: -moz-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    background-image: -ms-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    background-image: -o-linear-gradient(left, #EDF0F5, #ADB9D3, #4472c4, #ADB9D3,#EDF0F5);
    margin-top: 8px;
    margin-bottom: 12px;
}

.reportBn {
    height:36px;
    width:100px;
    font-size: 14px;
    font-weight: bold;
}

.styleGreen .ui-state-default {
    background-color: transparent!important;
    background: transparent!important;
    border: transparent!important;
    color: tomato !important;
    font-size: 1.8rem;
}
.styleGreen .ui-state-default .ui-icon {
    background: orange; /** insert your background image **/
    font-size: 1.8rem;
    margin: 0;
}

body .ui-accordion .ui-accordion-header{
    background:#1f2d40 !important;
    color:inherit !important;
}

body .ui-accordion .ui-accordion-content{
    background:inherit !important;
    color:inherit !important;
}


body .ui-dialog .ui-dialog-titlebar {
    background: #273951 !important;
    color:inherit !important;
    border-bottom: 1px solid gray;
}

body .ui-dialog .ui-dialog-content {
    background: #273951 !important;
    color:inherit !important;
}

/* unvisited link */
a:link {
    color: var(--primary-color);
}

/* visited link */
a:visited {
    color: darksalmon;
}

/*
* position overlay on current page
*/
.my-float-btn {
    position: fixed;
    width: 72px !important;
    height: 72px !important;
    border-width: 3px !important;
    font-size: 1.2em;
    font-weight: bolder;
    top: 100px;
    right: 36px;
    z-index: 999;
}

body .ui-fileupload .ui-fileupload-buttonbar {
    background:inherit !important;
    color:inherit !important;
}

body .ui-fileupload .ui-fileupload-content{
    background:inherit !important;
    color:inherit !important;
}

body .ui-inputfield {
    background:inherit !important;
    color:inherit !important;
}

body .ui-selectonemenu {
    background:inherit !important;
    color:inherit !important;
}

body .ui-selectcheckboxmenu {
    background:inherit !important;
    color:inherit !important;
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token {
    background:inherit !important;
    color:inherit !important;
}

body .ui-selectcheckboxmenu-panel {
    background: inherit;
    color:inherit;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item {
    background:inherit;
    color:inherit;
}

body .ui-picklist .ui-picklist-caption {
    background:inherit !important;
    color:inherit !important;
}

body .ui-picklist .ui-picklist-list {
    background:inherit;
    color:inherit;
}

body .ui-picklist .ui-picklist-list .ui-picklist-item {
    background:inherit;
    color:inherit;
}

body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
    background: #e3f2fd;
    color: #495057;
}

body .ui-selectonemenu-panel {
    background: var(--surface-100);
    color:var(--surface-800) !important;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item{
    background:inherit;
    color:inherit;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header{
    background:inherit;
    color:inherit;
}

body .ui-scrollpanel {
    background:inherit;
    color:inherit;
}

body .ui-orderlist .ui-orderlist-list {
    background: var(--surface-card);
}

body .ui-orderlist .ui-orderlist-list .ui-orderlist-item {
    color:var(--primary-color);
}

.speeddial-circle-demo .ui-speeddial-circle {
    top: calc(50% - 2rem);
    left: calc(50% - 2rem);
}

body .ui-fieldset .ui-fieldset-legend {
    background: var(--surface-100);
    color:inherit;
}

body .ui-selectonelistbox .ui-selectlistbox-listcontainer .ui-selectlistbox-list .ui-selectlistbox-item {
    color:inherit !important;
}


body .ui-terminal .ui-terminal-prompt {
    font-size: 15px; /* Change the font size */
    font-weight: bold; /* Make the prompt text bold */
}

body .ui-terminal .content {
    font-size: 14px;
}


/* Custom styles for the terminal component */
body .ui-terminal .ui-terminal-command {
    font-size: 14px; /* Change the font size */
    color: darksalmon; /* Green text for output/answers */
}

body .ui-terminal-content {
    white-space: pre-line; /* This ensures that HTML line breaks are correctly rendered */
}

body .ui-wizard	 {
    background:inherit;
    color:inherit;
}

body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
    background:inherit;
    color:inherit;
}

.glow {
    text-shadow: 2px 2px 4px #000000;
}

#cover {
    position: fixed;
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    background: #ebecf0;
    z-index:9999;
}

.ui-fileupload-content {
    min-height: 100px;
}

.layout-topbar{
    padding: 0 1rem;
}

/* Screen reader only class for accessible labels */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   FOCUS INDICATORS - ACCESSIBILITY
   ============================================ */

/* Visible focus indicators for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.ui-button:focus,
.ui-commandlink:focus,
.ui-link:focus {
    outline: 2px solid var(--primary-color, #3B82F6);
    outline-offset: 2px;
}

/* Focus visible for modern browsers - only show outline for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ui-button:focus-visible {
    outline: 2px solid var(--primary-color, #3B82F6);
    outline-offset: 2px;
}

/* Remove outline for mouse users in modern browsers */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.ui-button:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color, #3B82F6);
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */

/* Green button - primary action */
.green-btn,
.ui-button.green-btn {
    background: var(--xialab-success) !important;
    border-color: var(--xialab-success) !important;
    color: var(--xialab-text-primary) !important;
}

.green-btn:hover,
.ui-button.green-btn:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

/* Raised button effect */
.raised-btn,
.ui-button.raised-btn {
    box-shadow: var(--xialab-shadow-md);
    transition: all var(--xialab-transition-normal);
}

.raised-btn:hover,
.ui-button.raised-btn:hover {
    box-shadow: var(--xialab-shadow-lg);
    transform: translateY(-2px);
}

/* Rounded button */
.rounded-btn,
.ui-button.rounded-btn {
    border-radius: var(--xialab-radius-lg) !important;
}

/* ============================================
   UTILITY CLASSES FOR INLINE STYLE REPLACEMENT
   ============================================ */

/* Text alignment */
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* Font weights */
.font-bold {
    font-weight: bold;
}
.font-normal {
    font-weight: normal;
}

/* Common spacing */
.mt-1 {
    margin-top: var(--xialab-space-sm);
}
.mt-2 {
    margin-top: var(--xialab-space-md);
}
.mt-3 {
    margin-top: var(--xialab-space-lg);
}
.mt-4 {
    margin-top: var(--xialab-space-xl);
}
.mb-1 {
    margin-bottom: var(--xialab-space-sm);
}
.mb-2 {
    margin-bottom: var(--xialab-space-md);
}
.mb-3 {
    margin-bottom: var(--xialab-space-lg);
}
.mb-4 {
    margin-bottom: var(--xialab-space-xl);
}
.p-1 {
    padding: var(--xialab-space-sm);
}
.p-2 {
    padding: var(--xialab-space-md);
}
.p-3 {
    padding: var(--xialab-space-lg);
}
.p-4 {
    padding: var(--xialab-space-xl);
}

/* Width utilities */
.w-full {
    width: 100%;
}
.w-auto {
    width: auto;
}
.max-w-sm {
    max-width: 320px;
}
.max-w-md {
    max-width: 480px;
}
.max-w-lg {
    max-width: 640px;
}
.max-w-xl {
    max-width: 768px;
}

/* Display utilities */
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-1 {
    gap: var(--xialab-space-sm);
}
.gap-2 {
    gap: var(--xialab-space-md);
}
.gap-3 {
    gap: var(--xialab-space-lg);
}

/* Background colors using design tokens */
.bg-overlay {
    background: var(--xialab-bg-overlay);
}
.bg-overlay-light {
    background: var(--xialab-bg-overlay-light);
}
.bg-dark {
    background: var(--xialab-bg-dark);
}
.bg-darker {
    background: var(--xialab-bg-darker);
}

/* Text colors using design tokens */
.text-primary {
    color: var(--xialab-text-primary);
}
.text-secondary {
    color: var(--xialab-text-secondary);
}
.text-muted {
    color: var(--xialab-text-muted);
}
.text-highlight {
    color: var(--xialab-text-highlight);
}
.text-accent {
    color: var(--xialab-text-accent);
}
.text-success {
    color: var(--xialab-success);
}
.text-warning {
    color: var(--xialab-warning);
}
.text-error {
    color: var(--xialab-error);
}

/* Timeline icon styling - moved from inline */
.timeline-icon {
    color: var(--xialab-text-accent);
}

/* Event highlight text */
.event-highlight {
    color: var(--xialab-text-highlight);
    font-weight: bold;
}

/* ============================================
   NEWS PAGE STYLES
   ============================================ */

.news-page-content {
    padding: 2% 5%;
    line-height: 25px;
    font-size: 1.2em;
}

.news-timeline-container {
    padding: 30px 40px;
    background: var(--xialab-bg-overlay-light);
    border-radius: var(--xialab-radius-md);
}

/* ============================================
   FORM STYLES
   ============================================ */

/* Common form container styling */
.form-container {
    padding: var(--xialab-space-lg);
    background: var(--xialab-bg-overlay);
    border-radius: var(--xialab-radius-md);
}

/* Label styling */
.form-label {
    font-weight: bold;
    display: block;
    margin-bottom: var(--xialab-space-xs);
}

/* Input field container */
.form-field {
    margin-bottom: var(--xialab-space-md);
}

/* ============================================
   HEADER/TITLE STYLES
   ============================================ */

.page-title {
    font-size: 2.1em;
    font-weight: bold;
    color: whitesmoke;
    text-shadow: 2px 2px 4px #000000;
}

/* Section titles in cards */
.section-title {
    font-size: 1.6rem;
    color: var(--xialab-primary-dark);
    margin-bottom: var(--xialab-space-md);
}

/* Page title container */
.page-title-container {
    width: 100%;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
    height:100px;
    border-bottom: solid var(--xialab-surface-border) 1px;
}

/* ============================================
   CARD STYLES
   ============================================ */

.card-light {
    background: #fff;
    border-radius: var(--xialab-radius-lg);
    padding: var(--xialab-space-xl) var(--xialab-space-lg);
    box-shadow: var(--xialab-shadow-md);
}

.card-dark {
    background: var(--xialab-bg-dark);
    border-radius: var(--xialab-radius-lg);
    padding: var(--xialab-space-xl) var(--xialab-space-lg);
}

/* ============================================
   LIST STYLES
   ============================================ */

.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-check li {
    position: relative;
    padding-left: var(--xialab-space-lg);
}

.list-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--xialab-success);
}

/* ============================================
   PROTOOLS / PRICING PAGE STYLES
   ============================================ */

.protools-page-content {
    padding: 1% 2%;
    margin: 0;
    line-height: 25px;
}

.protools-header {
    padding: 40px 0;
}

.protools-title {
    font-size: 2.5rem;
    margin-bottom: var(--xialab-space-md);
}

.protools-subtitle {
    font-size: 1.2rem;
    color: var(--xialab-text-muted);
}

/* Pricing panel */
.pricing-panel {
    height: 100%;
}

.pricing-panel-pro {
    border-color: var(--xialab-primary-dark) !important;
}

.pricing-free {
    color: var(--xialab-text-muted);
}

.pricing-pro {
    color: var(--xialab-primary-dark);
}

.pricing-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

.pricing-features {
    list-style: none;
    padding: 0;
    line-height: 2.5;
}

/* Feature icons */
.feature-check {
    color: var(--xialab-success);
    margin-right: 10px;
}

.feature-times {
    color: var(--xialab-error);
    margin-right: 10px;
}

.pricing-btn {
    margin-top: 20px;
    width: 80%;
}

/* ============================================
   SERVICES PAGE STYLES
   ============================================ */

.services-header {
    padding: 40px;
    background: #f8f9fa;
    border-radius: var(--xialab-radius-sm);
    margin-bottom: 30px;
}

.services-header h1 {
    margin-bottom: var(--xialab-space-md);
}

.services-header p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.services-feature-icon {
    font-size: 2.1rem !important;
    color: var(--xialab-primary-dark);
    margin-right: 10px;
}

.feature-icon {
    font-size: 2.2rem !important;
    color: #64b5f6;
    margin-bottom: 15px;
}
/* ============================================
   HOME PAGE STYLES
   ============================================ */

/* Height utility */
.h-full {
    height: 100%;
}

/* News card header */
.news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.news-card-title {
    margin: 0;
    color: #333;
}

.news-card-btn {
    font-size: 0.9rem;
}

/* Help card styling */
.help-card {
    height: 100%;
    background-color: #f8f9fa;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--xialab-space-xl);
}

.help-card-icon {
    font-size: 3rem;
    color: var(--xialab-primary-dark);
    margin-bottom: 15px;
}

.help-card-title {
    margin: 0 0 10px 0;
    color: #333;
}

.help-card-text {
    color: var(--xialab-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Landing news card */
.landing-news-card {
    background: #fff;
    border-radius: var(--xialab-radius-md);
    padding: var(--xialab-space-lg);
    box-shadow: var(--xialab-shadow-sm);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE & TABLET
   ============================================ */

/* Tablet devices (768px and below) */
@media (max-width: 768px) {
    /* Adjust login panel width */
    .login-panel .ui-g,
    .login-form-container,
    .register-form-container,
    .reset-form-container {
        width: 90% !important;
        max-width: 480px;
    }

    /* Footer responsive */
    .footer-wrapper {
        flex-direction: column;
        text-align: center !important;
    }

    .footer-links {
        padding-left: 0 !important;
        margin-bottom: 10px;
    }

    /* Adjust dialog width */
    body .ui-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    /* Make content panels responsive */
    .my-content-panel,
    .wf-content-panel {
        width: 95% !important;
        padding: 15px !important;
    }

    /* Adjust button sizes */
    .btnBckg {
        width: 120px;
        height: 120px;
        font-size: 14px;
    }

    .btnBckg1 {
        width: 160px;
        height: 160px;
    }

    /* Adjust floating button */
    .my-float-btn {
        width: 60px !important;
        height: 60px !important;
        font-size: 1em;
        right: 20px;
    }

    /* Responsive tables */
    body .ui-datatable {
        font-size: 12px;
    }

    body .ui-datatable thead th,
    body .ui-datatable .ui-datatable-data > tr > td {
        padding: 0.25rem !important;
    }
}

/* Mobile devices (480px and below) */
@media (max-width: 480px) {
    /* Full width login panel */
    .login-panel .ui-g,
    .login-form-container,
    .register-form-container,
    .reset-form-container {
        width: 95% !important;
        padding: 10px !important;
    }

    /* Login actions stack vertically on mobile */
    .login-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Full screen dialogs on mobile */
    body .ui-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto;
        max-height: 95vh !important;
    }

    /* Adjust content panels */
    .my-content-panel,
    .wf-content-panel {
        width: 100% !important;
        padding: 10px !important;
    }

    /* Smaller circular buttons */
    .btnBckg {
        width: 100px;
        height: 100px;
        font-size: 12px;
    }

    .btnBckg1 {
        width: 140px;
        height: 140px;
    }

    /* Adjust floating button for mobile */
    .my-float-btn {
        width: 56px !important;
        height: 56px !important;
        font-size: 0.9em;
        right: 10px;
        top: 80px;
    }

    /* Stack panel grids vertically */
    body .ui-panelgrid > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    /* Responsive picklist */
    .ui-picklist .ui-picklist-list {
        width: 100% !important;
        height: 250px;
    }

    /* Smaller fonts for mobile */
    body {
        font-size: 12px;
    }

    .ui-widget {
        font-size: 12px !important;
    }

    /* Adjust help tooltips */
    .helpTip {
        width: 90vw;
        max-width: 350px;
    }

    /* Responsive tabs */
    body .ui-tabs .ui-tabs-nav li {
        font-size: 11px !important;
        padding: 5px !important;
    }

    /* Full width input fields */
    body .ui-inputfield,
    body .ui-selectonemenu,
    body .ui-selectcheckboxmenu {
        width: 100% !important;
        max-width: 100%;
    }

    /* Adjust growl position for mobile */
    .ui-growl {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }

}
/* =========================================
   LANDING PAGE DARK THEME
   ========================================= */

/* --- HERO SECTION --- */
/* Text floating directly on background */
.landing-hero-box {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 80px 20px;
    text-align: center;
}

.landing-hero-title {
    color: #ffffff;
    font-size: 3.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Text shadow for readability */
}

.landing-hero-subtitle {
    color: #cfd8dc; /* Light blue-grey */
    font-size: 1.4rem;
    font-weight: 300;
}

/* --- TRUST / STATS BAR --- */
.landing-stats-wrapper {
    /* Very subtle light tint to separate sections */
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
    margin-bottom: 50px !important;
}

.stat-column {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.stat-column:last-child {
    border-right: none;
}

.stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff; /* White numbers */
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #90a4ae; /* Muted blue-grey label */
    margin-top: 5px;
}

/* --- PRODUCT CARDS --- */
/* Dark "Frosted" Cards */
.landing-product-card, .product-box {
    background: rgba(0, 0, 0, 0.3); /* Darker than background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.landing-product-card:hover, .product-box:hover {
    background: rgba(0, 0, 0, 0.5); /* Darkens on hover */
    border-color: rgba(255, 255, 255, 0.3); /* Border glows */
    transform: translateY(-5px);
}

/* Icons MUST be light to pop on dark bg */
.landing-product-icon, .product-icon {
    font-size: 3.5rem;
    color: #64b5f6; /* Light Blue */
    margin-bottom: 20px;
}

.landing-product-title, .product-header h3 {
    color: #ffffff;
    font-size: 1.6rem;
}

.landing-product-desc, .product-body p {
    color: #b0bec5; /* Grey-blue text */
    font-size: 1.1rem;
    line-height: 1.6;
    flex-grow: 1;
}

/* Enterprise Highlight */
.product-enterprise, .enterprise-box {
    border: 1px solid #f39c12; /* Gold border remains */
    background: rgba(243, 156, 18, 0.08); /* Faint gold tint */
}

/* Override Icon color for Enterprise */
.product-enterprise .landing-product-icon,
.enterprise-box .product-icon {
    color: #f39c12;
}

/* --- NEWS SECTION --- */
.landing-news-card {
    background: transparent; /* Seamless */
    padding: 20px;
    border: none;
    box-shadow: none;
}

.landing-news-card h3, .landing-news-card h4 {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.news-row {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Light separator */
}

.news-date-col, .news-date {
    color: #64b5f6; /* Light blue date */
    font-weight: 700;
    min-width: 120px;
}

.news-text-col, .news-desc {
    color: #eceff1; /* Near white text */
}

/* 1. Make Sidebar Glass-like to match the theme */
.layout-sidebar {
    background: rgba(31, 45, 64, 0.75) !important; /* Semi-transparent */
    backdrop-filter: blur(12px); /* The "Frosted Glass" blur effect */
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Subtle edge separation */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2); /* Depth shadow */
}

/* 2. Improve Menu Section Headers (PRODUCTS, COMMUNITY) */
.layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    color: #64b5f6 !important; /* Change from grey to Brand Blue */
    font-weight: 800 !important;
    letter-spacing: 1px;
    font-size: 0.75rem !important;
    margin-top: 1.5rem !important; /* More separation from previous section */
}

/* 3. Improve Menu Items */
.layout-menu ul a {
    color: #e0e0e0 !important;
    border-radius: 6px;
    margin-bottom: 2px;
    transition: all 0.2s;
}

/* Hover Effect */
.layout-menu ul a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateX(5px); /* Subtle movement cue */
}

/* Active/Selected Item Styling */
.layout-menu li.active-menuitem > a {
    background: rgba(100, 181, 246, 0.15) !important; /* Blue tint */
    color: #64b5f6 !important; /* Blue text */
    border-left: 3px solid #64b5f6; /* Left accent bar */
}

/* Hero Section */
.enterprise-hero {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
}
.hero-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.hero-sub {
    color: #b0bec5;
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}