/* Importing the Poppins font, which was linked in the HTML file */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Setting the base font for the entire document to Poppins */
body {
    font-family: 'Poppins', sans-serif;
}

/* These are Tailwind CSS directives. They tell Tailwind to inject its
  base styles, component classes, and utility classes into this CSS file.
  This is standard setup for using Tailwind in a CSS file.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;


/* I'm using the '@layer components' directive to create my own custom, reusable classes.
  This is a powerful feature of Tailwind that helps me avoid repeating the same long list
  of utility classes in my HTML. It makes the HTML much cleaner.
*/
@layer components {
    /* Base styles for all my text input fields */
    .input-field {
        @apply w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg shadow-sm text-gray-800 transition duration-300;
        /* Adding focus styles for better user experience */
        @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    }

    /* Special style for the file input field to make it look nice */
    .file-input {
        @apply block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold;
        @apply file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition;
    }

    /* Base styles for all buttons to keep them consistent */
    .btn {
        @apply px-4 py-2.5 font-semibold rounded-lg shadow-md transition-transform transform;
        @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
        /* This adds a nice little "press down" effect when a button is clicked */
        @apply active:scale-95; 
    }

    /* Styling for the main "Register" or "Update" button */
    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
    }

    /* Styling for the secondary "Clear" button */
    .btn-secondary {
        @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400;
    }
    
    /* These are the small buttons for 'Edit' and 'Delete' in the table */
    .btn-icon {
        @apply px-3 py-1 text-sm rounded-md transition-colors;
    }

    .btn-edit {
        @apply bg-green-100 text-green-800 hover:bg-green-200;
    }

    .btn-delete {
        @apply bg-red-100 text-red-800 hover:bg-red-200;
    }

    /* Styling for the header cells in my table (Name, ID, Email, etc.) */
    .table-header {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }

    /* Styling for the data cells in my table (the actual student info) */
    .table-data {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-800;
    }
}

/* This section adds custom styling to the scrollbar for the table container.
  It makes the scrollbar look more modern and less clunky than the browser default.
  This is a great touch for improving the overall presentation.
  Note: This styling mainly works in WebKit-based browsers like Chrome, Safari, and Edge.
*/
#table-container::-webkit-scrollbar {
    width: 8px; /* Width of the vertical scrollbar */
    height: 8px; /* Height of the horizontal scrollbar */
}

#table-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* The track (the part the scrollbar moves along) */
    border-radius: 10px;
}

#table-container::-webkit-scrollbar-thumb {
    background: #a8a8a8; /* The draggable scrolling handle */
    border-radius: 10px;
}

#table-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* The handle becomes darker on hover */
}