@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.fw-black { font-weight: 800; }
.fw-extrabold { font-weight: 700; }

.custom-drag-zone {
    border-color: #0d6efd !important;
    background-color: #f8f9fa;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-drag-zone:hover, .custom-drag-zone.dragover {
    background-color: #f1f3f5 !important;
    border-color: #0b5ed7 !important;
    transform: translateY(-2px);
}

.cursor-pointer { cursor: pointer; }


.max-w-2xl { max-width: 42rem; }


/* Hero & Upload Zone */
.hero-section { background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); }
#drop-zone { transition: all 0.3s ease; cursor: pointer; }
#drop-zone:hover { border-color: var(--bs-primary) !important; background: #fff !important; }
#file-input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 10;
}
.upload-icon-wrap { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Cards */
.tool-card { 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    border-radius: 1.25rem !important; 
    overflow: hidden; 
}
.tool-card:hover { transform: translateY(-8px); box-shadow: 0 1rem 2rem rgba(0,0,0,0.1) !important; }
/* Base Icon Box Style */
.icon-box {
    width: 65px; 
    height: 65px; 
    line-height: 65px; 
    border-radius: 50%; 
    display: inline-block;
    font-size: 1.5rem;
}

/* Color Modifiers */
.icon-box.bg-primary-box { background: rgba(13, 110, 253, 0.1); color: var(--bs-primary); }
.icon-box.bg-info-box    { background: rgba(13, 202, 240, 0.1); color: var(--bs-info); }
.icon-box.bg-success-box { background: rgba(25, 135, 84, 0.1);  color: var(--bs-success); }
.icon-box.bg-warning-box { background: rgba(255, 193, 7, 0.1); color: var(--bs-warning); }
.icon-box.bg-danger-box  { background: rgba(220, 53, 69, 0.1); color: var(--bs-danger); }
.icon-box.bg-dark-box { 
    background: rgba(33, 37, 41, 0.1); 
    color: var(--bs-dark); 
}
.icon-box.bg-secondary-box { 
    background: rgba(108, 117, 125, 0.1); 
    color: var(--bs-secondary); 
}



/* Ensure the app takes full screen height */
html, body, #workspace-view {
    height: 100vh;
    margin: 0;
    /* overflow: hidden; */
}


/* Style the PDF Canvas wrapper for the "Paper on table" look */
#main-viewer canvas {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    margin-bottom: 20px;
    background-color: white;
}

/* Sidebar Hover Effect */
nav .nav-link:hover {
    background-color: #f1f3f5;
    border-radius: 8px;
    color: #0d6efd !important;
}

/* Sidebar Active & Hover Effect */
.nav-link:hover, 
.active-nav-item {
    background-color: #f1f3f5;
    border-radius: 8px;
    color: #0d6efd !important;
}

#thumbnail-sidebar canvas {
    width: 100% !important; /* Forces thumbnails to fit the 160px width */
    height: auto !important;
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
}

.thumbnail-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-thumbnail-checkbox {
    margin-bottom: 1px; /*5px; /* Adds space between checkbox and image */
    cursor: pointer;
}

#workspace-view {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#main-viewer {
    flex: 1;
    overflow-y: auto; /* <--- THIS IS REQUIRED */
}

/* Force navbar links to always stay white */
#navbarNav .navbar-nav .nav-link,
#navbarNav .navbar-nav .nav-link.active,
#navbarNav .navbar-nav .nav-link:hover,
#navbarNav .navbar-nav .nav-link:focus {
    color: #ffffff !important;
}

/* Hover state changes to primary color */
#navbarNav .navbar-nav .nav-link:hover {
    color: var(--bs-primary, #0d6efd) !important;
}