/* ===== Base Styles ===== */
    :root {
       
        --secondary-color: #3a0ca3;
        --light-color: #f8f9fa;
        --dark-color: #212529;
        --border-color: #e9ecef;
        --card-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }


    body {
        font-family: 'Segoe UI', sans-serif;
        background-color: #f5f7fa;
        color: var(--dark-color);
    }


    /* ===== Main Content ===== */
    .dashboard-content {
        padding: 2rem;
        flex: 1;
    }

    /* Metrics Row */
 
    .metric-card {
       
        padding: 1.5rem;
        
        display: flex;
        align-items: center;
        gap: 1rem;
       /* border-left: 4px solid var(--primary-color);*/
    }

    .metric-icon {
        background: rgba(67, 97, 238, 0.1);
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .metric-icon i {
        font-size: 1.5rem;
        color: var(--black-light-color);
    }
	
		.metric-info {
			display: flex;
			flex-direction: column;
		}
    .metric-title {
        font-size: 0.9rem;
        color: var(--black-light-color);
    }

    .metric-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--black-light-color);
    }

 
    /* Cards */
   

    .card-header {
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header h3 {
        font-size: 1.1rem;
		color: var(--black-light-color);
    }

    .card-header i {
        color: var(--black-light-color);
        font-size: 1.2rem;
    }

    
    
    .card-body {
        padding: 1.5rem;
        flex: 1;
    }

    /* Table Styles */
    .table-responsive {
        overflow-x: auto;
    }

    .kalam-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    .kalam-table th {
        background: var(--panel-color);
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
		color: var(--black-light-color);
    }

    .kalam-table td {
        padding: 0.75rem;
        border-bottom: 1px solid var(--border-color);
		color: var(--black-light-color);
    }

    .kalam-table tr:last-child td {
        border-bottom: none;
    }

    .text-right {
        text-align: right;
    }

    .text-center {
        text-align: center;
    }
		
	 /* Enhanced table row hover effect */
    .kalam-table tr:hover {
        
    }

    /* Added spacing for card headers */
    .card-header {
        gap: 1rem;
    }

    /* ===== Responsive Design ===== */
   

    @media (max-width: 768px) {
     

        .header-right {
            width: 100%;
            justify-content: space-between;
        }

        .dashboard-content {
            padding: 1rem;
        }

        
        .card-body {
            padding: 1rem;
        }
    }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 80px;
    padding: 0 20px;
}

.dashboard-item {
    background-color: var(--panel-color);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
	 .dashboard-item h3,
	 .dashboard-item p{
		 font-size: 1.1rem;
   		 color: var(--black-light-color);
	 }
	 .dashboard-item h4
	 {
		
   		 color: var(--black-light-color);
	 }

.dashboard-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}


.poet-item{
		
   		 color: var(--black-light-color);
	 }

/* Specific item positioning */
.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 3; grid-row: 1; }
.item-4 { grid-column: 4; grid-row: 1 / span 2; }
.item-5 { grid-column: 1 / span 2; grid-row: 2; }
.item-6 { grid-column: 1 / span 2; grid-row: 4; }
.item-8 { grid-column: 3 / span 2; grid-row: 4; }
.item-9 { grid-column: 4; grid-row: 3; }
.item-10 { grid-column: 3; grid-row: 2; }
.item-11 { grid-column: 2 / span 2; grid-row: 3; }
.item-12 { grid-column: 1 ; grid-row: 3; }

/* Border colors */
 .item-1, 
        .item-2, 
        .item-3, 
        .item-4, 
        .item-5,
        .item-6, 
        .item-8, 
        .item-9,
		.item-10,
		.item-11,
	 	.item-12{ border-top: 4px solid #587964; }
.recent-item {
			display: flex;
			align-items: center;
			
			margin: 8px 0;
			color: var(--black-light-color);
			border-radius: 8px;
		}
	 
	 
	 
	 /* Play Controls */
.play-controls .play-button {
    background: #587964;
    color: white !important;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
 .play-album { 
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: scale(1.05);
    background: #47624f;
}
	 
.play-album:hover {
    transform: scale(1.05);
    
}

.play-controls, .album-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.duration {
    font-size: 0.9em;
    color: var(--black-light-color);
}

/* Loading State */
.play-button.loading::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
	 
	 
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        max-width: none;
        margin: 20px;
        padding: 0;
    }
    
    .dashboard-item {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 150px;
    }
}
	 
	 

	 
	   /* Style for the Recommended Album section (now targeting item-5) */
    .dashboard-item.item-5 .recommended-album-container {
        display: flex;
        /*align-items: flex-start; /* Align items to the top */
       /* margin-top: 10px;*/
        background-color: var(--panel-color); /* Match dashboard item background */
        border-radius: 8px;
        padding: 5px;
		flex-direction: column;
    }

    .dashboard-item.item-5 .album-cover {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        margin-right: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .dashboard-item.item-5 .album-info {
        flex-grow: 1;
		margin-top: 10px;
    }

    .dashboard-item.item-5 .album-title {
       
        color: var(--black-light-color);
		text-align: center;
        
    }

    .dashboard-item.item-5 .tracks-list {
        list-style: none;
        padding-left: 0;
		margin-top: 10px;
    }

.dashboard-item.item-5 .album-img{
	width: auto;
	text-align: center;
}

    .dashboard-item.item-5 .track-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
       /* margin-bottom: 8px;
        padding: 8px 0;*/
     
    }

    .dashboard-item.item-5 .track-item:last-child {
        border-bottom: none;
    }

    .dashboard-item.item-5 .track-title {
        flex-grow: 1;
        color: var(--black-light-color);
    }

    .dashboard-item.item-5 .play-button {
       
     border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
		background: #ffffff00;
       
    }

    .dashboard-item.item-5 .play-button i {
        margin-right: 5px;
		    color: var(--black-light-color);
    }

    .dashboard-item.item-5 .play-button:hover {
       
    }

    .dashboard-item.item-5 .duration {
        font-size: 0.8em;
        color: var(--black-light-color);
        margin-left: 8px;
    }