/* ╔═══════════════════════════════════════════════════════════════╗
   ║  TAMAYUZ PRODUCTION UI - CLEAN & MODERN                       ║
   ║  Visible text, proper colors, modern design                   ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ========================================
   CONSISTENT FONTS - 14PX SYSTEM
   ======================================== */
body, p, span, div, li, td, th, label {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ========================================
   MODERN BUTTONS - VISIBLE TEXT ALWAYS
   ======================================== */
.btn,
button:not(.close):not(.navbar-toggle),
input[type="submit"],
input[type="button"] {
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    display: inline-block !important;
}

/* Primary - Purple */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6640a0 100%) !important;
    color: white !important;
}

/* Success - Green */
.btn-success {
    background: #10b981 !important;
    color: white !important;
}

.btn-success:hover {
    background: #059669 !important;
    color: white !important;
}

/* Warning - Orange */
.btn-warning {
    background: #f59e0b !important;
    color: white !important;
}

.btn-warning:hover {
    background: #d97706 !important;
    color: white !important;
}

/* Danger - Red */
.btn-danger {
    background: #ef4444 !important;
    color: white !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
    color: white !important;
}

/* Info - Blue */
.btn-info {
    background: #3b82f6 !important;
    color: white !important;
}

.btn-info:hover {
    background: #2563eb !important;
    color: white !important;
}

/* Default - White */
.btn-default {
    background: white !important;
    color: #333 !important;
    border: 1px solid #d1d5db !important;
}

.btn-default:hover {
    background: #f3f4f6 !important;
    color: #333 !important;
}

/* FORCE text to be visible in ALL buttons */
.btn *,
button *,
.btn:hover *,
button:hover * {
    color: inherit !important;
}

/* ========================================
   NAVIGATION BAR MAKEOVER
   ======================================== */
nav.navbar.navbar-default {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 18px 28px !important;
    margin: 14px auto 8px !important;
    max-width: 1320px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    position: relative !important;
    z-index: 40 !important;
}

nav.navbar.navbar-default .container {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

.navbar-default .navbar-brand {
    background: #f4f3ff !important;
    border-radius: 12px !important;
    color: #4c1d95 !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    order: 3 !important;
}

.navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.navbar-nav.navbar-right {
    padding-right: 0 !important;
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
}

.navbar-nav.navbar-left {
    order: 1 !important;
    gap: 16px !important;
}

.navbar-default .navbar-brand em {
    color: inherit !important;
}

.navbar-default .navbar-nav > li > a {
    font-weight: 600 !important;
    padding: 10px 16px !important;
    color: #1e1b4b !important;
    border-radius: 12px !important;
    transition: background-color 0.15s ease !important;
    background: transparent !important;
}

.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #3b0764 !important;
    background: #ede9fe !important;
    box-shadow: none !important;
}

.navbar-default .navbar-nav > li > a::after {
    display: none !important;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:focus {
    border: none !important;
    box-shadow: none !important;
    background: #ede9fe !important;
    border-radius: 10px !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #4c1d95 !important;
}

.navbar-default .dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid #f0f0fa !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
    padding: 10px !important;
}

.navbar-default .dropdown-menu > li > a {
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    background: transparent !important;
}

.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
    background: transparent !important;
    color: #1f2937 !important;
}

/* Profile / avatar dropdown spacing + hover */
#user-dropdown,
.navbar-nav.navbar-right .avatar-user > a {
    margin-left: 0 !important;
    background: transparent !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    transition: background-color 0.15s ease !important;
    position: relative !important;
}

#user-dropdown img,
.navbar-nav.navbar-right .avatar-user img {
    border-radius: 50% !important;
    border: 2px solid #ede9fe !important;
}

#user-dropdown:hover,
#user-dropdown:focus,
.navbar-nav.navbar-right .avatar-user > a:hover,
.navbar-nav.navbar-right .avatar-user > a:focus {
    background: #f4f3ff !important;
    box-shadow: none !important;
}

.navbar-nav > li.open > a,
.navbar-nav > li.open > a:focus,
.navbar-nav > li.open > a:hover {
    background: #f4f3ff !important;
    color: #3b0764 !important;
    box-shadow: inset 0 0 0 1px #e0e7ff !important;
}

.navbar-nav.navbar-right .avatar-user > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 600 !important;
}

.navbar-nav.navbar-right .avatar-user img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid #ede9fe !important;
}

@media (max-width: 991px) {
    nav.navbar.navbar-default {
        border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

    .navbar-default .navbar-nav > li > a {
        margin: 4px 0 !important;
        border-radius: 10px !important;
    }

    .navbar-default .navbar-nav > li > a::after {
        display: none !important;
    }
}

/* ========================================
   SMART BREADCRUMBS
   ======================================== */
.breadcrumb {
    background: #ffffff !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    margin: 10px auto 26px !important;
    border: 1px solid #e6e6f4 !important;
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    max-width: 1280px !important;
}

.breadcrumb li {
    font-weight: 500 !important;
    color: #646a7b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.breadcrumb li a {
    color: #111827 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.breadcrumb > li + li:before {
    content: '›' !important;
    color: #9ca3af !important;
    font-size: 14px !important;
    margin-right: 2px !important;
}

.breadcrumb li.active {
    color: #312e81 !important;
    font-weight: 600 !important;
}

#view_as_link {
    margin-left: auto !important;
}

/* ========================================
   COURSE HOMEPAGE POLISH
   ======================================== */
#about-course,
.course-home-wrapper,
.course-homepage {
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#course-info-top {
    background: #faf5ff !important;
    border-radius: 22px !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    color: #3b0764 !important;
    box-shadow: 0 18px 35px rgba(79, 70, 229, 0.15) !important;
    margin-bottom: 24px !important;
}

#course-info-top .session-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #312e81 !important;
}

#course-info-top .course-short ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#course-info-top .course-short li {
    font-weight: 500 !important;
    color: #5b21b6 !important;
}

.page-header {
    border: none !important;
    margin: 30px 0 16px !important;
    padding-bottom: 0 !important;
}

.page-header .title-tools {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.page-header .title-tools::after {
    content: '' !important;
    display: inline-block !important;
    width: 50px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%) !important;
}

.course-tool {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #ede9fe !important;
    padding: 20px 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    height: 120px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
    transition: none !important;
    position: relative !important;
}

.course-tool:hover {
    background: #ffffff !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06) !important;
}

.course-tool .big_icon img,
.course-tool .only_icon_small img {
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
}

.course-tool .big_icon {
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.course-tool .content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    padding-top: 4px !important;
}

.course-tool .content a,
.course-tool a.tool-card-link {
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

.course-tool .content small {
    color: #6b7280 !important;
}

.course-tool:nth-of-type(even) {
    background: #fcfbff !important;
}

.course-tool .make_visible_and_invisible,
.course-tool .make_visible_and_invisible a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4c1d95 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.course-tool .tool-card-visibility,
.course-tool .tool-card-visibility a,
.course-tool .tool-card-visibility em {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 6px !important;
    gap: 8px !important;
}

.course-tool .tool-card-visibility {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: auto !important;
    padding-top: 8px !important;
}

.course-tool .tool-card-visibility .make_visible_and_invisible {
    padding: 6px 14px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4c1d95 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8f5ff !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.course-tool .tool-card-visibility .make_visible_and_invisible:hover {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
}

.course-tool .tool-card-visibility .make_visible_and_invisible em {
    font-style: normal !important;
    font-size: 14px !important;
}

.course-tool .tool-card-visibility .make_visible_and_invisible em::after {
    content: '' !important;
    margin-left: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
}

.course-tool .tool-card-visibility .make_visible_and_invisible[href*="hide=yes"]::after {
    content: 'Deactivate' !important;
}

.course-tool .tool-card-visibility .make_visible_and_invisible[href*="restore=yes"]::after {
    content: 'Activate' !important;
}

/* Force tool titles/names always visible */
.course-tool .content a,
.course-tool > a,
.course-tool .tool-link,
.course-tool .tool-title,
.course-tool .title-tools,
#toolnavbox .course-tool a,
#toolnavbox li a,
#toolnav li a,
.course-tool .tooltext,
.course-tool .title-tool,
.course-tool .tool-title-text {
    display: block !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #111827 !important;
    font-weight: 600 !important;
    white-space: normal !important;
    margin: 0 !important;
}

#toolnavbox a,
#toolnavbox a *,
#toolnav li a,
#toolnav li a * {
    margin-left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#toolnavbox .course-tool a span,
#toolnavbox .course-tool a strong,
#toolnavbox li a span,
#toolnavbox li a strong,
#toolnav li a span,
#toolnavbox li a strong {
    display: inline !important;
    color: inherit !important;
    font-weight: inherit !important;
}

#toolnavbox li a.icons,
#toolnavbox li a.icons-text,
#toolnavbox li a.text {
    margin-left: 0 !important;
    width: auto !important;
}

#toolnavbox li a.icons span,
#toolnavbox li a.icons-text span,
#toolnavbox li a.text span {
    display: inline !important;
}

#toolnavbox > li,
#toolnavbox > li * {
    transition: none !important;
    animation: none !important;
}

/* ========================================
   CLASSIC "MY COURSES" LIST
   ======================================== */
.classic-courses .panel {
    border: 1px solid #e9e9f3 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    margin-bottom: 18px !important;
}

.classic-courses .panel-body {
    padding: 20px !important;
}

.classic-courses .thumbnail {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.classic-courses .course-items-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

.classic-courses .course-items-title a {
    color: inherit !important;
}

.classic-courses .course-items-session {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.classic-courses .list-teachers {
    font-weight: 500 !important;
    color: #4c1d95 !important;
}

.classic-courses .course-items-session img {
    margin-right: 6px !important;
}
.course-tool .only_icon_small,
.course-tool .big_icon {
    flex: 0 0 auto !important;
}

@media (max-width: 767px) {
    #course-info-top {
        flex-direction: column !important;
        text-align: center !important;
    }

    .course-tool {
        width: 100% !important;
    }
}

/* ========================================
   MY COURSES GRID POLISH
   ======================================== */
.grid-courses .items.my-courses {
    background: #ffffff !important;
    border-radius: 22px !important;
    border: 1px solid #f0f0fa !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    margin-bottom: 26px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.grid-courses .items.my-courses:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12) !important;
}

.grid-courses .items .image {
    position: relative !important;
}

.grid-courses .items .image img {
    border-radius: 18px 18px 0 0 !important;
}

.grid-courses .items .description {
    padding: 20px 22px 24px !important;
}

.grid-courses .items .block-title .title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.grid-courses .items .block-title .title a {
    color: inherit !important;
}

.grid-courses .items .code-title {
    display: block !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #81879c !important;
    margin-top: 4px !important;
}

.grid-courses .items .block-author img {
    border-radius: 50% !important;
    border: 2px solid #ede9fe !important;
}

.grid-courses .items .block-author .teachers-details h5 a {
    color: #3b0764 !important;
    font-weight: 600 !important;
}

.grid-courses .items .notifications {
    background: #f3e8ff !important;
    color: #4c1d95 !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

/* ========================================
   MODERN ACTION BUTTONS - LIKE IMAGE
   ======================================== */
.actions,
.toolbar {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 16px 0 !important;
}

/* Base action button style - ALL action links SYSTEM-WIDE */
.actions a,
.actions button,
.toolbar a,
.toolbar button,
td a[href*="edit"],
td a[href*="delete"],
td a[href*="download"],
td a[href*="move"],
td a[href*="visibility"],
td a[href*="visible"],
td a[href*="upload"],
td a[href*="export"],
td a[href*="import"],
td a[href*="add"],
td a[href*="copy"],
table a[href*="edit"],
table a[href*="delete"],
table a[href*="download"],
table a[href*="move"],
table a[href*="visibility"],
table a[href*="visible"],
table a[href*="upload"],
table a[href*="export"],
table a[href*="import"],
table a[href*="add"],
table a[href*="copy"],
a[href*="export"],
a[href*="upload"],
a[href*="import"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 80px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* Hide ALL action icon images SYSTEM-WIDE (not folder/document icons) */
.actions img,
.actions a img,
.actions button img,
.toolbar img,
.toolbar a img,
td a[href*="edit"] img,
td a[href*="delete"] img,
td a[href*="download"] img,
td a[href*="move"] img,
td a[href*="visibility"] img,
td a[href*="visible"] img,
td a[href*="upload"] img,
td a[href*="export"] img,
td a[href*="import"] img,
td a[href*="add"] img,
td a[href*="copy"] img,
table a[href*="edit"] img,
table a[href*="delete"] img,
table a[href*="download"] img,
table a[href*="move"] img,
table a[href*="visibility"] img,
table a[href*="visible"] img,
table a[href*="upload"] img,
table a[href*="export"] img,
table a[href*="import"] img,
table a[href*="add"] img,
table a[href*="copy"] img,
a[href*="export"] img,
a[href*="upload"] img,
a[href*="import"] img,
img.actionplaceholdericon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* ========================================
   SIMPLE SOLUTION - USE CHAMILO'S EXISTING TITLE ATTRIBUTES
   All Chamilo buttons already have title attributes!
   ======================================== */

/* Buttons enhanced via JS labels get consistent spacing */
.actions a.tamayuz-enhanced,
.toolbar a.tamayuz-enhanced,
td a.tamayuz-enhanced,
table a.tamayuz-enhanced {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
}

/* ALL ACTION BUTTONS - Show title attribute as fallback label */
.actions a:not(.tamayuz-enhanced)[title]::after,
.toolbar a:not(.tamayuz-enhanced)[title]::after,
td a:not(.tamayuz-enhanced)[title]::after,
table a:not(.tamayuz-enhanced)[title]::after {
    content: attr(title) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: inherit !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin-left: 6px !important;
}

.actions a:not(.tamayuz-enhanced)[data-original-title]::after,
.toolbar a:not(.tamayuz-enhanced)[data-original-title]::after,
td a:not(.tamayuz-enhanced)[data-original-title]::after,
table a:not(.tamayuz-enhanced)[data-original-title]::after {
    content: attr(data-original-title) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: inherit !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin-left: 6px !important;
}

.actions a:not(.tamayuz-enhanced)[aria-label]::after,
.toolbar a:not(.tamayuz-enhanced)[aria-label]::after,
td a:not(.tamayuz-enhanced)[aria-label]::after,
table a:not(.tamayuz-enhanced)[aria-label]::after {
    content: attr(aria-label) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: inherit !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin-left: 6px !important;
}

/* JavaScript-injected label span */
.tamayuz-label {
    margin-left: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: inherit !important;
    white-space: nowrap !important;
}

/* Hide CSS ::after labels when JavaScript has enhanced the button */
.tamayuz-enhanced::after {
    content: none !important;
    display: none !important;
}

/* Ensure ALL .actions links are visible and styled */
.actions a,
.toolbar a {
    min-height: 32px !important;
    min-width: 80px !important;
}

/* CRITICAL: Allow space for JavaScript-added text labels */
.actions a span,
.toolbar a span,
td a span,
table a span {
    display: inline !important;
    margin-left: 6px !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Hide images in action buttons completely */
.actions a img,
.toolbar a img {
    max-width: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Visibility labels - DISABLED, JavaScript handles these now with smart detection */

/* Edit - Purple gradient */
.actions a[href*="edit"],
.actions button[onclick*="edit"],
td a[href*="edit"],
table a[href*="edit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.actions a[href*="edit"]:hover,
td a[href*="edit"]:hover,
table a[href*="edit"]:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6640a0 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* SPECIFIC DOCUMENT ACTIONS - Different Colors for Each */

/* Create Document - Blue */
.actions a[href*="create_document"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.actions a[href*="create_document"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Draw/Paint/Creative - Indigo */
.actions a[href*="create_draw"],
.actions a[href*="create_paint"] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: white !important;
}

.actions a[href*="create_draw"]:hover,
.actions a[href*="create_paint"]:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Audio/Recording - Pink */
.actions a[href*="record_audio"],
.actions a[href*="create_audio"],
.actions a[href*="webcam_clip"] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    color: white !important;
}

.actions a[href*="record_audio"]:hover,
.actions a[href*="create_audio"]:hover,
.actions a[href*="webcam_clip"]:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Create Folder - Teal */
.actions a[href*="createdir"],
.actions a[href*="create_folder"] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: white !important;
}

.actions a[href*="createdir"]:hover,
.actions a[href*="create_folder"]:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Cloud Link - Cyan */
.actions a[href*="add_link"],
.actions a[href*="clouddoc"] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
}

.actions a[href*="add_link"]:hover,
.actions a[href*="clouddoc"]:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Generic Add/Create - Blue (fallback) */
.actions a[href*="add"],
.actions button[onclick*="add"],
.actions a[href*="create"],
.actions button[onclick*="create"],
td a[href*="add"],
table a[href*="add"],
td a[href*="create"],
table a[href*="create"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.actions a[href*="add"]:hover,
.actions a[href*="create"]:hover,
td a[href*="add"]:hover,
table a[href*="add"]:hover,
td a[href*="create"]:hover,
table a[href*="create"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Delete - Red */
.actions a[href*="delete"],
.actions button[onclick*="delete"],
td a[href*="delete"],
table a[href*="delete"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

.actions a[href*="delete"]:hover,
td a[href*="delete"]:hover,
table a[href*="delete"]:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Import/Upload - Purple */
.actions a[href*="import"],
.actions button[onclick*="import"],
.actions a[href*="upload"],
td a[href*="import"],
table a[href*="import"],
td a[href*="upload"],
table a[href*="upload"],
a[href*="import"],
a[href*="upload"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
}

.actions a[href*="import"]:hover,
.actions a[href*="upload"]:hover,
td a[href*="import"]:hover,
td a[href*="upload"]:hover,
table a[href*="import"]:hover,
table a[href*="upload"]:hover,
a[href*="import"]:hover,
a[href*="upload"]:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Export - Green */
.actions a[href*="export"],
.actions button[onclick*="export"],
td a[href*="export"],
table a[href*="export"],
a[href*="export"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.actions a[href*="export"]:hover,
td a[href*="export"]:hover,
table a[href*="export"]:hover,
a[href*="export"]:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* View - Orange */
.actions a[href*="view"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.actions a[href*="view"]:hover {
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Copy - Teal */
.actions a[href*="copy"],
td a[href*="copy"],
table a[href*="copy"] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: white !important;
}

.actions a[href*="copy"]:hover,
td a[href*="copy"]:hover,
table a[href*="copy"]:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Download - Green */
.actions a[href*="download"],
td a[href*="download"],
table a[href*="download"] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
}

.actions a[href*="download"]:hover,
td a[href*="download"]:hover,
table a[href*="download"]:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Move - Blue-Gray */
td a[href*="move"],
table a[href*="move"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

td a[href*="move"]:hover,
table a[href*="move"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Visibility - Orange */
td a[href*="visibility"],
td a[href*="visible"],
table a[href*="visibility"],
table a[href*="visible"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

td a[href*="visibility"]:hover,
td a[href*="visible"]:hover,
table a[href*="visibility"]:hover,
table a[href*="visible"]:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Settings/Configure/Properties - Gray */
.actions a[href*="settings"],
.actions a[href*="configure"],
.actions a[href*="properties"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
}

.actions a[href*="settings"]:hover,
.actions a[href*="configure"]:hover,
.actions a[href*="properties"]:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Build - Purple */
.actions a[href*="build"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
}

.actions a[href*="build"]:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Preview/Slideshow - Orange */
.actions a[href*="preview"],
.actions a[href*="slideshow"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.actions a[href*="preview"]:hover,
.actions a[href*="slideshow"]:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Certificate - Yellow/Gold */
.actions a[href*="certificate"] {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: white !important;
}

.actions a[href*="certificate"]:hover {
    background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Learning Path specific - Purple */
.actions a[href*="add_lp"],
.actions a[href*="new_lp"],
.actions a[href*="learnpath"],
.actions a[href*="new_chapter"],
.actions a[href*="add_lp_section"],
.actions a[href*="new_item"],
.actions a[href*="add_item"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
}

.actions a[href*="add_lp"]:hover,
.actions a[href*="new_lp"]:hover,
.actions a[href*="learnpath"]:hover,
.actions a[href*="new_chapter"]:hover,
.actions a[href*="add_lp_section"]:hover,
.actions a[href*="new_item"]:hover,
.actions a[href*="add_item"]:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Exercises/Surveys/Assessments - Blue */
.actions a[href*="add_exercise"],
.actions a[href*="new_exercise"],
.actions a[href*="add_survey"],
.actions a[href*="new_survey"],
.actions a[href*="add_assessment"],
.actions a[href*="new_assessment"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.actions a[href*="add_exercise"]:hover,
.actions a[href*="new_exercise"]:hover,
.actions a[href*="add_survey"]:hover,
.actions a[href*="new_survey"]:hover,
.actions a[href*="add_assessment"]:hover,
.actions a[href*="new_assessment"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Forums/Announcements/Events - Green */
.actions a[href*="add_forum"],
.actions a[href*="new_forum"],
.actions a[href*="add_announcement"],
.actions a[href*="new_announcement"],
.actions a[href*="add_event"],
.actions a[href*="new_event"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.actions a[href*="add_forum"]:hover,
.actions a[href*="new_forum"]:hover,
.actions a[href*="add_announcement"]:hover,
.actions a[href*="new_announcement"]:hover,
.actions a[href*="add_event"]:hover,
.actions a[href*="new_event"]:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Tests/Questions/Quizzes - Blue */
.actions a[href*="add_quiz"],
.actions a[href*="new_quiz"],
.actions a[href*="new_test"],
.actions a[href*="add_question"],
.actions a[href*="new_question"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.actions a[href*="add_quiz"]:hover,
.actions a[href*="new_quiz"]:hover,
.actions a[href*="new_test"]:hover,
.actions a[href*="add_question"]:hover,
.actions a[href*="new_question"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Users/Groups/Courses/Sessions - Indigo */
.actions a[href*="add_user"],
.actions a[href*="new_user"],
.actions a[href*="add_group"],
.actions a[href*="new_group"],
.actions a[href*="add_course"],
.actions a[href*="new_course"],
.actions a[href*="add_session"],
.actions a[href*="new_session"] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: white !important;
}

.actions a[href*="add_user"]:hover,
.actions a[href*="new_user"]:hover,
.actions a[href*="add_group"]:hover,
.actions a[href*="new_group"]:hover,
.actions a[href*="add_course"]:hover,
.actions a[href*="new_course"]:hover,
.actions a[href*="add_session"]:hover,
.actions a[href*="new_session"]:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Links/Categories/Wiki/Glossary - Teal */
.actions a[href*="add_link"]:not([href*="clouddoc"]),
.actions a[href*="new_link"],
.actions a[href*="add_category"],
.actions a[href*="new_category"],
.actions a[href*="add_wiki"],
.actions a[href*="new_wiki"],
.actions a[href*="add_glossary"],
.actions a[href*="new_glossary"] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: white !important;
}

.actions a[href*="add_link"]:not([href*="clouddoc"]):hover,
.actions a[href*="new_link"]:hover,
.actions a[href*="add_category"]:hover,
.actions a[href*="new_category"]:hover,
.actions a[href*="add_wiki"]:hover,
.actions a[href*="new_wiki"]:hover,
.actions a[href*="add_glossary"]:hover,
.actions a[href*="new_glossary"]:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Attendance/Assignments - Pink */
.actions a[href*="add_attendance"],
.actions a[href*="new_attendance"],
.actions a[href*="add_assignment"],
.actions a[href*="new_assignment"] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    color: white !important;
}

.actions a[href*="add_attendance"]:hover,
.actions a[href*="new_attendance"]:hover,
.actions a[href*="add_assignment"]:hover,
.actions a[href*="new_assignment"]:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Print/PDF/Backup/Restore - Gray */
.actions a[href*="print"],
.actions a[href*="pdf"],
.actions a[href*="backup"],
.actions a[href*="restore"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
}

.actions a[href*="print"]:hover,
.actions a[href*="pdf"]:hover,
.actions a[href*="backup"]:hover,
.actions a[href*="restore"]:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Search/Filter/Refresh - Cyan */
.actions a[href*="search"],
.actions a[href*="filter"],
.actions a[href*="refresh"] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
}

.actions a[href*="search"]:hover,
.actions a[href*="filter"]:hover,
.actions a[href*="refresh"]:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   COURSES SIDEBAR - WHITE TEXT ON PURPLE
   ======================================== */
#courses .panel-heading,
.panel-group#courses .panel-heading,
div[id*="courses"] .panel-heading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

a[href="#coursesCollapse"],
a[href="#coursesCollapse"] *,
#courses .panel-heading a,
#courses .panel-heading *,
#courses .panel-title,
#courses .panel-title * {
    color: white !important;
    text-decoration: none !important;
}

/* Sidebar content - dark text */
.panel-body,
.panel-collapse {
    background: white !important;
}

.panel-body *,
.panel-collapse * {
    color: #333 !important;
}

.panel-body a,
.panel-collapse a {
    color: #667eea !important;
}

/* ========================================
   CLEAN LINKS - NO UNDERLINES
   ======================================== */
a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

.navbar-nav > li > a:hover {
    text-decoration: none !important;
}

/* ========================================
   FORMS - CONSISTENT
   ======================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    font-size: 14px !important;
    padding: 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
}

.form-control:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* ========================================
   TABLES - CLEAN
   ======================================== */
.table {
    font-size: 14px !important;
}

.table thead th {
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #f9fafb !important;
}

.table tbody tr:hover {
    background: #f9fafb !important;
}

/* ========================================
   ENSURE TEXT VISIBILITY
   ======================================== */
.btn-primary,
.btn-primary:hover,
.btn-success,
.btn-success:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-info,
.btn-info:hover {
    color: white !important;
}

.btn-primary *,
.btn-primary:hover *,
.btn-success *,
.btn-success:hover *,
.btn-warning *,
.btn-warning:hover *,
.btn-danger *,
.btn-danger:hover *,
.btn-info *,
.btn-info:hover * {
    color: white !important;
}

/* Actions buttons text always visible */
.actions a,
.actions a:hover,
.actions button,
.actions button:hover {
    color: white !important;
}

.actions a *,
.actions a:hover *,
.actions button *,
.actions button:hover * {
    color: white !important;
}

/* ========================================
   FIX: Visibility Button Always Visible
   ======================================== */
/* Override base.css overflow:hidden that hides visibility button until hover */
#course_tools .content,
.course-tool .content {
    overflow: visible !important;
    height: auto !important;
    white-space: normal !important;
}

/* Remove hover animation/transform on card titles */
.course-tool .content a:hover,
.course-tool a.tool-card-link:hover {
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ========================================
   FIX: Attendance Filter - Black Text
   ======================================== */
/* Force all text in attendance filter form to be black */
form[name="filter"] .col-md-2,
form[name="filter"] label,
form[name="filter"] fieldset .col-md-2,
form[name="filter"] fieldset div {
    color: #000000 !important;
}

/* Dropdown button text must be black */
form[name="filter"] .btn-default,
form[name="filter"] .btn-default .filter-option-inner-inner,
form[name="filter"] .dropdown-toggle,
form[name="filter"] .filter-option,
form[name="filter"] .filter-option-inner,
form[name="filter"] .filter-option-inner-inner {
    color: #000000 !important;
    background: #ffffff !important;
}

/* Dropdown menu items */
form[name="filter"] .dropdown-menu li a {
    color: #000000 !important;
}

/* Search box in dropdown */
form[name="filter"] .bs-searchbox input {
    color: #000000 !important;
    background: #ffffff !important;
}

/* ========================================
   Hide Confirmation Messages Completely
   ======================================== */
#id_confirmation_message,
.alert.alert-success,
.alert.alert-info,
.confirmation-message,
.normal-message {
    display: none !important;
}

/* ========================================
   User Dropdown Menu - Hover Effects
   ======================================== */
.avatar-user .dropdown-menu {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
    padding: 8px 0 !important;
    min-width: 240px !important;
}

.avatar-user .dropdown-menu .user-header {
    padding: 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.avatar-user .dropdown-menu .user-header img.img-circle {
    width: 64px !important;
    height: 64px !important;
    border: 3px solid #f3f4f6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 8px !important;
}

.avatar-user .dropdown-menu .user-header .name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 8px 0 4px 0 !important;
}

.avatar-user .dropdown-menu .user-header p {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

.avatar-user .dropdown-menu .divider {
    margin: 8px 0 !important;
    border-top: 1px solid #e5e7eb !important;
}

.avatar-user .dropdown-menu .user-body {
    padding: 0 !important;
}

.avatar-user .dropdown-menu .user-body a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
}

.avatar-user .dropdown-menu .user-body a:hover {
    background: #f9fafb !important;
    color: #111827 !important;
    border-left-color: #7c3aed !important;
    padding-left: 24px !important;
}

.avatar-user .dropdown-menu .user-body a em {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    color: inherit !important;
}

.avatar-user .dropdown-menu .user-body a#logout_button {
    color: #dc2626 !important;
    margin-top: 4px !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 16px !important;
}

.avatar-user .dropdown-menu .user-body a#logout_button:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left-color: #dc2626 !important;
}

/* tamayuzCore: Fix dropdown overflow to show all menu items */
#user-dropdown-menu.dropdown-menu,
.dropdown-menu {
    overflow: visible !important;
    max-height: none !important;
}

/* tamayuzCore: Ensure My Certificates menu item is always visible */
#tamayuz-cert-menu-item,
#tamayuz-cert-menu-item-2,
li#tamayuz-cert-menu-item,
li#tamayuz-cert-menu-item-2,
li.user-body#tamayuz-cert-menu-item,
li.user-body#tamayuz-cert-menu-item-2,
li.user-body a[href*="my_certificates"],
li.user-body a[title*="MyCertificates"],
.dropdown-menu .user-body a[href*="my_certificates"],
.dropdown-menu li.user-body a[href*="my_certificates"],
#user-dropdown-menu .user-body a[href*="my_certificates"],
.dropdown-menu li.user-body a[title*="MyCertificates"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
}

/* tamayuzCore: Ensure My Certificates menu item is always visible - matches Inbox structure */
.dropdown-menu .user-body a[href*="my_certificates"],
#user-dropdown-menu .user-body a[href*="my_certificates"],
li.user-body a[href*="my_certificates"],
li.user-body a[title*="MyCertificates"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* tamayuzCore: Ensure certificate download button is always visible - HIGH SPECIFICITY */
.tamayuz-certificates-container .certificate-actions .btn-success,
.tamayuz-certificates-container .certificate-actions .tamayuz-cert-download-btn,
.tamayuz-certificates-container .certificate-actions a[href*="action=export"],
.tamayuz-certificates-container .certificate-actions a.btn-success,
.certificate-card .certificate-actions .btn-success,
.certificate-card .certificate-actions a[href*="export"],
div.certificate-actions a.btn-success {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
    clip: auto !important;
    position: relative !important;
}

/* ========================================
   Course Toolbar - Modern Labeled Buttons
   ======================================== */
.toolbar-edit .btn-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.toolbar-edit .btn-group .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.toolbar-edit .btn-group .btn:hover {
    background: #f9fafb !important;
    border-color: #7c3aed !important;
    color: #7c3aed !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15) !important;
}

.toolbar-edit .btn-group .btn em {
    font-size: 16px !important;
}

/* Add text labels to toolbar buttons */
.toolbar-edit .btn-group .btn[title="Edit"]::after {
    content: 'Edit' !important;
}

.toolbar-edit .btn-group .btn[title="Customize icons"]::after {
    content: 'Customize' !important;
}

.toolbar-edit .btn-group .btn.show-hide-all-tools.visible-all::after {
    content: 'Show All' !important;
}

.toolbar-edit .btn-group .btn.show-hide-all-tools.invisible-all::after {
    content: 'Hide All' !important;
}

.toolbar-edit .btn-group .btn[onclick*="confirm"]::after {
    content: 'Delete' !important;
}

/* Hide one of the show/hide buttons - keep only one visible */
.toolbar-edit .btn-group .btn.show-hide-all-tools.hidden {
    display: none !important;
}

/* Delete button - red styling */
.toolbar-edit .btn-group .btn[onclick*="confirm"] {
    color: #dc2626 !important;
}

.toolbar-edit .btn-group .btn[onclick*="confirm"]:hover {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #991b1b !important;
}