/* assets/css/custom.css */

/* 1. Define Color Palette using CSS Variables */
:root {
    /* Define base colors using RGB values */
    --kk-deep-purple-rgb: 76 29 149; 	/* #4c1d95 */
    --kk-yellow-rgb: 255 193 7;			/* #ffc107 */
	--kk-rich-gold-rgb: 255 193 7;		/* #ffc107 */
    --kk-teal-rgb: 20 184 166;			/* #14b8a6 */
    
    /* Define full colors using the RGB variables */
    --kk-deep-purple: rgb(var(--kk-deep-purple-rgb));
    --kk-light-purple: #EDE9FE;
    --kk-yellow: rgb(var(--kk-yellow-rgb));
    --kk-teal: rgb(var(--kk-teal-rgb));
    --kk-light-gray: #F3F4F6;
    --kk-dark-gray: #374151;

    /* NEW: Define colors with opacity */
    --kk-yellow-o20: rgb(var(--kk-yellow-rgb) / 0.2);
    --kk-yellow-o40: rgb(var(--kk-yellow-rgb) / 0.4);
}

/* 2. Global Styles */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: var(--kk-light-gray);
    color: var(--kk-dark-gray);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* 3. Custom Form Styles */

/* Style for the select dropdown to make it more prominent */
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Style for textareas to give them a consistent look */
.custom-textarea {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.custom-textarea:focus {
    border-color: var(--kk-deep-purple);
    box-shadow: 0 0 0 2px var(--kk-light-purple);
    outline: none;
}

/* Loading spinner style */
#loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--kk-deep-purple);
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
 * =========================================
 * FullCalendar Button Theming
 * =========================================
 * Overrides the default FullCalendar button styles to match the KiddoKudos theme.
 * This targets the buttons specifically within the #calendar-container.
 */

/* Default state for buttons like 'today', '<', and '>' */
#calendar-container .fc-button-primary {
    background-color: var(--kk-deep-purple);
    border-color: var(--kk-deep-purple);
    transition: background-color 0.2s; /* Adds a smooth transition effect */
}

/* Hover state for all buttons */
#calendar-container .fc-button-primary:hover {
    background-color: var(--kk-light-purple);
    border-color: var(--kk-light-purple);
	color: var(--kk-deep-purple);
}

/* Active/selected state for view buttons (e.g., 'month', 'week', 'day') */
#calendar-container .fc-button-primary:not(:disabled).fc-button-active,
#calendar-container .fc-button-primary:not(:disabled):active {
    background-color: var(--kk-yellow);
    border-color: var(--kk-yellow);
	color: var(--kk-deep-purple);
}



/*
 * =========================================
 * Final Mobile Calendar Layout Fixes
 * =========================================
 */
@media (max-width: 768px) {
  #calendar-container {
    --fc-font-size: 12px;
  }
}
/*
 * =========================================
 * Definitive Mobile Calendar Header Fix
 * =========================================
 */

/* 1. Forces day/date headers to stack vertically and centers them */
#calendar-container .fc-col-header-cell-cushion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 45px !important;
    padding: 2px 0;
}

/* 2. Forces the 'all day' column to a fixed, narrow width */
#calendar-container th.fc-timegrid-axis {
    width: 55px !important;
}

/* 3. Targets the innermost 'all day' text container and centers it */
#calendar-container .fc-timegrid-axis-cushion {
    text-align: center !important;
}

/* 4. Keeps the main time slots left-aligned as normal */
#calendar-container .fc-timegrid-slot-label-cushion {
    text-align: left !important;
}

/* Styles the main title in the FullCalendar toolbar */
#calendar-container .fc-toolbar-title {
    color: var(--kk-deep-purple);
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

/*
 * =========================================
 * Roadmap Module CSS
 * =========================================
 */

/* Add to assets/css/custom.css */

/* Filter buttons for roadmaps module */
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    border: 1px solid var(--kk-deep-purple);
    color: var(--kk-deep-purple);
    background: white;
    font-weight: 500;
}

.filter-btn:hover {
    background: var(--kk-deep-purple);
    color: white;
}

.filter-btn.active {
    background: var(--kk-deep-purple);
    color: white;
}

/* Line clamp utility for roadmap cards */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress bar styling */
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kk-teal);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kk-teal);
    cursor: pointer;
    border: none;
}

/* Tab styling for multilingual editor */
.lang-tab {
    padding: 0.5rem 1.5rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
    color: var(--kk-dark-gray);
}

.lang-tab:hover {
    color: var(--kk-deep-purple);
    border-bottom-color: var(--kk-light-purple);
}

.lang-tab.active {
    color: var(--kk-deep-purple);
    border-bottom-color: var(--kk-deep-purple);
    font-weight: 600;
}

.lang-content {
    display: none;
}

.lang-content.active {
    display: block;
}