/* ===========================================================
   LOGGED TIME TABLE
   =========================================================== */

.cgr-usage-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Scroller */
.cgr-usage-scroller {
  overflow-y: auto;
}

/* Table */
.cgr-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.cgr-usage-table thead th {
  text-align: left;
  padding: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--canguro-mid-grey);
}

/* Column widths */
.col-date { width: 25%; }
.col-minutes { width: 10%; }
.col-notes { width: auto; }
.col-actions { width: 2rem; }

/* Body rows */
.cgr-usage-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--canguro-mid-grey);
}

/* Zebra striping */
.cgr-usage-table tbody tr:nth-child(even) {
  background: #fff;
}

/* Empty state */
.cgr-usage-empty {
  text-align: center;
  padding: 2rem;
  color: #fff;
}

/* Action button */
.cgr-usage-btn-icon.cgr-trash .lucide {
  margin: 0px;
}

.cgr-usage-btn-icon.cgr-trash {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:2rem;
  width:2rem;
  border-radius:5px;
  border:1px solid var(--canguro-mid-grey);
  background:#fff;
  cursor:pointer;
    color:var(--canguro-light-red);
}
.cgr-usage-btn-icon.cgr-trash:hover {
  background:var(--canguro-light-red);
   color:#FFF;
}

/* Pagination */
.cgr-usage-page-btn .lucide {
  margin: 0px;
}

.cgr-usage-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.cgr-usage-page-label {
  font-size: 1rem;
  color: var(--canguro-black-grey);
}

.cgr-usage-pagination .cgr-usage-page-btn {
	 display:inline-flex;
	 align-items:center;
	 justify-content:center;
	 height:2rem;
	 width:2rem;
	 background: #fff;
	 color:#000; 
	 border-style: solid;
	 border-radius:5px;
	 border-width:1px;
	 border-color:var(--canguro-dark-grey); 
	 box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
	 padding: 15px 20px 15px 20px;
	 cursor: pointer;
}

.cgr-usage-pagination .cgr-usage-page-btn:hover {
	background: var(--canguro-yellow);
	color:#000;
	text-decoration: none;
}
.cgr-usage-pagination .cgr-usage-page-btn:disabled {
	opacity:.4;
	cursor:default;
	pointer-events: none;
}

/* Modal backdrop */
.cgr-usage-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.cgr-usage-modal-backdrop.open {
  display: flex;
}

/* Modal box */
.cgr-usage-modal-backdrop.open {
  display:flex
}
.cgr-usage-modal {
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 2px 2px 0 rgb(0 0 0 / .1)!important;
  padding: 2rem;
}

.cgr-usage-modal-actions {
  display:flex;
  justify-content:flex-end;
  margin-top: 2rem;
  gap:8px
}

.cgr-usage-modal-actions .cgr-usage-modal-cancel {
background: #fff;
color:#000; 
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-grey);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
	text-decoration: none;
	cursor: pointer;
}
.cgr-usage-modal-actions .cgr-usage-modal-cancel:hover {
background: var(--canguro-yellow);
color:#000;
text-decoration: none;
}

.cgr-usage-modal-actions .cgr-usage-modal-confirm {
background: var(--canguro-red); 
color:#fff!important;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-red); 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
	cursor: pointer;
}

.cgr-usage-modal-actions .cgr-usage-modal-confirm:hover {
background: var(--canguro-light-red);
color:#fff!important;
text-decoration: none;
}

/* ===========================================================
   POPOVER TIME ENTRY
   =========================================================== */
/* each row block */
.cgr-popover-content.cgr-popover-content--manual-timer{
    display:flex;
  flex-direction:column;
  gap: 16px;
}

.cgr-popover-mt__presets {
	display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px;
}

.cgr-popover-mt__actions {
  display:flex;
  flex-direction:row;
  gap:8px;
  justify-content: right;
}

.cgr-popover-mt__custom label,
.cgr-popover-mt__notes label {
  margin-bottom: 10px;
}

.cgr-popover-mt__input {
  width:100%;
}

/* Hide spinners for Chrome, Safari, Edge, and Opera */
.cgr-popover-mt__input::-webkit-outer-spin-button,
.cgr-popover-mt__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide spinners for Firefox */
.cgr-popover-mt__input {
  -moz-appearance: textfield;
}