/* ═══════════════════════════════════════════════════════════════════════════
   EthiFinance SPO Table – Frontend Styles
   Brand palette: #00514f (green), #007d7a (green hover), #000 (text),
                  #fff (bg), light grey for subtle surfaces
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ──────────────────────────────────────────────────────────── */
.ethifinance-spo-wrap {
	font-size:   14px;
	line-height: 1.5;
	color:       #000;
}

/* ── Link buttons (cells that contain a URL) ──────────────────────────────── */
a.spo-table-btn {
	display:         inline-block;
	background:      #00514f;
	color:           #fff !important;
	border-radius:   50px;
	padding:         5px 20px;
	font-size:       13px;
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	transition:      background 0.18s ease, box-shadow 0.18s ease;
}

a.spo-table-btn:hover,
a.spo-table-btn:focus {
	background:      #007d7a;
	box-shadow:      0 2px 6px rgba(0, 0, 0, .15);
	color:           #fff !important;
	text-decoration: none;
}

/* ── Toolbar (Show N entries | Buttons + Search) ─────────────────────────── */
.spo-dt-top {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             10px;
	margin-bottom:   14px;
}

.spo-dt-top-left {
	flex-shrink: 0;
}

.spo-dt-top-right {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
}

/* ── Export buttons ──────────────────────────────────────────────────────── */
.dt-buttons .spo-export-btn,
.dt-buttons .buttons-print,
.dt-buttons .buttons-pdf,
.dt-buttons .buttons-excel,
.dt-buttons .buttons-csv {
	background:    #fff;
	border:        1px solid #ccc;
	border-radius: 4px;
	color:         #000;
	font-size:     13px;
	padding:       5px 14px;
	cursor:        pointer;
	transition:    background 0.15s, border-color 0.15s;
}

.dt-buttons .spo-export-btn:hover,
.dt-buttons .buttons-print:hover,
.dt-buttons .buttons-pdf:hover,
.dt-buttons .buttons-excel:hover,
.dt-buttons .buttons-csv:hover {
	background:   #f2f2f2;
	border-color: #aaa;
}

/* ── Search field ────────────────────────────────────────────────────────── */
.spo-dt-top-right .dataTables_filter label {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   14px;
	color:       #000;
	margin:      0;
}

.spo-dt-top-right .dataTables_filter input {
	border:        1px solid #ccc;
	border-radius: 4px;
	padding:       5px 10px;
	font-size:     13px;
	outline:       none;
	transition:    border-color 0.15s;
	color:         #000;
	background:    #fff;
}

.spo-dt-top-right .dataTables_filter input:focus {
	border-color: #00514f;
}

/* ── Bottom bar (Info | Pagination) ─────────────────────────────────────── */
.spo-dt-bottom {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             10px;
	margin-top:      14px;
}

.spo-dt-bottom .dataTables_info {
	font-size: 13px;
	color:     #000;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.spo-dt-bottom .dataTables_paginate .paginate_button {
	padding:       4px 10px;
	border:        1px solid #ddd;
	border-radius: 4px;
	cursor:        pointer;
	font-size:     13px;
	background:    #fff;
	color:         #000 !important;
	margin:        0 2px;
	display:       inline-block;
	transition:    background 0.15s, border-color 0.15s;
}

.spo-dt-bottom .dataTables_paginate .paginate_button:hover {
	background:   #f2f2f2;
	border-color: #bbb;
	color: #000 !important;
}

.spo-dt-bottom .dataTables_paginate .paginate_button.current,
.spo-dt-bottom .dataTables_paginate .paginate_button.current:hover {
	background:   #00514f;
	border-color: #00514f;
	color:        #fff !important;
}

.spo-dt-bottom .dataTables_paginate .paginate_button.disabled,
.spo-dt-bottom .dataTables_paginate .paginate_button.disabled:hover {
	color:      #aaa !important;
	cursor:     default;
	background: #fff;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.ethifinance-spo-wrap table.dataTable {
	border-collapse: collapse;
	width:           100%;
}

.ethifinance-spo-wrap table.dataTable thead th {
	background:    #f2f2f2;
	font-weight:   600;
	font-size:     13px;
	color:         #000;
	border-bottom: 2px solid #ddd;
	padding:       10px 14px;
	white-space:   nowrap;
}

/* Sort arrow colour */
.ethifinance-spo-wrap table.dataTable thead th.sorting:after,
.ethifinance-spo-wrap table.dataTable thead th.sorting_asc:after,
.ethifinance-spo-wrap table.dataTable thead th.sorting_desc:after {
	color: #00514f;
}

.ethifinance-spo-wrap table.dataTable tbody tr {
	border-bottom: 1px solid #ebebeb;
}

.ethifinance-spo-wrap table.dataTable tbody tr:hover {
	background: #ebf5f5;
}

.ethifinance-spo-wrap table.dataTable tbody td {
	padding:        9px 14px;
	font-size:      14px;
	color:          #000;
	vertical-align: middle;
	background:     #fff;
}

/* Alternating row shading */
.ethifinance-spo-wrap table.dataTable tbody tr:nth-child(even) td {
	background: #f7f7f7;
}

.ethifinance-spo-wrap table.dataTable tbody tr:hover td,
.ethifinance-spo-wrap table.dataTable tbody tr:nth-child(even):hover td {
	background: #ebf5f5;
}

/* ── Responsive: scroll wrapper on small screens ─────────────────────────── */
.ethifinance-spo-wrap .dataTables_scrollBody {
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
}

/* ── Length select ───────────────────────────────────────────────────────── */
.dataTables_length label {
	color: #000;
}

.dataTables_length select {
	border:        1px solid #ccc;
	border-radius: 4px;
	padding:       4px 8px;
	font-size:     13px;
	color:         #000;
	background:    #fff;
}