.action-card {
transition: all 0.2s ease;
}
.action-card:hover {
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.badge {
font-size: 0.8em;
}
.modal-lg {
max-width: 900px;
}
.toast {
min-width: 250px;
margin-bottom: 10px;
}
/* Button styles - slightly rounded corners */
.btn-rectangular {
border-radius: 4px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
padding: 0.375rem 0.75rem !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem;
min-width: 44px;
height: 38px;
}
.btn-rectangular:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-rectangular:active {
transform: translateY(0);
}
/* Color-specific button styles */
.btn-rectangular.btn-green {
background-color: #28a745 !important;
color: white !important;
border-color: #28a745 !important;
}
.btn-rectangular.btn-green:hover {
background-color: #218838 !important;
border-color: #1e7e34 !important;
}
.btn-rectangular.btn-blue {
background-color: #007bff !important;
color: white !important;
border-color: #007bff !important;
}
.btn-rectangular.btn-blue:hover {
background-color: #0056b3 !important;
border-color: #0056b3 !important;
}
.btn-rectangular.btn-red {
background-color: #dc3545 !important;
color: white !important;
border-color: #dc3545 !important;
}
.btn-rectangular.btn-red:hover {
background-color: #c82333 !important;
border-color: #c82333 !important;
}
/* Form layout - all inputs on one row, buttons responsive on right */
.trigger-form-row {
display: flex;
width: 100%;
margin-bottom: 1rem;
align-items: stretch;
min-height: 38px;
}
.form-inputs-container {
display: flex;
flex: 1;
gap: 0.5rem;
margin-right: 0.5rem;
align-items: stretch;
}
.form-inputs-container .form-select,
.form-inputs-container .form-control {
border-radius: 4px;
height: auto;
min-height: 38px;
}
.form-buttons-container {
display: flex;
gap: 0.25rem;
align-items: stretch;
}
/* Responsive adjustments for buttons container */
@media (max-width: 768px) {
.trigger-form-row {
flex-wrap: wrap;
}
.form-inputs-container {
flex: 1 1 100%;
margin-right: 0;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.form-inputs-container > * {
flex: 1;
min-width: 120px;
}
.form-buttons-container {
flex: 1 1 100%;
justify-content: flex-end;
gap: 0.5rem;
}
}
@media (max-width: 576px) {
.form-inputs-container {
flex-direction: column;
}
.form-inputs-container > * {
width: 100%;
margin-bottom: 0.25rem;
}
.form-buttons-container {
justify-content: stretch;
}
.form-buttons-container .btn-rectangular {
flex: 1;
}
}