/* =========================================
   MORZO SocietyOS
   Application Core Styles
========================================= */


/* =========================================
   APPLICATION THEME
========================================= */


body {


    background:

    var(--bg-primary);


    color:

    var(--text-primary);


}




/* =========================================
   GLOBAL APP WRAPPER
========================================= */


#app {


    width:

    100%;


    min-height:

    100vh;


}





/* =========================================
   BACKGROUND UTILITIES
========================================= */


.bg-primary {


    background:

    var(--morzo-primary);


    color:

    var(--morzo-white);


}



.bg-accent {


    background:

    var(--morzo-accent);


    color:

    var(--morzo-primary);


}



.bg-light {


    background:

    var(--bg-secondary);


}



.bg-white {


    background:

    white;


}





/* =========================================
   TEXT UTILITIES
========================================= */


.text-primary {


    color:

    var(--morzo-primary);


}



.text-accent {


    color:

    var(--morzo-accent-dark);


}



.text-success {


    color:

    var(--color-success);


}



.text-warning {


    color:

    var(--color-warning);


}



.text-danger {


    color:

    var(--color-danger);


}





.text-center {


    text-align:

    center;


}



.text-left {


    text-align:

    left;


}



.text-right {


    text-align:

    right;


}





/* =========================================
   DISPLAY UTILITIES
========================================= */


.hidden {


    display:

    none !important;


}



.block {


    display:

    block;


}



.inline-block {


    display:

    inline-block;


}



.flex {


    display:

    flex;


}





/* =========================================
   ALIGNMENT UTILITIES
========================================= */


.items-center {


    align-items:

    center;


}



.justify-center {


    justify-content:

    center;


}



.justify-between {


    justify-content:

    space-between;


}





/* =========================================
   BORDER UTILITIES
========================================= */


.border {


    border:

    1px solid var(--border-light);


}



.rounded {


    border-radius:

    var(--radius-md);


}



.rounded-lg {


    border-radius:

    var(--radius-lg);


}



.rounded-full {


    border-radius:

    var(--radius-full);


}





/* =========================================
   SHADOW UTILITIES
========================================= */


.shadow-sm {


    box-shadow:

    var(--shadow-sm);


}



.shadow-md {


    box-shadow:

    var(--shadow-md);


}



.shadow-lg {


    box-shadow:

    var(--shadow-lg);


}





/* =========================================
   POSITION UTILITIES
========================================= */


.relative {


    position:

    relative;


}



.absolute {


    position:

    absolute;


}



.fixed {


    position:

    fixed;


}





/* =========================================
   OVERFLOW
========================================= */


.overflow-hidden {


    overflow:

    hidden;


}



.overflow-auto {


    overflow:

    auto;


}





/* =========================================
   CURSOR
========================================= */


.cursor-pointer {


    cursor:

    pointer;


}





/* =========================================
   TRANSITION HELPERS
========================================= */


.transition {


    transition:

    var(--transition-normal);


}





/* =========================================
   ACCESSIBILITY
========================================= */


.sr-only {


    position:

    absolute;


    width:

    1px;


    height:

    1px;


    padding:

    0;


    margin:

    -1px;


    overflow:

    hidden;


    clip:

    rect(
        0,
        0,
        0,
        0
    );


    white-space:

    nowrap;


    border:

    0;


}





/* =========================================
   APPLICATION LOADING STATE
========================================= */


.app-loading {


    min-height:

    100vh;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    background:

    var(--morzo-primary);


    color:

    var(--morzo-white);


}





/* =========================================
   SCROLLBAR STYLE
========================================= */


::-webkit-scrollbar {


    width:

    10px;


}



::-webkit-scrollbar-track {


    background:

    var(--bg-secondary);


}



::-webkit-scrollbar-thumb {


    background:

    var(--morzo-primary);


    border-radius:

    var(--radius-full);


}



::-webkit-scrollbar-thumb:hover {


    background:

    var(--morzo-primary-light);


}





/* =========================================
   TOAST NOTIFICATIONS
========================================= */

.toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: 12px;

    width: min(380px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 18px;

    background: var(--morzo-primary);
    color: var(--morzo-white);

    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);

    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--morzo-accent);
    color: var(--morzo-primary);

    font-weight: 700;
}

.toast-message {
    font-size: 0.95rem;
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;

    border: 0;
    background: transparent;

    color: var(--morzo-white);

    font-size: 1.4rem;
    line-height: 1;

    cursor: pointer;
}

.toast-close:hover {
    opacity: 0.75;
}

/* Toast Types */

.toast-error,
.toast-danger {
    background: var(--color-danger);
}

.toast-warning {
    background: var(--color-warning);
    color: var(--morzo-primary);
}

.toast-info {
    background: var(--morzo-primary);
}





/* =========================================
   FINAL APP POLISH
========================================= */


button,
input,
textarea,
select {


    transition:

    var(--transition-fast);


}



img {


    user-select:

    none;


}





/* =========================================
   PRINT SUPPORT
========================================= */


@media print {


    .no-print {


        display:

        none !important;


    }



    body {


        background:

        white;


    }


}