*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
}

body{
    /* height:100vh; */
    font-family:'Cairo',sans-serif;
    background:#f5f6fa;
    direction:rtl;
    overflow:hidden;
    /* padding:10px; */
}

.dashboard{
    display:flex;
    gap:8px;
    height:100vh;
    padding:6px;
}

.main-layout{
    flex:1;
    display:flex;
    flex-direction:column;
  min-width: 0;

 overflow:hidden;
}

#navbar{
    margin-bottom:10px;
}

#content{
    flex:1;
    background:#fff;
    border-radius:16px;
    /* padding:5px; */
      width: 100%;
   box-shadow: 0 4px 15px rgba(0,0,0,0.03);
     overflow-y:auto;
    overflow-x:auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-size: 14.5px;
}

#content::-webkit-scrollbar{
    display: none; 
    width: 0;
    height: 0;
}

/* Mobile-only wallet card (the sidebar one disappears with the sidebar). */
.mobile-balance{
    display:none;
}

@media (max-width:768px){

    #sidebar,
    .sidebar{
        display:none !important;
    }

    .mobile-balance{
        display:block;
        /* padding:12px 14px 0; */
    }

    /* Compact horizontal strip: [icon + vault badge] [label] ... [amount] —
       the tall sidebar layout wastes too much vertical space on phones. */
   .mobile-balance .balance-card{
    /* display:flex; */
    align-items:center;
    gap:8px;               
    padding:12px 14px;
    margin-bottom:12px;
    border-radius:16px;
    min-width:0;           
    overflow:hidden;
}

.mobile-balance .balance-card__top{
    margin: bottom 4px;;
    gap:8px;
    justify-content:flex-start;
    flex-shrink:0;        
}

.mobile-balance .balance-card__label{
    margin-bottom:0;
    flex:1;
    min-width:0;           
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
}

.mobile-balance .balance-card__amount{
    margin-bottom:0;
    flex-shrink:0;
    white-space:nowrap;     
    display:flex;
    align-items:baseline;
    gap:3px;
}

.mobile-balance .balance-card__amount .value{
    font-size:18px;         
}

@media (max-width:340px){
    .mobile-balance .balance-card__badge{
        font-size:10px;
        padding:4px 8px;
    }
    .mobile-balance .balance-card__label{
        font-size:10px;
    }
    .mobile-balance .balance-card__amount .value{
        font-size:16px;
    }
}

    #bottom-nav .bottom-nav{
        display:flex !important;
    }

    #content{
        padding-bottom:90px;
    }
}


 html[dir="rtl"] .dashboard{
    flex-direction: row;
}

html[dir="ltr"] .dashboard{
    flex-direction: row-reverse;
}


:root {
    --bs-body-font-family: 'Cairo', sans-serif;
    --bs-font-sans-serif: 'Cairo', sans-serif;
}

/* Force Cairo on every element EXCEPT FontAwesome icons (which keep their icon font). */
body,
body :not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]) {
    font-family: 'Cairo', sans-serif !important;
}

 /* required * class */
.required::after {
    content: "*";
    color: #ef4444;
}

.message-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Validation messages must always read as errors — red, never muted gray.
   Defined globally so every form gets it even without page-local styles. */
.uc-error-hint {
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Bootstrap hides .invalid-feedback unless the input has .is-invalid — but our
   blades only render it inside @error, so it must always be visible (and red). */
.invalid-feedback {
    display: block;
    color: #ef4444;
}

.actions-menu-divider {
    height: 1px;
    background: #f1f5f9;
    /* margin: 6px 4px; */
}


#global-toast {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    min-width: 280px;
    max-width: min(92vw, 440px);
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

#global-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#global-toast.success {
    background: #047857;
}

#global-toast.error {
    background: #b91c1c;
}

#global-toast .toast-icon {
    font-size: 1rem;
    line-height: 1;
}