form#case-filters {
    display: flex;
    justify-content: space-around;
    background: aliceblue;
    padding: 10px;
    width: 100%;
	flex-wrap:wrap;
	border: 1px solid #ddd;
	border-radius: 6px;
}
span.scrm-search-group {
    display: flex;
    min-width: 300px;
	width: 60%;
}
span.scrm-filter-group, span.search-group {
    display: flex;
    min-width: 300px;
	width: 40%;
}
.scrm-search-group button {
    width: 120px;
    height: 35px;
}
select#filter-state {
    width: 100px;
}
select#filter-status {
    width: 200px;
}
.scrm-filter-group label, .scrm-search-group label  {
    padding: 12px;
	font-size: 12px;
}
 
input#case_number, .search-group input#filter-search {
    height: 35px;
	margin-left: 2px !important;
}

.suitecrm-cases-wrapper {
    width: 100%;
    overflow-x: auto;
}
input[type='text'], select {
    border-radius: 7px !important;
}

.suitecrm-cases-wrapper table {
    width: 100%;
    min-width: 800px; /* ensures horizontal scroll triggers on small screens */
    border-collapse: collapse;
}
.cases-buttons {
  display: flex;
  justify-content: center; /* center horizontally */
  gap: 10px;               /* space between buttons */
  margin-top: 10px;
}

.cases-buttons button {
  max-width: 100px;
  height: 35px;
  line-height: 1;
  padding: 5px 10px;
}

a.page-link {
    padding: 10px;
}
#suitecrm-case-create-slot { margin: 12px 0; text-align: right; }
/************modal**************/
/* Modal styles used by case-create (match case-detail modal) */
.suitecrm-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.suitecrm-modal.is-open { display: block; }
.suitecrm-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.suitecrm-modal__dialog {
  position: relative; max-width: 640px; margin: 10% auto; background: #fff;
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden;
}
.suitecrm-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; }
.suitecrm-modal__title { margin: 0; font-size: 16px; }
.suitecrm-modal__close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.suitecrm-modal__body { padding: 16px; }

/* Optional helper to keep layout tidy */
#suitecrm-case-create-slot { margin: 12px 0; text-align: right; }

/* Make sortable headers look interactive */
.suitecrm-cases-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  padding-right: 18px; /* room for arrow */
  position: relative;
}

/* On hover: subtle underline to suggest clickability */
.suitecrm-cases-table th[data-sort]:hover {
  text-decoration: underline;
}

/* Active sort column highlight */
.suitecrm-cases-table th[data-sort][aria-sort="ascending"],
.suitecrm-cases-table th[data-sort][aria-sort="descending"] {
  color: #0073aa; /* WP blue highlight */
  font-weight: 600;
}

/* Arrows aligned nicely */
.suitecrm-cases-table th[data-sort]::after {
  content: '';
  position: absolute;
  right: 6px;
  font-size: 0.8em;
}
/***loading spinner*/
.suitecrm-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #dbe1ea;
  border-top-color: #2f5aa8; /* theme accent */
  border-radius: 50%;
  animation: suitecrm-spin 0.8s linear infinite;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes suitecrm-spin {
  to { transform: rotate(360deg); }
}
/* === Case Stats Bar === */
.suitecrm-card.suitecrm-card-stats{
	background: #f0f8ff;
  border: 1px solid #ddd;
  border-radius: 6px;
    margin: 20px 0;
	padding: 10px;

}
.suitecrm-case-stats .case-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  padding: 0px 16px;
  
  font-family: inherit;
  font-size: 14px;
  text-align: center;
}

.stat-item {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 10px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.suitecrm-case-stats .stat-item:hover {
  background: #f0f8ff;
  border-color: #b3d7ff;
  transform: translateY(-2px);
}

.suitecrm-case-stats .stat-number {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.suitecrm-case-stats .stat-label {
  display: block;
  font-size: 12px;
  color: #666;
}

span.portal-stat {
    font-weight: bold;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 2em;
	 cursor: pointer; /*  changes cursor */

}
/* On hover, make it feel like a link */
span.portal-stat:hover{
  text-decoration: underline; /* 👈 underline like a link */
  color: #005177;   /* darker blue for hover */
  transform: scale(1.1);
}
.case-stat {
    border: 1px solid;
    background: lightyellow;
    box-shadow: 0 6px 8px rgba(0,0,0,0.06);
    padding: 7px;
	border-radius: 8px;

	
}
/* Wrap container */
.suitecrm-stats-range {
    width: 100%;
    margin-bottom: 10px;
	float:right;
}

.suitecrm-stats-range form {
    float: right;
}

/* Styled select  */
.icon-select {
    padding: 5px 8px 5px 30px; /* left space for the icon */
    font-size: 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 24 24'%3E%3Cpath d='M7 10h5v5H7zM4 3h1V1h2v2h10V1h2v2h1a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2zm0 4v14h16V7H4z'/%3E%3C/svg%3E") no-repeat 8px center;
    background-size: 14px 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    appearance: none; /* optional: hide native arrow */
}
h4.suitecrm-card-title {
    display: inline;
}
form.suitecrm-stats-range-form {
    display: inline;
    float: right;
}
.suitecrm-card-header {
    padding: 0px 18px 26px 16px;
}