/* Material Icons Sizing Fix */
.material-icons {
    font-size: 24px !important; /* Default size */
    line-height: 1 !important;
    vertical-align: middle !important;
    width: 24px !important;
    height: 24px !important;
    overflow: hidden !important;
}

/* Specific size modifiers */
.material-icons.text-sm {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

.material-icons.text-lg {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
}

.material-icons.text-xl {
    font-size: 36px !important;
    width: 36px !important;
    height: 36px !important;
}

.material-icons.text-2xl {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
}

/* Debug toolbar fixes */
#djDebugToolbar {
    max-height: 400px !important;
    overflow-y: auto !important;
}

#djDebugToolbar .djDebugPanelList {
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Custom Comma font for brand elements */
@font-face {
    font-family: 'COMMA';
    src: url('/static/images/placeholders/COMMARegular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.comma-font,
.brand-comma {
    font-family: 'COMMA', 'Barlow', sans-serif !important;
}

/* Ensure logo loads properly */
.brand-logo {
    max-height: 40px;
    width: auto;
}