@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import 'Global.css';
@import 'Dialog.css';
@import 'TaskComponent.css';
@import 'tables.css';
@import 'GoalsPrivate.css';
@import 'header.css';
@import 'icons-buttons.css';
@import 'login.css';
@import 'GoalsOrg.css';
@import 'IndividualGoal.css';
@import 'HomePage.css';
@import 'Settings.css';
@import 'Organisation.css';
@import 'Planning.css';
@import 'Responsive.css';
@import 'blazorUI.css';
@import 'UI-Components.css';
@import 'Reflect.css';
@import 'L-menu-drawer.css';
@import 'SearchTop.css';
@import 'NoteTab.css';
@import 'form.css';
@import 'HomeComponent.css';
@import 'Touch.css';
@import 'ExpandCollapse.css'; /* <-- last*/

.aktheme .mud-appbar {
    background-color: var( --dicipli-bg-transparent);
    color: var(--mud-palette-appbar-text);
}

.aktheme .dicip-app-bar .mud-button-filled.mud-button-filled-secondary,
.aktheme .dicip-app-bar .mud-button-filled.mud-button-filled-secondary:hover {
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--dicip-tab-act-bdr);
    background-color: var(--mud-palette-secondary);
    border-radius: var(--dicipli-border-radius-12);
}
/* svg topbar*/
.mud-icon-root svg g {
    stroke: var(--svg-icon-color);
}

.dicip-app-bar {
    border-bottom: 1px solid var(--dicipli-card-border);
}
/*loader*/
.loading-progress circle:last-child {
    stroke: var( --mud-loader-primary, #3266EA) /* Loading circle color */
}

.loading-progress-text {
    color: var(--mud-palette-primary);
}

    .loading-progress-text:after {
        color: var( --mud-palette-primary);
    }
/*loader*/

/*.aktheme */
.aktheme .ak-main-Content .mud-tabs-tabbar .mud-tab.mud-tab-active {
    border: 1px solid var(--dicip-tab-act-bdr); /* transp in cars*/
    background-color: var(--mud-dicip-tab-btn-bg) !important;
    color: var(--dicip-tab-resverse-txt-p) !important;
    border-radius: var(--dicipli-border-radius-12);
}

/*menu footer logo box*/
.aktheme .mud-drawer .logo-box-dicip .mud-typography.mud-typography-caption {
    color: var(--mud-dicip-text-white) !important;
}

.aktheme .mud-drawer .mud-nav-link .mud-icon-root svg g,
.aktheme .mud-drawer .mud-nav-link {
    color: var(--mud-palette-text-primary);
    fill: currentColor;
    stroke: currentColor;
    border-radius: var(--dicipli-border-radius-12);
}

.aktheme .mud-appbar {
    background-color: var( --dicipli-bg-transparent);
    color: var(--mud-palette-appbar-text);
}

.aktheme .dicip-app-bar .mud-button-filled.mud-button-filled-secondary,
.aktheme .dicip-app-bar .mud-button-filled.mud-button-filled-secondary:hover {
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--dicip-tab-act-bdr);
    background-color: var(--mud-palette-secondary);
    border-radius: var(--dicipli-border-radius-12);
}
/* svg topbar*/
.mud-icon-root
svg g {
    stroke: var(--svg-icon-color);
}

.dicip-app-bar {
    border-bottom: 1px solid var(--dicipli-card-border);
}
/*loader*/
.loading-progress
circle:last-child {
    stroke: var( --mud-loader-primary, #3266EA) /* Loading circle color */
}

.loading-progress-text {
    color: var(--mud-palette-primary);
}

    .loading-progress-text:after {
        color: var( --mud-palette-primary);
    }
/*loader*/

/*.aktheme */
.aktheme .ak-main-Content .mud-tabs-tabbar .mud-tab.mud-tab-active {
    border: 1px solid var(--dicip-tab-act-bdr); /* transp in cars*/
    background-color: var(--mud-dicip-tab-btn-bg) !important;
    color: var(--dicip-tab-resverse-txt-p) !important;
}

/*menu footer logo box*/
.aktheme .mud-drawer .logo-box-dicip .mud-typography.mud-typography-caption {
    color: var(--mud-palette-text-primary) !important;
    /* background: #ffff003d; */
}

.aktheme .mud-drawer .mud-nav-link .mud-icon-root
svg g,
.aktheme .mud-drawer .mud-nav-link {
    color: var(--mud-palette-text-primary);
    fill: currentColor;
    stroke: currentColor;
}

    .aktheme .mud-drawer-mini .mud-nav-link.active,
    .aktheme .mud-drawer .mud-nav-link.active .mud-icon-root
    svg g {
        fill: currentColor;
        color: var( --mud-palette-drawer-icon-activetxt) !important;
        background-color: transparent !important;
        stroke: currentColor;
    }

/*menu e*/

/*menuitem old*/
.dicip-main-drawer .mud-nav-item:has( a.active) .mud-icon-root {
    fill: currentColor;
    color: var( --mud-palette-drawer-icon-activetxt) !important;
    background-color: transparent !important;
    stroke: currentColor;
}
/*menuitem old*/

/*left menu s*/
/* goal card*/
.aktheme .GoalCardMaster .goal-card .custom-svg-aro
path {
    fill: var(--dicipli-icon-dark-light-theme) !important;
}

.aktheme .GoalCardMaster .goal-card .dateStyl
svg path {
    stroke: var(--dicipli-icon-dark-light-theme) !important;
}

.aktheme .ak-main-Content .mud-tabs-tabbar .mud-tab {
    color: var(--mud-palette-text-primary);
}

.mud-button-outlined.mud-button-outlined-tertiary {
    color: var(--mud-palette-text-primary) !important;
}


.aktheme .mud-dialog-content .mud-tabs-tabbar .mud-tab.mud-tab-active, .aktheme .dicip-toggle-select-active {
    color: var(--dicip-tab-resverse-txt-p) !important;
}

.dicip-toggle-select-active {
    background-color: var(--mud-dicip-tab-btn-bg) !important;
    color: var(--dicip-tab-resverse-txt-p) !important;
    border: 1px solid var(--dicip-tab-act-bdr) !important;
}



.aktheme .mud-input-control-boolean-input .mud-icon-button.mud-switch-base {
    color: var(--svg-icon-whiteonly);
}

.aktheme .mud-dialog-title .mud-icon-root.mud-svg-icon {
    fill: currentColor;
    color: black;
    color: var(--svg-icon-Darkonly);
}

.taskCardContain .mud-icon-root.mud-svg-icon {
    fill: currentColor;
    color: var(--dicipli-icon-dark-light-theme);
}

.aktheme .taskCardContain .dateStyl .mud-icon-button .mud-icon-button-label .mud-icon-root
svg path {
    stroke: var(--svg-icon-color) !important;
}

.aktheme .mud-dialog-content .mud-icon-root.mud-svg-icon {
    fill: currentColor;
}

.aktheme .ak-loading-progress {
    fill: currentColor;
    color: var(--dicipli-icon-dark-light-theme);
}

/*dialog secondary button*/
.aktheme .mud-button-filled.mud-button-filled-secondary,
.aktheme .mud-button-filled.mud-button-filled-secondary:hover {
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--dicip-tab-act-bdr);
    background-color: rgb(179 184 194 / 61%);
}

.aktheme .logo-box-dicip {
    width: 100% !important;
    border-radius: var(--dicipli-border-radius-8) !important;
    padding: 10px !important;
}

.aktheme .mud-drawer-mini .mud-nav-link.active,
.aktheme .mud-drawer .mud-nav-link.active .mud-icon-root svg g {
    fill: currentColor;
    color: var( --mud-palette-drawer-icon-activetxt) !important;
    background-color: transparent !important;
    stroke: currentColor;
}

/*menu e*/

/*menuitem old*/
.dicip-main-drawer .mud-nav-item:has(a.active) .mud-icon-root {
    fill: currentColor;
    color: var( --mud-palette-drawer-icon-activetxt) !important;
    background-color: transparent !important;
    stroke: currentColor;
}
/*menuitem old*/


/*left menu s*/ /* goal card*/
.aktheme .GoalCardMaster .goal-card .custom-svg-aro path {
    fill: var(--dicipli-icon-dark-light-theme) !important;
}

.aktheme .GoalCardMaster .goal-card .dateStyl svg path {
    stroke: var(--dicipli-icon-dark-light-theme) !important;
}

.aktheme .ak-main-Content .mud-tabs-tabbar .mud-tab {
    color: var(--mud-palette-text-primary) !important;
    font-size: 1rem;
    color: var(--mud-palette-primary);
    --tw-bg-opacity: 1;
    border-radius: 12px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.4rem;
    padding-bottom: .4rem;
    border: none;
    transition: none;
    color: rgb(31 41 55 / var(--tw-text-opacity));
    font-weight: normal;
    border-radius: var(--dicipli-border-radius-16);
    font-size: 1rem;
    letter-spacing: 0.01em;
    line-height: 1.75;
    min-height: 44px;
}

.mud-button-outlined.mud-button-outlined-tertiary {
    color: var(--mud-palette-text-primary) !important;
}


.aktheme .mud-dialog-content .mud-tabs-tabbar .mud-tab.mud-tab-active, .aktheme .dicip-toggle-select-active {
    color: var(--dicip-tab-resverse-txt-p) !important;
}

.dicip-toggle-select-active {
    background-color: var(--mud-dicip-tab-btn-bg) !important;
    color: var(--dicip-tab-resverse-txt-p) !important;
    border: 1px solid var(--dicip-tab-act-bdr) !important;
}


.aktheme .mud-input-control-boolean-input .mud-icon-button.mud-switch-base {
    color: var(--svg-icon-whiteonly);
}

.aktheme .mud-dialog-title .mud-icon-root.mud-svg-icon {
    fill: currentColor;
    color: black;
    color: var(--svg-icon-Darkonly);
}

.taskCardContain .mud-icon-root.mud-svg-icon {
    fill: currentColor;
    color: var(--dicipli-icon-dark-light-theme);
}

.aktheme .taskCardContain .dateStyl .mud-icon-button .mud-icon-button-label .mud-icon-root svg path {
    stroke: var(--svg-icon-color) !important;
}

.aktheme .mud-dialog-content .mud-icon-root.mud-svg-icon {
    fill: currentColor;
}

.aktheme .ak-loading-progress {
    fill: currentColor;
    color: var(--dicipli-icon-dark-light-theme);
}

/*dialog secondary button*/
.aktheme .mud-button-filled.mud-button-filled-secondary,
.aktheme .mud-button-filled.mud-button-filled-secondary:hover {
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--dicip-tab-act-bdr);
    background-color: rgb(179 184 194 / 61%);
    border-radius: var(--dicipli-border-radius-12);
}

.aktheme .logo-box-dicip {
    width: 100% !important;
    border-radius: var(--dicipli-border-radius-8) !important;
    padding: 10px !important;
}
/*logo bg*/
.aktheme .searchMaster .search-btn-r,
.aktheme .searchMaster .search-btn-r:hover {
    color: var(--dicipli-icon-dark-light-theme) !important;
}


/*:::::::::::::::::::::::: forms UI common :::::::::::::::::::::::::::::::::*/

body.aktheme {
    letter-spacing: 0.015em;
}


/*::::::::::::::::::::::::::::::::::label:::::::::::::::::::::::::::::*/

.aktheme .input-white.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
.aktheme .input-whiteB.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    background-color: var(--dicipli-bg-transparent);
    line-height: 20px !important;
    height: 26px !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    color: var(--dicipli-label-form);
    transform: translate(14px, 20px) scale(1);
}

.aktheme .mud-input-label.mud-shrink {
    font-size: 19px !important;
    color: var(--dicipli-label-form);
}

.aktheme .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.aktheme .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(0px, -19px) scale(0.81) !important;
    max-width: calc(100% - 14px);
    font-size: 19px !important;
    color: var(--dicipli-label-form);
}

.aktheme .LoginRegisterDOBOnly label.mud-input-label-outlined {
    background-color: var(--dicipli-bg-transparent);
    line-height: 20px !important;
    height: 26px !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    color: var(--dicipli-label-form);
}
/*::::::::::::::::::::::::::::::::::label:::::::::::::::::::::::::::::*/

.aktheme .mud-dialog-content .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    background: transparent !important;
    pointer-events: none;
    cursor: unset;
    user-select: unset;
}

aktheme .input-inline-c-space .input-whiteB.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, 20px) scale(1);
}

.aktheme .input-inline-c .input-whiteB.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, 20px) scale(1);
}

.aktheme .mud-dialog-content .input-white.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
.aktheme .mud-dialog-content .input-whiteB.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, 16px) scale(1);
}

.aktheme .LB-menu-txBox {
    display: flex !important;
    flex-direction: column !important;
}

.aktheme .flag-menu {
    position: absolute;
    right: 23px;
}
/* ============================================
   GLOBAL TAB FIXES - Add to bottom of app.css
   Works everywhere: dialogs, main content, etc.
   ============================================ */

/* Base tab styling - applies to all tabs */
.aktheme .mud-tabs .mud-tab {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
    transition: all 200ms ease;
    border-radius: var(--dicipli-border-radius-12);
    position: relative;
}

    /* Active tab - CLEAR visual indicator with background */
    .aktheme .mud-tabs .mud-tab.mud-tab-active {
        background-color: rgba(33, 150, 243, 0.08) !important; /* Light blue tint */
        color: var(--mud-palette-primary) !important;
        font-weight: 600 !important;
        border: 1px solid rgba(33, 150, 243, 0.3) !important;
        border-bottom: none !important; /* Remove bottom border for folder effect */
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); /* Shadow on top/sides only */
        position: relative;
        z-index: 1; /* Sits above panel border */
    }

/* Active tab underline/slider */
.aktheme .mud-tabs .mud-tab-slider {
    background-color: var(--mud-palette-primary) !important;
    height: 3px !important;
}

/* Hover state for inactive tabs */
.aktheme .mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.87);
}

/* ============================================
   DIALOG TABS - Override existing styles
   ============================================ */

/* Dialog tabs need same treatment */
.aktheme .mud-dialog-content .mud-tabs-tabbar .mud-tab {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

    .aktheme .mud-dialog-content .mud-tabs-tabbar .mud-tab.mud-tab-active {
        background-color: rgba(33, 150, 243, 0.08) !important;
        color: var(--mud-palette-primary) !important;
        font-weight: 600 !important;
        border: 1px solid rgba(33, 150, 243, 0.3) !important;
        border-bottom: none !important; /* Folder effect */
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
        position: relative;
        z-index: 1;
    }

/* Dialog tab panels - folder continuation */
.aktheme .mud-dialog-content .mud-tabs-panels {
    background-color: rgba(33, 150, 243, 0.08) !important;
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-top: none;
    border-radius: 0 12px 12px 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   MAIN CONTENT TABS - Override your existing
   ============================================ */

.aktheme .ak-main-Content .mud-tabs-tabbar .mud-tab.mud-tab-active {
    background-color: rgba(33, 150, 243, 0.08) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(33, 150, 243, 0.3) !important;
    border-bottom: none !important; /* Folder effect */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

/* Main content tab panels - folder continuation */
.aktheme .ak-main-Content .mud-tabs-panels {
    background-color: rgba(33, 150, 243, 0.08) !important;
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-top: none;
    border-radius: 0 12px 12px 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   TAB PANEL CONTENT - Matches active tab color
   Creates "folder" effect
   ============================================ */

/* Panel content area */
.aktheme .mud-tabs-panels {
    background-color: rgba(33, 150, 243, 0.08) !important; /* Same as active tab */
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-top: none; /* Seamless connection with tab */
    border-radius: 0 12px 12px 12px; /* Round bottom corners + top-right */
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.aktheme .mud-tabpanel {
    background-color: transparent !important; /* Let parent color show through */
}

/* MudPaper in tabs - no gray */
.aktheme .mud-tabs .mud-paper {
    background-color: transparent !important;
}

/* Grid containers - no gray */
.aktheme .mud-grid {
    background-color: transparent !important;
}

.aktheme .mud-grid-item {
    background-color: transparent !important;
}

/* ============================================
   OPTIONAL: Improve tab bar appearance
   ============================================ */

/* Tab bar container */
.aktheme .mud-tabs-toolbar {
    background-color: transparent !important;
    border-bottom: none !important; /* Remove - panels have border now */
    padding: 4px 0;
    margin-bottom: -1px; /* Overlap with panel border for seamless look */
}

/* ============================================
   TASK ITEMS - Clean backgrounds
   ============================================ */

/* Override any gray from MudPaper */
.aktheme .bs-item {
    background-color: transparent !important;
}

    .aktheme .bs-item.bs-open {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .aktheme .bs-item.bs-done {
        background-color: rgba(0, 0, 0, 0.02) !important;
        opacity: 0.65;
    }

    .aktheme .bs-item.bs-open:hover {
        background-color: rgba(33, 150, 243, 0.06) !important;
        border-color: rgba(33, 150, 243, 0.25);
    }

    .aktheme .bs-item.bs-expanded {
        background-color: rgba(33, 150, 243, 0.1) !important;
        border-color: rgba(33, 150, 243, 0.3);
    }