html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

iframe.quickform {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100%;
    border: none;
}

/* Border removal */
td.clearfix.cell.crmquickform-cell {
    border: none !important;
}

/* Button disabled */
input[type="submit"]:disabled,
input[type="button"]:disabled {
    background-color: #999 !important;
    border-color: #999 !important;
    color: #fff !important;
    cursor: not-allowed;
}

/* Unified control heights */
.button2,
.btn-default,
.btn-primary,
.btn-secondary,
.input-group-addon,
.input-group-addon.active,
.input-group > .form-control,
.input-group > .form-floating,
.input-group > .form-select {
    height: 36px;
}

.entity-grid.entitylist {
    padding: 5px;
}

/* Base select styling */
.picklist.form-select {
    appearance: none;
    background-clip: padding-box;
    background-color: var(--neutral-background-1, #ffffff);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary, #605e5c) 50%),
        linear-gradient(135deg, var(--text-secondary, #605e5c) 50%, transparent 50%);
    background-position:
        calc(100% - 1.25rem) calc(50% + 2px),
        calc(100% - 0.9rem) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size:
        6px 6px,
        6px 6px;
    border: 1px solid var(--neutral-stroke-subtle, #d1d1d1);
    border-radius: 8px;
    color: var(--text-primary, #323130);
    font-size: 1rem;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    -moz-appearance: none;
    -webkit-appearance: none;
}

/* Disabled */
.picklist.horizontal input[type="radio"]:disabled + label,
.picklist.vertical input[type="radio"]:disabled + label {
    background-color: #f0f0f0;
    color: #666666;
    opacity: 0.6;
}

/* Focus */
.picklist.form-select:focus {
    border-color: var(--primary, #0078d4);
    box-shadow: 0 0 0 3px var(--primary-background, #e5f1fb);
    outline: none;
}

/* Hover */
.picklist.form-select:hover {
    border-color: var(--primary, #0078d4);
}

/* Horizontal picklist */
.picklist.horizontal {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* Vertical picklist */
.picklist.vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Card (label for each radio) */
.picklist.horizontal label,
.picklist.vertical label {
	background-color: #f8f9fa; /* portal background */
    border: 1px solid #e6e6e6; /* subtle grey border */
    border-radius: 8px;
    color: #666666; /* secondary text */
    cursor: pointer;
    min-width: 120px;
    padding: 0 1.25rem 0 36px;
    height: 36px;
    line-height: 36px;
    position: relative;
    text-align: left;
    transition: all 0.2s ease;
    opacity: 0.6;
}

/* Hover */
.picklist.horizontal label:hover,
.picklist.vertical label:hover {
    border-color: #009b4e; /* primary portal green */
}

/* Hide native radios */
.picklist.horizontal input[type="radio"],
.picklist.vertical input[type="radio"] {
    opacity: 0;
    position: absolute;
}


/* Focus (keyboard) */
.picklist.horizontal input[type="radio"]:focus + label,
.picklist.vertical input[type="radio"]:focus + label {
    outline: 3px solid #00665e;
    outline-offset: 2px;
}

/* Selected card */
.picklist.horizontal input[type="radio"]:checked + label, 
.picklist.vertical input[type="radio"]:checked + label {
    background-color: #009b4e; /* primary portal green */
    border-color: #009b4e;
    color: #f8f9fa; /* light text on selected */
    font-weight: 600;
    opacity: 1;	
}

/* Outer circle always visible */
.picklist.horizontal input[type="radio"] + label::after,
.picklist.vertical input[type="radio"] + label::after {
	background-color: #f8f9fa;
    border: 2px solid #e6e6e6; 
    border-radius: 50%;
    content: "";	
	height: 20px;
    width: 20px;
    left: 8px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    box-sizing: border-box;
}

/* Inner dot for checked radio */
.picklist.horizontal input[type="radio"]:checked + label::after,
.picklist.vertical input[type="radio"]:checked + label::after {
	background:
        radial-gradient(
            circle at center,
            #f8f9fa 0 35%,
            transparent 36%
        );
    border-color: #f8f9fa; 
}

/* Picklist adjustments */
.picklist,
.picklist.horizontal input[type="radio"],
.picklist.form-select {
    height: 0.8;
    line-height: 0.8;
}

/* First column */
.tab-column:nth-child(1) {
    width: 100% !important;
}

/* Second column */
.tab-column:nth-child(2) {
    width: 0% !important;
}

/* Toolbar container */
.page-copy {
    flex: 1;
}

/* Action container */
.toolbar-actions {
    display: flex;
    justify-content: flex-end;
    width: 50vw;
    min-width: 280px;
}

/* Ensure input group fills the space */
.toolbar-actions .input-group {
    width: 100%;
}

/* Remove phantom spacing in table layout */
.toolbar-actions .entitylist-search {
    border-collapse: collapse;
}

/* Kill extra spacing from the button cell */
.toolbar-actions .entitylist-search .input-group-btn {
    width: 1%;
    white-space: nowrap;
    padding: 0;
}

.entitylist-toolbar,
.view-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.wrapper-body .form-control,
.wrapper-body .input-group {
    width: 70%;
    max-width: 600px;
}


.wrapper-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}


/* Mobile */
@media (max-width: 768px) {
    .picklist.horizontal {
        flex-direction: column;
        gap: 0.75rem;
    }

    .picklist.horizontal label {
        min-width: 100px;
        max-width: 200px;
    }

    .tab-column {
        width: 100% !important;
    }

    /* Hide table header */
    .view-grid table thead {
        display: none;
    }

    /* Make table elements behave like blocks */
    .view-grid table,
    .view-grid tbody,
    .view-grid tr,
    .view-grid td {
        display: block;
        width: 100%;
    }

    /* Row becomes a card */
    .view-grid tr {
        margin-bottom: 1rem;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
    }

    /* Each cell */
    .view-grid td {
        border: none !important;
        padding: 0.4rem 0;
        text-align: left;
    }

    /* Label (from data-th) */
    .view-grid td::before {
        content: attr(data-th);
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        color: #666;
        margin-bottom: 0.15rem;
    }
}