/* ------------------------------
   Global Font
------------------------------ */
#lifted-roadmap-app {
    font-family: "Lato", Arial, sans-serif;
    margin: 15px 0;
	font-size:14px;
	line-height:1.2em;
}

/* ------------------------------
   Modern Table Styling - No Vertical Borders
------------------------------ */
.dt-column-order {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    cursor: pointer;
	vertical-align: middle;
}

.dt-column-order svg.sort-icon {
    transition: transform 0.2s ease;
}

/* Default (no sort) */
.dt-column-order[data-sort="none"] svg.sort-icon {
    transform: rotate(0deg);
}

/* Ascending */
.dt-column-order[data-sort="asc"] svg.sort-icon {
    transform: rotate(180deg); /* arrow points up */
}

/* Descending */
.dt-column-order[data-sort="desc"] svg.sort-icon {
    transform: rotate(0deg); /* arrow points down */
}

.lifted-table-full{
	border:1px; 
	border: solid #dbdbdb 1px; 
	padding: 20px 0px;
	border-radius:6px;
	background-color:#fff;
}

#lifted-table-wrapper {
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    background: #fff;
	overflow-x: auto;            /* horizontal scroll only inside wrapper */
    overflow-y: visible;
    display: block;
    position: relative;          /* important to isolate overflow */
    max-width: 100%;             /* ensures it cannot exceed page width */
    -webkit-overflow-scrolling: touch;
}

#lifted-table {
    width: 100%;
    border-collapse: separate; /* keep horizontal borders only */
    border-spacing: 0 5px;
    table-layout: fixed;
    font-family: 'Inter', sans-serif;
    min-width: 650px;
}

#lifted-table td {
    padding: 10px 16px;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #eee; /* only horizontal border */
    border-left: none;
    border-right: none;
	border-top: none;
}

#lifted-table th {
    padding: 10px 16px;
    font-size: 13px;
	line-height:1.1em;
    text-align: left;
    vertical-align: middle;
    border:0px;
}

#lifted-table thead {
    background-color: #C4E7FF;
    color: #000;
}

#lifted-table thead tr {
	line-height:1.2em;
	font-size: 13px;
}

#lifted-table tr:hover td {
    background-color: #f0f4f8;
    transition: background 0.2s;
}

#lifted-table td {
    color:#000;
    white-space: normal;
    word-wrap: break-word;
	background-color: #fff;
	vertical-align: top;
}

#lifted-table td div {
    font-size: 0.85em;
    color: #777;
    margin-top: 4px;
}

#lifted-full-topbar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

#lifted-search-row.search-container {
    width: 35%;
    min-width: 300px;
    flex-shrink: 0;
	position: relative;      /* keep this */
    display: block;
	margin-left:20px;
	margin-bottom:15px;
}

#lifted-topbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 20px;
    font-size: 0.95em;
    color: #444;
	padding: 0px 10px;
}

#lifted-topbar > div:last-child {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

#lifted-topbar select {
    margin-left: 8px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
}

/* === PAGINATION === */
#lifted-pagination {
    text-align: right !important;
    font-size: 1em;
    line-height: 1.4;
}

#lifted-pagination button {
    all: unset;
    display: inline-block;
    padding: 5px 8px;
    margin: 0 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: color 0.2s;
    min-width: 20px;
    text-align: center;
}

#lifted-pagination button:hover:not(:disabled) {
    color: #0063a8;
}

#lifted-pagination button[data-active] {
    color: #0063a8 !important;
    font-weight: 600;
}

#lifted-pagination button:disabled:not([data-active]) {
    color: #000 !important;
    opacity: 0.4;
    cursor: not-allowed;
}

/* Arrows exactly 16px */
#lifted-pagination button:nth-child(1),
#lifted-pagination button:nth-child(2),
#lifted-pagination button:nth-last-child(3),
#lifted-pagination button:nth-last-child(2) {
    font-size: 14px !important;
    font-weight: bold;
}

/* ALL button */
#lifted-pagination button:last-child {
    margin-left: 20px !important;
}
#lifted-pagination button:last-child:hover {
    color: #0063a8 !important;
}

/* Column widths */
#lifted-table th:nth-child(1),
#lifted-table td:nth-child(1) { width: 20%; }
#lifted-table th:nth-child(2),
#lifted-table td:nth-child(2) { width: 16%; }
#lifted-table th:nth-child(3),
#lifted-table td:nth-child(3) { width: 16%; }
#lifted-table th:nth-child(4),
#lifted-table td:nth-child(4) { width: 15%; }


/* ------------------------------
   Controls Wrapper  
   (Filters + Buttons Row)
------------------------------ */
.courses-filter{
    padding:20px;
	border-radius:6px;
	border: solid #dbdbdb 1px;
	margin-bottom: 20px;
	background-color:#fff;
}


#lifted-controls {
    display: flex;
    flex-wrap: nowrap;  /* desktop default: single row */
    gap: 10px;
    align-items: center;
    overflow-x: auto;
}

.name-filter{
	font-size: 16px;
	font-weight:600;
	color: #333;
	white-space: nowrap;
	text-align: left;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    #lifted-controls {
        flex-direction: column; /* stack items vertically */
        align-items: flex-start;      /* ← change from "stretch" to "flex-start" */
        justify-content: flex-start;  /* make each select full width */
        overflow-x: visible;    /* no horizontal scroll needed */
        gap: 12px;              /* nicer spacing for mobile */
    }

    #lifted-controls select {
        width: 100%;            /* ensure full-width dropdowns */
    }
	.name-filter{
	text-align: left;
	width:100%;
	}
}


/* ------------------------------
   Title & Search Bar
------------------------------ */
.course-heading-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
	align-items: flex-start;
    gap: 10px;
    margin: 20px 0px;
}

.course-title {
   flex: 1 1 auto;
   margin: 0;
font-size:24px;
   font-weight:600;
}

#lifted-search {
    border: 1px solid #dbdbdb;
    padding: 7px 30px 7px 40px;
    width: 100%;
    border-radius: 6px;
    font-size: 14px;
}

#lifted-search-row svg.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; 
  color: #888;
}

#lifted-search-row svg.clear-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: none; /* hidden initially */
  color: #0063a8;
}

#lifted-table-footer{
	display: flex;
	padding: 0px 20px;
	align-items: center;
	flex-wrap: wrap; 
	justify-content: space-between;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .course-heading-row {
        flex-direction: column;
        flex-wrap: wrap; /* allow stacking on small screens */
    }
    .course-title {
        width: 100%;
		align-items: left;
    }
	#lifted-search-row.search-container{
		width: 100%;
		margin-left:0px;
	}
}

/* ------------------------------
   Inputs, Selects, Buttons
------------------------------ */
#lifted-controls input,
#lifted-controls select,
#lifted-controls button {
    padding: 6px 8px;
    font-size: 14px;
    height: 38px;
    white-space: nowrap;
	color:#000;
}

#lifted-controls input, #lifted-controls select{
	border: 1px solid #dbdbdb;
	background-color: #fff;
	flex: 1 1 auto;
}

/* Reset Button */
#lifted-reset {
    color:#0063a8 !important;
    border: none;
    cursor: pointer;
	padding: 0px;
	font-weight:600;
	text-align: right;
}

#lifted-reset:hover, #lifted-reset:focus {
    color: #000;
	background: transparent;
}

#lifted-table td.title-column a{
	color:#0063a8;
    font-weight:600;
    text-decoration: none !important;
	line-height:1.3em;
	font-size: 15px;
}

#lifted-table td.title-column a:hover {
    text-decoration: underline !important;
}

.course-provider {
    font-size: 0.85em;
    color: #555;
    margin-top: 4px;
    font-weight: 400;
}

#lifted-table td.provider-column {
	font-weight: 600;
}

#lifted-table td.price-column {
	font-weight: 600;
	color: #000;
}


@media (max-width: 768px) {

	.lifted-table-full{
	border: none;
	background-color: transparent;
	}
    /* Table becomes block */
    #lifted-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
		border-spacing: 0px;
    }

    /* Hide header */
    #lifted-table thead { display: none; }

    #lifted-table tbody tr {
    display: flex;        /* make row a flex container */
    flex-wrap: wrap;      /* allow columns to flow to next line */
    margin-bottom: 5px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
}
	
	#lifted-table tr:hover td {
    background-color: #fff;
}

/* Each td stacked line by line */
#lifted-table tbody td {
    display: flex;       /* label + value inline */
    flex-wrap: wrap;     /* allow value to wrap */
    flex-basis: 100%;    /* default full width */
    padding: 5px 0;
    border: none;
    word-break: break-word;
    margin-bottom: 0px; 
    font-size: 13px;
	line-height:1.3em;
    font-weight: 500;
}

    /* Labels for each td */
    #lifted-table tbody td.roles-column::before { content: "Job Role"; color:#6e6e6e; font-weight:400; margin-right:6px; flex-shrink:0; white-space:nowrap; }
    #lifted-table tbody td.ck-column::before { content: "Competency / Knowledge"; color:#6e6e6e; font-weight:400; margin-right:6px; flex-shrink:0; white-space:nowrap; }
    #lifted-table tbody td.provider-column::before { content: "By "; color:#6e6e6e; font-weight:400; flex-shrink:0; white-space:nowrap; }
    #lifted-table tbody td.dates-column::before { content: "\f073"; font-family: "Font Awesome 5 Free"; color:#6e6e6e; font-weight:400; margin-right:6px; flex-shrink:0; white-space:nowrap; }
	#lifted-table tbody td.cpd-column::before { content: "\f3a5"; font-family: "Font Awesome 5 Free"; color:#6e6e6e; font-weight:400; margin-right:6px; flex-shrink:0; white-space:nowrap; }


    /* Make content inside td inline with label, allow wrapping */
    #lifted-table tbody td a,
    #lifted-table tbody td span,
    #lifted-table tbody td div,
    #lifted-table tbody td /* text nodes */ {
        display: inline-block;     /* inline with label */
        flex: 1 1 auto;           /* take remaining space */
        white-space: normal;      /* wrap text if too long */
    }

	#lifted-table td {
        width: 100% !important; /* force full width on mobile */
    }
	
	#lifted-table tbody td.roles-column,
    #lifted-table tbody td.ck-column {
        display: block;
    }

    #lifted-table tbody td.roles-column::before,
    #lifted-table tbody td.ck-column::before {
        display: block;
    }

    /* Make the content inside wrap normally */
    #lifted-table tbody td.roles-column span,
    #lifted-table tbody td.ck-column span {
        display: inline;       /* content stays inline if multiple spans */
        white-space: normal;   /* wrap long text */
    }
	
	/* Reorder columns (example: move provider to second row) */
		#lifted-table tbody td.dates-column { order: 0; }
	#lifted-table tbody td.title-column { order: 1;}
	#lifted-table tbody td.provider-column { order: 2; }
	#lifted-table tbody td.roles-column { order: 3; }
	#lifted-table tbody td.ck-column { order: 4; }
	#lifted-table tbody td.cpd-column { order: 5; flex-basis: 70%; margin-top: 5px;}
	#lifted-table tbody td.price-column { order: 6; flex-basis: 30%; text-align: right;font-size:18px; margin-top: 6px;}

#lifted-topbar{
	padding:0px;
	gap:10px;
	font-size:12px;
	line-height:1em;
	justify-content: space-between !important;
	width:100%;
	}
	
	#lifted-table-footer{
		padding:0px;
	}
	#lifted-pagination{
	margin-top: 10px;
	}
	
	#lifted-pagination button{
	padding: 5px 0px !important;
	margin:5px !important;
	}
	.course-legend{
		padding-bottom:10px;
		border-bottom: 1px solid #ddd;
		
	}

}