/* Gravity Tables Admin Styles */

.gt-admin-container {
    width: 100%;
    margin: 20px 0;
}

/* Responsive wrapper: prevents the table from pushing the page wider than the viewport */
.gt-responsive-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Responsive wrapper for the table builder/edit screen */
.gt-responsive-builder-wrap {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .gt-responsive-builder-wrap .gt-builder-section {
        padding: 10px;
        box-sizing: border-box;
        max-width: 100%;
    }
    .gt-responsive-builder-wrap .gt-form-row {
        flex-direction: column;
    }
    .gt-responsive-builder-wrap input[type="text"],
    .gt-responsive-builder-wrap select,
    .gt-responsive-builder-wrap textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Ensure action buttons and links meet the 44×44 touch-target minimum on small screens */
@media screen and (max-width: 768px) {
    .gt-responsive-table-wrap .button,
    .gt-responsive-table-wrap .button-small,
    .gt-responsive-table-wrap .row-actions a,
    .gt-responsive-table-wrap .gt-copy-shortcode {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Breadcrumb Styles */
.gt-breadcrumb {
    margin: 10px 0 !important;
}

.gt-breadcrumb a {
    color: #0073aa;
    text-decoration: none;
    font-size: 14px;
}

.gt-breadcrumb a:hover {
    color: #005177;
    text-decoration: underline;
}

/* Builder Sections */
.gt-builder-section {
    background: white;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
}

.gt-section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #ccd0d4;
    padding: 20px;
}

.gt-section-header h2 {
    margin: 0 0 8px 0;
    color: #23282d;
    font-size: 18px;
}

.gt-section-header p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Collapsible Section Styles */
.gt-admin-container .gt-collapsible {
    cursor: pointer !important;
    position: relative;
    transition: background-color 0.2s ease;
    user-select: none;
}

.gt-admin-container .gt-collapsible:hover {
    background: #f0f6fc !important;
}

.gt-admin-container .gt-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

.gt-admin-container .gt-toggle-icon {
    font-size: 14px !important;
    color: #666 !important;
    transition: transform 0.2s ease !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    user-select: none !important;
    border-radius: 2px !important;
}

.gt-admin-container .gt-toggle-icon:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}

.gt-admin-container .gt-collapsible.collapsed .gt-toggle-icon {
    transform: rotate(-90deg) !important;
}

.gt-admin-container .gt-section-content {
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
    overflow: hidden !important;
    max-height: 5000px !important;
    opacity: 1 !important;
}

.gt-admin-container .gt-section-content.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Form Styles */
.gt-form-row {
    margin-bottom: 20px;
}

.gt-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #23282d;
}

.gt-form-row input[type="text"],
.gt-form-row input[type="number"],
.gt-form-row select,
.gt-form-row textarea {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.gt-form-row input:focus,
.gt-form-row select:focus,
.gt-form-row textarea:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 3px rgba(0, 115, 170, 0.3);
}

.gt-form-row .description {
    margin: 5px 0 0 0;
    font-style: italic;
    color: #666;
    font-size: 13px;
}

.gt-field-name-display {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #0073aa;
    font-weight: 600;
    margin-bottom: 5px;
}

/* Basic Settings */
.gt-basic-settings-container {
    padding: 20px;
}

/* Field Selection */
.gt-field-selection-container {
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* Drag and Drop Styles */
.gt-field-placeholder {
    background: #f0f8ff;
    border: 2px dashed #0073aa;
    border-radius: 4px;
    height: 60px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0073aa;
    font-style: italic;
}

.gt-field-placeholder:before {
    content: "Drop field here";
}

.gt-dragging {
    opacity: 0.7;
    transform: rotate(3deg);
    z-index: 1000;
}

.ui-sortable-helper {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-color: #0073aa !important;
    background: #f0f8ff !important;
}

.gt-available-fields,
.gt-selected-fields {
    flex: 1;
}

.gt-available-fields h3,
.gt-selected-fields h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #23282d;
}

#available-fields-list,
#selected-fields-list {
    min-height: 200px;
    border: 2px dashed #ccd0d4;
    border-radius: 6px;
    padding: 15px;
    background: #fafafa;
}

#selected-fields-list {
    background: #f0f8ff;
    border-color: #0073aa;
}

.gt-field-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    position: relative;
}

.gt-field-item:before {
    content: "⋮⋮";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
}

.gt-selected-field {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    position: relative;
}

.gt-selected-field:before {
    content: "⋮⋮";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
}

.gt-field-item:hover {
    border-color: #0073aa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.gt-field-item.ui-sortable-helper {
    transform: rotate(3deg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gt-field-item.gt-field-disabled {
    opacity: 0.5;
    background: #f5f5f5;
    border-color: #ccc;
    cursor: not-allowed;
    position: relative;
}

.gt-field-item.gt-field-disabled:hover {
    border-color: #ccc;
    box-shadow: none;
}

.gt-field-item.gt-field-disabled:before {
    opacity: 0.3;
}

.gt-field-limit-overlay {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.7;
}

.gt-field-info {
    flex: 1;
    margin-left: 20px;
}

.gt-field-label {
    font-weight: 600;
    color: #23282d;
    margin-bottom: 2px;
}

.gt-field-type {
    font-size: 12px;
    color: #666;
    text-transform: capitalize;
}

.gt-field-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

.gt-field-actions button {
    padding: 4px 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Mobile and Tablet toggle buttons */
.gt-field-mobile-toggle,
.gt-field-tablet-toggle {
    background: #f0f0f1;
    color: #50575e;
    transition: all 0.2s ease;
    padding: 6px !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-field-mobile-toggle:hover,
.gt-field-tablet-toggle:hover {
    background: #e0e0e2;
}

.gt-field-mobile-toggle.active,
.gt-field-tablet-toggle.active {
    background: #2271b1;
    color: white;
}

.gt-field-mobile-toggle.active:hover,
.gt-field-tablet-toggle.active:hover {
    background: #135e96;
}

.gt-field-mobile-toggle .dashicons,
.gt-field-tablet-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Settings and Remove buttons */
.gt-field-config,
.gt-field-remove {
    background: #f0f0f1;
    color: #50575e;
    transition: all 0.2s ease;
    padding: 6px !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-field-config:hover {
    background: #2271b1;
    color: white;
}

.gt-field-remove:hover {
    background: #d63638;
    color: white;
}

.gt-field-config .dashicons,
.gt-field-remove .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.gt-config-indicator {
    color: #0073aa;
    font-weight: bold;
    margin-right: 5px;
    font-size: 14px;
}

.gt-configure-btn {
    background: #0073aa;
    color: white;
}

.gt-configure-btn:hover {
    background: #005a87;
}

.gt-remove-btn {
    background: #dc3232;
    color: white;
}

.gt-remove-btn:hover {
    background: #c62d2d;
}

/* Features Grid */
.gt-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gt-feature-group {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 15px;
}

.gt-feature-group h4 {
    margin: 0 0 15px 0;
    color: #23282d;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gt-checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.gt-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}

/* Modal Styles */
.gt-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-modal-content {
    background: white;
    border-radius: 6px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.gt-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ccd0d4;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.gt-modal-header h3 {
    margin: 0;
    color: #23282d;
}

.gt-modal-close {
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0 5px;
}

.gt-modal-close:hover {
    color: #dc3232;
}

.gt-modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Important for flexbox scrolling */
}

/* Custom scrollbar styling for modal body */
.gt-modal-body::-webkit-scrollbar {
    width: 8px;
}

.gt-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.gt-modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.gt-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.gt-modal-footer {
    padding: 20px;
    border-top: 1px solid #ccd0d4;
    text-align: right;
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.gt-modal-footer button {
    margin-left: 10px;
}

/* Preview Styles */
.gt-preview-container {
    padding: 20px;
}

.gt-preview-header {
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
    padding: 15px 20px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #23282d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gt-preview-header .gt-preview-badge {
    background: #0073aa;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
}

.gt-shortcode-display {
    margin-bottom: 30px;
}

.gt-shortcode-display h4 {
    margin: 0 0 10px 0;
    color: #23282d;
}

.gt-shortcode-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f1f1;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.gt-shortcode-box code {
    flex: 1;
    background: transparent;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: #23282d;
}

#copy-shortcode {
    padding: 6px 12px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

#copy-shortcode:hover {
    background: #005a87;
}

.gt-table-preview h4 {
    margin: 0 0 15px 0;
    color: #23282d;
}

#table-preview-area {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    background: white;
    min-height: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Preview Table Styles */
#table-preview-area .gt-table-wrapper {
    margin: 0;
}

#table-preview-area .gt-table-container {
    border: none;
    box-shadow: none;
    border-radius: 0 0 4px 4px;
}

#table-preview-area .gt-table-controls {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    padding: 12px;
}

#table-preview-area .gt-table {
    font-size: 13px;
}

#table-preview-area .gt-table th,
#table-preview-area .gt-table td {
    padding: 10px 12px;
}

#table-preview-area .gt-table th {
    padding: 12px 12px;
}

#table-preview-area .gt-pagination-container {
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    padding: 12px;
}

/* Preview Specific Adjustments */
.gt-preview-note {
    background: #fff8e5;
    border-left: 4px solid #ffb900;
    padding: 15px 20px;
    margin: 0;
    border-radius: 0 0 4px 4px;
    font-size: 13px;
    border-top: 1px solid #ddd;
}

.gt-preview-note h4 {
    margin-top: 0;
    color: #23282d;
    font-size: 14px;
}

.gt-preview-note p {
    margin: 0 0 10px 0;
}

.gt-preview-note ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.gt-preview-note li {
    margin-bottom: 5px;
}

/* Navigation */
.gt-builder-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    margin-top: 20px;
}

.gt-builder-navigation button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gt-builder-navigation .button {
    background: #f7f7f7;
    border: 1px solid #ccd0d4;
    color: #555;
}

.gt-builder-navigation .button:hover {
    background: #fafafa;
    border-color: #999;
}

.gt-builder-navigation .button-primary {
    background: #0073aa;
    color: white;
}

.gt-builder-navigation .button-primary:hover {
    background: #005a87;
}

/* Loading States */
.gt-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.gt-loading:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: gt-spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes gt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success/Error Messages */
.gt-message {
    padding: 12px 15px;
    border-radius: 4px;
    margin: 15px 0;
    font-weight: 500;
}

.gt-message-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.gt-message-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gt-field-selection-container {
        flex-direction: column;
    }
    
    .gt-features-grid {
        grid-template-columns: 1fr;
    }
    
    .gt-builder-navigation {
        flex-direction: column;
        gap: 10px;
    }
    
    .gt-modal-content {
        width: 95%;
        max-width: none;
        max-height: 95vh;
        margin: 2.5vh;
    }
    
    .gt-modal-body {
        padding: 15px;
    }
    
    .gt-modal-header,
    .gt-modal-footer {
        padding: 15px;
    }
}

/* Conditional Formatting Styles */
.gt-conditional-formatting-rule {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
}

.gt-rule-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

.gt-rule-column {
    flex: 1;
    min-width: 150px;
}

.gt-rule-column.gt-rule-actions {
    flex: 0 0 auto;
    min-width: auto;
}

.gt-rule-column label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #23282d;
    font-size: 12px;
}

.gt-formatting-rule-if-clause,
.gt-formatting-rule-action {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
    font-size: 13px;
}

.gt-formatting-rule-cell-value,
.gt-formatting-rule-set-value {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}

.gt-delete-conditional-rule {
    background: #dc3232;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-delete-conditional-rule:hover {
    background: #a00;
}

.gt-delete-conditional-rule .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

#gt-add-conditional-rule {
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 8px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#gt-add-conditional-rule:hover {
    background: #005a87;
}

#gt-add-conditional-rule .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Initial state styling */
.gt-formatting-rule-action option[value=""] {
    color: #666;
    font-style: italic;
}

.gt-formatting-rule-set-value[placeholder*="Choose action"] {
    background-color: #f5f5f5;
    color: #666;
}

/* Empty rules container state */
#gt-conditional-formatting-rules-container:empty::before {
    content: "No formatting rules added yet. Click 'Add Formatting Rule' to create your first rule.";
    display: block;
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 4px;
}

/* RGBA Color picker integration */
.gt-formatting-rule-set-value.gt-color-input {
    background: #fff;
    cursor: pointer;
}

.gt-rgba-picker-wrapper {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 240px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.gt-color-base {
    width: 100%;
    height: 36px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.gt-alpha-slider {
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,1) 100%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.gt-alpha-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #0073aa;
    border-radius: 50%;
    cursor: pointer;
}

.gt-alpha-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #0073aa;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.gt-alpha-label {
    font-size: 12px;
    color: #666;
    margin: 0;
    font-weight: 600;
}

.gt-alpha-value {
    color: #0073aa;
    font-weight: bold;
}

.gt-color-preview {
    width: 100%;
    height: 24px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%), 
        linear-gradient(-45deg, #ccc 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #ccc 75%), 
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.gt-rgba-text {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    font-family: monospace;
    background: white;
}

.gt-rgba-text:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.2);
}

@media (max-width: 768px) {
    .gt-rule-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .gt-rule-column {
        flex: none;
        width: 100%;
        min-width: auto;
    }
    
    .gt-rule-column.gt-rule-actions {
        width: auto;
        align-self: flex-end;
    }
}

/* Tabbed Interface Styles */
.gt-field-modal-tabs {
    display: flex;
    border-bottom: 1px solid #ccd0d4;
    background: #f9f9f9;
    margin: 0;
    padding: 0;
}

.gt-field-modal-tab {
    background: transparent;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gt-field-modal-tab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.gt-field-modal-tab:hover {
    background: #f0f0f0;
    color: #23282d;
}

.gt-field-modal-tab.active {
    background: white;
    color: #0073aa;
    border-bottom-color: #0073aa;
    font-weight: 600;
}

.gt-field-modal-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: white;
}

.gt-field-modal-tab-content {
    display: none;
    padding: 20px;
    background: white;
    min-height: 300px;
}

.gt-field-modal-tab-content.active {
    display: block;
}

.gt-field-modal-tab-content h4 {
    margin: 0 0 15px 0;
    color: #23282d;
    font-size: 16px;
    font-weight: 600;
}

.gt-field-modal-tab-content p.description {
    margin: 0 0 20px 0;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

/* General Settings Tab */
.gt-general-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.gt-general-setting-group h5 {
    margin: 0 0 10px 0;
    color: #23282d;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gt-field-setting {
    margin-bottom: 15px;
}

.gt-field-setting label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #23282d;
}

.gt-field-setting input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}

.gt-field-setting input[type="text"] {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.gt-field-setting input[type="text"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.2);
}

/* Form Groups */
.gt-form-group {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
}

.gt-form-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.gt-form-group h4 {
    margin: 0 0 15px 0;
    color: #23282d;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Checkbox Groups */
.gt-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gt-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-weight: 400;
    color: #23282d;
    line-height: 1.4;
}

.gt-checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
    transform: scale(1.1);
    flex-shrink: 0;
}

/* Form Row Improvements */
.gt-form-row {
    margin-bottom: 20px;
}

.gt-form-row:last-child {
    margin-bottom: 0;
}

.gt-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #23282d;
    font-size: 13px;
}

.gt-form-row select,
.gt-form-row input[type="text"] {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.gt-form-row select:focus,
.gt-form-row input[type="text"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.2);
}

.gt-form-row .description {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    font-style: italic;
}

/* Filtering Tab */
.gt-filter-type-selection {
    margin-bottom: 20px;
}

.gt-filter-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #f9f9f9;
    transition: all 0.2s ease;
}

.gt-filter-option:hover {
    background: #f0f8ff;
    border-color: #0073aa;
}

.gt-filter-option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
}

.gt-filter-option-content {
    flex: 1;
}

.gt-filter-option-title {
    font-weight: 600;
    color: #23282d;
    margin-bottom: 4px;
}

.gt-filter-option-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.gt-filter-settings {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
}

.gt-filter-settings.hidden {
    display: none;
}

/* Filter Type Specific Options */
.gt-filter-type-options {
    background: #fafbfc;
    border: 1px solid #e5e8eb;
    border-radius: 6px;
    padding: 15px;
    margin-top: 10px;
}

.gt-filter-type-options h4 {
    margin: 0 0 15px 0;
    color: #0073aa;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gt-filter-type-options .gt-form-row {
    margin-bottom: 15px;
}

.gt-filter-type-options .gt-checkbox-group {
    margin-bottom: 15px;
}

.gt-filter-type-options .gt-checkbox-label {
    margin-bottom: 8px;
}

/* Range input styling */
#field-filter-range-step {
    max-width: 120px;
}

/* Enhanced spacing for filter tab */
#gt-filtering-tab .gt-form-group {
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 15px;
}

#gt-filtering-tab .gt-form-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Lookup Configuration */
#lookup-config {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
}

.gt-lookup-form-row {
    margin-bottom: 20px;
}

.gt-lookup-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #23282d;
}

.gt-lookup-form-row select {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.gt-lookup-form-row select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.2);
}

.gt-lookup-note {
    background: #fff8e5;
    border-left: 4px solid #ffb900;
    padding: 12px 15px;
    margin: 15px 0 0 0;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #8a6914;
}

/* Tab Content Specific Adjustments */
.gt-conditional-formatting-section {
    background: transparent;
    border: none;
    padding: 0;
}

.gt-conditional-formatting-section h4 {
    margin: 0 0 15px 0;
}

/* Mobile Responsive for Tabs */
@media (max-width: 768px) {
    .gt-field-modal-tabs {
        flex-wrap: wrap;
    }
    
    .gt-field-modal-tab {
        flex: 1;
        min-width: 120px;
        padding: 12px 10px;
        font-size: 13px;
        text-align: center;
    }
    
    .gt-general-settings-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .gt-field-setting input[type="text"],
    .gt-lookup-form-row select {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .gt-field-modal-tabs {
        flex-direction: column;
    }
    
    .gt-field-modal-tab {
        border-bottom: 1px solid #ccd0d4;
        border-left: 3px solid transparent;
    }
    
    .gt-field-modal-tab.active {
        border-bottom-color: #ccd0d4;
        border-left-color: #0073aa;
    }
    
    .gt-field-modal-tab.active::after {
        display: none;
    }
}

/* WordPress Admin Overrides */
.wrap .gt-admin-container h1 {
    margin-bottom: 15px;
}

.gt-admin-container .notice {
    margin: 15px 0;
}

/* Tooltip Styles */
.gt-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    color: #666;
    cursor: help;
    font-size: 14px;
}

.gt-tooltip:hover {
    color: #0073aa;
}

.gt-tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -110px;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.gt-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.gt-tooltip:hover .gt-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Help text for form fields */
.gt-help-text {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

/* Disabled form controls */
.gt-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.gt-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.gt-disabled .gt-help-text {
    color: #999;
    font-weight: normal;
}

/* Enhanced Save Button Styling */

/* Top Save Bar */
.gt-top-save-bar {
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    margin: 20px 0;
}

.gt-save-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}

.gt-save-bar-info {
    display: flex;
    align-items: center;
    color: #5f6368;
    font-size: 14px;
}

.gt-save-status .dashicons {
    margin-right: 8px;
    color: #0073aa;
}

.gt-save-bar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 15px;
}

/* Top save bar buttons use default WordPress styling */

/* Corner Badge Section Save Buttons */
.gt-section-save {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.gt-section-save .button {
    background: #2271b1 !important;
    border: none !important;
    color: white !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 0 0 8px 0 !important;
    border-top-left-radius: 8px !important;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.gt-section-save .button:hover {
    background: #135e96 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure parent sections have relative positioning */
.gt-builder-section {
    position: relative !important;
}

/* Final Save Section */
.gt-final-save-section {
    background: #f6f7f7;
    border: 1px solid #ccd0d4;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.gt-final-save-section h3 {
    margin: 0 0 10px 0;
}

.gt-final-save-section p {
    margin: 0 0 20px 0;
}

.gt-final-save-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Final save buttons use default WordPress styling */

/* Floating Save Button */
.gt-floating-save {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

/* Floating save button uses default WordPress styling */

.gt-save-status-floating {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #0073aa;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-save-spinner .dashicons {
    color: white;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .gt-save-bar-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .gt-save-bar-actions {
        width: 100%;
        justify-content: center;
    }
    
    .gt-final-save-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .gt-final-save-buttons .button {
        width: 100%;
        max-width: 250px;
    }
    
    .gt-floating-save {
        bottom: 20px;
        right: 20px;
    }
    
    .gt-floating-save .gt-save-text {
        display: none;
    }
    
    .gt-floating-save .gt-save-button {
        padding: 12px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        justify-content: center;
    }
}
/* ============================================================
 * Issue #528 — Admin "All Tables" list responsive on mobile/tablet.
 * Mirrors WordPress core's wp-list-table responsive pattern: at the
 * <=782px breakpoint, non-primary columns collapse and a toggle-row
 * button reveals them. Scoped to #gt-tables-list so styles don't
 * leak into other admin screens.
 * ============================================================ */
@media screen and (max-width: 782px) {
    /* The outer overflow-x:auto wrap fights the stacked-card pattern —
     * disable horizontal scroll on the list view at narrow widths so
     * WP core's responsive collapse can take over. */
    #gt-tables-list .gt-responsive-table-wrap {
        overflow-x: visible;
    }

    /* Make sure the toggle-row button is visible and tappable on mobile.
     * WP core hides it at >=783px and shows it below; we re-affirm here
     * to defend against admin-theme overrides. */
    #gt-tables-list .wp-list-table .toggle-row {
        display: block;
    }

    /* Row actions need touch breathing room so action links don't
     * overlap when a row is expanded. */
    #gt-tables-list .wp-list-table .row-actions {
        padding-top: 4px;
    }

    /* Action button column on the far right — let it wrap under the
     * shortcode/date columns rather than push the row wider than
     * the viewport. */
    #gt-tables-list .wp-list-table td.column-actions {
        padding-left: 35%;
    }
}

/* #549 slice 3: Cell toolbar styles */
.gt-cell-toolbar {
    position: absolute;
    z-index: 10000;
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    padding: 4px;
    gap: 4px;
}

.gt-cell-toolbar button {
    background: #f8f9fa;
    border: 1px solid #ccd0d4;
    border-radius: 3px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #50575e;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gt-cell-toolbar button:hover {
    background: #f0f0f1;
    border-color: #2271b1;
    color: #2271b1;
}

.gt-cell-toolbar button.active {
    background: #2271b1;
    color: white;
    border-color: #135e96;
}

.gt-cell-toolbar button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* #1968 — Brand-color override for the TableCrafter admin menu item.
   WordPress applies the admin color scheme's blue to the active state;
   we replace it with the plugin's teal so the sidebar matches the dashboard. */
#adminmenu #toplevel_page_gravity-tables.wp-has-current-submenu > a.menu-top,
#adminmenu #toplevel_page_gravity-tables.current > a.menu-top {
    background: #0d9488 !important;
    border-left-color: #0f766e !important;
}
#adminmenu #toplevel_page_gravity-tables.wp-has-current-submenu .wp-menu-arrow,
#adminmenu #toplevel_page_gravity-tables.current .wp-menu-arrow {
    background: #0d9488 !important;
}
#adminmenu #toplevel_page_gravity-tables > a.menu-top:hover,
#adminmenu #toplevel_page_gravity-tables:hover > a.menu-top {
    background: #0f766e !important;
}

/* #1974 — Account page brand header + Freemius element overrides */
.gt-acct-header {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    border-radius: 8px;
    margin: 16px 0 20px;
    padding: 22px 28px;
    box-shadow: 0 2px 8px rgba(13,148,136,.25);
}
.gt-acct-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}
.gt-acct-header-icon {
    font-size: 36px;
    color: rgba(255,255,255,.85);
    flex-shrink: 0;
}
.gt-acct-header-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 3px;
    padding: 0;
    line-height: 1.2;
    text-shadow: none;
}
.gt-acct-header-sub {
    color: rgba(255,255,255,.82);
    font-size: 13px;
    margin: 0;
}
.gt-acct-badge {
    margin-left: auto;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.gt-acct-badge--pro {
    background: rgba(255,255,255,.22);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
}
.gt-acct-badge--free {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.25);
}
/* Freemius page headings */
.gt-account-page #wpbody-content > div > h2,
.gt-account-page .wrap > h2 {
    display: none; /* replaced by our header above */
}
.gt-account-page .wrap h3 {
    color: #0d9488;
    font-size: 15px;
    border-bottom: 2px solid #f0fdfa;
    padding-bottom: 8px;
    margin-top: 28px;
}
.gt-account-page .wrap code {
    background: #f0fdfa;
    color: #0d9488;
    border: 1px solid #99f6e4;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.gt-account-page .wrap table {
    border-collapse: collapse;
    width: 100%;
}
.gt-account-page .wrap table tr:nth-child(even) td,
.gt-account-page .wrap table tr:nth-child(even) th {
    background: #f9fafb;
}
.gt-account-page .wrap table td,
.gt-account-page .wrap table th {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}
.gt-account-page .wrap .button,
.gt-account-page .wrap button.button {
    border-color: #0d9488;
    color: #0d9488;
}
.gt-account-page .wrap .button:hover,
.gt-account-page .wrap button.button:hover {
    background: #0d9488;
    color: #fff;
    border-color: #0d9488;
}
.gt-account-page .wrap a {
    color: #0d9488;
}
.gt-account-page .wrap a:hover {
    color: #0f766e;
}

/* Wizard promo banner */
.gt-wizard-promo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 6px;
    padding: 9px 14px;
    margin: 12px 0 16px;
    font-size: 13px;
    color: #134e4a;
}
.gt-wizard-promo-icon {
    color: #0d9488;
    font-size: 16px;
    flex-shrink: 0;
}
.gt-wizard-promo-text { flex: 1; }
.gt-wizard-promo-cta {
    background: #0d9488 !important;
    border-color: #0f766e !important;
    color: #fff !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.gt-wizard-promo-cta:hover {
    background: #0f766e !important;
    border-color: #115e59 !important;
    color: #fff !important;
}
.gt-wizard-promo-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.gt-wizard-promo-close:hover { color: #134e4a; }

/* #1984 — Wizard entry button on tables list */
.gt-wizard-entry-btn { position: relative; }
.gt-wizard-entry-beta {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: #0d9488;
    color: #fff;
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.5;
}

/* Dropdown affordance for builder selects. The active theme applies
   appearance:none globally, which strips the native dropdown arrow and leaves
   plain boxes with no visual cue they're selectable. Re-add a chevron + padding
   for single selects in the builder (multi-selects render their own list box). */
#gt-table-builder select:not([multiple]) {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M0%200l5%206%205-6z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: #fff;
    padding-right: 28px;
}