/* public_html/css/style.css */

/* General Body and Container Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/*
   The .container class here is for general page content.
   For the video view page, we'll use .main-content-wrapper for the specific layout.
   You might use .container for other pages like dashboard, admin, etc.
*/
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Navigation Bar */
.nav {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    overflow: hidden;
    display: flex; /* Use flexbox for better alignment */
    justify-content: flex-start; /* Align items to the start */
    align-items: center;
}

.nav a {
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display: block; /* Make the whole area clickable */
}

.nav a:hover {
    background-color: #575757;
}

.nav .logout {
    background-color: #dc3545;
    border-radius: 5px;
    margin-left: auto; /* Push logout to the right */
}

.nav .logout:hover {
    background-color: #c82333;
}

/* Dropdown Menu (for Video Tutorials) */
.nav ul.dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #444;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000; /* Ensure it's above other content */
    top: 100%; /* Position below the parent link */
    left: 0;
    border-radius: 0 0 5px 5px;
}

.nav ul.dropdown li {
    float: none; /* Make dropdown items stack vertically */
}

.nav ul.dropdown li a {
    padding: 12px 16px;
    text-align: left;
    white-space: nowrap; /* Keep text on one line */
    color: white;
    display: block; /* Ensure it takes full width of dropdown */
}

.nav ul.dropdown li a:hover {
    background-color: #575757;
}

.nav li.dropdown-parent:hover .dropdown {
    display: block; /* Show on hover */
}

/* Specific styling for the dropdown parent list item */
.nav li.dropdown-parent {
    /* If you're using flexbox on .nav, you might not need float: left; here, */
    /* but keeping it for compatibility with previous float-based nav. */
    float: left; /* Keep this if other nav items are floats or for older browsers */
    list-style: none; /* Remove bullet */
    position: relative; /* Essential for positioning the dropdown */
    margin: 0;
    padding: 0;
}
/* If using flexbox for .nav and you want dropdown-parent to behave like other flex items,
   you might remove float: left; from .nav li.dropdown-parent and rely on the flex container.
   However, for backwards compatibility or specific dropdown needs, `float` can sometimes be retained.
   For `.nav`, since it's `display:flex`, you can remove `float: left` from `.nav li.dropdown-parent`
   and it should still work due to `position: relative`. */


.nav li.dropdown-parent > a { /* Style the direct link inside the dropdown parent */
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}

/* Form Styles (Login, Register, Admin) */
.form-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.form-container h2 {
    color: #333;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}

.form-group input[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-group input[type="submit"]:hover {
    background-color: #0056b3;
}

.link-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.link-button:hover {
    background-color: #5a6268;
}

/* Message Styles (Success, Error) */
.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

/* User Dashboard & Admin Panel Specifics */
.dashboard-content, .admin-content {
    text-align: center;
    padding: 20px;
}

.dashboard-content h2, .admin-content h2 {
    margin-bottom: 20px;
    color: #333;
}

.dashboard-content p, .admin-content p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
}

/* Admin Panel Table */
.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.user-table th, .user-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.user-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.user-table tr:nth-child(even){background-color: #f9f9f9;}

.user-table tr:hover {background-color: #f1f1f1;}

.action-links a {
    margin-right: 10px;
    color: #007bff;
    text-decoration: none;
}

.action-links a:hover {
    text-decoration: underline;
}

.action-links .delete {
    color: #dc3545;
}


/* Video/Category Card Display */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 20px 0;
    justify-content: center; /* Center cards in the grid */
}

.video-card, .category-card { /* Apply consistent styling to both video and category cards */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: visible; /* Changed from hidden to visible to allow tooltip to pop out */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    position: relative; /* Essential for absolute positioning of the tooltip */
    max-width: 170px; /* Adjust this value to match your desired card width */
    min-width: 150px;
    margin-left: auto; /* Center the cards within their grid cell if narrower than max-width */
    margin-right: auto;
}

.video-card:hover, .category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.video-thumbnail, .category-thumbnail { /* Apply consistent styling for thumbnails */
    width: 100%;
    height: 90px;
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block;
    background-color: #eee; /* Placeholder background */
}

.video-info, .category-info { /* Consistent info padding */
    padding: 8px;
    flex-grow: 1; /* Allows info section to take available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.video-title, .category-title { /* Consistent title styling */
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Styles for the tooltip description */
.video-description, .category-description {
    position: absolute;
    /* Position the tooltip above the card, with a small gap */
    bottom: calc(100% + 10px);
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for perfect centering */

    background-color: #333; /* Dark background for tooltip */
    color: white;
    padding: 8px 12px; /* Padding inside the tooltip */
    border-radius: 5px;
    z-index: 1000; /* Ensure it appears above other content */

    /* Key changes for hiding/showing */
    display: none; /* Hide completely and remove from layout initially */
    opacity: 0; /* For transition effect when shown */
    visibility: hidden; /* For transition effect when shown */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */

    text-align: center; /* Center align text within the tooltip */
    white-space: normal; /* Allow text to wrap */
    max-width: 200px; /* Limit tooltip width to prevent it from being too wide */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Small shadow for depth */

    /* Removed any conflicting line-clamp or flexbox properties from previous attempts */
}

/* Show tooltip on hover of the video/category card */
.video-card: