/*==========================================START OF CUSTOMIZED CLASSES==========================================================*/
/* PAGE ITEM HEIGHT SETTINGS */

/* DEFINE 

"search_item" 
CLASS IN PAGE-ITEM > APPEARNCE > CSS CLASS 

Also define "search_col" in PAGE-ITEM > LAYOUT > COLUMN CSS CLASSES

*/

.search_item .apex-item-text {
    background-color: #eeeeee !important;
    border: 1px solid rgb(42, 139, 172) !important;
    box-shadow: 0 8px 8px -4px lightblue;
    padding-left: 36px !important; /* Prevents icon overlap */
    transition: all 0.3s ease; /* 'all 2s' is very slow; 0.3s is standard for UI */
}

/* Hover effects */
.search_item .apex-item-text:hover {
    background-color: white !important;
    border: 2px solid rgb(236, 127, 127) !important;
    box-shadow: 0 8px 8px -4px rgb(165, 235, 133);
}

/* Fix for the Icon alignment within the custom class */
.search_item .t-Form-itemIcon {
    height: 100%;
    display: flex;
    align-items: center;
    top: 0 !important;
    justify-content: center;
    width: 25px;
}
/* Target the input itself to reduce height */
.search_col .t-Form-inputContainer .apex-item-text {
    height: 2rem; 
    /*padding: 4px 8px !important;*/
    min-height: auto !important;
}

/*  END OF PAGE ITEM HEIGHT SETTINGS */



/* INFO BOX CARD STYLE AND REGION SETTINGS */
.finance {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;    
}
.finance .t-Region-header{
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;    
}

.infobar-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;    
    /*background-color: #d9d9d9;*/
    /*background-image: linear-gradient(to bottom right, #e2e6eb, #105d68);*/
    /*background-image: url('#APP_FILES#NVOCC-BG_BAR2.png');*/    
    /*border-bottom: 1px solid black;*/
    background-color: transparent !important;    
    background-image: none !important;
}  

.infobar-row .info_box {
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    padding: 10px;
    width: 8.5vw;
    height: 5.2vw;    
    border-radius: 14px;
    /*background: rgba(255, 255, 255, 0.2);*/
    /*background: rgba(226, 154, 154, 0.7);*/
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgb(255, 255, 255);
    letter-spacing: 1px;  
    /*border-top: solid 1px black;     
    border-left: solid 1px black;   */
    transition: all 0.3s ease;  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Needed for absolute child positioning */
    text-align: center;
    margin-right: 20px !important;
    margin-bottom: 5px !important;

}

.infobar-row .info_box:hover {
    border: 1px solid rgb(0, 0, 0);  
    /*transform: scale(1.05);      */
}

.infobar-row .t-ButtonRegion-wrap {
    background-image: none !important;
}
#INFOBAR .t-ButtonRegion-wrap {
    background-image: none !important;
}





/*-------- FILTER REGION SETTINGS --------------*/

/* DEFINE "filter_row" in REGION > LAYOUT > ROW CSS CLASSES

DEFINE "filter_region in REGION > APPEARANCE > CSS CLASSES

REF P113
*/

.filter_row {
    background-color: #f5f5f5 !important;
    border-radius: 8px;
    border-left: 5px solid rgb(46, 160, 23);
    margin-bottom: 5px !important;
}
.filter_row .filter_region{
    display: flex !important;
    justify-content: center !important; /*TEXT ITEMS HORIZONTALLY CENTERED*/  
    align-items: center !important;
    background-color:  transparent !important; 
    padding: 0px !important;
}

.filter_row .filter_region_right{
    display: flex !important;
    justify-content: right !important; /*TEXT ITEMS HORIZONTALLY CENTERED*/  
    align-items: center !important;
    background-color:  transparent !important; 
    padding-right: 50px !important; 
}

.filter_row .filter_region_left{
    display: flex !important;
    justify-content: left !important; /*TEXT ITEMS HORIZONTALLY CENTERED*/  
    align-items: center !important;
    background-color:  transparent !important; 
    padding: 0px !important;
}


.filter_row .filter_region .t-Form-fieldContainer {  
  display: flex !important;
  align-items: center !important;  /*LABEL VERTICALLY CENTERED*/
}

/*.filter_row .t-Form-inputContainer .t-Form-itemWrapper {
    max-width: 150px !important; 
    min-width: 100px !important;
}*/

.filter_row .filter_region  .t-Form-itemWrapper .apex-item-number{
    /*background-color: rgb(185, 199, 163) !important;*/
    margin: 0px !important;
}


.filter_row .filter_region .t-ButtonRegion-wrap  {
    background-color:  transparent !important;
    background-image: none !important;
}

.filter_row .filter_region .t-Button {
    /*height: 2rem !important;*/
    /*margin-top: 5px !important;*/
    color:rgb(0, 0, 0);
}

.filter_row .filter_region .apex-item-text {
    /*background-color: #eeeeee !important;*/
    border: 1px solid rgb(42, 139, 172) !important;
    box-shadow: 0 8px 8px -4px lightblue;
    padding-left: 36px !important; /* Prevents icon overlap */
    transition: all 0.3s ease; /* 'all 2s' is very slow; 0.3s is standard for UI */
}

.shortcut_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;
    height: 36px;
    padding: 0 10px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(29, 28, 28, 0.5);

    color: #000;
    background-color: rgba(221, 221, 221, 0.78);

    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;

    transition: all 0.25s ease;
    margin: 5px !important;

    white-space: nowrap;
}








/*  MAKE ALL ITEMS CENTER IN A REGION */
.center-region {
    display: flex !important;
    justify-content: center !important;
    padding: 20px !important;
}

.button_bar {
    display: flex !important;
    justify-content: center !important; /*TEXT ITEMS HORIZONTALLY CENTERED*/  
    background-color:  transparent !important; 
}

.button_bar .t-Form-fieldContainer {  
  display: flex !important;
  align-items: center !important;  /*LABEL VERTICALLY CENTERED*/
}

/*.button_bar .t-Form-inputContainer {
    max-width: 150px !important; 
}*/

.button_bar .t-ButtonRegion-wrap  {
    background-color:  transparent !important;
    background-image: none !important;
}
/* ------------------- */

/*MOBILE SCREEN BUTTON CSS */
.mobile-page  .t-Button.mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;                   /* fixed width for consistency */
    height: 4rem;                   /* consistent height */
    border-radius: 12px;            /* rounded corners */
    margin: 3px !important;
    padding: 0 1rem !important;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
    /*background: linear-gradient(135deg, #bacdd3, #6fa3b3); LIGHT BLUE*/
    /*background: linear-gradient(135deg, #fcfcfc, #dba758);*/
    color: rgb(0, 0, 0) !important;
    text-align: center;
    /*text-transform: capitalize;*/
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    margin-top: 20px !important;
}



/* Label inside mobile buttons */
.mobile-page  .t-Button.mobile-btn .t-Button-label {
    font-size: 0.8rem !important;
    white-space: nowrap;
}

/* Hover effect (desktop) */
.mobile-page  .t-Button.mobile-btn:hover {
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* Pressed state (mobile tap) */
.mobile-page  .t-Button.mobile-btn:active {
    transform: scale(0.96);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}



/* STOP CELL WRAPPING FOR CLASSIC REPORT*/
#bigrow .t-Report-cell {
    white-space: nowrap;
    height: 20px;
    font-size: 12px;
}

/* STOP CELL WRAPPING FOR INTERACTIVE GRID*/
#bigrow .a-GV-cell {
    white-space: nowrap;
    height: 50px;
    font-size: 10px;
}
#bigrow2 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow3 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow4 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow5 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow6 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow7 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow8 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow9 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow10 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}

#bigrow11 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}
#bigrow12 .a-GV-cell {
    white-space: nowrap;
    height: 25px;
    font-size: 12px;
}




.highlight {
    background-color: rgb(234, 243, 196);
    font-weight: bold;
}

.highlight2 {
    background-color: rgb(196, 220, 243);
    font-weight: bold;
}

.highlight3 {
    background-color: rgb(229, 224, 212);
    font-weight: bold;
}
.highlight4 {
    background-color: rgb(244, 216, 196);
    font-weight: bold;
}


/* ------------end of form field formating --------*/



.APPROVED {
color:green;
/*font-size: 16px;*/
font-weight: bold;
}

.PENDING {
color:gray;
/*font-size: 16px;*/
font-weight: bold;
}

.REJECTED {
color:red;
/*font-size: 16px;*/
font-weight: bold;
}

.OT_REJ {
color:red;
/*font-size: 16px;*/
font-weight: bold;
text-decoration: line-through;
}

.HIGHLIGHT {
    background-color: bisque;
    color: black;
    font-weight: bold;
}
.ACTIVE {
color:green;
/*font-size: 16px;*/
font-weight: bold;
}

.NON-ACTIVE {
color:gray;
/*font-size: 16px;*/
font-weight: bold;
}


#bigrow .t-Report-cell {
    white-space: nowrap;
    height: 14px;
    font-size: 11px;
}


.late {
  background-color: rgb(255, 144, 144);
  color:white;  
}

.availed {
  background-color: rgb(150, 205, 155);
  color:white;  
}

.normal {  
  color:black;  
}

.absent {  
  background-color: black !important;  
  color:white !important;
  font-weight: bold !important;
  font-size:16px !important;
}

.overtime {
  background-color: rgb(69, 166, 190);
  color:white;  
}






.slide-left {
    animation: slideleft 2s ease 0s 1 normal forwards;
}
@keyframes slideleft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.slide-right {
    animation: slideright 3s ease 1s 1 normal forwards;
}
@keyframes slideright {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.slide-top {
    animation: slidetop 2s ease 0s 1 normal forwards;
}
@keyframes slidetop {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.slide-bottom {
    animation: slidebottom 2s ease 0s 1 normal forwards;
}
@keyframes slidebottom {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.slide-center {
    animation: slidecenter 2s ease 0s 1 normal forwards;
}
@keyframes slidecenter {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.slide-zoomin {
    animation: zoomin 2s ease 0s 1 normal forwards;
}
@keyframes zoomin {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.slide-zoomout {
    animation: zoomout 2s ease 0s 1 normal forwards;
}
@keyframes zoomout {
	0% {
		opacity: 0;
		transform: scale(1.4);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.shadow {
  border: 1px solid;
  padding: 10px;
  box-shadow: 2px 5px #c5c5c5;
}

.slide-boxshadow {
    animation: boxshadow 2s ease 0s 1 normal forwards;
}
@keyframes boxshadow {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}

	100% {
		box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
	}
}

.slide_bounce {
animation: bounce 3s ease 0s 1 normal forwards;
}
@keyframes bounce {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateY(-45px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateY(-24px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateY(-12px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateY(-6px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateY(-4px);
	}

	25%,
	55%,
	75%,
	87% {
		animation-timing-function: ease-out;
		transform: translateY(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0px);
	}
}

.slide_scaleout {
    animation: scaleout 3s ease 1s 1 normal forwards;
}
@keyframes scaleout {
	0% {
		transform: scale(1);
		transform-origin: 50% 0%;
	}

	100% {
		transform: scale(0);
		transform-origin: 50% 0%;
	}
}



/*  MOBILE DEVICES */




/*.ui-dialog {
    background-color: white !important;
}*/


.mybutton {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 170px;                   /* fixed width for consistency */
    height: 3.5rem;                   /* consistent height */
    border-radius: 12px;            /* rounded corners */
    /*margin: 3px !important;*/
    padding: 0 1rem !important;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
    /*background: linear-gradient(135deg, #bacdd3, #6fa3b3); LIGHT BLUE*/
    background: linear-gradient(135deg, #ffffff, #a9bcc4);
    color: rgb(0, 0, 0) !important;
    text-align: center;
    /*text-transform: capitalize;*/
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    margin-top: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;

}

/*============================HOME PAGE DASHBOARD CSS============================*/

/*====================== TOP MENU BAR AND CARD CSS===========================*/
.top-menu-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap;
}

/* Card Style */
.menu-card {
    width: clamp(40px, 0.8rem + 6vw, 140px);
    /*width: 12vh;*/
    /*height: 12vh;*/
    height: clamp(40px, 0.8rem + 6vw, 140px);
    padding: 10px;
    border-radius: 25px;

    /* Glass background */
    /*background: linear-gradient(135deg,rgba(255, 255, 255, 0.35),rgba(255, 255, 255, 0.08));*/
    background: linear-gradient(135deg, #fcfcfc, #A097B1);
    /*width: 110px;
    height: 110px;
    border-radius: 20px;*/
    /*background: #d4d4d4;*/
    /*border: 1px solid #ff7a00;*/
    text-align: center;
    text-decoration: none;
    /*color: #333;    */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: all 0.3s ease;
    /*box-shadow: 0 5px 15px rgba(0,0,0,0.08);*/

    /* Glass background */
    /*background: linear-gradient(135deg, rgba(255, 255, 255, 0.35),   rgba(255, 255, 255, 0.08)   );*/
    /*background-color: #a9a9ab;*/

    /* Frosted blur */
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);

    /* Glass border */
    /*border: 1px solid rgba(255, 255, 255, 0.25);*/
    /*border: 1px solid #FF7415;*/

    /* Soft shadow */
    box-shadow:  0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);

    color: #060606;
    letter-spacing: 1px;
}

/* Icon */
.menu-card span {
    /*font-size: 20px;*/
    font-size: clamp(20px, 1vw, 13px);
    margin-bottom: 8px;
    color: #444;
}

/* Text */
.menu-card div {
    /*font-size: 12px;*/
    font-size: clamp(10px, 0.8rem + 0.2vw, 12px);    
    font-weight: 300;
    letter-spacing: 1;

}

/* Hover Effect */

/*.menu-card::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.35),   rgba(255, 255, 255, 0.05),  transparent );
    transform: rotate(25deg);
    pointer-events: none;
}*/
.menu-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    /*background: linear-gradient(135deg, #ff7a00, #ff9a3c);*/
       background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.35),
        rgba(196, 166, 90, 0.05),
        transparent
    );
    color: #373737;    
}

.menu-card:hover span {
    color: #1c1c1c;
}

/* Mobile */
@media (max-width: 600px) {
    .menu-card {
        width: 90px;
        height: 90px;
    }

    .menu-card span {
        font-size: 20px;
    }

    .menu-card div {
        font-size: 11px;
    }
}

/*========================================DASHBOARD CSS====================================*/
/* GLOBAL FONT */
body {
  font-family: 'Poppins', 'Fira Sans', sans-serif;
  /*background: #f5f7fb;*/
}

.card-body {
  margin-top: 8px;
}
.card-bg-icon .material-symbols-outlined {
  font-size: 70px;   /* was ~90px */
}
/* ================= DASHBOARD GRID FIX ================= */

.dashboard-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;   /* keep equal height */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.dashboard-grid::-webkit-scrollbar {
  display: none; /* Chrome */
}
/* IMPORTANT: make anchor behave like card container */
.dashboard-grid a {
  flex: 1;
  display: flex;              /* IMPORTANT */
  text-decoration: none;
   min-width: 220px;
}

/* CARD */
.dash-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;         /* REQUIRED for bg icon */
  background: #fbfbfb;        /* RESTORE background */
  border-radius: 18px;
  padding: 18px;
  height: 180px;
  overflow: hidden;
}

/* TEXT */
.card-title {
  /*font-size: 13px;*/
  font-size: clamp(11px, 1vw, 13px);
  color: #64748b;
}

.card-value {
  /*font-size: 30px;*/
  font-size: clamp(20px, 2vw, 30px);
  color: #48494c;  
}

.dash-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);  
  transition: 0.5s ease;
}

.card-header,
.card-body,
.card-footer {
  position: relative;
  z-index: 1;
}

/* HEADER ICON */
.card-icon {
  width: 44px;
  height: 44px;
  background: #eef2ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon .material-symbols-outlined {
  font-size: 22px;
  color: #4f46e5;
}

/* BIG BACKGROUND ICON */
.card-bg-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  opacity: 0.08;
  z-index: 0;                 /* push behind */
}

.card-bg-icon span {
  font-size: 70px;
  color: #fff;
}
.card-icon {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.card-bg-icon .material-symbols-outlined {
  font-size: 90px;
}

.card-subtext {
  font-size: 12px;
  color: #22c55e;
}

.card-subtext.positive {
  color: #16a34a;
}

.card-subtext.negative {
  color: #dc2626;
}

/* FOOTER */
.card-footer {
  font-size: 13px;
  color: #909090;
  font-weight: 500;
  cursor: pointer;
  border-top: 0.5px solid #9ea2a4;
  /*padding-top: 8px;*/
}

/* COLOR VARIANTS */

/* GREEN */
.card-green .card-icon {
  background: #e9ebea;
}
.card-green .card-icon span {
  color: #16a34a;
}
.card-green .card-bg-icon span {
  color: #16a34a;
}
.card-green {
    border-right: 5px solid #b6d7c2;
}


/* BLUE */
.card-blue .card-icon {
  background: #e9ebea;
}
.card-blue .card-icon span {
  color: #4f46e5;
}
.card-blue .card-bg-icon span {
  color: #4f46e5;
}
.card-blue {
    border-right: 5px solid #c4c3e6;
}

/* RED */
.card-red .card-icon {
  background: #e9ebea;
}
.card-red .card-icon span {
  color: #d7333e;
}
.card-red .card-bg-icon span {
  color: #d7333e;
}
.card-red {
    border-right: 5px solid #d0a7aa;
}
/* PURPLE */
.card-purple .card-icon {
  background: #e9ebea;
  
}
.card-purple .card-icon span {
  color: #d742d7;
}
.card-purple .card-bg-icon span {
  color: #d742d7;
}
.card-purple {
    border-right: 5px solid #c79ac9;
    /*background: linear-gradient(135deg, #fcfcfc, #A097B1);*/
}


/* orange */
.card-orange .card-icon {
  background: #e9ebea;
}
.card-orange .card-icon span {
  color: #d47f47;
}
.card-orange .card-bg-icon span {
  color: #d47f47;
}
.card-orange {
    border-right: 5px solid #d4b19b;
}



/*================================TOP EMPLOYEES REGION CSS===============================*/
/*#TOP_EMP_CONTAINER .a-CardView-items {    
    background-color: #504f6c !important;
}*/

#TOP_EMP_CONTAINER {
    background-image: linear-gradient(to bottom right, #efefef, #ffffff);
}
#TOP_EMP_CONTAINER .a-CardView {    
    background-image: linear-gradient(to bottom right, #ebebeb, #ffffff);
    border: 1px solid;     
    /*box-shadow: 2px 5px #e5e5e5;*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-radius: 18px !important;
}

#TOP_EMP_CONTAINER .a-CardView:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}



/* ==========================================
   BIRTHDAY CARD - RESPONSIVE FINAL VERSION
   Static ID: BIRTHDAY_CARD
   Heading: Manrope
   Text: Plus Jakarta Sans
========================================== */

/*================ BIRTHDAY CARD =========================*/
/* Responsive version based on your latest CSS */

/* Main Region */
#BIRTHDAY_CARD{
    background:#ffffff;
    border-radius:18px;
    padding:14px 14px 8px 14px;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
    border:1px solid #ececf2;
    position:relative;
    font-family:'Plus Jakarta Sans',sans-serif;
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

#BIRTHDAY_CARD:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);  
  transition: 0.5s ease;
}

/* Header */
#BIRTHDAY_CARD::before{
    content:"Upcoming Birthdays";
    display:block;
    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;
    color:#565656;
    letter-spacing:1px;
    margin-bottom:10px;
    padding:0 4px 8px 4px;
    border-bottom:1px solid rgb(91,91,91);
    line-height:1.2;
}

/* Footer */
#BIRTHDAY_CARD::after{
    content:"View All";
    display:block;
    font-family:'Manrope',sans-serif;
    font-size:11px;
    font-weight:500;
    color:#565656;
    letter-spacing:1px;
    margin-top:10px;
    padding:8px 4px 0 4px;
    border-top:1px solid rgb(91,91,91);
    line-height:1.2;
}

/* Hide native header */
#BIRTHDAY_CARD .t-Region-header{
    display:none !important;
}

/* Card list */
#BIRTHDAY_CARD .a-CardView-items{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    width:100%;
}

/* Items */
#BIRTHDAY_CARD .a-CardView-item{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    width:100%;
}

/* Remove built-in styles */
#BIRTHDAY_CARD .a-CardView,
#BIRTHDAY_CARD .a-CardView-body,
#BIRTHDAY_CARD .a-CardView-main,
#BIRTHDAY_CARD .a-CardView.has-body{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    border-radius:0 !important;
    width:100%;
}

/* Row */
#BIRTHDAY_CARD .bday-card-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 6px;
    border-bottom:1px solid #f1f2f6;
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

/* Last row */
#BIRTHDAY_CARD .a-CardView-item:last-child .bday-card-row{
    border-bottom:none;
}

/* Text */
#BIRTHDAY_CARD .bday-info{
    flex:1 1 auto;
    min-width:0;
}

/* Name */
#BIRTHDAY_CARD .bday-name{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:13px;
    font-weight:600;
    color:#374151;
    line-height:1.2;
    letter-spacing:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Meta */
#BIRTHDAY_CARD .bday-meta{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:10px;
    color:#909296;
    margin-top:5px;
    font-weight:500;
    line-height:1.3;
    word-break:break-word;
}

/* Avatar */
#BIRTHDAY_CARD .bday-avatar-wrap{
    flex:0 0 auto;
}

#BIRTHDAY_CARD .bday-avatar-ring{
    width:60px;
    height:60px;
    padding:2px;
    border-radius:50%;
    background:linear-gradient(135deg,#8e3690,#d3aed4);
    box-sizing:border-box;
}

#BIRTHDAY_CARD .bday-avatar{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
}

#BIRTHDAY_CARD .bday-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/*#BIRTHDAY_CARD{
    position:sticky;
    top:70px;
    z-index:999;
}*/
/* ================= TABLET ================= */
@media (max-width:768px){

#BIRTHDAY_CARD{
    padding:12px 12px 8px 12px;
}

#BIRTHDAY_CARD::before{
    font-size:13px;
    letter-spacing:.8px;
}

#BIRTHDAY_CARD::after{
    font-size:10px;
}

#BIRTHDAY_CARD .bday-card-row{
    padding:12px 4px;
    gap:10px;
}

#BIRTHDAY_CARD .bday-name{
    font-size:12px;
}

#BIRTHDAY_CARD .bday-meta{
    font-size:9.5px;
}

#BIRTHDAY_CARD .bday-avatar-ring{
    width:52px;
    height:52px;
}
}

/* ================= MOBILE ================= */
@media (max-width:480px){

#BIRTHDAY_CARD{
    padding:10px 10px 6px 10px;
}

#BIRTHDAY_CARD::before{
    font-size:12px;
    letter-spacing:.5px;
}

#BIRTHDAY_CARD::after{
    font-size:9.5px;
}

#BIRTHDAY_CARD .bday-card-row{
    padding:10px 2px;
    gap:8px;
    align-items:flex-start;
}

#BIRTHDAY_CARD .bday-name{
    font-size:11px;
    white-space:normal;
}

#BIRTHDAY_CARD .bday-meta{
    font-size:9px;
}

#BIRTHDAY_CARD .bday-avatar-ring{
    width:44px;
    height:44px;
}
}



/*==========BIRTHDAY CSS CLAUD=========================*/
/* ===== Upcoming Birthdays Card ===== */
/* ===== Wrapper: remove gaps between cards ===== */
/* ===== Wrapper: remove gaps between cards ===== */
/* ===== Kill card gaps ===== */
#BIRTHDAY_CARD2 .t-Cards {
  display: block !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#BIRTHDAY_CARD2 .t-Cards-item {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ===== Unified card box ===== */
#BIRTHDAY_CARD2 .t-Region-body {
  padding: 0 !important;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(130, 100, 220, 0.10);
  border: 0px solid #ede9f8;
  overflow: hidden;
}

/* ===== Hide APEX card chrome ===== */
#BIRTHDAY_CARD2 .t-Card-titleWrap,
#BIRTHDAY_CARD2 .t-Card-header,
#BIRTHDAY_CARD2 .t-Card-icon,
#BIRTHDAY_CARD2 .t-Card-body {
  display: none !important;
}

#BIRTHDAY_CARD2 .t-Card-body--main {
  display: block !important;
  padding: 0 !important;
}

#BIRTHDAY_CARD2 .t-Card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

#BIRTHDAY_CARD2 .t-Card-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== Injected Header ===== */
#BIRTHDAY_CARD2 .bd-header {
  padding: 16px 18px 12px 18px;
  border-bottom: 1px solid #f0ebff;
}

#BIRTHDAY_CARD2 .bd-header span {
  font-size: 15px;
  font-weight: 700;
  color: #2d2d3a;
  font-family: 'Segoe UI', sans-serif;
  border-bottom: 2px solid #7c5cbf;
  padding-bottom: 4px;
}

/* ===== Birthday Row ===== */
#BIRTHDAY_CARD2 .bd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #f3f0fb;
  background: #ffffff;
  transition: background 0.2s;
}

#BIRTHDAY_CARD2 .bd-item:hover {
  background: #f8f5ff;
}

/* ===== Avatar ===== */
#BIRTHDAY_CARD2 .bd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e0f8;
  border: 2px solid #d4c8f5;
}

#BIRTHDAY_CARD2 .bd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Name ===== */
#BIRTHDAY_CARD2 .bd-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #2d2d3a;
  font-family: 'Segoe UI', sans-serif;
  letter-spacing: 0.3px;
}

/* ===== Date + Age ===== */
#BIRTHDAY_CARD2 .bd-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

#BIRTHDAY_CARD2 .bd-date {
  font-size: 13px;
  color: #9b8ec4;
  font-weight: 600;
  font-family: 'Segoe UI', sans-serif;
}

#BIRTHDAY_CARD2 .bd-age {
  font-size: 11px;
  color: #bdb0d8;
  font-family: 'Segoe UI', sans-serif;
}

/* ===== Injected Footer ===== */
#BIRTHDAY_CARD2 .bd-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid #f0ebff;
  cursor: pointer;
  transition: background 0.2s;
}

#BIRTHDAY_CARD2 .bd-footer:hover {
  background: #f8f5ff;
}

#BIRTHDAY_CARD2 .bd-footer span {
  font-size: 13px;
  font-weight: 600;
  color: #7c5cbf;
  font-family: 'Segoe UI', sans-serif;
}

#BIRTHDAY_CARD2 .bd-footer .bd-arrow {
  color: #7c5cbf;
  font-size: 16px;
}



/* ==========================================
   UNIVERSAL INTERACTIVE GRID S/NO STYLE
   Applies to all APEX Interactive Grids
   ========================================== */


/* ==========================================
   INTERACTIVE GRID S/NO - MASTER CSS CLASS
   ========================================== */

.ig-sno-style .a-GV-rowHeader,
.ig-sno-style .a-GV-rownum,
.ig-sno-style .a-GV-rowHeader .a-GV-cellContent {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0078a8 !important;
}

.ig-sno-style .a-GV-rownum,
.ig-sno-style .a-GV-rowHeader .a-GV-cellContent {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ig-sno-style .a-GV tr.a-GV-row > th:first-child,
.ig-sno-style .a-GV tr.a-GV-row > td:first-child {
    text-align: center !important;
    vertical-align: middle !important;
}



/* S/NO heading in sequence column only */
.ig-sno-style .a-GV-headerGroup .a-GV-header:first-child::after,
.ig-sno-style .a-GV-header:first-child::after {
    content: "S/NO";
    font-size: 10px;
    font-weight: 700;
    color: #0078a8;
}

/* Center heading */
.ig-sno-style .a-GV-header:first-child {
    text-align: center !important;
}