/* Rules Table Container */
.rulesTable {
    padding: 12px;
    margin: 12px 8px 20px 0px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fafafa;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    width: 100%; /* Ensure table takes full width of container */
    box-sizing: border-box; /* Include padding in width calculation */
}

.rulesTable h4 {
    font-size: 0.9em;
    font-weight: 500;
    color: #333;
    width: 100% !important;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

/* Rules Table Button Groups */
.rulesTable > div:first-of-type {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rulesTable .btn {
    font-size: 0.875em;
    padding: 6px 12px;
    border-radius: 4px; /* Changed to 2px as requested */
    font-weight: 500;
}

.rulesTable .btn-primary-theme {
    background-color: #102b7c; /* Using the same blue from page-switcher.css */
    border-color: #102b7c;
    color: white;
}

.rulesTable .btn-sm {
    font-size: 0.8em;
    padding: 4px 8px;
}

/* "No results found" styling */
.rulesTable > div:not(:first-of-type):not(:last-of-type) {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 12px 0;
    margin: 8px 0;
}

/* Rules Table styling */
.rulesTable table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.875em;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 250px; /* Ensure minimum table width */
    table-layout: auto; /* Let table expand based on content */
}

.rulesTable table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    padding: 12px 8px;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
}

.rulesTable table td {
    padding: 10px 8px;
    border-bottom: 1px solid #dee2e6;
    color: #495057;
    vertical-align: middle;
}

.rulesTable table tbody tr:hover {
    background-color: #f8f9fa;
}

.templateFrame:not(.rightPanel .templateFrame){
  /* max-height:400px;
  overflow-y:auto; */
  padding:16px;
  margin: 5px 0;
  max-width:100%;
  max-height:550px;
  overflow:auto;
  border:1px solid #DDDDDD;
  border-radius: 4px;
  background-color: #F9F9F9;
}

.template-header{ 
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border-bottom: 1px solid #DDDDDD;
  background-color: #F9F9F9;
}

.template-footer{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border-top: 1px solid #DDDDDD;
}

/* Designer KVP adjustments in Rules context */
.rightPanel .designerKVP {
    margin: 10px !important; /* Reduced top margin to move content up */
    font-size: 0.9em !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

.rightPanel .designerKVP label {
    font-weight: 500 !important;
    font-size: 0.8em !important;
    color: #495057 !important;
    flex: 0 0 140px !important; 
    max-width: 140px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
}


/* Ensure form controls inside rightPanel designer rows align and expand */
.rightPanel .designerKVP .form-control,
.rightPanel .designerKVP .propertyEditor,
.rightPanel .designerKVP .btnInput,
.rightPanel .designerKVP textarea,
.rightPanel .designerKVP select {
    flex: 1 1 auto;
    box-sizing: border-box;
    font-size: 0.8em;
    border-radius: 4px !important;
}

/* Focus style: 1px solid navigation blue and 4px radius for elements in the right panel */
.rightPanel .designerKVP .form-control:focus,
.rightPanel .designerKVP input:focus,
.rightPanel .designerKVP textarea:focus,
.rightPanel .designerKVP select:focus,
.rightPanel .designerKVP .propertyEditor:focus {
    outline: none;
    box-shadow: 0 0 0 2px #102b7c !important;
    border-radius: 4px !important;
}

/* Fixes for tiny-sized designer rows inside the right panel: remove fixed 49% width
   and allow radio lists to wrap so buttons aren't clipped */
.rightPanel .designerKVP.editSizeTiny {
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.rightPanel .designerKVP.editSizeTiny .radio-list {
    white-space: normal !important; /* allow wrapping */
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Small spacing below radio lists to prevent tight stacking */
.rightPanel .designerKVP .radio-list {
    margin-bottom: 2px !important;
}

.rightPanel .designerKVP.editSizeTiny input {
    max-width: none !important; /* allow inputs to grow to available space */
}

/* Make color picker buttons in the right panel look like neat squares */
.rightPanel .btnInput {
    position: relative;
    left: 0 !important; /* override global left offset for inline positioning */
    top: 0 !important;
    width: 28px !important;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    padding: 4px;
    cursor: pointer;
    /* -webkit-appearance: none;
    appearance: none; */
}

/* Improve the native color swatch rendering in WebKit browsers */
.rightPanel .btnInput::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 6px;
}

.rightPanel .btnInput::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.rightPanel .btnInput:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,43,124,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}


/* Sidebar */
.sideBar{
    overflow-y: auto;
    left:0px;
    top:0px;
    width:var(--sideBarWidth);
    height:100vh;
    position: absolute;
    bottom: 0;
  
    z-index: 2;

    background-color:var(--strongBGColor);

    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    color:var(--strongColor);
    opacity:var(--applicationOpacity);
    transition-property: top,left,width,height,opacity;
    transition-duration:0.25s;
    transition-timing-function: ease-in-out;
    margin-right: 0px;
    transition: margin-right 0.25s ease-in-out;
}

.sideBarHeader{
    height:var(--topBarHeight);
    position:relative;
}

.sideBarHeader button{
    bottom:0px;right:0px;
    position:absolute;
    height:26px;
    color:var(--strongColor);
    padding:5px;
    line-height:26px;
}

/* Right Panel */
.rightPanel{
    display:none;
    overflow:auto;
    position:absolute;
    top:65px; /* Reduced for page switcher */
    bottom:0px;
    right:-400px;
    width: auto;
    z-index: 2;
    background-color:var(--lightBGColor);
    color:var(--strongBGColor);
    opacity:0;
    transition-property: top,left,right,width,height,opacity;
    transition-duration:0.25s;
    transition-timing-function: ease-in-out;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
}

.showRightPanel{
    right:0px;
    margin-right:0px;
    display:flex;
    opacity:1;
    margin-top: 44px;
    margin-bottom: 0px;
    transition-property: top,left,right,width,height,opacity;
    transition-duration:0.25s;
    transition-timing-function: ease-in-out;
}

.rbBody {
    width: 100%;
    box-sizing: border-box;
}

/* Ensure the form inside right panel can expand */
.rightPanel form {
    width: 100%;
    min-width: 300px; /* Minimum form width */
    display: flex;
    flex-direction: column;
}

/* Property Page adjustments */
.rightPanel .propertyPage {
    padding: 6px 12px; /* Reduced padding */
    width: 100%;
    box-sizing: border-box;
}


/* Safe, JS-free selectors: target slicers by their actiondata attribute so we don't need runtime code */
ul.radio-list[actiondata="classification"]{
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
}

/* Text case slicer (handles space variations and casing) */
ul.radio-list[actiondata="textCase"]{
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
}