/* Growlio Knowledge Base - Modern Minimal Design */

/* General Body Styles */
body { 
    background: #f8f9fa !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove all shadows */
* {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Navbar Styles */
.navbar {
    background: #1549e6 !important;
    border-bottom: none !important;
    padding: 0.25rem 0 !important;
}

.navbar .navbar-inner { 
    background: #1549e6 !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar .container-fluid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.navbar .nav li a, 
.navbar .icon-private-w { 
    color: #c0c0c0 !important;
    font-weight: 500 !important;
}

.navbar .brand, 
.navbar .nav li a:hover, 
.navbar .nav li a:focus, 
.navbar .nav .active a, 
.navbar .nav .active a:hover, 
.navbar .nav .active a:focus { 
    color: #ffffff !important;
}

.navbar a:hover .icon-private-w, 
.navbar a:focus .icon-private-w, 
.navbar .active a .icon-private-w, 
.navbar .active a:hover .icon-private-w, 
.navbar .active a:focus .icon-private-w { 
    color: #ffffff !important;
}

/* Logo Styles */
.navbar .brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding-left: 1rem !important;
}

.navbar .brand img {
    width: 100px !important;
    height: auto !important;
    margin: -3px 0 0 0 !important;
}

/* Hero Search Section */
#docsSearch {
    background: transparent !important;
    text-align: center !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

#docsSearch h1 {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
}

/* Search Bar Styles */
#searchBar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    gap: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
   
}

#searchBar input.search-query {
    flex: 1 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    border: 1px solid #dee2e6 !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    background: #ffffff !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
}

#searchBar input.search-query:focus {
    border-color: #1549e6 !important;
}

#searchBar button {
    background: #1549e6 !important;
    color: #ffffff !important;
    border: 1px solid #1549e6 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-radius: 0 8px 8px 0 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

#searchBar button:hover {
    background: #0d3aa0 !important;
}

/* Content Area */
#contentArea {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Remove background image from main content area */
#main-content,
#main {
    background-image: none !important;
    background: transparent !important;
}

/* Content Wrapper Styling */
.contentWrapper {
    background: #eef3fd !important;
    border-radius: 6px !important;
    border: none !important;
    padding: 2rem !important;
}

/* Ensure proper container setup */
.container-fluid {
    padding: 0 1rem !important;
}

/* Category Grid Layout - 4 columns per row */
.category-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Individual Category Cards */
.category-list .category {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
    flex: 0 0 calc(25% - 0.75rem) !important;
}

.category-list .category:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border-color: #1549e6 !important;
}

.category-list .category:before {
    content: '' !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    background: #1549e6 !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
}

/* Category Icons using Font Awesome - Regular (Outline) Style */
/* Getting Started - Category ID 5 - rocket icon */
.category-list #category-5:before {
    content: '\f135' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Clients - Category ID 14 - users icon */
.category-list #category-14:before {
    content: '\f0c0' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Forms - Category ID 24 - clipboard icon */
.category-list #category-24:before {
    content: '\f328' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Leads - Category ID 17 - chart line icon */
.category-list #category-17:before {
    content: '\f201' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Contracts - Category ID 23 - file contract icon */
.category-list #category-23:before,
.category-list #category-contracts:before {
    content: '\f56c' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Proposals - Category ID 20 - file lines icon */
.category-list #category-20:before,
.category-list #category-proposals:before {
    content: '\f15c' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Finances - Category ID 68 - dollar sign icon */
.category-list #category-68:before,
.category-list #category-finances:before {
    content: '\f155' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Invoicing - Category ID 66 - file invoice icon */
.category-list #category-66:before,
.category-list #category-invoicing:before {
    content: '\f570' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Projects - Category ID 59 - folder open icon */
.category-list #category-59:before,
.category-list #category-projects:before {
    content: '\f07c' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Tasks - Category ID 62 - list check icon */
.category-list #category-62:before,
.category-list #category-tasks:before {
    content: '\f0ae' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Time Tracking - Category ID 64 - clock icon */
.category-list #category-64:before,
.category-list #category-time-tracking:before {
    content: '\f017' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
    background: #1549e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
}

/* Category Text Styles */
.category-list .category h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.3 !important;
}

.category-list .category p {
    font-size: 0.9rem !important;
    color: #6c757d !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.5 !important;
}

.category-list .category .article-count {
    font-size: 0.85rem !important;
    color: #1549e6 !important;
    font-weight: 500 !important;
    margin: 1rem 0 0 0 !important;
}

/* Link Colors */
.contentWrapper a,
.category-list .category .article-count { 
    color: #1549e6 !important;
    text-decoration: none !important;
}

.contentWrapper a:hover,
.category-list .category:hover .article-count { 
    color: #0d3aa0 !important;
}

/* Footer */
footer {
    background: #ffffff !important;
    border-top: 1px solid #e9ecef !important;
    padding: 2rem !important;
    text-align: center !important;
    margin-top: 4rem !important;
}

footer p {
    color: #6c757d !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

footer a {
    color: #1549e6 !important;
    text-decoration: none !important;
}

footer a:hover {
    text-decoration: underline !important;
}

/* Responsive Design - Mobile First Approach */

/* Tablets (768px - 1199px) - 2 cards per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .category-list {
        justify-content: center !important;
    }

    .category-list .category {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        box-sizing: border-box !important;
    }
}

/* Small devices and phones (max-width: 767px) - 1 card per row */
@media (max-width: 767px) {
    #docsSearch {
        padding: 2rem 1rem !important;
    }

    #docsSearch h1 {
        font-size: 2rem !important;
    }

    #contentArea {
        padding: 1rem !important;
    }

    .category-list {
        gap: 1rem !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .category-list .category {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .category-list .category {
        padding: 1.5rem !important;
    }

    #searchBar {
        max-width: calc(100% - 2rem) !important;
        margin: 0 1rem !important;
    }

    #searchBar input.search-query {
        border-radius: 8px 0 0 8px !important;
        border: 1px solid #dee2e6 !important;
        border-right: none !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    #searchBar button {
        border-radius: 0 8px 8px 0 !important;
        border: 1px solid #1549e6 !important;
        flex-shrink: 0 !important;
    }
}

/* Sidebar Search Bar Styling */
#sidebar #searchBar.sm {
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

#sidebar #searchBar.sm input.search-query {
    flex: 1 !important;
    border: 1px solid #dee2e6 !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    background: #ffffff !important;
    outline: none !important;
}

#sidebar #searchBar.sm button {
    background: #1549e6 !important;
    color: #ffffff !important;
    border: 1px solid #1549e6 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
}

#sidebar #searchBar.sm button:hover {
    background: #0d3aa0 !important;
}

/* Most Popular Articles Section */
.most-pop-articles {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin-bottom: 3rem !important;
    transition: all 0.3s ease !important;
}

.most-pop-articles:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border-color: #1549e6 !important;
}

.most-pop-articles h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
}

.most-pop-articles .popArticles {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.most-pop-articles .popArticles li {
    margin: 0 !important;
    flex: 0 0 calc(50% - 0.25rem) !important;
    border-bottom: 1px solid #f1f3f4 !important;
    padding-bottom: 0.5rem !important;
}

.most-pop-articles .popArticles li:nth-last-child(-n+2) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.most-pop-articles .popArticles li a {
    display: block !important;
    text-decoration: none !important;
    padding: 0.25rem 0 !important;
    transition: color 0.3s ease !important;
}

.most-pop-articles .popArticles li a i.icon-article-doc {
    display: none !important;
}

.most-pop-articles .popArticles li a span {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #212529 !important;
    line-height: 1.4 !important;
}

.most-pop-articles .popArticles li a:hover span {
    color: #1549e6 !important;
}

/* Hide separator line */
hr.sep {
    display: none !important;
}

/* Remove icons from article lists on inner pages */
.articleList li a i.icon-article-doc {
    display: none !important;
}

/* Responsive for Most Popular Articles */
@media (max-width: 768px) {
    .most-pop-articles .popArticles li {
        flex: 0 0 100% !important;
    }
    
    .most-pop-articles .popArticles li:nth-last-child(-n+2) {
        border-bottom: 1px solid #f1f3f4 !important;
        padding-bottom: 0.5rem !important;
    }
    
    .most-pop-articles .popArticles li:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
}