/*
   style.css for the file sharing app
   This stylesheet adopts a dark gradient theme with modern UI
   components for uploading files and listing available files.
*/


/* Reset and base styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background: #0f2027;
    color: #f5f6fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Navigation bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.nav-left {
    display: flex;
    align-items: center;
}

/* Logo image sizing. Increased height for greater visibility. */
.logo-img {
    height: 110px;
    width: auto;
    padding: 0px;
    flex-shrink: 0;
}

/* Brand name next to the logo */
.brand-name {
    margin-left: 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #f3c623;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    /* Push the navigation list to the right side of the navbar */
    margin-left: auto;
}

.nav-links a {
    color: #f5f6fa;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.nav-links a:hover {
    color: #f3c623;
}

/* Mobile navigation toggle button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #f5f6fa;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    /* Hide the nav links on small screens until toggled */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        background: rgba(0, 0, 0, 0.9);
        padding: 1rem;
        border-radius: 6px;
        width: 200px;
    }
    /* When open class is applied, display the menu */
    .nav-links.open {
        display: flex;
    }
    /* Show the menu toggle (hamburger) on small screens */
    .menu-toggle {
        display: block;
    }
}

/* Carousel and overlay */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    flex: 1 0 auto;
    margin-top: 70px; /* offset for navbar */
}

.carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.carousel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container class for videos in the carousel created by carousel.js */
.carousel-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Video element styling inside carousel video wrapper */
.carousel-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom video controls for carousel videos */
.video-controls {
    display: flex;
    gap: 0.5rem;
}

.video-control-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Progress bar styling for uploads */
.progress-container {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    height: 8px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background: #4a7dfc;
    transition: width 0.2s ease;
}

/* Carousel indicator styling */
.carousel-indicators {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 3;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease;
}

.carousel-dot.active {
    background: #4a7dfc;
}

.status-message {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/*
   The overlay sits above the carousel background and contains interactive
   elements like the upload card or contact form.  To ensure that the
   background videos remain controllable, we disable pointer events on
   the overlay itself and then re-enable them on its children.  We
   increase the z-index so the overlay appears in front of the
   carousel, but below the navigation bar.
*/
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

/* Restore pointer events on interactive children inside the overlay */
.overlay .upload-card,
.overlay .contact-form-container,
.overlay .about-description,
.overlay .tagline,
.overlay .upload-description {
    pointer-events: auto;
}

/* Description above the upload card */
.upload-description {
    margin-bottom: 0.5rem;
}
.upload-description h2 {
    font-size: 2rem;
    margin-bottom: 0.3rem;
    color: #f3c623;
    font-weight: 700;
}
.upload-description p {
    font-size: 1rem;
    color: #d1d8e0;
    max-width: 600px;
    margin: 0 auto;
}

.tagline h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    color: #f3c623;
    font-weight: 700;
}

.tagline p {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    color: #d1d8e0;
    font-weight: 500;
}

/* Upload card inside overlay */
.upload-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    margin-top: 1rem;
}

.upload-card h2 {
    margin-bottom: 1rem;
}

/* Sections styling */
.upload-section, .files-section {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.upload-card, .files-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.upload-card h2, .files-card h2 {
    margin-bottom: 1rem;
}

.drop-area {
    border: 2px dashed #4a7dfc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.drop-area.dragover {
    background: rgba(74, 125, 252, 0.3);
}

.drop-area input[type="file"] {
    display: none;
}

.file-label {
    color: #4a7dfc;
    text-decoration: underline;
    cursor: pointer;
}

.file-list {
    margin-top: 1rem;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.5rem;
}

/* Client info fields */
.text-input {
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #f5f6fa;
    font-family: inherit;
}

.textarea-input {
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #f5f6fa;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.file-item:last-child {
    border-bottom: none;
}

.file-name {
    flex: 1;
    margin-right: 0.5rem;
    word-break: break-all;
}

.file-size {
    font-size: 0.85rem;
    color: #a0b2d6;
    margin-right: 0.5rem;
}

.remove-btn {
    background: transparent;
    border: none;
    color: #e74c3c;
    font-size: 1rem;
    cursor: pointer;
}

.upload-btn, .refresh-btn {
    width: 100%;
    margin-top: 1.2rem;
    padding: 0.8rem;
    border: none;
    border-radius: 6px;
    background: #4a7dfc;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.upload-btn:disabled {
    background: #6c7be5;
    cursor: default;
}

.upload-btn:not(:disabled):hover, .refresh-btn:hover {
    background: #3660d7;
}

.upload-status {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #a0b2d6;
}

.files-list {
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.5rem;
}

.files-list .file-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.files-list .file-entry:last-child {
    border-bottom: none;
}

.download-link {
    color: #4a7dfc;
    text-decoration: underline;
    font-size: 0.9rem;
}

footer {
    padding: 1rem 2rem;
    font-size: 0.8rem;
    color: #a0b2d6;
    background: rgba(0,0,0,0.6);
}

/* Footer content layout */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Center the social links horizontally within the footer */
    margin-left: auto;
    margin-right: auto;
}

.social-links a {
    color: #4a7dfc;
    text-decoration: none;
    transition: color 0.2s;
}

.social-links a:hover {
    color: #f3c623;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Copyright text styling */
.copyright {
    font-size: 0.8rem;
    color: #a0b2d6;
}

.admin-link {
    color: #4a7dfc;
    text-decoration: underline;
}

.admin-link:hover {
    color: #f3c623;
}

.contact-form-container {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    margin-top: 2rem;
}

.contact-form-container h2 {
    margin-bottom: 1rem;
}

.subject-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.file-input {
    margin-top: 0.2rem;
    color: #a0b2d6;
}

.status-message {
    margin-top: 0.8rem;
    font-size: 0.9rem;
    color: #a0b2d6;
}

/* Social cards under the contact form */
.social-cards {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
}

.social-cards a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease, background 0.2s ease;
}

.social-cards a img {
    width: 24px;
    height: 24px;
}

.social-cards a:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

.about-description {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.about-description h2 {
    margin-bottom: 1rem;
    color: #f3c623;
}

.about-description p {
    line-height: 1.5;
    font-size: 1rem;
    color: #d1d8e0;
}
.hidden {
    display: none;
}

@media (max-width: 768px) {
    .nav-links, .nav-buttons {
        display: none;
    }
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .upload-card, .files-card {
        margin: 0 1rem;
    }
}




/* =====================================================
   MODERN ADMIN LOGIN PAGE
===================================================== */

body.login-page{
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(80,160,220,.25), transparent 60%),
    linear-gradient(180deg, #0b1f26, #0f2d36);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e6eef5;
}

/* Card */
.login-wrap{
  width: min(420px, calc(100vw - 32px));
  padding: 28px 26px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  text-align: center;
}

/* Logo */
.login-logo{
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.login-logo img{
  width: 96px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
}

/* Title */
.login-title{
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .4px;
}

/* Error */
.login-error{
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,80,80,.15);
  border: 1px solid rgba(255,80,80,.25);
  font-size: 14px;
}

/* Form */
.login-form{
  display: grid;
  gap: 12px;
}

.login-form input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: #fff;
  padding: 0 16px;
  font-size: 15px;
  outline: none;
}

.login-form input::placeholder{
  color: rgba(255,255,255,.45);
}

.login-form input:focus{
  border-color: rgba(120,200,255,.55);
  background: rgba(0,0,0,.28);
}

/* Button */
.login-form button{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(120,200,255,.35), rgba(120,200,255,.18));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.login-form button:hover{
  background: linear-gradient(180deg, rgba(120,200,255,.55), rgba(120,200,255,.30));
}

/* Links */
.login-links{
  margin-top: 14px;
}

.login-links a{
  color: rgba(200,230,255,.95);
  text-decoration: none;
  font-size: 14px;
}

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

/* Mobile tweaks */
@media (max-width: 420px){
  .login-title{ font-size: 26px; }
  .login-logo img{ width: 78px; }
}