/**
 * WP SalesFlow - Frontend Styles
 */

/* Admin Settings Tabs */
.wp-salesflow-custom-colors-table {
    margin-top: 10px;
}

.wp-salesflow-custom-colors-table th {
    padding: 10px;
    width: 150px;
}

.wp-salesflow-custom-colors-table td {
    padding: 10px;
}

/* CSS Variables for Theming */
:root {
    --wp-salesflow-background-color: #f9f9f9; /* General background for dashboard wrapper and some elements */
    --wp-salesflow-form-background: #fff;     /* Background for forms, tabs, tables */
    --wp-salesflow-text-color: #333;          /* Primary text color */
    --wp-salesflow-heading-color: #333;       /* Heading text color */
    --wp-salesflow-border-color: #e5e5e5;     /* General border color */
    --wp-salesflow-light-border-color: #f0f0f0; /* Lighter border for headings */
    --wp-salesflow-link-color: #0073aa;       /* Link color (WordPress default blue) */
    --wp-salesflow-link-hover-color: #005177; /* Link hover color */
    --wp-salesflow-button-primary-bg: #2ea44f; /* Primary button background (e.g., submit) */
    --wp-salesflow-button-primary-hover-bg: #2c974b; /* Primary button hover background */
    --wp-salesflow-button-secondary-bg: #0073aa; /* Secondary button background (e.g., search, add product) */
    --wp-salesflow-button-secondary-hover-bg: #005177; /* Secondary button hover background */
    --wp-salesflow-danger-button-bg: #dc3232; /* Danger button background (e.g., delete) */
    --wp-salesflow-danger-button-hover-bg: #cc1818; /* Danger button hover background */
    --wp-salesflow-table-header-bg: #f9f9f9;  /* Table header background */
    --wp-salesflow-table-row-even-bg: #fdfdfd; /* Table even row background */
    --wp-salesflow-table-row-odd-bg: #fff;    /* Table odd row background */
    --wp-salesflow-tab-inactive-bg: #f0f0f0;  /* Inactive tab background */
    --wp-salesflow-tab-inactive-color: #555;  /* Inactive tab text color */
    --wp-salesflow-tab-active-bg: #fff;       /* Active tab background */
    --wp-salesflow-tab-active-color: #000;    /* Active tab text color */
    --wp-salesflow-input-bg: #fff;            /* Input background color */
    --wp-salesflow-input-color: #333;         /* Input text color */
    --wp-salesflow-input-border: #ddd;        /* Input border color */
    --wp-salesflow-success-color: green;      /* Success message color */
    --wp-salesflow-error-color: red;          /* Error message color */
}

/* General Wrapper */
.wp-salesflow-dashboard-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 20px 0;
    width: 100%;
    background-color: var(--wp-salesflow-background-color);
    color: var(--wp-salesflow-text-color);
    box-sizing: border-box;
}

.wp-salesflow-dashboard-wrapper h3, .wp-salesflow-dashboard-wrapper h4, .wp-salesflow-dashboard-wrapper h5 {
    border-bottom: 2px solid var(--wp-salesflow-light-border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--wp-salesflow-heading-color);
}

/* Center the login required message */
.wp-salesflow-dashboard-wrapper > p {
    text-align: center;
}


/* Form Styles */
.wp-salesflow-frontend-form, .product-form-wrapper {
    background: var(--wp-salesflow-form-background);
    padding: 25px;
    border: 1px solid var(--wp-salesflow-border-color);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-bottom: 30px;
}

#wp-salesflow-advanced-filters-wrapper {
    background: var(--wp-salesflow-form-background); /* 일관성을 위해 폼 배경색 사용 */
    border: 1px solid var(--wp-salesflow-border-color);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px; /* 약간 둥근 모서리 */
}

.wp-salesflow-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 250px부터 자동으로 열 맞춤 */
    gap: 20px; /* 필터 그룹 간 간격 */
    align-items: end; /* 필터 그룹 내부 아이템들을 하단으로 정렬 */
}

.wp-salesflow-filter-form .filter-group {
    display: flex;
    flex-direction: column; /* 레이블 위에 입력 필드 */
    gap: 5px; /* 레이블과 입력 필드 사이 간격 */
}

.wp-salesflow-filter-form .filter-group label {
    font-weight: bold;
    color: var(--wp-salesflow-text-color);
    margin-bottom: 0; /* flex-direction: column으로 인해 필요 없음 */
}

.wp-salesflow-filter-form input[type="date"],
.wp-salesflow-filter-form select {
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid var(--wp-salesflow-input-border);
    border-radius: 4px;
    background-color: var(--wp-salesflow-input-bg);
    color: var(--wp-salesflow-input-color);
}

/* Clear button (if re-added later) or general button style for filters */
.wp-salesflow-filter-form .button {
    background-color: var(--wp-salesflow-button-secondary-bg);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.2s;
    text-decoration: none; /* For a tags */
    display: inline-block; /* For a tags */
    margin-top: auto; /* Grid item의 하단에 정렬 */
}

.wp-salesflow-filter-form .button:hover {
    background-color: var(--wp-salesflow-button-secondary-hover-bg);
}

.wp-salesflow-frontend-form .form-row, .product-form-wrapper .form-row { 
    margin-bottom: 15px; 
}
/* 레이블 옆에 입력 필드를 배치할 form-row */
.wp-salesflow-frontend-form .form-row.form-row-inline, .product-form-wrapper .form-row.form-row-inline {
    display: flex;
    align-items: center;
    gap: 15px; /* 레이블과 입력 필드 사이 간격 */
}



/* Flexbox for inline form groups */
.wp-salesflow-frontend-form .form-group-inline {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    gap: 20px; /* Space between form rows */
    margin-bottom: 15px; /* Consistent spacing with single form rows */
}

.wp-salesflow-frontend-form .form-group-inline .form-row {
    flex: 1; /* Distribute space equally among items */
    min-width: 250px; /* Minimum width before wrapping */
    margin-bottom: 0; /* Remove individual margin as gap handles spacing */
}

.wp-salesflow-frontend-form .form-group-inline .form-row label {
    display: block; /* 레이블 위에 입력 필드가 오도록 */
    margin-bottom: 5px; /* 레이블 아래 간격 */
    min-width: unset; /* 인라인 필드 label의 min-width 오버라이드 방지 */
    margin-right: 0;
    white-space: normal;
}

.wp-salesflow-frontend-form label, .product-form-wrapper label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 5px; /* 기본 레이블은 아래에 마진 */
    color: var(--wp-salesflow-text-color);
}
/* form-row-inline 내의 레이블 스타일 */
.wp-salesflow-frontend-form .form-row.form-row-inline label, .product-form-wrapper .form-row.form-row-inline label {
    min-width: 150px; /* 인라인 필드 레이블의 최소 너비 설정 */
    margin-right: 15px; /* 레이블과 입력 필드 사이 간격 */
    margin-bottom: 0; /* 인라인 필드는 아래 마진 없음 */
    white-space: nowrap; /* 레이블 텍스트 한 줄로 표시 */
}

.wp-salesflow-frontend-form input[type="text"],
.wp-salesflow-frontend-form input[type="email"],
.wp-salesflow-frontend-form input[type="date"],
.wp-salesflow-frontend-form select,
.wp-salesflow-frontend-form textarea,
.product-form-wrapper input[type="text"],
.wp-salesflow-search-form input[type="search"],
.wp-salesflow-product-item select,
.wp-salesflow-product-item input[type="number"],
.wp-salesflow-product-item input[type="text"],
.wp-salesflow-product-item textarea,
#wp_salesflow_loginform input[type="text"],
#wp_salesflow_loginform input[type="password"] {
    background-color: var(--wp-salesflow-input-bg);
    color: var(--wp-salesflow-input-color);
    border: 1px solid var(--wp-salesflow-input-border);
}

.wp-salesflow-frontend-form input[type="text"],
.wp-salesflow-frontend-form input[type="email"],
.wp-salesflow-frontend-form input[type="date"],
.wp-salesflow-frontend-form select,
.wp-salesflow-frontend-form textarea,
.product-form-wrapper input[type="text"] {
    width: 100%;
    max-width: 400px; /* 적절한 최대 너비 설정 */
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 4px;
}
/* form-row-inline 내의 입력 필드는 flex-grow 적용 */
.wp-salesflow-frontend-form .form-row.form-row-inline input[type="text"],
.wp-salesflow-frontend-form .form-row.form-row-inline input[type="email"],
.wp-salesflow-frontend-form .form-row.form-row-inline input[type="date"],
.wp-salesflow-frontend-form .form-row.form-row-inline select,
.wp-salesflow-frontend-form .form-row.form-row-inline textarea,
.product-form-wrapper .form-row.form-row-inline input[type="text"] { /* product-form-wrapper에도 적용 */
    flex-grow: 1;
    max-width: none; /* flex-grow가 적용된 경우 max-width 제한 해제 */
}



.wp-salesflow-frontend-form .form-group-inline .form-row {
    flex: 1; /* Distribute space equally among items */
    min-width: 250px; /* 기존 280px에서 조정하여 더 많은 필드를 한 줄에 배치 가능하게 함 */
    margin-bottom: 0; /* Remove individual margin as gap handles spacing */
}

.wp-salesflow-frontend-form textarea {
    height: 120px;
}

#wp_salesflow_content {
    width: 100%;
    max-width: none; /* 상세 내용 입력창의 최대 너비 제한 해제 */
}

/* 영업 진행 사항 히스토리 스크롤 */
.wp-salesflow-sales-progress-history-list {
    max-height: 200px; /* 최대 높이 설정 */
    overflow-y: auto; /* 스크롤바 추가 */
    border: 1px solid var(--wp-salesflow-border-color);
    padding: 10px;
    background-color: var(--wp-salesflow-background-color);
    margin-top: 10px;
    margin-bottom: 20px;
    list-style: none;
}

.wp-salesflow-frontend-form input[type="submit"], .product-form-wrapper input[type="submit"] {
    background-color: var(--wp-salesflow-button-primary-bg);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s;
}


.wp-salesflow-frontend-form input[type="submit"]:hover, .product-form-wrapper input[type="submit"]:hover {
    background-color: var(--wp-salesflow-button-primary-hover-bg);
}

#wp-salesflow-add-product {
    background-color: var(--wp-salesflow-button-primary-bg);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.2s;
}

#wp-salesflow-add-product:hover {
    background-color: var(--wp-salesflow-button-primary-hover-bg);
}


/* Search Form Styles */
.wp-salesflow-search-form {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.wp-salesflow-search-form input[type="search"] {
    max-width: 800px;
    width: 400px;
    padding: 8px 12px;
    border: 1px solid var(--wp-salesflow-input-border);
    border-radius: 4px;
    background-color: var(--wp-salesflow-input-bg);
    color: var(--wp-salesflow-input-color);
}

.wp-salesflow-search-form input[type="submit"] {
    background-color: var(--wp-salesflow-button-secondary-bg);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* Table Styles */
.wp-salesflow-lead-table, .wp-salesflow-product-table, .wp-salesflow-stats-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.wp-salesflow-lead-table th, .wp-salesflow-lead-table td,
.wp-salesflow-product-table th, .wp-salesflow-product-table td,
.wp-salesflow-stats-table th, .wp-salesflow-stats-table td { 
    border: 1px solid var(--wp-salesflow-border-color); 
    padding: 12px; 
    text-align: left; 
}

.wp-salesflow-lead-table th, .wp-salesflow-lead-table td,
.wp-salesflow-product-table th, .wp-salesflow-product-table td,
.wp-salesflow-stats-table th, .wp-salesflow-stats-table td { 
    border: 1px solid var(--wp-salesflow-border-color); 
    padding: 12px; 
    text-align: left; 
}

.wp-salesflow-lead-table th, .wp-salesflow-product-table th, .wp-salesflow-stats-table th { 
    background-color: var(--wp-salesflow-table-header-bg); 
    font-weight: bold;
}

.wp-salesflow-lead-table tr:nth-child(even), .wp-salesflow-product-table tr:nth-child(even), .wp-salesflow-stats-table tr:nth-child(even) {
    background-color: var(--wp-salesflow-table-row-even-bg);
}

.wp-salesflow-lead-table tr:nth-child(odd), .wp-salesflow-product-table tr:nth-child(odd), .wp-salesflow-stats-table tr:nth-child(odd) {
    background-color: var(--wp-salesflow-table-row-odd-bg);
}

.wp-salesflow-lead-table a, .wp-salesflow-product-table a, .wp-salesflow-stats-table a {
    color: var(--wp-salesflow-link-color);
    text-decoration: none;
    font-weight: bold;
}
.wp-salesflow-lead-table a:hover, .wp-salesflow-product-table a:hover, .wp-salesflow-stats-table a:hover {
    text-decoration: underline;
}

.status-publish { 
    color: #4CAF50; /* Green */
    font-weight: bold;
}
.status-pending { 
    color: #FF9800; /* Orange */
    font-weight: bold;
}

/* Tabs Styles */
.wp-salesflow-tabs {
    margin-top: 20px;
}

ul.wp-salesflow-tab-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid var(--wp-salesflow-border-color);
}

ul.wp-salesflow-tab-nav li {
    margin: 0 5px 0 0;
}

ul.wp-salesflow-tab-nav li.wp-salesflow-logout-tab {
    margin-left: 20px; /* 로그아웃 버튼을 다른 탭과 시각적으로 분리 */
}

ul.wp-salesflow-tab-nav li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--wp-salesflow-tab-inactive-color);
    background: var(--wp-salesflow-tab-inactive-bg);
    border: 1px solid var(--wp-salesflow-border-color);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    position: relative;
    top: 2px;
}

ul.wp-salesflow-tab-nav li.active a {
    background: var(--wp-salesflow-tab-active-bg);
    border-bottom: 2px solid var(--wp-salesflow-tab-active-bg);
    color: var(--wp-salesflow-tab-active-color);
    font-weight: bold;
}

.wp-salesflow-tab-content {
    border: 1px solid var(--wp-salesflow-border-color);
    padding: 20px;
    background: var(--wp-salesflow-form-background);
    border-top: none;
    margin-top: -2px;
}

.wp-salesflow-tab-content .tab-pane {
    display: none;
}

.wp-salesflow-tab-content .tab-pane.active {
    display: block;
}

/* Stats Table Layout */
.wp-salesflow-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.wp-salesflow-chart-wrapper {
    background: var(--wp-salesflow-form-background);
    padding: 20px;
    border: 1px solid var(--wp-salesflow-border-color);
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.wp-salesflow-chart-wrapper h5 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--wp-salesflow-heading-color);
    text-align: center;
}

/* Responsive: Stack charts on smaller screens */
@media (max-width: 1024px) {
    .wp-salesflow-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wp-salesflow-stats-container {
        grid-template-columns: 1fr;
    }
}
/* Dynamic Product Input Table Styles */
.wp-salesflow-product-input-table {
    border: 1px solid var(--wp-salesflow-border-color);
    background-color: var(--wp-salesflow-background-color);
    margin-bottom: 20px;
    display: grid;
    /* Define 5 columns: Product, Quantity, Amount, Notes, Delete */
    grid-template-columns: minmax(150px, 1.5fr) minmax(80px, 0.5fr) minmax(100px, 1fr) minmax(150px, 1.5fr) 80px;
    gap: 1px; /* Gap between grid items to simulate borders */
    background-color: var(--wp-salesflow-border-color); /* Border color */
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.wp-salesflow-product-table-header {
    display: contents; /* Allow children to participate in parent grid */
}

.wp-salesflow-product-table-header div {
    background-color: var(--wp-salesflow-table-header-bg);
    padding: 10px 12px;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid var(--wp-salesflow-border-color); /* Visual separation for header */
}

.wp-salesflow-product-table-header div:last-child {
    text-align: center; /* Center "삭제" header */
}

#wp-salesflow-products-container {
    display: contents; /* Allow children to participate in parent grid */
}

.wp-salesflow-product-item {
    display: contents; /* Allow children to participate in parent grid */
}

.wp-salesflow-product-item > * { /* Apply styles to direct children (inputs, select, button) */
    background-color: var(--wp-salesflow-form-background);
    padding: 8px 12px;
    border: none; /* Remove individual borders */
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.wp-salesflow-product-item select,
.wp-salesflow-product-item input[type="number"],
.wp-salesflow-product-item input[type="text"],
.wp-salesflow-product-item textarea {
    width: 100%; /* Fill the grid cell */
    max-width: none; /* Remove any max-width constraints */
    flex-grow: 1; /* Allow to grow within flex container */
    border: 1px solid var(--wp-salesflow-input-border); /* Add a subtle border to inputs */
    border-radius: 4px;
    padding: 5px;
    background-color: var(--wp-salesflow-input-bg);
    color: var(--wp-salesflow-input-color);
}

.wp-salesflow-product-item select {
    appearance: none; /* Remove default select arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22var(--wp-salesflow-link-color)%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%00-13.2-5.4H18.6c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%000%2082.2c0%204.6%201.8%208.9%205.4%2013.2l128%20128c3.9%203.9%208.9%205.7%2013.2%205.7s9.3-1.8%2013.2-5.7l128-128c3.6-3.6%205.4-7.9%205.4-12.8%200-4.6-1.8-9.1-5.4-12.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 30px; /* Space for custom arrow */
}


.wp-salesflow-product-item .wp-salesflow-remove-product {
    background-color: var(--wp-salesflow-danger-button-bg);
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    justify-self: center; /* Center button horizontally in its grid cell */
    white-space: nowrap; /* Prevent text wrapping */
    height: 32px; /* Fixed height for alignment */
    line-height: 1;
    display: flex;
    align-items: center;
}

.wp-salesflow-product-item .wp-salesflow-remove-product:hover {
    background-color: var(--wp-salesflow-danger-button-hover-bg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-salesflow-product-input-table {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }
    .wp-salesflow-product-table-header div {
        display: none; /* Hide headers on small screens */
    }
    .wp-salesflow-product-item > * {
        padding: 10px;
        border-bottom: 1px solid var(--wp-salesflow-border-color);
    }
    .wp-salesflow-product-item .wp-salesflow-remove-product {
        position: static;
        width: 100%;
        margin-top: 10px;
    }
}
/* Login Form Specific Styles */
.wp-salesflow-dashboard-wrapper .wp-salesflow-login-form {
    background: var(--wp-salesflow-form-background);
    padding: 30px;
    border: 1px solid var(--wp-salesflow-border-color);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    max-width: 400px; /* Limit width for better appearance */
    margin: 20px auto; /* Center the form */
    border-radius: 8px;
}

#wp_salesflow_loginform {
    margin: 0; /* Remove default form margin */
}

#wp_salesflow_loginform p {
    margin-bottom: 15px; /* Spacing between form elements */
}

#wp_salesflow_loginform label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--wp-salesflow-text-color);
}

#wp_salesflow_loginform input[type="text"],
#wp_salesflow_loginform input[type="password"] {
    background-color: var(--wp-salesflow-input-bg);
    color: var(--wp-salesflow-input-color);
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wp-salesflow-input-border);
    border-radius: 5px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 16px;
}

#wp_salesflow_loginform .login-remember {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#wp_salesflow_loginform .login-remember label {
    margin-bottom: 0;
    margin-left: 5px;
    font-weight: normal;
}

#wp_salesflow_loginform input[type="checkbox"] {
    width: auto; /* Override 100% width for checkboxes */
    margin-right: 5px;
}

#wp_salesflow_loginform input[type="submit"] {
    width: 100%;
    background-color: var(--wp-salesflow-link-color); /* WordPress primary blue */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s;
}

#wp_salesflow_loginform input[type="submit"]:hover {
    background-color: var(--wp-salesflow-link-hover-color); /* Darker blue on hover */
}

/* Links below the form */
.wp-salesflow-dashboard-wrapper .wp-salesflow-register-link,
.wp-salesflow-dashboard-wrapper .wp-salesflow-lostpassword-link {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}

.wp-salesflow-dashboard-wrapper .wp-salesflow-register-link a,
.wp-salesflow-dashboard-wrapper .wp-salesflow-lostpassword-link a {
    color: var(--wp-salesflow-link-color); /* WordPress primary blue */
    text-decoration: none;
    font-weight: bold;
}

.wp-salesflow-dashboard-wrapper .wp-salesflow-register-link a:hover,
.wp-salesflow-dashboard-wrapper .wp-salesflow-lostpassword-link a:hover {
    text-decoration: underline;
}

/* Theme Overrides (Light/Dark/System) */

/* Dark Mode (explicitly set if user chooses dark) */
body.wp-salesflow-theme-dark {
    --wp-salesflow-background-color: #2c2c2c;
    --wp-salesflow-form-background: #3a3a3a;
    --wp-salesflow-text-color: #e0e0e0;
    --wp-salesflow-heading-color: #f0f0f0;
    --wp-salesflow-border-color: #555;
    --wp-salesflow-light-border-color: #444;
    --wp-salesflow-link-color: #82b1ff; /* Lighter blue for dark mode */
    --wp-salesflow-link-hover-color: #a7d9ff;
    --wp-salesflow-button-primary-bg: #4caf50;
    --wp-salesflow-button-primary-hover-bg: #66bb6a;
    --wp-salesflow-button-secondary-bg: #64b5f6;
    --wp-salesflow-button-secondary-hover-bg: #90caf9;
    --wp-salesflow-danger-button-bg: #ef5350;
    --wp-salesflow-danger-button-hover-bg: #e57373;
    --wp-salesflow-table-header-bg: #4a4a4a;
    --wp-salesflow-table-row-even-bg: #3a3a3a;
    --wp-salesflow-table-row-odd-bg: #333;
    --wp-salesflow-tab-inactive-bg: #4a4a4a;
    --wp-salesflow-tab-inactive-color: #ccc;
    --wp-salesflow-tab-active-bg: #3a3a3a;
    --wp-salesflow-tab-active-color: #f0f0f0;
    --wp-salesflow-input-bg: #444;
    --wp-salesflow-input-color: #e0e0e0;
    --wp-salesflow-input-border: #666;
}

/* System Mode and dark media preference */
@media (prefers-color-scheme: dark) {
    body.wp-salesflow-theme-system { /* Apply dark theme if system is dark and theme is system */
        --wp-salesflow-background-color: #2c2c2c;
        --wp-salesflow-form-background: #3a3a3a;
        --wp-salesflow-text-color: #e0e0e0;
        --wp-salesflow-heading-color: #f0f0f0;
        --wp-salesflow-border-color: #555;
        --wp-salesflow-light-border-color: #444;
        --wp-salesflow-link-color: #82b1ff; /* Lighter blue for dark mode */
        --wp-salesflow-link-hover-color: #a7d9ff;
        --wp-salesflow-button-primary-bg: #4caf50;
        --wp-salesflow-button-primary-hover-bg: #66bb6a;
    --wp-salesflow-button-secondary-bg: #64b5f6;
    --wp-salesflow-button-secondary-hover-bg: #90caf9;
    --wp-salesflow-danger-button-bg: #ef5350;
    --wp-salesflow-danger-button-hover-bg: #e57373;
    --wp-salesflow-table-header-bg: #4a4a4a;
    --wp-salesflow-table-row-even-bg: #3a3a3a;
    --wp-salesflow-table-row-odd-bg: #333;
    --wp-salesflow-tab-inactive-bg: #4a4a4a;
    --wp-salesflow-tab-inactive-color: #ccc;
    --wp-salesflow-tab-active-bg: #3a3a3a;
    --wp-salesflow-tab-active-color: #f0f0f0;
    --wp-salesflow-input-bg: #444;
    --wp-salesflow-input-color: #e0e0e0;
    --wp-salesflow-input-border: #666;
    }
}

/* Remove old specific dark mode adjustments */
/* @media (prefers-color-scheme: dark) { ... } and body.dark-theme ... are now handled by variable overrides above */

.wp-salesflow-form-success {
    color: var(--wp-salesflow-success-color);
    border: 1px solid var(--wp-salesflow-success-color);
    padding: 15px;
    margin-bottom: 20px;
}

.wp-salesflow-form-errors {
    color: var(--wp-salesflow-error-color);
    border: 1px solid var(--wp-salesflow-error-color);
    padding: 15px;
    margin-bottom: 20px;
}

/* Pagination Styles */
.wp-salesflow-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.wp-salesflow-pagination .button {
    min-width: 40px;
    text-align: center;
    padding: 8px 12px;
}

.wp-salesflow-pagination .current-page {
    cursor: default;
}

.wp-salesflow-pagination .dots {
    padding: 8px 5px;
    color: var(--wp-salesflow-text-color);
}

.wp-salesflow-pagination p {
    text-align: center;
    margin-top: 10px;
    color: var(--wp-salesflow-text-color);
}

/* Two-column layout for details and internal notes */
.wp-salesflow-two-column {
    display: flex;
    gap: 20px; /* Space between the two columns */
    margin-bottom: 15px; /* Consistent with other form-row margins */
}

.wp-salesflow-two-column .form-row {
    flex: 1; /* Each column takes equal width */
    margin-bottom: 0; /* Remove bottom margin from child form-rows as gap handles spacing */
}

/* Ensure textareas within the two-column layout fill their space */
.wp-salesflow-two-column textarea {
    width: 100%;
    max-width: none; /* remove max-width restriction */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Responsive adjustment for two-column layout */
@media (max-width: 768px) {
    .wp-salesflow-two-column {
        flex-direction: column; /* Stack columns vertically on small screens */
    }
}