/* tamayuzCore - Simple Course Homepage */

/* ========================================
   HIDE THE VERTICAL NAVIGATION SIDEBAR (DUPLICATE)
   ======================================== */

/* Hide the vertical navigation box - it's a duplicate of the main tools */
#toolnav,
#toolnavbox {
    display: none !important;
}

/* ========================================
   ALWAYS SHOW TOOL NAMES - NO HOVER NEEDED
   ======================================== */

/* Override the jQuery animation that hides tool names */
#toolnavbox a,
#toolnavbox a *,
.course-tool a,
.course-tool a * {
    margin-left: 0 !important;
    transition: all 0.2s ease !important;
    animation: none !important;
}

/* Remove ALL focus/active borders and outlines */
#toolnavbox a:focus,
#toolnavbox a:active,
#toolnavbox a:visited,
.course-tool a:focus,
.course-tool a:active,
.course-tool a:visited,
.btn:focus,
.btn:active,
.btn:active:focus,
.btn.active:focus {
    outline: none !important;
    border: 1px solid #e1e8ed !important;
    box-shadow: none !important;
}

/* Always show the tool names - FORCE IT! */
#toolnavbox span,
#toolnavbox .text,
.course-tool .text,
.course-tool a,
.course-tool a span,
.courseadminview-activity-3col a,
.courseadminview-activity-3col span,
.course-tools-author a,
.course-tools-interaction a,
.course-tools-administration a,
.icons-text,
.btn.icons-text span,
.btn.icons-text .text,
#toolnavbox li a span,
li.course-tool a,
li.course-tool span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
}

/* Make icons class show text too - SUPER FORCE */
.btn.icons,
.btn.icons span,
.btn.icons .text,
a.icons,
a.icons span,
a.icons * {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Teacher tool links - FORCE TEXT VISIBLE but keep layout */
.courseadminview-activity-3col li a img,
.course-tools-author li a img,
.course-tools-interaction li a img,
.course-tools-administration li a img {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* Make sure link text is always visible */
.courseadminview-activity-3col li a,
.course-tools-author li a,
.course-tools-interaction li a,
.course-tools-administration li a {
    display: block !important;
    text-decoration: none !important;
}

/* Ensure all text content inside links is visible */
.courseadminview-activity-3col a[id^="istooldesc_"],
.course-tools-author a[id^="istooldesc_"],
.course-tools-interaction a[id^="istooldesc_"],
.course-tools-administration a[id^="istooldesc_"] {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make tool links full width and properly clickable */
#toolnavbox a.btn {
    width: 100% !important;
    text-align: left !important;
    padding: 12px 15px !important;
    margin: 5px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

#toolnavbox a.btn:hover {
    background: #f8f9fa !important;
    border-color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
    transform: translateX(3px) !important;
}

/* Make tool icons consistent size */
#toolnavbox img,
.course-tool img {
    width: 32px !important;
    height: 32px !important;
    margin-right: 10px !important;
}

/* Tool name text styling */
#toolnavbox a .text,
#toolnavbox a span:not(.label) {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    flex: 1 !important;
}

/* ========================================
   ACTIVITY BIG VIEW - BETTER LAYOUT
   ======================================== */

/* Make big icon view better */
.course-tool {
    margin-bottom: 15px !important;
}

.course-tool .big_icon {
    text-align: center !important;
    margin-bottom: 10px !important;
}

.course-tool .big_icon img {
    width: 64px !important;
    height: 64px !important;
}

.course-tool .content {
    text-align: center !important;
}

.course-tool .content a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.course-tool .content a:hover {
    background: #f8f9fa !important;
    color: #667eea !important;
}

/* Keep vertical layout for teacher tools */
.courseadminview-activity-3col ul,
.course-tools-author ul,
.course-tools-interaction ul,
.course-tools-administration ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.courseadminview-activity-3col li,
.course-tools-author li,
.course-tools-interaction li,
.course-tools-administration li {
    display: block !important;
    margin-bottom: 8px !important;
}

/* ========================================
   COURSE TOOL CATEGORIES (Authoring, Interaction, etc.)
   ======================================== */

.courseadminview-activity-3col,
.course-student-view-activity-3col {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.viewcaption {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #667eea !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e1e8ed !important;
}

/* ========================================
   FIX THE HOVER/ANIMATION BEHAVIOR
   ======================================== */

/* Remove all the silly animations and hover effects */
#toolnavbox > li:hover a {
    margin-left: 0 !important;
}

#toolnavbox > li:hover span {
    display: inline-block !important;
}

/* Make sure visibility controls still work */
.tool-visibility {
    float: right !important;
    margin-left: auto !important;
}

/* ========================================
   MAKE COURSE HOMEPAGE CLEANER
   ======================================== */

/* Better spacing for course tools list */
#toolnavbox,
.course-tool ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#toolnavbox li,
.course-tool li {
    list-style: none !important;
    margin-bottom: 5px !important;
}

/* Remove unnecessary decorations */
.course-tool .label {
    margin-left: 8px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
}

/* ========================================
   RESPONSIVE - MOBILE FRIENDLY
   ======================================== */

@media (max-width: 768px) {
    #toolnavbox a.btn {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    #toolnavbox img,
    .course-tool img {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ========================================
   DISABLE THE JAVASCRIPT ANIMATION
   ======================================== */

/* Force all positions to be static */
#toolnavbox,
#toolnavbox li,
#toolnavbox a,
#toolnavbox span,
#toolnavbox img {
    position: static !important;
    left: 0 !important;
    transform: none !important;
}

/* Override any inline styles that JavaScript adds */
#toolnavbox a[style],
#toolnavbox span[style] {
    margin-left: 0 !important;
    display: inline-block !important;
}

/* Remove focus rings and borders on all interactive elements */
a:focus,
button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* But keep a subtle visual indicator for accessibility */
a:focus {
    background-color: rgba(102, 126, 234, 0.05) !important;
}

.btn:focus,
.btn:active {
    border-color: #e1e8ed !important;
    box-shadow: none !important;
}

/* Remove the ugly blue border Bootstrap adds */
.btn:active:focus,
.btn.active:focus {
    box-shadow: none !important;
    outline: none !important;
}