/* Root-level color variables */
:root {
  /* Plus Plan - Mid-Tier */
  --twx-plus-primary: #F97316;       /* orange-500 */
  --twx-plus-accent: #FDBA74;        /* orange-300 */
  --twx-plus-hover: #EA580C;         /* orange-600 */
  --twx-plus-bg-highlight: #FFF7ED;

  /* Pro Plan - Top-Tier */
  --twx-pro-primary: #8B5CF6;        /* violet-500 */
  --twx-pro-accent: #A78BFA;         /* violet-400 */
  --twx-pro-hover: #7C3AED;          /* violet-600 */
  --twx-pro-bg-highlight: #F5F3FF;
}

/* ----- PLUS PLAN STYLES ----- */
.twx-plus {
  color: var(--twx-plus-primary);
  background-color: var(--twx-plus-bg-highlight);
}

.twx-plus-button {
  background-color: var(--twx-plus-primary);
  color: #fff;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.twx-plus-button:hover {
  background-color: var(--twx-plus-hover);
}

.twx-plus-accent-text {
  color: var(--twx-plus-accent);
}

/* ----- PRO PLAN STYLES ----- */
.twx-pro {
  color: var(--twx-pro-primary);
  background-color: var(--twx-pro-bg-highlight);
}

.twx-pro-button {
  background-color: var(--twx-pro-primary);
  color: #fff;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.twx-pro-button:hover {
  background-color: var(--twx-pro-hover);
}

.twx-pro-accent-text {
  color: var(--twx-pro-accent);
}

.twx-pro-gradient {
  background: linear-gradient(135deg, var(--twx-pro-accent), var(--twx-pro-primary));
  color: #fff;
  padding: 1rem;
  border-radius: 0.75rem;
}

.twx-chat-feature-button {
  background-color: #087051;
  color: #fff;
  border: none;
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

ul {
    padding-left: 20px; 
}

.twx-chat-more-info-btn {
  background-color: #f6f1e7;
  border: 1.5px solid #bfa76a;
  color: #7c5c35;
  font-size: 0.9em;
  font-weight: bold;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  text-align: center;
  line-height: 1.4em;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5em;
  box-shadow: 0 1px 2px rgba(191, 167, 106, 0.2);
  transition: background 0.2s, color 0.2s, border 0.2s;
}

.twx-chat-more-info-btn:hover {
  background-color: #e9e2d3;
  color: #5c442a;
}

.twx-chat-admin-message {
    display: none;
    align-items: center;
    justify-content: flex-start;
    background-color: #f0f6ff; /* soft blue, easy on the eyes */
    border-left: 4px solid #2271b1; /* WP blue accent */
    color: #1e1e1e;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Chatbot User Fields inner table */
#twx-chat-chatbot-user-fields-table {
    width: auto;
    max-width: 100%;
    table-layout: auto;    
}

#twx-chat-chatbot-user-fields-table td:first-child,
#twx-chat-chatbot-user-fields-table th:first-child {
    width: 30px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

#twx-chat-chatbot-user-fields-table th,
#twx-chat-chatbot-user-fields-table td {
  padding: 3px 6px;
  line-height: 1.2;
  vertical-align: middle;
}

/* Style the table inside the label with the specific ID */
#twx-chat-chatlog-grid table, 
#twx-chat-knowledgebase-grid table {
    width: 100%;
    border-collapse: collapse; /* Removes gaps between table cells */
    margin: 20px 0; /* Adds margin above and below the table */
    border: 1px solid #ddd; /* Adds a border around the entire table */
    border-radius: 4px; /* Rounds the corners of the table */
    overflow: hidden; /* Ensures the border-radius is applied correctly */
}

#twx-chat-chatlog-grid th, #twx-chat-chatlog-grid td, 
#twx-chat-knowledgebase-grid th, #twx-chat-knowledgebase-grid td {
    padding: 12px; 
    text-align: left; 
	vertical-align: top; 
    border-bottom: 1px solid #ddd; 
}

#twx-chat-chatlog-grid thead, 
#twx-chat-knowledgebase-grid thead {
    background-color: #f4f4f4; /* Light gray background for table header */
}

/*
#chatLogEntriesTable th.sortable, 
#knowledgebaseEntriesTable th.sortable {
	color: #5cfa4d;
}
*/

th.sortable {
    cursor: pointer !important;
    color: #5cfa4d !important;
}

td.similar-queryable {
    display: flex;
    align-items: center;  /* Vertically center items */
}

#twx-chat-chatlog-grid th, 
#twx-chat-knowledgebase-grid th {
    font-weight: bold; /* Makes table headers bold */
    background-color: #0073aa; /* Primary color for table header */
    color: #fff; /* White text color for table header */
}

#twx-chat-chatlog-grid tbody tr:nth-child(even), 
#twx-chat-knowledgebase-grid tbody tr:nth-child(even){
    background-color: #f9f9f9; /* Light gray background for even rows */
}

#twx-chat-chatlog-grid tbody tr:hover, 
#twx-chat-knowledgebase-grid tbody tr:hover {
    background-color: #f1f1f1; /* Slightly darker gray background on row hover */
}

/* special layout for orig_text column */
#twx-chat-knowledgebase-grid td[data-colname="orig_text"] pre {
    max-width: 800px;           
    white-space: pre-wrap;      
    word-wrap: break-word;      
    overflow-wrap: break-word;  
    overflow: auto;             
}


#twx-chat-chatlog-grid label,
#twx-chat-knowledgebase-grid label {
    display: block; /* Ensures the label takes up full width */
    margin: 0 auto; /* Centers the label */
}

#chatLogColumnControls {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

#chatLogColumnControls input[type="checkbox"] {
    margin-right: 5px;
	margin-top: 0px;
}

#chatLogColumnControls label {
    font-size: 14px;
    margin-right: 15px;
}

/* Knowledge base buttons container */
#twx-chat-kb-top-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; 
}

#twx-chat-kb-upload-file-form {
    display: flex;
    align-items: center;
    margin-left: auto; /* Push to the right */
}

#twx-chat-kb-upload-file-form input[type="file"] {
    margin-right: 5px; /* Adjust spacing between input and button */
}

#chatlog button, #knowledgebase button {
    padding: 5px 10px;
    margin: 5px 5px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #0073aa;
    cursor: pointer;
}

#chatlog button:hover, #knowledgebase button:hover {
    background-color: #0056b3;
}

.editable-td {
    width: 100%;
    height: auto;
    padding: 5px;
    border: 1px solid #ddd;
    resize: both;
}

.filter-field {
    width: 100%;
    height: auto;
    padding: 5px;
    border: 1px solid #ddd;
    resize: none;
}

.spinner {
	background: url(/wp-admin/images/spinner.gif) no-repeat center;
	background-size: 20px 20px;
	width: 20px;
	height: 20px;
	display: none;
	vertical-align: middle;
}
.spinner.is-active {
	display: inline-block;
}

.twx-invalid-input {
	border: 2px solid red;
	background-color: #ffecec;
}

.twx-upgrade-notice {
    padding: 15px; margin: 20px 0; background: #f8f9fa; border-left: 4px solid #2271b1; border-radius: 6px;
}

.twx-promo-style-1 {
    margin-left: 20px; list-style-type: disc;
}

.twx-promo-style-2 {
    display: inline-block; margin-top: 10px; padding: 8px 16px; background: #2271b1; color: #fff; text-decoration: none; border-radius: 4px;
}

@media screen and (max-width: 768px) {
    #twx-chat-chatlog-grid table, 
    #twx-chat-chatlog-grid thead, 
    #twx-chat-chatlog-grid tbody, 
    #twx-chat-chatlog-grid th, 
    #twx-chat-chatlog-grid td, 
    #twx-chat-chatlog-grid tr,
    #twx-chat-knowledgebase-grid table, 
    #twx-chat-knowledgebase-grid thead, 
    #twx-chat-knowledgebase-grid tbody, 
    #twx-chat-knowledgebase-grid th, 
    #twx-chat-knowledgebase-grid td, 
    #twx-chat-knowledgebase-grid tr 
    {
        display: block; /* Makes the table display as a block on smaller screens */
    }

    #twx-chat-chatlog-grid thead tr, #twx-chat-knowledgebase-grid thead tr {
        display: none; /* Hides the table header on smaller screens */
    }

    #twx-chat-chatlog-grid tr, #twx-chat-knowledgebase-grid tr {
        margin-bottom: 15px; /* Adds space between rows on smaller screens */
        border: 1px solid #ddd; /* Adds a border around each row */
    }

    #twx-chat-chatlog-grid td, #twx-chat-knowledgebase-grid td {
        padding: 10px; /* Adds padding inside table cells on smaller screens */
        text-align: right; /* Aligns text to the right */
		vertical-align: top; /* Align header text to the top */
        position: relative; /* Allows for positioning of pseudo-elements */
    }

    #twx-chat-chatlog-grid td::before, #twx-chat-knowledgebase-grid td::before {
        content: attr(data-label); /* Uses the data-label attribute for table cell labels */
        position: absolute; /* Positions the label absolutely */
        left: 0; /* Aligns the label to the left */
        width: 50%; /* Sets the width of the label */
        padding-left: 10px; /* Adds padding to the left of the label */
        font-weight: bold; /* Makes the label text bold */
        white-space: nowrap; /* Prevents text wrapping */
    }
}